@dryui/ui 3.0.0 → 4.0.1

package/src/calendar/week-utils.ts

@@ -0,0 +1,175 @@
+import { isSameDay } from '@dryui/primitives';
+import type { CalendarEvent, DayBandEvent, PositionedEvent } from './types.js';
+
+export function startOfDay(date: Date): Date {
+	const d = new Date(date);
+	d.setHours(0, 0, 0, 0);
+	return d;
+}
+
+export function addDays(date: Date, n: number): Date {
+	const d = new Date(date);
+	d.setDate(d.getDate() + n);
+	return d;
+}
+
+export function getWeekDays(focused: Date, weekStartDay: number): Date[] {
+	const start = startOfDay(focused);
+	const offset = (start.getDay() - weekStartDay + 7) % 7;
+	const monday = addDays(start, -offset);
+	return Array.from({ length: 7 }, (_, i) => addDays(monday, i));
+}
+
+export function dayMinutes(date: Date): number {
+	return date.getHours() * 60 + date.getMinutes();
+}
+
+export function isMultiDay(event: CalendarEvent): boolean {
+	if (event.allDay) return true;
+	return !isSameDay(event.start, event.end);
+}
+
+interface PositionedAccumulator {
+	dayIndex: number;
+	startMinutes: number;
+	endMinutes: number;
+	event: CalendarEvent;
+}
+
+function overlaps(a: PositionedAccumulator, b: PositionedAccumulator): boolean {
+	return (
+		a.dayIndex === b.dayIndex && a.startMinutes < b.endMinutes && b.startMinutes < a.endMinutes
+	);
+}
+
+export function layoutWeekEvents(
+	events: CalendarEvent[],
+	weekDays: Date[],
+	startHour: number,
+	endHour: number
+): { positioned: PositionedEvent[]; band: DayBandEvent[] } {
+	const positioned: PositionedEvent[] = [];
+	const band: DayBandEvent[] = [];
+	const minMinutes = startHour * 60;
+	const maxMinutes = endHour * 60;
+
+	const accumulator: PositionedAccumulator[] = [];
+
+	const sortedBand: { event: CalendarEvent; startDayIndex: number; endDayIndex: number }[] = [];
+
+	for (const event of events) {
+		const isMulti = isMultiDay(event);
+
+		if (isMulti) {
+			const startIdx = weekDays.findIndex(
+				(d) => isSameDay(d, event.start) || d.getTime() > startOfDay(event.start).getTime()
+			);
+			const endIdx = (() => {
+				let last = -1;
+				weekDays.forEach((d, i) => {
+					if (d.getTime() <= startOfDay(event.end).getTime()) last = i;
+				});
+				return last;
+			})();
+
+			if (startIdx !== -1 && endIdx !== -1 && endIdx >= startIdx) {
+				sortedBand.push({
+					event,
+					startDayIndex: Math.max(0, startIdx),
+					endDayIndex: Math.min(6, endIdx)
+				});
+			}
+			continue;
+		}
+
+		const dayIndex = weekDays.findIndex((d) => isSameDay(d, event.start));
+		if (dayIndex === -1) continue;
+
+		const start = Math.max(minMinutes, dayMinutes(event.start));
+		const end = Math.min(maxMinutes, dayMinutes(event.end));
+		if (end <= start) continue;
+
+		accumulator.push({ dayIndex, startMinutes: start, endMinutes: end, event });
+	}
+
+	accumulator.sort((a, b) =>
+		a.dayIndex !== b.dayIndex ? a.dayIndex - b.dayIndex : a.startMinutes - b.startMinutes
+	);
+
+	const columnsByDay = new Map<number, PositionedAccumulator[][]>();
+	for (const item of accumulator) {
+		const dayCols = columnsByDay.get(item.dayIndex) ?? [];
+		let placed = false;
+		for (let c = 0; c < dayCols.length; c++) {
+			const col = dayCols[c]!;
+			if (col.every((existing) => !overlaps(existing, item))) {
+				col.push(item);
+				positioned.push({
+					event: item.event,
+					dayIndex: item.dayIndex,
+					startMinutes: item.startMinutes,
+					endMinutes: item.endMinutes,
+					column: c,
+					columnCount: 0
+				});
+				placed = true;
+				break;
+			}
+		}
+		if (!placed) {
+			dayCols.push([item]);
+			positioned.push({
+				event: item.event,
+				dayIndex: item.dayIndex,
+				startMinutes: item.startMinutes,
+				endMinutes: item.endMinutes,
+				column: dayCols.length - 1,
+				columnCount: 0
+			});
+		}
+		columnsByDay.set(item.dayIndex, dayCols);
+	}
+
+	for (const p of positioned) {
+		const cols = columnsByDay.get(p.dayIndex);
+		p.columnCount = cols ? cols.length : 1;
+	}
+
+	sortedBand.sort((a, b) => a.startDayIndex - b.startDayIndex);
+	const rows: { startDayIndex: number; endDayIndex: number }[][] = [];
+	for (const entry of sortedBand) {
+		let placed = false;
+		for (let r = 0; r < rows.length; r++) {
+			const row = rows[r]!;
+			if (
+				row.every(
+					(existing) =>
+						entry.startDayIndex > existing.endDayIndex || entry.endDayIndex < existing.startDayIndex
+				)
+			) {
+				row.push({ startDayIndex: entry.startDayIndex, endDayIndex: entry.endDayIndex });
+				band.push({ ...entry, row: r });
+				placed = true;
+				break;
+			}
+		}
+		if (!placed) {
+			rows.push([{ startDayIndex: entry.startDayIndex, endDayIndex: entry.endDayIndex }]);
+			band.push({ ...entry, row: rows.length - 1 });
+		}
+	}
+
+	return { positioned, band };
+}
+
+export function formatTime(date: Date, locale: string): string {
+	return new Intl.DateTimeFormat(locale, { hour: 'numeric', minute: '2-digit' })
+		.format(date)
+		.replace(/\s/g, ' ');
+}
+
+export function formatHourLabel(hour: number, locale: string): string {
+	const date = new Date();
+	date.setHours(hour, 0, 0, 0);
+	return new Intl.DateTimeFormat(locale, { hour: 'numeric' }).format(date).replace(/\s/g, ' ');
+}

