entangle-ui 0.7.0 → 0.8.0

package/dist/esm/components/feedback/ProgressBar/ProgressBar.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { vars } from '../../../theme/contract.css.js';
+import { cx } from '../../../utils/cx.js';
+import { progressFillWidthVar, progressColorVar, progressFillStripedAnimatedStyle, progressFillStripedStyle, progressFillBaseStyle, progressIndeterminateStyle, progressOverlayLabelStyle, progressTrackRecipe, progressInlineLabelStyle, progressRootStyle } from './ProgressBar.css.js';
+
+const NAMED_COLOR_MAP = {
+    primary: vars.colors.accent.primary,
+    success: vars.colors.accent.success,
+    warning: vars.colors.accent.warning,
+    error: vars.colors.accent.error,
+};
+function resolveColor(color) {
+    return NAMED_COLOR_MAP[color] ?? color;
+}
+function clampValue(value, min, max) {
+    return Math.max(min, Math.min(value, max));
+}
+function toPercent(clamped, min, max) {
+    if (max === min)
+        return 0;
+    return ((clamped - min) / (max - min)) * 100;
+}
+function deriveValueText(ariaValueText, label) {
+    if (ariaValueText !== undefined)
+        return ariaValueText;
+    if (typeof label === 'string')
+        return label;
+    if (typeof label === 'number')
+        return String(label);
+    return undefined;
+}
+/**
+ * Linear progress indicator.
+ *
+ * Determinate when `value` is provided; indeterminate (animated sliding bar)
+ * when `value` is `undefined`. Supports inline / overlay / custom labels,
+ * striped texture (optionally animated), and arbitrary CSS colors. Honors
+ * `prefers-reduced-motion`.
+ *
+ * @example
+ * ```tsx
+ * <ProgressBar value={60} />
+ * <ProgressBar value={50} showLabel="inline" />
+ * <ProgressBar size="lg" value={75} striped animated />
+ * <ProgressBar /> // indeterminate
+ * ```
+ */
+const ProgressBar = /*#__PURE__*/ React.memo(({ value, min = 0, max = 100, size = 'md', color = 'primary', showLabel = false, label, striped = false, animated = false, ariaLabel, ariaValueText, className, style, testId, ref, ...rest }) => {
+    const indeterminate = value === undefined;
+    const clampedValue = indeterminate ? 0 : clampValue(value, min, max);
+    const percent = toPercent(clampedValue, min, max);
+    const resolvedColor = resolveColor(color);
+    const inlineVars = assignInlineVars({
+        [progressColorVar]: resolvedColor,
+        [progressFillWidthVar]: `${percent}%`,
+    });
+    const fillClassName = cx(progressFillBaseStyle, striped && progressFillStripedStyle, striped && animated && progressFillStripedAnimatedStyle);
+    const percentText = `${Math.round(percent)}%`;
+    const labelContent = label ?? (indeterminate ? null : percentText);
+    const ariaProps = {
+        'aria-valuemin': min,
+        'aria-valuemax': max,
+        'aria-label': ariaLabel ?? (indeterminate ? 'Loading' : undefined),
+    };
+    if (!indeterminate) {
+        ariaProps['aria-valuenow'] = clampedValue;
+        const valueText = deriveValueText(ariaValueText, label);
+        if (valueText !== undefined) {
+            ariaProps['aria-valuetext'] = valueText;
+        }
+    }
+    return (jsxs("div", { ref: ref, role: "progressbar", className: cx(progressRootStyle, className), style: { ...inlineVars, ...style }, "data-testid": testId, "data-indeterminate": indeterminate ? 'true' : undefined, ...ariaProps, ...rest, children: [jsxs("div", { className: progressTrackRecipe({ size }), children: [indeterminate ? (jsx("div", { className: progressIndeterminateStyle, "aria-hidden": true })) : (jsx("div", { className: fillClassName, "aria-hidden": true })), showLabel === 'overlay' && labelContent !== null ? (jsx("span", { className: progressOverlayLabelStyle, children: labelContent })) : null] }), showLabel === 'inline' && labelContent !== null ? (jsx("span", { className: progressInlineLabelStyle, children: labelContent })) : null] }));
+});
+ProgressBar.displayName = 'ProgressBar';
+
+export { ProgressBar };
+//# sourceMappingURL=ProgressBar.js.map

package/dist/esm/components/feedback/ProgressBar/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","sources":["../../../../../../src/components/feedback/ProgressBar/ProgressBar.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAoBA;AACE;AACA;AACA;AACA;;AAGF;AACE;AACF;AAEA;AACE;AACF;AAEA;;AACmB;AACjB;AACF;AAEA;;AAImC;;AACF;;AACA;AAC/B;AACF;AAEA;;;;;;;;;;;;;;;AAeG;AACI;AAmBH;AACA;;AAEA;;;AAIE;AACD;AAED;;AAOA;AAEA;AACE;AACA;AACA;;;AAGA;;AAEA;AACE;;;AAIJ;AA0BF;AAGF;;"}

package/dist/esm/components/feedback/Skeleton/Skeleton.css.js

