@yourdash/uikit 0.0.1 → 0.1.0

package/lib/core/icons/video-24.svg

@@ -0,0 +1,7 @@
+
+
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path fill-rule="evenodd" fill="#ffffff"
+    d="M1.75 4.5a.25.25 0 00-.25.25v14.5c0 .138.112.25.25.25h20.5a.25.25 0 00.25-.25V4.75a.25.25 0 00-.25-.25H1.75zM0 4.75C0 3.784.784 3 1.75 3h20.5c.966 0 1.75.784 1.75 1.75v14.5A1.75 1.75 0 0122.25 21H1.75A1.75 1.75 0 010 19.25V4.75z" />
+  <path d="M9 15.584V8.416a.5.5 0 01.77-.42l5.576 3.583a.5.5 0 010 .842L9.77 16.005a.5.5 0 01-.77-.42z" />
+</svg>

package/lib/core/icons/webhook-16.svg

@@ -0,0 +1,3 @@
+
+
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M5.5 4.25a2.25 2.25 0 014.5 0 .75.75 0 001.5 0 3.75 3.75 0 10-6.14 2.889l-2.272 4.258a.75.75 0 001.324.706L7 7.25a.75.75 0 00-.309-1.015A2.25 2.25 0 015.5 4.25z"/><path d="M7.364 3.607a.75.75 0 011.03.257l2.608 4.349a3.75 3.75 0 11-.628 6.785.75.75 0 01.752-1.299 2.25 2.25 0 10-.033-3.88.75.75 0 01-1.03-.256L7.107 4.636a.75.75 0 01.257-1.03z"/><path d="M2.9 8.776A.75.75 0 012.625 9.8 2.25 2.25 0 106 11.75a.75.75 0 01.75-.751h5.5a.75.75 0 010 1.5H7.425a3.751 3.751 0 11-5.55-3.998.75.75 0 011.024.274z"/></svg>

package/lib/core/icons/workflow-16.svg

@@ -0,0 +1,6 @@
+
+
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" fill="#ffffff"
+    d="M0 1.75C0 .784.784 0 1.75 0h3.5C6.216 0 7 .784 7 1.75v3.5A1.75 1.75 0 015.25 7H4v4a1 1 0 001 1h4v-1.25C9 9.784 9.784 9 10.75 9h3.5c.966 0 1.75.784 1.75 1.75v3.5A1.75 1.75 0 0114.25 16h-3.5A1.75 1.75 0 019 14.25v-.75H5A2.5 2.5 0 012.5 11V7h-.75A1.75 1.75 0 010 5.25v-3.5zm1.75-.25a.25.25 0 00-.25.25v3.5c0 .138.112.25.25.25h3.5a.25.25 0 00.25-.25v-3.5a.25.25 0 00-.25-.25h-3.5zm9 9a.25.25 0 00-.25.25v3.5c0 .138.112.25.25.25h3.5a.25.25 0 00.25-.25v-3.5a.25.25 0 00-.25-.25h-3.5z" />
+</svg>

package/lib/core/icons/workflow-24.svg

@@ -0,0 +1,6 @@
+
+
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path fill-rule="evenodd" fill="#ffffff"
+    d="M1 3a2 2 0 012-2h6.5a2 2 0 012 2v6.5a2 2 0 01-2 2H7v4.063C7 16.355 7.644 17 8.438 17H12.5v-2.5a2 2 0 012-2H21a2 2 0 012 2V21a2 2 0 01-2 2h-6.5a2 2 0 01-2-2v-2.5H8.437A2.938 2.938 0 015.5 15.562V11.5H3a2 2 0 01-2-2V3zm2-.5a.5.5 0 00-.5.5v6.5a.5.5 0 00.5.5h6.5a.5.5 0 00.5-.5V3a.5.5 0 00-.5-.5H3zM14.5 14a.5.5 0 00-.5.5V21a.5.5 0 00.5.5H21a.5.5 0 00.5-.5v-6.5a.5.5 0 00-.5-.5h-6.5z" />
+</svg>

package/lib/core/icons/x-16.svg

@@ -0,0 +1,6 @@
+
+
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" fill="#ffffff"
+    d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z" />
+</svg>

package/lib/core/icons/x-24.svg

@@ -0,0 +1,6 @@
+
+
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path fill-rule="evenodd" fill="#ffffff"
+    d="M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z" />
+</svg>

