@particle-academy/react-fancy 5.54.0 → 5.54.1

package/CHANGELOG.md

@@ -11,6 +11,61 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [5.54.1] - 2026-10-21
+
+### Fixed
+
+- **A `Button` narrower than its label now wraps the label inside itself.**
+  The showcase's own "Constrained width" example (104px columns, captioned
+  "multi-word labels stack left-aligned, icon stays put") had its labels
+  spilling past the buttons and over each other: the label carried
+  `whitespace-nowrap`, so text 92-116px wide had nowhere to go in a 54px slot.
+  It now wraps, left-aligned, with the icon staying put beside it; words are
+  never split. An unconstrained button is unchanged -- measured in Chrome, every
+  width and height in the probe row is identical to 5.54.0.
+  - **Want one line with an ellipsis instead?** `labelClassName="truncate"`.
+    The label has `min-w-0` and no white-space class of its own, so `truncate`
+    wins uncontested inside a button whose width you set (`w-full` in a narrow
+    column, `w-24`, `max-w-[120px]`, ...).
+  - **What to DO:** nothing, unless you relied on a squeezed button keeping its
+    label on one line (a flex row narrower than its buttons, a "send →" label
+    whose arrow is part of the text). 4.4.1 made that the default; it is now
+    opt-in: add `labelClassName="whitespace-nowrap"` to that button, or
+    `shrink-0` so the row cannot squeeze it.
+- **`Switch` honours `labelHidden`.** It was ignored, so the label was always
+  drawn. It is now visually hidden (`sr-only`) and still names the control, as
+  on Input, Field, DatePicker and CheckboxGroup.
+- **`aria-*` on a `Switch` now names the switch, not its wrapper.** Rest props
+  were spread on the wrapping `<div>`, so `aria-label` / `aria-labelledby`
+  labelled a div and left the `role="switch"` button unnamed. The split: every
+  `aria-*` prop goes on the button; everything else -- `className`, `style`,
+  `data-*`, event handlers -- stays on the wrapper exactly as before. (In
+  `mode="view"`, where there is no button, `aria-*` stays on the wrapper.)
+- **`Switch`'s unchecked track reads the `border` token** (`--fancy-border` /
+  `--fancy-border-dark`) instead of hard-coded zinc. Set nothing and nothing
+  changes: the fallbacks are today's `zinc-200` / `zinc-600` (the dark one is
+  one step lighter than the role's `zinc-700` default, so a track still reads
+  against a dark surface; listed as a deliberate exception in the token test).
+- **A `MultiSwitch` directly inside a `Tooltip` lost its selected thumb.**
+  Two halves, both fixed. `Tooltip` cloned its child with its own `ref` and
+  `onMouseEnter` / `onMouseLeave` / `onFocus` / `onBlur`, REPLACING the child's;
+  they are now composed, so a child's own ref and handlers keep working. And in
+  React 19 a ref reaches a function component as a plain prop, so the
+  Tooltip's ref arrived in `MultiSwitch`'s rest props and replaced the ref its
+  thumb is measured from; `MultiSwitch` now feeds both. A `ref` you put on a
+  `MultiSwitch` yourself reaches its radiogroup too. If you wrapped the switch
+  in a `<span>` to work around this, the wrapper can go.
+  - The same report said the switch also lost its `className`. It does not:
+    the class is in the DOM and paints in light mode, directly inside a Tooltip
+    or not. In DARK mode a bare `border-green-500` loses to the component's own
+    `dark:border-*`, with or without a Tooltip -- add `dark:border-green-500`.
+
+### Changed
+
+- Docs only: `icon-config.ts`'s comments now say `<Icon name="github-logo" />`
+  resolves the brand mark. fancy-brand-icons 0.4.0 registers every mark as
+  `<brand>-logo`, so a bare `github` is Lucide's icon.
+
 ## [5.54.0] - 2026-10-21
 
 ### Added

package/dist/button.cjs

@@ -1,21 +1,21 @@
 'use strict';
 
 require('./chunk-M5MUGSON.cjs');
-var chunkCAMQ5B3V_cjs = require('./chunk-CAMQ5B3V.cjs');
+var chunkXOXA3QZR_cjs = require('./chunk-XOXA3QZR.cjs');
 require('./chunk-X2FC7ODX.cjs');
 require('./chunk-XCZZVRBY.cjs');
-require('./chunk-QKFOJKVE.cjs');
+require('./chunk-MXWR3T3N.cjs');
 require('./chunk-ZU5Q77OT.cjs');
 
 
 
 Object.defineProperty(exports, "Action", {
   enumerable: true,
-  get: function () { return chunkCAMQ5B3V_cjs.Action; }
+  get: function () { return chunkXOXA3QZR_cjs.Action; }
 });
 Object.defineProperty(exports, "Button", {
   enumerable: true,
-  get: function () { return chunkCAMQ5B3V_cjs.Button; }
+  get: function () { return chunkXOXA3QZR_cjs.Button; }
 });
 //# sourceMappingURL=button.cjs.map
 //# sourceMappingURL=button.cjs.map

package/dist/button.js

@@ -1,8 +1,8 @@
 import './chunk-LQ4ICCN2.js';
-export { Action, Button } from './chunk-26JZ47BJ.js';
+export { Action, Button } from './chunk-45JO5BEZ.js';
 import './chunk-6TBRBN7H.js';
 import './chunk-45BBNJQD.js';
-import './chunk-IVRYSSM7.js';
+import './chunk-J3A4Z2P7.js';
 import './chunk-MMW2JGKZ.js';
 //# sourceMappingURL=button.js.map
 //# sourceMappingURL=button.js.map

package/dist/chat-drawer.cjs

@@ -1,15 +1,15 @@
 'use strict';
 
-var chunkG4M3MCJO_cjs = require('./chunk-G4M3MCJO.cjs');
+var chunkONHT2PDW_cjs = require('./chunk-ONHT2PDW.cjs');
 require('./chunk-AIA5UNQ5.cjs');
-require('./chunk-QKFOJKVE.cjs');
+require('./chunk-MXWR3T3N.cjs');
 require('./chunk-ZU5Q77OT.cjs');
 
 
 
 Object.defineProperty(exports, "ChatDrawer", {
   enumerable: true,
-  get: function () { return chunkG4M3MCJO_cjs.ChatDrawer; }
+  get: function () { return chunkONHT2PDW_cjs.ChatDrawer; }
 });
 //# sourceMappingURL=chat-drawer.cjs.map
 //# sourceMappingURL=chat-drawer.cjs.map

package/dist/chat-drawer.js

@@ -1,6 +1,6 @@
-export { ChatDrawer } from './chunk-QFC736WY.js';
+export { ChatDrawer } from './chunk-WE5WGVVX.js';
 import './chunk-TJ66S5K6.js';
-import './chunk-IVRYSSM7.js';
+import './chunk-J3A4Z2P7.js';
 import './chunk-MMW2JGKZ.js';
 //# sourceMappingURL=chat-drawer.js.map
 //# sourceMappingURL=chat-drawer.js.map

package/dist/chunk-2O5UXH5R.cjs

