{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"animated-tabs","title":"Animated Tabs","description":"Tabs on Radix with an underline or pill indicator that slides to the active tab; keyboard and screen-reader ready.","dependencies":[],"registryDependencies":["https://ward.so/r/tabs.json"],"files":[{"path":"registry/ward/AnimatedTabs.tsx","content":"\"use client\";\nimport { useState, type CSSProperties } from \"react\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/registry/ward/ui/tabs\";\nimport \"./styles/animated-tabs.css\";\nconst tabs = [{ label: \"Overview\", content: \"A clear summary keeps the next step visible.\" }, { label: \"Activity\", content: \"Recent changes stay close to the work.\" }, { label: \"Details\", content: \"Supporting information appears when needed.\" }];\nexport default function AnimatedTabs({ variant = \"Underline\" }: { variant?: string }) {\n  const [active, setActive] = useState(tabs[0].label);\n  const pill = variant === \"Pill\";\n  const style = { \"--active\": tabs.findIndex(tab => tab.label === active), \"--count\": tabs.length } as CSSProperties;\n  return <Tabs value={active} onValueChange={setActive} className=\"ward-tabs\" data-variant={pill ? \"pill\" : \"underline\"}>\n    <TabsList variant={pill ? \"default\" : \"line\"} className=\"ward-tabs-list\" style={style} aria-label=\"Example sections\">{tabs.map(tab => <TabsTrigger key={tab.label} value={tab.label}>{tab.label}</TabsTrigger>)}</TabsList>\n    {tabs.map((tab, index) => <TabsContent key={tab.label} value={tab.label} className=\"ward-tabs-panel\"><span>0{index + 1} / 0{tabs.length}</span><h3>{tab.label}</h3><p>{tab.content}</p></TabsContent>)}\n  </Tabs>;\n}\n","type":"registry:component","target":"components/ward/AnimatedTabs.tsx"},{"path":"registry/ward/styles/animated-tabs.css","content":".ward-tabs { width: min(100%, 560px); margin: auto; color: var(--foreground); }\n.ward-tabs-list { position: relative; display: grid; grid-template-columns: repeat(var(--count), minmax(0, 1fr)); width: 100%; }\n.ward-tabs-list::before { position: absolute; left: 0; width: calc(100% / var(--count)); content: \"\"; transform: translateX(calc(var(--active) * 100%)); transition: transform 200ms cubic-bezier(.2, 0, 0, 1); }\n.ward-tabs[data-variant=\"underline\"] .ward-tabs-list { border-bottom: 1px solid var(--border); }\n.ward-tabs[data-variant=\"underline\"] .ward-tabs-list::before { bottom: -1px; height: 2px; border-radius: 2px; background: var(--foreground); }\n.ward-tabs[data-variant=\"pill\"] .ward-tabs-list { height: 36px; padding: 4px; border-radius: 999px; background: var(--secondary); }\n.ward-tabs[data-variant=\"pill\"] .ward-tabs-list::before { top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--count)); border-radius: 999px; background: var(--background); box-shadow: 0 0 0 1px var(--border); }\n.ward-tabs [data-slot=\"tabs-trigger\"] { position: relative; z-index: 1; height: 100%; border: 0; border-radius: 999px; background: transparent; box-shadow: none; color: var(--muted-foreground); font-size: 13px; }\n.ward-tabs [data-slot=\"tabs-trigger\"][data-state=\"active\"] { background: transparent; box-shadow: none; color: var(--foreground); }\n.ward-tabs [data-slot=\"tabs-trigger\"]::after { display: none; }\n.ward-tabs-panel { min-height: 170px; padding: 24px 4px; }\n.ward-tabs-panel span { color: var(--muted-foreground); font: 11px/1.4 var(--font-mono, ui-monospace, monospace); letter-spacing: .08em; }\n.ward-tabs-panel h3 { margin: 12px 0 4px; font-size: 16px; font-weight: 500; }\n.ward-tabs-panel p { margin: 0; color: var(--muted-foreground); font-size: 14px; line-height: 1.6; }\n@media (prefers-reduced-motion: reduce) { .ward-tabs-list::before { transition: none; } }\n","type":"registry:file","target":"components/ward/styles/animated-tabs.css"}],"meta":{"variants":["Underline","Pill"],"version":"1.1.0","source":null,"access":"free","new":true},"categories":["ui"],"type":"registry:component"}