@niibase/uniwind 1.0.0

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

@@ -0,0 +1 @@
+export declare const parseCSSValue: (value: string) => string;

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

@@ -0,0 +1,8 @@
+import { parse } from "culori";
+import { formatColor } from "./formatColor.js";
+export const parseCSSValue = (value) => {
+  if (isNaN(Number(value)) && parse(value) !== void 0) {
+    return formatColor(value);
+  }
+  return value;
+};

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

@@ -0,0 +1 @@
+export declare const buildCSS: (themes: Array<string>, input: string) => Promise<void>;

package/dist/module/css/index.js

@@ -0,0 +1,25 @@
+import fs from "fs";
+import path from "path";
+import { generateCSSForInsets } from "./insets.js";
+import { generateCSSForThemes } from "./themes.js";
+import { generateCSSForVariants } from "./variants.js";
+const dirname = typeof __dirname !== "undefined" ? __dirname : import.meta.dirname;
+export const buildCSS = async (themes, input) => {
+  const variants = generateCSSForVariants();
+  const insets = generateCSSForInsets();
+  const themesCSS = await generateCSSForThemes(themes, input);
+  const cssFilePath = path.join(dirname, "../../uniwind.css");
+  const oldCSSFile = fs.existsSync(cssFilePath) ? fs.readFileSync(cssFilePath, "utf-8") : "";
+  const newCssFile = [
+    variants,
+    insets,
+    themesCSS
+  ].join("\n");
+  if (oldCSSFile === newCssFile) {
+    return;
+  }
+  fs.writeFileSync(
+    cssFilePath,
+    newCssFile
+  );
+};

package/dist/module/css/insets.d.ts

@@ -0,0 +1 @@
+export declare const generateCSSForInsets: () => string;

package/dist/module/css/insets.js

@@ -0,0 +1,63 @@
+const types = ["m", "p"];
+const sides = ["", "x", "y", "t", "b", "l", "r"];
+const spacing = "--spacing(--value(integer))";
+const length = "--value([length])";
+export const generateCSSForInsets = () => {
+  let css = `@utility h-screen-safe {
+    height: calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)));
+}
+`;
+  const getInsetsForSide = (side) => {
+    switch (side) {
+      case "t":
+        return ["top"];
+      case "b":
+        return ["bottom"];
+      case "l":
+        return ["left"];
+      case "r":
+        return ["right"];
+      case "x":
+        return ["left", "right"];
+      case "y":
+        return ["top", "bottom"];
+      default:
+        return ["top", "bottom", "left", "right"];
+    }
+  };
+  types.forEach((type) => {
+    sides.forEach((side) => {
+      const styleName = type === "m" ? "margin" : "padding";
+      const insets = getInsetsForSide(side);
+      const styles = insets.map((inset) => `${styleName}-${inset}: env(safe-area-inset-${inset});`);
+      const safeStyles = styles.flatMap((style) => {
+        const styleWithoutSemicolon = style.replace(";", "");
+        return [
+          styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${spacing});`),
+          styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${length});`)
+        ];
+      });
+      const safeOffsetStyles = styles.flatMap((style) => {
+        const styleWithoutSemicolon = style.replace(";", "");
+        return [
+          styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${spacing});`),
+          styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${length});`)
+        ];
+      });
+      css += `
+                @utility ${type}${side}-safe {
+                    ${styles.join("\n    ")}
+                }
+                
+                @utility ${type}${side}-safe-or-* {
+                    ${safeStyles.join("\n    ")}
+                }
+                
+                @utility ${type}${side}-safe-offset-* {
+                    ${safeOffsetStyles.join("\n    ")}
+                }
+            `;
+    });
+  });
+  return css.replaceAll("        ", "").trim() + "\n";
+};

package/dist/module/css/processFunctions.d.ts

@@ -0,0 +1,2 @@
+import { CustomAtRules, Visitor } from 'lightningcss';
+export declare const processFunctions: Visitor<CustomAtRules>['Function'];

package/dist/module/css/processFunctions.js

