@niibase/uniwind 1.6.4 → 1.8.0

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

@@ -1,8 +1,6 @@
 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 {
   parseBoxShadow,
   parseFontVariant,
@@ -46,18 +44,18 @@ class UniwindStoreBuilder {
     const commonPlatformVars = scopedVars[`${UNIWIND_PLATFORM_VARIABLES}${commonPlatform}`];
     const platformVars = scopedVars[`${UNIWIND_PLATFORM_VARIABLES}${platform}`];
     if (commonPlatformVars) {
-      Object.defineProperties(vars, Object.getOwnPropertyDescriptors(commonPlatformVars));
+      Object.assign(vars, commonPlatformVars);
     }
     if (platformVars) {
-      Object.defineProperties(vars, Object.getOwnPropertyDescriptors(platformVars));
+      Object.assign(vars, platformVars);
     }
     this.keyframes = keyframes;
     this.stylesheet = stylesheet;
     this.vars = Object.fromEntries(themes.map((theme) => {
-      const clonedVars = cloneWithAccessors(vars);
+      const clonedVars = Object.create(vars);
       const themeVars = scopedVars[`${UNIWIND_THEME_VARIABLES}${theme}`];
       if (themeVars) {
-        Object.defineProperties(clonedVars, Object.getOwnPropertyDescriptors(themeVars));
+        Object.assign(clonedVars, themeVars);
       }
       return [theme, clonedVars];
     }));
@@ -67,7 +65,7 @@ class UniwindStoreBuilder {
     }
   };
   resolveStyles(classNames, componentProps, state, uniwindContext) {
-    const result = {};
+    const resultGetters = {};
     const theme = uniwindContext.scopedTheme ?? this.runtime.currentThemeName;
     let vars = this.vars[theme];
     const originalVars = vars;
@@ -103,93 +101,52 @@ class UniwindStoreBuilder {
           }
           if (property[0] === "-") {
             if (vars === originalVars) {
-              vars = cloneWithAccessors(originalVars);
+              vars = Object.create(originalVars);
             }
-            Object.defineProperty(vars, property, {
-              configurable: true,
-              enumerable: true,
-              get: valueGetter
-            });
+            vars[property] = valueGetter;
           } else {
-            Object.defineProperty(result, property, {
-              configurable: true,
-              enumerable: true,
-              get: () => valueGetter.call(vars)
-            });
+            resultGetters[property] = valueGetter;
           }
           bestBreakpoints.set(property, style);
         }
       }
     }
