entangle-ui 0.6.3 → 0.8.0

package/dist/esm/components/navigation/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,152 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React, { useState, useMemo } from 'react';
+import '../../Icons/AddIcon.js';
+import '../../Icons/AiChatIcon.js';
+import '../../Icons/AiSparklesIcon.js';
+import '../../Icons/ArrowDownIcon.js';
+import '../../Icons/ArrowLeftIcon.js';
+import { ArrowRightIcon } from '../../Icons/ArrowRightIcon.js';
+import '../../Icons/ArrowUpIcon.js';
+import '../../Icons/BookmarkIcon.js';
+import '../../Icons/CalendarIcon.js';
+import '../../Icons/ChevronDownIcon.js';
+import '../../Icons/ChevronUpIcon.js';
+import '../../Icons/ClockIcon.js';
+import '../../Icons/CloseIcon.js';
+import '../../Icons/CodeIcon.js';
+import '../../Icons/CopyIcon.js';
+import '../../Icons/CutIcon.js';
+import '../../Icons/DownloadIcon.js';
+import '../../Icons/EditIcon.js';
+import '../../Icons/ErrorIcon.js';
+import '../../Icons/EyeDropperIcon.js';
+import '../../Icons/EyeIcon.js';
+import '../../Icons/FilterIcon.js';
+import '../../Icons/FolderIcon.js';
+import '../../Icons/FullscreenIcon.js';
+import '../../Icons/GridIcon.js';
+import '../../Icons/HeartIcon.js';
+import '../../Icons/HelpIcon.js';
+import '../../Icons/HomeIcon.js';
+import '../../Icons/InfoIcon.js';
+import '../../Icons/LinkIcon.js';
+import '../../Icons/ListIcon.js';
+import '../../Icons/LockIcon.js';
+import '../../Icons/MaximizeIcon.js';
+import '../../Icons/MenuIcon.js';
+import '../../Icons/MinimizeIcon.js';
+import '../../Icons/PasteIcon.js';
+import '../../Icons/PlayIcon.js';
+import '../../Icons/RedoIcon.js';
+import '../../Icons/RefreshIcon.js';
+import '../../Icons/RobotIcon.js';
+import '../../Icons/SaveIcon.js';
+import '../../Icons/SearchIcon.js';
+import '../../Icons/SettingsIcon.js';
+import '../../Icons/SortIcon.js';
+import '../../Icons/StarIcon.js';
+import '../../Icons/SuccessIcon.js';
+import '../../Icons/TagIcon.js';
+import '../../Icons/TrashIcon.js';
+import '../../Icons/UndoIcon.js';
+import '../../Icons/UnlockIcon.js';
+import '../../Icons/UploadIcon.js';
+import '../../Icons/UserIcon.js';
+import '../../Icons/WarningIcon.js';
+import '../../Icons/ZoomInIcon.js';
+import '../../Icons/ZoomOutIcon.js';
+import '../../Icons/CheckIcon.js';
+import '../../Icons/CircleIcon.js';
+import '../../Icons/TangentFreeIcon.js';
+import '../../Icons/TangentAlignedIcon.js';
+import '../../Icons/TangentMirroredIcon.js';
+import '../../Icons/TangentAutoIcon.js';
+import '../../Icons/TangentLinearIcon.js';
+import '../../Icons/TangentStepIcon.js';
+import { cx } from '../../../utils/cx.js';
+import { BreadcrumbEllipsis } from './BreadcrumbEllipsis.js';
+import { BreadcrumbItem } from './BreadcrumbItem.js';
+import { BreadcrumbSeparator } from './BreadcrumbSeparator.js';
+import { breadcrumbsListRecipe, breadcrumbsRootRecipe } from './Breadcrumbs.css.js';
+
+function isComponentElement(child, component) {
+    return React.isValidElement(child) && child.type === component;
+}
+function getItemLabel(child) {
+    if (React.isValidElement(child) &&
+        typeof child.props.children === 'string') {
+        return child.props.children;
+    }
+    return undefined;
+}
+function withSeparators(items, separator) {
+    return items.flatMap((item, index) => index === 0
+        ? [item]
+        : [
+            jsx(BreadcrumbSeparator, { children: separator }, `separator-${index}`),
+            item,
+        ]);
+}
+/**
+ * Breadcrumb navigation for hierarchical paths.
+ *
+ * Use Breadcrumbs for file paths, nested categories, editor hierarchy depth,
+ * or parent-route navigation. Mark the current page explicitly with
+ * `isCurrent`.
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumbs>
+ *   <BreadcrumbItem href="/">Home</BreadcrumbItem>
+ *   <BreadcrumbItem href="/components">Components</BreadcrumbItem>
+ *   <BreadcrumbItem isCurrent>Button</BreadcrumbItem>
+ * </Breadcrumbs>
+ * ```
+ */
+const Breadcrumbs = /*#__PURE__*/ React.memo(({ separator = jsx(ArrowRightIcon, { size: "sm", decorative: true }), maxItems = 0, itemsBeforeCollapse = 1, itemsAfterCollapse = 2, expandable = true, size = 'sm', children, className, style, testId, ref, ...rest }) => {
+    const [expanded, setExpanded] = useState(false);
+    const renderedChildren = useMemo(() => {
+        const childArray = React.Children.toArray(children);
+        const hasExplicitSeparators = childArray.some(child => isComponentElement(child, BreadcrumbSeparator));
+        if (expanded || !maxItems || maxItems <= 0) {
+            return hasExplicitSeparators
+                ? childArray
+                : withSeparators(childArray, separator);
+        }
+        const breadcrumbItems = childArray.filter(child => isComponentElement(child, BreadcrumbItem));
+        if (breadcrumbItems.length <= maxItems) {
+            return hasExplicitSeparators
+                ? childArray
+                : withSeparators(childArray, separator);
+        }
+        const safeBefore = Math.max(0, itemsBeforeCollapse);
+        const safeAfter = Math.max(0, itemsAfterCollapse);
+        const visibleBefore = breadcrumbItems.slice(0, safeBefore);
+        const visibleAfter = safeAfter > 0 ? breadcrumbItems.slice(-safeAfter) : [];
+        const collapsedItems = breadcrumbItems.slice(safeBefore, breadcrumbItems.length - safeAfter);
+        const collapsedLabels = collapsedItems
+            .map(getItemLabel)
+            .filter((label) => Boolean(label))
+            .join(' / ');
+        const collapsedTrail = [
+            ...visibleBefore,
+            jsx(BreadcrumbEllipsis, { onClick: expandable ? () => setExpanded(true) : undefined, tooltip: collapsedLabels || undefined }, "breadcrumb-ellipsis"),
+            ...visibleAfter,
+        ];
+        return withSeparators(collapsedTrail, separator);
+    }, [
+        children,
+        expandable,
+        expanded,
+        itemsAfterCollapse,
+        itemsBeforeCollapse,
+        maxItems,
+        separator,
+    ]);
+    return (jsx("nav", { ref: ref, className: cx(breadcrumbsRootRecipe({ size }), className), style: style, "data-testid": testId, "aria-label": "Breadcrumb", ...rest, children: jsx("ol", { className: breadcrumbsListRecipe({ size }), children: renderedChildren }) }));
+});
+Breadcrumbs.displayName = 'Breadcrumbs';
+
+export { Breadcrumbs };
+//# sourceMappingURL=Breadcrumbs.js.map