@@ -0,0 +1,191 @@
+'use strict';
+
+var chunkO3F6DYWR_cjs = require('./chunk-O3F6DYWR.cjs');
+var chunkKJ22KE56_cjs = require('./chunk-KJ22KE56.cjs');
+var chunkL3V3BYVS_cjs = require('./chunk-L3V3BYVS.cjs');
+var chunkSNHU2AI4_cjs = require('./chunk-SNHU2AI4.cjs');
+var chunkZU5Q77OT_cjs = require('./chunk-ZU5Q77OT.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/inputs/Switch/Switch.colors.ts
+var switchTrack = {
+  // The host's colour, from CSS variables -- no dark: variant, because a
+  // host that themes per mode scopes the variables themselves.
+  brand: "bg-brand",
+  slate: "bg-slate-500",
+  gray: "bg-gray-500",
+  zinc: "bg-zinc-500",
+  neutral: "bg-neutral-500",
+  stone: "bg-stone-500",
+  red: "bg-red-500",
+  orange: "bg-orange-500",
+  amber: "bg-amber-500",
+  yellow: "bg-yellow-500",
+  lime: "bg-lime-500",
+  green: "bg-green-500",
+  emerald: "bg-emerald-500",
+  teal: "bg-teal-500",
+  cyan: "bg-cyan-500",
+  sky: "bg-sky-500",
+  blue: "bg-blue-500",
+  indigo: "bg-indigo-500",
+  violet: "bg-violet-500",
+  purple: "bg-purple-500",
+  fuchsia: "bg-fuchsia-500",
+  pink: "bg-pink-500",
+  rose: "bg-rose-500"
+};
+var Switch = react.forwardRef(
+  ({
+    size = "md",
+    dirty,
+    error,
+    label,
+    labelHidden,
+    description,
+    required,
+    disabled,
+    className,
+    id,
+    name,
+    checked: controlledChecked,
+    defaultChecked = false,
+    onCheckedChange,
+    color = "blue",
+    mode,
+    ...rest
+  }, ref) => {
+    const wrapperProps = {};
+    const controlAria = {};
+    for (const [key, value] of Object.entries(rest)) {
+      if (key.startsWith("aria-")) controlAria[key] = value;
+      else wrapperProps[key] = value;
+    }
+    const autoId = react.useId();
+    const switchId = id ?? autoId;
+    const resolvedMode = chunkL3V3BYVS_cjs.useFieldMode(mode);
+    const { showControl, interactive, enterEdit, exitEdit } = chunkKJ22KE56_cjs.useInlineEdit(resolvedMode, disabled);
+    const [checked, setChecked] = chunkSNHU2AI4_cjs.useControllableState(
+      controlledChecked,
+      defaultChecked,
+      onCheckedChange
+    );
+    const trackSizes = {
+      xs: "h-3.5 w-6",
+      sm: "h-4 w-7",
+      md: "h-5 w-9",
+      lg: "h-6 w-11",
+      xl: "h-7 w-[52px]"
+    }[size];
+    const knobSizes = {
+      xs: "h-2.5 w-2.5",
+      sm: "h-3 w-3",
+      md: "h-4 w-4",
+      lg: "h-5 w-5",
+      xl: "h-6 w-6"
+    }[size];
+    const translateOn = {
+      xs: "translate-x-2.5",
+      sm: "translate-x-3",
+      md: "translate-x-4",
+      lg: "translate-x-5",
+      xl: "translate-x-6"
+    }[size];
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ...wrapperProps,
+        ...showControl ? void 0 : controlAria,
+        "data-react-fancy-switch": "",
+        className: chunkZU5Q77OT_cjs.cn("flex items-start gap-2", className),
+        children: [
+          !showControl ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-react-fancy-display": "",
+              "data-mode": "view",
+              role: interactive ? "button" : void 0,
+              tabIndex: interactive ? 0 : void 0,
+              title: interactive ? "Click to edit" : void 0,
+              onClick: interactive ? enterEdit : void 0,
+              onKeyDown: interactive ? (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  enterEdit();
+                }
+              } : void 0,
+              className: chunkZU5Q77OT_cjs.cn(
+                "text-sm font-medium text-zinc-700 dark:text-zinc-200",
+                interactive && "cursor-pointer rounded-md outline-none transition-colors hover:text-zinc-900 focus-visible:ring-2 focus-visible:ring-blue-500/40 dark:hover:text-white"
+              ),
+              children: checked ? "On" : "Off"
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              ...controlAria,
+              ref,
+              id: switchId,
+              type: "button",
+              role: "switch",
+              "aria-checked": checked,
+              disabled,
+              autoFocus: interactive,
+              onBlur: () => {
+                if (interactive) exitEdit();
+              },
+              onClick: () => setChecked(!checked),
+              className: chunkZU5Q77OT_cjs.cn(
+                "relative inline-flex shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/40 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+                trackSizes,
+                // The unchecked track is the `border` role ("tracks"). The dark
+                // fallback stays zinc-600, today's colour, not the role's zinc-700
+                // default — set nothing, see no change.
+                checked ? switchTrack[color] : "bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-600))]",
+                chunkO3F6DYWR_cjs.dirtyRingClasses(dirty),
+                error && "ring-2 ring-red-500/50"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: chunkZU5Q77OT_cjs.cn(
+                    "pointer-events-none inline-block rounded-full bg-white shadow-sm transition-transform",
+                    knobSizes,
+                    checked ? translateOn : "translate-x-0"
+                  )
+                }
+              )
+            }
+          ),
+          name && /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: checked ? "1" : "0" }),
+          (label || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+            label && /* @__PURE__ */ jsxRuntime.jsxs(
+              "label",
+              {
+                htmlFor: switchId,
+                className: chunkZU5Q77OT_cjs.cn(
+                  "cursor-pointer text-sm text-zinc-700 dark:text-zinc-100",
+                  disabled && "cursor-not-allowed opacity-50",
+                  // Not drawn, still the accessible name (it labels the button).
+                  labelHidden && "sr-only"
+                ),
+                children: [
+                  label,
+                  required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-0.5 text-red-500", children: "*" })
+                ]
+              }
+            ),
+            description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]", children: description }),
+            error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-red-500", children: error })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Switch.displayName = "Switch";
+
+exports.Switch = Switch;
+//# sourceMappingURL=chunk-2O5UXH5R.cjs.map
+//# sourceMappingURL=chunk-2O5UXH5R.cjs.map

package/dist/chunk-2O5UXH5R.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/inputs/Switch/Switch.colors.ts","../src/components/inputs/Switch/Switch.tsx"],"names":["forwardRef","useId","useFieldMode","useInlineEdit","useControllableState","jsxs","cn","jsx","dirtyRingClasses"],"mappings":"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","file":"chunk-2O5UXH5R.cjs","sourcesContent":["// AUTO-GENERATED by scripts/gen-switch-colors — do not edit by hand.\n// Literal Tailwind class strings for every color in the v4 palette so the\n// scanner can detect them in the published dist (template-built names are\n// invisible to Tailwind's JIT). Regenerate after changing the palette.\nimport type { Color } from \"../../../utils/types\";\n\nexport const switchTrack: Record<Color, string> = {\n  // The host's colour, from CSS variables -- no dark: variant, because a\n  // host that themes per mode scopes the variables themselves.\n  brand: \"bg-brand\",\n  slate: \"bg-slate-500\",\n  gray: \"bg-gray-500\",\n  zinc: \"bg-zinc-500\",\n  neutral: \"bg-neutral-500\",\n  stone: \"bg-stone-500\",\n  red: \"bg-red-500\",\n  orange: \"bg-orange-500\",\n  amber: \"bg-amber-500\",\n  yellow: \"bg-yellow-500\",\n  lime: \"bg-lime-500\",\n  green: \"bg-green-500\",\n  emerald: \"bg-emerald-500\",\n  teal: \"bg-teal-500\",\n  cyan: \"bg-cyan-500\",\n  sky: \"bg-sky-500\",\n  blue: \"bg-blue-500\",\n  indigo: \"bg-indigo-500\",\n  violet: \"bg-violet-500\",\n  purple: \"bg-purple-500\",\n  fuchsia: \"bg-fuchsia-500\",\n  pink: \"bg-pink-500\",\n  rose: \"bg-rose-500\",\n};\n","import { forwardRef, useId } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { useControllableState } from \"../../../hooks/use-controllable-state\";\nimport { useFieldMode } from \"../mode/FieldMode.context\";\nimport { useInlineEdit } from \"../mode/useInlineEdit\";\nimport { dirtyRingClasses } from \"../inputs.utils\";\nimport type { SwitchProps } from \"./Switch.types\";\nimport { switchTrack } from \"./Switch.colors\";\n\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(\n  (\n    {\n      size = \"md\",\n      dirty,\n      error,\n      label,\n      labelHidden,\n      description,\n      required,\n      disabled,\n      className,\n      id,\n      name,\n      checked: controlledChecked,\n      defaultChecked = false,\n      onCheckedChange,\n      color = \"blue\",\n      mode,\n      ...rest\n    },\n    ref,\n  ) => {\n    // `aria-*` names and describes the CONTROL, so it goes on the role=\"switch\"\n    // button; everything else (className, style, data-*, handlers) stays on the\n    // wrapper, where it has always gone. On the wrapper, an `aria-label` named a\n    // div and left the switch itself unnamed.\n    const wrapperProps: Record<string, unknown> = {};\n    const controlAria: Record<string, unknown> = {};\n    for (const [key, value] of Object.entries(rest)) {\n      if (key.startsWith(\"aria-\")) controlAria[key] = value;\n      else wrapperProps[key] = value;\n    }\n\n    const autoId = useId();\n    const switchId = id ?? autoId;\n    const resolvedMode = useFieldMode(mode);\n    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);\n    const [checked, setChecked] = useControllableState(\n      controlledChecked,\n      defaultChecked,\n      onCheckedChange,\n    );\n\n    const trackSizes = {\n      xs: \"h-3.5 w-6\",\n      sm: \"h-4 w-7\",\n      md: \"h-5 w-9\",\n      lg: \"h-6 w-11\",\n      xl: \"h-7 w-[52px]\",\n    }[size];\n\n    const knobSizes = {\n      xs: \"h-2.5 w-2.5\",\n      sm: \"h-3 w-3\",\n      md: \"h-4 w-4\",\n      lg: \"h-5 w-5\",\n      xl: \"h-6 w-6\",\n    }[size];\n\n    const translateOn = {\n      xs: \"translate-x-2.5\",\n      sm: \"translate-x-3\",\n      md: \"translate-x-4\",\n      lg: \"translate-x-5\",\n      xl: \"translate-x-6\",\n    }[size];\n\n    return (\n      <div\n        {...wrapperProps}\n        // View mode has no switch to name, so its aria-* stay on the wrapper.\n        {...(showControl ? undefined : controlAria)}\n        data-react-fancy-switch=\"\" className={cn(\"flex items-start gap-2\", className)}>\n        {!showControl ? (\n          <span\n            data-react-fancy-display=\"\"\n            data-mode=\"view\"\n            role={interactive ? \"button\" : undefined}\n            tabIndex={interactive ? 0 : undefined}\n            title={interactive ? \"Click to edit\" : undefined}\n            onClick={interactive ? enterEdit : undefined}\n            onKeyDown={\n              interactive\n                ? (e) => {\n                    if (e.key === \"Enter\" || e.key === \" \") {\n                      e.preventDefault();\n                      enterEdit();\n                    }\n                  }\n                : undefined\n            }\n            className={cn(\n              \"text-sm font-medium text-zinc-700 dark:text-zinc-200\",\n              interactive &&\n                \"cursor-pointer rounded-md outline-none transition-colors hover:text-zinc-900 focus-visible:ring-2 focus-visible:ring-blue-500/40 dark:hover:text-white\",\n            )}\n          >\n            {checked ? \"On\" : \"Off\"}\n          </span>\n        ) : (\n        <button\n          {...controlAria}\n          ref={ref}\n          id={switchId}\n          type=\"button\"\n          role=\"switch\"\n          aria-checked={checked}\n          disabled={disabled}\n          autoFocus={interactive}\n          onBlur={() => {\n            if (interactive) exitEdit();\n          }}\n          onClick={() => setChecked(!checked)}\n          className={cn(\n            \"relative inline-flex shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/40 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n            trackSizes,\n            // The unchecked track is the `border` role (\"tracks\"). The dark\n            // fallback stays zinc-600, today's colour, not the role's zinc-700\n            // default — set nothing, see no change.\n            checked\n              ? switchTrack[color]\n              : \"bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-600))]\",\n            dirtyRingClasses(dirty),\n            error && \"ring-2 ring-red-500/50\",\n          )}\n        >\n          <span\n            className={cn(\n              \"pointer-events-none inline-block rounded-full bg-white shadow-sm transition-transform\",\n              knobSizes,\n              checked ? translateOn : \"translate-x-0\",\n            )}\n          />\n        </button>\n        )}\n        {name && (\n          <input type=\"hidden\" name={name} value={checked ? \"1\" : \"0\"} />\n        )}\n        {(label || description) && (\n          <div className=\"flex flex-col\">\n            {label && (\n              <label\n                htmlFor={switchId}\n                className={cn(\n                  \"cursor-pointer text-sm text-zinc-700 dark:text-zinc-100\",\n                  disabled && \"cursor-not-allowed opacity-50\",\n                  // Not drawn, still the accessible name (it labels the button).\n                  labelHidden && \"sr-only\",\n                )}\n              >\n                {label}\n                {required && <span className=\"ml-0.5 text-red-500\">*</span>}\n              </label>\n            )}\n            {description && (\n              <span className=\"text-xs text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]\">\n                {description}\n              </span>\n            )}\n            {error && <span className=\"text-xs text-red-500\">{error}</span>}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nSwitch.displayName = \"Switch\";\n"]}