@@ -0,0 +1,13 @@
+import './../../../assets/src/utils/animations.css.ts.vanilla-CRLFsBSV.css';
+import './../../../assets/src/components/feedback/Skeleton/Skeleton.css.ts.vanilla-Dk2_SSsC.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var skeletonGroupGapVar = 'var(--skeletonGroupGapVar__m5ywe0a)';
+var skeletonGroupRecipe = createRuntimeFn({defaultClassName:'Skeleton_skeletonGroupRecipe__m5ywe0b',variantClassNames:{direction:{row:'Skeleton_skeletonGroupRecipe_direction_row__m5ywe0c',column:'Skeleton_skeletonGroupRecipe_direction_column__m5ywe0d'}},defaultVariants:{direction:'column'},compoundVariants:[]});
+var skeletonHeightVar = 'var(--skeletonHeightVar__m5ywe01)';
+var skeletonRadiusVar = 'var(--skeletonRadiusVar__m5ywe02)';
+var skeletonRecipe = createRuntimeFn({defaultClassName:'Skeleton_skeletonRecipe__m5ywe03',variantClassNames:{shape:{rect:'Skeleton_skeletonRecipe_shape_rect__m5ywe04',circle:'Skeleton_skeletonRecipe_shape_circle__m5ywe05',line:'Skeleton_skeletonRecipe_shape_line__m5ywe06'},animation:{pulse:'Skeleton_skeletonRecipe_animation_pulse__m5ywe07',wave:'Skeleton_skeletonRecipe_animation_wave__m5ywe08',none:'Skeleton_skeletonRecipe_animation_none__m5ywe09'}},defaultVariants:{shape:'rect',animation:'pulse'},compoundVariants:[]});
+var skeletonWidthVar = 'var(--skeletonWidthVar__m5ywe00)';
+
+export { skeletonGroupGapVar, skeletonGroupRecipe, skeletonHeightVar, skeletonRadiusVar, skeletonRecipe, skeletonWidthVar };
+//# sourceMappingURL=Skeleton.css.js.map

package/dist/esm/components/feedback/Skeleton/Skeleton.css.js.map

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

package/dist/esm/components/feedback/Skeleton/Skeleton.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { vars } from '../../../theme/contract.css.js';
+import { cx } from '../../../utils/cx.js';
+import { devWarn } from '../../../utils/devWarn.js';
+import { skeletonRadiusVar, skeletonHeightVar, skeletonWidthVar, skeletonRecipe } from './Skeleton.css.js';
+
+const LINE_DEFAULT_HEIGHT = '12px';
+const SHAPE_RADIUS_FALLBACK = {
+    rect: vars.borderRadius.sm,
+    line: vars.borderRadius.lg,
+    circle: '50%',
+};
+function resolveDimension(value) {
+    if (value === undefined)
+        return undefined;
+    return typeof value === 'number' ? `${value}px` : value;
+}
+function resolveDefaults(shape, width, height, borderRadius) {
+    const resolvedWidth = resolveDimension(width) ?? '100%';
+    let resolvedHeight = resolveDimension(height);
+    if (resolvedHeight === undefined) {
+        if (shape === 'line') {
+            resolvedHeight = LINE_DEFAULT_HEIGHT;
+        }
+        else if (shape === 'circle') {
+            resolvedHeight = resolvedWidth;
+        }
+        else {
+            resolvedHeight = '100%';
+        }
+    }
+    const resolvedRadius = resolveDimension(borderRadius) ?? SHAPE_RADIUS_FALLBACK[shape];
+    return {
+        width: resolvedWidth,
+        height: resolvedHeight,
+        radius: resolvedRadius,
+    };
+}
+/**
+ * Loading-placeholder block.
+ *
+ * Renders a rectangle, circle, or line shape with a configurable animation
+ * (`pulse`, `wave`, `none`). Use it while waiting for real content to load.
+ *
+ * Skeletons are decorative — they set `aria-hidden="true"` and `aria-busy="true"`
+ * but do not announce themselves. The surrounding region should announce
+ * the loading state (e.g. via `Spinner` or `EmptyState loading`).
+ *
+ * @example
+ * ```tsx
+ * <Skeleton width={120} height={16} />
+ * <Skeleton shape="circle" width={32} />
+ * <Skeleton shape="line" width="60%" />
+ * <Skeleton animation="wave" height={80} />
+ * ```
+ */
+const Skeleton = /*#__PURE__*/ React.memo(({ shape = 'rect', width, height, borderRadius, animation = 'pulse', className, style, testId, ref, ...rest }) => {
+    if (shape === 'circle' &&
+        width !== undefined &&
+        height !== undefined &&
+        width !== height) {
+        devWarn('[Skeleton] shape="circle" expects equal width and height; received width=%o, height=%o.', width, height);
+    }
+    const { width: w, height: h, radius, } = resolveDefaults(shape, width, height, borderRadius);
+    const inlineVars = assignInlineVars({
+        [skeletonWidthVar]: w,
+        [skeletonHeightVar]: h,
+        [skeletonRadiusVar]: radius,
+    });
+    return (jsx("div", { ref: ref, "aria-hidden": "true", "aria-busy": "true", className: cx(skeletonRecipe({ shape, animation }), className), style: { ...inlineVars, ...style }, "data-testid": testId, "data-shape": shape, "data-animation": animation, ...rest }));
+});
+Skeleton.displayName = 'Skeleton';
+
+export { Skeleton };
+//# sourceMappingURL=Skeleton.js.map

package/dist/esm/components/feedback/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sources":["../../../../../../src/components/feedback/Skeleton/Skeleton.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAeA;AAEA;AACE;AACA;AACA;;AAGF;;AAG2B;AACzB;AACF;AAEA;;AAQE;AACA;AACE;;;AAEO;;;;;;;;;AAWP;AACA;AACA;;AAEJ;AAEA;;;;;;;;;;;;;;;;;AAiBG;AACI;;AAeD;AACA;;AAGA;;;;;;;AAiBD;;AAeH;AAGF;;"}

