npm - @acronis-platform/ui-react - Versions diffs - 0.57.1 → 0.60.0 - Mend

@acronis-platform/ui-react 0.57.1 → 0.60.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (170) hide show

package/dist/components/ui/button-menu/button-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button-menu.js","sources":["../../../../src/components/ui/button-menu/button-menu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport {\n ChevronDownIcon,\n ChevronUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"ButtonMenu\" component: a Button-like trigger (label +\n// trailing chevron) that opens a menu. `variant` maps to the Figma `variant`\n// property (Primary / Secondary); the Figma `active` state is the open state\n// — the chevron flips down→up and the container takes its `-active` colors. Each\n// interaction state wires the container fill, label, icon, and — for `secondary`\n// — the border to its own dedicated `--ui-button-menu-` token from\n// @acronis-platform/tokens-pd. Every state is referenced explicitly (runtime\n// `var()` lookups: a brand override is only honored if the matching state token is\n// referenced). `primary` keeps a single label/icon color across states; only\n// `secondary` diverges them per state. Geometry — 32px height, 8px gap, 12px\n// padding-x, 4px radius, 64px min-width, 16px icon — comes from the\n// `--ui-button-menu-global-` tokens. The open treatment is driven by the\n// `data-open` attribute (set from the `open` prop) and CSS `:active` for press\n// feedback; disabled uses the explicit disabled tokens (not opacity). Focus: the\n// Figma focus state is a 3px `--ui-focus-primary` ring flush to the button edge\n// (no offset) — `ring-[3px]`, no `ring-offset`.\nconst buttonMenuVariants = cva(\n 'inline-flex h-[var(--ui-button-menu-global-container-height)] min-w-[var(--ui-button-menu-global-container-width-min)] items-center justify-center gap-[var(--ui-button-menu-global-container-gap)] whitespace-nowrap rounded-[var(--ui-button-menu-global-container-border-radius)] border border-transparent px-[var(--ui-button-menu-global-container-padding-x)] text-sm font-semibold leading-6 transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-[var(--ui-button-menu-global-icon-size)] [&_svg]:shrink-0',\n {\n variants: {\n variant: {\n primary:\n 'bg-[var(--ui-button-menu-primary-container-color-idle)] text-[var(--ui-button-menu-primary-label-color)] [&_svg]:text-[var(--ui-button-menu-primary-icon-color)] hover:bg-[var(--ui-button-menu-primary-container-color-hover)] active:bg-[var(--ui-button-menu-primary-container-color-active)] data-[open]:bg-[var(--ui-button-menu-primary-container-color-active)] disabled:bg-[var(--ui-button-menu-primary-container-color-disabled)]',\n secondary:\n 'bg-[var(--ui-button-menu-secondary-container-color-idle)] text-[var(--ui-button-menu-secondary-label-color-idle)] border-[var(--ui-button-menu-secondary-container-border-color-idle)] [&_svg]:text-[var(--ui-button-menu-secondary-icon-color-idle)] hover:bg-[var(--ui-button-menu-secondary-container-color-hover)] hover:text-[var(--ui-button-menu-secondary-label-color-hover)] hover:border-[var(--ui-button-menu-secondary-container-border-color-hover)] hover:[&_svg]:text-[var(--ui-button-menu-secondary-icon-color-hover)] active:bg-[var(--ui-button-menu-secondary-container-color-active)] active:text-[var(--ui-button-menu-secondary-label-color-active)] active:border-[var(--ui-button-menu-secondary-container-border-color-active)] active:[&_svg]:text-[var(--ui-button-menu-secondary-icon-color-active)] data-[open]:bg-[var(--ui-button-menu-secondary-container-color-active)] data-[open]:text-[var(--ui-button-menu-secondary-label-color-active)] data-[open]:border-[var(--ui-button-menu-secondary-container-border-color-active)] data-[open]:[&_svg]:text-[var(--ui-button-menu-secondary-icon-color-active)] disabled:bg-[var(--ui-button-menu-secondary-container-color-disabled)] disabled:text-[var(--ui-button-menu-secondary-label-color-disabled)] disabled:border-[var(--ui-button-menu-secondary-container-border-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-menu-secondary-icon-color-disabled)]',\n },\n },\n defaultVariants: {\n variant: 'primary',\n },\n }\n);\n\nexport interface ButtonMenuProps\n extends\n Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>,\n VariantProps<typeof buttonMenuVariants> {\n /\n Whether the associated menu is open. Flips the trailing chevron\n * (down → up), applies the open (`-active`) treatment, and reflects\n `aria-expanded`. Control this in sync with the menu you trigger.\n /\n open?: boolean;\n /* Label content rendered before the chevron. /\n children?: React.ReactNode;\n /\n Replace the rendered `<button>` with another element or component\n * (Base UI composition). Accepts a React element or a render function —\n * the component's props and class names are merged onto it.\n /\n render?: useRender.RenderProp;\n}\n\n/\n A button that opens a dropdown menu: a label followed by a chevron that\n * points up while `open`. Pair it with the menu/popover it controls and keep\n * the `open` prop in sync.\n /\nconst ButtonMenu = React.forwardRef<HTMLButtonElement, ButtonMenuProps>(\n ({ className, variant, open, render, children, ...props }, ref) => {\n const Chevron = open ? ChevronUpIcon : ChevronDownIcon;\n return useRender({\n render,\n ref,\n defaultTagName: 'button',\n props: mergeProps<'button'>(\n {\n className: cn(buttonMenuVariants({ variant, className })),\n 'aria-expanded': open,\n // `data-open` drives the open (`-active`) token switch via attribute\n // selectors; present only while open, and typed loosely because\n // React's button attribute map doesn't include arbitrary data-* keys\n // as literals.\n ...(open ? ({ 'data-open': '' } as Record<string, string>) : {}),\n children: (\n <>\n {children}\n <Chevron />\n </>\n ),\n },\n props\n ),\n });\n }\n);\nButtonMenu.displayName = 'ButtonMenu';\n\nexport { ButtonMenu, buttonMenuVariants };\n"],"names":["buttonMenuVariants","cva","ButtonMenu","React","className","variant","open","render","children","props","ref","Chevron","ChevronUpIcon","ChevronDownIcon","useRender","mergeProps","cn","jsxs","Fragment"],"mappings":";;;;;;;AA2BA,MAAMA,IAAqBC;AAAA,EACzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,WACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GA2BMC,IAAaC,EAAM;AAAA,EACvB,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,MAAAC,GAAM,QAAAC,GAAQ,UAAAC,GAAU,GAAGC,EAAA,GAASC,MAAQ;AACjE,UAAMC,IAAUL,IAAOM,IAAgBC;AACvC,WAAOC,EAAU;AAAA,MACf,QAAAP;AAAA,MACA,KAAAG;AAAA,MACA,gBAAgB;AAAA,MAChB,OAAOK;AAAA,QACL;AAAA,UACE,WAAWC,EAAGhB,EAAmB,EAAE,SAAAK,GAAS,WAAAD,EAAA,CAAW,CAAC;AAAA,UACxD,iBAAiBE;AAAA;AAAA;AAAA;AAAA;AAAA,UAKjB,GAAIA,IAAQ,EAAE,aAAa,GAAA,IAAkC,CAAA;AAAA,UAC7D,UACE,gBAAAW,EAAAC,GAAA,EACG,UAAA;AAAA,YAAAV;AAAA,8BACAG,GAAA,CAAA,CAAQ;AAAA,UAAA,EAAA,CACX;AAAA,QAAA;AAAA,QAGJF;AAAA,MAAA;AAAA,IACF,CACD;AAAA,EACH;AACF;AACAP,EAAW,cAAc;"}
1	+ {"version":3,"file":"button-menu.js","sources":["../../../../src/components/ui/button-menu/button-menu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport {\n ChevronDownIcon,\n ChevronUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"ButtonMenu\" component: a Button-like trigger (label +\n// trailing chevron) that opens a menu. `variant` maps to the Figma `variant`\n// property (Primary / Secondary); the Figma `active` state is the open state\n// — the chevron flips down→up and the container takes its `-active` colors. Each\n// interaction state wires the container fill, label, icon, and — for `secondary`\n// — the border to its own dedicated `--ui-button-menu-` token from\n// @acronis-platform/tokens-pd. Every state is referenced explicitly (runtime\n// `var()` lookups: a brand override is only honored if the matching state token is\n// referenced). `primary` keeps a single label/icon color across states; only\n// `secondary` diverges them per state. Geometry — 32px height, 8px gap, 12px\n// padding-x, 4px radius, 64px min-width, 16px icon — comes from the\n// `--ui-button-menu-global-` tokens. The open treatment is driven by the\n// `data-open` attribute (set from the `open` prop) and CSS `:active` for press\n// feedback; disabled uses the explicit disabled tokens (not opacity). Focus: the\n// Figma focus state is a 3px `--ui-focus-primary` ring flush to the button edge\n// (no offset) — `ring-[3px]`, no `ring-offset`.\nconst buttonMenuVariants = cva(\n 'inline-flex h-[var(--ui-button-menu-global-container-height)] min-w-[var(--ui-button-menu-global-container-width-min)] cursor-pointer items-center justify-center gap-[var(--ui-button-menu-global-container-gap)] whitespace-nowrap rounded-[var(--ui-button-menu-global-container-border-radius)] border border-transparent px-[var(--ui-button-menu-global-container-padding-x)] text-sm font-semibold leading-6 transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-[var(--ui-button-menu-global-icon-size)] [&_svg]:shrink-0',\n {\n variants: {\n variant: {\n primary:\n 'bg-[var(--ui-button-menu-primary-container-color-idle)] text-[var(--ui-button-menu-primary-label-color)] [&_svg]:text-[var(--ui-button-menu-primary-icon-color)] hover:bg-[var(--ui-button-menu-primary-container-color-hover)] active:bg-[var(--ui-button-menu-primary-container-color-active)] data-[open]:bg-[var(--ui-button-menu-primary-container-color-active)] disabled:bg-[var(--ui-button-menu-primary-container-color-disabled)]',\n secondary:\n 'bg-[var(--ui-button-menu-secondary-container-color-idle)] text-[var(--ui-button-menu-secondary-label-color-idle)] border-[var(--ui-button-menu-secondary-container-border-color-idle)] [&_svg]:text-[var(--ui-button-menu-secondary-icon-color-idle)] hover:bg-[var(--ui-button-menu-secondary-container-color-hover)] hover:text-[var(--ui-button-menu-secondary-label-color-hover)] hover:border-[var(--ui-button-menu-secondary-container-border-color-hover)] hover:[&_svg]:text-[var(--ui-button-menu-secondary-icon-color-hover)] active:bg-[var(--ui-button-menu-secondary-container-color-active)] active:text-[var(--ui-button-menu-secondary-label-color-active)] active:border-[var(--ui-button-menu-secondary-container-border-color-active)] active:[&_svg]:text-[var(--ui-button-menu-secondary-icon-color-active)] data-[open]:bg-[var(--ui-button-menu-secondary-container-color-active)] data-[open]:text-[var(--ui-button-menu-secondary-label-color-active)] data-[open]:border-[var(--ui-button-menu-secondary-container-border-color-active)] data-[open]:[&_svg]:text-[var(--ui-button-menu-secondary-icon-color-active)] disabled:bg-[var(--ui-button-menu-secondary-container-color-disabled)] disabled:text-[var(--ui-button-menu-secondary-label-color-disabled)] disabled:border-[var(--ui-button-menu-secondary-container-border-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-menu-secondary-icon-color-disabled)]',\n },\n },\n defaultVariants: {\n variant: 'primary',\n },\n }\n);\n\nexport interface ButtonMenuProps\n extends\n Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>,\n VariantProps<typeof buttonMenuVariants> {\n /\n Whether the associated menu is open. Flips the trailing chevron\n * (down → up), applies the open (`-active`) treatment, and reflects\n `aria-expanded`. Control this in sync with the menu you trigger.\n /\n open?: boolean;\n /* Label content rendered before the chevron. /\n children?: React.ReactNode;\n /\n Replace the rendered `<button>` with another element or component\n * (Base UI composition). Accepts a React element or a render function —\n * the component's props and class names are merged onto it.\n /\n render?: useRender.RenderProp;\n}\n\n/\n A button that opens a dropdown menu: a label followed by a chevron that\n * points up while `open`. Pair it with the menu/popover it controls and keep\n * the `open` prop in sync.\n /\nconst ButtonMenu = React.forwardRef<HTMLButtonElement, ButtonMenuProps>(\n ({ className, variant, open, render, children, ...props }, ref) => {\n const Chevron = open ? ChevronUpIcon : ChevronDownIcon;\n return useRender({\n render,\n ref,\n defaultTagName: 'button',\n props: mergeProps<'button'>(\n {\n className: cn(buttonMenuVariants({ variant, className })),\n 'aria-expanded': open,\n // `data-open` drives the open (`-active`) token switch via attribute\n // selectors; present only while open, and typed loosely because\n // React's button attribute map doesn't include arbitrary data-* keys\n // as literals.\n ...(open ? ({ 'data-open': '' } as Record<string, string>) : {}),\n children: (\n <>\n {children}\n <Chevron />\n </>\n ),\n },\n props\n ),\n });\n }\n);\nButtonMenu.displayName = 'ButtonMenu';\n\nexport { ButtonMenu, buttonMenuVariants };\n"],"names":["buttonMenuVariants","cva","ButtonMenu","React","className","variant","open","render","children","props","ref","Chevron","ChevronUpIcon","ChevronDownIcon","useRender","mergeProps","cn","jsxs","Fragment"],"mappings":";;;;;;;AA2BA,MAAMA,IAAqBC;AAAA,EACzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,WACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GA2BMC,IAAaC,EAAM;AAAA,EACvB,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,MAAAC,GAAM,QAAAC,GAAQ,UAAAC,GAAU,GAAGC,EAAA,GAASC,MAAQ;AACjE,UAAMC,IAAUL,IAAOM,IAAgBC;AACvC,WAAOC,EAAU;AAAA,MACf,QAAAP;AAAA,MACA,KAAAG;AAAA,MACA,gBAAgB;AAAA,MAChB,OAAOK;AAAA,QACL;AAAA,UACE,WAAWC,EAAGhB,EAAmB,EAAE,SAAAK,GAAS,WAAAD,EAAA,CAAW,CAAC;AAAA,UACxD,iBAAiBE;AAAA;AAAA;AAAA;AAAA;AAAA,UAKjB,GAAIA,IAAQ,EAAE,aAAa,GAAA,IAAkC,CAAA;AAAA,UAC7D,UACE,gBAAAW,EAAAC,GAAA,EACG,UAAA;AAAA,YAAAV;AAAA,8BACAG,GAAA,CAAA,CAAQ;AAAA,UAAA,EAAA,CACX;AAAA,QAAA;AAAA,QAGJF;AAAA,MAAA;AAAA,IACF,CACD;AAAA,EACH;AACF;AACAP,EAAW,cAAc;"}

