@niibase/uniwind 1.6.1 → 1.6.3

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(

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/config/config.common.d.ts

@@ -15,7 +15,7 @@ export declare class UniwindConfigBuilder {
         as: T;
     } & ApplyUniwind<Omit<ComponentPropsWithRef<T>, 'as'>>): import("react").FunctionComponentElement<any>;
     setTheme(theme: ThemeName | typeof SYSTEM_THEME): void;
-    updateCSSVariables(theme: ThemeName, variables: CSSVariables): void;
+    updateCSSVariables(theme: ThemeName, cssVariables: CSSVariables): void;
     updateInsets(insets: Insets): void;
     protected __reinit(_: GenerateStyleSheetsCallback, themes: Array<string>): void;
     protected onThemeChange(): void;

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

@@ -76,12 +76,11 @@ export class UniwindConfigBuilder {
       }
     }
   }
-  updateCSSVariables(theme, variables) {
-    theme;
-    variables;
+  // oxlint-disable-next-line typescript/no-unused-vars
+  updateCSSVariables(theme, cssVariables) {
   }
+  // oxlint-disable-next-line typescript/no-unused-vars
   updateInsets(insets) {
-    insets;
   }
   __reinit(_, themes) {
     this._themes = themes;

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

@@ -1,11 +1,11 @@
-import { CSSVariables, ThemeName } from '../types';
+import { CSSVariables, GenerateStyleSheetsCallback, ThemeName } from '../types';
 import { UniwindConfigBuilder as UniwindConfigBuilderBase } from './config.common';
 declare class UniwindConfigBuilder extends UniwindConfigBuilderBase {
-    private runtimeCSSVariables;
+    private cssRules?;
     constructor();
     updateCSSVariables(theme: ThemeName, variables: CSSVariables): void;
-    protected onThemeChange(): void;
-    private applyCSSVariable;
+    protected __reinit(generateStyleSheetCallback: GenerateStyleSheetsCallback, themes: Array<string>): void;
+    private getUniwindDynamicCSSRules;
 }
 export declare const Uniwind: UniwindConfigBuilder;
 export {};

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

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

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

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

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

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

package/dist/module/hoc/withUniwind.js

@@ -1,9 +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();
@@ -15,6 +18,12 @@ const withAutoUniwind = (Component2) => (props) => {
       }
       const className = propValue;
       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;

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();
@@ -14,6 +17,12 @@ const withAutoUniwind = (Component2) => (props) => {
         return acc;
       }
       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;

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

@@ -1,16 +1,11 @@
 import { useLayoutEffect, useRef, useState } from "react";
+import { arrayEquals } from "../../common/utils.js";
 import { useUniwindContext } from "../../core/context.js";
 import { UniwindListener } from "../../core/listener.js";
 import { Logger } from "../../core/logger.js";
 import { StyleDependency } from "../../types.js";
 import { getVariableValue } from "./getVariableValue.js";
 const getValue = (name, uniwindContext) => Array.isArray(name) ? name.map((name2) => getVariableValue(name2, uniwindContext)) : getVariableValue(name, uniwindContext);
-const arrayEquals = (a, b) => {
-  if (a.length !== b.length) {
-    return false;
-  }
-  return a.every((value, index) => value === b[index]);
-};
 let warned = false;
 const logDevError = (name) => {
   warned = true;

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');