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

package/dist/chunk-OJQAJLYT.mjs

@@ -0,0 +1,14 @@
+import {
+  resolveStyle
+} from "./chunk-FG5E4NLJ.mjs";
+import {
+  createJsxFunctions
+} from "./chunk-DLIXI5OW.mjs";
+
+// src/jsx-runtime.tsx
+var { jsx, jsxs } = createJsxFunctions(resolveStyle);
+
+export {
+  jsx,
+  jsxs
+};

package/dist/chunk-ZUE6SCTE.mjs

@@ -0,0 +1,14 @@
+import {
+  resolveStyle
+} from "./chunk-KSDFO34H.mjs";
+import {
+  createJsxFunctions
+} from "./chunk-DLIXI5OW.mjs";
+
+// src/jsx-runtime.web.tsx
+var { jsx, jsxs } = createJsxFunctions(resolveStyle);
+
+export {
+  jsx,
+  jsxs
+};

package/dist/index.d.mts

@@ -59,6 +59,19 @@ interface StyleObject {
  * `Pressable` ever knows this, so it's passed in directly by the caller
  * (jsx-runtime, from Pressable's own style-function callback) rather than
  * queried here. Defaults to `false` for every other element type.
+ *
+ * `width` gates `sm:`/`md:`/`lg:`/`xl:`/`2xl:` against the active theme's
+ * `screens` scale (resolve_style.rs's `native_modifier_state`) — read fresh
+ * from `Dimensions.get('window').width` on every call, the same "no
+ * caching, no store" choice `colorScheme`/`pressed` already make, and for
+ * the same reason: unlike dark mode there's no explicit-override concept to
+ * preserve here (nobody manually overrides their screen width), so a plain
+ * synchronous read is enough — no need for the subscribable store
+ * darkModeStore.ts is for. As with `colorScheme`, this function has no
+ * subscription of its own, so rotating/resizing the window doesn't
+ * re-render anything by itself — call RN's own `useWindowDimensions()`
+ * somewhere in the tree for that (same role `useColorScheme()` plays for
+ * `dark:` in apps/native-sandbox/App.tsx).
  */
 declare function resolveStyle(classString: string, pressed?: boolean): StyleObject;
 

package/dist/index.d.ts

@@ -59,6 +59,19 @@ interface StyleObject {
  * `Pressable` ever knows this, so it's passed in directly by the caller
  * (jsx-runtime, from Pressable's own style-function callback) rather than
  * queried here. Defaults to `false` for every other element type.
+ *
+ * `width` gates `sm:`/`md:`/`lg:`/`xl:`/`2xl:` against the active theme's
+ * `screens` scale (resolve_style.rs's `native_modifier_state`) — read fresh
+ * from `Dimensions.get('window').width` on every call, the same "no
+ * caching, no store" choice `colorScheme`/`pressed` already make, and for
+ * the same reason: unlike dark mode there's no explicit-override concept to
+ * preserve here (nobody manually overrides their screen width), so a plain
+ * synchronous read is enough — no need for the subscribable store
+ * darkModeStore.ts is for. As with `colorScheme`, this function has no
+ * subscription of its own, so rotating/resizing the window doesn't
+ * re-render anything by itself — call RN's own `useWindowDimensions()`
+ * somewhere in the tree for that (same role `useColorScheme()` plays for
+ * `dark:` in apps/native-sandbox/App.tsx).
  */
 declare function resolveStyle(classString: string, pressed?: boolean): StyleObject;
 

package/dist/index.js

@@ -326,7 +326,13 @@ var defaultTheme = {
     "6": 24,
     "8": 32
   },
-  screens: {},
+  screens: {
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    "2xl": 1536
+  },
   darkMode: "attribute"
 };
 var activeTheme = defaultTheme;
@@ -395,7 +401,8 @@ function seedDefaultMode(fallback) {
 function resolveStyle(classString, pressed = false) {
   const KbachModule = import_react_native2.TurboModuleRegistry.getEnforcing("KbachModule");
   const colorScheme = getGlobalDarkMode() ? "dark" : "light";
-  const json = KbachModule.resolveStyle(classString, getThemeJson(), colorScheme, pressed);
+  const width = import_react_native2.Dimensions.get("window").width;
+  const json = KbachModule.resolveStyle(classString, getThemeJson(), colorScheme, pressed, width);
   return JSON.parse(json);
 }
 

package/dist/index.mjs

@@ -1,69 +1,21 @@
+import {
+  ThemeProvider,
+  useGlobalDarkMode,
+  useTheme
+} from "./chunk-4KCCEMEN.mjs";
+import {
+  resolveStyle
+} from "./chunk-FG5E4NLJ.mjs";
 import {
   defaultTheme,
   getGlobalDarkMode,
   getGlobalThemeMode,
   getTheme,
-  resolveStyle,
-  seedDefaultMode,
   setGlobalThemeMode,
   setTheme,
   subscribeGlobalDarkMode,
   toggleGlobalDarkMode
-} from "./chunk-YHF3QLRL.mjs";
-
-// src/useGlobalDarkMode.ts
-import { useSyncExternalStore } from "react";
-function useGlobalDarkMode() {
-  return useSyncExternalStore(subscribeGlobalDarkMode, getGlobalDarkMode);
-}
-
-// src/ThemeProvider.tsx
-import { useEffect, useMemo, useRef, useSyncExternalStore as useSyncExternalStore2 } from "react";
-
-// src/ThemeContext.tsx
-import { createContext, useContext } from "react";
-var ThemeContext = createContext(null);
-function useTheme() {
-  const ctx = useContext(ThemeContext);
-  if (!ctx) {
-    throw new Error(
-      'useTheme() must be called within a <ThemeProvider>. For dark-mode state without a provider, use useGlobalDarkMode() (read) or toggleGlobalDarkMode()/setGlobalThemeMode() (write) from "@kbach/react-native" instead.'
-    );
-  }
-  return ctx;
-}
-
-// src/ThemeProvider.tsx
-import { jsx } from "react/jsx-runtime";
-var mountedProviderCount = 0;
-var warnedMultipleProviders = false;
-function ThemeProvider({ children, defaultMode = "system" }) {
-  useEffect(() => {
-    mountedProviderCount++;
-    if (mountedProviderCount > 1 && !warnedMultipleProviders) {
-      warnedMultipleProviders = true;
-      console.warn(
-        "[kbach] Multiple <ThemeProvider> instances are mounted at once. Dark-mode state is one global store (the same one useGlobalDarkMode()/toggleGlobalDarkMode() read and write), not scoped per-provider, so they will fight over the same state instead of each getting their own."
-      );
-    }
-    return () => {
-      mountedProviderCount--;
-    };
-  }, []);
-  const seeded = useRef(false);
-  useEffect(() => {
-    if (seeded.current) return;
-    seeded.current = true;
-    seedDefaultMode(defaultMode);
-  }, []);
-  const isDark = useSyncExternalStore2(subscribeGlobalDarkMode, getGlobalDarkMode);
-  const mode = useSyncExternalStore2(subscribeGlobalDarkMode, getGlobalThemeMode);
-  const value = useMemo(
-    () => ({ mode, isDark, setMode: setGlobalThemeMode, toggle: toggleGlobalDarkMode }),
-    [mode, isDark]
-  );
-  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
-}
+} from "./chunk-AEVOM2NB.mjs";
 export {
   ThemeProvider,
   defaultTheme,

package/dist/index.web.d.mts

@@ -0,0 +1,7 @@
+import { StyleObject } from './index.mjs';
+export { ThemeConfig, ThemeContextValue, ThemeMode, ThemeProvider, ThemeProviderProps, defaultTheme, getGlobalDarkMode, getGlobalThemeMode, getTheme, setGlobalThemeMode, setTheme, subscribeGlobalDarkMode, toggleGlobalDarkMode, useGlobalDarkMode, useTheme } from './index.mjs';
+import 'react';
+
+declare function resolveStyle(classString: string, pressed?: boolean): StyleObject;
+
+export { StyleObject, resolveStyle };

package/dist/index.web.d.ts

@@ -0,0 +1,7 @@
+import { StyleObject } from './index.js';
+export { ThemeConfig, ThemeContextValue, ThemeMode, ThemeProvider, ThemeProviderProps, defaultTheme, getGlobalDarkMode, getGlobalThemeMode, getTheme, setGlobalThemeMode, setTheme, subscribeGlobalDarkMode, toggleGlobalDarkMode, useGlobalDarkMode, useTheme } from './index.js';
+import 'react';
+
+declare function resolveStyle(classString: string, pressed?: boolean): StyleObject;
+
+export { StyleObject, resolveStyle };