@niibase/uniwind 1.1.11 → 1.4.0

package/dist/common/hooks/useCSSVariable/getVariableValue.js

@@ -5,15 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getVariableValue = void 0;
 var _web = require("../../core/web");
-const documentStyles = typeof document !== "undefined" ? window.getComputedStyle(document.documentElement) : null;
-const getVariableValue = name => {
-  if (!documentStyles) {
-    return void 0;
-  }
-  const value = documentStyles.getPropertyValue(name).trim();
-  if (value === "") {
-    return void 0;
-  }
-  return (0, _web.parseCSSValue)(value);
-};
-exports.getVariableValue = getVariableValue;
+const getVariableValue = exports.getVariableValue = _web.getWebVariable;

package/dist/common/hooks/useCSSVariable/getVariableValue.native.js

@@ -5,5 +5,5 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getVariableValue = void 0;
 var _native = require("../../core/native");
-const getVariableValue = name => _native.UniwindStore.vars[name];
+const getVariableValue = (name, uniwindContext) => _native.UniwindStore.vars[uniwindContext.scopedTheme ?? _native.UniwindRuntime.currentThemeName]?.[name];
 exports.getVariableValue = getVariableValue;

package/dist/common/hooks/useCSSVariable/useCSSVariable.js

@@ -5,11 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useCSSVariable = void 0;
 var _react = require("react");
+var _context = require("../../core/context");
 var _listener = require("../../core/listener");
 var _logger = require("../../core/logger");
 var _types = require("../../types");
 var _getVariableValue = require("./getVariableValue");
