@niibase/uniwind 1.6.1 → 1.6.3

package/dist/common/core/config/config.js

@@ -4,50 +4,69 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Uniwind = void 0;
+var _utils = require("../../common/utils");
 var _types = require("../../types");
 var _listener = require("../listener");
 var _logger = require("../logger");
+var _web = require("../web");
 var _config = require("./config.common");
 class UniwindConfigBuilder extends _config.UniwindConfigBuilder {
-  runtimeCSSVariables = /* @__PURE__ */new Map();
+  cssRules;
   constructor() {
     super();
   }
   updateCSSVariables(theme, variables) {
+    if (typeof document === "undefined") {
+      return;
+    }
+    const uniwindRules = this.getUniwindDynamicCSSRules();
     Object.entries(variables).forEach(([varName, varValue]) => {
       if (!varName.startsWith("--") && __DEV__) {
         _logger.Logger.error(`CSS variable name must start with "--", instead got: ${varName}`);
-        return;
-      }
-      const runtimeCSSVariables = this.runtimeCSSVariables.get(theme) ?? {};
-      runtimeCSSVariables[varName] = varValue;
-      this.runtimeCSSVariables.set(theme, runtimeCSSVariables);
-      if (theme === this.currentTheme) {
-        this.applyCSSVariable(varName, varValue);
       }
+      const existingRules = Object.fromEntries(uniwindRules.map(rule => [rule.theme, (0, _web.getWebVariable)(varName, {
+        scopedTheme: rule.theme
+      })]));
+      uniwindRules.forEach(rule => {
+        if (rule.theme === theme) {
+          rule.style.setProperty(varName, typeof varValue === "number" ? `${varValue}px` : varValue);
+          return;
+        }
+        rule.style.setProperty(varName, existingRules[rule.theme] ?? null);
+      });
     });
-    if (theme === this.currentTheme) {
-      _listener.UniwindListener.notify([_types.StyleDependency.Variables]);
-    }
+    _listener.UniwindListener.notify([_types.StyleDependency.Variables]);
   }
-  onThemeChange() {
-    if (typeof document === "undefined") {
+  __reinit(generateStyleSheetCallback, themes) {
+    const oldThemes = this.themes;
+    super.__reinit(generateStyleSheetCallback, themes);
+    if ((0, _utils.arrayEquals)(themes, oldThemes)) {
       return;
     }
-    document.documentElement.removeAttribute("style");
-    const runtimeCSSVariables = this.runtimeCSSVariables.get(this.currentTheme);
-    if (!runtimeCSSVariables) {
-      return;
+    this.cssRules = void 0;
+    if (typeof document !== "undefined") {
+      document.querySelector("#uniwind-dynamic-styles")?.remove();
     }
-    Object.entries(runtimeCSSVariables).forEach(([varName, varValue]) => {
-      this.applyCSSVariable(varName, varValue);
-    });
   }
-  applyCSSVariable(varName, varValue) {
+  getUniwindDynamicCSSRules() {
+    if (this.cssRules) {
+      return this.cssRules;
+    }
     if (typeof document === "undefined") {
-      return;
+      return [];
     }
-    document.documentElement.style.setProperty(varName, typeof varValue === "number" ? `${varValue}px` : varValue);
+    const styleElement = document.createElement("style");
+    styleElement.innerText = this.themes.reduce((acc, theme) => {
+      return `${acc}.${theme}{}`;
+    }, "");
+    styleElement.setAttribute("id", "uniwind-dynamic-styles");
+    document.head.appendChild(styleElement);
+    const cssRules = Array.from(styleElement.sheet?.cssRules ?? []).filter(rule => "selectorText" in rule && "style" in rule).map(rule => ({
+      style: rule.style,
+      theme: rule.selectorText.replace(".", "")
+    }));
+    this.cssRules = cssRules;
+    return cssRules;
   }
 }
 const Uniwind = exports.Uniwind = new UniwindConfigBuilder();

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

@@ -37,9 +37,7 @@ class UniwindConfigBuilder extends _config.UniwindConfigBuilder {
         get: getValue
       });
     });
-    if (theme === this.currentTheme) {
-      _listener.UniwindListener.notify([_types.StyleDependency.Variables]);
-    }
+    _listener.UniwindListener.notify([_types.StyleDependency.Variables]);
   }
   updateInsets(insets) {
     _native.UniwindStore.runtime.insets.bottom = insets.bottom ?? 0;

package/dist/common/core/web/cssListener.js

@@ -54,7 +54,7 @@ class CSSListenerBuilder {
       listeners?.add(listener);
       disposables.push(() => listeners?.delete(listener));
     });
