@base-framework/ui 1.0.66 → 1.0.68

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-BCsAYjDW.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-BeiIudPS.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-BCsAYjDW.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-BeiIudPS.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-BCsAYjDW.js → signature-panel-BeiIudPS.js}

@@ -1,16 +1,16 @@
 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 h, 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 { 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 I, Dom as B } from "@base-framework/base";
 import { B as C, 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";
 import { A as ne, P as ie } from "./calendar-BDqm833e.js";
-h((t, e) => ({
+d((t, e) => ({
   class: "flex items-center px-4 py-2",
   ...t,
   children: e
 }));
-h(({ value: t, label: e }) => y({
+d(({ value: t, label: e }) => y({
   class: "inline-flex flex-auto items-center justify-center whitespace-nowrap rounded-md px-8 py-1 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-background data-[state=active]:text-foreground data-[state=active]:shadow",
   onState: ["performance", { active: t }],
   dataSet: ["performance", ["state", t, "active"]],
@@ -67,8 +67,8 @@ const oe = (t) => {
   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++) {
-    const d = new Date(t, e, l);
-    i.push(l > 0 ? d : null), (i.length === 7 || l === a) && (n.push([...i]), i = []);
+    const h = new Date(t, e, l);
+    i.push(l > 0 ? h : null), (i.length === 7 || l === a) && (n.push([...i]), i = []);
   }
   return n;
 }, et = (t, e) => {
@@ -93,7 +93,7 @@ const oe = (t) => {
     click: () => n(a, s)
   });
 }, ue = (t, e) => {
-  const s = new Date(t, e, 1).getDay(), a = new Date(t, e + 1, 0).getDate(), n = re(t, e, s), i = Array.from({ length: a }, (r, p) => new Date(t, e, p + 1)), l = (n.length + i.length) % 7, d = l === 0 ? 0 : 7 - l, c = ce(t, e, d), f = [...n, ...i, ...c], g = [];
+  const s = new Date(t, e, 1).getDay(), a = new Date(t, e + 1, 0).getDate(), n = re(t, e, s), i = Array.from({ length: a }, (r, p) => new Date(t, e, p + 1)), l = (n.length + i.length) % 7, h = l === 0 ? 0 : 7 - l, c = ce(t, e, h), f = [...n, ...i, ...c], g = [];
   for (let r = 0; r < f.length; r += 7) {
     const p = f.slice(r, r + 7), k = p.find((F) => F) || new Date(t, e, 1), { weekNumber: U, year: Y } = le(k);
     g.push({
@@ -104,7 +104,7 @@ const oe = (t) => {
   }
   return g;
 }, fe = ({ selectWeek: t }) => E("month", (e, s, { data: a }) => {
-  const { year: n, month: i, currentDate: l } = a, d = ue(n, i);
+  const { year: n, month: i, currentDate: l } = a, h = ue(n, i);
   return o(
     { class: "grid grid-cols-8 gap-1 text-sm px-4 py-2" },
     [
@@ -119,7 +119,7 @@ const oe = (t) => {
         )
       ),
       // Render each "week" row
-      ...d.map(
+      ...h.map(
         ({ weekNumber: c, days: f, year: g }) => o({
           class: "grid grid-cols-8 col-span-8 items-center ring-primary rounded-sm px-1",
           onSet: ["currentWeek", {
@@ -324,7 +324,7 @@ const pe = (t, e) => {
     })]
   })
 ]), be = ({ key: t, rows: e, selectRow: s, rowItem: a }) => new _({
-  cache: "table",
+  cache: "list",
   key: t,
   items: e,
   rowItem: (n) => a(n, s),
@@ -348,7 +348,7 @@ const pe = (t, e) => {
      * @returns {boolean}
      */
     toggleAllSelectedRows() {
-      const t = this.table.getRows(), e = this.data.selectedRows.length === t.length, s = e ? [] : t;
+      const t = this.list.getRows(), e = this.data.selectedRows.length === t.length, s = e ? [] : t;
       return this.data.selectedRows = s, this.updateSelected(), this.updateTable(!e), e;
     },
     /**
@@ -376,8 +376,8 @@ const pe = (t, e) => {
      * @returns {void}
      */
     updateTable(t) {
-      const e = this.table.getRows();
-      e.forEach((s) => s.selected = t), this.table.setRows(e);
+      const e = this.list.getRows();
+      e.forEach((s) => s.selected = t), this.list.setRows(e);
     },
     /**
      * Handles row selection.
@@ -425,7 +425,7 @@ const pe = (t, e) => {
      * @returns {void}
      */
     remove(t) {
-      this.table.remove(t);
+      this.list.remove(t);
     },
     /**
      * This will set the items in the list.
@@ -435,7 +435,7 @@ const pe = (t, e) => {
      * @returns {void}
      */
     setRows(t) {
-      this.table.setRows(t);
+      this.list.setRows(t);
     },
     /**
      * This will append items to the list.
@@ -445,7 +445,7 @@ const pe = (t, e) => {
      * @returns {void}
      */
     append(t) {
-      this.table.append(t);
+      this.list.append(t);
     },
     /**
      * This will mingle the new items with the old items.
@@ -456,7 +456,7 @@ const pe = (t, e) => {
      * @returns {void}
      */
     mingle(t, e = !1) {
-      this.table.mingle(t, e);
+      this.list.mingle(t, e);
     },
     /**
      * This will prepend items to the list.
@@ -466,7 +466,7 @@ const pe = (t, e) => {
      * @returns {void}
      */
     prepend(t) {
-      this.table.prepend(t);
+      this.list.prepend(t);
     },
     /**
      * This will remove the selected rows.
@@ -477,37 +477,51 @@ const pe = (t, e) => {
       this.data.selectedRows = [];
     }
   }
-);
-class st 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,
-          J({
-            // @ts-ignore
-            key: this.key,
-            rows: e,
-            // @ts-ignore
-            selectRow: this.selectRow.bind(this),
-            // @ts-ignore
-            rowItem: this.rowItem
-          })
-        ])
-      ])
-    ]);
-  }
-}
-const xe = h(({ name: t, email: e }) => o({ class: "min-w-0 flex-auto" }, [
+), st = d((t) => {
+  new ke(
+    {
+      customHeaders: t.customHeaders,
+      headers: t.headers,
+      class: t.class,
+      key: t.key,
+      rows: t.rows,
+      rowItem: t.rowItem,
+      /**
+       * 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,
+              J({
+                scrollContainer: t.scrollContainer,
+                loadMoreItems: t.loadMoreItems,
+                offset: t.offset,
+                limit: t.limit,
+                containerClass: t.containerClass ?? "",
+                data: t.data,
+                // @ts-ignore
+                key: this.key,
+                rows: 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" }, [
   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" }, [
@@ -518,10 +532,10 @@ const xe = h(({ name: t, email: e }) => o({ class: "min-w-0 flex-auto" }, [
 ]), ve = (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 = h(({ role: t, lastSeen: e, status: s }) => o({ class: "hidden shrink-0 sm:flex sm:flex-col sm:items-end" }, [
+]), 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" }, [
   m({ class: "text-sm leading-6 m-0" }, t),
   De(s, e)
-])), Le = (t) => t.split(" ").map((s) => s[0]).join(""), Ce = h((t) => D({ class: "fadeIn flex justify-between gap-x-6 py-4 px-4 rounded-md hover:bg-muted/50" }, [
+])), 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" }, [
   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 })
@@ -531,14 +545,14 @@ const xe = h(({ name: t, email: e }) => o({ class: "min-w-0 flex-auto" }, [
     lastSeen: t.lastSeen,
     status: t.status
   })
-])), at = h((t) => new Z({
+])), at = 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({
+})), Ie = (t, e) => e.includes(t), Be = (t, e, s) => t.exact ? s === e : Ie(e, s), Te = ({ text: t, href: e, exact: s, hidden: a }) => new z({
   text: t,
   href: e,
   exact: s,
@@ -601,7 +615,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);
+      Be(a, a.getLinkPath(), e) ? (this.updateLink(a, !0), s = !0) : this.updateLink(a, !1);
     }
     !s && this.links[0] && this.updateLink(this.links[0], !0);
   }
@@ -643,7 +657,7 @@ class nt extends u {
     this.links = [];
   }
 }
-const it = h((t) => {
+const it = d((t) => {
   const e = t.margin || "m-4 ml-0";
   return o({ class: `flex-none ${e}` }, [
     C({
@@ -882,7 +896,7 @@ class lt extends A {
     this.container = e, this.initialize();
   }
 }
-const We = h(({ index: t, click: e, state: s }, a) => D({
+const We = d(({ index: t, click: e, state: s }, a) => D({
   class: "p-2 cursor-pointer hover:bg-muted/50",
   onState: [
     [s, "selectedIndex", {
@@ -891,10 +905,10 @@ const We = h(({ index: t, click: e, state: s }, a) => D({
     }]
   ],
   click: () => e(t)
-}, a)), Pe = h(({ selectOption: t, state: e }) => b({
+}, a)), Pe = 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 = h((t) => o({ class: "relative flex items-center" }, [
+})), Re = d((t) => o({ class: "relative flex items-center" }, [
   se({
     cache: "input",
     placeholder: t.placeholder ?? "Search...",
@@ -1425,8 +1439,8 @@ class He extends u {
       s = f.clientX, a = f.clientY;
     } else
       s = e.x || e.clientX, a = e.y || e.clientY;
-    const d = parseInt((s - l.left) * i), c = parseInt((a - l.top) * i);
-    this.mouse.x = d, this.mouse.y = c;
+    const h = parseInt((s - l.left) * i), c = parseInt((a - l.top) * i);
+    this.mouse.x = h, this.mouse.y = c;
   }
   /**
    * Called when the pointer goes down on the canvas.
@@ -1469,8 +1483,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();
@@ -1490,7 +1504,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;
   }
   /**
@@ -1500,13 +1514,13 @@ 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;
-    let d = i + "px", c = l + "px";
+    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);
-      d = i * k + "px", c = l * k + "px";
+      h = i * k + "px", c = l * k + "px";
     }
-    e.style.width = d, e.style.height = c;
+    e.style.width = h, e.style.height = c;
   }
   /**
    * Main drawing loop. If the mouse is down, adds a line

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

@@ -1,20 +1,21 @@
-declare const ScrollableDataTable_base: typeof import("@base-framework/base").Component;
 /**
  * ScrollableDataTable Component
  *
- * Manages data, filtering, pagination, and selection within a table.
+ * 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 ScrollableDataTable extends ScrollableDataTable_base {
-    /**
-     * Renders the DataTable component.
-     *
-     * @returns {object}
-     */
-    render(): object;
-}
+export const ScrollableDataTable: Function;
+export default ScrollableDataTable;
 import { CheckboxCol } from './table-header.js';
 import { HeaderCol } from './table-header.js';
 import { TableHeader } from './table-header.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@base-framework/ui",
-	"version": "1.0.66",
+	"version": "1.0.68",
 	"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": {