{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs",
  "title": "Tabs",
  "description": "A set of layered sections of content—known as tab panels.",
  "dependencies": [
    "@base-ui-components/react",
    "motion",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://optics.agusmayol.com.ar/r/highlight.json",
    "https://optics.agusmayol.com.ar/r/auto-height.json",
    "https://optics.agusmayol.com.ar/r/get-strict-context.json",
    "https://optics.agusmayol.com.ar/r/use-controlled-state.json",
    "https://optics.agusmayol.com.ar/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/optics/tabs.jsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Tabs as BaseTabs } from \"@base-ui/react/tabs\";\nimport { motion, AnimatePresence } from \"motion/react\";\n\nimport {\n\tHighlight,\n\tHighlightItem,\n} from \"@/registry/optics/helpers/primitives/effects/highlight\";\nimport { AutoHeight } from \"@/registry/optics/helpers/primitives/effects/auto-height\";\nimport { getStrictContext } from \"@/registry/optics/lib/get-strict-context\";\nimport { useControlledState } from \"@/registry/optics/hooks/use-controlled-state\";\nimport { cn } from \"@/registry/optics/lib/utils\";\n\n// --- Internal Primitive Logic ---\n\nconst [TabsProvider, useTabs] = getStrictContext(\"TabsContext\");\n\nconst [TabsVariantProvider, useTabsVariant] =\n\tgetStrictContext(\"TabsVariantContext\");\n\nfunction PrimitiveTabs(props = {}) {\n\tconst [value, setValue] = useControlledState({\n\t\tvalue: props?.value,\n\t\tdefaultValue: props?.defaultValue,\n\t\tonChange: props?.onValueChange,\n\t});\n\n\treturn (\n\t\t<TabsProvider value={{ value, setValue }}>\n\t\t\t<BaseTabs.Root data-slot=\"tabs\" {...props} onValueChange={setValue} />\n\t\t</TabsProvider>\n\t);\n}\n\nfunction PrimitiveTabsHighlight({\n\ttransition = { type: \"spring\", stiffness: 200, damping: 25 },\n\t...props\n} = {}) {\n\tconst { value } = useTabs();\n\n\treturn (\n\t\t<Highlight\n\t\t\tdata-slot=\"tabs-highlight\"\n\t\t\tcontrolledItems\n\t\t\tvalue={value}\n\t\t\ttransition={transition}\n\t\t\tclick={false}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction PrimitiveTabsList(props = {}) {\n\treturn <BaseTabs.List data-slot=\"tabs-list\" {...props} />;\n}\n\nfunction PrimitiveTabsHighlightItem(props = {}) {\n\treturn <HighlightItem data-slot=\"tabs-highlight-item\" {...props} />;\n}\n\nfunction PrimitiveTabsTab(props = {}) {\n\treturn <BaseTabs.Tab data-slot=\"tabs-tab\" {...props} />;\n}\n\nfunction PrimitiveTabsPanel({\n\tvalue = \"\",\n\tkeepMounted = false,\n\ttransition = { duration: 0.5, ease: \"easeInOut\" },\n\t...props\n} = {}) {\n\treturn (\n\t\t<AnimatePresence mode=\"wait\">\n\t\t\t<BaseTabs.Panel\n\t\t\t\trender={\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tdata-slot=\"tabs-panel\"\n\t\t\t\t\t\tlayout\n\t\t\t\t\t\tlayoutDependency={value}\n\t\t\t\t\t\tinitial={{ opacity: 0, filter: \"blur(4px)\" }}\n\t\t\t\t\t\tanimate={{ opacity: 1, filter: \"blur(0px)\" }}\n\t\t\t\t\t\texit={{ opacity: 0, filter: \"blur(4px)\" }}\n\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\tkeepMounted={keepMounted}\n\t\t\t\tvalue={value}\n\t\t\t/>\n\t\t</AnimatePresence>\n\t);\n}\n\nconst defaultTransition = {\n\ttype: \"spring\",\n\tstiffness: 200,\n\tdamping: 30,\n};\n\nfunction isAutoMode(props = {}) {\n\treturn !props.mode || props.mode === \"auto-height\";\n}\n\nfunction PrimitiveTabsPanels(props = {}) {\n\tconst { value } = useTabs();\n\n\tif (isAutoMode(props)) {\n\t\tconst {\n\t\t\tchildren = null,\n\t\t\ttransition = defaultTransition,\n\t\t\t...autoProps\n\t\t} = props;\n\n\t\treturn (\n\t\t\t<AutoHeight\n\t\t\t\tdata-slot=\"tabs-panels\"\n\t\t\t\tdeps={[value]}\n\t\t\t\ttransition={transition}\n\t\t\t\t{...autoProps}\n\t\t\t>\n\t\t\t\t<React.Fragment key={value}>{children}</React.Fragment>\n\t\t\t</AutoHeight>\n\t\t);\n\t}\n\n\tconst {\n\t\tchildren = null,\n\t\tstyle = {},\n\t\ttransition = defaultTransition,\n\t\t...layoutProps\n\t} = props;\n\n\treturn (\n\t\t<motion.div\n\t\t\tdata-slot=\"tabs-panels\"\n\t\t\tlayout=\"size\"\n\t\t\tlayoutDependency={value}\n\t\t\ttransition={{ layout: transition }}\n\t\t\tstyle={{ overflow: \"hidden\", ...style }}\n\t\t\t{...layoutProps}\n\t\t>\n\t\t\t<React.Fragment key={value}>{children}</React.Fragment>\n\t\t</motion.div>\n\t);\n}\n\n// --- User-Facing Components ---\n\nfunction Tabs({ className = \"\", ...props } = {}) {\n\treturn (\n\t\t<PrimitiveTabs\n\t\t\tclassName={cn(\"flex flex-col gap-2\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction TabsList({ className = \"\", variant = \"default\", ...props } = {}) {\n\tconst highlightStyles = {\n\t\tdefault:\n\t\t\t\"absolute z-0 inset-0 border border-transparent rounded-md bg-background dark:border-input dark:bg-input/30 shadow-sm\",\n\t\toutline:\n\t\t\t\"absolute z-0 inset-0 border rounded-md dark:border-input dark:bg-input/30\",\n\t\tunderline: \"absolute z-0 -bottom-0.25 left-0 right-0 h-0.5 bg-foreground\",\n\t};\n\n\tconst listStyles = {\n\t\tdefault:\n\t\t\t\"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]\",\n\t\toutline:\n\t\t\t\"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]\",\n\t\tunderline:\n\t\t\t\"inline-flex h-9 w-fit items-center justify-center gap-1 border-b border-border\",\n\t};\n\n\treturn (\n\t\t<TabsVariantProvider value={{ variant }}>\n\t\t\t<PrimitiveTabsHighlight className={highlightStyles[variant]}>\n\t\t\t\t<PrimitiveTabsList\n\t\t\t\t\tclassName={cn(listStyles[variant], className)}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</PrimitiveTabsHighlight>\n\t\t</TabsVariantProvider>\n\t);\n}\n\nfunction TabsTab({ className = \"\", value = \"\", ...props } = {}) {\n\tconst { variant } = useTabsVariant();\n\n\tconst triggerStyles = {\n\t\tdefault:\n\t\t\t\"data-[selected]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md w-full px-2 py-1 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n\t\toutline:\n\t\t\t\"data-[selected]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md w-full px-2 py-1 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n\t\tunderline:\n\t\t\t\"data-[selected]:text-foreground text-muted-foreground inline-flex h-full flex-1 items-center justify-center gap-1.5 w-full px-3 py-2 text-sm font-medium whitespace-nowrap transition-colors duration-200 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n\t};\n\n\treturn (\n\t\t<PrimitiveTabsHighlightItem value={value} className=\"flex-1\">\n\t\t\t<PrimitiveTabsTab\n\t\t\t\tvalue={value}\n\t\t\t\tclassName={cn(triggerStyles[variant], className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</PrimitiveTabsHighlightItem>\n\t);\n}\n\n// Aliases for backward compatibility\nconst TabsTrigger = TabsTab;\nconst TabsPanels = PrimitiveTabsPanels; // Original name was TabsPanels in previous version, but let's keep it consistent\nconst TabsContents = PrimitiveTabsPanels;\nconst TabsPanel = ({ className = \"\", ...props } = {}) => (\n\t<PrimitiveTabsPanel\n\t\tclassName={cn(\"flex-1 outline-none\", className)}\n\t\t{...props}\n\t/>\n);\nconst TabsContent = TabsPanel;\n\nTabs.displayName = \"Tabs\";\nTabsList.displayName = \"TabsList\";\nTabsTab.displayName = \"TabsTab\";\nTabsTrigger.displayName = \"TabsTrigger\";\nTabsPanels.displayName = \"TabsPanels\";\nTabsContents.displayName = \"TabsContents\";\nTabsPanel.displayName = \"TabsPanel\";\nTabsContent.displayName = \"TabsContent\";\n\nexport {\n\tTabs,\n\tTabsList,\n\tTabsTab,\n\tTabsTrigger,\n\tTabsPanels,\n\tTabsContents,\n\tTabsPanel,\n\tTabsContent,\n};\n",
      "type": "registry:component",
      "target": "components/optics/tabs.jsx"
    }
  ],
  "type": "registry:component"
}