@gigo-ui/components 1.0.0-alpha

package/dist/components/ui/Navigation.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import { cn, chaosClasses, chaosRandom, chaosPickOne } from '../../utils/cn.js';
+	import type { GigoNavProps, NavItem } from '../../types/index.js';
+
+	let {
+		items = [],
+		chaos = false,
+		chaosLevel = 5,
+		educational = false,
+		a11yWarning = false,
+		wrongDestinations = false,
+		randomReorder = false,
+		fakeLoading = false,
+		class: className,
+		...restProps
+	}: GigoNavProps = $props();
+
+	let displayItems = $state<NavItem[]>([]);
+	let loadingItem = $state<string | null>(null);
+
+	// Random reorder
+	$effect(() => {
+		displayItems = [...items];
+		if (!chaos || !randomReorder) return;
+		const timer = setInterval(() => {
+			displayItems = [...displayItems].sort(() => Math.random() - 0.5);
+		}, 3000);
+		return () => clearInterval(timer);
+	});
+
+	function getHref(item: NavItem): string {
+		if (chaos && wrongDestinations) {
+			const otherItems = items.filter((i) => i.id !== item.id);
+			return otherItems.length > 0 ? chaosPickOne(otherItems).href : item.href;
+		}
+		return item.href;
+	}
+
+	function handleClick(item: NavItem, e: MouseEvent) {
+		if (chaos && fakeLoading) {
+			e.preventDefault();
+			loadingItem = item.id;
+			setTimeout(() => {
+				loadingItem = null;
+				// Actually navigate after fake delay
+				const href = getHref(item);
+				window.location.href = href;
+			}, 1500 + chaosRandom(2000));
+		}
+	}
+
+	let navClass = $derived(
+		cn(
+			'flex items-center gap-1 rounded-xl border border-(--border) bg-(--surface-1)/80 backdrop-blur-md p-2',
+			chaos && chaosClasses(chaosLevel),
+			className
+		)
+	);
+</script>
+
+<nav class={navClass} {...restProps}>
+	{#each displayItems as item (item.id)}
+		<a
+			href={getHref(item)}
+			class={cn(
+				'group/link relative inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium text-(--muted-foreground) transition-all duration-200 hover:text-(--foreground) hover:bg-(--surface-2)',
+				loadingItem === item.id && 'pointer-events-none opacity-40'
+			)}
+			onclick={(e) => handleClick(item, e)}
+		>
+			{#if item.icon}
+				<span class="text-base transition-transform duration-200 group-hover/link:scale-110">{item.icon}</span>
+			{/if}
+			{item.label}
+			{#if loadingItem === item.id}
+				<svg class="ml-1 h-3 w-3 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>
+			{/if}
+			<!-- Hover underline -->
+			<span class="absolute bottom-1 left-3 right-3 h-px bg-linear-to-r from-gigo-magenta to-gigo-cyan scale-x-0 transition-transform duration-200 group-hover/link:scale-x-100 origin-left"></span>
+		</a>
+	{/each}
+
+	{#if educational && chaos}
+		<span class="ml-auto text-xs text-(--muted-foreground) italic font-mono px-2">
+			links may lie
+		</span>
+	{/if}
+</nav>

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

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

package/dist/docs/categories.d.ts

@@ -0,0 +1,13 @@
+export declare const categories: readonly [{
+    readonly id: "badui";
+    readonly label: "BadUI Collection";
+    readonly description: "Components that technically work, but make you wish they didn't.";
+}, {
+    readonly id: "chaos";
+    readonly label: "Classic Chaos";
+    readonly description: "Standard UI elements that misbehave when chaos mode is on.";
+}, {
+    readonly id: "standard";
+    readonly label: "Standard UI";
+    readonly description: "Well-built base components with optional chaos toggles.";
+}];

package/dist/docs/categories.js

@@ -0,0 +1,17 @@
+export const categories = [
+    {
+        id: "badui",
+        label: "BadUI Collection",
+        description: "Components that technically work, but make you wish they didn't.",
+    },
+    {
+        id: "chaos",
+        label: "Classic Chaos",
+        description: "Standard UI elements that misbehave when chaos mode is on.",
+    },
+    {
+        id: "standard",
+        label: "Standard UI",
+        description: "Well-built base components with optional chaos toggles.",
+    },
+];

package/dist/docs/component-data.d.ts

@@ -0,0 +1,6 @@
+export type { PropDoc, ComponentDoc } from "./types.js";
+export { categories } from "./categories.js";
+import type { ComponentDoc } from "./types.js";
+export declare const componentDocs: ComponentDoc[];
+export declare function getComponentsByCategory(category: ComponentDoc["category"]): ComponentDoc[];
+export declare function getComponentBySlug(slug: string): ComponentDoc | undefined;

package/dist/docs/component-data.js

@@ -0,0 +1,49 @@
+export { categories } from "./categories.js";
+import { ghostCard } from "./components/badui/ghost-card.js";
+import { gravityInput } from "./components/badui/gravity-input.js";
+import { rotaryDial } from "./components/badui/rotary-dial.js";
+import { sliderPhone } from "./components/badui/slider-phone.js";
+import { catchSubmit } from "./components/badui/catch-submit.js";
+import { dropdownCalc } from "./components/badui/dropdown-calc.js";
+import { passwordPeekhole } from "./components/badui/password-peekhole.js";
+import { volumeSlider } from "./components/badui/volume-slider.js";
+import { progressDoom } from "./components/badui/progress-doom.js";
+import { colorPickerWrong } from "./components/badui/color-picker-wrong.js";
+import { termsSidescroll } from "./components/badui/terms-sidescroll.js";
+import { chaosButton } from "./components/chaos/chaos-button.js";
+import { chaosForm } from "./components/chaos/chaos-form.js";
+import { button } from "./components/standard/button.js";
+import { input } from "./components/standard/input.js";
+import { modal } from "./components/standard/modal.js";
+import { card } from "./components/standard/card.js";
+import { carousel } from "./components/standard/carousel.js";
+import { form } from "./components/standard/form.js";
+import { navigation } from "./components/standard/navigation.js";
+export const componentDocs = [
+    ghostCard,
+    gravityInput,
+    rotaryDial,
+    sliderPhone,
+    catchSubmit,
+    dropdownCalc,
+    passwordPeekhole,
+    volumeSlider,
+    progressDoom,
+    colorPickerWrong,
+    termsSidescroll,
+    chaosButton,
+    chaosForm,
+    button,
+    input,
+    modal,
+    card,
+    carousel,
+    form,
+    navigation,
+];
+export function getComponentsByCategory(category) {
+    return componentDocs.filter((c) => c.category === category);
+}
+export function getComponentBySlug(slug) {
+    return componentDocs.find((c) => c.slug === slug);
+}

package/dist/docs/components/badui/catch-submit.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDoc } from "../../types.js";
+export declare const catchSubmit: ComponentDoc;

package/dist/docs/components/badui/catch-submit.js

@@ -0,0 +1,49 @@
+export const catchSubmit = {
+    name: "Catch Submit",
+    slug: "catch-submit",
+    emoji: "🏃",
+    category: "badui",
+    tagline: "The submit button runs away from your cursor",
+    description: "A submit button that teleports to a random position whenever the cursor enters it. Tracks escape count, shows trail dots, displays taunting messages, and reveals a hint after 5+ escapes.",
+    usage: `<script lang="ts">
+  import { CatchSubmit } from '@gigo-ui/components';
+</script>
+
+<CatchSubmit
+  label="Submit Form"
+  arenaHeight={300}
+  onsubmit={() => alert('You caught it!')}
+/>`,
+    props: [
+        {
+            name: "label",
+            type: "string",
+            default: "'Submit'",
+            description: "Button label text",
+        },
+        {
+            name: "onsubmit",
+            type: "() => void",
+            default: "undefined",
+            description: "Callback when button is finally clicked",
+        },
+        {
+            name: "arenaHeight",
+            type: "number",
+            default: "256",
+            description: "Height of the escape arena in pixels",
+        },
+        {
+            name: "tauntsArray",
+            type: "string[]",
+            default: "[...defaults]",
+            description: "Array of taunting messages shown during escapes",
+        },
+        {
+            name: "class",
+            type: "string",
+            default: "''",
+            description: "Additional CSS classes",
+        },
+    ],
+};

package/dist/docs/components/badui/color-picker-wrong.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDoc } from "../../types.js";
+export declare const colorPickerWrong: ComponentDoc;

package/dist/docs/components/badui/color-picker-wrong.js

@@ -0,0 +1,40 @@
+export const colorPickerWrong = {
+    name: "Color Picker Wrong",
+    slug: "color-picker-wrong",
+    emoji: "🎨",
+    category: "badui",
+    tagline: "Pick a color, get the wrong one",
+    description: "A color picker that channel-swaps and hue-shifts every color you select. You pick red, you get teal. You pick blue, you get orange. Includes delayed updates and lying color names.",
+    usage: `<script lang="ts">
+  import { ColorPickerWrong } from '@gigo-ui/components';
+  let color = $state('#e040fb');
+</script>
+
+<ColorPickerWrong bind:value={color} />`,
+    props: [
+        {
+            name: "value",
+            type: "string",
+            default: "'#e040fb'",
+            description: "Output color hex (bindable, always wrong)",
+        },
+        {
+            name: "offsetHue",
+            type: "boolean",
+            default: "true",
+            description: "Shift hue channels",
+        },
+        {
+            name: "swapChannels",
+            type: "boolean",
+            default: "true",
+            description: "Swap RGB channels",
+        },
+        {
+            name: "delayUpdate",
+            type: "boolean",
+            default: "true",
+            description: "Delay color update randomly",
+        },
+    ],
+};

package/dist/docs/components/badui/dropdown-calc.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDoc } from "../../types.js";
+export declare const dropdownCalc: ComponentDoc;

package/dist/docs/components/badui/dropdown-calc.js

@@ -0,0 +1,28 @@
+export const dropdownCalc = {
+    name: "Dropdown Calculator",
+    slug: "dropdown-calc",
+    emoji: "🔢",
+    category: "badui",
+    tagline: "Every digit selected via dropdown menus",
+    description: "A calculator where every digit of both operands and the operator must be selected from individual dropdown menus. Supports +, -, ×, ÷ with proper division-by-zero handling.",
+    usage: `<script lang="ts">
+  import { DropdownCalc } from '@gigo-ui/components';
+  let value = $state('');
+</script>
+
+<DropdownCalc bind:value />`,
+    props: [
+        {
+            name: "value",
+            type: "string",
+            default: "''",
+            description: "Current calculation result (bindable)",
+        },
+        {
+            name: "class",
+            type: "string",
+            default: "''",
+            description: "Additional CSS classes",
+        },
+    ],
+};

package/dist/docs/components/badui/ghost-card.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDoc } from "../../types.js";
+export declare const ghostCard: ComponentDoc;

