@acronis-platform/ui-react 0.56.0 → 0.56.1

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

@@ -0,0 +1,204 @@
+import { jsx as o } 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";
+import { getDefaultClassNames as l } from "../../../node_modules/.pnpm/react-day-picker@10.0.1_@types_react@19.2.15_react@19.2.6/node_modules/react-day-picker/dist/esm/helpers/getDefaultClassNames.js";
+import { DayPicker as v } from "../../../node_modules/.pnpm/react-day-picker@10.0.1_@types_react@19.2.15_react@19.2.6/node_modules/react-day-picker/dist/esm/DayPicker.js";
+function x(n, e) {
+  return {
+    root: r("w-fit", e.root),
+    months: r(
+      "relative flex flex-col gap-4 md:flex-row",
+      e.months
+    ),
+    month: r("flex w-full flex-col gap-4", e.month),
+    nav: r(
+      "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+      e.nav
+    ),
+    button_previous: r(
+      "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)]",
+      e.button_previous
+    ),
+    button_next: r(
+      "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)]",
+      e.button_next
+    ),
+    month_caption: r(
+      "flex h-[var(--cell-size)] w-full items-center justify-center px-[var(--cell-size)]",
+      e.month_caption
+    ),
+    dropdowns: r(
+      "flex h-[var(--cell-size)] w-full items-center justify-center gap-1.5 text-sm font-medium",
+      e.dropdowns
+    ),
+    dropdown_root: r(
+      "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)]",
+      e.dropdown_root
+    ),
+    dropdown: r(
+      // The invisible native <select> overlays the whole `dropdown_root`
+      // box, so its cursor drives the caption box's hover cursor — pointer,
+      // to read as the interactive dropdown trigger it is (vs the plain,
+      // non-clickable `caption_label` box in `captionLayout="label"`).
+      "absolute inset-0 cursor-pointer bg-background opacity-0",
+      e.dropdown
+    ),
+    caption_label: r(
+      "select-none font-medium",
+      n === "label" ? (
+        // Boxed caption (`[ July 2026 ]`) — reuses `dropdown_root`'s
+        // border/rounded box treatment so the label and dropdown layouts
+        // read as the same control.
+        "rounded-md border border-border px-3 py-1 text-sm"
+      ) : "flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+      e.caption_label
+    ),
+    month_grid: r("w-full border-collapse", e.month_grid),
+    weekdays: r("flex", e.weekdays),
+    weekday: r(
+      "flex-1 select-none rounded-md text-[0.8rem] font-normal text-muted-foreground",
+      e.weekday
+    ),
+    week: r("mt-2 flex w-full", e.week),
+    week_number_header: r(
+      "w-[var(--cell-size)] select-none",
+      e.week_number_header
+    ),
+    week_number: r(
+      "select-none text-[0.8rem] text-muted-foreground",
+      e.week_number
+    ),
+    day: r(
+      // Logical (`-s-`/`-e-`) corner rounding so the range band's outer
+      // corners flip sides under RTL along with the CSS-reversed grid.
+      "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",
+      e.day
+    ),
+    range_start: r("rounded-s-md", e.range_start),
+    range_middle: r("rounded-none bg-accent", e.range_middle),
+    range_end: r("rounded-e-md", e.range_end),
+    today: r(
+      "rounded-md font-semibold underline data-[selected=true]:rounded-none data-[selected=true]:no-underline",
+      e.today
+    ),
+    outside: r(
+      "text-muted-foreground aria-selected:text-muted-foreground",
+      e.outside
+    ),
+    disabled: r(
+      "text-[var(--ui-text-on-surface-disabled)]",
+      e.disabled
+    ),
+    hidden: r("invisible", e.hidden)
+  };
+}
+const h = {
+  Root: ({ className: n, rootRef: e, ...t }) => /* @__PURE__ */ o(
+    "div",
+    {
+      "data-slot": "calendar",
+      ref: e,
+      className: r(n),
+      ...t
+    }
+  ),
+  Chevron: ({ className: n, orientation: e, ...t }) => e === "left" ? /* @__PURE__ */ o(
+    p,
+    {
+      size: 16,
+      className: r("rtl:rotate-180", n),
+      ...t
+    }
+  ) : e === "right" ? /* @__PURE__ */ o(
+    m,
+    {
+      size: 16,
+      className: r("rtl:rotate-180", n),
+      ...t
+    }
+  ) : /* @__PURE__ */ o(f, { size: 16, className: r(n), ...t }),
+  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 }) })
+};
+function D({
+  className: n,
+  classNames: e,
+  showOutsideDays: t = !0,
+  captionLayout: a = "label",
+  // Default the grid to a Monday week start (0=Sun..6=Sat); consumers can still
+  // override per instance.
+  weekStartsOn: u = 1,
+  formatters: d,
+  components: i,
+  ...s
+}) {
+  const g = l();
+  return /* @__PURE__ */ o(
+    v,
+    {
+      showOutsideDays: t,
+      weekStartsOn: u,
+      className: r(
+        "group/calendar bg-background p-3 [--cell-size:2rem] [[data-slot=popover-content]_&]:bg-transparent",
+        n
+      ),
+      captionLayout: a,
+      formatters: {
+        formatMonthDropdown: (b) => b.toLocaleString("default", { month: "short" }),
+        ...d
+      },
+      classNames: {
+        ...x(a, g),
+        ...e
+      },
+      components: {
+        ...h,
+        ...i
+      },
+      ...s
+    }
+  );
+}
+function y({
+  className: n,
+  day: e,
+  modifiers: t,
+  ...a
+}) {
+  const u = l(), d = c.useRef(null);
+  return c.useEffect(() => {
+    var i;
+    t.focused && ((i = d.current) == null || i.focus());
+  }, [t.focused]), /* @__PURE__ */ o(
+    "button",
+    {
+      ref: d,
+      type: "button",
+      "data-day": e.date.toLocaleDateString(),
+      "data-selected-single": t.selected && !t.range_start && !t.range_end && !t.range_middle,
+      "data-range-start": t.range_start,
+      "data-range-end": t.range_end,
+      "data-range-middle": t.range_middle,
+      className: r(
+        "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",
+        "hover:bg-accent hover:text-accent-foreground",
+        "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)]",
+        "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)]",
+        "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)]",
+        "data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground",
+        "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)]",
+        "disabled:pointer-events-none disabled:text-[var(--ui-text-on-surface-disabled)]",
+        "[&>span]:text-xs [&>span]:opacity-70",
+        u.day,
+        n
+      ),
+      ...a
+    }
+  );
+}
+export {
+  D as Calendar,
+  y as CalendarDayButton
+};
+//# sourceMappingURL=calendar.js.map

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

