@yourdash/uikit 1.0.42 → 1.0.43

package/src/components/card/card.module.scss

@@ -0,0 +1,78 @@
+/*!
+ * Copyright ©2025 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 "../../theme/themeValues.scss" 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: rgb(var(#{$theme+$background}));
+  color: rgb(var(#{$theme+$color}));
+  border: var(#{$theme+$border});
+  padding: 0;
+  border-radius: var(#{$theme+$radius});
+  overflow: hidden;
+}
+
+.clickable {
+  display: flex;
+  width: 100%;
+  cursor: pointer;
+
+  color: rgb(var(#{$theme+$button+$color}));
+  background: rgb(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: rgb(var(#{$theme+$button+$hover+$color}));
+    background: rgb(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: rgb(var(#{$theme+$button+$active+$color}));
+    background: rgb(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 {
+  box-sizing: border-box;
+  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%;
+}

package/src/components/container/UKContainer.tsx

@@ -0,0 +1,24 @@
+/*
+ * Copyright ©2025 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 UKContainer: FC<{ className?: string; level?: 0 | 1 | 2 | 3; children: ReactNode | ReactNode[]; disableRounding?: boolean }> = (
+  props,
+) => {
+  const level = props.level || useLevel();
+
+  return (
+    <div className={clippy(styles.component, props.className, props.disableRounding && styles.disableRounding, useLevelClass(level))}>
+      <IncrementLevel>{props.children}</IncrementLevel>
+    </div>
+  );
+};
+
+export default UKContainer;

package/src/components/container/container.module.css

@@ -0,0 +1,23 @@
+@charset "UTF-8";
+/*!
+ * Copyright ©2025 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+/*!
+ * Copyright ©2025 Ewsgit <https://ewsgit.uk> and YourDash <https://yourdash.ewsgit.uk> contributors.
+ * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
+ */
+.component {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  font-weight: var(--utfontwgt);
+  font-size: var(--utfontsize);
+  font-family: var(--utfontfam);
+  background: var(--utbgn);
+  padding: var(--utpdn);
+  border-radius: 0;
+  gap: var(--utgap);
+}
+
+/*# sourceMappingURL=container.module.css.map */

package/src/components/container/container.module.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["container.module.scss","../../theme/themeValues.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;ADOA;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA","file":"container.module.css"}

package/src/components/container/container.module.scss

@@ -0,0 +1,24 @@
+/*!
+ * Copyright ©2025 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 "../../theme/themeValues.scss" 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: rgb(var(#{$theme}#{$background}));
+  padding: var(#{$theme}#{$padding});
+  border-radius: $UKRadius;
+  gap: var(#{$theme}#{$gap});
+}
+
+.disableRounding {
+  border-radius: 0;
+}

package/src/components/contextMenu/UKContextMenu.tsx

@@ -0,0 +1,55 @@
+/*
+ * Copyright ©2025 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 React, { FC } from "react";
+import contextMenuRootContext from "./contextMenuRootContext.tsx";
+
+const UKContextMenu: 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 UKContextMenu;

package/src/components/contextMenu/contextMenuRoot.module.css

@@ -0,0 +1,34 @@
+@charset "UTF-8";
+/*!
+ * Copyright ©2025 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+/*!
+ * Copyright ©2025 Ewsgit <https://ewsgit.uk> and YourDash <https://yourdash.ewsgit.uk> contributors.
+ * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
+ */
+.component {
+  position: fixed;
+  z-index: 10000000;
+  overflow: hidden;
+  flex-direction: column;
+  width: 200px;
+  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5333333333);
+  box-sizing: border-box;
+  display: flex;
+  font-weight: var(--utfontwgt);
+  font-size: var(--utfontsize);
+  font-family: var(--utfontfam);
+  background: var(--utbgn);
+  color: var(--utcol);
+  border: var(--utbrd);
+  border-radius: var(--utrad);
+  gap: calc(var(--utgap) / 2);
+  padding: 0.5rem;
+}
+.component .button {
+  min-width: 100%;
+  text-align: start;
+}
+
+/*# sourceMappingURL=contextMenuRoot.module.css.map */

package/src/components/contextMenu/contextMenuRoot.module.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["contextMenuRoot.module.scss","../../theme/themeValues.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;ADOA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA","file":"contextMenuRoot.module.css"}

package/src/components/contextMenu/contextMenuRoot.module.scss

