czero 0.1.0 → 0.2.0

package/dist/cli-new/cli/index.js

@@ -0,0 +1,288 @@
+#!/usr/bin/env node
+/**
+ * CZero CLI
+ * Generates CSS from user's theme configuration
+ *
+ * Usage: npx czero build [--config czero.config.js] [--output czero.css]
+ */
+import * as fs from "fs";
+import * as path from "path";
+import { fileURLToPath } from "url";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+// Default theme values (fallback if user doesn't specify)
+const defaultTheme = {
+    color: {
+        bg: { light: "0 0% 100%", dark: "220 40% 3%" },
+        fg: { light: "220 15% 10%", dark: "210 40% 96%" },
+        primary: { light: "222 47% 45%", dark: "210 80% 65%" },
+        primaryFg: { light: "0 0% 100%", dark: "220 40% 3%" },
+        secondary: { light: "220 10% 95%", dark: "220 8% 25%" },
+        secondaryFg: { light: "220 15% 10%", dark: "210 40% 96%" },
+        muted: { light: "220 10% 95%", dark: "220 8% 20%" },
+        mutedFg: { light: "220 10% 40%", dark: "220 10% 60%" },
+        danger: { light: "0 70% 55%", dark: "0 80% 65%" },
+        dangerFg: { light: "0 0% 100%", dark: "0 0% 100%" },
+        success: { light: "142 70% 45%", dark: "142 70% 55%" },
+        successFg: { light: "0 0% 100%", dark: "0 0% 100%" },
+        warning: { light: "38 92% 50%", dark: "38 92% 60%" },
+        warningFg: { light: "0 0% 100%", dark: "0 0% 0%" },
+        border: { light: "220 13% 90%", dark: "220 10% 20%" },
+        ring: { light: "222 47% 45%", dark: "210 80% 65%" },
+    },
+    radius: {
+        none: "0",
+        sm: "0.25rem",
+        md: "0.5rem",
+        lg: "0.75rem",
+        xl: "1rem",
+        full: "9999px",
+    },
+    shadow: {
+        none: "none",
+        sm: "0 1px 2px rgb(0 0 0 / 0.05)",
+        md: "0 2px 4px rgb(0 0 0 / 0.08)",
+        lg: "0 4px 12px rgb(0 0 0 / 0.12)",
+    },
+    spacing: {
+        xs: "0.25rem",
+        sm: "0.5rem",
+        md: "0.75rem",
+        lg: "1rem",
+        xl: "1.5rem",
+        "2xl": "2rem",
+    },
+    typography: {
+        fontFamily: "Inter, system-ui, -apple-system, sans-serif",
+        size: { xs: "0.75rem", sm: "0.875rem", md: "1rem", lg: "1.125rem", xl: "1.25rem" },
+        weight: { normal: "400", medium: "500", semibold: "600", bold: "700" },
+        lineHeight: { tight: "1.25", normal: "1.5", relaxed: "1.75" },
+    },
+    transition: { fast: "150ms ease", normal: "200ms ease", slow: "300ms ease" },
+};
+function deepMerge(target, source) {
+    const result = { ...target };
+    for (const key of Object.keys(source)) {
+        if (source[key] && typeof source[key] === "object" && !Array.isArray(source[key])) {
+            result[key] = deepMerge(target[key] || {}, source[key]);
+        }
+        else {
+            result[key] = source[key];
+        }
+    }
+    return result;
+}
+function generateTokensCSS(theme) {
+    const lightVars = [];
+    const darkVars = [];
+    // Colors
+    for (const [name, values] of Object.entries(theme.color)) {
+        if (typeof values === "object" && "light" in values) {
+            lightVars.push(`  --cz-color-${name}: ${values.light};`);
+            darkVars.push(`  --cz-color-${name}: ${values.dark};`);
+        }
+    }
+    // Radius
+    for (const [name, value] of Object.entries(theme.radius)) {
+        lightVars.push(`  --cz-radius-${name}: ${value};`);
+    }
+    // Shadow
+    for (const [name, value] of Object.entries(theme.shadow)) {
+        lightVars.push(`  --cz-shadow-${name}: ${value};`);
+    }
+    // Spacing
+    for (const [name, value] of Object.entries(theme.spacing)) {
+        lightVars.push(`  --cz-spacing-${name}: ${value};`);
+    }
+    // Typography
+    lightVars.push(`  --cz-font-fontFamily: ${theme.typography.fontFamily};`);
+    for (const [name, value] of Object.entries(theme.typography.size)) {
+        lightVars.push(`  --cz-font-size-${name}: ${value};`);
+    }
+    for (const [name, value] of Object.entries(theme.typography.weight)) {
+        lightVars.push(`  --cz-font-weight-${name}: ${value};`);
+    }
+    for (const [name, value] of Object.entries(theme.typography.lineHeight)) {
+        lightVars.push(`  --cz-font-lineHeight-${name}: ${value};`);
+    }
+    // Transitions
+    for (const [name, value] of Object.entries(theme.transition)) {
+        lightVars.push(`  --cz-transition-${name}: ${value};`);
+    }
+    return `/**
+ * CZero Design Tokens
+ * Generated from czero.config.js
+ */
+
+:root {
+${lightVars.join("\n")}
+}
+
+.dark {
+${darkVars.join("\n")}
+}
+`;
+}
+function getComponentsCSS() {
+    // Try multiple possible locations
+    const possiblePaths = [
+        path.join(__dirname, "components.css"), // dist/cli/../components.css = dist/components.css
+        path.join(__dirname, "../components.css"), // dist/components.css
+        path.join(__dirname, "../dist/components.css"), // from root
+        path.join(__dirname, "../../dist/components.css"), // from cli folder
+        path.join(__dirname, "../src/core/styles/components.css"), // dev mode
+        path.join(__dirname, "../../src/core/styles/components.css"), // dev mode from cli
+    ];
+    for (const p of possiblePaths) {
+        if (fs.existsSync(p)) {
+            return fs.readFileSync(p, "utf-8");
+        }
+    }
+    console.error("Error: Could not find components.css");
+    console.error("Searched paths:", possiblePaths);
+    process.exit(1);
+}
+function getResetCSS() {
+    const possiblePaths = [
+        path.join(__dirname, "reset.css"),
+        path.join(__dirname, "../reset.css"),
+        path.join(__dirname, "../dist/reset.css"),
+        path.join(__dirname, "../../dist/reset.css"),
+        path.join(__dirname, "../src/core/styles/reset.css"),
+        path.join(__dirname, "../../src/core/styles/reset.css"),
+    ];
+    for (const p of possiblePaths) {
+        if (fs.existsSync(p)) {
+            return fs.readFileSync(p, "utf-8");
+        }
+    }
+    // Minimal fallback reset
+    return `*, *::before, *::after { box-sizing: border-box; }
+* { margin: 0; }
+body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
+button, input, textarea, select { font: inherit; }
+`;
+}
+async function loadUserConfig(configPath) {
+    const absolutePath = path.resolve(process.cwd(), configPath);
+    if (!fs.existsSync(absolutePath)) {
+        console.log(`No config found at ${configPath}, using defaults...`);
+        return {};
+    }
+    try {
+        // Import the config file
+        const config = await import(`file://${absolutePath}`);
+        return config.default || config.theme || config;
+    }
+    catch (error) {
+        console.error(`Error loading config: ${error}`);
+        return {};
+    }
+}
+async function main() {
+    const args = process.argv.slice(2);
+    // Parse arguments
+    let configPath = "czero.config.js";
+    let outputPath = "czero.css";
+    let useNewSystem = false; // Flag for new generator-based system
+    let legacyMode = false;
+    for (let i = 0; i < args.length; i++) {
+        if (args[i] === "--config" && args[i + 1]) {
+            configPath = args[i + 1];
+            i++;
+        }
+        else if (args[i] === "--output" && args[i + 1]) {
+            outputPath = args[i + 1];
+            i++;
+        }
+        else if (args[i] === "--new" || args[i] === "--v2") {
+            useNewSystem = true;
+        }
+        else if (args[i] === "--legacy") {
+            legacyMode = true;
+        }
+        else if (args[i] === "build") {
+            // Just the build command, continue
+        }
+        else if (args[i] === "--help" || args[i] === "-h") {
+            console.log(`
+CZero CLI - Generate CSS from your theme configuration
+
+Usage:
+  npx czero build [options]
+
+Options:
+  --config <path>   Path to config file (default: czero.config.js)
+  --output <path>   Output CSS file path (default: czero.css)
+  --new, --v2       Use new generator-based system (supports component tokens)
+  --legacy          Force legacy mode (no component generation)
+  --help, -h        Show this help message
+
+Example:
+  npx czero build --config my-theme.js --output src/styles/czero.css
+  npx czero build --new --config czero.config.js --output dist/czero.css
+`);
+            process.exit(0);
+        }
+    }
+    console.log("🎨 CZero CSS Generator");
+    console.log(`   Config: ${configPath}`);
+    console.log(`   Output: ${outputPath}`);
+    console.log(`   Mode: ${useNewSystem ? "v2 (generators)" : "v1 (legacy)"}`);
+    console.log("");
+    // Load user config and merge with defaults
+    const userConfig = await loadUserConfig(configPath);
+    const theme = deepMerge(defaultTheme, userConfig);
+    // Generate CSS
+    const resetCSS = getResetCSS();
+    const tokensCSS = generateTokensCSS(theme);
+    let componentsCSS;
+    if (useNewSystem && !legacyMode) {
+        // New generator-based system
+        try {
+            const { buildComponentsCSS } = await import("./build-css.js");
+            const { generateUtilitiesCSS } = await import("./generators/index.js");
+            console.log("   Using v2 generator system...");
+            // Generate component CSS from config
+            componentsCSS = buildComponentsCSS(userConfig);
+            // Add utilities
+            componentsCSS += "\n" + generateUtilitiesCSS();
+            // Add remaining components from legacy CSS (those not yet migrated)
+            const legacyCSS = getLegacyComponentsCSS();
+            componentsCSS += "\n" + legacyCSS;
+        }
+        catch (err) {
+            console.warn("⚠️  Failed to load new system, falling back to legacy mode");
+            console.warn(`   Error: ${err}`);
+            componentsCSS = getComponentsCSS();
+        }
+    }
+    else {
+        // Legacy mode - use static CSS file
+        componentsCSS = getComponentsCSS();
+    }
+    const finalCSS = `${resetCSS}
+${tokensCSS}
+${componentsCSS}`;
+    // Write output
+    fs.writeFileSync(outputPath, finalCSS);
+    console.log(`✅ Generated ${outputPath}`);
+    console.log(`   ${finalCSS.split("\n").length} lines`);
+}
+/**
+ * Get legacy components CSS, excluding migrated components
+ */
+function getLegacyComponentsCSS() {
+    const componentsCSS = getComponentsCSS();
+    // Components that are now generated - their CSS should be excluded
+    const migratedComponents = ["BUTTON", "INPUT", "CARD", "SWITCH", "CHECKBOX"];
+    let result = componentsCSS;
+    // Remove sections for migrated components
+    for (const component of migratedComponents) {
+        // Match /* ===== BUTTON ===== */ sections
+        const sectionRegex = new RegExp(`\\/\\*\\s*=====\\s*${component}\\s*=====\\s*\\*\\/[\\s\\S]*?(?=\\/\\*\\s*=====|$)`, "g");
+        result = result.replace(sectionRegex, "");
+    }
+    return result;
+}
+main().catch(console.error);

