@mirai/ui 1.0.9 → 1.0.10

package/README.md

@@ -81,6 +81,34 @@ const MyComponent = () => (
 );
 ```
 
+### Layer
+
+This primitive returns an element that displays with relative position to other element based on the following props:
+
+- `children:node` two children elements are accepted, the first one is the element to be displayed and the second one is the LayerContent that wraps the element to be displayed if the visible prop is true
+- `visible:boolean` showing or hiding the layer
+
+The position of the layer is based on the position of the element to be displayed. If the layer can show on right or left because have a gap in this direction, the layer will be shown on the right or left of the element to be displayed. If the layer can open on top or bottom because have a gap in this direction, the layer will be shown on the top or bottom of the element to be displayed
+
+```js
+import { Button, Calendar, Layer, LayerContent } from '@mirai/ui';
+
+const MyComponent = () => {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <Layer visible={visible}>
+      <Button style={{ position: 'absolute', left: '500px', top: '100px' }} onPress={() => setVisible(!visible)}>
+        {visible ? 'close' : 'open'}
+      </Button>
+      <LayerContent>
+        <Calendar months={2} range />
+      </LayerContent>
+    </Layer>
+  );
+};
+```
+
 ### Pressable
 
 This primitive returns pressable elements based on the following properties:
@@ -162,7 +190,6 @@ A primitive for displaying text. It receives the following props:
 - `bold:boolean` modifying font-weight
 - `children:string`
 - `headline:boolean` modifying font-size
-- `lighten:boolean` modifying text color
 - `upperCase:boolean` switching text to upper case
 - `small:boolean` modifying font-size
 - `tag:string` html tag of resulting element

package/build/components/Button/Button.module.css

@@ -1,22 +1,27 @@
 :root {
-  --mirai-ui-button-color: var(--mirai-ui-accent);
+  --mirai-ui-button-background: var(--mirai-ui-accent);
+  --mirai-ui-button-color: var(--mirai-ui-base);
   --mirai-ui-button-color-active: rgba(255, 255, 255, 0.2);
   --mirai-ui-button-color-focus: var(--mirai-ui-content);
-  --mirai-ui-button-color-text: var(--mirai-ui-base);
+  --mirai-ui-button-disabled-background: var(--mirai-ui-content-300);
+  --mirai-ui-button-disabled-color: var(--mirai-ui-content-400);
+  --mirai-ui-button-outlined-background: var(--mirai-ui-base);
+  --mirai-ui-button-padding-x: var(--mirai-ui-space-S);
+  --mirai-ui-button-padding-y: var(--mirai-ui-space-L);
   --mirai-ui-button-radius: var(--mirai-ui-border-radius);
 }
 
 .button {
   align-items: center;
-  background-color: var(--mirai-ui-button-color);
+  background-color: var(--mirai-ui-button-background);
   border-radius: var(--mirai-ui-button-radius);
-  color: var(--mirai-ui-button-color-text);
+  color: var(--mirai-ui-button-color);
   display: flex;
   font-family: var(--mirai-ui-font);
   font-size: var(--mirai-ui-font-size-action);
   font-weight: var(--mirai-ui-font-bold-weight);
   justify-content: center;
-  padding: var(--mirai-ui-space-S) var(--mirai-ui-space-L);
+  padding: var(--mirai-ui-button-padding-x) var(--mirai-ui-button-padding-y);
   transition: background-color var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
     box-shadow var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
     color var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
@@ -24,28 +29,27 @@
 }
 
 .button:disabled {
-  background-color: var(--mirai-ui-disabled);
-  color: var(--mirai-ui-lighten);
+  background-color: var(--mirai-ui-button-disabled-background);
+  color: var(--mirai-ui-button-disabled-color);
 }
 
 .outlined {
-  border: solid 1px var(--mirai-ui-button-color);
-  background-color: var(--mirai-ui-base);
-  color: var(--mirai-ui-button-color);
+  border: solid 1px var(--mirai-ui-button-background);
+  background-color: var(--mirai-ui-button-outlined-background);
+  color: var(--mirai-ui-button-background);
 }
 
 .button:not(:disabled):active {
-  box-shadow: inset 0 0 var(--mirai-ui-space-XXL) var(--mirai-ui-space-XXL) var(--mirai-ui-button-color-active);
+  box-shadow: inset 0 0 var(--mirai-ui-space-XL) var(--mirai-ui-space-XL) var(--mirai-ui-button-color-active);
 }
 
 .large:not(.squared) {
   font-size: var(--mirai-ui-font-size-headline);
-  padding: var(--mirai-ui-space-M) var(--mirai-ui-space-XL);
 }
 
 .small:not(.squared) {
   font-size: var(--mirai-ui-font-size-small);
-  padding: var(--mirai-ui-space-XS) var(--mirai-ui-space-S);
+  padding: calc(var(--mirai-ui-button-padding-x) / 2) calc(var(--mirai-ui-button-padding-y) / 2);
 }
 
 .rounded {
@@ -55,16 +59,19 @@
 .squared {
   padding: 0;
   height: var(--mirai-ui-space-XL);
+  min-width: var(--mirai-ui-space-XL);
   width: var(--mirai-ui-space-XL);
 }
 
 .squared.small {
   height: var(--mirai-ui-space-L);
+  min-width: var(--mirai-ui-space-L);
   width: var(--mirai-ui-space-L);
 }
 
 .squared.large {
   height: var(--mirai-ui-space-XXL);
+  min-width: var(--mirai-ui-space-XXL);
   width: var(--mirai-ui-space-XXL);
 }
 

package/build/components/InputNumber/InputNumber.js

@@ -19,10 +19,11 @@ var _Button = require("../Button");
 
 var _InputNumberModule = _interopRequireDefault(require("./InputNumber.module.css"));
 
-var _excluded = ["hint", "label", "max", "min", "name", "step", "value", "onChange"];
+var _excluded = ["disabled", "hint", "label", "max", "min", "name", "step", "value", "onChange"];
 
 var InputNumber = function InputNumber(_ref) {
-  var hint = _ref.hint,
+  var disabled = _ref.disabled,
+      hint = _ref.hint,
       label = _ref.label,
       max = _ref.max,
       _ref$min = _ref.min,
@@ -40,12 +41,13 @@ var InputNumber = function InputNumber(_ref) {
     className: (0, _helpers.styles)(_InputNumberModule.default.inputNumber, others.className)
   }), /*#__PURE__*/_react.default.createElement(_primitives.View, {
     className: _InputNumberModule.default.texts
-  }, label && /*#__PURE__*/_react.default.createElement(_primitives.Text, null, label), hint && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
-    lighten: true,
+  }, label && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    className: disabled && _InputNumberModule.default.disabled
+  }, label), hint && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
     small: true,
-    className: _InputNumberModule.default.hint
+    className: (0, _helpers.styles)(_InputNumberModule.default.hint, disabled && _InputNumberModule.default.disabled)
   }, hint)), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    disabled: value <= min,
+    disabled: disabled || value <= min,
     outlined: true,
     squared: true,
     onPress: function onPress() {
@@ -55,8 +57,8 @@ var InputNumber = function InputNumber(_ref) {
     name: "Minus"
   })), /*#__PURE__*/_react.default.createElement(_primitives.Text, {
     className: _InputNumberModule.default.value
-  }, value), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    disabled: value >= max,
+  }, typeof value === 'number' ? value : min), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    disabled: disabled || value >= max,
     outlined: true,
     squared: true,
     onPress: function onPress() {

package/build/components/InputNumber/InputNumber.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputNumber.js","names":["InputNumber","hint","label","max","min","name","step","value","onChange","others","style","inputNumber","className","texts"],"sources":["../../../src/components/InputNumber/InputNumber.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, Text, View } from '../../primitives';\nimport { Button } from '../Button';\nimport style from './InputNumber.module.css';\n\nexport const InputNumber = ({\n  hint,\n  label,\n  max,\n  min = 0,\n  name,\n  step = 1,\n  value = 0,\n  onChange = () => {},\n  ...others\n}) => (\n  <View {...others} row className={styles(style.inputNumber, others.className)}>\n    <View className={style.texts}>\n      {label && <Text>{label}</Text>}\n      {hint && (\n        <Text lighten small className={style.hint}>\n          {hint}\n        </Text>\n      )}\n    </View>\n    <Button disabled={value <= min} outlined squared onPress={() => onChange(value - step, name)}>\n      <Icon name=\"Minus\" />\n    </Button>\n    <Text className={style.value}>{value}</Text>\n    <Button disabled={value >= max} outlined squared onPress={() => onChange(value + step, name)}>\n      <Icon name=\"Plus\" />\n    </Button>\n  </View>\n);\n\nInputNumber.propTypes = {\n  hint: PropTypes.string,\n  label: PropTypes.string,\n  max: PropTypes.number,\n  min: PropTypes.number,\n  name: PropTypes.string.isRequired,\n  step: PropTypes.number,\n  value: PropTypes.number,\n  onChange: PropTypes.func,\n};\n"],"mappings":";;;;;;;;;;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;AAEO,IAAMA,WAAW,GAAG,SAAdA,WAAc;EAAA,IACzBC,IADyB,QACzBA,IADyB;EAAA,IAEzBC,KAFyB,QAEzBA,KAFyB;EAAA,IAGzBC,GAHyB,QAGzBA,GAHyB;EAAA,oBAIzBC,GAJyB;EAAA,IAIzBA,GAJyB,yBAInB,CAJmB;EAAA,IAKzBC,IALyB,QAKzBA,IALyB;EAAA,qBAMzBC,IANyB;EAAA,IAMzBA,IANyB,0BAMlB,CANkB;EAAA,sBAOzBC,KAPyB;EAAA,IAOzBA,KAPyB,2BAOjB,CAPiB;EAAA,yBAQzBC,QARyB;EAAA,IAQzBA,QARyB,8BAQd,YAAM,CAAE,CARM;EAAA,IAStBC,MATsB;EAAA,oBAWzB,6BAAC,gBAAD,oBAAUA,MAAV;IAAkB,GAAG,MAArB;IAAsB,SAAS,EAAE,qBAAOC,2BAAMC,WAAb,EAA0BF,MAAM,CAACG,SAAjC;EAAjC,iBACE,6BAAC,gBAAD;IAAM,SAAS,EAAEF,2BAAMG;EAAvB,GACGX,KAAK,iBAAI,6BAAC,gBAAD,QAAOA,KAAP,CADZ,EAEGD,IAAI,iBACH,6BAAC,gBAAD;IAAM,OAAO,MAAb;IAAc,KAAK,MAAnB;IAAoB,SAAS,EAAES,2BAAMT;EAArC,GACGA,IADH,CAHJ,CADF,eASE,6BAAC,cAAD;IAAQ,QAAQ,EAAEM,KAAK,IAAIH,GAA3B;IAAgC,QAAQ,MAAxC;IAAyC,OAAO,MAAhD;IAAiD,OAAO,EAAE;MAAA,OAAMI,QAAQ,CAACD,KAAK,GAAGD,IAAT,EAAeD,IAAf,CAAd;IAAA;EAA1D,gBACE,6BAAC,gBAAD;IAAM,IAAI,EAAC;EAAX,EADF,CATF,eAYE,6BAAC,gBAAD;IAAM,SAAS,EAAEK,2BAAMH;EAAvB,GAA+BA,KAA/B,CAZF,eAaE,6BAAC,cAAD;IAAQ,QAAQ,EAAEA,KAAK,IAAIJ,GAA3B;IAAgC,QAAQ,MAAxC;IAAyC,OAAO,MAAhD;IAAiD,OAAO,EAAE;MAAA,OAAMK,QAAQ,CAACD,KAAK,GAAGD,IAAT,EAAeD,IAAf,CAAd;IAAA;EAA1D,gBACE,6BAAC,gBAAD;IAAM,IAAI,EAAC;EAAX,EADF,CAbF,CAXyB;AAAA,CAApB"}
+{"version":3,"file":"InputNumber.js","names":["InputNumber","disabled","hint","label","max","min","name","step","value","onChange","others","style","inputNumber","className","texts"],"sources":["../../../src/components/InputNumber/InputNumber.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, Text, View } from '../../primitives';\nimport { Button } from '../Button';\nimport style from './InputNumber.module.css';\n\nexport const InputNumber = ({\n  disabled,\n  hint,\n  label,\n  max,\n  min = 0,\n  name,\n  step = 1,\n  value = 0,\n  onChange = () => {},\n  ...others\n}) => (\n  <View {...others} row className={styles(style.inputNumber, others.className)}>\n    <View className={style.texts}>\n      {label && <Text className={disabled && style.disabled}>{label}</Text>}\n      {hint && (\n        <Text small className={styles(style.hint, disabled && style.disabled)}>\n          {hint}\n        </Text>\n      )}\n    </View>\n    <Button disabled={disabled || value <= min} outlined squared onPress={() => onChange(value - step, name)}>\n      <Icon name=\"Minus\" />\n    </Button>\n    <Text className={style.value}>{typeof value === 'number' ? value : min}</Text>\n    <Button disabled={disabled || value >= max} outlined squared onPress={() => onChange(value + step, name)}>\n      <Icon name=\"Plus\" />\n    </Button>\n  </View>\n);\n\nInputNumber.propTypes = {\n  disabled: PropTypes.bool,\n  hint: PropTypes.string,\n  label: PropTypes.string,\n  max: PropTypes.number,\n  min: PropTypes.number,\n  name: PropTypes.string.isRequired,\n  step: PropTypes.number,\n  value: PropTypes.number,\n  onChange: PropTypes.func,\n};\n"],"mappings":";;;;;;;;;;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;AAEO,IAAMA,WAAW,GAAG,SAAdA,WAAc;EAAA,IACzBC,QADyB,QACzBA,QADyB;EAAA,IAEzBC,IAFyB,QAEzBA,IAFyB;EAAA,IAGzBC,KAHyB,QAGzBA,KAHyB;EAAA,IAIzBC,GAJyB,QAIzBA,GAJyB;EAAA,oBAKzBC,GALyB;EAAA,IAKzBA,GALyB,yBAKnB,CALmB;EAAA,IAMzBC,IANyB,QAMzBA,IANyB;EAAA,qBAOzBC,IAPyB;EAAA,IAOzBA,IAPyB,0BAOlB,CAPkB;EAAA,sBAQzBC,KARyB;EAAA,IAQzBA,KARyB,2BAQjB,CARiB;EAAA,yBASzBC,QATyB;EAAA,IASzBA,QATyB,8BASd,YAAM,CAAE,CATM;EAAA,IAUtBC,MAVsB;EAAA,oBAYzB,6BAAC,gBAAD,oBAAUA,MAAV;IAAkB,GAAG,MAArB;IAAsB,SAAS,EAAE,qBAAOC,2BAAMC,WAAb,EAA0BF,MAAM,CAACG,SAAjC;EAAjC,iBACE,6BAAC,gBAAD;IAAM,SAAS,EAAEF,2BAAMG;EAAvB,GACGX,KAAK,iBAAI,6BAAC,gBAAD;IAAM,SAAS,EAAEF,QAAQ,IAAIU,2BAAMV;EAAnC,GAA8CE,KAA9C,CADZ,EAEGD,IAAI,iBACH,6BAAC,gBAAD;IAAM,KAAK,MAAX;IAAY,SAAS,EAAE,qBAAOS,2BAAMT,IAAb,EAAmBD,QAAQ,IAAIU,2BAAMV,QAArC;EAAvB,GACGC,IADH,CAHJ,CADF,eASE,6BAAC,cAAD;IAAQ,QAAQ,EAAED,QAAQ,IAAIO,KAAK,IAAIH,GAAvC;IAA4C,QAAQ,MAApD;IAAqD,OAAO,MAA5D;IAA6D,OAAO,EAAE;MAAA,OAAMI,QAAQ,CAACD,KAAK,GAAGD,IAAT,EAAeD,IAAf,CAAd;IAAA;EAAtE,gBACE,6BAAC,gBAAD;IAAM,IAAI,EAAC;EAAX,EADF,CATF,eAYE,6BAAC,gBAAD;IAAM,SAAS,EAAEK,2BAAMH;EAAvB,GAA+B,OAAOA,KAAP,KAAiB,QAAjB,GAA4BA,KAA5B,GAAoCH,GAAnE,CAZF,eAaE,6BAAC,cAAD;IAAQ,QAAQ,EAAEJ,QAAQ,IAAIO,KAAK,IAAIJ,GAAvC;IAA4C,QAAQ,MAApD;IAAqD,OAAO,MAA5D;IAA6D,OAAO,EAAE;MAAA,OAAMK,QAAQ,CAACD,KAAK,GAAGD,IAAT,EAAeD,IAAf,CAAd;IAAA;EAAtE,gBACE,6BAAC,gBAAD;IAAM,IAAI,EAAC;EAAX,EADF,CAbF,CAZyB;AAAA,CAApB"}

package/build/components/InputNumber/InputNumber.module.css

@@ -1,5 +1,9 @@
+:root {
+  --mirai-ui-input-number-value-width: var(--mirai-ui-space-XXL);
+}
+
 .inputNumber {
-  margin-bottom: var(--mirai-ui-input-field-padding-y);
+  margin-bottom: var(--mirai-ui-input-text-padding-y);
 }
 
 .texts {
@@ -9,5 +13,13 @@
 .value {
   display: block;
   text-align: center;
-  width: var(--mirai-ui-space-XXL);
+  width: var(--mirai-ui-input-number-value-width);
+}
+
+.hint {
+  color: var(--mirai-ui-input-disabled);
+}
+
+.disabled {
+  color: var(--mirai-ui-input-text-disabled);
 }

package/build/components/InputNumber/__tests__/__snapshots__/InputNumber.test.js.snap

@@ -76,6 +76,83 @@ exports[`component:<InputNumber> inherit:className 1`] = `
 </DocumentFragment>
 `;
 
+exports[`component:<InputNumber> prop:disabled 1`] = `
+<DocumentFragment>
+  <div
+    class="view row inputNumber"
+  >
+    <div
+      class="view texts"
+    />
+    <button
+      class="pressable button squared"
+      disabled=""
+    >
+      <span
+        class="icon"
+      >
+        <svg
+          fill="none"
+          height="1em"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <line
+            x1="5"
+            x2="19"
+            y1="12"
+            y2="12"
+          />
+        </svg>
+      </span>
+    </button>
+    <span
+      class="text paragraph value"
+    >
+      0
+    </span>
+    <button
+      class="pressable button squared"
+      disabled=""
+    >
+      <span
+        class="icon"
+      >
+        <svg
+          fill="none"
+          height="1em"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <line
+            x1="12"
+            x2="12"
+            y1="5"
+            y2="19"
+          />
+          <line
+            x1="5"
+            x2="19"
+            y1="12"
+            y2="12"
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`component:<InputNumber> prop:hint 1`] = `
 <DocumentFragment>
   <div
@@ -85,7 +162,7 @@ exports[`component:<InputNumber> prop:hint 1`] = `
       class="view texts"
     >
       <span