@@ -0,0 +1,31 @@
+/*!
+ * Copyright ©2025 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 "../../theme/themeValues.scss" 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: rgb(var(#{$theme+$background}));
+  color: rgb(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;
+  }
+}

package/src/components/contextMenu/contextMenuRoot.tsx

@@ -0,0 +1,83 @@
+/*
+ * Copyright ©2025 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 React from "react";
+import { FC, useEffect, useRef } from "react";
+import UKButton from "../button/UKButton.tsx";
+import ContextMenuRootContext from "./contextMenuRootContext.tsx";
+import styles from "./contextMenuRoot.module.scss";
+
+const ContextMenuRoot: FC<{ children: React.ReactNode | React.ReactNode[] }> = ({ children }) => {
+  const [position, setPosition] = React.useState({ x: 0, y: 0 });
+  const [visible, setVisible] = React.useState(false);
+  const [items, setItems] = React.useState([] as { label: string; onClick: () => void }[]);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    window.addEventListener("resize", () => {
+      setVisible(false);
+    });
+  }, []);
+
+  return (
+    <ContextMenuRootContext.Provider
+      value={{
+        createMenu: ({ x, y, width, height, items: i }) => {
+          const screenWidth = window.innerWidth;
+          const screenHeight = window.innerHeight;
+
+          const MENU_WIDTH = ref.current?.getBoundingClientRect().width || 200;
+          const MENU_HEIGHT = ref.current?.getBoundingClientRect().height || 200;
+
+          let resultX = x;
+          let resultY = y;
+
+          if (x + MENU_WIDTH >= screenWidth) {
+            resultX = screenWidth - MENU_WIDTH;
+          }
+
+          if (y + MENU_HEIGHT >= screenHeight) {
+            resultY = screenHeight - MENU_HEIGHT;
+          }
+
+          setPosition({
+            x: resultX,
+            y: resultY,
+          });
+
+          setItems(i);
+          setVisible(true);
+        },
+        destroyMenu: () => {
+          setVisible(false);
+        },
+      }}
+    >
+      <div
+        ref={ref}
+        style={{
+          display: visible ? "flex" : "none",
+          left: position.x,
+          top: position.y,
+        }}
+        className={styles.component}
+      >
+        {items.map((item) => {
+          return (
+            <UKButton
+              className={styles.button}
+              text={item.label}
+              onClick={item.onClick}
+              key={item.label}
+            />
+          );
+        })}
+      </div>
+      {children}
+    </ContextMenuRootContext.Provider>
+  );
+};
+
+export default ContextMenuRoot;

package/src/components/contextMenu/contextMenuRootContext.tsx

@@ -0,0 +1,16 @@
+/*
+ * Copyright ©2025 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 { createContext } from "react";
+
+export default createContext({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  createMenu: (data: { x: number; y: number; width: number; height: number; items: { label: string; onClick: () => void }[] }) => {
+    /* empty function */
+  },
+  destroyMenu: () => {
+    /* empty function */
+  },
+});

package/src/components/flex/UKFlex.tsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright ©2025 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 "./flex.module.scss";
+import React, { FC, ReactNode } from "react";
+
+const UKFlex: FC<{
+  direction: "row" | "column";
+  className?: string;
+  children: ReactNode | ReactNode[];
+  style?: React.CSSProperties;
+  centerHorizontally?: boolean;
+  centerVertically?: boolean;
+  padding?: boolean;
+}> = (props) => {
+  return (
+    <div
+      style={props.style}
+      className={clippy(
+        styles.component,
+        styles[props.direction],
+        props.className,
+        props.centerHorizontally && styles.centerHorizontally,
+        props.centerVertically && styles.centerVertically,
+        props.padding && styles.padding,
+      )}
+    >
+      {props.children}
+    </div>
+  );
+};
+
+export default UKFlex;

package/src/components/flex/flex.module.css

@@ -0,0 +1,35 @@
+@charset "UTF-8";
+/*!
+ * Copyright ©2025 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+/*!
+ * Copyright ©2025 Ewsgit <https://ewsgit.uk> and YourDash <https://yourdash.ewsgit.uk> contributors.
+ * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
+ */
+.component {
+  display: flex;
+  gap: var(--utgap);
+}
+
+.row {
+  flex-direction: row;
+}
+
+.column {
+  flex-direction: column;
+}
+
+.centerHorizontally {
+  align-items: center;
+}
+
+.centerVertically {
+  justify-content: center;
+}
+
+.padding {
+  padding: var(--utpdn);
+}
+
+/*# sourceMappingURL=flex.module.css.map */

package/src/components/flex/flex.module.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["flex.module.scss","../../theme/themeValues.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;ADOA;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE","file":"flex.module.css"}

package/src/components/flex/flex.module.scss

