@dreamtree-org/twreact-ui 1.3.8 → 1.3.9

package/dist/index.js

@@ -3472,15 +3472,15 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var Component = as || (props.href !== undefined ? 'a' : 'button');
   var isNativeButton = Component === 'button';
   var isDisabled = disabled || loading;
-  var baseClasses = cn$1('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$1('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',
@@ -4975,26 +4975,50 @@ var resolveActions = function resolveActions(actions, row, index) {
   };
 };
 
+// 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"];
+}
 /**
- * Custom hook to detect clicks outside of specified refs
- * @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 {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, isActive, onClickOutside) {
+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);
   React.useEffect(function () {
-    if (!isActive) return;
-    var handler = function handler(e) {
-      var isOutside = refs.every(function (ref) {
-        return !ref.current || !ref.current.contains(e.target);
+    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 (isOutside) onClickOutside();
+      if (!inside) (_handlerRef$current = handlerRef.current) === null || _handlerRef$current === void 0 || _handlerRef$current.call(handlerRef, event);
     };
-    document.addEventListener("mousedown", handler, true);
+    var events = outsidePressEvents();
+    events.forEach(function (type) {
+      return document.addEventListener(type, handler, true);
+    });
     return function () {
-      return document.removeEventListener("mousedown", handler, true);
+      return events.forEach(function (type) {
+        return document.removeEventListener(type, handler, true);
+      });
     };
-  }, [refs, isActive, onClickOutside]);
+  }, [enabled, refsRef, handlerRef]);
 }
 
 /**
@@ -6595,8 +6619,10 @@ var Table = /*#__PURE__*/React.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 = React.useRef({});
   // Row components register their kebab buttons through this callback rather
@@ -6674,8 +6700,12 @@ var Table = /*#__PURE__*/React.forwardRef(function Table(_ref, ref) {
   var closeActionMenu = React.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 = React.useMemo(function () {
     if (activeActionRowKey === null) return null;
@@ -18997,6 +19027,12 @@ var TextToSpeech = function TextToSpeech(_ref) {
   });
 };
 
+/**
+ * @deprecated Use `useFloatingPosition` (src/hooks/useFloatingPosition.js,
+ * built on @floating-ui/react-dom) for new overlays. This module stays until
+ * Popover and Tour migrate; `prefersReducedMotion` / `revealElement` remain
+ * in use elsewhere.
+ */
 // Internal (not exported). Viewport-space positioning shared by Popover and Tour.
 // All rects are getBoundingClientRect() values, so the result is for
 // `position: fixed`.
@@ -21676,24 +21712,91 @@ Alert.displayName = 'Alert';
 
 // 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;
   React.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]);
 }
 
 // Internal (not exported). Drag-down-to-dismiss for a bottom sheet. Spread
