entangle-ui 0.7.0 → 0.8.1

package/dist/esm/hooks/useControlledState/useControlledState.js

@@ -0,0 +1,75 @@
+"use client";
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { devWarn } from '../../utils/devWarn.js';
+
+/**
+ * Manage a value that may be either controlled (via prop) or uncontrolled
+ * (managed internally with a default).
+ *
+ * Returns a `[value, setValue]` tuple just like `useState`. When
+ * `options.value` is defined the state is read from there and `setValue`
+ * becomes a pure side-effect callback that calls `onChange` only — internal
+ * state is never mutated. When `options.value` is undefined the hook owns the
+ * state and `setValue` updates it as well as calls `onChange`.
+ *
+ * Switching between controlled and uncontrolled within a component's lifetime
+ * is a known pitfall (matches React's own warning for `<input value/defaultValue>`).
+ * The hook emits a development-only warning when this happens.
+ *
+ * @example
+ * ```ts
+ * const [value, setValue] = useControlledState({
+ *   value: props.value,
+ *   defaultValue: props.defaultValue,
+ *   onChange: props.onChange,
+ *   fallback: '',
+ * });
+ * ```
+ */
+function useControlledState(options) {
+    const { value, defaultValue, onChange, fallback } = options;
+    const isControlled = value !== undefined;
+    // Only `undefined` means "no defaultValue given" — `null` is a legal value
+    // for generic T (e.g. `string | null`) and must not be replaced by fallback.
+    const [internalValue, setInternalValue] = useState(
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    defaultValue !== undefined ? defaultValue : fallback);
+    // Stable refs to avoid stale closures and unnecessary identity changes.
+    const onChangeRef = useRef(onChange);
+    const internalValueRef = useRef(internalValue);
+    const isControlledRef = useRef(isControlled);
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    useEffect(() => {
+        internalValueRef.current = internalValue;
+    }, [internalValue]);
+    // Dev-only warning when controlled <-> uncontrolled flips after mount.
+    // Mirrors React's behavior for <input value/defaultValue>.
+    useEffect(() => {
+        const wasControlled = isControlledRef.current;
+        if (wasControlled !== isControlled) {
+            devWarn(`[useControlledState] Component is changing from ${wasControlled ? 'controlled' : 'uncontrolled'} to ${isControlled ? 'controlled' : 'uncontrolled'}. ` +
+                'Components should not switch between controlled and uncontrolled ' +
+                '(or vice versa) during their lifetime. Decide between using a ' +
+                'controlled or uncontrolled mode for the lifetime of the component.');
+            isControlledRef.current = isControlled;
+        }
+    }, [isControlled]);
+    const setValue = useCallback((next) => {
+        const prev = isControlledRef.current
+            ? value
+            : internalValueRef.current;
+        const resolved = typeof next === 'function' ? next(prev) : next;
+        if (!isControlledRef.current) {
+            setInternalValue(resolved);
+            internalValueRef.current = resolved;
+        }
+        onChangeRef.current?.(resolved);
+    }, [value]);
+    const currentValue = isControlled ? value : internalValue;
+    return [currentValue, setValue];
+}
+
+export { useControlledState };
+//# sourceMappingURL=useControlledState.js.map

package/dist/esm/hooks/useControlledState/useControlledState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControlledState.js","sources":["../../../../../src/hooks/useControlledState/useControlledState.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAgBA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;AACG;;AAKJ;;;AAIA;;;;AAMA;AACA;AACA;;AAGE;AACF;;AAGE;AACF;;;;AAKE;AACA;;;;AAOM;AAEJ;;AAEJ;AAEA;AAEI;AACE;AACA;AACF;AAGA;;AAEE;;AAEF;AACF;;AAKF;AACF;;"}

package/dist/esm/hooks/useDisclosure/useDisclosure.js

