@dryui/ui 3.0.0 → 4.0.1

package/src/format-date/format-date.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLTimeElement> {
+		date: Date | string | number;
+		locale?: string;
+		weekday?: 'long' | 'short' | 'narrow';
+		era?: 'long' | 'short' | 'narrow';
+		year?: 'numeric' | '2-digit';
+		month?: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow';
+		day?: 'numeric' | '2-digit';
+		hour?: 'numeric' | '2-digit';
+		minute?: 'numeric' | '2-digit';
+		second?: 'numeric' | '2-digit';
+		timeZoneName?: 'long' | 'short';
+		timeZone?: string;
+		hourCycle?: 'h11' | 'h12' | 'h23' | 'h24';
+		dateStyle?: 'full' | 'long' | 'medium' | 'short';
+		timeStyle?: 'full' | 'long' | 'medium' | 'short';
+	}
+
+	let {
+		date,
+		locale = 'en',
+		weekday,
+		era,
+		year,
+		month,
+		day,
+		hour,
+		minute,
+		second,
+		timeZoneName,
+		timeZone,
+		hourCycle,
+		dateStyle,
+		timeStyle,
+		class: className,
+		...rest
+	}: Props = $props();
+
+	const dateObj = $derived(date instanceof Date ? date : new Date(date));
+
+	const options = $derived({
+		...(weekday && { weekday }),
+		...(era && { era }),
+		...(year && { year }),
+		...(month && { month }),
+		...(day && { day }),
+		...(hour && { hour }),
+		...(minute && { minute }),
+		...(second && { second }),
+		...(timeZoneName && { timeZoneName }),
+		...(timeZone && { timeZone }),
+		...(hourCycle && { hourCycle }),
+		...(dateStyle && { dateStyle }),
+		...(timeStyle && { timeStyle })
+	} as Intl.DateTimeFormatOptions);
+
+	const formatted = $derived(
+		new Intl.DateTimeFormat(
+			locale,
+			Object.keys(options).length > 0 ? options : { dateStyle: 'medium' }
+		).format(dateObj)
+	);
+</script>
+
+<time class={className} datetime={dateObj.toISOString()} data-format-date {...rest}
+	>{formatted}</time
+>
+
+<style>
+	[data-format-date] {
+		color: var(--dry-format-date-color, var(--dry-color-text-weak));
+		font-size: var(--dry-format-date-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/format-date/index.ts

@@ -0,0 +1,3 @@
+export type { FormatDateProps } from '@dryui/primitives';
+
+export { default as FormatDate } from './format-date.svelte';

package/src/format-number/format-number.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'FormatNumber',
+	description: 'Formats numbers with Intl.NumberFormat',
+	category: 'display',
+	tags: ['format', 'number', 'currency', 'percent']
+};

package/src/format-number/format-number.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
+		value: number;
+		locale?: string;
+		type?: 'decimal' | 'currency' | 'percent' | 'unit';
+		currency?: string;
+		unit?: string;
+		notation?: 'standard' | 'scientific' | 'engineering' | 'compact';
+		minimumFractionDigits?: number;
+		maximumFractionDigits?: number;
+		minimumIntegerDigits?: number;
+		minimumSignificantDigits?: number;
+		maximumSignificantDigits?: number;
+	}
+
+	let {
+		value,
+		locale = 'en',
+		type: numberStyle = 'decimal',
+		currency,
+		unit,
+		notation,
+		minimumFractionDigits,
+		maximumFractionDigits,
+		minimumIntegerDigits,
+		minimumSignificantDigits,
+		maximumSignificantDigits,
+		class: className,
+		...rest
+	}: Props = $props();
+
+	const formatted = $derived(
+		new Intl.NumberFormat(locale, {
+			style: numberStyle,
+			...(currency && { currency }),
+			...(unit && { unit }),
+			...(notation && { notation }),
+			...(minimumFractionDigits != null && { minimumFractionDigits }),
+			...(maximumFractionDigits != null && { maximumFractionDigits }),
+			...(minimumIntegerDigits != null && { minimumIntegerDigits }),
+			...(minimumSignificantDigits != null && { minimumSignificantDigits }),
+			...(maximumSignificantDigits != null && { maximumSignificantDigits })
+		}).format(value)
+	);
+</script>
+
+<span class={className} data-format-number {...rest}>{formatted}</span>
+
+<style>
+	[data-format-number] {
+		color: var(--dry-format-number-color, var(--dry-color-text-weak));
+		font-size: var(--dry-format-number-font-size, var(--dry-type-small-size));
+		font-family: var(--dry-font-sans);
+		font-variant-numeric: tabular-nums;
+		line-height: var(--dry-type-small-leading);
+	}
+</style>

