@dryui/ui 3.0.0 → 4.0.0

package/src/range-calendar/range-calendar-root.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { createDateViewController } from '../internal/date-family-controller.svelte.js';
+	import { setRangeCalendarCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		startDate?: Date | null;
+		endDate?: Date | null;
+		locale?: string;
+		min?: Date | null;
+		max?: Date | null;
+		disabled?: boolean;
+		children: Snippet;
+	}
+
+	let {
+		startDate = $bindable<Date | null>(null),
+		endDate = $bindable<Date | null>(null),
+		locale = 'en-US',
+		min = null,
+		max = null,
+		disabled = false,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	const view = createDateViewController({
+		initialDate: startDate,
+		locale: () => locale
+	});
+
+	let hoveredDate = $state<Date | null>(null);
+
+	let selecting = $state(false);
+
+	setRangeCalendarCtx({
+		get startDate() {
+			return startDate;
+		},
+		get endDate() {
+			return endDate;
+		},
+		get hoveredDate() {
+			return hoveredDate;
+		},
+		get focusedDate() {
+			return view.focusedDate;
+		},
+		get viewMonth() {
+			return view.viewMonth;
+		},
+		get viewYear() {
+			return view.viewYear;
+		},
+		get locale() {
+			return locale;
+		},
+		get min() {
+			return min;
+		},
+		get max() {
+			return max;
+		},
+		get disabled() {
+			return disabled;
+		},
+		get weekStartDay() {
+			return view.weekStartDay;
+		},
+		selectDate(date: Date) {
+			if (!selecting) {
+				startDate = date;
+				endDate = null;
+				selecting = true;
+			} else {
+				if (date < startDate!) {
+					endDate = startDate;
+					startDate = date;
+				} else {
+					endDate = date;
+				}
+				selecting = false;
+			}
+			view.focusDate(date);
+		},
+		setHoveredDate(date: Date | null) {
+			hoveredDate = date;
+		},
+		nextMonth() {
+			view.nextMonth();
+		},
+		prevMonth() {
+			view.prevMonth();
+		},
+		setFocusedDate(date: Date) {
+			view.setFocusedDate(date);
+		}
+	});
+</script>
+
+<div data-range-calendar-root class={className} {...rest}>
+	{@render children()}
+</div>
+
+<style>
+	[data-range-calendar-root] {
+		--dry-range-calendar-bg: var(--dry-color-bg-base);
+		--dry-range-calendar-border: var(--dry-color-stroke-weak);
+		--dry-range-calendar-panel-bg: var(--dry-color-bg-overlay);
+		--dry-range-calendar-panel-border: color-mix(
+			in srgb,
+			var(--dry-color-stroke-strong) 18%,
+			transparent
+		);
+		--dry-range-calendar-heading-color: var(--dry-color-text-strong);
+		--dry-range-calendar-nav-bg: var(--dry-color-bg-raised);
+		--dry-range-calendar-nav-border: var(--dry-color-stroke-weak);
+		--dry-range-calendar-nav-color: var(--dry-color-text-weak);
+		--dry-range-calendar-radius: var(--dry-radius-xl);
+		--dry-range-calendar-shadow: var(--dry-shadow-raised, var(--dry-shadow-sm));
+		--dry-range-calendar-padding: var(--dry-space-3);
+		--dry-range-calendar-day-size: 2.5rem;
+		--dry-range-calendar-day-radius: var(--dry-radius-md);
+		--dry-range-calendar-day-hover-bg: var(--dry-color-fill-hover);
+		--dry-range-calendar-selected-bg: var(--dry-color-fill-brand);
+		--dry-range-calendar-selected-color: var(--dry-color-on-brand);
+		--dry-range-calendar-selected-hover-bg: var(--dry-color-fill-brand-hover);
+		--dry-range-calendar-range-bg: color-mix(in srgb, var(--dry-color-fill-brand) 14%, transparent);
+		--dry-range-calendar-today-color: var(--dry-color-text-brand);
+		--dry-range-calendar-outside-color: var(--dry-color-text-weak);
+
+		display: inline-grid;
+		box-sizing: border-box;
+		justify-items: start;
+		gap: var(--dry-space-3);
+		padding: var(--dry-range-calendar-padding);
+		background: var(--dry-range-calendar-bg);
+		border: 1px solid var(--dry-range-calendar-border);
+		border-radius: var(--dry-range-calendar-radius);
+		box-shadow: var(--dry-range-calendar-shadow);
+		color: var(--dry-color-text-strong);
+		font-family: var(--dry-font-sans);
+	}
+</style>

package/src/range-calendar/range-calendar.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'RangeCalendar',
+	description: 'Calendar for selecting date ranges',
+	category: 'form',
+	tags: ['date', 'range', 'calendar', 'selection']
+};

