@acronis-platform/ui-react 0.57.0 → 0.58.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"bar-chart.js","sources":["../../../../src/components/ui/bar-chart/bar-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  Bar,\n  BarChart as RechartsBarChart,\n  CartesianGrid,\n  ReferenceLine,\n  XAxis,\n  YAxis,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from '../chart';\n\n// A typed recharts composition over the shared `Chart` primitives. The two CVA\n// axes are the design's Bar-chart variant set (B2): `orientation` (which way the\n// bars grow) and `layout` (grouped side-by-side vs stacked). The classes stay\n// empty because the recharts SVG — not CSS — draws the bars: the same two props\n// drive recharts' `layout` prop, the axis roles, the `stackId`, and the corner\n// radius below. CVA is kept so the variant set is a first-class, spec-conformant\n// part of the API (matched against ui-spec's api.yaml enums) and exposed via\n// `VariantProps`; the resolved values are also mirrored onto `data-orientation`\n// / `data-layout` for styling hooks and tests.\nconst barChartVariants = cva('', {\n  variants: {\n    orientation: {\n      vertical: '',\n      horizontal: '',\n    },\n    layout: {\n      grouped: '',\n      stacked: '',\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n    layout: 'grouped',\n  },\n});\n\nexport interface BarChartReferenceLine {\n  /** Fixed position on the value axis. Takes precedence over `average`. */\n  value?: number;\n  /**\n   * Draw the line at the mean of one series (a `dataKeys` entry) or, when\n   * `true`, of every plotted series' values.\n   */\n  average?: boolean | string;\n  /** Optional caption rendered alongside the line. */\n  label?: string;\n}\n\n/**\n * Resolve a `referenceLine` config to a position on the value axis: a fixed\n * `value` wins; otherwise the mean of the requested series (a single `dataKeys`\n * entry, or all of them when `average` is `true`). Returns `undefined` when\n * there is nothing to draw (no config, or no numeric values to average).\n * Exported for unit tests; not part of the package's public API.\n */\nexport function barChartReferenceValue(\n  referenceLine: BarChartReferenceLine | undefined,\n  data: ReadonlyArray<Record<string, string | number>>,\n  dataKeys: string[]\n): number | undefined {\n  if (!referenceLine) return undefined;\n  if (typeof referenceLine.value === 'number') return referenceLine.value;\n  if (!referenceLine.average) return undefined;\n\n  const keys =\n    typeof referenceLine.average === 'string'\n      ? [referenceLine.average]\n      : dataKeys;\n  const nums = data.flatMap((row) =>\n    keys\n      .map((key) => row[key])\n      .filter((value): value is number => typeof value === 'number')\n  );\n  if (nums.length === 0) return undefined;\n  return nums.reduce((sum, n) => sum + n, 0) / nums.length;\n}\n\nexport interface BarChartProps\n  extends Omit<React.ComponentProps<'div'>, 'children'>,\n    VariantProps<typeof barChartVariants> {\n  /** Row-per-category data. Each object holds the category key + one numeric field per series. */\n  data: ReadonlyArray<Record<string, string | number>>;\n  /**\n   * Per-series map of `label` / `color` (imported from the shared `Chart`\n   * primitives). Series colors are caller-supplied — reference an existing\n   * semantic `--ui-*` token; there is no chart palette tier yet.\n   */\n  config: ChartConfig;\n  /** Series to plot — one `<Bar>` per key. Each must exist in `config` and in every data row. */\n  dataKeys: string[];\n  /** Category axis key (the shared dimension across rows, e.g. `\"month\"`). */\n  xKey: string;\n  /**\n   * One or more dashed reference/average lines on the value axis (Y for vertical\n   * bars, X for horizontal). Each is driven by a fixed `value` or a computed\n   * series `average`. Pass a single object or an array to draw several at once.\n   */\n  referenceLine?: BarChartReferenceLine | BarChartReferenceLine[];\n  /** Title rendered beneath the horizontal (X) axis. */\n  xAxisLabel?: string;\n  /** Title rendered beside the vertical (Y) axis (rotated). */\n  yAxisLabel?: string;\n  /** Unit suffix on X-axis tick values (recharts `unit`) — applies when the X axis is numeric (`orientation=\"horizontal\"`). */\n  xUnit?: string;\n  /** Unit suffix on Y-axis tick values (recharts `unit`) — applies when the Y axis is numeric (`orientation=\"vertical\"`). */\n  yUnit?: string;\n  /** Corner radius applied to the growing end of each bar. */\n  barRadius?: number;\n  showGrid?: boolean;\n  showTooltip?: boolean;\n  showLegend?: boolean;\n  /**\n   * Replace the default tooltip. Pass a configured `ChartTooltipContent`\n   * (imported from this library) — e.g. with a `formatter` / `labelFormatter` /\n   * `indicator` — to customize formatting, per-series rows, or extra fields\n   * without composing recharts yourself. Ignored when `showTooltip` is false.\n   */\n  tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];\n}\n\nconst BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(\n  (\n    {\n      className,\n      config,\n      data,\n      dataKeys,\n      xKey,\n      referenceLine,\n      xAxisLabel,\n      yAxisLabel,\n      xUnit,\n      yUnit,\n      orientation = 'vertical',\n      layout = 'grouped',\n      barRadius = 4,\n      showGrid = true,\n      showTooltip = true,\n      showLegend = true,\n      tooltipContent,\n      ...props\n    },\n    ref\n  ) => {\n    // Our `orientation` is bar-direction; recharts' `layout` is the opposite axis.\n    const rechartsLayout = orientation === 'horizontal' ? 'vertical' : 'horizontal';\n    const isStacked = layout === 'stacked';\n\n    const referenceLines = referenceLine\n      ? Array.isArray(referenceLine)\n        ? referenceLine\n        : [referenceLine]\n      : [];\n\n    // Axis titles: the X title sits below the ticks; the Y title is rotated in\n    // the left gutter. Passed to recharts' native `label` (themed via the\n    // `.recharts-label` fill selector on the container).\n    const xAxisTitle = xAxisLabel\n      ? { value: xAxisLabel, position: 'insideBottom' as const, offset: 0 }\n      : undefined;\n    const yAxisTitle = yAxisLabel\n      ? {\n          value: yAxisLabel,\n          angle: -90,\n          position: 'insideLeft' as const,\n          style: { textAnchor: 'middle' as const },\n        }\n      : undefined;\n\n    // Round only the growing end: top for vertical bars, right for horizontal.\n    const endRadius: [number, number, number, number] =\n      orientation === 'horizontal'\n        ? [0, barRadius, barRadius, 0]\n        : [barRadius, barRadius, 0, 0];\n\n    return (\n      <div\n        ref={ref}\n        data-orientation={orientation}\n        data-layout={layout}\n        className={cn(barChartVariants({ orientation, layout }), className)}\n        {...props}\n      >\n        <ChartContainer\n          config={config}\n          className=\"size-full [&_.recharts-label]:fill-foreground\"\n        >\n          <RechartsBarChart data={data as readonly unknown[]} layout={rechartsLayout}>\n            {showGrid && (\n              <CartesianGrid\n                horizontal={orientation === 'vertical'}\n                vertical={orientation === 'horizontal'}\n              />\n            )}\n            {orientation === 'horizontal' ? (\n              <>\n                <XAxis\n                  type=\"number\"\n                  tickLine={false}\n                  axisLine={false}\n                  unit={xUnit}\n                  height={xAxisLabel ? 48 : undefined}\n                  label={xAxisTitle}\n                />\n                <YAxis\n                  dataKey={xKey}\n                  type=\"category\"\n                  tickLine={false}\n                  axisLine={false}\n                  width={yAxisLabel ? 96 : 80}\n                  label={yAxisTitle}\n                />\n              </>\n            ) : (\n              <>\n                <XAxis\n                  dataKey={xKey}\n                  type=\"category\"\n                  tickLine={false}\n                  axisLine={false}\n                  height={xAxisLabel ? 48 : undefined}\n                  label={xAxisTitle}\n                />\n                <YAxis\n                  type=\"number\"\n                  tickLine={false}\n                  axisLine={false}\n                  unit={yUnit}\n                  width={yAxisLabel ? 72 : undefined}\n                  label={yAxisTitle}\n                />\n              </>\n            )}\n            {showTooltip && (\n              <ChartTooltip content={tooltipContent ?? <ChartTooltipContent />} />\n            )}\n            {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n            {dataKeys.map((key, index) => {\n              // In a stack only the last segment's end is rounded; grouped bars\n              // each round their own end.\n              const rounded = isStacked ? index === dataKeys.length - 1 : true;\n              return (\n                <Bar\n                  key={key}\n                  dataKey={key}\n                  fill={`var(--color-${key})`}\n                  stackId={isStacked ? 'a' : undefined}\n                  radius={barRadius > 0 && rounded ? endRadius : undefined}\n                  isAnimationActive={false}\n                />\n              );\n            })}\n            {referenceLines.map((ref, index) => {\n              const value = barChartReferenceValue(ref, data, dataKeys);\n              if (value === undefined) return null;\n              return (\n                <ReferenceLine\n                  key={`${ref.label ?? 'ref'}-${index}`}\n                  // Draw on the value axis: Y for vertical bars, X for horizontal.\n                  {...(orientation === 'horizontal' ? { x: value } : { y: value })}\n                  stroke=\"var(--ui-text-on-surface-secondary)\"\n                  strokeDasharray=\"4 4\"\n                  // extendDomain so a target beyond the data max stays visible.\n                  ifOverflow=\"extendDomain\"\n                  label={\n                    ref.label\n                      ? {\n                          value: ref.label,\n                          // Sit the caption at the top of the line: above the\n                          // right end of a horizontal line (vertical bars), or\n                          // above the top of a vertical line (horizontal bars).\n                          position:\n                            orientation === 'horizontal'\n                              ? 'top'\n                              : 'insideTopRight',\n                          fill: 'var(--ui-text-on-surface-secondary)',\n                          fontSize: 12,\n                        }\n                      : undefined\n                  }\n                />\n              );\n            })}\n          </RechartsBarChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nBarChart.displayName = 'BarChart';\n\nexport { BarChart, barChartVariants };\n"],"names":["barChartVariants","cva","barChartReferenceValue","referenceLine","data","dataKeys","keys","nums","row","key","value","sum","n","BarChart","React","className","config","xKey","xAxisLabel","yAxisLabel","xUnit","yUnit","orientation","layout","barRadius","showGrid","showTooltip","showLegend","tooltipContent","props","ref","rechartsLayout","isStacked","referenceLines","xAxisTitle","yAxisTitle","endRadius","jsx","cn","ChartContainer","jsxs","RechartsBarChart","CartesianGrid","Fragment","XAxis","YAxis","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","index","rounded","Bar","ReferenceLine"],"mappings":"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"}