@@ -0,0 +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":";;;;;;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,EAGR,SAAS,CAAC,EAAE,WAAAF,GAAW,aAAAI,GAAa,GAAGF,QAMjCE,MAAgB,SAEhB,gBAAAD;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,MAAM;AAAA,MACN,WAAWP,EAAG,kBAAkBE,CAAS;AAAA,MACxC,GAAGE;AAAA,IAAA;AAAA,EAAA,IAINE,MAAgB,UAEhB,gBAAAD;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,MAAM;AAAA,MACN,WAAWR,EAAG,kBAAkBE,CAAS;AAAA,MACxC,GAAGE;AAAA,IAAA;AAAA,EAAA,IAIH,gBAAAC,EAACI,KAAgB,MAAM,IAAI,WAAWT,EAAGE,CAAS,GAAI,GAAGE,GAAO;AAAA,EAEzE,WAAWM;AAAA,EACX,YAAY,CAAC,EAAE,UAAAC,GAAU,GAAGP,QAC1B,gBAAAC,EAAC,MAAA,EAAI,GAAGD,GACN,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,wEACZ,UAAAM,GACH,EAAA,CACF;AAEJ;AAEA,SAASC,EAAS;AAAA,EAChB,WAAAV;AAAA,EACA,YAAAW;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,eAAAhB,IAAgB;AAAA;AAAA;AAAA,EAGhB,cAAAiB,IAAe;AAAA,EACf,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,GAAGb;AACL,GAAkB;AAChB,QAAML,IAAoBmB,EAAA;AAE1B,SACE,gBAAAb;AAAA,IAACc;AAAA,IAAA;AAAA,MACC,iBAAAL;AAAA,MACA,cAAAC;AAAA,MACA,WAAWf;AAAA,QACT;AAAA,QACAE;AAAA,MAAA;AAAA,MAEF,eAAAJ;AAAA,MACA,YAAY;AAAA,QACV,qBAAqB,CAACsB,MACpBA,EAAK,eAAe,WAAW,EAAE,OAAO,SAAS;AAAA,QACnD,GAAGJ;AAAA,MAAA;AAAA,MAEL,YAAY;AAAA,QACV,GAAGnB,EAAwBC,GAAeC,CAAiB;AAAA,QAC3D,GAAGc;AAAA,MAAA;AAAA,MAEL,YAAY;AAAA,QACV,GAAGZ;AAAA,QACH,GAAGgB;AAAA,MAAA;AAAA,MAEJ,GAAGb;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASM,EAAkB;AAAA,EACzB,WAAAR;AAAA,EACA,KAAAmB;AAAA,EACA,WAAAC;AAAA,EACA,GAAGlB;AACL,GAA2C;AACzC,QAAML,IAAoBmB,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,gBAAAjB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAkB;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,WAAWtB;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/card.js

