@yakad/ui 1.2.24-beta → 1.2.26-beta

package/codeField/codeField.tsx

@@ -17,6 +17,7 @@ function CodeField(props: CodeFieldsProps) {
 
     return (
         <input
+            {...props}
             name={props.name}
             minLength={props.length}
             maxLength={props.length}

package/index.d.ts

@@ -19,5 +19,5 @@ import SvgIcon from "./svgIcon/svgIcon";
 import Loading from "./loading/loading";
 import CodeField from "./codeField/codeField";
 import InputField from "./inputField/inputField";
-import Thame from "./thame/thame";
-export { Button, AppBar, Card, Container, Footer, Form, GridContainer, GridItem, Hr, List, ListItem, Main, Navigation, Page, Row, Stack, Spacer, SvgIcon, Loading, CodeField, InputField, Thame, };
+import Theme from "./theme/thame";
+export { Button, AppBar, Card, Container, Footer, Form, GridContainer, GridItem, Hr, List, ListItem, Main, Navigation, Page, Row, Stack, Spacer, SvgIcon, Loading, CodeField, InputField, Theme, };

package/index.js

@@ -19,6 +19,6 @@ import SvgIcon from "./svgIcon/svgIcon";
 import Loading from "./loading/loading";
 import CodeField from "./codeField/codeField";
 import InputField from "./inputField/inputField";
-import Thame from "./thame/thame";
-export { Button, AppBar, Card, Container, Footer, Form, GridContainer, GridItem, Hr, List, ListItem, Main, Navigation, Page, Row, Stack, Spacer, SvgIcon, Loading, CodeField, InputField, Thame, };
+import Theme from "./theme/thame";
+export { Button, AppBar, Card, Container, Footer, Form, GridContainer, GridItem, Hr, List, ListItem, Main, Navigation, Page, Row, Stack, Spacer, SvgIcon, Loading, CodeField, InputField, Theme, };
 //# sourceMappingURL=index.js.map

package/index.tsx

@@ -19,7 +19,7 @@ import SvgIcon from "./svgIcon/svgIcon";
 import Loading from "./loading/loading";
 import CodeField from "./codeField/codeField";
 import InputField from "./inputField/inputField";
-import Thame from "./thame/thame";
+import Theme from "./theme/theme";
 export {
     Button,
     AppBar,
@@ -42,5 +42,5 @@ export {
     Loading,
     CodeField,
     InputField,
-    Thame,
+    Theme,
 };

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.field },
-        React.createElement("input", { name: props.name, disabled: props.disabled, placeholder: "\u00A0", type: props.type, className: joinedClassNames }),
+        React.createElement("input", { ...props, name: props.name, disabled: props.disabled, placeholder: "\u00A0", type: props.type, className: joinedClassNames }),
         React.createElement("span", { className: styles.placeholder }, 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;AAU7C,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,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,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"}
+{"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;AAU7C,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,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.tsx

@@ -20,6 +20,7 @@ function InputField(props: InputFieldProps) {
     return (
         <label className={styles.field}>
             <input
+                {...props}
                 name={props.name}
                 disabled={props.disabled}
                 placeholder="&nbsp;"

package/package.json

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

package/theme/theme.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface ThemeProps extends React.HTMLAttributes<HTMLElement> {
+    mode?: "light" | "dark" | "system";
+    color?: "green" | "pink" | "grow" | "blue";
+}
+declare function Theme(props: ThemeProps): JSX.Element;
+export default Theme;

package/theme/theme.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { joinClassNames } from "@yakad/lib";
+import styles from "./theme.module.css";
+function Theme(props) {
+    const joinedClassNames = joinClassNames(props.mode ? styles[props.mode] : styles.system, props.color ? styles[props.color] : styles.blue, props.className);
+    return (React.createElement("div", { ...props, className: joinedClassNames }, props.children));
+}
+export default Theme;
+//# sourceMappingURL=theme.js.map

package/theme/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["theme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAc,MAAM,YAAY,CAAC;AACxD,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAOxC,SAAS,KAAK,CAAC,KAAiB;IAC5B,MAAM,gBAAgB,GAAG,cAAc,CACnC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,EAC/C,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAC/C,KAAK,CAAC,SAAU,CACnB,CAAC;IACF,OAAO,CACH,gCAAS,KAAK,EAAE,SAAS,EAAE,gBAAgB,IACtC,KAAK,CAAC,QAAQ,CACb,CACT,CAAC;AACN,CAAC;AAED,eAAe,KAAK,CAAC"}

package/{thame/thame.module.css → theme/theme.module.css}

@@ -1,7 +1,7 @@
 .blue {
     --LightPrimaryColor: #1e64d4;
     --LightPrimaryContainerColor: #c2e7ff;
-    --LightSecondaryColor: #121212;
+    --LightSecondaryColor: #55624c;
     --LightSecondaryContainerColor: #d9e7cb;
     --LightTertiaryColor: #386a20;
     --LightTertiaryContainerColor: #b7f397;
@@ -32,7 +32,7 @@
     --DarkErrorContainerColor: #f9dedc;
     --DarkOnPrimaryColor: #003738;
     --DarkOnPrimaryContainerColor: #c2e7ff;
-    --DarkOnSecondaryColor: #121212;
+    --DarkOnSecondaryColor: #55624c;
     --DarkOnSecondaryContainerColor: #d9e7cb;
     --DarkOnTertiaryColor: #042100;
     --DarkOnTertiaryContainerColor: #b7f397;
@@ -44,7 +44,7 @@
 .green {
     --LightPrimaryColor: #386a20;
     --LightPrimaryContainerColor: #cad7bd;
-    --LightSecondaryColor: #121212;
+    --LightSecondaryColor: #55624c;
     --LightSecondaryContainerColor: #d9e7cb;
     --LightTertiaryColor: #19686a;
     --LightTertiaryContainerColor: #a8eff0;
@@ -75,7 +75,7 @@
     --DarkErrorContainerColor: #f9dedc;
     --DarkOnPrimaryColor: #386a20;
     --DarkOnPrimaryContainerColor: #cad7bd;
-    --DarkOnSecondaryColor: #121212;
+    --DarkOnSecondaryColor: #55624c;
     --DarkOnSecondaryContainerColor: #d9e7cb;
     --DarkOnTertiaryColor: #19686a;
     --DarkOnTertiaryContainerColor: #a8eff0;
@@ -88,7 +88,7 @@
 .pink {
     --LightPrimaryColor: #9c4146;
     --LightPrimaryContainerColor: #ffdad9;
-    --LightSecondaryColor: #121212;
+    --LightSecondaryColor: #55624c;
     --LightSecondaryContainerColor: #d9e7cb;
     --LightTertiaryColor: #604003;
     --LightTertiaryContainerColor: #f1d1a2;
@@ -119,7 +119,7 @@
     --DarkErrorContainerColor: #f9dedc;
     --DarkOnPrimaryColor: #9c4146;
     --DarkOnPrimaryContainerColor: #ffdad9;
-    --DarkOnSecondaryColor: #121212;
+    --DarkOnSecondaryColor: #55624c;
     --DarkOnSecondaryContainerColor: #d9e7cb;
     --DarkOnTertiaryColor: #604003;
     --DarkOnTertiaryContainerColor: #f1d1a2;
@@ -132,7 +132,7 @@
 .grow {
     --LightPrimaryColor: #616200;
     --LightPrimaryContainerColor: #e6e4bf;
-    --LightSecondaryColor: #121212;
+    --LightSecondaryColor: #55624c;
     --LightSecondaryContainerColor: #d9e7cb;
     --LightTertiaryColor: #bfedd9;
     --LightTertiaryContainerColor: #f1d1a2;
@@ -163,7 +163,7 @@
     --DarkErrorContainerColor: #f9dedc;
     --DarkOnPrimaryColor: #616200;
     --DarkOnPrimaryContainerColor: #e6e4bf;
-    --DarkOnSecondaryColor: #121212;
+    --DarkOnSecondaryColor: #55624c;
     --DarkOnSecondaryContainerColor: #d9e7cb;
     --DarkOnTertiaryColor: #042100;
     --DarkOnTertiaryContainerColor: #b7f397;

package/theme/theme.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { joinClassNames, joinStyles } from "@yakad/lib";
+import styles from "./theme.module.css";
+
+interface ThemeProps extends React.HTMLAttributes<HTMLElement> {
+    mode?: "light" | "dark" | "system";
+    color?: "green" | "pink" | "grow" | "blue";
+}
+
+function Theme(props: ThemeProps) {
+    const joinedClassNames = joinClassNames(
+        props.mode ? styles[props.mode] : styles.system,
+        props.color ? styles[props.color] : styles.blue,
+        props.className!
+    );
+    return (
+        <div {...props} className={joinedClassNames}>
+            {props.children}
+        </div>
+    );
+}
+
+export default Theme;

package/codeField/codeField.d.ts

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

package/codeField/codeField.js

@@ -1,10 +0,0 @@
-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", { name: props.name, minLength: props.length, maxLength: props.length, className: joinedClassNames, style: joinedStyles }));
-}
-export default CodeField;
-//# sourceMappingURL=codeField.js.map

package/codeField/codeField.js.map

@@ -1 +0,0 @@
-{"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;AAO5C,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,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"}

package/thame/thame.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-interface ThameProps extends React.HTMLAttributes<HTMLElement> {
-    mode?: "light" | "dark" | "system";
-    color?: "green" | "pink" | "grow" | "blue";
-}
-declare function Thame(props: ThameProps): JSX.Element;
-export default Thame;

package/thame/thame.js

@@ -1,8 +0,0 @@
-import { joinClassNames } from "@yakad/lib";
-import styles from "./thame.module.css";
-function Thame(props) {
-    const joinedClassNames = joinClassNames(styles.blue, props.mode ? styles[props.mode] : styles.blue, props.color ? styles[props.color] : styles.blue, props.className);
-    return React.createElement("div", { className: joinedClassNames }, props.children);
-}
-export default Thame;
-//# sourceMappingURL=thame.js.map

package/thame/thame.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"thame.js","sourceRoot":"","sources":["thame.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAc,MAAM,YAAY,CAAC;AACxD,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAOxC,SAAS,KAAK,CAAC,KAAiB;IAC5B,MAAM,gBAAgB,GAAG,cAAc,CACnC,MAAM,CAAC,IAAI,EACX,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAC7C,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAC/C,KAAK,CAAC,SAAU,CACnB,CAAC;IACF,OAAO,6BAAK,SAAS,EAAE,gBAAgB,IAAG,KAAK,CAAC,QAAQ,CAAO,CAAC;AACpE,CAAC;AAED,eAAe,KAAK,CAAC"}

package/thame/thame.tsx

@@ -1,20 +0,0 @@
-import Reat from "react";
-import { joinClassNames, joinStyles } from "@yakad/lib";
-import styles from "./thame.module.css";
-
-interface ThameProps extends React.HTMLAttributes<HTMLElement> {
-    mode?: "light" | "dark" | "system";
-    color?: "green" | "pink" | "grow" | "blue";
-}
-
-function Thame(props: ThameProps) {
-    const joinedClassNames = joinClassNames(
-        styles.blue,
-        props.mode ? styles[props.mode] : styles.blue,
-        props.color ? styles[props.color] : styles.blue,
-        props.className!
-    );
-    return <div className={joinedClassNames}>{props.children}</div>;
-}
-
-export default Thame;