@kbach/react-native 1.0.0-beta.30 → 1.0.0-beta.31

package/dist/index.web.mjs

@@ -10,13 +10,13 @@ import {
   subscribeDynamicTokens,
   subscribeGlobalDarkMode,
   toggleGlobalDarkMode
-} from "./chunk-LOTFFRZP.mjs";
+} from "./chunk-XPVSILI4.mjs";
 import {
   defaultTheme,
   getTheme,
   resolveClassName,
   setTheme
-} from "./chunk-DDNGWPS4.mjs";
+} from "./chunk-ZYE4VIZE.mjs";
 
 // src/config.ts
 function parseHexRgb(hex) {

package/dist/jsx-dev-runtime.js

@@ -180,59 +180,159 @@ var Evaluator = class {
 };
 
 // src/layoutCalc.ts
-var PERCENT_CALC_TOKEN_RE = /^(w|h)-\[calc\(([^)]+)\)\]$/;
+var NEG = (v) => ({ percent: -v.percent, px: -v.px });
+var ADD = (a, b) => ({ percent: a.percent + b.percent, px: a.px + b.px });
+var SUB = (a, b) => ({ percent: a.percent - b.percent, px: a.px - b.px });
+function MUL(a, b) {
+  if (a.percent === 0) return { percent: b.percent * a.px, px: b.px * a.px };
+  if (b.percent === 0) return { percent: a.percent * b.px, px: a.px * b.px };
+  return null;
+}
+function DIV(a, b) {
+  if (b.percent !== 0 || b.px === 0) return null;
+  return { percent: a.percent / b.px, px: a.px / b.px };
+}
+var PercentAwareEvaluator = class {
+  constructor(s) {
+    this.pos = 0;
+    this.s = s;
+  }
+  parseExprToEnd() {
+    const value = this.expr();
+    if (value === null) return null;
+    this.skipWs();
+    return this.pos === this.s.length ? value : null;
+  }
+  skipWs() {
+    while (this.pos < this.s.length && /\s/.test(this.s[this.pos])) this.pos++;
+  }
+  peek() {
+    this.skipWs();
+    return this.s[this.pos];
+  }
+  expr() {
+    let value = this.term();
+    if (value === null) return null;
+    for (; ; ) {
+      const ch = this.peek();
+      if (ch === "+") {
+        this.pos++;
+        const rhs = this.term();
+        if (rhs === null) return null;
+        value = ADD(value, rhs);
+      } else if (ch === "-") {
+        this.pos++;
+        const rhs = this.term();
+        if (rhs === null) return null;
+        value = SUB(value, rhs);
+      } else {
+        return value;
+      }
+    }
+  }
+  term() {
+    let value = this.factor();
+    if (value === null) return null;
+    for (; ; ) {
+      const ch = this.peek();
+      if (ch === "*") {
+        this.pos++;
+        const rhs = this.factor();
+        if (rhs === null) return null;
+        const result = MUL(value, rhs);
+        if (result === null) return null;
+        value = result;
+      } else if (ch === "/") {
+        this.pos++;
+        const rhs = this.factor();
+        if (rhs === null) return null;
+        const result = DIV(value, rhs);
+        if (result === null) return null;
+        value = result;
+      } else {
+        return value;
+      }
+    }
+  }
+  factor() {
+    const ch = this.peek();
+    if (ch === void 0) return null;
+    if (ch === "(") {
+      this.pos++;
+      const value = this.expr();
+      if (value === null || this.peek() !== ")") return null;
+      this.pos++;
+      return value;
+    }
+    if (ch === "-") {
+      this.pos++;
+      const value = this.factor();
+      return value === null ? null : NEG(value);
+    }
+    return this.numberWithUnit();
+  }
+  numberWithUnit() {
+    this.skipWs();
+    const start = this.pos;
+    while (this.pos < this.s.length && (/[0-9]/.test(this.s[this.pos]) || this.s[this.pos] === ".")) this.pos++;
+    if (this.pos === start) return null;
+    const n = Number(this.s.slice(start, this.pos));
+    if (!Number.isFinite(n)) return null;
+    if (this.s[this.pos] === "%") {
+      this.pos++;
+      return { percent: n, px: 0 };
+    }
+    const unitStart = this.pos;
+    while (this.pos < this.s.length && /[a-zA-Z]/.test(this.s[this.pos])) this.pos++;
+    const unit = this.s.slice(unitStart, this.pos);
+    switch (unit) {
+      case "":
+        return { percent: 0, px: n };
+      case "px":
+        return { percent: 0, px: n };
+      case "rem":
+        return { percent: 0, px: n * 16 };
+      default:
+        return null;
+    }
+  }
+};
+var PERCENT_TOKEN_OUTER_RE = /^(w|h)-\[(.+)\]$/;
 function parsePercentRelativeCalc(token) {
-  const m = PERCENT_CALC_TOKEN_RE.exec(token);
+  const m = PERCENT_TOKEN_OUTER_RE.exec(token);
   if (!m) return null;
   const property = m[1] === "w" ? "width" : "height";
-  const inner = m[2].replace(/_/g, " ").trim();
-  let mm = /^(-?[\d.]+)%\s*([+-])\s*(.+)$/.exec(inner);
-  if (mm) {
-    const percentCoefficient = Number(mm[1]);
-    const magnitude = reduceConstantMath(`calc(${mm[3].trim()})`);
-    if (!Number.isFinite(percentCoefficient) || magnitude === null) return null;
-    return { property, percentCoefficient, constantPx: mm[2] === "+" ? magnitude : -magnitude };
-  }
-  mm = /^(.+?)\s*([+-])\s*(-?[\d.]+)%$/.exec(inner);
-  if (mm) {
-    const constantPx = reduceConstantMath(`calc(${mm[1].trim()})`);
-    const percentMagnitude = Number(mm[3]);
-    if (constantPx === null || !Number.isFinite(percentMagnitude)) return null;
-    return { property, percentCoefficient: mm[2] === "+" ? percentMagnitude : -percentMagnitude, constantPx };
-  }
-  return null;
+  const inner = stripCall(m[2].replace(/_/g, " ").trim(), "calc");
+  if (inner === null) return null;
+  const result = new PercentAwareEvaluator(inner).parseExprToEnd();
+  if (result === null || result.percent === 0) return null;
+  return { property, percentCoefficient: result.percent, constantPx: result.px };
 }
 function resolvePercentRelativeCalc(basisPx, calc) {
   return basisPx * calc.percentCoefficient / 100 + calc.constantPx;
 }
