@dreamtree-org/twreact-ui 1.3.8 → 1.3.10

package/DESIGN.md

@@ -37,7 +37,11 @@ typography:
 rounded:
   control: 8px
   card: 12px
+  sheet: 16px
   pill: 9999px
+elevation: [xs, sm, md, lg, xl, overlay]
+zIndex: { base: 0, sticky: 20, dropdown: 30, overlay: 40, modal: 50, popover: 60, toast: 70, tooltip: 80 }
+motion: { fast: 120ms, base: 200ms, slow: 320ms }
 spacing:
   grid: 4px
   steps: [4, 8, 12, 16, 20, 24, 32]
@@ -81,9 +85,12 @@ Every Dreamtree product screen, and every prototype generated by Dreamtree Studi
 ## 3. Type, space and shape
 
 - Font: Inter. Numbers in tables and KPIs use `tabular-nums`.
-- Scale: page title `text-2xl font-semibold`, section title `text-base font-semibold`, body `text-sm`, caption `text-xs text-muted`, KPI `text-3xl font-semibold`. For tiny labels use `text-micro`, never `text-[10px]` or `text-[11px]`.
+- Scale: use the role classes `text-page-title`, `text-section-title` (both semibold), `text-body`, `text-caption text-muted` and `text-kpi` (semibold). The older `text-2xl font-semibold` / `text-base` / `text-sm` / `text-xs` / `text-3xl` spellings are equivalent. For tiny labels use `text-micro`, never `text-[10px]` or `text-[11px]`. Code and ids use `font-mono`.
+- Elevation: `shadow-xs` … `shadow-xl`, and `shadow-overlay` for dialogs, sheets, popovers and menus. Shadows deepen automatically in dark mode.
+- Layers: `z-sticky`, `z-dropdown`, `z-overlay`, `z-modal`, `z-popover`, `z-toast`, `z-tooltip`. Never `z-50` or an inline `zIndex`.
+- Motion: `duration-fast` (120 ms), `duration-base` (200 ms), `duration-slow` (320 ms) with `ease-standard`, `ease-emphasized` or `ease-spring-out`. Keyframes: `animate-fade-in` / `animate-fade-out`, `animate-scale-in` / `animate-scale-out`, `animate-slide-up`, `animate-slide-down` / `animate-slide-down-out`, `animate-sheet-in` / `animate-sheet-out`. Always pair one with `motion-reduce:animate-none` (e.g. `animate-sheet-in motion-reduce:animate-none`).
 - **No arbitrary values** (`w-[312px]`, `text-[13px]`, `p-[7px]`). Use the Tailwind scale on a 4 px grid: steps 1, 2, 3, 4, 5, 6, 8.
-- Radius: `rounded-control` (8 px) for buttons, inputs and menus; `rounded-card` (12 px) for cards and dialogs; `rounded-full` for pills and badges.
+- Radius: `rounded-control` (8 px) for buttons, inputs and menus; `rounded-card` (12 px) for cards and dialogs; `rounded-sheet` (16 px) for bottom-sheet top corners; `rounded-pill` (or `rounded-full`) for pills and badges.
 - Sentence case everywhere ("Add obligation", not "Add Obligation").
 
 ## 4. Page anatomy
@@ -107,9 +114,10 @@ Every Dreamtree product screen, and every prototype generated by Dreamtree Studi
 ## 7. Responsive and accessible
 
 - No horizontal page scroll at **390 px**. Below `lg` the shell becomes a top bar with a drawer. Wide tables scroll inside their card.
-- Tap targets are at least 40 px. Every control has a visible label. Focus is visible (`focus:ring-2 focus:ring-primary-500 focus:ring-offset-2`).
+- Tap targets are at least **44 px** on touch screens (Apple HIG; WCAG 2.5.5). Icon-only controls grow to 44×44 on `pointer: coarse` and keep their compact size with a mouse. Pressables shrink slightly while pressed (`active:scale-[0.97]`, off under reduced motion). Every control has a visible label. Focus is visible for keyboard users (`focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2`); a mouse click doesn't leave a ring.
 - Text contrast is at least 4.5:1. Status is never shown by colour alone: badges carry words.
 - Respect `prefers-reduced-motion`.
+- Phones: pages use `viewport-fit=cover`; bars that touch a screen edge pad with `pt-safe` / `pb-safe` / `px-safe` (or `inset-safe`). Full-height layouts use `min-h-dvh` / `h-dvh`, never `100vh`. Text fields render at 16 px on touch screens so iOS doesn't zoom on focus.
 
 ## 8. Data and content
 

