entangle-ui 0.7.0 → 0.8.0

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

@@ -0,0 +1,109 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useContext, useId, useState, useCallback } from 'react';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { FormHelperText } from '../../form/FormHelperText.js';
+import { cx } from '../../../utils/cx.js';
+import { RadioGroupContext } from './RadioGroup.js';
+import { innerSizeVar, outerSizeVar, visuallyHiddenInputStyle, radioDotRecipe, radioOuterRecipe, radioLabelTextStyle, radioLabelRecipe, radioContainerStyle } from './Radio.css.js';
+
+const OUTER_SIZES = {
+    sm: 12,
+    md: 14,
+    lg: 16,
+};
+const INNER_SIZES = {
+    sm: 6,
+    md: 7,
+    lg: 8,
+};
+/**
+ * Radio component for mutually exclusive selection in property panels,
+ * settings, and form interfaces.
+ *
+ * Works standalone (controlled or uncontrolled) or as a child of `RadioGroup`,
+ * which manages exclusive selection across siblings via context. When inside
+ * a `RadioGroup`, the group's `value`, `name`, `size`, `disabled`, and `error`
+ * override the corresponding props on individual radios.
+ *
+ * @example
+ * ```tsx
+ * <Radio value="local" label="Local" />
+ *
+ * <RadioGroup value={space} onChange={setSpace} label="Coordinate space">
+ *   <Radio value="local" label="Local" />
+ *   <Radio value="world" label="World" />
+ *   <Radio value="parent" label="Parent" />
+ * </RadioGroup>
+ * ```
+ */
+const Radio = /*#__PURE__*/ React.memo(({ value, checked: checkedProp, defaultChecked = false, label, labelPosition = 'right', size: sizeProp, disabled: disabledProp, helperText, error: errorProp, errorMessage, name: nameProp, onChange, className, style, testId, ref, id: idProp, ...rest }) => {
+    const groupContext = useContext(RadioGroupContext);
+    const autoId = useId();
+    const radioId = idProp ?? autoId;
+    const helperId = `${radioId}-helper`;
+    const [internalChecked, setInternalChecked] = useState(defaultChecked);
+    const isControlled = checkedProp !== undefined;
+    const isGrouped = groupContext !== null;
+    // Group context overrides individual props when present
+    const size = isGrouped ? groupContext.size : (sizeProp ?? 'md');
+    const disabled = isGrouped
+        ? groupContext.disabled
+        : (disabledProp ?? false);
+    const error = isGrouped ? groupContext.error : (errorProp ?? false);
+    const name = isGrouped ? groupContext.name : nameProp;
+    let resolvedChecked;
+    if (isGrouped) {
+        resolvedChecked = groupContext.value === value;
+    }
+    else if (isControlled) {
+        resolvedChecked = checkedProp;
+    }
+    else {
+        resolvedChecked = internalChecked;
+    }
+    const handleChange = useCallback((event) => {
+        if (disabled)
+            return;
+        if (isGrouped) {
+            groupContext.onChange(value, event);
+            return;
+        }
+        if (!isControlled) {
+            setInternalChecked(true);
+        }
+        onChange?.(value, event);
+    }, [disabled, isGrouped, groupContext, value, isControlled, onChange]);
+    const showHelperText = !isGrouped && error && errorMessage
+        ? errorMessage
+        : !isGrouped
+            ? helperText
+            : undefined;
+    const outerInlineVars = assignInlineVars({
+        [outerSizeVar]: `${OUTER_SIZES[size]}px`,
+        [innerSizeVar]: `${INNER_SIZES[size]}px`,
+    });
+    const labelNode = (jsxs("label", { className: radioLabelRecipe({
+            labelPosition,
+            size,
+            disabled: disabled || undefined,
+        }), children: [jsx("input", { ref: ref, type: "radio", role: "radio", id: radioId, name: name, value: value, checked: resolvedChecked, disabled: disabled, "aria-checked": resolvedChecked, "aria-disabled": disabled || undefined, "aria-invalid": error || undefined, "aria-describedby": showHelperText ? helperId : undefined, onChange: handleChange, className: visuallyHiddenInputStyle, "data-testid": testId, ...rest }), jsx("span", { "aria-hidden": "true", className: radioOuterRecipe({
+                    checked: resolvedChecked || undefined,
+                    disabled: disabled || undefined,
+                    error: error || undefined,
+                }), style: outerInlineVars, children: jsx("span", { className: radioDotRecipe({
+                        checked: resolvedChecked || undefined,
+                        error: error || undefined,
+                    }) }) }), label && jsx("span", { className: radioLabelTextStyle, children: label })] }));
+    if (!showHelperText) {
+        if (className || style) {
+            return (jsx("div", { className: cx(radioContainerStyle, className), style: style, children: labelNode }));
+        }
+        return labelNode;
+    }
+    return (jsxs("div", { className: cx(radioContainerStyle, className), style: style, children: [labelNode, jsx(FormHelperText, { id: helperId, error: error, children: showHelperText })] }));
+});
+Radio.displayName = 'Radio';
+
+export { Radio };
+//# sourceMappingURL=Radio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","sources":["../../../../../../src/components/primitives/Radio/Radio.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAmBA;AACE;AACA;AACA;;AAGF;AACE;AACA;AACA;;AAGF;;;;;;;;;;;;;;;;;;;AAmBG;AACI;AAqBH;AACA;AACA;AACA;;AAGA;AACA;;AAGA;;;AAGE;AACF;AACA;AAEA;;AAEE;;;;;;;;AAOF;AAEI;;;AAGE;;;;;;AAQF;AACF;AAIF;AAEI;;AAEE;;;;;AAML;AAED;;;;AAMK;;;;;;;AAiCI;;AAQP;AACE;;AAMF;;AAGF;AAQF;AAGF;;"}

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

