sheer-ui 0.0.0

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

@@ -0,0 +1,128 @@
+<script lang="ts">
+	import CalendarIcon from '@lucide/svelte/icons/calendar';
+	import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import { DateFormatter, type DateValue } from '@internationalized/date';
+	import type { DateRange } from '../../internal/index.js';
+	import { toDate } from '../../internal/date-time/utils.js';
+	import { join } from 'overrule';
+	import type { ClassValue } from 'svelte/elements';
+	import { buttonVariants } from '../../components/button';
+	import { RangeCalendar } from '../../components/range-calendar';
+	import { Popover } from '../../components/popover';
+	import * as Resizable from '../../components/resizable';
+
+	interface Props {
+		/** Selected range as `@internationalized/date` `DateValue`s — every date prop and callback speaks the same type. */
+		value?: DateRange;
+		placeholder?: string;
+		dateFormat?: Intl.DateTimeFormatOptions['dateStyle'];
+		locale?: string;
+		disabled?: boolean;
+		class?: ClassValue;
+		triggerClass?: ClassValue;
+		contentClass?: ClassValue;
+		align?: 'start' | 'center' | 'end';
+		side?: 'top' | 'right' | 'bottom' | 'left';
+		numberOfMonths?: number;
+		weekdayFormat?: 'short' | 'long' | 'narrow';
+		minValue?: DateValue;
+		maxValue?: DateValue;
+	}
+
+	let {
+		value = $bindable(),
+		placeholder = 'Pick a date range',
+		dateFormat = 'medium',
+		locale = 'en-US',
+		disabled = false,
+		class: className,
+		triggerClass,
+		contentClass,
+		align = 'start',
+		side = 'bottom',
+		numberOfMonths = 1,
+		weekdayFormat = 'short',
+		minValue,
+		maxValue,
+	}: Props = $props();
+
+	const fmtDay = (d: DateValue) => new DateFormatter(locale, { dateStyle: dateFormat }).format(toDate(d));
+	const displayValue = $derived(
+		value?.start ? (value.end ? `${fmtDay(value.start)} – ${fmtDay(value.end)}` : fmtDay(value.start)) : placeholder,
+	);
+</script>
+
+<div class={join('grid gap-2', className)}>
+	<Popover.Root>
+		<Popover.Trigger
+			{disabled}
+			class={buttonVariants({
+				variant: 'outline',
+				class: ['w-70 justify-start! text-start font-normal!', !value?.start && 'text-muted-foreground', triggerClass],
+			})}>
+			<CalendarIcon class="size-4" />
+			{displayValue}
+		</Popover.Trigger>
+		<Popover.Content class={join('w-auto! p-0!', contentClass)} {align} {side}>
+			<RangeCalendar.Root bind:value {minValue} {maxValue} {numberOfMonths} {weekdayFormat} {locale} class="p-3">
+				{#snippet children({ months, weekdays })}
+					<RangeCalendar.Header class="flex items-center justify-between">
+						<RangeCalendar.PrevButton class="inline-grid size-7 place-items-center rounded-md hover:bg-muted">
+							<ChevronLeftIcon class="size-4" />
+						</RangeCalendar.PrevButton>
+						<RangeCalendar.Heading class="text-sm font-medium" />
+						<RangeCalendar.NextButton class="inline-grid size-7 place-items-center rounded-md hover:bg-muted">
+							<ChevronRightIcon class="size-4" />
+						</RangeCalendar.NextButton>
+					</RangeCalendar.Header>
+					{#snippet monthGrid(month: (typeof months)[number])}
+						<RangeCalendar.Grid class="w-full border-collapse select-none space-y-1">
+							<RangeCalendar.GridHead>
+								<RangeCalendar.GridRow class="flex w-full justify-between">
+									{#each weekdays as day, di (di)}
+										<RangeCalendar.HeadCell class="w-9 rounded-md text-xs font-normal! text-muted-foreground">
+											{day.slice(0, 2)}
+										</RangeCalendar.HeadCell>
+									{/each}
+								</RangeCalendar.GridRow>
+							</RangeCalendar.GridHead>
+							<RangeCalendar.GridBody>
+								{#each month.weeks as weekDates, wi (wi)}
+									<RangeCalendar.GridRow class="mt-1 flex w-full">
+										{#each weekDates as date, ci (ci)}
+											<RangeCalendar.Cell
+												{date}
+												month={month.value}
+												class="relative size-9 p-0! text-center text-sm data-highlighted:bg-accent data-selection-end:rounded-r-md data-selection-start:rounded-l-md">
+												<RangeCalendar.Day
+													class="inline-grid size-9 place-items-center whitespace-nowrap rounded-md border border-transparent bg-transparent p-0 text-sm font-normal text-foreground hover:border-foreground data-disabled:pointer-events-none data-disabled:text-foreground/30 data-outside-month:pointer-events-none data-selected:bg-primary data-selected:font-medium data-selected:text-primary-foreground data-unavailable:text-muted-foreground data-unavailable:line-through" />
+											</RangeCalendar.Cell>
+										{/each}
+									</RangeCalendar.GridRow>
+								{/each}
+							</RangeCalendar.GridBody>
+						</RangeCalendar.Grid>
+					{/snippet}
+					{#if months.length > 1}
+						<Resizable.PaneGroup direction="horizontal" class="pt-4">
+							{#each months as month, i (i)}
+								{#if i > 0}
+									<Resizable.Handle
+										class="mx-2 w-px shrink-0 cursor-col-resize rounded-full bg-border transition-colors hover:bg-foreground/30 data-[active]:bg-foreground/40" />
+								{/if}
+								<Resizable.Pane minSize={30} defaultSize={100 / months.length}>
+									{@render monthGrid(month)}
+								</Resizable.Pane>
+							{/each}
+						</Resizable.PaneGroup>
+					{:else}
+						<div class="pt-4">
+							{@render monthGrid(months[0]!)}
+						</div>
+					{/if}
+				{/snippet}
+			</RangeCalendar.Root>
+		</Popover.Content>
+	</Popover.Root>
+</div>

package/src/lib/blocks/index.ts

@@ -0,0 +1,12 @@
+export * from './copy-button';
+export * from './user-avatar';
+export { default as PhoneInput } from './PhoneInput.svelte';
+export { default as Calendar } from './calendar.svelte';
+export { default as Appearance } from './Appearance.svelte';
+export { default as BoundaryFailed } from './BoundaryFailed.svelte';
+export { default as ErrorPage } from './ErrorPage.svelte';
+export { default as Footer } from './Footer.svelte';
+export { default as Header } from './Header.svelte';
+export { default as Heading } from './Heading.svelte';
+export { default as MobileNav } from './MobileNav.svelte';
+export { default as Section } from './Section.svelte';

package/src/lib/blocks/mockups/Browser.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let { title = '', children }: { title?: string; children: Snippet } = $props();
+</script>
+
+<div class="overflow-hidden rounded-xl border">
+	<div class="flex items-center gap-3 border-b bg-muted/30 px-4 py-2">
+		<div class="flex gap-1.5">
+			<div class="size-2.5 rounded-full bg-muted-foreground/15"></div>
+			<div class="size-2.5 rounded-full bg-muted-foreground/15"></div>
+			<div class="size-2.5 rounded-full bg-muted-foreground/15"></div>
+		</div>
+		<div class="mx-auto max-w-xs flex-1 rounded-md bg-muted/50 px-3 py-0.5 text-center">
+			<span class="truncate text-xs text-muted-foreground/60">{title || ''}</span>
+		</div>
+		<div class="w-9"></div>
+	</div>
+	<div>
+		{@render children()}
+	</div>
+</div>

package/src/lib/blocks/mockups/Phone.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let { children, nav }: { children?: Snippet; nav?: Snippet } = $props();
+</script>
+
+<div class="relative">
+	<!-- Side buttons -->
+	<div class="absolute w-0.5 bg-foreground/20 rounded-md top-9/50 h-1/25 left-[-2.5px]"></div>
+	<div class="absolute w-0.5 bg-foreground/20 rounded-md top-13/50 h-2/25 left-[-2.5px]"></div>
+	<div class="absolute w-0.5 bg-foreground/20 rounded-md top-18/50 h-2/25 left-[-2.5px]"></div>
+	<div class="absolute w-0.5 bg-foreground/20 rounded-md top-7/25 h-1/10 -right-0.5"></div>
+
+	<!-- Phone outer frame -->
+	<div class="aspect-9.5/19.5 rounded-(--card-radius) bg-foreground/20 p-(--card-padding) [--card-radius:3.2rem] [--card-padding:--spacing(.50)]">
+		<!-- Black bezel -->
+		<div class="size-full rounded-[calc(var(--card-radius)-var(--card-padding))] p-(--card-bezel-padding) bg-black [--card-bezel-padding:calc(var(--card-padding)*2.5)]">
+			<!-- Screen -->
+			<div class="size-full rounded-[calc(var(--card-radius)-var(--card-padding)-(var(--card-bezel-padding)))] bg-muted/90 overflow-hidden flex flex-col">
+				<!-- Dynamic Island -->
+				<div class="pt-2 flex justify-center shrink-10">
+					<div class="w-1/3 h-6 bg-background rounded-full"></div>
+				</div>
+
+				<!-- Content -->
+				<div class="h-full overflow-hidden">
+					{@render children?.()}
+				</div>
+
+				<!-- Nav bar -->
+				{#if nav}
+					<div class="flex justify-around py-[calc(var(--card-bezel-padding)*2)]">
+						{@render nav()}
+					</div>
+				{/if}
+
+				<!-- Home indicator -->
+				<div class="py-(--card-bezel-padding) flex justify-center shrink-0">
+					<div class="w-1/3 h-1 bg-foreground/10 rounded-full"></div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

package/src/lib/blocks/mockups/index.ts

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

package/src/lib/blocks/tab-nav/index.ts

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

package/src/lib/blocks/tab-nav/tab-nav.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { ClassValue } from 'svelte/elements';
+	type Tab = { id: string; label: string; href: string };
+	let {
+		tabs,
+		activeTab,
+		class: className,
+	}: {
+		tabs: Tab[];
+		activeTab: string;
+		class?: ClassValue;
+	} = $props();
+</script>
+
+<div class={join('relative', className)} role="tablist" aria-orientation="horizontal">
+	<div class="flex gap-4">
+		{#each tabs as tab (tab.id)}
+			<a
+				href={tab.href}
+				role="tab"
+				aria-selected={activeTab === tab.id}
+				class="relative px-1 pb-2.5 text-sm font-medium transition-colors {activeTab === tab.id
+					? 'text-foreground'
+					: 'text-muted-foreground hover:text-foreground/80'}">
+				{tab.label}
+				{#if activeTab === tab.id}
+					<span class="tab-indicator absolute bottom-0 left-0 right-0 h-0.5 rounded-full bg-foreground"></span>
+				{/if}
+			</a>
+		{/each}
+	</div>
+	<div class="absolute bottom-0 left-0 right-0 h-px bg-border"></div>
+</div>
+
+<style>
+	.tab-indicator {
+		view-transition-name: tab-indicator;
+	}
+	@media (prefers-reduced-motion: no-preference) {
+		::view-transition-group(tab-indicator) {
+			animation-duration: 150ms;
+			animation-timing-function: ease-in-out;
+		}
+	}
+</style>

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

@@ -0,0 +1,16 @@
+import TimeInput from './time-input.svelte';
+import TimePicker from './time-picker.svelte';
+import TimeRangeInput from './time-range-input.svelte';
+import TimeRangePicker from './time-range-picker.svelte';
+
+export {
+	TimePicker,
+	TimeRangePicker,
+	TimeInput,
+	TimeRangeInput,
+	//
+	TimePicker as Root,
+	TimeRangePicker as Range,
+	TimeInput as Input,
+	TimeRangeInput as RangeInput,
+};

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

@@ -0,0 +1,118 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { ClassValue } from 'svelte/elements';
+	import * as Select from '../../components/select';
+	import { Button } from '../../components/button';
+
+	interface Props {
+		value?: string;
+		placeholder?: string;
+		disabled?: boolean;
+		class?: ClassValue;
+		triggerClass?: ClassValue;
+		interval?: 15 | 30 | 60;
+		use24Hour?: boolean;
+	}
+
+	let {
+		value = $bindable(''),
+		placeholder = 'Time',
+		disabled = false,
+		class: className,
+		triggerClass,
+		interval = 30,
+		use24Hour = false,
+	}: Props = $props();
+
+	// Generate time slots based on mode
+	const slots = $derived.by(() => {
+		const result: string[] = [];
+		if (use24Hour) {
+			// 24-hour: 0:00, 0:30, 1:00, ... 23:30
+			for (let h = 0; h < 24; h++) {
+				for (let m = 0; m < 60; m += interval) {
+					result.push(`${h}:${String(m).padStart(2, '0')}`);
+				}
+			}
+		} else {
+			// 12-hour: 12, 12:30, 1, 1:30, ... 11, 11:30
+			for (const h of [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]) {
+				for (let m = 0; m < 60; m += interval) {
+					result.push(m === 0 ? `${h}` : `${h}:${String(m).padStart(2, '0')}`);
+				}
+			}
+		}
+		return result;
+	});
+
+	// Parse stored value "HH:MM" -> display info
+	const parsed = $derived.by(() => {
+		if (!value) return null;
+		const parts = value.split(':').map(Number);
+		const h = parts[0] ?? 0;
+		const m = parts[1] ?? 0;
+		const period: 'AM' | 'PM' = h >= 12 ? 'PM' : 'AM';
+		const hour12 = h === 0 ? 12 : h > 12 ? h - 12 : h;
+		return { hour24: h, hour12, minute: m, period };
+	});
+
+	// Display value for trigger - depends on mode
+	const display = $derived.by(() => {
+		if (!parsed) return '';
+		if (use24Hour) {
+			// zero-padded hour, matching formatTimeDisplay's h23 output ("09:30", not "9:30")
+			return `${String(parsed.hour24).padStart(2, '0')}:${String(parsed.minute).padStart(2, '0')}`;
+		}
+		return parsed.minute === 0 ? `${parsed.hour12}` : `${parsed.hour12}:${String(parsed.minute).padStart(2, '0')}`;
+	});
+
+	const period = $derived<'AM' | 'PM'>(parsed?.period ?? 'AM');
+
+	// Convert to 24h format string for storage
+	function to24(hour: number, minute: number, p?: 'AM' | 'PM'): string {
+		let h = hour;
+		if (!use24Hour && p) {
+			if (p === 'AM' && h === 12) h = 0;
+			else if (p === 'PM' && h !== 12) h += 12;
+		}
+		return `${String(h).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
+	}
+
+	function handleSelect(slot: string | undefined) {
+		if (!slot) return;
+		const parts = slot.includes(':') ? slot.split(':').map(Number) : [Number(slot), 0];
+		const h = parts[0] ?? 0;
+		const m = parts[1] ?? 0;
+		value = use24Hour ? to24(h, m) : to24(h, m, period);
+	}
+
+	function togglePeriod() {
+		if (!parsed) {
+			value = period === 'AM' ? '12:00' : '00:00';
+		} else {
+			const hour = parsed.hour12 ?? 12;
+			value = to24(hour, parsed.minute, period === 'AM' ? 'PM' : 'AM');
+		}
+	}
+</script>
+
+<div class={join('flex items-center gap-1', className)}>
+	<Select.Root
+		value={display || ''}
+		onchange={(e) => handleSelect(e.currentTarget.value || undefined)}
+		{disabled}
+		{placeholder}
+		maxHeight="12.5rem"
+		class={join('h-8', use24Hour ? 'w-18!' : 'w-15!', triggerClass)}
+		triggerClass="justify-center px-2">
+		{#each slots as slot (slot)}
+			<Select.Option value={slot}>{slot}</Select.Option>
+		{/each}
+	</Select.Root>
+
+	{#if !use24Hour}
+		<Button type="button" variant="outline" size="sm" {disabled} onclick={togglePeriod} class="w-10 px-0 font-medium">
+			{period}
+		</Button>
+	{/if}
+</div>

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

@@ -0,0 +1,93 @@
+<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 { compareTime, isTimeInRange, resolveTimeSlots, type TimeSlot, type TimeSlotPreset } from './time-slots';
+
+	interface Props {
+		value?: string;
+		placeholder?: string;
+		disabled?: boolean;
+		class?: ClassValue;
+		triggerClass?: 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;
+		isTimeDisabled?: (time: string) => boolean;
+		use24Hour?: boolean;
+	}
+
+	let {
+		value = $bindable(),
+		placeholder = 'Select time',
+		disabled = false,
+		class: className,
+		triggerClass,
+		align = 'start',
+		side = 'bottom',
+		preset = 'extended',
+		slots,
+		interval = 60,
+		startHour = 7,
+		endHour = 21,
+		minTime,
+		maxTime,
+		isTimeDisabled,
+		use24Hour = false,
+	}: Props = $props();
+
+	// Generate time slots based on configuration
+	const timeSlots = $derived(resolveTimeSlots({ slots, preset, interval, startHour, endHour, use24Hour }));
+
+	// Filter slots based on constraints
+	const filteredSlots = $derived.by(() => {
+		return timeSlots.filter((slot) => {
+			// Check min/max constraints
+			if (minTime && maxTime) {
+				if (!isTimeInRange(slot.value, minTime, maxTime)) return false;
+			} else if (minTime && compareTime(slot.value, minTime) < 0) {
+				return false;
+			} else if (maxTime && compareTime(slot.value, maxTime) > 0) {
+				return false;
+			}
+
+			// Check custom disabled function
+			if (isTimeDisabled?.(slot.value)) return false;
+
+			return true;
+		});
+	});
+</script>
+
+<div class={join('grid gap-2', className)}>
+	<Select.Root
+		{value}
+		onchange={(e) => (value = e.currentTarget.value || undefined)}
+		{disabled}
+		{placeholder}
+		side={side === 'top' ? 'top' : 'bottom'}
+		{align}
+		maxHeight="300px"
+		class={buttonVariants({
+			variant: 'outline',
+			class: 'w-45 justify-start! text-start font-normal!',
+		})}
+		triggerClass={join('justify-start px-0', !value && 'text-muted-foreground', triggerClass)}>
+		{#snippet icon()}
+			<Clock class="size-4" />
+		{/snippet}
+		{#each filteredSlots as slot (slot.value)}
+			<Select.Option value={slot.value}>{slot.label}</Select.Option>
+		{/each}
+	</Select.Root>
+</div>

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

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import Clock from '@lucide/svelte/icons/clock';
+	import { join } from 'overrule';
+	import type { ClassValue } from 'svelte/elements';
+	import TimeInput from './time-input.svelte';
+
+	interface Props {
+		value?: { start: string; end: string };
+		disabled?: boolean;
+		class?: ClassValue;
+		triggerClass?: ClassValue;
+		interval?: 15 | 30 | 60;
+		use24Hour?: boolean;
+	}
+
+	let {
+		value = $bindable({ start: '', end: '' }),
+		disabled = false,
+		class: className,
+		triggerClass,
+		interval = 30,
+		use24Hour = false,
+	}: Props = $props();
+</script>
+
+<div class={join('flex items-center gap-3', className)}>
+	<Clock class="size-4 text-muted-foreground shrink-0" />
+
+	<TimeInput bind:value={value.start} {disabled} {interval} {use24Hour} {triggerClass} placeholder="Start" />
+
+	<span class="text-muted-foreground text-sm select-none">to</span>
+
+	<TimeInput bind:value={value.end} {disabled} {interval} {use24Hour} {triggerClass} placeholder="End" />
+</div>