package/dist/docs/components/badui/ghost-card.js

@@ -0,0 +1,54 @@
+export const ghostCard = {
+    name: "Ghost Card",
+    slug: "ghost-card",
+    emoji: "👻",
+    category: "badui",
+    tagline: "A card that randomly vanishes and reappears broken",
+    description: "Displays content in a card that periodically disappears, then reappears in a glitched state — mirrored, sliced via clip-path, hue-rotated, or offset. Simulates unreliable rendering with visual corruption effects.",
+    usage: `<script lang="ts">
+  import { GhostCard } from '@gigo-ui/components';
+</script>
+
+<GhostCard
+  title="Important Info"
+  description="This content may vanish at any moment."
+/>`,
+    props: [
+        {
+            name: "title",
+            type: "string",
+            default: "'Ghost Card'",
+            description: "Card heading text",
+        },
+        {
+            name: "description",
+            type: "string",
+            default: "''",
+            description: "Card body text",
+        },
+        {
+            name: "class",
+            type: "string",
+            default: "''",
+            description: "Additional CSS classes",
+        },
+        {
+            name: "disappearMinMs",
+            type: "number",
+            default: "2000",
+            description: "Minimum time before disappearing (ms)",
+        },
+        {
+            name: "disappearMaxMs",
+            type: "number",
+            default: "5000",
+            description: "Maximum time before disappearing (ms)",
+        },
+        {
+            name: "glitchChance",
+            type: "number",
+            default: "0.6",
+            description: "Probability of glitch on reappear (0-1)",
+        },
+    ],
+};

