@yakad/ui 1.2.13 → 1.2.15-beta

package/codeField/codeField.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface CodeFieldsProps extends React.HTMLAttributes<HTMLElement> {
+    length?: number;
+}
+declare function CodeField(props: CodeFieldsProps): JSX.Element;
+export default CodeField;

package/codeField/codeField.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { joinClassNames, joinStyles } from "@yakad/lib";
+import styles from "./codeField.module.css";
+function CodeField(props) {
+    const joinedClassNames = joinClassNames(styles.input, props.className);
+    const joinedStyles = joinStyles({ width: "calc(1.5ch * " + props.length + ")" }, props.style);
+    return (React.createElement("input", { minLength: props.length, maxLength: props.length, className: joinedClassNames, style: joinedStyles }));
+}
+export default CodeField;
+//# sourceMappingURL=codeField.js.map

package/codeField/codeField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"codeField.js","sourceRoot":"","sources":["codeField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAM5C,SAAS,SAAS,CAAC,KAAsB;IACrC,MAAM,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,SAAU,CAAC,CAAC;IAExE,MAAM,YAAY,GAAG,UAAU,CAC3B,EAAE,KAAK,EAAE,eAAe,GAAG,KAAK,CAAC,MAAM,GAAG,GAAG,EAAE,EAC/C,KAAK,CAAC,KAAM,CACf,CAAC;IAEF,OAAO,CACH,+BACI,SAAS,EAAE,KAAK,CAAC,MAAM,EACvB,SAAS,EAAE,KAAK,CAAC,MAAM,EACvB,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,YAAY,GACrB,CACL,CAAC;AACN,CAAC;AAED,eAAe,SAAS,CAAC"}

package/codeField/codeField.module.css

@@ -0,0 +1,23 @@
+.input {
+    box-sizing: border-box;
+    display: block;
+    border: none;
+    padding: 0;
+    margin: 0;
+    margin-left: 0.5ch;
+    background: repeating-linear-gradient(
+            90deg,
+            #7d7d7d 0,
+            #7d7d7d 1ch,
+            transparent 0,
+            transparent 1.5ch
+        )
+        0 100%/100% 0.2rem no-repeat;
+    color: transparent;
+    text-shadow: 0 0 0 var(--onSurfaceColor);
+    font: 5ch consolas, monospace;
+    letter-spacing: 0.5ch;
+}
+.input:focus {
+    outline: none;
+}

package/codeField/codeField.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { joinClassNames, joinStyles } from "@yakad/lib";
+import styles from "./codeField.module.css";
+
+interface CodeFieldsProps extends React.HTMLAttributes<HTMLElement> {
+    length?: number;
+}
+
+function CodeField(props: CodeFieldsProps) {
+    const joinedClassNames = joinClassNames(styles.input, props.className!);
+
+    const joinedStyles = joinStyles(
+        { width: "calc(1.5ch * " + props.length + ")" },
+        props.style!
+    );
+
+    return (
+        <input
+            minLength={props.length}
+            maxLength={props.length}
+            className={joinedClassNames}
+            style={joinedStyles}
+        />
+    );
+}
+
+export default CodeField;

package/index.tsx

@@ -17,7 +17,8 @@ import Spacer from "./spacer/spacer";
 import Stack from "./stack/stack";
 import SvgIcon from "./svgIcon/svgIcon";
 import Loading from "./loading/loading";
