@delightstack/components 0.1.0

package/dist/feedback/Confetti.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Confetti.svelte.d.ts","sourceRoot":"","sources":["../../src/feedback/Confetti.svelte.ts"],"names":[],"mappings":"AAGC;;;;GAIG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;AAE3D,MAAM,WAAW,eAAe;IAC/B,4CAA4C;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+CAA+C;IAC/C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,MAAM,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClC;;;;OAIG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAc,SAAQ,eAAe;IACrD,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,WAAY,SAAQ,eAAe;IACnD,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAiRD;;GAEG;AACH,wBAAgB,QAAQ,CAAC,OAAO,CAAC,EAAE,eAAe,GAAG,IAAI,CAExD;yBAFe,QAAQ;0BAQkB,eAAe,KAAG,IAAI;2BAcpB,aAAa,KAAG,MAAM,IAAI;8BAoCpB,eAAe,KAAG,IAAI;0BAwB9B,eAAe,KAAG,IAAI;yBAyBxB,WAAW,KAAG,MAAM,IAAI;oBAwC/B,IAAI;;AAiKtC,QAAA,MAAM,QAAQ;aA9IoE,OAAO;;qBAAoC,MAAM,GAAG,SAAS;aAAW,MAAM,GAAG,SAAS;qBAAmB,MAAM,GAAG,SAAS;YAAU,MAAM,GAAG,SAAS;cAAY,MAAM,GAAG,SAAS;YAAU,MAAM,GAAG,SAAS;YAAU,MAAM,GAAG,SAAS;aAAW;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS;aAAW,cAAc,GAAG,SAAS;aAAW,MAAM,EAAE,GAAG,SAAS;aAAW,MAAM,GAAG,SAAS;cAAY,MAAM;eAAa,MAAM;iCAA+B,OAAO;;YAA8B,MAAM;YAAU,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;UA8I9iB,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/feedback/Progress.svelte

