@yourdash/uikit 1.0.2 → 1.0.3

package/README.md

@@ -1,2 +1,2 @@
-# YourDash UIKit
-@yourdash/uikit is a reactjs ui library with element level hirearchy support, custom theme scss support and mobile adaptability
+# YourDash UIKit
+@yourdash/uikit is a reactjs ui library with element level hirearchy support, custom theme scss support and mobile adaptability

package/components/box/box.module.scss

@@ -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 "../../theme/themeValues";
-
-.component {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-
-  font-weight: var(#{$theme}#{$font}#{$weight});
-  font-size: var(#{$theme}#{$font}#{$size});
-  font-family: var(#{$theme}#{$font}#{$family});
-  background: var(#{$theme}#{$background});
-  border: var(#{$theme}#{$border});
-  padding: var(#{$theme}#{$padding});
-  border-radius: 0;
-  gap: var(#{$theme}#{$gap});
-}
+/*!
+ * 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 {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  font-weight: var(#{$theme}#{$font}#{$weight});
+  font-size: var(#{$theme}#{$font}#{$size});
+  font-family: var(#{$theme}#{$font}#{$family});
+  background: var(#{$theme}#{$background});
+  border: var(#{$theme}#{$border});
+  padding: var(#{$theme}#{$padding});
+  border-radius: 0;
+  gap: var(#{$theme}#{$gap});
+}

package/components/box/box.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 { FC, ReactNode } from "react";
-import IncrementLevel from "../../core/incrementLevel.tsx";
-import { useLevel, useLevelClass } from "../../core/level.tsx";
-import styles from "./box.module.scss";
-
-const Box: FC<{ className?: string; level?: 0 | 1 | 2 | 3; children: ReactNode | ReactNode[] }> = (props) => {
-  const level = props.level || useLevel();
-
-  return (
-    <div className={clippy(styles.component, props.className, useLevelClass(level))}>
-      <IncrementLevel>{props.children}</IncrementLevel>
-    </div>
-  );
-};
-
-export default Box;
+/*
+ * 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 { FC, ReactNode } from "react";
+import IncrementLevel from "../../core/incrementLevel.tsx";
+import { useLevel, useLevelClass } from "../../core/level.tsx";
+import styles from "./box.module.scss";
+
+const Box: FC<{ className?: string; level?: 0 | 1 | 2 | 3; children: ReactNode | ReactNode[] }> = (props) => {
+  const level = props.level || useLevel();
+
+  return (
+    <div className={clippy(styles.component, props.className, useLevelClass(level))}>
+      <IncrementLevel>{props.children}</IncrementLevel>
+    </div>
+  );
+};
+
+export default Box;

package/components/button/button.module.scss

@@ -1,46 +1,47 @@
-/*!
- * 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});
-  min-width: 6rem;
-  padding: 0 var(#{$theme}#{$button}#{$padding}#{$horizontal});
-  color: var(#{$theme}#{$button}#{$color});
-  border: var(#{$theme}#{$button}#{$border});
-  border-radius: var(#{$theme}#{$button}#{$radius});
-  background: var(#{$theme}#{$button}#{$background});
-  transition: var(#{$theme}#{$button}#{$transition});
-  height: var(#{$theme+$input+$height});
-  width: max-content;
-  cursor: pointer;
-
-  &:hover {
-    color: var(#{$theme}#{$button}#{$hover}#{$color});
-    border: var(#{$theme}#{$button}#{$hover}#{$border});
-    border-radius: var(#{$theme}#{$button}#{$hover}#{$radius});
-    background: var(#{$theme}#{$button}#{$hover}#{$background});
-    transition: var(#{$theme}#{$button}#{$hover}#{$transition});
-  }
-
-  &:active {
-    color: var(#{$theme}#{$button}#{$active}#{$color});
-    border: var(#{$theme}#{$button}#{$active}#{$border});
-    border-radius: var(#{$theme}#{$button}#{$active}#{$radius});
-    background: var(#{$theme}#{$button}#{$active}#{$background});
-    transition: var(#{$theme}#{$button}#{$active}#{$transition});
-  }
-
-  &:disabled {
-    opacity: 0.8;
-
-    color: var(#{$theme}#{$button}#{$color});
-    border: var(#{$theme}#{$button}#{$border});
-    border-radius: var(#{$theme}#{$button}#{$radius});
-    background: var(#{$theme}#{$button}#{$background});
-    cursor: not-allowed;
-  }
-}
+/*!
+ * 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});
+  padding: 0 var(#{$theme}#{$button}#{$padding}#{$horizontal});
+  color: var(#{$theme}#{$button}#{$color});
+  border: var(#{$theme}#{$button}#{$border});
+  border-radius: var(#{$theme}#{$button}#{$radius});
+  background: var(#{$theme}#{$button}#{$background});
+  transition: var(#{$theme}#{$button}#{$transition});
+  height: var(#{$theme+$input+$height});
+  width: max-content;
+  cursor: pointer;
+  padding-left: var(#{$theme+$padding});
+  padding-right: var(#{$theme+$padding});
+
+  &:hover {
+    color: var(#{$theme}#{$button}#{$hover}#{$color});
+    border: var(#{$theme}#{$button}#{$hover}#{$border});
+    border-radius: var(#{$theme}#{$button}#{$hover}#{$radius});
+    background: var(#{$theme}#{$button}#{$hover}#{$background});
+    transition: var(#{$theme}#{$button}#{$hover}#{$transition});
+  }
+
+  &:active {
+    color: var(#{$theme}#{$button}#{$active}#{$color});
+    border: var(#{$theme}#{$button}#{$active}#{$border});
+    border-radius: var(#{$theme}#{$button}#{$active}#{$radius});
+    background: var(#{$theme}#{$button}#{$active}#{$background});
+    transition: var(#{$theme}#{$button}#{$active}#{$transition});
+  }
+
+  &:disabled {
+    opacity: 0.8;
+
+    color: var(#{$theme}#{$button}#{$color});
+    border: var(#{$theme}#{$button}#{$border});
+    border-radius: var(#{$theme}#{$button}#{$radius});
+    background: var(#{$theme}#{$button}#{$background});
+    cursor: not-allowed;
+  }
+}

package/components/button/button.tsx

@@ -1,24 +1,24 @@
-/*
- * 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 "./button.module.scss";
-import { FC } from "react";
-
-const Button: FC<{ onClick: () => void; text: string; className?: string; disabled?: boolean }> = (props) => {
-  return (
-    <button
-      className={clippy(styles.component, props.className)}
-      onClick={props.onClick}
-      aria-label={props.text}
-      disabled={props.disabled}
-      type={"button"}
-    >
-      {props.text}
-    </button>
-  );
-};
-
-export default Button;
+/*
+ * 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 "./button.module.scss";
+import { FC } from "react";
+
+const Button: FC<{ onClick: () => void; text: string; className?: string; disabled?: boolean }> = (props) => {
+  return (
+    <button
+      className={clippy(styles.component, props.className)}
+      onClick={props.onClick}
+      aria-label={props.text}
+      disabled={props.disabled}
+      type={"button"}
+    >
+      {props.text}
+    </button>
+  );
+};
+
+export default Button;

package/components/buttonLink/buttonLink.module.scss

@@ -1,51 +1,51 @@
-/*!
- * 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;
-  min-width: 6rem;
-  padding: 0 var(#{$theme}#{$button}#{$padding}#{$horizontal});
-  color: var(#{$theme}#{$button}#{$color});
-  border: var(#{$theme}#{$button}#{$border});
-  border-radius: var(#{$theme}#{$button}#{$radius});
-  background: var(#{$theme}#{$button}#{$background});
-  transition: var(#{$theme}#{$button}#{$transition});
-  height: var(#{$theme+$input+$height});
-  width: max-content;
-  cursor: pointer;
-
-  &:hover {
-    color: var(#{$theme}#{$button}#{$hover}#{$color});
-    border: var(#{$theme}#{$button}#{$hover}#{$border});
-    border-radius: var(#{$theme}#{$button}#{$hover}#{$radius});
-    background: var(#{$theme}#{$button}#{$hover}#{$background});
-    transition: var(#{$theme}#{$button}#{$hover}#{$transition});
-  }
-
-  &:active {
-    color: var(#{$theme}#{$button}#{$active}#{$color});
-    border: var(#{$theme}#{$button}#{$active}#{$border});
-    border-radius: var(#{$theme}#{$button}#{$active}#{$radius});
-    background: var(#{$theme}#{$button}#{$active}#{$background});
-    transition: var(#{$theme}#{$button}#{$active}#{$transition});
-  }
-
-  &:disabled {
-    opacity: 0.8;
-
-    color: var(#{$theme}#{$button}#{$color});
-    border: var(#{$theme}#{$button}#{$border});
-    border-radius: var(#{$theme}#{$button}#{$radius});
-    background: var(#{$theme}#{$button}#{$background});
-    cursor: not-allowed;
-  }
-}
-
-.link {
-  display: inline;
-}
+/*!
+ * 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;
+  min-width: 6rem;
+  padding: 0 var(#{$theme}#{$button}#{$padding}#{$horizontal});
+  color: var(#{$theme}#{$button}#{$color});
+  border: var(#{$theme}#{$button}#{$border});
+  border-radius: var(#{$theme}#{$button}#{$radius});
+  background: var(#{$theme}#{$button}#{$background});
+  transition: var(#{$theme}#{$button}#{$transition});
+  height: var(#{$theme+$input+$height});
+  width: max-content;
+  cursor: pointer;
+
+  &:hover {
+    color: var(#{$theme}#{$button}#{$hover}#{$color});
+    border: var(#{$theme}#{$button}#{$hover}#{$border});
+    border-radius: var(#{$theme}#{$button}#{$hover}#{$radius});
+    background: var(#{$theme}#{$button}#{$hover}#{$background});
+    transition: var(#{$theme}#{$button}#{$hover}#{$transition});
+  }
+
+  &:active {
+    color: var(#{$theme}#{$button}#{$active}#{$color});
+    border: var(#{$theme}#{$button}#{$active}#{$border});
+    border-radius: var(#{$theme}#{$button}#{$active}#{$radius});
+    background: var(#{$theme}#{$button}#{$active}#{$background});
+    transition: var(#{$theme}#{$button}#{$active}#{$transition});
+  }
+
+  &:disabled {
+    opacity: 0.8;
+
+    color: var(#{$theme}#{$button}#{$color});
+    border: var(#{$theme}#{$button}#{$border});
+    border-radius: var(#{$theme}#{$button}#{$radius});
+    background: var(#{$theme}#{$button}#{$background});
+    cursor: not-allowed;
+  }
+}
+
+.link {
+  display: inline;
+}

package/components/buttonLink/buttonLink.tsx

@@ -1,27 +1,27 @@
-/*
- * 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 Button from "../button/button.tsx";
-import { useNavigate } from "react-router-dom";
-import styles from "./buttonLink.module.scss";
-import { FC } from "react";
-
-const ButtonLink: FC<{ text: string; to: string; className?: string }> = (props) => {
-  const navigate = useNavigate();
-
-  return (
-    <Button
-      onClick={() => {
-        navigate(props.to);
-        return 0;
-      }}
-      text={props.text}
-      className={clippy(styles.component, props.className)}
-    />
-  );
-};
-
-export default ButtonLink;
+/*
+ * 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 Button from "../button/button.tsx";
+import { useNavigate } from "react-router-dom";
+import styles from "./buttonLink.module.scss";
+import { FC } from "react";
+
+const ButtonLink: FC<{ text: string; to: string; className?: string }> = (props) => {
+  const navigate = useNavigate();
+
+  return (
+    <Button
+      onClick={() => {
+        navigate(props.to);
+        return 0;
+      }}
+      text={props.text}
+      className={clippy(styles.component, props.className)}
+    />
+  );
+};
+
+export default ButtonLink;

package/components/buttonWithIcon/buttonWithIcon.module.scss

@@ -1,56 +1,56 @@
-/*!
- * 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;
-  align-items: center;
-  justify-content: center;
-  font-family: var(#{$theme}#{$font}#{$family});
-  text-align: center;
-  min-width: 6rem;
-  padding: 0 var(#{$theme}#{$button}#{$padding}#{$horizontal}) 0 0;
-  color: var(#{$theme}#{$button}#{$color});
-  border: var(#{$theme}#{$button}#{$border});
-  border-radius: var(#{$theme}#{$button}#{$radius});
-  background: var(#{$theme}#{$button}#{$background});
-  transition: var(#{$theme}#{$button}#{$transition});
-  height: var(#{$theme+$input+$height});
-  width: max-content;
-  gap: var(#{$theme+$input+$padding+$horizontal});
-  cursor: pointer;
-
-  &:hover {
-    color: var(#{$theme}#{$button}#{$hover}#{$color});
-    border: var(#{$theme}#{$button}#{$hover}#{$border});
-    border-radius: var(#{$theme}#{$button}#{$hover}#{$radius});
-    background: var(#{$theme}#{$button}#{$hover}#{$background});
-    transition: var(#{$theme}#{$button}#{$hover}#{$transition});
-  }
-
-  &:active {
-    color: var(#{$theme}#{$button}#{$active}#{$color});
-    border: var(#{$theme}#{$button}#{$active}#{$border});
-    border-radius: var(#{$theme}#{$button}#{$active}#{$radius});
-    background: var(#{$theme}#{$button}#{$active}#{$background});
-    transition: var(#{$theme}#{$button}#{$active}#{$transition});
-  }
-
-  &:disabled {
-    opacity: 0.8;
-
-    color: var(#{$theme}#{$button}#{$color});
-    border: var(#{$theme}#{$button}#{$border});
-    border-radius: var(#{$theme}#{$button}#{$radius});
-    background: var(#{$theme}#{$button}#{$background});
-    cursor: not-allowed;
-  }
-}
-
-.icon {
-  margin-left: calc(var(#{$theme}#{$button}#{$padding}#{$horizontal}) / 2);
-  margin-right: calc(var(#{$theme}#{$button}#{$padding}#{$horizontal}) / 4);
-}
+/*!
+ * 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;
+  align-items: center;
+  justify-content: center;
+  font-family: var(#{$theme}#{$font}#{$family});
+  text-align: center;
+  min-width: 6rem;
+  padding: 0 var(#{$theme}#{$button}#{$padding}#{$horizontal}) 0 0;
+  color: var(#{$theme}#{$button}#{$color});
+  border: var(#{$theme}#{$button}#{$border});
+  border-radius: var(#{$theme}#{$button}#{$radius});
+  background: var(#{$theme}#{$button}#{$background});
+  transition: var(#{$theme}#{$button}#{$transition});
+  height: var(#{$theme+$input+$height});
+  width: max-content;
+  gap: var(#{$theme+$input+$padding+$horizontal});
+  cursor: pointer;
+
+  &:hover {
+    color: var(#{$theme}#{$button}#{$hover}#{$color});
+    border: var(#{$theme}#{$button}#{$hover}#{$border});
+    border-radius: var(#{$theme}#{$button}#{$hover}#{$radius});
+    background: var(#{$theme}#{$button}#{$hover}#{$background});
+    transition: var(#{$theme}#{$button}#{$hover}#{$transition});
+  }
+
+  &:active {
+    color: var(#{$theme}#{$button}#{$active}#{$color});
+    border: var(#{$theme}#{$button}#{$active}#{$border});
+    border-radius: var(#{$theme}#{$button}#{$active}#{$radius});
+    background: var(#{$theme}#{$button}#{$active}#{$background});
+    transition: var(#{$theme}#{$button}#{$active}#{$transition});
+  }
+
+  &:disabled {
+    opacity: 0.8;
+
+    color: var(#{$theme}#{$button}#{$color});
+    border: var(#{$theme}#{$button}#{$border});
+    border-radius: var(#{$theme}#{$button}#{$radius});
+    background: var(#{$theme}#{$button}#{$background});
+    cursor: not-allowed;
+  }
+}
+
+.icon {
+  margin-left: calc(var(#{$theme}#{$button}#{$padding}#{$horizontal}) / 2);
+  margin-right: calc(var(#{$theme}#{$button}#{$padding}#{$horizontal}) / 4);
+}

package/components/buttonWithIcon/buttonWithIcon.tsx

@@ -1,36 +1,36 @@
-/*
- * 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 Icon from "../icon/icon.tsx";
-import { UKIcon } from "../icon/iconDictionary.ts";
-import styles from "./buttonWithIcon.module.scss";
-import { FC } from "react";
-
-const ButtonWithIcon: FC<{
-  icon: UKIcon;
-  onClick: () => void;
-  text: string;
-  className?: string;
-  disabled?: boolean;
-}> = (props) => {
-  return (
-    <button
-      className={clippy(styles.component, props.className)}
-      onClick={props.onClick}
-      aria-label={props.text}
-      disabled={props.disabled}
-    >
-      <Icon
-        size={"1.25rem"}
-        className={styles.icon}
-        icon={props.icon}
-      />
-      {props.text}
-    </button>
-  );
-};
-
-export default ButtonWithIcon;
+/*
+ * 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 Icon from "../icon/icon.tsx";
+import { UKIcon } from "../icon/iconDictionary.ts";
+import styles from "./buttonWithIcon.module.scss";
+import { FC } from "react";
+
+const ButtonWithIcon: FC<{
+  icon: UKIcon;
+  onClick: () => void;
+  text: string;
+  className?: string;
+  disabled?: boolean;
+}> = (props) => {
+  return (
+    <button
+      className={clippy(styles.component, props.className)}
+      onClick={props.onClick}
+      aria-label={props.text}
+      disabled={props.disabled}
+    >
+      <Icon
+        size={"1.25rem"}
+        className={styles.icon}
+        icon={props.icon}
+      />
+      {props.text}
+    </button>
+  );
+};
+
+export default ButtonWithIcon;