Carousel

<script lang="ts">
  import EmblaCarousel from 'embla-carousel';
  import { cn } from 'cn';
  import { setCarouselContext } from './context.js';
  import type { CarouselProps } from './types.js';
  let { orientation = 'horizontal', opts, plugins, api = $bindable(), class: classProp, children, ...props }: CarouselProps = $props();
  let canScrollPrev = $state(false);
  let canScrollNext = $state(false);

  setCarouselContext({
    get api() { return api; },
    get opts() { return opts; },
    get orientation() { return orientation; },
    get canScrollPrev() { return canScrollPrev; },
    get canScrollNext() { return canScrollNext; },
    scrollPrev: () => api?.scrollPrev(),
    scrollNext: () => api?.scrollNext(),
    viewport: (node) => {
      const embla = EmblaCarousel(node, { ...opts, axis: orientation === 'horizontal' ? 'x' : 'y' }, plugins);
      const sync = () => {
        canScrollPrev = embla.canScrollPrev();
        canScrollNext = embla.canScrollNext();
      };
      sync();
      embla.on('select', sync).on('reInit', sync);
      api = embla;
      return () => {
        embla.destroy();
        api = undefined;
      };
    },
  });

  function onkeydowncapture(event: KeyboardEvent) {
    if (event.key === 'ArrowLeft') {
      event.preventDefault();
      api?.scrollPrev();
    } else if (event.key === 'ArrowRight') {
      event.preventDefault();
      api?.scrollNext();
    }
  }
</script>
<div
  {onkeydowncapture}
  class={cn('relative', classProp)}
  role="region"
  aria-roledescription="carousel"
  data-slot="carousel"
  {...props}
>
  {@render children?.()}
</div>

<script lang="ts">
  import { cn } from 'cn';
  import { useCarousel } from './context.js';
  import type { CarouselContentProps } from './types.js';
  let { class: classProp, children, ...props }: CarouselContentProps = $props();
  const carousel = useCarousel();
</script>
<div {@attach carousel.viewport} class="overflow-hidden" data-slot="carousel-content">
  <div class={cn('flex', carousel.orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', classProp)} {...props}>
    {@render children?.()}
  </div>
</div>

<script lang="ts">
  import { cn } from 'cn';
  import { useCarousel } from './context.js';
  import type { CarouselItemProps } from './types.js';
  let { class: classProp, children, ...props }: CarouselItemProps = $props();
  const carousel = useCarousel();
</script>
<div
  role="group"
  aria-roledescription="slide"
  data-slot="carousel-item"
  class={cn('min-w-0 shrink-0 grow-0 basis-full', carousel.orientation === 'horizontal' ? 'pl-4' : 'pt-4', classProp)}
  {...props}
>
  {@render children?.()}
</div>

<script lang="ts">
  import { cn } from 'cn';
  import { Button } from '../button/index.js';
  import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
  import { useCarousel } from './context.js';
  import type { CarouselNextProps } from './types.js';
  let { class: classProp, variant = 'outline', size = 'icon-sm', ...props }: CarouselNextProps = $props();
  const carousel = useCarousel();
</script>
<Button
  data-slot="carousel-next"
  {variant}
  {size}
  class={cn(
    'rounded-full absolute touch-manipulation',
    carousel.orientation === 'horizontal' ? 'inset-y-0 -right-12 my-auto' : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
    classProp,
  )}
  disabled={!carousel.canScrollNext}
  onclick={carousel.scrollNext}
  {...props}
>
  <ChevronRightIcon
    class=""
  />
  <span class="sr-only">Next slide</span>
</Button>

<script lang="ts">
  import { cn } from 'cn';
  import { Button } from '../button/index.js';
  import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
  import { useCarousel } from './context.js';
  import type { CarouselPreviousProps } from './types.js';
  let { class: classProp, variant = 'outline', size = 'icon-sm', ...props }: CarouselPreviousProps = $props();
  const carousel = useCarousel();
</script>
<Button
  data-slot="carousel-previous"
  {variant}
  {size}
  class={cn(
    'rounded-full absolute touch-manipulation',
    carousel.orientation === 'horizontal' ? 'inset-y-0 -left-12 my-auto' : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
    classProp,
  )}
  disabled={!carousel.canScrollPrev}
  onclick={carousel.scrollPrev}
  {...props}
>
  <ChevronLeftIcon
    class=""
  />
  <span class="sr-only">Previous slide</span>
</Button>

import { createContext } from 'svelte';
import type { Attachment } from 'svelte/attachments';
import type { CarouselApi, CarouselOptions } from './types.js';

export type CarouselContextValue = {
  readonly api: CarouselApi | undefined;
  readonly opts: CarouselOptions | undefined;
  readonly orientation: 'horizontal' | 'vertical';
  readonly canScrollPrev: boolean;
  readonly canScrollNext: boolean;
  readonly viewport: Attachment<HTMLElement>;
  scrollPrev(): void;
  scrollNext(): void;
};

export const [useCarousel, setCarouselContext] = createContext<CarouselContextValue>();

import type { HTMLAttributes } from 'svelte/elements';
import type { EmblaCarouselType, EmblaOptionsType, EmblaPluginType } from 'embla-carousel';
import type { ButtonProps } from '../button/index.js';

export type CarouselApi = EmblaCarouselType;
export type CarouselOptions = EmblaOptionsType;
export type CarouselPlugin = EmblaPluginType[];

export type CarouselProps = HTMLAttributes<HTMLDivElement> & {
  orientation?: 'horizontal' | 'vertical';
  opts?: CarouselOptions;
  plugins?: CarouselPlugin;
  /** The Embla instance, set once the carousel mounts. Read it with `bind:api`. */
  api?: CarouselApi;
};
export type CarouselContentProps = HTMLAttributes<HTMLDivElement>;
export type CarouselItemProps = HTMLAttributes<HTMLDivElement>;
export type CarouselPreviousProps = ButtonProps;
export type CarouselNextProps = ButtonProps;

export { default as Carousel } from './Carousel.svelte';
export { default as CarouselContent } from './CarouselContent.svelte';
export { default as CarouselItem } from './CarouselItem.svelte';
export { default as CarouselPrevious } from './CarouselPrevious.svelte';
export { default as CarouselNext } from './CarouselNext.svelte';
export { useCarousel } from './context.js';
export type {
  CarouselApi, CarouselOptions, CarouselPlugin, CarouselProps, CarouselContentProps,
  CarouselItemProps, CarouselPreviousProps, CarouselNextProps,
} from './types.js';