react-native-unistyles 1.0.0-beta.3 → 1.0.0-beta.5

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,21 +5,32 @@ 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");
+var _utils = require("./utils");
 const createUnistyles = breakpoints => {
   const sortedBreakpoints = (0, _utils.sortAndValidateBreakpoints)(breakpoints);
+  const sortedBreakpointEntries = Object.entries(sortedBreakpoints);
   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, _hooks.useDimensions)();
-      const breakpoint = (0, _utils.getBreakpointFromScreenWidth)(dimensions.width, sortedBreakpoints);
-      const screenSize = {
-        width: dimensions.width,
-        height: dimensions.height
-      };
+      const screenSize = (0, _hooks.useDimensions)();
       if (!stylesheet) {
         return {
           theme,
@@ -27,19 +38,20 @@ const createUnistyles = breakpoints => {
         };
       }
       const parsedStyles = typeof stylesheet === 'function' ? stylesheet(theme) : stylesheet;
+      const breakpoint = (0, _utils.getBreakpointFromScreenWidth)(screenSize.width, sortedBreakpointEntries);
       const dynamicStyleSheet = Object.entries(parsedStyles).reduce((acc, _ref) => {
         let [key, value] = _ref;
-        const x = value;
+        const style = value;
         if (typeof value === 'function') {
           return {
             ...acc,
-            [key]: (0, _utils.proxifyFunction)(value, breakpoint, screenSize, sortedBreakpoints)
+            [key]: (0, _utils.proxifyFunction)(value, breakpoint, screenSize, sortedBreakpointEntries)
           };
         }
-        return {
+        return _reactNative.StyleSheet.create({
           ...acc,
-          [key]: (0, _utils.parseStyle)(x, breakpoint, screenSize, sortedBreakpoints)
-        };
+          [key]: (0, _utils.parseStyle)(style, breakpoint, screenSize, sortedBreakpointEntries)
+        });
       }, {});
       return {
         theme,

package/lib/commonjs/createUnistyles.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_UnistylesTheme","_utils","_hooks","createUnistyles","breakpoints","sortedBreakpoints","sortAndValidateBreakpoints","createStyles","styles","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,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,oBAAa,EAAC,CAAC;MAClC,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","_reactNative","_UnistylesTheme","_hooks","_utils","createUnistyles","breakpoints","sortedBreakpoints","sortAndValidateBreakpoints","sortedBreakpointEntries","Object","entries","createStyles","styles","createStyleSheet","useStyles","stylesheet","theme","useContext","UnistylesContext","screenSize","useDimensions","parsedStyles","breakpoint","getBreakpointFromScreenWidth","width","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;IACH;AACR;AACA;IACQK,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;MAElC,IAAI,CAACL,UAAU,EAAE;QACb,OAAO;UACHC,KAAK;UACLJ,MAAM,EAAE,CAAC;QACb,CAAC;MACL;MAEA,MAAMS,YAAY,GAAG,OAAON,UAAU,KAAK,UAAU,GAC/CA,UAAU,CAACC,KAAK,CAAC,GACjBD,UAAU;MAChB,MAAMO,UAAU,GAAG,IAAAC,mCAA4B,EAAIJ,UAAU,CAACK,KAAK,EAAEhB,uBAAuB,CAAC;MAE7F,MAAMiB,iBAAiB,GAAGhB,MAAM,CAC3BC,OAAO,CAACW,YAAY,CAAC,CACrBK,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,EAAER,UAAU,EAAEH,UAAU,EAAEX,uBAAuB;UACpF,CAAC;QACL;QAEA,OAAOyB,uBAAU,CAACC,MAAM,CAAC;UACrB,GAAGP,GAAG;UACN,CAACE,GAAG,GAAG,IAAAM,iBAAU,EAAQJ,KAAK,EAAET,UAAU,EAAEH,UAAU,EAAEX,uBAAuB;QACnF,CAAC,CAAC;MACN,CAAC,EAAE,CAAC,CAAO,CAAC;MAEhB,OAAO;QACHQ,KAAK;QACLJ,MAAM,EAAEa;MACZ,CAAC;IACL;EACJ,CAAC;AACL,CAAC;AAAAW,OAAA,CAAAhC,eAAA,GAAAA,eAAA"}

package/lib/commonjs/mediaQueries.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=mediaQueries.js.map

package/lib/commonjs/mediaQueries.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["mediaQueries.ts"],"mappings":""}

package/lib/commonjs/utils/breakpoints.js

@@ -51,7 +51,7 @@ const sortAndValidateBreakpoints = breakpoints => {
  *
  * @template B - An object type where keys are strings and values are numbers representing screen widths.
  * @param {number} width - The screen width to determine the breakpoint for.
- * @param {B} breakpoints - The breakpoints object to use for determination.
+ * @param breakpointEntries - sorted pairs of breakpoints
  * @returns {keyof B & string} The key of the breakpoint that the screen width falls into.
  *
  * @example
@@ -59,8 +59,8 @@ const sortAndValidateBreakpoints = breakpoints => {
  * getBreakpointFromScreenWidth(800, breakpoints) // returns 'md'
  */
 exports.sortAndValidateBreakpoints = sortAndValidateBreakpoints;
-const getBreakpointFromScreenWidth = (width, breakpoints) => {
-  const [key] = Object.entries(breakpoints).find((_ref, index, otherBreakpoints) => {
+const getBreakpointFromScreenWidth = (width, breakpointEntries) => {
+  const [key] = breakpointEntries.find((_ref, index, otherBreakpoints) => {
     let [, value] = _ref;
     const minVal = value;
     const maxVal = otherBreakpoints[index + 1]?.[1];
@@ -84,7 +84,7 @@ const getBreakpointFromScreenWidth = (width, breakpoints) => {
  * @param {Record<keyof B & string, string | number>} value - An object containing values associated with breakpoints or custom media queries.
  * @param {keyof B & string} breakpoint - The breakpoint name to check against.
  * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
- * @param {B} breakpoints - An object representing the defined breakpoints.
+ * @param breakpointPairs - sorted pairs of breakpoints
  *
  * @returns {string | number | undefined} Returns the value associated with the matching breakpoint or custom media query, or `undefined` if no match is found.
  *
@@ -97,7 +97,7 @@ const getBreakpointFromScreenWidth = (width, breakpoints) => {
  * getValueForBreakpoint(values, 'sm', screenSize, breakpoints); // 'value1'
  */
 exports.getBreakpointFromScreenWidth = getBreakpointFromScreenWidth;
-const getValueForBreakpoint = (value, breakpoint, screenSize, breakpoints) => {
+const getValueForBreakpoint = (value, breakpoint, screenSize, breakpointPairs) => {
   // the highest priority is for custom media queries
   const customMediaQueries = Object.entries(value).filter(_ref2 => {
     let [key] = _ref2;
@@ -118,22 +118,18 @@ const getValueForBreakpoint = (value, breakpoint, screenSize, breakpoints) => {
   }
 
   // there is no direct hit for breakpoint nor media-query, so let's simulate CSS cascading
-  const allBreakpoints = Object.entries(breakpoints).map(_ref3 => {
-    let [key, bpValue] = _ref3;
-    return [key.toLowerCase(), bpValue];
-  });
-  const currentBreakpoint = allBreakpoints.findIndex(_ref4 => {
-    let [key] = _ref4;
+  const currentBreakpoint = breakpointPairs.findIndex(_ref3 => {
+    let [key] = _ref3;
     return key === unifiedKey;
   });
-  const availableBreakpoints = allBreakpoints.filter((_ref5, index) => {
-    let [key] = _ref5;
+  const availableBreakpoints = breakpointPairs.filter((_ref4, index) => {
+    let [key] = _ref4;
     return index < currentBreakpoint && key && key in value;
-  }).map(_ref6 => {
-    let [key] = _ref6;
+  }).map(_ref5 => {
+    let [key] = _ref5;
     return key;
   });
-  return allBreakpoints.length > 0 ? value[availableBreakpoints[availableBreakpoints.length - 1]] : undefined;
+  return breakpointPairs.length > 0 ? value[availableBreakpoints[availableBreakpoints.length - 1]] : undefined;
 };
 exports.getValueForBreakpoint = getValueForBreakpoint;
 //# sourceMappingURL=breakpoints.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_common","require","_mediaQueries","sortAndValidateBreakpoints","breakpoints","sortedPairs","Object","entries","sort","breakpoint1","breakpoint2","value1","value2","sortedBreakpoints","freeze","fromEntries","breakpointValues","values","firstBreakpoint","throwError","length","Set","size","exports","getBreakpointFromScreenWidth","width","key","find","_ref","index","otherBreakpoints","value","minVal","maxVal","getValueForBreakpoint","breakpoint","screenSize","customMediaQueries","filter","_ref2","isMediaQuery","customMediaQueryKey","getKeyForCustomMediaQuery","unifiedKey","toLowerCase","directBreakpoint","allBreakpoints","map","_ref3","bpValue","currentBreakpoint","findIndex","_ref4","availableBreakpoints","_ref5","_ref6","undefined"],"sourceRoot":"../../../src","sources":["utils/breakpoints.ts"],"mappings":"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"}
+{"version":3,"names":["_common","require","_mediaQueries","sortAndValidateBreakpoints","breakpoints","sortedPairs","Object","entries","sort","breakpoint1","breakpoint2","value1","value2","sortedBreakpoints","freeze","fromEntries","breakpointValues","values","firstBreakpoint","throwError","length","Set","size","exports","getBreakpointFromScreenWidth","width","breakpointEntries","key","find","_ref","index","otherBreakpoints","value","minVal","maxVal","getValueForBreakpoint","breakpoint","screenSize","breakpointPairs","customMediaQueries","filter","_ref2","isMediaQuery","customMediaQueryKey","getKeyForCustomMediaQuery","unifiedKey","toLowerCase","directBreakpoint","currentBreakpoint","findIndex","_ref3","availableBreakpoints","_ref4","map","_ref5","undefined"],"sourceRoot":"../../../src","sources":["utils/breakpoints.ts"],"mappings":";;;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AAEA,IAAAC,aAAA,GAAAD,OAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAME,0BAA0B,GAA2BC,WAAc,IAAQ;EACpF,MAAMC,WAAW,GAAGC,MAAM,CACrBC,OAAO,CAACH,WAAW,CAAC,CACpBI,IAAI,CAAC,CAACC,WAAW,EAAEC,WAAW,KAAK;IAChC,MAAM,GAAGC,MAAM,CAAC,GAAGF,WAAW;IAC9B,MAAM,GAAGG,MAAM,CAAC,GAAGF,WAAW;IAE9B,OAAOC,MAAM,GAAGC,MAAM;EAC1B,CAAC,CAAC;EAEN,MAAMC,iBAAiB,GAAIP,MAAM,CAACQ,MAAM,CAACR,MAAM,CAACS,WAAW,CAACV,WAAW,CAAC,CAAM;EAC9E,MAAMW,gBAAgB,GAAGV,MAAM,CAACW,MAAM,CAACJ,iBAAiB,CAAC;EACzD,MAAM,CAACK,eAAe,CAAC,GAAGF,gBAAgB;EAE1C,IAAIE,eAAe,KAAK,CAAC,EAAE;IACvB,IAAAC,kBAAU,EAAC,oCAAoC,CAAC;EACpD;EAEA,IAAIH,gBAAgB,CAACI,MAAM,KAAK,IAAIC,GAAG,CAACL,gBAAgB,CAAC,CAACM,IAAI,EAAE;IAC5D,IAAAH,kBAAU,EAAC,kCAAkC,CAAC;EAClD;EAEA,OAAON,iBAAiB;AAC5B,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAdAU,OAAA,CAAApB,0BAAA,GAAAA,0BAAA;AAeO,MAAMqB,4BAA4B,GAAGA,CAAwBC,KAAa,EAAEC,iBAA6C,KAAuB;EACnJ,MAAM,CAACC,GAAG,CAAC,GAAGD,iBAAiB,CAC1BE,IAAI,CAAC,CAAAC,IAAA,EAAYC,KAAK,EAAEC,gBAAgB,KAAK;IAAA,IAAvC,GAAGC,KAAK,CAAC,GAAAH,IAAA;IACZ,MAAMI,MAAM,GAAGD,KAAK;IACpB,MAAME,MAAM,GAAGH,gBAAgB,CAACD,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;IAE/C,IAAI,CAACI,MAAM,EAAE;MACT,OAAO,IAAI;IACf;IAEA,OAAOT,KAAK,IAAIQ,MAAM,IAAIR,KAAK,GAAGS,MAAM;EAC5C,CAAC,CAA+B;EAEpC,OAAOP,GAAG;AACd,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAvBAJ,OAAA,CAAAC,4BAAA,GAAAA,4BAAA;AAwBO,MAAMW,qBAAqB,GAAGA,CACjCH,KAA4D,EAC5DI,UAA4B,EAC5BC,UAAsB,EACtBC,eAA2C,KACb;EAC9B;EACA,MAAMC,kBAAkB,GAAGjC,MAAM,CAC5BC,OAAO,CAACyB,KAAK,CAAC,CACdQ,MAAM,CAACC,KAAA;IAAA,IAAC,CAACd,GAAG,CAAC,GAAAc,KAAA;IAAA,OAAK,IAAAC,0BAAY,EAACf,GAAG,CAAC;EAAA,EAAC;EACzC,MAAMgB,mBAAmB,GAAG,IAAAC,uCAAyB,EAACL,kBAAkB,EAAEF,UAAU,CAAC;EAErF,IAAIM,mBAAmB,IAAIA,mBAAmB,IAAIX,KAAK,EAAE;IACrD,OAAOA,KAAK,CAACW,mBAAmB,CAAC;EACrC;;EAEA;EACA,MAAME,UAAU,GAAGT,UAAU,CAACU,WAAW,CAAC,CAAC;EAC3C,MAAMC,gBAAgB,GAAGf,KAAK,CAACa,UAAU,CAAC;;EAE1C;EACA,IAAIE,gBAAgB,IAAKF,UAAU,IAAIb,KAAM,EAAE;IAC3C,OAAOe,gBAAgB;EAC3B;;EAEA;EACA,MAAMC,iBAAiB,GAAGV,eAAe,CACpCW,SAAS,CAACC,KAAA;IAAA,IAAC,CAACvB,GAAG,CAAC,GAAAuB,KAAA;IAAA,OAAKvB,GAAG,KAAKkB,UAAU;EAAA,EAAC;EAE7C,MAAMM,oBAAoB,GAAGb,eAAe,CACvCE,MAAM,CAAC,CAAAY,KAAA,EAAQtB,KAAK;IAAA,IAAZ,CAACH,GAAG,CAAC,GAAAyB,KAAA;IAAA,OAAYtB,KAAK,GAAGkB,iBAAiB,IAAIrB,GAAG,IAAIA,GAAG,IAAIK,KAAK;EAAA,EAAC,CAC1EqB,GAAG,CAACC,KAAA;IAAA,IAAC,CAAC3B,GAAG,CAAC,GAAA2B,KAAA;IAAA,OAAK3B,GAAG;EAAA,EAAC;EAExB,OAAOW,eAAe,CAAClB,MAAM,GAAG,CAAC,GAC3BY,KAAK,CAACmB,oBAAoB,CAACA,oBAAoB,CAAC/B,MAAM,GAAG,CAAC,CAAC,CAAqB,GAChFmC,SAAS;AACnB,CAAC;AAAAhC,OAAA,CAAAY,qBAAA,GAAAA,qBAAA"}