@gigo-ui/components 1.0.0-alpha

package/dist/docs/components/badui/terms-sidescroll.js

@@ -0,0 +1,46 @@
+export const termsSidescroll = {
+    name: "Terms Sidescroll",
+    slug: "terms-sidescroll",
+    emoji: "📜",
+    category: "badui",
+    tagline: "Terms & conditions that scroll sideways and scramble",
+    description: "A terms and conditions box that scrolls horizontally instead of vertically. Text rotates as you scroll, characters randomly scramble, and the accept checkbox only works 50% of the time.",
+    usage: `<script lang="ts">
+  import { TermsSidescroll } from '@gigo-ui/components';
+  let accepted = $state(false);
+</script>
+
+<TermsSidescroll bind:accepted />`,
+    props: [
+        {
+            name: "content",
+            type: "string",
+            default: "'...'",
+            description: "Terms text content",
+        },
+        {
+            name: "accepted",
+            type: "boolean",
+            default: "false",
+            description: "Accept state (bindable)",
+        },
+        {
+            name: "rotateText",
+            type: "boolean",
+            default: "true",
+            description: "Text rotates on scroll",
+        },
+        {
+            name: "scrambleOnScroll",
+            type: "boolean",
+            default: "true",
+            description: "Characters scramble while scrolling",
+        },
+        {
+            name: "sidewaysScroll",
+            type: "boolean",
+            default: "true",
+            description: "Scroll horizontally instead of vertically",
+        },
+    ],
+};

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

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

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

@@ -0,0 +1,52 @@
+export const volumeSlider = {
+    name: "Volume Slider",
+    slug: "volume-slider",
+    emoji: "🔊",
+    category: "badui",
+    tagline: "A volume control that lies, inverts, and jumps",
+    description: "A volume slider where dragging left increases volume and right decreases it. Labels lie about the current level, and the slider randomly jumps to new positions on its own.",
+    usage: `<script lang="ts">
+  import { VolumeSlider } from '@gigo-ui/components';
+  let volume = $state(50);
+</script>
+
+<VolumeSlider bind:value={volume} />`,
+    props: [
+        {
+            name: "value",
+            type: "number",
+            default: "50",
+            description: "Current volume (bindable)",
+        },
+        {
+            name: "min",
+            type: "number",
+            default: "0",
+            description: "Minimum value",
+        },
+        {
+            name: "max",
+            type: "number",
+            default: "100",
+            description: "Maximum value",
+        },
+        {
+            name: "invertDirection",
+            type: "boolean",
+            default: "true",
+            description: "Invert slider direction",
+        },
+        {
+            name: "jumpAround",
+            type: "boolean",
+            default: "true",
+            description: "Slider randomly jumps",
+        },
+        {
+            name: "fakeLabels",
+            type: "boolean",
+            default: "true",
+            description: "Show lying volume labels",
+        },
+    ],
+};

package/dist/docs/components/chaos/chaos-button.d.ts

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

package/dist/docs/components/chaos/chaos-button.js

@@ -0,0 +1,48 @@
+export const chaosButton = {
+    name: "Chaos Button",
+    slug: "chaos-button",
+    emoji: "🎯",
+    category: "chaos",
+    tagline: "Teleports, spawns decoys, and mutates text",
+    description: "A button trapped in a container that teleports every 2 seconds, changes its label randomly, requires a random number of clicks (1-10), and spawns fake decoy buttons on each click attempt.",
+    usage: `<script lang="ts">
+  import { ChaosButton } from '@gigo-ui/components';
+</script>
+
+<ChaosButton
+  label="Click Me"
+  onclick={() => console.log('Caught!')}
+/>`,
+    props: [
+        {
+            name: "label",
+            type: "string",
+            default: "'Click me'",
+            description: "Initial button label",
+        },
+        {
+            name: "chaos",
+            type: "boolean",
+            default: "true",
+            description: "Enable chaos behaviors",
+        },
+        {
+            name: "chaosLevel",
+            type: "number",
+            default: "8",
+            description: "Chaos intensity (0-10)",
+        },
+        {
+            name: "onclick",
+            type: "() => void",
+            default: "undefined",
+            description: "Click handler (fires after required clicks met)",
+        },
+        {
+            name: "class",
+            type: "string",
+            default: "''",
+            description: "Additional CSS classes",
+        },
+    ],
+};

