@yourdash/uikit 1.0.41 → 1.0.43

package/src/theme/themeValues.scss

@@ -1,6 +1,6 @@
 /*!
- * 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)
+ * Copyright ©2025 Ewsgit <https://ewsgit.uk> and YourDash <https://yourdash.ewsgit.uk> contributors.
+ * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
  */
 
 $theme: "--ut";
@@ -38,6 +38,86 @@ $h5: "he5";
 $h6: "he6";
 $scrollbar: "scrlbr";
 
+// General
+$UKColor: var(#{$theme+$color});
+$UKSubColor: var(#{$theme+$subcolor});
+$UKBackground: var(#{$theme+$background});
+$UKAccent: var(#{$theme+$accent});
+$UKBorder: var(#{$theme+$border});
+$UKRadius: var(#{$theme+$radius});
+$UKPadding: var(#{$theme+$padding});
+$UKGap: var(#{$theme+$gap});
+$UKTransition: var(#{$theme+$transition});
+$UKRawTransition: var(#{$theme+$transition+$transition});
+$UKSeparatorSize: var(#{$theme+$separator+$size});
+$UKSeparatorColor: var(#{$theme+$separator+$color});
+$UKScrollbarWidth: var(#{$theme+$scrollbar+$width});
+$UKScrollbarRadius: var(#{$theme+$scrollbar+$radius});
+
+// Heading
+$UKHeadingH1Weight: var(#{$theme+$heading+$h1+$weight});
+$UKHeadingH1Size: var(#{$theme+$heading+$h1+$size});
+$UKHeadingH2Weight: var(#{$theme+$heading+$h2+$weight});
+$UKHeadingH2Size: var(#{$theme+$heading+$h2+$size});
+$UKHeadingH3Weight: var(#{$theme+$heading+$h3+$weight});
+$UKHeadingH3Size: var(#{$theme+$heading+$h3+$size});
+$UKHeadingH4Weight: var(#{$theme+$heading+$h4+$weight});
+$UKHeadingH4Size: var(#{$theme+$heading+$h4+$size});
+$UKHeadingH5Weight: var(#{$theme+$heading+$h5+$weight});
+$UKHeadingH5Size: var(#{$theme+$heading+$h5+$size});
+$UKHeadingH6Weight: var(#{$theme+$heading+$h6+$weight});
+$UKHeadingH6Size: var(#{$theme+$heading+$h6+$size});
+
+// Input
+$UKInputColor: var(#{$theme+$input+$color});
+$UKInputBackground: var(#{$theme+$input+$background});
+$UKInputBorder: var(#{$theme+$input+$border});
+$UKInputRadius: var(#{$theme+$input+$radius});
+$UKInputHeight: var(#{$theme+$input+$height});
+$UKInputPaddingHorizontal: var(#{$theme+$input+$padding+$horizontal});
+$UKInputTransition: var(#{$theme+$input+$transition});
+// Input:Focus
+$UKInputFocusColor: var(#{$theme+$input+$focus+$color});
+$UKInputFocusBackground: var(#{$theme+$input+$focus+$background});
+$UKInputFocusBorder: var(#{$theme+$input+$focus+$border});
+
+// Button
+$UKButtonColor: var(#{$theme+$button+$color});
+$UKButtonBackground: var(#{$theme+$button+$background});
+$UKButtonBorder: var(#{$theme+$button+$border});
+$UKButtonFontSize: var(#{$theme+$button+$font+$size});
+$UKButtonFontWeight: var(#{$theme+$button+$font+$weight});
+$UKButtonRadius: var(#{$theme+$button+$radius});
+$UKButtonPaddingHorizontal: var(#{$theme+$button+$padding+$horizontal});
+$UKButtonTransition: var(#{$theme+$button+$transition});
+// Button:Hover
+$UKButtonHoverColor: var(#{$theme+$button+$hover+$color});
+$UKButtonHoverBackground: var(#{$theme+$button+$hover+$background});
+$UKButtonHoverBorder: var(#{$theme+$button+$hover+$border});
+$UKButtonHoverRadius: var(#{$theme+$button+$hover+$radius});
+$UKButtonHoverTransition: var(#{$theme+$button+$hover+$transition});
+// Button:Active
+$UKButtonActiveColor: var(#{$theme+$button+$active+$color});
+$UKButtonActiveBackground: var(#{$theme+$button+$active+$background});
+$UKButtonActiveBorder: var(#{$theme+$button+$active+$border});
+$UKButtonActiveRadius: var(#{$theme+$button+$active+$radius});
+$UKButtonActiveTransition: var(#{$theme+$button+$active+$transition});
+
+// TextButton
+$UKTextButtonFontWeight: var(#{$theme+$textbutton+$font+$weight});
+
+// Font
+$UKFontFamily: var(#{$theme+$font+$family});
+$UKFontSize: var(#{$theme+$font+$size});
+$UKFontWeight: var(#{$theme+$font+$weight});
+
+// Header
+$UKHeaderColor: var(#{$theme+$header+$color});
+$UKHeaderFontFamily: var(#{$theme+$header+$font+$family});
+$UKHeaderFontSize: var(#{$theme+$header+$font+$size});
+$UKHeaderFontWeight: var(#{$theme+$header+$font+$weight});
+$UKHeaderPaddingVertial: var(#{$theme+$header+$padding+$vertical});
+$UKHeaderPaddingHorizontal: var(#{$theme+$header+$padding+$horizontal});
 
 $sizeMobile: 440px;
 $sizeLargeMobile: 560px;

package/src/utilityComponent/hasBeenShown/hasBeenShown.tsx

@@ -0,0 +1,47 @@
+/*
+ * 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 { FC, useEffect, useRef, useState } from "react";
+
+const HasBeenShown: FC<{
+  className?: string;
+  onSeen: () => void;
+}> = ({ className, onSeen }) => {
+  const [hasBeenSeen, setHasBeenSeen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    const current = ref.current;
+
+    const observer = new IntersectionObserver((interaction) => {
+      if (interaction[0].isIntersecting) {
+        onSeen();
+        observer.disconnect();
+        setHasBeenSeen(true);
+      }
+    });
+
+    observer.observe(current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  if (hasBeenSeen) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={ref}
+      className={className}
+    />
+  );
+};
+
+export default HasBeenShown;

package/src/utilityComponent/onInView/onInView.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 { FC, useEffect, useRef } from "react";
+
+const OnInView: FC<{
+  className?: string;
+  onEnterView?: (direction: "up" | "down" | "left" | "right") => void;
+  onLeaveView?: (direction: "up" | "down" | "left" | "right") => void;
+}> = ({ className, onEnterView, onLeaveView }) => {
+  const isInView = useRef(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    const current = ref.current;
+
+    const handleScroll = () => {
+      const { top, bottom, left, right } = current.getBoundingClientRect();
+
+      if (!isInView.current) {
+        if (top < 0) {
+          onEnterView?.("up");
+          isInView.current = true;
+          return;
+        } else if (bottom > window.innerHeight) {
+          onEnterView?.("down");
+          isInView.current = true;
+          return;
+        } else if (left < 0) {
+          onEnterView?.("left");
+          isInView.current = true;
+          return;
+        } else if (right > window.innerWidth) {
+          onEnterView?.("right");
+          isInView.current = true;
+          return;
+        }
+      }
+
+      if (top > window.innerHeight) {
+        onLeaveView?.("down");
+        isInView.current = false;
+        return;
+      } else if (bottom < 0) {
+        onLeaveView?.("up");
+        isInView.current = false;
+        return;
+      } else if (left > window.innerWidth) {
+        onLeaveView?.("right");
+        isInView.current = false;
+        return;
+      } else if (right < 0) {
+        onLeaveView?.("left");
+        isInView.current = false;
+        return;
+      }
+    };
+
+    const observer = new IntersectionObserver(() => {
+      handleScroll();
+    });
+
+    observer.observe(current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      style={{ height: 1, width: 1 }}
+      className={className}
+    />
+  );
+};
+
+export default OnInView;

package/src/views/carousel/UKCarousel.tsx

@@ -0,0 +1,138 @@
+import React, { useEffect, useRef, useState } from "react";
+import UKCard from "../../components/card/UKCard.tsx";
+import UKContainer from "../../components/container/UKContainer.tsx";
+import { UKIcons } from "../../core/iconDictionary.ts";
+import UKIconButton from "../../components/iconButton/UKIconButton.tsx";
+import styles from "./carousel.module.scss";
+import clippy from "@yourdash/shared/web/helpers/clippy.ts";
+
+const UKCarousel: React.FC<{
+  items: { element: React.ReactElement; id: string }[];
+  className?: string;
+}> = ({ items, className }) => {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [currentPage, setCurrentPage] = useState<number>(0);
+
+  useEffect(() => {
+    const scrollElement = scrollRef.current;
+
+    if (!scrollElement) return;
+
+    console.log(Array.from(scrollElement.children));
+
+    let timer: number;
+    let listener = () => {
+      clearTimeout(timer);
+      timer = setTimeout(function () {
+        Array.from(scrollElement.children).forEach((ele: Element, index: number) => {
+          if (
+            Math.abs(
+              ele.getBoundingClientRect().left +
+                ele.getBoundingClientRect().width / 2 -
+                (scrollElement.getBoundingClientRect().left + scrollElement.getBoundingClientRect().width / 2),
+            ) <
+            ele.getBoundingClientRect().width / 2
+          ) {
+            setCurrentPage(index);
+            return;
+          }
+        });
+      }, 16) as unknown as number;
+    };
+
+    scrollElement.addEventListener("scroll", listener);
+
+    return () => {
+      scrollElement.removeEventListener("scroll", listener);
+      clearTimeout(timer);
+    };
+  }, []);
+
+  return (
+    <UKContainer className={clippy(styles.containerComponent, className)}>
+      <div
+        className={styles.component}
+        data-pages={true}
+        ref={scrollRef}
+      >
+        {items.map((child) => {
+          return (
+            <div
+              key={child.id}
+              className={styles.page}
+            >
+              {child.element}
+            </div>
+          );
+        })}
+      </div>
+      <div className={styles.controls}>
+        <UKIconButton
+          accessibleLabel={"previous page"}
+          icon={UKIcons.ChevronLeft}
+          className={styles.pageControl}
+          onClick={() => {
+            const scrollElement = scrollRef.current;
+
+            if (!scrollElement) {
+              return;
+            }
+
+            const carouselTargetPage = scrollElement.children[currentPage - 1] as HTMLDivElement;
+
+            if (!carouselTargetPage) {
+              return;
+            }
+
+            carouselTargetPage.scrollIntoView({ behavior: "smooth" });
+          }}
+        />
+        <UKCard className={styles.indicator}>
+          {items.map((page, index) => {
+            return (
+              <button
+                key={page.id}
+                className={clippy(styles.pageIndicator, index === currentPage && styles.selected)}
+                onClick={() => {
+                  const scrollElement = scrollRef.current;
+
+                  if (!scrollElement) {
+                    return;
+                  }
+
+                  scrollElement.scrollIntoView({ behavior: "smooth" });
+
+                  const carouselTargetPage = scrollElement.children[index] as HTMLDivElement;
+
+                  carouselTargetPage.scrollIntoView({ behavior: "smooth" });
+                }}
+              />
+            );
+          })}
+        </UKCard>
+        <UKIconButton
+          accessibleLabel={"next page"}
+          icon={UKIcons.ChevronRight}
+          className={styles.pageControl}
+          onClick={() => {
+            const scrollElement = scrollRef.current;
+
+            if (!scrollElement) {
+              return;
+            }
+
+            const carouselTargetPage = scrollElement.children[currentPage + 1] as HTMLDivElement;
+
+            if (!carouselTargetPage) {
+              return;
+            }
+
+            carouselTargetPage.scrollIntoView({ behavior: "smooth" });
+          }}
+        />
+      </div>
+    </UKContainer>
+  );
+};
+
+export default UKCarousel;

package/src/views/carousel/carousel.module.css

@@ -0,0 +1,77 @@
+@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)
+ */
+.containerComponent {
+  display: flex;
+  flex-direction: row;
+  max-width: 100%;
+  height: 24rem;
+  position: relative;
+  padding: 0;
+  overflow: hidden;
+}
+
+.component {
+  display: flex;
+  align-items: center;
+  max-width: 100%;
+  height: 24rem;
+  gap: 0.5rem;
+  padding: var(--utpdn);
+  flex-direction: row;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scroll-snap-stop: always;
+  scrollbar-width: none;
+  padding-bottom: 2.5rem;
+}
+.component::-webkit-scrollbar {
+  display: none;
+}
+
+.page {
+  display: flex;
+  width: 80%;
+  height: 100%;
+  flex-shrink: 0;
+  scroll-snap-align: center;
+}
+.page:first-of-type {
+  margin-left: calc(20% + var(--utgap));
+}
+.page:last-of-type {
+  margin-right: calc(20% + var(--utgap));
+}
+
+.controls {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: row;
+  gap: var(--utgap);
+}
+
+.indicator {
+  display: flex;
+  flex-direction: row;
+  gap: var(--utgap);
+  padding: calc(var(--utpdn) / 2);
+  border-radius: var(--utrad);
+}
+.indicator .pageIndicator {
+  background-color: var(--utcol);
+  padding: 0.5rem;
+  border-radius: var(--utrad);
+  transition: var(--uttrans);
+  position: relative;
+}
+.indicator .pageIndicator.selected {
+  padding-right: 1.5rem;
+  padding-left: 1.5rem;
+}
+
+/*# sourceMappingURL=carousel.module.css.map */

package/src/views/carousel/carousel.module.css.map

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

package/src/views/carousel/carousel.module.scss

@@ -0,0 +1,76 @@
+@use "../../theme/themeValues.scss" as *;
+
+.containerComponent {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 24rem;
+  position: relative;
+  padding: 0;
+  overflow: hidden;
+}
+
+.component {
+  display: flex;
+  align-items: center;
+  max-width: 100%;
+  height: 24rem;
+  gap: 0.5rem;
+  flex-direction: row;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scroll-snap-stop: always;
+  scrollbar-width: none;
+  padding-bottom: 2.5rem;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.page {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-shrink: 0;
+  scroll-snap-align: center;
+
+  &:first-of-type {
+    margin-left: calc(20% + var(#{$theme+$gap}));
+  }
+
+  &:last-of-type {
+    margin-right: calc(20% + var(#{$theme+$gap}));
+  }
+}
+
+.controls {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: row;
+  gap: var(#{$theme+$gap});
+}
+
+.indicator {
+  display: flex;
+  flex-direction: row;
+  gap: var(#{$theme+$gap});
+  padding: calc(var(#{$theme+$padding}) / 2);
+  border-radius: var(#{$theme+$radius});
+
+  .pageIndicator {
+    background-color: rgb(var(#{$theme+$color}));
+    padding: 0.5rem;
+    border-radius: var(#{$theme+$radius});
+    transition: var(#{$theme+$transition});
+    position: relative;
+
+    &.selected {
+      padding-right: 1.5rem;
+      padding-left: 1.5rem;
+    }
+  }
+}

package/src/views/dialog/UKDialog.tsx

@@ -0,0 +1,34 @@
+/*
+ * 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 UKCard from "../../components/card/UKCard.tsx";
+import styles from "./dialog.module.scss";
+
+const UKDialog: React.FC<{
+  children: React.ReactNode | React.ReactNode[];
+  className?: string;
+  actionsClassName?: string;
+  headerClassName?: string;
+  actions?: React.ReactNode | React.ReactNode[];
+  header?: React.ReactNode | React.ReactNode[];
+}> = ({ children, className, actionsClassName, headerClassName, actions, header }) => {
+  return (
+    <div className={styles.background}>
+      <UKCard
+        containerClassName={styles.view}
+        actionsClassName={actionsClassName}
+        headerClassName={headerClassName}
+        actions={actions}
+        header={header}
+        className={className}
+      >
+        {children}
+      </UKCard>
+    </div>
+  );
+};
+
+export default UKDialog;

package/src/views/dialog/dialog.module.css

@@ -0,0 +1,44 @@
+@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)
+ */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    margin-top: 1rem;
+  }
+  to {
+    opacity: 1;
+    margin-top: 0;
+  }
+}
+@keyframes backgroundFadeIn {
+  from {
+    background: rgba(0, 0, 0, 0);
+    backdrop-filter: blur(0rem);
+  }
+  to {
+    background: rgba(0, 0, 0, 0.3333333333);
+    backdrop-filter: blur(0.25rem);
+  }
+}
+.background {
+  width: 100%;
+  height: 100%;
+  animation: forwards backgroundFadeIn 250ms ease-out;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+}
+
+.view {
+  display: flex;
+  animation: forwards fadeIn 500ms ease-out;
+}
+
+/*# sourceMappingURL=dialog.module.css.map */

package/src/views/dialog/dialog.module.css.map

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

package/src/views/dialog/dialog.module.scss

@@ -0,0 +1,44 @@
+/*!
+ * Copyright ©2025 Ewsgit <https://ewsgit.uk> and YourDash <https://yourdash.ewsgit.uk> contributors.
+ * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
+ */
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    margin-top: 1rem;
+  }
+  to {
+    opacity: 1;
+    margin-top: 0;
+  }
+}
+
+@keyframes backgroundFadeIn {
+  from {
+    background: #00000000;
+    backdrop-filter: blur(0rem);
+  }
+  to {
+    background: #00000055;
+    backdrop-filter: blur(0.25rem);
+  }
+}
+
+.background {
+  width: 100%;
+  height: 100%;
+  animation: forwards backgroundFadeIn 250ms ease-out;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+}
+
+.view {
+  display: flex;
+  animation: forwards fadeIn 500ms ease-out;
+}

package/src/views/header/UKPageHeader.tsx

@@ -0,0 +1,28 @@
+/*
+ * 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 UKHeading from "../../components/heading/UKHeading.tsx";
+import styles from "./header.module.scss";
+
+const UKPageHeader: React.FC<{ backgroundImage?: string; heading: string }> = ({ backgroundImage, heading }) => {
+  return (
+    <>
+      <div
+        className={styles.view}
+        style={
+          backgroundImage ? { backgroundImage: backgroundImage } : { backgroundImage: "linear-gradient(-45deg, #ff8093aa, #ffd264aa)" }
+        }
+      >
+        <UKHeading
+          level={1}
+          text={heading}
+        />
+      </div>
+    </>
+  );
+};
+
+export default UKPageHeader;

package/src/views/header/header.module.css

@@ -0,0 +1,20 @@
+@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://ewsgit.uk> and YourDash <https://yourdash.ewsgit.uk> contributors.
+ * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
+ */
+.view {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--utpdn);
+  padding-top: calc(var(--utpdn) * 4);
+  padding-bottom: calc(var(--utpdn) * 4);
+}
+
+/*# sourceMappingURL=header.module.css.map */