czero 0.2.0 → 0.2.5

package/dist/cli/index.js

@@ -69,6 +69,7 @@ var componentDefaults = {
   input: {
     height: { sm: "2rem", md: "2.5rem", lg: "3rem" },
     paddingX: { sm: "0.5rem", md: "0.75rem", lg: "1rem" },
+    paddingY: { sm: "0", md: "0", lg: "0" },
     fontSize: { sm: "$font-sm", md: "$font-md", lg: "$font-lg" },
     borderRadius: "$radius-md",
     borderWidth: "1px",
@@ -76,19 +77,35 @@ var componentDefaults = {
     bg: "$color-bg",
     color: "$color-fg",
     placeholderColor: "$color-mutedFg",
-    iconSize: "1rem",
+    iconSize: { sm: "0.875rem", md: "1rem", lg: "1.125rem" },
     iconColor: "$color-mutedFg",
-    iconSpacing: "2.5rem",
+    iconColorFocus: "$color-primary",
+    iconColorError: "$color-danger",
+    iconSpacing: { sm: "2rem", md: "2.5rem", lg: "3rem" },
+    clearHoverBg: "$color-muted",
+    clearHoverColor: "$color-fg",
+    clearBorderRadius: "$radius-sm",
+    clearIconSize: { sm: "0.875rem", md: "1rem", lg: "1.125rem" },
     states: {
       focus: {
         borderColor: "$color-ring",
-        shadow: "0 0 0 2px $color-ring / 0.2"
+        shadow: "0 0 0 2px hsl(var(--cz-color-ring) / 0.2)"
       },
       error: {
         borderColor: "$color-danger",
-        focusShadow: "0 0 0 2px $color-danger / 0.2"
+        focusShadow: "0 0 0 2px hsl(var(--cz-color-danger) / 0.2)"
+      },
+      disabled: {
+        opacity: "0.5",
+        cursor: "not-allowed",
+        bg: "$color-muted",
+        color: "$color-mutedFg"
       },
-      disabled: { opacity: "0.5", cursor: "not-allowed" }
+      readOnly: {
+        bg: "$color-muted",
+        color: "$color-mutedFg",
+        cursor: "default"
+      }
     }
   },
   // ===== TEXTAREA =====
@@ -156,6 +173,29 @@ var componentDefaults = {
       outline: { bg: "transparent", color: "$color-fg", borderColor: "$color-border" }
     }
   },
+  // ===== STATUS BADGE =====
+  statusBadge: {
+    paddingX: "0.625rem",
+    paddingY: "0.25rem",
+    fontSize: "$font-xs",
+    fontWeight: "$font-medium",
+    lineHeight: "1rem",
+    borderRadius: "$radius-full",
+    dotSize: "0.5rem",
+    dotGap: "0.375rem",
+    successBg: "$color-success / 0.12",
+    successText: "$color-success",
+    successDot: "$color-success",
+    dangerBg: "$color-danger / 0.12",
+    dangerText: "$color-danger",
+    dangerDot: "$color-danger",
+    warningBg: "$color-warning / 0.12",
+    warningText: "$color-warning",
+    warningDot: "$color-warning",
+    primaryBg: "$color-primary / 0.12",
+    primaryText: "$color-primary",
+    primaryDot: "$color-primary"
+  },
   // ===== SWITCH =====
   switch: {
     width: { sm: "2rem", md: "2.75rem", lg: "3.5rem" },
@@ -302,13 +342,53 @@ var componentDefaults = {
   tabs: {
     listBorderWidth: "1px",
     listBorderColor: "$color-border",
+    listGap: "0.5rem",
     triggerPaddingX: "1rem",
     triggerPaddingY: "0.5rem",
+    triggerPaddingXSm: "0.75rem",
+    triggerPaddingYSm: "0.375rem",
+    triggerPaddingXLg: "1.25rem",
+    triggerPaddingYLg: "0.625rem",
     triggerFontSize: "$font-sm",
+    triggerFontSizeSm: "$font-xs",
+    triggerFontSizeLg: "$font-md",
     triggerFontWeight: "$font-medium",
     triggerColor: "$color-mutedFg",
     triggerActiveColor: "$color-primary",
     triggerActiveBorderColor: "$color-primary",
+    triggerGap: "$spacing-sm",
+    triggerRadius: "$radius-sm",
+    triggerBorderWidth: "2px",
+    triggerTransition: "$transition-fast",
+    iconSize: "0.875rem",
+    countPaddingX: "0.375rem",
+    countMinWidth: "1.25rem",
+    countHeight: "1.125rem",
+    countFontSize: "$font-xs",
+    countFontWeight: "$font-semibold",
+    countRadius: "$radius-sm",
+    countBg: "$color-muted",
+    countColor: "$color-mutedFg",
+    countActiveBg: "$color-primary / 0.15",
+    countActiveColor: "$color-primary",
+    pillsListGap: "$spacing-sm",
+    pillsTriggerBg: "$color-bg",
+    pillsTriggerColor: "$color-mutedFg",
+    pillsTriggerBorderColor: "$color-border",
+    pillsTriggerHoverBg: "$color-muted / 0.35",
+    pillsTriggerHoverColor: "$color-primary",
+    pillsTriggerActiveBg: "$color-primary",
+    pillsTriggerActiveColor: "$color-primaryFg",
+    pillsTriggerActiveBorderColor: "$color-primary",
+    pillsTriggerRadius: "$radius-md",
+    enclosedListBg: "$color-muted / 0.3",
+    enclosedListPadding: "0.25rem",
+    enclosedListRadius: "$radius-md",
+    enclosedTriggerColor: "$color-mutedFg",
+    enclosedTriggerActiveBg: "$color-bg",
+    enclosedTriggerActiveColor: "$color-fg",
+    enclosedTriggerRadius: "$radius-sm",
+    enclosedTriggerActiveShadow: "$shadow-sm",
     contentPadding: "$spacing-lg",
     states: {
       hover: { color: "$color-fg" },
@@ -329,6 +409,32 @@ var componentDefaults = {
     descriptionFontSize: "$font-sm",
     descriptionColor: "$color-mutedFg"
   },
+  // ===== MODAL =====
+  modal: {
+    overlayBg: "rgba(15, 23, 42, 0.55)",
+    contentBg: "$color-bg",
+    contentBorderRadius: "$radius-lg",
+    contentBorderColor: "$color-border",
+    contentShadow: "$shadow-lg",
+    headerPadding: "1rem 1rem 0.75rem",
+    bodyPadding: "0.75rem 1rem 1rem",
+    footerPadding: "0.75rem 1rem",
+    footerGap: "$spacing-md",
+    closeIconSize: "2rem",
+    closeIconPadding: "0.5rem",
+    closeIconRadius: "$radius-md",
+    closeIconBg: "transparent",
+    closeIconColor: "$color-mutedFg",
+    closeIconHoverBg: "$color-muted",
+    closeIconHoverColor: "$color-primary",
+    closeIconTransition: "$transition-fast",
+    closeIconFocusRing: "none",
+    tabFontSize: "13px",
+    tabFontWeight: "$font-medium",
+    tabColor: "$color-mutedFg",
+    tabActiveColor: "$color-primary",
+    tabActiveBorderColor: "$color-primary"
+  },
   // ===== DROPDOWN MENU =====
   dropdownMenu: {
     contentBg: "$color-bg",
@@ -371,6 +477,45 @@ var componentDefaults = {
     rowHoverBg: "$color-muted / 0.5",
     stripedBg: "$color-muted / 0.3"
   },
+  // ===== DATA TABLE =====
+  dataTable: {
+    containerBg: "$color-bg",
+    containerBorderRadius: "$radius-lg",
+    containerBorderColor: "$color-border",
+    containerShadow: "$shadow-sm",
+    headerCellPadding: "0.75rem 1rem",
+    headerFontSize: "$font-xs",
+    headerFontWeight: "$font-medium",
+    headerColor: "$color-mutedFg",
+    headerTextTransform: "uppercase",
+    headerLetterSpacing: "0.02em",
+    bodyCellPadding: "0.875rem 1rem",
+    bodyFontSize: "$font-sm",
+    bodyColor: "$color-fg",
+    rowBorderColor: "$color-border",
+    rowHoverBg: "$color-muted / 0.5",
+    stripedRowBg: "$color-muted / 0.3",
+    selectedRowBg: "$color-primary / 0.12",
+    sortIconOpacity: "0.3",
+    sortActiveColor: "$color-primary",
+    paginationPadding: "0.75rem 1rem",
+    paginationGap: "0.5rem",
+    paginationBorderColor: "$color-border",
+    paginationTextColor: "$color-mutedFg",
+    paginationTextStrongColor: "$color-fg",
+    paginationButtonSize: "32px",
+    paginationButtonRadius: "$radius-md",
+    paginationButtonHoverBg: "$color-muted / 0.4",
+    paginationButtonBorderColor: "transparent",
+    paginationButtonColor: "$color-fg",
+    paginationButtonDisabledColor: "$color-mutedFg",
+    emptyStateColor: "$color-mutedFg",
+    emptyStateTitleColor: "$color-fg",
+    emptyStateIconBg: "$color-muted",
+    emptyStateIconColor: "$color-mutedFg",
+    loadingShimmerBase: "$color-muted",
+    loadingShimmerHighlight: "$color-muted / 0.5"
+  },
   // ===== AVATAR =====
   avatar: {
     size: { sm: "2rem", md: "2.5rem", lg: "3.5rem" },
@@ -583,6 +728,11 @@ function generateButtonVariables(config) {
       vars.push(`  ${componentVarName("button", "paddingX", size)}: ${resolveToken(value)};`);
     }
   }
+  if (config.paddingY) {
+    for (const [size, value] of Object.entries(config.paddingY)) {
+      vars.push(`  ${componentVarName("button", "paddingY", 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)};`);
@@ -637,9 +787,18 @@ function generateButtonVariables(config) {
       if (variant.color) {
         vars.push(`  --cz-btn-${name}-color: ${resolveToken(variant.color)};`);
       }
+      if (variant.border) {
+        vars.push(`  --cz-btn-${name}-border: ${resolveToken(variant.border)};`);
+      }
       if (variant.borderColor) {
         vars.push(`  --cz-btn-${name}-border-color: ${resolveToken(variant.borderColor)};`);
       }
+      if (variant.hover?.color) {
+        vars.push(`  --cz-btn-${name}-hover-color: ${resolveToken(variant.hover.color)};`);
+      }
+      if (variant.hover?.bg) {
+        vars.push(`  --cz-btn-${name}-hover-bg: ${resolveToken(variant.hover.bg)};`);
+      }
     }
   }
   return `:root {
@@ -657,7 +816,7 @@ function generateButtonBase() {
   font-weight: var(--cz-btn-font-weight);
   transition: all var(--cz-btn-transition);
   cursor: pointer;
-  border: var(--cz-btn-border-width) solid transparent;
+  border: none;
 }
 
 .cz-btn:focus-visible {
@@ -675,12 +834,22 @@ function generateButtonBase() {
 function generateButtonSizes(config) {
   const sizes = ["sm", "md", "lg"];
   let css = "/* Button Sizes */\n";
+  const usePaddingY = config.paddingY && Object.keys(config.paddingY).length > 0;
   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});
-}
+`;
+    if (usePaddingY) {
+      css += `  padding: var(--cz-btn-padding-y-${size}) var(--cz-btn-padding-x-${size});
+`;
+    } else {
+      css += `  height: var(--cz-btn-height-${size});
+`;
+      css += `  padding: 0 var(--cz-btn-padding-x-${size});
+`;
+    }
+    css += `  font-size: var(--cz-btn-font-size-${size});
+`;
+    css += `}
 `;
   }
   return css;
@@ -694,7 +863,10 @@ function generateButtonVariants(variants) {
 `;
     css += `  color: var(--cz-btn-${name}-color);
 `;
-    if (variant.borderColor && variant.borderColor !== "transparent") {
+    if (variant.border) {
+      css += `  border: var(--cz-btn-${name}-border);
+`;
+    } else if (variant.borderColor && variant.borderColor !== "transparent") {
       css += `  border-color: var(--cz-btn-${name}-border-color);
 `;
     }
@@ -709,12 +881,16 @@ function generateButtonVariants(variants) {
     if (variant.hover) {
       css += `.cz-btn-${name}:hover {
 `;
-      if (variant.hover.opacity) {
+      if (variant.hover.opacity && !variant.hover.bg) {
         css += `  opacity: ${variant.hover.opacity};
 `;
       }
       if (variant.hover.bg) {
-        css += `  background: ${resolveToken(variant.hover.bg)};
+        css += `  background: var(--cz-btn-${name}-hover-bg);
+`;
+      }
+      if (variant.hover.color) {
+        css += `  color: var(--cz-btn-${name}-hover-color);
 `;
       }
       if (variant.textDecoration) {
@@ -735,6 +911,11 @@ function generateButtonIcon(config) {
 .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); }
+
+/* Full Width Button */
+.cz-btn-full {
+  width: 100%;
+}
 `;
 }
 function generateButtonLoading(config) {
@@ -751,6 +932,20 @@ function generateButtonLoading(config) {
 }
 
 // cli/generators/input.ts
+var isSizeMap = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+function pushSizeOrSingleVar(vars, component, key, value) {
+  if (!value) return;
+  if (typeof value === "string") {
+    vars.push(`  ${componentVarName(component, key)}: ${resolveToken(value)};`);
+    return;
+  }
+  for (const [size, tokenValue] of Object.entries(value)) {
+    if (!tokenValue) continue;
+    vars.push(
+      `  ${componentVarName(component, key, size)}: ${resolveToken(tokenValue)};`
+    );
+  }
+}
 function generateInputCSS(config) {
   let css = "";
   css += "/* ===== INPUT ===== */\n\n";
@@ -758,14 +953,18 @@ function generateInputCSS(config) {
   css += "\n";
   css += generateInputBase();
   css += "\n";
+  css += generateInputVariants(config);
+  css += "\n";
   css += generateInputSizes();
   css += "\n";
-  css += generateInputStates(config);
+  css += generateInputStates();
   css += "\n";
-  css += generateInputIcons(config);
+  css += generateInputIcons();
   css += "\n";
   css += generateInputClear();
   css += "\n";
+  css += generateInputPasswordToggle();
+  css += "\n";
   if (config.customCSS) {
     css += `/* Custom Input CSS */
 ${config.customCSS}
@@ -775,29 +974,26 @@ ${config.customCSS}
 }
 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)};`);
-    }
+  pushSizeOrSingleVar(vars, "input", "height", config.height);
+  pushSizeOrSingleVar(vars, "input", "paddingX", config.paddingX);
+  pushSizeOrSingleVar(vars, "input", "paddingY", config.paddingY);
+  if (config.fontSize && isSizeMap(config.fontSize)) {
+    pushSizeOrSingleVar(vars, "input", "fontSize", config.fontSize);
   }
   if (config.borderRadius) {
-    vars.push(`  ${componentVarName("input", "borderRadius")}: ${resolveToken(config.borderRadius)};`);
+    vars.push(
+      `  ${componentVarName("input", "borderRadius")}: ${resolveToken(config.borderRadius)};`
+    );
   }
   if (config.borderWidth) {
-    vars.push(`  ${componentVarName("input", "borderWidth")}: ${resolveToken(config.borderWidth)};`);
+    vars.push(
+      `  ${componentVarName("input", "borderWidth")}: ${resolveToken(config.borderWidth)};`
+    );
   }
   if (config.borderColor) {
-    vars.push(`  ${componentVarName("input", "borderColor")}: ${resolveToken(config.borderColor)};`);
+    vars.push(
+      `  ${componentVarName("input", "borderColor")}: ${resolveToken(config.borderColor)};`
+    );
   }
   if (config.bg) {
     vars.push(`  ${componentVarName("input", "bg")}: ${resolveToken(config.bg)};`);
@@ -806,31 +1002,107 @@ function generateInputVariables(config) {
     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)};`);
+    vars.push(
+      `  ${componentVarName("input", "placeholderColor")}: ${resolveToken(config.placeholderColor)};`
+    );
   }
+  pushSizeOrSingleVar(vars, "input", "iconSize", config.iconSize);
   if (config.iconColor) {
-    vars.push(`  ${componentVarName("input", "iconColor")}: ${resolveToken(config.iconColor)};`);
-  }
-  if (config.iconSpacing) {
-    vars.push(`  ${componentVarName("input", "iconSpacing")}: ${resolveToken(config.iconSpacing)};`);
+    vars.push(
+      `  ${componentVarName("input", "iconColor")}: ${resolveToken(config.iconColor)};`
+    );
+  }
+  if (config.iconColorFocus) {
+    vars.push(
+      `  ${componentVarName("input", "iconColorFocus")}: ${resolveToken(config.iconColorFocus)};`
+    );
+  }
+  if (config.iconColorError) {
+    vars.push(
+      `  ${componentVarName("input", "iconColorError")}: ${resolveToken(config.iconColorError)};`
+    );
+  }
+  pushSizeOrSingleVar(
+    vars,
+    "input",
+    "iconSpacing",
+    config.iconSpacing
+  );
+  pushSizeOrSingleVar(
+    vars,
+    "input",
+    "clearIconSize",
+    config.clearIconSize
+  );
+  if (config.clearHoverBg) {
+    vars.push(
+      `  ${componentVarName("input", "clearHoverBg")}: ${resolveToken(config.clearHoverBg)};`
+    );
+  }
+  if (config.clearHoverColor) {
+    vars.push(
+      `  ${componentVarName("input", "clearHoverColor")}: ${resolveToken(config.clearHoverColor)};`
+    );
+  }
+  if (config.clearBorderRadius) {
+    vars.push(
+      `  ${componentVarName("input", "clearBorderRadius")}: ${resolveToken(config.clearBorderRadius)};`
+    );
   }
   if (config.states?.focus?.borderColor) {
-    vars.push(`  ${componentVarName("input", "focusBorderColor")}: ${resolveToken(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)};`);
+    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)};`);
+    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)};`);
+    vars.push(
+      `  ${componentVarName("input", "errorFocusShadow")}: ${resolveToken(config.states.error.focusShadow)};`
+    );
   }
   if (config.states?.disabled?.opacity) {
-    vars.push(`  ${componentVarName("input", "disabledOpacity")}: ${config.states.disabled.opacity};`);
+    vars.push(
+      `  ${componentVarName("input", "disabledOpacity")}: ${config.states.disabled.opacity};`
+    );
+  }
+  if (config.states?.disabled?.cursor) {
+    vars.push(
+      `  ${componentVarName("input", "disabledCursor")}: ${config.states.disabled.cursor};`
+    );
+  }
+  if (config.states?.disabled?.bg) {
+    vars.push(
+      `  ${componentVarName("input", "disabledBg")}: ${resolveToken(config.states.disabled.bg)};`
+    );
+  }
+  if (config.states?.disabled?.color) {
+    vars.push(
+      `  ${componentVarName("input", "disabledColor")}: ${resolveToken(config.states.disabled.color)};`
+    );
+  }
+  if (config.states?.readOnly?.bg) {
+    vars.push(
+      `  ${componentVarName("input", "readOnlyBg")}: ${resolveToken(config.states.readOnly.bg)};`
+    );
+  }
+  if (config.states?.readOnly?.color) {
+    vars.push(
+      `  ${componentVarName("input", "readOnlyColor")}: ${resolveToken(config.states.readOnly.color)};`
+    );
+  }
+  if (config.states?.readOnly?.cursor) {
+    vars.push(
+      `  ${componentVarName("input", "readOnlyCursor")}: ${config.states.readOnly.cursor};`
+    );
   }
   return `:root {
 ${vars.join("\n")}
@@ -849,6 +1121,27 @@ function generateInputBase() {
   display: flex;
   align-items: center;
   width: 100%;
+  --cz-input-icon-spacing-current: var(--cz-input-icon-spacing, 2.5rem);
+  --cz-input-icon-size-current: var(--cz-input-icon-size, 1rem);
+  --cz-input-clear-icon-size-current: var(--cz-input-clear-icon-size, var(--cz-input-icon-size-current));
+}
+
+.cz-input-wrapper-sm {
+  --cz-input-icon-spacing-current: var(--cz-input-icon-spacing-sm, var(--cz-input-icon-spacing-current));
+  --cz-input-icon-size-current: var(--cz-input-icon-size-sm, var(--cz-input-icon-size-current));
+  --cz-input-clear-icon-size-current: var(--cz-input-clear-icon-size-sm, var(--cz-input-icon-size-current));
+}
+
+.cz-input-wrapper-md {
+  --cz-input-icon-spacing-current: var(--cz-input-icon-spacing-md, var(--cz-input-icon-spacing-current));
+  --cz-input-icon-size-current: var(--cz-input-icon-size-md, var(--cz-input-icon-size-current));
+  --cz-input-clear-icon-size-current: var(--cz-input-clear-icon-size-md, var(--cz-input-icon-size-current));
+}
+
+.cz-input-wrapper-lg {
+  --cz-input-icon-spacing-current: var(--cz-input-icon-spacing-lg, var(--cz-input-icon-spacing-current));
+  --cz-input-icon-size-current: var(--cz-input-icon-size-lg, var(--cz-input-icon-size-current));
+  --cz-input-clear-icon-size-current: var(--cz-input-clear-icon-size-lg, var(--cz-input-icon-size-current));
 }
 
 .cz-input {
@@ -865,26 +1158,87 @@ function generateInputBase() {
 }
 `;
 }