package/dist/esm/components/feedback/Skeleton/SkeletonGroup.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { vars } from '../../../theme/contract.css.js';
+import { cx } from '../../../utils/cx.js';
+import { Skeleton } from './Skeleton.js';
+import { skeletonGroupGapVar, skeletonGroupRecipe } from './Skeleton.css.js';
+
+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,
+];
+function resolveSpacing(value) {
+    if (typeof value === 'string')
+        return value;
+    const clamped = Math.max(0, Math.min(SPACING_SCALE.length - 1, value));
+    const index = Math.floor(clamped);
+    return SPACING_SCALE[index] ?? vars.spacing.sm;
+}
+/**
+ * Lays out one or more `Skeleton` items consistently — handy for "show
+ * five skeleton rows then real data" patterns.
+ *
+ * Pass `count` to auto-generate that many skeletons (using `itemProps` to
+ * configure them), or pass `children` to lay out custom skeleton shapes
+ * yourself. `direction` and `spacing` control the flex container.
+ *
+ * @example
+ * ```tsx
+ * // Five lines stacked vertically
+ * <SkeletonGroup count={5} itemProps={{ shape: 'line' }} />
+ *
+ * // Custom composition
+ * <SkeletonGroup direction="row" spacing={3}>
+ *   <Skeleton shape="circle" width={32} />
+ *   <Skeleton shape="line" width={120} />
+ * </SkeletonGroup>
+ * ```
+ */
+const SkeletonGroup = /*#__PURE__*/ React.memo(({ count, spacing = 2, direction = 'column', itemProps, children, className, style, testId, ref, ...rest }) => {
+    const inlineVars = assignInlineVars({
+        [skeletonGroupGapVar]: resolveSpacing(spacing),
+    });
+    const content = children ??
+        Array.from({ length: count ?? 0 }, (_, i) => (jsx(Skeleton, { ...itemProps }, i)));
+    return (jsx("div", { ref: ref, "aria-hidden": "true", "aria-busy": "true", className: cx(skeletonGroupRecipe({ direction }), className), style: { ...inlineVars, ...style }, "data-testid": testId, ...rest, children: content }));
+});
+SkeletonGroup.displayName = 'SkeletonGroup';
+
+export { SkeletonGroup };
+//# sourceMappingURL=SkeletonGroup.js.map

package/dist/esm/components/feedback/Skeleton/SkeletonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonGroup.js","sources":["../../../../../../src/components/feedback/Skeleton/SkeletonGroup.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAUA;;;;;;;;;;AAWA;;AACiC;;;;AAIjC;AAEA;;;;;;;;;;;;;;;;;;;AAmBG;AACI;;AAcD;AACD;;AAIC;AAIF;AAaF;AAGF;;"}

package/dist/esm/components/feedback/Spinner/Spinner.css.js

@@ -1,4 +1,4 @@
-import './../../../assets/src/utils/animations.css.ts.vanilla-DOVlpljP.css';
+import './../../../assets/src/utils/animations.css.ts.vanilla-CRLFsBSV.css';
 import './../../../assets/src/components/feedback/Spinner/Spinner.css.ts.vanilla-DEUewqdK.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 

package/dist/esm/components/feedback/Toast/ToastItem.css.js

@@ -1,4 +1,4 @@
-import './../../../assets/src/components/feedback/Toast/ToastItem.css.ts.vanilla-D6UuPKAj.css';
+import './../../../assets/src/components/feedback/Toast/ToastItem.css.ts.vanilla-DUeXqiaH.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
 var actionButton = createRuntimeFn({defaultClassName:'ToastItem_actionButton__xlinlde',variantClassNames:{severity:{info:'ToastItem_actionButton_severity_info__xlinldf',success:'ToastItem_actionButton_severity_success__xlinldg',warning:'ToastItem_actionButton_severity_warning__xlinldh',error:'ToastItem_actionButton_severity_error__xlinldi'}},defaultVariants:{severity:'info'},compoundVariants:[]});

package/dist/esm/components/form/InputWrapper.css.js

@@ -1,4 +1,4 @@
-import './../../assets/src/components/form/InputWrapper.css.ts.vanilla-Bl7u62PI.css';
+import './../../assets/src/components/form/InputWrapper.css.ts.vanilla-CLpKbEjq.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
 var inputWrapperRecipe = createRuntimeFn({defaultClassName:'InputWrapper_inputWrapperRecipe__1h1gl4m0',variantClassNames:{size:{sm:'InputWrapper_inputWrapperRecipe_size_sm__1h1gl4m1',md:'InputWrapper_inputWrapperRecipe_size_md__1h1gl4m2',lg:'InputWrapper_inputWrapperRecipe_size_lg__1h1gl4m3'},error:{true:'InputWrapper_inputWrapperRecipe_error_true__1h1gl4m4',false:'InputWrapper_inputWrapperRecipe_error_false__1h1gl4m5'},disabled:{true:'InputWrapper_inputWrapperRecipe_disabled_true__1h1gl4m6',false:'InputWrapper_inputWrapperRecipe_disabled_false__1h1gl4m7'},focused:{true:'InputWrapper_inputWrapperRecipe_focused_true__1h1gl4m8',false:'InputWrapper_inputWrapperRecipe_focused_false__1h1gl4m9'}},defaultVariants:{size:'md',error:false,disabled:false,focused:false},compoundVariants:[[{focused:true,error:false},'InputWrapper_inputWrapperRecipe_compound_0__1h1gl4ma'],[{focused:false,error:false,disabled:false},'InputWrapper_inputWrapperRecipe_compound_1__1h1gl4mb'],[{focused:false,error:false,disabled:true},'InputWrapper_inputWrapperRecipe_compound_2__1h1gl4mc']]});

