@acronis-platform/ui-react 3.0.0 → 4.1.0

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

@@ -1,168 +1,104 @@
-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: s(
-      { className: n(O({ hasError: e }), a) },
-      t
-    )
-  })
-);
-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: s(
-      { className: n("flex w-full flex-col px-4 pb-4", a) },
-      o
-    )
-  })
-);
-W.displayName = "CardContent";
-const X = i.forwardRef(
-  ({ className: a, render: e, ...o }, t) => d({
-    render: e,
-    ref: t,
-    defaultTagName: "div",
-    props: s(
-      {
-        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
-        )
-      },
-      o
-    )
-  })
-);
-X.displayName = "CardFooter";
-export {
-  Q as Card,
-  W as CardContent,
-  X as CardFooter,
-  U as CardHeader,
-  O as cardVariants
-};
-//# sourceMappingURL=card.js.map
+import { cn as e } from "../../../lib/utils.js";
+import { AccordionContainer as t, useAccordionContainerContext as n } from "../accordion-container/accordion-container.js";
+import { cva as r } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { buttonIconVariants as i } from "../button-icon/button-icon.js";
+import { Avatar as a, AvatarFallback as o } from "../avatar/avatar.js";
+import { ButtonIconInput as s } from "../button-icon-input/button-icon-input.js";
+import { Switch as c } from "../switch/switch.js";
+import * as l from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { HandleGripIcon as p, PencilIcon as m } from "@acronis-platform/icons-react/stroke-mono";
+import { useRender as h } from "@base-ui/react/use-render";
+import { mergeProps as g } from "@base-ui/react/merge-props";
+//#region src/components/ui/card/card.tsx
+var _ = r("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 }
+}), v = l.forwardRef(({ className: t, hasError: n, render: r, ...i }, a) => h({
+	render: r,
+	ref: a,
+	defaultTagName: "div",
+	props: g({ className: e(_({ hasError: n }), t) }, i)
+}));
+v.displayName = "Card";
+var y = l.forwardRef(({ className: r, title: l, description: _, hasDescription: v = !1, isDraggable: y = !1, dragHandleLabel: b = "Reorder", isSwitchable: x = !1, switchChecked: S, defaultSwitchChecked: C, onSwitchCheckedChange: w, switchDisabled: T, switchLabel: E = "Toggle card", hasAvatar: D = !1, avatarLabel: O = "", avatar: k, hasRename: A = !1, onRename: j, renameLabel: M = "Rename", extras: N, actions: P, isCollapsible: F = !1, collapseLabel: I = "Collapse card", render: L, children: R, ...z }, B) => {
+	let { collapsible: V, open: H } = n();
+	return h({
+		render: L,
+		ref: B,
+		defaultTagName: "div",
+		props: g({
+			className: e("flex w-full shrink-0 items-center gap-2 overflow-hidden border-[var(--ui-border-on-surface-divider)] px-4 py-2", !(F && V && !H) && "border-b", r),
+			children: /* @__PURE__ */ f(u, { children: [
+				y && /* @__PURE__ */ d(p, {
+					size: 16,
+					className: "shrink-0 cursor-grab text-[var(--ui-text-on-surface-secondary)]",
+					title: b
+				}),
+				x && /* @__PURE__ */ d(c, {
+					checked: S,
+					defaultChecked: C,
+					onCheckedChange: w,
+					disabled: T,
+					"aria-label": E,
+					className: "shrink-0"
+				}),
+				D && (k ?? /* @__PURE__ */ d(a, {
+					color: "blue",
+					className: "shrink-0",
+					children: /* @__PURE__ */ d(o, { children: O })
+				})),
+				/* @__PURE__ */ f("div", {
+					className: "flex min-w-0 flex-1 flex-col items-start justify-center gap-0.5",
+					children: [/* @__PURE__ */ f("div", {
+						className: "flex items-center gap-2",
+						children: [
+							l && /* @__PURE__ */ d("p", {
+								className: "truncate text-lg leading-6 font-normal text-[var(--ui-text-on-surface-primary)]",
+								children: l
+							}),
+							A && /* @__PURE__ */ d(s, {
+								variant: "normal",
+								onClick: j,
+								"aria-label": M,
+								children: /* @__PURE__ */ d(m, { size: 16 })
+							}),
+							N
+						]
+					}), v && /* @__PURE__ */ d("p", {
+						className: "w-full truncate text-xs leading-4 text-[var(--ui-text-on-surface-secondary)]",
+						children: _
+					})]
+				}),
+				R,
+				P,
+				F && /* @__PURE__ */ d(t.Trigger, {
+					"aria-label": I,
+					className: i({ variant: "ghost" })
+				})
+			] })
+		}, z)
+	});
+});
+y.displayName = "CardHeader";
+var b = l.forwardRef(({ className: t, render: n, ...r }, i) => h({
+	render: n,
+	ref: i,
+	defaultTagName: "div",
+	props: g({ className: e("flex w-full flex-col px-4 pb-4", t) }, r)
+}));
+b.displayName = "CardContent";
+var x = l.forwardRef(({ className: t, render: n, ...r }, i) => h({
+	render: n,
+	ref: i,
+	defaultTagName: "div",
+	props: g({ className: e("flex w-full shrink-0 items-start gap-4 overflow-hidden border-t border-[var(--ui-border-on-surface-divider)] p-4", t) }, r)
+}));
+x.displayName = "CardFooter";
+//#endregion
+export { v as Card, b as CardContent, x as CardFooter, y as CardHeader, _ 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';\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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"}
+{"version":3,"file":"card.js","names":[],"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"],"mappings":";;;;;;;;;;;;;AA0CA,IAAM,IAAe,EACnB,kIACA;CACE,UAAU,EACR,UAAU;EACR,OAAO;EACP,MAAM;CACR,EACF;CACA,iBAAiB,EACf,UAAU,GACZ;AACF,CACF,GAaM,IAAO,EAAM,YAChB,EAAE,cAAW,aAAU,WAAQ,GAAG,KAAS,MAC1C,EAAU;CACR;CACA;CACA,gBAAgB;CAChB,OAAO,EACL,EAAE,WAAW,EAAG,EAAa,EAAE,YAAS,CAAC,GAAG,CAAS,EAAE,GACvD,CACF;AACF,CAAC,CACL;AACA,EAAK,cAAc;AA2DnB,IAAM,IAAa,EAAM,YAErB,EACE,cACA,UACA,gBACA,oBAAiB,IACjB,iBAAc,IACd,qBAAkB,WAClB,kBAAe,IACf,kBACA,yBACA,0BACA,mBACA,iBAAc,eACd,eAAY,IACZ,iBAAc,IACd,WACA,eAAY,IACZ,aACA,iBAAc,UACd,WACA,YACA,mBAAgB,IAChB,mBAAgB,iBAChB,WACA,aACA,GAAG,KAEL,MACG;CACH,IAAM,EAAE,aAAa,GAAa,YAAS,EAA6B;CASxE,OAAO,EAAU;EACf;EACA;EACA,gBAAgB;EAChB,OAAO,EACL;GACE,WAAW,EACT,kHACA,EAVY,KAAiB,KAAe,CAAC,MAU7B,YAChB,CACF;GACA,UACE,kBAAA,GAAA,EAAA,UAAA;IACG,KACC,kBAAC,GAAD;KACE,MAAM;KACN,WAAU;KACV,OAAO;IACR,CAAA;IAEF,KACC,kBAAC,GAAD;KACE,SAAS;KACT,gBAAgB;KAChB,iBAAiB;KACjB,UAAU;KACV,cAAY;KACZ,WAAU;IACX,CAAA;IAEF,MACE,KACC,kBAAC,GAAD;KAAQ,OAAM;KAAO,WAAU;KAC7B,UAAA,kBAAC,GAAD,EAAA,UAAiB,EAA4B,CAAA;IACvC,CAAA;IAEZ,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA;OACG,KACC,kBAAC,KAAD;QAAG,WAAU;QACV,UAAA;OACA,CAAA;OAEJ,KACC,kBAAC,GAAD;QACE,SAAQ;QACR,SAAS;QACT,cAAY;QAEZ,UAAA,kBAAC,GAAD,EAAY,MAAM,GAAK,CAAA;OACR,CAAA;OAElB;MACE;KACJ,CAAA,GAAA,KACC,kBAAC,KAAD;MAAG,WAAU;MACV,UAAA;KACA,CAAA,CAEF;;IACJ;IACA;IACA,KACC,kBAAC,EAAmB,SAApB;KACE,cAAY;KACZ,WAAW,EAAmB,EAAE,SAAS,QAAQ,CAAC;IACnD,CAAA;GAEH,EAAA,CAAA;EAEN,GACA,CACF;CACF,CAAC;AACH,CACF;AACA,EAAW,cAAc;AAUzB,IAAM,IAAc,EAAM,YACvB,EAAE,cAAW,WAAQ,GAAG,KAAS,MAChC,EAAU;CACR;CACA;CACA,gBAAgB;CAChB,OAAO,EACL,EAAE,WAAW,EAAG,kCAAkC,CAAS,EAAE,GAC7D,CACF;AACF,CAAC,CACL;AACA,EAAY,cAAc;AAE1B,IAAM,IAAa,EAAM,YACtB,EAAE,cAAW,WAAQ,GAAG,KAAS,MAChC,EAAU;CACR;CACA;CACA,gBAAgB;CAChB,OAAO,EACL,EACE,WAAW,EACT,oHACA,CACF,EACF,GACA,CACF;AACF,CAAC,CACL;AACA,EAAW,cAAc"}

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

