{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ui-sidebar",
  "dependencies": [
    "@base-ui/react",
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "@launch/input",
    "@launch/sheet",
    "@launch/skeleton",
    "utils"
  ],
  "files": [
    {
      "path": "registry/new-york-v4/ui/sidebar.tsx",
      "content": "import * as React from \"react\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { useIsMobile } from \"@/hooks/use-mobile\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Separator } from \"@/components/ui/separator\";\nimport {\n    Sheet,\n    SheetContent,\n    SheetDescription,\n    SheetHeader,\n    SheetTitle,\n} from \"@/components/ui/sheet\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@/components/ui/tooltip\";\nimport { PanelLeftIcon } from \"lucide-react\";\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\";\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH = \"16rem\";\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\";\nconst SIDEBAR_WIDTH_ICON = \"3rem\";\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\";\n\ntype SidebarContextProps = {\n    state: \"expanded\" | \"collapsed\";\n    open: boolean;\n    setOpen: (open: boolean) => void;\n    openMobile: boolean;\n    setOpenMobile: (open: boolean) => void;\n    isMobile: boolean;\n    toggleSidebar: () => void;\n};\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null);\n\nfunction useSidebar() {\n    const context = React.useContext(SidebarContext);\n    if (!context) {\n        throw new Error(\"useSidebar must be used within a SidebarProvider.\");\n    }\n\n    return context;\n}\n\nfunction SidebarProvider({\n    defaultOpen = true,\n    open: openProp,\n    onOpenChange: setOpenProp,\n    className,\n    style,\n    children,\n    ...props\n}: React.ComponentProps<\"div\"> & {\n    defaultOpen?: boolean;\n    open?: boolean;\n    onOpenChange?: (open: boolean) => void;\n}) {\n    const isMobile = useIsMobile();\n    const [openMobile, setOpenMobile] = React.useState(false);\n\n    // This is the internal state of the sidebar.\n    // We use openProp and setOpenProp for control from outside the component.\n    const [_open, _setOpen] = React.useState(defaultOpen);\n    const open = openProp ?? _open;\n    const setOpen = React.useCallback(\n        (value: boolean | ((value: boolean) => boolean)) => {\n            const openState = typeof value === \"function\" ? value(open) : value;\n            if (setOpenProp) {\n                setOpenProp(openState);\n            } else {\n                _setOpen(openState);\n            }\n\n            // This sets the cookie to keep the sidebar state.\n            document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n        },\n        [setOpenProp, open],\n    );\n\n    // Helper to toggle the sidebar.\n    const toggleSidebar = React.useCallback(() => {\n        return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);\n    }, [isMobile, setOpen, setOpenMobile]);\n\n    // Adds a keyboard shortcut to toggle the sidebar.\n    React.useEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n                event.preventDefault();\n                toggleSidebar();\n            }\n        };\n\n        window.addEventListener(\"keydown\", handleKeyDown);\n        return () => window.removeEventListener(\"keydown\", handleKeyDown);\n    }, [toggleSidebar]);\n\n    // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n    // This makes it easier to style the sidebar with Tailwind classes.\n    const state = open ? \"expanded\" : \"collapsed\";\n\n    const contextValue = React.useMemo<SidebarContextProps>(\n        () => ({\n            state,\n            open,\n            setOpen,\n            isMobile,\n            openMobile,\n            setOpenMobile,\n            toggleSidebar,\n        }),\n        [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],\n    );\n\n    return (\n        <SidebarContext.Provider value={contextValue}>\n            <div\n                data-slot=\"sidebar-wrapper\"\n                style={\n                    {\n                        \"--sidebar-width\": SIDEBAR_WIDTH,\n                        \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n                        ...style,\n                    } as React.CSSProperties\n                }\n                className={cn(\n                    \"group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar\",\n                    className,\n                )}\n                {...props}\n            >\n                {children}\n            </div>\n        </SidebarContext.Provider>\n    );\n}\n\nfunction Sidebar({\n    side = \"left\",\n    variant = \"sidebar\",\n    collapsible = \"offcanvas\",\n    className,\n    children,\n    dir,\n    ...props\n}: React.ComponentProps<\"div\"> & {\n    side?: \"left\" | \"right\";\n    variant?: \"sidebar\" | \"floating\" | \"inset\";\n    collapsible?: \"offcanvas\" | \"icon\" | \"none\";\n}) {\n    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n    if (collapsible === \"none\") {\n        return (\n            <div\n                data-slot=\"sidebar\"\n                className={cn(\n                    \"flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground\",\n                    className,\n                )}\n                {...props}\n            >\n                {children}\n            </div>\n        );\n    }\n\n    if (isMobile) {\n        return (\n            <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n                <SheetContent\n                    dir={dir}\n                    data-sidebar=\"sidebar\"\n                    data-slot=\"sidebar\"\n                    data-mobile=\"true\"\n                    className=\"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n                    style={\n                        {\n                            \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n                        } as React.CSSProperties\n                    }\n                    side={side}\n                >\n                    <SheetHeader className=\"sr-only\">\n                        <SheetTitle>Sidebar</SheetTitle>\n                        <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n                    </SheetHeader>\n                    <div className=\"flex h-full w-full flex-col\">{children}</div>\n                </SheetContent>\n            </Sheet>\n        );\n    }\n\n    return (\n        <div\n            className=\"group peer hidden text-sidebar-foreground md:block\"\n            data-state={state}\n            data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n            data-variant={variant}\n            data-side={side}\n            data-slot=\"sidebar\"\n        >\n            {/* This is what handles the sidebar gap on desktop */}\n            <div\n                data-slot=\"sidebar-gap\"\n                className={cn(\n                    \"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\",\n                    \"group-data-[collapsible=offcanvas]:w-0\",\n                    \"group-data-[side=right]:rotate-180\",\n                    variant === \"floating\" || variant === \"inset\"\n                        ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n                        : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\",\n                )}\n            />\n            <div\n                data-slot=\"sidebar-container\"\n                data-side={side}\n                className={cn(\n                    \"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\",\n                    // Adjust the padding for floating and inset variants.\n                    variant === \"floating\" || variant === \"inset\"\n                        ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n                        : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n                    className,\n                )}\n                {...props}\n            >\n                <div\n                    data-sidebar=\"sidebar\"\n                    data-slot=\"sidebar-inner\"\n                    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\"\n                >\n                    {children}\n                </div>\n            </div>\n        </div>\n    );\n}\n\nfunction SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {\n    const { toggleSidebar } = useSidebar();\n\n    return (\n        <Button\n            data-sidebar=\"trigger\"\n            data-slot=\"sidebar-trigger\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            className={cn(className)}\n            onClick={(event) => {\n                onClick?.(event);\n                toggleSidebar();\n            }}\n            {...props}\n        >\n            <PanelLeftIcon />\n            <span className=\"sr-only\">Toggle Sidebar</span>\n        </Button>\n    );\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n    const { toggleSidebar } = useSidebar();\n\n    return (\n        <button\n            data-sidebar=\"rail\"\n            data-slot=\"sidebar-rail\"\n            aria-label=\"Toggle Sidebar\"\n            tabIndex={-1}\n            onClick={toggleSidebar}\n            title=\"Toggle Sidebar\"\n            className={cn(\n                \"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\",\n                \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n                \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n                \"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar\",\n                \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n                \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n    return (\n        <main\n            data-slot=\"sidebar-inset\"\n            className={cn(\n                \"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\",\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>) {\n    return (\n        <Input\n            data-slot=\"sidebar-input\"\n            data-sidebar=\"input\"\n            className={cn(\"h-8 w-full bg-background shadow-none\", className)}\n            {...props}\n        />\n    );\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n    return (\n        <div\n            data-slot=\"sidebar-header\"\n            data-sidebar=\"header\"\n            className={cn(\"flex flex-col gap-2 p-2\", className)}\n            {...props}\n        />\n    );\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n    return (\n        <div\n            data-slot=\"sidebar-footer\"\n            data-sidebar=\"footer\"\n            className={cn(\"flex flex-col gap-2 p-2\", className)}\n            {...props}\n        />\n    );\n}\n\nfunction SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {\n    return (\n        <Separator\n            data-slot=\"sidebar-separator\"\n            data-sidebar=\"separator\"\n            className={cn(\"mx-2 w-auto bg-sidebar-border\", className)}\n            {...props}\n        />\n    );\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n    return (\n        <div\n            data-slot=\"sidebar-content\"\n            data-sidebar=\"content\"\n            className={cn(\n                \"no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n    return (\n        <div\n            data-slot=\"sidebar-group\"\n            data-sidebar=\"group\"\n            className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)}\n            {...props}\n        />\n    );\n}\n\nfunction SidebarGroupLabel({\n    className,\n    render,\n    ...props\n}: useRender.ComponentProps<\"div\"> & React.ComponentProps<\"div\">) {\n    return useRender({\n        defaultTagName: \"div\",\n        props: mergeProps<\"div\">(\n            {\n                className: cn(\n                    \"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\",\n                    className,\n                ),\n            },\n            props,\n        ),\n        render,\n        state: {\n            slot: \"sidebar-group-label\",\n            sidebar: \"group-label\",\n        },\n    });\n}\n\nfunction SidebarGroupAction({\n    className,\n    render,\n    ...props\n}: useRender.ComponentProps<\"button\"> & React.ComponentProps<\"button\">) {\n    return useRender({\n        defaultTagName: \"button\",\n        props: mergeProps<\"button\">(\n            {\n                className: cn(\n                    \"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\",\n                    className,\n                ),\n            },\n            props,\n        ),\n        render,\n        state: {\n            slot: \"sidebar-group-action\",\n            sidebar: \"group-action\",\n        },\n    });\n}\n\nfunction SidebarGroupContent({ className, ...props }: React.ComponentProps<\"div\">) {\n    return (\n        <div\n            data-slot=\"sidebar-group-content\"\n            data-sidebar=\"group-content\"\n            className={cn(\"w-full text-sm\", className)}\n            {...props}\n        />\n    );\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n    return (\n        <ul\n            data-slot=\"sidebar-menu\"\n            data-sidebar=\"menu\"\n            className={cn(\"flex w-full min-w-0 flex-col gap-0\", className)}\n            {...props}\n        />\n    );\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n    return (\n        <li\n            data-slot=\"sidebar-menu-item\"\n            data-sidebar=\"menu-item\"\n            className={cn(\"group/menu-item relative\", className)}\n            {...props}\n        />\n    );\n}\n\nconst sidebarMenuButtonVariants = cva(\n    \"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\",\n    {\n        variants: {\n            variant: {\n                default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n                outline:\n                    \"bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]\",\n            },\n            size: {\n                default: \"h-8 text-sm\",\n                sm: \"h-7 text-xs\",\n                lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n            },\n        },\n        defaultVariants: {\n            variant: \"default\",\n            size: \"default\",\n        },\n    },\n);\n\nfunction SidebarMenuButton({\n    render,\n    isActive = false,\n    variant = \"default\",\n    size = \"default\",\n    tooltip,\n    className,\n    ...props\n}: useRender.ComponentProps<\"button\"> &\n    React.ComponentProps<\"button\"> & {\n        isActive?: boolean;\n        tooltip?: string | React.ComponentProps<typeof TooltipContent>;\n    } & VariantProps<typeof sidebarMenuButtonVariants>) {\n    const { isMobile, state } = useSidebar();\n    const comp = useRender({\n        defaultTagName: \"button\",\n        props: mergeProps<\"button\">(\n            {\n                className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n            },\n            props,\n        ),\n        render: !tooltip ? render : <TooltipTrigger render={render} />,\n        state: {\n            slot: \"sidebar-menu-button\",\n            sidebar: \"menu-button\",\n            size,\n            active: isActive,\n        },\n    });\n\n    if (!tooltip) {\n        return comp;\n    }\n\n    if (typeof tooltip === \"string\") {\n        tooltip = {\n            children: tooltip,\n        };\n    }\n\n    return (\n        <Tooltip>\n            {comp}\n            <TooltipContent\n                side=\"right\"\n                align=\"center\"\n                hidden={state !== \"collapsed\" || isMobile}\n                {...tooltip}\n            />\n        </Tooltip>\n    );\n}\n\nfunction SidebarMenuAction({\n    className,\n    render,\n    showOnHover = false,\n    ...props\n}: useRender.ComponentProps<\"button\"> &\n    React.ComponentProps<\"button\"> & {\n        showOnHover?: boolean;\n    }) {\n    return useRender({\n        defaultTagName: \"button\",\n        props: mergeProps<\"button\">(\n            {\n                className: cn(\n                    \"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\",\n                    showOnHover &&\n                        \"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\",\n                    className,\n                ),\n            },\n            props,\n        ),\n        render,\n        state: {\n            slot: \"sidebar-menu-action\",\n            sidebar: \"menu-action\",\n        },\n    });\n}\n\nfunction SidebarMenuBadge({ className, ...props }: React.ComponentProps<\"div\">) {\n    return (\n        <div\n            data-slot=\"sidebar-menu-badge\"\n            data-sidebar=\"menu-badge\"\n            className={cn(\n                \"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\",\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction SidebarMenuSkeleton({\n    className,\n    showIcon = false,\n    ...props\n}: React.ComponentProps<\"div\"> & {\n    showIcon?: boolean;\n}) {\n    // Random width between 50 to 90%.\n    const [width] = React.useState(() => {\n        return `${Math.floor(Math.random() * 40) + 50}%`;\n    });\n\n    return (\n        <div\n            data-slot=\"sidebar-menu-skeleton\"\n            data-sidebar=\"menu-skeleton\"\n            className={cn(\"flex h-8 items-center gap-2 rounded-md px-2\", className)}\n            {...props}\n        >\n            {showIcon && (\n                <Skeleton className=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />\n            )}\n            <Skeleton\n                className=\"h-4 max-w-(--skeleton-width) flex-1\"\n                data-sidebar=\"menu-skeleton-text\"\n                style={\n                    {\n                        \"--skeleton-width\": width,\n                    } as React.CSSProperties\n                }\n            />\n        </div>\n    );\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n    return (\n        <ul\n            data-slot=\"sidebar-menu-sub\"\n            data-sidebar=\"menu-sub\"\n            className={cn(\n                \"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\",\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction SidebarMenuSubItem({ className, ...props }: React.ComponentProps<\"li\">) {\n    return (\n        <li\n            data-slot=\"sidebar-menu-sub-item\"\n            data-sidebar=\"menu-sub-item\"\n            className={cn(\"group/menu-sub-item relative\", className)}\n            {...props}\n        />\n    );\n}\n\nfunction SidebarMenuSubButton({\n    render,\n    size = \"md\",\n    isActive = false,\n    className,\n    ...props\n}: useRender.ComponentProps<\"a\"> &\n    React.ComponentProps<\"a\"> & {\n        size?: \"sm\" | \"md\";\n        isActive?: boolean;\n    }) {\n    return useRender({\n        defaultTagName: \"a\",\n        props: mergeProps<\"a\">(\n            {\n                className: cn(\n                    \"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\",\n                    className,\n                ),\n            },\n            props,\n        ),\n        render,\n        state: {\n            slot: \"sidebar-menu-sub-button\",\n            sidebar: \"menu-sub-button\",\n            size,\n            active: isActive,\n        },\n    });\n}\n\nexport {\n    Sidebar,\n    SidebarContent,\n    SidebarFooter,\n    SidebarGroup,\n    SidebarGroupAction,\n    SidebarGroupContent,\n    SidebarGroupLabel,\n    SidebarHeader,\n    SidebarInput,\n    SidebarInset,\n    SidebarMenu,\n    SidebarMenuAction,\n    SidebarMenuBadge,\n    SidebarMenuButton,\n    SidebarMenuItem,\n    SidebarMenuSkeleton,\n    SidebarMenuSub,\n    SidebarMenuSubButton,\n    SidebarMenuSubItem,\n    SidebarProvider,\n    SidebarRail,\n    SidebarSeparator,\n    SidebarTrigger,\n    useSidebar,\n};\n",
      "type": "registry:file",
      "target": "resources/js/components/ui/sidebar.tsx"
    }
  ],
  "type": "registry:ui"
}