@salmexio/ui 0.1.0

package/dist/styles/tokens.css

@@ -0,0 +1,340 @@
+/**
+ * Salmex I/O UI Design Tokens
+ * Win2K reimagined by Jean-Michel Basquiat
+ * Raw. Expressive. Powerful. Unfinished.
+ *
+ * Typography: restrained Windows-2000-ish workhorse + Basquiat-like accents (Google Fonts).
+ * Functional default: Work Sans (UI), Roboto Mono (code), Space Grotesk (display), Caveat Brush (accent).
+ * ARIA-critical text uses system/mono; brush fonts for decorative/duplicate only.
+ */
+@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600;700&family=Roboto+Mono:wght@400;600;700&family=Space+Grotesk:wght@600;700&family=Caveat+Brush&display=swap');
+
+:root {
+	/* ========================================
+	   BASQUIAT × WIN2K COLORS
+	   ======================================== */
+	
+	/* Primary Palette - Bold & Vibrant (not safe corporate colors) */
+	--salmex-crown-yellow: 255 220 0;        /* Basquiat's crown gold */
+	--salmex-street-yellow: 230 180 0;       /* Lighter golden yellow for light mode */
+	--salmex-electric-blue: 0 112 255;       /* Vibrant, not muted */
+	--salmex-street-red: 237 28 36;          /* Graffiti red */
+	--salmex-midnight-black: 18 18 18;       /* Deep black canvas */
+	--salmex-chalk-white: 248 248 240;       /* Slightly off-white, like canvas */
+	
+	/* Window Chrome - Rougher, Less Perfect */
+	--salmex-window-surface: 230 225 210;    /* Aged paper/canvas feel */
+	--salmex-titlebar-bold: 0 90 200;        /* Strong blue, less corporate */
+	--salmex-frame-dark: 40 40 40;           /* Dark frame, not gray */
+	
+	/* Button Face - Textured */
+	--salmex-button-face: 235 230 215;       /* Canvas-like surface */
+	--salmex-button-shadow: 80 80 80;        /* Stronger shadows */
+	--salmex-button-dark-edge: 30 30 30;     /* Bold dark edges */
+	--salmex-button-highlight: 255 255 245;  /* Bright highlights */
+	--salmex-button-light: 210 205 190;      /* Subtle mid-tone */
+	
+	/* Accent Colors - Neo-Expressionist */
+	--salmex-graffiti-pink: 255 105 180;     /* Hot pink */
+	--salmex-spray-orange: 255 140 0;        /* Bold orange */
+	--salmex-urban-green: 50 205 50;         /* Bright green */
+	--salmex-neon-purple: 148 0 211;         /* Deep purple */
+	
+	/* System Colors - Less Safe */
+	--salmex-selection: 255 220 0;           /* Crown yellow, not blue */
+	--salmex-hover-layer: 255 220 0;         /* Yellow hover */
+	
+	/* ========================================
+	   MODERN ENHANCEMENTS
+	   ======================================== */
+	
+	/* Primary Brand */
+	--salmex-primary: 0 112 255;             /* Electric blue */
+	--salmex-primary-light: 64 150 255;
+	--salmex-primary-dark: 0 80 200;
+	
+	/* Semantic Colors */
+	--salmex-success: 50 205 50;
+	--salmex-warning: 255 140 0;
+	--salmex-error: 237 28 36;
+	--salmex-info: 0 112 255;
+	
+	/* Text Colors */
+	--salmex-text-primary: 18 18 18;
+	--salmex-text-secondary: 60 60 60;
+	--salmex-text-disabled: 140 140 140;
+	--salmex-text-inverse: 248 248 240;
+	
+	/* Background Colors */
+	--salmex-bg-primary: 248 248 240;
+	--salmex-bg-secondary: 235 230 215;
+	--salmex-bg-tertiary: 220 215 200;
+	--salmex-bg-canvas: 255 255 250;         /* Raw canvas */
+	
+	/* Border Colors - Bolder */
+	--salmex-border-default: 80 80 80;
+	--salmex-border-light: 160 160 160;
+	--salmex-border-dark: 30 30 30;
+	--salmex-border-accent: 255 220 0;       /* Yellow accent borders */
+	
+	/* ========================================
+	   FOCUS INDICATORS - Yellow, visible in both themes
+	   ======================================== */
+	
+	/* Light: dark inner edge + yellow ring so yellow pops on light backgrounds */
+	--salmex-focus-outline: none;
+	--salmex-focus-offset: 0;
+	--salmex-focus-style: dashed;
+	--salmex-focus-ring: 0 0 0 2px rgb(var(--salmex-midnight-black)), 0 0 0 5px rgb(var(--salmex-crown-yellow));
+	/* Thicker dashed outline fallback for outline-only usage */
+	--salmex-focus-outline-color: rgb(var(--salmex-crown-yellow));
+	--salmex-focus-outline-width: 3px;
+	
+	/* ========================================
+	   SPACING (Slightly Irregular - 8px base but expressive)
+	   ======================================== */
+	
+	--salmex-space-1: 4px;
+	--salmex-space-2: 8px;
+	--salmex-space-3: 12px;
+	--salmex-space-4: 16px;
+	--salmex-space-5: 22px;    /* Slightly off */
+	--salmex-space-6: 26px;    /* Not perfect 24 */
+	--salmex-space-8: 34px;    /* Intentionally irregular */
+	--salmex-space-10: 42px;
+	--salmex-space-12: 50px;
+	
+	/* ========================================
+	   TYPOGRAPHY - Win2K workhorse + Basquiat accents
+	   ======================================== */
+	
+	/* Core UI / body – dense UI, labels, long sessions (Work Sans) */
+	--salmex-font-system: 'Work Sans', 'Segoe UI', system-ui, sans-serif;
+	/* Display / sci-system – logos, nav, title bars, large only (Space Grotesk) */
+	--salmex-font-display: 'Space Grotesk', 'Impact', system-ui, sans-serif;
+	/* Monospace – code, logs, debug panels (Roboto Mono) */
+	--salmex-font-mono: 'Roboto Mono', 'Consolas', 'Courier New', monospace;
+	/* Accent – scribble labels, notes, decorative only (Caveat Brush) */
+	--salmex-font-handwrite: 'Caveat Brush', cursive;
+	
+	--salmex-font-size-xs: 11px;
+	--salmex-font-size-sm: 13px;
+	--salmex-font-size-base: 14px;
+	--salmex-font-size-md: 15px;
+	--salmex-font-size-lg: 18px;
+	--salmex-font-size-xl: 24px;
+	--salmex-font-size-display: 32px;
+	
+	/* ========================================
+	   SHADOWS - Stronger, More Dramatic
+	   ======================================== */
+	
+	--salmex-shadow-sm: 2px 2px 0 rgb(var(--salmex-button-shadow));
+	--salmex-shadow-md: 3px 3px 0 rgb(0 0 0 / 0.3);              /* Flat, bold shadow */
+	--salmex-shadow-lg: 5px 5px 0 rgb(0 0 0 / 0.4);              /* Very bold */
+	--salmex-shadow-inset: inset 2px 2px 4px rgb(0 0 0 / 0.2);
+	
+	/* ========================================
+	   BORDER RADIUS - Minimal but Slightly Imperfect
+	   ======================================== */
+	
+	--salmex-radius-none: 0;
+	--salmex-radius-sm: 1px;
+	--salmex-radius-md: 2px;
+	--salmex-radius-lg: 3px;
+	--salmex-radius-rough: 0;  /* Sharp edges, Basquiat style */
+	
+	/* ========================================
+	   TRANSITIONS - Snappier, More Energetic
+	   ======================================== */
+	
+	--salmex-transition-fast: 80ms ease-out;
+	--salmex-transition-base: 120ms ease-out;
+	--salmex-transition-slow: 180ms ease-out;
+	
+	/* ========================================
+	   Z-INDEX LAYERS
+	   ======================================== */
+	
+	--salmex-z-dropdown: 1000;
+	--salmex-z-sticky: 1020;
+	--salmex-z-fixed: 1030;
+	--salmex-z-modal-backdrop: 1040;
+	--salmex-z-modal: 1050;
+	--salmex-z-popover: 1060;
+	--salmex-z-tooltip: 1070;
+	
+	/* ========================================
+	   BASQUIAT SIGNATURE ELEMENTS
+	   ======================================== */
+	
+	--salmex-crown-symbol: '👑';              /* Basquiat's crown */
+	--salmex-annotation-style: 'handwrite';
+	--salmex-texture-noise: 0.02;             /* Slight texture/grain */
+}
+
+/* ========================================
+   DARK MODE (Street Art Night Mode)
+   ======================================== */
+
+[data-theme='dark'] {
+	/* Neon on black - high contrast street art */
+	--salmex-midnight-black: 10 10 10;
+	--salmex-chalk-white: 255 255 255;
+	
+	/* Window chrome - darker canvas */
+	--salmex-window-surface: 22 22 22;
+	--salmex-titlebar-bold: 0 140 255;       /* Brighter blue for dark mode */
+	--salmex-button-face: 32 32 32;
+	--salmex-button-shadow: 60 60 60;
+	--salmex-button-dark-edge: 8 8 8;
+	--salmex-button-highlight: 80 80 80;
+	--salmex-button-light: 50 50 50;
+	
+	/* Text - high contrast */
+	--salmex-text-primary: 255 255 255;
+	--salmex-text-secondary: 200 200 200;
+	--salmex-text-disabled: 100 100 100;
+	
+	/* Backgrounds - darker canvas */
+	--salmex-bg-primary: 15 15 15;
+	--salmex-bg-secondary: 22 22 22;
+	--salmex-bg-tertiary: 32 32 32;
+	--salmex-bg-canvas: 18 18 18;
+	
+	/* Borders - more visible */
+	--salmex-border-default: 80 80 80;
+	--salmex-border-light: 60 60 60;
+	--salmex-border-dark: 120 120 120;
+	
+	/* Neon colors pop more in dark mode */
+	--salmex-crown-yellow: 255 240 0;        /* Brighter yellow */
+	--salmex-electric-blue: 64 150 255;      /* Lighter blue */
+	--salmex-street-red: 255 50 50;          /* Brighter red */
+	--salmex-graffiti-pink: 255 120 200;
+	--salmex-spray-orange: 255 160 40;
+	--salmex-urban-green: 80 230 80;
+	--salmex-neon-purple: 180 40 255;
+	
+	/* Primary colors adjusted */
+	--salmex-primary: 64 150 255;
+	--salmex-primary-light: 100 180 255;
+	--salmex-primary-dark: 40 120 220;
+	
+	/* Selection/hover - neon yellow */
+	--salmex-selection: 255 240 0;
+	--salmex-hover-layer: 255 240 0;
+	
+	/* Focus - bright yellow ring (no dark edge needed on dark bg) */
+	--salmex-focus-outline: 2px dashed rgb(var(--salmex-crown-yellow));
+	--salmex-focus-ring: 0 0 0 3px rgb(var(--salmex-crown-yellow));
+	--salmex-focus-outline-color: rgb(var(--salmex-crown-yellow));
+	--salmex-focus-outline-width: 3px;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root:not([data-theme='light']) {
+		/* Same as [data-theme='dark'] */
+		--salmex-midnight-black: 10 10 10;
+		--salmex-chalk-white: 255 255 255;
+		--salmex-window-surface: 22 22 22;
+		--salmex-titlebar-bold: 0 140 255;
+		--salmex-button-face: 32 32 32;
+		--salmex-button-shadow: 60 60 60;
+		--salmex-button-dark-edge: 8 8 8;
+		--salmex-button-highlight: 80 80 80;
+		--salmex-button-light: 50 50 50;
+		--salmex-text-primary: 255 255 255;
+		--salmex-text-secondary: 200 200 200;
+		--salmex-text-disabled: 100 100 100;
+		--salmex-bg-primary: 15 15 15;
+		--salmex-bg-secondary: 22 22 22;
+		--salmex-bg-tertiary: 32 32 32;
+		--salmex-bg-canvas: 18 18 18;
+		--salmex-border-default: 80 80 80;
+		--salmex-border-light: 60 60 60;
+		--salmex-border-dark: 120 120 120;
+		--salmex-crown-yellow: 255 240 0;
+		--salmex-electric-blue: 64 150 255;
+		--salmex-street-red: 255 50 50;
+		--salmex-primary: 64 150 255;
+		--salmex-primary-light: 100 180 255;
+		--salmex-selection: 255 240 0;
+	}
+}
+
+/* ========================================
+   GLOBAL RESETS & BASQUIAT TEXTURE
+   ======================================== */
+
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+/* Add subtle canvas texture to body */
+body {
+	position: relative;
+}
+
+body::before {
+	content: '';
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	pointer-events: none;
+	opacity: 0.03;
+	background-image: 
+		repeating-linear-gradient(0deg, transparent, transparent 2px, rgb(0 0 0 / 0.02) 2px, rgb(0 0 0 / 0.02) 4px);
+	z-index: -1;
+}
+
+/* Remove default focus styles - we'll add our own */
+:focus {
+	outline: none;
+}
+
+/* Basquiat-style focus - single yellow ring; transition only (no keyframes = no double shadow) */
+:focus-visible {
+	outline: none;
+	box-shadow: var(--salmex-focus-ring);
+	transition: box-shadow var(--salmex-transition-fast);
+}
+
+/* Light theme: dark edge + yellow in one clean ring */
+:root:not([data-theme='dark']) :focus-visible {
+	box-shadow: 0 0 0 2px rgb(var(--salmex-midnight-black)), 0 0 0 5px rgb(var(--salmex-crown-yellow));
+}
+
+/* Dark theme: yellow only */
+[data-theme='dark'] :focus-visible {
+	box-shadow: 0 0 0 3px rgb(var(--salmex-crown-yellow));
+}
+
+@media (prefers-color-scheme: dark) {
+	:root:not([data-theme='light']) :focus-visible {
+		box-shadow: 0 0 0 3px rgb(var(--salmex-crown-yellow));
+	}
+}
+
+/* ========================================
+   REDUCED MOTION
+   ======================================== */
+
+@media (prefers-reduced-motion: reduce) {
+	*,
+	*::before,
+	*::after {
+		animation-duration: 0.01ms !important;
+		animation-iteration-count: 1 !important;
+		transition-duration: 0.01ms !important;
+		scroll-behavior: auto !important;
+	}
+	
+	:focus-visible {
+		transition: none;
+	}
+}

