@zvk/ui 0.1.0

package/dist/tokens/index.d.ts

@@ -0,0 +1,2 @@
+export type { LianoDensity, LianoDensityTokens, LianoPrimitiveTokens, LianoSemanticTokens, LianoThemeMode } from "./token-types.js";
+export { LIANO_DARK_TOKENS, LIANO_DENSITY_TOKENS, LIANO_LIGHT_TOKENS, LIANO_TOKENS } from "./tokens.js";

package/dist/tokens/index.js

@@ -0,0 +1 @@
+export { LIANO_DARK_TOKENS, LIANO_DENSITY_TOKENS, LIANO_LIGHT_TOKENS, LIANO_TOKENS } from "./tokens.js";

package/dist/tokens/token-types.d.ts

@@ -0,0 +1,23 @@
+export type LianoThemeMode = "light" | "dark";
+export type LianoDensity = "default" | "compact" | "comfortable";
+export interface LianoPrimitiveTokens {
+    color: Record<string, string>;
+    space: Record<string, string>;
+    radius: Record<string, string>;
+    typography: Record<string, string>;
+    shadow: Record<string, string>;
+    motion: Record<string, string>;
+    zIndex: Record<string, number>;
+}
+export interface LianoSemanticTokens {
+    color: Record<string, string>;
+    component: Record<string, string>;
+}
+export interface LianoDensityTokens {
+    controlHeightSm: string;
+    controlHeightMd: string;
+    controlHeightLg: string;
+    controlPaddingX: string;
+    controlGap: string;
+    fieldGap: string;
+}

package/dist/tokens/token-types.js

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

package/dist/tokens/tokens.d.ts

