@gigo-ui/components 1.0.0-alpha

package/dist/types/index.d.ts

@@ -0,0 +1,177 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes, HTMLButtonAttributes, HTMLInputAttributes } from "svelte/elements";
+export interface GigoBaseProps {
+    chaos?: boolean;
+    chaosLevel?: number;
+    educational?: boolean;
+    a11yWarning?: boolean;
+    class?: string;
+}
+export type ButtonVariant = "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "chaos-primary" | "chaos-destructive" | "chaos-nightmare";
+export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl" | "chaos-sm" | "chaos-lg" | "chaos-xl";
+export interface GigoButtonProps extends GigoBaseProps {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    disabled?: boolean;
+    loading?: boolean;
+    escapeOnHover?: boolean;
+    randomizeText?: boolean;
+    multiClickRequired?: number;
+    children?: Snippet;
+    onclick?: HTMLButtonAttributes["onclick"];
+}
+export type InputType = "text" | "email" | "password" | "number" | "tel" | "url" | "search";
+export interface GigoInputProps extends GigoBaseProps {
+    type?: InputType;
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    randomDelete?: boolean;
+    escapeOnFocus?: boolean;
+    fakeValidation?: boolean;
+    randomizeType?: boolean;
+    oninput?: HTMLInputAttributes["oninput"];
+    onchange?: HTMLInputAttributes["onchange"];
+}
+export interface GigoModalProps extends GigoBaseProps {
+    open?: boolean;
+    title?: string;
+    resistClose?: boolean;
+    escapeModal?: boolean;
+    fakeCloseButtons?: boolean;
+    spawnMoreModals?: boolean;
+    onclose?: () => void;
+    children?: Snippet;
+    footer?: Snippet;
+}
+export interface GigoCardProps extends GigoBaseProps {
+    title?: string;
+    description?: string;
+    randomRotation?: boolean;
+    resistClicks?: boolean;
+    zIndexWar?: boolean;
+    children?: Snippet;
+    header?: Snippet;
+    footer?: Snippet;
+    onclick?: HTMLAttributes<HTMLDivElement>["onclick"];
+}
+export interface CarouselSlide {
+    id: string;
+    content: string;
+    image?: string;
+}
+export interface GigoCarouselProps extends GigoBaseProps {
+    slides: CarouselSlide[];
+    autoplay?: boolean;
+    interval?: number;
+    lyingNavigation?: boolean;
+    reverseDirection?: boolean;
+    randomJumps?: boolean;
+    infiniteFakeSlides?: boolean;
+    onslidechange?: (index: number) => void;
+}
+export interface FormField {
+    id: string;
+    label: string;
+    type: InputType;
+    placeholder?: string;
+    required?: boolean;
+}
+export interface GigoFormProps extends GigoBaseProps {
+    fields: FormField[];
+    submitLabel?: string;
+    randomReset?: boolean;
+    fakeValidation?: boolean;
+    alwaysFails?: boolean;
+    shuffleFields?: boolean;
+    onsubmit?: (data: Record<string, string>) => void;
+}
+export interface NavItem {
+    id: string;
+    label: string;
+    href: string;
+    icon?: string;
+}
+export interface GigoNavProps extends GigoBaseProps {
+    items: NavItem[];
+    wrongDestinations?: boolean;
+    randomReorder?: boolean;
+    fakeLoading?: boolean;
+}
+export interface GigoChaosButtonProps extends GigoBaseProps {
+    label?: string;
+    onclick?: HTMLButtonAttributes["onclick"];
+}
+export interface GigoChaosFormProps extends GigoBaseProps {
+    onsubmit?: (data: Record<string, string>) => void;
+}
+export interface GigoGhostCardProps {
+    title?: string;
+    description?: string;
+    class?: string;
+}
+export interface GigoGravityInputProps {
+    value?: string;
+    placeholder?: string;
+    class?: string;
+}
+export interface GigoRotaryDialProps {
+    value?: string;
+    maxDigits?: number;
+    class?: string;
+}
+export interface GigoSliderPhoneProps {
+    value?: string;
+    digitCount?: number;
+    class?: string;
+}
+export interface GigoCatchSubmitProps {
+    label?: string;
+    onsubmit?: () => void;
+    class?: string;
+}
+export interface GigoDropdownCalcProps {
+    value?: string;
+    class?: string;
+}
+export interface GigoPasswordPeepholeProps {
+    value?: string;
+    placeholder?: string;
+    class?: string;
+}
+export interface GigoVolumeSliderProps {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    invertDirection?: boolean;
+    jumpAround?: boolean;
+    fakeLabels?: boolean;
+    class?: string;
+}
+export interface GigoProgressDoomProps {
+    targetMs?: number;
+    goBackwards?: boolean;
+    stall?: boolean;
+    lieAboutCompletion?: boolean;
+    onComplete?: () => void;
+    class?: string;
+}
+export interface GigoColorPickerWrongProps {
+    value?: string;
+    offsetHue?: boolean;
+    swapChannels?: boolean;
+    delayUpdate?: boolean;
+    class?: string;
+}
+export interface GigoTermsSidescrollProps {
+    content?: string;
+    accepted?: boolean;
+    rotateText?: boolean;
+    scrambleOnScroll?: boolean;
+    sidewaysScroll?: boolean;
+    class?: string;
+}
+export type ChaosIntensity = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;

