@dryui/ui 3.0.0 → 4.0.1

package/src/qr-code/qr-code.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { encodeQR, type ErrorCorrectionLevel } from '@dryui/primitives/qr-code';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		value: string;
+		size?: number;
+		errorCorrection?: ErrorCorrectionLevel;
+		fgColor?: string;
+		bgColor?: string;
+	}
+
+	let {
+		value,
+		size = 200,
+		errorCorrection = 'M',
+		fgColor,
+		bgColor,
+		class: className,
+		role,
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		...rest
+	}: Props = $props();
+
+	const matrix = $derived(
+		(() => {
+			try {
+				return encodeQR(value, { errorCorrection });
+			} catch {
+				return null;
+			}
+		})()
+	);
+
+	const wrapperRole = $derived(role ?? 'img');
+	const wrapperAriaLabel = $derived(
+		ariaLabel ?? (wrapperRole === 'img' && !ariaLabelledby ? 'QR Code' : undefined)
+	);
+
+	interface DrawQrParams {
+		matrix: typeof matrix;
+		size: number;
+		bgColor: string | undefined;
+		fgColor: string | undefined;
+	}
+
+	function drawQr(canvas: HTMLCanvasElement, params: DrawQrParams) {
+		function render({
+			matrix: nextMatrix,
+			size: nextSize,
+			bgColor: nextBgColor,
+			fgColor: nextFgColor
+		}: DrawQrParams) {
+			const wrapper = canvas.parentElement;
+			if (wrapper instanceof HTMLElement) {
+				wrapper.style.setProperty('--dry-qr-size', `${nextSize}px`);
+				if (nextBgColor) wrapper.style.setProperty('--dry-qr-bg', nextBgColor);
+				else wrapper.style.removeProperty('--dry-qr-bg');
+				if (nextFgColor) wrapper.style.setProperty('--dry-qr-fg', nextFgColor);
+				else wrapper.style.removeProperty('--dry-qr-fg');
+			}
+
+			if (!nextMatrix) return;
+
+			if (!(wrapper instanceof HTMLElement)) return;
+
+			const ctx = canvas.getContext('2d');
+			if (!ctx) return;
+
+			const moduleCount = nextMatrix.length;
+			const moduleSize = nextSize / moduleCount;
+
+			canvas.width = nextSize;
+			canvas.height = nextSize;
+
+			const computed = getComputedStyle(wrapper);
+			const resolvedBg =
+				nextBgColor || computed.getPropertyValue('--dry-qr-bg').trim() || computed.backgroundColor;
+			const resolvedFg =
+				nextFgColor || computed.getPropertyValue('--dry-qr-fg').trim() || computed.color;
+
+			ctx.fillStyle = resolvedBg;
+			ctx.fillRect(0, 0, nextSize, nextSize);
+
+			ctx.fillStyle = resolvedFg;
+			for (let row = 0; row < moduleCount; row++) {
+				for (let col = 0; col < moduleCount; col++) {
+					if (nextMatrix[row]![col]) {
+						ctx.fillRect(
+							Math.round(col * moduleSize),
+							Math.round(row * moduleSize),
+							Math.ceil(moduleSize),
+							Math.ceil(moduleSize)
+						);
+					}
+				}
+			}
+		}
+
+		render(params);
+
+		return {
+			update: render
+		};
+	}
+</script>
+
+<div
+	class={className}
+	data-qr-wrapper
+	role={wrapperRole}
+	aria-label={wrapperAriaLabel}
+	aria-labelledby={ariaLabelledby}
+	{...rest}
+>
+	<canvas
+		use:drawQr={{ matrix, size, bgColor, fgColor }}
+		width={size}
+		height={size}
+		aria-hidden="true"
+		data-qr-canvas
+		data-value={value}
+	></canvas>
+</div>
+
+<style>
+	[data-qr-wrapper] {
+		/* Component tokens (Tier 3) */
+		--dry-qr-padding: var(--dry-space-3);
+		--dry-qr-radius: var(--dry-radius-lg);
+		--dry-qr-border: var(--dry-color-stroke-weak);
+		--dry-qr-size: 200px;
+
+		display: inline-grid;
+		grid-template-columns: var(--dry-qr-size);
+		place-items: center;
+		padding: var(--dry-qr-padding);
+		background: var(--dry-qr-bg, var(--dry-color-bg-raised));
+		border: 1px solid var(--dry-qr-border);
+		border-radius: var(--dry-qr-radius);
+	}
+
+	[data-qr-canvas] {
+		display: block;
+		height: var(--dry-qr-size);
+		border-radius: var(--dry-radius-sm);
+	}
+</style>

package/src/radio-group/context.svelte.ts

