@dreamtree-org/twreact-ui 1.3.8 → 1.3.10

package/dist/esm/hooks/useFocusTrap.js

@@ -3,8 +3,7 @@ import { useEffect } from 'react';
 import { useLatestRef } from './useLatestRef.js';
 
 // Internal (not exported from the package). Shared focus management for the
-// overlay primitives (Drawer, Popover, Tour). Dialog keeps its own copy so its
-// behavior is untouched.
+// overlay primitives (Drawer, Dialog, Popover, Tour, Sidebar, AppShell).
 var FOCUSABLE_SELECTOR = ["a[href]", "button:not([disabled])", "textarea:not([disabled])", "input:not([disabled])", "select:not([disabled])", '[tabindex]:not([tabindex="-1"])'].join(",");
 var getFocusable = function getFocusable(root) {
   return root ? Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR)).filter(function (el) {
@@ -17,7 +16,16 @@ var layerStack = [];
 var isTopLayer = function isTopLayer(token) {
   return layerStack[layerStack.length - 1] === token;
 };
+// A responsive drawer (Sidebar's `md:hidden`, AppShell's `lg:hidden`) can be
+// "open" while CSS hides it on wide viewports; there is nothing to trap then.
+var isDisplayNone = function isDisplayNone(el) {
+  for (var node = el; node && node.nodeType === 1; node = node.parentElement) {
+    if (window.getComputedStyle(node).display === "none") return true;
+  }
+  return false;
+};
 function cycleFocus(e, panel) {
+  if (isDisplayNone(panel)) return;
   var focusables = getFocusable(panel);
   if (focusables.length === 0) {
     e.preventDefault();

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 };

package/dist/esm/hooks/useTheme.js

@@ -30,7 +30,12 @@ var ThemeProvider = function ThemeProvider(_ref) {
   }, []);
   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/esm/utils/position.js

@@ -1,5 +1,11 @@
 import { slicedToArray as _slicedToArray } from '../_virtual/_rollupPluginBabelHelpers.js';
 
+/**
+ * @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`.

package/dist/hooks/useClickOutside.d.ts

@@ -0,0 +1,14 @@
+/** Events to listen to: `pointerdown` where supported, else mouse + touch. */
+export function outsidePressEvents(): string[];
+/**
+ * @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.
+ */
+export function useClickOutside(refs: import("react").RefObject<any> | import("react").RefObject<any>[], onClickOutside: (event: Event) => void, { enabled }?: {
+    enabled?: boolean;
+}): void;
+export default useClickOutside;
+//# sourceMappingURL=useClickOutside.d.ts.map

package/dist/hooks/useClickOutside.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClickOutside.d.ts","sourceRoot":"","sources":["../../src/hooks/useClickOutside.js"],"names":[],"mappings":"AAMA,8EAA8E;AAC9E,+CAKC;AAED;;;;;;GAMG;AACH,sCANW,iCAAgB,gCAAiB,kBAEjC,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,gBACtB;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,QAwB/B"}

package/dist/hooks/useFloatingPosition.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Positions a floating element next to a reference element.
+ *
+ * @param {object} [options]
+ * @param {import('@floating-ui/react-dom').Placement} [options.placement='bottom-start']
+ * @param {number} [options.offset=4] - gap in px between reference and floating.
+ * @param {boolean} [options.flip=true] - flip to the opposite side when out of room.
+ * @param {boolean} [options.shift=true] - slide along the axis to stay in view (8px padding).
+ * @param {boolean} [options.matchWidth=false] - set the floating element's
+ *   min-width to the reference's width (listboxes, comboboxes).
+ * @param {'fixed'|'absolute'} [options.strategy='fixed']
+ * @param {boolean} [options.open] - while false, auto-updates are paused.
+ * @returns {{ refs: { setReference: Function, setFloating: Function, reference: object, floating: object },
+ *   floatingStyles: object, placement: string, isPositioned: boolean, update: () => void }}
+ */
+export function useFloatingPosition({ placement, offset, flip, shift, matchWidth, strategy, open, }?: {
+    placement?: import("@floating-ui/utils").Placement | undefined;
+    offset?: number | undefined;
+    flip?: boolean | undefined;
+    shift?: boolean | undefined;
+    matchWidth?: boolean | undefined;
+    strategy?: "fixed" | "absolute" | undefined;
+    open?: boolean | undefined;
+}): {
+    refs: {
+        setReference: Function;
+        setFloating: Function;
+        reference: object;
+        floating: object;
+    };
+    floatingStyles: object;
+    placement: string;
+    isPositioned: boolean;
+    update: () => void;
+};
+export default useFloatingPosition;
+//# sourceMappingURL=useFloatingPosition.d.ts.map

package/dist/hooks/useFloatingPosition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFloatingPosition.d.ts","sourceRoot":"","sources":["../../src/hooks/useFloatingPosition.js"],"names":[],"mappings":"AAeA;;;;;;;;;;;;;;GAcG;AACH,sGAXG;IAA6D,SAAS;IAC7C,MAAM;IACL,IAAI;IACJ,KAAK;IACL,UAAU;IAEC,QAAQ;IACnB,IAAI;CAC9B,GAAU;IAAE,IAAI,EAAE;QAAE,YAAY,WAAW;QAAC,WAAW,WAAW;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IACvG,cAAc,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,MAAM,IAAI,CAAA;CAAE,CAuC1F"}

package/dist/hooks/useFocusTrap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.js"],"names":[],"mappings":"AAgDA;;;;GAIG;AACH;;;;;;SAmCC;AAjFD,wCAOY;AAEL,+CAKC"}
+{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.js"],"names":[],"mappings":"AAyDA;;;;GAIG;AACH;;;;;;SAmCC;AA3FD,wCAOY;AAEL,+CAKC"}

package/dist/hooks/useMediaQuery.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 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.
+ */
+export function subscribeMediaQuery(query: any, onChange: any): () => void;
+/**
+ * `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}
+ */
+export function useMediaQuery(query: string, { defaultValue }?: {
+    defaultValue?: boolean;
+}): boolean;
+export default useMediaQuery;
+//# sourceMappingURL=useMediaQuery.d.ts.map

package/dist/hooks/useMediaQuery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../src/hooks/useMediaQuery.js"],"names":[],"mappings":"AASA;;;;GAIG;AACH,2EAYC;AAED;;;;;;;;;;GAUG;AACH,qCAJW,MAAM,qBACN;IAAE,YAAY,CAAC,EAAE,OAAO,CAAA;CAAE,GACxB,OAAO,CAUnB"}

package/dist/hooks/usePresence.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @param {boolean} open - whether the overlay should be shown.
+ * @param {{ duration?: number }} [options] - transition length in ms (default
+ *   200). Forced to 0 when the user prefers reduced motion.
+ * @returns {{ mounted: boolean, state: 'entering'|'open'|'exiting'|'closed' }}
+ *   `mounted` stays true through 'exiting' and turns false once `duration`
+ *   has elapsed after `open` became false.
+ */
+export function usePresence(open: boolean, { duration }?: {
+    duration?: number;
+}): {
+    mounted: boolean;
+    state: "entering" | "open" | "exiting" | "closed";
+};
+export default usePresence;
+//# sourceMappingURL=usePresence.d.ts.map

package/dist/hooks/usePresence.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePresence.d.ts","sourceRoot":"","sources":["../../src/hooks/usePresence.js"],"names":[],"mappings":"AAMA;;;;;;;GAOG;AACH,kCAPW,OAAO,iBACP;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,GAEnB;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,UAAU,GAAC,MAAM,GAAC,SAAS,GAAC,QAAQ,CAAA;CAAE,CAgC7E"}

package/dist/hooks/usePresentation.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @param {'auto'|'sheet'|'popover'} [prop='auto'] - an explicit 'sheet' or
+ *   'popover' passes through; 'auto' resolves from SHEET_MEDIA_QUERY.
+ * @returns {'sheet'|'popover'} - 'popover' on the server and while hydrating.
+ */
+export function usePresentation(prop?: "auto" | "sheet" | "popover"): "sheet" | "popover";
+export const SHEET_MEDIA_QUERY: "(pointer: coarse) and (max-width: 639px)";
+export default usePresentation;
+//# sourceMappingURL=usePresentation.d.ts.map

package/dist/hooks/usePresentation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePresentation.d.ts","sourceRoot":"","sources":["../../src/hooks/usePresentation.js"],"names":[],"mappings":"AAOA;;;;GAIG;AACH,uCAJW,MAAM,GAAC,OAAO,GAAC,SAAS,GAEtB,OAAO,GAAC,SAAS,CAO7B;AAZD,gCAAiC,0CAA0C,CAAC"}

package/dist/hooks/useReducedMotion.d.ts

@@ -0,0 +1,10 @@
+/**
+ * `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}
+ */
+export function useReducedMotion(): boolean;
+export const REDUCED_MOTION_QUERY: "(prefers-reduced-motion: reduce)";
+export default useReducedMotion;
+//# sourceMappingURL=useReducedMotion.d.ts.map

package/dist/hooks/useReducedMotion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReducedMotion.d.ts","sourceRoot":"","sources":["../../src/hooks/useReducedMotion.js"],"names":[],"mappings":"AAMA;;;;;GAKG;AACH,oCAFa,OAAO,CAInB;AAVD,mCAAoC,kCAAkC,CAAC"}

package/dist/hooks/useScrollLock.d.ts

@@ -1,2 +1,12 @@
-export function useScrollLock(active: any): void;
+/** iPhone / iPod / iPad, including iPadOS 13+ which reports itself as a Mac. */
+export function isIOS(): boolean;
+/**
+ * @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.
+ */
+export function useScrollLock(active: boolean, { fixedBody }?: {
+    fixedBody?: boolean;
+}): void;
 //# sourceMappingURL=useScrollLock.d.ts.map

package/dist/hooks/useScrollLock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollLock.d.ts","sourceRoot":"","sources":["../../src/hooks/useScrollLock.js"],"names":[],"mappings":"AAOA,iDAaC"}
+{"version":3,"file":"useScrollLock.d.ts","sourceRoot":"","sources":["../../src/hooks/useScrollLock.js"],"names":[],"mappings":"AAeA,gFAAgF;AAChF,iCAKC;AAsDD;;;;;GAKG;AACH,sCALW,OAAO,kBACP;IAAE,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,QAcjC"}

package/dist/hooks/useTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useTheme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAkD,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzF,KAAK,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;AAE9B,UAAU,iBAAiB;IACzB,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;CAClB;AAID,eAAO,MAAM,QAAQ,QAAO,iBAM3B,CAAC;AAEF,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,KAAK,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsCtD,CAAC"}
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useTheme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAkD,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzF,KAAK,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;AAE9B,UAAU,iBAAiB;IACzB,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;CAClB;AAID,eAAO,MAAM,QAAQ,QAAO,iBAM3B,CAAC;AAEF,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,KAAK,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA2CtD,CAAC"}