@dryui/ui 3.0.0 → 4.0.1

package/src/progress/progress.svelte

@@ -0,0 +1,302 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { variantAttrs } from '@dryui/primitives';
+
+	interface ProgressSegment {
+		value: number;
+		color: string;
+		label?: string;
+	}
+
+	interface ProgressThreshold {
+		value: number;
+		color?: string;
+	}
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		value?: number;
+		max?: number;
+		size?: 'sm' | 'md' | 'lg';
+		color?: 'blue' | 'green' | 'red' | 'yellow';
+		segments?: ProgressSegment[];
+		thresholds?: ProgressThreshold[];
+		showLabel?: boolean | 'inside' | 'outside';
+	}
+
+	let {
+		value,
+		max = 100,
+		size = 'md',
+		color = 'blue',
+		segments,
+		thresholds,
+		showLabel,
+		class: className,
+		...rest
+	}: Props = $props();
+
+	const segmentsTotal = $derived(segments ? segments.reduce((sum, s) => sum + s.value, 0) : 0);
+	const effectiveValue = $derived(segments ? segmentsTotal : value);
+	const percentage = $derived(
+		effectiveValue != null && max > 0
+			? Math.min(Math.max((effectiveValue / max) * 100, 0), 100)
+			: effectiveValue != null
+				? 0
+				: undefined
+	);
+
+	const labelPosition = $derived(
+		showLabel === true
+			? 'outside'
+			: showLabel === 'inside'
+				? 'inside'
+				: showLabel === 'outside'
+					? 'outside'
+					: undefined
+	);
+
+	const labelText = $derived(percentage != null ? `${Math.round(percentage)}%` : undefined);
+
+	function applySegmentStyles(node: HTMLElement, getSegment: () => ProgressSegment) {
+		$effect(() => {
+			const segment = getSegment();
+			const widthPct = max > 0 ? Math.min(Math.max((segment.value / max) * 100, 0), 100) : 0;
+			node.style.setProperty('width', `${widthPct}%`);
+			node.style.setProperty('--_segment-bg', segment.color);
+		});
+	}
+
+	function applyRootStyles(node: HTMLElement) {
+		$effect(() => {
+			node.style.setProperty('--dry-progress-value', percentage != null ? `${percentage}%` : '');
+		});
+	}
+
+	function applyThresholdStyles(node: HTMLElement, getThreshold: () => ProgressThreshold) {
+		$effect(() => {
+			const threshold = getThreshold();
+			const leftPct = max > 0 ? Math.min(Math.max((threshold.value / max) * 100, 0), 100) : 0;
+			node.style.setProperty('--_threshold-left', `${leftPct}%`);
+			if (threshold.color) {
+				node.style.setProperty('--_threshold-color', threshold.color);
+			} else {
+				node.style.removeProperty('--_threshold-color');
+			}
+		});
+	}
+</script>
+
+<div
+	use:applyRootStyles
+	class={className}
+	role="progressbar"
+	aria-valuenow={effectiveValue}
+	aria-valuemin={0}
+	aria-valuemax={max}
+	data-state={effectiveValue != null ? 'determinate' : 'indeterminate'}
+	data-value={effectiveValue}
+	data-max={max}
+	data-segmented={segments ? '' : undefined}
+	data-has-label={showLabel ? labelPosition : undefined}
+	{...variantAttrs({ size, color })}
+	data-with-label={showLabel ? '' : undefined}
+	{...rest}
+>
+	{#if segments}
+		<div data-part="track">
+			{#each segments as segment}
+				<div data-part="segment" use:applySegmentStyles={() => segment} title={segment.label}></div>
+			{/each}
+		</div>
+	{:else}
+		<div data-part="indicator"></div>
+	{/if}
+
+	{#if thresholds}
+		{#each thresholds as threshold}
+			<div data-part="threshold" use:applyThresholdStyles={() => threshold}></div>
+		{/each}
+	{/if}
+
+	{#if showLabel && labelText}
+		<span data-part="label" data-position={labelPosition}>{labelText}</span>
+	{/if}
+</div>
+
+<style>
+	div[role='progressbar'] {
+		/* Component tokens (Tier 3) */
+		--dry-progress-radius: var(--dry-radius-full);
+		--dry-progress-bar: var(--dry-color-fill-selected);
+
+		display: grid;
+		grid-template-columns: var(--dry-progress-value, 0%) 1fr;
+		position: relative;
+		box-sizing: border-box;
+		height: var(--dry-progress-height, var(--dry-space-2));
+		overflow: hidden;
+		border-radius: var(--dry-progress-radius);
+		background-color: var(--dry-progress-track, var(--dry-color-fill));
+		border: 1px solid var(--dry-color-stroke-weak);
+		box-shadow: var(--dry-shadow-sunken);
+		transition: grid-template-columns var(--dry-duration-normal) var(--dry-ease-default);
+	}
+
+	div[role='progressbar'] > [data-part='indicator'] {
+		height: 100%;
+		border-radius: var(--dry-progress-radius);
+		background-color: var(--dry-progress-bar);
+	}
+
+	/* ── Indeterminate state ──────────────────────────────────────────────────── */
+
+	div[data-state='indeterminate'] {
+		grid-template-columns: 100%;
+	}
+
+	div[data-state='indeterminate'] > [data-part='indicator'] {
+		background-image: repeating-linear-gradient(
+			-45deg,
+			transparent,
+			transparent 8px,
+			color-mix(in srgb, var(--dry-progress-bar) 60%, transparent) 8px,
+			color-mix(in srgb, var(--dry-progress-bar) 60%, transparent) 16px
+		);
+		background-size: 200% 100%;
+		animation: progress-stripe 1s linear infinite;
+	}
+
+	@keyframes progress-stripe {
+		0% {
+			background-position: 0 0;
+		}
+		100% {
+			background-position: 32px 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		div[data-state='indeterminate'] > [data-part='indicator'] {
+			animation: none;
+			background-image: none;
+			background-color: color-mix(in srgb, var(--dry-progress-bar) 50%, transparent);
+		}
+
+		div[role='progressbar'] {
+			transition: none;
+		}
+
+		[data-part='segment'] {
+			transition: none;
+		}
+	}
+
+	/* ── Sizes ─────────────────────────────────────────────────────────────────── */
+
+	[data-size='sm'] {
+		--dry-progress-height: var(--dry-space-1);
+	}
+
+	[data-size='md'] {
+		--dry-progress-height: var(--dry-space-2);
+	}
+
+	[data-size='lg'] {
+		--dry-progress-height: var(--dry-space-3);
+	}
+
+	/* ── Colors ────────────────────────────────────────────────────────────────── */
+
+	[data-color='blue'] {
+		--dry-progress-bar: var(--dry-color-fill-brand);
+	}
+
+	[data-color='green'] {
+		--dry-progress-bar: var(--dry-color-fill-success);
+		--dry-progress-label-inside: var(--dry-color-on-success);
+	}
+
+	[data-color='red'] {
+		--dry-progress-bar: var(--dry-color-fill-error);
+		--dry-progress-label-inside: var(--dry-color-on-error);
+	}
+
+	[data-color='yellow'] {
+		--dry-progress-bar: var(--dry-color-fill-warning);
+		--dry-progress-label-inside: var(--dry-color-on-warning);
+	}
+
+	/* ── Segments ─────────────────────────────────────────────────────────────── */
+
+	[data-segmented] [data-part='track'] {
+		display: grid;
+		grid-auto-flow: column;
+		grid-column: 1 / -1;
+		overflow: hidden;
+		height: 100%;
+		border-radius: var(--dry-progress-radius);
+	}
+
+	[data-part='segment'] {
+		background-color: var(--_segment-bg, var(--dry-progress-bar));
+		height: 100%;
+		transition: width var(--dry-duration-slow) var(--dry-ease-default);
+	}
+
+	[data-part='segment']:first-child {
+		border-radius: var(--dry-progress-radius, var(--dry-radius-full)) 0 0
+			var(--dry-progress-radius, var(--dry-radius-full));
+	}
+
+	[data-part='segment']:last-child {
+		border-radius: 0 var(--dry-progress-radius, var(--dry-radius-full))
+			var(--dry-progress-radius, var(--dry-radius-full)) 0;
+	}
+
+	[data-part='segment']:only-child {
+		border-radius: var(--dry-progress-radius, var(--dry-radius-full));
+	}
+
+	/* ── Thresholds ───────────────────────────────────────────────────────────── */
+
+	[data-part='threshold'] {
+		position: absolute;
+		top: -4px;
+		bottom: -4px;
+		left: var(--_threshold-left, 0%);
+		border-inline-start: 2px solid var(--_threshold-color, var(--dry-color-text-strong));
+		opacity: 0.3;
+		z-index: 1;
+	}
+
+	/* ── Labels ───────────────────────────────────────────────────────────────── */
+
+	[data-part='label'] {
+		font-size: var(--dry-type-ui-caption-size, var(--dry-text-xs-size, 0.75rem));
+		color: var(--dry-color-text-weak);
+		white-space: nowrap;
+		font-variant-numeric: tabular-nums;
+	}
+
+	[data-part='label'][data-position='inside'] {
+		position: absolute;
+		right: var(--dry-space-2, 0.5rem);
+		top: 50%;
+		transform: translateY(-50%);
+		color: var(--dry-progress-label-inside, var(--dry-color-on-brand));
+		font-weight: 600;
+		z-index: 2;
+	}
+
+	[data-part='label'][data-position='outside'] {
+		position: absolute;
+		left: 100%;
+		top: 50%;
+		transform: translateY(-50%);
+		margin-left: var(--dry-space-2, 0.5rem);
+	}
+
+	[data-with-label] {
+		overflow: visible;
+	}
+</style>

package/src/progress-ring/index.ts

@@ -0,0 +1,8 @@
+import type { ProgressRingProps as PrimitiveProgressRingProps } from '@dryui/primitives';
+
+export interface ProgressRingProps extends PrimitiveProgressRingProps {
+	color?: 'primary' | 'gray' | 'green' | 'red' | 'yellow';
+	indeterminate?: boolean;
+}
+
+export { default as ProgressRing } from './progress-ring.svelte';

package/src/progress-ring/progress-ring.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'ProgressRing',
+	description: 'Circular progress ring with SVG rendering',
+	category: 'feedback',
+	tags: ['progress', 'ring', 'circular', 'loading']
+};

package/src/progress-ring/progress-ring.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		value?: number | undefined;
+		max?: number;
+		size?: number;
+		strokeWidth?: number;
+		color?: 'primary' | 'gray' | 'green' | 'red' | 'yellow';
+		indeterminate?: boolean;
+	}
+
+	let {
+		value,
+		max = 100,
+		size = 40,
+		strokeWidth = 4,
+		color = 'primary',
+		indeterminate = false,
+		class: className,
+		...rest
+	}: Props = $props();
+
+	const resolvedValue = $derived(indeterminate ? undefined : value);
+	const radius = $derived((size - strokeWidth) / 2);
+	const circumference = $derived(2 * Math.PI * radius);
+	const percentage = $derived(
+		resolvedValue != null && max > 0
+			? Math.min(Math.max((resolvedValue / max) * 100, 0), 100)
+			: undefined
+	);
+	const offset = $derived(
+		percentage != null ? circumference - (percentage / 100) * circumference : undefined
+	);
+</script>
+
+<div
+	class={className}
+	role="progressbar"
+	aria-valuenow={resolvedValue}
+	aria-valuemin={0}
+	aria-valuemax={max}
+	data-state={resolvedValue != null ? 'determinate' : 'indeterminate'}
+	data-value={resolvedValue}
+	data-max={max}
+	data-color={color}
+	{...rest}
+>
+	<svg width={size} height={size} viewBox="0 0 {size} {size}" fill="none">
+		<circle
+			data-part="track"
+			cx={size / 2}
+			cy={size / 2}
+			r={radius}
+			stroke-width={strokeWidth}
+			stroke="currentColor"
+		/>
+		<circle
+			data-part="indicator"
+			cx={size / 2}
+			cy={size / 2}
+			r={radius}
+			stroke-width={strokeWidth}
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-dasharray={circumference}
+			stroke-dashoffset={offset ?? circumference * 0.25}
+			transform="rotate(-90 {size / 2} {size / 2})"
+		/>
+	</svg>
+</div>
+
+<style>
+	div[role='progressbar'] {
+		/* Component tokens (Tier 3) */
+		--dry-progress-ring-indeterminate-speed: 1.4s;
+
+		display: inline-grid;
+		place-items: center;
+	}
+
+	div[role='progressbar'] [data-part='track'] {
+		stroke: var(--dry-progress-ring-track-color, var(--dry-color-stroke-weak));
+		opacity: 1;
+	}
+
+	div[role='progressbar'] [data-part='indicator'] {
+		stroke: var(--dry-progress-ring-indicator-color, var(--dry-color-fill-brand));
+		transition: stroke-dashoffset var(--dry-duration-normal) var(--dry-ease-default);
+	}
+
+	/* ── Indeterminate state ──────────────────────────────────────────────────── */
+
+	div[data-state='indeterminate'] {
+		animation: progress-ring-rotate var(--dry-progress-ring-indeterminate-speed) linear infinite;
+	}
+
+	div[data-state='indeterminate'] [data-part='indicator'] {
+		stroke-dashoffset: 0;
+		animation: progress-ring-dash var(--dry-progress-ring-indeterminate-speed) ease-in-out infinite;
+	}
+
+	@keyframes progress-ring-rotate {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	@keyframes progress-ring-dash {
+		0% {
+			stroke-dashoffset: 80%;
+		}
+		50% {
+			stroke-dashoffset: 20%;
+		}
+		100% {
+			stroke-dashoffset: 80%;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		div[data-state='indeterminate'] {
+			animation: progress-ring-pulse 2s ease-in-out infinite;
+		}
+
+		div[data-state='indeterminate'] [data-part='indicator'] {
+			animation: none;
+		}
+
+		div[role='progressbar'] [data-part='indicator'] {
+			transition: none;
+		}
+	}
+
+	@keyframes progress-ring-pulse {
+		0%,
+		100% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0.4;
+		}
+	}
+
+	/* ── Colors ────────────────────────────────────────────────────────────────── */
+
+	[data-color='primary'] {
+		--dry-progress-ring-indicator-color: var(--dry-color-fill-brand);
+	}
+
+	[data-color='gray'] {
+		--dry-progress-ring-indicator-color: var(--dry-color-icon);
+	}
+
+	[data-color='green'] {
+		--dry-progress-ring-indicator-color: var(--dry-color-fill-success);
+	}
+
+	[data-color='red'] {
+		--dry-progress-ring-indicator-color: var(--dry-color-fill-error);
+	}
+
+	[data-color='yellow'] {
+		--dry-progress-ring-indicator-color: var(--dry-color-fill-warning);
+	}
+</style>

package/src/prompt-input/index.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ButtonSize, ButtonVariant } from '../button/index.js';
+
+export interface PromptInputProps extends HTMLAttributes<HTMLDivElement> {
+	value?: string;
+	placeholder?: string;
+	disabled?: boolean;
+	submitLabel?: string;
+	submitSize?: ButtonSize;
+	submitVariant?: ButtonVariant;
+	onpromptsubmit?: (value: string) => void;
+	actions?: Snippet;
+}
+
+export { default as PromptInput } from './prompt-input-button-textarea.svelte';

package/src/prompt-input/prompt-input-button-textarea.svelte

@@ -0,0 +1,171 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import type { ButtonSize, ButtonVariant } from '../button/index.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		value?: string;
+		placeholder?: string;
+		disabled?: boolean;
+		submitLabel?: string;
+		submitSize?: ButtonSize;
+		submitVariant?: ButtonVariant;
+		onpromptsubmit?: (value: string) => void;
+		actions?: Snippet;
+	}
+
+	let {
+		value = $bindable(''),
+		placeholder = 'Type a message...',
+		disabled = false,
+		submitLabel = 'Send',
+		submitSize = 'md',
+		submitVariant = 'solid',
+		onpromptsubmit,
+		actions,
+		class: className,
+		...rest
+	}: Props = $props();
+
+	let textareaEl = $state<HTMLTextAreaElement>();
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter' && !e.shiftKey) {
+			e.preventDefault();
+			submit();
+		}
+	}
+
+	function submit() {
+		if (disabled) return;
+		const nextValue = value.trim();
+		if (!nextValue) {
+			textareaEl?.focus();
+			return;
+		}
+		onpromptsubmit?.(nextValue);
+	}
+
+	function autoResize() {
+		if (!textareaEl) return;
+		textareaEl.style.height = 'auto';
+		textareaEl.style.height = `${textareaEl.scrollHeight}px`;
+	}
+
+	$effect(() => {
+		void value;
+		if (!textareaEl) return;
+		textareaEl.style.height = 'auto';
+		textareaEl.style.height = `${textareaEl.scrollHeight}px`;
+	});
+</script>
+
+<div class={className} data-prompt-input data-disabled={disabled || undefined} {...rest}>
+	<textarea
+		bind:this={textareaEl}
+		bind:value
+		{placeholder}
+		{disabled}
+		rows={1}
+		data-prompt-textarea
+		onkeydown={handleKeydown}
+		oninput={autoResize}
+	></textarea>
+	<div data-prompt-actions>
+		{#if actions}
+			{@render actions()}
+		{/if}
+		<Button
+			variant={submitVariant}
+			size={submitSize}
+			type="button"
+			{disabled}
+			onclick={submit}
+			aria-label={submitLabel}
+		>
+			<span data-prompt-submit-label>{submitLabel}</span>
+			<svg
+				width="20"
+				height="20"
+				viewBox="0 0 20 20"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				aria-hidden="true"
+			>
+				<path d="M5 10L3 17l14-7L3 3l2 7zm0 0h6" />
+			</svg>
+		</Button>
+	</div>
+</div>
+
+<style>
+	[data-prompt-input] {
+		--dry-prompt-input-bg: var(--dry-color-bg-raised);
+		--dry-prompt-input-border: var(--dry-color-stroke-strong);
+		--dry-prompt-input-color: var(--dry-color-text-strong);
+		--dry-prompt-input-radius: var(--dry-radius-lg);
+		--dry-prompt-input-padding: var(--dry-space-3);
+		--dry-prompt-input-gap: var(--dry-space-2);
+		--dry-prompt-input-textarea-min-height: 3.25rem;
+
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		grid-template-columns: 1fr;
+		align-items: end;
+		gap: var(--dry-prompt-input-gap);
+		padding: var(--dry-prompt-input-padding);
+		border: 1px solid var(--dry-prompt-input-border);
+		border-radius: var(--dry-prompt-input-radius);
+		background: var(--dry-prompt-input-bg);
+		color: var(--dry-prompt-input-color);
+		font-family: var(--dry-font-sans);
+		box-sizing: border-box;
+		transition:
+			border-color var(--dry-duration-fast) var(--dry-ease-default),
+			box-shadow var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	[data-prompt-input]:focus-within:not([data-disabled]) {
+		border-color: var(--dry-color-focus-ring);
+		box-shadow: 0 0 0 2px color-mix(in srgb, var(--dry-color-focus-ring) 22%, transparent);
+	}
+
+	[data-prompt-input][data-disabled] {
+		opacity: 0.55;
+		cursor: not-allowed;
+	}
+
+	[data-prompt-textarea] {
+		min-height: var(--dry-prompt-input-textarea-min-height);
+		padding: 0;
+		border: none;
+		outline: none;
+		resize: none;
+		background: transparent;
+		color: inherit;
+		font: inherit;
+		line-height: var(--dry-type-small-leading, var(--dry-text-sm-leading));
+	}
+
+	[data-prompt-textarea]::placeholder {
+		color: var(--dry-color-text-weak);
+	}
+
+	[data-prompt-actions] {
+		display: inline-grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: end;
+		gap: var(--dry-space-2);
+		--dry-btn-radius: 9999px;
+	}
+
+	[data-prompt-submit-label] {
+		white-space: nowrap;
+	}
+</style>

package/src/prompt-input/prompt-input.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'PromptInput',
+	description: 'AI-style prompt input with auto-resize and submit',
+	category: 'input',
+	tags: ['prompt', 'input', 'chat', 'ai', 'textarea']
+};

package/src/qr-code/index.ts

@@ -0,0 +1,3 @@
+export type { QRCodeProps } from '@dryui/primitives';
+
+export { default as QRCode } from './qr-code.svelte';

package/src/qr-code/qr-code.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'QRCode',
+	description: 'QR code generator using Canvas 2D API',
+	category: 'display',
+	tags: ['qr', 'code', 'barcode', 'canvas', 'generate']
+};