@particle-academy/react-fancy 5.63.0 → 5.64.1

package/dist/index.cjs

@@ -1,21 +1,23 @@
 'use strict';
 
+var chunkYH75G6SP_cjs = require('./chunk-YH75G6SP.cjs');
 var chunkUXYFM2XT_cjs = require('./chunk-UXYFM2XT.cjs');
 var chunkH2YRZYKK_cjs = require('./chunk-H2YRZYKK.cjs');
 var chunkAVEFCM6T_cjs = require('./chunk-AVEFCM6T.cjs');
 var chunkIR6JSQ4O_cjs = require('./chunk-IR6JSQ4O.cjs');
 require('./chunk-O5IO7TCO.cjs');
+var chunkZ4UXLQSK_cjs = require('./chunk-Z4UXLQSK.cjs');
 require('./chunk-OYZDSMNP.cjs');
 require('./chunk-5FV6GMFP.cjs');
 var chunk6MDZQIMZ_cjs = require('./chunk-6MDZQIMZ.cjs');
+var chunkETNQ4AEQ_cjs = require('./chunk-ETNQ4AEQ.cjs');
 var chunkDJB3N4G3_cjs = require('./chunk-DJB3N4G3.cjs');
 require('./chunk-URTLYNZI.cjs');
 require('./chunk-QGPMVFZJ.cjs');
 var chunkIB673TEG_cjs = require('./chunk-IB673TEG.cjs');
 var chunkH7ELUIF6_cjs = require('./chunk-H7ELUIF6.cjs');
 require('./chunk-HXLSEBAL.cjs');
-var chunkZ4UXLQSK_cjs = require('./chunk-Z4UXLQSK.cjs');
-var chunkETNQ4AEQ_cjs = require('./chunk-ETNQ4AEQ.cjs');
+var chunkFNIHCNVD_cjs = require('./chunk-FNIHCNVD.cjs');
 var chunk7DDUMW4R_cjs = require('./chunk-7DDUMW4R.cjs');
 var chunkFVQO75KY_cjs = require('./chunk-FVQO75KY.cjs');
 var chunkATJSHM6J_cjs = require('./chunk-ATJSHM6J.cjs');
@@ -23,15 +25,14 @@ var chunkYJXP6AOL_cjs = require('./chunk-YJXP6AOL.cjs');
 var chunkCQ54H7DZ_cjs = require('./chunk-CQ54H7DZ.cjs');
 require('./chunk-XURQVDCN.cjs');
 var chunk4DL2U23D_cjs = require('./chunk-4DL2U23D.cjs');
-var chunkYH75G6SP_cjs = require('./chunk-YH75G6SP.cjs');
 var chunkBK6XQQYG_cjs = require('./chunk-BK6XQQYG.cjs');
 var chunkAE53RKWR_cjs = require('./chunk-AE53RKWR.cjs');
 var chunkSYEHWUM5_cjs = require('./chunk-SYEHWUM5.cjs');
+var chunkQP6VNKLW_cjs = require('./chunk-QP6VNKLW.cjs');
 var chunkCEFK54WP_cjs = require('./chunk-CEFK54WP.cjs');
 var chunk5P3PISAX_cjs = require('./chunk-5P3PISAX.cjs');
 var chunkY7RGUUTS_cjs = require('./chunk-Y7RGUUTS.cjs');
 var chunkEZA6GWZL_cjs = require('./chunk-EZA6GWZL.cjs');
-var chunkFNIHCNVD_cjs = require('./chunk-FNIHCNVD.cjs');
 var chunkKSU6RYWU_cjs = require('./chunk-KSU6RYWU.cjs');
 var chunkK5MQZTDW_cjs = require('./chunk-K5MQZTDW.cjs');
 var chunkB4YV2V7G_cjs = require('./chunk-B4YV2V7G.cjs');
@@ -76,7 +77,7 @@ var chunkFQSSVOVQ_cjs = require('./chunk-FQSSVOVQ.cjs');
 require('./chunk-S3TRSECD.cjs');
 var chunkZ7SQMQTF_cjs = require('./chunk-Z7SQMQTF.cjs');
 var chunkAJPYGRLA_cjs = require('./chunk-AJPYGRLA.cjs');