package/dist/docs/components/chaos/chaos-form.d.ts

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

package/dist/docs/components/chaos/chaos-form.js

@@ -0,0 +1,68 @@
+export const chaosForm = {
+    name: "Chaos Form",
+    slug: "chaos-form",
+    emoji: "📝",
+    category: "chaos",
+    tagline: "Corrupts data, shuffles fields, CRT scanlines",
+    description: "A form that actively sabotages user input: injects garbage text, shuffles field order, multiplies submit buttons, shows fake validation, auto-submits randomly, and nests additional forms on submit. Features CRT scanline overlay.",
+    usage: `<script lang="ts">
+  import { ChaosForm } from '@gigo-ui/components';
+</script>
+
+<ChaosForm
+  autoSubmit
+  autoSubmitInterval={10000}
+  corruptionInterval={2000}
+  onsubmit={(data) => console.log('Submitted:', data)}
+/>`,
+    props: [
+        {
+            name: "chaos",
+            type: "boolean",
+            default: "true",
+            description: "Enable chaos behaviors",
+        },
+        {
+            name: "chaosLevel",
+            type: "number",
+            default: "8",
+            description: "Chaos intensity (0-10)",
+        },
+        {
+            name: "onsubmit",
+            type: "(data: Record<string, string>) => void",
+            default: "undefined",
+            description: "Submit callback with form data",
+        },
+        {
+            name: "autoSubmit",
+            type: "boolean",
+            default: "false",
+            description: "Enable random auto-submission",
+        },
+        {
+            name: "autoSubmitInterval",
+            type: "number",
+            default: "12000",
+            description: "Max milliseconds between auto-submits",
+        },
+        {
+            name: "corruptionInterval",
+            type: "number",
+            default: "3000",
+            description: "Milliseconds between data corruption cycles",
+        },
+        {
+            name: "shuffleInterval",
+            type: "number",
+            default: "4000",
+            description: "Milliseconds between field order shuffles",
+        },
+        {
+            name: "class",
+            type: "string",
+            default: "''",
+            description: "Additional CSS classes",
+        },
+    ],
+};

package/dist/docs/components/standard/button.d.ts

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

package/dist/docs/components/standard/button.js

@@ -0,0 +1,66 @@
+export const button = {
+    name: "Button",
+    slug: "button",
+    emoji: "🔘",
+    category: "standard",
+    tagline: "9 variants with optional chaos behaviors",
+    description: "A fully-featured button with 9 style variants (default, destructive, outline, secondary, ghost, link, chaos-primary, chaos-destructive, chaos-nightmare) and optional chaos features like hover escape, text randomization, and multi-click requirements.",
+    usage: `<script lang="ts">
+  import { Button } from '@gigo-ui/components';
+</script>
+
+<Button variant="default">Click me</Button>
+<Button variant="chaos-primary" chaos escapeOnHover>
+  Try to click me
+</Button>`,
+    props: [
+        {
+            name: "variant",
+            type: "ButtonVariant",
+            default: "'default'",
+            description: "Visual style variant",
+        },
+        {
+            name: "size",
+            type: "ButtonSize",
+            default: "'md'",
+            description: "Button size",
+        },
+        {
+            name: "chaos",
+            type: "boolean",
+            default: "false",
+            description: "Enable chaos mode",
+        },
+        {
+            name: "disabled",
+            type: "boolean",
+            default: "false",
+            description: "Disabled state",
+        },
+        {
+            name: "escapeOnHover",
+            type: "boolean",
+            default: "false",
+            description: "Button moves away on hover",
+        },
+        {
+            name: "randomizeText",
+            type: "boolean",
+            default: "false",
+            description: "Text changes randomly",
+        },
+        {
+            name: "multiClickRequired",
+            type: "number",
+            default: "1",
+            description: "Clicks needed to trigger onclick",
+        },
+        {
+            name: "onclick",
+            type: "() => void",
+            default: "undefined",
+            description: "Click handler",
+        },
+    ],
+};

package/dist/docs/components/standard/card.d.ts

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

package/dist/docs/components/standard/card.js

