{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "control-sidebar",
  "title": "Control Sidebar",
  "description": "Right sidebar panel with dark/light variants, tab navigation, and slide-in toggle.",
  "registryDependencies": [
    "https://raw.githubusercontent.com/dnachavez/adminlte-next/master/public/r/adminlte-theme.json",
    "https://raw.githubusercontent.com/dnachavez/adminlte-next/master/public/r/adminlte-tabs.json",
    "https://raw.githubusercontent.com/dnachavez/adminlte-next/master/public/r/use-control-sidebar.json"
  ],
  "files": [
    {
      "path": "registry/new-york/control-sidebar/components/control-sidebar.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@/registry/new-york/adminlte-theme/lib/cn\"\n\ninterface ControlSidebarProps extends React.HTMLAttributes<HTMLElement> {\n  isOpen?: boolean\n  onToggle?: () => void\n  variant?: \"dark\" | \"light\"\n}\n\nconst ControlSidebar = React.forwardRef<HTMLElement, ControlSidebarProps>(\n  (\n    {\n      className,\n      isOpen = false,\n      onToggle,\n      variant = \"dark\",\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <aside\n        ref={ref}\n        className={cn(\n          \"fixed top-0 w-[230px] min-h-full z-[1010] pt-[50px]\",\n          \"transition-[right] duration-300 ease-in-out\",\n          isOpen ? \"right-0\" : \"right-[-230px]\",\n          variant === \"dark\" && \"bg-[#222d32] text-[#b8c7ce]\",\n          variant === \"light\" &&\n            \"bg-[#f9fafc] text-[#444] border-l border-[#d2d6de]\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"h-full overflow-y-auto overflow-x-hidden p-[10px]\">\n          {children}\n        </div>\n      </aside>\n    )\n  }\n)\nControlSidebar.displayName = \"ControlSidebar\"\n\ninterface ControlSidebarToggleProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {}\n\nconst ControlSidebarToggle = React.forwardRef<\n  HTMLButtonElement,\n  ControlSidebarToggleProps\n>(({ className, onClick, ...props }, ref) => {\n  return (\n    <button\n      ref={ref}\n      className={cn(\n        \"flex items-center justify-center w-[50px] h-[50px] bg-transparent border-none text-[var(--adminlte-skin-navbar-color)] cursor-pointer hover:bg-black/10\",\n        className\n      )}\n      onClick={onClick}\n      aria-label=\"Toggle control sidebar\"\n      {...props}\n    >\n      {/* Gears icon */}\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 512 512\"\n        fill=\"currentColor\"\n        className=\"w-[16px] h-[16px]\"\n      >\n        <path d=\"M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z\" />\n      </svg>\n    </button>\n  )\n})\nControlSidebarToggle.displayName = \"ControlSidebarToggle\"\n\nexport { ControlSidebar, ControlSidebarToggle }\nexport type { ControlSidebarProps, ControlSidebarToggleProps }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}