@yakad/ui 1.2.109-beta → 1.2.110-beta

package/checkbox/checkbox.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface CheckboxProps extends React.HTMLAttributes<HTMLInputElement> {
+    name?: string;
+    label?: string;
+    disabled?: boolean;
+}
+export default function Chekbox(props: CheckboxProps): JSX.Element;

package/checkbox/checkbox.js

@@ -0,0 +1,18 @@
+"use client";
+import React from "react";
+import Button from "../button/button";
+import styles from "./checkbox.module.css";
+import { joinClassNames } from "@yakad/lib";
+export default function Chekbox(props) {
+    const joinedClassNames = joinClassNames(styles.checkbox, props.label ? styles.labeled : "");
+    const [checked, setChecked] = React.useState();
+    const onChangeCheckboxHandler = (event) => {
+        const targetInputElement = event.target;
+        setChecked(targetInputElement.checked);
+    };
+    return (React.createElement("div", { className: joinedClassNames },
+        props.label ? (React.createElement("label", { className: styles.label, htmlFor: props.name }, props.label)) : null,
+        React.createElement(Button, { disabled: props.disabled, icon: checked ? "check_box" : "check_box_outline_blank" }),
+        React.createElement("input", { ...props, className: styles.input, type: "checkbox", name: props.name, disabled: props.disabled, onChange: (event) => onChangeCheckboxHandler(event) })));
+}
+//# sourceMappingURL=checkbox.js.map

package/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["checkbox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAQ5C,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAoB;IAChD,MAAM,gBAAgB,GAAG,cAAc,CACnC,MAAM,CAAC,QAAQ,EACf,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CACpC,CAAC;IAEF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAW,CAAC;IACxD,MAAM,uBAAuB,GAAG,CAC5B,KAAwC,EAC1C,EAAE;QACA,MAAM,kBAAkB,GAAG,KAAK,CAAC,MAA0B,CAAC;QAC5D,UAAU,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;IAC3C,CAAC,CAAC;IAEF,OAAO,CACH,6BAAK,SAAS,EAAE,gBAAgB;QAC3B,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CACX,+BAAO,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,IAAI,IAC9C,KAAK,CAAC,KAAK,CACR,CACX,CAAC,CAAC,CAAC,IAAI;QACR,oBAAC,MAAM,IACH,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,yBAAyB,GACzD;QACF,kCACQ,KAAK,EACT,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,uBAAuB,CAAC,KAAK,CAAC,GACrD,CACA,CACT,CAAC;AACN,CAAC"}

package/checkbox/checkbox.module.css

