react-native-unistyles 1.0.0-beta.6 → 1.0.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/README.md +6 -588
  2. package/lib/commonjs/createUnistyles.js +0 -9
  3. package/lib/commonjs/createUnistyles.js.map +1 -1
  4. package/lib/commonjs/utils/index.js +43 -0
  5. package/lib/commonjs/utils/index.js.map +1 -1
  6. package/lib/module/createUnistyles.js +0 -9
  7. package/lib/module/createUnistyles.js.map +1 -1
  8. package/lib/module/utils/index.js +2 -1
  9. package/lib/module/utils/index.js.map +1 -1
  10. package/lib/typescript/src/createUnistyles.d.ts +1 -5
  11. package/lib/typescript/src/createUnistyles.d.ts.map +1 -1
  12. package/lib/typescript/src/utils/index.d.ts +2 -1
  13. package/lib/typescript/src/utils/index.d.ts.map +1 -1
  14. package/package.json +13 -10
  15. package/src/__tests__/createUnistyles.spec.tsx +158 -0
  16. package/src/createUnistyles.ts +0 -10
  17. package/src/utils/index.ts +9 -1
  18. package/lib/commonjs/utils/breakpoints.spec.js +0 -154
  19. package/lib/commonjs/utils/breakpoints.spec.js.map +0 -1
  20. package/lib/commonjs/utils/mediaQueries.spec.js +0 -220
  21. package/lib/commonjs/utils/mediaQueries.spec.js.map +0 -1
  22. package/lib/commonjs/utils/styles.spec.js +0 -174
  23. package/lib/commonjs/utils/styles.spec.js.map +0 -1
  24. package/lib/module/utils/breakpoints.spec.js +0 -152
  25. package/lib/module/utils/breakpoints.spec.js.map +0 -1
  26. package/lib/module/utils/mediaQueries.spec.js +0 -218
  27. package/lib/module/utils/mediaQueries.spec.js.map +0 -1
  28. package/lib/module/utils/styles.spec.js +0 -172
  29. package/lib/module/utils/styles.spec.js.map +0 -1
  30. package/lib/typescript/src/utils/breakpoints.spec.d.ts +0 -2
  31. package/lib/typescript/src/utils/breakpoints.spec.d.ts.map +0 -1
  32. package/lib/typescript/src/utils/mediaQueries.spec.d.ts +0 -2
  33. package/lib/typescript/src/utils/mediaQueries.spec.d.ts.map +0 -1
  34. package/lib/typescript/src/utils/styles.spec.d.ts +0 -2
  35. package/lib/typescript/src/utils/styles.spec.d.ts.map +0 -1
package/README.md CHANGED
@@ -18,602 +18,20 @@
18
18
 
