czero 0.1.0 → 0.2.0

package/dist/cli-new/cli/build-css.d.ts

@@ -0,0 +1,19 @@
+/**
+ * CZero CSS Builder
+ * Builds complete CSS from config using component generators
+ */
+import type { CZeroConfig } from "../src/core/types/config";
+/**
+ * Build complete component CSS from config
+ * Merges user config with defaults and generates CSS for each component
+ */
+export declare function buildComponentsCSS(config: CZeroConfig): string;
+/**
+ * Get legacy components CSS from file
+ * Used for components that haven't been migrated to the new generator system
+ */
+export declare function getLegacyComponentsCSS(componentsPath: string, excludeComponents?: string[]): string;
+/**
+ * Validate config structure
+ */
+export declare function validateConfig(config: unknown): CZeroConfig;

package/dist/cli-new/cli/build-css.js

@@ -0,0 +1,88 @@
+/**
+ * CZero CSS Builder
+ * Builds complete CSS from config using component generators
+ */
+import { componentDefaults } from "../src/core/component-defaults";
+import { deepMerge } from "./utils/deep-merge";
+import { generateButtonCSS, generateInputCSS, generateCardCSS, generateSwitchCSS, generateCheckboxCSS, } from "./generators";
+/**
+ * Build complete component CSS from config
+ * Merges user config with defaults and generates CSS for each component
+ */
+export function buildComponentsCSS(config) {
+    // Merge user component config with defaults
+    const components = deepMerge(componentDefaults, config.components || {});
+    let css = "";
+    // Add before custom CSS
+    if (config.customCSS?.before) {
+        css += `/* Custom CSS (before) */\n${config.customCSS.before}\n\n`;
+    }
+    // Generate CSS for each component
+    // Only generating for the 5 implemented components for now
+    if (components.button) {
+        css += generateButtonCSS(components.button);
+        css += "\n";
+    }
+    if (components.input) {
+        css += generateInputCSS(components.input);
+        css += "\n";
+    }
+    if (components.card) {
+        css += generateCardCSS(components.card);
+        css += "\n";
+    }
+    if (components.switch) {
+        css += generateSwitchCSS(components.switch);
+        css += "\n";
+    }
+    if (components.checkbox) {
+        css += generateCheckboxCSS(components.checkbox);
+        css += "\n";
+    }
+    // Add after custom CSS
+    if (config.customCSS?.after) {
+        css += `/* Custom CSS (after) */\n${config.customCSS.after}\n`;
+    }
+    return css;
+}
+/**
+ * Get legacy components CSS from file
+ * Used for components that haven't been migrated to the new generator system
+ */
+export function getLegacyComponentsCSS(componentsPath, excludeComponents = ["button", "input", "card", "switch", "checkbox"]) {
+    // For now, we read the entire file
+    // In the future, we could parse and exclude specific sections
+    // This is a migration helper
+    const fs = require("fs");
+    if (!fs.existsSync(componentsPath)) {
+        return "";
+    }
+    let css = fs.readFileSync(componentsPath, "utf-8");
+    // Remove sections for components that are now generated
+    // This is a simple approach - in production you'd want more robust parsing
+    for (const component of excludeComponents) {
+        // Remove the component section from the CSS
+        // Looking for patterns like /* ===== BUTTON ===== */ to the next /* ===== */ or end
+        const sectionRegex = new RegExp(`\\/\\*\\s*=====\\s*${component.toUpperCase()}\\s*=====\\s*\\*\\/[\\s\\S]*?(?=\\/\\*\\s*=====|$)`, "gi");
+        css = css.replace(sectionRegex, "");
+    }
+    return css;
+}
+/**
+ * Validate config structure
+ */
+export function validateConfig(config) {
+    if (typeof config !== "object" || config === null) {
+        return {};
+    }
+    // Basic validation - in production you'd want more robust checking
+    const validConfig = config;
+    // Warn about unknown top-level keys
+    const validKeys = ["color", "radius", "shadow", "spacing", "typography", "transition", "breakpoints", "components", "customCSS"];
+    for (const key of Object.keys(validConfig)) {
+        if (!validKeys.includes(key)) {
+            console.warn(`⚠️  Unknown config key: "${key}"`);
+        }
+    }
+    return validConfig;
+}

