@base-framework/ui 0.0.4 → 0.0.6

package/dist/{tab-C_dZb2qH.js → tab-DE7bmr2y.js}

@@ -1,31 +1,32 @@
 var z = Object.defineProperty;
-var Y = (e, s, t) => s in e ? z(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
-var l = (e, s, t) => Y(e, typeof s != "symbol" ? s + "" : s, t);
-import { Button as y, Div as o, On as U, Span as v, Th as B, UseParent as F, I as E, Thead as Q, Tr as H, Table as K, P as p, Li as D, Time as _, Nav as S, Ul as m, Section as I } from "@base-framework/atoms";
-import { Atom as u, Component as h, Data as L, DateTime as G, Jot as M, router as k, NavLink as R } from "@base-framework/base";
+var Y = (e, t, s) => t in e ? z(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
+var b = (e, t, s) => Y(e, typeof t != "symbol" ? t + "" : t, s);
+import { Button as y, Div as o, On as U, Span as v, Th as B, UseParent as F, I as E, Thead as Q, Tr as H, Table as K, P as g, Li as D, Time as _, Nav as S, Ul as p, Section as I } from "@base-framework/atoms";
+import { Atom as d, Component as u, Data as L, DateTime as G, Jot as M, router as k, NavLink as R } from "@base-framework/base";
 import { B as T, I as N } from "./icon-B9QUT2NY.js";
 import { Icons as w } from "./icons.es.js";
 import { TableBody as V, List as q } from "@base-framework/organisms";
 import { C as J, I as X } from "./inputs-BF3C3KfF.js";
 import { A as Z, P as ee } from "./calendar-DR_svCOR.js";
-u((e, s) => ({
+d((e, t) => ({
   class: "flex items-center px-4 py-2",
   ...e,
-  children: s
+  children: t
 }));
-u(({ value: e, label: s }) => y({
+d(({ value: e, label: t }) => 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: e }],
   dataSet: ["performance", ["state", e, "active"]],
-  click: (t, { state: n }) => n.performance = e
-}, s));
-class _e extends h {
-  constructor() {
-    super(...arguments);
-    /**
-     * @member {string} class
-     */
-    l(this, "class", null);
+  click: (s, { state: n }) => n.performance = e
+}, t));
+class _e extends u {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.class = "";
   }
   /**
    * This will render the component.
@@ -37,15 +38,15 @@ class _e extends h {
   }
 }
 const te = (e) => {
-  const s = new Date(e, 11, 31), t = new Date(e, 0, 1);
-  return s.getDay() === 4 || // December 31 is a Thursday
-  t.getDay() === 4;
+  const t = new Date(e, 11, 31), s = new Date(e, 0, 1);
+  return t.getDay() === 4 || // December 31 is a Thursday
+  s.getDay() === 4;
 }, se = (e) => {
-  const s = new Date(e.valueOf()), t = (s.getDay() + 6) % 7;
-  s.setDate(s.getDate() - t + 3);
-  const n = s.getFullYear(), a = new Date(n, 0, 4);
+  const t = new Date(e.valueOf()), s = (t.getDay() + 6) % 7;
+  t.setDate(t.getDate() - s + 3);
+  const n = t.getFullYear(), a = new Date(n, 0, 4);
   a.setDate(a.getDate() - (a.getDay() + 6) % 7);
-  const i = Math.ceil((s - a) / 6048e5) + 1;
+  const i = Math.ceil((t - a) / 6048e5) + 1;
   return i > 52 && !te(n) ? {
     weekNumber: 1,
     year: n + 1
@@ -53,37 +54,37 @@ const te = (e) => {
     weekNumber: i,
     year: n
   };
-}, ne = (e, s, t) => {
-  if (t === 0) return [];
-  const n = new Date(e, s, 0).getDate();
+}, ne = (e, t, s) => {
+  if (s === 0) return [];
+  const n = new Date(e, t, 0).getDate();
   return Array.from(
-    { length: t },
-    (a, i) => new Date(e, s - 1, n - t + i + 1)
+    { length: s },
+    (a, i) => new Date(e, t - 1, n - s + i + 1)
   );
-}, ae = (e, s, t) => Array.from({ length: t }, (n, a) => new Date(e, s + 1, a + 1)), C = (e, s) => {
-  const t = new Date(s, 0, 4), n = (t.getDay() + 6) % 7, a = new Date(t);
-  a.setDate(t.getDate() - n);
+}, ae = (e, t, s) => Array.from({ length: s }, (n, a) => new Date(e, t + 1, a + 1)), C = (e, t) => {
+  const s = new Date(t, 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() + (e - 1) * 7), i;
-}, Ge = (e, s) => {
-  const t = new Date(e, s, 1).getDay(), n = new Date(e, s + 1, 0).getDate(), a = [];
+}, Ge = (e, t) => {
+  const s = new Date(e, t, 1).getDay(), n = new Date(e, t + 1, 0).getDate(), a = [];
   let i = [];
-  for (let r = 1 - t; r <= n; r++) {
-    const f = new Date(e, s, r);
-    i.push(r > 0 ? f : null), (i.length === 7 || r === n) && (a.push([...i]), i = []);
+  for (let r = 1 - s; r <= n; r++) {
+    const h = new Date(e, t, r);
+    i.push(r > 0 ? h : null), (i.length === 7 || r === n) && (a.push([...i]), i = []);
   }
   return a;
-}, Ve = (e, s) => {
-  const t = new Date(e, s + 1, 0).getDate(), n = [];
+}, Ve = (e, t) => {
+  const s = new Date(e, t + 1, 0).getDate(), n = [];
   let a = [];
-  for (let i = 1; i <= t; i++)
-    a.push(new Date(e, s, i)), a.length === 7 && (n.push(a), a = []);
+  for (let i = 1; i <= s; i++)
+    a.push(new Date(e, t, i)), a.length === 7 && (n.push(a), a = []);
   return a.length > 0 && n.push(a), n;
-}, ie = (e, s, t) => {
+}, ie = (e, t, s) => {
   const n = /* @__PURE__ */ new Date();
-  return n.getDate() === e && n.getMonth() === s && n.getFullYear() === t;
-}, oe = ({ day: e, month: s, year: t, weekNumber: n, selectWeek: a }) => {
-  const i = ie(e, s, t);
+  return n.getDate() === e && n.getMonth() === t && n.getFullYear() === s;
+}, oe = ({ day: e, month: t, year: s, weekNumber: n, selectWeek: a }) => {
+  const i = ie(e, t, s);
   return y({
     text: e || "",
     disabled: !e,
@@ -92,21 +93,21 @@ const te = (e) => {
             ${i ? "bg-accent text-accent-foreground" : ""}
             hover:bg-primary hover:text-primary-foreground
         `,
-    click: () => a(n, t)
+    click: () => a(n, s)
   });
-}, le = (e, s) => {
-  const t = new Date(e, s, 1).getDay(), n = new Date(e, s + 1, 0).getDate(), a = ne(e, s, t), i = Array.from({ length: n }, (c, b) => new Date(e, s, b + 1)), r = (a.length + i.length) % 7, f = r === 0 ? 0 : 7 - r, d = ae(e, s, f), g = [...a, ...i, ...d], x = [];
-  for (let c = 0; c < g.length; c += 7) {
-    const b = g.slice(c, c + 7), $ = b.find((P) => P) || new Date(e, s, 1), { weekNumber: A, year: j } = se($);
-    x.push({
-      weekNumber: A,
-      year: j,
-      days: b
+}, le = (e, t) => {
+  const s = new Date(e, t, 1).getDay(), n = new Date(e, t + 1, 0).getDate(), a = ne(e, t, s), i = Array.from({ length: n }, (l, x) => new Date(e, t, x + 1)), r = (a.length + i.length) % 7, h = r === 0 ? 0 : 7 - r, c = ae(e, t, h), f = [...a, ...i, ...c], m = [];
+  for (let l = 0; l < f.length; l += 7) {
+    const x = f.slice(l, l + 7), $ = x.find((j) => j) || new Date(e, t, 1), { weekNumber: P, year: A } = se($);
+    m.push({
+      weekNumber: P,
+      year: A,
+      days: x
     });
   }
-  return x;
-}, re = ({ selectWeek: e }) => U("month", (s, t, { data: n }) => {
-  const { year: a, month: i, currentDate: r } = n, f = le(a, i);
+  return m;
+}, re = ({ selectWeek: e }) => U("month", (t, s, { data: n }) => {
+  const { year: a, month: i, currentDate: r } = n, h = le(a, i);
   return o(
     { class: "grid grid-cols-8 gap-1 text-sm px-4 py-2" },
     [
@@ -117,38 +118,38 @@ const te = (e) => {
           class: "grid grid-cols-7 col-span-7 text-center text-muted-foreground items-center"
         },
         ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(
-          (d) => v({ class: "px-1 py-1", text: d })
+          (c) => v({ class: "px-1 py-1", text: c })
         )
       ),
       // Render each "week" row
-      ...f.map(
-        ({ weekNumber: d, days: g, year: x }) => o({
+      ...h.map(
+        ({ weekNumber: c, days: f, year: m }) => o({
           class: "grid grid-cols-8 col-span-8 items-center ring-primary rounded-sm px-1",
           onSet: ["currentWeek", {
-            ring: d
+            ring: c
           }]
         }, [
           // Left column: ISO week number
           o({
             class: "font-medium text-center col-span-1 rounded-sm cursor-pointer",
-            click: () => e(d, x),
+            click: () => e(c, m),
             // If you have a 'currentWeek' state, you can highlight it with 'onSet'
             onSet: ["currentWeek", {
-              "text-primary-foreground": d,
-              "bg-primary": d
+              "text-primary-foreground": c,
+              "bg-primary": c
             }],
-            text: d ? `W${d}` : ""
+            text: c ? `W${c}` : ""
           }),
           // The 7 cells for each day in the row
           o(
             { class: "grid grid-cols-7 col-span-7 text-center" },
-            g.map(
-              (c) => oe({
-                year: (c == null ? void 0 : c.getFullYear()) || null,
-                month: (c == null ? void 0 : c.getMonth()) || null,
-                day: (c == null ? void 0 : c.getDate()) || null,
-                week: g,
-                weekNumber: d,
+            f.map(
+              (l) => oe({
+                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,
+                weekNumber: c,
                 currentDate: r,
                 selectWeek: e
               })
@@ -158,7 +159,7 @@ const te = (e) => {
       )
     ]
   );
-}), O = ({ label: e, click: s }) => T(
+}), O = ({ label: e, click: t }) => T(
   {
     class: `
             inline-flex items-center justify-center h-7 w-7 bg-transparent p-0
@@ -166,23 +167,23 @@ const te = (e) => {
             ${e === "Previous" ? "left-1" : "right-1"}
             focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
           `,
-    click: s,
+    click: t,
     "aria-label": `${e} month`,
     variant: "icon",
     icon: e === "Previous" ? w.chevron.single.left : w.chevron.single.right
   }
-), ce = ({ next: e, previous: s }) => o({ class: "flex flex-auto min-h-12 text-sm font-medium relative justify-center items-center" }, [
+), ce = ({ next: e, previous: t }) => o({ class: "flex flex-auto min-h-12 text-sm font-medium relative justify-center items-center" }, [
   v("[[monthName]] [[year]]"),
   O({
     label: "Previous",
-    click: s
+    click: t
   }),
   O({
     label: "Next",
     click: e
   })
 ]);
-class qe extends h {
+class qe extends u {
   constructor() {
     super(...arguments);
     /**
@@ -190,19 +191,19 @@ class qe extends h {
      * @member {string} selectedDate
      * @default null
      */
-    l(this, "selectedDate", null);
+    b(this, "selectedDate", null);
     /**
      * The selected week.
      * @member {number} selectedWeek
      * @default null
      */
-    l(this, "selectedWeek", null);
+    b(this, "selectedWeek", null);
     /**
      * The selected call back.
      * @member {function} selectedCallBack
      * @default null
      */
-    l(this, "selectedCallBack", null);
+    b(this, "selectedCallBack", null);
   }
   /**
    * Initializes the calendar data.
@@ -210,7 +211,7 @@ class qe extends h {
    * @returns {Data}
    */
   setData() {
-    const t = /* @__PURE__ */ new Date(), n = this.selectedWeek || this.calculateCurrentWeek(t), a = C(n, t.getFullYear());
+    const s = /* @__PURE__ */ new Date(), n = this.selectedWeek || this.calculateCurrentWeek(s), a = C(n, s.getFullYear());
     return new L({
       monthName: this.getMonthName(a.getMonth()),
       year: a.getFullYear(),
@@ -225,8 +226,8 @@ class qe extends h {
    * @param {Date} today
    * @returns {Date}
    */
-  getSelectedDate(t) {
-    const n = this.selectedDate ? new Date(this.selectedDate) : t;
+  getSelectedDate(s) {
+    const n = this.selectedDate ? new Date(this.selectedDate) : s;
     return new Date(n.getFullYear(), n.getMonth(), n.getDate());
   }
   /**
@@ -235,8 +236,8 @@ class qe extends h {
    * @param {Date} date
    * @returns {number}
    */
-  calculateCurrentWeek(t) {
-    const n = new Date(t.valueOf()), a = (t.getDay() + 6) % 7;
+  calculateCurrentWeek(s) {
+    const n = new Date(s.valueOf()), a = (s.getDay() + 6) % 7;
     n.setDate(n.getDate() - a + 3);
     const i = n.valueOf();
     return n.setMonth(0, 1), n.getDay() !== 4 && n.setMonth(0, 1 + (4 - n.getDay() + 7) % 7), 1 + Math.ceil((i - n) / 6048e5);
@@ -247,8 +248,8 @@ class qe extends h {
    * @param {number} month
    * @returns {string}
    */
-  getMonthName(t) {
-    return G.monthNames[t];
+  getMonthName(s) {
+    return G.monthNames[s];
   }
   /**
    * Updates the calendar to show the previous month.
@@ -256,8 +257,8 @@ class qe extends h {
    * @returns {void}
    */
   goToPreviousMonth() {
-    const t = this.data;
-    let { year: n, month: a } = t;
+    const s = this.data;
+    let { year: n, month: a } = s;
     a === 0 ? (a = 11, n--) : a--, this.setDate(a, n);
   }
   /**
@@ -266,8 +267,8 @@ class qe extends h {
    * @returns {void}
    */
   goToNextMonth() {
-    const t = this.data;
-    let { year: n, month: a } = t;
+    const s = this.data;
+    let { year: n, month: a } = s;
     a === 11 ? (a = 0, n++) : a++, this.setDate(a, n);
   }
   /**
@@ -278,11 +279,11 @@ class qe extends h {
    * @param {number|null} [date=null]
    * @returns {void}
    */
-  setDate(t, n, a) {
+  setDate(s, n, a) {
     this.data.set({
       year: n,
-      month: t,
-      monthName: this.getMonthName(t)
+      month: s,
+      monthName: this.getMonthName(s)
     }), a && (this.data.currentDate = a);
   }
   /**
@@ -291,10 +292,10 @@ class qe extends h {
    * @param {number} weekNumber
    * @returns {void}
    */
-  selectWeek(t, n) {
-    this.data.currentWeek = t;
-    const a = C(t, n);
-    this.setDate(a.getMonth(), a.getFullYear(), a.getDate()), typeof this.selectedCallBack == "function" && this.selectedCallBack(t);
+  selectWeek(s, n) {
+    this.data.currentWeek = s;
+    const a = C(s, n);
+    this.setDate(a.getMonth(), a.getFullYear(), a.getDate()), typeof this.selectedCallBack == "function" && this.selectedCallBack(s);
   }
   /**
    * Renders the WeekCalendar component.
@@ -308,40 +309,40 @@ class qe extends h {
         previous: () => this.goToPreviousMonth()
       }),
       re({
-        selectWeek: (t, n) => this.selectWeek(t, n)
+        selectWeek: (s, n) => this.selectWeek(s, n)
       })
     ]);
   }
 }
 const de = (e) => B({ class: `cursor-pointer py-3 px-4 text-base w-10 ${e.class || ""}` }, [
-  F((s) => new J({ class: "mr-2", onChange: () => s.toggleAllSelectedRows() }))
-]), ue = ({ align: e, sortable: s, key: t, label: n, sort: a, class: i }) => {
+  F((t) => new J({ class: "mr-2", onChange: () => t.toggleAllSelectedRows() }))
+]), ue = ({ align: e, sortable: t, key: s, label: n, sort: a, class: i }) => {
   const r = e || "justify-start";
   return B({
     class: `cursor-pointer py-3 px-4 text-base ${i || ""}`,
-    click: s && (() => a(t))
+    click: t && (() => a(s))
   }, [
     o({ class: `flex flex-auto w-full items-center ${r}` }, [
       v(n),
-      s && E({ class: "ml-2", html: w.arrows.upDown })
+      t && E({ class: "ml-2", html: w.arrows.upDown })
     ])
   ]);
 }, he = (e) => Q([
   H({
     class: "text-muted-foreground border-b",
-    map: [e.headers, (s) => s.label === "checkbox" ? de({ toggle: e.toggle }) : ue({
-      align: s.align,
-      sortable: s.sortable,
-      key: s.key,
-      label: s.label,
+    map: [e.headers, (t) => t.label === "checkbox" ? de({ toggle: e.toggle }) : ue({
+      align: t.align,
+      sortable: t.sortable,
+      key: t.key,
+      label: t.label,
       sort: e.sort
     })]
   })
-]), fe = ({ key: e, rows: s, selectRow: t, rowItem: n }) => new V({
+]), fe = ({ key: e, rows: t, selectRow: s, rowItem: n }) => new V({
   cache: "table",
   key: e,
-  items: s,
-  rowItem: (a) => n(a, t),
+  items: t,
+  rowItem: (a) => n(a, s),
   class: "divide-y divide-border"
 }), Je = M(
   {
@@ -362,8 +363,8 @@ const de = (e) => B({ class: `cursor-pointer py-3 px-4 text-base w-10 ${e.class
      * @returns {void}
      */
     toggleAllSelectedRows() {
-      const e = this.table.getRows(), s = this.data.selectedRows.length === e.length, t = s ? [] : e;
-      this.data.selectedRows = t, this.updateSelected(), this.updateTable(!s);
+      const e = this.table.getRows(), t = this.data.selectedRows.length === e.length, s = t ? [] : e;
+      this.data.selectedRows = s, this.updateSelected(), this.updateTable(!t);
     },
     /**
      * This will update the selected state.
@@ -390,8 +391,8 @@ const de = (e) => B({ class: `cursor-pointer py-3 px-4 text-base w-10 ${e.class
      * @returns {void}
      */
     updateTable(e) {
-      const s = this.table.getRows();
-      s.forEach((t) => t.selected = e), this.table.setRows(s);
+      const t = this.table.getRows();
+      t.forEach((s) => s.selected = e), this.table.setRows(t);
     },
     /**
      * Handles row selection.
@@ -399,9 +400,9 @@ const de = (e) => B({ class: `cursor-pointer py-3 px-4 text-base w-10 ${e.class
      * @param {object} row
      */
     selectRow(e) {
-      const s = e.selected ?? !1;
-      e.selected = !s;
-      const t = this.data.get("selectedRows"), n = e.selected ? [...t, e] : t.filter((a) => a !== e);
+      const t = e.selected ?? !1;
+      e.selected = !t;
+      const s = this.data.get("selectedRows"), n = e.selected ? [...s, e] : s.filter((a) => a !== e);
       this.data.selectedRows = n, this.updateSelected();
     },
     /**
@@ -410,12 +411,12 @@ const de = (e) => B({ class: `cursor-pointer py-3 px-4 text-base w-10 ${e.class
      * @returns {object}
      */
     render() {
-      const e = this.rows, s = this.border !== !1 ? "border" : "";
+      const e = this.rows, t = this.border !== !1 ? "border" : "";
       return o({ class: "w-full" }, [
-        o({ class: `w-full rounded-md ${s} overflow-x-auto` }, [
+        o({ class: `w-full rounded-md ${t} overflow-x-auto` }, [
           K({ class: "w-full" }, [
             // @ts-ignore
-            this.headers && he({ headers: this.headers, sort: (t) => this.sortRows(t) }),
+            this.headers && he({ headers: this.headers, sort: (s) => this.sortRows(s) }),
             // @ts-ignore
             this.customHeader ?? null,
             fe({
@@ -469,8 +470,8 @@ const de = (e) => B({ class: `cursor-pointer py-3 px-4 text-base w-10 ${e.class
      * @param {boolean} withDelete
      * @returns {void}
      */
-    mingle(e, s = !1) {
-      this.table.mingle(e, s);
+    mingle(e, t = !1) {
+      this.table.mingle(e, t);
     },
     /**
      * This will prepend items to the list.
@@ -491,21 +492,21 @@ const de = (e) => B({ class: `cursor-pointer py-3 px-4 text-base w-10 ${e.class
       this.data.selectedRows = [];
     }
   }
-), ge = u(({ name: e, email: s }) => o({ class: "min-w-0 flex-auto" }, [
-  p({ class: "text-base font-semibold leading-6 m-0" }, e),
-  p({ class: "truncate text-sm leading-5 text-muted-foreground m-0" }, s)
+), ge = d(({ name: e, email: t }) => o({ class: "min-w-0 flex-auto" }, [
+  g({ class: "text-base font-semibold leading-6 m-0" }, e),
+  g({ class: "truncate text-sm leading-5 text-muted-foreground m-0" }, t)
 ])), pe = () => 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" })
   ]),
-  p({ class: "text-xs leading-5 text-gray-500" }, "Online")
-]), me = (e) => p({ class: "text-xs leading-5 text-muted-foreground" }, [
+  g({ class: "text-xs leading-5 text-gray-500" }, "Online")
+]), me = (e) => g({ class: "text-xs leading-5 text-muted-foreground" }, [
   v("Last seen "),
   _({ datetime: e }, "3h ago")
-]), xe = (e, s) => e === "online" ? pe() : me(s), be = u(({ role: e, lastSeen: s, status: t }) => o({ class: "hidden shrink-0 sm:flex sm:flex-col sm:items-end" }, [
-  p({ class: "text-sm leading-6 m-0" }, e),
-  xe(t, s)
-])), ke = (e) => e.split(" ").map((t) => t[0]).join(""), we = u((e) => D({ class: "fadeIn flex justify-between gap-x-6 py-4 px-4 rounded-md hover:bg-muted/50" }, [
+]), xe = (e, t) => e === "online" ? pe() : me(t), be = d(({ role: e, lastSeen: t, status: s }) => o({ class: "hidden shrink-0 sm:flex sm:flex-col sm:items-end" }, [
+  g({ class: "text-sm leading-6 m-0" }, e),
+  xe(s, t)
+])), ke = (e) => e.split(" ").map((s) => s[0]).join(""), we = d((e) => 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" }, [
     Z({ src: e.image, alt: e.name, fallbackText: ke(e.name) }),
     ge({ name: e.name, email: e.email })
@@ -515,35 +516,28 @@ const de = (e) => B({ class: `cursor-pointer py-3 px-4 text-base w-10 ${e.class
     lastSeen: e.lastSeen,
     status: e.status
   })
-])), Xe = u((e) => new q({
+])), Xe = d((e) => new q({
   cache: "list",
   key: "name",
   items: e.users,
   role: "list",
   class: "divide-y divide-border",
   rowItem: we
-})), ye = (e, s) => s.includes(e), ve = (e, s, t) => e.exact ? t === s : ye(s, t), De = ({ text: e, href: s, exact: t, hidden: n }) => new R({
+})), ye = (e, t) => t.includes(e), ve = (e, t, s) => e.exact ? s === t : ye(t, s), De = ({ text: e, href: t, exact: s, hidden: n }) => new R({
   text: e,
-  href: s,
-  exact: t,
+  href: t,
+  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 Ze extends h {
-  constructor() {
-    super(...arguments);
-    /**
-     * This will set the options.
-     * @member {array} options
-     * @default []
-     */
-    l(this, "options", []);
-    /**
-     * This will set the class.
-     * @member {string} class
-     * @default ''
-     */
-    l(this, "class", "");
+class Ze extends u {
+  /**
+  * This will declare the props for the compiler.
+  *
+  * @returns {void}
+  */
+  declareProps() {
+    this.options = [], this.class = "";
   }
   /**
    * This will configure the links.
@@ -560,7 +554,7 @@ class Ze extends h {
     return S(
       { class: `flex items-center justify-center p-2 text-muted-foreground rounded-md ${this.class || ""}` },
       [
-        m({
+        p({
           class: "flex space-x-4",
           map: [this.options, (t) => this.addLink(t)],
           watch: {
@@ -587,14 +581,14 @@ class Ze extends h {
    * @returns {void}
    */
   updateLinks(t) {
-    let n = !1;
+    let s = !1;
     this.deactivateAllLinks();
-    for (const a of this.links) {
-      if (!a.rendered)
+    for (const n of this.links) {
+      if (!n.rendered)
         continue;
-      ve(a, a.getLinkPath(), t) ? (this.updateLink(a, !0), n = !0) : this.updateLink(a, !1);
+      ve(n, n.getLinkPath(), t) ? (this.updateLink(n, !0), s = !0) : this.updateLink(n, !1);
     }
-    !n && this.links[0] && this.updateLink(this.links[0], !0);
+    !s && this.links[0] && this.updateLink(this.links[0], !0);
   }
   /**
    * This will deactivate all links.
@@ -612,8 +606,8 @@ class Ze extends h {
    * @param {boolean} selected
    * @returns {void}
    */
-  updateLink(t, n) {
-    t.update(n);
+  updateLink(t, s) {
+    t.update(s);
   }
   /**
    * This will add a link to the navigation.
@@ -621,9 +615,9 @@ class Ze extends h {
    * @param {object} option
    * @returns {object}
    */
-  addLink({ label: t, href: n, exact: a, hidden: i }) {
-    const r = De({ text: t, href: n, exact: a, hidden: i });
-    return this.links.push(r), r;
+  addLink({ label: t, href: s, exact: n, hidden: a }) {
+    const i = De({ text: t, href: s, exact: n, hidden: a });
+    return this.links.push(i), i;
   }
   /**
    * This will clear the links.
@@ -634,9 +628,9 @@ class Ze extends h {
     this.links = [];
   }
 }
-const et = u((e) => {
-  const s = e.margin || "m-4 ml-0";
-  return o({ class: `flex-none ${s}` }, [
+const et = d((e) => {
+  const t = e.margin || "m-4 ml-0";
+  return o({ class: `flex-none ${t}` }, [
     T({
       variant: "icon",
       class: "back-button",
@@ -652,14 +646,14 @@ const et = u((e) => {
     ])
   ]);
 });
-class W extends h {
-  constructor() {
-    super(...arguments);
-    /**
-     * @member {string} class
-     * @default ''
-     */
-    l(this, "class", "");
+class W extends u {
+  /**
+  * This will declare the props for the compiler.
+  *
+  * @returns {void}
+  */
+  declareProps() {
+    this.class = "";
   }
   /**
    * This will render the component.
@@ -740,14 +734,6 @@ class W extends h {
   }
 }
 class tt extends W {
-  constructor() {
-    super(...arguments);
-    /**
-     * @member {string} class
-     * @default ''
-     */
-    l(this, "class", "");
-  }
   /**
    * This will stop presistence.
    *
@@ -769,8 +755,8 @@ class tt extends W {
           ["loading", {
             loading: !0
           }],
-          ["docked", (n, a) => {
-            n ? (a.className = this.getDockedClassName(), t.appendChild(a), document.documentElement.style.overflowY = "auto") : (a.className = this.getClassName(), app.root.appendChild(a), document.documentElement.style.overflowY = "hidden");
+          ["docked", (s, n) => {
+            s ? (n.className = this.getDockedClassName(), t.appendChild(n), document.documentElement.style.overflowY = "auto") : (n.className = this.getClassName(), app.root.appendChild(n), document.documentElement.style.overflowY = "hidden");
           }]
         ]
       },
@@ -851,14 +837,6 @@ class tt extends W {
   }
 }
 class st extends W {
-  constructor() {
-    super(...arguments);
-    /**
-     * @member {string} class
-     * @default ''
-     */
-    l(this, "class", "");
-  }
   /**
    * This will get the overlay type.
    *
@@ -877,37 +855,37 @@ class st extends W {
     this.container = t, this.initialize();
   }
 }
-const Se = u(({ index: e, click: s, state: t }, n) => D({
+const Se = d(({ index: e, click: t, state: s }, n) => D({
   class: "p-2 cursor-pointer hover:bg-muted/50",
   onState: [
-    [t, "selectedIndex", {
+    [s, "selectedIndex", {
       "bg-accent": e,
       "text-white": e
     }]
   ],
-  pointerdown: () => s(e)
-}, n)), Le = u(({ selectOption: e, state: s }) => m({
+  pointerdown: () => t(e)
+}, n)), Le = d(({ selectOption: e, state: t }) => p({
   class: "border rounded-md list-none m-0 p-0 max-h-[400px] overflow-y-auto",
-  for: ["filteredOptions", (t, n) => Se({ index: n, click: e, state: s }, t.label)]
-})), Ce = 100, Oe = u((e) => o({ class: "relative flex items-center" }, [
+  for: ["filteredOptions", (s, n) => Se({ index: n, click: e, state: t }, s.label)]
+})), Ce = 100, Oe = d((e) => o({ class: "relative flex items-center" }, [
   X({
     cache: "input",
     placeholder: e.placeholder ?? "Search...",
     bind: [e.state, "searchQuery"],
-    keyup: (s, t) => {
-      t.state.open = !0, typeof e.filterOptions == "function" && e.filterOptions(), t.dropdown.updatePosition();
+    keyup: (t, s) => {
+      s.state.open = !0, typeof e.filterOptions == "function" && e.filterOptions(), s.dropdown.updatePosition();
     },
-    pointerup: (s, t) => t.toggleDropdown(),
-    blur: (s, { state: t }) => setTimeout(() => t.open = !1, Ce),
-    keydown: (s) => typeof e.handleKeyDown == "function" && e.handleKeyDown(s)
+    pointerup: (t, s) => s.toggleDropdown(),
+    blur: (t, { state: s }) => setTimeout(() => s.open = !1, Ce),
+    keydown: (t) => typeof e.handleKeyDown == "function" && e.handleKeyDown(t)
   }),
   e.icon && o({ class: "absolute right-0 mr-2" }, [
     N(e.icon)
   ])
 ])), Be = (e) => o({
   class: "relative flex fle-auto flex-col",
-  onState: ["open", (s, t, n) => {
-    if (s)
+  onState: ["open", (t, s, n) => {
+    if (t)
       return new ee({
         cache: "dropdown",
         parent: n,
@@ -950,10 +928,10 @@ const Se = u(({ index: e, click: s, state: t }, n) => D({
      */
     setSelectedIndexByQuery() {
       const e = this.data.filteredOptions;
-      let { searchQuery: s } = this.state;
-      s = s.toLowerCase();
-      const t = e.findIndex((n) => n.label.toLowerCase() === s);
-      t >= 0 && (this.state.selectedIndex = t);
+      let { searchQuery: t } = this.state;
+      t = t.toLowerCase();
+      const s = e.findIndex((n) => n.label.toLowerCase() === t);
+      s >= 0 && (this.state.selectedIndex = s);
     },
     /**
      * This will filter the options.
@@ -966,9 +944,9 @@ const Se = u(({ index: e, click: s, state: t }, n) => D({
         this.data.filteredOptions = this.data.options;
         return;
       }
-      const s = this.data.get("options");
-      this.data.filteredOptions = s.filter(
-        (t) => t.label.toLowerCase().includes(e)
+      const t = this.data.get("options");
+      this.data.filteredOptions = t.filter(
+        (s) => s.label.toLowerCase().includes(e)
       );
     },
     /**
@@ -988,8 +966,8 @@ const Se = u(({ index: e, click: s, state: t }, n) => D({
      */
     selectOption(e) {
       this.state.selectedIndex = e;
-      const s = this.data.get(`filteredOptions[${e}]`);
-      this.state.searchQuery = s.label, this.state.open = !1, typeof this.onSelect == "function" && this.onSelect(s);
+      const t = this.data.get(`filteredOptions[${e}]`);
+      this.state.searchQuery = t.label, this.state.open = !1, typeof this.onSelect == "function" && this.onSelect(t);
     },
     /**
         * Toggles the dropdown open state.
@@ -1004,8 +982,8 @@ const Se = u(({ index: e, click: s, state: t }, n) => D({
      * @returns {void}
      */
     handleKeyDown(e) {
-      const s = this.data.filteredOptions, { selectedIndex: t } = this.state;
-      e.key === "ArrowDown" ? (e.preventDefault(), this.state.selectedIndex = Math.min(t + 1, s.length - 1)) : e.key === "ArrowUp" ? (e.preventDefault(), this.state.selectedIndex = Math.max(t - 1, 0)) : e.key === "Enter" && t >= 0 && (e.preventDefault(), this.selectOption(t));
+      const t = this.data.filteredOptions, { selectedIndex: s } = this.state;
+      e.key === "ArrowDown" ? (e.preventDefault(), this.state.selectedIndex = Math.min(s + 1, t.length - 1)) : e.key === "ArrowUp" ? (e.preventDefault(), this.state.selectedIndex = Math.max(s - 1, 0)) : e.key === "Enter" && s >= 0 && (e.preventDefault(), this.selectOption(s));
     },
     /**
      * This will render the component.
@@ -1046,32 +1024,20 @@ const Se = u(({ index: e, click: s, state: t }, n) => D({
     y({
       class: "flex flex-auto justify-center items-center px-3 py-1.5",
       onSet: ["selected", { selected: e.value }],
-      click: (s) => e.callBack(e.value)
+      click: (t) => e.callBack(e.value)
     }, e.label)
   ]
-), Me = (e, s) => (e.callBack = s, Ie(e)), Re = (e) => S({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${e.class}` }, [
-  m({ class: "flex flex-auto flex-row", map: [e.options, (s) => Me(s, e.callBack)] })
+), Me = (e, t) => (e.callBack = t, Ie(e)), Re = (e) => S({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${e.class}` }, [
+  p({ class: "flex flex-auto flex-row", map: [e.options, (t) => Me(t, e.callBack)] })
 ]);
-class at extends h {
-  constructor() {
-    super(...arguments);
-    /**
-     * This will set the options.
-     * @member {array} options
-     * @default []
-     */
-    l(this, "options", []);
-    /**
-     * This will set the class.
-     * @member {string} class
-     * @default ''
-     */
-    l(this, "class", "");
-    /**
-     * This will set the call back.
-     * @member {function} callBack
-     */
-    l(this, "callBack", null);
+class at extends u {
+  /**
+  * This will declare the props for the compiler.
+  *
+  * @returns {void}
+  */
+  declareProps() {
+    this.options = [], this.class = "", this.callBack = null;
   }
   /**
    * This will render the component.
@@ -1126,14 +1092,14 @@ class at extends h {
    * @returns {object}
    */
   updateContent(t) {
-    const n = this.options;
-    if (!n || n.length < 1)
+    const s = this.options;
+    if (!s || s.length < 1)
       return;
-    const a = n[0];
-    for (const i of n)
-      if (i.value === t)
-        return i.layout;
-    return a.layout;
+    const n = s[0];
+    for (const a of s)
+      if (a.value === t)
+        return a.layout;
+    return n.layout;
   }
   /**
    * This will setup the states.
@@ -1141,12 +1107,12 @@ class at extends h {
    * @returns {object}
    */
   setupStates() {
-    const t = this.callBack, n = typeof t;
+    const t = this.callBack, s = typeof t;
     return {
       selected: {
         state: this.getFirstValue(),
-        callBack(a) {
-          n === "function" && t(a);
+        callBack(n) {
+          s === "function" && t(n);
         }
       }
     };
@@ -1161,33 +1127,21 @@ const Te = (e) => D(
     y({
       class: "flex flex-auto justify-center items-center px-3 py-1.5 disabled:opacity-50 disabled:cursor-not-allowed",
       onSet: ["selected", { selected: e.value }],
-      click: (s) => e.callBack(e.value),
+      click: (t) => e.callBack(e.value),
       disabled: e.disabled
     }, e.label)
   ]
-), Ne = (e, s) => (e.callBack = s, Te(e)), We = (e) => S({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${e.class}` }, [
-  m({ class: "flex flex-auto flex-row", map: [e.options, (s) => Ne(s, e.callBack)] })
+), Ne = (e, t) => (e.callBack = t, Te(e)), We = (e) => S({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${e.class}` }, [
+  p({ class: "flex flex-auto flex-row", map: [e.options, (t) => Ne(t, e.callBack)] })
 ]);
-class it extends h {
-  constructor() {
-    super(...arguments);
-    /**
-     * This will set the options.
-     * @member {array} options
-     * @default []
-     */
-    l(this, "options", []);
-    /**
-     * This will set the class.
-     * @member {string} class
-     * @default ''
-     */
-    l(this, "class", "");
-    /**
-     * This will set the on select call back.
-     * @member {function} onSelect
-     */
-    l(this, "onSelect", null);
+class it extends u {
+  /**
+  * This will declare the props for the compiler.
+  *
+  * @returns {void}
+  */
+  declareProps() {
+    this.options = [], this.class = "", this.onSelect = null;
   }
   /**
    * This will render the component.
@@ -1223,36 +1177,24 @@ class it extends h {
     };
   }
 }
-const $e = (e, s) => new RegExp(`${e}($|/|\\.).*`).test(s), Ae = (e, s) => {
-  const t = e.getLinkPath();
-  return e.exact ? s === t : $e(t, s);
-}, je = ({ text: e, href: s, exact: t }) => new R({
+const $e = (e, t) => new RegExp(`${e}($|/|\\.).*`).test(t), Pe = (e, t) => {
+  const s = e.getLinkPath();
+  return e.exact ? t === s : $e(s, t);
+}, Ae = ({ text: e, href: t, exact: s }) => new R({
   text: e,
-  href: s,
-  exact: t,
+  href: t,
+  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 Pe extends h {
-  constructor() {
-    super(...arguments);
-    /**
-        * This will set the options.
-        * @member {array} options
-        * @default []
-        */
-    l(this, "options", []);
-    /**
-     * This will set the class.
-     * @member {string} class
-     * @default ''
-     */
-    l(this, "class", "");
-    /**
-     * This will set the on select call back.
-     * @member {function} onSelect
-     */
-    l(this, "onSelect", null);
+class je extends u {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.options = [], this.class = "", this.onSelect = null;
   }
   /**
    * This will configure the links.
@@ -1267,7 +1209,7 @@ class Pe extends h {
    */
   render() {
     return S({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${this.class}` }, [
-      m({
+      p({
         class: "flex flex-auto flex-row",
         map: [this.options, (t) => this.addLink(t)],
         watch: {
@@ -1293,14 +1235,14 @@ class Pe extends h {
    * @returns {void}
    */
   updateLinks(t) {
-    let n = !1, a = this.links[0];
+    let s = !1, n = this.links[0];
     this.deactivateAllLinks();
-    for (const i of this.links)
-      if (i.rendered !== !1 && (n = Ae(i, t), n === !0)) {
-        this.updateLink(i, !0);
+    for (const a of this.links)
+      if (a.rendered !== !1 && (s = Pe(a, t), s === !0)) {
+        this.updateLink(a, !0);
         break;
       }
-    n !== !0 && a && this.updateLink(a, !0);
+    s !== !0 && n && this.updateLink(n, !0);
   }
   /**
       * This will deactivate all links.
@@ -1318,8 +1260,8 @@ class Pe extends h {
    * @param {boolean} selected
    * @returns {void}
    */
-  updateLink(t, n) {
-    t.update(n);
+  updateLink(t, s) {
+    t.update(s);
   }
   /**
    * This will add a link.
@@ -1327,9 +1269,9 @@ class Pe extends h {
    * @param {object} option
    * @returns {object}
    */
-  addLink({ label: t, href: n, exact: a }) {
-    const i = je({ text: t, href: n, exact: a });
-    return this.links.push(i), i;
+  addLink({ label: t, href: s, exact: n }) {
+    const a = Ae({ text: t, href: s, exact: n });
+    return this.links.push(a), a;
   }
   /**
    * This will remove all the links.
@@ -1340,21 +1282,14 @@ class Pe extends h {
     this.links = [];
   }
 }
-class ot extends h {
-  constructor() {
-    super(...arguments);
-    /**
-        * This will set the options.
-        * @member {array} options
-        * @default []
-        */
-    l(this, "options", []);
-    /**
-     * This will set the class.
-     * @member {string} class
-     * @default ''
-     */
-    l(this, "class", "");
+class ot extends u {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.options = [], this.class = "";
   }
   /**
    * This will render the component.
@@ -1363,7 +1298,7 @@ class ot extends h {
    */
   render() {
     return o({ class: "tab-panel" }, [
-      new Pe({
+      new je({
         class: this.class,
         options: this.options
       }),
@@ -1380,9 +1315,9 @@ class ot extends h {
    */
   addGroup() {
     let t;
-    const n = [], a = this.options;
-    for (let i = 0, r = a.length; i < r; i++)
-      t = a[i], n.push(
+    const s = [], n = this.options;
+    for (let a = 0, i = n.length; a < i; a++)
+      t = n[a], s.push(
         {
           uri: t.uri || t.href,
           component: t.component,
@@ -1390,7 +1325,7 @@ class ot extends h {
           persist: !0
         }
       );
-    return n;
+    return s;
   }
 }
 export {
@@ -1420,6 +1355,6 @@ export {
   tt as l,
   at as m,
   it as n,
-  Pe as o,
+  je as o,
   ot as p
 };