{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar",
  "title": "Sidebar",
  "description": "Polaris-styled Sidebar component.",
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [
    "@shopify/polaris-types"
  ],
  "registryDependencies": [
    "@polaris-shadcn/theme",
    "@polaris-shadcn/utils"
  ],
  "files": [
    {
      "path": "registry/templates/components/ui/sidebar.tsx",
      "content": "import * as React from \"react\";\nimport { PanelLeft } from \"lucide-react\";\nimport { cn } from \"../../lib/utils\";\n\nexport interface SidebarContextValue {\n  open: boolean;\n  setOpen: (value: React.SetStateAction<boolean>) => void;\n}\n\nconst SidebarContext = React.createContext<SidebarContextValue | null>(null);\n\nconst defaultSidebarVars = {\n  \"--sidebar-width\": \"18rem\",\n  \"--sidebar-width-icon\": \"3rem\",\n} as React.CSSProperties;\n\nexport function useSidebar(): SidebarContextValue {\n  const context = React.useContext(SidebarContext);\n  if (!context) {\n    throw new Error(\n      \"useSidebar must be used within a SidebarProvider or Sidebar\",\n    );\n  }\n  return context;\n}\n\nexport interface SidebarProviderProps\n  extends React.ComponentPropsWithoutRef<\"div\"> {\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\nconst SidebarProvider = React.forwardRef<HTMLDivElement, SidebarProviderProps>(\n  (\n    {\n      defaultOpen = true,\n      open: openProp,\n      onOpenChange,\n      className,\n      style,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const [openState, setOpenState] = React.useState(defaultOpen);\n    const open = openProp ?? openState;\n\n    const setOpen = React.useCallback(\n      (value: React.SetStateAction<boolean>) => {\n        const next = typeof value === \"function\" ? value(open) : value;\n        if (openProp === undefined) {\n          setOpenState(next);\n        }\n        onOpenChange?.(next);\n      },\n      [open, openProp, onOpenChange],\n    );\n\n    const value = React.useMemo(() => ({ open, setOpen }), [open, setOpen]);\n    const mergedStyle = { ...defaultSidebarVars, ...style };\n\n    return (\n      <SidebarContext.Provider value={value}>\n        <div\n          ref={ref}\n          data-sidebar=\"root\"\n          className={cn(\"flex h-full min-h-0 w-full\", className)}\n          style={mergedStyle}\n          {...props}\n        >\n          {children}\n        </div>\n      </SidebarContext.Provider>\n    );\n  },\n);\nSidebarProvider.displayName = \"SidebarProvider\";\n\nexport type SidebarCollapsible = \"icon\" | \"offcanvas\" | \"none\";\n\nexport interface SidebarProps extends React.ComponentPropsWithoutRef<\"div\"> {\n  collapsible?: SidebarCollapsible;\n}\n\nconst Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(\n  ({ className, collapsible = \"icon\", style, ...props }, ref) => {\n    const context = React.useContext(SidebarContext);\n\n    if (!context) {\n      return (\n        <SidebarProvider\n          ref={ref}\n          className={className}\n          style={style}\n          {...props}\n        />\n      );\n    }\n\n    const state = context.open ? \"expanded\" : \"collapsed\";\n\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"sidebar\"\n        data-collapsible={collapsible}\n        data-state={state}\n        className={cn(\n          \"flex h-full min-h-0 shrink-0 flex-col bg-sidebar text-sidebar-foreground\",\n          \"transition-[width,opacity] duration-200 ease-out\",\n          collapsible !== \"none\" && \"w-[var(--sidebar-width)]\",\n          collapsible === \"icon\" &&\n            \"data-[state=collapsed]:w-[var(--sidebar-width-icon)] data-[state=collapsed]:flex-none\",\n          collapsible === \"offcanvas\" &&\n            \"data-[state=collapsed]:w-0 data-[state=collapsed]:opacity-0 data-[state=collapsed]:pointer-events-none data-[state=collapsed]:overflow-hidden data-[state=collapsed]:flex-none data-[state=collapsed]:border-transparent\",\n          className,\n        )}\n        style={style}\n        {...props}\n      />\n    );\n  },\n);\nSidebar.displayName = \"Sidebar\";\n\nexport type SidebarInsetProps = React.ComponentPropsWithoutRef<\"div\">;\n\nconst SidebarInset = React.forwardRef<HTMLDivElement, SidebarInsetProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-sidebar=\"inset\"\n      className={cn(\n        \"flex min-h-0 min-w-0 flex-1 flex-col bg-background\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nSidebarInset.displayName = \"SidebarInset\";\n\nexport type SidebarHeaderProps = React.ComponentPropsWithoutRef<\"div\">;\n\nconst SidebarHeader = React.forwardRef<HTMLDivElement, SidebarHeaderProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      {...props}\n    />\n  ),\n);\nSidebarHeader.displayName = \"SidebarHeader\";\n\nexport type SidebarFooterProps = React.ComponentPropsWithoutRef<\"div\">;\n\nconst SidebarFooter = React.forwardRef<HTMLDivElement, SidebarFooterProps>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"mt-auto p-2\", className)} {...props} />\n  ),\n);\nSidebarFooter.displayName = \"SidebarFooter\";\n\nexport type SidebarContentProps = React.ComponentPropsWithoutRef<\"div\">;\n\nconst SidebarContent = React.forwardRef<HTMLDivElement, SidebarContentProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\"flex-1 overflow-auto p-2\", className)}\n      {...props}\n    />\n  ),\n);\nSidebarContent.displayName = \"SidebarContent\";\n\nexport type SidebarGroupProps = React.ComponentPropsWithoutRef<\"div\">;\n\nconst SidebarGroup = React.forwardRef<HTMLDivElement, SidebarGroupProps>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"grid gap-1\", className)} {...props} />\n  ),\n);\nSidebarGroup.displayName = \"SidebarGroup\";\n\nexport type SidebarGroupContentProps = React.ComponentPropsWithoutRef<\"div\">;\n\nconst SidebarGroupContent = React.forwardRef<\n  HTMLDivElement,\n  SidebarGroupContentProps\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"grid gap-1\", className)} {...props} />\n));\nSidebarGroupContent.displayName = \"SidebarGroupContent\";\n\nexport type SidebarMenuProps = React.ComponentPropsWithoutRef<\"ul\">;\n\nconst SidebarMenu = React.forwardRef<HTMLUListElement, SidebarMenuProps>(\n  ({ className, ...props }, ref) => (\n    <ul ref={ref} className={cn(\"grid gap-1\", className)} {...props} />\n  ),\n);\nSidebarMenu.displayName = \"SidebarMenu\";\n\nexport type SidebarMenuItemProps = React.ComponentPropsWithoutRef<\"li\">;\n\nconst SidebarMenuItem = React.forwardRef<HTMLLIElement, SidebarMenuItemProps>(\n  ({ className, ...props }, ref) => (\n    <li ref={ref} className={cn(\"list-none\", className)} {...props} />\n  ),\n);\nSidebarMenuItem.displayName = \"SidebarMenuItem\";\n\nfunction composeEventHandlers<E extends { defaultPrevented: boolean }>(\n  userHandler: ((event: E) => void) | undefined,\n  theirHandler: ((event: E) => void) | undefined,\n) {\n  return (event: E) => {\n    userHandler?.(event);\n    if (!event.defaultPrevented) {\n      theirHandler?.(event);\n    }\n  };\n}\n\ninterface SlotChildProps {\n  className?: string;\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  ref?: React.Ref<HTMLElement>;\n}\n\ntype SlotProps = React.ButtonHTMLAttributes<HTMLElement>;\n\nconst Slot = React.forwardRef<HTMLElement, SlotProps>(\n  ({ children, className, onClick, ...props }, ref) => {\n    if (!React.isValidElement<SlotChildProps>(children)) {\n      return null;\n    }\n\n    const childProps = children.props;\n    return React.cloneElement(children, {\n      ...props,\n      ...childProps,\n      className: cn(className, childProps.className),\n      onClick: composeEventHandlers(onClick, childProps.onClick),\n      ref,\n    });\n  },\n);\nSlot.displayName = \"Slot\";\n\nexport type SidebarMenuButtonSize = \"default\" | \"lg\";\n\nconst menuButtonSizes: Record<SidebarMenuButtonSize, string> = {\n  default: \"h-9 px-2.5 text-sm\",\n  lg: \"h-10 px-3 text-sm\",\n};\n\nexport interface SidebarMenuButtonTooltip {\n  children?: string;\n  hidden?: boolean;\n}\n\nexport interface SidebarMenuButtonProps\n  extends React.ComponentPropsWithoutRef<\"button\"> {\n  size?: SidebarMenuButtonSize;\n  isActive?: boolean;\n  tooltip?: SidebarMenuButtonTooltip;\n  asChild?: boolean;\n}\n\nconst SidebarMenuButton = React.forwardRef<\n  HTMLButtonElement,\n  SidebarMenuButtonProps\n>(\n  (\n    {\n      className,\n      size = \"default\",\n      isActive = false,\n      tooltip,\n      asChild = false,\n      type,\n      ...props\n    },\n    ref,\n  ) => {\n    const tooltipText = tooltip?.children;\n    const showTooltip = tooltipText && tooltip?.hidden !== true;\n    const Comp = asChild ? Slot : \"button\";\n\n    return (\n      <Comp\n        ref={ref}\n        data-sidebar=\"menu-button\"\n        type={asChild ? undefined : (type ?? \"button\")}\n        aria-current={isActive ? \"page\" : undefined}\n        title={showTooltip ? tooltipText : undefined}\n        className={cn(\n          \"flex w-full items-center gap-2 overflow-hidden rounded-md text-left text-sidebar-foreground transition\",\n          \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n          menuButtonSizes[size] ?? menuButtonSizes.default,\n          isActive &&\n            \"bg-surface-subdued text-sidebar-foreground font-medium [&>svg]:text-sidebar-foreground\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nSidebarMenuButton.displayName = \"SidebarMenuButton\";\n\nexport type SidebarInputProps = React.ComponentPropsWithoutRef<\"input\">;\n\nconst SidebarInput = React.forwardRef<HTMLInputElement, SidebarInputProps>(\n  ({ className, ...props }, ref) => (\n    <input\n      ref={ref}\n      data-sidebar=\"collapse-hide\"\n      className={cn(\n        \"h-9 w-full rounded-md border border-border bg-card px-3 text-sm outline-none\",\n        \"placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nSidebarInput.displayName = \"SidebarInput\";\n\nexport type SidebarTriggerProps = React.ComponentPropsWithoutRef<\"button\">;\n\nconst SidebarTrigger = React.forwardRef<\n  HTMLButtonElement,\n  SidebarTriggerProps\n>(({ className, onClick, style, ...props }, ref) => {\n  const { open, setOpen } = useSidebar();\n  const mergedStyle = { width: \"28px\", height: \"28px\", ...style };\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      data-sidebar=\"trigger\"\n      aria-label={open ? \"Collapse sidebar\" : \"Expand sidebar\"}\n      onClick={(event) => {\n        onClick?.(event);\n        if (!event.defaultPrevented) {\n          setOpen((prev) => !prev);\n        }\n      }}\n      className={cn(\n        \"inline-flex shrink-0 items-center justify-center rounded-[8px] bg-transparent p-0\",\n        \"text-foreground transition hover:bg-muted\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n        className,\n      )}\n      style={mergedStyle}\n      {...props}\n    >\n      <PanelLeft className=\"size-4\" />\n    </button>\n  );\n});\nSidebarTrigger.displayName = \"SidebarTrigger\";\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}