@acronis-platform/ui-react 0.60.0 → 0.62.0

package/dist/components/ui/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sources":["../../../../src/components/ui/avatar/avatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// Wraps Base UI's Avatar primitive (Root / Image / Fallback), themed by the\n// dedicated next-gen `--ui-avatar-*` token tier from @acronis-platform/tokens-pd.\n// A 32px circle (`--ui-avatar-global-avatar-size` / `-border-border-radius`) with a 2px\n// ring (`-border-border-width` / `-border-color`) — the ring is what visually\n// separates avatars when they overlap in an `AvatarGroup`. When no image is set\n// (or it fails to load) the `AvatarFallback` shows initials.\n//\n// The ring is a `box-shadow`, not a CSS `border`: Figma draws the 2px stroke\n// with `strokeAlign: OUTSIDE`, so the 32px is the *colored circle* and the ring\n// sits outside it. A CSS border would be drawn inside the border-box, shrinking\n// the visible circle to 28px (PLTFRM-92393). A box-shadow ring paints outside\n// without inflating the 32px layout box, so the `AvatarGroup` overlap step\n// (32px − 6px gap) still matches the design.\n//\n// It is written as a raw `[box-shadow:…]` arbitrary property, not Tailwind's\n// `shadow-[…]` utility: the utility routes the value through `--tw-shadow-color`\n// (`0 0 0 var(--tw-shadow-color, <spread>) <color>`), which resolves\n// inconsistently for a spread-only ring across engine versions. The raw property\n// emits the literal declaration so every renderer draws the same 2px outset ring.\n//\n// `color` selects one of the five Figma color schemes; it tints the fallback\n// background (`--ui-avatar-color-<scheme>`) and the initials\n// (`--ui-avatar-label-color-<scheme>`). Initials use the 12px/16px/600 caption\n// style baked into the design (`text-xs font-semibold leading-4`).\nconst avatarVariants = cva(\n  'relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden ' +\n    'size-[var(--ui-avatar-global-avatar-size)] rounded-[var(--ui-avatar-global-avatar-border-border-radius)] ' +\n    '[box-shadow:0_0_0_var(--ui-avatar-global-avatar-border-border-width)_var(--ui-avatar-global-avatar-border-color)] ' +\n    'text-xs font-semibold leading-4',\n  {\n    variants: {\n      color: {\n        teal: 'bg-[var(--ui-avatar-color-teal)] text-[var(--ui-avatar-label-color-teal)]',\n        violet:\n          'bg-[var(--ui-avatar-color-violet)] text-[var(--ui-avatar-label-color-violet)]',\n        red: 'bg-[var(--ui-avatar-color-red)] text-[var(--ui-avatar-label-color-red)]',\n        yellow:\n          'bg-[var(--ui-avatar-color-yellow)] text-[var(--ui-avatar-label-color-yellow)]',\n        orange:\n          'bg-[var(--ui-avatar-color-orange)] text-[var(--ui-avatar-label-color-orange)]',\n      },\n    },\n    defaultVariants: {\n      color: 'teal',\n    },\n  }\n);\n\nexport interface AvatarProps\n  extends\n    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n    VariantProps<typeof avatarVariants> {}\n\n/**\n * A user/entity avatar: a colored circle showing an image or initials. Compose\n * `AvatarImage` and/or `AvatarFallback` inside; stack several in `AvatarGroup`.\n */\nconst Avatar = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(({ className, color, ...props }, ref) => (\n  <AvatarPrimitive.Root\n    ref={ref}\n    className={cn(avatarVariants({ color }), className)}\n    {...props}\n  />\n));\nAvatar.displayName = 'Avatar';\n\nexport type AvatarImageProps = React.ComponentPropsWithoutRef<\n  typeof AvatarPrimitive.Image\n>;\n\n/** The avatar image; hidden by Base UI until it loads, revealing the fallback. */\nconst AvatarImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  AvatarImageProps\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Image\n    ref={ref}\n    className={cn('size-full object-cover', className)}\n    {...props}\n  />\n));\nAvatarImage.displayName = 'AvatarImage';\n\nexport type AvatarFallbackProps = React.ComponentPropsWithoutRef<\n  typeof AvatarPrimitive.Fallback\n>;\n\n/** Shown when there's no image (or it fails) — typically the user's initials. */\nconst AvatarFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  AvatarFallbackProps\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    className={cn('flex size-full items-center justify-center', className)}\n    {...props}\n  />\n));\nAvatarFallback.displayName = 'AvatarFallback';\n\nexport type AvatarGroupProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Overlapping stack of avatars. Each avatar after the first is pulled left by\n * `--ui-avatar-global-avatar-group-gap` (a negative offset), so their 2px\n * borders form the layered look; later avatars render above earlier ones.\n */\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex items-center [&>*:not(:first-child)]:ms-[var(--ui-avatar-global-avatar-group-gap)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nAvatarGroup.displayName = 'AvatarGroup';\n\nexport { Avatar, AvatarImage, AvatarFallback, AvatarGroup, avatarVariants };\n"],"names":["avatarVariants","cva","Avatar","React","className","color","props","ref","jsx","AvatarPrimitive","cn","AvatarImage","AvatarFallback","AvatarGroup"],"mappings":";;;;;AA8BA,MAAMA,IAAiBC;AAAA,EACrB;AAAA,EAIA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,MAAM;AAAA,QACN,QACE;AAAA,QACF,KAAK;AAAA,QACL,QACE;AAAA,QACF,QACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ,GAWMC,IAASC,EAAM,WAGnB,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,GAAGC,KAASC,MACjC,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG,EAAGV,EAAe,EAAE,OAAAK,EAAA,CAAO,GAAGD,CAAS;AAAA,IACjD,GAAGE;AAAA,EAAA;AACN,CACD;AACDJ,EAAO,cAAc;AAOrB,MAAMS,IAAcR,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG,EAAG,0BAA0BN,CAAS;AAAA,IAChD,GAAGE;AAAA,EAAA;AACN,CACD;AACDK,EAAY,cAAc;AAO1B,MAAMC,IAAiBT,EAAM,WAG3B,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG,EAAG,8CAA8CN,CAAS;AAAA,IACpE,GAAGE;AAAA,EAAA;AACN,CACD;AACDM,EAAe,cAAc;AAS7B,MAAMC,IAAcV,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MACxB,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWG;AAAA,QACT;AAAA,QACAN;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV;AACAO,EAAY,cAAc;"}
+{"version":3,"file":"avatar.js","sources":["../../../../src/components/ui/avatar/avatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// Wraps Base UI's Avatar primitive (Root / Image / Fallback), themed by the\n// dedicated next-gen `--ui-avatar-*` token tier from @acronis-platform/tokens-pd.\n// A 32px circle (`--ui-avatar-global-avatar-size` / `-border-border-radius`) with a 2px\n// ring (`-border-border-width` / `-border-color`) — the ring is what visually\n// separates avatars when they overlap in an `AvatarGroup`. When no image is set\n// (or it fails to load) the `AvatarFallback` shows initials.\n//\n// The ring is a `box-shadow`, not a CSS `border`: Figma draws the 2px stroke\n// with `strokeAlign: OUTSIDE`, so the 32px is the *colored circle* and the ring\n// sits outside it. A CSS border would be drawn inside the border-box, shrinking\n// the visible circle to 28px (PLTFRM-92393). A box-shadow ring paints outside\n// without inflating the 32px layout box, so the `AvatarGroup` overlap step\n// (32px − 6px gap) still matches the design.\n//\n// It is written as a raw `[box-shadow:…]` arbitrary property, not Tailwind's\n// `shadow-[…]` utility: the utility routes the value through `--tw-shadow-color`\n// (`0 0 0 var(--tw-shadow-color, <spread>) <color>`), which resolves\n// inconsistently for a spread-only ring across engine versions. The raw property\n// emits the literal declaration so every renderer draws the same 2px outset ring.\n//\n// `color` selects one of the eight Figma color schemes; it tints the fallback\n// background (`--ui-avatar-color-<scheme>`) and the initials\n// (`--ui-avatar-label-color-<scheme>`). Initials use the 12px/16px/600 caption\n// style baked into the design (`text-xs font-semibold leading-4`).\nconst avatarVariants = cva(\n  'relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden ' +\n    'size-[var(--ui-avatar-global-avatar-size)] rounded-[var(--ui-avatar-global-avatar-border-border-radius)] ' +\n    '[box-shadow:0_0_0_var(--ui-avatar-global-avatar-border-border-width)_var(--ui-avatar-global-avatar-border-color)] ' +\n    'text-xs font-semibold leading-4',\n  {\n    variants: {\n      color: {\n        teal: 'bg-[var(--ui-avatar-color-teal)] text-[var(--ui-avatar-label-color-teal)]',\n        violet:\n          'bg-[var(--ui-avatar-color-violet)] text-[var(--ui-avatar-label-color-violet)]',\n        red: 'bg-[var(--ui-avatar-color-red)] text-[var(--ui-avatar-label-color-red)]',\n        yellow:\n          'bg-[var(--ui-avatar-color-yellow)] text-[var(--ui-avatar-label-color-yellow)]',\n        orange:\n          'bg-[var(--ui-avatar-color-orange)] text-[var(--ui-avatar-label-color-orange)]',\n        blue: 'bg-[var(--ui-avatar-color-blue)] text-[var(--ui-avatar-label-color-blue)]',\n        gray: 'bg-[var(--ui-avatar-color-gray)] text-[var(--ui-avatar-label-color-gray)]',\n        green:\n          'bg-[var(--ui-avatar-color-green)] text-[var(--ui-avatar-label-color-green)]',\n      },\n    },\n    defaultVariants: {\n      color: 'teal',\n    },\n  }\n);\n\nexport interface AvatarProps\n  extends\n    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n    VariantProps<typeof avatarVariants> {}\n\n/**\n * A user/entity avatar: a colored circle showing an image or initials. Compose\n * `AvatarImage` and/or `AvatarFallback` inside; stack several in `AvatarGroup`.\n */\nconst Avatar = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(({ className, color, ...props }, ref) => (\n  <AvatarPrimitive.Root\n    ref={ref}\n    className={cn(avatarVariants({ color }), className)}\n    {...props}\n  />\n));\nAvatar.displayName = 'Avatar';\n\nexport type AvatarImageProps = React.ComponentPropsWithoutRef<\n  typeof AvatarPrimitive.Image\n>;\n\n/** The avatar image; hidden by Base UI until it loads, revealing the fallback. */\nconst AvatarImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  AvatarImageProps\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Image\n    ref={ref}\n    className={cn('size-full object-cover', className)}\n    {...props}\n  />\n));\nAvatarImage.displayName = 'AvatarImage';\n\nexport type AvatarFallbackProps = React.ComponentPropsWithoutRef<\n  typeof AvatarPrimitive.Fallback\n>;\n\n/** Shown when there's no image (or it fails) — typically the user's initials. */\nconst AvatarFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  AvatarFallbackProps\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    className={cn('flex size-full items-center justify-center', className)}\n    {...props}\n  />\n));\nAvatarFallback.displayName = 'AvatarFallback';\n\nexport type AvatarGroupProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Overlapping stack of avatars. Each avatar after the first is pulled left by\n * `--ui-avatar-global-avatar-group-gap` (a negative offset), so their 2px\n * borders form the layered look; later avatars render above earlier ones.\n */\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex items-center [&>*:not(:first-child)]:ms-[var(--ui-avatar-global-avatar-group-gap)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nAvatarGroup.displayName = 'AvatarGroup';\n\nexport { Avatar, AvatarImage, AvatarFallback, AvatarGroup, avatarVariants };\n"],"names":["avatarVariants","cva","Avatar","React","className","color","props","ref","jsx","AvatarPrimitive","cn","AvatarImage","AvatarFallback","AvatarGroup"],"mappings":";;;;;AA8BA,MAAMA,IAAiBC;AAAA,EACrB;AAAA,EAIA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,MAAM;AAAA,QACN,QACE;AAAA,QACF,KAAK;AAAA,QACL,QACE;AAAA,QACF,QACE;AAAA,QACF,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ,GAWMC,IAASC,EAAM,WAGnB,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,GAAGC,KAASC,MACjC,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG,EAAGV,EAAe,EAAE,OAAAK,EAAA,CAAO,GAAGD,CAAS;AAAA,IACjD,GAAGE;AAAA,EAAA;AACN,CACD;AACDJ,EAAO,cAAc;AAOrB,MAAMS,IAAcR,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG,EAAG,0BAA0BN,CAAS;AAAA,IAChD,GAAGE;AAAA,EAAA;AACN,CACD;AACDK,EAAY,cAAc;AAO1B,MAAMC,IAAiBT,EAAM,WAG3B,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG,EAAG,8CAA8CN,CAAS;AAAA,IACpE,GAAGE;AAAA,EAAA;AACN,CACD;AACDM,EAAe,cAAc;AAS7B,MAAMC,IAAcV,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MACxB,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWG;AAAA,QACT;AAAA,QACAN;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV;AACAO,EAAY,cAAc;"}