react-native-unistyles 2.0.0-alpha.1 → 2.0.0-alpha.10

package/src/utils/normalizer.ts

@@ -0,0 +1,99 @@
+// based on react-native-web normalizer
+// https://github.com/necolas/react-native-web
+import normalizeColors from '@react-native/normalize-colors'
+import type { TextShadow, Transforms, BoxShadow } from '../types'
+
+type Preprocessor = {
+    createTextShadowValue(style: TextShadow): string,
+    createBoxShadowValue(style: Required<BoxShadow>): string,
+    createTransformValue(transforms: Required<Transforms>): string,
+}
+
+export const normalizeColor = (color: string, opacity: number = 1) => {
+    // If the opacity is 1 there's no need to normalize the color
+    if (opacity === 1) {
+        return color
+    }
+
+    const integer = normalizeColors(color) as number | null
+
+    // If the colour is an unknown format, the return value is null
+    if (integer === null) {
+        return color
+    }
+
+    const hex = integer.toString(16).padStart(8, '0')
+
+    if (hex.length === 8) {
+        const [r = 0, g = 0, b = 0, a = 1] = hex
+            .split(/(?=(?:..)*$)/)
+            .map(x => parseInt(x, 16))
+            .filter(num => !isNaN(num))
+
+        return `rgba(${r},${g},${b},${((a as number) / 255) * opacity})`
+    }
+
+    return color
+}
+
+export const normalizeNumericValue = (value: number) => value ? `${value}px` : value
+const normalizeTransform = (key: string, value: number | string) => {
+    if (key.includes('scale')) {
+        return value
+    }
+
+    if (typeof value === 'number') {
+        return normalizeNumericValue(value)
+    }
+
+    return value
+}
+
+const createTextShadowValue = (style: TextShadow) => {
+    // at this point every prop is present
+    const { textShadowColor, textShadowOffset, textShadowRadius } = style
+    const offsetX = normalizeNumericValue(textShadowOffset.width)
+    const offsetY = normalizeNumericValue(textShadowOffset.height)
+    const radius = normalizeNumericValue(textShadowRadius)
+    const color = normalizeColor(textShadowColor as string)
+
+    return `${offsetX} ${offsetY} ${radius} ${color}`
+}
+
+const createBoxShadowValue = (style: BoxShadow) => {
+    // at this point every prop is present
+    const { shadowColor, shadowOffset, shadowOpacity, shadowRadius } = style
+    const offsetX = normalizeNumericValue(shadowOffset.width)
+    const offsetY = normalizeNumericValue(shadowOffset.height)
+    const radius = normalizeNumericValue(shadowRadius)
+    const color = normalizeColor(shadowColor as string, shadowOpacity as number)
+
+    return `${offsetX} ${offsetY} ${radius} ${color}`
+}
+
+const createTransformValue = (transforms: Transforms) => transforms
+    .map(transform => {
+        const [key] = Object.keys(transform)
+
+        if (!key) {
+            return undefined
+        }
+
+        const value = transform[key as keyof typeof transform]
+
+        switch(key) {
+            case 'matrix':
+            case 'matrix3d':
+                return `${key}(${(value as Array<number>).join(',')})`
+            default:
+                return `${key}(${normalizeTransform(key, value)})`
+        }
+    })
+    .filter(Boolean)
+    .join(' ')
+
+export const preprocessor: Preprocessor = {
+    createTextShadowValue,
+    createBoxShadowValue,
+    createTransformValue
+}

package/src/utils/styles.ts

@@ -1,72 +1,35 @@
-import type { Breakpoints, CustomNamedStyles, ScreenSize, SortedBreakpointEntries } from '../types'
-import { getValueForBreakpoint } from './breakpoints'
+import type { CustomNamedStyles, ScreenSize, NestedStyle } from '../types'
+import { getValueForNestedStyle } from './breakpoints'
 import { normalizeStyles } from './normalizeStyles'
