@yourdash/uikit 0.1.4 → 0.1.6

package/dist/lib/components/container/UKContainer.d.ts

@@ -1,8 +1,9 @@
-import { FC, ReactNode } from 'react';
+import { default as React, FC, ReactNode } from 'react';
 declare const UKContainer: FC<{
     className?: string;
     level?: 0 | 1 | 2 | 3;
     children: ReactNode | ReactNode[];
     disableRounding?: boolean;
+    style?: React.CSSProperties;
 }>;
 export default UKContainer;

package/dist/lib/components/container/UKContainer.mjs

@@ -1,11 +1,11 @@
 import { jsx as l } from "react/jsx-runtime";
-import o from "../../core/clippy.mjs";
-import r from "../../core/incrementLevel.mjs";
-import { useLevel as m, useLevelClass as t } from "../../core/level.mjs";
+import i from "../../core/clippy.mjs";
+import m from "../../core/incrementLevel.mjs";
+import { useLevel as o, useLevelClass as r } from "../../core/level.mjs";
 import n from "./container.module.scss.mjs";
 const u = (e) => {
-  const i = e.level || m();
-  return /* @__PURE__ */ l("div", { className: o(n.component, e.className, e.disableRounding && n.disableRounding, t(i)), children: /* @__PURE__ */ l(r, { children: e.children }) });
+  const t = e.level || o();
+  return /* @__PURE__ */ l("div", { className: i(n.component, e.className, e.disableRounding && n.disableRounding, r(t)), style: e.style, children: /* @__PURE__ */ l(m, { children: e.children }) });
 };
 export {
   u as default

package/dist/lib/components/container/UKContainer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"UKContainer.mjs","sources":["../../../../lib/components/container/UKContainer.tsx"],"sourcesContent":["/*\r\n * Copyright ©2025 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.\r\n * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)\r\n */\r\n\r\nimport clippy from \"../../core/clippy.ts\";\r\nimport { FC, ReactNode } from \"react\";\r\nimport IncrementLevel from \"../../core/incrementLevel.tsx\";\r\nimport { useLevel, useLevelClass } from \"../../core/level.tsx\";\r\nimport styles from \"./container.module.scss\";\r\n\r\nconst UKContainer: FC<{ className?: string; level?: 0 | 1 | 2 | 3; children: ReactNode | ReactNode[]; disableRounding?: boolean }> = (\r\n  props,\r\n) => {\r\n  const level = props.level || useLevel();\r\n\r\n  return (\r\n    <div className={clippy(styles.component, props.className, props.disableRounding && styles.disableRounding, useLevelClass(level))}>\r\n      <IncrementLevel>{props.children}</IncrementLevel>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default UKContainer;\r\n"],"names":["UKContainer","props","level","useLevel","jsx","clippy","styles","component","className","disableRounding","useLevelClass","IncrementLevel","children"],"mappings":";;;;;AAWA,MAAMA,IACJC,CACGA,MAAA;AACGC,QAAAA,IAAQD,EAAMC,SAASC,EAAS;AAGpC,SAAA,gBAAAC,EAAC,SAAI,WAAWC,EAAOC,EAAOC,WAAWN,EAAMO,WAAWP,EAAMQ,mBAAmBH,EAAOG,iBAAiBC,EAAcR,CAAK,CAAC,GAC7H,4BAACS,GAAgBV,EAAAA,UAAAA,EAAMW,UAAS,EAClC,CAAA;AAEJ;"}
+{"version":3,"file":"UKContainer.mjs","sources":["../../../../lib/components/container/UKContainer.tsx"],"sourcesContent":["/*\r\n * Copyright ©2025 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.\r\n * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)\r\n */\r\n\r\nimport clippy from \"../../core/clippy.ts\";\r\nimport React, { FC, ReactNode } from \"react\";\r\nimport IncrementLevel from \"../../core/incrementLevel.tsx\";\r\nimport { useLevel, useLevelClass } from \"../../core/level.tsx\";\r\nimport styles from \"./container.module.scss\";\r\n\r\nconst UKContainer: FC<{ className?: string; level?: 0 | 1 | 2 | 3; children: ReactNode | ReactNode[]; disableRounding?: boolean; style?: React.CSSProperties }> = (\r\n  props,\r\n) => {\r\n  const level = props.level || useLevel();\r\n\r\n  return (\r\n    <div className={clippy(styles.component, props.className, props.disableRounding && styles.disableRounding, useLevelClass(level))} style={props.style}>\r\n      <IncrementLevel>{props.children}</IncrementLevel>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default UKContainer;\r\n"],"names":["UKContainer","props","level","useLevel","jsx","clippy","styles","component","className","disableRounding","useLevelClass","style","IncrementLevel","children"],"mappings":";;;;;AAWA,MAAMA,IACJC,CACGA,MAAA;AACGC,QAAAA,IAAQD,EAAMC,SAASC,EAAS;AAGpC,SAAA,gBAAAC,EAAC,SAAI,WAAWC,EAAOC,EAAOC,WAAWN,EAAMO,WAAWP,EAAMQ,mBAAmBH,EAAOG,iBAAiBC,EAAcR,CAAK,CAAC,GAAG,OAAOD,EAAMU,OAC7I,UAAC,gBAAAP,EAAAQ,GAAA,EAAgBX,UAAMY,EAAAA,SAAAA,CAAS,EAClC,CAAA;AAEJ;"}

package/dist/lib/views/carousel/UKCarousel.d.ts

@@ -4,6 +4,8 @@ declare const UKCarousel: React.FC<{
         element: React.ReactElement;
         id: string;
     }[];
+    loopAround?: boolean;
     className?: string;
+    height?: string;
 }>;
 export default UKCarousel;

package/dist/lib/views/carousel/UKCarousel.mjs

