react-native-unistyles 3.0.0-beta.1 → 3.0.0-beta.3

package/lib/module/core/createUnistylesImageBackground.js

@@ -0,0 +1,21 @@
+"use strict";
+
+import React from 'react';
+import { UnistylesShadowRegistry } from '../specs';
+import { passForwardedRef } from './passForwardRef';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const createUnistylesImageBackground = Component => /*#__PURE__*/React.forwardRef((props, forwardedRef) => /*#__PURE__*/_jsx(Component, {
+  ...props,
+  ref: ref => passForwardedRef(props, ref, forwardedRef),
+  imageRef: ref => {
+    const style = Array.isArray(props.imageStyle) ? props.imageStyle : [props.imageStyle];
+
+    // @ts-expect-error - This is hidden from TS
+    UnistylesShadowRegistry.add(ref, style);
+    return () => {
+      // @ts-expect-error - This is hidden from TS
+      UnistylesShadowRegistry.remove(ref);
+    };
+  }
+}));
+//# sourceMappingURL=createUnistylesImageBackground.js.map

package/lib/module/core/createUnistylesImageBackground.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","UnistylesShadowRegistry","passForwardedRef","jsx","_jsx","createUnistylesImageBackground","Component","forwardRef","props","forwardedRef","ref","imageRef","style","Array","isArray","imageStyle","add","remove"],"sourceRoot":"../../../src","sources":["core/createUnistylesImageBackground.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,uBAAuB,QAAQ,UAAU;AAClD,SAASC,gBAAgB,QAAQ,kBAAkB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAEnD,OAAO,MAAMC,8BAA8B,GAAIC,SAAiC,iBAAKN,KAAK,CAACO,UAAU,CAAwC,CAACC,KAAK,EAAEC,YAAY,kBAC7JL,IAAA,CAACE,SAAS;EAAA,GACFE,KAAK;EACTE,GAAG,EAAEA,GAAG,IAAIR,gBAAgB,CAACM,KAAK,EAAEE,GAAG,EAAED,YAAY,CAAE;EACvDE,QAAQ,EAAED,GAAG,IAAI;IACb,MAAME,KAAK,GAAGC,KAAK,CAACC,OAAO,CAACN,KAAK,CAACO,UAAU,CAAC,GACvCP,KAAK,CAACO,UAAU,GAChB,CAACP,KAAK,CAACO,UAAU,CAAC;;IAExB;IACAd,uBAAuB,CAACe,GAAG,CAACN,GAAG,EAAEE,KAAK,CAAC;IAEvC,OAAO,MAAM;MACT;MACAX,uBAAuB,CAACgB,MAAM,CAACP,GAAG,CAAC;IACvC,CAAC;EACL;AAAE,CACL,CACJ,CAAC","ignoreList":[]}

package/lib/module/core/index.js

@@ -1,6 +1,8 @@
 "use strict";
 
 export { createUnistylesComponent } from './createUnistylesComponent';
-export { getBoundArgs } from './getBoundArgs';
-export { getId } from './getId';
+export { createUnistylesElement } from './createUnistylesElement';
+export { createUnistylesImageBackground } from './createUnistylesImageBackground';
+export { withUnistyles } from './withUnistyles';
+export { passForwardedRef } from './passForwardRef';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["createUnistylesComponent","getBoundArgs","getId"],"sourceRoot":"../../../src","sources":["core/index.ts"],"mappings":";;AAAA,SAASA,wBAAwB,QAAQ,4BAA4B;AACrE,SAASC,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,KAAK,QAAQ,SAAS","ignoreList":[]}
+{"version":3,"names":["createUnistylesComponent","createUnistylesElement","createUnistylesImageBackground","withUnistyles","passForwardedRef"],"sourceRoot":"../../../src","sources":["core/index.ts"],"mappings":";;AAAA,SAASA,wBAAwB,QAAQ,4BAA4B;AACrE,SAASC,sBAAsB,QAAQ,0BAA0B;AACjE,SAASC,8BAA8B,QAAQ,kCAAkC;AACjF,SAASC,aAAa,QAAQ,iBAAiB;AAC/C,SAASC,gBAAgB,QAAQ,kBAAkB","ignoreList":[]}

package/lib/module/core/passForwardRef.js

@@ -0,0 +1,22 @@
+"use strict";
+
+import { UnistylesShadowRegistry } from '../specs';
+export const passForwardedRef = (props, ref, forwardedRef) => {
+  const passForwardedRef = () => {
+    if (typeof forwardedRef === 'function') {
+      return forwardedRef(ref);
+    }
+    if (forwardedRef) {
+      forwardedRef.current = ref;
+    }
+    return () => {};
+  };
+  const forwardedRefReturnFn = passForwardedRef();
+  UnistylesShadowRegistry.add(ref, props.style);
+  return () => {
+    // @ts-expect-error - This is hidden from TS
+    UnistylesShadowRegistry.remove(ref);
+    forwardedRefReturnFn?.();
+  };
+};
+//# sourceMappingURL=passForwardRef.js.map

package/lib/module/core/passForwardRef.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["UnistylesShadowRegistry","passForwardedRef","props","ref","forwardedRef","current","forwardedRefReturnFn","add","style","remove"],"sourceRoot":"../../../src","sources":["core/passForwardRef.ts"],"mappings":";;AACA,SAASA,uBAAuB,QAAQ,UAAU;AAElD,OAAO,MAAMC,gBAAgB,GAAGA,CAC5BC,KAAU,EACVC,GAAM,EACNC,YAAmC,KAClC;EACD,MAAMH,gBAAgB,GAAGA,CAAA,KAAM;IAC3B,IAAI,OAAOG,YAAY,KAAK,UAAU,EAAE;MACpC,OAAOA,YAAY,CAACD,GAAG,CAAC;IAC5B;IAEA,IAAIC,YAAY,EAAE;MACdA,YAAY,CAACC,OAAO,GAAGF,GAAG;IAC9B;IAEA,OAAO,MAAM,CAAC,CAAC;EACnB,CAAC;EACD,MAAMG,oBAAoB,GAAGL,gBAAgB,CAAC,CAAC;EAE/CD,uBAAuB,CAACO,GAAG,CAACJ,GAAG,EAAED,KAAK,CAACM,KAAK,CAAC;EAE7C,OAAO,MAAM;IACT;IACAR,uBAAuB,CAACS,MAAM,CAACN,GAAG,CAAC;IACnCG,oBAAoB,GAAG,CAAC;EAC5B,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/module/core/withUnistyles/index.js

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

