@gigo-ui/components 1.0.0

package/dist/components/chaos/GravityInput.svelte.d.ts

@@ -0,0 +1,13 @@
+type $$ComponentProps = {
+    value?: string;
+    placeholder?: string;
+    spawnInterval?: number;
+    maxFalling?: number;
+    characters?: string;
+    arenaHeight?: number;
+    class?: string;
+    [key: string]: unknown;
+};
+declare const GravityInput: import("svelte").Component<$$ComponentProps, {}, "value">;
+type GravityInput = ReturnType<typeof GravityInput>;
+export default GravityInput;

package/dist/components/chaos/PasswordPeekhole.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	let {
+		value = $bindable(''),
+		placeholder = 'Type your password...',
+		holeSize = 40,
+		accentColor = '#e040fb',
+		class: className,
+		...restProps
+	}: {
+		value?: string;
+		placeholder?: string;
+		holeSize?: number;
+		accentColor?: string;
+		class?: string;
+		[key: string]: unknown;
+	} = $props();
+
+	let holeX = $state(60);
+	let holeY = $state(20);
+	let isDragging = $state(false);
+	let dragOffset = $state({ x: 0, y: 0 });
+	let containerEl: HTMLDivElement | undefined = $state();
+	let inputEl: HTMLInputElement | undefined = $state();
+	let isFocused = $state(false);
+
+	let holeCenterX = $derived(holeX + holeSize / 2);
+	let holeCenterY = $derived(holeY + holeSize / 2);
+
+	function onHolePointerDown(e: PointerEvent) {
+		isDragging = true;
+		const rect = (e.target as HTMLElement).getBoundingClientRect();
+		dragOffset = {
+			x: e.clientX - rect.left - holeSize / 2,
+			y: e.clientY - rect.top - holeSize / 2
+		};
+		(e.target as HTMLElement).setPointerCapture(e.pointerId);
+	}
+
+	function onPointerMove(e: PointerEvent) {
+		if (!isDragging || !containerEl) return;
+		const container = containerEl.getBoundingClientRect();
+		holeX = Math.max(0, Math.min(e.clientX - container.left - dragOffset.x - holeSize / 2,
+			container.width - holeSize));
+		holeY = Math.max(0, Math.min(e.clientY - container.top - dragOffset.y - holeSize / 2,
+			container.height - holeSize));
+	}
+
+	function onPointerUp() {
+		isDragging = false;
+	}
+
+	function focusInput() {
+		inputEl?.focus();
+	}
+</script>
+
+<div class={cn('space-y-3 max-w-sm', className)} {...restProps}>
+	<!-- Password field container -->
+	<div
+		bind:this={containerEl}
+		class="relative rounded-xl border overflow-hidden cursor-text"
+		role="textbox"
+		tabindex="-1"
+		style:border-color={isFocused ? accentColor : 'var(--border)'}
+		style:box-shadow={isFocused ? `0 0 0 2px ${accentColor}26` : 'none'}
+		onclick={focusInput}
+		onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') focusInput(); }}
+		onpointermove={onPointerMove}
+		onpointerup={onPointerUp}
+	>
+		<!-- Real input -->
+		<input
+			bind:this={inputEl}
+			type="text"
+			bind:value
+			{placeholder}
+			onfocus={() => isFocused = true}
+			onblur={() => isFocused = false}
+			class="w-full px-4 py-3 bg-(--card) font-mono text-base text-transparent caret-transparent outline-none selection:bg-transparent"
+			style="color: transparent;"
+			autocomplete="off"
+			spellcheck="false"
+		/>
+
+		<!-- Visible text layer underneath the overlay -->
+		<div
+			class="absolute inset-0 flex items-center px-4 pointer-events-none font-mono text-base"
+		>
+			<span class="text-(--foreground)">
+				{#if value}
+					{value}
+				{:else}
+					<span class="text-(--muted-foreground)">{placeholder}</span>
+				{/if}
+			</span>
+		</div>
+
+		<!-- Overlay with circular hole cut out via CSS mask -->
+		<div
+			class="absolute inset-0 pointer-events-none bg-(--card)"
+			style:-webkit-mask-image="radial-gradient(circle {holeSize / 2}px at {holeCenterX}px {holeCenterY}px, transparent {holeSize / 2}px, black {holeSize / 2}px)"
+			style:mask-image="radial-gradient(circle {holeSize / 2}px at {holeCenterX}px {holeCenterY}px, transparent {holeSize / 2}px, black {holeSize / 2}px)"
+		>
+		</div>
+
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<!-- Peephole handle (draggable) -->
+		<div
+			role="slider"
+			aria-label="Peephole position"
+			aria-valuenow={Math.round(holeX)}
+			tabindex="0"
+			class="absolute rounded-full border-2 cursor-grab active:cursor-grabbing z-10"
+			style:width="{holeSize}px"
+			style:height="{holeSize}px"
+			style:left="{holeX}px"
+			style:top="{holeY}px"
+			style:border-color={isDragging ? accentColor : `${accentColor}66`}
+			style:box-shadow={isDragging ? `0 0 16px ${accentColor}66` : `0 0 8px ${accentColor}33`}
+			style:background="transparent"
+			onpointerdown={onHolePointerDown}
+		>
+			<div class="absolute -top-1 -left-1 w-2 h-2 border-t-2 border-l-2 rounded-tl" style:border-color={accentColor}></div>
+			<div class="absolute -top-1 -right-1 w-2 h-2 border-t-2 border-r-2 rounded-tr" style:border-color={accentColor}></div>
+			<div class="absolute -bottom-1 -left-1 w-2 h-2 border-b-2 border-l-2 rounded-bl" style:border-color={accentColor}></div>
+			<div class="absolute -bottom-1 -right-1 w-2 h-2 border-b-2 border-r-2 rounded-br" style:border-color={accentColor}></div>
+		</div>
+	</div>
+
+	<!-- Character count -->
+	<div class="flex items-center justify-between text-xs font-mono text-(--muted-foreground)">
+		<span>{value.length} chars (probably)</span>
+		<span class="text-gigo-magenta/60">⬡ drag peephole to peek</span>
+	</div>
+
+	<p class="text-[10px] font-mono text-(--muted-foreground) text-center">
+		Your password is hidden. Drag the peephole to see what you typed. Security! 🔒
+	</p>
+</div>

package/dist/components/chaos/PasswordPeekhole.svelte.d.ts

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    value?: string;
+    placeholder?: string;
+    holeSize?: number;
+    accentColor?: string;
+    class?: string;
+    [key: string]: unknown;
+};
+declare const PasswordPeekhole: import("svelte").Component<$$ComponentProps, {}, "value">;
+type PasswordPeekhole = ReturnType<typeof PasswordPeekhole>;
+export default PasswordPeekhole;

