@elmeragroup/fuse 0.1.0-canary.2 → 0.1.0-canary.20

package/README.md

@@ -15,6 +15,48 @@ Requires Tailwind CSS 4.1 or newer. Published code is not scanned by a consumer
 
 Adjust the `@source` path only when the stylesheet is not one directory below the app root.
 
+### What `fuse/css` changes in your theme
+
+`@elmeragroup/fuse/css` is not only the components' variants and control metrics. Importing it into a Tailwind build also changes these parts of the host theme, whether or not `themes.css` is imported:
+
+- **Role and primitive colours.** Its `@theme inline` block maps every role token (`--color-primary` → `var(--primary)` and so on) and remaps Tailwind's `neutral-50` to `neutral-950` palette onto `--neutral-*`. `themes.css` defines those; without it, `bg-neutral-200` and the other stock neutral utilities resolve to an undefined colour until you define `--neutral-*` yourself.
+- **Radius scale.** `rounded-xs` to `rounded-xl` become whole `--radius-step` multiples from `--radius` instead of Tailwind's fixed rems. The step falls back to `0px`, so with your own `--radius` and no `themes.css` every rung is that one radius; `--radius` itself has no fallback. Button rounds with `--radius-button`, which `themes.css` sets per theme; define it (`--radius-button: var(--radius)`) when you skip `themes.css`.
+- **State variants.** It declares `data-open`, `data-closed`, `data-checked`, `data-unchecked`, `data-selected`, `data-disabled`, `data-active`, `data-horizontal` and `data-vertical` as static variants, wrapped in `:where()`. They replace Tailwind's functional `data-*` variants of the same name in your own classes too: their specificity drops to one class, so a plain `hover:` rule beats a `data-selected:` rule, `data-open:` and the like also match Radix-style `data-state` values, and `data-selected:` matches only `data-selected="true"`. Other `data-*` names are untouched.
+- **Also:** `enabled-hover:`, `enabled-active:`, `disabled-state:`, `hit-area-*`, `no-scrollbar`, the `rounded-button`, `font-sans`, `font-heading` and `font-mono` utilities, the `xs`, `lg` and `3xl` breakpoints, `--spacing: 0.25rem`, the `overshoot` easing, `tw-animate-css`, the React Aria Tailwind plugin, and a reduced-motion rule that switches off transform and layout transitions document-wide.
+
+### Keeping your own tokens
+
+A host that migrates one component at a time can keep its own design tokens and skip `themes.css`:
+
+```css
+@import "tailwindcss";
+@import "@elmeragroup/fuse/css";
+@source "../node_modules/@elmeragroup/fuse";
+
+@theme {
+  /* Your tokens. This block comes after fuse/css, so where both define a theme variable, yours wins. */
+}
+
+:root {
+  /* Map the role tokens the components you use read, in any colour notation. */
+  --primary: var(--your-brand);
+  --primary-foreground: #fff;
+  --radius: 0.5rem;
+  --radius-button: var(--radius);
+}
+```
+
+Import `fuse/css` before your own `@theme` so your values win where both define one. Each component page in the docs lists the tokens that component reads under "Tokens consumed"; map those, and add the next component's list when you adopt it. Role tokens are whole colours (`oklch()`, `hsl()`, hex), not channel triplets.
+
+Button's `outline` variant reads `--button-outline` and `--button-outline-width`. Without them it draws a 1px hairline in your `--border`, as internal themes do. For the external themes' outline, a 2px ring in the text colour with no shadow, set both:
+
+```css
+:root {
+  --button-outline: var(--foreground);
+  --button-outline-width: 2px;
+}
+```
+
 ## Non-Tailwind
 
 ```css

package/button.d.ts

@@ -1,3 +1,3 @@
 import { buttonVariants } from "./components/button/button-variants.js";
-import { Button, ButtonProps } from "./components/button/button.js";
-export { Button, type ButtonProps, buttonVariants };
+import { Button, ButtonProps, ButtonSize, IconButtonProps, IconButtonSize, LabelButtonProps, LabelButtonSize } from "./components/button/button.js";
+export { Button, type ButtonProps, type ButtonSize, type IconButtonProps, type IconButtonSize, type LabelButtonProps, type LabelButtonSize, buttonVariants };

package/components/button/button-variants.d.ts

@@ -2,7 +2,7 @@
 export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
   variant: {
     default: "bg-primary text-primary-foreground enabled-hover:bg-primary/80";
-    outline: "shadow-xs border-border bg-background aria-expanded:bg-muted aria-expanded:text-foreground enabled-hover:bg-muted enabled-hover:text-foreground";
+    outline: "border-[length:var(--button-outline-width,1px)] border-button-outline bg-background shadow-[0_1px_max(0px,4px-2*var(--button-outline-width,1px))_min(0px,2px-2*var(--button-outline-width,1px))_rgb(0_0_0/0.05)] aria-expanded:bg-muted aria-expanded:text-foreground enabled-hover:bg-muted enabled-hover:text-foreground";
     secondary: "bg-secondary text-secondary-foreground aria-expanded:bg-secondary aria-expanded:text-secondary-foreground enabled-hover:bg-secondary-hover";
     ghost: "aria-expanded:bg-muted aria-expanded:text-foreground enabled-hover:bg-muted enabled-hover:text-foreground";
     destructive: "border-error/20 bg-error/10 text-error enabled-hover:border-error enabled-hover:bg-error/20";
@@ -23,7 +23,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
 }, undefined, string, {
   variant: {
     default: "bg-primary text-primary-foreground enabled-hover:bg-primary/80";
-    outline: "shadow-xs border-border bg-background aria-expanded:bg-muted aria-expanded:text-foreground enabled-hover:bg-muted enabled-hover:text-foreground";
+    outline: "border-[length:var(--button-outline-width,1px)] border-button-outline bg-background shadow-[0_1px_max(0px,4px-2*var(--button-outline-width,1px))_min(0px,2px-2*var(--button-outline-width,1px))_rgb(0_0_0/0.05)] aria-expanded:bg-muted aria-expanded:text-foreground enabled-hover:bg-muted enabled-hover:text-foreground";
     secondary: "bg-secondary text-secondary-foreground aria-expanded:bg-secondary aria-expanded:text-secondary-foreground enabled-hover:bg-secondary-hover";
     ghost: "aria-expanded:bg-muted aria-expanded:text-foreground enabled-hover:bg-muted enabled-hover:text-foreground";
     destructive: "border-error/20 bg-error/10 text-error enabled-hover:border-error enabled-hover:bg-error/20";
@@ -44,7 +44,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
   variant: {
     default: "bg-primary text-primary-foreground enabled-hover:bg-primary/80";
-    outline: "shadow-xs border-border bg-background aria-expanded:bg-muted aria-expanded:text-foreground enabled-hover:bg-muted enabled-hover:text-foreground";
+    outline: "border-[length:var(--button-outline-width,1px)] border-button-outline bg-background shadow-[0_1px_max(0px,4px-2*var(--button-outline-width,1px))_min(0px,2px-2*var(--button-outline-width,1px))_rgb(0_0_0/0.05)] aria-expanded:bg-muted aria-expanded:text-foreground enabled-hover:bg-muted enabled-hover:text-foreground";
     secondary: "bg-secondary text-secondary-foreground aria-expanded:bg-secondary aria-expanded:text-secondary-foreground enabled-hover:bg-secondary-hover";
     ghost: "aria-expanded:bg-muted aria-expanded:text-foreground enabled-hover:bg-muted enabled-hover:text-foreground";
     destructive: "border-error/20 bg-error/10 text-error enabled-hover:border-error enabled-hover:bg-error/20";

package/components/button/button-variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-variants.d.ts","names":[],"sources":["../../../src/components/button/button-variants.ts"],"mappings":";qBAyBa,4CAAc"}
+{"version":3,"file":"button-variants.d.ts","names":[],"sources":["../../../src/components/button/button-variants.ts"],"mappings":";qBAkDa,4CAAc"}

package/components/button/button-variants.js

@@ -5,11 +5,11 @@ import { controlSize } from "../../styles/control-size.js";
 import { tv } from "tailwind-variants";
 //#region src/components/button/button-variants.ts
 const buttonVariants = tv({
-	base: cn("group/button font-medium box-border inline-flex shrink-0 items-center justify-center rounded-(--radius-button) border border-transparent bg-clip-padding p-0 whitespace-nowrap transition-[color,background-color,border-color,box-shadow,translate,opacity] select-none in-data-[slot=button-group]:rounded-md enabled-active:not-aria-[haspopup]:translate-y-px [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", selfFocusRingClass, nativeStateFaceClass, dataStateFaceClass),
+	base: cn("group/button font-medium box-border inline-flex shrink-0 cursor-pointer items-center justify-center rounded-(--radius-button) border border-transparent bg-clip-padding p-0 whitespace-nowrap transition-[color,background-color,border-color,box-shadow,translate,opacity] select-none in-data-[slot=button-group]:rounded-md enabled-active:not-aria-[haspopup]:translate-y-px [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[pending-indicator]:[&>svg:not([data-icon=inline-end])]:hidden", selfFocusRingClass, nativeStateFaceClass, dataStateFaceClass),
 	variants: {
 		variant: {
 			default: "bg-primary text-primary-foreground enabled-hover:bg-primary/80",
-			outline: "shadow-xs border-border bg-background aria-expanded:bg-muted aria-expanded:text-foreground enabled-hover:bg-muted enabled-hover:text-foreground",
+			outline: "border-[length:var(--button-outline-width,1px)] border-button-outline bg-background shadow-[0_1px_max(0px,4px-2*var(--button-outline-width,1px))_min(0px,2px-2*var(--button-outline-width,1px))_rgb(0_0_0/0.05)] aria-expanded:bg-muted aria-expanded:text-foreground enabled-hover:bg-muted enabled-hover:text-foreground",
 			secondary: "bg-secondary text-secondary-foreground aria-expanded:bg-secondary aria-expanded:text-secondary-foreground enabled-hover:bg-secondary-hover",
 			ghost: "aria-expanded:bg-muted aria-expanded:text-foreground enabled-hover:bg-muted enabled-hover:text-foreground",
 			destructive: "border-error/20 bg-error/10 text-error enabled-hover:border-error enabled-hover:bg-error/20",
@@ -19,20 +19,23 @@ const buttonVariants = tv({
 		size: {
 			default: controlSize({
 				size: "md",
-				fit: "label"
+				fit: "label",
+				class: "px-(--control-px-button-md) has-data-[icon=inline-end]:pr-(--control-px-button-icon-md) has-data-[icon=inline-start]:pl-(--control-px-button-icon-md)"
 			}),
 			xs: controlSize({
 				size: "xs",
 				fit: "label",
-				class: "[&_svg:not([class*='size-'])]:size-3"
+				class: "px-(--control-px-button-xs) has-data-[icon=inline-end]:pr-(--control-px-button-icon-xs) has-data-[icon=inline-start]:pl-(--control-px-button-icon-xs) [&_svg:not([class*='size-'])]:size-3"
 			}),
 			sm: controlSize({
 				size: "sm",
-				fit: "label"
+				fit: "label",
+				class: "px-(--control-px-button-sm) has-data-[icon=inline-end]:pr-(--control-px-button-icon-sm) has-data-[icon=inline-start]:pl-(--control-px-button-icon-sm)"
 			}),
 			lg: controlSize({
 				size: "lg",
-				fit: "label"
+				fit: "label",
+				class: "px-(--control-px-button-lg) has-data-[icon=inline-end]:pr-(--control-px-button-icon-lg) has-data-[icon=inline-start]:pl-(--control-px-button-icon-lg)"
 			}),
 			icon: controlSize({
 				size: "md",

package/components/button/button-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-variants.js","names":[],"sources":["../../../src/components/button/button-variants.ts"],"sourcesContent":["import { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../../styles/cn\";\nimport { controlSize } from \"../../styles/control-size\";\nimport { dataStateFaceClass, nativeStateFaceClass } from \"../../styles/state-face\";\nimport { selfFocusRingClass } from \"../../styles/utils\";\n\n// Runtime-free recipe so other components can borrow it without Button's client graph.\n// The state face composes two targets. `native` covers a native <button> that borrows\n// the recipe, and `data` covers Base UI roots that never match `:disabled`, such as\n// `render={<a />}` or `focusableWhenDisabled`. Both carry the `aria-disabled` arm, which\n// covers `isVisuallyDisabled` and a consumer's own `aria-disabled`. No target drops pointer events, so a Tooltip on a\n// disabled button still opens, and Base UI already cancels clicks on a disabled root.\n// Hover and press styles use the `enabled-hover:` and `enabled-active:` variants from\n// fuse.css, so a disabled root never changes fill, border, text or position under the\n// pointer. `aria-expanded:` follows an open popup, not the pointer, so it has no gate.\n// The text and icon sizes take their box from the control-size recipe: `default` is the md\n// label, `icon*` the squares. The xs glyph size and `icon-inline`, a square as tall as the\n// surrounding line that follows no density, stay local.\n// Every size rounds with the theme's `--radius-button`. The arbitrary value keeps\n// tailwind-merge able to replace it with a consumer `rounded-*` class, which the custom\n// `rounded-button` utility would not be.\n// Inside a ButtonGroup a button keeps the group radius, `rounded-md`, not the button role.\n// The group joins its buttons edge to edge, often with inputs and text, into one bar that\n// rounds like a field, and a pill button would bulge out of that outline.\nexport const buttonVariants = tv({\n  base: cn(\n    \"group/button font-medium box-border inline-flex shrink-0 items-center justify-center rounded-(--radius-button) border border-transparent bg-clip-padding p-0 whitespace-nowrap transition-[color,background-color,border-color,box-shadow,translate,opacity] select-none in-data-[slot=button-group]:rounded-md enabled-active:not-aria-[haspopup]:translate-y-px [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n    selfFocusRingClass,\n    nativeStateFaceClass,\n    dataStateFaceClass\n  ),\n  variants: {\n    variant: {\n      default: \"bg-primary text-primary-foreground enabled-hover:bg-primary/80\",\n      outline:\n        \"shadow-xs border-border bg-background aria-expanded:bg-muted aria-expanded:text-foreground enabled-hover:bg-muted enabled-hover:text-foreground\",\n      secondary:\n        \"bg-secondary text-secondary-foreground aria-expanded:bg-secondary aria-expanded:text-secondary-foreground enabled-hover:bg-secondary-hover\",\n      ghost:\n        \"aria-expanded:bg-muted aria-expanded:text-foreground enabled-hover:bg-muted enabled-hover:text-foreground\",\n      destructive:\n        \"border-error/20 bg-error/10 text-error enabled-hover:border-error enabled-hover:bg-error/20\",\n      success:\n        \"border-success/20 bg-success/10 text-success enabled-hover:border-success enabled-hover:bg-success/20\",\n      link: \"text-primary underline-offset-4 enabled-hover:underline\",\n    },\n    size: {\n      default: controlSize({ size: \"md\", fit: \"label\" }),\n      xs: controlSize({ size: \"xs\", fit: \"label\", class: \"[&_svg:not([class*='size-'])]:size-3\" }),\n      sm: controlSize({ size: \"sm\", fit: \"label\" }),\n      lg: controlSize({ size: \"lg\", fit: \"label\" }),\n      icon: controlSize({ size: \"md\", fit: \"square\" }),\n      \"icon-xs\": controlSize({ size: \"xs\", fit: \"square\", class: \"[&_svg:not([class*='size-'])]:size-3\" }),\n      \"icon-sm\": controlSize({ size: \"sm\", fit: \"square\" }),\n      \"icon-inline\": \"hit-area-1 aspect-square h-lh w-auto\",\n      \"icon-lg\": controlSize({ size: \"lg\", fit: \"square\" }),\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"default\",\n  },\n});\n"],"mappings":";;;;;;AAyBA,MAAa,iBAAiB,GAAG;CAC/B,MAAM,GACJ,ubACA,oBACA,sBACA,kBACF;CACA,UAAU;EACR,SAAS;GACP,SAAS;GACT,SACE;GACF,WACE;GACF,OACE;GACF,aACE;GACF,SACE;GACF,MAAM;EACR;EACA,MAAM;GACJ,SAAS,YAAY;IAAE,MAAM;IAAM,KAAK;GAAQ,CAAC;GACjD,IAAI,YAAY;IAAE,MAAM;IAAM,KAAK;IAAS,OAAO;GAAuC,CAAC;GAC3F,IAAI,YAAY;IAAE,MAAM;IAAM,KAAK;GAAQ,CAAC;GAC5C,IAAI,YAAY;IAAE,MAAM;IAAM,KAAK;GAAQ,CAAC;GAC5C,MAAM,YAAY;IAAE,MAAM;IAAM,KAAK;GAAS,CAAC;GAC/C,WAAW,YAAY;IAAE,MAAM;IAAM,KAAK;IAAU,OAAO;GAAuC,CAAC;GACnG,WAAW,YAAY;IAAE,MAAM;IAAM,KAAK;GAAS,CAAC;GACpD,eAAe;GACf,WAAW,YAAY;IAAE,MAAM;IAAM,KAAK;GAAS,CAAC;EACtD;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CAAC"}
+{"version":3,"file":"button-variants.js","names":[],"sources":["../../../src/components/button/button-variants.ts"],"sourcesContent":["import { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../../styles/cn\";\nimport { controlSize } from \"../../styles/control-size\";\nimport { dataStateFaceClass, nativeStateFaceClass } from \"../../styles/state-face\";\nimport { selfFocusRingClass } from \"../../styles/utils\";\n\n// Runtime-free recipe so other components can borrow it without Button's client graph.\n// The state face composes two targets. `native` covers a native <button> that borrows\n// the recipe, and `data` covers Base UI roots that never match `:disabled`, such as\n// `render={<a />}` or `focusableWhenDisabled`. Both carry the `aria-disabled` arm, which\n// covers `isVisuallyDisabled` and a consumer's own `aria-disabled`. No target drops pointer events, so a Tooltip on a\n// disabled button still opens, and Base UI already cancels clicks on a disabled root.\n// Hover and press styles use the `enabled-hover:` and `enabled-active:` variants from\n// fuse.css, so a disabled root never changes fill, border, text or position under the\n// pointer. `aria-expanded:` follows an open popup, not the pointer, so it has no gate.\n// The text and icon sizes take their box from the control-size recipe: `default` is the md\n// label, `icon*` the squares. The labels replace the control inset with Button's own,\n// `--control-px-button-*`, which comfortable density widens to the customer-facing\n// reference's side padding while fields, Select and Toggle keep the control inset. The icon\n// edge follows it: `--control-px-button-icon-*` replaces the control icon edge, so a leading\n// or trailing icon does not sit tight against one end of a wide button. The xs\n// glyph size and `icon-inline`, a square as tall as the surrounding line that follows no\n// density, stay local.\n// Every size rounds with the theme's `--radius-button`. The arbitrary value keeps\n// tailwind-merge able to replace it with a consumer `rounded-*` class, which the custom\n// `rounded-button` utility would not be.\n// Inside a ButtonGroup a button keeps the group radius, `rounded-md`, not the button role.\n// The group joins its buttons edge to edge, often with inputs and text, into one bar that\n// rounds like a field, and a pill button would bulge out of that outline.\n// The pointer cursor is the library's policy for an interactive control, as on the\n// Accordion trigger and the selection labels. The state face's `disabled:`,\n// `data-disabled:` and `aria-disabled:` cursors are variants, so they sort after this\n// plain utility and a disabled button keeps `not-allowed`.\n// While Button renders a pending indicator it stamps `data-pending-indicator`, and the\n// recipe then hides the button's own leading and bare direct SVG children, so the indicator\n// takes a leading icon's place, an icon-only square shows the indicator alone, and a spinner\n// a consumer still places by hand is not doubled. A trailing `data-icon=\"inline-end\"` icon\n// stays, as its marker keeps the end inset tight either way, and text stays. With\n// `pendingIndicator={null}` the attribute is absent and nothing hides.\n// The outline border reads the theme's `--button-outline` at `--button-outline-width`: a 1px\n// `--border` hairline in internal themes and the reference's 2px ring in the text color in\n// external ones. A host without themes.css declares neither, so both fall back to the 1px\n// `--border` hairline. Only the hairline casts `shadow-xs`, so the shadow spells out\n// Tailwind's `shadow-xs` value as a function of the width, which a host `--shadow-xs`\n// override does not reach. It equals `shadow-xs` at 1px. From 2px its blur is 0 and its\n// spread plus blur plus y offset is negative, so it stays inside the border box, where an\n// outer shadow never paints. It\n// starts with two plain lengths, so tailwind-merge still files it as a shadow, and a\n// consumer's own `shadow-*` utility replaces it.\nexport const buttonVariants = tv({\n  base: cn(\n    \"group/button font-medium box-border inline-flex shrink-0 cursor-pointer items-center justify-center rounded-(--radius-button) border border-transparent bg-clip-padding p-0 whitespace-nowrap transition-[color,background-color,border-color,box-shadow,translate,opacity] select-none in-data-[slot=button-group]:rounded-md enabled-active:not-aria-[haspopup]:translate-y-px [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[pending-indicator]:[&>svg:not([data-icon=inline-end])]:hidden\",\n    selfFocusRingClass,\n    nativeStateFaceClass,\n    dataStateFaceClass\n  ),\n  variants: {\n    variant: {\n      default: \"bg-primary text-primary-foreground enabled-hover:bg-primary/80\",\n      outline:\n        \"border-[length:var(--button-outline-width,1px)] border-button-outline bg-background shadow-[0_1px_max(0px,4px-2*var(--button-outline-width,1px))_min(0px,2px-2*var(--button-outline-width,1px))_rgb(0_0_0/0.05)] aria-expanded:bg-muted aria-expanded:text-foreground enabled-hover:bg-muted enabled-hover:text-foreground\",\n      secondary:\n        \"bg-secondary text-secondary-foreground aria-expanded:bg-secondary aria-expanded:text-secondary-foreground enabled-hover:bg-secondary-hover\",\n      ghost:\n        \"aria-expanded:bg-muted aria-expanded:text-foreground enabled-hover:bg-muted enabled-hover:text-foreground\",\n      destructive:\n        \"border-error/20 bg-error/10 text-error enabled-hover:border-error enabled-hover:bg-error/20\",\n      success:\n        \"border-success/20 bg-success/10 text-success enabled-hover:border-success enabled-hover:bg-success/20\",\n      link: \"text-primary underline-offset-4 enabled-hover:underline\",\n    },\n    size: {\n      default: controlSize({\n        size: \"md\",\n        fit: \"label\",\n        class:\n          \"px-(--control-px-button-md) has-data-[icon=inline-end]:pr-(--control-px-button-icon-md) has-data-[icon=inline-start]:pl-(--control-px-button-icon-md)\",\n      }),\n      xs: controlSize({\n        size: \"xs\",\n        fit: \"label\",\n        class:\n          \"px-(--control-px-button-xs) has-data-[icon=inline-end]:pr-(--control-px-button-icon-xs) has-data-[icon=inline-start]:pl-(--control-px-button-icon-xs) [&_svg:not([class*='size-'])]:size-3\",\n      }),\n      sm: controlSize({\n        size: \"sm\",\n        fit: \"label\",\n        class:\n          \"px-(--control-px-button-sm) has-data-[icon=inline-end]:pr-(--control-px-button-icon-sm) has-data-[icon=inline-start]:pl-(--control-px-button-icon-sm)\",\n      }),\n      lg: controlSize({\n        size: \"lg\",\n        fit: \"label\",\n        class:\n          \"px-(--control-px-button-lg) has-data-[icon=inline-end]:pr-(--control-px-button-icon-lg) has-data-[icon=inline-start]:pl-(--control-px-button-icon-lg)\",\n      }),\n      icon: controlSize({ size: \"md\", fit: \"square\" }),\n      \"icon-xs\": controlSize({ size: \"xs\", fit: \"square\", class: \"[&_svg:not([class*='size-'])]:size-3\" }),\n      \"icon-sm\": controlSize({ size: \"sm\", fit: \"square\" }),\n      \"icon-inline\": \"hit-area-1 aspect-square h-lh w-auto\",\n      \"icon-lg\": controlSize({ size: \"lg\", fit: \"square\" }),\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"default\",\n  },\n});\n"],"mappings":";;;;;;AAkDA,MAAa,iBAAiB,GAAG;CAC/B,MAAM,GACJ,0gBACA,oBACA,sBACA,kBACF;CACA,UAAU;EACR,SAAS;GACP,SAAS;GACT,SACE;GACF,WACE;GACF,OACE;GACF,aACE;GACF,SACE;GACF,MAAM;EACR;EACA,MAAM;GACJ,SAAS,YAAY;IACnB,MAAM;IACN,KAAK;IACL,OACE;GACJ,CAAC;GACD,IAAI,YAAY;IACd,MAAM;IACN,KAAK;IACL,OACE;GACJ,CAAC;GACD,IAAI,YAAY;IACd,MAAM;IACN,KAAK;IACL,OACE;GACJ,CAAC;GACD,IAAI,YAAY;IACd,MAAM;IACN,KAAK;IACL,OACE;GACJ,CAAC;GACD,MAAM,YAAY;IAAE,MAAM;IAAM,KAAK;GAAS,CAAC;GAC/C,WAAW,YAAY;IAAE,MAAM;IAAM,KAAK;IAAU,OAAO;GAAuC,CAAC;GACnG,WAAW,YAAY;IAAE,MAAM;IAAM,KAAK;GAAS,CAAC;GACpD,eAAe;GACf,WAAW,YAAY;IAAE,MAAM;IAAM,KAAK;GAAS,CAAC;EACtD;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CAAC"}

