react-native-unistyles 1.1.1 → 2.0.0-alpha.2

package/src/useStyles.ts

@@ -0,0 +1,49 @@
+import { useMemo } from 'react'
+import { StyleSheet } from 'react-native'
+import { parseStyle, proxifyFunction } from './utils'
+import type { CreateStylesFactory, CustomNamedStyles, ExtractBreakpoints, RemoveKeysWithPrefix } from './types'
+import { useUnistyles } from './useUnistyles'
+import type { UnistylesThemes } from './global'
+
+// todo types
+type T = UnistylesThemes[keyof UnistylesThemes]
+
+export const useStyles = <ST extends CustomNamedStyles<ST>>(stylesheet?: ST | CreateStylesFactory<ST, T>) => {
+    const { theme, breakpoint, screenSize } = useUnistyles()
+
+    if (!stylesheet) {
+        return {
+            theme,
+            breakpoint,
+            styles: {} as ExtractBreakpoints<RemoveKeysWithPrefix<ST>>
+        }
+    }
+
+    const parsedStyles = useMemo(() => typeof stylesheet === 'function'
+        ? stylesheet(theme!)
+        : stylesheet, [theme, stylesheet])
+
+    const dynamicStyleSheet = useMemo(() => Object
+        .entries(parsedStyles)
+        .reduce((acc, [key, value]) => {
+            const style = value as CustomNamedStyles<ST>
+
+            if (typeof value === 'function') {
+                return {
+                    ...acc,
+                    [key]: proxifyFunction(value, breakpoint!, screenSize)
+                }
+            }
+
+            return StyleSheet.create({
+                ...acc,
+                [key]: parseStyle<ST>(style, breakpoint!, screenSize)
+            })
+        }, {} as ST), [breakpoint, screenSize, parsedStyles])
+
+    return {
+        theme,
+        breakpoint,
+        styles: dynamicStyleSheet as ExtractBreakpoints<RemoveKeysWithPrefix<ST>>
+    }
+}

package/src/useUnistyles.ts

@@ -0,0 +1,67 @@
+import { NativeEventEmitter, NativeModules } from 'react-native'
+import { useEffect, useState } from 'react'
+import type {
+    CxxUnistylesBreakpointEvent,
+    CxxUnistylesSizeEvent,
+    CxxUnistylesThemeEvent,
+    UnistylesEvents
+} from './types'
+import { CxxUnistylesEventTypes } from './types'
+import { unistyles } from './Unistyles'
+
+const unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles)
+
+export const useUnistyles = () => {
+    const [theme, setTheme] = useState(unistyles.runtime.getTheme(unistyles.runtime.theme))
+    const [breakpoint, setBreakpoint] = useState(unistyles.runtime.currentBreakpoint)
+    const [screenSize, setScreenSize] = useState({
+        width: 0,
+        height: 0
+    })
+
+    useEffect(() => {
+        const subscription = unistylesEvents.addListener(
+            'onChange',
+            (event: UnistylesEvents) => {
+                switch (event.type) {
+                    case CxxUnistylesEventTypes.Theme: {
+                        const themeEvent = event as CxxUnistylesThemeEvent
+
+                        setTheme(unistyles.runtime.getTheme(themeEvent.payload.currentTheme))
+
+                        return
+                    }
+                    case CxxUnistylesEventTypes.Size: {
+                        const sizeEvent = event as CxxUnistylesSizeEvent
+
+                        setScreenSize({
+                            width: sizeEvent.payload.width,
+                            height: sizeEvent.payload.height
+                        })
+                        // todo
+                        // setBreakpoint(unistyles.runtime.currentBreakpoint)
+
+                        return
+                    }
+                    case CxxUnistylesEventTypes.Breakpoint: {
+                        const breakpointEvent = event as CxxUnistylesBreakpointEvent
+
+                        setBreakpoint(breakpointEvent.payload.currentBreakpoint)
+
+                        return
+                    }
+                    default:
+                        return
+                }
+            }
+        )
+
+        return subscription.remove
+    }, [])
+
+    return {
+        theme,
+        breakpoint,
+        screenSize
+    }
+}

package/src/utils/breakpoints.ts

@@ -1,6 +1,8 @@
+import { unistyles } from '../Unistyles'
 import { throwError } from './common'