@@ -0,0 +1,92 @@
+import * as o from "react";
+import { mergeProps as t } from "@base-ui/react/merge-props";
+import { useRender as s } from "@base-ui/react/use-render";
+import { cn as p } from "../../../lib/utils.js";
+const m = o.forwardRef(
+  ({ className: e, render: a, ...r }, d) => s({
+    render: a,
+    ref: d,
+    defaultTagName: "div",
+    props: t(
+      {
+        className: p(
+          "rounded-lg border border-border bg-background text-foreground shadow-xs",
+          e
+        )
+      },
+      r
+    )
+  })
+);
+m.displayName = "Card";
+const f = o.forwardRef(
+  ({ className: e, render: a, ...r }, d) => s({
+    render: a,
+    ref: d,
+    defaultTagName: "div",
+    props: t(
+      { className: p("flex flex-col space-y-1.5 p-6", e) },
+      r
+    )
+  })
+);
+f.displayName = "CardHeader";
+const l = o.forwardRef(
+  ({ className: e, render: a, ...r }, d) => s({
+    render: a,
+    ref: d,
+    defaultTagName: "div",
+    props: t(
+      {
+        className: p(
+          "text-2xl font-semibold leading-none tracking-tight",
+          e
+        )
+      },
+      r
+    )
+  })
+);
+l.displayName = "CardTitle";
+const i = o.forwardRef(
+  ({ className: e, render: a, ...r }, d) => s({
+    render: a,
+    ref: d,
+    defaultTagName: "div",
+    props: t(
+      { className: p("text-sm text-muted-foreground", e) },
+      r
+    )
+  })
+);
+i.displayName = "CardDescription";
+const n = o.forwardRef(
+  ({ className: e, render: a, ...r }, d) => s({
+    render: a,
+    ref: d,
+    defaultTagName: "div",
+    props: t({ className: p("p-6 pt-0", e) }, r)
+  })
+);
+n.displayName = "CardContent";
+const c = o.forwardRef(
+  ({ className: e, render: a, ...r }, d) => s({
+    render: a,
+    ref: d,
+    defaultTagName: "div",
+    props: t(
+      { className: p("flex items-center p-6 pt-0", e) },
+      r
+    )
+  })
+);
+c.displayName = "CardFooter";
+export {
+  m as Card,
+  n as CardContent,
+  i as CardDescription,
+  c as CardFooter,
+  f as CardHeader,
+  l as CardTitle
+};
+//# sourceMappingURL=card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sources":["../../../../src/components/ui/card/card.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\n\nimport { cn } from '@/lib/utils';\n\n// Initial version ported from `@acronis-platform/shadcn-uikit`'s `card`\n// (packages/ui-legacy/src/components/ui/card.tsx). No \"ready for dev\" Figma node\n// exists yet, so this is a design-pending v1: there is no `--ui-card-*` token\n// tier, so the surface/text/border colors resolve to the shared **semantic**\n// tokens via the bridged Tailwind names in `src/styles/index.css`:\n//   • bg-background    → --ui-background-surface-primary   (legacy `bg-card`)\n//   • text-foreground  → --ui-text-on-surface-primary      (legacy `text-card-foreground`)\n//   • border-border    → --ui-border-on-surface-border      (legacy bare `border`)\n//   • text-muted-foreground → --ui-text-on-surface-secondary (description)\n// Geometry (radius, padding, gaps, shadow) is carried over verbatim from legacy.\n// Reconcile against the real design with `/figma-component Card <url> --update`\n// once a mockup lands — at which point an elevated-surface token may replace the\n// primary surface used for the card background.\n\ninterface CardPartProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Replace the rendered `<div>` with another element or component (Base UI\n   * composition) — e.g. render `CardTitle` as a heading. The component's props\n   * and class names are merged onto it.\n   */\n  render?: useRender.RenderProp;\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardPartProps>(\n  ({ className, render, ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        {\n          className: cn(\n            'rounded-lg border border-border bg-background text-foreground shadow-xs',\n            className\n          ),\n        },\n        props\n      ),\n    })\n);\nCard.displayName = 'Card';\n\nconst CardHeader = React.forwardRef<HTMLDivElement, CardPartProps>(\n  ({ className, render, ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        { className: cn('flex flex-col space-y-1.5 p-6', className) },\n        props\n      ),\n    })\n);\nCardHeader.displayName = 'CardHeader';\n\nconst CardTitle = React.forwardRef<HTMLDivElement, CardPartProps>(\n  ({ className, render, ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        {\n          className: cn(\n            'text-2xl font-semibold leading-none tracking-tight',\n            className\n          ),\n        },\n        props\n      ),\n    })\n);\nCardTitle.displayName = 'CardTitle';\n\nconst CardDescription = React.forwardRef<HTMLDivElement, CardPartProps>(\n  ({ className, render, ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        { className: cn('text-sm text-muted-foreground', className) },\n        props\n      ),\n    })\n);\nCardDescription.displayName = 'CardDescription';\n\nconst CardContent = React.forwardRef<HTMLDivElement, CardPartProps>(\n  ({ className, render, ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>({ className: cn('p-6 pt-0', className) }, props),\n    })\n);\nCardContent.displayName = 'CardContent';\n\nconst CardFooter = React.forwardRef<HTMLDivElement, CardPartProps>(\n  ({ className, render, ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        { className: cn('flex items-center p-6 pt-0', className) },\n        props\n      ),\n    })\n);\nCardFooter.displayName = 'CardFooter';\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardDescription,\n  CardContent,\n  type CardPartProps,\n};\n"],"names":["Card","React","className","render","props","ref","useRender","mergeProps","cn","CardHeader","CardTitle","CardDescription","CardContent","CardFooter"],"mappings":";;;;AA6BA,MAAMA,IAAOC,EAAM;AAAA,EACjB,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAChCC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL;AAAA,QACE,WAAWC;AAAA,UACT;AAAA,UACAN;AAAA,QAAA;AAAA,MACF;AAAA,MAEFE;AAAA,IAAA;AAAA,EACF,CACD;AACL;AACAJ,EAAK,cAAc;AAEnB,MAAMS,IAAaR,EAAM;AAAA,EACvB,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAChCC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL,EAAE,WAAWC,EAAG,iCAAiCN,CAAS,EAAA;AAAA,MAC1DE;AAAA,IAAA;AAAA,EACF,CACD;AACL;AACAK,EAAW,cAAc;AAEzB,MAAMC,IAAYT,EAAM;AAAA,EACtB,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAChCC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL;AAAA,QACE,WAAWC;AAAA,UACT;AAAA,UACAN;AAAA,QAAA;AAAA,MACF;AAAA,MAEFE;AAAA,IAAA;AAAA,EACF,CACD;AACL;AACAM,EAAU,cAAc;AAExB,MAAMC,IAAkBV,EAAM;AAAA,EAC5B,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAChCC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL,EAAE,WAAWC,EAAG,iCAAiCN,CAAS,EAAA;AAAA,MAC1DE;AAAA,IAAA;AAAA,EACF,CACD;AACL;AACAO,EAAgB,cAAc;AAE9B,MAAMC,IAAcX,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAChCC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE,EAAkB,EAAE,WAAWC,EAAG,YAAYN,CAAS,EAAA,GAAKE,CAAK;AAAA,EAAA,CACzE;AACL;AACAQ,EAAY,cAAc;AAE1B,MAAMC,IAAaZ,EAAM;AAAA,EACvB,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAChCC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL,EAAE,WAAWC,EAAG,8BAA8BN,CAAS,EAAA;AAAA,MACvDE;AAAA,IAAA;AAAA,EACF,CACD;AACL;AACAS,EAAW,cAAc;"}

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