19
19
  *-based on this [benchmark](https://github.com/efstathiosntonas/react-native-style-libraries-benchmark)
20
20
 
21
- ## Beta
22
-
23
- This project is currently in its beta phase. While it hasn't reached version 1.0.0 yet, it's been tested and proven in a large-scale application, performing flawlessly across hundreds screens and components.
24
-
25
- I'm looking for testers to check the typings, scalability and overall usability for your monorepo projects.
26
-
27
- Suggestions, ideas, and potential improvements are always welcome!
28
-
29
- ## Setup
30
-
31
- **1. Install library**
21
+ ## Installation
32
22
 
33
23
  ```cmd
34
24
  yarn add react-native-unistyles
35
25
  ```
36
26
 
37
- **2. Define your theme**
38
-
39
- You don't have to follow a specific format. Just make an object and add any keys/values you like.
40
-
41
- ```ts
42
- // theme.ts
43
- export const theme = {
44
- colors: {
45
- blood: '#eb4d4b',
46
- barbie: '#e056fd',
47
- pumpkin: '#f0932b',
48
- background: '#ffffff'
49
- },
50
- margins: {
51
- sm: 2,
52
- md: 4,
53
- lg: 8,
54
- xl: 12
55
- }
56
- }
57
- ```
58
-
59
- or something more advanced with nested objects / functions:
60
-
61
- ```ts
62
- // theme.ts
63
- export const theme = {
64
- colors: {
65
- blood: '#eb4d4b',
66
- barbie: '#e056fd',
67
- pumpkin: '#f0932b',
68
- background: '#ffffff'
69
- },
70
- components: {
71
- typography: {
72
- bold: {
73
- fontWeight: 'bold'
74
- },
75
- thin: {
76
- fontWeight: '300'
77
- }
78
- }
79
- },
80
- margins: {
81
- sm: 2,
82
- md: 4,
83
- lg: 8,
84
- xl: 12
85
- },
86
- utils: {
87
- hexToRGBA: (hex: string, opacity: number) => {
88
- const rgb = hex
89
- .replace('#', '')
90
- .split(/(?=(?:..)*$)/)
91
- .map(x => parseInt(x, 16))
92
- return `rgba(${rgb.at(0)}, ${rgb.at(1)}, ${rgb.at(2)}, ${opacity})`
93
- }
94
- }
95
- }
96
- ```
97
- **3. Create breakpoints**
98
-
99
- There are no predefined breakpoints. You can name them anything. Just make an object with string keys and number values.
100
-
101
- ```ts
102
- // breakpoints.ts
103
- export const breakpoints = {
104
- xs: 0,
105
- sm: 576,
106
- md: 768,
107
- lg: 992,
108
- xl: 1200,
109
- superLarge: 2000,
110
- tvLike: 4000
111
- }
112
- ```
113
-
114
- **4. Wrap your app with UnistylesTheme to inject theme**
115
-
116
- ```tsx
117
- import React from 'react'
118
- import { UnistylesTheme } from 'react-native-unistyles'
119
- import { theme } from './theme'
120
-
121
- export const App: React.FunctionComponent = () => (
122
- <UnistylesTheme theme={theme}>
123
- // Your App
124
- </UnistylesTheme>
125
- )
126
- ```
127
-
128
- **5. Access createStyleSheet and useStyles with a factory**
129
-
130
- ```ts
131
- // styles.ts
132
-
133
- // import library factory
134
- import { createUnistyles } from 'react-native-unistyles'
135
- // import your breakpoints, add whatever keys and numeric values you want
136
- import { breakpoints } from './breakpoints'
137
- // import your app's theme TypeScript type, or simply use 'typeof theme'
138
- import { theme } from './theme'
139
-
140
- export const {
141
- createStyleSheet,
142
- useStyles,
143
- } = createUnistyles<typeof breakpoints, typeof theme>(breakpoints)
144
- ```
145
-
146
- ## Basic Usage
147
-
148
- After the initial setup, you only need to focus on two functions responsible for your styles:
149
- - `createStyleSheet` which replaces `StyleSheet.create`
150
- - `useStyles` which parses your styles and ensures TypeScript compatibility with media queries and breakpoints
151
-
152
- ```tsx
153
- import React from 'react'
154
- import { View, Text } from 'react-native'
155
- // access createStyleSheet and useStyles exported from factory
156
- import { createStyleSheet, useStyles } from 'lib/styles'
157
-
158
- export const ExampleUnistyles = () => {
159
- const { styles } = useStyles(stylesheet)
160
-
161
- return (
162
- <View style={styles.container}>
163
- <Text style={styles.text}>
164
- Unistyles example
165
- </Text>
166
- </View>
167
- )
168
- }
169
-
170
- const stylesheet = createStyleSheet(theme => ({
171
- container: {
172
- flex: 1,
173
- justifyContent: 'center',
174
- alignItems: 'center',
175
- backgroundColor: theme.colors.background
176
- },
177
- text: {
178
- color: theme.colors.typography
179
- }
180
- }))
181
- ```
182
-
183
- ## createStyleSheet
184
-
185
- `createStyleSheet` is interchangeable with `StyleSheet.create`. You can use objects, and it will function identically to its React Native counterpart.
186
-
187
- ```ts
188
- const stylesheet = createStyleSheet({
189
- container: {
190
- flex: 1,
191
- justifyContent: 'center',
192
- alignItems: 'center',
193
- },
194
- })
195
- ```
196
- The difference is that you can now use breakpoints and media queries:
197
-
198
- ```ts
199
- const stylesheet = createStyleSheet({
200
- container: {
201
- flex: 1,
202
- justifyContent: 'center',
203
- alignItems: 'center',
204
- flexDirection: {
205
- xs: 'row',
206
- sm: 'column',
207
- ':w[800]': 'row'
208
- }
209
- },
210
- })
211
- ```
212
-
213
- `createStyleSheet` also accepts a function, to which the library will inject your theme:
214
-
215
- ```ts
216
- const stylesheet = createStyleSheet(theme => ({
217
- container: {
218
- flex: 1,
219
- justifyContent: 'center',
220
- alignItems: 'center',
221
- flexDirection: {
222
- xs: 'row',
223
- sm: 'column',
224
- ':w[800]': 'row'
225
- },
226
- backgroundColor: theme.colors.background
227
- },
228
- }))
229
- ```
230
-
231
- Importantly, you'll receive the same TypeScript hints as with `StyleSheet.create`!
232
-
233
- ## useStyles
234
-
235
- `useStyle` ties everything together and handles the heavy lifting. Without `useStyles`, you can't utilize features like:
236
- - breakpoints
237
- - media queries
238
- - themes
239
-
240
- _useStyles_ allows you to skip the `stylesheet` if you only want to access the `theme`:
241
-
242
- ```tsx
243
- const { theme } = useStyles()
244
- ```
245
-
246
- For more advanced usage, pass your `stylesheet` generated with `createStyleSheet`:
247
-
248
- ```tsx
249
- // you can still access theme
250
- const { styles, theme } = useStyles(stylesheet)
251
- ```
252
-
253
- ## Breakpoints
254
-
255
- Any style can change based on breakpoints. To do this, change a value to an object:
256
-
257
- ```ts
258
- const stylesheet = createStyleSheet(theme => ({
259
- container: {
260
- flex: 1,
261
- justifyContent: 'center',
262
- alignItems: 'center',
263
- backgroundColor: {
264
- // your breakpoints
265
- xs: theme.colors.background,
266
- sm: theme.colors.barbie
267
- }
268
- },
269
- text: {
270
- color: theme.colors.typography
271
- }
272
- }))
273
- ```
274
-
275
- You can even use it with nested objects like `transform` or `shadowOffset`:
276
-
277
- ```ts
278
- const stylesheet = createStyleSheet(theme => ({
279
- container: {
280
- flex: 1,
281
- justifyContent: 'center',
282
- alignItems: 'center',
283
- backgroundColor: {
284
- xs: theme.colors.background,
285
- sm: theme.colors.barbie
286
- },
287
- transform: [
288
- {
289
- translateX: 100
290
- },
291
- {
292
- scale: {
293
- xs: 1.5,
294
- ':w[500]': 1
295
- }
296
- }
297
- ]
298
- }
299
- }))
300
- ```
301
-
302
- Library will choose the correct value (based on screen width) in the runtime.
303
-
304
- ## Media queries
305
-
306
- For more advanced usage and pixel perfect designs you can also use a custom media queries. Library supports 4 types of media queries (w-width, h-height):
307
-
308
- ```ts
309
- :w[200, 500] - with upper and lower bounds, it translates to width from 200-500px
310
- :w[, 800] - with upper bound only, it's equal to width from 0-800px
311
- :h[400] - lower bound only, it means height from 400px
312
- :h[200, 300]:w[500] - combined queries for both width and height
313
- ```
314
-
315
- Media queries can be mixed with breakpoints, but have a bigger priority:
316
-
317
- ```tsx
318
- const stylesheet = createStyleSheet(theme => ({
319
- container: {
320
- justifyContent: 'center',
321
- alignItems: 'center',
322
- flexDirection: {
323
- xs: 'column',
324
- sm: 'row',
325
- },
326
- backgroundColor: {
327
- md: theme.colors.background,
328
- // even though md might overlap with >600px, lib will use 'barbie'
329
- ':w[600]': theme.colors.barbie
330
- }
331
- },
332
- text: {
333
- color: theme.colors.typography
334
- }
335
- }))
336
- ```
337
-
338
- ## Dynamic functions
339
-
340
- Every style can be transformed to dynamic function to take additional parameters from JSX:
341
-
342
- ```tsx
343
- export const ExampleUnistyles = () => {
344
- const { styles } = useStyles(stylesheet)
345
-
346
- return (
347
- <ScrollView contentContainerStyle={styles.scrollContainer}>
348
- {posts.map((post, index) => (
349
- <View
350
- key={post.key}
351
- // call it as regular function
352
- style={styles.post(index)}
353
- >
354
- <Text>
355
- {post.title}
356
- </Text>
357
- </View>
358
- ))}
359
- </ScrollView>
360
- )
361
- }
362
-
363
- const stylesheet = createStyleSheet({
364
- scrollContainer: {
365
- flex: 1,
366
- justifyContent: 'center',
367
- alignItems: 'center',
368
- },
369
- // dynamic function
370
- post: (index: number) => ({
371
- backgroundColor: index % 2 === 0 ? 'gold' : 'silver',
372
- })
373
- })
374
- ```
375
- If you use a dynamic function, library will wrap it in a `Proxy` to make sure the correct values of breakpoints will be used:
376
-
377
- ```ts
378
- const stylesheet = createStyleSheet(theme => ({
379
- scrollContainer: {
380
- flex: 1,
381
- justifyContent: 'center',
382
- alignItems: 'center',
383
- },
384
- post: (index: number) => ({
385
- // breakpoints and media queries works with dynamic function
386
- backgroundColor: {
387
- xs: index % 2 === 0
388
- ? theme.colors.gold
389
- : theme.colors.silver,
390
- sm: theme.colors.red
391
- }
392
- })
393
- }))
394
- ```
395
-
396
- ## Dynamic themes
397
-
398
- 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:
399
-
400
- To promote reusability and maintainability, it's a good practice to share as many values between themes as possible:
401
-
402
- ```ts
403
- // move shared colors to object
404
- const sharedColors = {
405
- barbie: '#ff9ff3',
406
- oak: '#1dd1a1',
407
- sky: '#48dbfb',
408
- fog: '#c8d6e5',
409
- aloes: '#00d2d3'
410
- }
411
-
412
- export const lightTheme = {
413
- colors: {
414
- // reuse or override them
415
- ...sharedColors,
416
- backgroundColor: '#ffffff',
417
- typography: '#000000'
418
- }
419
- // other keys in common with darkTheme
420
- }
421
-
422
- export const darkTheme = {
423
- colors: {
424
- // reuse or override them
425
- ...sharedColors,
426
- backgroundColor: '#000000',
427
- typography: '#ffffff'
428
- }
429
- // other keys in common with lightTheme
430
- }
431
-
432
- // export type that will be used to describe your theme
433
- export type AppTheme = typeof lightTheme | typeof darkTheme
434
- ```
435
-
436
- With the themes set up, modify your `createUnistyles` to consume your `AppTheme` type:
437
-
438
- ```ts
439
- export const { useStyles, createStyleSheet } = createUnistyles<typeof breakpoints, AppTheme>(breakpoints)
440
- ```
441
-
442
- The final step is to switch your theme based on certain states, persisted values, databases, etc.:
443
-
444
- ```tsx
445
- export const App: React.FunctionComponent = () => {
446
- // obtain here your dark or light theme. It can be storage, state, mmkv, or whateber you use
447
- // const [yourAppTheme] = useState(lightTheme)
448
- // const [yourAppTheme] = useYourStorage()
449
- // const [yourAppTheme] = useMMKVObject<AppTheme>(Theme)
450
-
451
- // switching theme will re-render your stylesheets automatically
452
- return (
453
- <UnistylesTheme theme={yourAppTheme}>
454
- <Examples.Extreme />
455
- </UnistylesTheme>
456
- )
457
- }
458
- ```
459
-
460
- ## Variants
461
-
462
- `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.
463
-
464
- Let's examine variants for the `Text` component. Imagine you want to create several variants for your `Typography` components:
465
- - Heading
466
- - Regular
467
- - Thin
468
-
469
- To achieve this, add variants to your theme:
470
-
471
- ```ts
472
- export const lightTheme = {
473
- colors: {
474
- ...sharedColors,
475
- backgroundColor: '#ffffff',
476
- typography: '#000000'
477
- },
478
- components: {
479
- typography: {
480
- base: {
481
- fontFamily: 'Roboto',
482
- fontSize: 12,
483
- },
484
- heading: {
485
- fontFamily: 'Roboto-Medium',
486
- fontSize: 24,
487
- },
488
- regular: {
489
- fontFamily: 'Roboto',
490
- fontSize: 12,
491
- },
492
- thin: {
493
- fontFamily: 'Roboto-Thin',
494
- fontSize: 12,
495
- },
496
- bold: {
497
- fontWeight: 'bold'
498
- }
499
- }
500
- }
501
- }
502
- ```
503
- Next, create a base component:
504
-
505
- ```tsx
506
- import React from 'react'
507
- import type { PropsWithChildren } from 'react'
508
- import { Text, TextStyle } from 'react-native'
509
- import { createStyleSheet, useStyles } from 'lib/styles'
510
-
511
- interface BaseTextProps extends PropsWithChildren {
512
- bold: boolean,
513
- style: TextStyle
514
- }
515
-
516
- export const BaseText: React.FunctionComponent<BaseTextProps> = ({
517
- children,
518
- bold = false,
519
- style = {}
520
- }) => {
521
- const {styles} = useStyles(stylesheet)
522
-
523
- return (
524
- <Text
525
- style={{
526
- ...styles.baseText,
527
- ...bold
528
- ? styles.baseText
529
- : {},
530
- // pass other styles via props
531
- ...style
532
- }}
533
- >
534
- {children}
535
- </Text>
536
- )
537
- }
538
-
539
- const stylesheet = createStyleSheet(theme => ({
540
- baseText: {
541
- ...theme.components.typography.base
542
- },
543
- bold: {
544
- ...theme.components.typography.bold
545
- }
546
- }))
547
- ```
548
-
549
- Now, let's create another variant, e.g., Heading:
550
-
551
- ```tsx
552
- import React from 'react'
553
- import type { PropsWithChildren } from 'react'
554
- import { Text, TextStyle } from 'react-native'
555
- import { createStyleSheet, useStyles } from 'lib/styles'
556
- import { BaseText } from 'lib/components'
557
-
558
- interface BaseTextProps extends PropsWithChildren {
559
- bold: boolean,
560
- text: string
561
- }
562
-
563
- export const Heading: React.FunctionComponent<BaseTextProps> = ({
564
- text,
565
- bold = false
566
- }) => {
567
- const { theme } = useStyles()
568
-
569
- return (
570
- <BaseText
571
- bold={bold}
572
- style={theme.components.typography.heading}
573
- >
574
- {text}
575
- </BaseText>
576
- )
577
- }
578
- ```
579
- And so on...
580
-
581
- ## Migrate from StyleSheet
582
-
583
- `react-native-unistyles` embraces the simplicity of `StyleSheet`, making it easy to integrate into your project.
584
-
585
- You can replace `StyleSheet.create` with `createStyleSheet` and it will work exactly the same:
586
-
587
- ```diff
588
- -const styles = StyleSheet.create({
589
- +const styles = createStyleSheet({
590
- scrollContainer: {
591
- flex: 1,
592
- justifyContent: 'center',
593
- alignItems: 'center',
594
- }
595
- })
596
- ```
597
-
598
- If you need additional functionalities such as `breakpoints`, `media-queries` or `theme` you can incrementally pass `style(sheet)` into the `useStyles` hook:
599
-
600
- ```ts
601
- export const ExampleUnistyles = () => {
602
- const { styles } = useStyles(stylesheet)
603
- // ... your component code
604
- }
605
- ```
606
-
607
- With the hook in place, you can now use all the features.
608
-
609
- ## Example
610
-
611
- In order to check out working example go to [example/](./example).
27
+ ## [Documentation](https://reactnativeunistyles.vercel.app/)
28
+ - [Start here](https://reactnativeunistyles.vercel.app/start/setup/)
29
+ - [References](https://reactnativeunistyles.vercel.app/reference/create-stylesheet/)
30
+ - [Examples](https://reactnativeunistyles.vercel.app/example/breakpoints/)
612
31
 
613
32
  ## Blog post
614
33
 
615
- For more detailed explanation please refer to my blog post [here](https://www.reactnativecrossroads.com/posts/level-up-react-native-styles).
616
-
34
+ Read about what drove me to create this library in this blog post [here](https://www.reactnativecrossroads.com/posts/level-up-react-native-styles).
617
35
 
618
36
  ## Sponsor my work
619
37
 
@@ -13,15 +13,6 @@ const createUnistyles = breakpoints => {
13
13
  const sortedBreakpoints = (0, _utils.sortAndValidateBreakpoints)(breakpoints);
14
14
  const sortedBreakpointEntries = Object.entries(sortedBreakpoints);
15
15
  return {
16
- /**
17
- * @deprecated The method should not be used, proposed version by the community is createStyleSheet, will be removed in RC
18
- */
19
- createStyles: styles => {
20
- if (typeof styles === 'function') {
21
- return styles;
22
- }
23
- return styles;
24
- },
25
16
  createStyleSheet: styles => {
26
17
  if (typeof styles === 'function') {
27
18
  return styles;
@@ -1 +1 @@
1
- {"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"}
1
+ {"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","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;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;MAElC,IAAI,CAACL,UAAU,EAAE;QACb,OAAO;UACHC,KAAK;UACLH,MAAM,EAAE,CAAC;QACb,CAAC;MACL;MAEA,MAAMQ,YAAY,GAAG,OAAON,UAAU,KAAK,UAAU,GAC/CA,UAAU,CAACC,KAAK,CAAC,GACjBD,UAAU;MAChB,MAAMO,UAAU,GAAG,IAAAC,mCAA4B,EAAIJ,UAAU,CAACK,KAAK,EAAEf,uBAAuB,CAAC;MAE7F,MAAMgB,iBAAiB,GAAGf,MAAM,CAC3BC,OAAO,CAACU,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,EAAEV,uBAAuB;UACpF,CAAC;QACL;QAEA,OAAOwB,uBAAU,CAACC,MAAM,CAAC;UACrB,GAAGP,GAAG;UACN,CAACE,GAAG,GAAG,IAAAM,iBAAU,EAAQJ,KAAK,EAAET,UAAU,EAAEH,UAAU,EAAEV,uBAAuB;QACnF,CAAC,CAAC;MACN,CAAC,EAAE,CAAC,CAAO,CAAC;MAEhB,OAAO;QACHO,KAAK;QACLH,MAAM,EAAEY;MACZ,CAAC;IACL;EACJ,CAAC;AACL,CAAC;AAAAW,OAAA,CAAA/B,eAAA,GAAAA,eAAA"}
@@ -3,12 +3,54 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
+ Object.defineProperty(exports, "extractValues", {
7
+ enumerable: true,
8
+ get: function () {
9
+ return _mediaQueries.extractValues;
10
+ }
11
+ });
6
12
  Object.defineProperty(exports, "getBreakpointFromScreenWidth", {
7
13
  enumerable: true,
8
14
  get: function () {
9
15
  return _breakpoints.getBreakpointFromScreenWidth;
10
16
  }
11
17
  });
18
+ Object.defineProperty(exports, "getKeyForCustomMediaQuery", {
19
+ enumerable: true,
20
+ get: function () {
21
+ return _mediaQueries.getKeyForCustomMediaQuery;
22
+ }
23
+ });
24
+ Object.defineProperty(exports, "getValueForBreakpoint", {
25
+ enumerable: true,
26
+ get: function () {
27
+ return _breakpoints.getValueForBreakpoint;
28
+ }
29
+ });
30
+ Object.defineProperty(exports, "isMediaQuery", {
31
+ enumerable: true,
32
+ get: function () {
33
+ return _mediaQueries.isMediaQuery;
34
+ }
35
+ });
36
+ Object.defineProperty(exports, "isWithinTheHeight", {
37
+ enumerable: true,
38
+ get: function () {
39
+ return _mediaQueries.isWithinTheHeight;
40
+ }
41
+ });
42
+ Object.defineProperty(exports, "isWithinTheWidth", {
43
+ enumerable: true,
44
+ get: function () {
45
+ return _mediaQueries.isWithinTheWidth;
46
+ }
47
+ });
48
+ Object.defineProperty(exports, "isWithinTheWidthAndHeight", {
49
+ enumerable: true,
50
+ get: function () {
51
+ return _mediaQueries.isWithinTheWidthAndHeight;
52
+ }
53
+ });
12
54
  Object.defineProperty(exports, "normalizeStyles", {
13
55
  enumerable: true,
14
56
  get: function () {
@@ -36,4 +78,5 @@ Object.defineProperty(exports, "sortAndValidateBreakpoints", {
36
78
  var _normalizeStyles = require("./normalizeStyles");
37
79
  var _breakpoints = require("./breakpoints");
38
80
  var _styles = require("./styles");
81
+ var _mediaQueries = require("./mediaQueries");
39
82
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["_normalizeStyles","require","_breakpoints","_styles"],"sourceRoot":"../../../src","sources":["utils/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,gBAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA"}
1
+ {"version":3,"names":["_normalizeStyles","require","_breakpoints","_styles","_mediaQueries"],"sourceRoot":"../../../src","sources":["utils/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,gBAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA"}