-        class="text lighten small hint"
+        class="text small hint"
       >
         hint
       </span>

package/build/components/InputOption/InputOption.js

@@ -34,7 +34,7 @@ var InputOption = function InputOption(_ref) {
       _ref$onChange = _ref.onChange,
       onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
       others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var Primitive = type === _InputOption.CHECKBOX ? _primitives.Checkbox : _primitives.Radio;
+  var Primitive = type === _InputOption.CHECKBOX ? _primitives.Checkbox : type === _InputOption.RADIO ? _primitives.Radio : _primitives.Switch;
 
   var handleChange = function handleChange(event) {
     onChange(type === _InputOption.CHECKBOX ? !checked : value, event);

package/build/components/InputOption/InputOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputOption.js","names":["InputOption","checked","disabled","label","name","reverse","type","CHECKBOX","value","onChange","others","Primitive","Checkbox","Radio","handleChange","event","style","inputOption","className","icon","undefined","displayName"],"sources":["../../../src/components/InputOption/InputOption.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Radio, Checkbox, Icon, Pressable, Text } from '../../primitives';\nimport { CHECKBOX, RADIO, SWITCH } from './InputOption.constants';\nimport style from './InputOption.module.css';\n\nconst InputOption = ({\n  checked,\n  disabled,\n  label,\n  name,\n  reverse,\n  type = CHECKBOX,\n  value = '',\n  onChange = () => {},\n  ...others\n}) => {\n  const Primitive = type === CHECKBOX ? Checkbox : Radio;\n\n  const handleChange = (event) => {\n    onChange(type === CHECKBOX ? !checked : value, event);\n  };\n\n  return (\n    <Pressable\n      {...others}\n      style={others.style}\n      className={styles(style.inputOption, reverse && style.reverse, others.className)}\n      onPress={handleChange}\n    >\n      <Primitive checked={checked} disabled={disabled} name={name} type={type} value={value}>\n        {type === CHECKBOX && checked ? <Icon name=\"Check\" className={styles(style.icon)} /> : undefined}\n      </Primitive>\n      {label && <Text className={styles(style.label, disabled && style.disabled)}>{label}</Text>}\n    </Pressable>\n  );\n};\n\nInputOption.displayName = 'Component:InputOption';\n\nInputOption.propTypes = {\n  checked: PropTypes.bool,\n  disabled: PropTypes.bool,\n  label: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  reverse: PropTypes.bool,\n  type: PropTypes.oneOf([CHECKBOX, RADIO, SWITCH]),\n  value: PropTypes.string,\n  onChange: PropTypes.func,\n};\n\nexport { InputOption };\n"],"mappings":";;;;;;;;;;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;AAEA,IAAMA,WAAW,GAAG,SAAdA,WAAc,OAUd;EAAA,IATJC,OASI,QATJA,OASI;EAAA,IARJC,QAQI,QARJA,QAQI;EAAA,IAPJC,KAOI,QAPJA,KAOI;EAAA,IANJC,IAMI,QANJA,IAMI;EAAA,IALJC,OAKI,QALJA,OAKI;EAAA,qBAJJC,IAII;EAAA,IAJJA,IAII,0BAJGC,qBAIH;EAAA,sBAHJC,KAGI;EAAA,IAHJA,KAGI,2BAHI,EAGJ;EAAA,yBAFJC,QAEI;EAAA,IAFJA,QAEI,8BAFO,YAAM,CAAE,CAEf;EAAA,IADDC,MACC;EACJ,IAAMC,SAAS,GAAGL,IAAI,KAAKC,qBAAT,GAAoBK,oBAApB,GAA+BC,iBAAjD;;EAEA,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAW;IAC9BN,QAAQ,CAACH,IAAI,KAAKC,qBAAT,GAAoB,CAACN,OAArB,GAA+BO,KAAhC,EAAuCO,KAAvC,CAAR;EACD,CAFD;;EAIA,oBACE,6BAAC,qBAAD,oBACML,MADN;IAEE,KAAK,EAAEA,MAAM,CAACM,KAFhB;IAGE,SAAS,EAAE,qBAAOA,2BAAMC,WAAb,EAA0BZ,OAAO,IAAIW,2BAAMX,OAA3C,EAAoDK,MAAM,CAACQ,SAA3D,CAHb;IAIE,OAAO,EAAEJ;EAJX,iBAME,6BAAC,SAAD;IAAW,OAAO,EAAEb,OAApB;IAA6B,QAAQ,EAAEC,QAAvC;IAAiD,IAAI,EAAEE,IAAvD;IAA6D,IAAI,EAAEE,IAAnE;IAAyE,KAAK,EAAEE;EAAhF,GACGF,IAAI,KAAKC,qBAAT,IAAqBN,OAArB,gBAA+B,6BAAC,gBAAD;IAAM,IAAI,EAAC,OAAX;IAAmB,SAAS,EAAE,qBAAOe,2BAAMG,IAAb;EAA9B,EAA/B,GAAsFC,SADzF,CANF,EASGjB,KAAK,iBAAI,6BAAC,gBAAD;IAAM,SAAS,EAAE,qBAAOa,2BAAMb,KAAb,EAAoBD,QAAQ,IAAIc,2BAAMd,QAAtC;EAAjB,GAAmEC,KAAnE,CATZ,CADF;AAaD,CA9BD;;;AAgCAH,WAAW,CAACqB,WAAZ,GAA0B,uBAA1B"}
+{"version":3,"file":"InputOption.js","names":["InputOption","checked","disabled","label","name","reverse","type","CHECKBOX","value","onChange","others","Primitive","Checkbox","RADIO","Radio","Switch","handleChange","event","style","inputOption","className","icon","undefined","displayName"],"sources":["../../../src/components/InputOption/InputOption.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Checkbox, Icon, Pressable, Radio, Switch, Text } from '../../primitives';\nimport { CHECKBOX, RADIO, SWITCH } from './InputOption.constants';\nimport style from './InputOption.module.css';\n\nconst InputOption = ({\n  checked,\n  disabled,\n  label,\n  name,\n  reverse,\n  type = CHECKBOX,\n  value = '',\n  onChange = () => {},\n  ...others\n}) => {\n  const Primitive = type === CHECKBOX ? Checkbox : type === RADIO ? Radio : Switch;\n\n  const handleChange = (event) => {\n    onChange(type === CHECKBOX ? !checked : value, event);\n  };\n\n  return (\n    <Pressable\n      {...others}\n      style={others.style}\n      className={styles(style.inputOption, reverse && style.reverse, others.className)}\n      onPress={handleChange}\n    >\n      <Primitive checked={checked} disabled={disabled} name={name} type={type} value={value}>\n        {type === CHECKBOX && checked ? <Icon name=\"Check\" className={styles(style.icon)} /> : undefined}\n      </Primitive>\n      {label && <Text className={styles(style.label, disabled && style.disabled)}>{label}</Text>}\n    </Pressable>\n  );\n};\n\nInputOption.displayName = 'Component:InputOption';\n\nInputOption.propTypes = {\n  checked: PropTypes.bool,\n  disabled: PropTypes.bool,\n  label: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  reverse: PropTypes.bool,\n  type: PropTypes.oneOf([CHECKBOX, RADIO, SWITCH]),\n  value: PropTypes.string,\n  onChange: PropTypes.func,\n};\n\nexport { InputOption };\n"],"mappings":";;;;;;;;;;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;AAEA,IAAMA,WAAW,GAAG,SAAdA,WAAc,OAUd;EAAA,IATJC,OASI,QATJA,OASI;EAAA,IARJC,QAQI,QARJA,QAQI;EAAA,IAPJC,KAOI,QAPJA,KAOI;EAAA,IANJC,IAMI,QANJA,IAMI;EAAA,IALJC,OAKI,QALJA,OAKI;EAAA,qBAJJC,IAII;EAAA,IAJJA,IAII,0BAJGC,qBAIH;EAAA,sBAHJC,KAGI;EAAA,IAHJA,KAGI,2BAHI,EAGJ;EAAA,yBAFJC,QAEI;EAAA,IAFJA,QAEI,8BAFO,YAAM,CAAE,CAEf;EAAA,IADDC,MACC;EACJ,IAAMC,SAAS,GAAGL,IAAI,KAAKC,qBAAT,GAAoBK,oBAApB,GAA+BN,IAAI,KAAKO,kBAAT,GAAiBC,iBAAjB,GAAyBC,kBAA1E;;EAEA,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAW;IAC9BR,QAAQ,CAACH,IAAI,KAAKC,qBAAT,GAAoB,CAACN,OAArB,GAA+BO,KAAhC,EAAuCS,KAAvC,CAAR;EACD,CAFD;;EAIA,oBACE,6BAAC,qBAAD,oBACMP,MADN;IAEE,KAAK,EAAEA,MAAM,CAACQ,KAFhB;IAGE,SAAS,EAAE,qBAAOA,2BAAMC,WAAb,EAA0Bd,OAAO,IAAIa,2BAAMb,OAA3C,EAAoDK,MAAM,CAACU,SAA3D,CAHb;IAIE,OAAO,EAAEJ;EAJX,iBAME,6BAAC,SAAD;IAAW,OAAO,EAAEf,OAApB;IAA6B,QAAQ,EAAEC,QAAvC;IAAiD,IAAI,EAAEE,IAAvD;IAA6D,IAAI,EAAEE,IAAnE;IAAyE,KAAK,EAAEE;EAAhF,GACGF,IAAI,KAAKC,qBAAT,IAAqBN,OAArB,gBAA+B,6BAAC,gBAAD;IAAM,IAAI,EAAC,OAAX;IAAmB,SAAS,EAAE,qBAAOiB,2BAAMG,IAAb;EAA9B,EAA/B,GAAsFC,SADzF,CANF,EASGnB,KAAK,iBAAI,6BAAC,gBAAD;IAAM,SAAS,EAAE,qBAAOe,2BAAMf,KAAb,EAAoBD,QAAQ,IAAIgB,2BAAMhB,QAAtC;EAAjB,GAAmEC,KAAnE,CATZ,CADF;AAaD,CA9BD;;;AAgCAH,WAAW,CAACuB,WAAZ,GAA0B,uBAA1B"}

package/build/components/InputOption/InputOption.module.css

@@ -1,5 +1,5 @@
 :root {
-  --mirai-ui-input-option-disabled: var(--mirai-ui-disabled);
+  --mirai-ui-input-option-disabled: var(--mirai-ui-content-300);
   --mirai-ui-input-option-label-margin: var(--mirai-ui-space-S);
   --mirai-ui-input-option-padding-y: var(--mirai-ui-space-S);
 }
@@ -32,6 +32,11 @@
   flex-direction: row-reverse;
 }
 
+.reverse .icon {
+  left: auto;
+  right: 0;
+}
+
 .reverse .label {
   margin-left: 0;
   margin-right: var(--mirai-ui-input-option-label-margin);

package/build/components/InputSelect/InputSelect.js

@@ -67,14 +67,14 @@ var InputSelect = function InputSelect(_ref) {
     className: (0, _helpers.styles)(_InputTextModule.default.inputContainer, others.className),
     style: others.style
   }, label && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
-    className: (0, _helpers.styles)(_InputTextModule.default.text, _InputTextModule.default.label, focus && _InputTextModule.default.focus, error && _InputTextModule.default.error, (focus || error || has.value) && _InputTextModule.default.value)
+    className: (0, _helpers.styles)(_InputTextModule.default.text, _InputTextModule.default.label, disabled && _InputTextModule.default.disabled, error && _InputTextModule.default.error, focus && _InputTextModule.default.focus, (focus || error || has.value) && _InputTextModule.default.value)
   }, label), /*#__PURE__*/_react.default.createElement(_primitives.View, {
     row: true,
-    className: (0, _helpers.styles)(_InputTextModule.default.inputBorder, focus && !error && _InputTextModule.default.focus, error && _InputTextModule.default.error)
+    className: (0, _helpers.styles)(_InputTextModule.default.inputBorder, disabled && _InputTextModule.default.disabled, focus && !error && _InputTextModule.default.focus, error && _InputTextModule.default.error)
   }, /*#__PURE__*/_react.default.createElement(_primitives.Select, Object.assign({}, others, {
     disabled: disabled,
     value: others.value || '',
-    className: _InputTextModule.default.input,
+    className: (0, _helpers.styles)(_InputTextModule.default.input, _InputTextModule.default.iconRight, !(focus || error || has.value) && _InputTextModule.default.empty),
     style: undefined,
     onChange: handleChange,
     onEnter: handleEnter,
@@ -84,7 +84,7 @@ var InputSelect = function InputSelect(_ref) {
     className: [_InputTextModule.default.icon, _InputTextModule.default.right]
   })), hint && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
     small: true,
-    className: (0, _helpers.styles)(_InputTextModule.default.text, _InputTextModule.default.hint, error && _InputTextModule.default.error)
+    className: (0, _helpers.styles)(_InputTextModule.default.text, _InputTextModule.default.hint, disabled && _InputTextModule.default.disabled, error && _InputTextModule.default.error)
   }, hint));
 };
 

