{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "carousel-api-example",
  "title": "Carousel Api",
  "description": "carousel-api-example",
  "dependencies": [
    "react-aria-components",
    "cn"
  ],
  "registryDependencies": [
    "https://intentui.com/r/card",
    "https://intentui.com/r/carousel"
  ],
  "files": [
    {
      "path": "src/components/examples/media/carousel/carousel-api-example.tsx",
      "content": "'use client'\n\nimport { useEffect, useState } from 'react'\nimport { Button } from 'react-aria-components/Button'\nimport { twJoin } from 'cn'\nimport { Card, CardContent } from '@/components/ui/card'\nimport {\n  Carousel,\n  type CarouselApi,\n  CarouselButton,\n  CarouselContent,\n  CarouselItem,\n} from '@/components/ui/carousel'\n\nexport default function CarouselDApiDemo() {\n  const [api, setApi] = useState<CarouselApi>()\n  const [current, setCurrent] = useState(0)\n  const [count, setCount] = useState(0)\n\n  useEffect(() => {\n    if (!api) {\n      return\n    }\n\n    setCount(api.scrollSnapList().length)\n    setCurrent(api.selectedScrollSnap() + 1)\n    api.on('select', () => {\n      setCurrent(api.selectedScrollSnap() + 1)\n    })\n  }, [api])\n\n  const handleSelect = (index: number) => {\n    if (api) {\n      api.scrollTo(index)\n      setCurrent(index + 1)\n    }\n  }\n\n  return (\n    <Carousel setApi={setApi} className=\"w-full max-w-sm\">\n      <CarouselContent>\n        {Array.from({ length: 10 }, (_, id) => ({ id: id + 1 })).map(({ id }) => (\n          <CarouselItem key={id}>\n            <Card>\n              <CardContent className=\"flex aspect-square h-40 items-center justify-center p-6\">\n                <span className=\"font-semibold text-4xl\">{id}</span>\n              </CardContent>\n            </Card>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <div className=\"mt-4 flex items-center justify-between\">\n        <div className=\"flex gap-1 py-2 text-center text-muted-fg text-sm\">\n          {Array.from({ length: 10 }).map((_, index) => (\n            <Button\n              className={twJoin(\n                'rounded-xl transition focus:outline-hidden',\n                current === index + 1\n                  ? 'h-3 w-5 bg-primary transition-all hover:bg-primary/80'\n                  : 'h-3 w-3 bg-fg/10 hover:bg-fg/15'\n              )}\n              aria-label={`Slide ${current} of ${count}`}\n              onPress={() => handleSelect(index)}\n              key={index}\n            />\n          ))}\n        </div>\n\n        <div className=\"space-x-2\">\n          <CarouselButton segment=\"previous\" />\n          <CarouselButton segment=\"next\" />\n        </div>\n      </div>\n    </Carousel>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/carousel-api-example/page.tsx"
    }
  ],
  "type": "registry:page"
}