@dryui/ui 1.1.1 → 1.1.2

package/dist/date-range-picker/date-range-picker-button-calendar.svelte

@@ -1,271 +1,96 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import Button from '../button/button.svelte';
+	import { isSameDay } from '@dryui/primitives';
 	import { getDateRangePickerCtx } from './context.svelte.js';
-	import {
-		getCalendarDays,
-		isSameDay,
-		isToday,
-		isDateInRange,
-		formatDate
-	} from '@dryui/primitives';
-	import {
-		generateWeekdayLabels,
-		splitIntoWeeks,
-		getDayISOString,
-		handleCalendarKeydown,
-		focusCalendarDay
-	} from '../internal/calendar-grid-utils.js';
+	import CalendarGridButton, {
+		type CalendarGridAdapter
+	} from '../internal/calendar-grid-button.svelte';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {}
 
-	let { class: className, ...rest }: Props = $props();
+	let props: Props = $props();
 
 	const ctx = getDateRangePickerCtx();
 
-	let containerEl = $state<HTMLDivElement>();
-
-	function bindContainer(node: HTMLDivElement) {
-		containerEl = node;
-
-		return () => {
-			if (containerEl === node) {
-				containerEl = undefined;
-			}
-		};
-	}
-
-	const weekdayLabels = $derived(generateWeekdayLabels(ctx.locale, ctx.weekStartDay));
-
-	const calendarDays = $derived(getCalendarDays(ctx.viewYear, ctx.viewMonth, ctx.weekStartDay));
-
-	const monthYearLabel = $derived(
-		formatDate(new Date(ctx.viewYear, ctx.viewMonth, 1), ctx.locale, {
-			month: 'long',
-			year: 'numeric'
-		})
-	);
-
-	const weeks = $derived(splitIntoWeeks(calendarDays));
-
-	function isInSelectedRange(day: Date): boolean {
-		const start = ctx.startDate;
-		const end = ctx.endDate;
-		if (!start || !end) return false;
-		const time = day.getTime();
-		return time > start.getTime() && time < end.getTime();
-	}
-
 	function isInPreviewRange(day: Date): boolean {
 		if (ctx.selecting !== 'end' || !ctx.startDate || !ctx.hoverDate) return false;
 		const time = day.getTime();
 		const startTime = ctx.startDate.getTime();
 		const hoverTime = ctx.hoverDate.getTime();
-		if (hoverTime >= startTime) {
-			return time >= startTime && time <= hoverTime;
-		} else {
-			return time >= hoverTime && time <= startTime;
-		}
+		const lo = Math.min(startTime, hoverTime);
+		const hi = Math.max(startTime, hoverTime);
+		return time >= lo && time <= hi;
+	}
+
+	function isInSelectedRange(day: Date): boolean {
+		if (!ctx.startDate || !ctx.endDate) return false;
+		const time = day.getTime();
+		return time > ctx.startDate.getTime() && time < ctx.endDate.getTime();
 	}
 
 	function isRangeStart(day: Date): boolean {
 		if (!ctx.startDate) return false;
-		if (ctx.endDate) {
-			return isSameDay(day, ctx.startDate);
-		}
-		if (ctx.selecting === 'end' && ctx.hoverDate) {
-			if (ctx.hoverDate.getTime() < ctx.startDate.getTime()) {
-				return isSameDay(day, ctx.hoverDate);
-			}
+		if (ctx.endDate) return isSameDay(day, ctx.startDate);
+		if (
+			ctx.selecting === 'end' &&
+			ctx.hoverDate &&
+			ctx.hoverDate.getTime() < ctx.startDate.getTime()
+		) {
+			return isSameDay(day, ctx.hoverDate);
 		}
 		return isSameDay(day, ctx.startDate);
 	}
 
 	function isRangeEnd(day: Date): boolean {
-		if (ctx.endDate) {
-			return isSameDay(day, ctx.endDate);
-		}
+		if (ctx.endDate) return isSameDay(day, ctx.endDate);
 		if (ctx.selecting === 'end' && ctx.startDate && ctx.hoverDate) {
-			if (ctx.hoverDate.getTime() < ctx.startDate.getTime()) {
-				return isSameDay(day, ctx.startDate);
-			}
+			if (ctx.hoverDate.getTime() < ctx.startDate.getTime()) return isSameDay(day, ctx.startDate);
 			return isSameDay(day, ctx.hoverDate);
 		}
 		return false;
 	}
 
-	function isSelected(day: Date): boolean {
-		return isRangeStart(day) || isRangeEnd(day);
-	}
-
-	function handleDayClick(day: Date) {
-		if (!isDateInRange(day, ctx.min, ctx.max)) return;
-		ctx.selectDate(day);
-	}
-
-	function handleDayKeydown(e: KeyboardEvent, day: Date) {
-		const result = handleCalendarKeydown(e, day, {
-			onSelect: (d) => {
-				if (isDateInRange(d, ctx.min, ctx.max)) ctx.selectDate(d);
-			},
-			onEscape: () => {
-				ctx.close();
-				ctx.triggerEl?.focus();
-			},
-			setFocusedDate: (d) => ctx.setFocusedDate(d),
-			weekStartDay: ctx.weekStartDay,
-			min: ctx.min,
-			max: ctx.max
-		});
-		if (result?.type === 'navigate') {
-			requestAnimationFrame(() => focusCalendarDay(containerEl, result.newDate));
+	const adapter: CalendarGridAdapter = {
+		get viewYear() {
+			return ctx.viewYear;
+		},
+		get viewMonth() {
+			return ctx.viewMonth;
+		},
+		get locale() {
+			return ctx.locale;
+		},
+		get weekStartDay() {
+			return ctx.weekStartDay;
+		},
+		get focusedDate() {
+			return ctx.focusedDate;
+		},
+		get min() {
+			return ctx.min;
+		},
+		get max() {
+			return ctx.max;
+		},
+		get disabled() {
+			return ctx.disabled;
+		},
+		isSelected: (day) => isRangeStart(day) || isRangeEnd(day),
+		isInRange: (day) => isInSelectedRange(day) || isInPreviewRange(day),
+		isRangeStart,
+		isRangeEnd,
+		selectDate: (day) => ctx.selectDate(day),
+		setFocusedDate: (day) => ctx.setFocusedDate(day),
+		prevMonth: () => ctx.prevMonth(),
+		nextMonth: () => ctx.nextMonth(),
+		onEscape: () => {
+			ctx.close();
+			ctx.triggerEl?.focus();
+		},
+		onHover: (day) => {
+			if (ctx.selecting === 'end') ctx.setHoverDate(day);
 		}
-	}
-
-	function isDayDisabled(day: Date): boolean {
-		return !isDateInRange(day, ctx.min, ctx.max);
-	}
+	};
 </script>
 
-<div {@attach bindContainer} class={className} {...rest} data-drp-calendar>
-	<div role="group" aria-label={monthYearLabel} data-calendar-panel>
-		<div data-calendar-header>
-			<Button
-				variant="trigger"
-				size="icon-sm"
-				type="button"
-				aria-label="Previous month"
-				disabled={ctx.disabled}
-				onclick={() => ctx.prevMonth()}
-			>
-				&#8249;
-			</Button>
-			<span aria-live="polite" aria-atomic="true" data-calendar-heading>
-				{monthYearLabel}
-			</span>
-			<Button
-				variant="trigger"
-				size="icon-sm"
-				type="button"
-				aria-label="Next month"
-				disabled={ctx.disabled}
-				onclick={() => ctx.nextMonth()}
-			>
-				&#8250;
-			</Button>
-		</div>
-
-		<div role="grid" aria-label={monthYearLabel}>
-			<div role="row" data-calendar-row>
-				{#each weekdayLabels as label (label)}
-					<div role="columnheader" aria-label={label} data-calendar-columnheader>
-						<span aria-hidden="true">{label}</span>
-					</div>
-				{/each}
-			</div>
-
-			{#each weeks as week, weekIndex (weekIndex)}
-				<div role="row" data-calendar-row>
-					{#each week as day (getDayISOString(day))}
-						{@const isCurrent = day.getMonth() === ctx.viewMonth}
-						{@const selected = isSelected(day)}
-						{@const today = isToday(day)}
-						{@const disabled = isDayDisabled(day)}
-						{@const focused = isSameDay(day, ctx.focusedDate)}
-						{@const isoStr = getDayISOString(day)}
-						{@const inRange = isInSelectedRange(day) || isInPreviewRange(day)}
-						{@const rangeStart = isRangeStart(day)}
-						{@const rangeEnd = isRangeEnd(day)}
-						<div
-							role="gridcell"
-							data-calendar-cell
-							data-in-range={inRange ? '' : undefined}
-							data-range-start={rangeStart ? '' : undefined}
-							data-range-end={rangeEnd ? '' : undefined}
-						>
-							<Button
-								variant="trigger"
-								size="icon-sm"
-								type="button"
-								tabindex={focused ? 0 : -1}
-								aria-label={formatDate(day, ctx.locale, {
-									year: 'numeric',
-									month: 'long',
-									day: 'numeric'
-								})}
-								aria-pressed={selected}
-								aria-disabled={disabled}
-								data-calendar-day={isoStr}
-								data-today={today ? '' : undefined}
-								data-selected={selected ? '' : undefined}
-								data-in-range={inRange ? '' : undefined}
-								data-range-start={rangeStart ? '' : undefined}
-								data-range-end={rangeEnd ? '' : undefined}
-								data-outside-month={!isCurrent ? '' : undefined}
-								{disabled}
-								onclick={() => handleDayClick(day)}
-								onkeydown={(e) => handleDayKeydown(e, day)}
-								onmouseenter={() => {
-									if (ctx.selecting === 'end') {
-										ctx.setHoverDate(day);
-									}
-								}}
-								onmouseleave={() => {
-									if (ctx.selecting === 'end') {
-										ctx.setHoverDate(null);
-									}
-								}}
-							>
-								{day.getDate()}
-							</Button>
-						</div>
-					{/each}
-				</div>
-			{/each}
-		</div>
-	</div>
-</div>
-
-<style>
-	[data-drp-calendar] {
-		display: grid;
-		gap: var(--dry-space-2);
-		user-select: none;
-		color: var(--dry-color-text-strong);
-		font-family: var(--dry-font-sans);
-	}
-
-	[data-drp-calendar] [data-calendar-panel] {
-		display: grid;
-		gap: var(--dry-space-2);
-	}
-
-	[data-drp-calendar] [data-calendar-header] {
-		display: grid;
-		grid-template-columns: auto 1fr auto;
-		align-items: center;
-		gap: var(--dry-space-2);
-	}
-
-	[data-drp-calendar] [data-calendar-heading] {
-		font-size: var(--dry-type-small-size);
-		font-weight: 600;
-		letter-spacing: -0.01em;
-		text-align: center;
-	}
-
-	[data-drp-calendar] [role='grid'] {
-		display: grid;
-		gap: 1px;
-	}
-
-	[data-drp-calendar] [data-calendar-row] {
-		display: grid;
-		grid-template-columns: repeat(7, minmax(0, 1fr));
-	}
-
-	[data-drp-calendar] [data-calendar-cell] {
-		display: grid;
-		place-items: center;
-	}
-</style>
+<CalendarGridButton {adapter} {...props} />

package/dist/image/image.svelte

@@ -56,9 +56,12 @@
 		--dry-image-radius: var(--dry-radius-lg);
 		--dry-image-bg: var(--dry-color-bg-overlay);
 		--dry-image-object-fit: cover;
+		--dry-image-block-size: auto;
+		--dry-image-place-self: auto;
 
 		display: block;
-		height: auto;
+		block-size: var(--dry-image-block-size);
+		place-self: var(--dry-image-place-self);
 		border-radius: var(--dry-image-radius);
 		background: var(--dry-image-bg);
 		object-fit: var(--dry-image-object-fit);

package/dist/internal/calendar-grid-button.svelte

@@ -0,0 +1,260 @@
+<script lang="ts" module>
+	export interface CalendarGridAdapter {
+		readonly viewYear: number;
+		readonly viewMonth: number;
+		readonly locale: string;
+		readonly weekStartDay: number;
+		readonly focusedDate: Date;
+		readonly min: Date | null;
+		readonly max: Date | null;
+		readonly disabled: boolean;
+		isSelected: (day: Date) => boolean;
+		isInRange: (day: Date) => boolean;
+		isRangeStart: (day: Date) => boolean;
+		isRangeEnd: (day: Date) => boolean;
+		selectDate: (day: Date) => void;
+		setFocusedDate: (day: Date) => void;
+		prevMonth: () => void;
+		nextMonth: () => void;
+		onEscape?: () => void;
+		onHover?: (day: Date | null) => void;
+	}
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import {
+		getCalendarDays,
+		isSameDay,
+		isToday,
+		isDateInRange,
+		formatDate
+	} from '@dryui/primitives';
+	import {
+		generateWeekdayLabels,
+		splitIntoWeeks,
+		getDayISOString,
+		handleCalendarKeydown,
+		focusCalendarDay
+	} from './calendar-grid-utils.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		adapter: CalendarGridAdapter;
+	}
+
+	let { adapter, class: className, ...rest }: Props = $props();
+
+	let containerEl = $state<HTMLDivElement>();
+
+	function bindContainer(node: HTMLDivElement) {
+		containerEl = node;
+		return () => {
+			if (containerEl === node) containerEl = undefined;
+		};
+	}
+
+	const weekdayLabels = $derived(generateWeekdayLabels(adapter.locale, adapter.weekStartDay));
+	const calendarDays = $derived(
+		getCalendarDays(adapter.viewYear, adapter.viewMonth, adapter.weekStartDay)
+	);
+	const monthYearLabel = $derived(
+		formatDate(new Date(adapter.viewYear, adapter.viewMonth, 1), adapter.locale, {
+			month: 'long',
+			year: 'numeric'
+		})
+	);
+	const weeks = $derived(splitIntoWeeks(calendarDays));
+
+	function handleDayClick(day: Date) {
+		if (!isDateInRange(day, adapter.min, adapter.max)) return;
+		adapter.selectDate(day);
+	}
+
+	function handleDayKeydown(e: KeyboardEvent, day: Date) {
+		const result = handleCalendarKeydown(e, day, {
+			onSelect: (d) => {
+				if (isDateInRange(d, adapter.min, adapter.max)) adapter.selectDate(d);
+			},
+			onEscape: () => adapter.onEscape?.(),
+			setFocusedDate: (d) => adapter.setFocusedDate(d),
+			weekStartDay: adapter.weekStartDay,
+			min: adapter.min,
+			max: adapter.max
+		});
+		if (result?.type === 'navigate') {
+			requestAnimationFrame(() => focusCalendarDay(containerEl, result.newDate));
+		}
+	}
+</script>
+
+<div {@attach bindContainer} class={className} {...rest} data-calendar-grid>
+	<div role="group" aria-label={monthYearLabel} data-calendar-panel>
+		<div data-calendar-header>
+			<Button
+				variant="trigger"
+				size="icon-sm"
+				type="button"
+				aria-label="Previous month"
+				disabled={adapter.disabled}
+				onclick={() => adapter.prevMonth()}
+			>
+				&#8249;
+			</Button>
+			<span aria-live="polite" aria-atomic="true" data-calendar-heading>
+				{monthYearLabel}
+			</span>
+			<Button
+				variant="trigger"
+				size="icon-sm"
+				type="button"
+				aria-label="Next month"
+				disabled={adapter.disabled}
+				onclick={() => adapter.nextMonth()}
+			>
+				&#8250;
+			</Button>
+		</div>
+
+		<div role="grid" aria-label={monthYearLabel}>
+			<div role="row" data-calendar-row>
+				{#each weekdayLabels as label, i (i)}
+					<div role="columnheader" aria-label={label} data-calendar-columnheader>
+						<span aria-hidden="true">{label}</span>
+					</div>
+				{/each}
+			</div>
+
+			{#each weeks as week, weekIndex (weekIndex)}
+				<div role="row" data-calendar-row>
+					{#each week as day (getDayISOString(day))}
+						{@const isCurrent = day.getMonth() === adapter.viewMonth}
+						{@const selected = adapter.isSelected(day)}
+						{@const today = isToday(day)}
+						{@const disabled = !isDateInRange(day, adapter.min, adapter.max)}
+						{@const focused = isSameDay(day, adapter.focusedDate)}
+						{@const isoStr = getDayISOString(day)}
+						{@const inRange = adapter.isInRange(day)}
+						{@const rangeStart = adapter.isRangeStart(day)}
+						{@const rangeEnd = adapter.isRangeEnd(day)}
+						<div
+							role="gridcell"
+							data-calendar-cell
+							data-selected={selected ? '' : undefined}
+							data-today={today ? '' : undefined}
+							data-outside-month={!isCurrent ? '' : undefined}
+							data-in-range={inRange ? '' : undefined}
+							data-range-start={rangeStart ? '' : undefined}
+							data-range-end={rangeEnd ? '' : undefined}
+						>
+							<Button
+								variant="trigger"
+								size="icon-sm"
+								type="button"
+								tabindex={focused ? 0 : -1}
+								aria-label={formatDate(day, adapter.locale, {
+									year: 'numeric',
+									month: 'long',
+									day: 'numeric'
+								})}
+								aria-pressed={selected}
+								aria-disabled={disabled}
+								data-calendar-day={isoStr}
+								{disabled}
+								onclick={() => handleDayClick(day)}
+								onkeydown={(e) => handleDayKeydown(e, day)}
+								onmouseenter={() => adapter.onHover?.(day)}
+								onmouseleave={() => adapter.onHover?.(null)}
+							>
+								{day.getDate()}
+							</Button>
+						</div>
+					{/each}
+				</div>
+			{/each}
+		</div>
+	</div>
+</div>
+
+<style>
+	[data-calendar-grid] {
+		display: grid;
+		gap: var(--dry-space-2);
+		user-select: none;
+		color: var(--dry-color-text-strong);
+		font-family: var(--dry-font-sans);
+	}
+
+	[data-calendar-grid] [data-calendar-panel] {
+		display: grid;
+		gap: var(--dry-space-2);
+	}
+
+	[data-calendar-grid] [data-calendar-header] {
+		display: grid;
+		grid-template-columns: auto 1fr auto;
+		align-items: center;
+		gap: var(--dry-space-2);
+	}
+
+	[data-calendar-grid] [data-calendar-heading] {
+		font-size: var(--dry-type-small-size);
+		font-weight: 600;
+		letter-spacing: -0.01em;
+		text-align: center;
+	}
+
+	[data-calendar-grid] [data-calendar-columnheader] {
+		display: grid;
+		place-items: center;
+		min-height: var(--dry-space-7);
+		font-size: var(--dry-type-tiny-size);
+		color: var(--dry-color-text-weak);
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+	}
+
+	[data-calendar-grid] [role='grid'] {
+		display: grid;
+		gap: 1px;
+	}
+
+	[data-calendar-grid] [data-calendar-row] {
+		display: grid;
+		grid-template-columns: repeat(7, minmax(0, 1fr));
+	}
+
+	[data-calendar-grid] [data-calendar-cell] {
+		display: grid;
+		place-items: center;
+	}
+
+	[data-calendar-grid] [data-calendar-cell][data-in-range] {
+		background: color-mix(in srgb, var(--dry-color-fill-brand) 14%, transparent);
+	}
+
+	[data-calendar-grid] [data-calendar-cell][data-selected],
+	[data-calendar-grid] [data-calendar-cell][data-range-start],
+	[data-calendar-grid] [data-calendar-cell][data-range-end] {
+		--dry-btn-bg: var(--dry-color-fill-brand);
+		--dry-btn-color: var(--dry-color-on-brand);
+	}
+
+	[data-calendar-grid] [data-calendar-cell][data-range-start][data-in-range] {
+		border-start-start-radius: var(--dry-radius-md);
+		border-end-start-radius: var(--dry-radius-md);
+	}
+
+	[data-calendar-grid] [data-calendar-cell][data-range-end][data-in-range] {
+		border-start-end-radius: var(--dry-radius-md);
+		border-end-end-radius: var(--dry-radius-md);
+	}
+
+	[data-calendar-grid] [data-calendar-cell][data-today]:not([data-selected]) {
+		--dry-btn-color: var(--dry-color-text-brand);
+	}
+
+	[data-calendar-grid] [data-calendar-cell][data-outside-month] {
+		opacity: 0.4;
+	}
+</style>

package/dist/internal/calendar-grid-button.svelte.d.ts

@@ -0,0 +1,27 @@
+export interface CalendarGridAdapter {
+    readonly viewYear: number;
+    readonly viewMonth: number;
+    readonly locale: string;
+    readonly weekStartDay: number;
+    readonly focusedDate: Date;
+    readonly min: Date | null;
+    readonly max: Date | null;
+    readonly disabled: boolean;
+    isSelected: (day: Date) => boolean;
+    isInRange: (day: Date) => boolean;
+    isRangeStart: (day: Date) => boolean;
+    isRangeEnd: (day: Date) => boolean;
+    selectDate: (day: Date) => void;
+    setFocusedDate: (day: Date) => void;
+    prevMonth: () => void;
+    nextMonth: () => void;
+    onEscape?: () => void;
+    onHover?: (day: Date | null) => void;
+}
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    adapter: CalendarGridAdapter;
+}
+declare const CalendarGridButton: import("svelte").Component<Props, {}, "">;
+type CalendarGridButton = ReturnType<typeof CalendarGridButton>;
+export default CalendarGridButton;

package/dist/internal/calendar-grid-utils.js

@@ -1,5 +1,5 @@
 export function generateWeekdayLabels(locale, weekStartDay) {
-    const formatter = new Intl.DateTimeFormat(locale, { weekday: 'short' });
+    const formatter = new Intl.DateTimeFormat(locale, { weekday: 'narrow' });
     const labels = [];
     for (let i = 0; i < 7; i++) {
         const dayIndex = (weekStartDay + i) % 7;

package/dist/number-input/number-input-button.svelte

@@ -33,7 +33,7 @@
 <div role="group" data-number-input-wrapper data-size={size} data-disabled={disabled || undefined}>
 	<Button
 		variant="outline"
-		size="icon-sm"
+		size={size === 'sm' ? 'icon-sm' : size === 'lg' ? 'icon-lg' : 'icon'}
 		type="button"
 		tabindex={-1}
 		aria-label="Decrease value"
@@ -53,7 +53,7 @@
 	/>
 	<Button
 		variant="outline"
-		size="icon-sm"
+		size={size === 'sm' ? 'icon-sm' : size === 'lg' ? 'icon-lg' : 'icon'}
 		type="button"
 		tabindex={-1}
 		aria-label="Increase value"
@@ -64,7 +64,6 @@
 
 <style>
 	[data-number-input-wrapper] {
-		container-type: inline-size;
 		display: inline-grid;
 		grid-template-columns: auto minmax(3ch, max-content) auto;
 		align-items: stretch;