@kbach/react-native 1.0.0-beta.54 → 1.0.0-beta.56

package/dist/index.web.mjs

@@ -10,13 +10,13 @@ import {
   subscribeDynamicTokens,
   subscribeGlobalDarkMode,
   toggleGlobalDarkMode
-} from "./chunk-NPDSBCXR.mjs";
+} from "./chunk-VWGUF2NB.mjs";
 import {
   defaultTheme,
   getTheme,
   resolveClassName,
   setTheme
-} from "./chunk-MLBH2JYH.mjs";
+} from "./chunk-4WQ2DOOC.mjs";
 
 // src/config.ts
 function parseHexRgb(hex) {

package/dist/jsx-dev-runtime.js

@@ -108,7 +108,27 @@ var LENGTH_UNITS = ["px", "rem", "em", "%", "vh", "vw"];
 function looksLikeLength(value) {
   const unit = LENGTH_UNITS.find((u) => value.endsWith(u));
   const withoutUnit = unit ? value.slice(0, value.length - unit.length) : value;
-  return withoutUnit !== "" && Number.isFinite(Number(withoutUnit));
+  if (withoutUnit !== "" && Number.isFinite(Number(withoutUnit))) return true;
+  if (!["calc(", "clamp(", "min(", "max("].some((f) => value.startsWith(f))) return false;
+  return MATH_LENGTH_UNIT.test(value);
+}
+var MATH_LENGTH_UNIT = /\d(?:px|rem|em|%|vh|vw|vmin|vmax|dvh|dvw|svh|svw|lvh|lvw|ch|ex|lh|cqw|cqh|cqi|cqb)(?![A-Za-z])/;
+function isLength(parsed, value) {
+  switch (parsed.typeHint ?? null) {
+    case null:
+      return looksLikeLength(value);
+    case "length":
+    case "size":
+    case "line-width":
+    case "percentage":
+    case "number":
+    case "integer":
+    case "absolute-size":
+    case "relative-size":
+      return true;
+    default:
+      return false;
+  }
 }
 
 // src/jsxRuntimeCore.ts
@@ -663,14 +683,68 @@ function normalizeMathWhitespace(raw) {
   }
   return out;
 }