package/dist/utils/cn.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Class name utility for conditionally joining class names.
+ */
+export type ClassValue = string | number | boolean | null | undefined | ClassValue[] | Record<string, boolean | null | undefined>;
+/**
+ * Merges multiple class values into a single class string.
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=cn.d.ts.map

package/dist/utils/cn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../src/utils/cn.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,MAAM,UAAU,GACnB,MAAM,GACN,MAAM,GACN,OAAO,GACP,IAAI,GACJ,SAAS,GACT,UAAU,EAAE,GACZ,MAAM,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;AAE9C;;GAEG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAsBlD"}

package/dist/utils/cn.js

@@ -0,0 +1,29 @@
+/**
+ * Merges multiple class values into a single class string.
+ */
+export function cn(...inputs) {
+    const classes = [];
+    for (const input of inputs) {
+        if (!input)
+            continue;
+        if (typeof input === 'string') {
+            classes.push(input);
+        }
+        else if (typeof input === 'number') {
+            classes.push(String(input));
+        }
+        else if (Array.isArray(input)) {
+            const nested = cn(...input);
+            if (nested)
+                classes.push(nested);
+        }
+        else if (typeof input === 'object') {
+            for (const [key, value] of Object.entries(input)) {
+                if (value)
+                    classes.push(key);
+            }
+        }
+    }
+    // Remove duplicates while preserving order
+    return [...new Set(classes)].join(' ');
+}

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { cn } from './cn.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC"}