package/dist/components/ui/calendar/calendar.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as a } from "react/jsx-runtime";
 import * as c from "react";
 import { ChevronLeftIcon as p, ChevronRightIcon as m, ChevronDownIcon as f } from "@acronis-platform/icons-react/stroke-mono";
 import { cn as r } from "../../../lib/utils.js";
@@ -94,7 +94,7 @@ function x(n, e) {
   };
 }
 const h = {
-  Root: ({ className: n, rootRef: e, ...t }) => /* @__PURE__ */ o(
+  Root: ({ className: n, rootRef: e, ...t }) => /* @__PURE__ */ a(
     "div",
     {
       "data-slot": "calendar",
@@ -103,29 +103,31 @@ const h = {
       ...t
     }
   ),
-  Chevron: ({ className: n, orientation: e, ...t }) => e === "left" ? /* @__PURE__ */ o(
+  // Drop react-day-picker's numeric `size` — these chevrons render at the
+  // fixed design size (16); icons-react's `size` is the 16|24 design axis.
+  Chevron: ({ className: n, orientation: e, size: t, ...o }) => e === "left" ? /* @__PURE__ */ a(
     p,
     {
       size: 16,
       className: r("rtl:rotate-180", n),
-      ...t
+      ...o
     }
-  ) : e === "right" ? /* @__PURE__ */ o(
+  ) : e === "right" ? /* @__PURE__ */ a(
     m,
     {
       size: 16,
       className: r("rtl:rotate-180", n),
-      ...t
+      ...o
     }
-  ) : /* @__PURE__ */ o(f, { size: 16, className: r(n), ...t }),
+  ) : /* @__PURE__ */ a(f, { size: 16, className: r(n), ...o }),
   DayButton: y,
-  WeekNumber: ({ children: n, ...e }) => /* @__PURE__ */ o("td", { ...e, children: /* @__PURE__ */ o("div", { className: "flex size-[var(--cell-size)] items-center justify-center text-center", children: n }) })
+  WeekNumber: ({ children: n, ...e }) => /* @__PURE__ */ a("td", { ...e, children: /* @__PURE__ */ a("div", { className: "flex size-[var(--cell-size)] items-center justify-center text-center", children: n }) })
 };
 function D({
   className: n,
   classNames: e,
   showOutsideDays: t = !0,
-  captionLayout: a = "label",
+  captionLayout: o = "label",
   // Default the grid to a Monday week start (0=Sun..6=Sat); consumers can still
   // override per instance.
   weekStartsOn: u = 1,
@@ -134,7 +136,7 @@ function D({
   ...s
 }) {
   const g = l();
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ a(
     v,
     {
       showOutsideDays: t,
@@ -143,13 +145,13 @@ function D({
         "group/calendar bg-background p-3 [--cell-size:2rem] [[data-slot=popover-content]_&]:bg-transparent",
         n
       ),
-      captionLayout: a,
+      captionLayout: o,
       formatters: {
         formatMonthDropdown: (b) => b.toLocaleString("default", { month: "short" }),
         ...d
       },
       classNames: {
-        ...x(a, g),
+        ...x(o, g),
         ...e
       },
       components: {
@@ -164,13 +166,13 @@ function y({
   className: n,
   day: e,
   modifiers: t,
-  ...a
+  ...o
 }) {
   const u = l(), d = c.useRef(null);
   return c.useEffect(() => {
     var i;
     t.focused && ((i = d.current) == null || i.focus());
-  }, [t.focused]), /* @__PURE__ */ o(
+  }, [t.focused]), /* @__PURE__ */ a(
     "button",
     {
       ref: d,
@@ -193,7 +195,7 @@ function y({
         u.day,
         n
       ),
-      ...a
+      ...o
     }
   );
 }

package/dist/components/ui/calendar/calendar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"calendar.js","sources":["../../../../src/components/ui/calendar/calendar.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\nimport {\n DayButton,\n DayPicker,\n getDefaultClassNames,\n type ClassNames,\n type CustomComponents,\n} from 'react-day-picker';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `calendar`\n// (packages/ui-legacy/src/components/ui/calendar.tsx). A pure day-grid built on\n// `react-day-picker`'s `DayPicker` — single / range / multiple selection and one\n// or more months side by side (`numberOfMonths`), with the prev/next chevrons at\n// the outer edges of the month row. No `--ui-calendar-` token tier exists yet, so\n// this design-pending v1 themes off the shared semantic vocabulary:\n// • surface / text -> bg-background / text-foreground\n// • selected day + range endpoints -> --ui-background-brand-primary + --ui-glyph-on-brand-primary\n// • range-middle highlight -> --ui-background-surface-hover (`bg-accent`)\n// • hover -> bg-accent / text-accent-foreground\n// • today -> font-weight + underline (no color dependency)\n// • outside-month / muted -> text-muted-foreground (--ui-text-on-surface-secondary)\n// • disabled days -> --ui-text-on-surface-disabled\n// • focus ring -> --ui-focus-primary\n// Reconcile (and a possible `--ui-calendar-` tier) with\n// `/figma-component Calendar <url> --update` once mockups land.\n//\n// Why plain `<button>` for day cells AND nav chevrons (not `Button` / `ButtonIcon`):\n// • Day cells are a dense text grid, not icon buttons. `Button` is a fixed\n// 32px-tall pill with a 64px min-width, per-variant px, and (for `ghost`) a\n// hover underline — none of which suit a square, borderless day cell. There\n// is no `size`/`square` key on `buttonVariants` to opt out of that geometry,\n// and adding one purely for the calendar would contort Button's API for a\n// one-off. `ButtonIcon` is icon-only and force-sizes its glyph to 24px\n// (`--ui-button-icon-global-icon-size`), so it cannot host day-number text.\n// • Nav chevrons look closest to `ButtonIcon` (ghost, 32px square) but adopting\n// it here is a net contortion: (1) `react-day-picker`'s Nav marks the edge\n// buttons with `aria-disabled`, while `ButtonIcon`'s disabled treatment +\n// `pointer-events-none` key off the `disabled` attribute — the disabled state\n// would never paint; (2) `ButtonIcon` force-sizes the glyph to 24px, but the\n// nav chevrons are 16px. Both would require overriding ButtonIcon internals,\n// so plain `<button>` with `aria-disabled:` variants is the honest fit until a\n// tokened `--ui-calendar-*` tier defines these controls.\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>;\n\n// The full `classNames` map, static aside from the one `captionLayout`-dependent\n// branch (the boxed vs. dropdown caption treatment) and the per-key merge with\n// `react-day-picker`'s own `getDefaultClassNames()`. Built once per render and\n// merged with any caller `classNames` override at the call site.\nfunction buildCalendarClassNames(\n captionLayout: CalendarProps['captionLayout'],\n defaultClassNames: ClassNames\n): Partial<ClassNames> {\n return {\n root: cn('w-fit', defaultClassNames.root),\n months: cn(\n 'relative flex flex-col gap-4 md:flex-row',\n defaultClassNames.months\n ),\n month: cn('flex w-full flex-col gap-4', defaultClassNames.month),\n nav: cn(\n 'absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1',\n defaultClassNames.nav\n ),\n button_previous: cn(\n 'inline-flex size-[var(--cell-size)] cursor-pointer select-none items-center justify-center rounded-md p-0 text-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] aria-disabled:pointer-events-none aria-disabled:text-[var(--ui-text-on-surface-disabled)]',\n defaultClassNames.button_previous\n ),\n button_next: cn(\n 'inline-flex size-[var(--cell-size)] cursor-pointer select-none items-center justify-center rounded-md p-0 text-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] aria-disabled:pointer-events-none aria-disabled:text-[var(--ui-text-on-surface-disabled)]',\n defaultClassNames.button_next\n ),\n month_caption: cn(\n 'flex h-[var(--cell-size)] w-full items-center justify-center px-[var(--cell-size)]',\n defaultClassNames.month_caption\n ),\n dropdowns: cn(\n 'flex h-[var(--cell-size)] w-full items-center justify-center gap-1.5 text-sm font-medium',\n defaultClassNames.dropdowns\n ),\n dropdown_root: cn(\n 'relative rounded-md border border-border has-focus:border-[var(--ui-border-on-surface-border-active)] has-focus:ring-[3px] has-focus:ring-[var(--ui-focus-primary)]',\n defaultClassNames.dropdown_root\n ),\n dropdown: cn(\n // The invisible native <select> overlays the whole `dropdown_root`\n // box, so its cursor drives the caption box's hover cursor — pointer,\n // to read as the interactive dropdown trigger it is (vs the plain,\n // non-clickable `caption_label` box in `captionLayout=\"label\"`).\n 'absolute inset-0 cursor-pointer bg-background opacity-0',\n defaultClassNames.dropdown\n ),\n caption_label: cn(\n 'select-none font-medium',\n captionLayout === 'label'\n ? // Boxed caption (`[ July 2026 ]`) — reuses `dropdown_root`'s\n // border/rounded box treatment so the label and dropdown layouts\n // read as the same control.\n 'rounded-md border border-border px-3 py-1 text-sm'\n : 'flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground',\n defaultClassNames.caption_label\n ),\n month_grid: cn('w-full border-collapse', defaultClassNames.month_grid),\n weekdays: cn('flex', defaultClassNames.weekdays),\n weekday: cn(\n 'flex-1 select-none rounded-md text-[0.8rem] font-normal text-muted-foreground',\n defaultClassNames.weekday\n ),\n week: cn('mt-2 flex w-full', defaultClassNames.week),\n week_number_header: cn(\n 'w-[var(--cell-size)] select-none',\n defaultClassNames.week_number_header\n ),\n week_number: cn(\n 'select-none text-[0.8rem] text-muted-foreground',\n defaultClassNames.week_number\n ),\n day: cn(\n // Logical (`-s-`/`-e-`) corner rounding so the range band's outer\n // corners flip sides under RTL along with the CSS-reversed grid.\n 'group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-s-md [&:last-child[data-selected=true]_button]:rounded-e-md',\n defaultClassNames.day\n ),\n range_start: cn('rounded-s-md', defaultClassNames.range_start),\n range_middle: cn('rounded-none bg-accent', defaultClassNames.range_middle),\n range_end: cn('rounded-e-md', defaultClassNames.range_end),\n today: cn(\n 'rounded-md font-semibold underline data-[selected=true]:rounded-none data-[selected=true]:no-underline',\n defaultClassNames.today\n ),\n outside: cn(\n 'text-muted-foreground aria-selected:text-muted-foreground',\n defaultClassNames.outside\n ),\n disabled: cn(\n 'text-[var(--ui-text-on-surface-disabled)]',\n defaultClassNames.disabled\n ),\n hidden: cn('invisible', defaultClassNames.hidden),\n };\n}\n\n// The component-override map. Fully static (no prop/state dependency), so it lives\n// at module scope and is merged with any caller `components` override at the call\n// site. `Chevron`'s RTL flip keys off the `rtl:` variant, so it needs no props.\nconst calendarComponents: Partial<CustomComponents> = {\n Root: ({ className, rootRef, ...props }) => (\n <div\n data-slot=\"calendar\"\n ref={rootRef}\n className={cn(className)}\n {...props}\n />\n ),\n Chevron: ({ className, orientation, ...props }) => {\n // Mirror the horizontal nav chevrons under RTL — `react-day-picker`\n // hardcodes orientation \"left\"/\"right\" for previous/next regardless of\n // direction, so we flip them ourselves. Applied on the icon we own via\n // the `rtl:` variant ([dir=rtl] ancestor), so it's robust to rdp's\n // internal class names. The vertical (dropdown) chevron never flips.\n if (orientation === 'left') {\n return (\n <ChevronLeftIcon\n size={16}\n className={cn('rtl:rotate-180', className)}\n {...props}\n />\n );\n }\n if (orientation === 'right') {\n return (\n <ChevronRightIcon\n size={16}\n className={cn('rtl:rotate-180', className)}\n {...props}\n />\n );\n }\n return <ChevronDownIcon size={16} className={cn(className)} {...props} />;\n },\n DayButton: CalendarDayButton,\n WeekNumber: ({ children, ...props }) => (\n <td {...props}>\n <div className=\"flex size-[var(--cell-size)] items-center justify-center text-center\">\n {children}\n </div>\n </td>\n ),\n};\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n captionLayout = 'label',\n // Default the grid to a Monday week start (0=Sun..6=Sat); consumers can still\n // override per instance.\n weekStartsOn = 1,\n formatters,\n components,\n ...props\n}: CalendarProps) {\n const defaultClassNames = getDefaultClassNames();\n\n return (\n <DayPicker\n showOutsideDays={showOutsideDays}\n weekStartsOn={weekStartsOn}\n className={cn(\n 'group/calendar bg-background p-3 [--cell-size:2rem] [[data-slot=popover-content]_&]:bg-transparent',\n className\n )}\n captionLayout={captionLayout}\n formatters={{\n formatMonthDropdown: (date) =>\n date.toLocaleString('default', { month: 'short' }),\n ...formatters,\n }}\n classNames={{\n ...buildCalendarClassNames(captionLayout, defaultClassNames),\n ...classNames,\n }}\n components={{\n ...calendarComponents,\n ...components,\n }}\n {...props}\n />\n );\n}\n\nfunction CalendarDayButton({\n className,\n day,\n modifiers,\n ...props\n}: React.ComponentProps<typeof DayButton>) {\n const defaultClassNames = getDefaultClassNames();\n\n const ref = React.useRef<HTMLButtonElement>(null);\n React.useEffect(() => {\n if (modifiers.focused) ref.current?.focus();\n }, [modifiers.focused]);\n\n return (\n <button\n ref={ref}\n type=\"button\"\n data-day={day.date.toLocaleDateString()}\n data-selected-single={\n modifiers.selected &&\n !modifiers.range_start &&\n !modifiers.range_end &&\n !modifiers.range_middle\n }\n data-range-start={modifiers.range_start}\n data-range-end={modifiers.range_end}\n data-range-middle={modifiers.range_middle}\n className={cn(\n 'flex aspect-square size-[var(--cell-size)] w-full min-w-[var(--cell-size)] cursor-pointer flex-col items-center justify-center gap-1 rounded-md p-0 font-normal leading-none text-foreground outline-none transition-colors',\n 'hover:bg-accent hover:text-accent-foreground',\n 'data-[selected-single=true]:bg-[var(--ui-background-brand-primary)] data-[selected-single=true]:text-[var(--ui-glyph-on-brand-primary)] data-[selected-single=true]:hover:bg-[var(--ui-background-brand-primary-hover)]',\n 'data-[range-start=true]:rounded-md data-[range-start=true]:bg-[var(--ui-background-brand-primary)] data-[range-start=true]:text-[var(--ui-glyph-on-brand-primary)] data-[range-start=true]:hover:bg-[var(--ui-background-brand-primary-hover)]',\n 'data-[range-end=true]:rounded-md data-[range-end=true]:bg-[var(--ui-background-brand-primary)] data-[range-end=true]:text-[var(--ui-glyph-on-brand-primary)] data-[range-end=true]:hover:bg-[var(--ui-background-brand-primary-hover)]',\n 'data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground',\n 'group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-[var(--ui-focus-primary)]',\n 'disabled:pointer-events-none disabled:text-[var(--ui-text-on-surface-disabled)]',\n '[&>span]:text-xs [&>span]:opacity-70',\n defaultClassNames.day,\n className\n )}\n {...props}\n />\n );\n}\n\nexport { Calendar, CalendarDayButton };\n"],"names":["buildCalendarClassNames","captionLayout","defaultClassNames","cn","calendarComponents","className","rootRef","props","jsx","orientation","ChevronLeftIcon","ChevronRightIcon","ChevronDownIcon","CalendarDayButton","children","Calendar","classNames","showOutsideDays","weekStartsOn","formatters","components","getDefaultClassNames","DayPicker","date","day","modifiers","ref","React","_a"],"mappings":"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"}
1	+ {"version":3,"file":"calendar.js","sources":["../../../../src/components/ui/calendar/calendar.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\nimport {\n DayButton,\n DayPicker,\n getDefaultClassNames,\n type ClassNames,\n type CustomComponents,\n} from 'react-day-picker';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `calendar`\n// (packages/ui-legacy/src/components/ui/calendar.tsx). A pure day-grid built on\n// `react-day-picker`'s `DayPicker` — single / range / multiple selection and one\n// or more months side by side (`numberOfMonths`), with the prev/next chevrons at\n// the outer edges of the month row. No `--ui-calendar-` token tier exists yet, so\n// this design-pending v1 themes off the shared semantic vocabulary:\n// • surface / text -> bg-background / text-foreground\n// • selected day + range endpoints -> --ui-background-brand-primary + --ui-glyph-on-brand-primary\n// • range-middle highlight -> --ui-background-surface-hover (`bg-accent`)\n// • hover -> bg-accent / text-accent-foreground\n// • today -> font-weight + underline (no color dependency)\n// • outside-month / muted -> text-muted-foreground (--ui-text-on-surface-secondary)\n// • disabled days -> --ui-text-on-surface-disabled\n// • focus ring -> --ui-focus-primary\n// Reconcile (and a possible `--ui-calendar-` tier) with\n// `/figma-component Calendar <url> --update` once mockups land.\n//\n// Why plain `<button>` for day cells AND nav chevrons (not `Button` / `ButtonIcon`):\n// • Day cells are a dense text grid, not icon buttons. `Button` is a fixed\n// 32px-tall pill with a 64px min-width, per-variant px, and (for `ghost`) a\n// hover underline — none of which suit a square, borderless day cell. There\n// is no `size`/`square` key on `buttonVariants` to opt out of that geometry,\n// and adding one purely for the calendar would contort Button's API for a\n// one-off. `ButtonIcon` is icon-only and force-sizes its glyph to 24px\n// (`--ui-button-icon-global-icon-size`), so it cannot host day-number text.\n// • Nav chevrons look closest to `ButtonIcon` (ghost, 32px square) but adopting\n// it here is a net contortion: (1) `react-day-picker`'s Nav marks the edge\n// buttons with `aria-disabled`, while `ButtonIcon`'s disabled treatment +\n// `pointer-events-none` key off the `disabled` attribute — the disabled state\n// would never paint; (2) `ButtonIcon` force-sizes the glyph to 24px, but the\n// nav chevrons are 16px. Both would require overriding ButtonIcon internals,\n// so plain `<button>` with `aria-disabled:` variants is the honest fit until a\n// tokened `--ui-calendar-*` tier defines these controls.\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>;\n\n// The full `classNames` map, static aside from the one `captionLayout`-dependent\n// branch (the boxed vs. dropdown caption treatment) and the per-key merge with\n// `react-day-picker`'s own `getDefaultClassNames()`. Built once per render and\n// merged with any caller `classNames` override at the call site.\nfunction buildCalendarClassNames(\n captionLayout: CalendarProps['captionLayout'],\n defaultClassNames: ClassNames\n): Partial<ClassNames> {\n return {\n root: cn('w-fit', defaultClassNames.root),\n months: cn(\n 'relative flex flex-col gap-4 md:flex-row',\n defaultClassNames.months\n ),\n month: cn('flex w-full flex-col gap-4', defaultClassNames.month),\n nav: cn(\n 'absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1',\n defaultClassNames.nav\n ),\n button_previous: cn(\n 'inline-flex size-[var(--cell-size)] cursor-pointer select-none items-center justify-center rounded-md p-0 text-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] aria-disabled:pointer-events-none aria-disabled:text-[var(--ui-text-on-surface-disabled)]',\n defaultClassNames.button_previous\n ),\n button_next: cn(\n 'inline-flex size-[var(--cell-size)] cursor-pointer select-none items-center justify-center rounded-md p-0 text-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] aria-disabled:pointer-events-none aria-disabled:text-[var(--ui-text-on-surface-disabled)]',\n defaultClassNames.button_next\n ),\n month_caption: cn(\n 'flex h-[var(--cell-size)] w-full items-center justify-center px-[var(--cell-size)]',\n defaultClassNames.month_caption\n ),\n dropdowns: cn(\n 'flex h-[var(--cell-size)] w-full items-center justify-center gap-1.5 text-sm font-medium',\n defaultClassNames.dropdowns\n ),\n dropdown_root: cn(\n 'relative rounded-md border border-border has-focus:border-[var(--ui-border-on-surface-border-active)] has-focus:ring-[3px] has-focus:ring-[var(--ui-focus-primary)]',\n defaultClassNames.dropdown_root\n ),\n dropdown: cn(\n // The invisible native <select> overlays the whole `dropdown_root`\n // box, so its cursor drives the caption box's hover cursor — pointer,\n // to read as the interactive dropdown trigger it is (vs the plain,\n // non-clickable `caption_label` box in `captionLayout=\"label\"`).\n 'absolute inset-0 cursor-pointer bg-background opacity-0',\n defaultClassNames.dropdown\n ),\n caption_label: cn(\n 'select-none font-medium',\n captionLayout === 'label'\n ? // Boxed caption (`[ July 2026 ]`) — reuses `dropdown_root`'s\n // border/rounded box treatment so the label and dropdown layouts\n // read as the same control.\n 'rounded-md border border-border px-3 py-1 text-sm'\n : 'flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground',\n defaultClassNames.caption_label\n ),\n month_grid: cn('w-full border-collapse', defaultClassNames.month_grid),\n weekdays: cn('flex', defaultClassNames.weekdays),\n weekday: cn(\n 'flex-1 select-none rounded-md text-[0.8rem] font-normal text-muted-foreground',\n defaultClassNames.weekday\n ),\n week: cn('mt-2 flex w-full', defaultClassNames.week),\n week_number_header: cn(\n 'w-[var(--cell-size)] select-none',\n defaultClassNames.week_number_header\n ),\n week_number: cn(\n 'select-none text-[0.8rem] text-muted-foreground',\n defaultClassNames.week_number\n ),\n day: cn(\n // Logical (`-s-`/`-e-`) corner rounding so the range band's outer\n // corners flip sides under RTL along with the CSS-reversed grid.\n 'group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-s-md [&:last-child[data-selected=true]_button]:rounded-e-md',\n defaultClassNames.day\n ),\n range_start: cn('rounded-s-md', defaultClassNames.range_start),\n range_middle: cn('rounded-none bg-accent', defaultClassNames.range_middle),\n range_end: cn('rounded-e-md', defaultClassNames.range_end),\n today: cn(\n 'rounded-md font-semibold underline data-[selected=true]:rounded-none data-[selected=true]:no-underline',\n defaultClassNames.today\n ),\n outside: cn(\n 'text-muted-foreground aria-selected:text-muted-foreground',\n defaultClassNames.outside\n ),\n disabled: cn(\n 'text-[var(--ui-text-on-surface-disabled)]',\n defaultClassNames.disabled\n ),\n hidden: cn('invisible', defaultClassNames.hidden),\n };\n}\n\n// The component-override map. Fully static (no prop/state dependency), so it lives\n// at module scope and is merged with any caller `components` override at the call\n// site. `Chevron`'s RTL flip keys off the `rtl:` variant, so it needs no props.\nconst calendarComponents: Partial<CustomComponents> = {\n Root: ({ className, rootRef, ...props }) => (\n <div\n data-slot=\"calendar\"\n ref={rootRef}\n className={cn(className)}\n {...props}\n />\n ),\n // Drop react-day-picker's numeric `size` — these chevrons render at the\n // fixed design size (16); icons-react's `size` is the 16\|24 design axis.\n Chevron: ({ className, orientation, size: _size, ...props }) => {\n // Mirror the horizontal nav chevrons under RTL — `react-day-picker`\n // hardcodes orientation \"left\"/\"right\" for previous/next regardless of\n // direction, so we flip them ourselves. Applied on the icon we own via\n // the `rtl:` variant ([dir=rtl] ancestor), so it's robust to rdp's\n // internal class names. The vertical (dropdown) chevron never flips.\n if (orientation === 'left') {\n return (\n <ChevronLeftIcon\n size={16}\n className={cn('rtl:rotate-180', className)}\n {...props}\n />\n );\n }\n if (orientation === 'right') {\n return (\n <ChevronRightIcon\n size={16}\n className={cn('rtl:rotate-180', className)}\n {...props}\n />\n );\n }\n return <ChevronDownIcon size={16} className={cn(className)} {...props} />;\n },\n DayButton: CalendarDayButton,\n WeekNumber: ({ children, ...props }) => (\n <td {...props}>\n <div className=\"flex size-[var(--cell-size)] items-center justify-center text-center\">\n {children}\n </div>\n </td>\n ),\n};\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n captionLayout = 'label',\n // Default the grid to a Monday week start (0=Sun..6=Sat); consumers can still\n // override per instance.\n weekStartsOn = 1,\n formatters,\n components,\n ...props\n}: CalendarProps) {\n const defaultClassNames = getDefaultClassNames();\n\n return (\n <DayPicker\n showOutsideDays={showOutsideDays}\n weekStartsOn={weekStartsOn}\n className={cn(\n 'group/calendar bg-background p-3 [--cell-size:2rem] [[data-slot=popover-content]_&]:bg-transparent',\n className\n )}\n captionLayout={captionLayout}\n formatters={{\n formatMonthDropdown: (date) =>\n date.toLocaleString('default', { month: 'short' }),\n ...formatters,\n }}\n classNames={{\n ...buildCalendarClassNames(captionLayout, defaultClassNames),\n ...classNames,\n }}\n components={{\n ...calendarComponents,\n ...components,\n }}\n {...props}\n />\n );\n}\n\nfunction CalendarDayButton({\n className,\n day,\n modifiers,\n ...props\n}: React.ComponentProps<typeof DayButton>) {\n const defaultClassNames = getDefaultClassNames();\n\n const ref = React.useRef<HTMLButtonElement>(null);\n React.useEffect(() => {\n if (modifiers.focused) ref.current?.focus();\n }, [modifiers.focused]);\n\n return (\n <button\n ref={ref}\n type=\"button\"\n data-day={day.date.toLocaleDateString()}\n data-selected-single={\n modifiers.selected &&\n !modifiers.range_start &&\n !modifiers.range_end &&\n !modifiers.range_middle\n }\n data-range-start={modifiers.range_start}\n data-range-end={modifiers.range_end}\n data-range-middle={modifiers.range_middle}\n className={cn(\n 'flex aspect-square size-[var(--cell-size)] w-full min-w-[var(--cell-size)] cursor-pointer flex-col items-center justify-center gap-1 rounded-md p-0 font-normal leading-none text-foreground outline-none transition-colors',\n 'hover:bg-accent hover:text-accent-foreground',\n 'data-[selected-single=true]:bg-[var(--ui-background-brand-primary)] data-[selected-single=true]:text-[var(--ui-glyph-on-brand-primary)] data-[selected-single=true]:hover:bg-[var(--ui-background-brand-primary-hover)]',\n 'data-[range-start=true]:rounded-md data-[range-start=true]:bg-[var(--ui-background-brand-primary)] data-[range-start=true]:text-[var(--ui-glyph-on-brand-primary)] data-[range-start=true]:hover:bg-[var(--ui-background-brand-primary-hover)]',\n 'data-[range-end=true]:rounded-md data-[range-end=true]:bg-[var(--ui-background-brand-primary)] data-[range-end=true]:text-[var(--ui-glyph-on-brand-primary)] data-[range-end=true]:hover:bg-[var(--ui-background-brand-primary-hover)]',\n 'data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground',\n 'group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-[var(--ui-focus-primary)]',\n 'disabled:pointer-events-none disabled:text-[var(--ui-text-on-surface-disabled)]',\n '[&>span]:text-xs [&>span]:opacity-70',\n defaultClassNames.day,\n className\n )}\n {...props}\n />\n );\n}\n\nexport { Calendar, CalendarDayButton };\n"],"names":["buildCalendarClassNames","captionLayout","defaultClassNames","cn","calendarComponents","className","rootRef","props","jsx","orientation","_size","ChevronLeftIcon","ChevronRightIcon","ChevronDownIcon","CalendarDayButton","children","Calendar","classNames","showOutsideDays","weekStartsOn","formatters","components","getDefaultClassNames","DayPicker","date","day","modifiers","ref","React","_a"],"mappings":";;;;;;AAwDA,SAASA,EACPC,GACAC,GACqB;AACrB,SAAO;AAAA,IACL,MAAMC,EAAG,SAASD,EAAkB,IAAI;AAAA,IACxC,QAAQC;AAAA,MACN;AAAA,MACAD,EAAkB;AAAA,IAAA;AAAA,IAEpB,OAAOC,EAAG,8BAA8BD,EAAkB,KAAK;AAAA,IAC/D,KAAKC;AAAA,MACH;AAAA,MACAD,EAAkB;AAAA,IAAA;AAAA,IAEpB,iBAAiBC;AAAA,MACf;AAAA,MACAD,EAAkB;AAAA,IAAA;AAAA,IAEpB,aAAaC;AAAA,MACX;AAAA,MACAD,EAAkB;AAAA,IAAA;AAAA,IAEpB,eAAeC;AAAA,MACb;AAAA,MACAD,EAAkB;AAAA,IAAA;AAAA,IAEpB,WAAWC;AAAA,MACT;AAAA,MACAD,EAAkB;AAAA,IAAA;AAAA,IAEpB,eAAeC;AAAA,MACb;AAAA,MACAD,EAAkB;AAAA,IAAA;AAAA,IAEpB,UAAUC;AAAA;AAAA;AAAA;AAAA;AAAA,MAKR;AAAA,MACAD,EAAkB;AAAA,IAAA;AAAA,IAEpB,eAAeC;AAAA,MACb;AAAA,MACAF,MAAkB;AAAA;AAAA;AAAA;AAAA,QAId;AAAA,UACA;AAAA,MACJC,EAAkB;AAAA,IAAA;AAAA,IAEpB,YAAYC,EAAG,0BAA0BD,EAAkB,UAAU;AAAA,IACrE,UAAUC,EAAG,QAAQD,EAAkB,QAAQ;AAAA,IAC/C,SAASC;AAAA,MACP;AAAA,MACAD,EAAkB;AAAA,IAAA;AAAA,IAEpB,MAAMC,EAAG,oBAAoBD,EAAkB,IAAI;AAAA,IACnD,oBAAoBC;AAAA,MAClB;AAAA,MACAD,EAAkB;AAAA,IAAA;AAAA,IAEpB,aAAaC;AAAA,MACX;AAAA,MACAD,EAAkB;AAAA,IAAA;AAAA,IAEpB,KAAKC;AAAA;AAAA;AAAA,MAGH;AAAA,MACAD,EAAkB;AAAA,IAAA;AAAA,IAEpB,aAAaC,EAAG,gBAAgBD,EAAkB,WAAW;AAAA,IAC7D,cAAcC,EAAG,0BAA0BD,EAAkB,YAAY;AAAA,IACzE,WAAWC,EAAG,gBAAgBD,EAAkB,SAAS;AAAA,IACzD,OAAOC;AAAA,MACL;AAAA,MACAD,EAAkB;AAAA,IAAA;AAAA,IAEpB,SAASC;AAAA,MACP;AAAA,MACAD,EAAkB;AAAA,IAAA;AAAA,IAEpB,UAAUC;AAAA,MACR;AAAA,MACAD,EAAkB;AAAA,IAAA;AAAA,IAEpB,QAAQC,EAAG,aAAaD,EAAkB,MAAM;AAAA,EAAA;AAEpD;AAKA,MAAME,IAAgD;AAAA,EACpD,MAAM,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,GAAGC,QAC9B,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,KAAKF;AAAA,MACL,WAAWH,EAAGE,CAAS;AAAA,MACtB,GAAGE;AAAA,IAAA;AAAA,EAAA;AAAA;AAAA;AAAA,EAKR,SAAS,CAAC,EAAE,WAAAF,GAAW,aAAAI,GAAa,MAAMC,GAAO,GAAGH,QAM9CE,MAAgB,SAEhB,gBAAAD;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,MAAM;AAAA,MACN,WAAWR,EAAG,kBAAkBE,CAAS;AAAA,MACxC,GAAGE;AAAA,IAAA;AAAA,EAAA,IAINE,MAAgB,UAEhB,gBAAAD;AAAA,IAACI;AAAA,IAAA;AAAA,MACC,MAAM;AAAA,MACN,WAAWT,EAAG,kBAAkBE,CAAS;AAAA,MACxC,GAAGE;AAAA,IAAA;AAAA,EAAA,IAIH,gBAAAC,EAACK,KAAgB,MAAM,IAAI,WAAWV,EAAGE,CAAS,GAAI,GAAGE,GAAO;AAAA,EAEzE,WAAWO;AAAA,EACX,YAAY,CAAC,EAAE,UAAAC,GAAU,GAAGR,QAC1B,gBAAAC,EAAC,MAAA,EAAI,GAAGD,GACN,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,wEACZ,UAAAO,GACH,EAAA,CACF;AAEJ;AAEA,SAASC,EAAS;AAAA,EAChB,WAAAX;AAAA,EACA,YAAAY;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,eAAAjB,IAAgB;AAAA;AAAA;AAAA,EAGhB,cAAAkB,IAAe;AAAA,EACf,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,GAAGd;AACL,GAAkB;AAChB,QAAML,IAAoBoB,EAAA;AAE1B,SACE,gBAAAd;AAAA,IAACe;AAAA,IAAA;AAAA,MACC,iBAAAL;AAAA,MACA,cAAAC;AAAA,MACA,WAAWhB;AAAA,QACT;AAAA,QACAE;AAAA,MAAA;AAAA,MAEF,eAAAJ;AAAA,MACA,YAAY;AAAA,QACV,qBAAqB,CAACuB,MACpBA,EAAK,eAAe,WAAW,EAAE,OAAO,SAAS;AAAA,QACnD,GAAGJ;AAAA,MAAA;AAAA,MAEL,YAAY;AAAA,QACV,GAAGpB,EAAwBC,GAAeC,CAAiB;AAAA,QAC3D,GAAGe;AAAA,MAAA;AAAA,MAEL,YAAY;AAAA,QACV,GAAGb;AAAA,QACH,GAAGiB;AAAA,MAAA;AAAA,MAEJ,GAAGd;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASO,EAAkB;AAAA,EACzB,WAAAT;AAAA,EACA,KAAAoB;AAAA,EACA,WAAAC;AAAA,EACA,GAAGnB;AACL,GAA2C;AACzC,QAAML,IAAoBoB,EAAA,GAEpBK,IAAMC,EAAM,OAA0B,IAAI;AAChD,SAAAA,EAAM,UAAU,MAAM;;AACpB,IAAIF,EAAU,aAASG,IAAAF,EAAI,YAAJ,QAAAE,EAAa;AAAA,EACtC,GAAG,CAACH,EAAU,OAAO,CAAC,GAGpB,gBAAAlB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAmB;AAAA,MACA,MAAK;AAAA,MACL,YAAUF,EAAI,KAAK,mBAAA;AAAA,MACnB,wBACEC,EAAU,YACV,CAACA,EAAU,eACX,CAACA,EAAU,aACX,CAACA,EAAU;AAAA,MAEb,oBAAkBA,EAAU;AAAA,MAC5B,kBAAgBA,EAAU;AAAA,MAC1B,qBAAmBA,EAAU;AAAA,MAC7B,WAAWvB;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAD,EAAkB;AAAA,QAClBG;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV;"}

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

@@ -1,48 +1,61 @@
-import { jsxs as i, Fragment as v, jsx as l } from "react/jsx-runtime";
-import * as g from "react";
+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 p } from "@base-ui/react/use-render";
-import { cva as x } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { cn as o } from "../../../lib/utils.js";
-const h = x(
+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)]"
+        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"
     }
   }
-), y = {
+), 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)]"
-}, k = g.forwardRef(
-  ({ className: t, variant: r = "static", label: c, value: s, icon: d, render: n, ...b }, u) => {
-    const a = r === "static-empty", e = r === "clickable", f = a ? "–" : s;
-    return p({
-      render: n,
-      ref: u,
+}, 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: o(h({ variant: r }), t),
-          ...e ? { type: "button" } : {},
-          children: /* @__PURE__ */ i(v, { children: [
-            /* @__PURE__ */ l("span", { className: "text-xs font-normal leading-4 text-[var(--ui-card-filter-global-label-color)]", children: c }),
-            /* @__PURE__ */ i("span", { className: "flex items-center gap-[var(--ui-card-filter-global-content-gap)] [&_svg]:size-4 [&_svg]:shrink-0", children: [
-              !a && d,
-              /* @__PURE__ */ l(
+          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: o(
+                  className: c(
                     "text-2xl font-semibold leading-8",
-                    y[r ?? "static"]
+                    k[r ?? "static"]
                   ),
                   children: f
                 }
@@ -50,14 +63,14 @@ const h = x(
             ] })
           ] })
         },
-        b
+        u
       )
     });
   }
 );
