@mirai/ui 1.0.1 → 1.0.4

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","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"],"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  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"],"file":"InputText.js"}

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

@@ -2,43 +2,61 @@
   --mirai-ui-input-field-border: solid 1px var(--mirai-ui-lighten);
   --mirai-ui-input-field-focus: var(--mirai-ui-accent);
   --mirai-ui-input-field-padding-x: var(--mirai-ui-space-S);
-  --mirai-ui-input-field-padding-y: var(--mirai-ui-space-M);
+  --mirai-ui-input-field-padding-y: var(--mirai-ui-space-S);
   --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);
+}
+
+.inputBorder.error {
+  border-color: var(--mirai-ui-error);
+}
+
+.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.iconLeft {
+  padding-left: calc(var(--mirai-ui-input-field-padding-x) * 3);
+}
+
 .input::placeholder {
   color: var(--mirai-ui-base);
 }
 
-.input.error {
-  border-color: var(--mirai-ui-error);
+.hint {
+  margin: calc(var(--mirai-ui-input-field-padding-x) / 4) var(--mirai-ui-input-field-padding-x);
 }
 
-.input:not(.error):focus {
-  border-color: var(--mirai-ui-input-field-focus);
+.icon {
+  color: var(--mirai-ui-lighten);
+  pointer-events: none;
+  position: absolute;
 }
 
-.text {
-  color: var(--mirai-ui-lighten);
+.pressable {
+  position: absolute;
+  right: var(--mirai-ui-input-field-padding-x);
 }
 
-.text.focus {
-  color: var(--mirai-ui-input-field-focus);
+.icon.left {
+  left: var(--mirai-ui-input-field-padding-x);
 }
 
-.text.error {
-  color: var(--mirai-ui-error);
+.icon.right {
+  right: var(--mirai-ui-input-field-padding-x);
 }
 
 .label {
@@ -50,6 +68,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 +76,14 @@
   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);
+.text {
+  color: var(--mirai-ui-lighten);
 }
 
-.hint {
-  margin: calc(var(--mirai-ui-input-field-padding-x) / 4) var(--mirai-ui-input-field-padding-x);
+.text.focus {
+  color: var(--mirai-ui-input-field-focus);
+}
+
+.text.error {
+  color: var(--mirai-ui-error);
 }

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"
@@ -82,10 +82,53 @@ exports[`component:<InputText> prop:hint 1`] = `
 </DocumentFragment>
 `;
 
+exports[`component:<InputText> prop:icon 1`] = `
+<DocumentFragment>
+  <div
+    class="view inputContainer"
+  >
+    <div
+      class="view row inputBorder"
+    >
+      <span
+        class="icon icon left"
+      >
+        <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"
+        >
+          <path
+            d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
+          />
+          <circle
+            cx="12"
+            cy="12"
+            r="3"
+          />
+        </svg>
+      </span>
+      <input
+        class="input input iconLeft"
+        name="name"
+        type="text"
+        value=""
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`component:<InputText> prop:label 1`] = `
 <DocumentFragment>
   <div
-    class="view inputText"
+    class="view inputContainer"
   >
     <span
       class="text paragraph text label"
@@ -93,7 +136,7 @@ exports[`component:<InputText> prop:label 1`] = `
       label
     </span>
     <div
-      class="view content"
+      class="view row inputBorder"
     >
       <input
         class="input input"
@@ -109,10 +152,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 +170,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"
@@ -175,10 +218,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 +237,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/Pressable/Pressable.js

@@ -33,7 +33,7 @@ var Pressable = function Pressable(_ref) {
       others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(tag, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, others), {}, {
     disabled: disabled,
-    className: (0, _helpers.styles)(_PressableModule.default.pressable, disabled && _PressableModule.default.disabled, others.className)
+    className: (0, _helpers.styles)(_PressableModule.default.pressable, others.className)
   }, !disabled ? {
     onClick: onPress,
     onKeyPress: function onKeyPress(_ref2) {

package/build/primitives/Pressable/Pressable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/primitives/Pressable/Pressable.jsx"],"names":["Pressable","children","disabled","tag","onEnter","onLeave","onPress","others","React","createElement","className","style","pressable","onClick","onKeyPress","keyCode","KEY_ENTER","undefined","onMouseEnter","onMouseLeave","displayName"],"mappings":";;;;;;;;;;;;;AACA;;AAEA;;AACA;;AACA;;;;AAEA,IAAMA,SAAS,GAAG,SAAZA,SAAY;AAAA,MAAGC,QAAH,QAAGA,QAAH;AAAA,MAAaC,QAAb,QAAaA,QAAb;AAAA,sBAAuBC,GAAvB;AAAA,MAAuBA,GAAvB,yBAA6B,QAA7B;AAAA,MAAuCC,OAAvC,QAAuCA,OAAvC;AAAA,MAAgDC,OAAhD,QAAgDA,OAAhD;AAAA,0BAAyDC,OAAzD;AAAA,MAAyDA,OAAzD,6BAAmE,YAAM,CAAE,CAA3E;AAAA,MAAgFC,MAAhF;AAAA,sBAChBC,eAAMC,aAAN,CACEN,GADF,8DAGOI,MAHP;AAIIL,IAAAA,QAAQ,EAARA,QAJJ;AAKIQ,IAAAA,SAAS,EAAE,qBAAOC,yBAAMC,SAAb,EAAwBV,QAAQ,IAAIS,yBAAMT,QAA1C,EAAoDK,MAAM,CAACG,SAA3D;AALf,KAMQ,CAACR,QAAD,GACA;AACEW,IAAAA,OAAO,EAAEP,OADX;AAEEQ,IAAAA,UAAU,EAAE;AAAA,UAAGC,OAAH,SAAGA,OAAH;AAAA,aAAkBA,OAAO,KAAKC,oBAAZ,GAAwBV,OAAO,EAA/B,GAAoCW,SAAtD;AAAA,KAFd;AAGEC,IAAAA,YAAY,EAAEd,OAHhB;AAIEe,IAAAA,YAAY,EAAEd;AAJhB,GADA,GAOA,EAbR,GAeEJ,QAfF,CADgB;AAAA,CAAlB;;;AAmBAD,SAAS,CAACoB,WAAV,GAAwB,qBAAxB","sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { KEY_ENTER } from './Pressable.constants';\nimport style from './Pressable.module.css';\n\nconst Pressable = ({ children, disabled, tag = 'button', onEnter, onLeave, onPress = () => {}, ...others }) =>\n  React.createElement(\n    tag,\n    {\n      ...others,\n      disabled,\n      className: styles(style.pressable, disabled && style.disabled, others.className),\n      ...(!disabled\n        ? {\n            onClick: onPress,\n            onKeyPress: ({ keyCode }) => (keyCode === KEY_ENTER ? onPress() : undefined),\n            onMouseEnter: onEnter,\n            onMouseLeave: onLeave,\n          }\n        : {}),\n    },\n    children,\n  );\n\nPressable.displayName = 'Primitive:Pressable';\n\nPressable.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  disabled: PropTypes.bool,\n  tag: PropTypes.string,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n  onPress: PropTypes.func,\n};\n\nexport { Pressable };\n"],"file":"Pressable.js"}
+{"version":3,"sources":["../../../src/primitives/Pressable/Pressable.jsx"],"names":["Pressable","children","disabled","tag","onEnter","onLeave","onPress","others","React","createElement","className","style","pressable","onClick","onKeyPress","keyCode","KEY_ENTER","undefined","onMouseEnter","onMouseLeave","displayName"],"mappings":";;;;;;;;;;;;;AACA;;AAEA;;AACA;;AACA;;;;AAEA,IAAMA,SAAS,GAAG,SAAZA,SAAY;AAAA,MAAGC,QAAH,QAAGA,QAAH;AAAA,MAAaC,QAAb,QAAaA,QAAb;AAAA,sBAAuBC,GAAvB;AAAA,MAAuBA,GAAvB,yBAA6B,QAA7B;AAAA,MAAuCC,OAAvC,QAAuCA,OAAvC;AAAA,MAAgDC,OAAhD,QAAgDA,OAAhD;AAAA,0BAAyDC,OAAzD;AAAA,MAAyDA,OAAzD,6BAAmE,YAAM,CAAE,CAA3E;AAAA,MAAgFC,MAAhF;AAAA,sBAChBC,eAAMC,aAAN,CACEN,GADF,8DAGOI,MAHP;AAIIL,IAAAA,QAAQ,EAARA,QAJJ;AAKIQ,IAAAA,SAAS,EAAE,qBAAOC,yBAAMC,SAAb,EAAwBL,MAAM,CAACG,SAA/B;AALf,KAMQ,CAACR,QAAD,GACA;AACEW,IAAAA,OAAO,EAAEP,OADX;AAEEQ,IAAAA,UAAU,EAAE;AAAA,UAAGC,OAAH,SAAGA,OAAH;AAAA,aAAkBA,OAAO,KAAKC,oBAAZ,GAAwBV,OAAO,EAA/B,GAAoCW,SAAtD;AAAA,KAFd;AAGEC,IAAAA,YAAY,EAAEd,OAHhB;AAIEe,IAAAA,YAAY,EAAEd;AAJhB,GADA,GAOA,EAbR,GAeEJ,QAfF,CADgB;AAAA,CAAlB;;;AAmBAD,SAAS,CAACoB,WAAV,GAAwB,qBAAxB","sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { KEY_ENTER } from './Pressable.constants';\nimport style from './Pressable.module.css';\n\nconst Pressable = ({ children, disabled, tag = 'button', onEnter, onLeave, onPress = () => {}, ...others }) =>\n  React.createElement(\n    tag,\n    {\n      ...others,\n      disabled,\n      className: styles(style.pressable, others.className),\n      ...(!disabled\n        ? {\n            onClick: onPress,\n            onKeyPress: ({ keyCode }) => (keyCode === KEY_ENTER ? onPress() : undefined),\n            onMouseEnter: onEnter,\n            onMouseLeave: onLeave,\n          }\n        : {}),\n    },\n    children,\n  );\n\nPressable.displayName = 'Primitive:Pressable';\n\nPressable.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  disabled: PropTypes.bool,\n  tag: PropTypes.string,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n  onPress: PropTypes.func,\n};\n\nexport { Pressable };\n"],"file":"Pressable.js"}

package/build/primitives/Pressable/Pressable.module.css

@@ -12,7 +12,7 @@
   width: fit-content;
 }
 
-.disabled {
+.pressable:disabled {
   cursor: unset;
   outline: none;
 }

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

@@ -13,7 +13,7 @@ exports[`primitive:<Pressable> inherit:className 1`] = `
 exports[`primitive:<Pressable> prop:disabled 1`] = `
 <DocumentFragment>
   <button
-    class="pressable disabled"
+    class="pressable"
     disabled=""
   >
     children

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>
+`;