@@ -0,0 +1,36 @@
+const ONE_PX = {
+  type: "token",
+  value: { type: "dimension", unit: "px", value: 1 }
+};
+export const processFunctions = {
+  pixelRatio: (fn) => {
+    return {
+      type: "function",
+      value: {
+        name: "calc",
+        arguments: [
+          fn.arguments.at(0) ?? ONE_PX,
+          { type: "token", value: { type: "delim", value: "*" } },
+          ONE_PX
+        ]
+      }
+    };
+  },
+  fontScale: (fn) => {
+    return {
+      type: "function",
+      value: {
+        name: "calc",
+        arguments: [
+          fn.arguments.at(0) ?? ONE_PX,
+          { type: "token", value: { type: "delim", value: "*" } },
+          {
+            type: "token",
+            value: { type: "dimension", value: 1, unit: "rem" }
+          }
+        ]
+      }
+    };
+  },
+  hairlineWidth: () => ONE_PX
+};

package/dist/module/css/themes.d.ts

@@ -0,0 +1 @@
+export declare const generateCSSForThemes: (themes: Array<string>, input: string) => Promise<string>;

package/dist/module/css/themes.js

@@ -0,0 +1,97 @@
+import { compile } from "@tailwindcss/node";
+import fs from "fs";
+import { transform } from "lightningcss";
+import path from "path";
+import { Logger } from "../metro/logger";
+const readFileSafe = (filePath) => {
+  try {
+    return fs.readFileSync(filePath, "utf-8");
+  } catch {
+    return null;
+  }
+};
+const isExcludedDependency = (url) => [
+  url.includes("node_modules/tailwindcss"),
+  url.includes("node_modules/@tailwindcss"),
+  url.includes("node_modules/uniwind")
+].some(Boolean);
+export const generateCSSForThemes = async (themes, input) => {
+  const themesVariables = Object.fromEntries(themes.map((theme) => [theme, /* @__PURE__ */ new Set()]));
+  const findVariantsRec = async (cssPath) => {
+    const css = readFileSafe(cssPath);
+    if (css === null) {
+      return;
+    }
+    const { dependencies } = transform({
+      code: Buffer.from(css),
+      filename: "uniwind.css",
+      analyzeDependencies: true,
+      visitor: {
+        Rule: (rule) => {
+          if (rule.type === "unknown" && rule.value.name === "variant") {
+            const [firstPrelude] = rule.value.prelude;
+            if (firstPrelude?.type !== "token" || firstPrelude.value.type !== "ident" || !themes.includes(firstPrelude.value.value)) {
+              return;
+            }
+            const theme = firstPrelude.value.value;
+            rule.value.block?.forEach((block) => {
+              if (block.type === "dashed-ident") {
+                themesVariables[theme]?.add(block.value);
+              }
+            });
+          }
+        }
+      }
+    });
+    if (!Array.isArray(dependencies)) {
+      return;
+    }
+    const importUrls = /* @__PURE__ */ new Set();
+    const importsCSS = dependencies.filter((dependency) => {
+      if (dependency.url.startsWith(".")) {
+        importUrls.add(path.resolve(path.dirname(cssPath), dependency.url));
+        return false;
+      }
+      return !isExcludedDependency(dependency.url);
+    }).map((dependency) => `@import "${dependency.url}";`).join("\n");
+    await compile(importsCSS, {
+      base: path.resolve(path.dirname(cssPath)),
+      onDependency: (dependency) => {
+        if (isExcludedDependency(dependency)) {
+          return;
+        }
+        importUrls.add(dependency);
+      }
+    });
+    for (const filePath of importUrls) {
+      await findVariantsRec(filePath);
+    }
+  };
+  await findVariantsRec(input);
+  let hasErrors = false;
+  const hasVariables = Object.values(themesVariables).some((variables) => variables.size > 0);
+  Object.values(themesVariables).forEach((variables) => {
+    Object.entries(themesVariables).forEach(([checkedTheme, checkedVariables]) => {
+      variables.forEach((variable) => {
+        if (!checkedVariables.has(variable)) {
+          Logger.error(`Theme ${checkedTheme} is missing variable ${variable}`);
+          hasErrors = true;
+        }
+      });
+    });
+  });
+  if (hasErrors) {
+    Logger.error("All themes must have the same variables");
+  }
+  const variablesCSS = hasVariables ? [
+    "",
+    "@theme {",
+    ...Array.from(Object.values(themesVariables).at(0) ?? []).map((variable) => `    ${variable}: unset;`),
+    "}"
+  ] : [];
+  const uniwindCSS = [
+    ...themes.map((theme) => `@custom-variant ${theme} (&:where(.${theme}, .${theme} *));`),
+    ...variablesCSS
+  ].join("\n");
+  return uniwindCSS;
+};