+function generateInputVariants(config) {
+  if (!config.variants || Object.keys(config.variants).length === 0) {
+    return "";
+  }
+  const blocks = [];
+  for (const [name, variant] of Object.entries(config.variants)) {
+    const lines = [];
+    if (variant.bg) {
+      lines.push(`  --cz-input-bg: ${resolveToken(variant.bg)};`);
+    }
+    if (variant.color) {
+      lines.push(`  --cz-input-color: ${resolveToken(variant.color)};`);
+    }
+    if (variant.borderColor) {
+      lines.push(`  --cz-input-border-color: ${resolveToken(variant.borderColor)};`);
+    }
+    if (variant.placeholderColor) {
+      lines.push(
+        `  --cz-input-placeholder-color: ${resolveToken(variant.placeholderColor)};`
+      );
+    }
+    if (variant.iconColor) {
+      lines.push(`  --cz-input-icon-color: ${resolveToken(variant.iconColor)};`);
+    }
+    if (variant.iconColorFocus) {
+      lines.push(
+        `  --cz-input-icon-color-focus: ${resolveToken(variant.iconColorFocus)};`
+      );
+    }
+    if (variant.iconColorError) {
+      lines.push(
+        `  --cz-input-icon-color-error: ${resolveToken(variant.iconColorError)};`
+      );
+    }
+    if (variant.focusBorderColor) {
+      lines.push(
+        `  --cz-input-focus-border-color: ${resolveToken(variant.focusBorderColor)};`
+      );
+    }
+    if (variant.focusShadow) {
+      lines.push(`  --cz-input-focus-shadow: ${resolveToken(variant.focusShadow)};`);
+    }
+    if (variant.clearHoverBg) {
+      lines.push(
+        `  --cz-input-clear-hover-bg: ${resolveToken(variant.clearHoverBg)};`
+      );
+    }
+    if (variant.clearHoverColor) {
+      lines.push(
+        `  --cz-input-clear-hover-color: ${resolveToken(variant.clearHoverColor)};`
+      );
+    }
+    if (lines.length === 0) continue;
+    blocks.push(
+      `.cz-input-wrapper-variant-${name} {
+${lines.join("\n")}
+}`
+    );
+  }
+  return blocks.join("\n\n");
+}
 function generateInputSizes() {
   return `/* Input Sizes */
 .cz-input-sm {
   height: var(--cz-input-height-sm);
-  padding: 0 var(--cz-input-padding-x-sm);
+  padding: var(--cz-input-padding-y-sm, 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);
+  padding: var(--cz-input-padding-y-md, 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);
+  padding: var(--cz-input-padding-y-lg, 0) var(--cz-input-padding-x-lg);
   font-size: var(--cz-input-font-size-lg);
 }
 `;
 }