package/src/rating/index.ts

@@ -0,0 +1,7 @@
+import type { RatingProps as PrimitiveRatingProps } from '@dryui/primitives';
+
+export interface RatingProps extends PrimitiveRatingProps {
+	size?: 'sm' | 'md' | 'lg';
+}
+
+export { default as Rating } from './rating-button-input.svelte';

package/src/rating/rating-button-input.svelte

@@ -0,0 +1,265 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import { getFormControlCtx } from '@dryui/primitives';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		value?: number;
+		max?: number;
+		disabled?: boolean;
+		readonly?: boolean;
+		allowHalf?: boolean;
+		onValueChange?: (value: number) => void;
+		size?: 'sm' | 'md' | 'lg';
+	}
+
+	let {
+		value = $bindable(0),
+		max = 5,
+		disabled = false,
+		readonly = false,
+		allowHalf = false,
+		onValueChange,
+		onkeydown,
+		size = 'md',
+		class: className,
+		...rest
+	}: Props = $props();
+
+	const ctx = getFormControlCtx();
+	const isDisabled = $derived(disabled || ctx?.disabled || false);
+	const isReadonly = $derived(readonly);
+
+	let hoverValue = $state<number | null>(null);
+	let focusedIndex = $state<number | null>(null);
+
+	const displayValue = $derived(hoverValue !== null ? hoverValue : value);
+
+	function getStarState(index: number): 'full' | 'half' | 'empty' {
+		const starNumber = index + 1;
+		if (displayValue >= starNumber) return 'full';
+		if (allowHalf && displayValue >= starNumber - 0.5) return 'half';
+		return 'empty';
+	}
+
+	function getTabIndex(index: number): number {
+		const activeIndex = value === 0 ? 0 : Math.ceil(value) - 1;
+		return index === activeIndex ? 0 : -1;
+	}
+
+	function handleStarClick(e: MouseEvent & { currentTarget: HTMLButtonElement }, index: number) {
+		if (isDisabled || isReadonly) return;
+
+		let newValue: number;
+		if (allowHalf) {
+			const rect = e.currentTarget.getBoundingClientRect();
+			const x = e.clientX - rect.left;
+			const isLeftHalf = x < rect.width / 2;
+			newValue = isLeftHalf ? index + 0.5 : index + 1;
+		} else {
+			newValue = index + 1;
+		}
+
+		if (newValue === value) {
+			newValue = 0;
+		}
+
+		value = newValue;
+		onValueChange?.(newValue);
+	}
+
+	function handleStarMouseEnter(
+		e: MouseEvent & { currentTarget: HTMLButtonElement },
+		index: number
+	) {
+		if (isDisabled || isReadonly) return;
+
+		if (allowHalf) {
+			const rect = e.currentTarget.getBoundingClientRect();
+			const x = e.clientX - rect.left;
+			const isLeftHalf = x < rect.width / 2;
+			hoverValue = isLeftHalf ? index + 0.5 : index + 1;
+		} else {
+			hoverValue = index + 1;
+		}
+	}
+
+	function handleStarMouseMove(
+		e: MouseEvent & { currentTarget: HTMLButtonElement },
+		index: number
+	) {
+		if (isDisabled || isReadonly || !allowHalf) return;
+
+		const rect = e.currentTarget.getBoundingClientRect();
+		const x = e.clientX - rect.left;
+		const isLeftHalf = x < rect.width / 2;
+		hoverValue = isLeftHalf ? index + 0.5 : index + 1;
+	}
+
+	function handleMouseLeave() {
+		hoverValue = null;
+	}
+
+	function handleStarFocus(index: number) {
+		focusedIndex = index;
+	}
+
+	function handleStarBlur() {
+		focusedIndex = null;
+	}
+
+	function handleKeydown(e: KeyboardEvent & { currentTarget: HTMLDivElement }) {
+		if (isDisabled || isReadonly) {
+			if (onkeydown)
+				(onkeydown as (e: KeyboardEvent & { currentTarget: HTMLDivElement }) => void)(e);
+			return;
+		}
+
+		const step = allowHalf ? 0.5 : 1;
+
+		switch (e.key) {
+			case 'ArrowRight':
+			case 'ArrowUp': {
+				e.preventDefault();
+				const newVal = Math.min(max, value + step);
+				value = newVal;
+				onValueChange?.(newVal);
+				focusStarForValue(newVal);
+				break;
+			}
+			case 'ArrowLeft':
+			case 'ArrowDown': {
+				e.preventDefault();
+				const newVal = Math.max(0, value - step);
+				value = newVal;
+				onValueChange?.(newVal);
+				focusStarForValue(newVal);
+				break;
+			}
+			case 'Home': {
+				e.preventDefault();
+				const newVal = allowHalf ? 0.5 : 1;
+				value = newVal;
+				onValueChange?.(newVal);
+				focusStarForValue(newVal);
+				break;
+			}
+			case 'End': {
+				e.preventDefault();
+				value = max;
+				onValueChange?.(max);
+				focusStarForValue(max);
+				break;
+			}
+		}
+
+		if (onkeydown) (onkeydown as (e: KeyboardEvent & { currentTarget: HTMLDivElement }) => void)(e);
+	}
+
+	let wrapperEl = $state<HTMLDivElement | undefined>(undefined);
+
+	function focusStarForValue(val: number) {
+		if (!wrapperEl) return;
+		const targetIndex = val === 0 ? 0 : Math.ceil(val) - 1;
+		const buttons = wrapperEl.querySelectorAll<HTMLButtonElement>('button[role="radio"]');
+		const target = buttons[targetIndex];
+		if (target) target.focus();
+	}
+
+	const hiddenInputName = $derived(ctx?.id ? `${ctx.id}-rating` : 'rating');
+</script>
+
+<div
+	bind:this={wrapperEl}
+	role="radiogroup"
+	aria-labelledby={ctx?.labelId}
+	aria-describedby={ctx?.describedBy}
+	aria-invalid={ctx?.hasError || undefined}
+	aria-errormessage={ctx?.errorMessageId}
+	aria-required={ctx?.required || undefined}
+	data-disabled={isDisabled || undefined}
+	data-readonly={isReadonly || undefined}
+	data-size={size}
+	class={className}
+	onmouseleave={handleMouseLeave}
+	onkeydown={handleKeydown}
+	{...rest}
+>
+	{#each { length: max } as _, i (i)}
+		{@const starState = getStarState(i)}
+		{@const starNumber = i + 1}
+		{@const isHighlighted =
+			hoverValue !== null
+				? allowHalf
+					? hoverValue >= i + 0.5
+					: hoverValue > i
+				: focusedIndex !== null && focusedIndex === i}
+		<Button
+			variant="bare"
+			type="button"
+			role="radio"
+			aria-checked={value > 0 && Math.ceil(value) === starNumber ? 'true' : 'false'}
+			aria-label="{starNumber} out of {max} stars"
+			tabindex={getTabIndex(i)}
+			data-state={starState}
+			data-highlighted={isHighlighted || undefined}
+			data-readonly={isReadonly || undefined}
+			disabled={isDisabled}
+			onclick={(e) => handleStarClick(e, i)}
+			onmouseenter={(e) => handleStarMouseEnter(e, i)}
+			onmousemove={(e) => handleStarMouseMove(e, i)}
+			onfocus={() => handleStarFocus(i)}
+			onblur={handleStarBlur}
+		>
+			<span class="star" data-state={starState}>&#9733;</span>
+		</Button>
+	{/each}
+
+	<input type="hidden" name={hiddenInputName} {value} required={ctx?.required || undefined} />
+</div>
+
+<style>
+	[role='radiogroup'] {
+		display: inline-grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		gap: var(--dry-space-1);
+		align-items: center;
+	}
+
+	.star {
+		display: inline-grid;
+		font-size: var(--dry-star-size, var(--dry-space-6));
+		line-height: 1;
+		color: var(--dry-rating-unselected-color, var(--dry-color-stroke-weak));
+		transition: color var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	.star[data-state='full'] {
+		color: var(--dry-rating-selected-color, var(--dry-color-fill-brand));
+	}
+
+	.star[data-state='half'] {
+		background: linear-gradient(
+			to right,
+			var(--dry-rating-selected-color, var(--dry-color-fill-brand)) 50%,
+			var(--dry-rating-unselected-color, var(--dry-color-stroke-weak)) 50%
+		);
+		-webkit-background-clip: text;
+		background-clip: text;
+		-webkit-text-fill-color: transparent;
+		color: transparent;
+	}
+
+	[data-size='sm'] .star {
+		--dry-star-size: 20px;
+	}
+
+	[data-size='md'] .star {
+		--dry-star-size: var(--dry-space-6);
+	}
+
+	[data-size='lg'] .star {
+		--dry-star-size: 36px;
+	}
+</style>

package/src/rating/rating.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Rating',
+	description: 'Star rating input with half-star support',
+	category: 'input',
+	tags: ['form', 'stars', 'rating', 'review', 'score']
+};

package/src/relative-time/index.ts

@@ -0,0 +1,3 @@
+export type { RelativeTimeProps } from '@dryui/primitives';
+
+export { default as RelativeTime } from './relative-time.svelte';

package/src/relative-time/relative-time.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'RelativeTime',
+	description: 'Displays relative time with auto-updating',
+	category: 'display',
+	tags: ['time', 'relative', 'ago', 'auto-update']
+};

