{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar",
  "title": "Sidebar",
  "description": "Collapsible glass sidebar shell with context state.",
  "dependencies": ["lucide-react"],
  "registryDependencies": ["@glasswave/button", "@glasswave/glass"],
  "files": [
    {
      "path": "registry/glasswave/ui/sidebar.tsx",
      "content": "\"use client\";\n\nimport { PanelLeft } from \"lucide-react\";\nimport {\n  createContext,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n} from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { glass } from \"@/lib/glass\";\nimport { buttonVariants } from \"@/components/ui/button\";\n\ntype SidebarContextValue = {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  toggle: () => void;\n};\n\nconst SidebarContext = createContext<SidebarContextValue | null>(null);\n\nexport function useSidebar() {\n  const ctx = useContext(SidebarContext);\n  if (!ctx) {\n    throw new Error(\"useSidebar must be used within SidebarProvider\");\n  }\n  return ctx;\n}\n\nexport function SidebarProvider({\n  children,\n  defaultOpen = true,\n}: {\n  children: ReactNode;\n  defaultOpen?: boolean;\n}) {\n  const [open, setOpen] = useState(defaultOpen);\n  const toggle = useCallback(() => setOpen((o) => !o), []);\n  const value = useMemo(() => ({ open, setOpen, toggle }), [open]);\n\n  return (\n    <SidebarContext.Provider value={value}>{children}</SidebarContext.Provider>\n  );\n}\n\nexport function Sidebar({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"aside\">) {\n  const { open } = useSidebar();\n  return (\n    <aside\n      data-slot=\"sidebar\"\n      data-state={open ? \"expanded\" : \"collapsed\"}\n      className={cn(\n        glass,\n        \"flex h-full min-h-[320px] flex-col overflow-hidden transition-[width] duration-300 ease-out\",\n        open ? \"w-64\" : \"w-[4.25rem]\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </aside>\n  );\n}\n\nexport function SidebarHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      className={cn(\n        \"flex h-14 shrink-0 items-center gap-2 border-b border-black/[0.08] dark:border-white/10 px-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function SidebarContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      className={cn(\n        \"flex flex-1 flex-col gap-1 overflow-y-auto p-2\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function SidebarFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      className={cn(\n        \"mt-auto flex shrink-0 flex-col gap-1 border-t border-black/[0.08] dark:border-white/10 p-2\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function SidebarGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      className={cn(\"flex flex-col gap-0.5\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function SidebarGroupLabel({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  const { open } = useSidebar();\n  return (\n    <div\n      data-slot=\"sidebar-group-label\"\n      className={cn(\n        \"px-2 py-1.5 text-xs font-medium uppercase tracking-wide text-current/50\",\n        !open && \"sr-only\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenu({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      className={cn(\"flex flex-col gap-0.5\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      className={cn(\"list-none\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuButton({\n  className,\n  children,\n  isActive,\n  ...props\n}: React.ComponentProps<\"button\"> & { isActive?: boolean }) {\n  const { open } = useSidebar();\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"sidebar-menu-button\"\n      data-active={isActive || undefined}\n      className={cn(\n        \"flex w-full items-center gap-2.5 rounded-xl px-2.5 py-2 text-left text-sm transition-colors\",\n        isActive\n          ? \"bg-black/[0.06] font-medium text-current dark:bg-white/12\"\n          : \"text-current/70 hover:bg-black/[0.05] hover:text-current dark:hover:bg-white/10\",\n        !open && \"justify-center px-0 [&>span]:hidden\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport function SidebarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<\"button\">) {\n  const { toggle } = useSidebar();\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"sidebar-trigger\"\n      onClick={toggle}\n      className={cn(\n        buttonVariants({ variant: \"glass\", size: \"icon\" }),\n        className,\n      )}\n      aria-label=\"Toggle sidebar\"\n      {...props}\n    >\n      <PanelLeft className=\"size-4\" />\n    </button>\n  );\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}