@mirai/ui 1.0.1 → 1.0.2

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/InputSelect/index.js"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './InputSelect';\n"],"file":"index.js"}

package/build/components/InputText/InputText.js

@@ -70,21 +70,23 @@ var InputText = function InputText(_ref) {
     password: type === 'password'
   };
   return /*#__PURE__*/_react.default.createElement(_primitives.View, {
-    className: (0, _helpers.styles)(_InputTextModule.default.inputText, others.className)
+    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)
   }, label), /*#__PURE__*/_react.default.createElement(_primitives.View, {
-    className: (0, _helpers.styles)(_InputTextModule.default.content)
+    row: true,
+    className: (0, _helpers.styles)(_InputTextModule.default.inputBorder, focus && !error && _InputTextModule.default.focus, error && _InputTextModule.default.error)
   }, /*#__PURE__*/_react.default.createElement(_primitives.Input, Object.assign({}, others, {
     disabled: disabled,
     type: !is.password || password ? type : 'text',
     value: others.value || '',
-    className: (0, _helpers.styles)(_InputTextModule.default.input, error && _InputTextModule.default.error),
+    className: _InputTextModule.default.input,
+    style: undefined,
     onChange: handleChange,
     onEnter: handleEnter,
     onLeave: handleLeave
   })), is.password && !disabled && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
-    className: _InputTextModule.default.pressable,
     onPress: function onPress() {
       return setPassword(!password);
     }
@@ -97,4 +99,5 @@ var InputText = function InputText(_ref) {
 };
 
 exports.InputText = InputText;
+InputText.displayName = 'Component:InputText';
 //# sourceMappingURL=InputText.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/InputText/InputText.jsx"],"names":["InputText","disabled","error","hint","label","type","onChange","onEnter","onLeave","others","focus","setFocus","password","setPassword","handleChange","value","event","handleEnter","handleLeave","has","undefined","length","is","style","inputText","className","text","content","input","pressable"],"mappings":"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","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  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.inputText, others.className)}>\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 className={styles(style.content)}>\n        <Input\n          {...others}\n          disabled={disabled}\n          type={!is.password || password ? type : 'text'}\n          value={others.value || ''}\n          className={styles(style.input, error && style.error)}\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.propTypes = {\n  disabled: PropTypes.bool,\n  error: PropTypes.bool,\n  hint: 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"],"file":"InputText.js"}
+{"version":3,"sources":["../../../src/components/InputText/InputText.jsx"],"names":["InputText","disabled","error","hint","label","type","onChange","onEnter","onLeave","others","focus","setFocus","password","setPassword","handleChange","value","event","handleEnter","handleLeave","has","undefined","length","is","style","inputContainer","className","text","inputBorder","input","displayName"],"mappings":"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","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  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        <Input\n          {...others}\n          disabled={disabled}\n          type={!is.password || password ? type : 'text'}\n          value={others.value || ''}\n          className={style.input}\n          style={undefined}\n          onChange={handleChange}\n          onEnter={handleEnter}\n          onLeave={handleLeave}\n        />\n        {is.password && !disabled && (\n          <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  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"],"file":"InputText.js"}

package/build/components/InputText/InputText.module.css

@@ -6,29 +6,33 @@
   --mirai-ui-input-field-radius: var(--mirai-ui-border-radius);
 }
 