package/dist/esm/components/navigation/Breadcrumbs/Breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.js","sources":["../../../../../../src/components/navigation/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA;AAIE;AACF;AAEA;AACE;;AAIE;;AAGF;AACF;AAEA;AAIE;;AAGI;AACI;;AAID;AAET;AAEA;;;;;;;;;;;;;;;AAeG;AACI;;AAiBH;;AAEE;;AAQE;AACE;AACA;;AAGJ;AAOA;AACE;AACE;AACA;;;;;AAMJ;AAEA;;;;;AAUA;AACE;;AAMA;;AAGF;AACF;;;;;;;;AAQC;;AAcH;AAGF;;"}

package/dist/esm/components/navigation/SegmentedControl/SegmentedControl.css.js

@@ -0,0 +1,15 @@
+import './../../../assets/src/components/navigation/SegmentedControl/SegmentedControl.css.ts.vanilla-BHOnDD2B.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var itemOutlineStyle = 'SegmentedControl_itemOutlineStyle__1k6fove16';
+var itemSolidStyle = 'SegmentedControl_itemSolidStyle__1k6fove15';
+var itemSubtleStyle = 'SegmentedControl_itemSubtleStyle__1k6fove14';
+var segmentedControlRecipe = createRuntimeFn({defaultClassName:'SegmentedControl_segmentedControlRecipe__1k6fove0',variantClassNames:{orientation:{horizontal:'SegmentedControl_segmentedControlRecipe_orientation_horizontal__1k6fove1',vertical:'SegmentedControl_segmentedControlRecipe_orientation_vertical__1k6fove2'},variant:{subtle:'SegmentedControl_segmentedControlRecipe_variant_subtle__1k6fove3',solid:'SegmentedControl_segmentedControlRecipe_variant_solid__1k6fove4',outline:'SegmentedControl_segmentedControlRecipe_variant_outline__1k6fove5'},fullWidth:{true:'SegmentedControl_segmentedControlRecipe_fullWidth_true__1k6fove6',false:'SegmentedControl_segmentedControlRecipe_fullWidth_false__1k6fove7'}},defaultVariants:{orientation:'horizontal',variant:'subtle',fullWidth:false},compoundVariants:[]});
+var segmentedIndicatorRecipe = createRuntimeFn({defaultClassName:'SegmentedControl_segmentedIndicatorRecipe__1k6fove8',variantClassNames:{variant:{subtle:'SegmentedControl_segmentedIndicatorRecipe_variant_subtle__1k6fove9',solid:'SegmentedControl_segmentedIndicatorRecipe_variant_solid__1k6fovea',outline:'SegmentedControl_segmentedIndicatorRecipe_variant_outline__1k6foveb'},orientation:{horizontal:'SegmentedControl_segmentedIndicatorRecipe_orientation_horizontal__1k6fovec',vertical:'SegmentedControl_segmentedIndicatorRecipe_orientation_vertical__1k6foved'}},defaultVariants:{variant:'subtle',orientation:'horizontal'},compoundVariants:[[{variant:'outline',orientation:'horizontal'},'SegmentedControl_segmentedIndicatorRecipe_compound_0__1k6fovee'],[{variant:'outline',orientation:'vertical'},'SegmentedControl_segmentedIndicatorRecipe_compound_1__1k6fovef']]});
+var segmentedItemBaseStyle = 'SegmentedControl_segmentedItemBaseStyle__1k6foveu';
+var segmentedItemIconStyle = 'SegmentedControl_segmentedItemIconStyle__1k6fove17';
+var segmentedItemRecipe = createRuntimeFn({defaultClassName:'SegmentedControl_segmentedItemRecipe__1k6fovev',variantClassNames:{size:{sm:'SegmentedControl_segmentedItemRecipe_size_sm__1k6fovew',md:'SegmentedControl_segmentedItemRecipe_size_md__1k6fovex',lg:'SegmentedControl_segmentedItemRecipe_size_lg__1k6fovey'},iconOnly:{true:'SegmentedControl_segmentedItemRecipe_iconOnly_true__1k6fovez',false:'SegmentedControl_segmentedItemRecipe_iconOnly_false__1k6fove10'},orientation:{horizontal:'SegmentedControl_segmentedItemRecipe_orientation_horizontal__1k6fove11',vertical:'SegmentedControl_segmentedItemRecipe_orientation_vertical__1k6fove12'}},defaultVariants:{size:'md',iconOnly:false,orientation:'horizontal'},compoundVariants:[[{iconOnly:true,orientation:'vertical'},'SegmentedControl_segmentedItemRecipe_compound_0__1k6fove13']]});
+var segmentedItemWrapperRecipe = createRuntimeFn({defaultClassName:'SegmentedControl_segmentedItemWrapperBase__1k6foveg',variantClassNames:{fullWidth:{true:'SegmentedControl_segmentedItemWrapperRecipe_fullWidth_true__1k6fovei',false:'SegmentedControl_segmentedItemWrapperRecipe_fullWidth_false__1k6fovej'},orientation:{horizontal:'SegmentedControl_segmentedItemWrapperRecipe_orientation_horizontal__1k6fovek',vertical:'SegmentedControl_segmentedItemWrapperRecipe_orientation_vertical__1k6fovel'},iconOnly:{true:'SegmentedControl_segmentedItemWrapperRecipe_iconOnly_true__1k6fovem',false:'SegmentedControl_segmentedItemWrapperRecipe_iconOnly_false__1k6foven'},size:{sm:'SegmentedControl_segmentedItemWrapperRecipe_size_sm__1k6foveo',md:'SegmentedControl_segmentedItemWrapperRecipe_size_md__1k6fovep',lg:'SegmentedControl_segmentedItemWrapperRecipe_size_lg__1k6foveq'}},defaultVariants:{fullWidth:false,orientation:'horizontal',iconOnly:false,size:'md'},compoundVariants:[[{iconOnly:true,size:'sm',orientation:'horizontal'},'SegmentedControl_segmentedItemWrapperRecipe_compound_0__1k6fover'],[{iconOnly:true,size:'md',orientation:'horizontal'},'SegmentedControl_segmentedItemWrapperRecipe_compound_1__1k6foves'],[{iconOnly:true,size:'lg',orientation:'horizontal'},'SegmentedControl_segmentedItemWrapperRecipe_compound_2__1k6fovet']]});
+
+export { itemOutlineStyle, itemSolidStyle, itemSubtleStyle, segmentedControlRecipe, segmentedIndicatorRecipe, segmentedItemBaseStyle, segmentedItemIconStyle, segmentedItemRecipe, segmentedItemWrapperRecipe };
+//# sourceMappingURL=SegmentedControl.css.js.map

