{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs",
  "files": [
    {
      "path": "registry/new-york/ui/tabs.tsx",
      "content": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface TabsContextValue {\n\tvalue: string;\n\tonValueChange: (value: string) => void;\n}\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null);\n\nfunction useTabsContext() {\n\tconst context = React.useContext(TabsContext);\n\tif (!context) {\n\t\tthrow new Error(\"Tabs components must be used within a Tabs\");\n\t}\n\treturn context;\n}\n\ninterface TabsProps extends React.ComponentProps<\"div\"> {\n\tvalue?: string;\n\tdefaultValue?: string;\n\tonValueChange?: (value: string) => void;\n\tchildren: React.ReactNode;\n}\n\nfunction Tabs({\n\tvalue: controlledValue,\n\tdefaultValue,\n\tonValueChange,\n\tclassName,\n\tchildren,\n\t...props\n}: TabsProps) {\n\tconst [uncontrolledValue, setUncontrolledValue] = React.useState(\n\t\tdefaultValue ?? \"\",\n\t);\n\tconst isControlled = controlledValue !== undefined;\n\tconst value = isControlled ? controlledValue : uncontrolledValue;\n\n\tconst handleValueChange = React.useCallback(\n\t\t(newValue: string) => {\n\t\t\tif (!isControlled) {\n\t\t\t\tsetUncontrolledValue(newValue);\n\t\t\t}\n\t\t\tonValueChange?.(newValue);\n\t\t},\n\t\t[isControlled, onValueChange],\n\t);\n\n\treturn (\n\t\t<TabsContext.Provider value={{ value, onValueChange: handleValueChange }}>\n\t\t\t<div data-slot=\"tabs\" className={cn(\"w-full\", className)} {...props}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</TabsContext.Provider>\n\t);\n}\n\ninterface TabsListProps extends React.ComponentProps<\"div\"> {\n\tchildren: React.ReactNode;\n}\n\nfunction TabsList({ className, children, ...props }: TabsListProps) {\n\treturn (\n\t\t<div\n\t\t\trole=\"tablist\"\n\t\t\tdata-slot=\"tabs-list\"\n\t\t\tclassName={cn(\n\t\t\t\t\"bg-muted text-muted-foreground inline-flex h-9 items-center justify-center rounded-lg p-1\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n\ninterface TabsTriggerProps extends React.ComponentProps<\"button\"> {\n\tvalue: string;\n\tchildren: React.ReactNode;\n}\n\nfunction TabsTrigger({\n\tclassName,\n\tvalue,\n\tchildren,\n\t...props\n}: TabsTriggerProps) {\n\tconst { value: selectedValue, onValueChange } = useTabsContext();\n\tconst isActive = selectedValue === value;\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\trole=\"tab\"\n\t\t\taria-selected={isActive}\n\t\t\tdata-state={isActive ? \"active\" : \"inactive\"}\n\t\t\tdata-slot=\"tabs-trigger\"\n\t\t\tonClick={() => onValueChange(value)}\n\t\t\tclassName={cn(\n\t\t\t\t\"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium outline-none transition-all\",\n\t\t\t\t\"focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n\t\t\t\t\"disabled:pointer-events-none disabled:opacity-50\",\n\t\t\t\tisActive\n\t\t\t\t\t? \"bg-background text-foreground shadow\"\n\t\t\t\t\t: \"hover:bg-background/50 hover:text-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</button>\n\t);\n}\n\ninterface TabsContentProps extends React.ComponentProps<\"div\"> {\n\tvalue: string;\n\tchildren: React.ReactNode;\n}\n\nfunction TabsContent({\n\tclassName,\n\tvalue,\n\tchildren,\n\t...props\n}: TabsContentProps) {\n\tconst { value: selectedValue } = useTabsContext();\n\n\tif (selectedValue !== value) return null;\n\n\treturn (\n\t\t<div\n\t\t\trole=\"tabpanel\"\n\t\t\tdata-slot=\"tabs-content\"\n\t\t\tclassName={cn(\"mt-2 outline-none\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}