package/lib/core/icons/x-circle-16.svg

@@ -0,0 +1,6 @@
+
+
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" fill="#ffffff"
+    d="M3.404 12.596a6.5 6.5 0 119.192-9.192 6.5 6.5 0 01-9.192 9.192zM2.344 2.343a8 8 0 1011.313 11.314A8 8 0 002.343 2.343zM6.03 4.97a.75.75 0 00-1.06 1.06L6.94 8 4.97 9.97a.75.75 0 101.06 1.06L8 9.06l1.97 1.97a.75.75 0 101.06-1.06L9.06 8l1.97-1.97a.75.75 0 10-1.06-1.06L8 6.94 6.03 4.97z" />
+</svg>

package/lib/core/icons/x-circle-24.svg

@@ -0,0 +1,8 @@
+
+
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path
+    d="M9.036 7.976a.75.75 0 00-1.06 1.06L10.939 12l-2.963 2.963a.75.75 0 101.06 1.06L12 13.06l2.963 2.964a.75.75 0 001.061-1.06L13.061 12l2.963-2.964a.75.75 0 10-1.06-1.06L12 10.939 9.036 7.976z" />
+  <path fill-rule="evenodd" fill="#ffffff"
+    d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z" />
+</svg>

package/lib/core/icons/x-circle-fill-12.svg

@@ -0,0 +1,6 @@
+
+
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+  <path fill-rule="evenodd" fill="#ffffff"
+    d="M1.757 10.243a6 6 0 118.486-8.486 6 6 0 01-8.486 8.486zM6 4.763l-2-2L2.763 4l2 2-2 2L4 9.237l2-2 2 2L9.237 8l-2-2 2-2L8 2.763l-2 2z" />
+</svg>

package/lib/core/icons/x-circle-fill-16.svg

@@ -0,0 +1,6 @@
+
+
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" fill="#ffffff"
+    d="M2.343 13.657A8 8 0 1113.657 2.343 8 8 0 012.343 13.657zM6.03 4.97a.75.75 0 00-1.06 1.06L6.94 8 4.97 9.97a.75.75 0 101.06 1.06L8 9.06l1.97 1.97a.75.75 0 101.06-1.06L9.06 8l1.97-1.97a.75.75 0 10-1.06-1.06L8 6.94 6.03 4.97z" />
+</svg>

package/lib/core/icons/x-circle-fill-24.svg

@@ -0,0 +1,6 @@
+
+
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path fill-rule="evenodd" fill="#ffffff"
+    d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm8.036-4.024a.75.75 0 00-1.06 1.06L10.939 12l-2.963 2.963a.75.75 0 101.06 1.06L12 13.06l2.963 2.964a.75.75 0 001.061-1.06L13.061 12l2.963-2.964a.75.75 0 10-1.06-1.06L12 10.939 9.036 7.976z" />
+</svg>

package/lib/core/icons/yourdash.svg

@@ -0,0 +1,61 @@
+
+
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_745_38)">
+        <g filter="url(#filter0_f_745_38)">
+            <foreignObject x="-23" y="-23" width="256" height="256">
+                <div xmlns="http://www.w3.org/1999/xhtml" class="gradient"></div>
+            </foreignObject>
+            <style>
+                div.gradient {
+                height: 100%;
+                width: 100%;
+                background-image: conic-gradient(
+                from 180deg,
+                #FD0000 0deg 60deg,
+                #FC8B00 60deg 120deg,
+                #FEE400 120deg 180deg,
+                #119E0B 180deg 240deg,
+                #0644B2 240deg 300deg,
+                #C12EDB 300deg 360deg
+                );
+                }
+            </style>
+        </g>
+    </g>
+    <g clip-path="url(#clip1_745_38)">
+        <g filter="url(#filter1_bdf_745_38)">
+            <path d="M23 23H279V279H23V23Z" fill="#E0E0E0" fill-opacity="0.75" shape-rendering="crispEdges"/>
+        </g>
+    </g>
+    <defs>
+        <filter id="filter0_f_745_38" x="-87" y="-87" width="384" height="384" filterUnits="userSpaceOnUse"
+                color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+            <feGaussianBlur stdDeviation="32" result="effect1_foregroundBlur_745_38"/>
+        </filter>
+        <filter id="filter1_bdf_745_38" x="7" y="7" width="288" height="288" filterUnits="userSpaceOnUse"
+                color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="4"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_745_38"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                           result="hardAlpha"/>
+            <feOffset dy="8"/>
+            <feGaussianBlur stdDeviation="4"/>
+            <feComposite in2="hardAlpha" operator="out"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+            <feBlend mode="normal" in2="effect1_backgroundBlur_745_38" result="effect2_dropShadow_745_38"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_745_38" result="shape"/>
+            <feGaussianBlur stdDeviation="8" result="effect3_foregroundBlur_745_38"/>
+        </filter>
+        <clipPath id="clip0_745_38">
+            <rect x="5" y="5" width="200" height="200" rx="56" fill="white"/>
+        </clipPath>
+        <clipPath id="clip1_745_38">
+            <path d="M51 107C51 76.0721 76.0721 51 107 51H195C225.928 51 251 76.0721 251 107V195C251 225.928 225.928 251 195 251H107C76.0721 251 51 225.928 51 195V107Z"
+                  fill="white"/>
+        </clipPath>
+    </defs>
+</svg>

