@dryui/ui 3.0.0 → 4.0.1

package/src/spotlight/spotlight.svelte

@@ -0,0 +1,249 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import {
+		observeReducedMotionPreference,
+		supportsPointerTracking,
+		registerPropertyOnce
+	} from '@dryui/primitives';
+	import type { BlendMode } from '@dryui/primitives/spotlight';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		radius?: number;
+		intensity?: number;
+		color?: string;
+		followPointer?: boolean;
+		blendMode?: BlendMode;
+		children: Snippet;
+	}
+
+	let {
+		radius = 260,
+		intensity = 26,
+		color,
+		followPointer = true,
+		blendMode,
+		children,
+		class: className,
+		style,
+		...rest
+	}: Props = $props();
+
+	let element = $state<HTMLDivElement>();
+	let x = $state('50%');
+	let y = $state('50%');
+	let active = $state(false);
+	let prefersReducedMotion = $state(false);
+
+	function centerSpotlight() {
+		x = '50%';
+		y = '50%';
+	}
+
+	function canTrackPointer(): boolean {
+		return followPointer && !prefersReducedMotion && supportsPointerTracking();
+	}
+
+	function updateFromClientPoint(clientX: number, clientY: number) {
+		if (!element) return;
+		const rect = element.getBoundingClientRect();
+		x = `${clientX - rect.left}px`;
+		y = `${clientY - rect.top}px`;
+	}
+
+	function handlePointerEnter(event: PointerEvent) {
+		if (!canTrackPointer()) return;
+		active = true;
+		updateFromClientPoint(event.clientX, event.clientY);
+	}
+
+	function handlePointerMove(event: PointerEvent) {
+		if (!canTrackPointer()) return;
+		active = true;
+		updateFromClientPoint(event.clientX, event.clientY);
+	}
+
+	function handlePointerLeave() {
+		active = prefersReducedMotion || !followPointer;
+		centerSpotlight();
+	}
+
+	function handleFocusIn() {
+		active = true;
+		centerSpotlight();
+	}
+
+	function handleFocusOut() {
+		active = prefersReducedMotion || !followPointer;
+	}
+
+	$effect(() => {
+		registerPropertyOnce({
+			name: '--dry-spotlight-x',
+			syntax: '<length-percentage>',
+			inherits: false,
+			initialValue: '50%'
+		});
+		registerPropertyOnce({
+			name: '--dry-spotlight-y',
+			syntax: '<length-percentage>',
+			inherits: false,
+			initialValue: '50%'
+		});
+
+		const stopMotionObserver = observeReducedMotionPreference((matches) => {
+			prefersReducedMotion = matches;
+			active = matches || !followPointer;
+			centerSpotlight();
+		});
+
+		return () => {
+			stopMotionObserver();
+		};
+	});
+
+	const radiusValue = $derived(`${Math.max(0, radius)}px`);
+	const intensityValue = $derived.by(() => {
+		const normalized = intensity <= 1 ? intensity * 100 : intensity;
+		return `${Math.max(0, Math.min(100, normalized))}%`;
+	});
+	let staticSpotlight = $state(true);
+
+	$effect(() => {
+		if (typeof window !== 'undefined') {
+			staticSpotlight = prefersReducedMotion || !followPointer || !supportsPointerTracking();
+		}
+	});
+
+	$effect(() => {
+		if (!element) return;
+		element.style.cssText = style || '';
+		element.style.setProperty('--dry-spotlight-radius', radiusValue);
+		element.style.setProperty('--dry-spotlight-intensity', intensityValue);
+		if (color) element.style.setProperty('--dry-spotlight-color', color);
+		else element.style.removeProperty('--dry-spotlight-color');
+		if (blendMode) element.style.setProperty('--dry-spotlight-blend', blendMode);
+		else element.style.removeProperty('--dry-spotlight-blend');
+	});
+
+	$effect(() => {
+		if (!element) return;
+		element.style.setProperty('--dry-spotlight-x', x);
+		element.style.setProperty('--dry-spotlight-y', y);
+	});
+</script>
+
+<div
+	bind:this={element}
+	class={className}
+	data-spotlight
+	data-active={active || undefined}
+	data-static={staticSpotlight || undefined}
+	data-follow-pointer={!staticSpotlight || undefined}
+	onpointerenter={handlePointerEnter}
+	onpointermove={handlePointerMove}
+	onpointerleave={handlePointerLeave}
+	onfocusin={handleFocusIn}
+	onfocusout={handleFocusOut}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	[data-spotlight] {
+		--dry-spotlight-radius: 260px;
+		--dry-spotlight-intensity: 26%;
+		--dry-spotlight-x: 50%;
+		--dry-spotlight-y: 50%;
+
+		position: relative;
+		isolation: isolate;
+		overflow: hidden;
+		border-radius: inherit;
+	}
+
+	[data-spotlight]::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		pointer-events: none;
+		mix-blend-mode: var(--dry-spotlight-blend, normal);
+		background:
+			radial-gradient(
+				circle var(--dry-spotlight-radius, 260px) at var(--dry-spotlight-x, 50%)
+					var(--dry-spotlight-y, 50%),
+				color-mix(
+						in srgb,
+						var(--dry-spotlight-color, rgba(59, 130, 246, 0.28)) var(--dry-spotlight-intensity, 26%),
+						transparent
+					)
+					0%,
+				color-mix(
+						in srgb,
+						var(--dry-spotlight-color, rgba(59, 130, 246, 0.28))
+							calc(var(--dry-spotlight-intensity, 26%) * 0.72),
+						transparent
+					)
+					28%,
+				color-mix(
+						in srgb,
+						var(--dry-spotlight-color, rgba(59, 130, 246, 0.28))
+							calc(var(--dry-spotlight-intensity, 26%) * 0.38),
+						transparent
+					)
+					52%,
+				color-mix(
+						in srgb,
+						var(--dry-spotlight-color, rgba(59, 130, 246, 0.28))
+							calc(var(--dry-spotlight-intensity, 26%) * 0.12),
+						transparent
+					)
+					76%,
+				transparent 100%
+			),
+			radial-gradient(
+				circle calc(var(--dry-spotlight-radius, 260px) * 0.3) at var(--dry-spotlight-x, 50%)
+					var(--dry-spotlight-y, 50%),
+				var(--dry-spotlight-rim-color, rgba(255, 255, 255, 0.12)) 0%,
+				color-mix(
+						in srgb,
+						var(--dry-spotlight-rim-color, rgba(255, 255, 255, 0.12)) 33%,
+						transparent
+					)
+					50%,
+				transparent 100%
+			);
+		opacity: 0;
+		transform: scale(1.02);
+		transition:
+			opacity var(--dry-duration-normal, 200ms) var(--dry-ease-out, ease),
+			transform var(--dry-duration-normal, 200ms) var(--dry-ease-out, ease),
+			--dry-spotlight-x 60ms ease-out,
+			--dry-spotlight-y 60ms ease-out;
+	}
+
+	[data-spotlight][data-active]::before,
+	[data-spotlight][data-static]::before,
+	[data-spotlight][data-follow-pointer]::before {
+		will-change: opacity, transform;
+	}
+
+	[data-spotlight][data-active]::before,
+	[data-spotlight][data-static]::before {
+		opacity: 1;
+		transform: scale(1);
+	}
+
+	[data-spotlight][data-static]::before {
+		opacity: 0.88;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		[data-spotlight]::before {
+			transition: none;
+			transform: none;
+		}
+	}
+</style>

