entangle-ui 0.6.3 → 0.8.0

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

@@ -0,0 +1,51 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cx } from '../../../utils/cx.js';
+import { dividerLabelTextStyle, dividerWithLabelRecipe, dividerRecipe } from './Divider.css.js';
+
+const SPACING_MAP = {
+    0: '0',
+    1: 'var(--etui-spacing-xs)',
+    2: 'var(--etui-spacing-sm)',
+    3: 'var(--etui-spacing-md)',
+    4: 'var(--etui-spacing-lg)',
+    5: 'var(--etui-spacing-xl)',
+    6: 'var(--etui-spacing-xxl)',
+    7: 'var(--etui-spacing-xxxl)',
+};
+function resolveSpacing(spacing) {
+    if (spacing === undefined)
+        return '0';
+    if (typeof spacing === 'number')
+        return SPACING_MAP[spacing] ?? '0';
+    return spacing;
+}
+/**
+ * Thin horizontal or vertical rule, optionally with an inline label.
+ *
+ * @example
+ * ```tsx
+ * <Stack>
+ *   <SectionA />
+ *   <Divider spacing={3} />
+ *   <SectionB />
+ * </Stack>
+ *
+ * <Divider label="Advanced" />
+ * ```
+ */
+const Divider = /*#__PURE__*/ React.memo(({ orientation = 'horizontal', variant = 'solid', spacing = 0, label, className, style, testId, ref, ...rest }) => {
+    const spacingValue = resolveSpacing(spacing);
+    const marginStyle = orientation === 'horizontal'
+        ? { marginTop: spacingValue, marginBottom: spacingValue }
+        : { marginLeft: spacingValue, marginRight: spacingValue };
+    if (label && orientation === 'horizontal') {
+        return (jsx("div", { ref: ref, role: "separator", "aria-orientation": "horizontal", className: cx(dividerWithLabelRecipe({ variant }), className), style: { ...marginStyle, ...style }, "data-testid": testId, ...rest, children: jsx("span", { className: dividerLabelTextStyle, children: label }) }));
+    }
+    return (jsx("div", { ref: ref, role: "separator", "aria-orientation": orientation, className: cx(dividerRecipe({ orientation, variant }), className), style: { ...marginStyle, ...style }, "data-testid": testId, ...rest }));
+});
+Divider.displayName = 'Divider';
+
+export { Divider };
+//# sourceMappingURL=Divider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","sources":["../../../../../../src/components/layout/Divider/Divider.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAWA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGF;;AAC6B;;AACM;AACjC;AACF;AAEA;;;;;;;;;;;;;AAaG;AACI;AAYH;AACA;;;AAKA;;;AAgBA;AAWF;AAGF;;"}

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

@@ -0,0 +1,10 @@
+import './../../../assets/src/components/layout/ListItem/ListItem.css.ts.vanilla-BwAZrX2f.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var listItemContentStyle = 'ListItem_listItemContentStyle__9m667ic';
+var listItemLeadingStyle = 'ListItem_listItemLeadingStyle__9m667ib';
+var listItemRecipe = createRuntimeFn({defaultClassName:'ListItem_listItemRecipe__9m667i0',variantClassNames:{density:{compact:'ListItem_listItemRecipe_density_compact__9m667i1',comfortable:'ListItem_listItemRecipe_density_comfortable__9m667i2'},clickable:{true:'ListItem_listItemRecipe_clickable_true__9m667i3',false:'ListItem_listItemRecipe_clickable_false__9m667i4'},selected:{true:'ListItem_listItemRecipe_selected_true__9m667i5',false:'ListItem_listItemRecipe_selected_false__9m667i6'},active:{true:'ListItem_listItemRecipe_active_true__9m667i7',false:'ListItem_listItemRecipe_active_false__9m667i8'},disabled:{true:'ListItem_listItemRecipe_disabled_true__9m667i9',false:'ListItem_listItemRecipe_disabled_false__9m667ia'}},defaultVariants:{density:'comfortable',clickable:false,selected:false,active:false,disabled:false},compoundVariants:[]});
+var listItemTrailingStyle = 'ListItem_listItemTrailingStyle__9m667id';
+
+export { listItemContentStyle, listItemLeadingStyle, listItemRecipe, listItemTrailingStyle };
+//# sourceMappingURL=ListItem.css.js.map