@@ -0,0 +1,31 @@
+/*!
+ * Copyright ©2025 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 "../../theme/themeValues.scss" as *;
+
+.component {
+  display: flex;
+  gap: var(#{$theme}#{$gap});
+}
+
+.row {
+  flex-direction: row;
+}
+
+.column {
+  flex-direction: column;
+}
+
+.centerHorizontally {
+  align-items: center;
+}
+
+.centerVertically {
+  justify-content: center;
+}
+
+.padding {
+  padding: var(#{$theme+$padding});
+}

package/src/components/heading/UKHeading.tsx

@@ -0,0 +1,72 @@
+/*
+ * Copyright ©2025 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 styles from "./heading.module.scss";
+import clippy from "@yourdash/shared/web/helpers/clippy.ts";
+import React, { FC, useContext } from "react";
+import LevelContext from "../../core/level";
+
+const UKHeading: FC<{ text: string; level?: 1 | 2 | 3 | 4 | 5 | 6; className?: string; style?: React.CSSProperties }> = (props) => {
+  const level = useContext(LevelContext);
+
+  switch (props.level || level || 1) {
+    case 1:
+      return (
+        <h1
+          className={clippy(styles.component, styles.h1component, props.className)}
+          style={props.style}
+        >
+          {props.text}
+        </h1>
+      );
+    case 2:
+      return (
+        <h2
+          className={clippy(styles.component, styles.h2component, props.className)}
+          style={props.style}
+        >
+          {props.text}
+        </h2>
+      );
+    case 3:
+      return (
+        <h3
+          className={clippy(styles.component, styles.h3component, props.className)}
+          style={props.style}
+        >
+          {props.text}
+        </h3>
+      );
+    case 4:
+      return (
+        <h4
+          className={clippy(styles.component, styles.h4component, props.className)}
+          style={props.style}
+        >
+          {props.text}
+        </h4>
+      );
+    case 5:
+      return (
+        <h5
+          className={clippy(styles.component, styles.h5component, props.className)}
+          style={props.style}
+        >
+          {props.text}
+        </h5>
+      );
+    case 6:
+      return (
+        <h6
+          className={clippy(styles.component, styles.h6component, props.className)}
+          style={props.style}
+        >
+          {props.text}
+        </h6>
+      );
+  }
+};
+
+export default UKHeading;

package/src/components/heading/heading.module.css

@@ -0,0 +1,47 @@
+@charset "UTF-8";
+/*!
+ * Copyright ©2025 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+/*!
+ * Copyright ©2025 Ewsgit <https://ewsgit.uk> and YourDash <https://yourdash.ewsgit.uk> contributors.
+ * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
+ */
+.component {
+  display: inline-block;
+  text-align: center;
+  margin: 0;
+  line-height: 1;
+}
+
+.h1component {
+  font-size: var(--uthedhe1size);
+  font-weight: var(--uthedhe1wgt);
+}
+
+.h2component {
+  font-size: var(--uthedhe2size);
+  font-weight: var(--uthedhe2wgt);
+}
+
+.h3component {
+  font-size: var(--uthedhe3size);
+  font-weight: var(--uthedhe3wgt);
+}
+
+.h4component {
+  font-size: var(--uthedhe4size);
+  font-weight: var(--uthedhe4wgt);
+}
+
+.h5component {
+  font-size: var(--uthedhe5size);
+  font-weight: var(--uthedhe5wgt);
+}
+
+.h6component {
+  font-size: var(--uthedhe6size);
+  font-weight: var(--uthedhe6wgt);
+}
+
+/*# sourceMappingURL=heading.module.css.map */

package/src/components/heading/heading.module.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["heading.module.scss","../../theme/themeValues.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;ADOA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA","file":"heading.module.css"}

package/src/components/heading/heading.module.scss

@@ -0,0 +1,43 @@
+/*!
+ * Copyright ©2025 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 "../../theme/themeValues.scss" as *;
+
+.component {
+  display: inline-block;
+  text-align: center;
+  margin: 0;
+  line-height: 1;
+}
+
+.h1component {
+  font-size: var(#{$theme}#{$heading}#{$h1}#{$size});
+  font-weight: var(#{$theme}#{$heading}#{$h1}#{$weight});
+}
+
+.h2component {
+  font-size: var(#{$theme}#{$heading}#{$h2}#{$size});
+  font-weight: var(#{$theme}#{$heading}#{$h2}#{$weight});
+}
+
+.h3component {
+  font-size: var(#{$theme}#{$heading}#{$h3}#{$size});
+  font-weight: var(#{$theme}#{$heading}#{$h3}#{$weight});
+}
+
+.h4component {
+  font-size: var(#{$theme}#{$heading}#{$h4}#{$size});
+  font-weight: var(#{$theme}#{$heading}#{$h4}#{$weight});
+}
+
+.h5component {
+  font-size: var(#{$theme}#{$heading}#{$h5}#{$size});
+  font-weight: var(#{$theme}#{$heading}#{$h5}#{$weight});
+}
+
+.h6component {
+  font-size: var(#{$theme}#{$heading}#{$h6}#{$size});
+  font-weight: var(#{$theme}#{$heading}#{$h6}#{$weight});
+}