-import { isWeb } from './common'
+import type { UnistylesBreakpoints } from '../global'
+import { isAndroid, isIOS, isWeb } from './common'
 
-/**
- * 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 const proxifyFunction = <B extends Breakpoints>(
-    fn: Function, breakpoint: keyof B & string,
+export const proxifyFunction = (
+    fn: Function, breakpoint: keyof UnistylesBreakpoints & string,
     screenSize: ScreenSize,
-    breakpointPairs: SortedBreakpointEntries<B>
+    variant?: string
 ): Function => new Proxy(fn, {
     apply: (target, thisArg, argumentsList) =>
-        parseStyle(target.apply(thisArg, argumentsList), breakpoint, screenSize, breakpointPairs)
+        parseStyle(target.apply(thisArg, argumentsList), breakpoint, screenSize, variant)
 })
 
-/**
- * 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 const parseStyle = <T, B extends Breakpoints>(
-    style: CustomNamedStyles<T, B>,
-    breakpoint: keyof B & string,
+export const isPlatformColor = <T extends {}>(value: T): boolean => {
+    if (isIOS) {
+        return 'semantic' in value && typeof value.semantic === 'object'
+    }
+
+    return isAndroid && 'resource_paths' in value && typeof value.resource_paths === 'object'
+}
+
+export const parseStyle = <T>(
+    style: CustomNamedStyles<T>,
+    breakpoint: keyof UnistylesBreakpoints & string,
     screenSize: ScreenSize,
-    breakpointPairs: SortedBreakpointEntries<B>
+    variant?: string
 ): T => {
-    const entries = Object.entries(style) as [[
+    const entries = Object.entries(style || {}) as [[
         keyof T,
-        CustomNamedStyles<T, B> | Record<keyof B & string, string | number | undefined>]
+        CustomNamedStyles<T> | NestedStyle]
     ]
 
     const parsedStyles = Object
@@ -77,7 +40,7 @@ export const parseStyle = <T, B extends Breakpoints>(
                 if (hasNestedProperties) {
                     return [
                         key,
-                        parseStyle(value as CustomNamedStyles<T, B>, breakpoint, screenSize, breakpointPairs)
+                        parseStyle(value as CustomNamedStyles<T>, breakpoint, screenSize, variant)
                     ]
                 }
 
@@ -86,12 +49,12 @@ export const parseStyle = <T, B extends Breakpoints>(
                 if (isTransform && Array.isArray(value)) {
                     return [
                         key,
-                        value.map(value => parseStyle(value, breakpoint, screenSize, breakpointPairs))
+                        value.map(value => parseStyle(value, breakpoint, screenSize, variant))
                     ]
                 }
 
                 const isDynamicFunction = typeof value === 'function'
-                const isValidStyle = typeof value !== 'object'
+                const isValidStyle = typeof value !== 'object' || isPlatformColor(value)
 
                 if (isDynamicFunction || isValidStyle) {
                     return [key, value]
@@ -99,17 +62,15 @@ export const parseStyle = <T, B extends Breakpoints>(
 
                 return [
                     key,
-                    getValueForBreakpoint<B>(
-                        value as Record<keyof B & string, string | number | undefined>,
-                        breakpoint,
-                        screenSize,
-                        breakpointPairs
+                    getValueForNestedStyle(
+                        value as NestedStyle,
+                        variant
                     )
                 ]
             })
         )
 
-    return isWeb()
+    return isWeb
         ? normalizeStyles(parsedStyles)
         : parsedStyles
 }

package/src/utils/variants.ts

@@ -0,0 +1,17 @@
+import type { Optional, NestedStyle } from '../types'
+
+export const getKeyForVariant = (value: NestedStyle, variant?: string): Optional<keyof typeof value> => {
+    if (!value.variants) {
+        return undefined
+    }
+
+    if (variant && variant in value.variants) {
+        return variant as keyof typeof value
+    }
+
+    if ('default' in value.variants) {
+        return 'default' as keyof typeof value
+    }
+
+    return undefined
+}

package/lib/commonjs/UnistylesTheme.js

@@ -1,21 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.UnistylesTheme = exports.UnistylesContext = void 0;
-var _react = _interopRequireWildcard(require("react"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const UnistylesContext = exports.UnistylesContext = /*#__PURE__*/(0, _react.createContext)({});
-const UnistylesTheme = _ref => {
-  let {
-    theme,
-    children
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(UnistylesContext.Provider, {
-    value: theme
-  }, children);
-};
-exports.UnistylesTheme = UnistylesTheme;
-//# sourceMappingURL=UnistylesTheme.js.map

package/lib/commonjs/UnistylesTheme.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","UnistylesContext","exports","createContext","UnistylesTheme","_ref","theme","children","createElement","Provider","value"],"sourceRoot":"../../src","sources":["UnistylesTheme.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAA4C,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAOrC,MAAMY,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,gBAAG,IAAAE,oBAAa,EAAC,CAAC,CAAC,CAAC;AAE1C,MAAMC,cAA4D,GAAGC,IAAA;EAAA,IAAC;IACzEC,KAAK;IACLC;EACJ,CAAC,GAAAF,IAAA;EAAA,oBACG5B,MAAA,CAAAS,OAAA,CAAAsB,aAAA,CAACP,gBAAgB,CAACQ,QAAQ;IAACC,KAAK,EAAEJ;EAAM,GACnCC,QACsB,CAAC;AAAA,CAC/B;AAAAL,OAAA,CAAAE,cAAA,GAAAA,cAAA"}

package/lib/commonjs/createUnistyles.js

@@ -1,57 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createUnistyles = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _UnistylesTheme = require("./UnistylesTheme");
-var _hooks = require("./hooks");
-var _utils = require("./utils");
-const createUnistyles = breakpoints => {
-  const sortedBreakpoints = (0, _utils.sortAndValidateBreakpoints)(breakpoints);
-  const sortedBreakpointEntries = Object.entries(sortedBreakpoints);
-  return {
-    createStyleSheet: styles => {
-      if (typeof styles === 'function') {
-        return styles;
-      }
-      return styles;
-    },
-    useStyles: stylesheet => {
-      const theme = (0, _react.useContext)(_UnistylesTheme.UnistylesContext);
-      const screenSize = (0, _hooks.useDimensions)();
-      const breakpoint = (0, _utils.getBreakpointFromScreenWidth)(screenSize.width, sortedBreakpointEntries);
-      if (!stylesheet) {
-        return {
-          theme,
-          breakpoint,
-          styles: {}
-        };
-      }
-      const parsedStyles = (0, _react.useMemo)(() => typeof stylesheet === 'function' ? stylesheet(theme) : stylesheet, [theme, stylesheet]);
-      const dynamicStyleSheet = (0, _react.useMemo)(() => Object.entries(parsedStyles).reduce((acc, _ref) => {
-        let [key, value] = _ref;
-        const style = value;
-        if (typeof value === 'function') {
-          return {
-            ...acc,
-            [key]: (0, _utils.proxifyFunction)(value, breakpoint, screenSize, sortedBreakpointEntries)
-          };
-        }
-        return _reactNative.StyleSheet.create({
-          ...acc,
-          [key]: (0, _utils.parseStyle)(style, breakpoint, screenSize, sortedBreakpointEntries)
-        });
-      }, {}), [breakpoint, screenSize, parsedStyles]);
-      return {
-        theme,
-        breakpoint,
-        styles: dynamicStyleSheet
-      };
-    }
-  };
-};
-exports.createUnistyles = createUnistyles;
-//# sourceMappingURL=createUnistyles.js.map

package/lib/commonjs/createUnistyles.js.map

@@ -1 +0,0 @@
-{"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","breakpoint","getBreakpointFromScreenWidth","width","parsedStyles","useMemo","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;MAClC,MAAMC,UAAU,GAAG,IAAAC,mCAA4B,EAAIH,UAAU,CAACI,KAAK,EAAEd,uBAAuB,CAAC;MAE7F,IAAI,CAACM,UAAU,EAAE;QACb,OAAO;UACHC,KAAK;UACLK,UAAU;UACVR,MAAM,EAAE,CAAC;QACb,CAAC;MACL;MAEA,MAAMW,YAAY,GAAG,IAAAC,cAAO,EAAC,MAAM,OAAOV,UAAU,KAAK,UAAU,GAC7DA,UAAU,CAACC,KAAK,CAAC,GACjBD,UAAU,EAAE,CAACC,KAAK,EAAED,UAAU,CAAC,CAAC;MAEtC,MAAMW,iBAAiB,GAAG,IAAAD,cAAO,EAAC,MAAMf,MAAM,CACzCC,OAAO,CAACa,YAAY,CAAC,CACrBG,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,EAAEV,UAAU,EAAEF,UAAU,EAAEV,uBAAuB;UACpF,CAAC;QACL;QAEA,OAAOyB,uBAAU,CAACC,MAAM,CAAC;UACrB,GAAGP,GAAG;UACN,CAACE,GAAG,GAAG,IAAAM,iBAAU,EAAQJ,KAAK,EAAEX,UAAU,EAAEF,UAAU,EAAEV,uBAAuB;QACnF,CAAC,CAAC;MACN,CAAC,EAAE,CAAC,CAAO,CAAC,EAAE,CAACY,UAAU,EAAEF,UAAU,EAAEK,YAAY,CAAC,CAAC;MAEzD,OAAO;QACHR,KAAK;QACLK,UAAU;QACVR,MAAM,EAAEa;MACZ,CAAC;IACL;EACJ,CAAC;AACL,CAAC;AAAAW,OAAA,CAAAhC,eAAA,GAAAA,eAAA"}

package/lib/commonjs/hooks/useDimensions.js

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

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

@@ -1 +0,0 @@
-{"version":3,"names":["_reactNative","require","useDimensions","useWindowDimensions","exports"],"sourceRoot":"../../../src","sources":["hooks/useDimensions.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAGO,MAAMC,aAAa,GAAGA,CAAA,KAAkB,IAAAC,gCAAmB,EAAC,CAAC;AAAAC,OAAA,CAAAF,aAAA,GAAAA,aAAA"}

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

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

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

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

package/lib/commonjs/types/mediaQueries.js

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

package/lib/commonjs/utils/mediaQueries.js

@@ -1,189 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isWithinTheWidthAndHeight = exports.isWithinTheWidth = exports.isWithinTheHeight = exports.isWithinBreakpoint = exports.isMediaQuery = exports.getKeyForCustomMediaQuery = exports.extractValues = void 0;
-/**
- * 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]
- */
-const extractValues = codedValue => {
-  const [lh, rh] = codedValue.replace(/[wh[\]]/g, '').split(',');
-  return rh ? [Number(lh), Number(rh)] : [Number(lh)];
-};
-
-/**
- * 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
- */
-exports.extractValues = extractValues;
-const isWithinBreakpoint = (query, screenSize) => {
-  if (query.includes('w') && query.includes('h')) {
-    return isWithinTheWidthAndHeight(query, screenSize);
-  }
-  if (query.charAt(0) === 'w') {
-    return isWithinTheWidth(query, screenSize.width);
-  }
-  if (query.charAt(0) === 'h') {
-    return isWithinTheHeight(query, screenSize.height);
-  }
-  return false;
-};
-
-/**
- * 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
- */
-exports.isWithinBreakpoint = isWithinBreakpoint;
-const isWithinTheWidth = (query, width) => {
-  const [minWidth, maxWidth] = extractValues(query);
-  if (maxWidth && width >= minWidth && width <= maxWidth) {
-    return true;
-  }
-  return !maxWidth && width >= minWidth;
-};
-
-/**
- * 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
- */
-exports.isWithinTheWidth = isWithinTheWidth;
-const isWithinTheHeight = (query, height) => {
-  const [minHeight, maxHeight] = extractValues(query);
-  if (maxHeight && height >= minHeight && height <= maxHeight) {
-    return true;
-  }
-  return !maxHeight && height >= minHeight;
-};
-
-/**
- * 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
- */
-exports.isWithinTheHeight = isWithinTheHeight;
-const isWithinTheWidthAndHeight = (query, screenSize) => {
-  const result = query.split(':').filter(Boolean).map(q => isWithinBreakpoint(q, screenSize)).filter(Boolean);
-  return result.length === 2;
-};
-
-/**
- * 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
- */
-exports.isWithinTheWidthAndHeight = isWithinTheWidthAndHeight;
-const isMediaQuery = query => {
-  const regex = /^(?:(:w\[\d*(?:,\s?\d+)?])?(:h\[\d*(?:,\s?\d+)?])?|(:h\[\d*(?:,\s?\d+)?])?(:w\[\d*(?:,\s?\d+)?])?)$/;
-  return query.length > 0 && regex.test(query);
-};
-
-/**
- * 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]
- */
-exports.isMediaQuery = isMediaQuery;
-const getKeyForCustomMediaQuery = (mediaQueries, screenSize) => {
-  const [matchedQuery] = mediaQueries.flatMap(_ref => {
-    let [key] = _ref;
-    if (key.includes('w') && key.includes('h')) {
-      return isWithinBreakpoint(key, screenSize) ? key : undefined;
-    }
-    return key.split(':').filter(Boolean).map(query => isWithinBreakpoint(query, screenSize) ? key : undefined);
-  }).filter(Boolean);
-  return matchedQuery;
-};
-exports.getKeyForCustomMediaQuery = getKeyForCustomMediaQuery;
-//# sourceMappingURL=mediaQueries.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["extractValues","codedValue","lh","rh","replace","split","Number","exports","isWithinBreakpoint","query","screenSize","includes","isWithinTheWidthAndHeight","charAt","isWithinTheWidth","width","isWithinTheHeight","height","minWidth","maxWidth","minHeight","maxHeight","result","filter","Boolean","map","q","length","isMediaQuery","regex","test","getKeyForCustomMediaQuery","mediaQueries","matchedQuery","flatMap","_ref","key","undefined"],"sourceRoot":"../../../src","sources":["utils/mediaQueries.ts"],"mappings":"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"}

package/lib/module/UnistylesTheme.js

@@ -1,12 +0,0 @@
-import React, { createContext } from 'react';
-export const UnistylesContext = /*#__PURE__*/createContext({});
-export const UnistylesTheme = _ref => {
-  let {
-    theme,
-    children
-  } = _ref;
-  return /*#__PURE__*/React.createElement(UnistylesContext.Provider, {
-    value: theme
-  }, children);
-};
-//# sourceMappingURL=UnistylesTheme.js.map

package/lib/module/UnistylesTheme.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","createContext","UnistylesContext","UnistylesTheme","_ref","theme","children","createElement","Provider","value"],"sourceRoot":"../../src","sources":["UnistylesTheme.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,aAAa,QAAQ,OAAO;AAO5C,OAAO,MAAMC,gBAAgB,gBAAGD,aAAa,CAAC,CAAC,CAAC,CAAC;AAEjD,OAAO,MAAME,cAA4D,GAAGC,IAAA;EAAA,IAAC;IACzEC,KAAK;IACLC;EACJ,CAAC,GAAAF,IAAA;EAAA,oBACGJ,KAAA,CAAAO,aAAA,CAACL,gBAAgB,CAACM,QAAQ;IAACC,KAAK,EAAEJ;EAAM,GACnCC,QACsB,CAAC;AAAA,CAC/B"}