@@ -0,0 +1,82 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useId, useState, useCallback, useMemo, createContext } from 'react';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { FormLabel } from '../../form/FormLabel.js';
+import { FormHelperText } from '../../form/FormHelperText.js';
+import { vars } from '../../../theme/contract.css.js';
+import { cx } from '../../../utils/cx.js';
+import { groupItemsStyle, groupSpacingVar, groupOrientationVar, groupContainerStyle } from './Radio.css.js';
+
+const RadioGroupContext = 
+/*#__PURE__*/ createContext(null);
+const SPACING_SCALE = [
+    '0',
+    vars.spacing.xs,
+    vars.spacing.sm,
+    vars.spacing.md,
+    vars.spacing.lg,
+    vars.spacing.xl,
+    vars.spacing.xxl,
+    vars.spacing.xxxl,
+];
+const resolveSpacing = (spacing) => {
+    if (typeof spacing === 'string')
+        return spacing;
+    const clamped = Math.max(0, Math.min(SPACING_SCALE.length - 1, spacing));
+    const index = Math.floor(clamped);
+    return SPACING_SCALE[index] ?? vars.spacing.sm;
+};
+/**
+ * Groups multiple Radio components with shared, exclusive selection state.
+ *
+ * Manages a single `string` value, propagates `name`, `size`, `disabled`,
+ * and `error` to children via React Context, and applies `aria-required`
+ * for required fields. Supports controlled and uncontrolled modes.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup
+ *   label="Coordinate space"
+ *   value={space}
+ *   onChange={setSpace}
+ * >
+ *   <Radio value="local" label="Local" />
+ *   <Radio value="world" label="World" />
+ *   <Radio value="parent" label="Parent" />
+ * </RadioGroup>
+ * ```
+ */
+const RadioGroup = /*#__PURE__*/ React.memo(({ value: valueProp, defaultValue, label, helperText, disabled = false, error = false, errorMessage, required = false, orientation = 'vertical', spacing = 2, name, size = 'md', onChange, children, className, style, testId, ref, id: idProp, ...rest }) => {
+    const autoId = useId();
+    const groupId = idProp ?? autoId;
+    const labelId = `${groupId}-label`;
+    const helperId = `${groupId}-helper`;
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const isControlled = valueProp !== undefined;
+    const currentValue = isControlled ? valueProp : internalValue;
+    const handleChange = useCallback((nextValue) => {
+        if (!isControlled) {
+            setInternalValue(nextValue);
+        }
+        onChange?.(nextValue);
+    }, [isControlled, onChange]);
+    const contextValue = useMemo(() => ({
+        value: currentValue,
+        name,
+        size,
+        disabled,
+        error,
+        onChange: handleChange,
+    }), [currentValue, name, size, disabled, error, handleChange]);
+    const showHelperText = error && errorMessage ? errorMessage : helperText;
+    const flexDirection = orientation === 'horizontal' ? 'row' : 'column';
+    return (jsxs("div", { ref: ref, role: "radiogroup", "aria-labelledby": label ? labelId : undefined, "aria-describedby": showHelperText ? helperId : undefined, "aria-required": required || undefined, "aria-invalid": error || undefined, "aria-disabled": disabled || undefined, "aria-orientation": orientation, className: cx(groupContainerStyle, className), style: style, "data-testid": testId, ...rest, children: [label && (jsx(FormLabel, { id: labelId, required: required, disabled: disabled, children: label })), jsx(RadioGroupContext.Provider, { value: contextValue, children: jsx("div", { className: groupItemsStyle, style: assignInlineVars({
+                        [groupOrientationVar]: flexDirection,
+                        [groupSpacingVar]: resolveSpacing(spacing),
+                    }), children: children }) }), showHelperText && (jsx(FormHelperText, { id: helperId, error: error, children: showHelperText }))] }));
+});
+RadioGroup.displayName = 'RadioGroup';
+
+export { RadioGroup, RadioGroupContext };
+//# sourceMappingURL=RadioGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","sources":["../../../../../../src/components/primitives/Radio/RadioGroup.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;AAuBE;AAEF;;;;;;;;;;AAWA;;AACmC;;;;AAInC;AAEA;;;;;;;;;;;;;;;;;;;AAmBG;AACI;AAuBH;AACA;AACA;AACA;;AAKA;;AAGA;;;;AAKI;AACF;AAIF;AAEI;;;;;AAKA;AACD;AAIH;AAEA;;;AA2BU;;AAaZ;AAGF;;"}

