@acronis-platform/ui-react 4.0.0 → 4.1.0

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 { 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;"}
+{"version":3,"file":"button.js","names":[],"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"],"mappings":";;;;;;AAqCA,IAAM,IAAiB,EACrB,6eACA;CACE,UAAU,EACR,SAAS;EACP,SACE;EACF,WACE;EACF,OACE;EACF,aACE;EACF,IAAI;CACN,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF,GAcM,IAAS,EAAM,YAClB,EAAE,cAAW,YAAS,WAAQ,aAAU,GAAG,KAAS,MAC5C,EAAU;CACf;CACA;CACA,gBAAgB;CAChB,OAAO,EACL;EACE,WAAW,EAAG,EAAe;GAAE;GAAS;EAAU,CAAC,CAAC;EACpD;CACF,GACA,CACF;AACF,CAAC,CAEL;AACA,EAAO,cAAc"}

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

@@ -1,57 +1,35 @@
-import { jsx as e } from "react/jsx-runtime";
+import { cn as e } from "../../../lib/utils.js";
+import { cva as t } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
 import * as n from "react";
-import { Toolbar as u } from "@base-ui/react/toolbar";
-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 s } from "../../../lib/utils.js";
-const b = l(
-  // `overflow-hidden` is load-bearing, not cosmetic: it clips the first/last
-  // item's hover/active fill and its inset focus ring to the container's own
-  // radius. Without it the square item corners poke out past the rounded box.
-  "inline-flex w-fit items-center overflow-hidden",
-  {
-    variants: {
-      variant: {
-        outlined: "rounded-[var(--ui-button-group-global-container-border-radius)] border-[length:var(--ui-button-group-global-container-border-width)] border-solid border-[color:var(--ui-button-group-global-container-border-color)]",
-        inlined: ""
-      }
-    },
-    defaultVariants: {
-      variant: "outlined"
-    }
-  }
-), d = l(
-  "inline-flex h-[var(--ui-button-group-global-box-height)] shrink-0 cursor-pointer items-center justify-center px-[var(--ui-button-group-global-box-padding-x)] py-[var(--ui-button-group-global-box-padding-y)] transition-colors bg-[var(--ui-button-group-global-box-color-idle)] text-[var(--ui-glyph-on-surface-primary)] border-solid border-[color:var(--ui-button-group-global-separator-color)] hover:bg-[var(--ui-button-group-global-box-color-hover)] active:bg-[var(--ui-button-group-global-box-color-active)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-[var(--ui-focus-primary)] data-[disabled]:pointer-events-none data-[disabled]:bg-[var(--ui-button-group-global-box-color-idle)] data-[disabled]:text-[var(--ui-glyph-on-surface-disabled)] [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
-), i = "border-e-[length:var(--ui-button-group-global-separator-border-width)]";
-function g(o) {
-  return o === void 0 ? `${i} last:border-e-0` : o === "last" ? "" : i;
+import { jsx as r } from "react/jsx-runtime";
+import { Toolbar as i } from "@base-ui/react/toolbar";
+//#region src/components/ui/button-group/button-group.tsx
+var a = t("inline-flex w-fit items-center overflow-hidden", {
+	variants: { variant: {
+		outlined: "rounded-[var(--ui-button-group-global-container-border-radius)] border-[length:var(--ui-button-group-global-container-border-width)] border-solid border-[color:var(--ui-button-group-global-container-border-color)]",
+		inlined: ""
+	} },
+	defaultVariants: { variant: "outlined" }
+}), o = t("inline-flex h-[var(--ui-button-group-global-box-height)] shrink-0 cursor-pointer items-center justify-center px-[var(--ui-button-group-global-box-padding-x)] py-[var(--ui-button-group-global-box-padding-y)] transition-colors bg-[var(--ui-button-group-global-box-color-idle)] text-[var(--ui-glyph-on-surface-primary)] border-solid border-[color:var(--ui-button-group-global-separator-color)] hover:bg-[var(--ui-button-group-global-box-color-hover)] active:bg-[var(--ui-button-group-global-box-color-active)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-[var(--ui-focus-primary)] data-[disabled]:pointer-events-none data-[disabled]:bg-[var(--ui-button-group-global-box-color-idle)] data-[disabled]:text-[var(--ui-glyph-on-surface-disabled)] [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"), s = "border-e-[length:var(--ui-button-group-global-separator-border-width)]";
+function c(e) {
+	return e === void 0 ? `${s} last:border-e-0` : e === "last" ? "" : s;
 }
-const p = n.forwardRef(
-  ({ className: o, variant: r, ...t }, a) => /* @__PURE__ */ e(
-    u.Root,
-    {
-      ref: a,
-      className: s(b({ variant: r, className: o })),
-      ...t
-    }
-  )
-);
-p.displayName = "ButtonGroup";
-const c = n.forwardRef(({ className: o, order: r, ...t }, a) => /* @__PURE__ */ e(
-  u.Button,
-  {
-    ref: a,
-    className: s(
-      d({ className: g(r) }),
-      o
-    ),
-    ...t
-  }
-));
-c.displayName = "ButtonGroupItem";
-export {
-  p as ButtonGroup,
-  c as ButtonGroupItem,
-  d as buttonGroupItemVariants,
-  b as buttonGroupVariants
-};
-//# sourceMappingURL=button-group.js.map
+var l = n.forwardRef(({ className: t, variant: n, ...o }, s) => /* @__PURE__ */ r(i.Root, {
+	ref: s,
+	className: e(a({
+		variant: n,
+		className: t
+	})),
+	...o
+}));
+l.displayName = "ButtonGroup";
+var u = n.forwardRef(({ className: t, order: n, ...a }, s) => /* @__PURE__ */ r(i.Button, {
+	ref: s,
+	className: e(o({ className: c(n) }), t),
+	...a
+}));
+u.displayName = "ButtonGroupItem";
+//#endregion
+export { l as ButtonGroup, u as ButtonGroupItem, o as buttonGroupItemVariants, a as buttonGroupVariants };
+
+//# sourceMappingURL=button-group.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"button-group.js","sources":["../../../../src/components/ui/button-group/button-group.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Toolbar as ToolbarPrimitive,\n  type ToolbarButtonProps,\n  type ToolbarRootProps,\n} from '@base-ui/react/toolbar';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"ButtonGroup\" component set (node 7975:3479) and its\n// \"ButtonGroupItem\" children (node 5558:17506): a compact cluster of icon-only\n// actions sharing one box, hairline-separated. The container's `variant`\n// (`outlined` / `inlined`) is the Figma variant property of the same name —\n// `outlined` draws the 1px container border + 4px radius, `inlined` draws\n// neither (for use inside a surface that already has its own chrome).\n//\n// Figma models the items' position as an `order` variant (first / middle /\n// last), which only ever controls whether the trailing separator is drawn.\n// That's derivable from the DOM, so it is NOT a prop here — `last:border-e-0`\n// drops the separator on the final item, which keeps the group variadic\n// (Figma's `ListItem` slot) instead of forcing callers to label positions.\n//\n// Built on Base UI's Toolbar so the cluster gets the WAI-ARIA toolbar pattern\n// for free: `role=\"toolbar\"`, a single Tab stop, and arrow-key roving tabindex\n// between the items. Base UI's `Toolbar.Root` doesn't forward\n// `enableHomeAndEndKeys` to its composite, so Home/End are unsupported — a Base\n// UI limitation, same as in `toolbar.tsx`.\nconst buttonGroupVariants = cva(\n  // `overflow-hidden` is load-bearing, not cosmetic: it clips the first/last\n  // item's hover/active fill and its inset focus ring to the container's own\n  // radius. Without it the square item corners poke out past the rounded box.\n  'inline-flex w-fit items-center overflow-hidden',\n  {\n    variants: {\n      variant: {\n        outlined:\n          'rounded-[var(--ui-button-group-global-container-border-radius)] border-[length:var(--ui-button-group-global-container-border-width)] border-solid border-[color:var(--ui-button-group-global-container-border-color)]',\n        inlined: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'outlined',\n    },\n  }\n);\n\n// The focus ring is `ring-inset`: an outer ring would be clipped away by the\n// container's `overflow-hidden`. An inset box-shadow is clipped to the padding\n// edge, so the ring stops short of the 1px separator instead of painting over\n// it — which is exactly the 1px inset Figma's FocusRing layer draws by hand.\n//\n// Disabled is keyed off `data-[disabled]` rather than `:disabled` because the\n// item is never natively disabled (see `focusableWhenDisabled` below) — Base UI\n// exposes the state as `aria-disabled` + `data-disabled`, for a disabled item\n// and a disabled *group* alike. The design has no disabled state for this\n// component, so the glyph falls back to the shared\n// `--ui-glyph-on-surface-disabled` semantic token.\nconst buttonGroupItemVariants = cva(\n  'inline-flex h-[var(--ui-button-group-global-box-height)] shrink-0 cursor-pointer items-center justify-center px-[var(--ui-button-group-global-box-padding-x)] py-[var(--ui-button-group-global-box-padding-y)] transition-colors ' +\n    'bg-[var(--ui-button-group-global-box-color-idle)] text-[var(--ui-glyph-on-surface-primary)] ' +\n    'border-solid border-[color:var(--ui-button-group-global-separator-color)] ' +\n    'hover:bg-[var(--ui-button-group-global-box-color-hover)] active:bg-[var(--ui-button-group-global-box-color-active)] ' +\n    'focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-[var(--ui-focus-primary)] ' +\n    'data-[disabled]:pointer-events-none data-[disabled]:bg-[var(--ui-button-group-global-box-color-idle)] data-[disabled]:text-[var(--ui-glyph-on-surface-disabled)] ' +\n    '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0'\n);\n\nconst SEPARATOR_WIDTH =\n  'border-e-[length:var(--ui-button-group-global-separator-border-width)]';\n\n// The separator is the item's own inline-end border, mirroring how Figma hangs\n// it off `ButtonGroupItem` rather than the container. `border-e-*` (not\n// `border-r-*`) so it flips under `dir=\"rtl\"`.\n//\n// By default the trailing separator is dropped via `:last-child`, which keeps\n// the group variadic (Figma's `ListItem` slot) instead of making callers restate\n// their own ordering. That derivation is resolved against the button's *real*\n// parent, though, so interposing a wrapper around each item would make every\n// button a `:last-child` and erase every separator. `order` is the escape hatch\n// for those compositions: given explicitly, it replaces the derivation outright\n// rather than layering on top of it — no `:last-child` rule is emitted at all,\n// so there is no specificity fight to reason about.\nfunction separatorClass(order: ButtonGroupItemOrder | undefined): string {\n  if (order === undefined) return `${SEPARATOR_WIDTH} last:border-e-0`;\n  return order === 'last' ? '' : SEPARATOR_WIDTH;\n}\n\nexport interface ButtonGroupProps\n  // Base UI types `className` as `string | ((state) => string)`, but the value\n  // is merged through `cn()` here, which can't call a function — narrow it.\n  // `orientation` is omitted because the design is horizontal-only: a vertical\n  // group would need the separator on the block axis and different corner\n  // rounding, neither of which Figma specifies.\n  extends Omit<ToolbarRootProps, 'className' | 'orientation'>,\n    VariantProps<typeof buttonGroupVariants> {\n  className?: string;\n}\n\n/**\n * A cluster of related icon-only actions sharing a single bordered box.\n *\n * Renders a `role=\"toolbar\"` container: the group is one Tab stop and the\n * arrow keys move between items. Give it an accessible name (`aria-label` or\n * `aria-labelledby`) describing what the actions have in common.\n */\nconst ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\n  ({ className, variant, ...props }, ref) => (\n    <ToolbarPrimitive.Root\n      ref={ref}\n      className={cn(buttonGroupVariants({ variant, className }))}\n      {...props}\n    />\n  )\n);\nButtonGroup.displayName = 'ButtonGroup';\n\n/** Mirrors the Figma `ButtonGroupItem` `order` variant. */\nexport type ButtonGroupItemOrder = 'first' | 'middle' | 'last';\n\nexport interface ButtonGroupItemProps\n  extends Omit<ToolbarButtonProps, 'className'> {\n  className?: string;\n  /**\n   * Position within the group, mirroring the Figma `order` variant. Controls\n   * one thing: whether the trailing separator is drawn (`last` omits it).\n   *\n   * Leave it unset — position is derived from the DOM. Only pass it when each\n   * item is wrapped in another element, which defeats that derivation.\n   */\n  order?: ButtonGroupItemOrder;\n}\n\n/**\n * A single action inside a `ButtonGroup`. The icon is passed as `children`;\n * provide an `aria-label` (or `aria-labelledby`) so the control has an\n * accessible name.\n */\nconst ButtonGroupItem = React.forwardRef<\n  HTMLButtonElement,\n  ButtonGroupItemProps\n>(({ className, order, ...props }, ref) => (\n  <ToolbarPrimitive.Button\n    ref={ref}\n    // `focusableWhenDisabled` is deliberately left at Base UI's default\n    // (`true`), so a disabled item is `aria-disabled` rather than natively\n    // disabled. Forcing the native attribute instead — to match how every other\n    // disabled control in this library drops out of the tab order — breaks the\n    // group outright when the FIRST item is disabled: the composite still parks\n    // its single `tabIndex=0` on index 0, but the browser skips a natively\n    // disabled button, so every item ends up unreachable and Tab never enters\n    // the group at all. `Toolbar.Root` exposes no way to relocate that initial\n    // tab stop, so the APG behaviour is the only correct option here. The item\n    // is still inert: Base UI suppresses click and Enter/Space activation.\n    className={cn(\n      buttonGroupItemVariants({ className: separatorClass(order) }),\n      className\n    )}\n    {...props}\n  />\n));\nButtonGroupItem.displayName = 'ButtonGroupItem';\n\nexport {\n  ButtonGroup,\n  ButtonGroupItem,\n  buttonGroupVariants,\n  buttonGroupItemVariants,\n};\n"],"names":["buttonGroupVariants","cva","buttonGroupItemVariants","SEPARATOR_WIDTH","separatorClass","order","ButtonGroup","React","className","variant","props","ref","jsx","ToolbarPrimitive","cn","ButtonGroupItem"],"mappings":";;;;;AA4BA,MAAMA,IAAsBC;AAAA;AAAA;AAAA;AAAA,EAI1B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,UACE;AAAA,QACF,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GAaMC,IAA0BD;AAAA,EAC9B;AAOF,GAEME,IACJ;AAcF,SAASC,EAAeC,GAAiD;AACvE,SAAIA,MAAU,SAAkB,GAAGF,CAAe,qBAC3CE,MAAU,SAAS,KAAKF;AACjC;AAoBA,MAAMG,IAAcC,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,GAAGC,EAAA,GAASC,MACjC,gBAAAC;AAAA,IAACC,EAAiB;AAAA,IAAjB;AAAA,MACC,KAAAF;AAAA,MACA,WAAWG,EAAGd,EAAoB,EAAE,SAAAS,GAAS,WAAAD,EAAA,CAAW,CAAC;AAAA,MACxD,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV;AACAJ,EAAY,cAAc;AAuB1B,MAAMS,IAAkBR,EAAM,WAG5B,CAAC,EAAE,WAAAC,GAAW,OAAAH,GAAO,GAAGK,KAASC,MACjC,gBAAAC;AAAA,EAACC,EAAiB;AAAA,EAAjB;AAAA,IACC,KAAAF;AAAA,IAWA,WAAWG;AAAA,MACTZ,EAAwB,EAAE,WAAWE,EAAeC,CAAK,GAAG;AAAA,MAC5DG;AAAA,IAAA;AAAA,IAED,GAAGE;AAAA,EAAA;AACN,CACD;AACDK,EAAgB,cAAc;"}
+{"version":3,"file":"button-group.js","names":[],"sources":["../../../../src/components/ui/button-group/button-group.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Toolbar as ToolbarPrimitive,\n  type ToolbarButtonProps,\n  type ToolbarRootProps,\n} from '@base-ui/react/toolbar';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"ButtonGroup\" component set (node 7975:3479) and its\n// \"ButtonGroupItem\" children (node 5558:17506): a compact cluster of icon-only\n// actions sharing one box, hairline-separated. The container's `variant`\n// (`outlined` / `inlined`) is the Figma variant property of the same name —\n// `outlined` draws the 1px container border + 4px radius, `inlined` draws\n// neither (for use inside a surface that already has its own chrome).\n//\n// Figma models the items' position as an `order` variant (first / middle /\n// last), which only ever controls whether the trailing separator is drawn.\n// That's derivable from the DOM, so it is NOT a prop here — `last:border-e-0`\n// drops the separator on the final item, which keeps the group variadic\n// (Figma's `ListItem` slot) instead of forcing callers to label positions.\n//\n// Built on Base UI's Toolbar so the cluster gets the WAI-ARIA toolbar pattern\n// for free: `role=\"toolbar\"`, a single Tab stop, and arrow-key roving tabindex\n// between the items. Base UI's `Toolbar.Root` doesn't forward\n// `enableHomeAndEndKeys` to its composite, so Home/End are unsupported — a Base\n// UI limitation, same as in `toolbar.tsx`.\nconst buttonGroupVariants = cva(\n  // `overflow-hidden` is load-bearing, not cosmetic: it clips the first/last\n  // item's hover/active fill and its inset focus ring to the container's own\n  // radius. Without it the square item corners poke out past the rounded box.\n  'inline-flex w-fit items-center overflow-hidden',\n  {\n    variants: {\n      variant: {\n        outlined:\n          'rounded-[var(--ui-button-group-global-container-border-radius)] border-[length:var(--ui-button-group-global-container-border-width)] border-solid border-[color:var(--ui-button-group-global-container-border-color)]',\n        inlined: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'outlined',\n    },\n  }\n);\n\n// The focus ring is `ring-inset`: an outer ring would be clipped away by the\n// container's `overflow-hidden`. An inset box-shadow is clipped to the padding\n// edge, so the ring stops short of the 1px separator instead of painting over\n// it — which is exactly the 1px inset Figma's FocusRing layer draws by hand.\n//\n// Disabled is keyed off `data-[disabled]` rather than `:disabled` because the\n// item is never natively disabled (see `focusableWhenDisabled` below) — Base UI\n// exposes the state as `aria-disabled` + `data-disabled`, for a disabled item\n// and a disabled *group* alike. The design has no disabled state for this\n// component, so the glyph falls back to the shared\n// `--ui-glyph-on-surface-disabled` semantic token.\nconst buttonGroupItemVariants = cva(\n  'inline-flex h-[var(--ui-button-group-global-box-height)] shrink-0 cursor-pointer items-center justify-center px-[var(--ui-button-group-global-box-padding-x)] py-[var(--ui-button-group-global-box-padding-y)] transition-colors ' +\n    'bg-[var(--ui-button-group-global-box-color-idle)] text-[var(--ui-glyph-on-surface-primary)] ' +\n    'border-solid border-[color:var(--ui-button-group-global-separator-color)] ' +\n    'hover:bg-[var(--ui-button-group-global-box-color-hover)] active:bg-[var(--ui-button-group-global-box-color-active)] ' +\n    'focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-[var(--ui-focus-primary)] ' +\n    'data-[disabled]:pointer-events-none data-[disabled]:bg-[var(--ui-button-group-global-box-color-idle)] data-[disabled]:text-[var(--ui-glyph-on-surface-disabled)] ' +\n    '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0'\n);\n\nconst SEPARATOR_WIDTH =\n  'border-e-[length:var(--ui-button-group-global-separator-border-width)]';\n\n// The separator is the item's own inline-end border, mirroring how Figma hangs\n// it off `ButtonGroupItem` rather than the container. `border-e-*` (not\n// `border-r-*`) so it flips under `dir=\"rtl\"`.\n//\n// By default the trailing separator is dropped via `:last-child`, which keeps\n// the group variadic (Figma's `ListItem` slot) instead of making callers restate\n// their own ordering. That derivation is resolved against the button's *real*\n// parent, though, so interposing a wrapper around each item would make every\n// button a `:last-child` and erase every separator. `order` is the escape hatch\n// for those compositions: given explicitly, it replaces the derivation outright\n// rather than layering on top of it — no `:last-child` rule is emitted at all,\n// so there is no specificity fight to reason about.\nfunction separatorClass(order: ButtonGroupItemOrder | undefined): string {\n  if (order === undefined) return `${SEPARATOR_WIDTH} last:border-e-0`;\n  return order === 'last' ? '' : SEPARATOR_WIDTH;\n}\n\nexport interface ButtonGroupProps\n  // Base UI types `className` as `string | ((state) => string)`, but the value\n  // is merged through `cn()` here, which can't call a function — narrow it.\n  // `orientation` is omitted because the design is horizontal-only: a vertical\n  // group would need the separator on the block axis and different corner\n  // rounding, neither of which Figma specifies.\n  extends Omit<ToolbarRootProps, 'className' | 'orientation'>,\n    VariantProps<typeof buttonGroupVariants> {\n  className?: string;\n}\n\n/**\n * A cluster of related icon-only actions sharing a single bordered box.\n *\n * Renders a `role=\"toolbar\"` container: the group is one Tab stop and the\n * arrow keys move between items. Give it an accessible name (`aria-label` or\n * `aria-labelledby`) describing what the actions have in common.\n */\nconst ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\n  ({ className, variant, ...props }, ref) => (\n    <ToolbarPrimitive.Root\n      ref={ref}\n      className={cn(buttonGroupVariants({ variant, className }))}\n      {...props}\n    />\n  )\n);\nButtonGroup.displayName = 'ButtonGroup';\n\n/** Mirrors the Figma `ButtonGroupItem` `order` variant. */\nexport type ButtonGroupItemOrder = 'first' | 'middle' | 'last';\n\nexport interface ButtonGroupItemProps\n  extends Omit<ToolbarButtonProps, 'className'> {\n  className?: string;\n  /**\n   * Position within the group, mirroring the Figma `order` variant. Controls\n   * one thing: whether the trailing separator is drawn (`last` omits it).\n   *\n   * Leave it unset — position is derived from the DOM. Only pass it when each\n   * item is wrapped in another element, which defeats that derivation.\n   */\n  order?: ButtonGroupItemOrder;\n}\n\n/**\n * A single action inside a `ButtonGroup`. The icon is passed as `children`;\n * provide an `aria-label` (or `aria-labelledby`) so the control has an\n * accessible name.\n */\nconst ButtonGroupItem = React.forwardRef<\n  HTMLButtonElement,\n  ButtonGroupItemProps\n>(({ className, order, ...props }, ref) => (\n  <ToolbarPrimitive.Button\n    ref={ref}\n    // `focusableWhenDisabled` is deliberately left at Base UI's default\n    // (`true`), so a disabled item is `aria-disabled` rather than natively\n    // disabled. Forcing the native attribute instead — to match how every other\n    // disabled control in this library drops out of the tab order — breaks the\n    // group outright when the FIRST item is disabled: the composite still parks\n    // its single `tabIndex=0` on index 0, but the browser skips a natively\n    // disabled button, so every item ends up unreachable and Tab never enters\n    // the group at all. `Toolbar.Root` exposes no way to relocate that initial\n    // tab stop, so the APG behaviour is the only correct option here. The item\n    // is still inert: Base UI suppresses click and Enter/Space activation.\n    className={cn(\n      buttonGroupItemVariants({ className: separatorClass(order) }),\n      className\n    )}\n    {...props}\n  />\n));\nButtonGroupItem.displayName = 'ButtonGroupItem';\n\nexport {\n  ButtonGroup,\n  ButtonGroupItem,\n  buttonGroupVariants,\n  buttonGroupItemVariants,\n};\n"],"mappings":";;;;;;AA4BA,IAAM,IAAsB,EAI1B,kDACA;CACE,UAAU,EACR,SAAS;EACP,UACE;EACF,SAAS;CACX,EACF;CACA,iBAAiB,EACf,SAAS,WACX;AACF,CACF,GAaM,IAA0B,EAC9B,m1BAOF,GAEM,IACJ;AAcF,SAAS,EAAe,GAAiD;CAEvE,OADI,MAAU,KAAA,IAAkB,GAAG,EAAgB,oBAC5C,MAAU,SAAS,KAAK;AACjC;AAoBA,IAAM,IAAc,EAAM,YACvB,EAAE,cAAW,YAAS,GAAG,KAAS,MACjC,kBAAC,EAAiB,MAAlB;CACO;CACL,WAAW,EAAG,EAAoB;EAAE;EAAS;CAAU,CAAC,CAAC;CACzD,GAAI;AACL,CAAA,CAEL;AACA,EAAY,cAAc;AAuB1B,IAAM,IAAkB,EAAM,YAG3B,EAAE,cAAW,UAAO,GAAG,KAAS,MACjC,kBAAC,EAAiB,QAAlB;CACO;CAWL,WAAW,EACT,EAAwB,EAAE,WAAW,EAAe,CAAK,EAAE,CAAC,GAC5D,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAgB,cAAc"}

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

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

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 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;"}
+{"version":3,"file":"button-icon.js","names":[],"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"],"mappings":";;;;;;AAoBA,IAAM,IAAqB,EACzB,g5BAOA;CACE,UAAU,EACR,SAAS;EACP,OAAO;EACP,WACE;CACJ,EACF;CACA,iBAAiB,EACf,SAAS,QACX;AACF,CACF,GAkBM,IAAa,EAAM,YACtB,EAAE,cAAW,YAAS,WAAQ,GAAG,KAAS,MAClC,EAAU;CACf;CACA;CACA,gBAAgB;CAChB,OAAO,EACL,EAAE,WAAW,EAAG,EAAmB;EAAE;EAAS;CAAU,CAAC,CAAC,EAAE,GAC5D,CACF;AACF,CAAC,CAEL;AACA,EAAW,cAAc"}

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

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

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

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

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