package/src/format-number/index.ts

@@ -0,0 +1,3 @@
+export type { FormatNumberProps } from '@dryui/primitives';
+
+export { default as FormatNumber } from './format-number.svelte';

package/src/gauge/gauge.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Gauge',
+	description: 'SVG gauge indicator with configurable arc, thresholds, and label',
+	category: 'display',
+	tags: ['gauge', 'meter', 'dial', 'svg', 'dashboard', 'threshold']
+};

package/src/gauge/gauge.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { SVGAttributes } from 'svelte/elements';
+
+	interface Props extends SVGAttributes<SVGSVGElement> {
+		value: number;
+		min?: number;
+		max?: number;
+		startAngle?: number;
+		endAngle?: number;
+		thresholds?: { value: number; color: string }[];
+		label?: Snippet<[{ value: number; percentage: number }]>;
+		children?: Snippet;
+	}
+
+	let {
+		value,
+		min = 0,
+		max = 100,
+		startAngle = -135,
+		endAngle = 135,
+		thresholds,
+		label,
+		children,
+		class: className,
+		...rest
+	}: Props = $props();
+
+	function polarToCartesian(cx: number, cy: number, radius: number, angleDeg: number) {
+		const angleRad = ((angleDeg - 90) * Math.PI) / 180;
+		return { x: cx + radius * Math.cos(angleRad), y: cy + radius * Math.sin(angleRad) };
+	}
+
+	function describeArc(cx: number, cy: number, radius: number, start: number, end: number): string {
+		const s = polarToCartesian(cx, cy, radius, end);
+		const e = polarToCartesian(cx, cy, radius, start);
+		const largeArcFlag = end - start <= 180 ? 0 : 1;
+		return `M ${s.x} ${s.y} A ${radius} ${radius} 0 ${largeArcFlag} 0 ${e.x} ${e.y}`;
+	}
+
+	const percentage = $derived(
+		max > min ? Math.min(Math.max(((value - min) / (max - min)) * 100, 0), 100) : 0
+	);
+
+	const fillAngle = $derived(startAngle + ((endAngle - startAngle) * percentage) / 100);
+
+	const trackPath = $derived(describeArc(50, 50, 40, startAngle, endAngle));
+	const fillPath = $derived(percentage > 0 ? describeArc(50, 50, 40, startAngle, fillAngle) : '');
+
+	const thresholdColor = $derived.by(() => {
+		if (!thresholds || thresholds.length === 0) return undefined;
+		const sorted = [...thresholds].sort((a, b) => a.value - b.value);
+		let color: string | undefined;
+		for (const t of sorted) {
+			if (value >= t.value) {
+				color = t.color;
+			}
+		}
+		return color;
+	});
+
+	function applyFillStroke(node: SVGElement) {
+		$effect(() => {
+			if (thresholdColor) node.style.setProperty('--_gauge-fill-stroke', thresholdColor);
+			else node.style.removeProperty('--_gauge-fill-stroke');
+		});
+	}
+</script>
+
+<svg
+	class={className}
+	data-gauge
+	role="meter"
+	aria-valuenow={value}
+	aria-valuemin={min}
+	aria-valuemax={max}
+	viewBox="0 0 100 100"
+	{...rest}
+>
+	<path data-part="track" d={trackPath} fill="none" stroke="currentColor" opacity="0.2" />
+	{#if fillPath}
+		<path data-part="fill" d={fillPath} fill="none" stroke="currentColor" use:applyFillStroke />
+	{/if}
+	{#if label}
+		<foreignObject x="10" y="10" width="80" height="80">
+			<div data-gauge-label>
+				{@render label({ value, percentage })}
+			</div>
+		</foreignObject>
+	{/if}
+	{#if children}
+		{@render children()}
+	{/if}
+</svg>
+
+<style>
+	[data-gauge] {
+		/* Component tokens (Tier 3) */
+		--dry-gauge-size: 8rem;
+		--dry-gauge-track-color: var(--dry-color-stroke-weak);
+		--dry-gauge-fill-color: var(--dry-color-fill-brand);
+		--dry-gauge-stroke-width: 8;
+
+		/* Threshold zone palette. Consumers can override any slot to retheme
+		   the arc segmentation. Default order: brand, success, warning, error. */
+		--dry-gauge-zone-1: var(--dry-color-fill-brand);
+		--dry-gauge-zone-2: var(--dry-color-fill-success);
+		--dry-gauge-zone-3: var(--dry-color-fill-warning);
+		--dry-gauge-zone-4: var(--dry-color-fill-error);
+
+		aspect-ratio: 1;
+		height: var(--dry-gauge-size);
+	}
+
+	[data-gauge] [data-part='track'] {
+		fill: none;
+		stroke: var(--dry-gauge-track-color);
+		stroke-width: var(--dry-gauge-stroke-width);
+		stroke-linecap: round;
+		opacity: 1;
+	}
+
+	[data-gauge] [data-part='fill'] {
+		fill: none;
+		stroke: var(--_gauge-fill-stroke, var(--dry-gauge-fill-color));
+		stroke-width: var(--dry-gauge-stroke-width);
+		stroke-linecap: round;
+		transition: d var(--dry-duration-normal) var(--dry-ease-default);
+	}
+
+	[data-gauge-label] {
+		display: grid;
+		place-items: center;
+		height: 100%;
+	}
+
+	/* Reduced motion */
+	@media (prefers-reduced-motion: reduce) {
+		[data-gauge] [data-part='fill'] {
+			transition: none;
+		}
+	}
+</style>

package/src/gauge/index.ts

@@ -0,0 +1,2 @@
+export type { GaugeProps } from '@dryui/primitives';
+export { default as Gauge } from './gauge.svelte';

package/src/glass/glass.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Glass',
+	description: 'Translucent glass wrapper with blur, tint, and saturation control',
+	category: 'visual',
+	tags: ['glass', 'blur', 'frosted', 'surface', 'translucent']
+};

package/src/glass/glass.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		blur?: number;
+		tint?: string;
+		saturation?: number;
+		children: Snippet;
+	}
+
+	let {
+		blur = 12,
+		tint,
+		saturation = 120,
+		children,
+		class: className,
+		style,
+		...rest
+	}: Props = $props();
+
+	function applyStyles(node: HTMLElement) {
+		$effect(() => {
+			node.style.cssText = style || '';
+			node.style.setProperty('--dry-glass-blur', `${Math.max(0, blur)}px`);
+			if (tint) node.style.setProperty('--dry-glass-tint', tint);
+			else node.style.removeProperty('--dry-glass-tint');
+			node.style.setProperty(
+				'--dry-glass-saturation',
+				`${Math.max(0, Math.min(200, saturation))}%`
+			);
+		});
+	}
+</script>
+
+<div class={className} data-glass use:applyStyles {...rest}>
+	{@render children()}
+</div>
+
+<style>
+	[data-glass] {
+		position: relative;
+		backdrop-filter: blur(var(--dry-glass-blur, 12px)) saturate(var(--dry-glass-saturation, 120%));
+		-webkit-backdrop-filter: blur(var(--dry-glass-blur, 12px))
+			saturate(var(--dry-glass-saturation, 120%));
+		background: var(--dry-glass-tint, var(--dry-color-glass-tint, rgba(255, 255, 255, 0.08)));
+		border-radius: inherit;
+	}
+</style>

package/src/glass/index.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+
+export interface GlassProps extends HTMLAttributes<HTMLDivElement> {
+	blur?: number;
+	tint?: string;
+	saturation?: number;
+	children: Snippet;
+}
+
+export { default as Glass } from './glass.svelte';

package/src/glow/glow.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Glow',
+	description: 'Soft glow effect wrapper with configurable color, intensity, and animation',
+	category: 'visual',
+	tags: ['glow', 'light', 'shadow', 'neon', 'effect', 'animation']
+};