package/dist/module/css/variants.d.ts

@@ -0,0 +1 @@
+export declare const generateCSSForVariants: () => string;

package/dist/module/css/variants.js

@@ -0,0 +1,9 @@
+const variants = ["ios", "android", "web", "native"];
+export const generateCSSForVariants = () => {
+  let css = "";
+  variants.forEach((variant) => {
+    css += `@custom-variant ${variant} (${variant === "web" ? "html &" : `@media ${variant}`});
+`;
+  });
+  return css;
+};

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

@@ -0,0 +1 @@
+export * from './withUniwind';

package/dist/module/hoc/index.js

@@ -0,0 +1 @@
+export * from "./withUniwind.js";

package/dist/module/hoc/types.d.ts

@@ -0,0 +1,27 @@
+import { ComponentProps, ComponentPropsWithRef } from 'react';
+import { RNStyle } from '../core/types';
+export type AnyObject = Record<PropertyKey, any>;
+type StyleToClass<K extends PropertyKey> = K extends 'style' ? 'className' : K extends `${infer StyleProp}Style` ? `${StyleProp}ClassName` : never;
+type ColorPropToClass<K extends PropertyKey> = K extends 'color' ? 'colorClassName' : K extends `${string}Color` | `${string}color${string}` ? `${K}ClassName` : never;
+export type ApplyUniwind<TProps extends AnyObject> = {
+    [K in keyof TProps as StyleToClass<K>]?: string;
+} & {
+    [K in keyof TProps as ColorPropToClass<K>]?: string;
+} & TProps;
+export type ApplyUniwindOptions<TProps extends AnyObject, TOptions extends {
+    [K in keyof TProps]?: OptionMapping;
+}> = {
+    [K in keyof TOptions as TOptions[K] extends undefined ? never : TOptions[K]['fromClassName']]?: string;
+} & TProps;
+export type Component<T extends AnyObject = AnyObject> = React.JSXElementConstructor<T>;
+export type OptionMapping = {
+    fromClassName: string;
+    styleProperty?: keyof RNStyle;
+};
+export type WithUniwind = {
+    <TComponent extends Component<any>>(Component: TComponent): (props: ApplyUniwind<ComponentPropsWithRef<TComponent>> & {}) => React.ReactNode;
+    <TComponent extends Component<any>, const TOptions extends {
+        [K in keyof ComponentProps<TComponent>]?: OptionMapping;
+    }>(Component: TComponent, options: TOptions): (props: ApplyUniwindOptions<ComponentPropsWithRef<TComponent>, TOptions> & {}) => React.ReactNode;
+};
+export {};

package/dist/module/hoc/withUniwind.d.ts

@@ -0,0 +1,2 @@
+import { WithUniwind } from './types';
+export declare const withUniwind: WithUniwind;

package/dist/module/hoc/withUniwind.js

