@kbach/react-native 1.0.0-beta.4 → 1.0.0-beta.41

package/dist/index.web.mjs

@@ -1,32 +1,286 @@
 import {
-  ThemeProvider,
-  useGlobalDarkMode,
-  useTheme
-} from "./chunk-4KCCEMEN.mjs";
-import {
-  resolveStyle
-} from "./chunk-KSDFO34H.mjs";
-import {
-  defaultTheme,
+  deleteDynamicToken,
+  getDynamicToken,
   getGlobalDarkMode,
   getGlobalThemeMode,
-  getTheme,
+  resyncDomWithActiveTheme,
+  seedDefaultMode,
+  setDynamicToken,
   setGlobalThemeMode,
-  setTheme,
+  subscribeDynamicTokens,
   subscribeGlobalDarkMode,
   toggleGlobalDarkMode
-} from "./chunk-AEVOM2NB.mjs";
+} from "./chunk-YYCSHELO.mjs";
+import {
+  defaultTheme,
+  getTheme,
+  resolveClassName,
+  setTheme
+} from "./chunk-A3PV4XGK.mjs";
+
+// src/config.ts
+function parseHexRgb(hex) {
+  const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return null;
+  let h = m[1];
+  if (h.length === 3) h = h.split("").map((c) => c + c).join("");
+  const n = parseInt(h, 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+}
+function applyOpacityToHex(hex, opacityText) {
+  const rgb = parseHexRgb(hex);
+  if (!rgb) return hex;
+  const a = Number(opacityText) / 100;
+  const clamped = Number.isFinite(a) ? Math.min(1, Math.max(0, a)) : 1;
+  return `rgba(${rgb.join(",")},${clamped})`;
+}
+function resolveColorEntry(value, lookup) {
+  const slash = value.indexOf("/");
+  const name = slash === -1 ? value : value.slice(0, slash);
+  const opacity = slash === -1 ? void 0 : value.slice(slash + 1);
+  const base = lookup(name);
+  if (base === void 0) return value;
+  return opacity === void 0 ? base : applyOpacityToHex(base, opacity);
+}
+function resolveColors(extend, existing) {
+  const { dark: darkExtend, ...lightExtend } = extend;
+  const resolvedLight = {};
+  const lookupLight = (name) => {
+    const found = resolvedLight[name] ?? existing[name];
+    return typeof found === "string" ? found : void 0;
+  };
+  for (const [name, value] of Object.entries(lightExtend)) {
+    if (typeof value !== "string") continue;
+    resolvedLight[name] = resolveColorEntry(value, lookupLight);
+  }
+  const result = { ...resolvedLight };
+  if (darkExtend) {
+    const resolvedDark = {};
+    const lookupDark = (name) => {
+      const found = resolvedDark[name] ?? existing[name];
+      return typeof found === "string" ? found : void 0;
+    };
+    for (const [name, value] of Object.entries(darkExtend)) {
+      resolvedDark[name] = resolveColorEntry(value, lookupDark);
+    }
+    for (const [name, darkValue] of Object.entries(resolvedDark)) {
+      const lightValue = resolvedLight[name];
+      if (lightValue === void 0) continue;
+      result[name] = { light: lightValue, dark: darkValue };
+    }
+  }
+  return result;
+}
+function resolveKbachConfig(config) {
+  let theme = { ...defaultTheme, ...config.theme };
+  if (config.extend?.colors) {
+    theme = { ...theme, colors: { ...theme.colors, ...resolveColors(config.extend.colors, theme.colors) } };
+  }
+  if (config.extend?.spacing) {
+    theme = { ...theme, spacing: { ...theme.spacing, ...config.extend.spacing } };
+  }
+  if (config.extend?.screens) {
+    theme = { ...theme, screens: { ...theme.screens, ...config.extend.screens } };
+  }
+  if (config.extend?.fontFamily) {
+    theme = { ...theme, fontFamily: { ...theme.fontFamily, ...config.extend.fontFamily } };
+  }
+  if (config.extend?.container) {
+    theme = { ...theme, container: { ...theme.container, ...config.extend.container } };
+  }
+  if (config.darkMode) {
+    theme = { ...theme, darkMode: config.darkMode };
+  }
+  return theme;
+}
+function applyKbachConfig(config) {
+  const theme = resolveKbachConfig(config);
+  setTheme(theme);
+  resyncDomWithActiveTheme();
+  return theme;
+}
+
+// src/useTheme.ts
+import { useMemo, useSyncExternalStore } from "react";
+function useTheme() {
+  const isDark = useSyncExternalStore(subscribeGlobalDarkMode, getGlobalDarkMode);
+  const mode = useSyncExternalStore(subscribeGlobalDarkMode, getGlobalThemeMode);
+  return useMemo(
+    () => ({ mode, isDark, setMode: setGlobalThemeMode, toggle: toggleGlobalDarkMode }),
+    [mode, isDark]
+  );
+}
+
+// src/ThemeProvider.tsx
+import { useEffect, useRef } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+var PERSIST_STORAGE_KEY = "kbach-theme";
+function isThemeMode(value) {
+  return value === "light" || value === "dark" || value === "system";
+}
+var mountedProviderCount = 0;
+var warnedMultipleProviders = false;
+function ThemeProvider({ children, defaultMode = "system", persist = false }) {
+  useEffect(() => {
+    mountedProviderCount++;
+    if (mountedProviderCount > 1 && !warnedMultipleProviders) {
+      warnedMultipleProviders = true;
+      console.warn(
+        "[Kbach] Multiple <ThemeProvider> instances are mounted at once.\nDark mode is one global store \u2014 useTheme() reads it everywhere, not scoped per provider \u2014 so their defaultMode/persist seeds will fight over the same state.\nMount exactly one <ThemeProvider>, as high in the tree as convenient."
+      );
+    }
+    return () => {
+      mountedProviderCount--;
+    };
+  }, []);
+  const seeded = useRef(false);
+  useEffect(() => {
+    if (seeded.current) return;
+    seeded.current = true;
+    if (!persist) {
+      seedDefaultMode(defaultMode);
+      return;
+    }
+    let cancelled = false;
+    persist.getItem(PERSIST_STORAGE_KEY).then((stored) => {
+      if (cancelled) return;
+      if (isThemeMode(stored)) seedDefaultMode(stored);
+      else seedDefaultMode(defaultMode);
+    }).catch(() => {
+      if (!cancelled) seedDefaultMode(defaultMode);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  useEffect(() => {
+    if (!persist) return;
+    return subscribeGlobalDarkMode(() => {
+      persist.setItem(PERSIST_STORAGE_KEY, getGlobalThemeMode()).catch(() => {
+      });
+    });
+  }, [persist]);
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+
+// src/useColors.ts
+import { useMemo as useMemo2 } from "react";
+function parseHexRgb2(hex) {
+  const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return null;
+  let h = m[1];
+  if (h.length === 3) h = h.split("").map((c) => c + c).join("");
+  const n = parseInt(h, 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+}
+function applyOpacity(color, opacity) {
+  const a = Math.max(0, Math.min(1, opacity / 100));
+  if (color.startsWith("#")) {
+    const rgb = parseHexRgb2(color);
+    return rgb ? `rgba(${rgb.join(",")},${a})` : color;
+  }
+  if (color.startsWith("rgb(")) return color.replace("rgb(", "rgba(").replace(")", `,${a})`);
+  if (color.startsWith("rgba(")) return color.replace(/,\s*[\d.]+\)$/, `,${a})`);
+  return color;
+}
+function resolveEntry(entry, isDark) {
+  return typeof entry === "string" ? entry : isDark ? entry.dark : entry.light;
+}
+function makeColorsProxy(theme, isDark) {
+  const alpha = (color, opacity) => opacity === void 0 ? color : applyOpacity(color, opacity);
+  const cache = /* @__PURE__ */ new Map();
+  function resolveNamed(key) {
+    let name = key;
+    let opacity;
+    if (key.includes("/")) {
+      const slash = key.indexOf("/");
+      name = key.slice(0, slash);
+      opacity = Number(key.slice(slash + 1));
+    }
+    const entry = theme.colors[name];
+    if (entry === void 0) return void 0;
+    const value = resolveEntry(entry, isDark);
+    return opacity === void 0 ? value : applyOpacity(value, opacity);
+  }
+  function makeFamilyProxy(family) {
+    return new Proxy({}, {
+      get(_, prop) {
+        const key = String(prop);
+        if (key === "then") return void 0;
+        return resolveNamed(`${family}-${key}`);
+      }
+    });
+  }
+  const get = (name) => resolveNamed(name) ?? name;
+  return new Proxy({ alpha, get }, {
+    get(_, prop) {
+      const key = String(prop);
+      if (key === "then") return void 0;
+      if (key === "alpha") return alpha;
+      if (key === "get") return get;
+      const direct = resolveNamed(key);
+      if (direct !== void 0) return direct;
+      if (!cache.has(key)) cache.set(key, makeFamilyProxy(key));
+      return cache.get(key);
+    }
+  });
+}
+function useColors() {
+  const { isDark } = useTheme();
+  const theme = getTheme();
+  return useMemo2(() => makeColorsProxy(theme, isDark), [theme, isDark]);
+}
+
+// src/useDynamicToken.ts
+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,
   getGlobalDarkMode,
   getGlobalThemeMode,
   getTheme,
-  resolveStyle,
+  resolveClassName,
+  resolveKbachConfig,
+  setDynamicToken,
   setGlobalThemeMode,
   setTheme,
+  subscribeDynamicTokens,
   subscribeGlobalDarkMode,
   toggleGlobalDarkMode,
-  useGlobalDarkMode,
+  useColors,
+  useDynamicToken,
   useTheme
 };