@@ -1,97 +1,123 @@
-import { jsx as p, jsxs as w } from "react/jsx-runtime";
-import { c as y } from "../../../_virtual/compiler-runtime.mjs";
-import { useRef as K, useState as L, useEffect as U } from "react";
-import x from "../../components/card/UKCard.mjs";
-import V from "../../components/container/UKContainer.mjs";
-import I from "../../core/clippy.mjs";
-import { UKIcons as T } from "../../core/iconDictionary.mjs";
-import B from "../../components/iconButton/UKIconButton.mjs";
-import l from "./carousel.module.scss.mjs";
-const G = (v) => {
-  const e = y.c(27), {
-    items: s,
-    className: R
-  } = v, h = K(null), [r, P] = L(0);
-  let b, E;
-  e[0] === Symbol.for("react.memo_cache_sentinel") ? (b = () => {
-    const t = h.current;
+import { jsx as P, jsxs as y } from "react/jsx-runtime";
+import { c as M } from "../../../_virtual/compiler-runtime.mjs";
+import { useRef as j, useState as A, useEffect as S } from "react";
+import O from "../../components/card/UKCard.mjs";
+import $ from "../../components/container/UKContainer.mjs";
+import x from "../../core/clippy.mjs";
+import { UKIcons as K } from "../../core/iconDictionary.mjs";
+import L from "../../components/iconButton/UKIconButton.mjs";
+import o from "./carousel.module.scss.mjs";
+const X = (U) => {
+  const e = M.c(35), {
+    items: c,
+    className: k,
+    loopAround: s,
+    height: R
+  } = U, N = j(null), [r, i] = A(0);
+  let E, I;
+  e[0] === Symbol.for("react.memo_cache_sentinel") ? (E = () => {
+    const t = N.current;
     if (!t)
       return;
-    console.log(Array.from(t.children));
-    let o;
-    const C = () => {
-      clearTimeout(o), o = setTimeout(function() {
-        Array.from(t.children).forEach((n, _) => {
-          if (Math.abs(n.getBoundingClientRect().left + n.getBoundingClientRect().width / 2 - (t.getBoundingClientRect().left + t.getBoundingClientRect().width / 2)) < n.getBoundingClientRect().width / 2) {
-            P(_);
-            return;
-          }
-        });
-      }, 16);
+    const l = () => {
+      const n = t.getBoundingClientRect();
+      let b;
+      b = 0;
+      let C;
+      C = -1, Array.from(t.children).forEach((V, B) => {
+        const T = V.getBoundingClientRect(), w = Math.max(0, Math.min(T.right, n.right) - Math.max(T.left, n.left));
+        w > b && (b = w, C = B);
+      }), C !== -1 && i(C);
     };
-    return t.addEventListener("scroll", C), () => {
-      t.removeEventListener("scroll", C), clearTimeout(o);
+    return t.addEventListener("scroll", l), () => {
+      t.removeEventListener("scroll", l);
     };
-  }, E = [], e[0] = b, e[1] = E) : (b = e[0], E = e[1]), U(b, E);
-  let i;
-  e[2] !== R ? (i = I(l.containerComponent, R), e[2] = R, e[3] = i) : i = e[3];
-  let c;
-  e[4] !== s ? (c = s.map(k), e[4] = s, e[5] = c) : c = e[5];
+  }, I = [], e[0] = E, e[1] = I) : (E = e[0], I = e[1]), S(E, I);
   let a;
-  e[6] !== c ? (a = /* @__PURE__ */ p("div", { className: l.component, "data-pages": !0, ref: h, children: c }), e[6] = c, e[7] = a) : a = e[7];
+  e[2] !== k ? (a = x(o.containerComponent, k), e[2] = k, e[3] = a) : a = e[3];
   let m;
-  e[8] !== r ? (m = /* @__PURE__ */ p(B, { accessibleLabel: "previous page", icon: T.ChevronLeft, className: l.pageControl, onClick: () => {
-    const t = h.current;
+  e[4] !== R ? (m = {
+    "--carousel-height": R
+  }, e[4] = R, e[5] = m) : m = e[5];
+  let f;
+  if (e[6] !== r || e[7] !== c) {
+    let t;
+    e[9] !== r ? (t = (l, n) => /* @__PURE__ */ P("div", { className: x(o.page, n === r && o.activePage), children: l.element }, l.id), e[9] = r, e[10] = t) : t = e[10], f = c.map(t), e[6] = r, e[7] = c, e[8] = f;
+  } else
+    f = e[8];
+  let h;
+  e[11] !== f ? (h = /* @__PURE__ */ P("div", { className: o.component, "data-pages": !0, ref: N, children: f }), e[11] = f, e[12] = h) : h = e[12];
+  let u;
+  e[13] !== r || e[14] !== s ? (u = /* @__PURE__ */ P(L, { accessibleLabel: "previous page", icon: K.ChevronLeft, className: o.pageControl, onClick: () => {
+    const t = N.current;
     if (!t)
       return;
-    const o = t.children[r - 1];
-    o && o.scrollIntoView({
-      behavior: "smooth"
-    });
-  } }), e[8] = r, e[9] = m) : m = e[9];
-  let f;
-  if (e[10] !== r || e[11] !== s) {
+    const l = t.children[r - 1];
+    if (!l) {
+      s && (t.children[t.children.length - 1].scrollIntoView({
+        behavior: "smooth",
+        inline: "center",
+        block: "center"
+      }), i(t.children.length - 1));
+      return;
+    }
+    l.scrollIntoView({
+      behavior: "smooth",
+      inline: "center",
+      block: "center"
+    }), i(r - 1);
+  } }), e[13] = r, e[14] = s, e[15] = u) : u = e[15];
+  let g;
+  if (e[16] !== r || e[17] !== c) {
     let t;
-    e[13] !== r ? (t = (o, C) => /* @__PURE__ */ p("button", { className: I(l.pageIndicator, C === r && l.selected), onClick: () => {
-      const n = h.current;
-      if (!n)
+    e[19] !== r ? (t = (l, n) => /* @__PURE__ */ P("button", { className: x(o.pageIndicator, n === r && o.selected), onClick: () => {
+      const b = N.current;
+      if (!b)
         return;
-      n.scrollIntoView({
-        behavior: "smooth"
-      }), n.children[C].scrollIntoView({
-        behavior: "smooth"
+      const C = b.children[n];
+      i(n), C.scrollIntoView({
+        behavior: "smooth",
+        inline: "center",
+        block: "center"
       });
-    } }, o.id), e[13] = r, e[14] = t) : t = e[14], f = s.map(t), e[10] = r, e[11] = s, e[12] = f;
+    } }, l.id), e[19] = r, e[20] = t) : t = e[20], g = c.map(t), e[16] = r, e[17] = c, e[18] = g;
   } else
-    f = e[12];
-  let u;
-  e[15] !== f ? (u = /* @__PURE__ */ p(x, { className: l.indicator, children: f }), e[15] = f, e[16] = u) : u = e[16];
+    g = e[18];
+  let p;
+  e[21] !== g ? (p = /* @__PURE__ */ P(O, { className: o.indicator, containerClassName: o.indicatorContainer, children: g }), e[21] = g, e[22] = p) : p = e[22];
   let d;
-  e[17] !== r ? (d = /* @__PURE__ */ p(B, { accessibleLabel: "next page", icon: T.ChevronRight, className: l.pageControl, onClick: () => {
-    const t = h.current;
+  e[23] !== r || e[24] !== s ? (d = /* @__PURE__ */ P(L, { accessibleLabel: "next page", icon: K.ChevronRight, className: o.pageControl, onClick: () => {
+    const t = N.current;
     if (!t)
       return;
-    const o = t.children[r + 1];
-    o && o.scrollIntoView({
-      behavior: "smooth"
-    });
-  } }), e[17] = r, e[18] = d) : d = e[18];
-  let g;
-  e[19] !== m || e[20] !== u || e[21] !== d ? (g = /* @__PURE__ */ w("div", { className: l.controls, children: [
-    m,
+    const l = t.children[r + 1];
+    if (!l) {
+      s && (t.children[0].scrollIntoView({
+        behavior: "smooth",
+        inline: "center",
+        block: "center"
+      }), i(0));
+      return;
+    }
+    l.scrollIntoView({
+      behavior: "smooth",
+      inline: "center",
+      block: "center"
+    }), i(r + 1);
+  } }), e[23] = r, e[24] = s, e[25] = d) : d = e[25];
+  let v;
+  e[26] !== d || e[27] !== u || e[28] !== p ? (v = /* @__PURE__ */ y("div", { className: o.controls, children: [
     u,
+    p,
     d
-  ] }), e[19] = m, e[20] = u, e[21] = d, e[22] = g) : g = e[22];
-  let N;
-  return e[23] !== g || e[24] !== i || e[25] !== a ? (N = /* @__PURE__ */ w(V, { className: i, children: [
-    a,
-    g
-  ] }), e[23] = g, e[24] = i, e[25] = a, e[26] = N) : N = e[26], N;
+  ] }), e[26] = d, e[27] = u, e[28] = p, e[29] = v) : v = e[29];
+  let _;
+  return e[30] !== v || e[31] !== a || e[32] !== m || e[33] !== h ? (_ = /* @__PURE__ */ y($, { className: a, style: m, children: [
+    h,
+    v
+  ] }), e[30] = v, e[31] = a, e[32] = m, e[33] = h, e[34] = _) : _ = e[34], _;
 };
-function k(v) {
-  return /* @__PURE__ */ p("div", { className: l.page, children: v.element }, v.id);
-}
 export {
-  G as default
+  X as default
 };
 //# sourceMappingURL=UKCarousel.mjs.map

package/dist/lib/views/carousel/UKCarousel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"UKCarousel.mjs","sources":["../../../../lib/views/carousel/UKCarousel.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\r\nimport UKCard from \"../../components/card/UKCard.tsx\";\r\nimport UKContainer from \"../../components/container/UKContainer.tsx\";\r\nimport clippy from \"../../core/clippy.js\";\r\nimport { UKIcons } from \"../../core/iconDictionary.ts\";\r\nimport UKIconButton from \"../../components/iconButton/UKIconButton.tsx\";\r\nimport styles from \"./carousel.module.scss\";\r\n\r\nconst UKCarousel: React.FC<{\r\n  items: { element: React.ReactElement; id: string }[];\r\n  className?: string;\r\n}> = ({ items, className }) => {\r\n  const scrollRef = useRef<HTMLDivElement>(null);\r\n  const [currentPage, setCurrentPage] = useState<number>(0);\r\n\r\n  useEffect(() => {\r\n    const scrollElement = scrollRef.current;\r\n\r\n    if (!scrollElement) return;\r\n\r\n    console.log(Array.from(scrollElement.children));\r\n\r\n    let timer: number;\r\n    let listener = () => {\r\n      clearTimeout(timer);\r\n      timer = setTimeout(function () {\r\n        Array.from(scrollElement.children).forEach((ele: Element, index: number) => {\r\n          if (\r\n            Math.abs(\r\n              ele.getBoundingClientRect().left +\r\n                ele.getBoundingClientRect().width / 2 -\r\n                (scrollElement.getBoundingClientRect().left + scrollElement.getBoundingClientRect().width / 2),\r\n            ) <\r\n            ele.getBoundingClientRect().width / 2\r\n          ) {\r\n            setCurrentPage(index);\r\n            return;\r\n          }\r\n        });\r\n      }, 16) as unknown as number;\r\n    };\r\n\r\n    scrollElement.addEventListener(\"scroll\", listener);\r\n\r\n    return () => {\r\n      scrollElement.removeEventListener(\"scroll\", listener);\r\n      clearTimeout(timer);\r\n    };\r\n  }, []);\r\n\r\n  return (\r\n    <UKContainer className={clippy(styles.containerComponent, className)}>\r\n      <div\r\n        className={styles.component}\r\n        data-pages={true}\r\n        ref={scrollRef}\r\n      >\r\n        {items.map((child) => {\r\n          return (\r\n            <div\r\n              key={child.id}\r\n              className={styles.page}\r\n            >\r\n              {child.element}\r\n            </div>\r\n          );\r\n        })}\r\n      </div>\r\n      <div className={styles.controls}>\r\n        <UKIconButton\r\n          accessibleLabel={\"previous page\"}\r\n          icon={UKIcons.ChevronLeft}\r\n          className={styles.pageControl}\r\n          onClick={() => {\r\n            const scrollElement = scrollRef.current;\r\n\r\n            if (!scrollElement) {\r\n              return;\r\n            }\r\n\r\n            const carouselTargetPage = scrollElement.children[currentPage - 1] as HTMLDivElement;\r\n\r\n            if (!carouselTargetPage) {\r\n              return;\r\n            }\r\n\r\n            carouselTargetPage.scrollIntoView({ behavior: \"smooth\" });\r\n          }}\r\n        />\r\n        <UKCard className={styles.indicator}>\r\n          {items.map((page, index) => {\r\n            return (\r\n              <button\r\n                key={page.id}\r\n                className={clippy(styles.pageIndicator, index === currentPage && styles.selected)}\r\n                onClick={() => {\r\n                  const scrollElement = scrollRef.current;\r\n\r\n                  if (!scrollElement) {\r\n                    return;\r\n                  }\r\n\r\n                  scrollElement.scrollIntoView({ behavior: \"smooth\" });\r\n\r\n                  const carouselTargetPage = scrollElement.children[index] as HTMLDivElement;\r\n\r\n                  carouselTargetPage.scrollIntoView({ behavior: \"smooth\" });\r\n                }}\r\n              />\r\n            );\r\n          })}\r\n        </UKCard>\r\n        <UKIconButton\r\n          accessibleLabel={\"next page\"}\r\n          icon={UKIcons.ChevronRight}\r\n          className={styles.pageControl}\r\n          onClick={() => {\r\n            const scrollElement = scrollRef.current;\r\n\r\n            if (!scrollElement) {\r\n              return;\r\n            }\r\n\r\n            const carouselTargetPage = scrollElement.children[currentPage + 1] as HTMLDivElement;\r\n\r\n            if (!carouselTargetPage) {\r\n              return;\r\n            }\r\n\r\n            carouselTargetPage.scrollIntoView({ behavior: \"smooth\" });\r\n          }}\r\n        />\r\n      </div>\r\n    </UKContainer>\r\n  );\r\n};\r\n\r\nexport default UKCarousel;\r\n"],"names":["UKCarousel","t0","$","_c","items","className","scrollRef","useRef","currentPage","setCurrentPage","useState","t1","t2","Symbol","for","scrollElement","current","console","log","Array","from","children","timer","listener","clearTimeout","forEach","ele","index","Math","abs","getBoundingClientRect","left","width","addEventListener","removeEventListener","useEffect","t3","clippy","styles","containerComponent","t4","map","_temp","t5","jsx","component","t6","UKIconButton","UKIcons","ChevronLeft","pageControl","scrollElement_0","carouselTargetPage","scrollIntoView","behavior","t7","t8","page","index_0","pageIndicator","selected","scrollElement_1","id","UKCard","indicator","t9","ChevronRight","scrollElement_2","carouselTargetPage_1","t10","jsxs","controls","t11","UKContainer","child","element"],"mappings":"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"}
+{"version":3,"file":"UKCarousel.mjs","sources":["../../../../lib/views/carousel/UKCarousel.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\r\nimport UKCard from \"../../components/card/UKCard.tsx\";\r\nimport UKContainer from \"../../components/container/UKContainer.tsx\";\r\nimport clippy from \"../../core/clippy.js\";\r\nimport { UKIcons } from \"../../core/iconDictionary.ts\";\r\nimport UKIconButton from \"../../components/iconButton/UKIconButton.tsx\";\r\nimport styles from \"./carousel.module.scss\";\r\n\r\nconst UKCarousel: React.FC<{\r\n  items: { element: React.ReactElement; id: string }[]; loopAround?: boolean; className?: string; height?: string;\r\n}> = ({ items, className, loopAround, height }) => {\r\n  const scrollRef = useRef<HTMLDivElement>(null);\r\n  const [ currentPage, setCurrentPage ] = useState<number>(0);\r\n\r\n  useEffect(() => {\r\n    const scrollElement = scrollRef.current;\r\n\r\n    if (!scrollElement) return;\r\n\r\n    let listener = () => {\r\n      const scrollRect = scrollElement.getBoundingClientRect();\r\n      let maxOverlap = 0;\r\n      let currentPageIndex = -1;\r\n\r\n      Array.from(scrollElement.children).forEach((ele: Element, index: number) => {\r\n        const elementRect = ele.getBoundingClientRect();\r\n\r\n        // Calculate the overlap between the element and the scroll element\r\n        const overlap = Math.max(\r\n          0, Math.min(elementRect.right, scrollRect.right) - Math.max(elementRect.left, scrollRect.left));\r\n\r\n        // Check if this overlap is greater than the current maximum overlap\r\n        if (overlap > maxOverlap) {\r\n          maxOverlap = overlap;\r\n          currentPageIndex = index;\r\n        }\r\n      });\r\n\r\n      // If an element has some overlap, set it as the current page\r\n      if (currentPageIndex !== -1) {\r\n        setCurrentPage(currentPageIndex);\r\n      }\r\n    };\r\n\r\n    scrollElement.addEventListener(\"scroll\", listener);\r\n\r\n    return () => {\r\n      scrollElement.removeEventListener(\"scroll\", listener);\r\n    };\r\n  }, []);\r\n\r\n  return (<UKContainer className={clippy(styles.containerComponent, className)} style={{\r\n    // @ts-ignore\r\n    \"--carousel-height\": height\r\n  }}>\r\n    <div\r\n      className={styles.component}\r\n      data-pages={true}\r\n      ref={scrollRef}\r\n    >\r\n      {items.map((child, index) => {\r\n        return (<div\r\n          key={child.id}\r\n          className={clippy(styles.page, index === currentPage && styles.activePage)}\r\n        >\r\n          {child.element}\r\n        </div>);\r\n      })}\r\n    </div>\r\n    <div className={styles.controls}>\r\n      <UKIconButton\r\n        accessibleLabel={\"previous page\"}\r\n        icon={UKIcons.ChevronLeft}\r\n        className={styles.pageControl}\r\n        onClick={() => {\r\n          const scrollElement = scrollRef.current;\r\n\r\n          if (!scrollElement) {\r\n            return;\r\n          }\r\n\r\n          const carouselTargetPage = scrollElement.children[currentPage - 1] as HTMLDivElement;\r\n\r\n          if (!carouselTargetPage) {\r\n            if (loopAround) {\r\n              const carouselTargetPage = scrollElement.children[scrollElement.children.length - 1] as HTMLDivElement;\r\n              carouselTargetPage.scrollIntoView({ behavior: \"smooth\", inline: \"center\", block: \"center\" });\r\n              setCurrentPage(scrollElement.children.length - 1);\r\n            }\r\n            return;\r\n          }\r\n\r\n          carouselTargetPage.scrollIntoView({ behavior: \"smooth\", inline: \"center\", block: \"center\" });\r\n          setCurrentPage(currentPage - 1);\r\n        }}\r\n      />\r\n      <UKCard className={styles.indicator} containerClassName={styles.indicatorContainer}>\r\n        {items.map((page, index) => {\r\n          return (<button\r\n            key={page.id}\r\n            className={clippy(styles.pageIndicator, index === currentPage && styles.selected)}\r\n            onClick={() => {\r\n              const scrollElement = scrollRef.current;\r\n\r\n              if (!scrollElement) {\r\n                return;\r\n              }\r\n\r\n              const carouselTargetPage = scrollElement.children[index] as HTMLDivElement;\r\n\r\n              setCurrentPage(index);\r\n              carouselTargetPage.scrollIntoView({ behavior: \"smooth\", inline: \"center\", block: \"center\" });\r\n            }}\r\n          />);\r\n        })}\r\n      </UKCard>\r\n      <UKIconButton\r\n        accessibleLabel={\"next page\"}\r\n        icon={UKIcons.ChevronRight}\r\n        className={styles.pageControl}\r\n        onClick={() => {\r\n          const scrollElement = scrollRef.current;\r\n\r\n          if (!scrollElement) {\r\n            return;\r\n          }\r\n\r\n          const carouselTargetPage = scrollElement.children[currentPage + 1] as HTMLDivElement;\r\n\r\n          if (!carouselTargetPage) {\r\n            if (loopAround) {\r\n              const carouselTargetPage = scrollElement.children[0] as HTMLDivElement;\r\n              carouselTargetPage.scrollIntoView({ behavior: \"smooth\", inline: \"center\", block: \"center\" });\r\n              setCurrentPage(0);\r\n            }\r\n            return;\r\n          }\r\n\r\n          carouselTargetPage.scrollIntoView({ behavior: \"smooth\", inline: \"center\", block: \"center\" });\r\n          setCurrentPage(currentPage + 1);\r\n        }}\r\n      />\r\n    </div>\r\n  </UKContainer>);\r\n};\r\n\r\nexport default UKCarousel;\r\n"],"names":["UKCarousel","t0","$","_c","items","className","loopAround","height","scrollRef","useRef","currentPage","setCurrentPage","useState","t1","t2","Symbol","for","scrollElement","current","listener","scrollRect","getBoundingClientRect","maxOverlap","currentPageIndex","Array","from","children","forEach","ele","index","elementRect","overlap","Math","max","min","right","left","addEventListener","removeEventListener","useEffect","t3","clippy","styles","containerComponent","t4","t5","t6","child","index_0","page","activePage","element","id","map","jsx","component","t7","UKIconButton","UKIcons","ChevronLeft","pageControl","scrollElement_0","carouselTargetPage","length","scrollIntoView","behavior","inline","block","t8","t9","index_1","pageIndicator","selected","scrollElement_1","carouselTargetPage_1","UKCard","indicator","indicatorContainer","t10","ChevronRight","scrollElement_2","carouselTargetPage_2","t11","jsxs","controls","t12","UKContainer"],"mappings":"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"}

package/dist/lib/views/carousel/carousel.module.css

@@ -1,4 +1,4 @@
 @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_ya0ua_6{display:flex;flex-direction:row;width:100%;height:24rem;position:relative;padding:0;overflow:hidden}._component_ya0ua_16{display:flex;align-items:center;max-width:100%;height:24rem;gap:.5rem;flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;scroll-snap-stop:always;scrollbar-width:none;padding-bottom:2.5rem}._component_ya0ua_16::-webkit-scrollbar{display:none}._page_ya0ua_33{display:flex;width:100%;height:100%;flex-shrink:0;scroll-snap-align:center}._page_ya0ua_33:first-of-type{margin-left:calc(20% + var(--utgap))}._page_ya0ua_33:last-of-type{margin-right:calc(20% + var(--utgap))}._controls_ya0ua_47{position:absolute;bottom:0;left:50%;transform:translate(-50%);display:flex;flex-direction:row;gap:var(--utgap)}._indicator_ya0ua_57{display:flex;flex-direction:row;gap:var(--utgap);padding:calc(var(--utpdn) / 2);border-radius:var(--utrad)}._indicator_ya0ua_57 ._pageIndicator_ya0ua_64{background-color:rgb(var(--utcol));padding:.5rem;border-radius:var(--utrad);transition:var(--uttrans);position:relative}._indicator_ya0ua_57 ._pageIndicator_ya0ua_64._selected_ya0ua_71{padding-right:1.5rem;padding-left:1.5rem}
+ */._containerComponent_5q8wt_6{display:flex;flex-direction:row;width:100%;height:var(--carousel-height, 24rem);position:relative;padding:0;overflow:hidden;border-radius:0}._component_5q8wt_17{display:flex;align-items:center;max-width:100%;height:100%;gap:10rem;flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;scroll-snap-stop:always;scrollbar-width:none;padding-bottom:2.5rem}._component_5q8wt_17::-webkit-scrollbar{display:none}._page_5q8wt_34{display:flex;width:max-content;height:100%;align-items:center;justify-content:center;flex-shrink:0;scroll-snap-align:center;opacity:.5;transition:var(--uttrans)}._page_5q8wt_34:first-of-type{margin-left:100%}._page_5q8wt_34:last-of-type{margin-right:100%}._activePage_5q8wt_52{opacity:1}._controls_5q8wt_56{position:absolute;bottom:0;left:50%;transform:translate(-50%);display:flex;flex-direction:row;gap:var(--utgap);width:max-content}._indicatorContainer_5q8wt_67{width:max-content;overflow:unset}._indicator_5q8wt_67{display:flex;flex-direction:row;gap:var(--utgap);padding:calc(var(--utpdn) / 4 * 3);border-radius:var(--utrad);min-width:max-content}._indicator_5q8wt_67 ._pageIndicator_5q8wt_80{background-color:rgb(var(--utcol));height:calc(var(--utpdn) + var(--utpdn) / 4);border-radius:calc(var(--utrad) * .5);transition:var(--uttrans);aspect-ratio:1/1;opacity:.8;display:flex}._indicator_5q8wt_67 ._pageIndicator_5q8wt_80._selected_5q8wt_89{aspect-ratio:3/1;opacity:1}

package/dist/lib/views/carousel/carousel.module.scss.mjs

@@ -1,20 +1,24 @@
-import './carousel.module.css';const o = "_containerComponent_ya0ua_6", n = "_component_ya0ua_16", t = "_page_ya0ua_33", a = "_controls_ya0ua_47", e = "_indicator_ya0ua_57", c = "_pageIndicator_ya0ua_64", _ = "_selected_ya0ua_71", s = {
-  containerComponent: o,
+import './carousel.module.css';const t = "_containerComponent_5q8wt_6", n = "_component_5q8wt_17", o = "_page_5q8wt_34", e = "_activePage_5q8wt_52", c = "_controls_5q8wt_56", a = "_indicatorContainer_5q8wt_67", _ = "_indicator_5q8wt_67", i = "_pageIndicator_5q8wt_80", r = "_selected_5q8wt_89", s = {
+  containerComponent: t,
   component: n,
-  page: t,
-  controls: a,
-  indicator: e,
-  pageIndicator: c,
-  selected: _
+  page: o,
+  activePage: e,
+  controls: c,
+  indicatorContainer: a,
+  indicator: _,
+  pageIndicator: i,
+  selected: r
 };
 export {
+  e as activePage,
   n as component,
-  o as containerComponent,
-  a as controls,
+  t as containerComponent,
+  c as controls,
   s as default,
-  e as indicator,
-  t as page,
-  c as pageIndicator,
-  _ as selected
+  _ as indicator,
+  a as indicatorContainer,
+  o as page,
+  i as pageIndicator,
+  r as selected
 };
 //# sourceMappingURL=carousel.module.scss.mjs.map

package/dist/lib/views/carousel/carousel.module.scss.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
+{"version":3,"file":"carousel.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/dist/lib/views/layout/UKLayout.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+interface IUKLayoutProps {
+    primarySidebar?: React.ReactNode;
+    secondarySidebar?: React.ReactNode;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+}
+declare const UKLayout: React.FC<React.PropsWithChildren<IUKLayoutProps>>;
+export default UKLayout;

package/dist/src/pages/carousel/Carousel.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const CarouselTestPage: React.FC;
+export default CarouselTestPage;

package/dist/src/pages/layout/Layout.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const LayoutTestPage: React.FC;
+export default LayoutTestPage;

package/lib/components/container/UKContainer.tsx

@@ -4,18 +4,18 @@
  */
 
 import clippy from "../../core/clippy.ts";
-import { FC, ReactNode } from "react";
+import React, { 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 }> = (
+const UKContainer: FC<{ className?: string; level?: 0 | 1 | 2 | 3; children: ReactNode | ReactNode[]; disableRounding?: boolean; style?: React.CSSProperties }> = (
   props,
 ) => {
   const level = props.level || useLevel();
 
   return (
-    <div className={clippy(styles.component, props.className, props.disableRounding && styles.disableRounding, useLevelClass(level))}>
+    <div className={clippy(styles.component, props.className, props.disableRounding && styles.disableRounding, useLevelClass(level))} style={props.style}>
       <IncrementLevel>{props.children}</IncrementLevel>
     </div>
   );

package/lib/views/carousel/UKCarousel.tsx

@@ -7,132 +7,141 @@ import UKIconButton from "../../components/iconButton/UKIconButton.tsx";
 import styles from "./carousel.module.scss";
 
 const UKCarousel: React.FC<{
-  items: { element: React.ReactElement; id: string }[];
-  className?: string;
-}> = ({ items, className }) => {
+  items: { element: React.ReactElement; id: string }[]; loopAround?: boolean; className?: string; height?: string;
+}> = ({ items, className, loopAround, height }) => {
   const scrollRef = useRef<HTMLDivElement>(null);
-  const [currentPage, setCurrentPage] = useState<number>(0);
+  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;
+      const scrollRect = scrollElement.getBoundingClientRect();
+      let maxOverlap = 0;
+      let currentPageIndex = -1;
+
+      Array.from(scrollElement.children).forEach((ele: Element, index: number) => {
+        const elementRect = ele.getBoundingClientRect();
+
+        // Calculate the overlap between the element and the scroll element
+        const overlap = Math.max(
+          0, Math.min(elementRect.right, scrollRect.right) - Math.max(elementRect.left, scrollRect.left));
+
+        // Check if this overlap is greater than the current maximum overlap
+        if (overlap > maxOverlap) {
+          maxOverlap = overlap;
+          currentPageIndex = index;
+        }
+      });
+
+      // If an element has some overlap, set it as the current page
+      if (currentPageIndex !== -1) {
+        setCurrentPage(currentPageIndex);
+      }
     };
 
     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;
-            }
+  return (<UKContainer className={clippy(styles.containerComponent, className)} style={{
+    // @ts-ignore
+    "--carousel-height": height
+  }}>
+    <div
+      className={styles.component}
+      data-pages={true}
+      ref={scrollRef}
+    >
+      {items.map((child, index) => {
+        return (<div
+          key={child.id}
+          className={clippy(styles.page, index === currentPage && styles.activePage)}
+        >
+          {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;
+          const carouselTargetPage = scrollElement.children[currentPage - 1] as HTMLDivElement;
 
-            if (!carouselTargetPage) {
-              return;
+          if (!carouselTargetPage) {
+            if (loopAround) {
+              const carouselTargetPage = scrollElement.children[scrollElement.children.length - 1] as HTMLDivElement;
+              carouselTargetPage.scrollIntoView({ behavior: "smooth", inline: "center", block: "center" });
+              setCurrentPage(scrollElement.children.length - 1);
             }
+            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;
-            }
+          carouselTargetPage.scrollIntoView({ behavior: "smooth", inline: "center", block: "center" });
+          setCurrentPage(currentPage - 1);
+        }}
+      />
+      <UKCard className={styles.indicator} containerClassName={styles.indicatorContainer}>
+        {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;
+              }
+
+              const carouselTargetPage = scrollElement.children[index] as HTMLDivElement;
+
+              setCurrentPage(index);
+              carouselTargetPage.scrollIntoView({ behavior: "smooth", inline: "center", block: "center" });
+            }}
+          />);
+        })}
+      </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;
+          const carouselTargetPage = scrollElement.children[currentPage + 1] as HTMLDivElement;
 
-            if (!carouselTargetPage) {
-              return;
+          if (!carouselTargetPage) {
+            if (loopAround) {
+              const carouselTargetPage = scrollElement.children[0] as HTMLDivElement;
+              carouselTargetPage.scrollIntoView({ behavior: "smooth", inline: "center", block: "center" });
+              setCurrentPage(0);
             }
+            return;
+          }
 
-            carouselTargetPage.scrollIntoView({ behavior: "smooth" });
-          }}
-        />
-      </div>
-    </UKContainer>
-  );
+          carouselTargetPage.scrollIntoView({ behavior: "smooth", inline: "center", block: "center" });
+          setCurrentPage(currentPage + 1);
+        }}
+      />
+    </div>
+  </UKContainer>);
 };
 
 export default UKCarousel;

