{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "carousel",
  "type": "registry:ui",
  "title": "Carousel",
  "description": "A carousel component",
  "dependencies": [
    "solid-js",
    "embla-carousel-solid"
  ],
  "registryDependencies": [
    "https://solid-ui.com/r/button.json"
  ],
  "files": [
    {
      "path": "src/registry/ui/carousel.tsx",
      "content": "import type { Accessor, Component, ComponentProps, VoidProps } from \"solid-js\"\nimport {\n  createContext,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  splitProps,\n  useContext\n} from \"solid-js\"\n\nimport type { CreateEmblaCarouselType } from \"embla-carousel-solid\"\nimport createEmblaCarousel from \"embla-carousel-solid\"\n\nimport { cn } from \"~/lib/utils\"\nimport type { ButtonProps } from \"~/registry/ui/button\"\nimport { Button } from \"~/registry/ui/button\"\n\nexport type CarouselApi = CreateEmblaCarouselType[1]\n\ntype UseCarouselParameters = Parameters<typeof createEmblaCarousel>\ntype CarouselOptions = NonNullable<UseCarouselParameters[0]>\ntype CarouselPlugin = NonNullable<UseCarouselParameters[1]>\n\ntype CarouselProps = {\n  opts?: ReturnType<CarouselOptions>\n  plugins?: ReturnType<CarouselPlugin>\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof createEmblaCarousel>[0]\n  api: ReturnType<typeof createEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: Accessor<boolean>\n  canScrollNext: Accessor<boolean>\n} & CarouselProps\n\nconst CarouselContext = createContext<Accessor<CarouselContextProps> | null>(null)\n\nconst useCarousel = () => {\n  const context = useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\n  }\n\n  return context()\n}\n\nconst Carousel: Component<CarouselProps & ComponentProps<\"div\">> = (rawProps) => {\n  const props = mergeProps<(CarouselProps & ComponentProps<\"div\">)[]>(\n    { orientation: \"horizontal\" },\n    rawProps\n  )\n\n  const [local, others] = splitProps(props, [\n    \"orientation\",\n    \"opts\",\n    \"setApi\",\n    \"plugins\",\n    \"class\",\n    \"children\"\n  ])\n\n  const [carouselRef, api] = createEmblaCarousel(\n    () => ({\n      ...local.opts,\n      axis: local.orientation === \"horizontal\" ? \"x\" : \"y\"\n    }),\n    () => (local.plugins === undefined ? [] : local.plugins)\n  )\n  const [canScrollPrev, setCanScrollPrev] = createSignal(false)\n  const [canScrollNext, setCanScrollNext] = createSignal(false)\n\n  const onSelect = (api: NonNullable<ReturnType<CarouselApi>>) => {\n    setCanScrollPrev(api.canScrollPrev())\n    setCanScrollNext(api.canScrollNext())\n  }\n\n  const scrollPrev = () => {\n    api()?.scrollPrev()\n  }\n\n  const scrollNext = () => {\n    api()?.scrollNext()\n  }\n\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === \"ArrowLeft\") {\n      event.preventDefault()\n      scrollPrev()\n    } else if (event.key === \"ArrowRight\") {\n      event.preventDefault()\n      scrollNext()\n    }\n  }\n\n  createEffect(() => {\n    if (!api() || !local.setApi) {\n      return\n    }\n    local.setApi(api)\n  })\n\n  createEffect(() => {\n    if (!api()) {\n      return\n    }\n\n    onSelect(api()!)\n    api()!.on(\"reInit\", onSelect)\n    api()!.on(\"select\", onSelect)\n\n    return () => {\n      api()?.off(\"select\", onSelect)\n    }\n  })\n\n  const value = createMemo(\n    () =>\n      ({\n        carouselRef,\n        api,\n        opts: local.opts,\n        orientation: local.orientation || (local.opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext\n      }) satisfies CarouselContextProps\n  )\n\n  return (\n    <CarouselContext.Provider value={value}>\n      <div\n        onKeyDown={handleKeyDown}\n        class={cn(\"relative\", local.class)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        {...others}\n      >\n        {local.children}\n      </div>\n    </CarouselContext.Provider>\n  )\n}\n\nconst CarouselContent: Component<ComponentProps<\"div\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div ref={carouselRef} class=\"overflow-hidden\">\n      <div\n        class={cn(\"flex\", orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\", local.class)}\n        {...others}\n      />\n    </div>\n  )\n}\n\nconst CarouselItem: Component<ComponentProps<\"div\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  const { orientation } = useCarousel()\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      class={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        local.class\n      )}\n      {...others}\n    />\n  )\n}\n\ntype CarouselButtonProps = VoidProps<ButtonProps>\n\nconst CarouselPrevious: Component<CarouselButtonProps> = (rawProps) => {\n  const props = mergeProps<CarouselButtonProps[]>({ variant: \"outline\", size: \"icon\" }, rawProps)\n  const [local, others] = splitProps(props, [\"class\", \"variant\", \"size\"])\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <Button\n      variant={local.variant}\n      size={local.size}\n      class={cn(\n        \"absolute size-8 touch-manipulation rounded-full\",\n        orientation === \"horizontal\"\n          ? \"-left-12 top-1/2 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        local.class\n      )}\n      disabled={!canScrollPrev()}\n      onClick={scrollPrev}\n      {...others}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"size-4\"\n      >\n        <path d=\"M5 12l14 0\" />\n        <path d=\"M5 12l6 6\" />\n        <path d=\"M5 12l6 -6\" />\n      </svg>\n      <span class=\"sr-only\">Previous slide</span>\n    </Button>\n  )\n}\n\nconst CarouselNext: Component<CarouselButtonProps> = (rawProps) => {\n  const props = mergeProps<CarouselButtonProps[]>({ variant: \"outline\", size: \"icon\" }, rawProps)\n  const [local, others] = splitProps(props, [\"class\", \"variant\", \"size\"])\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <Button\n      variant={local.variant}\n      size={local.size}\n      class={cn(\n        \"absolute size-8 touch-manipulation rounded-full\",\n        orientation === \"horizontal\"\n          ? \"-right-12 top-1/2 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        local.class\n      )}\n      disabled={!canScrollNext()}\n      onClick={scrollNext}\n      {...others}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"size-4\"\n      >\n        <path d=\"M5 12l14 0\" />\n        <path d=\"M13 18l6 -6\" />\n        <path d=\"M13 6l6 6\" />\n      </svg>\n      <span class=\"sr-only\">Next slide</span>\n    </Button>\n  )\n}\n\nexport { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext }\n",
      "type": "registry:ui"
    }
  ]
}