@niibase/uniwind 1.6.0 → 1.6.2

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(

package/dist/module/components/web/generateDataSet.d.ts

@@ -1,5 +1,5 @@
 export declare const generateDataSet: (props: Record<PropertyKey, any>) => DataSet;
-type DataSet = Record<string, string | boolean>;
+type DataSet = Record<string, string | boolean | undefined>;
 declare module 'react-native' {
     interface SwitchProps {
         dataSet?: DataSet;

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

@@ -1,8 +1,9 @@
+const toCamelCase = (str) => str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
 export const generateDataSet = (props) => {
   const dataSet = props.dataSet !== void 0 ? { ...props.dataSet } : {};
   Object.entries(props).forEach(([key, value]) => {
     if (key.startsWith("data-")) {
-      dataSet[key.slice(5)] = value;
+      dataSet[toCamelCase(key.slice(5))] = value;
     }
   });
   return dataSet;

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

@@ -0,0 +1,15 @@
+import { isDefined } from "../../common/utils.js";
+import { Logger } from "../../core/logger.js";
+import { formatColor } from "../../core/web/formatColor.js";
+import { useResolveClassNames } from "../../hooks/useResolveClassNames.js";
+let warnedOnce = false;
+export const useUniwindAccent = (className) => {
+  const styles = useResolveClassNames(className ?? "");
+  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 !== void 0 ? formatColor(styles.accentColor) : void 0;
+};

package/dist/module/core/web/getWebStyles.d.ts

@@ -1,3 +1,3 @@
 import { RNStyle, UniwindContextType } from '../types';
-export declare const getWebStyles: (className: string | undefined, uniwindContext: UniwindContextType) => RNStyle;
+export declare const getWebStyles: (className: string | undefined, componentProps: Record<string, unknown> | undefined, uniwindContext: UniwindContextType) => RNStyle;
 export declare const getWebVariable: (name: string, uniwindContext: UniwindContextType) => string | undefined;

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

@@ -1,3 +1,4 @@
+import { generateDataSet } from "../../components/web/generateDataSet.js";
 import { CSSListener } from "./cssListener.js";
 import { parseCSSValue } from "./parseCSSValue.js";
 const dummyParent = typeof document !== "undefined" ? Object.assign(document.createElement("div"), {
@@ -33,7 +34,7 @@ const getActiveStylesForClass = (className) => {
   });
   return extractedStyles;
 };
-export const getWebStyles = (className, uniwindContext) => {
+export const getWebStyles = (className, componentProps, uniwindContext) => {
   if (className === void 0) {
     return {};
   }
@@ -46,7 +47,17 @@ export const getWebStyles = (className, uniwindContext) => {
     dummyParent?.removeAttribute("class");
   }
   dummy.className = className;
+  const dataSet = 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());

package/dist/module/hoc/withUniwind.js

@@ -1,8 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { useLayoutEffect, useReducer } from "react";
+import { isDefined } from "../common/utils.js";
+import { generateDataSet } from "../components/web/generateDataSet.js";
 import { useUniwindContext } from "../core/context.js";
+import { Logger } from "../core/logger.js";
 import { CSSListener, formatColor, getWebStyles } from "../core/web/index.js";
 import { classToColor, classToStyle, isClassProperty, isColorClassProperty, isStyleProperty } from "./withUniwindUtils.js";
+let warnedOnce = false;
 export const withUniwind = (Component2, options) => options ? withManualUniwind(Component2, options) : withAutoUniwind(Component2);
 const withAutoUniwind = (Component2) => (props) => {
   const uniwindContext = useUniwindContext();
@@ -13,7 +17,13 @@ const withAutoUniwind = (Component2) => (props) => {
         return acc;
       }
       const className = propValue;
-      const color = getWebStyles(className, uniwindContext).accentColor;
+      const color = getWebStyles(className, props, uniwindContext).accentColor;
+      if (__DEV__ && !warnedOnce && isDefined(className) && className.trim() !== "" && color === 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`
+        );
+      }
       acc.generatedProps[colorProp] = color !== void 0 ? formatColor(color) : void 0;
       acc.classNames += `${className} `;
       return acc;
@@ -40,7 +50,8 @@ const withAutoUniwind = (Component2) => (props) => {
     Component2,
     {
       ...props,
-      ...generatedProps
+      ...generatedProps,
+      dataSet: generateDataSet(props)
     }
   );
 };
@@ -55,7 +66,7 @@ const withManualUniwind = (Component2, options) => (props) => {
       if (props[propName] !== void 0) {
         return acc;
       }
-      const value = getWebStyles(className, uniwindContext)[option.styleProperty];
+      const value = getWebStyles(className, props, uniwindContext)[option.styleProperty];
       const transformedValue = value !== void 0 && option.styleProperty.toLowerCase().includes("color") ? formatColor(value) : value;
       acc.classNames += `${className} `;
       acc.generatedProps[propName] = transformedValue;
@@ -73,7 +84,8 @@ const withManualUniwind = (Component2, options) => (props) => {
     Component2,
     {
       ...props,
-      ...generatedProps
+      ...generatedProps,
+      dataSet: generateDataSet(props)
     }
   );
 };

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

@@ -1,9 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { useLayoutEffect, useReducer } from "react";
+import { isDefined } from "../common/utils.js";
 import { useUniwindContext } from "../core/context.js";
 import { UniwindListener } from "../core/listener.js";
+import { Logger } from "../core/logger.js";
 import { UniwindStore } from "../core/native/index.js";
 import { classToColor, classToStyle, isClassProperty, isColorClassProperty, isStyleProperty } from "./withUniwindUtils.js";
+let warnedOnce = false;
 export const withUniwind = (Component2, options) => options ? withManualUniwind(Component2, options) : withAutoUniwind(Component2);
 const withAutoUniwind = (Component2) => (props) => {
   const uniwindContext = useUniwindContext();
@@ -13,14 +16,20 @@ const withAutoUniwind = (Component2) => (props) => {
       if (props[colorProp] !== void 0) {
         return acc;
       }
-      const { styles, dependencies: dependencies2 } = UniwindStore.getStyles(propValue, void 0, void 0, uniwindContext);
+      const { styles, dependencies: dependencies2 } = UniwindStore.getStyles(propValue, props, void 0, uniwindContext);
+      if (__DEV__ && !warnedOnce && isDefined(propValue) && propValue.trim() !== "" && styles.accentColor === void 0) {
+        warnedOnce = true;
+        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;
     }
     if (isClassProperty(propName)) {
       const styleProp = classToStyle(propName);
-      const { styles, dependencies: dependencies2 } = UniwindStore.getStyles(propValue, void 0, void 0, uniwindContext);
+      const { styles, dependencies: dependencies2 } = UniwindStore.getStyles(propValue, props, void 0, uniwindContext);
       acc.dependencies.push(...dependencies2);
       acc.generatedProps[styleProp] ??= [];
       acc.generatedProps[styleProp][0] = styles;
@@ -61,12 +70,12 @@ const withManualUniwind = (Component2, options) => (props) => {
       if (props[propName] !== void 0) {
         return acc;
       }
-      const { styles: styles2, dependencies: dependencies3 } = UniwindStore.getStyles(className, void 0, void 0, uniwindContext);
+      const { styles: styles2, dependencies: dependencies3 } = UniwindStore.getStyles(className, props, void 0, uniwindContext);
       acc.generatedProps[propName] = styles2[option.styleProperty];
       acc.dependencies.push(...dependencies3);
       return acc;
     }
-    const { styles, dependencies: dependencies2 } = UniwindStore.getStyles(className, void 0, void 0, uniwindContext);
+    const { styles, dependencies: dependencies2 } = UniwindStore.getStyles(className, props, void 0, uniwindContext);
     acc.dependencies.push(...dependencies2);
     if (!isStyleProperty(propName)) {
       acc.generatedProps[propName] = styles;

package/dist/module/hooks/index.d.ts

@@ -1,4 +1,3 @@
 export * from './useCSSVariable';
 export * from './useResolveClassNames';
 export * from './useUniwind';
-export * from './useUniwindAccent';

package/dist/module/hooks/index.js

@@ -1,4 +1,3 @@
 export * from "./useCSSVariable/index.js";
 export * from "./useResolveClassNames.js";
 export * from "./useUniwind.js";
-export * from "./useUniwindAccent.js";

package/dist/module/hooks/useResolveClassNames.js

@@ -5,9 +5,9 @@ const emptyState = {};
 export const useResolveClassNames = (className) => {
   const uniwindContext = useUniwindContext();
   const [styles, recreate] = useReducer(
-    () => className !== "" ? getWebStyles(className, uniwindContext) : emptyState,
+    () => className !== "" ? getWebStyles(className, void 0, uniwindContext) : emptyState,
     void 0,
-    () => className !== "" ? getWebStyles(className, uniwindContext) : emptyState
+    () => className !== "" ? getWebStyles(className, void 0, uniwindContext) : emptyState
   );
   useLayoutEffect(() => {
     if (className === "") {

package/dist/module/hooks/useUniwind.d.ts

@@ -1,4 +1,5 @@
+import { ThemeName } from '../core/types';
 export declare const useUniwind: () => {
-    theme: string;
+    theme: ThemeName;
     hasAdaptiveThemes: boolean;
 };

package/dist/shared/{uniwind.C-rHhHOg.mjs → uniwind.BGiqYvxb.mjs}

@@ -2,7 +2,7 @@ import fs from 'fs';
 import path from 'path';
 import { compile } from '@tailwindcss/node';
 import { transform } from 'lightningcss';
-import { n as name } from './uniwind.F-0-Rr--.mjs';
+import { n as name } from './uniwind.PtWWxxnh.mjs';
 
 const red = "\x1B[91m";
 const yellow = "\x1B[33m";

package/dist/shared/{uniwind.nl8746mK.cjs → uniwind.Cv73KtI-.cjs}

@@ -2,7 +2,6 @@
 
 const name = "@niibase/uniwind";
 
-const isDefined = (value) => value !== null && value !== void 0;
 const toCamelCase = (str) => str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
 const pipe = (data) => ((...fns) => fns.reduce((acc, fn) => fn(acc), data));
 const isNumber = (data) => {
@@ -75,7 +74,6 @@ const removeKeys = (obj, keysToRemove) => Object.fromEntries(
 
 exports.addMissingSpaces = addMissingSpaces;
 exports.deepEqual = deepEqual;
-exports.isDefined = isDefined;
 exports.isNumber = isNumber;
 exports.isValidJSValue = isValidJSValue;
 exports.name = name;

package/dist/shared/{uniwind.F-0-Rr--.mjs → uniwind.PtWWxxnh.mjs}

@@ -1,6 +1,5 @@
 const name = "@niibase/uniwind";
 
-const isDefined = (value) => value !== null && value !== void 0;
 const toCamelCase = (str) => str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
 const pipe = (data) => ((...fns) => fns.reduce((acc, fn) => fn(acc), data));
 const isNumber = (data) => {
@@ -71,4 +70,4 @@ const removeKeys = (obj, keysToRemove) => Object.fromEntries(
   Object.entries(obj).filter(([key]) => !keysToRemove.includes(key))
 );
 
-export { isValidJSValue as a, addMissingSpaces as b, isDefined as c, deepEqual as d, shouldBeSerialized as e, removeKeys as f, isNumber as i, name as n, pipe as p, roundToPrecision as r, smartSplit as s, toCamelCase as t, uniq as u };
+export { isValidJSValue as a, addMissingSpaces as b, shouldBeSerialized as c, deepEqual as d, removeKeys as e, isNumber as i, name as n, pipe as p, roundToPrecision as r, smartSplit as s, toCamelCase as t, uniq as u };

package/dist/shared/{uniwind.BZyFsest.cjs → uniwind.r2i22V6d.cjs}

@@ -4,7 +4,7 @@ const fs = require('fs');
 const path = require('path');
 const node = require('@tailwindcss/node');
 const lightningcss = require('lightningcss');
-const common = require('./uniwind.nl8746mK.cjs');
+const common = require('./uniwind.Cv73KtI-.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 

package/dist/vite/index.cjs

@@ -2,8 +2,8 @@
 
 const node = require('@tailwindcss/node');
 const path = require('path');
-const common = require('../shared/uniwind.nl8746mK.cjs');
-const stringifyThemes = require('../shared/uniwind.BZyFsest.cjs');
+const common = require('../shared/uniwind.Cv73KtI-.cjs');
+const stringifyThemes = require('../shared/uniwind.r2i22V6d.cjs');
 require('fs');
 require('lightningcss');
 

package/dist/vite/index.mjs

@@ -1,7 +1,7 @@
 import { normalizePath } from '@tailwindcss/node';
 import path from 'path';
-import { u as uniq, n as name } from '../shared/uniwind.F-0-Rr--.mjs';
-import { s as stringifyThemes, U as UniwindCSSVisitor, a as buildCSS, b as buildDtsFile } from '../shared/uniwind.C-rHhHOg.mjs';
+import { u as uniq, n as name } from '../shared/uniwind.PtWWxxnh.mjs';
+import { s as stringifyThemes, U as UniwindCSSVisitor, a as buildCSS, b as buildDtsFile } from '../shared/uniwind.BGiqYvxb.mjs';
 import 'fs';
 import 'lightningcss';
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "private": false,
     "name": "@niibase/uniwind",
-    "version": "1.6.0",
+    "version": "1.6.2",
     "description": "A fork of Uniwind with Reanimated 4 support",
     "homepage": "https://uniwind.dev",
     "author": "Unistack",
@@ -21,6 +21,7 @@
         "postinstall": "node scripts/postinstall.mjs",
         "test:native": "jest --config jest.config.native.js",
         "test:web": "jest --config jest.config.web.js",
+        "test:types": "tsc --project tests/type-test/tsconfig.json",
         "test:e2e": "playwright test",
         "release": "release-it"
     },

package/src/common/utils.ts

@@ -0,0 +1 @@
+export const isDefined = <T>(value: T): value is NonNullable<T> => value !== undefined && value !== null

package/src/components/native/ActivityIndicator.tsx

@@ -1,10 +1,11 @@
 import { ActivityIndicator as RNActivityIndicator, ActivityIndicatorProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
+import { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'
 
 export const ActivityIndicator = copyComponentProperties(RNActivityIndicator, (props: ActivityIndicatorProps) => {
     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 (
         <Component

package/src/components/native/Button.tsx

@@ -1,9 +1,9 @@
 import { Button as RNButton, ButtonProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
-import { useStyle } from './useStyle'
+import { useAccentColor } from './useAccentColor'
 
 export const Button = copyComponentProperties(RNButton, (props: ButtonProps) => {
-    const color = useStyle(props.colorClassName, props).accentColor
+    const color = useAccentColor(props.colorClassName, props)
 
     return (
         <RNButton

package/src/components/native/FlatList.tsx

@@ -1,5 +1,6 @@
 import { FlatList as RNFlatList, FlatListProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
+import { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'
 
 export const FlatList = copyComponentProperties(RNFlatList, (props: FlatListProps<unknown>) => {
@@ -8,7 +9,7 @@ export const FlatList = copyComponentProperties(RNFlatList, (props: FlatListProp
     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 (

package/src/components/native/Image.tsx

@@ -1,10 +1,11 @@
 import { Image as RNImage, ImageProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
+import { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'
 
 export const Image = copyComponentProperties(RNImage, (props: ImageProps) => {
     const { Component, style } = useStyle(RNImage, props.className, props)
-    const tintColor = useStyle(props.tintColorClassName, props).accentColor
+    const tintColor = useAccentColor(props.tintColorClassName, props)
 
     return (
         <Component

package/src/components/native/ImageBackground.tsx

@@ -1,11 +1,12 @@
 import { ImageBackground as RNImageBackground, ImageBackgroundProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
+import { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'
 
 export const ImageBackground = copyComponentProperties(RNImageBackground, (props: ImageBackgroundProps) => {
     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 (
         <Component

package/src/components/native/InputAccessoryView.tsx

@@ -1,13 +1,14 @@
 import { ForwardedRef } from 'react'
 import { InputAccessoryView as RNInputAccessoryView, InputAccessoryViewProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
+import { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'
 
 export const InputAccessoryView = copyComponentProperties(
     RNInputAccessoryView,
     (props: InputAccessoryViewProps & { ref?: ForwardedRef<RNInputAccessoryView> }) => {
         const { Component, style } = useStyle(RNInputAccessoryView, props.className, props)
-        const backgroundColor = useStyle(props.backgroundColorClassName, props).accentColor
+        const backgroundColor = useAccentColor(props.backgroundColorClassName, props)
 
         return (
             <Component

package/src/components/native/Modal.tsx

@@ -1,10 +1,11 @@
 import { Modal as RNModal, ModalProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
+import { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'
 
 export const Modal = copyComponentProperties(RNModal, (props: ModalProps) => {
     const { Component, style } = useStyle(RNModal, props.className, props)
-    const backdropColor = useStyle(props.backdropColorClassName, props).accentColor
+    const backdropColor = useAccentColor(props.backdropColorClassName, props)
 
     return (
         <Component

package/src/components/native/RefreshControl.tsx

@@ -1,15 +1,16 @@
 import { RefreshControl as RNRefreshControl, RefreshControlProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
+import { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'
 
 export const RefreshControl = copyComponentProperties(RNRefreshControl, (props: RefreshControlProps) => {
     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 (
         <Component

package/src/components/native/ScrollView.tsx

@@ -1,11 +1,12 @@
 import { ScrollView as RNScrollView, ScrollViewProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
+import { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'
 
 export const ScrollView = copyComponentProperties(RNScrollView, (props: ScrollViewProps) => {
     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 (
         <Component