wip

src/lib/components/ui/carousel/carousel-next.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import ArrowRightIcon from '@lucide/svelte/icons/arrow-right'
+  import type { WithoutChildren } from 'bits-ui'
+  import { getEmblaContext } from './context.js'
+  import { cn } from '$lib/utils.js'
+  import { Button, type Props } from '$lib/components/ui/button/index.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    variant = 'outline',
+    size = 'icon',
+    ...restProps
+  }: WithoutChildren<Props> = $props()
+
+  const emblaCtx = getEmblaContext('<Carousel.Next/>')
+</script>
+
+<Button
+  data-slot="carousel-next"
+  {variant}
+  {size}
+  aria-disabled={!emblaCtx.canScrollNext}
+  class={cn(
+    'absolute size-8 rounded-full',
+    emblaCtx.orientation === 'horizontal'
+      ? '-right-12 top-1/2 -translate-y-1/2'
+      : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+    className,
+  )}
+  onclick={emblaCtx.scrollNext}
+  onkeydown={emblaCtx.handleKeyDown}
+  bind:ref
+  {...restProps}
+>
+  <ArrowRightIcon class="size-4" />
+  <span class="sr-only">Next slide</span>
+</Button>