package/dist/esm/components/navigation/SegmentedControl/SegmentedControl.css.js.map

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

package/dist/esm/components/navigation/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,240 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useCallback, useRef, useEffect, useMemo, useLayoutEffect, createContext, useContext } from 'react';
+import { cx } from '../../../utils/cx.js';
+import { segmentedIndicatorRecipe, segmentedControlRecipe } from './SegmentedControl.css.js';
+
+// --- Context ---
+const SegmentedControlContext = 
+/*#__PURE__*/ createContext(null);
+function useSegmentedControlContext() {
+    const ctx = useContext(SegmentedControlContext);
+    if (!ctx) {
+        throw new Error('SegmentedControlItem must be used within <SegmentedControl>');
+    }
+    return ctx;
+}
+function computeIndicatorRect(itemEl, variant, orientation) {
+    // Use offsetLeft/offsetTop (padding-box-relative) so the indicator
+    // aligns with the absolutely-positioned reference frame inside the root.
+    const x = itemEl.offsetLeft;
+    const y = itemEl.offsetTop;
+    const width = itemEl.offsetWidth;
+    const height = itemEl.offsetHeight;
+    if (variant === 'outline') {
+        if (orientation === 'horizontal') {
+            // 2px bar at the bottom of the item
+            return {
+                x,
+                y: y + height - 2,
+                width,
+                height: 2,
+            };
+        }
+        // vertical: 2px bar at the left of the item
+        return {
+            x,
+            y,
+            width: 2,
+            height,
+        };
+    }
+    // subtle / solid: full-segment background
+    return { x, y, width, height };
+}
+// --- Use isomorphic layout effect for SSR safety ---
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+// --- Component ---
+/**
+ * SegmentedControl — toolbar-density mutually exclusive selector.
+ *
+ * Use when you have 2-5 mutually exclusive states without separate panels
+ * (viewport mode, list/grid toggle, alignment). For content panels use Tabs;
+ * for form-style selection use RadioGroup.
+ *
+ * Compound API: pair `SegmentedControl` with `SegmentedControlItem`.
+ *
+ * @example
+ * ```tsx
+ * <SegmentedControl defaultValue="day">
+ *   <SegmentedControlItem value="day">Day</SegmentedControlItem>
+ *   <SegmentedControlItem value="week">Week</SegmentedControlItem>
+ *   <SegmentedControlItem value="month">Month</SegmentedControlItem>
+ * </SegmentedControl>
+ * ```
+ */
+const SegmentedControl = ({ value: valueProp, defaultValue, size = 'md', orientation = 'horizontal', variant = 'subtle', fullWidth = false, disabled = false, onChange, children, className, style, testId, ref, 'aria-label': ariaLabel = 'Segmented control', ...rest }) => {
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const isControlled = valueProp !== undefined;
+    const activeValue = isControlled ? valueProp : internalValue;
+    const setActiveValue = useCallback((next) => {
+        if (!isControlled) {
+            setInternalValue(next);
+        }
+        if (next !== activeValue) {
+            onChange?.(next);
+        }
+    }, [isControlled, onChange, activeValue]);
+    // --- Item registry for sliding indicator ---
+    const rootRef = useRef(null);
+    const itemsRef = useRef(new Map());
+    const setRootRef = useCallback((node) => {
+        rootRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    const registerItem = useCallback((itemValue, node) => {
+        if (node) {
+            itemsRef.current.set(itemValue, node);
+        }
+        else {
+            itemsRef.current.delete(itemValue);
+        }
+    }, []);
+    // --- Sliding indicator state ---
+    const [indicator, setIndicator] = useState(null);
+    const [hasMeasured, setHasMeasured] = useState(false);
+    const updateIndicator = useCallback(() => {
+        if (activeValue === undefined) {
+            setIndicator(null);
+            return;
+        }
+        const item = itemsRef.current.get(activeValue);
+        if (!item) {
+            setIndicator(null);
+            return;
+        }
+        setIndicator(computeIndicatorRect(item, variant, orientation));
+    }, [activeValue, variant, orientation]);
+    useIsomorphicLayoutEffect(() => {
+        updateIndicator();
+        // After first measure flip the flag so the indicator can transition on
+        // subsequent updates instead of animating from (0,0).
+        if (!hasMeasured) {
+            setHasMeasured(true);
+        }
+    }, [
+        updateIndicator,
+        activeValue,
+        variant,
+        orientation,
+        size,
+        fullWidth,
+        children,
+        hasMeasured,
+    ]);
+    // Roving-tabindex fallback: when no item matches activeValue, the group
+    // is otherwise unreachable via Tab. Promote the first non-disabled item
+    // to tabIndex=0 so users can enter the group with the keyboard.
+    useIsomorphicLayoutEffect(() => {
+        const root = rootRef.current;
+        if (!root)
+            return;
+        const items = Array.from(root.querySelectorAll('[data-segmented-item="true"]:not([data-disabled="true"])'));
+        const hasSelected = items.some(el => el.getAttribute('aria-pressed') === 'true');
+        if (!hasSelected && items[0]) {
+            items[0].tabIndex = 0;
+        }
+    }, [activeValue, children]);
+    // Re-measure on resize
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const root = rootRef.current;
+        if (!root)
+            return;
+        if (typeof ResizeObserver === 'undefined') {
+            const onResize = () => updateIndicator();
+            window.addEventListener('resize', onResize);
+            return () => window.removeEventListener('resize', onResize);
+        }
+        const ro = new ResizeObserver(() => updateIndicator());
+        ro.observe(root);
+        itemsRef.current.forEach(node => ro.observe(node));
+        return () => ro.disconnect();
+    }, [updateIndicator]);
+    // --- Keyboard navigation (roving) ---
+    const handleKeyDown = useCallback((e) => {
+        const root = rootRef.current;
+        if (!root)
+            return;
+        const isHorizontal = orientation === 'horizontal';
+        const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';
+        const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';
+        const isNavKey = e.key === nextKey ||
+            e.key === prevKey ||
+            e.key === 'Home' ||
+            e.key === 'End';
+        if (!isNavKey)
+            return;
+        const items = Array.from(root.querySelectorAll('[data-segmented-item="true"]:not([data-disabled="true"])'));
+        if (items.length === 0)
+            return;
+        const current = e.target;
+        const currentIndex = items.indexOf(current);
+        let nextIndex;
+        switch (e.key) {
+            case nextKey:
+                nextIndex =
+                    currentIndex === -1 || currentIndex === items.length - 1
+                        ? 0
+                        : currentIndex + 1;
+                break;
+            case prevKey:
+                nextIndex = currentIndex <= 0 ? items.length - 1 : currentIndex - 1;
+                break;
+            case 'Home':
+                nextIndex = 0;
+                break;
+            case 'End':
+                nextIndex = items.length - 1;
+                break;
+            default:
+                return;
+        }
+        e.preventDefault();
+        const target = items[nextIndex];
+        if (target) {
+            target.focus();
+            const nextValue = target.dataset['value'];
+            if (nextValue !== undefined) {
+                setActiveValue(nextValue);
+            }
+        }
+    }, [orientation, setActiveValue]);
+    // --- Context value ---
+    const contextValue = useMemo(() => ({
+        value: activeValue,
+        size,
+        variant,
+        orientation,
+        disabled,
+        fullWidth,
+        onChange: setActiveValue,
+        registerItem,
+    }), [
+        activeValue,
+        size,
+        variant,
+        orientation,
+        disabled,
+        fullWidth,
+        setActiveValue,
+        registerItem,
+    ]);
+    const indicatorClass = segmentedIndicatorRecipe({ variant, orientation });
+    return (jsx(SegmentedControlContext.Provider, { value: contextValue, children: jsxs("div", { ref: setRootRef, role: "group", "aria-label": ariaLabel, "aria-disabled": disabled || undefined, "aria-orientation": orientation, className: cx(segmentedControlRecipe({ orientation, variant, fullWidth }), className), style: style, "data-testid": testId, onKeyDown: handleKeyDown, ...rest, children: [indicator && (jsx("span", { "aria-hidden": "true", className: indicatorClass, style: {
+                        transform: `translate(${indicator.x}px, ${indicator.y}px)`,
+                        width: `${indicator.width}px`,
+                        height: `${indicator.height}px`,
+                        opacity: hasMeasured ? 1 : 0,
+                    } })), children] }) }));
+};
+SegmentedControl.displayName = 'SegmentedControl';
+
+export { SegmentedControl, useSegmentedControlContext };
+//# sourceMappingURL=SegmentedControl.js.map