package/dist/components/ui/breadcrumb/breadcrumb.js

@@ -0,0 +1,116 @@
+import { jsxs as n, jsx as i } from "react/jsx-runtime";
+import * as s from "react";
+import { mergeProps as o } from "@base-ui/react/merge-props";
+import { useRender as t } from "@base-ui/react/use-render";
+import { EllipsisIcon as m, ChevronRightIcon as d } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as l } from "../../../lib/utils.js";
+const u = s.forwardRef(
+  ({ render: e, ...r }, a) => t({
+    render: e,
+    ref: a,
+    defaultTagName: "nav",
+    props: o({ "aria-label": "breadcrumb" }, r)
+  })
+);
+u.displayName = "Breadcrumb";
+const b = s.forwardRef(({ className: e, ...r }, a) => /* @__PURE__ */ i(
+  "ol",
+  {
+    ref: a,
+    className: l(
+      "flex flex-wrap items-center gap-[var(--ui-breadcrumb-list-gap)] break-words text-sm font-normal leading-6",
+      e
+    ),
+    ...r
+  }
+));
+b.displayName = "BreadcrumbList";
+const p = s.forwardRef(({ className: e, ...r }, a) => /* @__PURE__ */ i(
+  "li",
+  {
+    ref: a,
+    className: l(
+      "inline-flex items-center gap-[var(--ui-breadcrumb-list-gap)]",
+      e
+    ),
+    ...r
+  }
+));
+p.displayName = "BreadcrumbItem";
+const f = s.forwardRef(
+  ({ className: e, render: r, ...a }, c) => t({
+    render: r,
+    ref: c,
+    defaultTagName: "a",
+    props: o(
+      {
+        className: l(
+          "rounded-sm text-[var(--ui-breadcrumb-link-label-color-idle)] no-underline transition-colors hover:text-[var(--ui-breadcrumb-link-label-color-hover)] hover:underline active:text-[var(--ui-breadcrumb-link-label-color-active)] active:no-underline focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]",
+          e
+        )
+      },
+      a
+    )
+  })
+);
+f.displayName = "BreadcrumbLink";
+const v = s.forwardRef(({ className: e, ...r }, a) => /* @__PURE__ */ i(
+  "span",
+  {
+    ref: a,
+    role: "link",
+    "aria-disabled": "true",
+    "aria-current": "page",
+    className: l("text-[var(--ui-breadcrumb-page-label-color)]", e),
+    ...r
+  }
+));
+v.displayName = "BreadcrumbPage";
+const N = ({
+  children: e,
+  className: r,
+  ...a
+}) => /* @__PURE__ */ i(
+  "li",
+  {
+    role: "presentation",
+    "aria-hidden": "true",
+    className: l(
+      "inline-flex items-center text-[var(--ui-breadcrumb-separator-icon-color)] [&>svg]:size-[var(--ui-breadcrumb-separator-icon-size)]",
+      r
+    ),
+    ...a,
+    children: e ?? /* @__PURE__ */ i(d, { size: 16, className: "rtl:rotate-180" })
+  }
+);
+N.displayName = "BreadcrumbSeparator";
+const g = ({
+  className: e,
+  ...r
+}) => /* @__PURE__ */ n(
+  "span",
+  {
+    role: "presentation",
+    "aria-hidden": "true",
+    className: l(
+      "inline-flex size-4 items-center justify-center text-[var(--ui-breadcrumb-link-label-color-idle)]",
+      e
+    ),
+    ...r,
+    children: [
+      /* @__PURE__ */ i(m, { size: 16 }),
+      /* @__PURE__ */ i("span", { className: "sr-only", children: "More" })
+    ]
+  }
+);
+g.displayName = "BreadcrumbEllipsis";
+export {
+  u as Breadcrumb,
+  g as BreadcrumbEllipsis,
+  p as BreadcrumbItem,
+  f as BreadcrumbLink,
+  b as BreadcrumbList,
+  v as BreadcrumbPage,
+  N as BreadcrumbSeparator
+};
+//# sourceMappingURL=breadcrumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.js","sources":["../../../../src/components/ui/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { ChevronRightIcon, EllipsisIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Composable breadcrumb primitives mirroring the Figma \"Breadcrumb\" component.\n// Colors are wired to the next-gen `--ui-breadcrumb-*` tokens from\n// @acronis-platform/tokens-pd: links use `--ui-breadcrumb-link-label-color-<state>`\n// (idle gray, darkening on hover/active), the current page uses\n// `--ui-breadcrumb-page-label-color`, and the chevron separator uses\n// `--ui-breadcrumb-separator-icon-color` sized by `--ui-breadcrumb-separator-icon-size`\n// (16px). The inter-item gap is `--ui-breadcrumb-list-gap` (4px). Type is\n// 14px / 24px line-height to match the design's `body/default`.\n\nexport interface BreadcrumbProps extends React.ComponentPropsWithoutRef<'nav'> {\n  /**\n   * Replace the rendered `<nav>` with another element or component\n   * (Base UI composition). Accepts a React element or a render function.\n   */\n  render?: useRender.RenderProp;\n}\n\nconst Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(\n  ({ render, ...props }, ref) => {\n    return useRender({\n      render,\n      ref,\n      defaultTagName: 'nav',\n      props: mergeProps<'nav'>({ 'aria-label': 'breadcrumb' }, props),\n    });\n  }\n);\nBreadcrumb.displayName = 'Breadcrumb';\n\nconst BreadcrumbList = React.forwardRef<\n  HTMLOListElement,\n  React.ComponentPropsWithoutRef<'ol'>\n>(({ className, ...props }, ref) => (\n  <ol\n    ref={ref}\n    className={cn(\n      'flex flex-wrap items-center gap-[var(--ui-breadcrumb-list-gap)] break-words text-sm font-normal leading-6',\n      className\n    )}\n    {...props}\n  />\n));\nBreadcrumbList.displayName = 'BreadcrumbList';\n\nconst BreadcrumbItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentPropsWithoutRef<'li'>\n>(({ className, ...props }, ref) => (\n  <li\n    ref={ref}\n    className={cn(\n      'inline-flex items-center gap-[var(--ui-breadcrumb-list-gap)]',\n      className\n    )}\n    {...props}\n  />\n));\nBreadcrumbItem.displayName = 'BreadcrumbItem';\n\nexport interface BreadcrumbLinkProps\n  extends React.ComponentPropsWithoutRef<'a'> {\n  /**\n   * Replace the rendered `<a>` with another element or component (e.g. a\n   * router `Link`) via Base UI composition.\n   */\n  render?: useRender.RenderProp;\n}\n\nconst BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(\n  ({ className, render, ...props }, ref) => {\n    return useRender({\n      render,\n      ref,\n      defaultTagName: 'a',\n      props: mergeProps<'a'>(\n        {\n          className: cn(\n            'rounded-sm text-[var(--ui-breadcrumb-link-label-color-idle)] no-underline transition-colors hover:text-[var(--ui-breadcrumb-link-label-color-hover)] hover:underline active:text-[var(--ui-breadcrumb-link-label-color-active)] active:no-underline focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]',\n            className\n          ),\n        },\n        props\n      ),\n    });\n  }\n);\nBreadcrumbLink.displayName = 'BreadcrumbLink';\n\nconst BreadcrumbPage = React.forwardRef<\n  HTMLSpanElement,\n  React.ComponentPropsWithoutRef<'span'>\n>(({ className, ...props }, ref) => (\n  <span\n    ref={ref}\n    role=\"link\"\n    aria-disabled=\"true\"\n    aria-current=\"page\"\n    className={cn('text-[var(--ui-breadcrumb-page-label-color)]', className)}\n    {...props}\n  />\n));\nBreadcrumbPage.displayName = 'BreadcrumbPage';\n\nconst BreadcrumbSeparator = ({\n  children,\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<'li'>) => (\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn(\n      'inline-flex items-center text-[var(--ui-breadcrumb-separator-icon-color)] [&>svg]:size-[var(--ui-breadcrumb-separator-icon-size)]',\n      className\n    )}\n    {...props}\n  >\n    {children ?? <ChevronRightIcon size={16} className=\"rtl:rotate-180\" />}\n  </li>\n);\nBreadcrumbSeparator.displayName = 'BreadcrumbSeparator';\n\nconst BreadcrumbEllipsis = ({\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<'span'>) => (\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn(\n      'inline-flex size-4 items-center justify-center text-[var(--ui-breadcrumb-link-label-color-idle)]',\n      className\n    )}\n    {...props}\n  >\n    <EllipsisIcon size={16} />\n    <span className=\"sr-only\">More</span>\n  </span>\n);\nBreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis';\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n};\n"],"names":["Breadcrumb","React","render","props","ref","useRender","mergeProps","BreadcrumbList","className","jsx","cn","BreadcrumbItem","BreadcrumbLink","BreadcrumbPage","BreadcrumbSeparator","children","ChevronRightIcon","BreadcrumbEllipsis","jsxs","EllipsisIcon"],"mappings":";;;;;;AAwBA,MAAMA,IAAaC,EAAM;AAAA,EACvB,CAAC,EAAE,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MACdC,EAAU;AAAA,IACf,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE,EAAkB,EAAE,cAAc,aAAA,GAAgBH,CAAK;AAAA,EAAA,CAC/D;AAEL;AACAH,EAAW,cAAc;AAEzB,MAAMO,IAAiBN,EAAM,WAG3B,CAAC,EAAE,WAAAO,GAAW,GAAGL,EAAA,GAASC,MAC1B,gBAAAK;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAL;AAAA,IACA,WAAWM;AAAA,MACT;AAAA,MACAF;AAAA,IAAA;AAAA,IAED,GAAGL;AAAA,EAAA;AACN,CACD;AACDI,EAAe,cAAc;AAE7B,MAAMI,IAAiBV,EAAM,WAG3B,CAAC,EAAE,WAAAO,GAAW,GAAGL,EAAA,GAASC,MAC1B,gBAAAK;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAL;AAAA,IACA,WAAWM;AAAA,MACT;AAAA,MACAF;AAAA,IAAA;AAAA,IAED,GAAGL;AAAA,EAAA;AACN,CACD;AACDQ,EAAe,cAAc;AAW7B,MAAMC,IAAiBX,EAAM;AAAA,EAC3B,CAAC,EAAE,WAAAO,GAAW,QAAAN,GAAQ,GAAGC,EAAA,GAASC,MACzBC,EAAU;AAAA,IACf,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL;AAAA,QACE,WAAWI;AAAA,UACT;AAAA,UACAF;AAAA,QAAA;AAAA,MACF;AAAA,MAEFL;AAAA,IAAA;AAAA,EACF,CACD;AAEL;AACAS,EAAe,cAAc;AAE7B,MAAMC,IAAiBZ,EAAM,WAG3B,CAAC,EAAE,WAAAO,GAAW,GAAGL,EAAA,GAASC,MAC1B,gBAAAK;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAL;AAAA,IACA,MAAK;AAAA,IACL,iBAAc;AAAA,IACd,gBAAa;AAAA,IACb,WAAWM,EAAG,gDAAgDF,CAAS;AAAA,IACtE,GAAGL;AAAA,EAAA;AACN,CACD;AACDU,EAAe,cAAc;AAE7B,MAAMC,IAAsB,CAAC;AAAA,EAC3B,UAAAC;AAAA,EACA,WAAAP;AAAA,EACA,GAAGL;AACL,MACE,gBAAAM;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,eAAY;AAAA,IACZ,WAAWC;AAAA,MACT;AAAA,MACAF;AAAA,IAAA;AAAA,IAED,GAAGL;AAAA,IAEH,eAAY,gBAAAM,EAACO,GAAA,EAAiB,MAAM,IAAI,WAAU,iBAAA,CAAiB;AAAA,EAAA;AACtE;AAEFF,EAAoB,cAAc;AAElC,MAAMG,IAAqB,CAAC;AAAA,EAC1B,WAAAT;AAAA,EACA,GAAGL;AACL,MACE,gBAAAe;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,eAAY;AAAA,IACZ,WAAWR;AAAA,MACT;AAAA,MACAF;AAAA,IAAA;AAAA,IAED,GAAGL;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAM,EAACU,GAAA,EAAa,MAAM,GAAA,CAAI;AAAA,MACxB,gBAAAV,EAAC,QAAA,EAAK,WAAU,WAAU,UAAA,OAAA,CAAI;AAAA,IAAA;AAAA,EAAA;AAChC;AAEFQ,EAAmB,cAAc;"}