@@ -0,0 +1,76 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useReducer } from "react";
+import { CSSListener, formatColor, getWebStyles } from "../core/web/index.js";
+import { classToColor, classToStyle, isClassProperty, isColorClassProperty, isStyleProperty } from "./withUniwindUtils.js";
+export const withUniwind = (Component2, options) => options ? withManualUniwind(Component2, options) : withAutoUniwind(Component2);
+const withAutoUniwind = (Component2) => (props) => {
+  const { classNames, generatedProps } = Object.entries(props).reduce((acc, [propName, propValue]) => {
+    if (isColorClassProperty(propName)) {
+      const colorProp = classToColor(propName);
+      if (props[colorProp] !== void 0) {
+        return acc;
+      }
+      const className = propValue;
+      const color = getWebStyles(className).accentColor;
+      acc.generatedProps[colorProp] = color !== void 0 ? formatColor(color) : void 0;
+      acc.classNames += `${className} `;
+      return acc;
+    }
+    if (isClassProperty(propName)) {
+      const styleProp = classToStyle(propName);
+      acc.generatedProps[styleProp] ??= [];
+      acc.generatedProps[styleProp][0] = { $$css: true, tailwind: propValue };
+      return acc;
+    }
+    if (isStyleProperty(propName)) {
+      acc.generatedProps[propName] ??= [];
+      acc.generatedProps[propName][1] = propValue;
+      return acc;
+    }
+    return acc;
+  }, { generatedProps: {}, classNames: "" });
+  const [, rerender] = useReducer(() => ({}), {});
+  useEffect(() => {
+    const dispose = CSSListener.subscribeToClassName(classNames, rerender);
+    return dispose;
+  }, [classNames]);
+  return /* @__PURE__ */ jsx(
+    Component2,
+    {
+      ...props,
+      ...generatedProps
+    }
+  );
+};
+const withManualUniwind = (Component2, options) => (props) => {
+  const { generatedProps, classNames } = Object.entries(options).reduce((acc, [propName, option]) => {
+    const className = props[option.fromClassName];
+    if (className === void 0) {
+      return acc;
+    }
+    if (option.styleProperty !== void 0) {
+      if (props[propName] !== void 0) {
+        return acc;
+      }
+      const value = getWebStyles(className)[option.styleProperty];
+      const transformedValue = value !== void 0 && option.styleProperty.toLowerCase().includes("color") ? formatColor(value) : value;
+      acc.classNames += `${className} `;
+      acc.generatedProps[propName] = transformedValue;
+      return acc;
+    }
+    acc.generatedProps[propName] = [{ $$css: true, tailwind: className }, props[propName]];
+    return acc;
+  }, { generatedProps: {}, classNames: "" });
+  const [, rerender] = useReducer(() => ({}), {});
+  useEffect(() => {
+    const dispose = CSSListener.subscribeToClassName(classNames, rerender);
+    return dispose;
+  }, [classNames]);
+  return /* @__PURE__ */ jsx(
+    Component2,
+    {
+      ...props,
+      ...generatedProps
+    }
+  );
+};

package/dist/module/hoc/withUniwind.native.d.ts

@@ -0,0 +1,2 @@
+import { WithUniwind } from './types';
+export declare const withUniwind: WithUniwind;

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

@@ -0,0 +1,81 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useReducer } from "react";
+import { UniwindListener } from "../core/listener.js";
+import { UniwindStore } from "../core/native/index.js";
+import { classToColor, classToStyle, isClassProperty, isColorClassProperty, isStyleProperty } from "./withUniwindUtils.js";
+export const withUniwind = (Component2, options) => options ? withManualUniwind(Component2, options) : withAutoUniwind(Component2);
+const withAutoUniwind = (Component2) => (props) => {
+  const { dependencies, generatedProps } = Object.entries(props).reduce((acc, [propName, propValue]) => {
+    if (isColorClassProperty(propName)) {
+      const colorProp = classToColor(propName);
+      if (props[colorProp] !== void 0) {
+        return acc;
+      }
+      const { styles, dependencies: dependencies2 } = UniwindStore.getStyles(propValue);
+      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);
+      acc.dependencies.push(...dependencies2);
+      acc.generatedProps[styleProp] ??= [];
+      acc.generatedProps[styleProp][0] = styles;
+      return acc;
+    }
+    if (isStyleProperty(propName)) {
+      acc.generatedProps[propName] ??= [];
+      acc.generatedProps[propName][1] = propValue;
+      return acc;
+    }
+    return acc;
+  }, { generatedProps: {}, dependencies: [] });
+  const deps = Array.from(new Set(dependencies));
+  const [, rerender] = useReducer(() => ({}), {});
+  useEffect(() => {
+    const dispose = UniwindListener.subscribe(rerender, deps);
+    return dispose;
+  }, [deps]);
+  return /* @__PURE__ */ jsx(
+    Component2,
+    {
+      ...props,
+      ...generatedProps
+    }
+  );
+};
+const withManualUniwind = (Component2, options) => (props) => {
+  const { generatedProps, dependencies } = Object.entries(options).reduce((acc, [propName, option]) => {
+    const className = props[option.fromClassName];
+    if (className === void 0) {
+      return acc;
+    }
+    if (option.styleProperty !== void 0) {
+      if (props[propName] !== void 0) {
+        return acc;
+      }
+      const { styles: styles2, dependencies: dependencies3 } = UniwindStore.getStyles(className);
+      acc.generatedProps[propName] = styles2[option.styleProperty];
+      acc.dependencies.push(...dependencies3);
+      return acc;
+    }
+    const { styles, dependencies: dependencies2 } = UniwindStore.getStyles(className);
+    acc.generatedProps[propName] = styles;
+    acc.dependencies.push(...dependencies2);
+    return acc;
+  }, { generatedProps: {}, dependencies: [] });
+  const deps = Array.from(new Set(dependencies));
+  const [, rerender] = useReducer(() => ({}), {});
+  useEffect(() => {
+    const dispose = UniwindListener.subscribe(rerender, deps);
+    return dispose;
+  }, [deps]);
+  return /* @__PURE__ */ jsx(
+    Component2,
+    {
+      ...props,
+      ...generatedProps
+    }
+  );
+};