package/dist/esm/components/layout/Accordion/Accordion.css.js

@@ -1,4 +1,4 @@
-import './../../../assets/src/components/layout/Accordion/Accordion.css.ts.vanilla-Ck5Yew0e.css';
+import './../../../assets/src/components/layout/Accordion/Accordion.css.ts.vanilla-CJQum8px.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
 var accordionGapVar = 'var(--accordionGapVar__1j9ah930)';

package/dist/esm/components/layout/ScrollArea/ScrollArea.js

@@ -2,6 +2,8 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useId, useRef, useState, useCallback, useEffect } from 'react';
 import { cx } from '../../../utils/cx.js';
+import { useMergedRef } from '../../../hooks/useMergedRef/useMergedRef.js';
+import { useResizeObserver } from '../../../hooks/useResizeObserver/useResizeObserver.js';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { fadeMaskSizeVar, scrollbarPaddingVar, scrollbarWidthVar, viewportRecipe, fadeMaskVisible, fadeMaskHiddenStyle, fadeMaskTop, fadeMaskBase, fadeMaskBottom, fadeMaskLeft, fadeMaskRight, thumbDragging, thumbVertical, thumbBase, scrollbarVisible, scrollbarHidden, scrollbarVertical, thumbHorizontal, scrollbarHorizontal, rootAutoFill, rootStyle } from './ScrollArea.css.js';
 
@@ -184,19 +186,24 @@ const ScrollArea = ({ children, direction = 'vertical', scrollbarVisibility = 'a
             vp.scrollLeft = clickRatio * (vp.scrollWidth - vp.clientWidth);
         }
     }, []);
-    // Observe resize
+    // Initial measurement once the viewport is mounted.
+    useEffect(() => {
+        if (viewportRef.current)
+            recalculate();
+    }, [recalculate]);
+    useResizeObserver(viewportRef, recalculate);
+    // Also observe the first child so the scrollbar reacts to content growth.
+    // The child is user-supplied content with no stable ref — kept inline since
+    // useResizeObserver is single-target.
     useEffect(() => {
         const vp = viewportRef.current;
         if (!vp)
             return;
-        recalculate();
-        const ro = new ResizeObserver(() => {
-            recalculate();
-        });
-        ro.observe(vp);
-        if (vp.firstElementChild) {
-            ro.observe(vp.firstElementChild);
-        }
+        const child = vp.firstElementChild;
+        if (!child || typeof ResizeObserver === 'undefined')
+            return;
+        const ro = new ResizeObserver(() => recalculate());
+        ro.observe(child);
         return () => ro.disconnect();
     }, [recalculate]);
     // Cleanup timer
@@ -207,17 +214,7 @@ const ScrollArea = ({ children, direction = 'vertical', scrollbarVisibility = 'a
             }
         };
     }, []);
