@yakad/ui 1.2.7 → 1.2.9

package/button/button.d.ts

@@ -1,9 +1,14 @@
 import React from "react";
 interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
-    variant?: "text" | "outlined" | "filled" | "tonal" | "elevated" | "link";
+    loading?: boolean;
     size?: "small" | "medium" | "large";
+    variant?: "text" | "outlined" | "filled" | "tonal" | "elevated" | "link";
     borderStyle?: "none" | "semi" | "rounded";
     icon?: JSX.Element;
+    iconPosition?: "start" | "end";
+    loadingPosition?: "default" | "center";
+    loadingVariant?: "scaleOut" | "dots" | "spinner";
+    disabled?: boolean;
 }
 declare function Button(props: ButtonProps): JSX.Element;
 export default Button;

package/button/button.js

@@ -2,18 +2,24 @@ import React from "react";
 import { joinClassNames } from "@yakad/lib";
 import styles from "./button.module.css";
 import SvgIcon from "../svgIcon/svgIcon";
+import Loading from "../loading/loading";
 const svgSizeMaps = {
     small: 2,
     medium: 2.4,
     large: 3,
 };
 function Button(props) {
-    const joinedClassNames = joinClassNames(styles.button, props.variant ? styles[props.variant] : styles.text, props.size ? styles[props.size] : styles.medium, props.borderStyle ? styles[props.borderStyle] : styles.rounded, props.icon && !props.children ? styles.iconButton : "", props.className);
+    const startChildren = props.iconPosition === "end";
+    const centerLoading = !props.icon || (props.loading && props.loadingPosition === "center");
+    const joinedClassNames = joinClassNames(styles.button, props.loading ? styles.loading : "", props.variant ? styles[props.variant] : styles.text, props.loading && centerLoading ? styles.loadingPositionCenter : "", props.size ? styles[props.size] : styles.medium, props.borderStyle ? styles[props.borderStyle] : styles.rounded, props.icon && !props.children ? styles.iconButton : "", props.className);
     return (React.createElement("button", { ...props, className: joinedClassNames },
-        props.icon ? (React.createElement(SvgIcon, { size: props.size
+        startChildren ? props.children : null,
+        props.loading ? (React.createElement("div", { className: joinClassNames(centerLoading ? styles.positionCenter : "", styles.displayOnDisabled) },
+            React.createElement(Loading, { size: props.size, variant: props.loadingVariant }))) : null,
+        props.icon ? (React.createElement(SvgIcon, { className: styles.hideOnDisabled, size: props.size
                 ? svgSizeMaps[props.size]
                 : svgSizeMaps.medium }, props.icon)) : null,
-        props.children));
+        !startChildren ? props.children : null));
 }
 export default Button;
 //# sourceMappingURL=button.js.map

package/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAezC,MAAM,WAAW,GAAe;IAC5B,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,CAAC;CACX,CAAC;AAEF,SAAS,MAAM,CAAC,KAAkB;IAC9B,MAAM,gBAAgB,GAAG,cAAc,CACnC,MAAM,CAAC,MAAM,EACb,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EACnD,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,EAC/C,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAC9D,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EACtD,KAAK,CAAC,SAAU,CACnB,CAAC;IAEF,OAAO,CACH,mCAAY,KAAK,EAAE,SAAS,EAAE,gBAAgB;QACzC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACV,oBAAC,OAAO,IACJ,IAAI,EACA,KAAK,CAAC,IAAI;gBACN,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC;gBACzB,CAAC,CAAC,WAAW,CAAC,MAAM,IAG3B,KAAK,CAAC,IAAI,CACL,CACb,CAAC,CAAC,CAAC,IAAI;QACP,KAAK,CAAC,QAAQ,CACV,CACZ,CAAC;AACN,CAAC;AAED,eAAe,MAAM,CAAC"}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,OAAO,MAAM,oBAAoB,CAAC;AACzC,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAoBzC,MAAM,WAAW,GAAe;IAC5B,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,CAAC;CACX,CAAC;AAEF,SAAS,MAAM,CAAC,KAAkB;IAC9B,MAAM,aAAa,GAAG,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC;IACnD,MAAM,aAAa,GACf,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,eAAe,KAAK,QAAQ,CAAC,CAAC;IAEzE,MAAM,gBAAgB,GAAG,cAAc,CACnC,MAAM,CAAC,MAAM,EACb,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EACnC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EACnD,KAAK,CAAC,OAAO,IAAI,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,EAClE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,EAC/C,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAC9D,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EACtD,KAAK,CAAC,SAAU,CACnB,CAAC;IAEF,OAAO,CACH,mCAAY,KAAK,EAAE,SAAS,EAAE,gBAAgB;QACzC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI;QACrC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CACb,6BACI,SAAS,EAAE,cAAc,CACrB,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,EAC1C,MAAM,CAAC,iBAAiB,CAC3B;YAED,oBAAC,OAAO,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,cAAc,GAAI,CAC1D,CACT,CAAC,CAAC,CAAC,IAAI;QACP,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACV,oBAAC,OAAO,IACJ,SAAS,EAAE,MAAM,CAAC,cAAc,EAChC,IAAI,EACA,KAAK,CAAC,IAAI;gBACN,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC;gBACzB,CAAC,CAAC,WAAW,CAAC,MAAM,IAG3B,KAAK,CAAC,IAAI,CACL,CACb,CAAC,CAAC,CAAC,IAAI;QACP,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAClC,CACZ,CAAC;AACN,CAAC;AAED,eAAe,MAAM,CAAC"}

