react-native-unistyles 2.0.0-alpha.5 → 2.0.0-alpha.6

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

@@ -1 +1 @@
-{"version":3,"file":"useStyles.d.ts","sourceRoot":"","sources":["../../../src/useStyles.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAE/G,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAG/C,KAAK,CAAC,GAAG,eAAe,CAAC,MAAM,eAAe,CAAC,CAAA;AAE/C,eAAO,MAAM,SAAS;;;;CAsCrB,CAAA"}
+{"version":3,"file":"useStyles.d.ts","sourceRoot":"","sources":["../../../src/useStyles.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAE/G,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C,eAAO,MAAM,SAAS;;;;CAsCrB,CAAA"}

package/lib/typescript/src/utils/breakpoints.d.ts

@@ -1,64 +1,6 @@
-import type { ScreenSize, MediaQueries } from '../types';
+import type { MediaQueries } from '../types';
 import type { UnistylesBreakpoints } from '../global';
-/**
- * Sorts the breakpoints object based on its numeric values in ascending order and validates them.
- *
- * This function takes an object where keys represent breakpoint names and values are numeric.
- * It returns a new object with the same keys but sorted based on their corresponding numeric values.
- * Additionally, it validates that:
- * 1. The first breakpoint starts with a value of 0.
- * 2. No duplicate breakpoint values exist.
- *
- * If the validation fails, appropriate error messages are logged to the console.
- *
- * @template B - An object type where keys are strings and values are numbers.
- * @param {B} breakpoints - The breakpoints object to be sorted and validated.
- * @returns {B} A new object with sorted and validated breakpoints.
- *
- * @example
- * const input = { md: 768, lg: 1024, sm: 0 }
- * sortAndValidateBreakpoints(input) // returns { sm: 0, md: 768, lg: 1024 }
- */
 export declare const sortAndValidateBreakpoints: (breakpoints: UnistylesBreakpoints) => UnistylesBreakpoints;
-/**
- * Determines the appropriate breakpoint key for a given screen width based on provided breakpoints.
- *
- * This function takes a screen width and an object of breakpoints. It returns the key of the breakpoint
- * that the screen width falls into. The breakpoints are assumed to be sorted in ascending order.
- *
- * @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 breakpointEntries - sorted pairs of breakpoints
- * @returns {keyof B & string} The key of the breakpoint that the screen width falls into.
- *
- * @example
- * const breakpoints = { sm: 0, md: 768, lg: 1024 }
- * getBreakpointFromScreenWidth(800, breakpoints) // returns 'md'
- */
 export declare const getBreakpointFromScreenWidth: (width: number, breakpointEntries: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>) => keyof UnistylesBreakpoints & string;
-/**
- * Retrieves the value associated with a given breakpoint or custom media query based on the provided screen size.
- *
- * The function first checks for custom media queries. If a matching custom media query is found, its associated value is returned.
- * If no custom media query matches, the function then checks for a direct breakpoint match.
- * If there's no direct breakpoint match, the function simulates CSS cascading to find the closest matching breakpoint.
- *
- * @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
- *
- * @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 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.
- *
- * @example
- *
- * const values = { ':w[200]': 'value1', sm: 'value2', md: 'value3' }
- * const screenSize = { width: 250, height: 400 }
- * const breakpoints = { sm: 300, md: 600, lg: 900 }
- *
- * getValueForBreakpoint(values, 'sm', screenSize, breakpoints); // 'value1'
- */
-export declare const getValueForBreakpoint: (value: Record<keyof UnistylesBreakpoints | MediaQueries, string | number | undefined>, breakpoint: keyof UnistylesBreakpoints, screenSize: ScreenSize) => string | number | undefined;
+export declare const getValueForBreakpoint: (value: Record<keyof UnistylesBreakpoints | MediaQueries, string | number | undefined>) => string | number | undefined;
 //# sourceMappingURL=breakpoints.d.ts.map

package/lib/typescript/src/utils/breakpoints.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../../src/utils/breakpoints.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAGxD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AAErD;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,0BAA0B,gBAAiB,oBAAoB,KAAG,oBAuB9E,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,4BAA4B,UAAW,MAAM,qBAAqB,MAAM,CAAC,MAAM,oBAAoB,EAAE,oBAAoB,CAAC,MAAM,oBAAoB,CAAC,CAAC,CAAC,KAAG,MAAM,oBAAoB,GAAG,MAcnM,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,qBAAqB,UACvB,OAAO,MAAM,oBAAoB,GAAG,YAAY,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,cACzE,MAAM,oBAAoB,cAC1B,UAAU,KACvB,MAAM,GAAG,MAAM,GAAG,SA6CpB,CAAA"}
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../../src/utils/breakpoints.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAE5C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AAErD,eAAO,MAAM,0BAA0B,gBAAiB,oBAAoB,KAAG,oBAuB9E,CAAA;AAED,eAAO,MAAM,4BAA4B,UAAW,MAAM,qBAAqB,MAAM,CAAC,MAAM,oBAAoB,EAAE,oBAAoB,CAAC,MAAM,oBAAoB,CAAC,CAAC,CAAC,KAAG,MAAM,oBAAoB,GAAG,MAcnM,CAAA;AAED,eAAO,MAAM,qBAAqB,UAAW,OAAO,MAAM,oBAAoB,GAAG,YAAY,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,KAAG,MAAM,GAAG,MAAM,GAAG,SAmD/I,CAAA"}

package/lib/typescript/src/utils/common.d.ts

@@ -2,6 +2,8 @@ export declare const throwError: (message: string) => never;
 export declare const warn: (message: string) => void;
 export declare const isMobile: boolean;
 export declare const isWeb: boolean;
+export declare const isIOS: boolean;
+export declare const isAndroid: boolean;
 export declare const isServer: boolean;
 export declare const Orientation: {
     readonly Landscape: "landscape";

package/lib/typescript/src/utils/common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../src/utils/common.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,YAAa,MAAM,UAEzC,CAAA;AAED,eAAO,MAAM,IAAI,YAAa,MAAM,SAEnC,CAAA;AAED,eAAO,MAAM,QAAQ,SAAqD,CAAA;AAC1E,eAAO,MAAM,KAAK,SAAwB,CAAA;AAC1C,eAAO,MAAM,QAAQ,SAAgC,CAAA;AAErD,eAAO,MAAM,WAAW;;;CAGd,CAAA"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../src/utils/common.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,YAAa,MAAM,UAEzC,CAAA;AAED,eAAO,MAAM,IAAI,YAAa,MAAM,SAEnC,CAAA;AAED,eAAO,MAAM,QAAQ,SAAqD,CAAA;AAC1E,eAAO,MAAM,KAAK,SAAwB,CAAA;AAC1C,eAAO,MAAM,KAAK,SAAwB,CAAA;AAC1C,eAAO,MAAM,SAAS,SAA4B,CAAA;AAClD,eAAO,MAAM,QAAQ,SAAgC,CAAA;AAErD,eAAO,MAAM,WAAW;;;CAGd,CAAA"}

package/lib/typescript/src/utils/mediaQueries.d.ts

@@ -1,130 +1,11 @@
+import type { UnistylesBreakpoints } from 'react-native-unistyles';
 import type { ScreenSize } from '../types';
-/**
- * Extracts numeric values from a coded string.
- *
- * The function is designed to process strings that have a format like "w[100,200]" or "h[300]".
- * It removes characters 'w', 'h', '[', and ']' from the input string and then extracts the numbers.
- *
- * @param {string} codedValue - The input string to extract values from.
- * @returns {Array<number>} An array of extracted numbers. Can contain one or two numbers based on the input format.
- *
- * @example
- * extractValues("w[100,200]") // returns [100, 200]
- * extractValues("h[300]")     // returns [300]
- * extractValues("h[,300]")    // returns [0,300]
- * extractValues("h[100,]")    // returns [100]
- */
-export declare const extractValues: (codedValue: string) => Array<number>;
-/**
- * Determines if the given screen size matches the specified breakpoint query.
- *
- * The function checks if the screen size (width and/or height) falls within the range
- * specified by the breakpoint query. The query can specify width (using 'w'), height (using 'h'),
- * or both.
- *
- * @param {string} query - The breakpoint query string. Examples: 'w[100,200]', 'h[300]', 'w[100,200]h[300,400]'.
- * @param {ScreenSize} screenSize - The screen size to check against the breakpoint query.
- * @returns {boolean} True if the screen size matches the breakpoint query, false otherwise.
- *
- * @example
- * const screenSize = { width: 150, height: 350 }
- * isWithinBreakpoint('w[100,200]', screenSize) // returns true
- * isWithinBreakpoint('h[400]', screenSize)     // returns false
- */
-export declare const isWithinBreakpoint: (query: string, screenSize: ScreenSize) => boolean;
-/**
- * Determines if the given width matches the specified width range in the query.
- *
- * The function checks if the provided width falls within the range specified by the query.
- * The query specifies a width range using a format like 'w[100,200]'. If only one value is provided,
- * it's treated as a minimum width.
- *
- * @param {string} query - The width query string. Examples: 'w[100,200]' or 'w[100]'.
- * @param {number} width - The width to check against the query.
- * @returns {boolean} True if the width matches the query range, false otherwise.
- *
- * @example
- * isWithinTheWidth('w[100,200]', 150) // returns true
- * isWithinTheWidth('w[100]', 50)      // returns false
- * isWithinTheWidth('w[100]', 150)     // returns true
- */
-export declare const isWithinTheWidth: (query: string, width: number) => boolean;
-/**
- * Determines if the given height matches the specified height range in the query.
- *
- * The function checks if the provided height falls within the range specified by the query.
- * The query specifies a height range using a format like 'h[100,200]'. If only one value is provided,
- * it's treated as a minimum height.
- *
- * @param {string} query - The height query string. Examples: 'h[100,200]' or 'h[100]'.
- * @param {number} height - The height to check against the query.
- * @returns {boolean} True if the height matches the query range, false otherwise.
- *
- * @example
- * isWithinTheHeight('h[100,200]', 150) // returns true
- * isWithinTheHeight('h[100]', 50)      // returns false
- * isWithinTheHeight('h[100]', 150)     // returns true
- */
-export declare const isWithinTheHeight: (query: string, height: number) => boolean;
-/**
- * Determines if the given screen size matches both the specified width and height ranges in the query.
- *
- * The function checks if the provided screen size (both width and height) falls within the ranges
- * specified by the query. The query can specify both width and height using a format like 'w[100,200]:h[300,400]'.
- *
- * @param {string} query - The combined width and height query string. Example: 'w[100,200]:h[300,400]'.
- * @param {ScreenSize} screenSize - The screen size to check against the query.
- * @returns {boolean} True if the screen size matches both the width and height ranges in the query, false otherwise.
- *
- * @example
- * const screenSize = { width: 150, height: 350 }
- * isWithinTheWidthAndHeight('w[100,200]:h[300,400]', screenSize) // returns true
- * isWithinTheWidthAndHeight('w[100,200]:h[400,500]', screenSize) // returns false
- */
-export declare const isWithinTheWidthAndHeight: (query: string, screenSize: ScreenSize) => boolean;
-/**
- * Checks if the given query string is a valid custom media query.
- *
- * The valid custom media query formats include:
- * - :w[200]
- * - :w[0, 200]
- * - :w[, 300]
- * - :h[200]
- * - :h[0, 500]
- * - :h[,200]
- * - :w[100, 300]:h[200,500]
- * - :h[200,500]:w[100, 300]
- *
- * @param {string} query - The query string to be checked.
- * @returns {boolean} Returns `true` if the query is a valid custom media query, otherwise `false`.
- * @example
- *
- * isMediaQuery(':w[200]') // true
- * isMediaQuery(':w100]')  // false
- */
+import type { MediaQueries } from '../types';
+export declare const extractValues: (pattern: string, breakpoints: UnistylesBreakpoints) => Array<number>;
+export declare const isWithinBreakpoint: (query: string, screenSize: ScreenSize, breakpoints: UnistylesBreakpoints) => boolean;
+export declare const isWithinTheWidth: (query: string, width: number, breakpoints: UnistylesBreakpoints) => boolean;
+export declare const isWithinTheHeight: (query: string, height: number, breakpoints: UnistylesBreakpoints) => boolean;
+export declare const isWithinTheWidthAndHeight: (query: string, screenSize: ScreenSize, breakpoints: UnistylesBreakpoints) => boolean;
 export declare const isMediaQuery: (query: string) => boolean;
-/**
- * Retrieves the first matching custom media query key based on the provided screen size.
- *
- * The function processes an array of media queries and returns the first query that matches
- * the given screen size. The media queries can be in formats like:
- * - w[200]
- * - w[0, 200]
- * - w[, 300]
- * - h[200]
- * - h[0, 500]
- * - h[,200]
- * - w[100, 300]:h[200,500]
- * - h[200,500]:w[100, 300]
- *
- * @param {Array<[string, string | number]>} mediaQueries - An array of tuples containing media query keys and associated values.
- * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
- * @returns {string | undefined} Returns the first matching media query key or `undefined` if no match is found.
- * @example
- *
- * const queries = [[':w[200]', 'value1'], [':h[300,500]', 'value2']]
- * const size = { width: 250, height: 400 }
- * getKeyForCustomMediaQuery(queries, size) // ':w[200]
- */
-export declare const getKeyForCustomMediaQuery: (mediaQueries: Array<[string, string | number | undefined]>, screenSize: ScreenSize) => string | undefined;
+export declare const getKeyForCustomMediaQuery: (mediaQueries: Array<[keyof UnistylesBreakpoints | MediaQueries, string | number | undefined]>, screenSize: ScreenSize, breakpoints: UnistylesBreakpoints) => string | undefined;
 //# sourceMappingURL=mediaQueries.d.ts.map

package/lib/typescript/src/utils/mediaQueries.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mediaQueries.d.ts","sourceRoot":"","sources":["../../../../src/utils/mediaQueries.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1C;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,aAAa,eAAgB,MAAM,KAAG,MAAM,MAAM,CAoB9D,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,kBAAkB,UAAW,MAAM,cAAc,UAAU,KAAG,OAc1E,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,gBAAgB,UAAW,MAAM,SAAS,MAAM,KAAG,OAQ/D,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,iBAAiB,UAAW,MAAM,UAAU,MAAM,KAAG,OAQjE,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,yBAAyB,UAAW,MAAM,cAAc,UAAU,KAAG,OAQjF,CAAA;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,YAAY,UAAW,MAAM,KAAG,OAI5C,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,yBAAyB,iBAAkB,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC,cAAc,UAAU,KAAG,MAAM,GAAG,SAevI,CAAA"}
+{"version":3,"file":"mediaQueries.d.ts","sourceRoot":"","sources":["../../../../src/utils/mediaQueries.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAC1C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAyD5C,eAAO,MAAM,aAAa,YAAa,MAAM,eAAe,oBAAoB,KAAG,MAAM,MAAM,CAyB9F,CAAA;AAED,eAAO,MAAM,kBAAkB,UAAW,MAAM,cAAc,UAAU,eAAe,oBAAoB,KAAG,OAiB7G,CAAA;AAED,eAAO,MAAM,gBAAgB,UAAW,MAAM,SAAS,MAAM,eAAe,oBAAoB,KAAG,OAQlG,CAAA;AAED,eAAO,MAAM,iBAAiB,UAAW,MAAM,UAAU,MAAM,eAAe,oBAAoB,KAAG,OAQpG,CAAA;AAED,eAAO,MAAM,yBAAyB,UAAW,MAAM,cAAc,UAAU,eAAe,oBAAoB,KAAG,OAQpH,CAAA;AAED,eAAO,MAAM,YAAY,UAAW,MAAM,KAAG,OAI5C,CAAA;AAED,eAAO,MAAM,yBAAyB,iBACpB,MAAM,CAAC,MAAM,oBAAoB,GAAG,YAAY,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC,cACjF,UAAU,eACT,oBAAoB,KAClC,MAAM,GAAG,SAMX,CAAA"}

package/lib/typescript/src/utils/styles.d.ts

@@ -1,51 +1,6 @@
 import type { CustomNamedStyles, ScreenSize } from '../types';
 import type { UnistylesBreakpoints } from '../global';
-/**
- * Proxies a function to parse its return value for custom media queries or breakpoints.
- *
- * @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
- *
- * @param {Function} fn - The function to be proxified.
- * @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 breakpointPairs - sorted pairs of breakpoints
- *
- * @returns {Function} Returns the proxified function
- *
- * @example
- *
- * const myFunction = () => ({ ':w[200]': 'value1', sm: 'value2' })
- * const screenSize = { width: 250, height: 400 }
- * const breakpoints = { sm: 300, md: 600 }
- *
- * const proxifiedFunction = proxifyFunction(myFunction, 'sm', screenSize, breakpoints)
- * proxifiedFunction() // parsed style based on screenSize and breakpoints
- */
 export declare const proxifyFunction: (fn: Function, breakpoint: keyof UnistylesBreakpoints & string, screenSize: ScreenSize) => Function;
-/**
- * Parses a style object to resolve custom media queries or breakpoints based on the provided screen size and breakpoints.
- *
- * The function processes each key-value pair in the style object. If the value is a function or a valid style (not an object or a 'transform' key),
- * it is returned as-is. Otherwise, the function attempts to resolve the value based on the provided breakpoint, screen size, and defined breakpoints.
- *
- * @template T - The type of the style object.
- * @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
- *
- * @param {CustomNamedStyles<T, B>} style - The style object to be parsed.
- * @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 breakpointPairs - sorted pairs of breakpoints
- *
- * @returns {Record<string, string | number | Function>} Returns the parsed style object with resolved custom media queries or breakpoints.
- *
- * @example
- *
- * const style = { fontSize: { sm: '12px', md: '16px' } }
- * const screenSize = { width: 300, height: 400 }
- * const breakpoints = { xs: 0, sm: 300, md: 600 }
- *
- * const parsedStyle = parseStyle(style, 'sm', screenSize, breakpoints)
- * // { fontSize: '12px' }
- */
+export declare const isPlatformColor: <T extends {}>(value: T) => boolean;
 export declare const parseStyle: <T>(style: CustomNamedStyles<T>, breakpoint: keyof UnistylesBreakpoints & string, screenSize: ScreenSize) => T;
 //# sourceMappingURL=styles.d.ts.map

package/lib/typescript/src/utils/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAI7D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AAErD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe,OACpB,QAAQ,cAAc,MAAM,oBAAoB,GAAG,MAAM,cACjD,UAAU,KACvB,QAGD,CAAA;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,UAAU,+CAEP,MAAM,oBAAoB,GAAG,MAAM,cACnC,UAAU,MAiDzB,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAgB,UAAU,EAAE,MAAM,UAAU,CAAA;AAG3E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AAGrD,eAAO,MAAM,eAAe,OACpB,QAAQ,cAAc,MAAM,oBAAoB,GAAG,MAAM,cACjD,UAAU,KACvB,QAGD,CAAA;AAEF,eAAO,MAAM,eAAe,8BAA6B,OAMxD,CAAA;AAED,eAAO,MAAM,UAAU,+CAEP,MAAM,oBAAoB,GAAG,MAAM,cACnC,UAAU,MA6CzB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "2.0.0-alpha.5",
+  "version": "2.0.0-alpha.6",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "jest",
@@ -20,7 +20,16 @@
     "src",
     "lib",
     "ios",
+    "android",
+    "cxx",
     "react-native-unistyles.podspec",
+    "!lib/typescript/examples",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
     "!**/*.spec.ts",
     "!**/*.spec.tsx",
     "!**/.*"

package/src/Unistyles.ts

@@ -1,13 +1,13 @@
 import { UnistylesModule } from './UnistylesModule'
 import { UnistylesRuntime } from './UnistylesRuntime'
-import { UnistylesEngine } from './UnistylesEngine'
+import { UnistylesBuiltInEngine } from './UnistylesEngine'
 import { UnistyleRegistry } from './UnistyleRegistry'
 import type { UnistylesBridge } from './types'
 import { UnistylesError } from './types'
 
 class Unistyles {
     private _runtime: UnistylesRuntime
-    private _engine: UnistylesEngine
+    private _engine: UnistylesBuiltInEngine
     private _registry: UnistyleRegistry
     private _bridge: UnistylesBridge
 
@@ -22,7 +22,7 @@ class Unistyles {
         this._bridge = global.__UNISTYLES__ as UnistylesBridge
         this._registry = new UnistyleRegistry(this._bridge)
         this._runtime = new UnistylesRuntime(this._bridge, this._registry)
-        this._engine = new UnistylesEngine(this._registry, this._runtime)
+        this._engine = new UnistylesBuiltInEngine(this._registry, this._runtime)
     }
 
     public get registry() {

package/src/UnistylesEngine.ts

@@ -1,14 +1,23 @@
 import type { UnistyleRegistry } from './UnistyleRegistry'
 import type { UnistylesRuntime } from './UnistylesRuntime'
+import { getKeyForCustomMediaQuery } from './utils'
+import type { UnistylesEngine, NestedKeys } from './types'
 
-// todo implement engine
-export class UnistylesEngine {
-    // @ts-ignore
+export class UnistylesBuiltInEngine implements UnistylesEngine {
     constructor(private registry: UnistyleRegistry, private runtime: UnistylesRuntime) {
         this.registry = registry
         this.runtime = runtime
     }
 
+    public isMediaQuery = (key: string) => {
+        const regex = /(:w|:h)/
+
+        return key.length > 0 && regex.test(key)
+    }
+
+    public didMatchMediaQuery = (keys: NestedKeys) =>
+        getKeyForCustomMediaQuery(keys, this.runtime.screen, this.registry.breakpoints)
+
     // UnistylesEngine.parseStyleSheet
     // UnistylesEngine.parseStyle
     // UnistylesEngine.proxify

package/src/createStyleSheet.ts

@@ -1,9 +1,6 @@
-import type { CustomNamedStyles } from './types'
-import type { UnistylesThemes } from './global'
+import type { CustomNamedStyles, UnistylesTheme } from './types'
 
-type T = UnistylesThemes[keyof UnistylesThemes]
-
-export const createStyleSheet = <S extends CustomNamedStyles<S>, X>(styles: S | CustomNamedStyles<S> | X | ((theme: T) => X | CustomNamedStyles<X>)): S | X => {
+export const createStyleSheet = <S, X>(styles: S | CustomNamedStyles<S> | X | ((theme: UnistylesTheme) => X | CustomNamedStyles<X>)): S | X => {
     if (typeof styles === 'function') {
         return styles as X
     }

package/src/types/breakpoints.ts

@@ -1,3 +1,4 @@
+import type { OpaqueColorValue } from 'react-native'
 import type { UnistylesBreakpoints } from '../global'
 import type { MediaQueries } from './mediaQueries'
 
@@ -25,7 +26,9 @@ export type ExtractBreakpoints<T> = T extends Partial<Record<keyof UnistylesBrea
 export type RemoveKeysWithPrefix<T> = T extends (...args: Array<any>) => infer R
     ? (...args: Parameters<T>) => RemoveKeysWithPrefix<R>
     : T extends object
-        ? T extends Record<string, infer _V>
-            ? { [K in keyof T as K extends MediaQueries ? keyof UnistylesBreakpoints & string : K]: RemoveKeysWithPrefix<T[K]> }
-            : { [K in keyof T]: RemoveKeysWithPrefix<T[K]> }
+        ? T extends OpaqueColorValue
+            ? string
+            : T extends Record<string, infer _V>
+                ? { [K in keyof T as K extends MediaQueries ? keyof UnistylesBreakpoints & string : K]: RemoveKeysWithPrefix<T[K]> }
+                : { [K in keyof T]: RemoveKeysWithPrefix<T[K]> }
         : T

package/src/types/core.ts

@@ -15,7 +15,7 @@ import type {
 } from 'react-native/Libraries/StyleSheet/StyleSheetTypes'
 import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
 import type { MediaQueries } from './mediaQueries'
-import type { UnistylesBreakpoints } from '../global'
+import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
 
 type ShadowOffset = {
     width: number,
@@ -37,37 +37,40 @@ type TransformStyles =
     & SkewYTransform
     & MatrixTransform
 
-type UnistyleNested<B> = {
-    shadowOffset?: DeepUniStyle<ShadowOffset, B>,
-    textShadowOffset?: DeepUniStyle<ShadowOffset, B>,
-    transform?: Array<DeepUniStyle<TransformStyles, B>>
+type UnistyleNested = {
+    shadowOffset?: DeepUniStyle<ShadowOffset>,
+    textShadowOffset?: DeepUniStyle<ShadowOffset>,
+    transform?: Array<DeepUniStyle<TransformStyles>>
 }
 
-type UniStyle<V, B> = {
-    [innerKey in keyof B]?: V
+type UniStyle<V> = {
+    [innerKey in keyof UnistylesBreakpoints]: V
 } | {
-    [innerKey in MediaQueries]?: V
-} | V
+    [innerKey in MediaQueries]: V
+}
 
-type DeepUniStyle<T, B> = {
-    [K in keyof T]?: UniStyle<T[K], B>
+type DeepUniStyle<T> = {
+    [K in keyof T]?: UniStyle<T[K]> | T[K]
 }
 
 // these props are treated differently to nest breakpoints and media queries
 type NestedTypes = 'shadowOffset' | 'transform' | 'textShadowOffset'
 
-type UnistyleView<B> = DeepUniStyle<Omit<ViewStyle, NestedTypes>, B>
-type UnistyleText<B> = DeepUniStyle<Omit<TextStyle, NestedTypes>, B>
-type UnistyleImage<B> = DeepUniStyle<Omit<ImageStyle, NestedTypes>, B>
+type UnistyleView = DeepUniStyle<Omit<ViewStyle, NestedTypes>>
+type UnistyleText = DeepUniStyle<Omit<TextStyle, NestedTypes>>
+type UnistyleImage = DeepUniStyle<Omit<ImageStyle, NestedTypes>>
 
-export type StaticStyles<B> =
-    | UnistyleView<B>
-    | UnistyleText<B>
-    | UnistyleImage<B>
-    & UnistyleNested<B>
+export type StaticStyles =
+    | UnistyleView
+    | UnistyleText
+    | UnistyleImage
+    & UnistyleNested
 
 export type CustomNamedStyles<T> = {
-    [K in keyof T]: T[K] extends (...args: infer A) => StaticStyles<UnistylesBreakpoints>
-        ? (...args: A) => StaticStyles<UnistylesBreakpoints>
-        : StaticStyles<UnistylesBreakpoints>
+    [K in keyof T]: T[K] extends (...args: infer A) => StaticStyles
+        ? (...args: A) => StaticStyles
+        : StaticStyles
 }
+
+export type NestedKeys = Array<[keyof UnistylesBreakpoints | MediaQueries, string | number | undefined]>
+export type UnistylesTheme = UnistylesThemes[keyof UnistylesThemes]

package/src/types/cxx.ts

@@ -1,8 +1,10 @@
 import type { UnistylesThemes, UnistylesBreakpoints } from '../global'
 import type { ScreenSize } from './breakpoints'
+import type { NestedKeys } from './core'
 
+export type Optional<T> = T | undefined
 export type Nullable<T> = T | null
-export type ColorSchemeName = 'light' | 'dark' | undefined
+export type ColorSchemeName = Optional<'light' | 'dark'>
 
 export type UnistylesConfig = {
     adaptiveThemes?: boolean
@@ -64,3 +66,8 @@ export enum UnistylesError {
     BreakpointsCannotBeEmpty = 'UNISTYLES_ERROR_BREAKPOINTS_CANNOT_BE_EMPTY',
     BreakpointsMustStartFromZero = 'UNISTYLES_ERROR_BREAKPOINTS_MUST_START_FROM_ZERO',
 }
+
+export interface UnistylesEngine {
+    isMediaQuery(key: string): boolean,
+    didMatchMediaQuery(keys: NestedKeys): Optional<string>,
+}

package/src/types/index.ts

@@ -1,6 +1,6 @@
 export * from './normalizer'
 export * from './cxx'
-export type { CustomNamedStyles } from './core'
+export type { CustomNamedStyles, NestedKeys, UnistylesTheme } from './core'
 export type { MediaQueries } from './mediaQueries'
 export type {
     ScreenSize,

package/src/types/mediaQueries.ts

@@ -1,9 +1,14 @@
 type Optional<TOptional extends string> = TOptional | ''
 type Separator = ',' | ', '
-// this is super weird, but number passes empty string and bigint does not
-type MediaQuery = `[${Separator}${bigint}]` | `[${bigint}${Optional<`${Separator}${bigint}`>}]`
-type WidthMediaQuery = `:w${MediaQuery}`
-type HeightMediaQuery = `:h${MediaQuery}`
+type OpeningBracket = '(' | '['
+type ClosingBracket = ')' | ']'
+
+type NumericMediaQuery =
+    | `${OpeningBracket}${Separator}${bigint}${ClosingBracket}`
+    | `${OpeningBracket}${bigint}${Optional<`${Separator}${bigint}`>}${ClosingBracket}`
+
+type WidthMediaQuery = `:w${NumericMediaQuery}`
+type HeightMediaQuery = `:h${NumericMediaQuery}`
 
 export type MediaQueries =
     | `${WidthMediaQuery}${Optional<HeightMediaQuery>}`

package/src/useStyles.ts

@@ -3,12 +3,9 @@ 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'
+import type { UnistylesTheme } from './types'
 
-// todo types
-type T = UnistylesThemes[keyof UnistylesThemes]
-
-export const useStyles = <ST extends CustomNamedStyles<ST>>(stylesheet?: ST | CreateStylesFactory<ST, T>) => {
+export const useStyles = <ST extends CustomNamedStyles<ST>>(stylesheet?: ST | CreateStylesFactory<ST, UnistylesTheme>) => {
     const { theme, breakpoint, screenSize } = useUnistyles()
 
     if (!stylesheet) {
@@ -20,7 +17,7 @@ export const useStyles = <ST extends CustomNamedStyles<ST>>(stylesheet?: ST | Cr
     }
 
     const parsedStyles = useMemo(() => typeof stylesheet === 'function'
-        ? stylesheet(theme!)
+        ? stylesheet(theme)
         : stylesheet, [theme, stylesheet])
 
     const dynamicStyleSheet = useMemo(() => Object