@base-framework/ui 1.1.14 → 1.1.16

package/dist/simple-search-input-mCUOwYbp.js

@@ -0,0 +1,1654 @@
+import { Div as r, Span as N, Button as K, OnState as J, On as $, Th as G, UseParent as et, I as st, Thead as at, Tr as nt, Table as j, P as O, Li as X, Time as ot, Ul as rt, Input as lt } from "@base-framework/atoms";
+import { Component as R, Data as P, Atom as m, DateTime as H, DataTracker as _, Jot as it } from "@base-framework/base";
+import { B as y, U as q } from "./buttons-HW55zbqy.js";
+import { Icons as S } from "./icons.es.js";
+import { TableBody as ct, DataTableBody as dt, ScrollableTableBody as ht, List as ut } from "@base-framework/organisms";
+import { I as ft, C as mt, c as gt } from "./image-BhZbKYDj.js";
+const yt = (t, e) => {
+  const s = t ? t.getBoundingClientRect() : { top: 0, bottom: 0, left: 0 }, a = e.getBoundingClientRect(), n = 10, o = globalThis.scrollX, c = globalThis.scrollY;
+  let l = s.left + o, u = s.bottom + c;
+  const f = globalThis.innerHeight - s.bottom, g = s.top;
+  return l + a.width > globalThis.innerWidth && (l = globalThis.innerWidth - a.width - n), f < a.height && g > f ? u = s.top + c - a.height - n : f < a.height && (u = s.bottom + c - (a.height - f) - n), { x: l, y: u };
+};
+class wt extends R {
+  /**
+   * This will set up the data.
+   *
+   * @returns {object}
+   */
+  setData() {
+    const e = this.parent.data || new P();
+    return e.set({
+      position: { x: 0, y: 0 }
+    }), e;
+  }
+  /**
+   * This will get the class size.
+   *
+   * @returns {string}
+   */
+  getSize() {
+    switch (this.size || "lg") {
+      // @ts-ignore
+      case "sm":
+        return "w-48";
+      // @ts-ignore
+      case "md":
+        return "w-64";
+      case "lg":
+        return "w-[250px]";
+      // @ts-ignore
+      case "xl":
+        return "w-96";
+      // @ts-ignore
+      case "2xl":
+        return "w-[400px]";
+      // @ts-ignore
+      case "fit":
+        return "w-fit";
+      // @ts-ignore
+      case "full":
+        return "w-full";
+    }
+  }
+  /**
+   * This will render the modal component.
+   *
+   * @returns {object}
+   */
+  render() {
+    const e = this.getSize();
+    return r({
+      class: `absolute inset-auto fadeIn mt-2 rounded-md p-0 shadow-lg bg-popover min-h-12 backdrop:bg-transparent text-inherit r z-30 ${e}`,
+      popover: "manual",
+      toggle: (s, { state: a }) => s.newState === "closed" ? a.open = !1 : null,
+      style: "top: [[position.y]]px; left: [[position.x]]px"
+      // @ts-ignore
+    }, this.children);
+  }
+  /**
+   * This will setup the states.
+   *
+   * @returns {object}
+   */
+  setupStates() {
+    return {
+      open: {
+        id: this.parent.getId(),
+        callBack: (a) => {
+          this.state.open === !1 && this.destroy();
+        }
+      }
+    };
+  }
+  /**
+   * Updates the dropdown position.
+   *
+   * @returns {void}
+   */
+  updatePosition() {
+    const e = this.button ?? null, s = this.panel, a = yt(e, s);
+    this.data.position = a;
+  }
+  /**
+   * This will run after the setup.
+   *
+   * @returns {void}
+   */
+  afterSetup() {
+    this.panel.showPopover(), this.updatePosition();
+  }
+  /**
+   * This will check if the element clicked was in the
+   * component of the button.
+   *
+   * @param {object} element
+   * @returns {boolean}
+   */
+  isOutsideClick(e) {
+    return !this.panel.contains(e) && this.button && !this.button.contains(e);
+  }
+  /**
+   * This will set up the events.
+   *
+   * @returns {array}
+   */
+  setupEvents() {
+    return [
+      ["click", document, (e) => {
+        this.isOutsideClick(e.target) && (this.state.open = !1);
+      }],
+      ["resize", globalThis, (e) => this.updatePosition()],
+      ["scroll", document, (e) => this.updatePosition()]
+    ];
+  }
+  /**
+   * This will override the set up to use the app shell.
+   *
+   * @param {object} container
+   */
+  setContainer(e) {
+    this.container = app.root;
+  }
+  /**
+   * This will hide the popover before destroying.
+   *
+   * @returns {void}
+   */
+  beforeDestroy() {
+    this.panel.hidePopover();
+  }
+}
+const xt = m(({ src: t, alt: e }) => !t || t.indexOf(".") === -1 && t.indexOf("[[") === -1 ? null : ft({
+  src: t,
+  alt: e,
+  class: "rounded-full"
+})), bt = (t) => t && (Array.isArray(t) && (t = t.join(" ")), typeof t != "string" && (t = String(t)), t.split(" ").map((e) => e.charAt(0)).join("").toUpperCase()), V = (t) => !t || t.length < 2 ? t : bt(t), Dt = (t) => N([t, (e, s) => {
+  s.textContent = V(e);
+}]), L = {
+  xs: "h-6 w-6",
+  sm: "h-8 w-8",
+  md: "h-12 w-12",
+  lg: "h-16 w-16",
+  xl: "h-24 w-24",
+  "2xl": "h-32 w-32",
+  "3xl": "h-48 w-48",
+  "4xl": "h-64 w-64",
+  default: "h-12 w-12"
+}, U = {
+  xs: "text-[7px]",
+  sm: "text-xs",
+  md: "text-base",
+  lg: "text-xl",
+  xl: "text-2xl",
+  "2xl": "text-3xl",
+  "3xl": "text-4xl",
+  "4xl": "text-5xl",
+  default: "text-base"
+}, pt = (t) => L[t] || L.default, vt = (t) => U[t] || U.default, kt = (t, e = null, s = "md") => {
+  const a = V(t), n = vt(s);
+  return r(
+    {
+      class: `
+			flex items-center justify-center w-full h-full rounded-full
+			bg-muted text-muted-foreground font-medium
+			${n}
+		`
+    },
+    [
+      e ? Dt(e) : N({ class: "uppercase" }, a)
+    ]
+  );
+}, St = m(({ src: t, alt: e, fallbackText: s, watcherFallback: a, size: n }) => {
+  const o = pt(n);
+  return r(
+    {
+      class: `relative flex items-center justify-center ${o}`
+    },
+    [
+      xt({ src: t, alt: e }),
+      kt(s, a, n)
+    ]
+  );
+}), Ct = ({ currentMonth: t, currentYear: e, onSelect: s }) => r(
+  { class: "grid grid-cols-3 gap-2" },
+  H.monthNames.map(
+    (a, n) => y(
+      {
+        click: (o) => {
+          o.preventDefault(), o.stopPropagation(), s(n);
+        },
+        variant: t === n ? "primary" : "ghost",
+        "aria-label": `Select ${a} ${e}`
+      },
+      a.substring(0, 3)
+    )
+  )
+), b = (t) => (t *= 1, t < 10 ? `0${t}` : String(t)), Mt = (t) => (t.indexOf("T") === -1 && t.indexOf(" ") === -1 && (t += "T00:00:01"), t.replace(" ", "T"), t), p = (t, e, s) => `${t}-${b(e + 1)}-${b(s)}`, It = (t) => t ? "bg-accent text-primary" : "", Tt = (t) => t ? "text-muted-foreground opacity-50" : "", $t = (t, e) => t === e, Ot = (t, e) => $t(t, e) ? "bg-primary text-primary-foreground" : "", Rt = (t, e, s, a) => {
+  const n = Ot(e, a);
+  return n || (t ? It(t) : s ? Tt(s) : "text-foreground");
+}, Y = (t) => {
+  const {
+    day: e,
+    currentDate: s,
+    date: a,
+    isToday: n,
+    isOutsideMonth: o,
+    select: c,
+    disabled: l
+  } = t;
+  return K(
+    {
+      class: `
+				flex items-center justify-center h-9 w-auto p-0 font-normal text-sm rounded-md cursor-pointer
+				${Rt(n, s, o, a)}
+				hover:bg-muted/50 hover:text-muted-foreground focus:z-10
+                disabled:pointer-events-none disabled:opacity-50
+			`,
+      disabled: l || e === null,
+      "aria-label": e ? `Day ${e}` : null,
+      // Only call select if it's not disabled.
+      click: () => !l && c(a)
+    },
+    e.toString()
+  );
+}, z = (t, e, s, a) => t === a.date && e === a.month && s === a.year, Pt = (t, e, s, a = !1) => {
+  const { year: n, month: o } = t, c = p(n, o, t.date), l = new Date(n, o, 1).getDay(), u = new Date(n, o + 1, 0).getDate(), f = new Date(n, o, 0).getDate(), g = [], C = o === 0 ? 11 : o - 1, v = o === 0 ? n - 1 : n;
+  for (let i = l - 1; i >= 0; i--) {
+    const h = f - i, w = z(h, C, v, e), x = new Date(v, C, h) < new Date(e.year, e.month, e.date), D = a && x;
+    g.push(
+      Y({
+        day: h,
+        currentDate: c,
+        date: p(v, C, h),
+        isToday: w,
+        isOutsideMonth: !0,
+        select: s,
+        disabled: D
+      })
+    );
+  }
+  for (let i = 1; i <= u; i++) {
+    const h = z(i, o, n, e), w = new Date(n, o, i) < new Date(e.year, e.month, e.date), x = a && w;
+    g.push(
+      Y({
+        day: i,
+        currentDate: c,
+        date: p(n, o, i),
+        isToday: h,
+        isOutsideMonth: !1,
+        select: s,
+        disabled: x
+      })
+    );
+  }
+  const k = o === 11 ? 0 : o + 1, B = o === 11 ? n + 1 : n, d = (7 - g.length % 7) % 7;
+  for (let i = 1; i <= d; i++) {
+    const h = z(i, k, B, e), w = new Date(B, k, i) < new Date(e.year, e.month, e.date), x = a && w;
+    g.push(
+      Y({
+        day: i,
+        currentDate: c,
+        date: p(B, k, i),
+        isToday: h,
+        isOutsideMonth: !0,
+        select: s,
+        disabled: x
+      })
+    );
+  }
+  return g;
+}, E = ({ label: t, click: e }) => y(
+  {
+    class: `
+			inline-flex items-center justify-center h-7 w-7 bg-transparent p-0
+			opacity-50 hover:opacity-100 text-muted-foreground absolute
+			${t === "Previous" ? "left-1" : "right-1"}
+			focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
+		  `,
+    click: e,
+    "aria-label": `${t} month`,
+    variant: "icon",
+    icon: t === "Previous" ? S.chevron.single.left : S.chevron.single.right
+  }
+), Bt = ({ onMonthClick: t, onYearClick: e, next: s, previous: a }) => r({ class: "flex items-center justify-center gap-x-2 relative min-h-12 text-sm font-medium" }, [
+  y({ click: t, variant: "ghost", "aria-label": "Select month" }, "[[monthName]]"),
+  y({ click: e, variant: "ghost", "aria-label": "Select year" }, "[[current.year]]"),
+  E({ label: "Previous", click: a }),
+  E({ label: "Next", click: s })
+]), Nt = (t) => r(
+  { class: "flex items-center justify-center h-9 w-auto text-[0.8rem] font-normal text-muted-foreground" },
+  t
+), Ht = () => ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(Nt), Yt = (t) => r({ class: "rdp flex flex-auto flex-col w-full gap-y-1" }, [
+  Bt({
+    onMonthClick: t.onMonthClick,
+    onYearClick: t.onYearClick,
+    next: t.next,
+    previous: t.previous
+  }),
+  r({
+    class: "flex flex-auto flex-col w-full",
+    onSet: [
+      "currentDate",
+      () => [
+        r({ class: "grid grid-cols-7" }, Ht()),
+        r(
+          { class: "grid grid-cols-7" },
+          Pt(
+            t.current,
+            t.today,
+            t.select,
+            t.blockPriorDates
+          )
+        )
+      ]
+    ]
+  })
+]), zt = ({ currentMonth: t, currentYear: e, onSelect: s }) => {
+  const a = e - 50, n = Array.from({ length: 101 }, (o, c) => a + c);
+  return r(
+    { class: "grid grid-cols-4 gap-2 overflow-y-auto max-h-72" },
+    n.map(
+      (o) => y(
+        {
+          click: (c) => {
+            c.preventDefault(), c.stopPropagation(), s(o);
+          },
+          variant: o === e ? "primary" : "ghost",
+          "aria-label": `Select ${o}`
+        },
+        o.toString()
+      )
+    )
+  );
+};
+class De extends R {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.selectedDate = null, this.selectedCallBack = null, this.blockPriorDates = !1;
+  }
+  /**
+   * This will get the selected data.
+   *
+   * @param {object} today
+   * @returns {Date}
+   */
+  getSelectedDate(e) {
+    const s = this.selectedDate ? new Date(Mt(this.selectedDate)) : e;
+    return new Date(s.getFullYear(), s.getMonth(), s.getDate());
+  }
+  /**
+   * This will set up the data for the calendar.
+   *
+   * @returns {Data}
+   */
+  setData() {
+    const e = /* @__PURE__ */ new Date(), s = this.getSelectedDate(e), a = s.getMonth();
+    return new P({
+      monthName: this.getMonthName(a),
+      currentDate: `${s.getFullYear()}-${a + 1}-${s.getDate()}`,
+      current: {
+        date: s.getDate(),
+        year: s.getFullYear(),
+        month: a
+      },
+      today: {
+        date: e.getDate(),
+        month: e.getMonth(),
+        year: e.getFullYear()
+      }
+    });
+  }
+  /**
+   * This will set up the states for the calendar.
+   *
+   * @return {object}
+   */
+  setupStates() {
+    return {
+      view: "calendar"
+      // 'calendar' | 'months' | 'years'
+    };
+  }
+  /**
+   * This will get the name of the month.
+   *
+   * @param {number} month
+   * @returns {string}
+   */
+  getMonthName(e) {
+    return H.monthNames[e];
+  }
+  /**
+   * This will go to the previous month.
+   *
+   * @returns {void}
+   */
+  goToPreviousMonth() {
+    const e = this.data;
+    let s = e.current.month, a = e.current.year;
+    s === 0 ? (s = 11, a--) : s--, this.setCurrentDate(s, a);
+  }
+  /**
+   * This will go to the next month.
+   *
+   * @returns {void}
+   */
+  goToNextMonth() {
+    const e = this.data;
+    let s = e.current.month, a = e.current.year;
+    s === 11 ? (s = 0, a++) : s++, this.setCurrentDate(s, a);
+  }
+  /**
+   * This will set the current month and year.
+   *
+   * @param {number} month
+   * @param {number} year
+   * @param {number} [date=null]
+   * @returns {void}
+   */
+  setCurrentDate(e, s, a = null) {
+    const n = this.data;
+    n.current.month = e, n.current.year = s, typeof a == "number" && (n.current.date = b(a)), n.currentDate = `${s}-${b(e + 1)}-${n.current.date}`, n.monthName = this.getMonthName(e);
+  }
+  /**
+   * This will select a date.
+   *
+   * @param {string} date
+   * @returns {void}
+   */
+  selectDate(e) {
+    const s = /* @__PURE__ */ new Date(e + "T00:00:00");
+    this.setCurrentDate(s.getMonth(), s.getFullYear(), s.getDate()), typeof this.selectedCallBack == "function" && this.selectedCallBack(this.data.currentDate);
+  }
+  /**
+   * This will render the calendar.
+   *
+   * @returns {object}
+   */
+  render() {
+    return r({ class: "calendar-container p-3 rounded-md border min-w-80" }, [
+      J("view", (e) => {
+        switch (e) {
+          case "months":
+            return Ct(
+              {
+                currentMonth: this.data.current.month,
+                currentYear: this.data.current.year,
+                onSelect: (s) => {
+                  this.setCurrentDate(s, this.data.current.year), this.state.view = "calendar";
+                }
+              }
+            );
+          case "years":
+            return zt(
+              {
+                currentMonth: this.data.current.month,
+                currentYear: this.data.current.year,
+                onSelect: (s) => {
+                  this.setCurrentDate(this.data.current.month, s), this.state.view = "calendar";
+                }
+              }
+            );
+          default:
+            return Yt({
+              current: this.data.current,
+              today: this.data.today,
+              select: (s) => this.selectDate(s),
+              next: () => this.goToNextMonth(),
+              previous: () => this.goToPreviousMonth(),
+              blockPriorDates: this.blockPriorDates || !1,
+              onMonthClick: (s) => {
+                s.preventDefault(), s.stopPropagation(), this.state.view = "months";
+              },
+              onYearClick: (s) => {
+                s.preventDefault(), s.stopPropagation(), this.state.view = "years";
+              }
+            });
+        }
+      })
+    ]);
+  }
+}
+const W = ({ label: t, click: e }) => y(
+  {
+    class: `
+			inline-flex items-center justify-center h-7 w-7 bg-transparent p-0
+			opacity-50 hover:opacity-100 text-muted-foreground absolute
+			${t === "Previous" ? "left-1" : "right-1"}
+			focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
+		  `,
+    click: e,
+    "aria-label": `${t} month`,
+    variant: "icon",
+    icon: t === "Previous" ? S.chevron.single.left : S.chevron.single.right
+  }
+), jt = ({ onMonthClick: t, onYearClick: e, next: s, previous: a }) => r({ class: "flex items-center justify-center gap-x-2 relative min-h-12 text-sm font-medium" }, [
+  y({ click: t, variant: "ghost", "aria-label": "Select month" }, "[[monthName]]"),
+  y({ click: e, variant: "ghost", "aria-label": "Select year" }, "[[current.year]]"),
+  W({ label: "Previous", click: a }),
+  W({ label: "Next", click: s })
+]), At = (t) => r({ class: "h-9 flex items-center justify-center font-medium" }, t), Ft = () => r(
+  { class: "grid grid-cols-7 gap-1 text-center text-xs font-medium text-muted-foreground mb-2" },
+  ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(At)
+), Lt = ({ day: t, iso: e, disabled: s, isStart: a, isEnd: n, isBetween: o, isOtherMonth: c, click: l }) => {
+  let u = "ghost", f = "";
+  return a || n ? (u = "default", f = "bg-primary text-primary-foreground hover:bg-primary/90") : o && (f = "bg-accent text-accent-foreground hover:bg-accent/80"), s && (f += " opacity-50 cursor-not-allowed"), c && (f += " text-muted-foreground opacity-50"), y(
+    {
+      class: `flex items-center justify-center p-0 text-sm font-medium rounded-md transition-colors ${f}`,
+      variant: u,
+      disabled: s,
+      click: (g) => {
+        g.preventDefault(), g.stopPropagation(), s || l();
+      }
+    },
+    t.toString()
+  );
+}, Ut = ({ today: t, current: e, blockPriorDates: s, onDateClick: a }) => {
+  const { start: n, end: o } = e, c = new Date(e.year, e.month, 1).getDay(), l = new Date(e.year, e.month + 1, 0).getDate(), u = [], f = e.month === 0 ? 11 : e.month - 1, g = e.month === 0 ? e.year - 1 : e.year, C = new Date(g, f + 1, 0).getDate(), v = e.month === 11 ? 0 : e.month + 1, k = e.month === 11 ? e.year + 1 : e.year;
+  for (let d = c - 1; d >= 0; d--) {
+    const i = C - d, h = p(g, f, i), w = new Date(g, f, i), x = new Date(t.year, t.month, t.date), D = w < x, M = s && D, I = n === h, T = o === h, tt = n && o && h > n && h < o;
+    u.push({
+      day: i,
+      iso: h,
+      disabled: M,
+      isStart: I,
+      isEnd: T,
+      isBetween: tt,
+      isOtherMonth: !0,
+      click: () => a(h)
+    });
+  }
+  for (let d = 1; d <= l; d++) {
+    const i = p(e.year, e.month, d), h = new Date(e.year, e.month, d), w = new Date(t.year, t.month, t.date), x = h < w, D = s && x, M = n === i, I = o === i, T = n && o && i > n && i < o;
+    u.push({
+      day: d,
+      iso: i,
+      disabled: D,
+      isStart: M,
+      isEnd: I,
+      isBetween: T,
+      isOtherMonth: !1,
+      click: () => {
+        a(i);
+      }
+    });
+  }
+  const F = (7 - u.length % 7) % 7;
+  for (let d = 1; d <= F; d++) {
+    const i = p(k, v, d), h = new Date(k, v, d), w = new Date(t.year, t.month, t.date), x = h < w, D = s && x, M = n === i, I = o === i, T = n && o && i > n && i < o;
+    u.push({
+      day: d,
+      iso: i,
+      disabled: D,
+      isStart: M,
+      isEnd: I,
+      isBetween: T,
+      isOtherMonth: !0,
+      click: () => a(i)
+    });
+  }
+  return r(
+    { class: "grid grid-cols-7 gap-1" },
+    u.map(
+      (d, i) => Lt({
+        day: d.day,
+        iso: d.iso,
+        disabled: d.disabled,
+        isStart: d.isStart,
+        isEnd: d.isEnd,
+        isBetween: d.isBetween,
+        isOtherMonth: d.isOtherMonth,
+        click: d.click
+      })
+    )
+  );
+}, Et = m((t, e) => r({ class: "flex flex-auto flex-col" }, [
+  jt({
+    onMonthClick: t.onMonthClick,
+    onYearClick: t.onYearClick,
+    next: t.next,
+    previous: t.previous
+  }),
+  r({
+    class: "flex flex-auto flex-col w-full",
+    onSet: [
+      "currentDate",
+      () => [
+        Ft(),
+        Ut({
+          today: t.today,
+          current: t.current,
+          blockPriorDates: t.blockPriorDates,
+          onDateClick: t.onDateClick
+        })
+      ]
+    ]
+  })
+])), Wt = ({ currentMonth: t, currentYear: e, onSelect: s }) => r(
+  { class: "grid grid-cols-3 gap-2" },
+  H.monthNames.map(
+    (a, n) => y(
+      {
+        click: (o) => {
+          o.preventDefault(), o.stopPropagation(), s(n);
+        },
+        variant: t === n ? "primary" : "ghost",
+        "aria-label": `Select ${a} ${e}`
+      },
+      a.substring(0, 3)
+    )
+  )
+), Qt = ({ start: t, end: e, selecting: s, onSelectStart: a, onSelectEnd: n }) => r({ class: "flex gap-x-2 mb-4" }, [
+  $("selecting", (o) => y({
+    click: a,
+    variant: o === "start" ? "primary" : "outline",
+    class: "flex-1"
+  }, [
+    r({ class: "font-medium" }, Q("current.start", "Start Date"))
+  ])),
+  $("selecting", (o) => y({
+    click: n,
+    variant: o === "end" ? "primary" : "outline",
+    class: "flex-1"
+  }, [
+    r({ class: "font-medium" }, Q("current.end", "End Date"))
+  ]))
+]), Q = (t, e) => [`[[${t}]]`, (s) => s == null ? e : Kt(s)], Kt = (t) => {
+  const e = /* @__PURE__ */ new Date(t + "T00:00:00"), s = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], a = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+  return `${s[e.getDay()]}, ${e.getDate()} ${a[e.getMonth()]}`;
+}, Jt = ({ currentYear: t, onSelect: e }) => {
+  const s = t - 50, a = Array.from({ length: 101 }, (n, o) => s + o);
+  return r(
+    { class: "grid grid-cols-4 gap-2 overflow-y-auto max-h-72" },
+    a.map(
+      (n) => y(
+        {
+          click: (o) => {
+            o.preventDefault(), o.stopPropagation(), e(n);
+          },
+          variant: n === t ? "primary" : "ghost",
+          "aria-label": `Select ${n}`
+        },
+        n.toString()
+      )
+    )
+  );
+};
+class pe extends R {
+  /**
+   * Declare compiler props.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.startDate = null, this.endDate = null, this.onRangeSelect = null, this.blockPriorDates = !1;
+  }
+  /**
+   * Initialize reactive data for today and current view.
+   *
+   * @returns {Data}
+   */
+  setData() {
+    const e = /* @__PURE__ */ new Date(), s = this.startDate ? /* @__PURE__ */ new Date(this.startDate + "T00:00:00") : e, a = s.getMonth(), n = s.getFullYear();
+    return new P({
+      today: {
+        date: e.getDate(),
+        month: e.getMonth(),
+        year: e.getFullYear()
+      },
+      monthName: this.getMonthName(a),
+      currentData: `${s.getFullYear()}-${b(s.getMonth() + 1)}-${b(s.getDate())}`,
+      current: {
+        date: e.getDate(),
+        month: a,
+        year: n,
+        start: this.startDate,
+        end: this.endDate
+      },
+      selecting: "start"
+    });
+  }
+  /**
+   * This will get the name of the month.
+   *
+   * @param {number} month
+   * @returns {string}
+   */
+  getMonthName(e) {
+    return H.monthNames[e];
+  }
+  /**
+   * Initialize component state.
+   *
+   * @returns {{view:string}}
+   */
+  setupStates() {
+    return {
+      view: "calendar"
+      // 'calendar', 'months', or 'years'
+    };
+  }
+  /**
+   * Handle a date cell click.
+   *
+   * @param {string} isoDate
+   * @returns {void}
+   */
+  handleClick(e) {
+    if (this.data.selecting === "start") {
+      this.data.current.start = e, this.data.current.end = null, this.data.selecting = "end";
+      const s = /* @__PURE__ */ new Date(e + "T00:00:00");
+      this.setCurrent({
+        month: s.getMonth(),
+        year: s.getFullYear(),
+        date: s.getDate()
+      });
+    } else {
+      this.data.current.start && e < this.data.current.start ? (this.data.current.end = this.data.current.start, this.data.current.start = e) : this.data.current.end = e, this.data.selecting = "start";
+      const s = /* @__PURE__ */ new Date(e + "T00:00:00");
+      this.setCurrent({
+        month: s.getMonth(),
+        year: s.getFullYear(),
+        date: s.getDate()
+      }), typeof this.onRangeSelect == "function" && this.onRangeSelect(this.data.current.start, this.data.current.end);
+    }
+  }
+  /**
+   * Update current month/year in data.
+   *
+   * @param {object} obj
+   * @returns {void}
+   */
+  setCurrent({ month: e, year: s, date: a = null }) {
+    const n = this.data.current;
+    n.month = (e + 12) % 12, n.year = s + (e < 0 ? -1 : e > 11 ? 1 : 0), a !== null && (n.date = a), this.data.monthName = this.getMonthName(n.month), this.data.currentDate = `${s}-${b(e + 1)}-${b(n.date)}`;
+  }
+  /**
+   * Render the range calendar.
+   *
+   * @returns {object}
+   */
+  render() {
+    const { today: e, current: s, selecting: a } = this.data, { start: n, end: o } = s;
+    return r({ class: "range-calendar border border-border rounded-lg shadow-md p-4 w-full max-w-sm min-w-80" }, [
+      Qt({
+        start: n,
+        end: o,
+        selecting: a,
+        onSelectStart: (c) => {
+          c.preventDefault(), c.stopPropagation(), this.data.selecting = "start";
+        },
+        onSelectEnd: (c) => {
+          c.preventDefault(), c.stopPropagation(), this.data.selecting = "end";
+        }
+      }),
+      J("view", (c) => {
+        switch (c) {
+          case "months":
+            return Wt(
+              {
+                currentMonth: s.month,
+                currentYear: s.year,
+                onSelect: (l) => {
+                  this.setCurrent({ month: l, year: s.year }), this.state.view = "calendar";
+                }
+              }
+            );
+          case "years":
+            return Jt(
+              {
+                currentYear: s.year,
+                onSelect: (l) => {
+                  this.setCurrent({ month: s.month, year: l }), this.state.view = "calendar";
+                }
+              }
+            );
+          default:
+            return Et({
+              monthName: this.data.monthName,
+              year: s.year,
+              today: e,
+              current: s,
+              blockPriorDates: this.blockPriorDates,
+              onDateClick: (l) => this.handleClick(l),
+              onMonthClick: (l) => {
+                l.preventDefault(), l.stopPropagation(), this.state.view = "months";
+              },
+              onYearClick: (l) => {
+                l.preventDefault(), l.stopPropagation(), this.state.view = "years";
+              },
+              next: () => {
+                const l = this.data.current, u = l.month === 11 ? { month: 0, year: l.year + 1 } : { month: l.month + 1, year: l.year };
+                this.setCurrent(u);
+              },
+              previous: () => {
+                const l = this.data.current, u = l.month === 0 ? { month: 11, year: l.year - 1 } : { month: l.month - 1, year: l.year };
+                this.setCurrent(u);
+              }
+            });
+        }
+      })
+    ]);
+  }
+}
+m((t, e) => ({
+  class: "flex items-center px-4 py-2",
+  ...t,
+  children: e
+}));
+m(({ value: t, label: e }) => K({
+  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: a }) => a.performance = t
+}, e));
+const Gt = (t, e) => {
+  const s = t.toggleAllSelectedRows();
+  e.state.checked = !s;
+}, Xt = (t) => G({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class || ""}` }, [
+  et((e) => new mt({ class: "mr-2", onChange: (s, a) => Gt(e, a) }))
+]), _t = ({ align: t, sortable: e, key: s, label: a, sort: n, class: o }) => {
+  const c = t || "justify-start";
+  return G({
+    class: `cursor-pointer py-3 px-4 text-base ${o || ""}`,
+    click: e && (() => n(s))
+  }, [
+    r({ class: `flex flex-auto w-full items-center ${c}` }, [
+      N(a),
+      e && st({ class: "ml-2", html: S.arrows.upDown })
+    ])
+  ]);
+}, A = (t) => at([
+  nt({
+    class: "text-muted-foreground border-b",
+    map: [
+      t.headers,
+      (e) => e.label === "checkbox" ? Xt({ toggle: t.toggle }) : _t({
+        align: e.align,
+        sortable: e.sortable,
+        key: e.key,
+        label: e.label,
+        sort: t.sort
+      })
+    ]
+  })
+]), qt = ({ key: t, rows: e, selectRow: s, rowItem: a, emptyState: n, skeleton: o, columnCount: c }) => new ct({
+  cache: "list",
+  key: t,
+  items: e,
+  rowItem: (l) => a(l, s),
+  class: "divide-y divide-border",
+  emptyState: n,
+  skeleton: o,
+  columnCount: c
+});
+class Z extends R {
+  /**
+   * Initializes component data.
+   *
+   * @returns {Data}
+   */
+  setData() {
+    let e = this.rows && this.rows.length > 0;
+    return (this.loadMoreItems || this.tableData) && !e && (e = null), new P({
+      selectedRows: [],
+      // @ts-ignore
+      hasItems: e,
+      selected: !1
+    });
+  }
+  /**
+   * This will toggle all selected rows.
+   *
+   * @returns {boolean}
+   */
+  toggleAllSelectedRows() {
+    const e = this.list.getRows(), s = this.data.selectedRows.length === e.length, a = s ? [] : e;
+    return this.data.selectedRows = a, this.updateSelected(), this.updateTable(!s), 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.list.getRows();
+    s.forEach((a) => a.selected = e), this.list.setRows(s);
+  }
+  /**
+   * Handles row selection.
+   *
+   * @param {object} row
+   */
+  selectRow(e) {
+    const s = e.selected ?? !1;
+    e.selected = !s;
+    const a = this.data.get("selectedRows"), n = e.selected ? [...a, e] : a.filter((o) => o !== e);
+    this.data.selectedRows = n, this.updateSelected();
+  }
+  /**
+   * Gets the number of header columns.
+   *
+   * @returns {number}
+   */
+  getHeaderColCount() {
+    return this.customHeader ? this.customHeader?.children[0]?.children?.length : this.headers ? this.headers.length : 3;
+  }
+  /**
+   * Renders the DataTable component.
+   *
+   * @returns {object}
+   */
+  render() {
+    const e = this.border !== !1 ? "border" : "", s = this.getHeaderColCount();
+    return r({ class: "w-full flex flex-auto flex-col" }, [
+      $("hasItems", (a) => a === !1 && this.emptyState ? this.emptyState() : null),
+      r({ class: `w-full rounded-md ${e} overflow-x-auto`, onSet: ["hasItems", { hidden: !1 }] }, [
+        j({ class: "w-full" }, [
+          // @ts-ignore
+          this.headers && A({ headers: this.headers, sort: (a) => this.sortRows(a) }),
+          // @ts-ignore
+          this.customHeader ?? null,
+          qt({
+            // @ts-ignore
+            key: this.key,
+            // @ts-ignore
+            rows: this.rows,
+            // @ts-ignore
+            selectRow: this.selectRow.bind(this),
+            // @ts-ignore
+            rowItem: this.rowItem,
+            // @ts-ignore
+            emptyState: this.emptyState,
+            // @ts-ignore
+            skeleton: this.skeleton,
+            columnCount: s
+          })
+        ])
+      ])
+    ]);
+  }
+  /**
+   * This will remove items from the list.
+   *
+   * @public
+   * @param {array} items
+   * @returns {void}
+   */
+  remove(e) {
+    this.list.remove(e);
+  }
+  /**
+   * This will set the items in the list.
+   *
+   * @public
+   * @param {array} rows
+   * @returns {void}
+   */
+  setRows(e) {
+    this.list.setRows(e);
+  }
+  /**
+   * This will append items to the list.
+   *
+   * @public
+   * @param {array|object} items
+   * @returns {void}
+   */
+  append(e) {
+    this.list.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.list.mingle(e, s);
+  }
+  /**
+   * This will prepend items to the list.
+   *
+   * @public
+   * @param {array|object} items
+   * @returns {void}
+   */
+  prepend(e) {
+    this.list.prepend(e);
+  }
+  /**
+   * This will remove the selected rows.
+   *
+   * @returns {void}
+   */
+  beforeDestroy() {
+    this.data.selectedRows = [];
+  }
+}
+const Vt = (t) => new dt({
+  cache: "list",
+  loadMoreItems: t.loadMoreItems,
+  offset: t.offset,
+  limit: t.limit,
+  key: t.key,
+  tableData: t.tableData,
+  items: t.items,
+  rowItem: (e) => t.rowItem(e, t.selectRow),
+  class: "divide-y divide-border",
+  skeleton: t.skeleton,
+  columnCount: t.columnCount
+});
+class Zt extends Z {
+  /**
+   * Renders the DataTable component.
+   *
+   * @returns {object}
+   */
+  render() {
+    const e = this.border !== !1 ? "border" : "", s = this.getHeaderColCount();
+    return r({ class: "w-full flex flex-auto flex-col" }, [
+      $("hasItems", (a) => a === !1 && this.emptyState ? this.emptyState() : null),
+      r({ class: `w-full rounded-md ${e} overflow-x-auto`, onSet: ["hasItems", { hidden: !1 }] }, [
+        j({ class: "w-full" }, [
+          // @ts-ignore
+          this.headers && A({ headers: this.headers, sort: (a) => this.sortRows(a) }),
+          // @ts-ignore
+          this.customHeader ?? null,
+          Vt({
+            // @ts-ignore
+            loadMoreItems: this.loadMoreItems,
+            // @ts-ignore
+            offset: this.offset,
+            // @ts-ignore
+            limit: this.limit,
+            // @ts-ignore
+            class: this.class,
+            // @ts-ignore
+            tableData: this.tableData,
+            // @ts-ignore
+            key: this.key,
+            // @ts-ignore
+            items: this.rows,
+            // @ts-ignore
+            selectRow: this.selectRow.bind(this),
+            // @ts-ignore
+            rowItem: this.rowItem,
+            // @ts-ignore
+            skeleton: this.skeleton,
+            columnCount: s
+          })
+        ])
+      ])
+    ]);
+  }
+  /**
+   * Refreshes the list.
+   *
+   * @returns {void}
+   */
+  refresh() {
+    this.list.refresh();
+  }
+}
+const ve = m((t) => new Zt(
+  {
+    cache: t.cache ?? "list",
+    tableData: t.data,
+    loadMoreItems: t.loadMoreItems,
+    offset: t.offset,
+    limit: t.limit,
+    class: t.class,
+    key: t.key,
+    rows: t.rows,
+    rowItem: t.rowItem,
+    headers: t.headers,
+    customHeader: t.customHeader,
+    border: t.border,
+    emptyState: t.emptyState,
+    skeleton: t.skeleton
+  }
+)), te = (t) => new ht({
+  cache: "list",
+  scrollContainer: t.scrollContainer,
+  loadMoreItems: t.loadMoreItems,
+  offset: t.offset,
+  limit: t.limit,
+  key: t.key,
+  tableData: t.tableData,
+  items: t.items,
+  rowItem: (e) => t.rowItem(e, t.selectRow),
+  class: "divide-y divide-border",
+  skeleton: t.skeleton,
+  columnCount: t.columnCount
+});
+class ee extends Z {
+  /**
+   * Renders the DataTable component.
+   *
+   * @returns {object}
+   */
+  render() {
+    const e = this.border !== !1 ? "border" : "", s = this.getHeaderColCount();
+    return r({ class: "w-full flex flex-auto flex-col" }, [
+      $("hasItems", (a) => a === !1 && this.emptyState ? this.emptyState() : null),
+      r({ class: `w-full rounded-md ${e} overflow-x-auto`, onSet: ["hasItems", { hidden: !1 }] }, [
+        j({ class: "w-full" }, [
+          // @ts-ignore
+          this.headers && A({ headers: this.headers, sort: (a) => this.sortRows(a) }),
+          // @ts-ignore
+          this.customHeader ?? null,
+          te({
+            // @ts-ignore
+            scrollContainer: this.scrollContainer,
+            // @ts-ignore
+            loadMoreItems: this.loadMoreItems,
+            // @ts-ignore
+            offset: this.offset,
+            // @ts-ignore
+            limit: this.limit,
+            // @ts-ignore
+            class: this.class,
+            // @ts-ignore
+            tableData: this.tableData,
+            // @ts-ignore
+            key: this.key,
+            // @ts-ignore
+            items: this.rows,
+            // @ts-ignore
+            selectRow: this.selectRow.bind(this),
+            // @ts-ignore
+            rowItem: this.rowItem,
+            // @ts-ignore
+            skeleton: this.skeleton,
+            columnCount: s
+          })
+        ])
+      ])
+    ]);
+  }
+  /**
+   * Refreshes the list.
+   *
+   * @returns {void}
+   */
+  refresh() {
+    this.list.refresh();
+  }
+}
+const ke = m((t) => new ee(
+  {
+    cache: t.cache ?? "list",
+    tableData: t.data,
+    scrollContainer: t.scrollContainer,
+    loadMoreItems: t.loadMoreItems,
+    offset: t.offset,
+    limit: t.limit,
+    class: t.class,
+    key: t.key,
+    rows: t.rows,
+    rowItem: t.rowItem,
+    headers: t.headers,
+    customHeader: t.customHeader,
+    border: t.border,
+    emptyState: t.emptyState,
+    skeleton: t.skeleton
+  }
+)), se = m(({ name: t, email: e }) => r({ class: "min-w-0 flex-auto" }, [
+  O({ class: "text-base font-semibold leading-6 m-0" }, t),
+  O({ class: "truncate text-sm leading-5 text-muted-foreground m-0" }, e)
+])), ae = () => r({ class: "flex items-center gap-x-1.5" }, [
+  r({ class: "flex-none rounded-full bg-emerald-500/20 p-1" }, [
+    r({ class: "h-1.5 w-1.5 rounded-full bg-emerald-500" })
+  ]),
+  O({ class: "text-xs leading-5 text-gray-500" }, "Online")
+]), ne = (t) => O({ class: "text-xs leading-5 text-muted-foreground" }, [
+  N("Last seen "),
+  ot({ datetime: t }, "3h ago")
+]), oe = (t, e) => t === "online" ? ae() : ne(e), re = m(({ role: t, lastSeen: e, status: s }) => r({ class: "hidden shrink-0 sm:flex sm:flex-col sm:items-end" }, [
+  O({ class: "text-sm leading-6 m-0" }, t),
+  oe(s, e)
+])), le = (t) => t.split(" ").map((s) => s[0]).join(""), ie = m((t) => X({ class: "fadeIn flex justify-between gap-x-6 py-4 px-4 rounded-md hover:bg-muted/50" }, [
+  r({ class: "flex min-w-0 gap-x-4" }, [
+    St({ src: t.image, alt: t.name, fallbackText: le(t.name) }),
+    se({ name: t.name, email: t.email })
+  ]),
+  re({
+    role: t.role,
+    lastSeen: t.lastSeen,
+    status: t.status
+  })
+])), Se = m((t) => new ut({
+  cache: "list",
+  key: "name",
+  items: t.users,
+  role: "list",
+  class: "divide-y divide-border",
+  rowItem: ie
+})), Ce = m((t) => {
+  const e = t.margin || "m-4 ml-0";
+  return t.allowHistory = t.allowHistory === !0, r({ class: `flex-none ${e}` }, [
+    y({ variant: "back", class: "ghost", ...t })
+  ]);
+});
+class ce extends R {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.class = "";
+  }
+  /**
+   * This will render the component.
+   *
+   * @returns {object}
+   */
+  render() {
+    return r(
+      {
+        class: this.getClassName(),
+        onSet: ["loading", {
+          loading: !0
+        }]
+      },
+      [
+        this.addBody()
+      ]
+    );
+  }
+  /**
+   * This will get the overlay className.
+   *
+   * @returns {string}
+   */
+  getClassName() {
+    return `absolute flex flex-auto flex-col overlay left-0 top-0 right-0 z-20
+			h-svh max-h-svh min-h-svh
+			bg-background pointer-events-auto
+			lg:left-16
+			will-change-contents ${this.class || ""}`;
+  }
+  /**
+   * This will setup and render the component.
+   *
+   * @param {object} container
+   * @returns {void}
+   */
+  setContainer(e) {
+    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 r({ class: "body fadeIn flex flex-auto flex-col bg-background" }, this.getContents());
+  }
+  /**
+   * This will get the body contents.
+   *
+   * @returns {array|null}
+   */
+  getContents() {
+    return this.children;
+  }
+}
+_.addType("dockableOverlay", (t) => {
+  if (!t)
+    return;
+  const e = t.component;
+  e && e.rendered === !0 && e.state.docked === !1 && e.destroy();
+});
+class Me extends ce {
+  /**
+   * This will stop presistence.
+   *
+   * @returns {void}
+   */
+  onCreated() {
+    this.dockSize = this.maxSize || 1024;
+  }
+  /**
+   * This will render the component.
+   *
+   * @returns {object}
+   */
+  render() {
+    const e = this.container;
+    return r(
+      {
+        onState: [
+          ["loading", {
+            loading: !0
+          }],
+          ["docked", (s, a) => {
+            s ? (a.className = this.getDockedClassName(), e.appendChild(a)) : (a.className = this.getClassName(), app.root.appendChild(a));
+          }]
+        ]
+      },
+      [
+        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(e) {
+    this.container = e, 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() {
+    _.add(
+      this.container,
+      "dockableOverlay",
+      {
+        component: this
+      }
+    ), this.onResize();
+  }
+  /**
+   * This will setup the overlay events.
+   *
+   * @returns {Array<object>}
+   */
+  setupEvents() {
+    return [
+      ["resize", globalThis, () => this.onResize()]
+    ];
+  }
+  /**
+   * This will check if the overlay can dock.
+   *
+   * @returns {boolean}
+   */
+  canDock() {
+    return globalThis.innerWidth >= this.dockSize;
+  }
+  /**
+   * This will handle the overlay resize.
+   *
+   * @returns {void}
+   */
+  onResize() {
+    this.state.docked = this.canDock();
+  }
+}
+const de = m(({ index: t, click: e, state: s }, a) => X({
+  class: "p-2 cursor-pointer hover:bg-muted/50",
+  onState: [
+    [s, "selectedIndex", {
+      "bg-accent": t,
+      "text-white": t
+    }]
+  ],
+  click: () => e(t)
+}, a)), he = m(({ selectOption: t, state: e }) => rt({
+  class: "border rounded-md list-none m-0 p-0 max-h-[400px] overflow-y-auto",
+  for: ["filteredOptions", (s, a) => de({ index: a, click: t, state: e }, s.label)]
+})), ue = m((t) => r({ class: "relative flex flex-auto items-center" }, [
+  gt({
+    cache: "input",
+    class: t.class ?? "",
+    placeholder: t.placeholder ?? "Search...",
+    bind: t.bind ?? [t.state, "searchQuery"],
+    keyup: (e, s) => {
+      s.state && (s.state.open = !1), typeof t.filterOptions == "function" && t.filterOptions(), s.dropdown && s.dropdown.updatePosition(), t.keyup && t.keyup(e, s);
+    },
+    pointerup: (e, s) => {
+      typeof s.toggleDropdown == "function" && s.toggleDropdown();
+    },
+    keydown: (e) => [
+      typeof t.handleKeyDown == "function" && t.handleKeyDown(e)
+    ]
+  }),
+  t.icon && r({ class: "absolute flex right-0 mr-2" }, [
+    q({ size: "sm" }, t.icon)
+  ])
+])), fe = (t) => r({
+  class: "relative flex fle-auto flex-col",
+  onState: ["open", (e, s, a) => {
+    if (e)
+      return new wt({
+        cache: "dropdown",
+        parent: a,
+        button: a.input,
+        size: "xl"
+      }, [
+        he(t)
+      ]);
+  }]
+}), Ie = it(
+  {
+    /**
+     * This will set up the data object.
+     *
+     * @returns {object} - The data object.
+     */
+    setData() {
+      const t = this.options || [];
+      return new P({
+        options: t,
+        filteredOptions: t
+      });
+    },
+    /**
+     * 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 t = this.data.filteredOptions;
+      let { searchQuery: e } = this.state;
+      e = e.toLowerCase();
+      const s = t.findIndex((a) => a.label.toLowerCase() === e);
+      s >= 0 && (this.state.selectedIndex = s);
+    },
+    /**
+     * This will filter the options.
+     *
+     * @returns {void}
+     */
+    filterOptions() {
+      const t = this.state.searchQuery.toLowerCase();
+      if (t === "" || t.length === 0) {
+        this.data.filteredOptions = this.data.options;
+        return;
+      }
+      const e = this.data.get("options");
+      this.data.filteredOptions = e.filter(
+        (s) => s.label.toLowerCase().includes(t)
+      );
+    },
+    /**
+     * This will get the selected value.
+     *
+     * @returns {object}
+     */
+    getValue() {
+      const { selectedIndex: t } = this.state;
+      return t < 0 ? null : this.data.get(`filteredOptions[${t}]`);
+    },
+    /**
+     * This will select an option.
+     *
+     * @param {number} index - The index of the option.
+     * @returns {void}
+     */
+    selectOption(t) {
+      this.state.selectedIndex = t;
+      const e = this.data.get(`filteredOptions[${t}]`);
+      this.state.searchQuery = e.label, this.state.open = !1, typeof this.onSelect == "function" && this.onSelect(e);
+    },
+    /**
+     * 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(t) {
+      const e = this.data.filteredOptions, { selectedIndex: s } = this.state;
+      t.key === "ArrowDown" ? (t.preventDefault(), this.state.selectedIndex = Math.min(s + 1, e.length - 1)) : t.key === "ArrowUp" ? (t.preventDefault(), this.state.selectedIndex = Math.max(s - 1, 0)) : t.key === "Enter" && s >= 0 && (t.preventDefault(), this.selectOption(s));
+    },
+    /**
+     * This will render the component.
+     *
+     * @returns {object} - The rendered component.
+     */
+    render() {
+      return r({ class: "relative w-full max-w-md" }, [
+        ue({
+          // @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)
+        }),
+        fe({
+          // @ts-ignore
+          state: this.state,
+          // @ts-ignore
+          setSelected: this.setSelectedIndexByQuery.bind(this),
+          // @ts-ignore
+          selectOption: this.selectOption.bind(this)
+        })
+      ]);
+    }
+  }
+), Te = m((t) => {
+  const e = t.icon ?? S.magnifyingGlass.default;
+  return r({
+    class: `relative flex items-center w-full rounded-xl bg-muted/30 focus-within:ring-2 focus-within:ring-ring transition-all ${t.containerClass || ""}`
+  }, [
+    r({ class: "absolute left-4 flex items-center pointer-events-none text-muted-foreground" }, [
+      q({ size: "sm" }, e)
+    ]),
+    lt({
+      type: "text",
+      cache: t.cache ?? "input",
+      class: `w-full bg-transparent border-none outline-none pl-12 pr-4 py-4 text-base text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-0 ${t.class || ""}`,
+      placeholder: t.placeholder ?? "Search...",
+      bind: t.bind,
+      value: t.value,
+      keyup: t.keyup,
+      keydown: t.keydown,
+      input: t.input,
+      change: t.change,
+      focus: t.focus,
+      blur: t.blur
+    })
+  ]);
+});
+export {
+  St as A,
+  Ce as B,
+  De as C,
+  Z as D,
+  p as F,
+  _t as H,
+  Yt as M,
+  ce as O,
+  wt as P,
+  pe as R,
+  ke as S,
+  A as T,
+  Se as U,
+  Pt as a,
+  Xt as b,
+  qt as c,
+  Y as d,
+  Nt as e,
+  Me as f,
+  ve as g,
+  Ie as h,
+  ue as i,
+  Te as j,
+  ie as k,
+  Mt as l,
+  yt as m,
+  b as p
+};