sheer-ui 0.0.0

package/src/lib/blocks/time-picker/time-range-picker.svelte

@@ -0,0 +1,180 @@
+<script lang="ts">
+	import Clock from '@lucide/svelte/icons/clock';
+	import { join } from 'overrule';
+	import type { ClassValue } from 'svelte/elements';
+	import { buttonVariants } from '../../components/button';
+	import * as Select from '../../components/select';
+	import { Popover } from '../../components/popover';
+	import { formatTimeDisplay, formatDuration } from '../../time';
+	import {
+		isTimeInRange,
+		compareTime,
+		getTimeDuration,
+		type TimeSlot,
+		type SlotRange,
+		resolveTimeSlots,
+		type TimeSlotPreset,
+	} from './time-slots';
+
+	// The internal SlotRange keeps plain strings ('' = unset end); every set value comes from a TimeSlot,
+	// so casting at the guarded display seam is sound.
+	const fmt = (t: string) => formatTimeDisplay(t, { use24Hour });
+
+	interface Props {
+		value?: SlotRange;
+		placeholder?: string;
+		disabled?: boolean;
+		class?: ClassValue;
+		triggerClass?: ClassValue;
+		contentClass?: ClassValue;
+		align?: 'start' | 'center' | 'end';
+		side?: 'top' | 'right' | 'bottom' | 'left';
+		// Time slot configuration
+		preset?: TimeSlotPreset;
+		slots?: TimeSlot[];
+		interval?: number;
+		startHour?: number;
+		endHour?: number;
+		// Constraints
+		minTime?: string;
+		maxTime?: string;
+		minDuration?: number; // Minimum duration in minutes
+		maxDuration?: number; // Maximum duration in minutes
+		isTimeDisabled?: (time: string) => boolean;
+		// Display options
+		showDuration?: boolean;
+		use24Hour?: boolean;
+	}
+
+	let {
+		value = $bindable(),
+		placeholder = 'Select time range',
+		disabled = false,
+		class: className,
+		triggerClass,
+		contentClass,
+		align = 'start',
+		side = 'bottom',
+		preset = 'extended',
+		slots,
+		interval = 60,
+		startHour = 7,
+		endHour = 21,
+		minTime,
+		maxTime,
+		minDuration = 0,
+		maxDuration,
+		isTimeDisabled,
+		showDuration = true,
+		use24Hour = false,
+	}: Props = $props();
+
+	// Generate time slots based on configuration
+	const timeSlots = $derived(resolveTimeSlots({ slots, preset, interval, startHour, endHour, use24Hour }));
+
+	// Filter start time slots
+	const startSlots = $derived.by(() => {
+		return timeSlots.filter((slot) => {
+			if (minTime && maxTime && !isTimeInRange(slot.value, minTime, maxTime)) return false;
+			if (minTime && compareTime(slot.value, minTime) < 0) return false;
+			if (maxTime && compareTime(slot.value, maxTime) > 0) return false;
+			if (isTimeDisabled?.(slot.value)) return false;
+			return true;
+		});
+	});
+
+	// Filter end time slots based on selected start time
+	const endSlots = $derived.by(() => {
+		return timeSlots.filter((slot) => {
+			// End time must be after start time
+			if (value?.start && compareTime(slot.value, value.start) <= 0) return false;
+
+			// Check duration constraints
+			if (value?.start) {
+				const duration = getTimeDuration(value.start, slot.value);
+				if (minDuration && duration < minDuration) return false;
+				if (maxDuration && duration > maxDuration) return false;
+			}
+
+			if (maxTime && compareTime(slot.value, maxTime) > 0) return false;
+			if (isTimeDisabled?.(slot.value)) return false;
+
+			return true;
+		});
+	});
+
+	const displayValue = $derived.by(() => {
+		if (!value?.start) return placeholder;
+		if (!value?.end) return fmt(value.start);
+
+		const duration = getTimeDuration(value.start, value.end);
+		const durationText = showDuration ? ` (${formatDuration(duration, 'compact')})` : '';
+		return `${fmt(value.start)} - ${fmt(value.end)}${durationText}`;
+	});
+
+	function handleStartChange(newStart: string | undefined) {
+		if (!newStart) {
+			value = undefined;
+			return;
+		}
+
+		// If end time is now invalid, clear it
+		const newValue: SlotRange = { start: newStart, end: value?.end || '' };
+		if (value?.end && compareTime(newStart, value.end) >= 0) {
+			newValue.end = '';
+		}
+
+		value = newValue;
+	}
+
+	function handleEndChange(newEnd: string | undefined) {
+		if (!newEnd || !value?.start) return;
+		value = { start: value.start, end: newEnd };
+	}
+</script>
+
+<div class={join('grid gap-2', className)}>
+	<Popover.Root>
+		<Popover.Trigger
+			{disabled}
+			class={buttonVariants({
+				variant: 'outline',
+				class: ['w-auto min-w-55 justify-start! text-start font-normal!', !value?.start && 'text-muted-foreground', triggerClass],
+			})}>
+			<Clock class="me-2 size-4" />
+			{displayValue}
+		</Popover.Trigger>
+		<Popover.Content class={join('flex w-auto! gap-2 p-3!', contentClass)} {align} {side}>
+			<div class="flex flex-col gap-1">
+				<span class="text-xs text-muted-foreground px-1">Start</span>
+				<Select.Root
+					class="w-30"
+					placeholder="Start time"
+					maxHeight="12.5rem"
+					value={value?.start}
+					onchange={(e) => handleStartChange(e.currentTarget.value || undefined)}>
+					{#each startSlots as slot (slot.value)}
+						<Select.Option value={slot.value}>{slot.label}</Select.Option>
+					{/each}
+				</Select.Root>
+			</div>
+
+			<div class="flex items-end pb-2 text-muted-foreground">—</div>
+
+			<div class="flex flex-col gap-1">
+				<span class="text-xs text-muted-foreground px-1">End</span>
+				<Select.Root
+					class="w-30"
+					placeholder="End time"
+					maxHeight="12.5rem"
+					value={value?.end}
+					onchange={(e) => handleEndChange(e.currentTarget.value || undefined)}
+					disabled={!value?.start}>
+					{#each endSlots as slot (slot.value)}
+						<Select.Option value={slot.value}>{slot.label}</Select.Option>
+					{/each}
+				</Select.Root>
+			</div>
+		</Popover.Content>
+	</Popover.Root>
+</div>

package/src/lib/blocks/time-picker/time-slots.ts

@@ -0,0 +1,61 @@
+/**
+ * Time-slot helpers for the time-picker components — comparison, duration, and slot generation over
+ * ISO 8601 "HH:MM" wall-clock strings. Block-internal; the minute math and `formatTimeDisplay` (the
+ * wire/display formatter) live in `../../time`.
+ */
+import { tryTimeToMinutes, minutesToTime, formatTimeDisplay } from '../../time';
+
+export type TimeSlot = { value: string; label: string };
+export type SlotRange = { start: string; end: string };
+export type TimeSlotPreset = 'business' | 'extended' | 'full' | 'custom';
+
+/** Sign of (time1 − time2): negative if earlier, 0 if equal or either is malformed, positive if later. */
+export function compareTime(time1: string, time2: string): number {
+	const a = tryTimeToMinutes(time1);
+	const b = tryTimeToMinutes(time2);
+	if (a === null || b === null) return 0;
+	return a - b;
+}
+
+export const isTimeInRange = (time: string, minTime: string, maxTime: string): boolean =>
+	compareTime(time, minTime) >= 0 && compareTime(time, maxTime) <= 0;
+
+/** Duration in minutes from startTime to endTime (0 if either is malformed). */
+export function getTimeDuration(startTime: string, endTime: string): number {
+	const start = tryTimeToMinutes(startTime);
+	const end = tryTimeToMinutes(endTime);
+	if (start === null || end === null) return 0;
+	return end - start;
+}
+
+export function generateTimeSlots(startHour: number, endHour: number, interval: number, use24Hour = false): TimeSlot[] {
+	const slots: TimeSlot[] = [];
+	const span = (endHour - startHour) * 60;
+	// `elapsed` bounds the loop in minutes (so endHour === 24 works); `minutesToTime` wraps at midnight
+	// and zero-pads for us.
+	for (let elapsed = 0; elapsed < span; elapsed += interval) {
+		const min = startHour * 60 + elapsed;
+		slots.push({ value: minutesToTime(min), label: formatTimeDisplay(min, { use24Hour }) });
+	}
+	return slots;
+}
+
+export const b_HOURS: TimeSlot[] = generateTimeSlots(9, 17, 60);
+export const EXTENDED_HOURS: TimeSlot[] = generateTimeSlots(7, 21, 60);
+
+type ResolveTimeSlotsOptions = {
+	slots: TimeSlot[] | undefined;
+	preset: TimeSlotPreset;
+	interval: number;
+	startHour: number;
+	endHour: number;
+	use24Hour?: boolean;
+};
+
+export const resolveTimeSlots = ({ slots, preset, interval, startHour, endHour, use24Hour = false }: ResolveTimeSlotsOptions) => {
+	if (slots) return slots;
+	// the baked constants carry 12-hour labels; 24-hour display regenerates the preset
+	if (preset === 'business') return use24Hour ? generateTimeSlots(9, 17, 60, true) : b_HOURS;
+	if (preset === 'extended') return use24Hour ? generateTimeSlots(7, 21, 60, true) : EXTENDED_HOURS;
+	return preset === 'full' ? generateTimeSlots(0, 24, interval, use24Hour) : generateTimeSlots(startHour, endHour, interval, use24Hour);
+};

package/src/lib/blocks/user-avatar/UserAvatar.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import * as Avatar from "../../components/avatar";
+	import type { ClassValue } from 'svelte/elements';
+
+	// Display avatar: an optional image (e.g. an S3 object keyed by the user) with initials as the fallback when no `src`
+	// is given or it 404s. The image URL is resolved by the consuming app — it depends on app env (bucket/region), so this
+	// block stays env-agnostic and takes the finished `src`; apps without avatar images just omit it and get initials.
+	// `cacheBust` re-fetches the image after an upload; bump it from the editing surface.
+	let {
+		name,
+		src,
+		class: className,
+		fallbackClass,
+		cacheBust = 0,
+	}: {
+		name: { f_name?: string | null; l_name?: string | null };
+		src?: string;
+		class?: ClassValue;
+		fallbackClass?: ClassValue;
+		cacheBust?: number;
+	} = $props();
+
+	const initials = $derived(
+		[name.f_name, name.l_name]
+			.map((n) => n?.[0] ?? '')
+			.join('')
+			.toUpperCase(),
+	);
+</script>
+
+<Avatar.Root class={className}>
+	{#if src}
+		<Avatar.Image src={`${src}?v=${cacheBust}`} alt={name.f_name ?? ''} />
+	{/if}
+	<Avatar.Fallback class={fallbackClass}>{initials}</Avatar.Fallback>
+</Avatar.Root>

package/src/lib/blocks/user-avatar/index.ts

@@ -0,0 +1 @@
+export { default as UserAvatar } from './UserAvatar.svelte';

package/src/lib/blocks/verification-code-field/VerificationCodeField.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import * as Field from '../../components/field';
+	import { PinInput, type RootProps as PinInputRootProps } from '../../components/pin-input';
+
+	type InputEvent = Parameters<NonNullable<PinInputRootProps['oninput']>>[0];
+
+	type Props = Omit<PinInputRootProps, 'children' | 'maxlength' | 'value'> & {
+		value?: string;
+		maxlength?: number;
+		invalid?: boolean;
+		errors?: { message?: string }[];
+		description?: Snippet;
+		ondirty?: () => void;
+	};
+
+	let {
+		value = $bindable(''),
+		maxlength = 6,
+		invalid = false,
+		errors,
+		description,
+		ondirty,
+		oninput,
+		inputmode = 'numeric',
+		pattern = '^\\d+$',
+		autocomplete = 'one-time-code',
+		...rootProps
+	}: Props = $props();
+
+	const handleInput = (event: InputEvent) => {
+		oninput?.(event);
+		if (event.isTrusted) ondirty?.();
+	};
+</script>
+
+<Field.Field data-invalid={invalid}>
+	<PinInput.Root
+		{...rootProps}
+		bind:value
+		{maxlength}
+		{inputmode}
+		{pattern}
+		{autocomplete}
+		aria-invalid={invalid}
+		oninput={handleInput}>
+		{#snippet children({ cells })}
+			<div class="flex items-center gap-2 *:data-[slot=pin-input-slot]:rounded-md *:data-[slot=pin-input-slot]:border">
+				{#each cells as cell (cell)}
+					<PinInput.Cell aria-invalid={invalid} {cell} />
+				{/each}
+			</div>
+		{/snippet}
+	</PinInput.Root>
+	<Field.Error errors={invalid ? errors : undefined} />
+	{@render description?.()}
+</Field.Field>

package/src/lib/blocks/verification-code-field/index.ts

@@ -0,0 +1 @@
+export { default as VerificationCodeField } from './VerificationCodeField.svelte';

package/src/lib/components/accordion/accordion.svelte.ts

@@ -0,0 +1,43 @@
+import { createContext } from 'svelte';
+
+export type AccordionType = 'single' | 'multiple';
+
+type AccordionStateProps = {
+	type: () => AccordionType;
+	value: () => string | string[];
+	setValue: (value: string | string[]) => void;
+};
+
+/**
+ * Each item is a `<details>`; this state owns the open set (bindable `value`) and
+ * single-type exclusivity — not the native `name` attribute, which would unrender a
+ * force-closed sibling before its closing transition can play. Items intercept summary
+ * clicks and report intent here; the grid-track animation lives in ui.css.
+ */
+export class AccordionState {
+	readonly props: AccordionStateProps;
+
+	constructor(props: AccordionStateProps) {
+		this.props = props;
+	}
+
+	includes(item: string): boolean {
+		const value = this.props.value();
+		return Array.isArray(value) ? value.includes(item) : value === item;
+	}
+
+	/** Open/close intent from an item — intercepted summary clicks and native force-opens alike. */
+	report(item: string, open: boolean): void {
+		const value = this.props.value();
+		if (Array.isArray(value)) {
+			if (open && !value.includes(item)) this.props.setValue([...value, item]);
+			else if (!open && value.includes(item)) this.props.setValue(value.filter((v) => v !== item));
+		} else if (open) {
+			if (value !== item) this.props.setValue(item);
+		} else if (value === item) {
+			this.props.setValue('');
+		}
+	}
+}
+
+export const [useAccordion, setAccordion] = createContext<AccordionState>();

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { AccordionContentProps } from '../types.js';
+
+	let { class: className, ref = $bindable(null), children, ...restProps }: AccordionContentProps = $props();
+</script>
+
+<!-- The slot is the animated grid; its single bare child collapses via min-height 0. The padded
+     div sits one level deeper — padding on the grid container or the collapsing child would
+     floor the closed track at the padding height. -->
+<div {...restProps} data-slot="accordion-content" class="text-sm" bind:this={ref}>
+	<div>
+		<div class={join('pt-0 pb-4', className)}>
+			{@render children?.()}
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import { createSettleRunner } from '../../../internal/animations-settled.svelte.js';
+	import { useAccordion } from '../accordion.svelte.js';
+	import type { AccordionItemProps } from '../types.js';
+
+	let { value, disabled = false, class: className, ref = $bindable(null), children, ...restProps }: AccordionItemProps = $props();
+
+	const accordion = useAccordion();
+	const open = $derived(accordion.includes(value));
+
+	// `rendered` keeps the `open` attribute through the closing transition so the content
+	// stays in the DOM while 1fr→0fr plays — including a sibling force-closed by the
+	// single-type exclusivity; it drops once the subtree's animations settle.
+	// svelte-ignore state_referenced_locally -- initial value only; later changes flow through the effect below.
+	let rendered = $state(accordion.includes(value));
+	const closeSettle = createSettleRunner();
+
+	$effect.pre(() => {
+		if (open) {
+			closeSettle.cancel();
+			rendered = true;
+			return;
+		}
+		if (!rendered) return;
+		if (!ref) {
+			rendered = false;
+			return;
+		}
+		closeSettle.run(ref, () => {
+			rendered = false;
+		});
+	});
+</script>
+
+<details
+	{...restProps}
+	data-slot="accordion-item"
+	data-state={open ? 'open' : 'closed'}
+	class={join('border-b last:border-b-0', disabled && 'pointer-events-none opacity-50', className)}
+	open={rendered}
+	inert={disabled || undefined}
+	onclick={(e) => {
+		// Drive state from here instead of the native toggle, so a close (own or a
+		// force-closed sibling) can animate before the browser unrenders the content.
+		const summary = (e.target as HTMLElement).closest('summary');
+		if (!summary || summary.closest('details') !== e.currentTarget) return;
+		e.preventDefault();
+		accordion.report(value, !open);
+	}}
+	ontoggle={(e) => {
+		// Native toggles that bypass the click path (find-in-page, hash reveal).
+		if (e.currentTarget.open === rendered) return;
+		accordion.report(value, e.currentTarget.open);
+	}}
+	bind:this={ref}>
+	{@render children?.()}
+</details>

package/src/lib/components/accordion/components/accordion-trigger.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import type { AccordionTriggerProps } from '../types.js';
+
+	let { class: className, ref = $bindable(null), children, ...restProps }: AccordionTriggerProps = $props();
+
+	// The one behavior <summary> lacks natively: APG arrow-key navigation between headers.
+	function onkeydown(e: KeyboardEvent) {
+		if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key)) return;
+		const summary = e.currentTarget as HTMLElement;
+		const root = summary.closest('[data-slot="accordion"]');
+		if (!root) return;
+		const triggers = [...root.querySelectorAll<HTMLElement>('summary[data-slot="accordion-trigger"]')];
+		const index = triggers.indexOf(summary);
+		if (index === -1) return;
+		e.preventDefault();
+		const next =
+			e.key === 'Home' ? 0
+			: e.key === 'End' ? triggers.length - 1
+			: (index + (e.key === 'ArrowDown' ? 1 : -1) + triggers.length) % triggers.length;
+		triggers[next]?.focus();
+	}
+</script>
+
+<summary
+	{...restProps}
+	data-slot="accordion-trigger"
+	class={join(
+		'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 cursor-pointer list-none items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-3 marker:hidden',
+		className,
+	)}
+	{onkeydown}
+	bind:this={ref}>
+	{@render children?.()}
+	<ChevronDownIcon
+		class="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 in-data-open:rotate-180" />
+</summary>

package/src/lib/components/accordion/components/accordion.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { AccordionState, setAccordion } from '../accordion.svelte.js';
+	import type { AccordionRootProps } from '../types.js';
+
+	let {
+		type = 'single',
+		value = $bindable(type === 'single' ? '' : []),
+		ref = $bindable(null),
+		children,
+		...restProps
+	}: AccordionRootProps = $props();
+
+	setAccordion(
+		new AccordionState({
+			type: () => type,
+			value: () => value ?? (type === 'single' ? '' : []),
+			setValue: (v) => (value = v),
+		}),
+	);
+</script>
+
+<div data-slot="accordion" bind:this={ref} {...restProps}>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,11 @@
+export { default as Root } from './components/accordion.svelte';
+export { default as Item } from './components/accordion-item.svelte';
+export { default as Trigger } from './components/accordion-trigger.svelte';
+export { default as Content } from './components/accordion-content.svelte';
+
+export type {
+	AccordionRootProps as RootProps,
+	AccordionItemProps as ItemProps,
+	AccordionTriggerProps as TriggerProps,
+	AccordionContentProps as ContentProps,
+} from './types.js';

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

@@ -0,0 +1,19 @@
+import type { HTMLAttributes, SvelteHTMLElements } from 'svelte/elements';
+import type { WithElementRef } from '../../internal/utils.js';
+import type { AccordionType } from './accordion.svelte.js';
+
+export type AccordionRootProps = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+	/** 'single' groups the items' `<details>` by name so the browser enforces one-open. */
+	type?: AccordionType;
+	/** The open item value(s) — string for single, string[] for multiple. Bindable. */
+	value?: string | string[];
+};
+
+export type AccordionItemProps = WithElementRef<SvelteHTMLElements['details'], HTMLDetailsElement> & {
+	value: string;
+	disabled?: boolean;
+};
+
+export type AccordionTriggerProps = WithElementRef<SvelteHTMLElements['summary']>;
+
+export type AccordionContentProps = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;

package/src/lib/components/alert/alert-action.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="alert-action" class={join('absolute top-2.5 right-3', className)} {...restProps}>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,18 @@
+<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="alert-description"
+	class={join(
+		'text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
+		className,
+	)}
+	{...restProps}>
+	{@render children?.()}
+</div>

package/src/lib/components/alert/alert-title.svelte

@@ -0,0 +1,18 @@
+<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="alert-title"
+	class={join(
+		'font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
+		className,
+	)}
+	{...restProps}>
+	{@render children?.()}
+</div>

package/src/lib/components/alert/alert.svelte

@@ -0,0 +1,37 @@
+<script lang="ts" module>
+	import { declareVariants, type VariantProps } from 'overrule';
+
+	export const alertVariants = declareVariants({
+		base: "grid gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 group/alert relative w-full",
+		variants: {
+			variant: {
+				default: 'bg-card text-card-foreground',
+				destructive: 'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	});
+
+	export type AlertVariant = VariantProps<typeof alertVariants>['variant'];
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { WithElementRef } from '../../internal/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = 'default',
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: AlertVariant;
+	} = $props();
+</script>
+
+<div bind:this={ref} data-slot="alert" role="alert" class={alertVariants({ variant, class: className })} {...restProps}>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,17 @@
+import Root from './alert.svelte';
+import Description from './alert-description.svelte';
+import Title from './alert-title.svelte';
+import Action from './alert-action.svelte';
+export { alertVariants, type AlertVariant } from './alert.svelte';
+
+export {
+	Root,
+	Description,
+	Title,
+	Action,
+	//
+	Root as Alert,
+	Description as AlertDescription,
+	Title as AlertTitle,
+	Action as AlertAction,
+};