@kbach/react-native 1.0.0-beta.3 → 1.0.0-beta.31

package/dist/index.web.mjs

@@ -0,0 +1,266 @@
+import {
+  deleteDynamicToken,
+  getDynamicToken,
+  getGlobalDarkMode,
+  getGlobalThemeMode,
+  resyncDomWithActiveTheme,
+  seedDefaultMode,
+  setDynamicToken,
+  setGlobalThemeMode,
+  subscribeDynamicTokens,
+  subscribeGlobalDarkMode,
+  toggleGlobalDarkMode
+} from "./chunk-XPVSILI4.mjs";
+import {
+  defaultTheme,
+  getTheme,
+  resolveClassName,
+  setTheme
+} from "./chunk-ZYE4VIZE.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 resolved = {};
+  const lookup = (name) => {
+    const found = resolved[name] ?? existing[name];
+    return typeof found === "string" ? found : void 0;
+  };
+  for (const [name, value] of Object.entries(extend)) {
+    resolved[name] = resolveColorEntry(value, lookup);
+  }
+  return resolved;
+}
+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}`);
+      }
+    });
+  }
+  return new Proxy({ alpha }, {
+    get(_, prop) {
+      const key = String(prop);
+      if (key === "then") return void 0;
+      if (key === "alpha") return alpha;
+      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,
+  resolveClassName,
+  resolveKbachConfig,
+  setDynamicToken,
+  setGlobalThemeMode,
+  setTheme,
+  subscribeDynamicTokens,
+  subscribeGlobalDarkMode,
+  toggleGlobalDarkMode,
+  useColors,
+  useDynamicToken,
+  useTheme
+};

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

@@ -1,19 +1,10 @@
-import { ReactElement } from 'react';
+import * as react from 'react';
 export { Fragment } from 'react';
 
-/**
- * @kbach/react-native/jsx-dev-runtime
- *
- * Development variant — Metro calls jsxDEV instead of jsx/jsxs in dev
- * builds. Same pattern as @kbach/react/jsx-dev-runtime (Phase 3): reuses
- * jsx/jsxs for the actual interception, then patches _source/_self onto
- * the result so React DevTools shows the original file/line.
- */
-
-declare function jsxDEV(type: unknown, props: Record<string, unknown> | null, key?: string, isStaticChildren?: boolean, source?: {
+declare const jsxDEV: (type: unknown, props: Record<string, unknown> | null, key?: string, isStaticChildren?: boolean, source?: {
     fileName: string;
     lineNumber: number;
     columnNumber: number;
-}, self?: unknown): ReactElement;
+}, self?: unknown) => react.ReactElement;
 
 export { jsxDEV };