@acronis-platform/ui-react 1.0.0 → 3.0.0

package/dist/components/ui/accordion-container/accordion-container.js

@@ -0,0 +1,144 @@
+import { jsx as c, Fragment as I } from "react/jsx-runtime";
+import * as t from "react";
+import { Collapsible as h } from "@base-ui/react/collapsible";
+import { useRender as x } from "@base-ui/react/use-render";
+import { mergeProps as N } from "@base-ui/react/merge-props";
+import { ChevronRightIcon as O } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as T } from "../../../lib/utils.js";
+const y = t.createContext({
+  collapsible: !1,
+  open: !1
+}), j = () => t.useContext(y), k = t.forwardRef(
+  ({
+    collapsible: n = !1,
+    open: o,
+    defaultOpen: r = !1,
+    onOpenChange: e,
+    disabled: a,
+    className: i,
+    style: s,
+    render: l,
+    children: u,
+    ...f
+  }, m) => {
+    const [S, W] = t.useState(r), g = o !== void 0, d = g ? o : S, z = t.useCallback(
+      (p, F) => {
+        g || W(p), e == null || e(p, F);
+      },
+      [g, e]
+    ), A = t.useMemo(
+      () => ({ open: d, disabled: a ?? !1 }),
+      [d, a]
+    ), C = typeof u == "function" ? u({ open: d }) : u, v = typeof i == "function" ? i(A) : i, b = typeof s == "function" ? s(A) : s, R = t.useMemo(
+      () => ({ collapsible: n, open: d }),
+      [n, d]
+    ), M = x({
+      render: l,
+      ref: m,
+      defaultTagName: "div",
+      props: N(
+        { className: v, style: b },
+        f,
+        {
+          children: C
+        }
+      )
+    });
+    if (!n) {
+      const p = m != null || v != null || b != null || l != null || Object.keys(f).length > 0;
+      return /* @__PURE__ */ c(y.Provider, { value: R, children: p ? M : C });
+    }
+    return /* @__PURE__ */ c(y.Provider, { value: R, children: /* @__PURE__ */ c(
+      h.Root,
+      {
+        ref: m,
+        render: l,
+        className: v,
+        style: b,
+        open: d,
+        onOpenChange: z,
+        disabled: a,
+        ...f,
+        children: C
+      }
+    ) });
+  }
+);
+k.displayName = "AccordionContainer";
+const w = t.forwardRef(({ className: n, children: o, "aria-label": r, ...e }, a) => {
+  const { collapsible: i } = j();
+  return i ? /* @__PURE__ */ c(
+    h.Trigger,
+    {
+      ref: a,
+      "aria-label": e["aria-labelledby"] || o != null ? r : r ?? "Toggle",
+      className: T(
+        "inline-flex size-8 shrink-0 cursor-pointer items-center justify-center border-0 bg-transparent p-0 text-[var(--ui-glyph-on-surface-neutral-dark)]",
+        "outline-none focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]",
+        "[&[data-panel-open]>svg]:rotate-90 [&:not([data-panel-open])>svg]:rtl:rotate-180",
+        n
+      ),
+      ...e,
+      children: o ?? /* @__PURE__ */ c(
+        O,
+        {
+          size: 16,
+          className: "transition-transform duration-200"
+        }
+      )
+    }
+  ) : null;
+});
+w.displayName = "AccordionContainerTrigger";
+const P = t.forwardRef(
+  ({
+    className: n,
+    style: o,
+    children: r,
+    render: e,
+    hiddenUntilFound: a,
+    keepMounted: i,
+    ...s
+  }, l) => {
+    const { collapsible: u } = j(), f = x({
+      render: e,
+      ref: l,
+      defaultTagName: "div",
+      props: N(
+        {
+          className: n,
+          style: o
+        },
+        s,
+        { children: r }
+      )
+    });
+    return u ? /* @__PURE__ */ c(
+      h.Panel,
+      {
+        ref: l,
+        style: o,
+        className: T(
+          "overflow-hidden transition-[height] duration-200 ease-out data-[ending-style]:h-0 data-[starting-style]:h-0",
+          n
+        ),
+        hiddenUntilFound: a,
+        keepMounted: i,
+        ...s,
+        children: r
+      }
+    ) : l != null || n != null || o != null || e != null || Object.keys(s).length > 0 ? f : /* @__PURE__ */ c(I, { children: r });
+  }
+);
+P.displayName = "AccordionContainerContent";
+const G = Object.assign(k, {
+  Trigger: w,
+  Content: P
+});
+export {
+  G as AccordionContainer,
+  P as AccordionContainerContent,
+  w as AccordionContainerTrigger,
+  j as useAccordionContainerContext
+};
+//# sourceMappingURL=accordion-container.js.map

