@yakad/ui 1.2.76-beta → 1.2.78-beta

package/index.js

@@ -1,25 +1,25 @@
-import Button from "./button/button";
-import AppBar from "./appBar/appBar";
-import Card from "./card/card";
-import Container from "./container/container";
-import Footer from "./footer/footer";
-import Form from "./form/form";
-import GridContainer from "./gridContainer/gridContainer";
-import GridItem from "./gridItem/gridItem";
-import Hr from "./hr/hr";
-import List from "./list/list";
-import ListItem from "./listItem/listItem";
-import Main from "./main/main";
-import Navigation from "./navigation/navigation";
-import Page from "./page/page";
-import Row from "./row/row";
-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";
-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 Button from "./button/button";
+import AppBar from "./appBar/appBar";
+import Card from "./card/card";
+import Container from "./container/container";
+import Footer from "./footer/footer";
+import Form from "./form/form";
+import GridContainer from "./gridContainer/gridContainer";
+import GridItem from "./gridItem/gridItem";
+import Hr from "./hr/hr";
+import List from "./list/list";
+import ListItem from "./listItem/listItem";
+import Main from "./main/main";
+import Navigation from "./navigation/navigation";
+import Page from "./page/page";
+import Row from "./row/row";
+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";
+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, };
 //# sourceMappingURL=index.js.map

package/index.tsx

@@ -1,48 +1,48 @@
-import Button from "./button/button";
-import AppBar from "./appBar/appBar";
-import Card from "./card/card";
-import Container from "./container/container";
-import Footer from "./footer/footer";
-import Form from "./form/form";
-import GridContainer from "./gridContainer/gridContainer";
-import GridItem from "./gridItem/gridItem";
-import Hr from "./hr/hr";
-import List from "./list/list";
-import ListItem from "./listItem/listItem";
-import Main from "./main/main";
-import Navigation from "./navigation/navigation";
-import Page from "./page/page";
-import Row from "./row/row";
-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";
-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 Button from "./button/button";
+import AppBar from "./appBar/appBar";
+import Card from "./card/card";
+import Container from "./container/container";
+import Footer from "./footer/footer";
+import Form from "./form/form";
+import GridContainer from "./gridContainer/gridContainer";
+import GridItem from "./gridItem/gridItem";
+import Hr from "./hr/hr";
+import List from "./list/list";
+import ListItem from "./listItem/listItem";
+import Main from "./main/main";
+import Navigation from "./navigation/navigation";
+import Page from "./page/page";
+import Row from "./row/row";
+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";
+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,
+};

package/inputField/inputField.d.ts

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

package/inputField/inputField.js

@@ -1,11 +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.label },
-        React.createElement("input", { ...props, name: props.name, disabled: props.disabled, placeholder: "  ", type: props.type, value: props.value, className: joinedClassNames }),
-        React.createElement("span", { className: styles.span }, props.placeholder)));
-}
-export default InputField;
+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.label },
+        React.createElement("input", { ...props, name: props.name, disabled: props.disabled, placeholder: "  ", type: props.type, value: props.value, className: joinedClassNames }),
+        React.createElement("span", { className: styles.span }, props.placeholder)));
+}
+export default InputField;
 //# sourceMappingURL=inputField.js.map

package/inputField/inputField.module.css

