@particle-academy/react-fancy 5.53.1 → 5.54.1

package/CHANGELOG.md

@@ -11,6 +11,106 @@ 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
+
+- **`PdfViewer` page-image mode (`pages`), with an access `policy` and a
+  `watermark`** (react-fancy#36). For showing a PDF without handing over the
+  file: your app renders the PDF to page images on its server, behind its own
+  auth, and the viewer only displays them.
+  - `pages={{ count, url: (page, scale) => string, aspectRatio? }}`. The page
+    images are the **only** requests the viewer makes. It never fetches or
+    references the PDF, and `src` is ignored in this mode even if passed.
+    `scale` is zoom x devicePixelRatio, rounded up to 1, 1.5, 2, 3 or 4.
+  - Its own toolbar: previous / next page, zoom out / reset / in, fit width,
+    fit page. With `frame`, full screen comes from the `FauxClient` frame.
+    Pages near the viewport get images; the rest are sized placeholders.
+  - Controlled `page` / `onPageChange` and `zoom` / `onZoomChange`, with stable
+    `data-react-fancy-pdf-viewer-*` handles on each page and button.
+  - **No search**: page images have no text to search. That is the cost of
+    not sending the PDF.
+  - `policy={{ download?, print?, copy?, screenshot? }}`, all allowed by default.
+    **Every flag is a deterrent, not a guarantee.** The real protection is that
+    the PDF never reaches the browser:
+    - `download: false`: no context menu on the pages and the images are not
+      draggable. Page images can still be captured (devtools, cache, screen).
+    - `print: false`: print CSS blanks the viewer, and Ctrl/Cmd+P is
+      intercepted while focus is inside it.
+    - `copy: false`: user selection off (there is no text layer anyway).
+    - `screenshot: "deter"`: the pages blur while the tab is hidden or the
+      window loses focus, and for 1.5 s after PrintScreen (which also tries to
+      clear the clipboard, best effort). **A web page cannot prevent
+      screenshots.**
+  - `watermark={{ text, opacity?, angle?, density? }}`: a tiled overlay on every
+    page, `pointer-events: none`. **It can be removed with devtools.** If it
+    must hold, burn it into the images on your server; `url(page, scale)` is
+    where to ask for that.
+  - `policy` and `watermark` apply only in page-image mode. The native-plugin
+    mode (`src`) is unchanged and cannot be restricted.
+  - New types: `PdfPageSource`, `PdfViewerPolicy`, `PdfViewerWatermark`.
+  - `MediaViewer` (`pdfProps`) and fancy-code's `FileViewer`
+    (`mediaProps.pdfProps`) already forward these untouched, so neither needed a
+    change.
+- **What to do:** nothing unless you want it. `src` is now optional in the
+  types, since page-image mode does not need one; every existing call compiles
+  and renders as before. No new dependencies.
+
 ## [5.53.1] - 2026-10-21
 
 ### Fixed

package/dist/PdfViewer.types-BEk2Jq6p.d.ts

@@ -0,0 +1,97 @@
+import { F as FauxClientProps } from './FauxClient.types-Dtk9aRs6.js';
+import { CSSProperties } from 'react';
+
+/**
+ * Pages the APP rendered to images, behind its own auth. With this the viewer
+ * never fetches or references the PDF: these URLs are its only requests.
+ */
+interface PdfPageSource {
+    /** Number of pages. */
+    count: number;
+    /**
+     * The image URL for a page (1-based). `scale` is a resolution hint, the zoom
+     * times the device pixel ratio rounded UP to one of 1, 1.5, 2, 3 or 4, so a
+     * page is fetched at a handful of sizes rather than one per zoom click.
+     * Render scale 1 at whatever width reads sharply at fit-width in your layout.
+     * This is also the place to burn a watermark in on the server.
+     */
+    url: (page: number, scale: number) => string;
+    /**
+     * Page width / height, used to size a page before its image arrives (each
+     * page switches to its image's real ratio once loaded). Default A4 portrait,
+     * `1 / Math.SQRT2`.
+     */
+    aspectRatio?: number;
+}
+/**
+ * What a viewer of the page images may do. Every flag defaults to allowed.
+ * These are DETERRENTS: a web page cannot stop a determined viewer, and a page
+ * image that reached the screen can always be captured. Real control is the
+ * app never serving the PDF, which page-image mode makes possible.
+ */
+interface PdfViewerPolicy {
+    /** `false`: no context menu ("Save image as") and no dragging the images out. */
+    download?: boolean;
+    /** `false`: print CSS blanks the viewer, and Ctrl/Cmd+P is swallowed while focus is inside it. */
+    print?: boolean;
+    /** `false`: user selection is off. (Page images have no text layer anyway.) */
+    copy?: boolean;
+    /**
+     * `"deter"`: the pages blur while the tab is hidden or the window has lost
+     * focus, and briefly after a PrintScreen key. It CANNOT prevent a screenshot.
+     * Default `"allow"`.
+     */
+    screenshot?: "allow" | "deter";
+}
+/** A tiled text overlay drawn over every page, in the browser. */
+interface PdfViewerWatermark {
+    text: string;
+    /** 0-1. Default 0.15. */
+    opacity?: number;
+    /** Degrees. Default -30. */
+    angle?: number;
+    /** Repeats per area; 2 tiles twice as tightly. Default 1. */
+    density?: number;
+}
+interface PdfViewerProps {
+    /**
+     * Show the PDF in react-fancy's `FauxClient` frame with a full-screen button,
+     * revealed on hover. Zoom stays on the browser's own PDF toolbar (with
+     * `pages`, on the viewer's toolbar). Default `false`.
+     */
+    frame?: boolean;
+    /** Passed to the frame (`variant`, `onFullscreenChange`, …). */
+    frameProps?: Partial<FauxClientProps>;
+    /**
+     * PDF source — an `http(s):`, `data:`, or `blob:` URL — shown in the
+     * browser's native PDF plugin. Ignored, and never referenced, when `pages` is set.
+     */
+    src?: string;
+    /**
+     * Page-image mode: show server-rendered page images instead of embedding the
+     * PDF. `policy` and `watermark` apply only in this mode.
+     */
+    pages?: PdfPageSource;
+    /** The current page (1-based), controlled. */
+    page?: number;
+    /** Starting page when uncontrolled. Default 1. */
+    defaultPage?: number;
+    onPageChange?: (page: number) => void;
+    /** Zoom, 1 = fit width, controlled (page-image mode). */
+    zoom?: number;
+    /** Default 1. */
+    defaultZoom?: number;
+    onZoomChange?: (zoom: number) => void;
+    /** What the viewer may do with the pages (page-image mode). Default: everything allowed. */
+    policy?: PdfViewerPolicy;
+    /** A tiled overlay over every page (page-image mode). Removable with devtools; burn it in server-side when it must hold. */
+    watermark?: PdfViewerWatermark;
+    /** Accessible title for the document (default `"PDF document"`). */
+    title?: string;
+    /** Additional CSS classes for the container. */
+    className?: string;
+    /** Inline styles for the container (e.g. a fixed height). */
+    style?: CSSProperties;
+}
+
+export type { PdfPageSource as P, PdfViewerPolicy as a, PdfViewerProps as b, PdfViewerWatermark as c };

package/dist/PdfViewer.types-DyoUBa2g.d.cts

@@ -0,0 +1,97 @@
+import { F as FauxClientProps } from './FauxClient.types-Dtk9aRs6.cjs';
+import { CSSProperties } from 'react';
+
+/**
+ * Pages the APP rendered to images, behind its own auth. With this the viewer
+ * never fetches or references the PDF: these URLs are its only requests.
+ */
+interface PdfPageSource {
+    /** Number of pages. */
+    count: number;
+    /**
+     * The image URL for a page (1-based). `scale` is a resolution hint, the zoom
+     * times the device pixel ratio rounded UP to one of 1, 1.5, 2, 3 or 4, so a
+     * page is fetched at a handful of sizes rather than one per zoom click.
+     * Render scale 1 at whatever width reads sharply at fit-width in your layout.
+     * This is also the place to burn a watermark in on the server.
+     */
+    url: (page: number, scale: number) => string;
+    /**
+     * Page width / height, used to size a page before its image arrives (each
+     * page switches to its image's real ratio once loaded). Default A4 portrait,
+     * `1 / Math.SQRT2`.
+     */
+    aspectRatio?: number;
+}
+/**
+ * What a viewer of the page images may do. Every flag defaults to allowed.
+ * These are DETERRENTS: a web page cannot stop a determined viewer, and a page
+ * image that reached the screen can always be captured. Real control is the
+ * app never serving the PDF, which page-image mode makes possible.
+ */
+interface PdfViewerPolicy {
+    /** `false`: no context menu ("Save image as") and no dragging the images out. */
+    download?: boolean;
+    /** `false`: print CSS blanks the viewer, and Ctrl/Cmd+P is swallowed while focus is inside it. */
+    print?: boolean;
+    /** `false`: user selection is off. (Page images have no text layer anyway.) */
+    copy?: boolean;
+    /**
+     * `"deter"`: the pages blur while the tab is hidden or the window has lost
+     * focus, and briefly after a PrintScreen key. It CANNOT prevent a screenshot.
+     * Default `"allow"`.
+     */
+    screenshot?: "allow" | "deter";
+}
+/** A tiled text overlay drawn over every page, in the browser. */
+interface PdfViewerWatermark {
+    text: string;
+    /** 0-1. Default 0.15. */
+    opacity?: number;
+    /** Degrees. Default -30. */
+    angle?: number;
+    /** Repeats per area; 2 tiles twice as tightly. Default 1. */
+    density?: number;
+}
+interface PdfViewerProps {
+    /**
+     * Show the PDF in react-fancy's `FauxClient` frame with a full-screen button,
+     * revealed on hover. Zoom stays on the browser's own PDF toolbar (with
+     * `pages`, on the viewer's toolbar). Default `false`.
+     */
+    frame?: boolean;
+    /** Passed to the frame (`variant`, `onFullscreenChange`, …). */
+    frameProps?: Partial<FauxClientProps>;
+    /**
+     * PDF source — an `http(s):`, `data:`, or `blob:` URL — shown in the
+     * browser's native PDF plugin. Ignored, and never referenced, when `pages` is set.
+     */
+    src?: string;
+    /**
+     * Page-image mode: show server-rendered page images instead of embedding the
+     * PDF. `policy` and `watermark` apply only in this mode.
+     */
+    pages?: PdfPageSource;
+    /** The current page (1-based), controlled. */
+    page?: number;
+    /** Starting page when uncontrolled. Default 1. */
+    defaultPage?: number;
+    onPageChange?: (page: number) => void;
+    /** Zoom, 1 = fit width, controlled (page-image mode). */
+    zoom?: number;
+    /** Default 1. */
+    defaultZoom?: number;
+    onZoomChange?: (zoom: number) => void;
+    /** What the viewer may do with the pages (page-image mode). Default: everything allowed. */
+    policy?: PdfViewerPolicy;
+    /** A tiled overlay over every page (page-image mode). Removable with devtools; burn it in server-side when it must hold. */
+    watermark?: PdfViewerWatermark;
+    /** Accessible title for the document (default `"PDF document"`). */
+    title?: string;
+    /** Additional CSS classes for the container. */
+    className?: string;
+    /** Inline styles for the container (e.g. a fixed height). */
+    style?: CSSProperties;
+}
+
+export type { PdfPageSource as P, PdfViewerPolicy as a, PdfViewerProps as b, PdfViewerWatermark as c };

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