package/src/glow/glow.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		color?: string;
+		intensity?: number;
+		radius?: number;
+		blendMode?: string;
+		children: Snippet;
+	}
+
+	let {
+		color = 'var(--dry-color-fill-brand)',
+		intensity = 50,
+		radius = 20,
+		blendMode = 'screen',
+		children,
+		class: className,
+		style,
+		...rest
+	}: Props = $props();
+
+	const clampedIntensity = $derived(`${Math.max(0, Math.min(100, intensity))}`);
+	const radiusValue = $derived(`${Math.max(0, radius)}px`);
+
+	function applyStyles(node: HTMLElement) {
+		$effect(() => {
+			node.style.cssText = style || '';
+			node.style.setProperty('--dry-glow-color', color);
+			node.style.setProperty('--dry-glow-intensity', clampedIntensity);
+			node.style.setProperty('--dry-glow-radius', radiusValue);
+			node.style.setProperty('--dry-glow-blend', blendMode);
+		});
+	}
+</script>
+
+<div class={className} data-glow {...rest} use:applyStyles>
+	{@render children()}
+</div>
+
+<style>
+	[data-glow] {
+		position: relative;
+		border-radius: inherit;
+	}
+
+	[data-glow]::before {
+		content: '';
+		position: absolute;
+		inset: calc(var(--dry-glow-radius, 20px) * -0.5);
+		border-radius: inherit;
+		background: var(--dry-glow-color, var(--dry-color-fill-brand));
+		opacity: calc(var(--dry-glow-intensity, 50) / 100);
+		filter: blur(var(--dry-glow-radius, 20px));
+		mix-blend-mode: var(--dry-glow-blend, screen);
+		pointer-events: none;
+		z-index: -1;
+	}
+</style>