@@ -0,0 +1,10 @@
+import { createContext } from '@dryui/primitives';
+
+export interface RadioGroupContext {
+	readonly name: string;
+	readonly value: string;
+	readonly disabled: boolean;
+	readonly required: boolean;
+	select: (value: string) => void;
+}
+export const [setRadioGroupCtx, getRadioGroupCtx] = createContext<RadioGroupContext>('radio-group');

package/src/radio-group/index.ts

@@ -0,0 +1,12 @@
+export type { RadioGroupRootProps, RadioGroupItemProps } from '@dryui/primitives';
+
+import RadioGroupRoot from './radio-group.svelte';
+import RadioGroupItem from './radio-group-item-input.svelte';
+
+export const RadioGroup: {
+	Root: typeof RadioGroupRoot;
+	Item: typeof RadioGroupItem;
+} = {
+	Root: RadioGroupRoot,
+	Item: RadioGroupItem
+};

package/src/radio-group/radio-group-item-input.svelte

@@ -0,0 +1,197 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
+	import { getRadioGroupCtx } from './context.svelte.js';
+
+	type WrapperAttrs = Omit<
+		HTMLAttributes<HTMLLabelElement>,
+		'children' | 'onchange' | 'onfocus' | 'onblur' | 'autofocus'
+	>;
+
+	interface Props extends WrapperAttrs {
+		value: string;
+		disabled?: boolean;
+		children?: Snippet | undefined;
+		name?: HTMLInputAttributes['name'];
+		required?: HTMLInputAttributes['required'];
+		autofocus?: HTMLInputAttributes['autofocus'];
+		onchange?: HTMLInputAttributes['onchange'];
+		onfocus?: HTMLInputAttributes['onfocus'];
+		onblur?: HTMLInputAttributes['onblur'];
+	}
+
+	let {
+		value,
+		disabled = false,
+		children,
+		class: className,
+		style,
+		id,
+		name,
+		required,
+		autofocus,
+		onchange: onchangeProp,
+		onfocus,
+		onblur,
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		'aria-describedby': ariaDescribedby,
+		...rest
+	}: Props = $props();
+
+	const ctx = getRadioGroupCtx();
+
+	const isDisabled = $derived(disabled || ctx.disabled);
+	const checked = $derived(ctx.value === value);
+
+	function handleChange(event: Event & { currentTarget: EventTarget & HTMLInputElement }) {
+		if (isDisabled) return;
+		ctx.select(value);
+		onchangeProp?.(event);
+	}
+
+	function autofocusAction(node: HTMLInputElement, enabled: HTMLInputAttributes['autofocus']) {
+		if (enabled) node.focus();
+		return {
+			update(nextEnabled: HTMLInputAttributes['autofocus']) {
+				if (nextEnabled) node.focus();
+			}
+		};
+	}
+</script>
+
+<label
+	{...rest}
+	data-radio-group-item
+	data-state={checked ? 'checked' : 'unchecked'}
+	data-disabled={isDisabled || undefined}
+	class={className}
+	{style}
+>
+	<input
+		type="radio"
+		use:autofocusAction={autofocus}
+		name={name ?? ctx.name}
+		{value}
+		{checked}
+		disabled={isDisabled}
+		required={required ?? ctx.required}
+		{id}
+		{onfocus}
+		{onblur}
+		aria-label={ariaLabel}
+		aria-labelledby={ariaLabelledby}
+		aria-describedby={ariaDescribedby}
+		data-state={checked ? 'checked' : 'unchecked'}
+		data-disabled={isDisabled || undefined}
+		onchange={handleChange}
+	/>
+	{#if children}
+		{@render children()}
+	{/if}
+</label>
+
+<style>
+	[data-radio-group-item] {
+		display: inline-grid;
+		grid-auto-flow: column;
+		grid-template-columns: var(--dry-space-8);
+		grid-auto-columns: max-content;
+		align-items: center;
+		gap: var(--dry-space-3);
+		cursor: pointer;
+		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+		line-height: var(--dry-type-small-leading, var(--dry-text-sm-leading));
+		font-family: var(--dry-font-sans);
+		color: var(--dry-color-text-strong);
+		padding: var(--dry-space-1) 0;
+		min-height: 48px;
+		user-select: none;
+
+		&[data-disabled] {
+			color: var(--dry-color-text-disabled);
+			opacity: 1;
+			cursor: not-allowed;
+		}
+	}
+
+	[data-radio-group-item] input[type='radio'] {
+		appearance: none;
+		-webkit-appearance: none;
+		height: var(--dry-space-8);
+		min-height: var(--dry-space-8);
+		border: 2px solid var(--dry-radio-border, var(--dry-color-stroke-strong));
+		border-radius: var(--dry-radius-full);
+		background: var(--dry-radio-bg, var(--dry-color-bg-raised));
+		margin: 0;
+		cursor: pointer;
+		position: relative;
+		transition:
+			border-color var(--dry-duration-fast) var(--dry-ease-default),
+			background-color var(--dry-duration-fast) var(--dry-ease-default),
+			transform var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	[data-radio-group-item] input[type='radio']::after {
+		content: '';
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%) scale(0.25);
+		opacity: 0;
+		filter: blur(4px);
+		height: 8px;
+		aspect-ratio: 1;
+		border-radius: var(--dry-radius-full);
+		background: var(--dry-color-on-brand);
+		transform-origin: center;
+		transition:
+			opacity var(--dry-duration-fast) var(--dry-ease-spring-snappy),
+			transform var(--dry-duration-fast) var(--dry-ease-spring-snappy),
+			filter var(--dry-duration-fast) var(--dry-ease-spring-snappy);
+	}
+
+	[data-radio-group-item] input[type='radio']:hover:not(:disabled) {
+		border-color: var(--dry-color-stroke-selected);
+	}
+
+	[data-radio-group-item] input[type='radio']:active:not(:disabled) {
+		transform: scale(0.96);
+	}
+
+	[data-radio-group-item] input[type='radio']:focus-visible {
+		outline: 2px solid var(--dry-color-stroke-focus);
+		outline-offset: 2px;
+	}
+
+	[data-radio-group-item] input[type='radio']:checked {
+		background: var(--dry-radio-checked-bg, var(--dry-color-fill-selected));
+		border-color: var(--dry-radio-checked-border, var(--dry-color-stroke-selected));
+		box-shadow: inset 0 0 0 1px var(--dry-radio-checked-border, var(--dry-color-stroke-selected));
+	}
+
+	[data-radio-group-item] input[type='radio']:checked::after {
+		transform: translate(-50%, -50%) scale(1);
+		opacity: 1;
+		filter: blur(0);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		[data-radio-group-item] input[type='radio']::after {
+			transition: none;
+			filter: none;
+		}
+	}
+
+	[data-radio-group-item] input[type='radio']:checked:hover:not(:disabled) {
+		background: var(--dry-radio-checked-bg, var(--dry-color-fill-selected));
+		border-color: var(--dry-radio-checked-border, var(--dry-color-stroke-selected));
+	}
+
+	[data-radio-group-item] input[type='radio']:disabled {
+		background: var(--dry-color-fill-disabled);
+		border-color: var(--dry-color-stroke-disabled);
+		opacity: 1;
+		cursor: not-allowed;
+	}
+</style>

package/src/radio-group/radio-group.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'RadioGroup',
+	description: 'Single selection from multiple options',
+	category: 'input',
+	tags: ['form', 'radio', 'select', 'option', 'group']
+};

