entangle-ui 0.8.2 → 0.9.0

package/dist/esm/components/primitives/HoverCard/HoverCard.js

@@ -0,0 +1,169 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React, { useId, useRef, useState, useCallback, useMemo, useEffect, createContext, useContext } from 'react';
+import { createPortal } from 'react-dom';
+import { useFloating, autoUpdate, offset, flip, shift, useHover, safePolygon, useFocus, useInteractions } from '@floating-ui/react';
+import { cx } from '../../../utils/cx.js';
+import { hoverCardContentRecipe } from './HoverCard.css.js';
+
+const HoverCardContext = 
+/*#__PURE__*/ createContext(null);
+function useHoverCardContext() {
+    const ctx = useContext(HoverCardContext);
+    if (!ctx) {
+        throw new Error('HoverCard compound components must be used within <HoverCard>');
+    }
+    return ctx;
+}
+/**
+ * A floating content container anchored to a trigger and shown on hover.
+ * Cursor can move from the trigger onto the content without closing
+ * (safe-polygon based). Also opens on keyboard focus for accessibility.
+ *
+ * @example
+ * ```tsx
+ * <HoverCard>
+ *   <HoverCard.Trigger>
+ *     <Link>@octocat</Link>
+ *   </HoverCard.Trigger>
+ *   <HoverCard.Content width={280}>
+ *     <UserPreview user={...} />
+ *   </HoverCard.Content>
+ * </HoverCard>
+ * ```
+ */
+const HoverCardRoot = ({ open: openProp, defaultOpen = false, placement = 'bottom-start', offset: offset$1 = 8, openDelay = 400, closeDelay = 150, portal = true, disableSafePolygon = false, disabled = false, onOpenChange, children, }) => {
+    const autoId = useId();
+    const triggerRef = useRef(null);
+    const contentRef = useRef(null);
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const isControlled = openProp !== undefined;
+    const isOpen = disabled ? false : isControlled ? openProp : internalOpen;
+    const handleOpenChange = useCallback((nextOpen) => {
+        if (disabled && nextOpen)
+            return;
+        if (!isControlled) {
+            setInternalOpen(nextOpen);
+        }
+        onOpenChange?.(nextOpen);
+    }, [disabled, isControlled, onOpenChange]);
+    const { refs, floatingStyles, context } = useFloating({
+        open: isOpen,
+        onOpenChange: handleOpenChange,
+        placement: placement,
+        middleware: [offset(offset$1), flip(), shift({ padding: 8 })],
+        whileElementsMounted: autoUpdate,
+    });
+    const hover = useHover(context, {
+        enabled: !disabled,
+        delay: { open: openDelay, close: closeDelay },
+        handleClose: disableSafePolygon ? null : safePolygon(),
+        move: false,
+    });
+    const focus = useFocus(context, { enabled: !disabled });
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+        hover,
+        focus,
+    ]);
+    const contextValue = useMemo(() => ({
+        isOpen,
+        hoverCardId: autoId,
+        portal,
+        triggerRef,
+        contentRef,
+        floatingRefs: refs,
+        floatingStyles,
+        floatingContext: context,
+        getReferenceProps,
+        getFloatingProps,
+    }), [
+        isOpen,
+        autoId,
+        portal,
+        refs,
+        floatingStyles,
+        context,
+        getReferenceProps,
+        getFloatingProps,
+    ]);
+    return (jsx(HoverCardContext.Provider, { value: contextValue, children: children }));
+};
+HoverCardRoot.displayName = 'HoverCard';
+const HoverCardTrigger = ({ children }) => {
+    const { isOpen, hoverCardId, triggerRef, floatingRefs, getReferenceProps } = useHoverCardContext();
+    const contentId = `hovercard-${hoverCardId}-content`;
+    const setRef = useCallback((node) => {
+        triggerRef.current = node;
+        floatingRefs.setReference(node);
+    }, [triggerRef, floatingRefs]);
+    if (!React.isValidElement(children))
+        return null;
+    const referenceProps = getReferenceProps();
+    return React.cloneElement(children, {
+        ref: setRef,
+        ...referenceProps,
+        'aria-describedby': isOpen ? contentId : undefined,
+    });
+};
+HoverCardTrigger.displayName = 'HoverCard.Trigger';
+const HoverCardContent = ({ children, width, maxHeight, padding = 'md', className, style, testId, ref: externalRef, ...rest }) => {
+    const { isOpen, contentRef, portal, hoverCardId, floatingRefs, floatingStyles, getFloatingProps, } = useHoverCardContext();
+    const [visible, setVisible] = useState(false);
+    const contentId = `hovercard-${hoverCardId}-content`;
+    const setRef = useCallback((node) => {
+        contentRef.current = node;
+        floatingRefs.setFloating(node);
+        if (typeof externalRef === 'function') {
+            externalRef(node);
+        }
+        else if (externalRef && typeof externalRef === 'object') {
+            externalRef.current =
+                node;
+        }
+    }, [contentRef, floatingRefs, externalRef]);
+    useEffect(() => {
+        if (isOpen) {
+            const handle = requestAnimationFrame(() => {
+                setVisible(true);
+            });
+            return () => {
+                cancelAnimationFrame(handle);
+            };
+        }
+        setVisible(false);
+        return undefined;
+    }, [isOpen]);
+    if (!isOpen)
+        return null;
+    const dimensionStyles = {};
+    if (width != null) {
+        dimensionStyles.width =
+            typeof width === 'number' ? `${String(width)}px` : width;
+    }
+    if (maxHeight != null) {
+        dimensionStyles.maxHeight =
+            typeof maxHeight === 'number' ? `${String(maxHeight)}px` : maxHeight;
+        dimensionStyles.overflowY = 'auto';
+    }
+    const floatingProps = getFloatingProps();
+    const element = (jsx("div", { ref: setRef, role: "tooltip", id: contentId, className: cx(hoverCardContentRecipe({
+            padding,
+            visible: visible || undefined,
+        }), className), style: {
+            ...floatingStyles,
+            ...dimensionStyles,
+            ...style,
+        }, "data-testid": testId, ...floatingProps, ...rest, children: children }));
+    if (portal && typeof document !== 'undefined') {
+        return createPortal(element, document.body);
+    }
+    return element;
+};
+HoverCardContent.displayName = 'HoverCard.Content';
+const HoverCard = Object.assign(HoverCardRoot, {
+    Trigger: HoverCardTrigger,
+    Content: HoverCardContent,
+});
+
+export { HoverCard };
+//# sourceMappingURL=HoverCard.js.map

