{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "adminlte-tabs",
  "title": "AdminLTE Tabs",
  "description": "Tab navigation with colored header variants, custom box styling, header tools slot, and top/bottom position.",
  "registryDependencies": [
    "https://raw.githubusercontent.com/dnachavez/adminlte-next/master/public/r/adminlte-theme.json"
  ],
  "files": [
    {
      "path": "registry/new-york/adminlte-tabs/ui/adminlte-tabs.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@/registry/new-york/adminlte-theme/lib/cn\"\n\ntype TabsVariant = \"default\" | \"primary\" | \"info\" | \"success\" | \"warning\" | \"danger\"\n\nconst tabsHeaderStyles: Record<TabsVariant, string> = {\n  default: \"bg-[#f4f4f4]\",\n  primary: \"bg-[#3c8dbc]\",\n  info: \"bg-[#00c0ef]\",\n  success: \"bg-[#00a65a]\",\n  warning: \"bg-[#f39c12]\",\n  danger: \"bg-[#dd4b39]\",\n}\n\nconst tabActiveStyles: Record<TabsVariant, string> = {\n  default: \"bg-white text-[#444] border-t-[3px] border-t-[#3c8dbc]\",\n  primary: \"bg-white text-[#444] border-t-[3px] border-t-[#3c8dbc]\",\n  info: \"bg-white text-[#444] border-t-[3px] border-t-[#00c0ef]\",\n  success: \"bg-white text-[#444] border-t-[3px] border-t-[#00a65a]\",\n  warning: \"bg-white text-[#444] border-t-[3px] border-t-[#f39c12]\",\n  danger: \"bg-white text-[#444] border-t-[3px] border-t-[#dd4b39]\",\n}\n\ninterface Tab {\n  id: string\n  label: React.ReactNode\n  content: React.ReactNode\n  icon?: React.ReactNode\n  disabled?: boolean\n}\n\ninterface AdminLTETabsProps extends React.HTMLAttributes<HTMLDivElement> {\n  tabs: Tab[]\n  variant?: TabsVariant\n  defaultActiveTab?: string\n  activeTab?: string\n  onTabChange?: (tabId: string) => void\n  position?: \"top\" | \"bottom\" | \"left\" | \"right\"\n  headerTools?: React.ReactNode\n  custom?: boolean\n}\n\nconst AdminLTETabs = React.forwardRef<HTMLDivElement, AdminLTETabsProps>(\n  (\n    {\n      className,\n      tabs,\n      variant = \"default\",\n      defaultActiveTab,\n      activeTab: controlledActiveTab,\n      onTabChange,\n      position = \"top\",\n      headerTools,\n      custom = true,\n      ...props\n    },\n    ref\n  ) => {\n    const [internalActiveTab, setInternalActiveTab] = React.useState(\n      defaultActiveTab || tabs[0]?.id || \"\"\n    )\n    const activeTab = controlledActiveTab ?? internalActiveTab\n\n    const handleTabClick = (tabId: string) => {\n      setInternalActiveTab(tabId)\n      onTabChange?.(tabId)\n    }\n\n    const tabNav = (\n      <ul\n        className={cn(\n          \"flex list-none m-0 border-b-0\",\n          custom && \"p-0 rounded-t-[3px]\",\n          custom && variant !== \"default\" && tabsHeaderStyles[variant],\n          !custom && \"border-b border-b-[#ddd]\"\n        )}\n      >\n        {tabs.map((tab) => (\n          <li key={tab.id} className=\"relative\">\n            <button\n              type=\"button\"\n              className={cn(\n                \"block px-[15px] py-[10px] text-[14px] no-underline border-0 cursor-pointer transition-colors\",\n                activeTab === tab.id\n                  ? cn(\n                      custom\n                        ? tabActiveStyles[variant]\n                        : \"bg-white text-[#444] border border-solid border-[#ddd] border-b-transparent rounded-t-[3px]\",\n                      \"-mb-[1px]\"\n                    )\n                  : cn(\n                      \"bg-transparent\",\n                      variant !== \"default\" && custom\n                        ? \"text-white/80 hover:text-white\"\n                        : \"text-[#444] hover:bg-[#eee]\"\n                    ),\n                tab.disabled && \"opacity-50 cursor-not-allowed pointer-events-none\"\n              )}\n              onClick={() => !tab.disabled && handleTabClick(tab.id)}\n              disabled={tab.disabled}\n            >\n              {tab.icon && <span className=\"mr-[5px]\">{tab.icon}</span>}\n              {tab.label}\n            </button>\n          </li>\n        ))}\n        {headerTools && (\n          <li className=\"ml-auto flex items-center pr-[10px]\">\n            {headerTools}\n          </li>\n        )}\n      </ul>\n    )\n\n    const tabContent = (\n      <div\n        className={cn(\n          \"p-[10px]\",\n          custom && \"bg-white rounded-b-[3px]\"\n        )}\n      >\n        {tabs.map((tab) => (\n          <div\n            key={tab.id}\n            className={cn(\n              activeTab === tab.id ? \"block\" : \"hidden\"\n            )}\n          >\n            {tab.content}\n          </div>\n        ))}\n      </div>\n    )\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          custom && \"mb-[20px] shadow-[0_1px_1px_rgba(0,0,0,0.1)] rounded-[3px]\",\n          className\n        )}\n        {...props}\n      >\n        {position === \"bottom\" ? (\n          <>\n            {tabContent}\n            {tabNav}\n          </>\n        ) : (\n          <>\n            {tabNav}\n            {tabContent}\n          </>\n        )}\n      </div>\n    )\n  }\n)\nAdminLTETabs.displayName = \"AdminLTETabs\"\n\nexport { AdminLTETabs }\nexport type { AdminLTETabsProps, Tab, TabsVariant }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}