@yourdash/uikit 1.0.2 → 1.0.3

package/components/separator/separator.module.scss

@@ -1,33 +1,33 @@
-/*!
- * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
- * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
- */
-
-@import "../../theme/themeValues";
-
-.component {
-  display: flex;
-  border: var(#{$theme}#{$border});
-  border-bottom: none;
-  border-radius: var(#{$theme}#{$radius});
-}
-
-.row {
-  width: 0;
-  height: calc(100% - calc(var(#{$theme}#{$gap})) * 2);
-  margin: var(#{$theme}#{$gap});
-
-  &.disableMargin {
-    height: 100%;
-  }
-}
-
-.column {
-  width: calc(100% - calc(var(#{$theme}#{$gap})) * 2);
-  height: 0;
-  margin: var(#{$theme}#{$gap});
-
-  &.disableMargin {
-    width: 100%;
-  }
-}
+/*!
+ * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+@use "@yourdash/uikit/theme/themeValues" as *;
+
+.component {
+  display: flex;
+  border: var(#{$theme}#{$border});
+  border-bottom: none;
+  border-radius: var(#{$theme}#{$radius});
+}
+
+.row {
+  width: 0;
+  height: calc(100% - calc(var(#{$theme}#{$gap})) * 2);
+  margin: var(#{$theme}#{$gap});
+
+  &.disableMargin {
+    height: 100%;
+  }
+}
+
+.column {
+  width: calc(100% - calc(var(#{$theme}#{$gap})) * 2);
+  height: 0;
+  margin: var(#{$theme}#{$gap});
+
+  &.disableMargin {
+    width: 100%;
+  }
+}

package/components/separator/separator.tsx

@@ -1,14 +1,14 @@
-/*
- * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
- * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
- */
-
-import clippy from "@yourdash/shared/web/helpers/clippy.ts";
-import styles from "./separator.module.scss";
-import { FC } from "react";
-
-const Separator: FC<{ direction: "column" | "row"; disableMargin?: boolean }> = (props) => {
-  return <div className={clippy(styles.component, styles[props.direction], props.disableMargin && styles.disableMargin)} />;
-};
-
-export default Separator;
+/*
+ * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+import clippy from "@yourdash/shared/web/helpers/clippy.ts";
+import styles from "./separator.module.scss";
+import { FC } from "react";
+
+const Separator: FC<{ direction: "column" | "row"; disableMargin?: boolean }> = (props) => {
+  return <div className={clippy(styles.component, styles[props.direction], props.disableMargin && styles.disableMargin)} />;
+};
+
+export default Separator;

package/components/spinner/spinner.module.scss

@@ -1,93 +1,88 @@
-/*!
- * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
- * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
- */
-
-@import "@yourdash/uikit/theme/themeValues";
-
-.component {
-  padding: var(#{$theme+$padding});
-  border: var(#{$theme+$border});
-  border-radius: var(#{$theme+$radius});
-  background-color: var(#{$theme+$background});
-  user-select: none;
-  position: relative;
-  width: 8rem;
-  aspect-ratio: 1 / 1;
-}
-
-.container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  aspect-ratio: 1 / 1;
-  rotate: 135deg;
-  animation: 1.1s infinite ease-in-out infiniteSpin;
-}
-
-.spinnerBack {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  height: 3rem;
-  aspect-ratio: 1 / 1;
-  border-radius: 100rem;
-  background: #00000077;
-}
-
-.spinnerBorder {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  height: 3.5rem;
-  aspect-ratio: 1 / 1;
-  border-radius: 100rem;
-  background: var(#{$theme+$accent});
-}
-
-.spinnerCutoutContainer {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  height: 3.5rem;
-  aspect-ratio: 1 / 1;
-  border-radius: 100rem;
-}
-
-.spinnerCutout {
-  position: absolute;
-  height: 1.75rem;
-  aspect-ratio: 1 / 1;
-  background: var(#{$theme+$background});
-}
-
-.spinnerCutoutOne {
-  top: 0;
-  left: 0;
-}
-
-.spinnerCutoutTwo {
-  bottom: 0;
-  right: 0;
-}
-
-@keyframes infiniteSpin {
-  0% {
-    transform: rotate(0deg);
-  }
-  50% {
-    transform: rotate(200deg);
-  }
-  70% {
-    transform: rotate(175deg);
-  }
-  80% {
-    transform: rotate(180deg);
-  }
-  100% {
-    transform: rotate(180deg);
-  }
-}
+@use "@yourdash/uikit/theme/themeValues" as *;
+
+.component {
+  padding: var(#{$theme+$padding});
+  border: var(#{$theme+$border});
+  border-radius: var(#{$theme+$radius});
+  background-color: var(#{$theme+$background});
+  user-select: none;
+  position: relative;
+  width: 8rem;
+  aspect-ratio: 1 / 1;
+}
+
+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  aspect-ratio: 1 / 1;
+  rotate: 135deg;
+  animation: 1.1s infinite ease-in-out infiniteSpin;
+}
+
+.spinnerBack {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  height: 3rem;
+  aspect-ratio: 1 / 1;
+  border-radius: 100rem;
+  background: #00000077;
+}
+
+.spinnerBorder {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  height: 3.5rem;
+  aspect-ratio: 1 / 1;
+  border-radius: 100rem;
+  background: var(#{$theme+$accent});
+}
+
+.spinnerCutoutContainer {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  height: 3.5rem;
+  aspect-ratio: 1 / 1;
+  border-radius: 100rem;
+}
+
+.spinnerCutout {
+  position: absolute;
+  height: 1.75rem;
+  aspect-ratio: 1 / 1;
+  background: var(#{$theme+$background});
+}
+
+.spinnerCutoutOne {
+  top: 0;
+  left: 0;
+}
+
+.spinnerCutoutTwo {
+  bottom: 0;
+  right: 0;
+}
+
+@keyframes infiniteSpin {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(200deg);
+  }
+  70% {
+    transform: rotate(175deg);
+  }
+  80% {
+    transform: rotate(180deg);
+  }
+  100% {
+    transform: rotate(180deg);
+  }
+}

package/components/spinner/spinner.tsx

@@ -1,31 +1,31 @@
-/*
- * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
- * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
- */
-
-import clippy from "@yourdash/shared/web/helpers/clippy.ts";
-import styles from "./spinner.module.scss";
-import { FC } from "react";
-
-const Spinner: FC<{
-  // eslint-disable-next-line
-  style?: any;
-}> = (props) => {
-  return (
-    <div
-      className={styles.component}
-      style={props.style}
-    >
-      <section className={styles.container}>
-        <div className={styles.spinnerBorder} />
-        <div className={styles.spinnerBack} />
-        <div className={styles.spinnerCutoutContainer}>
-          <div className={clippy(styles.spinnerCutoutOne, styles.spinnerCutout)} />
-          <div className={clippy(styles.spinnerCutoutTwo, styles.spinnerCutout)} />
-        </div>
-      </section>
-    </div>
-  );
-};
-
-export default Spinner;
+/*
+ * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+import clippy from "@yourdash/shared/web/helpers/clippy.ts";
+import styles from "./spinner.module.scss";
+import { FC } from "react";
+
+const Spinner: FC<{
+  // eslint-disable-next-line
+  style?: any;
+}> = (props) => {
+  return (
+    <div
+      className={styles.component}
+      style={props.style}
+    >
+      <section className={styles.container}>
+        <div className={styles.spinnerBorder} />
+        <div className={styles.spinnerBack} />
+        <div className={styles.spinnerCutoutContainer}>
+          <div className={clippy(styles.spinnerCutoutOne, styles.spinnerCutout)} />
+          <div className={clippy(styles.spinnerCutoutTwo, styles.spinnerCutout)} />
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default Spinner;

package/components/subtext/subtext.module.scss

@@ -1,17 +1,17 @@
-/*!
- * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
- * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
- */
-
-@import "../../theme/themeValues";
-
-.component {
-  color: var(#{$theme+$subcolor});
-  display: inline-block;
-}
-
-.levelDefault {
-  font-weight: var(#{$theme}#{$font}#{$weight});
-  font-size: var(#{$theme}#{$font}#{$size});
-  font-family: var(#{$theme}#{$font}#{$family});
-}
+/*!
+ * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+@use "@yourdash/uikit/theme/themeValues" as *;
+
+.component {
+  color: var(#{$theme+$subcolor});
+  display: inline-block;
+}
+
+.levelDefault {
+  font-weight: var(#{$theme}#{$font}#{$weight});
+  font-size: var(#{$theme}#{$font}#{$size});
+  font-family: var(#{$theme}#{$font}#{$family});
+}

package/components/subtext/subtext.tsx

@@ -1,14 +1,14 @@
-/*
- * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
- * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
- */
-
-import clippy from "@yourdash/shared/web/helpers/clippy.ts";
-import styles from "./subtext.module.scss";
-import { FC } from "react";
-
-const Subtext: FC<{ text: string; className?: string }> = (props) => {
-  return <div className={clippy(styles.component, props.className)}>{props.text}</div>;
-};
-
-export default Subtext;
+/*
+ * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+import clippy from "@yourdash/shared/web/helpers/clippy.ts";
+import styles from "./subtext.module.scss";
+import { FC } from "react";
+
+const Subtext: FC<{ text: string; className?: string }> = (props) => {
+  return <div className={clippy(styles.component, props.className)}>{props.text}</div>;
+};
+
+export default Subtext;

package/components/tag/tag.module.scss

@@ -1,13 +1,13 @@
-/*!
- * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
- * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
- */
-
-@import "../../theme/themeValues";
-
-.component {
-  display: inline-block;
-  font-weight: var(#{$theme+$font+$weight});
-  font-size: var(#{$theme+$font+$size});
-  font-family: var(#{$theme+$font+$family});
-}
+/*!
+ * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+@use "@yourdash/uikit/theme/themeValues" as *;
+
+.component {
+  display: inline-block;
+  font-weight: var(#{$theme+$font+$weight});
+  font-size: var(#{$theme+$font+$size});
+  font-family: var(#{$theme+$font+$family});
+}

package/components/tag/tag.tsx

@@ -1,21 +1,21 @@
-/*
- * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
- * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
- */
-
-import clippy from "@yourdash/shared/web/helpers/clippy.ts";
-import styles from "./text.module.scss";
-import { FC } from "react";
-
-const Tag: FC<{ text: string; color: string; className?: string }> = (props) => {
-  return (
-    <div
-      className={clippy(styles.component, props.className)}
-      style={{ backgroundColor: props.color }}
-    >
-      {props.text}
-    </div>
-  );
-};
-
-export default Tag;
+/*
+ * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+import clippy from "@yourdash/shared/web/helpers/clippy.ts";
+import styles from "./text.module.scss";
+import { FC } from "react";
+
+const Tag: FC<{ text: string; color: string; className?: string }> = (props) => {
+  return (
+    <div
+      className={clippy(styles.component, props.className)}
+      style={{ backgroundColor: props.color }}
+    >
+      {props.text}
+    </div>
+  );
+};
+
+export default Tag;

package/components/text/text.module.scss

@@ -1,13 +1,13 @@
-/*!
- * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
- * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
- */
-
-@import "../../theme/themeValues";
-
-.component {
-  display: inline-block;
-  font-weight: var(#{$theme+$font+$weight});
-  font-size: var(#{$theme+$font+$size});
-  font-family: var(#{$theme+$font+$family});
-}
+/*!
+ * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+@use "@yourdash/uikit/theme/themeValues" as *;
+
+.component {
+  display: inline-block;
+  font-weight: var(#{$theme+$font+$weight});
+  font-size: var(#{$theme+$font+$size});
+  font-family: var(#{$theme+$font+$family});
+}

package/components/text/text.tsx

@@ -1,14 +1,14 @@
-/*
- * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
- * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
- */
-
-import clippy from "@yourdash/shared/web/helpers/clippy.ts";
-import styles from "./text.module.scss";
-import { FC } from "react";
-
-const Text: FC<{ text: string; className?: string }> = (props) => {
-  return <div className={clippy(styles.component, props.className)}>{props.text}</div>;
-};
-
-export default Text;
+/*
+ * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+import clippy from "@yourdash/shared/web/helpers/clippy.ts";
+import styles from "./text.module.scss";
+import { FC } from "react";
+
+const Text: FC<{ text: string; className?: string }> = (props) => {
+  return <div className={clippy(styles.component, props.className)}>{props.text}</div>;
+};
+
+export default Text;

package/components/textButton/textButton.module.scss

@@ -1,30 +1,30 @@
-/*!
- * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
- * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
- */
-
-@import "../../theme/themeValues";
-
-.component {
-  font-family: var(#{$theme}#{$font}#{$family});
-  text-align: center;
-  color: var(#{$theme}#{$button}#{$color});
-  transition: var(#{$theme}#{$button}#{$transition});
-  width: max-content;
-  cursor: pointer;
-  border: none;
-  background: transparent;
-  font-weight: var(#{$theme+$textbutton+$font+$weight});
-
-  &:hover {
-    color: var(#{$theme}#{$accent});
-    opacity: 0.8;
-    transition: var(#{$theme}#{$button}#{$hover}#{$transition});
-  }
-
-  &:active {
-    color: var(#{$theme}#{$accent});
-    opacity: 1;
-    transition: var(#{$theme}#{$button}#{$active}#{$transition});
-  }
-}
+/*!
+ * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+@use "@yourdash/uikit/theme/themeValues" as *;
+
+.component {
+  font-family: var(#{$theme}#{$font}#{$family});
+  text-align: center;
+  color: var(#{$theme}#{$button}#{$color});
+  transition: var(#{$theme}#{$button}#{$transition});
+  width: max-content;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  font-weight: var(#{$theme+$textbutton+$font+$weight});
+
+  &:hover {
+    color: var(#{$theme}#{$accent});
+    opacity: 0.8;
+    transition: var(#{$theme}#{$button}#{$hover}#{$transition});
+  }
+
+  &:active {
+    color: var(#{$theme}#{$accent});
+    opacity: 1;
+    transition: var(#{$theme}#{$button}#{$active}#{$transition});
+  }
+}

package/components/textButton/textButton.tsx

@@ -1,22 +1,22 @@
-/*
- * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
- * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
- */
-
-import clippy from "@yourdash/shared/web/helpers/clippy.ts";
-import styles from "./textButton.module.scss";
-import { FC } from "react";
-
-const TextButton: FC<{ onClick: () => void; text: string; className?: string }> = (props) => {
-  return (
-    <button
-      className={clippy(styles.component, props.className)}
-      onClick={props.onClick}
-      aria-label={props.text}
-    >
-      {props.text}
-    </button>
-  );
-};
-
-export default TextButton;
+/*
+ * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+import clippy from "@yourdash/shared/web/helpers/clippy.ts";
+import styles from "./textButton.module.scss";
+import { FC } from "react";
+
+const TextButton: FC<{ onClick: () => void; text: string; className?: string }> = (props) => {
+  return (
+    <button
+      className={clippy(styles.component, props.className)}
+      onClick={props.onClick}
+      aria-label={props.text}
+    >
+      {props.text}
+    </button>
+  );
+};
+
+export default TextButton;