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

package/dist/index.web.mjs

@@ -10,13 +10,13 @@ import {
   subscribeDynamicTokens,
   subscribeGlobalDarkMode,
   toggleGlobalDarkMode
-} from "./chunk-23JJORPW.mjs";
+} from "./chunk-NPDSBCXR.mjs";
 import {
   defaultTheme,
   getTheme,
   resolveClassName,
   setTheme
-} from "./chunk-Z5Q3FGXR.mjs";
+} from "./chunk-MLBH2JYH.mjs";
 
 // src/config.ts
 function parseHexRgb(hex) {
@@ -262,7 +262,41 @@ function resolveClassValue(value) {
   }
   return "";
 }
+
+// src/semanticElements.tsx
+import * as React from "react";
+import { Pressable, Text } from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Button = React.forwardRef(function Button2(props, ref) {
+  return /* @__PURE__ */ jsx2(Pressable, { ref, accessibilityRole: "button", ...props });
+});
+var PARAGRAPH_ROLE = "paragraph";
+var Paragraph = React.forwardRef(function Paragraph2(props, ref) {
+  return /* @__PURE__ */ jsx2(Text, { ref, role: PARAGRAPH_ROLE, ...props });
+});
+function makeHeading(level) {
+  const extra = { "aria-level": level };
+  const Heading = React.forwardRef(function Heading2(props, ref) {
+    return /* @__PURE__ */ jsx2(Text, { ref, accessibilityRole: "header", ...extra, ...props });
+  });
+  Heading.displayName = `H${level}`;
+  return Heading;
+}
+var H1 = makeHeading(1);
+var H2 = makeHeading(2);
+var H3 = makeHeading(3);
+var H4 = makeHeading(4);
+var H5 = makeHeading(5);
+var H6 = makeHeading(6);
 export {
+  Button,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  Paragraph,
   ThemeProvider,
   applyKbachConfig,
   clsx,

package/dist/jsx-dev-runtime.d.ts

@@ -1,10 +1,10 @@
-import * as react from 'react';
+import * as React from 'react';
 export { Fragment } from 'react';
 
 declare const jsxDEV: (type: unknown, props: Record<string, unknown> | null, key?: string, isStaticChildren?: boolean, source?: {
     fileName: string;
     lineNumber: number;
     columnNumber: number;
-}, self?: unknown) => react.ReactElement;
+}, self?: unknown) => React.ReactElement;
 
 export { jsxDEV };

package/dist/jsx-dev-runtime.js

