czero 0.1.0 → 0.2.0

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

@@ -0,0 +1,231 @@
+/**
+ * CZero Input CSS Generator
+ * Generates CSS for input component from config tokens
+ */
+import { resolveToken, componentVarName } from "../token-resolver";
+/**
+ * Generate all input CSS including variables, base styles, sizes, and states
+ */
+export function generateInputCSS(config) {
+    let css = "";
+    css += "/* ===== INPUT ===== */\n\n";
+    // Generate CSS variables
+    css += generateInputVariables(config);
+    css += "\n";
+    // Generate base styles
+    css += generateInputBase();
+    css += "\n";
+    // Generate size variants
+    css += generateInputSizes();
+    css += "\n";
+    // Generate state styles
+    css += generateInputStates(config);
+    css += "\n";
+    // Generate icon styles
+    css += generateInputIcons(config);
+    css += "\n";
+    // Generate clear button styles
+    css += generateInputClear();
+    css += "\n";
+    // Append custom CSS
+    if (config.customCSS) {
+        css += `/* Custom Input CSS */\n${config.customCSS}\n`;
+    }
+    return css;
+}
+/**
+ * Generate CSS variables for input component
+ */
+function generateInputVariables(config) {
+    const vars = [];
+    // Size-based variables
+    if (config.height) {
+        for (const [size, value] of Object.entries(config.height)) {
+            vars.push(`  ${componentVarName("input", "height", size)}: ${resolveToken(value)};`);
+        }
+    }
+    if (config.paddingX) {
+        for (const [size, value] of Object.entries(config.paddingX)) {
+            vars.push(`  ${componentVarName("input", "paddingX", size)}: ${resolveToken(value)};`);
+        }
+    }
+    if (config.fontSize && typeof config.fontSize === "object") {
+        for (const [size, value] of Object.entries(config.fontSize)) {
+            vars.push(`  ${componentVarName("input", "fontSize", size)}: ${resolveToken(value)};`);
+        }
+    }
+    // Single-value variables
+    if (config.borderRadius) {
+        vars.push(`  ${componentVarName("input", "borderRadius")}: ${resolveToken(config.borderRadius)};`);
+    }
+    if (config.borderWidth) {
+        vars.push(`  ${componentVarName("input", "borderWidth")}: ${resolveToken(config.borderWidth)};`);
+    }
+    if (config.borderColor) {
+        vars.push(`  ${componentVarName("input", "borderColor")}: ${resolveToken(config.borderColor)};`);
+    }
+    if (config.bg) {
+        vars.push(`  ${componentVarName("input", "bg")}: ${resolveToken(config.bg)};`);
+    }
+    if (config.color) {
+        vars.push(`  ${componentVarName("input", "color")}: ${resolveToken(config.color)};`);
+    }
+    if (config.placeholderColor) {
+        vars.push(`  ${componentVarName("input", "placeholderColor")}: ${resolveToken(config.placeholderColor)};`);
+    }
+    // Icon variables
+    if (config.iconSize) {
+        vars.push(`  ${componentVarName("input", "iconSize")}: ${resolveToken(config.iconSize)};`);
+    }
+    if (config.iconColor) {
+        vars.push(`  ${componentVarName("input", "iconColor")}: ${resolveToken(config.iconColor)};`);
+    }
+    if (config.iconSpacing) {
+        vars.push(`  ${componentVarName("input", "iconSpacing")}: ${resolveToken(config.iconSpacing)};`);
+    }
+    // State variables
+    if (config.states?.focus?.borderColor) {
+        vars.push(`  ${componentVarName("input", "focusBorderColor")}: ${resolveToken(config.states.focus.borderColor)};`);
+    }
+    if (config.states?.focus?.shadow) {
+        vars.push(`  ${componentVarName("input", "focusShadow")}: ${resolveToken(config.states.focus.shadow)};`);
+    }
+    if (config.states?.error?.borderColor) {
+        vars.push(`  ${componentVarName("input", "errorBorderColor")}: ${resolveToken(config.states.error.borderColor)};`);
+    }
+    if (config.states?.error?.focusShadow) {
+        vars.push(`  ${componentVarName("input", "errorFocusShadow")}: ${resolveToken(config.states.error.focusShadow)};`);
+    }
+    if (config.states?.disabled?.opacity) {
+        vars.push(`  ${componentVarName("input", "disabledOpacity")}: ${config.states.disabled.opacity};`);
+    }
+    return `:root {\n${vars.join("\n")}\n}\n`;
+}
+/**
+ * Generate base input styles
+ */
+function generateInputBase() {
+    return `.cz-input-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.cz-input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.cz-input {
+  width: 100%;
+  border-radius: var(--cz-input-border-radius);
+  border: var(--cz-input-border-width) solid var(--cz-input-border-color);
+  background-color: var(--cz-input-bg);
+  color: var(--cz-input-color);
+  transition: all var(--cz-transition-fast);
+}
+
+.cz-input::placeholder {
+  color: var(--cz-input-placeholder-color);
+}
+`;
+}
+/**
+ * Generate input size variants
+ */
+function generateInputSizes() {
+    return `/* Input Sizes */
+.cz-input-sm {
+  height: var(--cz-input-height-sm);
+  padding: 0 var(--cz-input-padding-x-sm);
+  font-size: var(--cz-input-font-size-sm);
+}
+.cz-input-md {
+  height: var(--cz-input-height-md);
+  padding: 0 var(--cz-input-padding-x-md);
+  font-size: var(--cz-input-font-size-md);
+}
+.cz-input-lg {
+  height: var(--cz-input-height-lg);
+  padding: 0 var(--cz-input-padding-x-lg);
+  font-size: var(--cz-input-font-size-lg);
+}
+`;
+}
+/**
+ * Generate input state styles
+ */
+function generateInputStates(config) {
+    return `.cz-input:focus {
+  outline: none;
+  border-color: var(--cz-input-focus-border-color);
+  box-shadow: var(--cz-input-focus-shadow);
+}
+
+.cz-input:disabled {
+  cursor: not-allowed;
+  opacity: var(--cz-input-disabled-opacity);
+}
+
+.cz-input-error {
+  border-color: var(--cz-input-error-border-color);
+}
+.cz-input-error:focus {
+  border-color: var(--cz-input-error-border-color);
+  box-shadow: var(--cz-input-error-focus-shadow);
+}
+
+.cz-input-description {
+  font-size: var(--cz-font-size-xs);
+  color: var(--cz-input-placeholder-color);
+}
+`;
+}
+/**
+ * Generate input icon styles
+ */
+function generateInputIcons(config) {
+    return `/* Input with Icons */
+.cz-input-has-left-icon .cz-input { padding-left: var(--cz-input-icon-spacing); }
+.cz-input-has-right-icon .cz-input { padding-right: var(--cz-input-icon-spacing); }
+
+.cz-input-icon {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--cz-input-icon-spacing);
+  height: 100%;
+  color: var(--cz-input-icon-color);
+  pointer-events: none;
+}
+.cz-input-icon svg { width: var(--cz-input-icon-size); height: var(--cz-input-icon-size); }
+.cz-input-icon-left { left: 0; }
+.cz-input-icon-right { right: 0; }
+`;
+}
+/**
+ * Generate input clear button styles
+ */
+function generateInputClear() {
+    return `/* Input Clear Button */
+.cz-input-clear {
+  position: absolute;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--cz-input-icon-spacing);
+  height: 100%;
+  color: var(--cz-input-icon-color);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: color var(--cz-transition-fast);
+}
+.cz-input-clear:hover { color: var(--cz-input-color); }
+.cz-input-clear svg { width: 0.875rem; height: 0.875rem; }
+`;
+}

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

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

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

