Carousel

1import { cn } from "@/lib/utils";2import { Button } from "@/components/ui/button";3import { Carousel as CarouselPrimitive } from "@sprawlify/solid/carousel";4import { ChevronLeftIcon, ChevronRightIcon } from "lucide-solid";5import type { ComponentProps } from "solid-js";6import { For, splitProps } from "solid-js";78function Carousel(props: ComponentProps<typeof CarouselPrimitive.Root>) {9  const [local, others] = splitProps(props, ["class", "spacing", "loop", "page"]);1011  const spacing = () => local.spacing ?? "1rem";12  const loop = () => local.loop ?? false;1314  return (15    <CarouselPrimitive.Root16      data-slot="carousel"17      spacing={spacing()}18      loop={loop()}19      page={local.page}20      class={cn(21        "relative flex w-full flex-col gap-4 data-[orientation=vertical]:flex-row",22        local.class,23      )}24      {...others}25    />26  );27}2829function CarouselContent(props: ComponentProps<typeof CarouselPrimitive.ItemGroup>) {30  const [local, others] = splitProps(props, ["class"]);3132  return (33    <CarouselPrimitive.ItemGroup34      data-slot="carousel-content"35      class={cn(36        "flex min-w-0 flex-1 overflow-hidden rounded-lg [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",37        local.class,38      )}39      {...others}40    />41  );42}4344function CarouselItem(props: ComponentProps<typeof CarouselPrimitive.Item>) {45  const [local, others] = splitProps(props, ["class"]);4647  return (48    <CarouselPrimitive.Item49      data-slot="carousel-item"50      class={cn("min-w-0 shrink-0 grow-0 basis-full", local.class)}51      {...others}52    />53  );54}5556function CarouselControl(props: ComponentProps<typeof CarouselPrimitive.Control>) {57  const [local, others] = splitProps(props, ["class"]);5859  return (60    <CarouselPrimitive.Control61      data-slot="carousel-control"62      class={cn(63        "flex items-center justify-center gap-2 data-[orientation=vertical]:flex-col",64        local.class,65      )}66      {...others}67    />68  );69}7071function CarouselPrevious(props: ComponentProps<typeof Button>) {72  const [local, others] = splitProps(props, ["class", "children", "variant", "size"]);7374  const variant = () => local.variant ?? "outline";75  const size = () => local.size ?? "icon-sm";7677  return (78    <CarouselPrimitive.PrevTrigger79      asChild={(triggerProps) => (80        <Button81          data-slot="carousel-previous"82          variant={variant()}83          size={size()}84          class={cn("touch-manipulation rounded-full disabled:opacity-50", local.class)}85          {...triggerProps()}86          {...others}87        >88          {local.children ?? <ChevronLeftIcon class="cn-rtl-flip size-4" />}89          <span class="sr-only">Previous slide</span>90        </Button>91      )}92    />93  );94}9596function CarouselNext(props: ComponentProps<typeof Button>) {97  const [local, others] = splitProps(props, ["class", "children", "variant", "size"]);9899  const variant = () => local.variant ?? "outline";100  const size = () => local.size ?? "icon-sm";101102  return (103    <CarouselPrimitive.NextTrigger104      asChild={(triggerProps) => (105        <Button106          data-slot="carousel-next"107          variant={variant()}108          size={size()}109          class={cn("touch-manipulation rounded-full disabled:opacity-50", local.class)}110          {...triggerProps()}111          {...others}112        >113          {local.children ?? <ChevronRightIcon class="cn-rtl-flip size-4" />}114          <span class="sr-only">Next slide</span>115        </Button>116      )}117    />118  );119}120121function CarouselIndicatorGroup(props: ComponentProps<typeof CarouselPrimitive.IndicatorGroup>) {122  const [local, others] = splitProps(props, ["class"]);123124  return (125    <CarouselPrimitive.IndicatorGroup126      data-slot="carousel-indicator-group"127      class={cn("flex justify-center gap-2 data-[orientation=vertical]:flex-col", local.class)}128      {...others}129    />130  );131}132133function CarouselIndicator(props: ComponentProps<typeof CarouselPrimitive.Indicator>) {134  const [local, others] = splitProps(props, ["class"]);135136  return (137    <CarouselPrimitive.Indicator138      data-slot="carousel-indicator"139      class={cn(140        "size-2.5 cursor-pointer rounded-full border-0 bg-muted-foreground/30 p-0 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-current:bg-primary",141        local.class,142      )}143      {...others}144    />145  );146}147148function CarouselIndicators(149  props: Omit<ComponentProps<typeof CarouselPrimitive.Indicator>, "index">,150) {151  return (152    <CarouselPrimitive.Context>153      {(api) => (154        <CarouselIndicatorGroup>155          <For each={api().pageSnapPoints}>156            {(_, index) => <CarouselIndicator index={index()} {...props} />}157          </For>158        </CarouselIndicatorGroup>159      )}160    </CarouselPrimitive.Context>161  );162}163164const CarouselAutoplayTrigger = CarouselPrimitive.AutoplayTrigger;165const CarouselContext = CarouselPrimitive.Context;166const CarouselRootProvider = CarouselPrimitive.RootProvider;167168export {169  Carousel,170  CarouselContent,171  CarouselItem,172  CarouselControl,173  CarouselPrevious,174  CarouselNext,175  CarouselIndicatorGroup,176  CarouselIndicator,177  CarouselIndicators,178  CarouselAutoplayTrigger,179  CarouselContext,180  CarouselRootProvider,181};182183export { useCarousel, useCarouselContext } from "@sprawlify/solid/carousel";184