react-native-unistyles 1.3.0 → 1.4.0

package/lib/typescript/src/types/core.d.ts

@@ -1,18 +1,32 @@
 import type { MatrixTransform, PerpectiveTransform, RotateTransform, RotateXTransform, RotateYTransform, RotateZTransform, ScaleTransform, ScaleXTransform, ScaleYTransform, SkewXTransform, SkewYTransform, TranslateXTransform, TranslateYTransform } from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
 import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
-import type { UnistylesBreakpoints, UnistylesThemes } from '../global';
-export type ShadowOffset = {
+import type { Breakpoints } from './breakpoints';
+import type { MediaQueries } from './mediaQueries';
+type ShadowOffset = {
     width: number;
     height: number;
 };
-export type TransformStyles = PerpectiveTransform & RotateTransform & RotateXTransform & RotateYTransform & RotateZTransform & ScaleTransform & ScaleXTransform & ScaleYTransform & TranslateXTransform & TranslateYTransform & SkewXTransform & SkewYTransform & MatrixTransform;
-export type ScreenSize = {
-    width: number;
-    height: number;
+type TransformStyles = PerpectiveTransform & RotateTransform & RotateXTransform & RotateYTransform & RotateZTransform & ScaleTransform & ScaleXTransform & ScaleYTransform & TranslateXTransform & TranslateYTransform & SkewXTransform & SkewYTransform & MatrixTransform;
+type UnistyleNested<B> = {
+    shadowOffset?: DeepUniStyle<ShadowOffset, B>;
+    textShadowOffset?: DeepUniStyle<ShadowOffset, B>;
+    transform?: Array<DeepUniStyle<TransformStyles, B>>;
+};
+type UniStyle<V, B> = {
+    [innerKey in keyof B]?: V;
+} | {
+    [innerKey in MediaQueries]?: V;
+} | V;
+type DeepUniStyle<T, B> = {
+    [K in keyof T]?: UniStyle<T[K], B>;
+};
+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>;
+export type StaticStyles<B extends Breakpoints> = UnistyleView<B> | UnistyleText<B> | UnistyleImage<B> & UnistyleNested<B>;
+export type CustomNamedStyles<T, B extends Breakpoints> = {
+    [K in keyof T]: T[K] extends (...args: infer A) => StaticStyles<B> ? (...args: A) => StaticStyles<B> : StaticStyles<B>;
 };
-export type RNStyle = ViewStyle & TextStyle & ImageStyle;
-export type RNValue = ViewStyle[keyof ViewStyle] | TextStyle[keyof TextStyle] | ImageStyle[keyof ImageStyle];
-export type NestedStyle = Record<keyof UnistylesBreakpoints | symbol, RNValue>;
-export type NestedStylePairs = Array<[keyof UnistylesBreakpoints | symbol, RNValue]>;
-export type UnistylesTheme = UnistylesThemes[keyof UnistylesThemes];
+export {};
 //# sourceMappingURL=core.d.ts.map

package/lib/typescript/src/types/core.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"core.d.ts","sourceRoot":"","sources":["../../../../src/types/core.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACR,eAAe,EACf,mBAAmB,EACnB,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,eAAe,EACf,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,mBAAmB,EACtB,MAAM,mDAAmD,CAAA;AAC1D,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACpE,OAAO,KAAK,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAEtE,MAAM,MAAM,YAAY,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,eAAe,GACrB,mBAAmB,GACnB,eAAe,GACf,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,cAAc,GACd,eAAe,GACf,eAAe,GACf,mBAAmB,GACnB,mBAAmB,GACnB,cAAc,GACd,cAAc,GACd,eAAe,CAAA;AAErB,MAAM,MAAM,UAAU,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAA;AACxD,MAAM,MAAM,OAAO,GAAG,SAAS,CAAC,MAAM,SAAS,CAAC,GAAG,SAAS,CAAC,MAAM,SAAS,CAAC,GAAG,UAAU,CAAC,MAAM,UAAU,CAAC,CAAA;AAC5G,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,EAAE,OAAO,CAAC,CAAA;AAC9E,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,CAAC,MAAM,oBAAoB,GAAG,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA;AACpF,MAAM,MAAM,cAAc,GAAG,eAAe,CAAC,MAAM,eAAe,CAAC,CAAA"}
+{"version":3,"file":"core.d.ts","sourceRoot":"","sources":["../../../../src/types/core.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACR,eAAe,EACf,mBAAmB,EACnB,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,eAAe,EACf,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,mBAAmB,EACtB,MAAM,mDAAmD,CAAA;AAC1D,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACpE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAChD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAElD,KAAK,YAAY,GAAG;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,KAAK,eAAe,GACd,mBAAmB,GACnB,eAAe,GACf,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,cAAc,GACd,eAAe,GACf,eAAe,GACf,mBAAmB,GACnB,mBAAmB,GACnB,cAAc,GACd,cAAc,GACd,eAAe,CAAA;AAErB,KAAK,cAAc,CAAC,CAAC,IAAI;IACrB,YAAY,CAAC,EAAE,YAAY,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC;IAC7C,gBAAgB,CAAC,EAAE,YAAY,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC;IACjD,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,CAAA;CACtD,CAAA;AAED,KAAK,QAAQ,CAAC,CAAC,EAAE,CAAC,IAAI;KACjB,QAAQ,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;CAC5B,GAAG;KACC,QAAQ,IAAI,YAAY,CAAC,CAAC,EAAE,CAAC;CACjC,GAAG,CAAC,CAAA;AAEL,KAAK,YAAY,CAAC,CAAC,EAAE,CAAC,IAAI;KACrB,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;CACrC,CAAA;AAGD,KAAK,WAAW,GAAG,cAAc,GAAG,WAAW,GAAG,kBAAkB,CAAA;AAEpE,KAAK,YAAY,CAAC,CAAC,IAAI,YAAY,CAAC,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC,EAAE,CAAC,CAAC,CAAA;AACpE,KAAK,YAAY,CAAC,CAAC,IAAI,YAAY,CAAC,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC,EAAE,CAAC,CAAC,CAAA;AACpE,KAAK,aAAa,CAAC,CAAC,IAAI,YAAY,CAAC,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC,EAAE,CAAC,CAAC,CAAA;AAEtE,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,WAAW,IACxC,YAAY,CAAC,CAAC,CAAC,GACf,YAAY,CAAC,CAAC,CAAC,GACf,aAAa,CAAC,CAAC,CAAC,GAChB,cAAc,CAAC,CAAC,CAAC,CAAA;AAEvB,MAAM,MAAM,iBAAiB,CAAC,CAAC,EAAE,CAAC,SAAS,WAAW,IAAI;KACrD,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,MAAM,CAAC,KAAK,YAAY,CAAC,CAAC,CAAC,GAC5D,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,YAAY,CAAC,CAAC,CAAC,GAC/B,YAAY,CAAC,CAAC,CAAC;CACxB,CAAA"}

package/lib/typescript/src/types/index.d.ts

@@ -1,9 +1,4 @@
 export * from './normalizer';
-export * from './unistyles';
-export type { Optional, Nullable } from './common';
-export type { NestedStylePairs, UnistylesTheme, ScreenSize, NestedStyle, RNValue, RNStyle } from './core';
-export type { StyleSheetWithSuperPowers, StyleSheet, AllAvailableKeys } from './stylesheet';
-export type { ReactNativeStyleSheet } from './breakpoints';
-export type { ExtractVariantNames } from './variants';
-export type { UnistylesPlugin } from './plugin';
+export type { CustomNamedStyles } from './core';
+export type { ScreenSize, Breakpoints, CreateStylesFactory, ExtractBreakpoints, RemoveKeysWithPrefix, SortedBreakpointEntries } from './breakpoints';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAClD,YAAY,EACR,gBAAgB,EAChB,cAAc,EACd,UAAU,EACV,WAAW,EACX,OAAO,EACP,OAAO,EACV,MAAM,QAAQ,CAAA;AACf,YAAY,EAAE,yBAAyB,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC3F,YAAY,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA;AAC1D,YAAY,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AACrD,YAAY,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,YAAY,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAA;AAC/C,YAAY,EACR,UAAU,EACV,WAAW,EACX,mBAAmB,EACnB,kBAAkB,EAClB,oBAAoB,EACpB,uBAAuB,EAC1B,MAAM,eAAe,CAAA"}

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

@@ -0,0 +1,8 @@
+type Optional<TOptional extends string> = TOptional | '';
+type Separator = ',' | ', ';
+type MediaQuery = `[${Separator}${bigint}]` | `[${bigint}${Optional<`${Separator}${bigint}`>}]`;
+type WidthMediaQuery = `:w${MediaQuery}`;
+type HeightMediaQuery = `:h${MediaQuery}`;
+export type MediaQueries = `${WidthMediaQuery}${Optional<HeightMediaQuery>}` | `${HeightMediaQuery}${Optional<WidthMediaQuery>}`;
+export {};
+//# sourceMappingURL=mediaQueries.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mediaQueries.d.ts","sourceRoot":"","sources":["../../../../src/types/mediaQueries.ts"],"names":[],"mappings":"AAAA,KAAK,QAAQ,CAAC,SAAS,SAAS,MAAM,IAAI,SAAS,GAAG,EAAE,CAAA;AACxD,KAAK,SAAS,GAAG,GAAG,GAAG,IAAI,CAAA;AAE3B,KAAK,UAAU,GAAG,IAAI,SAAS,GAAG,MAAM,GAAG,GAAG,IAAI,MAAM,GAAG,QAAQ,CAAC,GAAG,SAAS,GAAG,MAAM,EAAE,CAAC,GAAG,CAAA;AAC/F,KAAK,eAAe,GAAG,KAAK,UAAU,EAAE,CAAA;AACxC,KAAK,gBAAgB,GAAG,KAAK,UAAU,EAAE,CAAA;AAEzC,MAAM,MAAM,YAAY,GAClB,GAAG,eAAe,GAAG,QAAQ,CAAC,gBAAgB,CAAC,EAAE,GACjD,GAAG,gBAAgB,GAAG,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAA"}

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

@@ -1,3 +1,63 @@
-import type { Optional, RNValue } from '../types';
-export declare const getValueForBreakpoint: (value: Record<string, RNValue>) => Optional<RNValue>;
+import type { Breakpoints, ScreenSize, SortedBreakpointEntries } from '../types';
+/**
+ * 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: <B extends Breakpoints>(breakpoints: B) => B;
+/**
+ * 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: <B extends Breakpoints>(width: number, breakpointEntries: SortedBreakpointEntries<B>) => keyof B & 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: <B extends Breakpoints>(value: Record<keyof B & string, string | number | undefined>, breakpoint: keyof B & string, screenSize: ScreenSize, breakpointPairs: SortedBreakpointEntries<B>) => 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":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAKjD,eAAO,MAAM,qBAAqB,UAAW,OAAO,MAAM,EAAE,OAAO,CAAC,KAAG,SAAS,OAAO,CAqCtF,CAAA"}
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../../src/utils/breakpoints.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAA;AAGhF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,0BAA0B,8CAuBtC,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,4BAA4B,iCAAkC,MAAM,oEAchF,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,qBAAqB,kIAGlB,UAAU,kDAEvB,MAAM,GAAG,MAAM,GAAG,SA+BpB,CAAA"}

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

@@ -0,0 +1,7 @@
+export declare const throwError: (message: string) => never;
+export declare const warn: (message: string) => void;
+export declare const isWeb: boolean;
+export declare const isIOS: boolean;
+export declare const isAndroid: boolean;
+export declare const isServer: boolean;
+//# sourceMappingURL=common.d.ts.map

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

@@ -0,0 +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,KAAK,SAAwB,CAAA;AAC1C,eAAO,MAAM,KAAK,SAAwB,CAAA;AAC1C,eAAO,MAAM,SAAS,SAA4B,CAAA;AAClD,eAAO,MAAM,QAAQ,SAAgC,CAAA"}

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

@@ -1,8 +1,7 @@
-export { mq } from './mq';
-export type { UnistylesParsedMq } from './mqParser';
-export { getKeyForUnistylesMediaQuery, isWithinTheWidthAndHeight, isValidMq, parseMq, isUnistylesMq } from './mqParser';
-export { getValueForBreakpoint } from './breakpoints';
-export { proxifyFunction, parseStyle, isPlatformColor } from './styles';
-export { withPlugins } from './withPlugins';
-export { generateReactNativeWebId } from './generateId';
+export { normalizeStyles } from './normalizeStyles';
+export * from './normalizer';
+export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints, getValueForBreakpoint } from './breakpoints';
+export { proxifyFunction, parseStyle } from './styles';
+export { isServer } from './common';
+export { extractValues, getKeyForCustomMediaQuery, isMediaQuery, isWithinTheHeight, isWithinTheWidth, isWithinTheWidthAndHeight } from './mediaQueries';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAA;AACzB,YAAY,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AACnD,OAAO,EAAE,4BAA4B,EAAE,yBAAyB,EAAE,SAAS,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AACvH,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA;AACrD,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,cAAc,cAAc,CAAA;AAC5B,OAAO,EAAE,4BAA4B,EAAE,0BAA0B,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA;AAC/G,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AACnC,OAAO,EACH,aAAa,EACb,yBAAyB,EACzB,YAAY,EACZ,iBAAiB,EACjB,gBAAgB,EAChB,yBAAyB,EAC5B,MAAM,gBAAgB,CAAA"}

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

@@ -0,0 +1,130 @@
+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
+ */
+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;
+//# sourceMappingURL=mediaQueries.d.ts.map

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

@@ -0,0 +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,CAQ9D,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"}

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

@@ -0,0 +1,2 @@
+export declare const normalizeStyles: <T>(styles: T) => T;
+//# sourceMappingURL=normalizeStyles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"normalizeStyles.d.ts","sourceRoot":"","sources":["../../../../src/utils/normalizeStyles.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,eAAe,qBAAgC,CAAA"}

package/lib/typescript/src/utils/normalizeStyles.web.d.ts

@@ -0,0 +1,5 @@
+import type { Transforms } from '../types';
+export declare const normalizeStyles: <T extends Required<import("react-native").ShadowStyleIOS> | Required<Pick<import("react-native").TextStyle, "textShadowColor" | "textShadowOffset" | "textShadowRadius">> | {
+    transform: Transforms;
+}>(style: T) => T;
+//# sourceMappingURL=normalizeStyles.web.d.ts.map

package/lib/typescript/src/utils/normalizeStyles.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"normalizeStyles.web.d.ts","sourceRoot":"","sources":["../../../../src/utils/normalizeStyles.web.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAoE,UAAU,EAAE,MAAM,UAAU,CAAA;AAuD5G,eAAO,MAAM,eAAe;;iBAwB3B,CAAA"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"normalizer.d.ts","sourceRoot":"","sources":["../../../../src/utils/normalizer.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEjE,KAAK,YAAY,GAAG;IAChB,qBAAqB,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAAC;IACjD,oBAAoB,CAAC,KAAK,EAAE,QAAQ,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC;IACzD,oBAAoB,CAAC,UAAU,EAAE,QAAQ,CAAC,UAAU,CAAC,GAAG,MAAM,CAAC;CAClE,CAAA;AAED,eAAO,MAAM,cAAc,UAAW,MAAM,YAAW,MAAM,WAyB5D,CAAA;AAED,eAAO,MAAM,qBAAqB,UAAW,MAAM,oBAAiC,CAAA;AAwDpF,eAAO,MAAM,YAAY,EAAE,YAI1B,CAAA"}

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

@@ -1,5 +1,51 @@
-import type { Optional, RNStyle } from '../types';
-export declare const proxifyFunction: (key: string, fn: Function, variant?: Record<string, Optional<string>>) => Function;
+import type { Breakpoints, CustomNamedStyles, ScreenSize, SortedBreakpointEntries } from '../types';
+/**
+ * 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: <B extends Breakpoints>(fn: Function, breakpoint: keyof B & string, screenSize: ScreenSize, breakpointPairs: SortedBreakpointEntries<B>) => Function;
 export declare const isPlatformColor: <T extends {}>(value: T) => boolean;
-export declare const parseStyle: <T extends RNStyle>(style: T, variant?: Record<string, Optional<string>>, parseMediaQueries?: boolean) => T;
+/**
+ * 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 parseStyle: <T, B extends Breakpoints>(style: CustomNamedStyles<T, B>, breakpoint: keyof B & string, screenSize: ScreenSize, breakpointPairs: SortedBreakpointEntries<B>) => 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,QAAQ,EAAE,OAAO,EAAW,MAAM,UAAU,CAAA;AAK1D,eAAO,MAAM,eAAe,QACnB,MAAM,MACP,QAAQ,YACF,OAAO,MAAM,EAAE,SAAS,MAAM,CAAC,CAAC,KAC3C,QAED,CAAA;AAEF,eAAO,MAAM,eAAe,8BAA6B,OAMxD,CAAA;AAED,eAAO,MAAM,UAAU,0CAEV,OAAO,MAAM,EAAE,SAAS,MAAM,CAAC,CAAC,mCAmD9B,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,UAAU,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAA;AAKnG;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe,8BACpB,QAAQ,4CACA,UAAU,kDAEvB,QAGD,CAAA;AAEF,eAAO,MAAM,eAAe,8BAA6B,OAMxD,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,UAAU,uGAGP,UAAU,mDAmDzB,CAAA"}

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "react-native-unistyles",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "jest",
     "test:coverage": "jest --coverage",
     "tsc": "node_modules/typescript/bin/tsc --noEmit",
     "lint": "eslint . --ext .ts,.tsx",
+    "clean": "del-cli lib",
     "prepare": "husky install && bob build",
     "precommit": "concurrently 'yarn tsc' 'yarn lint' 'yarn test'",
     "release": "release-it"
@@ -19,28 +20,13 @@
   "files": [
     "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",
     "!**/.*"
   ],
   "keywords": [
     "react-native",
     "ios",
-    "android",
-    "react-native-macos",
-    "react-native-web",
-    "expo"
+    "android"
   ],
   "repository": "https://github.com/jpudysz/react-native-unistyles",
   "author": "Jacek Pudysz <jacekpudysz@gmail.com> (https://github.com/jpudysz)",
@@ -53,24 +39,26 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "18.4.3",
+    "@commitlint/config-conventional": "17.8.0",
     "@react-native/eslint-config": "0.74.0",
     "@react-native/normalize-colors": "0.74.1",
-    "@release-it/conventional-changelog": "8.0.1",
+    "@release-it/conventional-changelog": "5.1.1",
     "@testing-library/react-hooks": "8.0.1",
-    "@types/jest": "29.5.11",
-    "@types/react": "18.2.46",
-    "@typescript-eslint/eslint-plugin": "6.16.0",
-    "@typescript-eslint/eslint-plugin-tslint": "6.16.0",
-    "@typescript-eslint/parser": "6.16.0",
-    "commitlint": "18.4.3",
-    "concurrently": "8.2.2",
-    "eslint": "8.56.0",
+    "@types/jest": "29.5.5",
+    "@types/react": "18.2.28",
+    "@types/react-native": "0.72.3",
+    "@typescript-eslint/eslint-plugin": "6.8.0",
+    "@typescript-eslint/eslint-plugin-tslint": "6.8.0",
+    "@typescript-eslint/parser": "6.8.0",
+    "commitlint": "17.8.0",
+    "concurrently": "8.2.1",
+    "del-cli": "5.1.0",
+    "eslint": "8.51.0",
     "eslint-config-codemask": "1.1.7",
     "eslint-plugin-functional": "6.0.0",
-    "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-jsdoc": "46.10.1",
-    "eslint-plugin-jsx-a11y": "6.8.0",
+    "eslint-plugin-import": "2.28.1",
+    "eslint-plugin-jsdoc": "46.8.2",
+    "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-nested-if": "1.0.0",
     "eslint-plugin-no-else": "0.2.2",
     "eslint-plugin-no-loops": "0.3.0",
@@ -80,31 +68,26 @@
     "husky": "8.0.3",
     "jest": "29.7.0",
     "react": "18.2.0",
-    "react-native": "0.72.7",
-    "react-native-builder-bob": "0.23.2",
+    "react-native": "0.72.6",
+    "react-native-builder-bob": "0.23.1",
     "react-native-web": "0.19.9",
     "react-test-renderer": "18.2.0",
-    "release-it": "17.0.1",
-    "typescript": "5.3.3"
+    "release-it": "16.2.1",
+    "typescript": "5.2.2"
   },
   "peerDependencies": {
     "@react-native/normalize-colors": "*",
     "react": "*",
     "react-native": "*",
-    "react-native-macos": "*",
     "react-native-web": "*"
   },
   "peerDependenciesMeta": {
-    "react-native-macos": {
-      "optional": true
-    },
     "react-native-web": {
       "optional": true
     }
   },
   "workspaces": [
     "examples/expo",
-    "examples/macos",
     "docs"
   ],
   "packageManager": "yarn@3.6.1",
@@ -115,13 +98,10 @@
     "preset": "react-native",
     "modulePathIgnorePatterns": [
       "<rootDir>/examples/expo/node_modules",
-      "<rootDir>/examples/macos/node_modules",
+      "<rootDir>/examples/ssr/node_modules",
       "<rootDir>/docs/node_modules",
       "<rootDir>/lib/"
     ],
-    "testMatch": [
-      "**/*.spec.(ts|tsx)"
-    ],
     "coverageReporters": [
       "html"
     ]
@@ -144,14 +124,13 @@
     },
     "plugins": {
       "@release-it/conventional-changelog": {
-        "preset": "angular"
+        "preset": "conventionalcommits"
       }
     }
   },
   "eslintIgnore": [
     "node_modules/",
-    "lib/",
-    "src/utils/hash32.ts"
+    "lib/"
   ],
   "react-native-builder-bob": {
     "source": "src",

package/src/UnistylesTheme.tsx

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