entangle-ui 0.2.0 → 0.4.0

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

@@ -0,0 +1,263 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useId, useRef, useState, useCallback, useEffect } from 'react';
+import { cx } from '../../../utils/cx.js';
+import { assignInlineVars } from '../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js';
+import { viewportRecipe, fadeMaskVisible, fadeMaskHiddenStyle, fadeMaskTop, fadeMaskBase, fadeMaskBottom, fadeMaskLeft, fadeMaskRight, thumbDragging, thumbVertical, thumbBase, scrollbarVisible, scrollbarHidden, scrollbarVertical, thumbHorizontal, scrollbarHorizontal, rootAutoFill, rootStyle, fadeMaskSizeVar, scrollbarPaddingVar, scrollbarWidthVar } from './ScrollArea.css.js';
+
+// --- Component ---
+const ScrollArea = ({ children, direction = 'vertical', scrollbarVisibility = 'auto', hideDelay = 1000, scrollbarWidth = 6, minThumbLength = 30, scrollbarPadding = 2, fadeMask = false, fadeMaskHeight = 24, maxHeight, maxWidth, autoFill = false, onScroll, onScrollTop, onScrollBottom, className, style, testId, ref: externalRef, ...rest }) => {
+    const autoId = useId();
+    const viewportId = `scrollarea-${autoId}-viewport`;
+    const viewportRef = useRef(null);
+    // Thumb state
+    const [vThumbSize, setVThumbSize] = useState(0);
+    const [vThumbOffset, setVThumbOffset] = useState(0);
+    const [hThumbSize, setHThumbSize] = useState(0);
+    const [hThumbOffset, setHThumbOffset] = useState(0);
+    const [hasVOverflow, setHasVOverflow] = useState(false);
+    const [hasHOverflow, setHasHOverflow] = useState(false);
+    // Visibility state
+    const [scrollbarVisibleState, setScrollbarVisibleState] = useState(scrollbarVisibility === 'always');
+    const hideTimerRef = useRef(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const dragAxisRef = useRef(null);
+    const dragStartRef = useRef({ pointerPos: 0, scrollPos: 0 });
+    // Fade mask state
+    const [atTop, setAtTop] = useState(true);
+    const [atBottom, setAtBottom] = useState(false);
+    const [atLeft, setAtLeft] = useState(true);
+    const [atRight, setAtRight] = useState(false);
+    const showV = direction === 'vertical' || direction === 'both';
+    const showH = direction === 'horizontal' || direction === 'both';
+    // Recalculate thumb sizes
+    const recalculate = useCallback(() => {
+        const vp = viewportRef.current;
+        if (!vp)
+            return;
+        if (showV) {
+            const ratio = vp.clientHeight / vp.scrollHeight;
+            const overflow = ratio < 1;
+            setHasVOverflow(overflow);
+            if (overflow) {
+                const trackHeight = vp.clientHeight - scrollbarPadding * 2;
+                const thumbH = Math.max(minThumbLength, ratio * trackHeight);
+                setVThumbSize(thumbH);
+                const maxScroll = vp.scrollHeight - vp.clientHeight;
+                const scrollRatio = maxScroll > 0 ? vp.scrollTop / maxScroll : 0;
+                setVThumbOffset(scrollRatio * (trackHeight - thumbH));
+            }
+        }
+        if (showH) {
+            const ratio = vp.clientWidth / vp.scrollWidth;
+            const overflow = ratio < 1;
+            setHasHOverflow(overflow);
+            if (overflow) {
+                const trackWidth = vp.clientWidth - scrollbarPadding * 2;
+                const thumbW = Math.max(minThumbLength, ratio * trackWidth);
+                setHThumbSize(thumbW);
+                const maxScroll = vp.scrollWidth - vp.clientWidth;
+                const scrollRatio = maxScroll > 0 ? vp.scrollLeft / maxScroll : 0;
+                setHThumbOffset(scrollRatio * (trackWidth - thumbW));
+            }
+        }
+        // Update fade mask state
+        if (fadeMask) {
+            setAtTop(vp.scrollTop <= 0);
+            setAtBottom(vp.scrollTop + vp.clientHeight >= vp.scrollHeight - 1);
+            setAtLeft(vp.scrollLeft <= 0);
+            setAtRight(vp.scrollLeft + vp.clientWidth >= vp.scrollWidth - 1);
+        }
+    }, [showV, showH, scrollbarPadding, minThumbLength, fadeMask]);
+    // Show scrollbar with auto-hide
+    const showScrollbar = useCallback(() => {
+        if (scrollbarVisibility === 'never')
+            return;
+        if (scrollbarVisibility === 'always')
+            return;
+        setScrollbarVisibleState(true);
+        if (hideTimerRef.current) {
+            clearTimeout(hideTimerRef.current);
+        }
+        if (scrollbarVisibility === 'auto') {
+            hideTimerRef.current = setTimeout(() => {
+                if (!isDragging) {
+                    setScrollbarVisibleState(false);
+                }
+            }, hideDelay);
+        }
+    }, [scrollbarVisibility, hideDelay, isDragging]);
+    // Handle scroll
+    const handleScroll = useCallback((e) => {
+        recalculate();
+        showScrollbar();
+        onScroll?.(e);
+        const vp = e.currentTarget;
+        if (vp.scrollTop <= 0) {
+            onScrollTop?.();
+        }
+        if (vp.scrollTop + vp.clientHeight >= vp.scrollHeight - 1) {
+            onScrollBottom?.();
+        }
+    }, [recalculate, showScrollbar, onScroll, onScrollTop, onScrollBottom]);
+    // Handle hover
+    const handleMouseEnter = useCallback(() => {
+        if (scrollbarVisibility === 'hover' || scrollbarVisibility === 'auto') {
+            setScrollbarVisibleState(true);
+            if (hideTimerRef.current) {
+                clearTimeout(hideTimerRef.current);
+                hideTimerRef.current = null;
+            }
+        }
+    }, [scrollbarVisibility]);
+    const handleMouseLeave = useCallback(() => {
+        if (scrollbarVisibility === 'hover') {
+            setScrollbarVisibleState(false);
+        }
+        else if (scrollbarVisibility === 'auto' && !isDragging) {
+            hideTimerRef.current = setTimeout(() => {
+                setScrollbarVisibleState(false);
+            }, hideDelay);
+        }
+    }, [scrollbarVisibility, isDragging, hideDelay]);
+    // Thumb drag handlers
+    const handleThumbPointerDown = useCallback((axis, e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const vp = viewportRef.current;
+        if (!vp)
+            return;
+        setIsDragging(true);
+        dragAxisRef.current = axis;
+        e.target.setPointerCapture(e.pointerId);
+        if (axis === 'vertical') {
+            dragStartRef.current = {
+                pointerPos: e.clientY,
+                scrollPos: vp.scrollTop,
+            };
+        }
+        else {
+            dragStartRef.current = {
+                pointerPos: e.clientX,
+                scrollPos: vp.scrollLeft,
+            };
+        }
+    }, []);
+    const handleThumbPointerMove = useCallback((e) => {
+        if (!isDragging || !dragAxisRef.current)
+            return;
+        const vp = viewportRef.current;
+        if (!vp)
+            return;
+        const axis = dragAxisRef.current;
+        if (axis === 'vertical') {
+            const trackHeight = vp.clientHeight - scrollbarPadding * 2;
+            const maxScroll = vp.scrollHeight - vp.clientHeight;
+            const delta = e.clientY - dragStartRef.current.pointerPos;
+            const scrollDelta = (delta / (trackHeight - vThumbSize)) * maxScroll;
+            vp.scrollTop = dragStartRef.current.scrollPos + scrollDelta;
+        }
+        else {
+            const trackWidth = vp.clientWidth - scrollbarPadding * 2;
+            const maxScroll = vp.scrollWidth - vp.clientWidth;
+            const delta = e.clientX - dragStartRef.current.pointerPos;
+            const scrollDelta = (delta / (trackWidth - hThumbSize)) * maxScroll;
+            vp.scrollLeft = dragStartRef.current.scrollPos + scrollDelta;
+        }
+    }, [isDragging, scrollbarPadding, vThumbSize, hThumbSize]);
+    const handleThumbPointerUp = useCallback(() => {
+        setIsDragging(false);
+        dragAxisRef.current = null;
+    }, []);
+    // Track click handler
+    const handleTrackClick = useCallback((axis, e) => {
+        const vp = viewportRef.current;
+        if (!vp)
+            return;
+        const trackRect = e.currentTarget.getBoundingClientRect();
+        if (axis === 'vertical') {
+            const clickRatio = (e.clientY - trackRect.top) / trackRect.height;
+            vp.scrollTop = clickRatio * (vp.scrollHeight - vp.clientHeight);
+        }
+        else {
+            const clickRatio = (e.clientX - trackRect.left) / trackRect.width;
+            vp.scrollLeft = clickRatio * (vp.scrollWidth - vp.clientWidth);
+        }
+    }, []);
+    // Observe resize
+    useEffect(() => {
+        const vp = viewportRef.current;
+        if (!vp)
+            return;
+        recalculate();
+        const ro = new ResizeObserver(() => {
+            recalculate();
+        });
+        ro.observe(vp);
+        if (vp.firstElementChild) {
+            ro.observe(vp.firstElementChild);
+        }
+        return () => ro.disconnect();
+    }, [recalculate]);
+    // Cleanup timer
+    useEffect(() => {
+        return () => {
+            if (hideTimerRef.current) {
+                clearTimeout(hideTimerRef.current);
+            }
+        };
+    }, []);
+    // 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 isScrollbarShown = scrollbarVisibility === 'never' ? false : scrollbarVisibleState;
+    const rootInlineStyle = {
+        ...assignInlineVars({
+            [scrollbarWidthVar]: `${scrollbarWidth}px`,
+            [scrollbarPaddingVar]: `${scrollbarPadding}px`,
+            [fadeMaskSizeVar]: `${fadeMaskHeight}px`,
+        }),
+        ...(maxHeight != null
+            ? {
+                maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight,
+            }
+            : undefined),
+        ...(maxWidth != null
+            ? {
+                maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,
+            }
+            : undefined),
+        ...style,
+    };
+    return (jsxs("div", { className: cx(rootStyle, autoFill && rootAutoFill, className), style: rootInlineStyle, "data-testid": testId, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...rest, children: [jsx("div", { ref: setViewportRef, id: viewportId, role: "region", tabIndex: 0, className: viewportRecipe({ direction }), onScroll: handleScroll, children: children }), fadeMask && showV && (jsxs(Fragment, { children: [jsx("div", { className: cx(fadeMaskBase, fadeMaskTop, !atTop ? fadeMaskVisible : fadeMaskHiddenStyle), "data-testid": testId ? `${testId}-fade-top` : undefined }), jsx("div", { className: cx(fadeMaskBase, fadeMaskBottom, !atBottom ? fadeMaskVisible : fadeMaskHiddenStyle), "data-testid": testId ? `${testId}-fade-bottom` : undefined })] })), fadeMask && showH && (jsxs(Fragment, { children: [jsx("div", { className: cx(fadeMaskBase, fadeMaskLeft, !atLeft ? fadeMaskVisible : fadeMaskHiddenStyle) }), jsx("div", { className: cx(fadeMaskBase, fadeMaskRight, !atRight ? fadeMaskVisible : fadeMaskHiddenStyle) })] })), showV && hasVOverflow && (jsx("div", { className: cx(scrollbarVertical, isScrollbarShown ? scrollbarVisible : scrollbarHidden), role: "scrollbar", "aria-controls": viewportId, "aria-orientation": "vertical", "aria-valuenow": Math.round(viewportRef.current
+                    ? (viewportRef.current.scrollTop /
+                        Math.max(1, viewportRef.current.scrollHeight -
+                            viewportRef.current.clientHeight)) *
+                        100
+                    : 0), "aria-valuemin": 0, "aria-valuemax": 100, "data-testid": testId ? `${testId}-scrollbar-v` : undefined, onClick: e => handleTrackClick('vertical', e), children: jsx("div", { className: cx(thumbBase, thumbVertical, isDragging && dragAxisRef.current === 'vertical' && thumbDragging), style: {
+                        height: `${vThumbSize}px`,
+                        transform: `translateY(${vThumbOffset}px)`,
+                    }, onPointerDown: e => handleThumbPointerDown('vertical', e), onPointerMove: handleThumbPointerMove, onPointerUp: handleThumbPointerUp, "data-testid": testId ? `${testId}-thumb-v` : undefined }) })), showH && hasHOverflow && (jsx("div", { className: cx(scrollbarHorizontal, isScrollbarShown ? scrollbarVisible : scrollbarHidden), role: "scrollbar", "aria-controls": viewportId, "aria-orientation": "horizontal", "aria-valuenow": Math.round(viewportRef.current
+                    ? (viewportRef.current.scrollLeft /
+                        Math.max(1, viewportRef.current.scrollWidth -
+                            viewportRef.current.clientWidth)) *
+                        100
+                    : 0), "aria-valuemin": 0, "aria-valuemax": 100, "data-testid": testId ? `${testId}-scrollbar-h` : undefined, onClick: e => handleTrackClick('horizontal', e), children: jsx("div", { className: cx(thumbBase, thumbHorizontal, isDragging &&
+                        dragAxisRef.current === 'horizontal' &&
+                        thumbDragging), style: {
+                        width: `${hThumbSize}px`,
+                        transform: `translateX(${hThumbOffset}px)`,
+                    }, onPointerDown: e => handleThumbPointerDown('horizontal', e), onPointerMove: handleThumbPointerMove, onPointerUp: handleThumbPointerUp, "data-testid": testId ? `${testId}-thumb-h` : undefined }) }))] }));
+};
+ScrollArea.displayName = 'ScrollArea';
+
+export { ScrollArea };
+//# sourceMappingURL=ScrollArea.js.map

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

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

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

@@ -0,0 +1,8 @@
+import './../../../assets/src/components/layout/Spacer/Spacer.css.ts.vanilla-A-7aOV46.css';
+
+var spacerBase = 'Spacer_spacerBase__1177qpm0';
+var spacerFixed = 'Spacer_spacerFixed__1177qpm2';
+var spacerFlexible = 'Spacer_spacerFlexible__1177qpm1';
+
+export { spacerBase, spacerFixed, spacerFlexible };
+//# sourceMappingURL=Spacer.css.js.map

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

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

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

@@ -0,0 +1,60 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cx } from '../../../utils/cx.js';
+import { spacerFixed, spacerFlexible, spacerBase } from './Spacer.css.js';
+
+/**
+ * A flexible spacer component that expands to fill available space.
+ *
+ * Perfect for pushing elements apart in flex layouts (Stack, Flex components).
+ * By default, it grows to fill available space. Can also be used with fixed size.
+ *
+ * @example
+ * ```tsx
+ * // Auto-expanding spacer (pushes elements apart)
+ * <Stack direction="row">
+ *   <Button>Left</Button>
+ *   <Spacer />
+ *   <Button>Right</Button>
+ * </Stack>
+ *
+ * // Fixed size spacer
+ * <Stack direction="column">
+ *   <Title>Header</Title>
+ *   <Spacer size="2rem" />
+ *   <Content>Body</Content>
+ * </Stack>
+ *
+ * // Multiple spacers for even distribution
+ * <Flex direction="row">
+ *   <Logo />
+ *   <Spacer />
+ *   <Navigation />
+ *   <Spacer />
+ *   <UserMenu />
+ * </Flex>
+ *
+ * // Numeric size
+ * <Stack>
+ *   <Item />
+ *   <Spacer size={20} />
+ *   <Item />
+ * </Stack>
+ * ```
+ */
+const Spacer = /*#__PURE__*/ React.memo(({ size, className, testId, style, ref, ...htmlProps }) => {
+    const sizeValue = size !== undefined
+        ? typeof size === 'number'
+            ? `${size}px`
+            : size
+        : undefined;
+    const inlineStyle = sizeValue !== undefined
+        ? { ...style, width: sizeValue, height: sizeValue }
+        : style;
+    return (jsx("div", { ref: ref, className: cx(spacerBase, size !== undefined ? spacerFixed : spacerFlexible, className), "data-testid": testId, style: inlineStyle, ...htmlProps }));
+});
+Spacer.displayName = 'Spacer';
+
+export { Spacer };
+//# sourceMappingURL=Spacer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spacer.js","sources":["../../../../../../src/components/layout/Spacer/Spacer.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AA+BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCG;AACI;AAEH;AAEI;;AAEE;;AAGN;AAEI;;AAGJ;AAaF;AAGF;;"}

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

