@dreamtree-org/twreact-ui 1.3.8 → 1.3.9

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,6 +909,8 @@ 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.
 
 ## Examples

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/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/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/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/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/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/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 = {

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

@@ -4,7 +4,8 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { ResponsiveContainer, PieChart, Tooltip, Pie } 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 = ["data", "index", "category", "colors", "valueFormatter", "variant", "innerRadius", "outerRadius", "centerLabel", "height", "showLegend", "showTooltip", "animate", "title", "description", "emptyState", "accessibleTable", "className"];
 var DonutChart = /*#__PURE__*/React.forwardRef(function (_ref, ref) {

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

@@ -4,7 +4,8 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { ResponsiveContainer, AreaChart, LineChart, YAxis, Tooltip, 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 = ["data", "category", "index", "color", "type", "valueFormatter", "height", "showTooltip", "animate", "title", "description", "emptyState", "accessibleTable", "className"];
 /** A word-sized trend line: no axes, grid or legend — just the shape of the data. */

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

@@ -1,7 +1,6 @@
 'use client';
 import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { useSyncExternalStore, useId } from 'react';
-import { prefersReducedMotion } from '../../utils/position.js';
 
 var CHART_PALETTES = ["primary", "secondary", "success", "warning", "error", "info", "gray"];
 var DEFAULT_CHART_COLORS = ["primary", "success", "warning", "error", "info", "secondary", "gray"];
@@ -90,26 +89,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 useSyncExternalStore(subscribeReducedMotion, prefersReducedMotion, serverReducedMotion);
-}
 var defaultValueFormatter = function defaultValueFormatter(value) {
   return typeof value === "number" ? value.toLocaleString() : value == null ? "" : String(value);
 };
@@ -123,4 +102,4 @@ function useChartId() {
   return "dt-chart-".concat(useId().replace(/[^A-Za-z0-9_-]/g, ""));
 }
 
-export { CHART_PALETTES, DEFAULT_CHART_COLORS, defaultValueFormatter, resolveColor, seriesColors, tokenVar, useChartId, useChartTheme, useReducedMotion };
+export { CHART_PALETTES, DEFAULT_CHART_COLORS, defaultValueFormatter, resolveColor, seriesColors, tokenVar, useChartId, useChartTheme };

package/dist/esm/components/core/Button.js

@@ -26,15 +26,15 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var Component = as || (props.href !== undefined ? 'a' : 'button');
   var isNativeButton = Component === 'button';
   var isDisabled = disabled || loading;
-  var baseClasses = cn('inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:pointer-events-none', {
+  var baseClasses = cn('inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:pointer-events-none', {
     // Variants
-    'bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500': variant === 'primary',
-    'bg-secondary-100 text-secondary-900 hover:bg-secondary-200 focus:ring-secondary-500': variant === 'secondary',
-    'bg-transparent border border-gray-300 hover:bg-gray-50 focus:ring-primary-500 dark:border-gray-600 dark:text-gray-100 dark:hover:bg-gray-800 dark:focus:ring-offset-gray-900': variant === 'outline',
-    'bg-transparent text-primary-600 hover:bg-primary-50 focus:ring-primary-500': variant === 'ghost',
-    'bg-error-600 text-white hover:bg-error-700 focus:ring-error-500': variant === 'destructive',
-    'bg-success-600 text-white hover:bg-success-700 focus:ring-success-500': variant === 'success',
-    'bg-warning-600 text-white hover:bg-warning-700 focus:ring-warning-500': variant === 'warning',
+    'bg-primary-600 text-white hover:bg-primary-700 focus-visible:ring-primary-500': variant === 'primary',
+    'bg-secondary-100 text-secondary-900 hover:bg-secondary-200 focus-visible:ring-secondary-500': variant === 'secondary',
+    'bg-transparent border border-gray-300 hover:bg-gray-50 focus-visible:ring-primary-500 dark:border-gray-600 dark:text-gray-100 dark:hover:bg-gray-800 dark:focus-visible:ring-offset-gray-900': variant === 'outline',
+    'bg-transparent text-primary-600 hover:bg-primary-50 focus-visible:ring-primary-500': variant === 'ghost',
+    'bg-error-600 text-white hover:bg-error-700 focus-visible:ring-error-500': variant === 'destructive',
+    'bg-success-600 text-white hover:bg-success-700 focus-visible:ring-success-500': variant === 'success',
+    'bg-warning-600 text-white hover:bg-warning-700 focus-visible:ring-warning-500': variant === 'warning',
     // Sizes — every value of the shared `Size` type gets a real height.
     'h-7 px-2 text-xs': size === 'xs',
     'h-8 px-3 text-xs': size === 'sm',

package/dist/esm/components/core/Table/Table.js

@@ -8,7 +8,7 @@ import { Plus, RefreshCcw, Save, X, AlertCircle, Search, ChevronUp, ChevronDown,
 import Select from '../Select.js';
 import { DEFAULT_ACTIONS } from './constants.js';
 import { getRowKey, mergeDefaultActions } from './helpers.js';
-import { useClickOutside } from './useClickOutside.js';
+import { useClickOutside } from '../../../hooks/useClickOutside.js';
 import { PaginationHeader, PaginationFooter } from './Pagination.js';
 import ColumnMenu from './ColumnMenu.js';
 import MobileFilters from './MobileFilters.js';
@@ -524,8 +524,10 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
       });
     }
   }, []);
-  useClickOutside([tableContainerRef], interactive && Boolean(editingCell), function () {
-    setEditingCell(null);
+  useClickOutside([tableContainerRef], function () {
+    return setEditingCell(null);
+  }, {
+    enabled: interactive && Boolean(editingCell)
   });
   var actionButtonRefs = useRef({});
   // Row components register their kebab buttons through this callback rather
@@ -603,8 +605,12 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
   var closeActionMenu = useCallback(function () {
     return setActiveActionRowKey(null);
   }, []);
-  useClickOutside([columnMenuRef, columnToggleBtnRef], showColumnMenu, closeColumnMenu);
-  useClickOutside([actionMenuRef], activeActionRowKey !== null, closeActionMenu);
+  useClickOutside([columnMenuRef, columnToggleBtnRef], closeColumnMenu, {
+    enabled: showColumnMenu
+  });
+  useClickOutside([actionMenuRef], closeActionMenu, {
+    enabled: activeActionRowKey !== null
+  });
   // Computed values
   var activeAnchorEl = useMemo(function () {
     if (activeActionRowKey === null) return null;

package/dist/esm/hooks/useClickOutside.js

@@ -0,0 +1,51 @@
+'use client';
+import { useEffect } from 'react';
+import { useLatestRef } from './useLatestRef.js';
+
+// Internal (not exported). Calls `onClickOutside` when a press lands outside
+// every element in `refs`.
+/** Events to listen to: `pointerdown` where supported, else mouse + touch. */
+function outsidePressEvents() {
+  if (typeof window !== "undefined" && typeof window.PointerEvent === "function") {
+    return ["pointerdown"];
+  }
+  return ["mousedown", "touchstart"];
+}
+/**
+ * @param {React.RefObject|React.RefObject[]} refs - one ref or an array of
+ *   refs; a press inside any of them is "inside". Refs with no node are ignored.
+ * @param {(event: Event) => void} onClickOutside - called with the event.
+ * @param {{ enabled?: boolean }} [options] - `enabled` (default true) attaches
+ *   or detaches the listeners.
+ */
+function useClickOutside(refs, onClickOutside) {
+  var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+    _ref$enabled = _ref.enabled,
+    enabled = _ref$enabled === void 0 ? true : _ref$enabled;
+  var refsRef = useLatestRef(refs);
+  var handlerRef = useLatestRef(onClickOutside);
+  useEffect(function () {
+    if (!enabled || typeof document === "undefined") return undefined;
+    var handler = function handler(event) {
+      var _handlerRef$current;
+      var current = refsRef.current;
+      var list = Array.isArray(current) ? current : [current];
+      var inside = list.some(function (ref) {
+        var node = ref === null || ref === void 0 ? void 0 : ref.current;
+        return Boolean(node && typeof node.contains === "function" && node.contains(event.target));
+      });
+      if (!inside) (_handlerRef$current = handlerRef.current) === null || _handlerRef$current === void 0 || _handlerRef$current.call(handlerRef, event);
+    };
+    var events = outsidePressEvents();
+    events.forEach(function (type) {
+      return document.addEventListener(type, handler, true);
+    });
+    return function () {
+      return events.forEach(function (type) {
+        return document.removeEventListener(type, handler, true);
+      });
+    };
+  }, [enabled, refsRef, handlerRef]);
+}
+
+export { outsidePressEvents, useClickOutside };

package/dist/esm/hooks/useMediaQuery.js

@@ -0,0 +1,61 @@
+'use client';
+import { useCallback, useSyncExternalStore } from 'react';
+
+// 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 = 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 useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+
+export { subscribeMediaQuery, useMediaQuery };

package/dist/esm/hooks/useReducedMotion.js

@@ -0,0 +1,17 @@
+import { useMediaQuery } from './useMediaQuery.js';
+
+// 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
+  });
+}
+
+export { REDUCED_MOTION_QUERY, useReducedMotion };

package/dist/esm/hooks/useScrollLock.js

@@ -3,24 +3,91 @@ import { useEffect } from 'react';
 
 // Internal (not exported). Locks body scroll while any overlay is open. A
 // counter lets two overlays (e.g. a Drawer and a Tour) overlap without the
-// first one to close unlocking the page under the second.
+// first one to close unlocking the page under the second: only the outermost
+// lock touches the body, and only the last release restores it.
+//
+// While locked it also
+//   - pads the body by the scrollbar width, so the page does not shift when the
+//     scrollbar disappears;
+//   - on iOS (or with `{ fixedBody: true }`) pins the body with
+//     `position: fixed; top: -scrollY; width: 100%`, because iOS Safari ignores
+//     `overflow: hidden` on the body, and restores the scroll position after.
 var lock = {
   count: 0,
-  previous: ""
+  saved: null
 };
+/** iPhone / iPod / iPad, including iPadOS 13+ which reports itself as a Mac. */
+function isIOS() {
+  if (typeof navigator === "undefined") return false;
+  var platform = navigator.platform || "";
+  if (/iP(hone|od|ad)/.test(platform)) return true;
+  return platform === "MacIntel" && Number(navigator.maxTouchPoints) > 1;
+}
+function scrollbarWidth() {
+  var docWidth = document.documentElement.clientWidth;
+  // jsdom (and detached documents) report 0; treat as "no scrollbar".
+  if (!docWidth) return 0;
+  return Math.max(0, window.innerWidth - docWidth);
+}
+function acquire(fixedBody) {
+  var _document = document,
+    body = _document.body;
+  var style = body.style;
+  var saved = {
+    overflow: style.overflow,
+    paddingRight: style.paddingRight,
+    fixed: fixedBody
+  };
+  var gap = scrollbarWidth();
+  if (gap > 0) {
+    var current = parseFloat(window.getComputedStyle(body).paddingRight) || 0;
+    style.paddingRight = "".concat(current + gap, "px");
+  }
+  if (fixedBody) {
+    saved.position = style.position;
+    saved.top = style.top;
+    saved.width = style.width;
+    saved.scrollX = window.scrollX || window.pageXOffset || 0;
+    saved.scrollY = window.scrollY || window.pageYOffset || 0;
+    style.position = "fixed";
+    style.top = "-".concat(saved.scrollY, "px");
+    style.width = "100%";
+  }
+  style.overflow = "hidden";
+  lock.saved = saved;
+}
+function release() {
+  var saved = lock.saved;
+  lock.saved = null;
+  if (!saved) return;
+  var style = document.body.style;
+  style.overflow = saved.overflow;
+  style.paddingRight = saved.paddingRight;
+  if (saved.fixed) {
+    style.position = saved.position;
+    style.top = saved.top;
+    style.width = saved.width;
+    if (typeof window.scrollTo === "function") window.scrollTo(saved.scrollX, saved.scrollY);
+  }
+}
+/**
+ * @param {boolean} active - hold the lock while true.
+ * @param {{ fixedBody?: boolean }} [options] - force the iOS-safe
+ *   `position: fixed` mode; defaults to auto-detecting iOS. Only the outermost
+ *   lock's mode applies.
+ */
 function useScrollLock(active) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    fixedBody = _ref.fixedBody;
   useEffect(function () {
     if (!active || typeof document === "undefined") return undefined;
-    if (lock.count === 0) {
-      lock.previous = document.body.style.overflow;
-      document.body.style.overflow = "hidden";
-    }
+    if (lock.count === 0) acquire(fixedBody === undefined ? isIOS() : Boolean(fixedBody));
     lock.count += 1;
     return function () {
       lock.count -= 1;
-      if (lock.count === 0) document.body.style.overflow = lock.previous;
+      if (lock.count === 0) release();
     };
-  }, [active]);
+  }, [active, fixedBody]);
 }
 
-export { useScrollLock };
+export { isIOS, useScrollLock };