@yakad/ui 1.2.109-beta → 1.2.111-beta

package/checkbox/checkbox.d.ts

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

package/checkbox/checkbox.js

@@ -0,0 +1,17 @@
+"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(props.checked ? props.checked : false);
+    const onClickCheckboxHandler = () => {
+        setChecked((value) => !value);
+    };
+    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", onClick: (event) => onClickCheckboxHandler() }),
+        React.createElement("input", { ...props, className: styles.input, type: "checkbox", name: props.name, checked: checked, disabled: props.disabled })));
+}
+//# 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;AAS5C,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,CACxC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CACxC,CAAC;IACF,MAAM,sBAAsB,GAAG,GAAG,EAAE;QAChC,UAAU,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;IAClC,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,EACvD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,sBAAsB,EAAE,GAC9C;QACF,kCACQ,KAAK,EACT,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAC1B,CACA,CACT,CAAC;AACN,CAAC"}

package/checkbox/checkbox.module.css

@@ -0,0 +1,22 @@
+.checkbox {
+    display: flex;
+    flex-direction: row;
+    width: 4rem;
+    height: 4rem;
+}
+.checkbox.labeled {
+    width: 100%;
+}
+
+.input {
+    display: none;
+}
+
+.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,50 @@
+"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;
+    checked?: boolean;
+    disabled?: boolean;
+}
+
+export default function Chekbox(props: CheckboxProps) {
+    const joinedClassNames = joinClassNames(
+        styles.checkbox,
+        props.label ? styles.labeled : ""
+    );
+
+    const [checked, setChecked] = React.useState<boolean>(
+        props.checked ? props.checked : false
+    );
+    const onClickCheckboxHandler = () => {
+        setChecked((value) => !value);
+    };
+
+    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"}
+                onClick={(event) => onClickCheckboxHandler()}
+            />
+            <input
+                {...props}
+                className={styles.input}
+                type="checkbox"
+                name={props.name}
+                checked={checked}
+                disabled={props.disabled}
+            />
+        </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.111-beta",
     "description": "UI components for NextJS/React",
     "main": "./src/index.js",
     "scripts": {