package/dist/esm/components/layout/ListItem/ListItem.css.js.map

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

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

@@ -0,0 +1,45 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useCallback } from 'react';
+import { cx } from '../../../utils/cx.js';
+import { listItemLeadingStyle, listItemContentStyle, listItemTrailingStyle, listItemRecipe } from './ListItem.css.js';
+
+/**
+ * Reusable list row with leading / trailing slots and hover/selected/active
+ * states. Becomes keyboard-activatable when `onClick` is provided (Enter
+ * and Space trigger the handler).
+ *
+ * @example
+ * ```tsx
+ * <ListItem
+ *   leading={<FileIcon />}
+ *   trailing={<Badge color="success">done</Badge>}
+ *   selected={id === activeId}
+ *   onClick={() => select(id)}
+ * >
+ *   scene.blend
+ * </ListItem>
+ * ```
+ */
+const ListItem = /*#__PURE__*/ React.memo(({ onClick, leading, trailing, selected = false, active = false, disabled = false, density = 'comfortable', children, className, style, testId, ref, ...rest }) => {
+    const clickable = !!onClick && !disabled;
+    const handleKeyDown = useCallback((event) => {
+        if (!clickable)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            onClick?.(event);
+        }
+    }, [clickable, onClick]);
+    return (jsxs("div", { ref: ref, role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined, "aria-disabled": disabled || undefined, "data-disabled": disabled ? 'true' : 'false', "data-selected": selected ? 'true' : undefined, "data-active": active ? 'true' : undefined, onClick: clickable ? onClick : undefined, onKeyDown: handleKeyDown, className: cx(listItemRecipe({
+            density,
+            clickable: clickable || undefined,
+            selected: selected || undefined,
+            active: active || undefined,
+            disabled: disabled || undefined,
+        }), className), style: style, "data-testid": testId, ...rest, children: [leading && jsx("span", { className: listItemLeadingStyle, children: leading }), jsx("span", { className: listItemContentStyle, children: children }), trailing && jsx("span", { className: listItemTrailingStyle, children: trailing })] }));
+});
+ListItem.displayName = 'ListItem';
+
+export { ListItem };
+//# sourceMappingURL=ListItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.js","sources":["../../../../../../src/components/layout/ListItem/ListItem.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAYA;;;;;;;;;;;;;;;;AAgBG;;;AAmBC;AAEI;;AACA;;AAEE;;AAIJ;AAIF;;;;;;AAkBO;AAYT;AAGF;;"}

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

@@ -0,0 +1,13 @@
+import './../../../assets/src/components/layout/PageHeader/PageHeader.css.ts.vanilla-DdbyyWAN.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var pageHeaderActionsStyle = 'PageHeader_pageHeaderActionsStyle__1uiranpe';
+var pageHeaderBreadcrumbsStyle = 'PageHeader_pageHeaderBreadcrumbsStyle__1uiranpd';
+var pageHeaderIconStyle = 'PageHeader_pageHeaderIconStyle__1uiranp6';
+var pageHeaderRecipe = createRuntimeFn({defaultClassName:'PageHeader_pageHeaderRecipe__1uiranp0',variantClassNames:{size:{sm:'PageHeader_pageHeaderRecipe_size_sm__1uiranp1',md:'PageHeader_pageHeaderRecipe_size_md__1uiranp2',lg:'PageHeader_pageHeaderRecipe_size_lg__1uiranp3'},bordered:{true:'PageHeader_pageHeaderRecipe_bordered_true__1uiranp4',false:'PageHeader_pageHeaderRecipe_bordered_false__1uiranp5'}},defaultVariants:{size:'md',bordered:true},compoundVariants:[]});
+var pageHeaderSubtitleStyle = 'PageHeader_pageHeaderSubtitleStyle__1uiranpc';
+var pageHeaderTitleColumnStyle = 'PageHeader_pageHeaderTitleColumnStyle__1uiranp7';
+var pageHeaderTitleRecipe = createRuntimeFn({defaultClassName:'PageHeader_pageHeaderTitleRecipe__1uiranp8',variantClassNames:{size:{sm:'PageHeader_pageHeaderTitleRecipe_size_sm__1uiranp9',md:'PageHeader_pageHeaderTitleRecipe_size_md__1uiranpa',lg:'PageHeader_pageHeaderTitleRecipe_size_lg__1uiranpb'}},defaultVariants:{size:'md'},compoundVariants:[]});
+
+export { pageHeaderActionsStyle, pageHeaderBreadcrumbsStyle, pageHeaderIconStyle, pageHeaderRecipe, pageHeaderSubtitleStyle, pageHeaderTitleColumnStyle, pageHeaderTitleRecipe };
+//# sourceMappingURL=PageHeader.css.js.map