@@ -0,0 +1,156 @@
+/**
+ * CZero Switch CSS Generator
+ * Generates CSS for switch component from config tokens
+ */
+import { resolveToken } from "../token-resolver";
+export function generateSwitchCSS(config) {
+    let css = "";
+    css += "/* ===== SWITCH ===== */\n\n";
+    css += generateSwitchVariables(config);
+    css += "\n";
+    css += generateSwitchBase();
+    css += "\n";
+    css += generateSwitchSizes(config);
+    css += "\n";
+    css += generateSwitchLabel();
+    css += "\n";
+    if (config.customCSS) {
+        css += `/* Custom Switch CSS */\n${config.customCSS}\n`;
+    }
+    return css;
+}
+function generateSwitchVariables(config) {
+    const vars = [];
+    // Size variants
+    if (config.width) {
+        for (const [size, value] of Object.entries(config.width)) {
+            vars.push(`  --cz-switch-width-${size}: ${resolveToken(value)};`);
+        }
+    }
+    if (config.height) {
+        for (const [size, value] of Object.entries(config.height)) {
+            vars.push(`  --cz-switch-height-${size}: ${resolveToken(value)};`);
+        }
+    }
+    if (config.thumbSize) {
+        for (const [size, value] of Object.entries(config.thumbSize)) {
+            vars.push(`  --cz-switch-thumb-size-${size}: ${resolveToken(value)};`);
+        }
+    }
+    // Single values
+    if (config.thumbOffset)
+        vars.push(`  --cz-switch-thumb-offset: ${config.thumbOffset};`);
+    if (config.borderRadius)
+        vars.push(`  --cz-switch-border-radius: ${resolveToken(config.borderRadius)};`);
+    if (config.bgUnchecked)
+        vars.push(`  --cz-switch-bg-unchecked: ${resolveToken(config.bgUnchecked)};`);
+    if (config.bgChecked)
+        vars.push(`  --cz-switch-bg-checked: ${resolveToken(config.bgChecked)};`);
+    if (config.thumbBg)
+        vars.push(`  --cz-switch-thumb-bg: ${resolveToken(config.thumbBg)};`);
+    if (config.thumbShadow)
+        vars.push(`  --cz-switch-thumb-shadow: ${resolveToken(config.thumbShadow)};`);
+    if (config.transition)
+        vars.push(`  --cz-switch-transition: ${resolveToken(config.transition)};`);
+    // States
+    if (config.states?.focus?.ringWidth)
+        vars.push(`  --cz-switch-focus-ring-width: ${config.states.focus.ringWidth};`);
+    if (config.states?.focus?.ringColor)
+        vars.push(`  --cz-switch-focus-ring-color: ${resolveToken(config.states.focus.ringColor)};`);
+    if (config.states?.disabled?.opacity)
+        vars.push(`  --cz-switch-disabled-opacity: ${config.states.disabled.opacity};`);
+    return `:root {\n${vars.join("\n")}\n}\n`;
+}
+function generateSwitchBase() {
+    return `.cz-switch {
+  all: unset;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  border-radius: var(--cz-switch-border-radius);
+  background-color: var(--cz-switch-bg-unchecked);
+  transition: all var(--cz-switch-transition);
+  cursor: pointer;
+}
+
+.cz-switch:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px hsl(var(--cz-color-bg)), 0 0 0 4px var(--cz-switch-focus-ring-color);
+}
+
+.cz-switch[data-state="checked"],
+.cz-switch.cz-switch-checked {
+  background-color: var(--cz-switch-bg-checked);
+}
+
+.cz-switch.cz-disabled,
+.cz-switch:disabled {
+  opacity: var(--cz-switch-disabled-opacity);
+  cursor: not-allowed;
+}
+
+.cz-switch-thumb {
+  display: block;
+  border-radius: var(--cz-switch-border-radius);
+  background-color: var(--cz-switch-thumb-bg);
+  box-shadow: var(--cz-switch-thumb-shadow);
+  transition: transform var(--cz-switch-transition);
+}
+`;
+}
+function generateSwitchSizes(config) {
+    let css = "/* Switch Sizes */\n";
+    for (const size of ["sm", "md", "lg"]) {
+        css += `.cz-switch-${size} {
+  width: var(--cz-switch-width-${size});
+  height: var(--cz-switch-height-${size});
+}
+.cz-switch-${size} .cz-switch-thumb {
+  width: var(--cz-switch-thumb-size-${size});
+  height: var(--cz-switch-thumb-size-${size});
+  transform: translateX(var(--cz-switch-thumb-offset));
+}
+.cz-switch-${size}[data-state="checked"] .cz-switch-thumb,
+.cz-switch-${size}.cz-switch-checked .cz-switch-thumb {
+  transform: translateX(calc(var(--cz-switch-width-${size}) - var(--cz-switch-thumb-size-${size}) - var(--cz-switch-thumb-offset)));
+}
+`;
+    }
+    return css;
+}
+function generateSwitchLabel() {
+    return `/* Switch with Label */
+.cz-switch-container {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  cursor: pointer;
+}
+.cz-switch-container.cz-disabled {
+  opacity: var(--cz-switch-disabled-opacity);
+  cursor: not-allowed;
+}
+
+.cz-switch-label-left { flex-direction: row-reverse; }
+.cz-switch-label-right { flex-direction: row; }
+
+.cz-switch-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.cz-switch-label {
+  font-size: var(--cz-font-size-sm);
+  font-weight: var(--cz-font-weight-medium);
+  color: hsl(var(--cz-color-fg));
+  line-height: 1.5;
+}
+
+.cz-switch-description {
+  font-size: var(--cz-font-size-xs);
+  color: hsl(var(--cz-color-mutedFg));
+}
+`;
+}

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

