@vibesdotdev/kit 0.0.0-stage → 1.0.0-rc.3

package/dist/lib/components/ui/calendar/caption-options.js

@@ -0,0 +1,70 @@
+import { DateFormatter } from '@internationalized/date';
+/** Ten years either side of the displayed year when the caller names none. */
+export const DEFAULT_YEAR_SPAN = 10;
+const ALL_MONTHS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+function isCaptionFormatter(format) {
+    return typeof format === 'function';
+}
+/** A UTC instant inside the given month, so no time zone moves it into a neighbour. */
+function instantIn(year, month) {
+    const instant = new Date(0);
+    instant.setUTCFullYear(year, month - 1, 15);
+    return instant;
+}
+export function formatCaptionMonth(month, format, locale) {
+    if (isCaptionFormatter(format))
+        return format(month);
+    return new DateFormatter(locale, { month: format ?? 'long', timeZone: 'UTC' }).format(instantIn(2000, month));
+}
+export function formatCaptionYear(year, format, locale) {
+    if (isCaptionFormatter(format))
+        return format(year);
+    return new DateFormatter(locale, { year: format ?? 'numeric', timeZone: 'UTC' }).format(instantIn(year, 1));
+}
+/** Each distinct entry once, in caller order; entries that are not a month or year are skipped. */
+function distinct(values, accepts) {
+    return [...new Set(values)].filter(accepts);
+}
+const isMonth = (value) => Number.isInteger(value) && value >= 1 && value <= 12;
+export function monthOptions(input) {
+    const offered = input.months ? distinct(input.months, isMonth) : [];
+    const months = offered.length > 0 ? offered : ALL_MONTHS;
+    return months.map((month) => ({
+        value: month,
+        label: formatCaptionMonth(month, input.monthFormat, input.locale)
+    }));
+}
+export function yearOptions(input) {
+    const offered = input.years ? distinct(input.years, Number.isSafeInteger) : [];
+    const years = offered.length > 0
+        ? offered
+        : Array.from({ length: DEFAULT_YEAR_SPAN * 2 + 1 }, (_, offset) => input.displayedYear - DEFAULT_YEAR_SPAN + offset);
+    if (!years.includes(input.displayedYear)) {
+        years.push(input.displayedYear);
+        years.sort((left, right) => left - right);
+    }
+    return years.map((year) => ({
+        value: year,
+        label: formatCaptionYear(year, input.yearFormat, input.locale)
+    }));
+}
+/**
+ * The placeholder after choosing `month` in the caption of the panel showing
+ * `panel`, the `panelIndex`-th visible month. The choice keeps the panel's own
+ * year, so picking March in a January panel that follows December stays in the
+ * panel's year.
+ */
+export function placeholderForMonth(placeholder, panel, month, panelIndex) {
+    const first = panel.set({ month }).subtract({ months: panelIndex });
+    return placeholder.set({ year: first.year, month: first.month });
+}
+/** The placeholder after choosing `year` in the caption of the `panelIndex`-th panel. */
+export function placeholderForYear(placeholder, panel, year, panelIndex) {
+    const first = panel.set({ year }).subtract({ months: panelIndex });
+    return placeholder.set({ year: first.year, month: first.month });
+}
+/** A select's chosen option as its number, or `undefined` for anything that is not one. */
+export function selectedOptionValue(raw) {
+    const value = Number(raw);
+    return raw.trim() !== '' && Number.isSafeInteger(value) ? value : undefined;
+}

