{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "carousel",
  "type": "registry:ui",
  "title": "Carousel",
  "description": "Scroll snap React carousel with previous and next buttons, arrow key support and a labelled region. Shows one, two or three slides by breakpoint, no library.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/icon-button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/carousel.tsx",
      "type": "registry:ui",
      "target": "components/ui/carousel.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport { IconButton } from \"@/components/ui/icon-button\"\n\nfunction Carousel({\n  children,\n  className,\n  label = \"Carousel\",\n}: {\n  children: React.ReactNode\n  className?: string\n  label?: string\n}) {\n  const ref = React.useRef<HTMLDivElement>(null)\n  const scroll = (dir: -1 | 1) => {\n    const el = ref.current\n    if (!el) return\n    el.scrollBy({ left: dir * el.clientWidth * 0.85, behavior: \"smooth\" })\n  }\n  return (\n    <div data-slot=\"carousel\" className={cn(\"relative\", className)}>\n      <div className=\"mb-2 flex justify-end gap-1\">\n        <IconButton type=\"button\" size=\"icon-sm\" variant=\"outline\" aria-label=\"Previous slide\" onClick={() => scroll(-1)}>\n          <ChevronLeftIcon />\n        </IconButton>\n        <IconButton type=\"button\" size=\"icon-sm\" variant=\"outline\" aria-label=\"Next slide\" onClick={() => scroll(1)}>\n          <ChevronRightIcon />\n        </IconButton>\n      </div>\n      <div\n        ref={ref}\n        role=\"region\"\n        aria-label={label}\n        tabIndex={0}\n        className=\"flex snap-x snap-mandatory gap-3 overflow-x-auto pb-2 outline-none focus-visible:ring-2 focus-visible:ring-accent [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\"\n        onKeyDown={(e) => {\n          if (e.key === \"ArrowRight\") scroll(1)\n          if (e.key === \"ArrowLeft\") scroll(-1)\n        }}\n      >\n        {React.Children.map(children, (child) => (\n          <div className=\"min-w-[80%] snap-start sm:min-w-[45%] lg:min-w-[30%]\">{child}</div>\n        ))}\n      </div>\n    </div>\n  )\n}\nexport { Carousel }\n"
    }
  ]
}