@particle-academy/react-fancy 6.8.0 → 6.9.0

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCO,IAAM,YAAA,GAAe;AAAA,EAC1B,OAAA,EAAS;AAAA,IACP,QAAA,EAAU,iBAAA;AAAA,IACV,YAAA,EAAc,sBAAA;AAAA,IACd,KAAA,EAAO,oBAAA;AAAA,IACP,IAAA,EAAM,uBAAA;AAAA,IACN,WAAA,EAAa;AAAA,GACf;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,QAAA,EAAU,uBAAA;AAAA,IACV,YAAA,EAAc,4BAAA;AAAA,IACd,KAAA,EAAO,uBAAA;AAAA,IACP,IAAA,EAAM,uBAAA;AAAA,IACN,WAAA,EAAa;AAAA,GACf;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,QAAA,EAAU,gBAAA;AAAA,IACV,YAAA,EAAc,qBAAA;AAAA,IACd,KAAA,EAAO,uBAAA;AAAA,IACP,IAAA,EAAM,uBAAA;AAAA,IACN,WAAA,EAAa;AAAA,GACf;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,QAAA,EAAU,uBAAA;AAAA,IACV,YAAA,EAAc,4BAAA;AAAA,IACd,KAAA,EAAO,uBAAA;AAAA,IACP,IAAA,EAAM,uBAAA;AAAA,IACN,WAAA,EAAa;AAAA,GACf;AAAA,EACA,KAAA,EAAO;AAAA,IACL,QAAA,EAAU,eAAA;AAAA,IACV,YAAA,EAAc,oBAAA;AAAA,IACd,KAAA,EAAO,oBAAA;AAAA,IACP,IAAA,EAAM,SAAA;AAAA,IACN,WAAA,EAAa;AAAA,GACf;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,QAAA,EAAU,cAAA;AAAA,IACV,YAAA,EAAc,mBAAA;AAAA,IACd,KAAA,EAAO,uBAAA;AAAA,IACP,IAAA,EAAM,uBAAA;AAAA,IACN,WAAA,EAAa;AAAA,GACf;AAAA,EACA,WAAA,EAAa;AAAA,IACX,QAAA,EAAU,mBAAA;AAAA,IACV,YAAA,EAAc,wBAAA;AAAA,IACd,KAAA,EAAO,uBAAA;AAAA,IACP,IAAA,EAAM,uBAAA;AAAA,IACN,WAAA,EAAa;AAAA,GACf;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,QAAA,EAAU,oBAAA;AAAA,IACV,YAAA,EAAc,yBAAA;AAAA,IACd,KAAA,EAAO,uBAAA;AAAA,IACP,IAAA,EAAM,uBAAA;AAAA,IACN,WAAA,EAAa;AAAA,GACf;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,QAAA,EAAU,oBAAA;AAAA,IACV,YAAA,EAAc,yBAAA;AAAA,IACd,KAAA,EAAO,uBAAA;AAAA,IACP,IAAA,EAAM,uBAAA;AAAA,IACN,WAAA,EAAa;AAAA,GACf;AAAA,EACA,aAAA,EAAe;AAAA,IACb,QAAA,EAAU,qBAAA;AAAA,IACV,YAAA,EAAc,0BAAA;AAAA,IACd,KAAA,EAAO,uBAAA;AAAA,IACP,IAAA,EAAM,uBAAA;AAAA,IACN,WAAA,EAAa;AAAA,GACf;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,QAAA,EAAU,uBAAA;AAAA,IACV,YAAA,EAAc,4BAAA;AAAA,IACd,KAAA,EAAO,sBAAA;AAAA;AAAA,IAEP,IAAA,EAAM,6DAAA;AAAA,IACN,WAAA,EAAa;AAAA,GACf;AAAA,EACA,KAAA,EAAO;AAAA,IACL,QAAA,EAAU,eAAA;AAAA,IACV,YAAA,EAAc,oBAAA;AAAA,IACd,KAAA,EAAO,uBAAA;AAAA,IACP,IAAA,EAAM,uBAAA;AAAA,IACN,WAAA,EAAa;AAAA;AAEjB","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