@@ -1,167 +1,167 @@
-.label {
-    padding-top: 0.6rem;
-    font-size: 1.3rem;
-    position: relative;
-    display: inline-block;
-    overflow: hidden;
-}
-.input {
-    box-sizing: border-box;
-    margin: 0rem;
-    border-image: initial;
-    width: 100%;
-    height: inherit;
-    color: rgb(var(--onSurfaceColor, 28 27 31) / 0.87);
-    box-shadow: none;
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
-    caret-color: rgb(var(--primaryColor, 11 87 208));
-}
-.input.outlined {
-    border-top-color: transparent;
-    background-color: transparent;
-    border-width: 0.1rem;
-    border-style: solid;
-    border-radius: 0.4rem;
-    padding: 1.5rem 1.3rem;
-    transition: border 0.2s ease 0s, box-shadow 0.2s ease 0s;
-    text-rendering: auto;
-    letter-spacing: normal;
-    word-spacing: normal;
-    line-height: normal;
-    text-transform: none;
-    text-indent: 0rem;
-    text-shadow: none;
-    display: inline-block;
-    text-align: start;
-    appearance: auto;
-    -webkit-rtl-ordering: logical;
-    cursor: text;
-}
-.input.filled {
-    display: block;
-    border-right: none;
-    border-left: none;
-    border-top: 2.7rem solid transparent;
-    border-bottom: solid 0.1rem rgb(var(--onSurfaceColor, 28 27 31) / 0.6);
-    border-radius: 0.4rem 0.4rem 0rem 0rem;
-    padding: 0rem 1.2rem 1rem;
-    background-color: rgb(var(--onSurfaceColor, 28 27 31) / 0.04);
-    transition: border-bottom 0.2s ease 0s, background-color 0.2s ease 0s;
-}
-.input:focus {
-    outline: none;
-}
-.input.outlined:focus {
-    border-top-color: transparent;
-    box-shadow: inset 1px 0 rgb(var(--primaryColor, 11 87 208)),
-        inset -1px 0 rgb(var(--primaryColor, 11 87 208)),
-        inset 0 -1px rgb(var(--primaryColor, 11 87 208));
-}
-.input:focus + .span {
-    color: rgb(var(--primaryColor, 11 87 208));
-}
-.input.outlined:focus + .span::after {
-    box-shadow: inset 0 1px rgb(var(--primaryColor, 11 87 208));
-    border-top-color: rgb(var(--primaryColor, 11 87 208)) !important;
-}
-.input.filled:focus + .span::after {
-    transform: scale(1);
-}
-.input.outlined:focus + .span::before {
-    box-shadow: inset 0 1px rgb(var(--primaryColor, 11 87 208));
-    border-top-color: rgb(var(--primaryColor, 11 87 208)) !important;
-}
-
-.input.outlined:not(:focus):placeholder-shown {
-    border-top-color: rgb(var(--onSurfaceColor, 28 27 31) / 0.6);
-}
-.input.outlined:not(:focus):placeholder-shown + .span {
-    font-size: inherit;
-    line-height: 6.2rem;
-}
-.input.filled:not(:focus):placeholder-shown + .span {
-    font-size: inherit;
-    line-height: 4.8rem;
-}
-.input + .span {
-    position: absolute;
-    color: rgb(var(--onSurfaceColor, 28 27 31) / 0.6);
-    font-size: 75%;
-    transition: color 0.2s ease 0s, font-size 0.2s ease 0s,
-        line-height 0.2s ease 0s;
-}
-.input.outlined + .span {
-    top: 0rem;
-    left: 0rem;
-    display: flex;
-    border-color: rgb(var(--onSurfaceColor, 28 27 31) / 0.6);
-    width: 100%;
-    max-height: 100%;
-    line-height: 1.5rem;
-    cursor: text;
-}
-.input.filled + .span {
-    inset: 0rem;
-    display: block;
-    box-sizing: border-box;
-    padding: 0.7rem 1.2rem 0rem;
-    line-height: 18px;
-    pointer-events: none;
-}
-.input.outlined:not(:focus):placeholder-shown + .span::before {
-    border-top-color: transparent;
-}
-.input.outlined + .span::before {
-    margin-right: 0.4rem;
-    border-left: 0.1 solid transparent;
-    border-radius: 0.4rem 0rem;
-    content: "";
-    display: block;
-    box-sizing: border-box;
-    margin-top: 0.6rem;
-    border-top-width: 0.1rem;
-    border-top-style: solid;
-    border-top-color: rgb(var(--onSurfaceColor, 28 27 31) / 0.6);
-    min-width: 1rem;
-    height: 0.8rem;
-    pointer-events: none;
-    box-shadow: transparent 0px 1px inset;
-    transition: border-color 0.2s ease 0s, box-shadow 0.2s ease 0s;
-}
-
-.input.outlined:not(:focus):placeholder-shown + .span::after {
-    border-top-color: transparent;
-}
-.input + .span::after {
-    content: "";
-    display: block;
-}
-.input.outlined + .span::after {
-    flex-grow: 1;
-    margin-left: 0.4rem;
-    border-right: 0.1rem solid transparent;
-    border-radius: 0rem 0.4rem;
-    box-sizing: border-box;
-    margin-top: 0.6rem;
-    border-top-width: 0.1rem;
-    border-top-style: solid;
-    border-top-color: rgb(var(--onSurfaceColor, 28 27 31) / 0.6);
-    min-width: 1rem;
-    height: 0.8rem;
-    pointer-events: none;
-    box-shadow: transparent 0px 1px inset;
-    transition: border-color 0.2s ease 0s, box-shadow 0.2s ease 0s;
-}
-.input.filled + .span::after {
-    position: absolute;
-    left: 0rem;
-    bottom: 0rem;
-    width: 100%;
-    height: 0.2rem;
-    background-color: rgb(var(--primaryColor, 11 87 208));
-    transform-origin: center bottom;
-    transform: scaleX(0);
-    transition: transform 0.3s ease 0s;
-}
+.label {
+    padding-top: 0.6rem;
+    font-size: 1.3rem;
+    position: relative;
+    display: inline-block;
+    overflow: hidden;
+}
+.input {
+    box-sizing: border-box;
+    margin: 0rem;
+    border-image: initial;
+    width: 100%;
+    height: inherit;
+    color: rgb(var(--onSurfaceColor, 28 27 31) / 0.87);
+    box-shadow: none;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    caret-color: rgb(var(--primaryColor, 11 87 208));
+}
+.input.outlined {
+    border-top-color: transparent;
+    background-color: transparent;
+    border-width: 0.1rem;
+    border-style: solid;
+    border-radius: 0.4rem;
+    padding: 1.5rem 1.3rem;
+    transition: border 0.2s ease 0s, box-shadow 0.2s ease 0s;
+    text-rendering: auto;
+    letter-spacing: normal;
+    word-spacing: normal;
+    line-height: normal;
+    text-transform: none;
+    text-indent: 0rem;
+    text-shadow: none;
+    display: inline-block;
+    text-align: start;
+    appearance: auto;
+    -webkit-rtl-ordering: logical;
+    cursor: text;
+}
+.input.filled {
+    display: block;
+    border-right: none;
+    border-left: none;
+    border-top: 2.7rem solid transparent;
+    border-bottom: solid 0.1rem rgb(var(--onSurfaceColor, 28 27 31) / 0.6);
+    border-radius: 0.4rem 0.4rem 0rem 0rem;
+    padding: 0rem 1.2rem 1rem;
+    background-color: rgb(var(--onSurfaceColor, 28 27 31) / 0.04);
+    transition: border-bottom 0.2s ease 0s, background-color 0.2s ease 0s;
+}
+.input:focus {
+    outline: none;
+}
+.input.outlined:focus {
+    border-top-color: transparent;
+    box-shadow: inset 1px 0 rgb(var(--primaryColor, 11 87 208)),
+        inset -1px 0 rgb(var(--primaryColor, 11 87 208)),
+        inset 0 -1px rgb(var(--primaryColor, 11 87 208));
+}
+.input:focus + .span {
+    color: rgb(var(--primaryColor, 11 87 208));
+}
+.input.outlined:focus + .span::after {
+    box-shadow: inset 0 1px rgb(var(--primaryColor, 11 87 208));
+    border-top-color: rgb(var(--primaryColor, 11 87 208)) !important;
+}
+.input.filled:focus + .span::after {
+    transform: scale(1);
+}
+.input.outlined:focus + .span::before {
+    box-shadow: inset 0 1px rgb(var(--primaryColor, 11 87 208));
+    border-top-color: rgb(var(--primaryColor, 11 87 208)) !important;
+}
+
+.input.outlined:not(:focus):placeholder-shown {
+    border-top-color: rgb(var(--onSurfaceColor, 28 27 31) / 0.6);
+}
+.input.outlined:not(:focus):placeholder-shown + .span {
+    font-size: inherit;
+    line-height: 6.2rem;
+}
+.input.filled:not(:focus):placeholder-shown + .span {
+    font-size: inherit;
+    line-height: 4.8rem;
+}
+.input + .span {
+    position: absolute;
+    color: rgb(var(--onSurfaceColor, 28 27 31) / 0.6);
+    font-size: 75%;
+    transition: color 0.2s ease 0s, font-size 0.2s ease 0s,
+        line-height 0.2s ease 0s;
+}
+.input.outlined + .span {
+    top: 0rem;
+    left: 0rem;
+    display: flex;
+    border-color: rgb(var(--onSurfaceColor, 28 27 31) / 0.6);
+    width: 100%;
+    max-height: 100%;
+    line-height: 1.5rem;
+    cursor: text;
+}
+.input.filled + .span {
+    inset: 0rem;
+    display: block;
+    box-sizing: border-box;
+    padding: 0.7rem 1.2rem 0rem;
+    line-height: 18px;
+    pointer-events: none;
+}
+.input.outlined:not(:focus):placeholder-shown + .span::before {
+    border-top-color: transparent;
+}
+.input.outlined + .span::before {
+    margin-right: 0.4rem;
+    border-left: 0.1 solid transparent;
+    border-radius: 0.4rem 0rem;
+    content: "";
+    display: block;
+    box-sizing: border-box;
+    margin-top: 0.6rem;
+    border-top-width: 0.1rem;
+    border-top-style: solid;
+    border-top-color: rgb(var(--onSurfaceColor, 28 27 31) / 0.6);
+    min-width: 1rem;
+    height: 0.8rem;
+    pointer-events: none;
+    box-shadow: transparent 0px 1px inset;
+    transition: border-color 0.2s ease 0s, box-shadow 0.2s ease 0s;
+}
+
+.input.outlined:not(:focus):placeholder-shown + .span::after {
+    border-top-color: transparent;
+}
+.input + .span::after {
+    content: "";
+    display: block;
+}
+.input.outlined + .span::after {
+    flex-grow: 1;
+    margin-left: 0.4rem;
+    border-right: 0.1rem solid transparent;
+    border-radius: 0rem 0.4rem;
+    box-sizing: border-box;
+    margin-top: 0.6rem;
+    border-top-width: 0.1rem;
+    border-top-style: solid;
+    border-top-color: rgb(var(--onSurfaceColor, 28 27 31) / 0.6);
+    min-width: 1rem;
+    height: 0.8rem;
+    pointer-events: none;
+    box-shadow: transparent 0px 1px inset;
+    transition: border-color 0.2s ease 0s, box-shadow 0.2s ease 0s;
+}
+.input.filled + .span::after {
+    position: absolute;
+    left: 0rem;
+    bottom: 0rem;
+    width: 100%;
+    height: 0.2rem;
+    background-color: rgb(var(--primaryColor, 11 87 208));
+    transform-origin: center bottom;
+    transform: scaleX(0);
+    transition: transform 0.3s ease 0s;
+}