-var PERCENT_MIN_MAX_CLAMP_TOKEN_RE = /^(w|h)-\[(min|max|clamp)\(([^)]+)\)\]$/;
-function parseOperand(arg) {
-  const trimmed = arg.trim();
-  const pct = /^(-?[\d.]+)%$/.exec(trimmed);
-  if (pct) {
-    const percentCoefficient = Number(pct[1]);
-    return Number.isFinite(percentCoefficient) ? { percentCoefficient, constantPx: 0 } : null;
-  }
-  const constantPx = reduceConstantMath(`calc(${trimmed})`);
-  return constantPx === null ? null : { percentCoefficient: 0, constantPx };
-}
 function parsePercentRelativeMinMaxClamp(token) {
-  const m = PERCENT_MIN_MAX_CLAMP_TOKEN_RE.exec(token);
+  const m = PERCENT_TOKEN_OUTER_RE.exec(token);
   if (!m) return null;
   const property = m[1] === "w" ? "width" : "height";
-  const kind = m[2];
-  const args = splitTopLevelCommas(m[3].replace(/_/g, " "));
+  const spaced = m[2].replace(/_/g, " ");
+  let kind;
+  let inner;
+  if ((inner = stripCall(spaced, "min")) !== null) kind = "min";
+  else if ((inner = stripCall(spaced, "max")) !== null) kind = "max";
+  else if ((inner = stripCall(spaced, "clamp")) !== null) kind = "clamp";
+  else return null;
+  const args = splitTopLevelCommas(inner);
   if (kind === "clamp" && args.length !== 3) return null;
   if (kind !== "clamp" && args.length < 1) return null;
-  const operands = args.map(parseOperand);
+  const operands = args.map((arg) => new PercentAwareEvaluator(arg.trim()).parseExprToEnd());
   if (operands.some((o) => o === null)) return null;
   const resolved = operands;
-  if (!resolved.some((o) => o.percentCoefficient !== 0)) return null;
-  const resolveOperand = (o, basisPx) => basisPx * o.percentCoefficient / 100 + o.constantPx;
+  if (!resolved.some((o) => o.percent !== 0)) return null;
   return {
     property,
     resolve(basisPx) {
-      const values = resolved.map((o) => resolveOperand(o, basisPx));
+      const values = resolved.map((o) => basisPx * o.percent / 100 + o.px);
       if (kind === "min") return Math.min(...values);
       if (kind === "max") return Math.max(...values);
       const [min, preferred, max] = values;
@@ -420,6 +520,63 @@ var ARBITRARY_PROPERTY_SENTINEL = "[arbitrary-property]";
 function isSafeArbitraryValue(value) {
   return !value.includes("{") && !value.includes("}") && !value.includes(";");
 }
+function normalizeMathWhitespace(raw) {
+  if (!(raw.startsWith("calc(") || raw.startsWith("min(") || raw.startsWith("max(") || raw.startsWith("clamp("))) {
+    return raw;
+  }
+  const chars = Array.from(raw);
+  let out = "";
+  let i = 0;
+  let prevEndsValue = false;
+  while (i < chars.length) {
+    const c = chars[i];
+    if (c === "v" && chars[i + 1] === "a" && chars[i + 2] === "r" && chars[i + 3] === "(") {
+      const start = i;
+      let depth = 0;
+      while (i < chars.length) {
+        if (chars[i] === "(") depth++;
+        else if (chars[i] === ")") {
+          depth--;
+          if (depth === 0) {
+            i++;
+            break;
+          }
+        }
+        i++;
+      }
+      out += chars.slice(start, i).join("");
+      prevEndsValue = true;
+      continue;
+    }
+    if (c === "+" || c === "-") {
+      if (prevEndsValue) {
+        out += ` ${c} `;
+        i++;
+        while (i < chars.length && /\s/.test(chars[i])) i++;
+        prevEndsValue = false;
+        continue;
+      }
+      out += c;
+      prevEndsValue = false;
+    } else if (c === "(" || c === ",") {
+      out += c;
+      if (c === ",") out += " ";
+      prevEndsValue = false;
+    } else if (c === ")") {
+      out += c;
+      prevEndsValue = true;
+    } else if (/\s/.test(c)) {
+    } else if (c === "*" || c === "/") {
+      out += c;
+      prevEndsValue = false;
+    } else {
+      out += c;
+      prevEndsValue = true;
+    }
+    i++;
+  }
+  return out;
+}
 function splitRespectingBrackets(token) {
   const parts = [];
   let depth = 0;
@@ -455,7 +612,7 @@ function parseClass(token) {
       const property = raw.slice(0, colonIdx);
       const rawValue = raw.slice(colonIdx + 1);
       if (property !== "" && rawValue !== "" && isSafeArbitraryValue(raw)) {
-        const value = rawValue.replace(/_/g, " ");
+        const value = normalizeMathWhitespace(rawValue.replace(/_/g, " "));
         return {
           modifiers,
           utility: ARBITRARY_PROPERTY_SENTINEL,
@@ -477,7 +634,7 @@ function parseClass(token) {
       if (!isSafeArbitraryValue(raw)) {
         continue;
       }
-      const spaced = raw.replace(/_/g, " ");
+      const spaced = normalizeMathWhitespace(raw.replace(/_/g, " "));
       return {
         modifiers,
         utility: prefix.slice(0, -1),
@@ -518,7 +675,7 @@ function substituteDynamicTokens(classStrRaw) {
     return value ?? whole;
   });
 }
-var PERCENT_RELATIVE_CALC_HINT_RE = /[wh]-\[(calc|min|max|clamp)\([^)]*%[^)]*\)\]/;
+var PERCENT_RELATIVE_CALC_HINT_RE = /[wh]-\[(calc|min|max|clamp)\(.*%.*\)\]/;
 function extractPercentRelativeCalcs(classStrRaw) {
   const found = [];
   for (const token of classStrRaw.split(/\s+/)) {
@@ -531,26 +688,64 @@ function stripPercentRelativeCalcTokens(classStrRaw) {
   return classStrRaw.split(/\s+/).filter((token) => token && parsePercentRelativeExpr(token) === null).join(" ");
 }
 var STATE_MODIFIER_NAMES = /* @__PURE__ */ new Set(["hover", "focus", "disabled"]);
-var STATE_MODIFIER_HINT_RE = /(^|\s|:)(hover|focus|disabled):/;
+var STATIC_ARIA_SHORTCUT_NAMES = /* @__PURE__ */ new Set([
+  "aria-checked",
+  "aria-disabled",
+  "aria-expanded",
+  "aria-hidden",
+  "aria-pressed",
+  "aria-readonly",
+  "aria-required",
+  "aria-selected",
+  "aria-busy"
+]);
+var STATE_MODIFIER_HINT_RE = /(^|\s|:)(hover|focus|disabled|aria-checked|aria-disabled|aria-expanded|aria-hidden|aria-pressed|aria-readonly|aria-required|aria-selected|aria-busy):|data-\[|aria-\[/;
+function bracketContent(name, prefix) {
+  if (!name.startsWith(prefix)) return null;
+  const rest = name.slice(prefix.length);
+  if (!rest.startsWith("[") || !rest.endsWith("]")) return null;
+  return rest.slice(1, -1);
+}
+function evalAttrCondition(hostRest, attrPrefix, inner) {
+  const eqIdx = inner.indexOf("=");
+  if (eqIdx === -1) return Boolean(hostRest[`${attrPrefix}${inner}`]);
+  const key = inner.slice(0, eqIdx);
+  const value = inner.slice(eqIdx + 1);
+  return String(hostRest[`${attrPrefix}${key}`]) === value;
+}
+function isAriaTruthy(value) {
+  return value === true || value === "true";
+}
+function propBasedModifierState(name, states, hostRest) {
+  if (STATE_MODIFIER_NAMES.has(name)) return states[name];
+  if (STATIC_ARIA_SHORTCUT_NAMES.has(name)) return isAriaTruthy(hostRest[name]);
+  const dataInner = bracketContent(name, "data-");
+  if (dataInner !== null) return evalAttrCondition(hostRest, "data-", dataInner);
+  const ariaInner = bracketContent(name, "aria-");
+  if (ariaInner !== null) return evalAttrCondition(hostRest, "aria-", ariaInner);
+  return null;
+}
 function stripModifiers(parts, namesToStrip) {
   const utility = parts[parts.length - 1] ?? "";
   const modifiers = parts.slice(0, -1).filter((m) => !namesToStrip.has(m));
   return [...modifiers, utility].join(":");
 }
-function substituteStateModifiers(classStrRaw, states) {
+function substituteStateModifiers(classStrRaw, states, hostRest) {
   if (!STATE_MODIFIER_HINT_RE.test(classStrRaw)) return classStrRaw;
   const kept = [];
   for (const token of classStrRaw.split(/\s+/)) {
     if (!token) continue;
     const parts = splitRespectingBrackets(token);
     const modifiers = parts.slice(0, -1);
-    const required = modifiers.filter((m) => STATE_MODIFIER_NAMES.has(m));
+    const resolved = modifiers.map((m) => [m, propBasedModifierState(m, states, hostRest)]);
+    const required = resolved.filter(([, v]) => v !== null);
     if (required.length === 0) {
       kept.push(token);
       continue;
     }
-    if (required.every((m) => states[m])) {
-      kept.push(stripModifiers(parts, STATE_MODIFIER_NAMES));
+    if (required.every(([, v]) => v === true)) {
+      const requiredNames = new Set(required.map(([m]) => m));
+      kept.push(stripModifiers(parts, requiredNames));
     }
   }
   return kept.join(" ");
@@ -558,8 +753,8 @@ function substituteStateModifiers(classStrRaw, states) {
 function makeElement(isStaticChildren, type, props, key) {
   return (isStaticChildren ? import_jsx_runtime.jsxs : import_jsx_runtime.jsx)(type, props, key);
 }
-function resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, pressed, layoutOverrides, states = { hover: false, focus: false, disabled: false }) {
-  const stateResolved = substituteStateModifiers(classStrRaw, states);
+function resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, pressed, hostRest, layoutOverrides, states = { hover: false, focus: false, disabled: false }) {
+  const stateResolved = substituteStateModifiers(classStrRaw, states, hostRest);
   const cleaned = stripPercentRelativeCalcTokens(substituteDynamicTokens(stateResolved));
   const resolved = resolveStyle2(cleaned, pressed);
   if (layoutOverrides) {
@@ -574,7 +769,7 @@ function resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, pressed, layout
   return [resolved, userStyle];
 }
 var DARK_MODIFIER_RE = /(^|\s|:)dark:/;
-var BREAKPOINT_MODIFIER_RE = /(^|\s|:)(sm|md|lg|xl|2xl):/;
+var BREAKPOINT_MODIFIER_RE = /(^|\s|:)(sm|md|lg|xl|2xl):|(^|\s|:)(min|max)-\[[^\]]*\]:/;
 var HOVER_MODIFIER_RE = /(^|\s|:)hover:/;
 var FOCUS_MODIFIER_RE = /(^|\s|:)focus:/;
 function ReactiveElement({
@@ -652,7 +847,7 @@ function ReactiveElement({
     };
   }
   const states = { hover: isHovered, focus: isFocused, disabled: hostRest.disabled === true };
-  const finalStyle = hostType === import_react_native.Pressable ? (state) => resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, state.pressed, layoutOverrides, states) : resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, false, layoutOverrides, states);
+  const finalStyle = hostType === import_react_native.Pressable ? (state) => resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, state.pressed, hostRest, layoutOverrides, states) : resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, false, hostRest, layoutOverrides, states);
   return makeElement(
     isStaticChildren,
     hostType,
@@ -676,7 +871,7 @@ function processElement(resolveStyle2, type, rawProps, key, isStaticChildren) {
     );
   }
   const staticStates = { hover: false, focus: false, disabled: rest.disabled === true };
-  const finalStyle = type === import_react_native.Pressable ? (state) => resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, state.pressed, void 0, staticStates) : resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, false, void 0, staticStates);
+  const finalStyle = type === import_react_native.Pressable ? (state) => resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, state.pressed, rest, void 0, staticStates) : resolvedStyleFor(resolveStyle2, classStrRaw, userStyle, false, rest, void 0, staticStates);
   return makeElement(isStaticChildren, type, { ...rest, className: classStrRaw, style: finalStyle }, key);
 }
 function createJsxFunctions(resolveStyle2) {
@@ -1778,6 +1973,14 @@ function nativeModifierState(modifier, theme, colorScheme, pressed, width) {
     if (minWidth === void 0) return null;
     return width >= minWidth;
   }
+  if (modifier.startsWith("min-[") && modifier.endsWith("]")) {
+    const px = reduceConstantMath(`calc(${modifier.slice(5, -1).trim()})`);
+    return px === null ? null : width >= px;
+  }
+  if (modifier.startsWith("max-[") && modifier.endsWith("]")) {
+    const px = reduceConstantMath(`calc(${modifier.slice(5, -1).trim()})`);
+    return px === null ? null : width <= px;
+  }
   return null;
 }
 function kebabToCamel(s) {