@undp/design-system-react/dist/avatar-BspwR9Fk.cjs.map

React based design system for UNDP

{"version":3,"file":"avatar-BspwR9Fk.cjs","names":["createContextScope","Avatar","React","Primitive","AvatarImage","useCallbackRef","AvatarFallback"],"sources":["../node_modules/@radix-ui/react-avatar/dist/index.mjs","../src/components/ui/avatar.tsx"],"sourcesContent":["\"use client\";\nvar __defProp = Object.defineProperty;\nvar __name = (target, value) => __defProp(target, \"name\", { value, configurable: true });\n\n// src/avatar.tsx\nimport * as React from \"react\";\nimport { IS_DEVELOPMENT } from \"@radix-ui/primitive/is-development\";\nimport { createContextScope } from \"@radix-ui/react-context\";\nimport { useCallbackRef } from \"@radix-ui/react-use-callback-ref\";\nimport { useLayoutEffect } from \"@radix-ui/react-use-layout-effect\";\nimport { Primitive } from \"@radix-ui/react-primitive\";\nimport { jsx } from \"react/jsx-runtime\";\nvar AVATAR_NAME = \"Avatar\";\nvar [createAvatarContext, createAvatarScope] = createContextScope(AVATAR_NAME);\nvar STATIC_IMAGE_COUNT_STATE = [\n  0,\n  () => void 0\n];\nvar [AvatarProvider, useAvatarContext] = createAvatarContext(AVATAR_NAME);\nvar Avatar = /* @__PURE__ */ React.forwardRef(\n  // blank line to reduce diff noise\n  /* @__PURE__ */ __name(function Avatar2(props, forwardedRef) {\n    const { __scopeAvatar, ...avatarProps } = props;\n    const [imageLoadingStatus, setImageLoadingStatus] = React.useState(\"idle\");\n    const [imageCount, setImageCount] = useImageCount();\n    return /* @__PURE__ */ jsx(\n      AvatarProvider,\n      {\n        scope: __scopeAvatar,\n        imageLoadingStatus,\n        setImageLoadingStatus,\n        imageCount,\n        setImageCount,\n        children: /* @__PURE__ */ jsx(Primitive.span, { ...avatarProps, ref: forwardedRef })\n      }\n    );\n  }, \"Avatar\")\n);\nvar IMAGE_NAME = \"AvatarImage\";\nvar AvatarImage = /* @__PURE__ */ React.forwardRef(\n  /* @__PURE__ */ __name(function AvatarImage2(props, forwardedRef) {\n    const { __scopeAvatar, src, onLoadingStatusChange, ...imageProps } = props;\n    const context = useAvatarContext(IMAGE_NAME, __scopeAvatar);\n    useUpdateImageCount(context.setImageCount);\n    const imageLoadingStatus = useImageLoadingStatus(src, {\n      referrerPolicy: imageProps.referrerPolicy,\n      crossOrigin: imageProps.crossOrigin,\n      loadingStatus: context.imageLoadingStatus,\n      setLoadingStatus: context.setImageLoadingStatus\n    });\n    const handleLoadingStatusChange = useCallbackRef((status) => {\n      onLoadingStatusChange?.(status);\n    });\n    const loadingStatusRef = React.useRef(imageLoadingStatus);\n    useLayoutEffect(() => {\n      const previousLoadingStatus = loadingStatusRef.current;\n      loadingStatusRef.current = imageLoadingStatus;\n      if (imageLoadingStatus !== previousLoadingStatus) {\n        handleLoadingStatusChange(imageLoadingStatus);\n      }\n    }, [imageLoadingStatus, handleLoadingStatusChange]);\n    return imageLoadingStatus === \"loaded\" ? /* @__PURE__ */ jsx(Primitive.img, { ...imageProps, ref: forwardedRef, src }) : null;\n  }, \"AvatarImage\")\n);\nvar FALLBACK_NAME = \"AvatarFallback\";\nvar AvatarFallback = /* @__PURE__ */ React.forwardRef(\n  /* @__PURE__ */ __name(function AvatarFallback2(props, forwardedRef) {\n    const { __scopeAvatar, delayMs, ...fallbackProps } = props;\n    const context = useAvatarContext(FALLBACK_NAME, __scopeAvatar);\n    const [canRender, setCanRender] = React.useState(delayMs === void 0);\n    React.useEffect(() => {\n      if (delayMs !== void 0) {\n        const timerId = window.setTimeout(() => setCanRender(true), delayMs);\n        return () => window.clearTimeout(timerId);\n      }\n    }, [delayMs]);\n    return canRender && context.imageLoadingStatus !== \"loaded\" ? /* @__PURE__ */ jsx(Primitive.span, { ...fallbackProps, ref: forwardedRef }) : null;\n  }, \"AvatarFallback\")\n);\nfunction useImageLoadingStatus(src, {\n  loadingStatus,\n  setLoadingStatus,\n  referrerPolicy,\n  crossOrigin\n}) {\n  useLayoutEffect(() => {\n    if (!src) {\n      setLoadingStatus(\"error\");\n      return;\n    }\n    const image = new window.Image();\n    const handleLoad = /* @__PURE__ */ __name((event) => {\n      const image2 = event.currentTarget;\n      setLoadingStatus(getImageLoadingStatus(image2));\n    }, \"handleLoad\");\n    const handleError = /* @__PURE__ */ __name(() => setLoadingStatus(\"error\"), \"handleError\");\n    image.addEventListener(\"load\", handleLoad);\n    image.addEventListener(\"error\", handleError);\n    if (referrerPolicy) {\n      image.referrerPolicy = referrerPolicy;\n    }\n    image.crossOrigin = crossOrigin ?? null;\n    image.src = src;\n    setLoadingStatus(getImageLoadingStatus(image));\n    return () => {\n      image.removeEventListener(\"load\", handleLoad);\n      image.removeEventListener(\"error\", handleError);\n      setLoadingStatus(\"idle\");\n    };\n  }, [src, crossOrigin, referrerPolicy, setLoadingStatus]);\n  return loadingStatus;\n}\n__name(useImageLoadingStatus, \"useImageLoadingStatus\");\nfunction getImageLoadingStatus(image) {\n  return image.complete ? image.naturalWidth > 0 ? \"loaded\" : \"error\" : \"loading\";\n}\n__name(getImageLoadingStatus, \"getImageLoadingStatus\");\nfunction useImageCount() {\n  let state = STATIC_IMAGE_COUNT_STATE;\n  if (IS_DEVELOPMENT) {\n    state = React.useState(0);\n    const [imageCount] = state;\n    const hasWarnedRef = React.useRef(false);\n    React.useEffect(() => {\n      if (imageCount > 1 && !hasWarnedRef.current) {\n        hasWarnedRef.current = true;\n        console.warn(\n          \"Avatar: Only one `Avatar.Image` component should be rendered per `Avatar.Root`, but multiple were detected. This will lead to unexpected behavior.\"\n        );\n      }\n    }, [imageCount]);\n  }\n  return state;\n}\n__name(useImageCount, \"useImageCount\");\nfunction useUpdateImageCount(setImageCount) {\n  if (IS_DEVELOPMENT) {\n    React.useEffect(() => {\n      setImageCount((imageCount) => imageCount + 1);\n      return () => {\n        setImageCount((imageCount) => imageCount - 1);\n      };\n    }, [setImageCount]);\n  }\n}\n__name(useUpdateImageCount, \"useUpdateImageCount\");\nexport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n  AvatarFallback as Fallback,\n  AvatarImage as Image,\n  Avatar as Root,\n  createAvatarScope\n};\n//# sourceMappingURL=index.mjs.map\n","import { cva, type VariantProps } from 'class-variance-authority';\nimport { Avatar as AvatarPrimitive } from 'radix-ui';\nimport type * as React from 'react';\nimport { cn } from '@/lib/utils';\n\nfunction Avatar({\n  className,\n  size = 'default',\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Root> & {\n  size?: 'default' | 'sm' | 'lg';\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot='avatar'\n      data-size={size}\n      className={cn(\n        'group/avatar relative flex size-8 shrink-0 select-none rounded-full after:absolute after:inset-0 after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot='avatar-image'\n      className={cn('aspect-square size-full rounded-full object-cover', className)}\n      {...props}\n    />\n  );\n}\n\nconst avatarColorVariants = cva(\n  'flex size-full items-center justify-center rounded-full border-0 text-sm group-data-[size=sm]/avatar:text-xs',\n  {\n    variants: {\n      color: {\n        transparent: 'bg-transparent text-content-primary border border-stroke',\n        background: 'bg-background text-content-primary border border-stroke',\n        'background-soft': 'bg-background-soft text-content-primary border border-stroke',\n        foreground: 'bg-foreground text-content-reverse',\n        'foreground-soft': 'bg-foreground-soft text-content-reverse',\n        primary: 'bg-primary text-content-reverse',\n        secondary: 'bg-secondary text-content-reverse',\n        tertiary: 'bg-tertiary text-content-reverse',\n        quaternary: 'bg-quaternary text-content-primary',\n        success: 'bg-success text-content-reverse',\n        warning: 'bg-warning text-content-primary',\n        info: 'bg-info text-content-reverse',\n        error: 'bg-error text-content-reverse',\n        surface: 'bg-surface text-content-primary border border-stroke',\n        'surface-2xs': 'bg-surface-2xs text-content-primary',\n        'surface-xs': 'bg-surface-xs text-content-primary',\n        'surface-sm': 'bg-surface-sm text-content-primary',\n        'surface-md': 'bg-surface-md text-content-primary',\n        'surface-lg': 'bg-surface-lg text-content-primary',\n        'surface-xl': 'bg-surface-xl text-content-reverse',\n        'surface-2xl': 'bg-surface-2xl text-content-reverse',\n        'surface-3xl': 'bg-surface-3xl text-content-reverse',\n        'surface-4xl': 'bg-surface-4xl text-content-reverse',\n        'sgd-1': 'bg-sdg-1 text-content-reverse',\n        'sgd-2': 'bg-sdg-2 text-content-reverse',\n        'sgd-3': 'bg-sdg-3 text-content-reverse',\n        'sgd-4': 'bg-sdg-4 text-content-reverse',\n        'sgd-5': 'bg-sdg-5 text-content-reverse',\n        'sgd-6': 'bg-sdg-6 text-content-reverse',\n        'sgd-7': 'bg-sdg-7 text-content-reverse',\n        'sgd-8': 'bg-sdg-8 text-content-reverse',\n        'sgd-9': 'bg-sdg-9 text-content-reverse',\n        'sgd-10': 'bg-sdg-10 text-content-reverse',\n        'sgd-11': 'bg-sdg-11 text-content-reverse',\n        'sgd-12': 'bg-sdg-12 text-content-reverse',\n        'sgd-13': 'bg-sdg-13 text-content-reverse',\n        'sgd-14': 'bg-sdg-14 text-content-reverse',\n        'sgd-15': 'bg-sdg-15 text-content-reverse',\n        'sgd-16': 'bg-sdg-16 text-content-reverse',\n        'sgd-17': 'bg-sdg-17 text-content-reverse',\n      },\n      border: {\n        true: 'border border-stroke',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      color: 'surface',\n      border: true,\n    },\n  },\n);\n\nfunction AvatarFallback({\n  className,\n  color,\n  border,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback> &\n  VariantProps<typeof avatarColorVariants>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot='avatar-fallback'\n      className={cn(avatarColorVariants({ color, border }), className)}\n      {...props}\n    />\n  );\n}\n\nconst avatarBadgeVariants = cva(\n  'absolute right-0 bottom-0 z-10 inline-flex select-none items-center justify-center rounded-full text-content-reverse group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2 group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',\n  {\n    variants: {\n      status: {\n        available: 'bg-success',\n        idle: 'bg-warning-hover',\n        offline: 'bg-background border-2 border-stroke-hard',\n        busy: 'bg-error',\n      },\n    },\n    defaultVariants: {\n      status: 'available',\n    },\n  },\n);\n\nfunction AvatarBadge({\n  className,\n  status,\n  ...props\n}: React.ComponentProps<'span'> & VariantProps<typeof avatarBadgeVariants>) {\n  return (\n    <span\n      data-slot='avatar-badge'\n      className={cn(avatarBadgeVariants({ status }), className)}\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('group/avatar-group flex -space-x-2', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarGroupCount({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='avatar-group-count'\n      className={cn(\n        'relative flex size-8 shrink-0 items-center justify-center rounded-full bg-surface text-content-secondary text-sm group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };\n"],"x_google_ignoreList":[0],"mappings":"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"}