@niibase/uniwind 1.6.0 → 1.6.2

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getWebVariable = exports.getWebStyles = void 0;
+var _generateDataSet = require("../../components/web/generateDataSet");
 var _cssListener = require("./cssListener");
 var _parseCSSValue = require("./parseCSSValue");
 const dummyParent = typeof document !== "undefined" ? Object.assign(document.createElement("div"), {
@@ -38,7 +39,7 @@ const getActiveStylesForClass = className => {
   });
   return extractedStyles;
 };
-const getWebStyles = (className, uniwindContext) => {
+const getWebStyles = (className, componentProps, uniwindContext) => {
   if (className === void 0) {
     return {};
   }
@@ -51,7 +52,17 @@ const getWebStyles = (className, uniwindContext) => {
     dummyParent?.removeAttribute("class");
   }
   dummy.className = className;
+  const dataSet = (0, _generateDataSet.generateDataSet)(componentProps ?? {});
+  Object.entries(dataSet).forEach(([key, value]) => {
+    if (value === false || value === void 0) {
+      return;
+    }
+    dummy.dataset[key] = String(value);
+  });
   const computedStyles = getActiveStylesForClass(className);
+  Object.keys(dataSet).forEach(key => {
+    delete dummy.dataset[key];
+  });
   return Object.fromEntries(Object.entries(computedStyles).map(([key, value]) => {
     const parsedKey = key[0] === "-" ? key : key.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
     return [parsedKey, (0, _parseCSSValue.parseCSSValue)(value)];

package/dist/common/hoc/withUniwind.js

@@ -6,9 +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 => {
@@ -23,7 +27,11 @@ const withAutoUniwind = Component2 => props => {
         return acc;
       }
       const className = propValue;
-      const color = (0, _web.getWebStyles)(className, uniwindContext).accentColor;
+      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;
@@ -54,7 +62,8 @@ const withAutoUniwind = Component2 => props => {
   }, [classNames]);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component2, {
     ...props,
-    ...generatedProps
+    ...generatedProps,
+    dataSet: (0, _generateDataSet.generateDataSet)(props)
   });
 };
 const withManualUniwind = (Component2, options) => props => {
@@ -71,7 +80,7 @@ const withManualUniwind = (Component2, options) => props => {
       if (props[propName] !== void 0) {
         return acc;
       }
-      const value = (0, _web.getWebStyles)(className, uniwindContext)[option.styleProperty];
+      const value = (0, _web.getWebStyles)(className, props, uniwindContext)[option.styleProperty];
       const transformedValue = value !== void 0 && option.styleProperty.toLowerCase().includes("color") ? (0, _web.formatColor)(value) : value;
       acc.classNames += `${className} `;
       acc.generatedProps[propName] = transformedValue;
@@ -93,6 +102,7 @@ const withManualUniwind = (Component2, options) => props => {
   }, [classNames]);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component2, {
     ...props,
-    ...generatedProps
+    ...generatedProps,
+    dataSet: (0, _generateDataSet.generateDataSet)(props)
   });
 };

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 => {
@@ -26,7 +29,11 @@ const withAutoUniwind = Component2 => props => {
       const {
         styles,
         dependencies: dependencies2
-      } = _native.UniwindStore.getStyles(propValue, void 0, void 0, uniwindContext);
+      } = _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;
@@ -36,7 +43,7 @@ const withAutoUniwind = Component2 => props => {
       const {
         styles,
         dependencies: dependencies2
-      } = _native.UniwindStore.getStyles(propValue, void 0, void 0, uniwindContext);
+      } = _native.UniwindStore.getStyles(propValue, props, void 0, uniwindContext);
       acc.dependencies.push(...dependencies2);
       acc.generatedProps[styleProp] ??= [];
       acc.generatedProps[styleProp][0] = styles;
@@ -83,7 +90,7 @@ const withManualUniwind = (Component2, options) => props => {
       const {
         styles: styles2,
         dependencies: dependencies3
-      } = _native.UniwindStore.getStyles(className, void 0, void 0, uniwindContext);
+      } = _native.UniwindStore.getStyles(className, props, void 0, uniwindContext);
       acc.generatedProps[propName] = styles2[option.styleProperty];
       acc.dependencies.push(...dependencies3);
       return acc;
@@ -91,7 +98,7 @@ const withManualUniwind = (Component2, options) => props => {
     const {
       styles,
       dependencies: dependencies2
-    } = _native.UniwindStore.getStyles(className, void 0, void 0, uniwindContext);
+    } = _native.UniwindStore.getStyles(className, props, void 0, uniwindContext);
     acc.dependencies.push(...dependencies2);
     if (!(0, _withUniwindUtils.isStyleProperty)(propName)) {
       acc.generatedProps[propName] = styles;

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/useResolveClassNames.js

@@ -10,7 +10,7 @@ var _web = require("../core/web");
 const emptyState = {};
 const useResolveClassNames = className => {
   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);
+  const [styles, recreate] = (0, _react.useReducer)(() => className !== "" ? (0, _web.getWebStyles)(className, void 0, uniwindContext) : emptyState, void 0, () => className !== "" ? (0, _web.getWebStyles)(className, void 0, uniwindContext) : emptyState);
   (0, _react.useLayoutEffect)(() => {
     if (className === "") {
       return;

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;
 };
@@ -340,8 +342,9 @@ class Color {
           mode: "rgb"
         });
       }
+      const colorType = color.type === "display-p3" ? "p3" : color.type;
       const result = this.toRgb({
-        mode: color.type,
+        mode: colorType,
         ...color
       });
       return this.format(result);
@@ -542,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);
@@ -775,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":
@@ -910,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);
@@ -1503,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) {
@@ -2071,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({
@@ -2108,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";
@@ -333,8 +335,9 @@ class Color {
           mode: "rgb"
         });
       }
+      const colorType = color.type === "display-p3" ? "p3" : color.type;
       const result = this.toRgb({
-        mode: color.type,
+        mode: colorType,
         ...color
       });
       return this.format(result);
@@ -2064,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({
@@ -2101,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;
+};