package/dist/esm/components/primitives/Switch/Switch.css.js

@@ -1,4 +1,4 @@
-import './../../../assets/src/components/primitives/Switch/Switch.css.ts.vanilla-CxqwUToB.css';
+import './../../../assets/src/components/primitives/Switch/Switch.css.ts.vanilla-CDSt-M5W.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
 var labelTextStyle = 'Switch_labelTextStyle__h3xwyto';

package/dist/esm/components/primitives/TextArea/TextArea.css.js

@@ -1,4 +1,4 @@
-import './../../../assets/src/components/primitives/TextArea/TextArea.css.ts.vanilla-DTOMjGkp.css';
+import './../../../assets/src/components/primitives/TextArea/TextArea.css.ts.vanilla-M9l1t4HR.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
 var textAreaContainerStyle = 'TextArea_textAreaContainerStyle__nwf0m90';

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

@@ -139,8 +139,13 @@ const Tooltip = ({ children, title, placement = 'top', collision = 'smart', coll
     if (trackCursor) {
         rootProps.trackCursorAxis = trackCursor;
     }
-    // Build animation transition style
-    const animated = animation?.animated !== false;
+    // Build animation transition style. Honors `prefers-reduced-motion: reduce`
+    // by collapsing to `transition: none` regardless of caller-passed config —
+    // user OS-level preference always wins over component config.
+    const prefersReducedMotion = typeof window !== 'undefined' &&
+        typeof window.matchMedia === 'function' &&
+        window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    const animated = animation?.animated !== false && !prefersReducedMotion;
     const duration = animation?.duration ?? 200;
     const easing = animation?.easing ?? 'ease-out';
     const animationStyle = animated

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../../../../src/components/primitives/Tooltip/Tooltip.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AA8HA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuFG;AACI;;;AAuBH;;;;;;AAQA;AACI;AACE;AACA;AACA;AACqB;AACxB;AACH;;AAGF;;AASA;;;AAGE;AACA;;;AAGA;;;;AAKA;;;AAGI;;;;AAGF;;;;;AAMF;;;AAIF;AACA;AACA;;AAGE;;AAEG;AACH;;AA8BgB;AACA;;;AAoBpB;AAEA;;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../../../../src/components/primitives/Tooltip/Tooltip.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AA8HA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuFG;AACI;;;AAuBH;;;;;;AAQA;AACI;AACE;AACA;AACA;AACqB;AACxB;AACH;;AAGF;;AASA;;;AAGE;AACA;;;AAGA;;;;AAKA;;;AAGI;;;;AAGF;;;;;AAMF;;;;;AAMF;AAEE;AACA;;AAEF;AACA;;AAGE;;AAEG;AACH;;AA8BgB;AACA;;;AAoBpB;AAEA;;"}

package/dist/esm/components/primitives/VisuallyHidden/VisuallyHidden.css.js

@@ -0,0 +1,7 @@
+import './../../../assets/src/components/primitives/VisuallyHidden/VisuallyHidden.css.ts.vanilla-DBulVh4Q.css';
+
+var visuallyHiddenFocusableStyle = 'VisuallyHidden_visuallyHiddenFocusableStyle__1mwqwxp1';
+var visuallyHiddenStyle = 'VisuallyHidden_visuallyHiddenStyle__1mwqwxp0';
+
+export { visuallyHiddenFocusableStyle, visuallyHiddenStyle };
+//# sourceMappingURL=VisuallyHidden.css.js.map

package/dist/esm/components/primitives/VisuallyHidden/VisuallyHidden.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisuallyHidden.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

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

@@ -0,0 +1,38 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cx } from '../../../utils/cx.js';
+import { visuallyHiddenFocusableStyle, visuallyHiddenStyle } from './VisuallyHidden.css.js';
+
+/**
+ * Hides content visually while keeping it accessible to screen readers.
+ *
+ * Implements the canonical `sr-only` / `visually-hidden` pattern. Use it for
+ * screen-reader-only labels, additional context next to icons, and
+ * skip-to-content links (with `focusable`).
+ *
+ * Don't use this to hide content from sighted users for layout reasons —
+ * that's `display: none`. This component keeps content in the accessibility
+ * tree on purpose.
+ *
+ * @example
+ * ```tsx
+ * // SR-only label next to an icon-only button
+ * <button>
+ *   <SearchIcon />
+ *   <VisuallyHidden>Search</VisuallyHidden>
+ * </button>
+ *
+ * // Skip link revealed on focus
+ * <VisuallyHidden as="a" href="#main" focusable>
+ *   Skip to content
+ * </VisuallyHidden>
+ * ```
+ */
+const VisuallyHidden = /*#__PURE__*/ React.memo(({ as: Component = 'span', focusable = false, children, className, style, testId, ref, ...rest }) => {
+    return (jsx(Component, { ref: ref, className: cx(focusable ? visuallyHiddenFocusableStyle : visuallyHiddenStyle, className), style: style, "data-testid": testId, ...rest, children: children }));
+});
+VisuallyHidden.displayName = 'VisuallyHidden';
+
+export { VisuallyHidden };
+//# sourceMappingURL=VisuallyHidden.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VisuallyHidden.js","sources":["../../../../../../src/components/primitives/VisuallyHidden/VisuallyHidden.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAUA;;;;;;;;;;;;;;;;;;;;;;;;AAwBG;AACI;AAWH;AAcF;AAGF;;"}

package/dist/esm/components/shell/FloatingPanel/FloatingPanel.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRef, useState, useCallback, useMemo, useId, useEffect, createContext, useContext } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { cx } from '../../../utils/cx.js';
+import { useMergedRef } from '../../../hooks/useMergedRef/useMergedRef.js';
 import { ScrollArea } from '../../layout/ScrollArea/ScrollArea.js';
 import { CloseIcon } from '../../Icons/CloseIcon.js';
 import { ChevronUpIcon } from '../../Icons/ChevronUpIcon.js';