@@ -0,0 +1,139 @@
+export declare const LIANO_TOKENS: {
+    readonly color: {
+        readonly white: "#ffffff";
+        readonly black: "#0b0d12";
+        readonly slate50: "#f8fafc";
+        readonly slate100: "#f1f5f9";
+        readonly slate200: "#e2e8f0";
+        readonly slate300: "#cbd5e1";
+        readonly slate500: "#64748b";
+        readonly slate700: "#334155";
+        readonly slate900: "#0f172a";
+        readonly blue600: "#2563eb";
+        readonly blue700: "#1d4ed8";
+        readonly teal600: "#0d9488";
+        readonly amber500: "#f59e0b";
+        readonly red600: "#dc2626";
+        readonly cyan600: "#0891b2";
+    };
+    readonly space: {
+        readonly 0: "0";
+        readonly 1: "0.25rem";
+        readonly 2: "0.5rem";
+        readonly 3: "0.75rem";
+        readonly 4: "1rem";
+        readonly 5: "1.25rem";
+        readonly 6: "1.5rem";
+        readonly 8: "2rem";
+        readonly 10: "2.5rem";
+    };
+    readonly radius: {
+        readonly xs: "0.25rem";
+        readonly sm: "0.375rem";
+        readonly md: "0.5rem";
+        readonly lg: "0.75rem";
+        readonly full: "999px";
+    };
+    readonly typography: {
+        readonly fontFamilySans: "\"Aptos\", \"SF Pro Text\", \"Segoe UI Variable\", ui-sans-serif, system-ui, sans-serif";
+        readonly fontFamilyMono: "\"SF Mono\", \"Cascadia Code\", ui-monospace, monospace";
+        readonly fontSizeXs: "0.75rem";
+        readonly fontSizeSm: "0.875rem";
+        readonly fontSizeMd: "0.9375rem";
+        readonly fontSizeLg: "1rem";
+        readonly lineHeightTight: "1.2";
+        readonly lineHeightNormal: "1.5";
+    };
+    readonly shadow: {
+        readonly xs: "0 1px 1px rgb(15 23 42 / 0.06)";
+        readonly sm: "0 1px 2px rgb(15 23 42 / 0.08), 0 8px 24px rgb(15 23 42 / 0.04)";
+        readonly md: "0 12px 32px rgb(15 23 42 / 0.10)";
+    };
+    readonly motion: {
+        readonly durationFast: "120ms";
+        readonly durationNormal: "180ms";
+        readonly easeStandard: "cubic-bezier(0.2, 0, 0, 1)";
+    };
+    readonly zIndex: {
+        readonly base: 0;
+        readonly overlay: 40;
+        readonly modal: 50;
+        readonly toast: 60;
+    };
+};
+export declare const LIANO_LIGHT_TOKENS: {
+    readonly color: {
+        readonly background: "#ffffff";
+        readonly foreground: "#111827";
+        readonly muted: "#f8fafc";
+        readonly mutedForeground: "#64748b";
+        readonly surface: "#ffffff";
+        readonly surfaceRaised: "#ffffff";
+        readonly border: "#d9e0ea";
+        readonly borderStrong: "#b8c4d4";
+        readonly ring: "#2563eb";
+        readonly primary: "#1d4ed8";
+        readonly primaryForeground: "#ffffff";
+        readonly success: "#0f8a6a";
+        readonly warning: "#b86f00";
+        readonly destructive: "#c62828";
+        readonly info: "#087ea4";
+    };
+    readonly component: {
+        readonly controlBackground: "#ffffff";
+        readonly controlHover: "#f8fafc";
+        readonly controlActive: "#eef4ff";
+        readonly overlay: "rgb(255 255 255 / 0.96)";
+    };
+};
+export declare const LIANO_DARK_TOKENS: {
+    readonly color: {
+        readonly background: "#0d1117";
+        readonly foreground: "#f4f7fb";
+        readonly muted: "#151b23";
+        readonly mutedForeground: "#9aa8ba";
+        readonly surface: "#111821";
+        readonly surfaceRaised: "#151e2a";
+        readonly border: "#293445";
+        readonly borderStrong: "#3b4a5f";
+        readonly ring: "#69a3ff";
+        readonly primary: "#6ea2ff";
+        readonly primaryForeground: "#07101f";
+        readonly success: "#3dd6aa";
+        readonly warning: "#f5bd4f";
+        readonly destructive: "#ff6b6b";
+        readonly info: "#58d5f7";
+    };
+    readonly component: {
+        readonly controlBackground: "#111821";
+        readonly controlHover: "#172233";
+        readonly controlActive: "#1b2f50";
+        readonly overlay: "rgb(17 24 33 / 0.96)";
+    };
+};
+export declare const LIANO_DENSITY_TOKENS: {
+    readonly default: {
+        readonly controlHeightSm: "2rem";
+        readonly controlHeightMd: "2.5rem";
+        readonly controlHeightLg: "3rem";
+        readonly controlPaddingX: "0.875rem";
+        readonly controlGap: "0.5rem";
+        readonly fieldGap: "0.375rem";
+    };
+    readonly compact: {
+        readonly controlHeightSm: "1.75rem";
+        readonly controlHeightMd: "2.25rem";
+        readonly controlHeightLg: "2.625rem";
+        readonly controlPaddingX: "0.75rem";
+        readonly controlGap: "0.375rem";
+        readonly fieldGap: "0.25rem";
+    };
+    readonly comfortable: {
+        readonly controlHeightSm: "2.25rem";
+        readonly controlHeightMd: "2.75rem";
+        readonly controlHeightLg: "3.25rem";
+        readonly controlPaddingX: "1rem";
+        readonly controlGap: "0.625rem";
+        readonly fieldGap: "0.5rem";
+    };
+};

package/dist/tokens/tokens.js

