@yakad/ui 1.2.76-beta → 1.2.78-beta

package/button/button.tsx

@@ -1,87 +1,87 @@
-import React from "react";
-import { joinClassNames } from "@yakad/lib";
-import SvgIcon from "../svgIcon/svgIcon";
-import Loading from "../loading/loading";
-import styles from "./button.module.css";
-
-interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
-    size?: "small" | "medium" | "large";
-    variant?:
-        | "text"
-        | "outlined"
-        | "filled"
-        | "filledtonal"
-        | "tonal"
-        | "elevated"
-        | "link"
-        | "fab";
-    borderStyle?: "none" | "semi" | "squircle" | "rounded";
-    icon?: JSX.Element;
-    iconPosition?: "start" | "end";
-    loadingPosition?: "auto" | "center";
-    loadingVariant?: "scaleOut" | "dots" | "spinner";
-    disabled?: boolean;
-}
-
-interface iconSizeMap {
-    small: number;
-    medium: number;
-    large: number;
-}
-
-const iconSizeMaps: iconSizeMap = {
-    small: 2,
-    medium: 2.4,
-    large: 3.2,
-};
-
-function Button(props: ButtonProps) {
-    const startWithChildren = props.iconPosition === "end";
-    const centerLoading =
-        !props.icon ||
-        (props.loadingVariant && props.loadingPosition === "center");
-
-    const joinedClassNames = joinClassNames(
-        styles.button,
-        props.variant ? styles[props.variant] : styles.text,
-        props.loadingVariant ? styles.loading : "",
-        props.loadingVariant && 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}>
-            {startWithChildren ? props.children : null}
-            {props.loadingVariant ? (
-                <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
-                            ? iconSizeMaps[props.size]
-                            : iconSizeMaps.medium
-                    }
-                >
-                    {props.icon}
-                </SvgIcon>
-            ) : null}
-            {!startWithChildren ? props.children : null}
-        </button>
-    );
-}
-
-export default Button;
+import React from "react";
+import { joinClassNames } from "@yakad/lib";
+import SvgIcon from "../svgIcon/svgIcon";
+import Loading from "../loading/loading";
+import styles from "./button.module.css";
+
+interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+    size?: "small" | "medium" | "large";
+    variant?:
+        | "text"
+        | "outlined"
+        | "filled"
+        | "filledtonal"
+        | "tonal"
+        | "elevated"
+        | "link"
+        | "fab";
+    borderStyle?: "none" | "semi" | "squircle" | "rounded";
+    icon?: JSX.Element;
+    iconPosition?: "start" | "end";
+    loadingPosition?: "auto" | "center";
+    loadingVariant?: "scaleOut" | "dots" | "spinner";
+    disabled?: boolean;
+}
+
+interface iconSizeMap {
+    small: number;
+    medium: number;
+    large: number;
+}
+
+const iconSizeMaps: iconSizeMap = {
+    small: 2,
+    medium: 2.4,
+    large: 3.2,
+};
+
+function Button(props: ButtonProps) {
+    const startWithChildren = props.iconPosition === "end";
+    const centerLoading =
+        !props.icon ||
+        (props.loadingVariant && props.loadingPosition === "center");
+
+    const joinedClassNames = joinClassNames(
+        styles.button,
+        props.variant ? styles[props.variant] : styles.text,
+        props.loadingVariant ? styles.loading : "",
+        props.loadingVariant && 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}>
+            {startWithChildren ? props.children : null}
+            {props.loadingVariant ? (
+                <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
+                            ? iconSizeMaps[props.size]
+                            : iconSizeMaps.medium
+                    }
+                >
+                    {props.icon}
+                </SvgIcon>
+            ) : null}
+            {!startWithChildren ? props.children : null}
+        </button>
+    );
+}
+
+export default Button;

package/card/card.d.ts

@@ -1,3 +1,3 @@
-import React from "react";
-declare function Card(props: React.HTMLAttributes<HTMLElement>): JSX.Element;
-export default Card;
+import React from "react";
+declare function Card(props: React.HTMLAttributes<HTMLElement>): JSX.Element;
+export default Card;

package/card/card.js

@@ -1,9 +1,9 @@
-import React from "react";
-import { joinClassNames } from "@yakad/lib";
-import styles from "./card.module.css";
-function Card(props) {
-    const joinedClassNames = joinClassNames(styles.card, props.className);
-    return (React.createElement("div", { ...props, className: joinedClassNames }, props.children));
-}
-export default Card;
+import React from "react";
+import { joinClassNames } from "@yakad/lib";
+import styles from "./card.module.css";
+function Card(props) {
+    const joinedClassNames = joinClassNames(styles.card, props.className);
+    return (React.createElement("div", { ...props, className: joinedClassNames }, props.children));
+}
+export default Card;
 //# sourceMappingURL=card.js.map

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.d.ts