package/dist/components/ui/accordion-container/accordion-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-container.js","sources":["../../../../src/components/ui/accordion-container/accordion-container.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';\nimport { useRender } from '@base-ui/react/use-render';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { ChevronRightIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// The shared disclosure primitive behind Card's and Section's `isCollapsable`\n// variant (Figma file lrU3ydIyvPYQNE6ixdsKtJ, node 10561:83806). Built directly\n// on Base UI's Collapsible — Root/Trigger/Panel own all open/close state, ARIA\n// wiring, and height animation; this component only adds the chevron rotation\n// and the `collapsible=false` bypass. It never imposes visual styling beyond\n// what the disclosure mechanic itself requires: no padding/background/border on\n// Root or Content, no position/hover opinion on Trigger beyond its chevron's\n// glyph color (--ui-glyph-on-surface-neutral-dark, the same neutral treatment\n// Accordion's chevron uses). Every other visual decision (header layout,\n// spacing, background, borders) stays owned by the consumer composing this\n// primitive into their own component (Card, Section, ...).\n\ninterface AccordionContainerState {\n  open: boolean;\n}\n\ntype AccordionContainerChildren =\n  | React.ReactNode\n  | ((state: AccordionContainerState) => React.ReactNode);\n\ntype AccordionContainerBaseProps = Omit<\n  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>,\n  'children'\n>;\n\ninterface AccordionContainerProps extends AccordionContainerBaseProps {\n  /**\n   * Whether the disclosure exists at all. When `false`, `children` render\n   * directly with no trigger and no panel wrapper — the Figma\n   * `isCollapsable=false` state has no disclosure UI.\n   * @default false\n   */\n  collapsible?: boolean;\n  /**\n   * Accepts a plain node, or a render-prop function receiving the current\n   * `{ open }` state — for content outside `AccordionContainer.Content` (e.g.\n   * a header) that still needs to know whether the panel is expanded, even\n   * when this component owns the open state itself (uncontrolled).\n   */\n  children?: AccordionContainerChildren;\n}\n\ninterface AccordionContainerContextValue {\n  collapsible: boolean;\n  open: boolean;\n}\n\nconst AccordionContainerContext =\n  React.createContext<AccordionContainerContextValue>({\n    collapsible: false,\n    open: false,\n  });\n\n/**\n * Reads whether the nearest `AccordionContainer` ancestor is `collapsible`\n * and, if so, its current `open` state — for content outside\n * `AccordionContainer.Content` (e.g. a header) that needs to react to the\n * panel's state without a dedicated prop, such as `CardHeader` dropping its\n * bottom divider while collapsed.\n */\nconst useAccordionContainerContext = () =>\n  React.useContext(AccordionContainerContext);\n\nconst AccordionContainer = React.forwardRef<\n  HTMLDivElement,\n  AccordionContainerProps\n>(\n  (\n    {\n      collapsible = false,\n      open: openProp,\n      defaultOpen = false,\n      onOpenChange,\n      disabled,\n      className,\n      style,\n      render,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);\n    const isControlled = openProp !== undefined;\n    const open = isControlled ? openProp : uncontrolledOpen;\n\n    const handleOpenChange = React.useCallback<\n      NonNullable<AccordionContainerBaseProps['onOpenChange']>\n    >(\n      (nextOpen, eventDetails) => {\n        if (!isControlled) {\n          setUncontrolledOpen(nextOpen);\n        }\n        onOpenChange?.(nextOpen, eventDetails);\n      },\n      [isControlled, onOpenChange]\n    );\n\n    const collapsibleState = React.useMemo(\n      () => ({ open, disabled: disabled ?? false }),\n      [open, disabled]\n    );\n\n    const resolvedChildren =\n      typeof children === 'function' ? children({ open }) : children;\n    const resolvedClassName =\n      typeof className === 'function' ? className(collapsibleState) : className;\n    const resolvedStyle =\n      typeof style === 'function' ? style(collapsibleState) : style;\n\n    const contextValue = React.useMemo<AccordionContainerContextValue>(\n      () => ({ collapsible, open }),\n      [collapsible, open]\n    );\n\n    const bypassRendered = useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        { className: resolvedClassName, style: resolvedStyle },\n        props,\n        {\n          children: resolvedChildren,\n        }\n      ),\n    });\n\n    if (!collapsible) {\n      // No wrapper is imposed for the common case (no ref/className/style/render/\n      // extra DOM props) so this bypass stays style-isolation-neutral; a consumer\n      // that does pass any of those gets a `div` so they aren't silently dropped.\n      const needsWrapper =\n        ref != null ||\n        resolvedClassName != null ||\n        resolvedStyle != null ||\n        render != null ||\n        Object.keys(props).length > 0;\n\n      return (\n        <AccordionContainerContext.Provider value={contextValue}>\n          {needsWrapper ? bypassRendered : resolvedChildren}\n        </AccordionContainerContext.Provider>\n      );\n    }\n\n    return (\n      <AccordionContainerContext.Provider value={contextValue}>\n        <CollapsiblePrimitive.Root\n          ref={ref}\n          render={render}\n          className={resolvedClassName}\n          style={resolvedStyle}\n          open={open}\n          onOpenChange={handleOpenChange}\n          disabled={disabled}\n          {...props}\n        >\n          {resolvedChildren}\n        </CollapsiblePrimitive.Root>\n      </AccordionContainerContext.Provider>\n    );\n  }\n);\nAccordionContainer.displayName = 'AccordionContainer';\n\ntype AccordionContainerTriggerProps = React.ComponentPropsWithoutRef<\n  typeof CollapsiblePrimitive.Trigger\n>;\n\nconst AccordionContainerTrigger = React.forwardRef<\n  HTMLButtonElement,\n  AccordionContainerTriggerProps\n>(({ className, children, 'aria-label': ariaLabel, ...props }, ref) => {\n  const { collapsible } = useAccordionContainerContext();\n\n  if (!collapsible) {\n    return null;\n  }\n\n  return (\n    <CollapsiblePrimitive.Trigger\n      ref={ref}\n      aria-label={\n        props['aria-labelledby'] || children != null\n          ? ariaLabel\n          : (ariaLabel ?? 'Toggle')\n      }\n      className={cn(\n        'inline-flex size-8 shrink-0 cursor-pointer items-center justify-center border-0 bg-transparent p-0 text-[var(--ui-glyph-on-surface-neutral-dark)]',\n        'outline-none focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]',\n        '[&[data-panel-open]>svg]:rotate-90 [&:not([data-panel-open])>svg]:rtl:rotate-180',\n        className\n      )}\n      {...props}\n    >\n      {children ?? (\n        <ChevronRightIcon\n          size={16}\n          className=\"transition-transform duration-200\"\n        />\n      )}\n    </CollapsiblePrimitive.Trigger>\n  );\n});\nAccordionContainerTrigger.displayName = 'AccordionContainerTrigger';\n\ntype AccordionContainerContentProps = React.ComponentPropsWithoutRef<\n  typeof CollapsiblePrimitive.Panel\n>;\n\nconst AccordionContainerContent = React.forwardRef<\n  React.ComponentRef<typeof CollapsiblePrimitive.Panel>,\n  AccordionContainerContentProps\n>(\n  (\n    {\n      className,\n      style,\n      children,\n      render,\n      hiddenUntilFound,\n      keepMounted,\n      ...props\n    },\n    ref\n  ) => {\n    const { collapsible } = useAccordionContainerContext();\n\n    // Unlike Root, Content doesn't support the render-prop `(state) => value`\n    // form for className/style, so the bypass div below only ever sees plain\n    // values.\n    const bypassRendered = useRender({\n      render: render as\n        | useRender.RenderProp<Record<string, unknown>>\n        | undefined,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        {\n          className: className as string | undefined,\n          style: style as React.CSSProperties | undefined,\n        },\n        props,\n        { children }\n      ),\n    });\n\n    if (!collapsible) {\n      // Same style-isolation-neutral bypass as the Root: no wrapper unless the\n      // consumer actually passed something that would otherwise be dropped.\n      // hiddenUntilFound/keepMounted are Panel-only props, destructured above\n      // so they never leak onto this plain div.\n      const needsWrapper =\n        ref != null ||\n        className != null ||\n        style != null ||\n        render != null ||\n        Object.keys(props).length > 0;\n\n      return needsWrapper ? bypassRendered : <>{children}</>;\n    }\n\n    return (\n      <CollapsiblePrimitive.Panel\n        ref={ref}\n        style={style}\n        className={cn(\n          'overflow-hidden transition-[height] duration-200 ease-out data-[ending-style]:h-0 data-[starting-style]:h-0',\n          className\n        )}\n        hiddenUntilFound={hiddenUntilFound}\n        keepMounted={keepMounted}\n        {...props}\n      >\n        {children}\n      </CollapsiblePrimitive.Panel>\n    );\n  }\n);\nAccordionContainerContent.displayName = 'AccordionContainerContent';\n\nconst AccordionContainerRoot = Object.assign(AccordionContainer, {\n  Trigger: AccordionContainerTrigger,\n  Content: AccordionContainerContent,\n});\n\nexport {\n  AccordionContainerRoot as AccordionContainer,\n  AccordionContainerTrigger,\n  AccordionContainerContent,\n  useAccordionContainerContext,\n  type AccordionContainerProps,\n  type AccordionContainerTriggerProps,\n  type AccordionContainerContentProps,\n  type AccordionContainerState,\n  type AccordionContainerContextValue,\n};\n"],"names":["AccordionContainerContext","React","useAccordionContainerContext","AccordionContainer","collapsible","openProp","defaultOpen","onOpenChange","disabled","className","style","render","children","props","ref","uncontrolledOpen","setUncontrolledOpen","isControlled","open","handleOpenChange","nextOpen","eventDetails","collapsibleState","resolvedChildren","resolvedClassName","resolvedStyle","contextValue","bypassRendered","useRender","mergeProps","needsWrapper","jsx","CollapsiblePrimitive","AccordionContainerTrigger","ariaLabel","cn","ChevronRightIcon","AccordionContainerContent","hiddenUntilFound","keepMounted","Fragment","AccordionContainerRoot"],"mappings":"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"}