package/dist/cli-new/cli/generators/button.d.ts

@@ -0,0 +1,9 @@
+/**
+ * CZero Button CSS Generator
+ * Generates CSS for button component from config tokens
+ */
+import type { ButtonTokens } from "../../src/core/types/config";
+/**
+ * Generate all button CSS including variables, base styles, sizes, variants, and states
+ */
+export declare function generateButtonCSS(config: ButtonTokens): string;

package/dist/cli-new/cli/generators/button.js

@@ -0,0 +1,224 @@
+/**
+ * CZero Button CSS Generator
+ * Generates CSS for button component from config tokens
+ */
+import { resolveToken, componentVarName } from "../token-resolver";
+/**
+ * Generate all button CSS including variables, base styles, sizes, variants, and states
+ */
+export function generateButtonCSS(config) {
+    let css = "";
+    css += "/* ===== BUTTON ===== */\n\n";
+    // Generate CSS variables
+    css += generateButtonVariables(config);
+    css += "\n";
+    // Generate base styles
+    css += generateButtonBase();
+    css += "\n";
+    // Generate size variants
+    css += generateButtonSizes(config);
+    css += "\n";
+    // Generate color variants
+    if (config.variants) {
+        css += generateButtonVariants(config.variants);
+        css += "\n";
+    }
+    // Generate icon button styles
+    css += generateButtonIcon(config);
+    css += "\n";
+    // Generate loading state styles
+    css += generateButtonLoading(config);
+    css += "\n";
+    // Append custom CSS
+    if (config.customCSS) {
+        css += `/* Custom Button CSS */\n${config.customCSS}\n`;
+    }
+    return css;
+}
+/**
+ * Generate CSS variables for button component
+ */
+function generateButtonVariables(config) {
+    const vars = [];
+    // Size-based variables
+    if (config.height) {
+        for (const [size, value] of Object.entries(config.height)) {
+            vars.push(`  ${componentVarName("button", "height", size)}: ${resolveToken(value)};`);
+        }
+    }
+    if (config.paddingX) {
+        for (const [size, value] of Object.entries(config.paddingX)) {
+            vars.push(`  ${componentVarName("button", "paddingX", size)}: ${resolveToken(value)};`);
+        }
+    }
+    if (config.fontSize && typeof config.fontSize === "object") {
+        for (const [size, value] of Object.entries(config.fontSize)) {
+            vars.push(`  ${componentVarName("button", "fontSize", size)}: ${resolveToken(value)};`);
+        }
+    }
+    if (config.iconSize) {
+        for (const [size, value] of Object.entries(config.iconSize)) {
+            vars.push(`  ${componentVarName("button", "iconSize", size)}: ${resolveToken(value)};`);
+        }
+    }
+    // Single-value variables
+    if (config.gap) {
+        vars.push(`  ${componentVarName("button", "gap")}: ${resolveToken(config.gap)};`);
+    }
+    if (config.fontWeight) {
+        vars.push(`  ${componentVarName("button", "fontWeight")}: ${resolveToken(config.fontWeight)};`);
+    }
+    if (config.borderRadius) {
+        vars.push(`  ${componentVarName("button", "borderRadius")}: ${resolveToken(config.borderRadius)};`);
+    }
+    if (config.borderWidth) {
+        vars.push(`  ${componentVarName("button", "borderWidth")}: ${resolveToken(config.borderWidth)};`);
+    }
+    if (config.transition) {
+        vars.push(`  ${componentVarName("button", "transition")}: ${resolveToken(config.transition)};`);
+    }
+    // State variables
+    if (config.states?.hover?.opacity) {
+        vars.push(`  ${componentVarName("button", "hoverOpacity")}: ${config.states.hover.opacity};`);
+    }
+    if (config.states?.focus?.ringWidth) {
+        vars.push(`  ${componentVarName("button", "focusRingWidth")}: ${config.states.focus.ringWidth};`);
+    }
+    if (config.states?.focus?.ringOffset) {
+        vars.push(`  ${componentVarName("button", "focusRingOffset")}: ${config.states.focus.ringOffset};`);
+    }
+    if (config.states?.focus?.ringColor) {
+        vars.push(`  ${componentVarName("button", "focusRingColor")}: ${resolveToken(config.states.focus.ringColor)};`);
+    }
+    if (config.states?.disabled?.opacity) {
+        vars.push(`  ${componentVarName("button", "disabledOpacity")}: ${config.states.disabled.opacity};`);
+    }
+    // Animation variables
+    if (config.animations?.loading?.duration) {
+        vars.push(`  ${componentVarName("button", "loadingDuration")}: ${config.animations.loading.duration};`);
+    }
+    if (config.animations?.loading?.timing) {
+        vars.push(`  ${componentVarName("button", "loadingTiming")}: ${config.animations.loading.timing};`);
+    }
+    // Variant variables
+    if (config.variants) {
+        for (const [name, variant] of Object.entries(config.variants)) {
+            if (variant.bg) {
+                vars.push(`  --cz-btn-${name}-bg: ${resolveToken(variant.bg)};`);
+            }
+            if (variant.color) {
+                vars.push(`  --cz-btn-${name}-color: ${resolveToken(variant.color)};`);
+            }
+            if (variant.borderColor) {
+                vars.push(`  --cz-btn-${name}-border-color: ${resolveToken(variant.borderColor)};`);
+            }
+        }
+    }
+    return `:root {\n${vars.join("\n")}\n}\n`;
+}
+/**
+ * Generate base button styles
+ */
+function generateButtonBase() {
+    return `.cz-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--cz-btn-gap);
+  border-radius: var(--cz-btn-border-radius);
+  font-weight: var(--cz-btn-font-weight);
+  transition: all var(--cz-btn-transition);
+  cursor: pointer;
+  border: var(--cz-btn-border-width) solid transparent;
+}
+
+.cz-btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--cz-btn-focus-ring-offset) hsl(var(--cz-color-bg)),
+              0 0 0 calc(var(--cz-btn-focus-ring-offset) + var(--cz-btn-focus-ring-width)) var(--cz-btn-focus-ring-color);
+}
+
+.cz-btn:disabled {
+  pointer-events: none;
+  opacity: var(--cz-btn-disabled-opacity);
+}
+`;
+}
+/**
+ * Generate button size variants
+ */
+function generateButtonSizes(config) {
+    const sizes = ["sm", "md", "lg"];
+    let css = "/* Button Sizes */\n";
+    for (const size of sizes) {
+        css += `.cz-btn-${size} {
+  height: var(--cz-btn-height-${size});
+  padding: 0 var(--cz-btn-padding-x-${size});
+  font-size: var(--cz-btn-font-size-${size});
+}\n`;
+    }
+    return css;
+}
+/**
+ * Generate button color variants
+ */
+function generateButtonVariants(variants) {
+    let css = "/* Button Variants */\n";
+    for (const [name, variant] of Object.entries(variants)) {
+        // Base variant styles
+        css += `.cz-btn-${name} {\n`;
+        css += `  background: var(--cz-btn-${name}-bg);\n`;
+        css += `  color: var(--cz-btn-${name}-color);\n`;
+        if (variant.borderColor && variant.borderColor !== "transparent") {
+            css += `  border-color: var(--cz-btn-${name}-border-color);\n`;
+        }
+        if (variant.textDecoration) {
+            css += `  text-decoration: ${variant.textDecoration};\n`;
+            css += `  text-underline-offset: 4px;\n`;
+        }
+        css += `}\n`;
+        // Hover styles
+        if (variant.hover) {
+            css += `.cz-btn-${name}:hover {\n`;
+            if (variant.hover.opacity) {
+                css += `  opacity: ${variant.hover.opacity};\n`;
+            }
+            if (variant.hover.bg) {
+                css += `  background: ${resolveToken(variant.hover.bg)};\n`;
+            }
+            if (variant.textDecoration) {
+                css += `  text-decoration-thickness: 2px;\n`;
+            }
+            css += `}\n`;
+        }
+    }
+    return css;
+}
+/**
+ * Generate icon button styles
+ */
+function generateButtonIcon(config) {
+    return `/* Button Icon Size */
+.cz-btn-icon {
+  padding: 0;
+}
+.cz-btn-icon.cz-btn-sm { width: var(--cz-btn-icon-size-sm); height: var(--cz-btn-icon-size-sm); }
+.cz-btn-icon.cz-btn-md { width: var(--cz-btn-icon-size-md); height: var(--cz-btn-icon-size-md); }
+.cz-btn-icon.cz-btn-lg { width: var(--cz-btn-icon-size-lg); height: var(--cz-btn-icon-size-lg); }
+`;
+}
+/**
+ * Generate loading button styles
+ */
+function generateButtonLoading(config) {
+    return `/* Button Loading State */
+.cz-btn-loading { position: relative; }
+.cz-btn-spinner {
+  width: 1rem;
+  height: 1rem;
+  animation: cz-spin var(--cz-btn-loading-duration) var(--cz-btn-loading-timing) infinite;
+  flex-shrink: 0;
+}
+.cz-btn-content { opacity: 1; }
+`;
+}