package/inputField/inputField.tsx

@@ -1,38 +1,38 @@
-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;
-    name?: string;
-    value?: string;
-    required?: boolean;
-}
-
-function InputField(props: InputFieldProps) {
-    const joinedClassNames = joinClassNames(
-        styles.input,
-        props.variant ? styles[props.variant] : styles.standard,
-        props.className!
-    );
-
-    return (
-        <label className={styles.label}>
-            <input
-                {...props}
-                name={props.name}
-                disabled={props.disabled}
-                placeholder="  "
-                type={props.type}
-                value={props.value}
-                className={joinedClassNames}
-            />
-            <span className={styles.span}>{props.placeholder}</span>
-        </label>
-    );
-}
-
-export default InputField;
+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;
+    name?: string;
+    value?: string;
+    required?: boolean;
+}
+
+function InputField(props: InputFieldProps) {
+    const joinedClassNames = joinClassNames(
+        styles.input,
+        props.variant ? styles[props.variant] : styles.standard,
+        props.className!
+    );
+
+    return (
+        <label className={styles.label}>
+            <input
+                {...props}
+                name={props.name}
+                disabled={props.disabled}
+                placeholder="  "
+                type={props.type}
+                value={props.value}
+                className={joinedClassNames}
+            />
+            <span className={styles.span}>{props.placeholder}</span>
+        </label>
+    );
+}
+
+export default InputField;