@@ -1,26 +1,22 @@
-import { jsx as a } from "react/jsx-runtime";
-import * as i from "react";
-import { EllipsisIcon as c } from "@acronis-platform/icons-react/stroke-mono";
-import { cn as p } from "../../../lib/utils.js";
-import { ButtonIcon as s } from "../button-icon/button-icon.js";
-const l = "data-[open]:bg-[var(--ui-button-icon-global-container-color-active)] data-[open]:text-[var(--ui-button-icon-global-icon-color-active)] data-[open]:border-[var(--ui-button-icon-secondary-container-border-color-active)]", d = i.forwardRef(
-  ({ className: t, open: o, ariaLabel: n = "More options", ...r }, e) => /* @__PURE__ */ a(
-    s,
-    {
-      ref: e,
-      variant: "secondary",
-      "aria-haspopup": "menu",
-      "aria-label": n,
-      "aria-expanded": o,
-      className: p(l, t),
-      ...o ? { "data-open": "" } : {},
-      ...r,
-      children: /* @__PURE__ */ a(c, { size: 16 })
-    }
-  )
-);
-d.displayName = "ButtonIconMenu";
-export {
-  d as ButtonIconMenu
-};
-//# sourceMappingURL=button-icon-menu.js.map
+import { cn as e } from "../../../lib/utils.js";
+import { ButtonIcon as t } from "../button-icon/button-icon.js";
+import * as n from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { EllipsisIcon as i } from "@acronis-platform/icons-react/stroke-mono";
+//#region src/components/ui/button-icon-menu/button-icon-menu.tsx
+var a = "data-[open]:bg-[var(--ui-button-icon-global-container-color-active)] data-[open]:text-[var(--ui-button-icon-global-icon-color-active)] data-[open]:border-[var(--ui-button-icon-secondary-container-border-color-active)]", o = n.forwardRef(({ className: n, open: o, ariaLabel: s = "More options", ...c }, l) => /* @__PURE__ */ r(t, {
+	ref: l,
+	variant: "secondary",
+	"aria-haspopup": "menu",
+	"aria-label": s,
+	"aria-expanded": o,
+	className: e(a, n),
+	...o ? { "data-open": "" } : {},
+	...c,
+	children: /* @__PURE__ */ r(i, { size: 16 })
+}));
+o.displayName = "ButtonIconMenu";
+//#endregion
+export { o as ButtonIconMenu };
+
+//# sourceMappingURL=button-icon-menu.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"button-icon-menu.js","sources":["../../../../src/components/ui/button-icon-menu/button-icon-menu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { EllipsisIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport type { useRender } from '@base-ui/react/use-render';\n\nimport { cn } from '@/lib/utils';\nimport { ButtonIcon } from '../button-icon';\n\n// Mirrors the Figma \"ButtonIconMenu\" component set: the kebab (\"more options\")\n// trigger — a 32×32 bordered icon button holding a fixed 16px Ellipsis glyph,\n// with idle / hover / active / disabled / focus states. The design has a single\n// `state` property (no variant/size axis) and draws every state from the\n// **ButtonIcon** token tier (`components/ButtonIcon/*`), always with the\n// `secondary` 1px container border — so this composes `ButtonIcon\n// variant=\"secondary\"` rather than restating those token references. A re-theme\n// of ButtonIcon then reaches this component for free, and the two can't drift.\n// Only the open treatment is added here: as in ButtonMenu, the Figma `active`\n// state doubles as the **open** state, so `data-open` — set from the `open` prop\n// — re-points the container fill, glyph, and border at their `*-active` tokens.\n// Geometry (32px box, 4px radius, 16px glyph) and the 3px `--ui-focus-primary`\n// ring flush to the edge come from ButtonIcon.\nconst openStateClasses =\n  'data-[open]:bg-[var(--ui-button-icon-global-container-color-active)] data-[open]:text-[var(--ui-button-icon-global-icon-color-active)] data-[open]:border-[var(--ui-button-icon-secondary-container-border-color-active)]';\n\nexport interface ButtonIconMenuProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'children'\n> {\n  /**\n   * Whether the associated menu is open. Applies the open (`*-active`)\n   * treatment and reflects `aria-expanded`. Control this in sync with the menu\n   * you trigger.\n   */\n  open?: boolean;\n  /**\n   * Accessible name for the trigger. The button is icon-only, so it has no text\n   * to name it — pass a localized string here.\n   */\n  ariaLabel?: string;\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 that opens a menu of actions — the kebab / \"more options\"\n * trigger. The glyph is fixed (Ellipsis); for any other icon use `ButtonIcon`.\n * Pair it with the menu it controls and keep the `open` prop in sync.\n */\nconst ButtonIconMenu = React.forwardRef<HTMLButtonElement, ButtonIconMenuProps>(\n  ({ className, open, ariaLabel = 'More options', ...props }, ref) => (\n    <ButtonIcon\n      ref={ref}\n      variant=\"secondary\"\n      aria-haspopup=\"menu\"\n      aria-label={ariaLabel}\n      aria-expanded={open}\n      className={cn(openStateClasses, className)}\n      // `data-open` drives the open (`*-active`) token switch via attribute\n      // selectors; present only while open, and typed loosely because React's\n      // button attribute map doesn't include arbitrary data-* keys as literals.\n      {...(open ? ({ 'data-open': '' } as Record<string, string>) : {})}\n      {...props}\n    >\n      <EllipsisIcon size={16} />\n    </ButtonIcon>\n  )\n);\nButtonIconMenu.displayName = 'ButtonIconMenu';\n\nexport { ButtonIconMenu };\n"],"names":["openStateClasses","ButtonIconMenu","React","className","open","ariaLabel","props","ref","jsx","ButtonIcon","cn","EllipsisIcon"],"mappings":";;;;;AAoBA,MAAMA,IACJ,6NA8BIC,IAAiBC,EAAM;AAAA,EAC3B,CAAC,EAAE,WAAAC,GAAW,MAAAC,GAAM,WAAAC,IAAY,gBAAgB,GAAGC,EAAA,GAASC,MAC1D,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,SAAQ;AAAA,MACR,iBAAc;AAAA,MACd,cAAYF;AAAA,MACZ,iBAAeD;AAAA,MACf,WAAWM,EAAGV,GAAkBG,CAAS;AAAA,MAIxC,GAAIC,IAAQ,EAAE,aAAa,GAAA,IAAkC,CAAA;AAAA,MAC7D,GAAGE;AAAA,MAEJ,UAAA,gBAAAE,EAACG,GAAA,EAAa,MAAM,GAAA,CAAI;AAAA,IAAA;AAAA,EAAA;AAG9B;AACAV,EAAe,cAAc;"}
+{"version":3,"file":"button-icon-menu.js","names":[],"sources":["../../../../src/components/ui/button-icon-menu/button-icon-menu.tsx"],"sourcesContent":["import * as React from 'react';\nimport { EllipsisIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport type { useRender } from '@base-ui/react/use-render';\n\nimport { cn } from '@/lib/utils';\nimport { ButtonIcon } from '../button-icon';\n\n// Mirrors the Figma \"ButtonIconMenu\" component set: the kebab (\"more options\")\n// trigger — a 32×32 bordered icon button holding a fixed 16px Ellipsis glyph,\n// with idle / hover / active / disabled / focus states. The design has a single\n// `state` property (no variant/size axis) and draws every state from the\n// **ButtonIcon** token tier (`components/ButtonIcon/*`), always with the\n// `secondary` 1px container border — so this composes `ButtonIcon\n// variant=\"secondary\"` rather than restating those token references. A re-theme\n// of ButtonIcon then reaches this component for free, and the two can't drift.\n// Only the open treatment is added here: as in ButtonMenu, the Figma `active`\n// state doubles as the **open** state, so `data-open` — set from the `open` prop\n// — re-points the container fill, glyph, and border at their `*-active` tokens.\n// Geometry (32px box, 4px radius, 16px glyph) and the 3px `--ui-focus-primary`\n// ring flush to the edge come from ButtonIcon.\nconst openStateClasses =\n  'data-[open]:bg-[var(--ui-button-icon-global-container-color-active)] data-[open]:text-[var(--ui-button-icon-global-icon-color-active)] data-[open]:border-[var(--ui-button-icon-secondary-container-border-color-active)]';\n\nexport interface ButtonIconMenuProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'children'\n> {\n  /**\n   * Whether the associated menu is open. Applies the open (`*-active`)\n   * treatment and reflects `aria-expanded`. Control this in sync with the menu\n   * you trigger.\n   */\n  open?: boolean;\n  /**\n   * Accessible name for the trigger. The button is icon-only, so it has no text\n   * to name it — pass a localized string here.\n   */\n  ariaLabel?: string;\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 that opens a menu of actions — the kebab / \"more options\"\n * trigger. The glyph is fixed (Ellipsis); for any other icon use `ButtonIcon`.\n * Pair it with the menu it controls and keep the `open` prop in sync.\n */\nconst ButtonIconMenu = React.forwardRef<HTMLButtonElement, ButtonIconMenuProps>(\n  ({ className, open, ariaLabel = 'More options', ...props }, ref) => (\n    <ButtonIcon\n      ref={ref}\n      variant=\"secondary\"\n      aria-haspopup=\"menu\"\n      aria-label={ariaLabel}\n      aria-expanded={open}\n      className={cn(openStateClasses, className)}\n      // `data-open` drives the open (`*-active`) token switch via attribute\n      // selectors; present only while open, and typed loosely because React's\n      // button attribute map doesn't include arbitrary data-* keys as literals.\n      {...(open ? ({ 'data-open': '' } as Record<string, string>) : {})}\n      {...props}\n    >\n      <EllipsisIcon size={16} />\n    </ButtonIcon>\n  )\n);\nButtonIconMenu.displayName = 'ButtonIconMenu';\n\nexport { ButtonIconMenu };\n"],"mappings":";;;;;;AAoBA,IAAM,IACJ,6NA8BI,IAAiB,EAAM,YAC1B,EAAE,cAAW,SAAM,eAAY,gBAAgB,GAAG,KAAS,MAC1D,kBAAC,GAAD;CACO;CACL,SAAQ;CACR,iBAAc;CACd,cAAY;CACZ,iBAAe;CACf,WAAW,EAAG,GAAkB,CAAS;CAIzC,GAAK,IAAQ,EAAE,aAAa,GAAG,IAA+B,CAAC;CAC/D,GAAI;CAEJ,UAAA,kBAAC,GAAD,EAAc,MAAM,GAAK,CAAA;AACf,CAAA,CAEhB;AACA,EAAe,cAAc"}

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

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