package/README.md

@@ -881,7 +881,7 @@ module.exports = {
 @source "../node_modules/@dreamtree-org/twreact-ui/dist/index.esm.js";
 ```
 
-The palettes are `primary`, `secondary`, `success`, `warning`, `error`, `info` and `gray` (steps 50–950), so `bg-info-50` / `text-info-600` work out of the box; `info` is for informational and scheduled states that are not the brand accent. This adds semantic utilities next to the palettes: `bg-surface`, `bg-background`, `text-foreground`, `text-muted`, `border-line`, `bg-shell`, `text-micro`, `rounded-control` and `rounded-card`. Add a brand by creating `tokens/brands/<name>.json`; it overrides only the steps and roles you list.
+The palettes are `primary`, `secondary`, `success`, `warning`, `error`, `info` and `gray` (steps 50–950), so `bg-info-50` / `text-info-600` work out of the box; `info` is for informational and scheduled states that are not the brand accent. This adds semantic utilities next to the palettes: `bg-surface`, `bg-background`, `text-foreground`, `text-muted`, `border-line`, `bg-shell`, `text-micro`, `rounded-control` and `rounded-card`. Non-colour scales come from the same file: type roles (`text-page-title`, `text-section-title`, `text-body`, `text-caption`, `text-kpi`), `rounded-sheet` / `rounded-pill`, `font-mono`, elevation (`shadow-xs` … `shadow-xl`, `shadow-overlay`; deeper in dark mode via `--dt-shadow-strength`), z-layers (`z-sticky`, `z-dropdown`, `z-overlay`, `z-modal`, `z-popover`, `z-toast`, `z-tooltip`) and motion (`duration-fast|base|slow`, `ease-standard|emphasized|spring-out`). The Tailwind 3 preset and Tailwind 4 theme include them. Add a brand by creating `tokens/brands/<name>.json`; it overrides only the steps and roles you list.
 
 **Design rules:** [`DESIGN.md`](DESIGN.md) is the rule set for product screens and AI agents: tokens only, blocks first, loading, empty and error states, 390 px, no native dialogs. It is generated from the tokens (`npm run build:tokens`).
 
@@ -889,6 +889,10 @@ The palettes are `primary`, `secondary`, `success`, `warning`, `error`, `info` a
 
 **SSR:** `Tabs`, `Tooltip` and `Switch` generate ids with `React.useId()`, so server-rendered pages (Next.js) hydrate without mismatches. The `/charts` components do the same for their SVG ids, and they render token colours and reduced-motion state the way the server did until hydration finishes.
 
+## Mobile and touch
+
+The stylesheet ships a phone baseline: no tap highlight, no iOS zoom when a field is focused (text fields are 16px on touch screens; add `dt-keep-font-size` to opt one out), `color-scheme` that follows the theme, and no rubber-band overscroll on `body` (add `dt-overscroll-auto` to `<html>` to keep pull-to-refresh). Pad edge bars with `pt-safe` / `pb-safe` / `px-safe` / `inset-safe` — they need `<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">` — and size full-height layouts with `min-h-dvh` instead of `100vh`. Touch targets grow to 44px on coarse pointers.
+
 ## Dark Mode
 
 Enable dark mode with the built-in theme provider:
@@ -905,8 +909,12 @@ function App() {
 }
 ```
 
+`ThemeProvider` sets `data-theme`, the `.dark` class and `color-scheme` on `<html>`, so `dark:` utilities work whether your `tailwind.config.js` uses `darkMode: 'class'` or a `[data-theme="dark"]` selector.
+
 Surfaces such as `Card`, `Sidebar`, `Navbar`, `Table`, `FootNav` and `Dropdown` use the semantic `bg-surface` / `bg-background` / `border-line` / `text-foreground` / `text-muted` tokens, which switch under `.dark` (or `[data-theme="dark"]`). Re-theme them by overriding the `--dt-surface`, `--dt-background`, `--dt-line`, … variables.
 
+> **Accessibility fixes (1.4.x):** Radio groups keep a single selection when uncontrolled, Rate and DatePicker use one tab stop with arrow-key focus, Dialog/Sidebar/AppShell drawers share one focus trap and scroll lock, Toast announces via `role="status"`, Alert's dismiss button is labelled, and Input shows a visible focus ring in its default state. No props changed.
+
 ## Examples
 
 ### Complete Form Example

package/ai-skills/dreamtree-ui.md

@@ -131,7 +131,7 @@ The library exports four kinds of things from `@dreamtree-org/twreact-ui`:
 | Hook            | Purpose                                                                                                                                       |
 | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
 | `useTheme`      | Read/write the current theme (`light | dark`); pairs with `<ThemeProvider>`. Throws if used outside the provider.                              |
-| `ThemeProvider` | Provider that persists theme to `localStorage` (`dreamtree-theme`) and toggles `data-theme` on `<html>`.                                       |
+| `ThemeProvider` | Provider that persists theme to `localStorage` (`dreamtree-theme`) and toggles `data-theme` and the `.dark` class on `<html>`.                                       |
 | `useApi`        | Thin axios wrapper. Returns `{data, error, loading, lastRequest, fetchData, fetchApi, fetchApiWith}`. Accepts `BASE_URL`, `DEFAULT_HEADERS`, `apiMap`. |
 | `useMixins`     | Bridge between component state, Redux store, and an in-memory cache. Power-user hook — prefer local React state for new code.                  |
 
@@ -320,7 +320,7 @@ function ThemeToggle() {
 
 `useTheme` MUST be called inside `<ThemeProvider>`; otherwise it throws.
 `<ThemeProvider>` persists to `localStorage` (`dreamtree-theme`) and
-toggles `data-theme` on `<html>`.
+toggles `data-theme` and the `.dark` class on `<html>`.
 
 ### useApi
 

package/dist/ai-schema.json

@@ -728,7 +728,8 @@
       },
       "label": {
         "type": "string",
-        "required": false
+        "required": false,
+        "default": "\"Pick a color\""
       }
     }
   },
@@ -1195,7 +1196,8 @@
       },
       "onSubmit": {
         "type": "(data: any) => void",
-        "required": false
+        "required": false,
+        "default": "Promise<void>"
       },
       "defaultValues": {
         "type": "Record",
@@ -1800,7 +1802,7 @@
       "colorClass": {
         "type": "string",
         "required": false,
-        "default": "\"bg-pink-500\""
+        "default": "\"bg-primary-600\""
       },
       "ariaLabel": {
         "type": "string",
@@ -2164,8 +2166,7 @@
       },
       "ariaLabel": {
         "type": "string",
-        "required": false,
-        "default": "\"tag\""
+        "required": false
       },
       "avatarPosition": {
         "type": "enum",
@@ -3118,7 +3119,7 @@
   "TextToSpeech": {
     "group": "core",
     "import": "@dreamtree-org/twreact-ui",
-    "forwardRef": false,
+    "forwardRef": true,
     "props": {
       "text": {
         "type": "string",
@@ -3140,6 +3141,16 @@
         "required": false,
         "default": "() => {}"
       },
+      "onError": {
+        "type": "(error: Error) => void",
+        "required": false,
+        "default": "() => {}"
+      },
+      "disabled": {
+        "type": "boolean",
+        "required": false,
+        "default": "false"
+      },
       "renderButton": {
         "type": "(state: TextToSpeechState) => ReactNode",
         "required": false
@@ -3347,12 +3358,12 @@
       "textClass": {
         "type": "string",
         "required": false,
-        "default": "\"text-black\""
+        "default": "\"text-foreground\""
       },
       "bgClass": {
         "type": "string",
         "required": false,
-        "default": "\"bg-white\""
+        "default": "\"bg-surface\""
       },
       "portal": {
         "type": "boolean",

package/dist/charts/index.js

@@ -174,10 +174,75 @@ var ChartFrame = /*#__PURE__*/React__default.default.forwardRef(function ChartFr
   }));
 });
 
-/** `true` when the user asked the OS for reduced motion. */
-function prefersReducedMotion() {
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
-  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+// Internal (not exported). SSR-safe media-query subscription.
+function getMediaQueryList(query) {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return null;
+  return window.matchMedia(query) || null;
+}
+/**
+ * Subscribes `onChange` to a MediaQueryList's change events. Uses
+ * `addEventListener` where available and falls back to the deprecated
+ * `addListener` (Safari < 14). Returns the unsubscribe function.
+ */
+function subscribeMediaQuery(query, onChange) {
+  var mql = getMediaQueryList(query);
+  if (!mql) return function () {};
+  if (typeof mql.addEventListener === "function") {
+    mql.addEventListener("change", onChange);
+    return function () {
+      var _mql$removeEventListe;
+      return (_mql$removeEventListe = mql.removeEventListener) === null || _mql$removeEventListe === void 0 ? void 0 : _mql$removeEventListe.call(mql, "change", onChange);
+    };
+  }
+  if (typeof mql.addListener === "function") {
+    mql.addListener(onChange);
+    return function () {
+      var _mql$removeListener;
+      return (_mql$removeListener = mql.removeListener) === null || _mql$removeListener === void 0 ? void 0 : _mql$removeListener.call(mql, onChange);
+    };
+  }
+  return function () {};
+}
+/**
+ * `true` while `query` matches; follows changes live.
+ *
+ * On the server (and while hydrating) it returns `defaultValue`, so server and
+ * client markup agree; the real value is applied right after hydration. Without
+ * `window.matchMedia` it always returns `defaultValue`.
+ *
+ * @param {string} query - a CSS media query, e.g. "(max-width: 639px)".
+ * @param {{ defaultValue?: boolean }} [options]
+ * @returns {boolean}
+ */
+function useMediaQuery(query) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? false : _ref$defaultValue;
+  var subscribe = React.useCallback(function (onChange) {
+    return subscribeMediaQuery(query, onChange);
+  }, [query]);
+  var getSnapshot = function getSnapshot() {
+    var mql = getMediaQueryList(query);
+    return mql ? Boolean(mql.matches) : defaultValue;
+  };
+  var getServerSnapshot = function getServerSnapshot() {
+    return defaultValue;
+  };
+  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+
+// Internal (not exported). Shared by the charts and the overlay primitives.
+var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+/**
+ * `true` while the user asks the OS for reduced motion; follows changes live.
+ * `false` on the server and while hydrating, so the first render matches.
+ *
+ * @returns {boolean}
+ */
+function useReducedMotion() {
+  return useMediaQuery(REDUCED_MOTION_QUERY, {
+    defaultValue: false
+  });
 }
 
 var CHART_PALETTES = ["primary", "secondary", "success", "warning", "error", "info", "gray"];
@@ -267,26 +332,6 @@ function useChartTheme(categories, colors) {
     series: seriesColors(categories, colors, live)
   };
 }
-function subscribeReducedMotion(onChange) {
-  var _query$addEventListen;
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return function () {};
-  var query = window.matchMedia("(prefers-reduced-motion: reduce)");
-  (_query$addEventListen = query.addEventListener) === null || _query$addEventListen === void 0 || _query$addEventListen.call(query, "change", onChange);
-  return function () {
-    var _query$removeEventLis;
-    return (_query$removeEventLis = query.removeEventListener) === null || _query$removeEventLis === void 0 ? void 0 : _query$removeEventLis.call(query, "change", onChange);
-  };
-}
-var serverReducedMotion = function serverReducedMotion() {
-  return false;
-};
-/**
- * `true` while the user asks the OS for reduced motion; follows changes live.
- * `false` on the server and while hydrating, so the first render matches.
- */
-function useReducedMotion() {
-  return React.useSyncExternalStore(subscribeReducedMotion, prefersReducedMotion, serverReducedMotion);
-}
 var defaultValueFormatter = function defaultValueFormatter(value) {
   return typeof value === "number" ? value.toLocaleString() : value == null ? "" : String(value);
 };

package/dist/components/blocks/AppShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/AppShell.jsx"],"names":[],"mappings":";AAmDA,kFAgEG;kBAnH6D,OAAO"}
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/AppShell.jsx"],"names":[],"mappings":";AAqDA,kFA+EG;kBApIkD,OAAO"}

package/dist/components/charts/chartTheme.d.ts

@@ -18,11 +18,6 @@ export function useChartTheme(categories: any, colors: any): {
     };
     series: any;
 };
-/**
- * `true` while the user asks the OS for reduced motion; follows changes live.
- * `false` on the server and while hydrating, so the first render matches.
- */
-export function useReducedMotion(): boolean;
 /**
  * A per-instance id for the SVG defs recharts draws (clip paths). recharts 2
  * falls back to a module-level counter, which differs between the server and the
@@ -30,7 +25,9 @@ export function useReducedMotion(): boolean;
  * is safe inside `url(#…)`.
  */
 export function useChartId(): string;
+export { useReducedMotion };
 export const CHART_PALETTES: string[];
 export const DEFAULT_CHART_COLORS: string[];
 export function defaultValueFormatter(value: any): string;
+import { useReducedMotion } from "../../hooks/useReducedMotion";
 //# sourceMappingURL=chartTheme.d.ts.map

package/dist/components/charts/chartTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chartTheme.d.ts","sourceRoot":"","sources":["../../../src/components/charts/chartTheme.js"],"names":[],"mappings":"AAgBA,sGAAsG;AACtG,oDAGC;AAgBD;;;;GAIG;AACH,8DAGC;AAED,gFAGC;AAwBD;;;;GAIG;AACH;;;;;EAIC;AAWD;;;GAGG;AACH,4CAEC;AAKD;;;;;GAKG;AACH,qCAEC;AA7GD,sCAAsG;AAEtG,4CAA4G;AAgGrG,0DACkF"}
+{"version":3,"file":"chartTheme.d.ts","sourceRoot":"","sources":["../../../src/components/charts/chartTheme.js"],"names":[],"mappings":"AAmBA,sGAAsG;AACtG,oDAGC;AAgBD;;;;GAIG;AACH,8DAGC;AAED,gFAGC;AAwBD;;;;GAIG;AACH;;;;;EAIC;AAKD;;;;;GAKG;AACH,qCAEC;;AA5FD,sCAAsG;AAEtG,4CAA4G;AA+ErG,0DACkF;iCAvFxD,8BAA8B"}

package/dist/components/core/Accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/core/Accordion.jsx"],"names":[],"mappings":";AAIA;;;;GAIG;AAEH,mFA+OG;kBAzP8E,OAAO"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/core/Accordion.jsx"],"names":[],"mappings":";AAKA;;;;GAIG;AAEH,mFA+QG;kBA1RqF,OAAO"}

