{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs-15",
  "title": "Pill track",
  "description": "Rounded pill triggers in a bordered track with cross-fading mood boards.",
  "dependencies": [],
  "registryDependencies": [
    "tabs"
  ],
  "files": [
    {
      "path": "registry/patterns/tabs/tabs-15.tsx",
      "content": "'use client'\n\nimport { useState } from 'react'\n\nimport { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'\nimport { cn } from '@/lib/utils'\n\nconst moods = [\n  {\n    value: 'neon',\n    label: 'Neon',\n    caption: 'Electric gradients and late-night glow.',\n    src: 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1287&auto=format&fit=crop',\n  },\n  {\n    value: 'film',\n    label: 'Film',\n    caption: 'Grain, warmth, and frames that breathe.',\n    src: 'https://images.unsplash.com/photo-1516035069371-29a1b244cc32?q=80&w=1287&auto=format&fit=crop',\n  },\n  {\n    value: 'ink',\n    label: 'Ink',\n    caption: 'Brush strokes on paper, slow and deliberate.',\n    src: 'https://images.unsplash.com/photo-1513364776144-60967b0f800f?q=80&w=1171&auto=format&fit=crop',\n  },\n  {\n    value: 'clay',\n    label: 'Clay',\n    caption: 'Tactile forms shaped by hand and time.',\n    src: 'https://images.unsplash.com/photo-1578662996442-48f60103fc96?q=80&w=1170&auto=format&fit=crop',\n  },\n] as const\n\nexport function Tabs15() {\n  const [activeTab, setActiveTab] =\n    useState<(typeof moods)[number]['value']>('neon')\n\n  return (\n    <Tabs\n      value={activeTab}\n      onValueChange={(value) =>\n        setActiveTab(value as (typeof moods)[number]['value'])\n      }\n      className=\"w-full max-w-md gap-4\"\n    >\n      <TabsList className=\"bg-muted/40 h-auto gap-1 rounded-full border p-1 shadow-none\">\n        {moods.map((mood) => (\n          <TabsTrigger\n            key={mood.value}\n            value={mood.value}\n            className=\"text-muted-foreground hover:text-foreground data-active:text-foreground data-active:bg-background dark:data-active:bg-background dark:data-active:text-foreground h-auto flex-none gap-1.5 rounded-full px-3 py-1 text-xs font-medium after:hidden data-active:shadow-sm dark:data-active:border-transparent\"\n          >\n            {mood.label}\n          </TabsTrigger>\n        ))}\n      </TabsList>\n\n      <div className=\"relative aspect-[4/3] w-full overflow-hidden rounded-2xl border\">\n        {moods.map((mood) => (\n          <div\n            key={mood.value}\n            className={cn(\n              'absolute inset-0 transition-opacity duration-500',\n              mood.value === activeTab ? 'opacity-100' : 'opacity-0',\n            )}\n          >\n            <img\n              src={mood.src}\n              alt={mood.label}\n              loading={mood.value === 'neon' ? 'eager' : 'lazy'}\n              decoding=\"async\"\n              className=\"absolute inset-0 size-full object-cover\"\n            />\n            <div className=\"absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent p-4\">\n              <p className=\"text-sm font-medium text-white\">{mood.label}</p>\n              <p className=\"text-xs text-white/80\">{mood.caption}</p>\n            </div>\n          </div>\n        ))}\n      </div>\n    </Tabs>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/tabs/tabs-15.tsx"
    }
  ],
  "type": "registry:block"
}