package/dist/cli-new/cli/token-resolver.d.ts

@@ -0,0 +1,44 @@
+/**
+ * CZero Token Resolver
+ * Parses $token-name syntax and resolves to CSS variable references
+ */
+/**
+ * Resolve a token value to its CSS equivalent
+ *
+ * Examples:
+ * - "$color-primary" → "hsl(var(--cz-color-primary))"
+ * - "$radius-md" → "var(--cz-radius-md)"
+ * - "$font-sm" → "var(--cz-font-size-sm)"
+ * - "0.5rem" → "0.5rem" (literal, no change)
+ * - "$color-primary / 0.5" → "hsl(var(--cz-color-primary) / 0.5)"
+ */
+export declare function resolveToken(value: string | undefined): string;
+/**
+ * Resolve all token references in a styles object
+ */
+export declare function resolveTokensInObject<T extends Record<string, any>>(obj: T, colorProperties?: string[]): T;
+/**
+ * Generate CSS variable declaration
+ */
+export declare function cssVar(name: string, value: string): string;
+/**
+ * Generate CSS variable reference
+ */
+export declare function cssVarRef(name: string): string;
+/**
+ * Check if a value is a token reference
+ */
+export declare function isTokenReference(value: string): boolean;
+/**
+ * Convert camelCase to kebab-case
+ */
+export declare function toKebabCase(str: string): string;
+/**
+ * Convert component property name to CSS variable name
+ *
+ * Examples:
+ * - ("button", "paddingX", "sm") → "--cz-btn-padding-x-sm"
+ * - ("button", "height", "md") → "--cz-btn-height-md"
+ * - ("input", "borderRadius") → "--cz-input-border-radius"
+ */
+export declare function componentVarName(component: string, property: string, size?: string): string;