package/src/stagger/index.ts

@@ -0,0 +1 @@
+export { Stagger } from '../motion/index.js';

package/src/stagger/stagger.meta.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Stagger',
+	description:
+		'Iterates children with auto-assigned nth-child delays. `step` selects section (100ms), word (80ms), letter (40ms), or a custom millisecond value.',
+	category: 'display',
+	tags: ['animation', 'stagger', 'enter', 'motion', 'polish']
+};

package/src/star-rating/index.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from 'svelte/elements';
+
+export interface StarRatingRootProps extends HTMLAttributes<HTMLDivElement> {
+	stars: number;
+	label?: string;
+	size?: 'sm' | 'md' | 'lg';
+	variant?: 'filled' | 'outlined';
+}
+
+import StarRatingRoot from './star-rating-root.svelte';
+
+export const StarRating: {
+	Root: typeof StarRatingRoot;
+} = {
+	Root: StarRatingRoot
+};

package/src/star-rating/star-rating-root.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		stars: number;
+		label?: string;
+		size?: 'sm' | 'md' | 'lg';
+		variant?: 'filled' | 'outlined';
+	}
+
+	let {
+		stars,
+		label,
+		size = 'md',
+		variant = 'filled',
+		class: className,
+		...rest
+	}: Props = $props();
+
+	const clampedStars = $derived(Math.max(0, Math.min(5, Math.round(stars))));
+	const starIndexes = [0, 1, 2, 3, 4];
+	const starPath =
+		'M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z';
+</script>
+
+<div
+	data-star-rating
+	data-size={size}
+	class={className}
+	aria-label="{clampedStars} star hotel{label ? `, ${label}` : ''}"
+	role="img"
+	{...rest}
+>
+	<span data-stars>
+		{#each starIndexes as i (i)}
+			<svg viewBox="0 0 24 24" aria-hidden="true">
+				<path
+					d={starPath}
+					data-star={i < clampedStars
+						? variant === 'outlined'
+							? 'outlined-active'
+							: 'filled'
+						: 'outlined'}
+				/>
+			</svg>
+		{/each}
+	</span>
+	{#if label}
+		<span data-label>{label}</span>
+	{/if}
+</div>
+
+<style>
+	[data-star-rating] {
+		--dry-star-rating-size: 1.25rem;
+
+		display: inline-grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		gap: var(--dry-space-2);
+	}
+
+	[data-size='sm'] {
+		--dry-star-rating-size: 1rem;
+	}
+
+	[data-size='lg'] {
+		--dry-star-rating-size: 1.75rem;
+	}
+
+	[data-stars] {
+		display: inline-grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		gap: var(--dry-star-rating-gap, var(--dry-space-1));
+	}
+
+	[data-stars] svg {
+		aspect-ratio: 1;
+		height: var(--dry-star-rating-size);
+		display: block;
+	}
+
+	[data-star='filled'] {
+		fill: var(--dry-star-rating-color, var(--dry-color-fill-warning));
+		stroke: var(--dry-star-rating-color, var(--dry-color-fill-warning));
+		stroke-width: 1;
+	}
+
+	[data-star='outlined'] {
+		fill: none;
+		stroke: var(--dry-star-rating-outline-color, var(--dry-color-stroke-weak));
+		stroke-width: 1.5;
+	}
+
+	[data-star='outlined-active'] {
+		fill: none;
+		stroke: var(--dry-star-rating-color, var(--dry-color-fill-warning));
+		stroke-width: 1.5;
+	}
+
+	[data-label] {
+		font-size: var(--dry-type-small-size);
+		color: var(--dry-star-rating-label-color, var(--dry-color-text-weak));
+		font-weight: 500;
+	}
+</style>

package/src/star-rating/star-rating.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'StarRating',
+	description: 'Read-only star rating display with filled and outlined variants',
+	category: 'display',
+	tags: ['star', 'rating', 'review', 'score', 'display']
+};

package/src/stepper/context.svelte.ts

@@ -0,0 +1,9 @@
+import { createContext } from '@dryui/primitives';
+
+interface StepperContext {
+	readonly activeStep: number;
+	readonly orientation: 'horizontal' | 'vertical';
+	isStepComplete: (index: number) => boolean;
+	isStepActive: (index: number) => boolean;
+}
+export const [setStepperCtx, getStepperCtx] = createContext<StepperContext>('stepper');

package/src/stepper/index.ts

@@ -0,0 +1,23 @@
+export type {
+	StepperRootProps,
+	StepperListProps,
+	StepperStepProps,
+	StepperSeparatorProps
+} from '@dryui/primitives';
+
+import StepperRoot from './stepper-root.svelte';
+import StepperList from './stepper-list.svelte';
+import StepperStep from './stepper-step-button.svelte';
+import StepperSeparator from './stepper-separator.svelte';
+
+export const Stepper: {
+	Root: typeof StepperRoot;
+	List: typeof StepperList;
+	Step: typeof StepperStep;
+	Separator: typeof StepperSeparator;
+} = {
+	Root: StepperRoot,
+	List: StepperList,
+	Step: StepperStep,
+	Separator: StepperSeparator
+};

package/src/stepper/stepper-list.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getStepperCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLOListElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+
+	const ctx = getStepperCtx();
+</script>
+
+<ol role="list" data-part="list" data-orientation={ctx.orientation} class={className} {...rest}>
+	{@render children()}
+</ol>
+
+<style>
+	[data-part='list'] {
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		gap: 0;
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	[data-part='list'][data-orientation='vertical'] {
+		grid-auto-flow: row;
+		grid-auto-rows: auto;
+		grid-auto-columns: unset;
+		align-items: stretch;
+	}
+</style>

package/src/stepper/stepper-root.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { setStepperCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		activeStep?: number;
+		orientation?: 'horizontal' | 'vertical';
+		children: Snippet;
+	}
+
+	let {
+		activeStep = $bindable(0),
+		orientation = 'horizontal',
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	setStepperCtx({
+		get activeStep() {
+			return activeStep;
+		},
+		get orientation() {
+			return orientation;
+		},
+		isStepComplete(index: number) {
+			return index < activeStep;
+		},
+		isStepActive(index: number) {
+			return index === activeStep;
+		}
+	});
+</script>
+
+<div
+	role="group"
+	aria-label="Progress"
+	data-part="root"
+	data-orientation={orientation}
+	class={className}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	[data-part='root'] {
+		--dry-stepper-connector-width: 1px;
+	}
+</style>

package/src/stepper/stepper-separator.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getStepperCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		step: number;
+	}
+
+	let { step, class: className, ...rest }: Props = $props();
+
+	const ctx = getStepperCtx();
+	let isComplete = $derived(ctx.isStepComplete(step));
+</script>
+
+<div
+	role="presentation"
+	aria-hidden="true"
+	data-part="separator"
+	data-state={isComplete ? 'complete' : 'inactive'}
+	data-orientation={ctx.orientation}
+	class={className}
+	{...rest}
+></div>
+
+<style>
+	[data-part='separator'] {
+		display: grid;
+		grid-template-columns: minmax(var(--dry-space-6), 1fr);
+		height: var(--dry-stepper-connector-width, 1px);
+		background: var(--dry-color-stroke-weak);
+		margin: 0 var(--dry-space-2);
+		transition: background var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	[data-part='separator'][data-state='complete'] {
+		background: var(--dry-color-stroke-selected);
+	}
+
+	[data-orientation='vertical'] {
+		grid-template-columns: var(--dry-stepper-connector-width, 1px);
+		height: var(--dry-space-6);
+		margin: 0;
+		margin-left: calc(var(--dry-stepper-indicator-size, 1.25rem) / 2);
+	}
+</style>

package/src/stepper/stepper-step-button.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import { getStepperCtx } from './context.svelte.js';
+
+	interface Props extends Omit<HTMLAttributes<HTMLLIElement>, 'onclick'> {
+		step: number;
+		clickable?: boolean;
+		error?: boolean;
+		onclick?: (index: number) => void;
+		children: Snippet;
+	}
+
+	let {
+		step,
+		clickable = false,
+		error = false,
+		onclick,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	const ctx = getStepperCtx();
+	let isComplete = $derived(ctx.isStepComplete(step));
+	let isActive = $derived(ctx.isStepActive(step));
+	let dataState = $derived(
+		error ? 'error' : isComplete ? 'complete' : isActive ? 'active' : 'inactive'
+	);
+
+	function handleClick() {
+		if (onclick) {
+			onclick(step);
+		}
+	}
+</script>
+
+<li
+	data-part="step"
+	data-state={dataState}
+	data-orientation={ctx.orientation}
+	aria-current={isActive ? 'step' : undefined}
+	class={className}
+	{...rest}
+>
+	{#if clickable}
+		<Button variant="bare" type="button" aria-label="Go to step {step + 1}" onclick={handleClick}>
+			{@render children()}
+		</Button>
+	{:else}
+		{@render children()}
+	{/if}
+</li>
+
+<style>
+	[data-part='step'] {
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		gap: var(--dry-stepper-gap, var(--dry-space-2));
+		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-weak);
+	}
+
+	[data-part='step']::before {
+		content: '';
+		display: block;
+		aspect-ratio: 1;
+		height: var(--dry-stepper-indicator-size, 1.25rem);
+		border-radius: 50%;
+		border: var(--dry-stepper-connector-width, 1px) solid var(--dry-color-stroke-weak);
+		background: var(--dry-color-fill-base, transparent);
+		transition:
+			border-color var(--dry-duration-fast) var(--dry-ease-default),
+			background var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	[data-part='step'][data-state='active'] {
+		color: var(--dry-color-text-brand);
+		font-weight: 500;
+	}
+
+	[data-part='step'][data-state='active']::before {
+		border-color: var(--dry-color-stroke-selected);
+		background: var(--dry-color-fill-selected);
+	}
+
+	[data-part='step'][data-state='complete'] {
+		color: var(--dry-color-text-strong);
+	}
+
+	[data-part='step'][data-state='complete']::before {
+		border-color: var(--dry-color-text-strong);
+		background: var(--dry-color-text-strong);
+	}
+
+	[data-part='step'][data-state='error'] {
+		color: var(--dry-color-text-error);
+	}
+
+	[data-part='step'][data-state='error']::before {
+		border-color: var(--dry-color-fill-error);
+		background: var(--dry-color-fill-base, transparent);
+	}
+
+	[data-orientation='vertical'] {
+		padding: var(--dry-space-1) 0;
+	}
+</style>

package/src/stepper/stepper.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Stepper',
+	description: 'Step-by-step progress indicator',
+	category: 'navigation',
+	tags: ['steps', 'wizard', 'progress', 'workflow', 'multi-step', 'form']
+};

package/src/svg/index.ts

@@ -0,0 +1,5 @@
+import type { SvgProps as PrimitiveSvgProps } from '@dryui/primitives/svg';
+
+export interface SvgProps extends PrimitiveSvgProps {}
+
+export { default as Svg } from './svg.svelte';

package/src/svg/svg.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Svg',
+	description: 'Accessible SVG wrapper with viewBox and aria-label defaults',
+	category: 'utility',
+	tags: ['svg', 'icon', 'graphic', 'accessible', 'vector']
+};