@yakad/ui 1.2.78-beta → 1.2.80-beta

package/codeField/codeField.d.ts

@@ -4,5 +4,5 @@ interface CodeFieldsProps extends React.HTMLAttributes<HTMLInputElement> {
     name?: string;
     type?: string;
 }
-declare function CodeField(props: CodeFieldsProps): JSX.Element;
+declare function CodeField(this: any, props: CodeFieldsProps): JSX.Element;
 export default CodeField;

package/codeField/codeField.js

@@ -1,10 +1,18 @@
 import React from "react";
 import { joinClassNames, joinStyles } from "@yakad/lib";
 import styles from "./codeField.module.css";
+function sliceOverLength(event, length) {
+    const targetInput = event.target;
+    const targetLength = targetInput.value.length;
+    if (targetLength > length)
+        targetInput.value = targetInput.value.slice(0, targetLength - 1);
+    targetInput.value = targetInput.value.replace(/[^0-9]+/, "");
+}
 function CodeField(props) {
+    const length = props.length ? props.length : 6;
     const joinedClassNames = joinClassNames(styles.input, props.className);
     const joinedStyles = joinStyles({ width: "calc(1.5ch * " + props.length + ")" }, props.style);
-    return (React.createElement("input", { ...props, name: props.name, type: props.type, minLength: props.length, maxLength: props.length, className: joinedClassNames, style: joinedStyles }));
+    return (React.createElement("input", { name: props.name, type: "number", minLength: length, maxLength: length, className: joinedClassNames, style: joinedStyles, onInput: (event) => sliceOverLength(event, length), autoComplete: "off", pattern: "[0-9]" }));
 }
 export default CodeField;
 //# sourceMappingURL=codeField.js.map

package/codeField/codeField.js.map

@@ -1 +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;AAQ5C,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,kCACQ,KAAK,EACT,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,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"}
+{"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;AAQ5C,SAAS,eAAe,CACpB,KAAwC,EACxC,MAAc;IAEd,MAAM,WAAW,GAAG,KAAK,CAAC,MAA0B,CAAC;IACrD,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC;IAC9C,IAAI,YAAY,GAAG,MAAM;QACrB,WAAW,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,YAAY,GAAG,CAAC,CAAC,CAAC;IAErE,WAAW,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;AACjE,CAAC;AAED,SAAS,SAAS,CAAY,KAAsB;IAChD,MAAM,MAAM,GAAW,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAEvD,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,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,EACjB,SAAS,EAAE,MAAM,EACjB,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,EAClD,YAAY,EAAC,KAAK,EAClB,OAAO,EAAC,OAAO,GACjB,CACL,CAAC;AACN,CAAC;AAED,eAAe,SAAS,CAAC"}

package/codeField/codeField.module.css

@@ -21,3 +21,8 @@
 .input:focus {
     outline: none;
 }
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}

package/codeField/codeField.tsx

@@ -8,7 +8,21 @@ interface CodeFieldsProps extends React.HTMLAttributes<HTMLInputElement> {
     type?: string;
 }
 