-k.displayName = "CardFilter";
+N.displayName = "CardFilter";
 export {
-  k as CardFilter,
-  h as cardFilterVariants
+  N as CardFilter,
+  y as cardFilterVariants
 };
 //# sourceMappingURL=card-filter.js.map

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

	@@ -1 +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)]',\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 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 { className, variant = 'static', label, value, icon, render, ...props },\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 ? { type: 'button' as const } : {}),\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","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,~~GAyBMC~~,IAAaC,EAAM;AAAA,EACvB,CACE,~~EAAE~~,WAAAC,~~GAAW~~,SAAAC,IAAU,~~UAAU~~,OAAAC,~~GAAO~~,OAAAC,~~GAAO~~,MAAAC,~~GAAM~~,QAAAC,~~GAAQ~~,GAAGC,EAAA,~~GAChEC~~,MACG;AACH,UAAMC,~~IAAUP~~,MAAY,~~gBACtBQ~~,~~IAAcR~~,MAAY,~~aAC1BS~~,IAAeF,IAAU,~~MAAML~~;AAErC,~~WAAOQ~~,EAAU;AAAA,MACf,QAAAN;AAAA,MACA,KAAAE;AAAA,MACA,gBAAgBE,IAAc,WAAW;AAAA,MACzC,OAAOG;AAAA,QACL;AAAA,UACE,WAAWC,~~EAAGlB~~,EAAmB,EAAE,SAAAM,EAAA,CAAS,GAAGD,CAAS;AAAA,UACxD,~~GAAIS~~,IAAc,EAAE,~~MAAM~~,~~SAAA~~,~~IAAsB~~,CAAA;AAAA,~~UAChD~~,UACE,~~gBAAAK~~,EAAAC,GAAA,EACE,UAAA;AAAA,YAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,iFACb,~~UAAAd~~,GACH;AAAA,YACA,~~gBAAAY~~,EAAC,QAAA,EAAK,WAAU,oGACb,UAAA;AAAA,cAAA,CAACN,~~KAAWJ~~;AAAA,cACb,~~gBAAAY~~;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWH;AAAA,oBACT;AAAA,~~oBACAhB~~,EAAgBI,KAAW,QAAQ;AAAA,kBAAA;AAAA,kBAGpC,~~UAAAS~~;AAAA,gBAAA;AAAA,cAAA;AAAA,YACH,EAAA,CACF;AAAA,UAAA,EAAA,CACF;AAAA,QAAA;AAAA,QAGJJ;AAAA,MAAA;AAAA,IACF,CACD;AAAA,EACH;AACF;~~AACAR~~,EAAW,cAAc;"}
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;"}