package/list/list.d.ts

@@ -1,7 +1,7 @@
-import React from "react";
-interface ListProps extends React.HTMLAttributes<HTMLUListElement> {
-    direction?: "row" | "column";
-    collapsed?: boolean;
-}
-declare function List(props: ListProps): JSX.Element;
-export default List;
+import React from "react";
+interface ListProps extends React.HTMLAttributes<HTMLUListElement> {
+    direction?: "row" | "column";
+    collapsed?: boolean;
+}
+declare function List(props: ListProps): JSX.Element;
+export default List;

package/list/list.js

@@ -1,9 +1,9 @@
-import React from "react";
-import { joinClassNames } from "@yakad/lib";
-import styles from "./list.module.css";
-function List(props) {
-    const joinedClassNames = joinClassNames(styles.list, props.direction ? styles[props.direction] : styles.row, props.collapsed ? styles.collapsed : "", props.className);
-    return (React.createElement("ul", { ...props, className: joinedClassNames }, props.children));
-}
-export default List;
+import React from "react";
+import { joinClassNames } from "@yakad/lib";
+import styles from "./list.module.css";
+function List(props) {
+    const joinedClassNames = joinClassNames(styles.list, props.direction ? styles[props.direction] : styles.row, props.collapsed ? styles.collapsed : "", props.className);
+    return (React.createElement("ul", { ...props, className: joinedClassNames }, props.children));
+}
+export default List;
 //# sourceMappingURL=list.js.map