@ruckc/truss-ui 0.0.0-stage → 1.0.0

package/dist/styles/tokens.css

@@ -0,0 +1,143 @@
+/*
+ * truss tokens
+ * Material 3 supplies: tonal color roles, surface containers, elevation, shape.
+ * Blueprint supplies: 32px controls, 1px structural borders, density, intent colors.
+ * Theme: follows the OS by default; force with <html data-theme="light|dark">.
+ */
+:root {
+	/* Typography */
+	--tr-font-sans: 'Inter Variable', Inter, 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
+	--tr-font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
+	--tr-text-xs: 11px;
+	--tr-text-sm: 12px;
+	--tr-text-md: 14px;
+	--tr-text-lg: 16px;
+	--tr-text-xl: 20px;
+
+	/* Control sizing (Blueprint rigidity) */
+	--tr-control-h-sm: 24px;
+	--tr-control-h: 32px;
+	--tr-control-h-lg: 40px;
+	--tr-icon-sm: 16px;
+	--tr-icon-lg: 20px;
+	--tr-gap: 8px;
+
+	/* Shape (Material rounding, tightened) */
+	--tr-radius-sm: 4px;
+	--tr-radius-md: 8px;
+	--tr-radius-lg: 12px;
+	--tr-radius-pill: 999px;
+
+	/* Motion */
+	--tr-ease: cubic-bezier(0.2, 0, 0, 1);
+	--tr-dur-fast: 90ms;
+	--tr-dur: 160ms;
+
+	/* Color roles — light */
+	--tr-primary: #1f5fbf;
+	--tr-on-primary: #ffffff;
+	--tr-primary-container: #d8e4ff;
+	--tr-on-primary-container: #001a41;
+
+	--tr-success: #1b7a4b;
+	--tr-on-success: #ffffff;
+	--tr-success-container: #cdeedb;
+	--tr-on-success-container: #00210f;
+
+	--tr-warning: #8a5300;
+	--tr-on-warning: #ffffff;
+	--tr-warning-container: #ffe0a8;
+	--tr-on-warning-container: #2b1700;
+
+	--tr-danger: #b3261e;
+	--tr-on-danger: #ffffff;
+	--tr-danger-container: #ffdad5;
+	--tr-on-danger-container: #410002;
+
+	--tr-surface: #fbfbfe;
+	--tr-surface-container-low: #f4f5fa;
+	--tr-surface-container: #eef0f6;
+	--tr-surface-container-high: #e7e9f1;
+	--tr-surface-container-highest: #e0e3ec;
+	--tr-on-surface: #1a1c22;
+	--tr-on-surface-variant: #454955;
+	--tr-placeholder: #5f6471; /* ≥4.5:1 on input fill */
+	--tr-outline: #7a7f8e;
+	--tr-outline-variant: #c3c7d3;
+	--tr-scrim: rgb(10 14 24 / 0.4);
+
+	--tr-shadow-color: 24 30 48;
+	--tr-elevation-1: 0 1px 2px rgb(var(--tr-shadow-color) / 0.14), 0 1px 3px 1px rgb(var(--tr-shadow-color) / 0.08);
+	--tr-elevation-2: 0 2px 6px 2px rgb(var(--tr-shadow-color) / 0.12), 0 1px 2px rgb(var(--tr-shadow-color) / 0.2);
+	--tr-elevation-3: 0 6px 16px 4px rgb(var(--tr-shadow-color) / 0.14), 0 2px 4px rgb(var(--tr-shadow-color) / 0.2);
+	--tr-elevation-4: 0 12px 32px 8px rgb(var(--tr-shadow-color) / 0.18), 0 4px 8px rgb(var(--tr-shadow-color) / 0.24);
+
+	--tr-focus-ring: 0 0 0 3px color-mix(in srgb, var(--tr-primary) 32%, transparent);
+	color-scheme: light;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root:not([data-theme='light']) {
+		color-scheme: dark;
+		--tr-primary: #a8c7ff;
+		--tr-on-primary: #002f68;
+		--tr-primary-container: #0d448f;
+		--tr-on-primary-container: #d8e4ff;
+		--tr-success: #7fd7a3;
+		--tr-on-success: #00391d;
+		--tr-success-container: #0a5230;
+		--tr-on-success-container: #cdeedb;
+		--tr-warning: #ffb958;
+		--tr-on-warning: #482900;
+		--tr-warning-container: #683d00;
+		--tr-on-warning-container: #ffe0a8;
+		--tr-danger: #ffb4ab;
+		--tr-on-danger: #690005;
+		--tr-danger-container: #93000a;
+		--tr-on-danger-container: #ffdad5;
+		--tr-surface: #111318;
+		--tr-surface-container-low: #181a20;
+		--tr-surface-container: #1d2026;
+		--tr-surface-container-high: #272a31;
+		--tr-surface-container-highest: #32353c;
+		--tr-on-surface: #e2e2e9;
+		--tr-on-surface-variant: #c3c6d1;
+		--tr-placeholder: #9a9eac;
+		--tr-outline: #8d919d;
+		--tr-outline-variant: #434752;
+		--tr-scrim: rgb(0 0 0 / 0.55);
+		--tr-shadow-color: 0 0 0;
+	}
+}
+
+:root[data-theme='dark'] {
+	color-scheme: dark;
+	--tr-primary: #a8c7ff;
+	--tr-on-primary: #002f68;
+	--tr-primary-container: #0d448f;
+	--tr-on-primary-container: #d8e4ff;
+	--tr-success: #7fd7a3;
+	--tr-on-success: #00391d;
+	--tr-success-container: #0a5230;
+	--tr-on-success-container: #cdeedb;
+	--tr-warning: #ffb958;
+	--tr-on-warning: #482900;
+	--tr-warning-container: #683d00;
+	--tr-on-warning-container: #ffe0a8;
+	--tr-danger: #ffb4ab;
+	--tr-on-danger: #690005;
+	--tr-danger-container: #93000a;
+	--tr-on-danger-container: #ffdad5;
+	--tr-surface: #111318;
+	--tr-surface-container-low: #181a20;
+	--tr-surface-container: #1d2026;
+	--tr-surface-container-high: #272a31;
+	--tr-surface-container-highest: #32353c;
+	--tr-on-surface: #e2e2e9;
+	--tr-on-surface-variant: #c3c6d1;
+	--tr-placeholder: #9a9eac;
+	--tr-outline: #8d919d;
+	--tr-outline-variant: #434752;
+	--tr-scrim: rgb(0 0 0 / 0.55);
+	--tr-shadow-color: 0 0 0;
+}

