@niibase/uniwind 1.6.1 → 1.6.2

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/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; }
 

package/dist/metro/index.mjs

@@ -3,7 +3,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.F-0-Rr--.mjs';
+import { n as name, u as uniq } from '../shared/uniwind.PtWWxxnh.mjs';
 
 class FileStore extends FileStoreBase {
   async set(key, value) {

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";
@@ -236,7 +238,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 +246,7 @@ const addMetaToStylesTemplate = (Processor, currentPlatform) => {
       className,
       filteredStyles
     ];
-  }).filter(common.isDefined);
+  }).filter(isDefined);
   const stylesheets = Object.fromEntries(stylesheetsEntries);
   return stylesheets;
 };
@@ -543,7 +545,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 +778,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 +913,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);
@@ -1504,7 +1506,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 +2074,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 +2111,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,

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";
@@ -2065,7 +2067,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 +2104,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,

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

@@ -0,0 +1 @@
+export declare const isDefined: <T>(value: T) => value is NonNullable<T>;

package/dist/module/common/utils.js

@@ -0,0 +1 @@
+export const isDefined = (value) => value !== void 0 && value !== null;

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,
     {

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

@@ -1,13 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import { SectionList as RNSectionList } from "react-native";
 import { copyComponentProperties } from "../utils.js";
+import { useAccentColor } from "./useAccentColor.js";
 import { useStyle } from "./useStyle.js";
 export const SectionList = copyComponentProperties(RNSectionList, (props) => {
   const { Component, style } = useStyle(RNSectionList, props.className, props);
   const contentContainerStyle = useStyle(props.contentContainerClassName, props);
   const listFooterComponentStyle = useStyle(props.ListFooterComponentClassName, props);
   const listHeaderComponentStyle = useStyle(props.ListHeaderComponentClassName, props);
-  const endFillColor = useStyle(props.endFillColorClassName, props).accentColor;
+  const endFillColor = useAccentColor(props.endFillColorClassName, props);
   return /* @__PURE__ */ jsx(
     Component,
     {

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

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { Switch as RNSwitch } from "react-native";
 import { copyComponentProperties } from "../utils.js";
+import { useAccentColor } from "./useAccentColor.js";
 import { useStyle } from "./useStyle.js";
 export const Switch = copyComponentProperties(RNSwitch, (props) => {
   const state = {
@@ -8,10 +9,10 @@ export const Switch = copyComponentProperties(RNSwitch, (props) => {
     isPressed: Boolean(props.value)
   };
   const { Component, style } = useStyle(RNSwitch, props.className, props, state);
-  const trackColorOn = useStyle(props.trackColorOnClassName, props, state).accentColor;
-  const trackColorOff = useStyle(props.trackColorOffClassName, props, state).accentColor;
-  const thumbColor = useStyle(props.thumbColorClassName, props, state).accentColor;
-  const ios_backgroundColor = useStyle(props.ios_backgroundColorClassName, props, state).accentColor;
+  const trackColorOn = useAccentColor(props.trackColorOnClassName, props, state);
+  const trackColorOff = useAccentColor(props.trackColorOffClassName, props, state);
+  const thumbColor = useAccentColor(props.thumbColorClassName, props, state);
+  const ios_backgroundColor = useAccentColor(props.ios_backgroundColorClassName, props, state);
   return /* @__PURE__ */ jsx(
     Component,
     {

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

@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { Text as RNText } from "react-native";
 import { copyComponentProperties } from "../utils.js";
+import { useAccentColor } from "./useAccentColor.js";
 import { useStyle } from "./useStyle.js";
 export const Text = copyComponentProperties(RNText, (props) => {
   const [isPressed, setIsPressed] = useState(false);
@@ -10,7 +11,7 @@ export const Text = copyComponentProperties(RNText, (props) => {
     isDisabled: Boolean(props.disabled)
   };
   const { Component, style } = useStyle(RNText, props.className, props, state);
-  const selectionColor = useStyle(props.selectionColorClassName, props, state).accentColor;
+  const selectionColor = useAccentColor(props.selectionColorClassName, props, state);
   return /* @__PURE__ */ jsx(
     Component,
     {

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

@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { TextInput as RNTextInput } from "react-native";
 import { copyComponentProperties } from "../utils.js";
+import { useAccentColor } from "./useAccentColor.js";
 import { useStyle } from "./useStyle.js";
 export const TextInput = copyComponentProperties(RNTextInput, (props) => {
   const [isFocused, setIsFocused] = useState(false);
@@ -12,11 +13,11 @@ export const TextInput = copyComponentProperties(RNTextInput, (props) => {
     isPressed
   };
   const { Component, style } = useStyle(RNTextInput, 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;
+  const cursorColor = useAccentColor(props.cursorColorClassName, props, state);
+  const selectionColor = useAccentColor(props.selectionColorClassName, props, state);
+  const placeholderTextColor = useAccentColor(props.placeholderTextColorClassName, props, state);
+  const selectionHandleColor = useAccentColor(props.selectionHandleColorClassName, props, state);
+  const underlineColorAndroid = useAccentColor(props.underlineColorAndroidClassName, props, state);
   return /* @__PURE__ */ jsx(
     Component,
     {

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

@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { TouchableHighlight as RNTouchableHighlight } from "react-native";
 import { copyComponentProperties } from "../utils.js";
+import { useAccentColor } from "./useAccentColor.js";
 import { useStyle } from "./useStyle.js";
 export const TouchableHighlight = copyComponentProperties(RNTouchableHighlight, (props) => {
   const [isPressed, setIsPressed] = useState(false);
@@ -12,7 +13,7 @@ export const TouchableHighlight = copyComponentProperties(RNTouchableHighlight,
     isFocused
   };
   const { Component, style } = useStyle(RNTouchableHighlight, props.className, props, state);
-  const underlayColor = useStyle(props.underlayColorClassName, props, state).accentColor;
+  const underlayColor = useAccentColor(props.underlayColorClassName, props, state);
   return /* @__PURE__ */ jsx(
     Component,
     {

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

@@ -1,13 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import { VirtualizedList as RNVirtualizedList } from "react-native";
 import { copyComponentProperties } from "../utils.js";
+import { useAccentColor } from "./useAccentColor.js";
 import { useStyle } from "./useStyle.js";
 export const VirtualizedList = copyComponentProperties(RNVirtualizedList, (props) => {
   const { Component, style } = useStyle(RNVirtualizedList, props.className, props);
   const contentContainerStyle = useStyle(props.contentContainerClassName, props);
   const listFooterComponentStyle = useStyle(props.ListFooterComponentClassName, props);
   const listHeaderComponentStyle = useStyle(props.ListHeaderComponentClassName, props);
-  const endFillColor = useStyle(props.endFillColorClassName, props).accentColor;
+  const endFillColor = useAccentColor(props.endFillColorClassName, props);
   return /* @__PURE__ */ jsx(
     Component,
     {

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

@@ -0,0 +1,2 @@
+import { ComponentState } from '../../core/types';
+export declare const useAccentColor: (className: string | undefined, componentProps: Record<string, any>, state?: ComponentState) => string | undefined;

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

@@ -0,0 +1,14 @@
+import { isDefined } from "../../common/utils.js";
+import { Logger } from "../../core/logger.js";
+import { useStyle } from "./useStyle.js";
+let warnedOnce = false;
+export const useAccentColor = (className, componentProps, state) => {
+  const styles = useStyle(className, componentProps, state);
+  if (__DEV__ && !warnedOnce && isDefined(className) && className.trim() !== "" && styles.accentColor === void 0) {
+    warnedOnce = true;
+    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`
+    );
+  }
+  return styles.accentColor;
+};

package/dist/module/components/react-native-gesture-handler/native/FlatList.js

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { FlatList as RNGHFlatList } from "react-native-gesture-handler";
+import { useAccentColor } from "../../native/useAccentColor.js";
 import { useStyle } from "../../native/useStyle.js";
 import { copyComponentProperties } from "../../utils.js";
 export const FlatList = copyComponentProperties(RNGHFlatList, (props) => {
@@ -8,7 +9,7 @@ export const FlatList = copyComponentProperties(RNGHFlatList, (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(
     RNGHFlatList,

package/dist/module/components/react-native-gesture-handler/native/RefreshControl.js

@@ -1,13 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import { RefreshControl as RNGHRefreshControl } from "react-native-gesture-handler";
+import { useAccentColor } from "../../native/useAccentColor.js";
 import { useStyle } from "../../native/useStyle.js";
 import { copyComponentProperties } from "../../utils.js";
 export const RefreshControl = copyComponentProperties(RNGHRefreshControl, (props) => {
   const style = useStyle(props.className, props);
-  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(
     RNGHRefreshControl,
     {

package/dist/module/components/react-native-gesture-handler/native/Text.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { Text as RNGHText } from "react-native-gesture-handler";
+import { useAccentColor } from "../../native/useAccentColor.js";
 import { useStyle } from "../../native/useStyle.js";
 import { copyComponentProperties } from "../../utils.js";
 export const Text = copyComponentProperties(RNGHText, (props) => {
@@ -10,7 +11,7 @@ export const Text = copyComponentProperties(RNGHText, (props) => {
     isDisabled: Boolean(props.disabled)
   };
   const style = useStyle(props.className, props, state);
-  const selectionColor = useStyle(props.selectionColorClassName, props, state).accentColor;
+  const selectionColor = useAccentColor(props.selectionColorClassName, props, state);
   return /* @__PURE__ */ jsx(
     RNGHText,
     {

package/dist/module/components/react-native-gesture-handler/native/TextInput.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { TextInput as RNGHTextInput } from "react-native-gesture-handler";
+import { useAccentColor } from "../../native/useAccentColor.js";
 import { useStyle } from "../../native/useStyle.js";
 import { copyComponentProperties } from "../../utils.js";
 export const TextInput = copyComponentProperties(RNGHTextInput, (props) => {
@@ -13,10 +14,10 @@ export const TextInput = copyComponentProperties(RNGHTextInput, (props) => {
   };
   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;
+  const selectionColor = useAccentColor(props.selectionColorClassName, props, state);
+  const placeholderTextColor = useAccentColor(props.placeholderTextColorClassName, props, state);
+  const selectionHandleColor = useAccentColor(props.selectionHandleColorClassName, props, state);
+  const underlineColorAndroid = useAccentColor(props.underlineColorAndroidClassName, props, state);
   return /* @__PURE__ */ jsx(
     RNGHTextInput,
     {

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

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { ActivityIndicator as RNActivityIndicator } from "react-native";
-import { useUniwindAccent } from "../../hooks/index.js";
 import { copyComponentProperties } from "../utils.js";
 import { generateDataSet } from "./generateDataSet.js";
 import { toRNWClassName } from "./rnw.js";
+import { useUniwindAccent } from "./useUniwindAccent.js";
 export const ActivityIndicator = copyComponentProperties(RNActivityIndicator, (props) => {
   const color = useUniwindAccent(props.colorClassName);
   return /* @__PURE__ */ jsx(

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

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { Button as RNButton } from "react-native";
-import { useUniwindAccent } from "../../hooks/index.js";
 import { copyComponentProperties } from "../utils.js";
 import { generateDataSet } from "./generateDataSet.js";
+import { useUniwindAccent } from "./useUniwindAccent.js";
 export const Button = copyComponentProperties(RNButton, (props) => {
   const color = useUniwindAccent(props.colorClassName);
   return /* @__PURE__ */ jsx(

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

@@ -1,9 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { Image as RNImage } from "react-native";
-import { useResolveClassNames, useUniwindAccent } from "../../hooks/index.js";
+import { useResolveClassNames } from "../../hooks/index.js";
 import { copyComponentProperties } from "../utils.js";
 import { generateDataSet } from "./generateDataSet.js";
 import { toRNWClassName } from "./rnw.js";
+import { useUniwindAccent } from "./useUniwindAccent.js";
 export const Image = copyComponentProperties(RNImage, (props) => {
   const tintColor = useUniwindAccent(props.tintColorClassName);
   const styles = useResolveClassNames(props.className ?? "");

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

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { ImageBackground as RNImageBackground } from "react-native";
-import { useUniwindAccent } from "../../hooks/index.js";
 import { copyComponentProperties } from "../utils.js";
 import { generateDataSet } from "./generateDataSet.js";
 import { toRNWClassName } from "./rnw.js";
+import { useUniwindAccent } from "./useUniwindAccent.js";
 export const ImageBackground = copyComponentProperties(RNImageBackground, (props) => {
   const tintColor = useUniwindAccent(props.tintColorClassName);
   return /* @__PURE__ */ jsx(

package/dist/module/components/web/Switch.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { Switch as RNSwitch } from "react-native";
-import { useUniwindAccent } from "../../hooks/index.js";
 import { copyComponentProperties } from "../utils.js";
 import { generateDataSet } from "./generateDataSet.js";
 import { toRNWClassName } from "./rnw.js";
+import { useUniwindAccent } from "./useUniwindAccent.js";
 export const Switch = copyComponentProperties(RNSwitch, (props) => {
   const trackColorOn = useUniwindAccent(props.trackColorOnClassName);
   const trackColorOff = useUniwindAccent(props.trackColorOffClassName);

package/dist/module/components/web/TextInput.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { TextInput as RNTextInput } from "react-native";
-import { useUniwindAccent } from "../../hooks/index.js";
 import { copyComponentProperties } from "../utils.js";
 import { generateDataSet } from "./generateDataSet.js";
 import { toRNWClassName } from "./rnw.js";
+import { useUniwindAccent } from "./useUniwindAccent.js";
 export const TextInput = copyComponentProperties(RNTextInput, (props) => {
   const placeholderTextColor = useUniwindAccent(props.placeholderTextColorClassName);
   return /* @__PURE__ */ jsx(

package/dist/module/components/web/TouchableHighlight.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { TouchableHighlight as RNTouchableHighlight } from "react-native";
-import { useUniwindAccent } from "../../hooks/index.js";
 import { copyComponentProperties } from "../utils.js";
 import { generateDataSet } from "./generateDataSet.js";
 import { toRNWClassName } from "./rnw.js";
+import { useUniwindAccent } from "./useUniwindAccent.js";
 export const TouchableHighlight = copyComponentProperties(RNTouchableHighlight, (props) => {
   const underlayColor = useUniwindAccent(props.underlayColorClassName);
   return /* @__PURE__ */ jsx(