package/dist/esm/components/primitives/HoverCard/HoverCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverCard.js","sources":["../../../../../../src/components/primitives/HoverCard/HoverCard.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAkCA;AACE;AAEF;AACE;;AAEE;;AAIF;AACF;AAEA;;;;;;;;;;;;;;;;AAgBG;AACH;AAaE;AACA;AACA;;AAGA;AACA;AAEA;;;;;;AAMI;;;AAMF;AACA;AACA;AACA;AACA;AACD;AAED;;;;AAIE;AACD;AACD;AAEA;;;AAGC;AAED;;AAGI;;;;AAIA;;AAEA;;;AAGD;;;;;;;;;AAUA;AAGH;AAKF;AAEA;AAEA;AACE;AAEA;AAEA;AAEI;AACA;AACF;AAIF;AAAqC;AAErC;AAEA;AAGI;AACA;;AAED;AAEL;AAEA;AAEA;AAWE;;AAWA;AAEA;AAEI;AACA;AACA;;;AAEO;AACJ;AACC;;;;;AAQJ;;AAEA;AACA;;AAEA;;;AAGF;AACF;AAEA;AAAa;;AAGb;AACE;AACE;;AAEJ;AACE;AACE;AACF;;AAGF;;;;AAWO;AAID;AACA;AACA;;AAUN;;;AAGA;AACF;AAEA;;AAQE;AACA;AACD;;"}

package/dist/esm/components/primitives/Icon/Icon.js

