@acronis-platform/ui-react 0.21.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Acronis International GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,72 @@
+# @acronis-platform/ui-react
+
+The next-generation Acronis React component library — a **Base UI**
+implementation, themed by [`@acronis-platform/tokens-pd`](../tokens-pd)
+(generated from [`@acronis-platform/design-tokens`](../design-tokens)).
+
+> Early days: this package is being built out component by component. See
+> [`AGENTS.md`](./AGENTS.md) for conventions.
+
+## Install
+
+```sh
+pnpm add @acronis-platform/ui-react react react-dom
+```
+
+## Usage
+
+```tsx
+import '@acronis-platform/ui-react/styles';
+import { Button, Switch } from '@acronis-platform/ui-react';
+
+export function Example() {
+  return (
+    <div>
+      <Button variant="default">Save</Button>
+      <Switch defaultChecked />
+    </div>
+  );
+}
+```
+
+Toggle dark mode by adding the `dark` class to an ancestor element.
+
+## Fonts
+
+The design tokens use **Inter** as the default family, and the generated CSS
+emits a graceful fallback stack (`font-family: Inter, system-ui, sans-serif`).
+The library deliberately **does not bundle the font** — loading it is the
+consumer's choice, so you control hosting, subsets, and weights.
+
+To render in Inter, self-host it (recommended — no third-party CDN, GDPR-safe).
+[`@fontsource/inter`](https://fontsource.org/fonts/inter) (SIL Open Font
+License) is the simplest route:
+
+```sh
+pnpm add @fontsource/inter
+```
+
+```tsx
+// Load only the weights you use (the typography scale uses 400/500/600/700).
+import '@fontsource/inter/400.css';
+import '@fontsource/inter/500.css';
+import '@fontsource/inter/600.css';
+import '@fontsource/inter/700.css';
+
+import '@acronis-platform/ui-react/styles';
+```
+
+> The static `@fontsource/inter` registers the family as `Inter`, which matches
+> the token output. The variable package `@fontsource-variable/inter` registers
+> `Inter Variable` instead, so it won't match `font-family: Inter` without an
+> extra alias — prefer the static package unless you add that mapping yourself.
+
+If you skip this step, text falls back to `system-ui` / the platform sans-serif.
+
+## Develop
+
+```sh
+pnpm --filter @acronis-platform/ui-react storybook   # explore components
+pnpm --filter @acronis-platform/ui-react test        # Vitest + RTL
+pnpm --filter @acronis-platform/ui-react build       # library bundle + types
+```

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

