{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs",
  "type": "registry:component",
  "title": "Tabs",
  "description": "Tabbed content panels with keyboard-accessible tab triggers.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/tabs/tabs.tsx",
      "content": "\"use client\";\n\nimport { createContext, useContext, useMemo, useState } from \"react\";\n\nimport type { ReactNode } from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\n\n// Context for tabs state\ntype TabsContextValue = {\n  activeTab: string;\n  setActiveTab: (value: string) => void;\n};\n\nconst TabsContext = createContext<null | TabsContextValue>(null);\n\nfunction useTabsContext(): TabsContextValue {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error(\"Tab components must be used within a Tabs component\");\n  }\n  return context;\n}\n\nexport type TabsProps = {\n  children: ReactNode;\n  className?: string;\n  defaultValue: string;\n  onValueChange?: (value: string) => void;\n};\n\nfunction Tabs({\n  children,\n  className,\n  defaultValue,\n  onValueChange,\n}: TabsProps): React.ReactNode {\n  const [activeTab, setActiveTab] = useState(defaultValue);\n\n  const handleSetActiveTab = (value: string): void => {\n    setActiveTab(value);\n    onValueChange?.(value);\n  };\n\n  const contextValue = useMemo(\n    () => ({ activeTab, setActiveTab: handleSetActiveTab }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [activeTab],\n  );\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <div className={cn(\"my-6\", className)}>{children}</div>\n    </TabsContext.Provider>\n  );\n}\n\nexport type TabsListProps = {\n  children: ReactNode;\n  className?: string;\n};\n\nfunction TabsList({ children, className }: TabsListProps): React.ReactNode {\n  return (\n    <div\n      className={cn(\"flex border-b border-border overflow-x-auto\", className)}\n      role=\"tablist\"\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type TabsTriggerProps = {\n  children: ReactNode;\n  className?: string;\n  value: string;\n};\n\nfunction TabsTrigger({\n  children,\n  className,\n  value,\n}: TabsTriggerProps): React.ReactNode {\n  const { activeTab, setActiveTab } = useTabsContext();\n  const isActive = activeTab === value;\n\n  return (\n    <button\n      aria-selected={isActive}\n      className={cn(\n        \"px-4 py-2 text-sm font-medium whitespace-nowrap transition-colors\",\n        \"border-b-2 -mb-px\",\n        isActive\n          ? \"border-primary text-primary\"\n          : \"border-transparent text-muted-foreground hover:text-foreground hover:border-muted-foreground/50\",\n        className,\n      )}\n      onClick={() => {\n        setActiveTab(value);\n      }}\n      role=\"tab\"\n      type=\"button\"\n    >\n      {children}\n    </button>\n  );\n}\n\nexport type TabsContentProps = {\n  children: ReactNode;\n  className?: string;\n  value: string;\n};\n\nfunction TabsContent({\n  children,\n  className,\n  value,\n}: TabsContentProps): React.ReactNode {\n  const { activeTab } = useTabsContext();\n\n  if (activeTab !== value) return null;\n\n  return (\n    <div className={cn(\"pt-4\", className)} role=\"tabpanel\">\n      {children}\n    </div>\n  );\n}\n\n// Attach sub-components\nTabs.List = TabsList;\nTabs.Trigger = TabsTrigger;\nTabs.Content = TabsContent;\n\nexport { Tabs, TabsContent, TabsList, TabsTrigger };\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}