@@ -16,14 +16,28 @@ const STANDARD_COLORS = new Set([
     'warning',
     'error',
 ]);
+const STANDARD_SIZES = new Set(['sm', 'md', 'lg']);
 const Icon = /*#__PURE__*/ React.memo(({ children, size = 'md', color = 'primary', className, title, decorative = false, testId, ref, ...props }) => {
     const isStandardColor = STANDARD_COLORS.has(color);
+    const isStandardSize = typeof size === 'string' && STANDARD_SIZES.has(size);
+    const resolvedSize = isStandardSize || size === undefined
+        ? undefined
+        : typeof size === 'number'
+            ? `${size}px`
+            : size;
+    const inlineStyle = {};
+    if (!isStandardColor)
+        inlineStyle.color = color;
+    if (resolvedSize !== undefined) {
+        inlineStyle.width = resolvedSize;
+        inlineStyle.height = resolvedSize;
+    }
     return (jsxs("svg", { ref: ref, className: cx(iconRecipe({
-            size,
+            size: isStandardSize ? size : undefined,
             color: isStandardColor
                 ? color
                 : undefined,
-        }), className), style: !isStandardColor ? { color } : undefined, viewBox: "0 0 24 24", fill: "none", "aria-hidden": decorative, role: decorative ? 'presentation' : 'img', "data-testid": testId, ...props, children: [title && !decorative && jsx("title", { children: title }), children] }));
+        }), className), style: Object.keys(inlineStyle).length > 0 ? inlineStyle : undefined, viewBox: "0 0 24 24", fill: "none", "aria-hidden": decorative, role: decorative ? 'presentation' : 'img', "data-testid": testId, ...props, children: [title && !decorative && jsx("title", { children: title }), children] }));
 });
 Icon.displayName = 'Icon';
 