package/components/button/button.d.ts

@@ -1,11 +1,14 @@
 import { buttonVariants } from "./button-variants.js";
-import { ComponentProps, ReactElement } from "react";
+import { ComponentProps, ReactElement, ReactNode } from "react";
 import { VariantProps } from "tailwind-variants";
 import { Button as Button$1 } from "@base-ui/react/button";
 //#region src/components/button/button.d.ts
-type ButtonSize = NonNullable<VariantProps<typeof buttonVariants>["size"]>;
-type IconButtonSize = Extract<ButtonSize, `icon${string}`>;
-type LabelButtonSize = Exclude<ButtonSize, IconButtonSize>;
+/** Every `size` the Button recipe knows: the label sizes plus the square `icon*` sizes. */
+export type ButtonSize = NonNullable<VariantProps<typeof buttonVariants>["size"]>;
+/** The square icon-only sizes. A button at one of these requires an `aria-label`. */
+export type IconButtonSize = Extract<ButtonSize, `icon${string}`>;
+/** The label sizes: `xs`, `sm`, `default` and `lg`. */
+export type LabelButtonSize = Exclude<ButtonSize, IconButtonSize>;
 type ButtonPrimitiveProps = Omit<ComponentProps<typeof Button$1>, "className">;
 type ButtonSharedProps = ButtonPrimitiveProps & Omit<VariantProps<typeof buttonVariants>, "size"> & {
   /** Extra classes, merged last through `cn`. */
@@ -21,10 +24,25 @@ type ButtonSharedProps = ButtonPrimitiveProps & Omit<VariantProps<typeof buttonV
    */
   isVisuallyDisabled?: boolean;
   /**
-   * Disables the element and stamps `data-pending`, blocking activation entirely.
-   * Effective disabled is `disabled || isPending`.
+   * The in-flight state of an async action. Stamps `data-pending` and `aria-busy`, blocks
+   * activation (effective disabled is `disabled || isPending`) and renders the disabled
+   * treatment, but keeps the button in the focus order like `focusableWhenDisabled`, so a
+   * keyboard user who activated it is still on it when the result arrives. Shows the
+   * `pendingIndicator` in the leading icon position meanwhile. An explicit
+   * `focusableWhenDisabled={false}` restores the native `disabled` attribute while pending.
+   * `aria-busy` announces nothing by itself: say what is happening through the label
+   * ("Saving") or a `role="status"` region outside the button.
    */
   isPending?: boolean;
+  /**
+   * What the button shows while pending. Omitted: a spinning `SpinnerGap` in the leading icon
+   * position, and the button's own leading and bare SVG children hide so the spinner takes
+   * their place (a trailing `data-icon="inline-end"` icon stays). A node: rendered in that same
+   * place instead of the spinner, as a decorative `aria-hidden` slot; animate it yourself. `null`
+   * or `false`: no indicator and nothing hidden, so the call site owns the pending markup, for
+   * example a brand button that keeps its logo and centres its own spinner over it.
+   */
+  pendingIndicator?: ReactNode;
   /** Pixels the hit rect is inflated on every side when predicting pointer intent. */
   predictionZoneSize?: number;
   /**
@@ -33,15 +51,36 @@ type ButtonSharedProps = ButtonPrimitiveProps & Omit<VariantProps<typeof buttonV
    */
   onIntent?: () => void;
 };