package/dist/cli-new/cli/token-resolver.js

@@ -0,0 +1,137 @@
+/**
+ * CZero Token Resolver
+ * Parses $token-name syntax and resolves to CSS variable references
+ */
+/**
+ * Resolve a token value to its CSS equivalent
+ *
+ * Examples:
+ * - "$color-primary" → "hsl(var(--cz-color-primary))"
+ * - "$radius-md" → "var(--cz-radius-md)"
+ * - "$font-sm" → "var(--cz-font-size-sm)"
+ * - "0.5rem" → "0.5rem" (literal, no change)
+ * - "$color-primary / 0.5" → "hsl(var(--cz-color-primary) / 0.5)"
+ */
+export function resolveToken(value) {
+    if (!value)
+        return "";
+    // If it doesn't start with $, return as-is (literal value)
+    if (!value.startsWith("$")) {
+        return value;
+    }
+    // Handle opacity syntax: "$color-primary / 0.5"
+    const opacityMatch = value.match(/^\$([a-zA-Z-]+)\s*\/\s*(.+)$/);
+    if (opacityMatch) {
+        const [, tokenName, opacity] = opacityMatch;
+        const cssVar = tokenNameToCssVar(tokenName);
+        // Color tokens need hsl() wrapper
+        if (tokenName.startsWith("color-")) {
+            return `hsl(var(${cssVar}) / ${opacity})`;
+        }
+        return `var(${cssVar}) / ${opacity}`;
+    }
+    // Simple token reference: "$color-primary"
+    const tokenName = value.slice(1); // Remove $
+    const cssVar = tokenNameToCssVar(tokenName);
+    // Color tokens need hsl() wrapper
+    if (tokenName.startsWith("color-")) {
+        return `hsl(var(${cssVar}))`;
+    }
+    return `var(${cssVar})`;
+}
+/**
+ * Convert token name to CSS variable name
+ *
+ * Examples:
+ * - "color-primary" → "--cz-color-primary"
+ * - "font-sm" → "--cz-font-size-sm"
+ * - "font-medium" → "--cz-font-weight-medium"
+ * - "radius-md" → "--cz-radius-md"
+ * - "spacing-lg" → "--cz-spacing-lg"
+ * - "transition-fast" → "--cz-transition-fast"
+ */
+function tokenNameToCssVar(tokenName) {
+    // Handle font shorthand tokens
+    if (tokenName.startsWith("font-")) {
+        const fontPart = tokenName.slice(5); // Remove "font-"
+        // Size tokens: xs, sm, md, lg, xl
+        if (["xs", "sm", "md", "lg", "xl"].includes(fontPart)) {
+            return `--cz-font-size-${fontPart}`;
+        }
+        // Weight tokens: normal, medium, semibold, bold
+        if (["normal", "medium", "semibold", "bold"].includes(fontPart)) {
+            return `--cz-font-weight-${fontPart}`;
+        }
+        // Line height tokens: tight, normal, relaxed
+        if (["tight", "relaxed"].includes(fontPart)) {
+            return `--cz-font-lineHeight-${fontPart}`;
+        }
+        // Default: pass through
+        return `--cz-font-${fontPart}`;
+    }
+    return `--cz-${tokenName}`;
+}
+/**
+ * Resolve all token references in a styles object
+ */
+export function resolveTokensInObject(obj, colorProperties = ["bg", "color", "borderColor", "indicatorColor", "thumbBg", "trackColor"]) {
+    const result = {};
+    for (const [key, value] of Object.entries(obj)) {
+        if (typeof value === "string") {
+            result[key] = resolveToken(value);
+        }
+        else if (typeof value === "object" && value !== null) {
+            result[key] = resolveTokensInObject(value, colorProperties);
+        }
+        else {
+            result[key] = value;
+        }
+    }
+    return result;
+}
+/**
+ * Generate CSS variable declaration
+ */
+export function cssVar(name, value) {
+    return `  --cz-${name}: ${value};`;
+}
+/**
+ * Generate CSS variable reference
+ */
+export function cssVarRef(name) {
+    return `var(--cz-${name})`;
+}
+/**
+ * Check if a value is a token reference
+ */
+export function isTokenReference(value) {
+    return value.startsWith("$");
+}
+/**
+ * Convert camelCase to kebab-case
+ */
+export function toKebabCase(str) {
+    return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+/**
+ * Convert component property name to CSS variable name
+ *
+ * Examples:
+ * - ("button", "paddingX", "sm") → "--cz-btn-padding-x-sm"
+ * - ("button", "height", "md") → "--cz-btn-height-md"
+ * - ("input", "borderRadius") → "--cz-input-border-radius"
+ */
+export function componentVarName(component, property, size) {
+    // Component shorthand mapping
+    const componentShorthand = {
+        button: "btn",
+        dropdownMenu: "dropdown",
+        scrollArea: "scroll",
+    };
+    const compName = componentShorthand[component] || component;
+    const propName = toKebabCase(property);
+    if (size) {
+        return `--cz-${compName}-${propName}-${size}`;
+    }
+    return `--cz-${compName}-${propName}`;
+}

package/dist/cli-new/cli/utils/deep-merge.d.ts

@@ -0,0 +1,15 @@
+/**
+ * CZero Deep Merge Utility
+ * Properly merges nested config objects
+ */
+/**
+ * Deep merge two objects, with source values overriding target
+ * - Objects are recursively merged
+ * - Arrays are replaced (not merged)
+ * - Null/undefined in source removes the target value
+ */
+export declare function deepMerge<T extends Record<string, any>>(target: T, source: Partial<T>): T;
+/**
+ * Deep merge multiple objects (left to right)
+ */
+export declare function deepMergeAll<T extends Record<string, any>>(...objects: Partial<T>[]): T;

package/dist/cli-new/cli/utils/deep-merge.js

@@ -0,0 +1,41 @@
+/**
+ * CZero Deep Merge Utility
+ * Properly merges nested config objects
+ */
+/**
+ * Deep merge two objects, with source values overriding target
+ * - Objects are recursively merged
+ * - Arrays are replaced (not merged)
+ * - Null/undefined in source removes the target value
+ */
+export function deepMerge(target, source) {
+    const result = { ...target };
+    for (const key of Object.keys(source)) {
+        const sourceValue = source[key];
+        const targetValue = target[key];
+        // If source explicitly sets null/undefined, use it
+        if (sourceValue === null || sourceValue === undefined) {
+            result[key] = sourceValue;
+            continue;
+        }
+        // If both are objects (not arrays), merge recursively
+        if (typeof sourceValue === "object" &&
+            !Array.isArray(sourceValue) &&
+            typeof targetValue === "object" &&
+            !Array.isArray(targetValue) &&
+            targetValue !== null) {
+            result[key] = deepMerge(targetValue, sourceValue);
+        }
+        else {
+            // Otherwise, source value wins
+            result[key] = sourceValue;
+        }
+    }
+    return result;
+}
+/**
+ * Deep merge multiple objects (left to right)
+ */
+export function deepMergeAll(...objects) {
+    return objects.reduce((acc, obj) => deepMerge(acc, obj), {});
+}

package/dist/cli-new/cli/validate-config.d.ts

@@ -0,0 +1,19 @@
+/**
+ * CZero Config Validator
+ * Validates user configuration and provides helpful error messages
+ */
+import type { CZeroConfig } from "../src/core/types/config";
+export interface ValidationResult {
+    valid: boolean;
+    warnings: string[];
+    errors: string[];
+    config: CZeroConfig;
+}
+/**
+ * Validate user config and return normalized version
+ */
+export declare function validateConfig(config: unknown): ValidationResult;
+/**
+ * Print validation results to console
+ */
+export declare function printValidationResults(result: ValidationResult): void;