@@ -0,0 +1,49 @@
+"use client";
+import { useCallback, useMemo } from 'react';
+import { useControlledState } from '../useControlledState/useControlledState.js';
+
+/**
+ * Manage an open/closed state with stable `open`, `close`, `toggle` callbacks.
+ *
+ * Supports both controlled (driven by an `open` prop) and uncontrolled
+ * (managed internally with `defaultOpen`) modes. Built on top of
+ * `useControlledState` so the same controlled / uncontrolled rules apply —
+ * including the development warning when switching modes mid-life.
+ *
+ * @example
+ * ```tsx
+ * const { isOpen, open, close, toggle } = useDisclosure();
+ *
+ * return (
+ *   <>
+ *     <Button onClick={open}>Open</Button>
+ *     <Dialog open={isOpen} onClose={close}>...</Dialog>
+ *   </>
+ * );
+ * ```
+ */
+function useDisclosure(options = {}) {
+    const { defaultOpen, open: controlledOpen, onOpenChange } = options;
+    const [isOpen, setOpenState] = useControlledState({
+        value: controlledOpen,
+        defaultValue: defaultOpen,
+        onChange: onOpenChange,
+        fallback: false,
+    });
+    const setOpen = useCallback((next) => {
+        setOpenState(next);
+    }, [setOpenState]);
+    const open = useCallback(() => {
+        setOpenState(true);
+    }, [setOpenState]);
+    const close = useCallback(() => {
+        setOpenState(false);
+    }, [setOpenState]);
+    const toggle = useCallback(() => {
+        setOpenState(prev => !prev);
+    }, [setOpenState]);
+    return useMemo(() => ({ isOpen, open, close, toggle, setOpen }), [isOpen, open, close, toggle, setOpen]);
+}
+
+export { useDisclosure };
+//# sourceMappingURL=useDisclosure.js.map

package/dist/esm/hooks/useDisclosure/useDisclosure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDisclosure.js","sources":["../../../../../src/hooks/useDisclosure/useDisclosure.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AASA;;;;;;;;;;;;;;;;;;;AAmBG;AACG;;AAKJ;AACE;AACA;AACA;AACA;AACD;AAED;;AAGE;AAIF;;AAEA;AAEA;;AAEA;AAEA;;AAEA;AAEA;AAIF;;"}

package/dist/esm/{components/feedback/Dialog → hooks/useFocusTrap}/useFocusTrap.js