package/build/components/InputSelect/InputSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputSelect.js","names":["InputSelect","disabled","error","hint","label","onChange","onEnter","onLeave","others","focus","setFocus","handleChange","value","event","target","blur","handleEnter","handleLeave","has","undefined","length","style","inputContainer","className","text","inputBorder","input","icon","right","displayName"],"sources":["../../../src/components/InputSelect/InputSelect.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, Select, Text, View } from '../../primitives';\nimport style from '../InputText/InputText.module.css';\nconst InputSelect = ({\n  disabled,\n  error,\n  hint,\n  label,\n  onChange = () => {},\n  onEnter = () => {},\n  onLeave = () => {},\n  ...others\n}) => {\n  const [focus, setFocus] = useState(false);\n\n  const handleChange = (value, event) => {\n    onChange(value, event);\n    event.target?.blur();\n  };\n\n  const handleEnter = (event) => {\n    setFocus(true);\n    onEnter(event);\n  };\n\n  const handleLeave = (event) => {\n    setFocus(false);\n    onLeave(event);\n  };\n\n  const has = {\n    value: others.value !== undefined && others.value?.length > 0,\n  };\n\n  return (\n    <View className={styles(style.inputContainer, others.className)} style={others.style}>\n      {label && (\n        <Text\n          className={styles(\n            style.text,\n            style.label,\n            focus && style.focus,\n            error && style.error,\n            (focus || error || has.value) && style.value,\n          )}\n        >\n          {label}\n        </Text>\n      )}\n\n      <View row className={styles(style.inputBorder, focus && !error && style.focus, error && style.error)}>\n        <Select\n          {...others}\n          disabled={disabled}\n          value={others.value || ''}\n          className={style.input}\n          style={undefined}\n          onChange={handleChange}\n          onEnter={handleEnter}\n          onLeave={handleLeave}\n        />\n        {!disabled && <Icon name=\"CloseArrow\" className={[style.icon, style.right]} />}\n      </View>\n\n      {hint && (\n        <Text small className={styles(style.text, style.hint, error && style.error)}>\n          {hint}\n        </Text>\n      )}\n    </View>\n  );\n};\n\nInputSelect.displayName = 'Component:InputSelect';\n\nInputSelect.propTypes = {\n  disabled: PropTypes.bool,\n  error: PropTypes.bool,\n  hint: PropTypes.string,\n  label: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  onChange: PropTypes.func,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n};\n\nexport { InputSelect };\n"],"mappings":"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"}
+{"version":3,"file":"InputSelect.js","names":["InputSelect","disabled","error","hint","label","onChange","onEnter","onLeave","others","focus","setFocus","handleChange","value","event","target","blur","handleEnter","handleLeave","has","undefined","length","style","inputContainer","className","text","inputBorder","input","iconRight","empty","icon","right","displayName"],"sources":["../../../src/components/InputSelect/InputSelect.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, Select, Text, View } from '../../primitives';\nimport style from '../InputText/InputText.module.css';\n\nconst InputSelect = ({\n  disabled,\n  error,\n  hint,\n  label,\n  onChange = () => {},\n  onEnter = () => {},\n  onLeave = () => {},\n  ...others\n}) => {\n  const [focus, setFocus] = useState(false);\n\n  const handleChange = (value, event) => {\n    onChange(value, event);\n    event.target?.blur();\n  };\n\n  const handleEnter = (event) => {\n    setFocus(true);\n    onEnter(event);\n  };\n\n  const handleLeave = (event) => {\n    setFocus(false);\n    onLeave(event);\n  };\n\n  const has = {\n    value: others.value !== undefined && others.value?.length > 0,\n  };\n\n  return (\n    <View className={styles(style.inputContainer, others.className)} style={others.style}>\n      {label && (\n        <Text\n          className={styles(\n            style.text,\n            style.label,\n            disabled && style.disabled,\n            error && style.error,\n            focus && style.focus,\n            (focus || error || has.value) && style.value,\n          )}\n        >\n          {label}\n        </Text>\n      )}\n\n      <View\n        row\n        className={styles(\n          style.inputBorder,\n          disabled && style.disabled,\n          focus && !error && style.focus,\n          error && style.error,\n        )}\n      >\n        <Select\n          {...others}\n          disabled={disabled}\n          value={others.value || ''}\n          className={styles(style.input, style.iconRight, !(focus || error || has.value) && style.empty)}\n          style={undefined}\n          onChange={handleChange}\n          onEnter={handleEnter}\n          onLeave={handleLeave}\n        />\n        {!disabled && <Icon name=\"CloseArrow\" className={[style.icon, style.right]} />}\n      </View>\n\n      {hint && (\n        <Text small className={styles(style.text, style.hint, disabled && style.disabled, error && style.error)}>\n          {hint}\n        </Text>\n      )}\n    </View>\n  );\n};\n\nInputSelect.displayName = 'Component:InputSelect';\n\nInputSelect.propTypes = {\n  disabled: PropTypes.bool,\n  error: PropTypes.bool,\n  hint: PropTypes.string,\n  label: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  onChange: PropTypes.func,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n};\n\nexport { InputSelect };\n"],"mappings":"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"}

package/build/components/InputSelect/__tests__/__snapshots__/InputSelect.test.js.snap

@@ -9,7 +9,7 @@ exports[`component:<InputSelect> inherit:className 1`] = `
       class="view row inputBorder"
     >
       <select
-        class="select empty input"
+        class="select empty input iconRight empty"
         name="name"
       >
         <option
@@ -68,10 +68,10 @@ exports[`component:<InputSelect> prop:disabled 1`] = `
     class="view inputContainer"
   >
     <div
-      class="view row inputBorder"
+      class="view row inputBorder disabled"
     >
       <select
-        class="select empty input"
+        class="select empty input iconRight empty"
         disabled=""
         name="name"
       >
@@ -115,7 +115,7 @@ exports[`component:<InputSelect> prop:error 1`] = `
       class="view row inputBorder"
     >
       <select
-        class="select empty input"
+        class="select empty input iconRight empty"
         name="name"
       >
         <option
@@ -177,7 +177,7 @@ exports[`component:<InputSelect> prop:hint 1`] = `
       class="view row inputBorder"
     >
       <select
-        class="select empty input"
+        class="select empty input iconRight empty"
         name="name"
       >
         <option
@@ -249,7 +249,7 @@ exports[`component:<InputSelect> prop:label 1`] = `
       class="view row inputBorder"
     >
       <select
-        class="select empty input"
+        class="select empty input iconRight empty"
         name="name"
       >
         <option
@@ -311,7 +311,7 @@ exports[`component:<InputSelect> prop:label 2`] = `
       class="view row inputBorder"
     >
       <select
-        class="select input"
+        class="select input iconRight"
         name="name"
       >
         <option
@@ -373,7 +373,7 @@ exports[`component:<InputSelect> renders 1`] = `
       class="view row inputBorder"
     >
       <select
-        class="select empty input"
+        class="select empty input iconRight empty"
         name="name"
       >
         <option
@@ -435,7 +435,7 @@ exports[`component:<InputSelect> testID 1`] = `
       class="view row inputBorder"
     >
       <select
-        class="select empty input"
+        class="select empty input iconRight empty"
         data-testid="mirai"
         name="name"
       >

package/build/components/InputText/InputText.js

@@ -74,10 +74,10 @@ var InputText = function InputText(_ref) {
     className: (0, _helpers.styles)(_InputTextModule.default.inputContainer, others.className),
     style: others.style
   }, label && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
-    className: (0, _helpers.styles)(_InputTextModule.default.text, _InputTextModule.default.label, focus && _InputTextModule.default.focus, error && _InputTextModule.default.error, (focus || error || has.value) && _InputTextModule.default.value)
+    className: (0, _helpers.styles)(_InputTextModule.default.text, _InputTextModule.default.label, disabled && _InputTextModule.default.disabled, focus && _InputTextModule.default.focus, error && _InputTextModule.default.error, (focus || error || has.value) && _InputTextModule.default.value)
   }, label), /*#__PURE__*/_react.default.createElement(_primitives.View, {
     row: true,
-    className: (0, _helpers.styles)(_InputTextModule.default.inputBorder, focus && !error && _InputTextModule.default.focus, error && _InputTextModule.default.error)
+    className: (0, _helpers.styles)(_InputTextModule.default.inputBorder, disabled && _InputTextModule.default.disabled, error && _InputTextModule.default.error, focus && !error && _InputTextModule.default.focus)
   }, icon && /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
     name: icon,
     className: [_InputTextModule.default.icon, _InputTextModule.default.left]
@@ -99,7 +99,7 @@ var InputText = function InputText(_ref) {
     name: password ? 'EyeClose' : 'EyeOpen'
   }))), hint && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
     small: true,