-var chunkA6HWKQ4D_cjs = require('./chunk-A6HWKQ4D.cjs');
+var chunkXZOBGKZL_cjs = require('./chunk-XZOBGKZL.cjs');
 var chunkATIDUWY6_cjs = require('./chunk-ATIDUWY6.cjs');
 var chunkA2JUTNE6_cjs = require('./chunk-A2JUTNE6.cjs');
 var chunkT6YELZPJ_cjs = require('./chunk-T6YELZPJ.cjs');
@@ -218,6 +219,10 @@ var THEME_TOKENS = {
   }
 };
 
+Object.defineProperty(exports, "TimePicker", {
+  enumerable: true,
+  get: function () { return chunkYH75G6SP_cjs.TimePicker; }
+});
 Object.defineProperty(exports, "Timeline", {
   enumerable: true,
   get: function () { return chunkUXYFM2XT_cjs.Timeline; }
@@ -242,6 +247,10 @@ Object.defineProperty(exports, "VirtualList", {
   enumerable: true,
   get: function () { return chunkIR6JSQ4O_cjs.VirtualList; }
 });
+Object.defineProperty(exports, "Slider", {
+  enumerable: true,
+  get: function () { return chunkZ4UXLQSK_cjs.Slider; }
+});
 Object.defineProperty(exports, "Form", {
   enumerable: true,
   get: function () { return chunk6MDZQIMZ_cjs.Form; }
@@ -250,6 +259,10 @@ Object.defineProperty(exports, "FormProvider", {
   enumerable: true,
   get: function () { return chunk6MDZQIMZ_cjs.FormProvider; }
 });
+Object.defineProperty(exports, "Checkbox", {
+  enumerable: true,
+  get: function () { return chunkETNQ4AEQ_cjs.Checkbox; }
+});
 Object.defineProperty(exports, "CheckboxGroup", {
   enumerable: true,
   get: function () { return chunkDJB3N4G3_cjs.CheckboxGroup; }
@@ -262,13 +275,9 @@ Object.defineProperty(exports, "RadioGroup", {
   enumerable: true,
   get: function () { return chunkH7ELUIF6_cjs.RadioGroup; }
 });
-Object.defineProperty(exports, "Slider", {
-  enumerable: true,
-  get: function () { return chunkZ4UXLQSK_cjs.Slider; }
-});
-Object.defineProperty(exports, "Checkbox", {
+Object.defineProperty(exports, "Skeleton", {
   enumerable: true,
-  get: function () { return chunkETNQ4AEQ_cjs.Checkbox; }
+  get: function () { return chunkFNIHCNVD_cjs.Skeleton; }
 });
 Object.defineProperty(exports, "Stat", {
   enumerable: true,
@@ -302,10 +311,6 @@ Object.defineProperty(exports, "TimeGrid", {
   enumerable: true,
   get: function () { return chunk4DL2U23D_cjs.TimeGrid; }
 });
-Object.defineProperty(exports, "TimePicker", {
-  enumerable: true,
-  get: function () { return chunkYH75G6SP_cjs.TimePicker; }
-});
 Object.defineProperty(exports, "PullQuote", {
   enumerable: true,
   get: function () { return chunkBK6XQQYG_cjs.PullQuote; }
@@ -326,6 +331,14 @@ Object.defineProperty(exports, "ReasonTag", {
   enumerable: true,
   get: function () { return chunkSYEHWUM5_cjs.ReasonTag; }
 });
+Object.defineProperty(exports, "ReorderableGrid", {
+  enumerable: true,
+  get: function () { return chunkQP6VNKLW_cjs.ReorderableGrid; }
+});
+Object.defineProperty(exports, "moveItem", {
+  enumerable: true,
+  get: function () { return chunkQP6VNKLW_cjs.moveItem; }
+});
 Object.defineProperty(exports, "ResizablePanels", {
   enumerable: true,
   get: function () { return chunkCEFK54WP_cjs.ResizablePanels; }
@@ -346,10 +359,6 @@ Object.defineProperty(exports, "useSidebar", {
   enumerable: true,
   get: function () { return chunkEZA6GWZL_cjs.useSidebar; }
 });
-Object.defineProperty(exports, "Skeleton", {
-  enumerable: true,
-  get: function () { return chunkFNIHCNVD_cjs.Skeleton; }
-});
 Object.defineProperty(exports, "Pillbox", {
   enumerable: true,
   get: function () { return chunkKSU6RYWU_cjs.Pillbox; }
@@ -628,11 +637,11 @@ Object.defineProperty(exports, "useDrawer", {
 });
 Object.defineProperty(exports, "Dropdown", {
   enumerable: true,
-  get: function () { return chunkA6HWKQ4D_cjs.Dropdown; }
+  get: function () { return chunkXZOBGKZL_cjs.Dropdown; }
 });
 Object.defineProperty(exports, "useDropdown", {
   enumerable: true,
-  get: function () { return chunkA6HWKQ4D_cjs.useDropdown; }
+  get: function () { return chunkXZOBGKZL_cjs.useDropdown; }
 });
 Object.defineProperty(exports, "Editor", {
   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

@@ -35,6 +35,7 @@ export { Container, ContainerProps } from './container.cjs';
 export { Section, SectionProps } from './section.cjs';
 export { Grid, GridProps } from './grid.cjs';
 export { ResizablePanels, ResizablePanelsOrientation, ResizablePanelsProps } from './resizable-panels.cjs';
+export { MoveItemOptions, ReorderableGrid, ReorderableGridAnnouncementContext, ReorderableGridItem, ReorderableGridItemState, ReorderableGridLabels, ReorderableGridProps, moveItem } from './reorderable-grid.cjs';
 export { StatList, StatListItem, StatListProps } from './stat-list.cjs';
 export { Kbd, KbdProps } from './kbd.cjs';
 export { IndexList, IndexListItem, IndexListProps } from './index-list.cjs';

package/dist/index.d.ts

@@ -35,6 +35,7 @@ export { Container, ContainerProps } from './container.js';
 export { Section, SectionProps } from './section.js';
 export { Grid, GridProps } from './grid.js';
 export { ResizablePanels, ResizablePanelsOrientation, ResizablePanelsProps } from './resizable-panels.js';
+export { MoveItemOptions, ReorderableGrid, ReorderableGridAnnouncementContext, ReorderableGridItem, ReorderableGridItemState, ReorderableGridLabels, ReorderableGridProps, moveItem } from './reorderable-grid.js';
 export { StatList, StatListItem, StatListProps } from './stat-list.js';
 export { Kbd, KbdProps } from './kbd.js';
 export { IndexList, IndexListItem, IndexListProps } from './index-list.js';

package/dist/index.js

@@ -1,19 +1,21 @@
+export { TimePicker } from './chunk-AZQXPI5S.js';
 export { Timeline } from './chunk-QGY5FPVM.js';
 export { Toast, useToast } from './chunk-BQFPC5FL.js';
 export { TreeNav, useTreeNav } from './chunk-OYDJVGFS.js';
 export { VirtualList } from './chunk-Z4CW3U6C.js';
 import './chunk-VXHFR5MV.js';
+export { Slider } from './chunk-NVXTHTJI.js';
 import './chunk-NW3GJWJ7.js';
 import './chunk-ORCXPDDG.js';
 export { Form, FormProvider } from './chunk-PQWQ5K6J.js';
+export { Checkbox } from './chunk-OTM7RL2L.js';
 export { CheckboxGroup } from './chunk-TAYJSIOP.js';
 import './chunk-V4EARA4F.js';
 import './chunk-SHDSKHCC.js';
 export { MultiSwitch } from './chunk-YUNOVQQJ.js';
 export { RadioGroup } from './chunk-4FH2JHUY.js';
 import './chunk-GNHQVPZP.js';
-export { Slider } from './chunk-NVXTHTJI.js';
-export { Checkbox } from './chunk-OTM7RL2L.js';
+export { Skeleton } from './chunk-X7VIIM2P.js';
 export { Stat, StatBand } from './chunk-KC3PYCBO.js';
 export { StatList } from './chunk-SXXDTW7S.js';
 export { StickyNote } from './chunk-CCG2L5EH.js';
@@ -21,15 +23,14 @@ export { Table } from './chunk-YAPGHVBZ.js';
 export { Tabs, useTabs } from './chunk-IU5WQUUC.js';
 import './chunk-TMR56BBE.js';
 export { TimeGrid } from './chunk-MLZGGAXQ.js';
-export { TimePicker } from './chunk-AZQXPI5S.js';
 export { PullQuote } from './chunk-44VYWOCG.js';
 export { QrCode, encodeQr, selectMode } from './chunk-RLE5WYY6.js';
 export { ReasonTag } from './chunk-QP35Z2WB.js';
+export { ReorderableGrid, moveItem } from './chunk-DTOIO42M.js';
 export { ResizablePanels } from './chunk-GDF6XTHC.js';
 export { Section } from './chunk-SLJD25VV.js';
 export { Separator } from './chunk-JSD6IEBW.js';
 export { Sidebar, useSidebar } from './chunk-YJHP5FVA.js';
-export { Skeleton } from './chunk-X7VIIM2P.js';
 export { Pillbox } from './chunk-G35XN5WV.js';
 export { Profile } from './chunk-GOE36IXL.js';
 export { Progress } from './chunk-UE3QO7R3.js';
@@ -74,7 +75,7 @@ export { Container } from './chunk-VKMPVFQK.js';
 import './chunk-AUTW5O4W.js';
 export { ContextMenu, useContextMenu } from './chunk-NSJBVV7R.js';
 export { Drawer, useDrawer } from './chunk-PXZRYL5I.js';
-export { Dropdown, useDropdown } from './chunk-JG2DJK5A.js';
+export { Dropdown, useDropdown } from './chunk-BXPLERIJ.js';
 export { Editor, useEditor } from './chunk-CAUEKGMR.js';
 export { THEME_STORAGE_KEY, getThemePreference, initTheme, resolveTheme, setThemePreference, subscribeTheme, useId, useNodeRegistry, useTheme } from './chunk-2BXMMVQS.js';
 export { usePanZoom } from './chunk-CPY7NHXM.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/inputs.cjs

@@ -1,17 +1,17 @@
 'use strict';
 
 require('./chunk-O5IO7TCO.cjs');
+var chunkZ4UXLQSK_cjs = require('./chunk-Z4UXLQSK.cjs');
 require('./chunk-OYZDSMNP.cjs');
 require('./chunk-5FV6GMFP.cjs');
 var chunk6MDZQIMZ_cjs = require('./chunk-6MDZQIMZ.cjs');
+var chunkETNQ4AEQ_cjs = require('./chunk-ETNQ4AEQ.cjs');
 var chunkDJB3N4G3_cjs = require('./chunk-DJB3N4G3.cjs');
 require('./chunk-URTLYNZI.cjs');
 require('./chunk-QGPMVFZJ.cjs');
 var chunkIB673TEG_cjs = require('./chunk-IB673TEG.cjs');
 var chunkH7ELUIF6_cjs = require('./chunk-H7ELUIF6.cjs');
 require('./chunk-HXLSEBAL.cjs');
-var chunkZ4UXLQSK_cjs = require('./chunk-Z4UXLQSK.cjs');
-var chunkETNQ4AEQ_cjs = require('./chunk-ETNQ4AEQ.cjs');
 require('./chunk-I27K6NLX.cjs');
 var chunk2O5UXH5R_cjs = require('./chunk-2O5UXH5R.cjs');
 var chunkTLRFXSPA_cjs = require('./chunk-TLRFXSPA.cjs');
@@ -36,6 +36,10 @@ require('./chunk-ZU5Q77OT.cjs');
 
 
 
+Object.defineProperty(exports, "Slider", {
+  enumerable: true,
+  get: function () { return chunkZ4UXLQSK_cjs.Slider; }
+});
 Object.defineProperty(exports, "Form", {
   enumerable: true,
   get: function () { return chunk6MDZQIMZ_cjs.Form; }
@@ -44,6 +48,10 @@ Object.defineProperty(exports, "FormProvider", {
   enumerable: true,
   get: function () { return chunk6MDZQIMZ_cjs.FormProvider; }
 });
+Object.defineProperty(exports, "Checkbox", {
+  enumerable: true,
+  get: function () { return chunkETNQ4AEQ_cjs.Checkbox; }
+});
 Object.defineProperty(exports, "CheckboxGroup", {
   enumerable: true,
   get: function () { return chunkDJB3N4G3_cjs.CheckboxGroup; }
@@ -56,14 +64,6 @@ Object.defineProperty(exports, "RadioGroup", {
   enumerable: true,
   get: function () { return chunkH7ELUIF6_cjs.RadioGroup; }
 });
-Object.defineProperty(exports, "Slider", {
-  enumerable: true,
-  get: function () { return chunkZ4UXLQSK_cjs.Slider; }
-});
-Object.defineProperty(exports, "Checkbox", {
-  enumerable: true,
-  get: function () { return chunkETNQ4AEQ_cjs.Checkbox; }
-});
 Object.defineProperty(exports, "Switch", {
   enumerable: true,
   get: function () { return chunk2O5UXH5R_cjs.Switch; }

package/dist/inputs.js

@@ -1,15 +1,15 @@
 import './chunk-VXHFR5MV.js';
+export { Slider } from './chunk-NVXTHTJI.js';
 import './chunk-NW3GJWJ7.js';
 import './chunk-ORCXPDDG.js';
 export { Form, FormProvider } from './chunk-PQWQ5K6J.js';
+export { Checkbox } from './chunk-OTM7RL2L.js';
 export { CheckboxGroup } from './chunk-TAYJSIOP.js';
 import './chunk-V4EARA4F.js';
 import './chunk-SHDSKHCC.js';
 export { MultiSwitch } from './chunk-YUNOVQQJ.js';
 export { RadioGroup } from './chunk-4FH2JHUY.js';
 import './chunk-GNHQVPZP.js';
-export { Slider } from './chunk-NVXTHTJI.js';
-export { Checkbox } from './chunk-OTM7RL2L.js';
 import './chunk-SV5BW3IA.js';
 export { Switch } from './chunk-DXZCKDYS.js';
 export { DatePicker } from './chunk-2UTN3EFK.js';

package/dist/reorderable-grid.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+var chunkQP6VNKLW_cjs = require('./chunk-QP6VNKLW.cjs');
+require('./chunk-I27K6NLX.cjs');
+require('./chunk-OUYC6EIL.cjs');
+require('./chunk-SNHU2AI4.cjs');
+require('./chunk-ZU5Q77OT.cjs');
+
+
+
+Object.defineProperty(exports, "ReorderableGrid", {
+  enumerable: true,
+  get: function () { return chunkQP6VNKLW_cjs.ReorderableGrid; }
+});
+Object.defineProperty(exports, "moveItem", {
+  enumerable: true,
+  get: function () { return chunkQP6VNKLW_cjs.moveItem; }
+});
+//# sourceMappingURL=reorderable-grid.cjs.map
+//# sourceMappingURL=reorderable-grid.cjs.map

package/dist/reorderable-grid.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"reorderable-grid.cjs"}

package/dist/reorderable-grid.d.cts

@@ -0,0 +1,141 @@
+import { HTMLAttributes, ReactNode, Ref, ReactElement } from 'react';
+
+/** The least an item needs. Anything else on it is yours, and reaches `renderItem` untouched. */
+interface ReorderableGridItem {
+    /** Stable id. The order is reported as these. */
+    id: string;
+    /**
+     * Pinned: this cell keeps its slot. It cannot be picked up or dragged, and
+     * nothing can be dropped onto it; other cells flow around it.
+     */
+    locked?: boolean;
+}
+/** What `renderItem` gets alongside the item. */
+interface ReorderableGridItemState {
+    /** 0-based index in the order currently shown (the live preview while dragging). */
+    index: number;
+    /** 1-based position. */
+    position: number;
+    /** 1-based row. */
+    row: number;
+    /** 1-based column. */
+    column: number;
+    total: number;
+    /** Being dragged with a pointer. */
+    dragging: boolean;
+    /** Picked up with the keyboard. */
+    pickedUp: boolean;
+    /** This cell's slot is where the active item will land. */
+    dropTarget: boolean;
+    locked: boolean;
+    disabled: boolean;
+    /**
+     * Spread on an element to make it the drag handle. Once a cell contains a
+     * handle, only the handle starts a pointer drag; without one, the whole cell
+     * does. The keyboard always works on the cell itself.
+     */
+    handleProps: {
+        "data-reorderable-handle": "";
+    };
+}
+/** Facts every announcement can use. Positions are 1-based. */
+interface ReorderableGridAnnouncementContext {
+    id: string;
+    /** From `getItemLabel`, else `item.label` when it is a string, else the id. */
+    label: string;
+    position: number;
+    total: number;
+    row: number;
+    column: number;
+}
+/** Every string the grid speaks or shows to assistive tech. Override any of them (i18n). */
+interface ReorderableGridLabels {
+    /** Read with each cell (`aria-describedby`). */
+    instructions: string;
+    /** `aria-roledescription` of each cell. */
+    roleDescription: string;
+    pickedUp: (ctx: ReorderableGridAnnouncementContext) => string;
+    moved: (ctx: ReorderableGridAnnouncementContext) => string;
+    dropped: (ctx: ReorderableGridAnnouncementContext) => string;
+    /** `ctx` is the restored (original) position. */
+    cancelled: (ctx: ReorderableGridAnnouncementContext) => string;
+    locked: (ctx: ReorderableGridAnnouncementContext) => string;
+}
+interface ReorderableGridProps<T extends ReorderableGridItem> extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "defaultValue" | "onChange"> {
+    /** The cells' data. Each needs a unique `id`. */
+    items: T[];
+    /**
+     * Controlled order, as ids. Ids that are not in `items` are ignored, and
+     * items missing from it follow in `items` order, so a stale or partial order
+     * never drops a cell.
+     */
+    value?: string[];
+    /** Uncontrolled starting order. Omit both to start in `items` order. */
+    defaultValue?: string[];
+    /**
+     * The full new order, once per committed move: a pointer release or a
+     * keyboard drop that changed something. Never on a cancel, never on a
+     * no-op drop, never during the live preview.
+     */
+    onReorder?: (ids: string[]) => void;
+    /** Renders a cell's content. Default: the item's label. */
+    renderItem?: (item: T, state: ReorderableGridItemState) => ReactNode;
+    /** Columns, 1 to 12. Placement is row-major. Default `2`. */
+    columns?: number;
+    /** Gutter. Default `sm`. */
+    gap?: "none" | "sm" | "md" | "lg";
+    /** No reordering at all, and no tab stops. */
+    disabled?: boolean;
+    /** Accessible name of the grid. */
+    label?: string;
+    /** The name an item is announced by. */
+    getItemLabel?: (item: T) => string;
+    /** Overrides for any announcement or label. */
+    labels?: Partial<ReorderableGridLabels>;
+    /** Skip the cell's default visuals (border, surface, padding). Behaviour stays. */
+    unstyled?: boolean;
+    /** Extra classes on every cell. */
+    cellClassName?: string;
+}
+
+/**
+ * A grid of cells reordered in place, row-major, by pointer or keyboard.
+ *
+ * Built for field-order designers: the grid looks like the grid it designs.
+ * Order is a list of ids (`value` / `defaultValue` / `onReorder`); the pure
+ * `moveItem(ids, from, to, { locked })` is the same rule without a DOM, for
+ * agents.
+ */
+declare const ReorderableGrid: (<T extends ReorderableGridItem>(props: ReorderableGridProps<T> & {
+    ref?: Ref<HTMLDivElement>;
+}) => ReactElement) & {
+    displayName?: string;
+};
+
+interface MoveItemOptions<T> {
+    /**
+     * Pinned entries. A locked entry keeps its absolute index: it cannot be
+     * moved, nothing can be dropped onto its slot, and the other entries flow
+     * around it. Either the locked ids themselves or a predicate.
+     */
+    locked?: Iterable<T> | ((id: T) => boolean);
+}
+/**
+ * Move the entry at `fromIndex` so that it ends up at `toIndex`, row-major,
+ * and return a NEW array. The input is never mutated.
+ *
+ * This is the whole reorder rule of `ReorderableGrid`, with no DOM: the grid's
+ * pointer drags and arrow keys both go through it, and an agent bridge can call
+ * it directly to reorder from a tool call.
+ *
+ * - `toIndex` is the entry's index in the RESULT, so `moveItem(ids, 0, ids.length - 1)`
+ *   moves the first entry to the end.
+ * - An index outside the list (or not an integer) throws `RangeError`. That is
+ *   a caller bug, and a silent no-op would hide it.
+ * - With `locked`: a locked entry keeps its absolute index and the move happens
+ *   among the free slots only. Moving a locked entry, or onto a locked slot,
+ *   returns the order unchanged: that is the rule doing its job, not an error.
+ */
+declare function moveItem<T>(ids: readonly T[], fromIndex: number, toIndex: number, options?: MoveItemOptions<T>): T[];
+
+export { type MoveItemOptions, ReorderableGrid, type ReorderableGridAnnouncementContext, type ReorderableGridItem, type ReorderableGridItemState, type ReorderableGridLabels, type ReorderableGridProps, moveItem };