package/dist/docs/components/badui/gravity-input.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDoc } from "../../types.js";
+export declare const gravityInput: ComponentDoc;

package/dist/docs/components/badui/gravity-input.js

@@ -0,0 +1,64 @@
+export const gravityInput = {
+    name: "Gravity Input",
+    slug: "gravity-input",
+    emoji: "🪂",
+    category: "badui",
+    tagline: "Catch falling characters to type",
+    description: "Characters fall from the top of a drop zone with simulated gravity. Click a character before it falls off screen to append it to the input value. Features real physics simulation with requestAnimationFrame.",
+    usage: `<script lang="ts">
+  import { GravityInput } from '@gigo-ui/components';
+  let value = $state('');
+</script>
+
+<GravityInput
+  bind:value
+  placeholder="Catch characters to type..."
+  spawnInterval={300}
+  maxFalling={20}
+  arenaHeight={280}
+/>`,
+    props: [
+        {
+            name: "value",
+            type: "string",
+            default: "''",
+            description: "Current input value (bindable)",
+        },
+        {
+            name: "placeholder",
+            type: "string",
+            default: "''",
+            description: "Placeholder text when empty",
+        },
+        {
+            name: "spawnInterval",
+            type: "number",
+            default: "400",
+            description: "Milliseconds between character spawns",
+        },
+        {
+            name: "maxFalling",
+            type: "number",
+            default: "15",
+            description: "Maximum simultaneous falling characters",
+        },
+        {
+            name: "characters",
+            type: "string",
+            default: "'0-9a-zA-Z@.!?#$%'",
+            description: "Character pool for falling glyphs",
+        },
+        {
+            name: "arenaHeight",
+            type: "number",
+            default: "224",
+            description: "Height of the drop zone in pixels",
+        },
+        {
+            name: "class",
+            type: "string",
+            default: "''",
+            description: "Additional CSS classes",
+        },
+    ],
+};