package/dist/components/ui/button/button.js

@@ -0,0 +1,41 @@
+import * as n from "react";
+import { mergeProps as c } from "@base-ui/react/merge-props";
+import { useRender as u } from "@base-ui/react/use-render";
+import { cva as v } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { cn as l } from "../../../lib/utils.js";
+const b = v(
+  "inline-flex h-[var(--ui-button-global-container-height)] cursor-pointer items-center justify-center gap-[var(--ui-button-global-container-gap)] whitespace-nowrap rounded-[var(--ui-button-global-container-border-radius)] text-sm font-semibold leading-6 transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-[var(--ui-button-global-icon-size)] [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "min-w-[var(--ui-button-primary-container-width-min)] px-[var(--ui-button-primary-container-padding-x)] bg-[var(--ui-button-primary-container-color-idle)] text-[var(--ui-button-primary-label-color-idle)] [&_svg]:text-[var(--ui-button-primary-icon-color-idle)] hover:bg-[var(--ui-button-primary-container-color-hover)] hover:text-[var(--ui-button-primary-label-color-hover)] hover:[&_svg]:text-[var(--ui-button-primary-icon-color-hover)] active:bg-[var(--ui-button-primary-container-color-active)] active:text-[var(--ui-button-primary-label-color-active)] active:[&_svg]:text-[var(--ui-button-primary-icon-color-active)] disabled:bg-[var(--ui-button-primary-container-color-disabled)] disabled:text-[var(--ui-button-primary-label-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-primary-icon-color-disabled)]",
+        secondary: "border min-w-[var(--ui-button-secondary-container-width-min)] px-[var(--ui-button-secondary-container-padding-x)] bg-[var(--ui-button-secondary-container-color-idle)] text-[var(--ui-button-secondary-label-color-idle)] border-[var(--ui-button-secondary-container-border-color-idle)] [&_svg]:text-[var(--ui-button-secondary-icon-color-idle)] hover:bg-[var(--ui-button-secondary-container-color-hover)] hover:text-[var(--ui-button-secondary-label-color-hover)] hover:border-[var(--ui-button-secondary-container-border-color-hover)] hover:[&_svg]:text-[var(--ui-button-secondary-icon-color-hover)] active:bg-[var(--ui-button-secondary-container-color-active)] active:text-[var(--ui-button-secondary-label-color-active)] active:border-[var(--ui-button-secondary-container-border-color-active)] active:[&_svg]:text-[var(--ui-button-secondary-icon-color-active)] disabled:bg-[var(--ui-button-secondary-container-color-disabled)] disabled:text-[var(--ui-button-secondary-label-color-disabled)] disabled:border-[var(--ui-button-secondary-container-border-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-secondary-icon-color-disabled)]",
+        ghost: "px-[var(--ui-button-ghost-container-padding-x)] text-[var(--ui-button-ghost-label-color-idle)] [text-decoration-line:var(--ui-button-ghost-label-text-decoration-idle)] [&_svg]:text-[var(--ui-button-ghost-icon-color-idle)] hover:text-[var(--ui-button-ghost-label-color-hover)] hover:[text-decoration-line:var(--ui-button-ghost-label-text-decoration-hover)] hover:[&_svg]:text-[var(--ui-button-ghost-icon-color-hover)] active:text-[var(--ui-button-ghost-label-color-active)] active:[text-decoration-line:var(--ui-button-ghost-label-text-decoration-active)] active:[&_svg]:text-[var(--ui-button-ghost-icon-color-active)] disabled:text-[var(--ui-button-ghost-label-color-disabled)] disabled:[text-decoration-line:var(--ui-button-ghost-label-text-decoration-disabled)] disabled:[&_svg]:text-[var(--ui-button-ghost-icon-color-disabled)]",
+        destructive: "min-w-[var(--ui-button-destructive-container-width-min)] px-[var(--ui-button-destructive-container-padding-x)] bg-[var(--ui-button-destructive-container-color-idle)] text-[var(--ui-button-destructive-label-color-idle)] [&_svg]:text-[var(--ui-button-destructive-icon-color-idle)] hover:bg-[var(--ui-button-destructive-container-color-hover)] hover:text-[var(--ui-button-destructive-label-color-hover)] hover:[&_svg]:text-[var(--ui-button-destructive-icon-color-hover)] active:bg-[var(--ui-button-destructive-container-color-active)] active:text-[var(--ui-button-destructive-label-color-active)] active:[&_svg]:text-[var(--ui-button-destructive-icon-color-active)] disabled:bg-[var(--ui-button-destructive-container-color-disabled)] disabled:text-[var(--ui-button-destructive-label-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-destructive-icon-color-disabled)]",
+        ai: "min-w-[var(--ui-button-ai-container-width-min)] px-[var(--ui-button-ai-container-padding-x)] bg-origin-border text-[var(--ui-button-ai-label-color-idle)] [&_svg]:text-[var(--ui-button-ai-icon-color-idle)] [background-image:var(--ui-button-ai-container-color-idle)] hover:text-[var(--ui-button-ai-label-color-hover)] hover:[&_svg]:text-[var(--ui-button-ai-icon-color-hover)] hover:[background-image:var(--ui-button-ai-container-color-hover)] active:text-[var(--ui-button-ai-label-color-active)] active:[&_svg]:text-[var(--ui-button-ai-icon-color-active)] active:[background-image:var(--ui-button-ai-container-color-active)] disabled:text-[var(--ui-button-ai-label-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-ai-icon-color-disabled)] disabled:[background-image:var(--ui-button-ai-container-color-disabled)]"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+), d = n.forwardRef(
+  ({ className: t, variant: o, render: r, children: e, ...i }, a) => u({
+    render: r,
+    ref: a,
+    defaultTagName: "button",
+    props: c(
+      {
+        className: l(b({ variant: o, className: t })),
+        children: e
+      },
+      i
+    )
+  })
+);
+d.displayName = "Button";
+export {
+  d as Button,
+  b as buttonVariants
+};
+//# sourceMappingURL=button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sources":["../../../../src/components/ui/button/button.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// Variants mirror the Figma \"Button\" component's `Variant` property (Primary,\n// Secondary, Link→ghost, Destructive, Ai). Each interaction state\n// (idle / hover / active / disabled) wires the container fill, label, icon, and\n// — for the variants that have one — the border to its own dedicated\n// `--ui-button-*` token from @acronis-platform/tokens-pd. Every state is wired\n// explicitly — even where acronis's value is unchanged — because these are\n// runtime `var()` references: a brand override is only honored if the matching\n// state token is referenced. The icon color is wired separately from the label\n// because the next-gen tier diverges the two on hover/active for `secondary` and\n// `ghost` (the icon keeps the brighter blue while the label darkens). Disabled\n// uses the design's explicit disabled tokens (not opacity); the focus ring uses\n// the `--ui-focus-*` tokens.\n//\n// Geometry is now tokenized: the shared box metrics (32px height, 8px gap, 4px\n// radius, 16px icon) come from `--ui-button-global-container-*` / `-icon-size`,\n// while padding-x and min-width are per-variant — `ghost` has 0 padding-x and no\n// min-width (it reads as an inline link), every other variant has 12px / 64px.\n// `ghost` is the only variant that decorates its label: each state's\n// `text-decoration-line` is wired to its own `--ui-button-ghost-label-text-decoration-*`\n// token (underline on hover, none otherwise), so a hovered ghost underlines and a\n// pressed one does not — the `:active` token wins over `:hover` on press. Every\n// variant shows `cursor: pointer`.\n// Only `secondary` draws a 1px container border — it adds `border`\n// in its own class so the design's 12px horizontal padding sits inside it. The\n// other variants have NO border (the Figma draws none), so their `px` is measured\n// from the box edge and matches the design exactly (no stray 1px from a\n// transparent border). The `ai` variant paints its gradient via `background-image`.\n//\n// Focus: the Figma focus state is a 3px `--ui-focus-primary` ring flush to the\n// button edge (no offset) — `ring-[3px]`, no `ring-offset`.\nconst buttonVariants = cva(\n  'inline-flex h-[var(--ui-button-global-container-height)] cursor-pointer items-center justify-center gap-[var(--ui-button-global-container-gap)] whitespace-nowrap rounded-[var(--ui-button-global-container-border-radius)] text-sm font-semibold leading-6 transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-[var(--ui-button-global-icon-size)] [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default:\n          'min-w-[var(--ui-button-primary-container-width-min)] px-[var(--ui-button-primary-container-padding-x)] bg-[var(--ui-button-primary-container-color-idle)] text-[var(--ui-button-primary-label-color-idle)] [&_svg]:text-[var(--ui-button-primary-icon-color-idle)] hover:bg-[var(--ui-button-primary-container-color-hover)] hover:text-[var(--ui-button-primary-label-color-hover)] hover:[&_svg]:text-[var(--ui-button-primary-icon-color-hover)] active:bg-[var(--ui-button-primary-container-color-active)] active:text-[var(--ui-button-primary-label-color-active)] active:[&_svg]:text-[var(--ui-button-primary-icon-color-active)] disabled:bg-[var(--ui-button-primary-container-color-disabled)] disabled:text-[var(--ui-button-primary-label-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-primary-icon-color-disabled)]',\n        secondary:\n          'border min-w-[var(--ui-button-secondary-container-width-min)] px-[var(--ui-button-secondary-container-padding-x)] bg-[var(--ui-button-secondary-container-color-idle)] text-[var(--ui-button-secondary-label-color-idle)] border-[var(--ui-button-secondary-container-border-color-idle)] [&_svg]:text-[var(--ui-button-secondary-icon-color-idle)] hover:bg-[var(--ui-button-secondary-container-color-hover)] hover:text-[var(--ui-button-secondary-label-color-hover)] hover:border-[var(--ui-button-secondary-container-border-color-hover)] hover:[&_svg]:text-[var(--ui-button-secondary-icon-color-hover)] active:bg-[var(--ui-button-secondary-container-color-active)] active:text-[var(--ui-button-secondary-label-color-active)] active:border-[var(--ui-button-secondary-container-border-color-active)] active:[&_svg]:text-[var(--ui-button-secondary-icon-color-active)] disabled:bg-[var(--ui-button-secondary-container-color-disabled)] disabled:text-[var(--ui-button-secondary-label-color-disabled)] disabled:border-[var(--ui-button-secondary-container-border-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-secondary-icon-color-disabled)]',\n        ghost:\n          'px-[var(--ui-button-ghost-container-padding-x)] text-[var(--ui-button-ghost-label-color-idle)] [text-decoration-line:var(--ui-button-ghost-label-text-decoration-idle)] [&_svg]:text-[var(--ui-button-ghost-icon-color-idle)] hover:text-[var(--ui-button-ghost-label-color-hover)] hover:[text-decoration-line:var(--ui-button-ghost-label-text-decoration-hover)] hover:[&_svg]:text-[var(--ui-button-ghost-icon-color-hover)] active:text-[var(--ui-button-ghost-label-color-active)] active:[text-decoration-line:var(--ui-button-ghost-label-text-decoration-active)] active:[&_svg]:text-[var(--ui-button-ghost-icon-color-active)] disabled:text-[var(--ui-button-ghost-label-color-disabled)] disabled:[text-decoration-line:var(--ui-button-ghost-label-text-decoration-disabled)] disabled:[&_svg]:text-[var(--ui-button-ghost-icon-color-disabled)]',\n        destructive:\n          'min-w-[var(--ui-button-destructive-container-width-min)] px-[var(--ui-button-destructive-container-padding-x)] bg-[var(--ui-button-destructive-container-color-idle)] text-[var(--ui-button-destructive-label-color-idle)] [&_svg]:text-[var(--ui-button-destructive-icon-color-idle)] hover:bg-[var(--ui-button-destructive-container-color-hover)] hover:text-[var(--ui-button-destructive-label-color-hover)] hover:[&_svg]:text-[var(--ui-button-destructive-icon-color-hover)] active:bg-[var(--ui-button-destructive-container-color-active)] active:text-[var(--ui-button-destructive-label-color-active)] active:[&_svg]:text-[var(--ui-button-destructive-icon-color-active)] disabled:bg-[var(--ui-button-destructive-container-color-disabled)] disabled:text-[var(--ui-button-destructive-label-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-destructive-icon-color-disabled)]',\n        ai: 'min-w-[var(--ui-button-ai-container-width-min)] px-[var(--ui-button-ai-container-padding-x)] bg-origin-border text-[var(--ui-button-ai-label-color-idle)] [&_svg]:text-[var(--ui-button-ai-icon-color-idle)] [background-image:var(--ui-button-ai-container-color-idle)] hover:text-[var(--ui-button-ai-label-color-hover)] hover:[&_svg]:text-[var(--ui-button-ai-icon-color-hover)] hover:[background-image:var(--ui-button-ai-container-color-hover)] active:text-[var(--ui-button-ai-label-color-active)] active:[&_svg]:text-[var(--ui-button-ai-icon-color-active)] active:[background-image:var(--ui-button-ai-container-color-active)] disabled:text-[var(--ui-button-ai-label-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-ai-icon-color-disabled)] disabled:[background-image:var(--ui-button-ai-container-color-disabled)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }\n);\n\nexport interface ButtonProps\n  extends\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  /**\n   * Replace the rendered `<button>` with another element or component\n   * (Base UI composition). Accepts a React element or a render function —\n   * the component's props and class names are merged onto it.\n   */\n  render?: useRender.RenderProp;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, render, children, ...props }, ref) => {\n    return useRender({\n      render,\n      ref,\n      defaultTagName: 'button',\n      props: mergeProps<'button'>(\n        {\n          className: cn(buttonVariants({ variant, className })),\n          children,\n        },\n        props\n      ),\n    });\n  }\n);\nButton.displayName = 'Button';\n\nexport { Button, buttonVariants };\n"],"names":["buttonVariants","cva","Button","React","className","variant","render","children","props","ref","useRender","mergeProps","cn"],"mappings":";;;;;AAqCA,MAAMA,IAAiBC;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,WACE;AAAA,QACF,OACE;AAAA,QACF,aACE;AAAA,QACF,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GAcMC,IAASC,EAAM;AAAA,EACnB,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,QAAAC,GAAQ,UAAAC,GAAU,GAAGC,EAAA,GAASC,MAC5CC,EAAU;AAAA,IACf,QAAAJ;AAAA,IACA,KAAAG;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL;AAAA,QACE,WAAWC,EAAGZ,EAAe,EAAE,SAAAK,GAAS,WAAAD,EAAA,CAAW,CAAC;AAAA,QACpD,UAAAG;AAAA,MAAA;AAAA,MAEFC;AAAA,IAAA;AAAA,EACF,CACD;AAEL;AACAN,EAAO,cAAc;"}

