@csszyx/runtime 0.3.1 → 0.5.0

package/dist/index.cjs

@@ -18,10 +18,11 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var index_exports = {};
-__export(index_exports, {
+var src_exports = {};
+__export(src_exports, {
   DEFAULT_RUNTIME_CONFIG: () => DEFAULT_RUNTIME_CONFIG,
   VERSION: () => VERSION,
+  __szColorVar: () => import_color_var.__szColorVar,
   _sz: () => _sz,
   _sz2: () => _sz2,
   _sz3: () => _sz3,
@@ -52,13 +53,14 @@ __export(index_exports, {
   loadManifestFromDOM: () => loadManifestFromDOM,
   resetRuntime: () => resetRuntime,
   startHydration: () => startHydration,
+  szv: () => szv,
   validateHydrationClass: () => validateHydrationClass,
   verifyAllTokens: () => verifyAllTokens,
   verifyMangleChecksum: () => verifyMangleChecksum,
   verifyMangleMapIntegrity: () => verifyMangleMapIntegrity,
   verifyRecoveryToken: () => verifyRecoveryToken
 });
-module.exports = __toCommonJS(index_exports);
+module.exports = __toCommonJS(src_exports);
 
 // src/verify.ts
 function verifyRecoveryToken(element, manifest) {
@@ -320,7 +322,7 @@ function endHydration() {
 }
 
 // src/concatenate.ts
-var import_compiler = require("@csszyx/compiler");
+var import_browser = require("@csszyx/compiler/browser");
 function _sz(...classes) {
   if (classes.length === 1) {
     const cls = classes[0];
@@ -330,7 +332,7 @@ function _sz(...classes) {
     if (!cls) {
       return "";
     }
-    const res = (0, import_compiler.transform)(cls);
+    const res = (0, import_browser.transform)(cls);
     return typeof res === "string" ? res : res.className;
   }
   let result = "";
@@ -340,7 +342,7 @@ function _sz(...classes) {
     if (!cls) {
       continue;
     }
-    const res = typeof cls === "string" ? cls : (0, import_compiler.transform)(cls);
+    const res = typeof cls === "string" ? cls : (0, import_browser.transform)(cls);
     const str = typeof res === "string" ? res : res.className;
     if (!str) {
       continue;
@@ -361,7 +363,7 @@ function _szIf(condition, truthyValue, falsyValue) {
   if (typeof value === "string") {
     return value;
   }
-  const res = (0, import_compiler.transform)(value);
+  const res = (0, import_browser.transform)(value);
   return typeof res === "string" ? res : res.className;
 }
 function _szSwitch(conditions, defaultValue = "") {
@@ -374,7 +376,7 @@ function _szSwitch(conditions, defaultValue = "") {
       if (typeof value === "string") {
         return value;
       }
-      const res2 = (0, import_compiler.transform)(value);
+      const res2 = (0, import_browser.transform)(value);
       return typeof res2 === "string" ? res2 : res2.className;
     }
   }
@@ -384,7 +386,7 @@ function _szSwitch(conditions, defaultValue = "") {
   if (typeof defaultValue === "string") {
     return defaultValue;
   }
-  const res = (0, import_compiler.transform)(defaultValue);
+  const res = (0, import_browser.transform)(defaultValue);
   return typeof res === "string" ? res : res.className;
 }
 function _szMerge(...classes) {
@@ -395,7 +397,7 @@ function _szMerge(...classes) {
     if (!cls) {
       continue;
     }
-    const res = typeof cls === "string" ? cls : (0, import_compiler.transform)(cls);
+    const res = typeof cls === "string" ? cls : (0, import_browser.transform)(cls);
     const str = typeof res === "string" ? res : res.className;
     if (!str) {
       continue;
@@ -443,6 +445,49 @@ function _sz3(a, b, c) {
   return result;
 }
 
+// src/variants.ts
+function deepMerge(target, source) {
+  const result = { ...target };
+  for (const key of Object.keys(source)) {
+    const sv = source[key];
+    const tv = target[key];
+    if (sv !== null && sv !== void 0 && typeof sv === "object" && !Array.isArray(sv) && tv !== null && tv !== void 0 && typeof tv === "object" && !Array.isArray(tv)) {
+      result[key] = deepMerge(tv, sv);
+    } else {
+      result[key] = sv;
+    }
+  }
+  return result;
+}
+function szv(config) {
+  return function szVariantFn(selection) {
+    let result = config.base ? { ...config.base } : {};
+    const resolved = { ...config.defaultVariants };
+    if (selection) {
+      for (const key of Object.keys(selection)) {
+        const val = selection[key];
+        if (val !== null && val !== void 0) {
+          resolved[key] = val;
+        }
+      }
+    }
+    for (const variantKey of Object.keys(config.variants)) {
+      const selectedValue = resolved[variantKey];
+      if (selectedValue === null || selectedValue === void 0) {
+        continue;
+      }
+      const variantObj = config.variants[variantKey][selectedValue];
+      if (variantObj) {
+        result = deepMerge(result, variantObj);
+      }
+    }
+    return result;
+  };
+}
+
+// src/lite.ts
+var import_color_var = require("@csszyx/compiler/color-var");
+
 // src/index.ts
 var VERSION = "0.0.0";
 var DEFAULT_RUNTIME_CONFIG = {
@@ -488,6 +533,7 @@ function resetRuntime() {
 0 && (module.exports = {
   DEFAULT_RUNTIME_CONFIG,
   VERSION,
+  __szColorVar,
   _sz,
   _sz2,
   _sz3,
@@ -518,6 +564,7 @@ function resetRuntime() {
   loadManifestFromDOM,
   resetRuntime,
   startHydration,
+  szv,
   validateHydrationClass,
   verifyAllTokens,
   verifyMangleChecksum,

package/dist/index.d.cts

@@ -1,4 +1,5 @@
-import { SzObject } from '@csszyx/compiler';
+import { SzObject } from '@csszyx/compiler/browser';
+export { __szColorVar } from '@csszyx/compiler/color-var';
 
 /**
  * Zero-allocation className concatenation helper.
@@ -134,6 +135,81 @@ declare function _sz2(a: string, b: string): string;
  */
 declare function _sz3(a: string, b: string, c: string): string;
 
+/**
+ * szv() — variant-based sz object factory.
+ *
+ * CVA-equivalent but returns sz objects instead of className strings,
+ * keeping DX consistent with the sz prop throughout. Use with the sz prop
+ * (build-time transform) or with sz() from @csszyx/dynamic (runtime injection).
+ *
+ * @module @csszyx/runtime/variants
+ */
+
+/**
+ *
+ */
+type VariantSchema = Record<string, Record<string, SzObject>>;
+/**
+ *
+ */
+type VariantSelection<V extends VariantSchema> = {
+    [K in keyof V]?: keyof V[K] | null | undefined;
+};
+/**
+ *
+ */
+interface SzvConfig<V extends VariantSchema> {
+    base?: SzObject;
+    variants: V;
+    defaultVariants?: Partial<VariantSelection<V>>;
+}
+/**
+ * Creates a variant-based sz object factory with strong TypeScript inference.
+ *
+ * TypeScript catches invalid variant values at compile time — no runtime
+ * surprises. All variant objects are plain sz objects, fully compatible
+ * with the sz prop and @csszyx/dynamic's sz() function.
+ *
+ * @param {SzvConfig<V>} config - Variant configuration with base, variants, and defaultVariants
+ * @returns {Function} A factory function that accepts a variant selection and returns an SzObject
+ *
+ * @example
+ * ```tsx
+ * import { szv } from 'csszyx';
+ *
+ * const buttonSz = szv({
+ *   base: { inlineFlex: true, items: 'center', rounded: 'md', fontWeight: 'medium' },
+ *   variants: {
+ *     variant: {
+ *       default: { bg: 'primary', text: 'primary-foreground' },
+ *       outline: { border: true, borderColor: 'blue-500', bg: 'transparent' },
+ *       ghost:   { hover: { bg: 'accent' } },
+ *     },
+ *     size: {
+ *       sm: { h: 9,  px: 3, text: 'sm' },
+ *       md: { h: 10, px: 4 },
+ *       lg: { h: 11, px: 8 },
+ *     },
+ *   },
+ *   defaultVariants: { variant: 'default', size: 'md' },
+ * });
+ *
+ * // Usage — consistent with sz prop, TypeScript catches invalid values
+ * <button sz={buttonSz({ variant: 'outline', size: 'sm' })} />
+ *
+ * // Compose with sz array syntax
+ * <button sz={[
+ *   buttonSz({ variant: props.variant, size: props.size }),
+ *   isLoading && { opacity: 50, cursor: 'wait' },
+ * ]} />
+ *
+ * // With @csszyx/dynamic for fully runtime-resolved styling
+ * const { sz } = useSz();
+ * <button className={sz(buttonSz({ variant: props.variant }))} />
+ * ```
+ */
+declare function szv<V extends VariantSchema>(config: SzvConfig<V>): (selection?: VariantSelection<V>) => SzObject;
+
 /**
  * Recovery Token Verification - Runtime validation of recovery tokens.
  *
@@ -692,4 +768,4 @@ declare function isRuntimeInitialized(): boolean;
  */
 declare function resetRuntime(): void;
 
-export { DEFAULT_RUNTIME_CONFIG, type HydrationError, type HydrationErrorType, type MangleMap, type RecoveryManifest, type RecoveryMode, type RuntimeConfig, type SSRContext, type SzInput, type TokenData, VERSION, type VerificationResult, _sz, _sz2, _sz3, _szIf, _szMerge, _szSwitch, abortHydration, attemptCSRRecovery, clearHydrationErrors, disableCSRRecovery, enableCSRRecovery, endHydration, getAbortedSubtreeCount, getHydrationErrors, getRecoveryMode, getRuntimeConfig, getSSRContext, guardHydration, hasRecoveryToken, initRuntime, isCSRRecoveryAllowed, isHydrating, isHydrationAborted, isRuntimeInitialized, isSSREnvironment, isValidManifest, loadMangleMapFromDOM, loadManifestFromDOM, resetRuntime, startHydration, validateHydrationClass, verifyAllTokens, verifyMangleChecksum, verifyMangleMapIntegrity, verifyRecoveryToken };
+export { DEFAULT_RUNTIME_CONFIG, type HydrationError, type HydrationErrorType, type MangleMap, type RecoveryManifest, type RecoveryMode, type RuntimeConfig, type SSRContext, type SzInput, type TokenData, VERSION, type VerificationResult, _sz, _sz2, _sz3, _szIf, _szMerge, _szSwitch, abortHydration, attemptCSRRecovery, clearHydrationErrors, disableCSRRecovery, enableCSRRecovery, endHydration, getAbortedSubtreeCount, getHydrationErrors, getRecoveryMode, getRuntimeConfig, getSSRContext, guardHydration, hasRecoveryToken, initRuntime, isCSRRecoveryAllowed, isHydrating, isHydrationAborted, isRuntimeInitialized, isSSREnvironment, isValidManifest, loadMangleMapFromDOM, loadManifestFromDOM, resetRuntime, startHydration, szv, validateHydrationClass, verifyAllTokens, verifyMangleChecksum, verifyMangleMapIntegrity, verifyRecoveryToken };

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-import { SzObject } from '@csszyx/compiler';
+import { SzObject } from '@csszyx/compiler/browser';
+export { __szColorVar } from '@csszyx/compiler/color-var';
 
 /**
  * Zero-allocation className concatenation helper.
@@ -134,6 +135,81 @@ declare function _sz2(a: string, b: string): string;
  */
 declare function _sz3(a: string, b: string, c: string): string;
 
+/**
+ * szv() — variant-based sz object factory.
+ *
+ * CVA-equivalent but returns sz objects instead of className strings,
+ * keeping DX consistent with the sz prop throughout. Use with the sz prop
+ * (build-time transform) or with sz() from @csszyx/dynamic (runtime injection).
+ *
+ * @module @csszyx/runtime/variants
+ */
+
+/**
+ *
+ */
+type VariantSchema = Record<string, Record<string, SzObject>>;
+/**
+ *
+ */
+type VariantSelection<V extends VariantSchema> = {
+    [K in keyof V]?: keyof V[K] | null | undefined;
+};
+/**
+ *
+ */
+interface SzvConfig<V extends VariantSchema> {
+    base?: SzObject;
+    variants: V;
+    defaultVariants?: Partial<VariantSelection<V>>;
+}
+/**
+ * Creates a variant-based sz object factory with strong TypeScript inference.
+ *
+ * TypeScript catches invalid variant values at compile time — no runtime
+ * surprises. All variant objects are plain sz objects, fully compatible
+ * with the sz prop and @csszyx/dynamic's sz() function.
+ *
+ * @param {SzvConfig<V>} config - Variant configuration with base, variants, and defaultVariants
+ * @returns {Function} A factory function that accepts a variant selection and returns an SzObject
+ *
+ * @example
+ * ```tsx
+ * import { szv } from 'csszyx';
+ *
+ * const buttonSz = szv({
+ *   base: { inlineFlex: true, items: 'center', rounded: 'md', fontWeight: 'medium' },
+ *   variants: {
+ *     variant: {
+ *       default: { bg: 'primary', text: 'primary-foreground' },
+ *       outline: { border: true, borderColor: 'blue-500', bg: 'transparent' },
+ *       ghost:   { hover: { bg: 'accent' } },
+ *     },
+ *     size: {
+ *       sm: { h: 9,  px: 3, text: 'sm' },
+ *       md: { h: 10, px: 4 },
+ *       lg: { h: 11, px: 8 },
+ *     },
+ *   },
+ *   defaultVariants: { variant: 'default', size: 'md' },
+ * });
+ *
+ * // Usage — consistent with sz prop, TypeScript catches invalid values
+ * <button sz={buttonSz({ variant: 'outline', size: 'sm' })} />
+ *
+ * // Compose with sz array syntax
+ * <button sz={[
+ *   buttonSz({ variant: props.variant, size: props.size }),
+ *   isLoading && { opacity: 50, cursor: 'wait' },
+ * ]} />
+ *
+ * // With @csszyx/dynamic for fully runtime-resolved styling
+ * const { sz } = useSz();
+ * <button className={sz(buttonSz({ variant: props.variant }))} />
+ * ```
+ */
+declare function szv<V extends VariantSchema>(config: SzvConfig<V>): (selection?: VariantSelection<V>) => SzObject;
+
 /**
  * Recovery Token Verification - Runtime validation of recovery tokens.
  *
@@ -692,4 +768,4 @@ declare function isRuntimeInitialized(): boolean;
  */
 declare function resetRuntime(): void;
 
-export { DEFAULT_RUNTIME_CONFIG, type HydrationError, type HydrationErrorType, type MangleMap, type RecoveryManifest, type RecoveryMode, type RuntimeConfig, type SSRContext, type SzInput, type TokenData, VERSION, type VerificationResult, _sz, _sz2, _sz3, _szIf, _szMerge, _szSwitch, abortHydration, attemptCSRRecovery, clearHydrationErrors, disableCSRRecovery, enableCSRRecovery, endHydration, getAbortedSubtreeCount, getHydrationErrors, getRecoveryMode, getRuntimeConfig, getSSRContext, guardHydration, hasRecoveryToken, initRuntime, isCSRRecoveryAllowed, isHydrating, isHydrationAborted, isRuntimeInitialized, isSSREnvironment, isValidManifest, loadMangleMapFromDOM, loadManifestFromDOM, resetRuntime, startHydration, validateHydrationClass, verifyAllTokens, verifyMangleChecksum, verifyMangleMapIntegrity, verifyRecoveryToken };
+export { DEFAULT_RUNTIME_CONFIG, type HydrationError, type HydrationErrorType, type MangleMap, type RecoveryManifest, type RecoveryMode, type RuntimeConfig, type SSRContext, type SzInput, type TokenData, VERSION, type VerificationResult, _sz, _sz2, _sz3, _szIf, _szMerge, _szSwitch, abortHydration, attemptCSRRecovery, clearHydrationErrors, disableCSRRecovery, enableCSRRecovery, endHydration, getAbortedSubtreeCount, getHydrationErrors, getRecoveryMode, getRuntimeConfig, getSSRContext, guardHydration, hasRecoveryToken, initRuntime, isCSRRecoveryAllowed, isHydrating, isHydrationAborted, isRuntimeInitialized, isSSREnvironment, isValidManifest, loadMangleMapFromDOM, loadManifestFromDOM, resetRuntime, startHydration, szv, validateHydrationClass, verifyAllTokens, verifyMangleChecksum, verifyMangleMapIntegrity, verifyRecoveryToken };

package/dist/index.js

@@ -258,7 +258,7 @@ function endHydration() {
 }
 
 // src/concatenate.ts
-import { transform } from "@csszyx/compiler";
+import { transform } from "@csszyx/compiler/browser";
 function _sz(...classes) {
   if (classes.length === 1) {
     const cls = classes[0];
@@ -381,6 +381,49 @@ function _sz3(a, b, c) {
   return result;
 }
 
+// src/variants.ts
+function deepMerge(target, source) {
+  const result = { ...target };
+  for (const key of Object.keys(source)) {
+    const sv = source[key];
+    const tv = target[key];
+    if (sv !== null && sv !== void 0 && typeof sv === "object" && !Array.isArray(sv) && tv !== null && tv !== void 0 && typeof tv === "object" && !Array.isArray(tv)) {
+      result[key] = deepMerge(tv, sv);
+    } else {
+      result[key] = sv;
+    }
+  }
+  return result;
+}
+function szv(config) {
+  return function szVariantFn(selection) {
+    let result = config.base ? { ...config.base } : {};
+    const resolved = { ...config.defaultVariants };
+    if (selection) {
+      for (const key of Object.keys(selection)) {
+        const val = selection[key];
+        if (val !== null && val !== void 0) {
+          resolved[key] = val;
+        }
+      }
+    }
+    for (const variantKey of Object.keys(config.variants)) {
+      const selectedValue = resolved[variantKey];
+      if (selectedValue === null || selectedValue === void 0) {
+        continue;
+      }
+      const variantObj = config.variants[variantKey][selectedValue];
+      if (variantObj) {
+        result = deepMerge(result, variantObj);
+      }
+    }
+    return result;
+  };
+}
+
+// src/lite.ts
+import { __szColorVar } from "@csszyx/compiler/color-var";
+
 // src/index.ts
 var VERSION = "0.0.0";
 var DEFAULT_RUNTIME_CONFIG = {
@@ -425,6 +468,7 @@ function resetRuntime() {
 export {
   DEFAULT_RUNTIME_CONFIG,
   VERSION,
+  __szColorVar,
   _sz,
   _sz2,
   _sz3,
@@ -455,6 +499,7 @@ export {
   loadManifestFromDOM,
   resetRuntime,
   startHydration,
+  szv,
   validateHydrationClass,
   verifyAllTokens,
   verifyMangleChecksum,

package/dist/lite.cjs

@@ -1,39 +1,43 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+'use strict';
+
+// ../compiler/dist/color-var.js
+function __szColorVar(v) {
+  if (v.startsWith("#") || v.startsWith("rgb") || v.startsWith("hsl") || v.startsWith("oklch")) {
+    return v;
   }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+  if (v.startsWith("--")) {
+    return `var(${v})`;
+  }
+  return `var(--color-${v})`;
+}
 
 // src/lite.ts
-var lite_exports = {};
-__export(lite_exports, {
-  __szColorVar: () => __szColorVar,
-  _sz: () => _sz,
-  _sz2: () => _sz2,
-  _szIf: () => _szIf
-});
-module.exports = __toCommonJS(lite_exports);
+function assertNotObject(cls, fnName) {
+  if (cls !== null && cls !== void 0 && cls !== false && typeof cls !== "string") {
+    throw new Error(
+      `[csszyx] ${fnName}() received a plain object \u2014 the compiler could not resolve this sz prop at build time.
+
+Common cause:   sz={{ ...(cond ? varA : varB), key: 'val' }}
+Fix:            sz={[cond ? varA : varB, { key: 'val' }]}
+
+Received: ${JSON.stringify(cls)}`
+    );
+  }
+}
 function _sz(...classes) {
   if (classes.length === 1) {
+    if (process.env.NODE_ENV !== "production") {
+      assertNotObject(classes[0], "_sz");
+    }
     return classes[0] || "";
   }
   let result = "";
   let needsSpace = false;
   for (let i = 0; i < classes.length; i++) {
     const cls = classes[i];
+    if (process.env.NODE_ENV !== "production") {
+      assertNotObject(cls, "_sz");
+    }
     if (!cls) {
       continue;
     }
@@ -48,6 +52,26 @@ function _sz(...classes) {
 function _szIf(condition, truthyValue, falsyValue) {
   return (condition ? truthyValue : falsyValue) || "";
 }
+function _szMerge(...classes) {
+  const seen = /* @__PURE__ */ new Set();
+  const result = [];
+  for (let i = 0; i < classes.length; i++) {
+    const cls = classes[i];
+    if (process.env.NODE_ENV !== "production") {
+      assertNotObject(cls, "_szMerge");
+    }
+    if (!cls) {
+      continue;
+    }
+    for (const token of cls.split(" ")) {
+      if (token && !seen.has(token)) {
+        seen.add(token);
+        result.push(token);
+      }
+    }
+  }
+  return result.join(" ");
+}
 function _sz2(a, b) {
   if (!a) {
     return b || "";
@@ -57,19 +81,9 @@ function _sz2(a, b) {
   }
   return a + " " + b;
 }
-function __szColorVar(v) {
-  if (v.startsWith("#") || v.startsWith("rgb") || v.startsWith("hsl") || v.startsWith("oklch")) {
-    return v;
-  }
-  if (v.startsWith("--")) {
-    return `var(${v})`;
-  }
-  return `var(--color-${v})`;
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  __szColorVar,
-  _sz,
-  _sz2,
-  _szIf
-});
+
+exports.__szColorVar = __szColorVar;
+exports._sz = _sz;
+exports._sz2 = _sz2;
+exports._szIf = _szIf;
+exports._szMerge = _szMerge;

package/dist/lite.d.cts

@@ -1,3 +1,5 @@
+export { __szColorVar } from '@csszyx/compiler/color-var';
+
 /**
  * @csszyx/runtime/lite - Ultra-minimal runtime helpers.
  *
@@ -7,8 +9,12 @@
  *
  * Bundle size target: < 500 bytes (minified + gzipped)
  *
+ * __szColorVar is imported from @csszyx/compiler/color-var and inlined at
+ * build time by tsup (noExternal). Zero runtime deps — single source of truth.
+ *
  * @module @csszyx/runtime/lite
  */
+
 /**
  * Type for sz input - string-only (objects are pre-compiled at build time).
  */
@@ -40,6 +46,17 @@ declare function _sz(...classes: SzInput[]): string;
  * ```
  */
 declare function _szIf(condition: boolean, truthyValue: SzInput, falsyValue?: SzInput): string;
+/**
+ * Merges className strings from compiled array sz props, deduplicating tokens.
+ *
+ * Emitted by the compiler for sz={[varA, cond && varB, ...]} when at least one
+ * element is a runtime conditional. All arguments must be pre-compiled strings
+ * (the compiler resolves each element to a string before passing it here).
+ *
+ * @param {...SzInput[]} classes - Pre-compiled class strings to merge
+ * @returns {string} Merged className string with duplicate tokens removed
+ */
+declare function _szMerge(...classes: SzInput[]): string;
 /**
  * Two-argument optimized concatenation.
  * @param a - first class string
@@ -47,18 +64,5 @@ declare function _szIf(condition: boolean, truthyValue: SzInput, falsyValue?: Sz
  * @returns concatenated class string
  */
 declare function _sz2(a: string, b: string): string;
-/**
- * Resolves a dynamic color value to a CSS-compatible string.
- * Maps Tailwind color names to CSS custom properties, passes through raw CSS values.
- *
- * @param v - Color value (Tailwind name, CSS color, or CSS variable)
- * @returns CSS-compatible color string
- *
- * @example
- * __szColorVar('blue-500')  // → 'var(--color-blue-500)'
- * __szColorVar('#ff0')      // → '#ff0'
- * __szColorVar('--my-var')  // → 'var(--my-var)'
- */
-declare function __szColorVar(v: string): string;
 
-export { type SzInput, __szColorVar, _sz, _sz2, _szIf };
+export { type SzInput, _sz, _sz2, _szIf, _szMerge };

package/dist/lite.d.ts

@@ -1,3 +1,5 @@
+export { __szColorVar } from '@csszyx/compiler/color-var';
+
 /**
  * @csszyx/runtime/lite - Ultra-minimal runtime helpers.
  *
@@ -7,8 +9,12 @@
  *
  * Bundle size target: < 500 bytes (minified + gzipped)
  *
+ * __szColorVar is imported from @csszyx/compiler/color-var and inlined at
+ * build time by tsup (noExternal). Zero runtime deps — single source of truth.
+ *
  * @module @csszyx/runtime/lite
  */
+
 /**
  * Type for sz input - string-only (objects are pre-compiled at build time).
  */
@@ -40,6 +46,17 @@ declare function _sz(...classes: SzInput[]): string;
  * ```
  */
 declare function _szIf(condition: boolean, truthyValue: SzInput, falsyValue?: SzInput): string;
+/**
+ * Merges className strings from compiled array sz props, deduplicating tokens.
+ *
+ * Emitted by the compiler for sz={[varA, cond && varB, ...]} when at least one
+ * element is a runtime conditional. All arguments must be pre-compiled strings
+ * (the compiler resolves each element to a string before passing it here).
+ *
+ * @param {...SzInput[]} classes - Pre-compiled class strings to merge
+ * @returns {string} Merged className string with duplicate tokens removed
+ */
+declare function _szMerge(...classes: SzInput[]): string;
 /**
  * Two-argument optimized concatenation.
  * @param a - first class string
@@ -47,18 +64,5 @@ declare function _szIf(condition: boolean, truthyValue: SzInput, falsyValue?: Sz
  * @returns concatenated class string
  */
 declare function _sz2(a: string, b: string): string;
-/**
- * Resolves a dynamic color value to a CSS-compatible string.
- * Maps Tailwind color names to CSS custom properties, passes through raw CSS values.
- *
- * @param v - Color value (Tailwind name, CSS color, or CSS variable)
- * @returns CSS-compatible color string
- *
- * @example
- * __szColorVar('blue-500')  // → 'var(--color-blue-500)'
- * __szColorVar('#ff0')      // → '#ff0'
- * __szColorVar('--my-var')  // → 'var(--my-var)'
- */
-declare function __szColorVar(v: string): string;
 
-export { type SzInput, __szColorVar, _sz, _sz2, _szIf };
+export { type SzInput, _sz, _sz2, _szIf, _szMerge };

package/dist/lite.js

@@ -1,12 +1,41 @@
+// ../compiler/dist/color-var.js
+function __szColorVar(v) {
+  if (v.startsWith("#") || v.startsWith("rgb") || v.startsWith("hsl") || v.startsWith("oklch")) {
+    return v;
+  }
+  if (v.startsWith("--")) {
+    return `var(${v})`;
+  }
+  return `var(--color-${v})`;
+}
+
 // src/lite.ts
+function assertNotObject(cls, fnName) {
+  if (cls !== null && cls !== void 0 && cls !== false && typeof cls !== "string") {
+    throw new Error(
+      `[csszyx] ${fnName}() received a plain object \u2014 the compiler could not resolve this sz prop at build time.
+
+Common cause:   sz={{ ...(cond ? varA : varB), key: 'val' }}
+Fix:            sz={[cond ? varA : varB, { key: 'val' }]}
+
+Received: ${JSON.stringify(cls)}`
+    );
+  }
+}
 function _sz(...classes) {
   if (classes.length === 1) {
+    if (process.env.NODE_ENV !== "production") {
+      assertNotObject(classes[0], "_sz");
+    }
     return classes[0] || "";
   }
   let result = "";
   let needsSpace = false;
   for (let i = 0; i < classes.length; i++) {
     const cls = classes[i];
+    if (process.env.NODE_ENV !== "production") {
+      assertNotObject(cls, "_sz");
+    }
     if (!cls) {
       continue;
     }
@@ -21,6 +50,26 @@ function _sz(...classes) {
 function _szIf(condition, truthyValue, falsyValue) {
   return (condition ? truthyValue : falsyValue) || "";
 }
+function _szMerge(...classes) {
+  const seen = /* @__PURE__ */ new Set();
+  const result = [];
+  for (let i = 0; i < classes.length; i++) {
+    const cls = classes[i];
+    if (process.env.NODE_ENV !== "production") {
+      assertNotObject(cls, "_szMerge");
+    }
+    if (!cls) {
+      continue;
+    }
+    for (const token of cls.split(" ")) {
+      if (token && !seen.has(token)) {
+        seen.add(token);
+        result.push(token);
+      }
+    }
+  }
+  return result.join(" ");
+}
 function _sz2(a, b) {
   if (!a) {
     return b || "";
@@ -30,18 +79,5 @@ function _sz2(a, b) {
   }
   return a + " " + b;
 }
-function __szColorVar(v) {
-  if (v.startsWith("#") || v.startsWith("rgb") || v.startsWith("hsl") || v.startsWith("oklch")) {
-    return v;
-  }
-  if (v.startsWith("--")) {
-    return `var(${v})`;
-  }
-  return `var(--color-${v})`;
-}
-export {
-  __szColorVar,
-  _sz,
-  _sz2,
-  _szIf
-};
+
+export { __szColorVar, _sz, _sz2, _szIf, _szMerge };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@csszyx/runtime",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "description": "Runtime helpers and hydration guards for csszyx",
   "keywords": [
     "csszyx",
@@ -39,8 +39,8 @@
     "dist"
   ],
   "dependencies": {
-    "@csszyx/compiler": "0.3.1",
-    "@csszyx/core": "0.3.1"
+    "@csszyx/compiler": "0.5.0",
+    "@csszyx/core": "0.5.0"
   },
   "devDependencies": {
     "@types/node": "^20.11.0",
@@ -55,8 +55,8 @@
   },
   "sideEffects": false,
   "scripts": {
-    "build": "tsup src/index.ts src/lite.ts --format esm,cjs --dts --clean",
-    "dev": "tsup src/index.ts src/lite.ts --format esm --dts --watch",
+    "build": "tsup",
+    "dev": "tsup --watch",
     "test": "vitest run",
     "test:watch": "vitest",
     "type-check": "tsc --noEmit"