{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "native-tabs-carbon",
  "type": "registry:component",
  "title": "Native Tabs",
  "description": "A sleek tabs component with a smooth sliding background indicator using Framer Motion layout animations.",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-carbon/src/components/native/native-tabs-carbon.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { motion } from \"framer-motion\";\nimport { useState } from \"react\";\n\ninterface NativeTabsProps {\n  items: {\n    id: string;\n    label: string;\n    content: React.ReactNode;\n  }[];\n  defaultValue?: string;\n  className?: string;\n}\n\nexport function NativeTabs({\n  items,\n  defaultValue,\n  className,\n}: NativeTabsProps) {\n  const [activeTab, setActiveTab] = useState(defaultValue || items[0].id);\n\n  return (\n    <div className={cn(\"w-full max-w-md\", className)}>\n      <div className=\"relative flex w-full items-center gap-1 rounded-xl bg-muted/50 p-1 border border-black/5 dark:border-white/5\">\n        {items.map((tab) => {\n          const isActive = activeTab === tab.id;\n          return (\n            <button\n              key={tab.id}\n              onClick={() => setActiveTab(tab.id)}\n              className={cn(\n                \"relative z-10 flex-1 rounded-lg px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n                isActive\n                  ? \"text-foreground\"\n                  : \"text-muted-foreground hover:text-foreground\"\n              )}\n            >\n              {isActive && (\n                <motion.div\n                  layoutId=\"active-tab\"\n                  className=\"absolute inset-0 z-[-1] rounded-lg bg-background shadow-sm border border-black/5 dark:border-white/5\"\n                  transition={{ type: \"spring\", bounce: 0.2, duration: 0.6 }}\n                />\n              )}\n              {tab.label}\n            </button>\n          );\n        })}\n      </div>\n      <div className=\"mt-4 overflow-hidden rounded-xl border bg-background p-6 shadow-sm\">\n        <motion.div\n          key={activeTab}\n          initial={{ opacity: 0, x: -10 }}\n          animate={{ opacity: 1, x: 0 }}\n          exit={{ opacity: 0, x: 10 }}\n          transition={{ duration: 0.2 }}\n        >\n          {items.find((item) => item.id === activeTab)?.content}\n        </motion.div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/native-tabs-carbon.tsx"
    }
  ]
}