package/dist/components/ui/button-icon/button-icon.js

@@ -0,0 +1,35 @@
+import * as e from "react";
+import { mergeProps as a } from "@base-ui/react/merge-props";
+import { useRender as c } from "@base-ui/react/use-render";
+import { cva as l } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { cn as b } from "../../../lib/utils.js";
+const s = l(
+  "inline-flex size-[var(--ui-button-icon-global-container-height)] shrink-0 items-center justify-center rounded-[var(--ui-button-icon-global-container-border-radius)] transition-colors cursor-pointer bg-[var(--ui-button-icon-global-container-color-idle)] text-[var(--ui-button-icon-global-icon-color-idle)] hover:bg-[var(--ui-button-icon-global-container-color-hover)] hover:text-[var(--ui-button-icon-global-icon-color-hover)] active:bg-[var(--ui-button-icon-global-container-color-active)] active:text-[var(--ui-button-icon-global-icon-color-active)] disabled:pointer-events-none disabled:bg-[var(--ui-button-icon-global-container-color-disabled)] disabled:text-[var(--ui-button-icon-global-icon-color-disabled)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:pointer-events-none [&_svg]:size-[var(--ui-button-icon-global-icon-size)] [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        ghost: "",
+        secondary: "border border-[var(--ui-button-icon-secondary-container-border-color-idle)] hover:border-[var(--ui-button-icon-secondary-container-border-color-hover)] active:border-[var(--ui-button-icon-secondary-container-border-color-active)] disabled:border-[var(--ui-button-icon-secondary-container-border-color-disabled)]"
+      }
+    },
+    defaultVariants: {
+      variant: "ghost"
+    }
+  }
+), u = e.forwardRef(
+  ({ className: o, variant: r, render: n, ...i }, t) => c({
+    render: n,
+    ref: t,
+    defaultTagName: "button",
+    props: a(
+      { className: b(s({ variant: r, className: o })) },
+      i
+    )
+  })
+);
+u.displayName = "ButtonIcon";
+export {
+  u as ButtonIcon,
+  s as buttonIconVariants
+};
+//# sourceMappingURL=button-icon.js.map