@@ -0,0 +1,10 @@
+import './../../../assets/src/components/layout/SplitPane/SplitPane.css.ts.vanilla-BFxdvwyI.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var containerRecipe = createRuntimeFn({defaultClassName:'SplitPane_containerRecipe__13xgg0i0',variantClassNames:{direction:{horizontal:'SplitPane_containerRecipe_direction_horizontal__13xgg0i1',vertical:'SplitPane_containerRecipe_direction_vertical__13xgg0i2'}},defaultVariants:{},compoundVariants:[]});
+var dividerRecipe = createRuntimeFn({defaultClassName:'SplitPane_dividerRecipe__13xgg0i4',variantClassNames:{direction:{horizontal:'SplitPane_dividerRecipe_direction_horizontal__13xgg0i5',vertical:'SplitPane_dividerRecipe_direction_vertical__13xgg0i6'},isDragging:{true:'SplitPane_dividerRecipe_isDragging_true__13xgg0i7'}},defaultVariants:{},compoundVariants:[]});
+var dividerSizeVar = 'var(--dividerSizeVar__13xgg0i3)';
+var panelStyle = 'SplitPane_panelStyle__13xgg0i8';
+
+export { containerRecipe, dividerRecipe, dividerSizeVar, panelStyle };
+//# sourceMappingURL=SplitPane.css.js.map

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

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