-export type ButtonProps = (ButtonSharedProps & {
+/**
+ * The props of a button with a visible label: every size except the square `icon*` ones, so
+ * an accessible name is optional. A wrapper that supplies its own label types its props as
+ * `Omit<LabelButtonProps, "children">` and keeps the size union in sync with the recipe.
+ */
+export type LabelButtonProps = ButtonSharedProps & {
   /** Recipe size axis. The `icon*` sizes are square and additionally require an `aria-label`. */
   size?: LabelButtonSize;
-}) | (ButtonSharedProps & {
+};
+/**
+ * The props of a square icon-only button: one of the `icon*` sizes plus the `aria-label` that
+ * names it, since the icon is the whole content.
+ */
+export type IconButtonProps = ButtonSharedProps & {
   /** Recipe size axis. The `icon*` sizes are square and additionally require an `aria-label`. */
   size: IconButtonSize;
   "aria-label": string;
-});
-export declare function Button({ className, variant, size, isVisuallyDisabled, disabled, isPending, predictionZoneSize, onIntent, onMouseDown, ref, ...props }: ButtonProps): ReactElement;
+};
+/**
+ * `LabelButtonProps | IconButtonProps`. `Omit` on this union collapses it and lets an icon
+ * size through without its name; omit from {@link LabelButtonProps} or
+ * {@link IconButtonProps} instead, or distribute the omit over the union.
+ */
+export type ButtonProps = LabelButtonProps | IconButtonProps;
+/**
+ * Triggers an action. Mark a leading or trailing icon child with `data-icon="inline-start"` or
+ * `data-icon="inline-end"`, on your own icon components too, so that side takes the icon
+ * padding instead of the wider label padding. The attribute must reach the rendered element.
+ */
+export declare function Button({ className, variant, size, isVisuallyDisabled, disabled, isPending, pendingIndicator, predictionZoneSize, onIntent, onMouseDown, children, ref, ...props }: ButtonProps): ReactElement;
 export declare namespace Button {
   var displayName: string;
 }

