@base-framework/ui 0.0.16 → 0.0.19

package/dist/{tab-BjiQGl_0.js → signature-CzIRh6RC.js}

@@ -1,22 +1,22 @@
-import { Button as w, Div as o, On as j, Span as y, Th as O, UseParent as z, I as Y, Thead as U, Tr as F, Table as E, P as g, Li as v, Time as Q, Nav as D, Ul as p, Section as B } from "@base-framework/atoms";
-import { Atom as d, Component as u, Data as S, DateTime as H, Jot as I, router as b, NavLink as M } from "@base-framework/base";
-import { B as R, I as T } from "./icon-B9QUT2NY.js";
-import { Icons as k } from "./icons.es.js";
-import { TableBody as K, List as _ } from "@base-framework/organisms";
-import { C as G, I as V } from "./inputs-O_WkdbI3.js";
-import { A as q, P as J } from "./calendar-B5TK6tLi.js";
-d((t, e) => ({
+import { Button as v, Div as o, On as U, Span as D, Th as O, UseParent as F, I as Y, Thead as E, Tr as H, Table as Q, P as w, Li as S, Time as X, Nav as L, Ul as x, Section as P } from "@base-framework/atoms";
+import { Atom as u, Component as g, Data as C, DateTime as q, Jot as R, router as y, NavLink as M, base as f, Dom as I } from "@base-framework/base";
+import { B, I as z } from "./icon-B9QUT2NY.js";
+import { Icons as b } from "./icons.es.js";
+import { TableBody as K, List as _, IntervalTimer as G } from "@base-framework/organisms";
+import { C as V, I as J, H as Z } from "./inputs-O_WkdbI3.js";
+import { A as ee, P as te } from "./calendar-B5TK6tLi.js";
+u((t, e) => ({
   class: "flex items-center px-4 py-2",
   ...t,
   children: e
 }));
-d(({ value: t, label: e }) => w({
+u(({ value: t, label: e }) => v({
   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"]],
   click: (s, { state: n }) => n.performance = t
 }, e));
-class Ee extends u {
+class Ke extends g {
   /**
    * This will declare the props for the compiler.
    *
@@ -34,55 +34,55 @@ class Ee extends u {
     return o({ class: this.class || "" }, this.children);
   }
 }
-const X = (t) => {
+const se = (t) => {
   const e = new Date(t, 11, 31), s = new Date(t, 0, 1);
   return e.getDay() === 4 || // December 31 is a Thursday
   s.getDay() === 4;
-}, Z = (t) => {
+}, ne = (t) => {
   const e = new Date(t.valueOf()), s = (e.getDay() + 6) % 7;
   e.setDate(e.getDate() - s + 3);
   const n = e.getFullYear(), a = new Date(n, 0, 4);
   a.setDate(a.getDate() - (a.getDay() + 6) % 7);
   const i = Math.ceil((e - a) / 6048e5) + 1;
-  return i > 52 && !X(n) ? {
+  return i > 52 && !se(n) ? {
     weekNumber: 1,
     year: n + 1
   } : {
     weekNumber: i,
     year: n
   };
-}, ee = (t, e, s) => {
+}, ae = (t, e, s) => {
   if (s === 0) return [];
   const n = new Date(t, e, 0).getDate();
   return Array.from(
     { length: s },
     (a, i) => new Date(t, e - 1, n - s + i + 1)
   );
-}, te = (t, e, s) => Array.from({ length: s }, (n, a) => new Date(t, e + 1, a + 1)), L = (t, e) => {
+}, ie = (t, e, s) => Array.from({ length: s }, (n, a) => new Date(t, e + 1, a + 1)), T = (t, e) => {
   const s = new Date(e, 0, 4), n = (s.getDay() + 6) % 7, a = new Date(s);
   a.setDate(s.getDate() - n);
   const i = new Date(a);
   return i.setDate(a.getDate() + (t - 1) * 7), i;
-}, Qe = (t, e) => {
+}, _e = (t, e) => {
   const s = new Date(t, e, 1).getDay(), n = new Date(t, e + 1, 0).getDate(), a = [];
   let i = [];
-  for (let r = 1 - s; r <= n; r++) {
-    const h = new Date(t, e, r);
-    i.push(r > 0 ? h : null), (i.length === 7 || r === n) && (a.push([...i]), i = []);
+  for (let l = 1 - s; l <= n; l++) {
+    const d = new Date(t, e, l);
+    i.push(l > 0 ? d : null), (i.length === 7 || l === n) && (a.push([...i]), i = []);
   }
   return a;
-}, He = (t, e) => {
+}, Ge = (t, e) => {
   const s = new Date(t, e + 1, 0).getDate(), n = [];
   let a = [];
   for (let i = 1; i <= s; i++)
     a.push(new Date(t, e, i)), a.length === 7 && (n.push(a), a = []);
   return a.length > 0 && n.push(a), n;
-}, se = (t, e, s) => {
+}, oe = (t, e, s) => {
   const n = /* @__PURE__ */ new Date();
   return n.getDate() === t && n.getMonth() === e && n.getFullYear() === s;
-}, ne = ({ day: t, month: e, year: s, weekNumber: n, selectWeek: a }) => {
-  const i = se(t, e, s);
-  return w({
+}, le = ({ day: t, month: e, year: s, weekNumber: n, selectWeek: a }) => {
+  const i = oe(t, e, s);
+  return v({
     text: t || "",
     disabled: !t,
     class: `
@@ -92,19 +92,19 @@ const X = (t) => {
         `,
     click: () => a(n, s)
   });
-}, ae = (t, e) => {
-  const s = new Date(t, e, 1).getDay(), n = new Date(t, e + 1, 0).getDate(), a = ee(t, e, s), i = Array.from({ length: n }, (l, x) => new Date(t, e, x + 1)), r = (a.length + i.length) % 7, h = r === 0 ? 0 : 7 - r, c = te(t, e, h), f = [...a, ...i, ...c], m = [];
-  for (let l = 0; l < f.length; l += 7) {
-    const x = f.slice(l, l + 7), W = x.find((A) => A) || new Date(t, e, 1), { weekNumber: $, year: P } = Z(W);
-    m.push({
+}, re = (t, e) => {
+  const s = new Date(t, e, 1).getDay(), n = new Date(t, e + 1, 0).getDate(), a = ae(t, e, s), i = Array.from({ length: n }, (r, m) => new Date(t, e, m + 1)), l = (a.length + i.length) % 7, d = l === 0 ? 0 : 7 - l, c = ie(t, e, d), h = [...a, ...i, ...c], p = [];
+  for (let r = 0; r < h.length; r += 7) {
+    const m = h.slice(r, r + 7), k = m.find((j) => j) || new Date(t, e, 1), { weekNumber: $, year: A } = ne(k);
+    p.push({
       weekNumber: $,
-      year: P,
-      days: x
+      year: A,
+      days: m
     });
   }
-  return m;
-}, ie = ({ selectWeek: t }) => j("month", (e, s, { data: n }) => {
-  const { year: a, month: i, currentDate: r } = n, h = ae(a, i);
+  return p;
+}, ce = ({ selectWeek: t }) => U("month", (e, s, { data: n }) => {
+  const { year: a, month: i, currentDate: l } = n, d = re(a, i);
   return o(
     { class: "grid grid-cols-8 gap-1 text-sm px-4 py-2" },
     [
@@ -115,12 +115,12 @@ const X = (t) => {
           class: "grid grid-cols-7 col-span-7 text-center text-muted-foreground items-center"
         },
         ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(
-          (c) => y({ class: "px-1 py-1", text: c })
+          (c) => D({ class: "px-1 py-1", text: c })
         )
       ),
       // Render each "week" row
-      ...h.map(
-        ({ weekNumber: c, days: f, year: m }) => o({
+      ...d.map(
+        ({ weekNumber: c, days: h, year: p }) => o({
           class: "grid grid-cols-8 col-span-8 items-center ring-primary rounded-sm px-1",
           onSet: ["currentWeek", {
             ring: c
@@ -129,7 +129,7 @@ const X = (t) => {
           // Left column: ISO week number
           o({
             class: "font-medium text-center col-span-1 rounded-sm cursor-pointer",
-            click: () => t(c, m),
+            click: () => t(c, p),
             // If you have a 'currentWeek' state, you can highlight it with 'onSet'
             onSet: ["currentWeek", {
               "text-primary-foreground": c,
@@ -140,14 +140,14 @@ const X = (t) => {
           // The 7 cells for each day in the row
           o(
             { class: "grid grid-cols-7 col-span-7 text-center" },
-            f.map(
-              (l) => ne({
-                year: (l == null ? void 0 : l.getFullYear()) || null,
-                month: (l == null ? void 0 : l.getMonth()) || null,
-                day: (l == null ? void 0 : l.getDate()) || null,
-                week: f,
+            h.map(
+              (r) => le({
+                year: (r == null ? void 0 : r.getFullYear()) || null,
+                month: (r == null ? void 0 : r.getMonth()) || null,
+                day: (r == null ? void 0 : r.getDate()) || null,
+                week: h,
                 weekNumber: c,
-                currentDate: r,
+                currentDate: l,
                 selectWeek: t
               })
             )
@@ -156,7 +156,7 @@ const X = (t) => {
       )
     ]
   );
-}), C = ({ label: t, click: e }) => R(
+}), W = ({ label: t, click: e }) => B(
   {
     class: `
             inline-flex items-center justify-center h-7 w-7 bg-transparent p-0
@@ -167,20 +167,20 @@ const X = (t) => {
     click: e,
     "aria-label": `${t} month`,
     variant: "icon",
-    icon: t === "Previous" ? k.chevron.single.left : k.chevron.single.right
+    icon: t === "Previous" ? b.chevron.single.left : b.chevron.single.right
   }
-), oe = ({ next: t, previous: e }) => o({ class: "flex flex-auto min-h-12 text-sm font-medium relative justify-center items-center" }, [
-  y("[[monthName]] [[year]]"),
-  C({
+), de = ({ next: t, previous: e }) => o({ class: "flex flex-auto min-h-12 text-sm font-medium relative justify-center items-center" }, [
+  D("[[monthName]] [[year]]"),
+  W({
     label: "Previous",
     click: e
   }),
-  C({
+  W({
     label: "Next",
     click: t
   })
 ]);
-class Ke extends u {
+class Ve extends g {
   /**
   * This will declare the props for the compiler.
   *
@@ -195,8 +195,8 @@ class Ke extends u {
    * @returns {Data}
    */
   setData() {
-    const e = /* @__PURE__ */ new Date(), s = this.selectedWeek || this.calculateCurrentWeek(e), n = L(s, e.getFullYear());
-    return new S({
+    const e = /* @__PURE__ */ new Date(), s = this.selectedWeek || this.calculateCurrentWeek(e), n = T(s, e.getFullYear());
+    return new C({
       monthName: this.getMonthName(n.getMonth()),
       year: n.getFullYear(),
       month: n.getMonth(),
@@ -233,7 +233,7 @@ class Ke extends u {
    * @returns {string}
    */
   getMonthName(e) {
-    return H.monthNames[e];
+    return q.monthNames[e];
   }
   /**
    * Updates the calendar to show the previous month.
@@ -278,7 +278,7 @@ class Ke extends u {
    */
   selectWeek(e, s) {
     this.data.currentWeek = e;
-    const n = L(e, s);
+    const n = T(e, s);
     this.setDate(n.getMonth(), n.getFullYear(), n.getDate()), typeof this.selectedCallBack == "function" && this.selectedCallBack(e);
   }
   /**
@@ -288,33 +288,33 @@ class Ke extends u {
    */
   render() {
     return o({ class: "week-calendar-container border rounded-md bg-background p-3" }, [
-      oe({
+      de({
         next: () => this.goToNextMonth(),
         previous: () => this.goToPreviousMonth()
       }),
-      ie({
+      ce({
         selectWeek: (e, s) => this.selectWeek(e, s)
       })
     ]);
   }
 }
-const le = (t) => O({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class || ""}` }, [
-  z((e) => new G({ class: "mr-2", onChange: () => e.toggleAllSelectedRows() }))
-]), re = ({ align: t, sortable: e, key: s, label: n, sort: a, class: i }) => {
-  const r = t || "justify-start";
+const he = (t) => O({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class || ""}` }, [
+  F((e) => new V({ class: "mr-2", onChange: () => e.toggleAllSelectedRows() }))
+]), ue = ({ align: t, sortable: e, key: s, label: n, sort: a, class: i }) => {
+  const l = t || "justify-start";
   return O({
     class: `cursor-pointer py-3 px-4 text-base ${i || ""}`,
     click: e && (() => a(s))
   }, [
-    o({ class: `flex flex-auto w-full items-center ${r}` }, [
-      y(n),
-      e && Y({ class: "ml-2", html: k.arrows.upDown })
+    o({ class: `flex flex-auto w-full items-center ${l}` }, [
+      D(n),
+      e && Y({ class: "ml-2", html: b.arrows.upDown })
     ])
   ]);
-}, ce = (t) => U([
-  F({
+}, ge = (t) => E([
+  H({
     class: "text-muted-foreground border-b",
-    map: [t.headers, (e) => e.label === "checkbox" ? le({ toggle: t.toggle }) : re({
+    map: [t.headers, (e) => e.label === "checkbox" ? he({ toggle: t.toggle }) : ue({
       align: e.align,
       sortable: e.sortable,
       key: e.key,
@@ -322,13 +322,13 @@ const le = (t) => O({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class
       sort: t.sort
     })]
   })
-]), de = ({ key: t, rows: e, selectRow: s, rowItem: n }) => new K({
+]), fe = ({ key: t, rows: e, selectRow: s, rowItem: n }) => new K({
   cache: "table",
   key: t,
   items: e,
   rowItem: (a) => n(a, s),
   class: "divide-y divide-border"
-}), _e = I(
+}), Je = R(
   {
     /**
      * Initializes component data.
@@ -336,7 +336,7 @@ const le = (t) => O({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class
      * @returns {Data}
      */
     setData() {
-      return new S({
+      return new C({
         selectedRows: [],
         selected: !1
       });
@@ -398,12 +398,12 @@ const le = (t) => O({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class
       const t = this.rows, e = this.border !== !1 ? "border" : "";
       return o({ class: "w-full" }, [
         o({ class: `w-full rounded-md ${e} overflow-x-auto` }, [
-          E({ class: "w-full" }, [
+          Q({ class: "w-full" }, [
             // @ts-ignore
-            this.headers && ce({ headers: this.headers, sort: (s) => this.sortRows(s) }),
+            this.headers && ge({ headers: this.headers, sort: (s) => this.sortRows(s) }),
             // @ts-ignore
             this.customHeader ?? null,
-            de({
+            fe({
               // @ts-ignore
               key: this.key,
               rows: t,
@@ -476,45 +476,45 @@ const le = (t) => O({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class
       this.data.selectedRows = [];
     }
   }
-), ue = d(({ name: t, email: e }) => o({ class: "min-w-0 flex-auto" }, [
-  g({ class: "text-base font-semibold leading-6 m-0" }, t),
-  g({ class: "truncate text-sm leading-5 text-muted-foreground m-0" }, e)
-])), he = () => o({ class: "flex items-center gap-x-1.5" }, [
+), pe = u(({ name: t, email: e }) => o({ class: "min-w-0 flex-auto" }, [
+  w({ class: "text-base font-semibold leading-6 m-0" }, t),
+  w({ class: "truncate text-sm leading-5 text-muted-foreground m-0" }, e)
+])), me = () => 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" })
   ]),
-  g({ class: "text-xs leading-5 text-gray-500" }, "Online")
-]), fe = (t) => g({ class: "text-xs leading-5 text-muted-foreground" }, [
-  y("Last seen "),
-  Q({ datetime: t }, "3h ago")
-]), ge = (t, e) => t === "online" ? he() : fe(e), pe = d(({ role: t, lastSeen: e, status: s }) => o({ class: "hidden shrink-0 sm:flex sm:flex-col sm:items-end" }, [
-  g({ class: "text-sm leading-6 m-0" }, t),
-  ge(s, e)
-])), me = (t) => t.split(" ").map((s) => s[0]).join(""), xe = d((t) => v({ class: "fadeIn flex justify-between gap-x-6 py-4 px-4 rounded-md hover:bg-muted/50" }, [
+  w({ class: "text-xs leading-5 text-gray-500" }, "Online")
+]), we = (t) => w({ class: "text-xs leading-5 text-muted-foreground" }, [
+  D("Last seen "),
+  X({ datetime: t }, "3h ago")
+]), be = (t, e) => t === "online" ? me() : we(e), xe = u(({ role: t, lastSeen: e, status: s }) => o({ class: "hidden shrink-0 sm:flex sm:flex-col sm:items-end" }, [
+  w({ class: "text-sm leading-6 m-0" }, t),
+  be(s, e)
+])), ke = (t) => t.split(" ").map((s) => s[0]).join(""), ye = u((t) => S({ 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" }, [
-    q({ src: t.image, alt: t.name, fallbackText: me(t.name) }),
-    ue({ name: t.name, email: t.email })
+    ee({ src: t.image, alt: t.name, fallbackText: ke(t.name) }),
+    pe({ name: t.name, email: t.email })
   ]),
-  pe({
+  xe({
     role: t.role,
     lastSeen: t.lastSeen,
     status: t.status
   })
-])), Ge = d((t) => new _({
+])), Ze = u((t) => new _({
   cache: "list",
   key: "name",
   items: t.users,
   role: "list",
   class: "divide-y divide-border",
-  rowItem: xe
-})), be = (t, e) => e.includes(t), ke = (t, e, s) => t.exact ? s === e : be(e, s), we = ({ text: t, href: e, exact: s, hidden: n }) => new M({
+  rowItem: ye
+})), ve = (t, e) => e.includes(t), De = (t, e, s) => t.exact ? s === e : ve(e, s), Se = ({ text: t, href: e, exact: s, hidden: n }) => new M({
   text: t,
   href: e,
   exact: s,
   dataSet: ["selected", ["state", !0, "active"]],
   class: `${n ? "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 Ve extends u {
+class et extends g {
   /**
   * This will declare the props for the compiler.
   *
@@ -535,14 +535,14 @@ class Ve extends u {
    * @returns {object}
    */
   render() {
-    return D(
+    return L(
       { class: `flex items-center justify-center p-2 text-muted-foreground rounded-md ${this.class || ""}` },
       [
-        p({
+        x({
           class: "flex space-x-4",
           map: [this.options, (e) => this.addLink(e)],
           watch: {
-            value: ["[[path]]", b.data],
+            value: ["[[path]]", y.data],
             callBack: this.updateLinks.bind(this)
           }
         })
@@ -555,7 +555,7 @@ class Ve extends u {
    * @returns {void}
    */
   afterSetup() {
-    const e = b.data.path;
+    const e = y.data.path;
     this.updateLinks(e);
   }
   /**
@@ -570,7 +570,7 @@ class Ve extends u {
     for (const n of this.links) {
       if (!n.rendered)
         continue;
-      ke(n, n.getLinkPath(), e) ? (this.updateLink(n, !0), s = !0) : this.updateLink(n, !1);
+      De(n, n.getLinkPath(), e) ? (this.updateLink(n, !0), s = !0) : this.updateLink(n, !1);
     }
     !s && this.links[0] && this.updateLink(this.links[0], !0);
   }
@@ -600,7 +600,7 @@ class Ve extends u {
    * @returns {object}
    */
   addLink({ label: e, href: s, exact: n, hidden: a }) {
-    const i = we({ text: e, href: s, exact: n, hidden: a });
+    const i = Se({ text: e, href: s, exact: n, hidden: a });
     return this.links.push(i), i;
   }
   /**
@@ -612,10 +612,10 @@ class Ve extends u {
     this.links = [];
   }
 }
-const qe = d((t) => {
+const tt = u((t) => {
   const e = t.margin || "m-4 ml-0";
   return o({ class: `flex-none ${e}` }, [
-    R({
+    B({
       variant: "icon",
       class: "back-button",
       click: () => {
@@ -626,11 +626,11 @@ const qe = d((t) => {
         t.backUrl && app.navigate(t.backUrl);
       }
     }, [
-      T(k.arrows.left)
+      z(b.arrows.left)
     ])
   ]);
 });
-class N extends u {
+class N extends g {
   /**
   * This will declare the props for the compiler.
   *
@@ -717,7 +717,7 @@ class N extends u {
     return this.children;
   }
 }
-class Je extends N {
+class st extends N {
   /**
    * This will stop presistence.
    *
@@ -820,7 +820,7 @@ class Je extends N {
     document.documentElement.style.overflowY = "auto";
   }
 }
-class Xe extends N {
+class nt extends N {
   /**
    * This will get the overlay type.
    *
@@ -839,7 +839,7 @@ class Xe extends N {
     this.container = e, this.initialize();
   }
 }
-const ye = d(({ index: t, click: e, state: s }, n) => v({
+const Le = u(({ index: t, click: e, state: s }, n) => S({
   class: "p-2 cursor-pointer hover:bg-muted/50",
   onState: [
     [s, "selectedIndex", {
@@ -848,11 +848,11 @@ const ye = d(({ index: t, click: e, state: s }, n) => v({
     }]
   ],
   pointerdown: () => e(t)
-}, n)), ve = d(({ selectOption: t, state: e }) => p({
+}, n)), Ce = u(({ selectOption: t, state: e }) => x({
   class: "border rounded-md list-none m-0 p-0 max-h-[400px] overflow-y-auto",
-  for: ["filteredOptions", (s, n) => ye({ index: n, click: t, state: e }, s.label)]
-})), De = 100, Se = d((t) => o({ class: "relative flex items-center" }, [
-  V({
+  for: ["filteredOptions", (s, n) => Le({ index: n, click: t, state: e }, s.label)]
+})), Be = 100, Ie = u((t) => o({ class: "relative flex items-center" }, [
+  J({
     cache: "input",
     placeholder: t.placeholder ?? "Search...",
     bind: [t.state, "searchQuery"],
@@ -860,26 +860,26 @@ const ye = d(({ index: t, click: e, state: s }, n) => v({
       s.state.open = !0, typeof t.filterOptions == "function" && t.filterOptions(), s.dropdown.updatePosition();
     },
     pointerup: (e, s) => s.toggleDropdown(),
-    blur: (e, { state: s }) => setTimeout(() => s.open = !1, De),
+    blur: (e, { state: s }) => setTimeout(() => s.open = !1, Be),
     keydown: (e) => typeof t.handleKeyDown == "function" && t.handleKeyDown(e)
   }),
   t.icon && o({ class: "absolute right-0 mr-2" }, [
-    T(t.icon)
+    z(t.icon)
   ])
-])), Le = (t) => o({
+])), Te = (t) => o({
   class: "relative flex fle-auto flex-col",
   onState: ["open", (e, s, n) => {
     if (e)
-      return new J({
+      return new te({
         cache: "dropdown",
         parent: n,
         button: n.input,
         size: "xl"
       }, [
-        ve(t)
+        Ce(t)
       ]);
   }]
-}), Ze = I(
+}), at = R(
   {
     /**
      * This will set up the data object.
@@ -888,7 +888,7 @@ const ye = d(({ index: t, click: e, state: s }, n) => v({
      */
     setData() {
       const t = this.options || [];
-      return new S({
+      return new C({
         options: t,
         filteredOptions: t
       });
@@ -976,7 +976,7 @@ const ye = d(({ index: t, click: e, state: s }, n) => v({
      */
     render() {
       return o({ class: "relative w-full max-w-md" }, [
-        Se({
+        Ie({
           // @ts-ignore
           state: this.state,
           // @ts-ignore
@@ -988,7 +988,7 @@ const ye = d(({ index: t, click: e, state: s }, n) => v({
           // @ts-ignore
           handleKeyDown: this.handleKeyDown.bind(this)
         }),
-        Le({
+        Te({
           // @ts-ignore
           state: this.state,
           // @ts-ignore
@@ -999,22 +999,22 @@ const ye = d(({ index: t, click: e, state: s }, n) => v({
       ]);
     }
   }
-), Ce = (t) => v(
+), We = (t) => S(
   {
     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"]]
   },
   [
-    w({
+    v({
       class: "flex flex-auto justify-center items-center px-3 py-1.5",
       onSet: ["selected", { selected: t.value }],
       click: (e) => t.callBack(t.value)
     }, t.label)
   ]
-), Oe = (t, e) => (t.callBack = e, Ce(t)), Be = (t) => D({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
-  p({ class: "flex flex-auto flex-row", map: [t.options, (e) => Oe(e, t.callBack)] })
+), Oe = (t, e) => (t.callBack = e, We(t)), Pe = (t) => L({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
+  x({ class: "flex flex-auto flex-row", map: [t.options, (e) => Oe(e, t.callBack)] })
 ]);
-class et extends u {
+class it extends g {
   /**
   * This will declare the props for the compiler.
   *
@@ -1031,12 +1031,12 @@ class et extends u {
   render() {
     const e = this.select.bind(this);
     return o({ class: "" }, [
-      Be({
+      Pe({
         class: this.class,
         options: this.options,
         callBack: e
       }),
-      B({
+      P({
         class: "tab-content",
         onState: ["selected", this.updateContent.bind(this)]
       })
@@ -1102,23 +1102,23 @@ class et extends u {
     };
   }
 }
-const Ie = (t) => v(
+const Re = (t) => S(
   {
     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"]]
   },
   [
-    w({
+    v({
       class: "flex flex-auto justify-center items-center px-3 py-1.5 disabled:opacity-50 disabled:cursor-not-allowed",
       onSet: ["selected", { selected: t.value }],
       click: (e) => t.callBack(t.value),
       disabled: t.disabled
     }, t.label)
   ]
-), Me = (t, e) => (t.callBack = e, Ie(t)), Re = (t) => D({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
-  p({ class: "flex flex-auto flex-row", map: [t.options, (e) => Me(e, t.callBack)] })
+), Me = (t, e) => (t.callBack = e, Re(t)), ze = (t) => L({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
+  x({ class: "flex flex-auto flex-row", map: [t.options, (e) => Me(e, t.callBack)] })
 ]);
-class tt extends u {
+class ot extends g {
   /**
   * This will declare the props for the compiler.
   *
@@ -1134,7 +1134,7 @@ class tt extends u {
    */
   render() {
     const e = this.select.bind(this);
-    return Re({
+    return ze({
       class: this.class,
       options: this.options,
       callBack: e
@@ -1161,17 +1161,17 @@ class tt extends u {
     };
   }
 }
-const Te = (t, e) => new RegExp(`${t}($|/|\\.).*`).test(e), Ne = (t, e) => {
+const Ne = (t, e) => new RegExp(`${t}($|/|\\.).*`).test(e), $e = (t, e) => {
   const s = t.getLinkPath();
-  return t.exact ? e === s : Te(s, e);
-}, We = ({ text: t, href: e, exact: s }) => new M({
+  return t.exact ? e === s : Ne(s, e);
+}, Ae = ({ text: t, href: e, exact: s }) => new M({
   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 $e extends u {
+class je extends g {
   /**
    * This will declare the props for the compiler.
    *
@@ -1192,12 +1192,12 @@ class $e extends u {
    * @returns {object}
    */
   render() {
-    return D({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${this.class}` }, [
-      p({
+    return L({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${this.class}` }, [
+      x({
         class: "flex flex-auto flex-row",
         map: [this.options, (e) => this.addLink(e)],
         watch: {
-          value: ["[[path]]", b.data],
+          value: ["[[path]]", y.data],
           callBack: this.updateLinks.bind(this)
         }
       })
@@ -1209,7 +1209,7 @@ class $e extends u {
    * @returns {void}
    */
   afterSetup() {
-    const e = b.data.path;
+    const e = y.data.path;
     this.updateLinks(e);
   }
   /**
@@ -1222,7 +1222,7 @@ class $e extends u {
     let s = !1, n = this.links[0];
     this.deactivateAllLinks();
     for (const a of this.links)
-      if (a.rendered !== !1 && (s = Ne(a, e), s === !0)) {
+      if (a.rendered !== !1 && (s = $e(a, e), s === !0)) {
         this.updateLink(a, !0);
         break;
       }
@@ -1254,7 +1254,7 @@ class $e extends u {
    * @returns {object}
    */
   addLink({ label: e, href: s, exact: n }) {
-    const a = We({ text: e, href: s, exact: n });
+    const a = Ae({ text: e, href: s, exact: n });
     return this.links.push(a), a;
   }
   /**
@@ -1266,7 +1266,7 @@ class $e extends u {
     this.links = [];
   }
 }
-class st extends u {
+class lt extends g {
   /**
    * This will declare the props for the compiler.
    *
@@ -1282,11 +1282,11 @@ class st extends u {
    */
   render() {
     return o({ class: "tab-panel" }, [
-      new $e({
+      new je({
         class: this.class,
         options: this.options
       }),
-      B({
+      P({
         class: "tab-content",
         switch: this.addGroup()
       })
@@ -1312,33 +1312,347 @@ class st extends u {
     return s;
   }
 }
+class Ue extends g {
+  /**
+   * Runs before rendering, sets up defaults, a timer for drawing,
+   * and basic canvas properties.
+   *
+   * @returns {void}
+   */
+  onCreated() {
+    this.lineWidth = this.lineWidth || 3, this.lineColor = this.lineColor || "#000000", this.canvas = null, this.ctx = null, this.status = "stopped";
+    const e = 1e3 / 60;
+    this.timer = new G(e, f.bind(this, this.draw)), this.width = 0, this.height = 0, this.signed = !1, this.mouse = { x: 0, y: 0, status: "up" }, this.margin = this.margin || { x: 40, y: 60 }, this.targetSize = this.targetSize || { width: 740, height: 345 }, this.baseLineWidth = this.baseLineWidth || 2, this.baseStrokeColor = this.baseStrokeColor || "#000000";
+  }
+  /**
+   * Renders a <canvas> element.
+   *
+   * @returns {object} Layout definition for the canvas.
+   */
+  render() {
+    return {
+      tag: "canvas"
+    };
+  }
+  /**
+   * Called before the component is destroyed. Stops the timer
+   * to prevent memory leaks or ongoing animation.
+   *
+   * @returns {void}
+   */
+  beforeDestroy() {
+    this.stopTimer();
+  }
+  /**
+   * Called after component setup. Initializes canvas context,
+   * schedules a resize, and draws the initial content.
+   *
+   * @returns {void}
+   */
+  afterSetup() {
+    this.canvas = this.panel, this.ctx = this.canvas.getContext("2d"), window.setTimeout(() => {
+      this.resize(), this.draw();
+    }, 1);
+  }
+  /**
+   * Defines the DOM events to set up for this canvas component.
+   *
+   * @returns {Array} An array of [eventName, element, callback] definitions.
+   */
+  setupEvents() {
+    const e = this.panel, s = f.bind(this, this.pointerPosition), n = f.bind(this, this.pointerUp), a = f.bind(this, this.pointerDown), i = f.bind(this, this.resize);
+    return [
+      ["pointermove", e, s],
+      ["pointerup", e, n],
+      ["pointerdown", e, a],
+      ["pointerout", e, n],
+      ["resize", window, i]
+    ];
+  }
+  /**
+   * Calculates and saves the current pointer position in canvas coordinates.
+   *
+   * @param {Event} e The event object (mouse or touch).
+   * @returns {void}
+   */
+  getEventPosition(e) {
+    let s, n;
+    const a = this.canvas, i = a.width / parseInt(a.style.width), l = a.getBoundingClientRect();
+    if (e.touches && e.touches.length) {
+      const h = e.touches[0];
+      s = h.clientX, n = h.clientY;
+    } else
+      s = e.x || e.clientX, n = e.y || e.clientY;
+    const d = parseInt((s - l.left) * i), c = parseInt((n - l.top) * i);
+    this.mouse.x = d, this.mouse.y = c;
+  }
+  /**
+   * Called when the pointer goes down on the canvas.
+   * Begins a new path, sets the mouse status, and starts the timer.
+   *
+   * @param {Event} e The event object.
+   * @returns {void}
+   */
+  pointerDown(e) {
+    e.preventDefault(), this.getEventPosition(e);
+    const { ctx: s, mouse: n } = this;
+    s.beginPath(), s.moveTo(n.x, n.y), n.status = "down", this.startTimer();
+  }
+  /**
+   * Called when the pointer goes up or leaves the canvas area.
+   * Closes the path and stops the drawing timer.
+   *
+   * @param {Event} e The event object.
+   * @returns {void}
+   */
+  pointerUp(e) {
+    e.preventDefault(), this.ctx.closePath(), this.mouse.status = "up", this.stopTimer();
+  }
+  /**
+   * Tracks pointer movement, updates position in real time.
+   *
+   * @param {Event} e The event object.
+   * @returns {void}
+   */
+  pointerPosition(e) {
+    this.getEventPosition(e), this.mouse.status === "down" && e.preventDefault();
+  }
+  /**
+   * Resizes the canvas, preserves existing drawing by converting
+   * it to a data URL, then re-drawing.
+   *
+   * @returns {void}
+   */
+  resize() {
+    const { canvas: e, ctx: s } = this, n = e.toDataURL();
+    if (this.scale(), this.setupBackground(s), n !== "data:,") {
+      const a = new window.Image();
+      f.on("load", a, function i() {
+        s.drawImage(a, 0, 0), f.off("load", a, i);
+      }), a.src = n;
+    }
+    this.draw();
+  }
+  /**
+   * Returns a JPEG data URL of the current canvas content.
+   *
+   * @returns {string} The signature image as a data URL.
+   */
+  getImage() {
+    return this.canvas.toDataURL("image/jpeg", 0.7);
+  }
+  /**
+   * (Deprecated approach) Resize the canvas to the container size
+   * without scaling logic.
+   *
+   * @returns {void}
+   */
+  noScaleResize() {
+    const e = I.getSize(container);
+    this.width = canvas.width = e.width, this.height = canvas.height = e.height;
+  }
+  /**
+   * Scales the canvas to fit within its container, preserving aspect ratio
+   * relative to this.targetSize.
+   *
+   * @returns {void}
+   */
+  scale() {
+    const e = this.canvas, s = this.container, n = I.getSize(s), a = this.targetSize, i = a.width, l = a.height;
+    let d = i + "px", c = l + "px";
+    if (this.width = e.width = i, this.height = e.height = l, n.width !== 0 && n.height !== 0) {
+      const h = n.width, p = n.height, r = h / i, m = p / l, k = Math.min(r, m);
+      d = i * k + "px", c = l * k + "px";
+    }
+    e.style.width = d, e.style.height = c;
+  }
+  /**
+   * Main drawing loop. If the mouse is down, adds a line
+   * from the last point to the current pointer position.
+   *
+   * @returns {void}
+   */
+  draw() {
+    this.mouse.status === "down" && this.addLine(this.ctx, this.mouse.x, this.mouse.y, this.lineColor);
+  }
+  /**
+   * Draws the baseline at the bottom of the canvas.
+   *
+   * @param {CanvasRenderingContext2D} ctx The canvas 2D context.
+   * @returns {void}
+   */
+  drawBottomLine(e) {
+    const s = this.canvas;
+    e.globalAlpha = 1, e.shadowBlur = 0;
+    const n = this.margin.x, a = this.height - this.margin.y;
+    e.beginPath(), e.moveTo(n, a), e.lineTo(s.width - this.margin.x, a), e.lineWidth = this.baseLineWidth, e.strokeStyle = this.baseStrokeColor, e.stroke(), e.closePath();
+  }
+  /**
+   * Adds a line to the current path, updating the 'signed' status.
+   *
+   * @param {CanvasRenderingContext2D} ctx The canvas context.
+   * @param {number} px The x-coordinate.
+   * @param {number} py The y-coordinate.
+   * @param {string} color The stroke color.
+   * @returns {void}
+   */
+  addLine(e, s, n, a) {
+    this.signed || (this.signed = !0);
+    const i = Math.round(s), l = Math.round(n);
+    e.lineWidth = this.lineWidth, e.strokeStyle = a, e.lineTo(i, l), e.stroke();
+  }
+  /**
+   * Clears the canvas, sets signed to false, and re-initializes
+   * the background for a fresh signature.
+   *
+   * @returns {void}
+   */
+  reset() {
+    this.signed = !1;
+    const { ctx: e } = this;
+    e.clearRect(0, 0, this.width, this.height), this.setupBackground(e);
+  }
+  /**
+   * Fills the canvas background with white and draws the baseline.
+   *
+   * @param {CanvasRenderingContext2D} ctx The canvas context.
+   * @returns {void}
+   */
+  setupBackground(e) {
+    e.fillStyle = "#FFFFFF", e.fillRect(0, 0, this.width, this.height), this.drawBottomLine(e);
+  }
+  /**
+   * Starts the drawing timer so new lines can be added as pointer moves.
+   *
+   * @returns {void}
+   */
+  startTimer() {
+    this.stopTimer(), this.draw(), this.timer.start(), this.status = "started";
+  }
+  /**
+   * Stops the drawing timer.
+   *
+   * @returns {void}
+   */
+  stopTimer() {
+    this.timer.stop(), this.status = "stopped";
+  }
+}
+class rt extends g {
+  /**
+   * Sets up default properties for the signature panel.
+   *
+   * @returns {void}
+   */
+  setupProps() {
+    this.data = null, this.lineColor = null, this.lineWidth = null, this.baseLineWidth = null, this.baseStrokeColor = null, this.margin = null, this.targetSize = null, this.callBackData = null, this.pointerUp = null, this.path = null, this.canvasLayer = null;
+  }
+  /**
+   * This will run once the component is created, before rendering.
+   * Sets a default line color if not provided.
+   *
+   * @returns {void}
+   */
+  onCreated() {
+    this.lineColor = this.lineColor || "#00aeef";
+  }
+  /**
+   * Renders the main layout for the signature panel,
+   * including a hidden input and a reset button.
+   *
+   * @returns {object} The layout object for the component.
+   */
+  render() {
+    return o({ class: "signature-panel" }, [
+      Z({
+        cache: "hiddenInput",
+        required: !0,
+        bind: this.path + ".data"
+      }),
+      o({ class: "signature-button-panel" }, [
+        B({
+          variant: "icon",
+          icon: b.circleX,
+          click: f.bind(this, this.reset)
+        })
+      ]),
+      new Ue({
+        cache: "canvasLayer",
+        margin: this.margin,
+        targetSize: this.targetSize,
+        lineColor: this.lineColor,
+        lineWidth: this.lineWidth,
+        baseLineWidth: this.baseLineWidth,
+        baseStrokeColor: this.baseStrokeColor,
+        pointerUpCallBack: this.pointerUp,
+        callBackData: this.callBackData
+      })
+    ]);
+  }
+  /**
+   * Called after component setup. Resizes the signature canvas once
+   * everything is ready.
+   *
+   * @returns {void}
+   */
+  afterSetup() {
+    this.canvasLayer.resize();
+  }
+  /**
+   * Gets the signature image from the canvas layer, as a data URL.
+   *
+   * @returns {string} The signature image data URL.
+   */
+  getImage() {
+    return this.canvasLayer.getImage();
+  }
+  /**
+   * Checks if the user has drawn anything on the signature canvas.
+   *
+   * @returns {boolean} True if the canvas has been signed, otherwise false.
+   */
+  isSigned() {
+    return this.canvasLayer ? this.canvasLayer.signed : !1;
+  }
+  /**
+   * Resets the signature canvas to a blank state.
+   *
+   * @param {Event} [e] The event object (if called by a click event).
+   * @returns {void}
+   */
+  reset(e) {
+    if (this.canvasLayer)
+      return this.canvasLayer.reset();
+  }
+}
 export {
-  qe as B,
-  le as C,
-  de as D,
-  re as H,
-  Xe as I,
-  Ve as N,
+  tt as B,
+  he as C,
+  fe as D,
+  ue as H,
+  nt as I,
+  et as N,
   N as O,
-  Ee as P,
-  Ze as S,
-  ce as T,
-  xe as U,
-  Ke as W,
-  te as a,
-  L as b,
-  Z as c,
-  Qe as d,
-  He as e,
-  ne as f,
-  ee as g,
-  ie as h,
-  oe as i,
-  _e as j,
-  Ge as k,
-  Je as l,
-  et as m,
-  tt as n,
-  $e as o,
-  st as p
+  Ke as P,
+  at as S,
+  ge as T,
+  ye as U,
+  Ve as W,
+  ie as a,
+  T as b,
+  ne as c,
+  _e as d,
+  Ge as e,
+  le as f,
+  ae as g,
+  ce as h,
+  de as i,
+  Je as j,
+  Ze as k,
+  st as l,
+  it as m,
+  ot as n,
+  je as o,
+  lt as p,
+  rt as q
 };