-    const disposeThemeListener = _listener.UniwindListener.subscribe(listener, [_types.StyleDependency.Theme]);
+    const disposeThemeListener = _listener.UniwindListener.subscribe(listener, [_types.StyleDependency.Theme, _types.StyleDependency.Variables]);
     return () => {
       disposables.forEach(disposable => disposable());
       disposeThemeListener();

package/dist/common/hoc/withUniwind.js

@@ -6,10 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.withUniwind = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
+var _utils = require("../common/utils");
 var _generateDataSet = require("../components/web/generateDataSet");
 var _context = require("../core/context");
+var _logger = require("../core/logger");
 var _web = require("../core/web");
 var _withUniwindUtils = require("./withUniwindUtils");
+let warnedOnce = false;
 const withUniwind = (Component2, options) => options ? withManualUniwind(Component2, options) : withAutoUniwind(Component2);
 exports.withUniwind = withUniwind;
 const withAutoUniwind = Component2 => props => {
@@ -25,6 +28,10 @@ const withAutoUniwind = Component2 => props => {
       }
       const className = propValue;
       const color = (0, _web.getWebStyles)(className, props, uniwindContext).accentColor;
+      if (__DEV__ && !warnedOnce && (0, _utils.isDefined)(className) && className.trim() !== "" && color === void 0) {
+        warnedOnce = true;
+        _logger.Logger.warn(`className '${className}' was provided to extract accentColor but no color was found. Make sure the className includes a color utility (e.g., 'accent-red-500', 'accent-blue-600'). See https://docs.uniwind.dev/class-names#the-accent-prefix`);
+      }
       acc.generatedProps[colorProp] = color !== void 0 ? (0, _web.formatColor)(color) : void 0;
       acc.classNames += `${className} `;
       return acc;

package/dist/common/hoc/withUniwind.native.js

@@ -6,10 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.withUniwind = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
+var _utils = require("../common/utils");
 var _context = require("../core/context");
 var _listener = require("../core/listener");
+var _logger = require("../core/logger");
 var _native = require("../core/native");
 var _withUniwindUtils = require("./withUniwindUtils");
+let warnedOnce = false;
 const withUniwind = (Component2, options) => options ? withManualUniwind(Component2, options) : withAutoUniwind(Component2);
 exports.withUniwind = withUniwind;
 const withAutoUniwind = Component2 => props => {
@@ -27,6 +30,10 @@ const withAutoUniwind = Component2 => props => {
         styles,
         dependencies: dependencies2
       } = _native.UniwindStore.getStyles(propValue, props, void 0, uniwindContext);
+      if (__DEV__ && !warnedOnce && (0, _utils.isDefined)(propValue) && propValue.trim() !== "" && styles.accentColor === void 0) {
+        warnedOnce = true;
+        _logger.Logger.warn(`className '${propValue}' was provided to extract accentColor but no color was found. Make sure the className includes a color utility (e.g., 'accent-red-500', 'accent-blue-600'). See https://docs.uniwind.dev/class-names#the-accent-prefix`);
+      }
       acc.dependencies.push(...dependencies2);
       acc.generatedProps[colorProp] = styles.accentColor;
       return acc;

package/dist/common/hooks/index.js

@@ -35,15 +35,4 @@ Object.keys(_useUniwind).forEach(function (key) {
       return _useUniwind[key];
     }
   });
-});
-var _useUniwindAccent = require("./useUniwindAccent");
-Object.keys(_useUniwindAccent).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _useUniwindAccent[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _useUniwindAccent[key];
-    }
-  });
 });

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

@@ -5,18 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useCSSVariable = void 0;
 var _react = require("react");
+var _utils = require("../../common/utils");
 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, 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;
