{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "native-tabs-shadcnui",
  "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-shadcn/src/components/native/native-tabs-shadcnui.tsx",
      "content": "\"use client\";\n\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport { cn } from \"@/lib/utils\";\nimport { motion, MotionConfig } from \"framer-motion\";\nimport { useId, 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 pillLayoutId = useId();\n  const [activeTab, setActiveTab] = useState(defaultValue || items[0].id);\n  const [direction, setDirection] = useState(1);\n\n  const handleValueChange = (value: string) => {\n    const oldIndex = items.findIndex((item) => item.id === activeTab);\n    const newIndex = items.findIndex((item) => item.id === value);\n    setDirection(newIndex >= oldIndex ? 1 : -1);\n    setActiveTab(value);\n  };\n\n  return (\n    <MotionConfig reducedMotion=\"user\">\n      <Tabs\n        value={activeTab}\n        onValueChange={handleValueChange}\n        className={cn(\"w-full max-w-md\", className)}\n      >\n        <TabsList className=\"relative flex h-auto 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              <TabsTrigger\n                key={tab.id}\n                value={tab.id}\n                className=\"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 data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground data-[state=inactive]:hover:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none\"\n              >\n                {isActive && (\n                  <motion.div\n                    layoutId={pillLayoutId}\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\", duration: 0.45, bounce: 0.15 }}\n                  />\n                )}\n                {tab.label}\n              </TabsTrigger>\n            );\n          })}\n        </TabsList>\n        {items.map((item) => (\n          <TabsContent\n            key={item.id}\n            value={item.id}\n            className=\"mt-4 overflow-hidden rounded-xl border bg-background p-6 shadow-sm\"\n          >\n            <motion.div\n              initial={{ opacity: 0, x: direction * 10 }}\n              animate={{ opacity: 1, x: 0 }}\n              transition={{ duration: 0.2, ease: [0.23, 1, 0.32, 1] }}\n            >\n              {item.content}\n            </motion.div>\n          </TabsContent>\n        ))}\n      </Tabs>\n    </MotionConfig>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/native-tabs-shadcnui.tsx"
    }
  ]
}