package/lib/module/core/withUnistyles/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["withUnistyles"],"sourceRoot":"../../../../src","sources":["core/withUnistyles/index.ts"],"mappings":";;AAAA,SAASA,aAAa,QAAQ,iBAAiB","ignoreList":[]}

package/lib/module/core/withUnistyles/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export const SUPPORTED_STYLE_PROPS = ['style', 'contentContainerStyle'];
+//# sourceMappingURL=types.js.map

package/lib/module/core/withUnistyles/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SUPPORTED_STYLE_PROPS"],"sourceRoot":"../../../../src","sources":["core/withUnistyles/types.ts"],"mappings":";;AAGA,OAAO,MAAMA,qBAAqB,GAAG,CAAC,OAAO,EAAE,uBAAuB,CAAU","ignoreList":[]}

package/lib/module/core/withUnistyles/useDependencies.js

@@ -0,0 +1,79 @@
+"use strict";
+
+import { useEffect, useReducer, useRef, useState } from 'react';
+import { UnistylesRuntime, UnistylesShadowRegistry } from '../../specs';
+// It's imported that way because of circular dependency
+import { UnistyleDependency } from '../../specs/NativePlatform';
+const getMiniRuntime = () => {
+  // @ts-expect-error This is hidden from TS
+  return UnistylesRuntime.miniRuntime;
+};
+const RTDependencyMap = {
+  breakpoint: UnistyleDependency.Breakpoints,
+  colorScheme: UnistyleDependency.ColorScheme,
+  contentSizeCategory: UnistyleDependency.ContentSizeCategory,
+  hasAdaptiveThemes: UnistyleDependency.AdaptiveThemes,
+  insets: UnistyleDependency.Insets,
+  fontScale: UnistyleDependency.FontScale,
+  isLandscape: UnistyleDependency.Orientation,
+  isPortrait: UnistyleDependency.Orientation,
+  navigationBar: UnistyleDependency.NavigationBar,
+  screen: UnistyleDependency.Dimensions,
+  statusBar: UnistyleDependency.StatusBar,
+  pixelRatio: UnistyleDependency.PixelRatio,
+  themeName: UnistyleDependency.ThemeName
+};
+export const useDependencies = listener => {
+  const scopedTheme = UnistylesShadowRegistry.getScopedTheme();
+  const [dependencies] = useState(() => new Set());
+  const [theme, setTheme] = useState(UnistylesRuntime.getTheme(scopedTheme));
+  const [_, runtimeChanged] = useReducer(() => ({}), {});
+  const disposeRef = useRef();
+  const reinitListener = () => {
+    disposeRef.current?.();
+    disposeRef.current = listener({
+      dependencies: Array.from(dependencies),
+      updateTheme: () => {
+        if (scopedTheme) {
+          return;
+        }
+        setTheme(UnistylesRuntime.getTheme(scopedTheme));
+      },
+      updateRuntime: () => runtimeChanged()
+    });
+  };
+  useEffect(() => {
+    reinitListener();
+    return () => disposeRef.current?.();
+  }, [dependencies.size]);
+  return {
+    mappingsCallback: callback => {
+      const proxifiedTheme = new Proxy(theme, {
+        get: (target, prop) => {
+          dependencies.add(UnistyleDependency.Theme);
+          return target[prop];
+        }
+      });
+      const proxifiedRuntime = new Proxy(getMiniRuntime(), {
+        get: (target, prop) => {
+          if (prop in RTDependencyMap) {
+            dependencies.add(RTDependencyMap[prop]);
+          }
+          return target[prop];
+        }
+      });
+      return callback(proxifiedTheme, proxifiedRuntime);
+    },
+    addDependencies: newDependencies => {
+      const dependenciesSize = dependencies.size;
+      newDependencies.forEach(dependency => {
+        dependencies.add(dependency);
+      });
+      if (dependenciesSize === dependencies.size) {
+        return;
+      }
+      reinitListener();
+    }
+  };
+};
+//# sourceMappingURL=useDependencies.js.map

package/lib/module/core/withUnistyles/useDependencies.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useReducer","useRef","useState","UnistylesRuntime","UnistylesShadowRegistry","UnistyleDependency","getMiniRuntime","miniRuntime","RTDependencyMap","breakpoint","Breakpoints","colorScheme","ColorScheme","contentSizeCategory","ContentSizeCategory","hasAdaptiveThemes","AdaptiveThemes","insets","Insets","fontScale","FontScale","isLandscape","Orientation","isPortrait","navigationBar","NavigationBar","screen","Dimensions","statusBar","StatusBar","pixelRatio","PixelRatio","themeName","ThemeName","useDependencies","listener","scopedTheme","getScopedTheme","dependencies","Set","theme","setTheme","getTheme","_","runtimeChanged","disposeRef","reinitListener","current","Array","from","updateTheme","updateRuntime","size","mappingsCallback","callback","proxifiedTheme","Proxy","get","target","prop","add","Theme","proxifiedRuntime","addDependencies","newDependencies","dependenciesSize","forEach","dependency"],"sourceRoot":"../../../../src","sources":["core/withUnistyles/useDependencies.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/core/withUnistyles/withUnistyles.js

