czero 0.2.0 → 0.2.5

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

@@ -1,19 +0,0 @@
-/**
- * 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;

package/dist/cli-new/cli/validate-config.js

@@ -1,151 +0,0 @@
-/**
- * CZero Config Validator
- * Validates user configuration and provides helpful error messages
- */
-/**
- * Validate user config and return normalized version
- */
-export function validateConfig(config) {
-    const warnings = [];
-    const errors = [];
-    if (typeof config !== "object" || config === null) {
-        return {
-            valid: true,
-            warnings: ["Config is empty, using defaults"],
-            errors: [],
-            config: {},
-        };
-    }
-    const validConfig = config;
-    // Valid top-level keys
-    const validTopLevelKeys = [
-        "color",
-        "radius",
-        "shadow",
-        "spacing",
-        "typography",
-        "transition",
-        "breakpoints",
-        "components",
-        "customCSS",
-    ];
-    // Check for unknown top-level keys
-    for (const key of Object.keys(validConfig)) {
-        if (!validTopLevelKeys.includes(key)) {
-            warnings.push(`Unknown config key: "${key}" (will be ignored)`);
-        }
-    }
-    // Validate components section
-    if (validConfig.components) {
-        const componentResult = validateComponents(validConfig.components);
-        warnings.push(...componentResult.warnings);
-        errors.push(...componentResult.errors);
-    }
-    // Validate color tokens
-    if (validConfig.color) {
-        const colorResult = validateColorTokens(validConfig.color);
-        warnings.push(...colorResult.warnings);
-        errors.push(...colorResult.errors);
-    }
-    // Validate customCSS
-    if (validConfig.customCSS) {
-        const customCSSResult = validateCustomCSS(validConfig.customCSS);
-        warnings.push(...customCSSResult.warnings);
-        errors.push(...customCSSResult.errors);
-    }
-    return {
-        valid: errors.length === 0,
-        warnings,
-        errors,
-        config: validConfig,
-    };
-}
-/**
- * Validate components configuration
- */
-function validateComponents(components) {
-    const warnings = [];
-    const errors = [];
-    if (typeof components !== "object" || components === null) {
-        errors.push("components must be an object");
-        return { warnings, errors };
-    }
-    const validComponents = [
-        "button", "input", "textarea", "card", "badge", "switch", "checkbox",
-        "radio", "select", "label", "alert", "tooltip", "progress", "skeleton",
-        "spinner", "tabs", "dialog", "dropdownMenu", "accordion", "table",
-        "avatar", "separator", "breadcrumb", "code", "kbd", "tag", "toast",
-        "scrollArea", "container", "stack", "grid"
-    ];
-    for (const key of Object.keys(components)) {
-        if (!validComponents.includes(key)) {
-            warnings.push(`Unknown component: "${key}" (will be ignored)`);
-        }
-    }
-    return { warnings, errors };
-}
-/**
- * Validate color tokens
- */
-function validateColorTokens(color) {
-    const warnings = [];
-    const errors = [];
-    if (typeof color !== "object" || color === null) {
-        errors.push("color must be an object");
-        return { warnings, errors };
-    }
-    const colorObj = color;
-    for (const [name, value] of Object.entries(colorObj)) {
-        if (typeof value === "object" && value !== null) {
-            const colorValue = value;
-            if (!("light" in colorValue) || !("dark" in colorValue)) {
-                errors.push(`Color "${name}" must have both "light" and "dark" values`);
-            }
-        }
-        else {
-            errors.push(`Color "${name}" must be an object with "light" and "dark" values`);
-        }
-    }
-    return { warnings, errors };
-}
-/**
- * Validate custom CSS injection
- */
-function validateCustomCSS(customCSS) {
-    const warnings = [];
-    const errors = [];
-    if (typeof customCSS !== "object" || customCSS === null) {
-        errors.push("customCSS must be an object with 'before' and/or 'after' string properties");
-        return { warnings, errors };
-    }
-    const css = customCSS;
-    if (css.before && typeof css.before !== "string") {
-        errors.push("customCSS.before must be a string");
-    }
-    if (css.after && typeof css.after !== "string") {
-        errors.push("customCSS.after must be a string");
-    }
-    // Check for common CSS errors in custom CSS
-    const customCSSString = `${css.before || ""}${css.after || ""}`;
-    if (customCSSString.includes("{{") || customCSSString.includes("}}")) {
-        warnings.push("customCSS contains template syntax ({{ }}) which won't be processed");
-    }
-    return { warnings, errors };
-}
-/**
- * Print validation results to console
- */
-export function printValidationResults(result) {
-    if (result.warnings.length > 0) {
-        console.log("⚠️  Warnings:");
-        for (const warning of result.warnings) {
-            console.log(`   • ${warning}`);
-        }
-    }
-    if (result.errors.length > 0) {
-        console.log("❌ Errors:");
-        for (const error of result.errors) {
-            console.log(`   • ${error}`);
-        }
-    }
-}