package/dist/components/ui/button-icon/button-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-icon.js","sources":["../../../../src/components/ui/button-icon/button-icon.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 \"ButtonIcon\" component set: an icon-only button (square 32px\n// box, 24px glyph centered → the design's 4px padding) with a `variant` property\n// (`ghost` / `secondary`) and idle / hover / active / disabled states. The\n// container fill and the glyph color are shared across both variants and come\n// from the `--ui-button-icon-global-*` tokens; only `secondary` draws a 1px\n// container border (it adds `border` in its own class), from the\n// `--ui-button-icon-secondary-container-border-color-*` tokens — `ghost` has no\n// border (the Figma draws none). Each interaction state is wired to its own token\n// (runtime `var()` references, so brand overrides are honored). Box geometry —\n// 32px height, 4px radius, 24px icon — comes from the `global-container-*` /\n// `global-icon-size` tokens. Like Button, disabled uses the design's explicit\n// disabled tokens (not opacity), and the focus state is a 3px `--ui-focus-primary`\n// ring flush to the edge (no offset), matching the Figma.\nconst buttonIconVariants = cva(\n  'inline-flex size-[var(--ui-button-icon-global-container-height)] shrink-0 items-center justify-center rounded-[var(--ui-button-icon-global-container-border-radius)] transition-colors cursor-pointer ' +\n    'bg-[var(--ui-button-icon-global-container-color-idle)] text-[var(--ui-button-icon-global-icon-color-idle)] ' +\n    'hover:bg-[var(--ui-button-icon-global-container-color-hover)] hover:text-[var(--ui-button-icon-global-icon-color-hover)] ' +\n    'active:bg-[var(--ui-button-icon-global-container-color-active)] active:text-[var(--ui-button-icon-global-icon-color-active)] ' +\n    'disabled:pointer-events-none disabled:bg-[var(--ui-button-icon-global-container-color-disabled)] disabled:text-[var(--ui-button-icon-global-icon-color-disabled)] ' +\n    'focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] ' +\n    '[&_svg]:pointer-events-none [&_svg]:size-[var(--ui-button-icon-global-icon-size)] [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        ghost: '',\n        secondary:\n          'border border-[var(--ui-button-icon-secondary-container-border-color-idle)] hover:border-[var(--ui-button-icon-secondary-container-border-color-hover)] active:border-[var(--ui-button-icon-secondary-container-border-color-active)] disabled:border-[var(--ui-button-icon-secondary-container-border-color-disabled)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'ghost',\n    },\n  }\n);\n\nexport interface ButtonIconProps\n  extends\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonIconVariants> {\n  /**\n   * Replace the rendered `<button>` with another element or component\n   * (Base UI composition). Accepts a React element or a render function —\n   * the component's props and class names are merged onto it.\n   */\n  render?: useRender.RenderProp;\n}\n\n/**\n * Icon-only button. The icon is passed as `children`; provide an `aria-label`\n * (or `aria-labelledby`) so the control has an accessible name.\n */\nconst ButtonIcon = React.forwardRef<HTMLButtonElement, ButtonIconProps>(\n  ({ className, variant, render, ...props }, ref) => {\n    return useRender({\n      render,\n      ref,\n      defaultTagName: 'button',\n      props: mergeProps<'button'>(\n        { className: cn(buttonIconVariants({ variant, className })) },\n        props\n      ),\n    });\n  }\n);\nButtonIcon.displayName = 'ButtonIcon';\n\nexport { ButtonIcon, buttonIconVariants };\n"],"names":["buttonIconVariants","cva","ButtonIcon","React","className","variant","render","props","ref","useRender","mergeProps","cn"],"mappings":";;;;;AAoBA,MAAMA,IAAqBC;AAAA,EACzB;AAAA,EAOA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,OAAO;AAAA,QACP,WACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GAkBMC,IAAaC,EAAM;AAAA,EACvB,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAClCC,EAAU;AAAA,IACf,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL,EAAE,WAAWC,EAAGX,EAAmB,EAAE,SAAAK,GAAS,WAAAD,EAAA,CAAW,CAAC,EAAA;AAAA,MAC1DG;AAAA,IAAA;AAAA,EACF,CACD;AAEL;AACAL,EAAW,cAAc;"}

