@sybilion/uilib 1.0.20

package/dist/esm/components/ui/Sidebar/Sidebar.js

@@ -0,0 +1,448 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { createContext, useContext, useState, useRef, useCallback, useLayoutEffect, useEffect, useMemo } from 'react';
+import { Button } from '../Button/Button.js';
+import { Separator } from '../Separator/Separator.js';
+import { Sheet, SheetContent, SheetTitle } from '../Sheet/Sheet.js';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../Tooltip/Tooltip.js';
+import { clampSidebarWidthPx, CHAT_WIDTH_STORAGE_KEY, SIDEBAR_WIDTH_DEFAULT_PX, SIDEBAR_WIDTH_MIN_PX, SIDEBAR_WIDTH_STORAGE_KEY_PX, SIDEBAR_WIDTH_STORAGE_KEY_PCT, CHAT_WIDTH_DEFAULT_PX, CHAT_WIDTH_MIN_PX, defaultChatWidthPx, clampChatWidthPx } from '../../../hooks/panelWidth.js';
+import useElemDrag from '../../../hooks/useDragElem.js';
+import useEvent from '../../../hooks/useEvent.js';
+import { useIsMobile } from '../../../hooks/useIsMobile.js';
+import { useShellWidthObserver } from '../../../hooks/useShellWidthObserver.js';
+import { setCookie, getCookie } from '../../../lib/cookie.js';
+import { getCookiePreferences } from '../../../lib/cookie-consent/cookie-consent.js';
+import { LS, Scroll } from '@homecode/ui';
+import { Slot } from '@radix-ui/react-slot';
+import { PanelLeft } from 'lucide-react';
+import SidebarStem from './Sidebar.styl.js';
+
+const SIDEBAR_WIDTH_MOBILE = '18rem';
+const SIDEBAR_WIDTH_ICON = '3rem';
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+function isEditableKeyboardTarget(el) {
+    if (!el)
+        return false;
+    if (el instanceof HTMLElement && el.isContentEditable)
+        return true;
+    const tag = el.tagName;
+    return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT';
+}
+function readInitialSidebarWidthPx(storageKeyPx) {
+    if (typeof window === 'undefined')
+        return SIDEBAR_WIDTH_DEFAULT_PX;
+    const stored = LS.get(storageKeyPx);
+    if (typeof stored === 'number' && stored >= SIDEBAR_WIDTH_MIN_PX) {
+        return stored;
+    }
+    if (storageKeyPx === SIDEBAR_WIDTH_STORAGE_KEY_PX) {
+        const legacyPct = LS.get(SIDEBAR_WIDTH_STORAGE_KEY_PCT);
+        if (typeof legacyPct === 'number' && legacyPct > 0) {
+            const w = window.innerWidth;
+            return clampSidebarWidthPx(Math.round((legacyPct / 100) * w), w, {
+                chatPanelOpen: false,
+                chatWidthPx: 0,
+            });
+        }
+    }
+    return SIDEBAR_WIDTH_DEFAULT_PX;
+}
+function readInitialChatWidthPx() {
+    if (typeof window === 'undefined')
+        return CHAT_WIDTH_DEFAULT_PX;
+    const stored = LS.get(CHAT_WIDTH_STORAGE_KEY);
+    if (typeof stored === 'number' && stored >= CHAT_WIDTH_MIN_PX) {
+        return stored;
+    }
+    return defaultChatWidthPx(window.innerWidth);
+}
+const SidebarContext = createContext(null);
+function useSidebar() {
+    const context = useContext(SidebarContext);
+    if (!context) {
+        throw new Error('useSidebar must be used within a SidebarProvider.');
+    }
+    return context;
+}
+function SidebarProvider({ defaultOpen = getCookie('isSidebarOpen') ?? true, className, style, children, userId, sidebarWidthStorageKey, persistSidebarWidthWithoutConsent = false, ...props }) {
+    const sidebarLsKey = sidebarWidthStorageKey ?? SIDEBAR_WIDTH_STORAGE_KEY_PX;
+    const allowPersistSidebarWidth = persistSidebarWidthWithoutConsent ||
+        Boolean(getCookiePreferences(userId)?.functional);
+    const isMobile = useIsMobile();
+    const [isOpen, setIsOpen] = useState(isMobile ? false : defaultOpen);
+    const wrapperRef = useRef(null);
+    const shellWidthRef = useRef(0);
+    const prevShellWidthRef = useRef(0);
+    const [shellEl, setShellEl] = useState(null);
+    const [chatPanelContainer, setChatPanelContainer] = useState(null);
+    const onChatPanelMount = useCallback((node) => {
+        setChatPanelContainer(node);
+    }, []);
+    const [sidebarWidthPx, _setSidebarWidthPx] = useState(() => readInitialSidebarWidthPx(sidebarLsKey));
+    const [chatWidthPx, _setChatWidthPx] = useState(readInitialChatWidthPx);
+    const [chatPanelOpen, setChatPanelOpen] = useState(false);
+    const sidebarWidthRef = useRef(sidebarWidthPx);
+    const chatWidthRef = useRef(chatWidthPx);
+    sidebarWidthRef.current = sidebarWidthPx;
+    chatWidthRef.current = chatWidthPx;
+    const mergeWrapperRef = useCallback((el) => {
+        wrapperRef.current = el;
+        setShellEl(el);
+    }, []);
+    const getShellWidth = useCallback(() => {
+        const w = shellWidthRef.current;
+        if (w > 0)
+            return w;
+        if (wrapperRef.current) {
+            const cw = wrapperRef.current.getBoundingClientRect().width;
+            if (cw > 0)
+                return cw;
+        }
+        return typeof window !== 'undefined' ? window.innerWidth : 1200;
+    }, []);
+    const setSidebarWidthPx = useCallback((px, options) => {
+        const persist = options?.persist !== false;
+        const shellW = getShellWidth();
+        const next = clampSidebarWidthPx(px, shellW, {
+            chatPanelOpen,
+            chatWidthPx,
+        });
+        _setSidebarWidthPx(next);
+        if (persist && allowPersistSidebarWidth) {
+            LS.set(sidebarLsKey, next);
+        }
+    }, [
+        getShellWidth,
+        chatPanelOpen,
+        chatWidthPx,
+        sidebarLsKey,
+        allowPersistSidebarWidth,
+    ]);
+    const setChatWidthPx = useCallback((px, options) => {
+        const persist = options?.persist !== false;
+        const shellW = getShellWidth();
+        const effectiveSidebarW = isOpen ? sidebarWidthPx : 0;
+        const next = clampChatWidthPx(px, shellW, effectiveSidebarW);
+        _setChatWidthPx(next);
+        if (persist && getCookiePreferences(userId)?.functional) {
+            LS.set(CHAT_WIDTH_STORAGE_KEY, next);
+        }
+    }, [getShellWidth, isOpen, sidebarWidthPx, userId]);
+    const handleShellResize = useCallback((shellW) => {
+        shellWidthRef.current = shellW;
+        const prev = prevShellWidthRef.current;
+        if (prev > 0 && shellW > 0) {
+            const s = sidebarWidthRef.current;
+            const c = chatWidthRef.current;
+            const sScaled = Math.round((s * shellW) / prev);
+            const cScaled = Math.round((c * shellW) / prev);
+            const effS = (navOpen, sidebarPx) => navOpen ? sidebarPx : 0;
+            let cNext = clampChatWidthPx(cScaled, shellW, effS(isOpen, sScaled));
+            let sNext = clampSidebarWidthPx(sScaled, shellW, {
+                chatPanelOpen,
+                chatWidthPx: cNext,
+            });
+            cNext = clampChatWidthPx(cScaled, shellW, effS(isOpen, sNext));
+            sNext = clampSidebarWidthPx(sScaled, shellW, {
+                chatPanelOpen,
+                chatWidthPx: cNext,
+            });
+            _setSidebarWidthPx(sNext);
+            _setChatWidthPx(cNext);
+            if (allowPersistSidebarWidth) {
+                LS.set(sidebarLsKey, sNext);
+            }
+            if (getCookiePreferences(userId)?.functional) {
+                LS.set(CHAT_WIDTH_STORAGE_KEY, cNext);
+            }
+        }
+        prevShellWidthRef.current = shellW;
+    }, [chatPanelOpen, isOpen, userId, sidebarLsKey, allowPersistSidebarWidth]);
+    const fitPanelWidthsToShell = useCallback(() => {
+        const shellW = getShellWidth();
+        if (shellW <= 0)
+            return;
+        const s = sidebarWidthRef.current;
+        const c = chatWidthRef.current;
+        const effS = isOpen ? s : 0;
+        let cNext = clampChatWidthPx(c, shellW, effS);
+        let sNext = clampSidebarWidthPx(s, shellW, {
+            chatPanelOpen,
+            chatWidthPx: cNext,
+        });
+        cNext = clampChatWidthPx(c, shellW, isOpen ? sNext : 0);
+        sNext = clampSidebarWidthPx(s, shellW, {
+            chatPanelOpen,
+            chatWidthPx: cNext,
+        });
+        if (sNext !== s || cNext !== c) {
+            _setSidebarWidthPx(sNext);
+            _setChatWidthPx(cNext);
+            if (allowPersistSidebarWidth) {
+                LS.set(sidebarLsKey, sNext);
+            }
+            if (getCookiePreferences(userId)?.functional) {
+                LS.set(CHAT_WIDTH_STORAGE_KEY, cNext);
+            }
+        }
+    }, [
+        chatPanelOpen,
+        getShellWidth,
+        isOpen,
+        userId,
+        sidebarLsKey,
+        allowPersistSidebarWidth,
+    ]);
+    useLayoutEffect(() => {
+        if (!shellEl || isMobile)
+            return;
+        fitPanelWidthsToShell();
+    }, [shellEl, chatPanelOpen, isMobile, isOpen, fitPanelWidthsToShell]);
+    useShellWidthObserver(shellEl, handleShellResize);
+    const setOpen = useCallback((value, options) => {
+        const useViewTransition = options?.viewTransition !== false &&
+            !isMobile &&
+            'startViewTransition' in document &&
+            document.startViewTransition;
+        if (useViewTransition) {
+            document.startViewTransition(() => {
+                setIsOpen(value);
+            });
+        }
+        else {
+            setIsOpen(value);
+        }
+        if (getCookiePreferences(userId)?.functional) {
+            setCookie('isSidebarOpen', value.toString(), 60 * 60 * 24 * 7);
+        }
+    }, [isMobile, userId]);
+    const toggleSidebar = useCallback(() => setOpen(!isOpen), [isOpen, setOpen]);
+    useEffect(() => {
+        const shell = wrapperRef.current;
+        if (!shell)
+            return;
+        if (chatPanelOpen) {
+            shell.setAttribute('data-chat-open', '');
+            if (isMobile) {
+                shell.style.setProperty('--chat-panel-width', '100%');
+                shell.style.setProperty('--chat-panel-height', '100dvh');
+            }
+            else {
+                shell.style.setProperty('--chat-panel-width', `${chatWidthPx}px`);
+                shell.style.removeProperty('--chat-panel-height');
+            }
+        }
+        else {
+            shell.removeAttribute('data-chat-open');
+            shell.style.setProperty('--chat-panel-width', '0px');
+            shell.style.removeProperty('--chat-panel-height');
+        }
+    }, [chatPanelOpen, isMobile, chatWidthPx]);
+    useEffect(() => {
+        return () => {
+            const shell = wrapperRef.current;
+            if (!shell)
+                return;
+            shell.removeAttribute('data-chat-open');
+            shell.style.setProperty('--chat-panel-width', '0px');
+            shell.style.removeProperty('--chat-panel-height');
+        };
+    }, []);
+    useEvent({
+        event: 'keydown',
+        callback: (e) => {
+            const isToggleShortcut = (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey)) ||
+                (e.key === '/' && !isEditableKeyboardTarget(document.activeElement));
+            if (isToggleShortcut) {
+                e.preventDefault();
+                toggleSidebar();
+            }
+        },
+    });
+    const contextValue = useMemo(() => ({
+        isOpen,
+        setOpen,
+        toggleSidebar,
+        sidebarWidthPx,
+        setSidebarWidthPx,
+        chatWidthPx,
+        setChatWidthPx,
+        chatPanelOpen,
+        setChatPanelOpen,
+        getShellWidth,
+        chatPanelContainer,
+        sidebarWrapperRef: wrapperRef,
+    }), [
+        isOpen,
+        setOpen,
+        toggleSidebar,
+        sidebarWidthPx,
+        setSidebarWidthPx,
+        chatWidthPx,
+        setChatWidthPx,
+        chatPanelOpen,
+        getShellWidth,
+        chatPanelContainer,
+    ]);
+    return (jsx(SidebarContext.Provider, { value: contextValue, children: jsx(TooltipProvider, { delayDuration: 0, children: jsxs("div", { ref: mergeWrapperRef, "data-slot": "sidebar-wrapper", "data-state": isOpen ? 'expanded' : 'collapsed', style: {
+                    '--sidebar-width': `${sidebarWidthPx}px`,
+                    '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+                    ...style,
+                }, className: cn(SidebarStem.sidebarWrapper, className), ...props, children: [jsx("div", { className: SidebarStem.sidebarMainShell, children: children }), jsx("div", { ref: onChatPanelMount, className: SidebarStem.chatPanelMount, "data-slot": "chat-panel-mount" })] }) }) }));
+}
+function Sidebar({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, side = 'left', variant = 'sidebar', collapsible = 'offcanvas', children, fullHeightResizer = false, ...props }) {
+    const isMobile = useIsMobile();
+    const { isOpen, setOpen } = useSidebar();
+    // Only force-close on mobile. Do not call setOpen(true) on desktop — that ran on every
+    // load and overwrote the isSidebarOpen cookie (collapsed → opened + cookie "true").
+    useEffect(() => {
+        if (isMobile)
+            setOpen(false);
+    }, [isMobile, setOpen]);
+    if (collapsible === 'none') {
+        return (jsx("div", { "data-slot": "sidebar", className: cn(SidebarStem.sidebarNone, className), ...props, children: children }));
+    }
+    if (isMobile) {
+        return (jsx(Sheet, { open: isOpen, onOpenChange: setOpen, ...props, children: jsxs(SheetContent, { "data-sidebar": "sidebar", "data-slot": "sidebar", className: cn(SidebarStem.sheetContentSidebar, className), style: {
+                    '--gap-top': '40px',
+                    '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+                }, side: side, children: [jsx(SheetTitle, { className: "sr-only", children: "Navigation Menu" }), jsx("div", { className: cn(SidebarStem.sheetSidebarInner), children: children })] }) }));
+    }
+    return (jsxs("aside", { className: cn(SidebarStem.sidebar, SidebarStem[`variant-${variant}`], className, fullHeightResizer && SidebarStem.fullHeightResizer), "data-state": isOpen ? 'expanded' : 'collapsed', "data-collapsible": !isOpen ? collapsible : '', "data-variant": variant, "data-side": side, ...props, children: [children, jsx(SidebarResizeHandle, { side: side })] }));
+}
+function SidebarTrigger({ className, onClick, ...props }) {
+    const { toggleSidebar } = useSidebar();
+    return (jsx(Button, { "data-sidebar": "trigger", "data-slot": "sidebar-trigger", variant: "ghost", icon: true, className: cn(SidebarStem.sidebarTrigger, className), onClick: event => {
+            onClick?.(event);
+            toggleSidebar();
+        }, ...props, children: jsx(PanelLeft, { size: 20, strokeWidth: 1.5, className: "text-foreground" }) }));
+}
+function SidebarRail({ className, ...props }) {
+    const { toggleSidebar } = useSidebar();
+    return (jsx("button", { "data-sidebar": "rail", "data-slot": "sidebar-rail", "aria-label": "Toggle Sidebar", tabIndex: -1, onClick: toggleSidebar, title: "Toggle Sidebar", className: cn(SidebarStem.sidebarRail, className), ...props }));
+}
+function PanelResizeHandle({ className, edge, isActive, startWidthPx, getShellWidth, onDragWidth, onDragComplete, ...props }) {
+    const handleRef = useRef(null);
+    const startWidthRef = useRef(0);
+    const lastRawRef = useRef(0);
+    const handleDrag = useCallback((delta) => {
+        const shellW = getShellWidth();
+        if (shellW <= 0)
+            return;
+        const raw = edge === 'trailing'
+            ? startWidthRef.current + delta.x
+            : startWidthRef.current - delta.x;
+        lastRawRef.current = raw;
+        onDragWidth(raw);
+    }, [edge, getShellWidth, onDragWidth]);
+    const handleDragStart = useCallback((e) => {
+        startWidthRef.current = startWidthPx;
+        lastRawRef.current = startWidthPx;
+        handleRef.current?.setPointerCapture(e.pointerId);
+    }, [startWidthPx]);
+    const handleDragEnd = useCallback((e) => {
+        onDragComplete?.(lastRawRef.current);
+        try {
+            handleRef.current?.releasePointerCapture(e.pointerId);
+        }
+        catch {
+            // Capture already released
+        }
+        startWidthRef.current = 0;
+    }, [onDragComplete]);
+    useElemDrag({
+        elem: handleRef,
+        onDrag: handleDrag,
+        onDragStart: handleDragStart,
+        onDragEnd: handleDragEnd,
+        isActive,
+    });
+    if (!isActive) {
+        return null;
+    }
+    return (jsx("div", { ref: handleRef, "data-slot": "panel-resize-handle", "data-edge": edge, className: className, ...props }));
+}
+function SidebarResizeHandle({ className, side = 'left', ...props }) {
+    const { isOpen, sidebarWidthPx, setSidebarWidthPx, getShellWidth } = useSidebar();
+    const isMobile = useIsMobile();
+    const edge = side === 'left' ? 'trailing' : 'leading';
+    const onDragWidth = useCallback((rawPx) => {
+        setSidebarWidthPx(rawPx, { persist: false });
+    }, [setSidebarWidthPx]);
+    const onDragComplete = useCallback((finalRawPx) => {
+        setSidebarWidthPx(finalRawPx, { persist: true });
+    }, [setSidebarWidthPx]);
+    if (isMobile || !isOpen) {
+        return null;
+    }
+    return (jsx(PanelResizeHandle, { edge: edge, isActive: isOpen && !isMobile, startWidthPx: sidebarWidthPx, getShellWidth: getShellWidth, onDragWidth: onDragWidth, onDragComplete: onDragComplete, "data-sidebar": "resize-handle", "data-slot": "sidebar-resize-handle", "data-side": side, className: cn(SidebarStem.sidebarResizeHandle, className), ...props }));
+}
+function SidebarFooter({ className, ...props }) {
+    return (jsx("div", { "data-slot": "sidebar-footer", "data-sidebar": "footer", className: cn(SidebarStem.sidebarFooter, className), ...props }));
+}
+function SidebarSeparator({ className, ...props }) {
+    return (jsx(Separator, { "data-slot": "sidebar-separator", "data-sidebar": "separator", className: cn(SidebarStem.sidebarSeparator, className), ...props }));
+}
+function SidebarContent({ className, innerClassName, children, }) {
+    // const sidebarContentTransition = useViewTransition({
+    //   transitionName: 'sidebar-content',
+    // });
+    return (jsx(Scroll, { y: true, autoHide: true, fadeSize: "l", offset: { y: { before: 40, after: 20 } }, className: cn(SidebarStem.sidebarContent, className), innerClassName: innerClassName, children: children }));
+}
+function SidebarGroup({ className, ...props }) {
+    return (jsx("div", { "data-slot": "sidebar-group", "data-sidebar": "group", className: cn(SidebarStem.sidebarGroup, className), ...props }));
+}
+function SidebarGroupLabel({ className, asChild = false, ...props }) {
+    const Comp = asChild ? Slot : 'div';
+    return (jsx(Comp, { "data-slot": "sidebar-group-label", "data-sidebar": "group-label", className: cn(SidebarStem.sidebarGroupLabel, className), ...props }));
+}
+function SidebarGroupAction({ className, asChild = false, ...props }) {
+    const Comp = asChild ? Slot : 'button';
+    return (jsx(Comp, { "data-slot": "sidebar-group-action", "data-sidebar": "group-action", className: cn(SidebarStem.sidebarGroupAction, className), ...props }));
+}
+function SidebarGroupContent({ className, ...props }) {
+    return (jsx("div", { "data-slot": "sidebar-group-content", "data-sidebar": "group-content", className: cn(SidebarStem.sidebarGroupContent, className), ...props }));
+}
+function SidebarMenu({ className, ...props }) {
+    return (jsx("ul", { "data-slot": "sidebar-menu", "data-sidebar": "menu", className: cn(SidebarStem.sidebarMenu, className), ...props }));
+}
+function SidebarMenuItem({ className, ...props }) {
+    return (jsx("li", { "data-slot": "sidebar-menu-item", "data-sidebar": "menu-item", className: cn(SidebarStem.sidebarMenuItem, className), ...props }));
+}
+function SidebarMenuButton({ asChild = false, isActive = false, variant = 'ghost', size = 'sm', className, ...props }) {
+    return (jsx(Button, { asChild: asChild, variant: variant, size: size, "data-slot": "sidebar-menu-button", "data-sidebar": "menu-button", "data-active": isActive, className: cn(variant === 'default' ? SidebarStem.sidebarMenuButtonCta : SidebarStem.sidebarMenuButton, SidebarStem[`size-${size}`], className), ...props }));
+}
+function SidebarMenuAction({ className, asChild = false, showOnHover = false, ...props }) {
+    const Comp = asChild ? Slot : 'button';
+    return (jsx(Comp, { "data-slot": "sidebar-menu-action", "data-sidebar": "menu-action", className: cn(SidebarStem.sidebarMenuAction, showOnHover && SidebarStem.showOnHover, className), ...props }));
+}
+function SidebarMenuBadge({ className, ...props }) {
+    return (jsx("div", { "data-slot": "sidebar-menu-badge", "data-sidebar": "menu-badge", className: cn(SidebarStem.sidebarMenuBadge, className), ...props }));
+}
+function SidebarMenuSub({ className, ...props }) {
+    return (jsx("ul", { "data-slot": "sidebar-menu-sub", "data-sidebar": "menu-sub", className: cn(SidebarStem.sidebarMenuSub, className), ...props }));
+}
+function SidebarMenuSubItem({ className, ...props }) {
+    return (jsx("li", { "data-slot": "sidebar-menu-sub-item", "data-sidebar": "menu-sub-item", className: cn(SidebarStem.sidebarMenuSubItem, className), ...props }));
+}
+function SidebarMenuSubButton({ asChild = false, size = 'md', isActive = false, tooltip, className, onClick, ...props }) {
+    const Comp = asChild ? Slot : 'a';
+    const { isOpen, setOpen } = useSidebar();
+    const isMobile = useIsMobile();
+    const handleClick = (event) => {
+        if (isMobile && isOpen)
+            setOpen(false);
+        onClick?.(event);
+    };
+    const button = (jsx(Comp, { "data-slot": "sidebar-menu-sub-button", "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn(SidebarStem.sidebarMenuSubButton, SidebarStem[`size-${size}`], className), onClick: handleClick, ...props }));
+    if (!tooltip)
+        return button;
+    if (typeof tooltip === 'string') {
+        tooltip = {
+            children: tooltip,
+        };
+    }
+    return (jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: button }), jsx(TooltipContent, { side: "right", align: "center", hidden: !isOpen || isMobile, ...tooltip })] }));
+}
+
+export { PanelResizeHandle, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarResizeHandle, SidebarSeparator, SidebarTrigger, useSidebar };

package/dist/esm/components/ui/Sidebar/Sidebar.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.Sidebar_sidebarWrapper__DGm4P{align-items:stretch;display:flex;flex-direction:row;--welcome-alert-height:44px;height:calc(100% - 44px);height:calc(100% - var(--welcome-alert-height));min-height:0;width:100%}.Sidebar_sidebarWrapper__DGm4P #page-sidebar-actions{min-height:100%}@media (max-width:768px){.Sidebar_sidebarWrapper__DGm4P{flex-direction:column;height:100dvh;max-height:100dvh}}.Sidebar_sidebarMainShell__pSWDC{display:flex;flex:1;flex-direction:column;min-height:0;min-width:0}.Sidebar_chatPanelMount__1Zctx{background:var(--background);border-left:1px solid var(--border);flex:0 0 0px;flex:0 0 var(--chat-panel-width,0px);min-height:0;min-width:0;overflow:hidden;width:0;width:var(--chat-panel-width,0)}@media (max-width:768px){.Sidebar_chatPanelMount__1Zctx{border-left:none;border-top:1px solid var(--border);flex:0 0 0px;flex:0 0 var(--chat-panel-height,0px);height:0;height:var(--chat-panel-height,0);transition:flex-basis .2s ease,height .2s ease;width:100%}}.Sidebar_sidebar__0vqNZ{height:0;position:fixed;--top-offset:-10px;--gap-top:calc(var(--header-height) + var(--top-offset));align-self:flex-start;color:var(--sidebar-foreground);display:none;flex-direction:column;top:var(--gap-top);width:var(--sidebar-width)}@media (min-width:768px){.Sidebar_sidebar__0vqNZ[data-state=expanded]{display:flex;height:calc(100vh - var(--gap-top));min-height:0}}.Sidebar_sidebar__0vqNZ[data-collapsible=offcanvas]{overflow:hidden;padding:0;width:0}.Sidebar_sidebarTrigger__ipx2C{cursor:pointer;height:var(--p-5);width:var(--p-5)}.Sidebar_sidebarTrigger__ipx2C svg{height:20px;width:20px}.Sidebar_sidebarRail__uvSpl{position:absolute;inset-y:0;display:hidden;transition:all ease-out;width:1rem;z-index:20}.Sidebar_sidebarRail__uvSpl:hover:after{background-color:var(--sidebar-border)}.Sidebar_sidebarRail__uvSpl[data-side=left]{right:-1rem}.Sidebar_sidebarRail__uvSpl[data-side=right]{left:0}.Sidebar_sidebarRail__uvSpl:after{content:\"\";position:absolute;inset-y:0;left:50%;width:2px}@media (min-width:640px){.Sidebar_sidebarRail__uvSpl{display:flex}}.Sidebar_sidebarRail__uvSpl[data-side=left]{cursor:w-resize}.Sidebar_sidebarRail__uvSpl[data-side=left][data-state=collapsed],.Sidebar_sidebarRail__uvSpl[data-side=right]{cursor:e-resize}.Sidebar_sidebarRail__uvSpl[data-side=right][data-state=collapsed]{cursor:w-resize}.Sidebar_sidebarRail__uvSpl[data-collapsible=offcanvas]{transform:translateX(0)}.Sidebar_sidebarRail__uvSpl[data-collapsible=offcanvas]:hover{background-color:var(--sidebar)}.Sidebar_sidebarRail__uvSpl[data-collapsible=offcanvas]:after{left:100%}.Sidebar_sidebarRail__uvSpl[data-side=left][data-collapsible=offcanvas]{right:-.5rem}.Sidebar_sidebarRail__uvSpl[data-side=right][data-collapsible=offcanvas]{left:-.5rem}.Sidebar_sidebarResizeHandle__kuD6t{background-color:transparent;background-color:var(--page-color);border-radius:2.5px;height:calc(100vh + 200px);opacity:0;position:absolute;top:-200px;touch-action:none;transition:opacity .15s ease-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:5px;z-index:30}.Sidebar_sidebarResizeHandle__kuD6t:before{content:\"\";cursor:col-resize;height:100%;position:absolute;right:0;width:30px}.Sidebar_sidebarResizeHandle__kuD6t[data-side=left]{right:2px}.Sidebar_sidebarResizeHandle__kuD6t[data-side=right]{left:0}.Sidebar_sidebarResizeHandle__kuD6t:hover{opacity:1}.Sidebar_sidebarResizeHandle__kuD6t:active{opacity:0}.Sidebar_fullHeightResizer__jZXnw .Sidebar_sidebarResizeHandle__kuD6t{height:calc(100vh - var(--gap-top)*-1);top:-80px}.Sidebar_sidebarInput__ujQLX{background-color:var(--background);box-shadow:none;height:2rem;width:100%}.Sidebar_sidebarFooter__V3O-l,.Sidebar_sidebarHeader__X33ii{display:flex;flex-direction:column;gap:0;padding:0}.Sidebar_sidebarSeparator__oUkYG{background-color:var(--sidebar-border);margin-left:0;margin-right:0;width:auto}.Sidebar_sidebarContent__Ywe1o{display:flex;flex:1;flex-direction:column;gap:var(--p-16);height:100vh;max-height:100vh;min-height:0;overflow:auto;position:absolute;width:100%}@media (min-width:768px){.Sidebar_sidebarContent__Ywe1o{height:calc(100vh - var(--gap-top))}}.Sidebar_sidebarContent__Ywe1o[data-collapsible=icon]{overflow:hidden}.Sidebar_sidebarGroup__7Mhg2{display:flex;flex-direction:column;min-width:0;padding:40px 0 0;position:relative;width:100%}.Sidebar_sidebarGroupLabel__5VJ-b{align-items:center;border-radius:.375rem;color:var(--sidebar-foreground);display:flex;flex-shrink:0;font-size:.75rem;font-weight:500;height:2rem;opacity:.7;outline:none;padding-left:.5rem;padding-right:.5rem;transition:margin ease-linear .2s,opacity ease-linear .2s}.Sidebar_sidebarGroupLabel__5VJ-b:focus-visible{box-shadow:0 0 0 2px var(--sidebar-ring)}.Sidebar_sidebarGroupLabel__5VJ-b>svg{flex-shrink:0;height:1rem;width:1rem}.Sidebar_sidebarGroupLabel__5VJ-b[data-collapsible=icon]{margin-top:-2rem;opacity:0}.Sidebar_sidebarGroupAction__OhVZq{align-items:center;aspect-ratio:1;border-radius:.375rem;color:var(--sidebar-foreground);display:flex;justify-content:center;outline:none;padding:0;position:absolute;right:.75rem;top:.875rem;transition:transform;width:1.25rem}.Sidebar_sidebarGroupAction__OhVZq:hover{background-color:var(--sidebar-accent);color:var(--sidebar-accent-foreground)}.Sidebar_sidebarGroupAction__OhVZq:focus-visible{box-shadow:0 0 0 2px var(--sidebar-ring)}.Sidebar_sidebarGroupAction__OhVZq>svg{flex-shrink:0;height:1rem;width:1rem}.Sidebar_sidebarGroupAction__OhVZq:after{content:\"\";inset:-.5rem;position:absolute}@media (min-width:768px){.Sidebar_sidebarGroupAction__OhVZq:after{display:none}}.Sidebar_sidebarGroupAction__OhVZq[data-collapsible=icon]{display:none}.Sidebar_sidebarGroupContent__ZqWcj{font-size:.875rem;width:100%}.Sidebar_sidebarMenu__hYXIo{display:flex;flex-direction:column;gap:var(--p-4);list-style:none;min-width:0;padding:0 var(--p-11) var(--p-10) var(--p-8);width:100%}@media (max-width:768px){.Sidebar_sidebarMenu__hYXIo{padding-right:var(--p-8)}}.Sidebar_sidebarMenuItem__CRhM8{cursor:pointer;position:relative}.Sidebar_sidebarMenuBadge__ttvCR{align-items:center;border-radius:.375rem;color:var(--sidebar-foreground);display:flex;font-size:.75rem;font-weight:500;height:1.25rem;justify-content:center;min-width:1.25rem;padding-left:.25rem;padding-right:.25rem;pointer-events:none;position:absolute;right:.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Sidebar_sidebarMenuBadge__ttvCR[data-size=sm]{top:.25rem}.Sidebar_sidebarMenuBadge__ttvCR[data-size=md]{top:.375rem}.Sidebar_sidebarMenuBadge__ttvCR[data-size=lg]{top:.625rem}.Sidebar_sidebarMenuBadge__ttvCR[data-collapsible=icon]{display:none}.Sidebar_sidebarMenuSkeleton__u2KoI{align-items:center;border-radius:.375rem;display:flex;gap:.5rem;height:2rem;padding-left:.5rem;padding-right:.5rem}.Sidebar_sidebarMenuSkeletonIcon__-1tvv{border-radius:.375rem;height:1rem;width:1rem}.Sidebar_sidebarMenuSkeletonText__dWzWo{flex:1;height:1rem;max-width:var(--skeleton-width)}.Sidebar_sidebarMenuSub__gh8Rn{border-color:var(--sidebar-border);border-left:none;display:flex;flex-direction:column;gap:var(--p-2);list-style:none;margin-left:0;margin-right:0;min-width:0;padding:0;padding-top:var(--p-1);position:relative;transform:translateX(1px)}.Sidebar_sidebarMenuSub__gh8Rn:before{background:var(--sidebar-border);bottom:26px;content:\"\";left:var(--p-5);pointer-events:none;position:absolute;top:0;width:1px}.Sidebar_sidebarMenuSub__gh8Rn[data-collapsible=icon]{display:none}.Sidebar_sidebarMenuSubItem__fTHJa{margin-left:var(--p-6);position:relative}.Sidebar_sidebarMenuSubItem__fTHJa:before{border-bottom:1px solid var(--sidebar-border);border-bottom-left-radius:var(--p-2);border-left:1px solid var(--sidebar-border);bottom:0;content:\"\";height:var(--p-3);left:calc(var(--p-1)*-1);position:absolute;top:var(--p-2);width:var(--p-3)}.Sidebar_sidebarMenuSubItem__fTHJa a:hover{text-decoration:none}.Sidebar_sheetContentSidebar__cM2h2{color:var(--sidebar-foreground);padding:0;width:var(--sidebar-width)}.Sidebar_sheetContentSidebar__cM2h2>button{display:none}@media (max-width:768px){.Sidebar_sheetContentSidebar__cM2h2{z-index:100}}.Sidebar_sheetSidebarInner__U-SMQ{background-color:var(--sidebar);display:flex;flex-direction:column;height:100%;width:100%}.Sidebar_sidebarNone__crRsF{color:var(--sidebar-foreground);display:flex;flex-direction:column;height:100%;width:var(--sidebar-width)}.Sidebar_variant-floating__-qvkJ{padding:.5rem}.Sidebar_variant-floating__-qvkJ[data-collapsible=icon],.Sidebar_variant-inset__oTfrV[data-collapsible=icon]{width:calc(var(--sidebar-width-icon) + 1rem + 2px)}.Sidebar_variant-sidebar__fAe77[data-collapsible=icon]{width:var(--sidebar-width-icon)}.Sidebar_variant-sidebar__fAe77[data-side=left]{border-right:1px solid #e5e7eb}.Sidebar_variant-sidebar__fAe77[data-side=right]{border-left:1px solid #e5e7eb}.Sidebar_sidebarMenuButton__vIEh->span,.Sidebar_sidebarMenuSubButton__c9flh>span{min-width:0;text-transform:capitalize}.Sidebar_sidebarMenuButton__vIEh->span:first-child,.Sidebar_sidebarMenuSubButton__c9flh>span:first-child{flex-grow:1}.Sidebar_sidebarMenuButton__vIEh-{align-items:center;border-radius:var(--p-3);color:var(--sidebar-foreground);cursor:pointer;display:flex;font-size:.875rem;gap:var(--p-2);justify-content:flex-start;outline:none;overflow:hidden;padding:var(--p-6) var(--p-3);text-align:left;text-decoration:none;transition:all;width:100%}.Sidebar_sidebarMenuButton__vIEh-:visited{color:var(--sidebar-foreground)}.Sidebar_sidebarMenuButton__vIEh-:hover{text-decoration:none}.Sidebar_sidebarMenuSubItem__fTHJa:active .Sidebar_sidebarMenuButton__vIEh-,.Sidebar_sidebarMenuSubItem__fTHJa:hover .Sidebar_sidebarMenuButton__vIEh-,.Sidebar_sidebarMenuSubItem__fTHJa[data-state=open] .Sidebar_sidebarMenuButton__vIEh-{background-color:var(--sidebar-accent);color:var(--sidebar-accent-foreground)}.Sidebar_sidebarMenuButton__vIEh-:focus-visible{box-shadow:0 0 0 2px var(--sidebar-ring)}.Sidebar_sidebarMenuButton__vIEh-:disabled,.Sidebar_sidebarMenuButton__vIEh-[aria-disabled=true]{opacity:.5;pointer-events:none}.Sidebar_sidebarMenuButton__vIEh-[data-active=true]{background-color:var(--sidebar-accent);color:var(--sidebar-accent-foreground);font-weight:500}.Sidebar_sidebarMenuButton__vIEh-[data-collapsible=icon]{height:2rem!important;padding:.5rem!important;width:2rem!important}.Sidebar_sidebarMenuButton__vIEh->span{flex-grow:1;line-height:20px;overflow:hidden;white-space:nowrap}.Sidebar_sidebarMenuButton__vIEh->svg{flex-shrink:0;height:var(--p-5);width:var(--p-5)}.Sidebar_sidebarMenuButton__vIEh-.Sidebar_size-sm__7aIbu{font-size:.75rem;height:1.75rem}.Sidebar_sidebarMenuButton__vIEh-.Sidebar_size-md__rcjmO{font-size:.875rem;height:var(--p-12)}.Sidebar_sidebarMenuButton__vIEh-.Sidebar_size-lg__1k76S{font-size:.875rem;height:3rem}.Sidebar_sidebarMenuButton__vIEh-.Sidebar_size-lg__1k76S[data-collapsible=icon]{padding:0!important}.Sidebar_sidebarMenuButton__vIEh-.Sidebar_variant-outline__UmtAz{background-color:var(--background);box-shadow:0 0 0 1px var(--sidebar-border)}.Sidebar_sidebarMenuButton__vIEh-.Sidebar_variant-outline__UmtAz:hover{background-color:var(--sidebar-accent);box-shadow:0 0 0 1px var(--sidebar-accent);color:var(--sidebar-accent-foreground)}.Sidebar_sidebarMenuButtonCta__dQAhv{display:flex;justify-content:flex-start;text-align:left;width:100%}.Sidebar_sidebarMenuButtonCta__dQAhv>svg{flex-shrink:0;height:var(--p-5);width:var(--p-5)}.Sidebar_sidebarMenuAction__mFZa1{align-items:center;aspect-ratio:1;border-radius:.375rem;color:var(--sidebar-foreground);cursor:pointer;display:flex;justify-content:center;opacity:0;outline:none;padding:0;position:absolute;right:var(--p-2);top:var(--p-2);transition:transform;width:1.25rem}.Sidebar_sidebarMenuAction__mFZa1:before{background-image:linear-gradient(to left,var(--sidebar-accent) 70%,transparent 100%);content:\"\";height:100%;pointer-events:none;position:absolute;right:0;transition:opacity .2s ease-in-out;width:calc(100% + var(--p-4))}.Sidebar_sidebarMenuSubItem__fTHJa:hover .Sidebar_sidebarMenuAction__mFZa1{opacity:1}.Sidebar_sidebarMenuAction__mFZa1:focus-visible{box-shadow:0 0 0 2px var(--sidebar-ring)}.Sidebar_sidebarMenuAction__mFZa1>svg{flex-shrink:0;height:1rem;opacity:.5;pointer-events:none;transition:opacity .2s ease-in-out;width:1rem;z-index:1}.Sidebar_sidebarMenuAction__mFZa1:hover>svg{opacity:1}.Sidebar_sidebarMenuAction__mFZa1:after{content:\"\";inset:-.5rem;position:absolute}@media (min-width:768px){.Sidebar_sidebarMenuAction__mFZa1:after{display:none}}.Sidebar_sidebarMenuAction__mFZa1[data-size=sm]{top:.25rem}.Sidebar_sidebarMenuAction__mFZa1[data-size=md]{top:.375rem}.Sidebar_sidebarMenuAction__mFZa1[data-size=lg]{top:.625rem}.Sidebar_sidebarMenuAction__mFZa1[data-collapsible=icon]{display:none}.Sidebar_sidebarMenuAction__mFZa1.Sidebar_showOnHover__itXsA[data-active=true]{color:var(--sidebar-accent-foreground)}.Sidebar_sidebarMenuAction__mFZa1.Sidebar_showOnHover__itXsA[data-state=open]{opacity:1}@media (min-width:768px){.Sidebar_sidebarMenuAction__mFZa1.Sidebar_showOnHover__itXsA{opacity:0}.Sidebar_sidebarMenuAction__mFZa1.Sidebar_showOnHover__itXsA:focus-within,.Sidebar_sidebarMenuAction__mFZa1.Sidebar_showOnHover__itXsA:hover{opacity:1}}.Sidebar_sidebarMenuSubButton__c9flh{align-items:center;border-radius:var(--p-3);color:var(--sidebar-foreground);cursor:pointer;display:flex;gap:var(--p-1);height:var(--p-9);margin-left:var(--p-3);min-width:0;outline:none;overflow:hidden;padding:var(--p-1) var(--p-2);text-decoration:none;transform:translateX(-1px)}.Sidebar_sidebarMenuSubButton__c9flh:visited{color:var(--sidebar-foreground)}.Sidebar_sidebarMenuSubButton__c9flh:hover{text-decoration:none}.Sidebar_sidebarMenuSubItem__fTHJa:active .Sidebar_sidebarMenuSubButton__c9flh,.Sidebar_sidebarMenuSubItem__fTHJa:hover .Sidebar_sidebarMenuSubButton__c9flh{background-color:var(--sidebar-accent);color:var(--sidebar-accent-foreground)}.Sidebar_sidebarMenuSubButton__c9flh:focus-visible{box-shadow:0 0 0 2px var(--sidebar-ring)}.Sidebar_sidebarMenuSubButton__c9flh:disabled,.Sidebar_sidebarMenuSubButton__c9flh[aria-disabled=true]{opacity:.5;pointer-events:none}.Sidebar_sidebarMenuSubButton__c9flh[data-active=true]{background-color:var(--sidebar-accent);color:var(--sidebar-accent-foreground)}.Sidebar_sidebarMenuSubButton__c9flh[data-active=true]:visited{color:var(--sidebar-accent-foreground)}.Sidebar_sidebarMenuSubButton__c9flh[data-collapsible=icon]{display:none}.Sidebar_sidebarMenuSubButton__c9flh>span:first-child{overflow:hidden;white-space:nowrap}.Sidebar_sidebarMenuSubButton__c9flh>svg{color:var(--sidebar-accent-foreground);flex-shrink:0;height:1rem;width:1rem}.Sidebar_sidebarMenuSubButton__c9flh.Sidebar_size-sm__7aIbu{font-size:.75rem}.Sidebar_sidebarMenuSubButton__c9flh.Sidebar_size-md__rcjmO{font-size:.875rem}.Sidebar_sidebarMenuSubButton__c9flh.Sidebar_size-lg__1k76S{font-size:1rem}::view-transition-old(sidebar-container),::view-transition-old(sidebar-gap){animation-duration:.2s;animation-name:Sidebar_sidebarVtOld__hlKqn;animation-timing-function:ease-out;transform:translateZ(0)}::view-transition-new(sidebar-container),::view-transition-new(sidebar-gap){animation-duration:.2s;animation-name:Sidebar_sidebarVtNew__FFhYU;animation-timing-function:ease-out;transform:translateZ(0)}@keyframes Sidebar_sidebarVtOld__hlKqn{0%{opacity:1}to{opacity:0}}@keyframes Sidebar_sidebarVtNew__FFhYU{0%{opacity:0}to{opacity:1}}";
+var SidebarStem = {"sidebarWrapper":"Sidebar_sidebarWrapper__DGm4P","sidebarMainShell":"Sidebar_sidebarMainShell__pSWDC","chatPanelMount":"Sidebar_chatPanelMount__1Zctx","sidebar":"Sidebar_sidebar__0vqNZ","sidebarTrigger":"Sidebar_sidebarTrigger__ipx2C","sidebarRail":"Sidebar_sidebarRail__uvSpl","sidebarResizeHandle":"Sidebar_sidebarResizeHandle__kuD6t","fullHeightResizer":"Sidebar_fullHeightResizer__jZXnw","sidebarInput":"Sidebar_sidebarInput__ujQLX","sidebarHeader":"Sidebar_sidebarHeader__X33ii","sidebarFooter":"Sidebar_sidebarFooter__V3O-l","sidebarSeparator":"Sidebar_sidebarSeparator__oUkYG","sidebarContent":"Sidebar_sidebarContent__Ywe1o","sidebarGroup":"Sidebar_sidebarGroup__7Mhg2","sidebarGroupLabel":"Sidebar_sidebarGroupLabel__5VJ-b","sidebarGroupAction":"Sidebar_sidebarGroupAction__OhVZq","sidebarGroupContent":"Sidebar_sidebarGroupContent__ZqWcj","sidebarMenu":"Sidebar_sidebarMenu__hYXIo","sidebarMenuItem":"Sidebar_sidebarMenuItem__CRhM8","sidebarMenuBadge":"Sidebar_sidebarMenuBadge__ttvCR","sidebarMenuSkeleton":"Sidebar_sidebarMenuSkeleton__u2KoI","sidebarMenuSkeletonIcon":"Sidebar_sidebarMenuSkeletonIcon__-1tvv","sidebarMenuSkeletonText":"Sidebar_sidebarMenuSkeletonText__dWzWo","sidebarMenuSub":"Sidebar_sidebarMenuSub__gh8Rn","sidebarMenuSubItem":"Sidebar_sidebarMenuSubItem__fTHJa","sheetContentSidebar":"Sidebar_sheetContentSidebar__cM2h2","sheetSidebarInner":"Sidebar_sheetSidebarInner__U-SMQ","sidebarNone":"Sidebar_sidebarNone__crRsF","variant-floating":"Sidebar_variant-floating__-qvkJ","variant-inset":"Sidebar_variant-inset__oTfrV","variant-sidebar":"Sidebar_variant-sidebar__fAe77","sidebarMenuButton":"Sidebar_sidebarMenuButton__vIEh-","sidebarMenuSubButton":"Sidebar_sidebarMenuSubButton__c9flh","size-sm":"Sidebar_size-sm__7aIbu","size-md":"Sidebar_size-md__rcjmO","size-lg":"Sidebar_size-lg__1k76S","variant-outline":"Sidebar_variant-outline__UmtAz","sidebarMenuButtonCta":"Sidebar_sidebarMenuButtonCta__dQAhv","sidebarMenuAction":"Sidebar_sidebarMenuAction__mFZa1","showOnHover":"Sidebar_showOnHover__itXsA","sidebarVtOld":"Sidebar_sidebarVtOld__hlKqn","sidebarVtNew":"Sidebar_sidebarVtNew__FFhYU"};
+styleInject(css_248z);
+
+export { SidebarStem as default };

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

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import S from './Skeleton.styl.js';
+
+function Skeleton({ className, size = 'md', shape = 'rectangle', ...props }) {
+    return (jsx("div", { "data-slot": "skeleton", className: cn(S.root, S[`size-${size}`], S[`shape-${shape}`], className), ...props }));
+}
+
+export { Skeleton };

package/dist/esm/components/ui/Skeleton/Skeleton.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".Skeleton_root__Jjk-p{animation:Skeleton_pulse__8kRAv 2s cubic-bezier(.4,0,.6,1) infinite;background-color:var(--accent-color-alpha-100);border-radius:.375rem}@keyframes Skeleton_pulse__8kRAv{0%,to{opacity:1}50%{opacity:.5}}.Skeleton_size-sm__53K8I{height:1rem}.Skeleton_size-md__DU3Ku{height:1.5rem}.Skeleton_size-lg__ZhvKQ{height:2.5rem}.Skeleton_shape-rectangle__krxPl{border-radius:.375rem}.Skeleton_shape-circle__85od-{border-radius:9999px}.Skeleton_shape-rounded__6E9lP{border-radius:.5rem}";
+var S = {"root":"Skeleton_root__Jjk-p","pulse":"Skeleton_pulse__8kRAv","size-sm":"Skeleton_size-sm__53K8I","size-md":"Skeleton_size-md__DU3Ku","size-lg":"Skeleton_size-lg__ZhvKQ","shape-rectangle":"Skeleton_shape-rectangle__krxPl","shape-circle":"Skeleton_shape-circle__85od-","shape-rounded":"Skeleton_shape-rounded__6E9lP"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/Slider/Slider.js

@@ -0,0 +1,123 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import S from './Slider.styl.js';
+
+function Slider({ className, value: controlledValue, defaultValue, onValueChange, onValueCommit, min = 0, max = 100, step = 1, disabled = false, }) {
+    const [internalValue, setInternalValue] = useState(controlledValue ?? defaultValue ?? [min]);
+    const [isDragging, setIsDragging] = useState(false);
+    const isControlled = controlledValue !== undefined;
+    const value = isControlled ? controlledValue : internalValue;
+    const sliderThumbContainerRef = useRef(null);
+    const thumbRef = useRef(null);
+    const rangeRef = useRef(null);
+    const cachedRectRef = useRef(null);
+    const updateThumbPosition = useCallback((percentage) => {
+        if (thumbRef.current) {
+            thumbRef.current.style.left = `${percentage}%`;
+        }
+        if (rangeRef.current && sliderThumbContainerRef.current) {
+            const containerWidth = sliderThumbContainerRef.current.offsetWidth;
+            const rangeWidth = (containerWidth * percentage) / 100 + 16;
+            rangeRef.current.style.width = `${rangeWidth}px`;
+        }
+    }, []);
+    const calculatePercentageFromPosition = useCallback((clientX, useCache = false) => {
+        if (!sliderThumbContainerRef.current)
+            return 0;
+        const rect = useCache && cachedRectRef.current
+            ? cachedRectRef.current
+            : sliderThumbContainerRef.current.getBoundingClientRect();
+        if (useCache && !cachedRectRef.current) {
+            cachedRectRef.current = rect;
+        }
+        return Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    }, []);
+    const calculateValueFromPosition = useCallback((clientX, useCache = false) => {
+        if (!sliderThumbContainerRef.current)
+            return value;
+        const percentage = calculatePercentageFromPosition(clientX, useCache);
+        const rawValue = min + percentage * (max - min);
+        const steppedValue = Math.round(rawValue / step) * step;
+        const clampedValue = Math.max(min, Math.min(max, steppedValue));
+        return [clampedValue];
+    }, [min, max, step, value, calculatePercentageFromPosition]);
+    const handlePointerDown = useCallback((e) => {
+        if (disabled)
+            return;
+        e.preventDefault();
+        setIsDragging(true);
+        // Cache rect when drag starts
+        if (sliderThumbContainerRef.current) {
+            cachedRectRef.current =
+                sliderThumbContainerRef.current.getBoundingClientRect();
+        }
+        const rawPercentage = calculatePercentageFromPosition(e.clientX, false);
+        const visualPercentage = rawPercentage * 100;
+        updateThumbPosition(visualPercentage);
+        const newValue = calculateValueFromPosition(e.clientX);
+        if (!isControlled) {
+            setInternalValue(newValue);
+        }
+        onValueChange?.(newValue);
+    }, [
+        disabled,
+        calculatePercentageFromPosition,
+        calculateValueFromPosition,
+        isControlled,
+        onValueChange,
+        updateThumbPosition,
+    ]);
+    const handlePointerMove = useCallback((e) => {
+        if (!isDragging || disabled)
+            return;
+        e.preventDefault();
+        // Use cached rect during drag for performance
+        const rawPercentage = calculatePercentageFromPosition(e.clientX, true);
+        const visualPercentage = rawPercentage * 100;
+        updateThumbPosition(visualPercentage);
+        const newValue = calculateValueFromPosition(e.clientX, true);
+        if (!isControlled) {
+            setInternalValue(newValue);
+        }
+        onValueChange?.(newValue);
+    }, [
+        disabled,
+        calculatePercentageFromPosition,
+        calculateValueFromPosition,
+        isControlled,
+        isDragging,
+        min,
+        max,
+        onValueChange,
+        updateThumbPosition,
+    ]);
+    const handlePointerUp = useCallback((e) => {
+        if (!isDragging)
+            return;
+        setIsDragging(false);
+        // Clear cached rect when drag ends
+        cachedRectRef.current = null;
+        const newValue = calculateValueFromPosition(e.clientX);
+        onValueCommit?.(newValue);
+    }, [calculateValueFromPosition, isDragging, onValueCommit]);
+    useEffect(() => {
+        if (isDragging) {
+            document.addEventListener('pointermove', handlePointerMove);
+            document.addEventListener('pointerup', handlePointerUp);
+            return () => {
+                document.removeEventListener('pointermove', handlePointerMove);
+                document.removeEventListener('pointerup', handlePointerUp);
+            };
+        }
+    }, [isDragging, handlePointerMove, handlePointerUp]);
+    const percentage = ((value[0] - min) / (max - min)) * 100;
+    useEffect(() => {
+        if (!isDragging) {
+            updateThumbPosition(percentage);
+        }
+    }, [percentage, isDragging, updateThumbPosition, value]);
+    return (jsx("div", { "data-slot": "slider", className: cn(S.sliderRoot, className), "data-disabled": disabled, "data-dragging": isDragging, children: jsxs("div", { className: S.sliderTrack, onPointerDown: handlePointerDown, children: [jsx("div", { ref: rangeRef, className: S.sliderRange }), jsx("div", { ref: sliderThumbContainerRef, className: S.sliderThumbContainer, children: jsx("div", { ref: thumbRef, className: S.sliderThumb, onPointerDown: handlePointerDown }) })] }) }));
+}
+
+export { Slider };

package/dist/esm/components/ui/Slider/Slider.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".Slider_sliderRoot__h9oha{align-items:center;display:flex;height:20px;overflow:visible;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.Slider_sliderTrack__ZJT87{background-color:var(--border);border-radius:20px;cursor:pointer;flex-grow:1;height:calc(100% - 4px);margin-left:-8px;margin-right:-8px;position:relative;touch-action:none;width:calc(100% + 16px)}.dark .Slider_sliderTrack__ZJT87{background-color:var(--input)}.Slider_sliderRange__W4bae{background-color:var(--primary);border-radius:20px;height:100%;position:absolute}.Slider_sliderThumbContainer__foas-{height:100%;left:8px;pointer-events:none;position:absolute;right:8px}.Slider_sliderThumb__cUXFL{background-color:var(--card);border:2px solid var(--primary);border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.1);cursor:grab;display:block;height:16px;outline:none;pointer-events:auto;position:absolute;top:50%;touch-action:none;transform:translate(-50%,-50%);transition:transform .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:16px}.Slider_sliderThumb__cUXFL:hover{box-shadow:0 4px 8px rgba(0,0,0,.15);transform:translate(-50%,-50%) scale(1.1)}.Slider_sliderThumb__cUXFL:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.Slider_sliderRoot__h9oha[data-dragging=true] .Slider_sliderThumb__cUXFL,.Slider_sliderThumb__cUXFL:active{cursor:grabbing;transform:translate(-50%,-50%) scale(1.15);transition:none}.Slider_sliderRoot__h9oha[data-disabled=true]{opacity:.5;pointer-events:none}";
+var S = {"sliderRoot":"Slider_sliderRoot__h9oha","sliderTrack":"Slider_sliderTrack__ZJT87","sliderRange":"Slider_sliderRange__W4bae","sliderThumbContainer":"Slider_sliderThumbContainer__foas-","sliderThumb":"Slider_sliderThumb__cUXFL"};
+styleInject(css_248z);
+
+export { S as default };