package/src/carousel/carousel-button-dots.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import { VisuallyHidden } from '../visually-hidden/index.js';
+	import { getCarouselCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {}
+
+	let { class: className, ...rest }: Props = $props();
+	const ctx = getCarouselCtx();
+</script>
+
+<div
+	role="group"
+	aria-label="Choose slide to display"
+	data-carousel-dots
+	class={className}
+	{...rest}
+>
+	{#each Array(ctx.totalSlides) as _, i (i)}
+		{@const isActive = ctx.activeIndex === i}
+		<Button
+			variant="toggle"
+			size="icon-sm"
+			type="button"
+			aria-controls={ctx.getSlideId(i)}
+			aria-disabled={isActive ? true : undefined}
+			data-active={isActive ? '' : undefined}
+			onclick={() => {
+				if (!isActive) {
+					ctx.scrollTo(i);
+				}
+			}}
+		>
+			<VisuallyHidden>
+				Show slide {i + 1} of {ctx.totalSlides}
+				{#if isActive}
+					(current slide)
+				{/if}
+			</VisuallyHidden>
+			<span class="dot" data-active={isActive ? '' : undefined} aria-hidden="true"></span>
+		</Button>
+	{/each}
+</div>
+
+<style>
+	[data-carousel-dots] {
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		gap: var(--dry-space-2);
+		justify-self: center;
+		padding-top: var(--dry-space-3);
+	}
+
+	.dot {
+		display: inline-grid;
+		block-size: var(--dry-space-2);
+		padding-inline: calc(var(--dry-space-2) / 2);
+		border-radius: 9999px;
+		background: var(--dry-color-text-weak);
+		opacity: 0.55;
+		transition:
+			padding-inline var(--dry-duration-fast) var(--dry-ease-default),
+			background-color var(--dry-duration-fast) var(--dry-ease-default),
+			opacity var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	.dot[data-active] {
+		opacity: 1;
+		padding-inline: var(--dry-space-3);
+		background: var(--dry-color-fill-brand);
+	}
+</style>

package/src/carousel/carousel-button-next.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import CarouselNavButton from './carousel-nav-button.svelte';
+
+	interface Props extends HTMLButtonAttributes {
+		children?: Snippet;
+	}
+
+	let props: Props = $props();
+</script>
+
+<CarouselNavButton direction="next" {...props} />

package/src/carousel/carousel-button-prev.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import CarouselNavButton from './carousel-nav-button.svelte';
+
+	interface Props extends HTMLButtonAttributes {
+		children?: Snippet;
+	}
+
+	let props: Props = $props();
+</script>
+
+<CarouselNavButton direction="prev" {...props} />

package/src/carousel/carousel-button-thumbnails.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import { VisuallyHidden } from '../visually-hidden/index.js';
+	import { getCarouselCtx } from './context.svelte.js';
+
+	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+		position?: 'bottom' | 'left' | 'right';
+		children: Snippet<[{ index: number; isActive: boolean; scrollTo: (index: number) => void }]>;
+	}
+
+	let { position = 'bottom', class: className, children, ...rest }: Props = $props();
+	const ctx = getCarouselCtx();
+</script>
+
+<div
+	role="group"
+	aria-label="Choose slide to display"
+	data-carousel-thumbnails
+	data-position={position}
+	class={className}
+	{...rest}
+>
+	{#each Array(ctx.totalSlides) as _, i (i)}
+		{@const isActive = ctx.activeIndex === i}
+		<Button
+			variant="bare"
+			type="button"
+			aria-controls={ctx.getSlideId(i)}
+			aria-disabled={isActive ? true : undefined}
+			data-active={isActive ? '' : undefined}
+			onclick={() => {
+				if (!isActive) {
+					ctx.scrollTo(i);
+				}
+			}}
+		>
+			<VisuallyHidden>
+				Show slide {i + 1} of {ctx.totalSlides}
+				{#if isActive}
+					(current slide)
+				{/if}
+			</VisuallyHidden>
+			<span class="thumbnail-preview" aria-hidden="true">
+				{@render children({ index: i, isActive, scrollTo: ctx.scrollTo })}
+			</span>
+		</Button>
+	{/each}
+</div>
+
+<style>
+	[data-carousel-thumbnails] {
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		gap: var(--dry-space-2, 0.5rem);
+		padding: var(--dry-space-2, 0.5rem) 0;
+		overflow-x: auto;
+		scrollbar-width: none;
+	}
+
+	[data-carousel-thumbnails]::-webkit-scrollbar {
+		display: none;
+	}
+
+	[data-carousel-thumbnails][data-position='bottom'] {
+		justify-self: center;
+	}
+
+	[data-carousel-thumbnails][data-position='left'],
+	[data-carousel-thumbnails][data-position='right'] {
+		grid-auto-flow: row;
+		grid-auto-columns: unset;
+		overflow-y: auto;
+		overflow-x: hidden;
+	}
+
+	.thumbnail-preview {
+		display: inline-grid;
+	}
+</style>

package/src/carousel/carousel-nav-button.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import NavArrowButton from '../internal/nav-arrow-button.svelte';
+	import { getCarouselCtx } from './context.svelte.js';
+
+	interface Props extends HTMLButtonAttributes {
+		direction: 'prev' | 'next';
+		children?: Snippet;
+	}
+
+	let { direction, children, disabled, onclick: consumerClick, ...rest }: Props = $props();
+	const ctx = getCarouselCtx();
+
+	const canScroll = $derived(direction === 'prev' ? ctx.canScrollPrev : ctx.canScrollNext);
+</script>
+
+<NavArrowButton
+	{direction}
+	variant="nav"
+	size="icon"
+	label={direction === 'prev' ? 'Previous slide' : 'Next slide'}
+	disabled={disabled ?? !canScroll}
+	onclick={(e) => {
+		if (direction === 'prev') ctx.scrollPrev();
+		else ctx.scrollNext();
+		consumerClick?.(e);
+	}}
+	{children}
+	{...rest}
+/>