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

package/dist/{chunk-23JJORPW.mjs → chunk-NPDSBCXR.mjs}

@@ -1,6 +1,6 @@
 import {
   getTheme
-} from "./chunk-Z5Q3FGXR.mjs";
+} from "./chunk-MLBH2JYH.mjs";
 
 // src/darkModeStore.ts
 import { Appearance } from "react-native";

package/dist/{chunk-HVGMZKV7.mjs → chunk-NXRSUBSY.mjs}

@@ -1,6 +1,6 @@
 import {
   resolveClassName
-} from "./chunk-Z5Q3FGXR.mjs";
+} from "./chunk-MLBH2JYH.mjs";
 
 // src/jsxRuntimeCoreWeb.ts
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/index.d.ts

@@ -1,8 +1,9 @@
 export { ColorEntry, ContainerConfig, ThemeConfig, defaultTheme, getTheme, setTheme } from './theme';
-export { C as ClassArray, a as ClassDictionary, b as ClassValue, c as ColorScale, d as ColorsAPI, K as KbachConfig, T as ThemeProvider, e as ThemeProviderProps, f as ThemeState, g as ThemeStorageAdapter, h as applyKbachConfig, i as clsx, r as resolveKbachConfig, u as useColors, j as useDynamicToken, k as useTheme } from './clsx-BLLSnqAa.js';
+export { B as Button, a as ButtonProps, C as ClassArray, b as ClassDictionary, c as ClassValue, d as ColorScale, e as ColorsAPI, H as H1, f as H2, g as H3, h as H4, i as H5, j as H6, k as HeadingProps, K as KbachConfig, P as Paragraph, l as ParagraphProps, T as ThemeProvider, m as ThemeProviderProps, n as ThemeState, o as ThemeStorageAdapter, p as applyKbachConfig, q as clsx, r as resolveKbachConfig, u as useColors, s as useDynamicToken, t as useTheme } from './semanticElements-Bk3TB-vt.js';
 export { ThemeMode, getGlobalDarkMode, getGlobalThemeMode, setGlobalThemeMode, subscribeGlobalDarkMode, toggleGlobalDarkMode } from './darkModeStore';
 export { deleteDynamicToken, getDynamicToken, setDynamicToken, subscribeDynamicTokens } from './dynamicTokens';
 import 'react';
+import 'react-native';
 
 type StyleValue = string | number | {
     width: number;

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,11 +17,27 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  Button: () => Button,
+  H1: () => H1,
+  H2: () => H2,
+  H3: () => H3,
+  H4: () => H4,
+  H5: () => H5,
+  H6: () => H6,
+  Paragraph: () => Paragraph,
   ThemeProvider: () => ThemeProvider,
   applyKbachConfig: () => applyKbachConfig,
   clsx: () => clsx,
@@ -184,11 +202,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-",
@@ -376,6 +398,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;
 }
@@ -418,6 +441,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;
   }
@@ -676,7 +700,7 @@ function resolveFlex(parsed, web) {
     case "shrink-0":
       return [decl("flex-shrink", "0")];
     default:
-      return null;
+      return /^\d+$/.test(value) ? [decl("flex", value)] : null;
   }
 }
 
@@ -920,8 +944,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":
@@ -932,12 +959,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":
@@ -960,6 +994,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")];
   }
@@ -969,7 +1012,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") {
@@ -987,7 +1030,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") {
@@ -1005,7 +1048,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") {
@@ -1052,20 +1095,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;
@@ -1088,48 +1118,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) {
@@ -1158,14 +1146,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);
@@ -1211,26 +1204,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) {
@@ -1294,8 +1271,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":
@@ -1345,6 +1328,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":
@@ -1358,6 +1351,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}`)];
     }
@@ -1370,6 +1364,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)];
     }
@@ -1814,6 +1809,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);
@@ -2179,8 +2177,42 @@ function resolveClassValue(value) {
   }
   return "";
 }
+
+// src/semanticElements.tsx
+var React = __toESM(require("react"));
+var import_react_native2 = require("react-native");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Button = React.forwardRef(function Button2(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Pressable, { ref, accessibilityRole: "button", ...props });
+});
+var PARAGRAPH_ROLE = "paragraph";
+var Paragraph = React.forwardRef(function Paragraph2(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { ref, role: PARAGRAPH_ROLE, ...props });
+});
+function makeHeading(level) {
+  const extra = { "aria-level": level };
+  const Heading = React.forwardRef(function Heading2(props, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.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);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Button,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  Paragraph,
   ThemeProvider,
   applyKbachConfig,
   clsx,

package/dist/index.web.d.ts

@@ -1,8 +1,9 @@
 export { ColorEntry, ContainerConfig, ThemeConfig, defaultTheme, getTheme, setTheme } from './theme';
-export { C as ClassArray, a as ClassDictionary, b as ClassValue, c as ColorScale, d as ColorsAPI, K as KbachConfig, T as ThemeProvider, e as ThemeProviderProps, f as ThemeState, h as applyKbachConfig, i as clsx, r as resolveKbachConfig, u as useColors, j as useDynamicToken, k as useTheme } from './clsx-BLLSnqAa.js';
+export { B as Button, a as ButtonProps, C as ClassArray, b as ClassDictionary, c as ClassValue, d as ColorScale, e as ColorsAPI, H as H1, f as H2, g as H3, h as H4, i as H5, j as H6, k as HeadingProps, K as KbachConfig, P as Paragraph, l as ParagraphProps, T as ThemeProvider, m as ThemeProviderProps, n as ThemeState, p as applyKbachConfig, q as clsx, r as resolveKbachConfig, u as useColors, s as useDynamicToken, t as useTheme } from './semanticElements-Bk3TB-vt.js';
 export { ThemeMode, getGlobalDarkMode, getGlobalThemeMode, setGlobalThemeMode, subscribeGlobalDarkMode, toggleGlobalDarkMode } from './darkModeStore';
 export { deleteDynamicToken, getDynamicToken, setDynamicToken, subscribeDynamicTokens } from './dynamicTokens';
 import 'react';
+import 'react-native';
 
 /**
  * Resolves `classString` to CSS via the WASM engine, injects every returned