package/dist/components/ui/button-icon-input/button-icon-input.js

@@ -0,0 +1,36 @@
+import * as e from "react";
+import { mergeProps as a } from "@base-ui/react/merge-props";
+import { useRender as u } from "@base-ui/react/use-render";
+import { cva as c } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { cn as l } from "../../../lib/utils.js";
+const v = c(
+  "inline-flex size-[var(--ui-button-icon-input-global-container-width)] shrink-0 items-center justify-center rounded-[var(--ui-button-icon-input-global-container-border-radius)] outline-none transition-colors cursor-pointer disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-[var(--ui-button-icon-input-normal-container-color-disabled)] disabled:text-[var(--ui-button-icon-input-normal-icon-color-disabled)] focus-visible:ring-[3px] [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        normal: "bg-[var(--ui-button-icon-input-normal-container-color-idle)] text-[var(--ui-button-icon-input-normal-icon-color-idle)] hover:bg-[var(--ui-button-icon-input-normal-container-color-hover)] hover:text-[var(--ui-button-icon-input-normal-icon-color-hover)] active:bg-[var(--ui-button-icon-input-normal-container-color-active)] active:text-[var(--ui-button-icon-input-normal-icon-color-active)] focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-[var(--ui-button-icon-input-normal-icon-size)]",
+        error: "bg-[var(--ui-button-icon-input-error-container-color-idle)] text-[var(--ui-button-icon-input-error-icon-color-idle)] hover:bg-[var(--ui-button-icon-input-error-container-color-hover)] hover:text-[var(--ui-button-icon-input-error-icon-color-hover)] active:bg-[var(--ui-button-icon-input-error-container-color-active)] active:text-[var(--ui-button-icon-input-error-icon-color-active)] focus-visible:ring-[var(--ui-focus-error)] [&_svg]:size-[var(--ui-button-icon-input-error-icon-size)]"
+      }
+    },
+    defaultVariants: {
+      variant: "normal"
+    }
+  }
+), s = e.forwardRef(({ className: o, variant: n, render: r, ...i }, t) => u({
+  render: r,
+  ref: t,
+  defaultTagName: "button",
+  props: a(
+    {
+      type: "button",
+      className: l(v({ variant: n, className: o }))
+    },
+    i
+  )
+}));
+s.displayName = "ButtonIconInput";
+export {
+  s as ButtonIconInput,
+  v as buttonIconInputVariants
+};
+//# sourceMappingURL=button-icon-input.js.map