@@ -46,7 +46,7 @@ export { EncodeOptions, QrCode, QrCodeAction, QrCodeActionEvent, QrCodeActionOut
 export { PullQuote, PullQuoteProps } from './pull-quote.cjs';
 export { Stat, StatBand, StatBandProps, StatProps } from './stat.cjs';
 export { Profile, ProfileProps } from './profile.cjs';
-export { e as Card, f as CardBleedEdges, d as CardBleedProps, a as CardBodyProps, b as CardFooterProps, C as CardHeaderProps, c as CardMediaProps, g as CardPadding, h as CardProps, i as CardSectionProps, j as CardSections, k as CardSize } from './Card-CuRZivBz.cjs';
+export { e as Card, f as CardBleedEdges, d as CardBleedProps, a as CardBodyProps, b as CardFooterProps, C as CardHeaderProps, c as CardMediaProps, g as CardPadding, h as CardProps, i as CardSectionProps, j as CardSections, k as CardSize } from './Card-D0sp2T1V.cjs';
 export { Callout, CalloutProps } from './callout.cjs';
 export { FauxClient } from './faux-client.cjs';
 export { F as FauxClientProps } from './FauxClient.types-Dtk9aRs6.cjs';
@@ -258,10 +258,28 @@ declare function useOutsideClick(ref: RefObject<HTMLElement | null>, handler: (e
 
 declare function useFocusTrap(ref: RefObject<HTMLElement | null>, enabled?: boolean): void;
 
+/**
+ * Writing direction, read from the DOM rather than passed as a prop.
+ *
+ * Components follow the `dir` the browser already resolved for them, inherited
+ * from the nearest ancestor that sets one (usually `<html dir="rtl">`). Reading
+ * the computed `direction` means a `dir` on any wrapper works, with nothing to
+ * thread through props or context, and SSR renders the same markup for both
+ * directions: layout is logical CSS, and only code that measures or maps keys
+ * asks this question, always in an effect or an event handler.
+ */
+type Direction = "ltr" | "rtl";
+
 interface FloatingPosition {
     x: number;
     y: number;
     placement: Placement;
+    /**
+     * The anchor's writing direction. Put it on the floating element as `dir`:
+     * a floating element is portalled to `<body>`, so without it a `dir` set on
+     * a wrapper (rather than on `<html>`) would not reach the popup.
+     */
+    dir: Direction;
 }
 interface UseFloatingPositionOptions {
     placement?: Placement;

package/dist/index.d.ts

@@ -46,7 +46,7 @@ export { EncodeOptions, QrCode, QrCodeAction, QrCodeActionEvent, QrCodeActionOut
 export { PullQuote, PullQuoteProps } from './pull-quote.js';
 export { Stat, StatBand, StatBandProps, StatProps } from './stat.js';
 export { Profile, ProfileProps } from './profile.js';
-export { e as Card, f as CardBleedEdges, d as CardBleedProps, a as CardBodyProps, b as CardFooterProps, C as CardHeaderProps, c as CardMediaProps, g as CardPadding, h as CardProps, i as CardSectionProps, j as CardSections, k as CardSize } from './Card-CuRZivBz.js';
+export { e as Card, f as CardBleedEdges, d as CardBleedProps, a as CardBodyProps, b as CardFooterProps, C as CardHeaderProps, c as CardMediaProps, g as CardPadding, h as CardProps, i as CardSectionProps, j as CardSections, k as CardSize } from './Card-D0sp2T1V.js';
 export { Callout, CalloutProps } from './callout.js';
 export { FauxClient } from './faux-client.js';
 export { F as FauxClientProps } from './FauxClient.types-Dtk9aRs6.js';
@@ -258,10 +258,28 @@ declare function useOutsideClick(ref: RefObject<HTMLElement | null>, handler: (e
 
 declare function useFocusTrap(ref: RefObject<HTMLElement | null>, enabled?: boolean): void;
 
+/**
+ * Writing direction, read from the DOM rather than passed as a prop.
+ *
+ * Components follow the `dir` the browser already resolved for them, inherited
+ * from the nearest ancestor that sets one (usually `<html dir="rtl">`). Reading
+ * the computed `direction` means a `dir` on any wrapper works, with nothing to
+ * thread through props or context, and SSR renders the same markup for both
+ * directions: layout is logical CSS, and only code that measures or maps keys
+ * asks this question, always in an effect or an event handler.
+ */
+type Direction = "ltr" | "rtl";
+
 interface FloatingPosition {
     x: number;
     y: number;
     placement: Placement;
+    /**
+     * The anchor's writing direction. Put it on the floating element as `dir`:
+     * a floating element is portalled to `<body>`, so without it a `dir` set on
+     * a wrapper (rather than on `<html>`) would not reach the popup.
+     */
+    dir: Direction;
 }
 interface UseFloatingPositionOptions {
     placement?: Placement;

package/dist/index.js

@@ -1,137 +1,138 @@
 import './chunk-5WMVBFBD.js';
-export { MultiSwitch } from './chunk-3S5ED522.js';
-export { NumberField } from './chunk-LY3RQB3H.js';
-export { RadioGroup } from './chunk-4FH2JHUY.js';
+export { MultiSwitch } from './chunk-XO4GHRA2.js';
+export { NumberField } from './chunk-F3U4AVGF.js';
+export { RadioGroup } from './chunk-WAEOIEDI.js';
 import './chunk-GNHQVPZP.js';
-export { Slider } from './chunk-NVXTHTJI.js';
+export { Slider } from './chunk-YTWMIVRI.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';
+export { Checkbox } from './chunk-WSU36HJM.js';
+export { CheckboxGroup } from './chunk-X4NXS42J.js';
 import './chunk-V4EARA4F.js';
 import './chunk-SHDSKHCC.js';
-export { Tabs, useTabs } from './chunk-FR4RHVPR.js';
+export { Tabs, useTabs } from './chunk-H7IQVCTX.js';
 import './chunk-TMR56BBE.js';
-export { TimeGrid } from './chunk-MLZGGAXQ.js';
-export { TimePicker } from './chunk-AZQXPI5S.js';
-export { Timeline } from './chunk-QGY5FPVM.js';
-export { Toast, useToast } from './chunk-ESCIXKFT.js';
-export { TreeNav, useTreeNav } from './chunk-ZPBKRJMH.js';
+export { TimeGrid } from './chunk-SOIGBPK6.js';
+export { TimePicker } from './chunk-UBLMYH6C.js';
+export { Timeline } from './chunk-54NB3T3Q.js';
+export { Toast, useToast } from './chunk-D6NISIKV.js';
+export { TreeNav, useTreeNav } from './chunk-QEJBMXRQ.js';
 export { VirtualList } from './chunk-5IXOQGPX.js';
-export { Separator } from './chunk-JSD6IEBW.js';
-export { Sidebar, useSidebar } from './chunk-JY2RC6I4.js';
+export { Separator } from './chunk-RFTDMQ56.js';
+export { Sidebar, useSidebar } from './chunk-FQCLJZZS.js';
 export { Skeleton } from './chunk-X7VIIM2P.js';
 export { Stat, StatBand } from './chunk-KC3PYCBO.js';
-export { StatList } from './chunk-SXXDTW7S.js';
-export { Stepper } from './chunk-5EW47IH7.js';
+export { StatList } from './chunk-NETUI353.js';
+export { Stepper } from './chunk-RCTPN5QK.js';
 export { StickyNote } from './chunk-CCG2L5EH.js';
-export { Table } from './chunk-YAPGHVBZ.js';
-export { Progress } from './chunk-UE3QO7R3.js';
-export { PromptInput, browserPlatformHints, detectPlatform, modifierKeyLabel, promptDataUrlToFile, promptFileToDataUrl } from './chunk-PDVU2PXR.js';
-export { Tooltip } from './chunk-GR2WKBER.js';
+export { Table } from './chunk-KRECSPD3.js';
+export { Progress } from './chunk-LAQT5FFV.js';
+export { PromptInput, browserPlatformHints, detectPlatform, modifierKeyLabel, promptDataUrlToFile, promptFileToDataUrl } from './chunk-BQENLOEV.js';
+export { Tooltip } from './chunk-QUZOGRZS.js';
 export { PullQuote } from './chunk-44VYWOCG.js';
-export { QrCode, QrCodePanel, encodeQr, qrCodePng, qrCodeSvg, selectMode } from './chunk-PIG3UTHU.js';
-export { ReasonTag } from './chunk-GSMD5NK5.js';
-export { ReorderableGrid, moveItem } from './chunk-DTOIO42M.js';
+export { QrCode, QrCodePanel, encodeQr, qrCodePng, qrCodeSvg, selectMode } from './chunk-GZSRKBYI.js';
+export { ReasonTag } from './chunk-6BCXGP2T.js';
+export { ReorderableGrid, moveItem } from './chunk-WLRKE4HC.js';
 import './chunk-SV5BW3IA.js';
-export { ResizablePanels } from './chunk-GDF6XTHC.js';
+export { ResizablePanels } from './chunk-7OUBFO4D.js';
 export { Section } from './chunk-SLJD25VV.js';
-export { OtpInput } from './chunk-TMQF2CRN.js';
-export { Pagination } from './chunk-LKN7FYW6.js';
+export { OtpInput } from './chunk-S4JQPOBR.js';
+export { Pagination } from './chunk-NW2LQRUP.js';
 export { Pillbox } from './chunk-CDW7MFPG.js';
-export { Profile } from './chunk-GOE36IXL.js';
-export { MagicWand } from './chunk-F4OYQ2XZ.js';
-export { Marquee } from './chunk-RSLZL6VP.js';
-export { MediaViewer, resolveMediaType } from './chunk-5PHPJL7Z.js';
+export { Profile } from './chunk-Z6M3UELD.js';
+export { MagicWand } from './chunk-AR5DLM4K.js';
+export { Marquee } from './chunk-OBA2LR4I.js';
+export { MediaViewer, resolveMediaType } from './chunk-4EQ336PQ.js';
 export { VideoViewer } from './chunk-VOGI7GX3.js';
-export { PdfViewer } from './chunk-CS2ZYMYP.js';
-export { Menu, useMenu } from './chunk-U4Y7ZXME.js';
-export { MobileMenu, useMobileMenu } from './chunk-EUVWYDFN.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 { MoodMeter } from './chunk-K6Q542VL.js';
 export { Navbar, useNavbar } from './chunk-TKGMH5PA.js';
 import './chunk-CFH6CJQG.js';
-export { ImageViewer } from './chunk-ICMLLZKZ.js';
-export { IndexList } from './chunk-BLOX7MRO.js';
-export { InputTag, contentEditableAdapter, controlledAdapter, inputAdapter, textareaAdapter } from './chunk-37D5PYEF.js';
-export { JSON_FIELD_TYPES, JsonEditor, applyJsonEdit, describeEdit, findJsonConflicts, getAtPath, inferType, parseKeyMap, parsePath, pathToString, resolveKeyRule, typeMatches } from './chunk-5TP642UT.js';
-export { Select } from './chunk-6GVOW3UL.js';
-export { Switch } from './chunk-DXZCKDYS.js';
-export { DatePicker } from './chunk-2UTN3EFK.js';
-export { Input } from './chunk-PJNUGSKI.js';
-export { Textarea } from './chunk-UVUBV4VZ.js';
-import './chunk-KXYMMNNV.js';
-export { DisplayValue } from './chunk-WX5XYDVN.js';
-export { Field } from './chunk-5WQ6FPSP.js';
-import './chunk-USWQAMI3.js';
+export { ImageViewer } from './chunk-WJE7UX2G.js';
+export { IndexList } from './chunk-QE7KXMUZ.js';
+export { InputTag, contentEditableAdapter, controlledAdapter, inputAdapter, textareaAdapter } from './chunk-3O3ZWWLG.js';
+export { JSON_FIELD_TYPES, JsonEditor, applyJsonEdit, describeEdit, findJsonConflicts, getAtPath, inferType, parseKeyMap, parsePath, pathToString, resolveKeyRule, typeMatches } from './chunk-GODJVIIO.js';
+export { Select } from './chunk-ZUJVGHFW.js';
+export { Switch } from './chunk-IG2UDCBA.js';
+export { DatePicker } from './chunk-XALAQZCD.js';
+export { Input } from './chunk-IYG436ZY.js';
+export { Textarea } from './chunk-S2ID4NNQ.js';
+import './chunk-EDIX6EXQ.js';
+export { DisplayValue } from './chunk-PZTFGPQJ.js';
+export { Field } from './chunk-E2AEU5SP.js';
+import './chunk-IF6EITB5.js';
 export { Kanban, useKanban } from './chunk-2HPADT4X.js';
 export { Kbd } from './chunk-OTSVOPKP.js';
 export { Emoji } from './chunk-YTMQ2K64.js';
-export { EmojiSelect } from './chunk-WGRLNXNB.js';
-export { Eyebrow } from './chunk-EQ7G5F6K.js';
-export { FauxClient } from './chunk-GVMWJ4NI.js';
-export { FileBrowser, FileBrowserNewFolder, useFileBrowser, validateFolderName } from './chunk-WZAKEJDL.js';
-export { FileUpload, useFileUpload } from './chunk-SCGTO3PX.js';
+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 { FullScreen } from './chunk-GZ5Z56QK.js';
 export { Grid } from './chunk-TM3RTWKI.js';
-export { Command, useCommand } from './chunk-EZZKHMR4.js';
-export { Composer } from './chunk-GDH43QH6.js';
+export { Command, useCommand } from './chunk-R6O6SLXK.js';
+export { Composer } from './chunk-KAKKZDCE.js';
 import './chunk-J6IQHJET.js';
-export { InlinePasteEditor, PastedFilesInput, pasteMarker, useInlinePaste, usePastePills } from './chunk-6PRXG7L6.js';
-export { Popover, usePopover } from './chunk-QTS4Q2NK.js';
+export { InlinePasteEditor, PastedFilesInput, pasteMarker, useInlinePaste, usePastePills } from './chunk-RSB2P3JK.js';
+export { Popover, usePopover } from './chunk-6RXEWM3V.js';
 export { Container } from './chunk-VKMPVFQK.js';
-export { ContextMenu, useContextMenu } from './chunk-NSJBVV7R.js';
-export { Drawer, useDrawer } from './chunk-PXZRYL5I.js';
-export { Dropdown, useDropdown } from './chunk-BXPLERIJ.js';
-export { Editor, useEditor } from './chunk-VSTUGU7W.js';
+export { ContextMenu, useContextMenu } from './chunk-BPTCMI3E.js';
+export { Drawer, useDrawer } from './chunk-ZBXJDQXN.js';
+export { Dropdown, useDropdown } from './chunk-DW2PHLOA.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 { useAnimation } from './chunk-3K2CEAI7.js';
-export { Card } from './chunk-EENHSMV2.js';
+export { Card } from './chunk-4L3MGQAR.js';
 export { Heading } from './chunk-QPM4CZ4G.js';
 export { Text } from './chunk-XM3V3RSU.js';
-export { Carousel, useCarousel } from './chunk-DJYG7DXS.js';
-export { Chart } from './chunk-IUCYRQ4J.js';
-export { ChatDrawer } from './chunk-WE5WGVVX.js';
+export { Carousel, useCarousel } from './chunk-KDRBUF5S.js';
+export { Chart } from './chunk-YPYZZLZ5.js';
+export { ChatDrawer } from './chunk-MKDTXMCE.js';
 import './chunk-TJ66S5K6.js';
-export { ChatMessage, ChatThread } from './chunk-UUEAFG6V.js';
+export { ChatMessage, ChatThread } from './chunk-5NJF7SQX.js';
 import './chunk-AUTW5O4W.js';
-export { ContentRenderer, registerExtension, registerExtensions, renderMarkdown } from './chunk-QF2FODTG.js';
-export { CodeBlock } from './chunk-MI57NAKF.js';
-import './chunk-J2BWXCES.js';
+export { ContentRenderer, registerExtension, registerExtensions, renderMarkdown } from './chunk-ZL5QVNKG.js';
+export { CodeBlock } from './chunk-7B3Z4NVM.js';
+import './chunk-7GRIO5AZ.js';
 import './chunk-I3LAFKJU.js';
-export { CodeView } from './chunk-TFX4LL7V.js';
+export { CodeView } from './chunk-QSRYTWQN.js';
 import './chunk-2X54BVXG.js';
 import './chunk-J324MF75.js';
 export { ColorPicker } from './chunk-SVSQXKFL.js';
-export { Autocomplete } from './chunk-RWU2MFUL.js';
+export { Autocomplete } from './chunk-VGUAIFGE.js';
 import './chunk-S42OGG43.js';
 import './chunk-5VMILVWD.js';
-export { useFloatingPosition } from './chunk-MQ6VGG62.js';
+export { useFloatingPosition } from './chunk-GJWNZMJT.js';
+import './chunk-US5R36TQ.js';
 export { Portal, PortalContainerContext } from './chunk-RBCMKPBX.js';
 import './chunk-OL53XYHF.js';
 export { FieldModeContext, useFieldMode } from './chunk-NRXK42LO.js';
-export { Avatar } from './chunk-UZCR7DK5.js';
+export { Avatar } from './chunk-LXEOBSEZ.js';
 import './chunk-IQ4KQJAO.js';
 export { Badge } from './chunk-OZ4QFJ7N.js';
 import './chunk-S53A6JIE.js';
 export { Brand, BrandMark } from './chunk-FWAVMWMP.js';
-export { Breadcrumbs } from './chunk-GTS3QA7M.js';
+export { Breadcrumbs } from './chunk-CO2NEUFK.js';
 export { useOutsideClick } from './chunk-RGANGU7X.js';
 export { EscapeLayerContext, useEscapeKey, useEscapeLayer } from './chunk-YX6FTJ6N.js';
 import './chunk-LQ4ICCN2.js';
-export { Action, Button, sanitizeHref, sanitizeHtml } from './chunk-4GPH7HOR.js';
+export { Action, Button, sanitizeHref, sanitizeHtml } from './chunk-Q4CNEHVN.js';
 export { EMOJI_CATEGORY_ORDER, EMOJI_DATA, EMOJI_ENTRIES, SKIN_TONES, applyTone, find, hasSkinTones, resolve, search, skinTones } from './chunk-45BBNJQD.js';
 export { Icon, configureIcons, registerIconAddendum, registerIconSet, registerIcons } from './chunk-J3A4Z2P7.js';
-export { Calendar } from './chunk-X2A3NAJW.js';
+export { Calendar } from './chunk-I65KXHYL.js';
 import './chunk-NMXCQOHV.js';
-export { Callout } from './chunk-KPRSRWNM.js';
-export { Accordion, useAccordion } from './chunk-FRWOWDGX.js';
-export { AccordionPanel, AccordionPanelContent, AccordionPanelSection, AccordionPanelTrigger, useAccordionPanel, useAccordionSection } from './chunk-RANTYGKW.js';
+export { Callout } from './chunk-2I7VNCBZ.js';
+export { Accordion, useAccordion } from './chunk-5FA6V7JF.js';
+export { AccordionPanel, AccordionPanelContent, AccordionPanelSection, AccordionPanelTrigger, useAccordionPanel, useAccordionSection } from './chunk-AXW55PQG.js';
 export { useControllableState } from './chunk-EDYAXGUM.js';
 export { ActivityLight } from './chunk-V4235IZO.js';
 export { AudioViewer } from './chunk-2OMA3O63.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/input-tag.cjs

@@ -1,29 +1,30 @@
 'use strict';
 
-var chunkUK6BGM74_cjs = require('./chunk-UK6BGM74.cjs');
+var chunkLREJ7AV2_cjs = require('./chunk-LREJ7AV2.cjs');
 require('./chunk-6V44RRSB.cjs');
+require('./chunk-36IC3NDN.cjs');
 
 
 
 Object.defineProperty(exports, "InputTag", {
   enumerable: true,
-  get: function () { return chunkUK6BGM74_cjs.InputTag; }
+  get: function () { return chunkLREJ7AV2_cjs.InputTag; }
 });
 Object.defineProperty(exports, "contentEditableAdapter", {
   enumerable: true,
-  get: function () { return chunkUK6BGM74_cjs.contentEditableAdapter; }
+  get: function () { return chunkLREJ7AV2_cjs.contentEditableAdapter; }
 });
 Object.defineProperty(exports, "controlledAdapter", {
   enumerable: true,
-  get: function () { return chunkUK6BGM74_cjs.controlledAdapter; }
+  get: function () { return chunkLREJ7AV2_cjs.controlledAdapter; }
 });
 Object.defineProperty(exports, "inputAdapter", {
   enumerable: true,
-  get: function () { return chunkUK6BGM74_cjs.inputAdapter; }
+  get: function () { return chunkLREJ7AV2_cjs.inputAdapter; }
 });
 Object.defineProperty(exports, "textareaAdapter", {
   enumerable: true,
-  get: function () { return chunkUK6BGM74_cjs.textareaAdapter; }
+  get: function () { return chunkLREJ7AV2_cjs.textareaAdapter; }
 });
 //# sourceMappingURL=input-tag.cjs.map
 //# sourceMappingURL=input-tag.cjs.map

package/dist/input-tag.d.cts

@@ -77,8 +77,12 @@ interface InputTagProps {
     triggers: InputTagTriggers;
     /** Max rows shown. Default 8. */
     maxItems?: number;
-    /** Where the picker anchors relative to the surface. Default `"bottom-left"`. */
-    placement?: "bottom-left" | "bottom-right" | "top-left" | "top-right";
+    /**
+     * Where the picker anchors relative to the surface. `*-start` / `*-end`
+     * follow the writing direction (`start` is the right edge in RTL);
+     * `*-left` / `*-right` are physical. Default `"bottom-start"`.
+     */
+    placement?: "bottom-start" | "bottom-end" | "top-start" | "top-end" | "bottom-left" | "bottom-right" | "top-left" | "top-right";
     /** Custom class for the popover container. */
     className?: string;
     /** Inline style for the popover container. */

package/dist/input-tag.d.ts

@@ -77,8 +77,12 @@ interface InputTagProps {
     triggers: InputTagTriggers;
     /** Max rows shown. Default 8. */
     maxItems?: number;
-    /** Where the picker anchors relative to the surface. Default `"bottom-left"`. */
-    placement?: "bottom-left" | "bottom-right" | "top-left" | "top-right";
+    /**
+     * Where the picker anchors relative to the surface. `*-start` / `*-end`
+     * follow the writing direction (`start` is the right edge in RTL);
+     * `*-left` / `*-right` are physical. Default `"bottom-start"`.
+     */
+    placement?: "bottom-start" | "bottom-end" | "top-start" | "top-end" | "bottom-left" | "bottom-right" | "top-left" | "top-right";
     /** Custom class for the popover container. */
     className?: string;
     /** Inline style for the popover container. */

package/dist/input-tag.js

@@ -1,4 +1,5 @@
-export { InputTag, contentEditableAdapter, controlledAdapter, inputAdapter, textareaAdapter } from './chunk-37D5PYEF.js';
+export { InputTag, contentEditableAdapter, controlledAdapter, inputAdapter, textareaAdapter } from './chunk-3O3ZWWLG.js';
 import './chunk-S42OGG43.js';
+import './chunk-US5R36TQ.js';
 //# sourceMappingURL=input-tag.js.map
 //# sourceMappingURL=input-tag.js.map

package/dist/input.cjs

@@ -1,16 +1,17 @@
 'use strict';
 
 require('./chunk-QGPMVFZJ.cjs');
-var chunkHNJXBMHI_cjs = require('./chunk-HNJXBMHI.cjs');
-require('./chunk-MRZXTL46.cjs');
-require('./chunk-P53432AK.cjs');
-require('./chunk-QF7CD4JH.cjs');
-require('./chunk-O3F6DYWR.cjs');
-require('./chunk-KKYILQTG.cjs');
-require('./chunk-MKGWHSNV.cjs');
+var chunkG5MDMQVQ_cjs = require('./chunk-G5MDMQVQ.cjs');
+require('./chunk-DFROB5TW.cjs');
+require('./chunk-UIBAIWUR.cjs');
+require('./chunk-Q7XL37T3.cjs');
+require('./chunk-XG6J5MOK.cjs');
+require('./chunk-UORN3Z7R.cjs');
+require('./chunk-JV2HEOCB.cjs');
 require('./chunk-6V44RRSB.cjs');
 require('./chunk-MKHYENKR.cjs');
-require('./chunk-J2DI6RMR.cjs');
+require('./chunk-XGGAAG74.cjs');
+require('./chunk-36IC3NDN.cjs');
 require('./chunk-TI7D4QDM.cjs');
 require('./chunk-KJ22KE56.cjs');
 require('./chunk-L3V3BYVS.cjs');
@@ -23,7 +24,7 @@ require('./chunk-ZU5Q77OT.cjs');
 
 Object.defineProperty(exports, "Input", {
   enumerable: true,
-  get: function () { return chunkHNJXBMHI_cjs.Input; }
+  get: function () { return chunkG5MDMQVQ_cjs.Input; }
 });
 //# sourceMappingURL=input.cjs.map
 //# sourceMappingURL=input.cjs.map

package/dist/input.js

@@ -1,14 +1,15 @@
 import './chunk-SHDSKHCC.js';
-export { Input } from './chunk-PJNUGSKI.js';
-import './chunk-KXYMMNNV.js';
-import './chunk-WX5XYDVN.js';
-import './chunk-5WQ6FPSP.js';
-import './chunk-USWQAMI3.js';
-import './chunk-6PRXG7L6.js';
-import './chunk-QTS4Q2NK.js';
+export { Input } from './chunk-IYG436ZY.js';
+import './chunk-EDIX6EXQ.js';
+import './chunk-PZTFGPQJ.js';
+import './chunk-E2AEU5SP.js';
+import './chunk-IF6EITB5.js';
+import './chunk-RSB2P3JK.js';
+import './chunk-6RXEWM3V.js';
 import './chunk-S42OGG43.js';
 import './chunk-5VMILVWD.js';
-import './chunk-MQ6VGG62.js';
+import './chunk-GJWNZMJT.js';
+import './chunk-US5R36TQ.js';
 import './chunk-RBCMKPBX.js';
 import './chunk-OL53XYHF.js';
 import './chunk-NRXK42LO.js';