package/dist/components/core/ColorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/components/core/ColorPicker.jsx"],"names":[],"mappings":";AA0FA,qFAkKG;kBA5PkD,OAAO"}
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/components/core/ColorPicker.jsx"],"names":[],"mappings":";AA0FA,qFAiLG;kBA3QyD,OAAO"}

package/dist/components/core/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/core/DatePicker.jsx"],"names":[],"mappings":";AA8BA,oFA+dE;kBArfK,OAAO"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/core/DatePicker.jsx"],"names":[],"mappings":";AAgCA,oFAqhBE;kBA7iBK,OAAO"}

package/dist/components/core/Form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/core/Form.jsx"],"names":[],"mappings":";AAwCA,8EA2hBG;kBAnkB6D,OAAO"}
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/core/Form.jsx"],"names":[],"mappings":";AAuDA,8EAyiBG;kBAhmB6D,OAAO"}

package/dist/components/core/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/core/Input.jsx"],"names":[],"mappings":";AAIA,+EA+NG;kBAnOqE,OAAO"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/core/Input.jsx"],"names":[],"mappings":";AAIA,+EAmOG;kBAvOqE,OAAO"}

package/dist/components/core/PriceRangePicker.d.ts

@@ -1,33 +1,4 @@
 export default PriceRangePicker;
