@gigo-ui/components 1.0.0

package/dist/components/chaos/TermsSidescroll.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	let {
+		content = 'By using this software, you agree to surrender all your snacks, your firstborn WiFi password, and any hope of understanding what you just agreed to. This agreement is binding in all dimensions, including but not limited to: the physical realm, the digital void, and that weird dream you had last Tuesday. You may not reverse-engineer, disassemble, or even think too hard about this product without express written consent from our team of legally trained hamsters. The company reserves the right to change these terms at any time, for any reason, or for no reason at all — because chaos is the only true constant. Any disputes shall be settled by a coin flip performed by a blindfolded intern. By scrolling this far, you have already agreed twice.',
+		accepted = $bindable(false),
+		rotateText = true,
+		scrambleOnScroll = true,
+		sidewaysScroll = true,
+		class: className,
+		...restProps
+	}: {
+		content?: string;
+		accepted?: boolean;
+		rotateText?: boolean;
+		scrambleOnScroll?: boolean;
+		sidewaysScroll?: boolean;
+		class?: string;
+		[key: string]: unknown;
+	} = $props();
+
+	let scrollPos = $state(0);
+	let textRotation = $state(0);
+	let scrambledContent = $state('');
+	let containerEl: HTMLDivElement | undefined = $state();
+	let hasScrolledToEnd = $state(false);
+	let checkboxDisabled = $state(true);
+
+	$effect(() => {
+		scrambledContent = content;
+	});
+
+	function handleScroll(e: Event) {
+		const el = e.target as HTMLElement;
+		if (sidewaysScroll) {
+			scrollPos = el.scrollLeft;
+			const maxScroll = el.scrollWidth - el.clientWidth;
+			hasScrolledToEnd = maxScroll > 0 && el.scrollLeft >= maxScroll - 10;
+		} else {
+			scrollPos = el.scrollTop;
+			const maxScroll = el.scrollHeight - el.clientHeight;
+			hasScrolledToEnd = maxScroll > 0 && el.scrollTop >= maxScroll - 10;
+		}
+
+		if (hasScrolledToEnd) checkboxDisabled = false;
+
+		if (rotateText) {
+			textRotation = Math.sin(scrollPos * 0.02) * 8;
+		}
+
+		if (scrambleOnScroll && Math.random() > 0.7) {
+			const chars = content.split('');
+			const count = Math.floor(Math.random() * 5) + 1;
+			for (let i = 0; i < count; i++) {
+				const idx = Math.floor(Math.random() * chars.length);
+				if (chars[idx] !== ' ') {
+					chars[idx] = String.fromCharCode(33 + Math.floor(Math.random() * 94));
+				}
+			}
+			scrambledContent = chars.join('');
+		}
+	}
+
+	function handleCheckbox() {
+		if (checkboxDisabled) return;
+		if (Math.random() > 0.5) {
+			accepted = !accepted;
+		}
+	}
+</script>
+
+<div class={cn('space-y-3 max-w-md', className)} {...restProps}>
+	<div class="flex items-center justify-between">
+		<span class="text-sm font-bold text-(--foreground)">Terms & Conditions</span>
+		<span class="text-[10px] font-mono text-(--muted-foreground)">
+			{hasScrolledToEnd ? '✓ Scrolled to end' : '← Scroll to read all →'}
+		</span>
+	</div>
+
+	<div
+		bind:this={containerEl}
+		class="rounded-xl border border-(--border) bg-(--card) p-4 text-sm text-(--muted-foreground) leading-relaxed font-mono"
+		style:max-height="160px"
+		style:overflow={sidewaysScroll ? 'auto hidden' : 'hidden auto'}
+		style:white-space={sidewaysScroll ? 'nowrap' : 'normal'}
+		onscroll={handleScroll}
+	>
+		<div style:transform="rotate({textRotation}deg)" style:transform-origin="center" style:transition="transform 0.15s">
+			{scrambledContent}
+		</div>
+	</div>
+
+	<div class="flex items-center gap-3">
+		<button
+			type="button"
+			class="flex items-center justify-center w-5 h-5 rounded border cursor-pointer transition-all"
+			style:border-color={accepted ? '#76ff03' : checkboxDisabled ? 'var(--border)' : '#e040fb'}
+			style:background={accepted ? 'rgba(118, 255, 3, 0.15)' : 'transparent'}
+			style:opacity={checkboxDisabled ? 0.4 : 1}
+			onclick={handleCheckbox}
+			disabled={checkboxDisabled}
+			aria-checked={accepted}
+			role="checkbox"
+		>
+			{#if accepted}
+				<span class="text-xs text-gigo-lime">✓</span>
+			{/if}
+		</button>
+		<span class="text-xs text-(--muted-foreground)">
+			{checkboxDisabled
+				? 'Scroll to the end to enable'
+				: accepted
+					? 'Accepted (maybe — the checkbox has a 50% fail rate)'
+					: 'I agree to these incomprehensible terms'}
+		</span>
+	</div>
+
+	<p class="text-[10px] font-mono text-(--muted-foreground) text-center">
+		Scrolls sideways. Text rotates as you scroll. Characters scramble. Checkbox works half the time.
+	</p>
+</div>

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

@@ -0,0 +1,12 @@
+type $$ComponentProps = {
+    content?: string;
+    accepted?: boolean;
+    rotateText?: boolean;
+    scrambleOnScroll?: boolean;
+    sidewaysScroll?: boolean;
+    class?: string;
+    [key: string]: unknown;
+};
+declare const TermsSidescroll: import("svelte").Component<$$ComponentProps, {}, "accepted">;
+type TermsSidescroll = ReturnType<typeof TermsSidescroll>;
+export default TermsSidescroll;

package/dist/components/chaos/VolumeSlider.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	let {
+		value = $bindable(50),
+		min = 0,
+		max = 100,
+		step = 1,
+		invertDirection = true,
+		jumpAround = true,
+		fakeLabels = true,
+		class: className,
+		...restProps
+	}: {
+		value?: number;
+		min?: number;
+		max?: number;
+		step?: number;
+		invertDirection?: boolean;
+		jumpAround?: boolean;
+		fakeLabels?: boolean;
+		class?: string;
+		[key: string]: unknown;
+	} = $props();
+
+	let displayValue = $state(50);
+	let labelText = $state('50%');
+	let isGrabbing = $state(false);
+	let shakeClass = $state('');
+	let jumpTimer = $state(0);
+
+	const FAKE_LABELS = [
+		'Quiet-ish', 'MAXIMUM', 'Whisper mode', '🔇 Muted (not really)',
+		'Ear damage', 'Perfect', 'Too much', 'Not enough',
+		'Your neighbors hate this', '???', 'Yes', 'No',
+	];
+
+	$effect(() => {
+		displayValue = invertDirection ? max - value + min : value;
+		const pct = Math.round(((value - min) / (max - min)) * 100);
+		labelText = fakeLabels
+			? FAKE_LABELS[Math.floor((pct / 100) * FAKE_LABELS.length) % FAKE_LABELS.length]
+			: `${pct}%`;
+	});
+
+	$effect(() => {
+		if (!jumpAround) return;
+		const timer = setInterval(() => {
+			if (!isGrabbing && Math.random() > 0.6) {
+				const offset = (Math.random() - 0.5) * 20;
+				value = Math.max(min, Math.min(max, value + offset));
+				shakeClass = 'animate-gigo-shake';
+				setTimeout(() => { shakeClass = ''; }, 300);
+			}
+		}, 3000);
+		return () => clearInterval(timer);
+	});
+
+	function handleInput(e: Event) {
+		const raw = Number((e.target as HTMLInputElement).value);
+		value = invertDirection ? max - raw + min : raw;
+		isGrabbing = true;
+	}
+
+	function handleChange() {
+		isGrabbing = false;
+	}
+
+	let sliderDisplayVal = $derived(invertDirection ? max - value + min : value);
+	let fillPct = $derived(((sliderDisplayVal - min) / (max - min)) * 100);
+</script>
+
+<div class={cn('space-y-3 max-w-xs', shakeClass, className)} {...restProps}>
+	<div class="flex items-center justify-between">
+		<span class="text-xs font-mono text-(--muted-foreground)">Volume</span>
+		<span class="text-xs font-mono font-bold text-gigo-magenta">{labelText}</span>
+	</div>
+
+	<div class="relative">
+		<input
+			type="range"
+			{min}
+			{max}
+			{step}
+			value={sliderDisplayVal}
+			oninput={handleInput}
+			onchange={handleChange}
+			class="w-full h-3 rounded-full appearance-none cursor-pointer
+				[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-6 [&::-webkit-slider-thumb]:h-6 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-gigo-magenta [&::-webkit-slider-thumb]:shadow-[0_0_12px_rgba(224,64,251,0.5)] [&::-webkit-slider-thumb]:cursor-grab [&::-webkit-slider-thumb]:active:cursor-grabbing
+				[&::-moz-range-thumb]:w-6 [&::-moz-range-thumb]:h-6 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-gigo-magenta [&::-moz-range-thumb]:border-none"
+			style="background: linear-gradient(to right, rgba(224,64,251,0.4) {fillPct}%, var(--secondary) {fillPct}%)"
+		/>
+	</div>
+
+	<div class="flex justify-between text-[9px] font-mono text-(--muted-foreground)">
+		<span>{invertDirection ? '🔊 MAX' : '🔇 MIN'}</span>
+		<span>{invertDirection ? '🔇 MIN' : '🔊 MAX'}</span>
+	</div>
+
+	<div class="flex items-center gap-2 rounded-lg border border-(--border) bg-(--card) px-3 py-2">
+		<span class="text-xs text-(--muted-foreground)">Actual value:</span>
+		<span class="font-mono text-sm font-bold text-gigo-cyan">{Math.round(value)}</span>
+		<div class="flex-1"></div>
+		{#each Array(5) as _, i}
+			<div
+				class="w-1 rounded-full transition-all duration-200"
+				style:height="{4 + i * 4}px"
+				style:background={i < Math.ceil((value / max) * 5) ? '#e040fb' : 'var(--secondary)'}
+			></div>
+		{/each}
+	</div>
+
+	<p class="text-[10px] font-mono text-(--muted-foreground) text-center">
+		The slider is inverted. The labels lie. It jumps on its own. Enjoy.
+	</p>
+</div>

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

@@ -0,0 +1,14 @@
+type $$ComponentProps = {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    invertDirection?: boolean;
+    jumpAround?: boolean;
+    fakeLabels?: boolean;
+    class?: string;
+    [key: string]: unknown;
+};
+declare const VolumeSlider: import("svelte").Component<$$ComponentProps, {}, "value">;
+type VolumeSlider = ReturnType<typeof VolumeSlider>;
+export default VolumeSlider;

package/dist/components/ui/Button.svelte

@@ -0,0 +1,162 @@
+<script lang="ts">
+	import { cn, chaosClasses, randomGarbageText, chaosRandom } from '../../utils/cn.js';
+	import type { GigoButtonProps, ButtonVariant, ButtonSize } from '../../types/index.js';
+
+	let {
+		variant = 'default',
+		size = 'md',
+		disabled = false,
+		loading = false,
+		chaos = false,
+		chaosLevel = 5,
+		educational = false,
+		a11yWarning = false,
+		escapeOnHover = false,
+		randomizeText = false,
+		multiClickRequired = 1,
+		children,
+		onclick,
+		class: className,
+		...restProps
+	}: GigoButtonProps = $props();
+
+	let clickCount = $state(0);
+	let displayText = $state('');
+	let offsetX = $state(0);
+	let offsetY = $state(0);
+	let showWarning = $state(false);
+	let ripples = $state<Array<{ id: number; x: number; y: number; size: number }>>([]);
+	let nextRippleId = $state(0);
+
+	const variantClasses: Record<ButtonVariant, string> = {
+		default:
+			'bg-(--primary) text-(--primary-foreground) hover:shadow-(--glow-primary) hover:brightness-110',
+		destructive:
+			'bg-(--destructive) text-(--destructive-foreground) hover:shadow-(--glow-destructive) hover:brightness-110',
+		outline:
+			'border border-(--border) bg-transparent text-(--foreground) hover:bg-(--accent) hover:border-(--primary)/40',
+		secondary:
+			'bg-(--secondary) text-(--secondary-foreground) hover:bg-(--accent) hover:text-(--accent-foreground)',
+		ghost:
+			'text-(--foreground) hover:bg-(--accent)',
+		link:
+			'text-gigo-cyan underline-offset-4 hover:underline decoration-gigo-cyan/50',
+		'chaos-primary':
+			'bg-linear-to-r from-gigo-magenta via-gigo-cyan to-gigo-lime bg-[length:200%_auto] animate-gigo-gradient text-white font-semibold shadow-(--glow-primary)',
+		'chaos-destructive':
+			'bg-gigo-red text-white animate-gigo-shake shadow-(--glow-destructive)',
+		'chaos-nightmare':
+			'bg-linear-to-r from-gigo-magenta via-gigo-pink to-gigo-orange bg-[length:300%_auto] animate-gigo-gradient text-white font-bold animate-gigo-nightmare shadow-(--glow-primary)'
+	};
+
+	const sizeClasses: Record<ButtonSize, string> = {
+		xs: 'h-7 px-2.5 text-xs rounded-md',
+		sm: 'h-8 px-3.5 text-sm rounded-md',
+		md: 'h-9 px-5 text-sm rounded-lg',
+		lg: 'h-10 px-6 text-base rounded-lg',
+		xl: 'h-12 px-8 text-lg rounded-xl',
+		'chaos-sm': 'h-6 px-1 text-[10px] rounded-none',
+		'chaos-lg': 'h-16 px-12 text-2xl rounded-full',
+		'chaos-xl': 'h-20 px-16 text-4xl rounded-3xl'
+	};
+
+	$effect(() => {
+		if (!chaos || !randomizeText) return;
+		const interval = setInterval(() => {
+			displayText = randomGarbageText();
+		}, 1200);
+		return () => clearInterval(interval);
+	});
+
+	function handleMouseEnter() {
+		if (!chaos || !escapeOnHover) return;
+		offsetX = (Math.random() - 0.5) * 200;
+		offsetY = (Math.random() - 0.5) * 200;
+	}
+
+	function spawnRipple(e: MouseEvent) {
+		const btn = e.currentTarget as HTMLElement;
+		const rect = btn.getBoundingClientRect();
+		const size = Math.max(rect.width, rect.height);
+		const id = nextRippleId++;
+		ripples = [...ripples, {
+			id,
+			x: e.clientX - rect.left - size / 2,
+			y: e.clientY - rect.top - size / 2,
+			size
+		}];
+		setTimeout(() => {
+			ripples = ripples.filter(r => r.id !== id);
+		}, 600);
+	}
+
+	function handleClick(e: MouseEvent) {
+		spawnRipple(e);
+
+		if (chaos && multiClickRequired > 1) {
+			clickCount++;
+			if (clickCount < multiClickRequired) {
+				showWarning = true;
+				return;
+			}
+			clickCount = 0;
+			showWarning = false;
+		}
+		onclick?.(e as MouseEvent & { currentTarget: EventTarget & HTMLButtonElement });
+	}
+
+	let computedClass = $derived(
+		cn(
+			'gigo-ripple relative inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-all duration-300 ease-out cursor-pointer select-none',
+			'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--ring) focus-visible:ring-offset-2 focus-visible:ring-offset-(--background)',
+			'disabled:pointer-events-none disabled:opacity-40',
+			'active:scale-[0.97] hover:scale-[1.02]',
+			variantClasses[variant],
+			sizeClasses[size],
+			chaos && chaosClasses(chaosLevel),
+			className
+		)
+	);
+</script>
+
+<button
+	class={computedClass}
+	{disabled}
+	aria-disabled={disabled || loading}
+	style:transform="translate({offsetX}px, {offsetY}px)"
+	style:transition="transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1)"
+	onmouseenter={handleMouseEnter}
+	onclick={handleClick}
+	{...restProps}
+>
+	{#each ripples as ripple (ripple.id)}
+		<span
+			class="gigo-ripple-circle"
+			style:width="{ripple.size}px"
+			style:height="{ripple.size}px"
+			style:left="{ripple.x}px"
+			style:top="{ripple.y}px"
+		></span>
+	{/each}
+
+	{#if loading}
+		<svg class="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"></circle>
+			<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+		</svg>
+	{/if}
+
+	{#if chaos && randomizeText && displayText}
+		{displayText}
+	{:else if children}
+		{@render children()}
+	{:else}
+		Button
+	{/if}
+</button>
+
+{#if showWarning && educational}
+	<span class="ml-2 text-xs text-gigo-magenta animate-gigo-pulse-glow font-mono">
+		{multiClickRequired - clickCount} more click(s)
+	</span>
+{/if}

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

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

package/dist/components/ui/Card.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+	import { cn, chaosClasses, chaosRandom } from '../../utils/cn.js';
+	import type { GigoCardProps } from '../../types/index.js';
+
+	let {
+		title = '',
+		description = '',
+		chaos = false,
+		chaosLevel = 5,
+		educational = false,
+		a11yWarning = false,
+		randomRotation = false,
+		resistClicks = false,
+		zIndexWar = false,
+		children,
+		header,
+		footer,
+		onclick,
+		class: className,
+		...restProps
+	}: GigoCardProps = $props();
+
+	let rotation = $state(0);
+	let clickCount = $state(0);
+	let currentZ = $state(1);
+	let tiltX = $state(0);
+	let tiltY = $state(0);
+	let spotlightX = $state(50);
+	let spotlightY = $state(50);
+	let isHovered = $state(false);
+	let cardEl: HTMLDivElement | undefined = $state();
+
+	$effect(() => {
+		if (!chaos || !randomRotation) return;
+		const interval = setInterval(() => {
+			rotation = (Math.random() - 0.5) * 20;
+		}, 2000);
+		return () => clearInterval(interval);
+	});
+
+	function handleMouseMove(e: MouseEvent) {
+		if (!cardEl) return;
+		const rect = cardEl.getBoundingClientRect();
+		const x = (e.clientX - rect.left) / rect.width;
+		const y = (e.clientY - rect.top) / rect.height;
+		tiltX = (y - 0.5) * -12;
+		tiltY = (x - 0.5) * 12;
+		spotlightX = x * 100;
+		spotlightY = y * 100;
+	}
+
+	function handleMouseEnter() { isHovered = true; }
+	function handleMouseLeave() {
+		isHovered = false;
+		tiltX = 0;
+		tiltY = 0;
+	}
+
+	function handleClick(e: MouseEvent) {
+		if (chaos && resistClicks) {
+			clickCount++;
+			if (clickCount < 3) return;
+			clickCount = 0;
+		}
+
+		if (chaos && zIndexWar) {
+			currentZ = chaosRandom(100) + 1;
+		}
+
+		onclick?.(e as MouseEvent & { currentTarget: EventTarget & HTMLDivElement });
+	}
+
+	let cardClass = $derived(
+		cn(
+			'relative overflow-hidden rounded-xl border border-(--border) bg-(--surface-1) text-(--foreground) transition-all duration-300 ease-out',
+			'hover:border-(--surface-border-hover)',
+			chaos && chaosClasses(chaosLevel),
+			className
+		)
+	);
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="group"
+	style:perspective="800px"
+	style:z-index={zIndexWar ? currentZ : undefined}
+>
+	<div
+		bind:this={cardEl}
+		class={cardClass}
+		style:transform="rotate({rotation}deg) rotateX({tiltX}deg) rotateY({tiltY}deg)"
+		style:transition="transform 0.2s ease-out, border-color 0.3s, box-shadow 0.3s"
+		style:box-shadow={isHovered ? '0 0 30px rgba(224, 64, 251, 0.1), 0 20px 40px rgba(0, 0, 0, 0.3)' : '0 4px 20px rgba(0, 0, 0, 0.2)'}
+		onmousemove={handleMouseMove}
+		onmouseenter={handleMouseEnter}
+		onmouseleave={handleMouseLeave}
+		onclick={handleClick}
+		{...restProps}
+	>
+		<!-- Spotlight overlay -->
+		<div
+			class="pointer-events-none absolute inset-0 z-10 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+			style:background="radial-gradient(circle at {spotlightX}% {spotlightY}%, rgba(224, 64, 251, 0.08), transparent 60%)"
+		></div>
+
+		{#if header}
+			<div class="relative z-20 border-b border-(--border) p-4">
+				{@render header()}
+			</div>
+		{/if}
+
+		<div class="relative z-20 p-6">
+			{#if title}
+				<h3 class="text-lg font-semibold leading-none tracking-tight">{title}</h3>
+			{/if}
+			{#if description}
+				<p class="mt-2 text-sm text-(--muted-foreground) leading-relaxed">{description}</p>
+			{/if}
+
+			{#if children}
+				<div class="mt-4">
+					{@render children()}
+				</div>
+			{/if}
+		</div>
+
+		{#if footer}
+			<div class="relative z-20 border-t border-(--border) p-4">
+				{@render footer()}
+			</div>
+		{/if}
+
+		{#if educational && chaos && resistClicks && clickCount > 0}
+			<p class="relative z-20 px-6 pb-4 text-xs text-gigo-magenta font-mono animate-gigo-entrance">
+				Click {3 - clickCount} more time(s) to actually interact!
+			</p>
+		{/if}
+	</div>
+</div>

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

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