fluent-styles 1.20.0 → 1.22.0

package/lib/commonjs/package/checkBox/index.js

@@ -19,24 +19,19 @@ const CheckBox = (0, _styled.styled)(_reactNative.TouchableOpacity, {
     height: 24,
     borderWidth: 2,
     borderRadius: 1,
+    backgroundColor: _theme.theme.colors.gray[1],
     borderColor: _theme.theme.colors.gray[700],
     justifyContent: 'center',
     alignItems: 'center',
     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]
@@ -45,6 +40,9 @@ const CheckBox = (0, _styled.styled)(_reactNative.TouchableOpacity, {
     checked: {
       true: {
         backgroundColor: _theme.theme.colors.gray[800]
+      },
+      false: {
+        backgroundColor: _theme.theme.colors.gray[1]
       }
     },
     checkedColor: color => {
@@ -60,25 +58,28 @@ const StyledCheckBox = ({
   onPress,
   disabled = false,
   checkedColor,
+  checked = false,
   iconProps,
   ...rest
 }) => {
-  const [checked, setChecked] = (0, _react.useState)(false);
+  const [check, setCheck] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    setCheck(checked);
+  }, [checked]);
   const toggleCheckbox = () => {
-    setChecked(!checked);
-    onPress && onPress(!checked);
+    setCheck(!check);
+    onPress && onPress(!check);
   };
   return /*#__PURE__*/_react.default.createElement(CheckBox, _extends({
     disabled: disabled,
-    checked: checked,
-    checkedColor: checked && checkedColor && checkedColor,
+    checked: check,
+    checkedColor: check && checkedColor && checkedColor,
     onPress: () => toggleCheckbox()
-  }, rest), checked && /*#__PURE__*/_react.default.createElement(_MaterialIcons.default, _extends({
-    name: "check"
-  }, iconProps, {
+  }, rest), check && /*#__PURE__*/_react.default.createElement(_MaterialIcons.default, _extends({
+    name: "check",
     color: _theme.theme.colors.gray[1],
     size: 20
-  })));
+  }, iconProps)));
 };
 exports.StyledCheckBox = StyledCheckBox;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"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","CheckBox","styled","TouchableOpacity","base","width","height","borderWidth","borderRadius","borderColor","theme","colors","gray","justifyContent","alignItems","flexDirection","variants","size","disabled","true","backgroundColor","checked","checkedColor","color","StyledCheckBox","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\n\r\nconst CheckBox = styled(TouchableOpacity, {\r\n  base: {\r\n    width: 24,\r\n    height: 24,\r\n    borderWidth: 2,\r\n    borderRadius: 1,\r\n    borderColor: theme.colors.gray[700],\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[800]\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 StyledCheckBox = ({\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    <CheckBox\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='check'\r\n        {...iconProps}\r\n        color={theme.colors.gray[1]}\r\n        size={20}\r\n\t\t\t\t/>}\r\n    </CheckBox>\r\n  )\r\n}\r\n\r\nexport { StyledCheckBox }\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","CheckBox","styled","TouchableOpacity","base","width","height","borderWidth","borderRadius","backgroundColor","theme","colors","gray","borderColor","justifyContent","alignItems","flexDirection","variants","size","disabled","true","checked","false","checkedColor","color","StyledCheckBox","onPress","iconProps","rest","check","setCheck","useState","useEffect","toggleCheckbox","createElement","name","exports"],"sources":["index.jsx"],"sourcesContent":["import React, { useState, useEffect } 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 CheckBox = styled(TouchableOpacity, {\r\n  base: {\r\n    width: 24,\r\n    height: 24,\r\n    borderWidth: 2,\r\n    borderRadius: 1,\r\n    backgroundColor: theme.colors.gray[1],\r\n    borderColor: theme.colors.gray[700],\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[800]\r\n      },\r\n      false: {\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 StyledCheckBox = ({\r\n  onPress,\r\n  disabled = false,\r\n  checkedColor,\r\n  checked = false,\r\n  iconProps,\r\n  ...rest\r\n}) => {\r\n  const [check, setCheck] = useState(false)\r\n\r\n  useEffect(\r\n    () => {\r\n      setCheck(checked)\r\n    },\r\n    [checked]\r\n  )\r\n\r\n  const toggleCheckbox = () => {\r\n    setCheck(!check)\r\n    onPress && onPress(!check)\r\n  }\r\n\r\n  return (\r\n    <CheckBox\r\n      disabled={disabled}\r\n      checked={check}\r\n      checkedColor={check && checkedColor && checkedColor}\r\n      onPress={() => toggleCheckbox()}\r\n      {...rest}\r\n    >\r\n      {check &&\r\n        <Icon\r\n          name='check'\r\n          color={theme.colors.gray[1]}\r\n          size={20}\r\n          {...iconProps}\r\n        />}\r\n    </CheckBox>\r\n  )\r\n}\r\n\r\nexport { StyledCheckBox }\r\n"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/package/dropdown/index.js

@@ -41,16 +41,12 @@ const StyledDropdown = ({
   items,
   label,
   errorMessage,
+  error,
   labelStyles,
   ...rest
 }) => {
   const [open, setOpen] = (0, _react.useState)(false);
-  return /*#__PURE__*/_react.default.createElement(_stack.YStack, {
-    justifyContent: "flex-start",
-    alignItems: "flex-start"
-  }, label && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_spacer.StyledSpacer, {
-    marginVertical: 4
-  }), /*#__PURE__*/_react.default.createElement(_text.StyledText, _extends({
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, label && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_text.StyledText, _extends({
     paddingHorizontal: 8,
     color: _theme.theme.colors.gray[600],
     fontSize: _theme.theme.fontSize.normal,
@@ -61,7 +57,7 @@ const StyledDropdown = ({
     open: open,
     setOpen: setOpen,
     items: items
-  }, rest)), errorMessage && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_spacer.StyledSpacer, {
+  }, rest)), error && errorMessage && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_spacer.StyledSpacer, {
     marginVertical: 1
   }), /*#__PURE__*/_react.default.createElement(_text.StyledText, {
     marginHorizontal: 16,

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_stack","_text","_spacer","_reactNativeDropdownPicker","_interopRequireDefault","_theme","_styled","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","Dropdown","styled","DropDownPicker","base","borderColor","theme","colors","gray","borderWidth","borderRadius","backgroundColor","width","color","paddingHorizontal","variants","error","true","pink","false","StyledDropdown","items","label","errorMessage","labelStyles","rest","open","setOpen","useState","createElement","YStack","justifyContent","alignItems","Fragment","StyledSpacer","marginVertical","StyledText","fontSize","normal","fontWeight","marginHorizontal","bold","small","exports","StyledMultiDropdown","onSelected","selected","setSelected","useEffect","setValue","value","multiple"],"sources":["index.jsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\r\nimport { YStack } from '../stack';\r\nimport { StyledText } from '../text';\r\nimport { StyledSpacer } from '../spacer';\r\nimport DropDownPicker from \"react-native-dropdown-picker\";\r\nimport { theme } from \"../theme\";\r\nimport { styled } from \"../styled\";\r\n\r\nconst Dropdown = styled(DropDownPicker, {\r\n    base: {\r\n        borderColor: theme.colors.gray[800],\r\n        borderWidth: 1,\r\n        borderRadius: 30,\r\n        backgroundColor: theme.colors.gray[1],\r\n        width: '100%',\r\n        color: theme.colors.gray[800],\r\n        paddingHorizontal: 16,\r\n    },\r\n    variants: {\r\n        error: {\r\n            true: {\r\n                borderColor: theme.colors.pink[500],\r\n                borderWidth: 1,\r\n            },\r\n            false: {\r\n                borderColor: theme.colors.gray[800],\r\n            }\r\n        },\r\n    }\r\n})\r\n\r\nconst StyledDropdown = ({ items, label, errorMessage, labelStyles, ...rest }) => {\r\n    const [open, setOpen] = useState(false)\r\n    return (\r\n        <YStack justifyContent='flex-start' alignItems='flex-start'>\r\n            {\r\n                label && (\r\n                    <>\r\n                        <StyledSpacer marginVertical={4} />\r\n                        <StyledText paddingHorizontal={8} color={theme.colors.gray[600]} fontSize={theme.fontSize.normal} fontWeight={theme.fontWeight.normal} {...labelStyles}>\r\n                            {label}\r\n                        </StyledText>\r\n                        <StyledSpacer marginVertical={4} />\r\n                    </>\r\n\r\n                )\r\n            }\r\n            <Dropdown open={open} setOpen={setOpen} items={items} {...rest} />\r\n            {\r\n                errorMessage && (\r\n                    <>\r\n                        <StyledSpacer marginVertical={1} />\r\n                        <StyledText marginHorizontal={16} fontWeight={theme.fontWeight.bold} fontSize={theme.fontSize.small} color={theme.colors.pink[500]}>\r\n                            {errorMessage}\r\n                        </StyledText>\r\n                    </>\r\n                )\r\n            }\r\n\r\n        </YStack>\r\n    )\r\n}\r\n\r\nconst StyledMultiDropdown = ({ items, label, errorMessage, labelStyles, onSelected, ...rest }) => {\r\n    const [selected, setSelected] = useState([])\r\n    const [open, setOpen] = useState(false)\r\n\r\n    useEffect(() => {\r\n        onSelected && onSelected(selected)\r\n    }, [selected])\r\n\r\n    return (\r\n        <YStack justifyContent='flex-start' alignItems='flex-start'>\r\n            {\r\n                label && (\r\n                    <>\r\n                        <StyledSpacer marginVertical={4} />\r\n                        <StyledText paddingHorizontal={8} color={theme.colors.gray[600]} fontSize={theme.fontSize.normal} fontWeight={theme.fontWeight.normal} {...labelStyles}>\r\n                            {label}\r\n                        </StyledText>\r\n                        <StyledSpacer marginVertical={4} />\r\n                    </>\r\n\r\n                )\r\n            }\r\n            <Dropdown open={open} setOpen={setOpen} items={items} setValue={setSelected} value={selected} multiple {...rest} />\r\n            {\r\n                errorMessage && (\r\n                    <>\r\n                        <StyledSpacer marginVertical={1} />\r\n                        <StyledText marginHorizontal={16} fontWeight={theme.fontWeight.bold} fontSize={theme.fontSize.small} color={theme.colors.pink[500]}>\r\n                            {errorMessage}\r\n                        </StyledText>\r\n                    </>\r\n                )\r\n            }\r\n\r\n        </YStack>\r\n    )\r\n}\r\n\r\nexport { StyledDropdown, StyledMultiDropdown }"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_stack","_text","_spacer","_reactNativeDropdownPicker","_interopRequireDefault","_theme","_styled","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","Dropdown","styled","DropDownPicker","base","borderColor","theme","colors","gray","borderWidth","borderRadius","backgroundColor","width","color","paddingHorizontal","variants","error","true","pink","false","StyledDropdown","items","label","errorMessage","labelStyles","rest","open","setOpen","useState","createElement","Fragment","StyledText","fontSize","normal","fontWeight","StyledSpacer","marginVertical","marginHorizontal","bold","small","exports","StyledMultiDropdown","onSelected","selected","setSelected","useEffect","YStack","justifyContent","alignItems","setValue","value","multiple"],"sources":["index.jsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\r\nimport { YStack } from '../stack';\r\nimport { StyledText } from '../text';\r\nimport { StyledSpacer } from '../spacer';\r\nimport DropDownPicker from \"react-native-dropdown-picker\";\r\nimport { theme } from \"../theme\";\r\nimport { styled } from \"../styled\";\r\n\r\nconst Dropdown = styled(DropDownPicker, {\r\n    base: {\r\n        borderColor: theme.colors.gray[800],\r\n        borderWidth: 1,\r\n        borderRadius: 30,\r\n        backgroundColor: theme.colors.gray[1],\r\n        width: '100%',\r\n        color: theme.colors.gray[800],\r\n        paddingHorizontal: 16,\r\n    },\r\n    variants: {\r\n        error: {\r\n            true: {\r\n                borderColor: theme.colors.pink[500],\r\n                borderWidth: 1,\r\n            },\r\n            false: {\r\n                borderColor: theme.colors.gray[800],\r\n            }\r\n        },\r\n    }\r\n})\r\n\r\nconst StyledDropdown = ({ items, label, errorMessage, error, labelStyles, ...rest }) => {\r\n    const [open, setOpen] = useState(false)\r\n    return (\r\n        <>\r\n            {\r\n                label && (\r\n                    <>                       \r\n                        <StyledText paddingHorizontal={8} color={theme.colors.gray[600]} fontSize={theme.fontSize.normal} fontWeight={theme.fontWeight.normal} {...labelStyles}>\r\n                            {label}\r\n                        </StyledText>\r\n                        <StyledSpacer marginVertical={4} />\r\n                    </>\r\n\r\n                )\r\n            }\r\n            <Dropdown open={open} setOpen={setOpen} items={items} {...rest} />\r\n            {\r\n                (error && errorMessage)  && (\r\n                    <>\r\n                        <StyledSpacer marginVertical={1} />\r\n                        <StyledText marginHorizontal={16} fontWeight={theme.fontWeight.bold} fontSize={theme.fontSize.small} color={theme.colors.pink[500]}>\r\n                            {errorMessage}\r\n                        </StyledText>\r\n                    </>\r\n                )\r\n            }\r\n\r\n        </>\r\n    )\r\n}\r\n\r\nconst StyledMultiDropdown = ({ items, label, errorMessage, labelStyles, onSelected, ...rest }) => {\r\n    const [selected, setSelected] = useState([])\r\n    const [open, setOpen] = useState(false)\r\n\r\n    useEffect(() => {\r\n        onSelected && onSelected(selected)\r\n    }, [selected])\r\n\r\n    return (\r\n        <YStack justifyContent='flex-start' alignItems='flex-start'>\r\n            {\r\n                label && (\r\n                    <>\r\n                        <StyledSpacer marginVertical={4} />\r\n                        <StyledText paddingHorizontal={8} color={theme.colors.gray[600]} fontSize={theme.fontSize.normal} fontWeight={theme.fontWeight.normal} {...labelStyles}>\r\n                            {label}\r\n                        </StyledText>\r\n                        <StyledSpacer marginVertical={4} />\r\n                    </>\r\n\r\n                )\r\n            }\r\n            <Dropdown open={open} setOpen={setOpen} items={items} setValue={setSelected} value={selected} multiple {...rest} />\r\n            {\r\n                errorMessage && (\r\n                    <>\r\n                        <StyledSpacer marginVertical={1} />\r\n                        <StyledText marginHorizontal={16} fontWeight={theme.fontWeight.bold} fontSize={theme.fontSize.small} color={theme.colors.pink[500]}>\r\n                            {errorMessage}\r\n                        </StyledText>\r\n                    </>\r\n                )\r\n            }\r\n\r\n        </YStack>\r\n    )\r\n}\r\n\r\nexport { StyledDropdown, StyledMultiDropdown }"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/package/form/index.js

@@ -109,7 +109,7 @@ const StyledInputText = (0, _styled.styled)(_reactNative.TextInput, {
 });
 const StyledInput = exports.StyledInput = /*#__PURE__*/(0, _react.forwardRef)(({
   label,
-  flex = 0,
+  flex = 1,
   borderColor,
   errorMessage,
   error,
@@ -118,7 +118,7 @@ const StyledInput = exports.StyledInput = /*#__PURE__*/(0, _react.forwardRef)(({
   ...rest
 }, ref) => {
   return /*#__PURE__*/_react.default.createElement(_stack.YStack, {
-    width: '100%'
+    flex: flex
   }, label && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_text.StyledText, _extends({
     paddingHorizontal: 8,
     color: _theme.theme.colors.gray[800],

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_stack","_text","_spacer","_theme","_styled","_utils","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","StyledInputText","styled","TextInput","base","borderColor","theme","colors","gray","borderWidth","borderRadius","backgroundColor","fontWeight","normal","width","color","paddingHorizontal","paddingVertical","fontSize","placeholderTextColor","variants","size","isValidString","Error","isValidColor","isValidNumber","fontFamily","font","textAlign","align","validAlignments","includes","value","noBorder","true","StyledInput","exports","forwardRef","label","flex","errorMessage","error","errorProps","labelProps","rest","ref","createElement","YStack","Fragment","StyledText","StyledSpacer","marginVertical","pink","marginHorizontal","bold","small","StyledMultiInput","justifyContent","alignItems","textAlignVertical","multiline","numberOfLines","inputMode","_default"],"sources":["index.jsx"],"sourcesContent":["import React, { forwardRef } from 'react';\r\nimport { TextInput } from 'react-native';\r\nimport { YStack } from '../stack';\r\nimport { StyledText } from '../text';\r\nimport { StyledSpacer } from '../spacer';\r\nimport { theme } from '../theme';\r\nimport { styled } from '../styled';\r\nimport { isValidColor, isValidNumber, isValidString } from '../utils';\r\n\r\nconst StyledInputText = styled(TextInput, {\r\n    base: {\r\n        borderColor: theme.colors.gray[800],\r\n        borderWidth: 1,\r\n        borderRadius: 30,\r\n        backgroundColor: theme.fontWeight.normal[1],\r\n        width: '100%',\r\n        color: theme.colors.gray[800],\r\n        paddingHorizontal: 16,\r\n        paddingVertical: 8,\r\n        fontSize: theme.fontSize.normal,\r\n        placeholderTextColor: theme.colors.gray[1],\r\n    },\r\n    variants : {\r\n    fontWeight: (size = theme.fontWeight.normal) => {\r\n        if (!isValidString(size)) {\r\n            throw new Error('Invalid fontWeight value');\r\n        }\r\n        return { fontWeight: size };\r\n    },\r\n    color: (color = theme.colors.gray[800]) => {\r\n        if (!isValidColor(color)) {\r\n            throw new Error('Invalid color value');\r\n        }\r\n        return { color: color };\r\n    },\r\n    fontSize: (size = theme.fontSize.normal) => {\r\n        if (!isValidNumber(size)) {\r\n            throw new Error('Invalid fontSize value');\r\n        }\r\n        return { fontSize: size };\r\n    },\r\n    fontFamily: font => {\r\n      if (!font) return\r\n      return {\r\n        fontFamily: font\r\n      }\r\n    },\r\n    textAlign: (align = 'left') => {\r\n        const validAlignments = ['auto', 'left', 'right', 'center', 'justify'];\r\n        if (!validAlignments.includes(align)) {\r\n            throw new Error('Invalid textAlign value');\r\n        }\r\n        return { textAlign: align };\r\n    },\r\n    borderRadius: (value = 16) => {\r\n        if (!isValidNumber(value)) {\r\n            throw new Error('Invalid borderRadius value');\r\n        }\r\n        return { borderRadius: value };\r\n    },\r\n    borderColor: (value  = theme.colors.gray[100]) => {\r\n        if (!isValidColor(value)) {\r\n            throw new Error('Invalid borderColor value');\r\n        }\r\n        return { borderColor: value };\r\n    },\r\n    backgroundColor: (value = theme.colors.gray[1]) => {\r\n        if (!isValidColor(value)) {\r\n            throw new Error('Invalid backgroundColor value');\r\n        }\r\n        return { backgroundColor: value };\r\n    },\r\n    noBorder: {\r\n        true: { borderWidth: 0 }\r\n    },\r\n    placeholderTextColor: (value = theme.colors.gray[800]) => {\r\n        if (!isValidColor(value)) {\r\n            throw new Error('Invalid placeholderTextColor value');\r\n        }\r\n        return { placeholderTextColor: value };\r\n    },\r\n}\r\n});\r\n\r\nconst StyledInput = forwardRef(({ label, flex = 0, borderColor, errorMessage, error, errorProps, labelProps, ...rest }, ref) => {\r\n    return (\r\n        <YStack width={'100%'}>\r\n            {\r\n                label && (\r\n                    <>\r\n                        <StyledText paddingHorizontal={8} color={theme.colors.gray[800]} fontSize={theme.fontSize.normal} fontWeight={theme.fontWeight.normal} {...labelProps}>\r\n                            {label}\r\n                        </StyledText>\r\n                        <StyledSpacer marginVertical={4} />\r\n                    </>\r\n                )\r\n            }\r\n            <StyledInputText placeholderTextColor={theme.colors.gray[400]} ref={ref} {...rest} borderColor={error ? theme.colors.pink[500] : borderColor} />\r\n            {\r\n                errorMessage && (\r\n                    <>\r\n                        <StyledSpacer marginVertical={1} />\r\n                        <StyledText marginHorizontal={8} fontWeight={theme.fontWeight.bold} fontSize={theme.fontSize.small} color={theme.colors.pink[500]} {...errorProps}>\r\n                            {errorMessage}\r\n                        </StyledText>\r\n                    </>\r\n                )\r\n            }\r\n        </YStack>\r\n    )\r\n})\r\n\r\nconst StyledMultiInput = ({ label, errorMessage, borderColor, error, errorProps, labelProps, ...rest }) => {\r\n    return (\r\n        <YStack width={'100%'} justifyContent='flex-start' alignItems='flex-start'>\r\n            {\r\n                label && (\r\n                    <>\r\n                        <StyledSpacer marginVertical={4} />\r\n                        <StyledText paddingHorizontal={8} color={theme.colors.gray[800]} fontSize={theme.fontSize.normal} fontWeight={theme.fontWeight.normal} {...labelProps}>\r\n                            {label}\r\n                        </StyledText>\r\n                        <StyledSpacer marginVertical={4} />\r\n                    </>\r\n\r\n                )\r\n            }\r\n            <StyledInputText borderRadius={16} textAlignVertical='top' multiline numberOfLines={5} inputMode='text' {...rest} borderColor={error ? theme.colors.pink[500] : borderColor} />\r\n            {\r\n                errorMessage && (\r\n                    <>\r\n                        <StyledSpacer marginVertical={1} />\r\n                        <StyledText marginHorizontal={8} fontWeight={theme.fontWeight.bold} fontSize={theme.fontSize.small} color={theme.colors.pink[500]} {...errorProps}>\r\n                            {errorMessage}\r\n                        </StyledText>\r\n                    </>\r\n                )\r\n            }\r\n\r\n        </YStack>\r\n    )\r\n}\r\n\r\nexport { StyledInput, StyledMultiInput }\r\nexport default StyledInputText"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_stack","_text","_spacer","_theme","_styled","_utils","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","StyledInputText","styled","TextInput","base","borderColor","theme","colors","gray","borderWidth","borderRadius","backgroundColor","fontWeight","normal","width","color","paddingHorizontal","paddingVertical","fontSize","placeholderTextColor","variants","size","isValidString","Error","isValidColor","isValidNumber","fontFamily","font","textAlign","align","validAlignments","includes","value","noBorder","true","StyledInput","exports","forwardRef","label","flex","errorMessage","error","errorProps","labelProps","rest","ref","createElement","YStack","Fragment","StyledText","StyledSpacer","marginVertical","pink","marginHorizontal","bold","small","StyledMultiInput","justifyContent","alignItems","textAlignVertical","multiline","numberOfLines","inputMode","_default"],"sources":["index.jsx"],"sourcesContent":["import React, { forwardRef } from 'react';\r\nimport { TextInput } from 'react-native';\r\nimport { YStack } from '../stack';\r\nimport { StyledText } from '../text';\r\nimport { StyledSpacer } from '../spacer';\r\nimport { theme } from '../theme';\r\nimport { styled } from '../styled';\r\nimport { isValidColor, isValidNumber, isValidString } from '../utils';\r\n\r\nconst StyledInputText = styled(TextInput, {\r\n    base: {\r\n        borderColor: theme.colors.gray[800],\r\n        borderWidth: 1,\r\n        borderRadius: 30,\r\n        backgroundColor: theme.fontWeight.normal[1],\r\n        width: '100%',\r\n        color: theme.colors.gray[800],\r\n        paddingHorizontal: 16,\r\n        paddingVertical: 8,\r\n        fontSize: theme.fontSize.normal,\r\n        placeholderTextColor: theme.colors.gray[1],\r\n    },\r\n    variants: {\r\n        fontWeight: (size = theme.fontWeight.normal) => {\r\n            if (!isValidString(size)) {\r\n                throw new Error('Invalid fontWeight value');\r\n            }\r\n            return { fontWeight: size };\r\n        },\r\n        color: (color = theme.colors.gray[800]) => {\r\n            if (!isValidColor(color)) {\r\n                throw new Error('Invalid color value');\r\n            }\r\n            return { color: color };\r\n        },\r\n        fontSize: (size = theme.fontSize.normal) => {\r\n            if (!isValidNumber(size)) {\r\n                throw new Error('Invalid fontSize value');\r\n            }\r\n            return { fontSize: size };\r\n        },\r\n        fontFamily: font => {\r\n            if (!font) return\r\n            return {\r\n                fontFamily: font\r\n            }\r\n        },\r\n        textAlign: (align = 'left') => {\r\n            const validAlignments = ['auto', 'left', 'right', 'center', 'justify'];\r\n            if (!validAlignments.includes(align)) {\r\n                throw new Error('Invalid textAlign value');\r\n            }\r\n            return { textAlign: align };\r\n        },\r\n        borderRadius: (value = 16) => {\r\n            if (!isValidNumber(value)) {\r\n                throw new Error('Invalid borderRadius value');\r\n            }\r\n            return { borderRadius: value };\r\n        },\r\n        borderColor: (value = theme.colors.gray[100]) => {\r\n            if (!isValidColor(value)) {\r\n                throw new Error('Invalid borderColor value');\r\n            }\r\n            return { borderColor: value };\r\n        },\r\n        backgroundColor: (value = theme.colors.gray[1]) => {\r\n            if (!isValidColor(value)) {\r\n                throw new Error('Invalid backgroundColor value');\r\n            }\r\n            return { backgroundColor: value };\r\n        },\r\n        noBorder: {\r\n            true: { borderWidth: 0 }\r\n        },\r\n        placeholderTextColor: (value = theme.colors.gray[800]) => {\r\n            if (!isValidColor(value)) {\r\n                throw new Error('Invalid placeholderTextColor value');\r\n            }\r\n            return { placeholderTextColor: value };\r\n        }       \r\n    }\r\n});\r\n\r\nconst StyledInput = forwardRef(({ label, flex = 1, borderColor, errorMessage, error, errorProps, labelProps, ...rest }, ref) => {\r\n    return (\r\n        <YStack flex={flex}>\r\n            {\r\n                label && (\r\n                    <>\r\n                        <StyledText paddingHorizontal={8} color={theme.colors.gray[800]} fontSize={theme.fontSize.normal} fontWeight={theme.fontWeight.normal} {...labelProps}>\r\n                            {label}\r\n                        </StyledText>\r\n                        <StyledSpacer marginVertical={4} />\r\n                    </>\r\n                )\r\n            }\r\n            <StyledInputText placeholderTextColor={theme.colors.gray[400]} ref={ref} {...rest} borderColor={error ? theme.colors.pink[500] : borderColor} />\r\n            {\r\n                errorMessage && (\r\n                    <>\r\n                        <StyledSpacer marginVertical={1} />\r\n                        <StyledText marginHorizontal={8} fontWeight={theme.fontWeight.bold} fontSize={theme.fontSize.small} color={theme.colors.pink[500]} {...errorProps}>\r\n                            {errorMessage}\r\n                        </StyledText>\r\n                    </>\r\n                )\r\n            }\r\n        </YStack>\r\n    )\r\n})\r\n\r\nconst StyledMultiInput = ({ label, errorMessage, borderColor, error, errorProps, labelProps, ...rest }) => {\r\n    return (\r\n        <YStack width={'100%'} justifyContent='flex-start' alignItems='flex-start'>\r\n            {\r\n                label && (\r\n                    <>\r\n                        <StyledSpacer marginVertical={4} />\r\n                        <StyledText paddingHorizontal={8} color={theme.colors.gray[800]} fontSize={theme.fontSize.normal} fontWeight={theme.fontWeight.normal} {...labelProps}>\r\n                            {label}\r\n                        </StyledText>\r\n                        <StyledSpacer marginVertical={4} />\r\n                    </>\r\n\r\n                )\r\n            }\r\n            <StyledInputText borderRadius={16} textAlignVertical='top' multiline numberOfLines={5} inputMode='text' {...rest} borderColor={error ? theme.colors.pink[500] : borderColor} />\r\n            {\r\n                errorMessage && (\r\n                    <>\r\n                        <StyledSpacer marginVertical={1} />\r\n                        <StyledText marginHorizontal={8} fontWeight={theme.fontWeight.bold} fontSize={theme.fontSize.small} color={theme.colors.pink[500]} {...errorProps}>\r\n                            {errorMessage}\r\n                        </StyledText>\r\n                    </>\r\n                )\r\n            }\r\n\r\n        </YStack>\r\n    )\r\n}\r\n\r\nexport { StyledInput, StyledMultiInput }\r\nexport default StyledInputText"],"mappings":"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","ignoreList":[]}

package/lib/module/package/checkBox/index.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { styled } from '../styled';
 import { TouchableOpacity } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
@@ -10,24 +10,19 @@ const CheckBox = styled(TouchableOpacity, {
     height: 24,
     borderWidth: 2,
     borderRadius: 1,
+    backgroundColor: theme.colors.gray[1],
     borderColor: theme.colors.gray[700],
     justifyContent: 'center',
     alignItems: 'center',
     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]
@@ -36,6 +31,9 @@ const CheckBox = styled(TouchableOpacity, {
     checked: {
       true: {
         backgroundColor: theme.colors.gray[800]
+      },
+      false: {
+        backgroundColor: theme.colors.gray[1]
       }
     },
     checkedColor: color => {
@@ -51,25 +49,28 @@ const StyledCheckBox = ({
   onPress,
   disabled = false,
   checkedColor,
+  checked = false,
   iconProps,
   ...rest
 }) => {
-  const [checked, setChecked] = useState(false);
+  const [check, setCheck] = useState(false);
+  useEffect(() => {
+    setCheck(checked);
+  }, [checked]);
   const toggleCheckbox = () => {
-    setChecked(!checked);
-    onPress && onPress(!checked);
+    setCheck(!check);
+    onPress && onPress(!check);
   };
   return /*#__PURE__*/React.createElement(CheckBox, _extends({
     disabled: disabled,
-    checked: checked,
-    checkedColor: checked && checkedColor && checkedColor,
+    checked: check,
+    checkedColor: check && checkedColor && checkedColor,
     onPress: () => toggleCheckbox()
-  }, rest), checked && /*#__PURE__*/React.createElement(Icon, _extends({
-    name: "check"
-  }, iconProps, {
+  }, rest), check && /*#__PURE__*/React.createElement(Icon, _extends({
+    name: "check",
     color: theme.colors.gray[1],
     size: 20
-  })));
+  }, iconProps)));
 };
 export { StyledCheckBox };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useState","styled","TouchableOpacity","Icon","theme","CheckBox","base","width","height","borderWidth","borderRadius","borderColor","colors","gray","justifyContent","alignItems","flexDirection","variants","size","disabled","true","backgroundColor","checked","checkedColor","color","StyledCheckBox","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\n\r\nconst CheckBox = styled(TouchableOpacity, {\r\n  base: {\r\n    width: 24,\r\n    height: 24,\r\n    borderWidth: 2,\r\n    borderRadius: 1,\r\n    borderColor: theme.colors.gray[700],\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[800]\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 StyledCheckBox = ({\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    <CheckBox\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='check'\r\n        {...iconProps}\r\n        color={theme.colors.gray[1]}\r\n        size={20}\r\n\t\t\t\t/>}\r\n    </CheckBox>\r\n  )\r\n}\r\n\r\nexport { StyledCheckBox }\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,QAAQ,GAAGJ,MAAM,CAACC,gBAAgB,EAAE;EACxCI,IAAI,EAAE;IACJC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVC,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE,CAAC;IACfC,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;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,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,GAAG;MACxC;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,cAAc,GAAGA,CAAC;EACvBC,OAAO;EACPP,QAAQ,GAAG,KAAK;EAChBI,YAAY;EACZI,SAAS;EACT,GAAGC;AACJ,CAAC,KAAK;EACJ,MAAM,CAACN,OAAO,EAAEO,UAAU,CAAC,GAAG7B,QAAQ,CAAC,KAAK,CAAC;EAE7C,MAAM8B,cAAc,GAAGA,CAAA,KAAM;IAC3BD,UAAU,CAAC,CAACP,OAAO,CAAC;IACpBI,OAAO,IAAIA,OAAO,CAAC,CAACJ,OAAO,CAAC;EAC9B,CAAC;EAED,oBACEvB,KAAA,CAAAgC,aAAA,CAAC1B,QAAQ,EAAA2B,QAAA;IACPb,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,iBACRvB,KAAA,CAAAgC,aAAA,CAAC5B,IAAI,EAAA6B,QAAA;IACHC,IAAI,EAAC;EAAO,GACRN,SAAS;IACbH,KAAK,EAAEpB,KAAK,CAACQ,MAAM,CAACC,IAAI,CAAC,CAAC,CAAE;IAC5BK,IAAI,EAAE;EAAG,EACZ,CACS,CAAC;AAEf,CAAC;AAED,SAASO,cAAc","ignoreList":[]}
+{"version":3,"names":["React","useState","useEffect","styled","TouchableOpacity","Icon","theme","CheckBox","base","width","height","borderWidth","borderRadius","backgroundColor","colors","gray","borderColor","justifyContent","alignItems","flexDirection","variants","size","disabled","true","checked","false","checkedColor","color","StyledCheckBox","onPress","iconProps","rest","check","setCheck","toggleCheckbox","createElement","_extends","name"],"sources":["index.jsx"],"sourcesContent":["import React, { useState, useEffect } 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 CheckBox = styled(TouchableOpacity, {\r\n  base: {\r\n    width: 24,\r\n    height: 24,\r\n    borderWidth: 2,\r\n    borderRadius: 1,\r\n    backgroundColor: theme.colors.gray[1],\r\n    borderColor: theme.colors.gray[700],\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[800]\r\n      },\r\n      false: {\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 StyledCheckBox = ({\r\n  onPress,\r\n  disabled = false,\r\n  checkedColor,\r\n  checked = false,\r\n  iconProps,\r\n  ...rest\r\n}) => {\r\n  const [check, setCheck] = useState(false)\r\n\r\n  useEffect(\r\n    () => {\r\n      setCheck(checked)\r\n    },\r\n    [checked]\r\n  )\r\n\r\n  const toggleCheckbox = () => {\r\n    setCheck(!check)\r\n    onPress && onPress(!check)\r\n  }\r\n\r\n  return (\r\n    <CheckBox\r\n      disabled={disabled}\r\n      checked={check}\r\n      checkedColor={check && checkedColor && checkedColor}\r\n      onPress={() => toggleCheckbox()}\r\n      {...rest}\r\n    >\r\n      {check &&\r\n        <Icon\r\n          name='check'\r\n          color={theme.colors.gray[1]}\r\n          size={20}\r\n          {...iconProps}\r\n        />}\r\n    </CheckBox>\r\n  )\r\n}\r\n\r\nexport { StyledCheckBox }\r\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,SAAS,QAAQ,OAAO;AAClD,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,gBAAgB,QAAQ,cAAc;AAC/C,OAAOC,IAAI,MAAM,yCAAyC;AAC1D,SAASC,KAAK,QAAQ,UAAU;AAEhC,MAAMC,QAAQ,GAAGJ,MAAM,CAACC,gBAAgB,EAAE;EACxCI,IAAI,EAAE;IACJC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVC,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE,CAAC;IACfC,eAAe,EAAEP,KAAK,CAACQ,MAAM,CAACC,IAAI,CAAC,CAAC,CAAC;IACrCC,WAAW,EAAEV,KAAK,CAACQ,MAAM,CAACC,IAAI,CAAC,GAAG,CAAC;IACnCE,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE,QAAQ;IACpBC,aAAa,EAAE;EACjB,CAAC;EACDC,QAAQ,EAAE;IACRV,MAAM,EAAEW,IAAI,KAAK;MACfX,MAAM,EAAEW,IAAI,IAAI;IAClB,CAAC,CAAC;IACFZ,KAAK,EAAEY,IAAI,KAAK;MACdZ,KAAK,EAAEY,IAAI,IAAI;IACjB,CAAC,CAAC;IACFC,QAAQ,EAAE;MACRC,IAAI,EAAE;QACJV,eAAe,EAAEP,KAAK,CAACQ,MAAM,CAACC,IAAI,CAAC,GAAG;MACxC;IACF,CAAC;IACDS,OAAO,EAAE;MACPD,IAAI,EAAE;QACJV,eAAe,EAAEP,KAAK,CAACQ,MAAM,CAACC,IAAI,CAAC,GAAG;MACxC,CAAC;MACDU,KAAK,EAAE;QACLZ,eAAe,EAAEP,KAAK,CAACQ,MAAM,CAACC,IAAI,CAAC,CAAC;MACtC;IACF,CAAC;IACDW,YAAY,EAAEC,KAAK,IAAI;MACrB,IAAI,CAACA,KAAK,EAAE;MACZ,OAAO;QACLd,eAAe,EAAEc,KAAK;QACtBX,WAAW,EAAEW;MACf,CAAC;IACH;EACF;AACF,CAAC,CAAC;AAEF,MAAMC,cAAc,GAAGA,CAAC;EACtBC,OAAO;EACPP,QAAQ,GAAG,KAAK;EAChBI,YAAY;EACZF,OAAO,GAAG,KAAK;EACfM,SAAS;EACT,GAAGC;AACL,CAAC,KAAK;EACJ,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGhC,QAAQ,CAAC,KAAK,CAAC;EAEzCC,SAAS,CACP,MAAM;IACJ+B,QAAQ,CAACT,OAAO,CAAC;EACnB,CAAC,EACD,CAACA,OAAO,CACV,CAAC;EAED,MAAMU,cAAc,GAAGA,CAAA,KAAM;IAC3BD,QAAQ,CAAC,CAACD,KAAK,CAAC;IAChBH,OAAO,IAAIA,OAAO,CAAC,CAACG,KAAK,CAAC;EAC5B,CAAC;EAED,oBACEhC,KAAA,CAAAmC,aAAA,CAAC5B,QAAQ,EAAA6B,QAAA;IACPd,QAAQ,EAAEA,QAAS;IACnBE,OAAO,EAAEQ,KAAM;IACfN,YAAY,EAAEM,KAAK,IAAIN,YAAY,IAAIA,YAAa;IACpDG,OAAO,EAAEA,CAAA,KAAMK,cAAc,CAAC;EAAE,GAC5BH,IAAI,GAEPC,KAAK,iBACJhC,KAAA,CAAAmC,aAAA,CAAC9B,IAAI,EAAA+B,QAAA;IACHC,IAAI,EAAC,OAAO;IACZV,KAAK,EAAErB,KAAK,CAACQ,MAAM,CAACC,IAAI,CAAC,CAAC,CAAE;IAC5BM,IAAI,EAAE;EAAG,GACLS,SAAS,CACd,CACK,CAAC;AAEf,CAAC;AAED,SAASF,cAAc","ignoreList":[]}

package/lib/module/package/dropdown/index.js

@@ -32,16 +32,12 @@ const StyledDropdown = ({
   items,
   label,
   errorMessage,
+  error,
   labelStyles,
   ...rest
 }) => {
   const [open, setOpen] = useState(false);
-  return /*#__PURE__*/React.createElement(YStack, {
-    justifyContent: "flex-start",
-    alignItems: "flex-start"
-  }, label && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledSpacer, {
-    marginVertical: 4
-  }), /*#__PURE__*/React.createElement(StyledText, _extends({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledText, _extends({
     paddingHorizontal: 8,
     color: theme.colors.gray[600],
     fontSize: theme.fontSize.normal,
@@ -52,7 +48,7 @@ const StyledDropdown = ({
     open: open,
     setOpen: setOpen,
     items: items
-  }, rest)), errorMessage && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledSpacer, {
+  }, rest)), error && errorMessage && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledSpacer, {
     marginVertical: 1
   }), /*#__PURE__*/React.createElement(StyledText, {
     marginHorizontal: 16,

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

@@ -1 +1 @@
-{"version":3,"names":["React","useState","useEffect","YStack","StyledText","StyledSpacer","DropDownPicker","theme","styled","Dropdown","base","borderColor","colors","gray","borderWidth","borderRadius","backgroundColor","width","color","paddingHorizontal","variants","error","true","pink","false","StyledDropdown","items","label","errorMessage","labelStyles","rest","open","setOpen","createElement","justifyContent","alignItems","Fragment","marginVertical","_extends","fontSize","normal","fontWeight","marginHorizontal","bold","small","StyledMultiDropdown","onSelected","selected","setSelected","setValue","value","multiple"],"sources":["index.jsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\r\nimport { YStack } from '../stack';\r\nimport { StyledText } from '../text';\r\nimport { StyledSpacer } from '../spacer';\r\nimport DropDownPicker from \"react-native-dropdown-picker\";\r\nimport { theme } from \"../theme\";\r\nimport { styled } from \"../styled\";\r\n\r\nconst Dropdown = styled(DropDownPicker, {\r\n    base: {\r\n        borderColor: theme.colors.gray[800],\r\n        borderWidth: 1,\r\n        borderRadius: 30,\r\n        backgroundColor: theme.colors.gray[1],\r\n        width: '100%',\r\n        color: theme.colors.gray[800],\r\n        paddingHorizontal: 16,\r\n    },\r\n    variants: {\r\n        error: {\r\n            true: {\r\n                borderColor: theme.colors.pink[500],\r\n                borderWidth: 1,\r\n            },\r\n            false: {\r\n                borderColor: theme.colors.gray[800],\r\n            }\r\n        },\r\n    }\r\n})\r\n\r\nconst StyledDropdown = ({ items, label, errorMessage, labelStyles, ...rest }) => {\r\n    const [open, setOpen] = useState(false)\r\n    return (\r\n        <YStack justifyContent='flex-start' alignItems='flex-start'>\r\n            {\r\n                label && (\r\n                    <>\r\n                        <StyledSpacer marginVertical={4} />\r\n                        <StyledText paddingHorizontal={8} color={theme.colors.gray[600]} fontSize={theme.fontSize.normal} fontWeight={theme.fontWeight.normal} {...labelStyles}>\r\n                            {label}\r\n                        </StyledText>\r\n                        <StyledSpacer marginVertical={4} />\r\n                    </>\r\n\r\n                )\r\n            }\r\n            <Dropdown open={open} setOpen={setOpen} items={items} {...rest} />\r\n            {\r\n                errorMessage && (\r\n                    <>\r\n                        <StyledSpacer marginVertical={1} />\r\n                        <StyledText marginHorizontal={16} fontWeight={theme.fontWeight.bold} fontSize={theme.fontSize.small} color={theme.colors.pink[500]}>\r\n                            {errorMessage}\r\n                        </StyledText>\r\n                    </>\r\n                )\r\n            }\r\n\r\n        </YStack>\r\n    )\r\n}\r\n\r\nconst StyledMultiDropdown = ({ items, label, errorMessage, labelStyles, onSelected, ...rest }) => {\r\n    const [selected, setSelected] = useState([])\r\n    const [open, setOpen] = useState(false)\r\n\r\n    useEffect(() => {\r\n        onSelected && onSelected(selected)\r\n    }, [selected])\r\n\r\n    return (\r\n        <YStack justifyContent='flex-start' alignItems='flex-start'>\r\n            {\r\n                label && (\r\n                    <>\r\n                        <StyledSpacer marginVertical={4} />\r\n                        <StyledText paddingHorizontal={8} color={theme.colors.gray[600]} fontSize={theme.fontSize.normal} fontWeight={theme.fontWeight.normal} {...labelStyles}>\r\n                            {label}\r\n                        </StyledText>\r\n                        <StyledSpacer marginVertical={4} />\r\n                    </>\r\n\r\n                )\r\n            }\r\n            <Dropdown open={open} setOpen={setOpen} items={items} setValue={setSelected} value={selected} multiple {...rest} />\r\n            {\r\n                errorMessage && (\r\n                    <>\r\n                        <StyledSpacer marginVertical={1} />\r\n                        <StyledText marginHorizontal={16} fontWeight={theme.fontWeight.bold} fontSize={theme.fontSize.small} color={theme.colors.pink[500]}>\r\n                            {errorMessage}\r\n                        </StyledText>\r\n                    </>\r\n                )\r\n            }\r\n\r\n        </YStack>\r\n    )\r\n}\r\n\r\nexport { StyledDropdown, StyledMultiDropdown }"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useState","useEffect","YStack","StyledText","StyledSpacer","DropDownPicker","theme","styled","Dropdown","base","borderColor","colors","gray","borderWidth","borderRadius","backgroundColor","width","color","paddingHorizontal","variants","error","true","pink","false","StyledDropdown","items","label","errorMessage","labelStyles","rest","open","setOpen","createElement","Fragment","_extends","fontSize","normal","fontWeight","marginVertical","marginHorizontal","bold","small","StyledMultiDropdown","onSelected","selected","setSelected","justifyContent","alignItems","setValue","value","multiple"],"sources":["index.jsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\r\nimport { YStack } from '../stack';\r\nimport { StyledText } from '../text';\r\nimport { StyledSpacer } from '../spacer';\r\nimport DropDownPicker from \"react-native-dropdown-picker\";\r\nimport { theme } from \"../theme\";\r\nimport { styled } from \"../styled\";\r\n\r\nconst Dropdown = styled(DropDownPicker, {\r\n    base: {\r\n        borderColor: theme.colors.gray[800],\r\n        borderWidth: 1,\r\n        borderRadius: 30,\r\n        backgroundColor: theme.colors.gray[1],\r\n        width: '100%',\r\n        color: theme.colors.gray[800],\r\n        paddingHorizontal: 16,\r\n    },\r\n    variants: {\r\n        error: {\r\n            true: {\r\n                borderColor: theme.colors.pink[500],\r\n                borderWidth: 1,\r\n            },\r\n            false: {\r\n                borderColor: theme.colors.gray[800],\r\n            }\r\n        },\r\n    }\r\n})\r\n\r\nconst StyledDropdown = ({ items, label, errorMessage, error, labelStyles, ...rest }) => {\r\n    const [open, setOpen] = useState(false)\r\n    return (\r\n        <>\r\n            {\r\n                label && (\r\n                    <>                       \r\n                        <StyledText paddingHorizontal={8} color={theme.colors.gray[600]} fontSize={theme.fontSize.normal} fontWeight={theme.fontWeight.normal} {...labelStyles}>\r\n                            {label}\r\n                        </StyledText>\r\n                        <StyledSpacer marginVertical={4} />\r\n                    </>\r\n\r\n                )\r\n            }\r\n            <Dropdown open={open} setOpen={setOpen} items={items} {...rest} />\r\n            {\r\n                (error && errorMessage)  && (\r\n                    <>\r\n                        <StyledSpacer marginVertical={1} />\r\n                        <StyledText marginHorizontal={16} fontWeight={theme.fontWeight.bold} fontSize={theme.fontSize.small} color={theme.colors.pink[500]}>\r\n                            {errorMessage}\r\n                        </StyledText>\r\n                    </>\r\n                )\r\n            }\r\n\r\n        </>\r\n    )\r\n}\r\n\r\nconst StyledMultiDropdown = ({ items, label, errorMessage, labelStyles, onSelected, ...rest }) => {\r\n    const [selected, setSelected] = useState([])\r\n    const [open, setOpen] = useState(false)\r\n\r\n    useEffect(() => {\r\n        onSelected && onSelected(selected)\r\n    }, [selected])\r\n\r\n    return (\r\n        <YStack justifyContent='flex-start' alignItems='flex-start'>\r\n            {\r\n                label && (\r\n                    <>\r\n                        <StyledSpacer marginVertical={4} />\r\n                        <StyledText paddingHorizontal={8} color={theme.colors.gray[600]} fontSize={theme.fontSize.normal} fontWeight={theme.fontWeight.normal} {...labelStyles}>\r\n                            {label}\r\n                        </StyledText>\r\n                        <StyledSpacer marginVertical={4} />\r\n                    </>\r\n\r\n                )\r\n            }\r\n            <Dropdown open={open} setOpen={setOpen} items={items} setValue={setSelected} value={selected} multiple {...rest} />\r\n            {\r\n                errorMessage && (\r\n                    <>\r\n                        <StyledSpacer marginVertical={1} />\r\n                        <StyledText marginHorizontal={16} fontWeight={theme.fontWeight.bold} fontSize={theme.fontSize.small} color={theme.colors.pink[500]}>\r\n                            {errorMessage}\r\n                        </StyledText>\r\n                    </>\r\n                )\r\n            }\r\n\r\n        </YStack>\r\n    )\r\n}\r\n\r\nexport { StyledDropdown, StyledMultiDropdown }"],"mappings":"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","ignoreList":[]}

package/lib/module/package/form/index.js

@@ -101,7 +101,7 @@ const StyledInputText = styled(TextInput, {
 });
 const StyledInput = /*#__PURE__*/forwardRef(({
   label,
-  flex = 0,
+  flex = 1,
   borderColor,
   errorMessage,
   error,
@@ -110,7 +110,7 @@ const StyledInput = /*#__PURE__*/forwardRef(({
   ...rest
 }, ref) => {
   return /*#__PURE__*/React.createElement(YStack, {
-    width: '100%'
+    flex: flex
   }, label && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledText, _extends({
     paddingHorizontal: 8,
     color: theme.colors.gray[800],

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

@@ -1 +1 @@
-{"version":3,"names":["React","forwardRef","TextInput","YStack","StyledText","StyledSpacer","theme","styled","isValidColor","isValidNumber","isValidString","StyledInputText","base","borderColor","colors","gray","borderWidth","borderRadius","backgroundColor","fontWeight","normal","width","color","paddingHorizontal","paddingVertical","fontSize","placeholderTextColor","variants","size","Error","fontFamily","font","textAlign","align","validAlignments","includes","value","noBorder","true","StyledInput","label","flex","errorMessage","error","errorProps","labelProps","rest","ref","createElement","Fragment","_extends","marginVertical","pink","marginHorizontal","bold","small","StyledMultiInput","justifyContent","alignItems","textAlignVertical","multiline","numberOfLines","inputMode"],"sources":["index.jsx"],"sourcesContent":["import React, { forwardRef } from 'react';\r\nimport { TextInput } from 'react-native';\r\nimport { YStack } from '../stack';\r\nimport { StyledText } from '../text';\r\nimport { StyledSpacer } from '../spacer';\r\nimport { theme } from '../theme';\r\nimport { styled } from '../styled';\r\nimport { isValidColor, isValidNumber, isValidString } from '../utils';\r\n\r\nconst StyledInputText = styled(TextInput, {\r\n    base: {\r\n        borderColor: theme.colors.gray[800],\r\n        borderWidth: 1,\r\n        borderRadius: 30,\r\n        backgroundColor: theme.fontWeight.normal[1],\r\n        width: '100%',\r\n        color: theme.colors.gray[800],\r\n        paddingHorizontal: 16,\r\n        paddingVertical: 8,\r\n        fontSize: theme.fontSize.normal,\r\n        placeholderTextColor: theme.colors.gray[1],\r\n    },\r\n    variants : {\r\n    fontWeight: (size = theme.fontWeight.normal) => {\r\n        if (!isValidString(size)) {\r\n            throw new Error('Invalid fontWeight value');\r\n        }\r\n        return { fontWeight: size };\r\n    },\r\n    color: (color = theme.colors.gray[800]) => {\r\n        if (!isValidColor(color)) {\r\n            throw new Error('Invalid color value');\r\n        }\r\n        return { color: color };\r\n    },\r\n    fontSize: (size = theme.fontSize.normal) => {\r\n        if (!isValidNumber(size)) {\r\n            throw new Error('Invalid fontSize value');\r\n        }\r\n        return { fontSize: size };\r\n    },\r\n    fontFamily: font => {\r\n      if (!font) return\r\n      return {\r\n        fontFamily: font\r\n      }\r\n    },\r\n    textAlign: (align = 'left') => {\r\n        const validAlignments = ['auto', 'left', 'right', 'center', 'justify'];\r\n        if (!validAlignments.includes(align)) {\r\n            throw new Error('Invalid textAlign value');\r\n        }\r\n        return { textAlign: align };\r\n    },\r\n    borderRadius: (value = 16) => {\r\n        if (!isValidNumber(value)) {\r\n            throw new Error('Invalid borderRadius value');\r\n        }\r\n        return { borderRadius: value };\r\n    },\r\n    borderColor: (value  = theme.colors.gray[100]) => {\r\n        if (!isValidColor(value)) {\r\n            throw new Error('Invalid borderColor value');\r\n        }\r\n        return { borderColor: value };\r\n    },\r\n    backgroundColor: (value = theme.colors.gray[1]) => {\r\n        if (!isValidColor(value)) {\r\n            throw new Error('Invalid backgroundColor value');\r\n        }\r\n        return { backgroundColor: value };\r\n    },\r\n    noBorder: {\r\n        true: { borderWidth: 0 }\r\n    },\r\n    placeholderTextColor: (value = theme.colors.gray[800]) => {\r\n        if (!isValidColor(value)) {\r\n            throw new Error('Invalid placeholderTextColor value');\r\n        }\r\n        return { placeholderTextColor: value };\r\n    },\r\n}\r\n});\r\n\r\nconst StyledInput = forwardRef(({ label, flex = 0, borderColor, errorMessage, error, errorProps, labelProps, ...rest }, ref) => {\r\n    return (\r\n        <YStack width={'100%'}>\r\n            {\r\n                label && (\r\n                    <>\r\n                        <StyledText paddingHorizontal={8} color={theme.colors.gray[800]} fontSize={theme.fontSize.normal} fontWeight={theme.fontWeight.normal} {...labelProps}>\r\n                            {label}\r\n                        </StyledText>\r\n                        <StyledSpacer marginVertical={4} />\r\n                    </>\r\n                )\r\n            }\r\n            <StyledInputText placeholderTextColor={theme.colors.gray[400]} ref={ref} {...rest} borderColor={error ? theme.colors.pink[500] : borderColor} />\r\n            {\r\n                errorMessage && (\r\n                    <>\r\n                        <StyledSpacer marginVertical={1} />\r\n                        <StyledText marginHorizontal={8} fontWeight={theme.fontWeight.bold} fontSize={theme.fontSize.small} color={theme.colors.pink[500]} {...errorProps}>\r\n                            {errorMessage}\r\n                        </StyledText>\r\n                    </>\r\n                )\r\n            }\r\n        </YStack>\r\n    )\r\n})\r\n\r\nconst StyledMultiInput = ({ label, errorMessage, borderColor, error, errorProps, labelProps, ...rest }) => {\r\n    return (\r\n        <YStack width={'100%'} justifyContent='flex-start' alignItems='flex-start'>\r\n            {\r\n                label && (\r\n                    <>\r\n                        <StyledSpacer marginVertical={4} />\r\n                        <StyledText paddingHorizontal={8} color={theme.colors.gray[800]} fontSize={theme.fontSize.normal} fontWeight={theme.fontWeight.normal} {...labelProps}>\r\n                            {label}\r\n                        </StyledText>\r\n                        <StyledSpacer marginVertical={4} />\r\n                    </>\r\n\r\n                )\r\n            }\r\n            <StyledInputText borderRadius={16} textAlignVertical='top' multiline numberOfLines={5} inputMode='text' {...rest} borderColor={error ? theme.colors.pink[500] : borderColor} />\r\n            {\r\n                errorMessage && (\r\n                    <>\r\n                        <StyledSpacer marginVertical={1} />\r\n                        <StyledText marginHorizontal={8} fontWeight={theme.fontWeight.bold} fontSize={theme.fontSize.small} color={theme.colors.pink[500]} {...errorProps}>\r\n                            {errorMessage}\r\n                        </StyledText>\r\n                    </>\r\n                )\r\n            }\r\n\r\n        </YStack>\r\n    )\r\n}\r\n\r\nexport { StyledInput, StyledMultiInput }\r\nexport default StyledInputText"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","forwardRef","TextInput","YStack","StyledText","StyledSpacer","theme","styled","isValidColor","isValidNumber","isValidString","StyledInputText","base","borderColor","colors","gray","borderWidth","borderRadius","backgroundColor","fontWeight","normal","width","color","paddingHorizontal","paddingVertical","fontSize","placeholderTextColor","variants","size","Error","fontFamily","font","textAlign","align","validAlignments","includes","value","noBorder","true","StyledInput","label","flex","errorMessage","error","errorProps","labelProps","rest","ref","createElement","Fragment","_extends","marginVertical","pink","marginHorizontal","bold","small","StyledMultiInput","justifyContent","alignItems","textAlignVertical","multiline","numberOfLines","inputMode"],"sources":["index.jsx"],"sourcesContent":["import React, { forwardRef } from 'react';\r\nimport { TextInput } from 'react-native';\r\nimport { YStack } from '../stack';\r\nimport { StyledText } from '../text';\r\nimport { StyledSpacer } from '../spacer';\r\nimport { theme } from '../theme';\r\nimport { styled } from '../styled';\r\nimport { isValidColor, isValidNumber, isValidString } from '../utils';\r\n\r\nconst StyledInputText = styled(TextInput, {\r\n    base: {\r\n        borderColor: theme.colors.gray[800],\r\n        borderWidth: 1,\r\n        borderRadius: 30,\r\n        backgroundColor: theme.fontWeight.normal[1],\r\n        width: '100%',\r\n        color: theme.colors.gray[800],\r\n        paddingHorizontal: 16,\r\n        paddingVertical: 8,\r\n        fontSize: theme.fontSize.normal,\r\n        placeholderTextColor: theme.colors.gray[1],\r\n    },\r\n    variants: {\r\n        fontWeight: (size = theme.fontWeight.normal) => {\r\n            if (!isValidString(size)) {\r\n                throw new Error('Invalid fontWeight value');\r\n            }\r\n            return { fontWeight: size };\r\n        },\r\n        color: (color = theme.colors.gray[800]) => {\r\n            if (!isValidColor(color)) {\r\n                throw new Error('Invalid color value');\r\n            }\r\n            return { color: color };\r\n        },\r\n        fontSize: (size = theme.fontSize.normal) => {\r\n            if (!isValidNumber(size)) {\r\n                throw new Error('Invalid fontSize value');\r\n            }\r\n            return { fontSize: size };\r\n        },\r\n        fontFamily: font => {\r\n            if (!font) return\r\n            return {\r\n                fontFamily: font\r\n            }\r\n        },\r\n        textAlign: (align = 'left') => {\r\n            const validAlignments = ['auto', 'left', 'right', 'center', 'justify'];\r\n            if (!validAlignments.includes(align)) {\r\n                throw new Error('Invalid textAlign value');\r\n            }\r\n            return { textAlign: align };\r\n        },\r\n        borderRadius: (value = 16) => {\r\n            if (!isValidNumber(value)) {\r\n                throw new Error('Invalid borderRadius value');\r\n            }\r\n            return { borderRadius: value };\r\n        },\r\n        borderColor: (value = theme.colors.gray[100]) => {\r\n            if (!isValidColor(value)) {\r\n                throw new Error('Invalid borderColor value');\r\n            }\r\n            return { borderColor: value };\r\n        },\r\n        backgroundColor: (value = theme.colors.gray[1]) => {\r\n            if (!isValidColor(value)) {\r\n                throw new Error('Invalid backgroundColor value');\r\n            }\r\n            return { backgroundColor: value };\r\n        },\r\n        noBorder: {\r\n            true: { borderWidth: 0 }\r\n        },\r\n        placeholderTextColor: (value = theme.colors.gray[800]) => {\r\n            if (!isValidColor(value)) {\r\n                throw new Error('Invalid placeholderTextColor value');\r\n            }\r\n            return { placeholderTextColor: value };\r\n        }       \r\n    }\r\n});\r\n\r\nconst StyledInput = forwardRef(({ label, flex = 1, borderColor, errorMessage, error, errorProps, labelProps, ...rest }, ref) => {\r\n    return (\r\n        <YStack flex={flex}>\r\n            {\r\n                label && (\r\n                    <>\r\n                        <StyledText paddingHorizontal={8} color={theme.colors.gray[800]} fontSize={theme.fontSize.normal} fontWeight={theme.fontWeight.normal} {...labelProps}>\r\n                            {label}\r\n                        </StyledText>\r\n                        <StyledSpacer marginVertical={4} />\r\n                    </>\r\n                )\r\n            }\r\n            <StyledInputText placeholderTextColor={theme.colors.gray[400]} ref={ref} {...rest} borderColor={error ? theme.colors.pink[500] : borderColor} />\r\n            {\r\n                errorMessage && (\r\n                    <>\r\n                        <StyledSpacer marginVertical={1} />\r\n                        <StyledText marginHorizontal={8} fontWeight={theme.fontWeight.bold} fontSize={theme.fontSize.small} color={theme.colors.pink[500]} {...errorProps}>\r\n                            {errorMessage}\r\n                        </StyledText>\r\n                    </>\r\n                )\r\n            }\r\n        </YStack>\r\n    )\r\n})\r\n\r\nconst StyledMultiInput = ({ label, errorMessage, borderColor, error, errorProps, labelProps, ...rest }) => {\r\n    return (\r\n        <YStack width={'100%'} justifyContent='flex-start' alignItems='flex-start'>\r\n            {\r\n                label && (\r\n                    <>\r\n                        <StyledSpacer marginVertical={4} />\r\n                        <StyledText paddingHorizontal={8} color={theme.colors.gray[800]} fontSize={theme.fontSize.normal} fontWeight={theme.fontWeight.normal} {...labelProps}>\r\n                            {label}\r\n                        </StyledText>\r\n                        <StyledSpacer marginVertical={4} />\r\n                    </>\r\n\r\n                )\r\n            }\r\n            <StyledInputText borderRadius={16} textAlignVertical='top' multiline numberOfLines={5} inputMode='text' {...rest} borderColor={error ? theme.colors.pink[500] : borderColor} />\r\n            {\r\n                errorMessage && (\r\n                    <>\r\n                        <StyledSpacer marginVertical={1} />\r\n                        <StyledText marginHorizontal={8} fontWeight={theme.fontWeight.bold} fontSize={theme.fontSize.small} color={theme.colors.pink[500]} {...errorProps}>\r\n                            {errorMessage}\r\n                        </StyledText>\r\n                    </>\r\n                )\r\n            }\r\n\r\n        </YStack>\r\n    )\r\n}\r\n\r\nexport { StyledInput, StyledMultiInput }\r\nexport default StyledInputText"],"mappings":"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","ignoreList":[]}

package/package.json

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

package/src/package/checkBox/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { styled } from '../styled'
 import { TouchableOpacity } from 'react-native'
 import Icon from 'react-native-vector-icons/MaterialIcons'
@@ -10,20 +10,19 @@ const CheckBox = styled(TouchableOpacity, {
     height: 24,
     borderWidth: 2,
     borderRadius: 1,
+    backgroundColor: theme.colors.gray[1],
     borderColor: theme.colors.gray[700],
     justifyContent: 'center',
     alignItems: 'center',
     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]
@@ -32,6 +31,9 @@ const CheckBox = styled(TouchableOpacity, {
     checked: {
       true: {
         backgroundColor: theme.colors.gray[800]
+      },
+      false: {
+        backgroundColor: theme.colors.gray[1]
       }
     },
     checkedColor: color => {
@@ -45,34 +47,42 @@ const CheckBox = styled(TouchableOpacity, {
 })
 
 const StyledCheckBox = ({
-	onPress,
-	disabled = false,
-	checkedColor,
-	iconProps,
-	...rest
+  onPress,
+  disabled = false,
+  checkedColor,
+  checked = false,
+  iconProps,
+  ...rest
 }) => {
-  const [checked, setChecked] = useState(false)
+  const [check, setCheck] = useState(false)
+
+  useEffect(
+    () => {
+      setCheck(checked)
+    },
+    [checked]
+  )
 
   const toggleCheckbox = () => {
-    setChecked(!checked)
-    onPress && onPress(!checked)
+    setCheck(!check)
+    onPress && onPress(!check)
   }
 
   return (
     <CheckBox
       disabled={disabled}
-      checked={checked}
-      checkedColor={checked && checkedColor && checkedColor}
+      checked={check}
+      checkedColor={check && checkedColor && checkedColor}
       onPress={() => toggleCheckbox()}
       {...rest}
-		>
-      {checked &&
-      <Icon
-        name='check'
-        {...iconProps}
-        color={theme.colors.gray[1]}
-        size={20}
-				/>}
+    >
+      {check &&
+        <Icon
+          name='check'
+          color={theme.colors.gray[1]}
+          size={20}
+          {...iconProps}
+        />}
     </CheckBox>
   )
 }

package/src/package/dropdown/index.jsx

@@ -29,14 +29,13 @@ const Dropdown = styled(DropDownPicker, {
     }
 })
 
-const StyledDropdown = ({ items, label, errorMessage, labelStyles, ...rest }) => {
+const StyledDropdown = ({ items, label, errorMessage, error, labelStyles, ...rest }) => {
     const [open, setOpen] = useState(false)
     return (
-        <YStack justifyContent='flex-start' alignItems='flex-start'>
+        <>
             {
                 label && (
-                    <>
-                        <StyledSpacer marginVertical={4} />
+                    <>                       
                         <StyledText paddingHorizontal={8} color={theme.colors.gray[600]} fontSize={theme.fontSize.normal} fontWeight={theme.fontWeight.normal} {...labelStyles}>
                             {label}
                         </StyledText>
@@ -47,7 +46,7 @@ const StyledDropdown = ({ items, label, errorMessage, labelStyles, ...rest }) =>
             }
             <Dropdown open={open} setOpen={setOpen} items={items} {...rest} />
             {
-                errorMessage && (
+                (error && errorMessage)  && (
                     <>
                         <StyledSpacer marginVertical={1} />
                         <StyledText marginHorizontal={16} fontWeight={theme.fontWeight.bold} fontSize={theme.fontSize.small} color={theme.colors.pink[500]}>
@@ -57,7 +56,7 @@ const StyledDropdown = ({ items, label, errorMessage, labelStyles, ...rest }) =>
                 )
             }
 
-        </YStack>
+        </>
     )
 }
 

package/src/package/form/index.jsx

@@ -20,71 +20,71 @@ const StyledInputText = styled(TextInput, {
         fontSize: theme.fontSize.normal,
         placeholderTextColor: theme.colors.gray[1],
     },
-    variants : {
-    fontWeight: (size = theme.fontWeight.normal) => {
-        if (!isValidString(size)) {
-            throw new Error('Invalid fontWeight value');
-        }
-        return { fontWeight: size };
-    },
-    color: (color = theme.colors.gray[800]) => {
-        if (!isValidColor(color)) {
-            throw new Error('Invalid color value');
-        }
-        return { color: color };
-    },
-    fontSize: (size = theme.fontSize.normal) => {
-        if (!isValidNumber(size)) {
-            throw new Error('Invalid fontSize value');
-        }
-        return { fontSize: size };
-    },
-    fontFamily: font => {
-      if (!font) return
-      return {
-        fontFamily: font
-      }
-    },
-    textAlign: (align = 'left') => {
-        const validAlignments = ['auto', 'left', 'right', 'center', 'justify'];
-        if (!validAlignments.includes(align)) {
-            throw new Error('Invalid textAlign value');
-        }
-        return { textAlign: align };
-    },
-    borderRadius: (value = 16) => {
-        if (!isValidNumber(value)) {
-            throw new Error('Invalid borderRadius value');
-        }
-        return { borderRadius: value };
-    },
-    borderColor: (value  = theme.colors.gray[100]) => {
-        if (!isValidColor(value)) {
-            throw new Error('Invalid borderColor value');
-        }
-        return { borderColor: value };
-    },
-    backgroundColor: (value = theme.colors.gray[1]) => {
-        if (!isValidColor(value)) {
-            throw new Error('Invalid backgroundColor value');
-        }
-        return { backgroundColor: value };
-    },
-    noBorder: {
-        true: { borderWidth: 0 }
-    },
-    placeholderTextColor: (value = theme.colors.gray[800]) => {
-        if (!isValidColor(value)) {
-            throw new Error('Invalid placeholderTextColor value');
-        }
-        return { placeholderTextColor: value };
-    },
-}
+    variants: {
+        fontWeight: (size = theme.fontWeight.normal) => {
+            if (!isValidString(size)) {
+                throw new Error('Invalid fontWeight value');
+            }
+            return { fontWeight: size };
+        },
+        color: (color = theme.colors.gray[800]) => {
+            if (!isValidColor(color)) {
+                throw new Error('Invalid color value');
+            }
+            return { color: color };
+        },
+        fontSize: (size = theme.fontSize.normal) => {
+            if (!isValidNumber(size)) {
+                throw new Error('Invalid fontSize value');
+            }
+            return { fontSize: size };
+        },
+        fontFamily: font => {
+            if (!font) return
+            return {
+                fontFamily: font
+            }
+        },
+        textAlign: (align = 'left') => {
+            const validAlignments = ['auto', 'left', 'right', 'center', 'justify'];
+            if (!validAlignments.includes(align)) {
+                throw new Error('Invalid textAlign value');
+            }
+            return { textAlign: align };
+        },
+        borderRadius: (value = 16) => {
+            if (!isValidNumber(value)) {
+                throw new Error('Invalid borderRadius value');
+            }
+            return { borderRadius: value };
+        },
+        borderColor: (value = theme.colors.gray[100]) => {
+            if (!isValidColor(value)) {
+                throw new Error('Invalid borderColor value');
+            }
+            return { borderColor: value };
+        },
+        backgroundColor: (value = theme.colors.gray[1]) => {
+            if (!isValidColor(value)) {
+                throw new Error('Invalid backgroundColor value');
+            }
+            return { backgroundColor: value };
+        },
+        noBorder: {
+            true: { borderWidth: 0 }
+        },
+        placeholderTextColor: (value = theme.colors.gray[800]) => {
+            if (!isValidColor(value)) {
+                throw new Error('Invalid placeholderTextColor value');
+            }
+            return { placeholderTextColor: value };
+        }       
+    }
 });
 
-const StyledInput = forwardRef(({ label, flex = 0, borderColor, errorMessage, error, errorProps, labelProps, ...rest }, ref) => {
+const StyledInput = forwardRef(({ label, flex = 1, borderColor, errorMessage, error, errorProps, labelProps, ...rest }, ref) => {
     return (
-        <YStack width={'100%'}>
+        <YStack flex={flex}>
             {
                 label && (
                     <>