-/**
- * PriceRangeSlider - UI library component (Tailwind)
- *
- * Props
- * - min: number (default 0)
- * - max: number (default 1000)
- * - step: number (default 1)
- * - minGap: number (minimum distance between thumbs, default 5)
- * - value: { min: number, max: number } | null (controlled)
- * - defaultValue: { min: number, max: number } (uncontrolled initial)
- * - onChange: (value) => void
- * - onFinalChange: (value) => void // called on mouseup/touchend or Enter in inputs
- * - showInputs: boolean (default true)
- * - showTooltips: boolean (default true)
- * - disabled: boolean
- * - presets: Array<{ id: string|number, label: string, value: {min:number,max:number} }>
- * - formatValue: (n) => string (formatting callback, default: n => n)
- * - className: string (container custom classes)
- * - size: 'sm' | 'md' | 'lg' (affects thumb size & spacing)
- * - colorClass: Tailwind class for active track/thumb, default 'bg-pink-500'
- * - ariaLabel: string
- *
- * Usage notes
- * - Controlled mode: pass `value` and handle updates via onChange.
- * - Uncontrolled mode: omit `value` and use `defaultValue`.
- *
- * Accessibility
- * - Inputs are labelled and thumbs are keyboard-focusable
- */
 declare const PriceRangePicker: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from "react";
 //# sourceMappingURL=PriceRangePicker.d.ts.map