@@ -0,0 +1,382 @@
+<script lang="ts">
+	import Portal from '../actions/Portal.svelte';
+
+	const propId = $props.id();
+	let {
+		/** Progress value (0–100). Omit for indeterminate */
+		value = undefined as number | undefined,
+
+		/** Maximum value */
+		max = 100,
+
+		/** Circular mode (false = linear bar) */
+		circular = true,
+
+		/** Force indeterminate animation regardless of value */
+		loading = false,
+
+		/** Size of the indicator */
+		size = '1' as '00' | '0' | '1' | '2' | '3',
+
+		/** Custom fill color (overrides currentColor) */
+		color = undefined as string | undefined,
+
+		/** Text label (below spinner or beside bar) */
+		label = undefined as string | undefined,
+
+		/** Display the current percentage */
+		show_value = false,
+
+		/** Striped animation on fill (linear mode only) */
+		striped = false,
+
+		/** Cover parent element with backdrop */
+		overlay = false,
+
+		/** Cover entire viewport */
+		full_screen = false,
+
+		/** Success color variant */
+		success = false,
+
+		/** Error color variant */
+		error = false,
+
+		/** Multi-segment progress (linear only) */
+		segments = undefined as
+			| Array<{ value: number; color?: string; label?: string }>
+			| undefined,
+
+		/** Element ID */
+		id = propId,
+
+		/** Additional CSS classes */
+		class: class_name = '',
+	} = $props();
+
+	const isIndeterminate = $derived(value === undefined || loading);
+	const percentage = $derived(
+		value !== undefined ? Math.min(100, Math.max(0, (value / max) * 100)) : 0,
+	);
+
+	const CIRCULAR_SIZES: Record<string, { diameter: number; stroke: number }> = {
+		'00': { diameter: 16, stroke: 2 },
+		'0': { diameter: 24, stroke: 2.5 },
+		'1': { diameter: 40, stroke: 3 },
+		'2': { diameter: 64, stroke: 4 },
+		'3': { diameter: 96, stroke: 5 },
+	};
+
+	const LINEAR_HEIGHTS: Record<string, number> = {
+		'00': 2,
+		'0': 4,
+		'1': 8,
+		'2': 12,
+		'3': 16,
+	};
+
+	const circularConfig = $derived(CIRCULAR_SIZES[size] || CIRCULAR_SIZES['1']);
+	const linearHeight = $derived(LINEAR_HEIGHTS[size] || LINEAR_HEIGHTS['1']);
+	const radius = $derived((circularConfig.diameter - circularConfig.stroke) / 2);
+	const circumference = $derived(2 * Math.PI * radius);
+	const dashOffset = $derived(circumference - (percentage / 100) * circumference);
+
+	const segmentTotal = $derived(
+		segments ? segments.reduce((sum, s) => sum + s.value, 0) : 0,
+	);
+</script>
+
+{#snippet progressContent()}
+	<div
+		class={['progress', class_name].filter(Boolean).join(' ')}
+		class:circular
+		class:linear={!circular}
+		class:indeterminate={isIndeterminate}
+		class:determinate={!isIndeterminate}
+		class:overlay
+		class:full-screen={full_screen}
+		class:success
+		class:error
+		class:striped={striped && !circular}
+		{id}
+		role={isIndeterminate ? 'status' : 'progressbar'}
+		aria-valuenow={isIndeterminate ? undefined : Math.round(percentage)}
+		aria-valuemin={isIndeterminate ? undefined : 0}
+		aria-valuemax={isIndeterminate ? undefined : 100}
+		aria-label={label ||
+			(isIndeterminate ? 'Loading' : `${Math.round(percentage)}% complete`)}
+		style:--progress-color={color || null}>
+		{#if circular}
+			<svg
+				class="spinner"
+				width={circularConfig.diameter}
+				height={circularConfig.diameter}
+				viewBox="0 0 {circularConfig.diameter} {circularConfig.diameter}">
+				<circle
+					class="track"
+					cx={circularConfig.diameter / 2}
+					cy={circularConfig.diameter / 2}
+					r={radius}
+					fill="none"
+					stroke-width={circularConfig.stroke} />
+				<circle
+					class="arc"
+					cx={circularConfig.diameter / 2}
+					cy={circularConfig.diameter / 2}
+					r={radius}
+					fill="none"
+					stroke-width={circularConfig.stroke}
+					stroke-linecap="round"
+					stroke-dasharray={circumference}
+					stroke-dashoffset={isIndeterminate ? undefined : dashOffset}
+					style:--spinner-c="{circumference}px"
+					transform="rotate(-90 {circularConfig.diameter / 2} {circularConfig.diameter /
+						2})" />
+			</svg>
+			{#if show_value && !isIndeterminate && size !== '00' && size !== '0'}
+				<span class="value">{Math.round(percentage)}%</span>
+			{/if}
+		{:else}
+			<div class="track" style:height="{linearHeight}px">
+				{#if segments && segments.length > 0}
+					{#each segments as segment}
+						<div
+							class="fill segment"
+							style:width="{(segment.value / (segmentTotal || 1)) * 100}%"
+							style:background={segment.color || null}>
+						</div>
+					{/each}
+				{:else if isIndeterminate}
+					<div class="fill indeterminate-bar"></div>
+				{:else}
+					<div class="fill" style:width="{percentage}%"></div>
+				{/if}
+			</div>
+			{#if show_value && !isIndeterminate}
+				<span class="value">{Math.round(percentage)}%</span>
+			{/if}
+		{/if}
+		{#if label}
+			<span class="label">{label}</span>
+		{/if}
+	</div>
+{/snippet}
+
+{#if full_screen}
+	<Portal>
+		{@render progressContent()}
+	</Portal>
+{:else}
+	{@render progressContent()}
+{/if}
+
+<style>
+	.progress {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		gap: 0.5rem;
+		color: currentColor;
+		position: relative;
+
+		&.circular {
+			.spinner {
+				display: block;
+			}
+			&.indeterminate .spinner {
+				animation: progress-rotate 1.2s linear infinite;
+			}
+			&.indeterminate .arc {
+				/* Desynced from the rotate period so the wrap drifts around the
+				   circle instead of pulsing at a fixed spot every loop. */
+				animation: progress-dash 0.9s ease-in-out infinite;
+				transition: none;
+			}
+			circle.track {
+				stroke: var(--color-border, rgb(0 0 0 / 0.1));
+			}
+			circle.arc {
+				stroke: var(--progress-color, var(--color-action, currentColor));
+				transition: stroke-dashoffset var(--duration-slow, 300ms)
+					var(--ease-out, ease-out);
+			}
+			.value {
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				font-size: 0.625em;
+				font-weight: 600;
+				line-height: 1;
+			}
+		}
+
+		&.linear {
+			width: 100%;
+			flex-direction: row;
+			gap: 0.75rem;
+
+			.track {
+				flex: 1;
+				border-radius: var(--radius-full, 9999px);
+				background: var(--color-border, rgb(0 0 0 / 0.1));
+				overflow: hidden;
+				position: relative;
+				display: flex;
+			}
+
+			.fill {
+				height: 100%;
+				background: var(--progress-color, var(--color-action, currentColor));
+				border-radius: inherit;
+				@supports (corner-shape: squircle) {
+					corner-shape: inherit;
+				}
+				transition: width var(--duration-slow, 300ms) var(--ease-out, ease-out);
+			}
+
+			.fill.indeterminate-bar {
+				width: 40%;
+				position: absolute;
+				animation: progress-slide 1.5s ease-in-out infinite;
+			}
+
+			.value {
+				font-size: var(--text-sm, 0.875rem);
+				font-weight: 500;
+				white-space: nowrap;
+				min-width: 3ch;
+				text-align: right;
+			}
+
+			.label {
+				font-size: var(--text-sm, 0.875rem);
+				color: var(--color-text-muted, inherit);
+			}
+
+			&.striped .fill:not(.indeterminate-bar) {
+				background-image: linear-gradient(
+					45deg,
+					rgba(255, 255, 255, 0.15) 25%,
+					transparent 25%,
+					transparent 50%,
+					rgba(255, 255, 255, 0.15) 50%,
+					rgba(255, 255, 255, 0.15) 75%,
+					transparent 75%
+				);
+				background-size: 1rem 1rem;
+				animation: progress-stripe 0.5s linear infinite;
+			}
+		}
+
+		/* Wash the covered content out so it reads as temporarily inert: a
+		   translucent scrim in the surface color (light scrim in light mode,
+		   dark in dark mode) plus desaturation, rather than a dark modal
+		   backdrop that would emphasize the content instead of muting it. */
+		&.overlay,
+		&.full-screen {
+			position: absolute;
+			inset: 0;
+			background: var(
+				--progress-overlay-bg,
+				color-mix(
+					in oklab,
+					var(--color-bg, light-dark(white, rgb(20 20 20))) 70%,
+					transparent
+				)
+			);
+			backdrop-filter: blur(1.5px) saturate(0.3);
+			z-index: var(--layer-modal, 400);
+			flex-direction: column;
+		}
+
+		&.full-screen {
+			position: fixed;
+		}
+
+		&.success {
+			circle.arc {
+				stroke: var(--color-success, #16a34a);
+			}
+			.fill {
+				background: var(--color-success, #16a34a);
+			}
+		}
+
+		&.error {
+			circle.arc {
+				stroke: var(--color-error, #dc2626);
+			}
+			.fill {
+				background: var(--color-error, #dc2626);
+			}
+		}
+	}
+
+	@keyframes progress-rotate {
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	/* Arc grows from a near-dot to a long arc in the first half, then holds its
+	   length and slides forward via stroke-dashoffset in the second half. The
+	   arc never collapses to a dot mid-view, so there's no pause — the only
+	   shrink is at the wrap, hidden by the (desynced) rotation. All values are
+	   derived from the actual circumference (--spinner-c) so it's correct at
+	   every size. The asymmetric grow-then-slide keeps the start/end caps
+	   moving at different rates. */
+	@keyframes progress-dash {
+		0% {
+			stroke-dasharray: calc(var(--spinner-c) * 0.01) calc(var(--spinner-c) * 1.6);
+			stroke-dashoffset: 0;
+		}
+		50% {
+			stroke-dasharray: calc(var(--spinner-c) * 0.7) calc(var(--spinner-c) * 1.6);
+			stroke-dashoffset: calc(var(--spinner-c) * -0.28);
+		}
+		100% {
+			stroke-dasharray: calc(var(--spinner-c) * 0.7) calc(var(--spinner-c) * 1.6);
+			stroke-dashoffset: calc(var(--spinner-c) * -0.98);
+		}
+	}
+
+	@keyframes progress-slide {
+		0% {
+			left: -40%;
+		}
+		100% {
+			left: 100%;
+		}
+	}
+
+	@keyframes progress-stripe {
+		0% {
+			background-position: 1rem 0;
+		}
+		100% {
+			background-position: 0 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.progress {
+			&.circular.indeterminate .spinner {
+				animation: none;
+			}
+			&.circular.indeterminate .arc {
+				animation: none;
+				stroke-dasharray: calc(var(--spinner-c) * 0.65) calc(var(--spinner-c) * 1.6);
+				stroke-dashoffset: 0;
+			}
+			&.linear .fill.indeterminate-bar {
+				animation: none;
+				left: 0;
+			}
+			&.linear.striped .fill {
+				animation: none;
+			}
+		}
+	}
+</style>

package/dist/feedback/Progress.svelte.d.ts

@@ -0,0 +1,25 @@
+declare const Progress: import("svelte").Component<{
+    value?: number | undefined;
+    max?: number;
+    circular?: boolean;
+    loading?: boolean;
+    size?: "00" | "0" | "1" | "2" | "3";
+    color?: string | undefined;
+    label?: string | undefined;
+    show_value?: boolean;
+    striped?: boolean;
+    overlay?: boolean;
+    full_screen?: boolean;
+    success?: boolean;
+    error?: boolean;
+    segments?: Array<{
+        value: number;
+        color?: string;
+        label?: string;
+    }> | undefined;
+    id?: string;
+    class?: string;
+}, {}, "">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;
+//# sourceMappingURL=Progress.svelte.d.ts.map

package/dist/feedback/Progress.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.svelte.d.ts","sourceRoot":"","sources":["../../src/feedback/Progress.svelte.ts"],"names":[],"mappings":"AA6IA,QAAA,MAAM,QAAQ;YApGmE,MAAM,GAAG,SAAS;UAAQ,MAAM;eAAa,OAAO;cAAY,OAAO;WAAS,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG;YAAU,MAAM,GAAG,SAAS;YAAU,MAAM,GAAG,SAAS;iBAAe,OAAO;cAAY,OAAO;cAAY,OAAO;kBAAgB,OAAO;cAAY,OAAO;YAAU,OAAO;eAAe,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAC9a,SAAS;;YAA8B,MAAM;UAmGI,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}