package/components/button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","names":[],"sources":["../../../src/components/button/button.tsx"],"mappings":";;;;;KAaK,aAAa,YAAY,oBAAoB;KAC7C,iBAAiB,QAAQ;KACzB,kBAAkB,QAAQ,YAAY;KAEtC,uBAAuB,KAAK,sBAAsB;KAElD,oBAAoB,uBACvB,KAAK,oBAAoB;;EAEvB;;;;;;;;;;EAUA;;;;;EAKA;;EAEA;;;;;EAKA;;YAGQ,eACP;;EAEC,OAAO;MAER;;EAEC,MAAM;EACN;;wBAGU,SACd,WACA,SACA,MACA,oBACA,UACA,WACA,oBACA,UACA,aACA,QACG,SACF,cAAc;yBAZD;MAAA"}
+{"version":3,"file":"button.d.ts","names":[],"sources":["../../../src/components/button/button.tsx"],"mappings":";;;;;;YAeY,aAAa,YAAY,oBAAoB;;YAG7C,iBAAiB,QAAQ;;YAGzB,kBAAkB,QAAQ,YAAY;KAE7C,uBAAuB,KAAK,sBAAsB;KAElD,oBAAoB,uBACvB,KAAK,oBAAoB;;EAEvB;;;;;;;;;;EAUA;;;;;;;;;;;EAWA;;;;;;;;;EASA,mBAAmB;;EAEnB;;;;;EAKA;;;;;;;YAQQ,mBAAmB;;EAE7B,OAAO;;;;;;YAOG,kBAAkB;;EAE5B,MAAM;EACN;;;;;;;YAQU,cAAc,mBAAmB;;;;;;wBAO7B,SACd,WACA,SACA,MACA,oBACA,UACA,WACA,kBACA,oBACA,UACA,aACA,UACA,QACG,SACF,cAAc;yBAdD;MAAA"}

package/components/button/button.js

@@ -2,22 +2,34 @@
 import { cn } from "../../styles/cn.js";
 import { useMergedRefs } from "../../hooks/use-merged-refs.js";
 import { usePredictedEvents } from "../../hooks/use-predicted-events.js";
+import { SpinnerGap } from "../../icons/generated/spinner-gap.js";
 import { definedProps } from "../../internal/defined-props.js";
 import { buttonVariants } from "./button-variants.js";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Button as Button$1 } from "@base-ui/react/button";
 //#region src/components/button/button.tsx
