@dryui/ui 3.0.0 → 4.0.0

package/src/skeleton/index.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'svelte/elements';
+
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+	variant?: 'text' | 'circular' | 'rectangular';
+	width?: string;
+	height?: string;
+}
+
+export { default as Skeleton } from './skeleton.svelte';

package/src/skeleton/skeleton.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Skeleton',
+	description: 'Loading placeholder animation',
+	category: 'feedback',
+	tags: ['loading', 'placeholder', 'shimmer', 'skeleton']
+};

package/src/skeleton/skeleton.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		variant?: 'text' | 'circular' | 'rectangular';
+		width?: string;
+		height?: string;
+	}
+
+	let { variant = 'text', width, height, class: className, ...rest }: Props = $props();
+
+	let el = $state<HTMLDivElement>();
+
+	$effect(() => {
+		if (!el) return;
+		if (width) {
+			el.style.setProperty('width', width);
+		} else {
+			el.style.removeProperty('width');
+		}
+		if (height) {
+			el.style.setProperty('--_h', height);
+		} else {
+			el.style.removeProperty('--_h');
+		}
+	});
+</script>
+
+<div bind:this={el} aria-hidden="true" data-variant={variant} class={className} {...rest}></div>
+
+<style>
+	div {
+		/* Component tokens (Tier 3) — uses semantic color for dark mode support */
+		--dry-skeleton-color: color-mix(
+			in srgb,
+			var(--dry-color-text-strong) 8%,
+			var(--dry-color-bg-base)
+		);
+		--dry-skeleton-highlight: color-mix(
+			in srgb,
+			var(--dry-color-text-strong) 14%,
+			var(--dry-color-bg-base)
+		);
+		--dry-skeleton-radius: var(--dry-radius-sm);
+
+		display: block;
+		background-color: var(--dry-skeleton-color);
+		background-image: linear-gradient(
+			90deg,
+			var(--dry-skeleton-color) 0%,
+			var(--dry-skeleton-highlight) 40%,
+			var(--dry-skeleton-color) 80%
+		);
+		background-size: 200% 100%;
+		animation: skeleton-shimmer 1.5s ease-in-out infinite;
+		border-radius: var(--dry-skeleton-radius);
+		/* width set via $effect inline style (lint bans width in CSS);
+		   --_h set by $effect when height prop is provided,
+		   overriding variant defaults via the var() fallback chain */
+	}
+
+	@keyframes skeleton-shimmer {
+		0% {
+			background-position: 200% 0;
+		}
+		100% {
+			background-position: -200% 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		div {
+			animation: none;
+			background-image: none;
+		}
+	}
+
+	/* ── Variants ──────────────────────────────────────────────────────────────── */
+
+	div[data-variant='text'] {
+		--dry-skeleton-radius: var(--dry-radius-md);
+		height: var(--_h, var(--dry-text-base-leading));
+	}
+
+	div[data-variant='circular'] {
+		--dry-skeleton-radius: var(--dry-radius-full);
+		aspect-ratio: 1;
+		height: var(--_h, var(--dry-space-10));
+		box-shadow: inset 0 0 0 1px var(--dry-image-edge);
+	}
+
+	div[data-variant='rectangular'] {
+		--dry-skeleton-radius: var(--dry-radius-sm);
+		height: var(--_h, var(--dry-space-16));
+		box-shadow: inset 0 0 0 1px var(--dry-image-edge);
+	}
+</style>

package/src/slider/index.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { SliderProps as PrimitiveSliderProps } from '@dryui/primitives';
+
+export type SliderVariant = 'default' | 'pill';
+
+export interface SliderProps extends Omit<PrimitiveSliderProps, 'size'> {
+	size?: 'sm' | 'md' | 'lg';
+	variant?: SliderVariant;
+	valueLabel?: Snippet<[{ value: number; percentage: number }]>;
+}
+
+export { default as Slider } from './slider-input.svelte';

package/src/slider/slider-input.svelte

@@ -0,0 +1,277 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { getFormControlCtx, variantAttrs } from '@dryui/primitives';
+
+	interface Props extends Omit<HTMLInputAttributes, 'size'> {
+		value?: number;
+		min?: number;
+		max?: number;
+		step?: number;
+		size?: 'sm' | 'md' | 'lg';
+		variant?: 'default' | 'pill';
+		disabled?: boolean;
+		orientation?: 'horizontal' | 'vertical';
+		valueLabel?: Snippet<[{ value: number; percentage: number }]>;
+	}
+
+	let {
+		value = $bindable(50),
+		min = 0,
+		max = 100,
+		step = 1,
+		size = 'md',
+		variant = 'default',
+		disabled = false,
+		orientation = 'horizontal',
+		valueLabel,
+		class: className,
+		...rest
+	}: Props = $props();
+
+	const ctx = getFormControlCtx();
+	const isDisabled = $derived(disabled || ctx?.disabled || false);
+
+	let progress = $derived(((value - min) / (max - min)) * 100);
+	let isPill = $derived(variant === 'pill');
+
+	let el = $state<HTMLSpanElement>();
+
+	$effect(() => {
+		if (!el) return;
+		el.style.setProperty('--dry-slider-progress', `${progress}%`);
+	});
+</script>
+
+<span class="wrapper" bind:this={el} {...variantAttrs({ variant, size })}>
+	<input
+		type="range"
+		bind:value
+		id={ctx?.id}
+		{min}
+		{max}
+		{step}
+		disabled={isDisabled}
+		required={ctx?.required || undefined}
+		aria-describedby={ctx?.describedBy}
+		aria-invalid={ctx?.hasError || undefined}
+		aria-errormessage={ctx?.errorMessageId}
+		data-disabled={isDisabled || undefined}
+		data-orientation={orientation}
+		{...variantAttrs({ variant, size })}
+		class={className}
+		{...rest}
+	/>
+	{#if isPill}
+		<span data-part="value-label" aria-hidden="true">
+			{#if valueLabel}
+				{@render valueLabel({ value, percentage: progress })}
+			{:else}
+				{Math.round(progress)}%
+			{/if}
+		</span>
+	{/if}
+</span>
+
+<style>
+	.wrapper {
+		display: grid;
+	}
+
+	input {
+		--dry-slider-track-height: 8px;
+		--dry-slider-thumb-size: 24px;
+		appearance: none;
+		-webkit-appearance: none;
+		background: transparent;
+		cursor: pointer;
+		margin: 0;
+
+		/* Track - WebKit */
+		&::-webkit-slider-runnable-track {
+			height: var(--dry-slider-track-height);
+			border-radius: var(--dry-radius-full);
+			border: 1px solid var(--dry-color-stroke-weak);
+			box-shadow: var(--dry-shadow-sunken);
+			background-color: var(--dry-color-fill);
+			background-image: linear-gradient(
+				var(--dry-color-fill-selected),
+				var(--dry-color-fill-selected)
+			);
+			background-size: var(--dry-slider-progress, 50%) 100%;
+			background-repeat: no-repeat;
+		}
+
+		/* Track - Firefox */
+		&::-moz-range-track {
+			height: var(--dry-slider-track-height);
+			border-radius: var(--dry-radius-full);
+			border: 1px solid var(--dry-color-stroke-weak);
+			box-shadow: var(--dry-shadow-sunken);
+			background: var(--dry-color-fill);
+		}
+
+		&::-moz-range-progress {
+			height: var(--dry-slider-track-height);
+			border-radius: var(--dry-radius-full);
+			background: var(--dry-color-fill-selected);
+		}
+
+		/* Thumb - WebKit */
+		&::-webkit-slider-thumb {
+			-webkit-appearance: none;
+			appearance: none;
+			aspect-ratio: 1;
+			height: var(--dry-slider-thumb-size);
+			border-radius: var(--dry-radius-full);
+			background: var(--dry-color-bg-overlay);
+			border: 2px solid var(--dry-color-fill-brand);
+			box-shadow: var(--dry-shadow-sm);
+			margin-top: calc((var(--dry-slider-track-height) - var(--dry-slider-thumb-size)) / 2);
+			transition:
+				transform var(--dry-duration-fast) var(--dry-ease-default),
+				box-shadow var(--dry-duration-fast) var(--dry-ease-default);
+		}
+
+		/* Thumb - Firefox */
+		&::-moz-range-thumb {
+			aspect-ratio: 1;
+			height: var(--dry-slider-thumb-size);
+			border-radius: var(--dry-radius-full);
+			background: var(--dry-color-bg-overlay);
+			border: 2px solid var(--dry-color-fill-brand);
+			box-shadow: var(--dry-shadow-sm);
+			transition:
+				transform var(--dry-duration-fast) var(--dry-ease-default),
+				box-shadow var(--dry-duration-fast) var(--dry-ease-default);
+		}
+
+		&:hover:not([data-disabled])::-webkit-slider-thumb {
+			transform: scale(1.1);
+		}
+
+		&:hover:not([data-disabled])::-moz-range-thumb {
+			transform: scale(1.1);
+		}
+
+		&:active:not([data-disabled])::-webkit-slider-thumb {
+			transform: scale(0.95);
+		}
+
+		&:active:not([data-disabled])::-moz-range-thumb {
+			transform: scale(0.95);
+		}
+
+		&:active:not([data-disabled]) {
+			cursor: grabbing;
+		}
+
+		&:focus-visible {
+			outline: var(--dry-focus-ring);
+			outline-offset: 4px;
+		}
+
+		&[data-disabled] {
+			opacity: var(--dry-state-disabled-opacity);
+			cursor: not-allowed;
+		}
+
+		&[data-orientation='vertical'] {
+			writing-mode: vertical-lr;
+			direction: rtl;
+		}
+	}
+
+	input[data-size='sm'] {
+		--dry-slider-track-height: 4px;
+		--dry-slider-thumb-size: 20px;
+	}
+
+	input[data-size='md'] {
+		--dry-slider-track-height: 8px;
+		--dry-slider-thumb-size: 24px;
+	}
+
+	input[data-size='lg'] {
+		--dry-slider-track-height: 8px;
+		--dry-slider-thumb-size: 28px;
+	}
+
+	/* ── Pill variant ── */
+
+	.wrapper[data-variant='pill'] input,
+	.wrapper[data-variant='pill'] [data-part='value-label'] {
+		grid-area: 1 / 1;
+	}
+
+	input[data-variant='pill'][data-size='sm'] {
+		--dry-slider-track-height: 32px;
+		--dry-slider-thumb-size: 32px;
+	}
+
+	input[data-variant='pill'][data-size='md'] {
+		--dry-slider-track-height: 40px;
+		--dry-slider-thumb-size: 40px;
+	}
+
+	input[data-variant='pill'][data-size='lg'] {
+		--dry-slider-track-height: 48px;
+		--dry-slider-thumb-size: 48px;
+	}
+
+	input[data-variant='pill']::-webkit-slider-thumb {
+		background: transparent;
+		border: none;
+		box-shadow: none;
+		margin-top: 0;
+	}
+
+	input[data-variant='pill']::-moz-range-thumb {
+		background: transparent;
+		border: none;
+		box-shadow: none;
+	}
+
+	input[data-variant='pill']:hover:not([data-disabled])::-webkit-slider-thumb,
+	input[data-variant='pill']:active:not([data-disabled])::-webkit-slider-thumb {
+		transform: none;
+	}
+
+	input[data-variant='pill']:hover:not([data-disabled])::-moz-range-thumb,
+	input[data-variant='pill']:active:not([data-disabled])::-moz-range-thumb {
+		transform: none;
+	}
+
+	/* Pill value label */
+	.wrapper[data-variant='pill'] [data-part='value-label'] {
+		pointer-events: none;
+		display: grid;
+		align-items: center;
+		padding-inline: var(--dry-space-4);
+		font-size: var(--dry-text-sm-size, 0.875rem);
+		font-weight: 600;
+		font-variant-numeric: tabular-nums;
+		color: var(--dry-color-text-strong);
+		clip-path: inset(
+			0 calc(100% - var(--dry-slider-progress, 50%)) 0 0 round var(--dry-radius-full)
+		);
+		transition: clip-path var(--dry-duration-fast) var(--dry-ease-default);
+		z-index: 1;
+	}
+
+	.wrapper[data-variant='pill'][data-size='sm'] [data-part='value-label'] {
+		font-size: var(--dry-text-xs-size, 0.75rem);
+		padding-inline: var(--dry-space-3);
+	}
+
+	.wrapper[data-variant='pill'][data-size='lg'] [data-part='value-label'] {
+		font-size: var(--dry-text-base-size, 1rem);
+		padding-inline: var(--dry-space-5);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.wrapper[data-variant='pill'] [data-part='value-label'] {
+			transition: none;
+		}
+	}
+</style>

package/src/slider/slider.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Slider',
+	description: 'Range input slider with thumb control',
+	category: 'input',
+	tags: ['form', 'range', 'slider', 'value']
+};

package/src/spacer/index.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'svelte/elements';
+
+export interface SpacerProps extends HTMLAttributes<HTMLDivElement> {
+	size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+	axis?: 'vertical' | 'horizontal';
+}
+
+export { default as Spacer } from './spacer.svelte';

package/src/spacer/spacer.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Spacer',
+	description: 'Empty space component for spacing',
+	category: 'layout',
+	tags: ['space', 'gap', 'margin', 'padding']
+};

package/src/spacer/spacer.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { variantAttrs } from '@dryui/primitives';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+		axis?: 'vertical' | 'horizontal';
+	}
+
+	let { size, axis = 'vertical', class: className, ...rest }: Props = $props();
+</script>
+
+<div
+	aria-hidden="true"
+	{...variantAttrs({ axis, size: size || undefined })}
+	class={className}
+	{...rest}
+></div>
+
+<style>
+	div {
+		min-height: 0;
+	}
+
+	div:not([data-size]) {
+		grid-column: 1 / -1;
+	}
+
+	/* ── Axis ─────────────────────────────────────────────────────────────────── */
+
+	div[data-axis='horizontal'] {
+		display: inline-grid;
+	}
+
+	/* ── Sizes (vertical = height, horizontal = column track) ────────────────────────── */
+
+	div[data-axis='vertical'][data-size='xs'] {
+		height: var(--dry-space-1);
+	}
+
+	div[data-axis='vertical'][data-size='sm'] {
+		height: var(--dry-space-2);
+	}
+
+	div[data-axis='vertical'][data-size='md'] {
+		height: var(--dry-space-4);
+	}
+
+	div[data-axis='vertical'][data-size='lg'] {
+		height: var(--dry-space-6);
+	}
+
+	div[data-axis='vertical'][data-size='xl'] {
+		height: var(--dry-space-8);
+	}
+
+	div[data-axis='vertical'][data-size='2xl'] {
+		height: var(--dry-space-12);
+	}
+
+	div[data-axis='horizontal'][data-size='xs'] {
+		grid-template-columns: var(--dry-space-1);
+	}
+
+	div[data-axis='horizontal'][data-size='sm'] {
+		grid-template-columns: var(--dry-space-2);
+	}
+
+	div[data-axis='horizontal'][data-size='md'] {
+		grid-template-columns: var(--dry-space-4);
+	}
+
+	div[data-axis='horizontal'][data-size='lg'] {
+		grid-template-columns: var(--dry-space-6);
+	}
+
+	div[data-axis='horizontal'][data-size='xl'] {
+		grid-template-columns: var(--dry-space-8);
+	}
+
+	div[data-axis='horizontal'][data-size='2xl'] {
+		grid-template-columns: var(--dry-space-12);
+	}
+</style>