package/dist/time.d.ts

@@ -0,0 +1,7 @@
+/** Parses "14:30", "1430", "2:30 pm", "9a", "7" into a 24h "HH:MM" string, or null. */
+export declare function parseTime(text: string): string | null;
+export declare function formatTime(value: string, hour12: boolean): string;
+export declare const splitTime: (value?: string) => {
+    h: number;
+    m: number;
+};

package/dist/time.js

@@ -0,0 +1,30 @@
+import { pad } from './date.js';
+/** Parses "14:30", "1430", "2:30 pm", "9a", "7" into a 24h "HH:MM" string, or null. */
+export function parseTime(text) {
+    const m = /^(\d{1,2})(?::?(\d{2}))?\s*(?:([ap])\.?m?\.?)?$/i.exec(text.trim());
+    if (!m)
+        return null;
+    let h = +m[1];
+    const min = +(m[2] ?? 0);
+    const ap = m[3]?.toLowerCase();
+    if (min > 59)
+        return null;
+    if (ap) {
+        if (h < 1 || h > 12)
+            return null;
+        h = (h % 12) + (ap === 'p' ? 12 : 0);
+    }
+    else if (h > 23)
+        return null;
+    return `${pad(h)}:${pad(min)}`;
+}
+export function formatTime(value, hour12) {
+    if (!hour12)
+        return value;
+    const [h, m] = value.split(':').map(Number);
+    return `${h % 12 || 12}:${pad(m)} ${h < 12 ? 'AM' : 'PM'}`;
+}
+export const splitTime = (value) => {
+    const [h, m] = (value ?? '00:00').split(':').map(Number);
+    return { h, m };
+};

package/dist/toast.svelte.d.ts

@@ -0,0 +1,22 @@
+export type ToastIntent = 'primary' | 'success' | 'warning' | 'danger';
+export type Toast = {
+    id: number;
+    intent: ToastIntent;
+    message: string;
+    timeout: number;
+};
+declare class ToastStore {
+    #private;
+    items: Toast[];
+    /** Show a toast. `timeout: 0` keeps it until dismissed. Returns its id. */
+    push(message: string, opts?: {
+        intent?: ToastIntent;
+        timeout?: number;
+    }): number;
+    success: (message: string, timeout?: number) => number;
+    warning: (message: string, timeout?: number) => number;
+    danger: (message: string, timeout?: number) => number;
+    dismiss(id: number): void;
+}
+export declare const toasts: ToastStore;
+export {};

package/dist/toast.svelte.js