-import type { Breakpoints, ScreenSize, SortedBreakpointEntries } from '../types'
+import type { ScreenSize, MediaQueries } from '../types'
 import { getKeyForCustomMediaQuery, isMediaQuery } from './mediaQueries'
+import type { UnistylesBreakpoints } from '../global'
 
 /**
  * Sorts the breakpoints object based on its numeric values in ascending order and validates them.
@@ -21,17 +23,17 @@ import { getKeyForCustomMediaQuery, isMediaQuery } from './mediaQueries'
  * const input = { md: 768, lg: 1024, sm: 0 }
  * sortAndValidateBreakpoints(input) // returns { sm: 0, md: 768, lg: 1024 }
  */
-export const sortAndValidateBreakpoints = <B extends Breakpoints>(breakpoints: B): B => {
+export const sortAndValidateBreakpoints = (breakpoints: UnistylesBreakpoints): UnistylesBreakpoints => {
     const sortedPairs = Object
         .entries(breakpoints)
         .sort((breakpoint1, breakpoint2) => {
             const [, value1] = breakpoint1
             const [, value2] = breakpoint2
 
-            return value1 - value2
+            return (value1 as number) - (value2 as number)
         })
 
-    const sortedBreakpoints =  Object.freeze(Object.fromEntries(sortedPairs)) as B
+    const sortedBreakpoints =  Object.freeze(Object.fromEntries(sortedPairs)) as UnistylesBreakpoints
     const breakpointValues = Object.values(sortedBreakpoints)
     const [firstBreakpoint] = breakpointValues
 
@@ -61,7 +63,7 @@ export const sortAndValidateBreakpoints = <B extends Breakpoints>(breakpoints: B
  * const breakpoints = { sm: 0, md: 768, lg: 1024 }
  * getBreakpointFromScreenWidth(800, breakpoints) // returns 'md'
  */
-export const getBreakpointFromScreenWidth = <B extends Breakpoints>(width: number, breakpointEntries: SortedBreakpointEntries<B>): keyof B & string => {
+export const getBreakpointFromScreenWidth = (width: number, breakpointEntries: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>): keyof UnistylesBreakpoints & string => {
     const [key] = breakpointEntries
         .find(([, value], index, otherBreakpoints) => {
             const minVal = value
@@ -72,7 +74,7 @@ export const getBreakpointFromScreenWidth = <B extends Breakpoints>(width: numbe
             }
 
             return width >= minVal && width < maxVal
-        }) as [keyof B & string, number]
+        }) as [keyof UnistylesBreakpoints & string, number]
 
     return key
 }
@@ -101,24 +103,23 @@ export const getBreakpointFromScreenWidth = <B extends Breakpoints>(width: numbe
  *
  * getValueForBreakpoint(values, 'sm', screenSize, breakpoints); // 'value1'
  */
-export const getValueForBreakpoint = <B extends Breakpoints>(
-    value: Record<keyof B & string, string | number | undefined>,
-    breakpoint: keyof B & string,
-    screenSize: ScreenSize,
-    breakpointPairs: SortedBreakpointEntries<B>
+export const getValueForBreakpoint = (
+    value: Record<keyof UnistylesBreakpoints | MediaQueries, string | number | undefined>,
+    breakpoint: keyof UnistylesBreakpoints,
+    screenSize: ScreenSize
 ): string | number | undefined => {
     // the highest priority is for custom media queries
     const customMediaQueries = Object
         .entries(value)
         .filter(([key]) => isMediaQuery(key))
-    const customMediaQueryKey = getKeyForCustomMediaQuery(customMediaQueries, screenSize)
+    const customMediaQueryKey = getKeyForCustomMediaQuery(customMediaQueries, screenSize) as keyof typeof value
 
     if (customMediaQueryKey && customMediaQueryKey in value) {
         return value[customMediaQueryKey]
     }
 
     // if no custom media query, or didn't match, proceed with defined breakpoints
-    const unifiedKey = breakpoint.toLowerCase()
+    const unifiedKey = breakpoint?.toLowerCase() as keyof typeof value
     const directBreakpoint = value[unifiedKey]
 
     // if there is a direct key like 'sm' or 'md', or value for this key exists but its undefined
@@ -127,6 +128,7 @@ export const getValueForBreakpoint = <B extends Breakpoints>(
     }
 
     // there is no direct hit for breakpoint nor media-query, so let's simulate CSS cascading
+    const breakpointPairs = unistyles.runtime.sortedBreakpoints
     const currentBreakpoint = breakpointPairs
         .findIndex(([key]) => key === unifiedKey)
 
@@ -135,6 +137,6 @@ export const getValueForBreakpoint = <B extends Breakpoints>(
         .map(([key]) => key)
 
     return breakpointPairs.length > 0
-        ? value[availableBreakpoints[availableBreakpoints.length - 1] as keyof B & string]
+        ? value[availableBreakpoints[availableBreakpoints.length - 1] as keyof UnistylesBreakpoints & string]
         : undefined
 }

package/src/utils/styles.ts

@@ -1,7 +1,8 @@
-import type { Breakpoints, CustomNamedStyles, ScreenSize, SortedBreakpointEntries } from '../types'
+import type { CustomNamedStyles, ScreenSize } from '../types'
 import { getValueForBreakpoint } from './breakpoints'
 import { normalizeStyles } from './normalizeStyles'
 import { isWeb } from './common'
+import type { UnistylesBreakpoints } from '../global'
 
 /**
  * Proxies a function to parse its return value for custom media queries or breakpoints.
@@ -24,13 +25,12 @@ import { isWeb } from './common'
  * const proxifiedFunction = proxifyFunction(myFunction, 'sm', screenSize, breakpoints)
  * proxifiedFunction() // parsed style based on screenSize and breakpoints
  */
-export const proxifyFunction = <B extends Breakpoints>(
-    fn: Function, breakpoint: keyof B & string,
-    screenSize: ScreenSize,
-    breakpointPairs: SortedBreakpointEntries<B>
+export const proxifyFunction = (
+    fn: Function, breakpoint: keyof UnistylesBreakpoints & string,
+    screenSize: ScreenSize
 ): Function => new Proxy(fn, {
     apply: (target, thisArg, argumentsList) =>
-        parseStyle(target.apply(thisArg, argumentsList), breakpoint, screenSize, breakpointPairs)
+        parseStyle(target.apply(thisArg, argumentsList), breakpoint, screenSize)
 })
 
 /**
@@ -58,15 +58,14 @@ export const proxifyFunction = <B extends Breakpoints>(
  * const parsedStyle = parseStyle(style, 'sm', screenSize, breakpoints)
  * // { fontSize: '12px' }
  */
-export const parseStyle = <T, B extends Breakpoints>(
-    style: CustomNamedStyles<T, B>,
-    breakpoint: keyof B & string,
-    screenSize: ScreenSize,
-    breakpointPairs: SortedBreakpointEntries<B>
+export const parseStyle = <T>(
+    style: CustomNamedStyles<T>,
+    breakpoint: keyof UnistylesBreakpoints & string,
+    screenSize: ScreenSize
 ): T => {
     const entries = Object.entries(style) as [[
         keyof T,
-        CustomNamedStyles<T, B> | Record<keyof B & string, string | number | undefined>]
+        CustomNamedStyles<T> | Record<keyof UnistylesBreakpoints & string, string | number | undefined>]
     ]
 
     const parsedStyles = Object
@@ -77,7 +76,7 @@ export const parseStyle = <T, B extends Breakpoints>(
                 if (hasNestedProperties) {
                     return [
                         key,
-                        parseStyle(value as CustomNamedStyles<T, B>, breakpoint, screenSize, breakpointPairs)
+                        parseStyle(value as CustomNamedStyles<T>, breakpoint, screenSize)
                     ]
                 }
 
@@ -86,7 +85,7 @@ export const parseStyle = <T, B extends Breakpoints>(
                 if (isTransform && Array.isArray(value)) {
                     return [
                         key,
-                        value.map(value => parseStyle(value, breakpoint, screenSize, breakpointPairs))
+                        value.map(value => parseStyle(value, breakpoint, screenSize))
                     ]
                 }
 
@@ -99,11 +98,10 @@ export const parseStyle = <T, B extends Breakpoints>(
 
                 return [
                     key,
-                    getValueForBreakpoint<B>(
-                        value as Record<keyof B & string, string | number | undefined>,
+                    getValueForBreakpoint(
+                        value as Record<keyof UnistylesBreakpoints & string, string | number | undefined>,
                         breakpoint,
-                        screenSize,
-                        breakpointPairs
+                        screenSize
                     )
                 ]
             })

package/lib/commonjs/UnistylesTheme.js

@@ -1,21 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.UnistylesTheme = exports.UnistylesContext = void 0;
-var _react = _interopRequireWildcard(require("react"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const UnistylesContext = exports.UnistylesContext = /*#__PURE__*/(0, _react.createContext)({});
-const UnistylesTheme = _ref => {
-  let {
-    theme,
-    children
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(UnistylesContext.Provider, {
-    value: theme
-  }, children);
-};
-exports.UnistylesTheme = UnistylesTheme;
-//# sourceMappingURL=UnistylesTheme.js.map

package/lib/commonjs/UnistylesTheme.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","UnistylesContext","exports","createContext","UnistylesTheme","_ref","theme","children","createElement","Provider","value"],"sourceRoot":"../../src","sources":["UnistylesTheme.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAA4C,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAOrC,MAAMY,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,gBAAG,IAAAE,oBAAa,EAAC,CAAC,CAAC,CAAC;AAE1C,MAAMC,cAA4D,GAAGC,IAAA;EAAA,IAAC;IACzEC,KAAK;IACLC;EACJ,CAAC,GAAAF,IAAA;EAAA,oBACG5B,MAAA,CAAAS,OAAA,CAAAsB,aAAA,CAACP,gBAAgB,CAACQ,QAAQ;IAACC,KAAK,EAAEJ;EAAM,GACnCC,QACsB,CAAC;AAAA,CAC/B;AAAAL,OAAA,CAAAE,cAAA,GAAAA,cAAA"}

package/lib/commonjs/createUnistyles.js

@@ -1,57 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createUnistyles = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _UnistylesTheme = require("./UnistylesTheme");
-var _hooks = require("./hooks");
-var _utils = require("./utils");
-const createUnistyles = breakpoints => {
-  const sortedBreakpoints = (0, _utils.sortAndValidateBreakpoints)(breakpoints);
-  const sortedBreakpointEntries = Object.entries(sortedBreakpoints);
-  return {
-    createStyleSheet: styles => {
-      if (typeof styles === 'function') {
-        return styles;
-      }
-      return styles;
-    },
-    useStyles: stylesheet => {
-      const theme = (0, _react.useContext)(_UnistylesTheme.UnistylesContext);
-      const screenSize = (0, _hooks.useDimensions)();
-      const breakpoint = (0, _utils.getBreakpointFromScreenWidth)(screenSize.width, sortedBreakpointEntries);
-      if (!stylesheet) {
-        return {
-          theme,
-          breakpoint,
-          styles: {}
-        };
-      }
-      const parsedStyles = (0, _react.useMemo)(() => typeof stylesheet === 'function' ? stylesheet(theme) : stylesheet, [theme, stylesheet]);
-      const dynamicStyleSheet = (0, _react.useMemo)(() => Object.entries(parsedStyles).reduce((acc, _ref) => {
-        let [key, value] = _ref;
-        const style = value;
-        if (typeof value === 'function') {
-          return {
-            ...acc,
-            [key]: (0, _utils.proxifyFunction)(value, breakpoint, screenSize, sortedBreakpointEntries)
-          };
-        }
-        return _reactNative.StyleSheet.create({
-          ...acc,
-          [key]: (0, _utils.parseStyle)(style, breakpoint, screenSize, sortedBreakpointEntries)
-        });
-      }, {}), [breakpoint, screenSize, parsedStyles]);
-      return {
-        theme,
-        breakpoint,
-        styles: dynamicStyleSheet
-      };
-    }
-  };
-};
-exports.createUnistyles = createUnistyles;
-//# sourceMappingURL=createUnistyles.js.map

package/lib/commonjs/createUnistyles.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","require","_reactNative","_UnistylesTheme","_hooks","_utils","createUnistyles","breakpoints","sortedBreakpoints","sortAndValidateBreakpoints","sortedBreakpointEntries","Object","entries","createStyleSheet","styles","useStyles","stylesheet","theme","useContext","UnistylesContext","screenSize","useDimensions","breakpoint","getBreakpointFromScreenWidth","width","parsedStyles","useMemo","dynamicStyleSheet","reduce","acc","_ref","key","value","style","proxifyFunction","StyleSheet","create","parseStyle","exports"],"sourceRoot":"../../src","sources":["createUnistyles.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AASA,IAAAE,eAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAEO,MAAMK,eAAe,GAAmCC,WAAc,IAAK;EAC9E,MAAMC,iBAAiB,GAAG,IAAAC,iCAA0B,EAACF,WAAW,CAAC;EACjE,MAAMG,uBAAuB,GAAGC,MAAM,CACjCC,OAAO,CAACJ,iBAAiB,CAA+B;EAE7D,OAAO;IACHK,gBAAgB,EAAyCC,MAAqF,IAAY;MACtJ,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;QAC9B,OAAOA,MAAM;MACjB;MAEA,OAAOA,MAAM;IACjB,CAAC;IACDC,SAAS,EAAwCC,UAA4C,IAAK;MAC9F,MAAMC,KAAK,GAAG,IAAAC,iBAAU,EAACC,gCAAgB,CAAM;MAC/C,MAAMC,UAAU,GAAG,IAAAC,oBAAa,EAAC,CAAC;MAClC,MAAMC,UAAU,GAAG,IAAAC,mCAA4B,EAAIH,UAAU,CAACI,KAAK,EAAEd,uBAAuB,CAAC;MAE7F,IAAI,CAACM,UAAU,EAAE;QACb,OAAO;UACHC,KAAK;UACLK,UAAU;UACVR,MAAM,EAAE,CAAC;QACb,CAAC;MACL;MAEA,MAAMW,YAAY,GAAG,IAAAC,cAAO,EAAC,MAAM,OAAOV,UAAU,KAAK,UAAU,GAC7DA,UAAU,CAACC,KAAK,CAAC,GACjBD,UAAU,EAAE,CAACC,KAAK,EAAED,UAAU,CAAC,CAAC;MAEtC,MAAMW,iBAAiB,GAAG,IAAAD,cAAO,EAAC,MAAMf,MAAM,CACzCC,OAAO,CAACa,YAAY,CAAC,CACrBG,MAAM,CAAC,CAACC,GAAG,EAAAC,IAAA,KAAmB;QAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;QACtB,MAAMG,KAAK,GAAGD,KAAiC;QAE/C,IAAI,OAAOA,KAAK,KAAK,UAAU,EAAE;UAC7B,OAAO;YACH,GAAGH,GAAG;YACN,CAACE,GAAG,GAAG,IAAAG,sBAAe,EAAIF,KAAK,EAAEV,UAAU,EAAEF,UAAU,EAAEV,uBAAuB;UACpF,CAAC;QACL;QAEA,OAAOyB,uBAAU,CAACC,MAAM,CAAC;UACrB,GAAGP,GAAG;UACN,CAACE,GAAG,GAAG,IAAAM,iBAAU,EAAQJ,KAAK,EAAEX,UAAU,EAAEF,UAAU,EAAEV,uBAAuB;QACnF,CAAC,CAAC;MACN,CAAC,EAAE,CAAC,CAAO,CAAC,EAAE,CAACY,UAAU,EAAEF,UAAU,EAAEK,YAAY,CAAC,CAAC;MAEzD,OAAO;QACHR,KAAK;QACLK,UAAU;QACVR,MAAM,EAAEa;MACZ,CAAC;IACL;EACJ,CAAC;AACL,CAAC;AAAAW,OAAA,CAAAhC,eAAA,GAAAA,eAAA"}

package/lib/module/UnistylesTheme.js

@@ -1,12 +0,0 @@
-import React, { createContext } from 'react';
-export const UnistylesContext = /*#__PURE__*/createContext({});
-export const UnistylesTheme = _ref => {
-  let {
-    theme,
-    children
-  } = _ref;
-  return /*#__PURE__*/React.createElement(UnistylesContext.Provider, {
-    value: theme
-  }, children);
-};
-//# sourceMappingURL=UnistylesTheme.js.map

package/lib/module/UnistylesTheme.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","createContext","UnistylesContext","UnistylesTheme","_ref","theme","children","createElement","Provider","value"],"sourceRoot":"../../src","sources":["UnistylesTheme.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,aAAa,QAAQ,OAAO;AAO5C,OAAO,MAAMC,gBAAgB,gBAAGD,aAAa,CAAC,CAAC,CAAC,CAAC;AAEjD,OAAO,MAAME,cAA4D,GAAGC,IAAA;EAAA,IAAC;IACzEC,KAAK;IACLC;EACJ,CAAC,GAAAF,IAAA;EAAA,oBACGJ,KAAA,CAAAO,aAAA,CAACL,gBAAgB,CAACM,QAAQ;IAACC,KAAK,EAAEJ;EAAM,GACnCC,QACsB,CAAC;AAAA,CAC/B"}

package/lib/module/createUnistyles.js

@@ -1,50 +0,0 @@
-import { useContext, useMemo } from 'react';
-import { StyleSheet } from 'react-native';
-import { UnistylesContext } from './UnistylesTheme';
-import { useDimensions } from './hooks';
-import { getBreakpointFromScreenWidth, proxifyFunction, parseStyle, sortAndValidateBreakpoints } from './utils';
-export const createUnistyles = breakpoints => {
-  const sortedBreakpoints = sortAndValidateBreakpoints(breakpoints);
-  const sortedBreakpointEntries = Object.entries(sortedBreakpoints);
-  return {
-    createStyleSheet: styles => {
-      if (typeof styles === 'function') {
-        return styles;
-      }
-      return styles;
-    },
-    useStyles: stylesheet => {
-      const theme = useContext(UnistylesContext);
-      const screenSize = useDimensions();
-      const breakpoint = getBreakpointFromScreenWidth(screenSize.width, sortedBreakpointEntries);
-      if (!stylesheet) {
-        return {
-          theme,
-          breakpoint,
-          styles: {}
-        };
-      }
-      const parsedStyles = useMemo(() => typeof stylesheet === 'function' ? stylesheet(theme) : stylesheet, [theme, stylesheet]);
-      const dynamicStyleSheet = useMemo(() => Object.entries(parsedStyles).reduce((acc, _ref) => {
-        let [key, value] = _ref;
-        const style = value;
-        if (typeof value === 'function') {
-          return {
-            ...acc,
-            [key]: proxifyFunction(value, breakpoint, screenSize, sortedBreakpointEntries)
-          };
-        }
-        return StyleSheet.create({
-          ...acc,
-          [key]: parseStyle(style, breakpoint, screenSize, sortedBreakpointEntries)
-        });
-      }, {}), [breakpoint, screenSize, parsedStyles]);
-      return {
-        theme,
-        breakpoint,
-        styles: dynamicStyleSheet
-      };
-    }
-  };
-};
-//# sourceMappingURL=createUnistyles.js.map

package/lib/module/createUnistyles.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useContext","useMemo","StyleSheet","UnistylesContext","useDimensions","getBreakpointFromScreenWidth","proxifyFunction","parseStyle","sortAndValidateBreakpoints","createUnistyles","breakpoints","sortedBreakpoints","sortedBreakpointEntries","Object","entries","createStyleSheet","styles","useStyles","stylesheet","theme","screenSize","breakpoint","width","parsedStyles","dynamicStyleSheet","reduce","acc","_ref","key","value","style","create"],"sourceRoot":"../../src","sources":["createUnistyles.ts"],"mappings":"AAAA,SAASA,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAC3C,SAASC,UAAU,QAAQ,cAAc;AASzC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,aAAa,QAAQ,SAAS;AACvC,SAASC,4BAA4B,EAAEC,eAAe,EAAEC,UAAU,EAAEC,0BAA0B,QAAQ,SAAS;AAE/G,OAAO,MAAMC,eAAe,GAAmCC,WAAc,IAAK;EAC9E,MAAMC,iBAAiB,GAAGH,0BAA0B,CAACE,WAAW,CAAC;EACjE,MAAME,uBAAuB,GAAGC,MAAM,CACjCC,OAAO,CAACH,iBAAiB,CAA+B;EAE7D,OAAO;IACHI,gBAAgB,EAAyCC,MAAqF,IAAY;MACtJ,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;QAC9B,OAAOA,MAAM;MACjB;MAEA,OAAOA,MAAM;IACjB,CAAC;IACDC,SAAS,EAAwCC,UAA4C,IAAK;MAC9F,MAAMC,KAAK,GAAGnB,UAAU,CAACG,gBAAgB,CAAM;MAC/C,MAAMiB,UAAU,GAAGhB,aAAa,CAAC,CAAC;MAClC,MAAMiB,UAAU,GAAGhB,4BAA4B,CAAIe,UAAU,CAACE,KAAK,EAAEV,uBAAuB,CAAC;MAE7F,IAAI,CAACM,UAAU,EAAE;QACb,OAAO;UACHC,KAAK;UACLE,UAAU;UACVL,MAAM,EAAE,CAAC;QACb,CAAC;MACL;MAEA,MAAMO,YAAY,GAAGtB,OAAO,CAAC,MAAM,OAAOiB,UAAU,KAAK,UAAU,GAC7DA,UAAU,CAACC,KAAK,CAAC,GACjBD,UAAU,EAAE,CAACC,KAAK,EAAED,UAAU,CAAC,CAAC;MAEtC,MAAMM,iBAAiB,GAAGvB,OAAO,CAAC,MAAMY,MAAM,CACzCC,OAAO,CAACS,YAAY,CAAC,CACrBE,MAAM,CAAC,CAACC,GAAG,EAAAC,IAAA,KAAmB;QAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;QACtB,MAAMG,KAAK,GAAGD,KAAiC;QAE/C,IAAI,OAAOA,KAAK,KAAK,UAAU,EAAE;UAC7B,OAAO;YACH,GAAGH,GAAG;YACN,CAACE,GAAG,GAAGtB,eAAe,CAAIuB,KAAK,EAAER,UAAU,EAAED,UAAU,EAAER,uBAAuB;UACpF,CAAC;QACL;QAEA,OAAOV,UAAU,CAAC6B,MAAM,CAAC;UACrB,GAAGL,GAAG;UACN,CAACE,GAAG,GAAGrB,UAAU,CAAQuB,KAAK,EAAET,UAAU,EAAED,UAAU,EAAER,uBAAuB;QACnF,CAAC,CAAC;MACN,CAAC,EAAE,CAAC,CAAO,CAAC,EAAE,CAACS,UAAU,EAAED,UAAU,EAAEG,YAAY,CAAC,CAAC;MAEzD,OAAO;QACHJ,KAAK;QACLE,UAAU;QACVL,MAAM,EAAEQ;MACZ,CAAC;IACL;EACJ,CAAC;AACL,CAAC"}

package/lib/typescript/examples/expo/src/examples/Breakpoints.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare const Breakpoints: React.FunctionComponent;
-//# sourceMappingURL=Breakpoints.d.ts.map

package/lib/typescript/examples/expo/src/examples/Breakpoints.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Breakpoints.d.ts","sourceRoot":"","sources":["../../../../../../examples/expo/src/examples/Breakpoints.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,iBAiB/B,CAAA"}

package/lib/typescript/examples/expo/src/examples/EmptyStyles.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare const EmptyStyles: React.FunctionComponent;
-//# sourceMappingURL=EmptyStyles.d.ts.map

package/lib/typescript/examples/expo/src/examples/EmptyStyles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EmptyStyles.d.ts","sourceRoot":"","sources":["../../../../../../examples/expo/src/examples/EmptyStyles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,iBAU/B,CAAA"}

package/lib/typescript/examples/expo/src/examples/Extreme.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-type ExtremeProps = {
-    onToggleTheme: VoidFunction;
-};
-export declare const Extreme: React.FunctionComponent<ExtremeProps>;
-export {};
-//# sourceMappingURL=Extreme.d.ts.map

package/lib/typescript/examples/expo/src/examples/Extreme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Extreme.d.ts","sourceRoot":"","sources":["../../../../../../examples/expo/src/examples/Extreme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,KAAK,YAAY,GAAG;IAChB,aAAa,EAAE,YAAY,CAAA;CAC9B,CAAA;AAGD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,YAAY,CAezD,CAAA"}

package/lib/typescript/examples/expo/src/examples/MediaQueries.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare const MediaQueries: React.FunctionComponent;
-//# sourceMappingURL=MediaQueries.d.ts.map

package/lib/typescript/examples/expo/src/examples/MediaQueries.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MediaQueries.d.ts","sourceRoot":"","sources":["../../../../../../examples/expo/src/examples/MediaQueries.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAahC,CAAA"}

package/lib/typescript/examples/expo/src/examples/Memoization.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare const Memoization: React.FunctionComponent;
-//# sourceMappingURL=Memoization.d.ts.map

package/lib/typescript/examples/expo/src/examples/Memoization.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Memoization.d.ts","sourceRoot":"","sources":["../../../../../../examples/expo/src/examples/Memoization.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,iBAY/B,CAAA"}

package/lib/typescript/examples/expo/src/examples/Minimal.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare const Minimal: React.FunctionComponent;
-//# sourceMappingURL=Minimal.d.ts.map

package/lib/typescript/examples/expo/src/examples/Minimal.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Minimal.d.ts","sourceRoot":"","sources":["../../../../../../examples/expo/src/examples/Minimal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,iBAU3B,CAAA"}

package/lib/typescript/examples/expo/src/examples/MinimalWithCreateStyleSheet.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare const MinimalWithCreateStyleSheet: React.FunctionComponent;
-//# sourceMappingURL=MinimalWithCreateStyleSheet.d.ts.map

package/lib/typescript/examples/expo/src/examples/MinimalWithCreateStyleSheet.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MinimalWithCreateStyleSheet.d.ts","sourceRoot":"","sources":["../../../../../../examples/expo/src/examples/MinimalWithCreateStyleSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,eAAO,MAAM,2BAA2B,EAAE,KAAK,CAAC,iBAU/C,CAAA"}

package/lib/typescript/examples/expo/src/examples/Theme.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare const Theme: React.FunctionComponent;
-//# sourceMappingURL=Theme.d.ts.map

package/lib/typescript/examples/expo/src/examples/Theme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../../../../../examples/expo/src/examples/Theme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,iBAUzB,CAAA"}

package/lib/typescript/src/UnistylesTheme.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import type { PropsWithChildren } from 'react';
-interface UnistylesThemeProps extends PropsWithChildren {
-    theme: any;
-}
-export declare const UnistylesContext: React.Context<{}>;
-export declare const UnistylesTheme: React.FunctionComponent<UnistylesThemeProps>;
-export {};
-//# sourceMappingURL=UnistylesTheme.d.ts.map

package/lib/typescript/src/UnistylesTheme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"UnistylesTheme.d.ts","sourceRoot":"","sources":["../../../src/UnistylesTheme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAE9C,UAAU,mBAAoB,SAAQ,iBAAiB;IACnD,KAAK,EAAE,GAAG,CAAA;CACb;AAED,eAAO,MAAM,gBAAgB,mBAAoB,CAAA;AAEjD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC,mBAAmB,CAOvE,CAAA"}

package/lib/typescript/src/createUnistyles.d.ts

@@ -1,10 +0,0 @@
-import type { Breakpoints, CreateStylesFactory, CustomNamedStyles, ExtractBreakpoints, RemoveKeysWithPrefix } from './types';
-export declare const createUnistyles: <B extends Breakpoints, T = {}>(breakpoints: B) => {
-    createStyleSheet: <S extends CustomNamedStyles<S, B>, X>(styles: S | X | CustomNamedStyles<S, B> | ((theme: T) => X | CustomNamedStyles<X, B>)) => S | X;
-    useStyles: <ST extends CustomNamedStyles<ST, B>>(stylesheet?: ST | CreateStylesFactory<ST, T> | undefined) => {
-        theme: T;
-        breakpoint: keyof B & string;
-        styles: ExtractBreakpoints<RemoveKeysWithPrefix<ST, B>, B>;
-    };
-};
-//# sourceMappingURL=createUnistyles.d.ts.map

package/lib/typescript/src/createUnistyles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"createUnistyles.d.ts","sourceRoot":"","sources":["../../../src/createUnistyles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACR,WAAW,EACX,mBAAmB,EACnB,iBAAiB,EACjB,kBAAkB,EAClB,oBAAoB,EAEvB,MAAM,SAAS,CAAA;AAKhB,eAAO,MAAM,eAAe;;;;;;;CAuD3B,CAAA"}

package/src/UnistylesTheme.tsx

@@ -1,17 +0,0 @@
-import React, { createContext } from 'react'
-import type { PropsWithChildren } from 'react'
-
-interface UnistylesThemeProps extends PropsWithChildren {
-    theme: any
-}
-
-export const UnistylesContext = createContext({})
-
-export const UnistylesTheme: React.FunctionComponent<UnistylesThemeProps> = ({
-    theme,
-    children
-}) => (
-    <UnistylesContext.Provider value={theme}>
-        {children}
-    </UnistylesContext.Provider>
-)