package/dist/lib/components/ui/calendar/caption-select.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">import { cn } from "../../../utils.js";
+import { Icon } from "../../icon";
+import { selectedOptionValue } from "./caption-options.js";
+let { ref = $bindable(null), class: className, value, options, label, onchange, onValueChange } = $props();
+const selected = $derived(options.find((option) => option.value === value) ?? options[0]);
+function handleChange(event) {
+	onchange?.(event);
+	const next = selectedOptionValue(event.currentTarget.value);
+	if (next !== undefined) onValueChange?.(next);
+}
+</script>
+
+<span
+	bind:this={ref}
+	class={cn(
+		'relative flex rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50',
+		className
+	)}
+>
+	<select
+		class="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+		aria-label={label}
+		value={selected?.value}
+		onchange={handleChange}
+	>
+		{#each options as option (option.value)}
+			<option value={option.value}>
+				{option.label}
+			</option>
+		{/each}
+	</select>
+	<span
+		class="flex h-8 items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5 [&>svg]:text-muted-foreground"
+		aria-hidden="true"
+	>
+		{selected?.label}
+		<Icon icon="lucide:chevron-down" class="size-4" />
+	</span>
+</span>

package/dist/lib/components/ui/calendar/caption-select.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type CaptionOption } from './caption-options.ts';
+interface Props {
+    ref?: HTMLElement | null;
+    class?: string;
+    value?: number;
+    options: readonly CaptionOption[];
+    /** The select's accessible name; the visible label is decorative. */
+    label: string;
+    onchange?: (e: Event) => void;
+    onValueChange?: (value: number) => void;
+}
+declare const CaptionSelect: import("svelte").Component<Props, {}, "ref">;
+type CaptionSelect = ReturnType<typeof CaptionSelect>;
+export default CaptionSelect;

package/dist/lib/components/ui/calendar/index.d.ts

@@ -0,0 +1,19 @@
+import Root from './calendar.svelte';
+import Cell from './calendar-cell.svelte';
+import Day from './calendar-day.svelte';
+import Grid from './calendar-grid.svelte';
+import Header from './calendar-header.svelte';
+import Months from './calendar-months.svelte';
+import GridRow from './calendar-grid-row.svelte';
+import Heading from './calendar-heading.svelte';
+import GridBody from './calendar-grid-body.svelte';
+import GridHead from './calendar-grid-head.svelte';
+import HeadCell from './calendar-head-cell.svelte';
+import NextButton from './calendar-next-button.svelte';
+import PrevButton from './calendar-prev-button.svelte';
+import MonthSelect from './calendar-month-select.svelte';
+import YearSelect from './calendar-year-select.svelte';
+import Month from './calendar-month.svelte';
+import Nav from './calendar-nav.svelte';
+import Caption from './calendar-caption.svelte';
+export { Day, Cell, Grid, Header, Months, GridRow, Heading, GridBody, GridHead, HeadCell, NextButton, PrevButton, Nav, Month, YearSelect, MonthSelect, Caption, Root as Calendar, Day as CalendarDay, Cell as CalendarCell, Grid as CalendarGrid, Header as CalendarHeader, Months as CalendarMonths, GridRow as CalendarGridRow, Heading as CalendarHeading, GridBody as CalendarGridBody, GridHead as CalendarGridHead, HeadCell as CalendarHeadCell, NextButton as CalendarNextButton, PrevButton as CalendarPrevButton, Nav as CalendarNav, Month as CalendarMonth, YearSelect as CalendarYearSelect, MonthSelect as CalendarMonthSelect, Caption as CalendarCaption };

package/dist/lib/components/ui/calendar/index.js