@@ -0,0 +1,139 @@
+export const LIANO_TOKENS = {
+    color: {
+        white: "#ffffff",
+        black: "#0b0d12",
+        slate50: "#f8fafc",
+        slate100: "#f1f5f9",
+        slate200: "#e2e8f0",
+        slate300: "#cbd5e1",
+        slate500: "#64748b",
+        slate700: "#334155",
+        slate900: "#0f172a",
+        blue600: "#2563eb",
+        blue700: "#1d4ed8",
+        teal600: "#0d9488",
+        amber500: "#f59e0b",
+        red600: "#dc2626",
+        cyan600: "#0891b2"
+    },
+    space: {
+        0: "0",
+        1: "0.25rem",
+        2: "0.5rem",
+        3: "0.75rem",
+        4: "1rem",
+        5: "1.25rem",
+        6: "1.5rem",
+        8: "2rem",
+        10: "2.5rem"
+    },
+    radius: {
+        xs: "0.25rem",
+        sm: "0.375rem",
+        md: "0.5rem",
+        lg: "0.75rem",
+        full: "999px"
+    },
+    typography: {
+        fontFamilySans: "\"Aptos\", \"SF Pro Text\", \"Segoe UI Variable\", ui-sans-serif, system-ui, sans-serif",
+        fontFamilyMono: "\"SF Mono\", \"Cascadia Code\", ui-monospace, monospace",
+        fontSizeXs: "0.75rem",
+        fontSizeSm: "0.875rem",
+        fontSizeMd: "0.9375rem",
+        fontSizeLg: "1rem",
+        lineHeightTight: "1.2",
+        lineHeightNormal: "1.5"
+    },
+    shadow: {
+        xs: "0 1px 1px rgb(15 23 42 / 0.06)",
+        sm: "0 1px 2px rgb(15 23 42 / 0.08), 0 8px 24px rgb(15 23 42 / 0.04)",
+        md: "0 12px 32px rgb(15 23 42 / 0.10)"
+    },
+    motion: {
+        durationFast: "120ms",
+        durationNormal: "180ms",
+        easeStandard: "cubic-bezier(0.2, 0, 0, 1)"
+    },
+    zIndex: {
+        base: 0,
+        overlay: 40,
+        modal: 50,
+        toast: 60
+    }
+};
+export const LIANO_LIGHT_TOKENS = {
+    color: {
+        background: "#ffffff",
+        foreground: "#111827",
+        muted: "#f8fafc",
+        mutedForeground: "#64748b",
+        surface: "#ffffff",
+        surfaceRaised: "#ffffff",
+        border: "#d9e0ea",
+        borderStrong: "#b8c4d4",
+        ring: "#2563eb",
+        primary: "#1d4ed8",
+        primaryForeground: "#ffffff",
+        success: "#0f8a6a",
+        warning: "#b86f00",
+        destructive: "#c62828",
+        info: "#087ea4"
+    },
+    component: {
+        controlBackground: "#ffffff",
+        controlHover: "#f8fafc",
+        controlActive: "#eef4ff",
+        overlay: "rgb(255 255 255 / 0.96)"
+    }
+};
+export const LIANO_DARK_TOKENS = {
+    color: {
+        background: "#0d1117",
+        foreground: "#f4f7fb",
+        muted: "#151b23",
+        mutedForeground: "#9aa8ba",
+        surface: "#111821",
+        surfaceRaised: "#151e2a",
+        border: "#293445",
+        borderStrong: "#3b4a5f",
+        ring: "#69a3ff",
+        primary: "#6ea2ff",
+        primaryForeground: "#07101f",
+        success: "#3dd6aa",
+        warning: "#f5bd4f",
+        destructive: "#ff6b6b",
+        info: "#58d5f7"
+    },
+    component: {
+        controlBackground: "#111821",
+        controlHover: "#172233",
+        controlActive: "#1b2f50",
+        overlay: "rgb(17 24 33 / 0.96)"
+    }
+};
+export const LIANO_DENSITY_TOKENS = {
+    default: {
+        controlHeightSm: "2rem",
+        controlHeightMd: "2.5rem",
+        controlHeightLg: "3rem",
+        controlPaddingX: "0.875rem",
+        controlGap: "0.5rem",
+        fieldGap: "0.375rem"
+    },
+    compact: {
+        controlHeightSm: "1.75rem",
+        controlHeightMd: "2.25rem",
+        controlHeightLg: "2.625rem",
+        controlPaddingX: "0.75rem",
+        controlGap: "0.375rem",
+        fieldGap: "0.25rem"
+    },
+    comfortable: {
+        controlHeightSm: "2.25rem",
+        controlHeightMd: "2.75rem",
+        controlHeightLg: "3.25rem",
+        controlPaddingX: "1rem",
+        controlGap: "0.625rem",
+        fieldGap: "0.5rem"
+    }
+};