package/dist/{chunk-26JZ47BJ.js → chunk-45JO5BEZ.js}

@@ -1,6 +1,6 @@
 import { sanitizeHref } from './chunk-6TBRBN7H.js';
 import { resolve } from './chunk-45BBNJQD.js';
-import { Icon } from './chunk-IVRYSSM7.js';
+import { Icon } from './chunk-J3A4Z2P7.js';
 import { cn } from './chunk-MMW2JGKZ.js';
 import { forwardRef } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
@@ -344,14 +344,20 @@ var Button = forwardRef(
         {
           "data-react-fancy-button-label": "",
           className: cn(
-            // A button label must stay on one line. When a host flex layout
-            // squeezes the button, `whitespace-nowrap` keeps the label and any
-            // trailing icon/arrow together instead of wrapping and stacking the
-            // icon below it (the classic "send" over "→" break). `min-w-0` keeps
-            // the span shrinkable so `truncate`/ellipsis still works; multi-line
-            // wrapping is opt-in via `labelClassName` ("whitespace-normal") or
-            // the `responsive` prop.
-            "min-w-0 whitespace-nowrap",
+            // A button narrower than its label WRAPS the label inside itself
+            // (left-aligned, via the button's `text-left`); the icon is its own
+            // shrink-0 flex item, so it stays put beside the text. `min-w-0`
+            // lets the span shrink below its text. Words are never split
+            // (measured: in the showcase's 104px column `break-words` turned
+            // "customer" into "custome/r"). Unconstrained, nothing wraps and
+            // the button looks as it always did.
+            //
+            // No white-space class here, on purpose: `labelClassName="truncate"`
+            // must win uncontested to give one line with an ellipsis, and a
+            // `whitespace-normal` would fight its nowrap in the cascade.
+            // (5.54.0 and earlier forced `whitespace-nowrap`, so a constrained
+            // label spilled out of the button and over its neighbours.)
+            "min-w-0",
             // `responsive` collapses to icon-only when squeezed, while keeping
             // the label readable to screen readers.
             responsive && "sr-only sm:not-sr-only",
@@ -453,5 +459,5 @@ Button.displayName = "Button";
 var Action = Button;
 
 export { Action, Button };
-//# sourceMappingURL=chunk-26JZ47BJ.js.map
-//# sourceMappingURL=chunk-26JZ47BJ.js.map
+//# sourceMappingURL=chunk-45JO5BEZ.js.map
+//# sourceMappingURL=chunk-45JO5BEZ.js.map

package/dist/chunk-45JO5BEZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Button/Button.colors.ts","../src/components/Button/Button.tsx"],"names":[],"mappings":"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","file":"chunk-45JO5BEZ.js","sourcesContent":["// AUTO-GENERATED by scripts/gen-button-colors — do not edit by hand.\n// Literal Tailwind class strings for every color in the v4 palette so the\n// scanner can detect them in the published dist (template-built names are\n// invisible to Tailwind's JIT). Regenerate after changing the palette.\nimport type { Color } from \"../../utils/types\";\n\nexport const buttonColorClasses: Record<Color, string> = {\n  // The host's colour, from CSS variables -- no dark: variant, because a\n  // host that themes per mode scopes the variables themselves.\n  brand: \"bg-brand text-brand-contrast border border-brand hover:bg-brand-hover\",\n  slate: \"bg-slate-500 text-white border border-slate-600 hover:bg-slate-600 dark:bg-slate-600 dark:border-slate-500 dark:hover:bg-slate-500\",\n  gray: \"bg-gray-500 text-white border border-gray-600 hover:bg-gray-600 dark:bg-gray-600 dark:border-gray-500 dark:hover:bg-gray-500\",\n  zinc: \"bg-zinc-500 text-white border border-zinc-600 hover:bg-zinc-600 dark:bg-zinc-600 dark:border-zinc-500 dark:hover:bg-zinc-500\",\n  neutral: \"bg-neutral-500 text-white border border-neutral-600 hover:bg-neutral-600 dark:bg-neutral-600 dark:border-neutral-500 dark:hover:bg-neutral-500\",\n  stone: \"bg-stone-500 text-white border border-stone-600 hover:bg-stone-600 dark:bg-stone-600 dark:border-stone-500 dark:hover:bg-stone-500\",\n  red: \"bg-red-500 text-white border border-red-600 hover:bg-red-600 dark:bg-red-600 dark:border-red-500 dark:hover:bg-red-500\",\n  orange: \"bg-orange-500 text-white border border-orange-600 hover:bg-orange-600 dark:bg-orange-600 dark:border-orange-500 dark:hover:bg-orange-500\",\n  amber: \"bg-amber-400 text-amber-950 border border-amber-500 hover:bg-amber-500 dark:bg-amber-300 dark:text-amber-950 dark:border-amber-400 dark:hover:bg-amber-400\",\n  yellow: \"bg-yellow-400 text-yellow-950 border border-yellow-500 hover:bg-yellow-500 dark:bg-yellow-300 dark:text-yellow-950 dark:border-yellow-400 dark:hover:bg-yellow-400\",\n  lime: \"bg-lime-400 text-lime-950 border border-lime-500 hover:bg-lime-500 dark:bg-lime-300 dark:text-lime-950 dark:border-lime-400 dark:hover:bg-lime-400\",\n  green: \"bg-green-500 text-white border border-green-600 hover:bg-green-600 dark:bg-green-600 dark:border-green-500 dark:hover:bg-green-500\",\n  emerald: \"bg-emerald-500 text-white border border-emerald-600 hover:bg-emerald-600 dark:bg-emerald-600 dark:border-emerald-500 dark:hover:bg-emerald-500\",\n  teal: \"bg-teal-500 text-white border border-teal-600 hover:bg-teal-600 dark:bg-teal-600 dark:border-teal-500 dark:hover:bg-teal-500\",\n  cyan: \"bg-cyan-500 text-white border border-cyan-600 hover:bg-cyan-600 dark:bg-cyan-600 dark:border-cyan-500 dark:hover:bg-cyan-500\",\n  sky: \"bg-sky-500 text-white border border-sky-600 hover:bg-sky-600 dark:bg-sky-600 dark:border-sky-500 dark:hover:bg-sky-500\",\n  blue: \"bg-blue-500 text-white border border-blue-600 hover:bg-blue-600 dark:bg-blue-600 dark:border-blue-500 dark:hover:bg-blue-500\",\n  indigo: \"bg-indigo-500 text-white border border-indigo-600 hover:bg-indigo-600 dark:bg-indigo-600 dark:border-indigo-500 dark:hover:bg-indigo-500\",\n  violet: \"bg-violet-500 text-white border border-violet-600 hover:bg-violet-600 dark:bg-violet-600 dark:border-violet-500 dark:hover:bg-violet-500\",\n  purple: \"bg-purple-500 text-white border border-purple-600 hover:bg-purple-600 dark:bg-purple-600 dark:border-purple-500 dark:hover:bg-purple-500\",\n  fuchsia: \"bg-fuchsia-500 text-white border border-fuchsia-600 hover:bg-fuchsia-600 dark:bg-fuchsia-600 dark:border-fuchsia-500 dark:hover:bg-fuchsia-500\",\n  pink: \"bg-pink-500 text-white border border-pink-600 hover:bg-pink-600 dark:bg-pink-600 dark:border-pink-500 dark:hover:bg-pink-500\",\n  rose: \"bg-rose-500 text-white border border-rose-600 hover:bg-rose-600 dark:bg-rose-600 dark:border-rose-500 dark:hover:bg-rose-500\",\n};\n\nexport const buttonGhostClasses: Record<Color, string> = {\n  // The host's colour, from CSS variables -- no dark: variant, because a\n  // host that themes per mode scopes the variables themselves.\n  brand: \"bg-transparent text-brand hover:bg-brand/10\",\n  slate: \"bg-transparent text-slate-600 hover:bg-slate-50 dark:text-slate-400 dark:hover:bg-slate-950/50\",\n  gray: \"bg-transparent text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-950/50\",\n  zinc: \"bg-transparent text-zinc-600 hover:bg-zinc-50 dark:text-zinc-400 dark:hover:bg-zinc-950/50\",\n  neutral: \"bg-transparent text-neutral-600 hover:bg-neutral-50 dark:text-neutral-400 dark:hover:bg-neutral-950/50\",\n  stone: \"bg-transparent text-stone-600 hover:bg-stone-50 dark:text-stone-400 dark:hover:bg-stone-950/50\",\n  red: \"bg-transparent text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950/50\",\n  orange: \"bg-transparent text-orange-600 hover:bg-orange-50 dark:text-orange-400 dark:hover:bg-orange-950/50\",\n  amber: \"bg-transparent text-amber-600 hover:bg-amber-50 dark:text-amber-400 dark:hover:bg-amber-950/50\",\n  yellow: \"bg-transparent text-yellow-600 hover:bg-yellow-50 dark:text-yellow-400 dark:hover:bg-yellow-950/50\",\n  lime: \"bg-transparent text-lime-600 hover:bg-lime-50 dark:text-lime-400 dark:hover:bg-lime-950/50\",\n  green: \"bg-transparent text-green-600 hover:bg-green-50 dark:text-green-400 dark:hover:bg-green-950/50\",\n  emerald: \"bg-transparent text-emerald-600 hover:bg-emerald-50 dark:text-emerald-400 dark:hover:bg-emerald-950/50\",\n  teal: \"bg-transparent text-teal-600 hover:bg-teal-50 dark:text-teal-400 dark:hover:bg-teal-950/50\",\n  cyan: \"bg-transparent text-cyan-600 hover:bg-cyan-50 dark:text-cyan-400 dark:hover:bg-cyan-950/50\",\n  sky: \"bg-transparent text-sky-600 hover:bg-sky-50 dark:text-sky-400 dark:hover:bg-sky-950/50\",\n  blue: \"bg-transparent text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-950/50\",\n  indigo: \"bg-transparent text-indigo-600 hover:bg-indigo-50 dark:text-indigo-400 dark:hover:bg-indigo-950/50\",\n  violet: \"bg-transparent text-violet-600 hover:bg-violet-50 dark:text-violet-400 dark:hover:bg-violet-950/50\",\n  purple: \"bg-transparent text-purple-600 hover:bg-purple-50 dark:text-purple-400 dark:hover:bg-purple-950/50\",\n  fuchsia: \"bg-transparent text-fuchsia-600 hover:bg-fuchsia-50 dark:text-fuchsia-400 dark:hover:bg-fuchsia-950/50\",\n  pink: \"bg-transparent text-pink-600 hover:bg-pink-50 dark:text-pink-400 dark:hover:bg-pink-950/50\",\n  rose: \"bg-transparent text-rose-600 hover:bg-rose-50 dark:text-rose-400 dark:hover:bg-rose-950/50\",\n};\n","import { forwardRef, type AnchorHTMLAttributes, type ElementType, type ForwardedRef, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { sanitizeHref } from \"../../utils/sanitize\";\nimport { resolve } from \"../../data/emoji-utils\";\nimport { Icon } from \"../Icon/Icon\";\nimport type { ButtonProps } from \"./Button.types\";\nimport type { ButtonColor, Size } from \"../../utils/types\";\nimport {\n  buttonColorClasses as colorClasses,\n  buttonGhostClasses as ghostColorClasses,\n} from \"./Button.colors\";\n\nconst iconSizeMap: Record<Size, \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"> = {\n  xs: \"xs\",\n  sm: \"xs\",\n  md: \"sm\",\n  lg: \"md\",\n  xl: \"lg\",\n};\n\nconst alertIconSizeMap: Record<Size, \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"> = {\n  xs: \"xs\",\n  sm: \"xs\",\n  md: \"xs\",\n  lg: \"sm\",\n  xl: \"sm\",\n};\n\n// ---------------------------------------------------------------------------\n// Color classes\n//\n// Solid + ghost color maps live in ./Button.colors (AUTO-GENERATED, all 22\n// Tailwind v4 hues as literal strings). The state-color classes below\n// (default/active/checked/warn) branch on flags, not specific colors.\n// ---------------------------------------------------------------------------\n\nconst defaultClasses =\n  \"bg-white text-[color:var(--fancy-text-soft,var(--color-zinc-700))] border border-[color:var(--fancy-border,var(--color-zinc-200))] hover:bg-zinc-50 hover:border-zinc-300 dark:bg-zinc-800 dark:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:hover:bg-zinc-700\";\n\nconst activeClasses =\n  \"bg-blue-500 text-white border border-blue-600 hover:bg-blue-600 dark:bg-blue-600 dark:border-blue-500 dark:hover:bg-blue-500\";\n\nconst checkedClasses =\n  \"bg-emerald-500 text-white border border-emerald-600 hover:bg-emerald-600 dark:bg-emerald-600 dark:border-emerald-500 dark:hover:bg-emerald-500\";\n\nconst warnClasses =\n  \"bg-amber-50 text-amber-700 border border-amber-200 hover:bg-amber-100 dark:bg-amber-900/30 dark:text-amber-300 dark:border-amber-700 dark:hover:bg-amber-900/50\";\n\nconst ghostDefaultClasses =\n  \"bg-transparent text-[color:var(--fancy-text-soft,var(--color-zinc-700))] hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))] dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\";\n\nconst ghostActiveClasses =\n  \"bg-blue-50 text-blue-700 hover:bg-blue-100 dark:bg-blue-950/50 dark:text-blue-300 dark:hover:bg-blue-950\";\n\nconst ghostCheckedClasses =\n  \"bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:bg-emerald-950/50 dark:text-emerald-300 dark:hover:bg-emerald-950\";\n\nconst ghostWarnClasses =\n  \"bg-transparent text-amber-700 hover:bg-amber-50 dark:text-amber-300 dark:hover:bg-amber-950/50\";\n\n// ---------------------------------------------------------------------------\n// Size helpers\n// ---------------------------------------------------------------------------\n\nconst horizontalSize: Record<Size, string> = {\n  xs: \"px-2 py-1 text-xs\",\n  sm: \"px-2 py-1 text-xs\",\n  md: \"px-3 py-1.5 text-sm\",\n  lg: \"px-4 py-2.5 text-base\",\n  xl: \"px-5 py-3 text-lg\",\n};\n\nconst circleSize: Record<Size, string> = {\n  xs: \"w-7 h-7 text-xs\",\n  sm: \"w-8 h-8 text-xs\",\n  md: \"w-10 h-10 text-sm\",\n  lg: \"w-12 h-12 text-base\",\n  xl: \"w-14 h-14 text-lg\",\n};\n\nconst iconSize: Record<Size, string> = {\n  xs: \"w-3 h-3\",\n  sm: \"w-3 h-3\",\n  md: \"w-4 h-4\",\n  lg: \"w-5 h-5\",\n  xl: \"w-6 h-6\",\n};\n\nconst avatarSize: Record<Size, string> = {\n  xs: \"w-4 h-4\",\n  sm: \"w-4 h-4\",\n  md: \"w-5 h-5\",\n  lg: \"w-6 h-6\",\n  xl: \"w-7 h-7\",\n};\n\nconst alertIconSize: Record<Size, string> = {\n  xs: \"w-2 h-2\",\n  sm: \"w-2.5 h-2.5\",\n  md: \"w-3 h-3\",\n  lg: \"w-4 h-4\",\n  xl: \"w-4 h-4\",\n};\n\nconst badgeSize: Record<Size, string> = {\n  xs: \"text-[10px] px-1 min-w-[14px] h-3.5\",\n  sm: \"text-[10px] px-1.5 min-w-[16px] h-4\",\n  md: \"text-[11px] px-1.5 min-w-[18px] h-[18px]\",\n  lg: \"text-xs px-2 min-w-[22px] h-5\",\n  xl: \"text-xs px-2 min-w-[24px] h-5\",\n};\n\nconst externalIconOffset: Record<Size, string> = {\n  xs: \"0.75rem\",\n  sm: \"0.75rem\",\n  md: \"1rem\",\n  lg: \"1.25rem\",\n  xl: \"1.5rem\",\n};\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction isColored(color?: ButtonColor, active?: boolean, checked?: boolean): boolean {\n  return !!(color || active || checked);\n}\n\nfunction getColorClasses(\n  color?: ButtonColor,\n  active?: boolean,\n  checked?: boolean,\n  warn?: boolean,\n  ghost?: boolean,\n): string {\n  if (ghost) {\n    if (color) return ghostColorClasses[color];\n    if (checked) return ghostCheckedClasses;\n    if (active) return ghostActiveClasses;\n    if (warn) return ghostWarnClasses;\n    return ghostDefaultClasses;\n  }\n  if (color) return colorClasses[color];\n  if (checked) return checkedClasses;\n  if (active) return activeClasses;\n  if (warn) return warnClasses;\n  return defaultClasses;\n}\n\nfunction getIconColorClasses(\n  color?: ButtonColor,\n  active?: boolean,\n  checked?: boolean,\n  warn?: boolean,\n  ghost?: boolean,\n): string {\n  if (ghost) {\n    // Ghost variant: icon inherits currentColor from the button text\n    return \"text-current\";\n  }\n  // A filled button's icon takes the label's colour — whatever that colour class\n  // says, including a host's per-mode `text-brand-contrast` and the dark labels on\n  // amber / yellow / lime. Hard-coded white was invisible on any light fill.\n  if (color || active || checked) return \"text-current\";\n  if (warn) return \"text-amber-600 dark:text-amber-400\";\n  return \"text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]\";\n}\n\nfunction getBadgeClasses(\n  color?: ButtonColor,\n  active?: boolean,\n  checked?: boolean,\n  warn?: boolean,\n  ghost?: boolean,\n): string {\n  if (ghost) {\n    return \"bg-current/10 text-current\";\n  }\n  // Tinted with the label's own colour, for the same reason as the icon.\n  if (isColored(color, active, checked)) return \"bg-current/20 text-current\";\n  if (warn) return \"bg-amber-200 text-amber-800 dark:bg-amber-800 dark:text-amber-200\";\n  return \"bg-zinc-200 text-zinc-700 dark:bg-zinc-600 dark:text-zinc-200\";\n}\n\n// ---------------------------------------------------------------------------\n// Placement parsing\n// ---------------------------------------------------------------------------\n\ntype PlacementAxis = \"left\" | \"right\" | \"top\" | \"bottom\";\n\nfunction parsePlacement(iconPlace: string): { primary: PlacementAxis; secondary?: PlacementAxis } {\n  const parts = iconPlace.split(\" \") as PlacementAxis[];\n  return { primary: parts[0], secondary: parts[1] };\n}\n\nfunction isVerticalPrimary(primary: PlacementAxis): boolean {\n  return primary === \"top\" || primary === \"bottom\";\n}\n\n// ---------------------------------------------------------------------------\n// Sort parsing\n// ---------------------------------------------------------------------------\n\ntype ElementKey = \"e\" | \"i\" | \"a\" | \"b\";\nconst DEFAULT_SORT = \"eiab\";\n\nfunction parseSortOrder(sort?: string): ElementKey[] {\n  const chars = (sort ?? DEFAULT_SORT).split(\"\") as ElementKey[];\n  const valid: ElementKey[] = [];\n  const seen = new Set<string>();\n  for (const c of chars) {\n    if (\"eiab\".includes(c) && !seen.has(c)) {\n      valid.push(c);\n      seen.add(c);\n    }\n  }\n  // Add missing keys in default order\n  for (const c of DEFAULT_SORT.split(\"\") as ElementKey[]) {\n    if (!seen.has(c)) valid.push(c);\n  }\n  return valid;\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      children,\n      className,\n      variant = \"default\",\n      color,\n      size = \"md\",\n      active,\n      checked,\n      warn,\n      alert: alertProp,\n      icon,\n      iconTrailing,\n      iconPlace = \"left\",\n      alertIcon,\n      alertIconTrailing,\n      emoji,\n      emojiTrailing,\n      avatar,\n      avatarTrailing,\n      badge,\n      badgeTrailing,\n      sort,\n      loading = false,\n      disabled,\n      href,\n      as: As,\n      responsive,\n      labelClassName,\n      ...props\n    },\n    ref,\n  ) => {\n    const isCircle = variant === \"circle\";\n    const isGhost = variant === \"ghost\";\n    const { primary, secondary } = parsePlacement(iconPlace);\n    const isVertical = isVerticalPrimary(primary);\n    const isCompound = !!secondary;\n    const needsWrapper = isVertical || isCompound;\n    const isReversed = iconPlace === \"right\";\n\n    // -----------------------------------------------------------------------\n    // Sizing — always use horizontalSize for the button itself\n    // -----------------------------------------------------------------------\n    const sizeClass = isCircle ? circleSize[size] : horizontalSize[size];\n\n    // -----------------------------------------------------------------------\n    // Build decorative elements\n    // -----------------------------------------------------------------------\n    const iconColorCls = getIconColorClasses(color, active, checked, warn, isGhost);\n\n    const buildElement = (key: ElementKey, trailing: boolean): ReactNode => {\n      switch (key) {\n        case \"e\": {\n          const slug = trailing ? emojiTrailing : emoji;\n          if (!slug) return null;\n          const char = resolve(slug);\n          if (!char) return null;\n          return (\n            <span key={`emoji-${trailing ? \"t\" : \"l\"}`} data-action-emoji>\n              {char}\n            </span>\n          );\n        }\n        case \"i\": {\n          if (loading && !trailing) {\n            return (\n              <span\n                key=\"spinner\"\n                className={cn(\"animate-spin border-2 border-current border-t-transparent rounded-full\", iconSize[size])}\n              />\n            );\n          }\n          const iconSlug = trailing ? iconTrailing : icon;\n          if (!iconSlug) return null;\n          // For vertical/compound placements, icons render outside the button — not inside\n          if (needsWrapper) return null;\n          return (\n            <span\n              key={`icon-${trailing ? \"t\" : \"l\"}`}\n              data-action-icon={trailing ? \"trailing\" : \"leading\"}\n              className={cn(\"inline-flex items-center flex-shrink-0\", iconColorCls)}\n            >\n              <Icon name={iconSlug} size={iconSizeMap[size]} />\n            </span>\n          );\n        }\n        case \"a\": {\n          if (!avatar) return null;\n          const isTrailing = avatarTrailing ?? false;\n          if (isTrailing !== trailing) return null;\n          return (\n            <img\n              key=\"avatar\"\n              src={avatar}\n              alt=\"\"\n              className={cn(avatarSize[size], \"rounded-full object-cover flex-shrink-0\")}\n              data-action-avatar\n            />\n          );\n        }\n        case \"b\": {\n          if (!badge) return null;\n          const isTrailing = badgeTrailing ?? false;\n          if (isTrailing !== trailing) return null;\n          return (\n            <span\n              key=\"badge\"\n              className={cn(\n                \"inline-flex items-center justify-center font-medium rounded-full\",\n                badgeSize[size],\n                getBadgeClasses(color, active, checked, warn, isGhost),\n              )}\n              data-action-badge\n            >\n              {badge}\n            </span>\n          );\n        }\n        default:\n          return null;\n      }\n    };\n\n    // Alert icon element\n    const renderAlertIcon = (trailing: boolean): ReactNode => {\n      if (!alertIcon) return null;\n      const isTrailing = alertIconTrailing ?? false;\n      if (isTrailing !== trailing) return null;\n      const alertIconEl = <Icon name={alertIcon} size={alertIconSizeMap[size]} />;\n      return (\n        <span\n          key=\"alert-icon\"\n          className=\"relative inline-flex flex-shrink-0\"\n          data-action-alert\n        >\n          <span className=\"text-red-500 dark:text-red-400 animate-pulse\">\n            {alertIconEl}\n          </span>\n          <span className=\"absolute inset-0 flex items-center justify-center text-red-400 dark:text-red-300 animate-ping opacity-75\">\n            {alertIconEl}\n          </span>\n        </span>\n      );\n    };\n\n    const sortOrder = parseSortOrder(sort);\n\n    const leadingElements: ReactNode[] = [];\n    const trailingElements: ReactNode[] = [];\n\n    for (const key of sortOrder) {\n      const leading = buildElement(key, false);\n      if (leading) leadingElements.push(leading);\n      const trailing = buildElement(key, true);\n      if (trailing) trailingElements.push(trailing);\n    }\n\n    // Insert alert icon\n    const leadingAlert = renderAlertIcon(false);\n    if (leadingAlert) leadingElements.push(leadingAlert);\n    const trailingAlert = renderAlertIcon(true);\n    if (trailingAlert) trailingElements.push(trailingAlert);\n\n    // -----------------------------------------------------------------------\n    // Classes\n    // -----------------------------------------------------------------------\n    const classes = cn(\n      // `text-left` overrides the UA <button> center default so a wrapped,\n      // width-constrained multi-word label stacks left-aligned. Overridable —\n      // twMerge lets a `text-center` / `text-right` in `className` win.\n      \"inline-flex items-center justify-center text-left font-medium transition-all duration-200\",\n      \"focus:outline-none focus:ring-2 focus:ring-offset-1\",\n      \"disabled:opacity-50 disabled:cursor-not-allowed\",\n      isCircle ? \"rounded-full\" : \"rounded-lg\",\n      sizeClass,\n      getColorClasses(color, active, checked, warn, isGhost),\n      !isCircle && !needsWrapper && \"gap-2\",\n      !isCircle && needsWrapper && \"gap-2\",\n      isReversed && !needsWrapper && \"flex-row-reverse\",\n      alertProp && \"animate-pulse\",\n      className,\n    );\n\n    // -----------------------------------------------------------------------\n    // Content\n    // -----------------------------------------------------------------------\n    const content = isCircle ? (\n      <>\n        {loading ? (\n          <span\n            className={cn(\n              \"animate-spin border-2 border-current border-t-transparent rounded-full\",\n              iconSize[size],\n            )}\n          />\n        ) : (\n          icon ? <Icon name={icon} size={iconSizeMap[size]} /> : children\n        )}\n      </>\n    ) : (\n      <>\n        {leadingElements}\n        {children != null && (\n          <span\n            data-react-fancy-button-label=\"\"\n            className={cn(\n              // A button narrower than its label WRAPS the label inside itself\n              // (left-aligned, via the button's `text-left`); the icon is its own\n              // shrink-0 flex item, so it stays put beside the text. `min-w-0`\n              // lets the span shrink below its text. Words are never split\n              // (measured: in the showcase's 104px column `break-words` turned\n              // \"customer\" into \"custome/r\"). Unconstrained, nothing wraps and\n              // the button looks as it always did.\n              //\n              // No white-space class here, on purpose: `labelClassName=\"truncate\"`\n              // must win uncontested to give one line with an ellipsis, and a\n              // `whitespace-normal` would fight its nowrap in the cascade.\n              // (5.54.0 and earlier forced `whitespace-nowrap`, so a constrained\n              // label spilled out of the button and over its neighbours.)\n              \"min-w-0\",\n              // `responsive` collapses to icon-only when squeezed, while keeping\n              // the label readable to screen readers.\n              responsive && \"sr-only sm:not-sr-only\",\n              labelClassName,\n            )}\n          >\n            {children}\n          </span>\n        )}\n        {trailingElements}\n      </>\n    );\n\n    // -----------------------------------------------------------------------\n    // Build the button element\n    // -----------------------------------------------------------------------\n    const safeHref = sanitizeHref(href);\n    // Anchor mode renders `as` when provided (e.g. a router's <Link> for\n    // client-side navigation — Inertia, React Router, Next). Previously `as`\n    // fell through ...props onto the <a> where React silently DROPS a\n    // function-valued unknown attribute — so `<Button as={Link}>` looked fine\n    // but did a full page load. `as` only applies in anchor mode; without an\n    // href (or when disabled) the plain <button> renders as always.\n    const Anchor = (As ?? \"a\") as ElementType;\n    const buttonEl = safeHref && !disabled ? (\n      // Anchor mode forwards the same rest props as the <button> branch so\n      // onClick / target / rel / ref / ARIA / data-* reach the <a> (issue #7).\n      <Anchor\n        ref={ref as ForwardedRef<HTMLAnchorElement>}\n        href={safeHref}\n        className={classes}\n        data-react-fancy-button=\"\"\n        data-react-fancy-action=\"\"\n        {...(props as AnchorHTMLAttributes<HTMLAnchorElement>)}\n      >\n        {content}\n      </Anchor>\n    ) : (\n      <button\n        ref={ref}\n        className={classes}\n        disabled={disabled || loading}\n        data-react-fancy-button=\"\"\n        data-react-fancy-action=\"\"\n        {...props}\n      >\n        {content}\n      </button>\n    );\n\n    // -----------------------------------------------------------------------\n    // Wrap for vertical/compound icon placement\n    // The icon is absolutely positioned so it never shifts the button.\n    // -----------------------------------------------------------------------\n    if (needsWrapper && (icon || iconTrailing)) {\n      const iconSlug = icon ?? iconTrailing;\n      const offset = externalIconOffset[size];\n\n      // Determine position styles for the icon\n      const posStyle: React.CSSProperties = { position: \"absolute\" };\n\n      // Primary axis: which side of the button\n      if (primary === \"top\") {\n        posStyle.bottom = \"100%\";\n        posStyle.marginBottom = \"0.125rem\";\n      } else if (primary === \"bottom\") {\n        posStyle.top = \"100%\";\n        posStyle.marginTop = \"0.125rem\";\n      } else if (primary === \"left\") {\n        posStyle.right = \"100%\";\n        posStyle.marginRight = \"0.125rem\";\n      } else if (primary === \"right\") {\n        posStyle.left = \"100%\";\n        posStyle.marginLeft = \"0.125rem\";\n      }\n\n      // Secondary axis: cross-axis alignment\n      if (isVerticalPrimary(primary)) {\n        // Vertical primary → secondary controls horizontal position\n        if (secondary === \"left\") {\n          posStyle.left = \"0\";\n        } else if (secondary === \"right\") {\n          posStyle.right = \"0\";\n        } else {\n          // center (default)\n          posStyle.left = \"50%\";\n          posStyle.transform = \"translateX(-50%)\";\n        }\n      } else {\n        // Horizontal primary → secondary controls vertical position\n        if (secondary === \"top\") {\n          posStyle.top = \"0\";\n        } else if (secondary === \"bottom\") {\n          posStyle.bottom = \"0\";\n        } else {\n          // center (default)\n          posStyle.top = \"50%\";\n          posStyle.transform = \"translateY(-50%)\";\n        }\n      }\n\n      const externalIcon = (\n        <span\n          className={cn(\"absolute flex-shrink-0\", iconColorCls)}\n          style={posStyle}\n        >\n          <Icon name={iconSlug!} size={iconSizeMap[size]} />\n        </span>\n      );\n\n      return (\n        <span\n          data-react-fancy-action-group=\"\"\n          className=\"relative inline-flex\"\n        >\n          {buttonEl}\n          {externalIcon}\n        </span>\n      );\n    }\n\n    return buttonEl;\n  },\n);\n\nButton.displayName = \"Button\";\n\n/**\n * @deprecated Renamed to {@link Button}. `Action` remains as an alias for\n * backward compatibility and will be removed in a future major version.\n * Prefer importing `Button` from \"@particle-academy/react-fancy\".\n */\nexport const Action = Button;\n"]}

package/dist/{chunk-TFKG5FSG.cjs → chunk-4I4Y5MZO.cjs}

@@ -1,7 +1,7 @@
 'use strict';
 
 var chunkUZG6LO4Z_cjs = require('./chunk-UZG6LO4Z.cjs');
-var chunkCAMQ5B3V_cjs = require('./chunk-CAMQ5B3V.cjs');
+var chunkXOXA3QZR_cjs = require('./chunk-XOXA3QZR.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 
 var CONFIDENCE_TIERS = [
@@ -109,11 +109,11 @@ function ReasonTag({
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] uppercase tracking-wider text-zinc-400", children: "sources" }),
         /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "mt-0.5 space-y-0.5 text-[12px]", children: sources.map((s, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: s.href ? /* @__PURE__ */ jsxRuntime.jsx("a", { className: "text-violet-600 hover:underline", href: s.href, children: s.label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-zinc-600 dark:text-zinc-300", children: s.label }) }, i)) })
       ] }),
-      onFollowUp && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end pt-1", children: /* @__PURE__ */ jsxRuntime.jsx(chunkCAMQ5B3V_cjs.Button, { size: "sm", variant: "ghost", onClick: onFollowUp, children: "ask follow-up" }) })
+      onFollowUp && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end pt-1", children: /* @__PURE__ */ jsxRuntime.jsx(chunkXOXA3QZR_cjs.Button, { size: "sm", variant: "ghost", onClick: onFollowUp, children: "ask follow-up" }) })
     ] }) })
   ] });
 }
 
 exports.ReasonTag = ReasonTag;
