@particle-academy/react-fancy 6.10.0 → 6.11.1

package/dist/drawer.cjs

@@ -1,7 +1,8 @@
 'use strict';
 
-var chunk7NRG77U5_cjs = require('./chunk-7NRG77U5.cjs');
-require('./chunk-TXTRTTG7.cjs');
+var chunkTXQT6S4D_cjs = require('./chunk-TXQT6S4D.cjs');
+require('./chunk-RE3PMG47.cjs');
+require('./chunk-UOG3O3KP.cjs');
 require('./chunk-FQZE5N2N.cjs');
 require('./chunk-MKHYENKR.cjs');
 require('./chunk-TI7D4QDM.cjs');
@@ -12,11 +13,11 @@ require('./chunk-ZU5Q77OT.cjs');
 
 Object.defineProperty(exports, "Drawer", {
   enumerable: true,
-  get: function () { return chunk7NRG77U5_cjs.Drawer; }
+  get: function () { return chunkTXQT6S4D_cjs.Drawer; }
 });
 Object.defineProperty(exports, "useDrawer", {
   enumerable: true,
-  get: function () { return chunk7NRG77U5_cjs.useDrawer; }
+  get: function () { return chunkTXQT6S4D_cjs.useDrawer; }
 });
 //# sourceMappingURL=drawer.cjs.map
 //# sourceMappingURL=drawer.cjs.map

package/dist/drawer.d.cts

