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

package/dist/{chunk-GHQ7DWLO.mjs → chunk-Q2L7M7FC.mjs}

@@ -1,6 +1,6 @@
 import {
   resolveClassName
-} from "./chunk-BEXNFWW6.mjs";
+} from "./chunk-B36TKRB6.mjs";
 
 // src/jsxRuntimeCoreWeb.ts
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -18,7 +18,7 @@ function processElement(resolveClassName2, type, rawProps, key, isStaticChildren
   }
   const resolved = resolveClassName2(classStrRaw);
   const dataSet = { ...userDataSet, kb: resolved };
-  return makeElement(isStaticChildren, type, { ...rest, dataSet }, key);
+  return makeElement(isStaticChildren, type, { ...rest, className: classStrRaw, dataSet }, key);
 }
 function createJsxFunctionsWeb(resolveClassName2) {
   function jsx2(type, props, key) {

package/dist/{useDynamicToken-C8T9r6Cl.d.ts → clsx-BCXALPGh.d.ts}

@@ -194,4 +194,46 @@ declare function useColors(): ColorsAPI;
  */
 declare function useDynamicToken(name: string): string | undefined;
 
-export { type ColorScale as C, type KbachConfig as K, ThemeProvider as T, type ColorsAPI as a, type ThemeProviderProps as b, type ThemeState as c, type ThemeStorageAdapter as d, applyKbachConfig as e, useDynamicToken as f, useTheme as g, resolveKbachConfig as r, useColors as u };
+/**
+ * A tiny class-name composer — combine strings, arrays, and objects (with
+ * boolean values) into one space-separated className, skipping anything
+ * falsy. Matches the widely-used `clsx` npm package's public API and
+ * behavior exactly (a from-scratch reimplementation, not a fork or a thin
+ * wrapper around it) — this package ships its own copy so using it adds
+ * zero runtime dependencies, and so it works identically whether or not
+ * `clsx`/`classnames` happens to already be installed.
+ *
+ * Kbach class strings never NEED this — a Kbach `className` is just a
+ * plain string, composable with plain JS (`"bg-" + color + "-6"`,
+ * `[base, active && "opacity-100"].join(" ")`, see this package's own
+ * README) with no special API required. This exists purely as an
+ * ergonomic convenience for the common "several conditional classes on one
+ * element" shape, for anyone who'd rather write it declaratively:
+ *
+ * ```ts
+ * clsx("px-4 py-2", isActive && "bg-blue-6", { "opacity-50": disabled });
+ * // "px-4 py-2 bg-blue-6" (when isActive is true and disabled is false)
+ * ```
+ *
+ * Identical to `@kbach/react`'s own `clsx.ts` — deliberately duplicated
+ * rather than factored into a shared package, since this is genuinely all
+ * there is to it and a whole extra published package for one ~20-line
+ * function would be more ceremony than the thing itself.
+ */
+/** Anything `clsx` accepts as one argument — recursively, for arrays. */
+type ClassValue = ClassArray | ClassDictionary | string | number | bigint | boolean | null | undefined;
+/** A key is kept (as a literal class name) only when its value is truthy — `{ "opacity-50": disabled }`. */
+interface ClassDictionary {
+    [className: string]: unknown;
+}
+type ClassArray = ClassValue[];
+/**
+ * Joins every truthy piece across all arguments with a single space,
+ * skipping falsy values (`false`, `null`, `undefined`, `0`, `""`, `NaN`)
+ * entirely — they contribute nothing, not even an extra space. Arrays are
+ * flattened (recursively, to any depth); a plain object keeps only the
+ * keys whose value is truthy.
+ */
+declare function clsx(...inputs: ClassValue[]): string;
+
+export { type ClassArray as C, type KbachConfig as K, ThemeProvider as T, type ClassDictionary as a, type ClassValue as b, type ColorScale as c, type ColorsAPI as d, type ThemeProviderProps as e, type ThemeState as f, type ThemeStorageAdapter as g, applyKbachConfig as h, clsx as i, useDynamicToken as j, useTheme as k, resolveKbachConfig as r, useColors as u };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { ColorEntry, ContainerConfig, ThemeConfig, defaultTheme, getTheme, setTheme } from './theme';
-export { C as ColorScale, a as ColorsAPI, K as KbachConfig, T as ThemeProvider, b as ThemeProviderProps, c as ThemeState, d as ThemeStorageAdapter, e as applyKbachConfig, r as resolveKbachConfig, u as useColors, f as useDynamicToken, g as useTheme } from './useDynamicToken-C8T9r6Cl.js';
+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-BCXALPGh.js';
 export { ThemeMode, getGlobalDarkMode, getGlobalThemeMode, setGlobalThemeMode, subscribeGlobalDarkMode, toggleGlobalDarkMode } from './darkModeStore';
 export { deleteDynamicToken, getDynamicToken, setDynamicToken, subscribeDynamicTokens } from './dynamicTokens';
 import 'react';

package/dist/index.js

@@ -22,6 +22,7 @@ var src_exports = {};
 __export(src_exports, {
   ThemeProvider: () => ThemeProvider,
   applyKbachConfig: () => applyKbachConfig,
+  clsx: () => clsx,
   defaultTheme: () => import_theme4.defaultTheme,
   deleteDynamicToken: () => import_dynamicTokens2.deleteDynamicToken,
   getDynamicToken: () => import_dynamicTokens2.getDynamicToken,
@@ -333,7 +334,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);
@@ -1954,10 +1958,37 @@ var import_dynamicTokens = require("./dynamicTokens");
 function useDynamicToken(name) {
   return (0, import_react4.useSyncExternalStore)(import_dynamicTokens.subscribeDynamicTokens, () => (0, import_dynamicTokens.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 "";
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ThemeProvider,
   applyKbachConfig,
+  clsx,
   defaultTheme,
   deleteDynamicToken,
   getDynamicToken,

package/dist/index.web.d.ts

@@ -1,5 +1,5 @@
 export { ColorEntry, ContainerConfig, ThemeConfig, defaultTheme, getTheme, setTheme } from './theme';
-export { C as ColorScale, a as ColorsAPI, K as KbachConfig, T as ThemeProvider, b as ThemeProviderProps, c as ThemeState, e as applyKbachConfig, r as resolveKbachConfig, u as useColors, f as useDynamicToken, g as useTheme } from './useDynamicToken-C8T9r6Cl.js';
+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-BCXALPGh.js';
 export { ThemeMode, getGlobalDarkMode, getGlobalThemeMode, setGlobalThemeMode, subscribeGlobalDarkMode, toggleGlobalDarkMode } from './darkModeStore';
 export { deleteDynamicToken, getDynamicToken, setDynamicToken, subscribeDynamicTokens } from './dynamicTokens';
 import 'react';