@@ -10,17 +10,17 @@ const FOCUSABLE_SELECTOR = [
     '[tabindex]:not([tabindex="-1"])',
 ].join(', ');
 /**
- * Reusable focus trap hook.
+ * Trap focus within a container element. Tab and Shift+Tab cycle through the
+ * focusable descendants without escaping the container.
  *
- * Traps Tab/Shift+Tab navigation within a container element,
- * wrapping focus from last to first element and vice versa.
- *
- * @returns onKeyDown handler to attach to the container element
+ * Returns a keyboard event handler to attach to the container's `onKeyDown`.
  *
  * @example
  * ```tsx
- * const handleKeyDown = useFocusTrap({ containerRef: panelRef, enabled: true });
- * <div ref={panelRef} onKeyDown={handleKeyDown}>...</div>
+ * const ref = useRef<HTMLDivElement>(null);
+ * const handleKeyDown = useFocusTrap({ containerRef: ref, enabled: isOpen });
+ *
+ * return <div ref={ref} onKeyDown={handleKeyDown}>...</div>;
  * ```
  */
 function useFocusTrap({ containerRef, enabled = true, }) {

package/dist/esm/hooks/useFocusTrap/useFocusTrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusTrap.js","sources":["../../../../../src/hooks/useFocusTrap/useFocusTrap.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAIA;;;;;;;AAOC;AAaD;;;;;;;;;;;;;AAaG;AACG;AAIJ;AAEI;;AAEA;AACA;;AAEA;AAIA;;;;AAKA;;AAKA;AACE;;;;;;AAKA;;;;;AAKJ;AAGJ;;"}

package/dist/esm/hooks/useHotkey/useHotkey.js

@@ -0,0 +1,203 @@
+"use client";
+import { useRef, useMemo, useEffect } from 'react';
+import { parseShortcut, getPlatform } from '../../utils/platform.js';
+
+function isRefObject(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        'current' in value);
+}
+function resolveTarget(target) {
+    if (target === undefined) {
+        return typeof window === 'undefined' ? null : window;
+    }
+    if (target === null)
+        return null;
+    if (isRefObject(target))
+        return target.current;
+    return target;
+}
+const MODIFIERS = new Set(['ctrl', 'cmd', 'meta', 'alt', 'option', 'shift']);
+const KEY_ALIASES = {
+    esc: 'escape',
+    return: 'enter',
+    space: ' ',
+    spacebar: ' ',
+    up: 'arrowup',
+    down: 'arrowdown',
+    left: 'arrowleft',
+    right: 'arrowright',
+    plus: '+',
+};
+function normalizeKey(key) {
+    const lower = key.toLowerCase();
+    return KEY_ALIASES[lower] ?? lower;
+}
+function parseCombo(combo) {
+    const parts = parseShortcut(combo);
+    if (parts.length === 0)
+        return null;
+    const platform = getPlatform();
+    const isMac = platform === 'mac';
+    let ctrl = false;
+    let meta = false;
+    let alt = false;
+    let shift = false;
+    let key = null;
+    for (const raw of parts) {
+        const lower = raw.toLowerCase();
+        if (MODIFIERS.has(lower)) {
+            switch (lower) {
+                case 'ctrl':
+                    ctrl = true;
+                    break;
+                case 'cmd':
+                    // Cmd auto-maps to Ctrl on non-Mac.
+                    if (isMac) {
+                        meta = true;
+                    }
+                    else {
+                        ctrl = true;
+                    }
+                    break;
+                case 'meta':
+                    meta = true;
+                    break;
+                case 'alt':
+                case 'option':
+                    alt = true;
+                    break;
+                case 'shift':
+                    shift = true;
+                    break;
+            }
+        }
+        else {
+            key = normalizeKey(raw);
+        }
+    }
+    if (key === null)
+        return null;
+    return { ctrl, meta, alt, shift, key };
+}
+function isEditableTarget(target) {
+    if (!(target instanceof HTMLElement))
+        return false;
+    if (target.isContentEditable)
+        return true;
+    const tag = target.tagName;
+    if (tag === 'INPUT') {
+        const type = target.type.toLowerCase();
+        // Buttons and similar non-text inputs should not block hotkeys.
+        const nonEditable = new Set([
+            'button',
+            'submit',
+            'reset',
+            'checkbox',
+            'radio',
+            'file',
+            'image',
+            'range',
+            'color',
+        ]);
+        return !nonEditable.has(type);
+    }
+    return tag === 'TEXTAREA' || tag === 'SELECT';
+}
+function matches(parsed, event) {
+    if (event.ctrlKey !== parsed.ctrl)
+        return false;
+    if (event.metaKey !== parsed.meta)
+        return false;
+    if (event.altKey !== parsed.alt)
+        return false;
+    if (event.shiftKey !== parsed.shift)
+        return false;
+    const eventKey = event.key.toLowerCase();
+    return eventKey === parsed.key;
+}
+/**
+ * Bind a single keyboard combo to a callback.
+ *
+ * Combos use the same `+`-separated string format as `MenuBar`'s `shortcut`
+ * prop: `"Ctrl+S"`, `"Cmd+Shift+P"`, `"Escape"`. Modifiers: `Ctrl`, `Cmd`
+ * (= Meta), `Alt` / `Option`, `Shift`. `Cmd` automatically maps to `Ctrl` on
+ * non-Mac platforms via `getPlatform()`.
+ *
+ * The handler reference is stable — passing a fresh inline function on every
+ * render is safe and does not re-subscribe the underlying listener.
+ *
+ * @example
+ * ```tsx
+ * useHotkey('Ctrl+S', e => save(), { preventDefault: true });
+ * useHotkey('Escape', () => setOpen(false));
+ * useHotkey('Cmd+K', () => openCommandPalette()); // Cmd on Mac, Ctrl elsewhere
+ * ```
+ */
+function useHotkey(combo, handler, options = {}) {
+    const { enabled = true, enableInInputs = false, preventDefault = true, stopPropagation = false, target, } = options;
+    const handlerRef = useRef(handler);
+    handlerRef.current = handler;
+    const optionsRef = useRef({
+        enabled,
+        enableInInputs,
+        preventDefault,
+        stopPropagation,
+    });
+    optionsRef.current = {
+        enabled,
+        enableInInputs,
+        preventDefault,
+        stopPropagation,
+    };
+    const parsed = useMemo(() => parseCombo(combo), [combo]);
+    const parsedRef = useRef(parsed);
+    parsedRef.current = parsed;
+    const attachedTargetRef = useRef(null);
+    const listenerRef = useRef(null);
+    // Runs every render so a ref whose `.current` becomes available after the
+    // first render (conditional rendering, lazy children) is picked up. The
+    // identity check on the resolved target keeps re-attaches limited to the
+    // moments the underlying element actually changes.
+    useEffect(() => {
+        const desired = enabled && parsed !== null ? resolveTarget(target) : null;
+        if (desired === attachedTargetRef.current)
+            return;
+        if (attachedTargetRef.current && listenerRef.current) {
+            attachedTargetRef.current.removeEventListener('keydown', listenerRef.current);
+        }
+        attachedTargetRef.current = desired;
+        if (desired === null) {
+            listenerRef.current = null;
+            return;
+        }
+        const listener = (event) => {
+            const ke = event;
+            const opts = optionsRef.current;
+            const p = parsedRef.current;
+            if (p === null || !opts.enabled)
+                return;
+            if (!matches(p, ke))
+                return;
+            if (!opts.enableInInputs && isEditableTarget(ke.target))
+                return;
+            if (opts.preventDefault)
+                ke.preventDefault();
+            handlerRef.current(ke);
+            if (opts.stopPropagation)
+                ke.stopPropagation();
+        };
+        listenerRef.current = listener;
+        desired.addEventListener('keydown', listener);
+    });
+    useEffect(() => () => {
+        if (attachedTargetRef.current && listenerRef.current) {
+            attachedTargetRef.current.removeEventListener('keydown', listenerRef.current);
+        }
+        attachedTargetRef.current = null;
+        listenerRef.current = null;
+    }, []);
+}
+
+export { useHotkey };
+//# sourceMappingURL=useHotkey.js.map