-function CodeField(props: CodeFieldsProps) {
+function sliceOverLength(
+    event: React.FormEvent<HTMLInputElement>,
+    length: number
+) {
+    const targetInput = event.target as HTMLInputElement;
+    const targetLength = targetInput.value.length;
+    if (targetLength > length)
+        targetInput.value = targetInput.value.slice(0, targetLength - 1);
+
+    targetInput.value = targetInput.value.replace(/[^0-9]+/, "");
+}
+
+function CodeField(this: any, props: CodeFieldsProps) {
+    const length: number = props.length ? props.length : 6;
+
     const joinedClassNames = joinClassNames(styles.input, props.className!);
 
     const joinedStyles = joinStyles(
@@ -18,13 +32,15 @@ function CodeField(props: CodeFieldsProps) {
 
     return (
         <input
-            {...props}
             name={props.name}
-            type={props.type}
-            minLength={props.length}
-            maxLength={props.length}
+            type="number"
+            minLength={length}
+            maxLength={length}
             className={joinedClassNames}
             style={joinedStyles}
+            onInput={(event) => sliceOverLength(event, length)}
+            autoComplete="off"
+            pattern="[0-9]"
         />
     );
 }

package/index.d.ts

@@ -21,4 +21,5 @@ import CodeField from "./codeField/codeField";
 import InputField from "./inputField/inputField";
 import Theme from "./theme/theme";
 import ClickAwayListener from "./clickAwayListener/clickAwayListener";
-export { Button, AppBar, Card, Container, Footer, Form, GridContainer, GridItem, Hr, List, ListItem, Main, Navigation, Page, Row, Stack, Spacer, SvgIcon, Loading, CodeField, InputField, Theme, ClickAwayListener, };
+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, };

package/index.js

@@ -21,5 +21,6 @@ import CodeField from "./codeField/codeField";
 import InputField from "./inputField/inputField";
 import Theme from "./theme/theme";
 import ClickAwayListener from "./clickAwayListener/clickAwayListener";
-export { Button, AppBar, Card, Container, Footer, Form, GridContainer, GridItem, Hr, List, ListItem, Main, Navigation, Page, Row, Stack, Spacer, SvgIcon, Loading, CodeField, InputField, Theme, ClickAwayListener, };
+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, };
 //# 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,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,GACpB,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,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"}

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 { Table, Thead, Tbody, Tfoot, Tr, Th, Td } from "./table/table";
 export {
     Button,
     AppBar,
@@ -45,4 +46,11 @@ export {
     InputField,
     Theme,
     ClickAwayListener,
+    Table,
+    Thead,
+    Tbody,
+    Tfoot,
+    Tr,
+    Th,
+    Td,
 };

package/inputField/inputField.js

@@ -4,7 +4,7 @@ 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.label },
-        React.createElement("input", { ...props, name: props.name, disabled: props.disabled, placeholder: "  ", type: props.type, value: props.value, className: joinedClassNames }),
+        React.createElement("input", { ...props, name: props.name, disabled: props.disabled, placeholder: "  ", type: props.type, value: props.value, className: joinedClassNames, autoFocus: true }),
         React.createElement("span", { className: styles.span }, props.placeholder)));
 }
 export default InputField;

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;AAY7C,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,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,GAC7B;QACF,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI,IAAG,KAAK,CAAC,WAAW,CAAQ,CACpD,CACX,CAAC;AACN,CAAC;AAED,eAAe,UAAU,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;AAY7C,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,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,SACX;QACF,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI,IAAG,KAAK,CAAC,WAAW,CAAQ,CACpD,CACX,CAAC;AACN,CAAC;AAED,eAAe,UAAU,CAAC"}

package/inputField/inputField.tsx