package/dist/components/ui/carousel-dialog/carousel-dialog.js ADDED Viewed

@@ -0,0 +1,87 @@
+import { jsxs as k, jsx as i } from "react/jsx-runtime";
+import * as x from "react";
+import { cn as a } from "../../../lib/utils.js";
+import { Button as f } from "../button/button.js";
+const j = (e, r) => `Go to slide ${e + 1} of ${r}`, w = x.forwardRef(
+  ({
+    className: e,
+    variant: r = "first",
+    slideCount: t = 1,
+    selectedIndex: u = 0,
+    onSelectIndex: l,
+    onBack: m,
+    onNext: d,
+    onPrimaryAction: p,
+    backLabel: h = "Back",
+    nextLabel: v = "Next",
+    primaryLabel: b = "Call to action",
+    goToSlideLabel: g = j,
+    ...y
+  }, N) => {
+    const o = r === "first", c = r === "last";
+    return /* @__PURE__ */ k(
+      "div",
+      {
+        ref: N,
+        className: a(
+          "flex h-8 w-full items-center justify-between",
+          e
+        ),
+        ...y,
+        children: [
+          /* @__PURE__ */ i(
+            "div",
+            {
+              className: a(
+                "flex min-w-0 flex-1 flex-col items-start justify-center",
+                o && "h-8"
+              ),
+              children: !o && /* @__PURE__ */ i(f, { variant: "secondary", onClick: m, children: h })
+            }
+          ),
+          /* @__PURE__ */ i(
+            "div",
+            {
+              className: "flex shrink-0 items-center gap-[var(--ui-carousel-dialog-list-indicator-gap)]",
+              children: Array.from({ length: t }, (C, s) => {
+                const n = s === u;
+                return /* @__PURE__ */ i(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-current": n || void 0,
+                    "aria-label": g(s, t),
+                    onClick: () => l == null ? void 0 : l(s),
+                    className: "relative block size-4 shrink-0 cursor-pointer rounded-full outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]",
+                    children: /* @__PURE__ */ i(
+                      "span",
+                      {
+                        className: a(
+                          "absolute inset-[3.2px] rounded-full",
+                          n ? "bg-[var(--ui-glyph-on-surface-primary)]" : "bg-[var(--ui-glyph-on-surface-disabled)]"
+                        )
+                      }
+                    )
+                  },
+                  s
+                );
+              })
+            }
+          ),
+          /* @__PURE__ */ i(
+            "div",
+            {
+              className: "flex min-w-0 flex-1 flex-col items-end justify-center",
+              children: /* @__PURE__ */ i(f, { onClick: c ? p : d, children: c ? b : v })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+w.displayName = "CarouselDialog";
+export {
+  w as CarouselDialog
+};
+//# sourceMappingURL=carousel-dialog.js.map

package/dist/components/ui/carousel-dialog/carousel-dialog.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"carousel-dialog.js","sources":["../../../../src/components/ui/carousel-dialog/carousel-dialog.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nimport { Button } from '../button';\n\n// Ports Figma's \"CarouselDialog\" component (node 6353:5864's descendant,\n// isolated at 6353:4718 / 6353:4891 / 6353:4922 for the first/middle/last\n// variants): the row of controls inside a `DialogFooterCarousel` — a `Back`\n// button (`boxLeft`, hidden on the first slide), the dot `ListIndicator`, and\n// a `Next`/call-to-action button (`boxRight`). Pure controls — no Embla import\n// here; the slide count/index/callbacks are threaded down from\n// `DialogWelcome`, which owns the carousel engine.\n//\n// Internal only — not exported from the package's public entry point. Apps\n// building a welcome/onboarding carousel dialog should use `DialogWelcome`.\n\nexport type CarouselDialogVariant = 'first' | 'middle' | 'last';\n\nexport interface CarouselDialogProps\n extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n /** Which slide position this renders for. Defaults to `'first'`. */\n variant?: CarouselDialogVariant;\n /** Total number of slides, used to render the dot `ListIndicator`. Defaults to `1`. */\n slideCount?: number;\n /** The currently active slide index (0-based). Defaults to `0`. */\n selectedIndex?: number;\n /** Fires when a dot is activated, with the dot's slide index. */\n onSelectIndex?: (index: number) => void;\n /** Fires when `Back` (hidden on `variant=\"first\"`) is activated. */\n onBack?: () => void;\n /** Fires when `Next` (`variant=\"first\" | \"middle\"`) is activated. */\n onNext?: () => void;\n /** Fires when the call-to-action button (`variant=\"last\"`) is activated. */\n onPrimaryAction?: () => void;\n /** `Back` button label. Defaults to `'Back'`. */\n backLabel?: string;\n /** `Next` button label (`variant=\"first\" | \"middle\"`). Defaults to `'Next'`. */\n nextLabel?: string;\n /** Call-to-action button label (`variant=\"last\"`). Defaults to `'Call to action'`. */\n primaryLabel?: string;\n /** Builds each dot's accessible name from its 0-based index and the slide count. */\n goToSlideLabel?: (index: number, count: number) => string;\n}\n\nconst defaultGoToSlideLabel = (index: number, count: number) =>\n `Go to slide ${index + 1} of ${count}`;\n\nconst CarouselDialog = React.forwardRef<HTMLDivElement, CarouselDialogProps>(\n (\n {\n className,\n variant = 'first',\n slideCount = 1,\n selectedIndex = 0,\n onSelectIndex,\n onBack,\n onNext,\n onPrimaryAction,\n backLabel = 'Back',\n nextLabel = 'Next',\n primaryLabel = 'Call to action',\n goToSlideLabel = defaultGoToSlideLabel,\n ...props\n },\n ref\n ) => {\n const isFirst = variant === 'first';\n const isLast = variant === 'last';\n\n return (\n <div\n ref={ref}\n className={cn(\n 'flex h-8 w-full items-center justify-between',\n className\n )}\n {...props}\n >\n <div\n className={cn(\n 'flex min-w-0 flex-1 flex-col items-start justify-center',\n isFirst && 'h-8'\n )}\n >\n {!isFirst && (\n <Button variant=\"secondary\" onClick={onBack}>\n {backLabel}\n </Button>\n )}\n </div>\n\n <div\n className=\"flex shrink-0 items-center gap-[var(--ui-carousel-dialog-list-indicator-gap)]\"\n >\n {Array.from({ length: slideCount }, (_, index) => {\n const isActive = index === selectedIndex;\n return (\n <button\n key={index}\n type=\"button\"\n aria-current={isActive || undefined}\n aria-label={goToSlideLabel(index, slideCount)}\n onClick={() => onSelectIndex?.(index)}\n className=\"relative block size-4 shrink-0 cursor-pointer rounded-full outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]\"\n >\n <span\n className={cn(\n 'absolute inset-[3.2px] rounded-full',\n isActive\n ? 'bg-[var(--ui-glyph-on-surface-primary)]'\n : 'bg-[var(--ui-glyph-on-surface-disabled)]'\n )}\n />\n </button>\n );\n })}\n </div>\n\n <div\n className=\"flex min-w-0 flex-1 flex-col items-end justify-center\"\n >\n <Button onClick={isLast ? onPrimaryAction : onNext}>\n {isLast ? primaryLabel : nextLabel}\n </Button>\n </div>\n </div>\n );\n }\n);\nCarouselDialog.displayName = 'CarouselDialog';\n\nexport { CarouselDialog };\n"],"names":["defaultGoToSlideLabel","index","count","CarouselDialog","React","className","variant","slideCount","selectedIndex","onSelectIndex","onBack","onNext","onPrimaryAction","backLabel","nextLabel","primaryLabel","goToSlideLabel","props","ref","isFirst","isLast","jsxs","cn","jsx","Button","_","isActive"],"mappings":";;;;AA6CA,MAAMA,IAAwB,CAACC,GAAeC,MAC5C,eAAeD,IAAQ,CAAC,OAAOC,CAAK,IAEhCC,IAAiBC,EAAM;AAAA,EAC3B,CACE;AAAA,IACE,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,YAAAC,IAAa;AAAA,IACb,eAAAC,IAAgB;AAAA,IAChB,eAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,WAAAC,IAAY;AAAA,IACZ,cAAAC,IAAe;AAAA,IACf,gBAAAC,IAAiBhB;AAAA,IACjB,GAAGiB;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAUb,MAAY,SACtBc,IAASd,MAAY;AAE3B,WACE,gBAAAe;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAH;AAAA,QACA,WAAWI;AAAA,UACT;AAAA,UACAjB;AAAA,QAAA;AAAA,QAED,GAAGY;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAM;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD;AAAA,gBACT;AAAA,gBACAH,KAAW;AAAA,cAAA;AAAA,cAGZ,UAAA,CAACA,KACA,gBAAAI,EAACC,GAAA,EAAO,SAAQ,aAAY,SAASd,GAClC,UAAAG,EAAA,CACH;AAAA,YAAA;AAAA,UAAA;AAAA,UAIJ,gBAAAU;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cAET,UAAA,MAAM,KAAK,EAAE,QAAQhB,KAAc,CAACkB,GAAGxB,MAAU;AAChD,sBAAMyB,IAAWzB,MAAUO;AAC3B,uBACE,gBAAAe;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBAEC,MAAK;AAAA,oBACL,gBAAcG,KAAY;AAAA,oBAC1B,cAAYV,EAAef,GAAOM,CAAU;AAAA,oBAC5C,SAAS,MAAME,KAAA,gBAAAA,EAAgBR;AAAA,oBAC/B,WAAU;AAAA,oBAEV,UAAA,gBAAAsB;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,WAAWD;AAAA,0BACT;AAAA,0BACAI,IACI,4CACA;AAAA,wBAAA;AAAA,sBACN;AAAA,oBAAA;AAAA,kBACF;AAAA,kBAdKzB;AAAA,gBAAA;AAAA,cAiBX,CAAC;AAAA,YAAA;AAAA,UAAA;AAAA,UAGH,gBAAAsB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cAEV,UAAA,gBAAAA,EAACC,KAAO,SAASJ,IAASR,IAAkBD,GACzC,UAAAS,IAASL,IAAeD,EAAA,CAC3B;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AACAX,EAAe,cAAc;"}

package/dist/components/ui/category-bar/category-bar.js ADDED Viewed

@@ -0,0 +1,126 @@
+import { jsxs as r, jsx as l, Fragment as z } from "react/jsx-runtime";
+import * as b from "react";
+import { cva as I } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { cn as x } from "../../../lib/utils.js";
+import { ChartStyle as y } from "../chart/chart.js";
+import { Tooltip as B, TooltipTrigger as O, TooltipContent as S } from "../tooltip/tooltip.js";
+const q = (c) => c.toLocaleString(), F = I("flex w-full overflow-hidden rounded-full bg-input", {
+  variants: {
+    size: {
+      sm: "h-1.5",
+      md: "h-2.5",
+      lg: "h-4"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), R = b.forwardRef(
+  ({
+    className: c,
+    data: n,
+    config: o,
+    size: g,
+    showLegend: k = !1,
+    showTooltip: v = !0,
+    tooltipContent: d,
+    valueFormatter: i = q,
+    defaultOpenIndex: N,
+    "aria-label": w,
+    ...C
+  }, T) => {
+    const s = `chart-${b.useId().replace(/:/g, "")}`, f = n.reduce((e, a) => e + a.value, 0), u = (e) => {
+      var a;
+      return ((a = o[e]) == null ? void 0 : a.label) ?? e;
+    }, $ = (e) => {
+      var t;
+      const a = (t = o[e]) == null ? void 0 : t.label;
+      return typeof a == "string" || typeof a == "number" ? String(a) : e;
+    }, p = (e) => `var(--color-${e})`, m = (e) => f > 0 ? Math.round(e / f * 100) : 0, j = w ?? n.map((e) => `${$(e.key)} ${i(e.value)}`).join(", ");
+    return /* @__PURE__ */ r(
+      "div",
+      {
+        ref: T,
+        "data-chart": s,
+        className: x("flex w-full flex-col gap-3", c),
+        ...C,
+        children: [
+          /* @__PURE__ */ l(y, { id: s, config: o }),
+          /* @__PURE__ */ l("div", { className: F({ size: g }), role: "img", "aria-label": j, children: n.map((e, a) => {
+            const t = p(e.key), h = /* @__PURE__ */ l(
+              "div",
+              {
+                className: "h-full min-w-0",
+                style: { flex: `${e.value} 0 0%`, backgroundColor: t }
+              },
+              e.key
+            );
+            return v ? /* @__PURE__ */ r(B, { defaultOpen: a === N, children: [
+              /* @__PURE__ */ l(O, { render: h }),
+              /* @__PURE__ */ r(
+                S,
+                {
+                  "data-chart": s,
+                  className: x(
+                    "border border-border bg-background text-foreground shadow-md",
+                    !d && "flex items-center gap-2"
+                  ),
+                  children: [
+                    /* @__PURE__ */ l(y, { id: s, config: o }),
+                    d ? d({
+                      key: e.key,
+                      value: e.value,
+                      label: u(e.key),
+                      percent: m(e.value),
+                      color: t
+                    }) : /* @__PURE__ */ r(z, { children: [
+                      /* @__PURE__ */ l(
+                        "span",
+                        {
+                          className: "size-2.5 shrink-0 rounded-full",
+                          style: { backgroundColor: t }
+                        }
+                      ),
+                      /* @__PURE__ */ l("span", { className: "font-semibold", children: u(e.key) }),
+                      /* @__PURE__ */ r("span", { className: "text-muted-foreground tabular-nums", children: [
+                        i(e.value),
+                        " · ",
+                        m(e.value),
+                        "%"
+                      ] })
+                    ] })
+                  ]
+                }
+              )
+            ] }, e.key) : h;
+          }) }),
+          k && /* @__PURE__ */ l("ul", { className: "flex flex-wrap justify-between gap-x-6 gap-y-3", children: n.map((e) => /* @__PURE__ */ r("li", { className: "flex flex-col gap-1.5", children: [
+            /* @__PURE__ */ r("span", { className: "flex items-center gap-1.5 text-sm leading-none text-muted-foreground", children: [
+              /* @__PURE__ */ l(
+                "span",
+                {
+                  className: "size-2.5 shrink-0 rounded-full",
+                  style: { backgroundColor: p(e.key) }
+                }
+              ),
+              u(e.key)
+            ] }),
+            /* @__PURE__ */ r("span", { className: "flex items-baseline gap-1.5 leading-none tabular-nums", children: [
+              /* @__PURE__ */ l("span", { className: "text-base font-semibold text-foreground", children: i(e.value) }),
+              /* @__PURE__ */ r("span", { className: "text-sm text-muted-foreground", children: [
+                m(e.value),
+                "%"
+              ] })
+            ] })
+          ] }, e.key)) })
+        ]
+      }
+    );
+  }
+);
+R.displayName = "CategoryBar";
+export {
+  R as CategoryBar,
+  F as categoryBarVariants
+};
+//# sourceMappingURL=category-bar.js.map