@@ -1,6 +1,6 @@
-import React from "react";
-interface ClickAwayListenerProps extends React.HTMLAttributes<HTMLDivElement> {
-    onClickAway: React.MouseEventHandler<HTMLDivElement>;
-}
-declare function ClickAwayListener(props: ClickAwayListenerProps): JSX.Element;
-export default ClickAwayListener;
+import React from "react";
+interface ClickAwayListenerProps extends React.HTMLAttributes<HTMLDivElement> {
+    onClickAway: React.MouseEventHandler<HTMLDivElement>;
+}
+declare function ClickAwayListener(props: ClickAwayListenerProps): JSX.Element;
+export default ClickAwayListener;

package/clickAwayListener/clickAwayListener.js

@@ -1,17 +1,18 @@
-import React, { useEffect, useRef } from "react";
-function ClickAwayListener(props) {
-    const ref = useRef(null);
-    useEffect(() => {
-        const handleOutSideClick = (event) => {
-            if (ref.current && !ref.current.contains(event.target)) {
-                props.onClickAway && props.onClickAway(event);
-            }
-        };
-        document.addEventListener("click", handleOutSideClick, true);
-        // CleanUp When element unmount
-        return () => document.removeEventListener("click", handleOutSideClick, true);
-    }, [props.onClickAway]);
-    return React.createElement("div", { ref: ref }, props.children);
-}
-export default ClickAwayListener;
+"use client";
+import React, { useEffect, useRef } from "react";
+function ClickAwayListener(props) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const handleOutSideClick = (event) => {
+            if (ref.current && !ref.current.contains(event.target)) {
+                props.onClickAway && props.onClickAway(event);
+            }
+        };
+        document.addEventListener("click", handleOutSideClick, true);
+        // CleanUp When element unmount
+        return () => document.removeEventListener("click", handleOutSideClick, true);
+    }, [props.onClickAway]);
+    return React.createElement("div", { ref: ref }, props.children);
+}
+export default ClickAwayListener;
 //# sourceMappingURL=clickAwayListener.js.map

package/clickAwayListener/clickAwayListener.js.map

