@yourdash/uikit 1.0.2 → 1.0.3

package/components/card/card.module.scss

@@ -1,78 +1,78 @@
-/*!
- * 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});
-  color: var(#{$theme+$color});
-  border: var(#{$theme+$border});
-  padding: 0;
-  border-radius: var(#{$theme+$radius});
-  overflow: hidden;
-}
-
-.clickable {
-  display: flex;
-  width: 100%;
-  cursor: pointer;
-
-  color: var(#{$theme+$button+$color});
-  background: var(#{$theme+$button+$background});
-  border: var(#{$theme+$button+$border});
-  font-size: var(#{$theme+$button+$font+$size});
-  font-weight: var(#{$theme+$button+$font+$weight});
-  border-radius: var(#{$theme+$button+$radius});
-  transition:  var(#{$theme+$button+$transition});
-
-  &:hover {
-    color: var(#{$theme+$button+$hover+$color});
-    background: var(#{$theme+$button+$hover+$background});
-    border: var(#{$theme+$button+$hover+$border});
-    border-radius: var(#{$theme+$button+$hover+$radius});
-    transition: var(#{$theme+$button+$hover+$transition});
-  }
-
-  &:active {
-    color: var(#{$theme+$button+$active+$color});
-    background: var(#{$theme+$button+$active+$background});
-    border: var(#{$theme+$button+$active+$border});
-    border-radius: var(#{$theme+$button+$active+$radius});
-    transition: var(#{$theme+$button+$active+$transition});
-  }
-}
-
-.header {
-  border-left: none;
-  border-right: none;
-  border-top: none;
-  width: 100%;
-}
-
-.actions {
-  border: none;
-  display: flex;
-  align-items: flex-end;
-  width: 100%;
-  background: transparent;
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  gap: var(#{$theme+$gap});
-  padding: var(#{$theme+$padding});
-  // dont remember why this was here but it might be needed again
-  //padding-top: var(#{$theme+$gap});
-  //padding-bottom: var(#{$theme+$gap});
-  height: 100%;
-  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 {
+  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});
+  color: var(#{$theme+$color});
+  border: var(#{$theme+$border});
+  padding: 0;
+  border-radius: var(#{$theme+$radius});
+  overflow: hidden;
+}
+
+.clickable {
+  display: flex;
+  width: 100%;
+  cursor: pointer;
+
+  color: var(#{$theme+$button+$color});
+  background: var(#{$theme+$button+$background});
+  border: var(#{$theme+$button+$border});
+  font-size: var(#{$theme+$button+$font+$size});
+  font-weight: var(#{$theme+$button+$font+$weight});
+  border-radius: var(#{$theme+$button+$radius});
+  transition:  var(#{$theme+$button+$transition});
+
+  &:hover {
+    color: var(#{$theme+$button+$hover+$color});
+    background: var(#{$theme+$button+$hover+$background});
+    border: var(#{$theme+$button+$hover+$border});
+    border-radius: var(#{$theme+$button+$hover+$radius});
+    transition: var(#{$theme+$button+$hover+$transition});
+  }
+
+  &:active {
+    color: var(#{$theme+$button+$active+$color});
+    background: var(#{$theme+$button+$active+$background});
+    border: var(#{$theme+$button+$active+$border});
+    border-radius: var(#{$theme+$button+$active+$radius});
+    transition: var(#{$theme+$button+$active+$transition});
+  }
+}
+
+.header {
+  border-left: none;
+  border-right: none;
+  border-top: none;
+  width: 100%;
+}
+
+.actions {
+  border: none;
+  display: flex;
+  align-items: flex-end;
+  width: 100%;
+  background: transparent;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(#{$theme+$gap});
+  padding: var(#{$theme+$padding});
+  // dont remember why this was here but it might be needed again
+  //padding-top: var(#{$theme+$gap});
+  //padding-bottom: var(#{$theme+$gap});
+  height: 100%;
+  width: 100%;
+}

package/components/card/card.tsx

@@ -1,64 +1,64 @@
-/*
- * 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 IncrementLevel from "../../core/incrementLevel.tsx";
-import { useLevel, useLevelClass } from "../../core/level.tsx";
-import Box from "../box/box.tsx";
-import styles from "./card.module.scss";
-import { FC, Ref } from "react";
-import DecrementLevel from "../../core/decrementLevel.tsx";
-
-const Card: FC<{
-  level?: 0 | 1 | 2 | 3;
-  containerClassName?: string;
-  onClick?: () => void;
-  className?: string;
-  actionsClassName?: string;
-  headerClassName?: string;
-  children: React.ReactNode | React.ReactNode[];
-  actions?: React.ReactNode | React.ReactNode[];
-  header?: React.ReactNode | React.ReactNode[];
-  style?: React.CSSProperties;
-}> = (props) => {
-  const level = props.level || useLevel();
-
-  if (props.onClick) {
-    return (
-      <>
-        <IncrementLevel>
-          <button
-            style={props.style}
-            className={clippy(styles.component, useLevelClass(level), props.containerClassName, styles.clickable)}
-            onClick={props.onClick}
-          >
-            {props.header && <Box className={clippy(styles.header, props.headerClassName)}>{props.header}</Box>}
-            <div className={clippy(styles.content, props.className)}>{props.children}</div>
-            {props.actions && <Box className={clippy(styles.actions, props.actionsClassName)}>{props.actions}</Box>}
-          </button>
-        </IncrementLevel>
-      </>
-    );
-  }
-
-  return (
-    <>
-      <IncrementLevel>
-        <div
-          style={props.style}
-          className={clippy(styles.component, useLevelClass(level), props.containerClassName)}
-        >
-          {props.header && <Box className={clippy(styles.header, props.headerClassName)}>{props.header}</Box>}
-          <div className={clippy(styles.content, props.className)}>{props.children}</div>
-          <DecrementLevel>
-            {props.actions && <Box className={clippy(styles.actions, props.actionsClassName)}>{props.actions}</Box>}
-          </DecrementLevel>
-        </div>
-      </IncrementLevel>
-    </>
-  );
-};
-
-export default Card;
+/*
+ * 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 IncrementLevel from "../../core/incrementLevel.tsx";
+import { useLevel, useLevelClass } from "../../core/level.tsx";
+import Box from "../box/box.tsx";
+import styles from "./card.module.scss";
+import { FC, Ref } from "react";
+import DecrementLevel from "../../core/decrementLevel.tsx";
+
+const Card: FC<{
+  level?: 0 | 1 | 2 | 3;
+  containerClassName?: string;
+  onClick?: () => void;
+  className?: string;
+  actionsClassName?: string;
+  headerClassName?: string;
+  children: React.ReactNode | React.ReactNode[];
+  actions?: React.ReactNode | React.ReactNode[];
+  header?: React.ReactNode | React.ReactNode[];
+  style?: React.CSSProperties;
+}> = (props) => {
+  const level = props.level || useLevel();
+
+  if (props.onClick) {
+    return (
+      <>
+        <IncrementLevel>
+          <button
+            style={props.style}
+            className={clippy(styles.component, useLevelClass(level), props.containerClassName, styles.clickable)}
+            onClick={props.onClick}
+          >
+            {props.header && <Box className={clippy(styles.header, props.headerClassName)}>{props.header}</Box>}
+            <div className={clippy(styles.content, props.className)}>{props.children}</div>
+            {props.actions && <Box className={clippy(styles.actions, props.actionsClassName)}>{props.actions}</Box>}
+          </button>
+        </IncrementLevel>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <IncrementLevel>
+        <div
+          style={props.style}
+          className={clippy(styles.component, useLevelClass(level), props.containerClassName)}
+        >
+          {props.header && <Box className={clippy(styles.header, props.headerClassName)}>{props.header}</Box>}
+          <div className={clippy(styles.content, props.className)}>{props.children}</div>
+          <DecrementLevel>
+            {props.actions && <Box className={clippy(styles.actions, props.actionsClassName)}>{props.actions}</Box>}
+          </DecrementLevel>
+        </div>
+      </IncrementLevel>
+    </>
+  );
+};
+
+export default Card;

package/components/container/container.module.scss

@@ -1,20 +1,20 @@
-/*!
- * 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});
-  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});
+  padding: var(#{$theme}#{$padding});
+  border-radius: 0;
+  gap: var(#{$theme}#{$gap});
+}

package/components/container/container.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 "./container.module.scss";
-
-const Container: 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 Container;
+/*
+ * 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 "./container.module.scss";
+
+const Container: 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 Container;

package/components/contextMenu/contextMenu.tsx

@@ -1,55 +1,55 @@
-/*
- * 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 { FC } from "react";
-import contextMenuRootContext from "./contextMenuRootContext.tsx";
-
-const ContextMenu: FC<{
-  items: { label: string; onClick: () => void }[];
-  children: React.ReactNode | React.ReactNode[];
-  className?: string;
-}> = ({ items, children, className }) => {
-  return (
-    <contextMenuRootContext.Consumer>
-      {(rootContext) => {
-        return (
-          <div
-            className={className}
-            onContextMenu={(e) => {
-              e.stopPropagation();
-              e.preventDefault();
-
-              const menuRect = e.currentTarget.getBoundingClientRect();
-
-              rootContext.createMenu({
-                x: e.pageX,
-                y: e.pageY,
-                width: menuRect.width,
-                height: menuRect.height,
-                items: items,
-              });
-
-              const listener = (ev: MouseEvent) => {
-                ev.preventDefault();
-
-                rootContext.destroyMenu();
-
-                window.removeEventListener("click", listener);
-                window.removeEventListener("contextmenu", listener);
-              };
-
-              window.addEventListener("click", listener);
-              window.addEventListener("contextmenu", listener);
-            }}
-          >
-            {children}
-          </div>
-        );
-      }}
-    </contextMenuRootContext.Consumer>
-  );
-};
-
-export default ContextMenu;
+/*
+ * 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 { FC } from "react";
+import contextMenuRootContext from "./contextMenuRootContext.tsx";
+
+const ContextMenu: FC<{
+  items: { label: string; onClick: () => void }[];
+  children: React.ReactNode | React.ReactNode[];
+  className?: string;
+}> = ({ items, children, className }) => {
+  return (
+    <contextMenuRootContext.Consumer>
+      {(rootContext) => {
+        return (
+          <div
+            className={className}
+            onContextMenu={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+
+              const menuRect = e.currentTarget.getBoundingClientRect();
+
+              rootContext.createMenu({
+                x: e.pageX,
+                y: e.pageY,
+                width: menuRect.width,
+                height: menuRect.height,
+                items: items,
+              });
+
+              const listener = (ev: MouseEvent) => {
+                ev.preventDefault();
+
+                rootContext.destroyMenu();
+
+                window.removeEventListener("click", listener);
+                window.removeEventListener("contextmenu", listener);
+              };
+
+              window.addEventListener("click", listener);
+              window.addEventListener("contextmenu", listener);
+            }}
+          >
+            {children}
+          </div>
+        );
+      }}
+    </contextMenuRootContext.Consumer>
+  );
+};
+
+export default ContextMenu;

package/components/contextMenu/contextMenuRoot.module.scss

@@ -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 "../../theme/themeValues";
-
-.component {
-  position: fixed;
-  z-index: 10000000;
-  overflow: hidden;
-  flex-direction: column;
-  width: 200px;
-  box-shadow: 0 0 0.5rem #00000088;
-  box-sizing: border-box;
-  display: flex;
-  font-weight: var(#{$theme+$font+$weight});
-  font-size: var(#{$theme+$font+$size});
-  font-family: var(#{$theme+$font+$family});
-  background: var(#{$theme+$background});
-  color: var(#{$theme+$color});
-  border: var(#{$theme+$border});
-  border-radius: var(#{$theme+$radius});
-  gap: calc(var(#{$theme+$gap}) / 2);
-  padding: 0.5rem;
-
-  .button {
-    min-width: 100%;
-    text-align: start;
-  }
-}
+/*!
+ * 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 {
+  position: fixed;
+  z-index: 10000000;
+  overflow: hidden;
+  flex-direction: column;
+  width: 200px;
+  box-shadow: 0 0 0.5rem #00000088;
+  box-sizing: border-box;
+  display: flex;
+  font-weight: var(#{$theme+$font+$weight});
+  font-size: var(#{$theme+$font+$size});
+  font-family: var(#{$theme+$font+$family});
+  background: var(#{$theme+$background});
+  color: var(#{$theme+$color});
+  border: var(#{$theme+$border});
+  border-radius: var(#{$theme+$radius});
+  gap: calc(var(#{$theme+$gap}) / 2);
+  padding: 0.5rem;
+
+  .button {
+    min-width: 100%;
+    text-align: start;
+  }
+}