package/dist/components/ui/button-icon-input/button-icon-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-icon-input.js","sources":["../../../../src/components/ui/button-icon-input/button-icon-input.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 \"ButtonIconInput\" component set: a smaller icon-only\n// button (20px box, 16px glyph) meant to live inside an input's box (e.g. the\n// clear/reveal affordance), as opposed to `ButtonIcon`'s standalone 32px/24px\n// sizing. `variant` (`normal` / `error`) picks the field's tone — `error`\n// mirrors the input's error-state red — and each interaction state\n// (idle/hover/active) is wired to its own `--ui-button-icon-input-*` token per\n// variant (they use distinct tokens, not a shared `global` tier like\n// `ButtonIcon`). The Figma set has no `disabled` variant for `error` (only\n// `normal` does), so disabled always uses the `normal` disabled tokens\n// regardless of `variant` — there's no dead-token fallback here, just the one\n// disabled treatment the design actually defines. Focus is a 3px ring —\n// `--ui-focus-primary` for `normal`, `--ui-focus-error` for `error` —\n// matching the field it sits in.\nconst buttonIconInputVariants = cva(\n  'inline-flex size-[var(--ui-button-icon-input-global-container-width)] shrink-0 items-center justify-center rounded-[var(--ui-button-icon-input-global-container-border-radius)] outline-none transition-colors cursor-pointer disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-[var(--ui-button-icon-input-normal-container-color-disabled)] disabled:text-[var(--ui-button-icon-input-normal-icon-color-disabled)] focus-visible:ring-[3px] [&_svg]:pointer-events-none [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        normal:\n          'bg-[var(--ui-button-icon-input-normal-container-color-idle)] text-[var(--ui-button-icon-input-normal-icon-color-idle)] hover:bg-[var(--ui-button-icon-input-normal-container-color-hover)] hover:text-[var(--ui-button-icon-input-normal-icon-color-hover)] active:bg-[var(--ui-button-icon-input-normal-container-color-active)] active:text-[var(--ui-button-icon-input-normal-icon-color-active)] focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-[var(--ui-button-icon-input-normal-icon-size)]',\n        error:\n          'bg-[var(--ui-button-icon-input-error-container-color-idle)] text-[var(--ui-button-icon-input-error-icon-color-idle)] hover:bg-[var(--ui-button-icon-input-error-container-color-hover)] hover:text-[var(--ui-button-icon-input-error-icon-color-hover)] active:bg-[var(--ui-button-icon-input-error-container-color-active)] active:text-[var(--ui-button-icon-input-error-icon-color-active)] focus-visible:ring-[var(--ui-focus-error)] [&_svg]:size-[var(--ui-button-icon-input-error-icon-size)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'normal',\n    },\n  }\n);\n\nexport interface ButtonIconInputProps\n  extends\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonIconInputVariants> {\n  /**\n   * Replace the rendered `<button>` with another element or component\n   * (Base UI composition). Accepts a React element or a render function —\n   * the component's props and class names are merged onto it.\n   */\n  render?: useRender.RenderProp;\n}\n\n/**\n * Small icon-only button meant to sit inside an input's box. The icon is\n * passed as `children`; provide an `aria-label` (or `aria-labelledby`) so the\n * control has an accessible name.\n */\nconst ButtonIconInput = React.forwardRef<\n  HTMLButtonElement,\n  ButtonIconInputProps\n>(({ className, variant, render, ...props }, ref) => {\n  return useRender({\n    render,\n    ref,\n    defaultTagName: 'button',\n    props: mergeProps<'button'>(\n      {\n        type: 'button',\n        className: cn(buttonIconInputVariants({ variant, className })),\n      },\n      props\n    ),\n  });\n});\nButtonIconInput.displayName = 'ButtonIconInput';\n\nexport { ButtonIconInput, buttonIconInputVariants };\n"],"names":["buttonIconInputVariants","cva","ButtonIconInput","React","className","variant","render","props","ref","useRender","mergeProps","cn"],"mappings":";;;;;AAoBA,MAAMA,IAA0BC;AAAA,EAC9B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,QACE;AAAA,QACF,OACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GAmBMC,IAAkBC,EAAM,WAG5B,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MACpCC,EAAU;AAAA,EACf,QAAAH;AAAA,EACA,KAAAE;AAAA,EACA,gBAAgB;AAAA,EAChB,OAAOE;AAAA,IACL;AAAA,MACE,MAAM;AAAA,MACN,WAAWC,EAAGX,EAAwB,EAAE,SAAAK,GAAS,WAAAD,EAAA,CAAW,CAAC;AAAA,IAAA;AAAA,IAE/DG;AAAA,EAAA;AACF,CACD,CACF;AACDL,EAAgB,cAAc;"}