@@ -0,0 +1,21 @@
+import Root from './calendar.svelte';
+import Cell from './calendar-cell.svelte';
+import Day from './calendar-day.svelte';
+import Grid from './calendar-grid.svelte';
+import Header from './calendar-header.svelte';
+import Months from './calendar-months.svelte';
+import GridRow from './calendar-grid-row.svelte';
+import Heading from './calendar-heading.svelte';
+import GridBody from './calendar-grid-body.svelte';
+import GridHead from './calendar-grid-head.svelte';
+import HeadCell from './calendar-head-cell.svelte';
+import NextButton from './calendar-next-button.svelte';
+import PrevButton from './calendar-prev-button.svelte';
+import MonthSelect from './calendar-month-select.svelte';
+import YearSelect from './calendar-year-select.svelte';
+import Month from './calendar-month.svelte';
+import Nav from './calendar-nav.svelte';
+import Caption from './calendar-caption.svelte';
+export { Day, Cell, Grid, Header, Months, GridRow, Heading, GridBody, GridHead, HeadCell, NextButton, PrevButton, Nav, Month, YearSelect, MonthSelect, Caption, 
+//
+Root as Calendar, Day as CalendarDay, Cell as CalendarCell, Grid as CalendarGrid, Header as CalendarHeader, Months as CalendarMonths, GridRow as CalendarGridRow, Heading as CalendarHeading, GridBody as CalendarGridBody, GridHead as CalendarGridHead, HeadCell as CalendarHeadCell, NextButton as CalendarNextButton, PrevButton as CalendarPrevButton, Nav as CalendarNav, Month as CalendarMonth, YearSelect as CalendarYearSelect, MonthSelect as CalendarMonthSelect, Caption as CalendarCaption };

package/dist/lib/components/ui/card/card-action.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, children, ...restProps } = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-action"
+	class={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/card/card-action.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const CardAction: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type CardAction = ReturnType<typeof CardAction>;
+export default CardAction;

package/dist/lib/components/ui/card/card-content.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, children, ...restProps } = $props();
+</script>
+
+<div bind:this={ref} data-slot="card-content" class={cn('px-6', className)} {...restProps}>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/card/card-content.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+declare const CardContent: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type CardContent = ReturnType<typeof CardContent>;
+export default CardContent;