package/dist/cli-new/cli/generators/card.d.ts

@@ -0,0 +1,9 @@
+/**
+ * CZero Card CSS Generator
+ * Generates CSS for card component from config tokens
+ */
+import type { CardTokens } from "../../src/core/types/config";
+/**
+ * Generate all card CSS including variables and styles
+ */
+export declare function generateCardCSS(config: CardTokens): string;

package/dist/cli-new/cli/generators/card.js

@@ -0,0 +1,104 @@
+/**
+ * CZero Card CSS Generator
+ * Generates CSS for card component from config tokens
+ */
+import { resolveToken } from "../token-resolver";
+/**
+ * Generate all card CSS including variables and styles
+ */
+export function generateCardCSS(config) {
+    let css = "";
+    css += "/* ===== CARD ===== */\n\n";
+    css += generateCardVariables(config);
+    css += "\n";
+    css += generateCardBase();
+    css += "\n";
+    if (config.customCSS) {
+        css += `/* Custom Card CSS */\n${config.customCSS}\n`;
+    }
+    return css;
+}
+function generateCardVariables(config) {
+    const vars = [];
+    if (config.padding)
+        vars.push(`  --cz-card-padding: ${resolveToken(config.padding)};`);
+    if (config.borderRadius)
+        vars.push(`  --cz-card-border-radius: ${resolveToken(config.borderRadius)};`);
+    if (config.borderWidth)
+        vars.push(`  --cz-card-border-width: ${resolveToken(config.borderWidth)};`);
+    if (config.borderColor)
+        vars.push(`  --cz-card-border-color: ${resolveToken(config.borderColor)};`);
+    if (config.bg)
+        vars.push(`  --cz-card-bg: ${resolveToken(config.bg)};`);
+    if (config.shadow)
+        vars.push(`  --cz-card-shadow: ${resolveToken(config.shadow)};`);
+    // Header
+    if (config.header?.paddingBottom)
+        vars.push(`  --cz-card-header-padding-bottom: ${resolveToken(config.header.paddingBottom)};`);
+    if (config.header?.marginBottom)
+        vars.push(`  --cz-card-header-margin-bottom: ${resolveToken(config.header.marginBottom)};`);
+    // Title
+    if (config.title?.fontSize)
+        vars.push(`  --cz-card-title-font-size: ${resolveToken(config.title.fontSize)};`);
+    if (config.title?.fontWeight)
+        vars.push(`  --cz-card-title-font-weight: ${resolveToken(config.title.fontWeight)};`);
+    if (config.title?.color)
+        vars.push(`  --cz-card-title-color: ${resolveToken(config.title.color)};`);
+    // Description
+    if (config.description?.fontSize)
+        vars.push(`  --cz-card-description-font-size: ${resolveToken(config.description.fontSize)};`);
+    if (config.description?.color)
+        vars.push(`  --cz-card-description-color: ${resolveToken(config.description.color)};`);
+    // Footer
+    if (config.footer?.paddingTop)
+        vars.push(`  --cz-card-footer-padding-top: ${resolveToken(config.footer.paddingTop)};`);
+    if (config.footer?.marginTop)
+        vars.push(`  --cz-card-footer-margin-top: ${resolveToken(config.footer.marginTop)};`);
+    if (config.footer?.gap)
+        vars.push(`  --cz-card-footer-gap: ${config.footer.gap};`);
+    return `:root {\n${vars.join("\n")}\n}\n`;
+}
+function generateCardBase() {
+    return `.cz-card {
+  border-radius: var(--cz-card-border-radius);
+  border: var(--cz-card-border-width) solid var(--cz-card-border-color);
+  background-color: var(--cz-card-bg);
+  box-shadow: var(--cz-card-shadow);
+  padding: var(--cz-card-padding);
+}
+
+.cz-card-no-padding { padding: 0; }
+
+.cz-card-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  padding-bottom: var(--cz-card-header-padding-bottom);
+  border-bottom: var(--cz-card-border-width) solid var(--cz-card-border-color);
+  margin-bottom: var(--cz-card-header-margin-bottom);
+}
+
+.cz-card-title {
+  font-size: var(--cz-card-title-font-size);
+  font-weight: var(--cz-card-title-font-weight);
+  color: var(--cz-card-title-color);
+  line-height: var(--cz-font-lineHeight-tight);
+}
+
+.cz-card-description {
+  font-size: var(--cz-card-description-font-size);
+  color: var(--cz-card-description-color);
+}
+
+.cz-card-body { color: var(--cz-card-title-color); }
+
+.cz-card-footer {
+  display: flex;
+  align-items: center;
+  gap: var(--cz-card-footer-gap);
+  padding-top: var(--cz-card-footer-padding-top);
+  margin-top: var(--cz-card-footer-margin-top);
+  border-top: var(--cz-card-border-width) solid var(--cz-card-border-color);
+}
+`;
+}