package/dist/module/hoc/withUniwindUtils.d.ts

@@ -0,0 +1,5 @@
+export declare const classToStyle: (className: string) => string;
+export declare const classToColor: (className: string) => string;
+export declare const isColorClassProperty: (prop: string) => boolean;
+export declare const isClassProperty: (prop: string) => boolean;
+export declare const isStyleProperty: (prop: string) => boolean;

package/dist/module/hoc/withUniwindUtils.js

@@ -0,0 +1,5 @@
+export const classToStyle = (className) => className === "className" ? "style" : className.replace("ClassName", "Style");
+export const classToColor = (className) => className.replace("ClassName", "");
+export const isColorClassProperty = (prop) => prop.toLowerCase().includes("color") && prop.endsWith("ClassName");
+export const isClassProperty = (prop) => prop === "className" || prop.endsWith("ClassName");
+export const isStyleProperty = (prop) => prop === "style" || prop.endsWith("Style");

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

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

package/dist/module/hooks/index.js

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

package/dist/module/hooks/useCSSVariable/getVariableValue.d.ts

@@ -0,0 +1 @@
+export declare const getVariableValue: (name: string) => string | undefined;

package/dist/module/hooks/useCSSVariable/getVariableValue.js

@@ -0,0 +1,12 @@
+import { parseCSSValue } from "../../core/web/index.js";
+const documentStyles = typeof document !== "undefined" ? window.getComputedStyle(document.documentElement) : null;
+export const getVariableValue = (name) => {
+  if (!documentStyles) {
+    return void 0;
+  }
+  const value = documentStyles.getPropertyValue(name).trim();
+  if (value === "") {
+    return void 0;
+  }
+  return parseCSSValue(value);
+};

package/dist/module/hooks/useCSSVariable/getVariableValue.native.d.ts

@@ -0,0 +1 @@
+export declare const getVariableValue: (name: string) => unknown;

package/dist/module/hooks/useCSSVariable/getVariableValue.native.js

@@ -0,0 +1,2 @@
+import { UniwindStore } from "../../core/native/index.js";
+export const getVariableValue = (name) => UniwindStore.vars[name];

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

@@ -0,0 +1 @@
+export * from './useCSSVariable';

package/dist/module/hooks/useCSSVariable/index.js

@@ -0,0 +1 @@
+export * from "./useCSSVariable.js";

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

@@ -0,0 +1,13 @@
+type IsGenericNumber<T> = T & 0 extends -1 ? false : true;
+type CreateArray<N extends number, Value, TAcc extends Array<Value> = []> = TAcc['length'] extends N ? TAcc : CreateArray<N, Value, [...TAcc, Value]>;
+type UseCSSVariable = {
+    (name: string): string | number | undefined;
+    <const T extends Array<string>>(names: T): IsGenericNumber<T['length']> extends true ? Array<string | number | undefined> : CreateArray<T['length'], string | number | undefined>;
+};
+/**
+ * A hook that returns the value of a CSS variable.
+ * @param name Name / Array of names of the CSS variable.
+ * @returns Value / Values of the CSS variable. On web it is always a string (1rem, #ff0000, etc.), but on native it can be a string or a number (16px, #ff0000)
+ */
+export declare const useCSSVariable: UseCSSVariable;
+export {};