-const getValue = name => Array.isArray(name) ? name.map(_getVariableValue.getVariableValue) : (0, _getVariableValue.getVariableValue)(name);
+const getValue = (name, uniwindContext) => Array.isArray(name) ? name.map(name2 => (0, _getVariableValue.getVariableValue)(name2, uniwindContext)) : (0, _getVariableValue.getVariableValue)(name, uniwindContext);
 const arrayEquals = (a, b) => {
   if (a.length !== b.length) {
     return false;
@@ -22,27 +23,28 @@ const logDevError = name => {
   _logger.Logger.warn(`We couldn't find your variable ${name}. Make sure it's used at least once in your className, or define it in a static theme as described in the docs: https://docs.uniwind.dev/api/use-css-variable`);
 };
 const useCSSVariable = name => {
-  const [value, setValue] = (0, _react.useState)(getValue(name));
+  const uniwindContext = (0, _context.useUniwindContext)();
+  const [value, setValue] = (0, _react.useState)(getValue(name, uniwindContext));
   const nameRef = (0, _react.useRef)(name);
   (0, _react.useLayoutEffect)(() => {
     if (Array.isArray(name) && Array.isArray(nameRef.current)) {
       if (arrayEquals(name, nameRef.current)) {
         return;
       }
-      setValue(getValue(name));
+      setValue(getValue(name, uniwindContext));
       nameRef.current = name;
       return;
     }
     if (name !== nameRef.current) {
-      setValue(getValue(name));
+      setValue(getValue(name, uniwindContext));
       nameRef.current = name;
     }
   }, [name]);
   (0, _react.useLayoutEffect)(() => {
-    const updateValue = () => setValue(getValue(nameRef.current));
+    const updateValue = () => setValue(getValue(nameRef.current, uniwindContext));
     const dispose = _listener.UniwindListener.subscribe(updateValue, [_types.StyleDependency.Theme, _types.StyleDependency.Variables]);
     return dispose;
-  }, []);
+  }, [uniwindContext]);
   if (Array.isArray(value)) {
     value.forEach((val, index) => {
       if (val === void 0 && __DEV__ && !warned) {

package/dist/common/hooks/useResolveClassNames.js

@@ -5,10 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useResolveClassNames = void 0;
 var _react = require("react");
+var _context = require("../core/context");
 var _web = require("../core/web");
 const emptyState = {};
 const useResolveClassNames = className => {
-  const [styles, recreate] = (0, _react.useReducer)(() => className !== "" ? (0, _web.getWebStyles)(className) : emptyState, className !== "" ? (0, _web.getWebStyles)(className) : emptyState);
+  const uniwindContext = (0, _context.useUniwindContext)();
+  const [styles, recreate] = (0, _react.useReducer)(() => className !== "" ? (0, _web.getWebStyles)(className, uniwindContext) : emptyState, void 0, () => className !== "" ? (0, _web.getWebStyles)(className, uniwindContext) : emptyState);
   (0, _react.useLayoutEffect)(() => {
     if (className === "") {
       return;
@@ -16,7 +18,7 @@ const useResolveClassNames = className => {
     recreate();
     const dispose = _web.CSSListener.subscribeToClassName(className, recreate);
     return dispose;
-  }, [className]);
+  }, [className, uniwindContext]);
   return styles;
 };
 exports.useResolveClassNames = useResolveClassNames;

package/dist/common/hooks/useResolveClassNames.native.js

@@ -5,15 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useResolveClassNames = void 0;
 var _react = require("react");
+var _context = require("../core/context");
 var _listener = require("../core/listener");
 var _native = require("../core/native");
 const useResolveClassNames = className => {
-  const [uniwindState, recreate] = (0, _react.useReducer)(() => _native.UniwindStore.getStyles(className), _native.UniwindStore.getStyles(className));
+  const uniwindContext = (0, _context.useUniwindContext)();
+  const [uniwindState, recreate] = (0, _react.useReducer)(() => _native.UniwindStore.getStyles(className, void 0, void 0, uniwindContext), void 0, () => _native.UniwindStore.getStyles(className, void 0, void 0, uniwindContext));
   (0, _react.useLayoutEffect)(() => {
     if (className !== "") {
       recreate();
     }
-  }, [className]);
+  }, [className, uniwindContext]);
   (0, _react.useLayoutEffect)(() => {
     if (uniwindState.dependencies.length > 0) {
       const dispose = _listener.UniwindListener.subscribe(recreate, uniwindState.dependencies);

package/dist/common/hooks/useUniwind.js

@@ -6,12 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.useUniwind = void 0;
 var _react = require("react");
 var _core = require("../core");
+var _context = require("../core/context");
 var _listener = require("../core/listener");
 var _types = require("../types");
 const useUniwind = () => {
+  const uniwindContext = (0, _context.useUniwindContext)();
   const [theme, setTheme] = (0, _react.useState)(_core.Uniwind.currentTheme);
   const [hasAdaptiveThemes, setHasAdaptiveThemes] = (0, _react.useState)(_core.Uniwind.hasAdaptiveThemes);
   (0, _react.useLayoutEffect)(() => {
+    if (uniwindContext.scopedTheme !== null) {
+      return;
+    }
     const dispose = _listener.UniwindListener.subscribe(() => {
       setTheme(_core.Uniwind.currentTheme);
       setHasAdaptiveThemes(_core.Uniwind.hasAdaptiveThemes);
@@ -19,10 +24,10 @@ const useUniwind = () => {
     return () => {
       dispose();
     };
-  }, []);
+  }, [uniwindContext]);
   return {
-    theme,
-    hasAdaptiveThemes
+    theme: uniwindContext.scopedTheme ?? theme,
+    hasAdaptiveThemes: uniwindContext.scopedTheme !== null ? false : hasAdaptiveThemes
   };
 };
 exports.useUniwind = useUniwind;

package/dist/common/index.js

@@ -3,6 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  Uniwind: true,
+  withUniwind: true,
+  useCSSVariable: true,
+  useResolveClassNames: true,
+  useUniwind: true
+};
 Object.defineProperty(exports, "Uniwind", {
   enumerable: true,
   get: function () {
@@ -33,6 +40,18 @@ Object.defineProperty(exports, "withUniwind", {
     return _hoc.withUniwind;
   }
 });
+var _ScopedTheme = require("./components/ScopedTheme");
+Object.keys(_ScopedTheme).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ScopedTheme[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ScopedTheme[key];
+    }
+  });
+});
 var _core = require("./core");
 var _hoc = require("./hoc");
 var _hooks = require("./hooks");

package/dist/common/vite/vite.js

@@ -8,7 +8,7 @@ var _node = require("@tailwindcss/node");
 var _path = _interopRequireDefault(require("path"));
 var _package = require("../../package.json");
 var _css = require("../css");
-var _processFunctions = require("../css/processFunctions");
+var _cssVisitor = require("../css-visitor");
 var _utils = require("../metro/utils");
 var _buildDtsFile = require("../utils/buildDtsFile");
 var _stringifyThemes = require("../utils/stringifyThemes");
@@ -37,9 +37,7 @@ const uniwind = ({
       css: {
         transformer: "lightningcss",
         lightningcss: {
-          visitor: {
-            Function: _processFunctions.processFunctions
-          }
+          visitor: new _cssVisitor.UniwindCSSVisitor(themes)
         }
       },
       optimizeDeps: {

package/dist/metro/index.cjs

@@ -4,7 +4,7 @@ const FileStoreBase = require('metro-cache/private/stores/FileStore');
 const os = require('os');
 const path = require('path');
 const node_path = require('node:path');
-const common = require('../shared/uniwind.thpLtIq6.cjs');
+const common = require('../shared/uniwind.nl8746mK.cjs');
 const types = require('../shared/uniwind.BZIuaszw.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }

package/dist/metro/index.mjs

@@ -2,7 +2,7 @@ import FileStoreBase from 'metro-cache/private/stores/FileStore';
 import os from 'os';
 import path from 'path';
 import { join, dirname, sep, basename } from 'node:path';
-import { n as name, u as uniq } from '../shared/uniwind.BxeutNHQ.mjs';
+import { n as name, u as uniq } from '../shared/uniwind.F-0-Rr--.mjs';
 import { P as Platform } from '../shared/uniwind.CyoRUwOj.mjs';
 
 class FileStore extends FileStoreBase {

package/dist/metro/metro-transformer.cjs

@@ -2,12 +2,12 @@
 
 const fs = require('fs');
 const path = require('path');
-const common = require('../shared/uniwind.thpLtIq6.cjs');
+const common = require('../shared/uniwind.nl8746mK.cjs');
 const node = require('@tailwindcss/node');
 const oxide = require('@tailwindcss/oxide');
-const types = require('../shared/uniwind.BZIuaszw.cjs');
-const stringifyThemes = require('../shared/uniwind.BJE4mTIG.cjs');
 const lightningcss = require('lightningcss');
+const types = require('../shared/uniwind.BZIuaszw.cjs');
+const stringifyThemes = require('../shared/uniwind.CyACT0sD.cjs');
 const culori = require('culori');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
@@ -34,9 +34,13 @@ const parseStringValue = (value) => {
       return token;
     }
     const endsWithComma = token.endsWith(",");
+    const expr = endsWithComma ? token.slice(0, -1) : token;
+    if (!common.isValidJSValue(expr)) {
+      return token;
+    }
     return [
       "${",
-      endsWithComma ? token.slice(0, -1) : token,
+      expr,
       "}",
       endsWithComma ? "," : ""
     ].join("");
@@ -238,17 +242,6 @@ const addMetaToStylesTemplate = (Processor, currentPlatform) => {
   return stylesheets;
 };
 
-const polyfillWeb = (css) => {
-  const result = lightningcss.transform({
-    code: Buffer.from(css),
-    filename: "uniwind.css",
-    visitor: {
-      Function: stringifyThemes.processFunctions
-    }
-  });
-  return result.code.toString();
-};
-
 const transforms = [
   "translateX",
   "translateY",
@@ -1126,9 +1119,15 @@ class Functions {
       return "rt.hairlineWidth";
     }
     if (fn.name === "pixelRatio") {
+      if (fn.arguments.length === 0) {
+        return "rt.pixelRatio(1)";
+      }
       return `rt.pixelRatio(${this.Processor.CSS.processValue(fn.arguments)})`;
     }
     if (fn.name === "fontScale") {
+      if (fn.arguments.length === 0) {
+        return "rt.fontScale(1)";
+      }
       return `rt.fontScale(${this.Processor.CSS.processValue(fn.arguments)})`;
     }
     if (fn.name === "drop-shadow") {
@@ -1426,6 +1425,7 @@ const cssToRNMap = {
   })
 };
 const BORDER_WIDTH_KEYS = ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"];
+const BORDER_COLOR_KEYS = ["borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor"];
 class RN {
   constructor(Processor) {
     this.Processor = Processor;
@@ -1435,7 +1435,7 @@ class RN {
       common.toCamelCase,
       (x) => {
         if (x.includes("padding") || x.includes("margin")) {
-          return x.replace("Inline", "Horizontal").replace("Block", "Vertical");
+          return x.replace("InlineStart", "Start").replace("InlineEnd", "End").replace("Inline", "Horizontal").replace("Block", "Vertical");
         }
         return x;
       }
@@ -1531,6 +1531,15 @@ class RN {
         };
       }
     }
+    if (BORDER_COLOR_KEYS.every((key) => keys.includes(key))) {
+      const borderColor = styles.borderTopColor;
+      if (BORDER_COLOR_KEYS.every((key) => styles[key] === borderColor)) {
+        return {
+          ...common.removeKeys(styles, BORDER_COLOR_KEYS),
+          borderColor
+        };
+      }
+    }
     return styles;
   }
 }
@@ -1942,7 +1951,11 @@ const compileVirtual = async ({ css, cssPath, platform, themes, polyfills, debug
   });
   const tailwindCSS = compiler.build(candidates ?? scanner.scan());
   if (platform === types.Platform.Web) {
-    return polyfillWeb(tailwindCSS);
+    return lightningcss.transform({
+      code: Buffer.from(tailwindCSS),
+      filename: "uniwind.css",
+      visitor: new stringifyThemes.UniwindCSSVisitor(themes)
+    }).code.toString();
   }
   const Processor = new ProcessorBuilder(themes, polyfills);
   stringifyThemes.Logger.debug = debug === true;

package/dist/metro/metro-transformer.mjs

@@ -1,11 +1,11 @@
 import fs from 'fs';
 import path from 'path';
-import { p as pipe, r as roundToPrecision, i as isNumber, a as isValidJSValue, s as smartSplit, b as addMissingSpaces, t as toCamelCase, c as isDefined, d as deepEqual, e as shouldBeSerialized, f as removeKeys, n as name } from '../shared/uniwind.BxeutNHQ.mjs';
+import { p as pipe, r as roundToPrecision, i as isNumber, a as isValidJSValue, s as smartSplit, b as addMissingSpaces, t as toCamelCase, c as isDefined, d as deepEqual, e as shouldBeSerialized, f as removeKeys, n as name } from '../shared/uniwind.F-0-Rr--.mjs';
 import { compile } from '@tailwindcss/node';
 import { Scanner } from '@tailwindcss/oxide';
-import { P as Platform } from '../shared/uniwind.CyoRUwOj.mjs';
-import { L as Logger, p as processFunctions, s as stringifyThemes, b as buildDtsFile, a as buildCSS } from '../shared/uniwind.xtsPxiWD.mjs';
 import { transform as transform$1 } from 'lightningcss';
+import { P as Platform } from '../shared/uniwind.CyoRUwOj.mjs';
+import { L as Logger, U as UniwindCSSVisitor, s as stringifyThemes, b as buildDtsFile, a as buildCSS } from '../shared/uniwind.D-ahjOrG.mjs';
 import { converter, parse, formatHex, formatHex8 } from 'culori';
 
 const parseStringValue = (value) => {
@@ -27,9 +27,13 @@ const parseStringValue = (value) => {
       return token;
     }
     const endsWithComma = token.endsWith(",");
+    const expr = endsWithComma ? token.slice(0, -1) : token;
+    if (!isValidJSValue(expr)) {
+      return token;
+    }
     return [
       "${",
-      endsWithComma ? token.slice(0, -1) : token,
+      expr,
       "}",
       endsWithComma ? "," : ""
     ].join("");
@@ -231,17 +235,6 @@ const addMetaToStylesTemplate = (Processor, currentPlatform) => {
   return stylesheets;
 };
 
-const polyfillWeb = (css) => {
-  const result = transform$1({
-    code: Buffer.from(css),
-    filename: "uniwind.css",
-    visitor: {
-      Function: processFunctions
-    }
-  });
-  return result.code.toString();
-};
-
 const transforms = [
   "translateX",
   "translateY",
@@ -1119,9 +1112,15 @@ class Functions {
       return "rt.hairlineWidth";
     }
     if (fn.name === "pixelRatio") {
+      if (fn.arguments.length === 0) {
+        return "rt.pixelRatio(1)";
+      }
       return `rt.pixelRatio(${this.Processor.CSS.processValue(fn.arguments)})`;
     }
     if (fn.name === "fontScale") {
+      if (fn.arguments.length === 0) {
+        return "rt.fontScale(1)";
+      }
       return `rt.fontScale(${this.Processor.CSS.processValue(fn.arguments)})`;
     }
     if (fn.name === "drop-shadow") {
@@ -1419,6 +1418,7 @@ const cssToRNMap = {
   })
 };
 const BORDER_WIDTH_KEYS = ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"];
+const BORDER_COLOR_KEYS = ["borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor"];
 class RN {
   constructor(Processor) {
     this.Processor = Processor;
@@ -1428,7 +1428,7 @@ class RN {
       toCamelCase,
       (x) => {
         if (x.includes("padding") || x.includes("margin")) {
-          return x.replace("Inline", "Horizontal").replace("Block", "Vertical");
+          return x.replace("InlineStart", "Start").replace("InlineEnd", "End").replace("Inline", "Horizontal").replace("Block", "Vertical");
         }
         return x;
       }
@@ -1524,6 +1524,15 @@ class RN {
         };
       }
     }
+    if (BORDER_COLOR_KEYS.every((key) => keys.includes(key))) {
+      const borderColor = styles.borderTopColor;
+      if (BORDER_COLOR_KEYS.every((key) => styles[key] === borderColor)) {
+        return {
+          ...removeKeys(styles, BORDER_COLOR_KEYS),
+          borderColor
+        };
+      }
+    }
     return styles;
   }
 }
@@ -1935,7 +1944,11 @@ const compileVirtual = async ({ css, cssPath, platform, themes, polyfills, debug
   });
   const tailwindCSS = compiler.build(candidates ?? scanner.scan());
   if (platform === Platform.Web) {
-    return polyfillWeb(tailwindCSS);
+    return transform$1({
+      code: Buffer.from(tailwindCSS),
+      filename: "uniwind.css",
+      visitor: new UniwindCSSVisitor(themes)
+    }).code.toString();
   }
   const Processor = new ProcessorBuilder(themes, polyfills);
   Logger.debug = debug === true;

package/dist/module/components/ScopedTheme/ScopedTheme.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ThemeName } from '../../core/types';
+type ScopedThemeProps = {
+    theme: ThemeName;
+};
+export declare const ScopedTheme: React.FC<React.PropsWithChildren<ScopedThemeProps>>;
+export {};

package/dist/module/components/ScopedTheme/ScopedTheme.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { UniwindContext } from "../../core/context.js";
+export const ScopedTheme = ({ theme, children }) => {
+  const value = useMemo(() => ({ scopedTheme: theme }), [theme]);
+  return /* @__PURE__ */ jsx(UniwindContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { className: theme, style: { display: "contents" }, children }) });
+};

package/dist/module/components/ScopedTheme/ScopedTheme.native.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ThemeName } from '../../core/types';
+type ScopedThemeProps = {
+    theme: ThemeName;
+};
+export declare const ScopedTheme: React.FC<React.PropsWithChildren<ScopedThemeProps>>;
+export {};

package/dist/module/components/ScopedTheme/ScopedTheme.native.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { UniwindContext } from "../../core/context.js";
+export const ScopedTheme = ({ theme, children }) => {
+  const value = useMemo(() => ({ scopedTheme: theme }), [theme]);
+  return /* @__PURE__ */ jsx(UniwindContext.Provider, { value, children });
+};

package/dist/module/components/ScopedTheme/index.d.ts

@@ -0,0 +1 @@
+export * from './ScopedTheme';

package/dist/module/components/ScopedTheme/index.js

@@ -0,0 +1 @@
+export * from "./ScopedTheme.js";

package/dist/module/components/native/TextInput.android.d.ts

@@ -0,0 +1,3 @@
+import { TextInput as RNTextInput } from 'react-native';
+export declare const TextInput: typeof RNTextInput;
+export default TextInput;

package/dist/module/components/native/TextInput.android.js

@@ -0,0 +1,49 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { TextInput as RNTextInput } from "react-native";
+import { copyComponentProperties } from "../utils.js";
+import { useStyle } from "./useStyle.js";
+export const TextInput = copyComponentProperties(RNTextInput, (props) => {
+  const [isFocused, setIsFocused] = useState(false);
+  const [isPressed, setIsPressed] = useState(false);
+  const state = {
+    isDisabled: props.editable === false,
+    isFocused,
+    isPressed
+  };
+  const style = useStyle(props.className, props, state);
+  const cursorColor = useStyle(props.cursorColorClassName, props, state).accentColor;
+  const selectionColor = useStyle(props.selectionColorClassName, props, state).accentColor;
+  const placeholderTextColor = useStyle(props.placeholderTextColorClassName, props, state).accentColor;
+  const selectionHandleColor = useStyle(props.selectionHandleColorClassName, props, state).accentColor;
+  const underlineColorAndroid = useStyle(props.underlineColorAndroidClassName, props, state).accentColor;
+  return /* @__PURE__ */ jsx(
+    RNTextInput,
+    {
+      ...props,
+      style: [style, props.style],
+      cursorColor: props.cursorColor ?? cursorColor,
+      selectionColor: props.selectionColor ?? selectionColor,
+      placeholderTextColor: props.placeholderTextColor ?? placeholderTextColor,
+      selectionHandleColor: props.selectionHandleColor ?? selectionHandleColor,
+      underlineColorAndroid: props.underlineColorAndroid ?? underlineColorAndroid,
+      onFocus: (event) => {
+        setIsFocused(true);
+        props.onFocus?.(event);
+      },
+      onBlur: (event) => {
+        setIsFocused(false);
+        props.onBlur?.(event);
+      },
+      onPressIn: (event) => {
+        setIsPressed(true);
+        props.onPressIn?.(event);
+      },
+      onPressOut: (event) => {
+        setIsPressed(false);
+        props.onPressOut?.(event);
+      }
+    }
+  );
+});
+export default TextInput;

package/dist/module/components/native/useStyle.js

@@ -1,27 +1,24 @@
 import { useLayoutEffect, useReducer } from "react";
 import { createAnimatedComponent } from "react-native-reanimated";
+import { useUniwindContext } from "../../core/context.js";
 import { UniwindListener } from "../../core/listener.js";
 import { UniwindStore } from "../../core/native/index.js";
 import { weakFamily } from "../../core/weak-map.js";
-const emptyState = {
-  styles: {},
-  component: void 0,
-  dependencies: []
-};
 export function useStyle(componentOrClassName, classNameOrComponentProps, componentPropsOrState, state) {
   "use no memo";
+  const uniwindContext = useUniwindContext();
   const [_, rerender] = useReducer(() => ({}), {});
   const isComponentOverload = typeof componentOrClassName !== "string" && componentOrClassName !== void 0;
   const className = isComponentOverload ? classNameOrComponentProps : componentOrClassName;
   const componentProps = isComponentOverload ? componentPropsOrState : classNameOrComponentProps;
   const actualState = isComponentOverload ? state : componentPropsOrState;
-  const styleState = className ? UniwindStore.getStyles(className, componentProps, actualState) : emptyState;
+  const styleState = UniwindStore.getStyles(className, componentProps, actualState, uniwindContext);
   useLayoutEffect(() => {
     if (__DEV__ || styleState.dependencies.length > 0) {
       const dispose = UniwindListener.subscribe(rerender, styleState.dependencies);
       return dispose;
     }
-  }, [styleState.dependencies]);
+  }, [styleState.dependencySum]);
   if (!isComponentOverload) {
     return styleState.styles;
   }

package/dist/module/core/config/config.native.js

@@ -24,21 +24,12 @@ class UniwindConfigBuilder extends UniwindConfigBuilderBase {
         }
         return varValue;
       };
-      const value = getValue();
-      const runtimeThemeVariables = UniwindStore.runtimeThemeVariables.get(theme) ?? {};
-      if (theme === this.currentTheme) {
-        Object.defineProperty(UniwindStore.vars, varName, {
-          configurable: true,
-          enumerable: true,
-          get: () => value
-        });
-      }
-      Object.defineProperty(runtimeThemeVariables, varName, {
+      UniwindStore.vars[theme] ??= {};
+      Object.defineProperty(UniwindStore.vars[theme], varName, {
         configurable: true,
         enumerable: true,
-        get: () => value
+        get: getValue
       });
-      UniwindStore.runtimeThemeVariables.set(theme, runtimeThemeVariables);
     });
     if (theme === this.currentTheme) {
       UniwindListener.notify([StyleDependency.Variables]);
@@ -53,11 +44,10 @@ class UniwindConfigBuilder extends UniwindConfigBuilderBase {
   }
   __reinit(generateStyleSheetCallback, themes) {
     super.__reinit(generateStyleSheetCallback, themes);
-    UniwindStore.reinit(generateStyleSheetCallback);
+    UniwindStore.reinit(generateStyleSheetCallback, themes);
   }
   onThemeChange() {
     UniwindStore.runtime.currentThemeName = this.currentTheme;
-    UniwindStore.reinit();
   }
 }
 export const Uniwind = new UniwindConfigBuilder();

package/dist/module/core/context.d.ts

@@ -0,0 +1,7 @@
+import type { ThemeName } from './types';
+export declare const UniwindContext: import("react").Context<{
+    scopedTheme: ThemeName | null;
+}>;
+export declare const useUniwindContext: () => {
+    scopedTheme: ThemeName | null;
+};

package/dist/module/core/context.js

@@ -0,0 +1,6 @@
+import { createContext, useContext } from "react";
+export const UniwindContext = createContext({
+  scopedTheme: null
+});
+export const useUniwindContext = () => useContext(UniwindContext);
+UniwindContext.displayName = "UniwindContext";

package/dist/module/core/native/store.d.ts

@@ -1,5 +1,5 @@
 import { StyleDependency } from '../../types';
-import { ComponentState, CSSVariables, GenerateStyleSheetsCallback, RNStyle } from '../types';
+import { ComponentState, GenerateStyleSheetsCallback, RNStyle, ThemeName, UniwindContextType } from '../types';
 type StylesResult = {
     styles: RNStyle;
     dependencies: Array<StyleDependency>;
@@ -7,14 +7,12 @@ type StylesResult = {
 };
 declare class UniwindStoreBuilder {
     runtime: import("../types").UniwindRuntime;
-    vars: Record<string, unknown>;
-    runtimeThemeVariables: Map<string, CSSVariables>;
+    vars: Record<ThemeName, Record<string, unknown>>;
     private stylesheet;
     private keyframes;
     private cache;
-    private generateStyleSheetCallbackResult;
-    getStyles(className: string | undefined, componentProps?: Record<string, any>, state?: ComponentState): StylesResult;
-    reinit: (generateStyleSheetCallback?: GenerateStyleSheetsCallback) => void;
+    getStyles(className: string | undefined, componentProps: Record<string, any> | undefined, state: ComponentState | undefined, uniwindContext: UniwindContextType): StylesResult;
+    reinit: (generateStyleSheetCallback: GenerateStyleSheetsCallback, themes: Array<string>) => void;
     private resolveStyles;
     private validateDataAttributes;
 }