@gigo-ui/components 1.0.0-alpha

package/dist/components/ui/Carousel.svelte

@@ -0,0 +1,164 @@
+<script lang="ts">
+	import { cn, chaosClasses, chaosRandom, randomGarbageText } from '../../utils/cn.js';
+	import type { GigoCarouselProps } from '../../types/index.js';
+
+	let {
+		slides = [],
+		autoplay = false,
+		interval = 3000,
+		chaos = false,
+		chaosLevel = 5,
+		educational = false,
+		a11yWarning = false,
+		lyingNavigation = false,
+		reverseDirection = false,
+		randomJumps = false,
+		infiniteFakeSlides = false,
+		onslidechange,
+		class: className,
+		...restProps
+	}: GigoCarouselProps = $props();
+
+	let currentIndex = $state(0);
+	let fakeSlideCount = $state(0);
+	let direction = $state<'left' | 'right'>('right');
+
+	const totalSlides = $derived(slides.length + (chaos && infiniteFakeSlides ? fakeSlideCount : 0));
+
+	$effect(() => {
+		if (!autoplay || slides.length === 0) return;
+		const timer = setInterval(() => { goNext(); }, interval);
+		return () => clearInterval(timer);
+	});
+
+	$effect(() => {
+		if (!chaos || !randomJumps || slides.length === 0) return;
+		const timer = setInterval(() => {
+			currentIndex = chaosRandom(slides.length);
+			onslidechange?.(currentIndex);
+		}, 4000);
+		return () => clearInterval(timer);
+	});
+
+	$effect(() => {
+		if (!chaos || !infiniteFakeSlides) return;
+		const timer = setInterval(() => { fakeSlideCount++; }, 5000);
+		return () => clearInterval(timer);
+	});
+
+	function goNext() {
+		if (slides.length === 0) return;
+		direction = 'right';
+		if (chaos && reverseDirection) {
+			currentIndex = (currentIndex - 1 + slides.length) % slides.length;
+		} else {
+			currentIndex = (currentIndex + 1) % slides.length;
+		}
+		onslidechange?.(currentIndex);
+	}
+
+	function goPrev() {
+		if (slides.length === 0) return;
+		direction = 'left';
+		if (chaos && reverseDirection) {
+			currentIndex = (currentIndex + 1) % slides.length;
+		} else {
+			currentIndex = (currentIndex - 1 + slides.length) % slides.length;
+		}
+		onslidechange?.(currentIndex);
+	}
+
+	function handlePrevClick() {
+		if (chaos && lyingNavigation) { goNext(); } else { goPrev(); }
+	}
+
+	function handleNextClick() {
+		if (chaos && lyingNavigation) { goPrev(); } else { goNext(); }
+	}
+
+	let containerClass = $derived(
+		cn(
+			'relative w-full overflow-hidden rounded-xl border border-(--border) bg-(--surface-1)',
+			chaos && chaosClasses(chaosLevel),
+			className
+		)
+	);
+</script>
+
+<div class={containerClass} {...restProps}>
+	<!-- Slide area -->
+	<div class="relative h-64 w-full overflow-hidden">
+		{#each slides as slide, i}
+			<div
+				class={cn(
+					'absolute inset-0 flex items-center justify-center p-8 transition-all duration-500 ease-out',
+					i === currentIndex
+						? 'opacity-100 translate-x-0 scale-100'
+						: i < currentIndex || (currentIndex === 0 && i === slides.length - 1 && direction === 'left')
+							? 'opacity-0 -translate-x-full scale-95 pointer-events-none'
+							: 'opacity-0 translate-x-full scale-95 pointer-events-none'
+				)}
+			>
+				{#if slide.image}
+					<img src={slide.image} alt={slide.content} class="max-h-full max-w-full object-contain rounded-lg" />
+				{:else}
+					<p class="text-lg text-(--foreground) text-center leading-relaxed">{slide.content}</p>
+				{/if}
+			</div>
+		{/each}
+
+		{#if chaos && infiniteFakeSlides && fakeSlideCount > 0}
+			<div class="absolute bottom-3 right-3 text-xs text-gigo-magenta font-mono animate-gigo-entrance">
+				+{fakeSlideCount} totally real slide(s)
+			</div>
+		{/if}
+
+		<!-- Gradient edges -->
+		<div class="absolute inset-y-0 left-0 w-12 bg-linear-to-r from-(--surface-1) to-transparent pointer-events-none"></div>
+		<div class="absolute inset-y-0 right-0 w-12 bg-linear-to-l from-(--surface-1) to-transparent pointer-events-none"></div>
+	</div>
+
+	<!-- Navigation -->
+	<div class="flex items-center justify-between border-t border-(--border) p-3">
+		<button
+			class="group/nav flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium text-(--muted-foreground) hover:text-(--foreground) hover:bg-(--surface-2) transition-all duration-200"
+			onclick={handlePrevClick}
+			aria-label="Previous slide"
+		>
+			<svg class="h-4 w-4 transition-transform duration-200 group-hover/nav:-translate-x-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
+			Prev
+		</button>
+
+		<div class="flex gap-2 items-center">
+			{#each slides as _, i}
+				<button
+					class="relative h-2 rounded-full transition-all duration-300"
+					style:width={i === currentIndex ? '24px' : '8px'}
+					style:background={i === currentIndex ? 'linear-gradient(90deg, #e040fb, #18ffff)' : 'var(--surface-3)'}
+					onclick={() => {
+						currentIndex = chaos && lyingNavigation
+							? (slides.length - 1 - i) % slides.length
+							: i;
+						onslidechange?.(currentIndex);
+					}}
+					aria-label="Go to slide {i + 1}"
+				></button>
+			{/each}
+		</div>
+
+		<button
+			class="group/nav flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium text-(--muted-foreground) hover:text-(--foreground) hover:bg-(--surface-2) transition-all duration-200"
+			onclick={handleNextClick}
+			aria-label="Next slide"
+		>
+			Next
+			<svg class="h-4 w-4 transition-transform duration-200 group-hover/nav:translate-x-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+		</button>
+	</div>
+
+	{#if educational && chaos}
+		<p class="border-t border-(--border) px-4 py-2.5 text-xs text-(--muted-foreground) italic font-mono">
+			chaos: {[lyingNavigation && 'lying', reverseDirection && 'reversed', randomJumps && 'jumping', infiniteFakeSlides && 'spawning'].filter(Boolean).join(' + ')}
+		</p>
+	{/if}
+</div>

package/dist/components/ui/Carousel.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { GigoCarouselProps } from '../../types/index.js';
+declare const Carousel: import("svelte").Component<GigoCarouselProps, {}, "">;
+type Carousel = ReturnType<typeof Carousel>;
+export default Carousel;

package/dist/components/ui/Form.svelte

@@ -0,0 +1,178 @@
+<script lang="ts">
+	import { cn, chaosClasses, chaosRandom, chaosPickOne, randomGarbageText } from '../../utils/cn.js';
+	import type { GigoFormProps, FormField } from '../../types/index.js';
+
+	let {
+		fields = [],
+		submitLabel = 'Submit',
+		chaos = false,
+		chaosLevel = 5,
+		educational = false,
+		a11yWarning = false,
+		randomReset = false,
+		fakeValidation = false,
+		alwaysFails = false,
+		shuffleFields = false,
+		onsubmit,
+		class: className,
+		...restProps
+	}: GigoFormProps = $props();
+
+	let formData = $state<Record<string, string>>({});
+	let displayFields = $state<FormField[]>([]);
+	let errors = $state<Record<string, string>>({});
+	let submitMessage = $state('');
+	let isSubmitting = $state(false);
+
+	// Initialize form data
+	$effect(() => {
+		const initial: Record<string, string> = {};
+		for (const field of fields) {
+			initial[field.id] = formData[field.id] ?? '';
+		}
+		formData = initial;
+		displayFields = [...fields];
+	});
+
+	// Random reset
+	$effect(() => {
+		if (!chaos || !randomReset) return;
+		const timer = setInterval(() => {
+			const keys = Object.keys(formData);
+			if (keys.length > 0) {
+				const key = chaosPickOne(keys);
+				formData[key] = '';
+			}
+		}, 4000);
+		return () => clearInterval(timer);
+	});
+
+	// Shuffle fields
+	$effect(() => {
+		if (!chaos || !shuffleFields) return;
+		const timer = setInterval(() => {
+			displayFields = [...displayFields].sort(() => Math.random() - 0.5);
+		}, 5000);
+		return () => clearInterval(timer);
+	});
+
+	const FAKE_ERRORS = [
+		'Field is too honest',
+		'Expected a lie here',
+		'Must contain at least one regret',
+		'This field has given up',
+		'Exceeds maximum hope',
+		'Not enough chaos',
+		'Please try harder'
+	];
+
+	function validate(): boolean {
+		errors = {};
+
+		if (chaos && fakeValidation) {
+			for (const field of fields) {
+				if (Math.random() > 0.5) {
+					errors[field.id] = chaosPickOne(FAKE_ERRORS);
+				}
+			}
+			return Object.keys(errors).length === 0;
+		}
+
+		// Real validation for non-chaos mode
+		for (const field of fields) {
+			if (field.required && !formData[field.id]?.trim()) {
+				errors[field.id] = `${field.label} is required`;
+			}
+		}
+		return Object.keys(errors).length === 0;
+	}
+
+	async function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		isSubmitting = true;
+		submitMessage = '';
+
+		if (chaos && alwaysFails) {
+			await new Promise((r) => setTimeout(r, 800));
+			submitMessage = '💀 Submission failed (as designed)';
+			isSubmitting = false;
+			return;
+		}
+
+		if (!validate()) {
+			isSubmitting = false;
+			return;
+		}
+
+		await new Promise((r) => setTimeout(r, 500));
+		onsubmit?.({ ...formData });
+		submitMessage = chaos ? randomGarbageText() : 'Submitted successfully!';
+		isSubmitting = false;
+	}
+
+	let formClass = $derived(
+		cn(
+			'space-y-5 rounded-xl border border-(--border) bg-(--surface-1) p-6',
+			chaos && chaosClasses(chaosLevel),
+			className
+		)
+	);
+</script>
+
+<form class={formClass} onsubmit={handleSubmit} {...restProps}>
+	{#each displayFields as field, idx (field.id)}
+		<div
+			class="space-y-2 animate-gigo-entrance"
+			style:animation-delay="{idx * 0.05}s"
+		>
+			<label for={field.id} class="text-sm font-medium text-(--foreground)">
+				{field.label}
+				{#if field.required}
+					<span class="text-gigo-magenta">*</span>
+				{/if}
+			</label>
+			<div class="relative group">
+				<input
+					id={field.id}
+					type={field.type}
+					placeholder={field.placeholder ?? ''}
+					value={formData[field.id] ?? ''}
+					oninput={(e) => {
+						formData[field.id] = (e.target as HTMLInputElement).value;
+					}}
+					class={cn(
+						'flex h-10 w-full rounded-lg border border-transparent bg-(--secondary) px-4 py-2 text-sm text-(--foreground) transition-all duration-300 ease-out placeholder:text-(--muted-foreground) focus:outline-none focus:border-(--primary) focus:shadow-(--glow-primary)',
+						errors[field.id] ? 'border-gigo-red shadow-(--glow-destructive)' : ''
+					)}
+				/>
+				<div class="absolute bottom-0 left-1/2 h-0.5 w-0 bg-linear-to-r from-gigo-magenta via-gigo-cyan to-gigo-lime transition-all duration-300 ease-out rounded-full group-focus-within:w-full group-focus-within:-ml-[50%]"></div>
+			</div>
+			{#if errors[field.id]}
+				<p class="text-xs text-gigo-red font-mono animate-gigo-entrance">{errors[field.id]}</p>
+			{/if}
+		</div>
+	{/each}
+
+	<button
+		type="submit"
+		disabled={isSubmitting}
+		class="group/submit relative inline-flex h-10 w-full items-center justify-center overflow-hidden rounded-lg bg-(--primary) px-4 text-sm font-medium text-(--primary-foreground) transition-all duration-200 hover:scale-[1.01] hover:shadow-(--glow-primary) active:scale-[0.98] disabled:opacity-40 disabled:pointer-events-none"
+	>
+		{#if isSubmitting}
+			<svg class="mr-2 h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+			Submitting...
+		{:else}
+			{submitLabel}
+		{/if}
+	</button>
+
+	{#if submitMessage}
+		<p class="text-center text-sm animate-gigo-entrance {chaos && alwaysFails ? 'text-gigo-red font-mono' : 'text-gigo-lime'}">{submitMessage}</p>
+	{/if}
+
+	{#if educational && chaos}
+		<p class="text-xs text-(--muted-foreground) italic font-mono">
+			chaos: {[randomReset && 'resetting', fakeValidation && 'lying', alwaysFails && 'failing', shuffleFields && 'shuffling'].filter(Boolean).join(' + ')}
+		</p>
+	{/if}
+</form>

package/dist/components/ui/Form.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { GigoFormProps } from '../../types/index.js';
+declare const Form: import("svelte").Component<GigoFormProps, {}, "">;
+type Form = ReturnType<typeof Form>;
+export default Form;

package/dist/components/ui/Input.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+	import { cn, chaosClasses, randomGarbageText, chaosRandom, chaosPickOne } from '../../utils/cn.js';
+	import type { GigoInputProps, InputType } from '../../types/index.js';
+
+	let {
+		type = 'text',
+		value = $bindable(''),
+		placeholder = '',
+		disabled = false,
+		required = false,
+		name = '',
+		chaos = false,
+		chaosLevel = 5,
+		educational = false,
+		a11yWarning = false,
+		randomDelete = false,
+		escapeOnFocus = false,
+		fakeValidation = false,
+		randomizeType = false,
+		oninput,
+		onchange,
+		class: className,
+		...restProps
+	}: GigoInputProps = $props();
+
+	let offsetX = $state(0);
+	let offsetY = $state(0);
+	let fakeError = $state('');
+	let currentType = $state<InputType>('text');
+	let isFocused = $state(false);
+
+	$effect(() => { currentType = type; });
+
+	const FAKE_ERRORS = [
+		'Invalid soul detected',
+		'Too much ambition in this field',
+		'Password must contain a haiku',
+		'Email not sad enough',
+		'Enter a valid existential crisis',
+		'Field must be left blank to continue',
+		'Input exceeds hope threshold'
+	];
+
+	const INPUT_TYPES: InputType[] = ['text', 'email', 'password', 'number', 'tel', 'url', 'search'];
+
+	$effect(() => {
+		if (!chaos || !randomDelete || !value) return;
+		const interval = setInterval(() => {
+			if (value.length > 0 && Math.random() > 0.5) {
+				const pos = chaosRandom(value.length);
+				value = value.slice(0, pos) + value.slice(pos + 1);
+			}
+		}, 2000);
+		return () => clearInterval(interval);
+	});
+
+	$effect(() => {
+		if (!chaos || !randomizeType) return;
+		const interval = setInterval(() => {
+			currentType = chaosPickOne(INPUT_TYPES);
+		}, 3000);
+		return () => clearInterval(interval);
+	});
+
+	function handleFocus() {
+		isFocused = true;
+		if (chaos && escapeOnFocus) {
+			offsetX = (Math.random() - 0.5) * 300;
+			offsetY = (Math.random() - 0.5) * 150;
+		}
+		if (chaos && fakeValidation) {
+			fakeError = chaosPickOne(FAKE_ERRORS);
+		}
+	}
+
+	function handleBlur() {
+		isFocused = false;
+		if (chaos && fakeValidation && Math.random() > 0.4) {
+			fakeError = chaosPickOne(FAKE_ERRORS);
+		}
+	}
+
+	let computedClass = $derived(
+		cn(
+			'peer flex h-10 w-full rounded-lg bg-(--secondary) px-4 py-2 text-sm text-(--foreground) transition-all duration-300 ease-out',
+			'placeholder:text-(--muted-foreground)',
+			'border border-transparent',
+			'focus:outline-none focus:border-(--primary) focus:shadow-(--glow-primary)',
+			'disabled:cursor-not-allowed disabled:opacity-40',
+			fakeError && chaos ? 'border-gigo-red shadow-(--glow-destructive)' : '',
+			chaos && chaosClasses(chaosLevel),
+			className
+		)
+	);
+</script>
+
+<div
+	class="relative group"
+	style:transform="translate({offsetX}px, {offsetY}px)"
+	style:transition="transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)"
+>
+	<input
+		type={chaos && randomizeType ? currentType : type}
+		class={computedClass}
+		bind:value
+		{placeholder}
+		{disabled}
+		{required}
+		{name}
+		onfocus={handleFocus}
+		onblur={handleBlur}
+		{oninput}
+		{onchange}
+		{...restProps}
+	/>
+
+	<!-- Animated focus underline -->
+	<div
+		class="absolute bottom-0 left-1/2 h-0.5 bg-linear-to-r from-gigo-magenta via-gigo-cyan to-gigo-lime transition-all duration-300 ease-out rounded-full"
+		style:width={isFocused ? '100%' : '0%'}
+		style:margin-left={isFocused ? '-50%' : '0'}
+	></div>
+
+	{#if fakeError && chaos}
+		<p class="mt-1.5 text-xs text-gigo-red font-mono animate-gigo-entrance" role="alert">
+			{fakeError}
+		</p>
+	{/if}
+
+	{#if educational && chaos}
+		<p class="mt-1.5 text-xs text-(--muted-foreground) italic font-mono">
+			chaos: {[randomDelete && 'deleting', escapeOnFocus && 'escaping', fakeValidation && 'lying', randomizeType && 'morphing'].filter(Boolean).join(' + ')}
+		</p>
+	{/if}
+</div>

package/dist/components/ui/Input.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { GigoInputProps } from '../../types/index.js';
+declare const Input: import("svelte").Component<GigoInputProps, {}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/components/ui/Modal.svelte

@@ -0,0 +1,173 @@
+<script lang="ts">
+	import { cn, chaosClasses, chaosRandom } from '../../utils/cn.js';
+	import type { GigoModalProps } from '../../types/index.js';
+
+	let {
+		open = $bindable(false),
+		title = 'Modal',
+		chaos = false,
+		chaosLevel = 5,
+		educational = false,
+		a11yWarning = false,
+		resistClose = false,
+		escapeModal = false,
+		fakeCloseButtons = false,
+		spawnMoreModals = false,
+		onclose,
+		children,
+		footer,
+		class: className,
+		...restProps
+	}: GigoModalProps = $props();
+
+	let closeAttempts = $state(0);
+	let modalOffsetX = $state(0);
+	let modalOffsetY = $state(0);
+	let spawnedModals = $state(0);
+	let showSpawned = $state(false);
+
+	function handleClose() {
+		if (chaos && resistClose) {
+			closeAttempts++;
+			if (closeAttempts < 3) return;
+			closeAttempts = 0;
+		}
+
+		if (chaos && spawnMoreModals && spawnedModals < 3) {
+			spawnedModals++;
+			showSpawned = true;
+			return;
+		}
+
+		open = false;
+		spawnedModals = 0;
+		showSpawned = false;
+		onclose?.();
+	}
+
+	function handleFakeClose() {
+		if (chaos && escapeModal) {
+			modalOffsetX = (Math.random() - 0.5) * 200;
+			modalOffsetY = (Math.random() - 0.5) * 200;
+		}
+	}
+
+	function handleBackdropClick() {
+		handleClose();
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			if (chaos && escapeModal) {
+				modalOffsetX = (Math.random() - 0.5) * 300;
+				modalOffsetY = (Math.random() - 0.5) * 300;
+				return;
+			}
+			handleClose();
+		}
+	}
+
+	let overlayClass = $derived(
+		cn(
+			'fixed inset-0 z-50 flex items-center justify-center transition-all duration-300',
+			!open && 'pointer-events-none opacity-0'
+		)
+	);
+
+	let panelClass = $derived(
+		cn(
+			'relative w-full max-w-lg rounded-2xl border border-(--surface-border-hover) p-6 transition-all duration-300 ease-out',
+			'bg-(--surface-1)/80 backdrop-blur-xl',
+			'shadow-[0_0_40px_rgba(224,64,251,0.08),0_20px_60px_rgba(0,0,0,0.5)]',
+			chaos && chaosClasses(chaosLevel),
+			className
+		)
+	);
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if open}
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class={overlayClass} onclick={handleBackdropClick}>
+		<!-- Backdrop with blur -->
+		<div class="absolute inset-0 bg-black/70 backdrop-blur-sm"></div>
+
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class={panelClass}
+			style:transform="translate({modalOffsetX}px, {modalOffsetY}px) scale(1)"
+			style:transition="transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)"
+			style:animation="gigo-entrance 0.3s ease-out"
+			role="dialog"
+			aria-modal="true"
+			aria-label={title}
+			onclick={(e) => e.stopPropagation()}
+			{...restProps}
+		>
+			<!-- Top glow line -->
+			<div class="absolute top-0 left-[10%] right-[10%] h-px bg-linear-to-r from-transparent via-gigo-magenta/50 to-transparent"></div>
+
+			<div class="flex items-center justify-between mb-4">
+				<h2 class="text-lg font-semibold text-(--foreground)">{title}</h2>
+				<button
+					class="group/close rounded-lg p-1.5 text-(--muted-foreground) hover:text-(--foreground) hover:bg-(--surface-2) transition-all duration-200"
+					onclick={handleClose}
+					aria-label="Close"
+				>
+					<svg class="h-4 w-4 transition-transform duration-200 group-hover/close:rotate-90" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+						<path d="M18 6L6 18M6 6l12 12" />
+					</svg>
+				</button>
+			</div>
+
+			<div class="text-(--foreground)">
+				{#if children}
+					{@render children()}
+				{/if}
+			</div>
+
+			{#if footer}
+				<div class="mt-6 flex justify-end gap-3">
+					{@render footer()}
+				</div>
+			{/if}
+
+			{#if chaos && fakeCloseButtons}
+				<div class="mt-4 flex gap-2">
+					{#each Array(3) as _, i}
+						<button
+							class="rounded-lg bg-(--surface-2) px-3 py-1.5 text-sm text-(--foreground) hover:bg-(--surface-3) transition-colors duration-200"
+							onclick={handleFakeClose}
+						>
+							{['Close', 'OK', 'Dismiss', 'Cancel', 'Done'][i % 5]}
+						</button>
+					{/each}
+				</div>
+			{/if}
+
+			{#if educational && chaos && resistClose && closeAttempts > 0}
+				<p class="mt-3 text-xs text-gigo-magenta font-mono animate-gigo-entrance">
+					Close attempt {closeAttempts}/3 — this modal resists closure!
+				</p>
+			{/if}
+		</div>
+	</div>
+
+	{#if showSpawned && chaos}
+		{#each Array(spawnedModals) as _, i}
+			<div
+				class="fixed rounded-2xl border border-(--surface-border-hover) bg-(--surface-1)/90 backdrop-blur-xl p-5 shadow-[0_0_30px_rgba(224,64,251,0.1)]"
+				style:z-index={60 + i}
+				style:top="{20 + i * 30}%"
+				style:left="{20 + i * 15}%"
+				style:animation="gigo-entrance 0.3s ease-out {i * 0.1}s both"
+			>
+				<p class="text-sm font-semibold text-(--foreground)">Surprise Modal #{i + 1}</p>
+				<p class="text-xs text-(--muted-foreground) mt-1">You wanted to close? Here's another!</p>
+			</div>
+		{/each}
+	{/if}
+{/if}

package/dist/components/ui/Modal.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { GigoModalProps } from '../../types/index.js';
+declare const Modal: import("svelte").Component<GigoModalProps, {}, "open">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;