package/lib/core/icons/zap-16.svg

@@ -0,0 +1,6 @@
+
+
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" fill="#ffffff"
+    d="M10.561 1.5a.016.016 0 00-.01.004L3.286 8.571A.25.25 0 003.462 9H6.75a.75.75 0 01.694 1.034l-1.713 4.188 6.982-6.793A.25.25 0 0012.538 7H9.25a.75.75 0 01-.683-1.06l2.008-4.418.003-.006a.02.02 0 00-.004-.009.02.02 0 00-.006-.006L10.56 1.5zM9.504.43a1.516 1.516 0 012.437 1.713L10.415 5.5h2.123c1.57 0 2.346 1.909 1.22 3.004l-7.34 7.142a1.25 1.25 0 01-.871.354h-.302a1.25 1.25 0 01-1.157-1.723L5.633 10.5H3.462c-1.57 0-2.346-1.909-1.22-3.004L9.503.429z" />
+</svg>

package/lib/core/icons/zap-24.svg

@@ -0,0 +1,6 @@
+
+
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path fill-rule="evenodd" fill="#ffffff"
+    d="M16.168 2.924L4.51 13.061a.25.25 0 00.164.439h5.45a.75.75 0 01.692 1.041l-2.559 6.066 11.215-9.668a.25.25 0 00-.164-.439H14a.75.75 0 01-.687-1.05l2.855-6.526zm-.452-1.595a1.341 1.341 0 012.109 1.55L15.147 9h4.161c1.623 0 2.372 2.016 1.143 3.075L8.102 22.721a1.149 1.149 0 01-1.81-1.317L8.996 15H4.674c-1.619 0-2.37-2.008-1.148-3.07l12.19-10.6z" />
+</svg>

package/lib/core/incrementLevel.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 IncrementLevel: FC<{ children: React.ReactNode | React.ReactNode[] }> = (props) => {
+  return <LevelContext.Provider value={useLevel() + 1}>{props.children}</LevelContext.Provider>;
+};
+
+export default IncrementLevel;

package/lib/core/isPhone.ts

@@ -0,0 +1,30 @@
+/*
+ * 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)
+ */
+
+interface NavigatorExtended extends Navigator {
+  userAgentData?: {
+    brands: { brand: string; version: string }[];
+    mobile: boolean;
+    platform: string;
+  };
+}
+
+export default function isMobileDevice(): boolean {
+  const nav: NavigatorExtended = window.navigator;
+
+  const searchParams = new URLSearchParams(window.location.search);
+  if (searchParams.has("ukmobile")) return true;
+
+  // Check if UA Client Hints are supported
+  if (nav?.userAgentData) {
+    return nav.userAgentData.mobile || false;
+  } else {
+    const mobileDeviceRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
+
+    // Check if UA matches the regex of mobile devices
+    // noinspection PlatformDetectionJS
+    return navigator.userAgent.match(mobileDeviceRegex) !== null;
+  }
+}

package/lib/core/level.tsx

@@ -0,0 +1,27 @@
+/*
+ * 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, useContext } from "react";
+import styles from "../theme/defaultTheme.module.scss";
+
+const LevelContext = createContext(0);
+export default LevelContext;
+
+export const useLevel = () => useContext(LevelContext);
+
+export const useLevelClass = (level: number): string => {
+  switch (level) {
+    case 0:
+      return styles.level0;
+    case 1:
+      return styles.level1;
+    case 2:
+      return styles.level2;
+    case 3:
+      return styles.level3;
+    default:
+      return styles.level0;
+  }
+};

package/lib/core/remToPx.ts

@@ -0,0 +1,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)
+ */
+
+export default function remToPx(rem: number) {
+  return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
+}

