{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar",
  "title": "Sidebar",
  "description": "Terminal-style responsive sidebar with desktop collapse modes and mobile fallback through Sheet. Includes provider, trigger, rail, groups and menu composition.",
  "dependencies": [
    "class-variance-authority",
    "@radix-ui/react-slot"
  ],
  "registryDependencies": [
    "utils",
    "button",
    "input",
    "sheet",
    "theme-catppuccin-mocha",
    "font-jetbrains-mono"
  ],
  "files": [
    {
      "path": "registry/ui/sidebar.tsx",
      "content": "import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Sheet, SheetContent, SheetTitle } from \"@/components/ui/sheet\";\nimport { cn } from \"@/lib/utils\";\n\nconst SIDEBAR_WIDTH = \"18rem\";\nconst SIDEBAR_WIDTH_ICON = \"3.5rem\";\nconst MOBILE_BREAKPOINT = 768;\n\ntype SidebarContextValue = {\n\tstate: \"expanded\" | \"collapsed\";\n\topen: boolean;\n\tsetOpen: (open: boolean) => void;\n\topenMobile: boolean;\n\tsetOpenMobile: (open: boolean) => void;\n\tisMobile: boolean;\n\ttoggleSidebar: () => void;\n};\n\nconst SidebarContext = React.createContext<SidebarContextValue | null>(null);\n\nfunction useSidebar() {\n\tconst context = React.useContext(SidebarContext);\n\tif (!context) {\n\t\tthrow new Error(\"useSidebar must be used within a SidebarProvider.\");\n\t}\n\n\treturn context;\n}\n\nfunction useIsMobile() {\n\tconst [isMobile, setIsMobile] = React.useState(false);\n\n\tReact.useEffect(() => {\n\t\tconst mediaQuery = window.matchMedia(\n\t\t\t`(max-width: ${MOBILE_BREAKPOINT - 1}px)`,\n\t\t);\n\n\t\tconst update = () => setIsMobile(mediaQuery.matches);\n\t\tupdate();\n\n\t\tmediaQuery.addEventListener(\"change\", update);\n\t\treturn () => mediaQuery.removeEventListener(\"change\", update);\n\t}, []);\n\n\treturn isMobile;\n}\n\nfunction SidebarProvider({\n\tdefaultOpen = true,\n\topen: openProp,\n\tonOpenChange,\n\tclassName,\n\tstyle,\n\tchildren,\n\t...props\n}: React.ComponentProps<\"div\"> & {\n\tdefaultOpen?: boolean;\n\topen?: boolean;\n\tonOpenChange?: (open: boolean) => void;\n}) {\n\tconst isMobile = useIsMobile();\n\tconst [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);\n\tconst [openMobile, setOpenMobile] = React.useState(false);\n\tconst open = openProp ?? uncontrolledOpen;\n\n\tconst setOpen = React.useCallback(\n\t\t(nextOpen: boolean) => {\n\t\t\tonOpenChange?.(nextOpen);\n\t\t\tif (openProp === undefined) {\n\t\t\t\tsetUncontrolledOpen(nextOpen);\n\t\t\t}\n\t\t},\n\t\t[onOpenChange, openProp],\n\t);\n\n\tconst toggleSidebar = React.useCallback(() => {\n\t\tif (isMobile) {\n\t\t\tsetOpenMobile((current) => !current);\n\t\t\treturn;\n\t\t}\n\n\t\tsetOpen(!open);\n\t}, [isMobile, open, setOpen]);\n\n\treturn (\n\t\t<SidebarContext.Provider\n\t\t\tvalue={{\n\t\t\t\tstate: open ? \"expanded\" : \"collapsed\",\n\t\t\t\topen,\n\t\t\t\tsetOpen,\n\t\t\t\topenMobile,\n\t\t\t\tsetOpenMobile,\n\t\t\t\tisMobile,\n\t\t\t\ttoggleSidebar,\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tdata-slot=\"sidebar-wrapper\"\n\t\t\t\tclassName={cn(\"flex min-h-svh w-full font-mono\", className)}\n\t\t\t\tstyle={\n\t\t\t\t\t{\n\t\t\t\t\t\t\"--sidebar-width\": SIDEBAR_WIDTH,\n\t\t\t\t\t\t\"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n\t\t\t\t\t\t...style,\n\t\t\t\t\t} as React.CSSProperties\n\t\t\t\t}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</SidebarContext.Provider>\n\t);\n}\n\nfunction Sidebar({\n\tside = \"left\",\n\tcollapsible = \"icon\",\n\tclassName,\n\tchildren,\n\t...props\n}: React.ComponentProps<\"div\"> & {\n\tside?: \"left\" | \"right\";\n\tcollapsible?: \"offcanvas\" | \"icon\" | \"none\";\n}) {\n\tconst { isMobile, openMobile, setOpenMobile, state } = useSidebar();\n\n\tif (collapsible === \"none\") {\n\t\treturn (\n\t\t\t<aside\n\t\t\t\tdata-slot=\"sidebar\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"hidden h-svh w-[var(--sidebar-width)] shrink-0 border-r border-border bg-card text-foreground md:flex md:flex-col\",\n\t\t\t\t\tside === \"right\" && \"border-r-0 border-l\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</aside>\n\t\t);\n\t}\n\n\tif (isMobile) {\n\t\treturn (\n\t\t\t<Sheet open={openMobile} onOpenChange={setOpenMobile}>\n\t\t\t\t<SheetContent\n\t\t\t\t\tdata-slot=\"sidebar\"\n\t\t\t\t\tside={side}\n\t\t\t\t\tclassName=\"w-[var(--sidebar-width)] p-0 [&>[data-slot=sheet-close]]:hidden\"\n\t\t\t\t>\n\t\t\t\t\t<SheetTitle className=\"sr-only\">Navigation</SheetTitle>\n\t\t\t\t\t<div className=\"flex h-full w-full flex-col bg-card text-foreground\">\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</SheetContent>\n\t\t\t</Sheet>\n\t\t);\n\t}\n\n\tconst isCollapsed = state === \"collapsed\";\n\tconst gapClassName =\n\t\tcollapsible === \"offcanvas\"\n\t\t\t? \"w-0 group-data-[state=expanded]/sidebar:w-[var(--sidebar-width)]\"\n\t\t\t: collapsible === \"icon\"\n\t\t\t\t? \"w-[var(--sidebar-width-icon)] group-data-[state=expanded]/sidebar:w-[var(--sidebar-width)]\"\n\t\t\t\t: \"w-[var(--sidebar-width)]\";\n\n\tconst panelClassName =\n\t\tcollapsible === \"offcanvas\"\n\t\t\t? cn(\n\t\t\t\t\t\"w-[var(--sidebar-width)] transition-[transform] duration-150 ease-out\",\n\t\t\t\t\tisCollapsed &&\n\t\t\t\t\t\t(side === \"left\" ? \"-translate-x-full\" : \"translate-x-full\"),\n\t\t\t\t)\n\t\t\t: cn(\n\t\t\t\t\t\"transition-[width] duration-150 ease-out\",\n\t\t\t\t\tisCollapsed && collapsible === \"icon\"\n\t\t\t\t\t\t? \"w-[var(--sidebar-width-icon)]\"\n\t\t\t\t\t\t: \"w-[var(--sidebar-width)]\",\n\t\t\t\t);\n\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"sidebar\"\n\t\t\tdata-state={state}\n\t\t\tdata-collapsible={isCollapsed ? collapsible : \"expanded\"}\n\t\t\tdata-side={side}\n\t\t\tclassName={cn(\"group/sidebar peer hidden md:block\", className)}\n\t\t>\n\t\t\t<div\n\t\t\t\tdata-slot=\"sidebar-gap\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"relative h-svh shrink-0 transition-[width] duration-150 ease-out\",\n\t\t\t\t\tgapClassName,\n\t\t\t\t)}\n\t\t\t/>\n\t\t\t<aside\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"fixed inset-y-0 z-40 hidden border-border bg-card text-foreground md:flex md:flex-col\",\n\t\t\t\t\tside === \"left\" ? \"left-0 border-r\" : \"right-0 border-l\",\n\t\t\t\t\tpanelClassName,\n\t\t\t\t\t\"[&[data-state=collapsed][data-collapsible=icon]_[data-slot=sidebar-group-label]]:hidden\",\n\t\t\t\t\t\"[&[data-state=collapsed][data-collapsible=icon]_[data-slot=sidebar-group-action]]:hidden\",\n\t\t\t\t\t\"[&[data-state=collapsed][data-collapsible=icon]_[data-slot=sidebar-menu-action]]:hidden\",\n\t\t\t\t\t\"[&[data-state=collapsed][data-collapsible=icon]_[data-slot=sidebar-menu-badge]]:hidden\",\n\t\t\t\t\t\"[&[data-state=collapsed][data-collapsible=icon]_[data-slot=sidebar-menu-button]]:justify-center\",\n\t\t\t\t\t\"[&[data-state=collapsed][data-collapsible=icon]_[data-slot=sidebar-menu-button]]:px-0\",\n\t\t\t\t)}\n\t\t\t\tdata-state={state}\n\t\t\t\tdata-collapsible={isCollapsed ? collapsible : \"expanded\"}\n\t\t\t\tdata-side={side}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</aside>\n\t\t</div>\n\t);\n}\n\nfunction SidebarTrigger({\n\tclassName,\n\tchildren,\n\tonClick,\n\t...props\n}: React.ComponentProps<typeof Button>) {\n\tconst { isMobile, state, toggleSidebar } = useSidebar();\n\tconst glyph = isMobile || state === \"collapsed\" ? \"▸\" : \"▾\";\n\n\treturn (\n\t\t<Button\n\t\t\tdata-slot=\"sidebar-trigger\"\n\t\t\tvariant=\"ghost\"\n\t\t\tsize=\"sm\"\n\t\t\tbracket={false}\n\t\t\tclassName={cn(\"h-7 min-w-7 px-2 py-0.5 text-xs\", className)}\n\t\t\tonClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n\t\t\t\tonClick?.(event);\n\t\t\t\ttoggleSidebar();\n\t\t\t}}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children ?? (\n\t\t\t\t<>\n\t\t\t\t\t<span aria-hidden>{glyph}</span>\n\t\t\t\t\t<span className=\"sr-only\">Toggle Sidebar</span>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</Button>\n\t);\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n\tconst { toggleSidebar } = useSidebar();\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tdata-slot=\"sidebar-rail\"\n\t\t\taria-label=\"Toggle Sidebar\"\n\t\t\tonClick={toggleSidebar}\n\t\t\tclassName={cn(\n\t\t\t\t\"absolute inset-y-0 top-0 hidden w-3 border-border text-foreground2 outline-none focus-visible:bg-foreground focus-visible:text-background md:flex\",\n\t\t\t\t\"left-full border-l\",\n\t\t\t\t\"group-data-[side=right]/sidebar:left-auto group-data-[side=right]/sidebar:right-full group-data-[side=right]/sidebar:border-l-0 group-data-[side=right]/sidebar:border-r\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span className=\"m-auto text-xs\" aria-hidden>\n\t\t\t\t|\n\t\t\t</span>\n\t\t</button>\n\t);\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n\treturn (\n\t\t<main\n\t\t\tdata-slot=\"sidebar-inset\"\n\t\t\tclassName={cn(\"flex min-h-svh flex-1 flex-col bg-background\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction SidebarInput({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof Input>) {\n\treturn (\n\t\t<Input\n\t\t\tdata-slot=\"sidebar-input\"\n\t\t\tclassName={cn(\"h-8 bg-background2 text-xs\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"sidebar-header\"\n\t\t\tclassName={cn(\"flex flex-col gap-2 border-b border-border p-3\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"sidebar-footer\"\n\t\t\tclassName={cn(\"mt-auto flex flex-col gap-2 border-t border-border p-3\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction SidebarSeparator({ className, ...props }: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\trole=\"separator\"\n\t\t\tdata-slot=\"sidebar-separator\"\n\t\t\tclassName={cn(\"mx-3 h-px bg-border\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"sidebar-content\"\n\t\t\tclassName={cn(\n\t\t\t\t\"flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto py-3\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"section\">) {\n\treturn (\n\t\t<section\n\t\t\tdata-slot=\"sidebar-group\"\n\t\t\tclassName={cn(\"relative flex flex-col gap-2 px-3\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction SidebarGroupLabel({\n\tclassName,\n\tasChild = false,\n\t...props\n}: React.ComponentProps<\"div\"> & { asChild?: boolean }) {\n\tconst Comp = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Comp\n\t\t\tdata-slot=\"sidebar-group-label\"\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-7 items-center px-2 font-mono text-xs text-foreground2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction SidebarGroupAction({\n\tclassName,\n\tasChild = false,\n\t...props\n}: React.ComponentProps<\"button\"> & { asChild?: boolean }) {\n\tconst Comp = asChild ? Slot : \"button\";\n\n\treturn (\n\t\t<Comp\n\t\t\tdata-slot=\"sidebar-group-action\"\n\t\t\tclassName={cn(\n\t\t\t\t\"absolute top-0 right-3 flex size-7 items-center justify-center border border-transparent font-mono text-xs text-foreground2 outline-none focus-visible:bg-foreground focus-visible:text-background\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction SidebarGroupContent({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"sidebar-group-content\"\n\t\t\tclassName={cn(\"flex flex-col gap-1\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n\treturn (\n\t\t<ul\n\t\t\tdata-slot=\"sidebar-menu\"\n\t\t\tclassName={cn(\"flex flex-col gap-1\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n\treturn (\n\t\t<li\n\t\t\tdata-slot=\"sidebar-menu-item\"\n\t\t\tclassName={cn(\"group/menu-item relative\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nconst sidebarMenuButtonVariants = cva(\n\t\"flex w-full items-center gap-2 overflow-hidden border border-transparent px-2 py-1 text-left font-mono text-sm text-foreground1 outline-none focus-visible:bg-foreground focus-visible:text-background focus-visible:border-foreground data-[active=true]:bg-foreground data-[active=true]:text-background data-[active=true]:border-foreground disabled:cursor-not-allowed disabled:text-foreground2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_span:last-child]:truncate\",\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: \"bg-transparent\",\n\t\t\t\toutline: \"border-border bg-background2 text-foreground\",\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tdefault: \"h-8\",\n\t\t\t\tsm: \"h-7 text-xs\",\n\t\t\t\tlg: \"h-10\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: \"default\",\n\t\t\tsize: \"default\",\n\t\t},\n\t},\n);\n\nfunction SidebarMenuButton({\n\tasChild = false,\n\tisActive = false,\n\tvariant,\n\tsize,\n\tclassName,\n\t...props\n}: React.ComponentProps<\"button\"> & {\n\tasChild?: boolean;\n\tisActive?: boolean;\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n\tconst Comp = asChild ? Slot : \"button\";\n\n\treturn (\n\t\t<Comp\n\t\t\tdata-slot=\"sidebar-menu-button\"\n\t\t\tdata-active={isActive}\n\t\t\tclassName={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction SidebarMenuAction({\n\tclassName,\n\tasChild = false,\n\t...props\n}: React.ComponentProps<\"button\"> & { asChild?: boolean }) {\n\tconst Comp = asChild ? Slot : \"button\";\n\n\treturn (\n\t\t<Comp\n\t\t\tdata-slot=\"sidebar-menu-action\"\n\t\t\tclassName={cn(\n\t\t\t\t\"absolute top-1 right-1 flex size-6 items-center justify-center border border-transparent font-mono text-xs text-foreground2 outline-none focus-visible:bg-foreground focus-visible:text-background\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction SidebarMenuBadge({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"sidebar-menu-badge\"\n\t\t\tclassName={cn(\n\t\t\t\t\"pointer-events-none absolute top-1.5 right-2 min-w-5 font-mono text-xs text-foreground2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tSidebar,\n\tSidebarContent,\n\tSidebarFooter,\n\tSidebarGroup,\n\tSidebarGroupAction,\n\tSidebarGroupContent,\n\tSidebarGroupLabel,\n\tSidebarHeader,\n\tSidebarInput,\n\tSidebarInset,\n\tSidebarMenu,\n\tSidebarMenuAction,\n\tSidebarMenuBadge,\n\tSidebarMenuButton,\n\tSidebarMenuItem,\n\tSidebarProvider,\n\tSidebarRail,\n\tSidebarSeparator,\n\tSidebarTrigger,\n\tuseSidebar,\n};\n",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "theme": {
      "--sidebar-width": "18rem",
      "--sidebar-width-icon": "3.5rem",
      "--termcn-slide-offset": "1rem"
    }
  },
  "type": "registry:ui"
}