@@ -0,0 +1,55 @@
+export const card = {
+    name: "Card",
+    slug: "card",
+    emoji: "🃏",
+    category: "standard",
+    tagline: "3D tilt card with chaos rotation",
+    description: "A content card with interactive 3D tilt on hover using perspective transforms and a dynamic spotlight effect. Chaos features include random rotation, click resistance, and z-index fighting.",
+    usage: `<script lang="ts">
+  import { Card } from '@gigo-ui/components';
+</script>
+
+<Card title="My Card" description="Hover for 3D tilt.">
+  {#snippet children()}
+    <p>Card content goes here.</p>
+  {/snippet}
+</Card>`,
+    props: [
+        {
+            name: "title",
+            type: "string",
+            default: "''",
+            description: "Card title",
+        },
+        {
+            name: "description",
+            type: "string",
+            default: "''",
+            description: "Card description",
+        },
+        {
+            name: "chaos",
+            type: "boolean",
+            default: "false",
+            description: "Enable chaos mode",
+        },
+        {
+            name: "randomRotation",
+            type: "boolean",
+            default: "false",
+            description: "Card rotates randomly",
+        },
+        {
+            name: "resistClicks",
+            type: "boolean",
+            default: "false",
+            description: "Requires 3 clicks to trigger",
+        },
+        {
+            name: "zIndexWar",
+            type: "boolean",
+            default: "false",
+            description: "Random z-index changes",
+        },
+    ],
+};

package/dist/docs/components/standard/carousel.d.ts

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

package/dist/docs/components/standard/carousel.js

@@ -0,0 +1,63 @@
+export const carousel = {
+    name: "Carousel",
+    slug: "carousel",
+    emoji: "🎠",
+    category: "standard",
+    tagline: "Slide carousel with lying navigation",
+    description: "A content carousel with autoplay that features deceptive navigation buttons (prev does next and vice versa), reverse autoplay direction, random slide jumps, and a fake slide counter that inflates.",
+    usage: `<script lang="ts">
+  import { Carousel } from '@gigo-ui/components';
+
+  const slides = [
+    { id: '1', content: 'Slide 1' },
+    { id: '2', content: 'Slide 2' },
+    { id: '3', content: 'Slide 3' },
+  ];
+</script>
+
+<Carousel {slides} autoplay chaos lyingNavigation />`,
+    props: [
+        {
+            name: "slides",
+            type: "CarouselSlide[]",
+            default: "[]",
+            description: "Slide data array",
+        },
+        {
+            name: "autoplay",
+            type: "boolean",
+            default: "false",
+            description: "Auto-advance slides",
+        },
+        {
+            name: "interval",
+            type: "number",
+            default: "3000",
+            description: "Autoplay interval (ms)",
+        },
+        {
+            name: "chaos",
+            type: "boolean",
+            default: "false",
+            description: "Enable chaos mode",
+        },
+        {
+            name: "lyingNavigation",
+            type: "boolean",
+            default: "false",
+            description: "Prev/Next buttons do the opposite",
+        },
+        {
+            name: "reverseDirection",
+            type: "boolean",
+            default: "false",
+            description: "Autoplay goes backwards",
+        },
+        {
+            name: "randomJumps",
+            type: "boolean",
+            default: "false",
+            description: "Jumps to random slides",
+        },
+    ],
+};

package/dist/docs/components/standard/form.d.ts

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

package/dist/docs/components/standard/form.js

@@ -0,0 +1,57 @@
+export const form = {
+    name: "Form",
+    slug: "form",
+    emoji: "📋",
+    category: "standard",
+    tagline: "Form that sabotages submissions",
+    description: "A composable form with configurable fields that optionally resets random fields, shows fake validation, always fails submission, and shuffles field order periodically.",
+    usage: `<script lang="ts">
+  import { Form } from '@gigo-ui/components';
+  import type { FormField } from '@gigo-ui/components';
+
+  const fields: FormField[] = [
+    { id: 'name', label: 'Name', type: 'text', required: true },
+    { id: 'email', label: 'Email', type: 'email', required: true },
+  ];
+</script>
+
+<Form {fields} chaos randomReset alwaysFails />`,
+    props: [
+        {
+            name: "fields",
+            type: "FormField[]",
+            default: "[]",
+            description: "Form field definitions",
+        },
+        {
+            name: "chaos",
+            type: "boolean",
+            default: "false",
+            description: "Enable chaos mode",
+        },
+        {
+            name: "randomReset",
+            type: "boolean",
+            default: "false",
+            description: "Randomly clears fields",
+        },
+        {
+            name: "fakeValidation",
+            type: "boolean",
+            default: "false",
+            description: "Shows fake errors",
+        },
+        {
+            name: "alwaysFails",
+            type: "boolean",
+            default: "false",
+            description: "Submission always fails",
+        },
+        {
+            name: "shuffleFields",
+            type: "boolean",
+            default: "false",
+            description: "Reorders fields periodically",
+        },
+    ],
+};