package/dist/components/ui/alert/alert.js

@@ -1,11 +1,11 @@
-import { jsx as t } from "react/jsx-runtime";
-import * as o from "react";
+import { jsx as e } from "react/jsx-runtime";
+import * as l from "react";
 import { cva as d } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
 import { TimesIcon as g } from "@acronis-platform/icons-react/stroke-mono";
 import { DiamondWarningRedIcon as f, CircleWarningOrangeIcon as b, TriangleWarningYellowIcon as p, CircleCheckGreenIcon as u, CircleInfoBlueIcon as v } from "@acronis-platform/icons-react/stroke-multi";
-import { cn as l } from "../../../lib/utils.js";
-import { ButtonIcon as m } from "../button-icon/button-icon.js";
-const x = d(
+import { cn as o } from "../../../lib/utils.js";
+import { ButtonIcon as x } from "../button-icon/button-icon.js";
+const m = d(
   "relative flex w-full items-start overflow-clip [overflow-clip-margin:border-box] border-solid min-w-[var(--ui-alert-global-container-width-min)] gap-[var(--ui-alert-global-container-gap)] px-[var(--ui-alert-global-container-padding-x)] py-[var(--ui-alert-global-container-padding-y)] rounded-[var(--ui-alert-global-container-border-radius)] border-[length:var(--ui-alert-global-container-border-width)] bg-[var(--ui-alert-global-container-background)] before:absolute before:content-[''] before:-inset-y-px before:start-[-1px] before:w-[var(--ui-alert-global-container-status-width)]",
   {
     variants: {
@@ -27,118 +27,118 @@ const x = d(
   warning: p,
   critical: b,
   danger: f
-}, i = o.createContext("info"), y = o.forwardRef(
-  ({ className: r, variant: a, ...e }, n) => /* @__PURE__ */ t(i.Provider, { value: a ?? "info", children: /* @__PURE__ */ t(
+}, i = l.createContext("info"), y = l.forwardRef(
+  ({ className: t, variant: r, ...a }, n) => /* @__PURE__ */ e(i.Provider, { value: r ?? "info", children: /* @__PURE__ */ e(
     "div",
     {
       ref: n,
       role: "alert",
       "data-slot": "alert",
-      "data-variant": a ?? "info",
-      className: l(x({ variant: a }), r),
-      ...e
+      "data-variant": r ?? "info",
+      className: o(m({ variant: r }), t),
+      ...a
     }
   ) })
 );
 y.displayName = "Alert";
-const A = o.forwardRef(({ className: r, children: a, ...e }, n) => {
-  const c = o.useContext(i), s = w[c];
+const A = l.forwardRef(({ className: t, children: r, ...a }, n) => {
+  const c = l.useContext(i), s = w[c];
   return (
     // The icon box's padding (4/8) is what optically aligns the 16px glyph with
     // the first line of the title: glyph centre 8 + 8 = 16, title centre
     // (AlertText's 4px padding) 4 + 12 = 16.
-    /* @__PURE__ */ t(
+    /* @__PURE__ */ e(
       "div",
       {
         ref: n,
         "data-slot": "alert-icon",
-        className: l(
+        className: o(
           "flex shrink-0 items-start px-[var(--ui-alert-global-icon-padding-x)] py-[var(--ui-alert-global-icon-padding-y)] [&_svg]:size-[var(--ui-alert-global-icon-size)] [&_svg]:shrink-0",
-          r
+          t
         ),
-        ...e,
-        children: a ?? /* @__PURE__ */ t(s, { size: 16 })
+        ...a,
+        children: r ?? /* @__PURE__ */ e(s, { size: 16 })
       }
     )
   );
 });
 A.displayName = "AlertIcon";
-const h = o.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t(
+const N = l.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ e(
   "div",
   {
-    ref: e,
+    ref: a,
     "data-slot": "alert-content",
-    className: l(
+    className: o(
       "flex min-w-0 flex-1 flex-col items-start gap-[var(--ui-alert-global-content-gap)] px-[var(--ui-alert-global-content-padding-x)] py-[var(--ui-alert-global-content-padding-y)]",
-      r
+      t
     ),
-    ...a
+    ...r
   }
 ));
-h.displayName = "AlertContent";
-const N = o.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t(
+N.displayName = "AlertContent";
+const h = l.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ e(
   "div",
   {
-    ref: e,
+    ref: a,
     "data-slot": "alert-text",
-    className: l(
+    className: o(
       "flex w-full shrink-0 flex-col items-start gap-[var(--ui-alert-global-content-text-container-gap)] px-[var(--ui-alert-global-content-text-container-padding-x)] py-[var(--ui-alert-global-content-text-container-padding-y)] [word-break:break-word]",
-      r
+      t
     ),
-    ...a
+    ...r
   }
 ));
-N.displayName = "AlertText";
-const C = o.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t(
+h.displayName = "AlertText";
+const C = l.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ e(
   "h5",
   {
-    ref: e,
+    ref: a,
     "data-slot": "alert-title",
-    className: l(
-      "ui-typography-headings-lead mb-0 w-full text-[var(--ui-alert-global-content-text-container-title-color)]",
-      r
+    className: o(
+      "ui-alert-global-content-text-container-title-text-style mb-0 w-full text-[var(--ui-alert-global-content-text-container-title-color)]",
+      t
     ),
-    ...a
+    ...r
   }
 ));
 C.displayName = "AlertTitle";
-const I = o.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t(
+const I = l.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ e(
   "p",
   {
-    ref: e,
+    ref: a,
     "data-slot": "alert-description",
-    className: l(
+    className: o(
       "ui-alert-global-content-text-container-description-text-style w-full text-[var(--ui-alert-global-content-text-container-description-color)]",
-      r
+      t
     ),
-    ...a
+    ...r
   }
 ));
 I.displayName = "AlertDescription";
-const R = o.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t(
+const R = l.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ e(
   "div",
   {
-    ref: e,
+    ref: a,
     "data-slot": "alert-actions",
-    className: l(
+    className: o(
       "flex w-full shrink-0 flex-wrap content-start items-start gap-x-[var(--ui-alert-global-content-actions-container-gap-x)] gap-y-[var(--ui-alert-global-content-actions-container-gap-y)] px-[var(--ui-alert-global-content-actions-container-padding-x)] py-[var(--ui-alert-global-content-actions-container-padding-y)]",
-      r
+      t
     ),
-    ...a
+    ...r
   }
 ));
 R.displayName = "AlertActions";
-const k = o.forwardRef(
-  ({ className: r, ariaLabel: a = "Close", ...e }, n) => /* @__PURE__ */ t(
-    m,
+const k = l.forwardRef(
+  ({ className: t, ariaLabel: r = "Close", ...a }, n) => /* @__PURE__ */ e(
+    x,
     {
       ref: n,
       "data-slot": "alert-close",
-      className: l("shrink-0", r),
-      ...e,
+      className: o("shrink-0", t),
+      ...a,
       variant: "ghost",
-      "aria-label": a,
-      children: /* @__PURE__ */ t(g, {})
+      "aria-label": r,
+      children: /* @__PURE__ */ e(g, {})
     }
   )
 );
@@ -147,11 +147,11 @@ export {
   y as Alert,
   R as AlertActions,
   k as AlertClose,
-  h as AlertContent,
+  N as AlertContent,
   I as AlertDescription,
   A as AlertIcon,
-  N as AlertText,
+  h as AlertText,
   C as AlertTitle,
-  x as alertVariants
+  m as alertVariants
 };
 //# sourceMappingURL=alert.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sources":["../../../../src/components/ui/alert/alert.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport {\n  CircleCheckGreenIcon,\n  CircleInfoBlueIcon,\n  CircleWarningOrangeIcon,\n  DiamondWarningRedIcon,\n  TriangleWarningYellowIcon,\n  type IconProps,\n} from '@acronis-platform/icons-react/stroke-multi';\n\nimport { cn } from '@/lib/utils';\nimport { ButtonIcon, type ButtonIconProps } from '../button-icon';\n\n// Mirrors the Figma \"Alert\" component set (node 7421:125155). The banner is a\n// *neutral* surface — not a status tint — with the severity carried by two\n// things: a 1px border in the status color and a 6px status line down the\n// leading edge. Geometry, colors, and spacing all come from the dedicated\n// `--ui-alert-*` tier (imported in `src/styles/index.css`).\n//\n// The status line is a `::before` pseudo-element rather than a DOM node: it is\n// never optional and never a slot, so a real element would only add markup for\n// consumers to get wrong. It is bled 1px outwards on three sides so it paints\n// *over* the border it sits on (matching the Figma, where the line covers the\n// leading border), and the root's clip rounds its square corners to the\n// container radius. `start-` keeps it on the leading edge under `dir=\"rtl\"`.\n//\n// `overflow-clip-margin: border-box` is load-bearing, not decoration. `overflow:\n// clip` alone clips at the *padding* box, which is exactly where the bleed has to\n// reach — and an absolutely positioned pseudo-element's containing block is that\n// same padding box — so the outward 1px gets shaved off and the line renders 5px\n// wide starting *inside* the border. Since the border and the line are different\n// tokens, that reads as two adjacent stripes rather than one 6px line. Moving the\n// clip edge out to the border box lets the bleed survive while still rounding the\n// corners.\n//\n// Typography comes from the generated classes: `ui-typography-headings-lead` for\n// the title (Inter Regular 18 / 24) and the Alert tier's own emitted class for the\n// description (Inter Regular 14 / 24) — the same pair Toast uses, since the two are\n// the same card. Only the *colors* are separate token references. Every other value\n// is a `var(--ui-alert-*)` reference, so a brand override is honored without\n// touching this file.\nconst alertVariants = cva(\n  'relative flex w-full items-start overflow-clip [overflow-clip-margin:border-box] border-solid ' +\n    'min-w-[var(--ui-alert-global-container-width-min)] ' +\n    'gap-[var(--ui-alert-global-container-gap)] ' +\n    'px-[var(--ui-alert-global-container-padding-x)] py-[var(--ui-alert-global-container-padding-y)] ' +\n    'rounded-[var(--ui-alert-global-container-border-radius)] ' +\n    'border-[length:var(--ui-alert-global-container-border-width)] ' +\n    'bg-[var(--ui-alert-global-container-background)] ' +\n    \"before:absolute before:content-[''] before:-inset-y-px before:start-[-1px] \" +\n    'before:w-[var(--ui-alert-global-container-status-width)]',\n  {\n    variants: {\n      variant: {\n        info: 'border-[color:var(--ui-alert-info-border-color)] before:bg-[var(--ui-alert-info-left-line)]',\n        success:\n          'border-[color:var(--ui-alert-success-border-color)] before:bg-[var(--ui-alert-success-left-line)]',\n        warning:\n          'border-[color:var(--ui-alert-warning-border-color)] before:bg-[var(--ui-alert-warning-left-line)]',\n        critical:\n          'border-[color:var(--ui-alert-critical-border-color)] before:bg-[var(--ui-alert-critical-left-line)]',\n        danger:\n          'border-[color:var(--ui-alert-danger-border-color)] before:bg-[var(--ui-alert-danger-left-line)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'info',\n    },\n  }\n);\n\nexport type AlertVariant = NonNullable<\n  VariantProps<typeof alertVariants>['variant']\n>;\n\n// The Figma binds exactly one icon to each variant, and they are multicolor\n// (`stroke-multi`) glyphs that carry their own fills — so unlike the previous\n// monocolor port, nothing here tints them.\nconst STATUS_ICON: Record<AlertVariant, React.ComponentType<IconProps>> = {\n  info: CircleInfoBlueIcon,\n  success: CircleCheckGreenIcon,\n  warning: TriangleWarningYellowIcon,\n  critical: CircleWarningOrangeIcon,\n  danger: DiamondWarningRedIcon,\n};\n\nconst AlertVariantContext = React.createContext<AlertVariant>('info');\n\nexport interface AlertProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof alertVariants> {}\n\n/**\n * A status banner: neutral surface, a status-colored border, and a status line\n * down the leading edge. Compose it from `AlertIcon`, `AlertContent`\n * (`AlertText` + `AlertTitle` / `AlertDescription`, optionally `AlertActions`)\n * and `AlertClose`.\n */\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  ({ className, variant, ...props }, ref) => (\n    <AlertVariantContext.Provider value={variant ?? 'info'}>\n      <div\n        ref={ref}\n        role=\"alert\"\n        data-slot=\"alert\"\n        data-variant={variant ?? 'info'}\n        className={cn(alertVariants({ variant }), className)}\n        {...props}\n      />\n    </AlertVariantContext.Provider>\n  )\n);\nAlert.displayName = 'Alert';\n\n/**\n * The leading status icon. Renders the variant's own icon when given no\n * `children`; pass children to substitute a different glyph.\n */\nconst AlertIcon = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => {\n  const variant = React.useContext(AlertVariantContext);\n  const StatusIcon = STATUS_ICON[variant];\n  return (\n    // The icon box's padding (4/8) is what optically aligns the 16px glyph with\n    // the first line of the title: glyph centre 8 + 8 = 16, title centre\n    // (AlertText's 4px padding) 4 + 12 = 16.\n    <div\n      ref={ref}\n      data-slot=\"alert-icon\"\n      className={cn(\n        'flex shrink-0 items-start px-[var(--ui-alert-global-icon-padding-x)] py-[var(--ui-alert-global-icon-padding-y)] [&_svg]:size-[var(--ui-alert-global-icon-size)] [&_svg]:shrink-0',\n        className\n      )}\n      {...props}\n    >\n      {children ?? <StatusIcon size={16} />}\n    </div>\n  );\n});\nAlertIcon.displayName = 'AlertIcon';\n\nconst AlertContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"alert-content\"\n    className={cn(\n      'flex min-w-0 flex-1 flex-col items-start gap-[var(--ui-alert-global-content-gap)] px-[var(--ui-alert-global-content-padding-x)] py-[var(--ui-alert-global-content-padding-y)]',\n      className\n    )}\n    {...props}\n  />\n));\nAlertContent.displayName = 'AlertContent';\n\n/**\n * The title + description block. Its own vertical padding is what keeps the\n * text aligned with the icon, so keep the title and description inside it\n * rather than directly under `AlertContent`.\n */\nconst AlertText = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"alert-text\"\n    className={cn(\n      'flex w-full shrink-0 flex-col items-start gap-[var(--ui-alert-global-content-text-container-gap)] px-[var(--ui-alert-global-content-text-container-padding-x)] py-[var(--ui-alert-global-content-text-container-padding-y)] [word-break:break-word]',\n      className\n    )}\n    {...props}\n  />\n));\nAlertText.displayName = 'AlertText';\n\nconst AlertTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h5\n    ref={ref}\n    data-slot=\"alert-title\"\n    className={cn(\n      'ui-typography-headings-lead mb-0 w-full text-[var(--ui-alert-global-content-text-container-title-color)]',\n      className\n    )}\n    {...props}\n  />\n));\nAlertTitle.displayName = 'AlertTitle';\n\nconst AlertDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    data-slot=\"alert-description\"\n    className={cn(\n      'ui-alert-global-content-text-container-description-text-style w-full text-[var(--ui-alert-global-content-text-container-description-color)]',\n      className\n    )}\n    {...props}\n  />\n));\nAlertDescription.displayName = 'AlertDescription';\n\n/**\n * Action buttons under the text. Place inside `AlertContent` (after\n * `AlertText`), as the Figma does — the row wraps when it runs out of width.\n */\nconst AlertActions = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"alert-actions\"\n    className={cn(\n      'flex w-full shrink-0 flex-wrap content-start items-start gap-x-[var(--ui-alert-global-content-actions-container-gap-x)] gap-y-[var(--ui-alert-global-content-actions-container-gap-y)] px-[var(--ui-alert-global-content-actions-container-padding-x)] py-[var(--ui-alert-global-content-actions-container-padding-y)]',\n      className\n    )}\n    {...props}\n  />\n));\nAlertActions.displayName = 'AlertActions';\n\n// The spec pins this control to a ghost ButtonIcon with a times glyph, so the\n// props that would change that are omitted from the type instead of merely being\n// defaulted — `...props` spreads after them, so keeping them would let\n// `<AlertClose variant=\"secondary\" />` silently win over the documented behavior.\n//\n// `aria-label` needs the belt *and* braces. Omitting it from the type is not\n// enough: TypeScript deliberately skips checking hyphenated JSX attributes (the\n// same rule that lets `data-*` through), so `<AlertClose aria-label=\"X\" />` still\n// compiles. Pinning `aria-label` after the spread is what actually makes\n// `ariaLabel` authoritative.\nexport interface AlertCloseProps\n  extends Omit<ButtonIconProps, 'children' | 'variant' | 'render' | 'aria-label'> {\n  /** Accessible name for the dismiss control. */\n  ariaLabel?: string;\n}\n\n/**\n * The trailing dismiss control. Rendering it is what makes an alert\n * dismissable — wire `onClick` to remove the alert. Name it with `ariaLabel`.\n */\nconst AlertClose = React.forwardRef<HTMLButtonElement, AlertCloseProps>(\n  ({ className, ariaLabel = 'Close', ...props }, ref) => (\n    <ButtonIcon\n      ref={ref}\n      data-slot=\"alert-close\"\n      className={cn('shrink-0', className)}\n      {...props}\n      variant=\"ghost\"\n      aria-label={ariaLabel}\n    >\n      <TimesIcon />\n    </ButtonIcon>\n  )\n);\nAlertClose.displayName = 'AlertClose';\n\nexport {\n  Alert,\n  AlertIcon,\n  AlertContent,\n  AlertText,\n  AlertTitle,\n  AlertDescription,\n  AlertActions,\n  AlertClose,\n  alertVariants,\n};\n"],"names":["alertVariants","cva","STATUS_ICON","CircleInfoBlueIcon","CircleCheckGreenIcon","TriangleWarningYellowIcon","CircleWarningOrangeIcon","DiamondWarningRedIcon","AlertVariantContext","React","Alert","className","variant","props","ref","jsx","cn","AlertIcon","children","StatusIcon","AlertContent","AlertText","AlertTitle","AlertDescription","AlertActions","AlertClose","ariaLabel","ButtonIcon","TimesIcon"],"mappings":"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"}
+{"version":3,"file":"alert.js","sources":["../../../../src/components/ui/alert/alert.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport {\n  CircleCheckGreenIcon,\n  CircleInfoBlueIcon,\n  CircleWarningOrangeIcon,\n  DiamondWarningRedIcon,\n  TriangleWarningYellowIcon,\n  type IconProps,\n} from '@acronis-platform/icons-react/stroke-multi';\n\nimport { cn } from '@/lib/utils';\nimport { ButtonIcon, type ButtonIconProps } from '../button-icon';\n\n// Mirrors the Figma \"Alert\" component set (node 7421:125155). The banner is a\n// *neutral* surface — not a status tint — with the severity carried by two\n// things: a 1px border in the status color and a 6px status line down the\n// leading edge. Geometry, colors, and spacing all come from the dedicated\n// `--ui-alert-*` tier (imported in `src/styles/index.css`).\n//\n// The status line is a `::before` pseudo-element rather than a DOM node: it is\n// never optional and never a slot, so a real element would only add markup for\n// consumers to get wrong. It is bled 1px outwards on three sides so it paints\n// *over* the border it sits on (matching the Figma, where the line covers the\n// leading border), and the root's clip rounds its square corners to the\n// container radius. `start-` keeps it on the leading edge under `dir=\"rtl\"`.\n//\n// `overflow-clip-margin: border-box` is load-bearing, not decoration. `overflow:\n// clip` alone clips at the *padding* box, which is exactly where the bleed has to\n// reach — and an absolutely positioned pseudo-element's containing block is that\n// same padding box — so the outward 1px gets shaved off and the line renders 5px\n// wide starting *inside* the border. Since the border and the line are different\n// tokens, that reads as two adjacent stripes rather than one 6px line. Moving the\n// clip edge out to the border box lets the bleed survive while still rounding the\n// corners.\n//\n// Typography comes from the Alert tier's own emitted classes — the title (Inter\n// Regular 18 / 24) and the description (Inter Regular 14 / 24) — the same pair\n// Toast uses, since the two are the same card. The title previously borrowed the\n// semantic `ui-typography-headings-lead` because the tier emitted no title class;\n// it does now, and the two resolve identically today, so a brand that re-styles\n// only Alert's title is honored. Only the *colors* are separate token references.\n// Every other value is a `var(--ui-alert-*)` reference, so a brand override is\n// honored without touching this file.\nconst alertVariants = cva(\n  'relative flex w-full items-start overflow-clip [overflow-clip-margin:border-box] border-solid ' +\n    'min-w-[var(--ui-alert-global-container-width-min)] ' +\n    'gap-[var(--ui-alert-global-container-gap)] ' +\n    'px-[var(--ui-alert-global-container-padding-x)] py-[var(--ui-alert-global-container-padding-y)] ' +\n    'rounded-[var(--ui-alert-global-container-border-radius)] ' +\n    'border-[length:var(--ui-alert-global-container-border-width)] ' +\n    'bg-[var(--ui-alert-global-container-background)] ' +\n    \"before:absolute before:content-[''] before:-inset-y-px before:start-[-1px] \" +\n    'before:w-[var(--ui-alert-global-container-status-width)]',\n  {\n    variants: {\n      variant: {\n        info: 'border-[color:var(--ui-alert-info-border-color)] before:bg-[var(--ui-alert-info-left-line)]',\n        success:\n          'border-[color:var(--ui-alert-success-border-color)] before:bg-[var(--ui-alert-success-left-line)]',\n        warning:\n          'border-[color:var(--ui-alert-warning-border-color)] before:bg-[var(--ui-alert-warning-left-line)]',\n        critical:\n          'border-[color:var(--ui-alert-critical-border-color)] before:bg-[var(--ui-alert-critical-left-line)]',\n        danger:\n          'border-[color:var(--ui-alert-danger-border-color)] before:bg-[var(--ui-alert-danger-left-line)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'info',\n    },\n  }\n);\n\nexport type AlertVariant = NonNullable<\n  VariantProps<typeof alertVariants>['variant']\n>;\n\n// The Figma binds exactly one icon to each variant, and they are multicolor\n// (`stroke-multi`) glyphs that carry their own fills — so unlike the previous\n// monocolor port, nothing here tints them.\nconst STATUS_ICON: Record<AlertVariant, React.ComponentType<IconProps>> = {\n  info: CircleInfoBlueIcon,\n  success: CircleCheckGreenIcon,\n  warning: TriangleWarningYellowIcon,\n  critical: CircleWarningOrangeIcon,\n  danger: DiamondWarningRedIcon,\n};\n\nconst AlertVariantContext = React.createContext<AlertVariant>('info');\n\nexport interface AlertProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof alertVariants> {}\n\n/**\n * A status banner: neutral surface, a status-colored border, and a status line\n * down the leading edge. Compose it from `AlertIcon`, `AlertContent`\n * (`AlertText` + `AlertTitle` / `AlertDescription`, optionally `AlertActions`)\n * and `AlertClose`.\n */\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  ({ className, variant, ...props }, ref) => (\n    <AlertVariantContext.Provider value={variant ?? 'info'}>\n      <div\n        ref={ref}\n        role=\"alert\"\n        data-slot=\"alert\"\n        data-variant={variant ?? 'info'}\n        className={cn(alertVariants({ variant }), className)}\n        {...props}\n      />\n    </AlertVariantContext.Provider>\n  )\n);\nAlert.displayName = 'Alert';\n\n/**\n * The leading status icon. Renders the variant's own icon when given no\n * `children`; pass children to substitute a different glyph.\n */\nconst AlertIcon = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => {\n  const variant = React.useContext(AlertVariantContext);\n  const StatusIcon = STATUS_ICON[variant];\n  return (\n    // The icon box's padding (4/8) is what optically aligns the 16px glyph with\n    // the first line of the title: glyph centre 8 + 8 = 16, title centre\n    // (AlertText's 4px padding) 4 + 12 = 16.\n    <div\n      ref={ref}\n      data-slot=\"alert-icon\"\n      className={cn(\n        'flex shrink-0 items-start px-[var(--ui-alert-global-icon-padding-x)] py-[var(--ui-alert-global-icon-padding-y)] [&_svg]:size-[var(--ui-alert-global-icon-size)] [&_svg]:shrink-0',\n        className\n      )}\n      {...props}\n    >\n      {children ?? <StatusIcon size={16} />}\n    </div>\n  );\n});\nAlertIcon.displayName = 'AlertIcon';\n\nconst AlertContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"alert-content\"\n    className={cn(\n      'flex min-w-0 flex-1 flex-col items-start gap-[var(--ui-alert-global-content-gap)] px-[var(--ui-alert-global-content-padding-x)] py-[var(--ui-alert-global-content-padding-y)]',\n      className\n    )}\n    {...props}\n  />\n));\nAlertContent.displayName = 'AlertContent';\n\n/**\n * The title + description block. Its own vertical padding is what keeps the\n * text aligned with the icon, so keep the title and description inside it\n * rather than directly under `AlertContent`.\n */\nconst AlertText = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"alert-text\"\n    className={cn(\n      'flex w-full shrink-0 flex-col items-start gap-[var(--ui-alert-global-content-text-container-gap)] px-[var(--ui-alert-global-content-text-container-padding-x)] py-[var(--ui-alert-global-content-text-container-padding-y)] [word-break:break-word]',\n      className\n    )}\n    {...props}\n  />\n));\nAlertText.displayName = 'AlertText';\n\nconst AlertTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h5\n    ref={ref}\n    data-slot=\"alert-title\"\n    className={cn(\n      'ui-alert-global-content-text-container-title-text-style mb-0 w-full text-[var(--ui-alert-global-content-text-container-title-color)]',\n      className\n    )}\n    {...props}\n  />\n));\nAlertTitle.displayName = 'AlertTitle';\n\nconst AlertDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    data-slot=\"alert-description\"\n    className={cn(\n      'ui-alert-global-content-text-container-description-text-style w-full text-[var(--ui-alert-global-content-text-container-description-color)]',\n      className\n    )}\n    {...props}\n  />\n));\nAlertDescription.displayName = 'AlertDescription';\n\n/**\n * Action buttons under the text. Place inside `AlertContent` (after\n * `AlertText`), as the Figma does — the row wraps when it runs out of width.\n */\nconst AlertActions = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"alert-actions\"\n    className={cn(\n      'flex w-full shrink-0 flex-wrap content-start items-start gap-x-[var(--ui-alert-global-content-actions-container-gap-x)] gap-y-[var(--ui-alert-global-content-actions-container-gap-y)] px-[var(--ui-alert-global-content-actions-container-padding-x)] py-[var(--ui-alert-global-content-actions-container-padding-y)]',\n      className\n    )}\n    {...props}\n  />\n));\nAlertActions.displayName = 'AlertActions';\n\n// The spec pins this control to a ghost ButtonIcon with a times glyph, so the\n// props that would change that are omitted from the type instead of merely being\n// defaulted — `...props` spreads after them, so keeping them would let\n// `<AlertClose variant=\"secondary\" />` silently win over the documented behavior.\n//\n// `aria-label` needs the belt *and* braces. Omitting it from the type is not\n// enough: TypeScript deliberately skips checking hyphenated JSX attributes (the\n// same rule that lets `data-*` through), so `<AlertClose aria-label=\"X\" />` still\n// compiles. Pinning `aria-label` after the spread is what actually makes\n// `ariaLabel` authoritative.\nexport interface AlertCloseProps\n  extends Omit<ButtonIconProps, 'children' | 'variant' | 'render' | 'aria-label'> {\n  /** Accessible name for the dismiss control. */\n  ariaLabel?: string;\n}\n\n/**\n * The trailing dismiss control. Rendering it is what makes an alert\n * dismissable — wire `onClick` to remove the alert. Name it with `ariaLabel`.\n */\nconst AlertClose = React.forwardRef<HTMLButtonElement, AlertCloseProps>(\n  ({ className, ariaLabel = 'Close', ...props }, ref) => (\n    <ButtonIcon\n      ref={ref}\n      data-slot=\"alert-close\"\n      className={cn('shrink-0', className)}\n      {...props}\n      variant=\"ghost\"\n      aria-label={ariaLabel}\n    >\n      <TimesIcon />\n    </ButtonIcon>\n  )\n);\nAlertClose.displayName = 'AlertClose';\n\nexport {\n  Alert,\n  AlertIcon,\n  AlertContent,\n  AlertText,\n  AlertTitle,\n  AlertDescription,\n  AlertActions,\n  AlertClose,\n  alertVariants,\n};\n"],"names":["alertVariants","cva","STATUS_ICON","CircleInfoBlueIcon","CircleCheckGreenIcon","TriangleWarningYellowIcon","CircleWarningOrangeIcon","DiamondWarningRedIcon","AlertVariantContext","React","Alert","className","variant","props","ref","jsx","cn","AlertIcon","children","StatusIcon","AlertContent","AlertText","AlertTitle","AlertDescription","AlertActions","AlertClose","ariaLabel","ButtonIcon","TimesIcon"],"mappings":"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"}

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

@@ -1,9 +1,9 @@
 import { jsx as t } from "react/jsx-runtime";
 import * as o from "react";
 import { Avatar as v } from "@base-ui/react/avatar";
-import { cva as c } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { cva as d } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
 import { cn as l } from "../../../lib/utils.js";
-const s = c(
+const g = d(
   "relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden size-[var(--ui-avatar-global-avatar-size)] rounded-[var(--ui-avatar-global-avatar-border-border-radius)] [box-shadow:0_0_0_var(--ui-avatar-global-avatar-border-border-width)_var(--ui-avatar-global-avatar-border-color)] text-xs font-semibold leading-4",
   {
     variants: {
@@ -22,16 +22,7 @@ const s = c(
       color: "teal"
     }
   }
-), b = o.forwardRef(({ className: a, color: r, ...e }, i) => /* @__PURE__ */ t(
-  v.Root,
-  {
-    ref: i,
-    className: l(s({ color: r }), a),
-    ...e
-  }
-));
-b.displayName = "Avatar";
-const u = o.forwardRef(({ className: a, ...r }, e) => /* @__PURE__ */ t(
+), m = o.forwardRef(({ className: a, ...r }, e) => /* @__PURE__ */ t(
   v.Image,
   {
     ref: e,
@@ -39,8 +30,8 @@ const u = o.forwardRef(({ className: a, ...r }, e) => /* @__PURE__ */ t(
     ...r
   }
 ));
-u.displayName = "AvatarImage";
-const n = o.forwardRef(({ className: a, ...r }, e) => /* @__PURE__ */ t(
+m.displayName = "AvatarImage";
+const c = o.forwardRef(({ className: a, ...r }, e) => /* @__PURE__ */ t(
   v.Fallback,
   {
     ref: e,
@@ -48,8 +39,28 @@ const n = o.forwardRef(({ className: a, ...r }, e) => /* @__PURE__ */ t(
     ...r
   }
 ));
-n.displayName = "AvatarFallback";
-const d = o.forwardRef(
+c.displayName = "AvatarFallback";
+const f = o.forwardRef(
+  ({
+    className: a,
+    color: r,
+    variant: e = "text",
+    label: s = "SB",
+    icon: b,
+    children: i,
+    ...u
+  }, n) => /* @__PURE__ */ t(
+    v.Root,
+    {
+      ref: n,
+      className: l(g({ color: r }), a),
+      ...u,
+      children: i !== void 0 ? i : e === "icon" ? b : /* @__PURE__ */ t(c, { children: s })
+    }
+  )
+);
+f.displayName = "Avatar";
+const x = o.forwardRef(
   ({ className: a, ...r }, e) => /* @__PURE__ */ t(
     "div",
     {
@@ -62,12 +73,12 @@ const d = o.forwardRef(
     }
   )
 );
-d.displayName = "AvatarGroup";
+x.displayName = "AvatarGroup";
 export {
-  b as Avatar,
-  n as AvatarFallback,
-  d as AvatarGroup,
-  u as AvatarImage,
-  s as avatarVariants
+  f as Avatar,
+  c as AvatarFallback,
+  x as AvatarGroup,
+  m as AvatarImage,
+  g as avatarVariants
 };
 //# sourceMappingURL=avatar.js.map

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 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;"}
+{"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// `variant`/`label`/`icon` are a convenience for the common no-photo case (the\n// Figma component has no \"image\" variant at all — just Text/Icon): with no\n// `children` composed, Avatar auto-renders either `label` (Text) or `icon`\n// (Icon). Composing `AvatarImage`/`AvatarFallback` as `children` — for the real\n// photo-with-fallback case — always takes precedence over both.\n//\n// \"No `children` composed\" means `children === undefined` specifically, not\n// merely falsy. An explicit `null` child is a deliberate \"render nothing\" and\n// has to stay empty: `timeline.tsx`'s marker passes\n// `icon ?? (initials ? <AvatarFallback/> : null)`, so a blank marker resolves to\n// `null`, and a `children ?? …` check would paint the default 'SB' label over\n// what should be an empty dot.\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 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 interface AvatarProps\n  extends\n    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n    VariantProps<typeof avatarVariants> {\n  /**\n   * Selects the auto-rendered fallback content when no `children` are\n   * composed: initials (`label`) or an `icon`. Ignored once `children` (e.g.\n   * `AvatarImage`/`AvatarFallback`) are composed directly — including an\n   * explicit `null`, which renders an empty circle.\n   */\n  variant?: 'text' | 'icon';\n  /**\n   * Initials shown for the `text` variant when no `children` are composed\n   * (i.e. `children` is `undefined`).\n   */\n  label?: string;\n  /**\n   * Icon shown for the `icon` variant when no `children` are composed\n   * (i.e. `children` is `undefined`).\n   */\n  icon?: React.ReactNode;\n}\n\n/**\n * A user/entity avatar: a colored circle showing an image, initials, or an\n * icon. Compose `AvatarImage`/`AvatarFallback` for the photo-with-fallback\n * case, or use `variant`/`label`/`icon` for a quick text or icon badge; stack\n * several in `AvatarGroup`.\n */\nconst Avatar = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(\n  (\n    {\n      className,\n      color,\n      variant = 'text',\n      label = 'SB',\n      icon,\n      children,\n      ...props\n    },\n    ref\n  ) => (\n    <AvatarPrimitive.Root\n      ref={ref}\n      className={cn(avatarVariants({ color }), className)}\n      {...props}\n    >\n      {children !== undefined ? (\n        children\n      ) : variant === 'icon' ? (\n        icon\n      ) : (\n        <AvatarFallback>{label}</AvatarFallback>\n      )}\n    </AvatarPrimitive.Root>\n  )\n);\nAvatar.displayName = 'Avatar';\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","AvatarImage","React","className","props","ref","jsx","AvatarPrimitive","cn","AvatarFallback","Avatar","color","variant","label","icon","children","AvatarGroup"],"mappings":";;;;;AA2CA,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,GAOMC,IAAcC,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG,EAAG,0BAA0BL,CAAS;AAAA,IAChD,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAY,cAAc;AAO1B,MAAMQ,IAAiBP,EAAM,WAG3B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG,EAAG,8CAA8CL,CAAS;AAAA,IACpE,GAAGC;AAAA,EAAA;AACN,CACD;AACDK,EAAe,cAAc;AA+B7B,MAAMC,IAASR,EAAM;AAAA,EAInB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,OAAAQ;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,OAAAC,IAAQ;AAAA,IACR,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGX;AAAA,EAAA,GAELC,MAEA,gBAAAC;AAAA,IAACC,EAAgB;AAAA,IAAhB;AAAA,MACC,KAAAF;AAAA,MACA,WAAWG,EAAGT,EAAe,EAAE,OAAAY,EAAA,CAAO,GAAGR,CAAS;AAAA,MACjD,GAAGC;AAAA,MAEH,UAAAW,MAAa,SACZA,IACEH,MAAY,SACdE,IAEA,gBAAAR,EAACG,KAAgB,UAAAI,EAAA,CAAM;AAAA,IAAA;AAAA,EAAA;AAI/B;AACAH,EAAO,cAAc;AASrB,MAAMM,IAAcd,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MACxB,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWG;AAAA,QACT;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AACAY,EAAY,cAAc;"}