@base-framework/ui 1.0.74 → 1.0.76

package/dist/index.es.js

@@ -5,7 +5,7 @@ import { V as w, a as U } from "./veil-D4dRxILB.js";
 import { Icons as R } from "./icons.es.js";
 import { A as G, B as V, C as j, z as q, u as z, v as J, w as _, D as K, j as Q, k as X, G as Y, E as Z, s as $, c as aa, a as sa, b as ea, i as oa, g as ta, e as ra, h as na, F as ia, d as la, f as pa, t as ua, M as ma, l as da, N as ga, P as Ta, p as ca, q as Ca, S as ba, n as Da, o as Sa, T as Ia, x as Ba, y as Pa, m as Fa, r as Ma } from "./confirmation-DgARq0AK.js";
 import { A as Na, b as va, C as fa, D as xa, a as ha, F as ya, M as Wa, P as La, c as Aa, g as Ha, p as wa } from "./calendar-BDqm833e.js";
-import { B as Oa, n as Ra, C as Ea, j as Ga, D as Va, l as ja, H as qa, I as za, N as Ja, O as _a, P as Ka, S as Qa, m as Xa, r as Ya, q as Za, o as $a, p as as, T as ss, k as es, U as os, W as ts, f as rs, h as ns, i as is, c as ls, d as ps, b as us, e as ms, a as ds, g as gs } from "./signature-panel-DQql2HX7.js";
+import { B as Oa, n as Ra, C as Ea, j as Ga, D as Va, l as ja, H as qa, I as za, N as Ja, O as _a, P as Ka, S as Qa, m as Xa, r as Ya, q as Za, o as $a, p as as, T as ss, k as es, U as os, W as ts, f as rs, h as ns, i as is, c as ls, d as ps, b as us, e as ms, a as ds, g as gs } from "./signature-panel-DkDboZSd.js";
 import { B as cs, I as Cs, M as bs, d as Ds, e as Ss, g as Is, N as Bs, b as Ps, a as Fs, f as Ms, P as ks, c as Ns, S as vs, T as fs } from "./mobile-nav-wrapper-BE_hr65B.js";
 import { B as hs, a as ys, C as Ws, F as Ls, b as As, c as Hs, M as ws, P as Us, S as Os } from "./sidebar-menu-page-nCAVFk3R.js";
 import { A as Es, F as Gs, M as Vs, a as js, T as qs } from "./aside-template-McEj_Gxc.js";

package/dist/organisms.es.js