-function generateInputStates(config) {
+function generateInputStates() {
   return `.cz-input:focus {
   outline: none;
   border-color: var(--cz-input-focus-border-color);
@@ -892,8 +1246,16 @@ function generateInputStates(config) {
 }
 
 .cz-input:disabled {
-  cursor: not-allowed;
-  opacity: var(--cz-input-disabled-opacity);
+  cursor: var(--cz-input-disabled-cursor, not-allowed);
+  opacity: var(--cz-input-disabled-opacity, 0.5);
+  background-color: var(--cz-input-disabled-bg, var(--cz-input-bg));
+  color: var(--cz-input-disabled-color, var(--cz-input-color));
+}
+
+.cz-input:read-only {
+  cursor: var(--cz-input-read-only-cursor, default);
+  background-color: var(--cz-input-read-only-bg, var(--cz-input-bg));
+  color: var(--cz-input-read-only-color, var(--cz-input-color));
 }
 
 .cz-input-error {
@@ -910,24 +1272,36 @@ function generateInputStates(config) {
 }
 `;
 }
-function generateInputIcons(config) {
+function generateInputIcons() {
   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-has-left-icon .cz-input { padding-left: var(--cz-input-icon-spacing-current); }
+.cz-input-has-right-icon .cz-input { padding-right: var(--cz-input-icon-spacing-current); }
 
 .cz-input-icon {
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--cz-input-icon-spacing);
+  width: var(--cz-input-icon-spacing-current);
   height: 100%;
   color: var(--cz-input-icon-color);
   pointer-events: none;
+  transition: color var(--cz-transition-fast);
+}
+.cz-input-icon svg {
+  width: var(--cz-input-icon-size-current);
+  height: var(--cz-input-icon-size-current);
 }
-.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; }
+
+.cz-input-wrapper:focus-within .cz-input-icon {
+  color: var(--cz-input-icon-color-focus, var(--cz-input-icon-color));
+}
+
+.cz-input-wrapper-error .cz-input-icon {
+  color: var(--cz-input-icon-color-error, var(--cz-input-icon-color));
+}
 `;
 }
 function generateInputClear() {
@@ -938,16 +1312,52 @@ function generateInputClear() {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--cz-input-icon-spacing);
+  width: var(--cz-input-icon-spacing-current);
   height: 100%;
   color: var(--cz-input-icon-color);
   background: transparent;
   border: none;
+  border-radius: var(--cz-input-clear-border-radius, var(--cz-radius-sm));
   cursor: pointer;
-  transition: color var(--cz-transition-fast);
+  transition: color var(--cz-transition-fast), background-color var(--cz-transition-fast);
+}
+.cz-input-clear:hover {
+  background-color: var(--cz-input-clear-hover-bg, transparent);
+  color: var(--cz-input-clear-hover-color, var(--cz-input-color));
+}
+.cz-input-clear svg {
+  width: var(--cz-input-clear-icon-size-current);
+  height: var(--cz-input-clear-icon-size-current);
+}
+`;
+}
+function generateInputPasswordToggle() {
+  return `/* Input Password Toggle */
+.cz-input-password-toggle {
+  position: absolute;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--cz-input-icon-spacing-current);
+  height: 100%;
+  color: var(--cz-input-icon-color);
+  background: transparent;
+  border: none;
+  border-radius: var(--cz-input-clear-border-radius, var(--cz-radius-sm));
+  cursor: pointer;
+  transition: color var(--cz-transition-fast), background-color var(--cz-transition-fast);
+}
+
+.cz-input-password-toggle:hover {
+  background-color: var(--cz-input-clear-hover-bg, transparent);
+  color: var(--cz-input-icon-color-focus, var(--cz-input-icon-color));
+}
+
+.cz-input-password-toggle svg {
+  width: var(--cz-input-clear-icon-size-current);
+  height: var(--cz-input-clear-icon-size-current);
 }
-.cz-input-clear:hover { color: var(--cz-input-color); }
-.cz-input-clear svg { width: 0.875rem; height: 0.875rem; }
 `;
 }
 
