@ptengine/design-components 0.3.0

package/src/components/ui/sidebar.tsx

@@ -0,0 +1,704 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { PanelLeft } from 'lucide-react';
+
+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, TooltipProvider, TooltipTrigger } from './tooltip';
+
+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';
+
+type SidebarContextValue = {
+    state: 'expanded' | 'collapsed';
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext<SidebarContextValue | null>(null);
+
+function useSidebar() {
+    const context = React.useContext(SidebarContext);
+    if (!context) {
+        throw new Error('useSidebar must be used within a SidebarProvider.');
+    }
+
+    return context;
+}
+
+const SidebarProvider = React.forwardRef<
+    HTMLDivElement,
+    React.ComponentProps<'div'> & {
+        defaultOpen?: boolean;
+        open?: boolean;
+        onOpenChange?: (open: boolean) => void;
+    }
+>(
+    (
+        {
+            defaultOpen = true,
+            open: openProp,
+            onOpenChange: setOpenProp,
+            className,
+            style,
+            children,
+            ...props
+        },
+        ref
+    ) => {
+        const isMobile = useIsMobile();
+        const [openMobile, setOpenMobile] = React.useState(false);
+
+        const [_open, _setOpen] = React.useState(defaultOpen);
+        const open = openProp ?? _open;
+        const setOpen = React.useCallback(
+            (value: boolean | ((value: boolean) => boolean)) => {
+                const openState = typeof value === 'function' ? value(open) : value;
+                if (setOpenProp) {
+                    setOpenProp(openState);
+                } else {
+                    _setOpen(openState);
+                }
+
+                document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+            },
+            [setOpenProp, open]
+        );
+
+        const toggleSidebar = React.useCallback(() => {
+            return isMobile ? setOpenMobile(open => !open) : setOpen(open => !open);
+        }, [isMobile, setOpen, setOpenMobile]);
+
+        React.useEffect(() => {
+            const handleKeyDown = (event: KeyboardEvent) => {
+                if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+                    event.preventDefault();
+                    toggleSidebar();
+                }
+            };
+
+            window.addEventListener('keydown', handleKeyDown);
+            return () => window.removeEventListener('keydown', handleKeyDown);
+        }, [toggleSidebar]);
+
+        const state = open ? 'expanded' : 'collapsed';
+
+        const contextValue = React.useMemo<SidebarContextValue>(
+            () => ({
+                state,
+                open,
+                setOpen,
+                isMobile,
+                openMobile,
+                setOpenMobile,
+                toggleSidebar
+            }),
+            [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+        );
+
+        return (
+            <SidebarContext.Provider value={contextValue}>
+                <TooltipProvider delayDuration={0}>
+                    <div
+                        style={
+                            {
+                                '--pt-sidebar-width': SIDEBAR_WIDTH,
+                                '--pt-sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+                                ...style
+                            } as React.CSSProperties
+                        }
+                        className={cn(
+                            'group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar',
+                            className
+                        )}
+                        ref={ref}
+                        {...props}
+                    >
+                        {children}
+                    </div>
+                </TooltipProvider>
+            </SidebarContext.Provider>
+        );
+    }
+);
+SidebarProvider.displayName = 'SidebarProvider';
+
+const Sidebar = React.forwardRef<
+    HTMLDivElement,
+    React.ComponentProps<'div'> & {
+        side?: 'left' | 'right';
+        variant?: 'sidebar' | 'floating' | 'inset';
+        collapsible?: 'offcanvas' | 'icon' | 'none';
+    }
+>(
+    (
+        { side = 'left', variant = 'sidebar', collapsible = 'offcanvas', className, children, ...props },
+        ref
+    ) => {
+        const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+        if (collapsible === 'none') {
+            return (
+                <div
+                    className={cn(
+                        'flex h-full w-[--pt-sidebar-width] flex-col bg-sidebar text-sidebar-foreground',
+                        className
+                    )}
+                    ref={ref}
+                    {...props}
+                >
+                    {children}
+                </div>
+            );
+        }
+
+        if (isMobile) {
+            return (
+                <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+                    <SheetContent
+                        data-sidebar="sidebar"
+                        data-mobile="true"
+                        className="w-[--pt-sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+                        style={
+                            {
+                                '--pt-sidebar-width': SIDEBAR_WIDTH_MOBILE
+                            } as React.CSSProperties
+                        }
+                        side={side}
+                    >
+                        <SheetHeader className="sr-only">
+                            <SheetTitle>Sidebar</SheetTitle>
+                            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+                        </SheetHeader>
+                        <div className="flex h-full w-full flex-col">{children}</div>
+                    </SheetContent>
+                </Sheet>
+            );
+        }
+
+        return (
+            <div
+                ref={ref}
+                className="group peer hidden text-sidebar-foreground md:block"
+                data-state={state}
+                data-collapsible={state === 'collapsed' ? collapsible : ''}
+                data-variant={variant}
+                data-side={side}
+            >
+                <div
+                    className={cn(
+                        'relative w-[--pt-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(--pt-sidebar-width-icon)_+_theme(spacing.4))]'
+                            : 'group-data-[collapsible=icon]:w-[--pt-sidebar-width-icon]'
+                    )}
+                />
+                <div
+                    className={cn(
+                        'fixed inset-y-0 z-10 hidden h-svh w-[--pt-sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex',
+                        side === 'left'
+                            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--pt-sidebar-width)*-1)]'
+                            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--pt-sidebar-width)*-1)]',
+                        variant === 'floating' || variant === 'inset'
+                            ? 'p-[8px] group-data-[collapsible=icon]:w-[calc(var(--pt-sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
+                            : 'group-data-[collapsible=icon]:w-[--pt-sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',
+                        className
+                    )}
+                    {...props}
+                    data-sidebar="sidebar"
+                >
+                    <div className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-[var(--pt-radius)] group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border">
+                        {children}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+);
+Sidebar.displayName = 'Sidebar';
+
+/* label:开合钮读屏文案,库不做 i18n,消费方传译文(默认英文) */
+const SidebarTrigger = React.forwardRef<
+    React.ElementRef<typeof Button>,
+    React.ComponentProps<typeof Button> & { label?: string }
+>(({ className, onClick, label = 'Toggle sidebar', ...props }, ref) => {
+    const { toggleSidebar } = useSidebar();
+
+    return (
+        <Button
+            ref={ref}
+            data-sidebar="trigger"
+            variant="ghost"
+            size="icon"
+            className={cn('h-[28px] w-[28px]', className)}
+            onClick={event => {
+                onClick?.(event);
+                toggleSidebar();
+            }}
+            {...props}
+        >
+            <PanelLeft />
+            <span className="sr-only">{label}</span>
+        </Button>
+    );
+});
+SidebarTrigger.displayName = 'SidebarTrigger';
+
+const SidebarRail = React.forwardRef<
+    HTMLButtonElement,
+    React.ComponentProps<'button'> & { label?: string }
+>(({ className, label = 'Toggle sidebar', ...props }, ref) => {
+    const { toggleSidebar } = useSidebar();
+
+    return (
+        <button
+            ref={ref}
+            data-sidebar="rail"
+            aria-label={label}
+            tabIndex={-1}
+            onClick={toggleSidebar}
+            title={label}
+            className={cn(
+                'absolute inset-y-0 z-20 hidden w-[16px] -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-[16px] group-data-[side=right]:left-0 sm:flex',
+                '[[data-side=left]_&]:cursor-w-resize [[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 group-data-[collapsible=offcanvas]:hover:bg-sidebar',
+                '[[data-side=left][data-collapsible=offcanvas]_&]:-right-[8px]',
+                '[[data-side=right][data-collapsible=offcanvas]_&]:-left-[8px]',
+                className
+            )}
+            {...props}
+        />
+    );
+    }
+);
+SidebarRail.displayName = 'SidebarRail';
+
+const SidebarInset = React.forwardRef<HTMLDivElement, React.ComponentProps<'main'>>(
+    ({ className, ...props }, ref) => {
+        return (
+            <main
+                ref={ref}
+                className={cn(
+                    'relative flex w-full flex-1 flex-col bg-background',
+                    'md:peer-data-[variant=inset]:m-[8px] md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-[8px] md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-[12px]',
+                    className
+                )}
+                {...props}
+            />
+        );
+    }
+);
+SidebarInset.displayName = 'SidebarInset';
+
+const SidebarInput = React.forwardRef<
+    React.ElementRef<typeof Input>,
+    React.ComponentProps<typeof Input>
+>(({ className, ...props }, ref) => {
+    return (
+        <Input
+            ref={ref}
+            data-sidebar="input"
+            className={cn('h-[32px] w-full bg-background', className)}
+            {...props}
+        />
+    );
+});
+SidebarInput.displayName = 'SidebarInput';
+
+const SidebarHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
+    ({ className, ...props }, ref) => {
+        return (
+            <div
+                ref={ref}
+                data-sidebar="header"
+                className={cn('flex flex-col gap-[8px] p-[8px]', className)}
+                {...props}
+            />
+        );
+    }
+);
+SidebarHeader.displayName = 'SidebarHeader';
+
+const SidebarFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
+    ({ className, ...props }, ref) => {
+        return (
+            <div
+                ref={ref}
+                data-sidebar="footer"
+                className={cn('flex flex-col gap-[8px] p-[8px]', className)}
+                {...props}
+            />
+        );
+    }
+);
+SidebarFooter.displayName = 'SidebarFooter';
+
+const SidebarSeparator = React.forwardRef<
+    React.ElementRef<typeof Separator>,
+    React.ComponentProps<typeof Separator>
+>(({ className, ...props }, ref) => {
+    return (
+        <Separator
+            ref={ref}
+            data-sidebar="separator"
+            className={cn('mx-[8px] w-auto bg-sidebar-border', className)}
+            {...props}
+        />
+    );
+});
+SidebarSeparator.displayName = 'SidebarSeparator';
+
+const SidebarContent = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
+    ({ className, ...props }, ref) => {
+        return (
+            <div
+                ref={ref}
+                data-sidebar="content"
+                className={cn(
+                    'flex min-h-0 flex-1 flex-col gap-[8px] overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+                    className
+                )}
+                {...props}
+            />
+        );
+    }
+);
+SidebarContent.displayName = 'SidebarContent';
+
+const SidebarGroup = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
+    ({ className, ...props }, ref) => {
+        return (
+            <div
+                ref={ref}
+                data-sidebar="group"
+                className={cn('relative flex w-full min-w-0 flex-col p-[8px]', className)}
+                {...props}
+            />
+        );
+    }
+);
+SidebarGroup.displayName = 'SidebarGroup';
+
+const SidebarGroupLabel = React.forwardRef<
+    HTMLDivElement,
+    React.ComponentProps<'div'> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'div';
+
+    return (
+        <Comp
+            ref={ref}
+            data-sidebar="group-label"
+            className={cn(
+                'flex h-[32px] shrink-0 items-center rounded-[var(--pt-radius-md)] px-[8px] text-[13px] leading-[20px] font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-[16px] [&>svg]:shrink-0',
+                'group-data-[collapsible=icon]:-mt-[32px] group-data-[collapsible=icon]:opacity-0',
+                className
+            )}
+            {...props}
+        />
+    );
+});
+SidebarGroupLabel.displayName = 'SidebarGroupLabel';
+
+const SidebarGroupAction = React.forwardRef<
+    HTMLButtonElement,
+    React.ComponentProps<'button'> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+
+    return (
+        <Comp
+            ref={ref}
+            data-sidebar="group-action"
+            className={cn(
+                'absolute right-[12px] top-[14px] flex aspect-square w-[20px] items-center justify-center rounded-[var(--pt-radius-md)] p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-[16px] [&>svg]:shrink-0',
+                'after:absolute after:-inset-[8px] after:md:hidden',
+                'group-data-[collapsible=icon]:hidden',
+                className
+            )}
+            {...props}
+        />
+    );
+});
+SidebarGroupAction.displayName = 'SidebarGroupAction';
+
+const SidebarGroupContent = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
+    ({ className, ...props }, ref) => (
+        <div
+            ref={ref}
+            data-sidebar="group-content"
+            className={cn('w-full text-[14px] leading-[20px]', className)}
+            {...props}
+        />
+    )
+);
+SidebarGroupContent.displayName = 'SidebarGroupContent';
+
+const SidebarMenu = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(
+    ({ className, ...props }, ref) => (
+        <ul
+            ref={ref}
+            data-sidebar="menu"
+            className={cn('flex w-full min-w-0 flex-col gap-[4px]', className)}
+            {...props}
+        />
+    )
+);
+SidebarMenu.displayName = 'SidebarMenu';
+
+const SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(
+    ({ className, ...props }, ref) => (
+        <li
+            ref={ref}
+            data-sidebar="menu-item"
+            className={cn('group/menu-item relative', className)}
+            {...props}
+        />
+    )
+);
+SidebarMenuItem.displayName = 'SidebarMenuItem';
+
+const sidebarMenuButtonVariants = cva(
+    'peer/menu-button flex w-full items-center gap-[8px] overflow-hidden rounded-[var(--pt-radius-md)] p-[8px] text-left text-[14px] leading-[20px] text-sidebar-foreground outline-none ring-sidebar-ring transition-[width,height,padding] 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 group-has-[[data-sidebar=menu-action]]/menu-item:pr-[32px] aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-selected data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-[32px] group-data-[collapsible=icon]:!p-[8px] [&>span:last-child]:truncate [&>svg]:size-[16px] [&>svg]:shrink-0',
+    {
+        variants: {
+            variant: {
+                default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+                outline:
+                    'bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground'
+            },
+            size: {
+                default: 'h-[32px] text-[14px] leading-[20px]',
+                sm: 'h-[28px] text-[13px] leading-[20px]',
+                lg: 'h-[48px] text-[14px] leading-[20px] group-data-[collapsible=icon]:!p-0'
+            }
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'default'
+        }
+    }
+);
+
+const SidebarMenuButton = React.forwardRef<
+    HTMLButtonElement,
+    React.ComponentProps<'button'> & {
+        asChild?: boolean;
+        isActive?: boolean;
+        tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+    } & VariantProps<typeof sidebarMenuButtonVariants>
+>(({ asChild = false, isActive = false, variant = 'default', size = 'default', tooltip, className, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    const { isMobile, state } = useSidebar();
+
+    const button = (
+        <Comp
+            ref={ref}
+            data-sidebar="menu-button"
+            data-size={size}
+            data-active={isActive}
+            className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+            {...props}
+        />
+    );
+
+    if (!tooltip) {
+        return button;
+    }
+
+    if (typeof tooltip === 'string') {
+        tooltip = {
+            children: tooltip
+        };
+    }
+
+    return (
+        <Tooltip>
+            <TooltipTrigger asChild>{button}</TooltipTrigger>
+            <TooltipContent
+                side="right"
+                align="center"
+                hidden={state !== 'collapsed' || isMobile}
+                {...tooltip}
+            />
+        </Tooltip>
+    );
+});
+SidebarMenuButton.displayName = 'SidebarMenuButton';
+
+const SidebarMenuAction = React.forwardRef<
+    HTMLButtonElement,
+    React.ComponentProps<'button'> & {
+        asChild?: boolean;
+        showOnHover?: boolean;
+    }
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+
+    return (
+        <Comp
+            ref={ref}
+            data-sidebar="menu-action"
+            className={cn(
+                'absolute right-[4px] top-[6px] flex aspect-square w-[20px] items-center justify-center rounded-[var(--pt-radius-md)] p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-[16px] [&>svg]:shrink-0',
+                'after:absolute after:-inset-[8px] after:md:hidden',
+                'peer-data-[size=sm]/menu-button:top-[4px]',
+                'peer-data-[size=default]/menu-button:top-[6px]',
+                'peer-data-[size=lg]/menu-button:top-[10px]',
+                'group-data-[collapsible=icon]:hidden',
+                showOnHover &&
+                    'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',
+                className
+            )}
+            {...props}
+        />
+    );
+});
+SidebarMenuAction.displayName = 'SidebarMenuAction';
+
+const SidebarMenuBadge = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
+    ({ className, ...props }, ref) => (
+        <div
+            ref={ref}
+            data-sidebar="menu-badge"
+            className={cn(
+                'pointer-events-none absolute right-[4px] flex h-[20px] min-w-[20px] select-none items-center justify-center rounded-[var(--pt-radius-md)] px-[4px] text-[13px] leading-[20px] font-medium tabular-nums text-sidebar-foreground',
+                'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+                'peer-data-[size=sm]/menu-button:top-[4px]',
+                'peer-data-[size=default]/menu-button:top-[6px]',
+                'peer-data-[size=lg]/menu-button:top-[10px]',
+                'group-data-[collapsible=icon]:hidden',
+                className
+            )}
+            {...props}
+        />
+    )
+);
+SidebarMenuBadge.displayName = 'SidebarMenuBadge';
+
+const SidebarMenuSkeleton = React.forwardRef<
+    HTMLDivElement,
+    React.ComponentProps<'div'> & {
+        showIcon?: boolean;
+    }
+>(({ className, showIcon = false, ...props }, ref) => {
+    const width = React.useMemo(() => {
+        return `${Math.floor(Math.random() * 40) + 50}%`;
+    }, []);
+
+    return (
+        <div
+            ref={ref}
+            data-sidebar="menu-skeleton"
+            className={cn('flex h-[32px] items-center gap-[8px] rounded-[var(--pt-radius-md)] px-[8px]', className)}
+            {...props}
+        >
+            {showIcon && <Skeleton className="size-[16px] rounded-[var(--pt-radius-md)]" data-sidebar="menu-skeleton-icon" />}
+            <Skeleton
+                className="h-[16px] max-w-[--skeleton-width] flex-1"
+                data-sidebar="menu-skeleton-text"
+                style={
+                    {
+                        '--skeleton-width': width
+                    } as React.CSSProperties
+                }
+            />
+        </div>
+    );
+});
+SidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton';
+
+const SidebarMenuSub = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(
+    ({ className, ...props }, ref) => (
+        <ul
+            ref={ref}
+            data-sidebar="menu-sub"
+            className={cn(
+                'mx-[14px] flex min-w-0 translate-x-px flex-col gap-[4px] border-l border-sidebar-border px-[10px] py-[2px]',
+                'group-data-[collapsible=icon]:hidden',
+                className
+            )}
+            {...props}
+        />
+    )
+);
+SidebarMenuSub.displayName = 'SidebarMenuSub';
+
+const SidebarMenuSubItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(
+    ({ ...props }, ref) => <li ref={ref} {...props} />
+);
+SidebarMenuSubItem.displayName = 'SidebarMenuSubItem';
+
+const SidebarMenuSubButton = React.forwardRef<
+    HTMLAnchorElement,
+    React.ComponentProps<'a'> & {
+        asChild?: boolean;
+        size?: 'sm' | 'md';
+        isActive?: boolean;
+    }
+>(({ asChild = false, size = 'md', isActive, className, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'a';
+
+    return (
+        <Comp
+            ref={ref}
+            data-sidebar="menu-sub-button"
+            data-size={size}
+            data-active={isActive}
+            className={cn(
+                'flex h-[28px] min-w-0 -translate-x-px items-center gap-[8px] overflow-hidden rounded-[var(--pt-radius-md)] px-[8px] text-sidebar-foreground outline-none ring-sidebar-ring 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 [&>span:last-child]:truncate [&>svg]:size-[16px] [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
+                'data-[active=true]:bg-selected data-[active=true]:text-sidebar-accent-foreground',
+                size === 'sm' && 'text-[13px] leading-[20px]',
+                size === 'md' && 'text-[14px] leading-[20px]',
+                'group-data-[collapsible=icon]:hidden',
+                className
+            )}
+            {...props}
+        />
+    );
+});
+SidebarMenuSubButton.displayName = 'SidebarMenuSubButton';
+
+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
+};