package/dist/utils/index.js

@@ -0,0 +1 @@
+export { cn } from './cn.js';

package/package.json

@@ -0,0 +1,84 @@
+{
+	"name": "@salmexio/ui",
+	"version": "0.1.0",
+	"description": "Salmex I/O Design System — Win2K-inspired UI component library for Salmex and Salmex I/O products",
+	"type": "module",
+	"license": "UNLICENSED",
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"dev": "vite dev",
+		"build": "svelte-kit sync && svelte-package -o dist -i src",
+		"build:watch": "svelte-kit sync && svelte-package -o dist -i src --watch",
+		"prepublishOnly": "npm run build",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"test": "vitest run",
+		"test:watch": "vitest",
+		"test:coverage": "vitest run --coverage",
+		"lint": "biome lint src",
+		"lint:fix": "biome lint --write src",
+		"format": "biome format --write src",
+		"format:check": "biome format src"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js",
+			"default": "./dist/index.js"
+		},
+		"./styles": "./dist/styles/tokens.css",
+		"./primitives": {
+			"types": "./dist/primitives/index.d.ts",
+			"svelte": "./dist/primitives/index.js",
+			"default": "./dist/primitives/index.js"
+		},
+		"./navigation": {
+			"types": "./dist/navigation/index.d.ts",
+			"svelte": "./dist/navigation/index.js",
+			"default": "./dist/navigation/index.js"
+		},
+		"./utils": {
+			"types": "./dist/utils/index.d.ts",
+			"default": "./dist/utils/index.js"
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "^1.9.4",
+		"@sveltejs/adapter-auto": "^6.0.0",
+		"@sveltejs/kit": "^2.50.1",
+		"@sveltejs/package": "^2.3.0",
+		"@sveltejs/vite-plugin-svelte": "^6.2.3",
+		"@testing-library/jest-dom": "^6.4.2",
+		"@testing-library/svelte": "^5.2.0",
+		"@types/node": "^25.0.8",
+		"@vitest/coverage-v8": "^4.0.0",
+		"jsdom": "^26.1.0",
+		"svelte": "^5.49.1",
+		"svelte-check": "^4.3.5",
+		"typescript": "^5.0.0",
+		"vite": "^7.3.1",
+		"vitest": "^4.0.18"
+	},
+	"keywords": [
+		"svelte",
+		"sveltekit",
+		"ui",
+		"components",
+		"win2k",
+		"accessibility",
+		"typescript",
+		"ai-assistant"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts"
+}