package/dist/esm/hooks/useHotkey/useHotkey.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHotkey.js","sources":["../../../../../src/hooks/useHotkey/useHotkey.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAMA;AACE;AAEE;;AAGJ;AAEA;AACE;AACE;;;AAEmB;;;AAErB;AACF;AAWA;AAEA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGF;AACE;AACA;AACF;AAEA;AACE;AACA;AAAwB;AAExB;AACA;;;;;;AAQA;AACE;AACA;;AAEI;;;AAGA;;;;;;;;;AAQA;;;AAGA;AACA;;;AAGA;;;;;;AAKF;;;;AAIc;;AAEpB;AAEA;AACE;AAAsC;;AACR;AAC9B;AACA;;;AAGE;;;;;;;;;;AAUC;AACD;;AAEF;AACF;AAEA;AACE;AAAmC;AACnC;AAAmC;AACnC;AAAiC;AACjC;AAAqC;;AAGrC;AACF;AAEA;;;;;;;;;;;;;;;;;AAiBG;AACG;;AAaJ;AACA;;;;;;AAOC;;;;;;;AAQD;AACA;AACA;AAEA;AACA;;;;;;AAOE;AACA;;;;;AAQA;AACA;AACE;;;AAIF;;AAEE;AACA;AACA;;AACA;;;;;;AAIA;;;AAEF;AACA;AACA;AACF;AAEA;;;;AAQI;AACA;;AAIN;;"}

