@yourdash/uikit 0.1.13 → 0.1.15

package/lib/theme/defaultTheme.module.scss

@@ -1,361 +0,0 @@
-@use "themeValues" 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)
- */
-
-.theme {
-  overflow-x: hidden;
-  overflow-y: auto;
-  height: 100%;
-
-  background: rgb(var(#{$theme+$background}));
-  #{$theme}-author: "Ewsgit";
-  #{$theme}-name: "YourDash Classic Dark";
-  #{$theme}-version: "0.0.1";
-
-  ::-webkit-scrollbar {
-    width: var(#{$theme+$scrollbar+$width});
-    border-radius: 0;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    border-radius: var(#{$theme+$scrollbar+$radius});
-  }
-}
-
-.level0 {
-  color: rgb(var(#{$theme+$color}));
-
-  #{$theme+$color}: 255, 255, 255;
-  #{$theme+$subcolor}: 187, 187, 187;
-  #{$theme+$background}: 34, 34, 34;
-  #{$theme+$accent}: 118, 140, 231;
-  #{$theme+$border}: 1px solid #555555;
-  #{$theme+$radius}: 1rem;
-  #{$theme+$padding}: 1rem;
-  #{$theme+$gap}: 0.5rem;
-  #{$theme+$transition}: all 200ms ease-in-out;
-  #{$theme+$transition+$transition}: 200ms ease-in-out;
-  #{$theme+$separator+$size}: 1px;
-  #{$theme+$separator+$color}: 68, 68, 68;
-  #{$theme+$scrollbar+$width}: 0.4rem;
-  #{$theme+$scrollbar+$radius}: 0.1rem;
-
-  // heading
-  #{$theme+$heading+$h1+$weight}: 900;
-  #{$theme+$heading+$h1+$size}: 3rem;
-  #{$theme+$heading+$h2+$weight}: 700;
-  #{$theme+$heading+$h2+$size}: 2rem;
-  #{$theme+$heading+$h3+$weight}: 600;
-  #{$theme+$heading+$h3+$size}: 1.5rem;
-  #{$theme+$heading+$h4+$weight}: 500;
-  #{$theme+$heading+$h4+$size}: 1.25rem;
-  #{$theme+$heading+$h5+$weight}: 500;
-  #{$theme+$heading+$h5+$size}: 1rem;
-  #{$theme+$heading+$h6+$weight}: 500;
-  #{$theme+$heading+$h6+$size}: 0.875rem;
-
-  // input
-  #{$theme+$input+$color}: 255, 255, 255;
-  #{$theme+$input+$background}: 34, 34, 34;
-  #{$theme+$input+$border}: 1px solid #444444;
-  #{$theme+$input+$radius}: 0.5rem;
-  #{$theme+$input+$height}: 2rem;
-  #{$theme+$input+$padding+$horizontal}: 0.5rem;
-  #{$theme+$input+$transition}: all 0.2s ease-in-out;
-  // focus
-  #{$theme+$input+$focus+$color}: 255, 255, 255;
-  #{$theme+$input+$focus+$background}: 51, 51, 51;
-  #{$theme+$input+$focus+$border}: 1px solid #666666;
-
-  // button
-  #{$theme+$button+$color}: 255, 255, 255;
-  #{$theme+$button+$background}: 68, 68, 68;
-  #{$theme+$button+$border}: 0px solid #666666;
-  #{$theme+$button+$font+$size}: 0.9rem;
-  #{$theme+$button+$font+$weight}: 400;
-  #{$theme+$button+$radius}: 0.5rem;
-  #{$theme+$button+$padding+$horizontal}: 0.5rem;
-  #{$theme+$button+$transition}: all 0.2s ease-in-out;
-  // hover
-  #{$theme+$button+$hover+$color}: 255, 255, 255;
-  #{$theme+$button+$hover+$background}: 85, 85, 85;
-  #{$theme+$button+$hover+$border}: 0px solid #666666;
-  #{$theme+$button+$hover+$radius}: 0.5rem;
-  #{$theme+$button+$hover+$transition}: all 50ms ease-in-out;
-  // active
-  #{$theme+$button+$active+$color}: 0, 0, 0;
-  #{$theme+$button+$active+$background}: 102, 102, 102;
-  #{$theme+$button+$active+$border}: 0px solid #777777;
-  #{$theme+$button+$active+$radius}: 0.5rem;
-  #{$theme+$button+$active+$transition}: all 50ms ease-in-out;
-
-  // text button
-  #{$theme+$textbutton+$font+$weight}: 700;
-
-  // font
-  #{$theme+$font+$family}: Inter;
-  #{$theme+$font+$size}: 0.9rem;
-  #{$theme+$font+$weight}: 400;
-
-  // header
-  #{$theme+$header+$color}: 255, 255, 255;
-  #{$theme+$header+$font+$family}: Inter;
-  #{$theme+$header+$font+$size}: 1.2rem;
-  #{$theme+$header+$font+$weight}: 700;
-  #{$theme+$header+$padding+$vertical}: 1rem;
-  #{$theme+$header+$padding+$horizontal}: 0.5rem;
-}
-
-.level1 {
-  color: rgb(var(#{$theme+$color}));
-
-  #{$theme+$color}: 255, 255, 255;
-  #{$theme+$background}: 51, 51, 51;
-  #{$theme+$border}: 1px solid #666666;
-  #{$theme+$accent}: 118, 140, 231;
-  #{$theme+$radius}: 0.5rem;
-  #{$theme+$font+$family}: Inter;
-  #{$theme+$font+$radius}: 0.9rem;
-  #{$theme+$font+$weight}: 400;
-  #{$theme+$padding}: 0.75rem;
-  #{$theme+$gap}: 0.5rem;
-  #{$theme+$transition}: all 200ms ease-in-out;
-  #{$theme+$separator+$size}: 1px;
-  #{$theme+$separator+$color}: 85, 85, 85;
-
-  // heading
-  #{$theme+$heading+$h1+$weight}: 800;
-  #{$theme+$heading+$h1+$size}: 3rem;
-  #{$theme+$heading+$h2+$weight}: 700;
-  #{$theme+$heading+$h2+$size}: 2.5rem;
-  #{$theme+$heading+$h3+$weight}: 600;
-  #{$theme+$heading+$h3+$size}: 2rem;
-  #{$theme+$heading+$h4+$weight}: 500;
-  #{$theme+$heading+$h4+$size}: 1.5rem;
-  #{$theme+$heading+$h5+$weight}: 500;
-  #{$theme+$heading+$h5+$size}: 1rem;
-  #{$theme+$heading+$h6+$weight}: 500;
-  #{$theme+$heading+$h6+$size}: 0.875rem;
-
-  // input
-  #{$theme+$input+$color}: 255, 255, 255;
-  #{$theme+$input+$background}: 34, 34, 34;
-  #{$theme+$input+$border}: 1px solid #444444;
-  #{$theme+$input+$radius}: 0.5rem;
-  #{$theme+$input+$height}: 2rem;
-  #{$theme+$input+$padding+$horizontal}: 0.5rem;
-  #{$theme+$input+$transition}: all 0.2s ease-in-out;
-  // focus
-  #{$theme+$input+$focus+$color}: 255, 255, 255;
-  #{$theme+$input+$focus+$background}: 51, 51, 51;
-  #{$theme+$input+$focus+$border}: 1px solid #666666;
-
-  // button
-  #{$theme+$button+$color}: 255, 255, 255;
-  #{$theme+$button+$background}: 68, 68, 68;
-  #{$theme+$button+$border}: 0px solid #444444;
-  #{$theme+$button+$font+$size}: 0.9rem;
-  #{$theme+$button+$font+$weight}: 400;
-  #{$theme+$button+$radius}: 0.5rem;
-  #{$theme+$button+$padding+$horizontal}: 0.5rem;
-  #{$theme+$button+$transition}: all 0.2s ease-in-out;
-  // hover
-  #{$theme+$button+$hover+$color}: 255, 255, 255;
-  #{$theme+$button+$hover+$background}: 85, 85, 85;
-  #{$theme+$button+$hover+$border}: 0px solid #666666;
-  #{$theme+$button+$hover+$radius}: 0.5rem;
-  #{$theme+$button+$hover+$transition}: all 50ms ease-in-out;
-  // active
-  #{$theme+$button+$active+$color}: 0, 0, 0;
-  #{$theme+$button+$active+$background}: 102, 102, 102;
-  #{$theme+$button+$active+$border}: 0px solid #666666;
-  #{$theme+$button+$active+$radius}: 0.5rem;
-
-  // header
-  #{$theme+$header+$color}: 255, 255, 255;
-  #{$theme+$header+$font+$family}: Inter;
-  #{$theme+$header+$font+$size}: 1.2rem;
-  #{$theme+$header+$font+$weight}: 700;
-  #{$theme+$header+$padding+$vertical}: 0.5rem;
-  #{$theme+$header+$padding+$horizontal}: 0.25rem;
-}
-
-.level2 {
-  color: rgb(var(#{$theme+$color}));
-
-  #{$theme+$color}: 255, 255, 255;
-  #{$theme+$background}: 68, 68, 68;
-  #{$theme+$border}: 1px solid #666666;
-  #{$theme+$accent}: 118, 140, 231;
-  #{$theme+$radius}: 0.25rem;
-  #{$theme+$padding}: 0.5rem;
-  #{$theme+$gap}: 0.75rem;
-  #{$theme+$transition}: all 200ms ease-in-out;
-  #{$theme+$separator+$size}: 1px;
-  #{$theme+$separator+$color}: 85, 85, 85;
-
-  // heading
-  #{$theme+$heading+$h1+$weight}: 900;
-  #{$theme+$heading+$h1+$size}: 3rem;
-  #{$theme+$heading+$h2+$weight}: 700;
-  #{$theme+$heading+$h2+$size}: 2rem;
-  #{$theme+$heading+$h3+$weight}: 600;
-  #{$theme+$heading+$h3+$size}: 1.5rem;
-  #{$theme+$heading+$h4+$weight}: 500;
-  #{$theme+$heading+$h4+$size}: 1.25rem;
-  #{$theme+$heading+$h5+$weight}: 500;
-  #{$theme+$heading+$h5+$size}: 1rem;
-  #{$theme+$heading+$h6+$weight}: 500;
-  #{$theme+$heading+$h6+$size}: 0.875rem;
-
-  // text button
-  #{$theme+$textbutton+$font+$weight}: 700;
-
-  // font
-  #{$theme+$font+$family}: Inter;
-  #{$theme+$font+$size}: 0.9rem;
-  #{$theme+$font+$weight}: 400;
-
-  // input
-  #{$theme+$input+$color}: 255, 255, 255;
-  #{$theme+$input+$background}: 34, 34, 34;
-  #{$theme+$input+$border}: 1px solid #444444;
-  #{$theme+$input+$radius}: 0.5rem;
-  #{$theme+$input+$height}: 2rem;
-  #{$theme+$input+$padding+$horizontal}: 0.5rem;
-  #{$theme+$input+$transition}: all 0.2s ease-in-out;
-  // focus
-  #{$theme+$input+$focus+$color}: 255, 255, 255;
-  #{$theme+$input+$focus+$background}: 51, 51, 51;
-  #{$theme+$input+$focus+$border}: 1px solid #666666;
-
-  // button
-  #{$theme+$button+$color}: 255, 255, 255;
-  #{$theme+$button+$background}: 85, 85, 85;
-  #{$theme+$button+$border}: 0px solid #666666;
-  #{$theme+$button+$font+$family}: Inter;
-  #{$theme+$button+$font+$size}: 0.9rem;
-  #{$theme+$button+$font+$weight}: 400;
-  #{$theme+$button+$radius}: 0.25rem;
-  #{$theme+$button+$padding+$horizontal}: 0.5rem;
-  #{$theme+$button+$transition}: all 0.2s ease-in-out;
-  // hover
-  #{$theme+$button+$hover+$color}: 255, 255, 255;
-  #{$theme+$button+$hover+$background}: 102, 102, 102;
-  #{$theme+$button+$hover+$border}: 0px solid #666666;
-  #{$theme+$button+$hover+$radius}: 0.25rem;
-  #{$theme+$button+$hover+$transition}: all 50ms ease-in-out;
-  // active
-  #{$theme+$button+$active+$color}: 0, 0, 0;
-  #{$theme+$button+$active+$background}: 102, 102, 102;
-  #{$theme+$button+$active+$border}: 0px solid #666666;
-  #{$theme+$button+$active+$radius}: 0.25rem;
-
-  // header
-  #{$theme+$header+$color}: 255, 255, 255;
-  #{$theme+$header+$font+$family}: Inter;
-  #{$theme+$header+$font+$size}: 1.2rem;
-  #{$theme+$header+$font+$weight}: 700;
-  #{$theme+$header+$padding+$vertical}: 0.5rem;
-  #{$theme+$header+$padding+$horizontal}: 0.25rem;
-}
-
-.level3 {
-  color: rgb(var(#{$theme+$color}));
-
-  #{$theme+$color}: 255, 255, 255;
-  #{$theme+$background}: 85, 85, 85;
-  #{$theme+$border}: 1px solid #666666;
-  #{$theme+$accent}: 118, 140, 231;
-  #{$theme+$radius}: 1px;
-  #{$theme+$padding}: 0.5rem;
-  #{$theme+$gap}: 1rem;
-  #{$theme+$transition}: all 200ms ease-in-out;
-  #{$theme+$separator+$size}: 1px;
-  #{$theme+$separator+$color}: 85, 85, 85;
-
-  // heading
-  #{$theme+$heading+$h1+$weight}: 900;
-  #{$theme+$heading+$h1+$size}: 3rem;
-  #{$theme+$heading+$h2+$weight}: 700;
-  #{$theme+$heading+$h2+$size}: 2rem;
-  #{$theme+$heading+$h3+$weight}: 600;
-  #{$theme+$heading+$h3+$size}: 1.5rem;
-  #{$theme+$heading+$h4+$weight}: 500;
-  #{$theme+$heading+$h4+$size}: 1.25rem;
-  #{$theme+$heading+$h5+$weight}: 500;
-  #{$theme+$heading+$h5+$size}: 1rem;
-  #{$theme+$heading+$h6+$weight}: 500;
-  #{$theme+$heading+$h6+$size}: 0.875rem;
-
-  // text button
-  #{$theme+$textbutton+$font+$weight}: 700;
-
-  // font
-  #{$theme+$family}: Inter;
-  #{$theme+$size}: 0.9rem;
-  #{$theme+$weight}: 400;
-
-  // input
-  #{$theme+$input+$color}: 255, 255, 255;
-  #{$theme+$input+$background}: 34, 34, 34;
-  #{$theme+$input+$border}: 1px solid #444444;
-  #{$theme+$input+$radius}: 0.5rem;
-  #{$theme+$input+$height}: 2rem;
-  #{$theme+$input+$padding+$horizontal}: 0.5rem;
-  #{$theme+$input+$transition}: all 0.2s ease-in-out;
-  // focus
-  #{$theme+$input+$focus+$color}: 255, 255, 255;
-  #{$theme+$input+$focus+$background}: 51, 51, 51;
-  #{$theme+$input+$focus+$border}: 1px solid #666666;
-
-  // button
-  #{$theme+$button+$color}: 255, 255, 255;
-  #{$theme+$button+$background}: 102, 102, 102;
-  #{$theme+$button+$border}: 0px solid #666666;
-  #{$theme+$button+$font+$family}: Inter;
-  #{$theme+$button+$font+$size}: 0.9rem;
-  #{$theme+$button+$font+$weight}: 400;
-  #{$theme+$button+$radius}: 0.25rem;
-  #{$theme+$button+$padding+$horizontal}: 0.5rem;
-  // hover
-  #{$theme+$button+$hover+$color}: 255, 255, 255;
-  #{$theme+$button+$hover+$background}: 119, 119, 119;
-  #{$theme+$button+$hover+$border}: 0px solid #777777;
-  #{$theme+$button+$hover+$radius}: 0.25rem;
-  #{$theme+$button+$hover+$transition}: all 50ms ease-in-out;
-  // active
-  #{$theme+$button+$active+$color}: 0, 0, 0;
-  #{$theme+$button+$active+$background}: 119, 119, 119;
-  #{$theme+$button+$active+$border}: 0px solid #777777;
-  #{$theme+$button+$active+$radius}: 0.25rem;
-
-  // header
-  #{$theme+$header+$color}: 255, 255, 255;
-  #{$theme+$header+$font+$family}: Inter;
-  #{$theme+$header+$font+$size}: 1.2rem;
-  #{$theme+$header+$font+$weight}: 700;
-  #{$theme+$header+$padding+$vertical}: 0.5rem;
-  #{$theme+$header+$padding+$horizontal}: 0.25rem;
-}
-
-.mobile {
-  .level0 {
-    #{$theme+$input+$height}: 2.5rem;
-  }
-
-  .level1 {
-    #{$theme+$input+$height}: 2.5rem;
-  }
-
-  .level2 {
-    #{$theme+$input+$height}: 2.5rem;
-  }
-
-  .level3 {
-    #{$theme+$input+$height}: 2.5rem;
-  }
-}

package/lib/theme/themeValues.css

@@ -1,7 +0,0 @@
-@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)
- */
-
-/*# sourceMappingURL=themeValues.css.map */

package/lib/theme/themeValues.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["themeValues.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA","file":"themeValues.css"}

package/lib/theme/themeValues.scss

@@ -1,129 +0,0 @@
-/*!
- * 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";
-$button: "btn";
-$hover: "hvr";
-$active: "atv";
-$padding: "pdn";
-$border: "brd";
-$radius: "rad";
-$accent: "acn";
-$subcolor: "scl";
-$color: "col";
-$background: "bgn";
-$gap: "gap";
-$transition: "trans";
-$font: "font";
-$size: "size";
-$weight: "wgt";
-$family: "fam";
-$vertical: "vert";
-$horizontal: "horiz";
-$header: "hed";
-$separator: "sep";
-$height: "hei";
-$width: "wid";
-$heading: "hed";
-$input: "inp";
-$focus: "foc";
-$textbutton: "txb";
-$h1: "he1";
-$h2: "he2";
-$h3: "he3";
-$h4: "he4";
-$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;
-$sizeTablet: 768px;
-$sizeLargeTablet: 960px;
-$sizeSmallDesktop: 1200px;
-$sizeMediumDesktop: 1440px;
-$sizeLargeDesktop: 1920px;
-$sizeWideDesktop: 2560px;

package/lib/utilityComponent/hasBeenShown/hasBeenShown.tsx

@@ -1,47 +0,0 @@
-/*
- * 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/lib/utilityComponent/onInView/onInView.tsx

@@ -1,83 +0,0 @@
-/*
- * 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;