@@ -0,0 +1,27 @@
+.checkbox {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  width: 4rem;
+  height: 4rem;
+}
+.checkbox.labeled {
+  width: 100%;
+}
+
+.input {
+  position: absolute;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+
+.label {
+  display: block;
+  width: auto;
+  margin: 0.9rem 1rem;
+  margin-inline-end: auto;
+  line-height: 2.2rem;
+  font-size: 1.4rem;
+}

package/checkbox/checkbox.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import React, { useState } from "react";
+import Button from "../button/button";
+import styles from "./checkbox.module.css";
+import { joinClassNames } from "@yakad/lib";
+
+export interface CheckboxProps extends React.HTMLAttributes<HTMLInputElement> {
+    name?: string;
+    label?: string;
+    disabled?: boolean;
+}
+
+export default function Chekbox(props: CheckboxProps) {
+    const joinedClassNames = joinClassNames(
+        styles.checkbox,
+        props.label ? styles.labeled : ""
+    );
+
+    const [checked, setChecked] = React.useState<boolean>();
+    const onChangeCheckboxHandler = (
+        event: React.FormEvent<HTMLInputElement>
+    ) => {
+        const targetInputElement = event.target as HTMLInputElement;
+        setChecked(targetInputElement.checked);
+    };
+
+    return (
+        <div className={joinedClassNames}>
+            {props.label ? (
+                <label className={styles.label} htmlFor={props.name}>
+                    {props.label}
+                </label>
+            ) : null}
+            <Button
+                disabled={props.disabled}
+                icon={checked ? "check_box" : "check_box_outline_blank"}
+            />
+            <input
+                {...props}
+                className={styles.input}
+                type="checkbox"
+                name={props.name}
+                disabled={props.disabled}
+                onChange={(event) => onChangeCheckboxHandler(event)}
+            />
+        </div>
+    );
+}

package/index.d.ts

@@ -21,5 +21,6 @@ import CodeField from "./codeField/codeField";
 import InputField from "./inputField/inputField";
 import Theme from "./theme/theme";
 import ClickAwayListener from "./clickAwayListener/clickAwayListener";
+import Chekbox from "./checkbox/checkbox";
 import { Table, Thead, Tbody, Tfoot, Tr, Th, Td } from "./table/table";
-export { Button, AppBar, Card, Container, Footer, Form, GridContainer, GridItem, Hr, List, ListItem, Main, Navigation, Page, Row, Stack, Spacer, SvgIcon, Loading, CodeField, InputField, Theme, ClickAwayListener, Table, Thead, Tbody, Tfoot, Tr, Th, Td, };
+export { Button, AppBar, Card, Container, Footer, Form, GridContainer, GridItem, Hr, List, ListItem, Main, Navigation, Page, Row, Stack, Spacer, SvgIcon, Loading, CodeField, InputField, Theme, ClickAwayListener, Chekbox, Table, Thead, Tbody, Tfoot, Tr, Th, Td, };

package/index.js

@@ -21,6 +21,7 @@ import CodeField from "./codeField/codeField";
 import InputField from "./inputField/inputField";
 import Theme from "./theme/theme";
 import ClickAwayListener from "./clickAwayListener/clickAwayListener";
+import Chekbox from "./checkbox/checkbox";
 import { Table, Thead, Tbody, Tfoot, Tr, Th, Td } from "./table/table";
-export { Button, AppBar, Card, Container, Footer, Form, GridContainer, GridItem, Hr, List, ListItem, Main, Navigation, Page, Row, Stack, Spacer, SvgIcon, Loading, CodeField, InputField, Theme, ClickAwayListener, Table, Thead, Tbody, Tfoot, Tr, Th, Td, };
+export { Button, AppBar, Card, Container, Footer, Form, GridContainer, GridItem, Hr, List, ListItem, Main, Navigation, Page, Row, Stack, Spacer, SvgIcon, Loading, CodeField, InputField, Theme, ClickAwayListener, Chekbox, Table, Thead, Tbody, Tfoot, Tr, Th, Td, };
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,SAAS,MAAM,uBAAuB,CAAC;AAC9C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAC1D,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,MAAM,SAAS,CAAC;AACzB,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAC3C,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,GAAG,MAAM,WAAW,CAAC;AAC5B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,MAAM,eAAe,CAAC;AAClC,OAAO,OAAO,MAAM,mBAAmB,CAAC;AACxC,OAAO,OAAO,MAAM,mBAAmB,CAAC;AACxC,OAAO,SAAS,MAAM,uBAAuB,CAAC;AAC9C,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,KAAK,MAAM,eAAe,CAAC;AAClC,OAAO,iBAAiB,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EACH,MAAM,EACN,MAAM,EACN,IAAI,EACJ,SAAS,EACT,MAAM,EACN,IAAI,EACJ,aAAa,EACb,QAAQ,EACR,EAAE,EACF,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,GAAG,EACH,KAAK,EACL,MAAM,EACN,OAAO,EACP,OAAO,EACP,SAAS,EACT,UAAU,EACV,KAAK,EACL,iBAAiB,EACjB,KAAK,EACL,KAAK,EACL,KAAK,EACL,KAAK,EACL,EAAE,EACF,EAAE,EACF,EAAE,GACL,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,SAAS,MAAM,uBAAuB,CAAC;AAC9C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAC1D,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,MAAM,SAAS,CAAC;AACzB,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAC3C,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,GAAG,MAAM,WAAW,CAAC;AAC5B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,MAAM,eAAe,CAAC;AAClC,OAAO,OAAO,MAAM,mBAAmB,CAAC;AACxC,OAAO,OAAO,MAAM,mBAAmB,CAAC;AACxC,OAAO,SAAS,MAAM,uBAAuB,CAAC;AAC9C,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,KAAK,MAAM,eAAe,CAAC;AAClC,OAAO,iBAAiB,MAAM,uCAAuC,CAAC;AACtE,OAAO,OAAO,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EACH,MAAM,EACN,MAAM,EACN,IAAI,EACJ,SAAS,EACT,MAAM,EACN,IAAI,EACJ,aAAa,EACb,QAAQ,EACR,EAAE,EACF,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,GAAG,EACH,KAAK,EACL,MAAM,EACN,OAAO,EACP,OAAO,EACP,SAAS,EACT,UAAU,EACV,KAAK,EACL,iBAAiB,EACjB,OAAO,EACP,KAAK,EACL,KAAK,EACL,KAAK,EACL,KAAK,EACL,EAAE,EACF,EAAE,EACF,EAAE,GACL,CAAC"}

package/index.tsx

@@ -21,6 +21,7 @@ import CodeField from "./codeField/codeField";
 import InputField from "./inputField/inputField";
 import Theme from "./theme/theme";
 import ClickAwayListener from "./clickAwayListener/clickAwayListener";
+import Chekbox from "./checkbox/checkbox";
 import { Table, Thead, Tbody, Tfoot, Tr, Th, Td } from "./table/table";
 export {
     Button,
@@ -46,6 +47,7 @@ export {
     InputField,
     Theme,
     ClickAwayListener,
+    Chekbox,
     Table,
     Thead,
     Tbody,

package/inputField/inputField.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 export interface InputFieldProps extends React.HTMLAttributes<HTMLInputElement> {
-    variant?: "standard" | "outlined" | "filled";
+    variant?: "outlined" | "filled";
     type?: string;
     placeholder?: string;
     disabled?: boolean;

package/inputField/inputField.js

@@ -2,9 +2,7 @@ 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.outlined, 
-    // Default style must be standard. but standard input is not designed in css
-    props.className);
+    const joinedClassNames = joinClassNames(styles.input, props.variant ? styles[props.variant] : styles.outlined, props.className);
     return (React.createElement("label", { className: styles.label },
         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)));

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;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"}
+{"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,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.tsx

@@ -4,7 +4,7 @@ import styles from "./inputField.module.css";
 
 export interface InputFieldProps
     extends React.HTMLAttributes<HTMLInputElement> {
-    variant?: "standard" | "outlined" | "filled";
+    variant?: "outlined" | "filled";
     type?: string;
     placeholder?: string;
     disabled?: boolean;
@@ -18,7 +18,6 @@ export default function InputField(props: InputFieldProps) {
     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!
     );
 

package/package.json

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