{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs",
  "title": "Tabs",
  "description": "Tab list with tabs, pills, and underline variants. Built on Radix Tabs.",
  "dependencies": ["@radix-ui/react-tabs"],
  "registryDependencies": ["https://indiacn.in/r/theme.json"],
  "files": [
    {
      "path": "components/ui/tabs.tsx",
      "content": "'use client';\n\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport { ComponentProps, createContext, useContext } from 'react';\n\nimport { cn } from '@/lib/utils';\n\n/*\n * UX4G nav variants:\n * - tabs:      border-bottom 1px neutral-200, link rounded-top; active = neutral-0 bg, visible top/side border\n * - pills:     active bg primary, text neutral-0, rounded\n * - underline: border-bottom animates in on active (2px primary)\n * Disabled: color neutral-500, pointer-events none.\n */\n\ntype TTabsVariant = 'tabs' | 'pills' | 'underline';\n\nconst TABS_CONTEXT = createContext<TTabsVariant>('tabs');\n\ninterface ITabsProps extends ComponentProps<typeof TabsPrimitive.Root> {\n  variant?: TTabsVariant;\n}\n\n/** Tabs root component. Passes variant down to list/trigger via context. */\nfunction Tabs({ className, variant = 'tabs', ...props }: ITabsProps) {\n  return (\n    <TABS_CONTEXT.Provider value={variant}>\n      <TabsPrimitive.Root className={cn('w-full', className)} {...props} />\n    </TABS_CONTEXT.Provider>\n  );\n}\n\ninterface ITabsListProps extends ComponentProps<typeof TabsPrimitive.List> {\n  variant?: TTabsVariant;\n}\n\n/** Container for tab trigger buttons. */\nfunction TabsList({ className, variant, ...props }: ITabsListProps) {\n  const ctxVariant = useContext(TABS_CONTEXT);\n  const resolved = variant ?? ctxVariant;\n  return (\n    <TabsPrimitive.List\n      className={cn(\n        'inline-flex items-center',\n        resolved === 'tabs' && 'gap-0 border-b border-neutral-200',\n        resolved === 'pills' && 'gap-1',\n        resolved === 'underline' && 'gap-0 border-b border-neutral-200',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ninterface ITabsTriggerProps extends ComponentProps<typeof TabsPrimitive.Trigger> {\n  variant?: TTabsVariant;\n}\n\n/** Clickable tab trigger button. */\nfunction TabsTrigger({ className, variant, ...props }: ITabsTriggerProps) {\n  const ctxVariant = useContext(TABS_CONTEXT);\n  const resolved = variant ?? ctxVariant;\n  return (\n    <TabsPrimitive.Trigger\n      className={cn(\n        'inline-flex items-center justify-center px-4 py-2 text-sm transition-[color,background-color,border-color] duration-150 focus-visible:outline-none disabled:pointer-events-none disabled:text-neutral-500 disabled:opacity-50',\n        resolved === 'tabs' && [\n          'relative -mb-px rounded-t-md border border-transparent text-neutral-600',\n          'hover:text-neutral hover:border-neutral-100 hover:border-b-neutral-200',\n          'data-[state=active]:bg-neutral-0 data-[state=active]:border-b-neutral-0 data-[state=active]:text-neutral data-[state=active]:border-neutral-200',\n        ],\n        resolved === 'pills' && [\n          'rounded-md text-neutral-600',\n          'hover:text-primary',\n          'data-[state=active]:bg-primary data-[state=active]:text-neutral-0',\n        ],\n        resolved === 'underline' && [\n          'relative -mb-px border-b-2 border-transparent text-neutral-600',\n          'hover:text-primary',\n          'data-[state=active]:border-b-primary data-[state=active]:text-primary',\n        ],\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Content panel displayed when its associated tab is active. */\nfunction TabsContent({ className, ...props }: ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      className={cn(\n        'focus-visible:shadow-focus-primary mt-2 rounded-md focus-visible:outline-none',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}