@yakad/ui 1.2.69-beta → 1.2.71-beta

package/appBar/appBar.module.css

@@ -1,14 +1,14 @@
-.header {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    box-sizing: border-box;
-    width: 100%;
-    height: 5rem;
-    padding: 0 2rem;
-    border-bottom: 0.1rem solid #7d7d7d40;
-    background: rgb(var(--surfaceContainerColor, 243 237 247));
-    color: rgb(var(--onSurfaceColor, 28 27 31));
-    fill: rgb(var(--onSurfaceColor, 28 27 31));
-    user-select: none;
-}
+.header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    height: 5rem;
+    padding: 0 2rem;
+    border-bottom: 0.1rem solid #7d7d7d40;
+    background: rgb(var(--surfaceContainerColor, 243 237 247));
+    color: rgb(var(--onSurfaceColor, 28 27 31));
+    fill: rgb(var(--onSurfaceColor, 28 27 31));
+    user-select: none;
+}

package/appBar/appBar.tsx

@@ -1,15 +1,15 @@
-import React from "react";
-import { joinClassNames, joinStyles } from "@yakad/lib";
-import styles from "./appBar.module.css";
-
-function AppBar(props: React.HTMLAttributes<HTMLElement>) {
-  const joinedClassNames = joinClassNames(styles.header, props.className!);
-
-  return (
-    <header {...props} className={joinedClassNames}>
-      {props.children}
-    </header>
-  );
-}
-
-export default AppBar;
+import React from "react";
+import { joinClassNames, joinStyles } from "@yakad/lib";
+import styles from "./appBar.module.css";
+
+function AppBar(props: React.HTMLAttributes<HTMLElement>) {
+  const joinedClassNames = joinClassNames(styles.header, props.className!);
+
+  return (
+    <header {...props} className={joinedClassNames}>
+      {props.children}
+    </header>
+  );
+}
+
+export default AppBar;

package/button/button.module.css