@@ -0,0 +1,116 @@
+import { jsx as i, jsxs as c } from "react/jsx-runtime";
+import * as l from "react";
+import { mergeProps as o } from "@base-ui/react/merge-props";
+import { useRender as n } 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(
+  ({ render: e, ...r }, a) => n({
+    render: e,
+    ref: a,
+    defaultTagName: "nav",
+    props: o({ "aria-label": "breadcrumb" }, r)
+  })
+);
+u.displayName = "Breadcrumb";
+const b = l.forwardRef(({ className: e, ...r }, a) => /* @__PURE__ */ i(
+  "ol",
+  {
+    ref: a,
+    className: s(
+      "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 = l.forwardRef(({ className: e, ...r }, a) => /* @__PURE__ */ i(
+  "li",
+  {
+    ref: a,
+    className: s(
+      "inline-flex items-center gap-[var(--ui-breadcrumb-list-gap)]",
+      e
+    ),
+    ...r
+  }
+));
+p.displayName = "BreadcrumbItem";
+const f = l.forwardRef(
+  ({ className: e, render: r, ...a }, t) => n({
+    render: r,
+    ref: t,
+    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",
+          e
+        )
+      },
+      a
+    )
+  })
+);
+f.displayName = "BreadcrumbLink";
+const v = l.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),
+    ...r
+  }
+));
+v.displayName = "BreadcrumbPage";
+const g = ({
+  children: e,
+  className: r,
+  ...a
+}) => /* @__PURE__ */ i(
+  "li",
+  {
+    role: "presentation",
+    "aria-hidden": "true",
+    className: s(
+      "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 })
+  }
+);
+g.displayName = "BreadcrumbSeparator";
+const N = ({
+  className: e,
+  ...r
+}) => /* @__PURE__ */ c(
+  "span",
+  {
+    role: "presentation",
+    "aria-hidden": "true",
+    className: s(
+      "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" })
+    ]
+  }
+);
+N.displayName = "BreadcrumbEllipsis";
+export {
+  u as Breadcrumb,
+  N as BreadcrumbEllipsis,
+  p as BreadcrumbItem,
+  f as BreadcrumbLink,
+  b as BreadcrumbList,
+  v as BreadcrumbPage,
+  g 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)] 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} />}\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,UAAAY,KAAY,gBAAAN,EAACO,GAAA,EAAiB,MAAM,GAAA,CAAI;AAAA,EAAA;AAC3C;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,50 @@
+import { jsxs as c, Fragment as v, jsx as u } from "react/jsx-runtime";
+import * as b from "react";
+import { mergeProps as l } 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)] border border-transparent text-sm font-semibold leading-6 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-offset-2 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: "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)]",
+        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: "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)]"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+), m = b.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: l(
+        {
+          className: x(h({ variant: t, className: r })),
+          children: n
+        },
+        i
+      )
+    });
+  }
+);
+m.displayName = "Button";
+export {
+  m as Button,
+  h 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 { 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` define a container border (1px); the rest paint\n// a transparent border so the box geometry stays identical across variants. The\n// `ai` variant paints its gradient container via `background-image` and sets\n// `bg-origin-border` so it covers the (transparent) 1px border box.\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)] border border-transparent text-sm font-semibold leading-6 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-offset-2 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          '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          '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":";;;;;;;AA6BA,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;"}

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

@@ -0,0 +1,52 @@
+import { jsxs as c, Fragment as d, jsx as b } from "react/jsx-runtime";
+import * as l from "react";
+import { mergeProps as s } from "@base-ui/react/merge-props";
+import { useRender as v } 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 f = g(
+  "inline-flex h-[var(--ui-button-menu-global-container-height)] min-w-[var(--ui-button-menu-global-container-width-min)] items-center justify-center gap-[var(--ui-button-menu-global-container-gap)] whitespace-nowrap rounded-[var(--ui-button-menu-global-container-border-radius)] border border-transparent px-[var(--ui-button-menu-global-container-padding-x)] text-sm font-semibold leading-6 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-offset-2 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"
+    }
+  }
+), h = l.forwardRef(
+  ({ className: r, variant: e, open: o, render: n, children: t, ...a }, i) => {
+    const u = o ? m : p;
+    return v({
+      render: n,
+      ref: i,
+      defaultTagName: "button",
+      props: s(
+        {
+          className: y(f({ 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(d, { children: [
+            t,
+            /* @__PURE__ */ b(u, {})
+          ] })
+        },
+        a
+      )
+    });
+  }
+);
+h.displayName = "ButtonDropdown";
+export {
+  h as ButtonDropdown,
+  f as buttonDropdownVariants
+};
+//# sourceMappingURL=button-dropdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button-dropdown.js","sources":["../../../../src/components/ui/button-dropdown/button-dropdown.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 \"ButtonDropdown\" 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) and the\n// focus ring uses `--ui-focus-*`.\nconst buttonDropdownVariants = cva(\n  'inline-flex h-[var(--ui-button-menu-global-container-height)] min-w-[var(--ui-button-menu-global-container-width-min)] items-center justify-center gap-[var(--ui-button-menu-global-container-gap)] whitespace-nowrap rounded-[var(--ui-button-menu-global-container-border-radius)] border border-transparent px-[var(--ui-button-menu-global-container-padding-x)] text-sm font-semibold leading-6 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-offset-2 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 ButtonDropdownProps\n  extends\n    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>,\n    VariantProps<typeof buttonDropdownVariants> {\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 ButtonDropdown = React.forwardRef<HTMLButtonElement, ButtonDropdownProps>(\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(buttonDropdownVariants({ 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);\nButtonDropdown.displayName = 'ButtonDropdown';\n\nexport { ButtonDropdown, buttonDropdownVariants };\n"],"names":["buttonDropdownVariants","cva","ButtonDropdown","React","className","variant","open","render","children","props","ref","Chevron","ChevronUpIcon","ChevronDownIcon","useRender","mergeProps","cn","jsxs","Fragment"],"mappings":";;;;;;;AA0BA,MAAMA,IAAyBC;AAAA,EAC7B;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,IAAiBC,EAAM;AAAA,EAC3B,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,EAAuB,EAAE,SAAAK,GAAS,WAAAD,EAAA,CAAW,CAAC;AAAA,UAC5D,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,EAAe,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 b } 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 s = b(
+  "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)] border border-transparent 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)] ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-offset-2 [&_svg]:pointer-events-none [&_svg]:size-[var(--ui-button-icon-global-icon-size)] [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        ghost: "",
+        secondary: "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: l(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, 16px glyph) with a `variant` property (`ghost` / `secondary`) and idle /\n// hover / active / disabled states. The container fill and the glyph color are\n// shared across both variants and come from the `--ui-button-icon-global-*`\n// tokens; `secondary` additionally paints a 1px container border from the\n// `--ui-button-icon-secondary-container-border-color-*` tokens, while `ghost`\n// leaves the (transparent) border so the box geometry stays identical across\n// variants. Each interaction state is wired to its own token (runtime `var()`\n// references, so brand overrides are honored). Box geometry — 32px height, 4px\n// radius, 16px icon — comes from the `global-container-*` / `global-icon-size`\n// tokens. Like Button, disabled uses the design's explicit disabled tokens (not\n// opacity) and the focus ring uses `--ui-focus-*`.\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)] border border-transparent 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    'ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-offset-2 ' +\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-[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":";;;;;AAmBA,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/checkbox/checkbox.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sources":["../../../../src/components/ui/checkbox/checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\nimport {\n  CheckIcon,\n  MinusIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Wraps Base UI's Checkbox primitive, themed by the dedicated next-gen\n// `--ui-checkbox-*` token tier from @acronis-platform/tokens-pd. The box has three\n// logical states — `unchecked` (the base), `checked`, and `indeterminate` — each\n// with its own per-interaction (idle / hover / active / disabled) fill\n// (`*-box-color-*`), border (`*-box-border-color-*`), and glyph (`*-icon-color-*`)\n// tokens. `unchecked` is the base layer (lowest specificity); `data-[checked]` /\n// `data-[indeterminate]` override it (Base UI marks an indeterminate box with both\n// data-unchecked AND data-indeterminate, so the single-attribute overrides win on\n// specificity), and `data-[disabled]:data-[<state>]` overrides those in turn. The\n// glyph (check when checked, minus when indeterminate) inherits the Root's text\n// color via the Indicator's `text-current`. Box geometry (16px size, 2px radius)\n// comes from `--ui-checkbox-global-box-*`; the focus ring uses `--ui-focus-primary`.\n//\n// An optional `label` / `description` compose the full Figma field: the box, an\n// optional label, and an optional description stacked beside it. When either is\n// present the whole row is a `<label>` (so clicking the text toggles the box — a\n// Base UI checkbox renders a labelable <button>), the box gets a top margin of\n// `--ui-checkbox-global-box-margin-x` (4px = (line-height 24 − box 16) / 2, the\n// design's box alignment margin) to center it on the first text line, and the\n// box is wired to the text via aria-labelledby / aria-describedby. With neither,\n// the box renders on its own (name it with `aria-label`).\nconst boxClasses = [\n  // geometry + focus ring\n  '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 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:shrink-0',\n  // unchecked (base): idle / hover / active\n  'bg-[var(--ui-checkbox-unchecked-box-color-idle)] border-[var(--ui-checkbox-unchecked-box-border-color-idle)]',\n  '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)]',\n  'not-data-[disabled]:active:bg-[var(--ui-checkbox-unchecked-box-color-active)] not-data-[disabled]:active:border-[var(--ui-checkbox-unchecked-box-border-color-active)]',\n  // checked: idle / hover / active\n  'data-[checked]:bg-[var(--ui-checkbox-checked-box-color-idle)] data-[checked]:border-[var(--ui-checkbox-checked-box-border-color-idle)] data-[checked]:text-[var(--ui-checkbox-checked-icon-color-idle)]',\n  'data-[checked]:not-data-[disabled]:hover:bg-[var(--ui-checkbox-checked-box-color-hover)] data-[checked]:not-data-[disabled]:hover:border-[var(--ui-checkbox-checked-box-border-color-hover)] data-[checked]:not-data-[disabled]:hover:text-[var(--ui-checkbox-checked-icon-color-hover)]',\n  'data-[checked]:not-data-[disabled]:active:bg-[var(--ui-checkbox-checked-box-color-active)] data-[checked]:not-data-[disabled]:active:border-[var(--ui-checkbox-checked-box-border-color-active)] data-[checked]:not-data-[disabled]:active:text-[var(--ui-checkbox-checked-icon-color-active)]',\n  // indeterminate: idle / hover / active\n  'data-[indeterminate]:bg-[var(--ui-checkbox-indeterminate-box-color-idle)] data-[indeterminate]:border-[var(--ui-checkbox-indeterminate-box-border-color-idle)] data-[indeterminate]:text-[var(--ui-checkbox-indeterminate-icon-color-idle)]',\n  'data-[indeterminate]:not-data-[disabled]:hover:bg-[var(--ui-checkbox-indeterminate-box-color-hover)] data-[indeterminate]:not-data-[disabled]:hover:border-[var(--ui-checkbox-indeterminate-box-border-color-hover)] data-[indeterminate]:not-data-[disabled]:hover:text-[var(--ui-checkbox-indeterminate-icon-color-hover)]',\n  'data-[indeterminate]:not-data-[disabled]:active:bg-[var(--ui-checkbox-indeterminate-box-color-active)] data-[indeterminate]:not-data-[disabled]:active:border-[var(--ui-checkbox-indeterminate-box-border-color-active)] data-[indeterminate]:not-data-[disabled]:active:text-[var(--ui-checkbox-indeterminate-icon-color-active)]',\n  // disabled (unchecked base + per-state overrides)\n  'data-[disabled]:cursor-not-allowed data-[disabled]:bg-[var(--ui-checkbox-unchecked-box-color-disabled)] data-[disabled]:border-[var(--ui-checkbox-unchecked-box-border-color-disabled)]',\n  'data-[disabled]:data-[checked]:bg-[var(--ui-checkbox-checked-box-color-disabled)] data-[disabled]:data-[checked]:border-[var(--ui-checkbox-checked-box-border-color-disabled)] data-[disabled]:data-[checked]:text-[var(--ui-checkbox-checked-icon-color-disabled)]',\n  'data-[disabled]:data-[indeterminate]:bg-[var(--ui-checkbox-indeterminate-box-color-disabled)] data-[disabled]:data-[indeterminate]:border-[var(--ui-checkbox-indeterminate-box-border-color-disabled)] data-[disabled]:data-[indeterminate]:text-[var(--ui-checkbox-indeterminate-icon-color-disabled)]',\n].join(' ');\n\nexport interface CheckboxProps\n  extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {\n  /** Optional label rendered beside the box; names the control. */\n  label?: React.ReactNode;\n  /** Optional secondary description rendered under the label. */\n  description?: React.ReactNode;\n}\n\nconst Checkbox = React.forwardRef<\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n>(({ className, label, description, indeterminate, ...props }, ref) => {\n  const reactId = React.useId();\n  const labelId = label != null ? `${reactId}-label` : undefined;\n  const descriptionId = description != null ? `${reactId}-description` : undefined;\n  const hasContent = label != null || description != null;\n\n  const box = (\n    <CheckboxPrimitive.Root\n      ref={ref}\n      indeterminate={indeterminate}\n      aria-labelledby={labelId}\n      aria-describedby={descriptionId}\n      className={cn(\n        boxClasses,\n        hasContent && 'mt-[var(--ui-checkbox-global-box-margin-x)]',\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator className=\"flex items-center justify-center text-current\">\n        {indeterminate ? <MinusIcon size={16} /> : <CheckIcon size={16} />}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n\n  if (!hasContent) return box;\n\n  return (\n    <label className=\"inline-flex max-w-[var(--ui-checkbox-global-container-width-max)] min-w-[var(--ui-checkbox-global-container-width-min)] cursor-pointer items-start gap-[var(--ui-checkbox-global-container-gap)]\">\n      {box}\n      <span className=\"flex max-w-[var(--ui-checkbox-global-container-content-width-max)] flex-col gap-[var(--ui-checkbox-global-container-content-gap)]\">\n        {label != null && (\n          <span\n            id={labelId}\n            className=\"text-sm leading-6 font-normal text-[var(--ui-checkbox-global-label-color)]\"\n          >\n            {label}\n          </span>\n        )}\n        {description != null && (\n          <span\n            id={descriptionId}\n            className=\"text-sm leading-6 font-normal text-[var(--ui-checkbox-global-description-color)]\"\n          >\n            {description}\n          </span>\n        )}\n      </span>\n    </label>\n  );\n});\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox };\n"],"names":["boxClasses","Checkbox","React","className","label","description","indeterminate","props","ref","reactId","labelId","descriptionId","hasContent","box","jsx","CheckboxPrimitive","cn","MinusIcon","CheckIcon","jsxs"],"mappings":";;;;;AA8BA,MAAMA,IAAa;AAAA;AAAA,EAEjB;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG,GAUJC,IAAWC,EAAM,WAGrB,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,aAAAC,GAAa,eAAAC,GAAe,GAAGC,EAAA,GAASC,MAAQ;AACrE,QAAMC,IAAUP,EAAM,MAAA,GAChBQ,IAAUN,KAAS,OAAO,GAAGK,CAAO,WAAW,QAC/CE,IAAgBN,KAAe,OAAO,GAAGI,CAAO,iBAAiB,QACjEG,IAAaR,KAAS,QAAQC,KAAe,MAE7CQ,IACJ,gBAAAC;AAAA,IAACC,EAAkB;AAAA,IAAlB;AAAA,MACC,KAAAP;AAAA,MACA,eAAAF;AAAA,MACA,mBAAiBI;AAAA,MACjB,oBAAkBC;AAAA,MAClB,WAAWK;AAAA,QACThB;AAAA,QACAY,KAAc;AAAA,QACdT;AAAA,MAAA;AAAA,MAED,GAAGI;AAAA,MAEJ,4BAACQ,EAAkB,WAAlB,EAA4B,WAAU,iDACpC,UAAAT,IAAgB,gBAAAQ,EAACG,GAAA,EAAU,MAAM,IAAI,IAAK,gBAAAH,EAACI,GAAA,EAAU,MAAM,IAAI,EAAA,CAClE;AAAA,IAAA;AAAA,EAAA;AAIJ,SAAKN,IAGH,gBAAAO,EAAC,SAAA,EAAM,WAAU,oMACd,UAAA;AAAA,IAAAN;AAAA,IACD,gBAAAM,EAAC,QAAA,EAAK,WAAU,qIACb,UAAA;AAAA,MAAAf,KAAS,QACR,gBAAAU;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIJ;AAAA,UACJ,WAAU;AAAA,UAET,UAAAN;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJC,KAAe,QACd,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIH;AAAA,UACJ,WAAU;AAAA,UAET,UAAAN;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,EAAA,CAEJ;AAAA,EAAA,GACF,IAvBsBQ;AAyB1B,CAAC;AACDZ,EAAS,cAAc;"}

package/dist/components/ui/input/input.js

@@ -0,0 +1,22 @@
+import { jsx as l } from "react/jsx-runtime";
+import * as t from "react";
+import { cn as a } from "../../../lib/utils.js";
+const d = t.forwardRef(
+  ({ className: r, type: o = "text", ...i }, e) => /* @__PURE__ */ l(
+    "input",
+    {
+      ref: e,
+      type: o,
+      className: a(
+        "h-[var(--ui-input-text-global-box-height)] w-full min-w-0 rounded-[var(--ui-input-text-global-box-border-radius)] border bg-[var(--ui-input-text-global-box-color-idle)] border-[var(--ui-input-text-normal-box-border-color-idle)] px-[var(--ui-input-text-global-box-padding-x)] text-sm leading-6 text-[var(--ui-input-text-global-value-color-idle)] transition-colors placeholder:text-[var(--ui-input-text-global-placeholder-color-idle)] focus-visible:outline-none focus-visible:ring-[3px] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-text-normal-box-border-color-hover)] enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-text-global-box-color-hover)] not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-text-normal-box-border-color-hover)] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)] aria-[invalid=true]:border-[var(--ui-input-text-error-msg-box-border-color-idle)] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)] disabled:cursor-not-allowed disabled:border-[var(--ui-input-text-normal-box-border-color-disabled)] disabled:bg-[var(--ui-input-text-global-box-color-disabled)] disabled:text-[var(--ui-input-text-global-value-color-disabled)] disabled:placeholder:text-[var(--ui-input-text-global-placeholder-color-disabled)]",
+        r
+      ),
+      ...i
+    }
+  )
+);
+d.displayName = "Input";
+export {
+  d as Input
+};
+//# sourceMappingURL=input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sources":["../../../../src/components/ui/input/input.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// A single-line text input, themed by the dedicated next-gen `--ui-input-text-*`\n// token tier from @acronis-platform/tokens-pd. The box fill (`global-box-color-*`)\n// and the normal border (`normal-box-border-color-*`) are wired per state: idle /\n// hover / focus / disabled. The `normal-box-border-color-*` tier has no `-active`,\n// so focus reuses `-hover` for the border, paired with a 3px `--ui-focus-primary`\n// ring. Value and placeholder text use `global-value-color-*` /\n// `global-placeholder-color-*`. The error state is driven by `aria-invalid` —\n// `error-msg-box-border-color-*` border and, on focus, a `--ui-focus-error` ring —\n// scoped with `not-aria-[invalid]` so it wins over the hover/focus border. Box\n// geometry (32px height, 4px radius, 12px padding-x) comes from\n// `--ui-input-text-global-box-*`. Label, description, and error message are\n// composed by the consumer (a Field component is future work).\nexport type InputProps = React.ComponentPropsWithoutRef<'input'>;\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type = 'text', ...props }, ref) => (\n    <input\n      ref={ref}\n      type={type}\n      className={cn(\n        'h-[var(--ui-input-text-global-box-height)] w-full min-w-0 rounded-[var(--ui-input-text-global-box-border-radius)] border bg-[var(--ui-input-text-global-box-color-idle)] border-[var(--ui-input-text-normal-box-border-color-idle)] px-[var(--ui-input-text-global-box-padding-x)] text-sm leading-6 text-[var(--ui-input-text-global-value-color-idle)] transition-colors placeholder:text-[var(--ui-input-text-global-placeholder-color-idle)] focus-visible:outline-none focus-visible:ring-[3px] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-text-normal-box-border-color-hover)] enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-text-global-box-color-hover)] not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-text-normal-box-border-color-hover)] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)] aria-[invalid=true]:border-[var(--ui-input-text-error-msg-box-border-color-idle)] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)] disabled:cursor-not-allowed disabled:border-[var(--ui-input-text-normal-box-border-color-disabled)] disabled:bg-[var(--ui-input-text-global-box-color-disabled)] disabled:text-[var(--ui-input-text-global-value-color-disabled)] disabled:placeholder:text-[var(--ui-input-text-global-placeholder-color-disabled)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nInput.displayName = 'Input';\n\nexport { Input };\n"],"names":["Input","React","className","type","props","ref","jsx","cn"],"mappings":";;;AAkBA,MAAMA,IAAQC,EAAM;AAAA,EAClB,CAAC,EAAE,WAAAC,GAAW,MAAAC,IAAO,QAAQ,GAAGC,EAAA,GAASC,MACvC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,MAAAF;AAAA,MACA,WAAWI;AAAA,QACT;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV;AACAJ,EAAM,cAAc;"}

package/dist/components/ui/input-text-area/input-text-area.js

@@ -0,0 +1,21 @@
+import { jsx as i } from "react/jsx-runtime";
+import * as o from "react";
+import { cn as t } from "../../../lib/utils.js";
+const l = o.forwardRef(
+  ({ className: e, ...r }, a) => /* @__PURE__ */ i(
+    "textarea",
+    {
+      ref: a,
+      className: t(
+        "min-h-[var(--ui-input-text-area-box-height-min)] w-full min-w-0 resize-y rounded-[var(--ui-input-text-area-box-border-radius)] border bg-[var(--ui-input-text-area-box-color-idle)] border-[var(--ui-input-text-area-border-color-idle)] px-[var(--ui-input-text-area-box-padding-x)] py-[var(--ui-input-text-area-box-padding-y)] text-sm leading-6 text-[var(--ui-input-text-area-value-color-idle)] transition-colors placeholder:text-[var(--ui-input-text-area-placeholder-color-idle)] focus-visible:outline-none focus-visible:ring-[3px] enabled:hover:bg-[var(--ui-input-text-area-box-color-hover)] enabled:hover:border-[var(--ui-input-text-area-border-color-hover)] enabled:hover:text-[var(--ui-input-text-area-value-color-hover)] enabled:hover:placeholder:text-[var(--ui-input-text-area-placeholder-color-hover)] focus-visible:border-[var(--ui-input-text-area-border-color-focus)] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)] disabled:cursor-not-allowed disabled:border-[var(--ui-input-text-area-border-color-disabled)] disabled:bg-[var(--ui-input-text-area-box-color-disabled)] disabled:text-[var(--ui-input-text-area-value-color-disabled)] disabled:placeholder:text-[var(--ui-input-text-area-placeholder-color-disabled)]",
+        e
+      ),
+      ...r
+    }
+  )
+);
+l.displayName = "InputTextArea";
+export {
+  l as InputTextArea
+};
+//# sourceMappingURL=input-text-area.js.map

package/dist/components/ui/input-text-area/input-text-area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-text-area.js","sources":["../../../../src/components/ui/input-text-area/input-text-area.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// A multiline text area, themed by the dedicated next-gen `--ui-input-text-area-*`\n// token tier from @acronis-platform/tokens-pd. The box fill (`box-color-*`) and the\n// border (`border-color-*`) are wired per state: idle / hover / focus (border\n// `border-color-focus` + a 3px `--ui-focus-primary` ring) / disabled. Value and\n// placeholder text use `value-color-*` / `placeholder-color-*`. Box geometry\n// (96px min-height, 4px radius, 12px padding-x, 8px padding-y) comes from\n// `--ui-input-text-area-box-*`; it grows with vertical resize. Unlike the\n// single-line Input tier, this tier has NO error-specific border/fill token — so\n// the error state (driven by `aria-invalid`) keeps the idle/hover/focus border and\n// only swaps the focus ring to `--ui-focus-error`. Label, description, and required\n// marker are composed by the consumer (a Field component is future work).\nexport type InputTextAreaProps = React.ComponentPropsWithoutRef<'textarea'>;\n\nconst InputTextArea = React.forwardRef<HTMLTextAreaElement, InputTextAreaProps>(\n  ({ className, ...props }, ref) => (\n    <textarea\n      ref={ref}\n      className={cn(\n        'min-h-[var(--ui-input-text-area-box-height-min)] w-full min-w-0 resize-y rounded-[var(--ui-input-text-area-box-border-radius)] border bg-[var(--ui-input-text-area-box-color-idle)] border-[var(--ui-input-text-area-border-color-idle)] px-[var(--ui-input-text-area-box-padding-x)] py-[var(--ui-input-text-area-box-padding-y)] text-sm leading-6 text-[var(--ui-input-text-area-value-color-idle)] transition-colors placeholder:text-[var(--ui-input-text-area-placeholder-color-idle)] focus-visible:outline-none focus-visible:ring-[3px] enabled:hover:bg-[var(--ui-input-text-area-box-color-hover)] enabled:hover:border-[var(--ui-input-text-area-border-color-hover)] enabled:hover:text-[var(--ui-input-text-area-value-color-hover)] enabled:hover:placeholder:text-[var(--ui-input-text-area-placeholder-color-hover)] focus-visible:border-[var(--ui-input-text-area-border-color-focus)] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)] disabled:cursor-not-allowed disabled:border-[var(--ui-input-text-area-border-color-disabled)] disabled:bg-[var(--ui-input-text-area-box-color-disabled)] disabled:text-[var(--ui-input-text-area-value-color-disabled)] disabled:placeholder:text-[var(--ui-input-text-area-placeholder-color-disabled)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nInputTextArea.displayName = 'InputTextArea';\n\nexport { InputTextArea };\n"],"names":["InputTextArea","React","className","props","ref","jsx","cn"],"mappings":";;;AAiBA,MAAMA,IAAgBC,EAAM;AAAA,EAC1B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MACxB,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AACAH,EAAc,cAAc;"}