@@ -1 +1 @@
-{"version":3,"file":"clickAwayListener.js","sourceRoot":"","sources":["clickAwayListener.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAMjD,SAAS,iBAAiB,CAAC,KAA6B;IACpD,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAEzB,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC7C,IAAI,GAAG,CAAC,OAAO,IAAI,CAAE,GAAG,CAAC,OAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;gBAC7D,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,WAAW,CAAC,KAAY,CAAC,CAAC;aACxD;QACL,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,EAAE,IAAI,CAAC,CAAC;QAE7D,+BAA+B;QAC/B,OAAO,GAAG,EAAE,CACR,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,kBAAkB,EAAE,IAAI,CAAC,CAAC;IACxE,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAExB,OAAO,6BAAK,GAAG,EAAE,GAAG,IAAG,KAAK,CAAC,QAAQ,CAAO,CAAC;AACjD,CAAC;AAED,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"clickAwayListener.js","sourceRoot":"","sources":["clickAwayListener.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAMjD,SAAS,iBAAiB,CAAC,KAA6B;IACpD,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAEzB,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC7C,IAAI,GAAG,CAAC,OAAO,IAAI,CAAE,GAAG,CAAC,OAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;gBAC7D,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,WAAW,CAAC,KAAY,CAAC,CAAC;aACxD;QACL,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,EAAE,IAAI,CAAC,CAAC;QAE7D,+BAA+B;QAC/B,OAAO,GAAG,EAAE,CACR,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,kBAAkB,EAAE,IAAI,CAAC,CAAC;IACxE,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAExB,OAAO,6BAAK,GAAG,EAAE,GAAG,IAAG,KAAK,CAAC,QAAQ,CAAO,CAAC;AACjD,CAAC;AAED,eAAe,iBAAiB,CAAC"}

package/clickAwayListener/clickAwayListener.tsx

@@ -1,27 +1,29 @@
-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;
+"use client";
+
+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;

package/codeField/codeField.d.ts

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

package/codeField/codeField.js

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

package/codeField/codeField.module.css

@@ -1,23 +1,23 @@
-.input {
-    box-sizing: border-box;
-    display: block;
-    border: none;
-    padding: 0;
-    margin: 0;
-    margin-left: 0.5ch;
-    background: repeating-linear-gradient(
-            90deg,
-            #7d7d7d 0,
-            #7d7d7d 1ch,
-            transparent 0,
-            transparent 1.5ch
-        )
-        0 100%/100% 0.2rem no-repeat;
-    color: transparent;
-    text-shadow: 0 0 0 rgb(var(--secondaryColor, 98 91 113));
-    font: 5ch consolas, monospace;
-    letter-spacing: 0.5ch;
-}
-.input:focus {
-    outline: none;
-}
+.input {
+    box-sizing: border-box;
+    display: block;
+    border: none;
+    padding: 0;
+    margin: 0;
+    margin-left: 0.5ch;
+    background: repeating-linear-gradient(
+            90deg,
+            #7d7d7d 0,
+            #7d7d7d 1ch,
+            transparent 0,
+            transparent 1.5ch
+        )
+        0 100%/100% 0.2rem no-repeat;
+    color: transparent;
+    text-shadow: 0 0 0 rgb(var(--secondaryColor, 98 91 113));
+    font: 5ch consolas, monospace;
+    letter-spacing: 0.5ch;
+}
+.input:focus {
+    outline: none;
+}

package/codeField/codeField.tsx

@@ -1,32 +1,32 @@
-import React from "react";
-import { joinClassNames, joinStyles } from "@yakad/lib";
-import styles from "./codeField.module.css";
-
-interface CodeFieldsProps extends React.HTMLAttributes<HTMLInputElement> {
-    length?: number;
-    name?: string;
-    type?: string;
-}
-
-function CodeField(props: CodeFieldsProps) {
-    const joinedClassNames = joinClassNames(styles.input, props.className!);
-
-    const joinedStyles = joinStyles(
-        { width: "calc(1.5ch * " + props.length + ")" },
-        props.style!
-    );
-
-    return (
-        <input
-            {...props}
-            name={props.name}
-            type={props.type}
-            minLength={props.length}
-            maxLength={props.length}
-            className={joinedClassNames}
-            style={joinedStyles}
-        />
-    );
-}
-
-export default CodeField;
+import React from "react";
+import { joinClassNames, joinStyles } from "@yakad/lib";
+import styles from "./codeField.module.css";
+
+interface CodeFieldsProps extends React.HTMLAttributes<HTMLInputElement> {
+    length?: number;
+    name?: string;
+    type?: string;
+}
+
+function CodeField(props: CodeFieldsProps) {
+    const joinedClassNames = joinClassNames(styles.input, props.className!);
+
+    const joinedStyles = joinStyles(
+        { width: "calc(1.5ch * " + props.length + ")" },
+        props.style!
+    );
+
+    return (
+        <input
+            {...props}
+            name={props.name}
+            type={props.type}
+            minLength={props.length}
+            maxLength={props.length}
+            className={joinedClassNames}
+            style={joinedStyles}
+        />
+    );
+}
+
+export default CodeField;

package/container/container.d.ts

@@ -1,8 +1,8 @@
-import React from "react";
-declare type ScreenSize = "xs" | "sm" | "md" | "lg" | "xl";
-interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-    maxWidth?: ScreenSize;
-    background?: "dotted";
-}
-declare function Container(props: ContainerProps): JSX.Element;
-export default Container;
+import React from "react";
+declare type ScreenSize = "xs" | "sm" | "md" | "lg" | "xl";
+interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    maxWidth?: ScreenSize;
+    background?: "dotted";
+}
+declare function Container(props: ContainerProps): JSX.Element;
+export default Container;

package/container/container.js

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

package/container/container.module.css

@@ -1,24 +1,24 @@
-div.container {
-    display: flex;
-    flex-direction: inherit;
-    width: 100%;
-    padding: 2rem;
-    margin: auto;
-    box-sizing: border-box;
-}
-
-div.container.xs {
-    max-width: 44.4rem;
-}
-div.container.sm {
-    max-width: 60rem;
-}
-div.container.md {
-    max-width: 90rem;
-}
-div.container.lg {
-    max-width: 120rem;
-}
-div.container.xl {
-    max-width: 150rem;
-}
+div.container {
+    display: flex;
+    flex-direction: inherit;
+    width: 100%;
+    padding: 2rem;
+    margin: auto;
+    box-sizing: border-box;
+}
+
+div.container.xs {
+    max-width: 44.4rem;
+}
+div.container.sm {
+    max-width: 60rem;
+}
+div.container.md {
+    max-width: 90rem;
+}
+div.container.lg {
+    max-width: 120rem;
+}
+div.container.xl {
+    max-width: 150rem;
+}