sheer-ui 0.0.0

package/src/lib/components/calendar/types.ts

@@ -0,0 +1,417 @@
+import type { DateValue } from '@internationalized/date';
+import type { OnChangeFn, WithChild, Without } from '../../internal/types.js';
+import type {
+	BitsPrimitiveButtonAttributes,
+	BitsPrimitiveDivAttributes,
+	BitsPrimitiveHeaderAttributes,
+	BitsPrimitiveSelectAttributes,
+	BitsPrimitiveTableAttributes,
+	BitsPrimitiveTbodyAttributes,
+	BitsPrimitiveTdAttributes,
+	BitsPrimitiveThAttributes,
+	BitsPrimitiveTheadAttributes,
+	BitsPrimitiveTrAttributes,
+} from '../../internal/attribute-types.js';
+import type { DateMatcher, Month, WeekStartsOn } from '../../internal/date-time/types.js';
+
+export type CalendarRootSnippetProps = {
+	months: Month<DateValue>[];
+	weekdays: string[];
+};
+
+type CalendarBaseRootPropsWithoutHTML = {
+	/**
+	 * The placeholder date, used to control the view of the
+	 * calendar when no value is present.
+	 *
+	 * @default the current date
+	 */
+	placeholder?: DateValue;
+
+	/**
+	 * A callback function called when the placeholder value
+	 * changes.
+	 */
+	onPlaceholderChange?: OnChangeFn<DateValue>;
+
+	/**
+	 * Whether or not users can deselect a date once selected
+	 * without selecting another date.
+	 *
+	 * @default false
+	 */
+	preventDeselect?: boolean;
+
+	/**
+	 * The minimum date that can be selected in the calendar.
+	 */
+	minValue?: DateValue;
+
+	/**
+	 * The maximum date that can be selected in the calendar.
+	 */
+	maxValue?: DateValue;
+
+	/**
+	 * Whether or not the calendar is disabled.
+	 *
+	 * @default false
+	 */
+	disabled?: boolean;
+
+	/**
+	 * Applicable only when `numberOfMonths` is greater than 1.
+	 *
+	 * Controls whether to use paged navigation for the next and previous buttons in the
+	 * date picker. With paged navigation set to `true`, clicking the next/prev buttons
+	 * changes all months in view. When set to `false`, it shifts the view by a single month.
+	 *
+	 * For example, with `pagedNavigation` set to `true` and 2 months displayed (January and
+	 * February), clicking the next button changes the view to March and April. If `pagedNavigation`
+	 * is `false`, the view shifts to February and March.
+	 *
+	 * @default false
+	 */
+	pagedNavigation?: boolean;
+
+	/**
+	 * The day of the week to start the calendar on, which must
+	 * be a number between 0 and 6, where 0 is Sunday and 6 is
+	 * Saturday.
+	 *
+	 * @default 0 (Sunday)
+	 */
+	weekStartsOn?: WeekStartsOn;
+
+	/**
+	 * How the string representation of the weekdays provided via the `weekdays` state store
+	 * should be formatted.
+	 *
+	 * ```md
+	 * - "long": "Sunday", "Monday", "Tuesday", etc.
+	 * - "short": "Sun", "Mon", "Tue", etc.
+	 * - "narrow": "S", "M", "T", etc.
+	 *```
+	 *
+	 * @default "narrow"
+	 *
+	 * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#weekday
+	 */
+	weekdayFormat?: Intl.DateTimeFormatOptions['weekday'];
+
+	/**
+	 * A function that receives a date and returns `true` or `false` to indicate whether
+	 * the date is disabled.
+	 *
+	 * @remarks
+	 * Disabled dates cannot be focused or selected. Additionally, they are tagged
+	 * with a data attribute to enable custom styling.
+	 *
+	 * `[data-disabled]` - applied to disabled dates
+	 *
+	 */
+	isDateDisabled?: DateMatcher;
+
+	/**
+	 * Dates matching the provided matchers are marked as "unavailable." Unlike disabled dates,
+	 * users can still focus and select unavailable dates. However, selecting an unavailable date
+	 * renders the date picker as invalid.
+	 *
+	 * For example, in a calendar for booking appointments, you might mark already booked dates as
+	 * unavailable. These dates could become available again before the appointment date, allowing
+	 * users to select them to learn more about the appointment.
+	 *
+	 * `[data-unavailable]` - applied to unavailable dates
+	 *
+	 */
+	isDateUnavailable?: DateMatcher;
+
+	/**
+	 * Display 6 weeks per month, regardless the month's number of weeks.
+	 * This is useful for displaying a consistent calendar, where the size
+	 * of the calendar doesn't change month to month.
+	 *
+	 * To display 6 weeks per month, you will need to render out the previous
+	 * and next month's dates in the calendar as well.
+	 *
+	 * @default false
+	 */
+	fixedWeeks?: boolean;
+
+	/**
+	 * Determines the number of months to display on the calendar simultaneously.
+	 * For navigation between months, refer to the `pagedNavigation` prop.
+	 *
+	 * @default 1
+	 */
+	numberOfMonths?: number;
+
+	/**
+	 * This label is exclusively used for accessibility, remaining hidden from the page.
+	 * It's read by screen readers when the calendar is opened. The current month and year
+	 * are automatically appended to the label, so you only need to provide the base label.
+	 *
+	 * For instance:
+	 * - 'Date of birth' will be read as 'Date of birth, January 2021' if the current month is January 2021.
+	 * - 'Appointment date' will be read as 'Appointment date, January 2021' if the current month is January 2021.
+	 * - 'Booking date' will be read as 'Booking date, January 2021' if the current month is January 2021.
+	 */
+	calendarLabel?: string;
+
+	/**
+	 * The default locale setting.
+	 *
+	 * @default 'en'
+	 */
+	locale?: string;
+
+	/**
+	 * Whether the calendar is readonly. When true, the user will be able
+	 * to focus and navigate the calendar, but will not be able to select
+	 * dates. @see disabled for a similar prop that prevents focusing
+	 * and selecting dates.
+	 *
+	 * @default false
+	 */
+	readonly?: boolean;
+
+	/**
+	 * If `true`, the calendar will focus the selected day, today, or the first day of the month
+	 * in that order depending on what is visible when the calendar is mounted.
+	 */
+	initialFocus?: boolean;
+
+	/**
+	 * Whether to disable the selection of days outside the current month. By default,
+	 * days outside the current month are rendered to fill the calendar grid, but they
+	 * are not selectable. Setting this prop to `true` will disable this behavior.
+	 *
+	 * @default false
+	 */
+	disableDaysOutsideMonth?: boolean;
+
+	/**
+	 * The maximum number of days that can be selected in multiple mode.
+	 * When set, users cannot select more dates than this number.
+	 *
+	 * @default undefined
+	 */
+	maxDays?: number;
+
+	/**
+	 * The format of the month names in the calendar.
+	 *
+	 * @default "long"
+	 */
+	monthFormat?: Intl.DateTimeFormatOptions['month'] | ((month: number) => string);
+
+	/**
+	 * The format of the year names in the calendar.
+	 *
+	 * @default "numeric"
+	 */
+	yearFormat?: Intl.DateTimeFormatOptions['year'] | ((year: number) => string);
+};
+
+export type CalendarSingleRootPropsWithoutHTML = {
+	/**
+	 * The type of calendar. If set to `'single'`, the calendar will
+	 * only allow a single date to be selected. If set to `'multiple'`,
+	 * the calendar will allow multiple dates to be selected.
+	 */
+	type: 'single';
+
+	/**
+	 * The value of the selected date in the calendar.
+	 */
+	value?: DateValue;
+
+	/**
+	 * A callback function called when the value changes.
+	 */
+	onValueChange?: OnChangeFn<DateValue | undefined>;
+};
+
+export type CalendarMultipleRootPropsWithoutHTML = {
+	/**
+	 * The type of calendar. If set to `'single'`, the calendar will
+	 * only allow a single date to be selected. If set to `'multiple'`,
+	 * the calendar will allow multiple dates to be selected.
+	 */
+	type: 'multiple';
+
+	/**
+	 * The value of the selected dates in the calendar.
+	 */
+	value?: DateValue[];
+
+	/**
+	 * A callback function called when the value changes.
+	 */
+	onValueChange?: OnChangeFn<DateValue[]>;
+};
+
+export type _CalendarSingleRootPropsWithoutHTML = CalendarBaseRootPropsWithoutHTML & CalendarSingleRootPropsWithoutHTML;
+
+export type CalendarSingleRootProps = _CalendarSingleRootPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, _CalendarSingleRootPropsWithoutHTML>;
+
+export type _CalendarMultipleRootPropsWithoutHTML = CalendarBaseRootPropsWithoutHTML & CalendarMultipleRootPropsWithoutHTML;
+
+export type CalendarMultipleRootProps = _CalendarMultipleRootPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, _CalendarMultipleRootPropsWithoutHTML>;
+
+export type CalendarRootPropsWithoutHTML = CalendarBaseRootPropsWithoutHTML &
+	(
+		| WithChild<CalendarSingleRootPropsWithoutHTML, CalendarRootSnippetProps>
+		| WithChild<CalendarMultipleRootPropsWithoutHTML, CalendarRootSnippetProps>
+	);
+
+export type CalendarRootProps = CalendarRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CalendarRootPropsWithoutHTML>;
+
+export type CalendarCellSnippetProps = {
+	disabled: boolean;
+	unavailable: boolean;
+	selected: boolean;
+};
+
+export type CalendarCellPropsWithoutHTML = WithChild<
+	{
+		/**
+		 * The date value of the cell.
+		 *
+		 * @required
+		 */
+		date: DateValue;
+
+		/**
+		 * The month DateValue that this cell is being rendered in.
+		 */
+		month: DateValue;
+	},
+	CalendarCellSnippetProps
+>;
+
+export type CalendarCellProps = CalendarCellPropsWithoutHTML & Without<BitsPrimitiveTdAttributes, CalendarCellPropsWithoutHTML>;
+
+export type CalendarGridPropsWithoutHTML = WithChild;
+
+export type CalendarGridProps = CalendarGridPropsWithoutHTML & Without<BitsPrimitiveTableAttributes, CalendarGridPropsWithoutHTML>;
+
+export type CalendarGridBodyPropsWithoutHTML = WithChild;
+
+export type CalendarGridBodyProps = CalendarGridBodyPropsWithoutHTML &
+	Without<BitsPrimitiveTbodyAttributes, CalendarGridBodyPropsWithoutHTML>;
+
+export type CalendarGridHeadPropsWithoutHTML = WithChild;
+
+export type CalendarGridHeadProps = CalendarGridHeadPropsWithoutHTML &
+	Without<BitsPrimitiveTheadAttributes, CalendarGridHeadPropsWithoutHTML>;
+
+export type CalendarHeadCellPropsWithoutHTML = WithChild;
+
+export type CalendarHeadCellProps = CalendarHeadCellPropsWithoutHTML & Without<BitsPrimitiveThAttributes, CalendarHeadCellPropsWithoutHTML>;
+
+export type CalendarGridRowPropsWithoutHTML = WithChild;
+
+export type CalendarGridRowProps = CalendarGridRowPropsWithoutHTML & Without<BitsPrimitiveTrAttributes, CalendarGridRowPropsWithoutHTML>;
+
+export type CalendarHeaderPropsWithoutHTML = WithChild;
+
+export type CalendarHeaderProps = CalendarHeaderPropsWithoutHTML & Without<BitsPrimitiveHeaderAttributes, CalendarHeaderPropsWithoutHTML>;
+
+export type CalendarHeadingSnippetProps = {
+	headingValue: string;
+};
+
+export type CalendarHeadingPropsWithoutHTML = WithChild<{}, CalendarHeadingSnippetProps>;
+
+export type CalendarDaySnippetProps = {
+	disabled: boolean;
+	unavailable: boolean;
+	selected: boolean;
+	day: string;
+};
+
+export type CalendarDayPropsWithoutHTML = WithChild<{}, CalendarDaySnippetProps>;
+
+export type CalendarDayProps = CalendarDayPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CalendarDayPropsWithoutHTML>;
+
+export type CalendarHeadingProps = CalendarHeadingPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CalendarHeadingPropsWithoutHTML>;
+
+export type CalendarNextButtonPropsWithoutHTML = WithChild;
+
+export type CalendarNextButtonProps = CalendarNextButtonPropsWithoutHTML &
+	Without<BitsPrimitiveButtonAttributes, CalendarNextButtonPropsWithoutHTML>;
+
+export type CalendarPrevButtonPropsWithoutHTML = WithChild;
+
+export type CalendarPrevButtonProps = CalendarPrevButtonPropsWithoutHTML &
+	Without<BitsPrimitiveButtonAttributes, CalendarPrevButtonPropsWithoutHTML>;
+
+export type CalendarMonthSelectSnippetProps = {
+	monthItems: Array<{ value: number; label: string }>;
+	selectedMonthItem: { value: number; label: string };
+};
+
+export type CalendarMonthSelectPropsWithoutHTML = WithChild<
+	{
+		/**
+		 * An array of month numbers (1-12) to display in the select.
+		 * This allows for flexible month selection, such as showing only
+		 * specific months or seasons.
+		 *
+		 * @default [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] (all months)
+		 */
+		months?: number[];
+
+		/**
+		 * How the month names should be formatted in the select options.
+		 *
+		 * - "long": "January", "February", etc.
+		 * - "short": "Jan", "Feb", etc.
+		 * - "narrow": "J", "F", etc.
+		 * - "numeric": "1", "2", etc.
+		 * - "2-digit": "01", "02", etc.
+		 *
+		 * @default "long"
+		 */
+		monthFormat?: Intl.DateTimeFormatOptions['month'] | ((month: number) => string);
+	},
+	CalendarMonthSelectSnippetProps
+>;
+
+export type CalendarMonthSelectProps = CalendarMonthSelectPropsWithoutHTML &
+	Without<BitsPrimitiveSelectAttributes, CalendarMonthSelectPropsWithoutHTML>;
+
+export type CalendarYearSelectSnippetProps = {
+	yearItems: Array<{ value: number; label: string }>;
+	selectedYearItem: { value: number; label: string };
+};
+
+export type CalendarYearSelectPropsWithoutHTML = WithChild<
+	{
+		/**
+		 * An array of years to display in the select.
+		 * This allows for complete control over which years appear,
+		 * such as showing only years with data or excluding certain periods.
+		 *
+		 * @default Array from currentYear - 100 to currentYear
+		 */
+		years?: number[];
+
+		/**
+		 * How the year should be formatted in the select options.
+		 *
+		 * - "numeric": "2024", "2023", etc.
+		 * - "2-digit": "24", "23", etc.
+		 *
+		 * @default "numeric"
+		 */
+		yearFormat?: Intl.DateTimeFormatOptions['year'] | ((year: number) => string);
+	},
+	CalendarYearSelectSnippetProps
+>;
+
+export type CalendarYearSelectProps = CalendarYearSelectPropsWithoutHTML &
+	Without<BitsPrimitiveSelectAttributes, CalendarYearSelectPropsWithoutHTML>;