@@ -23917,7 +24020,12 @@ var ThemeProvider = function ThemeProvider(_ref) {
   }, []);
   React.useEffect(function () {
     localStorage.setItem('dreamtree-theme', theme);
-    document.documentElement.setAttribute('data-theme', theme);
+    var root = document.documentElement;
+    root.setAttribute('data-theme', theme);
+    // `.dark` drives Tailwind `dark:` utilities in consumer apps configured with
+    // `darkMode: 'class'`; color-scheme flips native scrollbars and form controls.
+    root.classList.toggle('dark', theme === 'dark');
+    root.style.colorScheme = theme;
   }, [theme]);
   var toggleTheme = function toggleTheme() {
     setTheme(function (prev) {

package/dist/tokens/tailwind3-preset.cjs

@@ -188,7 +188,8 @@ const vars = {
     "--dt-line": "226 232 240",
     "--dt-shell": "15 23 42",
     "--dt-shell-foreground": "203 213 225",
-    "--dt-shell-active": "30 41 59"
+    "--dt-shell-active": "30 41 59",
+    "--dt-shadow-strength": "1"
   },
   "dark": {
     "--dt-background": "11 17 32",
@@ -198,17 +199,109 @@ const vars = {
     "--dt-line": "31 41 55",
     "--dt-shell": "2 6 23",
     "--dt-shell-foreground": "203 213 225",
-    "--dt-shell-active": "30 41 59"
+    "--dt-shell-active": "30 41 59",
+    "--dt-shadow-strength": "2.5"
+  }
+};
+const theme = {
+  "fontSize": {
+    "micro": [
+      "0.6875rem",
+      {
+        "lineHeight": "1rem"
+      }
+    ],
+    "page-title": [
+      "1.5rem",
+      {
+        "lineHeight": "2rem",
+        "fontWeight": "600"
+      }
+    ],
+    "section-title": [
+      "1rem",
+      {
+        "lineHeight": "1.5rem",
+        "fontWeight": "600"
+      }
+    ],
+    "body": [
+      "0.875rem",
+      {
+        "lineHeight": "1.25rem"
+      }
+    ],
+    "caption": [
+      "0.75rem",
+      {
+        "lineHeight": "1rem"
+      }
+    ],
+    "kpi": [
+      "1.875rem",
+      {
+        "lineHeight": "2.25rem",
+        "fontWeight": "600"
+      }
+    ]
+  },
+  "fontFamily": {
+    "sans": [
+      "Inter",
+      "system-ui",
+      "-apple-system",
+      "Segoe UI",
+      "Roboto",
+      "Arial",
+      "sans-serif"
+    ],
+    "mono": [
+      "JetBrains Mono",
+      "ui-monospace",
+      "SFMono-Regular",
+      "Menlo",
+      "monospace"
+    ]
+  },
+  "borderRadius": {
+    "control": "0.5rem",
+    "card": "0.75rem",
+    "sheet": "1rem",
+    "pill": "9999px"
+  },
+  "boxShadow": {
+    "xs": "0 1px 2px 0 rgb(0 0 0 / calc(0.04 * var(--dt-shadow-strength, 1)))",
+    "sm": "0 1px 2px 0 rgb(0 0 0 / calc(0.05 * var(--dt-shadow-strength, 1)))",
+    "DEFAULT": "0 1px 3px 0 rgb(0 0 0 / calc(0.1 * var(--dt-shadow-strength, 1))), 0 1px 2px -1px rgb(0 0 0 / calc(0.1 * var(--dt-shadow-strength, 1)))",
+    "md": "0 4px 6px -1px rgb(0 0 0 / calc(0.1 * var(--dt-shadow-strength, 1))), 0 2px 4px -2px rgb(0 0 0 / calc(0.1 * var(--dt-shadow-strength, 1)))",
+    "lg": "0 10px 15px -3px rgb(0 0 0 / calc(0.1 * var(--dt-shadow-strength, 1))), 0 4px 6px -4px rgb(0 0 0 / calc(0.1 * var(--dt-shadow-strength, 1)))",
+    "xl": "0 20px 25px -5px rgb(0 0 0 / calc(0.1 * var(--dt-shadow-strength, 1))), 0 8px 10px -6px rgb(0 0 0 / calc(0.1 * var(--dt-shadow-strength, 1)))",
+    "overlay": "0 24px 48px -12px rgb(0 0 0 / calc(0.25 * var(--dt-shadow-strength, 1)))"
+  },
+  "zIndex": {
+    "base": "0",
+    "sticky": "20",
+    "dropdown": "30",
+    "overlay": "40",
+    "modal": "50",
+    "popover": "60",
+    "toast": "70",
+    "tooltip": "80"
+  },
+  "transitionDuration": {
+    "fast": "120ms",
+    "base": "200ms",
+    "slow": "320ms"
+  },
+  "transitionTimingFunction": {
+    "standard": "cubic-bezier(0.2, 0, 0, 1)",
+    "emphasized": "cubic-bezier(0.05, 0.7, 0.1, 1)",
+    "spring-out": "cubic-bezier(0.34, 1.56, 0.64, 1)"
   }
 };
 module.exports = {
   theme: {
-    extend: {
-      colors,
-      fontSize: { micro: ['0.6875rem', { lineHeight: '1rem' }] },
-      borderRadius: { control: '0.5rem', card: '0.75rem' },
-      fontFamily: { sans: ["Inter","system-ui","-apple-system","Segoe UI","Roboto","Arial","sans-serif"], mono: ["JetBrains Mono","ui-monospace","SFMono-Regular","Menlo","monospace"] },
-    },
+    extend: { colors, ...theme },
   },
   plugins: [plugin(({ addBase }) => addBase({ ':root': vars.light, ".dark, [data-theme=\"dark\"]": vars.dark }))],
 };

package/dist/tokens/theme.css

@@ -85,6 +85,7 @@
   --dt-shell: 15 23 42;
   --dt-shell-foreground: 203 213 225;
   --dt-shell-active: 30 41 59;
+  --dt-shadow-strength: 1;
 }
 
 .dark, [data-theme="dark"] {
@@ -96,6 +97,7 @@
   --dt-shell: 2 6 23;
   --dt-shell-foreground: 203 213 225;
   --dt-shell-active: 30 41 59;
+  --dt-shadow-strength: 2.5;
 }
 
 @theme inline {
@@ -188,6 +190,31 @@
   --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
   --text-micro: 0.6875rem;
   --text-micro--line-height: 1rem;
+  --text-page-title: 1.5rem;
+  --text-page-title--line-height: 2rem;
+  --text-page-title--font-weight: 600;
+  --text-section-title: 1rem;
+  --text-section-title--line-height: 1.5rem;
+  --text-section-title--font-weight: 600;
+  --text-body: 0.875rem;
+  --text-body--line-height: 1.25rem;
+  --text-caption: 0.75rem;
+  --text-caption--line-height: 1rem;
+  --text-kpi: 1.875rem;
+  --text-kpi--line-height: 2.25rem;
+  --text-kpi--font-weight: 600;
   --radius-control: 0.5rem;
   --radius-card: 0.75rem;
+  --radius-sheet: 1rem;
+  --radius-pill: 9999px;
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / calc(0.04 * var(--dt-shadow-strength, 1)));
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / calc(0.05 * var(--dt-shadow-strength, 1)));
+  --shadow: 0 1px 3px 0 rgb(0 0 0 / calc(0.1 * var(--dt-shadow-strength, 1))), 0 1px 2px -1px rgb(0 0 0 / calc(0.1 * var(--dt-shadow-strength, 1)));
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / calc(0.1 * var(--dt-shadow-strength, 1))), 0 2px 4px -2px rgb(0 0 0 / calc(0.1 * var(--dt-shadow-strength, 1)));
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / calc(0.1 * var(--dt-shadow-strength, 1))), 0 4px 6px -4px rgb(0 0 0 / calc(0.1 * var(--dt-shadow-strength, 1)));
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / calc(0.1 * var(--dt-shadow-strength, 1))), 0 8px 10px -6px rgb(0 0 0 / calc(0.1 * var(--dt-shadow-strength, 1)));
+  --shadow-overlay: 0 24px 48px -12px rgb(0 0 0 / calc(0.25 * var(--dt-shadow-strength, 1)));
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
+  --ease-spring-out: cubic-bezier(0.34, 1.56, 0.64, 1);
 }