package/dist/esm/components/layout/PageHeader/PageHeader.css.js.map

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

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

@@ -0,0 +1,29 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cx } from '../../../utils/cx.js';
+import { pageHeaderIconStyle, pageHeaderTitleColumnStyle, pageHeaderBreadcrumbsStyle, pageHeaderTitleRecipe, pageHeaderSubtitleStyle, pageHeaderActionsStyle, pageHeaderRecipe } from './PageHeader.css.js';
+
+/**
+ * Structural page/view header with optional breadcrumbs, subtitle,
+ * leading icon, and right-aligned actions.
+ *
+ * Renders a semantic `<header>` element.
+ *
+ * @example
+ * ```tsx
+ * <PageHeader
+ *   icon={<FolderIcon size="lg" />}
+ *   title="Project Assets"
+ *   subtitle="124 items"
+ *   actions={<Button variant="filled">Upload</Button>}
+ * />
+ * ```
+ */
+const PageHeader = /*#__PURE__*/ React.memo(({ icon, title, subtitle, actions, breadcrumbs, size = 'md', bordered = true, className, style, testId, ref, ...rest }) => {
+    return (jsxs("header", { ref: ref, className: cx(pageHeaderRecipe({ size, bordered }), className), style: style, "data-testid": testId, ...rest, children: [icon && jsx("span", { className: pageHeaderIconStyle, children: icon }), jsxs("div", { className: pageHeaderTitleColumnStyle, children: [breadcrumbs && (jsx("div", { className: pageHeaderBreadcrumbsStyle, children: breadcrumbs })), jsx("h1", { className: pageHeaderTitleRecipe({ size }), children: title }), subtitle && (jsx("div", { className: pageHeaderSubtitleStyle, children: subtitle }))] }), actions && jsx("div", { className: pageHeaderActionsStyle, children: actions })] }));
+});
+PageHeader.displayName = 'PageHeader';
+
+export { PageHeader };
+//# sourceMappingURL=PageHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.js","sources":["../../../../../../src/components/layout/PageHeader/PageHeader.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAeA;;;;;;;;;;;;;;;AAeG;AACI;;AAsCL;AAGF;;"}

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.css.js

@@ -1,4 +1,4 @@
-import './../../../assets/src/components/layout/SplitPane/SplitPane.css.ts.vanilla-BFxdvwyI.css';
+import './../../../assets/src/components/layout/SplitPane/SplitPane.css.ts.vanilla-BGFZ7zDa.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
 var containerRecipe = createRuntimeFn({defaultClassName:'SplitPane_containerRecipe__13xgg0i0',variantClassNames:{direction:{horizontal:'SplitPane_containerRecipe_direction_horizontal__13xgg0i1',vertical:'SplitPane_containerRecipe_direction_vertical__13xgg0i2'}},defaultVariants:{},compoundVariants:[]});

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