@dreamtree-org/twreact-ui 2.1.1 → 2.2.0

package/dist/index.esm.js

@@ -8963,7 +8963,7 @@ function MobileFilters(_ref5) {
           });
         },
         "aria-expanded": !!showMobileFilters,
-        className: "text-xs font-medium text-primary-700",
+        className: "text-xs font-medium text-primary-700 dark:text-primary-300",
         children: showMobileFilters ? "Hide" : "Show"
       })]
     }), showMobileFilters && jsxs("div", {
@@ -10531,10 +10531,10 @@ function MobileCard(_ref) {
         return jsxs("div", {
           className: cn("flex justify-between items-center flex-row py-2 border-b last:border-b-0", safeExtraCellClass),
           children: [jsx("div", {
-            className: "text-xs font-medium text-primary-700 uppercase tracking-wide mb-1 sm:mb-0 sm:w-1/3 sm:pr-2",
+            className: "text-xs font-medium text-primary-700 dark:text-primary-300 uppercase tracking-wide mb-1 sm:mb-0 sm:w-1/3 sm:pr-2",
             children: column.label
           }), jsx("div", {
-            className: "text-sm text-primary-900 sm:w-2/3 sm:pl-2 break-words",
+            className: "text-sm text-primary-900 dark:text-foreground sm:w-2/3 sm:pl-2 break-words",
             children: renderCell(column, row, globalIndex)
           })]
         }, column.key);
@@ -10878,6 +10878,12 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
     _useState14 = _slicedToArray(_useState13, 2),
     filters = _useState14[0],
     setFilters = _useState14[1];
+  // The handlers below read and advance these refs synchronously, so they can
+  // call onSort / onFilter after setting state instead of inside a setState
+  // updater (updaters must be pure; React runs them during render and twice
+  // in StrictMode, #194). They are the only writers of sortConfig / filters.
+  var sortConfigRef = useRef(sortConfig);
+  var filtersRef = useRef(filters);
   var _useState15 = useState(""),
     _useState16 = _slicedToArray(_useState15, 2),
     searchInput = _useState16[0],
@@ -11633,34 +11639,30 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
   }, []);
   var handleSort = useCallback(function (key) {
     if (!sortable) return;
-    setSortConfig(function (prev) {
-      var direction = prev.key === key && prev.direction === "asc" ? "desc" : "asc";
-      onSort === null || onSort === void 0 || onSort(key, direction);
-      return {
-        key: key,
-        direction: direction
-      };
-    });
+    var prev = sortConfigRef.current;
+    var direction = prev.key === key && prev.direction === "asc" ? "desc" : "asc";
+    var next = {
+      key: key,
+      direction: direction
+    };
+    sortConfigRef.current = next;
+    setSortConfig(next);
+    onSort === null || onSort === void 0 || onSort(key, direction);
   }, [sortable, onSort]);
-  var handleFilter = useCallback(function (key, value) {
-    setFilters(function (prev) {
-      var newFilters = _objectSpread$16(_objectSpread$16({}, prev), {}, _defineProperty$4({}, key, value));
-      onFilter === null || onFilter === void 0 || onFilter(newFilters);
-      onFilterChange === null || onFilterChange === void 0 || onFilterChange(newFilters);
-      return newFilters;
-    });
+  var commitFilters = useCallback(function (newFilters) {
+    filtersRef.current = newFilters;
+    setFilters(newFilters);
     setCurrentPage(1);
+    onFilter === null || onFilter === void 0 || onFilter(newFilters);
+    onFilterChange === null || onFilterChange === void 0 || onFilterChange(newFilters);
   }, [onFilter, onFilterChange]);
+  var handleFilter = useCallback(function (key, value) {
+    return commitFilters(_objectSpread$16(_objectSpread$16({}, filtersRef.current), {}, _defineProperty$4({}, key, value)));
+  }, [commitFilters]);
   // Commits several filters at once (the phone filter sheet's Apply).
   var applyFilters = useCallback(function (patch) {
-    setFilters(function (prev) {
-      var newFilters = _objectSpread$16(_objectSpread$16({}, prev), patch);
-      onFilter === null || onFilter === void 0 || onFilter(newFilters);
-      onFilterChange === null || onFilterChange === void 0 || onFilterChange(newFilters);
-      return newFilters;
-    });
-    setCurrentPage(1);
-  }, [onFilter, onFilterChange]);
+    return commitFilters(_objectSpread$16(_objectSpread$16({}, filtersRef.current), patch));
+  }, [commitFilters]);
   // One open swipe row at a time: `{ key, side }`.
   var _useState37 = useState(null),
     _useState38 = _slicedToArray(_useState37, 2),
@@ -11897,7 +11899,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
       className: "bg-primary-50/40 hover:bg-primary-100/70 active:bg-primary-100 transition-colors border-t-2 border-b-2 border-dashed border-primary-300 cursor-pointer group",
       children: jsx("td", {
         colSpan: visibleCount,
-        className: "px-6 py-3.5 text-left text-sm font-semibold text-primary-700 group-hover:text-primary-800",
+        className: "px-6 py-3.5 text-left text-sm font-semibold text-primary-700 group-hover:text-primary-800 dark:text-primary-300 dark:group-hover:text-primary-200",
         children: jsxs("div", {
           className: "flex items-center justify-start gap-2",
           children: [jsx(Plus, {
@@ -12077,7 +12079,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
             children: [hasDetailsColumn && jsx("th", {
               className: "w-8 px-4 py-3"
             }), showSerial && jsx("th", {
-              className: "w-8 px-4 py-3 text-left text-xs font-medium text-primary-700 uppercase tracking-wider",
+              className: "w-8 px-4 py-3 text-left text-xs font-medium text-primary-700 dark:text-primary-300 uppercase tracking-wider",
               children: "#"
             }), selectable && jsx("th", {
               className: "w-12 px-6 py-3",
@@ -12104,7 +12106,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
               return jsx("th", {
                 scope: "col",
                 "aria-sort": ariaSort,
-                className: cn("px-6 py-3 text-left text-xs font-medium text-primary-700 uppercase tracking-wider", isSortable && "p-0"),
+                className: cn("px-6 py-3 text-left text-xs font-medium text-primary-700 dark:text-primary-300 uppercase tracking-wider", isSortable && "p-0"),
                 children: isSortable ? jsxs("button", {
                   type: "button",
                   onClick: function onClick() {
@@ -27214,8 +27216,11 @@ var Navbar = /*#__PURE__*/React__default.forwardRef(function (_ref3, ref) {
       })
     });
   };
-  // RightMenuContent: prefer prop if provided, else fallback
-  var RightMenuComponent = typeof RightMenuContentProp === "function" ? RightMenuContentProp : function (rest) {
+  // RightMenuContent: a render function or an element (#193), else the
+  // built-in notifications menu.
+  var RightMenuComponent = typeof RightMenuContentProp === "function" ? RightMenuContentProp : RightMenuContentProp != null ? function () {
+    return RightMenuContentProp;
+  } : function (rest) {
     return jsx(RightMenuContent, _objectSpread$C({
       emitter: emitter
     }, rest));

package/dist/index.js

@@ -8983,7 +8983,7 @@ function MobileFilters(_ref5) {
           });
         },
         "aria-expanded": !!showMobileFilters,
-        className: "text-xs font-medium text-primary-700",
+        className: "text-xs font-medium text-primary-700 dark:text-primary-300",
         children: showMobileFilters ? "Hide" : "Show"
       })]
     }), showMobileFilters && jsxRuntime.jsxs("div", {
@@ -10551,10 +10551,10 @@ function MobileCard(_ref) {
         return jsxRuntime.jsxs("div", {
           className: cn("flex justify-between items-center flex-row py-2 border-b last:border-b-0", safeExtraCellClass),
           children: [jsxRuntime.jsx("div", {
-            className: "text-xs font-medium text-primary-700 uppercase tracking-wide mb-1 sm:mb-0 sm:w-1/3 sm:pr-2",
+            className: "text-xs font-medium text-primary-700 dark:text-primary-300 uppercase tracking-wide mb-1 sm:mb-0 sm:w-1/3 sm:pr-2",
             children: column.label
           }), jsxRuntime.jsx("div", {
-            className: "text-sm text-primary-900 sm:w-2/3 sm:pl-2 break-words",
+            className: "text-sm text-primary-900 dark:text-foreground sm:w-2/3 sm:pl-2 break-words",
             children: renderCell(column, row, globalIndex)
           })]
         }, column.key);
@@ -10898,6 +10898,12 @@ var Table = /*#__PURE__*/React.forwardRef(function Table(_ref, ref) {
     _useState14 = _slicedToArray(_useState13, 2),
     filters = _useState14[0],
     setFilters = _useState14[1];
+  // The handlers below read and advance these refs synchronously, so they can
+  // call onSort / onFilter after setting state instead of inside a setState
+  // updater (updaters must be pure; React runs them during render and twice
+  // in StrictMode, #194). They are the only writers of sortConfig / filters.
+  var sortConfigRef = React.useRef(sortConfig);
+  var filtersRef = React.useRef(filters);
   var _useState15 = React.useState(""),
     _useState16 = _slicedToArray(_useState15, 2),
     searchInput = _useState16[0],
@@ -11653,34 +11659,30 @@ var Table = /*#__PURE__*/React.forwardRef(function Table(_ref, ref) {
   }, []);
   var handleSort = React.useCallback(function (key) {
     if (!sortable) return;
-    setSortConfig(function (prev) {
-      var direction = prev.key === key && prev.direction === "asc" ? "desc" : "asc";
-      onSort === null || onSort === void 0 || onSort(key, direction);
-      return {
-        key: key,
-        direction: direction
-      };
-    });
+    var prev = sortConfigRef.current;
+    var direction = prev.key === key && prev.direction === "asc" ? "desc" : "asc";
+    var next = {
+      key: key,
+      direction: direction
+    };
+    sortConfigRef.current = next;
+    setSortConfig(next);
+    onSort === null || onSort === void 0 || onSort(key, direction);
   }, [sortable, onSort]);
-  var handleFilter = React.useCallback(function (key, value) {
-    setFilters(function (prev) {
-      var newFilters = _objectSpread$16(_objectSpread$16({}, prev), {}, _defineProperty$4({}, key, value));
-      onFilter === null || onFilter === void 0 || onFilter(newFilters);
-      onFilterChange === null || onFilterChange === void 0 || onFilterChange(newFilters);
-      return newFilters;
-    });
+  var commitFilters = React.useCallback(function (newFilters) {
+    filtersRef.current = newFilters;
+    setFilters(newFilters);
     setCurrentPage(1);
+    onFilter === null || onFilter === void 0 || onFilter(newFilters);
+    onFilterChange === null || onFilterChange === void 0 || onFilterChange(newFilters);
   }, [onFilter, onFilterChange]);
+  var handleFilter = React.useCallback(function (key, value) {
+    return commitFilters(_objectSpread$16(_objectSpread$16({}, filtersRef.current), {}, _defineProperty$4({}, key, value)));
+  }, [commitFilters]);
   // Commits several filters at once (the phone filter sheet's Apply).
   var applyFilters = React.useCallback(function (patch) {
-    setFilters(function (prev) {
-      var newFilters = _objectSpread$16(_objectSpread$16({}, prev), patch);
-      onFilter === null || onFilter === void 0 || onFilter(newFilters);
-      onFilterChange === null || onFilterChange === void 0 || onFilterChange(newFilters);
-      return newFilters;
-    });
-    setCurrentPage(1);
-  }, [onFilter, onFilterChange]);
+    return commitFilters(_objectSpread$16(_objectSpread$16({}, filtersRef.current), patch));
+  }, [commitFilters]);
   // One open swipe row at a time: `{ key, side }`.
   var _useState37 = React.useState(null),
     _useState38 = _slicedToArray(_useState37, 2),
@@ -11917,7 +11919,7 @@ var Table = /*#__PURE__*/React.forwardRef(function Table(_ref, ref) {
       className: "bg-primary-50/40 hover:bg-primary-100/70 active:bg-primary-100 transition-colors border-t-2 border-b-2 border-dashed border-primary-300 cursor-pointer group",
       children: jsxRuntime.jsx("td", {
         colSpan: visibleCount,
-        className: "px-6 py-3.5 text-left text-sm font-semibold text-primary-700 group-hover:text-primary-800",
+        className: "px-6 py-3.5 text-left text-sm font-semibold text-primary-700 group-hover:text-primary-800 dark:text-primary-300 dark:group-hover:text-primary-200",
         children: jsxRuntime.jsxs("div", {
           className: "flex items-center justify-start gap-2",
           children: [jsxRuntime.jsx(Plus, {
@@ -12097,7 +12099,7 @@ var Table = /*#__PURE__*/React.forwardRef(function Table(_ref, ref) {
             children: [hasDetailsColumn && jsxRuntime.jsx("th", {
               className: "w-8 px-4 py-3"
             }), showSerial && jsxRuntime.jsx("th", {
-              className: "w-8 px-4 py-3 text-left text-xs font-medium text-primary-700 uppercase tracking-wider",
+              className: "w-8 px-4 py-3 text-left text-xs font-medium text-primary-700 dark:text-primary-300 uppercase tracking-wider",
               children: "#"
             }), selectable && jsxRuntime.jsx("th", {
               className: "w-12 px-6 py-3",
@@ -12124,7 +12126,7 @@ var Table = /*#__PURE__*/React.forwardRef(function Table(_ref, ref) {
               return jsxRuntime.jsx("th", {
                 scope: "col",
                 "aria-sort": ariaSort,
-                className: cn("px-6 py-3 text-left text-xs font-medium text-primary-700 uppercase tracking-wider", isSortable && "p-0"),
+                className: cn("px-6 py-3 text-left text-xs font-medium text-primary-700 dark:text-primary-300 uppercase tracking-wider", isSortable && "p-0"),
                 children: isSortable ? jsxRuntime.jsxs("button", {
                   type: "button",
                   onClick: function onClick() {
@@ -27234,8 +27236,11 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
       })
     });
   };
-  // RightMenuContent: prefer prop if provided, else fallback
-  var RightMenuComponent = typeof RightMenuContentProp === "function" ? RightMenuContentProp : function (rest) {
+  // RightMenuContent: a render function or an element (#193), else the
+  // built-in notifications menu.
+  var RightMenuComponent = typeof RightMenuContentProp === "function" ? RightMenuContentProp : RightMenuContentProp != null ? function () {
+    return RightMenuContentProp;
+  } : function (rest) {
     return jsxRuntime.jsx(RightMenuContent, _objectSpread$C({
       emitter: emitter
     }, rest));

package/dist/motion/engine/inView.d.ts

@@ -0,0 +1,5 @@
+export function observe(el: any, callback: any, { rootMargin, threshold }?: {
+    rootMargin?: string | undefined;
+    threshold?: number | undefined;
+}): () => void;
+//# sourceMappingURL=inView.d.ts.map

package/dist/motion/engine/inView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inView.d.ts","sourceRoot":"","sources":["../../../src/motion/engine/inView.js"],"names":[],"mappings":"AA2BA;;;eAkBC"}

package/dist/motion/engine/progress.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Scroll progress of an element.
+ *  - "view": 0 when its top meets the viewport bottom, 1 when its bottom leaves the viewport top.
+ *  - "pin":  0 when its top meets the viewport top, 1 when its bottom meets the viewport bottom
+ *            (the span a `position: sticky` child stays pinned).
+ * `start` / `end` narrow the range: progress is re-mapped from [start, end] to 0–1.
+ */
+export function computeProgress(top: any, height: any, viewport: any, { mode, start, end }?: {
+    mode?: string | undefined;
+    start?: number | undefined;
+    end?: number | undefined;
+}): any;
+export function clamp01(v: any): any;
+export function lerp(a: any, b: any, t: any): any;
+export function easeOut(t: any): number;
+export function easeInOut(t: any): number;
+export function segment(t: any, from: any, to: any): any;
+//# sourceMappingURL=progress.d.ts.map

package/dist/motion/engine/progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/motion/engine/progress.js"],"names":[],"mappings":"AAeA;;;;;;GAMG;AACH;;;;QASC;AA7BM,qCAAoD;AAEpD,kDAAyC;AAGzC,wCAA6C;AAG7C,0CAAoF;AAGpF,yDAAuE"}

package/dist/motion/engine/scheduler.d.ts

@@ -0,0 +1,10 @@
+/** Ask for one frame (coalesced: many calls before the frame run it once). */
+export function requestFrame(): void;
+/**
+ * Register `{ measure?, write?, loop? }`. Returns the unsubscribe function.
+ * The subscriber gets a frame right away, so it can paint its first state.
+ */
+export function subscribe(subscriber: any): () => void;
+/** Test helper: number of live subscribers. */
+export function subscriberCount(): number;
+//# sourceMappingURL=scheduler.d.ts.map

package/dist/motion/engine/scheduler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scheduler.d.ts","sourceRoot":"","sources":["../../../src/motion/engine/scheduler.js"],"names":[],"mappings":"AA+BA,8EAA8E;AAC9E,qCAGC;AAYD;;;GAGG;AACH,uDAYC;AAED,+CAA+C;AAC/C,0CAEC"}

package/dist/motion/engine/useHydrated.d.ts

@@ -0,0 +1,3 @@
+export function useHydrated(): boolean;
+export default useHydrated;
+//# sourceMappingURL=useHydrated.d.ts.map

package/dist/motion/engine/useHydrated.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHydrated.d.ts","sourceRoot":"","sources":["../../../src/motion/engine/useHydrated.js"],"names":[],"mappings":"AAMA,uCAMC"}

package/dist/motion/engine/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,4 @@
+export const useIsomorphicLayoutEffect: typeof useEffect;
+export default useIsomorphicLayoutEffect;
+import { useEffect } from "react";
+//# sourceMappingURL=useIsomorphicLayoutEffect.d.ts.map

package/dist/motion/engine/useIsomorphicLayoutEffect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsomorphicLayoutEffect.d.ts","sourceRoot":"","sources":["../../../src/motion/engine/useIsomorphicLayoutEffect.js"],"names":[],"mappings":"AAGA,yDAAqG;;0BAH1D,OAAO"}

package/dist/motion/engine/useMergedRef.d.ts

@@ -0,0 +1,3 @@
+export function useMergedRef(forwardedRef: any, localRef: any): (node: any) => void;
+export default useMergedRef;
+//# sourceMappingURL=useMergedRef.d.ts.map

package/dist/motion/engine/useMergedRef.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMergedRef.d.ts","sourceRoot":"","sources":["../../../src/motion/engine/useMergedRef.js"],"names":[],"mappings":"AAIA,oFAEC"}

package/dist/motion/index.d.ts

@@ -0,0 +1,20 @@
+import type * as React from "react";
+import type { BentoExpandGridProps, CountUpProps, DeviceFrameProps, DeviceMorphHeroProps, LogoMarqueeProps, PhotoCollageProps, RevealGroupProps, RevealProps, RotatingBadgeProps, ScrollStageProps, SmoothScrollProviderProps, StackedCardsProps, StatStripProps, TestimonialSpotlightProps } from "../types/motion";
+export { useScrollProgress } from "../hooks/useScrollProgress";
+export declare const ScrollStage: React.ForwardRefExoticComponent<ScrollStageProps & React.RefAttributes<HTMLElement>>;
+export declare const Reveal: React.ForwardRefExoticComponent<RevealProps & React.RefAttributes<HTMLElement>>;
+export declare const RevealGroup: React.ForwardRefExoticComponent<RevealGroupProps & React.RefAttributes<HTMLElement>>;
+export declare const SmoothScrollProvider: React.ForwardRefExoticComponent<SmoothScrollProviderProps & React.RefAttributes<any>>;
+export { useSmoothScroll } from "../hooks/useSmoothScroll";
+export declare const DeviceFrame: React.ForwardRefExoticComponent<DeviceFrameProps & React.RefAttributes<HTMLDivElement>>;
+export declare const LogoMarquee: React.ForwardRefExoticComponent<LogoMarqueeProps & React.RefAttributes<HTMLDivElement>>;
+export declare const CountUp: React.ForwardRefExoticComponent<CountUpProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const StatStrip: React.ForwardRefExoticComponent<StatStripProps & React.RefAttributes<HTMLDListElement>>;
+export declare const StackedCards: React.ForwardRefExoticComponent<StackedCardsProps & React.RefAttributes<HTMLOListElement>>;
+export declare const DeviceMorphHero: React.ForwardRefExoticComponent<DeviceMorphHeroProps & React.RefAttributes<HTMLElement>>;
+export declare const BentoExpandGrid: React.ForwardRefExoticComponent<BentoExpandGridProps & React.RefAttributes<HTMLUListElement>>;
+export declare const TestimonialSpotlight: React.ForwardRefExoticComponent<TestimonialSpotlightProps & React.RefAttributes<HTMLElement>>;
+export declare const PhotoCollage: React.ForwardRefExoticComponent<PhotoCollageProps & React.RefAttributes<HTMLDivElement>>;
+export declare const RotatingBadge: React.ForwardRefExoticComponent<RotatingBadgeProps & React.RefAttributes<HTMLDivElement>>;
+export * from "../types/motion";
+//# sourceMappingURL=index.d.ts.map

package/dist/motion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/motion/index.js"],"names":[],"mappings":""}