react-native-unistyles 1.0.0-beta.2 → 1.0.0-beta.4

package/README.md

@@ -28,7 +28,6 @@ Suggestions, ideas, and potential improvements are always welcome!
 
 ## Setup
 
-
 **1. Install library**
 
 ```cmd
@@ -39,6 +38,26 @@ yarn add react-native-unistyles
 
 You don't have to follow a specific format. Just make an object and add any keys/values you like.
 
+```ts
+// theme.ts
+export const theme = {
+  colors: {
+    blood: '#eb4d4b',
+    barbie: '#e056fd',
+    pumpkin: '#f0932b',
+    background: '#ffffff'
+  },
+  margins: {
+    sm: 2,
+    md: 4,
+    lg: 8,
+    xl: 12
+  }
+}
+```
+
+or something more advanced with nested objects / functions:
+
 ```ts
 // theme.ts
 export const theme = {
@@ -106,7 +125,7 @@ export const App: React.FunctionComponent = () => (
 )
 ```
 
-**5. Access createStyles and useStyles with a factory**
+**5. Access createStyleSheet and useStyles with a factory**
 
 ```ts
 // styles.ts
@@ -119,22 +138,22 @@ import { breakpoints } from './breakpoints'
 import { theme } from './theme'
 
 export const {
-    createStyles,
+    createStyleSheet,
     useStyles,
 } = createUnistyles<typeof breakpoints, typeof theme>(breakpoints)
 ```
 
 ## Basic Usage
 
-Library gives you two functions from the factory:
-- `createStyles` which replaces `StyleSheet.create`
-- `useStyles` which parses your styles based on screen height, width and theme
+After the initial setup, you only need to focus on two functions responsible for your styles:
+- `createStyleSheet` which replaces `StyleSheet.create`
+- `useStyles` which parses your styles and ensures TypeScript compatibility with media queries and breakpoints
 
 ```tsx
 import React from 'react'
 import { View, Text } from 'react-native'
-// access createStyles and useStyles exported from factory
-import { createStyles, useStyles } from 'lib/styles'
+// access createStyleSheet and useStyles exported from factory
+import { createStyleSheet, useStyles } from 'lib/styles'
 
 export const ExampleUnistyles = () => {
     const { styles } = useStyles(stylesheet)
@@ -148,7 +167,7 @@ export const ExampleUnistyles = () => {
     )
 }
 
-const stylesheet = createStyles(theme => ({
+const stylesheet = createStyleSheet(theme => ({
     container: {
        flex: 1,
        justifyContent: 'center',
@@ -161,24 +180,82 @@ const stylesheet = createStyles(theme => ({
 }))
 ```
 
-`createStyles` takes an object like `StyleSheet.create` or function that injects your theme
+## createStyleSheet
+
+`createStyleSheet` is interchangeable with `StyleSheet.create`. You can use objects, and it will function identically to its React Native counterpart.
+
+```ts
+const stylesheet = createStyleSheet({
+    container: {
+       flex: 1,
+       justifyContent: 'center',
+       alignItems: 'center',
+    },
+})
+```
+The difference is that you can now use breakpoints and media queries:
+
+```ts
+const stylesheet = createStyleSheet({
+    container: {
+       flex: 1,
+       justifyContent: 'center',
+       alignItems: 'center',
+       flexDirection: {
+           xs: 'row',
+           sm: 'column',
+           ':w[800]': 'row'
+       }
+    },
+})
+```
+
+`createStyleSheet` also accepts a function, to which the library will inject your theme:
+
+```ts
+const stylesheet = createStyleSheet(theme => ({
+    container: {
+       flex: 1,
+       justifyContent: 'center',
+       alignItems: 'center',
+       flexDirection: {
+           xs: 'row',
+           sm: 'column',
+           ':w[800]': 'row'
+       },
+       backgroundColor: theme.colors.background
+    },
+}))
+```
+
+Importantly, you'll receive the same TypeScript hints as with `StyleSheet.create`!
 
-`useStyles` hook takes a `stylesheet` and returns an object with two keys:
-- `styles` - parsed styles that can be used directly in React Native components
-- `theme` - your app's theme that can be used in JSX
+## useStyles
 
-You can also skip `stylesheet` if you just want to access `theme`:
+`useStyle` ties everything together and handles the heavy lifting. Without `useStyles`, you can't utilize features like:
+- breakpoints
+- media queries
+- themes
+
+_useStyles_ allows you to skip the `stylesheet` if you only want to access the `theme`:
 
 ```tsx
 const { theme } = useStyles()
 ```
 
+For more advanced usage, pass your `stylesheet` generated with `createStyleSheet`:
+
+```tsx
+// you can still access theme
+const { styles, theme } = useStyles(stylesheet)
+```
+
 ## Breakpoints
 
 Any style can change based on breakpoints. To do this, change a value to an object:
 
 ```ts
-const stylesheet = createStyles(theme => ({
+const stylesheet = createStyleSheet(theme => ({
     container: {
        flex: 1,
        justifyContent: 'center',
@@ -195,6 +272,33 @@ const stylesheet = createStyles(theme => ({
 }))
 ```
 
+You can even use it with nested objects like `transform` or `shadowOffset`:
+
+```ts
+const stylesheet = createStyleSheet(theme => ({
+    container: {
+       flex: 1,
+       justifyContent: 'center',
+       alignItems: 'center',
+       backgroundColor: {
+         xs: theme.colors.background,
+         sm: theme.colors.barbie
+       },
+       transform: [
+           {
+               translateX: 100
+           },
+           {
+               scale: {
+                   xs: 1.5,
+                   ':w[500]': 1
+               }
+           }
+       ]
+    }
+}))
+```
+
 Library will choose the correct value (based on screen width) in the runtime.
 
 ## Media queries
@@ -211,7 +315,7 @@ For more advanced usage and pixel perfect designs you can also use a custom medi
 Media queries can be mixed with breakpoints, but have a bigger priority:
 
 ```tsx
-const stylesheet = createStyles(theme => ({
+const stylesheet = createStyleSheet(theme => ({
     container: {
        justifyContent: 'center',
        alignItems: 'center',
@@ -220,7 +324,8 @@ const stylesheet = createStyles(theme => ({
           sm: 'row',
        },
        backgroundColor: {
-          xs: theme.colors.background,
+          md: theme.colors.background,
+          // even though md might overlap with >600px, lib will use 'barbie'
           ':w[600]': theme.colors.barbie
        }
     },
@@ -255,7 +360,7 @@ export const ExampleUnistyles = () => {
     )
 }
 
-const stylesheet = createStyles({
+const stylesheet = createStyleSheet({
     scrollContainer: {
         flex: 1,
         justifyContent: 'center',
@@ -267,16 +372,221 @@ const stylesheet = createStyles({
     })
 })
 ```
+If you use a dynamic function, library will wrap it in a `Proxy` to make sure the correct values of breakpoints will be used:
+
+```ts
+const stylesheet = createStyleSheet(theme => ({
+    scrollContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    post: (index: number) => ({
+        // breakpoints and media queries works with dynamic function
+        backgroundColor: {
+            xs: index % 2 === 0
+                ? theme.colors.gold
+                : theme.colors.silver,
+            sm: theme.colors.red
+        }
+    })
+}))
+```
+
+## Dynamic themes
+
+You can incorporate as many themes as you desire in your application. While there's flexibility in how you structure your theme, it's essential to maintain consistency with the TypeScript type:
+
+To promote reusability and maintainability, it's a good practice to share as many values between themes as possible:
+
+```ts
+// move shared colors to object
+const sharedColors = {
+    barbie: '#ff9ff3',
+    oak: '#1dd1a1',
+    sky: '#48dbfb',
+    fog: '#c8d6e5',
+    aloes: '#00d2d3'
+}
+
+export const lightTheme = {
+    colors: {
+        // reuse or override them
+        ...sharedColors,
+        backgroundColor: '#ffffff',
+        typography: '#000000'
+    }
+    // other keys in common with darkTheme
+}
+
+export const darkTheme = {
+    colors: {
+        // reuse or override them
+        ...sharedColors,
+        backgroundColor: '#000000',
+        typography: '#ffffff'
+    }
+    // other keys in common with lightTheme
+}
+
+// export type that will be used to describe your theme
+export type AppTheme = typeof lightTheme | typeof darkTheme
+```
+
+With the themes set up, modify your  `createUnistyles` to consume your `AppTheme` type:
+
+```ts
+export const { useStyles, createStyleSheet } = createUnistyles<typeof breakpoints, AppTheme>(breakpoints)
+```
+
+The final step is to switch your theme based on certain states, persisted values, databases, etc.:
+
+```tsx
+export const App: React.FunctionComponent = () => {
+    // obtain here your dark or light theme. It can be storage, state, mmkv, or whateber you use
+    // const [yourAppTheme] = useState(lightTheme)
+    // const [yourAppTheme] = useYourStorage()
+    // const [yourAppTheme] = useMMKVObject<AppTheme>(Theme)
+
+    // switching theme will re-render your stylesheets automatically
+    return (
+        <UnistylesTheme theme={yourAppTheme}>
+            <Examples.Extreme />
+        </UnistylesTheme>
+    )
+}
+```
+
+## Variants
+
+`react-native-unistyles` isn't a UI/component library, so you're in charge of designing variants. With no restrictions and using your creativity, you can easily create variants for your components.
+
+Let's examine variants for the `Text` component. Imagine you want to create several variants for your `Typography` components:
+- Heading
+- Regular
+- Thin
+
+To achieve this, add variants to your theme:
+
+```ts
+export const lightTheme = {
+    colors: {
+        ...sharedColors,
+        backgroundColor: '#ffffff',
+        typography: '#000000'
+    },
+    components: {
+        typography: {
+            base: {
+                fontFamily: 'Roboto',
+                fontSize: 12,
+            },
+            heading: {
+                fontFamily: 'Roboto-Medium',
+                fontSize: 24,
+            },
+            regular: {
+                fontFamily: 'Roboto',
+                fontSize: 12,
+            },
+            thin: {
+                fontFamily: 'Roboto-Thin',
+                fontSize: 12,
+            },
+            bold: {
+                fontWeight: 'bold'
+            }
+        }
+    }
+}
+```
+Next, create a base component:
+
+```tsx
+import React from 'react'
+import type { PropsWithChildren } from 'react'
+import { Text, TextStyle } from 'react-native'
+import { createStyleSheet, useStyles } from 'lib/styles'
+
+interface BaseTextProps extends PropsWithChildren {
+    bold: boolean,
+    style: TextStyle
+}
+
+export const BaseText: React.FunctionComponent<BaseTextProps> = ({
+    children,
+    bold = false,
+    style = {}
+}) => {
+    const {styles} = useStyles(stylesheet)
+
+    return (
+        <Text
+            style={{
+                ...styles.baseText,
+                ...bold
+                    ? styles.baseText
+                    : {},
+                // pass other styles via props
+                ...style
+            }}
+        >
+            {children}
+        </Text>
+    )
+}
+
+const stylesheet = createStyleSheet(theme => ({
+    baseText: {
+        ...theme.components.typography.base
+    },
+    bold: {
+        ...theme.components.typography.bold
+    }
+}))
+```
+
+Now, let's create another variant, e.g., Heading:
+
+```tsx
+import React from 'react'
+import type { PropsWithChildren } from 'react'
+import { Text, TextStyle } from 'react-native'
+import { createStyleSheet, useStyles } from 'lib/styles'
+import { BaseText } from 'lib/components'
+
+interface BaseTextProps extends PropsWithChildren {
+    bold: boolean,
+    text: string
+}
+
+export const Heading: React.FunctionComponent<BaseTextProps> = ({
+    text,
+    bold = false
+}) => {
+    const { theme } = useStyles()
+
+    return (
+        <BaseText
+            bold={bold}
+            style={theme.components.typography.heading}
+        >
+            {text}
+        </BaseText>
+    )
+}
+```
+And so on...
 
 ## Migrate from StyleSheet
 
 `react-native-unistyles` embraces the simplicity of `StyleSheet`, making it easy to integrate into your project.
 
-You can replace `StyleSheet.create` with `createStyles` and it will work exactly the same:
+You can replace `StyleSheet.create` with `createStyleSheet` and it will work exactly the same:
 
 ```diff
 -const styles = StyleSheet.create({
-+const styles = createStyles({
++const styles = createStyleSheet({
     scrollContainer: {
         flex: 1,
         justifyContent: 'center',
@@ -294,21 +604,7 @@ export const ExampleUnistyles = () => {
 }
 ```
 
-With the hook in place, you can now use `breakpoints` and `media-queries`.
-
-Additionally, to access the `theme` use a function instead of an  `object`:
-
-```diff
--const stylesheet = createStyles({
-+const stylesheet = createStyles(theme => ({
-    scrollContainer: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: theme.colors.background
-    }
-}))
-```
+With the hook in place, you can now use all the features.
 
 ## Example
 
@@ -318,6 +614,17 @@ In order to check out working example go to [example/](./example).
 
 For more detailed explanation please refer to my blog post [here](https://www.reactnativecrossroads.com/posts/level-up-react-native-styles).
 
+
+## Sponsor my work
+
+If you found the `react-native-unistyles` time-saving and valuable, please consider sponsoring my work. Your support enables me to continue creating libraries with a fresh approach.
+
+Github: https://github.com/sponsors/jpudysz
+
+Ko-fi: https://ko-fi.com/jpudysz
+
+Your support is greatly appreciated and helps me dedicate more time and resources to creating quality libraries. Thank you for all the support!
+
 ## License
 
 MIT

package/lib/commonjs/createUnistyles.js

@@ -5,16 +5,30 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createUnistyles = void 0;
 var _react = require("react");
-var _reactNative = require("react-native");
 var _UnistylesTheme = require("./UnistylesTheme");
 var _utils = require("./utils");
+var _hooks = require("./hooks");
 const createUnistyles = breakpoints => {
   const sortedBreakpoints = (0, _utils.sortAndValidateBreakpoints)(breakpoints);
   return {
-    createStyles: styles => styles,
+    /**
+     * @deprecated The method should not be used, proposed version by the community is createStyleSheet, will be removed in RC
+     */
+    createStyles: styles => {
+      if (typeof styles === 'function') {
+        return styles;
+      }
+      return styles;
+    },
+    createStyleSheet: styles => {
+      if (typeof styles === 'function') {
+        return styles;
+      }
+      return styles;
+    },
     useStyles: stylesheet => {
       const theme = (0, _react.useContext)(_UnistylesTheme.UnistylesContext);
-      const dimensions = (0, _reactNative.useWindowDimensions)();
+      const dimensions = (0, _hooks.useDimensions)();
       const breakpoint = (0, _utils.getBreakpointFromScreenWidth)(dimensions.width, sortedBreakpoints);
       const screenSize = {
         width: dimensions.width,

package/lib/commonjs/createUnistyles.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_reactNative","_UnistylesTheme","_utils","createUnistyles","breakpoints","sortedBreakpoints","sortAndValidateBreakpoints","createStyles","styles","useStyles","stylesheet","theme","useContext","UnistylesContext","dimensions","useWindowDimensions","breakpoint","getBreakpointFromScreenWidth","width","screenSize","height","parsedStyles","dynamicStyleSheet","Object","entries","reduce","acc","_ref","key","value","x","proxifyFunction","parseStyle","exports"],"sourceRoot":"../../src","sources":["createUnistyles.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,eAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAEO,MAAMI,eAAe,GAA8CC,WAAc,IAAK;EACzF,MAAMC,iBAAiB,GAAG,IAAAC,iCAA0B,EAACF,WAAW,CAAM;EAEtE,OAAO;IACHG,YAAY,EAAsCC,MAAqC,IAAKA,MAAW;IACvGC,SAAS,EAAwCC,UAA4C,IAAK;MAC9F,MAAMC,KAAK,GAAG,IAAAC,iBAAU,EAACC,gCAAgB,CAAM;MAC/C,MAAMC,UAAU,GAAG,IAAAC,gCAAmB,EAAC,CAAC;MACxC,MAAMC,UAAU,GAAG,IAAAC,mCAA4B,EAAIH,UAAU,CAACI,KAAK,EAAEb,iBAAiB,CAAC;MACvF,MAAMc,UAAsB,GAAG;QAC3BD,KAAK,EAAEJ,UAAU,CAACI,KAAK;QACvBE,MAAM,EAAEN,UAAU,CAACM;MACvB,CAAC;MAED,IAAI,CAACV,UAAU,EAAE;QACb,OAAO;UACHC,KAAK;UACLH,MAAM,EAAE,CAAC;QACb,CAAC;MACL;MAEA,MAAMa,YAAY,GAAG,OAAOX,UAAU,KAAK,UAAU,GAC/CA,UAAU,CAACC,KAAK,CAAC,GACjBD,UAAU;MAEhB,MAAMY,iBAAiB,GAAGC,MAAM,CAC3BC,OAAO,CAACH,YAAY,CAAC,CACrBI,MAAM,CAAC,CAACC,GAAG,EAAAC,IAAA,KAAmB;QAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;QACtB,MAAMG,CAAC,GAAGD,KAAiC;QAE3C,IAAI,OAAOA,KAAK,KAAK,UAAU,EAAE;UAC7B,OAAO;YACH,GAAGH,GAAG;YACN,CAACE,GAAG,GAAG,IAAAG,sBAAe,EAAIF,KAAK,EAAEb,UAAU,EAAEG,UAAU,EAAEd,iBAAiB;UAC9E,CAAC;QACL;QAEA,OAAO;UACH,GAAGqB,GAAG;UACN,CAACE,GAAG,GAAG,IAAAI,iBAAU,EAAQF,CAAC,EAAEd,UAAU,EAAEG,UAAU,EAAEd,iBAAiB;QACzE,CAAC;MACL,CAAC,EAAE,CAAC,CAAO,CAAC;MAEhB,OAAO;QACHM,KAAK;QACLH,MAAM,EAAEc;MACZ,CAAC;IACL;EACJ,CAAC;AACL,CAAC;AAAAW,OAAA,CAAA9B,eAAA,GAAAA,eAAA"}
+{"version":3,"names":["_react","require","_UnistylesTheme","_utils","_hooks","createUnistyles","breakpoints","sortedBreakpoints","sortAndValidateBreakpoints","createStyles","styles","createStyleSheet","useStyles","stylesheet","theme","useContext","UnistylesContext","dimensions","useDimensions","breakpoint","getBreakpointFromScreenWidth","width","screenSize","height","parsedStyles","dynamicStyleSheet","Object","entries","reduce","acc","_ref","key","value","x","proxifyFunction","parseStyle","exports"],"sourceRoot":"../../src","sources":["createUnistyles.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAEO,MAAMI,eAAe,GAA8CC,WAAc,IAAK;EACzF,MAAMC,iBAAiB,GAAG,IAAAC,iCAA0B,EAACF,WAAW,CAAC;EAEjE,OAAO;IACH;AACR;AACA;IACQG,YAAY,EAAyCC,MAAqF,IAAY;MAClJ,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;QAC9B,OAAOA,MAAM;MACjB;MAEA,OAAOA,MAAM;IACjB,CAAC;IACDC,gBAAgB,EAAyCD,MAAqF,IAAY;MACtJ,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;QAC9B,OAAOA,MAAM;MACjB;MAEA,OAAOA,MAAM;IACjB,CAAC;IACDE,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,iBAAiB,CAAC;MACvF,MAAMe,UAAsB,GAAG;QAC3BD,KAAK,EAAEJ,UAAU,CAACI,KAAK;QACvBE,MAAM,EAAEN,UAAU,CAACM;MACvB,CAAC;MAED,IAAI,CAACV,UAAU,EAAE;QACb,OAAO;UACHC,KAAK;UACLJ,MAAM,EAAE,CAAC;QACb,CAAC;MACL;MAEA,MAAMc,YAAY,GAAG,OAAOX,UAAU,KAAK,UAAU,GAC/CA,UAAU,CAACC,KAAK,CAAC,GACjBD,UAAU;MAEhB,MAAMY,iBAAiB,GAAGC,MAAM,CAC3BC,OAAO,CAACH,YAAY,CAAC,CACrBI,MAAM,CAAC,CAACC,GAAG,EAAAC,IAAA,KAAmB;QAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;QACtB,MAAMG,CAAC,GAAGD,KAAiC;QAE3C,IAAI,OAAOA,KAAK,KAAK,UAAU,EAAE;UAC7B,OAAO;YACH,GAAGH,GAAG;YACN,CAACE,GAAG,GAAG,IAAAG,sBAAe,EAAIF,KAAK,EAAEb,UAAU,EAAEG,UAAU,EAAEf,iBAAiB;UAC9E,CAAC;QACL;QAEA,OAAO;UACH,GAAGsB,GAAG;UACN,CAACE,GAAG,GAAG,IAAAI,iBAAU,EAAQF,CAAC,EAAEd,UAAU,EAAEG,UAAU,EAAEf,iBAAiB;QACzE,CAAC;MACL,CAAC,EAAE,CAAC,CAAO,CAAC;MAEhB,OAAO;QACHO,KAAK;QACLJ,MAAM,EAAEe;MACZ,CAAC;IACL;EACJ,CAAC;AACL,CAAC;AAAAW,OAAA,CAAA/B,eAAA,GAAAA,eAAA"}

package/lib/commonjs/hooks/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useDimensions", {
+  enumerable: true,
+  get: function () {
+    return _useDimensions.useDimensions;
+  }
+});
+var _useDimensions = require("./useDimensions");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_useDimensions","require"],"sourceRoot":"../../../src","sources":["hooks/index.ts"],"mappings":";;;;;;;;;;;AAAA,IAAAA,cAAA,GAAAC,OAAA"}

package/lib/commonjs/hooks/useDimensions.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDimensions = void 0;
+var _reactNative = require("react-native");
+const useDimensions = () => {
+  const {
+    width,
+    height
+  } = (0, _reactNative.useWindowDimensions)();
+  return {
+    width,
+    height
+  };
+};
+exports.useDimensions = useDimensions;
+//# sourceMappingURL=useDimensions.js.map

package/lib/commonjs/hooks/useDimensions.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","useDimensions","width","height","useWindowDimensions","exports"],"sourceRoot":"../../../src","sources":["hooks/useDimensions.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAGO,MAAMC,aAAa,GAAGA,CAAA,KAAkB;EAC3C,MAAM;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAAG,IAAAC,gCAAmB,EAAC,CAAC;EAE/C,OAAO;IACHF,KAAK;IACLC;EACJ,CAAC;AACL,CAAC;AAAAE,OAAA,CAAAJ,aAAA,GAAAA,aAAA"}

package/lib/commonjs/hooks/useDimensions.web.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDimensions = void 0;
+var _react = require("react");
+const useDimensions = () => {
+  const timerRef = (0, _react.useRef)();
+  const [screenSize, setScreenSize] = (0, _react.useState)({
+    width: window.innerWidth,
+    height: window.innerHeight
+  });
+  (0, _react.useEffect)(() => {
+    const handleResize = () => {
+      clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => setScreenSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      }), 100);
+    };
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      clearTimeout(timerRef.current);
+    };
+  }, []);
+  return screenSize;
+};
+exports.useDimensions = useDimensions;
+//# sourceMappingURL=useDimensions.web.js.map

package/lib/commonjs/hooks/useDimensions.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","useDimensions","timerRef","useRef","screenSize","setScreenSize","useState","width","window","innerWidth","height","innerHeight","useEffect","handleResize","clearTimeout","current","setTimeout","addEventListener","removeEventListener","exports"],"sourceRoot":"../../../src","sources":["hooks/useDimensions.web.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAGO,MAAMC,aAAa,GAAGA,CAAA,KAAkB;EAC3C,MAAMC,QAAQ,GAAG,IAAAC,aAAM,EAAgC,CAAC;EACxD,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAC,eAAQ,EAAa;IACrDC,KAAK,EAAEC,MAAM,CAACC,UAAU;IACxBC,MAAM,EAAEF,MAAM,CAACG;EACnB,CAAC,CAAC;EAEF,IAAAC,gBAAS,EAAC,MAAM;IACZ,MAAMC,YAAY,GAAGA,CAAA,KAAM;MACvBC,YAAY,CAACZ,QAAQ,CAACa,OAAO,CAAC;MAE9Bb,QAAQ,CAACa,OAAO,GAAGC,UAAU,CAAC,MAAMX,aAAa,CAAC;QAC9CE,KAAK,EAAEC,MAAM,CAACC,UAAU;QACxBC,MAAM,EAAEF,MAAM,CAACG;MACnB,CAAC,CAAC,EAAE,GAAG,CAAC;IACZ,CAAC;IAEDH,MAAM,CAACS,gBAAgB,CAAC,QAAQ,EAAEJ,YAAY,CAAC;IAE/C,OAAO,MAAM;MACTL,MAAM,CAACU,mBAAmB,CAAC,QAAQ,EAAEL,YAAY,CAAC;MAClDC,YAAY,CAACZ,QAAQ,CAACa,OAAO,CAAC;IAClC,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOX,UAAU;AACrB,CAAC;AAAAe,OAAA,CAAAlB,aAAA,GAAAA,aAAA"}

package/lib/commonjs/utils/styles.js

@@ -56,15 +56,25 @@ const proxifyFunction = (fn, breakpoint, screenSize, breakpoints) => new Proxy(f
  * // { fontSize: '12px' }
  */
 exports.proxifyFunction = proxifyFunction;
-const parseStyle = (style, breakpoint, screenSize, breakpoints) => Object.fromEntries(Object.entries(style).map(_ref => {
-  let [key, value] = _ref;
-  const isDynamicFunction = typeof value === 'function';
-  const isValidStyle = typeof value !== 'object' || key === 'transform';
-  if (isDynamicFunction || isValidStyle) {
-    return [key, value];
-  }
-  const valueWithBreakpoint = value;
-  return [key, (0, _breakpoints.getValueForBreakpoint)(valueWithBreakpoint, breakpoint, screenSize, breakpoints)];
-}));
+const parseStyle = (style, breakpoint, screenSize, breakpoints) => {
+  const entries = Object.entries(style);
+  return Object.fromEntries(entries.map(_ref => {
+    let [key, value] = _ref;
+    const isNestedStyle = key === 'shadowOffset';
+    if (isNestedStyle) {
+      return [key, parseStyle(value, breakpoint, screenSize, breakpoints)];
+    }
+    const isTransform = key === 'transform';
+    if (isTransform && Array.isArray(value)) {
+      return [key, value.map(value => parseStyle(value, breakpoint, screenSize, breakpoints))];
+    }
+    const isDynamicFunction = typeof value === 'function';
+    const isValidStyle = typeof value !== 'object';
+    if (isDynamicFunction || isValidStyle) {
+      return [key, value];
+    }
+    return [key, (0, _breakpoints.getValueForBreakpoint)(value, breakpoint, screenSize, breakpoints)];
+  }));
+};
 exports.parseStyle = parseStyle;
 //# sourceMappingURL=styles.js.map

package/lib/commonjs/utils/styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["_breakpoints","require","proxifyFunction","fn","breakpoint","screenSize","breakpoints","Proxy","apply","target","thisArg","argumentsList","parseStyle","exports","style","Object","fromEntries","entries","map","_ref","key","value","isDynamicFunction","isValidStyle","valueWithBreakpoint","getValueForBreakpoint"],"sourceRoot":"../../../src","sources":["utils/styles.ts"],"mappings":";;;;;;AACA,IAAAA,YAAA,GAAAC,OAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,eAAe,GAAGA,CAC3BC,EAAY,EAAEC,UAA4B,EAC1CC,UAAsB,EACtBC,WAAc,KACH,IAAIC,KAAK,CAACJ,EAAE,EAAE;EACzBK,KAAK,EAAEA,CAACC,MAAM,EAAEC,OAAO,EAAEC,aAAa,KAClCC,UAAU,CAACH,MAAM,CAACD,KAAK,CAACE,OAAO,EAAEC,aAAa,CAAC,EAAEP,UAAU,EAAEC,UAAU,EAAEC,WAAW;AAC5F,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAxBAO,OAAA,CAAAX,eAAA,GAAAA,eAAA;AAyBO,MAAMU,UAAU,GAAGA,CACtBE,KAA8B,EAC9BV,UAA4B,EAC5BC,UAAsB,EACtBC,WAAc,KACbS,MAAM,CACNC,WAAW,CAACD,MAAM,CACdE,OAAO,CAACH,KAAK,CAAC,CACdI,GAAG,CAACC,IAAA,IAAkB;EAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;EACd,MAAMG,iBAAiB,GAAG,OAAOD,KAAK,KAAK,UAAU;EACrD,MAAME,YAAY,GAAG,OAAOF,KAAK,KAAK,QAAQ,IAAID,GAAG,KAAK,WAAW;EAErE,IAAIE,iBAAiB,IAAIC,YAAY,EAAE;IACnC,OAAO,CAACH,GAAG,EAAEC,KAAK,CAAC;EACvB;EAEA,MAAMG,mBAAmB,GAAGH,KAAkD;EAE9E,OAAO,CAACD,GAAG,EAAE,IAAAK,kCAAqB,EAAID,mBAAmB,EAAEpB,UAAU,EAAEC,UAAU,EAAEC,WAAW,CAAC,CAAC;AACpG,CAAC,CACL,CAAC;AAAAO,OAAA,CAAAD,UAAA,GAAAA,UAAA"}
+{"version":3,"names":["_breakpoints","require","proxifyFunction","fn","breakpoint","screenSize","breakpoints","Proxy","apply","target","thisArg","argumentsList","parseStyle","exports","style","entries","Object","fromEntries","map","_ref","key","value","isNestedStyle","isTransform","Array","isArray","isDynamicFunction","isValidStyle","getValueForBreakpoint"],"sourceRoot":"../../../src","sources":["utils/styles.ts"],"mappings":";;;;;;AACA,IAAAA,YAAA,GAAAC,OAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,eAAe,GAAGA,CAC3BC,EAAY,EAAEC,UAA4B,EAC1CC,UAAsB,EACtBC,WAAc,KACH,IAAIC,KAAK,CAACJ,EAAE,EAAE;EACzBK,KAAK,EAAEA,CAACC,MAAM,EAAEC,OAAO,EAAEC,aAAa,KAClCC,UAAU,CAACH,MAAM,CAACD,KAAK,CAACE,OAAO,EAAEC,aAAa,CAAC,EAAEP,UAAU,EAAEC,UAAU,EAAEC,WAAW;AAC5F,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAxBAO,OAAA,CAAAX,eAAA,GAAAA,eAAA;AAyBO,MAAMU,UAAU,GAAGA,CACtBE,KAA8B,EAC9BV,UAA4B,EAC5BC,UAAsB,EACtBC,WAAc,KACV;EACJ,MAAMS,OAAO,GAAGC,MAAM,CAACD,OAAO,CAACD,KAAK,CAGnC;EAED,OAAOE,MAAM,CACRC,WAAW,CAACF,OAAO,CACfG,GAAG,CAACC,IAAA,IAAkB;IAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;IACd,MAAMG,aAAa,GAAGF,GAAG,KAAK,cAAc;IAE5C,IAAIE,aAAa,EAAE;MACf,OAAO,CACHF,GAAG,EACHR,UAAU,CAACS,KAAK,EAA6BjB,UAAU,EAAEC,UAAU,EAAEC,WAAW,CAAC,CACpF;IACL;IAEA,MAAMiB,WAAW,GAAGH,GAAG,KAAK,WAAW;IAEvC,IAAIG,WAAW,IAAIC,KAAK,CAACC,OAAO,CAACJ,KAAK,CAAC,EAAE;MACrC,OAAO,CACHD,GAAG,EACHC,KAAK,CAACH,GAAG,CAACG,KAAK,IAAIT,UAAU,CAACS,KAAK,EAAEjB,UAAU,EAAEC,UAAU,EAAEC,WAAW,CAAC,CAAC,CAC7E;IACL;IAEA,MAAMoB,iBAAiB,GAAG,OAAOL,KAAK,KAAK,UAAU;IACrD,MAAMM,YAAY,GAAG,OAAON,KAAK,KAAK,QAAQ;IAE9C,IAAIK,iBAAiB,IAAIC,YAAY,EAAE;MACnC,OAAO,CAACP,GAAG,EAAEC,KAAK,CAAC;IACvB;IAEA,OAAO,CACHD,GAAG,EACH,IAAAQ,kCAAqB,EACjBP,KAAK,EACLjB,UAAU,EACVC,UAAU,EACVC,WACJ,CAAC,CACJ;EACL,CAAC,CACL,CAAC;AACT,CAAC;AAAAO,OAAA,CAAAD,UAAA,GAAAA,UAAA"}