@acronis-platform/ui-react 0.55.0 → 0.56.1

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

@@ -1,10 +1,10 @@
-import { jsxs as c, jsx as i } from "react/jsx-runtime";
-import * as l from "react";
+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 s } from "../../../lib/utils.js";
-const u = l.forwardRef(
+import { cn as l } from "../../../lib/utils.js";
+const u = s.forwardRef(
   ({ render: e, ...r }, a) => t({
     render: e,
     ref: a,
@@ -13,11 +13,11 @@ const u = l.forwardRef(
   })
 );
 u.displayName = "Breadcrumb";
-const b = l.forwardRef(({ className: e, ...r }, a) => /* @__PURE__ */ i(
+const b = s.forwardRef(({ className: e, ...r }, a) => /* @__PURE__ */ i(
   "ol",
   {
     ref: a,
-    className: s(
+    className: l(
       "flex flex-wrap items-center gap-[var(--ui-breadcrumb-list-gap)] break-words text-sm font-normal leading-6",
       e
     ),
@@ -25,11 +25,11 @@ const b = l.forwardRef(({ className: e, ...r }, a) => /* @__PURE__ */ i(
   }
 ));
 b.displayName = "BreadcrumbList";
-const p = l.forwardRef(({ className: e, ...r }, a) => /* @__PURE__ */ i(
+const p = s.forwardRef(({ className: e, ...r }, a) => /* @__PURE__ */ i(
   "li",
   {
     ref: a,
-    className: s(
+    className: l(
       "inline-flex items-center gap-[var(--ui-breadcrumb-list-gap)]",
       e
     ),
@@ -37,15 +37,15 @@ const p = l.forwardRef(({ className: e, ...r }, a) => /* @__PURE__ */ i(
   }
 ));
 p.displayName = "BreadcrumbItem";
-const f = l.forwardRef(
-  ({ className: e, render: r, ...a }, n) => t({
+const f = s.forwardRef(
+  ({ className: e, render: r, ...a }, c) => t({
     render: r,
-    ref: n,
+    ref: c,
     defaultTagName: "a",
     props: o(
       {
-        className: s(
-          "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)] focus-visible:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-offset-2 ring-offset-background",
+        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
         )
       },
@@ -54,19 +54,19 @@ const f = l.forwardRef(
   })
 );
 f.displayName = "BreadcrumbLink";
-const v = l.forwardRef(({ className: e, ...r }, a) => /* @__PURE__ */ i(
+const v = s.forwardRef(({ className: e, ...r }, a) => /* @__PURE__ */ i(
   "span",
   {
     ref: a,
     role: "link",
     "aria-disabled": "true",
     "aria-current": "page",
-    className: s("text-[var(--ui-breadcrumb-page-label-color)]", e),
+    className: l("text-[var(--ui-breadcrumb-page-label-color)]", e),
     ...r
   }
 ));
 v.displayName = "BreadcrumbPage";
-const g = ({
+const N = ({
   children: e,
   className: r,
   ...a
@@ -75,7 +75,7 @@ const g = ({
   {
     role: "presentation",
     "aria-hidden": "true",
-    className: s(
+    className: l(
       "inline-flex items-center text-[var(--ui-breadcrumb-separator-icon-color)] [&>svg]:size-[var(--ui-breadcrumb-separator-icon-size)]",
       r
     ),
@@ -83,16 +83,16 @@ const g = ({
     children: e ?? /* @__PURE__ */ i(d, { size: 16, className: "rtl:rotate-180" })
   }
 );
-g.displayName = "BreadcrumbSeparator";
-const N = ({
+N.displayName = "BreadcrumbSeparator";
+const g = ({
   className: e,
   ...r
-}) => /* @__PURE__ */ c(
+}) => /* @__PURE__ */ n(
   "span",
   {
     role: "presentation",
     "aria-hidden": "true",
-    className: s(
+    className: l(
       "inline-flex size-4 items-center justify-center text-[var(--ui-breadcrumb-link-label-color-idle)]",
       e
     ),
@@ -103,14 +103,14 @@ const N = ({
     ]
   }
 );
-N.displayName = "BreadcrumbEllipsis";
+g.displayName = "BreadcrumbEllipsis";
 export {
   u as Breadcrumb,
-  N as BreadcrumbEllipsis,
+  g as BreadcrumbEllipsis,
   p as BreadcrumbItem,
   f as BreadcrumbLink,
   b as BreadcrumbList,
   v as BreadcrumbPage,
-  g as BreadcrumbSeparator
+  N as BreadcrumbSeparator
 };
 //# sourceMappingURL=breadcrumb.js.map

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

@@ -1 +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)] focus-visible:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-offset-2 ring-offset-background',\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;"}
+{"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

@@ -1,50 +1,41 @@
-import { jsxs as c, Fragment as v, jsx as u } from "react/jsx-runtime";
-import * as l from "react";
-import { mergeProps as b } from "@base-ui/react/merge-props";
-import { useRender as d } from "@base-ui/react/use-render";
-import { SparklesIcon as s } 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 x } from "../../../lib/utils.js";
-const h = g(
-  "inline-flex h-[var(--ui-button-global-container-height)] 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",
+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)] [&_svg]:text-[var(--ui-button-ghost-icon-color-idle)] hover:text-[var(--ui-button-ghost-label-color-hover)] hover:[&_svg]:text-[var(--ui-button-ghost-icon-color-hover)] active:text-[var(--ui-button-ghost-label-color-active)] active:[&_svg]:text-[var(--ui-button-ghost-icon-color-active)] disabled:text-[var(--ui-button-ghost-label-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-ghost-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)]",
-        inverted: "border min-w-[var(--ui-button-inverted-container-width-min)] px-[var(--ui-button-inverted-container-padding-x)] bg-[var(--ui-button-inverted-container-color-idle)] text-[var(--ui-button-inverted-label-color-idle)] border-[var(--ui-button-inverted-container-border-color-idle)] [&_svg]:text-[var(--ui-button-inverted-icon-color-idle)] hover:bg-[var(--ui-button-inverted-container-color-hover)] hover:text-[var(--ui-button-inverted-label-color-hover)] hover:border-[var(--ui-button-inverted-container-border-color-hover)] hover:[&_svg]:text-[var(--ui-button-inverted-icon-color-hover)] active:bg-[var(--ui-button-inverted-container-color-active)] active:text-[var(--ui-button-inverted-label-color-active)] active:border-[var(--ui-button-inverted-container-border-color-active)] active:[&_svg]:text-[var(--ui-button-inverted-icon-color-active)] disabled:bg-[var(--ui-button-inverted-container-color-disabled)] disabled:text-[var(--ui-button-inverted-label-color-disabled)] disabled:border-[var(--ui-button-inverted-container-border-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-inverted-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"
     }
   }
-), m = l.forwardRef(
-  ({ className: r, variant: t, render: e, children: o, ...i }, a) => {
-    const n = t === "ai" ? /* @__PURE__ */ c(v, { children: [
-      /* @__PURE__ */ u(s, {}),
-      o
-    ] }) : o;
-    return d({
-      render: e,
-      ref: a,
-      defaultTagName: "button",
-      props: b(
-        {
-          className: x(h({ variant: t, className: r })),
-          children: n
-        },
-        i
-      )
-    });
-  }
+), 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
+    )
+  })
 );
-m.displayName = "Button";
+d.displayName = "Button";
 export {
-  m as Button,
-  h as buttonVariants
+  d as Button,
+  b as buttonVariants
 };
 //# sourceMappingURL=button.js.map

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

@@ -1 +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 { SparklesIcon } from '@acronis-platform/icons-react/stroke-mono';\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, Inverted). 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// Only `secondary` and `inverted` draw a 1px container border — they add `border`\n// in their 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)] 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)] [&_svg]:text-[var(--ui-button-ghost-icon-color-idle)] hover:text-[var(--ui-button-ghost-label-color-hover)] hover:[&_svg]:text-[var(--ui-button-ghost-icon-color-hover)] active:text-[var(--ui-button-ghost-label-color-active)] active:[&_svg]:text-[var(--ui-button-ghost-icon-color-active)] disabled:text-[var(--ui-button-ghost-label-color-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        inverted:\n          'border min-w-[var(--ui-button-inverted-container-width-min)] px-[var(--ui-button-inverted-container-padding-x)] bg-[var(--ui-button-inverted-container-color-idle)] text-[var(--ui-button-inverted-label-color-idle)] border-[var(--ui-button-inverted-container-border-color-idle)] [&_svg]:text-[var(--ui-button-inverted-icon-color-idle)] hover:bg-[var(--ui-button-inverted-container-color-hover)] hover:text-[var(--ui-button-inverted-label-color-hover)] hover:border-[var(--ui-button-inverted-container-border-color-hover)] hover:[&_svg]:text-[var(--ui-button-inverted-icon-color-hover)] active:bg-[var(--ui-button-inverted-container-color-active)] active:text-[var(--ui-button-inverted-label-color-active)] active:border-[var(--ui-button-inverted-container-border-color-active)] active:[&_svg]:text-[var(--ui-button-inverted-icon-color-active)] disabled:bg-[var(--ui-button-inverted-container-color-disabled)] disabled:text-[var(--ui-button-inverted-label-color-disabled)] disabled:border-[var(--ui-button-inverted-container-border-color-disabled)] disabled:[&_svg]:text-[var(--ui-button-inverted-icon-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    // The AI variant always leads with the Sparkles icon before its label\n    // (the Figma \"Ai\" button is a Sparkles instance + label).\n    const content =\n      variant === 'ai' ? (\n        <>\n          <SparklesIcon />\n          {children}\n        </>\n      ) : (\n        children\n      );\n    return useRender({\n      render,\n      ref,\n      defaultTagName: 'button',\n      props: mergeProps<'button'>(\n        {\n          className: cn(buttonVariants({ variant, className })),\n          children: content,\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","content","jsxs","Fragment","jsx","SparklesIcon","useRender","mergeProps","cn"],"mappings":";;;;;;;AAiCA,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,QACJ,UACE;AAAA,MAAA;AAAA,IACJ;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,MAAQ;AAG3D,UAAMC,IACJL,MAAY,OACV,gBAAAM,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAa;AAAA,MACbP;AAAA,IAAA,EAAA,CACH,IAEAA;AAEJ,WAAOQ,EAAU;AAAA,MACf,QAAAT;AAAA,MACA,KAAAG;AAAA,MACA,gBAAgB;AAAA,MAChB,OAAOO;AAAA,QACL;AAAA,UACE,WAAWC,EAAGjB,EAAe,EAAE,SAAAK,GAAS,WAAAD,EAAA,CAAW,CAAC;AAAA,UACpD,UAAUM;AAAA,QAAA;AAAA,QAEZF;AAAA,MAAA;AAAA,IACF,CACD;AAAA,EACH;AACF;AACAN,EAAO,cAAc;"}
+{"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

@@ -4,7 +4,7 @@ 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 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",
+  "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: {

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

@@ -1 +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 ' +\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;"}
+{"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/calendar/calendar.js

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

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

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

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

@@ -7,7 +7,7 @@ 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-2 focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:shrink-0",
+  "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)]",