@@ -1,76 +1,49 @@
-import { jsxs as l, Fragment as g, jsx as t } from "react/jsx-runtime";
-import * as p from "react";
-import { mergeProps as m } from "@base-ui/react/merge-props";
-import { useRender as x } from "@base-ui/react/use-render";
-import { cva as h } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { cn as c } from "../../../lib/utils.js";
-const y = h(
-  "inline-flex w-[224px] min-h-[var(--ui-card-filter-global-container-height)] flex-col items-start rounded-[var(--ui-card-filter-global-container-border-radius)] border-[length:var(--ui-card-filter-global-container-border-width)] border-solid border-[color:var(--ui-card-filter-global-border-color-idle)] bg-[var(--ui-card-filter-global-container-color-idle)] px-[var(--ui-card-filter-global-container-padding-x)] py-[var(--ui-card-filter-global-container-padding-y)] transition-colors",
-  {
-    variants: {
-      variant: {
-        static: "",
-        "static-empty": "",
-        clickable: "cursor-pointer outline-none hover:border-[color:var(--ui-card-filter-global-border-color-hover)] hover:bg-[var(--ui-card-filter-global-container-color-hover)] active:border-[color:var(--ui-card-filter-global-border-color-active)] active:bg-[var(--ui-card-filter-global-container-color-active)] focus-visible:border-[color:var(--ui-card-filter-global-border-color-focused)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[selected=true]:border-[color:var(--ui-card-filter-global-border-color-active)] data-[selected=true]:bg-[var(--ui-card-filter-global-container-color-active)]"
-      }
-    },
-    defaultVariants: {
-      variant: "static"
-    }
-  }
-), k = {
-  static: "text-[var(--ui-card-filter-static-value-color-idle)]",
-  "static-empty": "text-[var(--ui-card-filter-static-value-color-disabled)]",
-  clickable: "text-[var(--ui-card-filter-clickable-value-color)]"
-}, N = p.forwardRef(
-  ({
-    className: d,
-    variant: r = "static",
-    label: s,
-    value: n,
-    icon: b,
-    selected: a,
-    render: o,
-    ...u
-  }, v) => {
-    const i = r === "static-empty", e = r === "clickable", f = i ? "–" : n;
-    return x({
-      render: o,
-      ref: v,
-      defaultTagName: e ? "button" : "div",
-      props: m(
-        {
-          className: c(y({ variant: r }), d),
-          ...e && !o ? {
-            type: "button",
-            ...a !== void 0 ? { "aria-pressed": a } : {}
-          } : {},
-          ...e ? { "data-selected": a ? "true" : void 0 } : {},
-          children: /* @__PURE__ */ l(g, { children: [
-            /* @__PURE__ */ t("span", { className: "text-xs font-normal leading-4 text-[var(--ui-card-filter-global-label-color)]", children: s }),
-            /* @__PURE__ */ l("span", { className: "flex items-center gap-[var(--ui-card-filter-global-content-gap)] [&_svg]:size-4 [&_svg]:shrink-0", children: [
-              !i && b,
-              /* @__PURE__ */ t(
-                "span",
-                {
-                  className: c(
-                    "text-2xl font-semibold leading-8",
-                    k[r ?? "static"]
-                  ),
-                  children: f
-                }
-              )
-            ] })
-          ] })
-        },
-        u
-      )
-    });
-  }
-);
-N.displayName = "CardFilter";
-export {
-  N as CardFilter,
-  y as cardFilterVariants
-};
-//# sourceMappingURL=card-filter.js.map
+import { cn as e } from "../../../lib/utils.js";
+import { cva as t } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import * as n from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useRender as o } from "@base-ui/react/use-render";
+import { mergeProps as s } from "@base-ui/react/merge-props";
+//#region src/components/ui/card-filter/card-filter.tsx
+var c = t("inline-flex w-[224px] min-h-[var(--ui-card-filter-global-container-height)] flex-col items-start rounded-[var(--ui-card-filter-global-container-border-radius)] border-[length:var(--ui-card-filter-global-container-border-width)] border-solid border-[color:var(--ui-card-filter-global-border-color-idle)] bg-[var(--ui-card-filter-global-container-color-idle)] px-[var(--ui-card-filter-global-container-padding-x)] py-[var(--ui-card-filter-global-container-padding-y)] transition-colors", {
+	variants: { variant: {
+		static: "",
+		"static-empty": "",
+		clickable: "cursor-pointer outline-none hover:border-[color:var(--ui-card-filter-global-border-color-hover)] hover:bg-[var(--ui-card-filter-global-container-color-hover)] active:border-[color:var(--ui-card-filter-global-border-color-active)] active:bg-[var(--ui-card-filter-global-container-color-active)] focus-visible:border-[color:var(--ui-card-filter-global-border-color-focused)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[selected=true]:border-[color:var(--ui-card-filter-global-border-color-active)] data-[selected=true]:bg-[var(--ui-card-filter-global-container-color-active)]"
+	} },
+	defaultVariants: { variant: "static" }
+}), l = {
+	static: "text-[var(--ui-card-filter-static-value-color-idle)]",
+	"static-empty": "text-[var(--ui-card-filter-static-value-color-disabled)]",
+	clickable: "text-[var(--ui-card-filter-clickable-value-color)]"
+}, u = n.forwardRef(({ className: t, variant: n = "static", label: u, value: d, icon: f, selected: p, render: m, ...h }, g) => {
+	let _ = n === "static-empty", v = n === "clickable", y = _ ? "–" : d;
+	return o({
+		render: m,
+		ref: g,
+		defaultTagName: v ? "button" : "div",
+		props: s({
+			className: e(c({ variant: n }), t),
+			...v && !m ? {
+				type: "button",
+				...p === void 0 ? {} : { "aria-pressed": p }
+			} : {},
+			...v ? { "data-selected": p ? "true" : void 0 } : {},
+			children: /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("span", {
+				className: "text-xs font-normal leading-4 text-[var(--ui-card-filter-global-label-color)]",
+				children: u
+			}), /* @__PURE__ */ a("span", {
+				className: "flex items-center gap-[var(--ui-card-filter-global-content-gap)] [&_svg]:size-4 [&_svg]:shrink-0",
+				children: [!_ && f, /* @__PURE__ */ i("span", {
+					className: e("text-2xl font-semibold leading-8", l[n ?? "static"]),
+					children: y
+				})]
+			})] })
+		}, h)
+	});
+});
+u.displayName = "CardFilter";
+//#endregion
+export { u as CardFilter, c as cardFilterVariants };
+
+//# sourceMappingURL=card-filter.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"card-filter.js","sources":["../../../../src/components/ui/card-filter/card-filter.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';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"CardFilter\" component: a compact stat/filter card — a caption\n// `label` above a content row (optional `icon` + a large `value`). `variant` maps\n// to the Figma `variant` property:\n//   • `static`        — non-interactive; value in `--ui-card-filter-static-value-color-idle`.\n//   • `static-empty`  — non-interactive placeholder; no icon, an em-dash value in\n//                       `--ui-card-filter-static-value-color-disabled`.\n//   • `clickable`     — interactive (renders a <button>); value in\n//                       `--ui-card-filter-clickable-value-color`, plus hover / active /\n//                       focus-visible treatments.\n// Per the Figma constraint (\"if an element is not clickable, it cannot have a state\n// other than Idle\") only `clickable` carries the hover / active / focus state\n// classes — `static` / `static-empty` stay idle. Geometry (224px width, 64px min\n// height, 8px radius, 16/8px padding, 8px content gap, 1px border) and every state\n// color come from the `--ui-card-filter-*` tokens. Focus: a 3px `--ui-focus-primary`\n// ring flush to the edge (no offset), matching the rest of the library.\nconst cardFilterVariants = cva(\n  'inline-flex w-[224px] min-h-[var(--ui-card-filter-global-container-height)] flex-col items-start rounded-[var(--ui-card-filter-global-container-border-radius)] border-[length:var(--ui-card-filter-global-container-border-width)] border-solid border-[color:var(--ui-card-filter-global-border-color-idle)] bg-[var(--ui-card-filter-global-container-color-idle)] px-[var(--ui-card-filter-global-container-padding-x)] py-[var(--ui-card-filter-global-container-padding-y)] transition-colors',\n  {\n    variants: {\n      variant: {\n        static: '',\n        'static-empty': '',\n        clickable:\n          'cursor-pointer outline-none hover:border-[color:var(--ui-card-filter-global-border-color-hover)] hover:bg-[var(--ui-card-filter-global-container-color-hover)] active:border-[color:var(--ui-card-filter-global-border-color-active)] active:bg-[var(--ui-card-filter-global-container-color-active)] focus-visible:border-[color:var(--ui-card-filter-global-border-color-focused)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[selected=true]:border-[color:var(--ui-card-filter-global-border-color-active)] data-[selected=true]:bg-[var(--ui-card-filter-global-container-color-active)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'static',\n    },\n  }\n);\n\n// The value color is the one token that varies by variant rather than by state.\nconst valueColorClass: Record<\n  NonNullable<VariantProps<typeof cardFilterVariants>['variant']>,\n  string\n> = {\n  static: 'text-[var(--ui-card-filter-static-value-color-idle)]',\n  'static-empty': 'text-[var(--ui-card-filter-static-value-color-disabled)]',\n  clickable: 'text-[var(--ui-card-filter-clickable-value-color)]',\n};\n\nexport interface CardFilterProps\n  extends\n    Omit<React.HTMLAttributes<HTMLElement>, 'children'>,\n    VariantProps<typeof cardFilterVariants> {\n  /** Caption shown above the value. */\n  label?: React.ReactNode;\n  /** The large value. Ignored for `variant=\"static-empty\"` (shows an em-dash). */\n  value?: React.ReactNode;\n  /** Optional leading icon (16px) rendered before the value. Hidden for `static-empty`. */\n  icon?: React.ReactNode;\n  /**\n   * `clickable` only — applies the selected (active) styling and exposes the\n   * card as a pressed toggle (`aria-pressed`). Controlled only.\n   */\n  selected?: boolean;\n  /**\n   * Replace the rendered element (`<button>` for `clickable`, otherwise `<div>`)\n   * with another element or component (Base UI composition) — e.g. a router link\n   * for a clickable filter. The component's props and class names are merged onto it.\n   */\n  render?: useRender.RenderProp;\n}\n\n/**\n * A compact stat/filter card: a label, an optional icon, and a prominent value.\n * Use `variant=\"clickable\"` for a filter the user can activate (renders a button);\n * `static` / `static-empty` are presentational.\n */\nconst CardFilter = React.forwardRef<HTMLElement, CardFilterProps>(\n  (\n    {\n      className,\n      variant = 'static',\n      label,\n      value,\n      icon,\n      selected,\n      render,\n      ...props\n    },\n    ref\n  ) => {\n    const isEmpty = variant === 'static-empty';\n    const isClickable = variant === 'clickable';\n    const displayValue = isEmpty ? '–' : value;\n\n    return useRender({\n      render,\n      ref,\n      defaultTagName: isClickable ? 'button' : 'div',\n      props: mergeProps<'button'>(\n        {\n          className: cn(cardFilterVariants({ variant }), className),\n          ...(isClickable && !render\n            ? {\n                type: 'button' as const,\n                ...(selected !== undefined ? { 'aria-pressed': selected } : {}),\n              }\n            : {}),\n          ...(isClickable ? { 'data-selected': selected ? 'true' : undefined } : {}),\n          children: (\n            <>\n              <span className=\"text-xs font-normal leading-4 text-[var(--ui-card-filter-global-label-color)]\">\n                {label}\n              </span>\n              <span className=\"flex items-center gap-[var(--ui-card-filter-global-content-gap)] [&_svg]:size-4 [&_svg]:shrink-0\">\n                {!isEmpty && icon}\n                <span\n                  className={cn(\n                    'text-2xl font-semibold leading-8',\n                    valueColorClass[variant ?? 'static']\n                  )}\n                >\n                  {displayValue}\n                </span>\n              </span>\n            </>\n          ),\n        },\n        props\n      ),\n    });\n  }\n);\nCardFilter.displayName = 'CardFilter';\n\nexport { CardFilter, cardFilterVariants };\n"],"names":["cardFilterVariants","cva","valueColorClass","CardFilter","React","className","variant","label","value","icon","selected","render","props","ref","isEmpty","isClickable","displayValue","useRender","mergeProps","cn","jsxs","Fragment","jsx"],"mappings":";;;;;;AAsBA,MAAMA,IAAqBC;AAAA,EACzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,gBAAgB;AAAA,QAChB,WACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GAGMC,IAGF;AAAA,EACF,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,WAAW;AACb,GA8BMC,IAAaC,EAAM;AAAA,EACvB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAUR,MAAY,gBACtBS,IAAcT,MAAY,aAC1BU,IAAeF,IAAU,MAAMN;AAErC,WAAOS,EAAU;AAAA,MACf,QAAAN;AAAA,MACA,KAAAE;AAAA,MACA,gBAAgBE,IAAc,WAAW;AAAA,MACzC,OAAOG;AAAA,QACL;AAAA,UACE,WAAWC,EAAGnB,EAAmB,EAAE,SAAAM,EAAA,CAAS,GAAGD,CAAS;AAAA,UACxD,GAAIU,KAAe,CAACJ,IAChB;AAAA,YACE,MAAM;AAAA,YACN,GAAID,MAAa,SAAY,EAAE,gBAAgBA,EAAA,IAAa,CAAA;AAAA,UAAC,IAE/D,CAAA;AAAA,UACJ,GAAIK,IAAc,EAAE,iBAAiBL,IAAW,SAAS,OAAA,IAAc,CAAA;AAAA,UACvE,UACE,gBAAAU,EAAAC,GAAA,EACE,UAAA;AAAA,YAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,iFACb,UAAAf,GACH;AAAA,YACA,gBAAAa,EAAC,QAAA,EAAK,WAAU,oGACb,UAAA;AAAA,cAAA,CAACN,KAAWL;AAAA,cACb,gBAAAa;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWH;AAAA,oBACT;AAAA,oBACAjB,EAAgBI,KAAW,QAAQ;AAAA,kBAAA;AAAA,kBAGpC,UAAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,YACH,EAAA,CACF;AAAA,UAAA,EAAA,CACF;AAAA,QAAA;AAAA,QAGJJ;AAAA,MAAA;AAAA,IACF,CACD;AAAA,EACH;AACF;AACAT,EAAW,cAAc;"}
+{"version":3,"file":"card-filter.js","names":[],"sources":["../../../../src/components/ui/card-filter/card-filter.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';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"CardFilter\" component: a compact stat/filter card — a caption\n// `label` above a content row (optional `icon` + a large `value`). `variant` maps\n// to the Figma `variant` property:\n//   • `static`        — non-interactive; value in `--ui-card-filter-static-value-color-idle`.\n//   • `static-empty`  — non-interactive placeholder; no icon, an em-dash value in\n//                       `--ui-card-filter-static-value-color-disabled`.\n//   • `clickable`     — interactive (renders a <button>); value in\n//                       `--ui-card-filter-clickable-value-color`, plus hover / active /\n//                       focus-visible treatments.\n// Per the Figma constraint (\"if an element is not clickable, it cannot have a state\n// other than Idle\") only `clickable` carries the hover / active / focus state\n// classes — `static` / `static-empty` stay idle. Geometry (224px width, 64px min\n// height, 8px radius, 16/8px padding, 8px content gap, 1px border) and every state\n// color come from the `--ui-card-filter-*` tokens. Focus: a 3px `--ui-focus-primary`\n// ring flush to the edge (no offset), matching the rest of the library.\nconst cardFilterVariants = cva(\n  'inline-flex w-[224px] min-h-[var(--ui-card-filter-global-container-height)] flex-col items-start rounded-[var(--ui-card-filter-global-container-border-radius)] border-[length:var(--ui-card-filter-global-container-border-width)] border-solid border-[color:var(--ui-card-filter-global-border-color-idle)] bg-[var(--ui-card-filter-global-container-color-idle)] px-[var(--ui-card-filter-global-container-padding-x)] py-[var(--ui-card-filter-global-container-padding-y)] transition-colors',\n  {\n    variants: {\n      variant: {\n        static: '',\n        'static-empty': '',\n        clickable:\n          'cursor-pointer outline-none hover:border-[color:var(--ui-card-filter-global-border-color-hover)] hover:bg-[var(--ui-card-filter-global-container-color-hover)] active:border-[color:var(--ui-card-filter-global-border-color-active)] active:bg-[var(--ui-card-filter-global-container-color-active)] focus-visible:border-[color:var(--ui-card-filter-global-border-color-focused)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[selected=true]:border-[color:var(--ui-card-filter-global-border-color-active)] data-[selected=true]:bg-[var(--ui-card-filter-global-container-color-active)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'static',\n    },\n  }\n);\n\n// The value color is the one token that varies by variant rather than by state.\nconst valueColorClass: Record<\n  NonNullable<VariantProps<typeof cardFilterVariants>['variant']>,\n  string\n> = {\n  static: 'text-[var(--ui-card-filter-static-value-color-idle)]',\n  'static-empty': 'text-[var(--ui-card-filter-static-value-color-disabled)]',\n  clickable: 'text-[var(--ui-card-filter-clickable-value-color)]',\n};\n\nexport interface CardFilterProps\n  extends\n    Omit<React.HTMLAttributes<HTMLElement>, 'children'>,\n    VariantProps<typeof cardFilterVariants> {\n  /** Caption shown above the value. */\n  label?: React.ReactNode;\n  /** The large value. Ignored for `variant=\"static-empty\"` (shows an em-dash). */\n  value?: React.ReactNode;\n  /** Optional leading icon (16px) rendered before the value. Hidden for `static-empty`. */\n  icon?: React.ReactNode;\n  /**\n   * `clickable` only — applies the selected (active) styling and exposes the\n   * card as a pressed toggle (`aria-pressed`). Controlled only.\n   */\n  selected?: boolean;\n  /**\n   * Replace the rendered element (`<button>` for `clickable`, otherwise `<div>`)\n   * with another element or component (Base UI composition) — e.g. a router link\n   * for a clickable filter. The component's props and class names are merged onto it.\n   */\n  render?: useRender.RenderProp;\n}\n\n/**\n * A compact stat/filter card: a label, an optional icon, and a prominent value.\n * Use `variant=\"clickable\"` for a filter the user can activate (renders a button);\n * `static` / `static-empty` are presentational.\n */\nconst CardFilter = React.forwardRef<HTMLElement, CardFilterProps>(\n  (\n    {\n      className,\n      variant = 'static',\n      label,\n      value,\n      icon,\n      selected,\n      render,\n      ...props\n    },\n    ref\n  ) => {\n    const isEmpty = variant === 'static-empty';\n    const isClickable = variant === 'clickable';\n    const displayValue = isEmpty ? '–' : value;\n\n    return useRender({\n      render,\n      ref,\n      defaultTagName: isClickable ? 'button' : 'div',\n      props: mergeProps<'button'>(\n        {\n          className: cn(cardFilterVariants({ variant }), className),\n          ...(isClickable && !render\n            ? {\n                type: 'button' as const,\n                ...(selected !== undefined ? { 'aria-pressed': selected } : {}),\n              }\n            : {}),\n          ...(isClickable ? { 'data-selected': selected ? 'true' : undefined } : {}),\n          children: (\n            <>\n              <span className=\"text-xs font-normal leading-4 text-[var(--ui-card-filter-global-label-color)]\">\n                {label}\n              </span>\n              <span className=\"flex items-center gap-[var(--ui-card-filter-global-content-gap)] [&_svg]:size-4 [&_svg]:shrink-0\">\n                {!isEmpty && icon}\n                <span\n                  className={cn(\n                    'text-2xl font-semibold leading-8',\n                    valueColorClass[variant ?? 'static']\n                  )}\n                >\n                  {displayValue}\n                </span>\n              </span>\n            </>\n          ),\n        },\n        props\n      ),\n    });\n  }\n);\nCardFilter.displayName = 'CardFilter';\n\nexport { CardFilter, cardFilterVariants };\n"],"mappings":";;;;;;;AAsBA,IAAM,IAAqB,EACzB,ueACA;CACE,UAAU,EACR,SAAS;EACP,QAAQ;EACR,gBAAgB;EAChB,WACE;CACJ,EACF;CACA,iBAAiB,EACf,SAAS,SACX;AACF,CACF,GAGM,IAGF;CACF,QAAQ;CACR,gBAAgB;CAChB,WAAW;AACb,GA8BM,IAAa,EAAM,YAErB,EACE,cACA,aAAU,UACV,UACA,UACA,SACA,aACA,WACA,GAAG,KAEL,MACG;CACH,IAAM,IAAU,MAAY,gBACtB,IAAc,MAAY,aAC1B,IAAe,IAAU,MAAM;CAErC,OAAO,EAAU;EACf;EACA;EACA,gBAAgB,IAAc,WAAW;EACzC,OAAO,EACL;GACE,WAAW,EAAG,EAAmB,EAAE,WAAQ,CAAC,GAAG,CAAS;GACxD,GAAI,KAAe,CAAC,IAChB;IACE,MAAM;IACN,GAAI,MAAa,KAAA,IAA2C,CAAC,IAAhC,EAAE,gBAAgB,EAAS;GAC1D,IACA,CAAC;GACL,GAAI,IAAc,EAAE,iBAAiB,IAAW,SAAS,KAAA,EAAU,IAAI,CAAC;GACxE,UACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD;IAAM,WAAU;IACb,UAAA;GACG,CAAA,GACN,kBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CACG,CAAC,KAAW,GACb,kBAAC,QAAD;KACE,WAAW,EACT,oCACA,EAAgB,KAAW,SAC7B;KAEC,UAAA;IACG,CAAA,CACF;GACN,CAAA,CAAA,EAAA,CAAA;EAEN,GACA,CACF;CACF,CAAC;AACH,CACF;AACA,EAAW,cAAc"}