@@ -0,0 +1,19 @@
+class ToastStore {
+    items = $state([]);
+    #next = 1;
+    /** Show a toast. `timeout: 0` keeps it until dismissed. Returns its id. */
+    push(message, opts = {}) {
+        const toast = { id: this.#next++, intent: opts.intent ?? 'primary', message, timeout: opts.timeout ?? 5000 };
+        this.items.push(toast);
+        if (toast.timeout > 0)
+            setTimeout(() => this.dismiss(toast.id), toast.timeout);
+        return toast.id;
+    }
+    success = (message, timeout) => this.push(message, { intent: 'success', timeout });
+    warning = (message, timeout) => this.push(message, { intent: 'warning', timeout });
+    danger = (message, timeout) => this.push(message, { intent: 'danger', timeout });
+    dismiss(id) {
+        this.items = this.items.filter((t) => t.id !== id);
+    }
+}
+export const toasts = new ToastStore();

package/dist/types.d.ts

@@ -0,0 +1,70 @@
+import type { IconName } from './icons/paths.js';
+export type Intent = 'primary' | 'neutral' | 'success' | 'warning' | 'danger';
+export type MenuItem = {
+    label: string;
+    icon?: IconName;
+    disabled?: boolean;
+    /** Tint as a destructive action. */
+    danger?: boolean;
+    /** Right-aligned hint, e.g. "⌘K". Display only. */
+    shortcut?: string;
+    /** When set, renders as a checkbox menu item. */
+    checked?: boolean;
+    /** Nested submenu. */
+    items?: MenuEntry[];
+    onselect?: () => void;
+};
+export type MenuEntry = MenuItem | {
+    divider: true;
+} | {
+    heading: string;
+};
+export type Column<R> = {
+    key: keyof R & string;
+    header: string;
+    width?: number;
+    minWidth?: number;
+    align?: 'start' | 'end';
+    sortable?: boolean;
+    /** Defaults to true (except the last column). */
+    resizable?: boolean;
+    /** Adds a filter control to this column when the table is `filterable`. */
+    filter?: 'text' | 'select' | 'number';
+    /** Choices for `filter: 'select'` (defaults to the distinct values in the data). */
+    filterOptions?: string[];
+};
+export type ColumnFilters = Record<string, string | string[] | {
+    min?: number;
+    max?: number;
+} | undefined>;
+export type SortState = {
+    key: string;
+    dir: 1 | -1;
+} | null;
+export type Option<V extends string | number = string> = {
+    value: V;
+    label: string;
+    icon?: IconName;
+    description?: string;
+    disabled?: boolean;
+};
+export type DateRange = {
+    start?: string;
+    end?: string;
+};
+export type TreeNode = {
+    id: string;
+    label: string;
+    icon?: IconName;
+    disabled?: boolean;
+    children?: TreeNode[];
+    /** With `loadChildren`: marks a node whose children are fetched on first expand. */
+    hasChildren?: boolean;
+};
+export type UploadItem = {
+    id: string;
+    file: File;
+    status: 'ready' | 'uploading' | 'done' | 'error';
+    progress: number;
+    error?: string;
+};

package/dist/types.js

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

package/package.json

@@ -1,6 +1,77 @@
 {
-  "name": "@ruckc/truss-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+	"name": "@ruckc/truss-ui",
+	"version": "1.0.0",
+	"description": "Svelte 5 / SvelteKit design system blending Material 3 surfaces with Blueprint density",
+	"keywords": [
+		"svelte",
+		"sveltekit",
+		"design-system",
+		"ui",
+		"components",
+		"accessible",
+		"material",
+		"blueprint"
+	],
+	"type": "module",
+	"license": "MIT",
+	"author": "Curtis Ruck",
+	"homepage": "https://truss.ruck.io",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/ruckc/truss-ui.git"
+	},
+	"bugs": {
+		"url": "https://github.com/ruckc/truss-ui/issues"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"dev": "vite dev",
+		"docs": "node scripts/extract-api.mjs",
+		"build": "npm run docs && vite build",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package",
+		"package:all": "npm run package && npm run package --workspaces",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"test": "playwright test",
+		"test:quick": "playwright test tests/lib.spec.ts tests/inputs.spec.ts tests/misc.spec.ts"
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		},
+		"./styles.css": "./dist/styles/index.css",
+		"./tokens.css": "./dist/styles/tokens.css",
+		"./fonts.css": "./dist/styles/fonts.css"
+	},
+	"peerDependencies": {
+		"svelte": "^5.20.0"
+	},
+	"devDependencies": {
+		"@playwright/test": "^1.65.0",
+		"@sveltejs/adapter-static": "^4.0.1",
+		"@sveltejs/kit": "^2.20.0",
+		"@sveltejs/package": "^2.3.0",
+		"@sveltejs/vite-plugin-svelte": "^6.0.0",
+		"@types/node": "^26.6.6",
+		"svelte": "^5.20.0",
+		"svelte-check": "^4.0.0",
+		"typescript": "^5.6.0",
+		"vite": "^7.0.0"
+	},
+	"workspaces": [
+		"packages/*"
+	]
+}