package/src/relative-time/relative-time.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { createSubscriber } from 'svelte/reactivity';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLTimeElement> {
+		date: Date | string | number;
+		locale?: string;
+		updateInterval?: number;
+	}
+
+	let { date, locale = 'en', updateInterval = 60000, class: className, ...rest }: Props = $props();
+
+	const dateObj = $derived(date instanceof Date ? date : new Date(date));
+	const dateTime = $derived(dateObj.getTime());
+	const subscribeToTick = $derived(
+		createSubscriber((update) => {
+			const interval = setInterval(update, updateInterval);
+			return () => clearInterval(interval);
+		})
+	);
+	const now = $derived.by(() => {
+		subscribeToTick();
+		return Date.now();
+	});
+	const effectiveNow = $derived(Math.max(now, dateTime));
+	const formatted = $derived(formatRelative(dateObj, effectiveNow, locale));
+
+	function formatRelative(date: Date, now: number, locale: string): string {
+		const diff = now - date.getTime();
+		const absDiff = Math.abs(diff);
+		const sign = diff < 0 ? 1 : -1;
+
+		const seconds = Math.floor(absDiff / 1000);
+		const minutes = Math.floor(seconds / 60);
+		const hours = Math.floor(minutes / 60);
+		const days = Math.floor(hours / 24);
+		const weeks = Math.floor(days / 7);
+		const months = Math.floor(days / 30);
+		const years = Math.floor(days / 365);
+
+		const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
+
+		if (seconds < 60) return rtf.format(sign * seconds, 'second');
+		if (minutes < 60) return rtf.format(sign * minutes, 'minute');
+		if (hours < 24) return rtf.format(sign * hours, 'hour');
+		if (days < 7) return rtf.format(sign * days, 'day');
+		if (weeks < 4) return rtf.format(sign * weeks, 'week');
+		if (months < 12) return rtf.format(sign * months, 'month');
+		return rtf.format(sign * years, 'year');
+	}
+</script>
+
+<time
+	class={className}
+	datetime={dateObj.toISOString()}
+	title={dateObj.toLocaleString(locale)}
+	data-relative-time
+	{...rest}
+>
+	{formatted}
+</time>
+
+<style>
+	[data-relative-time] {
+		color: var(--dry-relative-time-color, var(--dry-color-text-weak));
+		font-size: var(--dry-relative-time-font-size, var(--dry-type-small-size));
+		font-family: var(--dry-font-sans);
+		font-variant-numeric: var(--dry-numeric-variant);
+		line-height: var(--dry-type-small-leading);
+	}
+</style>

package/src/reveal/index.ts

@@ -0,0 +1,7 @@
+import type { RevealProps as PrimitiveRevealProps } from '@dryui/primitives/reveal';
+
+export interface RevealProps extends PrimitiveRevealProps {}
+
+export type { BlendMode, RevealVariant } from '@dryui/primitives/reveal';
+
+export { default as Reveal } from './reveal.svelte';

package/src/reveal/reveal.meta.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Reveal',
+	description:
+		'IntersectionObserver-powered entry transitions with reduced-motion and no-dependency fallbacks',
+	category: 'display',
+	tags: ['animation', 'reveal', 'intersection-observer', 'stagger', 'motion']
+};