package/dist/cli-new/cli/generators/checkbox.d.ts

@@ -0,0 +1,6 @@
+/**
+ * CZero Checkbox CSS Generator
+ * Generates CSS for checkbox component from config tokens
+ */
+import type { CheckboxTokens } from "../../src/core/types/config";
+export declare function generateCheckboxCSS(config: CheckboxTokens): string;

package/dist/cli-new/cli/generators/checkbox.js

@@ -0,0 +1,163 @@
+/**
+ * CZero Checkbox CSS Generator
+ * Generates CSS for checkbox component from config tokens
+ */
+import { resolveToken } from "../token-resolver";
+export function generateCheckboxCSS(config) {
+    let css = "";
+    css += "/* ===== CHECKBOX ===== */\n\n";
+    css += generateCheckboxVariables(config);
+    css += "\n";
+    css += generateCheckboxBase();
+    css += "\n";
+    css += generateCheckboxSizes(config);
+    css += "\n";
+    css += generateCheckboxDescription();
+    css += "\n";
+    if (config.customCSS) {
+        css += `/* Custom Checkbox CSS */\n${config.customCSS}\n`;
+    }
+    return css;
+}
+function generateCheckboxVariables(config) {
+    const vars = [];
+    // Size variants
+    if (config.size) {
+        for (const [size, value] of Object.entries(config.size)) {
+            vars.push(`  --cz-checkbox-size-${size}: ${resolveToken(value)};`);
+        }
+    }
+    if (config.iconSize) {
+        for (const [size, value] of Object.entries(config.iconSize)) {
+            vars.push(`  --cz-checkbox-icon-size-${size}: ${value};`);
+        }
+    }
+    // Single values
+    if (config.borderRadius)
+        vars.push(`  --cz-checkbox-border-radius: ${resolveToken(config.borderRadius)};`);
+    if (config.borderWidth)
+        vars.push(`  --cz-checkbox-border-width: ${config.borderWidth};`);
+    if (config.borderColor)
+        vars.push(`  --cz-checkbox-border-color: ${resolveToken(config.borderColor)};`);
+    if (config.bg)
+        vars.push(`  --cz-checkbox-bg: ${resolveToken(config.bg)};`);
+    if (config.checkedBg)
+        vars.push(`  --cz-checkbox-checked-bg: ${resolveToken(config.checkedBg)};`);
+    if (config.checkedBorderColor)
+        vars.push(`  --cz-checkbox-checked-border-color: ${resolveToken(config.checkedBorderColor)};`);
+    if (config.indicatorColor)
+        vars.push(`  --cz-checkbox-indicator-color: ${resolveToken(config.indicatorColor)};`);
+    if (config.labelFontSize)
+        vars.push(`  --cz-checkbox-label-font-size: ${resolveToken(config.labelFontSize)};`);
+    if (config.labelGap)
+        vars.push(`  --cz-checkbox-label-gap: ${config.labelGap};`);
+    // States
+    if (config.states?.hover?.borderColor)
+        vars.push(`  --cz-checkbox-hover-border-color: ${resolveToken(config.states.hover.borderColor)};`);
+    if (config.states?.focus?.ringWidth)
+        vars.push(`  --cz-checkbox-focus-ring-width: ${config.states.focus.ringWidth};`);
+    if (config.states?.focus?.ringColor)
+        vars.push(`  --cz-checkbox-focus-ring-color: ${resolveToken(config.states.focus.ringColor)};`);
+    if (config.states?.disabled?.opacity)
+        vars.push(`  --cz-checkbox-disabled-opacity: ${config.states.disabled.opacity};`);
+    return `:root {\n${vars.join("\n")}\n}\n`;
+}
+function generateCheckboxBase() {
+    return `.cz-checkbox-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--cz-checkbox-label-gap);
+  cursor: pointer;
+  user-select: none;
+}
+
+.cz-checkbox-wrapper.cz-disabled {
+  cursor: not-allowed;
+  opacity: var(--cz-checkbox-disabled-opacity);
+}
+
+.cz-checkbox {
+  all: unset;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--cz-checkbox-border-radius);
+  border: var(--cz-checkbox-border-width) solid var(--cz-checkbox-border-color);
+  background-color: var(--cz-checkbox-bg);
+  transition: all var(--cz-transition-fast);
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.cz-checkbox:hover {
+  border-color: var(--cz-checkbox-hover-border-color);
+}
+
+.cz-checkbox:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px hsl(var(--cz-color-bg)), 0 0 0 4px var(--cz-checkbox-focus-ring-color);
+}
+
+.cz-checkbox:disabled {
+  cursor: not-allowed;
+  opacity: var(--cz-checkbox-disabled-opacity);
+}
+
+.cz-checkbox[data-state="checked"],
+.cz-checkbox[data-state="indeterminate"] {
+  background-color: var(--cz-checkbox-checked-bg);
+  border-color: var(--cz-checkbox-checked-border-color);
+}
+
+.cz-checkbox-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--cz-checkbox-indicator-color);
+  width: 100%;
+  height: 100%;
+}
+
+.cz-checkbox-label {
+  font-size: var(--cz-checkbox-label-font-size);
+  color: hsl(var(--cz-color-fg));
+}
+`;
+}
+function generateCheckboxSizes(config) {
+    let css = "/* Checkbox Sizes */\n";
+    for (const size of ["sm", "md", "lg"]) {
+        css += `.cz-checkbox-${size} {
+  width: var(--cz-checkbox-size-${size});
+  height: var(--cz-checkbox-size-${size});
+}
+.cz-checkbox-${size} .cz-checkbox-indicator svg {
+  width: var(--cz-checkbox-icon-size-${size});
+  height: var(--cz-checkbox-icon-size-${size});
+}
+`;
+    }
+    return css;
+}
+function generateCheckboxDescription() {
+    return `/* Checkbox with Description */
+.cz-checkbox-wrapper-with-description {
+  align-items: flex-start;
+}
+.cz-checkbox-wrapper-with-description .cz-checkbox {
+  margin-top: 0.125rem;
+}
+
+.cz-checkbox-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.cz-checkbox-description {
+  font-size: var(--cz-font-size-xs);
+  color: hsl(var(--cz-color-mutedFg));
+}
+`;
+}