@@ -1,167 +1,167 @@
-.button {
-    position: relative;
-    display: flex;
-    align-items: center;
-    line-height: 3rem;
-    font-weight: 700;
-    padding: 0 var(--padding);
-    border: none;
-    background: none;
-    color: inherit;
-    fill: inherit;
-    user-select: none;
-    cursor: pointer;
-    box-sizing: border-box;
-}
-.small {
-    min-width: 3rem;
-    height: 3rem;
-    --padding: 2rem;
-    gap: 0.4rem;
-    font-size: 1.2rem;
-    --border-radius: 1.5rem;
-}
-.medium {
-    min-width: 4rem;
-    height: 4rem;
-    --padding: 2.4rem;
-    gap: 0.8rem;
-    font-size: 1.4rem;
-    --border-radius: 2rem;
-}
-.large {
-    min-width: 5rem;
-    height: 5rem;
-    --padding: 3.2rem;
-    gap: 1.1rem;
-    font-size: 1.8rem;
-    --border-radius: 2.5rem;
-}
-
-.iconButton {
-    padding: 0;
-    justify-content: center;
-}
-
-.none {
-    border-radius: 0;
-}
-.semi {
-    border-radius: 0 var(--border-radius) var(--border-radius) 0;
-}
-[dir="rtl"] .semi {
-    border-radius: var(--border-radius) 0 0 var(--border-radius);
-}
-.rounded {
-    border-radius: var(--border-radius);
-}
-
-@media (pointer: fine) {
-    .button:hover {
-        cursor: pointer;
-        box-shadow: inset 0 0 10rem #00000010;
-        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
-    }
-}
-.button:active {
-    box-shadow: inset 0 0 10rem #7d7d7d30;
-}
-.button:invalid {
-    border: 0.1rem solid rgb(var(--errorColor, 179 38 30));
-}
-.text {
-    color: rgb(var(--primaryColor, 11 87 208));
-    fill: rgb(var(--primaryColor, 11 87 208));
-}
-
-.outlined {
-    color: rgb(var(--primaryColor, 11 87 208));
-    fill: rgb(var(--primaryColor, 11 87 208));
-    border: 0.1rem solid #7d7d7d70;
-}
-.filled {
-    background: rgb(var(--primaryColor, 11 87 208));
-    color: rgb(var(--onPrimaryColor, 255 255 255));
-    fill: rgb(var(--onPrimaryColor, 255 255 255));
-}
-.filledtonal {
-    background: rgb(var(--primaryContainerColor, 211 227 253));
-    color: rgb(var(--onPrimaryContainerColor, 4 30 73));
-    fill: rgb(var(--onPrimaryContainerColor, 4 30 73));
-}
-.tonal {
-    background: rgb(var(--tertiaryColor, 196 238 208));
-    color: rgb(var(--onTertiaryColor, 7 39 17));
-    fill: rgb(var(--onTertiaryColor, 7 39 17));
-}
-.elevated {
-    background-color: rgb(var(--onSecondaryColor, 255 255 255));
-    color: rgb(var(--primaryColor, 11 87 208));
-    fill: rgb(var(--primaryColor, 11 87 208));
-    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
-}
-.link {
-    background: transparent;
-    display: flex;
-    position: relative;
-    transition: 0.3s;
-}
-.fab {
-    border-radius: 1.3rem;
-    height: 5.6rem;
-    min-width: unset;
-    padding: 1.6rem;
-    font-size: 1.6rem;
-    background: rgb(var(--primaryContainerColor, 211 227 253));
-    color: rgb(var(--onPrimaryContainerColor, 4 30 73));
-    fill: rgb(var(--onPrimaryContainerColor, 4, 30, 73));
-}
-.link:before {
-    content: "";
-    position: absolute;
-    bottom: 0.5rem;
-    left: 0;
-    right: 0;
-    width: 0;
-    height: 0.1rem;
-    padding: 0;
-    margin: 0 auto;
-    background-color: rgb(var(--primaryColor, 30 100 212));
-    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;
-}
+.button {
+    position: relative;
+    display: flex;
+    align-items: center;
+    line-height: 3rem;
+    font-weight: 700;
+    padding: 0 var(--padding);
+    border: none;
+    background: none;
+    color: inherit;
+    fill: inherit;
+    user-select: none;
+    cursor: pointer;
+    box-sizing: border-box;
+}
+.small {
+    min-width: 3rem;
+    height: 3rem;
+    --padding: 2rem;
+    gap: 0.4rem;
+    font-size: 1.2rem;
+    --border-radius: 1.5rem;
+}
+.medium {
+    min-width: 4rem;
+    height: 4rem;
+    --padding: 2.4rem;
+    gap: 0.8rem;
+    font-size: 1.4rem;
+    --border-radius: 2rem;
+}
+.large {
+    min-width: 5rem;
+    height: 5rem;
+    --padding: 3.2rem;
+    gap: 1.1rem;
+    font-size: 1.8rem;
+    --border-radius: 2.5rem;
+}
+
+.iconButton {
+    padding: 0;
+    justify-content: center;
+}
+
+.none {
+    border-radius: 0;
+}
+.semi {
+    border-radius: 0 var(--border-radius) var(--border-radius) 0;
+}
+[dir="rtl"] .semi {
+    border-radius: var(--border-radius) 0 0 var(--border-radius);
+}
+.rounded {
+    border-radius: var(--border-radius);
+}
+
+@media (pointer: fine) {
+    .button:hover {
+        cursor: pointer;
+        box-shadow: inset 0 0 10rem #00000010;
+        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+    }
+}
+.button:active {
+    box-shadow: inset 0 0 10rem #7d7d7d30;
+}
+.button:invalid {
+    border: 0.1rem solid rgb(var(--errorColor, 179 38 30));
+}
+.text {
+    color: rgb(var(--primaryColor, 11 87 208));
+    fill: rgb(var(--primaryColor, 11 87 208));
+}
+
+.outlined {
+    color: rgb(var(--primaryColor, 11 87 208));
+    fill: rgb(var(--primaryColor, 11 87 208));
+    border: 0.1rem solid #7d7d7d70;
+}
+.filled {
+    background: rgb(var(--primaryColor, 11 87 208));
+    color: rgb(var(--onPrimaryColor, 255 255 255));
+    fill: rgb(var(--onPrimaryColor, 255 255 255));
+}
+.filledtonal {
+    background: rgb(var(--primaryContainerColor, 211 227 253));
+    color: rgb(var(--onPrimaryContainerColor, 4 30 73));
+    fill: rgb(var(--onPrimaryContainerColor, 4 30 73));
+}
+.tonal {
+    background: rgb(var(--tertiaryColor, 196 238 208));
+    color: rgb(var(--onTertiaryColor, 7 39 17));
+    fill: rgb(var(--onTertiaryColor, 7 39 17));
+}
+.elevated {
+    background-color: rgb(var(--onSecondaryColor, 255 255 255));
+    color: rgb(var(--primaryColor, 11 87 208));
+    fill: rgb(var(--primaryColor, 11 87 208));
+    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+}
+.link {
+    background: transparent;
+    display: flex;
+    position: relative;
+    transition: 0.3s;
+}
+.fab {
+    border-radius: 1.3rem;
+    height: 5.6rem;
+    min-width: unset;
+    padding: 1.6rem;
+    font-size: 1.6rem;
+    background: rgb(var(--primaryContainerColor, 211 227 253));
+    color: rgb(var(--onPrimaryContainerColor, 4 30 73));
+    fill: rgb(var(--onPrimaryContainerColor, 4, 30, 73));
+}
+.link:before {
+    content: "";
+    position: absolute;
+    bottom: 0.5rem;
+    left: 0;
+    right: 0;
+    width: 0;
+    height: 0.1rem;
+    padding: 0;
+    margin: 0 auto;
+    background-color: rgb(var(--primaryColor, 30 100 212));
+    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

@@ -1,85 +1,85 @@
-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> {
-    loading?: boolean;
-    size?: "small" | "medium" | "large";
-    variant?:
-        | "text"
-        | "outlined"
-        | "filled"
-        | "filledtonal"
-        | "tonal"
-        | "elevated"
-        | "link"
-        | "fab";
-    borderStyle?: "none" | "semi" | "rounded";
-    icon?: JSX.Element;
-    iconPosition?: "start" | "end";
-    loadingPosition?: "default" | "center";
-    loadingVariant?: "scaleOut" | "dots" | "spinner";
-    disabled?: boolean;
-}
-
-interface svgSizeMap {
-    small: number;
-    medium: number;
-    large: number;
-}
-
-const svgSizeMaps: svgSizeMap = {
-    small: 2,
-    medium: 2.4,
-    large: 3,
-};
-
-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 : "",
-        props.className!
-    );
-
-    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]
-                            : svgSizeMaps.medium
-                    }
-                >
-                    {props.icon}
-                </SvgIcon>
-            ) : null}
-            {!startChildren ? props.children : null}
-        </button>
-    );
-}
-
-export default Button;
+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> {
+    loading?: boolean;
+    size?: "small" | "medium" | "large";
+    variant?:
+        | "text"
+        | "outlined"
+        | "filled"
+        | "filledtonal"
+        | "tonal"
+        | "elevated"
+        | "link"
+        | "fab";
+    borderStyle?: "none" | "semi" | "rounded";
+    icon?: JSX.Element;
+    iconPosition?: "start" | "end";
+    loadingPosition?: "default" | "center";
+    loadingVariant?: "scaleOut" | "dots" | "spinner";
+    disabled?: boolean;
+}
+
+interface svgSizeMap {
+    small: number;
+    medium: number;
+    large: number;
+}
+
+const svgSizeMaps: svgSizeMap = {
+    small: 2,
+    medium: 2.4,
+    large: 3,
+};
+
+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 : "",
+        props.className!
+    );
+
+    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]
+                            : svgSizeMaps.medium
+                    }
+                >
+                    {props.icon}
+                </SvgIcon>
+            ) : null}
+            {!startChildren ? props.children : null}
+        </button>
+    );
+}
+
+export default Button;

