fluent-styles 1.7.0 → 1.9.0

package/lib/commonjs/package/radioButton/index.js

@@ -9,7 +9,6 @@ var _styled = require("../styled");
 var _reactNative = require("react-native");
 var _MaterialIcons = _interopRequireDefault(require("react-native-vector-icons/MaterialIcons"));
 var _theme = require("../theme");
-var _utils = require("../utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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 && {}.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; }
@@ -26,18 +25,12 @@ const RadioButton = (0, _styled.styled)(_reactNative.TouchableOpacity, {
     flexDirection: 'column'
   },
   variants: {
-    width: size => {
-      if (!size) return;
-      return {
-        width: size
-      };
-    },
-    height: size => {
-      if (!size) return;
-      return {
-        height: size
-      };
-    },
+    height: size => ({
+      height: size || 24
+    }),
+    width: size => ({
+      width: size || 24
+    }),
     disabled: {
       true: {
         backgroundColor: _theme.theme.colors.gray[500]
@@ -58,22 +51,20 @@ const RadioButton = (0, _styled.styled)(_reactNative.TouchableOpacity, {
   }
 });
 const StyledRadioButton = ({
+  name = "",
   onPress,
   disabled = false,
+  selected,
   checkedColor,
   iconProps,
   ...rest
 }) => {
-  const [checked, setChecked] = (0, _react.useState)(false);
-  const toggleCheckbox = () => {
-    setChecked(!checked);
-    onPress && onPress(!checked);
-  };
+  const checked = selected === name;
   return /*#__PURE__*/_react.default.createElement(RadioButton, _extends({
     disabled: disabled,
     checked: checked,
     checkedColor: checked && checkedColor && checkedColor,
-    onPress: () => toggleCheckbox()
+    onPress: () => onPress && onPress(name)
   }, rest), checked && /*#__PURE__*/_react.default.createElement(_MaterialIcons.default, _extends({
     name: "circle",
     color: _theme.theme.colors.gray[700],

package/lib/commonjs/package/radioButton/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_styled","_reactNative","_MaterialIcons","_interopRequireDefault","_theme","_utils","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","RadioButton","styled","TouchableOpacity","base","width","height","borderWidth","borderRadius","borderColor","theme","colors","gray","justifyContent","alignItems","flexDirection","variants","size","disabled","true","backgroundColor","checked","checkedColor","color","StyledRadioButton","onPress","iconProps","rest","setChecked","useState","toggleCheckbox","createElement","name","exports"],"sources":["index.jsx"],"sourcesContent":["import React, { useState } from 'react'\r\nimport { styled } from '../styled'\r\nimport { TouchableOpacity } from 'react-native'\r\nimport Icon from 'react-native-vector-icons/MaterialIcons'\r\nimport { theme } from '../theme'\r\nimport { isValidColor, isValidNumber, isValidString } from '../utils'\r\n\r\nconst RadioButton = styled(TouchableOpacity, {\r\n  base: {\r\n    width: 24,\r\n    height: 24,\r\n    borderWidth: 2,\r\n    borderRadius: 100,\r\n    borderColor: theme.colors.gray[500],\r\n    justifyContent: 'center',\r\n    alignItems: 'center',\r\n    flexDirection: 'column'\r\n  },\r\n  variants: {\r\n    width: size => {\r\n      if (!size) return\r\n      return { width: size }\r\n    },\r\n    height: size => {\r\n      if (!size) return\r\n      return { height: size }\r\n    },\r\n    disabled: {\r\n      true: {\r\n        backgroundColor: theme.colors.gray[500]\r\n      }\r\n    },\r\n    checked: {\r\n      true: {\r\n        backgroundColor: theme.colors.gray[1]\r\n      }\r\n    },\r\n    checkedColor: color => {\r\n      if (!color) return\r\n      return {\r\n        backgroundColor: color,\r\n        borderColor: color\r\n      }\r\n    }\r\n  }\r\n})\r\n\r\nconst StyledRadioButton = ({\r\n\tonPress,\r\n\tdisabled = false,\r\n\tcheckedColor,\r\n\ticonProps,\r\n\t...rest\r\n}) => {\r\n  const [checked, setChecked] = useState(false)\r\n\r\n  const toggleCheckbox = () => {\r\n    setChecked(!checked)\r\n    onPress && onPress(!checked)\r\n  }\r\n\r\n  return (\r\n    <RadioButton\r\n      disabled={disabled}\r\n      checked={checked}\r\n      checkedColor={checked && checkedColor && checkedColor}\r\n      onPress={() => toggleCheckbox()}\r\n      {...rest}\r\n\t\t>\r\n      {checked &&\r\n      <Icon\r\n        name='circle'\r\n        color={theme.colors.gray[700]}\r\n        size={15}\r\n        {...iconProps}\r\n\t\t\t\t/>}\r\n    </RadioButton>\r\n  )\r\n}\r\n\r\nexport { StyledRadioButton }\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_styled","_reactNative","_MaterialIcons","_interopRequireDefault","_theme","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","RadioButton","styled","TouchableOpacity","base","width","height","borderWidth","borderRadius","borderColor","theme","colors","gray","justifyContent","alignItems","flexDirection","variants","size","disabled","true","backgroundColor","checked","checkedColor","color","StyledRadioButton","name","onPress","selected","iconProps","rest","createElement","exports"],"sources":["index.jsx"],"sourcesContent":["import React, { useState } from 'react'\r\nimport { styled } from '../styled'\r\nimport { TouchableOpacity } from 'react-native'\r\nimport Icon from 'react-native-vector-icons/MaterialIcons'\r\nimport { theme } from '../theme'\r\n\r\nconst RadioButton = styled(TouchableOpacity, {\r\n  base: {\r\n    width: 24,\r\n    height: 24,\r\n    borderWidth: 2,\r\n    borderRadius: 100,\r\n    borderColor: theme.colors.gray[500],\r\n    justifyContent: 'center',\r\n    alignItems: 'center',\r\n    flexDirection: 'column'\r\n  },\r\n  variants: {\r\n    height: size => ({\r\n      height: size || 24\r\n    }),\r\n    width: size => ({\r\n      width: size || 24\r\n    }),\r\n    disabled: {\r\n      true: {\r\n        backgroundColor: theme.colors.gray[500]\r\n      }\r\n    },\r\n    checked: {\r\n      true: {\r\n        backgroundColor: theme.colors.gray[1]\r\n      }\r\n    },\r\n    checkedColor: color => {\r\n      if (!color) return\r\n      return {\r\n        backgroundColor: color,\r\n        borderColor: color\r\n      }\r\n    }\r\n  }\r\n})\r\n\r\nconst StyledRadioButton = ({\r\n\tname= \"\",\r\n\tonPress,\r\n\tdisabled = false,\r\n\tselected,\r\n\tcheckedColor,\r\n\ticonProps,\r\n\t...rest\r\n}) => {\r\n  const checked = selected === name \r\n  return (\r\n    <RadioButton\r\n      disabled={disabled}\r\n      checked={checked}\r\n      checkedColor={checked && checkedColor && checkedColor}\r\n      onPress={() => onPress && onPress(name)}\r\n      {...rest}\r\n\t\t>\r\n      {checked &&\r\n      <Icon\r\n        name='circle'\r\n        color={theme.colors.gray[700]}\r\n        size={15}\r\n        {...iconProps}\r\n\t\t\t\t/>}\r\n    </RadioButton>\r\n  )\r\n}\r\n\r\nexport { StyledRadioButton }\r\n"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/package/safeAreaView/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.StyledSafeAreaView = void 0;
 var _reactNative = require("react-native");
 var _styled = require("../styled");
+var _utils = require("../utils");
 const StyledSafeAreaView = exports.StyledSafeAreaView = (0, _styled.styled)(_reactNative.SafeAreaView, {
   base: {
     flex: 1
@@ -13,7 +14,7 @@ const StyledSafeAreaView = exports.StyledSafeAreaView = (0, _styled.styled)(_rea
   variants: {
     backgroundColor: color => {
       if (!color) return;
-      if (!isValidColor(color)) {
+      if (!(0, _utils.isValidColor)(color)) {
         throw new Error('Invalid backgroundColor value');
       }
       return {

package/lib/commonjs/package/safeAreaView/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_styled","StyledSafeAreaView","exports","styled","SafeAreaView","base","flex","variants","backgroundColor","color","isValidColor","Error"],"sources":["index.jsx"],"sourcesContent":["import { SafeAreaView } from 'react-native'\r\nimport { styled } from '../styled'\r\n\r\nconst StyledSafeAreaView = styled(SafeAreaView, {\r\n  base: {\r\n    flex: 1\r\n  },\r\n  variants: {\r\n    backgroundColor: color => {\r\n      if (!color) return\r\n      if (!isValidColor(color)) {\r\n        throw new Error('Invalid backgroundColor value')\r\n      }\r\n      return { backgroundColor: color }\r\n    }\r\n  }\r\n})\r\n\r\nexport { StyledSafeAreaView }\r\n"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAEA,MAAME,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAG,IAAAE,cAAM,EAACC,yBAAY,EAAE;EAC9CC,IAAI,EAAE;IACJC,IAAI,EAAE;EACR,CAAC;EACDC,QAAQ,EAAE;IACRC,eAAe,EAAEC,KAAK,IAAI;MACxB,IAAI,CAACA,KAAK,EAAE;MACZ,IAAI,CAACC,YAAY,CAACD,KAAK,CAAC,EAAE;QACxB,MAAM,IAAIE,KAAK,CAAC,+BAA+B,CAAC;MAClD;MACA,OAAO;QAAEH,eAAe,EAAEC;MAAM,CAAC;IACnC;EACF;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_reactNative","require","_styled","_utils","StyledSafeAreaView","exports","styled","SafeAreaView","base","flex","variants","backgroundColor","color","isValidColor","Error"],"sources":["index.jsx"],"sourcesContent":["import { SafeAreaView } from 'react-native'\r\nimport { styled } from '../styled'\r\nimport { isValidColor } from '../utils'\r\n\r\nconst StyledSafeAreaView = styled(SafeAreaView, {\r\n  base: {\r\n    flex: 1\r\n  },\r\n  variants: {\r\n    backgroundColor: color => {\r\n      if (!color) return\r\n      if (!isValidColor(color)) {\r\n        throw new Error('Invalid backgroundColor value')\r\n      }\r\n      return { backgroundColor: color }\r\n    }\r\n  }\r\n})\r\n\r\nexport { StyledSafeAreaView }\r\n"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAEA,MAAMG,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAG,IAAAE,cAAM,EAACC,yBAAY,EAAE;EAC9CC,IAAI,EAAE;IACJC,IAAI,EAAE;EACR,CAAC;EACDC,QAAQ,EAAE;IACRC,eAAe,EAAEC,KAAK,IAAI;MACxB,IAAI,CAACA,KAAK,EAAE;MACZ,IAAI,CAAC,IAAAC,mBAAY,EAACD,KAAK,CAAC,EAAE;QACxB,MAAM,IAAIE,KAAK,CAAC,+BAA+B,CAAC;MAClD;MACA,OAAO;QAAEH,eAAe,EAAEC;MAAM,CAAC;IACnC;EACF;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/commonjs/package/scrollView/index.js

@@ -6,11 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.StyledScrollView = void 0;
 var _reactNative = require("react-native");
 var _styled = require("../styled");
+var _utils = require("../utils");
 const StyledScrollView = exports.StyledScrollView = (0, _styled.styled)(_reactNative.ScrollView, {
   variants: {
     backgroundColor: color => {
       if (!color) return;
-      if (!isValidColor(color)) {
+      if (!(0, _utils.isValidColor)(color)) {
         throw new Error('Invalid backgroundColor value');
       }
       return {

package/lib/commonjs/package/scrollView/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_styled","StyledScrollView","exports","styled","ScrollView","variants","backgroundColor","color","isValidColor","Error"],"sources":["index.jsx"],"sourcesContent":["import { ScrollView } from 'react-native'\r\nimport { styled } from '../styled'\r\n\r\nconst StyledScrollView = styled(ScrollView, {\r\n  variants: {\r\n    backgroundColor: color => {\r\n      if (!color) return\r\n      if (!isValidColor(color)) {\r\n        throw new Error('Invalid backgroundColor value')\r\n      }\r\n      return { backgroundColor: color }\r\n    }\r\n  }\r\n})\r\n\r\nexport { StyledScrollView }\r\n"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAEA,MAAME,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG,IAAAE,cAAM,EAACC,uBAAU,EAAE;EAC1CC,QAAQ,EAAE;IACRC,eAAe,EAAEC,KAAK,IAAI;MACxB,IAAI,CAACA,KAAK,EAAE;MACZ,IAAI,CAACC,YAAY,CAACD,KAAK,CAAC,EAAE;QACxB,MAAM,IAAIE,KAAK,CAAC,+BAA+B,CAAC;MAClD;MACA,OAAO;QAAEH,eAAe,EAAEC;MAAM,CAAC;IACnC;EACF;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_reactNative","require","_styled","_utils","StyledScrollView","exports","styled","ScrollView","variants","backgroundColor","color","isValidColor","Error"],"sources":["index.jsx"],"sourcesContent":["import { ScrollView } from 'react-native'\r\nimport { styled } from '../styled'\r\nimport { isValidColor } from '../utils'\r\n\r\nconst StyledScrollView = styled(ScrollView, {\r\n  variants: {\r\n    backgroundColor: color => {\r\n      if (!color) return\r\n      if (!isValidColor(color)) {\r\n        throw new Error('Invalid backgroundColor value')\r\n      }\r\n      return { backgroundColor: color }\r\n    }\r\n  }\r\n})\r\n\r\nexport { StyledScrollView }\r\n"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAEA,MAAMG,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG,IAAAE,cAAM,EAACC,uBAAU,EAAE;EAC1CC,QAAQ,EAAE;IACRC,eAAe,EAAEC,KAAK,IAAI;MACxB,IAAI,CAACA,KAAK,EAAE;MACZ,IAAI,CAAC,IAAAC,mBAAY,EAACD,KAAK,CAAC,EAAE;QACxB,MAAM,IAAIE,KAAK,CAAC,+BAA+B,CAAC;MAClD;MACA,OAAO;QAAEH,eAAe,EAAEC;MAAM,CAAC;IACnC;EACF;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/package/radioButton/index.js

@@ -4,7 +4,6 @@ import { styled } from '../styled';
 import { TouchableOpacity } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import { theme } from '../theme';
-import { isValidColor, isValidNumber, isValidString } from '../utils';
 const RadioButton = styled(TouchableOpacity, {
   base: {
     width: 24,
@@ -17,18 +16,12 @@ const RadioButton = styled(TouchableOpacity, {
     flexDirection: 'column'
   },
   variants: {
-    width: size => {
-      if (!size) return;
-      return {
-        width: size
-      };
-    },
-    height: size => {
-      if (!size) return;
-      return {
-        height: size
-      };
-    },
+    height: size => ({
+      height: size || 24
+    }),
+    width: size => ({
+      width: size || 24
+    }),
     disabled: {
       true: {
         backgroundColor: theme.colors.gray[500]
@@ -49,22 +42,20 @@ const RadioButton = styled(TouchableOpacity, {
   }
 });
 const StyledRadioButton = ({
+  name = "",
   onPress,
   disabled = false,
+  selected,
   checkedColor,
   iconProps,
   ...rest
 }) => {
-  const [checked, setChecked] = useState(false);
-  const toggleCheckbox = () => {
-    setChecked(!checked);
-    onPress && onPress(!checked);
-  };
+  const checked = selected === name;
   return /*#__PURE__*/React.createElement(RadioButton, _extends({
     disabled: disabled,
     checked: checked,
     checkedColor: checked && checkedColor && checkedColor,
-    onPress: () => toggleCheckbox()
+    onPress: () => onPress && onPress(name)
   }, rest), checked && /*#__PURE__*/React.createElement(Icon, _extends({
     name: "circle",
     color: theme.colors.gray[700],

package/lib/module/package/radioButton/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","styled","TouchableOpacity","Icon","theme","isValidColor","isValidNumber","isValidString","RadioButton","base","width","height","borderWidth","borderRadius","borderColor","colors","gray","justifyContent","alignItems","flexDirection","variants","size","disabled","true","backgroundColor","checked","checkedColor","color","StyledRadioButton","onPress","iconProps","rest","setChecked","toggleCheckbox","createElement","_extends","name"],"sources":["index.jsx"],"sourcesContent":["import React, { useState } from 'react'\r\nimport { styled } from '../styled'\r\nimport { TouchableOpacity } from 'react-native'\r\nimport Icon from 'react-native-vector-icons/MaterialIcons'\r\nimport { theme } from '../theme'\r\nimport { isValidColor, isValidNumber, isValidString } from '../utils'\r\n\r\nconst RadioButton = styled(TouchableOpacity, {\r\n  base: {\r\n    width: 24,\r\n    height: 24,\r\n    borderWidth: 2,\r\n    borderRadius: 100,\r\n    borderColor: theme.colors.gray[500],\r\n    justifyContent: 'center',\r\n    alignItems: 'center',\r\n    flexDirection: 'column'\r\n  },\r\n  variants: {\r\n    width: size => {\r\n      if (!size) return\r\n      return { width: size }\r\n    },\r\n    height: size => {\r\n      if (!size) return\r\n      return { height: size }\r\n    },\r\n    disabled: {\r\n      true: {\r\n        backgroundColor: theme.colors.gray[500]\r\n      }\r\n    },\r\n    checked: {\r\n      true: {\r\n        backgroundColor: theme.colors.gray[1]\r\n      }\r\n    },\r\n    checkedColor: color => {\r\n      if (!color) return\r\n      return {\r\n        backgroundColor: color,\r\n        borderColor: color\r\n      }\r\n    }\r\n  }\r\n})\r\n\r\nconst StyledRadioButton = ({\r\n\tonPress,\r\n\tdisabled = false,\r\n\tcheckedColor,\r\n\ticonProps,\r\n\t...rest\r\n}) => {\r\n  const [checked, setChecked] = useState(false)\r\n\r\n  const toggleCheckbox = () => {\r\n    setChecked(!checked)\r\n    onPress && onPress(!checked)\r\n  }\r\n\r\n  return (\r\n    <RadioButton\r\n      disabled={disabled}\r\n      checked={checked}\r\n      checkedColor={checked && checkedColor && checkedColor}\r\n      onPress={() => toggleCheckbox()}\r\n      {...rest}\r\n\t\t>\r\n      {checked &&\r\n      <Icon\r\n        name='circle'\r\n        color={theme.colors.gray[700]}\r\n        size={15}\r\n        {...iconProps}\r\n\t\t\t\t/>}\r\n    </RadioButton>\r\n  )\r\n}\r\n\r\nexport { StyledRadioButton }\r\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,gBAAgB,QAAQ,cAAc;AAC/C,OAAOC,IAAI,MAAM,yCAAyC;AAC1D,SAASC,KAAK,QAAQ,UAAU;AAChC,SAASC,YAAY,EAAEC,aAAa,EAAEC,aAAa,QAAQ,UAAU;AAErE,MAAMC,WAAW,GAAGP,MAAM,CAACC,gBAAgB,EAAE;EAC3CO,IAAI,EAAE;IACJC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVC,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE,GAAG;IACjBC,WAAW,EAAEV,KAAK,CAACW,MAAM,CAACC,IAAI,CAAC,GAAG,CAAC;IACnCC,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE,QAAQ;IACpBC,aAAa,EAAE;EACjB,CAAC;EACDC,QAAQ,EAAE;IACRV,KAAK,EAAEW,IAAI,IAAI;MACb,IAAI,CAACA,IAAI,EAAE;MACX,OAAO;QAAEX,KAAK,EAAEW;MAAK,CAAC;IACxB,CAAC;IACDV,MAAM,EAAEU,IAAI,IAAI;MACd,IAAI,CAACA,IAAI,EAAE;MACX,OAAO;QAAEV,MAAM,EAAEU;MAAK,CAAC;IACzB,CAAC;IACDC,QAAQ,EAAE;MACRC,IAAI,EAAE;QACJC,eAAe,EAAEpB,KAAK,CAACW,MAAM,CAACC,IAAI,CAAC,GAAG;MACxC;IACF,CAAC;IACDS,OAAO,EAAE;MACPF,IAAI,EAAE;QACJC,eAAe,EAAEpB,KAAK,CAACW,MAAM,CAACC,IAAI,CAAC,CAAC;MACtC;IACF,CAAC;IACDU,YAAY,EAAEC,KAAK,IAAI;MACrB,IAAI,CAACA,KAAK,EAAE;MACZ,OAAO;QACLH,eAAe,EAAEG,KAAK;QACtBb,WAAW,EAAEa;MACf,CAAC;IACH;EACF;AACF,CAAC,CAAC;AAEF,MAAMC,iBAAiB,GAAGA,CAAC;EAC1BC,OAAO;EACPP,QAAQ,GAAG,KAAK;EAChBI,YAAY;EACZI,SAAS;EACT,GAAGC;AACJ,CAAC,KAAK;EACJ,MAAM,CAACN,OAAO,EAAEO,UAAU,CAAC,GAAGhC,QAAQ,CAAC,KAAK,CAAC;EAE7C,MAAMiC,cAAc,GAAGA,CAAA,KAAM;IAC3BD,UAAU,CAAC,CAACP,OAAO,CAAC;IACpBI,OAAO,IAAIA,OAAO,CAAC,CAACJ,OAAO,CAAC;EAC9B,CAAC;EAED,oBACE1B,KAAA,CAAAmC,aAAA,CAAC1B,WAAW,EAAA2B,QAAA;IACVb,QAAQ,EAAEA,QAAS;IACnBG,OAAO,EAAEA,OAAQ;IACjBC,YAAY,EAAED,OAAO,IAAIC,YAAY,IAAIA,YAAa;IACtDG,OAAO,EAAEA,CAAA,KAAMI,cAAc,CAAC;EAAE,GAC5BF,IAAI,GAEPN,OAAO,iBACR1B,KAAA,CAAAmC,aAAA,CAAC/B,IAAI,EAAAgC,QAAA;IACHC,IAAI,EAAC,QAAQ;IACbT,KAAK,EAAEvB,KAAK,CAACW,MAAM,CAACC,IAAI,CAAC,GAAG,CAAE;IAC9BK,IAAI,EAAE;EAAG,GACLS,SAAS,CAChB,CACY,CAAC;AAElB,CAAC;AAED,SAASF,iBAAiB","ignoreList":[]}
+{"version":3,"names":["React","useState","styled","TouchableOpacity","Icon","theme","RadioButton","base","width","height","borderWidth","borderRadius","borderColor","colors","gray","justifyContent","alignItems","flexDirection","variants","size","disabled","true","backgroundColor","checked","checkedColor","color","StyledRadioButton","name","onPress","selected","iconProps","rest","createElement","_extends"],"sources":["index.jsx"],"sourcesContent":["import React, { useState } from 'react'\r\nimport { styled } from '../styled'\r\nimport { TouchableOpacity } from 'react-native'\r\nimport Icon from 'react-native-vector-icons/MaterialIcons'\r\nimport { theme } from '../theme'\r\n\r\nconst RadioButton = styled(TouchableOpacity, {\r\n  base: {\r\n    width: 24,\r\n    height: 24,\r\n    borderWidth: 2,\r\n    borderRadius: 100,\r\n    borderColor: theme.colors.gray[500],\r\n    justifyContent: 'center',\r\n    alignItems: 'center',\r\n    flexDirection: 'column'\r\n  },\r\n  variants: {\r\n    height: size => ({\r\n      height: size || 24\r\n    }),\r\n    width: size => ({\r\n      width: size || 24\r\n    }),\r\n    disabled: {\r\n      true: {\r\n        backgroundColor: theme.colors.gray[500]\r\n      }\r\n    },\r\n    checked: {\r\n      true: {\r\n        backgroundColor: theme.colors.gray[1]\r\n      }\r\n    },\r\n    checkedColor: color => {\r\n      if (!color) return\r\n      return {\r\n        backgroundColor: color,\r\n        borderColor: color\r\n      }\r\n    }\r\n  }\r\n})\r\n\r\nconst StyledRadioButton = ({\r\n\tname= \"\",\r\n\tonPress,\r\n\tdisabled = false,\r\n\tselected,\r\n\tcheckedColor,\r\n\ticonProps,\r\n\t...rest\r\n}) => {\r\n  const checked = selected === name \r\n  return (\r\n    <RadioButton\r\n      disabled={disabled}\r\n      checked={checked}\r\n      checkedColor={checked && checkedColor && checkedColor}\r\n      onPress={() => onPress && onPress(name)}\r\n      {...rest}\r\n\t\t>\r\n      {checked &&\r\n      <Icon\r\n        name='circle'\r\n        color={theme.colors.gray[700]}\r\n        size={15}\r\n        {...iconProps}\r\n\t\t\t\t/>}\r\n    </RadioButton>\r\n  )\r\n}\r\n\r\nexport { StyledRadioButton }\r\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,gBAAgB,QAAQ,cAAc;AAC/C,OAAOC,IAAI,MAAM,yCAAyC;AAC1D,SAASC,KAAK,QAAQ,UAAU;AAEhC,MAAMC,WAAW,GAAGJ,MAAM,CAACC,gBAAgB,EAAE;EAC3CI,IAAI,EAAE;IACJC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVC,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE,GAAG;IACjBC,WAAW,EAAEP,KAAK,CAACQ,MAAM,CAACC,IAAI,CAAC,GAAG,CAAC;IACnCC,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE,QAAQ;IACpBC,aAAa,EAAE;EACjB,CAAC;EACDC,QAAQ,EAAE;IACRT,MAAM,EAAEU,IAAI,KAAK;MACfV,MAAM,EAAEU,IAAI,IAAI;IAClB,CAAC,CAAC;IACFX,KAAK,EAAEW,IAAI,KAAK;MACdX,KAAK,EAAEW,IAAI,IAAI;IACjB,CAAC,CAAC;IACFC,QAAQ,EAAE;MACRC,IAAI,EAAE;QACJC,eAAe,EAAEjB,KAAK,CAACQ,MAAM,CAACC,IAAI,CAAC,GAAG;MACxC;IACF,CAAC;IACDS,OAAO,EAAE;MACPF,IAAI,EAAE;QACJC,eAAe,EAAEjB,KAAK,CAACQ,MAAM,CAACC,IAAI,CAAC,CAAC;MACtC;IACF,CAAC;IACDU,YAAY,EAAEC,KAAK,IAAI;MACrB,IAAI,CAACA,KAAK,EAAE;MACZ,OAAO;QACLH,eAAe,EAAEG,KAAK;QACtBb,WAAW,EAAEa;MACf,CAAC;IACH;EACF;AACF,CAAC,CAAC;AAEF,MAAMC,iBAAiB,GAAGA,CAAC;EAC1BC,IAAI,GAAE,EAAE;EACRC,OAAO;EACPR,QAAQ,GAAG,KAAK;EAChBS,QAAQ;EACRL,YAAY;EACZM,SAAS;EACT,GAAGC;AACJ,CAAC,KAAK;EACJ,MAAMR,OAAO,GAAGM,QAAQ,KAAKF,IAAI;EACjC,oBACE3B,KAAA,CAAAgC,aAAA,CAAC1B,WAAW,EAAA2B,QAAA;IACVb,QAAQ,EAAEA,QAAS;IACnBG,OAAO,EAAEA,OAAQ;IACjBC,YAAY,EAAED,OAAO,IAAIC,YAAY,IAAIA,YAAa;IACtDI,OAAO,EAAEA,CAAA,KAAMA,OAAO,IAAIA,OAAO,CAACD,IAAI;EAAE,GACpCI,IAAI,GAEPR,OAAO,iBACRvB,KAAA,CAAAgC,aAAA,CAAC5B,IAAI,EAAA6B,QAAA;IACHN,IAAI,EAAC,QAAQ;IACbF,KAAK,EAAEpB,KAAK,CAACQ,MAAM,CAACC,IAAI,CAAC,GAAG,CAAE;IAC9BK,IAAI,EAAE;EAAG,GACLW,SAAS,CAChB,CACY,CAAC;AAElB,CAAC;AAED,SAASJ,iBAAiB","ignoreList":[]}

package/lib/module/package/safeAreaView/index.js

@@ -1,5 +1,6 @@
 import { SafeAreaView } from 'react-native';
 import { styled } from '../styled';
+import { isValidColor } from '../utils';
 const StyledSafeAreaView = styled(SafeAreaView, {
   base: {
     flex: 1

package/lib/module/package/safeAreaView/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["SafeAreaView","styled","StyledSafeAreaView","base","flex","variants","backgroundColor","color","isValidColor","Error"],"sources":["index.jsx"],"sourcesContent":["import { SafeAreaView } from 'react-native'\r\nimport { styled } from '../styled'\r\n\r\nconst StyledSafeAreaView = styled(SafeAreaView, {\r\n  base: {\r\n    flex: 1\r\n  },\r\n  variants: {\r\n    backgroundColor: color => {\r\n      if (!color) return\r\n      if (!isValidColor(color)) {\r\n        throw new Error('Invalid backgroundColor value')\r\n      }\r\n      return { backgroundColor: color }\r\n    }\r\n  }\r\n})\r\n\r\nexport { StyledSafeAreaView }\r\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,cAAc;AAC3C,SAASC,MAAM,QAAQ,WAAW;AAElC,MAAMC,kBAAkB,GAAGD,MAAM,CAACD,YAAY,EAAE;EAC9CG,IAAI,EAAE;IACJC,IAAI,EAAE;EACR,CAAC;EACDC,QAAQ,EAAE;IACRC,eAAe,EAAEC,KAAK,IAAI;MACxB,IAAI,CAACA,KAAK,EAAE;MACZ,IAAI,CAACC,YAAY,CAACD,KAAK,CAAC,EAAE;QACxB,MAAM,IAAIE,KAAK,CAAC,+BAA+B,CAAC;MAClD;MACA,OAAO;QAAEH,eAAe,EAAEC;MAAM,CAAC;IACnC;EACF;AACF,CAAC,CAAC;AAEF,SAASL,kBAAkB","ignoreList":[]}
+{"version":3,"names":["SafeAreaView","styled","isValidColor","StyledSafeAreaView","base","flex","variants","backgroundColor","color","Error"],"sources":["index.jsx"],"sourcesContent":["import { SafeAreaView } from 'react-native'\r\nimport { styled } from '../styled'\r\nimport { isValidColor } from '../utils'\r\n\r\nconst StyledSafeAreaView = styled(SafeAreaView, {\r\n  base: {\r\n    flex: 1\r\n  },\r\n  variants: {\r\n    backgroundColor: color => {\r\n      if (!color) return\r\n      if (!isValidColor(color)) {\r\n        throw new Error('Invalid backgroundColor value')\r\n      }\r\n      return { backgroundColor: color }\r\n    }\r\n  }\r\n})\r\n\r\nexport { StyledSafeAreaView }\r\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,cAAc;AAC3C,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,YAAY,QAAQ,UAAU;AAEvC,MAAMC,kBAAkB,GAAGF,MAAM,CAACD,YAAY,EAAE;EAC9CI,IAAI,EAAE;IACJC,IAAI,EAAE;EACR,CAAC;EACDC,QAAQ,EAAE;IACRC,eAAe,EAAEC,KAAK,IAAI;MACxB,IAAI,CAACA,KAAK,EAAE;MACZ,IAAI,CAACN,YAAY,CAACM,KAAK,CAAC,EAAE;QACxB,MAAM,IAAIC,KAAK,CAAC,+BAA+B,CAAC;MAClD;MACA,OAAO;QAAEF,eAAe,EAAEC;MAAM,CAAC;IACnC;EACF;AACF,CAAC,CAAC;AAEF,SAASL,kBAAkB","ignoreList":[]}

package/lib/module/package/scrollView/index.js

@@ -1,5 +1,6 @@
 import { ScrollView } from 'react-native';
 import { styled } from '../styled';
+import { isValidColor } from '../utils';
 const StyledScrollView = styled(ScrollView, {
   variants: {
     backgroundColor: color => {

package/lib/module/package/scrollView/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["ScrollView","styled","StyledScrollView","variants","backgroundColor","color","isValidColor","Error"],"sources":["index.jsx"],"sourcesContent":["import { ScrollView } from 'react-native'\r\nimport { styled } from '../styled'\r\n\r\nconst StyledScrollView = styled(ScrollView, {\r\n  variants: {\r\n    backgroundColor: color => {\r\n      if (!color) return\r\n      if (!isValidColor(color)) {\r\n        throw new Error('Invalid backgroundColor value')\r\n      }\r\n      return { backgroundColor: color }\r\n    }\r\n  }\r\n})\r\n\r\nexport { StyledScrollView }\r\n"],"mappings":"AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,MAAM,QAAQ,WAAW;AAElC,MAAMC,gBAAgB,GAAGD,MAAM,CAACD,UAAU,EAAE;EAC1CG,QAAQ,EAAE;IACRC,eAAe,EAAEC,KAAK,IAAI;MACxB,IAAI,CAACA,KAAK,EAAE;MACZ,IAAI,CAACC,YAAY,CAACD,KAAK,CAAC,EAAE;QACxB,MAAM,IAAIE,KAAK,CAAC,+BAA+B,CAAC;MAClD;MACA,OAAO;QAAEH,eAAe,EAAEC;MAAM,CAAC;IACnC;EACF;AACF,CAAC,CAAC;AAEF,SAASH,gBAAgB","ignoreList":[]}
+{"version":3,"names":["ScrollView","styled","isValidColor","StyledScrollView","variants","backgroundColor","color","Error"],"sources":["index.jsx"],"sourcesContent":["import { ScrollView } from 'react-native'\r\nimport { styled } from '../styled'\r\nimport { isValidColor } from '../utils'\r\n\r\nconst StyledScrollView = styled(ScrollView, {\r\n  variants: {\r\n    backgroundColor: color => {\r\n      if (!color) return\r\n      if (!isValidColor(color)) {\r\n        throw new Error('Invalid backgroundColor value')\r\n      }\r\n      return { backgroundColor: color }\r\n    }\r\n  }\r\n})\r\n\r\nexport { StyledScrollView }\r\n"],"mappings":"AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,YAAY,QAAQ,UAAU;AAEvC,MAAMC,gBAAgB,GAAGF,MAAM,CAACD,UAAU,EAAE;EAC1CI,QAAQ,EAAE;IACRC,eAAe,EAAEC,KAAK,IAAI;MACxB,IAAI,CAACA,KAAK,EAAE;MACZ,IAAI,CAACJ,YAAY,CAACI,KAAK,CAAC,EAAE;QACxB,MAAM,IAAIC,KAAK,CAAC,+BAA+B,CAAC;MAClD;MACA,OAAO;QAAEF,eAAe,EAAEC;MAAM,CAAC;IACnC;EACF;AACF,CAAC,CAAC;AAEF,SAASH,gBAAgB","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluent-styles",
-  "version": "1.7.0",
+  "version": "1.9.0",
   "description": "Develop different styled versions of UI components.",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",

package/src/package/radioButton/index.jsx

@@ -3,7 +3,6 @@ import { styled } from '../styled'
 import { TouchableOpacity } from 'react-native'
 import Icon from 'react-native-vector-icons/MaterialIcons'
 import { theme } from '../theme'
-import { isValidColor, isValidNumber, isValidString } from '../utils'
 
 const RadioButton = styled(TouchableOpacity, {
   base: {
@@ -17,14 +16,12 @@ const RadioButton = styled(TouchableOpacity, {
     flexDirection: 'column'
   },
   variants: {
-    width: size => {
-      if (!size) return
-      return { width: size }
-    },
-    height: size => {
-      if (!size) return
-      return { height: size }
-    },
+    height: size => ({
+      height: size || 24
+    }),
+    width: size => ({
+      width: size || 24
+    }),
     disabled: {
       true: {
         backgroundColor: theme.colors.gray[500]
@@ -46,25 +43,21 @@ const RadioButton = styled(TouchableOpacity, {
 })
 
 const StyledRadioButton = ({
+	name= "",
 	onPress,
 	disabled = false,
+	selected,
 	checkedColor,
 	iconProps,
 	...rest
 }) => {
-  const [checked, setChecked] = useState(false)
-
-  const toggleCheckbox = () => {
-    setChecked(!checked)
-    onPress && onPress(!checked)
-  }
-
+  const checked = selected === name 
   return (
     <RadioButton
       disabled={disabled}
       checked={checked}
       checkedColor={checked && checkedColor && checkedColor}
-      onPress={() => toggleCheckbox()}
+      onPress={() => onPress && onPress(name)}
       {...rest}
 		>
       {checked &&

package/src/package/safeAreaView/index.jsx

@@ -1,5 +1,6 @@
 import { SafeAreaView } from 'react-native'
 import { styled } from '../styled'
+import { isValidColor } from '../utils'
 
 const StyledSafeAreaView = styled(SafeAreaView, {
   base: {

package/src/package/scrollView/index.jsx

@@ -1,5 +1,6 @@
 import { ScrollView } from 'react-native'
 import { styled } from '../styled'
+import { isValidColor } from '../utils'
 
 const StyledScrollView = styled(ScrollView, {
   variants: {