package/dist/lib/components/ui/card/card-description.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, children, ...restProps } = $props();
+</script>
+
+<p
+	bind:this={ref}
+	data-slot="card-description"
+	class={cn('text-sm text-muted-foreground', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</p>

package/dist/lib/components/ui/card/card-description.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+declare const CardDescription: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLParagraphElement>>, {}, "ref">;
+type CardDescription = ReturnType<typeof CardDescription>;
+export default CardDescription;

package/dist/lib/components/ui/card/card-footer.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, children, ...restProps } = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-footer"
+	class={cn('flex items-center px-6 [.border-t]:pt-6', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/card/card-footer.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const CardFooter: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type CardFooter = ReturnType<typeof CardFooter>;
+export default CardFooter;

package/dist/lib/components/ui/card/card-header.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, children, ...restProps } = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-header"
+	class={cn(
+		'@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/card/card-header.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const CardHeader: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type CardHeader = ReturnType<typeof CardHeader>;
+export default CardHeader;

package/dist/lib/components/ui/card/card-title.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, children, ...restProps } = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-title"
+	class={cn('leading-none font-semibold', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/card/card-title.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+declare const CardTitle: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type CardTitle = ReturnType<typeof CardTitle>;
+export default CardTitle;

package/dist/lib/components/ui/card/card.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, children, ...restProps } = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card"
+	class={cn(
+		'vibes-card-surface flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/card/card.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+declare const Card: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/lib/components/ui/card/index.d.ts

@@ -0,0 +1,17 @@
+import Root from './card.svelte';
+import Content from './card-content.svelte';
+import Description from './card-description.svelte';
+import Footer from './card-footer.svelte';
+import Header from './card-header.svelte';
+import Title from './card-title.svelte';
+import Action from './card-action.svelte';
+declare const Card: import("svelte").Component<import("../../..").WithElementRef<import("svelte/elements").HTMLAttributes<HTMLDivElement>>, {}, "ref"> & {
+    Root: import("svelte").Component<import("../../..").WithElementRef<import("svelte/elements").HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+    Content: import("svelte").Component<import("../../..").WithElementRef<import("svelte/elements").HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+    Description: import("svelte").Component<import("../../..").WithElementRef<import("svelte/elements").HTMLAttributes<HTMLParagraphElement>>, {}, "ref">;
+    Footer: import("svelte").Component<import("../../..").WithElementRef<import("svelte/elements").HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+    Header: import("svelte").Component<import("../../..").WithElementRef<import("svelte/elements").HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+    Title: import("svelte").Component<import("../../..").WithElementRef<import("svelte/elements").HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+    Action: import("svelte").Component<import("../../..").WithElementRef<import("svelte/elements").HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+};
+export { Root, Content, Description, Footer, Header, Title, Action, Card, Content as CardContent, Description as CardDescription, Footer as CardFooter, Header as CardHeader, Title as CardTitle, Action as CardAction };

package/dist/lib/components/ui/card/index.js

@@ -0,0 +1,12 @@
+import Root from './card.svelte';
+import Content from './card-content.svelte';
+import Description from './card-description.svelte';
+import Footer from './card-footer.svelte';
+import Header from './card-header.svelte';
+import Title from './card-title.svelte';
+import Action from './card-action.svelte';
+// Dual export: <Card> renders Root, <Card.Header> accesses the namespace.
+const Card = Object.assign(Root, { Root, Content, Description, Footer, Header, Title, Action });
+export { Root, Content, Description, Footer, Header, Title, Action, Card, 
+//
+Content as CardContent, Description as CardDescription, Footer as CardFooter, Header as CardHeader, Title as CardTitle, Action as CardAction };

package/dist/lib/components/ui/carousel/carousel-content.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">import emblaCarouselSvelte from "embla-carousel-svelte";
+import { getEmblaContext } from "./context.js";
+import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, children, ...restProps } = $props();
+const emblaCtx = getEmblaContext("<Carousel.Content/>");
+</script>
+
+<div
+	data-slot="carousel-content"
+	class="overflow-hidden"
+	use:emblaCarouselSvelte={{
+		options: {
+			container: '[data-embla-container]',
+			slides: '[data-embla-slide]',
+			...emblaCtx.options,
+			axis: emblaCtx.orientation === 'horizontal' ? 'x' : 'y'
+		},
+		plugins: emblaCtx.plugins
+	}}
+	onemblaInit={emblaCtx.onInit}
+>
+	<div
+		bind:this={ref}
+		class={cn(
+			'flex',
+			emblaCtx.orientation === 'horizontal' ? '-ms-4' : '-mt-4 flex-col',
+			className
+		)}
+		data-embla-container=""
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
+</div>

package/dist/lib/components/ui/carousel/carousel-content.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+declare const CarouselContent: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type CarouselContent = ReturnType<typeof CarouselContent>;
+export default CarouselContent;

package/dist/lib/components/ui/carousel/carousel-item.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">import { getEmblaContext } from "./context.js";
+import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, children, ...restProps } = $props();
+const emblaCtx = getEmblaContext("<Carousel.Item/>");
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="carousel-item"
+	role="group"
+	aria-roledescription="slide"
+	class={cn(
+		'min-w-0 shrink-0 grow-0 basis-full',
+		emblaCtx.orientation === 'horizontal' ? 'ps-4' : 'pt-4',
+		className
+	)}
+	data-embla-slide=""
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/carousel/carousel-item.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+declare const CarouselItem: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type CarouselItem = ReturnType<typeof CarouselItem>;
+export default CarouselItem;

package/dist/lib/components/ui/carousel/carousel-next.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">import { Icon } from "../../icon";
+import { getEmblaContext } from "./context.js";
+import { cn } from "../../../utils.js";
+import { Button } from "../button/index.js";
+let { ref = $bindable(null), class: className, variant = "outline", size = "icon", ...restProps } = $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'
+			? '-end-12 top-1/2 -translate-y-1/2'
+			: 'start-1/2 -bottom-12 -translate-x-1/2 rotate-90',
+		className
+	)}
+	onclick={emblaCtx.scrollNext}
+	onkeydown={emblaCtx.handleKeyDown}
+	bind:ref
+	{...restProps}
+>
+	<Icon icon="lucide:arrow-right" class="size-4" />
+	<span class="sr-only">Next slide</span>
+</Button>

package/dist/lib/components/ui/carousel/carousel-next.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type Props } from '../button/index.js';
+declare const CarouselNext: import("svelte").Component<Omit<Props, "children">, {}, "ref">;
+type CarouselNext = ReturnType<typeof CarouselNext>;
+export default CarouselNext;

package/dist/lib/components/ui/carousel/carousel-previous.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">import { Icon } from "../../icon";
+import { getEmblaContext } from "./context.js";
+import { cn } from "../../../utils.js";
+import { Button } from "../button/index.js";
+let { ref = $bindable(null), class: className, variant = "outline", size = "icon", ...restProps } = $props();
+const emblaCtx = getEmblaContext("<Carousel.Previous/>");
+</script>
+
+<Button
+	data-slot="carousel-previous"
+	{variant}
+	{size}
+	aria-disabled={!emblaCtx.canScrollPrev}
+	class={cn(
+		'absolute size-8 rounded-full',
+		emblaCtx.orientation === 'horizontal'
+			? '-start-12 top-1/2 -translate-y-1/2'
+			: 'start-1/2 -top-12 -translate-x-1/2 rotate-90',
+		className
+	)}
+	onclick={emblaCtx.scrollPrev}
+	onkeydown={emblaCtx.handleKeyDown}
+	{...restProps}
+	bind:ref
+>
+	<Icon icon="lucide:arrow-left" class="size-4" />
+	<span class="sr-only">Previous slide</span>
+</Button>

package/dist/lib/components/ui/carousel/carousel-previous.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type Props } from '../button/index.js';
+declare const CarouselPrevious: import("svelte").Component<Omit<Props, "children">, {}, "ref">;
+type CarouselPrevious = ReturnType<typeof CarouselPrevious>;
+export default CarouselPrevious;

