{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gummy-sidebar",
  "type": "registry:ui",
  "title": "Gummy Sidebar",
  "description": "Controlled or uncontrolled semantic Sidebar layout with collapsible navigation, current-page state, responsive panel, and content inset.",
  "registryDependencies": [
    "https://gummyui.dev/r/gummy-primitives-styles.json"
  ],
  "files": [
    {
      "path": "components/ui/GummySidebar.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nfunction joinClassNames(...values: Array<string | false | null | undefined>) {\n  return values.filter(Boolean).join(\" \");\n}\n\ntype SidebarContextValue = {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n};\n\nconst SidebarContext = React.createContext<SidebarContextValue | null>(null);\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext);\n  if (!context) throw new Error(\"GummySidebar parts must be used inside GummySidebar.\");\n  return context;\n}\n\nexport type GummySidebarProps = React.HTMLAttributes<HTMLDivElement> & {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n};\n\nexport const GummySidebar = React.forwardRef<HTMLDivElement, GummySidebarProps>(\n  function GummySidebar(\n    {\n      open: controlledOpen,\n      defaultOpen = true,\n      onOpenChange,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);\n    const open = controlledOpen ?? uncontrolledOpen;\n    const setOpen = React.useCallback((next: boolean) => {\n      if (controlledOpen === undefined) setUncontrolledOpen(next);\n      onOpenChange?.(next);\n    }, [controlledOpen, onOpenChange]);\n    return (\n      <SidebarContext.Provider value={{ open, setOpen }}>\n        <div\n          {...props}\n          ref={ref}\n          className={joinClassNames(\"gummy-sidebar-layout\", className)}\n          data-open={open || undefined}\n        />\n      </SidebarContext.Provider>\n    );\n  },\n);\n\nGummySidebar.displayName = \"GummySidebar\";\n\nexport const GummySidebarPanel = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement> & { label?: string }\n>(function GummySidebarPanel(\n  { label = \"Workspace\", className, ...props },\n  ref,\n) {\n  const { open } = useSidebar();\n  return (\n    <aside\n      {...props}\n      ref={ref}\n      className={joinClassNames(\"gummy-sidebar\", className)}\n      aria-label={label}\n      data-open={open || undefined}\n    />\n  );\n});\n\nGummySidebarPanel.displayName = \"GummySidebarPanel\";\n\nexport const GummySidebarTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ButtonHTMLAttributes<HTMLButtonElement>\n>(function GummySidebarTrigger({ className, children, ...props }, ref) {\n  const { open, setOpen } = useSidebar();\n  return (\n    <button\n      {...props}\n      ref={ref}\n      type=\"button\"\n      className={joinClassNames(\"gummy-sidebar__trigger\", className)}\n      aria-expanded={open}\n      onClick={(event) => {\n        props.onClick?.(event);\n        if (!event.defaultPrevented) setOpen(!open);\n      }}\n    >\n      {children ?? (open ? \"Collapse sidebar\" : \"Expand sidebar\")}\n    </button>\n  );\n});\n\nGummySidebarTrigger.displayName = \"GummySidebarTrigger\";\n\nexport const GummySidebarHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function GummySidebarHeader({ className, ...props }, ref) {\n    return <div {...props} ref={ref} className={joinClassNames(\"gummy-sidebar__header\", className)} />;\n  },\n);\nexport const GummySidebarContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function GummySidebarContent({ className, ...props }, ref) {\n    return <div {...props} ref={ref} className={joinClassNames(\"gummy-sidebar__content\", className)} />;\n  },\n);\nexport const GummySidebarFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function GummySidebarFooter({ className, ...props }, ref) {\n    return <div {...props} ref={ref} className={joinClassNames(\"gummy-sidebar__footer\", className)} />;\n  },\n);\nexport const GummySidebarGroup = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function GummySidebarGroup({ className, ...props }, ref) {\n    return <div {...props} ref={ref} className={joinClassNames(\"gummy-sidebar__group\", className)} />;\n  },\n);\nexport const GummySidebarGroupLabel = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(\n  function GummySidebarGroupLabel({ className, ...props }, ref) {\n    return <h3 {...props} ref={ref} className={joinClassNames(\"gummy-sidebar__group-label\", className)} />;\n  },\n);\nexport const GummySidebarMenu = React.forwardRef<HTMLUListElement, React.HTMLAttributes<HTMLUListElement>>(\n  function GummySidebarMenu({ className, ...props }, ref) {\n    return <ul {...props} ref={ref} className={joinClassNames(\"gummy-sidebar__menu\", className)} />;\n  },\n);\nexport const GummySidebarMenuItem = React.forwardRef<HTMLLIElement, React.LiHTMLAttributes<HTMLLIElement>>(\n  function GummySidebarMenuItem({ className, ...props }, ref) {\n    return <li {...props} ref={ref} className={joinClassNames(\"gummy-sidebar__menu-item\", className)} />;\n  },\n);\nexport const GummySidebarMenuLink = React.forwardRef<HTMLAnchorElement, React.AnchorHTMLAttributes<HTMLAnchorElement> & { current?: boolean }>(\n  function GummySidebarMenuLink({ current = false, className, ...props }, ref) {\n    return <a {...props} ref={ref} className={joinClassNames(\"gummy-sidebar__menu-link\", className)} aria-current={current ? \"page\" : undefined} />;\n  },\n);\nexport const GummySidebarInset = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement> & { as?: \"main\" | \"div\" }\n>(\n  function GummySidebarInset({ as = \"main\", className, ...props }, ref) {\n    const Root = as;\n    return <Root {...props} ref={ref as never} className={joinClassNames(\"gummy-sidebar__inset\", className)} />;\n  },\n);\n\nGummySidebarHeader.displayName = \"GummySidebarHeader\";\nGummySidebarContent.displayName = \"GummySidebarContent\";\nGummySidebarFooter.displayName = \"GummySidebarFooter\";\nGummySidebarGroup.displayName = \"GummySidebarGroup\";\nGummySidebarGroupLabel.displayName = \"GummySidebarGroupLabel\";\nGummySidebarMenu.displayName = \"GummySidebarMenu\";\nGummySidebarMenuItem.displayName = \"GummySidebarMenuItem\";\nGummySidebarMenuLink.displayName = \"GummySidebarMenuLink\";\nGummySidebarInset.displayName = \"GummySidebarInset\";\n"
    }
  ]
}