package/dist/components/core/PriceRangePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PriceRangePicker.d.ts","sourceRoot":"","sources":["../../../src/components/core/PriceRangePicker.jsx"],"names":[],"mappings":";AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,0FA8TG;kBA/V6D,OAAO"}
+{"version":3,"file":"PriceRangePicker.d.ts","sourceRoot":"","sources":["../../../src/components/core/PriceRangePicker.jsx"],"names":[],"mappings":";AAqCA,0FAoQG;kBAzSqE,OAAO"}

package/dist/components/core/Radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/core/Radio.jsx"],"names":[],"mappings":";AAYA,+EAsIG;kBAjJgD,OAAO"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/core/Radio.jsx"],"names":[],"mappings":";AAmBA,+EAwKG;kBAnLI,OAAO"}

package/dist/components/core/Rate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Rate.d.ts","sourceRoot":"","sources":["../../../src/components/core/Rate.jsx"],"names":[],"mappings":";AA0CA,8EAuJG;kBAhMyC,OAAO"}
+{"version":3,"file":"Rate.d.ts","sourceRoot":"","sources":["../../../src/components/core/Rate.jsx"],"names":[],"mappings":";AA2CA,8EAyJG;kBAnMiD,OAAO"}

package/dist/components/core/RoundedTag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RoundedTag.d.ts","sourceRoot":"","sources":["../../../src/components/core/RoundedTag.jsx"],"names":[],"mappings":";AAGA,oFAoIG;kBAvI+B,OAAO"}
+{"version":3,"file":"RoundedTag.d.ts","sourceRoot":"","sources":["../../../src/components/core/RoundedTag.jsx"],"names":[],"mappings":";AAIA,oFAgKG;kBApK+B,OAAO"}