+    const result = Object.fromEntries(
+      Object.entries(resultGetters).map(([property, valueGetter]) => [property, valueGetter(vars)])
+    );
     if (result.lineHeight !== void 0 && result.lineHeight < 6) {
-      Object.defineProperty(result, "lineHeight", {
-        value: result.fontSize * result.lineHeight,
-        configurable: true,
-        enumerable: true
-      });
+      result.lineHeight *= result.fontSize;
     }
     if (result.boxShadow !== void 0) {
-      Object.defineProperty(result, "boxShadow", {
-        value: parseBoxShadow(result.boxShadow),
-        configurable: true,
-        enumerable: true
-      });
+      result.boxShadow = parseBoxShadow(result.boxShadow);
     }
     if (result.visibility === "hidden") {
-      Object.defineProperty(result, "display", {
-        value: "none",
-        configurable: true,
-        enumerable: true
-      });
+      result.display = "none";
     }
     if (result.borderStyle !== void 0 && result.borderColor === void 0) {
-      Object.defineProperty(result, "borderColor", {
-        value: "#000000",
-        configurable: true,
-        enumerable: true
-      });
+      result.borderColor = "#000000";
     }
     if (result.outlineStyle !== void 0 && result.outlineColor === void 0) {
-      Object.defineProperty(result, "outlineColor", {
-        value: "#000000",
-        configurable: true,
-        enumerable: true
-      });
+      result.outlineColor = "#000000";
     }
     if (result.fontVariant !== void 0) {
-      Object.defineProperty(result, "fontVariant", {
-        value: parseFontVariant(result.fontVariant),
-        configurable: true,
-        enumerable: true
-      });
+      result.fontVariant = parseFontVariant(result.fontVariant);
     }
     parseTransformsMutation(result);
     parseTransitionsMutation(result);
     if (typeof result.animationName === "string") {
-      Object.defineProperty(result, "animationName", {
-        value: this.keyframes[result.animationName] ?? [],
-        configurable: true,
-        enumerable: true
-      });
+      result.animationName = this.keyframes[result.animationName] ?? [];
     } else if (Array.isArray(result.animationName)) {
-      Object.defineProperty(result, "animationName", {
-        value: result.animationName.map((animationName) => this.keyframes[animationName] ?? void 0).filter(Boolean),
-        configurable: true,
-        enumerable: true
-      });
+      result.animationName = result.animationName.map((animationName) => this.keyframes[animationName] ?? void 0).filter(Boolean);
     }
     if (result.experimental_backgroundImage !== void 0) {
-      Object.defineProperty(result, "experimental_backgroundImage", {
-        value: resolveGradient(result.experimental_backgroundImage),
-        configurable: true,
-        enumerable: true
-      });
+      result.experimental_backgroundImage = resolveGradient(result.experimental_backgroundImage);
     }
     if (result.textShadow !== void 0) {
       parseTextShadowMutation(result);
     }
     return {
-      styles: { ...result },
+      styles: result,
       dependencies: Array.from(dependencies),
       dependencySum,
       hasDataAttributes

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

@@ -1,15 +1,17 @@
 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 Vars = Record<PropertyKey, Var>;
+export type Var = (vars: Vars) => unknown;
 export type Style = {
-    entries: Array<[string, () => unknown]>;
+    entries: Array<[string, Var]>;
     minWidth: number;
     maxWidth: number;
     orientation: Orientation | null;
-    theme: ColorScheme | null;
+    theme: ThemeName | null;
     rtl: boolean | null;
     native: boolean;
     dependencies: Array<StyleDependency> | null;
@@ -25,10 +27,12 @@ export type Style = {
 export type StyleSheets = Record<string, Array<Style>>;
 export type GenerateStyleSheetsCallback = (rt: UniwindRuntime) => {
     stylesheet: StyleSheets;
-    vars: Record<string, unknown>;
+    vars: Vars;
     keyframes: Record<string, CSSAnimationKeyframes>;
-    scopedVars: Partial<Record<string, Record<string, unknown>>>;
+    scopedVars: Partial<Record<string, Vars>>;
 };
+export interface UniwindConfig {
+}
 type UserThemes = UniwindConfig extends {
     themes: infer T extends readonly string[];
 } ? T : readonly string[];
@@ -58,6 +62,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,

package/dist/module/hoc/withUniwind.native.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.native.js

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

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

@@ -1,2 +1,2 @@
-import { UniwindContextType } from '../../core/types';
+import type { UniwindContextType } from '../../core/types';
 export declare const getVariableValue: (name: string, uniwindContext: UniwindContextType) => unknown;

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

@@ -1,2 +1,5 @@
 import { UniwindRuntime, UniwindStore } from "../../core/native/index.js";
-export const getVariableValue = (name, uniwindContext) => UniwindStore.vars[uniwindContext.scopedTheme ?? UniwindRuntime.currentThemeName]?.[name];
+export const getVariableValue = (name, uniwindContext) => {
+  const vars = UniwindStore.vars[uniwindContext.scopedTheme ?? UniwindRuntime.currentThemeName];
+  return vars?.[name]?.(vars);
+};

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

@@ -1,4 +1,4 @@
-import { UniwindContextType } from '../../core/types';
+import type { UniwindContextType } from '../../core/types';
 export declare const getCSSVariable: (name: string | Array<string>, uniwindContext: UniwindContextType) => string | (string | undefined)[] | undefined;
 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]>;

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

@@ -1,12 +1,16 @@
 import { useLayoutEffect, useRef, useState } from "react";
+import { Platform } from "react-native";
+import { StyleDependency } from "../../common/consts.js";
 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";
 let warned = false;
 const logDevError = (name) => {
+  if (Platform.OS === "web" && (typeof document === "undefined" || typeof window === "undefined")) {
+    return;
+  }
   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`

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

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

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

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

package/dist/module/hooks/useUniwind.js

@@ -1,8 +1,8 @@
 import { useLayoutEffect, useState } from "react";
+import { StyleDependency } from "../common/consts.js";
 import { Uniwind } from "../core/index.js";
 import { useUniwindContext } from "../core/context.js";
 import { UniwindListener } from "../core/listener.js";
-import { StyleDependency } from "../types.js";
 export const useUniwind = () => {
   const uniwindContext = useUniwindContext();
   const [theme, setTheme] = useState(Uniwind.currentTheme);

package/dist/module/index.d.ts

@@ -1,7 +1,6 @@
 export * from './components/ScopedTheme';
 export { Uniwind } from './core';
-export type { ThemeName } from './core/types';
+export type { ThemeName, UniwindConfig } from './core/types';
 export { withUniwind } from './hoc';
 export type { ApplyUniwind, ApplyUniwindOptions } from './hoc/types';
 export { useCSSVariable, useResolveClassNames, useUniwind } from './hooks';
-export type { UniwindConfig } from './types';