@base-framework/ui 0.0.0

package/dist/tab-C_dZb2qH.js

@@ -0,0 +1,1425 @@
+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";
+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) => ({
+  class: "flex items-center px-4 py-2",
+  ...e,
+  children: s
+}));
+u(({ value: e, label: s }) => 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);
+  }
+  /**
+   * This will render the component.
+   *
+   * @returns {object}
+   */
+  render() {
+    return o({ class: this.class || "" }, this.children);
+  }
+}
+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;
+}, 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);
+  a.setDate(a.getDate() - (a.getDay() + 6) % 7);
+  const i = Math.ceil((s - a) / 6048e5) + 1;
+  return i > 52 && !te(n) ? {
+    weekNumber: 1,
+    year: n + 1
+  } : {
+    weekNumber: i,
+    year: n
+  };
+}, ne = (e, s, t) => {
+  if (t === 0) return [];
+  const n = new Date(e, s, 0).getDate();
+  return Array.from(
+    { length: t },
+    (a, i) => new Date(e, s - 1, n - t + 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);
+  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 = [];
+  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 = []);
+  }
+  return a;
+}, Ve = (e, s) => {
+  const t = new Date(e, s + 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 = []);
+  return a.length > 0 && n.push(a), n;
+}, ie = (e, s, t) => {
+  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 y({
+    text: e || "",
+    disabled: !e,
+    class: `
+            px-2 py-1 text-center rounded-md
+            ${i ? "bg-accent text-accent-foreground" : ""}
+            hover:bg-primary hover:text-primary-foreground
+        `,
+    click: () => a(n, t)
+  });
+}, 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
+    });
+  }
+  return x;
+}, re = ({ selectWeek: e }) => U("month", (s, t, { data: n }) => {
+  const { year: a, month: i, currentDate: r } = n, f = le(a, i);
+  return o(
+    { class: "grid grid-cols-8 gap-1 text-sm px-4 py-2" },
+    [
+      // Header row: "Week" label + day-of-week labels
+      o({ class: "text-xs text-center col-span-1 text-muted-foreground flex items-center" }, "Week"),
+      o(
+        {
+          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 })
+        )
+      ),
+      // Render each "week" row
+      ...f.map(
+        ({ weekNumber: d, days: g, year: x }) => o({
+          class: "grid grid-cols-8 col-span-8 items-center ring-primary rounded-sm px-1",
+          onSet: ["currentWeek", {
+            ring: d
+          }]
+        }, [
+          // Left column: ISO week number
+          o({
+            class: "font-medium text-center col-span-1 rounded-sm cursor-pointer",
+            click: () => e(d, x),
+            // If you have a 'currentWeek' state, you can highlight it with 'onSet'
+            onSet: ["currentWeek", {
+              "text-primary-foreground": d,
+              "bg-primary": d
+            }],
+            text: d ? `W${d}` : ""
+          }),
+          // 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,
+                currentDate: r,
+                selectWeek: e
+              })
+            )
+          )
+        ])
+      )
+    ]
+  );
+}), O = ({ label: e, click: s }) => T(
+  {
+    class: `
+            inline-flex items-center justify-center h-7 w-7 bg-transparent p-0
+            opacity-50 hover:opacity-100 text-muted-foreground absolute
+            ${e === "Previous" ? "left-1" : "right-1"}
+            focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
+          `,
+    click: s,
+    "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" }, [
+  v("[[monthName]] [[year]]"),
+  O({
+    label: "Previous",
+    click: s
+  }),
+  O({
+    label: "Next",
+    click: e
+  })
+]);
+class qe extends h {
+  constructor() {
+    super(...arguments);
+    /**
+     * The selected date.
+     * @member {string} selectedDate
+     * @default null
+     */
+    l(this, "selectedDate", null);
+    /**
+     * The selected week.
+     * @member {number} selectedWeek
+     * @default null
+     */
+    l(this, "selectedWeek", null);
+    /**
+     * The selected call back.
+     * @member {function} selectedCallBack
+     * @default null
+     */
+    l(this, "selectedCallBack", null);
+  }
+  /**
+   * Initializes the calendar data.
+   *
+   * @returns {Data}
+   */
+  setData() {
+    const t = /* @__PURE__ */ new Date(), n = this.selectedWeek || this.calculateCurrentWeek(t), a = C(n, t.getFullYear());
+    return new L({
+      monthName: this.getMonthName(a.getMonth()),
+      year: a.getFullYear(),
+      month: a.getMonth(),
+      currentDate: a.getDate(),
+      currentWeek: n
+    });
+  }
+  /**
+   * Determines the current selected date.
+   *
+   * @param {Date} today
+   * @returns {Date}
+   */
+  getSelectedDate(t) {
+    const n = this.selectedDate ? new Date(this.selectedDate) : t;
+    return new Date(n.getFullYear(), n.getMonth(), n.getDate());
+  }
+  /**
+   * Calculates the ISO week number for a given date.
+   *
+   * @param {Date} date
+   * @returns {number}
+   */
+  calculateCurrentWeek(t) {
+    const n = new Date(t.valueOf()), a = (t.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);
+  }
+  /**
+   * Gets the name of the month.
+   *
+   * @param {number} month
+   * @returns {string}
+   */
+  getMonthName(t) {
+    return G.monthNames[t];
+  }
+  /**
+   * Updates the calendar to show the previous month.
+   *
+   * @returns {void}
+   */
+  goToPreviousMonth() {
+    const t = this.data;
+    let { year: n, month: a } = t;
+    a === 0 ? (a = 11, n--) : a--, this.setDate(a, n);
+  }
+  /**
+   * Updates the calendar to show the next month.
+   *
+   * @returns {void}
+   */
+  goToNextMonth() {
+    const t = this.data;
+    let { year: n, month: a } = t;
+    a === 11 ? (a = 0, n++) : a++, this.setDate(a, n);
+  }
+  /**
+   * Sets the selected date.
+   *
+   * @param {number} month
+   * @param {number} year
+   * @param {number|null} [date=null]
+   * @returns {void}
+   */
+  setDate(t, n, a) {
+    this.data.set({
+      year: n,
+      month: t,
+      monthName: this.getMonthName(t)
+    }), a && (this.data.currentDate = a);
+  }
+  /**
+   * Handles week selection.
+   *
+   * @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);
+  }
+  /**
+   * Renders the WeekCalendar component.
+   *
+   * @returns {object}
+   */
+  render() {
+    return o({ class: "week-calendar-container border rounded-md bg-background p-3" }, [
+      ce({
+        next: () => this.goToNextMonth(),
+        previous: () => this.goToPreviousMonth()
+      }),
+      re({
+        selectWeek: (t, n) => this.selectWeek(t, 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 }) => {
+  const r = e || "justify-start";
+  return B({
+    class: `cursor-pointer py-3 px-4 text-base ${i || ""}`,
+    click: s && (() => a(t))
+  }, [
+    o({ class: `flex flex-auto w-full items-center ${r}` }, [
+      v(n),
+      s && 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,
+      sort: e.sort
+    })]
+  })
+]), fe = ({ key: e, rows: s, selectRow: t, rowItem: n }) => new V({
+  cache: "table",
+  key: e,
+  items: s,
+  rowItem: (a) => n(a, t),
+  class: "divide-y divide-border"
+}), Je = M(
+  {
+    /**
+     * Initializes component data.
+     *
+     * @returns {Data}
+     */
+    setData() {
+      return new L({
+        selectedRows: [],
+        selected: !1
+      });
+    },
+    /**
+     * This will toggle all selected rows.
+     *
+     * @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);
+    },
+    /**
+     * This will update the selected state.
+     *
+     * @returns {void}
+     */
+    updateSelected() {
+      const e = this.data.get("selectedRows");
+      this.data.selected = e.length > 0;
+    },
+    /**
+     * This will get the selected rows.
+     *
+     * @returns {Array<object>}
+     */
+    getSelectedRows() {
+      return this.data.get("selectedRows");
+    },
+    /**
+     * This will update the table rows.
+     *
+     * @protected
+     * @param {boolean} selected
+     * @returns {void}
+     */
+    updateTable(e) {
+      const s = this.table.getRows();
+      s.forEach((t) => t.selected = e), this.table.setRows(s);
+    },
+    /**
+     * Handles row selection.
+     *
+     * @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);
+      this.data.selectedRows = n, this.updateSelected();
+    },
+    /**
+     * 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` }, [
+          K({ class: "w-full" }, [
+            // @ts-ignore
+            this.headers && he({ headers: this.headers, sort: (t) => this.sortRows(t) }),
+            // @ts-ignore
+            this.customHeader ?? null,
+            fe({
+              // @ts-ignore
+              key: this.key,
+              rows: e,
+              // @ts-ignore
+              selectRow: this.selectRow.bind(this),
+              // @ts-ignore
+              rowItem: this.rowItem
+            })
+          ])
+        ])
+      ]);
+    },
+    /**
+     * This will remove items from the list.
+     *
+     * @public
+     * @param {array} items
+     * @returns {void}
+     */
+    remove(e) {
+      this.table.remove(e);
+    },
+    /**
+     * This will set the items in the list.
+     *
+     * @public
+     * @param {array} rows
+     * @returns {void}
+     */
+    setRows(e) {
+      this.table.setRows(e);
+    },
+    /**
+     * This will append items to the list.
+     *
+     * @public
+     * @param {array|object} items
+     * @returns {void}
+     */
+    append(e) {
+      this.table.append(e);
+    },
+    /**
+     * This will mingle the new items with the old items.
+     *
+     * @public
+     * @param {Array<Object>} newItems
+     * @param {boolean} withDelete
+     * @returns {void}
+     */
+    mingle(e, s = !1) {
+      this.table.mingle(e, s);
+    },
+    /**
+     * This will prepend items to the list.
+     *
+     * @public
+     * @param {array|object} items
+     * @returns {void}
+     */
+    prepend(e) {
+      this.table.prepend(e);
+    },
+    /**
+     * This will remove the selected rows.
+     *
+     * @returns {void}
+     */
+    beforeDestroy() {
+      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)
+])), 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" }, [
+  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" }, [
+  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 })
+  ]),
+  be({
+    role: e.role,
+    lastSeen: e.lastSeen,
+    status: e.status
+  })
+])), Xe = u((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({
+  text: e,
+  href: s,
+  exact: t,
+  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", "");
+  }
+  /**
+   * This will configure the links.
+   */
+  beforeSetup() {
+    this.links = [];
+  }
+  /**
+   * This will render the component.
+   *
+   * @returns {object}
+   */
+  render() {
+    return S(
+      { class: `flex items-center justify-center p-2 text-muted-foreground rounded-md ${this.class || ""}` },
+      [
+        m({
+          class: "flex space-x-4",
+          map: [this.options, (t) => this.addLink(t)],
+          watch: {
+            value: ["[[path]]", k.data],
+            callBack: this.updateLinks.bind(this)
+          }
+        })
+      ]
+    );
+  }
+  /**
+   * This will update the links.
+   *
+   * @returns {void}
+   */
+  afterSetup() {
+    const t = k.data.path;
+    this.updateLinks(t);
+  }
+  /**
+   * This will update the links based on the current path.
+   *
+   * @param {string} path
+   * @returns {void}
+   */
+  updateLinks(t) {
+    let n = !1;
+    this.deactivateAllLinks();
+    for (const a of this.links) {
+      if (!a.rendered)
+        continue;
+      ve(a, a.getLinkPath(), t) ? (this.updateLink(a, !0), n = !0) : this.updateLink(a, !1);
+    }
+    !n && this.links[0] && this.updateLink(this.links[0], !0);
+  }
+  /**
+   * This will deactivate all links.
+   *
+   * @returns {void}
+   */
+  deactivateAllLinks() {
+    for (const t of this.links)
+      this.updateLink(t, !1);
+  }
+  /**
+   * This will update the link's active state.
+   *
+   * @param {object} link
+   * @param {boolean} selected
+   * @returns {void}
+   */
+  updateLink(t, n) {
+    t.update(n);
+  }
+  /**
+   * This will add a link to the navigation.
+   *
+   * @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;
+  }
+  /**
+   * This will clear the links.
+   *
+   * @returns {void}
+   */
+  beforeDestroy() {
+    this.links = [];
+  }
+}
+const et = u((e) => {
+  const s = e.margin || "m-4 ml-0";
+  return o({ class: `flex-none ${s}` }, [
+    T({
+      variant: "icon",
+      class: "back-button",
+      click: () => {
+        if (window.history.length > 2) {
+          window.history.back();
+          return;
+        }
+        e.backUrl && app.navigate(e.backUrl);
+      }
+    }, [
+      N(w.arrows.left)
+    ])
+  ]);
+});
+class W extends h {
+  constructor() {
+    super(...arguments);
+    /**
+     * @member {string} class
+     * @default ''
+     */
+    l(this, "class", "");
+  }
+  /**
+   * This will render the component.
+   *
+   * @returns {object}
+   */
+  render() {
+    return o(
+      {
+        class: this.getClassName(),
+        onSet: ["loading", {
+          loading: !0
+        }]
+      },
+      [
+        this.addBody()
+      ]
+    );
+  }
+  /**
+   * This will get the overlay className.
+   *
+   * @returns {string}
+   */
+  getClassName() {
+    return "overlay fixed top-[0px] left-0 bottom-0 right-0 flex-col bg-background z-20 lg:z-10 flex flex-auto lg:left-[64px] lg:top-0 overflow-y-auto will-change-contents " + (this.class || "");
+  }
+  /**
+  * This will setup and render the component.
+  *
+  * @param {object} container
+  * @returns {void}
+  */
+  setContainer(t) {
+    this.container = app.root;
+  }
+  /**
+   * This will setup the overlay states.
+   *
+   * @returns {object}
+   */
+  setupStates() {
+    return {
+      loading: !1
+    };
+  }
+  /**
+   * This will set the loading state.= to true.
+   *
+   * @returns {void}
+   */
+  addLoading() {
+    this.state.loading = !0;
+  }
+  /**
+   * This will set the loading state to false.
+   *
+   * @returns {void}
+   */
+  removeLoading() {
+    this.state.loading = !1;
+  }
+  /**
+   * This will add the body of the overlay.
+   *
+   * @returns {object}
+   */
+  addBody() {
+    return o({ class: "body fadeIn flex flex-auto flex-col" }, this.getContents());
+  }
+  /**
+   * This will get the body contents.
+   *
+   * @returns {array|null}
+   */
+  getContents() {
+    return this.children;
+  }
+}
+class tt extends W {
+  constructor() {
+    super(...arguments);
+    /**
+     * @member {string} class
+     * @default ''
+     */
+    l(this, "class", "");
+  }
+  /**
+   * This will stop presistence.
+   *
+   * @returns {void}
+   */
+  onCreated() {
+    this.dockSize = this.maxSize || 1024;
+  }
+  /**
+   * This will render the component.
+   *
+   * @returns {object}
+   */
+  render() {
+    const t = this.container;
+    return o(
+      {
+        onState: [
+          ["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");
+          }]
+        ]
+      },
+      [
+        this.addBody()
+      ]
+    );
+  }
+  /**
+   * This will get the docked className.
+   *
+   * @returns {string}
+   */
+  getDockedClassName() {
+    return "flex flex-auto flex-col bg-background flex will-change-contents " + (this.class || "");
+  }
+  /**
+  * This will setup and render the component.
+  *
+  * @param {object} container
+  * @returns {void}
+  */
+  setup(t) {
+    this.container = t, this.initialize();
+  }
+  /**
+   * This will setup the overlay states.
+   *
+   * @returns {object}
+   */
+  setupStates() {
+    return {
+      loading: !1,
+      docked: this.canDock()
+    };
+  }
+  /**
+   * This will check the dock size.
+   *
+   * @returns {void}
+   */
+  afterSetup() {
+    this.onResize();
+  }
+  /**
+   * This will setup the overlay events.
+   *
+   * @returns {Array<object>}
+   */
+  setupEvents() {
+    return [
+      ["resize", window, () => this.onResize()]
+    ];
+  }
+  /**
+   * This will check if the overlay can dock.
+   *
+   * @returns {boolean}
+   */
+  canDock() {
+    return window.innerWidth >= this.dockSize;
+  }
+  /**
+   * This will handle the overlay resize.
+   *
+   * @returns {void}
+   */
+  onResize() {
+    this.state.docked = this.canDock();
+  }
+  /**
+   * This will resume scrolling when the overlay is being removed.
+   *
+   * @returns {void}
+   */
+  beforeDestroy() {
+    document.documentElement.style.overflowY = "auto";
+  }
+}
+class st extends W {
+  constructor() {
+    super(...arguments);
+    /**
+     * @member {string} class
+     * @default ''
+     */
+    l(this, "class", "");
+  }
+  /**
+   * This will get the overlay type.
+   *
+   * @returns {string}
+   */
+  getClassName() {
+    return "overlay relative inline top-[0px] left-0 bottom-0 right-0 flex-col bg-background z-20 lg:left-[64px] lg:top-0 will-change-contents " + (this.class || "");
+  }
+  /**
+  * This will setup and render the component.
+  *
+  * @param {object} container
+  * @returns {void}
+  */
+  setup(t) {
+    this.container = t, this.initialize();
+  }
+}
+const Se = u(({ index: e, click: s, state: t }, n) => D({
+  class: "p-2 cursor-pointer hover:bg-muted/50",
+  onState: [
+    [t, "selectedIndex", {
+      "bg-accent": e,
+      "text-white": e
+    }]
+  ],
+  pointerdown: () => s(e)
+}, n)), Le = u(({ selectOption: e, state: s }) => m({
+  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" }, [
+  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();
+    },
+    pointerup: (s, t) => t.toggleDropdown(),
+    blur: (s, { state: t }) => setTimeout(() => t.open = !1, Ce),
+    keydown: (s) => typeof e.handleKeyDown == "function" && e.handleKeyDown(s)
+  }),
+  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)
+      return new ee({
+        cache: "dropdown",
+        parent: n,
+        button: n.input,
+        size: "xl"
+      }, [
+        Le(e)
+      ]);
+  }]
+}), nt = M(
+  {
+    /**
+     * This will set up the data object.
+     *
+     * @returns {object} - The data object.
+     */
+    setData() {
+      const e = this.options || [];
+      return new L({
+        options: e,
+        filteredOptions: e
+      });
+    },
+    /**
+     * This will set up the state object.
+     *
+     * @returns {object} - The state object.
+     */
+    state() {
+      return {
+        searchQuery: "",
+        selectedIndex: -1,
+        open: !1
+      };
+    },
+    /**
+     * This will set the selected index by query.
+     *
+     * @returns {void}
+     */
+    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);
+    },
+    /**
+     * This will filter the options.
+     *
+     * @returns {void}
+     */
+    filterOptions() {
+      const e = this.state.searchQuery.toLowerCase();
+      if (e === "" || e.length === 0) {
+        this.data.filteredOptions = this.data.options;
+        return;
+      }
+      const s = this.data.get("options");
+      this.data.filteredOptions = s.filter(
+        (t) => t.label.toLowerCase().includes(e)
+      );
+    },
+    /**
+     * This will get the selected value.
+     *
+     * @returns {object}
+     */
+    getValue() {
+      const { selectedIndex: e } = this.state;
+      return e < 0 ? null : this.data.get(`filteredOptions[${e}]`);
+    },
+    /**
+     * This will select an option.
+     *
+     * @param {number} index - The index of the option.
+     * @returns {void}
+     */
+    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);
+    },
+    /**
+        * Toggles the dropdown open state.
+        */
+    toggleDropdown() {
+      this.state.toggle("open"), this.state.open && this.setSelectedIndexByQuery();
+    },
+    /**
+     * This will handle key down events.
+     *
+     * @param {object} event - The event object.
+     * @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));
+    },
+    /**
+     * This will render the component.
+     *
+     * @returns {object} - The rendered component.
+     */
+    render() {
+      return o({ class: "relative w-full max-w-md" }, [
+        Oe({
+          // @ts-ignore
+          state: this.state,
+          // @ts-ignore
+          icon: this.icon,
+          // @ts-ignore
+          placeholder: this.placeholder,
+          // @ts-ignore
+          filterOptions: this.filterOptions.bind(this),
+          // @ts-ignore
+          handleKeyDown: this.handleKeyDown.bind(this)
+        }),
+        Be({
+          // @ts-ignore
+          state: this.state,
+          // @ts-ignore
+          setSelected: this.setSelectedIndexByQuery.bind(this),
+          // @ts-ignore
+          selectOption: this.selectOption.bind(this)
+        })
+      ]);
+    }
+  }
+), Ie = (e) => D(
+  {
+    class: "inline-flex flex-auto items-center justify-center whitespace-nowrap rounded-sm text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm",
+    dataSet: ["selected", ["state", e.value, "active"]]
+  },
+  [
+    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)
+    }, 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)] })
+]);
+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);
+  }
+  /**
+   * This will render the component.
+   *
+   * @returns {object}
+   */
+  render() {
+    const t = this.select.bind(this);
+    return o({ class: "" }, [
+      Re({
+        class: this.class,
+        options: this.options,
+        callBack: t
+      }),
+      I({
+        class: "tab-content",
+        onState: ["selected", this.updateContent.bind(this)]
+      })
+    ]);
+  }
+  /**
+   * This will get the first value.
+   *
+   * @returns {*}
+   */
+  getFirstValue() {
+    var t;
+    return (t = this.options[0]) == null ? void 0 : t.value;
+  }
+  /**
+   * This will update the component.
+   *
+   * @returns {void}
+   */
+  update() {
+    const t = this.state.get("selected");
+    this.select(null), this.select(t);
+  }
+  /**
+   * This will select a value.
+   *
+   * @param {*} value
+   * @returns {void}
+   */
+  select(t) {
+    this.state.selected = t;
+  }
+  /**
+   * This will update the content.
+   *
+   * @param {*} value
+   * @returns {object}
+   */
+  updateContent(t) {
+    const n = this.options;
+    if (!n || n.length < 1)
+      return;
+    const a = n[0];
+    for (const i of n)
+      if (i.value === t)
+        return i.layout;
+    return a.layout;
+  }
+  /**
+   * This will setup the states.
+   *
+   * @returns {object}
+   */
+  setupStates() {
+    const t = this.callBack, n = typeof t;
+    return {
+      selected: {
+        state: this.getFirstValue(),
+        callBack(a) {
+          n === "function" && t(a);
+        }
+      }
+    };
+  }
+}
+const Te = (e) => D(
+  {
+    class: "inline-flex flex-auto items-center justify-center whitespace-nowrap rounded-sm text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm",
+    dataSet: ["selected", ["state", e.value, "active"]]
+  },
+  [
+    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),
+      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)] })
+]);
+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);
+  }
+  /**
+   * This will render the component.
+   *
+   * @returns {object}
+   */
+  render() {
+    const t = this.select.bind(this);
+    return We({
+      class: this.class,
+      options: this.options,
+      callBack: t
+    });
+  }
+  /**
+   * This will select a value.
+   *
+   * @param {*} value
+   * @returns {void}
+   */
+  select(t) {
+    this.state.selected = t, typeof this.onSelect == "function" && this.onSelect(t, this.parent);
+  }
+  /**
+   * This will setup the states.
+   *
+   * @returns {object}
+   */
+  setupStates() {
+    var t;
+    return {
+      selected: ((t = this.options[0]) == null ? void 0 : t.value) || null
+    };
+  }
+}
+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({
+  text: e,
+  href: s,
+  exact: t,
+  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);
+  }
+  /**
+   * This will configure the links.
+   */
+  beforeSetup() {
+    this.links = [];
+  }
+  /**
+   * This will render the component.
+   *
+   * @returns {object}
+   */
+  render() {
+    return S({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${this.class}` }, [
+      m({
+        class: "flex flex-auto flex-row",
+        map: [this.options, (t) => this.addLink(t)],
+        watch: {
+          value: ["[[path]]", k.data],
+          callBack: this.updateLinks.bind(this)
+        }
+      })
+    ]);
+  }
+  /**
+   * This will update the links.
+   *
+   * @returns {void}
+   */
+  afterSetup() {
+    const t = k.data.path;
+    this.updateLinks(t);
+  }
+  /**
+   * This will update the links.
+   *
+   * @param {string} value
+   * @returns {void}
+   */
+  updateLinks(t) {
+    let n = !1, a = 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);
+        break;
+      }
+    n !== !0 && a && this.updateLink(a, !0);
+  }
+  /**
+      * This will deactivate all links.
+      *
+      * @returns {void}
+      */
+  deactivateAllLinks() {
+    for (const t of this.links)
+      this.updateLink(t, !1);
+  }
+  /**
+   * This will update the link.
+   *
+   * @param {object} link
+   * @param {boolean} selected
+   * @returns {void}
+   */
+  updateLink(t, n) {
+    t.update(n);
+  }
+  /**
+   * This will add a link.
+   *
+   * @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;
+  }
+  /**
+   * This will remove all the links.
+   *
+   * @returns {void}
+   */
+  beforeDestroy() {
+    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", "");
+  }
+  /**
+   * This will render the component.
+   *
+   * @returns {object}
+   */
+  render() {
+    return o({ class: "tab-panel" }, [
+      new Pe({
+        class: this.class,
+        options: this.options
+      }),
+      I({
+        class: "tab-content",
+        switch: this.addGroup()
+      })
+    ]);
+  }
+  /**
+   * This will add the group.
+   *
+   * @returns {array}
+   */
+  addGroup() {
+    let t;
+    const n = [], a = this.options;
+    for (let i = 0, r = a.length; i < r; i++)
+      t = a[i], n.push(
+        {
+          uri: t.uri || t.href,
+          component: t.component,
+          title: t.title || null,
+          persist: !0
+        }
+      );
+    return n;
+  }
+}
+export {
+  et as B,
+  de as C,
+  fe as D,
+  ue as H,
+  st as I,
+  Ze as N,
+  W as O,
+  _e as P,
+  nt as S,
+  he as T,
+  we as U,
+  qe as W,
+  ae as a,
+  C as b,
+  se as c,
+  Ge as d,
+  Ve as e,
+  oe as f,
+  ne as g,
+  re as h,
+  ce as i,
+  Je as j,
+  Xe as k,
+  tt as l,
+  at as m,
+  it as n,
+  Pe as o,
+  ot as p
+};