package/lib/views/carousel/carousel.module.scss

@@ -4,18 +4,19 @@
   display: flex;
   flex-direction: row;
   width: 100%;
-  height: 24rem;
+  height: var(--carousel-height, 24rem);
   position: relative;
   padding: 0;
   overflow: hidden;
+  border-radius: 0;
 }
 
 .component {
   display: flex;
   align-items: center;
   max-width: 100%;
-  height: 24rem;
-  gap: 0.5rem;
+  height: 100%;
+  gap: 10rem;
   flex-direction: row;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
@@ -30,20 +31,28 @@
 
 .page {
   display: flex;
-  width: 100%;
+  width: max-content;
   height: 100%;
+  align-items: center;
+  justify-content: center;
   flex-shrink: 0;
   scroll-snap-align: center;
+  opacity: 0.5;
+  transition: $UKTransition;
 
   &:first-of-type {
-    margin-left: calc(20% + var(#{$theme+$gap}));
+    margin-left: 100%;
   }
 
   &:last-of-type {
-    margin-right: calc(20% + var(#{$theme+$gap}));
+    margin-right: 100%;
   }
 }
 
+.activePage {
+  opacity: 1;
+}
+
 .controls {
   position: absolute;
   bottom: 0;
@@ -51,26 +60,35 @@
   transform: translateX(-50%);
   display: flex;
   flex-direction: row;
-  gap: var(#{$theme+$gap});
+  gap: $UKGap;
+  width: max-content;
+}
+
+.indicatorContainer {
+  width: max-content;
+  overflow: unset;
 }
 
 .indicator {
   display: flex;
   flex-direction: row;
   gap: var(#{$theme+$gap});
-  padding: calc(var(#{$theme+$padding}) / 2);
+  padding: calc(calc(var(#{$theme+$padding}) / 4) * 3);
   border-radius: var(#{$theme+$radius});
+  min-width: max-content;
 
   .pageIndicator {
     background-color: rgb(var(#{$theme+$color}));
-    padding: 0.5rem;
-    border-radius: var(#{$theme+$radius});
-    transition: var(#{$theme+$transition});
-    position: relative;
+    height: calc($UKPadding + calc($UKPadding / 4));
+    border-radius: calc(var(#{$theme+$radius}) * 0.5);
+    transition: $UKTransition;
+    aspect-ratio: 1 / 1;
+    opacity: 0.8;
+    display: flex;
 
     &.selected {
-      padding-right: 1.5rem;
-      padding-left: 1.5rem;
+      aspect-ratio: 3 / 1;
+      opacity: 1;
     }
   }
 }

package/lib/views/layout/UKLayout.module.scss

@@ -0,0 +1,24 @@
+.layout {
+  display: grid;
+  grid-template: auto 1fr auto / auto 1fr auto;
+}
+
+.header {
+  grid-column: 1 / 4;
+}
+
+.footer {
+  grid-column: 1 / 4;
+}
+
+.children {
+  grid-column: 2 / 3;
+}
+
+.primarySidebar {
+  grid-column: 1 / 2;
+}
+
+.secondarySidebar {
+  grid-column: 3 / 4;
+}

package/lib/views/layout/UKLayout.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import styles from "./UKLayout.module.scss";
+
+interface IUKLayoutProps {
+  primarySidebar?: React.ReactNode,
+  secondarySidebar?: React.ReactNode,
+  header?: React.ReactNode,
+  footer?: React.ReactNode,
+}
+
+const UKLayout: React.FC<React.PropsWithChildren<IUKLayoutProps>> = ({
+                                                                       primarySidebar,
+                                                                       secondarySidebar,
+                                                                       footer,
+                                                                       header,
+                                                                       children
+                                                                     }) => {
+  return <div className={styles.layout}>
+    {header && <div className={styles.header}>{header}</div>}
+    {primarySidebar && <div className={styles.primarySidebar}>{primarySidebar}</div>}
+    <div className={styles.children}>
+      {children}
+    </div>
+    {secondarySidebar && <div className={styles.secondarySidebar}>{secondarySidebar}</div>}
+    {footer && <div className={styles.footer}>{footer}</div>}
+  </div>;
+};
+
+export default UKLayout;
+

package/package.json

@@ -1,62 +1,64 @@
-{
-  "name": "@yourdash/uikit",
-  "version": "0.1.4",
-  "description": "",
-  "scripts": {
-    "dev-compile": "vite build --watch",
-    "dev": "vite dev",
-    "compile": "vite build"
-  },
-  "keywords": [],
-  "author": "Ewsgit",
-  "license": "MIT",
-  "files": [
-    "dist",
-    "lib"
-  ],
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "type": "module",
-  "exports": {
-    "./lib/theme/themeValues.scss": {
-      "default": "./dist/themeValues.scss"
-    },
-    "./themeValues.scss": {
-      "default": "./dist/themeValues.scss"
-    },
-    ".": {
-      "import": "./dist/src/index.mjs",
-      "types": "./dist/src/index.d.ts",
-      "default": "./dist/src/index.mjs"
-    }
-  },
-  "dependencies": {
-    "@vitejs/plugin-react": "^4.3.4",
-    "animate.css": "^4.1.1",
-    "babel-plugin-react-compiler": "19.0.0-beta-e1e972c-20250221",
-    "clsx": "^2.1.1",
-    "glob": "^11.0.1",
-    "npm-run-all": "^4.1.5",
-    "vite": "^6.2.0",
-    "vite-plugin-dynamic-import": "^1.6.0",
-    "vite-plugin-lib-inject-css": "^2.2.1"
-  },
-  "devDependencies": {
-    "@types/node": "^22.13.8",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4",
-    "@types/react-router": "^5.1.20",
-    "@types/react-router-dom": "^5.3.3",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-router": "^7.2.0",
-    "react-router-dom": "^7.2.0",
-    "sass-embedded": "^1.85.1",
-    "vite-plugin-dts": "^4.5.3"
-  },
-  "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
-  }
-}
+{
+  "name": "@yourdash/uikit",
+  "version": "0.1.6",
+  "description": "",
+  "scripts": {
+    "dev-compile": "vite build --watch",
+    "dev": "vite dev",
+    "build": "vite build",
+    "compile": "vite build"
+  },
+  "keywords": [],
+  "author": "Ewsgit",
+  "license": "MIT",
+  "files": [
+    "dist",
+    "lib"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "type": "module",
+  "exports": {
+    "./lib/theme/themeValues.scss": {
+      "default": "./dist/themeValues.scss"
+    },
+    "./themeValues.scss": {
+      "default": "./dist/themeValues.scss"
+    },
+    ".": {
+      "import": "./dist/src/index.mjs",
+      "types": "./dist/src/index.d.ts",
+      "default": "./dist/src/index.mjs"
+    }
+  },
+  "dependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "animate.css": "^4.1.1",
+    "babel-plugin-react-compiler": "19.0.0-beta-e1e972c-20250221",
+    "clsx": "^2.1.1",
+    "glob": "^11.0.1",
+    "npm-run-all": "^4.1.5",
+    "vite": "^6.2.0",
+    "vite-plugin-dynamic-import": "^1.6.0",
+    "vite-plugin-lib-inject-css": "^2.2.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.13.8",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@types/react-router": "^5.1.20",
+    "@types/react-router-dom": "^5.3.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router": "^7.2.0",
+    "react-router-dom": "^7.2.0",
+    "sass-embedded": "^1.85.1",
+    "vite-plugin-dts": "^4.5.3"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "packageManager": "pnpm@10.6.3+sha512.bb45e34d50a9a76e858a95837301bfb6bd6d35aea2c5d52094fa497a467c43f5c440103ce2511e9e0a2f89c3d6071baac3358fc68ac6fb75e2ceb3d2736065e6"
+}

package/lib/imports.d.ts

@@ -1,81 +0,0 @@
-/*
- * Copyright ©2023 @Ewsgit and YourDash contributors.
- * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
- */
-
-// Declare common file imports as shared for the Typescript Language Server
-
-declare module "*.module.css" {
-  const content: { [className: string]: string };
-  export default content;
-}
-
-declare module "*.module.scss" {
-  const content: { [className: string]: string };
-  export default content;
-}
-
-declare module "*.jpg" {
-  const value: string;
-  export default value;
-}
-
-declare module "*.png" {
-  const value: string;
-  export default value;
-}
-
-declare module "*.svg" {
-  const value: string;
-  export default value;
-}
-
-declare module "*.avif" {
-  const value: string;
-  export default value;
-}
-
-declare module "*.css" {
-  const value: string;
-  export default value;
-}
-
-declare module "*.scss" {
-  const value: string;
-  export default value;
-}
-
-declare module "*.json" {
-  const content: { [key: string]: string | number | object | boolean };
-  export default content;
-}
-
-declare module "*.obj" {
-  const value: string;
-  export default value;
-}
-
-declare module "*.glb" {
-  const value: string;
-  export default value;
-}
-
-declare module "*.gltf" {
-  const value: string;
-  export default value;
-}
-
-declare module "*.md" {
-  const value: string;
-  export default value;
-}
-
-declare module "*.mdx" {
-  const value: string;
-  export default value;
-}
-
-declare module "*.wasm" {
-  const value: string;
-  export default value;
-}