@@ -1,4 +1,4 @@
-import { B as s, n as o, C as t, j as r, D as l, l as n, H as i, I as b, N as d, O as v, P as g, S as p, m as u, r as N, q as k, o as D, p as C, T, k as c, U as M, W as B, f as m, h as y, i as W, c as h, d as H, b as P, e as S, a as f, g as x } from "./signature-panel-DQql2HX7.js";
+import { B as s, n as o, C as t, j as r, D as l, l as n, H as i, I as b, N as d, O as v, P as g, S as p, m as u, r as N, q as k, o as D, p as C, T, k as c, U as M, W as B, f as m, h as y, i as W, c as h, d as H, b as P, e as S, a as f, g as x } from "./signature-panel-DkDboZSd.js";
 import { b as L, C as O, D as F, a as U, F as G, M as j, c as q, p as w } from "./calendar-BDqm833e.js";
 import { B as A, I as E, M as J, d as K, e as Q, g as R, N as V, b as X, a as Y, f as Z, P as _, c as $, S as aa, T as ea } from "./mobile-nav-wrapper-BE_hr65B.js";
 export {

package/dist/{signature-panel-DQql2HX7.js → signature-panel-DkDboZSd.js}

@@ -1,6 +1,6 @@
-import { Button as y, Div as o, On as E, Span as v, Th as P, UseParent as H, I as Q, Thead as X, Tr as q, Table as R, P as m, Li as D, Time as K, Nav as S, Ul as b, Section as O, Canvas as G } from "@base-framework/atoms";
-import { Atom as d, Component as u, Data as L, DateTime as V, Jot as M, router as x, NavLink as z, DataTracker as N, base as B, Dom as I } from "@base-framework/base";
-import { B as C, I as $ } from "./buttons-CVEwmPAi.js";
+import { Button as y, Div as o, On as E, Span as v, Th as P, UseParent as H, I as Q, Thead as X, Tr as q, Table as R, P as m, Li as D, Time as K, Nav as S, Ul as b, Section as M, Canvas as G } from "@base-framework/atoms";
+import { Atom as d, Component as u, Data as C, DateTime as V, Jot as O, router as x, NavLink as z, DataTracker as N, base as I, Dom as B } from "@base-framework/base";
+import { B as L, I as $ } from "./buttons-CVEwmPAi.js";
 import { Icons as w } from "./icons.es.js";
 import { TableBody as _, ScrollableTableBody as J, List as Z, IntervalTimer as ee } from "@base-framework/organisms";
 import { C as te, I as se, H as ae } from "./inputs-DmJuUwS9.js";
@@ -16,7 +16,7 @@ d(({ value: t, label: e }) => y({
   dataSet: ["performance", ["state", t, "active"]],
   click: (s, { state: a }) => a.performance = t
 }, e));
-class Je extends u {
+class Ze extends u {
   /**
    * This will declare the props for the compiler.
    *
@@ -63,7 +63,7 @@ const oe = (t) => {
   n.setDate(s.getDate() - a);
   const i = new Date(n);
   return i.setDate(n.getDate() + (t - 1) * 7), i;
-}, Ze = (t, e) => {
+}, et = (t, e) => {
   const s = new Date(t, e, 1).getDay(), a = new Date(t, e + 1, 0).getDate(), n = [];
   let i = [];
   for (let l = 1 - s; l <= a; l++) {
@@ -71,7 +71,7 @@ const oe = (t) => {
     i.push(l > 0 ? h : null), (i.length === 7 || l === a) && (n.push([...i]), i = []);
   }
   return n;
-}, et = (t, e) => {
+}, tt = (t, e) => {
   const s = new Date(t, e + 1, 0).getDate(), a = [];
   let n = [];
   for (let i = 1; i <= s; i++)
@@ -154,7 +154,7 @@ const oe = (t) => {
       )
     ]
   );
-}), W = ({ label: t, click: e }) => C(
+}), W = ({ label: t, click: e }) => L(
   {
     class: `
 			inline-flex items-center justify-center h-7 w-7 bg-transparent p-0
@@ -178,7 +178,7 @@ const oe = (t) => {
     click: t
   })
 ]);
-class tt extends u {
+class st extends u {
   /**
    * This will declare the props for the compiler.
    *
@@ -194,7 +194,7 @@ class tt extends u {
    */
   setData() {
     const e = /* @__PURE__ */ new Date(), s = this.selectedWeek || this.calculateCurrentWeek(e), a = T(s, e.getFullYear());
-    return new L({
+    return new C({
       monthName: this.getMonthName(a.getMonth()),
       year: a.getFullYear(),
       month: a.getMonth(),
@@ -329,7 +329,7 @@ const pe = (t, e) => {
   items: e,
   rowItem: (n) => a(n, s),
   class: "divide-y divide-border"
-}), ke = M(
+}), ke = O(
   {
     /**
      * Initializes component data.
@@ -337,7 +337,7 @@ const pe = (t, e) => {
      * @returns {Data}
      */
     setData() {
-      return new L({
+      return new C({
         selectedRows: [],
         selected: !1
       });
@@ -477,82 +477,105 @@ const pe = (t, e) => {
       this.data.selectedRows = [];
     }
   }
-), st = d((t) => new ke(
-  {
-    /**
-     * Renders the DataTable component.
-     *
-     * @returns {object}
-     */
-    render() {
-      const e = t.rows, s = this.border !== !1 ? "border" : "";
-      return o({ class: "w-full" }, [
-        o({ class: `w-full rounded-md ${s} overflow-x-auto` }, [
-          R({ class: "w-full" }, [
+);
+class xe extends ke {
+  /**
+   * Renders the DataTable component.
+   *
+   * @returns {object}
+   */
+  render() {
+    const e = this.rows, s = this.border !== !1 ? "border" : "";
+    return o({ class: "w-full" }, [
+      o({ class: `w-full rounded-md ${s} overflow-x-auto` }, [
+        R({ class: "w-full" }, [
+          // @ts-ignore
+          this.headers && j({ headers: this.headers, sort: (a) => this.sortRows(a) }),
+          // @ts-ignore
+          this.customHeader ?? null,
+          new J({
             // @ts-ignore
-            t.headers && j({ headers: t.headers, sort: (a) => this.sortRows(a) }),
+            scrollContainer: this.scrollContainer,
             // @ts-ignore
-            t.customHeader ?? null,
-            J({
-              scrollContainer: t.scrollContainer,
-              loadMoreItems: t.loadMoreItems,
-              offset: t.offset,
-              limit: t.limit,
-              class: t.class,
-              containerClass: t.containerClass ?? "",
-              data: t.data,
-              // @ts-ignore
-              key: t.key,
-              items: e,
-              // @ts-ignore
-              selectRow: this.selectRow.bind(this),
-              // @ts-ignore
-              rowItem: t.rowItem
-            })
-          ])
+            loadMoreItems: this.loadMoreItems,
+            // @ts-ignore
+            offset: this.offset,
+            // @ts-ignore
+            limit: this.limit,
+            // @ts-ignore
+            class: this.class,
+            // @ts-ignore
+            containerClass: this.containerClass ?? "",
+            // @ts-ignore
+            data: this.tableData,
+            // @ts-ignore
+            key: this.key,
+            items: e,
+            // @ts-ignore
+            selectRow: this.selectRow.bind(this),
+            // @ts-ignore
+            rowItem: this.rowItem
+          })
         ])
-      ]);
-    }
+      ])
+    ]);
   }
-)), xe = d(({ name: t, email: e }) => o({ class: "min-w-0 flex-auto" }, [
+}
+const at = d((t) => new xe(
+  {
+    tableData: t.data,
+    scrollContainer: t.scrollContainer,
+    loadMoreItems: t.loadMoreItems,
+    offset: t.offset,
+    limit: t.limit,
+    class: t.class,
+    key: t.key,
+    rows: t.rows,
+    rowItem: t.rowItem,
+    containerClass: t.containerClass ?? "",
+    headers: t.headers,
+    customHeader: t.customHeader,
+    border: t.border
+  }
+)), ye = d(({ name: t, email: e }) => o({ class: "min-w-0 flex-auto" }, [
   m({ class: "text-base font-semibold leading-6 m-0" }, t),
   m({ class: "truncate text-sm leading-5 text-muted-foreground m-0" }, e)
-])), ye = () => o({ class: "flex items-center gap-x-1.5" }, [
+])), ve = () => o({ class: "flex items-center gap-x-1.5" }, [
   o({ class: "flex-none rounded-full bg-emerald-500/20 p-1" }, [
     o({ class: "h-1.5 w-1.5 rounded-full bg-emerald-500" })
   ]),
   m({ class: "text-xs leading-5 text-gray-500" }, "Online")
-]), ve = (t) => m({ class: "text-xs leading-5 text-muted-foreground" }, [
+]), De = (t) => m({ class: "text-xs leading-5 text-muted-foreground" }, [
   v("Last seen "),
   K({ datetime: t }, "3h ago")
-]), De = (t, e) => t === "online" ? ye() : ve(e), Se = d(({ role: t, lastSeen: e, status: s }) => o({ class: "hidden shrink-0 sm:flex sm:flex-col sm:items-end" }, [
+]), Se = (t, e) => t === "online" ? ve() : De(e), Ce = d(({ role: t, lastSeen: e, status: s }) => o({ class: "hidden shrink-0 sm:flex sm:flex-col sm:items-end" }, [
   m({ class: "text-sm leading-6 m-0" }, t),
-  De(s, e)
-])), Le = (t) => t.split(" ").map((s) => s[0]).join(""), Ce = d((t) => D({ class: "fadeIn flex justify-between gap-x-6 py-4 px-4 rounded-md hover:bg-muted/50" }, [
+  Se(s, e)
+])), Le = (t) => t.split(" ").map((s) => s[0]).join(""), Ie = d((t) => D({ class: "fadeIn flex justify-between gap-x-6 py-4 px-4 rounded-md hover:bg-muted/50" }, [
   o({ class: "flex min-w-0 gap-x-4" }, [
     ne({ src: t.image, alt: t.name, fallbackText: Le(t.name) }),
-    xe({ name: t.name, email: t.email })
+    ye({ name: t.name, email: t.email })
   ]),
-  Se({
+  Ce({
     role: t.role,
     lastSeen: t.lastSeen,
     status: t.status
   })
-])), at = d((t) => new Z({
+])), nt = d((t) => new Z({
   cache: "list",
   key: "name",
   items: t.users,
   role: "list",
   class: "divide-y divide-border",
-  rowItem: Ce
-})), Be = (t, e) => e.includes(t), Ie = (t, e, s) => t.exact ? s === e : Be(e, s), Te = ({ text: t, href: e, exact: s, hidden: a }) => new z({
+  rowItem: Ie
+})), Be = (t, e) => e.includes(t), Te = (t, e, s) => t.exact ? s === e : Be(e, s), We = ({ text: t, href: e, exact: s, hidden: a }) => new z({
   text: t,
   href: e,
   exact: s,
   dataSet: ["selected", ["state", !0, "active"]],
   class: `${a ? "hidden" : "inline-flex"} items-center justify-center whitespace-nowrap px-3 py-1.5 text-sm font-medium transition-all rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring focus-visible:ring-offset-background hover:bg-primary hover:text-primary-foreground disabled:opacity-50 disabled:pointer-events-none data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm`
 });
-class nt extends u {
+class it extends u {
   /**
    * This will declare the props for the compiler.
    *
@@ -608,7 +631,7 @@ class nt extends u {
     for (const a of this.links) {
       if (!a.rendered)
         continue;
-      Ie(a, a.getLinkPath(), e) ? (this.updateLink(a, !0), s = !0) : this.updateLink(a, !1);
+      Te(a, a.getLinkPath(), e) ? (this.updateLink(a, !0), s = !0) : this.updateLink(a, !1);
     }
     !s && this.links[0] && this.updateLink(this.links[0], !0);
   }
@@ -638,7 +661,7 @@ class nt extends u {
    * @returns {object}
    */
   addLink({ label: e, href: s, exact: a, hidden: n }) {
-    const i = Te({ text: e, href: s, exact: a, hidden: n });
+    const i = We({ text: e, href: s, exact: a, hidden: n });
     return this.links.push(i), i;
   }
   /**
@@ -650,10 +673,10 @@ class nt extends u {
     this.links = [];
   }
 }
-const it = d((t) => {
+const ot = d((t) => {
   const e = t.margin || "m-4 ml-0";
   return o({ class: `flex-none ${e}` }, [
-    C({
+    L({
       variant: "icon",
       class: "back-button",
       click: () => {
@@ -761,7 +784,7 @@ N.addType("dockableOverlay", (t) => {
   const e = t.component;
   e && e.rendered === !0 && e.state.docked === !1 && e.destroy();
 });
-class ot extends A {
+class lt extends A {
   /**
    * This will stop presistence.
    *
@@ -870,7 +893,7 @@ class ot extends A {
     document.documentElement.style.overflowY = "auto";
   }
 }
-class lt extends A {
+class rt extends A {
   /**
    * This will get the overlay type.
    *
@@ -889,7 +912,7 @@ class lt extends A {
     this.container = e, this.initialize();
   }
 }
-const We = d(({ index: t, click: e, state: s }, a) => D({
+const Pe = d(({ index: t, click: e, state: s }, a) => D({
   class: "p-2 cursor-pointer hover:bg-muted/50",
   onState: [
     [s, "selectedIndex", {
@@ -898,10 +921,10 @@ const We = d(({ index: t, click: e, state: s }, a) => D({
     }]
   ],
   click: () => e(t)
-}, a)), Pe = d(({ selectOption: t, state: e }) => b({
+}, a)), Re = d(({ selectOption: t, state: e }) => b({
   class: "border rounded-md list-none m-0 p-0 max-h-[400px] overflow-y-auto",
-  for: ["filteredOptions", (s, a) => We({ index: a, click: t, state: e }, s.label)]
-})), Re = d((t) => o({ class: "relative flex items-center" }, [
+  for: ["filteredOptions", (s, a) => Pe({ index: a, click: t, state: e }, s.label)]
+})), Me = d((t) => o({ class: "relative flex items-center" }, [
   se({
     cache: "input",
     placeholder: t.placeholder ?? "Search...",
@@ -925,10 +948,10 @@ const We = d(({ index: t, click: e, state: s }, a) => D({
         button: a.input,
         size: "xl"
       }, [
-        Pe(t)
+        Re(t)
       ]);
   }]
-}), rt = M(
+}), ct = O(
   {
     /**
      * This will set up the data object.
@@ -937,7 +960,7 @@ const We = d(({ index: t, click: e, state: s }, a) => D({
      */
     setData() {
       const t = this.options || [];
-      return new L({
+      return new C({
         options: t,
         filteredOptions: t
       });
@@ -1025,7 +1048,7 @@ const We = d(({ index: t, click: e, state: s }, a) => D({
      */
     render() {
       return o({ class: "relative w-full max-w-md" }, [
-        Re({
+        Me({
           // @ts-ignore
           state: this.state,
           // @ts-ignore
@@ -1048,7 +1071,7 @@ const We = d(({ index: t, click: e, state: s }, a) => D({
       ]);
     }
   }
-), Me = (t) => D(
+), ze = (t) => D(
   {
     class: "inline-flex flex-auto items-center justify-center whitespace-nowrap rounded-sm text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm",
     dataSet: ["selected", ["state", t.value, "active"]]
@@ -1060,10 +1083,10 @@ const We = d(({ index: t, click: e, state: s }, a) => D({
       click: (e) => t.callBack(t.value)
     }, t.label)
   ]
-), ze = (t, e) => (t.callBack = e, Me(t)), Ne = (t) => S({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
-  b({ class: "flex flex-auto flex-row", map: [t.options, (e) => ze(e, t.callBack)] })
+), Ne = (t, e) => (t.callBack = e, ze(t)), $e = (t) => S({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
+  b({ class: "flex flex-auto flex-row", map: [t.options, (e) => Ne(e, t.callBack)] })
 ]);
-class ct extends u {
+class dt extends u {
   /**
    * This will declare the props for the compiler.
    *
@@ -1080,12 +1103,12 @@ class ct extends u {
   render() {
     const e = this.select.bind(this);
     return o({ class: "" }, [
-      Ne({
+      $e({
         class: this.class,
         options: this.options,
         callBack: e
       }),
-      O({
+      M({
         class: "tab-content",
         onState: ["selected", this.updateContent.bind(this)]
       })
@@ -1151,7 +1174,7 @@ class ct extends u {
     };
   }
 }
-const $e = (t) => D(
+const je = (t) => D(
   {
     class: "inline-flex flex-auto items-center justify-center whitespace-nowrap rounded-sm text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm",
     dataSet: ["selected", ["state", t.value, "active"]]
@@ -1164,10 +1187,10 @@ const $e = (t) => D(
       disabled: t.disabled
     }, t.label)
   ]
-), je = (t, e) => (t.callBack = e, $e(t)), Ae = (t) => S({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
-  b({ class: "flex flex-auto flex-row", map: [t.options, (e) => je(e, t.callBack)] })
+), Ae = (t, e) => (t.callBack = e, je(t)), Ue = (t) => S({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
+  b({ class: "flex flex-auto flex-row", map: [t.options, (e) => Ae(e, t.callBack)] })
 ]);
-class dt extends u {
+class ht extends u {
   /**
    * This will declare the props for the compiler.
    *
@@ -1183,7 +1206,7 @@ class dt extends u {
    */
   render() {
     const e = this.select.bind(this);
-    return Ae({
+    return Ue({
       class: this.class,
       options: this.options,
       callBack: e
@@ -1210,17 +1233,17 @@ class dt extends u {
     };
   }
 }
-const Ue = (t, e) => new RegExp(`${t}($|/|\\.).*`).test(e), Ye = (t, e) => {
+const Ye = (t, e) => new RegExp(`${t}($|/|\\.).*`).test(e), Fe = (t, e) => {
   const s = t.getLinkPath();
-  return t.exact ? e === s : Ue(s, e);
-}, Fe = ({ text: t, href: e, exact: s }) => new z({
+  return t.exact ? e === s : Ye(s, e);
+}, Ee = ({ text: t, href: e, exact: s }) => new z({
   text: t,
   href: e,
   exact: s,
   dataSet: ["selected", ["state", !0, "active"]],
   class: "inline-flex flex-auto items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm"
 });
-class Ee extends u {
+class He extends u {
   /**
    * This will declare the props for the compiler.
    *
@@ -1271,7 +1294,7 @@ class Ee extends u {
     let s = !1, a = this.links[0];
     this.deactivateAllLinks();
     for (const n of this.links)
-      if (n.rendered !== !1 && (s = Ye(n, e), s === !0)) {
+      if (n.rendered !== !1 && (s = Fe(n, e), s === !0)) {
         this.updateLink(n, !0);
         break;
       }
@@ -1303,7 +1326,7 @@ class Ee extends u {
    * @returns {object}
    */
   addLink({ label: e, href: s, exact: a }) {
-    const n = Fe({ text: e, href: s, exact: a });
+    const n = Ee({ text: e, href: s, exact: a });
     return this.links.push(n), n;
   }
   /**
@@ -1315,7 +1338,7 @@ class Ee extends u {
     this.links = [];
   }
 }
-class ht extends u {
+class ut extends u {
   /**
    * This will declare the props for the compiler.
    *
@@ -1331,11 +1354,11 @@ class ht extends u {
    */
   render() {
     return o({ class: "tab-panel" }, [
-      new Ee({
+      new He({
         class: this.class,
         options: this.options
       }),
-      O({
+      M({
         class: "tab-content",
         switch: this.addGroup()
       })
@@ -1361,7 +1384,7 @@ class ht extends u {
     return s;
   }
 }
-class He extends u {
+class Qe extends u {
   /**
    * Runs before rendering, sets up defaults, a timer for drawing,
    * and basic canvas properties.
@@ -1476,8 +1499,8 @@ class He extends u {
     const { canvas: e, ctx: s } = this, a = e.toDataURL();
     if (this.scale(), this.setupBackground(s), a !== "data:,") {
       const n = new window.Image();
-      B.on("load", n, function i() {
-        s.drawImage(n, 0, 0), B.off("load", n, i);
+      I.on("load", n, function i() {
+        s.drawImage(n, 0, 0), I.off("load", n, i);
       }), n.src = a;
     }
     this.draw();
@@ -1497,7 +1520,7 @@ class He extends u {
    * @returns {void}
    */
   noScaleResize() {
-    const e = I.getSize(container);
+    const e = B.getSize(container);
     this.width = canvas.width = e.width, this.height = canvas.height = e.height;
   }
   /**
@@ -1507,7 +1530,7 @@ class He extends u {
    * @returns {void}
    */
   scale() {
-    const e = this.canvas, s = this.container, a = I.getSize(s), n = this.targetSize, i = n.width, l = n.height;
+    const e = this.canvas, s = this.container, a = B.getSize(s), n = this.targetSize, i = n.width, l = n.height;
     let h = i + "px", c = l + "px";
     if (this.width = e.width = i, this.height = e.height = l, a.width !== 0 && a.height !== 0) {
       const f = a.width, g = a.height, r = f / i, p = g / l, k = Math.min(r, p);
@@ -1587,7 +1610,7 @@ class He extends u {
     this.timer.stop(), this.status = "stopped";
   }
 }
-class ut extends u {
+class ft extends u {
   /**
    * Sets up default properties for the signature panel.
    *
@@ -1610,13 +1633,13 @@ class ut extends u {
         bind: this.path + ".data"
       }),
       o({ class: "absolute top-2 right-2" }, [
-        C({
+        L({
           variant: "icon",
           icon: w.circleX,
           click: this.reset.bind(this)
         })
       ]),
-      new He({
+      new Qe({
         cache: "canvasLayer",
         margin: this.margin,
         targetSize: this.targetSize,
@@ -1666,34 +1689,34 @@ class ut extends u {
   }
 }
 export {
-  it as B,
+  ot as B,
   me as C,
   be as D,
   we as H,
-  lt as I,
-  nt as N,
+  rt as I,
+  it as N,
   A as O,
-  Je as P,
-  st as S,
+  Ze as P,
+  at as S,
   j as T,
-  Ce as U,
-  tt as W,
+  Ie as U,
+  st as W,
   ce as a,
   T as b,
   le as c,
-  Ze as d,
-  et as e,
+  et as d,
+  tt as e,
   he as f,
   re as g,
   fe as h,
   ge as i,
   ke as j,
-  at as k,
-  ot as l,
-  rt as m,
-  ct as n,
-  dt as o,
-  Ee as p,
-  ht as q,
-  ut as r
+  nt as k,
+  lt as l,
+  ct as m,
+  dt as n,
+  ht as o,
+  He as p,
+  ut as q,
+  ft as r
 };

package/dist/types/components/organisms/lists/scrollable-data-table.d.ts

@@ -12,6 +12,11 @@
  * @property {string} [props.key] - The key to use to identify the items.
  * @property {array} [props.rows] - The initial rows.
  * @property {function} [props.rowItem] - The row item.
+ * @property {array} [props.headers] - The table headers.
+ * @property {object} [props.customHeader] - The custom header.
+ * @property {function} [props.selectRow] - The function to select a row.
+ * @property {string} [props.border] - The border to add to the table.
+ * @property {object} [props.data] - The table data.
  * @property {string} [props.containerClass] - The class to add to the scroll container.
  * @returns {object}
  */

package/dist/types/components/organisms/lists/scrollable-table.d.ts

@@ -0,0 +1,31 @@
+declare const ScrollableTable_base: typeof import("@base-framework/base").Component;
+/**
+ * ScrollableDataTable Component
+ *
+ * This will create a scrollable data table.
+ *
+ * @param {object} props
+ * @property {HTMLElement} [props.scrollContainer] - The container element for scroll events. Defaults to window.
+ * @property {function} [props.loadMoreItems] - A function to fetch/generate additional items.
+ * @property {number} [props.offset] - The initial offset. Defaults to 0.
+ * @property {number} [props.limit] - Number of items to load per batch. Defaults to 20.
+ * @property {string} [props.class] - The class to add to the list.
+ * @property {string} [props.key] - The key to use to identify the items.
+ * @property {array} [props.rows] - The initial rows.
+ * @property {function} [props.rowItem] - The row item.
+ * @property {string} [props.containerClass] - The class to add to the scroll container.
+ * @returns {object}
+ */
+export class ScrollableTable extends ScrollableTable_base {
+    /**
+     * Renders the DataTable component.
+     *
+     * @returns {object}
+     */
+    render(): object;
+}
+export default ScrollableTable;
+import { CheckboxCol } from './table-header.js';
+import { HeaderCol } from './table-header.js';
+import { TableHeader } from './table-header.js';
+export { CheckboxCol, HeaderCol, TableHeader };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@base-framework/ui",
-	"version": "1.0.74",
+	"version": "1.0.76",
 	"description": "This is a UI package that adds components and atoms that use Tailwind CSS and a theme based on Shadcn.",
 	"main": "./dist/index.es.js",
 	"scripts": {