package/dist/components/chaos/ProgressDoom.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	let {
+		targetMs = 5000,
+		goBackwards = true,
+		stall = true,
+		lieAboutCompletion = true,
+		onComplete,
+		class: className,
+		...restProps
+	}: {
+		targetMs?: number;
+		goBackwards?: boolean;
+		stall?: boolean;
+		lieAboutCompletion?: boolean;
+		onComplete?: () => void;
+		class?: string;
+		[key: string]: unknown;
+	} = $props();
+
+	let progress = $state(0);
+	let displayProgress = $state(0);
+	let statusText = $state('Loading...');
+	let isComplete = $state(false);
+	let fakePercent = $state(0);
+	let barColor = $state('#e040fb');
+
+	const STATUS_MESSAGES = [
+		'Loading...', 'Almost there...', 'Just a moment...', 'Reticulating splines...',
+		'Downloading more RAM...', 'Consulting the oracle...', 'Please wait...',
+		'Undoing progress...', 'Going backwards...', 'Starting over...',
+		'99% complete (lie)', 'Any second now...', 'Oops, lost some progress...',
+		'Compiling excuses...', 'Buffering your patience...',
+	];
+
+	$effect(() => {
+		let startTime = performance.now();
+		let running = true;
+
+		function tick() {
+			if (!running) return;
+			const elapsed = performance.now() - startTime;
+			let rawProgress = Math.min((elapsed / targetMs) * 100, 100);
+
+			if (goBackwards && rawProgress > 30 && rawProgress < 70 && Math.random() > 0.95) {
+				startTime += 800;
+				rawProgress = Math.max(0, rawProgress - 15);
+			}
+
+			if (stall && rawProgress > 50 && rawProgress < 80 && Math.random() > 0.9) {
+				startTime += 500;
+			}
+
+			progress = rawProgress;
+			displayProgress = Math.max(0, Math.min(100, rawProgress + (Math.random() - 0.5) * 8));
+
+			if (lieAboutCompletion) {
+				if (rawProgress < 20) fakePercent = rawProgress * 3;
+				else if (rawProgress < 80) fakePercent = 60 + Math.random() * 35;
+				else fakePercent = 95 + Math.random() * 4.9;
+			} else {
+				fakePercent = displayProgress;
+			}
+
+			const msgIdx = Math.floor((rawProgress / 100) * STATUS_MESSAGES.length);
+			statusText = STATUS_MESSAGES[Math.min(msgIdx, STATUS_MESSAGES.length - 1)];
+
+			if (rawProgress < 30) barColor = '#e040fb';
+			else if (rawProgress < 60) barColor = '#18ffff';
+			else if (rawProgress < 90) barColor = '#76ff03';
+			else barColor = '#ff1744';
+
+			if (rawProgress >= 100 && !isComplete) {
+				isComplete = true;
+				statusText = lieAboutCompletion ? 'Done! (was it though?)' : 'Complete!';
+				onComplete?.();
+			}
+
+			if (!isComplete) requestAnimationFrame(tick);
+		}
+
+		requestAnimationFrame(tick);
+		return () => { running = false; };
+	});
+
+	function restart() {
+		progress = 0;
+		displayProgress = 0;
+		fakePercent = 0;
+		isComplete = false;
+		statusText = 'Loading...';
+	}
+</script>
+
+<div class={cn('space-y-3 max-w-md', className)} {...restProps}>
+	<div class="flex items-center justify-between">
+		<span class="text-xs font-mono text-(--muted-foreground)">{statusText}</span>
+		<span class="text-xs font-mono font-bold" style:color={barColor}>
+			{Math.round(fakePercent)}%
+		</span>
+	</div>
+
+	<div class="relative h-4 w-full overflow-hidden rounded-full border border-(--border) bg-(--secondary)">
+		<div
+			class="absolute inset-y-0 left-0 rounded-full transition-all duration-300"
+			style:width="{Math.max(0, Math.min(100, displayProgress))}%"
+			style:background="linear-gradient(90deg, {barColor}, {barColor}99)"
+			style:box-shadow="0 0 12px {barColor}66"
+		></div>
+		{#if displayProgress > 10}
+			<div
+				class="absolute inset-y-0 left-0 rounded-full opacity-30"
+				style:width="{Math.max(0, Math.min(100, displayProgress))}%"
+				style:background="linear-gradient(90deg, transparent, white 50%, transparent)"
+				style:animation="gigo-shimmer 1.5s linear infinite"
+			></div>
+		{/if}
+	</div>
+
+	<div class="flex items-center justify-between text-[10px] font-mono text-(--muted-foreground)">
+		<span>Real: {Math.round(progress)}%</span>
+		<span>Shown: {Math.round(displayProgress)}%</span>
+		<span>Claimed: {Math.round(fakePercent)}%</span>
+	</div>
+
+	{#if isComplete}
+		<button
+			class="w-full rounded-xl border border-gigo-magenta/30 bg-gigo-magenta/10 px-4 py-2 text-sm font-mono text-gigo-magenta hover:bg-gigo-magenta/20 transition-colors cursor-pointer"
+			onclick={restart}
+		>
+			Restart the suffering
+		</button>
+	{/if}
+
+	<p class="text-[10px] font-mono text-(--muted-foreground) text-center">
+		Three different progress values. None of them are honest.
+	</p>
+</div>

package/dist/components/chaos/ProgressDoom.svelte.d.ts

@@ -0,0 +1,12 @@
+type $$ComponentProps = {
+    targetMs?: number;
+    goBackwards?: boolean;
+    stall?: boolean;
+    lieAboutCompletion?: boolean;
+    onComplete?: () => void;
+    class?: string;
+    [key: string]: unknown;
+};
+declare const ProgressDoom: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProgressDoom = ReturnType<typeof ProgressDoom>;
+export default ProgressDoom;

package/dist/components/chaos/RotaryDial.svelte

@@ -0,0 +1,221 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	let {
+		value = $bindable(''),
+		maxDigits = 10,
+		dialSize = 260,
+		class: className,
+		...restProps
+	}: {
+		value?: string;
+		maxDigits?: number;
+		dialSize?: number;
+		class?: string;
+		[key: string]: unknown;
+	} = $props();
+
+	let rotation = $state(0);
+	let isDragging = $state(false);
+	let dialEl: SVGSVGElement | undefined = $state();
+	let startAngle = $state(0);
+	let startRotation = $state(0);
+	let selectedDigit = $state<number | null>(null);
+	let isAnimatingReturn = $state(false);
+
+	let CENTER = $derived(dialSize / 2);
+	let HOLE_RADIUS = $derived(dialSize * 18 / 260);
+	let RING_RADIUS = $derived(dialSize * 95 / 260);
+	const STOPPER_ANGLE = 30;
+
+	// Digit positions (0-9) arranged clockwise starting from bottom-right
+	// Real rotary phones: 1 at ~330°, going clockwise to 0 at ~210°
+	const digitAngles = [
+		240, // 0
+		330, // 1
+		310, // 2
+		290, // 3
+		270, // 4
+		250, // 5
+		230, // 6
+		210, // 7
+		190, // 8
+		170, // 9
+	];
+
+	function getDigitPos(angle: number) {
+		const rad = ((angle - 90) * Math.PI) / 180;
+		return {
+			x: CENTER + RING_RADIUS * Math.cos(rad),
+			y: CENTER + RING_RADIUS * Math.sin(rad)
+		};
+	}
+
+	function getAngleFromCenter(clientX: number, clientY: number) {
+		if (!dialEl) return 0;
+		const rect = dialEl.getBoundingClientRect();
+		const cx = rect.left + rect.width / 2;
+		const cy = rect.top + rect.height / 2;
+		return Math.atan2(clientY - cy, clientX - cx) * (180 / Math.PI) + 90;
+	}
+
+	function onPointerDown(e: PointerEvent, digitIndex: number) {
+		if (isAnimatingReturn) return;
+		if (value.length >= maxDigits) return;
+		isDragging = true;
+		selectedDigit = digitIndex;
+		startAngle = getAngleFromCenter(e.clientX, e.clientY);
+		startRotation = rotation;
+		(e.target as HTMLElement)?.setPointerCapture?.(e.pointerId);
+	}
+
+	function onPointerMove(e: PointerEvent) {
+		if (!isDragging || selectedDigit === null) return;
+		const currentAngle = getAngleFromCenter(e.clientX, e.clientY);
+		let delta = currentAngle - startAngle;
+
+		// Only allow clockwise rotation (positive delta)
+		if (delta < -180) delta += 360;
+		if (delta > 180) delta -= 360;
+
+		// Clamp to clockwise only
+		const newRotation = Math.max(0, Math.min(startRotation + delta, 360 - digitAngles[selectedDigit] + STOPPER_ANGLE));
+		rotation = Math.max(0, newRotation);
+	}
+
+	function onPointerUp() {
+		if (!isDragging || selectedDigit === null) return;
+		isDragging = false;
+
+		// Check if rotated far enough
+		const requiredRotation = 360 - digitAngles[selectedDigit];
+		if (rotation >= requiredRotation * 0.75) {
+			// Digit entered!
+			value += String(selectedDigit);
+		}
+
+		// Animate return
+		isAnimatingReturn = true;
+		const returnStart = rotation;
+		const duration = 400 + rotation * 2; // longer return for bigger rotations
+		const startTime = performance.now();
+
+		function animateReturn(now: number) {
+			const elapsed = now - startTime;
+			const progress = Math.min(elapsed / duration, 1);
+			// Ease out
+			const eased = 1 - Math.pow(1 - progress, 3);
+			rotation = returnStart * (1 - eased);
+
+			if (progress < 1) {
+				requestAnimationFrame(animateReturn);
+			} else {
+				rotation = 0;
+				isAnimatingReturn = false;
+				selectedDigit = null;
+			}
+		}
+		requestAnimationFrame(animateReturn);
+	}
+
+	function removeLastDigit() {
+		value = value.slice(0, -1);
+	}
+</script>
+
+<div class={cn('flex flex-col items-center gap-4', className)} {...restProps}>
+	<!-- Value display -->
+	<div class="flex items-center gap-2 rounded-xl border border-(--border) bg-(--secondary) px-4 py-2 min-w-50">
+		<span class="font-mono text-lg text-(--foreground) flex-1 text-center tracking-[0.3em]">
+			{#if value}
+				{value}
+			{:else}
+				<span class="text-(--muted-foreground) tracking-normal text-sm">Dial a number...</span>
+			{/if}
+		</span>
+		{#if value}
+			<button
+				class="text-xs text-(--muted-foreground) hover:text-gigo-red transition-colors"
+				onclick={removeLastDigit}
+			>&#x232b;</button>
+		{/if}
+	</div>
+
+	<!-- Rotary dial -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<svg
+		bind:this={dialEl}
+		width={dialSize}
+		height={dialSize}
+		viewBox="0 0 {dialSize} {dialSize}"
+		class="select-none touch-none"
+		role="group"
+		aria-label="Rotary dial"
+		onpointermove={onPointerMove}
+		onpointerup={onPointerUp}
+		onpointerleave={onPointerUp}
+	>
+		<!-- Outer ring -->
+		<circle cx={CENTER} cy={CENTER} r={dialSize / 2 - 4} fill="none" stroke="var(--border)" stroke-width="2" />
+
+		<circle cx={CENTER} cy={CENTER} r={dialSize / 2 - 8} fill="var(--card)" />
+
+		<!-- Center circle -->
+		<circle cx={CENTER} cy={CENTER} r="35" fill="var(--secondary)" stroke="var(--border)" stroke-width="1" />
+
+		<!-- Center label -->
+		<text x={CENTER} y={CENTER + 4} text-anchor="middle" font-size="10" font-family="monospace" fill="var(--muted-foreground)">GIGO</text>
+
+		<!-- Stopper -->
+		{#if true}
+			{@const stopPos = getDigitPos(STOPPER_ANGLE + 340)}
+			<rect
+				x={stopPos.x - 4}
+				y={stopPos.y - 12}
+			width="8"
+			height="24"
+			rx="3"
+				fill="var(--muted-foreground)"
+				opacity="0.3"
+			/>
+		{/if}
+
+		<!-- Rotating group -->
+		<g transform="rotate({rotation}, {CENTER}, {CENTER})">
+			{#each [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as digit}
+				{@const pos = getDigitPos(digitAngles[digit])}
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<circle
+					cx={pos.x}
+					cy={pos.y}
+					r={HOLE_RADIUS}
+					fill={selectedDigit === digit ? 'rgba(224, 64, 251, 0.15)' : 'var(--secondary)'}
+					stroke={selectedDigit === digit ? '#e040fb' : 'var(--border)'}
+					stroke-width={selectedDigit === digit ? 2 : 1}
+					class="cursor-pointer"
+					role="button"
+					tabindex="0"
+					aria-label="Digit {digit}"
+					style="filter: {selectedDigit === digit ? 'drop-shadow(0 0 6px rgba(224, 64, 251, 0.4))' : 'none'}"
+					onpointerdown={(e) => onPointerDown(e, digit)}
+				/>
+				<text
+					x={pos.x}
+					y={pos.y + 5}
+					text-anchor="middle"
+					font-size="16"
+					font-weight="bold"
+					font-family="monospace"
+					fill={selectedDigit === digit ? '#e040fb' : 'var(--foreground)'}
+					class="pointer-events-none select-none"
+				>
+					{digit}
+				</text>
+			{/each}
+		</g>
+	</svg>
+
+	<p class="text-[10px] font-mono text-(--muted-foreground) text-center max-w-65">
+		Drag a digit clockwise to the stopper, then release. Just like grandma used to do.
+	</p>
+</div>

package/dist/components/chaos/RotaryDial.svelte.d.ts

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    value?: string;
+    maxDigits?: number;
+    dialSize?: number;
+    class?: string;
+    [key: string]: unknown;
+};
+declare const RotaryDial: import("svelte").Component<$$ComponentProps, {}, "value">;
+type RotaryDial = ReturnType<typeof RotaryDial>;
+export default RotaryDial;

package/dist/components/chaos/SliderPhone.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	let {
+		value = $bindable(''),
+		digitCount = 10,
+		formatPattern = '(XXX) XXX-XXXX',
+		class: className,
+		...restProps
+	}: {
+		value?: string;
+		digitCount?: number;
+		formatPattern?: string;
+		class?: string;
+		[key: string]: unknown;
+	} = $props();
+
+	let sliderValues = $state<number[]>([]);
+
+	$effect(() => {
+		if (sliderValues.length !== digitCount) {
+			sliderValues = Array(digitCount).fill(0);
+		}
+	});
+
+	// Sync value from sliders
+	$effect(() => {
+		value = sliderValues.map(v => Math.round(v)).join('');
+	});
+
+	function formatPhoneDisplay(raw: string): string {
+		const digits = raw.padEnd(digitCount, '_');
+		let result = '';
+		let di = 0;
+		for (const ch of formatPattern) {
+			if (ch === 'X') {
+				result += digits[di] ?? '_';
+				di++;
+			} else {
+				result += ch;
+			}
+		}
+		if (di < digits.length) {
+			result += digits.slice(di);
+		}
+		return result;
+	}
+
+	function setSliderValue(index: number, newVal: number) {
+		sliderValues = sliderValues.map((v, i) => i === index ? newVal : v);
+	}
+</script>
+
+<div class={cn('space-y-4 max-w-md', className)} {...restProps}>
+	<!-- Phone display -->
+	<div class="rounded-xl border border-(--border) bg-(--secondary) px-4 py-3 text-center">
+		<span class="font-mono text-xl tracking-[0.15em] text-(--foreground)">
+			{formatPhoneDisplay(value)}
+		</span>
+	</div>
+
+	<!-- Sliders grid -->
+	<div class="grid gap-2">
+		{#each sliderValues as sv, i}
+			<div class="flex items-center gap-3 rounded-lg border border-(--border) bg-(--card) px-3 py-2">
+				<span class="text-[10px] font-mono text-(--muted-foreground) min-w-14">
+					Digit {i + 1}
+				</span>
+				<input
+					type="range"
+					min="0"
+					max="9"
+					step="1"
+					value={sv}
+					oninput={(e) => setSliderValue(i, Number((e.target as HTMLInputElement).value))}
+					class="flex-1 h-2 rounded-full appearance-none cursor-pointer
+						[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-gigo-magenta [&::-webkit-slider-thumb]:shadow-[0_0_8px_rgba(224,64,251,0.5)] [&::-webkit-slider-thumb]:cursor-pointer
+						[&::-moz-range-thumb]:w-5 [&::-moz-range-thumb]:h-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-gigo-magenta [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:cursor-pointer"
+					style="background: linear-gradient(to right, rgba(224,64,251,0.3) {sv * 11.11}%, var(--secondary) {sv * 11.11}%)"
+				/>
+				<span class="text-lg font-mono font-bold min-w-5 text-center"
+					style:color={sv > 0 ? '#e040fb' : 'var(--muted-foreground)'}>
+					{Math.round(sv)}
+				</span>
+			</div>
+		{/each}
+	</div>
+
+	<p class="text-[10px] font-mono text-(--muted-foreground) text-center">
+		Slide each digit individually. The future of phone number entry is here.
+	</p>
+</div>

package/dist/components/chaos/SliderPhone.svelte.d.ts

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    value?: string;
+    digitCount?: number;
+    formatPattern?: string;
+    class?: string;
+    [key: string]: unknown;
+};
+declare const SliderPhone: import("svelte").Component<$$ComponentProps, {}, "value">;
+type SliderPhone = ReturnType<typeof SliderPhone>;
+export default SliderPhone;