package/dist/esm/components/primitives/Icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../../../../../../src/components/primitives/Icon/Icon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAgCA;;AAEG;AACH;;;;;;;;AAQC;AAEM;;;;AAoBK;AACE;AAQA;;AAgBZ;AAGF;;"}
+{"version":3,"file":"Icon.js","sources":["../../../../../../src/components/primitives/Icon/Icon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AA6CA;;AAEG;AACH;;;;;;;;AAQC;AAED;AAEO;;AAaH;AAEA;AAEI;AACA;;;;AAKJ;AAAsB;AACtB;AACE;AACA;;;;AASM;AACE;AAQA;AACH;AAeT;AAGF;;"}

package/dist/esm/components/primitives/Link/Link.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { ExternalLinkIcon } from '../../Icons/ExternalLinkIcon.js';
 import { vars } from '../../../theme/contract.css.js';
 import { cx } from '../../../utils/cx.js';
-import { linkHoverColorVar, linkColorVar, linkRecipe, srOnlyStyle, externalIconStyle } from './Link.css.js';
+import { linkHoverColorVar, linkColorVar, linkRecipe, externalIconStyle, srOnlyStyle } from './Link.css.js';
 
 const EXTERNAL_PROTOCOL_RE = /^https?:\/\//i;
 /**
@@ -78,7 +79,6 @@ function stripNavProps(props) {
     }
     return cleaned;
 }
-const ExternalIcon = () => (jsxs("svg", { className: externalIconStyle, viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", focusable: "false", children: [jsx("path", { d: "M4 2h6v6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M10 2L5 7", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M9 7v3H2V3h3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
 /**
  * Styled anchor primitive.
  *
@@ -151,7 +151,7 @@ function LinkImpl(props) {
         size: resolvedSize,
         disabled: isDisabled || undefined,
     }), className);
-    return (jsxs(Component, { ...cleanedRest, ...hrefProp, ...externalAttrs, ...ariaLabelProp, ref: ref, className: linkClassName, style: { ...inlineVars, ...style }, "data-testid": testId, "data-disabled": isDisabled || undefined, "aria-disabled": isDisabled || undefined, children: [children, isExternal && (jsxs(Fragment, { children: [jsx(ExternalIcon, {}), !ariaLabel && (jsx("span", { className: srOnlyStyle, children: " (opens in new tab)" }))] }))] }));
+    return (jsxs(Component, { ...cleanedRest, ...hrefProp, ...externalAttrs, ...ariaLabelProp, ref: ref, className: linkClassName, style: { ...inlineVars, ...style }, "data-testid": testId, "data-disabled": isDisabled || undefined, "aria-disabled": isDisabled || undefined, children: [children, isExternal && (jsxs(Fragment, { children: [jsx(ExternalLinkIcon, { className: externalIconStyle, size: "0.75em", decorative: true }), !ariaLabel && (jsx("span", { className: srOnlyStyle, children: " (opens in new tab)" }))] }))] }));
 }
 const Link = LinkImpl;
 Link.displayName = 'Link';

package/dist/esm/components/primitives/Link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../../../../../../src/components/primitives/Link/Link.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAeA;AAEA;;;AAGG;AACH;AACE;AACA;AACA;;AAGF;AACE;AACA;AACA;;AAGF;AACE;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;;AAGH;AACE;AACA;AAAW;;AAEb;AAEA;;;;;;;AAOG;AACH;;;;;;;;;;;;;;;;;;;;AAqBA;;AAIE;AACE;;;AAGA;;AAEF;AACF;AAEA;AAgCA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBG;AACH;AAGE;AAkBA;AACA;AACA;;;;;;;;AAWE;;;;;AAMD;;;;;AAMD;;AAGE;;;;;;;;;;AAcA;AACI;;AAEE;AACH;;AAGL;AAEI;AACA;AACA;;;AAMJ;AAwBF;AAiBO;AACP;;"}
+{"version":3,"file":"Link.js","sources":["../../../../../../src/components/primitives/Link/Link.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAgBA;AAEA;;;AAGG;AACH;AACE;AACA;AACA;;AAGF;AACE;AACA;AACA;;AAGF;AACE;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;;AAGH;AACE;AACA;AAAW;;AAEb;AAEA;;;;;;;AAOG;AACH;;;;;;;;;;;;;;;;;;;;AAqBA;;AAIE;AACE;;;AAGA;;AAEF;AACF;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBG;AACH;AAGE;AAkBA;AACA;AACA;;;;;;;;AAWE;;;;;AAMD;;;;;AAMD;;AAGE;;;;;;;;;;AAcA;AACI;;AAEE;AACH;;AAGL;AAEI;AACA;AACA;;;AAMJ;AA4BF;AAiBO;AACP;;"}

package/dist/esm/components/primitives/Popover/PopoverClose.js

@@ -1,12 +1,11 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { useCallback } from 'react';
+import { CloseIcon } from '../../Icons/CloseIcon.js';
 import { usePopoverContext } from './Popover.js';
 import { cx } from '../../../utils/cx.js';
 import { closeButtonStyle } from './Popover.css.js';
 
-// --- Close icon ---
-const CloseIcon = () => (jsx("svg", { width: 10, height: 10, viewBox: "0 0 10 10", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M1.5 1.5L8.5 8.5M8.5 1.5L1.5 8.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }));
 // --- Component ---
 const PopoverClose = ({ children, className, style, testId, ref, ...rest }) => {
     const { close } = usePopoverContext();
@@ -14,7 +13,7 @@ const PopoverClose = ({ children, className, style, testId, ref, ...rest }) => {
         e.stopPropagation();
         close();
     }, [close]);
-    return (jsx("button", { ref: ref, type: "button", "aria-label": "Close", onClick: handleClick, className: cx(closeButtonStyle, className), style: style, "data-testid": testId, ...rest, children: children ?? jsx(CloseIcon, {}) }));
+    return (jsx("button", { ref: ref, type: "button", "aria-label": "Close", onClick: handleClick, className: cx(closeButtonStyle, className), style: style, "data-testid": testId, ...rest, children: children ?? jsx(CloseIcon, { size: "sm", decorative: true }) }));
 };
 PopoverClose.displayName = 'PopoverClose';
 

package/dist/esm/components/primitives/Popover/PopoverClose.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverClose.js","sources":["../../../../../../src/components/primitives/Popover/PopoverClose.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAQA;AAEA;AAiBA;;AAUE;AAEA;;AAGI;AACF;AAIF;AAcF;AAEA;;"}
+{"version":3,"file":"PopoverClose.js","sources":["../../../../../../src/components/primitives/Popover/PopoverClose.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AASA;;AAUE;AAEA;;AAGI;AACF;;AAkBJ;AAEA;;"}

package/dist/esm/components/primitives/Radio/Radio.js

@@ -14,7 +14,7 @@ const OUTER_SIZES = {
 };
 const INNER_SIZES = {
     sm: 6,
-    md: 7,
+    md: 6,
     lg: 8,
 };
 /**

package/dist/esm/hooks/useBreakpoint/useBreakpoint.js

@@ -0,0 +1,44 @@
+"use client";
+import { useMemo } from 'react';
+import { breakpoints, BREAKPOINT_ORDER } from '../../theme/breakpoints.js';
+import { useMediaQuery } from '../useMediaQuery/useMediaQuery.js';
+
+const SM_QUERY = `(min-width: ${breakpoints.sm}px)`;
+const MD_QUERY = `(min-width: ${breakpoints.md}px)`;
+const LG_QUERY = `(min-width: ${breakpoints.lg}px)`;
+const XL_QUERY = `(min-width: ${breakpoints.xl}px)`;
+function resolveCurrent(map) {
+    for (let i = BREAKPOINT_ORDER.length - 1; i >= 0; i -= 1) {
+        const name = BREAKPOINT_ORDER[i];
+        if (name && map[name])
+            return name;
+    }
+    return 'xs';
+}
+/**
+ * Reactive named-breakpoint matcher.
+ *
+ * Returns booleans for each named breakpoint plus the largest matching
+ * `current`. Built on top of `useMediaQuery`. Breakpoint values come from
+ * `@/theme/breakpoints` and match the values used by `Stack` and other
+ * responsive layout components.
+ *
+ * @example
+ * ```tsx
+ * const { md, current } = useBreakpoint();
+ * return md ? <Sidebar /> : <BottomSheet />;
+ * ```
+ */
+function useBreakpoint() {
+    const sm = useMediaQuery(SM_QUERY);
+    const md = useMediaQuery(MD_QUERY);
+    const lg = useMediaQuery(LG_QUERY);
+    const xl = useMediaQuery(XL_QUERY);
+    return useMemo(() => {
+        const map = { xs: true, sm, md, lg, xl };
+        return { ...map, current: resolveCurrent(map) };
+    }, [sm, md, lg, xl]);
+}
+
+export { useBreakpoint };
+//# sourceMappingURL=useBreakpoint.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpoint.js","sources":["../../../../../src/hooks/useBreakpoint/useBreakpoint.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAWA;AACA;AACA;AACA;AAEA;AACE;AACE;AACA;AAAuB;;AAEzB;AACF;AAEA;;;;;;;;;;;;;AAaG;;AAED;AACA;AACA;AACA;;AAGE;;;AAGJ;;"}

package/dist/esm/hooks/useDebounced/useDebouncedCallback.js

@@ -0,0 +1,97 @@
+"use client";
+import { useRef, useCallback, useMemo, useEffect } from 'react';
+
+/**
+ * Wrap a function so rapid calls collapse into one. By default the call
+ * fires on the trailing edge — pass `leading: true` to also fire
+ * immediately. `maxWait` forces a call even when calls keep coming.
+ *
+ * The wrapper identity is stable; passing fresh inline functions across
+ * renders is safe and does not reset pending timers.
+ *
+ * @example
+ * ```tsx
+ * const onResize = useDebouncedCallback(measure, 150);
+ * useEffect(() => {
+ *   window.addEventListener('resize', onResize);
+ *   return () => window.removeEventListener('resize', onResize);
+ * }, [onResize]);
+ * ```
+ */
+function useDebouncedCallback(fn, delay, options = {}) {
+    const { leading = false, maxWait } = options;
+    const fnRef = useRef(fn);
+    fnRef.current = fn;
+    const timerRef = useRef(null);
+    const maxTimerRef = useRef(null);
+    const lastArgsRef = useRef(null);
+    const lastInvokeRef = useRef(0);
+    const clearTimers = useCallback(() => {
+        if (timerRef.current !== null) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+        if (maxTimerRef.current !== null) {
+            clearTimeout(maxTimerRef.current);
+            maxTimerRef.current = null;
+        }
+    }, []);
+    const invoke = useCallback(() => {
+        const args = lastArgsRef.current;
+        lastArgsRef.current = null;
+        lastInvokeRef.current = Date.now();
+        clearTimers();
+        if (args)
+            fnRef.current(...args);
+    }, [clearTimers]);
+    const debounced = useMemo(() => {
+        const wrapper = (...args) => {
+            lastArgsRef.current = args;
+            const now = Date.now();
+            const isLeadingCall = leading && timerRef.current === null && maxTimerRef.current === null;
+            if (isLeadingCall) {
+                // Fire immediately, then suppress trailing for `delay` ms unless
+                // additional calls happen — in that case the trailing handler will
+                // pick them up.
+                lastArgsRef.current = null;
+                lastInvokeRef.current = now;
+                fnRef.current(...args);
+            }
+            if (timerRef.current !== null)
+                clearTimeout(timerRef.current);
+            timerRef.current = setTimeout(() => {
+                timerRef.current = null;
+                if (lastArgsRef.current !== null)
+                    invoke();
+                else if (maxTimerRef.current !== null) {
+                    clearTimeout(maxTimerRef.current);
+                    maxTimerRef.current = null;
+                }
+            }, delay);
+            if (maxWait !== undefined && maxTimerRef.current === null) {
+                maxTimerRef.current = setTimeout(() => {
+                    maxTimerRef.current = null;
+                    if (lastArgsRef.current !== null)
+                        invoke();
+                }, maxWait);
+            }
+        };
+        wrapper.cancel = () => {
+            lastArgsRef.current = null;
+            clearTimers();
+        };
+        wrapper.flush = () => {
+            if (lastArgsRef.current !== null)
+                invoke();
+            else
+                clearTimers();
+        };
+        return wrapper;
+    }, [delay, leading, maxWait, invoke, clearTimers]);
+    // Cleanup on unmount.
+    useEffect(() => clearTimers, [clearTimers]);
+    return debounced;
+}
+
+export { useDebouncedCallback };
+//# sourceMappingURL=useDebouncedCallback.js.map

package/dist/esm/hooks/useDebounced/useDebouncedCallback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebouncedCallback.js","sources":["../../../../../src/hooks/useDebounced/useDebouncedCallback.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAQA;;;;;;;;;;;;;;;;AAgBG;AACG;;AAOJ;AACA;AAEA;AACA;AACA;AACA;AAEA;AACE;AACE;AACA;;AAEF;AACE;AACA;;;AAIJ;AACE;AACA;AACA;AACA;AACA;AAAU;AACZ;AAEA;AACE;AACE;AACA;AACA;;;;;AAOE;AACA;AACA;;AAGF;AAA+B;AAC/B;AACE;AACA;AAAkC;AAC7B;AACH;AACA;;;;AAKF;AACE;AACA;AAAkC;;;AAGxC;AAEA;AACE;AACA;AACF;AACA;AACE;AAAkC;;AAC7B;AACP;AAEA;AACF;;;AAKA;AACF;;"}

package/dist/esm/hooks/useDebounced/useDebouncedValue.js

@@ -0,0 +1,35 @@
+"use client";
+import { useState, useEffect } from 'react';
+
+/**
+ * Returns a copy of `value` that updates only after `delay` ms have elapsed
+ * without further changes (trailing-edge debounce).
+ *
+ * Typical use: feeding a search input value into an expensive query.
+ *
+ * @example
+ * ```tsx
+ * const [text, setText] = useState('');
+ * const debounced = useDebouncedValue(text, 200);
+ * useEffect(() => { search(debounced); }, [debounced]);
+ * ```
+ */
+function useDebouncedValue(value, delay) {
+    const [debounced, setDebounced] = useState(value);
+    useEffect(() => {
+        if (delay <= 0) {
+            setDebounced(value);
+            return;
+        }
+        const id = setTimeout(() => {
+            setDebounced(value);
+        }, delay);
+        return () => {
+            clearTimeout(id);
+        };
+    }, [value, delay]);
+    return debounced;
+}
+
+export { useDebouncedValue };
+//# sourceMappingURL=useDebouncedValue.js.map

package/dist/esm/hooks/useDebounced/useDebouncedValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebouncedValue.js","sources":["../../../../../src/hooks/useDebounced/useDebouncedValue.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAIA;;;;;;;;;;;;AAYG;AACG;;;AAIF;;;;AAIA;;;AAGA;;AAEA;AACF;AAEA;AACF;;"}

package/dist/esm/hooks/useIntersectionObserver/useIntersectionObserver.js

@@ -0,0 +1,73 @@
+"use client";
+import { useState, useRef, useCallback, useEffect } from 'react';
+
+/**
+ * Observe whether an element intersects a root (defaults to the viewport).
+ * Returns a ref callback to attach to the observed element plus the latest
+ * `IntersectionObserverEntry`. SSR-safe: returns a no-op ref and `null`
+ * entry when `IntersectionObserver` is unavailable.
+ *
+ * @example
+ * ```tsx
+ * const { ref, isIntersecting } = useIntersectionObserver<HTMLDivElement>({
+ *   rootMargin: '200px',
+ * });
+ * useEffect(() => {
+ *   if (isIntersecting) loadMore();
+ * }, [isIntersecting]);
+ * return <div ref={ref} />;
+ * ```
+ */
+function useIntersectionObserver(options = {}) {
+    const { root, rootMargin, threshold, enabled = true } = options;
+    const [entry, setEntry] = useState(null);
+    const observerRef = useRef(null);
+    const nodeRef = useRef(null);
+    const ref = useCallback(node => {
+        if (typeof IntersectionObserver === 'undefined') {
+            nodeRef.current = node;
+            return;
+        }
+        if (observerRef.current) {
+            observerRef.current.disconnect();
+            observerRef.current = null;
+        }
+        nodeRef.current = node;
+        if (!enabled || !node) {
+            setEntry(null);
+            return;
+        }
+        const observer = new IntersectionObserver(entries => {
+            const next = entries[0];
+            if (next)
+                setEntry(next);
+        }, { root: root ?? null, rootMargin, threshold });
+        observer.observe(node);
+        observerRef.current = observer;
+    }, [root, rootMargin, threshold, enabled]);
+    // When toggled off via `enabled`, disconnect proactively so consumers don't
+    // have to detach the ref to stop observing.
+    useEffect(() => {
+        if (enabled)
+            return;
+        if (observerRef.current) {
+            observerRef.current.disconnect();
+            observerRef.current = null;
+        }
+        setEntry(null);
+    }, [enabled]);
+    // Final cleanup on unmount.
+    useEffect(() => () => {
+        observerRef.current?.disconnect();
+        observerRef.current = null;
+        nodeRef.current = null;
+    }, []);
+    return {
+        ref,
+        entry,
+        isIntersecting: entry?.isIntersecting ?? false,
+    };
+}
+
+export { useIntersectionObserver };
+//# sourceMappingURL=useIntersectionObserver.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useIntersectionObserver.js","sources":["../../../../../src/hooks/useIntersectionObserver/useIntersectionObserver.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AASA;;;;;;;;;;;;;;;;AAgBG;AACG;AAGJ;;AAGA;AACA;AAEA;AAEI;AACE;;;AAIF;AACE;AACA;;AAGF;AACA;;;;AAKA;AAEI;AACA;;AACF;AAGF;AACA;;;;;AAQF;;AACA;AACE;AACA;;;AAGJ;;AAGA;AAEI;AACA;AACA;;;;;AAQF;;AAEJ;;"}