entangle-ui 0.6.3 → 0.8.0

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

@@ -0,0 +1,160 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { vars } from '../../../theme/contract.css.js';
+import { cx } from '../../../utils/cx.js';
+import { linkHoverColorVar, linkColorVar, linkRecipe, srOnlyStyle, externalIconStyle } from './Link.css.js';
+
+const EXTERNAL_PROTOCOL_RE = /^https?:\/\//i;
+/**
+ * Defaults — keep variant and color in sync so consumers can pass either
+ * (or both) without surprising results.
+ */
+const VARIANT_DEFAULT_COLOR = {
+    default: 'primary',
+    subtle: 'secondary',
+    inline: 'inherit',
+};
+const VARIANT_DEFAULT_UNDERLINE = {
+    default: 'hover',
+    subtle: 'hover',
+    inline: 'always',
+};
+const NAMED_COLOR_TOKENS = {
+    primary: {
+        base: vars.colors.accent.primary,
+        hover: vars.colors.accent.secondary,
+    },
+    secondary: {
+        base: vars.colors.text.secondary,
+        hover: vars.colors.accent.primary,
+    },
+    inherit: {
+        base: 'inherit',
+        hover: vars.colors.accent.primary,
+    },
+};
+function resolveLinkColor(color) {
+    const named = NAMED_COLOR_TOKENS[color];
+    if (named)
+        return named;
+    return { base: color, hover: color };
+}
+/**
+ * Props stripped from the rest spread when the link is disabled.
+ *
+ * Without this, `<Link as={RouterLink} disabled to="/x" onClick={fn} />`
+ * would still navigate / fire the handler — `aria-disabled` and CSS
+ * pointer-events alone don't block keyboard activation or programmatic
+ * triggers fired by router libraries.
+ */
+const NAV_PROPS_TO_STRIP_WHEN_DISABLED = [
+    'href',
+    'to',
+    'onClick',
+    'onClickCapture',
+    'onPointerDown',
+    'onPointerDownCapture',
+    'onMouseDown',
+    'onMouseDownCapture',
+    'onKeyDown',
+    'onKeyDownCapture',
+    'onKeyUp',
+    'onKeyUpCapture',
+    'onAuxClick',
+    'replace',
+    'reloadDocument',
+    'preventScrollReset',
+    'state',
+    'relative',
+];
+function stripNavProps(props) {
+    const cleaned = {};
+    for (const [key, value] of Object.entries(props)) {
+        if (NAV_PROPS_TO_STRIP_WHEN_DISABLED.includes(key)) {
+            continue;
+        }
+        cleaned[key] = value;
+    }
+    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.
+ *
+ * Standardises link color, underline behavior, hover/focus states, and
+ * external-link affordances. Polymorphic via `as` so it can wrap a
+ * router's link component (react-router, TanStack Router, Next.js).
+ *
+ * Scope: **styling-only**, not router-aware. Pass your router's link
+ * component via `as` for client-side navigation — the router's props
+ * (`to`, `replace`, …) are type-checked automatically.
+ *
+ * @example
+ * ```tsx
+ * <Link href="/docs">Documentation</Link>
+ *
+ * <Link href="https://example.com">External</Link> // auto-detected
+ *
+ * <Link as={RouterLink} to="/profile">
+ *   Profile
+ * </Link>
+ *
+ * <Text>
+ *   Read the <Link variant="inline" href="/guide">guide</Link> first.
+ * </Text>
+ * ```
+ */
+function LinkImpl(props) {
+    const { href, as, variant, color, underline, size, external, disabled, children, className, style, testId, ref, 'aria-label': ariaLabel, ...rest } = props;
+    const resolvedVariant = variant ?? 'default';
+    const resolvedSize = size ?? 'md';
+    const isDisabled = disabled === true;
+    const resolvedColor = color ?? VARIANT_DEFAULT_COLOR[resolvedVariant];
+    const resolvedUnderline = underline ?? VARIANT_DEFAULT_UNDERLINE[resolvedVariant];
+    // External affordances only apply when the link is actually navigable.
+    // A disabled link with `external` would be misleading: no target, no
+    // rel, no real navigation — but icon + "opens in new tab" suggest
+    // otherwise. So we suppress all of it.
+    const isExternal = !isDisabled &&
+        (external ?? (typeof href === 'string' && EXTERNAL_PROTOCOL_RE.test(href)));
+    const { base, hover } = resolveLinkColor(resolvedColor);
+    const inlineVars = assignInlineVars({
+        [linkColorVar]: base,
+        [linkHoverColorVar]: hover,
+    });
+    // Disabled forces a non-navigating <span> regardless of `as`. If we
+    // honored `as` while disabled, a router link would still respond to
+    // `to` / `onClick` because pointer-events: none and aria-disabled are
+    // visual hints, not functional locks for programmatic triggers.
+    const Component = isDisabled ? 'span' : (as ?? 'a');
+    const cleanedRest = isDisabled
+        ? stripNavProps(rest)
+        : rest;
+    // Only set `href` when rendering a plain anchor and not disabled. For
+    // custom `as` components (router links) the navigation prop is the
+    // router's own (`to`, `href`, …), passed through `...rest`.
+    const hrefProp = !isDisabled && Component === 'a' && href !== undefined ? { href } : {};
+    const externalAttrs = isExternal
+        ? { target: '_blank', rel: 'noopener noreferrer' }
+        : {};
+    const ariaLabelProp = ariaLabel
+        ? {
+            'aria-label': isExternal
+                ? `${ariaLabel} (opens in new tab)`
+                : ariaLabel,
+        }
+        : {};
+    const linkClassName = cx(linkRecipe({
+        variant: resolvedVariant,
+        underline: resolvedUnderline,
+        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)" }))] }))] }));
+}
+const Link = LinkImpl;
+Link.displayName = 'Link';
+
+export { Link };
+//# sourceMappingURL=Link.js.map

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

@@ -0,0 +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;;"}

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

@@ -1,4 +1,4 @@
-import './../../../assets/src/components/primitives/Popover/Popover.css.ts.vanilla-DW6aAr57.css';
+import './../../../assets/src/components/primitives/Popover/Popover.css.ts.vanilla-KCfDIs4G.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
 var closeButtonStyle = 'Popover_closeButtonStyle__j7aln17';

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

@@ -0,0 +1,18 @@
+import './../../../assets/src/components/primitives/Radio/Radio.css.ts.vanilla-CPjdD-ZM.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var groupContainerStyle = 'Radio_groupContainerStyle__kkwwvfr';
+var groupItemsStyle = 'Radio_groupItemsStyle__kkwwvfu';
+var groupOrientationVar = 'var(--groupOrientationVar__kkwwvfs)';
+var groupSpacingVar = 'var(--groupSpacingVar__kkwwvft)';
+var innerSizeVar = 'var(--innerSizeVar__kkwwvfb)';
+var outerSizeVar = 'var(--outerSizeVar__kkwwvfa)';
+var radioContainerStyle = 'Radio_radioContainerStyle__kkwwvf0';
+var radioDotRecipe = createRuntimeFn({defaultClassName:'Radio_radioDotRecipe__kkwwvfl',variantClassNames:{checked:{true:'Radio_radioDotRecipe_checked_true__kkwwvfm',false:'Radio_radioDotRecipe_checked_false__kkwwvfn'},error:{true:'Radio_radioDotRecipe_error_true__kkwwvfo',false:'Radio_radioDotRecipe_error_false__kkwwvfp'}},defaultVariants:{checked:false,error:false},compoundVariants:[]});
+var radioLabelRecipe = createRuntimeFn({defaultClassName:'Radio_radioLabelRecipe__kkwwvf2',variantClassNames:{labelPosition:{left:'Radio_radioLabelRecipe_labelPosition_left__kkwwvf3',right:'Radio_radioLabelRecipe_labelPosition_right__kkwwvf4'},size:{sm:'Radio_radioLabelRecipe_size_sm__kkwwvf5',md:'Radio_radioLabelRecipe_size_md__kkwwvf6',lg:'Radio_radioLabelRecipe_size_lg__kkwwvf7'},disabled:{true:'Radio_radioLabelRecipe_disabled_true__kkwwvf8',false:'Radio_radioLabelRecipe_disabled_false__kkwwvf9'}},defaultVariants:{labelPosition:'right',size:'md',disabled:false},compoundVariants:[]});
+var radioLabelTextStyle = 'Radio_radioLabelTextStyle__kkwwvfq';
+var radioOuterRecipe = createRuntimeFn({defaultClassName:'Radio_radioOuterRecipe__kkwwvfc',variantClassNames:{checked:{true:'Radio_radioOuterRecipe_checked_true__kkwwvfd',false:'Radio_radioOuterRecipe_checked_false__kkwwvfe'},disabled:{true:'Radio_radioOuterRecipe_disabled_true__kkwwvff',false:'Radio_radioOuterRecipe_disabled_false__kkwwvfg'},error:{true:'Radio_radioOuterRecipe_error_true__kkwwvfh',false:'Radio_radioOuterRecipe_error_false__kkwwvfi'}},defaultVariants:{checked:false,disabled:false,error:false},compoundVariants:[[{disabled:false,checked:false,error:false},'Radio_radioOuterRecipe_compound_0__kkwwvfj'],[{disabled:true,checked:true,error:false},'Radio_radioOuterRecipe_compound_1__kkwwvfk']]});
+var visuallyHiddenInputStyle = 'Radio_visuallyHiddenInputStyle__kkwwvf1';
+
+export { groupContainerStyle, groupItemsStyle, groupOrientationVar, groupSpacingVar, innerSizeVar, outerSizeVar, radioContainerStyle, radioDotRecipe, radioLabelRecipe, radioLabelTextStyle, radioOuterRecipe, visuallyHiddenInputStyle };
+//# sourceMappingURL=Radio.css.js.map

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

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

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

@@ -0,0 +1,10 @@
+import './../../../assets/src/components/primitives/TextArea/TextArea.css.ts.vanilla-M9l1t4HR.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var textAreaContainerStyle = 'TextArea_textAreaContainerStyle__nwf0m90';
+var textAreaFooterStyle = 'TextArea_textAreaFooterStyle__nwf0m9j';
+var textAreaRecipe = createRuntimeFn({defaultClassName:'TextArea_textAreaRecipe__nwf0m9e',variantClassNames:{size:{sm:'TextArea_textAreaRecipe_size_sm__nwf0m9f',md:'TextArea_textAreaRecipe_size_md__nwf0m9g',lg:'TextArea_textAreaRecipe_size_lg__nwf0m9h'},monospace:{true:'TextArea_textAreaRecipe_monospace_true__nwf0m9i'}},defaultVariants:{size:'md'},compoundVariants:[]});
+var textAreaWrapperRecipe = createRuntimeFn({defaultClassName:'TextArea_textAreaWrapperRecipe__nwf0m91',variantClassNames:{size:{sm:'TextArea_textAreaWrapperRecipe_size_sm__nwf0m92',md:'TextArea_textAreaWrapperRecipe_size_md__nwf0m93',lg:'TextArea_textAreaWrapperRecipe_size_lg__nwf0m94'},error:{true:'TextArea_textAreaWrapperRecipe_error_true__nwf0m95',false:'TextArea_textAreaWrapperRecipe_error_false__nwf0m96'},disabled:{true:'TextArea_textAreaWrapperRecipe_disabled_true__nwf0m97',false:'TextArea_textAreaWrapperRecipe_disabled_false__nwf0m98'},focused:{true:'TextArea_textAreaWrapperRecipe_focused_true__nwf0m99',false:'TextArea_textAreaWrapperRecipe_focused_false__nwf0m9a'}},defaultVariants:{size:'md',error:false,disabled:false,focused:false},compoundVariants:[[{focused:true,error:false},'TextArea_textAreaWrapperRecipe_compound_0__nwf0m9b'],[{focused:false,error:false,disabled:false},'TextArea_textAreaWrapperRecipe_compound_1__nwf0m9c'],[{focused:false,error:false,disabled:true},'TextArea_textAreaWrapperRecipe_compound_2__nwf0m9d']]});
+
+export { textAreaContainerStyle, textAreaFooterStyle, textAreaRecipe, textAreaWrapperRecipe };
+//# sourceMappingURL=TextArea.css.js.map

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

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

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

@@ -0,0 +1,97 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useRef, useId, useCallback, useEffect } from 'react';
+import { cx } from '../../../utils/cx.js';
+import { FormHelperText } from '../../form/FormHelperText.js';
+import { FormLabel } from '../../form/FormLabel.js';
+import { textAreaRecipe, textAreaWrapperRecipe, textAreaFooterStyle, textAreaContainerStyle } from './TextArea.css.js';
+
+/**
+ * Multi-line text input with optional auto-resize.
+ *
+ * Visual parity with `Input` — uses the same border, focus ring, and error
+ * states. Auto-resize activates when `minRows` or `maxRows` is set and
+ * disables the native resize handle.
+ *
+ * @example
+ * ```tsx
+ * <TextArea
+ *   label="Description"
+ *   minRows={3}
+ *   maxRows={8}
+ *   value={value}
+ *   onChange={setValue}
+ *   showCount
+ *   maxLength={500}
+ * />
+ * ```
+ */
+const TextArea = ({ value, defaultValue, placeholder, size = 'md', disabled = false, error = false, required = false, readOnly = false, label, helperText, errorMessage, resize = 'vertical', rows = 3, minRows, maxRows, monospace = false, maxLength, showCount = false, className, style, onChange, onFocus, onBlur, onKeyDown, testId, ref, id, name, ...rest }) => {
+    const [focused, setFocused] = React.useState(false);
+    const [internalValue, setInternalValue] = React.useState(defaultValue ?? '');
+    const textareaRef = useRef(null);
+    const autoId = useId();
+    const inputId = id ?? autoId;
+    const isControlled = value !== undefined;
+    const currentValue = isControlled ? value : internalValue;
+    const autoSizeEnabled = minRows !== undefined || maxRows !== undefined;
+    const effectiveResize = autoSizeEnabled ? 'none' : resize;
+    const setRef = useCallback((node) => {
+        textareaRef.current = node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current =
+                node;
+    }, [ref]);
+    const autoResize = useCallback(() => {
+        if (!autoSizeEnabled)
+            return;
+        const el = textareaRef.current;
+        if (!el)
+            return;
+        el.style.height = 'auto';
+        const measuredLineHeight = parseFloat(getComputedStyle(el).lineHeight);
+        const lineHeight = Number.isFinite(measuredLineHeight)
+            ? measuredLineHeight
+            : 18;
+        const minHeight = (minRows ?? 1) * lineHeight;
+        const maxHeight = maxRows ? maxRows * lineHeight : Infinity;
+        const next = Math.min(Math.max(el.scrollHeight, minHeight), maxHeight);
+        el.style.height = `${next}px`;
+        el.style.overflowY = el.scrollHeight > maxHeight ? 'auto' : 'hidden';
+    }, [autoSizeEnabled, minRows, maxRows]);
+    useEffect(() => {
+        autoResize();
+    }, [currentValue, autoResize]);
+    const handleFocus = (event) => {
+        setFocused(true);
+        onFocus?.(event);
+    };
+    const handleBlur = (event) => {
+        setFocused(false);
+        onBlur?.(event);
+    };
+    const handleChange = (event) => {
+        const next = event.target.value;
+        if (!isControlled)
+            setInternalValue(next);
+        onChange?.(next);
+    };
+    const effectiveHelper = error && errorMessage ? errorMessage : helperText;
+    const count = currentValue?.length ?? 0;
+    return (jsxs("div", { className: cx(textAreaContainerStyle, className), style: style, children: [label && (jsx(FormLabel, { htmlFor: inputId, disabled: disabled, required: required, children: label })), jsx("div", { className: textAreaWrapperRecipe({ size, error, disabled, focused }), children: jsx("textarea", { ref: setRef, id: inputId, name: name, placeholder: placeholder, disabled: disabled, required: required, readOnly: readOnly, value: isControlled ? value : undefined, defaultValue: isControlled ? undefined : defaultValue, rows: autoSizeEnabled ? (minRows ?? rows) : rows, maxLength: maxLength, className: textAreaRecipe({
+                        size,
+                        monospace: monospace || undefined,
+                    }), style: { resize: effectiveResize }, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: onKeyDown, "data-testid": testId, "aria-invalid": error || undefined, ...rest }) }), (effectiveHelper !== undefined && effectiveHelper !== '') ||
+                showCount ? (jsxs("div", { style: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'flex-start',
+                    gap: 8,
+                }, children: [effectiveHelper !== undefined && effectiveHelper !== '' ? (jsx(FormHelperText, { error: error, children: effectiveHelper })) : (jsx("span", {})), showCount && (jsx("div", { className: textAreaFooterStyle, children: maxLength !== undefined ? `${count}/${maxLength}` : count }))] })) : null] }));
+};
+TextArea.displayName = 'TextArea';
+
+export { TextArea };
+//# sourceMappingURL=TextArea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.js","sources":["../../../../../../src/components/primitives/TextArea/TextArea.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAcA;;;;;;;;;;;;;;;;;;;AAmBG;AACI;AA+BL;AACA;AACA;AACA;AACA;AAEA;;;;AAMA;AAEI;;;AAEK;AACF;AACC;AACN;AAIF;AACE;;AACA;AACA;;AAEA;;AAGA;AACE;;;AAGF;AAEA;;AAEA;;;AAIA;AACF;AAEA;;AAEE;AACF;AACA;;AAEE;AACF;AACA;AACE;AACA;;AACA;AACF;AAEA;AACA;AAEA;;;AA0BS;AAaL;AAGM;AACA;AACA;AACA;AACD;AAgBX;AAEA;;"}

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 = () => {