package/dist/components/core/Table/ColumnMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/ColumnMenu.jsx"],"names":[],"mappings":";AAKA;;GAEG;AACH;;;;;;4CAmCC"}
+{"version":3,"file":"ColumnMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/ColumnMenu.jsx"],"names":[],"mappings":";AAMA;;GAEG;AACH;;;;;;4CAmCC"}

package/dist/components/core/Table/Pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/Pagination.jsx"],"names":[],"mappings":"AAiBA;;;;;4CAkDC;AAGD;;;;;;4CA4HC"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/Pagination.jsx"],"names":[],"mappings":"AAoBA;;;;;4CAkDC;AAGD;;;;;;4CAmIC"}

package/dist/components/core/Table/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/Table.jsx"],"names":[],"mappings":";AA8CA,+EAkhDG;kBAvjDI,OAAO"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/Table.jsx"],"names":[],"mappings":";AA8CA,+EA8gDG;kBAnjDI,OAAO"}

package/dist/components/core/Table/TableRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/TableRow.jsx"],"names":[],"mappings":";AAYA;;GAEG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CA+RC"}
+{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/TableRow.jsx"],"names":[],"mappings":";AAaA;;GAEG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CA+RC"}

package/dist/components/core/Table/helpers.d.ts

@@ -18,4 +18,6 @@ export function resolveActions(actions: any[] | Function, row: object, index: nu
     inlineActions: any[];
     menuActions: any[];
 };
+export const DEFAULT_HOVER_CLASS: string;
+export function getHoverClass(rowHover: any): any;
 //# sourceMappingURL=helpers.d.ts.map

package/dist/components/core/Table/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/helpers.js"],"names":[],"mappings":"AAGO,8DAMN;AAOM;;;;;;;;;;;EAKN;AAaM,8EACqE;AAMrE,qDAGG;AAcH,8EAmBN;AAuBM,wCALI,gBAAc,OACd,MAAM,SACN,MAAM,GACJ;IAAE,aAAa,QAAQ;IAAC,WAAW,QAAO;CAAE,CAyBxD"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/helpers.js"],"names":[],"mappings":"AAGO,8DAMN;AAOM;;;;;;;;;;;EAKN;AAaM,8EACqE;AAMrE,qDAGG;AAcH,8EAmBN;AAuBM,wCALI,gBAAc,OACd,MAAM,SACN,MAAM,GACJ;IAAE,aAAa,QAAQ;IAAC,WAAW,QAAO;CAAE,CAyBxD;AAgBD,yCAAqE;AAU9D,kDAUN"}

package/dist/components/core/Table/useClickOutside.d.ts

@@ -1,8 +1,11 @@
 /**
- * Custom hook to detect clicks outside of specified refs
+ * Legacy shim — the implementation lives in `src/hooks/useClickOutside.js`.
+ * Kept at this path (and with the old positional signature) because
+ * `core/Table/index.js` re-exports it.
+ *
  * @param {Array} refs - Array of React refs to check
  * @param {boolean} isActive - Whether the hook should be active
- * @param {Function} onClickOutside - Callback when click is detected outside
+ * @param {Function} onClickOutside - Callback when a press lands outside
  */
 export function useClickOutside(refs: any[], isActive: boolean, onClickOutside: Function): void;
 export default useClickOutside;

