@audira/carbon-react-native 0.0.1-alpha.13 → 0.0.1-alpha.15

package/README.md

@@ -130,9 +130,9 @@ import {
 
 export default function YourReactComponent() {
   /**
-   * Keep this to make `style` prop reactive on color scheme changes
+   * Keep this to make `style` prop reactive on color scheme change
    */
-  useContext(ThemeContext)
+  StyleSheet.use()
 
   return (
     <Text type="label_01" style={ style.linkText }>
@@ -141,12 +141,10 @@ export default function YourReactComponent() {
   )
 }
 
-const style = StyleSheet.create(color => {
-  return {
-    linkText: {
-      color: color.link_primary,
-    },
-  }
+const style = StyleSheet.create({
+  linkText: {
+    color: StyleSheet.color.link_primary,
+  },
 })
 ```
 

package/lib/commonjs/_carbon-react-native/index.js

@@ -4,7 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CarbonReactNative = CarbonReactNative;
-var _index = require("../providers/index.js");
+var _index = require("../providers/breakpoint/index.js");
+var _index2 = require("../providers/global-config/index.js");
+var _index3 = require("../providers/theme/index.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function CarbonReactNative({
   globalConfig,
@@ -12,12 +14,14 @@ function CarbonReactNative({
   overrideColor,
   children
 }) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.GlobalConfigProvider, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.GlobalConfigProvider, {
     ...globalConfig,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ThemeProvider, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.ThemeProvider, {
       colorScheme: colorScheme,
       overrideColor: overrideColor,
-      children: children
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.BreakpointProvider, {
+        children: children
+      })
     })
   });
 }

package/lib/commonjs/_carbon-react-native/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_index","require","_jsxRuntime","CarbonReactNative","globalConfig","colorScheme","overrideColor","children","jsx","GlobalConfigProvider","ThemeProvider"],"sourceRoot":"../../../src","sources":["_carbon-react-native/index.tsx"],"mappings":";;;;;;AAIA,IAAAA,MAAA,GAAAC,OAAA;AAIqB,IAAAC,WAAA,GAAAD,OAAA;AAMd,SAASE,iBAAiBA,CAAC;EACjCC,YAAY;EACZC,WAAW;EACXC,aAAa;EACbC;AACuB,CAAC,EAAE;EAE1B,oBACC,IAAAL,WAAA,CAAAM,GAAA,EAACR,MAAA,CAAAS,oBAAoB;IAAA,GACfL,YAAY;IAAAG,QAAA,eAEjB,IAAAL,WAAA,CAAAM,GAAA,EAACR,MAAA,CAAAU,aAAa;MACbL,WAAW,EAAGA,WAAa;MAC3BC,aAAa,EAAGA,aAAe;MAAAC,QAAA,EAE7BA;IAAQ,CACI;EAAC,CACK,CAAC;AAGzB","ignoreList":[]}
+{"version":3,"names":["_index","require","_index2","_index3","_jsxRuntime","CarbonReactNative","globalConfig","colorScheme","overrideColor","children","jsx","GlobalConfigProvider","ThemeProvider","BreakpointProvider"],"sourceRoot":"../../../src","sources":["_carbon-react-native/index.tsx"],"mappings":";;;;;;AAIA,IAAAA,MAAA,GAAAC,OAAA;AAIA,IAAAC,OAAA,GAAAD,OAAA;AAIA,IAAAE,OAAA,GAAAF,OAAA;AAG2B,IAAAG,WAAA,GAAAH,OAAA;AAMpB,SAASI,iBAAiBA,CAAC;EACjCC,YAAY;EACZC,WAAW;EACXC,aAAa;EACbC;AACuB,CAAC,EAAE;EAE1B,oBACC,IAAAL,WAAA,CAAAM,GAAA,EAACR,OAAA,CAAAS,oBAAoB;IAAA,GACfL,YAAY;IAAAG,QAAA,eAEjB,IAAAL,WAAA,CAAAM,GAAA,EAACP,OAAA,CAAAS,aAAa;MACbL,WAAW,EAAGA,WAAa;MAC3BC,aAAa,EAAGA,aAAe;MAAAC,QAAA,eAE/B,IAAAL,WAAA,CAAAM,GAAA,EAACV,MAAA,CAAAa,kBAAkB;QAAAJ,QAAA,EAChBA;MAAQ,CACS;IAAC,CACP;EAAC,CACK,CAAC;AAGzB","ignoreList":[]}

package/lib/commonjs/_style-sheet/breakpoint.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.breakpoint = void 0;
+/**
+ * Use `Breakpoint` from the `carbon-react-native-elements` to get the actual value of each breakpoint.  
+ * This is just a constant name.
+ */
+const breakpoint = exports.breakpoint = {
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+  x_large: 'x_large',
+  max: 'max'
+};
+//# sourceMappingURL=breakpoint.js.map

package/lib/commonjs/_style-sheet/breakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["breakpoint","exports","small","medium","large","x_large","max"],"sourceRoot":"../../../src","sources":["_style-sheet/breakpoint.ts"],"mappings":";;;;;;AAIA;AACA;AACA;AACA;AACO,MAAMA,UAAU,GAAAC,OAAA,CAAAD,UAAA,GACtB;EACCE,KAAK,EAAE,OAAO;EACdC,MAAM,EAAE,QAAQ;EAChBC,KAAK,EAAE,OAAO;EACdC,OAAO,EAAE,SAAS;EAClBC,GAAG,EAAE;AACN,CAA6D","ignoreList":[]}

package/lib/commonjs/_style-sheet/color.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.color = void 0;
+var _carbonReactNativeElements = require("@audira/carbon-react-native-elements");
+const color = exports.color = Object.keys(_carbonReactNativeElements.Color.Token.gray_10).reduce((acc, key) => {
+  acc[key] = key;
+  return acc;
+}, {});
+//# sourceMappingURL=color.js.map

package/lib/commonjs/_style-sheet/color.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_carbonReactNativeElements","require","color","exports","Object","keys","Color","Token","gray_10","reduce","acc","key"],"sourceRoot":"../../../src","sources":["_style-sheet/color.ts"],"mappings":";;;;;;AAAA,IAAAA,0BAAA,GAAAC,OAAA;AAKO,MAAMC,KAAK,GAAAC,OAAA,CAAAD,KAAA,GACjBE,MAAM,CACJC,IAAI,CAACC,gCAAK,CAACC,KAAK,CAACC,OAAO,CAAC,CACzBC,MAAM,CAAiC,CAACC,GAAG,EAAEC,GAAG,KAAK;EACrDD,GAAG,CAACC,GAAG,CAAe,GAAGA,GAAiB;EAC1C,OAAOD,GAAG;AACX,CAAC,EAAE,CAAC,CAAmC,CAAC","ignoreList":[]}

package/lib/commonjs/_style-sheet/create.js

@@ -7,17 +7,63 @@ exports.create = create;
 var _reactNative = require("react-native");
 var _carbonReactNativeElements = require("@audira/carbon-react-native-elements");
 var _index = require("../globals/index.js");
-function create(fn) {
-  const styleRef = fn(colorTokenStrings),
-    baseStyle = {},
-    coloredStyle = {};
-  for (const styleName in styleRef) {
-    const style = styleRef[styleName];
-    for (const styleProp_ in style) {
-      const styleProp = styleProp_;
-      if (colorStyleProps.indexOf(styleProp) > -1) {
-        const coloredStyleName_G10 = `${prefixColorStyleName.gray_10}${styleName}`,
-          coloredStyleName_G100 = `${prefixColorStyleName.gray_100}${styleName}`;
+var _breakpoint = require("./breakpoint.js");
+/**
+ * Create style sheet to help using color token of current color scheme and current breakpoint declaratively.  
+ * It makes your code way more shorter which doesn't need to create conditional of current color scheme or current breakpoint in the style prop implementation
+ * 
+ * @example
+ * ```tsx
+ * import {
+ * 	View,
+ * } from 'react-native'
+ * 
+ * import {
+ * 	StyleSheet,
+ * } from '@audira/carbon-react-native'
+ * 
+ * export function Component({ children }) {
+ * 	return (
+ * 		<View style={ style.foo }>
+ * 			{ children }
+ * 		<View>
+ * 	)
+ * }
+ * 
+ * const style = StyleSheet.create({
+ * 	foo: {
+ * 		backgroundColor: StyleSheet.color.background_inverse,
+ * 		// it will be resolved to the `background_inverse` of current color scheme
+ * 
+ * 		[StyleSheet.breakpoint.medium]: {
+ * 			flexDirection: 'row',
+ * 			// this style will has row direction of flex box
+ * 			// for screen that equal and larger than the medium breakpoint
+ * 		},
+ * 	},
+ * })
+ * ```
+ */
+function create(styles) {
+  const normalStyle = {},
+    coloredStyle = {},
+    breakpointStyle = {};
+  let containBreakpointStyle = false;
+  for (const name in styles) {
+    const style = styles[name];
+    for (const _styleProp_ in style) {
+      if (_breakpoint.breakpoint[_styleProp_]) {
+        containBreakpointStyle = true;
+        breakpointStyle[`${_styleProp_}${name}`] = style[_styleProp_];
+      } else if (colorStyleProps.indexOf(_styleProp_) > -1) {
+        /**
+         * Resolve color string to the Carbon color (if any) for style prop or attribute that contain 'color' in the name like 'color', 'backgroundColor', 'borderColor', etc
+         * @see {@link colorStyleProps}
+         */
+
+        const styleProp = _styleProp_,
+          coloredStyleName_G10 = `${prefixColorStyleName.gray_10}${name}`,
+          coloredStyleName_G100 = `${prefixColorStyleName.gray_100}${name}`;
         if (!coloredStyle[coloredStyleName_G10]) {
           coloredStyle[coloredStyleName_G10] = {};
         }
@@ -28,32 +74,40 @@ function create(fn) {
         coloredStyle[coloredStyleName_G10][styleProp] = _carbonReactNativeElements.Color.Token.gray_10[colorStr] || colorStr;
         coloredStyle[coloredStyleName_G100][styleProp] = _carbonReactNativeElements.Color.Token.gray_100[colorStr] || colorStr;
       } else {
-        baseStyle[styleName] = style;
+        normalStyle[name] = style;
       }
     }
   }
-  const baseStyleSheet = _reactNative.StyleSheet.create(baseStyle),
-    coloredStyleSheet = _reactNative.StyleSheet.create(coloredStyle);
-  return Object.keys(styleRef).reduce((acc, styleName) => {
+  const normalStyleSheet = _reactNative.StyleSheet.create(normalStyle),
+    coloredStyleSheet = _reactNative.StyleSheet.create(coloredStyle),
+    breakpointStyleSheet = _reactNative.StyleSheet.create(breakpointStyle);
+  return Object.keys(styles).reduce((acc, styleName) => {
     Object.defineProperty(acc, styleName, {
       get() {
-        const colorScheme = _index.ColorSchemeGlobal.get();
-        if (colorScheme == 'gray_10') {
-          return [baseStyleSheet[styleName], coloredStyleSheet[`${prefixColorStyleName.gray_10}${styleName}`]];
-        }
-        return [baseStyle[styleName], coloredStyleSheet[`${prefixColorStyleName.gray_100}${styleName}`]];
+        const colorScheme = _index.ColorSchemeGlobal.get(),
+          breakpoint = _index.BreakpointGlobal.get();
+        return [normalStyleSheet[styleName], colorScheme == 'gray_10' ? coloredStyleSheet[`${prefixColorStyleName.gray_10}${styleName}`] : coloredStyleSheet[`${prefixColorStyleName.gray_100}${styleName}`], containBreakpointStyle ? breakpointStyleSheet[`${breakpoint}${styleName}`] || getBreakpointUpStyle(breakpoint, breakpointStyleSheet, styleName) : null];
       }
     });
     return acc;
   }, {});
 }
-const colorStyleProps = ['color', 'backgroundColor', 'tintColor', 'shadowColor', 'textDecorationColor', 'textShadowColor', 'overlayColor', 'borderColor', 'borderEndColor', 'borderStartColor', 'borderTopColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderBlockColor', 'borderBlockEndColor', 'borderBlockStartColor'],
-  colorTokenStrings = Object.keys(_carbonReactNativeElements.Color.Token.gray_10).reduce((acc, key) => {
-    acc[key] = key;
-    return acc;
-  }, {}),
+const colorStyleProps = ['backgroundColor', 'borderColor', 'borderEndColor', 'borderStartColor', 'borderTopColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderBlockColor', 'borderBlockEndColor', 'borderBlockStartColor', 'color', 'overlayColor', 'textDecorationColor', 'textShadowColor', 'tintColor', 'shadowColor'],
   prefixColorStyleName = {
     gray_10: 'gray_10__',
     gray_100: 'gray_100__'
-  };
+  },
+  breakpointDown = ['max', 'x_large', 'large', 'medium', 'small'];
+function getBreakpointUpStyle(breakpoint, breakpointStyle, styleName) {
+  const bpSliced = breakpointDown.slice(breakpointDown.indexOf(breakpoint));
+  let style = null;
+  for (let i = 0; i < bpSliced.length; i++) {
+    const bpStyle = breakpointStyle[`${bpSliced[i]}${styleName}`];
+    if (bpStyle) {
+      style = bpStyle;
+      break;
+    }
+  }
+  return style;
+}
 //# sourceMappingURL=create.js.map

package/lib/commonjs/_style-sheet/create.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_carbonReactNativeElements","_index","create","fn","styleRef","colorTokenStrings","baseStyle","coloredStyle","styleName","style","styleProp_","styleProp","colorStyleProps","indexOf","coloredStyleName_G10","prefixColorStyleName","gray_10","coloredStyleName_G100","gray_100","colorStr","Color","Token","baseStyleSheet","StyleSheet","coloredStyleSheet","Object","keys","reduce","acc","defineProperty","get","colorScheme","ColorSchemeGlobal","key"],"sourceRoot":"../../../src","sources":["_style-sheet/create.ts"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_reactNative","require","_carbonReactNativeElements","_index","_breakpoint","create","styles","normalStyle","coloredStyle","breakpointStyle","containBreakpointStyle","name","style","_styleProp_","breakpointStyleProps","colorStyleProps","indexOf","styleProp","coloredStyleName_G10","prefixColorStyleName","gray_10","coloredStyleName_G100","gray_100","colorStr","Color","Token","normalStyleSheet","StyleSheet","coloredStyleSheet","breakpointStyleSheet","Object","keys","reduce","acc","styleName","defineProperty","get","colorScheme","ColorSchemeGlobal","breakpoint","BreakpointGlobal","getBreakpointUpStyle","breakpointDown","bpSliced","slice","i","length","bpStyle"],"sourceRoot":"../../../src","sources":["_style-sheet/create.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAOA,IAAAC,0BAAA,GAAAD,OAAA;AAMA,IAAAE,MAAA,GAAAF,OAAA;AASA,IAAAG,WAAA,GAAAH,OAAA;AAgCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASI,MAAMA,CACrBC,MAAc,EACL;EACT,MACCC,WAAkC,GACjC,CAAC,CAAC;IAEHC,YAAmC,GAClC,CAAC,CAAC;IAEHC,eAAsC,GACrC,CAAC,CAAC;EAEJ,IAAIC,sBAAsB,GAAG,KAAK;EAElC,KAAI,MAAMC,IAAI,IAAIL,MAAM,EAAE;IACzB,MAAMM,KAAK,GAAGN,MAAM,CAACK,IAAI,CAAC;IAE1B,KAAI,MAAME,WAAW,IAAID,KAAK,EAAE;MAC/B,IAAGE,sBAAoB,CAACD,WAAW,CAA0B,EAAE;QAE9DH,sBAAsB,GAAG,IAAI;QAC7BD,eAAe,CAAC,GAAGI,WAAW,GAAGF,IAAI,EAAE,CAAC,GAAIC,KAAK,CAAqBC,WAAW,CAAU;MAE5F,CAAC,MAAM,IAAGE,eAAe,CAACC,OAAO,CAACH,WAA0B,CAAC,GAAG,CAAC,CAAC,EAAE;QAEnE;AACJ;AACA;AACA;;QAEI,MACCI,SAAS,GACRJ,WAA0B;UAE3BK,oBAAoB,GACnB,GAAGC,oBAAoB,CAACC,OAAO,GAAGT,IAAI,EAAE;UAEzCU,qBAAqB,GACpB,GAAGF,oBAAoB,CAACG,QAAQ,GAAGX,IAAI,EAAE;QAE3C,IAAG,CAACH,YAAY,CAACU,oBAAoB,CAAC,EAAE;UACvCV,YAAY,CAACU,oBAAoB,CAAC,GAAG,CAAC,CAAC;QACxC;QACA,IAAG,CAACV,YAAY,CAACa,qBAAqB,CAAC,EAAE;UACxCb,YAAY,CAACa,qBAAqB,CAAC,GAAG,CAAC,CAAC;QACzC;QAEA,MAAME,QAAQ,GAAIX,KAAK,CAAWK,SAAS,CAAW;QAEtDT,YAAY,CAACU,oBAAoB,CAAC,CAACD,SAAS,CAAC,GAC5CO,gCAAK,CAACC,KAAK,CAACL,OAAO,CAACG,QAAQ,CAAe,IAC3CA,QAAQ;QAETf,YAAY,CAACa,qBAAqB,CAAC,CAACJ,SAAS,CAAC,GAC7CO,gCAAK,CAACC,KAAK,CAACH,QAAQ,CAACC,QAAQ,CAAe,IAC5CA,QAAQ;MAEV,CAAC,MAAM;QAENhB,WAAW,CAACI,IAAI,CAAC,GAAGC,KAAc;MAEnC;IACD;EACD;EAEA,MACCc,gBAAgB,GACfC,uBAAU,CAACtB,MAAM,CAAwBE,WAAW,CAAC;IAEtDqB,iBAAiB,GAChBD,uBAAU,CAACtB,MAAM,CAAwBG,YAAY,CAAC;IAEvDqB,oBAAoB,GACnBF,uBAAU,CAACtB,MAAM,CAAwBI,eAAe,CAAC;EAE3D,OAAOqB,MAAM,CAACC,IAAI,CAACzB,MAAM,CAAC,CACxB0B,MAAM,CAAS,CACfC,GAAG,EACHC,SAAS,KACL;IACJJ,MAAM,CAACK,cAAc,CAACF,GAAG,EAAEC,SAAS,EAAE;MACrCE,GAAGA,CAAA,EAAG;QACL,MACCC,WAAW,GACVC,wBAAiB,CAACF,GAAG,CAAC,CAAC;UAExBG,UAAU,GACTC,uBAAgB,CAACJ,GAAG,CAAC,CAAC;QAExB,OAAO,CACNV,gBAAgB,CAACQ,SAAS,CAAC,EAE3BG,WAAW,IAAI,SAAS,GACrBT,iBAAiB,CAAC,GAAGT,oBAAoB,CAACC,OAAO,GAAGc,SAAS,EAAE,CAAC,GAChEN,iBAAiB,CAAC,GAAGT,oBAAoB,CAACG,QAAQ,GAAGY,SAAS,EAAE,CAAC,EAEpExB,sBAAsB,GACnBmB,oBAAoB,CAAC,GAAGU,UAAU,GAAGL,SAAS,EAAE,CAAC,IAClDO,oBAAoB,CAACF,UAAU,EAAEV,oBAAoB,EAAEK,SAAS,CAAC,GAChE,IAAI,CACP;MACF;IACD,CAAC,CAAC;IACF,OAAOD,GAAG;EACX,CAAC,EAAE,CAAC,CAAU,CAAC;AACjB;AAEA,MACClB,eAA+E,GAC9E,CACC,iBAAiB,EACjB,aAAa,EACb,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,EAChB,mBAAmB,EACnB,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,uBAAuB,EACvB,OAAO,EACP,cAAc,EACd,qBAAqB,EACrB,iBAAiB,EACjB,WAAW,EACX,aAAa,CACb;EAEFI,oBAA2D,GAC1D;IACCC,OAAO,EAAE,WAAW;IACpBE,QAAQ,EAAE;EACX,CAAC;EAEFoB,cAAiC,GAChC,CAAC,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;AAEhD,SAASD,oBAAoBA,CAC5BF,UAA2B,EAC3B9B,eAAsC,EACtCyB,SAAiB,EACF;EACf,MAAMS,QAAQ,GAAGD,cAAc,CAACE,KAAK,CAACF,cAAc,CAAC1B,OAAO,CAACuB,UAAU,CAAC,CAAC;EACzE,IAAI3B,KAAmB,GAAG,IAAI;EAE9B,KAAI,IAAIiC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGF,QAAQ,CAACG,MAAM,EAAED,CAAC,EAAE,EAAE;IACxC,MAAME,OAAO,GAAGtC,eAAe,CAAC,GAAGkC,QAAQ,CAACE,CAAC,CAAC,GAAGX,SAAS,EAAE,CAAC;IAC7D,IAAGa,OAAO,EAAE;MACXnC,KAAK,GAAGmC,OAAO;MACf;IACD;EACD;EAEA,OAAOnC,KAAK;AACb","ignoreList":[]}

package/lib/commonjs/_style-sheet/index.js

@@ -5,10 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.StyleSheet = void 0;
 var _reactNative = require("react-native");
+var _breakpoint2 = require("./breakpoint.js");
+var _color2 = require("./color.js");
 var _create2 = require("./create.js");
+var _use2 = require("./use.js");
 let StyleSheet = exports.StyleSheet = void 0;
 (function (_StyleSheet) {
-  const create = _StyleSheet.create = _create2.create;
   const absoluteFill = _StyleSheet.absoluteFill = _reactNative.StyleSheet.absoluteFill;
+  const absoluteFillObject = _StyleSheet.absoluteFillObject = _reactNative.StyleSheet.absoluteFillObject;
+  const compose = _StyleSheet.compose = _reactNative.StyleSheet.compose;
+  const breakpoint = _StyleSheet.breakpoint = _breakpoint2.breakpoint;
+  const color = _StyleSheet.color = _color2.color;
+  const create = _StyleSheet.create = _create2.create;
+  const flatten = _StyleSheet.flatten = _reactNative.StyleSheet.flatten;
+  const hairlineWidth = _StyleSheet.hairlineWidth = _reactNative.StyleSheet.hairlineWidth;
+  const setStyleAttributePreprocessor = _StyleSheet.setStyleAttributePreprocessor = _reactNative.StyleSheet.setStyleAttributePreprocessor;
+  const use = _StyleSheet.use = _use2.use;
 })(StyleSheet || (exports.StyleSheet = StyleSheet = {}));
 //# sourceMappingURL=index.js.map

package/lib/commonjs/_style-sheet/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_create2","StyleSheet","exports","_StyleSheet","create","_create","absoluteFill","RNStyleSheet"],"sourceRoot":"../../../src","sources":["_style-sheet/index.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAIA,IAAAC,QAAA,GAAAD,OAAA;AAEiB,IAEAE,UAAU,GAAAC,OAAA,CAAAD,UAAA;AAAA,WAAAE,WAAA;EAEnB,MAAMC,MAAM,GAAAD,WAAA,CAAAC,MAAA,GAAGC,eAAO;EAEtB,MAAMC,YAAY,GAAAH,WAAA,CAAAG,YAAA,GAAGC,uBAAY,CAACD,YAAY;AAAA,GAJrCL,UAAU,KAAAC,OAAA,CAAAD,UAAA,GAAVA,UAAU","ignoreList":[]}
+{"version":3,"names":["_reactNative","require","_breakpoint2","_color2","_create2","_use2","StyleSheet","exports","_StyleSheet","absoluteFill","RNStyleSheet","absoluteFillObject","compose","breakpoint","_breakpoint","color","_color","create","_create","flatten","hairlineWidth","setStyleAttributePreprocessor","use","_use"],"sourceRoot":"../../../src","sources":["_style-sheet/index.tsx"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAIA,IAAAC,YAAA,GAAAD,OAAA;AAIA,IAAAE,OAAA,GAAAF,OAAA;AAIA,IAAAG,QAAA,GAAAH,OAAA;AAIA,IAAAI,KAAA,GAAAJ,OAAA;AAEc,IAEGK,UAAU,GAAAC,OAAA,CAAAD,UAAA;AAAA,WAAAE,WAAA;EAEnB,MAAMC,YAAY,GAAAD,WAAA,CAAAC,YAAA,GAAGC,uBAAY,CAACD,YAAY;EAE9C,MAAME,kBAAkB,GAAAH,WAAA,CAAAG,kBAAA,GAAGD,uBAAY,CAACC,kBAAkB;EAE1D,MAAMC,OAAO,GAAAJ,WAAA,CAAAI,OAAA,GAAGF,uBAAY,CAACE,OAAO;EAMpC,MAAMC,UAAU,GAAAL,WAAA,CAAAK,UAAA,GAAGC,uBAAW;EAE9B,MAAMC,KAAK,GAAAP,WAAA,CAAAO,KAAA,GAAGC,aAAM;EAEpB,MAAMC,MAAM,GAAAT,WAAA,CAAAS,MAAA,GAAGC,eAAO;EAEtB,MAAMC,OAAO,GAAAX,WAAA,CAAAW,OAAA,GAAGT,uBAAY,CAACS,OAAO;EAEpC,MAAMC,aAAa,GAAAZ,WAAA,CAAAY,aAAA,GAAGV,uBAAY,CAACU,aAAa;EAEhD,MAAMC,6BAA6B,GAAAb,WAAA,CAAAa,6BAAA,GAAGX,uBAAY,CAACW,6BAA6B;EAEhF,MAAMC,GAAG,GAAAd,WAAA,CAAAc,GAAA,GAAGC,SAAI;AAAA,GAxBPjB,UAAU,KAAAC,OAAA,CAAAD,UAAA,GAAVA,UAAU","ignoreList":[]}

package/lib/commonjs/_style-sheet/use.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.use = use;
+var _react = require("react");
+var _index = require("../contexts/index.js");
+/* eslint-disable react-hooks/rules-of-hooks */
+
+/**
+ * To keep your React Component style prop reactive on color scheme and breakpoint change
+ */
+function use() {
+  (0, _react.useContext)(_index.ThemeContext);
+  (0, _react.useContext)(_index.BreakpointContext);
+}
+//# sourceMappingURL=use.js.map

package/lib/commonjs/_style-sheet/use.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_index","use","useContext","ThemeContext","BreakpointContext"],"sourceRoot":"../../../src","sources":["_style-sheet/use.tsx"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AAIA,IAAAC,MAAA,GAAAD,OAAA;AALA;;AAUA;AACA;AACA;AACO,SAASE,GAAGA,CAAA,EAAG;EACrB,IAAAC,iBAAU,EAACC,mBAAY,CAAC;EACxB,IAAAD,iBAAU,EAACE,wBAAiB,CAAC;AAC9B","ignoreList":[]}

package/lib/commonjs/components/accordion/Accordion.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Accordion = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _context = require("./_context.js");
+var _HeaderBorder = require("./_HeaderBorder.js");
+var _Item = require("./_Item.js");
+var _styles = require("./_styles.js");
+var _jsxRuntime = require("react/jsx-runtime");
+const Accordion_ = /*#__PURE__*/(0, _react.forwardRef)(function Accordion({
+  size,
+  flushAlignment,
+  children,
+  style,
+  onLayout,
+  ...props
+}, forwardedRef) {
+  const ref = (0, _react.useRef)({
+      marginRightStyleKey: getMarginRightStyleKey(windowWidth)
+    }),
+    [marginRightStyleKey, setMarginRightStyleKey] = (0, _react.useState)(ref.current.marginRightStyleKey),
+    handlerLayout = (0, _react.useCallback)(event => {
+      onLayout?.(event);
+      /**
+       * https://carbondesignsystem.com/components/accordion/style/#margin-right
+       */
+
+      const key = getMarginRightStyleKey(windowWidth);
+      if (ref.current.marginRightStyleKey !== key) {
+        ref.current.marginRightStyleKey = key;
+        setMarginRightStyleKey(key);
+      }
+    }, [onLayout]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    ...props,
+    style: style,
+    onLayout: handlerLayout,
+    ref: forwardedRef,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_context.Context.Provider, {
+      value: {
+        size,
+        flushAlignment,
+        collapsibleContentContainerStyle: _styles.MarginRightStyle[marginRightStyleKey]
+      },
+      children: [children, !!children?.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_HeaderBorder.HeaderBorder, {
+        flushAlignment: flushAlignment,
+        style: baseStyle.lastAccordionHeaderBorder
+      })]
+    })
+  });
+});
+const Accordion = exports.Accordion = Object.assign(Accordion_, {
+  Item: _Item.Item
+});
+const baseStyle = _reactNative.StyleSheet.create({
+    lastAccordionHeaderBorder: {
+      top: '100%'
+    }
+  }),
+  windowWidth = _reactNative.Dimensions.get('window').width;
+function getMarginRightStyleKey(width) {
+  if (width < 420) {
+    return 'small';
+  }
+  if (width <= 640) {
+    return 'range_420_640';
+  }
+  return 'large';
+}
+//# sourceMappingURL=Accordion.js.map

package/lib/commonjs/components/accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_context","_HeaderBorder","_Item","_styles","_jsxRuntime","Accordion_","forwardRef","Accordion","size","flushAlignment","children","style","onLayout","props","forwardedRef","ref","useRef","marginRightStyleKey","getMarginRightStyleKey","windowWidth","setMarginRightStyleKey","useState","current","handlerLayout","useCallback","event","key","jsx","View","jsxs","Context","Provider","value","collapsibleContentContainerStyle","MarginRightStyle","length","HeaderBorder","baseStyle","lastAccordionHeaderBorder","exports","Object","assign","Item","StyleSheet","create","top","Dimensions","get","width"],"sourceRoot":"../../../../src","sources":["components/accordion/Accordion.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAOA,IAAAC,YAAA,GAAAD,OAAA;AAOA,IAAAE,QAAA,GAAAF,OAAA;AAIA,IAAAG,aAAA,GAAAH,OAAA;AAIA,IAAAI,KAAA,GAAAJ,OAAA;AAYA,IAAAK,OAAA,GAAAL,OAAA;AAEkB,IAAAM,WAAA,GAAAN,OAAA;AAElB,MAAMO,UAAU,gBAAG,IAAAC,iBAAU,EAC5B,SAASC,SAASA,CACjB;EACCC,IAAI;EACJC,cAAc;EACdC,QAAQ;EACRC,KAAK;EACLC,QAAQ;EACR,GAAGC;AACJ,CAAC,EACDC,YAAY,EACX;EAED,MACCC,GAAG,GACF,IAAAC,aAAM,EAEH;MACFC,mBAAmB,EAAEC,sBAAsB,CAACC,WAAW;IACxD,CAAC,CAAC;IAEH,CAACF,mBAAmB,EAAEG,sBAAsB,CAAC,GAC5C,IAAAC,eAAQ,EAACN,GAAG,CAACO,OAAO,CAACL,mBAAmB,CAAC;IAE1CM,aAAiD,GAChD,IAAAC,kBAAW,EAACC,KAAK,IAAI;MACpBb,QAAQ,GAAGa,KAAK,CAAC;MACjB;AACL;AACA;;MAEK,MAAMC,GAAG,GAAGR,sBAAsB,CAACC,WAAW,CAAC;MAE/C,IAAGJ,GAAG,CAACO,OAAO,CAACL,mBAAmB,KAAKS,GAAG,EAAE;QAC3CX,GAAG,CAACO,OAAO,CAACL,mBAAmB,GAAGS,GAAG;QACrCN,sBAAsB,CAACM,GAAG,CAAC;MAC5B;IACD,CAAC,EAAE,CACFd,QAAQ,CACR,CAAC;EAEJ,oBACC,IAAAR,WAAA,CAAAuB,GAAA,EAAC5B,YAAA,CAAA6B,IAAI;IAAA,GACCf,KAAK;IACVF,KAAK,EAAGA,KAAO;IACfC,QAAQ,EAAGW,aAAe;IAC1BR,GAAG,EAAGD,YAAc;IAAAJ,QAAA,eAEpB,IAAAN,WAAA,CAAAyB,IAAA,EAAC7B,QAAA,CAAA8B,OAAO,CAACC,QAAQ;MAChBC,KAAK,EAAE;QACNxB,IAAI;QACJC,cAAc;QACdwB,gCAAgC,EAAEC,wBAAgB,CAACjB,mBAAmB;MACvE,CAAE;MAAAP,QAAA,GAEAA,QAAQ,EAER,CAAC,CAACA,QAAQ,EAAEyB,MAAM,iBACnB,IAAA/B,WAAA,CAAAuB,GAAA,EAAC1B,aAAA,CAAAmC,YAAY;QACZ3B,cAAc,EAAGA,cAAgB;QACjCE,KAAK,EAAG0B,SAAS,CAACC;MAA2B,CAC7C,CACD;IAAA,CACgB;EAAC,CACd,CAAC;AAGT,CACD,CAAC;AAEM,MAAM/B,SAAS,GAAAgC,OAAA,CAAAhC,SAAA,GAAGiC,MAAM,CAACC,MAAM,CAACpC,UAAU,EAAE;EAClDqC,IAAI,EAAEA;AACP,CAAC,CAAC;AAEF,MACCL,SAAS,GACRM,uBAAU,CAACC,MAAM,CAAC;IACjBN,yBAAyB,EAAE;MAC1BO,GAAG,EAAE;IACN;EACD,CAAC,CAAC;EAEH1B,WAAW,GACV2B,uBAAU,CAACC,GAAG,CAAC,QAAQ,CAAC,CAACC,KAAK;AAEhC,SAAS9B,sBAAsBA,CAAC8B,KAAa,EAAiC;EAC7E,IAAGA,KAAK,GAAG,GAAG,EAAE;IACf,OAAO,OAAO;EACf;EAEA,IAAGA,KAAK,IAAI,GAAG,EAAE;IAChB,OAAO,eAAe;EACvB;EAEA,OAAO,OAAO;AACf","ignoreList":[]}

package/lib/commonjs/components/accordion/AccordionHeaderProps.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=AccordionHeaderProps.js.map

package/lib/commonjs/components/accordion/AccordionHeaderProps.js.map

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

package/lib/commonjs/components/accordion/AccordionItemProps.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=AccordionItemProps.js.map

package/lib/commonjs/components/accordion/AccordionItemProps.js.map

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

package/lib/commonjs/components/accordion/AccordionItemRef.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=AccordionItemRef.js.map

package/lib/commonjs/components/accordion/AccordionItemRef.js.map

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

package/lib/commonjs/components/accordion/AccordionProps.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=AccordionProps.js.map

package/lib/commonjs/components/accordion/AccordionProps.js.map

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

package/lib/commonjs/components/accordion/AccordionRef.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=AccordionRef.js.map

package/lib/commonjs/components/accordion/AccordionRef.js.map

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

package/lib/commonjs/components/accordion/AccordionSize.js

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

package/lib/commonjs/components/accordion/AccordionSize.js.map

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

package/lib/commonjs/components/accordion/_Header.js

@@ -0,0 +1,157 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Header = Header;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _ = _interopRequireDefault(require("@carbon/icons/es/chevron--down/20"));
+var _index = require("../../_style-sheet/index.js");
+var _index2 = require("../../contexts/index.js");
+var _index3 = require("../../styles/index.js");
+var _index4 = require("../button/base-color/index.js");
+var _index5 = require("../icon/index.js");
+var _HeaderBorder = require("./_HeaderBorder.js");
+var _motion = require("./_motion.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function Header({
+  size = 'medium',
+  open,
+  flushAlignment = false,
+  text,
+  style: styleProp,
+  ...buttonProps
+}) {
+  const themeContext = (0, _react.useContext)(_index2.ThemeContext);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styleProp,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HeaderBorder.HeaderBorder, {
+      flushAlignment: flushAlignment
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.BaseColor, {
+      ...buttonProps,
+      size: mapSizeToButtonSize[size],
+      text: text,
+      android_rippleEffectColor: themeContext.color.layer_hover_01,
+      colorStateStyle: {
+        background: {
+          default: style.background_default,
+          focused: style.background_pressed,
+          hovered: style.background_hovered,
+          pressed: style.background_pressed,
+          disabled: style.background_disabled
+        },
+        text: {
+          default: style.text_default,
+          focused: style.text_focused,
+          hovered: style.text_hovered,
+          pressed: style.text_pressed,
+          disabled: style.text_disabled
+        },
+        icon: {
+          default: themeContext.color.icon_primary,
+          focused: themeContext.color.icon_primary,
+          hovered: themeContext.color.icon_primary,
+          pressed: themeContext.color.icon_primary,
+          disabled: themeContext.color.icon_disabled
+        }
+      },
+      iconNode: (...params) => iconNodeRenderer(!!open, ...params),
+      style: _index3.FlexStyle.self_stretch
+    })]
+  });
+}
+const style = _index.StyleSheet.create({
+    background_default: {
+      backgroundColor: 'transparent'
+    },
+    background_focused: {
+      backgroundColor: 'transparent',
+      borderWidth: 1,
+      borderColor: _index.StyleSheet.color.focus
+    },
+    background_hovered: {
+      backgroundColor: _index.StyleSheet.color.layer_hover_01
+    },
+    background_pressed: {
+      backgroundColor: _index.StyleSheet.color.layer_hover_01
+    },
+    background_disabled: {
+      backgroundColor: 'transparent'
+    },
+    text_default: {
+      color: _index.StyleSheet.color.text_primary
+    },
+    text_focused: {
+      color: _index.StyleSheet.color.text_primary
+    },
+    text_hovered: {
+      color: _index.StyleSheet.color.text_primary
+    },
+    text_pressed: {
+      color: _index.StyleSheet.color.text_primary
+    },
+    text_disabled: {
+      color: _index.StyleSheet.color.text_disabled
+    }
+  }),
+  /**
+   * Coincidentally (or not) use same value of height  
+   * https://carbondesignsystem.com/components/accordion/style/#sizes
+   */
+  mapSizeToButtonSize = {
+    small: 'small',
+    medium: 'medium',
+    large: 'large_productive'
+  },
+  IconAnimated =
+  /**
+   * 
+   */
+  _reactNativeReanimated.default.createAnimatedComponent(_index5.Icon),
+  iconNodeRenderer = (open, iconColorState, iconSize, iconStyle) => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconNode, {
+      open: open,
+      color: iconColorState,
+      size: iconSize,
+      style: iconStyle
+    });
+  };
+function IconNode({
+  open,
+  color,
+  size,
+  style
+}) {
+  const isMounted = (0, _react.useRef)(false),
+    rotateZ = (0, _reactNativeReanimated.useSharedValue)(open ? 180 : 0),
+    animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+      return {
+        transform: [{
+          rotateZ: `${rotateZ.value}deg`
+        }]
+      };
+    });
+  (0, _react.useEffect)(() => {
+    if (isMounted.current) {
+      if (open) {
+        rotateZ.value = (0, _reactNativeReanimated.withTiming)(180, _motion.Motion.toOpen);
+      } else {
+        rotateZ.value = (0, _reactNativeReanimated.withTiming)(0, _motion.Motion.toClose);
+      }
+    } else {
+      isMounted.current = true;
+    }
+  }, [open, rotateZ]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconAnimated, {
+    src: _.default,
+    color: color,
+    width: size,
+    height: size,
+    style: [animatedStyle, style]
+  });
+}
+//# sourceMappingURL=_Header.js.map