package/card/card.module.css

@@ -1,11 +1,11 @@
-.card {
-    width: 100%;
-    padding: 3rem;
-    box-sizing: border-box;
-    border-radius: 2rem;
-    background: rgb(var(--surfaceContainerHighestColor, 230 224 233));
-    color: rgb(var(--onSurfaceColor, 28 27 31));
-    fill: rgb(var(--onSurfaceColor, 28 27 31));
-    box-shadow: 0px 3px 3px -2px rgb(0 0 0 / 20%),
-        0px 3px 4px 0px rgb(0 0 0 / 14%), 0px 1px 8px 0px rgb(0 0 0 / 12%);
-}
+.card {
+    width: 100%;
+    padding: 3rem;
+    box-sizing: border-box;
+    border-radius: 2rem;
+    background: rgb(var(--surfaceContainerHighestColor, 230 224 233));
+    color: rgb(var(--onSurfaceColor, 28 27 31));
+    fill: rgb(var(--onSurfaceColor, 28 27 31));
+    box-shadow: 0px 3px 3px -2px rgb(0 0 0 / 20%),
+        0px 3px 4px 0px rgb(0 0 0 / 14%), 0px 1px 8px 0px rgb(0 0 0 / 12%);
+}

package/card/card.tsx

@@ -1,15 +1,15 @@
-import React from "react";
-import { joinClassNames } from "@yakad/lib";
-import styles from "./card.module.css";
-
-function Card(props: React.HTMLAttributes<HTMLElement>) {
-  const joinedClassNames = joinClassNames(styles.card, props.className!);
-
-  return (
-    <div {...props} className={joinedClassNames}>
-      {props.children}
-    </div>
-  );
-}
-
-export default Card;
+import React from "react";
+import { joinClassNames } from "@yakad/lib";
+import styles from "./card.module.css";
+
+function Card(props: React.HTMLAttributes<HTMLElement>) {
+  const joinedClassNames = joinClassNames(styles.card, props.className!);
+
+  return (
+    <div {...props} className={joinedClassNames}>
+      {props.children}
+    </div>
+  );
+}
+
+export default Card;

