@wheelhouse/ui 0.2.3 → 0.2.5

package/dist/components/sidebar/sidebar.d.ts

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { type VariantProps } from 'class-variance-authority';
+import { Button } from '../button';
+import { Input } from '../input';
+import { Separator } from '../separator';
+import { TooltipContent } from '../tooltip';
+type SidebarContextProps = {
+    state: 'expanded' | 'collapsed';
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: () => void;
+};
+declare function useSidebar(): SidebarContextProps;
+declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<'div'> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Sidebar({ side, variant, collapsible, className, children, dir, ...props }: React.ComponentProps<'div'> & {
+    side?: 'left' | 'right';
+    variant?: 'sidebar' | 'floating' | 'inset';
+    collapsible?: 'offcanvas' | 'icon' | 'none';
+}): import("react/jsx-runtime").JSX.Element;
+declare function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
+declare function SidebarRail({ className, ...props }: React.ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
+declare function SidebarInset({ className, ...props }: React.ComponentProps<'main'>): import("react/jsx-runtime").JSX.Element;
+declare function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>): import("react/jsx-runtime").JSX.Element;
+declare function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
+declare function SidebarContent({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function SidebarGroupLabel({ className, render, ...props }: useRender.ComponentProps<'div'> & React.ComponentProps<'div'>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function SidebarGroupAction({ className, render, ...props }: useRender.ComponentProps<'button'> & React.ComponentProps<'button'>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>): import("react/jsx-runtime").JSX.Element;
+declare const sidebarMenuButtonVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function SidebarMenuButton({ render, isActive, variant, size, tooltip, className, ...props }: useRender.ComponentProps<'button'> & React.ComponentProps<'button'> & {
+    isActive?: boolean;
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+} & VariantProps<typeof sidebarMenuButtonVariants>): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenuAction({ className, render, showOnHover, ...props }: useRender.ComponentProps<'button'> & React.ComponentProps<'button'> & {
+    showOnHover?: boolean;
+}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenuSkeleton({ className, showIcon, ...props }: React.ComponentProps<'div'> & {
+    showIcon?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>): import("react/jsx-runtime").JSX.Element;
+declare function SidebarMenuSubButton({ render, size, isActive, className, ...props }: useRender.ComponentProps<'a'> & React.ComponentProps<'a'> & {
+    size?: 'sm' | 'md';
+    isActive?: boolean;
+}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, };
+//# sourceMappingURL=sidebar.d.ts.map

package/dist/components/sidebar/sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/sidebar.tsx"],"names":[],"mappings":"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"}

package/dist/components/sidebar/sidebar.js

@@ -0,0 +1,255 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { cva } from 'class-variance-authority';
+import { useIsMobile } from '../../hooks/use-mobile';
+import { cn } from '../../lib/utils';
+import { Button } from '../button';
+import { Input } from '../input';
+import { Separator } from '../separator';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '../sheet';
+import { Skeleton } from '../skeleton';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
+import { PanelLeftIcon } from 'lucide-react';
+const SIDEBAR_COOKIE_NAME = 'sidebar_state';
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = '16rem';
+const SIDEBAR_WIDTH_MOBILE = '18rem';
+const SIDEBAR_WIDTH_ICON = '3rem';
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+const SidebarContext = React.createContext(null);
+function useSidebar() {
+    const context = React.useContext(SidebarContext);
+    if (!context) {
+        throw new Error('useSidebar must be used within a SidebarProvider.');
+    }
+    return context;
+}
+function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }) {
+    const isMobile = useIsMobile();
+    const [openMobile, setOpenMobile] = React.useState(false);
+    // This is the internal state of the sidebar.
+    // We use openProp and setOpenProp for control from outside the component.
+    const [_open, _setOpen] = React.useState(defaultOpen);
+    const open = openProp ?? _open;
+    const setOpen = React.useCallback((value) => {
+        const openState = typeof value === 'function' ? value(open) : value;
+        if (setOpenProp) {
+            setOpenProp(openState);
+        }
+        else {
+            _setOpen(openState);
+        }
+        // This sets the cookie to keep the sidebar state.
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    }, [setOpenProp, open]);
+    // Helper to toggle the sidebar.
+    const toggleSidebar = React.useCallback(() => {
+        return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+    }, [isMobile, setOpen, setOpenMobile]);
+    // Adds a keyboard shortcut to toggle the sidebar.
+    React.useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+                event.preventDefault();
+                toggleSidebar();
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [toggleSidebar]);
+    // We add a state so that we can do data-state="expanded" or "collapsed".
+    // This makes it easier to style the sidebar with Tailwind classes.
+    const state = open ? 'expanded' : 'collapsed';
+    const contextValue = React.useMemo(() => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+    }), [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]);
+    return (_jsx(SidebarContext.Provider, { value: contextValue, children: _jsx("div", { "data-slot": "sidebar-wrapper", style: {
+                '--sidebar-width': SIDEBAR_WIDTH,
+                '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+                ...style,
+            }, className: cn('group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar', className), ...props, children: children }) }));
+}
+function Sidebar({ side = 'left', variant = 'sidebar', collapsible = 'offcanvas', className, children, dir, ...props }) {
+    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+    if (collapsible === 'none') {
+        return (_jsx("div", { "data-slot": "sidebar", className: cn('flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground', className), ...props, children: children }));
+    }
+    if (isMobile) {
+        return (_jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: _jsxs(SheetContent, { dir: dir, "data-sidebar": "sidebar", "data-slot": "sidebar", "data-mobile": "true", className: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden", style: {
+                    '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+                }, side: side, children: [_jsxs(SheetHeader, { className: "sr-only", children: [_jsx(SheetTitle, { children: "Sidebar" }), _jsx(SheetDescription, { children: "Displays the mobile sidebar." })] }), _jsx("div", { className: "flex h-full w-full flex-col", children: children })] }) }));
+    }
+    return (_jsxs("div", { className: "group peer hidden text-sidebar-foreground md:block", "data-state": state, "data-collapsible": state === 'collapsed' ? collapsible : '', "data-variant": variant, "data-side": side, "data-slot": "sidebar", children: [_jsx("div", { "data-slot": "sidebar-gap", className: cn('relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear', 'group-data-[collapsible=offcanvas]:w-0', 'group-data-[side=right]:rotate-180', variant === 'floating' || variant === 'inset'
+                    ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+                    : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)') }), _jsx("div", { "data-slot": "sidebar-container", "data-side": side, className: cn('fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex', 
+                // Adjust the padding for floating and inset variants.
+                variant === 'floating' || variant === 'inset'
+                    ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+                    : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l', className), ...props, children: _jsx("div", { "data-sidebar": "sidebar", "data-slot": "sidebar-inner", className: "flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border", children: children }) })] }));
+}
+function SidebarTrigger({ className, onClick, ...props }) {
+    const { toggleSidebar } = useSidebar();
+    return (_jsxs(Button, { "data-sidebar": "trigger", "data-slot": "sidebar-trigger", variant: "ghost", size: "icon-sm", className: cn(className), onClick: (event) => {
+            onClick?.(event);
+            toggleSidebar();
+        }, ...props, children: [_jsx(PanelLeftIcon, {}), _jsx("span", { className: "sr-only", children: "Toggle Sidebar" })] }));
+}
+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('absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2', 'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize', '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize', 'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar', '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2', '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2', className), ...props }));
+}
+function SidebarInset({ className, ...props }) {
+    return (_jsx("main", { "data-slot": "sidebar-inset", className: cn('relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2', className), ...props }));
+}
+function SidebarInput({ className, ...props }) {
+    return _jsx(Input, { "data-slot": "sidebar-input", "data-sidebar": "input", className: cn('h-8 w-full bg-background shadow-none', className), ...props });
+}
+function SidebarHeader({ className, ...props }) {
+    return _jsx("div", { "data-slot": "sidebar-header", "data-sidebar": "header", className: cn('flex flex-col gap-2 p-2', className), ...props });
+}
+function SidebarFooter({ className, ...props }) {
+    return _jsx("div", { "data-slot": "sidebar-footer", "data-sidebar": "footer", className: cn('flex flex-col gap-2 p-2', className), ...props });
+}
+function SidebarSeparator({ className, ...props }) {
+    return _jsx(Separator, { "data-slot": "sidebar-separator", "data-sidebar": "separator", className: cn('mx-2 w-auto bg-sidebar-border', className), ...props });
+}
+function SidebarContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sidebar-content", "data-sidebar": "content", className: cn('no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden', className), ...props }));
+}
+function SidebarGroup({ className, ...props }) {
+    return _jsx("div", { "data-slot": "sidebar-group", "data-sidebar": "group", className: cn('relative flex w-full min-w-0 flex-col p-2', className), ...props });
+}
+function SidebarGroupLabel({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        props: mergeProps({
+            className: cn('flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', className),
+        }, props),
+        render,
+        state: {
+            slot: 'sidebar-group-label',
+            sidebar: 'group-label',
+        },
+    });
+}
+function SidebarGroupAction({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'button',
+        props: mergeProps({
+            className: cn('absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0', className),
+        }, props),
+        render,
+        state: {
+            slot: 'sidebar-group-action',
+            sidebar: 'group-action',
+        },
+    });
+}
+function SidebarGroupContent({ className, ...props }) {
+    return _jsx("div", { "data-slot": "sidebar-group-content", "data-sidebar": "group-content", className: cn('w-full text-sm', className), ...props });
+}
+function SidebarMenu({ className, ...props }) {
+    return _jsx("ul", { "data-slot": "sidebar-menu", "data-sidebar": "menu", className: cn('flex w-full min-w-0 flex-col gap-0', className), ...props });
+}
+function SidebarMenuItem({ className, ...props }) {
+    return _jsx("li", { "data-slot": "sidebar-menu-item", "data-sidebar": "menu-item", className: cn('group/menu-item relative', className), ...props });
+}
+const sidebarMenuButtonVariants = cva('peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate', {
+    variants: {
+        variant: {
+            default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+            outline: 'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+        },
+        size: {
+            default: 'h-8 text-sm',
+            sm: 'h-7 text-xs',
+            lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+function SidebarMenuButton({ render, isActive = false, variant = 'default', size = 'default', tooltip, className, ...props }) {
+    const { isMobile, state } = useSidebar();
+    const comp = useRender({
+        defaultTagName: 'button',
+        props: mergeProps({
+            className: cn(sidebarMenuButtonVariants({ variant, size }), className),
+        }, props),
+        render: !tooltip ? render : _jsx(TooltipTrigger, { render: render }),
+        state: {
+            slot: 'sidebar-menu-button',
+            sidebar: 'menu-button',
+            size,
+            active: isActive,
+        },
+    });
+    if (!tooltip) {
+        return comp;
+    }
+    if (typeof tooltip === 'string') {
+        tooltip = {
+            children: tooltip,
+        };
+    }
+    return (_jsxs(Tooltip, { children: [comp, _jsx(TooltipContent, { side: "right", align: "center", hidden: state !== 'collapsed' || isMobile, ...tooltip })] }));
+}
+function SidebarMenuAction({ className, render, showOnHover = false, ...props }) {
+    return useRender({
+        defaultTagName: 'button',
+        props: mergeProps({
+            className: cn('absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0', showOnHover &&
+                'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0', className),
+        }, props),
+        render,
+        state: {
+            slot: 'sidebar-menu-action',
+            sidebar: 'menu-action',
+        },
+    });
+}
+function SidebarMenuBadge({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sidebar-menu-badge", "data-sidebar": "menu-badge", className: cn('pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground', className), ...props }));
+}
+function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
+    // Random width between 50 to 90%.
+    const [width] = React.useState(() => {
+        return `${Math.floor(Math.random() * 40) + 50}%`;
+    });
+    return (_jsxs("div", { "data-slot": "sidebar-menu-skeleton", "data-sidebar": "menu-skeleton", className: cn('flex h-8 items-center gap-2 rounded-md px-2', className), ...props, children: [showIcon && _jsx(Skeleton, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" }), _jsx(Skeleton, { className: "h-4 max-w-(--skeleton-width) flex-1", "data-sidebar": "menu-skeleton-text", style: {
+                    '--skeleton-width': width,
+                } })] }));
+}
+function SidebarMenuSub({ className, ...props }) {
+    return (_jsx("ul", { "data-slot": "sidebar-menu-sub", "data-sidebar": "menu-sub", className: cn('mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden', className), ...props }));
+}
+function SidebarMenuSubItem({ className, ...props }) {
+    return _jsx("li", { "data-slot": "sidebar-menu-sub-item", "data-sidebar": "menu-sub-item", className: cn('group/menu-sub-item relative', className), ...props });
+}
+function SidebarMenuSubButton({ render, size = 'md', isActive = false, className, ...props }) {
+    return useRender({
+        defaultTagName: 'a',
+        props: mergeProps({
+            className: cn('flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground', className),
+        }, props),
+        render,
+        state: {
+            slot: 'sidebar-menu-sub-button',
+            sidebar: 'menu-sub-button',
+            size,
+            active: isActive,
+        },
+    });
+}
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, };

package/dist/components/sidebar/sidebar.stories.d.ts

@@ -0,0 +1,20 @@
+import type { StoryObj } from '@storybook/react';
+import { SidebarProvider } from './sidebar';
+declare const meta: {
+    title: string;
+    component: typeof SidebarProvider;
+    tags: string[];
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    decorators: ((Story: React.ComponentType) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=sidebar.stories.d.ts.map

package/dist/components/sidebar/sidebar.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/sidebar.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AA6BvD,OAAO,EAeH,eAAe,EAIlB,MAAM,WAAW,CAAC;AA+YnB,QAAA,MAAM,IAAI;;;;;;;;;;;;yBAxIY,KAAK,CAAC,aAAa;CAsJD,CAAC;AAEzC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAqBnC,eAAO,MAAM,OAAO,EAAE,KAmCrB,CAAC"}

package/dist/components/sidebar/sidebar.stories.js

@@ -0,0 +1,181 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { AudioWaveform, BadgeCheck, Bell, BookOpen, Bot, Calendar, ChevronRight, ChevronsUpDown, Command, CreditCard, Folder, Forward, Frame, LogOut, Map, MoreHorizontal, PieChart, Plus, Settings2, Sparkles, SquareTerminal, Trash2, } from 'lucide-react';
+import { Separator } from '../separator';
+import { TooltipProvider } from '../tooltip';
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarTrigger, useSidebar, } from './sidebar';
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '../breadcrumb';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../collapsible';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, } from '../dropdown-menu';
+import { Avatar, AvatarFallback, AvatarImage } from '../avatar';
+function NavMain({ items, }) {
+    return (_jsxs(SidebarGroup, { children: [_jsx(SidebarGroupLabel, { children: "Platform" }), _jsx(SidebarMenu, { children: items.map((item) => (_jsxs(Collapsible, { defaultOpen: item.isActive, className: "group/collapsible", render: _jsx(SidebarMenuItem, {}), children: [_jsx(CollapsibleTrigger, { render: _jsxs(SidebarMenuButton, { tooltip: item.title, children: [item.icon && _jsx(item.icon, {}), _jsx("span", { children: item.title }), _jsx(ChevronRight, { className: "ml-auto transition-transform duration-200 group-data-open/collapsible:rotate-90" })] }) }), _jsx(CollapsibleContent, { children: _jsx(SidebarMenuSub, { children: item.items?.map((subItem) => (_jsx(SidebarMenuSubItem, { children: _jsx(SidebarMenuSubButton, { render: _jsx("a", { href: subItem.url, "aria-label": subItem.title }), children: _jsx("span", { children: subItem.title }) }) }, subItem.title))) }) })] }, item.title))) })] }));
+}
+function TeamSwitcher({ teams, }) {
+    const { isMobile } = useSidebar();
+    const [activeTeam, setActiveTeam] = useState(teams[0]);
+    if (!activeTeam) {
+        return null;
+    }
+    return (_jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsxs(SidebarMenuButton, { size: "lg", className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground", children: [_jsx("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground", children: _jsx(activeTeam.logo, { className: "size-4" }) }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-medium", children: activeTeam.name }), _jsx("span", { className: "truncate text-xs", children: activeTeam.plan })] }), _jsx(ChevronsUpDown, { className: "ml-auto" })] }) }), _jsxs(DropdownMenuContent, { className: "w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg", align: "start", side: isMobile ? 'bottom' : 'right', sideOffset: 4, children: [_jsx(DropdownMenuLabel, { className: "text-xs text-muted-foreground", children: "Teams" }), teams.map((team, index) => (_jsxs(DropdownMenuItem, { onClick: () => setActiveTeam(team), className: "gap-2 p-2", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-md border", children: _jsx(team.logo, { className: "size-3.5 shrink-0" }) }), team.name, _jsxs(DropdownMenuShortcut, { children: ["\u2318", index + 1] })] }, team.name))), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "gap-2 p-2", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-transparent", children: _jsx(Plus, { className: "size-4" }) }), _jsx("div", { className: "font-medium text-muted-foreground", children: "Add team" })] })] })] }) }) }));
+}
+function NavUser({ user, }) {
+    const { isMobile } = useSidebar();
+    return (_jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsxs(SidebarMenuButton, { size: "lg", className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground", children: [_jsxs(Avatar, { className: "h-8 w-8 rounded-lg", children: [_jsx(AvatarImage, { src: user.avatar, alt: user.name }), _jsx(AvatarFallback, { className: "rounded-lg", children: "CN" })] }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-medium", children: user.name }), _jsx("span", { className: "truncate text-xs", children: user.email })] }), _jsx(ChevronsUpDown, { className: "ml-auto size-4" })] }) }), _jsxs(DropdownMenuContent, { className: "w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg", side: isMobile ? 'bottom' : 'right', align: "end", sideOffset: 4, children: [_jsx(DropdownMenuLabel, { className: "p-0 font-normal", children: _jsxs("div", { className: "flex items-center gap-2 px-1 py-1.5 text-left text-sm", children: [_jsxs(Avatar, { className: "h-8 w-8 rounded-lg", children: [_jsx(AvatarImage, { src: user.avatar, alt: user.name }), _jsx(AvatarFallback, { className: "rounded-lg", children: "CN" })] }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-medium", children: user.name }), _jsx("span", { className: "truncate text-xs", children: user.email })] })] }) }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuGroup, { children: _jsxs(DropdownMenuItem, { children: [_jsx(Sparkles, {}), "Upgrade to Pro"] }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [_jsxs(DropdownMenuItem, { children: [_jsx(BadgeCheck, {}), "Account"] }), _jsxs(DropdownMenuItem, { children: [_jsx(CreditCard, {}), "Billing"] }), _jsxs(DropdownMenuItem, { children: [_jsx(Bell, {}), "Notifications"] })] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { children: [_jsx(LogOut, {}), "Log out"] })] })] }) }) }));
+}
+function NavProjects({ projects, }) {
+    const { isMobile } = useSidebar();
+    return (_jsxs(SidebarGroup, { className: "group-data-[collapsible=icon]:hidden", children: [_jsx(SidebarGroupLabel, { children: "Projects" }), _jsxs(SidebarMenu, { children: [projects.map((item) => (_jsxs(SidebarMenuItem, { children: [_jsxs(SidebarMenuButton, { render: _jsx("a", { href: item.url, "aria-label": item.name }), children: [_jsx(item.icon, {}), _jsx("span", { children: item.name })] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsxs(SidebarMenuAction, { showOnHover: true, children: [_jsx(MoreHorizontal, {}), _jsx("span", { className: "sr-only", children: "More" })] }) }), _jsxs(DropdownMenuContent, { className: "w-48 rounded-lg", side: isMobile ? 'bottom' : 'right', align: isMobile ? 'end' : 'start', children: [_jsxs(DropdownMenuItem, { children: [_jsx(Folder, { className: "text-muted-foreground" }), _jsx("span", { children: "View Project" })] }), _jsxs(DropdownMenuItem, { children: [_jsx(Forward, { className: "text-muted-foreground" }), _jsx("span", { children: "Share Project" })] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { children: [_jsx(Trash2, { className: "text-muted-foreground" }), _jsx("span", { children: "Delete Project" })] })] })] })] }, item.name))), _jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { className: "text-sidebar-foreground/70", children: [_jsx(MoreHorizontal, { className: "text-sidebar-foreground/70" }), _jsx("span", { children: "More" })] }) })] })] }));
+}
+const shell = (Story) => (_jsx("div", { className: "h-[min(720px,85vh)] w-full min-w-0 overflow-hidden rounded-lg border bg-background text-foreground", children: _jsx(Story, {}) }));
+// This is sample data.
+const data = {
+    user: {
+        name: 'shadcn',
+        email: 'm@example.com',
+        avatar: '/avatars/shadcn.jpg',
+    },
+    teams: [
+        {
+            name: 'Acme Inc',
+            logo: Calendar,
+            plan: 'Enterprise',
+        },
+        {
+            name: 'Acme Corp.',
+            logo: AudioWaveform,
+            plan: 'Startup',
+        },
+        {
+            name: 'Evil Corp.',
+            logo: Command,
+            plan: 'Free',
+        },
+    ],
+    navMain: [
+        {
+            title: 'Playground',
+            url: '#',
+            icon: SquareTerminal,
+            isActive: true,
+            items: [
+                {
+                    title: 'History',
+                    url: '#',
+                },
+                {
+                    title: 'Starred',
+                    url: '#',
+                },
+                {
+                    title: 'Settings',
+                    url: '#',
+                },
+            ],
+        },
+        {
+            title: 'Models',
+            url: '#',
+            icon: Bot,
+            items: [
+                {
+                    title: 'Genesis',
+                    url: '#',
+                },
+                {
+                    title: 'Explorer',
+                    url: '#',
+                },
+                {
+                    title: 'Quantum',
+                    url: '#',
+                },
+            ],
+        },
+        {
+            title: 'Documentation',
+            url: '#',
+            icon: BookOpen,
+            items: [
+                {
+                    title: 'Introduction',
+                    url: '#',
+                },
+                {
+                    title: 'Get Started',
+                    url: '#',
+                },
+                {
+                    title: 'Tutorials',
+                    url: '#',
+                },
+                {
+                    title: 'Changelog',
+                    url: '#',
+                },
+            ],
+        },
+        {
+            title: 'Settings',
+            url: '#',
+            icon: Settings2,
+            items: [
+                {
+                    title: 'General',
+                    url: '#',
+                },
+                {
+                    title: 'Team',
+                    url: '#',
+                },
+                {
+                    title: 'Billing',
+                    url: '#',
+                },
+                {
+                    title: 'Limits',
+                    url: '#',
+                },
+            ],
+        },
+    ],
+    projects: [
+        {
+            name: 'Design Engineering',
+            url: '#',
+            icon: Frame,
+        },
+        {
+            name: 'Sales & Marketing',
+            url: '#',
+            icon: PieChart,
+        },
+        {
+            name: 'Travel',
+            url: '#',
+            icon: Map,
+        },
+    ],
+};
+const meta = {
+    title: 'Components/Sidebar',
+    component: SidebarProvider,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            description: {
+                component: 'Composable app shell sidebar (provider, rail, grouped menus, mobile sheet). Matches the layout pattern in the [shadcn/ui Sidebar docs](https://ui.shadcn.com/docs/components/radix/sidebar).',
+            },
+        },
+    },
+    decorators: [shell],
+};
+export default meta;
+/** Same structure as the [shadcn Sidebar usage](https://ui.shadcn.com/docs/components/radix/sidebar): `SidebarProvider` → app sidebar → `SidebarInset` with `SidebarTrigger` and main content. Uses `collapsible="icon"` like the docs demo. */
+function AppSidebar({ ...props }) {
+    return (_jsxs(Sidebar, { collapsible: "icon", ...props, children: [_jsx(SidebarHeader, { children: _jsx(TeamSwitcher, { teams: data.teams }) }), _jsxs(SidebarContent, { children: [_jsx(NavMain, { items: data.navMain }), _jsx(NavProjects, { projects: data.projects })] }), _jsx(SidebarFooter, { children: _jsx(NavUser, { user: data.user }) }), _jsx(SidebarRail, {})] }));
+}
+export const Default = {
+    render: () => (_jsx(TooltipProvider, { delay: 0, children: _jsxs(SidebarProvider, { children: [_jsx(AppSidebar, {}), _jsxs(SidebarInset, { children: [_jsx("header", { className: "flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: _jsxs("div", { className: "flex items-center gap-2 px-4", children: [_jsx(SidebarTrigger, { className: "-ml-1" }), _jsx(Separator, { orientation: "vertical", className: "mr-2 self-center! data-[orientation=vertical]:h-4" }), _jsx(Breadcrumb, { children: _jsxs(BreadcrumbList, { children: [_jsx(BreadcrumbItem, { className: "hidden md:block", children: _jsx(BreadcrumbLink, { href: "#", children: "Build Your Application" }) }), _jsx(BreadcrumbSeparator, { className: "hidden md:block" }), _jsx(BreadcrumbItem, { children: _jsx(BreadcrumbPage, { children: "Data Fetching" }) })] }) })] }) }), _jsxs("div", { className: "flex flex-1 flex-col gap-4 p-4 pt-0", children: [_jsxs("div", { className: "grid auto-rows-min gap-4 md:grid-cols-3", children: [_jsx("div", { className: "aspect-video rounded-xl bg-muted/50" }), _jsx("div", { className: "aspect-video rounded-xl bg-muted/50" }), _jsx("div", { className: "aspect-video rounded-xl bg-muted/50" })] }), _jsx("div", { className: "min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" })] })] })] }) })),
+};

package/dist/components/skeleton/index.d.ts

@@ -0,0 +1,3 @@
+export { Skeleton } from './skeleton';
+export type { SkeletonProps } from './skeleton';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/skeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/skeleton/index.js

@@ -0,0 +1 @@
+export { Skeleton } from './skeleton';

package/dist/components/skeleton/skeleton.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+/** Props for `Skeleton` — a pulsing placeholder block. */
+export type SkeletonProps = React.ComponentProps<'div'>;
+/** Animated placeholder for loading rows, cards, and media. */
+declare function Skeleton({ className, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export { Skeleton };
+//# sourceMappingURL=skeleton.d.ts.map

package/dist/components/skeleton/skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,0DAA0D;AAC1D,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAExD,+DAA+D;AAC/D,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAEvD;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/skeleton/skeleton.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+/** Animated placeholder for loading rows, cards, and media. */
+function Skeleton({ className, ...props }) {
+    return _jsx("div", { "data-slot": "skeleton", className: cn('animate-pulse rounded-md bg-muted', className), ...props });
+}
+export { Skeleton };

package/dist/components/sortable/sortable.d.ts

@@ -10,7 +10,7 @@
 import * as React from 'react';
 import { type ReactNode } from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import { type DragEndEvent, DragOverlay, type DragStartEvent, type Modifiers, type UniqueIdentifier } from '@dnd-kit/core';
+import { type CollisionDetection, type DragEndEvent, DragOverlay, type DragStartEvent, type Modifiers, type UniqueIdentifier } from '@dnd-kit/core';
 /**
  * Props for {@link Sortable}. `T` is your row model; stable string ids come from {@link SortableRootProps.getItemValue}.
  *
@@ -45,13 +45,15 @@ export interface SortableRootProps<T> extends Omit<useRender.ComponentProps<'div
     onDragEnd?: (event: DragEndEvent) => void;
     /** Optional dnd-kit modifiers (e.g. `restrictToParentElement`) for both context and overlay. */
     modifiers?: Modifiers;
+    /** Override pointer collision detection for `DndContext` (e.g. restrict valid drop targets). */
+    collisionDetection?: CollisionDetection;
 }
 /**
  * Root for a sortable region. Wires `DndContext`, `SortableContext`, sensors, and a `DragOverlay` portal on the client.
  *
  * Renders the default element as a `div` with `data-slot="sortable"` (see Base UI `useRender` / `render` prop).
  */
-declare function Sortable<T>({ value, onValueChange, getItemValue, className, render, onMove, strategy, onDragStart, onDragEnd, modifiers, children, ...props }: SortableRootProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function Sortable<T>({ value, onValueChange, getItemValue, className, render, onMove, strategy, onDragStart, onDragEnd, modifiers, collisionDetection, children, ...props }: SortableRootProps<T>): import("react/jsx-runtime").JSX.Element;
 /**
  * Props for {@link SortableItem}. `value` is the sortable id (string) registered with dnd-kit.
  */

package/dist/components/sortable/sortable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sortable.d.ts","sourceRoot":"","sources":["../../../src/components/sortable/sortable.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"sortable.d.ts","sourceRoot":"","sources":["../../../src/components/sortable/sortable.tsx"],"names":[],"mappings":"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"}