@kbach/react 0.5.56 → 0.5.58

package/dist/{chunk-JBV2R655.mjs → chunk-2HWRNTJG.mjs}

@@ -445,14 +445,15 @@ var defaultTheme = {
     normal: 1.5,
     relaxed: 1.625,
     loose: 2,
-    3: 12,
-    4: 16,
-    5: 20,
-    6: 24,
-    7: 28,
-    8: 32,
-    9: 36,
-    10: 40
+    // Pixel values stored as strings; styleValueToCSS passes them through, toNativeValue strips the unit
+    3: "12px",
+    4: "16px",
+    5: "20px",
+    6: "24px",
+    7: "28px",
+    8: "32px",
+    9: "36px",
+    10: "40px"
   },
   letterSpacing: {
     tighter: -0.8,
@@ -473,9 +474,12 @@ var defaultTheme = {
   },
   flex: {
     1: 1,
-    auto: 1,
-    initial: 0,
-    none: 0
+    auto: "auto",
+    // CSS: flex: auto = 1 1 auto; native: mapped to 1 in resolver
+    initial: "initial",
+    // CSS: flex: initial = 0 1 auto; native: mapped to 1
+    none: "none"
+    // CSS: flex: none = 0 0 auto; native: mapped to 0
   },
   shadow: {
     sm: {
@@ -543,7 +547,7 @@ var defaultTheme = {
 
 // src/core/platform.ts
 var isWeb = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
-var isNative = !isWeb && (typeof globalThis.HermesInternal !== "undefined" || typeof globalThis.__fbBatchedBridge !== "undefined" || typeof navigator !== "undefined" && navigator.product === "ReactNative");
+var isNative = !isWeb && (typeof globalThis.HermesInternal !== "undefined" || typeof globalThis.__fbBatchedBridge !== "undefined" || typeof navigator !== "undefined" && navigator.product === "ReactNative" || typeof globalThis.__REACT_NATIVE__ !== "undefined");
 var _cssGenMode = false;
 function setCSSGenMode(on) {
   _cssGenMode = on;
@@ -559,7 +563,7 @@ function toNativeValue(raw) {
   return raw;
 }
 function escapeCSSSelector(cls) {
-  return cls.replace(/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
+  return cls.replace(/[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
 }
 
 // src/core/registry.ts
@@ -636,6 +640,10 @@ function _invalidate() {
   _responsiveNames = null;
 }
 function registerModifier(name, def) {
+  if (process.env.NODE_ENV !== "production" && name in BUILTIN_MODIFIERS) {
+    console.warn(`[kbach] registerModifier: "${name}" is a built-in modifier and cannot be overridden. Use a different name.`);
+    return;
+  }
   _pluginModifiers[name] = def;
   _invalidate();
 }
@@ -717,7 +725,7 @@ function resolveColor(value, colors, isArbitrary) {
   }
   if (!hex) return null;
   if (!opacityPart) {
-    if (!isWeb && hex.startsWith("#") && hex.length === 9) {
+    if (!getEffectiveIsWeb() && hex.startsWith("#") && hex.length === 9) {
       return hexToRgba(hex, Math.round(parseInt(hex.slice(7, 9), 16) / 255 * 1e3) / 1e3);
     }
     return hex;
@@ -751,7 +759,10 @@ function resolveSpacing(value, negative, spacing, isArbitrary) {
     const resolved = getEffectiveIsWeb() ? value : toNativeValue(value);
     if (negative) {
       if (typeof resolved === "number") return -resolved;
-      if (typeof resolved === "string" && /^\d/.test(resolved)) return `-${resolved}`;
+      if (typeof resolved === "string") {
+        if (/^\d/.test(resolved)) return `-${resolved}`;
+        if (/^(calc|var|min|max|clamp|env)\s*\(/.test(resolved)) return `calc(-1 * (${resolved}))`;
+      }
     }
     return resolved;
   }
@@ -1257,7 +1268,11 @@ var RESOLVERS = {
     const color = resolveColor(value, colors, false);
     if (color) return { borderColor: color };
     const w = borderWidth[value] ?? spacing[value];
-    if (w !== void 0) return { borderWidth: typeof w === "number" ? w : parseFloat(String(w)) };
+    if (w !== void 0) {
+      const numW = typeof w === "number" ? w : parseFloat(String(w));
+      if (isNaN(numW)) return null;
+      return { borderWidth: numW };
+    }
     return null;
   },
   "border-t": ({ value, isArbitrary }, { colors, borderWidth }) => {
@@ -1960,7 +1975,7 @@ var RESOLVERS = {
   },
   // ── Tint color (native-only, for Image and icon components) ──────────────
   tint: ({ value, isArbitrary }, { colors }) => {
-    if (isWeb) return null;
+    if (getEffectiveIsWeb()) return null;
     const color = resolveColor(value, colors, isArbitrary);
     return color ? { tintColor: color } : null;
   },
@@ -2032,7 +2047,15 @@ var RESOLVERS = {
       const v = parseFloat(value);
       return isNaN(v) ? null : { flex: v };
     }
-    if (value in flex) return { flex: flex[value] };
+    if (value in flex) {
+      const v = flex[value];
+      if (typeof v === "string" && !getEffectiveIsWeb()) {
+        if (v === "auto" || v === "initial") return { flex: 1 };
+        if (v === "none") return { flex: 0 };
+        return null;
+      }
+      return { flex: v };
+    }
     const n = parseFloat(value);
     return isNaN(n) ? null : { flex: n };
   },
@@ -2135,7 +2158,9 @@ var RESOLVERS = {
   leading: ({ value, isArbitrary }, { lineHeight }) => {
     if (isArbitrary) return { lineHeight: getEffectiveIsWeb() ? value : toNativeValue(value) };
     const v = lineHeight[value];
-    return v !== void 0 ? { lineHeight: v } : null;
+    if (v === void 0) return null;
+    if (typeof v === "string" && !getEffectiveIsWeb()) return { lineHeight: toNativeValue(v) };
+    return { lineHeight: v };
   },
   // ── Letter spacing ─────────────────────────────────────────────────────────
   tracking: ({ value, isArbitrary }, { letterSpacing }) => {
@@ -2211,7 +2236,7 @@ var RESOLVERS = {
   transition: ({ value }) => {
     if (!getEffectiveIsWeb()) return null;
     const presets = {
-      "": "color 150ms, background-color 150ms, border-color 150ms, opacity 150ms, box-shadow 150ms",
+      "": "color 150ms, background-color 150ms, border-color 150ms, text-decoration-color 150ms, fill 150ms, stroke 150ms, opacity 150ms, box-shadow 150ms, transform 150ms, filter 150ms, backdrop-filter 150ms",
       all: "all 150ms",
       none: "none",
       colors: "color 150ms, background-color 150ms, border-color 150ms",
@@ -2224,11 +2249,13 @@ var RESOLVERS = {
   },
   duration: ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
+    if (!isArbitrary && isNaN(parseFloat(value))) return null;
     const ms = isArbitrary ? value : `${value}ms`;
     return { transitionDuration: ms };
   },
   delay: ({ value, isArbitrary }) => {
     if (!getEffectiveIsWeb()) return null;
+    if (!isArbitrary && isNaN(parseFloat(value))) return null;
     const ms = isArbitrary ? value : `${value}ms`;
     return { transitionDelay: ms };
   },
@@ -2271,14 +2298,20 @@ var RESOLVERS = {
       boxShadow: offsetWidth === 0 ? `0 0 0 ${DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}` : `0 0 0 ${offsetWidth}px #fff, 0 0 0 ${offsetWidth + DEFAULT_RING_WIDTH}px ${DEFAULT_RING_COLOR}`
     };
   },
-  // ── Space between (uses CSS gap or margin fallback) ────────────────────────
+  // ── Space between ─────────────────────────────────────────────────────────
+  // On web: emits __spaceX/__spaceY markers → resolver generates > * + * CSS rules.
+  // On native (RN 0.71+): uses columnGap/rowGap directly.
   "space-x": ({ value, negative, isArbitrary }, { spacing }) => {
     const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { columnGap: v } : null;
+    if (v === null) return null;
+    if (getEffectiveIsWeb()) return { __spaceX: v };
+    return { columnGap: v };
   },
   "space-y": ({ value, negative, isArbitrary }, { spacing }) => {
     const v = resolveSpacing(value, negative, spacing, isArbitrary);
-    return v !== null ? { rowGap: v } : null;
+    if (v === null) return null;
+    if (getEffectiveIsWeb()) return { __spaceY: v };
+    return { rowGap: v };
   }
 };
 function resolveUtility(parsed, theme) {
@@ -2344,12 +2377,28 @@ function parseClass(className) {
     negative = true;
     remaining = remaining.slice(1);
   }
-  const bracketStart = remaining.lastIndexOf("-[");
-  if (bracketStart > 0 && remaining.endsWith("]")) {
-    const utility = remaining.slice(0, bracketStart);
-    const value = remaining.slice(bracketStart + 2, -1).replace(/_/g, " ");
+  let bracketDepth = 0;
+  let bracketStart = -1;
+  for (let i = remaining.length - 1; i >= 0; i--) {
+    if (remaining[i] === "]") bracketDepth++;
+    else if (remaining[i] === "[") {
+      bracketDepth--;
+      if (bracketDepth === 0) {
+        bracketStart = i;
+        break;
+      }
+    }
+  }
+  if (bracketStart > 0 && remaining[bracketStart - 1] === "-" && remaining.endsWith("]")) {
+    const utility = remaining.slice(0, bracketStart - 1);
+    const value = remaining.slice(bracketStart + 1, -1).replace(/_/g, " ");
     return { original: trimmed, modifiers, negative, important, utility, value, isArbitrary: true };
   }
+  if (remaining.endsWith("]") && bracketStart === -1) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(`[kbach] Malformed class string: "${trimmed}" \u2014 unbalanced brackets`);
+    }
+  }
   if (remaining.startsWith("[") && remaining.endsWith("]")) {
     const value = remaining.slice(1, -1).replace(/_/g, " ");
     return { original: trimmed, modifiers, negative, important, utility: "", value, isArbitrary: true };
@@ -2384,6 +2433,7 @@ function splitClassTokens(classString) {
   const tokens = [];
   let current = "";
   let depth = 0;
+  let parenDepth = 0;
   for (let i = 0; i < classString.length; i++) {
     const ch = classString[i];
     if (ch === "[") {
@@ -2396,8 +2446,18 @@ function splitClassTokens(classString) {
       current += ch;
       continue;
     }
+    if (ch === "(") {
+      parenDepth++;
+      current += ch;
+      continue;
+    }
+    if (ch === ")") {
+      parenDepth--;
+      current += ch;
+      continue;
+    }
     if (/\s/.test(ch)) {
-      if (depth === 0) {
+      if (depth === 0 && parenDepth === 0) {
         if (current) {
           tokens.push(current);
           current = "";
@@ -2453,6 +2513,7 @@ var BASE_RESET = [
 var LRUCache = class {
   constructor(capacity = 1e4) {
     this.capacity = capacity;
+    if (capacity <= 0) throw new Error("LRUCache: capacity must be a positive integer");
     this.cache = /* @__PURE__ */ new Map();
   }
   get(key) {
@@ -2472,11 +2533,7 @@ var LRUCache = class {
     return this;
   }
   has(key) {
-    if (!this.cache.has(key)) return false;
-    const value = this.cache.get(key);
-    this.cache.delete(key);
-    this.cache.set(key, value);
-    return true;
+    return this.cache.has(key);
   }
   delete(key) {
     return this.cache.delete(key);
@@ -2511,7 +2568,7 @@ function setGlobalWidth(width) {
   const store = getStore();
   if (store.width === width) return;
   store.width = width;
-  for (const l of store.listeners) l(width);
+  for (const l of store.listeners) l();
 }
 function getGlobalWidth() {
   return getStore().width;
@@ -2584,7 +2641,8 @@ function injectRule(rule) {
   if (_injectedRules.has(rule)) return;
   _injectedRules.set(rule, true);
   try {
-    getStyleEl().sheet?.insertRule(rule, getStyleEl().sheet.cssRules.length);
+    const sheet = getStyleEl().sheet;
+    if (sheet) sheet.insertRule(rule, sheet.cssRules.length);
   } catch {
   }
 }
@@ -2600,24 +2658,41 @@ function injectGlobalStyles(theme) {
   if (typeof document === "undefined" || isRuntimeCSSDisabled()) return;
   const rules = [BASE_RESET];
   const ff = theme.fontFamily;
+  if (!ff) return;
   if (ff.sans && ff.sans !== "System") {
     const family = Array.isArray(ff.sans) ? ff.sans.join(", ") : ff.sans;
     rules.push(`body { font-family: ${family}; }`);
   }
   getGlobalStyleEl().textContent = rules.join("\n");
 }
-function buildDivideDecls(styles) {
+function buildDivideDecls(styles, forceImportant) {
+  const imp = forceImportant ? " !important" : "";
   const parts = [];
   if ("__divideX" in styles) {
     const w = Number(styles.__divideX);
-    parts.push(`border-left-width: ${w}px`, "border-right-width: 0px");
+    parts.push(`border-left-width: ${w}px${imp}`, `border-right-width: 0px${imp}`);
   }
   if ("__divideY" in styles) {
     const w = Number(styles.__divideY);
-    parts.push(`border-top-width: ${w}px`, "border-bottom-width: 0px");
+    parts.push(`border-top-width: ${w}px${imp}`, `border-bottom-width: 0px${imp}`);
+  }
+  if ("__divideColor" in styles) parts.push(`border-color: ${String(styles.__divideColor)}${imp}`);
+  if ("__divideStyle" in styles) parts.push(`border-style: ${String(styles.__divideStyle)}${imp}`);
+  return parts.join("; ");
+}
+function buildSpaceDecls(styles, forceImportant) {
+  const imp = forceImportant ? " !important" : "";
+  const parts = [];
+  if ("__spaceX" in styles) {
+    const v = styles.__spaceX;
+    const val = typeof v === "number" ? `${v}px` : String(v);
+    parts.push(`margin-left: ${val}${imp}`);
+  }
+  if ("__spaceY" in styles) {
+    const v = styles.__spaceY;
+    const val = typeof v === "number" ? `${v}px` : String(v);
+    parts.push(`margin-top: ${val}${imp}`);
   }
-  if ("__divideColor" in styles) parts.push(`border-color: ${String(styles.__divideColor)}`);
-  if ("__divideStyle" in styles) parts.push(`border-style: ${String(styles.__divideStyle)}`);
   return parts.join("; ");
 }
 var RN_ONLY_PROPS = /* @__PURE__ */ new Set([
@@ -2637,7 +2712,9 @@ var RN_ONLY_PROPS = /* @__PURE__ */ new Set([
   "__divideY",
   "__divideColor",
   "__divideStyle",
-  "__keyframe"
+  "__keyframe",
+  "__spaceX",
+  "__spaceY"
 ]);
 var CSS_UNITLESS = /* @__PURE__ */ new Set([
   "opacity",
@@ -2690,10 +2767,12 @@ function buildClassCSSRules(cls, bucketKey, styles, darkMode, important, screens
     rules.push(styles.__keyframe);
   }
   const isDivide = "__divideX" in styles || "__divideY" in styles || "__divideColor" in styles || "__divideStyle" in styles;
+  const isSpace = "__spaceX" in styles || "__spaceY" in styles;
+  const isChildCombinator = isDivide || isSpace;
   const escaped = escapeCSSSelector(cls);
-  const childSuffix = isDivide ? " > * + *" : "";
+  const childSuffix = isChildCombinator ? " > * + *" : "";
   if (bucketKey === "base") {
-    const decls2 = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, important);
+    const decls2 = isDivide ? buildDivideDecls(styles, important) : isSpace ? buildSpaceDecls(styles, important) : styleValueToCSS(styles, important);
     if (!decls2) return rules;
     rules.push(`.${escaped}${childSuffix} { ${decls2} }`);
     return rules;
@@ -2734,7 +2813,7 @@ function buildClassCSSRules(cls, bucketKey, styles, darkMode, important, screens
   const ancestorPrefix = ancestorParts.join("");
   const dirPrefix = dirParts.join("");
   const selector = `${dirPrefix}${ancestorPrefix}${elementSelector}`;
-  const decls = isDivide ? buildDivideDecls(styles) : styleValueToCSS(styles, needsImportant);
+  const decls = isDivide ? buildDivideDecls(styles, needsImportant) : isSpace ? buildSpaceDecls(styles, needsImportant) : styleValueToCSS(styles, needsImportant);
   if (!decls) return rules;
   let rule;
   if (darkScheme === "dark") {
@@ -2773,7 +2852,7 @@ function resolve(classString, theme, darkMode = "attribute") {
   const cached = cache.get(cacheKey);
   if (cached) return cached;
   const result = {};
-  const onWeb = typeof document !== "undefined";
+  const onWeb = isWeb;
   for (const parsed of parseClasses(classString)) {
     const styles = resolveUtility(parsed, theme);
     if (!styles) {
@@ -2846,6 +2925,10 @@ function clearCache() {
     _styleEl.remove();
     _styleEl = null;
   }
+  if (_globalStyleEl) {
+    _globalStyleEl.remove();
+    _globalStyleEl = null;
+  }
 }
 
 // src/core/config.ts
@@ -2917,19 +3000,24 @@ function buildConfig(userConfig) {
     theme = deepMerge(theme, userConfig.theme);
   }
   if (userConfig.extend) {
-    const { theme: nestedTheme, ...directKeys } = userConfig.extend;
+    const extendConfig = userConfig.extend;
+    const { theme: nestedTheme, ...directKeys } = extendConfig;
     const extSources = [];
     if (nestedTheme) extSources.push(nestedTheme);
     if (Object.keys(directKeys).length) extSources.push(directKeys);
     for (const ext of extSources) {
       for (const [key, value] of Object.entries(ext)) {
+        if (typeof value !== "object" || value === null || Array.isArray(value)) {
+          if (process.env.NODE_ENV !== "production") {
+            console.warn(`[kbach] config.extend.${key} must be a plain object, got ${typeof value}. Skipping.`);
+          }
+          continue;
+        }
         if (value !== null && typeof value === "object" && !Array.isArray(value)) {
           theme[key] = deepMerge(
             theme[key] ?? {},
             value
           );
-        } else if (value !== void 0) {
-          theme[key] = value;
         }
       }
     }
@@ -2940,8 +3028,10 @@ function buildConfig(userConfig) {
     theme,
     plugins: userConfig.plugins ?? []
   };
-  clearPluginUtilities();
-  clearPluginModifiers();
+  if (userConfig.plugins !== void 0) {
+    clearPluginUtilities();
+    clearPluginModifiers();
+  }
   const _store = getConfigStore();
   for (const k of Object.keys(_store.customVariants)) delete _store.customVariants[k];
   const pluginAPI = makePluginAPI(resolved.theme);
@@ -2959,7 +3049,7 @@ function _selectorToModifierDef(selector) {
   if (s.startsWith("@media ")) {
     return { mediaQuery: s.slice(7), jsBehavior: "css-only", forcesImportant: true };
   }
-  if (s.startsWith("::") || s.startsWith(":")) {
+  if (s.startsWith("::") || s.startsWith(":") && !s.includes(" ") && !s.includes("&") && !s.includes("(")) {
     return { pseudo: s, jsBehavior: "css-only", forcesImportant: true };
   }
   return { ancestorSelector: s.endsWith(" ") ? s : `${s} `, jsBehavior: "css-only", forcesImportant: true };
@@ -2972,8 +3062,8 @@ function makePluginAPI(theme) {
     },
     addVariant(name, selectorOrDef) {
       const def = typeof selectorOrDef === "string" ? _selectorToModifierDef(selectorOrDef) : selectorOrDef;
-      const selector = typeof selectorOrDef === "string" ? selectorOrDef : selectorOrDef.pseudo ?? selectorOrDef.mediaQuery ?? selectorOrDef.ancestorSelector ?? name;
-      customVariants[name] = selector;
+      const selector = typeof selectorOrDef === "string" ? selectorOrDef : selectorOrDef.pseudo ?? selectorOrDef.mediaQuery ?? selectorOrDef.ancestorSelector ?? null;
+      if (selector !== null && selector !== name) customVariants[name] = selector;
       registerModifier(name, def);
     },
     theme(path, defaultValue) {
@@ -3046,6 +3136,7 @@ export {
   BASE_RESET,
   syncGlobalWidth,
   syncGlobalScreens,
+  getGlobalScreens,
   setGlobalWidth,
   getGlobalWidth,
   subscribeGlobalWidth,

package/dist/{chunk-O4EKWQSX.mjs → chunk-EMSB47ES.mjs}

@@ -6,12 +6,13 @@ import {
   transformToWebProps,
   useConditionalWidth,
   useGlobalDarkMode
-} from "./chunk-PESA3FMP.mjs";
+} from "./chunk-F5NQX5YO.mjs";
 import {
   flatten,
   getActiveBreakpoints,
   getConfig,
   getDefaultFontFamily,
+  getGlobalScreens,
   getInteractiveModifiers,
   getModeModifiers,
   getResponsiveModifiers,
@@ -19,8 +20,9 @@ import {
   isRuntimeCSSDisabled,
   isWeb,
   normalizeClassString,
+  onConfigChange,
   resolve
-} from "./chunk-JBV2R655.mjs";
+} from "./chunk-2HWRNTJG.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -34,6 +36,7 @@ var DarkWrapper = React.forwardRef(
     const needsWidth = hasResponsiveBuckets(resolvedStyle);
     const width = useConditionalWidth(needsWidth);
     const breakpoints = needsWidth ? getActiveBreakpoints(width) : EMPTY_BREAKPOINTS;
+    const screens = getGlobalScreens();
     const isNonStringComponent = typeof Component !== "string";
     const computedStyle = useMemo(() => {
       if (isWeb) return {};
@@ -41,7 +44,7 @@ var DarkWrapper = React.forwardRef(
       stripInternalMarkers(s);
       if (isNonStringComponent) stripWebOnlyProps(s);
       return s;
-    }, [resolvedStyle, isDark, width, isNonStringComponent]);
+    }, [resolvedStyle, isDark, width, screens, isNonStringComponent]);
     const skipComputedInline = isWeb || !isNative && typeof Component === "string";
     const finalStyle = skipComputedInline ? styleProp ?? void 0 : styleProp ? Array.isArray(styleProp) ? Object.assign({}, computedStyle, ...styleProp) : { ...computedStyle, ...styleProp } : computedStyle;
     const props = { ref, ...rest, style: finalStyle };
@@ -87,6 +90,7 @@ var _lastFontVersion = -1;
 function _invalidateDefaultFontCache() {
   _defaultFontVersion++;
 }
+onConfigChange(_invalidateDefaultFontCache);
 function getCachedDefaultFont() {
   if (_lastFontVersion !== _defaultFontVersion) {
     _cachedDefaultFont = getDefaultFontFamily();
@@ -162,7 +166,7 @@ function stripWebOnlyInlineProps(s) {
   }
 }
 function processElement(type, rawProps, key, isStaticChildren) {
-  if (typeof type === "symbol") return makeElement(isStaticChildren, type, rawProps ?? {}, key);
+  if (type === null || typeof type === "symbol") return makeElement(isStaticChildren, type, rawProps ?? {}, key);
   const webTag = isWeb ? getWebTag(type, rawProps ?? void 0) : null;
   const effectiveType = webTag ?? type;
   const originalName = webTag ? type?.displayName ?? type?.name : void 0;
@@ -220,7 +224,7 @@ function processElement(type, rawProps, key, isStaticChildren) {
   }
   return makeElement(isStaticChildren, effectiveType, {
     ...passProps,
-    style: finalStyle,
+    ...finalStyle !== void 0 ? { style: finalStyle } : {},
     ...!isNative && classStr ? { className: normalizeClassString(classStr) } : {}
   }, key);
 }