package/src/lib/components/card/card-action.svelte

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

package/src/lib/components/card/card-content.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/utils.js';
+
+	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} data-slot="card-content" class={join('px-6', className)} {...restProps}>
+	{@render children?.()}
+</div>

package/src/lib/components/card/card-description.svelte

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

package/src/lib/components/card/card-footer.svelte

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

package/src/lib/components/card/card-header.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-header"
+	class={join(
+		'@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/src/lib/components/card/card-title.svelte

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

package/src/lib/components/card/card.svelte

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

package/src/lib/components/card/index.ts

@@ -0,0 +1,25 @@
+import Root from './card.svelte';
+import Action from './card-action.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';
+
+export {
+	Root,
+	Content,
+	Description,
+	Footer,
+	Header,
+	Title,
+	Action,
+	//
+	Root as Card,
+	Content as CardContent,
+	Description as CardDescription,
+	Footer as CardFooter,
+	Header as CardHeader,
+	Title as CardTitle,
+	Action as CardAction,
+};

package/src/lib/components/carousel/carousel-arrow.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import ArrowLeftIcon from '@lucide/svelte/icons/arrow-left';
+	import ArrowRightIcon from '@lucide/svelte/icons/arrow-right';
+	import type { WithoutChildren } from '../../internal/index.js';
+	import { getCarouselContext } from './carouselState.svelte';
+	import { Button, type Props } from '../button';
+
+	let {
+		direction,
+		ref = $bindable(null),
+		class: className,
+		variant = 'outline',
+		size = 'icon',
+		...restProps
+	}: WithoutChildren<Props> & { direction: 'next' | 'previous' } = $props();
+
+	const ctx = getCarouselContext();
+
+	const isNext = $derived(direction === 'next');
+	const Icon = $derived(isNext ? ArrowRightIcon : ArrowLeftIcon);
+	const canScroll = $derived(isNext ? ctx.canScrollNext : ctx.canScrollPrev);
+	// Full literal class strings per (direction, orientation) so Tailwind's scanner sees them intact.
+	const horizontal = $derived(isNext ? '-inset-e-12 top-1/2 -translate-y-1/2' : '-inset-s-12 top-1/2 -translate-y-1/2');
+	const vertical = $derived(
+		isNext ? 'inset-s-1/2 -bottom-12 -translate-x-1/2 rotate-90' : 'inset-s-1/2 -top-12 -translate-x-1/2 rotate-90',
+	);
+</script>
+
+<Button
+	data-slot={isNext ? 'carousel-next' : 'carousel-previous'}
+	{variant}
+	{size}
+	disabled={!canScroll}
+	aria-disabled={!canScroll}
+	class={join('absolute size-8! rounded-full!', ctx.orientation === 'horizontal' ? horizontal : vertical, className)}
+	onclick={isNext ? ctx.scrollNext : ctx.scrollPrev}
+	{...restProps}
+	bind:ref>
+	<Icon class="size-4" />
+	<span class="sr-only">{isNext ? 'Next' : 'Previous'} slide</span>
+</Button>

package/src/lib/components/carousel/carousel-content.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { WithElementRef } from '../../internal/utils.js';
+	import { getCarouselWiring } from './carouselState.svelte';
+
+	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+
+	const ctx = getCarouselWiring();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="carousel-content"
+	data-orientation={ctx.orientation}
+	class={join(
+		// [overflow-anchor:none]: scroll anchoring fights the loop mode's `order` rotation
+		'flex snap-mandatory scrollbar-hidden [overflow-anchor:none]',
+		ctx.orientation === 'horizontal' ? 'snap-x gap-4 overflow-x-auto overscroll-x-contain' : 'snap-y flex-col gap-4 overflow-y-auto overscroll-y-contain',
+		className,
+	)}
+	{@attach ctx.scroller}
+	{...restProps}>
+	{@render children?.()}
+</div>

package/src/lib/components/carousel/carousel-dots.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { WithElementRef } from '../../internal/utils.js';
+	import { getCarouselContext } from './carouselState.svelte';
+
+	let { ref = $bindable(null), class: className, ...restProps }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+
+	const ctx = getCarouselContext();
+</script>
+
+<div bind:this={ref} data-slot="carousel-dots" class={join('flex justify-center gap-2', className)} {...restProps}>
+	{#each ctx.scrollSnaps as _, i (i)}
+		<button
+			type="button"
+			aria-label={`Go to slide ${i + 1}`}
+			aria-current={i === ctx.selectedIndex ? 'true' : undefined}
+			class="bg-muted-foreground/30 aria-[current]:bg-primary size-2 rounded-full transition-colors"
+			onclick={() => ctx.scrollTo(i)}></button>
+	{/each}
+</div>

package/src/lib/components/carousel/carousel-item.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { WithElementRef } from '../../internal/utils.js';
+	import { getCarouselWiring } from './carouselState.svelte';
+
+	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+
+	const ctx = getCarouselWiring();
+	const snapAlign = $derived(ctx.align === 'center' ? 'snap-center' : ctx.align === 'end' ? 'snap-end' : 'snap-start');
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="carousel-item"
+	role="group"
+	aria-roledescription="slide"
+	class={join('min-w-0 shrink-0 grow-0 basis-full', snapAlign, className)}
+	{...restProps}>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import type { WithoutChildren } from '../../internal/index.js';
+	import type { Props } from '../button';
+	import CarouselArrow from './carousel-arrow.svelte';
+
+	let { ref = $bindable(null), ...restProps }: WithoutChildren<Props> = $props();
+</script>
+
+<CarouselArrow direction="next" bind:ref {...restProps} />

package/src/lib/components/carousel/carousel-previous.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import type { WithoutChildren } from '../../internal/index.js';
+	import type { Props } from '../button';
+	import CarouselArrow from './carousel-arrow.svelte';
+
+	let { ref = $bindable(null), ...restProps }: WithoutChildren<Props> = $props();
+</script>
+
+<CarouselArrow direction="previous" bind:ref {...restProps} />