import type { Accessor, ComponentProps, JSX, ValidComponent } from "solid-js" import { createContext, createEffect, createSignal, mergeProps, onCleanup, splitProps, useContext } from "solid-js" import type { PolymorphicProps } from "@kobalte/core/polymorphic" import type { EmblaCarouselType, EmblaOptionsType, EmblaPluginType } from "embla-carousel" import createEmblaCarousel from "embla-carousel-solid" import { ChevronLeft, ChevronRight } from "lucide-solid" import { cn } from "@/lib/utils" import { Button, type ButtonProps } from "@/components/ui/button" type CarouselApi = EmblaCarouselType | undefined type CarouselOptions = EmblaOptionsType type CarouselPlugin = EmblaPluginType type CarouselProps = { opts?: CarouselOptions plugins?: CarouselPlugin[] orientation?: "horizontal" | "vertical" setApi?: (api: CarouselApi) => void } type CarouselContextProps = { carouselRef: ReturnType[0] api: ReturnType[1] scrollPrev: () => void scrollNext: () => void canScrollPrev: Accessor canScrollNext: Accessor } & CarouselProps const CarouselContext = createContext(null) function useCarousel() { const context = useContext(CarouselContext) if (!context) { throw new Error("useCarousel must be used within a ") } return context } type CarouselRootProps = ComponentProps & CarouselProps & { class?: string | undefined children?: JSX.Element } const Carousel = ( rawProps: PolymorphicProps> ) => { const props = mergeProps({ orientation: "horizontal" as const }, rawProps) const [local, others] = splitProps(props as CarouselRootProps, [ "class", "children", "opts", "plugins", "orientation", "setApi" ]) const [carouselRef, api] = createEmblaCarousel( () => ({ ...local.opts, axis: local.orientation === "horizontal" ? "x" : "y" }), () => local.plugins ?? [] ) const [canScrollPrev, setCanScrollPrev] = createSignal(false) const [canScrollNext, setCanScrollNext] = createSignal(false) const onSelect = (emblaApi: EmblaCarouselType) => { setCanScrollPrev(emblaApi.canScrollPrev()) setCanScrollNext(emblaApi.canScrollNext()) } const scrollPrev = () => { api()?.scrollPrev() } const scrollNext = () => { api()?.scrollNext() } const handleKeyDown = (event: KeyboardEvent) => { if (event.key === "ArrowLeft") { event.preventDefault() scrollPrev() } else if (event.key === "ArrowRight") { event.preventDefault() scrollNext() } } createEffect(() => { const emblaApi = api() if (!emblaApi || !local.setApi) return local.setApi(emblaApi) }) createEffect(() => { const emblaApi = api() if (!emblaApi) return onSelect(emblaApi) emblaApi.on("reInit", onSelect) emblaApi.on("select", onSelect) onCleanup(() => { emblaApi.off("select", onSelect) }) }) return (

{local.children}

) } type CarouselContentProps = ComponentProps & { class?: string | undefined } const CarouselContent = ( props: PolymorphicProps> ) => { const [local, others] = splitProps(props as CarouselContentProps, ["class"]) const { carouselRef, orientation } = useCarousel() return (

) } type CarouselItemProps = ComponentProps & { class?: string | undefined } const CarouselItem = ( props: PolymorphicProps> ) => { const [local, others] = splitProps(props as CarouselItemProps, ["class"]) const { orientation } = useCarousel() return (

) } type CarouselPreviousProps = ButtonProps & { class?: string | undefined } const CarouselPrevious = ( rawProps: PolymorphicProps> ) => { const props = mergeProps({ variant: "outline" as const, size: "icon-sm" as const }, rawProps) const [local, others] = splitProps(props as CarouselPreviousProps, ["class", "variant", "size"]) const { orientation, scrollPrev, canScrollPrev } = useCarousel() return ( ) } type CarouselNextProps = ButtonProps & { class?: string | undefined } const CarouselNext = ( rawProps: PolymorphicProps> ) => { const props = mergeProps({ variant: "outline" as const, size: "icon-sm" as const }, rawProps) const [local, others] = splitProps(props as CarouselNextProps, ["class", "variant", "size"]) const { orientation, scrollNext, canScrollNext } = useCarousel() return ( ) } export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, useCarousel }