package/dist/components/core/Table/useClickOutside.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useClickOutside.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/useClickOutside.js"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,uDAHW,OAAO,kCAiBjB"}
+{"version":3,"file":"useClickOutside.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/useClickOutside.js"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AACH,uDAHW,OAAO,kCAKjB"}

package/dist/components/core/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/core/Tabs.jsx"],"names":[],"mappings":"AA0GA;;;4CAuBC;AAGD;;;;;;;;4CAkHC;AAGD;;;4CAcC;AAED;;;;;mDA8BC;;AAnPD,8EAiDG;kBA7FI,OAAO"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/core/Tabs.jsx"],"names":[],"mappings":"AA0GA;;;4CAuBC;AAGD;;;;;;;;4CAmHC;AAGD;;;4CAcC;AAED;;;;;mDAyBC;;AA/OD,8EAiDG;kBA7FI,OAAO"}

package/dist/components/core/TextToSpeech.d.ts

@@ -1,9 +1,4 @@
 export default TextToSpeech;
-declare function TextToSpeech({ text, rate, pitch, onSpeak, renderButton, }: {
-    text?: string | undefined;
-    rate?: number | undefined;
-    pitch?: number | undefined;
-    onSpeak?: (() => void) | undefined;
-    renderButton: any;
-}): import("react/jsx-runtime").JSX.Element;
+declare const TextToSpeech: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";
 //# sourceMappingURL=TextToSpeech.d.ts.map

package/dist/components/core/TextToSpeech.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextToSpeech.d.ts","sourceRoot":"","sources":["../../../src/components/core/TextToSpeech.jsx"],"names":[],"mappings":";AAEA;;;;;;4CA4CC"}
+{"version":3,"file":"TextToSpeech.d.ts","sourceRoot":"","sources":["../../../src/components/core/TextToSpeech.jsx"],"names":[],"mappings":";AAgBA,sFA6IE;kBA7J0E,OAAO"}

package/dist/components/core/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/core/Tooltip.jsx"],"names":[],"mappings":";AAoCA;;;;;;;;;;;;;;;;GAgBG;AACH,iFAqVG;kBAjYI,OAAO"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/core/Tooltip.jsx"],"names":[],"mappings":";AAwDA;;;;;;;;;;;;;;;;GAgBG;AACH,iFAwZG;kBAxdI,OAAO"}

package/dist/components/feedback/Alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Alert.jsx"],"names":[],"mappings":";AAIA,+EAwFG;kBA5Fe,OAAO"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Alert.jsx"],"names":[],"mappings":";AASA,+EA0FG;kBAnGe,OAAO"}

package/dist/components/feedback/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Dialog.jsx"],"names":[],"mappings":";AAoCA,gFA0JG;kBA9LsC,OAAO"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Dialog.jsx"],"names":[],"mappings":";AAUA,gFA6GG;kBAvH6C,OAAO"}

package/dist/components/feedback/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Toast.jsx"],"names":[],"mappings":";AAmDA,8EA4NG;AA6CH,2FAOC;AA6CD;;;;4CAkBC;;;;AAMD;;;;;;;;;;;;EAIC;kBA5Y+G,OAAO"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/Toast.jsx"],"names":[],"mappings":";AA4DA,8EAgOG;AA+CH,2FAOC;AA6CD;;;;4CAkBC;;;;AAMD;;;;;;;;;;;;EAIC;kBA3Z+G,OAAO"}

package/dist/components/navigation/Sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Sidebar.jsx"],"names":[],"mappings":";AAiGA;;;;;;;;;;;;;;;;;GAiBG;AACH,iFA2kBG;kBAtrBI,OAAO"}
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Sidebar.jsx"],"names":[],"mappings":";AAkFA;;;;;;;;;;;;;;;;;GAiBG;AACH,iFAohBG;kBAhnBI,OAAO"}

package/dist/components/utility/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Avatar.jsx"],"names":[],"mappings":";AAIA,gFA6GG;kBAjHe,OAAO"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Avatar.jsx"],"names":[],"mappings":";AAIA,gFAoHG;kBAxHe,OAAO"}

package/dist/components/utility/Carousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Carousel.jsx"],"names":[],"mappings":"AAIA,iFAsFE;;kBA1FgB,OAAO"}
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Carousel.jsx"],"names":[],"mappings":"AAUA,iFAoGE;;kBA9GgB,OAAO"}