package/dist/components/ui/button-menu/button-menu.js

@@ -0,0 +1,52 @@
+import { jsxs as c, Fragment as b, jsx as d } from "react/jsx-runtime";
+import * as l from "react";
+import { mergeProps as v } from "@base-ui/react/merge-props";
+import { useRender as s } from "@base-ui/react/use-render";
+import { ChevronUpIcon as m, ChevronDownIcon as p } from "@acronis-platform/icons-react/stroke-mono";
+import { cva as g } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { cn as y } from "../../../lib/utils.js";
+const h = g(
+  "inline-flex h-[var(--ui-button-menu-global-container-height)] min-w-[var(--ui-button-menu-global-container-width-min)] cursor-pointer items-center justify-center gap-[var(--ui-button-menu-global-container-gap)] whitespace-nowrap rounded-[var(--ui-button-menu-global-container-border-radius)] border border-transparent px-[var(--ui-button-menu-global-container-padding-x)] text-sm font-semibold leading-6 transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-[var(--ui-button-menu-global-icon-size)] [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        primary: "bg-[var(--ui-button-menu-primary-container-color-idle)] text-[var(--ui-button-menu-primary-label-color)] [&_svg]:text-[var(--ui-button-menu-primary-icon-color)] hover:bg-[var(--ui-button-menu-primary-container-color-hover)] active:bg-[var(--ui-button-menu-primary-container-color-active)] data-[open]:bg-[var(--ui-button-menu-primary-container-color-active)] disabled:bg-[var(--ui-button-menu-primary-container-color-disabled)]",
+        secondary: "bg-[var(--ui-button-menu-secondary-container-color-idle)] text-[var(--ui-button-menu-secondary-label-color-idle)] border-[var(--ui-button-menu-secondary-container-border-color-idle)] [&_svg]:text-[var(--ui-button-menu-secondary-icon-color-idle)] hover:bg-[var(--ui-button-menu-secondary-container-color-hover)] hover:text-[var(--ui-button-menu-secondary-label-color-hover)] hover:border-[var(--ui-button-menu-secondary-container-border-color-hover)] hover:[&_svg]:text-[var(--ui-button-menu-secondary-icon-color-hover)] active:bg-[var(--ui-button-menu-secondary-container-color-active)] active:text-[var(--ui-button-menu-secondary-label-color-active)] active:border-[var(--ui-button-menu-secondary-container-border-color-active)] active:[&_svg]:text-[var(--ui-button-menu-secondary-icon-color-active)] data-[open]:bg-[var(--ui-button-menu-secondary-container-color-active)] data-[open]:text-[var(--ui-button-menu-secondary-label-color-active)] data-[open]:border-[var(--ui-button-menu-secondary-container-border-color-active)] data-[open]:[&_svg]:text-[var(--ui-button-menu-secondary-icon-color-active)] disabled:bg-[var(--ui-button-menu-secondary-container-color-disabled)] disabled:text-[var(--ui-button-menu-secondary-label-color-disabled)] disabled:border-[var(--ui-button-menu-secondary-container-border-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-menu-secondary-icon-color-disabled)]"
+      }
+    },
+    defaultVariants: {
+      variant: "primary"
+    }
+  }
+), x = l.forwardRef(
+  ({ className: r, variant: e, open: o, render: n, children: t, ...a }, i) => {
+    const u = o ? m : p;
+    return s({
+      render: n,
+      ref: i,
+      defaultTagName: "button",
+      props: v(
+        {
+          className: y(h({ variant: e, className: r })),
+          "aria-expanded": o,
+          // `data-open` drives the open (`*-active`) token switch via attribute
+          // selectors; present only while open, and typed loosely because
+          // React's button attribute map doesn't include arbitrary data-* keys
+          // as literals.
+          ...o ? { "data-open": "" } : {},
+          children: /* @__PURE__ */ c(b, { children: [
+            t,
+            /* @__PURE__ */ d(u, {})
+          ] })
+        },
+        a
+      )
+    });
+  }
+);
+x.displayName = "ButtonMenu";
+export {
+  x as ButtonMenu,
+  h as buttonMenuVariants
+};
+//# sourceMappingURL=button-menu.js.map

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

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

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

@@ -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