package/dist/utils/cn.d.ts

@@ -0,0 +1,2 @@
+export type LianoClassValue = string | false | null | undefined;
+export declare function cn(...values: LianoClassValue[]): string;

package/dist/utils/cn.js

@@ -0,0 +1,3 @@
+export function cn(...values) {
+    return values.filter((value) => Boolean(value)).join(" ");
+}

package/dist/utils/compose-event-handlers.d.ts

@@ -0,0 +1,6 @@
+export interface ComposeEventHandlersOptions {
+    checkDefaultPrevented?: boolean;
+}
+export declare function composeEventHandlers<EventType extends {
+    defaultPrevented: boolean;
+}>(userHandler: ((event: EventType) => void) | undefined, internalHandler: ((event: EventType) => void) | undefined, options?: ComposeEventHandlersOptions): (event: EventType) => void;

package/dist/utils/compose-event-handlers.js

@@ -0,0 +1,8 @@
+export function composeEventHandlers(userHandler, internalHandler, options = {}) {
+    return (event) => {
+        userHandler?.(event);
+        if (options.checkDefaultPrevented === false || !event.defaultPrevented) {
+            internalHandler?.(event);
+        }
+    };
+}

package/dist/utils/index.d.ts

@@ -0,0 +1,4 @@
+export { cn } from "./cn.js";
+export type { LianoClassValue } from "./cn.js";
+export { composeEventHandlers } from "./compose-event-handlers.js";
+export type { ComposeEventHandlersOptions } from "./compose-event-handlers.js";

package/dist/utils/index.js

@@ -0,0 +1,2 @@
+export { cn } from "./cn.js";
+export { composeEventHandlers } from "./compose-event-handlers.js";

package/package.json

