@niibase/uniwind 1.6.4 → 1.7.0

package/dist/module/bundler/css-processor/var.d.ts

@@ -0,0 +1,7 @@
+import type { Variable } from 'lightningcss';
+import type { ProcessorBuilder } from './processor';
+export declare class Var {
+    private readonly Processor;
+    constructor(Processor: ProcessorBuilder);
+    processVar(variable: Variable): string;
+}

package/dist/module/bundler/css-processor/var.js

@@ -0,0 +1,13 @@
+export class Var {
+  constructor(Processor) {
+    this.Processor = Processor;
+  }
+  processVar(variable) {
+    const value = `this[\`${variable.name.ident}\`]`;
+    if (!variable.fallback || variable.fallback.length === 0) {
+      return value;
+    }
+    const fallback = this.Processor.CSS.processValue(variable.fallback);
+    return `${value} ?? ${fallback}`;
+  }
+}

package/dist/module/{css-visitor → bundler/css-visitor}/function-visitor.d.ts

@@ -1,4 +1,4 @@
-import { Function as LightningCSSFunction, TokenOrValue } from 'lightningcss';
+import type { Function as LightningCSSFunction, TokenOrValue } from 'lightningcss';
 export declare class FunctionVisitor {
     [name: string]: (fn: LightningCSSFunction) => TokenOrValue;
     platformSelect(fn: LightningCSSFunction): TokenOrValue;

package/dist/module/{css-visitor → bundler/css-visitor}/rule-visitor.d.ts

@@ -1,4 +1,5 @@
-import { ReturnedDeclaration, ReturnedMediaQuery, ReturnedRule, Rule } from 'lightningcss';
+import type { ReturnedDeclaration, ReturnedMediaQuery, ReturnedRule, Rule } from 'lightningcss';
+import type { UniwindBundlerConfig } from '../config';
 type LightningRuleVisitor = Rule<ReturnedDeclaration, ReturnedMediaQuery>;
 type LightningRuleVisitors = Partial<{
     [K in LightningRuleVisitor['type']]: (rule: Extract<LightningRuleVisitor, {
@@ -6,11 +7,11 @@ type LightningRuleVisitors = Partial<{
     }>) => ReturnedRule | Array<ReturnedRule> | void;
 }>;
 export declare class RuleVisitor implements LightningRuleVisitors {
-    private readonly themes;
+    private readonly bundlerConfig;
     processedClassNames: Set<string>;
     processedVariables: Set<string>;
     currentLayerName: string;
-    constructor(themes: Array<string>);
+    constructor(bundlerConfig: UniwindBundlerConfig);
     'layer-block': (layer: Extract<LightningRuleVisitor, {
         type: "layer-block";
     }>) => void;

package/dist/module/{css-visitor → bundler/css-visitor}/rule-visitor.js

@@ -1,6 +1,6 @@
 export class RuleVisitor {
-  constructor(themes) {
-    this.themes = themes;
+  constructor(bundlerConfig) {
+    this.bundlerConfig = bundlerConfig;
   }
   processedClassNames = /* @__PURE__ */ new Set();
   processedVariables = /* @__PURE__ */ new Set();
@@ -60,7 +60,7 @@ export class RuleVisitor {
     if (whereSelector?.type !== "class") {
       return styleRule;
     }
-    const selectedVariant = this.themes.find((theme) => whereSelector.name === theme);
+    const selectedVariant = this.bundlerConfig.themes.find((theme) => whereSelector.name === theme);
     if (selectedVariant === void 0 || this.processedVariables.has(selectedVariant)) {
       return styleRule;
     }
@@ -76,7 +76,7 @@ export class RuleVisitor {
     };
   }
   processClassStyle(styleRule, firstSelector) {
-    const selectedVariant = this.themes.find((theme) => firstSelector.name.includes(`${theme}:`));
+    const selectedVariant = this.bundlerConfig.themes.find((theme) => firstSelector.name.includes(`${theme}:`));
     if (selectedVariant === void 0 || this.processedClassNames.has(firstSelector.name)) {
       return;
     }
@@ -87,7 +87,7 @@ export class RuleVisitor {
         loc: styleRule.value.loc,
         rules: [styleRule],
         scopeStart: [[{ type: "class", name: selectedVariant }]],
-        scopeEnd: this.themes.filter((theme) => theme !== selectedVariant).map((theme) => [{ type: "class", name: theme }])
+        scopeEnd: this.bundlerConfig.themes.filter((theme) => theme !== selectedVariant).map((theme) => [{ type: "class", name: theme }])
       }
     };
   }

package/dist/module/{css-visitor → bundler/css-visitor}/visitor.d.ts

@@ -1,8 +1,8 @@
-import { CustomAtRules, Visitor } from 'lightningcss';
+import type { CustomAtRules, Visitor } from 'lightningcss';
+import type { UniwindBundlerConfig } from '../config';
 export declare class UniwindCSSVisitor implements Visitor<CustomAtRules> {
-    private readonly themes;
     Function: Visitor<CustomAtRules>['Function'];
     Rule: Visitor<CustomAtRules>['Rule'];
     StyleSheet: Visitor<CustomAtRules>['StyleSheet'];
-    constructor(themes: Array<string>);
+    constructor(bundlerConfig: UniwindBundlerConfig);
 }

package/dist/module/{css-visitor → bundler/css-visitor}/visitor.js

@@ -1,16 +1,15 @@
 import { FunctionVisitor } from "./function-visitor.js";
 import { RuleVisitor } from "./rule-visitor.js";
 export class UniwindCSSVisitor {
-  constructor(themes) {
-    this.themes = themes;
-    const ruleVisitor = new RuleVisitor(this.themes);
+  Function;
+  Rule;
+  StyleSheet;
+  constructor(bundlerConfig) {
+    const ruleVisitor = new RuleVisitor(bundlerConfig);
     this.Function = new FunctionVisitor();
     this.Rule = ruleVisitor;
     this.StyleSheet = () => {
       ruleVisitor.cleanup();
     };
   }
-  Function;
-  Rule;
-  StyleSheet;
 }

package/dist/module/bundler/logger.d.ts

@@ -0,0 +1,11 @@
+export declare class Logger {
+    private readonly name;
+    static debug: boolean;
+    constructor(name: string);
+    static log(message: string, meta?: string): void;
+    static error(message: string, meta?: string): void;
+    static warn(message: string, meta?: string): void;
+    log(message: string): void;
+    error(message: string): void;
+    warn(message: string): void;
+}

package/dist/module/bundler/logger.js

@@ -0,0 +1,34 @@
+const red = "\x1B[91m";
+const yellow = "\x1B[33m";
+const blue = "\x1B[36m";
+const reset = "\x1B[0m";
+export class Logger {
+  constructor(name) {
+    this.name = name;
+  }
+  static debug = false;
+  static log(message, meta = "") {
+    if (!Logger.debug) {
+      return;
+    }
+    console.log(`${blue}Uniwind ${meta}- ${message}${reset}`);
+  }
+  static error(message, meta = "") {
+    console.log(`${red}Uniwind Error ${meta}- ${message}${reset}`);
+  }
+  static warn(message, meta = "") {
+    if (!Logger.debug) {
+      return;
+    }
+    console.log(`${yellow}Uniwind Warning ${meta}- ${message}${reset}`);
+  }
+  log(message) {
+    Logger.log(message, `[${this.name} Processor] `);
+  }
+  error(message) {
+    Logger.error(message, `[${this.name} Processor] `);
+  }
+  warn(message) {
+    Logger.warn(message, `[${this.name} Processor] `);
+  }
+}

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

@@ -0,0 +1,15 @@
+export type UniwindConfig = {
+    cssEntryFile: string;
+    extraThemes?: Array<string>;
+    extraComponents?: Record<string, string>;
+    dtsFile?: string;
+};
+export type Polyfills = {
+    rem?: number;
+    responsive?: 'text' | 'components' | boolean;
+};
+export type UniwindMetroConfig = UniwindConfig & {
+    polyfills?: Polyfills;
+    debug?: boolean;
+    isTV?: boolean;
+};

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

@@ -9,3 +9,24 @@ export declare const enum Platform {
 }
 export declare const UNIWIND_PLATFORM_VARIABLES = "__uniwind-platform-";
 export declare const UNIWIND_THEME_VARIABLES = "__uniwind-theme-";
+export declare enum StyleDependency {
+    ColorScheme = 1,
+    Theme = 2,
+    Dimensions = 3,
+    Orientation = 4,
+    Insets = 5,
+    FontScale = 6,
+    Rtl = 7,
+    AdaptiveThemes = 8,
+    Variables = 9
+}
+export declare const enum Orientation {
+    Portrait = "portrait",
+    Landscape = "landscape"
+}
+export declare const enum ColorScheme {
+    Light = "light",
+    Dark = "dark"
+}
+export declare const DEFAULT_SCREEN_WIDTH = 375;
+export declare const DEFAULT_SCREEN_HEIGHT = 680;

package/dist/module/common/consts.js

@@ -10,3 +10,27 @@ export var Platform = /* @__PURE__ */ ((Platform2) => {
 })(Platform || {});
 export const UNIWIND_PLATFORM_VARIABLES = "__uniwind-platform-";
 export const UNIWIND_THEME_VARIABLES = "__uniwind-theme-";
+export var StyleDependency = /* @__PURE__ */ ((StyleDependency2) => {
+  StyleDependency2[StyleDependency2["ColorScheme"] = 1] = "ColorScheme";
+  StyleDependency2[StyleDependency2["Theme"] = 2] = "Theme";
+  StyleDependency2[StyleDependency2["Dimensions"] = 3] = "Dimensions";
+  StyleDependency2[StyleDependency2["Orientation"] = 4] = "Orientation";
+  StyleDependency2[StyleDependency2["Insets"] = 5] = "Insets";
+  StyleDependency2[StyleDependency2["FontScale"] = 6] = "FontScale";
+  StyleDependency2[StyleDependency2["Rtl"] = 7] = "Rtl";
+  StyleDependency2[StyleDependency2["AdaptiveThemes"] = 8] = "AdaptiveThemes";
+  StyleDependency2[StyleDependency2["Variables"] = 9] = "Variables";
+  return StyleDependency2;
+})(StyleDependency || {});
+export var Orientation = /* @__PURE__ */ ((Orientation2) => {
+  Orientation2["Portrait"] = "portrait";
+  Orientation2["Landscape"] = "landscape";
+  return Orientation2;
+})(Orientation || {});
+export var ColorScheme = /* @__PURE__ */ ((ColorScheme2) => {
+  ColorScheme2["Light"] = "light";
+  ColorScheme2["Dark"] = "dark";
+  return ColorScheme2;
+})(ColorScheme || {});
+export const DEFAULT_SCREEN_WIDTH = 375;
+export const DEFAULT_SCREEN_HEIGHT = 680;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ThemeName } from '../../core/types';
+import type { ThemeName } from '../../core/types';
 type ScopedThemeProps = {
     theme: ThemeName;
 };

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

@@ -1,4 +1,4 @@
-import { PressableProps } from 'react-native';
+import { type PressableProps } from 'react-native';
 declare module 'react-native' {
     interface PressableStateCallbackType {
         focused?: boolean;

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

@@ -1,3 +1,3 @@
-import { TouchableHighlightProps } from 'react-native';
+import type { TouchableHighlightProps } from 'react-native';
 export declare const TouchableHighlight: import("react").ForwardRefExoticComponent<TouchableHighlightProps & import("react").RefAttributes<import("react-native").View>>;
 export default TouchableHighlight;

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

@@ -1,3 +1,3 @@
-import { TouchableOpacityProps } from 'react-native';
+import type { TouchableOpacityProps } from 'react-native';
 export declare const TouchableOpacity: import("react").ForwardRefExoticComponent<TouchableOpacityProps & import("react").RefAttributes<import("react-native").View>>;
 export default TouchableOpacity;

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

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

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

@@ -1,5 +1,5 @@
-import { ComponentType } from 'react';
-import { ComponentState, RNStyle } from '../../core/types';
+import { type ComponentType } from 'react';
+import type { ComponentState, RNStyle } from '../../core/types';
 export declare function useStyle(className?: string, componentProps?: Record<string, any>, state?: ComponentState): RNStyle;
 export declare function useStyle<T extends React.ComponentType<any>>(component: T, className?: string, componentProps?: Record<string, any>, state?: ComponentState): {
     style: RNStyle;

package/dist/module/components/react-native-gesture-handler/native/BaseButton.d.ts

@@ -1,3 +1,3 @@
-import { BaseButtonProps } from 'react-native-gesture-handler';
+import { type BaseButtonProps } from 'react-native-gesture-handler';
 export declare const BaseButton: import("react").ForwardRefExoticComponent<Omit<BaseButtonProps, "innerRef"> & import("react").RefAttributes<import("react").ComponentType<{}>>>;
 export default BaseButton;

package/dist/module/components/react-native-gesture-handler/native/BorderlessButton.d.ts

@@ -1,3 +1,3 @@
-import { BorderlessButtonProps } from 'react-native-gesture-handler';
+import { type BorderlessButtonProps } from 'react-native-gesture-handler';
 export declare const BorderlessButton: import("react").ForwardRefExoticComponent<Omit<BorderlessButtonProps, "innerRef"> & import("react").RefAttributes<import("react").ComponentType<{}>>>;
 export default BorderlessButton;

package/dist/module/components/react-native-gesture-handler/native/DrawerLayoutAndroid.d.ts

@@ -1,4 +1,4 @@
-import { DrawerLayoutAndroidProps } from 'react-native';
+import type { DrawerLayoutAndroidProps } from 'react-native';
 export declare const DrawerLayoutAndroid: import("react").ForwardRefExoticComponent<DrawerLayoutAndroidProps & {
     children?: React.ReactNode | undefined;
 } & import("react-native-gesture-handler").NativeViewGestureHandlerProps & import("react").RefAttributes<import("react").ComponentType<any>>>;

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

@@ -1,4 +1,4 @@
-import { FlatListProps } from 'react-native';
+import type { FlatListProps } from 'react-native';
 import { FlatList as RNGHFlatList } from 'react-native-gesture-handler';
 export declare const FlatList: <ItemT = any>(props: import("react").PropsWithChildren<Omit<FlatListProps<ItemT>, "renderScrollComponent"> & import("react").RefAttributes<RNGHFlatList<ItemT>> & import("react-native-gesture-handler").NativeViewGestureHandlerProps>, ref?: import("react").ForwardedRef<RNGHFlatList<ItemT>>) => import("react").ReactElement | null;
 export default FlatList;

package/dist/module/components/react-native-gesture-handler/native/Pressable.d.ts

@@ -1,3 +1,3 @@
-import { PressableProps } from 'react-native-gesture-handler';
+import { type PressableProps } from 'react-native-gesture-handler';
 export declare const Pressable: (props: PressableProps) => React.JSX.Element;
 export default Pressable;

package/dist/module/components/react-native-gesture-handler/native/PureNativeButton.d.ts

@@ -1,3 +1,3 @@
-import { RawButtonProps } from 'react-native-gesture-handler';
+import { type RawButtonProps } from 'react-native-gesture-handler';
 export declare const PureNativeButton: import("react-native").HostComponent<RawButtonProps>;
 export default PureNativeButton;

package/dist/module/components/react-native-gesture-handler/native/RawButton.d.ts

@@ -1,3 +1,3 @@
-import { RawButtonProps } from 'react-native-gesture-handler';
+import { type RawButtonProps } from 'react-native-gesture-handler';
 export declare const RawButton: import("react").ForwardRefExoticComponent<RawButtonProps & import("react-native-gesture-handler").NativeViewGestureHandlerProps & import("react").RefAttributes<import("react").ComponentType<any>>>;
 export default RawButton;

package/dist/module/components/react-native-gesture-handler/native/RectButton.d.ts

@@ -1,3 +1,3 @@
-import { RectButtonProps } from 'react-native-gesture-handler';
+import { type RectButtonProps } from 'react-native-gesture-handler';
 export declare const RectButton: import("react").ForwardRefExoticComponent<Omit<RectButtonProps, "innerRef"> & import("react").RefAttributes<import("react").ComponentType<{}>>>;
 export default RectButton;

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

@@ -1,3 +1,3 @@
-import { RefreshControlProps } from 'react-native';
+import type { RefreshControlProps } from 'react-native';
 export declare const RefreshControl: import("react").ForwardRefExoticComponent<RefreshControlProps & import("react-native-gesture-handler").NativeViewGestureHandlerProps & import("react").RefAttributes<import("react").ComponentType<any>>>;
 export default RefreshControl;

package/dist/module/components/react-native-gesture-handler/native/ScrollView.d.ts

@@ -1,3 +1,3 @@
-import { ScrollViewProps } from 'react-native';
+import type { ScrollViewProps } from 'react-native';
 export declare const ScrollView: import("react").ForwardRefExoticComponent<ScrollViewProps & import("react-native-gesture-handler").NativeViewGestureHandlerProps & import("react").RefAttributes<import("react-native").ScrollView>>;
 export default ScrollView;

package/dist/module/components/react-native-gesture-handler/native/Switch.d.ts

@@ -1,3 +1,3 @@
-import { SwitchProps } from 'react-native';
+import type { SwitchProps } from 'react-native';
 export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react-native-gesture-handler").NativeViewGestureHandlerProps & import("react").RefAttributes<import("react").ComponentType<any>>>;
 export default Switch;

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

@@ -1,3 +1,3 @@
-import { TextInputProps } from 'react-native';
+import type { TextInputProps } from 'react-native';
 export declare const TextInput: import("react").ForwardRefExoticComponent<TextInputProps & import("react-native-gesture-handler").NativeViewGestureHandlerProps & import("react").RefAttributes<import("react").ComponentType<any>>>;
 export default TextInput;

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

@@ -1,3 +1,3 @@
-import { PressableProps } from 'react-native';
+import type { PressableProps } from 'react-native';
 export declare const Pressable: import("react").ForwardRefExoticComponent<PressableProps & import("react").RefAttributes<import("react-native").View>>;
 export default Pressable;

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

@@ -1,3 +1,3 @@
-import { TouchableHighlightProps } from 'react-native';
+import type { TouchableHighlightProps } from 'react-native';
 export declare const TouchableHighlight: import("react").ForwardRefExoticComponent<TouchableHighlightProps & import("react").RefAttributes<import("react-native").View>>;
 export default TouchableHighlight;

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

@@ -1,3 +1,3 @@
-import { TouchableOpacityProps } from 'react-native';
+import type { TouchableOpacityProps } from 'react-native';
 export declare const TouchableOpacity: import("react").ForwardRefExoticComponent<TouchableOpacityProps & import("react").RefAttributes<import("react-native").View>>;
 export default TouchableOpacity;

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

@@ -1,6 +1,6 @@
+import { StyleDependency } from "../../common/consts.js";
 import { Uniwind } from "../../core/index.js";
 import { UniwindListener } from "../../core/listener.js";
-import { StyleDependency } from "../../types.js";
 import "./metro-injected";
 const addClassNameToRoot = () => {
   if (typeof document === "undefined") {

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

@@ -1,8 +1,7 @@
-import { ComponentPropsWithRef, ElementType } from 'react';
-import { Insets } from 'react-native';
-import { ApplyUniwind } from '../../hoc/types';
-import { GetCSSVariable } from '../../hooks/useCSSVariable/useCSSVariable';
-import { CSSVariables, GenerateStyleSheetsCallback, ThemeName } from '../types';
+import type { Insets } from 'react-native';
+import type { ApplyUniwind } from '../../hoc/types';
+import type { GetCSSVariable } from '../../hooks/useCSSVariable/useCSSVariable';
+import type { CSSVariables, GenerateStyleSheetsCallback, ThemeName } from '../types';
 declare const SYSTEM_THEME: "system";
 export declare class UniwindConfigBuilder {
     #private;
@@ -12,9 +11,9 @@ export declare class UniwindConfigBuilder {
     get hasAdaptiveThemes(): boolean;
     get currentTheme(): ThemeName;
     private get colorScheme();
-    Wrapper<T extends ElementType>({ as, ...props }: {
+    Wrapper<T extends React.ElementType>({ as, ...props }: {
         as: T;
-    } & ApplyUniwind<Omit<ComponentPropsWithRef<T>, 'as'>>): import("react").FunctionComponentElement<any>;
+    } & ApplyUniwind<Omit<React.ComponentPropsWithRef<T>, 'as'>>): import("react").FunctionComponentElement<any>;
     setTheme(theme: ThemeName | typeof SYSTEM_THEME): void;
     updateCSSVariables(theme: ThemeName, cssVariables: CSSVariables): void;
     updateInsets(insets: Insets): void;

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

@@ -1,8 +1,8 @@
 import { createElement, useMemo } from "react";
 import { Appearance, Platform } from "react-native";
-import { withUniwind } from "../../hoc/withUniwind.js";
+import { ColorScheme, StyleDependency } from "../../common/consts.js";
+import { withUniwind } from "../../hoc/index.js";
 import { getCSSVariable } from "../../hooks/useCSSVariable/useCSSVariable.js";
-import { ColorScheme, StyleDependency } from "../../types.js";
 import { UniwindListener } from "../listener.js";
 const SYSTEM_THEME = "system";
 const RN_VERSION = Platform.constants?.reactNativeVersion?.minor ?? 0;

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

@@ -1,4 +1,4 @@
-import { CSSVariables, GenerateStyleSheetsCallback, ThemeName } from '../types';
+import type { CSSVariables, GenerateStyleSheetsCallback, ThemeName } from '../types';
 import { UniwindConfigBuilder as UniwindConfigBuilderBase } from './config.common';
 declare class UniwindConfigBuilder extends UniwindConfigBuilderBase {
     private cssRules?;

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

@@ -1,5 +1,5 @@
+import { StyleDependency } from "../../common/consts.js";
 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";

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

@@ -1,5 +1,5 @@
-import { Insets } from 'react-native';
-import { CSSVariables, GenerateStyleSheetsCallback, ThemeName } from '../types';
+import type { Insets } from 'react-native';
+import type { CSSVariables, GenerateStyleSheetsCallback, ThemeName } from '../types';
 import { UniwindConfigBuilder as UniwindConfigBuilderBase } from './config.common';
 declare class UniwindConfigBuilder extends UniwindConfigBuilderBase {
     constructor();

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

@@ -1,5 +1,5 @@
 import { formatHex, formatHex8, parse } from "culori";
-import { StyleDependency } from "../../types.js";
+import { StyleDependency } from "../../common/consts.js";
 import { UniwindListener } from "../listener.js";
 import { Logger } from "../logger.js";
 import { UniwindStore } from "../native/index.js";

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

@@ -1,4 +1,4 @@
-import { StyleDependency } from '../types';
+import { StyleDependency } from '../common/consts';
 type SubscribeOptions = {
     once?: boolean;
 };

package/dist/module/core/listener.js

@@ -1,4 +1,4 @@
-import { StyleDependency } from "../types.js";
+import { StyleDependency } from "../common/consts.js";
 class UniwindListenerBuilder {
   listeners = {
     [StyleDependency.ColorScheme]: /* @__PURE__ */ new Set(),

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

@@ -1,7 +1,7 @@
 import { Appearance, Dimensions, I18nManager, PixelRatio, Platform, StyleSheet } from "react-native";
 import { cubicBezier, linear, steps } from "react-native-reanimated";
 import { initialWindowMetrics } from "react-native-safe-area-context";
-import { ColorScheme, Orientation } from "../../types.js";
+import { ColorScheme, DEFAULT_SCREEN_WIDTH, Orientation } from "../../common/consts.js";
 import { colorMix, lightDark, parseColor } from "./native-utils.js";
 const window = Dimensions.get("window");
 const initialColorScheme = Appearance.getColorScheme() ?? ColorScheme.Light;
@@ -26,6 +26,10 @@ export const UniwindRuntime = {
   parseColor,
   platformSelect: (android, ios, other) => {
     return Platform.select(Boolean(other) ? { android, ios, default: other } : { android, default: ios });
+  },
+  makeResponsive(value, base = DEFAULT_SCREEN_WIDTH, useHeight = false) {
+    const dimension = useHeight ? this.screen.height : this.screen.width;
+    return Math.round(value * dimension / base);
   }
 };
 UniwindRuntime.lightDark = lightDark.bind(UniwindRuntime);

package/dist/module/core/native/store.d.ts

@@ -1,5 +1,5 @@
-import { StyleDependency } from '../../types';
-import { ComponentState, GenerateStyleSheetsCallback, RNStyle, ThemeName, UniwindContextType } from '../types';
+import { StyleDependency } from '../../common/consts';
+import type { ComponentState, GenerateStyleSheetsCallback, RNStyle, ThemeName, UniwindContextType } from '../types';
 type StylesResult = {
     styles: RNStyle;
     dependencies: Array<StyleDependency>;

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

@@ -1,6 +1,5 @@
 import { Dimensions, Platform } from "react-native";
-import { Platform as UniwindPlatform, UNIWIND_PLATFORM_VARIABLES, UNIWIND_THEME_VARIABLES } from "../../common/consts.js";
-import { Orientation, StyleDependency } from "../../types.js";
+import { Orientation, Platform as UniwindPlatform, StyleDependency, UNIWIND_PLATFORM_VARIABLES, UNIWIND_THEME_VARIABLES } from "../../common/consts.js";
 import { UniwindListener } from "../listener.js";
 import { cloneWithAccessors } from "./native-utils.js";
 import {

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native';
-import { CSSAnimationKeyframes } from 'react-native-reanimated';
-import { ControlPoint, CubicBezierEasing, LinearEasing, StepsEasing, StepsModifier } from 'react-native-reanimated/lib/typescript/css/easing';
-import { ColorScheme, Orientation, StyleDependency, UniwindConfig } from '../types';
+import type { CSSAnimationKeyframes } from 'react-native-reanimated';
+import type { ControlPoint, CubicBezierEasing, LinearEasing, StepsEasing, StepsModifier } from 'react-native-reanimated/lib/typescript/css/easing';
+import type { ColorScheme, Orientation, StyleDependency } from '../common/consts';
 import type { UniwindContext } from './context';
 export type Style = {
     entries: Array<[string, () => unknown]>;
@@ -29,6 +29,8 @@ export type GenerateStyleSheetsCallback = (rt: UniwindRuntime) => {
     keyframes: Record<string, CSSAnimationKeyframes>;
     scopedVars: Partial<Record<string, Record<string, unknown>>>;
 };
+export interface UniwindConfig {
+}
 type UserThemes = UniwindConfig extends {
     themes: infer T extends readonly string[];
 } ? T : readonly string[];
@@ -58,6 +60,7 @@ export type UniwindRuntime = {
     lightDark: (light: string, dark: string) => string;
     parseColor: (type: string, color: string) => string;
     platformSelect: (android: string, ios: string, other?: string) => string;
+    makeResponsive: (value: number, base: number, useHeight?: boolean) => number;
 };
 export type RNStyle = ViewStyle & TextStyle & ImageStyle & {
     accentColor?: string;

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

@@ -1,4 +1,4 @@
-import { StyleDependency } from "../../types.js";
+import { StyleDependency } from "../../common/consts.js";
 import { UniwindListener } from "../listener.js";
 class CSSListenerBuilder {
   activeRules = /* @__PURE__ */ new Set();

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

@@ -1,3 +1,3 @@
-import { RNStyle, UniwindContextType } from '../types';
+import type { RNStyle, UniwindContextType } from '../types';
 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/hoc/types.d.ts

@@ -1,5 +1,5 @@
-import { ComponentProps, ComponentPropsWithRef } from 'react';
-import { RNStyle } from '../core/types';
+import type { ComponentProps, ComponentPropsWithRef } from 'react';
+import type { 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;

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

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

package/dist/module/hoc/withUniwind.js

@@ -7,8 +7,8 @@ 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) => {
+export const withUniwind = (Component, options) => options ? withManualUniwind(Component, options) : withAutoUniwind(Component);
+const withAutoUniwind = (Component) => (props) => {
   const uniwindContext = useUniwindContext();
   const { classNames, generatedProps } = Object.entries(props).reduce((acc, [propName, propValue]) => {
     if (isColorClassProperty(propName)) {
@@ -47,7 +47,7 @@ const withAutoUniwind = (Component2) => (props) => {
     return dispose;
   }, [classNames]);
   return /* @__PURE__ */ jsx(
-    Component2,
+    Component,
     {
       ...props,
       ...generatedProps,
@@ -55,7 +55,7 @@ const withAutoUniwind = (Component2) => (props) => {
     }
   );
 };
-const withManualUniwind = (Component2, options) => (props) => {
+const withManualUniwind = (Component, options) => (props) => {
   const uniwindContext = useUniwindContext();
   const { generatedProps, classNames } = Object.entries(options).reduce((acc, [propName, option]) => {
     const className = props[option.fromClassName];
@@ -81,7 +81,7 @@ const withManualUniwind = (Component2, options) => (props) => {
     return dispose;
   }, [classNames]);
   return /* @__PURE__ */ jsx(
-    Component2,
+    Component,
     {
       ...props,
       ...generatedProps,