package/dist/tokens/tokens.json

@@ -350,6 +350,59 @@
         "$extensions": {
           "org.dreamtree.lineHeight": "1rem"
         }
+      },
+      "page-title": {
+        "$value": {
+          "value": 1.5,
+          "unit": "rem"
+        },
+        "$extensions": {
+          "org.dreamtree.lineHeight": "2rem",
+          "org.dreamtree.fontWeight": "600"
+        },
+        "$description": "The page h1, inside PageHeader."
+      },
+      "section-title": {
+        "$value": {
+          "value": 1,
+          "unit": "rem"
+        },
+        "$extensions": {
+          "org.dreamtree.lineHeight": "1.5rem",
+          "org.dreamtree.fontWeight": "600"
+        },
+        "$description": "Card and section headings."
+      },
+      "body": {
+        "$value": {
+          "value": 0.875,
+          "unit": "rem"
+        },
+        "$extensions": {
+          "org.dreamtree.lineHeight": "1.25rem"
+        },
+        "$description": "Default UI text."
+      },
+      "caption": {
+        "$value": {
+          "value": 0.75,
+          "unit": "rem"
+        },
+        "$extensions": {
+          "org.dreamtree.lineHeight": "1rem"
+        },
+        "$description": "Secondary text, with text-muted."
+      },
+      "kpi": {
+        "$value": {
+          "value": 1.875,
+          "unit": "rem"
+        },
+        "$extensions": {
+          "org.dreamtree.lineHeight": "2.25rem",
+          "org.dreamtree.fontWeight": "600"
+        },
+        "$description": "StatCard values; pair with tabular-nums."
       }
     }
   },
@@ -368,6 +421,128 @@
         "unit": "rem"
       },
       "$description": "Cards and dialogs."