package/dist/docs/components/standard/input.d.ts

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

package/dist/docs/components/standard/input.js

@@ -0,0 +1,65 @@
+export const input = {
+    name: "Input",
+    slug: "input",
+    emoji: "✏️",
+    category: "standard",
+    tagline: "Text input with chaos features",
+    description: "A styled text input that optionally deletes characters randomly, escapes when focused, shows fake validation errors, and changes its type (text/password/email) unpredictably.",
+    usage: `<script lang="ts">
+  import { Input } from '@gigo-ui/components';
+  let value = $state('');
+</script>
+
+<Input bind:value placeholder="Type here..." />
+<Input bind:value chaos randomDelete fakeValidation />`,
+    props: [
+        {
+            name: "type",
+            type: "InputType",
+            default: "'text'",
+            description: "Input type",
+        },
+        {
+            name: "value",
+            type: "string",
+            default: "''",
+            description: "Current value (bindable)",
+        },
+        {
+            name: "placeholder",
+            type: "string",
+            default: "''",
+            description: "Placeholder text",
+        },
+        {
+            name: "chaos",
+            type: "boolean",
+            default: "false",
+            description: "Enable chaos mode",
+        },
+        {
+            name: "randomDelete",
+            type: "boolean",
+            default: "false",
+            description: "Randomly deletes characters",
+        },
+        {
+            name: "escapeOnFocus",
+            type: "boolean",
+            default: "false",
+            description: "Input moves when focused",
+        },
+        {
+            name: "fakeValidation",
+            type: "boolean",
+            default: "false",
+            description: "Shows fake error messages",
+        },
+        {
+            name: "randomizeType",
+            type: "boolean",
+            default: "false",
+            description: "Changes input type randomly",
+        },
+    ],
+};

package/dist/docs/components/standard/modal.d.ts

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

package/dist/docs/components/standard/modal.js

@@ -0,0 +1,63 @@
+export const modal = {
+    name: "Modal",
+    slug: "modal",
+    emoji: "💬",
+    category: "standard",
+    tagline: "Dialog that fights being closed",
+    description: "A glassmorphism modal dialog with chaos features: resists closing (requires 3 attempts), Escape key moves the modal instead of closing it, spawns additional nested modals, and adds fake close buttons.",
+    usage: `<script lang="ts">
+  import { Button, Modal } from '@gigo-ui/components';
+  let open = $state(false);
+</script>
+
+<Button onclick={() => (open = true)}>Open Modal</Button>
+<Modal bind:open title="Example" chaos resistClose spawnMoreModals>
+  {#snippet children()}
+    <p>Try closing this.</p>
+  {/snippet}
+</Modal>`,
+    props: [
+        {
+            name: "open",
+            type: "boolean",
+            default: "false",
+            description: "Open state (bindable)",
+        },
+        {
+            name: "title",
+            type: "string",
+            default: "'Modal'",
+            description: "Modal title",
+        },
+        {
+            name: "chaos",
+            type: "boolean",
+            default: "false",
+            description: "Enable chaos mode",
+        },
+        {
+            name: "resistClose",
+            type: "boolean",
+            default: "false",
+            description: "Requires multiple close attempts",
+        },
+        {
+            name: "escapeModal",
+            type: "boolean",
+            default: "false",
+            description: "Escape key offsets instead of closing",
+        },
+        {
+            name: "spawnMoreModals",
+            type: "boolean",
+            default: "false",
+            description: "Spawns nested modals on close",
+        },
+        {
+            name: "fakeCloseButtons",
+            type: "boolean",
+            default: "false",
+            description: "Adds non-functional close buttons",
+        },
+    ],
+};

package/dist/docs/components/standard/navigation.d.ts

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