-//# sourceMappingURL=chunk-TFKG5FSG.cjs.map
-//# sourceMappingURL=chunk-TFKG5FSG.cjs.map
+//# sourceMappingURL=chunk-4I4Y5MZO.cjs.map
+//# sourceMappingURL=chunk-4I4Y5MZO.cjs.map

package/dist/{chunk-TFKG5FSG.cjs.map → chunk-4I4Y5MZO.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ReasonTag/ReasonTag.tsx"],"names":["jsxs","jsx","Popover","Button"],"mappings":"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","file":"chunk-TFKG5FSG.cjs","sourcesContent":["import { Popover } from \"../Popover\";\nimport { Button } from \"../Button\";\n\n/**\n * ReasonTag — wraps any value with a small affordance that reveals the\n * agent's reasoning, sources, and confidence on hover or click.\n *\n *   <ReasonTag\n *     value=\"$1.4M\"\n *     reason=\"Projected Q3 ARR after stacking renewals.\"\n *     confidence={0.91}\n *     sources={[{ label: \"Q2 actuals · CRM export\" }]}\n *     by=\"Forecaster\"\n *   />\n *\n * Three visual styles:\n *   • \"dot\"       — value with a tiny coloured dot (default, subtle)\n *   • \"underline\" — dotted underline + trailing \"?\"\n *   • \"chip\"      — full coloured pill (loud)\n *\n * Confidence drives the colour via three tiers (high / medium / low),\n * so a quick visual scan tells the human which suggestions deserve a\n * second look without opening any tooltips.\n *\n * `pinned` swaps the popover for an inline annotation slot — useful\n * when explainability should always be visible, not buried in a hover.\n */\nexport type ReasonTagSource = { label: string; href?: string };\n\nexport type ReasonTagTheme = \"dot\" | \"underline\" | \"chip\";\n\nexport interface ReasonTagProps {\n  /** The value the tag wraps — usually a number, label, or short phrase. */\n  value: React.ReactNode;\n  /** Free-text rationale shown in the popover / inline annotation. */\n  reason: string;\n  /** 0..1 confidence. Drives the tier colour. Defaults to 1. */\n  confidence?: number;\n  /** Optional list of sources (label + optional href). */\n  sources?: ReasonTagSource[];\n  /** Optional author / agent name shown in the popover header. */\n  by?: string;\n  /** Visual treatment for the trigger. */\n  theme?: ReasonTagTheme;\n  /**\n   * When true, the popover is replaced with an always-visible inline\n   * annotation below the value.\n   */\n  pinned?: boolean;\n  /** Called when the user hits the \"ask follow-up\" action. */\n  onFollowUp?: () => void;\n  /** Optional className applied to the trigger element. */\n  className?: string;\n}\n\nconst CONFIDENCE_TIERS: Array<{ min: number; color: string; label: string }> = [\n  { min: 0.85, color: \"#10b981\", label: \"high\" },\n  { min: 0.6, color: \"#f59e0b\", label: \"medium\" },\n  { min: 0, color: \"#ef4444\", label: \"low\" },\n];\n\nfunction tier(c: number) {\n  return CONFIDENCE_TIERS.find((t) => c >= t.min) ?? CONFIDENCE_TIERS[2];\n}\n\nexport function ReasonTag({\n  value,\n  reason,\n  confidence = 1,\n  sources = [],\n  by,\n  theme = \"dot\",\n  pinned = false,\n  onFollowUp,\n  className,\n}: ReasonTagProps) {\n  const t = tier(confidence);\n\n  const trigger =\n    theme === \"chip\" ? (\n      <span\n        className={`inline-flex cursor-help items-center gap-1 rounded-full px-2 py-0.5 text-[12px] font-medium ${className ?? \"\"}`}\n        style={{ backgroundColor: t.color + \"22\", color: t.color }}\n      >\n        <span\n          className=\"h-1.5 w-1.5 rounded-full\"\n          style={{ backgroundColor: t.color }}\n        />\n        {value}\n        <span className=\"text-[10px] opacity-70\">?</span>\n      </span>\n    ) : theme === \"underline\" ? (\n      <span\n        className={`cursor-help underline decoration-dotted underline-offset-2 ${className ?? \"\"}`}\n        style={{ textDecorationColor: t.color }}\n      >\n        {value}\n        <span\n          className=\"ml-0.5 font-mono text-[10px]\"\n          style={{ color: t.color }}\n        >\n          ?\n        </span>\n      </span>\n    ) : (\n      <span className={`inline-flex cursor-help items-baseline gap-1 ${className ?? \"\"}`}>\n        <span className=\"font-medium\">{value}</span>\n        <span\n          className=\"inline-block h-1.5 w-1.5 rounded-full align-middle\"\n          style={{ backgroundColor: t.color }}\n          title=\"reason available\"\n        />\n      </span>\n    );\n\n  if (pinned) {\n    return (\n      <span className=\"inline-flex flex-col items-start gap-0.5 align-top\">\n        {trigger}\n        <span\n          className=\"block max-w-[280px] rounded border-l-2 pl-2 text-[11px] leading-snug text-zinc-600 dark:text-zinc-300\"\n          style={{ borderColor: t.color }}\n        >\n          {reason}\n        </span>\n      </span>\n    );\n  }\n\n  return (\n    <Popover hover>\n      <Popover.Trigger>{trigger}</Popover.Trigger>\n      <Popover.Content>\n        <div className=\"w-72 space-y-2 text-sm\">\n          <div className=\"flex items-baseline gap-2\">\n            <span\n              className=\"text-[10px] font-semibold uppercase tracking-wider\"\n              style={{ color: t.color }}\n            >\n              {t.label} confidence · {(confidence * 100).toFixed(0)}%\n            </span>\n            {by && (\n              <span className=\"ml-auto font-mono text-[10px] text-zinc-400\">\n                @{by}\n              </span>\n            )}\n          </div>\n          <p className=\"text-[13px] leading-snug text-zinc-700 dark:text-zinc-200\">\n            {reason}\n          </p>\n          {sources.length > 0 && (\n            <div>\n              <div className=\"text-[10px] uppercase tracking-wider text-zinc-400\">\n                sources\n              </div>\n              <ul className=\"mt-0.5 space-y-0.5 text-[12px]\">\n                {sources.map((s, i) => (\n                  <li key={i}>\n                    {s.href ? (\n                      <a className=\"text-violet-600 hover:underline\" href={s.href}>\n                        {s.label}\n                      </a>\n                    ) : (\n                      <span className=\"text-zinc-600 dark:text-zinc-300\">\n                        {s.label}\n                      </span>\n                    )}\n                  </li>\n                ))}\n              </ul>\n            </div>\n          )}\n          {onFollowUp && (\n            <div className=\"flex justify-end pt-1\">\n              <Button size=\"sm\" variant=\"ghost\" onClick={onFollowUp}>\n                ask follow-up\n              </Button>\n            </div>\n          )}\n        </div>\n      </Popover.Content>\n    </Popover>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/ReasonTag/ReasonTag.tsx"],"names":["jsxs","jsx","Popover","Button"],"mappings":"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","file":"chunk-4I4Y5MZO.cjs","sourcesContent":["import { Popover } from \"../Popover\";\nimport { Button } from \"../Button\";\n\n/**\n * ReasonTag — wraps any value with a small affordance that reveals the\n * agent's reasoning, sources, and confidence on hover or click.\n *\n *   <ReasonTag\n *     value=\"$1.4M\"\n *     reason=\"Projected Q3 ARR after stacking renewals.\"\n *     confidence={0.91}\n *     sources={[{ label: \"Q2 actuals · CRM export\" }]}\n *     by=\"Forecaster\"\n *   />\n *\n * Three visual styles:\n *   • \"dot\"       — value with a tiny coloured dot (default, subtle)\n *   • \"underline\" — dotted underline + trailing \"?\"\n *   • \"chip\"      — full coloured pill (loud)\n *\n * Confidence drives the colour via three tiers (high / medium / low),\n * so a quick visual scan tells the human which suggestions deserve a\n * second look without opening any tooltips.\n *\n * `pinned` swaps the popover for an inline annotation slot — useful\n * when explainability should always be visible, not buried in a hover.\n */\nexport type ReasonTagSource = { label: string; href?: string };\n\nexport type ReasonTagTheme = \"dot\" | \"underline\" | \"chip\";\n\nexport interface ReasonTagProps {\n  /** The value the tag wraps — usually a number, label, or short phrase. */\n  value: React.ReactNode;\n  /** Free-text rationale shown in the popover / inline annotation. */\n  reason: string;\n  /** 0..1 confidence. Drives the tier colour. Defaults to 1. */\n  confidence?: number;\n  /** Optional list of sources (label + optional href). */\n  sources?: ReasonTagSource[];\n  /** Optional author / agent name shown in the popover header. */\n  by?: string;\n  /** Visual treatment for the trigger. */\n  theme?: ReasonTagTheme;\n  /**\n   * When true, the popover is replaced with an always-visible inline\n   * annotation below the value.\n   */\n  pinned?: boolean;\n  /** Called when the user hits the \"ask follow-up\" action. */\n  onFollowUp?: () => void;\n  /** Optional className applied to the trigger element. */\n  className?: string;\n}\n\nconst CONFIDENCE_TIERS: Array<{ min: number; color: string; label: string }> = [\n  { min: 0.85, color: \"#10b981\", label: \"high\" },\n  { min: 0.6, color: \"#f59e0b\", label: \"medium\" },\n  { min: 0, color: \"#ef4444\", label: \"low\" },\n];\n\nfunction tier(c: number) {\n  return CONFIDENCE_TIERS.find((t) => c >= t.min) ?? CONFIDENCE_TIERS[2];\n}\n\nexport function ReasonTag({\n  value,\n  reason,\n  confidence = 1,\n  sources = [],\n  by,\n  theme = \"dot\",\n  pinned = false,\n  onFollowUp,\n  className,\n}: ReasonTagProps) {\n  const t = tier(confidence);\n\n  const trigger =\n    theme === \"chip\" ? (\n      <span\n        className={`inline-flex cursor-help items-center gap-1 rounded-full px-2 py-0.5 text-[12px] font-medium ${className ?? \"\"}`}\n        style={{ backgroundColor: t.color + \"22\", color: t.color }}\n      >\n        <span\n          className=\"h-1.5 w-1.5 rounded-full\"\n          style={{ backgroundColor: t.color }}\n        />\n        {value}\n        <span className=\"text-[10px] opacity-70\">?</span>\n      </span>\n    ) : theme === \"underline\" ? (\n      <span\n        className={`cursor-help underline decoration-dotted underline-offset-2 ${className ?? \"\"}`}\n        style={{ textDecorationColor: t.color }}\n      >\n        {value}\n        <span\n          className=\"ml-0.5 font-mono text-[10px]\"\n          style={{ color: t.color }}\n        >\n          ?\n        </span>\n      </span>\n    ) : (\n      <span className={`inline-flex cursor-help items-baseline gap-1 ${className ?? \"\"}`}>\n        <span className=\"font-medium\">{value}</span>\n        <span\n          className=\"inline-block h-1.5 w-1.5 rounded-full align-middle\"\n          style={{ backgroundColor: t.color }}\n          title=\"reason available\"\n        />\n      </span>\n    );\n\n  if (pinned) {\n    return (\n      <span className=\"inline-flex flex-col items-start gap-0.5 align-top\">\n        {trigger}\n        <span\n          className=\"block max-w-[280px] rounded border-l-2 pl-2 text-[11px] leading-snug text-zinc-600 dark:text-zinc-300\"\n          style={{ borderColor: t.color }}\n        >\n          {reason}\n        </span>\n      </span>\n    );\n  }\n\n  return (\n    <Popover hover>\n      <Popover.Trigger>{trigger}</Popover.Trigger>\n      <Popover.Content>\n        <div className=\"w-72 space-y-2 text-sm\">\n          <div className=\"flex items-baseline gap-2\">\n            <span\n              className=\"text-[10px] font-semibold uppercase tracking-wider\"\n              style={{ color: t.color }}\n            >\n              {t.label} confidence · {(confidence * 100).toFixed(0)}%\n            </span>\n            {by && (\n              <span className=\"ml-auto font-mono text-[10px] text-zinc-400\">\n                @{by}\n              </span>\n            )}\n          </div>\n          <p className=\"text-[13px] leading-snug text-zinc-700 dark:text-zinc-200\">\n            {reason}\n          </p>\n          {sources.length > 0 && (\n            <div>\n              <div className=\"text-[10px] uppercase tracking-wider text-zinc-400\">\n                sources\n              </div>\n              <ul className=\"mt-0.5 space-y-0.5 text-[12px]\">\n                {sources.map((s, i) => (\n                  <li key={i}>\n                    {s.href ? (\n                      <a className=\"text-violet-600 hover:underline\" href={s.href}>\n                        {s.label}\n                      </a>\n                    ) : (\n                      <span className=\"text-zinc-600 dark:text-zinc-300\">\n                        {s.label}\n                      </span>\n                    )}\n                  </li>\n                ))}\n              </ul>\n            </div>\n          )}\n          {onFollowUp && (\n            <div className=\"flex justify-end pt-1\">\n              <Button size=\"sm\" variant=\"ghost\" onClick={onFollowUp}>\n                ask follow-up\n              </Button>\n            </div>\n          )}\n        </div>\n      </Popover.Content>\n    </Popover>\n  );\n}\n"]}