package/dist/lib/components/ui/carousel/carousel.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">import { setEmblaContext } from "./context.js";
+import { cn } from "../../../utils.js";
+let { ref = $bindable(null), opts = {}, plugins = [], setApi = () => {}, orientation = "horizontal", class: className, children, ...restProps } = $props();
+let carouselState = $state({
+	api: undefined,
+	scrollPrev,
+	scrollNext,
+	orientation: "horizontal",
+	canScrollNext: false,
+	canScrollPrev: false,
+	handleKeyDown,
+	options: {},
+	plugins: [],
+	onInit,
+	scrollSnaps: [],
+	selectedIndex: 0,
+	scrollTo
+});
+setEmblaContext(carouselState);
+$effect(() => {
+	carouselState.orientation = orientation;
+	carouselState.options = opts;
+	carouselState.plugins = plugins;
+});
+function scrollPrev() {
+	carouselState.api?.scrollPrev();
+}
+function scrollNext() {
+	carouselState.api?.scrollNext();
+}
+function scrollTo(index, jump) {
+	carouselState.api?.scrollTo(index, jump);
+}
+function onSelect() {
+	if (!carouselState.api) return;
+	carouselState.selectedIndex = carouselState.api.selectedScrollSnap();
+	carouselState.canScrollNext = carouselState.api.canScrollNext();
+	carouselState.canScrollPrev = carouselState.api.canScrollPrev();
+}
+function handleKeyDown(e) {
+	if (e.key === "ArrowLeft") {
+		e.preventDefault();
+		scrollPrev();
+	} else if (e.key === "ArrowRight") {
+		e.preventDefault();
+		scrollNext();
+	}
+}
+function onInit(event) {
+	carouselState.api = event.detail;
+	setApi(carouselState.api);
+	carouselState.scrollSnaps = carouselState.api.scrollSnapList();
+	carouselState.api.on("select", onSelect);
+	onSelect();
+}
+$effect(() => {
+	return () => {
+		carouselState.api?.off("select", onSelect);
+	};
+});
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="carousel"
+	class={cn('relative', className)}
+	role="region"
+	aria-roledescription="carousel"
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/carousel/carousel.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type CarouselProps } from './context.js';
+import { type WithElementRef } from '../../../utils.js';
+declare const Carousel: import("svelte").Component<WithElementRef<CarouselProps>, {}, "ref">;
+type Carousel = ReturnType<typeof Carousel>;
+export default Carousel;

