@yakad/ui 1.2.104-beta → 1.2.106-beta

package/inputField/inputField.js

@@ -2,9 +2,11 @@ import React from "react";
 import { joinClassNames } from "@yakad/lib";
 import styles from "./inputField.module.css";
 export default function InputField(props) {
-    const joinedClassNames = joinClassNames(styles.input, props.variant ? styles[props.variant] : styles.standard, props.className);
+    const joinedClassNames = joinClassNames(styles.input, props.variant ? styles[props.variant] : styles.outlined, 
+    // Default style must be standard. but standard input is not designed in css
+    props.className);
     return (React.createElement("label", { className: styles.label },
-        React.createElement("input", { ...props, name: props.name, disabled: props.disabled, placeholder: "  ", type: props.type, value: props.value, className: joinedClassNames, autoFocus: props.autoFocus }),
+        React.createElement("input", { ...props, name: props.name, disabled: props.disabled, placeholder: "  ", className: joinedClassNames, type: props.type, value: props.value, autoFocus: props.autoFocus }),
         React.createElement("span", { className: styles.span }, props.placeholder)));
 }
 //# sourceMappingURL=inputField.js.map

package/inputField/inputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"inputField.js","sourceRoot":"","sources":["inputField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAc7C,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAsB;IACrD,MAAM,gBAAgB,GAAG,cAAc,CACnC,MAAM,CAAC,KAAK,EACZ,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,EACvD,KAAK,CAAC,SAAU,CACnB,CAAC;IAEF,OAAO,CACH,+BAAO,SAAS,EAAE,MAAM,CAAC,KAAK;QAC1B,kCACQ,KAAK,EACT,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,WAAW,EAAC,IAAI,EAChB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,SAAS,EAAE,gBAAgB,EAC3B,SAAS,EAAE,KAAK,CAAC,SAAS,GAC5B;QACF,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI,IAAG,KAAK,CAAC,WAAW,CAAQ,CACpD,CACX,CAAC;AACN,CAAC"}
+{"version":3,"file":"inputField.js","sourceRoot":"","sources":["inputField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAc7C,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAsB;IACrD,MAAM,gBAAgB,GAAG,cAAc,CACnC,MAAM,CAAC,KAAK,EACZ,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ;IACvD,4EAA4E;IAC5E,KAAK,CAAC,SAAU,CACnB,CAAC;IAEF,OAAO,CACH,+BAAO,SAAS,EAAE,MAAM,CAAC,KAAK;QAC1B,kCACQ,KAAK,EACT,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,WAAW,EAAC,IAAI,EAChB,SAAS,EAAE,gBAAgB,EAC3B,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,SAAS,EAAE,KAAK,CAAC,SAAS,GAC5B;QACF,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI,IAAG,KAAK,CAAC,WAAW,CAAQ,CACpD,CACX,CAAC;AACN,CAAC"}

package/inputField/inputField.module.css

@@ -1,21 +1,23 @@
 .label {
-    padding-top: 0.6rem;
-    font-size: 1.3rem;
     position: relative;
     display: inline-block;
+    box-sizing: border-box;
+    width: 100%;
+    padding-top: 0.6rem;
+    font-size: 1.3rem;
     overflow: hidden;
 }
 .input {
     box-sizing: border-box;
-    margin: 0rem;
-    border-image: initial;
     width: 100%;
     height: inherit;
-    color: rgb(var(--onSurfaceColor, 28 27 31) / 0.87);
+    margin: 0rem;
+    border-image: initial;
     box-shadow: none;
     font-family: inherit;
     font-size: inherit;
     line-height: inherit;
+    color: rgb(var(--onSurfaceColor, 28 27 31) / 0.87);
     caret-color: rgb(var(--primaryColor, 11 87 208));
 }
 .input.outlined {

package/inputField/inputField.tsx

@@ -17,7 +17,8 @@ export interface InputFieldProps
 export default function InputField(props: InputFieldProps) {
     const joinedClassNames = joinClassNames(
         styles.input,
-        props.variant ? styles[props.variant] : styles.standard,
+        props.variant ? styles[props.variant] : styles.outlined,
+        // Default style must be standard. but standard input is not designed in css
         props.className!
     );
 
@@ -28,9 +29,9 @@ export default function InputField(props: InputFieldProps) {
                 name={props.name}
                 disabled={props.disabled}
                 placeholder="  "
+                className={joinedClassNames}
                 type={props.type}
                 value={props.value}
-                className={joinedClassNames}
                 autoFocus={props.autoFocus}
             />
             <span className={styles.span}>{props.placeholder}</span>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yakad/ui",
-    "version": "1.2.104-beta",
+    "version": "1.2.106-beta",
     "description": "UI components for NextJS/React",
     "main": "./src/index.js",
     "scripts": {