czero 0.1.0 → 2.0.0

package/dist/cli/index.js

@@ -4,6 +4,3759 @@
 import * as fs from "fs";
 import * as path from "path";
 import { fileURLToPath } from "url";
+
+// src/core/component-defaults.ts
+var 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" }
+  }
+};
+
+// cli/utils/deep-merge.ts
+function deepMerge(target, source) {
+  const result = { ...target };
+  for (const key of Object.keys(source)) {
+    const sourceValue = source[key];
+    const targetValue = target[key];
+    if (sourceValue === null || sourceValue === void 0) {
+      result[key] = sourceValue;
+      continue;
+    }
+    if (typeof sourceValue === "object" && !Array.isArray(sourceValue) && typeof targetValue === "object" && !Array.isArray(targetValue) && targetValue !== null) {
+      result[key] = deepMerge(targetValue, sourceValue);
+    } else {
+      result[key] = sourceValue;
+    }
+  }
+  return result;
+}
+
+// cli/token-resolver.ts
+function resolveToken(value) {
+  if (!value) return "";
+  if (typeof value !== "string") {
+    return "";
+  }
+  if (!value.startsWith("$")) {
+    return value;
+  }
+  const opacityMatch = value.match(/^\$([a-zA-Z-]+)\s*\/\s*(.+)$/);
+  if (opacityMatch) {
+    const [, tokenName2, opacity] = opacityMatch;
+    const cssVar2 = tokenNameToCssVar(tokenName2);
+    if (tokenName2.startsWith("color-")) {
+      return `hsl(var(${cssVar2}) / ${opacity})`;
+    }
+    return `var(${cssVar2}) / ${opacity}`;
+  }
+  const tokenName = value.slice(1);
+  const cssVar = tokenNameToCssVar(tokenName);
+  if (tokenName.startsWith("color-")) {
+    return `hsl(var(${cssVar}))`;
+  }
+  return `var(${cssVar})`;
+}
+function tokenNameToCssVar(tokenName) {
+  if (tokenName.startsWith("font-")) {
+    const fontPart = tokenName.slice(5);
+    if (["xs", "sm", "md", "lg", "xl"].includes(fontPart)) {
+      return `--cz-font-size-${fontPart}`;
+    }
+    if (["normal", "medium", "semibold", "bold"].includes(fontPart)) {
+      return `--cz-font-weight-${fontPart}`;
+    }
+    if (["tight", "relaxed"].includes(fontPart)) {
+      return `--cz-font-lineHeight-${fontPart}`;
+    }
+    return `--cz-font-${fontPart}`;
+  }
+  return `--cz-${tokenName}`;
+}
+function toKebabCase(str) {
+  return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function componentVarName(component, property, size) {
+  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}`;
+}
+
+// cli/generators/button.ts
+function generateButtonCSS(config) {
+  let css = "";
+  css += "/* ===== BUTTON ===== */\n\n";
+  css += generateButtonVariables(config);
+  css += "\n";
+  css += generateButtonBase();
+  css += "\n";
+  css += generateButtonSizes(config);
+  css += "\n";
+  if (config.variants) {
+    css += generateButtonVariants(config.variants);
+    css += "\n";
+  }
+  css += generateButtonIcon(config);
+  css += "\n";
+  css += generateButtonLoading(config);
+  css += "\n";
+  if (config.customCSS) {
+    css += `/* Custom Button CSS */
+${config.customCSS}
+`;
+  }
+  return css;
+}
+function generateButtonVariables(config) {
+  const vars = [];
+  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)};`);
+    }
+  }
+  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)};`);
+  }
+  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};`);
+  }
+  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};`);
+  }
+  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 {
+${vars.join("\n")}
+}
+`;
+}
+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);
+}
+`;
+}
+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});
+}
+`;
+  }
+  return css;
+}
+function generateButtonVariants(variants) {
+  let css = "/* Button Variants */\n";
+  for (const [name, variant] of Object.entries(variants)) {
+    css += `.cz-btn-${name} {
+`;
+    css += `  background: var(--cz-btn-${name}-bg);
+`;
+    css += `  color: var(--cz-btn-${name}-color);
+`;
+    if (variant.borderColor && variant.borderColor !== "transparent") {
+      css += `  border-color: var(--cz-btn-${name}-border-color);
+`;
+    }
+    if (variant.textDecoration) {
+      css += `  text-decoration: ${variant.textDecoration};
+`;
+      css += `  text-underline-offset: 4px;
+`;
+    }
+    css += `}
+`;
+    if (variant.hover) {
+      css += `.cz-btn-${name}:hover {
+`;
+      if (variant.hover.opacity) {
+        css += `  opacity: ${variant.hover.opacity};
+`;
+      }
+      if (variant.hover.bg) {
+        css += `  background: ${resolveToken(variant.hover.bg)};
+`;
+      }
+      if (variant.textDecoration) {
+        css += `  text-decoration-thickness: 2px;
+`;
+      }
+      css += `}
+`;
+    }
+  }
+  return css;
+}
+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); }
+`;
+}
+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; }
+`;
+}
+
+// cli/generators/input.ts
+function generateInputCSS(config) {
+  let css = "";
+  css += "/* ===== INPUT ===== */\n\n";
+  css += generateInputVariables(config);
+  css += "\n";
+  css += generateInputBase();
+  css += "\n";
+  css += generateInputSizes();
+  css += "\n";
+  css += generateInputStates(config);
+  css += "\n";
+  css += generateInputIcons(config);
+  css += "\n";
+  css += generateInputClear();
+  css += "\n";
+  if (config.customCSS) {
+    css += `/* Custom Input CSS */
+${config.customCSS}
+`;
+  }
+  return css;
+}
+function generateInputVariables(config) {
+  const vars = [];
+  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)};`);
+    }
+  }
+  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)};`);
+  }
+  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)};`);
+  }
+  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 {
+${vars.join("\n")}
+}
+`;
+}
+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);
+}
+`;
+}
+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);
+}
+`;
+}
+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);
+}
+`;
+}
+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; }
+`;
+}
+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; }
+`;
+}
+
+// cli/generators/card.ts
+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 */
+${config.customCSS}
+`;
+  }
+  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)};`);
+  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)};`);
+  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)};`);
+  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)};`);
+  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 {
+${vars.join("\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);
+}
+`;
+}
+
+// cli/generators/switch.ts
+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 */
+${config.customCSS}
+`;
+  }
+  return css;
+}
+function generateSwitchVariables(config) {
+  const vars = [];
+  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)};`);
+    }
+  }
+  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)};`);
+  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 {
+${vars.join("\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));
+}
+`;
+}
+
+// cli/generators/checkbox.ts
+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 */
+${config.customCSS}
+`;
+  }
+  return css;
+}
+function generateCheckboxVariables(config) {
+  const vars = [];
+  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};`);
+    }
+  }
+  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};`);
+  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 {
+${vars.join("\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));
+}
+`;
+}
+
+// cli/generators/textarea.ts
+function generateTextareaCSS(config) {
+  let css = "/* ===== TEXTAREA ===== */\n\n";
+  css += generateTextareaVariables(config);
+  css += "\n";
+  css += generateTextareaBase();
+  css += "\n";
+  css += generateTextareaSizes();
+  css += "\n";
+  css += generateTextareaStates(config);
+  css += "\n";
+  if (config.customCSS) css += `/* Custom Textarea CSS */
+${config.customCSS}
+`;
+  return css;
+}
+function generateTextareaVariables(config) {
+  const vars = [];
+  if (config.minHeight) vars.push(`  --cz-textarea-min-height: ${config.minHeight};`);
+  if (config.borderRadius) vars.push(`  --cz-textarea-border-radius: ${resolveToken(config.borderRadius)};`);
+  if (config.borderWidth) vars.push(`  --cz-textarea-border-width: ${config.borderWidth};`);
+  if (config.borderColor) vars.push(`  --cz-textarea-border-color: ${resolveToken(config.borderColor)};`);
+  if (config.bg) vars.push(`  --cz-textarea-bg: ${resolveToken(config.bg)};`);
+  if (config.color) vars.push(`  --cz-textarea-color: ${resolveToken(config.color)};`);
+  if (config.placeholderColor) vars.push(`  --cz-textarea-placeholder-color: ${resolveToken(config.placeholderColor)};`);
+  if (config.paddingX) {
+    for (const [size, value] of Object.entries(config.paddingX)) {
+      vars.push(`  --cz-textarea-padding-x-${size}: ${value};`);
+    }
+  }
+  if (config.paddingY) {
+    for (const [size, value] of Object.entries(config.paddingY)) {
+      vars.push(`  --cz-textarea-padding-y-${size}: ${value};`);
+    }
+  }
+  if (config.fontSize && typeof config.fontSize === "object") {
+    for (const [size, value] of Object.entries(config.fontSize)) {
+      vars.push(`  --cz-textarea-font-size-${size}: ${resolveToken(value)};`);
+    }
+  }
+  if (config.states?.focus?.borderColor) vars.push(`  --cz-textarea-focus-border-color: ${resolveToken(config.states.focus.borderColor)};`);
+  if (config.states?.focus?.shadow) vars.push(`  --cz-textarea-focus-shadow: ${config.states.focus.shadow};`);
+  if (config.states?.disabled?.opacity) vars.push(`  --cz-textarea-disabled-opacity: ${config.states.disabled.opacity};`);
+  return `:root {
+${vars.join("\n")}
+}
+`;
+}
+function generateTextareaBase() {
+  return `.cz-textarea-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.cz-textarea {
+  width: 100%;
+  min-height: var(--cz-textarea-min-height);
+  border-radius: var(--cz-textarea-border-radius);
+  border: var(--cz-textarea-border-width) solid var(--cz-textarea-border-color);
+  background-color: var(--cz-textarea-bg);
+  color: var(--cz-textarea-color);
+  resize: vertical;
+  transition: all var(--cz-transition-fast);
+}
+
+.cz-textarea::placeholder {
+  color: var(--cz-textarea-placeholder-color);
+}
+
+.cz-textarea-auto-resize {
+  resize: none;
+  overflow: hidden;
+}
+`;
+}
+function generateTextareaSizes() {
+  return `/* Textarea Sizes */
+.cz-textarea-sm {
+  padding: var(--cz-textarea-padding-y-sm) var(--cz-textarea-padding-x-sm);
+  font-size: var(--cz-textarea-font-size-sm);
+}
+.cz-textarea-md {
+  padding: var(--cz-textarea-padding-y-md) var(--cz-textarea-padding-x-md);
+  font-size: var(--cz-textarea-font-size-md);
+}
+.cz-textarea-lg {
+  padding: var(--cz-textarea-padding-y-lg) var(--cz-textarea-padding-x-lg);
+  font-size: var(--cz-textarea-font-size-lg);
+}
+`;
+}
+function generateTextareaStates(config) {
+  return `.cz-textarea:focus {
+  outline: none;
+  border-color: var(--cz-textarea-focus-border-color);
+  box-shadow: var(--cz-textarea-focus-shadow);
+}
+
+.cz-textarea:disabled {
+  cursor: not-allowed;
+  opacity: var(--cz-textarea-disabled-opacity);
+}
+
+.cz-textarea-description {
+  font-size: var(--cz-font-size-xs);
+  color: var(--cz-textarea-placeholder-color);
+}
+`;
+}
+
+// cli/generators/select.ts
+function generateSelectCSS(config) {
+  let css = "/* ===== SELECT ===== */\n\n";
+  css += generateSelectVariables(config);
+  css += "\n";
+  css += generateSelectBase();
+  css += "\n";
+  css += generateSelectSizes();
+  css += "\n";
+  css += generateSelectContent(config);
+  css += "\n";
+  if (config.customCSS) css += `/* Custom Select CSS */
+${config.customCSS}
+`;
+  return css;
+}
+function generateSelectVariables(config) {
+  const vars = [];
+  if (config.height) {
+    for (const [size, value] of Object.entries(config.height)) {
+      vars.push(`  --cz-select-height-${size}: ${value};`);
+    }
+  }
+  if (config.paddingX) {
+    for (const [size, value] of Object.entries(config.paddingX)) {
+      vars.push(`  --cz-select-padding-x-${size}: ${value};`);
+    }
+  }
+  if (config.fontSize && typeof config.fontSize === "object") {
+    for (const [size, value] of Object.entries(config.fontSize)) {
+      vars.push(`  --cz-select-font-size-${size}: ${resolveToken(value)};`);
+    }
+  }
+  if (config.borderRadius) vars.push(`  --cz-select-border-radius: ${resolveToken(config.borderRadius)};`);
+  if (config.borderWidth) vars.push(`  --cz-select-border-width: ${config.borderWidth};`);
+  if (config.borderColor) vars.push(`  --cz-select-border-color: ${resolveToken(config.borderColor)};`);
+  if (config.bg) vars.push(`  --cz-select-bg: ${resolveToken(config.bg)};`);
+  if (config.color) vars.push(`  --cz-select-color: ${resolveToken(config.color)};`);
+  if (config.iconSize) vars.push(`  --cz-select-icon-size: ${config.iconSize};`);
+  if (config.states?.focus?.ringWidth) vars.push(`  --cz-select-focus-ring-width: ${config.states.focus.ringWidth};`);
+  if (config.states?.focus?.ringColor) vars.push(`  --cz-select-focus-ring-color: ${resolveToken(config.states.focus.ringColor)};`);
+  if (config.states?.disabled?.opacity) vars.push(`  --cz-select-disabled-opacity: ${config.states.disabled.opacity};`);
+  if (config.content?.bg) vars.push(`  --cz-select-content-bg: ${resolveToken(config.content.bg)};`);
+  if (config.content?.borderRadius) vars.push(`  --cz-select-content-border-radius: ${resolveToken(config.content.borderRadius)};`);
+  if (config.content?.shadow) vars.push(`  --cz-select-content-shadow: ${resolveToken(config.content.shadow)};`);
+  if (config.content?.padding) vars.push(`  --cz-select-content-padding: ${config.content.padding};`);
+  if (config.item?.paddingX) vars.push(`  --cz-select-item-padding-x: ${config.item.paddingX};`);
+  if (config.item?.paddingY) vars.push(`  --cz-select-item-padding-y: ${config.item.paddingY};`);
+  if (config.item?.borderRadius) vars.push(`  --cz-select-item-border-radius: ${resolveToken(config.item.borderRadius)};`);
+  if (config.item?.hoverBg) vars.push(`  --cz-select-item-hover-bg: ${resolveToken(config.item.hoverBg)};`);
+  return `:root {
+${vars.join("\n")}
+}
+`;
+}
+function generateSelectBase() {
+  return `.cz-select-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: var(--cz-select-border-radius);
+  border: var(--cz-select-border-width) solid var(--cz-select-border-color);
+  background-color: var(--cz-select-bg);
+  color: var(--cz-select-color);
+  transition: all var(--cz-transition-fast);
+  cursor: pointer;
+  gap: 0.5rem;
+}
+
+.cz-select-trigger:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--cz-select-focus-ring-width) var(--cz-select-focus-ring-color);
+}
+
+.cz-select-trigger:disabled {
+  cursor: not-allowed;
+  opacity: var(--cz-select-disabled-opacity);
+}
+
+.cz-select-trigger[data-placeholder] {
+  color: hsl(var(--cz-color-mutedFg));
+}
+
+.cz-select-icon {
+  width: var(--cz-select-icon-size);
+  height: var(--cz-select-icon-size);
+  color: hsl(var(--cz-color-mutedFg));
+  flex-shrink: 0;
+}
+`;
+}
+function generateSelectSizes() {
+  return `/* Select Sizes */
+.cz-select-sm {
+  height: var(--cz-select-height-sm);
+  padding: 0 var(--cz-select-padding-x-sm);
+  font-size: var(--cz-select-font-size-sm);
+}
+.cz-select-md {
+  height: var(--cz-select-height-md);
+  padding: 0 var(--cz-select-padding-x-md);
+  font-size: var(--cz-select-font-size-md);
+}
+.cz-select-lg {
+  height: var(--cz-select-height-lg);
+  padding: 0 var(--cz-select-padding-x-lg);
+  font-size: var(--cz-select-font-size-lg);
+}
+`;
+}
+function generateSelectContent(config) {
+  return `/* Select Content */
+.cz-select-content {
+  overflow: hidden;
+  background-color: var(--cz-select-content-bg);
+  border-radius: var(--cz-select-content-border-radius);
+  box-shadow: var(--cz-select-content-shadow);
+  border: 1px solid hsl(var(--cz-color-border));
+  padding: var(--cz-select-content-padding);
+  z-index: 50;
+}
+
+.cz-select-viewport {
+  padding: 0;
+}
+
+.cz-select-item {
+  display: flex;
+  align-items: center;
+  padding: var(--cz-select-item-padding-y) var(--cz-select-item-padding-x);
+  border-radius: var(--cz-select-item-border-radius);
+  font-size: var(--cz-font-size-sm);
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+  transition: background-color var(--cz-transition-fast);
+}
+
+.cz-select-item:hover,
+.cz-select-item[data-highlighted] {
+  background-color: var(--cz-select-item-hover-bg);
+}
+
+.cz-select-item[data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.cz-select-item-indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  margin-right: 0.5rem;
+}
+
+.cz-select-separator {
+  height: 1px;
+  background-color: hsl(var(--cz-color-border));
+  margin: 0.25rem 0;
+}
+
+.cz-select-label {
+  padding: var(--cz-select-item-padding-y) var(--cz-select-item-padding-x);
+  font-size: var(--cz-font-size-xs);
+  font-weight: var(--cz-font-weight-medium);
+  color: hsl(var(--cz-color-mutedFg));
+}
+`;
+}
+
+// cli/generators/radio.ts
+function generateRadioCSS(config) {
+  let css = "/* ===== RADIO ===== */\n\n";
+  css += generateRadioVariables(config);
+  css += "\n";
+  css += generateRadioBase();
+  css += "\n";
+  css += generateRadioGroup();
+  css += "\n";
+  if (config.customCSS) css += `/* Custom Radio CSS */
+${config.customCSS}
+`;
+  return css;
+}
+function generateRadioVariables(config) {
+  const vars = [];
+  if (config.size) vars.push(`  --cz-radio-size: ${config.size};`);
+  if (config.indicatorSize) vars.push(`  --cz-radio-indicator-size: ${config.indicatorSize};`);
+  if (config.borderWidth) vars.push(`  --cz-radio-border-width: ${config.borderWidth};`);
+  if (config.borderColor) vars.push(`  --cz-radio-border-color: ${resolveToken(config.borderColor)};`);
+  if (config.bg) vars.push(`  --cz-radio-bg: ${resolveToken(config.bg)};`);
+  if (config.checkedBorderColor) vars.push(`  --cz-radio-checked-border-color: ${resolveToken(config.checkedBorderColor)};`);
+  if (config.indicatorBg) vars.push(`  --cz-radio-indicator-bg: ${resolveToken(config.indicatorBg)};`);
+  if (config.labelFontSize) vars.push(`  --cz-radio-label-font-size: ${resolveToken(config.labelFontSize)};`);
+  if (config.labelGap) vars.push(`  --cz-radio-label-gap: ${config.labelGap};`);
+  if (config.states?.hover?.borderColor) vars.push(`  --cz-radio-hover-border-color: ${resolveToken(config.states.hover.borderColor)};`);
+  if (config.states?.focus?.ringWidth) vars.push(`  --cz-radio-focus-ring-width: ${config.states.focus.ringWidth};`);
+  if (config.states?.focus?.ringColor) vars.push(`  --cz-radio-focus-ring-color: ${resolveToken(config.states.focus.ringColor)};`);
+  if (config.states?.disabled?.opacity) vars.push(`  --cz-radio-disabled-opacity: ${config.states.disabled.opacity};`);
+  return `:root {
+${vars.join("\n")}
+}
+`;
+}
+function generateRadioBase() {
+  return `.cz-radio-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--cz-radio-label-gap);
+  cursor: pointer;
+  user-select: none;
+}
+
+.cz-radio-wrapper.cz-disabled {
+  cursor: not-allowed;
+  opacity: var(--cz-radio-disabled-opacity);
+}
+
+.cz-radio {
+  all: unset;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--cz-radio-size);
+  height: var(--cz-radio-size);
+  border-radius: var(--cz-radius-full);
+  border: var(--cz-radio-border-width) solid var(--cz-radio-border-color);
+  background-color: var(--cz-radio-bg);
+  transition: all var(--cz-transition-fast);
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.cz-radio:hover {
+  border-color: var(--cz-radio-hover-border-color);
+}
+
+.cz-radio:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px hsl(var(--cz-color-bg)), 0 0 0 4px var(--cz-radio-focus-ring-color);
+}
+
+.cz-radio:disabled {
+  cursor: not-allowed;
+  opacity: var(--cz-radio-disabled-opacity);
+}
+
+.cz-radio[data-state="checked"] {
+  border-color: var(--cz-radio-checked-border-color);
+}
+
+.cz-radio-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.cz-radio-indicator::after {
+  content: "";
+  display: block;
+  width: var(--cz-radio-indicator-size);
+  height: var(--cz-radio-indicator-size);
+  border-radius: var(--cz-radius-full);
+  background-color: var(--cz-radio-indicator-bg);
+}
+
+.cz-radio-label {
+  font-size: var(--cz-radio-label-font-size);
+  color: hsl(var(--cz-color-fg));
+}
+`;
+}
+function generateRadioGroup() {
+  return `/* Radio Group */
+.cz-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.cz-radio-group-horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.cz-radio-group-item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--cz-radio-label-gap);
+}
+
+.cz-radio-group-item .cz-radio {
+  margin-top: 0.125rem;
+}
+
+.cz-radio-group-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.cz-radio-group-label {
+  font-size: var(--cz-font-size-sm);
+  font-weight: var(--cz-font-weight-medium);
+  color: hsl(var(--cz-color-fg));
+}
+
+.cz-radio-group-description {
+  font-size: var(--cz-font-size-xs);
+  color: hsl(var(--cz-color-mutedFg));
+}
+`;
+}
+
+// cli/generators/label.ts
+function generateLabelCSS(config) {
+  let css = "/* ===== LABEL ===== */\n\n";
+  css += generateLabelVariables(config);
+  css += "\n";
+  css += generateLabelBase();
+  css += "\n";
+  if (config.customCSS) css += `/* Custom Label CSS */
+${config.customCSS}
+`;
+  return css;
+}
+function generateLabelVariables(config) {
+  const vars = [];
+  if (config.fontSize) vars.push(`  --cz-label-font-size: ${resolveToken(config.fontSize)};`);
+  if (config.fontWeight) vars.push(`  --cz-label-font-weight: ${resolveToken(config.fontWeight)};`);
+  if (config.color) vars.push(`  --cz-label-color: ${resolveToken(config.color)};`);
+  if (config.requiredColor) vars.push(`  --cz-label-required-color: ${resolveToken(config.requiredColor)};`);
+  if (config.disabledOpacity) vars.push(`  --cz-label-disabled-opacity: ${config.disabledOpacity};`);
+  return `:root {
+${vars.join("\n")}
+}
+`;
+}
+function generateLabelBase() {
+  return `.cz-label {
+  font-size: var(--cz-label-font-size);
+  font-weight: var(--cz-label-font-weight);
+  color: var(--cz-label-color);
+}
+
+.cz-label-required {
+  color: var(--cz-label-required-color);
+  margin-left: 0.25rem;
+}
+
+.cz-label-disabled {
+  opacity: var(--cz-label-disabled-opacity);
+  cursor: not-allowed;
+}
+
+.cz-error {
+  font-size: var(--cz-font-size-sm);
+  color: hsl(var(--cz-color-danger));
+}
+`;
+}
+
+// cli/generators/badge.ts
+function generateBadgeCSS(config) {
+  let css = "/* ===== BADGE ===== */\n\n";
+  css += generateBadgeVariables(config);
+  css += "\n";
+  css += generateBadgeBase();
+  css += "\n";
+  css += generateBadgeSizes();
+  css += "\n";
+  css += generateBadgeVariants(config);
+  css += "\n";
+  if (config.customCSS) css += `/* Custom Badge CSS */
+${config.customCSS}
+`;
+  return css;
+}
+function generateBadgeVariables(config) {
+  const vars = [];
+  if (config.paddingX) {
+    for (const [size, value] of Object.entries(config.paddingX)) {
+      vars.push(`  --cz-badge-padding-x-${size}: ${value};`);
+    }
+  }
+  if (config.paddingY) {
+    for (const [size, value] of Object.entries(config.paddingY)) {
+      vars.push(`  --cz-badge-padding-y-${size}: ${value};`);
+    }
+  }
+  if (config.fontSize) {
+    for (const [size, value] of Object.entries(config.fontSize)) {
+      vars.push(`  --cz-badge-font-size-${size}: ${resolveToken(value)};`);
+    }
+  }
+  if (config.fontWeight) vars.push(`  --cz-badge-font-weight: ${resolveToken(config.fontWeight)};`);
+  if (config.borderRadius) vars.push(`  --cz-badge-border-radius: ${resolveToken(config.borderRadius)};`);
+  if (config.variants) {
+    for (const [name, variant] of Object.entries(config.variants)) {
+      if (variant.bg) vars.push(`  --cz-badge-${name}-bg: ${resolveToken(variant.bg)};`);
+      if (variant.color) vars.push(`  --cz-badge-${name}-color: ${resolveToken(variant.color)};`);
+      if (variant.borderColor) vars.push(`  --cz-badge-${name}-border-color: ${resolveToken(variant.borderColor)};`);
+    }
+  }
+  return `:root {
+${vars.join("\n")}
+}
+`;
+}
+function generateBadgeBase() {
+  return `.cz-badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--cz-badge-border-radius);
+  font-weight: var(--cz-badge-font-weight);
+  white-space: nowrap;
+  border: 1px solid transparent;
+}
+`;
+}
+function generateBadgeSizes() {
+  return `/* Badge Sizes */
+.cz-badge-sm {
+  padding: var(--cz-badge-padding-y-sm) var(--cz-badge-padding-x-sm);
+  font-size: var(--cz-badge-font-size-sm);
+}
+.cz-badge-md {
+  padding: var(--cz-badge-padding-y-md) var(--cz-badge-padding-x-md);
+  font-size: var(--cz-badge-font-size-md);
+}
+`;
+}
+function generateBadgeVariants(config) {
+  let css = "/* Badge Variants */\n";
+  const defaultVariants = ["default", "primary", "success", "danger", "warning", "outline"];
+  for (const name of defaultVariants) {
+    css += `.cz-badge-${name} {
+  background: var(--cz-badge-${name}-bg);
+  color: var(--cz-badge-${name}-color);
+}
+`;
+  }
+  if (config.variants) {
+    for (const name of Object.keys(config.variants)) {
+      if (!defaultVariants.includes(name)) {
+        css += `.cz-badge-${name} {
+  background: var(--cz-badge-${name}-bg);
+  color: var(--cz-badge-${name}-color);
+}
+`;
+      }
+    }
+  }
+  return css;
+}
+
+// cli/generators/avatar.ts
+function generateAvatarCSS(config) {
+  let css = "/* ===== AVATAR ===== */\n\n";
+  css += generateAvatarVariables(config);
+  css += "\n";
+  css += generateAvatarBase();
+  css += "\n";
+  css += generateAvatarSizes();
+  css += "\n";
+  if (config.customCSS) css += `/* Custom Avatar CSS */
+${config.customCSS}
+`;
+  return css;
+}
+function generateAvatarVariables(config) {
+  const vars = [];
+  if (config.size) {
+    for (const [size, value] of Object.entries(config.size)) {
+      vars.push(`  --cz-avatar-size-${size}: ${value};`);
+    }
+  }
+  if (config.borderRadius) vars.push(`  --cz-avatar-border-radius: ${resolveToken(config.borderRadius)};`);
+  if (config.fallbackBg) vars.push(`  --cz-avatar-fallback-bg: ${resolveToken(config.fallbackBg)};`);
+  if (config.fallbackColor) vars.push(`  --cz-avatar-fallback-color: ${resolveToken(config.fallbackColor)};`);
+  if (config.fallbackFontWeight) vars.push(`  --cz-avatar-fallback-font-weight: ${resolveToken(config.fallbackFontWeight)};`);
+  return `:root {
+${vars.join("\n")}
+}
+`;
+}
+function generateAvatarBase() {
+  return `.cz-avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: var(--cz-avatar-border-radius);
+  background-color: var(--cz-avatar-fallback-bg);
+  flex-shrink: 0;
+}
+
+.cz-avatar-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.cz-avatar-fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-weight: var(--cz-avatar-fallback-font-weight);
+  color: var(--cz-avatar-fallback-color);
+  text-transform: uppercase;
+}
+`;
+}
+function generateAvatarSizes() {
+  return `/* Avatar Sizes */
+.cz-avatar-sm {
+  width: var(--cz-avatar-size-sm);
+  height: var(--cz-avatar-size-sm);
+  font-size: calc(var(--cz-avatar-size-sm) * 0.4);
+}
+.cz-avatar-md {
+  width: var(--cz-avatar-size-md);
+  height: var(--cz-avatar-size-md);
+  font-size: calc(var(--cz-avatar-size-md) * 0.4);
+}
+.cz-avatar-lg {
+  width: var(--cz-avatar-size-lg);
+  height: var(--cz-avatar-size-lg);
+  font-size: calc(var(--cz-avatar-size-lg) * 0.4);
+}
+.cz-avatar-xl {
+  width: var(--cz-avatar-size-xl);
+  height: var(--cz-avatar-size-xl);
+  font-size: calc(var(--cz-avatar-size-xl) * 0.4);
+}
+
+/* Avatar Group */
+.cz-avatar-group {
+  display: flex;
+}
+
+.cz-avatar-group .cz-avatar {
+  border: 2px solid hsl(var(--cz-color-bg));
+  margin-left: -0.5rem;
+}
+
+.cz-avatar-group .cz-avatar:first-child {
+  margin-left: 0;
+}
+`;
+}
+
+// cli/generators/table.ts
+function generateTableCSS(config) {
+  let css = "/* ===== TABLE ===== */\n\n";
+  css += generateTableVariables(config);
+  css += "\n";
+  css += generateTableBase();
+  css += "\n";
+  if (config.customCSS) css += `/* Custom Table CSS */
+${config.customCSS}
+`;
+  return css;
+}
+function generateTableVariables(config) {
+  const vars = [];
+  if (config.borderColor) vars.push(`  --cz-table-border-color: ${resolveToken(config.borderColor)};`);
+  if (config.headerBg) vars.push(`  --cz-table-header-bg: ${resolveToken(config.headerBg)};`);
+  if (config.headerFontWeight) vars.push(`  --cz-table-header-font-weight: ${resolveToken(config.headerFontWeight)};`);
+  if (config.cellPaddingX) vars.push(`  --cz-table-cell-padding-x: ${config.cellPaddingX};`);
+  if (config.cellPaddingY) vars.push(`  --cz-table-cell-padding-y: ${config.cellPaddingY};`);
+  if (config.rowHoverBg) vars.push(`  --cz-table-row-hover-bg: ${resolveToken(config.rowHoverBg)};`);
+  if (config.stripedBg) vars.push(`  --cz-table-striped-bg: ${resolveToken(config.stripedBg)};`);
+  return `:root {
+${vars.join("\n")}
+}
+`;
+}
+function generateTableBase() {
+  return `.cz-table-wrapper {
+  width: 100%;
+  overflow: auto;
+}
+
+.cz-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--cz-font-size-sm);
+}
+
+.cz-table-header {
+  background-color: var(--cz-table-header-bg);
+}
+
+.cz-table-head {
+  padding: var(--cz-table-cell-padding-y) var(--cz-table-cell-padding-x);
+  text-align: left;
+  font-weight: var(--cz-table-header-font-weight);
+  color: hsl(var(--cz-color-mutedFg));
+  border-bottom: 1px solid var(--cz-table-border-color);
+  white-space: nowrap;
+}
+
+.cz-table-body {
+  color: hsl(var(--cz-color-fg));
+}
+
+.cz-table-row {
+  transition: background-color var(--cz-transition-fast);
+}
+
+.cz-table-row:hover {
+  background-color: var(--cz-table-row-hover-bg);
+}
+
+.cz-table-cell {
+  padding: var(--cz-table-cell-padding-y) var(--cz-table-cell-padding-x);
+  border-bottom: 1px solid var(--cz-table-border-color);
+}
+
+.cz-table-footer {
+  background-color: var(--cz-table-header-bg);
+  font-weight: var(--cz-font-weight-medium);
+}
+
+.cz-table-footer .cz-table-cell {
+  border-bottom: none;
+  border-top: 1px solid var(--cz-table-border-color);
+}
+
+/* Table Striped */
+.cz-table-striped .cz-table-row:nth-child(even) {
+  background-color: var(--cz-table-striped-bg);
+}
+
+/* Table Caption */
+.cz-table-caption {
+  margin-top: 0.5rem;
+  font-size: var(--cz-font-size-sm);
+  color: hsl(var(--cz-color-mutedFg));
+  text-align: center;
+}
+`;
+}
+
+// cli/generators/code.ts
+function generateCodeCSS(config) {
+  let css = "/* ===== CODE ===== */\n\n";
+  css += generateCodeVariables(config);
+  css += "\n";
+  css += generateCodeBase();
+  css += "\n";
+  if (config.customCSS) css += `/* Custom Code CSS */
+${config.customCSS}
+`;
+  return css;
+}
+function generateCodeVariables(config) {
+  const vars = [];
+  if (config.fontFamily) vars.push(`  --cz-code-font-family: ${config.fontFamily};`);
+  if (config.fontSize) vars.push(`  --cz-code-font-size: ${resolveToken(config.fontSize)};`);
+  if (config.paddingX) vars.push(`  --cz-code-padding-x: ${config.paddingX};`);
+  if (config.paddingY) vars.push(`  --cz-code-padding-y: ${config.paddingY};`);
+  if (config.borderRadius) vars.push(`  --cz-code-border-radius: ${resolveToken(config.borderRadius)};`);
+  if (config.bg) vars.push(`  --cz-code-bg: ${resolveToken(config.bg)};`);
+  if (config.color) vars.push(`  --cz-code-color: ${resolveToken(config.color)};`);
+  if (config.blockPadding) vars.push(`  --cz-code-block-padding: ${resolveToken(config.blockPadding)};`);
+  return `:root {
+${vars.join("\n")}
+}
+`;
+}
+function generateCodeBase() {
+  return `.cz-code {
+  font-family: var(--cz-code-font-family);
+  font-size: var(--cz-code-font-size);
+  padding: var(--cz-code-padding-y) var(--cz-code-padding-x);
+  border-radius: var(--cz-code-border-radius);
+  background-color: var(--cz-code-bg);
+  color: var(--cz-code-color);
+}
+
+.cz-code-block {
+  display: block;
+  padding: var(--cz-code-block-padding);
+  overflow-x: auto;
+  white-space: pre;
+}
+`;
+}
+
+// cli/generators/kbd.ts
+function generateKbdCSS(config) {
+  let css = "/* ===== KBD ===== */\n\n";
+  css += generateKbdVariables(config);
+  css += "\n";
+  css += generateKbdBase();
+  css += "\n";
+  if (config.customCSS) css += `/* Custom Kbd CSS */
+${config.customCSS}
+`;
+  return css;
+}
+function generateKbdVariables(config) {
+  const vars = [];
+  if (config.fontFamily) vars.push(`  --cz-kbd-font-family: ${config.fontFamily};`);
+  if (config.fontSize) vars.push(`  --cz-kbd-font-size: ${resolveToken(config.fontSize)};`);
+  if (config.fontWeight) vars.push(`  --cz-kbd-font-weight: ${resolveToken(config.fontWeight)};`);
+  if (config.paddingX) vars.push(`  --cz-kbd-padding-x: ${config.paddingX};`);
+  if (config.paddingY) vars.push(`  --cz-kbd-padding-y: ${config.paddingY};`);
+  if (config.borderRadius) vars.push(`  --cz-kbd-border-radius: ${resolveToken(config.borderRadius)};`);
+  if (config.bg) vars.push(`  --cz-kbd-bg: ${resolveToken(config.bg)};`);
+  if (config.color) vars.push(`  --cz-kbd-color: ${resolveToken(config.color)};`);
+  if (config.borderColor) vars.push(`  --cz-kbd-border-color: ${resolveToken(config.borderColor)};`);
+  if (config.shadow) vars.push(`  --cz-kbd-shadow: ${resolveToken(config.shadow)};`);
+  return `:root {
+${vars.join("\n")}
+}
+`;
+}
+function generateKbdBase() {
+  return `.cz-kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--cz-kbd-font-family);
+  font-size: var(--cz-kbd-font-size);
+  font-weight: var(--cz-kbd-font-weight);
+  padding: var(--cz-kbd-padding-y) var(--cz-kbd-padding-x);
+  border-radius: var(--cz-kbd-border-radius);
+  background-color: var(--cz-kbd-bg);
+  color: var(--cz-kbd-color);
+  border: 1px solid var(--cz-kbd-border-color);
+  box-shadow: var(--cz-kbd-shadow);
+  min-width: 1.5rem;
+}
+`;
+}
+
+// cli/generators/tag.ts
+function generateTagCSS(config) {
+  let css = "/* ===== TAG ===== */\n\n";
+  css += generateTagVariables(config);
+  css += "\n";
+  css += generateTagBase();
+  css += "\n";
+  if (config.customCSS) css += `/* Custom Tag CSS */
+${config.customCSS}
+`;
+  return css;
+}
+function generateTagVariables(config) {
+  const vars = [];
+  if (config.paddingX) vars.push(`  --cz-tag-padding-x: ${config.paddingX};`);
+  if (config.paddingY) vars.push(`  --cz-tag-padding-y: ${config.paddingY};`);
+  if (config.fontSize) vars.push(`  --cz-tag-font-size: ${resolveToken(config.fontSize)};`);
+  if (config.fontWeight) vars.push(`  --cz-tag-font-weight: ${resolveToken(config.fontWeight)};`);
+  if (config.borderRadius) vars.push(`  --cz-tag-border-radius: ${resolveToken(config.borderRadius)};`);
+  if (config.gap) vars.push(`  --cz-tag-gap: ${config.gap};`);
+  if (config.variants) {
+    for (const [name, variant] of Object.entries(config.variants)) {
+      if (variant.bg) vars.push(`  --cz-tag-${name}-bg: ${resolveToken(variant.bg)};`);
+      if (variant.color) vars.push(`  --cz-tag-${name}-color: ${resolveToken(variant.color)};`);
+    }
+  }
+  return `:root {
+${vars.join("\n")}
+}
+`;
+}
+function generateTagBase() {
+  return `.cz-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--cz-tag-gap);
+  padding: var(--cz-tag-padding-y) var(--cz-tag-padding-x);
+  border-radius: var(--cz-tag-border-radius);
+  font-size: var(--cz-tag-font-size);
+  font-weight: var(--cz-tag-font-weight);
+  white-space: nowrap;
+}
+
+.cz-tag-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+}
+
+.cz-tag-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  margin-left: 0.25rem;
+  margin-right: -0.25rem;
+  border-radius: var(--cz-radius-sm);
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity var(--cz-transition-fast);
+}
+
+.cz-tag-close:hover {
+  opacity: 1;
+}
+
+/* Tag Variants */
+.cz-tag-default {
+  background: var(--cz-tag-default-bg);
+  color: var(--cz-tag-default-color);
+}
+.cz-tag-primary {
+  background: var(--cz-tag-primary-bg);
+  color: var(--cz-tag-primary-color);
+}
+.cz-tag-success {
+  background: var(--cz-tag-success-bg);
+  color: var(--cz-tag-success-color);
+}
+.cz-tag-warning {
+  background: var(--cz-tag-warning-bg);
+  color: var(--cz-tag-warning-color);
+}
+.cz-tag-danger {
+  background: var(--cz-tag-danger-bg);
+  color: var(--cz-tag-danger-color);
+}
+
+/* Tag Group */
+.cz-tag-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+`;
+}
+
+// cli/generators/alert.ts
+function generateAlertCSS(config) {
+  let css = "/* ===== ALERT ===== */\n\n";
+  css += generateAlertVariables(config);
+  css += "\n";
+  css += generateAlertBase();
+  css += "\n";
+  css += generateAlertVariants(config);
+  css += "\n";
+  if (config.customCSS) css += `/* Custom Alert CSS */
+${config.customCSS}
+`;
+  return css;
+}
+function generateAlertVariables(config) {
+  const vars = [];
+  if (config.paddingX) vars.push(`  --cz-alert-padding-x: ${resolveToken(config.paddingX)};`);
+  if (config.paddingY) vars.push(`  --cz-alert-padding-y: ${resolveToken(config.paddingY)};`);
+  if (config.borderRadius) vars.push(`  --cz-alert-border-radius: ${resolveToken(config.borderRadius)};`);
+  if (config.borderWidth) vars.push(`  --cz-alert-border-width: ${config.borderWidth};`);
+  if (config.titleFontSize) vars.push(`  --cz-alert-title-font-size: ${resolveToken(config.titleFontSize)};`);
+  if (config.titleFontWeight) vars.push(`  --cz-alert-title-font-weight: ${resolveToken(config.titleFontWeight)};`);
+  if (config.contentFontSize) vars.push(`  --cz-alert-content-font-size: ${resolveToken(config.contentFontSize)};`);
+  if (config.variants) {
+    for (const [name, variant] of Object.entries(config.variants)) {
+      if (variant.bg) vars.push(`  --cz-alert-${name}-bg: ${resolveToken(variant.bg)};`);
+      if (variant.borderColor) vars.push(`  --cz-alert-${name}-border-color: ${resolveToken(variant.borderColor)};`);
+      if (variant.color) vars.push(`  --cz-alert-${name}-color: ${resolveToken(variant.color)};`);
+    }
+  }
+  return `:root {
+${vars.join("\n")}
+}
+`;
+}
+function generateAlertBase() {
+  return `.cz-alert {
+  display: flex;
+  gap: 0.75rem;
+  padding: var(--cz-alert-padding-y) var(--cz-alert-padding-x);
+  border-radius: var(--cz-alert-border-radius);
+  border: var(--cz-alert-border-width) solid transparent;
+}
+
+.cz-alert-icon {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-top: 0.125rem;
+}
+
+.cz-alert-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.cz-alert-title {
+  font-size: var(--cz-alert-title-font-size);
+  font-weight: var(--cz-alert-title-font-weight);
+  line-height: var(--cz-font-lineHeight-tight);
+}
+
+.cz-alert-description {
+  font-size: var(--cz-alert-content-font-size);
+  opacity: 0.9;
+}
+`;
+}
+function generateAlertVariants(config) {
+  let css = "/* Alert Variants */\n";
+  const defaultVariants = ["info", "success", "warning", "danger"];
+  for (const name of defaultVariants) {
+    css += `.cz-alert-${name} {
+  background: var(--cz-alert-${name}-bg);
+  border-color: var(--cz-alert-${name}-border-color);
+  color: var(--cz-alert-${name}-color);
+}
+.cz-alert-${name} .cz-alert-icon { color: var(--cz-alert-${name}-color); }
+`;
+  }
+  return css;
+}
+
+// cli/generators/toast.ts
+function generateToastCSS(config) {
+  let css = "/* ===== TOAST ===== */\n\n";
+  css += generateToastVariables(config);
+  css += "\n";
+  css += generateToastBase();
+  css += "\n";
+  if (config.customCSS) css += `/* Custom Toast CSS */
+${config.customCSS}
+`;
+  return css;
+}
+function generateToastVariables(config) {
+  const vars = [];
+  if (config.bg) vars.push(`  --cz-toast-bg: ${resolveToken(config.bg)};`);
+  if (config.borderRadius) vars.push(`  --cz-toast-border-radius: ${resolveToken(config.borderRadius)};`);
+  if (config.borderColor) vars.push(`  --cz-toast-border-color: ${resolveToken(config.borderColor)};`);
+  if (config.shadow) vars.push(`  --cz-toast-shadow: ${resolveToken(config.shadow)};`);
+  if (config.padding) vars.push(`  --cz-toast-padding: ${resolveToken(config.padding)};`);
+  if (config.gap) vars.push(`  --cz-toast-gap: ${config.gap};`);
+  if (config.titleFontSize) vars.push(`  --cz-toast-title-font-size: ${resolveToken(config.titleFontSize)};`);
+  if (config.titleFontWeight) vars.push(`  --cz-toast-title-font-weight: ${resolveToken(config.titleFontWeight)};`);
+  if (config.descriptionFontSize) vars.push(`  --cz-toast-description-font-size: ${resolveToken(config.descriptionFontSize)};`);
+  return `:root {
+${vars.join("\n")}
+}
+`;
+}
+function generateToastBase() {
+  return `.cz-toast-viewport {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;
+  max-width: 420px;
+  width: 100%;
+  z-index: 100;
+  pointer-events: none;
+}
+
+.cz-toast {
+  display: flex;
+  gap: var(--cz-toast-gap);
+  padding: var(--cz-toast-padding);
+  background-color: var(--cz-toast-bg);
+  border-radius: var(--cz-toast-border-radius);
+  border: 1px solid var(--cz-toast-border-color);
+  box-shadow: var(--cz-toast-shadow);
+  pointer-events: auto;
+  animation: cz-toast-slide-in 300ms ease;
+}
+
+.cz-toast[data-state="closed"] {
+  animation: cz-toast-slide-out 200ms ease forwards;
+}
+
+.cz-toast-icon {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.cz-toast-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.cz-toast-title {
+  font-size: var(--cz-toast-title-font-size);
+  font-weight: var(--cz-toast-title-font-weight);
+  color: hsl(var(--cz-color-fg));
+}
+
+.cz-toast-description {
+  font-size: var(--cz-toast-description-font-size);
+  color: hsl(var(--cz-color-mutedFg));
+}
+
+.cz-toast-close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  padding: 0.25rem;
+  border-radius: var(--cz-radius-sm);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: hsl(var(--cz-color-mutedFg));
+  opacity: 0.5;
+  transition: opacity var(--cz-transition-fast);
+}
+
+.cz-toast-close:hover {
+  opacity: 1;
+}
+
+.cz-toast-action {
+  margin-top: 0.5rem;
+}
+
+/* Toast Variants */
+.cz-toast-success .cz-toast-icon { color: hsl(var(--cz-color-success)); }
+.cz-toast-warning .cz-toast-icon { color: hsl(var(--cz-color-warning)); }
+.cz-toast-danger .cz-toast-icon { color: hsl(var(--cz-color-danger)); }
+
+@keyframes cz-toast-slide-in {
+  from { transform: translateX(100%); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes cz-toast-slide-out {
+  from { transform: translateX(0); opacity: 1; }
+  to { transform: translateX(100%); opacity: 0; }
+}
+`;
+}
+
+// cli/generators/tooltip.ts
+function generateTooltipCSS(config) {
+  let css = "/* ===== TOOLTIP ===== */\n\n";
+  css += generateTooltipVariables(config);
+  css += "\n";
+  css += generateTooltipBase();
+  css += "\n";
+  if (config.customCSS) css += `/* Custom Tooltip CSS */
+${config.customCSS}
+`;
+  return css;
+}
+function generateTooltipVariables(config) {
+  const vars = [];
+  if (config.paddingX) vars.push(`  --cz-tooltip-padding-x: ${config.paddingX};`);
+  if (config.paddingY) vars.push(`  --cz-tooltip-padding-y: ${config.paddingY};`);
+  if (config.fontSize) vars.push(`  --cz-tooltip-font-size: ${resolveToken(config.fontSize)};`);
+  if (config.borderRadius) vars.push(`  --cz-tooltip-border-radius: ${resolveToken(config.borderRadius)};`);
+  if (config.bg) vars.push(`  --cz-tooltip-bg: ${resolveToken(config.bg)};`);
+  if (config.color) vars.push(`  --cz-tooltip-color: ${resolveToken(config.color)};`);
+  if (config.shadow) vars.push(`  --cz-tooltip-shadow: ${resolveToken(config.shadow)};`);
+  if (config.offset) vars.push(`  --cz-tooltip-offset: ${config.offset};`);
+  return `:root {
+${vars.join("\n")}
+}
+`;
+}
+function generateTooltipBase() {
+  return `.cz-tooltip-content {
+  padding: var(--cz-tooltip-padding-y) var(--cz-tooltip-padding-x);
+  font-size: var(--cz-tooltip-font-size);
+  border-radius: var(--cz-tooltip-border-radius);
+  background-color: var(--cz-tooltip-bg);
+  color: var(--cz-tooltip-color);
+  box-shadow: var(--cz-tooltip-shadow);
+  z-index: 50;
+  animation: cz-tooltip-fade-in 150ms ease;
+}
+
+.cz-tooltip-arrow {
+  fill: var(--cz-tooltip-bg);
+}
+
+@keyframes cz-tooltip-fade-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+`;
+}
+
+// cli/generators/progress.ts
+function generateProgressCSS(config) {
+  let css = "/* ===== PROGRESS ===== */\n\n";
+  css += generateProgressVariables(config);
+  css += "\n";
+  css += generateProgressBase();
+  css += "\n";
+  css += generateProgressSizes();
+  css += "\n";
+  css += generateProgressVariants(config);
+  css += "\n";
+  if (config.customCSS) css += `/* Custom Progress CSS */
+${config.customCSS}
+`;
+  return css;
+}
+function generateProgressVariables(config) {
+  const vars = [];
+  if (config.height) {
+    for (const [size, value] of Object.entries(config.height)) {
+      vars.push(`  --cz-progress-height-${size}: ${value};`);
+    }
+  }
+  if (config.borderRadius) vars.push(`  --cz-progress-border-radius: ${resolveToken(config.borderRadius)};`);
+  if (config.bg) vars.push(`  --cz-progress-bg: ${resolveToken(config.bg)};`);
+  if (config.transition) vars.push(`  --cz-progress-transition: ${resolveToken(config.transition)};`);
+  if (config.barColors) {
+    for (const [name, value] of Object.entries(config.barColors)) {
+      vars.push(`  --cz-progress-bar-${name}: ${resolveToken(value)};`);
+    }
+  }
+  return `:root {
+${vars.join("\n")}
+}
+`;
+}
+function generateProgressBase() {
+  return `.cz-progress {
+  position: relative;
+  overflow: hidden;
+  background-color: var(--cz-progress-bg);
+  border-radius: var(--cz-progress-border-radius);
+  width: 100%;
+}
+
+.cz-progress-bar {
+  height: 100%;
+  background-color: var(--cz-progress-bar-default);
+  border-radius: var(--cz-progress-border-radius);
+  transition: width var(--cz-progress-transition);
+}
+
+.cz-progress-indeterminate .cz-progress-bar {
+  width: 50% !important;
+  animation: cz-progress-indeterminate 1.5s ease-in-out infinite;
+}
+
+@keyframes cz-progress-indeterminate {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(300%); }
+}
+`;
+}
+function generateProgressSizes() {
+  return `/* Progress Sizes */
+.cz-progress-sm { height: var(--cz-progress-height-sm); }
+.cz-progress-md { height: var(--cz-progress-height-md); }
+.cz-progress-lg { height: var(--cz-progress-height-lg); }
+`;
+}
+function generateProgressVariants(config) {
+  let css = "/* Progress Variants */\n";
+  const variants = ["default", "success", "warning", "danger"];
+  for (const name of variants) {
+    css += `.cz-progress-${name} .cz-progress-bar { background-color: var(--cz-progress-bar-${name}); }
+`;
+  }
+  return css;
+}
+
+// cli/generators/spinner.ts
+function generateSpinnerCSS(config) {
+  let css = "/* ===== SPINNER ===== */\n\n";
+  css += generateSpinnerVariables(config);
+  css += "\n";
+  css += generateSpinnerBase();
+  css += "\n";
+  css += generateSpinnerSizes();
+  css += "\n";
+  if (config.customCSS) css += `/* Custom Spinner CSS */
+${config.customCSS}
+`;
+  return css;
+}
+function generateSpinnerVariables(config) {
+  const vars = [];
+  if (config.size) {
+    for (const [size, value] of Object.entries(config.size)) {
+      vars.push(`  --cz-spinner-size-${size}: ${value};`);
+    }
+  }
+  if (config.borderWidth) {
+    for (const [size, value] of Object.entries(config.borderWidth)) {
+      vars.push(`  --cz-spinner-border-width-${size}: ${value};`);
+    }
+  }
+  if (config.color) vars.push(`  --cz-spinner-color: ${resolveToken(config.color)};`);
+  if (config.trackColor) vars.push(`  --cz-spinner-track-color: ${resolveToken(config.trackColor)};`);
+  if (config.animationDuration) vars.push(`  --cz-spinner-duration: ${config.animationDuration};`);
+  return `:root {
+${vars.join("\n")}
+}
+`;
+}
+function generateSpinnerBase() {
+  return `.cz-spinner {
+  display: inline-block;
+  border-radius: var(--cz-radius-full);
+  border-style: solid;
+  border-color: var(--cz-spinner-track-color);
+  border-top-color: var(--cz-spinner-color);
+  animation: cz-spin var(--cz-spinner-duration) linear infinite;
+}
+`;
+}
+function generateSpinnerSizes() {
+  return `/* Spinner Sizes */
+.cz-spinner-sm {
+  width: var(--cz-spinner-size-sm);
+  height: var(--cz-spinner-size-sm);
+  border-width: var(--cz-spinner-border-width-sm);
+}
+.cz-spinner-md {
+  width: var(--cz-spinner-size-md);
+  height: var(--cz-spinner-size-md);
+  border-width: var(--cz-spinner-border-width-md);
+}
+.cz-spinner-lg {
+  width: var(--cz-spinner-size-lg);
+  height: var(--cz-spinner-size-lg);
+  border-width: var(--cz-spinner-border-width-lg);
+}
+`;
+}
+
+// cli/generators/skeleton.ts
+function generateSkeletonCSS(config) {
+  let css = "/* ===== SKELETON ===== */\n\n";
+  css += generateSkeletonVariables(config);
+  css += "\n";
+  css += generateSkeletonBase();
+  css += "\n";
+  if (config.customCSS) css += `/* Custom Skeleton CSS */
+${config.customCSS}
+`;
+  return css;
+}
+function generateSkeletonVariables(config) {
+  const vars = [];
+  if (config.bg) vars.push(`  --cz-skeleton-bg: ${resolveToken(config.bg)};`);
+  if (config.borderRadius) vars.push(`  --cz-skeleton-border-radius: ${resolveToken(config.borderRadius)};`);
+  if (config.animationDuration) vars.push(`  --cz-skeleton-duration: ${config.animationDuration};`);
+  return `:root {
+${vars.join("\n")}
+}
+`;
+}
+function generateSkeletonBase() {
+  return `.cz-skeleton {
+  background-color: var(--cz-skeleton-bg);
+  border-radius: var(--cz-skeleton-border-radius);
+  animation: cz-skeleton-pulse var(--cz-skeleton-duration) ease-in-out infinite;
+}
+
+.cz-skeleton-circle {
+  border-radius: var(--cz-radius-full);
+}
+
+.cz-skeleton-text {
+  height: 1rem;
+  width: 100%;
+}
+
+@keyframes cz-skeleton-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+`;
+}
+
+// cli/generators/tabs.ts
+function generateTabsCSS(config) {
+  let css = "/* ===== TABS ===== */\n\n";
+  css += generateTabsVariables(config);
+  css += "\n";
+  css += generateTabsBase();
+  css += "\n";
+  if (config.customCSS) css += `/* Custom Tabs CSS */
+${config.customCSS}
+`;
+  return css;
+}
+function generateTabsVariables(config) {
+  const vars = [];
+  if (config.listBorderWidth) vars.push(`  --cz-tabs-list-border-width: ${config.listBorderWidth};`);
+  if (config.listBorderColor) vars.push(`  --cz-tabs-list-border-color: ${resolveToken(config.listBorderColor)};`);
+  if (config.triggerPaddingX) vars.push(`  --cz-tabs-trigger-padding-x: ${config.triggerPaddingX};`);
+  if (config.triggerPaddingY) vars.push(`  --cz-tabs-trigger-padding-y: ${config.triggerPaddingY};`);
+  if (config.triggerFontSize) vars.push(`  --cz-tabs-trigger-font-size: ${resolveToken(config.triggerFontSize)};`);
+  if (config.triggerFontWeight) vars.push(`  --cz-tabs-trigger-font-weight: ${resolveToken(config.triggerFontWeight)};`);
+  if (config.triggerColor) vars.push(`  --cz-tabs-trigger-color: ${resolveToken(config.triggerColor)};`);
+  if (config.triggerActiveColor) vars.push(`  --cz-tabs-trigger-active-color: ${resolveToken(config.triggerActiveColor)};`);
+  if (config.triggerActiveBorderColor) vars.push(`  --cz-tabs-trigger-active-border-color: ${resolveToken(config.triggerActiveBorderColor)};`);
+  if (config.contentPadding) vars.push(`  --cz-tabs-content-padding: ${resolveToken(config.contentPadding)};`);
+  if (config.states?.hover?.color) vars.push(`  --cz-tabs-trigger-hover-color: ${resolveToken(config.states.hover.color)};`);
+  if (config.states?.focus?.ringWidth) vars.push(`  --cz-tabs-trigger-focus-ring-width: ${config.states.focus.ringWidth};`);
+  if (config.states?.focus?.ringColor) vars.push(`  --cz-tabs-trigger-focus-ring-color: ${resolveToken(config.states.focus.ringColor)};`);
+  return `:root {
+${vars.join("\n")}
+}
+`;
+}
+function generateTabsBase() {
+  return `.cz-tabs {
+  display: flex;
+  flex-direction: column;
+}
+
+.cz-tabs-list {
+  display: flex;
+  border-bottom: var(--cz-tabs-list-border-width) solid var(--cz-tabs-list-border-color);
+  gap: 0.5rem;
+}
+
+.cz-tabs-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--cz-tabs-trigger-padding-y) var(--cz-tabs-trigger-padding-x);
+  font-size: var(--cz-tabs-trigger-font-size);
+  font-weight: var(--cz-tabs-trigger-font-weight);
+  color: var(--cz-tabs-trigger-color);
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  margin-bottom: calc(var(--cz-tabs-list-border-width) * -1);
+  cursor: pointer;
+  transition: all var(--cz-transition-fast);
+  white-space: nowrap;
+}
+
+.cz-tabs-trigger:hover {
+  color: var(--cz-tabs-trigger-hover-color);
+}
+
+.cz-tabs-trigger:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--cz-tabs-trigger-focus-ring-width) var(--cz-tabs-trigger-focus-ring-color);
+  border-radius: var(--cz-radius-sm);
+}
+
+.cz-tabs-trigger[data-state="active"],
+.cz-tabs-trigger.cz-tabs-trigger-active {
+  color: var(--cz-tabs-trigger-active-color);
+  border-bottom-color: var(--cz-tabs-trigger-active-border-color);
+}
+
+.cz-tabs-trigger:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.cz-tabs-content {
+  padding: var(--cz-tabs-content-padding);
+}
+
+.cz-tabs-content[data-state="inactive"] {
+  display: none;
+}
+`;
+}
+
+// cli/generators/breadcrumb.ts
+function generateBreadcrumbCSS(config) {
+  let css = "/* ===== BREADCRUMB ===== */\n\n";
+  css += generateBreadcrumbVariables(config);
+  css += "\n";
+  css += generateBreadcrumbBase();
+  css += "\n";
+  if (config.customCSS) css += `/* Custom Breadcrumb CSS */
+${config.customCSS}
+`;
+  return css;
+}
+function generateBreadcrumbVariables(config) {
+  const vars = [];
+  if (config.gap) vars.push(`  --cz-breadcrumb-gap: ${config.gap};`);
+  if (config.fontSize) vars.push(`  --cz-breadcrumb-font-size: ${resolveToken(config.fontSize)};`);
+  if (config.itemColor) vars.push(`  --cz-breadcrumb-item-color: ${resolveToken(config.itemColor)};`);
+  if (config.linkColor) vars.push(`  --cz-breadcrumb-link-color: ${resolveToken(config.linkColor)};`);
+  if (config.activeColor) vars.push(`  --cz-breadcrumb-active-color: ${resolveToken(config.activeColor)};`);
+  if (config.separatorColor) vars.push(`  --cz-breadcrumb-separator-color: ${resolveToken(config.separatorColor)};`);
+  return `:root {
+${vars.join("\n")}
+}
+`;
+}
+function generateBreadcrumbBase() {
+  return `.cz-breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--cz-breadcrumb-gap);
+  font-size: var(--cz-breadcrumb-font-size);
+}
+
+.cz-breadcrumb-item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--cz-breadcrumb-gap);
+  color: var(--cz-breadcrumb-item-color);
+}
+
+.cz-breadcrumb-link {
+  color: var(--cz-breadcrumb-link-color);
+  text-decoration: none;
+  transition: color var(--cz-transition-fast);
+}
+
+.cz-breadcrumb-link:hover {
+  color: var(--cz-breadcrumb-active-color);
+  text-decoration: underline;
+}
+
+.cz-breadcrumb-page {
+  color: var(--cz-breadcrumb-active-color);
+  font-weight: var(--cz-font-weight-medium);
+}
+
+.cz-breadcrumb-separator {
+  color: var(--cz-breadcrumb-separator-color);
+}
+
+.cz-breadcrumb-ellipsis {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+}
+`;
+}
+
+// cli/generators/accordion.ts
+function generateAccordionCSS(config) {
+  let css = "/* ===== ACCORDION ===== */\n\n";
+  css += generateAccordionVariables(config);
+  css += "\n";
+  css += generateAccordionBase();
+  css += "\n";
+  if (config.customCSS) css += `/* Custom Accordion CSS */
+${config.customCSS}
+`;
+  return css;
+}
+function generateAccordionVariables(config) {
+  const vars = [];
+  if (config.borderColor) vars.push(`  --cz-accordion-border-color: ${resolveToken(config.borderColor)};`);
+  if (config.triggerPaddingX) vars.push(`  --cz-accordion-trigger-padding-x: ${config.triggerPaddingX};`);
+  if (config.triggerPaddingY) vars.push(`  --cz-accordion-trigger-padding-y: ${config.triggerPaddingY};`);
+  if (config.triggerFontSize) vars.push(`  --cz-accordion-trigger-font-size: ${resolveToken(config.triggerFontSize)};`);
+  if (config.triggerFontWeight) vars.push(`  --cz-accordion-trigger-font-weight: ${resolveToken(config.triggerFontWeight)};`);
+  if (config.triggerHoverBg) vars.push(`  --cz-accordion-trigger-hover-bg: ${resolveToken(config.triggerHoverBg)};`);
+  if (config.contentPaddingX) vars.push(`  --cz-accordion-content-padding-x: ${config.contentPaddingX};`);
+  if (config.contentPaddingBottom) vars.push(`  --cz-accordion-content-padding-bottom: ${config.contentPaddingBottom};`);
+  return `:root {
+${vars.join("\n")}
+}
+`;
+}
+function generateAccordionBase() {
+  return `.cz-accordion {
+  width: 100%;
+}
+
+.cz-accordion-item {
+  border-bottom: 1px solid var(--cz-accordion-border-color);
+}
+
+.cz-accordion-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--cz-accordion-trigger-padding-y) var(--cz-accordion-trigger-padding-x);
+  font-size: var(--cz-accordion-trigger-font-size);
+  font-weight: var(--cz-accordion-trigger-font-weight);
+  color: hsl(var(--cz-color-fg));
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  transition: background-color var(--cz-transition-fast);
+}
+
+.cz-accordion-trigger:hover {
+  background-color: var(--cz-accordion-trigger-hover-bg);
+}
+
+.cz-accordion-trigger-icon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  transition: transform var(--cz-transition-fast);
+}
+
+.cz-accordion-item[data-state="open"] .cz-accordion-trigger-icon {
+  transform: rotate(180deg);
+}
+
+.cz-accordion-content {
+  overflow: hidden;
+  font-size: var(--cz-font-size-sm);
+  color: hsl(var(--cz-color-mutedFg));
+}
+
+.cz-accordion-content[data-state="open"] {
+  animation: cz-accordion-open 200ms ease-out;
+}
+
+.cz-accordion-content[data-state="closed"] {
+  animation: cz-accordion-close 200ms ease-out;
+}
+
+.cz-accordion-content-inner {
+  padding: 0 var(--cz-accordion-content-padding-x) var(--cz-accordion-content-padding-bottom);
+}
+
+@keyframes cz-accordion-open {
+  from { height: 0; }
+  to { height: var(--radix-accordion-content-height); }
+}
+
+@keyframes cz-accordion-close {
+  from { height: var(--radix-accordion-content-height); }
+  to { height: 0; }
+}
+`;
+}
+
+// cli/generators/dialog.ts
+function generateDialogCSS(config) {
+  let css = "/* ===== DIALOG ===== */\n\n";
+  css += generateDialogVariables(config);
+  css += "\n";
+  css += generateDialogBase();
+  css += "\n";
+  if (config.customCSS) css += `/* Custom Dialog CSS */
+${config.customCSS}
+`;
+  return css;
+}
+function generateDialogVariables(config) {
+  const vars = [];
+  if (config.overlayBg) vars.push(`  --cz-dialog-overlay-bg: ${resolveToken(config.overlayBg)};`);
+  if (config.contentBg) vars.push(`  --cz-dialog-content-bg: ${resolveToken(config.contentBg)};`);
+  if (config.contentBorderRadius) vars.push(`  --cz-dialog-content-border-radius: ${resolveToken(config.contentBorderRadius)};`);
+  if (config.contentShadow) vars.push(`  --cz-dialog-content-shadow: ${resolveToken(config.contentShadow)};`);
+  if (config.contentPadding) vars.push(`  --cz-dialog-content-padding: ${resolveToken(config.contentPadding)};`);
+  if (config.contentMaxWidth) vars.push(`  --cz-dialog-content-max-width: ${config.contentMaxWidth};`);
+  if (config.headerGap) vars.push(`  --cz-dialog-header-gap: ${config.headerGap};`);
+  if (config.titleFontSize) vars.push(`  --cz-dialog-title-font-size: ${resolveToken(config.titleFontSize)};`);
+  if (config.titleFontWeight) vars.push(`  --cz-dialog-title-font-weight: ${resolveToken(config.titleFontWeight)};`);
+  if (config.descriptionFontSize) vars.push(`  --cz-dialog-description-font-size: ${resolveToken(config.descriptionFontSize)};`);
+  if (config.footerGap) vars.push(`  --cz-dialog-footer-gap: ${config.footerGap};`);
+  return `:root {
+${vars.join("\n")}
+}
+`;
+}
+function generateDialogBase() {
+  return `.cz-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: var(--cz-dialog-overlay-bg);
+  z-index: 50;
+  animation: cz-dialog-overlay-show 150ms ease;
+}
+
+.cz-dialog-content {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  max-width: var(--cz-dialog-content-max-width);
+  width: calc(100% - 2rem);
+  max-height: 85vh;
+  background-color: var(--cz-dialog-content-bg);
+  border-radius: var(--cz-dialog-content-border-radius);
+  box-shadow: var(--cz-dialog-content-shadow);
+  padding: var(--cz-dialog-content-padding);
+  z-index: 51;
+  animation: cz-dialog-content-show 150ms ease;
+  overflow-y: auto;
+}
+
+.cz-dialog-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cz-dialog-header-gap);
+  margin-bottom: 1rem;
+}
+
+.cz-dialog-title {
+  font-size: var(--cz-dialog-title-font-size);
+  font-weight: var(--cz-dialog-title-font-weight);
+  color: hsl(var(--cz-color-fg));
+  line-height: var(--cz-font-lineHeight-tight);
+}
+
+.cz-dialog-description {
+  font-size: var(--cz-dialog-description-font-size);
+  color: hsl(var(--cz-color-mutedFg));
+}
+
+.cz-dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--cz-dialog-footer-gap);
+  margin-top: 1.5rem;
+}
+
+.cz-dialog-close {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  padding: 0.25rem;
+  border-radius: var(--cz-radius-sm);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: hsl(var(--cz-color-mutedFg));
+  transition: all var(--cz-transition-fast);
+}
+
+.cz-dialog-close:hover {
+  background: hsl(var(--cz-color-muted));
+  color: hsl(var(--cz-color-fg));
+}
+
+@keyframes cz-dialog-overlay-show {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes cz-dialog-content-show {
+  from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
+  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+}
+`;
+}
+
+// cli/generators/dropdown-menu.ts
+function generateDropdownMenuCSS(config) {
+  let css = "/* ===== DROPDOWN MENU ===== */\n\n";
+  css += generateDropdownVariables(config);
+  css += "\n";
+  css += generateDropdownBase();
+  css += "\n";
+  if (config.customCSS) css += `/* Custom Dropdown CSS */
+${config.customCSS}
+`;
+  return css;
+}
+function generateDropdownVariables(config) {
+  const vars = [];
+  if (config.contentBg) vars.push(`  --cz-dropdown-content-bg: ${resolveToken(config.contentBg)};`);
+  if (config.contentBorderRadius) vars.push(`  --cz-dropdown-content-border-radius: ${resolveToken(config.contentBorderRadius)};`);
+  if (config.contentShadow) vars.push(`  --cz-dropdown-content-shadow: ${resolveToken(config.contentShadow)};`);
+  if (config.contentPadding) vars.push(`  --cz-dropdown-content-padding: ${config.contentPadding};`);
+  if (config.itemPaddingX) vars.push(`  --cz-dropdown-item-padding-x: ${config.itemPaddingX};`);
+  if (config.itemPaddingY) vars.push(`  --cz-dropdown-item-padding-y: ${config.itemPaddingY};`);
+  if (config.itemBorderRadius) vars.push(`  --cz-dropdown-item-border-radius: ${resolveToken(config.itemBorderRadius)};`);
+  if (config.itemFontSize) vars.push(`  --cz-dropdown-item-font-size: ${resolveToken(config.itemFontSize)};`);
+  if (config.itemHoverBg) vars.push(`  --cz-dropdown-item-hover-bg: ${resolveToken(config.itemHoverBg)};`);
+  return `:root {
+${vars.join("\n")}
+}
+`;
+}
+function generateDropdownBase() {
+  return `.cz-dropdown-content {
+  min-width: 8rem;
+  overflow: hidden;
+  background-color: var(--cz-dropdown-content-bg);
+  border-radius: var(--cz-dropdown-content-border-radius);
+  box-shadow: var(--cz-dropdown-content-shadow);
+  border: 1px solid hsl(var(--cz-color-border));
+  padding: var(--cz-dropdown-content-padding);
+  z-index: 50;
+  animation: cz-dropdown-fade-in 150ms ease;
+}
+
+.cz-dropdown-item {
+  display: flex;
+  align-items: center;
+  padding: var(--cz-dropdown-item-padding-y) var(--cz-dropdown-item-padding-x);
+  border-radius: var(--cz-dropdown-item-border-radius);
+  font-size: var(--cz-dropdown-item-font-size);
+  color: hsl(var(--cz-color-fg));
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+  transition: background-color var(--cz-transition-fast);
+  gap: 0.5rem;
+}
+
+.cz-dropdown-item:hover,
+.cz-dropdown-item[data-highlighted] {
+  background-color: var(--cz-dropdown-item-hover-bg);
+}
+
+.cz-dropdown-item[data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.cz-dropdown-item-icon {
+  width: 1rem;
+  height: 1rem;
+  color: hsl(var(--cz-color-mutedFg));
+}
+
+.cz-dropdown-item-shortcut {
+  margin-left: auto;
+  font-size: var(--cz-font-size-xs);
+  color: hsl(var(--cz-color-mutedFg));
+}
+
+.cz-dropdown-separator {
+  height: 1px;
+  background-color: hsl(var(--cz-color-border));
+  margin: 0.25rem 0;
+}
+
+.cz-dropdown-label {
+  padding: var(--cz-dropdown-item-padding-y) var(--cz-dropdown-item-padding-x);
+  font-size: var(--cz-font-size-xs);
+  font-weight: var(--cz-font-weight-medium);
+  color: hsl(var(--cz-color-mutedFg));
+}
+
+.cz-dropdown-sub-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.cz-dropdown-sub-trigger-icon {
+  width: 1rem;
+  height: 1rem;
+  margin-left: auto;
+}
+
+@keyframes cz-dropdown-fade-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+`;
+}
+
+// cli/generators/separator.ts
+function generateSeparatorCSS(config) {
+  let css = "/* ===== SEPARATOR ===== */\n\n";
+  css += generateSeparatorVariables(config);
+  css += "\n";
+  css += generateSeparatorBase();
+  css += "\n";
+  if (config.customCSS) css += `/* Custom Separator CSS */
+${config.customCSS}
+`;
+  return css;
+}
+function generateSeparatorVariables(config) {
+  const vars = [];
+  if (config.color) vars.push(`  --cz-separator-color: ${resolveToken(config.color)};`);
+  if (config.thickness) vars.push(`  --cz-separator-thickness: ${config.thickness};`);
+  if (config.marginY) vars.push(`  --cz-separator-margin-y: ${resolveToken(config.marginY)};`);
+  if (config.marginX) vars.push(`  --cz-separator-margin-x: ${resolveToken(config.marginX)};`);
+  return `:root {
+${vars.join("\n")}
+}
+`;
+}
+function generateSeparatorBase() {
+  return `.cz-separator {
+  background-color: var(--cz-separator-color);
+  flex-shrink: 0;
+}
+
+.cz-separator-horizontal {
+  width: 100%;
+  height: var(--cz-separator-thickness);
+  margin: var(--cz-separator-margin-y) 0;
+}
+
+.cz-separator-vertical {
+  width: var(--cz-separator-thickness);
+  height: 100%;
+  margin: 0 var(--cz-separator-margin-x);
+}
+`;
+}
+
+// cli/generators/scroll-area.ts
+function generateScrollAreaCSS(config) {
+  let css = "/* ===== SCROLL AREA ===== */\n\n";
+  css += generateScrollAreaVariables(config);
+  css += "\n";
+  css += generateScrollAreaBase();
+  css += "\n";
+  if (config.customCSS) css += `/* Custom Scroll Area CSS */
+${config.customCSS}
+`;
+  return css;
+}
+function generateScrollAreaVariables(config) {
+  const vars = [];
+  if (config.scrollbarWidth) vars.push(`  --cz-scrollbar-width: ${config.scrollbarWidth};`);
+  if (config.thumbBg) vars.push(`  --cz-scrollbar-thumb-bg: ${resolveToken(config.thumbBg)};`);
+  if (config.thumbBorderRadius) vars.push(`  --cz-scrollbar-thumb-border-radius: ${resolveToken(config.thumbBorderRadius)};`);
+  if (config.trackBg) vars.push(`  --cz-scrollbar-track-bg: ${resolveToken(config.trackBg)};`);
+  return `:root {
+${vars.join("\n")}
+}
+`;
+}
+function generateScrollAreaBase() {
+  return `.cz-scroll-area {
+  position: relative;
+  overflow: hidden;
+}
+
+.cz-scroll-area-viewport {
+  width: 100%;
+  height: 100%;
+  overflow: scroll;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.cz-scroll-area-viewport::-webkit-scrollbar {
+  display: none;
+}
+
+.cz-scrollbar {
+  display: flex;
+  touch-action: none;
+  user-select: none;
+  padding: 2px;
+  transition: background-color var(--cz-transition-fast);
+}
+
+.cz-scrollbar:hover {
+  background-color: var(--cz-scrollbar-track-bg);
+}
+
+.cz-scrollbar[data-orientation="vertical"] {
+  width: var(--cz-scrollbar-width);
+}
+
+.cz-scrollbar[data-orientation="horizontal"] {
+  flex-direction: column;
+  height: var(--cz-scrollbar-width);
+}
+
+.cz-scrollbar-thumb {
+  flex: 1;
+  background-color: var(--cz-scrollbar-thumb-bg);
+  border-radius: var(--cz-scrollbar-thumb-border-radius);
+  position: relative;
+}
+
+.cz-scrollbar-thumb::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  height: 100%;
+  min-width: 44px;
+  min-height: 44px;
+}
+
+.cz-scroll-area-corner {
+  background-color: var(--cz-scrollbar-track-bg);
+}
+`;
+}
+
+// cli/generators/utilities.ts
+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));
+}
+`;
+}
+
+// cli/build-css.ts
+function buildComponentsCSS(config) {
+  const components = deepMerge(componentDefaults, config.components || {});
+  let css = "";
+  if (config.customCSS?.before) {
+    css += `/* Custom CSS (before) */
+${config.customCSS.before}
+
+`;
+  }
+  if (components.button) {
+    css += generateButtonCSS(components.button) + "\n";
+  }
+  if (components.input) {
+    css += generateInputCSS(components.input) + "\n";
+  }
+  if (components.card) {
+    css += generateCardCSS(components.card) + "\n";
+  }
+  if (components.switch) {
+    css += generateSwitchCSS(components.switch) + "\n";
+  }
+  if (components.checkbox) {
+    css += generateCheckboxCSS(components.checkbox) + "\n";
+  }
+  if (components.textarea) {
+    css += generateTextareaCSS(components.textarea) + "\n";
+  }
+  if (components.select) {
+    css += generateSelectCSS(components.select) + "\n";
+  }
+  if (components.radio) {
+    css += generateRadioCSS(components.radio) + "\n";
+  }
+  if (components.label) {
+    css += generateLabelCSS(components.label) + "\n";
+  }
+  if (components.badge) {
+    css += generateBadgeCSS(components.badge) + "\n";
+  }
+  if (components.avatar) {
+    css += generateAvatarCSS(components.avatar) + "\n";
+  }
+  if (components.table) {
+    css += generateTableCSS(components.table) + "\n";
+  }
+  if (components.code) {
+    css += generateCodeCSS(components.code) + "\n";
+  }
+  if (components.kbd) {
+    css += generateKbdCSS(components.kbd) + "\n";
+  }
+  if (components.tag) {
+    css += generateTagCSS(components.tag) + "\n";
+  }
+  if (components.alert) {
+    css += generateAlertCSS(components.alert) + "\n";
+  }
+  if (components.toast) {
+    css += generateToastCSS(components.toast) + "\n";
+  }
+  if (components.tooltip) {
+    css += generateTooltipCSS(components.tooltip) + "\n";
+  }
+  if (components.progress) {
+    css += generateProgressCSS(components.progress) + "\n";
+  }
+  if (components.spinner) {
+    css += generateSpinnerCSS(components.spinner) + "\n";
+  }
+  if (components.skeleton) {
+    css += generateSkeletonCSS(components.skeleton) + "\n";
+  }
+  if (components.tabs) {
+    css += generateTabsCSS(components.tabs) + "\n";
+  }
+  if (components.breadcrumb) {
+    css += generateBreadcrumbCSS(components.breadcrumb) + "\n";
+  }
+  if (components.accordion) {
+    css += generateAccordionCSS(components.accordion) + "\n";
+  }
+  if (components.dialog) {
+    css += generateDialogCSS(components.dialog) + "\n";
+  }
+  if (components.dropdownMenu) {
+    css += generateDropdownMenuCSS(components.dropdownMenu) + "\n";
+  }
+  if (components.separator) {
+    css += generateSeparatorCSS(components.separator) + "\n";
+  }
+  if (components.scrollArea) {
+    css += generateScrollAreaCSS(components.scrollArea) + "\n";
+  }
+  if (config.customCSS?.after) {
+    css += `/* Custom CSS (after) */
+${config.customCSS.after}
+`;
+  }
+  return css;
+}
+
+// src/presets/index.ts
+var defaultPreset = {
+  // Uses all default values from component-defaults.ts
+};
+var compact = {
+  spacing: {
+    xs: "0.125rem",
+    sm: "0.375rem",
+    md: "0.5rem",
+    lg: "0.75rem",
+    xl: "1rem"
+  },
+  components: {
+    button: {
+      height: { sm: "1.75rem", md: "2rem", lg: "2.5rem" },
+      paddingX: { sm: "0.5rem", md: "0.75rem", lg: "1rem" },
+      gap: "0.375rem"
+    },
+    input: {
+      height: { sm: "1.75rem", md: "2rem", lg: "2.5rem" },
+      paddingX: { sm: "0.375rem", md: "0.5rem", lg: "0.75rem" }
+    },
+    card: {
+      padding: "$spacing-md",
+      header: { paddingBottom: "$spacing-sm", marginBottom: "$spacing-sm" },
+      footer: { paddingTop: "$spacing-sm", marginTop: "$spacing-sm", gap: "0.375rem" }
+    },
+    switch: {
+      width: { sm: "1.75rem", md: "2.25rem", lg: "3rem" },
+      height: { sm: "1rem", md: "1.25rem", lg: "1.5rem" },
+      thumbSize: { sm: "0.75rem", md: "1rem", lg: "1.25rem" }
+    },
+    checkbox: {
+      size: { sm: "0.875rem", md: "1rem", lg: "1.25rem" },
+      iconSize: { sm: "8px", md: "10px", lg: "12px" },
+      labelGap: "0.375rem"
+    }
+  }
+};
+var comfortable = {
+  spacing: {
+    xs: "0.375rem",
+    sm: "0.75rem",
+    md: "1rem",
+    lg: "1.5rem",
+    xl: "2rem"
+  },
+  components: {
+    button: {
+      height: { sm: "2.5rem", md: "3rem", lg: "3.5rem" },
+      paddingX: { sm: "1rem", md: "1.5rem", lg: "2rem" },
+      gap: "0.75rem"
+    },
+    input: {
+      height: { sm: "2.5rem", md: "3rem", lg: "3.5rem" },
+      paddingX: { sm: "0.75rem", md: "1rem", lg: "1.25rem" }
+    },
+    card: {
+      padding: "$spacing-xl",
+      header: { paddingBottom: "$spacing-lg", marginBottom: "$spacing-lg" },
+      footer: { paddingTop: "$spacing-lg", marginTop: "$spacing-lg", gap: "0.75rem" }
+    },
+    switch: {
+      width: { sm: "2.5rem", md: "3.25rem", lg: "4rem" },
+      height: { sm: "1.375rem", md: "1.75rem", lg: "2.125rem" },
+      thumbSize: { sm: "1.125rem", md: "1.5rem", lg: "1.875rem" }
+    },
+    checkbox: {
+      size: { sm: "1.25rem", md: "1.5rem", lg: "1.75rem" },
+      iconSize: { sm: "12px", md: "14px", lg: "16px" },
+      labelGap: "0.75rem"
+    }
+  }
+};
+var rounded = {
+  radius: {
+    none: "0",
+    sm: "0.5rem",
+    md: "0.75rem",
+    lg: "1rem",
+    xl: "1.5rem",
+    full: "9999px"
+  },
+  components: {
+    button: {
+      borderRadius: "$radius-lg"
+    },
+    input: {
+      borderRadius: "$radius-lg"
+    },
+    card: {
+      borderRadius: "$radius-xl"
+    }
+  }
+};
+var sharp = {
+  radius: {
+    none: "0",
+    sm: "0",
+    md: "2px",
+    lg: "4px",
+    xl: "6px",
+    full: "9999px"
+  },
+  components: {
+    button: {
+      borderRadius: "$radius-sm"
+    },
+    input: {
+      borderRadius: "$radius-sm"
+    },
+    card: {
+      borderRadius: "$radius-md"
+    },
+    checkbox: {
+      borderRadius: "2px"
+    }
+  }
+};
+var minimal = {
+  shadow: {
+    none: "none",
+    sm: "none",
+    md: "0 1px 2px rgb(0 0 0 / 0.03)",
+    lg: "0 2px 4px rgb(0 0 0 / 0.05)"
+  },
+  components: {
+    button: {
+      states: {
+        hover: { opacity: "0.8" },
+        focus: { ringWidth: "1px", ringOffset: "1px" }
+      }
+    },
+    card: {
+      shadow: "none",
+      borderWidth: "1px"
+    }
+  }
+};
+var vibrant = {
+  shadow: {
+    none: "none",
+    sm: "0 2px 4px rgb(0 0 0 / 0.1)",
+    md: "0 4px 8px rgb(0 0 0 / 0.12)",
+    lg: "0 8px 16px rgb(0 0 0 / 0.15)"
+  },
+  components: {
+    button: {
+      states: {
+        hover: { opacity: "1", transform: "translateY(-1px)" },
+        focus: { ringWidth: "3px", ringOffset: "2px" }
+      }
+    },
+    card: {
+      shadow: "$shadow-md"
+    }
+  }
+};
+var presets = {
+  default: defaultPreset,
+  compact,
+  comfortable,
+  rounded,
+  sharp,
+  minimal,
+  vibrant
+};
+
+// cli/index.ts
 var __filename = fileURLToPath(import.meta.url);
 var __dirname = path.dirname(__filename);
 var defaultTheme = {
@@ -55,11 +3808,11 @@ var defaultTheme = {
   },
   transition: { fast: "150ms ease", normal: "200ms ease", slow: "300ms ease" }
 };
-function deepMerge(target, source) {
+function deepMerge2(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]);
+      result[key] = deepMerge2(target[key] || {}, source[key]);
     } else {
       result[key] = source[key];
     }