package/button/button.module.css

@@ -1,4 +1,5 @@
 .button {
+    position: relative;
     display: flex;
     align-items: center;
     line-height: 3rem;
@@ -88,7 +89,7 @@
 }
 .link {
     background: transparent;
-    display: block;
+    display: flex;
     position: relative;
     transition: 0.3s;
 }
@@ -105,9 +106,39 @@
     background-color: var(--secondaryColor);
     transition: 0.3s;
 }
+
 .link:hover {
     box-shadow: none;
 }
 .link:hover:before {
     width: calc(100% - var(--padding));
 }
+
+.loadingPositionCenter:disabled {
+    color: transparent;
+    fill: transparent;
+}
+.positionCenter {
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%);
+}
+
+.button:disabled {
+    cursor: default;
+    box-shadow: none;
+    box-shadow: inset 0 0 10rem #7d7d7d20;
+}
+.button.link:disabled:before {
+    display: none;
+}
+
+.loading .displayOnDisabled {
+    display: none;
+}
+.loading:disabled .displayOnDisabled {
+    display: block;
+}
+.loading:disabled .hideOnDisabled {
+    display: none;
+}

package/button/button.tsx

@@ -2,12 +2,18 @@ import React from "react";
 import { joinClassNames } from "@yakad/lib";
 import styles from "./button.module.css";
 import SvgIcon from "../svgIcon/svgIcon";
+import Loading from "../loading/loading";
 
 interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
-    variant?: "text" | "outlined" | "filled" | "tonal" | "elevated" | "link";
+    loading?: boolean;
     size?: "small" | "medium" | "large";
+    variant?: "text" | "outlined" | "filled" | "tonal" | "elevated" | "link";
     borderStyle?: "none" | "semi" | "rounded";
     icon?: JSX.Element;