@@ -1900,6 +2310,65 @@ function generateBadgeVariants(config) {
   return css;
 }
 
+// cli/generators/status-badge.ts
+function generateStatusBadgeCSS(config) {
+  let css = "/* ===== STATUS BADGE ===== */\n\n";
+  css += generateStatusBadgeVariables(config);
+  css += "\n";
+  if (config.customCSS) css += `/* Custom StatusBadge CSS */
+${config.customCSS}
+`;
+  return css;
+}
+function generateStatusBadgeVariables(config) {
+  const vars = [];
+  if (config.paddingX) vars.push(`  --cz-status-badge-padding-x: ${resolveValue(config.paddingX)};`);
+  if (config.paddingY) vars.push(`  --cz-status-badge-padding-y: ${resolveValue(config.paddingY)};`);
+  if (config.fontSize) vars.push(`  --cz-status-badge-font-size: ${resolveValue(config.fontSize)};`);
+  if (config.fontWeight) vars.push(`  --cz-status-badge-font-weight: ${resolveValue(config.fontWeight)};`);
+  if (config.lineHeight) vars.push(`  --cz-status-badge-line-height: ${resolveValue(config.lineHeight)};`);
+  if (config.borderRadius) {
+    vars.push(`  --cz-status-badge-border-radius: ${resolveValue(config.borderRadius)};`);
+  }
+  if (config.dotSize) vars.push(`  --cz-status-badge-dot-size: ${resolveValue(config.dotSize)};`);
+  if (config.dotGap) vars.push(`  --cz-status-badge-dot-gap: ${resolveValue(config.dotGap)};`);
+  if (config.successBg) vars.push(`  --cz-status-badge-success-bg: ${resolveValue(config.successBg)};`);
+  if (config.successText) {
+    vars.push(`  --cz-status-badge-success-text: ${resolveValue(config.successText)};`);
+  }
+  if (config.successDot) vars.push(`  --cz-status-badge-success-dot: ${resolveValue(config.successDot)};`);
+  if (config.dangerBg) vars.push(`  --cz-status-badge-danger-bg: ${resolveValue(config.dangerBg)};`);
+  if (config.dangerText) vars.push(`  --cz-status-badge-danger-text: ${resolveValue(config.dangerText)};`);
+  if (config.dangerDot) vars.push(`  --cz-status-badge-danger-dot: ${resolveValue(config.dangerDot)};`);
+  if (config.warningBg) {
+    vars.push(`  --cz-status-badge-warning-bg: ${resolveValue(config.warningBg)};`);
+  }
+  if (config.warningText) {
+    vars.push(`  --cz-status-badge-warning-text: ${resolveValue(config.warningText)};`);
+  }
+  if (config.warningDot) {
+    vars.push(`  --cz-status-badge-warning-dot: ${resolveValue(config.warningDot)};`);
+  }
+  if (config.primaryBg) {
+    vars.push(`  --cz-status-badge-primary-bg: ${resolveValue(config.primaryBg)};`);
+  }
+  if (config.primaryText) {
+    vars.push(`  --cz-status-badge-primary-text: ${resolveValue(config.primaryText)};`);
+  }
+  if (config.primaryDot) {
+    vars.push(`  --cz-status-badge-primary-dot: ${resolveValue(config.primaryDot)};`);
+  }
+  return `:root {
+${vars.join("\n")}
+}
+`;
+}
+function resolveValue(value) {
+  if (!value.startsWith("$")) return value;
+  if (/\s+\$/.test(value)) return value;
+  return resolveToken(value);
+}
+
 // cli/generators/avatar.ts
 function generateAvatarCSS(config) {
   let css = "/* ===== AVATAR ===== */\n\n";
@@ -2013,9 +2482,12 @@ ${config.customCSS}
 }
 function generateTableVariables(config) {
   const vars = [];
+  if (config.borderRadius) vars.push(`  --cz-table-border-radius: ${config.borderRadius};`);
+  if (config.borderWidth) vars.push(`  --cz-table-border-width: ${config.borderWidth};`);
   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.cellPadding) vars.push(`  --cz-table-cell-padding: ${config.cellPadding};`);
   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)};`);
@@ -2028,7 +2500,8 @@ ${vars.join("\n")}
 function generateTableBase() {
   return `.cz-table-wrapper {
   width: 100%;
-  overflow: auto;
+  overflow-x: auto;
+  border-radius: var(--cz-table-border-radius);
 }
 
 .cz-table {
@@ -2042,11 +2515,11 @@ function generateTableBase() {
 }
 
 .cz-table-head {
-  padding: var(--cz-table-cell-padding-y) var(--cz-table-cell-padding-x);
+  padding: var(--cz-table-cell-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);
+  border-bottom: var(--cz-table-border-width) solid var(--cz-table-border-color);
   white-space: nowrap;
 }
 
@@ -2063,8 +2536,8 @@ function generateTableBase() {
 }
 
 .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);
