{"name":"avatar","type":"registry:ui","files":[{"path":"avatar.tsx","type":"registry:ui","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"@base-ui-components/react/avatar\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst avatarVariants = cva(\n  \"relative flex shrink-0 items-center justify-center overflow-hidden bg-[var(--hui-color-background-neutral-secondary)] text-[var(--hui-color-foreground-base-primary)] [--fallback-font-size:calc(var(--hui-space-9,32px)*0.4)] [--fallback-letter-spacing:0.03em] outline-[0.5px] outline-[var(--hui-color-overlay-base-a2)] outline-offset-[-0.5px] select-none\",\n  {\n    variants: {\n      variant: {\n        solid: \"[--avatar-opacity:1]\",\n        soft: \"text-[var(--hui-color-foreground-base-primary)] [--avatar-opacity:0.2]\",\n      },\n      color: {\n        indigo:\n          \"[--avatar-hue:var(--hui-color-background-accent-emphasis)] [--avatar-color:var(--hui-color-foreground-accent-emphasis)]\",\n        orange:\n          \"[--avatar-hue:var(--hui-color-background-attention-emphasis)] [--avatar-color:var(--hui-color-foreground-attention-emphasis)]\",\n        mint: \"[--avatar-hue:var(--hui-color-background-success-emphasis)] [--avatar-color:var(--hui-color-foreground-success-emphasis)]\",\n        neutral:\n          \"[--avatar-hue:var(--hui-color-background-neutral-emphasis)] [--avatar-color:var(--hui-color-foreground-base-emphasis)]\",\n        sky: \"[--avatar-hue:var(--hui-color-viz-sky-9)] [--avatar-color:var(--hui-color-viz-sky-11)]\",\n        lime: \"[--avatar-hue:var(--hui-color-viz-lime-9)] [--avatar-color:var(--hui-color-viz-lime-11)]\",\n        grass:\n          \"[--avatar-hue:var(--hui-color-viz-grass-9)] [--avatar-color:var(--hui-color-viz-grass-11)]\",\n        cyan: \"[--avatar-hue:var(--hui-color-viz-cyan-9)] [--avatar-color:var(--hui-color-viz-cyan-11)]\",\n        iris: \"[--avatar-hue:var(--hui-color-viz-iris-9)] [--avatar-color:var(--hui-color-viz-iris-11)]\",\n        purple:\n          \"[--avatar-hue:var(--hui-color-viz-purple-9)] [--avatar-color:var(--hui-color-viz-purple-11)]\",\n        pink: \"[--avatar-hue:var(--hui-color-viz-pink-9)] [--avatar-color:var(--hui-color-viz-pink-11)]\",\n        crimson:\n          \"[--avatar-hue:var(--hui-color-viz-crimson-9)] [--avatar-color:var(--hui-color-viz-crimson-11)]\",\n        gold: \"[--avatar-hue:var(--hui-color-viz-gold-9)] [--avatar-color:var(--hui-color-viz-gold-11)]\",\n      },\n      size: {\n        \"1\": \"size-[var(--hui-space-5,16px)] rounded-[var(--hui-radius-2)] [--fallback-font-size:calc(var(--hui-space-5,16px)*0.4)] [--fallback-letter-spacing:0.05em]\",\n        \"2\": \"size-[var(--hui-space-6,20px)] rounded-[var(--hui-radius-2)] [--fallback-font-size:calc(var(--hui-space-6,20px)*0.4)] [--fallback-letter-spacing:0.05em]\",\n        \"3\": \"size-[var(--hui-space-7,24px)] rounded-[var(--hui-radius-2)] [--fallback-font-size:calc(var(--hui-space-7,24px)*0.4)] [--fallback-letter-spacing:0.04em]\",\n        \"4\": \"size-[var(--hui-space-8,28px)] rounded-[var(--hui-radius-2)] [--fallback-font-size:calc(var(--hui-space-8,28px)*0.35)] [--fallback-letter-spacing:0.04em]\",\n        \"5\": \"size-[var(--hui-space-9,32px)] rounded-[var(--hui-radius-2)] [--fallback-font-size:calc(var(--hui-space-9,32px)*0.4)] [--fallback-letter-spacing:0.03em]\",\n        \"6\": \"size-[var(--hui-space-10,40px)] rounded-[var(--hui-radius-4)] [--fallback-font-size:calc(var(--hui-space-10,40px)*0.35)] [--fallback-letter-spacing:0.02em]\",\n        \"7\": \"size-[var(--hui-space-11,48px)] rounded-[var(--hui-radius-4)] [--fallback-font-size:calc(var(--hui-space-11,48px)*0.35)] [--fallback-letter-spacing:0.01em]\",\n        \"8\": \"size-[var(--hui-space-12,56px)] rounded-[var(--hui-radius-4)] [--fallback-font-size:calc(var(--hui-space-12,56px)*0.3)] [--fallback-letter-spacing:0.01em]\",\n        \"9\": \"size-[var(--hui-space-13,64px)] rounded-[var(--hui-radius-4)] [--fallback-font-size:calc(var(--hui-space-13,64px)*0.3)] [--fallback-letter-spacing:0em]\",\n        \"10\": \"size-[var(--hui-space-14,72px)] rounded-[var(--hui-radius-5)] [--fallback-font-size:calc(var(--hui-space-14,72px)*0.3)] [--fallback-letter-spacing:0em]\",\n        \"11\": \"size-[var(--hui-space-15,80px)] rounded-[var(--hui-radius-5)] [--fallback-font-size:calc(var(--hui-space-15,80px)*0.3)] [--fallback-letter-spacing:0em]\",\n        \"12\": \"size-[var(--hui-space-16,96px)] rounded-[var(--hui-radius-5)] [--fallback-font-size:calc(var(--hui-space-16,96px)*0.3)] [--fallback-letter-spacing:-0.005em]\",\n        \"13\": \"size-[var(--hui-space-17,120px)] rounded-[var(--hui-radius-5)] [--fallback-font-size:calc(var(--hui-space-17,120px)*0.3)] [--fallback-letter-spacing:-0.01em]\",\n      },\n      shape: {\n        rounded: null,\n        full: \"rounded-[var(--hui-radius-full)]\",\n      },\n      disabled: {\n        true: \"opacity-50\",\n        false: null,\n      },\n    },\n    compoundVariants: [\n      {\n        variant: \"solid\",\n        color: \"indigo\",\n        className:\n          \"bg-[var(--hui-color-background-accent-emphasis)] text-[var(--hui-color-foreground-accent-emphasis)]\",\n      },\n      {\n        variant: \"solid\",\n        color: \"orange\",\n        className:\n          \"bg-[var(--hui-color-background-attention-emphasis)] text-[var(--hui-color-foreground-attention-primary-hover)]\",\n      },\n      {\n        variant: \"solid\",\n        color: \"mint\",\n        className:\n          \"bg-[var(--hui-color-background-success-emphasis)] text-[var(--hui-color-foreground-success-primary-hover)]\",\n      },\n      {\n        variant: \"solid\",\n        color: \"neutral\",\n        className:\n          \"bg-[var(--hui-color-background-neutral-emphasis)] text-[var(--hui-color-foreground-base-primary)]\",\n      },\n      {\n        variant: \"solid\",\n        color: \"sky\",\n        className:\n          \"bg-[var(--hui-color-viz-sky-9)] text-[var(--hui-color-viz-sky-11)]\",\n      },\n      {\n        variant: \"solid\",\n        color: \"lime\",\n        className:\n          \"bg-[var(--hui-color-viz-lime-9)] text-[var(--hui-color-viz-lime-11)]\",\n      },\n      {\n        variant: \"solid\",\n        color: \"grass\",\n        className:\n          \"bg-[var(--hui-color-viz-grass-8)] text-[var(--hui-color-viz-grass-11)]\",\n      },\n      {\n        variant: \"solid\",\n        color: \"cyan\",\n        className:\n          \"bg-[var(--hui-color-viz-cyan-8)] text-[var(--hui-color-viz-cyan-11)]\",\n      },\n      {\n        variant: \"solid\",\n        color: \"iris\",\n        className:\n          \"bg-[var(--hui-color-viz-iris-8)] text-[var(--hui-color-viz-iris-11)]\",\n      },\n      {\n        variant: \"solid\",\n        color: \"purple\",\n        className:\n          \"bg-[var(--hui-color-viz-purple-8)] text-[var(--hui-color-viz-purple-11)]\",\n      },\n      {\n        variant: \"solid\",\n        color: \"pink\",\n        className:\n          \"bg-[var(--hui-color-viz-pink-8)] text-[var(--hui-color-viz-pink-11)]\",\n      },\n      {\n        variant: \"solid\",\n        color: \"crimson\",\n        className:\n          \"bg-[var(--hui-color-viz-crimson-8)] text-[var(--hui-color-viz-crimson-11)]\",\n      },\n      {\n        variant: \"solid\",\n        color: \"gold\",\n        className:\n          \"bg-[var(--hui-color-viz-gold-8)] text-[var(--hui-color-viz-gold-11)]\",\n      },\n      {\n        variant: \"soft\",\n        color: \"indigo\",\n        className: \"bg-[var(--hui-color-background-accent-primary)]\",\n      },\n      {\n        variant: \"soft\",\n        color: \"orange\",\n        className: \"bg-[var(--hui-color-background-attention-primary)]\",\n      },\n      {\n        variant: \"soft\",\n        color: \"mint\",\n        className: \"bg-[var(--hui-color-background-success-primary)]\",\n      },\n      {\n        variant: \"soft\",\n        color: \"neutral\",\n        className: \"bg-[var(--hui-color-background-neutral-secondary)]\",\n      },\n      {\n        variant: \"soft\",\n        color: \"sky\",\n        className: \"bg-[var(--hui-color-viz-sky-6)]\",\n      },\n      {\n        variant: \"soft\",\n        color: \"lime\",\n        className: \"bg-[var(--hui-color-viz-lime-6)]\",\n      },\n      {\n        variant: \"soft\",\n        color: \"grass\",\n        className: \"bg-[var(--hui-color-viz-grass-6)]\",\n      },\n      {\n        variant: \"soft\",\n        color: \"cyan\",\n        className: \"bg-[var(--hui-color-viz-cyan-6)]\",\n      },\n      {\n        variant: \"soft\",\n        color: \"iris\",\n        className: \"bg-[var(--hui-color-viz-iris-6)]\",\n      },\n      {\n        variant: \"soft\",\n        color: \"purple\",\n        className: \"bg-[var(--hui-color-viz-purple-6)]\",\n      },\n      {\n        variant: \"soft\",\n        color: \"pink\",\n        className: \"bg-[var(--hui-color-viz-pink-6)]\",\n      },\n      {\n        variant: \"soft\",\n        color: \"crimson\",\n        className: \"bg-[var(--hui-color-viz-crimson-6)]\",\n      },\n      {\n        variant: \"soft\",\n        color: \"gold\",\n        className: \"bg-[var(--hui-color-viz-gold-6)]\",\n      },\n    ],\n    defaultVariants: {\n      variant: \"soft\",\n      color: \"neutral\",\n      size: \"5\",\n      shape: \"full\",\n      disabled: false,\n    },\n  }\n)\n\ntype AvatarProps = Omit<AvatarPrimitive.Root.Props, \"color\" | \"size\"> &\n  VariantProps<typeof avatarVariants>\n\nfunction Avatar({\n  className,\n  variant,\n  color,\n  size,\n  shape,\n  disabled,\n  ...props\n}: AvatarProps) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      aria-disabled={disabled || undefined}\n      className={cn(\n        avatarVariants({ variant, color, size, shape, disabled }),\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\n        \"flex size-full box-border object-cover align-middle motion-safe:animate-in motion-safe:fade-in-0 motion-safe:[animation-duration:var(--hui-duration-fast)] motion-safe:[animation-timing-function:var(--hui-ease-out)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: AvatarPrimitive.Fallback.Props) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"flex size-full items-center justify-center [font-size:var(--fallback-font-size)] [font-weight:var(--hui-font-weight-medium)] [letter-spacing:var(--fallback-letter-spacing,0.03em)] leading-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"absolute right-0 bottom-0 flex size-3.5 items-center justify-center rounded-full border-2 border-[var(--hui-color-background-base-primary)] bg-[var(--hui-color-background-accent-emphasis)] text-[0.5rem] text-[var(--hui-color-foreground-accent-emphasis)] [&_svg]:size-2.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"flex flex-row items-center [--avatar-overlap:1.2em] [&>*:not(:first-child)]:ml-[calc(-0.5*var(--avatar-overlap))] [&>[data-slot=avatar]]:box-content [&>[data-slot=avatar]]:border [&>[data-slot=avatar]]:border-[var(--hui-color-background-base-primary)] [&>[data-slot=avatar]]:![outline:none]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroupCount({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"relative inline-flex size-[var(--hui-space-9,32px)] shrink-0 items-center justify-center rounded-[var(--hui-radius-full)] border border-[var(--hui-color-background-base-primary)] bg-[var(--hui-color-background-neutral-secondary)] [font-size:calc(var(--hui-space-9,32px)*0.4)] [font-weight:var(--hui-font-weight-medium)] [letter-spacing:0.03em] leading-none text-[var(--hui-color-foreground-base-primary)] [&_svg]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarBadge,\n  AvatarGroup,\n  AvatarGroupCount,\n  avatarVariants,\n}\n","target":"components/ui/avatar.tsx"}],"dependencies":["@base-ui-components/react","class-variance-authority"]}