package/dist/module/hooks/useCSSVariable/useCSSVariable.js

@@ -0,0 +1,56 @@
+import { useEffect, useRef, useState } from "react";
+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) => Array.isArray(name) ? name.map(getVariableValue) : getVariableValue(name);
+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;
+  Logger.warn(
+    `We couldn't find your variable ${name}. Make sure it's used at least once in your className, or define it in a static theme as described in the docs: https://docs.uniwind.dev/api/use-css-variable`
+  );
+};
+export const useCSSVariable = (name) => {
+  const [value, setValue] = useState(getValue(name));
+  const nameRef = useRef(name);
+  useEffect(() => {
+    if (Array.isArray(name) && Array.isArray(nameRef.current)) {
+      if (arrayEquals(name, nameRef.current)) {
+        return;
+      }
+      setValue(getValue(name));
+      nameRef.current = name;
+      return;
+    }
+    if (name !== nameRef.current) {
+      setValue(getValue(name));
+      nameRef.current = name;
+    }
+  }, [name]);
+  useEffect(() => {
+    const updateValue = () => setValue(getValue(nameRef.current));
+    const dispose = UniwindListener.subscribe(
+      updateValue,
+      [StyleDependency.Theme, StyleDependency.Variables]
+    );
+    return dispose;
+  }, []);
+  if (Array.isArray(value)) {
+    value.forEach((val, index) => {
+      if (val === void 0 && __DEV__ && !warned) {
+        logDevError(name[index] ?? "");
+      }
+    });
+  }
+  if (value === void 0 && __DEV__ && !warned) {
+    logDevError(name);
+  }
+  return value;
+};

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

@@ -0,0 +1,2 @@
+import { RNStyle } from '../core/types';
+export declare const useResolveClassNames: (className: string) => RNStyle;

package/dist/module/hooks/useResolveClassNames.js

@@ -0,0 +1,18 @@
+import { useEffect, useReducer } from "react";
+import { CSSListener, getWebStyles } from "../core/web/index.js";
+const emptyState = {};
+export const useResolveClassNames = (className) => {
+  const [styles, recreate] = useReducer(
+    () => className !== "" ? getWebStyles(className) : emptyState,
+    className !== "" ? getWebStyles(className) : emptyState
+  );
+  useEffect(() => {
+    if (className === "") {
+      return;
+    }
+    recreate();
+    const dispose = CSSListener.subscribeToClassName(className, recreate);
+    return dispose;
+  }, [className]);
+  return styles;
+};

package/dist/module/hooks/useResolveClassNames.native.d.ts

@@ -0,0 +1,2 @@
+import { ComponentState, RNStyle } from '../core/types';
+export declare const useResolveClassNames: (className: string, state?: ComponentState) => RNStyle;

package/dist/module/hooks/useResolveClassNames.native.js

@@ -0,0 +1,22 @@
+import { useEffect, useReducer } from "react";
+import { UniwindListener } from "../core/listener.js";
+import { UniwindStore } from "../core/native/index.js";
+const emptyState = { styles: {}, dependencies: [] };
+export const useResolveClassNames = (className, state) => {
+  const [uniwindState, recreate] = useReducer(
+    () => className !== "" ? UniwindStore.getStyles(className, state) : emptyState,
+    className !== "" ? UniwindStore.getStyles(className, state) : emptyState
+  );
+  useEffect(() => {
+    if (className !== "") {
+      recreate();
+    }
+  }, [className, state?.isDisabled, state?.isPressed, state?.isFocused]);
+  useEffect(() => {
+    if (uniwindState.dependencies.length > 0) {
+      const dispose = UniwindListener.subscribe(recreate, uniwindState.dependencies);
+      return dispose;
+    }
+  }, [uniwindState.dependencies, className]);
+  return uniwindState.styles;
+};

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

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