react-native-unistyles 3.0.0-beta.4 → 3.0.0-beta.6

package/lib/commonjs/web/utils/unistyle.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.schemeToTheme = exports.removeInlineStyles = exports.isInDocument = exports.getMediaQuery = exports.extractUnistyleDependencies = exports.extractSecrets = exports.extractMediaQueryValue = exports.assignSecrets = void 0;
+exports.schemeToTheme = exports.removeInlineStyles = exports.isInDocument = exports.getMediaQuery = exports.extractUnistyleDependencies = exports.extractSecrets = exports.assignSecrets = void 0;
 var _types = require("../../specs/types");
 var _mq = require("../../mq");
-var _state = require("../state");
 var _common = require("./common");
+var _index = require("../index");
 const schemeToTheme = scheme => {
   switch (scheme) {
     case _types.ColorScheme.Dark:
@@ -19,13 +19,32 @@ const schemeToTheme = scheme => {
 };
 exports.schemeToTheme = schemeToTheme;
 const assignSecrets = (object, secrets) => {
-  // @ts-expect-error - assign secrets to object
-  object.__uni__secrets__ = secrets;
+  const secretsId = Math.random().toString(36).slice(8);
+
+  // @ts-expect-error assign hidden secrets
+  object[`unistyles-${secretsId}`] = {};
+  // @ts-expect-error assign hidden secrets
+  Object.defineProperties(object[`unistyles-${secretsId}`], (0, _common.reduceObject)(secrets, secret => ({
+    value: secret,
+    enumerable: false,
+    configurable: true
+  })));
   return object;
 };
 exports.assignSecrets = assignSecrets;
 const extractSecrets = object => {
-  return object && (0, _common.keyInObject)(object, '__uni__secrets__') ? object.__uni__secrets__ : undefined;
+  if (!object) {
+    return undefined;
+  }
+  const [, secrets] = Object.entries(object).find(([key]) => key.startsWith('unistyles-')) ?? [];
+  if (!secrets) {
+    return undefined;
+  }
+  const hiddenSecrets = Object.getOwnPropertyDescriptors(secrets);
+  if (Object.keys(hiddenSecrets).length === 0) {
+    return undefined;
+  }
+  return (0, _common.reduceObject)(hiddenSecrets, secret => secret.value);
 };
 exports.extractSecrets = extractSecrets;
 const removeInlineStyles = values => {
@@ -40,18 +59,9 @@ const removeInlineStyles = values => {
 exports.removeInlineStyles = removeInlineStyles;
 const isInDocument = element => document.body.contains(element);
 exports.isInDocument = isInDocument;
-const extractMediaQueryValue = query => {
-  const [_, px] = query.match(/(\d+)px/) ?? [];
-  if (!px) {
-    return undefined;
-  }
-  const value = Number(px);
-  return Number.isNaN(value) ? undefined : value;
-};
-exports.extractMediaQueryValue = extractMediaQueryValue;
-const getMediaQuery = query => {
+const getMediaQuery = (query, allBreakpoints) => {
   if (Object.values(_types.Orientation).includes(query)) {
-    return `(orientation: ${query})`;
+    return `@media (orientation: ${query})`;
   }
   if ((0, _mq.isUnistylesMq)(query)) {
     const {
@@ -60,10 +70,13 @@ const getMediaQuery = query => {
       minHeight,
       maxHeight
     } = (0, _mq.parseMq)(query);
-    return [minWidth ? `(min-width: ${minWidth}px)` : undefined, maxWidth ? `(max-width: ${maxWidth}px)` : undefined, minHeight ? `(min-height: ${minHeight}px)` : undefined, maxHeight ? `(max-height: ${maxHeight}px)` : undefined].filter(Boolean).join(' and ');
+    const queries = [minWidth ? `(min-width: ${minWidth}px)` : undefined, maxWidth ? `(max-width: ${maxWidth}px)` : undefined, minHeight ? `(min-height: ${minHeight}px)` : undefined, maxHeight ? `(max-height: ${maxHeight}px)` : undefined].filter(Boolean).join(' and ');
+    return `@media ${queries}`;
   }
-  const minWidth = _state.UnistylesState.breakpoints && (0, _common.keyInObject)(_state.UnistylesState.breakpoints, query) ? _state.UnistylesState.breakpoints[query] : undefined;
-  return `(min-width: ${minWidth ?? 0}px)`;
+  const breakpointValue = _index.UnistylesWeb.runtime.breakpoints[query] ?? 0;
+  const nextBreakpoint = allBreakpoints.filter(b => b in _index.UnistylesWeb.runtime.breakpoints).map(b => _index.UnistylesWeb.runtime.breakpoints[b]).sort((a, b) => a - b).find(b => b > breakpointValue);
+  const queries = [`(min-width: ${breakpointValue}px)`, nextBreakpoint ? `(max-width: ${nextBreakpoint - 1}px)` : undefined].filter(Boolean).join(' and ');
+  return `@media ${queries}`;
 };
 exports.getMediaQuery = getMediaQuery;
 const extractUnistyleDependencies = value => {

package/lib/commonjs/web/utils/unistyle.js.map

@@ -1 +1 @@
-{"version":3,"names":["_types","require","_mq","_state","_common","schemeToTheme","scheme","ColorScheme","Dark","Light","exports","assignSecrets","object","secrets","__uni__secrets__","extractSecrets","keyInObject","undefined","removeInlineStyles","values","returnValue","Object","defineProperties","reduceObject","value","enumerable","configurable","isInDocument","element","document","body","contains","extractMediaQueryValue","query","_","px","match","Number","isNaN","getMediaQuery","Orientation","includes","isUnistylesMq","minWidth","maxWidth","minHeight","maxHeight","parseMq","filter","Boolean","join","UnistylesState","breakpoints","extractUnistyleDependencies","dependencies","uni__dependencies","Array","isArray"],"sourceRoot":"../../../../src","sources":["web/utils/unistyle.ts"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_types","require","_mq","_common","_index","schemeToTheme","scheme","ColorScheme","Dark","Light","exports","assignSecrets","object","secrets","secretsId","Math","random","toString","slice","Object","defineProperties","reduceObject","secret","value","enumerable","configurable","extractSecrets","undefined","entries","find","key","startsWith","hiddenSecrets","getOwnPropertyDescriptors","keys","length","removeInlineStyles","values","returnValue","isInDocument","element","document","body","contains","getMediaQuery","query","allBreakpoints","Orientation","includes","isUnistylesMq","minWidth","maxWidth","minHeight","maxHeight","parseMq","queries","filter","Boolean","join","breakpointValue","UnistylesWeb","runtime","breakpoints","nextBreakpoint","b","map","sort","a","extractUnistyleDependencies","dependencies","keyInObject","uni__dependencies","Array","isArray"],"sourceRoot":"../../../../src","sources":["web/utils/unistyle.ts"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/web/variants.js

@@ -5,35 +5,33 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getVariants = void 0;
 var _utils = require("../utils");
-const hasVariants = value => 'variants' in value[1];
+var _utils2 = require("./utils");
+const hasVariants = value => {
+  return (0, _utils2.keyInObject)(value, 'variants');
+};
 const getVariants = (styles, selectedVariants) => {
-  return Object.entries(styles).filter(hasVariants).filter(([_key, {
-    variants
-  }]) => Object.keys(variants).some(variant => variant in variants)).map(([key, {
-    variants,
-    compoundVariants = []
-  }]) => {
-    const variantStyles = Object.entries(variants).flatMap(([variant, styles]) => {
-      const selectedVariant = selectedVariants[variant];
-      const selectedVariantStyles = styles[selectedVariant] ?? styles.default;
-      if (!selectedVariantStyles) {
-        return [];
-      }
-      return selectedVariantStyles;
-    });
-    const compoundVariantStyles = compoundVariants.flatMap(compoundVariant => {
-      const {
-        styles,
-        ...conditions
-      } = compoundVariant;
-      if (Object.entries(conditions).some(([variant, value]) => String(selectedVariants[variant]) !== String(value))) {
-        return [];
-      }
-      return styles;
-    });
-    const mergedVariantStyles = (0, _utils.deepMergeObjects)(...variantStyles, ...compoundVariantStyles);
-    return [key, mergedVariantStyles];
+  if (!hasVariants(styles)) {
+    return {};
+  }
+  const variantStyles = Object.entries(styles.variants).flatMap(([variant, styles]) => {
+    const selectedVariant = selectedVariants[variant];
+    const selectedVariantStyles = styles[selectedVariant] ?? styles.default;
+    if (!selectedVariantStyles) {
+      return [];
+    }
+    return selectedVariantStyles;
   });
+  const compoundVariantStyles = styles.compoundVariants?.flatMap(compoundVariant => {
+    const {
+      styles,
+      ...conditions
+    } = compoundVariant;
+    if (Object.entries(conditions).some(([variant, value]) => String(selectedVariants[variant]) !== String(value))) {
+      return [];
+    }
+    return styles;
+  }) ?? [];
+  return (0, _utils.deepMergeObjects)(...variantStyles, ...compoundVariantStyles);
 };
 exports.getVariants = getVariants;
 //# sourceMappingURL=variants.js.map

package/lib/commonjs/web/variants.js.map

@@ -1 +1 @@
-{"version":3,"names":["_utils","require","hasVariants","value","getVariants","styles","selectedVariants","Object","entries","filter","_key","variants","keys","some","variant","map","key","compoundVariants","variantStyles","flatMap","selectedVariant","selectedVariantStyles","default","compoundVariantStyles","compoundVariant","conditions","String","mergedVariantStyles","deepMergeObjects","exports"],"sourceRoot":"../../../src","sources":["web/variants.ts"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AAQA,MAAMC,WAAW,GAAsBC,KAAkB,IAAgD,UAAU,IAAIA,KAAK,CAAC,CAAC,CAAC;AAExH,MAAMC,WAAW,GAAGA,CAACC,MAAyC,EAAEC,gBAAqC,KAAK;EAC7G,OAAOC,MAAM,CAACC,OAAO,CAACH,MAAM,CAAC,CACxBI,MAAM,CAACP,WAAW,CAAC,CACnBO,MAAM,CAAC,CAAC,CAACC,IAAI,EAAE;IAAEC;EAAS,CAAC,CAAC,KAAKJ,MAAM,CAACK,IAAI,CAACD,QAAQ,CAAC,CAACE,IAAI,CAACC,OAAO,IAAIA,OAAO,IAAIH,QAAQ,CAAC,CAAC,CAC5FI,GAAG,CAAC,CAAC,CAACC,GAAG,EAAE;IAAEL,QAAQ;IAAEM,gBAAgB,GAAG;EAAG,CAAC,CAAC,KAAK;IACjD,MAAMC,aAAa,GAAGX,MAAM,CAACC,OAAO,CAACG,QAAQ,CAAC,CAACQ,OAAO,CAAC,CAAC,CAACL,OAAO,EAAET,MAAM,CAAC,KAAK;MAC1E,MAAMe,eAAe,GAAGd,gBAAgB,CAACQ,OAAO,CAAC;MACjD,MAAMO,qBAAqB,GAAGhB,MAAM,CAACe,eAAe,CAAC,IAAIf,MAAM,CAACiB,OAAO;MAEvE,IAAI,CAACD,qBAAqB,EAAE;QACxB,OAAO,EAAE;MACb;MAEA,OAAOA,qBAAqB;IAChC,CAAC,CAAC;IAEF,MAAME,qBAAqB,GAAGN,gBAAgB,CAACE,OAAO,CAACK,eAAe,IAAI;MACtE,MAAM;QAAEnB,MAAM;QAAE,GAAGoB;MAAW,CAAC,GAAGD,eAAe;MAEjD,IAAIjB,MAAM,CAACC,OAAO,CAACiB,UAAU,CAAC,CAACZ,IAAI,CAAC,CAAC,CAACC,OAAO,EAAEX,KAAK,CAAC,KAAKuB,MAAM,CAACpB,gBAAgB,CAACQ,OAAO,CAAC,CAAC,KAAKY,MAAM,CAACvB,KAAK,CAAC,CAAC,EAAE;QAC5G,OAAO,EAAE;MACb;MAEA,OAAOE,MAAM;IACjB,CAAC,CAAC;IAEF,MAAMsB,mBAAmB,GAAG,IAAAC,uBAAgB,EAAC,GAAGV,aAAa,EAAE,GAAGK,qBAAqB,CAAC;IAExF,OAAO,CAACP,GAAG,EAAEW,mBAAmB,CAAC;EACrC,CAAC,CAAC;AACV,CAAC;AAAAE,OAAA,CAAAzB,WAAA,GAAAA,WAAA","ignoreList":[]}
+{"version":3,"names":["_utils","require","_utils2","hasVariants","value","keyInObject","getVariants","styles","selectedVariants","variantStyles","Object","entries","variants","flatMap","variant","selectedVariant","selectedVariantStyles","default","compoundVariantStyles","compoundVariants","compoundVariant","conditions","some","String","deepMergeObjects","exports"],"sourceRoot":"../../../src","sources":["web/variants.ts"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAQA,MAAME,WAAW,GAAIC,KAAU,IAAkC;EAC7D,OAAO,IAAAC,mBAAW,EAACD,KAAK,EAAE,UAAU,CAAC;AACzC,CAAC;AAEM,MAAME,WAAW,GAAGA,CAACC,MAAuB,EAAEC,gBAAqC,KAAK;EAC3F,IAAI,CAACL,WAAW,CAACI,MAAM,CAAC,EAAE;IACtB,OAAO,CAAC,CAAC;EACb;EAEA,MAAME,aAAa,GAAGC,MAAM,CAACC,OAAO,CAACJ,MAAM,CAACK,QAAQ,CAAC,CAACC,OAAO,CAAC,CAAC,CAACC,OAAO,EAAEP,MAAM,CAAC,KAAK;IACjF,MAAMQ,eAAe,GAAGP,gBAAgB,CAACM,OAAO,CAAC;IACjD,MAAME,qBAAqB,GAAGT,MAAM,CAACQ,eAAe,CAAC,IAAIR,MAAM,CAACU,OAAO;IAEvE,IAAI,CAACD,qBAAqB,EAAE;MACxB,OAAO,EAAE;IACb;IAEA,OAAOA,qBAAqB;EAChC,CAAC,CAAC;EAEF,MAAME,qBAAqB,GAAGX,MAAM,CAACY,gBAAgB,EAAEN,OAAO,CAACO,eAAe,IAAI;IAC9E,MAAM;MAAEb,MAAM;MAAE,GAAGc;IAAW,CAAC,GAAGD,eAAe;IAEjD,IAAIV,MAAM,CAACC,OAAO,CAACU,UAAU,CAAC,CAACC,IAAI,CAAC,CAAC,CAACR,OAAO,EAAEV,KAAK,CAAC,KAAKmB,MAAM,CAACf,gBAAgB,CAACM,OAAO,CAAC,CAAC,KAAKS,MAAM,CAACnB,KAAK,CAAC,CAAC,EAAE;MAC5G,OAAO,EAAE;IACb;IAEA,OAAOG,MAAM;EACjB,CAAC,CAAC,IAAI,EAAE;EAER,OAAO,IAAAiB,uBAAgB,EAAC,GAAGf,aAAa,EAAE,GAAGS,qBAAqB,CAAC;AACvE,CAAC;AAAAO,OAAA,CAAAnB,WAAA,GAAAA,WAAA","ignoreList":[]}

package/lib/module/components/ScopedTheme.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useLayoutEffect","UnistylesShadowRegistry","jsx","_jsx","Apply","name","setScopedTheme","ScopedTheme","children","previousScopedTheme","getScopedTheme","mappedChildren","Fragment"],"sourceRoot":"../../../src","sources":["components/ScopedTheme.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,eAAe,QAAQ,OAAO;AAE9C,SAASC,uBAAuB,QAAQ,UAAU;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAMlD,MAAMC,KAAK,GAAGA,CAAC;EAAEC;AAAuC,CAAC,KAAK;EAC1DJ,uBAAuB,CAACK,cAAc,CAACD,IAAI,CAAC;EAE5CL,eAAe,CAAC,MAAM;IAClBC,uBAAuB,CAACK,cAAc,CAACD,IAAI,CAAC;EAChD,CAAC,CAAC;EAEF,OAAO,IAAI;AACf,CAAC;AAED,OAAO,MAAME,WAAyE,GAAGA,CAAC;EAAEF,IAAI;EAAEG;AAAS,CAAC,KAAK;EAC7G,MAAMC,mBAAmB,GAAGR,uBAAuB,CAACS,cAAc,CAAC,CAAC;EACpE,MAAMC,cAAc,GAAG,cACnBR,IAAA,CAACC,KAAK;IAAYC,IAAI,EAAEA;EAAK,GAAjBA,IAAmB,CAAC,EAChCG,QAAQ,eACRL,IAAA,CAACC,KAAK;IAAeC,IAAI,EAAEI;EAAoB,GAApC,SAAsC,CAAC,CACrD;EAED,oBACIN,IAAA,CAACJ,KAAK,CAACa,QAAQ;IAAAJ,QAAA,EACVG;EAAc,CACH,CAAC;AAEzB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useLayoutEffect","UnistylesShadowRegistry","jsx","_jsx","Apply","name","setScopedTheme","ScopedTheme","children","previousScopedTheme","getScopedTheme","mappedChildren","Fragment"],"sourceRoot":"../../../src","sources":["components/ScopedTheme.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,eAAe,QAAQ,OAAO;AAE9C,SAASC,uBAAuB,QAAQ,UAAU;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAMlD,MAAMC,KAAK,GAAGA,CAAC;EAAEC;AAAuC,CAAC,KAAK;EAC1DJ,uBAAuB,CAACK,cAAc,CAACD,IAAI,CAAC;EAE5CL,eAAe,CAAC,MAAM;IAClBC,uBAAuB,CAACK,cAAc,CAACD,IAAI,CAAC;EAChD,CAAC,CAAC;EAEF,OAAO,IAAI;AACf,CAAC;AAED,OAAO,MAAME,WAAyE,GAAGA,CAAC;EAAEF,IAAI;EAAEG;AAAS,CAAC,KAAK;EAC7G,MAAMC,mBAAmB,GAAGR,uBAAuB,CAACS,cAAc,CAAC,CAAC;EACpE,MAAMC,cAAc,GAAG,cACnBR,IAAA,CAACC,KAAK;IAAYC,IAAI,EAAEA;EAAK,GAAjBA,IAAmB,CAAC,EAChCG,QAAQ,eACRL,IAAA,CAACC,KAAK;IAAeC,IAAI,EAAEI;EAAyD,GAAzE,SAA2E,CAAC,CAC1F;EAED,oBACIN,IAAA,CAACJ,KAAK,CAACa,QAAQ;IAAAJ,QAAA,EACVG;EAAc,CACH,CAAC;AAEzB,CAAC","ignoreList":[]}

package/lib/module/components/index.js

@@ -2,6 +2,5 @@
 
 export { Hide } from './Hide';
 export { Display } from './Display';
-export { Variants } from './Variants';
 export { ScopedTheme } from './ScopedTheme';
 //# sourceMappingURL=index.js.map

package/lib/module/components/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Hide","Display","Variants","ScopedTheme"],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,SAASA,IAAI,QAAQ,QAAQ;AAC7B,SAASC,OAAO,QAAQ,WAAW;AACnC,SAASC,QAAQ,QAAQ,YAAY;AACrC,SAASC,WAAW,QAAQ,eAAe","ignoreList":[]}
+{"version":3,"names":["Hide","Display","ScopedTheme"],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,SAASA,IAAI,QAAQ,QAAQ;AAC7B,SAASC,OAAO,QAAQ,WAAW;AACnC,SAASC,WAAW,QAAQ,eAAe","ignoreList":[]}

package/lib/module/components/native/Animated.js

@@ -0,0 +1,19 @@
+"use strict";
+
+import { Animated as RNAnimated } from 'react-native';
+import { View } from './View';
+import { Text } from './Text';
+import { FlatList } from './FlatList';
+import { Image } from './Image';
+import { ScrollView } from './ScrollView';
+import { SectionList } from './SectionList';
+export const Animated = {
+  ...RNAnimated,
+  View: RNAnimated.createAnimatedComponent(View),
+  Text: RNAnimated.createAnimatedComponent(Text),
+  FlatList: RNAnimated.createAnimatedComponent(FlatList),
+  Image: RNAnimated.createAnimatedComponent(Image),
+  ScrollView: RNAnimated.createAnimatedComponent(ScrollView),
+  SectionList: RNAnimated.createAnimatedComponent(SectionList)
+};
+//# sourceMappingURL=Animated.js.map

package/lib/module/components/native/Animated.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Animated","RNAnimated","View","Text","FlatList","Image","ScrollView","SectionList","createAnimatedComponent"],"sourceRoot":"../../../../src","sources":["components/native/Animated.tsx"],"mappings":";;AAAA,SAASA,QAAQ,IAAIC,UAAU,QAAQ,cAAc;AACrD,SAASC,IAAI,QAAQ,QAAQ;AAC7B,SAASC,IAAI,QAAQ,QAAQ;AAC7B,SAASC,QAAQ,QAAQ,YAAY;AACrC,SAASC,KAAK,QAAQ,SAAS;AAC/B,SAASC,UAAU,QAAQ,cAAc;AACzC,SAASC,WAAW,QAAQ,eAAe;AAE3C,OAAO,MAAMP,QAAQ,GAAG;EACpB,GAAGC,UAAU;EACbC,IAAI,EAAED,UAAU,CAACO,uBAAuB,CAACN,IAAI,CAAC;EAC9CC,IAAI,EAAEF,UAAU,CAACO,uBAAuB,CAACL,IAAI,CAAC;EAC9CC,QAAQ,EAAEH,UAAU,CAACO,uBAAuB,CAACJ,QAAQ,CAAC;EACtDC,KAAK,EAAEJ,UAAU,CAACO,uBAAuB,CAACH,KAAK,CAAC;EAChDC,UAAU,EAAEL,UAAU,CAACO,uBAAuB,CAACF,UAAU,CAAC;EAC1DC,WAAW,EAAEN,UAAU,CAACO,uBAAuB,CAACD,WAAW;AAC/D,CAAC","ignoreList":[]}

package/lib/module/components/native/ImageBackground.js

@@ -1,6 +1,51 @@
 "use strict";
 
+import React from 'react';
 import { ImageBackground as NativeImageBackground } from 'react-native';
-import { createUnistylesImageBackground } from '../../core';
-export const ImageBackground = createUnistylesImageBackground(NativeImageBackground);
+import { forwardRef } from 'react';
+import { getClassName } from '../../core';
+import { isServer } from '../../web/utils';
+import { UnistylesShadowRegistry } from '../../web';
+import { copyComponentProperties } from '../../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const UnistylesImageBackground = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  let storedRef = null;
+  let storedImageRef = null;
+  const styleClassNames = getClassName(props.style);
+  const imageClassNames = getClassName(props.imageStyle);
+  return (
+    /*#__PURE__*/
+    // @ts-expect-error - RN types are not compatible with RNW styles
+    _jsx(NativeImageBackground, {
+      ...props,
+      style: styleClassNames,
+      imageStyle: imageClassNames,
+      ref: isServer() ? undefined : ref => {
+        if (!ref) {
+          // @ts-expect-error hidden from TS
+          UnistylesShadowRegistry.remove(storedRef, styleClassNames?.hash);
+        }
+        storedRef = ref;
+        // @ts-expect-error hidden from TS
+        UnistylesShadowRegistry.add(ref, styleClassNames?.hash);
+        if (typeof forwardedRef === 'function') {
+          return forwardedRef(ref);
+        }
+        if (forwardedRef) {
+          forwardedRef.current = ref;
+        }
+      },
+      imageRef: isServer() ? undefined : ref => {
+        if (!ref) {
+          // @ts-expect-error hidden from TS
+          UnistylesShadowRegistry.remove(storedImageRef, imageClassNames?.hash);
+        }
+        storedImageRef = ref;
+        // @ts-expect-error hidden from TS
+        UnistylesShadowRegistry.add(ref, imageClassNames?.hash);
+      }
+    })
+  );
+});
+export const ImageBackground = copyComponentProperties(NativeImageBackground, UnistylesImageBackground);
 //# sourceMappingURL=ImageBackground.js.map

package/lib/module/components/native/ImageBackground.js.map

@@ -1 +1 @@
-{"version":3,"names":["ImageBackground","NativeImageBackground","createUnistylesImageBackground"],"sourceRoot":"../../../../src","sources":["components/native/ImageBackground.tsx"],"mappings":";;AAAA,SAASA,eAAe,IAAIC,qBAAqB,QAAQ,cAAc;AACvE,SAASC,8BAA8B,QAAQ,YAAY;AAE3D,OAAO,MAAMF,eAAe,GAAGE,8BAA8B,CAACD,qBAAqB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","ImageBackground","NativeImageBackground","forwardRef","getClassName","isServer","UnistylesShadowRegistry","copyComponentProperties","jsx","_jsx","UnistylesImageBackground","props","forwardedRef","storedRef","storedImageRef","styleClassNames","style","imageClassNames","imageStyle","ref","undefined","remove","hash","add","current","imageRef"],"sourceRoot":"../../../../src","sources":["components/native/ImageBackground.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,IAAIC,qBAAqB,QAAQ,cAAc;AACvE,SAASC,UAAU,QAAQ,OAAO;AAElC,SAASC,YAAY,QAAQ,YAAY;AACzC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,uBAAuB,QAAQ,WAAW;AACnD,SAASC,uBAAuB,QAAQ,aAAa;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAOrD,MAAMC,wBAAwB,gBAAGP,UAAU,CAAiB,CAACQ,KAAK,EAAEC,YAAY,KAAK;EACjF,IAAIC,SAAuC,GAAG,IAAI;EAClD,IAAIC,cAA4C,GAAG,IAAI;EACvD,MAAMC,eAAe,GAAGX,YAAY,CAACO,KAAK,CAACK,KAAK,CAAC;EACjD,MAAMC,eAAe,GAAGb,YAAY,CAACO,KAAK,CAACO,UAAU,CAAC;EAEtD;IAAA;IACI;IACAT,IAAA,CAACP,qBAAqB;MAAA,GACdS,KAAK;MACTK,KAAK,EAAED,eAAgB;MACvBG,UAAU,EAAED,eAAgB;MAC5BE,GAAG,EAAEd,QAAQ,CAAC,CAAC,GAAGe,SAAS,GAAGD,GAAG,IAAI;QACjC,IAAI,CAACA,GAAG,EAAE;UACN;UACAb,uBAAuB,CAACe,MAAM,CAACR,SAAS,EAAEE,eAAe,EAAEO,IAAI,CAAC;QACpE;QAEAT,SAAS,GAAGM,GAAG;QACf;QACAb,uBAAuB,CAACiB,GAAG,CAACJ,GAAG,EAAEJ,eAAe,EAAEO,IAAI,CAAC;QAEvD,IAAI,OAAOV,YAAY,KAAK,UAAU,EAAE;UACpC,OAAOA,YAAY,CAACO,GAAG,CAAC;QAC5B;QAEA,IAAIP,YAAY,EAAE;UACdA,YAAY,CAACY,OAAO,GAAGL,GAAG;QAC9B;MACJ,CAAE;MACFM,QAAQ,EAAEpB,QAAQ,CAAC,CAAC,GAAGe,SAAS,GAAGD,GAAG,IAAI;QACtC,IAAI,CAACA,GAAG,EAAE;UACN;UACAb,uBAAuB,CAACe,MAAM,CAACP,cAAc,EAAEG,eAAe,EAAEK,IAAI,CAAC;QACzE;QAEAR,cAAc,GAAGK,GAAG;QACpB;QACAb,uBAAuB,CAACiB,GAAG,CAACJ,GAAG,EAAEF,eAAe,EAAEK,IAAI,CAAC;MAC3D;IAAE,CACL;EAAC;AAEV,CAAC,CAAC;AAEF,OAAO,MAAMrB,eAAe,GAAGM,uBAAuB,CAACL,qBAAqB,EAAEQ,wBAAwB,CAAC","ignoreList":[]}

package/lib/module/components/native/ImageBackground.native.js

@@ -0,0 +1,6 @@
+"use strict";
+
+import { ImageBackground as NativeImageBackground } from 'react-native';
+import { createUnistylesImageBackground } from '../../core';
+export const ImageBackground = createUnistylesImageBackground(NativeImageBackground);
+//# sourceMappingURL=ImageBackground.native.js.map

package/lib/module/components/native/ImageBackground.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ImageBackground","NativeImageBackground","createUnistylesImageBackground"],"sourceRoot":"../../../../src","sources":["components/native/ImageBackground.native.tsx"],"mappings":";;AAAA,SAASA,eAAe,IAAIC,qBAAqB,QAAQ,cAAc;AACvE,SAASC,8BAA8B,QAAQ,YAAY;AAE3D,OAAO,MAAMF,eAAe,GAAGE,8BAA8B,CAACD,qBAAqB,CAAC","ignoreList":[]}

package/lib/module/components/native/NativeText.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { Text } from './Text';
+//# sourceMappingURL=NativeText.js.map

package/lib/module/components/native/NativeText.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Text"],"sourceRoot":"../../../../src","sources":["components/native/NativeText.tsx"],"mappings":";;AAAA,SAASA,IAAI,QAAQ,QAAQ","ignoreList":[]}

package/lib/module/components/native/NativeText.native.js

@@ -0,0 +1,15 @@
+"use strict";
+
+import { createElement, forwardRef } from 'react';
+import { createUnistylesElement } from '../../core';
+
+// credits to @hirbod
+const LeanText = /*#__PURE__*/forwardRef((props, ref) => {
+  return /*#__PURE__*/createElement('RCTText', {
+    ...props,
+    ref
+  });
+});
+LeanText.displayName = 'RCTText';
+export const NativeText = createUnistylesElement(LeanText);
+//# sourceMappingURL=NativeText.native.js.map

package/lib/module/components/native/NativeText.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createElement","forwardRef","createUnistylesElement","LeanText","props","ref","displayName","NativeText"],"sourceRoot":"../../../../src","sources":["components/native/NativeText.native.tsx"],"mappings":";;AACA,SAA6BA,aAAa,EAAEC,UAAU,QAAQ,OAAO;AACrE,SAASC,sBAAsB,QAAQ,YAAY;;AAEnD;AACA,MAAMC,QAAQ,gBAAGF,UAAU,CAAC,CAACG,KAAK,EAAEC,GAAG,KAAK;EACxC,oBAAOL,aAAa,CAAC,SAAS,EAAE;IAAE,GAAGI,KAAK;IAAEC;EAAI,CAAC,CAAC;AACtD,CAAC,CAA6B;AAE9BF,QAAQ,CAACG,WAAW,GAAG,SAAS;AAEhC,OAAO,MAAMC,UAAU,GAAGL,sBAAsB,CAACC,QAAQ,CAAC","ignoreList":[]}

package/lib/module/components/native/NativeView.js

@@ -0,0 +1,5 @@
+"use strict";
+
+import { View } from './View';
+export default View;
+//# sourceMappingURL=NativeView.js.map

package/lib/module/components/native/NativeView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View"],"sourceRoot":"../../../../src","sources":["components/native/NativeView.tsx"],"mappings":";;AAAA,SAASA,IAAI,QAAQ,QAAQ;AAE7B,eAAeA,IAAI","ignoreList":[]}

package/lib/module/components/native/NativeView.native.js

@@ -0,0 +1,17 @@
+"use strict";
+
+import { createElement, forwardRef } from 'react';
+import { createUnistylesElement } from '../../core';
+
+// credits to @hirbod
+const LeanView = /*#__PURE__*/forwardRef((props, ref) => {
+  return /*#__PURE__*/createElement('RCTView', {
+    ...props,
+    ref
+  });
+});
+LeanView.displayName = 'RCTView';
+
+// this will match default export from react-native
+export default createUnistylesElement(LeanView);
+//# sourceMappingURL=NativeView.native.js.map

package/lib/module/components/native/NativeView.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createElement","forwardRef","createUnistylesElement","LeanView","props","ref","displayName"],"sourceRoot":"../../../../src","sources":["components/native/NativeView.native.tsx"],"mappings":";;AACA,SAA6BA,aAAa,EAAEC,UAAU,QAAQ,OAAO;AACrE,SAASC,sBAAsB,QAAQ,YAAY;;AAEnD;AACA,MAAMC,QAAQ,gBAAGF,UAAU,CAAC,CAACG,KAAK,EAAEC,GAAG,KAAK;EACxC,oBAAOL,aAAa,CAAC,SAAS,EAAE;IAAE,GAAGI,KAAK;IAAEC;EAAI,CAAC,CAAC;AACtD,CAAC,CAA6B;AAE9BF,QAAQ,CAACG,WAAW,GAAG,SAAS;;AAEhC;AACA,eAAeJ,sBAAsB,CAACC,QAAQ,CAAC","ignoreList":[]}

package/lib/module/components/native/Pressable.js

@@ -1,68 +1,43 @@
 "use strict";
 
-import React, { forwardRef, useRef } from 'react';
+import React, { forwardRef } from 'react';
 import { Pressable as NativePressableReactNative } from 'react-native';
 import { UnistylesShadowRegistry } from '../../specs';
+import { getClassName } from '../../core';
+import { isServer } from '../../web/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const initialState = {
-  pressed: false,
-  hovered: false,
-  focused: false
-};
-const extractStyleResult = style => {
-  return typeof style === 'function' ? [style()] : Array.isArray(style) ? style.map(style => typeof style === 'function' ? style() : style) : [style];
-};
-const updateStyles = ({
-  ref,
-  style,
-  state,
-  scopedTheme,
-  variants
-}) => {
-  const styleResult = typeof style === 'function' ? style(state) : style;
-  const extractedResult = extractStyleResult(styleResult);
-  const previousScopedTheme = UnistylesShadowRegistry.getScopedTheme();
-  const previousVariants = UnistylesShadowRegistry.getVariants();
-  UnistylesShadowRegistry.selectVariants(variants);
-  UnistylesShadowRegistry.setScopedTheme(scopedTheme);
-  UnistylesShadowRegistry.add(ref, extractedResult);
-  UnistylesShadowRegistry.setScopedTheme(previousScopedTheme);
-  UnistylesShadowRegistry.selectVariants(previousVariants);
-};
 export const Pressable = /*#__PURE__*/forwardRef(({
   style,
   ...props
-}, passedRef) => {
-  const storedRef = useRef(null);
+}, forwardedRef) => {
   const scopedTheme = UnistylesShadowRegistry.getScopedTheme();
-  const variants = UnistylesShadowRegistry.getVariants();
+  let storedRef = null;
+  let classNames = undefined;
   return /*#__PURE__*/_jsx(NativePressableReactNative, {
     ...props,
-    style: state => {
-      if (!storedRef.current) {
-        return {};
+    ref: isServer() ? undefined : ref => {
+      storedRef = ref;
+      // @ts-expect-error hidden from TS
+      UnistylesShadowRegistry.add(storedRef, classNames?.hash);
+      if (typeof forwardedRef === 'function') {
+        return forwardedRef(ref);
       }
-      updateStyles({
-        ref: storedRef.current,
-        style: style,
-        variants,
-        scopedTheme,
-        state: state
-      });
-      return {};
-    },
-    ref: ref => {
-      storedRef.current = ref;
-      updateStyles({
-        ref,
-        style: style,
-        variants,
-        scopedTheme,
-        state: initialState
-      });
-      if (typeof passedRef === 'object' && passedRef !== null) {
-        passedRef.current = ref;
+      if (forwardedRef) {
+        forwardedRef.current = ref;
       }
+    },
+    style: state => {
+      const styleResult = typeof style === 'function' ? style(state) : style;
+      const previousScopedTheme = UnistylesShadowRegistry.getScopedTheme();
+      UnistylesShadowRegistry.setScopedTheme(scopedTheme);
+
+      // @ts-expect-error hidden from TS
+      UnistylesShadowRegistry.remove(storedRef, classNames?.hash);
+      classNames = getClassName(styleResult);
+      // @ts-expect-error hidden from TS
+      UnistylesShadowRegistry.add(storedRef, classNames?.hash);
+      UnistylesShadowRegistry.setScopedTheme(previousScopedTheme);
+      return classNames;
     }
   });
 });

package/lib/module/components/native/Pressable.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","forwardRef","useRef","Pressable","NativePressableReactNative","UnistylesShadowRegistry","jsx","_jsx","initialState","pressed","hovered","focused","extractStyleResult","style","Array","isArray","map","updateStyles","ref","state","scopedTheme","variants","styleResult","extractedResult","previousScopedTheme","getScopedTheme","previousVariants","getVariants","selectVariants","setScopedTheme","add","props","passedRef","storedRef","current"],"sourceRoot":"../../../../src","sources":["components/native/Pressable.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,MAAM,QAAQ,OAAO;AACjD,SAASC,SAAS,IAAIC,0BAA0B,QAAQ,cAAc;AAEtE,SAASC,uBAAuB,QAAQ,aAAa;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAgBrD,MAAMC,YAA+B,GAAG;EACpCC,OAAO,EAAE,KAAK;EACdC,OAAO,EAAE,KAAK;EACdC,OAAO,EAAE;AACb,CAAC;AAUD,MAAMC,kBAAkB,GAAIC,KAAU,IAAK;EACvC,OAAO,OAAOA,KAAK,KAAK,UAAU,GAC5B,CAACA,KAAK,CAAC,CAAC,CAAC,GACTC,KAAK,CAACC,OAAO,CAACF,KAAK,CAAC,GAChBA,KAAK,CAACG,GAAG,CAACH,KAAK,IAAI,OAAOA,KAAK,KAAK,UAAU,GAAGA,KAAK,CAAC,CAAC,GAAGA,KAAK,CAAC,GACjE,CAACA,KAAK,CAAC;AACrB,CAAC;AAED,MAAMI,YAAY,GAAGA,CAAC;EAAEC,GAAG;EAAEL,KAAK;EAAEM,KAAK;EAAEC,WAAW;EAAEC;AAA4B,CAAC,KAAK;EACtF,MAAMC,WAAW,GAAG,OAAOT,KAAK,KAAK,UAAU,GACzCA,KAAK,CAACM,KAAK,CAAC,GACZN,KAAK;EACX,MAAMU,eAAe,GAAGX,kBAAkB,CAACU,WAAW,CAAC;EACvD,MAAME,mBAAmB,GAAGnB,uBAAuB,CAACoB,cAAc,CAAC,CAAC;EACpE,MAAMC,gBAAgB,GAAGrB,uBAAuB,CAACsB,WAAW,CAAC,CAAC;EAE9DtB,uBAAuB,CAACuB,cAAc,CAACP,QAA+B,CAAC;EACvEhB,uBAAuB,CAACwB,cAAc,CAACT,WAAkB,CAAC;EAE1Df,uBAAuB,CAACyB,GAAG,CAACZ,GAAG,EAAEK,eAAe,CAAC;EAEjDlB,uBAAuB,CAACwB,cAAc,CAACL,mBAAmB,CAAC;EAC3DnB,uBAAuB,CAACuB,cAAc,CAACF,gBAAuC,CAAC;AACnF,CAAC;AAED,OAAO,MAAMvB,SAAS,gBAAGF,UAAU,CAAuB,CAAC;EAAEY,KAAK;EAAE,GAAGkB;AAAM,CAAC,EAAEC,SAAS,KAAK;EAC1F,MAAMC,SAAS,GAAG/B,MAAM,CAAc,IAAI,CAAC;EAC3C,MAAMkB,WAAW,GAAGf,uBAAuB,CAACoB,cAAc,CAAC,CAAC;EAC5D,MAAMJ,QAAQ,GAAGhB,uBAAuB,CAACsB,WAAW,CAAC,CAAC;EAEtD,oBACIpB,IAAA,CAACH,0BAA0B;IAAA,GACnB2B,KAAK;IACTlB,KAAK,EAAEM,KAAK,IAAI;MACZ,IAAI,CAACc,SAAS,CAACC,OAAO,EAAE;QACpB,OAAO,CAAC,CAAC;MACb;MAEAjB,YAAY,CAAC;QACTC,GAAG,EAAEe,SAAS,CAACC,OAAO;QACtBrB,KAAK,EAAEA,KAA0B;QACjCQ,QAAQ;QACRD,WAAW;QACXD,KAAK,EAAEA;MACX,CAAC,CAAC;MAEF,OAAO,CAAC,CAAC;IACb,CAAE;IACFD,GAAG,EAAEA,GAAG,IAAI;MACRe,SAAS,CAACC,OAAO,GAAGhB,GAAG;MACvBD,YAAY,CAAC;QACTC,GAAG;QACHL,KAAK,EAAEA,KAA0B;QACjCQ,QAAQ;QACRD,WAAW;QACXD,KAAK,EAAEX;MACX,CAAC,CAAC;MAEF,IAAI,OAAOwB,SAAS,KAAK,QAAQ,IAAIA,SAAS,KAAK,IAAI,EAAE;QACrDA,SAAS,CAACE,OAAO,GAAGhB,GAAG;MAC3B;IACJ;EAAE,CACL,CAAC;AAEV,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","forwardRef","Pressable","NativePressableReactNative","UnistylesShadowRegistry","getClassName","isServer","jsx","_jsx","style","props","forwardedRef","scopedTheme","getScopedTheme","storedRef","classNames","undefined","ref","add","hash","current","state","styleResult","previousScopedTheme","setScopedTheme","remove"],"sourceRoot":"../../../../src","sources":["components/native/Pressable.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,SAAS,IAAIC,0BAA0B,QAAQ,cAAc;AAEtE,SAASC,uBAAuB,QAAQ,aAAa;AAErD,SAASC,YAAY,QAAQ,YAAY;AACzC,SAASC,QAAQ,QAAQ,iBAAiB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAgB1C,OAAO,MAAMN,SAAS,gBAAGD,UAAU,CAAuB,CAAC;EAAEQ,KAAK;EAAE,GAAGC;AAAM,CAAC,EAAEC,YAAY,KAAK;EAC7F,MAAMC,WAAW,GAAGR,uBAAuB,CAACS,cAAc,CAAC,CAAC;EAC5D,IAAIC,SAA6B,GAAG,IAAI;EACxC,IAAIC,UAAuD,GAAGC,SAAS;EAEvE,oBACIR,IAAA,CAACL,0BAA0B;IAAA,GACnBO,KAAK;IACTO,GAAG,EAAEX,QAAQ,CAAC,CAAC,GAAGU,SAAS,GAAGC,GAAG,IAAI;MACjCH,SAAS,GAAGG,GAA6B;MACzC;MACAb,uBAAuB,CAACc,GAAG,CAACJ,SAAS,EAAEC,UAAU,EAAEI,IAAI,CAAC;MAExD,IAAI,OAAOR,YAAY,KAAK,UAAU,EAAE;QACpC,OAAOA,YAAY,CAACM,GAAG,CAAC;MAC5B;MAEA,IAAIN,YAAY,EAAE;QACdA,YAAY,CAACS,OAAO,GAAGH,GAAG;MAC9B;IACJ,CAAE;IACFR,KAAK,EAAEY,KAAK,IAAI;MACZ,MAAMC,WAAW,GAAG,OAAOb,KAAK,KAAK,UAAU,GACzCA,KAAK,CAACY,KAA0B,CAAC,GACjCZ,KAAK;MACX,MAAMc,mBAAmB,GAAGnB,uBAAuB,CAACS,cAAc,CAAC,CAAC;MAEpET,uBAAuB,CAACoB,cAAc,CAACZ,WAAW,CAAC;;MAEnD;MACAR,uBAAuB,CAACqB,MAAM,CAACX,SAAS,EAAEC,UAAU,EAAEI,IAAI,CAAC;MAC3DJ,UAAU,GAAGV,YAAY,CAACiB,WAA8B,CAAC;MACzD;MACAlB,uBAAuB,CAACc,GAAG,CAACJ,SAAS,EAAEC,UAAU,EAAEI,IAAI,CAAC;MAExDf,uBAAuB,CAACoB,cAAc,CAACD,mBAAmB,CAAC;MAE3D,OAAOR,UAAU;IACrB;EAAE,CACL,CAAC;AAEV,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/native/Pressable.native.js

@@ -1,43 +1,59 @@
 "use strict";
 
-import React, { forwardRef, useRef } from 'react';
+import React, { forwardRef, useLayoutEffect, useRef } from 'react';
 import { Pressable as NativePressableReactNative } from 'react-native';
 import { UnistylesShadowRegistry } from '../../specs';
 import { passForwardedRef } from '../../core';
 import { jsx as _jsx } from "react/jsx-runtime";
+const getStyles = (styleProps = {}) => {
+  const unistyleKey = Object.keys(styleProps).find(key => key.startsWith('unistyles-'));
+  if (!unistyleKey) {
+    return styleProps;
+  }
+  return {
+    // styles without C++ state
+    ...styleProps[unistyleKey].uni__getStyles(),
+    [unistyleKey]: styleProps[unistyleKey].uni__getStyles()
+  };
+};
 export const Pressable = /*#__PURE__*/forwardRef(({
   variants,
   style,
   ...props
 }, forwardedRef) => {
   const storedRef = useRef();
+  useLayoutEffect(() => {
+    return () => {
+      if (storedRef.current) {
+        // @ts-expect-error - this is hidden from TS
+        UnistylesShadowRegistry.remove(storedRef.current);
+      }
+    };
+  }, []);
   return /*#__PURE__*/_jsx(NativePressableReactNative, {
     ...props,
     ref: ref => {
       const unistyles = typeof style === 'function' ? style({
         pressed: false
       }) : style;
-      const styles = Array.isArray(unistyles) ? unistyles : [unistyles];
 
       // @ts-expect-error - this is hidden from TS
-      UnistylesShadowRegistry.add(ref, styles);
-      storedRef.current = ref;
+      UnistylesShadowRegistry.add(ref, unistyles);
+      if (ref) {
+        storedRef.current = ref;
+      }
       return passForwardedRef(props, ref, forwardedRef);
     },
     style: state => {
-      const unistyles = typeof style === 'function' ? style(state) : style;
-      const styles = Array.isArray(unistyles) ? unistyles : [unistyles];
+      const unistyles = typeof style === 'function' ? style(state) : getStyles(style);
       if (!storedRef.current) {
         return unistyles;
       }
-      if (state.pressed) {
-        UnistylesShadowRegistry.selectVariants(variants);
-      }
 
       // @ts-expect-error - this is hidden from TS
       UnistylesShadowRegistry.remove(storedRef.current);
       // @ts-expect-error - this is hidden from TS
-      UnistylesShadowRegistry.add(storedRef.current, styles);
+      UnistylesShadowRegistry.add(storedRef.current, unistyles);
       return unistyles;
     }
   });

package/lib/module/components/native/Pressable.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","forwardRef","useRef","Pressable","NativePressableReactNative","UnistylesShadowRegistry","passForwardedRef","jsx","_jsx","variants","style","props","forwardedRef","storedRef","ref","unistyles","pressed","styles","Array","isArray","add","current","state","selectVariants","remove"],"sourceRoot":"../../../../src","sources":["components/native/Pressable.native.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,MAAM,QAAQ,OAAO;AACjD,SAASC,SAAS,IAAIC,0BAA0B,QAAQ,cAAc;AAEtE,SAASC,uBAAuB,QAAQ,aAAa;AACrD,SAASC,gBAAgB,QAAQ,YAAY;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAM7C,OAAO,MAAML,SAAS,gBAAGF,UAAU,CAAuB,CAAC;EAAEQ,QAAQ;EAAEC,KAAK;EAAE,GAAGC;AAAM,CAAC,EAAEC,YAAY,KAAK;EACvG,MAAMC,SAAS,GAAGX,MAAM,CAAc,CAAC;EAEvC,oBACIM,IAAA,CAACJ,0BAA0B;IAAA,GACnBO,KAAK;IACTG,GAAG,EAAEA,GAAG,IAAI;MACR,MAAMC,SAAS,GAAG,OAAOL,KAAK,KAAK,UAAU,GACvCA,KAAK,CAAC;QAAEM,OAAO,EAAE;MAAM,CAAC,CAAC,GACzBN,KAAK;MACX,MAAMO,MAAM,GAAGC,KAAK,CAACC,OAAO,CAACJ,SAAS,CAAC,GACjCA,SAAS,GACT,CAACA,SAAS,CAAC;;MAEjB;MACAV,uBAAuB,CAACe,GAAG,CAACN,GAAG,EAAEG,MAAM,CAAC;MAExCJ,SAAS,CAACQ,OAAO,GAAGP,GAAG;MAEvB,OAAOR,gBAAgB,CAACK,KAAK,EAAEG,GAAG,EAAEF,YAAY,CAAC;IACrD,CAAE;IACFF,KAAK,EAAEY,KAAK,IAAI;MACZ,MAAMP,SAAS,GAAG,OAAOL,KAAK,KAAK,UAAU,GACvCA,KAAK,CAACY,KAAK,CAAC,GACZZ,KAAK;MACX,MAAMO,MAAM,GAAGC,KAAK,CAACC,OAAO,CAACJ,SAAS,CAAC,GACjCA,SAAS,GACT,CAACA,SAAS,CAAC;MAEjB,IAAI,CAACF,SAAS,CAACQ,OAAO,EAAE;QACpB,OAAON,SAAS;MACpB;MAEA,IAAIO,KAAK,CAACN,OAAO,EAAE;QACfX,uBAAuB,CAACkB,cAAc,CAACd,QAAQ,CAAC;MACpD;;MAEA;MACAJ,uBAAuB,CAACmB,MAAM,CAACX,SAAS,CAACQ,OAAO,CAAC;MACjD;MACAhB,uBAAuB,CAACe,GAAG,CAACP,SAAS,CAACQ,OAAO,EAAEJ,MAAM,CAAC;MAEtD,OAAOF,SAAS;IACpB;EAAE,CACL,CAAC;AAEV,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","forwardRef","useLayoutEffect","useRef","Pressable","NativePressableReactNative","UnistylesShadowRegistry","passForwardedRef","jsx","_jsx","getStyles","styleProps","unistyleKey","Object","keys","find","key","startsWith","uni__getStyles","variants","style","props","forwardedRef","storedRef","current","remove","ref","unistyles","pressed","add","state"],"sourceRoot":"../../../../src","sources":["components/native/Pressable.native.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,eAAe,EAAEC,MAAM,QAAQ,OAAO;AAClE,SAASC,SAAS,IAAIC,0BAA0B,QAAQ,cAAc;AAEtE,SAASC,uBAAuB,QAAQ,aAAa;AACrD,SAASC,gBAAgB,QAAQ,YAAY;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAM7C,MAAMC,SAAS,GAAGA,CAACC,UAA+B,GAAG,CAAC,CAAC,KAAK;EACxD,MAAMC,WAAW,GAAGC,MAAM,CACrBC,IAAI,CAACH,UAAU,CAAC,CAChBI,IAAI,CAACC,GAAG,IAAIA,GAAG,CAACC,UAAU,CAAC,YAAY,CAAC,CAAC;EAE9C,IAAI,CAACL,WAAW,EAAE;IACd,OAAOD,UAAU;EACrB;EAEA,OAAO;IACH;IACA,GAAGA,UAAU,CAACC,WAAW,CAAC,CAACM,cAAc,CAAC,CAAC;IAC3C,CAACN,WAAW,GAAGD,UAAU,CAACC,WAAW,CAAC,CAACM,cAAc,CAAC;EAC1D,CAAC;AACL,CAAC;AAED,OAAO,MAAMd,SAAS,gBAAGH,UAAU,CAAuB,CAAC;EAAEkB,QAAQ;EAAEC,KAAK;EAAE,GAAGC;AAAM,CAAC,EAAEC,YAAY,KAAK;EACvG,MAAMC,SAAS,GAAGpB,MAAM,CAAc,CAAC;EAEvCD,eAAe,CAAC,MAAM;IAClB,OAAO,MAAM;MACT,IAAIqB,SAAS,CAACC,OAAO,EAAE;QACnB;QACAlB,uBAAuB,CAACmB,MAAM,CAACF,SAAS,CAACC,OAAO,CAAC;MACrD;IACJ,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,oBACIf,IAAA,CAACJ,0BAA0B;IAAA,GACnBgB,KAAK;IACTK,GAAG,EAAEA,GAAG,IAAI;MACR,MAAMC,SAAS,GAAG,OAAOP,KAAK,KAAK,UAAU,GACvCA,KAAK,CAAC;QAAEQ,OAAO,EAAE;MAAM,CAAC,CAAC,GACzBR,KAAK;;MAEX;MACAd,uBAAuB,CAACuB,GAAG,CAACH,GAAG,EAAEC,SAAS,CAAC;MAE3C,IAAID,GAAG,EAAE;QACLH,SAAS,CAACC,OAAO,GAAGE,GAAG;MAC3B;MAEA,OAAOnB,gBAAgB,CAACc,KAAK,EAAEK,GAAG,EAAEJ,YAAY,CAAC;IACrD,CAAE;IACFF,KAAK,EAAEU,KAAK,IAAI;MACZ,MAAMH,SAAS,GAAG,OAAOP,KAAK,KAAK,UAAU,GACvCA,KAAK,CAACU,KAAK,CAAC,GACZpB,SAAS,CAACU,KAAuC,CAAC;MAExD,IAAI,CAACG,SAAS,CAACC,OAAO,EAAE;QACpB,OAAOG,SAAS;MACpB;;MAEA;MACArB,uBAAuB,CAACmB,MAAM,CAACF,SAAS,CAACC,OAAO,CAAC;MACjD;MACAlB,uBAAuB,CAACuB,GAAG,CAACN,SAAS,CAACC,OAAO,EAAEG,SAAS,CAAC;MAEzD,OAAOA,SAAS;IACpB;EAAE,CACL,CAAC;AAEV,CAAC,CAAC","ignoreList":[]}

package/lib/module/core/createUnistylesElement.js

@@ -1,10 +1,38 @@
 "use strict";
 
 import React from 'react';
-import { passForwardedRef } from './passForwardRef';
+import { getClassName } from './getClassname';
+import { isServer } from '../web/utils';
+import { UnistylesShadowRegistry } from '../web';
+import { maybeWarnAboutMultipleUnistyles } from './warn';
+import { copyComponentProperties } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const createUnistylesElement = Component => /*#__PURE__*/React.forwardRef((props, forwardedRef) => /*#__PURE__*/_jsx(Component, {
-  ...props,
-  ref: ref => passForwardedRef(props, ref, forwardedRef)
-}));
+export const createUnistylesElement = Component => {
+  const UnistylesComponent = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
+    let storedRef = null;
+    const classNames = getClassName(props.style);
+    return /*#__PURE__*/_jsx(Component, {
+      ...props,
+      style: classNames,
+      ref: isServer() ? undefined : ref => {
+        // @ts-ignore we don't know the type of the component
+        maybeWarnAboutMultipleUnistyles(props.style, Component.displayName);
+        if (!ref) {
+          // @ts-expect-error hidden from TS
+          UnistylesShadowRegistry.remove(storedRef, classNames?.hash);
+        }
+        storedRef = ref;
+        // @ts-expect-error hidden from TS
+        UnistylesShadowRegistry.add(ref, classNames?.hash);
+        if (typeof forwardedRef === 'function') {
+          return forwardedRef(ref);
+        }
+        if (forwardedRef) {
+          forwardedRef.current = ref;
+        }
+      }
+    });
+  });
+  return copyComponentProperties(Component, UnistylesComponent);
+};
 //# sourceMappingURL=createUnistylesElement.js.map