-  }
-  return a.every((value, index) => value === b[index]);
-};
 let warned = false;
 const logDevError = name => {
   warned = true;
@@ -28,7 +23,7 @@ const useCSSVariable = name => {
   const nameRef = (0, _react.useRef)(name);
   (0, _react.useLayoutEffect)(() => {
     if (Array.isArray(name) && Array.isArray(nameRef.current)) {
-      if (arrayEquals(name, nameRef.current)) {
+      if ((0, _utils.arrayEquals)(name, nameRef.current)) {
         return;
       }
       setValue(getValue(name, uniwindContext));

package/dist/metro/index.cjs

@@ -5,7 +5,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.nl8746mK.cjs');
+const common = require('../shared/uniwind.Cv73KtI-.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 
@@ -78,8 +78,11 @@ const nativeResolver = (extraComponents) => ({
 }) => {
   const resolution = resolver(context, moduleName, platform);
   if (cachedInternalBasePath === null) {
-    const componentsResolution = resolver(context, `${common.name}/components`, platform);
-    cachedInternalBasePath = componentsResolution.type === "sourceFile" ? node_path.join(node_path.dirname(componentsResolution.filePath), "../..") : "";
+    try {
+      cachedInternalBasePath = node_path.dirname(require.resolve(`${common.name}/package.json`));
+    } catch {
+      cachedInternalBasePath = "";
+    }
   }
   const isInternal = cachedInternalBasePath !== "" && context.originModulePath.startsWith(cachedInternalBasePath);
   const isFromNodeModules = context.originModulePath.includes(`${node_path.sep}node_modules${node_path.sep}`);
@@ -115,8 +118,11 @@ const webResolver = (extraComponents) => ({
 }) => {
   const resolution = resolver(context, moduleName, platform);
   if (cachedInternalBasePath === null) {
-    const componentsResolution = resolver(context, `${common.name}/components`, platform);
-    cachedInternalBasePath = componentsResolution.type === "sourceFile" ? node_path.join(node_path.dirname(componentsResolution.filePath), "../../../..") : "";
+    try {
+      cachedInternalBasePath = node_path.dirname(require.resolve(`${common.name}/package.json`));
+    } catch {
+      cachedInternalBasePath = "";
+    }
   }
   if (cachedInternalBasePath !== "" && context.originModulePath.startsWith(cachedInternalBasePath) || resolution.type !== "sourceFile" || !resolution.filePath.includes(`${node_path.sep}react-native-web${node_path.sep}`)) {
     return resolution;

package/dist/metro/index.mjs

@@ -2,8 +2,8 @@ import { P as Platform } from '../shared/uniwind.JSWK3vHl.mjs';
 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.F-0-Rr--.mjs';
+import { dirname, sep, basename } from 'node:path';
+import { n as name, u as uniq } from '../shared/uniwind.PtWWxxnh.mjs';
 
 class FileStore extends FileStoreBase {
   async set(key, value) {
@@ -70,8 +70,11 @@ const nativeResolver = (extraComponents) => ({
 }) => {
   const resolution = resolver(context, moduleName, platform);
   if (cachedInternalBasePath === null) {
-    const componentsResolution = resolver(context, `${name}/components`, platform);
-    cachedInternalBasePath = componentsResolution.type === "sourceFile" ? join(dirname(componentsResolution.filePath), "../..") : "";
+    try {
+      cachedInternalBasePath = dirname(require.resolve(`${name}/package.json`));
+    } catch {
+      cachedInternalBasePath = "";
+    }
   }
   const isInternal = cachedInternalBasePath !== "" && context.originModulePath.startsWith(cachedInternalBasePath);
   const isFromNodeModules = context.originModulePath.includes(`${sep}node_modules${sep}`);
@@ -107,8 +110,11 @@ const webResolver = (extraComponents) => ({
 }) => {
   const resolution = resolver(context, moduleName, platform);
   if (cachedInternalBasePath === null) {
-    const componentsResolution = resolver(context, `${name}/components`, platform);
-    cachedInternalBasePath = componentsResolution.type === "sourceFile" ? join(dirname(componentsResolution.filePath), "../../../..") : "";
+    try {
+      cachedInternalBasePath = dirname(require.resolve(`${name}/package.json`));
+    } catch {
+      cachedInternalBasePath = "";
+    }
   }
   if (cachedInternalBasePath !== "" && context.originModulePath.startsWith(cachedInternalBasePath) || resolution.type !== "sourceFile" || !resolution.filePath.includes(`${sep}react-native-web${sep}`)) {
     return resolution;

package/dist/metro/metro-transformer.cjs

@@ -2,12 +2,12 @@
 
 const fs = require('fs');
 const path = require('path');
-const common = require('../shared/uniwind.nl8746mK.cjs');
+const common = require('../shared/uniwind.Cv73KtI-.cjs');
 const consts = require('../shared/uniwind.B5q8hBGv.cjs');
 const node = require('@tailwindcss/node');
 const oxide = require('@tailwindcss/oxide');
 const lightningcss = require('lightningcss');
-const stringifyThemes = require('../shared/uniwind.BZyFsest.cjs');
+const stringifyThemes = require('../shared/uniwind.r2i22V6d.cjs');
 const culori = require('culori');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
@@ -114,6 +114,8 @@ const serializeJSObject = (obj, serializer) => {
   return serializedObject;
 };
 
+const isDefined = (value) => value !== void 0 && value !== null;
+
 var StyleDependency = /* @__PURE__ */ ((StyleDependency2) => {
   StyleDependency2[StyleDependency2["ColorScheme"] = 1] = "ColorScheme";
   StyleDependency2[StyleDependency2["Theme"] = 2] = "Theme";
@@ -156,8 +158,7 @@ const addMetaToStylesTemplate = (Processor, currentPlatform) => {
         minWidth,
         maxWidth,
         colorScheme,
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        important,
+        important: _,
         importantProperties,
         active,
         focus,
@@ -236,7 +237,7 @@ const addMetaToStylesTemplate = (Processor, currentPlatform) => {
         ].filter(Boolean).length
       };
     });
-    const filteredStyles = styles.filter(common.isDefined);
+    const filteredStyles = styles.filter(isDefined);
     if (filteredStyles.length === 0) {
       return null;
     }
@@ -244,7 +245,7 @@ const addMetaToStylesTemplate = (Processor, currentPlatform) => {
       className,
       filteredStyles
     ];
-  }).filter(common.isDefined);
+  }).filter(isDefined);
   const stylesheets = Object.fromEntries(stylesheetsEntries);
   return stylesheets;
 };
@@ -543,7 +544,7 @@ class CSS {
           this.processValue(filter.value.yOffset),
           this.processValue(filter.value.blur),
           this.processValue(filter.value.color)
-        ].filter(common.isDefined);
+        ].filter(isDefined);
         return `drop-shadow(${parts.join(" ")})`;
       }
       const value = this.processValue(filter.value);
@@ -776,7 +777,7 @@ class CSS {
           return [
             this.Processor.Color.processColor(declarationValue.color),
             declarationValue.position ? this.processValue(declarationValue.position) : null
-          ].filter(common.isDefined).join(" ");
+          ].filter(isDefined).join(" ");
         case "side":
           return declarationValue.side;
         case "absolute":
@@ -911,7 +912,7 @@ class CSS {
         this.processValue(declarationValue.blur),
         this.processValue(declarationValue.spread),
         this.processValue(declarationValue.color)
-      ].filter(common.isDefined).join(" ");
+      ].filter(isDefined).join(" ");
     }
     if ("blockStart" in declarationValue) {
       const startValue = this.processValue(declarationValue.blockStart);
@@ -959,7 +960,6 @@ class CSS {
     this.logUnsupported(`Unsupported value - ${JSON.stringify(declarationValue)}`);
     return void 0;
   }
-  // eslint-disable-next-line @typescript-eslint/member-ordering
   static TRANSFORM_TYPES = /* @__PURE__ */ new Set([
     "translate",
     "translateX",
@@ -1504,7 +1504,7 @@ class RN {
       typeof value === "string" ? common.addMissingSpaces(value) : value
     );
     const joinedStyles = this.joinStyles(rn);
-    return Object.entries(joinedStyles).filter(([, value2]) => common.isDefined(value2));
+    return Object.entries(joinedStyles).filter(([, value2]) => isDefined(value2));
   }
   transformProperty(property, value) {
     if (property in cssToRNMap) {
@@ -2072,7 +2072,7 @@ try {
   worker = require("metro-transform-worker");
 }
 const transform = async (config, projectRoot, filePath, data, options) => {
-  const isCss = options.type !== "asset" && path__default.join(process.cwd(), config.uniwind.cssEntryFile) === path__default.join(process.cwd(), filePath);
+  const isCss = options.type !== "asset" && path__default.join(process.cwd(), config.uniwind.cssEntryFile) === path__default.join(projectRoot, filePath);
   if (filePath.endsWith("/components/web/metro-injected.js")) {
     const cssPath2 = path__default.join(process.cwd(), config.uniwind.cssEntryFile);
     const injectedThemesCode2 = await injectThemes({
@@ -2109,7 +2109,7 @@ const transform = async (config, projectRoot, filePath, data, options) => {
     themes: config.uniwind.themes,
     dtsPath: config.uniwind.dtsFile
   });
-  const css = fs__default.readFileSync(filePath, "utf-8");
+  const css = fs__default.readFileSync(cssPath, "utf-8");
   const platform = getPlatform();
   const virtualCode = await compileVirtual({
     css,
@@ -2122,7 +2122,7 @@ const transform = async (config, projectRoot, filePath, data, options) => {
   const isWeb = platform === consts.Platform.Web;
   data = Buffer.from(
     isWeb ? virtualCode : [
-      `import { Uniwind } from '${common.name}';`,
+      `const { Uniwind } = require('${common.name}');`,
       `Uniwind.__reinit(rt => ${virtualCode}, ${injectedThemesCode});`
     ].join(""),
     "utf-8"

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.F-0-Rr--.mjs';
+import { p as pipe, r as roundToPrecision, i as isNumber, a as isValidJSValue, s as smartSplit, b as addMissingSpaces, t as toCamelCase, d as deepEqual, c as shouldBeSerialized, e as removeKeys, n as name } from '../shared/uniwind.PtWWxxnh.mjs';
 import { P as Platform, U as UNIWIND_PLATFORM_VARIABLES, a as UNIWIND_THEME_VARIABLES } from '../shared/uniwind.JSWK3vHl.mjs';
 import { compile } from '@tailwindcss/node';
 import { Scanner } from '@tailwindcss/oxide';
 import { transform as transform$1 } from 'lightningcss';
-import { L as Logger, U as UniwindCSSVisitor, s as stringifyThemes, b as buildDtsFile, a as buildCSS } from '../shared/uniwind.C-rHhHOg.mjs';
+import { L as Logger, U as UniwindCSSVisitor, s as stringifyThemes, b as buildDtsFile, a as buildCSS } from '../shared/uniwind.BGiqYvxb.mjs';
 import { converter, parse, formatHex, formatHex8 } from 'culori';
 
 const parseStringValue = (value) => {
@@ -107,6 +107,8 @@ const serializeJSObject = (obj, serializer) => {
   return serializedObject;
 };
 
+const isDefined = (value) => value !== void 0 && value !== null;
+
 var StyleDependency = /* @__PURE__ */ ((StyleDependency2) => {
   StyleDependency2[StyleDependency2["ColorScheme"] = 1] = "ColorScheme";
   StyleDependency2[StyleDependency2["Theme"] = 2] = "Theme";
@@ -149,8 +151,7 @@ const addMetaToStylesTemplate = (Processor, currentPlatform) => {
         minWidth,
         maxWidth,
         colorScheme,
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        important,
+        important: _,
         importantProperties,
         active,
         focus,
@@ -952,7 +953,6 @@ class CSS {
     this.logUnsupported(`Unsupported value - ${JSON.stringify(declarationValue)}`);
     return void 0;
   }
-  // eslint-disable-next-line @typescript-eslint/member-ordering
   static TRANSFORM_TYPES = /* @__PURE__ */ new Set([
     "translate",
     "translateX",
@@ -2065,7 +2065,7 @@ try {
   worker = require("metro-transform-worker");
 }
 const transform = async (config, projectRoot, filePath, data, options) => {
-  const isCss = options.type !== "asset" && path.join(process.cwd(), config.uniwind.cssEntryFile) === path.join(process.cwd(), filePath);
+  const isCss = options.type !== "asset" && path.join(process.cwd(), config.uniwind.cssEntryFile) === path.join(projectRoot, filePath);
   if (filePath.endsWith("/components/web/metro-injected.js")) {
     const cssPath2 = path.join(process.cwd(), config.uniwind.cssEntryFile);
     const injectedThemesCode2 = await injectThemes({
@@ -2102,7 +2102,7 @@ const transform = async (config, projectRoot, filePath, data, options) => {
     themes: config.uniwind.themes,
     dtsPath: config.uniwind.dtsFile
   });
-  const css = fs.readFileSync(filePath, "utf-8");
+  const css = fs.readFileSync(cssPath, "utf-8");
   const platform = getPlatform();
   const virtualCode = await compileVirtual({
     css,
@@ -2115,7 +2115,7 @@ const transform = async (config, projectRoot, filePath, data, options) => {
   const isWeb = platform === Platform.Web;
   data = Buffer.from(
     isWeb ? virtualCode : [
-      `import { Uniwind } from '${name}';`,
+      `const { Uniwind } = require('${name}');`,
       `Uniwind.__reinit(rt => ${virtualCode}, ${injectedThemesCode});`
     ].join(""),
     "utf-8"

package/dist/module/common/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const isDefined: <T>(value: T) => value is NonNullable<T>;
+export declare const arrayEquals: <T>(a: Array<T>, b: Array<T>) => boolean;

package/dist/module/common/utils.js

@@ -0,0 +1,7 @@
+export const isDefined = (value) => value !== void 0 && value !== null;
+export const arrayEquals = (a, b) => {
+  if (a.length !== b.length) {
+    return false;
+  }
+  return a.every((value, index) => value === b[index]);
+};

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

@@ -1,10 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { ActivityIndicator as RNActivityIndicator } from "react-native";
 import { copyComponentProperties } from "../utils.js";
+import { useAccentColor } from "./useAccentColor.js";
 import { useStyle } from "./useStyle.js";
 export const ActivityIndicator = copyComponentProperties(RNActivityIndicator, (props) => {
   const { Component, style } = useStyle(RNActivityIndicator, props.className, props, { isPressed: Boolean(props.animating) });
-  const color = useStyle(props.colorClassName, props).accentColor;
+  const color = useAccentColor(props.colorClassName, props);
   return /* @__PURE__ */ jsx(
     Component,
     {

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

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { Button as RNButton } from "react-native";
 import { copyComponentProperties } from "../utils.js";
-import { useStyle } from "./useStyle.js";
+import { useAccentColor } from "./useAccentColor.js";
 export const Button = copyComponentProperties(RNButton, (props) => {
-  const color = useStyle(props.colorClassName, props).accentColor;
+  const color = useAccentColor(props.colorClassName, props);
   return /* @__PURE__ */ jsx(
     RNButton,
     {

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

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { FlatList as RNFlatList } from "react-native";
 import { copyComponentProperties } from "../utils.js";
+import { useAccentColor } from "./useAccentColor.js";
 import { useStyle } from "./useStyle.js";
 export const FlatList = copyComponentProperties(RNFlatList, (props) => {
   const { Component, style } = useStyle(RNFlatList, props.className, props);
@@ -8,7 +9,7 @@ export const FlatList = copyComponentProperties(RNFlatList, (props) => {
   const styleContentContainer = useStyle(props.contentContainerClassName, props);
   const styleListFooterComponent = useStyle(props.ListFooterComponentClassName, props);
   const styleListHeaderComponent = useStyle(props.ListHeaderComponentClassName, props);
-  const endFillColor = useStyle(props.endFillColorClassName, props).accentColor;
+  const endFillColor = useAccentColor(props.endFillColorClassName, props);
   const hasSingleColumn = !("numColumns" in props) || props.numColumns === 1;
   return /* @__PURE__ */ jsx(
     Component,

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

@@ -1,10 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { Image as RNImage } from "react-native";
 import { copyComponentProperties } from "../utils.js";
+import { useAccentColor } from "./useAccentColor.js";
 import { useStyle } from "./useStyle.js";
 export const Image = copyComponentProperties(RNImage, (props) => {
   const { Component, style } = useStyle(RNImage, props.className, props);
-  const tintColor = useStyle(props.tintColorClassName, props).accentColor;
+  const tintColor = useAccentColor(props.tintColorClassName, props);
   return /* @__PURE__ */ jsx(
     Component,
     {

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

@@ -1,11 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { ImageBackground as RNImageBackground } from "react-native";
 import { copyComponentProperties } from "../utils.js";
+import { useAccentColor } from "./useAccentColor.js";
 import { useStyle } from "./useStyle.js";
 export const ImageBackground = copyComponentProperties(RNImageBackground, (props) => {
   const { Component, style } = useStyle(RNImageBackground, props.className, props);
   const imageStyle = useStyle(props.imageClassName, props);
-  const tintColor = useStyle(props.tintColorClassName, props).accentColor;
+  const tintColor = useAccentColor(props.tintColorClassName, props);
   return /* @__PURE__ */ jsx(
     Component,
     {

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

@@ -1,12 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { InputAccessoryView as RNInputAccessoryView } from "react-native";
 import { copyComponentProperties } from "../utils.js";
+import { useAccentColor } from "./useAccentColor.js";
 import { useStyle } from "./useStyle.js";
 export const InputAccessoryView = copyComponentProperties(
   RNInputAccessoryView,
   (props) => {
     const { Component, style } = useStyle(RNInputAccessoryView, props.className, props);
-    const backgroundColor = useStyle(props.backgroundColorClassName, props).accentColor;
+    const backgroundColor = useAccentColor(props.backgroundColorClassName, props);
     return /* @__PURE__ */ jsx(
       Component,
       {

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

@@ -1,10 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { Modal as RNModal } from "react-native";
 import { copyComponentProperties } from "../utils.js";
+import { useAccentColor } from "./useAccentColor.js";
 import { useStyle } from "./useStyle.js";
 export const Modal = copyComponentProperties(RNModal, (props) => {
   const { Component, style } = useStyle(RNModal, props.className, props);
-  const backdropColor = useStyle(props.backdropColorClassName, props).accentColor;
+  const backdropColor = useAccentColor(props.backdropColorClassName, props);
   return /* @__PURE__ */ jsx(
     Component,
     {

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

@@ -1,15 +1,16 @@
 import { jsx } from "react/jsx-runtime";
 import { RefreshControl as RNRefreshControl } from "react-native";
 import { copyComponentProperties } from "../utils.js";
+import { useAccentColor } from "./useAccentColor.js";
 import { useStyle } from "./useStyle.js";
 export const RefreshControl = copyComponentProperties(RNRefreshControl, (props) => {
   const { Component, style } = useStyle(RNRefreshControl, props.className, props, {
     isPressed: Boolean(props.refreshing)
   });
-  const color = useStyle(props.colorsClassName, props).accentColor;
-  const tintColor = useStyle(props.tintColorClassName, props).accentColor;
-  const titleColor = useStyle(props.titleColorClassName, props).accentColor;
-  const progressBackgroundColor = useStyle(props.progressBackgroundColorClassName, props).accentColor;
+  const color = useAccentColor(props.colorsClassName, props);
+  const tintColor = useAccentColor(props.tintColorClassName, props);
+  const titleColor = useAccentColor(props.titleColorClassName, props);
+  const progressBackgroundColor = useAccentColor(props.progressBackgroundColorClassName, props);
   return /* @__PURE__ */ jsx(
     Component,
     {

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

@@ -1,11 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { ScrollView as RNScrollView } from "react-native";
 import { copyComponentProperties } from "../utils.js";
+import { useAccentColor } from "./useAccentColor.js";
 import { useStyle } from "./useStyle.js";
 export const ScrollView = copyComponentProperties(RNScrollView, (props) => {
   const { Component, style } = useStyle(RNScrollView, props.className, props);
   const contentContainerStyle = useStyle(props.contentContainerClassName, props);
-  const endFillColor = useStyle(props.endFillColorClassName, props).accentColor;
+  const endFillColor = useAccentColor(props.endFillColorClassName, props);
   return /* @__PURE__ */ jsx(
     Component,
     {