@kbach/react-native 1.0.0-beta.27 → 1.0.0-beta.29

package/dist/index.web.mjs

@@ -10,13 +10,13 @@ import {
   subscribeDynamicTokens,
   subscribeGlobalDarkMode,
   toggleGlobalDarkMode
-} from "./chunk-MXIT3EDJ.mjs";
+} from "./chunk-2RXP6YSV.mjs";
 import {
   defaultTheme,
   getTheme,
   resolveClassName,
   setTheme
-} from "./chunk-BEXNFWW6.mjs";
+} from "./chunk-B36TKRB6.mjs";
 
 // src/config.ts
 function parseHexRgb(hex) {
@@ -216,9 +216,36 @@ import { useSyncExternalStore as useSyncExternalStore2 } from "react";
 function useDynamicToken(name) {
   return useSyncExternalStore2(subscribeDynamicTokens, () => getDynamicToken(name));
 }
+
+// src/clsx.ts
+function clsx(...inputs) {
+  let out = "";
+  for (const input of inputs) {
+    const piece = resolveClassValue(input);
+    if (piece) out = out ? `${out} ${piece}` : piece;
+  }
+  return out;
+}
+function resolveClassValue(value) {
+  if (!value) return "";
+  const type = typeof value;
+  if (type === "string" || type === "number" || type === "bigint") return String(value);
+  if (Array.isArray(value)) return clsx(...value);
+  if (type === "object") {
+    let out = "";
+    for (const key in value) {
+      if (Object.prototype.hasOwnProperty.call(value, key) && value[key]) {
+        out = out ? `${out} ${key}` : key;
+      }
+    }
+    return out;
+  }
+  return "";
+}
 export {
   ThemeProvider,
   applyKbachConfig,
+  clsx,
   defaultTheme,
   deleteDynamicToken,
   getDynamicToken,

package/dist/jsx-dev-runtime.js

@@ -653,7 +653,12 @@ 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);
-  return makeElement(isStaticChildren, hostType, { ...hostRestWithLayout, style: finalStyle }, elementKey);
+  return makeElement(
+    isStaticChildren,
+    hostType,
+    { ...hostRestWithLayout, className: classStrRaw, style: finalStyle },
+    elementKey
+  );
 }
 function processElement(resolveStyle2, type, rawProps, key, isStaticChildren) {
   if (type === null || typeof type === "symbol" || !rawProps) {
@@ -672,7 +677,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);
-  return makeElement(isStaticChildren, type, { ...rest, style: finalStyle }, key);
+  return makeElement(isStaticChildren, type, { ...rest, className: classStrRaw, style: finalStyle }, key);
 }
 function createJsxFunctions(resolveStyle2) {
   function jsx2(type, props, key) {
@@ -721,7 +726,10 @@ function resolveLength(theme, parsed) {
 }
 function resolveNegatableLength(theme, parsed) {
   if (!parsed.negative) return resolveLength(theme, parsed);
-  if (parsed.isArbitrary) return null;
+  if (parsed.isArbitrary) {
+    const value2 = parsed.value;
+    return value2 === null ? null : `calc(${value2} * -1)`;
+  }
   const value = parsed.value;
   if (value === null) return null;
   const px = spacingPx(theme, value);