+    },
+    "sheet": {
+      "$value": {
+        "value": 1,
+        "unit": "rem"
+      },
+      "$description": "Top corners of bottom sheets."
+    },
+    "pill": {
+      "$value": {
+        "value": 9999,
+        "unit": "px"
+      },
+      "$description": "Pills, badges, segmented controls."
+    }
+  },
+  "shadow": {
+    "$type": "shadow",
+    "$description": "Elevation, as CSS box-shadow. Light values equal Tailwind's defaults; --dt-shadow-strength deepens them in dark mode, where a 10% black shadow disappears.",
+    "xs": {
+      "$value": "0 1px 2px 0 rgb(0 0 0 / calc(0.04 * var(--dt-shadow-strength, 1)))"
+    },
+    "sm": {
+      "$value": "0 1px 2px 0 rgb(0 0 0 / calc(0.05 * var(--dt-shadow-strength, 1)))"
+    },
+    "DEFAULT": {
+      "$value": "0 1px 3px 0 rgb(0 0 0 / calc(0.1 * var(--dt-shadow-strength, 1))), 0 1px 2px -1px rgb(0 0 0 / calc(0.1 * var(--dt-shadow-strength, 1)))"
+    },
+    "md": {
+      "$value": "0 4px 6px -1px rgb(0 0 0 / calc(0.1 * var(--dt-shadow-strength, 1))), 0 2px 4px -2px rgb(0 0 0 / calc(0.1 * var(--dt-shadow-strength, 1)))"
+    },
+    "lg": {
+      "$value": "0 10px 15px -3px rgb(0 0 0 / calc(0.1 * var(--dt-shadow-strength, 1))), 0 4px 6px -4px rgb(0 0 0 / calc(0.1 * var(--dt-shadow-strength, 1)))"
+    },
+    "xl": {
+      "$value": "0 20px 25px -5px rgb(0 0 0 / calc(0.1 * var(--dt-shadow-strength, 1))), 0 8px 10px -6px rgb(0 0 0 / calc(0.1 * var(--dt-shadow-strength, 1)))"
+    },
+    "overlay": {
+      "$value": "0 24px 48px -12px rgb(0 0 0 / calc(0.25 * var(--dt-shadow-strength, 1)))",
+      "$description": "Dialogs, sheets, popovers and menus."
+    }
+  },
+  "zIndex": {
+    "$type": "number",
+    "$description": "Stacking layers, lowest to highest. Use z-<layer>, never z-50 or an inline zIndex.",
+    "base": {
+      "$value": 0
+    },
+    "sticky": {
+      "$value": 20
+    },
+    "dropdown": {
+      "$value": 30
+    },
+    "overlay": {
+      "$value": 40
+    },
+    "modal": {
+      "$value": 50
+    },
+    "popover": {
+      "$value": 60
+    },
+    "toast": {
+      "$value": 70
+    },
+    "tooltip": {
+      "$value": 80
+    }
+  },
+  "duration": {
+    "$type": "duration",
+    "fast": {
+      "$value": {
+        "value": 120,
+        "unit": "ms"
+      },
+      "$description": "Hover, press, small fades."
+    },
+    "base": {
+      "$value": {
+        "value": 200,
+        "unit": "ms"
+      },
+      "$description": "Most enter transitions."
+    },
+    "slow": {
+      "$value": {
+        "value": 320,
+        "unit": "ms"
+      },
+      "$description": "Sheets, drawers, large surfaces."
+    }
+  },
+  "easing": {
+    "$type": "cubicBezier",
+    "standard": {
+      "$value": [
+        0.2,
+        0,
+        0,
+        1
+      ],
+      "$description": "Default for moving and resizing."
+    },
+    "emphasized": {
+      "$value": [
+        0.05,
+        0.7,
+        0.1,
+        1
+      ],
+      "$description": "Entering surfaces (decelerate)."
+    },
+    "spring-out": {
+      "$value": [
+        0.34,
+        1.56,
+        0.64,
+        1
+      ],
+      "$description": "Small overshoot for sheets settling and toggles."
     }
   }
 }

package/dist/tokens/vars.css

@@ -84,6 +84,7 @@
   --dt-shell: 15 23 42;
   --dt-shell-foreground: 203 213 225;
   --dt-shell-active: 30 41 59;
+  --dt-shadow-strength: 1;
 }
 
 .dark, [data-theme="dark"] {
@@ -95,4 +96,5 @@
   --dt-shell: 2 6 23;
   --dt-shell-foreground: 203 213 225;
   --dt-shell-active: 30 41 59;
+  --dt-shadow-strength: 2.5;
 }

package/dist/utils/position.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["../../src/utils/position.js"],"names":[],"mappings":"AAMA;;;EAGC;AAwBD;;;;GAIG;AACH;;;;;;;;;EAkBC;AAED,4DAA4D;AAC5D,gDAGC;AAYD;;;;GAIG;AACH,6CAgBC;AAED,iEAAiE;AACjE,yDAMC"}
+{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["../../src/utils/position.js"],"names":[],"mappings":"AAaA;;;EAGC;AAwBD;;;;GAIG;AACH;;;;;;;;;EAkBC;AAED,4DAA4D;AAC5D,gDAGC;AAYD;;;;GAIG;AACH,6CAgBC;AAED,iEAAiE;AACjE,yDAMC"}

package/dist/utils/touchTarget.d.ts

@@ -1,2 +1,3 @@
 export const TOUCH_TARGET: "[@media(pointer:coarse)]:min-h-11 [@media(pointer:coarse)]:min-w-11";
+export const PRESS_FEEDBACK: "active:scale-[0.97] motion-reduce:active:scale-100 transition-transform duration-fast";
 //# sourceMappingURL=touchTarget.d.ts.map

package/dist/utils/touchTarget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"touchTarget.d.ts","sourceRoot":"","sources":["../../src/utils/touchTarget.js"],"names":[],"mappings":"AAGA,2BACE,qEAAqE,CAAC"}
+{"version":3,"file":"touchTarget.d.ts","sourceRoot":"","sources":["../../src/utils/touchTarget.js"],"names":[],"mappings":"AAGA,2BACE,qEAAqE,CAAC;AAIxE,6BACE,uFAAuF,CAAC"}