@@ -111,30 +3864,6 @@ ${darkVars.join("\n")}
 }
 `;
 }
-function getComponentsCSS() {
-  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"),
@@ -173,6 +3902,7 @@ async function main() {
   const args = process.argv.slice(2);
   let configPath = "czero.config.js";
   let outputPath = "czero.css";
+  const presetNames = [];
   for (let i = 0; i < args.length; i++) {
     if (args[i] === "--config" && args[i + 1]) {
       configPath = args[i + 1];
@@ -180,6 +3910,9 @@ async function main() {
     } else if (args[i] === "--output" && args[i + 1]) {
       outputPath = args[i + 1];
       i++;
+    } else if (args[i] === "--preset" && args[i + 1]) {
+      presetNames.push(args[i + 1]);
+      i++;
     } else if (args[i] === "build") {
     } else if (args[i] === "--help" || args[i] === "-h") {
       console.log(`
@@ -191,10 +3924,15 @@ Usage:
 Options:
   --config <path>   Path to config file (default: czero.config.js)
   --output <path>   Output CSS file path (default: czero.css)
+  --preset <name>   Apply a theme preset. Can be specified multiple times.
+                    Available: compact, comfortable, rounded, sharp, minimal, vibrant
   --help, -h        Show this help message
 
 Example:
+  npx czero build
   npx czero build --config my-theme.js --output src/styles/czero.css
+  npx czero build --preset compact
+  npx czero build --preset compact --preset rounded
 `);
       process.exit(0);
     }
@@ -202,12 +3940,26 @@ Example:
   console.log("\u{1F3A8} CZero CSS Generator");
   console.log(`   Config: ${configPath}`);
   console.log(`   Output: ${outputPath}`);
+  if (presetNames.length > 0) {
+    console.log(`   Presets: ${presetNames.join(", ")}`);
+  }
   console.log("");
   const userConfig = await loadUserConfig(configPath);
-  const theme = deepMerge(defaultTheme, userConfig);
+  let mergedConfig = {};
+  for (const presetName of presetNames) {
+    const preset = presets[presetName];
+    if (preset) {
+      mergedConfig = deepMerge2(mergedConfig, preset);
+    } else {
+      console.warn(`\u26A0\uFE0F  Unknown preset: ${presetName}`);
+    }
+  }
+  mergedConfig = deepMerge2(mergedConfig, userConfig);
+  const theme = deepMerge2(defaultTheme, mergedConfig);
   const resetCSS = getResetCSS();
   const tokensCSS = generateTokensCSS(theme);
-  const componentsCSS = getComponentsCSS();
+  let componentsCSS = buildComponentsCSS(mergedConfig);
+  componentsCSS += "\n" + generateUtilitiesCSS();
   const finalCSS = `${resetCSS}
 ${tokensCSS}
 ${componentsCSS}`;