package/src/radio-group/radio-group.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { setRadioGroupCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		value?: string;
+		name?: string;
+		disabled?: boolean;
+		required?: boolean;
+		orientation?: 'horizontal' | 'vertical';
+		children: Snippet;
+	}
+
+	let {
+		value = $bindable(''),
+		name,
+		disabled = false,
+		required = false,
+		orientation = 'vertical',
+		class: className,
+		children,
+		onkeydown,
+		...rest
+	}: Props = $props();
+
+	const uid = $props.id();
+	const fallbackName = `dryui-radio-${uid}`;
+	const groupName = $derived(name ?? fallbackName);
+
+	setRadioGroupCtx({
+		get name() {
+			return groupName;
+		},
+		get value() {
+			return value;
+		},
+		get disabled() {
+			return disabled;
+		},
+		get required() {
+			return required;
+		},
+		select(v: string) {
+			value = v;
+		}
+	});
+
+	let el = $state<HTMLDivElement>();
+
+	function getRadioInputs(): HTMLInputElement[] {
+		if (!el) return [];
+		return Array.from(el.querySelectorAll<HTMLInputElement>('input[type="radio"]:not(:disabled)'));
+	}
+
+	function focusAndSelect(inputs: HTMLInputElement[], index: number) {
+		if (inputs.length === 0) return;
+		const clamped = ((index % inputs.length) + inputs.length) % inputs.length;
+		const input = inputs[clamped]!;
+		input.focus();
+		input.click();
+	}
+
+	function handleKeydown(e: KeyboardEvent & { currentTarget: HTMLDivElement }) {
+		const inputs = getRadioInputs();
+		const currentIndex = inputs.indexOf(document.activeElement as HTMLInputElement);
+
+		switch (e.key) {
+			case 'ArrowDown':
+			case 'ArrowRight': {
+				e.preventDefault();
+				focusAndSelect(inputs, currentIndex + 1);
+				break;
+			}
+			case 'ArrowUp':
+			case 'ArrowLeft': {
+				e.preventDefault();
+				focusAndSelect(inputs, currentIndex - 1);
+				break;
+			}
+		}
+
+		if (onkeydown) (onkeydown as (e: KeyboardEvent & { currentTarget: HTMLDivElement }) => void)(e);
+	}
+</script>
+
+<div
+	bind:this={el}
+	role="radiogroup"
+	aria-orientation={orientation}
+	data-radio-group-root
+	data-orientation={orientation}
+	data-disabled={disabled || undefined}
+	class={className}
+	onkeydown={handleKeydown}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	[data-radio-group-root] {
+		display: grid;
+		gap: var(--dry-space-4);
+
+		&[data-orientation='horizontal'] {
+			grid-auto-flow: column;
+			grid-auto-columns: max-content;
+		}
+
+		&[data-disabled] {
+			color: var(--dry-color-text-disabled);
+			opacity: 1;
+			cursor: not-allowed;
+		}
+	}
+</style>