package/dist/components/utility/Portal.d.ts

@@ -0,0 +1,6 @@
+export default Portal;
+declare function Portal({ container, children }: {
+    container: any;
+    children: any;
+}): import("react").ReactPortal | null;
+//# sourceMappingURL=Portal.d.ts.map

package/dist/components/utility/Portal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Portal.jsx"],"names":[],"mappings":";AAcA;;;uCAOC"}

package/dist/esm/components/blocks/AppShell.js

@@ -1,9 +1,11 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, createForOfIteratorHelper as _createForOfIteratorHelper } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import React, { useState, useRef, useCallback, useEffect } from 'react';
+import React, { useState, useRef, useCallback } from 'react';
 import { X, Menu } from 'lucide-react';
 import { cn } from '../../utils/cn.js';
+import { useFocusTrap } from '../../hooks/useFocusTrap.js';
+import { useScrollLock } from '../../hooks/useScrollLock.js';
 
 var _excluded = ["brand", "nav", "sidebarFooter", "topbar", "pageTitle", "linkAs", "children", "className"];
 // Extracted from procurementpro/components/app-shell.tsx (12 of 13 products hand-roll a shell).
@@ -105,23 +107,22 @@ var AppShell = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     open = _useState2[0],
     setOpen = _useState2[1];
   var menuButton = useRef(null);
+  var drawer = useRef(null);
   var close = useCallback(function () {
     return setOpen(false);
   }, []);
-  useEffect(function () {
-    if (!open) return undefined;
-    var onKey = function onKey(e) {
-      if (e.key === 'Escape') {
-        var _menuButton$current;
-        setOpen(false);
-        (_menuButton$current = menuButton.current) === null || _menuButton$current === void 0 || _menuButton$current.focus();
-      }
-    };
-    document.addEventListener('keydown', onKey);
-    return function () {
-      return document.removeEventListener('keydown', onKey);
-    };
-  }, [open]);
+  // Mobile drawer is a modal dialog: focus moves in, Tab is trapped, Escape
+  // closes, focus returns to the menu button, and the page behind is locked.
+  useScrollLock(open);
+  useFocusTrap(drawer, {
+    active: open,
+    onEscape: function onEscape() {
+      var _menuButton$current;
+      close();
+      // Some browsers (Safari) don't focus a clicked button, so the opener may be <body>.
+      (_menuButton$current = menuButton.current) === null || _menuButton$current === void 0 || _menuButton$current.focus();
+    }
+  });
   var sidebar = jsxs(Fragment, {
     children: [jsxs("div", {
       className: "flex items-center justify-between px-5 pb-4 pt-5 text-white",
@@ -134,7 +135,8 @@ var AppShell = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
         onClick: close,
         "aria-label": "Close navigation",
         children: jsx(X, {
-          className: "h-5 w-5"
+          className: "h-5 w-5",
+          "aria-hidden": "true"
         })
       })]
     }), jsx(NavList, {
@@ -165,8 +167,12 @@ var AppShell = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
         onClick: close,
         "aria-hidden": "true"
       }), jsx("aside", {
-        className: "absolute inset-y-0 left-0 flex w-72 max-w-[85%] flex-col bg-shell",
-        "aria-label": "Sidebar",
+        ref: drawer,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Navigation",
+        tabIndex: -1,
+        className: "absolute inset-y-0 left-0 flex w-72 max-w-[85%] flex-col bg-shell focus:outline-none",
         children: sidebar
       })]
     }), jsxs("div", {

package/dist/esm/components/charts/CartesianChart.js

@@ -4,7 +4,8 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { ResponsiveContainer, AreaChart, BarChart, LineChart, CartesianGrid, XAxis, YAxis, Tooltip, Bar, Area, Line } from 'recharts';
 import { ChartFrame, ChartTooltipContent } from './ChartFrame.js';
-import { useChartTheme, useReducedMotion, useChartId, defaultValueFormatter } from './chartTheme.js';
+import { useChartTheme, useChartId, defaultValueFormatter } from './chartTheme.js';
+import { useReducedMotion } from '../../hooks/useReducedMotion.js';
 
 var _excluded = ["kind", "data", "index", "categories", "colors", "valueFormatter", "xAxisFormatter", "height", "showLegend", "showTooltip", "showXAxis", "showYAxis", "showGrid", "yAxisWidth", "curveType", "stacked", "horizontal", "showDots", "connectNulls", "animate", "title", "description", "emptyState", "accessibleTable", "className"];
 var ROOTS = {