-.inputText {
+.inputContainer {
   position: relative;
   margin-bottom: var(--mirai-ui-input-field-padding-y);
 }
 
-.input {
+.inputBorder {
   border: var(--mirai-ui-input-field-border);
   border-radius: var(--mirai-ui-input-field-radius);
-  padding: var(--mirai-ui-input-field-padding-y) var(--mirai-ui-input-field-padding-x);
+  padding: 0 var(--mirai-ui-input-field-padding-x) 0 0;
 }
 
-.input::placeholder {
-  color: var(--mirai-ui-base);
-}
-
-.input.error {
+.inputBorder.error {
   border-color: var(--mirai-ui-error);
 }
 
-.input:not(.error):focus {
+.inputBorder.focus {
   border-color: var(--mirai-ui-input-field-focus);
 }
 
+.input {
+  padding: var(--mirai-ui-input-field-padding-y) var(--mirai-ui-input-field-padding-x);
+}
+
+.input::placeholder {
+  color: var(--mirai-ui-base);
+}
+
 .text {
   color: var(--mirai-ui-lighten);
 }
@@ -50,6 +54,7 @@
   position: absolute;
   top: var(--mirai-ui-input-field-padding-y);
   transition: all var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
+  z-index: 1;
 }
 
 .label.value {
@@ -57,12 +62,6 @@
   top: calc(calc(var(--mirai-ui-input-field-padding-y) * -1) + calc(var(--mirai-ui-input-field-padding-y) / 2));
 }
 
-.pressable {
-  position: absolute;
-  right: var(--mirai-ui-input-field-padding-x);
-  top: var(--mirai-ui-input-field-padding-y);
-}
-
 .hint {
   margin: calc(var(--mirai-ui-input-field-padding-x) / 4) var(--mirai-ui-input-field-padding-x);
 }

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

@@ -3,10 +3,10 @@
 exports[`component:<InputText> inherit:className 1`] = `
 <DocumentFragment>
   <div
-    class="view inputText mirai"
+    class="view inputContainer mirai"
   >
     <div
-      class="view content"
+      class="view row inputBorder"
     >
       <input
         class="input input"
@@ -22,10 +22,10 @@ exports[`component:<InputText> inherit:className 1`] = `
 exports[`component:<InputText> prop:disabled 1`] = `
 <DocumentFragment>
   <div
-    class="view inputText"
+    class="view inputContainer"
   >
     <div
-      class="view content"
+      class="view row inputBorder"
     >
       <input
         class="input input"
@@ -42,13 +42,13 @@ exports[`component:<InputText> prop:disabled 1`] = `
 exports[`component:<InputText> prop:error 1`] = `
 <DocumentFragment>
   <div
-    class="view inputText"
+    class="view inputContainer"
   >
     <div
-      class="view content"
+      class="view row inputBorder error"
     >
       <input
-        class="input input error"
+        class="input input"
         name="name"
         type="text"
         value=""
@@ -61,10 +61,10 @@ exports[`component:<InputText> prop:error 1`] = `
 exports[`component:<InputText> prop:hint 1`] = `
 <DocumentFragment>
   <div
-    class="view inputText"
+    class="view inputContainer"
   >
     <div
-      class="view content"
+      class="view row inputBorder"
     >
       <input
         class="input input"
@@ -85,7 +85,7 @@ exports[`component:<InputText> prop:hint 1`] = `
 exports[`component:<InputText> prop:label 1`] = `
 <DocumentFragment>
   <div
-    class="view inputText"
+    class="view inputContainer"
   >
     <span
       class="text paragraph text label"
@@ -93,7 +93,7 @@ exports[`component:<InputText> prop:label 1`] = `
       label
     </span>
     <div
-      class="view content"
+      class="view row inputBorder"
     >
       <input
         class="input input"
@@ -109,10 +109,10 @@ exports[`component:<InputText> prop:label 1`] = `
 exports[`component:<InputText> prop:multiLine 1`] = `
 <DocumentFragment>
   <div
-    class="view inputText"
+    class="view inputContainer"
   >
     <div
-      class="view content"
+      class="view row inputBorder"
     >
       <textarea
         class="input input"
@@ -127,10 +127,10 @@ exports[`component:<InputText> prop:multiLine 1`] = `
 exports[`component:<InputText> prop:type 1`] = `
 <DocumentFragment>
   <div
-    class="view inputText"
+    class="view inputContainer"
   >
     <div
-      class="view content"
+      class="view row inputBorder"
     >
       <input
         class="input input"
@@ -139,7 +139,7 @@ exports[`component:<InputText> prop:type 1`] = `
         value=""
       />
       <button
-        class="pressable pressable"
+        class="pressable"
       >
         <span
           class="icon"
@@ -175,10 +175,10 @@ exports[`component:<InputText> prop:type 1`] = `
 exports[`component:<InputText> renders 1`] = `
 <DocumentFragment>
   <div
-    class="view inputText"
+    class="view inputContainer"
   >
     <div
-      class="view content"
+      class="view row inputBorder"
     >
       <input
         class="input input"
@@ -194,10 +194,10 @@ exports[`component:<InputText> renders 1`] = `
 exports[`component:<InputText> testID 1`] = `
 <DocumentFragment>
   <div
-    class="view inputText"
+    class="view inputContainer"
   >
     <div
-      class="view content"
+      class="view row inputBorder"
     >
       <input
         class="input input"

package/build/components/index.js

@@ -56,6 +56,19 @@ Object.keys(_InputNumber).forEach(function (key) {
   });
 });
 
+var _InputSelect = require("./InputSelect");
+
+Object.keys(_InputSelect).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _InputSelect[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _InputSelect[key];
+    }
+  });
+});
+
 var _InputText = require("./InputText");
 
 Object.keys(_InputText).forEach(function (key) {

package/build/components/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/index.js"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './Button';\nexport * from './Calendar';\nexport * from './Form';\nexport * from './InputNumber';\nexport * from './InputText';\nexport * from './Modal';\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/components/index.js"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './Button';\nexport * from './Calendar';\nexport * from './Form';\nexport * from './InputNumber';\nexport * from './InputSelect';\nexport * from './InputText';\nexport * from './Modal';\n"],"file":"index.js"}

package/build/primitives/Input/Input.module.css

@@ -1,8 +1,3 @@
-:root {
-  --mirai-ui-input-font: var(--mirai-ui-font);
-  --mirai-ui-input-font-size: var(--mirai-ui-font-size-paragraph);
-}
-
 .input {
   background-color: var(--mirai-ui-base);
   border: none;

package/build/primitives/Select/Select.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Select = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _helpers = require("../../helpers");
+
+var _SelectModule = _interopRequireDefault(require("./Select.module.css"));
+
+var _excluded = ["disabled", "emptyOption", "options", "value", "onChange", "onEnter", "onError", "onLeave"];
+var EMPTY = '';
+
+var Select = function Select(_ref) {
+  var disabled = _ref.disabled,
+      emptyOption = _ref.emptyOption,
+      _ref$options = _ref.options,
+      options = _ref$options === void 0 ? [] : _ref$options,
+      value = _ref.value,
+      onChange = _ref.onChange,
+      onEnter = _ref.onEnter,
+      onError = _ref.onError,
+      onLeave = _ref.onLeave,
+      others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  (0, _react.useEffect)(function () {
+    var errors = (0, _helpers.getInputErrors)((0, _objectSpread2.default)({}, others));
+    if (errors && onError) onError(errors); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  var handleChange = function handleChange(value, event) {
+    onError && onError((0, _helpers.getInputErrors)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, others), {}, {
+      value: value
+    })));
+    onChange && onChange(value, event);
+  };
+
+  return /*#__PURE__*/_react.default.createElement('select', (0, _objectSpread2.default)((0, _objectSpread2.default)({}, others), {}, {
+    disabled: disabled,
+    value: value,
+    className: (0, _helpers.styles)(_SelectModule.default.select, value === EMPTY && _SelectModule.default.empty, others.className)
+  }, !disabled ? {
+    onChange: function onChange(event) {
+      return handleChange(event.target.value, event);
+    },
+    onFocus: onEnter,
+    onBlur: onLeave
+  } : {}), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, emptyOption && /*#__PURE__*/_react.default.createElement("option", {
+    value: EMPTY
+  }, emptyOption), options.map(function (option) {
+    return /*#__PURE__*/_react.default.createElement("option", {
+      svalue: option,
+      key: option
+    }, option);
+  })));
+};
+
+exports.Select = Select;
+Select.displayName = 'Primitive:Input';
+//# sourceMappingURL=Select.js.map

package/build/primitives/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/primitives/Select/Select.jsx"],"names":["EMPTY","Select","disabled","emptyOption","options","value","onChange","onEnter","onError","onLeave","others","errors","handleChange","event","React","createElement","className","style","select","empty","target","onFocus","onBlur","map","option","displayName"],"mappings":";;;;;;;;;;;;;;;AACA;;AAEA;;AACA;;;AAEA,IAAMA,KAAK,GAAG,EAAd;;AAEA,IAAMC,MAAM,GAAG,SAATA,MAAS,OAAoG;AAAA,MAAjGC,QAAiG,QAAjGA,QAAiG;AAAA,MAAvFC,WAAuF,QAAvFA,WAAuF;AAAA,0BAA1EC,OAA0E;AAAA,MAA1EA,OAA0E,6BAAhE,EAAgE;AAAA,MAA5DC,KAA4D,QAA5DA,KAA4D;AAAA,MAArDC,QAAqD,QAArDA,QAAqD;AAAA,MAA3CC,OAA2C,QAA3CA,OAA2C;AAAA,MAAlCC,OAAkC,QAAlCA,OAAkC;AAAA,MAAzBC,OAAyB,QAAzBA,OAAyB;AAAA,MAAbC,MAAa;AACjH,wBAAU,YAAM;AACd,QAAMC,MAAM,GAAG,6DAAoBD,MAApB,EAAf;AACA,QAAIC,MAAM,IAAIH,OAAd,EAAuBA,OAAO,CAACG,MAAD,CAAP,CAFT,CAGd;AACD,GAJD,EAIG,EAJH;;AAMA,MAAMC,YAAY,GAAG,SAAfA,YAAe,CAACP,KAAD,EAAQQ,KAAR,EAAkB;AACrCL,IAAAA,OAAO,IAAIA,OAAO,CAAC,yFAAoBE,MAApB;AAA4BL,MAAAA,KAAK,EAALA;AAA5B,OAAD,CAAlB;AACAC,IAAAA,QAAQ,IAAIA,QAAQ,CAACD,KAAD,EAAQQ,KAAR,CAApB;AACD,GAHD;;AAKA,sBAAOC,eAAMC,aAAN,CACL,QADK,8DAGAL,MAHA;AAIHR,IAAAA,QAAQ,EAARA,QAJG;AAKHG,IAAAA,KAAK,EAALA,KALG;AAMHW,IAAAA,SAAS,EAAE,qBAAOC,sBAAMC,MAAb,EAAqBb,KAAK,KAAKL,KAAV,IAAmBiB,sBAAME,KAA9C,EAAqDT,MAAM,CAACM,SAA5D;AANR,KAOC,CAACd,QAAD,GACA;AACEI,IAAAA,QAAQ,EAAE,kBAACO,KAAD;AAAA,aAAWD,YAAY,CAACC,KAAK,CAACO,MAAN,CAAaf,KAAd,EAAqBQ,KAArB,CAAvB;AAAA,KADZ;AAEEQ,IAAAA,OAAO,EAAEd,OAFX;AAGEe,IAAAA,MAAM,EAAEb;AAHV,GADA,GAMA,EAbD,gBAeL,4DACGN,WAAW,iBAAI;AAAQ,IAAA,KAAK,EAAEH;AAAf,KAAuBG,WAAvB,CADlB,EAEGC,OAAO,CAACmB,GAAR,CAAY,UAACC,MAAD;AAAA,wBACX;AAAQ,MAAA,MAAM,EAAEA,MAAhB;AAAwB,MAAA,GAAG,EAAEA;AAA7B,OACGA,MADH,CADW;AAAA,GAAZ,CAFH,CAfK,CAAP;AAwBD,CApCD;;;AAsCAvB,MAAM,CAACwB,WAAP,GAAqB,iBAArB","sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect } from 'react';\n\nimport { getInputErrors, styles } from '../../helpers';\nimport style from './Select.module.css';\n\nconst EMPTY = '';\n\nconst Select = ({ disabled, emptyOption, options = [], value, onChange, onEnter, onError, onLeave, ...others }) => {\n  useEffect(() => {\n    const errors = getInputErrors({ ...others });\n    if (errors && onError) onError(errors);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const handleChange = (value, event) => {\n    onError && onError(getInputErrors({ ...others, value }));\n    onChange && onChange(value, event);\n  };\n\n  return React.createElement(\n    'select',\n    {\n      ...others,\n      disabled,\n      value,\n      className: styles(style.select, value === EMPTY && style.empty, others.className),\n      ...(!disabled\n        ? {\n            onChange: (event) => handleChange(event.target.value, event),\n            onFocus: onEnter,\n            onBlur: onLeave,\n          }\n        : {}),\n    },\n    <>\n      {emptyOption && <option value={EMPTY}>{emptyOption}</option>}\n      {options.map((option) => (\n        <option svalue={option} key={option}>\n          {option}\n        </option>\n      ))}\n    </>,\n  );\n};\n\nSelect.displayName = 'Primitive:Input';\n\nSelect.propTypes = {\n  disabled: PropTypes.bool,\n  emptyOption: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  options: PropTypes.arrayOf(PropTypes.string),\n  value: PropTypes.string,\n  onChange: PropTypes.func,\n  onEnter: PropTypes.func,\n  onError: PropTypes.func,\n  onLeave: PropTypes.func,\n};\n\nexport { Select };\n"],"file":"Select.js"}

package/build/primitives/Select/Select.module.css

@@ -0,0 +1,24 @@
+.select {
+  background-color: var(--mirai-ui-base);
+  border: none;
+  box-sizing: border-box;
+  color: var(--mirai-ui-content);
+  font-family: var(--mirai-ui-input-font);
+  font-size: var(--mirai-ui-input-font-size);
+  width: 100%;
+  margin: 0;
+  outline: none;
+  user-select: none;
+
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+.select.empty {
+  color: var(--mirai-ui-lighten);
+}
+
+.select:disabled {
+  /* background-color: transparent; */
+  color: var(--mirai-ui-lighten);
+}

package/build/primitives/Select/__tests__/__snapshots__/Select.test.js.snap

@@ -0,0 +1,178 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`primitive:<Select> inherit:className 1`] = `
+<DocumentFragment>
+  <select
+    class="select mirai"
+    name="name"
+  >
+    <option
+      svalue="one"
+    >
+      one
+    </option>
+    <option
+      svalue="two"
+    >
+      two
+    </option>
+    <option
+      svalue="three"
+    >
+      three
+    </option>
+    <option
+      svalue="four"
+    >
+      four
+    </option>
+    <option
+      svalue="five"
+    >
+      five
+    </option>
+  </select>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Select> prop:disabled 1`] = `
+<DocumentFragment>
+  <select
+    class="select"
+    disabled=""
+    name="name"
+  >
+    <option
+      svalue="one"
+    >
+      one
+    </option>
+    <option
+      svalue="two"
+    >
+      two
+    </option>
+    <option
+      svalue="three"
+    >
+      three
+    </option>
+    <option
+      svalue="four"
+    >
+      four
+    </option>
+    <option
+      svalue="five"
+    >
+      five
+    </option>
+  </select>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Select> prop:value 1`] = `
+<DocumentFragment>
+  <select
+    class="select"
+    name="name"
+  >
+    <option
+      svalue="one"
+    >
+      one
+    </option>
+    <option
+      svalue="two"
+    >
+      two
+    </option>
+    <option
+      svalue="three"
+    >
+      three
+    </option>
+    <option
+      svalue="four"
+    >
+      four
+    </option>
+    <option
+      svalue="five"
+    >
+      five
+    </option>
+  </select>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Select> renders 1`] = `
+<DocumentFragment>
+  <select
+    class="select"
+    name="name"
+  >
+    <option
+      svalue="one"
+    >
+      one
+    </option>
+    <option
+      svalue="two"
+    >
+      two
+    </option>
+    <option
+      svalue="three"
+    >
+      three
+    </option>
+    <option
+      svalue="four"
+    >
+      four
+    </option>
+    <option
+      svalue="five"
+    >
+      five
+    </option>
+  </select>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Select> testID 1`] = `
+<DocumentFragment>
+  <select
+    class="select"
+    data-testid="mirai"
+    name="name"
+  >
+    <option
+      svalue="one"
+    >
+      one
+    </option>
+    <option
+      svalue="two"
+    >
+      two
+    </option>
+    <option
+      svalue="three"
+    >
+      three
+    </option>
+    <option
+      svalue="four"
+    >
+      four
+    </option>
+    <option
+      svalue="five"
+    >
+      five
+    </option>
+  </select>
+</DocumentFragment>
+`;

package/build/primitives/Select/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Select = require("./Select");
+
+Object.keys(_Select).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Select[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Select[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/build/primitives/Select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/primitives/Select/index.js"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './Select';\n"],"file":"index.js"}

package/build/primitives/index.js

@@ -43,6 +43,19 @@ Object.keys(_Pressable).forEach(function (key) {
   });
 });
 
+var _Select = require("./Select");
+
+Object.keys(_Select).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Select[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Select[key];
+    }
+  });
+});
+
 var _View = require("./View");
 
 Object.keys(_View).forEach(function (key) {

package/build/primitives/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/primitives/index.js"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './Icon';\nexport * from './Input';\nexport * from './Pressable';\nexport * from './View';\nexport * from './ScrollView';\nexport * from './Text';\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/primitives/index.js"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './Icon';\nexport * from './Input';\nexport * from './Pressable';\nexport * from './Select';\nexport * from './View';\nexport * from './ScrollView';\nexport * from './Text';\n"],"file":"index.js"}

package/build/theme/default.theme.css

@@ -1,7 +1,7 @@
 :root {
   /* typography */
   --mirai-ui-font: Helvetica;
-  --mirai-ui-input-font: Helvetica,
+  --mirai-ui-input-font: Helvetica;
   --mirai-ui-font-weight: 400;
   --mirai-ui-font-bold: Helvetica;
   --mirai-ui-font-bold-weight: 700;
@@ -9,6 +9,7 @@
   --mirai-ui-font-size-paragraph: 16px;
   --mirai-ui-font-size-action: 15px;
   --mirai-ui-font-size-small: 11px;
+  --mirai-ui-input-font-size: 16px;
   --mirai-ui-text-direction: ltr;
 
   /* palette */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirai/ui",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "repository": "git@gitlab.com:miraicorp/dev/frontend/ui.git",
   "author": "JΛVI <hello@soyjavi.com>",
   "license": "MIT",