@acronis-platform/ui-react 2.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/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;"}

package/dist/components/ui/card/card.js

@@ -1,92 +1,168 @@
-import * as o from "react";
-import { mergeProps as t } from "@base-ui/react/merge-props";
-import { useRender as s } from "@base-ui/react/use-render";
-import { cn as p } from "../../../lib/utils.js";
-const m = o.forwardRef(
-  ({ className: e, render: a, ...r }, d) => s({
-    render: a,
-    ref: d,
+import { jsxs as c, Fragment as D, jsx as r } from "react/jsx-runtime";
+import * as i from "react";
+import { mergeProps as s } from "@base-ui/react/merge-props";
+import { useRender as d } from "@base-ui/react/use-render";
+import { cva as E } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { HandleGripIcon as P, PencilIcon as B } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as n } from "../../../lib/utils.js";
+import { useAccordionContainerContext as G, AccordionContainer as S } from "../accordion-container/accordion-container.js";
+import { Switch as q } from "../switch/switch.js";
+import { Avatar as J, AvatarFallback as K } from "../avatar/avatar.js";
+import { ButtonIconInput as L } from "../button-icon-input/button-icon-input.js";
+import { buttonIconVariants as M } from "../button-icon/button-icon.js";
+const O = E(
+  "overflow-hidden rounded-lg border bg-[var(--ui-background-surface-primary)] text-[var(--ui-text-on-surface-primary)] shadow-xs",
+  {
+    variants: {
+      hasError: {
+        false: "border-[var(--ui-border-on-surface-border)]",
+        true: "border-[var(--ui-border-on-surface-border-error)]"
+      }
+    },
+    defaultVariants: {
+      hasError: !1
+    }
+  }
+), Q = i.forwardRef(
+  ({ className: a, hasError: e, render: o, ...t }, l) => d({
+    render: o,
+    ref: l,
     defaultTagName: "div",
-    props: t(
-      {
-        className: p(
-          "rounded-lg border border-border bg-background text-foreground shadow-xs",
-          e
-        )
-      },
-      r
+    props: s(
+      { className: n(O({ hasError: e }), a) },
+      t
     )
   })
 );
-m.displayName = "Card";
-const f = o.forwardRef(
-  ({ className: e, render: a, ...r }, d) => s({
-    render: a,
-    ref: d,
+Q.displayName = "Card";
+const U = i.forwardRef(
+  ({
+    className: a,
+    title: e,
+    description: o,
+    hasDescription: t = !1,
+    isDraggable: l = !1,
+    dragHandleLabel: m = "Reorder",
+    isSwitchable: p = !1,
+    switchChecked: u,
+    defaultSwitchChecked: h,
+    onSwitchCheckedChange: v,
+    switchDisabled: x,
+    switchLabel: b = "Toggle card",
+    hasAvatar: g = !1,
+    avatarLabel: N = "",
+    avatar: C,
+    hasRename: w = !1,
+    onRename: k,
+    renameLabel: y = "Rename",
+    extras: R,
+    actions: A,
+    isCollapsible: f = !1,
+    collapseLabel: T = "Collapse card",
+    render: I,
+    children: F,
+    ...j
+  }, H) => {
+    const { collapsible: V, open: z } = G();
+    return d({
+      render: I,
+      ref: H,
+      defaultTagName: "div",
+      props: s(
+        {
+          className: n(
+            "flex w-full shrink-0 items-center gap-2 overflow-hidden border-[var(--ui-border-on-surface-divider)] px-4 py-2",
+            !(f && V && !z) && "border-b",
+            a
+          ),
+          children: /* @__PURE__ */ c(D, { children: [
+            l && /* @__PURE__ */ r(
+              P,
+              {
+                size: 16,
+                className: "shrink-0 cursor-grab text-[var(--ui-text-on-surface-secondary)]",
+                title: m
+              }
+            ),
+            p && /* @__PURE__ */ r(
+              q,
+              {
+                checked: u,
+                defaultChecked: h,
+                onCheckedChange: v,
+                disabled: x,
+                "aria-label": b,
+                className: "shrink-0"
+              }
+            ),
+            g && (C ?? /* @__PURE__ */ r(J, { color: "blue", className: "shrink-0", children: /* @__PURE__ */ r(K, { children: N }) })),
+            /* @__PURE__ */ c("div", { className: "flex min-w-0 flex-1 flex-col items-start justify-center gap-0.5", children: [
+              /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
+                e && /* @__PURE__ */ r("p", { className: "truncate text-lg leading-6 font-normal text-[var(--ui-text-on-surface-primary)]", children: e }),
+                w && /* @__PURE__ */ r(
+                  L,
+                  {
+                    variant: "normal",
+                    onClick: k,
+                    "aria-label": y,
+                    children: /* @__PURE__ */ r(B, { size: 16 })
+                  }
+                ),
+                R
+              ] }),
+              t && /* @__PURE__ */ r("p", { className: "w-full truncate text-xs leading-4 text-[var(--ui-text-on-surface-secondary)]", children: o })
+            ] }),
+            F,
+            A,
+            f && /* @__PURE__ */ r(
+              S.Trigger,
+              {
+                "aria-label": T,
+                className: M({ variant: "ghost" })
+              }
+            )
+          ] })
+        },
+        j
+      )
+    });
+  }
+);
+U.displayName = "CardHeader";
+const W = i.forwardRef(
+  ({ className: a, render: e, ...o }, t) => d({
+    render: e,
+    ref: t,
     defaultTagName: "div",
-    props: t(
-      { className: p("flex flex-col space-y-1.5 p-6", e) },
-      r
+    props: s(
+      { className: n("flex w-full flex-col px-4 pb-4", a) },
+      o
     )
   })
 );
-f.displayName = "CardHeader";
-const l = o.forwardRef(
-  ({ className: e, render: a, ...r }, d) => s({
-    render: a,
-    ref: d,
+W.displayName = "CardContent";
+const X = i.forwardRef(
+  ({ className: a, render: e, ...o }, t) => d({
+    render: e,
+    ref: t,
     defaultTagName: "div",
-    props: t(
+    props: s(
       {
-        className: p(
-          "text-2xl font-semibold leading-none tracking-tight",
-          e
+        className: n(
+          "flex w-full shrink-0 items-start gap-4 overflow-hidden border-t border-[var(--ui-border-on-surface-divider)] p-4",
+          a
         )
       },
-      r
-    )
-  })
-);
-l.displayName = "CardTitle";
-const i = o.forwardRef(
-  ({ className: e, render: a, ...r }, d) => s({
-    render: a,
-    ref: d,
-    defaultTagName: "div",
-    props: t(
-      { className: p("text-sm text-muted-foreground", e) },
-      r
-    )
-  })
-);
-i.displayName = "CardDescription";
-const n = o.forwardRef(
-  ({ className: e, render: a, ...r }, d) => s({
-    render: a,
-    ref: d,
-    defaultTagName: "div",
-    props: t({ className: p("p-6 pt-0", e) }, r)
-  })
-);
-n.displayName = "CardContent";
-const c = o.forwardRef(
-  ({ className: e, render: a, ...r }, d) => s({
-    render: a,
-    ref: d,
-    defaultTagName: "div",
-    props: t(
-      { className: p("flex items-center p-6 pt-0", e) },
-      r
+      o
     )
   })
 );
-c.displayName = "CardFooter";
+X.displayName = "CardFooter";
 export {
-  m as Card,
-  n as CardContent,
-  i as CardDescription,
-  c as CardFooter,
-  f as CardHeader,
-  l as CardTitle
+  Q as Card,
+  W as CardContent,
+  X as CardFooter,
+  U as CardHeader,
+  O as cardVariants
 };
 //# sourceMappingURL=card.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../../../src/components/ui/card/card.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\n\nimport { cn } from '@/lib/utils';\n\n// Initial version ported from `@acronis-platform/shadcn-uikit`'s `card`\n// (packages/ui-legacy/src/components/ui/card.tsx). No \"ready for dev\" Figma node\n// exists yet, so this is a design-pending v1: there is no `--ui-card-*` token\n// tier, so the surface/text/border colors resolve to the shared **semantic**\n// tokens via the bridged Tailwind names in `src/styles/index.css`:\n//   • bg-background    → --ui-background-surface-primary   (legacy `bg-card`)\n//   • text-foreground  → --ui-text-on-surface-primary      (legacy `text-card-foreground`)\n//   • border-border    → --ui-border-on-surface-border      (legacy bare `border`)\n//   • text-muted-foreground → --ui-text-on-surface-secondary (description)\n// Geometry (radius, padding, gaps, shadow) is carried over verbatim from legacy.\n// Reconcile against the real design with `/figma-component Card <url> --update`\n// once a mockup lands — at which point an elevated-surface token may replace the\n// primary surface used for the card background.\n\ninterface CardPartProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Replace the rendered `<div>` with another element or component (Base UI\n   * composition) — e.g. render `CardTitle` as a heading. The component's props\n   * and class names are merged onto it.\n   */\n  render?: useRender.RenderProp;\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardPartProps>(\n  ({ className, render, ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        {\n          className: cn(\n            'rounded-lg border border-border bg-background text-foreground shadow-xs',\n            className\n          ),\n        },\n        props\n      ),\n    })\n);\nCard.displayName = 'Card';\n\nconst CardHeader = React.forwardRef<HTMLDivElement, CardPartProps>(\n  ({ className, render, ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        { className: cn('flex flex-col space-y-1.5 p-6', className) },\n        props\n      ),\n    })\n);\nCardHeader.displayName = 'CardHeader';\n\nconst CardTitle = React.forwardRef<HTMLDivElement, CardPartProps>(\n  ({ className, render, ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        {\n          className: cn(\n            'text-2xl font-semibold leading-none tracking-tight',\n            className\n          ),\n        },\n        props\n      ),\n    })\n);\nCardTitle.displayName = 'CardTitle';\n\nconst CardDescription = React.forwardRef<HTMLDivElement, CardPartProps>(\n  ({ className, render, ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        { className: cn('text-sm text-muted-foreground', className) },\n        props\n      ),\n    })\n);\nCardDescription.displayName = 'CardDescription';\n\nconst CardContent = React.forwardRef<HTMLDivElement, CardPartProps>(\n  ({ className, render, ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>({ className: cn('p-6 pt-0', className) }, props),\n    })\n);\nCardContent.displayName = 'CardContent';\n\nconst CardFooter = React.forwardRef<HTMLDivElement, CardPartProps>(\n  ({ className, render, ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        { className: cn('flex items-center p-6 pt-0', className) },\n        props\n      ),\n    })\n);\nCardFooter.displayName = 'CardFooter';\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardDescription,\n  CardContent,\n  type CardPartProps,\n};\n"],"names":["Card","React","className","render","props","ref","useRender","mergeProps","cn","CardHeader","CardTitle","CardDescription","CardContent","CardFooter"],"mappings":";;;;AA6BA,MAAMA,IAAOC,EAAM;AAAA,EACjB,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAChCC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL;AAAA,QACE,WAAWC;AAAA,UACT;AAAA,UACAN;AAAA,QAAA;AAAA,MACF;AAAA,MAEFE;AAAA,IAAA;AAAA,EACF,CACD;AACL;AACAJ,EAAK,cAAc;AAEnB,MAAMS,IAAaR,EAAM;AAAA,EACvB,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAChCC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL,EAAE,WAAWC,EAAG,iCAAiCN,CAAS,EAAA;AAAA,MAC1DE;AAAA,IAAA;AAAA,EACF,CACD;AACL;AACAK,EAAW,cAAc;AAEzB,MAAMC,IAAYT,EAAM;AAAA,EACtB,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAChCC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL;AAAA,QACE,WAAWC;AAAA,UACT;AAAA,UACAN;AAAA,QAAA;AAAA,MACF;AAAA,MAEFE;AAAA,IAAA;AAAA,EACF,CACD;AACL;AACAM,EAAU,cAAc;AAExB,MAAMC,IAAkBV,EAAM;AAAA,EAC5B,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAChCC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL,EAAE,WAAWC,EAAG,iCAAiCN,CAAS,EAAA;AAAA,MAC1DE;AAAA,IAAA;AAAA,EACF,CACD;AACL;AACAO,EAAgB,cAAc;AAE9B,MAAMC,IAAcX,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAChCC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE,EAAkB,EAAE,WAAWC,EAAG,YAAYN,CAAS,EAAA,GAAKE,CAAK;AAAA,EAAA,CACzE;AACL;AACAQ,EAAY,cAAc;AAE1B,MAAMC,IAAaZ,EAAM;AAAA,EACvB,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAChCC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL,EAAE,WAAWC,EAAG,8BAA8BN,CAAS,EAAA;AAAA,MACvDE;AAAA,IAAA;AAAA,EACF,CACD;AACL;AACAS,EAAW,cAAc;"}
+{"version":3,"file":"card.js","sources":["../../../../src/components/ui/card/card.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { HandleGripIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport { PencilIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar';\nimport { ButtonIconInput } from '@/components/ui/button-icon-input';\nimport { Switch } from '@/components/ui/switch';\nimport { buttonIconVariants } from '@/components/ui/button-icon';\nimport {\n  AccordionContainer,\n  useAccordionContainerContext,\n} from '@/components/ui/accordion-container';\n\n// Figma node 10012:195993 (\"Card\"). The design's `isCollapsable` variant\n// (`false` / `true-expanded` / `true-collapsed`) is implemented by composing\n// `Card` with `AccordionContainer` (the shared disclosure primitive) rather\n// than a bespoke chevron/animation: wrap `CardContent`/`CardFooter` in\n// `AccordionContainer.Content` and set `CardHeader`'s `isCollapsible` to\n// render the trigger. The trigger is restyled with `buttonIconVariants({\n// variant: 'ghost' })` instead of `AccordionContainer.Trigger`'s own neutral\n// default — Figma's `ButtonCollapse` is a real ghost `ButtonIcon` instance\n// (confirmed via Code Connect metadata + its idle icon color resolving to\n// `--ui-button-icon-global-icon-color-idle`), not the accordion's plain\n// neutral chevron.\n// No dedicated `--ui-card-*` token tier exists for the root chrome (only the\n// unrelated `CardFilter` tier does) — the design references plain semantic\n// tokens for the surface/border/divider/text colors, so this stays on the\n// shared semantic tier rather than a component-local one.\n//\n// `hasHeader` / `hasBody` / `hasFooter` from Figma aren't reproduced as\n// booleans: this is a compound component (`Card` + `CardHeader` +\n// `CardContent` + `CardFooter`), so a part is simply omitted by the consumer\n// instead of hidden behind a flag — same pattern as the rest of this package\n// (see `breadcrumb.tsx`). `CardHeader`'s own feature toggles (`isDraggable`,\n// `isSwitchable`, `hasAvatar`, `hasRename`, `hasDescription`) stay as booleans\n// because each gates real interactive/content sub-parts with independent\n// payloads (a callback, a slot, a label), not a structural part swap.\n\nconst cardVariants = cva(\n  'overflow-hidden rounded-lg border bg-[var(--ui-background-surface-primary)] text-[var(--ui-text-on-surface-primary)] shadow-xs',\n  {\n    variants: {\n      hasError: {\n        false: 'border-[var(--ui-border-on-surface-border)]',\n        true: 'border-[var(--ui-border-on-surface-border-error)]',\n      },\n    },\n    defaultVariants: {\n      hasError: false,\n    },\n  }\n);\n\nexport interface CardProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof cardVariants> {\n  /**\n   * Replace the rendered `<div>` with another element or component (Base UI\n   * composition) — e.g. render `Card` as an `<article>`.\n   */\n  render?: useRender.RenderProp;\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className, hasError, render, ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        { className: cn(cardVariants({ hasError }), className) },\n        props\n      ),\n    })\n);\nCard.displayName = 'Card';\n\nexport interface CardHeaderProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'title'\n> {\n  /** The card's title. Renders nothing when omitted. */\n  title?: string;\n  /** Helper text shown under the title; only rendered when `hasDescription`. */\n  description?: string;\n  /** Shows `description` below the title. */\n  hasDescription?: boolean;\n  /** Shows a drag handle at the start of the header, for reorderable lists. */\n  isDraggable?: boolean;\n  /** Accessible label for the drag handle. */\n  dragHandleLabel?: string;\n  /** Shows a toggle switch at the start of the header. */\n  isSwitchable?: boolean;\n  /** Controlled checked state of the header switch. */\n  switchChecked?: boolean;\n  /** Uncontrolled initial checked state of the header switch. */\n  defaultSwitchChecked?: boolean;\n  /** Fires when the header switch is toggled. */\n  onSwitchCheckedChange?: (checked: boolean) => void;\n  /** Disables the header switch. */\n  switchDisabled?: boolean;\n  /** Accessible label for the header switch. */\n  switchLabel?: string;\n  /** Shows an avatar before the title. */\n  hasAvatar?: boolean;\n  /** Initials shown in the default avatar; ignored if `avatar` is provided. */\n  avatarLabel?: string;\n  /** Replaces the default initials avatar with custom content. */\n  avatar?: React.ReactNode;\n  /** Shows a rename button next to the title. */\n  hasRename?: boolean;\n  /** Fires when the rename button is activated. */\n  onRename?: () => void;\n  /** Accessible label for the rename button. */\n  renameLabel?: string;\n  /** Extra content rendered inline next to the title (e.g. a tag or badge). */\n  extras?: React.ReactNode;\n  /** Actions rendered at the end of the header (e.g. a menu button). */\n  actions?: React.ReactNode;\n  /**\n   * Shows a disclosure trigger at the end of the header. Only has an effect\n   * when this header renders inside a collapsible `AccordionContainer` —\n   * see the collapsible composition example.\n   */\n  isCollapsible?: boolean;\n  /** Accessible label for the collapse trigger. */\n  collapseLabel?: string;\n  /**\n   * Replace the rendered `<div>` with another element or component (Base UI\n   * composition).\n   */\n  render?: useRender.RenderProp;\n}\n\nconst CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(\n  (\n    {\n      className,\n      title,\n      description,\n      hasDescription = false,\n      isDraggable = false,\n      dragHandleLabel = 'Reorder',\n      isSwitchable = false,\n      switchChecked,\n      defaultSwitchChecked,\n      onSwitchCheckedChange,\n      switchDisabled,\n      switchLabel = 'Toggle card',\n      hasAvatar = false,\n      avatarLabel = '',\n      avatar,\n      hasRename = false,\n      onRename,\n      renameLabel = 'Rename',\n      extras,\n      actions,\n      isCollapsible = false,\n      collapseLabel = 'Collapse card',\n      render,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { collapsible: inAccordion, open } = useAccordionContainerContext();\n    // Drop the divider whenever this header sits in a collapsed accordion\n    // panel — it otherwise doubles up against Card's own outer border once\n    // there's nothing visible below to separate it from. This doesn't check\n    // whether the panel actually has no visible content below (a sibling\n    // outside AccordionContainer.Content, or a CardFooter with its own\n    // border-t, can still mask a doubled divider in those cases).\n    const hideDivider = isCollapsible && inAccordion && !open;\n\n    return useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        {\n          className: cn(\n            'flex w-full shrink-0 items-center gap-2 overflow-hidden border-[var(--ui-border-on-surface-divider)] px-4 py-2',\n            !hideDivider && 'border-b',\n            className\n          ),\n          children: (\n            <>\n              {isDraggable && (\n                <HandleGripIcon\n                  size={16}\n                  className=\"shrink-0 cursor-grab text-[var(--ui-text-on-surface-secondary)]\"\n                  title={dragHandleLabel}\n                />\n              )}\n              {isSwitchable && (\n                <Switch\n                  checked={switchChecked}\n                  defaultChecked={defaultSwitchChecked}\n                  onCheckedChange={onSwitchCheckedChange}\n                  disabled={switchDisabled}\n                  aria-label={switchLabel}\n                  className=\"shrink-0\"\n                />\n              )}\n              {hasAvatar &&\n                (avatar ?? (\n                  <Avatar color=\"blue\" className=\"shrink-0\">\n                    <AvatarFallback>{avatarLabel}</AvatarFallback>\n                  </Avatar>\n                ))}\n              <div className=\"flex min-w-0 flex-1 flex-col items-start justify-center gap-0.5\">\n                <div className=\"flex items-center gap-2\">\n                  {title && (\n                    <p className=\"truncate text-lg leading-6 font-normal text-[var(--ui-text-on-surface-primary)]\">\n                      {title}\n                    </p>\n                  )}\n                  {hasRename && (\n                    <ButtonIconInput\n                      variant=\"normal\"\n                      onClick={onRename}\n                      aria-label={renameLabel}\n                    >\n                      <PencilIcon size={16} />\n                    </ButtonIconInput>\n                  )}\n                  {extras}\n                </div>\n                {hasDescription && (\n                  <p className=\"w-full truncate text-xs leading-4 text-[var(--ui-text-on-surface-secondary)]\">\n                    {description}\n                  </p>\n                )}\n              </div>\n              {children}\n              {actions}\n              {isCollapsible && (\n                <AccordionContainer.Trigger\n                  aria-label={collapseLabel}\n                  className={buttonIconVariants({ variant: 'ghost' })}\n                />\n              )}\n            </>\n          ),\n        },\n        props\n      ),\n    });\n  }\n);\nCardHeader.displayName = 'CardHeader';\n\nexport interface CardPartProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Replace the rendered `<div>` with another element or component (Base UI\n   * composition).\n   */\n  render?: useRender.RenderProp;\n}\n\nconst CardContent = React.forwardRef<HTMLDivElement, CardPartProps>(\n  ({ className, render, ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        { className: cn('flex w-full flex-col px-4 pb-4', className) },\n        props\n      ),\n    })\n);\nCardContent.displayName = 'CardContent';\n\nconst CardFooter = React.forwardRef<HTMLDivElement, CardPartProps>(\n  ({ className, render, ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        {\n          className: cn(\n            'flex w-full shrink-0 items-start gap-4 overflow-hidden border-t border-[var(--ui-border-on-surface-divider)] p-4',\n            className\n          ),\n        },\n        props\n      ),\n    })\n);\nCardFooter.displayName = 'CardFooter';\n\nexport { Card, CardHeader, CardContent, CardFooter, cardVariants };\n"],"names":["cardVariants","cva","Card","React","className","hasError","render","props","ref","useRender","mergeProps","cn","CardHeader","title","description","hasDescription","isDraggable","dragHandleLabel","isSwitchable","switchChecked","defaultSwitchChecked","onSwitchCheckedChange","switchDisabled","switchLabel","hasAvatar","avatarLabel","avatar","hasRename","onRename","renameLabel","extras","actions","isCollapsible","collapseLabel","children","inAccordion","open","useAccordionContainerContext","jsxs","Fragment","jsx","HandleGripIcon","Switch","Avatar","AvatarFallback","ButtonIconInput","PencilIcon","AccordionContainer","buttonIconVariants","CardContent","CardFooter"],"mappings":"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"}