@yakad/ui 1.2.75-beta → 1.2.77-beta

package/appBar/appBar.d.ts

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

package/appBar/appBar.js

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

package/appBar/appBar.module.css

@@ -1,15 +1,15 @@
-.header {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    box-sizing: border-box;
-    width: 100%;
-    height: 5rem;
-    gap: 1rem;
-    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;
+    gap: 1rem;
+    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.d.ts

@@ -1,13 +1,13 @@
-import React from "react";
-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;
-}
-declare function Button(props: ButtonProps): JSX.Element;
-export default Button;
+import React from "react";
+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;
+}
+declare function Button(props: ButtonProps): JSX.Element;
+export default Button;

package/button/button.js

@@ -1,28 +1,28 @@
-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";
-const iconSizeMaps = {
-    small: 2,
-    medium: 2.4,
-    large: 3.2,
-};
-function Button(props) {
-    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 (React.createElement("button", { ...props, className: joinedClassNames },
-        startWithChildren ? props.children : null,
-        props.loadingVariant ? (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
-                ? iconSizeMaps[props.size]
-                : iconSizeMaps.medium }, props.icon)) : null,
-        !startWithChildren ? props.children : null));
-}
-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";
+const iconSizeMaps = {
+    small: 2,
+    medium: 2.4,
+    large: 3.2,
+};
+function Button(props) {
+    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 (React.createElement("button", { ...props, className: joinedClassNames },
+        startWithChildren ? props.children : null,
+        props.loadingVariant ? (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
+                ? iconSizeMaps[props.size]
+                : iconSizeMaps.medium }, props.icon)) : null,
+        !startWithChildren ? props.children : null));
+}
+export default Button;
 //# sourceMappingURL=button.js.map

package/button/button.module.css

@@ -1,170 +1,170 @@
-.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);
-}
-.squircle {
-    border-radius: calc(var(--border-radius) / 2);
-}
-.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);
+}
+.squircle {
+    border-radius: calc(var(--border-radius) / 2);
+}
+.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;
+}