package/src/sparkline/index.ts

@@ -0,0 +1,3 @@
+export type { SparklineProps } from '@dryui/primitives';
+
+export { default as Sparkline } from './sparkline.svelte';

package/src/sparkline/sparkline.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Sparkline',
+	description: 'Compact inline SVG sparkline chart',
+	category: 'display',
+	tags: ['sparkline', 'chart', 'inline', 'trend', 'svg', 'data']
+};

package/src/sparkline/sparkline.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+	import type { SVGAttributes } from 'svelte/elements';
+
+	interface Props extends Omit<SVGAttributes<SVGSVGElement>, 'fill'> {
+		data: number[];
+		width?: number;
+		height?: number;
+		color?: string;
+		filled?: boolean;
+		strokeWidth?: number;
+		highlightLast?: boolean;
+	}
+
+	let {
+		data,
+		width = 100,
+		height = 32,
+		color = 'currentColor',
+		filled = false,
+		strokeWidth = 2,
+		highlightLast = false,
+		class: className,
+		...rest
+	}: Props = $props();
+
+	function dataToPoints(values: number[], w: number, h: number, padding: number) {
+		if (values.length === 0) return [];
+		const min = Math.min(...values);
+		const max = Math.max(...values);
+		const range = max - min || 1;
+		const usableW = w - padding * 2;
+		const usableH = h - padding * 2;
+		const step = values.length > 1 ? usableW / (values.length - 1) : 0;
+		return values.map((v, i) => ({
+			x: padding + i * step,
+			y: padding + usableH - ((v - min) / range) * usableH
+		}));
+	}
+
+	function buildLinePath(pts: { x: number; y: number }[]): string {
+		if (pts.length === 0) return '';
+		return pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x},${p.y}`).join('');
+	}
+
+	function buildAreaPath(pts: { x: number; y: number }[], h: number): string {
+		if (pts.length === 0) return '';
+		const line = buildLinePath(pts);
+		return `${line}L${pts[pts.length - 1]!.x},${h}L${pts[0]!.x},${h}Z`;
+	}
+
+	const points = $derived(dataToPoints(data, width, height, 2));
+	const linePath = $derived(buildLinePath(points));
+	const areaPath = $derived(filled ? buildAreaPath(points, height) : '');
+	const lastPoint = $derived(points.length > 0 ? points[points.length - 1] : null);
+</script>
+
+<svg
+	viewBox="0 0 {width} {height}"
+	{width}
+	{height}
+	fill="none"
+	role="img"
+	aria-label="Sparkline chart"
+	data-sparkline
+	class={className}
+	{...rest}
+>
+	{#if filled && areaPath}
+		<path d={areaPath} fill={color} opacity="0.1" data-part="area" />
+	{/if}
+	{#if linePath}
+		<path
+			d={linePath}
+			stroke={color}
+			stroke-width={strokeWidth}
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			data-part="line"
+		/>
+	{/if}
+	{#if highlightLast && lastPoint}
+		<circle
+			cx={lastPoint.x}
+			cy={lastPoint.y}
+			r={strokeWidth + 1}
+			fill={color}
+			data-part="last-point"
+		/>
+	{/if}
+</svg>
+
+<style>
+	[data-sparkline] {
+		--dry-sparkline-color: var(--dry-color-fill-brand, currentColor);
+		--dry-sparkline-fill-opacity: 0.1;
+
+		display: inline-block;
+		vertical-align: middle;
+		color: var(--dry-sparkline-color);
+	}
+
+	[data-sparkline] [data-part='area'] {
+		opacity: var(--dry-sparkline-fill-opacity);
+	}
+
+	[data-sparkline] [data-part='line'] {
+		stroke: var(--dry-sparkline-color);
+	}
+
+	[data-sparkline] [data-part='last-point'] {
+		fill: var(--dry-sparkline-color);
+	}
+</style>

package/src/spinner/index.ts

@@ -0,0 +1,9 @@
+import type { SVGAttributes } from 'svelte/elements';
+
+export interface SpinnerProps extends SVGAttributes<SVGSVGElement> {
+	size?: 'sm' | 'md' | 'lg';
+	color?: 'primary' | 'current';
+	label?: string;
+}
+
+export { default as Spinner } from './spinner.svelte';

package/src/spinner/spinner.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Spinner',
+	description: 'Loading spinner animation',
+	category: 'feedback',
+	tags: ['loading', 'spinner', 'wait', 'processing']
+};