-
+import CodeField from "./codeField/codeField";
+import InputField from "./inputField/inputField";
 export {
     Button,
     AppBar,
@@ -38,4 +39,6 @@ export {
     Spacer,
     SvgIcon,
     Loading,
+    CodeField,
+    InputField,
 };

package/inputField/inputField.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface InputFieldProps extends React.HTMLAttributes<HTMLInputElement> {
+    variant?: "standard" | "outlined" | "filled";
+    type?: string;
+    placeholder?: string;
+    disabled?: boolean;
+}
+declare function InputField(props: InputFieldProps): JSX.Element;
+export default InputField;

package/inputField/inputField.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { joinClassNames } from "@yakad/lib";
+import styles from "./inputField.module.css";
+function InputField(props) {
+    const joinedClassNames = joinClassNames(styles.input, props.variant ? styles[props.variant] : styles.standard, props.className);
+    return (React.createElement("label", { className: styles.field },
+        React.createElement("input", { disabled: props.disabled, placeholder: "\u00A0", type: props.type, className: joinedClassNames }),
+        React.createElement("span", { className: styles.placeholder }, props.placeholder)));
+}
+export default InputField;
+//# sourceMappingURL=inputField.js.map

package/inputField/inputField.js.map

@@ -0,0 +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;AAS7C,SAAS,UAAU,CAAC,KAAsB;IACtC,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,+BACI,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,WAAW,EAAC,QAAQ,EACpB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,SAAS,EAAE,gBAAgB,GAC7B;QACF,8BAAM,SAAS,EAAE,MAAM,CAAC,WAAW,IAAG,KAAK,CAAC,WAAW,CAAQ,CAC3D,CACX,CAAC;AACN,CAAC;AAED,eAAe,UAAU,CAAC"}

package/inputField/inputField.module.css

@@ -0,0 +1,78 @@
+.field {
+    position: relative;
+}
+.placeholder {
+    position: absolute;
+    top: 0rem;
+    left: 1.2rem;
+    transform: translateY(-50%);
+    font-size: 1rem;
+    color: var(--onBackgroundColor);
+    transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;
+}
+.input:placeholder-shown + .placeholder {
+    top: 50%;
+    font-size: 1.4rem;
+    color: #7d7d7d;
+}
+.input:focus + .placeholder {
+    top: 0rem;
+    font-size: 1rem;
+    color: var(--onBackgroundColor);
+}
+
+.input {
+    width: 100%;
+    padding: 1.2rem;
+    border: none;
+    outline: none;
+    transition: border-color 0.3 ease;
+    box-sizing: border-box;
+    color: var(--onBackgroundColor);
+    -webkit-appearance: none;
+    -ms-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+}
+.input::after {
+    font-size: 1.4rem;
+    display: block;
+    background-color: red;
+    content: "Hello";
+    z-index: 10;
+}
+
+.input.standard {
+    border-radius: 0.3rem 0.3rem 0 0;
+    border-bottom: 0.2rem solid #7d7d7d;
+    background-color: #7d7d7d10;
+}
+.input.standard:valid,
+.input.standard:focus {
+    border-color: var(--primaryColor);
+}
+
+.input.outlined {
+    border-radius: 0.5rem;
+    border: 0.2rem solid #ddd;
+    background: none;
+}
+.input.outlined + .placeholder {
+    padding: 0 0.5rem;
+}
+
+.input.outlined:valid,
+.input.outlined:focus + .placeholder {
+    border-color: var(--onBackgroundColor);
+    background: var(--surfaceColor);
+}
+
+.input.filled {
+    border-radius: 0.5rem;
+    background-color: #7d7d7d10;
+    box-shadow: none;
+}
+
+.input:invalid {
+    border-color: var(--errorColor);
+}

package/inputField/inputField.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { joinClassNames } from "@yakad/lib";
+import styles from "./inputField.module.css";
+
+interface InputFieldProps extends React.HTMLAttributes<HTMLInputElement> {
+    variant?: "standard" | "outlined" | "filled";
+    type?: string;
+    placeholder?: string;
+    disabled?: boolean;
+}
+
+function InputField(props: InputFieldProps) {
+    const joinedClassNames = joinClassNames(
+        styles.input,
+        props.variant ? styles[props.variant] : styles.standard,
+        props.className!
+    );
+
+    return (
+        <label className={styles.field}>
+            <input
+                disabled={props.disabled}
+                placeholder="&nbsp;"
+                type={props.type}
+                className={joinedClassNames}
+            />
+            <span className={styles.placeholder}>{props.placeholder}</span>
+        </label>
+    );
+}
+
+export default InputField;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yakad/ui",
-    "version": "1.2.13",
+    "version": "1.2.15-beta",
     "description": "",
     "main": "./src/index.js",
     "scripts": {