{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "carousel-scale",
  "title": "Carousel Scale",
  "description": "A centred looping carousel where the middle slide is full size and the slides beside it shrink as they move.",
  "dependencies": [
    "embla-carousel-react@^8.6.0",
    "embla-carousel@^8.6.0",
    "lucide-react"
  ],
  "registryDependencies": [
    "@tealmac/carousel-kit"
  ],
  "files": [
    {
      "path": "registry/tealmac/carousel-scale.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Carousel,\n  CarouselDots,\n  CarouselEffect,\n  CarouselNext,\n  CarouselPrevious,\n  CarouselSlide,\n  CarouselTrack,\n  CarouselViewport,\n  useCarousel,\n  type CarouselApi,\n  type CarouselItem,\n} from \"@/registry/tealmac/carousel-kit\"\n\nfunction ScaleEffect({ shrink }: { shrink: number }) {\n  const { reducedMotion } = useCarousel()\n  return (\n    <CarouselEffect\n      apply={(node, distance) => {\n        const d = Math.min(Math.abs(distance), 1)\n        node.style.setProperty(\n          \"--scale\",\n          reducedMotion ? \"1\" : String(1 - d * shrink)\n        )\n        node.dataset.centered = d < 0.35 ? \"true\" : \"false\"\n      }}\n    />\n  )\n}\n\nexport interface CarouselScaleProps {\n  items: CarouselItem[]\n  label: string\n  /** How much the slides beside the centre shrink (0 to 1). @default 0.2 */\n  shrink?: number\n  loop?: boolean\n  className?: string\n  /** Called with the snap index whenever the selection changes. */\n  onIndexChange?: (index: number) => void\n  /** Receive the Embla API, for controls placed outside the carousel. */\n  setApi?: (api: CarouselApi) => void\n}\n\n/** The centred slide is full size and the others shrink. Sizes ease as it scrolls; opacity never changes, so text keeps its contrast; with reduced motion the sizes stay equal. */\nexport function CarouselScale({\n  items,\n  label,\n  shrink = 0.2,\n  loop = true,\n  className,\n  onIndexChange,\n  setApi,\n}: CarouselScaleProps) {\n  return (\n    <Carousel\n      label={label}\n      onIndexChange={onIndexChange}\n      setApi={setApi}\n      opts={{ loop, align: \"center\" }}\n      className={className}\n    >\n      <ScaleEffect shrink={shrink} />\n      <CarouselViewport className=\"py-6\">\n        <CarouselTrack>\n          {items.map((item) => (\n            <CarouselSlide\n              key={item.id}\n              className={cn(\n                \"basis-3/4 px-2 sm:basis-1/2\",\n                \"[transform:scale(var(--scale,1))] will-change-transform\"\n              )}\n            >\n              {item.content}\n            </CarouselSlide>\n          ))}\n        </CarouselTrack>\n      </CarouselViewport>\n      <div className=\"flex items-center justify-between gap-2\">\n        <CarouselPrevious />\n        <CarouselDots />\n        <CarouselNext />\n      </div>\n    </Carousel>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}