package/clickAwayListener/clickAwayListener.tsx

@@ -1,27 +1,27 @@
-import React, { useEffect, useRef } from "react";
-
-interface ClickAwayListenerProps extends React.HTMLAttributes<HTMLDivElement> {
-    onClickAway: React.MouseEventHandler<HTMLDivElement>;
-}
-
-function ClickAwayListener(props: ClickAwayListenerProps) {
-    const ref = useRef(null);
-
-    useEffect(() => {
-        const handleOutSideClick = (event: MouseEvent) => {
-            if (ref.current && !(ref.current as any).contains(event.target)) {
-                props.onClickAway && props.onClickAway(event as any);
-            }
-        };
-
-        document.addEventListener("click", handleOutSideClick, true);
-
-        // CleanUp When element unmount
-        return () =>
-            document.removeEventListener("click", handleOutSideClick, true);
-    }, [props.onClickAway]);
-
-    return <div ref={ref}>{props.children}</div>;
-}
-
-export default ClickAwayListener;
+import React, { useEffect, useRef } from "react";
+
+interface ClickAwayListenerProps extends React.HTMLAttributes<HTMLDivElement> {
+    onClickAway: React.MouseEventHandler<HTMLDivElement>;
+}
+
+function ClickAwayListener(props: ClickAwayListenerProps) {
+    const ref = useRef(null);
+
+    useEffect(() => {
+        const handleOutSideClick = (event: MouseEvent) => {
+            if (ref.current && !(ref.current as any).contains(event.target)) {
+                props.onClickAway && props.onClickAway(event as any);
+            }
+        };
+
+        document.addEventListener("click", handleOutSideClick, true);
+
+        // CleanUp When element unmount
+        return () =>
+            document.removeEventListener("click", handleOutSideClick, true);
+    }, [props.onClickAway]);
+
+    return <div ref={ref}>{props.children}</div>;
+}
+
+export default ClickAwayListener;