@@ -0,0 +1,81 @@
+"use strict";
+
+import React, { useEffect, useState, forwardRef, useRef, useMemo } from 'react';
+import { UnistylesListener } from '../../web/listener';
+import { UnistylesShadowRegistry } from '../../web';
+import { equal } from '../../web/utils';
+import { deepMergeObjects } from '../../utils';
+import { useDependencies } from './useDependencies';
+import { UnistyleDependency } from '../../specs/NativePlatform';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useShadowRegistry = style => {
+  const [ref] = useState(document.createElement('div'));
+  const oldClassNames = useRef([]);
+  const classNames = useMemo(() => {
+    if (!style) {
+      return [];
+    }
+    const newClassNames = UnistylesShadowRegistry.add(ref, [style]) ?? [];
+    if (equal(oldClassNames.current, newClassNames)) {
+      return oldClassNames.current;
+    }
+    oldClassNames.current = newClassNames;
+    return newClassNames;
+  }, [style]);
+  useEffect(() => () => {
+    // Remove styles on unmount
+    if (style) {
+      UnistylesShadowRegistry.add(null, [style]);
+    }
+  });
+  return classNames;
+};
+
+// @ts-expect-error
+
+// @ts-expect-error
+
+export const withUnistyles = (Component, mappings) => {
+  return /*#__PURE__*/forwardRef((props, ref) => {
+    const narrowedProps = props;
+    const styleClassNames = useShadowRegistry(narrowedProps.style);
+    const contentContainerStyleClassNames = useShadowRegistry(narrowedProps.contentContainerStyle);
+    const {
+      mappingsCallback
+    } = useDependencies(({
+      dependencies,
+      updateTheme,
+      updateRuntime
+    }) => {
+      const disposeTheme = UnistylesListener.addListeners(dependencies.filter(dependency => dependency === UnistyleDependency.Theme), updateTheme);
+      const disposeRuntime = UnistylesListener.addListeners(dependencies.filter(dependency => dependency !== UnistyleDependency.Theme), updateRuntime);
+      return () => {
+        disposeTheme();
+        disposeRuntime();
+      };
+    });
+    const mappingsProps = mappings ? mappingsCallback(mappings) : {};
+    const unistyleProps = narrowedProps.uniProps ? mappingsCallback(narrowedProps.uniProps) : {};
+    const combinedProps = {
+      ...deepMergeObjects(mappingsProps, unistyleProps, props),
+      ...(narrowedProps.style ? {
+        style: {
+          $$css: true,
+          'unistyles': styleClassNames.join(' ')
+        }
+      } : {}),
+      ...(narrowedProps.contentContainerStyle ? {
+        style: {
+          $$css: true,
+          'unistyles': contentContainerStyleClassNames.join(' ')
+        }
+      } : {})
+    };
+    const NativeComponent = Component;
+    return /*#__PURE__*/_jsx(NativeComponent, {
+      ...combinedProps,
+      ref: ref
+    });
+  });
+};
+//# sourceMappingURL=withUnistyles.js.map

package/lib/module/core/withUnistyles/withUnistyles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useState","forwardRef","useRef","useMemo","UnistylesListener","UnistylesShadowRegistry","equal","deepMergeObjects","useDependencies","UnistyleDependency","jsx","_jsx","useShadowRegistry","style","ref","document","createElement","oldClassNames","classNames","newClassNames","add","current","withUnistyles","Component","mappings","props","narrowedProps","styleClassNames","contentContainerStyleClassNames","contentContainerStyle","mappingsCallback","dependencies","updateTheme","updateRuntime","disposeTheme","addListeners","filter","dependency","Theme","disposeRuntime","mappingsProps","unistyleProps","uniProps","combinedProps","$$css","join","NativeComponent"],"sourceRoot":"../../../../src","sources":["core/withUnistyles/withUnistyles.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/core/withUnistyles/withUnistyles.native.js

@@ -0,0 +1,90 @@
+"use strict";
+
+import React, { forwardRef, useEffect, useRef } from 'react';
+import { StyleSheet, UnistyleDependency } from '../../specs';
+import { deepMergeObjects } from '../../utils';
+import { SUPPORTED_STYLE_PROPS } from './types';
+import { useDependencies } from './useDependencies';
+
+// @ts-expect-error
+
+// @ts-expect-error
+import { jsx as _jsx } from "react/jsx-runtime";
+export const withUnistyles = (Component, mappings) => {
+  return /*#__PURE__*/forwardRef((props, ref) => {
+    const narrowedProps = props;
+    const stylesRef = useRef({});
+    const isForcedRef = useRef(false);
+    const NativeComponent = Component;
+    if (!isForcedRef.current) {
+      SUPPORTED_STYLE_PROPS.forEach(propName => {
+        if (narrowedProps?.[propName]) {
+          if (Array.isArray(narrowedProps[propName])) {
+            console.error(`🦄 Unistyles: withUnistyles requires ${propName} to be an object. Please check props for component: ${NativeComponent.displayName}`);
+          }
+
+          // @ts-expect-error - this is hidden from TS
+          if (props[propName].__unistyles_name && !props[propName].__proto__?.getStyle) {
+            console.error(`🦄 Unistyles: withUnistyles received style that is not bound. You likely used the spread operator on a Unistyle style. Please check props for component: ${NativeComponent.displayName}`);
+          }
+          stylesRef.current = {
+            ...stylesRef.current,
+            // @ts-expect-error - this is hidden from TS
+            [propName]: props[propName].__proto__?.getStyle?.() || props[propName]
+          };
+        }
+      });
+    }
+    const {
+      mappingsCallback,
+      addDependencies
+    } = useDependencies(({
+      dependencies,
+      updateTheme,
+      updateRuntime
+    }) => {
+      const listensToTheme = dependencies.includes(UnistyleDependency.Theme);
+      // @ts-expect-error - this is hidden from TS
+      const dispose = StyleSheet.addChangeListener(changedDependencies => {
+        if (listensToTheme && changedDependencies.includes(UnistyleDependency.Theme)) {
+          updateTheme();
+        }
+        if (changedDependencies.some(dependency => dependencies.includes(dependency))) {
+          SUPPORTED_STYLE_PROPS.forEach(propName => {
+            if (narrowedProps?.[propName]) {
+              stylesRef.current = {
+                ...stylesRef.current,
+                // @ts-expect-error - this is hidden from TS
+                [propName]: props[propName].__proto__?.getStyle?.() || props[propName]
+              };
+              isForcedRef.current = true;
+            }
+          });
+          updateRuntime();
+        }
+      });
+      return () => dispose();
+    });
+    useEffect(() => {
+      const styleDependencies = narrowedProps.style?.__proto__.uni__dependencies ?? [];
+      const contentContainerStyleDependencies = narrowedProps.contentContainerStyle?.__proto__.uni__dependencies ?? [];
+      addDependencies([...styleDependencies, ...contentContainerStyleDependencies]);
+    }, [narrowedProps.style, narrowedProps.contentContainerStyle]);
+    const mappingProps = mappings ? mappingsCallback(mappings) : {};
+    const unistyleProps = narrowedProps.uniProps ? mappingsCallback(narrowedProps.uniProps) : {};
+    const finalProps = deepMergeObjects(mappingProps, unistyleProps, props);
+
+    // override with Unistyles styles
+    SUPPORTED_STYLE_PROPS.forEach(propName => {
+      if (finalProps[propName]) {
+        finalProps[propName] = stylesRef.current[propName];
+      }
+    });
+    isForcedRef.current = false;
+    return /*#__PURE__*/_jsx(NativeComponent, {
+      ...finalProps,
+      ref: ref
+    });
+  });
+};
+//# sourceMappingURL=withUnistyles.native.js.map