package/src/glow/index.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { BlendMode } from '@dryui/primitives/glow';
+
+export type { BlendMode };
+
+export interface GlowProps extends HTMLAttributes<HTMLDivElement> {
+	color?: string;
+	intensity?: number;
+	radius?: number;
+	blendMode?: BlendMode;
+	children: Snippet;
+}
+
+export { default as Glow } from './glow.svelte';

package/src/god-rays/god-rays.meta.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'GodRays',
+	description:
+		'Volumetric radial light rays surface with configurable origin, spread, and intensity',
+	category: 'visual',
+	tags: ['rays', 'light', 'volumetric', 'hero', 'effect']
+};

package/src/god-rays/god-rays.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { observeOffscreenState } from '@dryui/primitives';
+
+	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+		color?: string | undefined;
+		rayCount?: number | undefined;
+		intensity?: number | undefined;
+		center?: { x: number; y: number } | undefined;
+		speed?: number | undefined;
+		blendMode?: string | undefined;
+		children?: Snippet | undefined;
+	}
+
+	let {
+		color,
+		rayCount = 12,
+		intensity = 60,
+		center = { x: 0.5, y: 0 },
+		speed = 0,
+		blendMode = 'screen',
+		children,
+		class: className,
+		style,
+		...rest
+	}: Props = $props();
+
+	const clampedIntensity = $derived(`${Math.max(0, Math.min(100, intensity))}`);
+	const cx = $derived(`${Math.max(0, Math.min(1, center.x)) * 100}%`);
+	const cy = $derived(`${Math.max(0, Math.min(1, center.y)) * 100}%`);
+	const speedValue = $derived(speed > 0 ? `${speed}s` : '0s');
+
+	const gradientString = $derived.by(() => {
+		const count = Math.max(1, Math.min(36, rayCount));
+		const sliceDeg = 360 / count;
+		const rayDeg = sliceDeg * 0.4;
+		const stops: string[] = [];
+		for (let i = 0; i < count; i++) {
+			const start = i * sliceDeg;
+			stops.push(`var(--dry-rays-color, rgba(255, 255, 255, 0.15)) ${start}deg`);
+			stops.push(`var(--dry-rays-color, rgba(255, 255, 255, 0.15)) ${start + rayDeg}deg`);
+			stops.push(`transparent ${start + rayDeg}deg`);
+			stops.push(`transparent ${start + sliceDeg}deg`);
+		}
+		return `conic-gradient(from 0deg at var(--dry-rays-cx) var(--dry-rays-cy), ${stops.join(', ')})`;
+	});
+
+	function applyRootStyles(node: HTMLElement) {
+		$effect(() => {
+			node.style.cssText = style || '';
+			if (color) node.style.setProperty('--dry-rays-color', color);
+			else node.style.removeProperty('--dry-rays-color');
+			node.style.setProperty('--dry-rays-cx', cx);
+			node.style.setProperty('--dry-rays-cy', cy);
+			node.style.setProperty('--dry-rays-intensity', clampedIntensity);
+			node.style.setProperty('--dry-rays-blend', blendMode);
+			node.style.setProperty('--dry-rays-speed', speedValue);
+		});
+
+		$effect(() => observeOffscreenState(node, { rootMargin: '200px' }));
+	}
+
+	// Flash-on-load: background is a computed conic-gradient with a dynamic number of stops
+	// based on rayCount, so no static CSS default is possible. The layer is invisible without
+	// its gradient anyway (transparent), so no visible flash occurs.
+	function applyLayerStyles(node: HTMLElement) {
+		$effect(() => {
+			node.style.setProperty('background', gradientString);
+		});
+	}
+</script>
+
+<div
+	class={className}
+	data-god-rays
+	data-animated={speed > 0 ? '' : undefined}
+	{...rest}
+	use:applyRootStyles
+>
+	<div data-god-rays-layer use:applyLayerStyles></div>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	[data-god-rays] {
+		--dry-rays-cx: 50%;
+		--dry-rays-cy: 0%;
+		--dry-rays-intensity: 60;
+		--dry-rays-blend: screen;
+		--dry-rays-speed: 0s;
+
+		position: relative;
+		overflow: hidden;
+		border-radius: inherit;
+	}
+
+	[data-god-rays-layer] {
+		position: absolute;
+		inset: -20%;
+		pointer-events: none;
+		filter: blur(30px);
+		opacity: calc(var(--dry-rays-intensity, 60) / 100);
+		mix-blend-mode: var(--dry-rays-blend, screen);
+	}
+
+	[data-god-rays][data-animated] [data-god-rays-layer] {
+		animation: god-rays-rotate var(--dry-rays-speed, 30s) linear infinite;
+	}
+
+	[data-god-rays][data-animated]:not([data-offscreen]) [data-god-rays-layer] {
+		will-change: transform, filter;
+	}
+
+	[data-god-rays][data-offscreen] [data-god-rays-layer] {
+		animation-play-state: paused;
+	}
+
+	@keyframes god-rays-rotate {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		[data-god-rays-layer] {
+			animation: none;
+		}
+	}
+</style>

package/src/god-rays/index.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { BlendMode } from '@dryui/primitives/god-rays';
+
+export type { BlendMode };
+
+export interface GodRaysProps extends HTMLAttributes<HTMLDivElement> {
+	color?: string;
+	rayCount?: number;
+	intensity?: number;
+	center?: { x: number; y: number };
+	speed?: number;
+	blendMode?: BlendMode;
+	children?: Snippet;
+}
+
+export { default as GodRays } from './god-rays.svelte';

package/src/gradient-mesh/gradient-mesh.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'GradientMesh',
+	description: 'Animated multi-color gradient mesh background with optional interactivity',
+	category: 'visual',
+	tags: ['gradient', 'mesh', 'background', 'animation', 'interactive', 'color']
+};