package/dist/esm/components/navigation/SegmentedControl/SegmentedControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.js","sources":["../../../../../../src/components/navigation/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAwBA;AAEA;AACE;;AAGA;;AAEE;;AAIF;AACF;AAWA;;;AAOE;AACA;AACA;AACA;AAEA;AACE;;;;AAII;;AAEA;;;;;;;AAOF;;;;;;AAON;AAEA;AAEA;AAGA;AAEA;;;;;;;;;;;;;;;;;AAiBG;AACI;;AAoBL;;AAGA;;;;AAKI;AACE;;;;AAQN;;AAGA;AAEI;AACA;;;;AAGG;;AAEL;;;;;;AASI;;;;;;AAWN;AACE;;;;;;;;;;;;AAaA;;;;;;AAMF;;;;;;;;;AASC;;;;;AAMC;AACA;;AACA;AAKA;;AAIE;;AAEJ;;;;;AAKE;AACA;;AAEA;AACE;AACA;;;;AAKF;AACA;AACA;AACF;;AAIA;AAEI;AACA;;AAEA;;;AAIA;;;AAIE;AACF;;AAEA;AAKA;;AAEA;;AAGA;AACA;AACE;;;AAGM;AACA;;AAEN;AACE;;AAEF;;;AAGA;AACE;;AAEF;;;;AAKF;;;;AAIE;;;;AAIJ;;AAMF;AAEI;;;;;;AAMA;;AAED;;;;;;;;;AAUA;;AAKH;;AAuBY;AACA;;AAED;AAOb;AAEA;;"}