package/dist/esm/hooks/useKeyboard/useKeyboard.js

@@ -0,0 +1,56 @@
+"use client";
+import { useState, useCallback, useEffect, useMemo } from 'react';
+import { updateState, mapInnerStateToState } from './utils.js';
+export { isKeyPressed, isModifierKey } from './utils.js';
+
+/**
+ * Hook for tracking keyboard state including modifier keys and pressed keys.
+ *
+ * Useful for components that need to respond to keyboard modifiers like
+ * Ctrl+drag for snapping, Shift+drag for precision, etc.
+ * @returns Current keyboard state
+ *
+ * @example
+ * ```tsx
+ * // Track all keys and modifiers
+ * const keyboard = useKeyboard();
+ *
+ * const handleMouseMove = (e: MouseEvent) => {
+ *   if (keyboard.ctrl) {
+ *     // Snap to grid
+ *   } else if (keyboard.shift) {
+ *     // Precision mode
+ *   }
+ * };
+ *
+ * // Track only specific keys
+ * const keyboard = useKeyboard({
+ *   trackAllKeys: false,
+ *   trackedKeys: ['Space', 'Enter', 'Escape']
+ * });
+ *
+ * // Check if specific key is pressed
+ * const isSpacePressed = keyboard.pressedKeys.includes('Space');
+ * ```
+ */
+const useKeyboard = () => {
+    const [keyboardState, setKeyboardState] = useState(new Set());
+    const handleKeyDown = useCallback((event) => {
+        setKeyboardState(prevState => updateState(prevState, event));
+    }, []);
+    const handleKeyUp = useCallback((event) => {
+        setKeyboardState(prevState => updateState(prevState, event));
+    }, []);
+    useEffect(() => {
+        window.addEventListener('keydown', handleKeyDown);
+        window.addEventListener('keyup', handleKeyUp);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+            window.removeEventListener('keyup', handleKeyUp);
+        };
+    }, [handleKeyDown, handleKeyUp]);
+    return useMemo(() => mapInnerStateToState(keyboardState), [keyboardState]);
+};
+
+export { useKeyboard };
+//# sourceMappingURL=useKeyboard.js.map

package/dist/esm/hooks/useKeyboard/useKeyboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboard.js","sources":["../../../../../src/hooks/useKeyboard/useKeyboard.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BG;AACI;AACL;AAIA;AACE;;AAGF;AACE;;;AAIA;AACA;AAEA;AACE;AACA;AACF;AACF;AAEA;AACF;;"}

package/dist/esm/hooks/useKeyboard/utils.js

@@ -0,0 +1,56 @@
+import { devWarn } from '../../utils/devWarn.js';
+
+const isModifierKey = (key) => {
+    return ['ctrl', 'shift', 'alt', 'meta', 'control'].includes(key);
+};
+const KeypressUpdate = (prevState, key) => {
+    if (prevState.has(key)) {
+        return prevState;
+    }
+    const newState = new Set(prevState);
+    newState.add(key);
+    return newState;
+};
+const KeyReleaseUpdate = (prevState, key) => {
+    if (!prevState.has(key)) {
+        return prevState;
+    }
+    const newState = new Set(prevState);
+    newState.delete(key);
+    return newState;
+};
+const updateState = (prevState, event) => {
+    const key = event.key.toLowerCase();
+    const eventType = event.type;
+    switch (eventType) {
+        case 'keydown':
+            return KeypressUpdate(prevState, key);
+        case 'keyup':
+            return KeyReleaseUpdate(prevState, key);
+        default:
+            devWarn(`Unhandled event type: ${eventType}`);
+            return prevState;
+    }
+};
+const mapInnerStateToState = (innerState) => {
+    const modifiers = {
+        control: innerState.has('control') || innerState.has('ctrl'),
+        shift: innerState.has('shift'),
+        alt: innerState.has('alt'),
+        meta: innerState.has('meta'),
+    };
+    const pressedKeys = Array.from(innerState).filter(key => !isModifierKey(key));
+    return {
+        pressedKeys,
+        modifiers,
+    };
+};
+const isKeyPressed = (keyboardState, key) => {
+    if (isModifierKey(key)) {
+        return keyboardState.modifiers[key];
+    }
+    return keyboardState.pressedKeys.includes(key);
+};
+
+export { isKeyPressed, isModifierKey, mapInnerStateToState, updateState };
+//# sourceMappingURL=utils.js.map