@@ -29,6 +29,7 @@ function InputField(props: InputFieldProps) {
                 type={props.type}
                 value={props.value}
                 className={joinedClassNames}
+                autoFocus
             />
             <span className={styles.span}>{props.placeholder}</span>
         </label>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yakad/ui",
-    "version": "1.2.78-beta",
+    "version": "1.2.80-beta",
     "description": "",
     "main": "./src/index.js",
     "scripts": {
@@ -12,11 +12,11 @@
         "url": "git+https://github.com/NatiqQuran/yakad.git"
     },
     "author": "Natiq",
-    "license": "GPL-3.0",
+    "license": "MIT",
     "bugs": {
         "url": "https://github.com/NatiqQuran/yakad/issues"
     },
-    "homepage": "https://github.com/NatiqQuran/yakad#readme",
+    "homepage": "https://yakad.natiq.net",
     "dependencies": {
         "@types/react": "18.0.24",
         "@types/react-dom": "18.0.6",

package/table/table.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export declare function Table(props: React.HTMLAttributes<HTMLElement>): JSX.Element;
+export declare function Thead(props: React.HTMLAttributes<HTMLElement>): JSX.Element;
+export declare function Tbody(props: React.HTMLAttributes<HTMLElement>): JSX.Element;
+export declare function Tfoot(props: React.HTMLAttributes<HTMLElement>): JSX.Element;
+export declare function Tr(props: React.HTMLAttributes<HTMLElement>): JSX.Element;
+export declare function Th(props: React.HTMLAttributes<HTMLElement>): JSX.Element;
+export declare function Td(props: React.HTMLAttributes<HTMLElement>): JSX.Element;

package/table/table.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { joinClassNames } from "@yakad/lib";
+import styles from "./table.module.css";
+export function Table(props) {
+    const joinedClassNames = joinClassNames(styles.table, props.className);
+    return (React.createElement("table", { ...props, className: joinedClassNames }, props.children));
+}
+export function Thead(props) {
+    const joinedClassNames = joinClassNames(styles.thead, props.className);
+    return (React.createElement("thead", { ...props, className: joinedClassNames }, props.children));
+}
+export function Tbody(props) {
+    const joinedClassNames = joinClassNames(styles.tbody, props.className);
+    return (React.createElement("tbody", { ...props, className: joinedClassNames }, props.children));
+}
+export function Tfoot(props) {
+    const joinedClassNames = joinClassNames(styles.tfoot, props.className);
+    return (React.createElement("tfoot", { ...props, className: joinedClassNames }, props.children));
+}
+export function Tr(props) {
+    const joinedClassNames = joinClassNames(styles.tr, props.className);
+    return (React.createElement("tr", { ...props, className: joinedClassNames }, props.children));
+}
+export function Th(props) {
+    const joinedClassNames = joinClassNames(styles.th, props.className);
+    return (React.createElement("th", { ...props, className: joinedClassNames }, props.children));
+}
+export function Td(props) {
+    const joinedClassNames = joinClassNames(styles.td, props.className);
+    return (React.createElement("td", { ...props, className: joinedClassNames }, props.children));
+}
+//# sourceMappingURL=table.js.map

package/table/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sourceRoot":"","sources":["table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAExC,MAAM,UAAU,KAAK,CAAC,KAAwC;IAC1D,MAAM,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,SAAU,CAAC,CAAC;IAExE,OAAO,CACH,kCAAW,KAAK,EAAE,SAAS,EAAE,gBAAgB,IACxC,KAAK,CAAC,QAAQ,CACX,CACX,CAAC;AACN,CAAC;AAED,MAAM,UAAU,KAAK,CAAC,KAAwC;IAC1D,MAAM,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,SAAU,CAAC,CAAC;IAExE,OAAO,CACH,kCAAW,KAAK,EAAE,SAAS,EAAE,gBAAgB,IACxC,KAAK,CAAC,QAAQ,CACX,CACX,CAAC;AACN,CAAC;AAED,MAAM,UAAU,KAAK,CAAC,KAAwC;IAC1D,MAAM,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,SAAU,CAAC,CAAC;IAExE,OAAO,CACH,kCAAW,KAAK,EAAE,SAAS,EAAE,gBAAgB,IACxC,KAAK,CAAC,QAAQ,CACX,CACX,CAAC;AACN,CAAC;AAED,MAAM,UAAU,KAAK,CAAC,KAAwC;IAC1D,MAAM,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,SAAU,CAAC,CAAC;IAExE,OAAO,CACH,kCAAW,KAAK,EAAE,SAAS,EAAE,gBAAgB,IACxC,KAAK,CAAC,QAAQ,CACX,CACX,CAAC;AACN,CAAC;AAED,MAAM,UAAU,EAAE,CAAC,KAAwC;IACvD,MAAM,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,SAAU,CAAC,CAAC;IAErE,OAAO,CACH,+BAAQ,KAAK,EAAE,SAAS,EAAE,gBAAgB,IACrC,KAAK,CAAC,QAAQ,CACd,CACR,CAAC;AACN,CAAC;AAED,MAAM,UAAU,EAAE,CAAC,KAAwC;IACvD,MAAM,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,SAAU,CAAC,CAAC;IAErE,OAAO,CACH,+BAAQ,KAAK,EAAE,SAAS,EAAE,gBAAgB,IACrC,KAAK,CAAC,QAAQ,CACd,CACR,CAAC;AACN,CAAC;AAED,MAAM,UAAU,EAAE,CAAC,KAAwC;IACvD,MAAM,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,SAAU,CAAC,CAAC;IAErE,OAAO,CACH,+BAAQ,KAAK,EAAE,SAAS,EAAE,gBAAgB,IACrC,KAAK,CAAC,QAAQ,CACd,CACR,CAAC;AACN,CAAC"}

package/table/table.module.css

@@ -0,0 +1,37 @@
+.table {
+    border-collapse: unset;
+    border-spacing: unset;
+    border-radius: 0.7rem;
+    overflow: hidden;
+}
+
+.thead {
+    border: 0.1rem solid red;
+}
+
+.tbody .tr:nth-child(even) {
+    background-color: #7d7d7d20;
+}
+.tbody .tr:hover {
+    background-color: #7d7d7d30;
+}
+
+.thead .th {
+    border-bottom: 0.2rem solid #7d7d7d40;
+    background-color: rgb(var(--surfaceContainerColor, 243 237 247));
+}
+.tfoot .th {
+    border-top: 0.2rem solid #7d7d7d40;
+    background-color: rgb(var(--surfaceContainerColor, 243 237 247));
+}
+
+.td {
+    /* border: 0.1rem solid #7d7d7d40; */
+}
+
+.th,
+.td {
+    padding: 0 1rem;
+    min-height: 3.2rem;
+    line-height: 3.2rem;
+}

package/table/table.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { joinClassNames } from "@yakad/lib";
+import styles from "./table.module.css";
+
+export function Table(props: React.HTMLAttributes<HTMLElement>) {
+    const joinedClassNames = joinClassNames(styles.table, props.className!);
+
+    return (
+        <table {...props} className={joinedClassNames}>
+            {props.children}
+        </table>
+    );
+}
+
+export function Thead(props: React.HTMLAttributes<HTMLElement>) {
+    const joinedClassNames = joinClassNames(styles.thead, props.className!);
+
+    return (
+        <thead {...props} className={joinedClassNames}>
+            {props.children}
+        </thead>
+    );
+}
+
+export function Tbody(props: React.HTMLAttributes<HTMLElement>) {
+    const joinedClassNames = joinClassNames(styles.tbody, props.className!);
+
+    return (
+        <tbody {...props} className={joinedClassNames}>
+            {props.children}
+        </tbody>
+    );
+}
+
+export function Tfoot(props: React.HTMLAttributes<HTMLElement>) {
+    const joinedClassNames = joinClassNames(styles.tfoot, props.className!);
+
+    return (
+        <tfoot {...props} className={joinedClassNames}>
+            {props.children}
+        </tfoot>
+    );
+}
+
+export function Tr(props: React.HTMLAttributes<HTMLElement>) {
+    const joinedClassNames = joinClassNames(styles.tr, props.className!);
+
+    return (
+        <tr {...props} className={joinedClassNames}>
+            {props.children}
+        </tr>
+    );
+}
+
+export function Th(props: React.HTMLAttributes<HTMLElement>) {
+    const joinedClassNames = joinClassNames(styles.th, props.className!);
+
+    return (
+        <th {...props} className={joinedClassNames}>
+            {props.children}
+        </th>
+    );
+}
+
+export function Td(props: React.HTMLAttributes<HTMLElement>) {
+    const joinedClassNames = joinClassNames(styles.td, props.className!);
+
+    return (
+        <td {...props} className={joinedClassNames}>
+            {props.children}
+        </td>
+    );
+}