@devalok/shilp-sutra 0.57.0 → 0.60.0

package/dist/ui/banner.js

@@ -1,36 +1,37 @@
 "use client";
 import { motionProps as e, springs as t } from "./lib/motion.js";
-import { cn as n } from "./lib/utils.js";
-import { Icon as r } from "./icon.js";
-import * as i from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { IconAlertCircle as s, IconAlertTriangle as c, IconCircleCheck as l, IconInfoCircle as u, IconX as d } from "@tabler/icons-react";
-import { AnimatePresence as f, motion as p } from "framer-motion";
-import { cva as m } from "class-variance-authority";
+import { MotionPreference as n } from "../_chunks/motion-preference.js";
+import { cn as r } from "./lib/utils.js";
+import { Icon as i } from "./icon.js";
+import * as a from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { IconAlertCircle as c, IconAlertTriangle as l, IconCircleCheck as u, IconInfoCircle as d, IconX as f } from "@tabler/icons-react";
+import { AnimatePresence as p, motion as m } from "framer-motion";
+import { cva as h } from "class-variance-authority";
 //#region src/ui/banner.tsx
-var h = m("flex flex-wrap items-center gap-ds-04 px-ds-06 py-ds-04 text-body-md font-medium border-b", {
+var g = h("flex flex-wrap items-center gap-ds-04 px-ds-06 py-ds-04 text-body-md font-medium border-b", {
 	variants: { color: {
-		info: "bg-info-3 border-info-7 text-info-11",
-		success: "bg-success-3 border-success-7 text-success-11",
-		warning: "bg-warning-3 border-warning-7 text-warning-11",
-		error: "bg-error-3 border-error-7 text-error-11",
+		info: "bg-palette-soft border-palette-border text-palette-text",
+		success: "bg-palette-soft border-palette-border text-palette-text",
+		warning: "bg-palette-soft border-palette-border text-palette-text",
+		error: "bg-palette-soft border-palette-border text-palette-text",
 		neutral: "bg-surface-panel border-surface-border-strong text-surface-fg [&>svg]:text-surface-fg-muted"
 	} },
 	defaultVariants: { color: "info" }
-}), g = {
-	info: u,
-	success: l,
-	warning: c,
-	error: s,
-	neutral: u
-}, _ = i.forwardRef(({ className: s, color: c = "info", actions: l, onDismiss: u, children: m, ..._ }, v) => {
-	let y = g[c ?? "info"], [b, x] = i.useState(!0), S = i.useCallback(() => {
-		x(!1);
+}), _ = {
+	info: d,
+	success: u,
+	warning: l,
+	error: c,
+	neutral: d
+}, v = a.forwardRef(({ className: c, color: l = "info", actions: u, onDismiss: d, children: h, ...v }, y) => {
+	let b = _[l ?? "info"], [x, S] = a.useState(!0), C = a.useCallback(() => {
+		S(!1);
 	}, []);
-	return /* @__PURE__ */ a(f, {
-		onExitComplete: u,
-		children: b && /* @__PURE__ */ o(p.div, {
-			ref: v,
+	return /* @__PURE__ */ o(n, { children: /* @__PURE__ */ o(p, {
+		onExitComplete: d,
+		children: x && /* @__PURE__ */ s(m.div, {
+			ref: y,
 			initial: {
 				height: "auto",
 				opacity: 1
@@ -40,38 +41,39 @@ var h = m("flex flex-wrap items-center gap-ds-04 px-ds-06 py-ds-04 text-body-md
 				opacity: 0
 			},
 			transition: t.snappy,
-			className: n(h({ color: c }), "overflow-hidden", s),
+			"data-palette": l,
+			className: r(g({ color: l }), "overflow-hidden", c),
 			role: "alert",
-			...e(_),
+			...e(v),
 			children: [
-				/* @__PURE__ */ a(r, {
-					icon: y,
+				/* @__PURE__ */ o(i, {
+					icon: b,
 					size: "md",
 					className: "shrink-0"
 				}),
-				/* @__PURE__ */ a("div", {
+				/* @__PURE__ */ o("div", {
 					className: "min-w-0 flex-1",
-					children: m
+					children: h
 				}),
-				l && /* @__PURE__ */ a("div", {
+				u && /* @__PURE__ */ o("div", {
 					className: "flex shrink-0 items-center gap-ds-02 [&_button]:transition-colors [&_button]:duration-moderate-01 [&_button]:ease-productive-standard [&_button:hover]:bg-current/10",
-					children: l
+					children: u
 				}),
-				u && /* @__PURE__ */ a("button", {
+				d && /* @__PURE__ */ o("button", {
 					type: "button",
-					onClick: S,
+					onClick: C,
 					className: "shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-control-inner transition-colors duration-moderate-01 ease-productive-standard hover:bg-current/10 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9",
 					"aria-label": "Dismiss",
 					title: "Dismiss",
-					children: /* @__PURE__ */ a(r, {
-						icon: d,
+					children: /* @__PURE__ */ o(i, {
+						icon: f,
 						size: "sm"
 					})
 				})
 			]
 		})
-	});
+	}) });
 });
-_.displayName = "Banner";
+v.displayName = "Banner";
 //#endregion
-export { _ as Banner, h as bannerVariants };
+export { v as Banner, g as bannerVariants };

package/dist/ui/banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.js","names":[],"sources":["../../src/ui/banner.tsx"],"sourcesContent":["'use client'\n\nimport { IconAlertCircle, IconAlertTriangle,IconCircleCheck, IconInfoCircle, IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from './icon'\nimport { motionProps,springs } from './lib/motion'\nimport { cn } from './lib/utils'\n\nconst bannerVariants = cva(\n  'flex flex-wrap items-center gap-ds-04 px-ds-06 py-ds-04 text-body-md font-medium border-b',\n  {\n    variants: {\n      color: {\n        info:\n          'bg-info-3 border-info-7 text-info-11',\n        success:\n          'bg-success-3 border-success-7 text-success-11',\n        warning:\n          'bg-warning-3 border-warning-7 text-warning-11',\n        error:\n          'bg-error-3 border-error-7 text-error-11',\n        neutral:\n          'bg-surface-panel border-surface-border-strong text-surface-fg [&>svg]:text-surface-fg-muted',\n      },\n    },\n    defaultVariants: { color: 'info' },\n  },\n)\n\nconst BANNER_ICONS: Record<string, React.ForwardRefExoticComponent<any>> = {\n  info:    IconInfoCircle,\n  success: IconCircleCheck,\n  warning: IconAlertTriangle,\n  error:   IconAlertCircle,\n  neutral: IconInfoCircle,\n}\n\n/**\n * Props for Banner — a full-width notification strip with a colored icon, message, optional\n * action slot, and an optional dismiss button. Renders with `role=\"alert\"`.\n *\n * **Colors:** `info` (default) | `success` | `warning` | `error` | `neutral`\n *\n * **Banner vs Alert:** Banner spans the full width of its container (e.g., top of a page or section).\n * Alert is an inline block inside page content. Use Banner for system-level announcements.\n *\n * **`actions` slot:** Accepts any React node(s) — typically one or more `<Button variant=\"ghost\" size=\"sm\">`.\n * Multiple actions wrap gracefully on narrow viewports.\n * **Dismissible:** Provide `onDismiss` to show an × button.\n *\n * @example\n * // Maintenance warning at top of the dashboard:\n * <Banner color=\"warning\">\n *   Scheduled maintenance on Sunday 2am–4am UTC. Expect brief downtime.\n * </Banner>\n *\n * @example\n * // Success banner with a CTA action button:\n * <Banner color=\"success\" actions={<Button variant=\"ghost\" size=\"sm\">View report</Button>}>\n *   Your export is ready.\n * </Banner>\n *\n * @example\n * // Dismissible info banner for a new feature announcement:\n * <Banner color=\"info\" onDismiss={() => markAsSeen('feature-x')}>\n *   New: You can now assign tasks directly from the calendar view.\n * </Banner>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface BannerProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n    VariantProps<typeof bannerVariants> {\n  /** Action slot — accepts any React node(s), typically ghost Buttons. */\n  actions?: React.ReactNode\n  onDismiss?: () => void\n}\n\nconst Banner = React.forwardRef<HTMLDivElement, BannerProps>(\n  ({ className, color = 'info', actions, onDismiss, children, ...props }, ref) => {\n    const BannerIcon = BANNER_ICONS[color ?? 'info']\n    const [isVisible, setIsVisible] = React.useState(true)\n\n    const handleDismiss = React.useCallback(() => {\n      setIsVisible(false)\n    }, [])\n\n    return (\n      <AnimatePresence onExitComplete={onDismiss}>\n        {isVisible && (\n          <motion.div\n            ref={ref}\n            initial={{ height: 'auto', opacity: 1 }}\n            exit={{ height: 0, opacity: 0 }}\n            transition={springs.snappy}\n            className={cn(bannerVariants({ color }), 'overflow-hidden', className)}\n            role=\"alert\"\n            {...motionProps(props)}\n          >\n            <Icon icon={BannerIcon} size=\"md\" className=\"shrink-0\" />\n            <div className=\"min-w-0 flex-1\">{children}</div>\n            {actions && (\n              <div className=\"flex shrink-0 items-center gap-ds-02 [&_button]:transition-colors [&_button]:duration-moderate-01 [&_button]:ease-productive-standard [&_button:hover]:bg-current/10\">{actions}</div>\n            )}\n            {onDismiss && (\n              <button\n                type=\"button\"\n                onClick={handleDismiss}\n                className=\"shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-control-inner transition-colors duration-moderate-01 ease-productive-standard hover:bg-current/10 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9\"\n                aria-label=\"Dismiss\"\n                title=\"Dismiss\"\n              >\n                <Icon icon={IconX} size=\"sm\" />\n              </button>\n            )}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    )\n  },\n)\nBanner.displayName = 'Banner'\n\nexport { Banner, bannerVariants }\n"],"mappings":";;;;;;;;;;AAWA,IAAM,IAAiB,EACrB,6FACA;CACE,UAAU,EACR,OAAO;EACL,MACE;EACF,SACE;EACF,SACE;EACF,OACE;EACF,SACE;CACJ,EACF;CACA,iBAAiB,EAAE,OAAO,OAAO;AACnC,CACF,GAEM,IAAqE;CACzE,MAAS;CACT,SAAS;CACT,SAAS;CACT,OAAS;CACT,SAAS;AACX,GA0CM,IAAS,EAAM,YAClB,EAAE,cAAW,WAAQ,QAAQ,YAAS,cAAW,aAAU,GAAG,KAAS,MAAQ;CAC9E,IAAM,IAAa,EAAa,KAAS,SACnC,CAAC,GAAW,KAAgB,EAAM,SAAS,EAAI,GAE/C,IAAgB,EAAM,kBAAkB;EAC5C,EAAa,EAAK;CACpB,GAAG,CAAC,CAAC;CAEL,OACE,kBAAC,GAAD;EAAiB,gBAAgB;YAC9B,KACC,kBAAC,EAAO,KAAR;GACO;GACL,SAAS;IAAE,QAAQ;IAAQ,SAAS;GAAE;GACtC,MAAM;IAAE,QAAQ;IAAG,SAAS;GAAE;GAC9B,YAAY,EAAQ;GACpB,WAAW,EAAG,EAAe,EAAE,SAAM,CAAC,GAAG,mBAAmB,CAAS;GACrE,MAAK;GACL,GAAI,EAAY,CAAK;aAPvB;IASE,kBAAC,GAAD;KAAM,MAAM;KAAY,MAAK;KAAK,WAAU;IAAY,CAAA;IACxD,kBAAC,OAAD;KAAK,WAAU;KAAkB;IAAc,CAAA;IAC9C,KACC,kBAAC,OAAD;KAAK,WAAU;eAAwK;IAAa,CAAA;IAErM,KACC,kBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,WAAU;KACV,cAAW;KACX,OAAM;eAEN,kBAAC,GAAD;MAAM,MAAM;MAAO,MAAK;KAAM,CAAA;IACxB,CAAA;GAEA;;CAEC,CAAA;AAErB,CACF;AACA,EAAO,cAAc"}
+{"version":3,"file":"banner.js","names":[],"sources":["../../src/ui/banner.tsx"],"sourcesContent":["'use client'\n\nimport { IconAlertCircle, IconAlertTriangle,IconCircleCheck, IconInfoCircle, IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { MotionPreference } from '../motion/motion-preference'\nimport { Icon } from './icon'\nimport { motionProps,springs } from './lib/motion'\nimport { cn } from './lib/utils'\n\nconst bannerVariants = cva(\n  'flex flex-wrap items-center gap-ds-04 px-ds-06 py-ds-04 text-body-md font-medium border-b',\n  {\n    variants: {\n      // A banner is a full-bleed strip, so it takes the `soft` fill (step 3)\n      // rather than the fainter `subtle` a Card uses — the two are separate\n      // roles precisely so that difference survives.\n      color: {\n        info: 'bg-palette-soft border-palette-border text-palette-text',\n        success: 'bg-palette-soft border-palette-border text-palette-text',\n        warning: 'bg-palette-soft border-palette-border text-palette-text',\n        error: 'bg-palette-soft border-palette-border text-palette-text',\n        // Neutral is a plain strip, not a grey coloured one: surface ground,\n        // full-contrast label, icon stepped back.\n        neutral:\n          'bg-surface-panel border-surface-border-strong text-surface-fg [&>svg]:text-surface-fg-muted',\n      },\n    },\n    defaultVariants: { color: 'info' },\n  },\n)\n\nconst BANNER_ICONS: Record<string, React.ForwardRefExoticComponent<any>> = {\n  info:    IconInfoCircle,\n  success: IconCircleCheck,\n  warning: IconAlertTriangle,\n  error:   IconAlertCircle,\n  neutral: IconInfoCircle,\n}\n\n/**\n * Props for Banner — a full-width notification strip with a colored icon, message, optional\n * action slot, and an optional dismiss button. Renders with `role=\"alert\"`.\n *\n * **Colors:** `info` (default) | `success` | `warning` | `error` | `neutral`\n *\n * **Banner vs Alert:** Banner spans the full width of its container (e.g., top of a page or section).\n * Alert is an inline block inside page content. Use Banner for system-level announcements.\n *\n * **`actions` slot:** Accepts any React node(s) — typically one or more `<Button variant=\"ghost\" size=\"sm\">`.\n * Multiple actions wrap gracefully on narrow viewports.\n * **Dismissible:** Provide `onDismiss` to show an × button.\n *\n * @example\n * // Maintenance warning at top of the dashboard:\n * <Banner color=\"warning\">\n *   Scheduled maintenance on Sunday 2am–4am UTC. Expect brief downtime.\n * </Banner>\n *\n * @example\n * // Success banner with a CTA action button:\n * <Banner color=\"success\" actions={<Button variant=\"ghost\" size=\"sm\">View report</Button>}>\n *   Your export is ready.\n * </Banner>\n *\n * @example\n * // Dismissible info banner for a new feature announcement:\n * <Banner color=\"info\" onDismiss={() => markAsSeen('feature-x')}>\n *   New: You can now assign tasks directly from the calendar view.\n * </Banner>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface BannerProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n    VariantProps<typeof bannerVariants> {\n  /** Action slot — accepts any React node(s), typically ghost Buttons. */\n  actions?: React.ReactNode\n  onDismiss?: () => void\n}\n\nconst Banner = React.forwardRef<HTMLDivElement, BannerProps>(\n  ({ className, color = 'info', actions, onDismiss, children, ...props }, ref) => {\n    const BannerIcon = BANNER_ICONS[color ?? 'info']\n    const [isVisible, setIsVisible] = React.useState(true)\n\n    const handleDismiss = React.useCallback(() => {\n      setIsVisible(false)\n    }, [])\n\n    return (\n      <MotionPreference>\n        <AnimatePresence onExitComplete={onDismiss}>\n          {isVisible && (\n            <motion.div\n              ref={ref}\n              initial={{ height: 'auto', opacity: 1 }}\n              exit={{ height: 0, opacity: 0 }}\n              transition={springs.snappy}\n              data-palette={color}\n              className={cn(bannerVariants({ color }), 'overflow-hidden', className)}\n              role=\"alert\"\n              {...motionProps(props)}\n            >\n              <Icon icon={BannerIcon} size=\"md\" className=\"shrink-0\" />\n              <div className=\"min-w-0 flex-1\">{children}</div>\n              {actions && (\n                <div className=\"flex shrink-0 items-center gap-ds-02 [&_button]:transition-colors [&_button]:duration-moderate-01 [&_button]:ease-productive-standard [&_button:hover]:bg-current/10\">{actions}</div>\n              )}\n              {onDismiss && (\n                <button\n                  type=\"button\"\n                  onClick={handleDismiss}\n                  className=\"shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-control-inner transition-colors duration-moderate-01 ease-productive-standard hover:bg-current/10 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9\"\n                  aria-label=\"Dismiss\"\n                  title=\"Dismiss\"\n                >\n                  <Icon icon={IconX} size=\"sm\" />\n                </button>\n              )}\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </MotionPreference>\n    )\n  },\n)\nBanner.displayName = 'Banner'\n\nexport { Banner, bannerVariants }\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,IAAiB,EACrB,6FACA;CACE,UAAU,EAIR,OAAO;EACL,MAAM;EACN,SAAS;EACT,SAAS;EACT,OAAO;EAGP,SACE;CACJ,EACF;CACA,iBAAiB,EAAE,OAAO,OAAO;AACnC,CACF,GAEM,IAAqE;CACzE,MAAS;CACT,SAAS;CACT,SAAS;CACT,OAAS;CACT,SAAS;AACX,GA0CM,IAAS,EAAM,YAClB,EAAE,cAAW,WAAQ,QAAQ,YAAS,cAAW,aAAU,GAAG,KAAS,MAAQ;CAC9E,IAAM,IAAa,EAAa,KAAS,SACnC,CAAC,GAAW,KAAgB,EAAM,SAAS,EAAI,GAE/C,IAAgB,EAAM,kBAAkB;EAC5C,EAAa,EAAK;CACpB,GAAG,CAAC,CAAC;CAEL,OACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;EAAiB,gBAAgB;YAC9B,KACC,kBAAC,EAAO,KAAR;GACO;GACL,SAAS;IAAE,QAAQ;IAAQ,SAAS;GAAE;GACtC,MAAM;IAAE,QAAQ;IAAG,SAAS;GAAE;GAC9B,YAAY,EAAQ;GACpB,gBAAc;GACd,WAAW,EAAG,EAAe,EAAE,SAAM,CAAC,GAAG,mBAAmB,CAAS;GACrE,MAAK;GACL,GAAI,EAAY,CAAK;aARvB;IAUE,kBAAC,GAAD;KAAM,MAAM;KAAY,MAAK;KAAK,WAAU;IAAY,CAAA;IACxD,kBAAC,OAAD;KAAK,WAAU;KAAkB;IAAc,CAAA;IAC9C,KACC,kBAAC,OAAD;KAAK,WAAU;eAAwK;IAAa,CAAA;IAErM,KACC,kBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,WAAU;KACV,cAAW;KACX,OAAM;eAEN,kBAAC,GAAD;MAAM,MAAM;MAAO,MAAK;KAAM,CAAA;IACxB,CAAA;GAEA;;CAEC,CAAA,EACD,CAAA;AAEtB,CACF;AACA,EAAO,cAAc"}

package/dist/ui/bulk-action-bar.d.ts

@@ -0,0 +1,59 @@
+import { Button } from './button.js';
+import { IconInput } from './lib/icon-input.js';
+import * as React from 'react';
+type ButtonColor = React.ComponentProps<typeof Button>['color'];
+export interface BulkActionBarAction {
+    label: string;
+    icon?: IconInput;
+    onClick: () => void;
+    /** Any Button color. @default 'accent' (or 'error' for destructive). */
+    color?: ButtonColor;
+    disabled?: boolean;
+    /** Show a pending spinner on the action (e.g. slow bulk op in flight). */
+    loading?: boolean;
+    /** Show inline confirmation before executing the action. */
+    requiresConfirmation?: boolean;
+    /** Custom confirmation message. @default 'Are you sure?' */
+    confirmMessage?: string;
+}
+export interface BulkActionBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'color' | 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart' | 'onAnimationEnd' | 'onAnimationIteration' | 'style'> {
+    show: boolean;
+    count: number;
+    onClearSelection: () => void;
+    actions: BulkActionBarAction[];
+    /** Total items available for selection (enables "Select all"). */
+    totalCount?: number;
+    /** Called when the user clicks "Select all". */
+    onSelectAll?: () => void;
+    /**
+     * Where the bar sits, and — as a consequence — whether it is portalled.
+     *
+     * `bottom` / `top` pin it to the viewport and render through a portal to
+     * `document.body`. `inline` renders it in flow, in place, with no portal.
+     *
+     * Position and portalling are one prop rather than two because they are not
+     * independent: a portal escapes its ancestors' stacking context, so a
+     * portalled bar inside a Dialog or Sheet floats over the page rather than
+     * belonging to the overlay. `inline` is the answer there, and it can only
+     * work in flow.
+     *
+     * Every system surveyed before building this — Carbon, Polaris, Material —
+     * renders its bulk bar in flow, anchored to whatever holds the selection.
+     * The default stays `bottom` because that is what this component already did.
+     *
+     * @default 'bottom'
+     */
+    placement?: BulkActionsPlacement;
+}
+/** Where the bar sits. `inline` is the only one that is not portalled. */
+export type BulkActionsPlacement = 'bottom' | 'top' | 'inline';
+/**
+ * BulkActionBar — floating selection toolbar. Follows the ARIA toolbar model:
+ * a single tab stop with roving focus (Arrow keys / Home / End) across ALL
+ * controls (Select-all, actions, Clear), focus landing on the real buttons so
+ * Enter/Space activate them. Arrow direction mirrors under `dir="rtl"`. Escape
+ * clears the selection (or cancels a pending confirmation).
+ */
+declare const BulkActionBar: React.ForwardRefExoticComponent<BulkActionBarProps & React.RefAttributes<HTMLDivElement>>;
+export { BulkActionBar };
+//# sourceMappingURL=bulk-action-bar.d.ts.map

package/dist/ui/bulk-action-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bulk-action-bar.d.ts","sourceRoot":"","sources":["../../src/ui/bulk-action-bar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAIjD,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,OAAO,CAAC,CAAA;AAE/D,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,wEAAwE;IACxE,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,4DAA4D;IAC5D,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,4DAA4D;IAC5D,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,MAAM,WAAW,kBACf,SAAQ,IAAI,CACV,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAEpC,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,aAAa,GAAG,WAAW,GAAG,kBAAkB,GAAG,gBAAgB,GAAG,sBAAsB,GAAG,OAAO,CACzI;IACD,IAAI,EAAE,OAAO,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,gBAAgB,EAAE,MAAM,IAAI,CAAA;IAC5B,OAAO,EAAE,mBAAmB,EAAE,CAAA;IAC9B,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB;;;;;;;;;;;;;;;;;OAiBG;IACH,SAAS,CAAC,EAAE,oBAAoB,CAAA;CACjC;AAED,0EAA0E;AAC1E,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAA;AAS9D;;;;;;GAMG;AACH,QAAA,MAAM,aAAa,2FAqLlB,CAAA;AAGD,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/ui/bulk-action-bar.js

@@ -0,0 +1,145 @@
+"use client";
+import { springs as e } from "./lib/motion.js";
+import { cn as t } from "./lib/utils.js";
+import { Icon as n } from "./icon.js";
+import { BadgeCompound as r } from "../_chunks/badge-group.js";
+import { Button as i } from "./button.js";
+import * as a from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { createPortal as c } from "react-dom";
+import { IconX as l } from "@tabler/icons-react";
+import { AnimatePresence as u, motion as d, useReducedMotion as f } from "framer-motion";
+//#region src/ui/bulk-action-bar.tsx
+var p = {
+	bottom: "fixed bottom-ds-06 start-1/2 z-sticky -translate-x-1/2",
+	top: "fixed top-ds-06 start-1/2 z-sticky -translate-x-1/2",
+	inline: "relative"
+}, m = a.forwardRef(function({ show: m, count: h, onClearSelection: g, actions: _, totalCount: v, onSelectAll: y, placement: b = "bottom", className: x, ...S }, C) {
+	let w = f(), [T, E] = a.useState(!1), [D, O] = a.useState(0), [k, A] = a.useState(null), j = a.useRef([]), M = a.useRef(null), N = v != null && v > h && !!y, P = +!!N, F = P + _.length + 1;
+	a.useEffect(() => {
+		E(!0);
+	}, []), a.useEffect(() => {
+		O(0), A(null);
+	}, [_.length]), a.useEffect(() => {
+		k != null && M.current?.focus();
+	}, [k]);
+	let I = (e) => {
+		let t = (e + F) % F;
+		O(t), j.current[t]?.focus();
+	};
+	function L(e) {
+		if (e.key === "Escape") {
+			e.preventDefault(), k == null ? g() : (A(null), I(D));
+			return;
+		}
+		if (k != null) return;
+		let t = e.currentTarget.dir === "rtl" || document.dir === "rtl", n = t ? "ArrowLeft" : "ArrowRight", r = t ? "ArrowRight" : "ArrowLeft";
+		e.key === n ? (e.preventDefault(), I(D + 1)) : e.key === r ? (e.preventDefault(), I(D - 1)) : e.key === "Home" ? (e.preventDefault(), I(0)) : e.key === "End" && (e.preventDefault(), I(F - 1));
+	}
+	let R = b !== "inline";
+	if (R && !T) return null;
+	let z = w ? { duration: 0 } : e.smooth, B = b === "top" ? {
+		y: -100,
+		opacity: 0
+	} : {
+		y: 100,
+		opacity: 0
+	}, V = /* @__PURE__ */ o(u, { children: m && /* @__PURE__ */ s(d.div, {
+		ref: C,
+		initial: w || !R ? { opacity: 0 } : B,
+		animate: w || !R ? { opacity: 1 } : {
+			y: 0,
+			opacity: 1
+		},
+		exit: w || !R ? { opacity: 0 } : B,
+		transition: z,
+		className: t(p[b], "flex items-center gap-ds-04 rounded-surface bg-surface-overlay px-ds-05 py-ds-03 shadow-floating", x),
+		role: "toolbar",
+		"aria-label": "Bulk actions",
+		onKeyDown: L,
+		...S,
+		children: [
+			/* @__PURE__ */ s(r, {
+				variant: "solid",
+				size: "sm",
+				children: [h, " selected"]
+			}),
+			N && /* @__PURE__ */ s(i, {
+				ref: (e) => {
+					j.current[0] = e;
+				},
+				variant: "link",
+				size: "xs",
+				tabIndex: D === 0 ? 0 : -1,
+				onClick: y,
+				children: ["Select all ", v]
+			}),
+			/* @__PURE__ */ o("div", {
+				className: "flex items-center gap-ds-02",
+				children: _.map((e, t) => {
+					let n = P + t;
+					return k === t ? /* @__PURE__ */ s("div", {
+						role: "group",
+						"aria-live": "assertive",
+						className: "flex items-center gap-ds-02",
+						children: [
+							/* @__PURE__ */ o("span", {
+								className: "whitespace-nowrap text-body-sm text-surface-fg-muted",
+								children: e.confirmMessage ?? "Are you sure?"
+							}),
+							/* @__PURE__ */ o(i, {
+								ref: M,
+								variant: "solid",
+								size: "sm",
+								color: e.color === "error" ? "error" : e.color ?? "accent",
+								onClick: () => {
+									A(null), e.onClick();
+								},
+								children: "Confirm"
+							}),
+							/* @__PURE__ */ o(i, {
+								variant: "ghost",
+								size: "sm",
+								onClick: () => {
+									A(null), I(n);
+								},
+								children: "Cancel"
+							})
+						]
+					}, e.label) : /* @__PURE__ */ o(i, {
+						ref: (e) => {
+							j.current[n] = e;
+						},
+						variant: e.color === "error" ? "solid" : "ghost",
+						size: "sm",
+						color: e.color ?? "accent",
+						disabled: e.disabled,
+						loading: e.loading,
+						startIcon: e.icon ?? void 0,
+						tabIndex: D === n ? 0 : -1,
+						onClick: e.requiresConfirmation ? () => A(t) : e.onClick,
+						children: e.label
+					}, e.label);
+				})
+			}),
+			/* @__PURE__ */ o(i, {
+				ref: (e) => {
+					j.current[F - 1] = e;
+				},
+				variant: "ghost",
+				size: "icon-sm",
+				tabIndex: D === F - 1 ? 0 : -1,
+				onClick: g,
+				"aria-label": "Clear selection",
+				children: /* @__PURE__ */ o(n, {
+					icon: l,
+					size: "sm"
+				})
+			})
+		]
+	}) });
+	return R ? c(V, document.body) : V;
+});
+m.displayName = "BulkActionBar";
+//#endregion
+export { m as BulkActionBar };

package/dist/ui/bulk-action-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bulk-action-bar.js","names":[],"sources":["../../src/ui/bulk-action-bar.tsx"],"sourcesContent":["'use client'\n\nimport { IconX } from '@tabler/icons-react'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { Badge } from './badge'\nimport { Button } from './button'\nimport { Icon } from './icon'\nimport type { IconInput } from './lib/icon-input'\nimport { springs } from './lib/motion'\nimport { cn } from './lib/utils'\n\ntype ButtonColor = React.ComponentProps<typeof Button>['color']\n\nexport interface BulkActionBarAction {\n  label: string\n  icon?: IconInput\n  onClick: () => void\n  /** Any Button color. @default 'accent' (or 'error' for destructive). */\n  color?: ButtonColor\n  disabled?: boolean\n  /** Show a pending spinner on the action (e.g. slow bulk op in flight). */\n  loading?: boolean\n  /** Show inline confirmation before executing the action. */\n  requiresConfirmation?: boolean\n  /** Custom confirmation message. @default 'Are you sure?' */\n  confirmMessage?: string\n}\n\nexport interface BulkActionBarProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    // Keys whose types collide with framer-motion's HTMLMotionProps.\n    'children' | 'color' | 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart' | 'onAnimationEnd' | 'onAnimationIteration' | 'style'\n  > {\n  show: boolean\n  count: number\n  onClearSelection: () => void\n  actions: BulkActionBarAction[]\n  /** Total items available for selection (enables \"Select all\"). */\n  totalCount?: number\n  /** Called when the user clicks \"Select all\". */\n  onSelectAll?: () => void\n  /**\n   * Where the bar sits, and — as a consequence — whether it is portalled.\n   *\n   * `bottom` / `top` pin it to the viewport and render through a portal to\n   * `document.body`. `inline` renders it in flow, in place, with no portal.\n   *\n   * Position and portalling are one prop rather than two because they are not\n   * independent: a portal escapes its ancestors' stacking context, so a\n   * portalled bar inside a Dialog or Sheet floats over the page rather than\n   * belonging to the overlay. `inline` is the answer there, and it can only\n   * work in flow.\n   *\n   * Every system surveyed before building this — Carbon, Polaris, Material —\n   * renders its bulk bar in flow, anchored to whatever holds the selection.\n   * The default stays `bottom` because that is what this component already did.\n   *\n   * @default 'bottom'\n   */\n  placement?: BulkActionsPlacement\n}\n\n/** Where the bar sits. `inline` is the only one that is not portalled. */\nexport type BulkActionsPlacement = 'bottom' | 'top' | 'inline'\n\nconst PLACEMENT_CLASSES: Record<BulkActionsPlacement, string> = {\n  bottom: 'fixed bottom-ds-06 start-1/2 z-sticky -translate-x-1/2',\n  top: 'fixed top-ds-06 start-1/2 z-sticky -translate-x-1/2',\n  // No `fixed`, no transform — it takes part in the layout it is placed in.\n  inline: 'relative',\n}\n\n/**\n * BulkActionBar — floating selection toolbar. Follows the ARIA toolbar model:\n * a single tab stop with roving focus (Arrow keys / Home / End) across ALL\n * controls (Select-all, actions, Clear), focus landing on the real buttons so\n * Enter/Space activate them. Arrow direction mirrors under `dir=\"rtl\"`. Escape\n * clears the selection (or cancels a pending confirmation).\n */\nconst BulkActionBar = React.forwardRef<HTMLDivElement, BulkActionBarProps>(\n  function BulkActionBar(\n    {\n      show,\n      count,\n      onClearSelection,\n      actions,\n      totalCount,\n      onSelectAll,\n      placement = 'bottom',\n      className,\n      ...props\n    },\n    forwardedRef,\n  ) {\n    const reduced = useReducedMotion()\n    const [mounted, setMounted] = React.useState(false)\n    const [focusedIndex, setFocusedIndex] = React.useState(0)\n    const [confirming, setConfirming] = React.useState<number | null>(null)\n    const controlRefs = React.useRef<Array<HTMLButtonElement | null>>([])\n    const confirmRef = React.useRef<HTMLButtonElement | null>(null)\n\n    const hasSelectAll = totalCount != null && totalCount > count && !!onSelectAll\n    const selectAllOffset = hasSelectAll ? 1 : 0\n    const total = selectAllOffset + actions.length + 1 // + Clear\n\n    React.useEffect(() => { setMounted(true) }, [])\n    React.useEffect(() => { setFocusedIndex(0); setConfirming(null) }, [actions.length])\n    // Move focus to Confirm when a confirmation opens.\n    React.useEffect(() => {\n      if (confirming != null) confirmRef.current?.focus()\n    }, [confirming])\n\n    const focusAt = (i: number) => {\n      const clamped = (i + total) % total\n      setFocusedIndex(clamped)\n      controlRefs.current[clamped]?.focus()\n    }\n\n    function handleKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {\n      if (e.key === 'Escape') {\n        e.preventDefault()\n        if (confirming != null) { setConfirming(null); focusAt(focusedIndex) }\n        else onClearSelection()\n        return\n      }\n      if (confirming != null) return // roving suspended during confirm\n      const rtl = e.currentTarget.dir === 'rtl' || document.dir === 'rtl'\n      const fwd = rtl ? 'ArrowLeft' : 'ArrowRight'\n      const back = rtl ? 'ArrowRight' : 'ArrowLeft'\n      if (e.key === fwd) { e.preventDefault(); focusAt(focusedIndex + 1) }\n      else if (e.key === back) { e.preventDefault(); focusAt(focusedIndex - 1) }\n      else if (e.key === 'Home') { e.preventDefault(); focusAt(0) }\n      else if (e.key === 'End') { e.preventDefault(); focusAt(total - 1) }\n    }\n\n    const portalled = placement !== 'inline'\n\n    // The mount gate exists only so `document.body` is available for the\n    // portal. An inline bar has no portal, so gating it would cost a\n    // server-render for no reason and flash on hydrate.\n    if (portalled && !mounted) return null\n\n    const slideTransition = reduced ? { duration: 0 } : springs.smooth\n    // Slide from the edge it is pinned to; inline just fades, since there is\n    // no edge for it to arrive from.\n    const offscreen =\n      placement === 'top' ? { y: -100, opacity: 0 } : { y: 100, opacity: 0 }\n\n    const tree = (\n      <AnimatePresence>\n        {show && (\n          <motion.div\n            ref={forwardedRef}\n            initial={reduced || !portalled ? { opacity: 0 } : offscreen}\n            animate={reduced || !portalled ? { opacity: 1 } : { y: 0, opacity: 1 }}\n            exit={reduced || !portalled ? { opacity: 0 } : offscreen}\n            transition={slideTransition}\n            className={cn(\n              PLACEMENT_CLASSES[placement],\n              'flex items-center gap-ds-04 rounded-surface bg-surface-overlay px-ds-05 py-ds-03 shadow-floating',\n              className,\n            )}\n            role=\"toolbar\"\n            // A stable name describing PURPOSE, not state. The count is\n            // already announced by the Badge below and by the live region on\n            // \"Select all\"; putting it in the toolbar's accessible name too\n            // means the name changes on every selection change, which a screen\n            // reader re-announces. Overridable via aria-label.\n            aria-label=\"Bulk actions\"\n            onKeyDown={handleKeyDown}\n            {...props}\n          >\n            <Badge variant=\"solid\" size=\"sm\">{count} selected</Badge>\n\n            {hasSelectAll && (\n              <Button\n                ref={(el) => { controlRefs.current[0] = el }}\n                variant=\"link\"\n                size=\"xs\"\n                tabIndex={focusedIndex === 0 ? 0 : -1}\n                onClick={onSelectAll}\n              >\n                Select all {totalCount}\n              </Button>\n            )}\n\n            <div className=\"flex items-center gap-ds-02\">\n              {actions.map((action, i) => {\n                const controlIndex = selectAllOffset + i\n                const isConfirming = confirming === i\n                if (isConfirming) {\n                  return (\n                    <div\n                      key={action.label}\n                      role=\"group\"\n                      aria-live=\"assertive\"\n                      className=\"flex items-center gap-ds-02\"\n                    >\n                      <span className=\"whitespace-nowrap text-body-sm text-surface-fg-muted\">\n                        {action.confirmMessage ?? 'Are you sure?'}\n                      </span>\n                      <Button\n                        ref={confirmRef}\n                        variant=\"solid\"\n                        size=\"sm\"\n                        color={action.color === 'error' ? 'error' : (action.color ?? 'accent')}\n                        onClick={() => { setConfirming(null); action.onClick() }}\n                      >\n                        Confirm\n                      </Button>\n                      <Button\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        onClick={() => { setConfirming(null); focusAt(controlIndex) }}\n                      >\n                        Cancel\n                      </Button>\n                    </div>\n                  )\n                }\n                return (\n                  <Button\n                    key={action.label}\n                    ref={(el) => { controlRefs.current[controlIndex] = el }}\n                    // Destructive actions stay solid. Ghost is right for the\n                    // rest — the bar itself is already the affordance — but a\n                    // Delete that looks like every other button is the one\n                    // place where quietness costs something.\n                    variant={action.color === 'error' ? 'solid' : 'ghost'}\n                    size=\"sm\"\n                    color={action.color ?? 'accent'}\n                    disabled={action.disabled}\n                    loading={action.loading}\n                    startIcon={action.icon ?? undefined}\n                    tabIndex={focusedIndex === controlIndex ? 0 : -1}\n                    onClick={action.requiresConfirmation ? () => setConfirming(i) : action.onClick}\n                  >\n                    {action.label}\n                  </Button>\n                )\n              })}\n            </div>\n\n            <Button\n              ref={(el) => { controlRefs.current[total - 1] = el }}\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              tabIndex={focusedIndex === total - 1 ? 0 : -1}\n              onClick={onClearSelection}\n              aria-label=\"Clear selection\"\n            >\n              <Icon icon={IconX} size=\"sm\" />\n            </Button>\n          </motion.div>\n        )}\n      </AnimatePresence>\n    )\n\n    return portalled ? createPortal(tree, document.body) : tree\n  },\n)\nBulkActionBar.displayName = 'BulkActionBar'\n\nexport { BulkActionBar }\n"],"mappings":"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"}

package/dist/ui/button-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../src/ui/button-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAK3C,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;AAEtE,UAAU,uBAAuB;IAC/B,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;IAChC,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC5B,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAA;IAC9B,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC5B,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAGD,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,mBAAmB,CAAA;CAC9B;AAGD,QAAA,MAAM,sBAAsB,8CAA2D,CAAA;AAEvF,wBAAgB,cAAc,4BAE7B;AAED,wBAAgB,kBAAkB,kCAEjC;AAID;;;;GAIG;AACH,wBAAgB,qBAAqB,CACnC,QAAQ,EAAE,mBAAmB,EAC7B,WAAW,EAAE,YAAY,GAAG,UAAU,GACrC,KAAK,CAAC,aAAa,GAAG,SAAS,CAsBjC;AAID,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC3F,2EAA2E;IAC3E,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;IAChC,yEAAyE;IACzE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC5B,0EAA0E;IAC1E,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAA;IAC9B,yEAAyE;IACzE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC5B,wEAAwE;IACxE,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC1B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,oFAAoF;IACpF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAyBD,QAAA,MAAM,WAAW,yFA6DhB,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../src/ui/button-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAK3C,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;AAEtE,UAAU,uBAAuB;IAC/B,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;IAChC,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC5B,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAA;IAC9B,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC5B,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAGD,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,mBAAmB,CAAA;CAC9B;AAGD,QAAA,MAAM,sBAAsB,8CAA2D,CAAA;AAEvF,wBAAgB,cAAc,4BAE7B;AAED,wBAAgB,kBAAkB,kCAEjC;AAID;;;;GAIG;AACH,wBAAgB,qBAAqB,CACnC,QAAQ,EAAE,mBAAmB,EAC7B,WAAW,EAAE,YAAY,GAAG,UAAU,GACrC,KAAK,CAAC,aAAa,GAAG,SAAS,CAsBjC;AAID,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC3F,2EAA2E;IAC3E,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;IAChC,yEAAyE;IACzE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC5B,0EAA0E;IAC1E,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAA;IAC9B,yEAAyE;IACzE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC5B,wEAAwE;IACxE,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC1B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,oFAAoF;IACpF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AA0BD,QAAA,MAAM,WAAW,yFA8DhB,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/ui/button-group.js

@@ -43,29 +43,8 @@ function c(e, t) {
 	}
 }
 function l(e, t) {
-	if (e === "solid") {
-		let e = {
-			accent: "bg-accent-11/20",
-			error: "bg-error-11/20",
-			success: "bg-success-11/20",
-			warning: "bg-warning-11/20",
-			info: "bg-info-11/20",
-			neutral: "bg-neutral-8/30"
-		};
-		return e[t ?? "accent"] ?? e.accent;
-	}
-	if (e === "soft") {
-		let e = {
-			accent: "bg-accent-5",
-			error: "bg-error-5",
-			success: "bg-success-5",
-			warning: "bg-warning-5",
-			info: "bg-info-5",
-			neutral: "bg-neutral-4"
-		};
-		return e[t ?? "accent"] ?? e.accent;
-	}
-	return "bg-surface-border";
+	let n = t === "neutral";
+	return e === "solid" ? n ? "bg-neutral-8/30" : "bg-palette-solid-active/20" : e === "soft" ? n ? "bg-neutral-4" : "bg-palette-soft-active" : "bg-surface-border";
 }
 var u = t.forwardRef(({ className: o, variant: s, color: c, weight: u, shape: d, size: f, disabled: p, orientation: m = "horizontal", attached: h = !0, fullWidth: g, children: _, ...v }, y) => {
 	let b = g || m === "vertical", x = t.useMemo(() => ({
@@ -103,6 +82,7 @@ var u = t.forwardRef(({ className: o, variant: s, color: c, weight: u, shape: d,
 				let u = o > 0 && s !== "outline";
 				return /* @__PURE__ */ r(t.Fragment, { children: [u && /* @__PURE__ */ n("div", {
 					"aria-hidden": !0,
+					"data-palette": c ?? void 0,
 					className: e("shrink-0 self-stretch", m === "horizontal" ? "w-px" : "h-px", l(s ?? void 0, c ?? void 0))
 				}), /* @__PURE__ */ n(a.Provider, {
 					value: { position: w(o) },

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

@@ -1 +1 @@
-{"version":3,"file":"button-group.js","names":[],"sources":["../../src/ui/button-group.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport type { ButtonProps } from './button'\nimport { cn } from './lib/utils'\n\n// ── Context ─────────────────────────────────────────────────────\n\nexport type ButtonGroupPosition = 'first' | 'middle' | 'last' | 'only'\n\ninterface ButtonGroupContextValue {\n  variant?: ButtonProps['variant']\n  color?: ButtonProps['color']\n  weight?: ButtonProps['weight']\n  shape?: ButtonProps['shape']\n  size?: ButtonProps['size']\n  disabled?: boolean\n  orientation?: 'horizontal' | 'vertical'\n  attached?: boolean\n  /** Internal: signals Button children to stretch to fill available width */\n  _stretch?: boolean\n}\n\n// Separate context for position (changes per child) vs group settings (same for all)\ninterface ButtonGroupItemContext {\n  position: ButtonGroupPosition\n}\n\nconst ButtonGroupContext = React.createContext<ButtonGroupContextValue>({})\nconst ButtonGroupItemContext = React.createContext<ButtonGroupItemContext | null>(null)\n\nexport function useButtonGroup() {\n  return React.useContext(ButtonGroupContext)\n}\n\nexport function useButtonGroupItem() {\n  return React.useContext(ButtonGroupItemContext)\n}\n\n// ── Radius helper (consumed by Button internally) ───────────────\n\n/**\n * Returns inline style for border-radius AND border-collapse based on position\n * in an attached ButtonGroup. Inner borders are removed (not overlapped) to\n * guarantee consistent 1px borders regardless of wrapper nesting.\n */\nexport function getGroupPositionStyle(\n  position: ButtonGroupPosition,\n  orientation: 'horizontal' | 'vertical',\n): React.CSSProperties | undefined {\n  if (position === 'only') return undefined\n\n  if (orientation === 'horizontal') {\n    switch (position) {\n      case 'first':\n        return { borderTopRightRadius: 0, borderBottomRightRadius: 0, borderRightWidth: 0 }\n      case 'middle':\n        return { borderRadius: 0, borderRightWidth: 0 }\n      case 'last':\n        return { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }\n    }\n  } else {\n    switch (position) {\n      case 'first':\n        return { borderBottomLeftRadius: 0, borderBottomRightRadius: 0, borderBottomWidth: 0 }\n      case 'middle':\n        return { borderRadius: 0, borderBottomWidth: 0 }\n      case 'last':\n        return { borderTopLeftRadius: 0, borderTopRightRadius: 0 }\n    }\n  }\n}\n\n// ── Props ───────────────────────────────────────────────────────\n\nexport interface ButtonGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {\n  /** Shared variant applied to all child Buttons (children can override). */\n  variant?: ButtonProps['variant']\n  /** Shared color applied to all child Buttons (children can override). */\n  color?: ButtonProps['color']\n  /** Shared weight applied to all child Buttons (children can override). */\n  weight?: ButtonProps['weight']\n  /** Shared shape applied to all child Buttons (children can override). */\n  shape?: ButtonProps['shape']\n  /** Shared size applied to all child Buttons (children can override). */\n  size?: ButtonProps['size']\n  /** Disable all child Buttons. */\n  disabled?: boolean\n  /** Layout direction. @default 'horizontal' */\n  orientation?: 'horizontal' | 'vertical'\n  /** Whether buttons are visually attached (merged) or spaced apart. @default true */\n  attached?: boolean\n  /** Stretch to full width of parent container. */\n  fullWidth?: boolean\n}\n\n// ── Divider colors (for non-outline variants that lack visible borders) ──\n\nfunction getDividerColor(variant?: string, color?: string): string {\n  if (variant === 'solid') {\n    const map: Record<string, string> = {\n      accent: 'bg-accent-11/20', error: 'bg-error-11/20', success: 'bg-success-11/20',\n      warning: 'bg-warning-11/20', info: 'bg-info-11/20', neutral: 'bg-neutral-8/30',\n    }\n    return map[color ?? 'accent'] ?? map.accent\n  }\n  if (variant === 'soft') {\n    const map: Record<string, string> = {\n      accent: 'bg-accent-5', error: 'bg-error-5', success: 'bg-success-5',\n      warning: 'bg-warning-5', info: 'bg-info-5', neutral: 'bg-neutral-4',\n    }\n    return map[color ?? 'accent'] ?? map.accent\n  }\n  // ghost, link, etc.\n  return 'bg-surface-border'\n}\n\n// ── Component ───────────────────────────────────────────────────\n\nconst ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\n  ({ className, variant, color, weight, shape, size, disabled, orientation = 'horizontal', attached = true, fullWidth, children, ...props }, ref) => {\n    const shouldStretch = fullWidth || orientation === 'vertical'\n    const groupValue = React.useMemo(\n      () => ({ variant, color, weight, shape, size, disabled, orientation, attached, _stretch: shouldStretch }),\n      [variant, color, weight, shape, size, disabled, orientation, attached, shouldStretch],\n    )\n\n    const validChildren = React.Children.toArray(children).filter(React.isValidElement)\n    const total = validChildren.length\n\n    function getPosition(index: number): ButtonGroupPosition {\n      if (total === 1) return 'only'\n      if (index === 0) return 'first'\n      if (index === total - 1) return 'last'\n      return 'middle'\n    }\n\n    return (\n      <ButtonGroupContext.Provider value={groupValue}>\n        <div\n          ref={ref}\n          role=\"group\"\n          className={cn(\n            'inline-flex',\n            fullWidth && 'w-full',\n            fullWidth && orientation === 'horizontal' && '[&>*]:flex-1',\n            orientation === 'horizontal' ? 'flex-row' : 'flex-col items-stretch',\n            !attached && 'gap-ds-02',\n            // Focus isolation — lift focused/hovered button above siblings\n            '[&>*:focus-within]:z-10 [&>*:hover]:z-10',\n            className,\n          )}\n          {...props}\n        >\n          {attached\n            ? validChildren.map((child, i) => {\n                const needsDivider = i > 0 && variant !== 'outline'\n                return (\n                  <React.Fragment key={i}>\n                    {needsDivider && (\n                      <div\n                        aria-hidden\n                        className={cn(\n                          'shrink-0 self-stretch',\n                          orientation === 'horizontal' ? 'w-px' : 'h-px',\n                          getDividerColor(variant ?? undefined, color ?? undefined),\n                        )}\n                      />\n                    )}\n                    <ButtonGroupItemContext.Provider value={{ position: getPosition(i) }}>\n                      {child}\n                    </ButtonGroupItemContext.Provider>\n                  </React.Fragment>\n                )\n              })\n            : children}\n        </div>\n      </ButtonGroupContext.Provider>\n    )\n  },\n)\nButtonGroup.displayName = 'ButtonGroup'\n\nexport { ButtonGroup }\n"],"mappings":";;;;;AA6BA,IAAM,IAAqB,EAAM,cAAuC,CAAC,CAAC,GACpE,IAAyB,EAAM,cAA6C,IAAI;AAEtF,SAAgB,IAAiB;CAC/B,OAAO,EAAM,WAAW,CAAkB;AAC5C;AAEA,SAAgB,IAAqB;CACnC,OAAO,EAAM,WAAW,CAAsB;AAChD;AASA,SAAgB,EACd,GACA,GACiC;CAC7B,UAAa,QAEjB,IAAI,MAAgB,cAClB,QAAQ,GAAR;EACE,KAAK,SACH,OAAO;GAAE,sBAAsB;GAAG,yBAAyB;GAAG,kBAAkB;EAAE;EACpF,KAAK,UACH,OAAO;GAAE,cAAc;GAAG,kBAAkB;EAAE;EAChD,KAAK,QACH,OAAO;GAAE,qBAAqB;GAAG,wBAAwB;EAAE;CAC/D;MAEA,QAAQ,GAAR;EACE,KAAK,SACH,OAAO;GAAE,wBAAwB;GAAG,yBAAyB;GAAG,mBAAmB;EAAE;EACvF,KAAK,UACH,OAAO;GAAE,cAAc;GAAG,mBAAmB;EAAE;EACjD,KAAK,QACH,OAAO;GAAE,qBAAqB;GAAG,sBAAsB;EAAE;CAC7D;AAEJ;AA2BA,SAAS,EAAgB,GAAkB,GAAwB;CACjE,IAAI,MAAY,SAAS;EACvB,IAAM,IAA8B;GAClC,QAAQ;GAAmB,OAAO;GAAkB,SAAS;GAC7D,SAAS;GAAoB,MAAM;GAAiB,SAAS;EAC/D;EACA,OAAO,EAAI,KAAS,aAAa,EAAI;CACvC;CACA,IAAI,MAAY,QAAQ;EACtB,IAAM,IAA8B;GAClC,QAAQ;GAAe,OAAO;GAAc,SAAS;GACrD,SAAS;GAAgB,MAAM;GAAa,SAAS;EACvD;EACA,OAAO,EAAI,KAAS,aAAa,EAAI;CACvC;CAEA,OAAO;AACT;AAIA,IAAM,IAAc,EAAM,YACvB,EAAE,cAAW,YAAS,UAAO,WAAQ,UAAO,SAAM,aAAU,iBAAc,cAAc,cAAW,IAAM,cAAW,aAAU,GAAG,KAAS,MAAQ;CACjJ,IAAM,IAAgB,KAAa,MAAgB,YAC7C,IAAa,EAAM,eAChB;EAAE;EAAS;EAAO;EAAQ;EAAO;EAAM;EAAU;EAAa;EAAU,UAAU;CAAc,IACvG;EAAC;EAAS;EAAO;EAAQ;EAAO;EAAM;EAAU;EAAa;EAAU;CAAa,CACtF,GAEM,IAAgB,EAAM,SAAS,QAAQ,CAAQ,CAAC,CAAC,OAAO,EAAM,cAAc,GAC5E,IAAQ,EAAc;CAE5B,SAAS,EAAY,GAAoC;EAIvD,OAHI,MAAU,IAAU,SACpB,MAAU,IAAU,UACpB,MAAU,IAAQ,IAAU,SACzB;CACT;CAEA,OACE,kBAAC,EAAmB,UAApB;EAA6B,OAAO;YAClC,kBAAC,OAAD;GACO;GACL,MAAK;GACL,WAAW,EACT,eACA,KAAa,UACb,KAAa,MAAgB,gBAAgB,gBAC7C,MAAgB,eAAe,aAAa,0BAC5C,CAAC,KAAY,aAEb,4CACA,CACF;GACA,GAAI;aAEH,IACG,EAAc,KAAK,GAAO,MAAM;IAC9B,IAAM,IAAe,IAAI,KAAK,MAAY;IAC1C,OACE,kBAAC,EAAM,UAAP,EAAA,UAAA,CACG,KACC,kBAAC,OAAD;KACE,eAAA;KACA,WAAW,EACT,yBACA,MAAgB,eAAe,SAAS,QACxC,EAAgB,KAAW,KAAA,GAAW,KAAS,KAAA,CAAS,CAC1D;IACD,CAAA,GAEH,kBAAC,EAAuB,UAAxB;KAAiC,OAAO,EAAE,UAAU,EAAY,CAAC,EAAE;eAChE;IAC8B,CAAA,CACnB,EAAA,GAdK,CAcL;GAEpB,CAAC,IACD;EACD,CAAA;CACsB,CAAA;AAEjC,CACF;AACA,EAAY,cAAc"}
+{"version":3,"file":"button-group.js","names":[],"sources":["../../src/ui/button-group.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport type { ButtonProps } from './button'\nimport { cn } from './lib/utils'\n\n// ── Context ─────────────────────────────────────────────────────\n\nexport type ButtonGroupPosition = 'first' | 'middle' | 'last' | 'only'\n\ninterface ButtonGroupContextValue {\n  variant?: ButtonProps['variant']\n  color?: ButtonProps['color']\n  weight?: ButtonProps['weight']\n  shape?: ButtonProps['shape']\n  size?: ButtonProps['size']\n  disabled?: boolean\n  orientation?: 'horizontal' | 'vertical'\n  attached?: boolean\n  /** Internal: signals Button children to stretch to fill available width */\n  _stretch?: boolean\n}\n\n// Separate context for position (changes per child) vs group settings (same for all)\ninterface ButtonGroupItemContext {\n  position: ButtonGroupPosition\n}\n\nconst ButtonGroupContext = React.createContext<ButtonGroupContextValue>({})\nconst ButtonGroupItemContext = React.createContext<ButtonGroupItemContext | null>(null)\n\nexport function useButtonGroup() {\n  return React.useContext(ButtonGroupContext)\n}\n\nexport function useButtonGroupItem() {\n  return React.useContext(ButtonGroupItemContext)\n}\n\n// ── Radius helper (consumed by Button internally) ───────────────\n\n/**\n * Returns inline style for border-radius AND border-collapse based on position\n * in an attached ButtonGroup. Inner borders are removed (not overlapped) to\n * guarantee consistent 1px borders regardless of wrapper nesting.\n */\nexport function getGroupPositionStyle(\n  position: ButtonGroupPosition,\n  orientation: 'horizontal' | 'vertical',\n): React.CSSProperties | undefined {\n  if (position === 'only') return undefined\n\n  if (orientation === 'horizontal') {\n    switch (position) {\n      case 'first':\n        return { borderTopRightRadius: 0, borderBottomRightRadius: 0, borderRightWidth: 0 }\n      case 'middle':\n        return { borderRadius: 0, borderRightWidth: 0 }\n      case 'last':\n        return { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }\n    }\n  } else {\n    switch (position) {\n      case 'first':\n        return { borderBottomLeftRadius: 0, borderBottomRightRadius: 0, borderBottomWidth: 0 }\n      case 'middle':\n        return { borderRadius: 0, borderBottomWidth: 0 }\n      case 'last':\n        return { borderTopLeftRadius: 0, borderTopRightRadius: 0 }\n    }\n  }\n}\n\n// ── Props ───────────────────────────────────────────────────────\n\nexport interface ButtonGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {\n  /** Shared variant applied to all child Buttons (children can override). */\n  variant?: ButtonProps['variant']\n  /** Shared color applied to all child Buttons (children can override). */\n  color?: ButtonProps['color']\n  /** Shared weight applied to all child Buttons (children can override). */\n  weight?: ButtonProps['weight']\n  /** Shared shape applied to all child Buttons (children can override). */\n  shape?: ButtonProps['shape']\n  /** Shared size applied to all child Buttons (children can override). */\n  size?: ButtonProps['size']\n  /** Disable all child Buttons. */\n  disabled?: boolean\n  /** Layout direction. @default 'horizontal' */\n  orientation?: 'horizontal' | 'vertical'\n  /** Whether buttons are visually attached (merged) or spaced apart. @default true */\n  attached?: boolean\n  /** Stretch to full width of parent container. */\n  fullWidth?: boolean\n}\n\n// ── Divider colors (for non-outline variants that lack visible borders) ──\n\n// One line per variant instead of one per variant × colour. The hue comes from\n// `data-palette` on the divider, which mirrors the group's own colour.\n//\n// `neutral` diverges in both cases, and both predate this work: its solid\n// divider is 30% rather than 20% (a flat grey needs more presence than a\n// saturated one to read at 1px), and its soft divider sits one step lighter\n// than the role gives. SplitButton carries the same two, which is a sign the\n// divergence belongs to neutral rather than to either component.\nfunction getDividerColor(variant?: string, color?: string): string {\n  const isNeutral = color === 'neutral'\n  if (variant === 'solid') {\n    return isNeutral ? 'bg-neutral-8/30' : 'bg-palette-solid-active/20'\n  }\n  if (variant === 'soft') {\n    return isNeutral ? 'bg-neutral-4' : 'bg-palette-soft-active'\n  }\n  // ghost, link, etc.\n  return 'bg-surface-border'\n}\n\n// ── Component ───────────────────────────────────────────────────\n\nconst ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\n  ({ className, variant, color, weight, shape, size, disabled, orientation = 'horizontal', attached = true, fullWidth, children, ...props }, ref) => {\n    const shouldStretch = fullWidth || orientation === 'vertical'\n    const groupValue = React.useMemo(\n      () => ({ variant, color, weight, shape, size, disabled, orientation, attached, _stretch: shouldStretch }),\n      [variant, color, weight, shape, size, disabled, orientation, attached, shouldStretch],\n    )\n\n    const validChildren = React.Children.toArray(children).filter(React.isValidElement)\n    const total = validChildren.length\n\n    function getPosition(index: number): ButtonGroupPosition {\n      if (total === 1) return 'only'\n      if (index === 0) return 'first'\n      if (index === total - 1) return 'last'\n      return 'middle'\n    }\n\n    return (\n      <ButtonGroupContext.Provider value={groupValue}>\n        <div\n          ref={ref}\n          role=\"group\"\n          className={cn(\n            'inline-flex',\n            fullWidth && 'w-full',\n            fullWidth && orientation === 'horizontal' && '[&>*]:flex-1',\n            orientation === 'horizontal' ? 'flex-row' : 'flex-col items-stretch',\n            !attached && 'gap-ds-02',\n            // Focus isolation — lift focused/hovered button above siblings\n            '[&>*:focus-within]:z-10 [&>*:hover]:z-10',\n            className,\n          )}\n          {...props}\n        >\n          {attached\n            ? validChildren.map((child, i) => {\n                const needsDivider = i > 0 && variant !== 'outline'\n                return (\n                  <React.Fragment key={i}>\n                    {needsDivider && (\n                      <div\n                        aria-hidden\n                        data-palette={color ?? undefined}\n                        className={cn(\n                          'shrink-0 self-stretch',\n                          orientation === 'horizontal' ? 'w-px' : 'h-px',\n                          getDividerColor(variant ?? undefined, color ?? undefined),\n                        )}\n                      />\n                    )}\n                    <ButtonGroupItemContext.Provider value={{ position: getPosition(i) }}>\n                      {child}\n                    </ButtonGroupItemContext.Provider>\n                  </React.Fragment>\n                )\n              })\n            : children}\n        </div>\n      </ButtonGroupContext.Provider>\n    )\n  },\n)\nButtonGroup.displayName = 'ButtonGroup'\n\nexport { ButtonGroup }\n"],"mappings":";;;;;AA6BA,IAAM,IAAqB,EAAM,cAAuC,CAAC,CAAC,GACpE,IAAyB,EAAM,cAA6C,IAAI;AAEtF,SAAgB,IAAiB;CAC/B,OAAO,EAAM,WAAW,CAAkB;AAC5C;AAEA,SAAgB,IAAqB;CACnC,OAAO,EAAM,WAAW,CAAsB;AAChD;AASA,SAAgB,EACd,GACA,GACiC;CAC7B,UAAa,QAEjB,IAAI,MAAgB,cAClB,QAAQ,GAAR;EACE,KAAK,SACH,OAAO;GAAE,sBAAsB;GAAG,yBAAyB;GAAG,kBAAkB;EAAE;EACpF,KAAK,UACH,OAAO;GAAE,cAAc;GAAG,kBAAkB;EAAE;EAChD,KAAK,QACH,OAAO;GAAE,qBAAqB;GAAG,wBAAwB;EAAE;CAC/D;MAEA,QAAQ,GAAR;EACE,KAAK,SACH,OAAO;GAAE,wBAAwB;GAAG,yBAAyB;GAAG,mBAAmB;EAAE;EACvF,KAAK,UACH,OAAO;GAAE,cAAc;GAAG,mBAAmB;EAAE;EACjD,KAAK,QACH,OAAO;GAAE,qBAAqB;GAAG,sBAAsB;EAAE;CAC7D;AAEJ;AAmCA,SAAS,EAAgB,GAAkB,GAAwB;CACjE,IAAM,IAAY,MAAU;CAQ5B,OAPI,MAAY,UACP,IAAY,oBAAoB,+BAErC,MAAY,SACP,IAAY,iBAAiB,2BAG/B;AACT;AAIA,IAAM,IAAc,EAAM,YACvB,EAAE,cAAW,YAAS,UAAO,WAAQ,UAAO,SAAM,aAAU,iBAAc,cAAc,cAAW,IAAM,cAAW,aAAU,GAAG,KAAS,MAAQ;CACjJ,IAAM,IAAgB,KAAa,MAAgB,YAC7C,IAAa,EAAM,eAChB;EAAE;EAAS;EAAO;EAAQ;EAAO;EAAM;EAAU;EAAa;EAAU,UAAU;CAAc,IACvG;EAAC;EAAS;EAAO;EAAQ;EAAO;EAAM;EAAU;EAAa;EAAU;CAAa,CACtF,GAEM,IAAgB,EAAM,SAAS,QAAQ,CAAQ,CAAC,CAAC,OAAO,EAAM,cAAc,GAC5E,IAAQ,EAAc;CAE5B,SAAS,EAAY,GAAoC;EAIvD,OAHI,MAAU,IAAU,SACpB,MAAU,IAAU,UACpB,MAAU,IAAQ,IAAU,SACzB;CACT;CAEA,OACE,kBAAC,EAAmB,UAApB;EAA6B,OAAO;YAClC,kBAAC,OAAD;GACO;GACL,MAAK;GACL,WAAW,EACT,eACA,KAAa,UACb,KAAa,MAAgB,gBAAgB,gBAC7C,MAAgB,eAAe,aAAa,0BAC5C,CAAC,KAAY,aAEb,4CACA,CACF;GACA,GAAI;aAEH,IACG,EAAc,KAAK,GAAO,MAAM;IAC9B,IAAM,IAAe,IAAI,KAAK,MAAY;IAC1C,OACE,kBAAC,EAAM,UAAP,EAAA,UAAA,CACG,KACC,kBAAC,OAAD;KACE,eAAA;KACA,gBAAc,KAAS,KAAA;KACvB,WAAW,EACT,yBACA,MAAgB,eAAe,SAAS,QACxC,EAAgB,KAAW,KAAA,GAAW,KAAS,KAAA,CAAS,CAC1D;IACD,CAAA,GAEH,kBAAC,EAAuB,UAAxB;KAAiC,OAAO,EAAE,UAAU,EAAY,CAAC,EAAE;eAChE;IAC8B,CAAA,CACnB,EAAA,GAfK,CAeL;GAEpB,CAAC,IACD;EACD,CAAA;CACsB,CAAA;AAEjC,CACF;AACA,EAAY,cAAc"}

package/dist/ui/button.d.ts

@@ -59,7 +59,16 @@ export declare const buttonVariants: (props?: ({
  *   Edit
  * </Button>
  */
-export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, VariantProps<typeof buttonVariants> {
+export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, Omit<VariantProps<typeof buttonVariants>, 'color'> {
+    /**
+     * Palette name. The six built-ins keep their exact previous appearance; any
+     * other palette registered in CSS (`[data-palette='…']`) now works too, which
+     * it could not before.
+     *
+     * Widened from a closed union to `union | (string & {})`, so every existing
+     * value still type-checks — a widening, not a narrowing.
+     */
+    color?: NonNullable<VariantProps<typeof buttonVariants>['color']> | (string & {});
     asChild?: boolean;
     /** Button shape — 'pill' applies rounded-pill for chip/tag-like buttons */
     shape?: 'default' | 'pill';

package/dist/ui/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/ui/button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAMjD,eAAO,MAAM,cAAc;;;;;8EAuF1B,CAAA;AAoDD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC,EAClE,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAC1B,sEAAsE;IACtE,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,qEAAqE;IACrE,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yFAAyF;IACzF,eAAe,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;IAC5C,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACxE,oFAAoF;IACpF,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAE9B;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAA;IAEvD,2EAA2E;IAC3E,eAAe,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAA;IAEjF,+FAA+F;IAC/F,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAED,QAAA,MAAM,MAAM,uFAgSX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/ui/button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAMjD,eAAO,MAAM,cAAc;;;;;8EAiF1B,CAAA;AAoDD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC,EAClE,IAAI,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,EAAE,OAAO,CAAC;IACpD;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAA;IACjF,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAC1B,sEAAsE;IACtE,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,qEAAqE;IACrE,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yFAAyF;IACzF,eAAe,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;IAC5C,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACxE,oFAAoF;IACpF,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAE9B;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAA;IAEvD,2EAA2E;IAC3E,eAAe,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAA;IAEjF,+FAA+F;IAC/F,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAED,QAAA,MAAM,MAAM,uFAySX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,CAAA"}