package/dist/esm/hooks/useKeyboard/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../src/hooks/useKeyboard/utils.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAQO,MAAM,aAAa,GAAG,CAAC,GAAW,KAAyB;AAChE,IAAA,OAAO,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC;AAClE;AAEA,MAAM,cAAc,GAAG,CACrB,SAA6B,EAC7B,GAAY,KACU;AACtB,IAAA,IAAI,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;AACtB,QAAA,OAAO,SAAS;IAClB;AACA,IAAA,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,SAAS,CAAC;AACnC,IAAA,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC;AACjB,IAAA,OAAO,QAAQ;AACjB,CAAC;AAED,MAAM,gBAAgB,GAAG,CACvB,SAA6B,EAC7B,GAAY,KACU;IACtB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;AACvB,QAAA,OAAO,SAAS;IAClB;AACA,IAAA,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,SAAS,CAAC;AACnC,IAAA,QAAQ,CAAC,MAAM,CAAC,GAAG,CAAC;AACpB,IAAA,OAAO,QAAQ;AACjB,CAAC;MAEY,WAAW,GAAG,CACzB,SAA6B,EAC7B,KAAoB,KACE;IACtB,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,WAAW,EAAE;AACnC,IAAA,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI;IAC5B,QAAQ,SAAS;AACf,QAAA,KAAK,SAAS;AACZ,YAAA,OAAO,cAAc,CAAC,SAAS,EAAE,GAAG,CAAC;AACvC,QAAA,KAAK,OAAO;AACV,YAAA,OAAO,gBAAgB,CAAC,SAAS,EAAE,GAAG,CAAC;AACzC,QAAA;AACE,YAAA,OAAO,CAAC,CAAA,sBAAA,EAAyB,SAAS,CAAA,CAAE,CAAC;AAC7C,YAAA,OAAO,SAAS;;AAEtB;AAEO,MAAM,oBAAoB,GAAG,CAClC,UAA8B,KACb;AACjB,IAAA,MAAM,SAAS,GAA+B;AAC5C,QAAA,OAAO,EAAE,UAAU,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC;AAC5D,QAAA,KAAK,EAAE,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC;AAC9B,QAAA,GAAG,EAAE,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC;AAC1B,QAAA,IAAI,EAAE,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC;KAC7B;IACD,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC7E,OAAO;QACL,WAAW;QACX,SAAS;KACV;AACH;MAEa,YAAY,GAAG,CAC1B,aAA4B,EAC5B,GAAY,KACD;AACX,IAAA,IAAI,aAAa,CAAC,GAAG,CAAC,EAAE;AACtB,QAAA,OAAO,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC;IACrC;IACA,OAAO,aAAa,CAAC,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC;AAChD;;;;"}

package/dist/esm/hooks/useMergedRef/useMergedRef.js

@@ -0,0 +1,39 @@
+"use client";
+import { useCallback } from 'react';
+
+/**
+ * Merge multiple refs into a single callback ref. Each provided ref (object
+ * ref, callback ref, or `null`/`undefined`) receives the node when the merged
+ * ref fires.
+ *
+ * Useful when a component needs to keep an internal ref to a DOM node while
+ * also forwarding the same node through an externally supplied `ref` prop
+ * (ref-as-prop in React 19).
+ *
+ * @example
+ * ```tsx
+ * const internalRef = useRef<HTMLDivElement>(null);
+ * const mergedRef = useMergedRef(internalRef, props.ref);
+ *
+ * return <div ref={mergedRef} />;
+ * ```
+ */
+function useMergedRef(...refs) {
+    // The spread of refs is intentional — the merged callback must pick up the
+    // latest set of refs the consumer is passing in.
+    return useCallback((node) => {
+        for (const ref of refs) {
+            if (!ref)
+                continue;
+            if (typeof ref === 'function') {
+                ref(node);
+            }
+            else {
+                ref.current = node;
+            }
+        }
+    }, refs);
+}
+
+export { useMergedRef };
+//# sourceMappingURL=useMergedRef.js.map