@@ -55,6 +55,8 @@ interface DrawerHeaderProps {
     /** Show the close button. Default `true`. */
     closable?: boolean;
     className?: string;
+    /** Accessible name of the close button. Default `"Close"`; pass your locale's word. */
+    closeLabel?: string;
 }
 interface DrawerBodyProps {
     children: ReactNode;
@@ -69,7 +71,12 @@ interface DrawerContainerProps extends HTMLAttributes<HTMLDivElement> {
     className?: string;
 }
 
-declare function DrawerHeader({ children, closable, className }: DrawerHeaderProps): react.JSX.Element;
+/**
+ * The close button draws at 26px (18px icon + `p-1`) and HITS at 44px (WCAG
+ * 2.5.5, AAA): a `::before` overhangs it by 9px, inside the header's `py-3`. The
+ * look is unchanged; see ModalHeader for why this over a size option.
+ */
+declare function DrawerHeader({ children, closable, className, closeLabel }: DrawerHeaderProps): react.JSX.Element;
 declare namespace DrawerHeader {
     var displayName: string;
 }

package/dist/drawer.d.ts

@@ -55,6 +55,8 @@ interface DrawerHeaderProps {
     /** Show the close button. Default `true`. */
     closable?: boolean;
     className?: string;
+    /** Accessible name of the close button. Default `"Close"`; pass your locale's word. */
+    closeLabel?: string;
 }
 interface DrawerBodyProps {
     children: ReactNode;
@@ -69,7 +71,12 @@ interface DrawerContainerProps extends HTMLAttributes<HTMLDivElement> {
     className?: string;
 }
 
-declare function DrawerHeader({ children, closable, className }: DrawerHeaderProps): react.JSX.Element;
+/**
+ * The close button draws at 26px (18px icon + `p-1`) and HITS at 44px (WCAG
+ * 2.5.5, AAA): a `::before` overhangs it by 9px, inside the header's `py-3`. The
+ * look is unchanged; see ModalHeader for why this over a size option.
+ */
+declare function DrawerHeader({ children, closable, className, closeLabel }: DrawerHeaderProps): react.JSX.Element;
 declare namespace DrawerHeader {
     var displayName: string;
 }

package/dist/drawer.js

@@ -1,5 +1,6 @@
-export { Drawer, useDrawer } from './chunk-ZBXJDQXN.js';
-import './chunk-5U2DZ7AV.js';
+export { Drawer, useDrawer } from './chunk-JJYMRV62.js';
+import './chunk-HHCVBIMM.js';
+import './chunk-MUV7OK3W.js';
 import './chunk-3K2CEAI7.js';
 import './chunk-5VMILVWD.js';
 import './chunk-RBCMKPBX.js';

package/dist/editor.cjs

@@ -5,7 +5,7 @@ require('./chunk-A2JUTNE6.cjs');
 require('./chunk-T6YELZPJ.cjs');
 require('./chunk-VQJ5LJJH.cjs');
 require('./chunk-4GOOSZEK.cjs');
-require('./chunk-TXTRTTG7.cjs');
+require('./chunk-UOG3O3KP.cjs');
 require('./chunk-FQZE5N2N.cjs');
 require('./chunk-AIA5UNQ5.cjs');
 require('./chunk-U4KUW3RK.cjs');

package/dist/editor.js

@@ -3,7 +3,7 @@ import './chunk-2BXMMVQS.js';
 import './chunk-CPY7NHXM.js';
 import './chunk-RP43ZFZP.js';
 import './chunk-ZQ3VXRUY.js';
-import './chunk-5U2DZ7AV.js';
+import './chunk-MUV7OK3W.js';
 import './chunk-3K2CEAI7.js';
 import './chunk-TJ66S5K6.js';
 import './chunk-ZL5QVNKG.js';

package/dist/file-upload.cjs

@@ -1,17 +1,17 @@
 'use strict';
 
-var chunkNIFHAFKK_cjs = require('./chunk-NIFHAFKK.cjs');
+var chunkJFPBW5MO_cjs = require('./chunk-JFPBW5MO.cjs');
 require('./chunk-ZU5Q77OT.cjs');
 
 
 
 Object.defineProperty(exports, "FileUpload", {
   enumerable: true,
-  get: function () { return chunkNIFHAFKK_cjs.FileUpload; }
+  get: function () { return chunkJFPBW5MO_cjs.FileUpload; }
 });
 Object.defineProperty(exports, "useFileUpload", {
   enumerable: true,
-  get: function () { return chunkNIFHAFKK_cjs.useFileUpload; }
+  get: function () { return chunkJFPBW5MO_cjs.useFileUpload; }
 });
 //# sourceMappingURL=file-upload.cjs.map
 //# sourceMappingURL=file-upload.cjs.map

package/dist/file-upload.js

@@ -1,4 +1,4 @@
-export { FileUpload, useFileUpload } from './chunk-ZHTK4IPQ.js';
+export { FileUpload, useFileUpload } from './chunk-4676NOI6.js';
 import './chunk-MMW2JGKZ.js';
 //# sourceMappingURL=file-upload.js.map
 //# sourceMappingURL=file-upload.js.map

package/dist/index.cjs

@@ -51,7 +51,7 @@ var chunkTH7VP4CL_cjs = require('./chunk-TH7VP4CL.cjs');
 var chunkHYU46SOE_cjs = require('./chunk-HYU46SOE.cjs');
 var chunk5NTFXQ4K_cjs = require('./chunk-5NTFXQ4K.cjs');
 var chunk3BBEVHSP_cjs = require('./chunk-3BBEVHSP.cjs');
-var chunkHANQYZW2_cjs = require('./chunk-HANQYZW2.cjs');
+var chunkGB2EGMVQ_cjs = require('./chunk-GB2EGMVQ.cjs');
 var chunkCG3RCQVL_cjs = require('./chunk-CG3RCQVL.cjs');
 var chunkGISORLGW_cjs = require('./chunk-GISORLGW.cjs');
 require('./chunk-FJKZ5NOA.cjs');
@@ -75,24 +75,25 @@ var chunk7K2C744H_cjs = require('./chunk-7K2C744H.cjs');
 var chunkVH34IZ7R_cjs = require('./chunk-VH34IZ7R.cjs');
 var chunkZDHLEHYR_cjs = require('./chunk-ZDHLEHYR.cjs');
 var chunkXQF4HCOV_cjs = require('./chunk-XQF4HCOV.cjs');
-var chunkNIFHAFKK_cjs = require('./chunk-NIFHAFKK.cjs');
+var chunkJFPBW5MO_cjs = require('./chunk-JFPBW5MO.cjs');
 var chunkWVSHAJKI_cjs = require('./chunk-WVSHAJKI.cjs');
 var chunkOOZCJLEF_cjs = require('./chunk-OOZCJLEF.cjs');
-var chunkEC4ZYZNK_cjs = require('./chunk-EC4ZYZNK.cjs');
+var chunkNFUKNVB7_cjs = require('./chunk-NFUKNVB7.cjs');
 var chunkZFXCZ2QO_cjs = require('./chunk-ZFXCZ2QO.cjs');
 require('./chunk-JKD6CFIP.cjs');
 var chunkTBLKVTJC_cjs = require('./chunk-TBLKVTJC.cjs');
 var chunkMAY4NMRI_cjs = require('./chunk-MAY4NMRI.cjs');
 var chunkFQSSVOVQ_cjs = require('./chunk-FQSSVOVQ.cjs');
 var chunkQU6HZH6V_cjs = require('./chunk-QU6HZH6V.cjs');
-var chunk7NRG77U5_cjs = require('./chunk-7NRG77U5.cjs');
+var chunkTXQT6S4D_cjs = require('./chunk-TXQT6S4D.cjs');
+require('./chunk-RE3PMG47.cjs');
 var chunkHEGM5LMZ_cjs = require('./chunk-HEGM5LMZ.cjs');
 var chunkGE6TSA3M_cjs = require('./chunk-GE6TSA3M.cjs');
 var chunkA2JUTNE6_cjs = require('./chunk-A2JUTNE6.cjs');
 var chunkT6YELZPJ_cjs = require('./chunk-T6YELZPJ.cjs');
 var chunkVQJ5LJJH_cjs = require('./chunk-VQJ5LJJH.cjs');
 var chunk4GOOSZEK_cjs = require('./chunk-4GOOSZEK.cjs');
-var chunkTXTRTTG7_cjs = require('./chunk-TXTRTTG7.cjs');
+var chunkUOG3O3KP_cjs = require('./chunk-UOG3O3KP.cjs');
 var chunkFQZE5N2N_cjs = require('./chunk-FQZE5N2N.cjs');
 var chunk7PK3OUKR_cjs = require('./chunk-7PK3OUKR.cjs');
 var chunkTTZJ2KXK_cjs = require('./chunk-TTZJ2KXK.cjs');
@@ -492,11 +493,11 @@ Object.defineProperty(exports, "useMobileMenu", {
 });
 Object.defineProperty(exports, "Modal", {
   enumerable: true,
-  get: function () { return chunkHANQYZW2_cjs.Modal; }
+  get: function () { return chunkGB2EGMVQ_cjs.Modal; }
 });
 Object.defineProperty(exports, "useModal", {
   enumerable: true,
-  get: function () { return chunkHANQYZW2_cjs.useModal; }
+  get: function () { return chunkGB2EGMVQ_cjs.useModal; }
 });
 Object.defineProperty(exports, "MoodMeter", {
   enumerable: true,
@@ -660,11 +661,11 @@ Object.defineProperty(exports, "validateFolderName", {
 });
 Object.defineProperty(exports, "FileUpload", {
   enumerable: true,
-  get: function () { return chunkNIFHAFKK_cjs.FileUpload; }
+  get: function () { return chunkJFPBW5MO_cjs.FileUpload; }
 });
 Object.defineProperty(exports, "useFileUpload", {
   enumerable: true,
-  get: function () { return chunkNIFHAFKK_cjs.useFileUpload; }
+  get: function () { return chunkJFPBW5MO_cjs.useFileUpload; }
 });
 Object.defineProperty(exports, "FullScreen", {
   enumerable: true,
@@ -676,11 +677,11 @@ Object.defineProperty(exports, "Grid", {
 });
 Object.defineProperty(exports, "Command", {
   enumerable: true,
-  get: function () { return chunkEC4ZYZNK_cjs.Command; }
+  get: function () { return chunkNFUKNVB7_cjs.Command; }
 });
 Object.defineProperty(exports, "useCommand", {
   enumerable: true,
-  get: function () { return chunkEC4ZYZNK_cjs.useCommand; }
+  get: function () { return chunkNFUKNVB7_cjs.useCommand; }
 });
 Object.defineProperty(exports, "Composer", {
   enumerable: true,
@@ -728,11 +729,11 @@ Object.defineProperty(exports, "useContextMenu", {
 });
 Object.defineProperty(exports, "Drawer", {
   enumerable: true,
-  get: function () { return chunk7NRG77U5_cjs.Drawer; }
+  get: function () { return chunkTXQT6S4D_cjs.Drawer; }
 });
 Object.defineProperty(exports, "useDrawer", {
   enumerable: true,
-  get: function () { return chunk7NRG77U5_cjs.useDrawer; }
+  get: function () { return chunkTXQT6S4D_cjs.useDrawer; }
 });
 Object.defineProperty(exports, "Dropdown", {
   enumerable: true,
@@ -812,7 +813,7 @@ Object.defineProperty(exports, "useFullScreen", {
 });
 Object.defineProperty(exports, "useFocusTrap", {
   enumerable: true,
-  get: function () { return chunkTXTRTTG7_cjs.useFocusTrap; }
+  get: function () { return chunkUOG3O3KP_cjs.useFocusTrap; }
 });
 Object.defineProperty(exports, "useAnimation", {
   enumerable: true,

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/theme-tokens.ts"],"names":[],"mappings":"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","file":"index.cjs","sourcesContent":["/**\n * Semantic theme tokens — the small set of colours the kit's DOM components\n * read, so a host can repaint the whole kit with its own palette WITHOUT\n * remapping Tailwind's `zinc` or `violet`.\n *\n * Each role is two CSS custom properties, one per mode:\n *\n *   --fancy-surface        the light value\n *   --fancy-surface-dark   the dark value\n *\n * Components read them through their var() FALLBACK, which is the colour the\n * component used before these existed:\n *\n *   bg-[color:var(--fancy-surface,var(--color-white))]\n *     dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\n *\n * So:\n *  - **Set nothing and nothing changes.** An unset custom property resolves to\n *    its fallback, which is the exact declaration the old `bg-white` produced.\n *  - **Set one and every surface follows**, wherever the variable is in scope:\n *    `:root`, `body`, or any wrapper element. No selector to match, no layer or\n *    specificity to win — a custom property is inherited, not cascaded against.\n *  - **Both modes are stated, not derived.** The dark value is a separate\n *    variable rather than a flip under `.dark`, so which one applies is decided\n *    by the host's own `dark:` variant — the same switch that drives every\n *    other `dark:` utility in the kit. (See `dark-variant.css` for a variant\n *    that follows `[data-theme=\"dark\"]` as well as `.dark`.)\n *\n * NOT covered, deliberately: colours that ENCODE DATA — chart series,\n * file-type marks, mood and confidence scales, event kinds. Repainting those\n * with a host's neutral palette would erase what they mean. A component's\n * explicit `color` prop (Badge, Button, Callout …) is also untouched: that is\n * the host choosing a hue, not the kit choosing one for it.\n *\n * `light` / `dark` are the defaults exactly as components write them in their\n * fallbacks. `tests/theme-tokens.test.tsx` fails if a component's fallback\n * disagrees with this table, so the table is the contract rather than a\n * description of it.\n */\nexport const THEME_TOKENS = {\n  surface: {\n    variable: \"--fancy-surface\",\n    darkVariable: \"--fancy-surface-dark\",\n    light: \"var(--color-white)\",\n    dark: \"var(--color-zinc-900)\",\n    description: \"Panels, cards, overlays (menus, modals, popovers, toasts), sidebars and navbars.\",\n  },\n  \"surface-muted\": {\n    variable: \"--fancy-surface-muted\",\n    darkVariable: \"--fancy-surface-muted-dark\",\n    light: \"var(--color-zinc-100)\",\n    dark: \"var(--color-zinc-800)\",\n    description: \"Hovered and selected rows, chips, inset wells, toolbar buttons.\",\n  },\n  border: {\n    variable: \"--fancy-border\",\n    darkVariable: \"--fancy-border-dark\",\n    light: \"var(--color-zinc-200)\",\n    dark: \"var(--color-zinc-700)\",\n    description: \"Outlines, dividers, separators and tracks (skeletons, progress, sliders).\",\n  },\n  \"border-strong\": {\n    variable: \"--fancy-border-strong\",\n    darkVariable: \"--fancy-border-strong-dark\",\n    light: \"var(--color-zinc-300)\",\n    dark: \"var(--color-zinc-700)\",\n    description: \"The firmer outline on form controls (inputs, checkboxes, radios) and keycaps.\",\n  },\n  input: {\n    variable: \"--fancy-input\",\n    darkVariable: \"--fancy-input-dark\",\n    light: \"var(--color-white)\",\n    dark: \"#1e1e24\",\n    description: \"The field surface of text inputs, checkboxes, radios, OTP cells and pickers.\",\n  },\n  text: {\n    variable: \"--fancy-text\",\n    darkVariable: \"--fancy-text-dark\",\n    light: \"var(--color-zinc-900)\",\n    dark: \"var(--color-zinc-100)\",\n    description: \"Strongest foreground: headings, values, field text, active items.\",\n  },\n  \"text-soft\": {\n    variable: \"--fancy-text-soft\",\n    darkVariable: \"--fancy-text-soft-dark\",\n    light: \"var(--color-zinc-700)\",\n    dark: \"var(--color-zinc-300)\",\n    description: \"Body copy and menu items: readable, one step back from text.\",\n  },\n  \"text-muted\": {\n    variable: \"--fancy-text-muted\",\n    darkVariable: \"--fancy-text-muted-dark\",\n    light: \"var(--color-zinc-500)\",\n    dark: \"var(--color-zinc-400)\",\n    description: \"Descriptions, captions, secondary labels, axis labels.\",\n  },\n  \"text-faint\": {\n    variable: \"--fancy-text-faint\",\n    darkVariable: \"--fancy-text-faint-dark\",\n    light: \"var(--color-zinc-400)\",\n    dark: \"var(--color-zinc-500)\",\n    description: \"Placeholders, disabled hints, decorative icons.\",\n  },\n  \"text-subtle\": {\n    variable: \"--fancy-text-subtle\",\n    darkVariable: \"--fancy-text-subtle-dark\",\n    light: \"var(--color-zinc-600)\",\n    dark: \"var(--color-zinc-400)\",\n    description: \"Inactive nav labels (Sidebar, Menu, Navbar, MultiSwitch) and secondary prose. Added 5.53.1.\",\n  },\n  \"surface-hover\": {\n    variable: \"--fancy-surface-hover\",\n    darkVariable: \"--fancy-surface-hover-dark\",\n    light: \"var(--color-zinc-50)\",\n    // Tailwind's `bg-zinc-800/50`, written out so a host's value is used as-is.\n    dark: \"color-mix(in oklab, var(--color-zinc-800) 50%, transparent)\",\n    description: \"The hover fill on nav items, list options and table rows. Added 5.53.1.\",\n  },\n  focus: {\n    variable: \"--fancy-focus\",\n    darkVariable: \"--fancy-focus-dark\",\n    light: \"var(--color-blue-500)\",\n    dark: \"var(--color-blue-400)\",\n    description: \"The focus border and ring on form controls.\",\n  },\n} as const;\n\nexport type ThemeTokenRole = keyof typeof THEME_TOKENS;\n"]}
+{"version":3,"sources":["../src/theme-tokens.ts"],"names":[],"mappings":"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","file":"index.cjs","sourcesContent":["/**\n * Semantic theme tokens — the small set of colours the kit's DOM components\n * read, so a host can repaint the whole kit with its own palette WITHOUT\n * remapping Tailwind's `zinc` or `violet`.\n *\n * Each role is two CSS custom properties, one per mode:\n *\n *   --fancy-surface        the light value\n *   --fancy-surface-dark   the dark value\n *\n * Components read them through their var() FALLBACK, which is the colour the\n * component used before these existed:\n *\n *   bg-[color:var(--fancy-surface,var(--color-white))]\n *     dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\n *\n * So:\n *  - **Set nothing and nothing changes.** An unset custom property resolves to\n *    its fallback, which is the exact declaration the old `bg-white` produced.\n *  - **Set one and every surface follows**, wherever the variable is in scope:\n *    `:root`, `body`, or any wrapper element. No selector to match, no layer or\n *    specificity to win — a custom property is inherited, not cascaded against.\n *  - **Both modes are stated, not derived.** The dark value is a separate\n *    variable rather than a flip under `.dark`, so which one applies is decided\n *    by the host's own `dark:` variant — the same switch that drives every\n *    other `dark:` utility in the kit. (See `dark-variant.css` for a variant\n *    that follows `[data-theme=\"dark\"]` as well as `.dark`.)\n *\n * NOT covered, deliberately: colours that ENCODE DATA — chart series,\n * file-type marks, mood and confidence scales, event kinds. Repainting those\n * with a host's neutral palette would erase what they mean. A component's\n * explicit `color` prop (Badge, Button, Callout …) is also untouched: that is\n * the host choosing a hue, not the kit choosing one for it.\n *\n * `light` / `dark` are the defaults exactly as components write them in their\n * fallbacks. `tests/theme-tokens.test.tsx` fails if a component's fallback\n * disagrees with this table, so the table is the contract rather than a\n * description of it.\n */\nexport const THEME_TOKENS = {\n  surface: {\n    variable: \"--fancy-surface\",\n    darkVariable: \"--fancy-surface-dark\",\n    light: \"var(--color-white)\",\n    dark: \"var(--color-zinc-900)\",\n    description: \"Panels, cards, overlays (menus, modals, popovers, toasts), sidebars and navbars.\",\n  },\n  \"surface-muted\": {\n    variable: \"--fancy-surface-muted\",\n    darkVariable: \"--fancy-surface-muted-dark\",\n    light: \"var(--color-zinc-100)\",\n    dark: \"var(--color-zinc-800)\",\n    description: \"Hovered and selected rows, chips, inset wells, toolbar buttons.\",\n  },\n  border: {\n    variable: \"--fancy-border\",\n    darkVariable: \"--fancy-border-dark\",\n    light: \"var(--color-zinc-200)\",\n    dark: \"var(--color-zinc-700)\",\n    description: \"Outlines, dividers, separators and tracks (skeletons, progress, sliders).\",\n  },\n  \"border-strong\": {\n    variable: \"--fancy-border-strong\",\n    darkVariable: \"--fancy-border-strong-dark\",\n    light: \"var(--color-zinc-300)\",\n    dark: \"var(--color-zinc-700)\",\n    description: \"The firmer outline on form controls (inputs, checkboxes, radios) and keycaps.\",\n  },\n  input: {\n    variable: \"--fancy-input\",\n    darkVariable: \"--fancy-input-dark\",\n    light: \"var(--color-white)\",\n    dark: \"#1e1e24\",\n    description: \"The field surface of text inputs, checkboxes, radios, OTP cells and pickers.\",\n  },\n  text: {\n    variable: \"--fancy-text\",\n    darkVariable: \"--fancy-text-dark\",\n    light: \"var(--color-zinc-900)\",\n    dark: \"var(--color-zinc-100)\",\n    description: \"Strongest foreground: headings, values, field text, active items.\",\n  },\n  \"text-soft\": {\n    variable: \"--fancy-text-soft\",\n    darkVariable: \"--fancy-text-soft-dark\",\n    light: \"var(--color-zinc-700)\",\n    dark: \"var(--color-zinc-300)\",\n    description: \"Body copy and menu items: readable, one step back from text.\",\n  },\n  \"text-muted\": {\n    variable: \"--fancy-text-muted\",\n    darkVariable: \"--fancy-text-muted-dark\",\n    light: \"var(--color-zinc-500)\",\n    dark: \"var(--color-zinc-400)\",\n    description: \"Descriptions, captions, secondary labels, axis labels.\",\n  },\n  \"text-faint\": {\n    variable: \"--fancy-text-faint\",\n    darkVariable: \"--fancy-text-faint-dark\",\n    light: \"var(--color-zinc-400)\",\n    dark: \"var(--color-zinc-500)\",\n    description: \"Placeholders, disabled hints, decorative icons.\",\n  },\n  \"text-subtle\": {\n    variable: \"--fancy-text-subtle\",\n    darkVariable: \"--fancy-text-subtle-dark\",\n    light: \"var(--color-zinc-600)\",\n    dark: \"var(--color-zinc-400)\",\n    description: \"Inactive nav labels (Sidebar, Menu, Navbar, MultiSwitch) and secondary prose. Added 5.53.1.\",\n  },\n  \"surface-hover\": {\n    variable: \"--fancy-surface-hover\",\n    darkVariable: \"--fancy-surface-hover-dark\",\n    light: \"var(--color-zinc-50)\",\n    // Tailwind's `bg-zinc-800/50`, written out so a host's value is used as-is.\n    dark: \"color-mix(in oklab, var(--color-zinc-800) 50%, transparent)\",\n    description: \"The hover fill on nav items, list options and table rows. Added 5.53.1.\",\n  },\n  focus: {\n    variable: \"--fancy-focus\",\n    darkVariable: \"--fancy-focus-dark\",\n    light: \"var(--color-blue-500)\",\n    dark: \"var(--color-blue-400)\",\n    description: \"The focus border and ring on form controls.\",\n  },\n} as const;\n\nexport type ThemeTokenRole = keyof typeof THEME_TOKENS;\n"]}

package/dist/index.d.cts

@@ -257,7 +257,18 @@ declare function useControllableState<T>(controlledValue: T | undefined, default
 
 declare function useOutsideClick(ref: RefObject<HTMLElement | null>, handler: (event: MouseEvent | TouchEvent) => void, enabled?: boolean, ignoreRef?: RefObject<HTMLElement | null>): void;
 
-declare function useFocusTrap(ref: RefObject<HTMLElement | null>, enabled?: boolean): void;
+/**
+ * Moves focus into `ref`, keeps Tab inside it, and restores focus on disable.
+ *
+ * `ref.current` must already be set in the commit where `enabled` turns true:
+ * the effect does not run again until `enabled` changes. A panel that mounts
+ * later (an animation, a Portal) should key `enabled` on the node — see
+ * `useDialogFocusTrap`.
+ *
+ * `restoreTo`, when it holds an element, is where focus returns on disable
+ * instead of whatever was focused when the trap engaged.
+ */
+declare function useFocusTrap(ref: RefObject<HTMLElement | null>, enabled?: boolean, restoreTo?: RefObject<HTMLElement | null>): void;
 
 /**
  * Writing direction, read from the DOM rather than passed as a prop.

package/dist/index.d.ts

@@ -257,7 +257,18 @@ declare function useControllableState<T>(controlledValue: T | undefined, default
 
 declare function useOutsideClick(ref: RefObject<HTMLElement | null>, handler: (event: MouseEvent | TouchEvent) => void, enabled?: boolean, ignoreRef?: RefObject<HTMLElement | null>): void;
 
-declare function useFocusTrap(ref: RefObject<HTMLElement | null>, enabled?: boolean): void;
+/**
+ * Moves focus into `ref`, keeps Tab inside it, and restores focus on disable.
+ *
+ * `ref.current` must already be set in the commit where `enabled` turns true:
+ * the effect does not run again until `enabled` changes. A panel that mounts
+ * later (an animation, a Portal) should key `enabled` on the node — see
+ * `useDialogFocusTrap`.
+ *
+ * `restoreTo`, when it holds an element, is where focus returns on disable
+ * instead of whatever was focused when the trap engaged.
+ */
+declare function useFocusTrap(ref: RefObject<HTMLElement | null>, enabled?: boolean, restoreTo?: RefObject<HTMLElement | null>): void;
 
 /**
  * Writing direction, read from the DOM rather than passed as a prop.

package/dist/index.js

@@ -49,7 +49,7 @@ export { VideoViewer } from './chunk-VOGI7GX3.js';
 export { PdfViewer } from './chunk-UZZJJ3HJ.js';
 export { Menu, useMenu } from './chunk-V64XIPYG.js';
 export { MobileMenu, useMobileMenu } from './chunk-AE6ICNJR.js';
-export { Modal, useModal } from './chunk-GEQKNV7E.js';
+export { Modal, useModal } from './chunk-26GRLVCQ.js';
 export { MoodMeter } from './chunk-K6Q542VL.js';
 export { Navbar, useNavbar } from './chunk-TKGMH5PA.js';
 import './chunk-CFH6CJQG.js';
@@ -73,24 +73,25 @@ export { EmojiSelect } from './chunk-R3PCZSBQ.js';
 export { Eyebrow } from './chunk-FRUHEDZN.js';
 export { FauxClient } from './chunk-XH24BGEK.js';
 export { FileBrowser, FileBrowserNewFolder, useFileBrowser, validateFolderName } from './chunk-YZW7HQXH.js';
-export { FileUpload, useFileUpload } from './chunk-ZHTK4IPQ.js';
+export { FileUpload, useFileUpload } from './chunk-4676NOI6.js';
 export { FullScreen } from './chunk-GZ5Z56QK.js';
 export { Grid } from './chunk-TM3RTWKI.js';
-export { Command, useCommand } from './chunk-R6O6SLXK.js';
+export { Command, useCommand } from './chunk-LG2O26CG.js';
 export { Composer } from './chunk-J57JSHDC.js';
 import './chunk-J6IQHJET.js';
 export { InlinePasteEditor, PastedFilesInput, pasteMarker, useInlinePaste, usePastePills } from './chunk-FECD3WKN.js';
 export { Popover, usePopover } from './chunk-FNHKZMMI.js';
 export { Container } from './chunk-VKMPVFQK.js';
 export { ContextMenu, useContextMenu } from './chunk-BPTCMI3E.js';
-export { Drawer, useDrawer } from './chunk-ZBXJDQXN.js';
+export { Drawer, useDrawer } from './chunk-JJYMRV62.js';
+import './chunk-HHCVBIMM.js';
 export { Dropdown, useDropdown } from './chunk-H5LJFN7D.js';
 export { Editor, useEditor } from './chunk-PIYQPXLT.js';
 export { THEME_STORAGE_KEY, getThemePreference, initTheme, resolveTheme, setThemePreference, subscribeTheme, useId, useNodeRegistry, useTheme } from './chunk-2BXMMVQS.js';
 export { usePanZoom } from './chunk-CPY7NHXM.js';
 export { FullScreenContext, FullScreenProvider, FullScreenToggle, useFullScreenContext } from './chunk-RP43ZFZP.js';
 export { useFullScreen } from './chunk-ZQ3VXRUY.js';
-export { useFocusTrap } from './chunk-5U2DZ7AV.js';
+export { useFocusTrap } from './chunk-MUV7OK3W.js';
 export { useAnimation } from './chunk-3K2CEAI7.js';
 export { Card } from './chunk-4L3MGQAR.js';
 export { Heading } from './chunk-QPM4CZ4G.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/theme-tokens.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Semantic theme tokens — the small set of colours the kit's DOM components\n * read, so a host can repaint the whole kit with its own palette WITHOUT\n * remapping Tailwind's `zinc` or `violet`.\n *\n * Each role is two CSS custom properties, one per mode:\n *\n *   --fancy-surface        the light value\n *   --fancy-surface-dark   the dark value\n *\n * Components read them through their var() FALLBACK, which is the colour the\n * component used before these existed:\n *\n *   bg-[color:var(--fancy-surface,var(--color-white))]\n *     dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\n *\n * So:\n *  - **Set nothing and nothing changes.** An unset custom property resolves to\n *    its fallback, which is the exact declaration the old `bg-white` produced.\n *  - **Set one and every surface follows**, wherever the variable is in scope:\n *    `:root`, `body`, or any wrapper element. No selector to match, no layer or\n *    specificity to win — a custom property is inherited, not cascaded against.\n *  - **Both modes are stated, not derived.** The dark value is a separate\n *    variable rather than a flip under `.dark`, so which one applies is decided\n *    by the host's own `dark:` variant — the same switch that drives every\n *    other `dark:` utility in the kit. (See `dark-variant.css` for a variant\n *    that follows `[data-theme=\"dark\"]` as well as `.dark`.)\n *\n * NOT covered, deliberately: colours that ENCODE DATA — chart series,\n * file-type marks, mood and confidence scales, event kinds. Repainting those\n * with a host's neutral palette would erase what they mean. A component's\n * explicit `color` prop (Badge, Button, Callout …) is also untouched: that is\n * the host choosing a hue, not the kit choosing one for it.\n *\n * `light` / `dark` are the defaults exactly as components write them in their\n * fallbacks. `tests/theme-tokens.test.tsx` fails if a component's fallback\n * disagrees with this table, so the table is the contract rather than a\n * description of it.\n */\nexport const THEME_TOKENS = {\n  surface: {\n    variable: \"--fancy-surface\",\n    darkVariable: \"--fancy-surface-dark\",\n    light: \"var(--color-white)\",\n    dark: \"var(--color-zinc-900)\",\n    description: \"Panels, cards, overlays (menus, modals, popovers, toasts), sidebars and navbars.\",\n  },\n  \"surface-muted\": {\n    variable: \"--fancy-surface-muted\",\n    darkVariable: \"--fancy-surface-muted-dark\",\n    light: \"var(--color-zinc-100)\",\n    dark: \"var(--color-zinc-800)\",\n    description: \"Hovered and selected rows, chips, inset wells, toolbar buttons.\",\n  },\n  border: {\n    variable: \"--fancy-border\",\n    darkVariable: \"--fancy-border-dark\",\n    light: \"var(--color-zinc-200)\",\n    dark: \"var(--color-zinc-700)\",\n    description: \"Outlines, dividers, separators and tracks (skeletons, progress, sliders).\",\n  },\n  \"border-strong\": {\n    variable: \"--fancy-border-strong\",\n    darkVariable: \"--fancy-border-strong-dark\",\n    light: \"var(--color-zinc-300)\",\n    dark: \"var(--color-zinc-700)\",\n    description: \"The firmer outline on form controls (inputs, checkboxes, radios) and keycaps.\",\n  },\n  input: {\n    variable: \"--fancy-input\",\n    darkVariable: \"--fancy-input-dark\",\n    light: \"var(--color-white)\",\n    dark: \"#1e1e24\",\n    description: \"The field surface of text inputs, checkboxes, radios, OTP cells and pickers.\",\n  },\n  text: {\n    variable: \"--fancy-text\",\n    darkVariable: \"--fancy-text-dark\",\n    light: \"var(--color-zinc-900)\",\n    dark: \"var(--color-zinc-100)\",\n    description: \"Strongest foreground: headings, values, field text, active items.\",\n  },\n  \"text-soft\": {\n    variable: \"--fancy-text-soft\",\n    darkVariable: \"--fancy-text-soft-dark\",\n    light: \"var(--color-zinc-700)\",\n    dark: \"var(--color-zinc-300)\",\n    description: \"Body copy and menu items: readable, one step back from text.\",\n  },\n  \"text-muted\": {\n    variable: \"--fancy-text-muted\",\n    darkVariable: \"--fancy-text-muted-dark\",\n    light: \"var(--color-zinc-500)\",\n    dark: \"var(--color-zinc-400)\",\n    description: \"Descriptions, captions, secondary labels, axis labels.\",\n  },\n  \"text-faint\": {\n    variable: \"--fancy-text-faint\",\n    darkVariable: \"--fancy-text-faint-dark\",\n    light: \"var(--color-zinc-400)\",\n    dark: \"var(--color-zinc-500)\",\n    description: \"Placeholders, disabled hints, decorative icons.\",\n  },\n  \"text-subtle\": {\n    variable: \"--fancy-text-subtle\",\n    darkVariable: \"--fancy-text-subtle-dark\",\n    light: \"var(--color-zinc-600)\",\n    dark: \"var(--color-zinc-400)\",\n    description: \"Inactive nav labels (Sidebar, Menu, Navbar, MultiSwitch) and secondary prose. Added 5.53.1.\",\n  },\n  \"surface-hover\": {\n    variable: \"--fancy-surface-hover\",\n    darkVariable: \"--fancy-surface-hover-dark\",\n    light: \"var(--color-zinc-50)\",\n    // Tailwind's `bg-zinc-800/50`, written out so a host's value is used as-is.\n    dark: \"color-mix(in oklab, var(--color-zinc-800) 50%, transparent)\",\n    description: \"The hover fill on nav items, list options and table rows. Added 5.53.1.\",\n  },\n  focus: {\n    variable: \"--fancy-focus\",\n    darkVariable: \"--fancy-focus-dark\",\n    light: \"var(--color-blue-500)\",\n    dark: \"var(--color-blue-400)\",\n    description: \"The focus border and ring on form controls.\",\n  },\n} as const;\n\nexport type ThemeTokenRole = keyof typeof THEME_TOKENS;\n"]}
+{"version":3,"sources":["../src/theme-tokens.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Semantic theme tokens — the small set of colours the kit's DOM components\n * read, so a host can repaint the whole kit with its own palette WITHOUT\n * remapping Tailwind's `zinc` or `violet`.\n *\n * Each role is two CSS custom properties, one per mode:\n *\n *   --fancy-surface        the light value\n *   --fancy-surface-dark   the dark value\n *\n * Components read them through their var() FALLBACK, which is the colour the\n * component used before these existed:\n *\n *   bg-[color:var(--fancy-surface,var(--color-white))]\n *     dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\n *\n * So:\n *  - **Set nothing and nothing changes.** An unset custom property resolves to\n *    its fallback, which is the exact declaration the old `bg-white` produced.\n *  - **Set one and every surface follows**, wherever the variable is in scope:\n *    `:root`, `body`, or any wrapper element. No selector to match, no layer or\n *    specificity to win — a custom property is inherited, not cascaded against.\n *  - **Both modes are stated, not derived.** The dark value is a separate\n *    variable rather than a flip under `.dark`, so which one applies is decided\n *    by the host's own `dark:` variant — the same switch that drives every\n *    other `dark:` utility in the kit. (See `dark-variant.css` for a variant\n *    that follows `[data-theme=\"dark\"]` as well as `.dark`.)\n *\n * NOT covered, deliberately: colours that ENCODE DATA — chart series,\n * file-type marks, mood and confidence scales, event kinds. Repainting those\n * with a host's neutral palette would erase what they mean. A component's\n * explicit `color` prop (Badge, Button, Callout …) is also untouched: that is\n * the host choosing a hue, not the kit choosing one for it.\n *\n * `light` / `dark` are the defaults exactly as components write them in their\n * fallbacks. `tests/theme-tokens.test.tsx` fails if a component's fallback\n * disagrees with this table, so the table is the contract rather than a\n * description of it.\n */\nexport const THEME_TOKENS = {\n  surface: {\n    variable: \"--fancy-surface\",\n    darkVariable: \"--fancy-surface-dark\",\n    light: \"var(--color-white)\",\n    dark: \"var(--color-zinc-900)\",\n    description: \"Panels, cards, overlays (menus, modals, popovers, toasts), sidebars and navbars.\",\n  },\n  \"surface-muted\": {\n    variable: \"--fancy-surface-muted\",\n    darkVariable: \"--fancy-surface-muted-dark\",\n    light: \"var(--color-zinc-100)\",\n    dark: \"var(--color-zinc-800)\",\n    description: \"Hovered and selected rows, chips, inset wells, toolbar buttons.\",\n  },\n  border: {\n    variable: \"--fancy-border\",\n    darkVariable: \"--fancy-border-dark\",\n    light: \"var(--color-zinc-200)\",\n    dark: \"var(--color-zinc-700)\",\n    description: \"Outlines, dividers, separators and tracks (skeletons, progress, sliders).\",\n  },\n  \"border-strong\": {\n    variable: \"--fancy-border-strong\",\n    darkVariable: \"--fancy-border-strong-dark\",\n    light: \"var(--color-zinc-300)\",\n    dark: \"var(--color-zinc-700)\",\n    description: \"The firmer outline on form controls (inputs, checkboxes, radios) and keycaps.\",\n  },\n  input: {\n    variable: \"--fancy-input\",\n    darkVariable: \"--fancy-input-dark\",\n    light: \"var(--color-white)\",\n    dark: \"#1e1e24\",\n    description: \"The field surface of text inputs, checkboxes, radios, OTP cells and pickers.\",\n  },\n  text: {\n    variable: \"--fancy-text\",\n    darkVariable: \"--fancy-text-dark\",\n    light: \"var(--color-zinc-900)\",\n    dark: \"var(--color-zinc-100)\",\n    description: \"Strongest foreground: headings, values, field text, active items.\",\n  },\n  \"text-soft\": {\n    variable: \"--fancy-text-soft\",\n    darkVariable: \"--fancy-text-soft-dark\",\n    light: \"var(--color-zinc-700)\",\n    dark: \"var(--color-zinc-300)\",\n    description: \"Body copy and menu items: readable, one step back from text.\",\n  },\n  \"text-muted\": {\n    variable: \"--fancy-text-muted\",\n    darkVariable: \"--fancy-text-muted-dark\",\n    light: \"var(--color-zinc-500)\",\n    dark: \"var(--color-zinc-400)\",\n    description: \"Descriptions, captions, secondary labels, axis labels.\",\n  },\n  \"text-faint\": {\n    variable: \"--fancy-text-faint\",\n    darkVariable: \"--fancy-text-faint-dark\",\n    light: \"var(--color-zinc-400)\",\n    dark: \"var(--color-zinc-500)\",\n    description: \"Placeholders, disabled hints, decorative icons.\",\n  },\n  \"text-subtle\": {\n    variable: \"--fancy-text-subtle\",\n    darkVariable: \"--fancy-text-subtle-dark\",\n    light: \"var(--color-zinc-600)\",\n    dark: \"var(--color-zinc-400)\",\n    description: \"Inactive nav labels (Sidebar, Menu, Navbar, MultiSwitch) and secondary prose. Added 5.53.1.\",\n  },\n  \"surface-hover\": {\n    variable: \"--fancy-surface-hover\",\n    darkVariable: \"--fancy-surface-hover-dark\",\n    light: \"var(--color-zinc-50)\",\n    // Tailwind's `bg-zinc-800/50`, written out so a host's value is used as-is.\n    dark: \"color-mix(in oklab, var(--color-zinc-800) 50%, transparent)\",\n    description: \"The hover fill on nav items, list options and table rows. Added 5.53.1.\",\n  },\n  focus: {\n    variable: \"--fancy-focus\",\n    darkVariable: \"--fancy-focus-dark\",\n    light: \"var(--color-blue-500)\",\n    dark: \"var(--color-blue-400)\",\n    description: \"The focus border and ring on form controls.\",\n  },\n} as const;\n\nexport type ThemeTokenRole = keyof typeof THEME_TOKENS;\n"]}

package/dist/mobile-menu.cjs

@@ -4,7 +4,7 @@ var chunk3BBEVHSP_cjs = require('./chunk-3BBEVHSP.cjs');
 require('./chunk-A2JUTNE6.cjs');
 require('./chunk-T6YELZPJ.cjs');
 require('./chunk-4GOOSZEK.cjs');
-require('./chunk-TXTRTTG7.cjs');
+require('./chunk-UOG3O3KP.cjs');
 require('./chunk-FQZE5N2N.cjs');
 require('./chunk-MKHYENKR.cjs');
 require('./chunk-QQKWI7QP.cjs');

package/dist/mobile-menu.js

@@ -2,7 +2,7 @@ export { MobileMenu, useMobileMenu } from './chunk-AE6ICNJR.js';
 import './chunk-2BXMMVQS.js';
 import './chunk-CPY7NHXM.js';
 import './chunk-ZQ3VXRUY.js';
-import './chunk-5U2DZ7AV.js';
+import './chunk-MUV7OK3W.js';
 import './chunk-3K2CEAI7.js';
 import './chunk-5VMILVWD.js';
 import './chunk-RUEDMYBF.js';

package/dist/modal.cjs

@@ -1,7 +1,8 @@
 'use strict';
 
-var chunkHANQYZW2_cjs = require('./chunk-HANQYZW2.cjs');
-require('./chunk-TXTRTTG7.cjs');
+var chunkGB2EGMVQ_cjs = require('./chunk-GB2EGMVQ.cjs');
+require('./chunk-RE3PMG47.cjs');
+require('./chunk-UOG3O3KP.cjs');
 require('./chunk-FQZE5N2N.cjs');
 require('./chunk-MKHYENKR.cjs');
 require('./chunk-TI7D4QDM.cjs');
@@ -12,11 +13,11 @@ require('./chunk-ZU5Q77OT.cjs');
 
 Object.defineProperty(exports, "Modal", {
   enumerable: true,
-  get: function () { return chunkHANQYZW2_cjs.Modal; }
+  get: function () { return chunkGB2EGMVQ_cjs.Modal; }
 });
 Object.defineProperty(exports, "useModal", {
   enumerable: true,
-  get: function () { return chunkHANQYZW2_cjs.useModal; }
+  get: function () { return chunkGB2EGMVQ_cjs.useModal; }
 });
 //# sourceMappingURL=modal.cjs.map
 //# sourceMappingURL=modal.cjs.map

package/dist/modal.d.cts

@@ -15,6 +15,8 @@ interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
 interface ModalHeaderProps {
     children: ReactNode;
     className?: string;
+    /** Accessible name of the close button. Default `"Close"`; pass your locale's word. */
+    closeLabel?: string;
 }
 interface ModalBodyProps {
     children: ReactNode;
@@ -25,7 +27,15 @@ interface ModalFooterProps {
     className?: string;
 }
 
-declare function ModalHeader({ children, className }: ModalHeaderProps): react.JSX.Element;
+/**
+ * The close button draws at 28px (20px icon + `p-1`) and HITS at 44px, the
+ * WCAG 2.5.5 (AAA) target: a `::before` overhangs it by 8px on every side. A
+ * pseudo-element is part of its button for hit-testing, so the look, the hover
+ * fill and the header's height are all unchanged — the header's `py-4` already
+ * has room for the overhang. A size option was the alternative; it would have
+ * left every existing Modal at 28px unless someone opted in.
+ */
+declare function ModalHeader({ children, className, closeLabel }: ModalHeaderProps): react.JSX.Element;
 declare namespace ModalHeader {
     var displayName: string;
 }

package/dist/modal.d.ts

@@ -15,6 +15,8 @@ interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
 interface ModalHeaderProps {
     children: ReactNode;
     className?: string;
+    /** Accessible name of the close button. Default `"Close"`; pass your locale's word. */
+    closeLabel?: string;
 }
 interface ModalBodyProps {
     children: ReactNode;
@@ -25,7 +27,15 @@ interface ModalFooterProps {
     className?: string;
 }
 
-declare function ModalHeader({ children, className }: ModalHeaderProps): react.JSX.Element;
+/**
+ * The close button draws at 28px (20px icon + `p-1`) and HITS at 44px, the
+ * WCAG 2.5.5 (AAA) target: a `::before` overhangs it by 8px on every side. A
+ * pseudo-element is part of its button for hit-testing, so the look, the hover
+ * fill and the header's height are all unchanged — the header's `py-4` already
+ * has room for the overhang. A size option was the alternative; it would have
+ * left every existing Modal at 28px unless someone opted in.
+ */
+declare function ModalHeader({ children, className, closeLabel }: ModalHeaderProps): react.JSX.Element;
 declare namespace ModalHeader {
     var displayName: string;
 }

package/dist/modal.js

@@ -1,5 +1,6 @@
-export { Modal, useModal } from './chunk-GEQKNV7E.js';
-import './chunk-5U2DZ7AV.js';
+export { Modal, useModal } from './chunk-26GRLVCQ.js';
+import './chunk-HHCVBIMM.js';
+import './chunk-MUV7OK3W.js';
 import './chunk-3K2CEAI7.js';
 import './chunk-5VMILVWD.js';
 import './chunk-RBCMKPBX.js';

package/dist/sidebar.cjs

@@ -6,7 +6,7 @@ require('./chunk-I27K6NLX.cjs');
 require('./chunk-A2JUTNE6.cjs');
 require('./chunk-T6YELZPJ.cjs');
 require('./chunk-4GOOSZEK.cjs');
-require('./chunk-TXTRTTG7.cjs');
+require('./chunk-UOG3O3KP.cjs');
 require('./chunk-FQZE5N2N.cjs');
 require('./chunk-MKHYENKR.cjs');
 require('./chunk-QQKWI7QP.cjs');

package/dist/sidebar.js

@@ -4,7 +4,7 @@ import './chunk-SV5BW3IA.js';
 import './chunk-2BXMMVQS.js';
 import './chunk-CPY7NHXM.js';
 import './chunk-ZQ3VXRUY.js';
-import './chunk-5U2DZ7AV.js';
+import './chunk-MUV7OK3W.js';
 import './chunk-3K2CEAI7.js';
 import './chunk-5VMILVWD.js';
 import './chunk-RUEDMYBF.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-academy/react-fancy",
-  "version": "6.10.0",
+  "version": "6.11.1",
   "description": "React UI component library for Human+ UX — controlled, agent-bridgeable primitives",
   "repository": {
     "type": "git",

package/dist/chunk-5U2DZ7AV.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/hooks/use-focus-trap.ts"],"names":[],"mappings":";;;AAEA,IAAM,kBAAA,GAAqB;AAAA,EACzB,SAAA;AAAA,EACA,wBAAA;AAAA,EACA,uBAAA;AAAA,EACA,0BAAA;AAAA,EACA,wBAAA;AAAA,EACA;AACF,CAAA,CAAE,KAAK,IAAI,CAAA;AAEJ,SAAS,YAAA,CACd,GAAA,EACA,OAAA,GAAmB,IAAA,EACb;AACN,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,OAAA,EAAS;AAEd,IAAA,MAAM,KAAK,GAAA,CAAI,OAAA;AACf,IAAA,IAAI,CAAC,EAAA,EAAI;AAET,IAAA,MAAM,oBAAoB,QAAA,CAAS,aAAA;AAEnC,IAAA,MAAM,aAAa,MACjB,KAAA,CAAM,KAAK,EAAA,CAAG,gBAAA,CAA8B,kBAAkB,CAAC,CAAA;AAGjE,IAAA,MAAM,KAAA,GAAQ,UAAA,EAAW,CAAE,CAAC,CAAA;AAC5B,IAAA,KAAA,EAAO,KAAA,EAAM;AAEb,IAAA,MAAM,QAAA,GAAW,CAAC,KAAA,KAAyB;AACzC,MAAA,IAAI,KAAA,CAAM,QAAQ,KAAA,EAAO;AAEzB,MAAA,MAAM,QAAQ,UAAA,EAAW;AACzB,MAAA,IAAI,KAAA,CAAM,WAAW,CAAA,EAAG;AAExB,MAAA,MAAM,SAAA,GAAY,MAAM,CAAC,CAAA;AACzB,MAAA,MAAM,QAAA,GAAW,KAAA,CAAM,KAAA,CAAM,MAAA,GAAS,CAAC,CAAA;AAEvC,MAAA,IAAI,MAAM,QAAA,EAAU;AAClB,QAAA,IAAI,QAAA,CAAS,kBAAkB,SAAA,EAAW;AACxC,UAAA,KAAA,CAAM,cAAA,EAAe;AACrB,UAAA,QAAA,CAAS,KAAA,EAAM;AAAA,QACjB;AAAA,MACF,CAAA,MAAO;AACL,QAAA,IAAI,QAAA,CAAS,kBAAkB,QAAA,EAAU;AACvC,UAAA,KAAA,CAAM,cAAA,EAAe;AACrB,UAAA,SAAA,CAAU,KAAA,EAAM;AAAA,QAClB;AAAA,MACF;AAAA,IACF,CAAA;AAEA,IAAA,EAAA,CAAG,gBAAA,CAAiB,WAAW,QAAQ,CAAA;AAEvC,IAAA,OAAO,MAAM;AACX,MAAA,EAAA,CAAG,mBAAA,CAAoB,WAAW,QAAQ,CAAA;AAC1C,MAAA,iBAAA,EAAmB,KAAA,EAAM;AAAA,IAC3B,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,GAAA,EAAK,OAAO,CAAC,CAAA;AACnB","file":"chunk-5U2DZ7AV.js","sourcesContent":["import { useEffect, type RefObject } from \"react\";\n\nconst FOCUSABLE_SELECTOR = [\n  \"a[href]\",\n  \"button:not([disabled])\",\n  \"input:not([disabled])\",\n  \"textarea:not([disabled])\",\n  \"select:not([disabled])\",\n  \"[tabindex]:not([tabindex='-1'])\",\n].join(\", \");\n\nexport function useFocusTrap(\n  ref: RefObject<HTMLElement | null>,\n  enabled: boolean = true,\n): void {\n  useEffect(() => {\n    if (!enabled) return;\n\n    const el = ref.current;\n    if (!el) return;\n\n    const previouslyFocused = document.activeElement as HTMLElement | null;\n\n    const focusables = () =>\n      Array.from(el.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR));\n\n    // Focus first focusable element\n    const first = focusables()[0];\n    first?.focus();\n\n    const listener = (event: KeyboardEvent) => {\n      if (event.key !== \"Tab\") return;\n\n      const items = focusables();\n      if (items.length === 0) return;\n\n      const firstItem = items[0];\n      const lastItem = items[items.length - 1];\n\n      if (event.shiftKey) {\n        if (document.activeElement === firstItem) {\n          event.preventDefault();\n          lastItem.focus();\n        }\n      } else {\n        if (document.activeElement === lastItem) {\n          event.preventDefault();\n          firstItem.focus();\n        }\n      }\n    };\n\n    el.addEventListener(\"keydown\", listener);\n\n    return () => {\n      el.removeEventListener(\"keydown\", listener);\n      previouslyFocused?.focus();\n    };\n  }, [ref, enabled]);\n}\n"]}

package/dist/chunk-7NRG77U5.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Drawer/Drawer.context.ts","../src/components/Drawer/DrawerHeader.tsx","../src/components/Drawer/DrawerBody.tsx","../src/components/Drawer/DrawerFooter.tsx","../src/components/Drawer/DrawerContainer.tsx","../src/components/Drawer/Drawer.tsx"],"names":["createContext","useContext","jsxs","cn","jsx","X","useRef","useCallback","useEscapeKey","useFocusTrap","useEffect","useAnimation","useMemo","Portal"],"mappings":"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","file":"chunk-7NRG77U5.cjs","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { DrawerContextValue } from \"./Drawer.types\";\n\nexport const DrawerContext = createContext<DrawerContextValue | null>(null);\n\nexport function useDrawer(): DrawerContextValue {\n  const ctx = useContext(DrawerContext);\n  if (!ctx) {\n    throw new Error(\"Drawer compound components must be used within <Drawer>\");\n  }\n  return ctx;\n}\n","import { X } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { useDrawer } from \"./Drawer.context\";\nimport type { DrawerHeaderProps } from \"./Drawer.types\";\n\nexport function DrawerHeader({ children, closable = true, className }: DrawerHeaderProps) {\n  const { close } = useDrawer();\n\n  return (\n    <div\n      data-react-fancy-drawer-header=\"\"\n      className={cn(\n        \"flex shrink-0 items-center justify-between border-b border-[color:var(--fancy-border,var(--color-zinc-200))] px-4 py-3 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]\",\n        className,\n      )}\n    >\n      <div className=\"text-sm font-semibold text-[color:var(--fancy-text,var(--color-zinc-900))] dark:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]\">{children}</div>\n      {closable ? (\n        <button\n          type=\"button\"\n          onClick={close}\n          className=\"rounded-lg p-1 text-zinc-400 transition-colors hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] hover:text-zinc-600 dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))] dark:hover:text-zinc-300\"\n          aria-label=\"Close\"\n        >\n          <X size={18} />\n        </button>\n      ) : null}\n    </div>\n  );\n}\n\nDrawerHeader.displayName = \"DrawerHeader\";\n","import { cn } from \"../../utils/cn\";\nimport type { DrawerBodyProps } from \"./Drawer.types\";\n\nexport function DrawerBody({ children, className }: DrawerBodyProps) {\n  return (\n    <div\n      data-react-fancy-drawer-body=\"\"\n      className={cn(\"min-h-0 flex-1 overflow-auto px-4 py-3 text-[color:var(--fancy-text-soft,var(--color-zinc-700))] dark:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))]\", className)}\n    >\n      {children}\n    </div>\n  );\n}\n\nDrawerBody.displayName = \"DrawerBody\";\n","import { cn } from \"../../utils/cn\";\nimport type { DrawerFooterProps } from \"./Drawer.types\";\n\nexport function DrawerFooter({ children, className }: DrawerFooterProps) {\n  return (\n    <div\n      data-react-fancy-drawer-footer=\"\"\n      className={cn(\n        \"flex shrink-0 items-center justify-end gap-2 border-t border-[color:var(--fancy-border,var(--color-zinc-200))] px-4 py-3 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\nDrawerFooter.displayName = \"DrawerFooter\";\n","import { cn } from \"../../utils/cn\";\nimport type { DrawerContainerProps } from \"./Drawer.types\";\n\n/**\n * The anchor for `<Drawer attach=\"container\">`.\n *\n * A container-attached drawer positions itself `absolute`, which resolves\n * against the nearest *positioned* ancestor — so without `relative` somewhere\n * above it, the drawer silently escapes to the viewport and looks like it\n * ignored `attach` entirely. This wrapper supplies `relative` + `overflow-hidden`\n * so the panel slides within the box rather than out of it.\n *\n *   <Drawer.Container className=\"h-80 rounded-xl border\">\n *     <YourContent />\n *     <Drawer attach=\"container\" side=\"bottom\" open={open} onClose={close}>\n *       <Drawer.Body>Filters</Drawer.Body>\n *     </Drawer>\n *   </Drawer.Container>\n *\n * Any element works as long as it is positioned — this is the shortcut, not a\n * requirement. Wrapping a Card, a layout pane, or a prompt-input shell in\n * `relative overflow-hidden` does the same job.\n */\nexport function DrawerContainer({ children, className, ...rest }: DrawerContainerProps) {\n  return (\n    <div\n      data-react-fancy-drawer-container=\"\"\n      {...rest}\n      className={cn(\"relative overflow-hidden\", className)}\n    >\n      {children}\n    </div>\n  );\n}\n\nDrawerContainer.displayName = \"DrawerContainer\";\n","import { useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Portal } from \"../Portal\";\nimport { DrawerContext } from \"./Drawer.context\";\nimport { DrawerHeader } from \"./DrawerHeader\";\nimport { DrawerBody } from \"./DrawerBody\";\nimport { DrawerFooter } from \"./DrawerFooter\";\nimport { DrawerContainer } from \"./DrawerContainer\";\nimport { useFocusTrap } from \"../../hooks/use-focus-trap\";\nimport { useEscapeKey } from \"../../hooks/use-escape-key\";\nimport { useAnimation } from \"../../hooks/use-animation\";\nimport type { DrawerProps, DrawerSide } from \"./Drawer.types\";\n\n/**\n * `size` addresses the drawer's own axis: width on the horizontal edges,\n * height on the vertical ones. Keeping one scale across both means `size=\"lg\"`\n * does not have to be re-learned when a drawer moves from the side to the\n * bottom.\n */\nconst WIDTH = {\n  sm: \"w-64\",\n  md: \"w-80\",\n  lg: \"w-96\",\n  xl: \"w-[32rem]\",\n  full: \"w-full\",\n} as const;\n\nconst HEIGHT = {\n  sm: \"h-32\",\n  md: \"h-64\",\n  lg: \"h-96\",\n  xl: \"h-[32rem]\",\n  full: \"h-full\",\n} as const;\n\nconst ANCHOR: Record<DrawerSide, string> = {\n  start: \"inset-y-0 start-0\",\n  end: \"inset-y-0 end-0\",\n  left: \"inset-y-0 left-0\",\n  right: \"inset-y-0 right-0\",\n  top: \"inset-x-0 top-0\",\n  bottom: \"inset-x-0 bottom-0\",\n};\n\nconst ENTER: Record<DrawerSide, string> = {\n  start: \"fancy-slide-in-start\",\n  end: \"fancy-slide-in-end\",\n  left: \"fancy-slide-in-left\",\n  right: \"fancy-slide-in-right\",\n  top: \"fancy-slide-in-top\",\n  bottom: \"fancy-slide-in-bottom\",\n};\n\nconst EXIT: Record<DrawerSide, string> = {\n  start: \"fancy-slide-out-start\",\n  end: \"fancy-slide-out-end\",\n  left: \"fancy-slide-out-left\",\n  right: \"fancy-slide-out-right\",\n  top: \"fancy-slide-out-top\",\n  bottom: \"fancy-slide-out-bottom\",\n};\n\n/** The panel's edge shadow reads as depth away from the anchored edge. */\nconst EDGE: Record<DrawerSide, string> = {\n  start: \"border-e\",\n  end: \"border-s\",\n  left: \"border-r\",\n  right: \"border-l\",\n  top: \"border-b\",\n  bottom: \"border-t\",\n};\n\nfunction DrawerRoot({\n  children,\n  open,\n  onClose,\n  side = \"end\",\n  size = \"md\",\n  attach = \"viewport\",\n  backdrop = true,\n  dismissOnBackdrop = true,\n  dismissOnEscape = true,\n  className,\n  ...rest\n}: DrawerProps) {\n  const panelRef = useRef<HTMLDivElement>(null);\n  const horizontal = side !== \"top\" && side !== \"bottom\";\n  const isViewport = attach === \"viewport\";\n\n  const close = useCallback(() => onClose(), [onClose]);\n  useEscapeKey(close, open && dismissOnEscape);\n\n  // A container-attached drawer is a panel, not a dialog — trapping focus in it\n  // would strand keyboard users inside a Card. Only the viewport form is modal.\n  useFocusTrap(panelRef, open && isViewport);\n\n  useEffect(() => {\n    if (!open || !isViewport) return;\n    const original = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.body.style.overflow = original;\n    };\n  }, [open, isViewport]);\n\n  const { mounted, className: animClass, ref: animRef } = useAnimation({\n    open,\n    enterClass: ENTER[side],\n    exitClass: EXIT[side],\n  });\n\n  const ctx = useMemo(() => ({ open, close, side }), [open, close, side]);\n\n  if (!mounted) return null;\n\n  const frame = (\n    <div\n      data-react-fancy-drawer-frame=\"\"\n      className={cn(isViewport ? \"fixed inset-0 z-50\" : \"absolute inset-0 z-20\", !backdrop && \"pointer-events-none\")}\n    >\n      {backdrop ? (\n        <div\n          data-react-fancy-drawer-backdrop=\"\"\n          className={cn(\n            \"absolute inset-0 bg-black/40 transition-opacity\",\n            isViewport && \"backdrop-blur-sm\",\n            open ? \"opacity-100\" : \"opacity-0\",\n          )}\n          onClick={dismissOnBackdrop ? close : undefined}\n          aria-hidden=\"true\"\n        />\n      ) : null}\n\n      <div\n        ref={(node) => {\n          panelRef.current = node;\n          (animRef as React.MutableRefObject<HTMLElement | null>).current = node;\n        }}\n        data-react-fancy-drawer=\"\"\n        data-side={side}\n        role=\"dialog\"\n        aria-modal={isViewport || undefined}\n        {...rest}\n        className={cn(\n          \"pointer-events-auto absolute flex flex-col border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] shadow-xl dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\",\n          ANCHOR[side],\n          EDGE[side],\n          horizontal ? WIDTH[size] : HEIGHT[size],\n          // Cross-axis fills the anchor; the main axis is capped so a viewport\n          // drawer can never grow past the screen on a small device.\n          horizontal ? \"h-full\" : \"w-full\",\n          isViewport && (horizontal ? \"max-w-[90vw]\" : \"max-h-[90vh]\"),\n          !isViewport && (horizontal ? \"max-w-full\" : \"max-h-full\"),\n          animClass,\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  );\n\n  return (\n    <DrawerContext.Provider value={ctx}>\n      {isViewport ? <Portal>{frame}</Portal> : frame}\n    </DrawerContext.Provider>\n  );\n}\n\nexport const Drawer = Object.assign(DrawerRoot, {\n  Header: DrawerHeader,\n  Body: DrawerBody,\n  Footer: DrawerFooter,\n  Container: DrawerContainer,\n});\n"]}