package/dist/cli-new/src/core/component-defaults.d.ts

@@ -1,7 +0,0 @@
-/**
- * CZero Component Default Tokens
- * Default values extracted from components.css
- * Users can override any of these in their czero.config.js
- */
-import type { ComponentsConfig } from "./types/config";
-export declare const componentDefaults: ComponentsConfig;

package/dist/cli-new/src/core/component-defaults.js

@@ -1,467 +0,0 @@
-/**
- * CZero Component Default Tokens
- * Default values extracted from components.css
- * Users can override any of these in their czero.config.js
- */
-export const componentDefaults = {
-    // ===== BUTTON =====
-    button: {
-        height: { sm: "2rem", md: "2.5rem", lg: "3rem" },
-        paddingX: { sm: "0.75rem", md: "1rem", lg: "1.5rem" },
-        gap: "0.5rem",
-        fontSize: { sm: "$font-sm", md: "$font-md", lg: "$font-lg" },
-        fontWeight: "$font-medium",
-        borderRadius: "$radius-md",
-        borderWidth: "1px",
-        iconSize: { sm: "2rem", md: "2.5rem", lg: "3rem" },
-        transition: "$transition-fast",
-        states: {
-            hover: { opacity: "0.9" },
-            focus: { ringWidth: "2px", ringOffset: "2px", ringColor: "$color-ring" },
-            disabled: { opacity: "0.5" },
-        },
-        variants: {
-            primary: {
-                bg: "$color-primary",
-                color: "$color-primaryFg",
-                borderColor: "transparent",
-                hover: { opacity: "0.9" },
-            },
-            secondary: {
-                bg: "$color-secondary",
-                color: "$color-secondaryFg",
-                borderColor: "transparent",
-                hover: { opacity: "0.8" },
-            },
-            outline: {
-                bg: "transparent",
-                color: "$color-fg",
-                borderColor: "$color-border",
-                hover: { bg: "$color-muted" },
-            },
-            ghost: {
-                bg: "transparent",
-                color: "$color-fg",
-                borderColor: "transparent",
-                hover: { bg: "$color-muted" },
-            },
-            danger: {
-                bg: "$color-danger",
-                color: "$color-dangerFg",
-                borderColor: "transparent",
-                hover: { opacity: "0.9" },
-            },
-            link: {
-                bg: "transparent",
-                color: "$color-primary",
-                borderColor: "transparent",
-                textDecoration: "underline",
-            },
-        },
-        animations: {
-            loading: { duration: "0.75s", timing: "linear" },
-        },
-    },
-    // ===== INPUT =====
-    input: {
-        height: { sm: "2rem", md: "2.5rem", lg: "3rem" },
-        paddingX: { sm: "0.5rem", md: "0.75rem", lg: "1rem" },
-        fontSize: { sm: "$font-sm", md: "$font-md", lg: "$font-lg" },
-        borderRadius: "$radius-md",
-        borderWidth: "1px",
-        borderColor: "$color-border",
-        bg: "$color-bg",
-        color: "$color-fg",
-        placeholderColor: "$color-mutedFg",
-        iconSize: "1rem",
-        iconColor: "$color-mutedFg",
-        iconSpacing: "2.5rem",
-        states: {
-            focus: {
-                borderColor: "$color-ring",
-                shadow: "0 0 0 2px $color-ring / 0.2",
-            },
-            error: {
-                borderColor: "$color-danger",
-                focusShadow: "0 0 0 2px $color-danger / 0.2",
-            },
-            disabled: { opacity: "0.5", cursor: "not-allowed" },
-        },
-    },
-    // ===== TEXTAREA =====
-    textarea: {
-        minHeight: "5rem",
-        paddingX: { sm: "0.5rem", md: "0.75rem", lg: "1rem" },
-        paddingY: { sm: "0.375rem", md: "0.5rem", lg: "0.75rem" },
-        fontSize: { sm: "$font-sm", md: "$font-md", lg: "$font-lg" },
-        borderRadius: "$radius-md",
-        borderWidth: "1px",
-        borderColor: "$color-border",
-        bg: "$color-bg",
-        color: "$color-fg",
-        placeholderColor: "$color-mutedFg",
-        states: {
-            focus: {
-                borderColor: "$color-ring",
-                shadow: "0 0 0 2px $color-ring / 0.2",
-            },
-            disabled: { opacity: "0.5" },
-        },
-    },
-    // ===== CARD =====
-    card: {
-        padding: "$spacing-lg",
-        borderRadius: "$radius-lg",
-        borderWidth: "1px",
-        borderColor: "$color-border",
-        bg: "$color-bg",
-        shadow: "$shadow-sm",
-        header: {
-            paddingBottom: "$spacing-md",
-            borderWidth: "1px",
-            marginBottom: "$spacing-md",
-        },
-        title: {
-            fontSize: "$font-lg",
-            fontWeight: "$font-semibold",
-            color: "$color-fg",
-        },
-        description: {
-            fontSize: "$font-sm",
-            color: "$color-mutedFg",
-        },
-        footer: {
-            paddingTop: "$spacing-md",
-            marginTop: "$spacing-md",
-            borderWidth: "1px",
-            gap: "0.5rem",
-        },
-    },
-    // ===== BADGE =====
-    badge: {
-        paddingX: { sm: "0.375rem", md: "0.5rem" },
-        paddingY: { sm: "0.125rem", md: "0.125rem" },
-        fontSize: { sm: "0.7rem", md: "$font-xs" },
-        fontWeight: "$font-medium",
-        borderRadius: "$radius-full",
-        variants: {
-            default: { bg: "$color-secondary", color: "$color-secondaryFg" },
-            primary: { bg: "$color-primary", color: "$color-primaryFg" },
-            success: { bg: "$color-success", color: "$color-successFg" },
-            danger: { bg: "$color-danger", color: "$color-dangerFg" },
-            warning: { bg: "$color-warning", color: "$color-warningFg" },
-            outline: { bg: "transparent", color: "$color-fg", borderColor: "$color-border" },
-        },
-    },
-    // ===== SWITCH =====
-    switch: {
-        width: { sm: "2rem", md: "2.75rem", lg: "3.5rem" },
-        height: { sm: "1.125rem", md: "1.5rem", lg: "1.875rem" },
-        thumbSize: { sm: "0.875rem", md: "1.25rem", lg: "1.625rem" },
-        thumbOffset: "0.125rem",
-        borderRadius: "$radius-full",
-        bgUnchecked: "$color-muted",
-        bgChecked: "$color-primary",
-        thumbBg: "$color-bg",
-        thumbShadow: "$shadow-sm",
-        transition: "$transition-fast",
-        states: {
-            focus: { ringWidth: "2px", ringOffset: "2px", ringColor: "$color-ring" },
-            disabled: { opacity: "0.5" },
-        },
-    },
-    // ===== CHECKBOX =====
-    checkbox: {
-        size: { sm: "1rem", md: "1.25rem", lg: "1.5rem" },
-        iconSize: { sm: "10px", md: "12px", lg: "14px" },
-        borderRadius: "$radius-sm",
-        borderWidth: "2px",
-        borderColor: "$color-border",
-        bg: "$color-bg",
-        checkedBg: "$color-primary",
-        checkedBorderColor: "$color-primary",
-        indicatorColor: "$color-primaryFg",
-        labelFontSize: "$font-sm",
-        labelGap: "0.5rem",
-        states: {
-            hover: { borderColor: "$color-primary" },
-            focus: { ringWidth: "2px", ringOffset: "2px", ringColor: "$color-ring" },
-            disabled: { opacity: "0.5" },
-        },
-    },
-    // ===== RADIO =====
-    radio: {
-        size: "1.25rem",
-        indicatorSize: "0.625rem",
-        borderWidth: "2px",
-        borderColor: "$color-border",
-        bg: "$color-bg",
-        checkedBorderColor: "$color-primary",
-        indicatorBg: "$color-primary",
-        labelFontSize: "$font-sm",
-        labelGap: "0.5rem",
-        states: {
-            hover: { borderColor: "$color-primary" },
-            focus: { ringWidth: "2px", ringOffset: "2px", ringColor: "$color-ring" },
-            disabled: { opacity: "0.5" },
-        },
-    },
-    // ===== SELECT =====
-    select: {
-        height: { sm: "2rem", md: "2.5rem", lg: "3rem" },
-        paddingX: { sm: "0.5rem", md: "0.75rem", lg: "1rem" },
-        fontSize: { sm: "$font-sm", md: "$font-md", lg: "$font-lg" },
-        borderRadius: "$radius-md",
-        borderWidth: "1px",
-        borderColor: "$color-border",
-        bg: "$color-bg",
-        color: "$color-fg",
-        iconSize: "12px",
-        states: {
-            focus: { ringWidth: "2px", ringColor: "$color-ring" },
-            disabled: { opacity: "0.5" },
-        },
-        content: {
-            bg: "$color-bg",
-            borderRadius: "$radius-md",
-            shadow: "$shadow-md",
-            padding: "0.25rem",
-        },
-        item: {
-            paddingX: "0.5rem",
-            paddingY: "0.375rem",
-            borderRadius: "$radius-sm",
-            hoverBg: "$color-muted",
-        },
-    },
-    // ===== LABEL =====
-    label: {
-        fontSize: "$font-sm",
-        fontWeight: "$font-medium",
-        color: "$color-fg",
-        requiredColor: "$color-danger",
-    },
-    // ===== ALERT =====
-    alert: {
-        paddingX: "$spacing-lg",
-        paddingY: "$spacing-md",
-        borderRadius: "$radius-md",
-        borderWidth: "1px",
-        titleFontSize: "$font-sm",
-        titleFontWeight: "$font-semibold",
-        contentFontSize: "$font-sm",
-        variants: {
-            info: { bg: "$color-primary / 0.1", borderColor: "$color-primary / 0.3", color: "$color-primary" },
-            success: { bg: "$color-success / 0.1", borderColor: "$color-success / 0.3", color: "$color-success" },
-            warning: { bg: "$color-warning / 0.1", borderColor: "$color-warning / 0.3", color: "$color-warning" },
-            danger: { bg: "$color-danger / 0.1", borderColor: "$color-danger / 0.3", color: "$color-danger" },
-        },
-    },
-    // ===== TOOLTIP =====
-    tooltip: {
-        paddingX: "0.75rem",
-        paddingY: "0.375rem",
-        fontSize: "$font-sm",
-        borderRadius: "$radius-md",
-        bg: "$color-fg",
-        color: "$color-bg",
-        shadow: "$shadow-md",
-        offset: "0.5rem",
-    },
-    // ===== PROGRESS =====
-    progress: {
-        height: { sm: "0.375rem", md: "0.5rem", lg: "0.75rem" },
-        borderRadius: "$radius-full",
-        bg: "$color-muted",
-        barColors: {
-            default: "$color-primary",
-            success: "$color-success",
-            warning: "$color-warning",
-            danger: "$color-danger",
-        },
-        transition: "$transition-normal",
-    },
-    // ===== SKELETON =====
-    skeleton: {
-        bg: "$color-muted",
-        borderRadius: "$radius-sm",
-        animationDuration: "1.5s",
-    },
-    // ===== SPINNER =====
-    spinner: {
-        size: { sm: "1rem", md: "1.5rem", lg: "2rem" },
-        borderWidth: { sm: "2px", md: "2px", lg: "3px" },
-        color: "$color-primary",
-        trackColor: "$color-muted",
-        animationDuration: "0.6s",
-    },
-    // ===== TABS =====
-    tabs: {
-        listBorderWidth: "1px",
-        listBorderColor: "$color-border",
-        triggerPaddingX: "1rem",
-        triggerPaddingY: "0.5rem",
-        triggerFontSize: "$font-sm",
-        triggerFontWeight: "$font-medium",
-        triggerColor: "$color-mutedFg",
-        triggerActiveColor: "$color-primary",
-        triggerActiveBorderColor: "$color-primary",
-        contentPadding: "$spacing-lg",
-        states: {
-            hover: { color: "$color-fg" },
-            focus: { ringWidth: "2px", ringColor: "$color-ring" },
-        },
-    },
-    // ===== DIALOG =====
-    dialog: {
-        overlayBg: "rgba(0, 0, 0, 0.5)",
-        contentBg: "$color-bg",
-        contentBorderRadius: "$radius-lg",
-        contentShadow: "$shadow-lg",
-        contentMaxWidth: "32rem",
-        contentPadding: "$spacing-lg",
-        closeBtnSize: "2rem",
-        titleFontSize: "$font-lg",
-        titleFontWeight: "$font-semibold",
-        descriptionFontSize: "$font-sm",
-        descriptionColor: "$color-mutedFg",
-    },
-    // ===== DROPDOWN MENU =====
-    dropdownMenu: {
-        contentBg: "$color-bg",
-        contentBorderRadius: "$radius-md",
-        contentShadow: "$shadow-lg",
-        contentPadding: "0.25rem",
-        contentMinWidth: "8rem",
-        itemPaddingX: "0.5rem",
-        itemPaddingY: "0.375rem",
-        itemBorderRadius: "$radius-sm",
-        itemFontSize: "$font-sm",
-        itemHoverBg: "$color-muted",
-        separatorColor: "$color-border",
-        separatorMargin: "0.25rem",
-    },
-    // ===== ACCORDION =====
-    accordion: {
-        borderRadius: "$radius-md",
-        borderWidth: "1px",
-        borderColor: "$color-border",
-        itemBorderWidth: "1px",
-        triggerPadding: "1rem",
-        triggerFontWeight: "$font-medium",
-        triggerHoverBg: "$color-muted",
-        contentPadding: "1rem",
-        iconSize: "1rem",
-        states: {
-            focus: { ringWidth: "2px", ringColor: "$color-ring" },
-        },
-    },
-    // ===== TABLE =====
-    table: {
-        borderRadius: "$radius-md",
-        borderWidth: "1px",
-        borderColor: "$color-border",
-        headerBg: "$color-muted",
-        headerFontWeight: "$font-medium",
-        cellPaddingX: "0.75rem",
-        cellPaddingY: "0.5rem",
-        rowHoverBg: "$color-muted / 0.5",
-        stripedBg: "$color-muted / 0.3",
-    },
-    // ===== AVATAR =====
-    avatar: {
-        size: { sm: "2rem", md: "2.5rem", lg: "3.5rem" },
-        fontSize: { sm: "$font-xs", md: "$font-sm", lg: "$font-md" },
-        borderRadius: "$radius-full",
-        bg: "$color-muted",
-        color: "$color-mutedFg",
-    },
-    // ===== SEPARATOR =====
-    separator: {
-        color: "$color-border",
-        thickness: "1px",
-    },
-    // ===== BREADCRUMB =====
-    breadcrumb: {
-        fontSize: "$font-sm",
-        color: "$color-mutedFg",
-        activeColor: "$color-fg",
-        separatorColor: "$color-mutedFg",
-        gap: "0.5rem",
-    },
-    // ===== CODE =====
-    code: {
-        fontSize: "$font-sm",
-        fontFamily: "ui-monospace, monospace",
-        bg: "$color-muted",
-        color: "$color-fg",
-        paddingX: "0.25rem",
-        paddingY: "0.125rem",
-        borderRadius: "$radius-sm",
-    },
-    // ===== KBD =====
-    kbd: {
-        fontSize: "$font-xs",
-        fontFamily: "ui-monospace, monospace",
-        bg: "$color-muted",
-        color: "$color-fg",
-        borderColor: "$color-border",
-        paddingX: "0.375rem",
-        paddingY: "0.125rem",
-        borderRadius: "$radius-sm",
-        shadow: "0 1px 0 1px $color-border",
-    },
-    // ===== TAG =====
-    tag: {
-        paddingX: { sm: "0.5rem", md: "0.625rem" },
-        paddingY: { sm: "0.125rem", md: "0.25rem" },
-        fontSize: { sm: "$font-xs", md: "$font-sm" },
-        fontWeight: "$font-medium",
-        borderRadius: "$radius-md",
-        gap: "0.25rem",
-        variants: {
-            default: { bg: "$color-secondary", color: "$color-secondaryFg" },
-            primary: { bg: "$color-primary", color: "$color-primaryFg" },
-            success: { bg: "$color-success", color: "$color-successFg" },
-            danger: { bg: "$color-danger", color: "$color-dangerFg" },
-            warning: { bg: "$color-warning", color: "$color-warningFg" },
-            outline: { bg: "transparent", color: "$color-fg", borderColor: "$color-border" },
-        },
-    },
-    // ===== TOAST =====
-    toast: {
-        padding: "1rem",
-        borderRadius: "$radius-md",
-        shadow: "$shadow-lg",
-        minWidth: "300px",
-        maxWidth: "420px",
-        titleFontWeight: "$font-semibold",
-        variants: {
-            default: { bg: "$color-bg", color: "$color-fg", borderColor: "$color-border" },
-            success: { bg: "$color-success / 0.1", color: "$color-success", borderColor: "$color-success / 0.3" },
-            warning: { bg: "$color-warning / 0.1", color: "$color-warning", borderColor: "$color-warning / 0.3" },
-            danger: { bg: "$color-danger / 0.1", color: "$color-danger", borderColor: "$color-danger / 0.3" },
-        },
-    },
-    // ===== SCROLL AREA =====
-    scrollArea: {
-        scrollbarWidth: "10px",
-        scrollbarBg: "transparent",
-        thumbBg: "$color-border",
-        thumbHoverBg: "$color-mutedFg",
-        thumbBorderRadius: "$radius-full",
-    },
-    // ===== CONTAINER =====
-    container: {
-        maxWidth: { sm: "640px", md: "768px", lg: "1024px", xl: "1280px", "2xl": "1536px" },
-        paddingX: "1rem",
-    },
-    // ===== STACK =====
-    stack: {
-        gap: { sm: "0.5rem", md: "1rem", lg: "1.5rem" },
-    },
-    // ===== GRID =====
-    grid: {
-        gap: { sm: "0.5rem", md: "1rem", lg: "1.5rem" },
-    },
-};