package/dist/esm/hooks/useMergedRef/useMergedRef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMergedRef.js","sources":["../../../../../src/hooks/useMergedRef/useMergedRef.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAIA;;;;;;;;;;;;;;;;AAgBG;AACG;;;AAKJ;AACE;AACE;;AACA;;;;AAGG;;;;AAIT;;"}

package/dist/esm/hooks/useResizeObserver/useResizeObserver.js

@@ -0,0 +1,75 @@
+"use client";
+import { useRef, useEffect } from 'react';
+
+/**
+ * Observe size changes on an element. SSR-safe; cleans up on unmount.
+ *
+ * The callback is wrapped in a ref so consumers do not have to memoize it —
+ * the underlying observer never re-subscribes when the callback identity
+ * changes.
+ *
+ * The hook re-checks `ref.current` on every render so it picks up nodes that
+ * mount later (e.g. through conditional rendering). When the observed node
+ * has not changed the only cost is a single identity comparison.
+ *
+ * @example
+ * ```tsx
+ * const ref = useRef<HTMLDivElement>(null);
+ * useResizeObserver(ref, entry => {
+ *   console.log(entry.contentRect.width);
+ * });
+ *
+ * return <div ref={ref} />;
+ * ```
+ */
+function useResizeObserver(ref, callback, options) {
+    const { enabled = true } = options ?? {};
+    const callbackRef = useRef(callback);
+    const observerRef = useRef(null);
+    const observedNodeRef = useRef(null);
+    useEffect(() => {
+        callbackRef.current = callback;
+    }, [callback]);
+    // Runs on every render so a node that mounts after the first render
+    // (conditional rendering, lazy children, suspense fallback flips, ...) is
+    // picked up automatically. Short-circuits on the common case where the
+    // observed node has not changed.
+    useEffect(() => {
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        if (!enabled) {
+            if (observerRef.current) {
+                observerRef.current.disconnect();
+                observerRef.current = null;
+                observedNodeRef.current = null;
+            }
+            return;
+        }
+        const node = ref.current;
+        if (node === observedNodeRef.current)
+            return;
+        if (observerRef.current) {
+            observerRef.current.disconnect();
+            observerRef.current = null;
+        }
+        observedNodeRef.current = node;
+        if (!node)
+            return;
+        const observer = new ResizeObserver(entries => {
+            for (const entry of entries) {
+                callbackRef.current(entry);
+            }
+        });
+        observer.observe(node);
+        observerRef.current = observer;
+    });
+    // Final cleanup on unmount.
+    useEffect(() => () => {
+        observerRef.current?.disconnect();
+        observerRef.current = null;
+        observedNodeRef.current = null;
+    }, []);
+}
+
+export { useResizeObserver };
+//# sourceMappingURL=useResizeObserver.js.map

package/dist/esm/hooks/useResizeObserver/useResizeObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResizeObserver.js","sources":["../../../../../src/hooks/useResizeObserver/useResizeObserver.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAaA;;;;;;;;;;;;;;;;;;;;AAoBG;;;AAQD;AACA;AACA;;AAGE;AACF;;;;;;;;;AAUI;AACE;AACA;AACA;;;;AAKJ;AACA;;AAEA;AACE;AACA;;AAEF;AACA;;AAEA;AACE;AACE;;AAEJ;AACA;AACA;AACF;;AAGA;AAEI;AACA;AACA;;AAIN;;"}