-    // Set ref
-    const setViewportRef = useCallback((node) => {
-        viewportRef.current = node;
-        if (typeof externalRef === 'function') {
-            externalRef(node);
-        }
-        else if (externalRef && typeof externalRef === 'object') {
-            externalRef.current =
-                node;
-        }
-    }, [externalRef]);
+    const setViewportRef = useMergedRef(viewportRef, externalRef);
     const isScrollbarShown = scrollbarVisibility === 'never' ? false : scrollbarVisibleState;
     const rootInlineStyle = {
         ...assignInlineVars({

package/dist/esm/components/layout/ScrollArea/ScrollArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.js","sources":["../../../../../../src/components/layout/ScrollArea/ScrollArea.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AA8BA;AAEO;AAsBL;AACA;AACA;;;;;;;;;AAWA;AAGA;;AAEA;AACA;;;;;;;;;AAYA;AACE;AACA;;;;AAIE;;;;AAIE;;;AAGA;;;;;;AAOF;;;;AAIE;;;AAGA;;;;;;AAOF;AACA;AACA;AACA;;AAEJ;;AAGA;;;;;;AAKE;AACE;;AAGF;AACE;;;;;;;;AASJ;AAEI;AACA;AACA;AAEA;AACA;;;AAGA;;;AAGF;;AAKF;;;AAGI;AACE;AACA;;;AAGN;AAEA;AACE;;;AAEO;AACL;;;;;;;;;AAWA;AACA;;;AAGA;;AAGA;;;;;;;;;;;;;AAeJ;AAEI;;AACA;AACA;;AAEA;AAEA;;;;AAIE;;;;;;;AAMA;;;;AAON;;AAEE;;;;AAME;AACA;;;AAMA;AACE;AACA;;;AAEA;AACA;;;;;AAQJ;AACA;;AAEA;AAEA;AACE;AACF;AACA;AACA;AACE;;AAGF;AACF;;;AAIE;AACE;AACE;;AAEJ;;;AAIF;AAEI;AACA;;;AAEO;AACJ;AACC;;AAEN;AAIF;AAGA;AACE;AACE;AACA;AACA;;;AAGA;AACI;AAED;;;AAGH;AACI;AACD;;AAEL;;;AA2EU;;AAIQ;;;;;AAmBT;AAqBC;;AAIQ;;AAGR;;;;;AAkBD;AAUb;AAEA;;"}
+{"version":3,"file":"ScrollArea.js","sources":["../../../../../../src/components/layout/ScrollArea/ScrollArea.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAgCA;AAEO;AAsBL;AACA;AACA;;;;;;;;;AAWA;AAGA;;AAEA;AACA;;;;;;;;;AAYA;AACE;AACA;;;;AAIE;;;;AAIE;;;AAGA;;;;;;AAOF;;;;AAIE;;;AAGA;;;;;;AAOF;AACA;AACA;AACA;;AAEJ;;AAGA;;;;;;AAKE;AACE;;AAGF;AACE;;;;;;;;AASJ;AAEI;AACA;AACA;AAEA;AACA;;;AAGA;;;AAGF;;AAKF;;;AAGI;AACE;AACA;;;AAGN;AAEA;AACE;;;AAEO;AACL;;;;;;;;;AAWA;AACA;;;AAGA;;AAGA;;;;;;;;;;;;;AAeJ;AAEI;;AACA;AACA;;AAEA;AAEA;;;;AAIE;;;;;;;AAMA;;;;AAON;;AAEE;;;;AAME;AACA;;;AAMA;AACE;AACA;;;AAEA;AACA;;;;;;AAQqB;AAC3B;AAEA;;;;;AAME;AACA;;AACA;AACA;;;AAGA;AACA;AACF;;;AAIE;AACE;AACE;;AAEJ;;;AAKF;AAGA;AACE;AACE;AACA;AACA;;;AAGA;AACI;AAED;;;AAGH;AACI;AACD;;AAEL;;;AA2EU;;AAIQ;;;;;AAmBT;AAqBC;;AAIQ;;AAGR;;;;;AAkBD;AAUb;AAEA;;"}

package/dist/esm/components/layout/SplitPane/SplitPane.js

@@ -2,6 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import React, { useRef, useState, useMemo, useCallback, useEffect } from 'react';
 import { cx } from '../../../utils/cx.js';
+import { useResizeObserver } from '../../../hooks/useResizeObserver/useResizeObserver.js';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { dividerSizeVar, dividerRecipe, containerRecipe } from './SplitPane.css.js';
 
@@ -260,16 +261,6 @@ const SplitPane = ({ direction = 'horizontal', panels: panelConfigs = [], sizes:
     }, [direction, dividerSize, panelCount]);
     useEffect(() => {
         recalculate();
-        const container = containerRef.current;
-        if (!container || typeof ResizeObserver === 'undefined')
-            return;
-        const ro = new ResizeObserver(() => {
-            recalculate();
-        });
-        ro.observe(container);
-        return () => {
-            ro.disconnect();
-        };
     }, [
         recalculate,
         panelCount,
@@ -278,6 +269,7 @@ const SplitPane = ({ direction = 'horizontal', panels: panelConfigs = [], sizes:
         isControlled,
         stablePanelConfigs,
     ]);
+    useResizeObserver(containerRef, recalculate);
     // -----------------------------------------------------------------------
     // Pointer resize handlers
     // -----------------------------------------------------------------------

package/dist/esm/components/layout/SplitPane/SplitPane.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitPane.js","sources":["../../../../../../src/components/layout/SplitPane/SplitPane.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAkBA;AACA;AACA;AAEA;;;AAGG;AACH;;AAIiC;;AACM;;AAErC;AACE;AACA;AAAwB;;AAE1B;AACF;AAEA;;AAEG;AACH;AAKE;AAGI;AACA;AAAU;;AAEZ;;;AAKF;AACE;AACE;;;AAEA;;;AAIJ;AACA;AAGA;AACF;AAEA;;AAEG;AACH;;AAMI;AACA;AAAU;;AAEV;;AAEA;;AACA;AACF;AACF;AAEA;;;AAGG;AACH;AAKE;;AAEA;AACE;AACA;AACD;AACD;;AAIA;AACE;AACE;AAA+B;AAC/B;AACF;AAEA;;AAEE;;;;;AAIE;;AACA;;;;AAIF;;;;AAEG;;AAEL;AACE;AAA+B;AAC/B;AACF;AAEA;;AAEE;;;;;AAIE;;AACA;;;;AAIF;;;;AAIJ;AACF;AAEA;;;;AAIG;AACH;;;;;;;;;AAiBE;AACE;;AAEA;AACA;AACA;;AAGA;AACE;;;;AAGA;;;;AAKF;;;;AAGA;;;;AAKJ;AAEA;AACA;AAEA;AACA;AACA;AAEA;;;;;;;;;;;;;;AAcG;;AAgBD;;;;;AAMA;AACA;;;AAIA;;AAGA;;;;AAKA;;;;;;;AAQE;AACD;;;;;;AAMC;;;;;AAOF;AACE;;AAQA;;;AAGA;AAEA;;AAGE;;AAEE;;AAEE;AACA;AACE;;AAOF;AACA;;;AAUF;AAMF;;;AAIJ;AACE;AACA;AAAkC;AAElC;;AAGI;;AACmB;;;;;AAMvB;AAEA;AACA;;AAEA;AACE;AACF;AACA;AAEA;;AAEA;AACF;;;;;;;AAOC;;;;;;;;AAYG;AACA;AACF;;;;AAQE;AACA;AAEA;;AAEA;;;AAKA;AACA;AAEA;AACA;AACA;AACA;AAEA;;AAGA;AACA;;AAGA;AACA;;;;AAMA;;AAEE;;AAEE;AACE;;;;;AAIF;;;AAIJ;;AAEE;;AAEE;AACE;;;;;AAIF;;;;;;;;;;;;;;AAaF;AACA;;AAGA;;AAEE;;AACK;;AAEL;;;;;;AAOF;;;AAEA;;;AAGA;;;AAEA;;AAEF;AAEA;AACA;AACA;AACA;;;;;;;AAcA;AACF;;;;;;;;AASC;;;;AAQC;AACE;;;AAEA;;;;;;;AAYF;;;;AAMA;AACE;;AACK;AACL;;AACK;;AAEL;AACA;;AAEE;;AAEA;;;AAKA;;AAEE;AACA;AACA;;AAIA;;;;AAGA;AACA;AACA;;;AAGC;AACD;;;;;AAMF;AACA;;;;;;;;;AAUJ;AAEA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AAEA;AACE;;;AAGF;AACE;;;AAGF;AACE;;;AAGF;AACE;;;AAIF;AACA;AACA;;;;;;;AAaA;AACF;;;;;;;;;AAUC;;;;AAOH;AAEI;AACA;;;AAEO;AACJ;;AAEL;;;;;;;;AAaA;;;AAGE;;;;AAKF;;AAWA;;AAEE;AAEA;;AAeM;AACD;AAEC;;;AASV;AAEA;AAWF;AAEA;;"}
+{"version":3,"file":"SplitPane.js","sources":["../../../../../../src/components/layout/SplitPane/SplitPane.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAmBA;AACA;AACA;AAEA;;;AAGG;AACH;;AAIiC;;AACM;;AAErC;AACE;AACA;AAAwB;;AAE1B;AACF;AAEA;;AAEG;AACH;AAKE;AAGI;AACA;AAAU;;AAEZ;;;AAKF;AACE;AACE;;;AAEA;;;AAIJ;AACA;AAGA;AACF;AAEA;;AAEG;AACH;;AAMI;AACA;AAAU;;AAEV;;AAEA;;AACA;AACF;AACF;AAEA;;;AAGG;AACH;AAKE;;AAEA;AACE;AACA;AACD;AACD;;AAIA;AACE;AACE;AAA+B;AAC/B;AACF;AAEA;;AAEE;;;;;AAIE;;AACA;;;;AAIF;;;;AAEG;;AAEL;AACE;AAA+B;AAC/B;AACF;AAEA;;AAEE;;;;;AAIE;;AACA;;;;AAIF;;;;AAIJ;AACF;AAEA;;;;AAIG;AACH;;;;;;;;;AAiBE;AACE;;AAEA;AACA;AACA;;AAGA;AACE;;;;AAGA;;;;AAKF;;;;AAGA;;;;AAKJ;AAEA;AACA;AAEA;AACA;AACA;AAEA;;;;;;;;;;;;;;AAcG;;AAgBD;;;;;AAMA;AACA;;;AAIA;;AAGA;;;;AAKA;;;;;;;AAQE;AACD;;;;;;AAMC;;;;;AAOF;AACE;;AAQA;;;AAGA;AAEA;;AAGE;;AAEE;;AAEE;AACA;AACE;;AAOF;AACA;;;AAUF;AAMF;;;AAIJ;AACE;AACA;AAAkC;AAElC;;AAGI;;AACmB;;;;;AAMvB;AACF;;;;;;;AAOC;AAED;;;;;;;;AAYI;AACA;AACF;;;;AAQE;AACA;AAEA;;AAEA;;;AAKA;AACA;AAEA;AACA;AACA;AACA;AAEA;;AAGA;AACA;;AAGA;AACA;;;;AAMA;;AAEE;;AAEE;AACE;;;;;AAIF;;;AAIJ;;AAEE;;AAEE;AACE;;;;;AAIF;;;;;;;;;;;;;;AAaF;AACA;;AAGA;;AAEE;;AACK;;AAEL;;;;;;AAOF;;;AAEA;;;AAGA;;;AAEA;;AAEF;AAEA;AACA;AACA;AACA;;;;;;;AAcA;AACF;;;;;;;;AASC;;;;AAQC;AACE;;;AAEA;;;;;;;AAYF;;;;AAMA;AACE;;AACK;AACL;;AACK;;AAEL;AACA;;AAEE;;AAEA;;;AAKA;;AAEE;AACA;AACA;;AAIA;;;;AAGA;AACA;AACA;;;AAGC;AACD;;;;;AAMF;AACA;;;;;;;;;AAUJ;AAEA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AAEA;AACE;;;AAGF;AACE;;;AAGF;AACE;;;AAGF;AACE;;;AAIF;AACA;AACA;;;;;;;AAaA;AACF;;;;;;;;;AAUC;;;;AAOH;AAEI;AACA;;;AAEO;AACJ;;AAEL;;;;;;;;AAaA;;;AAGE;;;;AAKF;;AAWA;;AAEE;AAEA;;AAeM;AACD;AAEC;;;AASV;AAEA;AAWF;AAEA;;"}

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

@@ -0,0 +1,49 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import '../../primitives/Avatar/Avatar.js';
+import '../../primitives/Avatar/AvatarGroup.js';
+import '../../primitives/Badge/Badge.js';
+import '../../primitives/Button/Button.js';
+import '../../primitives/Checkbox/Checkbox.js';
+import '../../primitives/Checkbox/CheckboxGroup.js';
+import '../../primitives/Code/Code.js';
+import '../../primitives/Collapsible/Collapsible.js';
+import '../../primitives/Icon/Icon.js';
+import '../../primitives/IconButton/IconButton.js';
+import '../../primitives/Input/Input.js';
+import '../../primitives/Kbd/Kbd.js';
+import '../../primitives/Link/Link.js';
+import '../../primitives/Paper/Paper.js';
+import '../../primitives/Popover/Popover.js';
+import '../../primitives/Popover/PopoverClose.js';
+import '../../primitives/Popover/PopoverContent.js';
+import '../../primitives/Popover/PopoverTrigger.js';
+import '../../primitives/Radio/Radio.js';
+import '../../primitives/Radio/RadioGroup.js';
+import '../../primitives/Switch/Switch.js';
+import '../../primitives/Text/Text.js';
+import '../../primitives/TextArea/TextArea.js';
+import { Tooltip } from '../../primitives/Tooltip/Tooltip.js';
+import '../../primitives/VisuallyHidden/VisuallyHidden.js';
+import '../../primitives/canvas/CanvasContainer.js';
+import { cx } from '../../../utils/cx.js';
+import { breadcrumbEllipsisButtonStyle, breadcrumbEllipsisTextStyle, breadcrumbEllipsisStyle } from './Breadcrumbs.css.js';
+
+/**
+ * Ellipsis placeholder for collapsed breadcrumb segments.
+ *
+ * @example
+ * ```tsx
+ * <BreadcrumbEllipsis onClick={expand} tooltip="src / components" />
+ * ```
+ */
+const BreadcrumbEllipsis = 
+/*#__PURE__*/ React.memo(({ onClick, tooltip, className, style, testId, ref, ...rest }) => {
+    const ellipsis = onClick ? (jsx("button", { type: "button", className: breadcrumbEllipsisButtonStyle, onClick: onClick, "aria-label": "Show all breadcrumbs", children: "\u2026" })) : (jsx("span", { className: breadcrumbEllipsisTextStyle, children: "\u2026" }));
+    return (jsx("li", { ref: ref, className: cx(breadcrumbEllipsisStyle, className), style: style, "data-testid": testId, ...rest, children: tooltip ? (jsx(Tooltip, { title: tooltip, delay: 300, children: ellipsis })) : (ellipsis) }));
+});
+BreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis';
+
+export { BreadcrumbEllipsis };
+//# sourceMappingURL=BreadcrumbEllipsis.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbEllipsis.js","sources":["../../../../../../src/components/navigation/Breadcrumbs/BreadcrumbEllipsis.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA;;;;;;;AAOG;;AAED;AAEI;;AA8BF;AAGJ;;"}

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

@@ -0,0 +1,89 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import React, { useCallback } from 'react';
+import '../../primitives/Avatar/Avatar.js';
+import '../../primitives/Avatar/AvatarGroup.js';
+import '../../primitives/Badge/Badge.js';
+import '../../primitives/Button/Button.js';
+import '../../primitives/Checkbox/Checkbox.js';
+import '../../primitives/Checkbox/CheckboxGroup.js';
+import '../../primitives/Code/Code.js';
+import '../../primitives/Collapsible/Collapsible.js';
+import '../../primitives/Icon/Icon.js';
+import '../../primitives/IconButton/IconButton.js';
+import '../../primitives/Input/Input.js';
+import '../../primitives/Kbd/Kbd.js';
+import '../../primitives/Link/Link.js';
+import '../../primitives/Paper/Paper.js';
+import '../../primitives/Popover/Popover.js';
+import '../../primitives/Popover/PopoverClose.js';
+import '../../primitives/Popover/PopoverContent.js';
+import '../../primitives/Popover/PopoverTrigger.js';
+import '../../primitives/Radio/Radio.js';
+import '../../primitives/Radio/RadioGroup.js';
+import '../../primitives/Switch/Switch.js';
+import '../../primitives/Text/Text.js';
+import '../../primitives/TextArea/TextArea.js';
+import { Tooltip } from '../../primitives/Tooltip/Tooltip.js';
+import '../../primitives/VisuallyHidden/VisuallyHidden.js';
+import '../../primitives/canvas/CanvasContainer.js';
+import { cx } from '../../../utils/cx.js';
+import { breadcrumbIconStyle, breadcrumbLabelStyle, breadcrumbContentRecipe, breadcrumbItemStyle } from './Breadcrumbs.css.js';
+
+function getTruncatedLabel(children, maxLength) {
+    if (typeof children !== 'string' ||
+        !maxLength ||
+        children.length <= maxLength) {
+        return { label: children, fullLabel: undefined };
+    }
+    const endIndex = Math.max(0, maxLength - 1);
+    return {
+        label: `${children.slice(0, endIndex)}…`,
+        fullLabel: children,
+    };
+}
+/**
+ * Individual segment in a breadcrumb trail.
+ *
+ * Renders as a link, clickable span for client routing, current-page text, or
+ * disabled text depending on the props provided.
+ *
+ * @example
+ * ```tsx
+ * <BreadcrumbItem href="/components">Components</BreadcrumbItem>
+ * <BreadcrumbItem isCurrent>Button</BreadcrumbItem>
+ * ```
+ */
+const BreadcrumbItem = /*#__PURE__*/ React.memo(({ href, onClick, isCurrent = false, icon, maxLength, children, className, style, testId, ref, ...rest }) => {
+    const { label, fullLabel } = getTruncatedLabel(children, maxLength);
+    const isInteractive = (href !== undefined || onClick !== undefined) && !isCurrent;
+    const state = isCurrent ? 'current' : isInteractive ? 'link' : 'disabled';
+    const handleKeyDown = useCallback((event) => {
+        if (!onClick || isCurrent) {
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            event.currentTarget.click();
+        }
+    }, [isCurrent, onClick]);
+    const content = (jsxs(Fragment, { children: [icon && jsx("span", { className: breadcrumbIconStyle, children: icon }), jsx("span", { className: breadcrumbLabelStyle, children: label })] }));
+    let inner;
+    if (isCurrent) {
+        inner = (jsx("span", { className: breadcrumbContentRecipe({ state }), "aria-current": "page", children: content }));
+    }
+    else if (href) {
+        inner = (jsx("a", { className: breadcrumbContentRecipe({ state }), href: href, children: content }));
+    }
+    else if (onClick) {
+        inner = (jsx("span", { className: breadcrumbContentRecipe({ state }), role: "button", tabIndex: 0, onClick: onClick, onKeyDown: handleKeyDown, children: content }));
+    }
+    else {
+        inner = (jsx("span", { className: breadcrumbContentRecipe({ state }), children: content }));
+    }
+    return (jsx("li", { ref: ref, className: cx(breadcrumbItemStyle, className), style: style, "data-testid": testId, ...rest, children: fullLabel ? (jsx(Tooltip, { title: fullLabel, delay: 300, children: inner })) : (inner) }));
+});
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+
+export { BreadcrumbItem };
+//# sourceMappingURL=BreadcrumbItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbItem.js","sources":["../../../../../../src/components/navigation/Breadcrumbs/BreadcrumbItem.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA;;AAGI;AACA;;;AAKF;;;AAGE;;AAEJ;AAEA;;;;;;;;;;;AAWG;AACI;AAcH;AACA;AAEA;AAEA;AAEI;;;AAIA;;AAEE;;AAEJ;;AAWF;;AAGE;;;AASA;;;AAMA;;;AAYA;;;AAsBJ;AAGF;;"}

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

@@ -0,0 +1,22 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cx } from '../../../utils/cx.js';
+import { breadcrumbSeparatorStyle } from './Breadcrumbs.css.js';
+
+/**
+ * Decorative separator rendered between breadcrumb items.
+ *
+ * @example
+ * ```tsx
+ * <BreadcrumbSeparator>/</BreadcrumbSeparator>
+ * ```
+ */
+const BreadcrumbSeparator = 
+/*#__PURE__*/ React.memo(({ children, className, style, testId, ref, ...rest }) => {
+    return (jsx("li", { ref: ref, className: cx(breadcrumbSeparatorStyle, className), style: style, "data-testid": testId, "aria-hidden": "true", ...rest, children: children }));
+});
+BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
+
+export { BreadcrumbSeparator };
+//# sourceMappingURL=BreadcrumbSeparator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbSeparator.js","sources":["../../../../../../src/components/navigation/Breadcrumbs/BreadcrumbSeparator.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAOA;;;;;;;AAOG;;AAED;AAEI;AAYF;AAGJ;;"}

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

@@ -0,0 +1,16 @@
+import './../../../assets/src/components/navigation/Breadcrumbs/Breadcrumbs.css.ts.vanilla-DZ4jm_bw.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var breadcrumbContentRecipe = createRuntimeFn({defaultClassName:'Breadcrumbs_breadcrumbContentBaseStyle__1wq67xf9',variantClassNames:{state:{link:'Breadcrumbs_breadcrumbContentRecipe_state_link__1wq67xfb',current:'Breadcrumbs_breadcrumbContentRecipe_state_current__1wq67xfc',disabled:'Breadcrumbs_breadcrumbContentRecipe_state_disabled__1wq67xfd'}},defaultVariants:{state:'disabled'},compoundVariants:[]});
+var breadcrumbEllipsisButtonStyle = 'Breadcrumbs_breadcrumbEllipsisButtonStyle__1wq67xfi';
+var breadcrumbEllipsisStyle = 'Breadcrumbs_breadcrumbEllipsisStyle__1wq67xfh';
+var breadcrumbEllipsisTextStyle = 'Breadcrumbs_breadcrumbEllipsisTextStyle__1wq67xfj';
+var breadcrumbIconStyle = 'Breadcrumbs_breadcrumbIconStyle__1wq67xfe';
+var breadcrumbItemStyle = 'Breadcrumbs_breadcrumbItemStyle__1wq67xf8';
+var breadcrumbLabelStyle = 'Breadcrumbs_breadcrumbLabelStyle__1wq67xff';
+var breadcrumbSeparatorStyle = 'Breadcrumbs_breadcrumbSeparatorStyle__1wq67xfg';
+var breadcrumbsListRecipe = createRuntimeFn({defaultClassName:'Breadcrumbs_breadcrumbsListRecipe__1wq67xf4',variantClassNames:{size:{sm:'Breadcrumbs_breadcrumbsListRecipe_size_sm__1wq67xf5',md:'Breadcrumbs_breadcrumbsListRecipe_size_md__1wq67xf6',lg:'Breadcrumbs_breadcrumbsListRecipe_size_lg__1wq67xf7'}},defaultVariants:{size:'sm'},compoundVariants:[]});
+var breadcrumbsRootRecipe = createRuntimeFn({defaultClassName:'Breadcrumbs_breadcrumbsRootRecipe__1wq67xf0',variantClassNames:{size:{sm:'Breadcrumbs_breadcrumbsRootRecipe_size_sm__1wq67xf1',md:'Breadcrumbs_breadcrumbsRootRecipe_size_md__1wq67xf2',lg:'Breadcrumbs_breadcrumbsRootRecipe_size_lg__1wq67xf3'}},defaultVariants:{size:'sm'},compoundVariants:[]});
+
+export { breadcrumbContentRecipe, breadcrumbEllipsisButtonStyle, breadcrumbEllipsisStyle, breadcrumbEllipsisTextStyle, breadcrumbIconStyle, breadcrumbItemStyle, breadcrumbLabelStyle, breadcrumbSeparatorStyle, breadcrumbsListRecipe, breadcrumbsRootRecipe };
+//# sourceMappingURL=Breadcrumbs.css.js.map

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

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