@@ -0,0 +1,282 @@
+{
+  "name": "@zvk/ui",
+  "version": "0.1.0",
+  "description": "A polished, zero-runtime-dependency React component library for Liano applications.",
+  "private": false,
+  "type": "module",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./tokens": {
+      "types": "./dist/tokens/index.d.ts",
+      "import": "./dist/tokens/index.js"
+    },
+    "./button": {
+      "types": "./dist/components/button/index.d.ts",
+      "import": "./dist/components/button/index.js"
+    },
+    "./icon-button": {
+      "types": "./dist/components/icon-button/index.d.ts",
+      "import": "./dist/components/icon-button/index.js"
+    },
+    "./badge": {
+      "types": "./dist/components/badge/index.d.ts",
+      "import": "./dist/components/badge/index.js"
+    },
+    "./card": {
+      "types": "./dist/components/card/index.d.ts",
+      "import": "./dist/components/card/index.js"
+    },
+    "./separator": {
+      "types": "./dist/components/separator/index.d.ts",
+      "import": "./dist/components/separator/index.js"
+    },
+    "./spinner": {
+      "types": "./dist/components/spinner/index.d.ts",
+      "import": "./dist/components/spinner/index.js"
+    },
+    "./skeleton": {
+      "types": "./dist/components/skeleton/index.d.ts",
+      "import": "./dist/components/skeleton/index.js"
+    },
+    "./label": {
+      "types": "./dist/components/label/index.d.ts",
+      "import": "./dist/components/label/index.js"
+    },
+    "./progress": {
+      "types": "./dist/components/progress/index.d.ts",
+      "import": "./dist/components/progress/index.js"
+    },
+    "./alert": {
+      "types": "./dist/components/alert/index.d.ts",
+      "import": "./dist/components/alert/index.js"
+    },
+    "./avatar": {
+      "types": "./dist/components/avatar/index.d.ts",
+      "import": "./dist/components/avatar/index.js"
+    },
+    "./copy-button": {
+      "types": "./dist/components/copy-button/index.d.ts",
+      "import": "./dist/components/copy-button/index.js"
+    },
+    "./file-upload-input": {
+      "types": "./dist/components/file-upload-input/index.d.ts",
+      "import": "./dist/components/file-upload-input/index.js"
+    },
+    "./error-boundary": {
+      "types": "./dist/components/error-boundary/index.d.ts",
+      "import": "./dist/components/error-boundary/index.js"
+    },
+    "./field": {
+      "types": "./dist/components/field/index.d.ts",
+      "import": "./dist/components/field/index.js"
+    },
+    "./form": {
+      "types": "./dist/components/form/index.d.ts",
+      "import": "./dist/components/form/index.js"
+    },
+    "./input": {
+      "types": "./dist/components/input/index.d.ts",
+      "import": "./dist/components/input/index.js"
+    },
+    "./textarea": {
+      "types": "./dist/components/textarea/index.d.ts",
+      "import": "./dist/components/textarea/index.js"
+    },
+    "./checkbox": {
+      "types": "./dist/components/checkbox/index.d.ts",
+      "import": "./dist/components/checkbox/index.js"
+    },
+    "./switch": {
+      "types": "./dist/components/switch/index.d.ts",
+      "import": "./dist/components/switch/index.js"
+    },
+    "./radio-group": {
+      "types": "./dist/components/radio-group/index.d.ts",
+      "import": "./dist/components/radio-group/index.js"
+    },
+    "./slider": {
+      "types": "./dist/components/slider/index.d.ts",
+      "import": "./dist/components/slider/index.js"
+    },
+    "./toggle": {
+      "types": "./dist/components/toggle/index.d.ts",
+      "import": "./dist/components/toggle/index.js"
+    },
+    "./toggle-group": {
+      "types": "./dist/components/toggle-group/index.d.ts",
+      "import": "./dist/components/toggle-group/index.js"
+    },
+    "./select": {
+      "types": "./dist/components/select/index.d.ts",
+      "import": "./dist/components/select/index.js"
+    },
+    "./collapsible": {
+      "types": "./dist/components/collapsible/index.d.ts",
+      "import": "./dist/components/collapsible/index.js"
+    },
+    "./accordion": {
+      "types": "./dist/components/accordion/index.d.ts",
+      "import": "./dist/components/accordion/index.js"
+    },
+    "./tabs": {
+      "types": "./dist/components/tabs/index.d.ts",
+      "import": "./dist/components/tabs/index.js"
+    },
+    "./breadcrumbs": {
+      "types": "./dist/components/breadcrumbs/index.d.ts",
+      "import": "./dist/components/breadcrumbs/index.js"
+    },
+    "./pagination": {
+      "types": "./dist/components/pagination/index.d.ts",
+      "import": "./dist/components/pagination/index.js"
+    },
+    "./table": {
+      "types": "./dist/components/table/index.d.ts",
+      "import": "./dist/components/table/index.js"
+    },
+    "./empty-state": {
+      "types": "./dist/components/empty-state/index.d.ts",
+      "import": "./dist/components/empty-state/index.js"
+    },
+    "./stat": {
+      "types": "./dist/components/stat/index.d.ts",
+      "import": "./dist/components/stat/index.js"
+    },
+    "./code-block": {
+      "types": "./dist/components/code-block/index.d.ts",
+      "import": "./dist/components/code-block/index.js"
+    },
+    "./dialog": {
+      "types": "./dist/components/dialog/index.d.ts",
+      "import": "./dist/components/dialog/index.js"
+    },
+    "./popover": {
+      "types": "./dist/components/popover/index.d.ts",
+      "import": "./dist/components/popover/index.js"
+    },
+    "./tooltip": {
+      "types": "./dist/components/tooltip/index.d.ts",
+      "import": "./dist/components/tooltip/index.js"
+    },
+    "./dropdown-menu": {
+      "types": "./dist/components/dropdown-menu/index.d.ts",
+      "import": "./dist/components/dropdown-menu/index.js"
+    },
+    "./alert-dialog": {
+      "types": "./dist/components/alert-dialog/index.d.ts",
+      "import": "./dist/components/alert-dialog/index.js"
+    },
+    "./sheet": {
+      "types": "./dist/components/sheet/index.d.ts",
+      "import": "./dist/components/sheet/index.js"
+    },
+    "./scroll-area": {
+      "types": "./dist/components/scroll-area/index.d.ts",
+      "import": "./dist/components/scroll-area/index.js"
+    },
+    "./command": {
+      "types": "./dist/components/command/index.d.ts",
+      "import": "./dist/components/command/index.js"
+    },
+    "./combobox": {
+      "types": "./dist/components/combobox/index.d.ts",
+      "import": "./dist/components/combobox/index.js"
+    },
+    "./context-menu": {
+      "types": "./dist/components/context-menu/index.d.ts",
+      "import": "./dist/components/context-menu/index.js"
+    },
+    "./menubar": {
+      "types": "./dist/components/menubar/index.d.ts",
+      "import": "./dist/components/menubar/index.js"
+    },
+    "./responsive-container": {
+      "types": "./dist/components/responsive-container/index.d.ts",
+      "import": "./dist/components/responsive-container/index.js"
+    },
+    "./sidebar-shell": {
+      "types": "./dist/components/sidebar-shell/index.d.ts",
+      "import": "./dist/components/sidebar-shell/index.js"
+    },
+    "./sectioned-sidebar-nav": {
+      "types": "./dist/components/sectioned-sidebar-nav/index.d.ts",
+      "import": "./dist/components/sectioned-sidebar-nav/index.js"
+    },
+    "./tabs-with-sidebar": {
+      "types": "./dist/components/tabs-with-sidebar/index.d.ts",
+      "import": "./dist/components/tabs-with-sidebar/index.js"
+    },
+    "./toast": {
+      "types": "./dist/components/toast/index.d.ts",
+      "import": "./dist/components/toast/index.js"
+    },
+    "./conversation": {
+      "types": "./dist/components/conversation/index.d.ts",
+      "import": "./dist/components/conversation/index.js"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "import": "./dist/hooks/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "clean": "node scripts/clean.mjs",
+    "build:types": "tsc -p tsconfig.build.json",
+    "build:css": "node scripts/build-css.mjs",
+    "build": "npm run clean && npm run build:types && npm run build:css",
+    "preview": "vite --config preview/vite.config.ts",
+    "preview:host": "vite --config preview/vite.config.ts --host 127.0.0.1",
+    "preview:build": "tsc -p tsconfig.preview.json --noEmit && vite build --config preview/vite.config.ts",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run",
+    "test:unit": "vitest run src",
+    "test:ssr": "vitest run tests/ssr --environment node",
+    "test:exports": "vitest run tests/exports --environment node",
+    "test:accessibility": "vitest run tests/accessibility",
+    "test:types": "tsd",
+    "docs:lint": "node scripts/lint-docs.mjs",
+    "verify:style-contract": "node scripts/verify-style-contract.mjs",
+    "validate:exports": "node scripts/validate-exports.mjs",
+    "tarball:inspect": "node scripts/check-tarball.mjs",
+    "pack:dry": "npm pack --dry-run",
+    "preflight": "npm run typecheck && npm run build && npm run test:unit && npm run test:ssr && npm run test:types && npm run test:exports && npm run test:accessibility && npm run docs:lint && npm run verify:style-contract && npm run validate:exports && npm run tarball:inspect"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {},
+  "tsd": {
+    "directory": "tests/types"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^25.9.1",
+    "@types/react": "^19.2.16",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.2",
+    "jsdom": "^28.1.0",
+    "tsd": "^0.33.0",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16",
+    "vitest": "^4.1.8"
+  }
+}