czero 0.2.0 → 0.2.5

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

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

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

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

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

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

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

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

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

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