package/dist/esm/components/navigation/SegmentedControl/SegmentedControlItem.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useEffect, useRef, useCallback } from 'react';
+import { Tooltip } from '../../primitives/Tooltip/Tooltip.js';
+import { cx } from '../../../utils/cx.js';
+import { devWarn } from '../../../utils/devWarn.js';
+import { useSegmentedControlContext } from './SegmentedControl.js';
+import { segmentedItemIconStyle, segmentedItemRecipe, segmentedItemBaseStyle, segmentedItemWrapperRecipe, itemSubtleStyle, itemOutlineStyle, itemSolidStyle } from './SegmentedControl.css.js';
+
+function getVariantClass(variant) {
+    switch (variant) {
+        case 'solid':
+            return itemSolidStyle;
+        case 'outline':
+            return itemOutlineStyle;
+        case 'subtle':
+        default:
+            return itemSubtleStyle;
+    }
+}
+/**
+ * Individual segment inside a `SegmentedControl`.
+ *
+ * Supports text, icon-only, or icon + label segments. Pair icon-only
+ * segments with a `tooltip` so the action remains discoverable.
+ */
+const SegmentedControlItem = ({ value, children, icon, tooltip, disabled: itemDisabled = false, className, style, testId, onClick, onFocus, ref, ...rest }) => {
+    const { value: activeValue, size, variant, orientation, disabled: groupDisabled, fullWidth, onChange, registerItem, } = useSegmentedControlContext();
+    const isSelected = activeValue === value;
+    const isDisabled = groupDisabled || itemDisabled;
+    const hasLabel = children !== undefined && children !== null && children !== '';
+    const isIconOnly = !hasLabel && Boolean(icon);
+    const ariaLabelProp = rest['aria-label'];
+    const ariaLabelledByProp = rest['aria-labelledby'];
+    // Warn when an icon-only segment has no accessible name. Runs in an
+    // effect so it does not fire from the render path (which would double in
+    // StrictMode and on every rerender).
+    useEffect(() => {
+        if (isIconOnly && !tooltip && !ariaLabelProp && !ariaLabelledByProp) {
+            devWarn(`[SegmentedControl] Icon-only segment "${value}" has no tooltip or aria-label. ` +
+                'Add a tooltip prop or aria-label so the segment is accessible.');
+        }
+    }, [isIconOnly, tooltip, ariaLabelProp, ariaLabelledByProp, value]);
+    // Wrapper ref: this is the direct child of the SegmentedControl root and
+    // the measurement target for the sliding indicator. When `tooltip` is set
+    // the Tooltip introduces its own positioned wrapper between us and the
+    // button, which is why measuring the button itself would yield (0, 0)
+    // relative to that intermediate wrapper.
+    const wrapperRef = useRef(null);
+    const setWrapperRef = useCallback((node) => {
+        wrapperRef.current = node;
+        registerItem(value, node);
+    }, [registerItem, value]);
+    useEffect(() => {
+        return () => {
+            registerItem(value, null);
+        };
+    }, [registerItem, value]);
+    const handleClick = useCallback((e) => {
+        if (isDisabled)
+            return;
+        onChange(value);
+        onClick?.(e);
+    }, [isDisabled, onChange, value, onClick]);
+    // Resolve aria-label fallback for icon-only segments
+    const tooltipString = typeof tooltip === 'string' ? tooltip : undefined;
+    const resolvedAriaLabel = ariaLabelProp ?? (isIconOnly ? tooltipString : undefined);
+    const button = (jsxs("button", { ref: ref, type: "button", role: "button", "data-segmented-item": "true", "data-value": value, "data-disabled": isDisabled || undefined, "aria-pressed": isSelected, "aria-disabled": isDisabled || undefined, "aria-label": resolvedAriaLabel, tabIndex: isSelected && !isDisabled ? 0 : -1, disabled: isDisabled, onClick: handleClick, onFocus: onFocus, className: cx(segmentedItemBaseStyle, segmentedItemRecipe({
+            size,
+            iconOnly: isIconOnly,
+            orientation,
+        }), getVariantClass(variant), className), style: style, "data-testid": testId, ...rest, children: [icon && jsx("span", { className: segmentedItemIconStyle, children: icon }), hasLabel && jsx("span", { children: children })] }));
+    return (jsx("span", { ref: setWrapperRef, "data-segmented-item-wrapper": "true", className: segmentedItemWrapperRecipe({
+            fullWidth,
+            orientation,
+            iconOnly: isIconOnly,
+            size,
+        }), children: tooltip ? jsx(Tooltip, { title: tooltip, children: button }) : button }));
+};
+SegmentedControlItem.displayName = 'SegmentedControlItem';
+
+export { SegmentedControlItem };
+//# sourceMappingURL=SegmentedControlItem.js.map