-function Button({ className, variant, size, isVisuallyDisabled = false, disabled = false, isPending = false, predictionZoneSize = 30, onIntent, onMouseDown, ref, ...props }) {
+/**
+* Triggers an action. Mark a leading or trailing icon child with `data-icon="inline-start"` or
+* `data-icon="inline-end"`, on your own icon components too, so that side takes the icon
+* padding instead of the wider label padding. The attribute must reach the rendered element.
+*/
+function Button({ className, variant, size, isVisuallyDisabled = false, disabled = false, isPending = false, pendingIndicator, predictionZoneSize = 30, onIntent, onMouseDown, children, ref, ...props }) {
 	const { ref: predictedRef } = usePredictedEvents({
 		predictionZoneSize,
 		onIntent,
 		enabled: !disabled && !isPending && !isVisuallyDisabled && onIntent !== void 0
 	});
 	const mergedRef = useMergedRefs(ref, onIntent === void 0 ? null : predictedRef);
-	return /* @__PURE__ */ jsx(Button$1, {
+	const showsIndicator = isPending && pendingIndicator !== null && pendingIndicator !== false;
+	return /* @__PURE__ */ jsxs(Button$1, {
 		"data-slot": "button",
 		"data-pending": isPending || void 0,
+		"data-pending-indicator": showsIndicator || void 0,
 		disabled: disabled || isPending,
+		...definedProps({
+			focusableWhenDisabled: isPending || void 0,
+			"aria-busy": isPending || void 0
+		}),
 		...definedProps({ "aria-disabled": isVisuallyDisabled || void 0 }),
 		className: cn(buttonVariants({
 			variant,
@@ -28,7 +40,14 @@ function Button({ className, variant, size, isVisuallyDisabled = false, disabled
 			onMouseDown?.(event);
 		},
 		...definedProps(props),
-		ref: mergedRef
+		ref: mergedRef,
+		children: [showsIndicator ? /* @__PURE__ */ jsx("span", {
+			"data-slot": "button-pending-indicator",
+			"data-icon": "inline-start",
+			"aria-hidden": true,
+			className: "pointer-events-none inline-flex shrink-0 items-center justify-center",
+			children: pendingIndicator ?? /* @__PURE__ */ jsx(SpinnerGap, { className: "animate-spin" })
+		}) : null, children]
 	});
 }
 Button.displayName = "Button";

package/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":["ButtonPrimitive"],"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, ReactElement } from \"react\";\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport type { VariantProps } from \"tailwind-variants\";\n\nimport { useMergedRefs } from \"../../hooks/use-merged-refs\";\nimport { usePredictedEvents } from \"../../hooks/use-predicted-events\";\nimport { definedProps } from \"../../internal/defined-props\";\nimport { cn } from \"../../styles/cn\";\nimport { buttonVariants } from \"./button-variants\";\n\ntype ButtonSize = NonNullable<VariantProps<typeof buttonVariants>[\"size\"]>;\ntype IconButtonSize = Extract<ButtonSize, `icon${string}`>;\ntype LabelButtonSize = Exclude<ButtonSize, IconButtonSize>;\n\ntype ButtonPrimitiveProps = Omit<ComponentProps<typeof ButtonPrimitive>, \"className\">;\n\ntype ButtonSharedProps = ButtonPrimitiveProps &\n  Omit<VariantProps<typeof buttonVariants>, \"size\"> & {\n    /** Extra classes, merged last through `cn`. */\n    className?: string;\n    /**\n     * Stamps `aria-disabled` (an explicit consumer value wins), which renders the disabled\n     * treatment (`opacity-50`, the `not-allowed` cursor, no hover or press paint), and\n     * suppresses focus-on-press while the button stays fully interactive — click, keyboard\n     * and focus-visible all still work, and a Tooltip on it still opens. For \"looks\n     * disabled but explains itself on activation\" flows. The treatment keys off\n     * `aria-disabled`, so an explicit `aria-disabled={false}` also turns it off: the button\n     * then looks and announces enabled and only the focus-on-press suppression remains.\n     */\n    isVisuallyDisabled?: boolean;\n    /**\n     * Disables the element and stamps `data-pending`, blocking activation entirely.\n     * Effective disabled is `disabled || isPending`.\n     */\n    isPending?: boolean;\n    /** Pixels the hit rect is inflated on every side when predicting pointer intent. */\n    predictionZoneSize?: number;\n    /**\n     * Predictive-prefetch callback. Fires once when the pointer's predicted trajectory\n     * lands inside the inflated hit rect; browsers without the prediction API fail soft.\n     */\n    onIntent?: () => void;\n  };\n\nexport type ButtonProps =\n  | (ButtonSharedProps & {\n      /** Recipe size axis. The `icon*` sizes are square and additionally require an `aria-label`. */\n      size?: LabelButtonSize;\n    })\n  | (ButtonSharedProps & {\n      /** Recipe size axis. The `icon*` sizes are square and additionally require an `aria-label`. */\n      size: IconButtonSize;\n      \"aria-label\": string;\n    });\n\nexport function Button({\n  className,\n  variant,\n  size,\n  isVisuallyDisabled = false,\n  disabled = false,\n  isPending = false,\n  predictionZoneSize = 30,\n  onIntent,\n  onMouseDown,\n  ref,\n  ...props\n}: ButtonProps): ReactElement {\n  const { ref: predictedRef } = usePredictedEvents({\n    predictionZoneSize,\n    onIntent,\n    enabled: !disabled && !isPending && !isVisuallyDisabled && onIntent !== undefined,\n  });\n  const mergedRef = useMergedRefs(ref, onIntent === undefined ? null : predictedRef);\n\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      data-pending={isPending || undefined}\n      disabled={disabled || isPending}\n      // Announced as unavailable without being disabled: the button still activates so\n      // the flow that explains itself can run. An explicit consumer value wins through the\n      // later {...definedProps(props)} spread. When not visually disabled the key is omitted,\n      // not undefined, so Base UI's own aria-disabled (focusableWhenDisabled, non-native\n      // disabled) survives.\n      {...definedProps({ \"aria-disabled\": isVisuallyDisabled || undefined })}\n      className={cn(buttonVariants({ variant, size }), className)}\n      onMouseDown={(event) => {\n        if (isVisuallyDisabled) {\n          event.preventDefault();\n        }\n        onMouseDown?.(event);\n      }}\n      // Filtered so a forwarded undefined cannot erase what Base UI's Button sets itself,\n      // such as aria-disabled, type and role.\n      {...definedProps(props)}\n      ref={mergedRef}\n    />\n  );\n}\n\nButton.displayName = \"Button\";\n"],"mappings":";;;;;;;;;AA0DA,SAAgB,OAAO,EACrB,WACA,SACA,MACA,qBAAqB,OACrB,WAAW,OACX,YAAY,OACZ,qBAAqB,IACrB,UACA,aACA,KACA,GAAG,SACyB;CAC5B,MAAM,EAAE,KAAK,iBAAiB,mBAAmB;EAC/C;EACA;EACA,SAAS,CAAC,YAAY,CAAC,aAAa,CAAC,sBAAsB,aAAa,KAAA;CAC1E,CAAC;CACD,MAAM,YAAY,cAAc,KAAK,aAAa,KAAA,IAAY,OAAO,YAAY;CAEjF,OACE,oBAACA,UAAD;EACE,aAAU;EACV,gBAAc,aAAa,KAAA;EAC3B,UAAU,YAAY;EAMtB,GAAI,aAAa,EAAE,iBAAiB,sBAAsB,KAAA,EAAU,CAAC;EACrE,WAAW,GAAG,eAAe;GAAE;GAAS;EAAK,CAAC,GAAG,SAAS;EAC1D,cAAc,UAAU;GACtB,IAAI,oBACF,MAAM,eAAe;GAEvB,cAAc,KAAK;EACrB;EAGA,GAAI,aAAa,KAAK;EACtB,KAAK;CACN,CAAA;AAEL;AAEA,OAAO,cAAc"}
+{"version":3,"file":"button.js","names":["ButtonPrimitive"],"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, ReactElement, ReactNode } from \"react\";\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport type { VariantProps } from \"tailwind-variants\";\n\nimport { useMergedRefs } from \"../../hooks/use-merged-refs\";\nimport { usePredictedEvents } from \"../../hooks/use-predicted-events\";\nimport { SpinnerGap } from \"../../icons/generated/spinner-gap\";\nimport { definedProps } from \"../../internal/defined-props\";\nimport { cn } from \"../../styles/cn\";\nimport { buttonVariants } from \"./button-variants\";\n\n/** Every `size` the Button recipe knows: the label sizes plus the square `icon*` sizes. */\nexport type ButtonSize = NonNullable<VariantProps<typeof buttonVariants>[\"size\"]>;\n\n/** The square icon-only sizes. A button at one of these requires an `aria-label`. */\nexport type IconButtonSize = Extract<ButtonSize, `icon${string}`>;\n\n/** The label sizes: `xs`, `sm`, `default` and `lg`. */\nexport type LabelButtonSize = Exclude<ButtonSize, IconButtonSize>;\n\ntype ButtonPrimitiveProps = Omit<ComponentProps<typeof ButtonPrimitive>, \"className\">;\n\ntype ButtonSharedProps = ButtonPrimitiveProps &\n  Omit<VariantProps<typeof buttonVariants>, \"size\"> & {\n    /** Extra classes, merged last through `cn`. */\n    className?: string;\n    /**\n     * Stamps `aria-disabled` (an explicit consumer value wins), which renders the disabled\n     * treatment (`opacity-50`, the `not-allowed` cursor, no hover or press paint), and\n     * suppresses focus-on-press while the button stays fully interactive — click, keyboard\n     * and focus-visible all still work, and a Tooltip on it still opens. For \"looks\n     * disabled but explains itself on activation\" flows. The treatment keys off\n     * `aria-disabled`, so an explicit `aria-disabled={false}` also turns it off: the button\n     * then looks and announces enabled and only the focus-on-press suppression remains.\n     */\n    isVisuallyDisabled?: boolean;\n    /**\n     * The in-flight state of an async action. Stamps `data-pending` and `aria-busy`, blocks\n     * activation (effective disabled is `disabled || isPending`) and renders the disabled\n     * treatment, but keeps the button in the focus order like `focusableWhenDisabled`, so a\n     * keyboard user who activated it is still on it when the result arrives. Shows the\n     * `pendingIndicator` in the leading icon position meanwhile. An explicit\n     * `focusableWhenDisabled={false}` restores the native `disabled` attribute while pending.\n     * `aria-busy` announces nothing by itself: say what is happening through the label\n     * (\"Saving\") or a `role=\"status\"` region outside the button.\n     */\n    isPending?: boolean;\n    /**\n     * What the button shows while pending. Omitted: a spinning `SpinnerGap` in the leading icon\n     * position, and the button's own leading and bare SVG children hide so the spinner takes\n     * their place (a trailing `data-icon=\"inline-end\"` icon stays). A node: rendered in that same\n     * place instead of the spinner, as a decorative `aria-hidden` slot; animate it yourself. `null`\n     * or `false`: no indicator and nothing hidden, so the call site owns the pending markup, for\n     * example a brand button that keeps its logo and centres its own spinner over it.\n     */\n    pendingIndicator?: ReactNode;\n    /** Pixels the hit rect is inflated on every side when predicting pointer intent. */\n    predictionZoneSize?: number;\n    /**\n     * Predictive-prefetch callback. Fires once when the pointer's predicted trajectory\n     * lands inside the inflated hit rect; browsers without the prediction API fail soft.\n     */\n    onIntent?: () => void;\n  };\n\n/**\n * The props of a button with a visible label: every size except the square `icon*` ones, so\n * an accessible name is optional. A wrapper that supplies its own label types its props as\n * `Omit<LabelButtonProps, \"children\">` and keeps the size union in sync with the recipe.\n */\nexport type LabelButtonProps = ButtonSharedProps & {\n  /** Recipe size axis. The `icon*` sizes are square and additionally require an `aria-label`. */\n  size?: LabelButtonSize;\n};\n\n/**\n * The props of a square icon-only button: one of the `icon*` sizes plus the `aria-label` that\n * names it, since the icon is the whole content.\n */\nexport type IconButtonProps = ButtonSharedProps & {\n  /** Recipe size axis. The `icon*` sizes are square and additionally require an `aria-label`. */\n  size: IconButtonSize;\n  \"aria-label\": string;\n};\n\n/**\n * `LabelButtonProps | IconButtonProps`. `Omit` on this union collapses it and lets an icon\n * size through without its name; omit from {@link LabelButtonProps} or\n * {@link IconButtonProps} instead, or distribute the omit over the union.\n */\nexport type ButtonProps = LabelButtonProps | IconButtonProps;\n\n/**\n * Triggers an action. Mark a leading or trailing icon child with `data-icon=\"inline-start\"` or\n * `data-icon=\"inline-end\"`, on your own icon components too, so that side takes the icon\n * padding instead of the wider label padding. The attribute must reach the rendered element.\n */\nexport function Button({\n  className,\n  variant,\n  size,\n  isVisuallyDisabled = false,\n  disabled = false,\n  isPending = false,\n  pendingIndicator,\n  predictionZoneSize = 30,\n  onIntent,\n  onMouseDown,\n  children,\n  ref,\n  ...props\n}: ButtonProps): ReactElement {\n  const { ref: predictedRef } = usePredictedEvents({\n    predictionZoneSize,\n    onIntent,\n    enabled: !disabled && !isPending && !isVisuallyDisabled && onIntent !== undefined,\n  });\n  const mergedRef = useMergedRefs(ref, onIntent === undefined ? null : predictedRef);\n  // `null` and `false` opt out of the indicator and of the icon swap; every other value, `0`\n  // included, is a node to show, and `undefined` is the default spinner.\n  const showsIndicator = isPending && pendingIndicator !== null && pendingIndicator !== false;\n\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      data-pending={isPending || undefined}\n      // Present only while an indicator renders: the recipe's icon swap keys off it, so a\n      // `null` indicator hides nothing.\n      data-pending-indicator={showsIndicator || undefined}\n      disabled={disabled || isPending}\n      // A pending button stays in the focus order and announces busy: Base UI then drops the\n      // native `disabled`, stamps `aria-disabled` and `data-disabled` and still cancels click\n      // and keyboard activation. Both keys are omitted, not undefined, when not pending, so a\n      // consumer's own `focusableWhenDisabled` for a plain `disabled` button flows through the\n      // later {...definedProps(props)} spread, where an explicit value also wins while pending.\n      {...definedProps({\n        focusableWhenDisabled: isPending || undefined,\n        \"aria-busy\": isPending || undefined,\n      })}\n      // Announced as unavailable without being disabled: the button still activates so\n      // the flow that explains itself can run. An explicit consumer value wins through the\n      // later {...definedProps(props)} spread. When not visually disabled the key is omitted,\n      // not undefined, so Base UI's own aria-disabled (focusableWhenDisabled, non-native\n      // disabled) survives.\n      {...definedProps({ \"aria-disabled\": isVisuallyDisabled || undefined })}\n      className={cn(buttonVariants({ variant, size }), className)}\n      onMouseDown={(event) => {\n        if (isVisuallyDisabled) {\n          event.preventDefault();\n        }\n        onMouseDown?.(event);\n      }}\n      // Filtered so a forwarded undefined cannot erase what Base UI's Button sets itself,\n      // such as aria-disabled, type and role.\n      {...definedProps(props)}\n      ref={mergedRef}>\n      {showsIndicator ? (\n        // Decorative: the state is announced through aria-busy and the label. The slot is a\n        // leading icon, so the icon edge tightens the start inset as for any inline-start child,\n        // and the recipe hides the button's own leading and bare SVG children while it shows. A\n        // consumer's node rides in the same slot, so it gets the same place and the same\n        // aria-hidden; only the default spinner animates. `null` never reaches this branch, so\n        // the coalescing only fills in `undefined`.\n        <span\n          data-slot=\"button-pending-indicator\"\n          data-icon=\"inline-start\"\n          aria-hidden\n          className=\"pointer-events-none inline-flex shrink-0 items-center justify-center\">\n          {pendingIndicator ?? <SpinnerGap className=\"animate-spin\" />}\n        </span>\n      ) : null}\n      {children}\n    </ButtonPrimitive>\n  );\n}\n\nButton.displayName = \"Button\";\n"],"mappings":";;;;;;;;;;;;;;;AAoGA,SAAgB,OAAO,EACrB,WACA,SACA,MACA,qBAAqB,OACrB,WAAW,OACX,YAAY,OACZ,kBACA,qBAAqB,IACrB,UACA,aACA,UACA,KACA,GAAG,SACyB;CAC5B,MAAM,EAAE,KAAK,iBAAiB,mBAAmB;EAC/C;EACA;EACA,SAAS,CAAC,YAAY,CAAC,aAAa,CAAC,sBAAsB,aAAa,KAAA;CAC1E,CAAC;CACD,MAAM,YAAY,cAAc,KAAK,aAAa,KAAA,IAAY,OAAO,YAAY;CAGjF,MAAM,iBAAiB,aAAa,qBAAqB,QAAQ,qBAAqB;CAEtF,OACE,qBAACA,UAAD;EACE,aAAU;EACV,gBAAc,aAAa,KAAA;EAG3B,0BAAwB,kBAAkB,KAAA;EAC1C,UAAU,YAAY;EAMtB,GAAI,aAAa;GACf,uBAAuB,aAAa,KAAA;GACpC,aAAa,aAAa,KAAA;EAC5B,CAAC;EAMD,GAAI,aAAa,EAAE,iBAAiB,sBAAsB,KAAA,EAAU,CAAC;EACrE,WAAW,GAAG,eAAe;GAAE;GAAS;EAAK,CAAC,GAAG,SAAS;EAC1D,cAAc,UAAU;GACtB,IAAI,oBACF,MAAM,eAAe;GAEvB,cAAc,KAAK;EACrB;EAGA,GAAI,aAAa,KAAK;EACtB,KAAK;EAhCP,UAAA,CAiCG,iBAOC,oBAAC,QAAD;GACE,aAAU;GACV,aAAU;GACV,eAAA;GACA,WAAU;GACT,UAAA,oBAAoB,oBAAC,YAAD,EAAY,WAAU,eAAgB,CAAA;EACvD,CAAA,IACJ,MACH,QACc;;AAErB;AAEA,OAAO,cAAc"}

package/components/checkbox/checkbox.d.ts

@@ -18,7 +18,10 @@ export type CheckboxGroupProps = {
   label?: string;
   /** Supporting copy, rendered as `Field.Description`. */
   description?: string;
-  /** Error copy, rendered as `Field.Error` when truthy. Accepts any `ReactNode`. */
+  /**
+   * Error copy, rendered as `Field.Error` when truthy. Accepts any `ReactNode`. Falsy, the
+   * field shows its own validation error instead, such as a native constraint message.
+   */
   errorMessage?: ReactNode;
   /**
    * Layout of the group primitive, and of CheckboxItemGroup's stacked-card list.

package/components/checkbox/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","names":[],"sources":["../../../src/components/checkbox/checkbox.tsx"],"mappings":";;;;;;;;;;;wBA4BgB,WACd,cACG,SACF,sBAAsB,WAAkB,QAAQ;yBAHnC;MAAA;;YA+BJ;;EAEV;;EAEA;;EAEA,eAAe;;;;;;;EAOf;;EAEA;;EAEA;;EAEA,YAAY;;;;;EAKZ;;EAEA;;EAEA;;;;;;EAMA;;EAEA;;EAEA;;EAEA,WAAW;;;;;;wBAOG,gBACd,OACA,aACA,cACA,aACA,OACA,cACA,UACA,WACA,YACA,WACA,MACA,IACA,WACA,YACC,qBAAqB;yBAfR;MAAA;;;;;;;;wBA8CA,oBAAoB,gBAA6B,SAAS,qBAAqB;yBAA/E;MAAA;;YAUJ;;EAEV,WAAW;;;;;;EAMX,cAAc;;;;;;wBAOA,sBAAsB,UAAU,eAAe,2BAA2B;yBAA1E;MAAA"}
+{"version":3,"file":"checkbox.d.ts","names":[],"sources":["../../../src/components/checkbox/checkbox.tsx"],"mappings":";;;;;;;;;;;wBA4BgB,WACd,cACG,SACF,sBAAsB,WAAkB,QAAQ;yBAHnC;MAAA;;YA+BJ;;EAEV;;EAEA;;;;;EAKA,eAAe;;;;;;;EAOf;;EAEA;;EAEA;;EAEA,YAAY;;;;;EAKZ;;EAEA;;EAEA;;;;;;EAMA;;EAEA;;EAEA;;EAEA,WAAW;;;;;;wBAOG,gBACd,OACA,aACA,cACA,aACA,OACA,cACA,UACA,WACA,YACA,WACA,MACA,IACA,WACA,YACC,qBAAqB;yBAfR;MAAA;;;;;;;;wBA8CA,oBAAoB,gBAA6B,SAAS,qBAAqB;yBAA/E;MAAA;;YAUJ;;EAEV,WAAW;;;;;;EAMX,cAAc;;;;;;wBAOA,sBAAsB,UAAU,eAAe,2BAA2B;yBAA1E;MAAA"}

package/components/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":["CheckboxPrimitive","CheckboxGroupPrimitive"],"sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, ReactElement, ReactNode } from \"react\";\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\nimport { CheckboxGroup as CheckboxGroupPrimitive } from \"@base-ui/react/checkbox-group\";\n\nimport { Check } from \"../../icons/generated/check\";\nimport { Minus } from \"../../icons/generated/minus\";\nimport { definedProps } from \"../../internal/defined-props\";\nimport { isTextNode } from \"../../internal/is-text-node\";\nimport { cn } from \"../../styles/cn\";\nimport { checkboxCornerClass } from \"../../styles/corner-radius\";\nimport { mergeClassName } from \"../../styles/merge-class-name\";\nimport { dataStateFaceClass } from \"../../styles/state-face\";\nimport { selfFocusRingClass } from \"../../styles/utils\";\nimport { FieldFrame } from \"../field/field-frame\";\nimport { SelectionGroupLayout, SelectionItemGroup } from \"../selection-item/selection-item\";\nimport { selectionGroupOrientationVariants } from \"../selection-item/selection-item-variants\";\n\n/**\n * Unlabeled 16px checkbox over the base-ui primitive. Client component, because base-ui\n * Checkbox owns the checked state. The indicator is internal: Phosphor regular `Minus`\n * when indeterminate, `Check` otherwise. Labeled usage composes `Field.Root` and\n * `Field.Label`, or `CheckboxItem`. A disabled checkbox dims to 50% on its own, also\n * outside a field. Internal themes round the box with the one radius, and external themes\n * keep the reference's 4px corner.\n */\nexport function Checkbox({\n  className,\n  ...props\n}: ComponentProps<typeof CheckboxPrimitive.Root>): ReactElement {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={mergeClassName(\n        className,\n        // The root is a <span>, which never matches `:disabled`, so the state face keys off\n        // Base UI's `data-disabled` and `data-invalid` attributes, plus a consumer's\n        // `aria-invalid`. A checked invalid box keeps its primary border beside the ring.\n        // oxlint-disable-next-line elmera/no-local-focus-ring -- native outline off; ring comes from the shared adapter\n        \"peer shadow-xs ease-out relative flex size-4 max-w-4 shrink-0 items-center justify-center border border-input bg-card transition-[color,background-color,border-color,box-shadow] duration-150 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 after:content-[''] data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground\",\n        checkboxCornerClass,\n        selfFocusRingClass,\n        dataStateFaceClass,\n        \"aria-invalid:aria-checked:border-primary data-invalid:aria-checked:border-primary\"\n      )}\n      {...definedProps(props)}>\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n        render={(indicatorProps, state) => (\n          <span {...indicatorProps}>{state.indeterminate ? <Minus /> : <Check />}</span>\n        )}\n      />\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport type CheckboxGroupProps = {\n  /** Fieldset legend, rendered as `Field.Legend variant=\"label\"`. The legend row is omitted when absent. */\n  label?: string;\n  /** Supporting copy, rendered as `Field.Description`. */\n  description?: string;\n  /** Error copy, rendered as `Field.Error` when truthy. Accepts any `ReactNode`. */\n  errorMessage?: ReactNode;\n  /**\n   * Layout of the group primitive, and of CheckboxItemGroup's stacked-card list.\n   * Vertical: primitive `flex-col gap-2`; item list connected `flex-col gap-0`.\n   * Horizontal: primitive `flex-wrap gap-4`; item list `flex-row flex-wrap gap-4`\n   * with individually rounded cards. Maps through `selectionGroupOrientationVariants`.\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n  /** Controlled selected values. */\n  value?: string[];\n  /** Uncontrolled initial selected values. */\n  defaultValue?: string[];\n  /** Called with the selected `string[]`, not the event. Mapped to base-ui `onValueChange`. */\n  onChange?: (value: string[]) => void;\n  /**\n   * Enables the tri-state `parent` checkbox. Base-ui derives checked/indeterminate\n   * from whether the group's value is a subset of these members.\n   */\n  allValues?: string[];\n  /** Forwards `disabled` to `Field.Root` and the group primitive. */\n  isDisabled?: boolean;\n  /** Forwards `invalid` to `Field.Root`. */\n  isInvalid?: boolean;\n  /**\n   * Set on `Field.Root`, not the group primitive. Base-ui's CheckboxGroup has no\n   * `name`; Field context threads it to member hidden inputs. RadioGroup puts\n   * `name` on its primitive — the face is the same `name?: string` either way.\n   */\n  name?: string;\n  /** Forwarded to the group primitive. */\n  id?: string;\n  /** Extra classes, merged onto the group primitive via `cn`. */\n  className?: string;\n  /** Group members — typically `Checkbox` or `CheckboxItem`. */\n  children?: ReactNode;\n};\n\n/**\n * Labeled checkbox group composite over Field and base-ui CheckboxGroup. Client component,\n * because it wires Field validity and the group primitive.\n */\nexport function CheckboxGroup({\n  label,\n  description,\n  errorMessage,\n  orientation = \"vertical\",\n  value,\n  defaultValue,\n  onChange,\n  allValues,\n  isDisabled,\n  isInvalid,\n  name,\n  id,\n  className,\n  children,\n}: CheckboxGroupProps): ReactElement {\n  return (\n    <FieldFrame\n      heading=\"legend\"\n      label={label}\n      description={description}\n      errorMessage={errorMessage}\n      name={name}\n      invalid={isInvalid}\n      disabled={isDisabled}>\n      <CheckboxGroupPrimitive\n        data-slot=\"checkbox-group\"\n        id={id}\n        value={value}\n        defaultValue={defaultValue}\n        onValueChange={onChange}\n        allValues={allValues}\n        disabled={isDisabled}\n        className={cn(selectionGroupOrientationVariants({ orientation }).group(), className)}>\n        <SelectionGroupLayout orientation={orientation}>{children}</SelectionGroupLayout>\n      </CheckboxGroupPrimitive>\n    </FieldFrame>\n  );\n}\n\n/**\n * Stacked-card group: `CheckboxGroup` wrapping children in the private\n * SelectionItem list (`role=\"list\"`). `orientation` is forwarded to the labeled\n * outer group and to that list: vertical remains connected `flex-col gap-0`;\n * horizontal is `flex-row flex-wrap gap-4` with individually rounded cards.\n */\nexport function CheckboxItemGroup({ orientation = \"vertical\", ...props }: CheckboxGroupProps): ReactElement {\n  // The default is spelled here because the docs API extractor reads a part's\n  // documented defaults out of its own destructuring.\n  return (\n    <CheckboxGroup {...props} orientation={orientation}>\n      <SelectionItemGroup orientation={orientation}>{props.children}</SelectionItemGroup>\n    </CheckboxGroup>\n  );\n}\n\nexport type CheckboxDescriptionProps = {\n  /** Typically a `Checkbox`. */\n  children?: ReactNode;\n  /**\n   * Trailing note. A string renders as a muted `<small>`; any other node renders\n   * intact. Visual-only — not wired to `aria-describedby`. Use Field description\n   * wiring when programmatic association is required.\n   */\n  describedBy?: ReactNode;\n};\n\n/**\n * Inline \"checkbox + trailing note\" row. The note is\n * visual-only; it does not become an accessible description.\n */\nexport function CheckboxDescription({ children, describedBy }: CheckboxDescriptionProps): ReactElement {\n  // Only a string `describedBy` becomes the muted `<small>` note.\n  return (\n    <div className=\"flex items-start gap-2\">\n      {children}\n      {isTextNode(describedBy) ? (\n        <small className=\"text-sm text-muted-foreground\">{describedBy}</small>\n      ) : (\n        describedBy\n      )}\n    </div>\n  );\n}\n\nCheckbox.displayName = \"Checkbox\";\nCheckboxGroup.displayName = \"CheckboxGroup\";\nCheckboxItemGroup.displayName = \"CheckboxItemGroup\";\nCheckboxDescription.displayName = \"CheckboxDescription\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,SAAgB,SAAS,EACvB,WACA,GAAG,SAC2D;CAC9D,OACE,oBAACA,WAAkB,MAAnB;EACE,aAAU;EACV,WAAW,eACT,WAKA,udACA,qBACA,oBACA,oBACA,mFACF;EACA,GAAI,aAAa,KAAK;EACtB,UAAA,oBAACA,WAAkB,WAAnB;GACE,aAAU;GACV,WAAU;GACV,SAAS,gBAAgB,UACvB,oBAAC,QAAD;IAAM,GAAI;IAAiB,UAAA,MAAM,gBAAgB,oBAAC,OAAD,CAAQ,CAAA,IAAI,oBAAC,OAAD,CAAQ,CAAA;GAAQ,CAAA;EAEhF,CAAA;CACqB,CAAA;AAE5B;;;;;AAiDA,SAAgB,cAAc,EAC5B,OACA,aACA,cACA,cAAc,YACd,OACA,cACA,UACA,WACA,YACA,WACA,MACA,IACA,WACA,YACmC;CACnC,OACE,oBAAC,YAAD;EACE,SAAQ;EACD;EACM;EACC;EACR;EACN,SAAS;EACT,UAAU;EACV,UAAA,oBAACC,iBAAD;GACE,aAAU;GACN;GACG;GACO;GACd,eAAe;GACJ;GACX,UAAU;GACV,WAAW,GAAG,kCAAkC,EAAE,YAAY,CAAC,CAAC,CAAC,MAAM,GAAG,SAAS;GACnF,UAAA,oBAAC,sBAAD;IAAmC;IAAc;GAA+B,CAAA;EAC1D,CAAA;CACd,CAAA;AAEhB;;;;;;;AAQA,SAAgB,kBAAkB,EAAE,cAAc,YAAY,GAAG,SAA2C;CAG1G,OACE,oBAAC,eAAD;EAAe,GAAI;EAAoB;EACrC,UAAA,oBAAC,oBAAD;GAAiC;GAAc,UAAA,MAAM;EAA6B,CAAA;CACrE,CAAA;AAEnB;;;;;AAiBA,SAAgB,oBAAoB,EAAE,UAAU,eAAuD;CAErG,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACG,UACA,WAAW,WAAW,IACrB,oBAAC,SAAD;GAAO,WAAU;GAAiC,UAAA;EAAmB,CAAA,IAErE,WAEC;;AAET;AAEA,SAAS,cAAc;AACvB,cAAc,cAAc;AAC5B,kBAAkB,cAAc;AAChC,oBAAoB,cAAc"}
+{"version":3,"file":"checkbox.js","names":["CheckboxPrimitive","CheckboxGroupPrimitive"],"sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, ReactElement, ReactNode } from \"react\";\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\nimport { CheckboxGroup as CheckboxGroupPrimitive } from \"@base-ui/react/checkbox-group\";\n\nimport { Check } from \"../../icons/generated/check\";\nimport { Minus } from \"../../icons/generated/minus\";\nimport { definedProps } from \"../../internal/defined-props\";\nimport { isTextNode } from \"../../internal/is-text-node\";\nimport { cn } from \"../../styles/cn\";\nimport { checkboxCornerClass } from \"../../styles/corner-radius\";\nimport { mergeClassName } from \"../../styles/merge-class-name\";\nimport { dataStateFaceClass } from \"../../styles/state-face\";\nimport { selfFocusRingClass } from \"../../styles/utils\";\nimport { FieldFrame } from \"../field/field-frame\";\nimport { SelectionGroupLayout, SelectionItemGroup } from \"../selection-item/selection-item\";\nimport { selectionGroupOrientationVariants } from \"../selection-item/selection-item-variants\";\n\n/**\n * Unlabeled 16px checkbox over the base-ui primitive. Client component, because base-ui\n * Checkbox owns the checked state. The indicator is internal: Phosphor regular `Minus`\n * when indeterminate, `Check` otherwise. Labeled usage composes `Field.Root` and\n * `Field.Label`, or `CheckboxItem`. A disabled checkbox dims to 50% on its own, also\n * outside a field. Internal themes round the box with the one radius, and external themes\n * keep the reference's 4px corner.\n */\nexport function Checkbox({\n  className,\n  ...props\n}: ComponentProps<typeof CheckboxPrimitive.Root>): ReactElement {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={mergeClassName(\n        className,\n        // The root is a <span>, which never matches `:disabled`, so the state face keys off\n        // Base UI's `data-disabled` and `data-invalid` attributes, plus a consumer's\n        // `aria-invalid`. A checked invalid box keeps its primary border beside the ring.\n        // oxlint-disable-next-line elmera/no-local-focus-ring -- native outline off; ring comes from the shared adapter\n        \"peer shadow-xs ease-out relative flex size-4 max-w-4 shrink-0 items-center justify-center border border-input bg-card transition-[color,background-color,border-color,box-shadow] duration-150 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 after:content-[''] data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground\",\n        checkboxCornerClass,\n        selfFocusRingClass,\n        dataStateFaceClass,\n        \"aria-invalid:aria-checked:border-primary data-invalid:aria-checked:border-primary\"\n      )}\n      {...definedProps(props)}>\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n        render={(indicatorProps, state) => (\n          <span {...indicatorProps}>{state.indeterminate ? <Minus /> : <Check />}</span>\n        )}\n      />\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport type CheckboxGroupProps = {\n  /** Fieldset legend, rendered as `Field.Legend variant=\"label\"`. The legend row is omitted when absent. */\n  label?: string;\n  /** Supporting copy, rendered as `Field.Description`. */\n  description?: string;\n  /**\n   * Error copy, rendered as `Field.Error` when truthy. Accepts any `ReactNode`. Falsy, the\n   * field shows its own validation error instead, such as a native constraint message.\n   */\n  errorMessage?: ReactNode;\n  /**\n   * Layout of the group primitive, and of CheckboxItemGroup's stacked-card list.\n   * Vertical: primitive `flex-col gap-2`; item list connected `flex-col gap-0`.\n   * Horizontal: primitive `flex-wrap gap-4`; item list `flex-row flex-wrap gap-4`\n   * with individually rounded cards. Maps through `selectionGroupOrientationVariants`.\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n  /** Controlled selected values. */\n  value?: string[];\n  /** Uncontrolled initial selected values. */\n  defaultValue?: string[];\n  /** Called with the selected `string[]`, not the event. Mapped to base-ui `onValueChange`. */\n  onChange?: (value: string[]) => void;\n  /**\n   * Enables the tri-state `parent` checkbox. Base-ui derives checked/indeterminate\n   * from whether the group's value is a subset of these members.\n   */\n  allValues?: string[];\n  /** Forwards `disabled` to `Field.Root` and the group primitive. */\n  isDisabled?: boolean;\n  /** Forwards `invalid` to `Field.Root`. */\n  isInvalid?: boolean;\n  /**\n   * Set on `Field.Root`, not the group primitive. Base-ui's CheckboxGroup has no\n   * `name`; Field context threads it to member hidden inputs. RadioGroup puts\n   * `name` on its primitive — the face is the same `name?: string` either way.\n   */\n  name?: string;\n  /** Forwarded to the group primitive. */\n  id?: string;\n  /** Extra classes, merged onto the group primitive via `cn`. */\n  className?: string;\n  /** Group members — typically `Checkbox` or `CheckboxItem`. */\n  children?: ReactNode;\n};\n\n/**\n * Labeled checkbox group composite over Field and base-ui CheckboxGroup. Client component,\n * because it wires Field validity and the group primitive.\n */\nexport function CheckboxGroup({\n  label,\n  description,\n  errorMessage,\n  orientation = \"vertical\",\n  value,\n  defaultValue,\n  onChange,\n  allValues,\n  isDisabled,\n  isInvalid,\n  name,\n  id,\n  className,\n  children,\n}: CheckboxGroupProps): ReactElement {\n  return (\n    <FieldFrame\n      heading=\"legend\"\n      label={label}\n      description={description}\n      errorMessage={errorMessage}\n      name={name}\n      invalid={isInvalid}\n      disabled={isDisabled}>\n      <CheckboxGroupPrimitive\n        data-slot=\"checkbox-group\"\n        id={id}\n        value={value}\n        defaultValue={defaultValue}\n        onValueChange={onChange}\n        allValues={allValues}\n        disabled={isDisabled}\n        className={cn(selectionGroupOrientationVariants({ orientation }).group(), className)}>\n        <SelectionGroupLayout orientation={orientation}>{children}</SelectionGroupLayout>\n      </CheckboxGroupPrimitive>\n    </FieldFrame>\n  );\n}\n\n/**\n * Stacked-card group: `CheckboxGroup` wrapping children in the private\n * SelectionItem list (`role=\"list\"`). `orientation` is forwarded to the labeled\n * outer group and to that list: vertical remains connected `flex-col gap-0`;\n * horizontal is `flex-row flex-wrap gap-4` with individually rounded cards.\n */\nexport function CheckboxItemGroup({ orientation = \"vertical\", ...props }: CheckboxGroupProps): ReactElement {\n  // The default is spelled here because the docs API extractor reads a part's\n  // documented defaults out of its own destructuring.\n  return (\n    <CheckboxGroup {...props} orientation={orientation}>\n      <SelectionItemGroup orientation={orientation}>{props.children}</SelectionItemGroup>\n    </CheckboxGroup>\n  );\n}\n\nexport type CheckboxDescriptionProps = {\n  /** Typically a `Checkbox`. */\n  children?: ReactNode;\n  /**\n   * Trailing note. A string renders as a muted `<small>`; any other node renders\n   * intact. Visual-only — not wired to `aria-describedby`. Use Field description\n   * wiring when programmatic association is required.\n   */\n  describedBy?: ReactNode;\n};\n\n/**\n * Inline \"checkbox + trailing note\" row. The note is\n * visual-only; it does not become an accessible description.\n */\nexport function CheckboxDescription({ children, describedBy }: CheckboxDescriptionProps): ReactElement {\n  // Only a string `describedBy` becomes the muted `<small>` note.\n  return (\n    <div className=\"flex items-start gap-2\">\n      {children}\n      {isTextNode(describedBy) ? (\n        <small className=\"text-sm text-muted-foreground\">{describedBy}</small>\n      ) : (\n        describedBy\n      )}\n    </div>\n  );\n}\n\nCheckbox.displayName = \"Checkbox\";\nCheckboxGroup.displayName = \"CheckboxGroup\";\nCheckboxItemGroup.displayName = \"CheckboxItemGroup\";\nCheckboxDescription.displayName = \"CheckboxDescription\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,SAAgB,SAAS,EACvB,WACA,GAAG,SAC2D;CAC9D,OACE,oBAACA,WAAkB,MAAnB;EACE,aAAU;EACV,WAAW,eACT,WAKA,udACA,qBACA,oBACA,oBACA,mFACF;EACA,GAAI,aAAa,KAAK;EACtB,UAAA,oBAACA,WAAkB,WAAnB;GACE,aAAU;GACV,WAAU;GACV,SAAS,gBAAgB,UACvB,oBAAC,QAAD;IAAM,GAAI;IAAiB,UAAA,MAAM,gBAAgB,oBAAC,OAAD,CAAQ,CAAA,IAAI,oBAAC,OAAD,CAAQ,CAAA;GAAQ,CAAA;EAEhF,CAAA;CACqB,CAAA;AAE5B;;;;;AAoDA,SAAgB,cAAc,EAC5B,OACA,aACA,cACA,cAAc,YACd,OACA,cACA,UACA,WACA,YACA,WACA,MACA,IACA,WACA,YACmC;CACnC,OACE,oBAAC,YAAD;EACE,SAAQ;EACD;EACM;EACC;EACR;EACN,SAAS;EACT,UAAU;EACV,UAAA,oBAACC,iBAAD;GACE,aAAU;GACN;GACG;GACO;GACd,eAAe;GACJ;GACX,UAAU;GACV,WAAW,GAAG,kCAAkC,EAAE,YAAY,CAAC,CAAC,CAAC,MAAM,GAAG,SAAS;GACnF,UAAA,oBAAC,sBAAD;IAAmC;IAAc;GAA+B,CAAA;EAC1D,CAAA;CACd,CAAA;AAEhB;;;;;;;AAQA,SAAgB,kBAAkB,EAAE,cAAc,YAAY,GAAG,SAA2C;CAG1G,OACE,oBAAC,eAAD;EAAe,GAAI;EAAoB;EACrC,UAAA,oBAAC,oBAAD;GAAiC;GAAc,UAAA,MAAM;EAA6B,CAAA;CACrE,CAAA;AAEnB;;;;;AAiBA,SAAgB,oBAAoB,EAAE,UAAU,eAAuD;CAErG,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACG,UACA,WAAW,WAAW,IACrB,oBAAC,SAAD;GAAO,WAAU;GAAiC,UAAA;EAAmB,CAAA,IAErE,WAEC;;AAET;AAEA,SAAS,cAAc;AACvB,cAAc,cAAc;AAC5B,kBAAkB,cAAc;AAChC,oBAAoB,cAAc"}

package/components/data-table/actions-column.d.ts

@@ -0,0 +1,50 @@
+import { DisplayColumnHelper } from "./data-table-source.js";
+import { ReactNode } from "react";
+//#region src/components/data-table/actions-column.d.ts
+/** The cell render context the actions column reads. */
+type ActionsCellContext<TData> = {
+  readonly row: {
+    readonly original: TData;
+  };
+};
+/**
+ * The display column `actionsColumn` builds. It reads only the row's data, so it needs no table
+ * feature.
+ */
+export type ActionsColumnDef<TData> = {
+  readonly id: "actions";
+  readonly enableSorting: false;
+  readonly enableHiding: false;
+  readonly header: () => ReactNode;
+  readonly cell: (context: ActionsCellContext<TData>) => ReactNode;
+};
+/** `DisplayColumnHelper` for `actionsColumn`. */
+export type ActionsColumnHelper<TData, TColumn> = DisplayColumnHelper<ActionsColumnDef<TData>, TColumn>;
+/** Options for `actionsColumn`. */
+export type ActionsColumnOptions<TData> = {
+  /**
+   * The row's own name, such as `(product) => product.name`. Fuse builds the trigger's localized
+   * accessible name from it ("Actions for 4K Ultra HD Monitor"), so no two triggers share a name.
+   */
+  getRowName: (row: TData) => string;
+  /**
+   * The menu items for a row: `DropdownMenu.Item`, including `variant="destructive"`, and
+   * `DropdownMenu.Separator`.
+   */
+  items: (row: TData) => ReactNode;
+};
+/**
+ * Build the row-actions column: `DataTable.RowActions` in each cell, right-aligned, with a
+ * per-row accessible name. The header names the column "Actions" for assistive technology without
+ * visible text, the column shrinks to the trigger, and sorting and hiding are disabled. Clicks in
+ * the open menu do not press a pressable row.
+ *
+ * @template TData - The row data type, inferred from the column helper.
+ * @template TColumn - The column definition type the helper returns.
+ * @param columnHelper - A column helper for the table.
+ * @param options - The row's name and its menu items.
+ * @returns A display column with the id `"actions"`.
+ */
+export declare function actionsColumn<TData, TColumn>(columnHelper: ActionsColumnHelper<TData, TColumn>, { getRowName, items }: ActionsColumnOptions<NoInfer<TData>>): TColumn;
+//#endregion
+//# sourceMappingURL=actions-column.d.ts.map

package/components/data-table/actions-column.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actions-column.d.ts","names":[],"sources":["../../../src/components/data-table/actions-column.tsx"],"mappings":";;;;KAMK,mBAAmB;WAAoB;aAAgB,UAAU;;;;;;;YAM1D,iBAAiB;WAClB;WACA;WACA;WACA,cAAc;WACd,OAAO,SAAS,mBAAmB,WAAW;;;YAI7C,oBAAoB,OAAO,WAAW,oBAAoB,iBAAiB,QAAQ;;YAGnF,qBAAqB;;;;;EAK/B,aAAa,KAAK;;;;;EAKlB,QAAQ,KAAK,UAAU;;;;;;;;;;;;;;wBAeT,cAAc,OAAO,SACnC,cAAc,oBAAoB,OAAO,YACvC,YAAY,SAAS,qBAAqB,QAAQ,UACnD"}

package/components/data-table/actions-column.js

@@ -0,0 +1,31 @@
+import { RowActionsCell, RowActionsHeader } from "./data-table-row-actions.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/data-table/actions-column.tsx
+/**
+* Build the row-actions column: `DataTable.RowActions` in each cell, right-aligned, with a
+* per-row accessible name. The header names the column "Actions" for assistive technology without
+* visible text, the column shrinks to the trigger, and sorting and hiding are disabled. Clicks in
+* the open menu do not press a pressable row.
+*
+* @template TData - The row data type, inferred from the column helper.
+* @template TColumn - The column definition type the helper returns.
+* @param columnHelper - A column helper for the table.
+* @param options - The row's name and its menu items.
+* @returns A display column with the id `"actions"`.
+*/
+function actionsColumn(columnHelper, { getRowName, items }) {
+	return columnHelper.display({
+		id: "actions",
+		enableSorting: false,
+		enableHiding: false,
+		header: () => /* @__PURE__ */ jsx(RowActionsHeader, {}),
+		cell: ({ row }) => /* @__PURE__ */ jsx(RowActionsCell, {
+			name: getRowName(row.original),
+			children: items(row.original)
+		})
+	});
+}
+//#endregion
+export { actionsColumn };
+
+//# sourceMappingURL=actions-column.js.map

package/components/data-table/actions-column.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"actions-column.js","names":[],"sources":["../../../src/components/data-table/actions-column.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nimport { RowActionsCell, RowActionsHeader } from \"./data-table-row-actions\";\nimport type { DisplayColumnHelper } from \"./data-table-source\";\n\n/** The cell render context the actions column reads. */\ntype ActionsCellContext<TData> = { readonly row: { readonly original: TData } };\n\n/**\n * The display column `actionsColumn` builds. It reads only the row's data, so it needs no table\n * feature.\n */\nexport type ActionsColumnDef<TData> = {\n  readonly id: \"actions\";\n  readonly enableSorting: false;\n  readonly enableHiding: false;\n  readonly header: () => ReactNode;\n  readonly cell: (context: ActionsCellContext<TData>) => ReactNode;\n};\n\n/** `DisplayColumnHelper` for `actionsColumn`. */\nexport type ActionsColumnHelper<TData, TColumn> = DisplayColumnHelper<ActionsColumnDef<TData>, TColumn>;\n\n/** Options for `actionsColumn`. */\nexport type ActionsColumnOptions<TData> = {\n  /**\n   * The row's own name, such as `(product) => product.name`. Fuse builds the trigger's localized\n   * accessible name from it (\"Actions for 4K Ultra HD Monitor\"), so no two triggers share a name.\n   */\n  getRowName: (row: TData) => string;\n  /**\n   * The menu items for a row: `DropdownMenu.Item`, including `variant=\"destructive\"`, and\n   * `DropdownMenu.Separator`.\n   */\n  items: (row: TData) => ReactNode;\n};\n\n/**\n * Build the row-actions column: `DataTable.RowActions` in each cell, right-aligned, with a\n * per-row accessible name. The header names the column \"Actions\" for assistive technology without\n * visible text, the column shrinks to the trigger, and sorting and hiding are disabled. Clicks in\n * the open menu do not press a pressable row.\n *\n * @template TData - The row data type, inferred from the column helper.\n * @template TColumn - The column definition type the helper returns.\n * @param columnHelper - A column helper for the table.\n * @param options - The row's name and its menu items.\n * @returns A display column with the id `\"actions\"`.\n */\nexport function actionsColumn<TData, TColumn>(\n  columnHelper: ActionsColumnHelper<TData, TColumn>,\n  { getRowName, items }: ActionsColumnOptions<NoInfer<TData>>\n): TColumn {\n  return columnHelper.display({\n    id: \"actions\",\n    enableSorting: false,\n    enableHiding: false,\n    header: () => <RowActionsHeader />,\n    cell: ({ row }) => <RowActionsCell name={getRowName(row.original)}>{items(row.original)}</RowActionsCell>,\n  });\n}\n"],"mappings":";;;;;;;;;;;;;;;AAiDA,SAAgB,cACd,cACA,EAAE,YAAY,SACL;CACT,OAAO,aAAa,QAAQ;EAC1B,IAAI;EACJ,eAAe;EACf,cAAc;EACd,cAAc,oBAAC,kBAAD,CAAmB,CAAA;EACjC,OAAO,EAAE,UAAU,oBAAC,gBAAD;GAAgB,MAAM,WAAW,IAAI,QAAQ;GAAI,UAAA,MAAM,IAAI,QAAQ;EAAkB,CAAA;CAC1G,CAAC;AACH"}