@@ -563,11 +563,15 @@ var VALUE_PREFIXES = [
   "rotate-y-",
   "rotate-z-",
   "rotate-",
+  // Bare 'translate-'/'skew-' (both axes) after their per-axis forms, same
+  // longer-before-shorter rule as resolvers/parser.rs.
   "translate-x-",
   "translate-y-",
   "translate-z-",
+  "translate-",
   "skew-x-",
   "skew-y-",
+  "skew-",
   "perspective-origin-",
   "perspective-",
   "origin-",
@@ -992,6 +996,7 @@ function decl(property, value) {
 function spacingPx(theme, value) {
   const fromTable = theme.spacing[value];
   if (fromTable !== void 0) return fromTable;
+  if (value === "px") return 1;
   const n = Number(value);
   return Number.isFinite(n) && value.trim() !== "" ? n * 4 : void 0;
 }
@@ -1034,6 +1039,7 @@ function fractionPercent(value) {
 }
 function resolveNegatableSize(theme, parsed) {
   if (!parsed.isArbitrary && parsed.value !== null) {
+    if (parsed.negative && parsed.value === "full") return "-100%";
     const pct = fractionPercent(parsed.value);
     if (pct !== null) return parsed.negative ? `-${pct}` : pct;
   }
@@ -1292,7 +1298,7 @@ function resolveFlex(parsed, web) {
     case "shrink-0":
       return [decl("flex-shrink", "0")];
     default:
-      return null;
+      return /^\d+$/.test(value) ? [decl("flex", value)] : null;
   }
 }
 
@@ -1465,8 +1471,11 @@ function radiusSize(key) {
   switch (key) {
     case "none":
       return "0px";
-    case "sm":
+    // Tailwind v4.3's radius scale: `sm` is 0.25rem (v3's 0.125rem is `xs`).
+    case "xs":
       return "0.125rem";
+    case "sm":
+      return "0.25rem";
     case "md":
       return "0.375rem";
     case "lg":
@@ -1477,12 +1486,19 @@ function radiusSize(key) {
       return "1rem";
     case "3xl":
       return "1.5rem";
+    case "4xl":
+      return "2rem";
     case "full":
       return "9999px";
     default:
       return null;
   }
 }
+function borderWidthPx(parsed) {
+  if (parsed.negative || parsed.isArbitrary || parsed.value === null) return null;
+  const n = Number(parsed.value);
+  return Number.isFinite(n) && n >= 0 && parsed.value.trim() !== "" ? `${n}px` : null;
+}
 function borderSideProperty(side) {
   switch (side) {
     case "t":
@@ -1505,6 +1521,15 @@ function borderValue(theme, parsed) {
     if (side !== null) {
       return [decl(`${side}-width`, "1px"), decl(`${side}-style`, "solid")];
     }
+    const pair = value === "x" ? ["border-left", "border-right"] : value === "y" ? ["border-top", "border-bottom"] : null;
+    if (pair !== null) {
+      return [
+        decl(`${pair[0]}-width`, "1px"),
+        decl(`${pair[1]}-width`, "1px"),
+        decl(`${pair[0]}-style`, "solid"),
+        decl(`${pair[1]}-style`, "solid")
+      ];
+    }
     if (value === "collapse") return [decl("border-collapse", "collapse")];
     if (value === "separate") return [decl("border-collapse", "separate")];
   }
@@ -1514,7 +1539,7 @@ function borderValue(theme, parsed) {
     return color2 === null ? null : [decl("border-color", color2)];
   }
   if (Number.isFinite(Number(value)) && value.trim() !== "") {
-    const v = resolveLength(theme, parsed);
+    const v = borderWidthPx(parsed);
     return v === null ? null : [decl("border-width", v)];
   }
   if (value === "solid" || value === "dashed" || value === "dotted" || value === "double" || value === "hidden" || value === "none") {
@@ -1532,7 +1557,7 @@ function borderSideValue(theme, parsed, sideProperty) {
     return color2 === null ? null : [decl(`${sideProperty}-color`, color2)];
   }
   if (Number.isFinite(Number(value)) && value.trim() !== "") {
-    const v = resolveLength(theme, parsed);
+    const v = borderWidthPx(parsed);
     return v === null ? null : [decl(`${sideProperty}-width`, v)];
   }
   if (value === "solid" || value === "dashed" || value === "dotted" || value === "double" || value === "hidden" || value === "none") {
@@ -1550,7 +1575,7 @@ function borderAxisValue(theme, parsed, sideA, sideB) {
     return color2 === null ? null : [decl(`${sideA}-color`, color2), decl(`${sideB}-color`, color2)];
   }
   if (Number.isFinite(Number(value)) && value.trim() !== "") {
-    const v = resolveLength(theme, parsed);
+    const v = borderWidthPx(parsed);
     return v === null ? null : [decl(`${sideA}-width`, v), decl(`${sideB}-width`, v)];
   }
   if (value === "solid" || value === "dashed" || value === "dotted" || value === "double" || value === "hidden" || value === "none") {
@@ -1597,20 +1622,7 @@ function resolveRadiusSide(theme, parsed, side) {
 }
 var OUTLINE_STYLES = ["solid", "dashed", "dotted", "double"];
 function outlineWidthValue(key) {
-  switch (key) {
-    case "0":
-      return "0px";
-    case "1":
-      return "1px";
-    case "2":
-      return "2px";
-    case "4":
-      return "4px";
-    case "8":
-      return "8px";
-    default:
-      return null;
-  }
+  return /^\d+$/.test(key) ? `${Number(key)}px` : null;
 }
 function outlineValue(theme, parsed) {
   const value = parsed.value;
@@ -1633,48 +1645,6 @@ function outlineOffsetValue(parsed) {
   const w = outlineWidthValue(value);
   return w === null ? null : [decl("outline-offset", w)];
 }
-var RING_BOX_SHADOW = "var(--kb-ring-inset,) 0 0 0 var(--kb-ring-offset-width, 0px) var(--kb-ring-offset-color, #fff), var(--kb-ring-inset,) 0 0 0 calc(var(--kb-ring-width, 0px) + var(--kb-ring-offset-width, 0px)) var(--kb-ring-color, rgba(59,130,246,0.5))";
-function ringWidth(key) {
-  switch (key) {
-    case "0":
-      return "0px";
-    case "1":
-      return "1px";
-    case "2":
-      return "2px";
-    case "4":
-      return "4px";
-    case "8":
-      return "8px";
-    default:
-      return null;
-  }
-}
-function ringValue(theme, parsed) {
-  const value = parsed.value;
-  if (value === null) return null;
-  if (value === "inset") {
-    return [decl("--kb-ring-inset", "inset"), decl("box-shadow", RING_BOX_SHADOW)];
-  }
-  if (!parsed.isArbitrary) {
-    const w = ringWidth(value);
-    if (w !== null) return [decl("--kb-ring-width", w), decl("box-shadow", RING_BOX_SHADOW)];
-  }
-  const color = colorValue(theme, parsed);
-  if (color === null) return null;
-  return [decl("--kb-ring-color", color), decl("box-shadow", RING_BOX_SHADOW)];
-}
-function ringOffsetValue(theme, parsed) {
-  const value = parsed.value;
-  if (value === null) return null;
-  if (!parsed.isArbitrary) {
-    const w = ringWidth(value);
-    if (w !== null) return [decl("--kb-ring-offset-width", w), decl("box-shadow", RING_BOX_SHADOW)];
-  }
-  const color = colorValue(theme, parsed);
-  if (color === null) return null;
-  return [decl("--kb-ring-offset-color", color), decl("box-shadow", RING_BOX_SHADOW)];
-}
 var RADIUS_SIDES = /* @__PURE__ */ new Set(["t", "r", "b", "l", "tl", "tr", "br", "bl"]);
 function resolve3(parsed, theme) {
   switch (parsed.utility) {
@@ -1703,14 +1673,19 @@ function resolve3(parsed, theme) {
       const v = resolveLength(theme, parsed);
       return v === null ? null : [decl("border-radius", v)];
     }
+    // Rings are web-only (a var()-composed CSS box-shadow React Native can't
+    // parse) — same as resolvers/mod.rs's native dispatcher.
     case "ring":
-      if (parsed.value === null) return [decl("--kb-ring-width", "3px"), decl("box-shadow", RING_BOX_SHADOW)];
-      return ringValue(theme, parsed);
     case "ring-offset":
-      return ringOffsetValue(theme, parsed);
+      return null;
+    // Outlines: the same final native style the Rust engine produces once
+    // its var()-based web declarations are filtered out (resolve_style.rs):
+    // bare `outline` is a 1px width, `outline-none` is outline-style: none,
+    // `outline-hidden` keeps only its offset (RN has no `outline` shorthand).
     case "outline":
-      if (parsed.value === null) return [decl("outline-style", "solid")];
-      if (parsed.value === "none") return [decl("outline", "none")];
+      if (parsed.value === null) return [decl("outline-width", "1px")];
+      if (parsed.value === "none") return [decl("outline-style", "none")];
+      if (!parsed.isArbitrary && parsed.value === "hidden") return [decl("outline-offset", "2px")];
       return outlineValue(theme, parsed);
     case "outline-offset":
       return outlineOffsetValue(parsed);
@@ -1756,26 +1731,10 @@ function textSize(key) {
   }
 }
 function lineHeightSize(key) {
-  switch (key) {
-    case "3":
-      return "0.75rem";
-    case "4":
-      return "1rem";
-    case "5":
-      return "1.25rem";
-    case "6":
-      return "1.5rem";
-    case "7":
-      return "1.75rem";
-    case "8":
-      return "2rem";
-    case "9":
-      return "2.25rem";
-    case "10":
-      return "2.5rem";
-    default:
-      return null;
-  }
+  if (key === "px") return "1px";
+  if (key.trim() === "") return null;
+  const n = Number(key);
+  return Number.isFinite(n) && n >= 0 ? `${n * 0.25}rem` : null;
 }
 function textAlign(key) {
   switch (key) {
@@ -1839,8 +1798,14 @@ function fontFamilyValue(theme, key) {
 // src/jsEngine/resolvers/effects.ts
 function nativeShadowValue(key) {
   switch (key) {
-    case "sm":
+    // Tailwind v4.3's scale, like effects.rs: `sm` is the default shadow,
+    // v3's `sm` is `xs`.
+    case "2xs":
+      return { offsetY: 1, radius: 0, opacity: 0.05, elevation: 1 };
+    case "xs":
       return { offsetY: 1, radius: 2, opacity: 0.05, elevation: 1 };
+    case "sm":
+      return { offsetY: 1, radius: 3, opacity: 0.1, elevation: 2 };
     case "DEFAULT":
       return { offsetY: 1, radius: 3, opacity: 0.1, elevation: 2 };
     case "md":
@@ -1890,6 +1855,16 @@ function resolveNative(parsed, theme) {
   switch (parsed.utility) {
     case "transform-none":
       return [decl("transform-op-none", "1")];
+    // Both axes at once (`translate-4`, `-skew-3`); mirrors transform.rs.
+    case "translate": {
+      if (!parsed.isArbitrary && parsed.value === "none") return [decl("transform-op-translate-x", "0"), decl("transform-op-translate-y", "0")];
+      const v = resolveNegatableSize(theme, parsed);
+      return v === null ? null : [decl("transform-op-translate-x", v), decl("transform-op-translate-y", v)];
+    }
+    case "skew": {
+      const deg = angle(parsed);
+      return deg === null ? null : [decl("transform-op-skew-x", deg), decl("transform-op-skew-y", deg)];
+    }
     case "backface-visible":
       return [decl("backface-visibility", "visible")];
     case "backface-hidden":
@@ -1903,6 +1878,7 @@ function resolveNative(parsed, theme) {
       return v === null ? null : [decl("transform-op-translate-y", v)];
     }
     case "scale": {
+      if (!parsed.isArbitrary && parsed.value === "none") return [decl("transform-op-scale-x", "1"), decl("transform-op-scale-y", "1")];
       const n = scaleFactor(parsed);
       return n === null ? null : [decl("transform-op-scale-x", `${n}`), decl("transform-op-scale-y", `${n}`)];
     }
@@ -1915,6 +1891,7 @@ function resolveNative(parsed, theme) {
       return n === null ? null : [decl("transform-op-scale-y", `${n}`)];
     }
     case "rotate": {
+      if (!parsed.isArbitrary && parsed.value === "none") return [decl("transform-op-rotate", "0deg")];
       const deg = angle(parsed);
       return deg === null ? null : [decl("transform-op-rotate", deg)];
     }
@@ -2212,6 +2189,9 @@ 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") {
+        continue;
+      }
       if (d.property === "shadow-offset-x" || d.property === "shadow-offset-y") {
         if (spec < (keySpecificity.get("shadowOffset") ?? 0)) continue;
         const n = Number(d.value);

package/dist/jsx-dev-runtime.web.d.ts

@@ -1,10 +1,10 @@
-import * as react from 'react';
+import * as React from 'react';
 export { Fragment } from 'react';
 
 declare const jsxDEV: (type: unknown, props: Record<string, unknown> | null, key?: string, isStaticChildren?: boolean, source?: {
     fileName: string;
     lineNumber: number;
     columnNumber: number;
-}, self?: unknown) => react.ReactElement;
+}, self?: unknown) => React.ReactElement;
 
 export { jsxDEV };