package/dist/{chunk-2KFHSFFY.cjs → chunk-6GKR5OAW.cjs}

@@ -3,7 +3,7 @@
 var chunkMAZEX4EZ_cjs = require('./chunk-MAZEX4EZ.cjs');
 var chunkNBZC6LOB_cjs = require('./chunk-NBZC6LOB.cjs');
 var chunkMOU6O324_cjs = require('./chunk-MOU6O324.cjs');
-var chunkCAMQ5B3V_cjs = require('./chunk-CAMQ5B3V.cjs');
+var chunkXOXA3QZR_cjs = require('./chunk-XOXA3QZR.cjs');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -184,7 +184,7 @@ function Wand({
             ] })
           ] }),
           actions.map((a) => /* @__PURE__ */ jsxRuntime.jsxs(
-            chunkCAMQ5B3V_cjs.Button,
+            chunkXOXA3QZR_cjs.Button,
             {
               size: "sm",
               variant: "ghost",
@@ -262,5 +262,5 @@ function selectionPoint(ta, start, end) {
 }
 
 exports.MagicWand = MagicWand;
-//# sourceMappingURL=chunk-2KFHSFFY.cjs.map
-//# sourceMappingURL=chunk-2KFHSFFY.cjs.map
+//# sourceMappingURL=chunk-6GKR5OAW.cjs.map
+//# sourceMappingURL=chunk-6GKR5OAW.cjs.map