package/dist/types/index.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/cn.d.ts

@@ -0,0 +1,9 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;
+export declare function chaosRandom(max: number): number;
+export declare function chaosPickOne<T>(items: T[]): T;
+export declare function chaosClasses(level: number): string;
+export declare function randomGarbageText(): string;
+export declare function sleep(ms: number): Promise<void>;
+/** Clamp a number within a range */
+export declare function clamp(value: number, min: number, max: number): number;

package/dist/utils/cn.js

@@ -0,0 +1,90 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+const CHAOS_COLORS = [
+    "text-gigo-magenta",
+    "text-gigo-lime",
+    "text-gigo-yellow",
+    "text-gigo-orange",
+    "text-gigo-pink",
+    "text-gigo-cyan",
+    "text-gigo-hotpink",
+    "text-gigo-red",
+    "text-gigo-blue",
+    "text-gigo-tomato",
+];
+const CHAOS_TRANSFORMS = [
+    "rotate-1",
+    "-rotate-1",
+    "rotate-3",
+    "-rotate-3",
+    "rotate-6",
+    "-rotate-6",
+    "rotate-12",
+    "-rotate-12",
+    "skew-x-3",
+    "-skew-x-3",
+    "skew-y-3",
+    "-skew-y-3",
+    "scale-95",
+    "scale-105",
+    "scale-110",
+];
+const CHAOS_ANIMATIONS = [
+    "animate-gigo-jitter",
+    "animate-gigo-wiggle",
+    "animate-gigo-shake",
+    "animate-gigo-glitch",
+];
+export function chaosRandom(max) {
+    return Math.floor(Math.random() * max);
+}
+export function chaosPickOne(items) {
+    return items[chaosRandom(items.length)];
+}
+export function chaosClasses(level) {
+    if (level <= 0)
+        return "";
+    const classes = [];
+    if (level >= 2)
+        classes.push(chaosPickOne(CHAOS_COLORS));
+    if (level >= 4)
+        classes.push(chaosPickOne(CHAOS_TRANSFORMS));
+    if (level >= 6)
+        classes.push(chaosPickOne(CHAOS_ANIMATIONS));
+    if (level >= 8)
+        classes.push("font-gigo-chaos");
+    if (level >= 10)
+        classes.push("animate-gigo-nightmare", "font-gigo-nightmare");
+    return classes.join(" ");
+}
+const GARBAGE_WORDS = [
+    "ERROR",
+    "undefined",
+    "NaN",
+    "404",
+    "null",
+    "???",
+    "LOADING...",
+    "no.",
+    "HELP",
+    "bruh",
+    ":(",
+    "segfault",
+    "lol",
+    "oops",
+    "yeet",
+    "💀",
+];
+export function randomGarbageText() {
+    return chaosPickOne(GARBAGE_WORDS);
+}
+export function sleep(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+/** Clamp a number within a range */
+export function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@gigo-ui/components",
+  "version": "1.0.0-alpha",
+  "description": "Deliberately dysfunctional UI components — technically excellent, intentionally terrible UX",
+  "license": "MIT",
+  "type": "module",
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./globals.css": "./dist/styles/globals.css"
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*"
+  ],
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.5.0"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^7.0.0",
+    "@sveltejs/kit": "^2.50.2",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@tailwindcss/vite": "^4.2.1",
+    "publint": "^0.3.18",
+    "svelte": "^5.51.0",
+    "svelte-check": "^4.4.2",
+    "tailwindcss": "^4.2.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1"
+  },
+  "keywords": [
+    "svelte",
+    "ui-components",
+    "educational",
+    "ux-antipatterns",
+    "design-system",
+    "tailwindcss"
+  ],
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "build:lib": "svelte-kit sync && svelte-package && publint",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "package": "svelte-kit sync && svelte-package"
+  }
+}