package/dist/docs/components/badui/password-peekhole.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDoc } from "../../types.js";
+export declare const passwordPeekhole: ComponentDoc;

package/dist/docs/components/badui/password-peekhole.js

@@ -0,0 +1,51 @@
+export const passwordPeekhole = {
+    name: "Password Peekhole",
+    slug: "password-peekhole",
+    emoji: "🔒",
+    category: "badui",
+    tagline: "See your password through a draggable peephole",
+    description: "A password input completely hidden behind an opaque overlay. A tiny circular peephole can be dragged around to reveal portions of the text. Uses CSS clip-path for the reveal effect.",
+    usage: `<script lang="ts">
+  import { PasswordPeekhole } from '@gigo-ui/components';
+  let password = $state('');
+</script>
+
+<PasswordPeekhole
+  bind:value={password}
+  placeholder="Enter your secret..."
+  holeSize={50}
+  accentColor="#18ffff"
+/>`,
+    props: [
+        {
+            name: "value",
+            type: "string",
+            default: "''",
+            description: "Current password value (bindable)",
+        },
+        {
+            name: "placeholder",
+            type: "string",
+            default: "''",
+            description: "Placeholder text",
+        },
+        {
+            name: "holeSize",
+            type: "number",
+            default: "40",
+            description: "Radius of the draggable peephole in pixels",
+        },
+        {
+            name: "accentColor",
+            type: "string",
+            default: "'#e040fb'",
+            description: "Accent color for the peephole handle and indicators",
+        },
+        {
+            name: "class",
+            type: "string",
+            default: "''",
+            description: "Additional CSS classes",
+        },
+    ],
+};

package/dist/docs/components/badui/progress-doom.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDoc } from "../../types.js";
+export declare const progressDoom: ComponentDoc;

package/dist/docs/components/badui/progress-doom.js