package/dist/esm/components/navigation/SegmentedControl/SegmentedControlItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControlItem.js","sources":["../../../../../../src/components/navigation/SegmentedControl/SegmentedControlItem.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAkBA;;AAEI;AACE;AACF;AACE;AACF;AACA;AACE;;AAEN;AAEA;;;;;AAKG;AACI;;AAyBL;AACA;AACA;;AAIA;AACA;;;;;;;AASQ;;AAGR;;;;;;AAOA;AACA;AAEI;AACA;AACF;;AAKA;AACE;AACF;AACF;AAEA;AAEI;;;AAEA;;;AAMJ;AACA;AAGA;;AAmBQ;;AAED;;;;AAoBD;;;AAOR;AAEA;;"}

package/dist/esm/components/navigation/Tabs/Tab.js

@@ -65,7 +65,6 @@ const Tab = ({ value, children, icon, disabled = false, closable = false, onClos
     const variantClasses = getVariantClasses(variant, isActive, orientation);
     return (jsxs("button", { ref: ref, role: "tab", id: tabId, "aria-selected": isActive, "aria-controls": panelId, "aria-disabled": disabled || undefined, tabIndex: isActive ? 0 : -1, disabled: disabled, onClick: handleClick, onKeyDown: handleKeyDown, className: cx(tabBaseStyle, tabRecipe({ size, disabled, fullWidth }), variantClasses, className), style: {
             gap: vars.spacing.xs,
-            transition: `all ${vars.transitions.fast}`,
             ...style,
         }, "data-testid": testId, ...rest, children: [icon && (jsx("span", { className: tabIconStyle, style: {
                     width: `${sizeConfig.iconSize}px`,

package/dist/esm/components/navigation/Tabs/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../../../../../../src/components/navigation/Tabs/Tab.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAkCA;AACE;AACA;AACA;;AAGF;AAEA;;AAMI;AACE;;AAKM;AACA;;AAGR;AACE;AAIF;AACE;;AAIM;AACA;;AAGR;AACE;;AAEN;AAEA;AAEO;AAaL;AASA;AACA;AACA;AAEA;AACA;AAEA;;;;;AAMA;AAEI;;;;;;;;;;AAUF;AAIF;;AAGI;AACF;;AAMF;AAmBM;AACA;AACA;AACD;AAQK;AACA;;AAmBZ;AAEA;;"}
+{"version":3,"file":"Tab.js","sources":["../../../../../../src/components/navigation/Tabs/Tab.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAkCA;AACE;AACA;AACA;;AAGF;AAEA;;AAMI;AACE;;AAKM;AACA;;AAGR;AACE;AAIF;AACE;;AAIM;AACA;;AAGR;AACE;;AAEN;AAEA;AAEO;AAaL;AASA;AACA;AACA;AAEA;AACA;AAEA;;;;;AAMA;AAEI;;;;;;;;;;AAUF;AAIF;;AAGI;AACF;;AAMF;AAmBM;AACA;AACD;AAQK;AACA;;AAmBZ;AAEA;;"}

package/dist/esm/components/navigation/Tabs/TabPanel.js

@@ -5,12 +5,15 @@ import { cx } from '../../../utils/cx.js';
 import { tabPanelStyle } from './Tabs.css.js';
 
 // --- Component ---
-const TabPanel = ({ value, children, keepMounted = false, className, style, testId, ref, ...rest }) => {
-    const { activeValue, tabsId } = useTabsContext();
+const TabPanel = ({ value, children, keepMounted, className, style, testId, ref, ...rest }) => {
+    const ctx = useTabsContext();
+    const { activeValue, tabsId } = ctx;
     const isActive = activeValue === value;
+    // Explicit child prop wins over the parent cascade. Undefined = inherit.
+    const effectiveKeepMounted = keepMounted ?? ctx.keepMounted;
     const tabId = `tabs-${tabsId}-tab-${value}`;
     const panelId = `tabs-${tabsId}-panel-${value}`;
-    if (!isActive && !keepMounted) {
+    if (!isActive && !effectiveKeepMounted) {
         return null;
     }
     return (jsx("div", { ref: ref, role: "tabpanel", id: panelId, "aria-labelledby": tabId, tabIndex: isActive ? 0 : -1, hidden: !isActive || undefined, className: cx(tabPanelStyle, className), style: {

package/dist/esm/components/navigation/Tabs/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","sources":["../../../../../../src/components/navigation/Tabs/TabPanel.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAQA;AAEO;;AAWL;AAEA;AACA;AAEA;AACE;;;AAaI;AACA;AACD;AAOP;AAEA;;"}
+{"version":3,"file":"TabPanel.js","sources":["../../../../../../src/components/navigation/Tabs/TabPanel.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAQA;AAEO;AAUL;AACA;AACA;;AAGA;AAEA;AACA;AAEA;AACE;;;AAaI;AACA;AACD;AAOP;AAEA;;"}

package/dist/esm/components/navigation/Tabs/Tabs.css.js

@@ -1,4 +1,4 @@
-import './../../../assets/src/components/navigation/Tabs/Tabs.css.ts.vanilla-D7RGpDPC.css';
+import './../../../assets/src/components/navigation/Tabs/Tabs.css.ts.vanilla-CQucokdg.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
 var tabBaseStyle = 'Tabs_tabBaseStyle__v404x7i';

package/dist/esm/components/navigation/Tabs/Tabs.js

@@ -31,7 +31,7 @@ function useTabsContext() {
  * </Tabs>
  * ```
  */
-const Tabs = ({ value: valueProp, defaultValue, variant = 'underline', size = 'md', orientation = 'horizontal', fullWidth = false, pillsFrame = true, children, onChange, className, style, testId, ref, ...rest }) => {
+const Tabs = ({ value: valueProp, defaultValue, variant = 'underline', size = 'md', orientation = 'horizontal', fullWidth = false, pillsFrame = true, keepMounted = false, children, onChange, className, style, testId, ref, ...rest }) => {
     const autoId = useId();
     const tabsId = autoId;
     const [internalValue, setInternalValue] = useState(defaultValue ?? '');
@@ -51,6 +51,7 @@ const Tabs = ({ value: valueProp, defaultValue, variant = 'underline', size = 'm
         orientation,
         fullWidth,
         pillsFrame,
+        keepMounted,
         tabsId,
     }), [
         activeValue,
@@ -60,6 +61,7 @@ const Tabs = ({ value: valueProp, defaultValue, variant = 'underline', size = 'm
         orientation,
         fullWidth,
         pillsFrame,
+        keepMounted,
         tabsId,
     ]);
     return (jsx(TabsContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cx(tabsRootRecipe({ orientation }), className), style: style, "data-testid": testId, ...rest, children: children }) }));

package/dist/esm/components/navigation/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../../../../src/components/navigation/Tabs/Tabs.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAcA;AAEA;;AAGE;;AAEE;;AAEF;AACF;AAEA;AAEA;;;;;;;;;;;;;;;;AAgBG;;AAiBD;;AAGA;AACA;;AAGA;;;;AAKI;AACF;AAIF;;;;;;;;;AAUG;;;;;;;;;AAUA;AAGH;AAaF;AAEA;;"}
+{"version":3,"file":"Tabs.js","sources":["../../../../../../src/components/navigation/Tabs/Tabs.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAcA;AAEA;;AAGE;;AAEE;;AAEF;AACF;AAEA;AAEA;;;;;;;;;;;;;;;;AAgBG;AACI;AAiBL;;AAGA;AACA;;AAGA;;;;AAKI;AACF;AAIF;;;;;;;;;;AAWG;;;;;;;;;;AAWA;AAGH;AAaF;AAEA;;"}

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

@@ -0,0 +1,16 @@
+import './../../../assets/src/components/primitives/Avatar/Avatar.css.ts.vanilla-jG5hUudL.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var avatarBgVar = 'var(--avatarBgVar__e438tx0)';
+var avatarFallbackStyle = 'Avatar_avatarFallbackStyle__e438txe';
+var avatarGroupItemStyle = 'Avatar_avatarGroupItemStyle__e438txq';
+var avatarGroupRootStyle = 'Avatar_avatarGroupRootStyle__e438txp';
+var avatarGroupSpacingVar = 'var(--avatarGroupSpacingVar__e438txo)';
+var avatarImageInheritRadius = 'Avatar_avatarImageInheritRadius__e438txg';
+var avatarImageStyle = 'Avatar_avatarImageStyle__e438txf';
+var avatarRecipe = createRuntimeFn({defaultClassName:'Avatar_avatarRecipe__e438tx2',variantClassNames:{size:{xs:'Avatar_avatarRecipe_size_xs__e438tx3',sm:'Avatar_avatarRecipe_size_sm__e438tx4',md:'Avatar_avatarRecipe_size_md__e438tx5',lg:'Avatar_avatarRecipe_size_lg__e438tx6',xl:'Avatar_avatarRecipe_size_xl__e438tx7',xxl:'Avatar_avatarRecipe_size_xxl__e438tx8'},shape:{circle:'Avatar_avatarRecipe_shape_circle__e438tx9',square:'Avatar_avatarRecipe_shape_square__e438txa',rounded:'Avatar_avatarRecipe_shape_rounded__e438txb'},bordered:{true:'Avatar_avatarRecipe_bordered_true__e438txc'},interactive:{true:'Avatar_avatarRecipe_interactive_true__e438txd'}},defaultVariants:{size:'md',shape:'circle'},compoundVariants:[]});
+var avatarStatusRecipe = createRuntimeFn({defaultClassName:'Avatar_avatarStatusRecipe__e438txh',variantClassNames:{size:{xs:'Avatar_avatarStatusRecipe_size_xs__e438txi',sm:'Avatar_avatarStatusRecipe_size_sm__e438txj',md:'Avatar_avatarStatusRecipe_size_md__e438txk',lg:'Avatar_avatarStatusRecipe_size_lg__e438txl',xl:'Avatar_avatarStatusRecipe_size_xl__e438txm',xxl:'Avatar_avatarStatusRecipe_size_xxl__e438txn'}},defaultVariants:{size:'md'},compoundVariants:[]});
+var avatarStatusVar = 'var(--avatarStatusVar__e438tx1)';
+
+export { avatarBgVar, avatarFallbackStyle, avatarGroupItemStyle, avatarGroupRootStyle, avatarGroupSpacingVar, avatarImageInheritRadius, avatarImageStyle, avatarRecipe, avatarStatusRecipe, avatarStatusVar };
+//# sourceMappingURL=Avatar.css.js.map

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

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