@flikk/ui 1.0.0-beta.30 → 1.0.0-beta.31

package/dist/hooks/index.d.ts

@@ -10,6 +10,8 @@ export type { NetworkStatusReturn } from "./useNetworkStatus";
 export * from "./useFormStateMachine";
 export { useFocusTrap } from "./useFocusTrap";
 export { useIsClient } from "./useIsClient";
+export { useElapsedTime } from "./useElapsedTime";
+export type { UseElapsedTimeOptions } from "./useElapsedTime";
 export { useClickOutside } from "./useClickOutside";
 export { useScaleBackground } from "./useScaleBackground";
 export type { UseScaleBackgroundOptions } from "./useScaleBackground";

package/dist/hooks/useElapsedTime.d.ts

@@ -0,0 +1,28 @@
+export interface UseElapsedTimeOptions {
+    /**
+     * While `true` the value ticks. Flipping to `false` takes one final reading
+     * and then freezes, so a settled duration is exact rather than up to one
+     * interval stale.
+     * @default true
+     */
+    active?: boolean;
+    /**
+     * Tick interval in milliseconds. The default resolves tenths of a second,
+     * which is what sub-minute durations render.
+     * @default 100
+     */
+    intervalMs?: number;
+}
+/**
+ * Elapsed seconds since `startedAt` (epoch milliseconds).
+ *
+ * Returns `undefined` when `startedAt` is omitted, and on the server — the
+ * clock is only read inside an effect, so there is nothing non-deterministic
+ * to hydrate and no `window`/`Date.now()` in the render body.
+ *
+ * @example
+ * ```tsx
+ * const elapsed = useElapsedTime(startedAt, { active: !done });
+ * ```
+ */
+export declare function useElapsedTime(startedAt?: number, { active, intervalMs }?: UseElapsedTimeOptions): number | undefined;

package/dist/hooks/useElapsedTime.js

@@ -0,0 +1,37 @@
+"use client";
+import { useState, useEffect } from 'react';
+
+/**
+ * Elapsed seconds since `startedAt` (epoch milliseconds).
+ *
+ * Returns `undefined` when `startedAt` is omitted, and on the server — the
+ * clock is only read inside an effect, so there is nothing non-deterministic
+ * to hydrate and no `window`/`Date.now()` in the render body.
+ *
+ * @example
+ * ```tsx
+ * const elapsed = useElapsedTime(startedAt, { active: !done });
+ * ```
+ */
+function useElapsedTime(startedAt, { active = true, intervalMs = 100 } = {}) {
+    const [elapsed, setElapsed] = useState(undefined);
+    useEffect(() => {
+        if (startedAt === undefined) {
+            setElapsed(undefined);
+            return;
+        }
+        const read = () => setElapsed(Math.max(0, (Date.now() - startedAt) / 1000));
+        // Settled: take one exact final reading, then stop. Without this the frozen
+        // value would be whatever the last tick happened to catch, up to intervalMs early.
+        if (!active) {
+            read();
+            return;
+        }
+        read();
+        const id = setInterval(read, intervalMs);
+        return () => clearInterval(id);
+    }, [startedAt, active, intervalMs]);
+    return elapsed;
+}
+
+export { useElapsedTime };

package/dist/hooks/useSelectPortal.d.ts

@@ -16,6 +16,14 @@ export interface UseSimpleDropdownOptions {
      * @default true
      */
     clampToViewport?: boolean;
+    /**
+     * Opt-in escape hatch for triggers that move on their own (e.g. a dragged
+     * slider thumb) without a scroll/resize/content-resize event to key off of.
+     * Position recalculates whenever this value changes (reference/value
+     * inequality), in addition to the normal open/scroll/resize triggers.
+     * Unused by default, so existing consumers are unaffected.
+     */
+    recalcTrigger?: unknown;
 }
 export interface SimpleDropdownReturn {
     position: {
@@ -34,5 +42,5 @@ export interface SimpleDropdownReturn {
  * Uses position: fixed with pure viewport coordinates to properly follow scroll
  * Fixes critical issues: dropdown not following scroll & multiple dropdowns not working
  */
-export declare const useSimpleDropdown: ({ triggerRef, isOpen, placement, offset, estimatedWidth, autoWidth, onClose, stickyTracking, clampToViewport, }: UseSimpleDropdownOptions) => SimpleDropdownReturn;
-export declare const useSelectPortal: ({ triggerRef, isOpen, placement, offset, estimatedWidth, autoWidth, onClose, stickyTracking, clampToViewport, }: UseSimpleDropdownOptions) => SimpleDropdownReturn;
+export declare const useSimpleDropdown: ({ triggerRef, isOpen, placement, offset, estimatedWidth, autoWidth, onClose, stickyTracking, clampToViewport, recalcTrigger, }: UseSimpleDropdownOptions) => SimpleDropdownReturn;
+export declare const useSelectPortal: ({ triggerRef, isOpen, placement, offset, estimatedWidth, autoWidth, onClose, stickyTracking, clampToViewport, recalcTrigger, }: UseSimpleDropdownOptions) => SimpleDropdownReturn;

package/dist/hooks/useSelectPortal.js

@@ -7,7 +7,7 @@ const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffec
  * Uses position: fixed with pure viewport coordinates to properly follow scroll
  * Fixes critical issues: dropdown not following scroll & multiple dropdowns not working
  */
-const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", offset = 4, estimatedWidth, autoWidth = false, onClose, stickyTracking = false, clampToViewport = true, }) => {
+const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", offset = 4, estimatedWidth, autoWidth = false, onClose, stickyTracking = false, clampToViewport = true, recalcTrigger, }) => {
     const contentRef = useRef(null);
     const [position, setPosition] = useState({ top: -9999, left: -9999, width: 0 });
     const [cssVariables, setCssVariables] = useState({});
@@ -344,14 +344,17 @@ const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", off
             }
         };
     }, [isOpen, calculatePosition]);
-    // Initial position calculation
+    // Initial position calculation. `recalcTrigger` is in the deps so triggers
+    // that move on their own (e.g. a dragged slider thumb, with no
+    // scroll/resize/content-resize event to key off of) can force a recalc —
+    // one effect, one calculatePosition per open/trigger change.
     useIsomorphicLayoutEffect(() => {
         if (typeof window === 'undefined')
             return;
         if (!isOpen)
             return;
         calculatePosition();
-    }, [isOpen, calculatePosition]);
+    }, [isOpen, calculatePosition, recalcTrigger]);
     // rAF-synced scroll handler: skips internal scrolls, detects off-screen trigger
     const scrollRafRef = useRef(null);
     const handleScroll = useCallback((e) => {

package/dist/index.js

@@ -153,7 +153,7 @@ export { fileUploadProgressTheme } from './components/forms/FileUpload/FileUploa
 export { TimePicker } from './components/forms/TimePicker/TimePicker.js';
 import 'react/jsx-runtime';
 import 'react';
-import '@heroicons/react/24/outline';
+import '@phosphor-icons/react';
 export { cn } from './utils/cn.js';
 import './components/forms/TimePicker/TimePickerContext.js';
 export { AnimatePresence } from 'motion/react';