{"version":3,"file":"avatar.cjs","sources":["../../../components/avatar/avatar.tsx"],"sourcesContent":["'use client';\n\nimport { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';\nimport { cva, cx, VariantProps } from 'class-variance-authority';\nimport {\n  ComponentProps,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n  useRef,\n  useState\n} from 'react';\nimport styles from './avatar.module.css';\nimport { AVATAR_COLORS } from './utils';\n\n// Matches Base UI's AvatarRoot ImageLoadingStatus union.\ntype ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';\n\nconst avatar = cva(styles.avatar, {\n  variants: {\n    radius: {\n      small: styles['avatar-small'],\n      full: styles['avatar-full']\n    },\n    size: {\n      1: styles['avatar-size-1'],\n      2: styles['avatar-size-2'],\n      3: styles['avatar-size-3'],\n      4: styles['avatar-size-4'],\n      5: styles['avatar-size-5'],\n      6: styles['avatar-size-6'],\n      7: styles['avatar-size-7'],\n      8: styles['avatar-size-8'],\n      9: styles['avatar-size-9'],\n      10: styles['avatar-size-10'],\n      11: styles['avatar-size-11'],\n      12: styles['avatar-size-12'],\n      13: styles['avatar-size-13']\n    },\n    variant: {\n      solid: styles['avatar-solid'],\n      soft: styles['avatar-soft']\n    },\n    disabled: {\n      true: styles['avatar-disabled']\n    },\n    color: {\n      indigo: styles['avatar-color-indigo'],\n      orange: styles['avatar-color-orange'],\n      mint: styles['avatar-color-mint'],\n      neutral: styles['avatar-color-neutral'],\n      sky: styles['avatar-color-sky'],\n      lime: styles['avatar-color-lime'],\n      grass: styles['avatar-color-grass'],\n      cyan: styles['avatar-color-cyan'],\n      iris: styles['avatar-color-iris'],\n      purple: styles['avatar-color-purple'],\n      pink: styles['avatar-color-pink'],\n      crimson: styles['avatar-color-crimson'],\n      gold: styles['avatar-color-gold']\n    }\n  },\n  compoundVariants: [\n    {\n      variant: 'solid',\n      color: 'indigo',\n      className: styles['avatar-solid-indigo']\n    },\n    {\n      variant: 'solid',\n      color: 'orange',\n      className: styles['avatar-solid-orange']\n    },\n    { variant: 'solid', color: 'mint', className: styles['avatar-solid-mint'] },\n    { variant: 'solid', color: 'sky', className: styles['avatar-solid-sky'] },\n    { variant: 'solid', color: 'lime', className: styles['avatar-solid-lime'] },\n    {\n      variant: 'solid',\n      color: 'grass',\n      className: styles['avatar-solid-grass']\n    },\n    { variant: 'solid', color: 'cyan', className: styles['avatar-solid-cyan'] },\n    { variant: 'solid', color: 'iris', className: styles['avatar-solid-iris'] },\n    {\n      variant: 'solid',\n      color: 'purple',\n      className: styles['avatar-solid-purple']\n    },\n    { variant: 'solid', color: 'pink', className: styles['avatar-solid-pink'] },\n    {\n      variant: 'solid',\n      color: 'crimson',\n      className: styles['avatar-solid-crimson']\n    },\n    { variant: 'solid', color: 'gold', className: styles['avatar-solid-gold'] },\n    {\n      variant: 'soft',\n      color: 'indigo',\n      className: styles['avatar-soft-indigo']\n    },\n\n    {\n      variant: 'soft',\n      color: 'orange',\n      className: styles['avatar-soft-orange']\n    },\n    { variant: 'soft', color: 'mint', className: styles['avatar-soft-mint'] },\n    { variant: 'soft', color: 'sky', className: styles['avatar-soft-sky'] },\n    { variant: 'soft', color: 'lime', className: styles['avatar-soft-lime'] },\n    { variant: 'soft', color: 'grass', className: styles['avatar-soft-grass'] },\n    { variant: 'soft', color: 'cyan', className: styles['avatar-soft-cyan'] },\n    { variant: 'soft', color: 'iris', className: styles['avatar-soft-iris'] },\n    {\n      variant: 'soft',\n      color: 'purple',\n      className: styles['avatar-soft-purple']\n    },\n    { variant: 'soft', color: 'pink', className: styles['avatar-soft-pink'] },\n    {\n      variant: 'soft',\n      color: 'crimson',\n      className: styles['avatar-soft-crimson']\n    },\n    { variant: 'soft', color: 'gold', className: styles['avatar-soft-gold'] }\n  ],\n  defaultVariants: {\n    size: 3,\n    radius: 'small',\n    variant: 'soft',\n    color: 'indigo'\n  }\n});\n\nconst image = cva(styles.image);\n\n/*\n * @desc Recursively get the avatar props even if it's\n * wrapped in another component like Tooltip, Flex, etc.\n */\nexport const getAvatarProps = (\n  element: ReactElement<AvatarProps>\n): AvatarProps => {\n  const props = element.props as AvatarProps & { children?: ReactNode };\n\n  if (element.type === Avatar) {\n    return props;\n  }\n\n  if (props.children) {\n    if (isValidElement<AvatarProps>(props.children)) {\n      return getAvatarProps(props.children);\n    }\n  }\n  return {};\n};\n\nexport interface AvatarProps\n  extends AvatarPrimitive.Root.Props,\n    VariantProps<typeof avatar> {\n  size?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13;\n  src?: string;\n  alt?: string;\n  fallback?: ReactNode;\n  variant?: 'solid' | 'soft';\n  color?: AVATAR_COLORS;\n  className?: string;\n}\n\nconst AvatarRoot = ({\n  className,\n  alt,\n  src,\n  fallback,\n  size,\n  radius,\n  variant,\n  color,\n  ...props\n}: AvatarProps) => {\n  const sawLoadingRef = useRef(false);\n  const [fadeIn, setFadeIn] = useState(false);\n  const handleLoadingStatusChange = (status: ImageLoadingStatus) => {\n    if (status === 'loading') {\n      sawLoadingRef.current = true;\n      setFadeIn(false);\n    } else if (status === 'loaded') {\n      // A cached image reports 'loaded' with no 'loading' phase (Base UI never\n      // emits it), so it stays instant; only network loads fade in.\n      setFadeIn(sawLoadingRef.current);\n      sawLoadingRef.current = false;\n    }\n  };\n\n  return (\n    <AvatarPrimitive.Root\n      className={cx(\n        styles.imageWrapper,\n        avatar({ size, radius, variant, color }),\n        className\n      )}\n      data-slot='avatar'\n      {...props}\n    >\n      <AvatarPrimitive.Image\n        className={cx(image(), fadeIn && styles['image-fade-in'])}\n        src={src}\n        alt={alt}\n        onLoadingStatusChange={handleLoadingStatusChange}\n        data-slot='avatar-image'\n      />\n      <AvatarPrimitive.Fallback\n        className={styles.fallback}\n        data-slot='avatar-fallback'\n      >\n        {fallback}\n      </AvatarPrimitive.Fallback>\n    </AvatarPrimitive.Root>\n  );\n};\n\nAvatarRoot.displayName = 'Avatar';\n\nexport const Avatar = AvatarRoot;\n\nexport interface AvatarGroupProps extends ComponentProps<'div'> {\n  children: React.ReactElement<AvatarProps>[];\n  max?: number;\n}\n\nexport const AvatarGroup = ({\n  children,\n  max,\n  className,\n  ...props\n}: AvatarGroupProps) => {\n  const avatars = max ? children.slice(0, max) : children;\n  const count = max && children.length > max ? children.length - max : 0;\n\n  // Overflow avatar matches the first avatar styling\n  const firstAvatarProps = getAvatarProps(avatars[0]);\n\n  return (\n    <div\n      className={cx(styles.avatarGroup, className)}\n      data-slot='avatar-group'\n      {...props}\n    >\n      {avatars.map((avatar, index) => (\n        <div\n          key={index}\n          className={styles.avatarWrapper}\n          data-slot='avatar-group-item'\n        >\n          {avatar}\n        </div>\n      ))}\n      {count > 0 && (\n        <div className={styles.avatarWrapper} data-slot='avatar-group-item'>\n          <Avatar\n            size={firstAvatarProps.size}\n            radius={firstAvatarProps.radius}\n            variant={firstAvatarProps.variant}\n            color='neutral'\n            fallback={`+${count}`}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n\nAvatarGroup.displayName = 'Avatar.Group';\n"],"names":[],"mappings":";;;;;;;;;AAkBA;AACE;AACE;AACE;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACF;AACD;AACE;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;AACD;AACA;AACA;AACA;AACE;AACA;AACA;AACD;AACD;AACA;AACA;AACE;AACA;AACA;AACD;AACD;AACA;AACE;AACA;AACA;AACD;AACD;AACA;AACE;AACA;AACA;AACD;AAED;AACE;AACA;AACA;AACD;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACE;AACA;AACA;AACD;AACD;AACA;AACE;AACA;AACA;AACD;AACD;AACD;AACD;AACE;AACA;AACA;AACA;AACD;AACF;AAED;AAEA;;;AAGG;AACU;AAGX;AAEA;AACE;;AAGF;AACE;AACE;;;AAGJ;AACF;AAcA;AAWE;;AAEA;AACE;AACE;;;AAEK;;;AAGL;AACA;;AAEJ;AAEA;AAyBF;AAEA;AAEO;AAOM;AAMX;;;;;AAkCF;AAEA;;;;"}