@@ -0,0 +1,63 @@
+import { jsxs as i, Fragment as v, jsx as l } from "react/jsx-runtime";
+import * as g 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(
+  "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)]"
+      }
+    },
+    defaultVariants: {
+      variant: "static"
+    }
+  }
+), y = {
+  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,
+      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(
+                "span",
+                {
+                  className: o(
+                    "text-2xl font-semibold leading-8",
+                    y[r ?? "static"]
+                  ),
+                  children: f
+                }
+              )
+            ] })
+          ] })
+        },
+        b
+      )
+    });
+  }
+);
+k.displayName = "CardFilter";
+export {
+  k as CardFilter,
+  h as cardFilterVariants
+};
+//# sourceMappingURL=card-filter.js.map

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

@@ -0,0 +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;"}

package/dist/components/ui/chart/chart.js

@@ -0,0 +1,213 @@
+import { jsx as c, jsxs as v, Fragment as E } from "react/jsx-runtime";
+import * as b from "react";
+import * as C from "recharts";
+import { cn as d } from "../../../lib/utils.js";
+const I = { light: "", dark: "[data-theme='dark']" }, $ = b.createContext(null);
+function L() {
+  const s = b.useContext($);
+  if (!s)
+    throw new Error("useChart must be used within a <ChartContainer />");
+  return s;
+}
+function M({
+  id: s,
+  className: e,
+  children: r,
+  config: o,
+  ...n
+}) {
+  const i = b.useId(), a = `chart-${s || i.replace(/:/g, "")}`;
+  return /* @__PURE__ */ c($.Provider, { value: { config: o }, children: /* @__PURE__ */ v(
+    "div",
+    {
+      id: s,
+      "data-slot": "chart",
+      "data-chart": a,
+      className: d(
+        "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+        e
+      ),
+      ...n,
+      children: [
+        /* @__PURE__ */ c(R, { id: a, config: o }),
+        /* @__PURE__ */ c(C.ResponsiveContainer, { children: r })
+      ]
+    }
+  ) });
+}
+const R = ({ id: s, config: e }) => {
+  const r = Object.entries(e).filter(
+    ([, o]) => o.theme || o.color
+  );
+  return r.length ? /* @__PURE__ */ c("style", { children: Object.entries(I).map(
+    ([o, n]) => `
+            ${n} [data-chart=${s}] {
+            ${r.map(([i, a]) => {
+      var l;
+      const h = ((l = a.theme) == null ? void 0 : l[o]) || a.color;
+      return h ? `  --color-${i}: ${h};` : null;
+    }).join(`
+`)}
+            }
+            `
+  ).join(`
+`) }) : null;
+}, O = C.Tooltip;
+function q({
+  active: s,
+  payload: e,
+  label: r,
+  className: o,
+  indicator: n = "dot",
+  hideLabel: i = !1,
+  hideIndicator: a = !1,
+  labelFormatter: h,
+  formatter: l,
+  labelClassName: p,
+  color: P,
+  nameKey: T,
+  labelKey: _
+}) {
+  const { config: m } = L(), N = b.useMemo(() => {
+    if (i || !(e != null && e.length))
+      return null;
+    const [t] = e, k = `${_ || (t == null ? void 0 : t.dataKey) || (t == null ? void 0 : t.name) || "value"}`, f = w(m, t, k), u = (() => {
+      var j;
+      const g = !_ && typeof r == "string" ? ((j = m[r]) == null ? void 0 : j.label) ?? r : f == null ? void 0 : f.label;
+      return typeof g == "string" || typeof g == "number" ? g : void 0;
+    })();
+    return h ? /* @__PURE__ */ c("div", { className: d("font-medium", p), children: h(u, e) }) : u ? /* @__PURE__ */ c("div", { className: d("font-medium", p), children: u }) : null;
+  }, [
+    r,
+    h,
+    e,
+    i,
+    p,
+    m,
+    _
+  ]);
+  if (!s || !(e != null && e.length))
+    return null;
+  const x = e.length === 1 && n !== "dot";
+  return /* @__PURE__ */ v(
+    "div",
+    {
+      className: d(
+        "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border bg-background px-2.5 py-1.5 text-xs text-foreground shadow-xl",
+        o
+      ),
+      children: [
+        x ? null : N,
+        /* @__PURE__ */ c("div", { className: "grid gap-1.5", children: e.map((t, k) => {
+          const f = `${T || t.name || t.dataKey || "value"}`, u = w(m, t, f), g = P || t.payload.fill || t.color;
+          return /* @__PURE__ */ c(
+            "div",
+            {
+              className: d(
+                "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                n === "dot" && "items-center"
+              ),
+              children: l && (t == null ? void 0 : t.value) !== void 0 && t.name ? l(t.value, t.name, t, k, e) : /* @__PURE__ */ v(E, { children: [
+                u != null && u.icon ? /* @__PURE__ */ c(u.icon, {}) : !a && /* @__PURE__ */ c(
+                  "div",
+                  {
+                    className: d(
+                      "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                      {
+                        "h-2.5 w-2.5": n === "dot",
+                        "h-4 w-1": n === "line",
+                        "h-4 w-0 border-[1.5px] border-dashed bg-transparent": n === "dashed",
+                        "my-0.5": x && n === "dashed"
+                      }
+                    ),
+                    style: {
+                      "--color-bg": g,
+                      "--color-border": g
+                    }
+                  }
+                ),
+                /* @__PURE__ */ v(
+                  "div",
+                  {
+                    className: d(
+                      "flex flex-1 justify-between leading-none",
+                      x ? "items-end" : "items-center"
+                    ),
+                    children: [
+                      /* @__PURE__ */ v("div", { className: "grid gap-1.5", children: [
+                        x ? N : null,
+                        /* @__PURE__ */ c("span", { className: "text-muted-foreground", children: (u == null ? void 0 : u.label) || t.name })
+                      ] }),
+                      t.value != null && /* @__PURE__ */ c("span", { className: "font-mono font-medium tabular-nums text-foreground", children: t.value.toLocaleString() })
+                    ]
+                  }
+                )
+              ] })
+            },
+            f
+          );
+        }) })
+      ]
+    }
+  );
+}
+const H = C.Legend;
+function z({
+  className: s,
+  hideIcon: e = !1,
+  payload: r,
+  verticalAlign: o = "bottom",
+  nameKey: n
+}) {
+  const { config: i } = L();
+  return r != null && r.length ? /* @__PURE__ */ c(
+    "div",
+    {
+      className: d(
+        "flex items-center justify-center gap-4",
+        o === "top" ? "pb-3" : "pt-3",
+        s
+      ),
+      children: r.map((a) => {
+        const h = `${n || a.dataKey || "value"}`, l = w(i, a, h);
+        return /* @__PURE__ */ v(
+          "div",
+          {
+            className: d(
+              "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+            ),
+            children: [
+              l != null && l.icon && !e ? /* @__PURE__ */ c(l.icon, {}) : /* @__PURE__ */ c(
+                "div",
+                {
+                  className: "h-2 w-2 shrink-0 rounded-[2px]",
+                  style: {
+                    backgroundColor: a.color
+                  }
+                }
+              ),
+              l == null ? void 0 : l.label
+            ]
+          },
+          a.value
+        );
+      })
+    }
+  ) : null;
+}
+function w(s, e, r) {
+  if (typeof e != "object" || e === null)
+    return;
+  const o = "payload" in e && typeof e.payload == "object" && e.payload !== null ? e.payload : void 0;
+  let n = r;
+  return r in e && typeof e[r] == "string" ? n = e[r] : o && r in o && typeof o[r] == "string" && (n = o[r]), n in s ? s[n] : s[r];
+}
+export {
+  M as ChartContainer,
+  H as ChartLegend,
+  z as ChartLegendContent,
+  R as ChartStyle,
+  O as ChartTooltip,
+  q as ChartTooltipContent
+};
+//# sourceMappingURL=chart.js.map