+  padding: var(--cz-table-cell-padding, var(--cz-table-cell-padding-y) var(--cz-table-cell-padding-x));
+  border-bottom: var(--cz-table-border-width) solid var(--cz-table-border-color);
 }
 
 .cz-table-footer {
@@ -2074,7 +2547,7 @@ function generateTableBase() {
 
 .cz-table-footer .cz-table-cell {
   border-bottom: none;
-  border-top: 1px solid var(--cz-table-border-color);
+  border-top: var(--cz-table-border-width) solid var(--cz-table-border-color);
 }
 
 /* Table Striped */
@@ -2092,6 +2565,150 @@ function generateTableBase() {
 `;
 }
 
+// cli/generators/data-table.ts
+function generateDataTableCSS(config) {
+  let css = "/* ===== DATA TABLE ===== */\n\n";
+  css += generateDataTableVariables(config);
+  css += "\n";
+  css += generateDataTableBase();
+  css += "\n";
+  if (config.customCSS) css += `/* Custom DataTable CSS */
+${config.customCSS}
+`;
+  return css;
+}
+function generateDataTableVariables(config) {
+  const vars = [];
+  if (config.containerBg) vars.push(`  --cz-data-table-container-bg: ${resolveValue2(config.containerBg)};`);
+  if (config.containerBorderRadius) {
+    vars.push(`  --cz-data-table-container-border-radius: ${resolveValue2(config.containerBorderRadius)};`);
+  }
+  if (config.containerBorderColor) {
+    vars.push(`  --cz-data-table-container-border-color: ${resolveValue2(config.containerBorderColor)};`);
+  }
+  if (config.containerShadow) {
+    vars.push(`  --cz-data-table-container-shadow: ${resolveValue2(config.containerShadow)};`);
+  }
+  if (config.headerCellPadding) {
+    vars.push(`  --cz-data-table-header-cell-padding: ${resolveValue2(config.headerCellPadding)};`);
+  }
+  if (config.headerFontSize) {
+    vars.push(`  --cz-data-table-header-font-size: ${resolveValue2(config.headerFontSize)};`);
+  }
+  if (config.headerFontWeight) {
+    vars.push(`  --cz-data-table-header-font-weight: ${resolveValue2(config.headerFontWeight)};`);
+  }
+  if (config.headerColor) vars.push(`  --cz-data-table-header-color: ${resolveValue2(config.headerColor)};`);
+  if (config.headerTextTransform) {
+    vars.push(`  --cz-data-table-header-text-transform: ${resolveValue2(config.headerTextTransform)};`);
+  }
+  if (config.headerLetterSpacing) {
+    vars.push(`  --cz-data-table-header-letter-spacing: ${resolveValue2(config.headerLetterSpacing)};`);
+  }
+  if (config.bodyCellPadding) {
+    vars.push(`  --cz-data-table-body-cell-padding: ${resolveValue2(config.bodyCellPadding)};`);
+  }
+  if (config.bodyFontSize) {
+    vars.push(`  --cz-data-table-body-font-size: ${resolveValue2(config.bodyFontSize)};`);
+  }
+  if (config.bodyColor) vars.push(`  --cz-data-table-body-color: ${resolveValue2(config.bodyColor)};`);
+  if (config.rowBorderColor) {
+    vars.push(`  --cz-data-table-row-border-color: ${resolveValue2(config.rowBorderColor)};`);
+  }
+  if (config.rowHoverBg) vars.push(`  --cz-data-table-row-hover-bg: ${resolveValue2(config.rowHoverBg)};`);
+  if (config.stripedRowBg) {
+    vars.push(`  --cz-data-table-striped-row-bg: ${resolveValue2(config.stripedRowBg)};`);
+  }
+  if (config.selectedRowBg) {
+    vars.push(`  --cz-data-table-selected-row-bg: ${resolveValue2(config.selectedRowBg)};`);
+  }
+  if (config.sortIconOpacity) {
+    vars.push(`  --cz-data-table-sort-icon-opacity: ${resolveValue2(config.sortIconOpacity)};`);
+  }
+  if (config.sortActiveColor) {
+    vars.push(`  --cz-data-table-sort-active-color: ${resolveValue2(config.sortActiveColor)};`);
+  }
+  if (config.paginationPadding) {
+    vars.push(`  --cz-data-table-pagination-padding: ${resolveValue2(config.paginationPadding)};`);
+  }
+  if (config.paginationGap) vars.push(`  --cz-data-table-pagination-gap: ${resolveValue2(config.paginationGap)};`);
+  if (config.paginationBorderColor) {
+    vars.push(`  --cz-data-table-pagination-border-color: ${resolveValue2(config.paginationBorderColor)};`);
+  }
+  if (config.paginationTextColor) {
+    vars.push(`  --cz-data-table-pagination-text-color: ${resolveValue2(config.paginationTextColor)};`);
+  }
+  if (config.paginationTextStrongColor) {
+    vars.push(`  --cz-data-table-pagination-text-strong-color: ${resolveValue2(config.paginationTextStrongColor)};`);
+  }
+  if (config.paginationButtonSize) {
+    vars.push(`  --cz-data-table-pagination-button-size: ${resolveValue2(config.paginationButtonSize)};`);
+  }
+  if (config.paginationButtonRadius) {
+    vars.push(`  --cz-data-table-pagination-button-radius: ${resolveValue2(config.paginationButtonRadius)};`);
+  }
+  if (config.paginationButtonHoverBg) {
+    vars.push(`  --cz-data-table-pagination-button-hover-bg: ${resolveValue2(config.paginationButtonHoverBg)};`);
+  }
+  if (config.paginationButtonBorderColor) {
+    vars.push(`  --cz-data-table-pagination-button-border-color: ${resolveValue2(config.paginationButtonBorderColor)};`);
+  }
+  if (config.paginationButtonColor) {
+    vars.push(`  --cz-data-table-pagination-button-color: ${resolveValue2(config.paginationButtonColor)};`);
+  }
+  if (config.paginationButtonDisabledColor) {
+    vars.push(`  --cz-data-table-pagination-button-disabled-color: ${resolveValue2(config.paginationButtonDisabledColor)};`);
+  }
+  if (config.emptyStateColor) {
+    vars.push(`  --cz-data-table-empty-state-color: ${resolveValue2(config.emptyStateColor)};`);
+  }
+  if (config.emptyStateTitleColor) {
+    vars.push(`  --cz-data-table-empty-state-title-color: ${resolveValue2(config.emptyStateTitleColor)};`);
+  }
+  if (config.emptyStateIconBg) {
+    vars.push(`  --cz-data-table-empty-state-icon-bg: ${resolveValue2(config.emptyStateIconBg)};`);
+  }
+  if (config.emptyStateIconColor) {
+    vars.push(`  --cz-data-table-empty-state-icon-color: ${resolveValue2(config.emptyStateIconColor)};`);
+  }
+  if (config.loadingShimmerBase) {
+    vars.push(`  --cz-data-table-loading-shimmer-base: ${resolveValue2(config.loadingShimmerBase)};`);
+  }
+  if (config.loadingShimmerHighlight) {
+    vars.push(`  --cz-data-table-loading-shimmer-highlight: ${resolveValue2(config.loadingShimmerHighlight)};`);
+  }
+  return `:root {
+${vars.join("\n")}
+}
+`;
+}
+function resolveValue2(value) {
+  if (!value.startsWith("$")) return value;
+  if (/\s+\$/.test(value)) return value;
+  return resolveToken(value);
+}
+function generateDataTableBase() {
+  return `.cz-data-table-page-btn {
+  transition: all var(--transition-fast, var(--cz-transition-fast));
+}
+
+.cz-data-table-page-btn:hover:not(:disabled) {
+  background: var(--cz-data-table-pagination-button-hover-bg, transparent);
+  border-color: var(--cz-data-table-pagination-button-border-color, transparent);
+}
+
+.cz-data-table-shimmer {
+  background-size: 200% 100%;
+  animation: cz-data-table-shimmer 1.5s infinite;
+}
+
+@keyframes cz-data-table-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+`;
+}
+
 // cli/generators/code.ts
 function generateCodeCSS(config) {
   let css = "/* ===== CODE ===== */\n\n";
@@ -2747,13 +3364,53 @@ 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.listGap) vars.push(`  --cz-tabs-list-gap: ${resolveToken(config.listGap)};`);
+  if (config.triggerPaddingX) vars.push(`  --cz-tabs-trigger-padding-x: ${resolveToken(config.triggerPaddingX)};`);
+  if (config.triggerPaddingY) vars.push(`  --cz-tabs-trigger-padding-y: ${resolveToken(config.triggerPaddingY)};`);
+  if (config.triggerPaddingXSm) vars.push(`  --cz-tabs-trigger-padding-x-sm: ${resolveToken(config.triggerPaddingXSm)};`);
+  if (config.triggerPaddingYSm) vars.push(`  --cz-tabs-trigger-padding-y-sm: ${resolveToken(config.triggerPaddingYSm)};`);
+  if (config.triggerPaddingXLg) vars.push(`  --cz-tabs-trigger-padding-x-lg: ${resolveToken(config.triggerPaddingXLg)};`);
+  if (config.triggerPaddingYLg) vars.push(`  --cz-tabs-trigger-padding-y-lg: ${resolveToken(config.triggerPaddingYLg)};`);
   if (config.triggerFontSize) vars.push(`  --cz-tabs-trigger-font-size: ${resolveToken(config.triggerFontSize)};`);
+  if (config.triggerFontSizeSm) vars.push(`  --cz-tabs-trigger-font-size-sm: ${resolveToken(config.triggerFontSizeSm)};`);
+  if (config.triggerFontSizeLg) vars.push(`  --cz-tabs-trigger-font-size-lg: ${resolveToken(config.triggerFontSizeLg)};`);
   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.triggerGap) vars.push(`  --cz-tabs-trigger-gap: ${resolveToken(config.triggerGap)};`);
+  if (config.triggerRadius) vars.push(`  --cz-tabs-trigger-radius: ${resolveToken(config.triggerRadius)};`);
+  if (config.triggerBorderWidth) vars.push(`  --cz-tabs-trigger-border-width: ${config.triggerBorderWidth};`);
+  if (config.triggerTransition) vars.push(`  --cz-tabs-trigger-transition: ${resolveToken(config.triggerTransition)};`);
+  if (config.iconSize) vars.push(`  --cz-tabs-icon-size: ${resolveToken(config.iconSize)};`);
+  if (config.countPaddingX) vars.push(`  --cz-tabs-count-padding-x: ${resolveToken(config.countPaddingX)};`);
+  if (config.countMinWidth) vars.push(`  --cz-tabs-count-min-width: ${resolveToken(config.countMinWidth)};`);
+  if (config.countHeight) vars.push(`  --cz-tabs-count-height: ${resolveToken(config.countHeight)};`);
+  if (config.countFontSize) vars.push(`  --cz-tabs-count-font-size: ${resolveToken(config.countFontSize)};`);
+  if (config.countFontWeight) vars.push(`  --cz-tabs-count-font-weight: ${resolveToken(config.countFontWeight)};`);
+  if (config.countRadius) vars.push(`  --cz-tabs-count-radius: ${resolveToken(config.countRadius)};`);
+  if (config.countBg) vars.push(`  --cz-tabs-count-bg: ${resolveToken(config.countBg)};`);
+  if (config.countColor) vars.push(`  --cz-tabs-count-color: ${resolveToken(config.countColor)};`);
+  if (config.countActiveBg) vars.push(`  --cz-tabs-count-active-bg: ${resolveToken(config.countActiveBg)};`);
+  if (config.countActiveColor) vars.push(`  --cz-tabs-count-active-color: ${resolveToken(config.countActiveColor)};`);
+  if (config.pillsListGap) vars.push(`  --cz-tabs-pills-list-gap: ${resolveToken(config.pillsListGap)};`);
+  if (config.pillsTriggerBg) vars.push(`  --cz-tabs-pills-trigger-bg: ${resolveToken(config.pillsTriggerBg)};`);
+  if (config.pillsTriggerColor) vars.push(`  --cz-tabs-pills-trigger-color: ${resolveToken(config.pillsTriggerColor)};`);
+  if (config.pillsTriggerBorderColor) vars.push(`  --cz-tabs-pills-trigger-border-color: ${resolveToken(config.pillsTriggerBorderColor)};`);
+  if (config.pillsTriggerHoverBg) vars.push(`  --cz-tabs-pills-trigger-hover-bg: ${resolveToken(config.pillsTriggerHoverBg)};`);
+  if (config.pillsTriggerHoverColor) vars.push(`  --cz-tabs-pills-trigger-hover-color: ${resolveToken(config.pillsTriggerHoverColor)};`);
+  if (config.pillsTriggerActiveBg) vars.push(`  --cz-tabs-pills-trigger-active-bg: ${resolveToken(config.pillsTriggerActiveBg)};`);
+  if (config.pillsTriggerActiveColor) vars.push(`  --cz-tabs-pills-trigger-active-color: ${resolveToken(config.pillsTriggerActiveColor)};`);
+  if (config.pillsTriggerActiveBorderColor) vars.push(`  --cz-tabs-pills-trigger-active-border-color: ${resolveToken(config.pillsTriggerActiveBorderColor)};`);
+  if (config.pillsTriggerRadius) vars.push(`  --cz-tabs-pills-trigger-radius: ${resolveToken(config.pillsTriggerRadius)};`);
+  if (config.enclosedListBg) vars.push(`  --cz-tabs-enclosed-list-bg: ${resolveToken(config.enclosedListBg)};`);
+  if (config.enclosedListPadding) vars.push(`  --cz-tabs-enclosed-list-padding: ${resolveToken(config.enclosedListPadding)};`);
+  if (config.enclosedListRadius) vars.push(`  --cz-tabs-enclosed-list-radius: ${resolveToken(config.enclosedListRadius)};`);
+  if (config.enclosedTriggerColor) vars.push(`  --cz-tabs-enclosed-trigger-color: ${resolveToken(config.enclosedTriggerColor)};`);
+  if (config.enclosedTriggerActiveBg) vars.push(`  --cz-tabs-enclosed-trigger-active-bg: ${resolveToken(config.enclosedTriggerActiveBg)};`);
+  if (config.enclosedTriggerActiveColor) vars.push(`  --cz-tabs-enclosed-trigger-active-color: ${resolveToken(config.enclosedTriggerActiveColor)};`);
+  if (config.enclosedTriggerRadius) vars.push(`  --cz-tabs-enclosed-trigger-radius: ${resolveToken(config.enclosedTriggerRadius)};`);
+  if (config.enclosedTriggerActiveShadow) vars.push(`  --cz-tabs-enclosed-trigger-active-shadow: ${resolveToken(config.enclosedTriggerActiveShadow)};`);
   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};`);
@@ -2767,28 +3424,45 @@ function generateTabsBase() {
   return `.cz-tabs {
   display: flex;
   flex-direction: column;
+  width: 100%;
 }
 
 .cz-tabs-list {
   display: flex;
+  align-items: center;
   border-bottom: var(--cz-tabs-list-border-width) solid var(--cz-tabs-list-border-color);
-  gap: 0.5rem;
+  gap: var(--cz-tabs-list-gap);
+  padding-bottom: 0;
+}
+
+.cz-tabs--full-width .cz-tabs-list {
+  width: 100%;
+}
+
+.cz-tabs--full-width .cz-tabs-trigger {
+  flex: 1;
+}
+
+.cz-tabs--no-border .cz-tabs-list {
+  border-bottom: none;
 }
 
 .cz-tabs-trigger {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  gap: var(--cz-tabs-trigger-gap);
   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;
+  border-bottom: var(--cz-tabs-trigger-border-width) solid transparent;
   margin-bottom: calc(var(--cz-tabs-list-border-width) * -1);
+  border-radius: var(--cz-tabs-trigger-radius);
   cursor: pointer;
-  transition: all var(--cz-transition-fast);
+  transition: all var(--cz-tabs-trigger-transition);
   white-space: nowrap;
 }
 
@@ -2799,7 +3473,6 @@ function generateTabsBase() {
 .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"],
@@ -2813,6 +3486,107 @@ function generateTabsBase() {
   cursor: not-allowed;
 }
 
+.cz-tabs-trigger-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--cz-tabs-icon-size);
+  line-height: 1;
+}
+
+.cz-tabs-trigger-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--cz-tabs-count-padding-x);
+  min-width: var(--cz-tabs-count-min-width);
+  height: var(--cz-tabs-count-height);
+  border-radius: var(--cz-tabs-count-radius);
+  font-size: var(--cz-tabs-count-font-size);
+  font-weight: var(--cz-tabs-count-font-weight);
+  background: var(--cz-tabs-count-bg);
+  color: var(--cz-tabs-count-color);
+}
+
+.cz-tabs-trigger[data-state="active"] .cz-tabs-trigger-count,
+.cz-tabs-trigger.cz-tabs-trigger-active .cz-tabs-trigger-count {
+  background: var(--cz-tabs-count-active-bg);
+  color: var(--cz-tabs-count-active-color);
+}
+
+.cz-tabs--size-sm .cz-tabs-trigger {
+  padding: var(--cz-tabs-trigger-padding-y-sm) var(--cz-tabs-trigger-padding-x-sm);
+  font-size: var(--cz-tabs-trigger-font-size-sm);
+}
+
+.cz-tabs--size-md .cz-tabs-trigger {
+  padding: var(--cz-tabs-trigger-padding-y) var(--cz-tabs-trigger-padding-x);
+  font-size: var(--cz-tabs-trigger-font-size);
+}
+
+.cz-tabs--size-lg .cz-tabs-trigger {
+  padding: var(--cz-tabs-trigger-padding-y-lg) var(--cz-tabs-trigger-padding-x-lg);
+  font-size: var(--cz-tabs-trigger-font-size-lg);
+}
+
+.cz-tabs--variant-underline .cz-tabs-list {
+  background: transparent;
+}
+
+.cz-tabs--variant-pills .cz-tabs-list {
+  border-bottom: none;
+  gap: var(--cz-tabs-pills-list-gap);
+}
+
+.cz-tabs--variant-pills .cz-tabs-trigger {
+  color: var(--cz-tabs-pills-trigger-color);
+  background: var(--cz-tabs-pills-trigger-bg);
+  border: 1px solid var(--cz-tabs-pills-trigger-border-color);
+  margin-bottom: 0;
+  border-radius: var(--cz-tabs-pills-trigger-radius);
+}
+
+.cz-tabs--variant-pills .cz-tabs-trigger:hover {
+  background: var(--cz-tabs-pills-trigger-hover-bg);
+  color: var(--cz-tabs-pills-trigger-hover-color);
+}
+
+.cz-tabs--variant-pills .cz-tabs-trigger[data-state="active"],
+.cz-tabs--variant-pills .cz-tabs-trigger.cz-tabs-trigger-active {
+  background: var(--cz-tabs-pills-trigger-active-bg);
+  color: var(--cz-tabs-pills-trigger-active-color);
+  border-color: var(--cz-tabs-pills-trigger-active-border-color);
+}
+
+.cz-tabs--variant-pills .cz-tabs-trigger[data-state="active"] .cz-tabs-trigger-count,
+.cz-tabs--variant-pills .cz-tabs-trigger.cz-tabs-trigger-active .cz-tabs-trigger-count {
+  background: var(--cz-tabs-count-active-bg);
+  color: var(--cz-tabs-count-active-color);
+}
+
+.cz-tabs--variant-enclosed .cz-tabs-list {
+  border-bottom: none;
+  background: var(--cz-tabs-enclosed-list-bg);
+  padding: var(--cz-tabs-enclosed-list-padding);
+  border-radius: var(--cz-tabs-enclosed-list-radius);
+  gap: var(--cz-tabs-list-gap);
+}
+
+.cz-tabs--variant-enclosed .cz-tabs-trigger {
+  color: var(--cz-tabs-enclosed-trigger-color);
+  margin-bottom: 0;
+  border: none;
+  border-radius: var(--cz-tabs-enclosed-trigger-radius);
+}
+
+.cz-tabs--variant-enclosed .cz-tabs-trigger[data-state="active"],
+.cz-tabs--variant-enclosed .cz-tabs-trigger.cz-tabs-trigger-active {
+  color: var(--cz-tabs-enclosed-trigger-active-color);
+  background: var(--cz-tabs-enclosed-trigger-active-bg);
+  border-bottom-color: transparent;
+  box-shadow: var(--cz-tabs-enclosed-trigger-active-shadow);
+}
+
 .cz-tabs-content {
   padding: var(--cz-tabs-content-padding);
 }
@@ -3103,6 +3877,121 @@ function generateDialogBase() {
 `;
 }
 
+// cli/generators/modal.ts
+function generateModalCSS(config) {
+  let css = "/* ===== MODAL ===== */\n\n";
+  css += generateModalVariables(config);
+  css += "\n";
+  css += generateModalBase();
+  css += "\n";
+  if (config.customCSS) css += `/* Custom Modal CSS */
+${config.customCSS}
+`;
+  return css;
+}
+function generateModalVariables(config) {
+  const vars = [];
+  if (config.overlayBg) vars.push(`  --cz-modal-overlay-bg: ${resolveValue3(config.overlayBg)};`);
+  if (config.contentBg) vars.push(`  --cz-modal-content-bg: ${resolveValue3(config.contentBg)};`);
+  if (config.contentBorderRadius) {
+    vars.push(`  --cz-modal-content-border-radius: ${resolveValue3(config.contentBorderRadius)};`);
+  }
+  if (config.contentBorderColor) {
+    vars.push(`  --cz-modal-content-border-color: ${resolveValue3(config.contentBorderColor)};`);
+  }
+  if (config.contentShadow) vars.push(`  --cz-modal-content-shadow: ${resolveValue3(config.contentShadow)};`);
+  if (config.headerPadding) vars.push(`  --cz-modal-header-padding: ${resolveValue3(config.headerPadding)};`);
+  if (config.bodyPadding) vars.push(`  --cz-modal-body-padding: ${resolveValue3(config.bodyPadding)};`);
+  if (config.footerPadding) vars.push(`  --cz-modal-footer-padding: ${resolveValue3(config.footerPadding)};`);
+  if (config.footerGap) vars.push(`  --cz-modal-footer-gap: ${resolveValue3(config.footerGap)};`);
+  if (config.closeIconSize) vars.push(`  --cz-modal-close-icon-size: ${resolveValue3(config.closeIconSize)};`);
+  if (config.closeIconPadding) {
+    vars.push(`  --cz-modal-close-icon-padding: ${resolveValue3(config.closeIconPadding)};`);
+  }
+  if (config.closeIconRadius) vars.push(`  --cz-modal-close-icon-radius: ${resolveValue3(config.closeIconRadius)};`);
+  if (config.closeIconBg) vars.push(`  --cz-modal-close-icon-bg: ${resolveValue3(config.closeIconBg)};`);
+  if (config.closeIconColor) {
+    vars.push(`  --cz-modal-close-icon-color: ${resolveValue3(config.closeIconColor)};`);
+  }
+  if (config.closeIconHoverBg) {
+    vars.push(`  --cz-modal-close-icon-hover-bg: ${resolveValue3(config.closeIconHoverBg)};`);
+  }
+  if (config.closeIconHoverColor) {
+    vars.push(`  --cz-modal-close-icon-hover-color: ${resolveValue3(config.closeIconHoverColor)};`);
+  }
+  if (config.closeIconTransition) {
+    vars.push(`  --cz-modal-close-icon-transition: ${resolveValue3(config.closeIconTransition)};`);
+  }
+  if (config.closeIconFocusRing) {
+    vars.push(`  --cz-modal-close-icon-focus-ring: ${resolveValue3(config.closeIconFocusRing)};`);
+  }
+  if (config.tabFontSize) vars.push(`  --cz-modal-tab-font-size: ${resolveValue3(config.tabFontSize)};`);
+  if (config.tabFontWeight) {
+    vars.push(`  --cz-modal-tab-font-weight: ${resolveValue3(config.tabFontWeight)};`);
+  }
+  if (config.tabColor) vars.push(`  --cz-modal-tab-color: ${resolveValue3(config.tabColor)};`);
+  if (config.tabActiveColor) {
+    vars.push(`  --cz-modal-tab-active-color: ${resolveValue3(config.tabActiveColor)};`);
+  }
+  if (config.tabActiveBorderColor) {
+    vars.push(`  --cz-modal-tab-active-border-color: ${resolveValue3(config.tabActiveBorderColor)};`);
+  }
+  return `:root {
+${vars.join("\n")}
+}
+`;
+}
+function resolveValue3(value) {
+  if (!value.startsWith("$")) return value;
+  if (/\s+\$/.test(value)) return value;
+  return resolveToken(value);
+}
+function generateModalBase() {
+  return `.cz-modal-close-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--cz-modal-close-icon-size, 2rem);
+  height: var(--cz-modal-close-icon-size, 2rem);
+  padding: var(--cz-modal-close-icon-padding, 0.5rem);
+  flex-shrink: 0;
+  border: 0;
+  border-radius: var(--cz-modal-close-icon-radius, var(--cz-radius-md));
+  background: var(--cz-modal-close-icon-bg, transparent);
+  color: var(--cz-modal-close-icon-color, hsl(var(--cz-color-mutedFg)));
+  cursor: pointer;
+  transition: all var(--cz-modal-close-icon-transition, var(--cz-transition-fast));
+}
+
+.cz-modal-close-icon:hover {
+  background: var(--cz-modal-close-icon-hover-bg, hsl(var(--cz-color-muted)));
+  color: var(--cz-modal-close-icon-hover-color, hsl(var(--cz-color-primary)));
+}
+
+.cz-modal-close-icon:focus,
+.cz-modal-close-icon:focus-visible {
+  outline: none;
+  box-shadow: var(--cz-modal-close-icon-focus-ring, none);
+}
+
+.cz-modal-close-btn {
+  flex-shrink: 0;
+}
+
+.cz-modal-tab-btn:focus,
+.cz-modal-tab-btn:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
+@supports not (gap: 0.75rem) {
+  .cz-modal-footer > * + * {
+    margin-left: var(--cz-modal-footer-gap, var(--cz-spacing-md, 0.75rem));
+  }
+}
+`;
+}
+
 // cli/generators/dropdown-menu.ts
 function generateDropdownMenuCSS(config) {
   let css = "/* ===== DROPDOWN MENU ===== */\n\n";
@@ -3526,12 +4415,18 @@ ${config.customCSS.before}
   if (components.badge) {
     css += generateBadgeCSS(components.badge) + "\n";
   }
+  if (components.statusBadge) {
+    css += generateStatusBadgeCSS(components.statusBadge) + "\n";
+  }
   if (components.avatar) {
     css += generateAvatarCSS(components.avatar) + "\n";
   }
   if (components.table) {
     css += generateTableCSS(components.table) + "\n";
   }
+  if (components.dataTable) {
+    css += generateDataTableCSS(components.dataTable) + "\n";
+  }
   if (components.code) {
     css += generateCodeCSS(components.code) + "\n";
   }
@@ -3571,6 +4466,9 @@ ${config.customCSS.before}
   if (components.dialog) {
     css += generateDialogCSS(components.dialog) + "\n";
   }
+  if (components.modal) {
+    css += generateModalCSS(components.modal) + "\n";
+  }
   if (components.dropdownMenu) {
     css += generateDropdownMenuCSS(components.dropdownMenu) + "\n";
   }