package/src/range-calendar/context.svelte.ts

@@ -0,0 +1,22 @@
+import { createContext } from '@dryui/primitives';
+
+export interface RangeCalendarContext {
+	readonly startDate: Date | null;
+	readonly endDate: Date | null;
+	readonly hoveredDate: Date | null;
+	readonly focusedDate: Date;
+	readonly viewMonth: number;
+	readonly viewYear: number;
+	readonly locale: string;
+	readonly min: Date | null;
+	readonly max: Date | null;
+	readonly disabled: boolean;
+	readonly weekStartDay: number;
+	selectDate: (date: Date) => void;
+	setHoveredDate: (date: Date | null) => void;
+	nextMonth: () => void;
+	prevMonth: () => void;
+	setFocusedDate: (date: Date) => void;
+}
+export const [setRangeCalendarCtx, getRangeCalendarCtx] =
+	createContext<RangeCalendarContext>('range-calendar');

package/src/range-calendar/index.ts

@@ -0,0 +1,16 @@
+import type { CalendarEventGridProps } from '../internal/calendar-event-layout.js';
+
+export type { RangeCalendarRootProps } from '@dryui/primitives';
+
+export interface RangeCalendarGridProps extends CalendarEventGridProps {}
+
+import RangeCalendarRoot from './range-calendar-root.svelte';
+import RangeCalendarGrid from './range-calendar-grid-button.svelte';
+
+export const RangeCalendar: {
+	Root: typeof RangeCalendarRoot;
+	Grid: typeof RangeCalendarGrid;
+} = {
+	Root: RangeCalendarRoot,
+	Grid: RangeCalendarGrid
+};

package/src/range-calendar/range-calendar-grid-button.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import { isSameDay } from '@dryui/primitives';
+	import { getRangeCalendarCtx } from './context.svelte.js';
+	import CalendarGridButton, {
+		type CalendarGridAdapter
+	} from '../internal/calendar-grid-button.svelte';
+	import type { CalendarEventGridProps } from '../internal/calendar-event-layout.js';
+
+	interface Props extends CalendarEventGridProps {}
+
+	let props: Props = $props();
+
+	const ctx = getRangeCalendarCtx();
+
+	function isInRange(day: Date): boolean {
+		const start = ctx.startDate;
+		const end = ctx.endDate ?? ctx.hoveredDate;
+		if (!start || !end) return false;
+		const lo = start < end ? start : end;
+		const hi = start < end ? end : start;
+		const time = day.getTime();
+		return time >= lo.getTime() && time <= hi.getTime();
+	}
+
+	function isRangeStart(day: Date): boolean {
+		if (!ctx.startDate) return false;
+		const end = ctx.endDate ?? ctx.hoveredDate;
+		if (!end) return isSameDay(day, ctx.startDate);
+		const lo = ctx.startDate < end ? ctx.startDate : end;
+		return isSameDay(day, lo);
+	}
+
+	function isRangeEnd(day: Date): boolean {
+		const end = ctx.endDate ?? ctx.hoveredDate;
+		if (!ctx.startDate || !end) return false;
+		const hi = ctx.startDate < end ? end : ctx.startDate;
+		return isSameDay(day, hi);
+	}
+
+	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,
+		isRangeStart,
+		isRangeEnd,
+		selectDate: (day) => ctx.selectDate(day),
+		setFocusedDate: (day) => ctx.setFocusedDate(day),
+		prevMonth: () => ctx.prevMonth(),
+		nextMonth: () => ctx.nextMonth(),
+		onHover: (day) => ctx.setHoveredDate(day)
+	};
+</script>
+
+<CalendarGridButton {adapter} {...props} />