@@ -84,16 +85,7 @@ const FloatingPanel = ({ title: panelTitle, position: controlledPosition, defaul
     const zIndex = manager?.getZIndex(id) ?? 100;
     // --- Drag ---
     const panelRef = useRef(null);
-    const setPanelRef = useMemo(() => (node) => {
-        panelRef.current = node;
-        if (typeof externalRef === 'function') {
-            externalRef(node);
-        }
-        else if (externalRef && typeof externalRef === 'object') {
-            externalRef.current =
-                node;
-        }
-    }, [externalRef]);
+    const setPanelRef = useMergedRef(panelRef, externalRef);
     const dragOffsetRef = useRef({ x: 0, y: 0 });
     const handleDragStart = useCallback((e) => {
         e.preventDefault();

package/dist/esm/components/shell/FloatingPanel/FloatingPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingPanel.js","sources":["../../../../../../src/components/shell/FloatingPanel/FloatingPanel.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;AAyCA;AAEA;AACE;AAEF;AAEO;AAIL;;AAGA;;;;;;AAOA;AACE;;;AAIF;AACE;;AACoC;;;;AAKtC;;AAGI;AACF;AAIF;AAKA;AAKF;AAEA;AAEA;;AA6BE;AACA;AACA;;;AAKA;AACA;AAEI;;AACA;AACF;;;AAOF;AACA;AAEI;;AACA;AACF;;;AAMF;AACA;AACE;;;AAEA;;;AAIF;AACA;;AAGE;;AAEF;AAEA;AACE;AACF;;;AAKA;;AAGI;AACA;;;AAEO;AACJ;AACC;;AAEN;AAGF;AAEA;;AAGI;AACA;;AAGE;AACA;;AAGF;;;;;;AAMA;;AAGE;AACA;AACF;AAEA;AACA;AACF;;AAKF;;;AAII;AACA;AAEA;AACA;AACA;AACA;AAEA;AACE;AACA;AACA;AACA;;AAEF;;AAGE;AACA;AACF;AAEA;AACA;AACF;;AAKA;AACA;AACA;AACA;AACA;AACD;AAED;AAWM;AACA;;AAwDR;AAEA;;"}
+{"version":3,"file":"FloatingPanel.js","sources":["../../../../../../src/components/shell/FloatingPanel/FloatingPanel.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;AA0CA;AAEA;AACE;AAEF;AAEO;AAIL;;AAGA;;;;;;AAOA;AACE;;;AAIF;AACE;;AACoC;;;;AAKtC;;AAGI;AACF;AAIF;AAKA;AAKF;AAEA;AAEA;;AA6BE;AACA;AACA;;;AAKA;AACA;AAEI;;AACA;AACF;;;AAOF;AACA;AAEI;;AACA;AACF;;;AAMF;AACA;AACE;;;AAEA;;;AAIF;AACA;;AAGE;;AAEF;AAEA;AACE;AACF;;;AAKA;;AAEA;AAEA;;AAGI;AACA;;AAGE;AACA;;AAGF;;;;;;AAMA;;AAGE;AACA;AACF;AAEA;AACA;AACF;;AAKF;;;AAII;AACA;AAEA;AACA;AACA;AACA;AAEA;AACE;AACA;AACA;AACA;;AAEF;;AAGE;AACA;AACF;AAEA;AACA;AACF;;AAKA;AACA;AACA;AACA;AACA;AACD;AAED;AAWM;AACA;;AAwDR;AAEA;;"}

package/dist/esm/context/KeyboardContext.js

@@ -1,6 +1,7 @@
 "use client";
 import 'react/jsx-runtime';
 import { useContext, createContext } from 'react';
+import '../utils/devWarn.js';
 
 const KeyboardContext = /*#__PURE__*/ createContext(null);
 const useKeyboardContext = () => {

package/dist/esm/context/KeyboardContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeyboardContext.js","sources":["../../../../src/context/KeyboardContext.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;AAQA;AAiBO;AACL;;AAEE;;AAIF;AACF;;"}
+{"version":3,"file":"KeyboardContext.js","sources":["../../../../src/context/KeyboardContext.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAQA;AAiBO;AACL;;AAEE;;AAIF;AACF;;"}

package/dist/esm/hooks/useClickOutside/useClickOutside.js

@@ -0,0 +1,60 @@
+"use client";
+import { useRef, useEffect } from 'react';
+
+function isOutside(target, refs) {
+    if (!(target instanceof Node))
+        return true;
+    for (const ref of refs) {
+        const node = ref.current;
+        if (node && (node === target || node.contains(target))) {
+            return false;
+        }
+    }
+    return true;
+}
+/**
+ * Fire a callback when a click occurs outside the referenced element(s).
+ *
+ * Accepts either a single ref or an array of refs. The handler fires only
+ * when the click lands outside ALL provided refs — useful for popover +
+ * trigger pairs where clicking either should be considered "inside".
+ *
+ * Defaults to `mousedown` so the handler runs before `click`. SSR-safe;
+ * cleans up on unmount and when `enabled` flips to `false`.
+ *
+ * @example
+ * ```tsx
+ * const ref = useRef<HTMLDivElement>(null);
+ * useClickOutside(ref, () => setOpen(false), { enabled: isOpen });
+ *
+ * return <div ref={ref}>...</div>;
+ * ```
+ */
+function useClickOutside(ref, handler, options = {}) {
+    const { enabled = true, event = 'mousedown' } = options;
+    const handlerRef = useRef(handler);
+    const refsRef = useRef([]);
+    // Latest handler — invoked from the listener without re-subscribing.
+    handlerRef.current = handler;
+    // Latest ref(s) — refreshed every render so consumers may pass inline
+    // arrays without forcing a re-subscribe of the document listener.
+    refsRef.current = Array.isArray(ref) ? ref : [ref];
+    useEffect(() => {
+        if (!enabled)
+            return;
+        if (typeof document === 'undefined')
+            return;
+        const listener = (e) => {
+            if (isOutside(e.target, refsRef.current)) {
+                handlerRef.current(e);
+            }
+        };
+        document.addEventListener(event, listener);
+        return () => {
+            document.removeEventListener(event, listener);
+        };
+    }, [enabled, event]);
+}
+
+export { useClickOutside };
+//# sourceMappingURL=useClickOutside.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useClickOutside.js","sources":["../../../../../src/hooks/useClickOutside/useClickOutside.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAoBA;AACE;AAA+B;AAE/B;AACE;AACA;AACE;;;AAGJ;AACF;AAEA;;;;;;;;;;;;;;;;;AAiBG;AACG;;AAOJ;AACA;;AAGA;;;AAGA;;AAGE;;;;AAGA;;AAEI;;AAEJ;AAEA;AACA;AACE;AACF;AACF;AACF;;"}

package/dist/esm/hooks/useClipboard/useClipboard.js

@@ -0,0 +1,147 @@
+"use client";
+import { useState, useRef, useEffect, useCallback } from 'react';
+
+const DEFAULT_TIMEOUT = 2000;
+async function writeViaClipboardApi(text) {
+    if (typeof navigator === 'undefined' ||
+        typeof navigator.clipboard === 'undefined' ||
+        typeof navigator.clipboard.writeText !== 'function') {
+        return false;
+    }
+    await navigator.clipboard.writeText(text);
+    return true;
+}
+function writeViaExecCommand(text) {
+    if (typeof document === 'undefined')
+        return false;
+    const textarea = document.createElement('textarea');
+    textarea.value = text;
+    textarea.setAttribute('readonly', '');
+    textarea.style.position = 'absolute';
+    textarea.style.left = '-9999px';
+    textarea.style.top = '0';
+    document.body.appendChild(textarea);
+    textarea.select();
+    let succeeded = false;
+    try {
+        succeeded = document.execCommand('copy');
+    }
+    catch {
+        succeeded = false;
+    }
+    document.body.removeChild(textarea);
+    return succeeded;
+}
+/**
+ * Copy text to the clipboard with a built-in timeout-driven feedback state.
+ *
+ * Uses `navigator.clipboard.writeText` when available; falls back to
+ * `document.execCommand('copy')` only when the modern API is missing.
+ * In SSR or restricted contexts where neither path is available, `copy`
+ * resolves to `false` and `status` flips to `'error'` without throwing.
+ *
+ * @example
+ * ```tsx
+ * const { copy, copied } = useClipboard({ timeout: 1500 });
+ *
+ * return (
+ *   <Button onClick={() => copy('Hello!')}>
+ *     {copied ? 'Copied!' : 'Copy'}
+ *   </Button>
+ * );
+ * ```
+ */
+function useClipboard(options = {}) {
+    const { timeout = DEFAULT_TIMEOUT } = options;
+    const [status, setStatus] = useState('idle');
+    const [error, setError] = useState(null);
+    const timerRef = useRef(null);
+    const timeoutRef = useRef(timeout);
+    // Bumped on every `copy()` call. The async path captures its own value
+    // and short-circuits on resolution if a newer call has started — that
+    // prevents an older, slower `writeText` from overwriting the state of a
+    // newer copy or from arming a stale timer.
+    const requestSeqRef = useRef(0);
+    useEffect(() => {
+        timeoutRef.current = timeout;
+    }, [timeout]);
+    const clearTimer = useCallback(() => {
+        if (timerRef.current !== null) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+    }, []);
+    const reset = useCallback(() => {
+        clearTimer();
+        // Invalidate any in-flight copy so a late resolution does not flip
+        // the status back from idle/error.
+        requestSeqRef.current += 1;
+        setStatus('idle');
+        setError(null);
+    }, [clearTimer]);
+    const copy = useCallback(async (text) => {
+        clearTimer();
+        requestSeqRef.current += 1;
+        const requestId = requestSeqRef.current;
+        let succeeded = false;
+        let copyError = null;
+        try {
+            succeeded = await writeViaClipboardApi(text);
+        }
+        catch (err) {
+            copyError = err instanceof Error ? err : new Error(String(err));
+        }
+        if (!succeeded && copyError === null) {
+            try {
+                succeeded = writeViaExecCommand(text);
+                if (!succeeded) {
+                    copyError = new Error('Copy command was rejected by the browser.');
+                }
+            }
+            catch (err) {
+                copyError = err instanceof Error ? err : new Error(String(err));
+            }
+        }
+        // A newer call (or `reset`) has started — drop this result on the
+        // floor so it does not race the active state.
+        if (requestId !== requestSeqRef.current) {
+            return succeeded;
+        }
+        if (succeeded) {
+            setError(null);
+            setStatus('copied');
+            timerRef.current = setTimeout(() => {
+                timerRef.current = null;
+                // Guard the timer too: another copy may have started during the
+                // window and bumped the sequence. We still clear the timer ref,
+                // but only flip back to idle if the timer belonged to the
+                // current request.
+                if (requestId === requestSeqRef.current) {
+                    setStatus('idle');
+                }
+            }, timeoutRef.current);
+            return true;
+        }
+        setError(copyError ?? new Error('Clipboard API is not available.'));
+        setStatus('error');
+        return false;
+    }, [clearTimer]);
+    useEffect(() => {
+        return () => {
+            if (timerRef.current !== null) {
+                clearTimeout(timerRef.current);
+                timerRef.current = null;
+            }
+        };
+    }, []);
+    return {
+        status,
+        copied: status === 'copied',
+        error,
+        copy,
+        reset,
+    };
+}
+
+export { useClipboard };
+//# sourceMappingURL=useClipboard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useClipboard.js","sources":["../../../../../src/hooks/useClipboard/useClipboard.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AASA;AAEA;;AAGI;;AAGA;;;AAGF;AACF;AAEA;;AACuC;;AAGrC;AACA;AACA;AACA;AACA;AACA;;;AAIA;AACE;;AACA;;;AAGF;AACA;AACF;AAEA;;;;;;;;;;;;;;;;;;AAkBG;AACG;AAGJ;;;AAKA;AACA;;;;;AAKA;;AAGE;AACF;AAEA;AACE;AACE;AACA;;;AAIJ;AACE;;;AAGA;;;AAGF;;AAII;AAEA;AACA;;;AAKA;AACE;;;AAEA;;AAGF;AACE;AACE;;AAEE;;;;AAGF;;;;;AAMJ;AACE;;;;;AAMA;AACE;;;;;AAKA;;;AAGF;AACA;;;;AAKF;AACF;;AAKA;AACE;AACE;AACA;;AAEJ;;;;;;;;;AAUJ;;"}

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