package/dist/lib/components/ui/carousel/context.d.ts

@@ -0,0 +1,31 @@
+import type { WithElementRef } from '../../../utils.ts';
+import type { EmblaCarouselSvelteType, default as emblaCarouselSvelte } from 'embla-carousel-svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export type CarouselAPI = NonNullable<NonNullable<EmblaCarouselSvelteType['$$_attributes']>['on:emblaInit']> extends (evt: CustomEvent<infer CarouselAPI>) => void ? CarouselAPI : never;
+type EmblaCarouselConfig = NonNullable<Parameters<typeof emblaCarouselSvelte>[1]>;
+export type CarouselOptions = EmblaCarouselConfig['options'];
+export type CarouselPlugins = EmblaCarouselConfig['plugins'];
+export type CarouselProps = {
+    opts?: CarouselOptions;
+    plugins?: CarouselPlugins;
+    setApi?: (api: CarouselAPI | undefined) => void;
+    orientation?: 'horizontal' | 'vertical';
+} & WithElementRef<HTMLAttributes<HTMLDivElement>>;
+export type EmblaContext = {
+    api: CarouselAPI | undefined;
+    orientation: 'horizontal' | 'vertical';
+    scrollNext: () => void;
+    scrollPrev: () => void;
+    canScrollNext: boolean;
+    canScrollPrev: boolean;
+    handleKeyDown: (e: KeyboardEvent) => void;
+    options: CarouselOptions;
+    plugins: CarouselPlugins;
+    onInit: (e: CustomEvent<CarouselAPI>) => void;
+    scrollTo: (index: number, jump?: boolean) => void;
+    scrollSnaps: number[];
+    selectedIndex: number;
+};
+export declare function setEmblaContext(config: EmblaContext): EmblaContext;
+export declare function getEmblaContext(name?: string): EmblaContext;
+export {};

package/dist/lib/components/ui/carousel/context.js

@@ -0,0 +1,12 @@
+import { getContext, hasContext, setContext } from 'svelte';
+const EMBLA_CAROUSEL_CONTEXT = Symbol('EMBLA_CAROUSEL_CONTEXT');
+export function setEmblaContext(config) {
+    setContext(EMBLA_CAROUSEL_CONTEXT, config);
+    return config;
+}
+export function getEmblaContext(name = 'This component') {
+    if (!hasContext(EMBLA_CAROUSEL_CONTEXT)) {
+        throw new Error(`${name} must be used within a <Carousel.Root> component`);
+    }
+    return getContext(EMBLA_CAROUSEL_CONTEXT);
+}

package/dist/lib/components/ui/carousel/index.d.ts

@@ -0,0 +1,6 @@
+import Root from './carousel.svelte';
+import Content from './carousel-content.svelte';
+import Item from './carousel-item.svelte';
+import Previous from './carousel-previous.svelte';
+import Next from './carousel-next.svelte';
+export { Root, Content, Item, Previous, Next, Root as Carousel, Content as CarouselContent, Item as CarouselItem, Previous as CarouselPrevious, Next as CarouselNext };

package/dist/lib/components/ui/carousel/index.js

@@ -0,0 +1,8 @@
+import Root from './carousel.svelte';
+import Content from './carousel-content.svelte';
+import Item from './carousel-item.svelte';
+import Previous from './carousel-previous.svelte';
+import Next from './carousel-next.svelte';
+export { Root, Content, Item, Previous, Next, 
+//
+Root as Carousel, Content as CarouselContent, Item as CarouselItem, Previous as CarouselPrevious, Next as CarouselNext };