@acronis-platform/ui-react 0.57.0 → 0.58.0

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":"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"}

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

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)] 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/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 i } 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: r,
+  children: e,
+  config: o,
+  ...n
+}) {
+  const u = b.useId(), a = `chart-${s || u.replace(/:/g, "")}`;
+  return /* @__PURE__ */ c($.Provider, { value: { config: o }, children: /* @__PURE__ */ v(
+    "div",
+    {
+      id: s,
+      "data-slot": "chart",
+      "data-chart": a,
+      className: i(
+        "[&_.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",
+        r
+      ),
+      ...n,
+      children: [
+        /* @__PURE__ */ c(R, { id: a, config: o }),
+        /* @__PURE__ */ c(C.ResponsiveContainer, { children: e })
+      ]
+    }
+  ) });
+}
+const R = ({ id: s, config: r }) => {
+  const e = Object.entries(r).filter(
+    ([, o]) => o.theme || o.color
+  );
+  return e.length ? /* @__PURE__ */ c("style", { children: Object.entries(I).map(
+    ([o, n]) => `
+            ${n} [data-chart=${s}] {
+            ${e.map(([u, a]) => {
+      var l;
+      const h = ((l = a.theme) == null ? void 0 : l[o]) || a.color;
+      return h ? `  --color-${u}: ${h};` : null;
+    }).join(`
+`)}
+            }
+            `
+  ).join(`
+`) }) : null;
+}, O = C.Tooltip;
+function q({
+  active: s,
+  payload: r,
+  label: e,
+  className: o,
+  indicator: n = "dot",
+  hideLabel: u = !1,
+  hideIndicator: a = !1,
+  labelFormatter: h,
+  formatter: l,
+  labelClassName: p,
+  color: P,
+  nameKey: T,
+  labelKey: _
+}) {
+  const { config: m } = L(), N = b.useMemo(() => {
+    if (u || !(r != null && r.length))
+      return null;
+    const [t] = r, k = `${_ || (t == null ? void 0 : t.dataKey) || (t == null ? void 0 : t.name) || "value"}`, f = w(m, t, k), d = (() => {
+      var j;
+      const g = !_ && typeof e == "string" ? ((j = m[e]) == null ? void 0 : j.label) ?? e : f == null ? void 0 : f.label;
+      return typeof g == "string" || typeof g == "number" ? g : void 0;
+    })();
+    return h ? /* @__PURE__ */ c("div", { className: i("font-medium", p), children: h(d, r) }) : d ? /* @__PURE__ */ c("div", { className: i("font-medium", p), children: d }) : null;
+  }, [
+    e,
+    h,
+    r,
+    u,
+    p,
+    m,
+    _
+  ]);
+  if (!s || !(r != null && r.length))
+    return null;
+  const x = r.length === 1 && n !== "dot";
+  return /* @__PURE__ */ v(
+    "div",
+    {
+      className: i(
+        "grid min-w-[8rem] items-start gap-1.5 rounded-[var(--ui-tooltip-container-border-radius)] border border-border bg-background px-[var(--ui-tooltip-container-padding-x)] py-[var(--ui-tooltip-container-padding-y)] text-xs text-foreground shadow-md",
+        o
+      ),
+      children: [
+        x ? null : N,
+        /* @__PURE__ */ c("div", { className: "grid gap-1.5", children: r.map((t, k) => {
+          const f = `${T || t.name || t.dataKey || "value"}`, d = w(m, t, f), g = P || t.payload.fill || t.color;
+          return /* @__PURE__ */ c(
+            "div",
+            {
+              className: i(
+                "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, r) : /* @__PURE__ */ v(E, { children: [
+                d != null && d.icon ? /* @__PURE__ */ c(d.icon, {}) : !a && /* @__PURE__ */ c(
+                  "div",
+                  {
+                    className: i(
+                      "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: i(
+                      "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: (d == null ? void 0 : d.label) || t.name })
+                      ] }),
+                      t.value != null && /* @__PURE__ */ c("span", { className: "font-medium tabular-nums text-foreground", children: t.value.toLocaleString() })
+                    ]
+                  }
+                )
+              ] })
+            },
+            f
+          );
+        }) })
+      ]
+    }
+  );
+}
+const H = C.Legend;
+function z({
+  className: s,
+  hideIcon: r = !1,
+  payload: e,
+  verticalAlign: o = "bottom",
+  nameKey: n
+}) {
+  const { config: u } = L();
+  return e != null && e.length ? /* @__PURE__ */ c(
+    "div",
+    {
+      className: i(
+        "flex items-center justify-center gap-4",
+        o === "top" ? "pb-3" : "pt-3",
+        s
+      ),
+      children: e.map((a) => {
+        const h = `${n || a.dataKey || "value"}`, l = w(u, a, h);
+        return /* @__PURE__ */ v(
+          "div",
+          {
+            className: i(
+              "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+            ),
+            children: [
+              l != null && l.icon && !r ? /* @__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, r, e) {
+  if (typeof r != "object" || r === null)
+    return;
+  const o = "payload" in r && typeof r.payload == "object" && r.payload !== null ? r.payload : void 0;
+  let n = e;
+  return e in r && typeof r[e] == "string" ? n = r[e] : o && e in o && typeof o[e] == "string" && (n = o[e]), n in s ? s[n] : s[e];
+}
+export {
+  M as ChartContainer,
+  H as ChartLegend,
+  z as ChartLegendContent,
+  R as ChartStyle,
+  O as ChartTooltip,
+  q as ChartTooltipContent
+};
+//# sourceMappingURL=chart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chart.js","sources":["../../../../src/components/ui/chart/chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as RechartsPrimitive from 'recharts';\nimport type { LegendPayload } from 'recharts/types/component/DefaultLegendContent';\nimport {\n  NameType,\n  Payload,\n  ValueType,\n} from 'recharts/types/component/DefaultTooltipContent';\nimport type { Props as LegendProps } from 'recharts/types/component/Legend';\nimport { TooltipContentProps } from 'recharts/types/component/Tooltip';\n\nimport { cn } from '@/lib/utils';\n\n// Format: { THEME_NAME: CSS_SELECTOR }. ui-react flips light/dark via the\n// `[data-theme]` attribute (the tokens resolve `light-dark()` through\n// `color-scheme`), not the legacy `.dark` class — so per-series `theme` colors\n// scope their dark value under `[data-theme='dark']`.\nconst THEMES = { light: '', dark: \"[data-theme='dark']\" } as const;\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode;\n    icon?: React.ComponentType;\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  );\n};\n\ntype ChartContextProps = {\n  config: ChartConfig;\n};\n\nexport type ChartTooltipContentProps = Partial<\n  TooltipContentProps<ValueType, NameType>\n> & {\n  className?: string;\n  hideLabel?: boolean;\n  hideIndicator?: boolean;\n  indicator?: 'line' | 'dot' | 'dashed';\n  nameKey?: string;\n  labelKey?: string;\n  labelFormatter?: (\n    label: TooltipContentProps<number, string>['label'],\n    payload: TooltipContentProps<number, string>['payload']\n  ) => React.ReactNode;\n  formatter?: (\n    value: number | string,\n    name: string,\n    item: Payload<number | string, string>,\n    index: number,\n    payload: ReadonlyArray<Payload<number | string, string>>\n  ) => React.ReactNode;\n  labelClassName?: string;\n  color?: string;\n};\n\nexport type ChartLegendContentProps = {\n  className?: string;\n  hideIcon?: boolean;\n  verticalAlign?: LegendProps['verticalAlign'];\n  payload?: LegendPayload[];\n  nameKey?: string;\n};\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null);\n\nfunction useChart() {\n  const context = React.useContext(ChartContext);\n\n  if (!context) {\n    throw new Error('useChart must be used within a <ChartContainer />');\n  }\n\n  return context;\n}\n\nexport interface ChartContainerProps extends React.ComponentProps<'div'> {\n  config: ChartConfig;\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >['children'];\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: ChartContainerProps) {\n  const uniqueId = React.useId();\n  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        id={id}\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"[&_.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\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  );\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  );\n\n  if (!colorConfig.length) {\n    return null;\n  }\n\n  // Rendered as a text child (not dangerouslySetInnerHTML): React sets it via\n  // textContent, which the browser does not HTML-parse, so a `</style>` in a\n  // config color can't break out of the tag.\n  return (\n    <style>\n      {Object.entries(THEMES)\n        .map(\n          ([theme, prefix]) => `\n            ${prefix} [data-chart=${id}] {\n            ${colorConfig\n              .map(([key, itemConfig]) => {\n                const color =\n                  itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n                  itemConfig.color;\n                return color ? `  --color-${key}: ${color};` : null;\n              })\n              .join('\\n')}\n            }\n            `\n        )\n        .join('\\n')}\n    </style>\n  );\n};\n\nconst ChartTooltip = RechartsPrimitive.Tooltip;\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  label,\n  className,\n  indicator = 'dot',\n  hideLabel = false,\n  hideIndicator = false,\n  labelFormatter,\n  formatter,\n  labelClassName,\n  color,\n  nameKey,\n  labelKey,\n}: ChartTooltipContentProps) {\n  const { config } = useChart();\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null;\n    }\n\n    const [item] = payload;\n    const key = `${labelKey || item?.dataKey || item?.name || 'value'}`;\n    const itemConfig = getPayloadConfigFromPayload(config, item, key);\n    const value = (() => {\n      const v =\n        !labelKey && typeof label === 'string'\n          ? (config[label as keyof typeof config]?.label ?? label)\n          : itemConfig?.label;\n\n      return typeof v === 'string' || typeof v === 'number' ? v : undefined;\n    })();\n\n    if (labelFormatter) {\n      return (\n        <div className={cn('font-medium', labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      );\n    }\n\n    if (!value) {\n      return null;\n    }\n\n    return <div className={cn('font-medium', labelClassName)}>{value}</div>;\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ]);\n\n  if (!active || !payload?.length) {\n    return null;\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== 'dot';\n\n  return (\n    <div\n      className={cn(\n        'grid min-w-[8rem] items-start gap-1.5 rounded-[var(--ui-tooltip-container-border-radius)] border border-border bg-background px-[var(--ui-tooltip-container-padding-x)] py-[var(--ui-tooltip-container-padding-y)] text-xs text-foreground shadow-md',\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload.map((item, index) => {\n          const key = `${nameKey || item.name || item.dataKey || 'value'}`;\n          const itemConfig = getPayloadConfigFromPayload(config, item, key);\n          const indicatorColor = color || item.payload.fill || item.color;\n\n          return (\n            <div\n              key={key}\n              className={cn(\n                'flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground',\n                indicator === 'dot' && 'items-center'\n              )}\n            >\n              {formatter && item?.value !== undefined && item.name ? (\n                formatter(item.value, item.name, item, index, payload)\n              ) : (\n                <>\n                  {itemConfig?.icon ? (\n                    <itemConfig.icon />\n                  ) : (\n                    !hideIndicator && (\n                      <div\n                        className={cn(\n                          'shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)',\n                          {\n                            'h-2.5 w-2.5': indicator === 'dot',\n                            'h-4 w-1': indicator === 'line',\n                            'h-4 w-0 border-[1.5px] border-dashed bg-transparent':\n                              indicator === 'dashed',\n                            'my-0.5': nestLabel && indicator === 'dashed',\n                          }\n                        )}\n                        style={\n                          {\n                            '--color-bg': indicatorColor,\n                            '--color-border': indicatorColor,\n                          } as React.CSSProperties\n                        }\n                      />\n                    )\n                  )}\n                  <div\n                    className={cn(\n                      'flex flex-1 justify-between leading-none',\n                      nestLabel ? 'items-end' : 'items-center'\n                    )}\n                  >\n                    <div className=\"grid gap-1.5\">\n                      {nestLabel ? tooltipLabel : null}\n                      <span className=\"text-muted-foreground\">\n                        {itemConfig?.label || item.name}\n                      </span>\n                    </div>\n                    {item.value != null && (\n                      <span className=\"font-medium tabular-nums text-foreground\">\n                        {item.value.toLocaleString()}\n                      </span>\n                    )}\n                  </div>\n                </>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nconst ChartLegend = RechartsPrimitive.Legend;\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = 'bottom',\n  nameKey,\n}: ChartLegendContentProps) {\n  const { config } = useChart();\n\n  if (!payload?.length) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cn(\n        'flex items-center justify-center gap-4',\n        verticalAlign === 'top' ? 'pb-3' : 'pt-3',\n        className\n      )}\n    >\n      {payload.map((item) => {\n        const key = `${nameKey || item.dataKey || 'value'}`;\n        const itemConfig = getPayloadConfigFromPayload(config, item, key);\n\n        return (\n          <div\n            key={item.value}\n            className={cn(\n              'flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground'\n            )}\n          >\n            {itemConfig?.icon && !hideIcon ? (\n              <itemConfig.icon />\n            ) : (\n              <div\n                className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                style={{\n                  backgroundColor: item.color,\n                }}\n              />\n            )}\n            {itemConfig?.label}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== 'object' || payload === null) {\n    return undefined;\n  }\n\n  const payloadPayload =\n    'payload' in payload &&\n    typeof payload.payload === 'object' &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined;\n\n  let configLabelKey: string = key;\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === 'string'\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string;\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string;\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config];\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n};\n"],"names":["THEMES","ChartContext","React","useChart","context","ChartContainer","id","className","children","config","props","uniqueId","chartId","jsxs","cn","jsx","ChartStyle","RechartsPrimitive","colorConfig","theme","prefix","key","itemConfig","color","_a","ChartTooltip","ChartTooltipContent","active","payload","label","indicator","hideLabel","hideIndicator","labelFormatter","formatter","labelClassName","nameKey","labelKey","tooltipLabel","item","getPayloadConfigFromPayload","value","v","nestLabel","index","indicatorColor","Fragment","ChartLegend","ChartLegendContent","hideIcon","verticalAlign","payloadPayload","configLabelKey"],"mappings":"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"}

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

@@ -0,0 +1,42 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import * as s from "react";
+import { InboxIcon as m, CircleWarningIcon as c } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as p } from "../../../lib/utils.js";
+import { Spinner as d } from "../spinner/spinner.js";
+const f = {
+  loading: "Data is loading…",
+  empty: "No data found",
+  error: "Something went wrong"
+}, g = s.forwardRef(
+  ({ className: o, state: r, message: i, action: t, ...a }, n) => /* @__PURE__ */ l(
+    "div",
+    {
+      ref: n,
+      className: p(
+        "flex size-full min-h-32 flex-col items-center justify-center gap-2 text-center text-sm leading-6 text-foreground",
+        o
+      ),
+      ...a,
+      role: r === "error" ? "alert" : "status",
+      "aria-live": r === "error" ? "assertive" : "polite",
+      children: [
+        r === "loading" && /* @__PURE__ */ e(d, { size: "lg", "aria-hidden": !0 }),
+        r === "empty" && /* @__PURE__ */ e(m, { size: 24, className: "text-[var(--ui-glyph-on-status-info)]" }),
+        r === "error" && /* @__PURE__ */ e(
+          c,
+          {
+            size: 24,
+            className: "text-[var(--ui-glyph-on-status-warning)]"
+          }
+        ),
+        /* @__PURE__ */ e("p", { children: i ?? f[r] }),
+        r === "error" && t
+      ]
+    }
+  )
+);
+g.displayName = "ChartState";
+export {
+  g as ChartState
+};
+//# sourceMappingURL=chart-state.js.map

package/dist/components/ui/chart-state/chart-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-state.js","sources":["../../../../src/components/ui/chart-state/chart-state.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  CircleWarningIcon,\n  InboxIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { Spinner } from '../spinner';\n\n// A shared loading / empty / error placeholder for the chart types. A chart can\n// only render once recharts' `ResponsiveContainer` has data and real dimensions,\n// so every type needs the same \"there's nothing to plot yet\" surface — this is\n// that surface, dropped in place of the chart inside the same sized slot.\n//\n// Ported from the Figma InputSelect dropdown states (the reference the task\n// points at) and kept visually in step with the shipped `InputSelectStatus`\n// sibling: the empty / error states use the same 24px glyph + `text-sm` label\n// and the same `--ui-glyph-on-status-*` icon tokens. (Loading uses the shared\n// `Spinner` — brand blue, larger — not the sibling's inline gray ring.) No\n// `--ui-chart-*` tier exists yet, so it themes from existing semantic tokens\n// directly:\n//   • label      -> text-foreground (--ui-text-on-surface-primary)\n//   • empty icon  -> --ui-glyph-on-status-info\n//   • error icon  -> --ui-glyph-on-status-warning\n//   • loading      -> the shared Spinner (brand action blue)\n// The generic full-page `Empty` component is the larger, page-level sibling;\n// this one is compact and fills a chart slot.\n\nconst DEFAULT_MESSAGE: Record<ChartStateProps['state'], string> = {\n  loading: 'Data is loading…',\n  empty: 'No data found',\n  error: 'Something went wrong',\n};\n\nexport interface ChartStateProps\n  extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {\n  /** Which placeholder to show. Drives the leading glyph and default label. */\n  state: 'loading' | 'empty' | 'error';\n  /** Overrides the default label for the current `state`. */\n  message?: string;\n  /** Trailing action (e.g. a \"Try again\" button) — shown for `error` only. */\n  action?: React.ReactNode;\n}\n\nconst ChartState = React.forwardRef<HTMLDivElement, ChartStateProps>(\n  ({ className, state, message, action, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex size-full min-h-32 flex-col items-center justify-center gap-2 text-center text-sm leading-6 text-foreground',\n        className\n      )}\n      {...props}\n      // The status/alert live-region contract is intrinsic to the state, so it\n      // wins over any consumer-passed a11y prop (spread above). No `aria-busy`\n      // here: this element IS the live region, and some AT defer announcing a\n      // busy region's content until busy clears — but this placeholder is\n      // unmounted (swapped for the chart) rather than un-busied, so a busy flag\n      // would risk swallowing the \"Data is loading…\" announcement. A consumer\n      // that wants a busy signal sets `aria-busy` on the chart-slot container.\n      role={state === 'error' ? 'alert' : 'status'}\n      aria-live={state === 'error' ? 'assertive' : 'polite'}\n    >\n      {/* aria-hidden: the root is already the loading live region (+ the label),\n          so the Spinner's own role=\"status\"/sr-only would double-announce. */}\n      {state === 'loading' && <Spinner size=\"lg\" aria-hidden />}\n      {state === 'empty' && (\n        <InboxIcon size={24} className=\"text-[var(--ui-glyph-on-status-info)]\" />\n      )}\n      {state === 'error' && (\n        <CircleWarningIcon\n          size={24}\n          className=\"text-[var(--ui-glyph-on-status-warning)]\"\n        />\n      )}\n      <p>{message ?? DEFAULT_MESSAGE[state]}</p>\n      {state === 'error' && action}\n    </div>\n  )\n);\nChartState.displayName = 'ChartState';\n\nexport { ChartState };\n"],"names":["DEFAULT_MESSAGE","ChartState","React","className","state","message","action","props","ref","jsxs","cn","jsx","Spinner","InboxIcon","CircleWarningIcon"],"mappings":";;;;;AA8BA,MAAMA,IAA4D;AAAA,EAChE,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AACT,GAYMC,IAAaC,EAAM;AAAA,EACvB,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,SAAAC,GAAS,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAChD,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAP;AAAA,MAAA;AAAA,MAED,GAAGI;AAAA,MAQJ,MAAMH,MAAU,UAAU,UAAU;AAAA,MACpC,aAAWA,MAAU,UAAU,cAAc;AAAA,MAI5C,UAAA;AAAA,QAAAA,MAAU,aAAa,gBAAAO,EAACC,GAAA,EAAQ,MAAK,MAAK,eAAW,IAAC;AAAA,QACtDR,MAAU,WACT,gBAAAO,EAACE,KAAU,MAAM,IAAI,WAAU,yCAAwC;AAAA,QAExET,MAAU,WACT,gBAAAO;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,MAAM;AAAA,YACN,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAGd,gBAAAH,EAAC,KAAA,EAAG,UAAAN,KAAWL,EAAgBI,CAAK,GAAE;AAAA,QACrCA,MAAU,WAAWE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG5B;AACAL,EAAW,cAAc;"}

package/dist/components/ui/checkbox/checkbox.js

@@ -0,0 +1,70 @@
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import * as l from "react";
+import { Checkbox as h } from "@base-ui/react/checkbox";
+import { MinusIcon as v, CheckIcon as u } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as m } from "../../../lib/utils.js";
+const g = [
+  // geometry + focus ring
+  // `align-middle` keeps the box vertically centered when it sits inline next to
+  // text (e.g. in a table cell) rather than defaulting to the text baseline.
+  "inline-flex size-[var(--ui-checkbox-global-box-size)] shrink-0 cursor-pointer items-center justify-center rounded-[var(--ui-checkbox-global-box-border-radius)] border align-middle transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:shrink-0",
+  // unchecked (base): idle / hover / active
+  "bg-[var(--ui-checkbox-unchecked-box-color-idle)] border-[var(--ui-checkbox-unchecked-box-border-color-idle)]",
+  "not-data-[disabled]:hover:bg-[var(--ui-checkbox-unchecked-box-color-hover)] not-data-[disabled]:hover:border-[var(--ui-checkbox-unchecked-box-border-color-hover)]",
+  "not-data-[disabled]:active:bg-[var(--ui-checkbox-unchecked-box-color-active)] not-data-[disabled]:active:border-[var(--ui-checkbox-unchecked-box-border-color-active)]",
+  // checked: idle / hover / active
+  "data-[checked]:bg-[var(--ui-checkbox-checked-box-color-idle)] data-[checked]:border-[var(--ui-checkbox-checked-box-border-color-idle)] data-[checked]:text-[var(--ui-checkbox-checked-icon-color-idle)]",
+  "data-[checked]:not-data-[disabled]:hover:bg-[var(--ui-checkbox-checked-box-color-hover)] data-[checked]:not-data-[disabled]:hover:border-[var(--ui-checkbox-checked-box-border-color-hover)] data-[checked]:not-data-[disabled]:hover:text-[var(--ui-checkbox-checked-icon-color-hover)]",
+  "data-[checked]:not-data-[disabled]:active:bg-[var(--ui-checkbox-checked-box-color-active)] data-[checked]:not-data-[disabled]:active:border-[var(--ui-checkbox-checked-box-border-color-active)] data-[checked]:not-data-[disabled]:active:text-[var(--ui-checkbox-checked-icon-color-active)]",
+  // indeterminate: idle / hover / active
+  "data-[indeterminate]:bg-[var(--ui-checkbox-indeterminate-box-color-idle)] data-[indeterminate]:border-[var(--ui-checkbox-indeterminate-box-border-color-idle)] data-[indeterminate]:text-[var(--ui-checkbox-indeterminate-icon-color-idle)]",
+  "data-[indeterminate]:not-data-[disabled]:hover:bg-[var(--ui-checkbox-indeterminate-box-color-hover)] data-[indeterminate]:not-data-[disabled]:hover:border-[var(--ui-checkbox-indeterminate-box-border-color-hover)] data-[indeterminate]:not-data-[disabled]:hover:text-[var(--ui-checkbox-indeterminate-icon-color-hover)]",
+  "data-[indeterminate]:not-data-[disabled]:active:bg-[var(--ui-checkbox-indeterminate-box-color-active)] data-[indeterminate]:not-data-[disabled]:active:border-[var(--ui-checkbox-indeterminate-box-border-color-active)] data-[indeterminate]:not-data-[disabled]:active:text-[var(--ui-checkbox-indeterminate-icon-color-active)]",
+  // disabled (unchecked base + per-state overrides)
+  "data-[disabled]:cursor-not-allowed data-[disabled]:bg-[var(--ui-checkbox-unchecked-box-color-disabled)] data-[disabled]:border-[var(--ui-checkbox-unchecked-box-border-color-disabled)]",
+  "data-[disabled]:data-[checked]:bg-[var(--ui-checkbox-checked-box-color-disabled)] data-[disabled]:data-[checked]:border-[var(--ui-checkbox-checked-box-border-color-disabled)] data-[disabled]:data-[checked]:text-[var(--ui-checkbox-checked-icon-color-disabled)]",
+  "data-[disabled]:data-[indeterminate]:bg-[var(--ui-checkbox-indeterminate-box-color-disabled)] data-[disabled]:data-[indeterminate]:border-[var(--ui-checkbox-indeterminate-box-border-color-disabled)] data-[disabled]:data-[indeterminate]:text-[var(--ui-checkbox-indeterminate-icon-color-disabled)]"
+].join(" "), f = l.forwardRef(({ className: x, label: a, description: o, indeterminate: c, ...s }, k) => {
+  const d = l.useId(), r = a != null ? `${d}-label` : void 0, i = o != null ? `${d}-description` : void 0, t = a != null || o != null, b = /* @__PURE__ */ e(
+    h.Root,
+    {
+      ref: k,
+      indeterminate: c,
+      "aria-labelledby": r,
+      "aria-describedby": i,
+      className: m(
+        g,
+        t && "mt-[var(--ui-checkbox-global-box-margin-y)]",
+        x
+      ),
+      ...s,
+      children: /* @__PURE__ */ e(h.Indicator, { className: "flex items-center justify-center text-current", children: c ? /* @__PURE__ */ e(v, { size: 16 }) : /* @__PURE__ */ e(u, { size: 16 }) })
+    }
+  );
+  return t ? /* @__PURE__ */ n("label", { className: "inline-flex max-w-[var(--ui-checkbox-global-container-width-max)] min-w-[var(--ui-checkbox-global-container-width-min)] cursor-pointer items-start gap-[var(--ui-checkbox-global-container-gap)]", children: [
+    b,
+    /* @__PURE__ */ n("span", { className: "flex max-w-[var(--ui-checkbox-global-container-content-width-max)] flex-col gap-[var(--ui-checkbox-global-container-content-gap)]", children: [
+      a != null && /* @__PURE__ */ e(
+        "span",
+        {
+          id: r,
+          className: "text-sm leading-6 font-normal text-[var(--ui-checkbox-global-label-color)]",
+          children: a
+        }
+      ),
+      o != null && /* @__PURE__ */ e(
+        "span",
+        {
+          id: i,
+          className: "text-sm leading-6 font-normal text-[var(--ui-checkbox-global-description-color)]",
+          children: o
+        }
+      )
+    ] })
+  ] }) : b;
+});
+f.displayName = "Checkbox";
+export {
+  f as Checkbox
+};
+//# sourceMappingURL=checkbox.js.map