entangle-ui 0.1.0 → 0.3.0

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

@@ -0,0 +1,362 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useId, useRef, useState, useCallback, useEffect } from 'react';
+import styled from '@emotion/styled';
+
+const StyledRoot = styled.div `
+  position: relative;
+  overflow: hidden;
+  ${props => props.$autoFill
+    ? `
+    width: 100%;
+    height: 100%;
+  `
+    : ''}
+  ${props => props.$maxHeight != null
+    ? `max-height: ${typeof props.$maxHeight === 'number' ? `${props.$maxHeight}px` : props.$maxHeight};`
+    : ''}
+  ${props => props.$maxWidth != null
+    ? `max-width: ${typeof props.$maxWidth === 'number' ? `${props.$maxWidth}px` : props.$maxWidth};`
+    : ''}
+`;
+const StyledViewport = styled.div `
+  width: 100%;
+  height: 100%;
+  max-height: inherit;
+  max-width: inherit;
+  overflow-x: ${props => props.$direction === 'horizontal' || props.$direction === 'both'
+    ? 'scroll'
+    : 'hidden'};
+  overflow-y: ${props => props.$direction === 'vertical' || props.$direction === 'both'
+    ? 'scroll'
+    : 'hidden'};
+
+  /* Hide native scrollbars */
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE/Edge */
+  &::-webkit-scrollbar {
+    display: none; /* Chrome/Safari */
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    box-shadow: ${props => props.theme.shadows.focus};
+  }
+`;
+const StyledScrollbar = styled.div `
+  position: absolute;
+  z-index: 1;
+  ${props => props.$direction === 'vertical'
+    ? `
+    right: ${props.$padding}px;
+    top: ${props.$padding}px;
+    bottom: ${props.$padding}px;
+    width: ${props.$width}px;
+  `
+    : `
+    bottom: ${props.$padding}px;
+    left: ${props.$padding}px;
+    right: ${props.$padding}px;
+    height: ${props.$width}px;
+  `}
+  border-radius: ${props => props.$width}px;
+  opacity: ${props => (props.$visible ? 1 : 0)};
+  transition: opacity ${props => props.theme.transitions.fast};
+  pointer-events: ${props => (props.$visible ? 'auto' : 'none')};
+`;
+const StyledThumb = styled.div `
+  position: absolute;
+  ${props => props.$direction === 'vertical'
+    ? `
+    width: 100%;
+    left: 0;
+  `
+    : `
+    height: 100%;
+    top: 0;
+  `}
+  border-radius: inherit;
+  background: ${props => props.theme.colors.text.disabled};
+  transition: background ${props => props.theme.transitions.fast};
+  cursor: pointer;
+
+  &:hover {
+    background: ${props => props.theme.colors.text.muted};
+  }
+
+  ${props => props.$isDragging
+    ? `background: ${props.theme.colors.text.secondary};`
+    : ''}
+`;
+const StyledFadeMask = styled.div `
+  position: absolute;
+  z-index: 1;
+  pointer-events: none;
+  opacity: ${props => (props.$visible ? 1 : 0)};
+  transition: opacity ${props => props.theme.transitions.fast};
+
+  ${props => {
+    const { $position, $size } = props;
+    const bgBase = props.theme.colors.background.primary;
+    switch ($position) {
+        case 'top':
+            return `
+          top: 0; left: 0; right: 0; height: ${$size}px;
+          background: linear-gradient(to bottom, ${bgBase}, transparent);
+        `;
+        case 'bottom':
+            return `
+          bottom: 0; left: 0; right: 0; height: ${$size}px;
+          background: linear-gradient(to top, ${bgBase}, transparent);
+        `;
+        case 'left':
+            return `
+          top: 0; left: 0; bottom: 0; width: ${$size}px;
+          background: linear-gradient(to right, ${bgBase}, transparent);
+        `;
+        case 'right':
+            return `
+          top: 0; right: 0; bottom: 0; width: ${$size}px;
+          background: linear-gradient(to left, ${bgBase}, transparent);
+        `;
+    }
+}}
+`;
+// --- 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 [scrollbarVisible, setScrollbarVisible] = 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;
+        setScrollbarVisible(true);
+        if (hideTimerRef.current) {
+            clearTimeout(hideTimerRef.current);
+        }
+        if (scrollbarVisibility === 'auto') {
+            hideTimerRef.current = setTimeout(() => {
+                if (!isDragging) {
+                    setScrollbarVisible(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') {
+            setScrollbarVisible(true);
+            if (hideTimerRef.current) {
+                clearTimeout(hideTimerRef.current);
+                hideTimerRef.current = null;
+            }
+        }
+    }, [scrollbarVisibility]);
+    const handleMouseLeave = useCallback(() => {
+        if (scrollbarVisibility === 'hover') {
+            setScrollbarVisible(false);
+        }
+        else if (scrollbarVisibility === 'auto' && !isDragging) {
+            hideTimerRef.current = setTimeout(() => {
+                setScrollbarVisible(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 : scrollbarVisible;
+    return (jsxs(StyledRoot, { "$maxHeight": maxHeight, "$maxWidth": maxWidth, "$autoFill": autoFill, className: className, style: style, "data-testid": testId, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...rest, children: [jsx(StyledViewport, { ref: setViewportRef, id: viewportId, role: "region", tabIndex: 0, "$direction": direction, onScroll: handleScroll, children: children }), fadeMask && showV && (jsxs(Fragment, { children: [jsx(StyledFadeMask, { "$position": "top", "$size": fadeMaskHeight, "$visible": !atTop, "data-testid": testId ? `${testId}-fade-top` : undefined }), jsx(StyledFadeMask, { "$position": "bottom", "$size": fadeMaskHeight, "$visible": !atBottom, "data-testid": testId ? `${testId}-fade-bottom` : undefined })] })), fadeMask && showH && (jsxs(Fragment, { children: [jsx(StyledFadeMask, { "$position": "left", "$size": fadeMaskHeight, "$visible": !atLeft }), jsx(StyledFadeMask, { "$position": "right", "$size": fadeMaskHeight, "$visible": !atRight })] })), showV && hasVOverflow && (jsx(StyledScrollbar, { "$direction": "vertical", "$width": scrollbarWidth, "$padding": scrollbarPadding, "$visible": isScrollbarShown, 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(StyledThumb, { "$direction": "vertical", "$isDragging": isDragging && dragAxisRef.current === 'vertical', 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(StyledScrollbar, { "$direction": "horizontal", "$width": scrollbarWidth, "$padding": scrollbarPadding, "$visible": isScrollbarShown, 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(StyledThumb, { "$direction": "horizontal", "$isDragging": isDragging && dragAxisRef.current === 'horizontal', 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":["_jsxs","_jsx","_Fragment"],"mappings":"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"}

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

@@ -0,0 +1,78 @@
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import styled from '@emotion/styled';
+import { processCss } from '../../../utils/styledUtils.js';
+
+const StyledSpacer = styled.div `
+  /* Auto-expanding behavior by default */
+  ${props => !props.$size &&
+    `
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: auto;
+    min-width: 0;
+    min-height: 0;
+  `}
+
+  /* Fixed size mode — sets both width and height; flex layout uses the axis-aligned dimension */
+  ${props => props.$size &&
+    `
+    flex: none;
+    ${typeof props.$size === 'number'
+        ? `width: ${props.$size}px; height: ${props.$size}px;`
+        : `width: ${props.$size}; height: ${props.$size};`}
+  `}
+  
+  /* Ensure it doesn't interfere with content */
+  pointer-events: none;
+  user-select: none;
+
+  /* Custom CSS */
+  ${props => processCss(props.$css, props.theme)}
+`;
+/**
+ * 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, css, style, ref, ...htmlProps }) => {
+    return (jsx(StyledSpacer, { ref: ref, className: className, "$size": size, "$css": css, "data-testid": testId, style: style, ...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":["_jsx"],"mappings":";;;;;AAgCA,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAmB;;AAE9C,EAAA,EAAA,KAAK,IACL,CAAC,KAAK,CAAC,KAAK;AACZ,IAAA;;;;;;AAMD,EAAA,CAAA;;;AAGC,EAAA,EAAA,KAAK,IACL,KAAK,CAAC,KAAK;AACX,IAAA;;AAGE,IAAA,EAAA,OAAO,KAAK,CAAC,KAAK,KAAK;UACnB,UAAU,KAAK,CAAC,KAAK,CAAe,YAAA,EAAA,KAAK,CAAC,KAAK,CAAK,GAAA;UACpD,UAAU,KAAK,CAAC,KAAK,CAAa,UAAA,EAAA,KAAK,CAAC,KAAK,CACnD,CAAA,CAAA;AACD,EAAA,CAAA;;;;;;;AAOC,EAAA,EAAA,KAAK,IAAI,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;CAC/C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCG;AACI,MAAM,MAAM,iBAAiB,KAAK,CAAC,IAAI,CAC5C,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,SAAS,EAAE,KAAI;IAC7D,QACEA,GAAC,CAAA,YAAY,EACX,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EAAA,OAAA,EACb,IAAI,EACL,MAAA,EAAA,GAAG,EACI,aAAA,EAAA,MAAM,EACnB,KAAK,EAAE,KAAK,EACR,GAAA,SAAS,EACb,CAAA;AAEN,CAAC;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}