package/lib/core/root.tsx

@@ -0,0 +1,26 @@
+/*
+ * 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 ContextMenuRoot from "../components/contextMenu/contextMenuRoot.jsx";
+import clippy from "./clippy.js";
+import isMobileDevice from "./isPhone.js";
+import Toasts from "./toasts/toasts.jsx";
+import styles from "../theme/defaultTheme.module.scss";
+import React from "react";
+import LevelContext from "./level.jsx";
+
+const UIKitRoot: React.FC<{ children: React.ReactNode | React.ReactNode[] }> = (props) => {
+  return (
+    <div className={clippy(styles.theme, styles.level0, isMobileDevice() && styles.mobile)}>
+      <ContextMenuRoot>
+        <Toasts>
+          <LevelContext.Provider value={0}>{props.children}</LevelContext.Provider>
+        </Toasts>
+      </ContextMenuRoot>
+    </div>
+  );
+};
+
+export default UIKitRoot;

package/lib/core/toasts/toast.module.css

@@ -0,0 +1,68 @@
+@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)
+ */
+.container {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 10000;
+  text-align: start;
+  opacity: 0.75;
+  overflow: hidden;
+  pointer-events: none;
+  gap: 0.25rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.component {
+  border-radius: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  pointer-events: none;
+  backdrop-filter: blur(1rem);
+  max-width: 32rem;
+  margin-right: 0.5rem;
+}
+.component:first-child {
+  margin-top: 0.5rem;
+}
+
+.cardContent {
+  gap: 0;
+  padding: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  margin-right: -0.5rem;
+}
+
+.success {
+  border-right: 0.5rem solid #2ea967;
+}
+
+.error {
+  border-right: 0.5rem solid #ff4500;
+}
+
+.warning {
+  border-right: 0.5rem solid #daa520;
+}
+
+.info {
+  border-right: 0.5rem solid #00b8ff;
+}
+
+.heading {
+  text-align: left;
+  line-height: 1;
+  padding-top: 0.25rem;
+}
+
+.pointerEvents {
+  pointer-events: all;
+}
+
+/*# sourceMappingURL=toast.module.css.map */

package/lib/core/toasts/toast.module.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["toast.module.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAKA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAOF;EACE","file":"toast.module.css"}

package/lib/core/toasts/toast.module.scss

@@ -0,0 +1,71 @@
+/*!
+ * Copyright ©2025 Ewsgit<https://ewsgit.uk> and YourDash<https://yourdash.ewsgit.uk> contributors.
+ * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
+ */
+
+.container {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 10000;
+  text-align: start;
+  opacity: 0.75;
+  overflow: hidden;
+  pointer-events: none;
+  gap: 0.25rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.component {
+  border-radius: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  pointer-events: none;
+  backdrop-filter: blur(1rem);
+  max-width: 32rem;
+  margin-right: 0.5rem;
+
+  &:first-child {
+    margin-top: 0.5rem;
+  }
+}
+
+.cardContent {
+  gap: 0;
+  padding: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  margin-right: -0.5rem;
+}
+
+.success {
+  border-right: 0.5rem solid #2ea967;
+}
+
+.error {
+  border-right: 0.5rem solid #ff4500;
+}
+
+.warning {
+  border-right: 0.5rem solid #daa520;
+}
+
+.info {
+  border-right: 0.5rem solid #00b8ff;
+}
+
+.heading {
+  text-align: left;
+  line-height: 1;
+  padding-top: 0.25rem;
+}
+
+.body {
+
+}
+
+.pointerEvents {
+  pointer-events: all;
+}

package/lib/core/toasts/toast.ts

@@ -0,0 +1,12 @@
+/*
+ * 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 type IToastAction from "./toastAction.ts";
+
+export default interface Toast {
+  type: "success" | "error" | "warning" | "info" | "debug";
+  content: { title: string; body: string; actions?: IToastAction[] };
+  persist?: boolean;
+}

package/lib/core/toasts/toastAction.ts

@@ -0,0 +1,12 @@
+/*
+ * 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 { UKIconType } from "../iconDictionary.ts";
+
+export default interface IToastAction {
+  label: string;
+  icon?: UKIconType;
+  onClick: () => void;
+}

package/lib/core/toasts/toastContext.ts

@@ -0,0 +1,16 @@
+/*
+ * 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 React from "react";
+import Toast from "./toast.ts";
+
+const ToastContext = React.createContext({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  showToast: (data: Toast) => {
+    /* empty */
+  },
+});
+
+export default ToastContext;