@@ -0,0 +1,9 @@
+/**
+ * CZero Utilities CSS Generator
+ * Generates utility classes from config
+ */
+/**
+ * Generate utility CSS classes
+ * These are helper classes used by components and available to users
+ */
+export declare function generateUtilitiesCSS(): string;

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

@@ -0,0 +1,150 @@
+/**
+ * CZero Utilities CSS Generator
+ * Generates utility classes from config
+ */
+/**
+ * Generate utility CSS classes
+ * These are helper classes used by components and available to users
+ */
+export function generateUtilitiesCSS() {
+    return `/**
+ * CZero Utility Classes
+ */
+
+/* Display */
+.cz-inline-flex { display: inline-flex; }
+.cz-flex { display: flex; }
+.cz-flex-col { flex-direction: column; }
+.cz-items-center { align-items: center; }
+.cz-justify-center { justify-content: center; }
+.cz-flex-wrap { flex-wrap: wrap; }
+
+/* Gap */
+.cz-gap-1 { gap: 0.25rem; }
+.cz-gap-1\\.5 { gap: 0.375rem; }
+.cz-gap-2 { gap: 0.5rem; }
+
+/* Width */
+.cz-w-full { width: 100%; }
+
+/* Whitespace */
+.cz-whitespace-nowrap { white-space: nowrap; }
+
+/* Opacity */
+.cz-opacity-25 { opacity: 0.25; }
+.cz-opacity-50 { opacity: 0.5; }
+.cz-opacity-75 { opacity: 0.75; }
+
+/* Animation */
+@keyframes cz-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+.cz-animate-spin { animation: cz-spin 1s linear infinite; }
+
+/* Sizing */
+.cz-h-4 { height: 1rem; }
+.cz-w-4 { width: 1rem; }
+.cz-h-8 { height: 2rem; }
+.cz-h-10 { height: 2.5rem; }
+.cz-h-12 { height: 3rem; }
+
+/* Padding */
+.cz-px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
+.cz-px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
+.cz-px-4 { padding-left: 1rem; padding-right: 1rem; }
+.cz-px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
+.cz-py-0\\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
+.cz-p-lg { padding: var(--cz-spacing-lg); }
+.cz-pb-md { padding-bottom: var(--cz-spacing-md); }
+.cz-pt-md { padding-top: var(--cz-spacing-md); }
+.cz-px-1\\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
+
+/* Margin */
+.cz-mb-md { margin-bottom: var(--cz-spacing-md); }
+.cz-mt-md { margin-top: var(--cz-spacing-md); }
+
+/* Typography */
+.cz-text-xs { font-size: var(--cz-font-size-xs); }
+.cz-text-sm { font-size: var(--cz-font-size-sm); }
+.cz-text-md { font-size: var(--cz-font-size-md); }
+.cz-text-lg { font-size: var(--cz-font-size-lg); }
+.cz-font-medium { font-weight: var(--cz-font-weight-medium); }
+.cz-font-semibold { font-weight: var(--cz-font-weight-semibold); }
+.cz-leading-tight { line-height: var(--cz-font-lineHeight-tight); }
+
+/* Colors - Background */
+.cz-bg-bg { background-color: hsl(var(--cz-color-bg)); }
+.cz-bg-primary { background-color: hsl(var(--cz-color-primary)); }
+.cz-bg-secondary { background-color: hsl(var(--cz-color-secondary)); }
+.cz-bg-muted { background-color: hsl(var(--cz-color-muted)); }
+.cz-bg-danger { background-color: hsl(var(--cz-color-danger)); }
+.cz-bg-success { background-color: hsl(var(--cz-color-success)); }
+.cz-bg-warning { background-color: hsl(var(--cz-color-warning)); }
+.cz-bg-transparent { background-color: transparent; }
+
+/* Colors - Text */
+.cz-text-fg { color: hsl(var(--cz-color-fg)); }
+.cz-text-primary-fg { color: hsl(var(--cz-color-primaryFg)); }
+.cz-text-secondary-fg { color: hsl(var(--cz-color-secondaryFg)); }
+.cz-text-muted-fg { color: hsl(var(--cz-color-mutedFg)); }
+.cz-text-danger { color: hsl(var(--cz-color-danger)); }
+.cz-text-danger-fg { color: hsl(var(--cz-color-dangerFg)); }
+.cz-text-success-fg { color: hsl(var(--cz-color-successFg)); }
+.cz-text-warning-fg { color: hsl(var(--cz-color-warningFg)); }
+
+/* Border */
+.cz-border { border-width: 1px; border-style: solid; }
+.cz-border-b { border-bottom-width: 1px; border-bottom-style: solid; }
+.cz-border-t { border-top-width: 1px; border-top-style: solid; }
+.cz-border-border { border-color: hsl(var(--cz-color-border)); }
+.cz-border-danger { border-color: hsl(var(--cz-color-danger)); }
+
+/* Border Radius */
+.cz-rounded-sm { border-radius: var(--cz-radius-sm); }
+.cz-rounded-md { border-radius: var(--cz-radius-md); }
+.cz-rounded-lg { border-radius: var(--cz-radius-lg); }
+.cz-rounded-full { border-radius: var(--cz-radius-full); }
+
+/* Shadow */
+.cz-shadow-sm { box-shadow: var(--cz-shadow-sm); }
+
+/* Transitions */
+.cz-transition { transition: all var(--cz-transition-fast); }
+
+/* States */
+.cz-disabled {
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Focus */
+.cz-focus-ring:focus,
+.cz-focus-ring:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px hsl(var(--cz-color-bg)), 0 0 0 4px hsl(var(--cz-color-ring));
+}
+
+/* Hover states */
+.cz-hover-opacity:hover { opacity: 0.9; }
+.cz-hover-muted:hover { background-color: hsl(var(--cz-color-muted)); }
+
+/* Label & Error */
+.cz-label {
+  font-size: var(--cz-font-size-sm);
+  font-weight: var(--cz-font-weight-medium);
+  color: hsl(var(--cz-color-fg));
+}
+
+.cz-label-required {
+  color: hsl(var(--cz-color-danger));
+  margin-left: 0.25rem;
+}
+
+.cz-error {
+  font-size: var(--cz-font-size-sm);
+  color: hsl(var(--cz-color-danger));
+}
+`;
+}

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

@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+/**
+ * CZero CLI
+ * Generates CSS from user's theme configuration
+ *
+ * Usage: npx czero build [--config czero.config.js] [--output czero.css]
+ */
+export {};