@yourdash/uikit 0.0.1 → 0.1.0

package/lib/components/spinner/spinner.module.css

@@ -0,0 +1,93 @@
+@charset "UTF-8";
+/*!
+ * 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 {
+  padding: var(--utpdn);
+  border: var(--utbrd);
+  border-radius: var(--utrad);
+  background-color: var(--utbgn);
+  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: rgba(0, 0, 0, 0.4666666667);
+}
+
+.spinnerBorder {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  height: 3.5rem;
+  aspect-ratio: 1/1;
+  border-radius: 100rem;
+  background: var(--utacn);
+}
+
+.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(--utbgn);
+}
+
+.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);
+  }
+}
+
+/*# sourceMappingURL=spinner.module.css.map */

package/lib/components/spinner/spinner.module.css.map

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

package/lib/components/spinner/spinner.module.scss

@@ -0,0 +1,88 @@
+@use "../../theme/themeValues.scss" as *;
+
+.component {
+  padding: var(#{$theme+$padding});
+  border: var(#{$theme+$border});
+  border-radius: var(#{$theme+$radius});
+  background-color: rgb(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: rgb(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: rgb(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/lib/components/subtext/UKSubtext.tsx

@@ -0,0 +1,14 @@
+/*
+ * 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 "../../core/clippy";
+import styles from "./subtext.module.scss";
+import { FC } from "react";
+
+const UKSubtext: FC<{ text: string; className?: string }> = (props) => {
+  return <div className={clippy(styles.component, props.className)}>{props.text}</div>;
+};
+
+export default UKSubtext;

package/lib/components/subtext/subtext.module.css

@@ -0,0 +1,21 @@
+@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 {
+  color: var(--utscl);
+  display: inline-block;
+}
+
+.levelDefault {
+  font-weight: var(--utfontwgt);
+  font-size: var(--utfontsize);
+  font-family: var(--utfontfam);
+}
+
+/*# sourceMappingURL=subtext.module.css.map */

package/lib/components/subtext/subtext.module.css.map

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

package/lib/components/subtext/subtext.module.scss

@@ -0,0 +1,17 @@
+/*!
+ * 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 {
+  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/lib/components/tag/UKTag.tsx

@@ -0,0 +1,21 @@
+/*
+ * 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 "../../core/clippy.js";
+import styles from "./tag.module.scss";
+import { FC } from "react";
+
+const UKTag: 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 UKTag;

package/lib/components/tag/tag.module.css

@@ -0,0 +1,17 @@
+@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;
+  font-weight: var(--utfontwgt);
+  font-size: var(--utfontsize);
+  font-family: var(--utfontfam);
+}
+
+/*# sourceMappingURL=tag.module.css.map */

package/lib/components/tag/tag.module.css.map

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

package/lib/components/tag/tag.module.scss

@@ -0,0 +1,13 @@
+/*!
+ * 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;
+  font-weight: var(#{$theme+$font+$weight});
+  font-size: var(#{$theme+$font+$size});
+  font-family: var(#{$theme+$font+$family});
+}

package/lib/components/text/UKText.tsx

@@ -0,0 +1,14 @@
+/*
+ * 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 "../../core/clippy.ts";
+import styles from "./text.module.scss";
+import { FC } from "react";
+
+const UKText: FC<{ text: string; className?: string }> = (props) => {
+  return <div className={clippy(styles.component, props.className)}>{props.text}</div>;
+};
+
+export default UKText;

package/lib/components/text/text.module.css

@@ -0,0 +1,17 @@
+@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;
+  font-weight: var(--utfontwgt);
+  font-size: var(--utfontsize);
+  font-family: var(--utfontfam);
+}
+
+/*# sourceMappingURL=text.module.css.map */

package/lib/components/text/text.module.css.map

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

package/lib/components/text/text.module.scss

@@ -0,0 +1,13 @@
+/*!
+ * 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;
+  font-weight: var(#{$theme+$font+$weight});
+  font-size: var(#{$theme+$font+$size});
+  font-family: var(#{$theme+$font+$family});
+}

package/lib/components/textButton/UKTextButton.tsx

@@ -0,0 +1,22 @@
+/*
+ * 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 "../../core/clippy.ts";
+import styles from "./textButton.module.scss";
+import { FC } from "react";
+
+const UKTextButton: 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 UKTextButton;

package/lib/components/textButton/textButton.module.css

@@ -0,0 +1,32 @@
+@charset "UTF-8";
+/*!
+ * Copyright ©2025 Ewsgit <https://ewsgit.uk> and YourDash <https://yourdash.ewsgit.uk> contributors.
+ * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
+ */
+/*!
+ * 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)
+ */
+.component {
+  font-family: var(--utfontfam);
+  text-align: center;
+  color: var(--utbtncol);
+  transition: var(--utbtntrans);
+  width: max-content;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  font-weight: var(--uttxbfontwgt);
+}
+.component:hover {
+  color: var(--utacn);
+  opacity: 0.8;
+  transition: var(--utbtnhvrtrans);
+}
+.component:active {
+  color: var(--utacn);
+  opacity: 1;
+  transition: var(--utbtnatvtrans);
+}
+
+/*# sourceMappingURL=textButton.module.css.map */

package/lib/components/textButton/textButton.module.css.map

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

package/lib/components/textButton/textButton.module.scss

@@ -0,0 +1,30 @@
+@use "../../theme/themeValues.scss" as *;
+
+/*!
+ * 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)
+ */
+
+.component {
+  font-family: var(#{$theme}#{$font}#{$family});
+  text-align: center;
+  color: rgb(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: rgb(var(#{$theme}#{$accent}));
+    opacity: 0.8;
+    transition: var(#{$theme}#{$button}#{$hover}#{$transition});
+  }
+
+  &:active {
+    color: rgb(var(#{$theme}#{$accent}));
+    opacity: 1;
+    transition: var(#{$theme}#{$button}#{$active}#{$transition});
+  }
+}

package/lib/components/textInput/UKTextInput.tsx

@@ -0,0 +1,78 @@
+/*
+ * Copyright ©2025 Ewsgit<https://ewsgit.uk> and YourDash<https://yourdash.ewsgit.uk> contributors.
+ * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
+ */
+
+import clippy from "../../core/clippy.ts";
+import UKIcon from "../icon/UKIcon.tsx";
+import { UKIconType } from "../../core/iconDictionary.ts";
+import styles from "./textInput.module.scss";
+import React, { useEffect, useRef } from "react";
+
+const UKTextInput: React.FC<{
+  getValue?: React.Dispatch<React.SetStateAction<string>>;
+  getLiveValue?: React.Dispatch<React.SetStateAction<string>>;
+  onSubmit?: (value: string) => void;
+  placeholder: string;
+  icon?: UKIconType;
+  defaultValue?: string;
+  value?: string;
+  accessibleName: string;
+  className?: string;
+  type?: string;
+  autoComplete?: string;
+}> = (props) => {
+  const ref = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    if (props.value) ref.current.value = props.value;
+  }, [props.value]);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    ref.current.onchange = () => {
+      if (!ref.current) return;
+      if (!props.getValue) return;
+
+      props.getValue(ref.current.value);
+    };
+
+    ref.current.onkeyup = (event) => {
+      if (!ref.current) return;
+      if (!props.onSubmit) return;
+
+      if (props.getLiveValue) {
+        props.getLiveValue(ref.current.value);
+      }
+
+      if (event.key === "Enter") {
+        props.onSubmit(ref.current.value);
+      }
+    };
+  }, []);
+
+  return (
+    <div className={clippy(styles.component, props.className)}>
+      {props.icon && (
+        <UKIcon
+          className={styles.icon}
+          icon={props.icon}
+        />
+      )}
+      <input
+        autoComplete={props.autoComplete}
+        ref={ref}
+        type={props.type || "text"}
+        aria-label={props.accessibleName}
+        defaultValue={props.defaultValue}
+        className={clippy(styles.input, !props.icon && styles.noIcon)}
+        placeholder={props.placeholder}
+      />
+    </div>
+  );
+};
+
+export default UKTextInput;

package/lib/components/textInput/textInput.module.css

@@ -0,0 +1,51 @@
+@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;
+  position: relative;
+  box-sizing: border-box;
+  color: var(--utinpcol);
+  background: var(--utinpbgn);
+  border: var(--utinpbrd);
+  border-radius: var(--utinprad);
+  transition: var(--utinptrans);
+  padding: 0;
+  height: var(--utinphei);
+}
+.component:focus, .component:focus-within {
+  color: var(--utinpfoccol);
+  background: var(--utinpfocbgn);
+  border: var(--utinpfocbrd);
+}
+
+.icon {
+  height: calc(var(--utinphei) - 0.75rem);
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: calc(var(--utinppdnhoriz));
+}
+
+.input {
+  background: transparent;
+  color: var(--utinpcol);
+  padding-left: calc(var(--utinppdnhoriz) + var(--utinphei) - 0.5rem);
+  width: 100%;
+  margin: 0;
+  border: none;
+}
+.input.noIcon {
+  padding-left: var(--utinppdnhoriz);
+}
+.input:focus, .input:focus-within {
+  outline: none;
+}
+
+/*# sourceMappingURL=textInput.module.css.map */

package/lib/components/textInput/textInput.module.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["textInput.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;;AAEA;EAEE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE","file":"textInput.module.css"}

package/lib/components/textInput/textInput.module.scss

@@ -0,0 +1,52 @@
+/*!
+ * 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;
+  position: relative;
+  box-sizing: border-box;
+
+  color: rgb(var(#{$theme}#{$input}#{$color}));
+  background: rgb(var(#{$theme}#{$input}#{$background}));
+  border: var(#{$theme}#{$input}#{$border});
+  border-radius: var(#{$theme}#{$input}#{$radius});
+  transition: var(#{$theme}#{$input}#{$transition});
+  padding: 0;
+  height: var(#{$theme}#{$input}#{$height});
+
+  &:focus,
+  &:focus-within {
+    color: rgb(var(#{$theme}#{$input}#{$focus}#{$color}));
+    background: rgb(var(#{$theme}#{$input}#{$focus}#{$background}));
+    border: var(#{$theme}#{$input}#{$focus}#{$border});
+  }
+}
+
+.icon {
+  height: calc(var(#{$theme}#{$input}#{$height}) - 0.75rem);
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: calc(var(#{$theme}#{$input}#{$padding}#{$horizontal}));
+}
+
+.input {
+  background: transparent;
+  color: rgb(var(#{$theme+$input+$color}));
+  padding-left: calc(var(#{$theme+$input+$padding+$horizontal}) + calc(var(#{$theme+$input+$height}) - 0.5rem));
+  width: 100%;
+  margin: 0;
+  border: none;
+
+  &.noIcon {
+    padding-left: var(#{$theme+$input+$padding+$horizontal});
+  }
+
+  &:focus, &:focus-within {
+    outline: none;
+  }
+}

package/lib/core/clippy.ts

@@ -0,0 +1,14 @@
+/*
+ * Copyright ©2023 @Ewsgit and YourDash contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+import clsx from "clsx";
+
+export default function clippy(...input: (string | undefined | null | boolean)[]): string {
+  return clsx(...input)
+    .replaceAll(`\n`, ``)
+    .split(" ")
+    .filter((str) => str !== "")
+    .join(" ");
+}

package/lib/core/decrementLevel.tsx

@@ -0,0 +1,13 @@
+/*
+ * 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 LevelContext, { useLevel } from "./level.tsx";
+import { FC } from "react";
+
+const DecrementLevel: FC<{ children: React.ReactNode | React.ReactNode[] }> = (props) => {
+  return <LevelContext.Provider value={useLevel() - 1}>{props.children}</LevelContext.Provider>;
+};
+
+export default DecrementLevel;