package/lib/core/toasts/toasts.tsx

@@ -0,0 +1,96 @@
+/*
+ * 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 UKHeading from "../../components/heading/UKHeading.tsx";
+import UKSeparator from "../../components/separator/UKSeparator.tsx";
+import type ToastInterface from "./toast.ts";
+import clippy from "../../core/clippy.ts";
+import { FC, useState } from "react";
+import UKCard from "../../components/card/UKCard.tsx";
+import { UKIcons } from "../iconDictionary.ts";
+import UKIconButton from "../../components/iconButton/UKIconButton.tsx";
+import UKText from "../../components/text/UKText.tsx";
+import ToastContext from "./toastContext.ts";
+import * as React from "react";
+import styles from "./toast.module.scss";
+import generateUUID from "../uuid.ts";
+
+const TOAST_DISPLAY_TIME = 5000;
+
+const Toasts: FC<{ children: React.ReactNode | React.ReactNode[] }> = ({ children }) => {
+  const [toasts, setToasts] = useState<(ToastInterface & { uuid: string; animatingOut: boolean })[]>([]);
+
+  return (
+    <ToastContext.Provider
+      value={{
+        showToast: (data: ToastInterface) => {
+          const uuid = generateUUID();
+
+          setToasts((t) => [...t, { ...data, uuid: uuid, animatingOut: false }]);
+
+          if (!data.persist) {
+            setTimeout(() => {
+              setToasts((t) =>
+                t.map((toast) => {
+                  if (uuid === toast.uuid) {
+                    return {
+                      ...toast,
+                      animatingOut: true,
+                    };
+                  }
+
+                  return toast;
+                }),
+              );
+            }, TOAST_DISPLAY_TIME - 500);
+
+            setTimeout(() => {
+              setToasts((t) => t.filter((toast) => toast.uuid !== uuid));
+            }, TOAST_DISPLAY_TIME);
+          }
+        },
+      }}
+    >
+      <div className={styles.container}>
+        {toasts.map((t) => {
+          return (
+            <UKCard
+              key={t.uuid}
+              actions={
+                t.persist ? (
+                  <UKIconButton
+                    accessibleLabel={"Close toasts"}
+                    icon={UKIcons.X}
+                    onClick={() => setToasts((toasts) => toasts.filter((x) => x.uuid !== t.uuid))}
+                  />
+                ) : null
+              }
+              className={clippy(styles.cardContent, t.type && styles[t.type])}
+              containerClassName={clippy(
+                styles.component,
+                t.persist && styles.pointerEvents,
+                t.animatingOut ? "animate__animated animate__fadeOutRightBig" : "animate__animated animate__fadeInDown",
+              )}
+            >
+              <UKHeading
+                className={styles.heading}
+                level={3}
+                text={t.content.title}
+              />
+              <UKSeparator direction={"column"} />
+              <UKText
+                className={styles.body}
+                text={t.content.body}
+              />
+            </UKCard>
+          );
+        })}
+      </div>
+      {children}
+    </ToastContext.Provider>
+  );
+};
+
+export default Toasts;

package/lib/core/toasts/useToast.ts

@@ -0,0 +1,18 @@
+/*
+ * 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 React from "react";
+import Toast from "./toast.ts";
+import ToastContext from "./toastContext.ts";
+
+export default function useToast() {
+  const toastCtx = React.useContext(ToastContext);
+
+  return {
+    create(data: Toast) {
+      toastCtx.showToast(data);
+    },
+  };
+}

package/lib/core/uuid.ts

@@ -0,0 +1,12 @@
+/*
+ * Copyright ©2025 @Ewsgit and YourDash contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+export default function generateUUID(): `${string}-${string}-${string}-${string}-${string}` {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+    const r = (Math.random() * 16) | 0,
+      v = c == "x" ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  }) as `${string}-${string}-${string}-${string}-${string}`;
+}