package/lib/module/core/withUnistyles/withUnistyles.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","forwardRef","useEffect","useRef","StyleSheet","UnistyleDependency","deepMergeObjects","SUPPORTED_STYLE_PROPS","useDependencies","jsx","_jsx","withUnistyles","Component","mappings","props","ref","narrowedProps","stylesRef","isForcedRef","NativeComponent","current","forEach","propName","Array","isArray","console","error","displayName","__unistyles_name","__proto__","getStyle","mappingsCallback","addDependencies","dependencies","updateTheme","updateRuntime","listensToTheme","includes","Theme","dispose","addChangeListener","changedDependencies","some","dependency","styleDependencies","style","uni__dependencies","contentContainerStyleDependencies","contentContainerStyle","mappingProps","unistyleProps","uniProps","finalProps"],"sourceRoot":"../../../../src","sources":["core/withUnistyles/withUnistyles.native.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/hooks/useMedia.js

@@ -1,10 +1,10 @@
 "use strict";
 
-import { useEffect, useLayoutEffect, useState } from 'react';
-import { StyleSheet, UnistyleDependency, UnistylesRuntime } from '../specs';
-import { isValidMq, parseMq, isUnistylesMq } from '../mq';
+import { useEffect, useRef, useState } from 'react';
+import { isUnistylesMq, isValidMq, parseMq } from '../mq';
 export const useMedia = config => {
-  const computeIsVisible = () => {
+  const disposeRef = useRef(() => {});
+  const [isVisible, setIsVisible] = useState(() => {
     const maybeMq = config.mq;
     if (!isUnistylesMq(maybeMq)) {
       console.error(`🦄 Unistyles: Received invalid mq: ${maybeMq}`);
@@ -16,37 +16,21 @@ export const useMedia = config => {
       return false;
     }
     const {
-      width,
-      height
-    } = UnistylesRuntime.screen;
-    if (parsedMq.minWidth !== undefined && width < parsedMq.minWidth) {
-      return false;
-    }
-    if (parsedMq.maxWidth !== undefined && width > parsedMq.maxWidth) {
-      return false;
-    }
-    if (parsedMq.minHeight !== undefined && height < parsedMq.minHeight) {
-      return false;
-    }
-    if (parsedMq.maxHeight !== undefined && height > parsedMq.maxHeight) {
-      return false;
-    }
-    return true;
-  };
-  const [isVisible, setIsVisible] = useState(computeIsVisible());
-  useEffect(() => {
-    setIsVisible(computeIsVisible());
-  }, [config.mq]);
-  useLayoutEffect(() => {
-    const removeChangeListener = StyleSheet.addChangeListener(dependencies => {
-      if (dependencies.includes(UnistyleDependency.Breakpoints)) {
-        setIsVisible(computeIsVisible());
-      }
-    });
-    return () => {
-      removeChangeListener();
-    };
-  }, [config.mq]);
+      minWidth,
+      maxWidth,
+      minHeight,
+      maxHeight
+    } = parsedMq;
+    const mediaQuery = [minWidth !== undefined ? `(min-width: ${minWidth}px)` : undefined, maxWidth !== undefined ? `(max-width: ${maxWidth}px)` : undefined, minHeight !== undefined ? `(min-height: ${minHeight}px)` : undefined, maxHeight !== undefined ? `(max-height: ${maxHeight}px)` : undefined].filter(Boolean).join(' and ');
+    const media = window.matchMedia(mediaQuery);
+    const handler = event => setIsVisible(event.matches);
+    media.addEventListener('change', handler);
+    disposeRef.current = () => media.removeEventListener('change', handler);
+    return media.matches;
+  });
+
+  // Unmount
+  useEffect(() => () => disposeRef.current(), []);
   return {
     isVisible
   };

package/lib/module/hooks/useMedia.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useLayoutEffect","useState","StyleSheet","UnistyleDependency","UnistylesRuntime","isValidMq","parseMq","isUnistylesMq","useMedia","config","computeIsVisible","maybeMq","mq","console","error","parsedMq","width","height","screen","minWidth","undefined","maxWidth","minHeight","maxHeight","isVisible","setIsVisible","removeChangeListener","addChangeListener","dependencies","includes","Breakpoints"],"sourceRoot":"../../../src","sources":["hooks/useMedia.ts"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,eAAe,EAAEC,QAAQ,QAAQ,OAAO;AAC5D,SAASC,UAAU,EAAEC,kBAAkB,EAAEC,gBAAgB,QAAkC,UAAU;AACrG,SAASC,SAAS,EAAEC,OAAO,EAAEC,aAAa,QAAQ,OAAO;AAEzD,OAAO,MAAMC,QAAQ,GAAIC,MAAsB,IAAK;EAChD,MAAMC,gBAAgB,GAAGA,CAAA,KAAe;IACpC,MAAMC,OAAO,GAAGF,MAAM,CAACG,EAAuB;IAE9C,IAAI,CAACL,aAAa,CAACI,OAAO,CAAC,EAAE;MACzBE,OAAO,CAACC,KAAK,CAAC,sCAAsCH,OAAO,EAAE,CAAC;MAE9D,OAAO,KAAK;IAChB;IAEA,MAAMI,QAAQ,GAAGT,OAAO,CAACK,OAAO,CAAC;IAEjC,IAAI,CAACN,SAAS,CAACU,QAAQ,CAAC,EAAE;MACtBF,OAAO,CAACC,KAAK,CAAC,oEAAoEH,OAAO,EAAE,CAAC;MAE5F,OAAO,KAAK;IAChB;IAEA,MAAM;MAAEK,KAAK;MAAEC;IAAO,CAAC,GAAGb,gBAAgB,CAACc,MAAM;IAEjD,IAAIH,QAAQ,CAACI,QAAQ,KAAKC,SAAS,IAAIJ,KAAK,GAAGD,QAAQ,CAACI,QAAQ,EAAE;MAC9D,OAAO,KAAK;IAChB;IAEA,IAAIJ,QAAQ,CAACM,QAAQ,KAAKD,SAAS,IAAIJ,KAAK,GAAGD,QAAQ,CAACM,QAAQ,EAAE;MAC9D,OAAO,KAAK;IAChB;IAEA,IAAIN,QAAQ,CAACO,SAAS,KAAKF,SAAS,IAAIH,MAAM,GAAGF,QAAQ,CAACO,SAAS,EAAE;MACjE,OAAO,KAAK;IAChB;IAEA,IAAIP,QAAQ,CAACQ,SAAS,KAAKH,SAAS,IAAIH,MAAM,GAAGF,QAAQ,CAACQ,SAAS,EAAE;MACjE,OAAO,KAAK;IAChB;IAEA,OAAO,IAAI;EACf,CAAC;EACD,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGxB,QAAQ,CAAiBS,gBAAgB,CAAC,CAAC,CAAC;EAE9EX,SAAS,CAAC,MAAM;IACZ0B,YAAY,CAACf,gBAAgB,CAAC,CAAC,CAAC;EACpC,CAAC,EAAE,CAACD,MAAM,CAACG,EAAE,CAAC,CAAC;EAEfZ,eAAe,CAAC,MAAM;IAClB,MAAM0B,oBAAoB,GAAIxB,UAAU,CAAyByB,iBAAiB,CAACC,YAAY,IAAI;MAC/F,IAAIA,YAAY,CAACC,QAAQ,CAAC1B,kBAAkB,CAAC2B,WAAW,CAAC,EAAE;QACvDL,YAAY,CAACf,gBAAgB,CAAC,CAAC,CAAC;MACpC;IACJ,CAAC,CAAC;IAEF,OAAO,MAAM;MACTgB,oBAAoB,CAAC,CAAC;IAC1B,CAAC;EACL,CAAC,EAAE,CAACjB,MAAM,CAACG,EAAE,CAAC,CAAC;EAEf,OAAO;IACHY;EACJ,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"names":["useEffect","useRef","useState","isUnistylesMq","isValidMq","parseMq","useMedia","config","disposeRef","isVisible","setIsVisible","maybeMq","mq","console","error","parsedMq","minWidth","maxWidth","minHeight","maxHeight","mediaQuery","undefined","filter","Boolean","join","media","window","matchMedia","handler","event","matches","addEventListener","current","removeEventListener"],"sourceRoot":"../../../src","sources":["hooks/useMedia.ts"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AACnD,SAASC,aAAa,EAAEC,SAAS,EAAEC,OAAO,QAAQ,OAAO;AAEzD,OAAO,MAAMC,QAAQ,GAAIC,MAAsB,IAAK;EAChD,MAAMC,UAAU,GAAGP,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;EACnC,MAAM,CAACQ,SAAS,EAAEC,YAAY,CAAC,GAAGR,QAAQ,CAAC,MAAM;IAC7C,MAAMS,OAAO,GAAGJ,MAAM,CAACK,EAAuB;IAE9C,IAAI,CAACT,aAAa,CAACQ,OAAO,CAAC,EAAE;MACzBE,OAAO,CAACC,KAAK,CAAC,sCAAsCH,OAAO,EAAE,CAAC;MAE9D,OAAO,KAAK;IAChB;IAEA,MAAMI,QAAQ,GAAGV,OAAO,CAACM,OAAO,CAAC;IAEjC,IAAI,CAACP,SAAS,CAACW,QAAQ,CAAC,EAAE;MACtBF,OAAO,CAACC,KAAK,CAAC,oEAAoEH,OAAO,EAAE,CAAC;MAE5F,OAAO,KAAK;IAChB;IAEA,MAAM;MAAEK,QAAQ;MAAEC,QAAQ;MAAEC,SAAS;MAAEC;IAAU,CAAC,GAAGJ,QAAQ;IAE7D,MAAMK,UAAU,GAAG,CACfJ,QAAQ,KAAKK,SAAS,GAAG,eAAeL,QAAQ,KAAK,GAAGK,SAAS,EACjEJ,QAAQ,KAAKI,SAAS,GAAG,eAAeJ,QAAQ,KAAK,GAAGI,SAAS,EACjEH,SAAS,KAAKG,SAAS,GAAG,gBAAgBH,SAAS,KAAK,GAAGG,SAAS,EACpEF,SAAS,KAAKE,SAAS,GAAG,gBAAgBF,SAAS,KAAK,GAAGE,SAAS,CACvE,CAACC,MAAM,CAACC,OAAO,CAAC,CAACC,IAAI,CAAC,OAAO,CAAC;IAE/B,MAAMC,KAAK,GAAGC,MAAM,CAACC,UAAU,CAACP,UAAU,CAAC;IAC3C,MAAMQ,OAAO,GAAIC,KAA0B,IAAKnB,YAAY,CAACmB,KAAK,CAACC,OAAO,CAAC;IAE3EL,KAAK,CAACM,gBAAgB,CAAC,QAAQ,EAAEH,OAAO,CAAC;IACzCpB,UAAU,CAACwB,OAAO,GAAG,MAAMP,KAAK,CAACQ,mBAAmB,CAAC,QAAQ,EAAEL,OAAO,CAAC;IAEvE,OAAOH,KAAK,CAACK,OAAO;EACxB,CAAC,CAAC;;EAEF;EACA9B,SAAS,CAAC,MAAM,MAAMQ,UAAU,CAACwB,OAAO,CAAC,CAAC,EAAE,EAAE,CAAC;EAE/C,OAAO;IACHvB;EACJ,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/module/hooks/useMedia.native.js

@@ -0,0 +1,55 @@
+"use strict";
+
+import { useEffect, useLayoutEffect, useState } from 'react';
+import { StyleSheet, UnistyleDependency, UnistylesRuntime } from '../specs';
+import { isValidMq, parseMq, isUnistylesMq } from '../mq';
+export const useMedia = config => {
+  const computeIsVisible = () => {
+    const maybeMq = config.mq;
+    if (!isUnistylesMq(maybeMq)) {
+      console.error(`🦄 Unistyles: Received invalid mq: ${maybeMq}`);
+      return false;
+    }
+    const parsedMq = parseMq(maybeMq);
+    if (!isValidMq(parsedMq)) {
+      console.error(`🦄 Unistyles: Received invalid mq where min is greater than max: ${maybeMq}`);
+      return false;
+    }
+    const {
+      width,
+      height
+    } = UnistylesRuntime.screen;
+    if (parsedMq.minWidth !== undefined && width < parsedMq.minWidth) {
+      return false;
+    }
+    if (parsedMq.maxWidth !== undefined && width > parsedMq.maxWidth) {
+      return false;
+    }
+    if (parsedMq.minHeight !== undefined && height < parsedMq.minHeight) {
+      return false;
+    }
+    if (parsedMq.maxHeight !== undefined && height > parsedMq.maxHeight) {
+      return false;
+    }
+    return true;
+  };
+  const [isVisible, setIsVisible] = useState(computeIsVisible());
+  useEffect(() => {
+    setIsVisible(computeIsVisible());
+  }, [config.mq]);
+  useLayoutEffect(() => {
+    // @ts-expect-error - this is hidden from TS
+    const removeChangeListener = StyleSheet.addChangeListener(dependencies => {
+      if (dependencies.includes(UnistyleDependency.Breakpoints)) {
+        setIsVisible(computeIsVisible());
+      }
+    });
+    return () => {
+      removeChangeListener();
+    };
+  }, [config.mq]);
+  return {
+    isVisible
+  };
+};
+//# sourceMappingURL=useMedia.native.js.map

package/lib/module/hooks/useMedia.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useLayoutEffect","useState","StyleSheet","UnistyleDependency","UnistylesRuntime","isValidMq","parseMq","isUnistylesMq","useMedia","config","computeIsVisible","maybeMq","mq","console","error","parsedMq","width","height","screen","minWidth","undefined","maxWidth","minHeight","maxHeight","isVisible","setIsVisible","removeChangeListener","addChangeListener","dependencies","includes","Breakpoints"],"sourceRoot":"../../../src","sources":["hooks/useMedia.native.ts"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,eAAe,EAAEC,QAAQ,QAAQ,OAAO;AAC5D,SAASC,UAAU,EAAEC,kBAAkB,EAAEC,gBAAgB,QAAQ,UAAU;AAC3E,SAASC,SAAS,EAAEC,OAAO,EAAEC,aAAa,QAAQ,OAAO;AAEzD,OAAO,MAAMC,QAAQ,GAAIC,MAAsB,IAAK;EAChD,MAAMC,gBAAgB,GAAGA,CAAA,KAAe;IACpC,MAAMC,OAAO,GAAGF,MAAM,CAACG,EAAuB;IAE9C,IAAI,CAACL,aAAa,CAACI,OAAO,CAAC,EAAE;MACzBE,OAAO,CAACC,KAAK,CAAC,sCAAsCH,OAAO,EAAE,CAAC;MAE9D,OAAO,KAAK;IAChB;IAEA,MAAMI,QAAQ,GAAGT,OAAO,CAACK,OAAO,CAAC;IAEjC,IAAI,CAACN,SAAS,CAACU,QAAQ,CAAC,EAAE;MACtBF,OAAO,CAACC,KAAK,CAAC,oEAAoEH,OAAO,EAAE,CAAC;MAE5F,OAAO,KAAK;IAChB;IAEA,MAAM;MAAEK,KAAK;MAAEC;IAAO,CAAC,GAAGb,gBAAgB,CAACc,MAAM;IAEjD,IAAIH,QAAQ,CAACI,QAAQ,KAAKC,SAAS,IAAIJ,KAAK,GAAGD,QAAQ,CAACI,QAAQ,EAAE;MAC9D,OAAO,KAAK;IAChB;IAEA,IAAIJ,QAAQ,CAACM,QAAQ,KAAKD,SAAS,IAAIJ,KAAK,GAAGD,QAAQ,CAACM,QAAQ,EAAE;MAC9D,OAAO,KAAK;IAChB;IAEA,IAAIN,QAAQ,CAACO,SAAS,KAAKF,SAAS,IAAIH,MAAM,GAAGF,QAAQ,CAACO,SAAS,EAAE;MACjE,OAAO,KAAK;IAChB;IAEA,IAAIP,QAAQ,CAACQ,SAAS,KAAKH,SAAS,IAAIH,MAAM,GAAGF,QAAQ,CAACQ,SAAS,EAAE;MACjE,OAAO,KAAK;IAChB;IAEA,OAAO,IAAI;EACf,CAAC;EACD,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGxB,QAAQ,CAAiBS,gBAAgB,CAAC,CAAC,CAAC;EAE9EX,SAAS,CAAC,MAAM;IACZ0B,YAAY,CAACf,gBAAgB,CAAC,CAAC,CAAC;EACpC,CAAC,EAAE,CAACD,MAAM,CAACG,EAAE,CAAC,CAAC;EAEfZ,eAAe,CAAC,MAAM;IAClB;IACA,MAAM0B,oBAAoB,GAAGxB,UAAU,CAACyB,iBAAiB,CAAEC,YAAuC,IAAK;MACnG,IAAIA,YAAY,CAACC,QAAQ,CAAC1B,kBAAkB,CAAC2B,WAAW,CAAC,EAAE;QACvDL,YAAY,CAACf,gBAAgB,CAAC,CAAC,CAAC;MACpC;IACJ,CAAC,CAAC;IAEF,OAAO,MAAM;MACTgB,oBAAoB,CAAC,CAAC;IAC1B,CAAC;EACL,CAAC,EAAE,CAACjB,MAAM,CAACG,EAAE,CAAC,CAAC;EAEf,OAAO;IACHY;EACJ,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/module/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
-export * from './specs';
+export { StyleSheet, UnistylesRuntime, StatusBar, NavigationBar } from './specs';
 export { mq } from './mq';
-export { createUnistylesComponent, getBoundArgs } from './core';
-export * from './components';
+export { createUnistylesComponent, withUnistyles } from './core';
+export { Display, Hide, Variants, ScopedTheme } from './components';
 //# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["mq","createUnistylesComponent","getBoundArgs"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA,cAAc,SAAS;AACvB,SAASA,EAAE,QAAQ,MAAM;AAEzB,SAASC,wBAAwB,EAAEC,YAAY,QAAQ,QAAQ;AAE/D,cAAc,cAAc","ignoreList":[]}
+{"version":3,"names":["StyleSheet","UnistylesRuntime","StatusBar","NavigationBar","mq","createUnistylesComponent","withUnistyles","Display","Hide","Variants","ScopedTheme"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,gBAAgB,EAAEC,SAAS,EAAEC,aAAa,QAAQ,SAAS;AAChF,SAASC,EAAE,QAAQ,MAAM;AAEzB,SAASC,wBAAwB,EAAEC,aAAa,QAAQ,QAAQ;AAEhE,SAASC,OAAO,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,WAAW,QAAQ,cAAc","ignoreList":[]}

package/lib/module/specs/ShadowRegistry/index.js

@@ -3,13 +3,13 @@
 import { NitroModules } from 'react-native-nitro-modules';
 const HybridShadowRegistry = NitroModules.createHybridObject('UnistylesShadowRegistry');
 const findShadowNodeForHandle = handle => {
-  const node = handle?.__internalInstanceHandle?.stateNode?.node ?? handle?.getScrollResponder?.()?.getNativeScrollRef?.()?.__internalInstanceHandle?.stateNode?.node ?? handle?.getNativeScrollRef?.()?.__internalInstanceHandle?.stateNode?.node;
+  const node = handle?.__internalInstanceHandle?.stateNode?.node ?? handle?.getScrollResponder?.()?.getNativeScrollRef?.()?.__internalInstanceHandle?.stateNode?.node ?? handle?.getNativeScrollRef?.()?.__internalInstanceHandle?.stateNode?.node ?? handle?._viewRef?.__internalInstanceHandle?.stateNode?.node ?? handle?.viewRef?.current?.__internalInstanceHandle?.stateNode?.node ?? handle?._nativeRef?.__internalInstanceHandle?.stateNode?.node;
   if (!node) {
     throw new Error(`Unistyles: Could not find shadow node for one of your components of type ${handle?.__internalInstanceHandle?.elementType ?? 'unknown'}`);
   }
   return node;
 };
-HybridShadowRegistry.add = (handle, styles, variants, args, id) => {
+HybridShadowRegistry.add = (handle, styles) => {
   // virtualized nodes can be null
   if (!handle || !styles || !Array.isArray(styles)) {
     return;
@@ -17,7 +17,7 @@ HybridShadowRegistry.add = (handle, styles, variants, args, id) => {
 
   // filter Reanimated styles and styles that are undefined
   const filteredStyles = styles.filter(style => !style?.initial?.updater).filter(Boolean);
-  HybridShadowRegistry.link(findShadowNodeForHandle(handle), filteredStyles, variants ?? {}, args ?? [], id);
+  HybridShadowRegistry.link(findShadowNodeForHandle(handle), filteredStyles);
 };
 HybridShadowRegistry.remove = handle => {
   if (!handle) {

package/lib/module/specs/ShadowRegistry/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["NitroModules","HybridShadowRegistry","createHybridObject","findShadowNodeForHandle","handle","node","__internalInstanceHandle","stateNode","getScrollResponder","getNativeScrollRef","Error","elementType","add","styles","variants","args","id","Array","isArray","filteredStyles","filter","style","initial","updater","Boolean","link","remove","unlink","UnistylesShadowRegistry"],"sourceRoot":"../../../../src","sources":["specs/ShadowRegistry/index.ts"],"mappings":";;AAAA,SAASA,YAAY,QAAQ,4BAA4B;AAazD,MAAMC,oBAAoB,GAAGD,YAAY,CAACE,kBAAkB,CAAiB,yBAAyB,CAAC;AAEvG,MAAMC,uBAAuB,GAAIC,MAAkB,IAAK;EACpD,MAAMC,IAAI,GAAGD,MAAM,EAAEE,wBAAwB,EAAEC,SAAS,EAAEF,IAAI,IACvDD,MAAM,EAAEI,kBAAkB,GAAG,CAAC,EAAEC,kBAAkB,GAAG,CAAC,EAAEH,wBAAwB,EAAEC,SAAS,EAAEF,IAAI,IACjGD,MAAM,EAAEK,kBAAkB,GAAG,CAAC,EAAEH,wBAAwB,EAAEC,SAAS,EAAEF,IAAI;EAEhF,IAAI,CAACA,IAAI,EAAE;IACP,MAAM,IAAIK,KAAK,CAAC,4EAA4EN,MAAM,EAAEE,wBAAwB,EAAEK,WAAW,IAAI,SAAS,EAAE,CAAC;EAC7J;EAEA,OAAON,IAAI;AACf,CAAC;AAEDJ,oBAAoB,CAACW,GAAG,GAAG,CAACR,MAAM,EAAES,MAAM,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,EAAE,KAAK;EAC/D;EACA,IAAI,CAACZ,MAAM,IAAI,CAACS,MAAM,IAAI,CAACI,KAAK,CAACC,OAAO,CAACL,MAAM,CAAC,EAAE;IAC9C;EACJ;;EAEA;EACA,MAAMM,cAAc,GAAGN,MAAM,CACxBO,MAAM,CAACC,KAAK,IAAI,CAACA,KAAK,EAAEC,OAAO,EAAEC,OAAO,CAAC,CACzCH,MAAM,CAACI,OAAO,CAAC;EAEpBvB,oBAAoB,CAACwB,IAAI,CAACtB,uBAAuB,CAACC,MAAM,CAAC,EAAEe,cAAc,EAAEL,QAAQ,IAAI,CAAC,CAAC,EAAEC,IAAI,IAAI,EAAE,EAAEC,EAAE,CAAC;AAC9G,CAAC;AAEDf,oBAAoB,CAACyB,MAAM,GAAGtB,MAAM,IAAI;EACpC,IAAI,CAACA,MAAM,EAAE;IACT;EACJ;EAEAH,oBAAoB,CAAC0B,MAAM,CAACxB,uBAAuB,CAACC,MAAM,CAAC,CAAC;AAChE,CAAC;AAQD,OAAO,MAAMwB,uBAAuB,GAAG3B,oBAA4D","ignoreList":[]}
+{"version":3,"names":["NitroModules","HybridShadowRegistry","createHybridObject","findShadowNodeForHandle","handle","node","__internalInstanceHandle","stateNode","getScrollResponder","getNativeScrollRef","_viewRef","viewRef","current","_nativeRef","Error","elementType","add","styles","Array","isArray","filteredStyles","filter","style","initial","updater","Boolean","link","remove","unlink","UnistylesShadowRegistry"],"sourceRoot":"../../../../src","sources":["specs/ShadowRegistry/index.ts"],"mappings":";;AAAA,SAASA,YAAY,QAAQ,4BAA4B;AAmBzD,MAAMC,oBAAoB,GAAGD,YAAY,CAACE,kBAAkB,CAAiB,yBAAyB,CAAC;AAEvG,MAAMC,uBAAuB,GAAIC,MAAkB,IAAK;EACpD,MAAMC,IAAI,GAAGD,MAAM,EAAEE,wBAAwB,EAAEC,SAAS,EAAEF,IAAI,IACvDD,MAAM,EAAEI,kBAAkB,GAAG,CAAC,EAAEC,kBAAkB,GAAG,CAAC,EAAEH,wBAAwB,EAAEC,SAAS,EAAEF,IAAI,IACjGD,MAAM,EAAEK,kBAAkB,GAAG,CAAC,EAAEH,wBAAwB,EAAEC,SAAS,EAAEF,IAAI,IACzED,MAAM,EAAEM,QAAQ,EAAEJ,wBAAwB,EAAEC,SAAS,EAAEF,IAAI,IAC3DD,MAAM,EAAEO,OAAO,EAAEC,OAAO,EAAEN,wBAAwB,EAAEC,SAAS,EAAEF,IAAI,IACnED,MAAM,EAAES,UAAU,EAAEP,wBAAwB,EAAEC,SAAS,EAAEF,IAAI;EAEpE,IAAI,CAACA,IAAI,EAAE;IACP,MAAM,IAAIS,KAAK,CAAC,4EAA4EV,MAAM,EAAEE,wBAAwB,EAAES,WAAW,IAAI,SAAS,EAAE,CAAC;EAC7J;EAEA,OAAOV,IAAI;AACf,CAAC;AAEDJ,oBAAoB,CAACe,GAAG,GAAG,CAACZ,MAAM,EAAEa,MAAM,KAAK;EAC3C;EACA,IAAI,CAACb,MAAM,IAAI,CAACa,MAAM,IAAI,CAACC,KAAK,CAACC,OAAO,CAACF,MAAM,CAAC,EAAE;IAC9C;EACJ;;EAEA;EACA,MAAMG,cAAc,GAAGH,MAAM,CACxBI,MAAM,CAACC,KAAK,IAAI,CAACA,KAAK,EAAEC,OAAO,EAAEC,OAAO,CAAC,CACzCH,MAAM,CAACI,OAAO,CAAC;EAEpBxB,oBAAoB,CAACyB,IAAI,CAACvB,uBAAuB,CAACC,MAAM,CAAC,EAAEgB,cAAc,CAAC;AAC9E,CAAC;AAEDnB,oBAAoB,CAAC0B,MAAM,GAAGvB,MAAM,IAAI;EACpC,IAAI,CAACA,MAAM,EAAE;IACT;EACJ;EAEAH,oBAAoB,CAAC2B,MAAM,CAACzB,uBAAuB,CAACC,MAAM,CAAC,CAAC;AAChE,CAAC;AAQD,OAAO,MAAMyB,uBAAuB,GAAG5B,oBAA4D","ignoreList":[]}

package/lib/module/specs/index.js

@@ -1,11 +1,5 @@
 "use strict";
 
-import './TurboUnistyles';
-import { Runtime } from './UnistylesRuntime';
-import { StyleSheet } from './StyleSheet';
-import { UnistylesShadowRegistry } from './ShadowRegistry';
-import { StatusBarStyle, ColorScheme, Orientation } from './types';
-import { UnistyleDependency } from './NativePlatform';
-export { StatusBarStyle, ColorScheme, Orientation, UnistyleDependency };
-export { UnistylesShadowRegistry, Runtime as UnistylesRuntime, StyleSheet };
+export * from '../web';
+export { UnistyleDependency } from './NativePlatform';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["Runtime","StyleSheet","UnistylesShadowRegistry","StatusBarStyle","ColorScheme","Orientation","UnistyleDependency","UnistylesRuntime"],"sourceRoot":"../../../src","sources":["specs/index.ts"],"mappings":";;AAAA,OAAO,kBAAkB;AAEzB,SAASA,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,UAAU,QAAQ,cAAc;AAEzC,SAASC,uBAAuB,QAAQ,kBAAkB;AAE1D,SAASC,cAAc,EAAEC,WAAW,EAAEC,WAAW,QAAQ,SAAS;AAClE,SAASC,kBAAkB,QAAQ,kBAAkB;AAErD,SACIH,cAAc,EACdC,WAAW,EACXC,WAAW,EACXC,kBAAkB;AAGtB,SACIJ,uBAAuB,EACvBF,OAAO,IAAIO,gBAAgB,EAC3BN,UAAU","ignoreList":[]}
+{"version":3,"names":["UnistyleDependency"],"sourceRoot":"../../../src","sources":["specs/index.ts"],"mappings":";;AAAA,cAAc,QAAQ;AAEtB,SAASA,kBAAkB,QAAQ,kBAAkB","ignoreList":[]}

package/lib/module/specs/index.native.js

@@ -0,0 +1,11 @@
+"use strict";
+
+import './TurboUnistyles';
+import { Runtime } from './UnistylesRuntime';
+import { StyleSheet } from './StyleSheet';
+import { UnistylesShadowRegistry } from './ShadowRegistry';
+import { StatusBarStyle, ColorScheme, Orientation } from './types';
+import { UnistyleDependency } from './NativePlatform';
+export { StatusBarStyle, ColorScheme, Orientation, UnistyleDependency };
+export { UnistylesShadowRegistry, Runtime as UnistylesRuntime, StyleSheet };
+//# sourceMappingURL=index.native.js.map

package/lib/module/specs/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Runtime","StyleSheet","UnistylesShadowRegistry","StatusBarStyle","ColorScheme","Orientation","UnistyleDependency","UnistylesRuntime"],"sourceRoot":"../../../src","sources":["specs/index.native.ts"],"mappings":";;AAAA,OAAO,kBAAkB;AAEzB,SAASA,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,UAAU,QAAQ,cAAc;AAEzC,SAASC,uBAAuB,QAAQ,kBAAkB;AAE1D,SAASC,cAAc,EAAEC,WAAW,EAAEC,WAAW,QAAQ,SAAS;AAClE,SAASC,kBAAkB,QAAQ,kBAAkB;AAErD,SACIH,cAAc,EACdC,WAAW,EACXC,WAAW,EACXC,kBAAkB;AAGtB,SACIJ,uBAAuB,EACvBF,OAAO,IAAIO,gBAAgB,EAC3BN,UAAU","ignoreList":[]}