package/dist/cli-new/cli/generators/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * CZero CSS Generators Index
+ * Exports all component CSS generators
+ */
+export { generateButtonCSS } from "./button";
+export { generateInputCSS } from "./input";
+export { generateCardCSS } from "./card";
+export { generateSwitchCSS } from "./switch";
+export { generateCheckboxCSS } from "./checkbox";
+export { generateUtilitiesCSS } from "./utilities";

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

@@ -0,0 +1,40 @@
+/**
+ * CZero CSS Generators Index
+ * Exports all component CSS generators
+ */
+export { generateButtonCSS } from "./button";
+export { generateInputCSS } from "./input";
+export { generateCardCSS } from "./card";
+export { generateSwitchCSS } from "./switch";
+export { generateCheckboxCSS } from "./checkbox";
+export { generateUtilitiesCSS } from "./utilities";
+// Future generators will be added here:
+// export { generateTextareaCSS } from "./textarea";
+// export { generateCardCSS } from "./card";
+// export { generateBadgeCSS } from "./badge";
+// export { generateSwitchCSS } from "./switch";
+// export { generateCheckboxCSS } from "./checkbox";
+// export { generateRadioCSS } from "./radio";
+// export { generateSelectCSS } from "./select";
+// export { generateLabelCSS } from "./label";
+// export { generateAlertCSS } from "./alert";
+// export { generateTooltipCSS } from "./tooltip";
+// export { generateProgressCSS } from "./progress";
+// export { generateSkeletonCSS } from "./skeleton";
+// export { generateSpinnerCSS } from "./spinner";
+// export { generateTabsCSS } from "./tabs";
+// export { generateDialogCSS } from "./dialog";
+// export { generateDropdownMenuCSS } from "./dropdown-menu";
+// export { generateAccordionCSS } from "./accordion";
+// export { generateTableCSS } from "./table";
+// export { generateAvatarCSS } from "./avatar";
+// export { generateSeparatorCSS } from "./separator";
+// export { generateBreadcrumbCSS } from "./breadcrumb";
+// export { generateCodeCSS } from "./code";
+// export { generateKbdCSS } from "./kbd";
+// export { generateTagCSS } from "./tag";
+// export { generateToastCSS } from "./toast";
+// export { generateScrollAreaCSS } from "./scroll-area";
+// export { generateContainerCSS } from "./container";
+// export { generateStackCSS } from "./stack";
+// export { generateGridCSS } from "./grid";

package/dist/cli-new/cli/generators/input.d.ts

@@ -0,0 +1,9 @@
+/**
+ * CZero Input CSS Generator
+ * Generates CSS for input component from config tokens
+ */
+import type { InputTokens } from "../../src/core/types/config";
+/**
+ * Generate all input CSS including variables, base styles, sizes, and states
+ */
+export declare function generateInputCSS(config: InputTokens): string;