+var TYPE_HINTS = /* @__PURE__ */ new Set([
+  "color",
+  "length",
+  "size",
+  "line-width",
+  "percentage",
+  "number",
+  "integer",
+  "image",
+  "url",
+  "position",
+  "bg-size",
+  "family-name",
+  "absolute-size",
+  "relative-size",
+  "angle",
+  "shadow",
+  "any"
+]);
+function splitTypeHint(raw) {
+  const i = raw.indexOf(":");
+  if (i > 0 && i < raw.length - 1 && TYPE_HINTS.has(raw.slice(0, i))) return [raw.slice(0, i), raw.slice(i + 1)];
+  return [null, raw];
+}
+function parenVarShorthand(value) {
+  const m = /^\((?:([a-z-]+):)?--([A-Za-z0-9_-]+)\)(\/.*)?$/.exec(value);
+  if (!m) return null;
+  const [, hint, name, tail = ""] = m;
+  if (hint !== void 0 && !TYPE_HINTS.has(hint)) return null;
+  return hint ? `[${hint}:var(--${name})]${tail}` : `[var(--${name})]${tail}`;
+}
+function splitArbitraryOpacity(value) {
+  if (value.startsWith("[")) {
+    const i = value.lastIndexOf("]/");
+    if (i !== -1) {
+      const pct = value.slice(i + 2);
+      if (/^\d+$/.test(pct) && Number(pct) <= 100) return [value.slice(0, i + 1), Number(pct)];
+    }
+  }
+  return [value, null];
+}
+var COLOR_FUNCTIONS = ["rgb(", "rgba(", "hsl(", "hsla(", "hwb(", "lab(", "lch(", "oklab(", "oklch(", "color(", "color-mix(", "var("];
+function looksLikeColor(value) {
+  return value.startsWith("#") || COLOR_FUNCTIONS.some((f) => value.startsWith(f)) || /^[A-Za-z]+$/.test(value);
+}
+function colorWithOpacity(color, pct) {
+  const m = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.exec(color);
+  if (m) {
+    const h = m[1].length === 3 ? m[1].split("").map((c) => c + c).join("") : m[1];
+    const [r, g, b] = [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16));
+    return `rgba(${r},${g},${b},${pct / 100})`;
+  }
+  return `color-mix(in srgb, ${color} ${pct}%, transparent)`;
+}
 function splitRespectingBrackets(token) {
   const parts = [];
   let depth = 0;
   let start = 0;
   for (let i = 0; i < token.length; i++) {
     const ch = token[i];
-    if (ch === "[") depth += 1;
-    else if (ch === "]") depth -= 1;
+    if (ch === "[" || ch === "(") depth += 1;
+    else if (ch === "]" || ch === ")") depth -= 1;
     else if (ch === ":" && depth <= 0) {
       parts.push(token.slice(start, i));
       start = i + 1;
@@ -683,9 +757,11 @@ function parseClass(token) {
   const parts = splitRespectingBrackets(token);
   let base = parts.pop() ?? token;
   const modifiers = parts;
-  const important = base.startsWith("!");
-  if (important) {
+  const important = base.startsWith("!") || base.length > 1 && base.endsWith("!");
+  if (base.startsWith("!")) {
     base = base.slice(1);
+  } else if (important) {
+    base = base.slice(0, -1);
   }
   const negative = base.startsWith("-");
   if (negative) {
@@ -713,18 +789,26 @@ function parseClass(token) {
   }
   for (const prefix of VALUE_PREFIXES) {
     if (!base.startsWith(prefix)) continue;
-    const value = base.slice(prefix.length);
-    if (value === "") continue;
+    const written = base.slice(prefix.length);
+    if (written === "") continue;
+    const [value, arbitraryOpacity] = splitArbitraryOpacity(parenVarShorthand(written) ?? written);
     if (value.length >= 2 && value.startsWith("[") && value.endsWith("]")) {
       const raw = value.slice(1, -1);
       if (!isSafeArbitraryValue(raw)) {
         continue;
       }
       const spaced = normalizeMathWhitespace(raw.replace(/_/g, " "));
+      let [typeHint, hinted] = splitTypeHint(spaced);
+      if (arbitraryOpacity !== null) {
+        if (!(typeHint === "color" || typeHint === null && looksLikeColor(hinted))) continue;
+        hinted = colorWithOpacity(hinted, arbitraryOpacity);
+        typeHint = "color";
+      }
       return {
         modifiers,
         utility: prefix.slice(0, -1),
-        value: spaced,
+        value: hinted,
+        typeHint,
         isArbitrary: true,
         important,
         negative,
@@ -734,7 +818,8 @@ function parseClass(token) {
     return {
       modifiers,
       utility: prefix.slice(0, -1),
-      value,
+      // a named value keeps its own /opacity (`bg-blue-6/50`)
+      value: arbitraryOpacity === null ? value : `${value}/${arbitraryOpacity}`,
       isArbitrary: false,
       important,
       negative,
@@ -1059,6 +1144,8 @@ function resolvePercent(parsed) {
 function negateRaw(value, negative) {
   return negative ? `-${value}` : value;
 }
+var WHOLE = /^\d+$/;
+var PLAIN_NUMBER = /^(?:\d+\.?\d*|\.\d+)$/;
 function overflowAxisValue(property, value) {
   switch (value) {
     case "auto":
@@ -1189,14 +1276,29 @@ function resolve(parsed, theme) {
       return [decl("position", "fixed")];
     case "sticky":
       return [decl("position", "sticky")];
-    case "z":
-      return parsed.value === null ? null : [decl("z-index", negateRaw(parsed.value, parsed.negative))];
-    case "order":
-      return parsed.value === null ? null : [decl("order", negateRaw(parsed.value, parsed.negative))];
+    // Only real values, mirroring layout.rs: a whole number, z-auto, the
+    // order-first/-last/-none keywords, or an arbitrary [...]. Anything
+    // else used to pass straight through (z-banana -> z-index: banana).
+    case "z": {
+      const v = parsed.value;
+      if (v === null || !(parsed.isArbitrary || v === "auto" || WHOLE.test(v))) return null;
+      return [decl("z-index", negateRaw(v, parsed.negative))];
+    }
+    case "order": {
+      const v = parsed.value;
+      if (v === null) return null;
+      if (v === "first") return [decl("order", "-9999")];
+      if (v === "last") return [decl("order", "9999")];
+      if (v === "none") return [decl("order", "0")];
+      if (!(parsed.isArbitrary || WHOLE.test(v))) return null;
+      return [decl("order", negateRaw(v, parsed.negative))];
+    }
     case "grow":
-      return [decl("flex-grow", parsed.value ?? "1")];
-    case "shrink":
-      return [decl("flex-shrink", parsed.value ?? "1")];
+    case "shrink": {
+      const v = parsed.value ?? "1";
+      if (!(parsed.isArbitrary || PLAIN_NUMBER.test(v))) return null;
+      return [decl(parsed.utility === "grow" ? "flex-grow" : "flex-shrink", v)];
+    }
     // top/right/bottom/left/inset support real Tailwind's negative-value
     // convention ("-top-4") AND its percentage-fraction scale ("top-1/2",
     // "-inset-1/3") — see resolveNegatableSize's own doc comment.
@@ -1534,7 +1636,7 @@ function borderValue(theme, parsed) {
     if (value === "separate") return [decl("border-collapse", "separate")];
   }
   if (parsed.isArbitrary) {
-    if (looksLikeLength(value)) return [decl("border-width", value)];
+    if (isLength(parsed, value)) return [decl("border-width", value)];
     const color2 = colorValue(theme, parsed);
     return color2 === null ? null : [decl("border-color", color2)];
   }
@@ -1552,7 +1654,7 @@ function borderSideValue(theme, parsed, sideProperty) {
   const value = parsed.value;
   if (value === null) return null;
   if (parsed.isArbitrary) {
-    if (looksLikeLength(value)) return [decl(`${sideProperty}-width`, value)];
+    if (isLength(parsed, value)) return [decl(`${sideProperty}-width`, value)];
     const color2 = colorValue(theme, parsed);
     return color2 === null ? null : [decl(`${sideProperty}-color`, color2)];
   }
@@ -1570,7 +1672,7 @@ function borderAxisValue(theme, parsed, sideA, sideB) {
   const value = parsed.value;
   if (value === null) return null;
   if (parsed.isArbitrary) {
-    if (looksLikeLength(value)) return [decl(`${sideA}-width`, value), decl(`${sideB}-width`, value)];
+    if (isLength(parsed, value)) return [decl(`${sideA}-width`, value), decl(`${sideB}-width`, value)];
     const color2 = colorValue(theme, parsed);
     return color2 === null ? null : [decl(`${sideA}-color`, color2), decl(`${sideB}-color`, color2)];
   }
@@ -1628,7 +1730,7 @@ function outlineValue(theme, parsed) {
   const value = parsed.value;
   if (value === null) return null;
   if (parsed.isArbitrary) {
-    if (looksLikeLength(value)) return [decl("outline-width", value)];
+    if (isLength(parsed, value)) return [decl("outline-width", value)];
     const color2 = colorValue(theme, parsed);
     return color2 === null ? null : [decl("outline-color", color2)];
   }
@@ -1846,7 +1948,12 @@ function scaleFactor(parsed) {
 }
 function angle(parsed) {
   if (parsed.value === null) return null;
-  if (parsed.isArbitrary) return parsed.value;
+  if (parsed.isArbitrary) {
+    if (!parsed.negative) return parsed.value;
+    if (parsed.value.startsWith("-")) return parsed.value.slice(1);
+    if (/^[\d.]/.test(parsed.value)) return `-${parsed.value}`;
+    return `calc(${parsed.value} * -1)`;
+  }
   const n = Number(parsed.value);
   if (!Number.isFinite(n)) return null;
   return `${parsed.negative ? -n : n}deg`;
@@ -1979,7 +2086,7 @@ function resolveTextNative(parsed, theme) {
     if (size !== null) return [decl("font-size", size)];
     const align = textAlign(parsed.value);
     if (align !== null) return [decl("text-align", align)];
-  } else if (parsed.isArbitrary && parsed.value !== null && looksLikeLength(parsed.value)) {
+  } else if (parsed.isArbitrary && parsed.value !== null && isLength(parsed, parsed.value)) {
     return [decl("font-size", parsed.value)];
   }
   const hex = nativeHexColor(parsed, theme);
@@ -2026,6 +2133,13 @@ function nativeModifierState(modifier, theme, colorScheme, pressed, width) {
     const px = reduceConstantMath(`calc(${modifier.slice(5, -1).trim()})`);
     return px === null ? null : width <= px;
   }
+  const screen = (name) => Object.prototype.hasOwnProperty.call(theme.screens, name) ? theme.screens[name] : void 0;
+  const custom = screen(modifier);
+  if (typeof custom === "number") return width >= custom;
+  if (modifier.startsWith("max-")) {
+    const max = screen(modifier.slice(4));
+    if (typeof max === "number") return width < max;
+  }
   return null;
 }
 function kebabToCamel(s) {
@@ -2189,7 +2303,7 @@ function resolveStyleJsWithWarnings(classString, theme, colorScheme, pressed, wi
       if (d.property.startsWith("__")) {
         continue;
       }
-      if (d.property.startsWith("--") || d.value.includes("var(") || d.property === "outline" || d.property === "object-position" || d.property === "container-type") {
+      if (d.property.startsWith("--") || d.value.includes("var(") || d.property === "outline" || d.property === "object-position" || d.property === "container-type" || d.property === "container-name") {
         continue;
       }
       if (d.property === "shadow-offset-x" || d.property === "shadow-offset-y") {