+    iconPosition?: "start" | "end";
+    loadingPosition?: "default" | "center";
+    loadingVariant?: "scaleOut" | "dots" | "spinner";
+    disabled?: boolean;
 }
 
 interface svgSizeMap {
@@ -23,9 +29,15 @@ const svgSizeMaps: svgSizeMap = {
 };
 
 function Button(props: ButtonProps) {
+    const startChildren = props.iconPosition === "end";
+    const centerLoading =
+        !props.icon || (props.loading && props.loadingPosition === "center");
+
     const joinedClassNames = joinClassNames(
         styles.button,
+        props.loading ? styles.loading : "",
         props.variant ? styles[props.variant] : styles.text,
+        props.loading && centerLoading ? styles.loadingPositionCenter : "",
         props.size ? styles[props.size] : styles.medium,
         props.borderStyle ? styles[props.borderStyle] : styles.rounded,
         props.icon && !props.children ? styles.iconButton : "",
@@ -34,8 +46,20 @@ function Button(props: ButtonProps) {
 
     return (
         <button {...props} className={joinedClassNames}>
+            {startChildren ? props.children : null}
+            {props.loading ? (
+                <div
+                    className={joinClassNames(
+                        centerLoading ? styles.positionCenter : "",
+                        styles.displayOnDisabled
+                    )}
+                >
+                    <Loading size={props.size} variant={props.loadingVariant} />
+                </div>
+            ) : null}
             {props.icon ? (
                 <SvgIcon
+                    className={styles.hideOnDisabled}
                     size={
                         props.size
                             ? svgSizeMaps[props.size]
@@ -45,7 +69,7 @@ function Button(props: ButtonProps) {
                     {props.icon}
                 </SvgIcon>
             ) : null}
-            {props.children}
+            {!startChildren ? props.children : null}
         </button>
     );
 }

package/index.tsx

@@ -16,6 +16,7 @@ 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";
 
 export {
     Button,
@@ -36,4 +37,5 @@ export {
     Stack,
     Spacer,
     SvgIcon,
+    Loading,
 };

package/loading/loading.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface LoadingProps extends React.HTMLAttributes<HTMLButtonElement> {
+    size?: "small" | "medium" | "large";
+    variant?: "scaleOut" | "dots" | "spinner";
+}
+declare function Loading(props: LoadingProps): JSX.Element;
+export default Loading;

package/loading/loading.js

@@ -0,0 +1,9 @@
+import styles from "./loading.module.css";
+import { joinClassNames } from "@yakad/lib";
+function Loading(props) {
+    const joinedClassNames = joinClassNames(styles.loading, props.size ? styles[props.size] : styles.medium, props.variant ? styles[props.variant] : styles.spinner, props.className);
+    return (React.createElement("div", { className: joinedClassNames },
+        React.createElement("div", null)));
+}
+export default Loading;
+//# sourceMappingURL=loading.js.map

package/loading/loading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading.js","sourceRoot":"","sources":["loading.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAO5C,SAAS,OAAO,CAAC,KAAmB;IAChC,MAAM,gBAAgB,GAAG,cAAc,CACnC,MAAM,CAAC,OAAO,EACd,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,EAC/C,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EACtD,KAAK,CAAC,SAAU,CACnB,CAAC;IAEF,OAAO,CACH,6BAAK,SAAS,EAAE,gBAAgB;QAC5B,gCAAW,CACT,CACT,CAAC;AACN,CAAC;AAED,eAAe,OAAO,CAAC"}

package/loading/loading.module.css

@@ -0,0 +1,91 @@
+.small {
+    --size: 2rem;
+}
+.medium {
+    --size: 2.4rem;
+}
+.large {
+    --size: 3rem;
+}
+
+.loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--size);
+    height: var(--size);
+    box-sizing: border-box;
+    --color: #7d7d7d;
+}
+.spinner div {
+    display: flex;
+    width: 75%;
+    height: 75%;
+    --spinner-border: calc(var(--size) / 8);
+    border-top: var(--spinner-border) solid var(--color);
+    border-right: var(--spinner-border) solid transparent;
+    border-bottom: none;
+    border-left: none;
+    border-radius: 50%;
+    animation: spinner 1000ms linear infinite;
+}
+@keyframes spinner {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.dots div {
+    width: 20%;
+    height: 20%;
+    border-radius: 50%;
+    background-color: var(--color);
+    --dots-space: calc(var(--size) / 3);
+    --dots-space-negative: calc(0rem - (var(--size) / 3));
+    box-shadow: var(--dots-space) 0 var(--color),
+        var(--dots-space-negative) 0 var(--color);
+    position: relative;
+    animation: flash 0.6s ease-out infinite alternate;
+}
+@keyframes flash {
+    0% {
+        background-color: var(--color);
+        box-shadow: var(--dots-space) 0 var(--color),
+            var(--dots-space-negative) 0 transparent;
+    }
+    50% {
+        background-color: transparent;
+        box-shadow: var(--dots-space) 0 var(--color),
+            var(--dots-space-negative) 0 var(--color);
+    }
+    100% {
+        background-color: var(--color);
+        box-shadow: var(--dots-space) 0 transparent,
+            var(--dots-space-negative) 0 var(--color);
+    }
+}
+
+.scaleOut div {
+    width: 90%;
+    height: 90%;
+    border-radius: 50%;
+    background-color: var(--color);
+    animation: sk-scaleout 1s infinite ease-in-out;
+}
+@keyframes sk-scaleout {
+    0% {
+        transform: scale(0);
+        opacity: 1;
+    }
+    5% {
+        transform: scale(0);
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.9;
+    }
+    100% {
+        transform: scale(1);
+        opacity: 0;
+    }
+}

package/loading/loading.tsx

@@ -0,0 +1,24 @@
+import styles from "./loading.module.css";
+import { joinClassNames } from "@yakad/lib";
+
+interface LoadingProps extends React.HTMLAttributes<HTMLButtonElement> {
+    size?: "small" | "medium" | "large";
+    variant?: "scaleOut" | "dots" | "spinner";
+}
+
+function Loading(props: LoadingProps) {
+    const joinedClassNames = joinClassNames(
+        styles.loading,
+        props.size ? styles[props.size] : styles.medium,
+        props.variant ? styles[props.variant] : styles.spinner,
+        props.className!
+    );
+
+    return (
+        <div className={joinedClassNames}>
+            <div></div>
+        </div>
+    );
+}
+
+export default Loading;

package/package.json

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

package/color.css

@@ -1,34 +0,0 @@
-html {
-    --primaryColor: #222222;
-    --primaryVariantColor: #303030;
-    --secondaryColor: #aa8a59;
-    --secondaryVariantColor: #aa8a59;
-    --backgroundColor: #ffffff;
-    --headerColor: #222222;
-    --surfaceColor: #ffffff;
-    --errorColor: #b00020;
-    --onPrimaryColor: #ffffff;
-    --onSecondaryColor: #000000;
-    --onBackgroundColor: #000000;
-    --onHeaderColor: #e9e9e9;
-    --onSurfaceColor: #000000;
-    --onErrorColor: #ffffff;
-}
-@media (prefers-color-scheme: dark) {
-    html {
-        --primaryColor: #8955ff;
-        --primaryVariantColor: #bb86fc;
-        --secondaryColor: #03dac6;
-        --secondaryVariantColor: #00d6c2;
-        --backgroundColor: #121212;
-        --headerColor: #222222;
-        --surfaceColor: #1d1d1d;
-        --errorColor: #cf6679;
-        --onPrimaryColor: #000000;
-        --onSecondaryColor: #000000;
-        --onBackgroundColor: #ffffff;
-        --onHeaderColor: #e9e9e9;
-        --onSurfaceColor: #ffffff;
-        --onErrorColor: #000000;
-    }
-}