-    className: (0, _helpers.styles)(_InputTextModule.default.text, _InputTextModule.default.hint, error && _InputTextModule.default.error)
+    className: (0, _helpers.styles)(_InputTextModule.default.text, _InputTextModule.default.hint, disabled && _InputTextModule.default.disabled, error && _InputTextModule.default.error)
   }, hint));
 };
 

package/build/components/InputText/InputText.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputText.js","names":["InputText","disabled","error","hint","icon","label","type","onChange","onEnter","onLeave","others","focus","setFocus","password","setPassword","handleChange","value","event","handleEnter","handleLeave","has","undefined","length","is","style","inputContainer","className","text","inputBorder","left","input","iconLeft","pressable","displayName"],"sources":["../../../src/components/InputText/InputText.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, Input, Pressable, Text, View } from '../../primitives';\nimport style from './InputText.module.css';\n\nconst InputText = ({\n  disabled,\n  error,\n  hint,\n  icon,\n  label,\n  type,\n  onChange = () => {},\n  onEnter = () => {},\n  onLeave = () => {},\n  ...others\n}) => {\n  const [focus, setFocus] = useState(false);\n  const [password, setPassword] = useState(true);\n\n  const handleChange = (value, event) => {\n    onChange(value, event);\n  };\n\n  const handleEnter = (event) => {\n    setFocus(true);\n    onEnter(event);\n  };\n\n  const handleLeave = () => {\n    setFocus(false);\n    onLeave(event);\n  };\n\n  const has = {\n    value: others.value !== undefined && others.value?.length > 0,\n  };\n  const is = { password: type === 'password' };\n\n  return (\n    <View className={styles(style.inputContainer, others.className)} style={others.style}>\n      {label && (\n        <Text\n          className={styles(\n            style.text,\n            style.label,\n            focus && style.focus,\n            error && style.error,\n            (focus || error || has.value) && style.value,\n          )}\n        >\n          {label}\n        </Text>\n      )}\n\n      <View row className={styles(style.inputBorder, focus && !error && style.focus, error && style.error)}>\n        {icon && <Icon name={icon} className={[style.icon, style.left]} />}\n        <Input\n          {...others}\n          disabled={disabled}\n          type={!is.password || password ? type : 'text'}\n          value={others.value || ''}\n          className={styles(style.input, icon && style.iconLeft)}\n          style={undefined}\n          onChange={handleChange}\n          onEnter={handleEnter}\n          onLeave={handleLeave}\n        />\n        {is.password && !disabled && (\n          <Pressable className={style.pressable} onPress={() => setPassword(!password)}>\n            <Icon name={password ? 'EyeClose' : 'EyeOpen'} />\n          </Pressable>\n        )}\n      </View>\n\n      {hint && (\n        <Text small className={styles(style.text, style.hint, error && style.error)}>\n          {hint}\n        </Text>\n      )}\n    </View>\n  );\n};\n\nInputText.displayName = 'Component:InputText';\n\nInputText.propTypes = {\n  disabled: PropTypes.bool,\n  error: PropTypes.bool,\n  hint: PropTypes.string,\n  icon: PropTypes.string,\n  label: PropTypes.string,\n  multiLine: PropTypes.bool,\n  name: PropTypes.string.isRequired,\n  type: PropTypes.string,\n  onChange: PropTypes.func,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n};\n\nexport { InputText };\n"],"mappings":";;;;;;;;;;;;;;;AACA;;AAEA;;AACA;;AACA;;;;AAEA,IAAMA,SAAS,GAAG,SAAZA,SAAY,OAWZ;EAAA;;EAAA,IAVJC,QAUI,QAVJA,QAUI;EAAA,IATJC,KASI,QATJA,KASI;EAAA,IARJC,IAQI,QARJA,IAQI;EAAA,IAPJC,IAOI,QAPJA,IAOI;EAAA,IANJC,KAMI,QANJA,KAMI;EAAA,IALJC,IAKI,QALJA,IAKI;EAAA,yBAJJC,QAII;EAAA,IAJJA,QAII,8BAJO,YAAM,CAAE,CAIf;EAAA,wBAHJC,OAGI;EAAA,IAHJA,OAGI,6BAHM,YAAM,CAAE,CAGd;EAAA,wBAFJC,OAEI;EAAA,IAFJA,OAEI,6BAFM,YAAM,CAAE,CAEd;EAAA,IADDC,MACC;;EACJ,gBAA0B,qBAAS,KAAT,CAA1B;EAAA;EAAA,IAAOC,KAAP;EAAA,IAAcC,QAAd;;EACA,iBAAgC,qBAAS,IAAT,CAAhC;EAAA;EAAA,IAAOC,QAAP;EAAA,IAAiBC,WAAjB;;EAEA,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAQC,KAAR,EAAkB;IACrCV,QAAQ,CAACS,KAAD,EAAQC,KAAR,CAAR;EACD,CAFD;;EAIA,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAACD,KAAD,EAAW;IAC7BL,QAAQ,CAAC,IAAD,CAAR;IACAJ,OAAO,CAACS,KAAD,CAAP;EACD,CAHD;;EAKA,IAAME,WAAW,GAAG,SAAdA,WAAc,GAAM;IACxBP,QAAQ,CAAC,KAAD,CAAR;IACAH,OAAO,CAACQ,KAAD,CAAP;EACD,CAHD;;EAKA,IAAMG,GAAG,GAAG;IACVJ,KAAK,EAAEN,MAAM,CAACM,KAAP,KAAiBK,SAAjB,IAA8B,kBAAAX,MAAM,CAACM,KAAP,gEAAcM,MAAd,IAAuB;EADlD,CAAZ;EAGA,IAAMC,EAAE,GAAG;IAAEV,QAAQ,EAAEP,IAAI,KAAK;EAArB,CAAX;EAEA,oBACE,6BAAC,gBAAD;IAAM,SAAS,EAAE,qBAAOkB,yBAAMC,cAAb,EAA6Bf,MAAM,CAACgB,SAApC,CAAjB;IAAiE,KAAK,EAAEhB,MAAM,CAACc;EAA/E,GACGnB,KAAK,iBACJ,6BAAC,gBAAD;IACE,SAAS,EAAE,qBACTmB,yBAAMG,IADG,EAETH,yBAAMnB,KAFG,EAGTM,KAAK,IAAIa,yBAAMb,KAHN,EAITT,KAAK,IAAIsB,yBAAMtB,KAJN,EAKT,CAACS,KAAK,IAAIT,KAAT,IAAkBkB,GAAG,CAACJ,KAAvB,KAAiCQ,yBAAMR,KAL9B;EADb,GASGX,KATH,CAFJ,eAeE,6BAAC,gBAAD;IAAM,GAAG,MAAT;IAAU,SAAS,EAAE,qBAAOmB,yBAAMI,WAAb,EAA0BjB,KAAK,IAAI,CAACT,KAAV,IAAmBsB,yBAAMb,KAAnD,EAA0DT,KAAK,IAAIsB,yBAAMtB,KAAzE;EAArB,GACGE,IAAI,iBAAI,6BAAC,gBAAD;IAAM,IAAI,EAAEA,IAAZ;IAAkB,SAAS,EAAE,CAACoB,yBAAMpB,IAAP,EAAaoB,yBAAMK,IAAnB;EAA7B,EADX,eAEE,6BAAC,iBAAD,oBACMnB,MADN;IAEE,QAAQ,EAAET,QAFZ;IAGE,IAAI,EAAE,CAACsB,EAAE,CAACV,QAAJ,IAAgBA,QAAhB,GAA2BP,IAA3B,GAAkC,MAH1C;IAIE,KAAK,EAAEI,MAAM,CAACM,KAAP,IAAgB,EAJzB;IAKE,SAAS,EAAE,qBAAOQ,yBAAMM,KAAb,EAAoB1B,IAAI,IAAIoB,yBAAMO,QAAlC,CALb;IAME,KAAK,EAAEV,SANT;IAOE,QAAQ,EAAEN,YAPZ;IAQE,OAAO,EAAEG,WARX;IASE,OAAO,EAAEC;EATX,GAFF,EAaGI,EAAE,CAACV,QAAH,IAAe,CAACZ,QAAhB,iBACC,6BAAC,qBAAD;IAAW,SAAS,EAAEuB,yBAAMQ,SAA5B;IAAuC,OAAO,EAAE;MAAA,OAAMlB,WAAW,CAAC,CAACD,QAAF,CAAjB;IAAA;EAAhD,gBACE,6BAAC,gBAAD;IAAM,IAAI,EAAEA,QAAQ,GAAG,UAAH,GAAgB;EAApC,EADF,CAdJ,CAfF,EAmCGV,IAAI,iBACH,6BAAC,gBAAD;IAAM,KAAK,MAAX;IAAY,SAAS,EAAE,qBAAOqB,yBAAMG,IAAb,EAAmBH,yBAAMrB,IAAzB,EAA+BD,KAAK,IAAIsB,yBAAMtB,KAA9C;EAAvB,GACGC,IADH,CApCJ,CADF;AA2CD,CA7ED;;;AA+EAH,SAAS,CAACiC,WAAV,GAAwB,qBAAxB"}
+{"version":3,"file":"InputText.js","names":["InputText","disabled","error","hint","icon","label","type","onChange","onEnter","onLeave","others","focus","setFocus","password","setPassword","handleChange","value","event","handleEnter","handleLeave","has","undefined","length","is","style","inputContainer","className","text","inputBorder","left","input","iconLeft","pressable","displayName"],"sources":["../../../src/components/InputText/InputText.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, Input, Pressable, Text, View } from '../../primitives';\nimport style from './InputText.module.css';\n\nconst InputText = ({\n  disabled,\n  error,\n  hint,\n  icon,\n  label,\n  type,\n  onChange = () => {},\n  onEnter = () => {},\n  onLeave = () => {},\n  ...others\n}) => {\n  const [focus, setFocus] = useState(false);\n  const [password, setPassword] = useState(true);\n\n  const handleChange = (value, event) => {\n    onChange(value, event);\n  };\n\n  const handleEnter = (event) => {\n    setFocus(true);\n    onEnter(event);\n  };\n\n  const handleLeave = () => {\n    setFocus(false);\n    onLeave(event);\n  };\n\n  const has = {\n    value: others.value !== undefined && others.value?.length > 0,\n  };\n  const is = { password: type === 'password' };\n\n  return (\n    <View className={styles(style.inputContainer, others.className)} style={others.style}>\n      {label && (\n        <Text\n          className={styles(\n            style.text,\n            style.label,\n            disabled && style.disabled,\n            focus && style.focus,\n            error && style.error,\n            (focus || error || has.value) && style.value,\n          )}\n        >\n          {label}\n        </Text>\n      )}\n\n      <View\n        row\n        className={styles(\n          style.inputBorder,\n          disabled && style.disabled,\n          error && style.error,\n          focus && !error && style.focus,\n        )}\n      >\n        {icon && <Icon name={icon} className={[style.icon, style.left]} />}\n        <Input\n          {...others}\n          disabled={disabled}\n          type={!is.password || password ? type : 'text'}\n          value={others.value || ''}\n          className={styles(style.input, icon && style.iconLeft)}\n          style={undefined}\n          onChange={handleChange}\n          onEnter={handleEnter}\n          onLeave={handleLeave}\n        />\n        {is.password && !disabled && (\n          <Pressable className={style.pressable} onPress={() => setPassword(!password)}>\n            <Icon name={password ? 'EyeClose' : 'EyeOpen'} />\n          </Pressable>\n        )}\n      </View>\n\n      {hint && (\n        <Text small className={styles(style.text, style.hint, disabled && style.disabled, error && style.error)}>\n          {hint}\n        </Text>\n      )}\n    </View>\n  );\n};\n\nInputText.displayName = 'Component:InputText';\n\nInputText.propTypes = {\n  disabled: PropTypes.bool,\n  error: PropTypes.bool,\n  hint: PropTypes.string,\n  icon: PropTypes.string,\n  label: PropTypes.string,\n  multiLine: PropTypes.bool,\n  name: PropTypes.string.isRequired,\n  type: PropTypes.string,\n  onChange: PropTypes.func,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n};\n\nexport { InputText };\n"],"mappings":"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"}