@@ -0,0 +1,48 @@
+export const progressDoom = {
+    name: "Progress Doom",
+    slug: "progress-doom",
+    emoji: "⏳",
+    category: "badui",
+    tagline: "A progress bar that lies, stalls, and goes backwards",
+    description: "A progress bar that shows three different values — real, displayed, and claimed — none of which agree. It goes backwards randomly, stalls at inconvenient moments, and lies about completion.",
+    usage: `<script lang="ts">
+  import { ProgressDoom } from '@gigo-ui/components';
+</script>
+
+<ProgressDoom
+  targetMs={5000}
+  onComplete={() => alert('Done!')}
+/>`,
+    props: [
+        {
+            name: "targetMs",
+            type: "number",
+            default: "5000",
+            description: "Target duration in milliseconds",
+        },
+        {
+            name: "goBackwards",
+            type: "boolean",
+            default: "true",
+            description: "Progress randomly goes backwards",
+        },
+        {
+            name: "stall",
+            type: "boolean",
+            default: "true",
+            description: "Progress randomly stalls",
+        },
+        {
+            name: "lieAboutCompletion",
+            type: "boolean",
+            default: "true",
+            description: "Displayed percentage lies",
+        },
+        {
+            name: "onComplete",
+            type: "() => void",
+            default: "undefined",
+            description: "Callback when actually complete",
+        },
+    ],
+};

package/dist/docs/components/badui/rotary-dial.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDoc } from "../../types.js";
+export declare const rotaryDial: ComponentDoc;

package/dist/docs/components/badui/rotary-dial.js

@@ -0,0 +1,40 @@
+export const rotaryDial = {
+    name: "Rotary Dial",
+    slug: "rotary-dial",
+    emoji: "☎️",
+    category: "badui",
+    tagline: "Enter numbers by rotating a dial",
+    description: "An SVG rotary phone dial for number entry. Uses atan2 calculations for rotation tracking, enforces clockwise-only rotation, and animates the return spring. Each digit requires a full rotation cycle.",
+    usage: `<script lang="ts">
+  import { RotaryDial } from '@gigo-ui/components';
+  let value = $state('');
+</script>
+
+<RotaryDial bind:value maxDigits={10} dialSize={300} />`,
+    props: [
+        {
+            name: "value",
+            type: "string",
+            default: "''",
+            description: "Current dialed number (bindable)",
+        },
+        {
+            name: "maxDigits",
+            type: "number",
+            default: "10",
+            description: "Maximum digits allowed",
+        },
+        {
+            name: "dialSize",
+            type: "number",
+            default: "260",
+            description: "Diameter of the rotary dial in pixels",
+        },
+        {
+            name: "class",
+            type: "string",
+            default: "''",
+            description: "Additional CSS classes",
+        },
+    ],
+};

package/dist/docs/components/badui/slider-phone.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDoc } from "../../types.js";
+export declare const sliderPhone: ComponentDoc;

package/dist/docs/components/badui/slider-phone.js

@@ -0,0 +1,40 @@
+export const sliderPhone = {
+    name: "Slider Phone",
+    slug: "slider-phone",
+    emoji: "📱",
+    category: "badui",
+    tagline: "Enter a phone number with individual sliders",
+    description: "10 range sliders (0-9 each) for entering a phone number one digit at a time. Displays the result formatted as (XXX) XXX-XXXX. The ultimate in tedious data entry.",
+    usage: `<script lang="ts">
+  import { SliderPhone } from '@gigo-ui/components';
+  let value = $state('');
+</script>
+
+<SliderPhone bind:value digitCount={10} formatPattern="(XXX) XXX-XXXX" />`,
+    props: [
+        {
+            name: "value",
+            type: "string",
+            default: "''",
+            description: "Current phone number (bindable)",
+        },
+        {
+            name: "digitCount",
+            type: "number",
+            default: "10",
+            description: "Number of digit sliders",
+        },
+        {
+            name: "formatPattern",
+            type: "string",
+            default: "'(XXX) XXX-XXXX'",
+            description: "Display format pattern (X = digit placeholder)",
+        },
+        {
+            name: "class",
+            type: "string",
+            default: "''",
+            description: "Additional CSS classes",
+        },
+    ],
+};

package/dist/docs/components/badui/terms-sidescroll.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDoc } from "../../types.js";
+export declare const termsSidescroll: ComponentDoc;