@base-framework/ui 0.0.0

package/dist/confirmation-D1Y_SgzE.js

@@ -0,0 +1,1526 @@
+var W = Object.defineProperty;
+var G = (e, t, o) => t in e ? W(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
+var i = (e, t, o) => G(e, typeof t != "symbol" ? t + "" : t, o);
+import { Div as n, I as f, H5 as J, P as p, Li as V, Span as c, Ul as Y, Button as h, OnState as v, Label as K, Form as Q, H2 as $, Footer as M, Header as L, A as q, H3 as X, Checkbox as Z, Nav as ee, Input as C, Time as te, Dialog as oe } from "@base-framework/atoms";
+import { Atom as d, Component as x, Html as N, Dom as se, base as ne, Data as k, Builder as H, Jot as S, DateTime as B } from "@base-framework/base";
+import { P as D, b as le } from "./calendar-DR_svCOR.js";
+import { B as m, I } from "./icon-B9QUT2NY.js";
+import { Icons as u } from "./icons.es.js";
+import { a as w } from "./veil-B9GQfH0d.js";
+import { Timer as re, List as ae, DynamicTime as ie } from "@base-framework/organisms";
+const z = {
+  info: {
+    borderColor: "border-blue-500",
+    bgColor: "bg-muted/10",
+    iconColor: "text-blue-500"
+  },
+  warning: {
+    bgColor: "bg-muted/10",
+    borderColor: "border-warning",
+    iconColor: "text-warning"
+  },
+  destructive: {
+    bgColor: "bg-muted/10",
+    borderColor: "border-destructive",
+    iconColor: "text-red-500"
+  },
+  success: {
+    bgColor: "bg-muted/10",
+    borderColor: "border-emerald-500",
+    iconColor: "text-emerald-500"
+  },
+  default: {
+    borderColor: "border",
+    bgColor: "bg-muted/10",
+    iconColor: "text-muted-foreground"
+  }
+}, ce = (e, t) => n({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
+  f({ html: e })
+]), de = (e) => J({ class: "font-semibold" }, e), ue = (e) => p({ class: "text-sm text-muted-foreground" }, e), pt = d(({ title: e, description: t, icon: o, type: s = "default" }) => {
+  const { borderColor: a, bgColor: l, iconColor: r } = z[s] || z.default;
+  return n({ class: `flex items-start p-4 border rounded-lg ${l} ${a}` }, [
+    // Icon and content
+    o && ce(o, r),
+    n({ class: "flex flex-col" }, [
+      de(e),
+      ue(t)
+    ])
+  ]);
+});
+class me extends x {
+  constructor() {
+    super(...arguments);
+    /**
+     * @member {string} removingClass
+     * @default ''
+     */
+    i(this, "removingClass", "");
+  }
+  /**
+   * This will remove the component from the DOM after a delay.
+   *
+   * @returns {void}
+   */
+  remove() {
+    this.prepareDestroy(), this.removeContext();
+    const o = this.panel, s = this.removingClass;
+    if (!s) {
+      N.removeElement(o);
+      return;
+    }
+    se.addClass(o, s), ne.on("animationend", o, (a) => N.removeElement(o));
+  }
+}
+const fe = (e) => c({ class: "ml-auto text-xs tracking-widest opacity-60" }, e), he = (e) => c({ class: "flex w-4 h-4", html: e }), ge = (e) => c({ class: "flex-auto" }, e), be = (e, t) => V({
+  class: "relative flex cursor-pointer hover:bg-muted/50 select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  click: () => t(e)
+}, [
+  e.icon && he(e.icon),
+  ge(e.label),
+  e.shortcut && fe(e.shortcut)
+]), pe = (e, t) => Y({ class: "grid gap-2" }, [
+  e.map((o) => be(o, t))
+]), xe = (e) => n({ class: "w-full z-10" }, [
+  n({
+    class: "max-h-60 border rounded-md overflow-y-auto p-1 grid gap-2 divide-y divide-border",
+    for: ["groups", (t) => pe(t, e)]
+  })
+]), we = ({ label: e, icon: t, toggleDropdown: o }) => h({
+  cache: "button",
+  class: `inline-flex items-center justify-between rounded-md border border-input
+            bg-background px-2 py-2 text-sm font-medium hover:bg-muted
+            focus:outline-none transition duration-150 ease-in-out`,
+  click: o
+}, [
+  e && c(e),
+  t && f({ html: t })
+]), ye = ({ onSelect: e }) => n([
+  v(
+    "open",
+    (t, o, s) => t ? new D({
+      cache: "dropdown",
+      parent: s,
+      button: s.button
+    }, [
+      xe(e)
+    ]) : null
+  )
+]);
+class xt extends x {
+  constructor() {
+    super(...arguments);
+    /**
+     * @member {string} label
+     */
+    i(this, "label", null);
+    /**
+     * @member {string} icon
+     * @default null
+     */
+    i(this, "icon", null);
+    /**
+     * @member {function} onSelect
+     */
+    i(this, "onSelect", null);
+    /**
+     * @member {array} groups
+     */
+    i(this, "groups", []);
+  }
+  /**
+   * Initializes component data.
+   *
+   * @returns {Data}
+   */
+  setData() {
+    return new k({
+      groups: this.groups || []
+    });
+  }
+  /**
+   * Initializes the component state.
+   *
+   * @returns {object}
+   */
+  setupStates() {
+    return {
+      open: !1,
+      selectedItem: null
+    };
+  }
+  /**
+   * Toggles the dropdown open state.
+   *
+   * @returns {void}
+   */
+  toggleDropdown() {
+    this.state.toggle("open");
+  }
+  /**
+   * Handles item selection within the dropdown.
+   *
+   * @param {object} item - The selected item object
+   * @returns {void}
+   */
+  handleSelect(o) {
+    this.state.selectedItem = o, this.state.open = !1, typeof this.onSelect == "function" && this.onSelect(o);
+  }
+  /**
+   * Renders the Dropdown component.
+   *
+   * @returns {object}
+   */
+  render() {
+    return n({ class: "relative" }, [
+      we({
+        label: this.label,
+        icon: this.icon,
+        toggleDropdown: this.toggleDropdown.bind(this)
+      }),
+      ye({ onSelect: this.handleSelect.bind(this) })
+    ]);
+  }
+}
+const ve = d((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t)), Ce = d((e, t) => K({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), ke = d((e, t) => p({ ...e, class: "text-sm text-muted-foreground italic" }, t)), Se = d((e, t) => p({ ...e, class: "text-sm text-destructive" }, t)), De = (e) => e.tag === "input" || e.tag === "select" || e.tag === "textarea", U = (e, t, o) => e.map((s) => (s.children && s.children.length > 0 && (s.children = U(s.children, t, o)), s.required && De(s) ? {
+  ...s,
+  aria: {
+    invalid: ["hasError"]
+  },
+  invalid: o,
+  input: t
+} : s)), Ie = d((e, t) => {
+  const a = U(t, (l) => {
+    l.target.checkValidity() && e.setError(null);
+  }, (l) => {
+    e.setError(l.target.validationMessage);
+  });
+  return n({
+    ...e,
+    class: "w-full"
+  }, a);
+}), wt = w(
+  {
+    /**
+     * The initial state of the FormField.
+     *
+     * @member {object} state
+     * @returns {object}
+     */
+    state() {
+      return {
+        error: null,
+        hasError: !1,
+        value: this.defaultValue ?? ""
+      };
+    },
+    /**
+     * Renders the FormField component.
+     *
+     * @returns {object}
+     */
+    render() {
+      const e = this.name, t = this.getId(`${e}`), { label: o, description: s } = this, a = (l) => {
+        this.state.error = l, this.state.hasError = !!l;
+      };
+      return n({ class: "flex flex-auto space-y-4" }, [
+        ve([
+          Ce({ htmlFor: t }, o),
+          Ie({
+            id: t,
+            name: e,
+            value: this.state.value,
+            setError: a
+          }, this.children),
+          s && ke({ id: this.getId("description") }, s),
+          n({ onState: ["error", (l) => l && Se(l)] })
+        ])
+      ]);
+    }
+  }
+), Te = (e, t = null) => {
+  e.target.checkValidity() && (e.preventDefault(), t && t(e));
+}, Ae = d(
+  (e, t) => Q({ ...e, submit: (o) => Te(o, e.submit), class: `w-full ${e.class ?? ""}` }, t)
+), yt = d((e, t) => n({ ...e, class: `space-y-6 p-4 md:p-6 divide-y ${e.class || ""}` }, t)), vt = d((e, t = []) => n({ class: "space-y-3 py-4" }, [
+  e.title && $({ class: "font-semibold" }, e.title),
+  ...t
+])), Ct = (e, t) => n({ class: "flex justify-between" }, [
+  c({ class: "text-muted-foreground" }, e),
+  c(t)
+]), Be = ({ title: e, description: t, back: o, icon: s, options: a = [] }) => L({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10" }, [
+  /**
+   * Back Button
+   */
+  o && m({ variant: "icon", icon: u.arrows.left, class: "mr-2 p-0 flex sm:hidden", click: (l, r) => r.close() }),
+  /**
+   * Icon
+   */
+  s && n({ class: "mr-2 w-12 h-12 rounded-full bg-muted flex flex-none items-center justify-center" }, [I(s)]),
+  /**
+   * Title and Description
+   */
+  n({ class: "flex flex-auto flex-row justify-between w-full ml-2 gap-2" }, [
+    n({ class: "flex flex-auto flex-col" }, [
+      $({ class: "text-lg font-semibold m-0" }, e),
+      t && n({ class: "text-sm text-muted-foreground" }, t)
+    ]),
+    ...a
+  ])
+]), $e = d((e, t) => n({
+  popover: "manual",
+  class: `modal m-auto top-0 right-0 bottom-0 left-0 fixed z-20 grid w-full h-full max-h-screen gap-2 lg:border bg-background text-foreground shadow-xl break-words p-0 ${e.class}`,
+  click: (o, s) => {
+    o.target === s.panel && (o.preventDefault(), o.stopPropagation(), s.state.open = !1);
+  }
+}, [
+  Ae({ class: "modal-content relative bg-background z-[1] flex flex-auto flex-col space-y-4", submit: (o) => e.onSubmit && e.onSubmit() }, [
+    Be(e),
+    n({ class: "modal-body flex flex-grow flex-col overflow-y-auto py-0 px-6 z-0" }, t),
+    M({ class: "modal-footer sticky bg-background/80 backdrop-blur-md flex flex-none justify-between py-4 px-6 z-10" }, e.buttons)
+  ])
+])), Me = (e) => H.render(e, app.root);
+class kt extends x {
+  constructor() {
+    super(...arguments);
+    /**
+     * @member {string} title
+     */
+    i(this, "title", null);
+    /**
+     * @member {string} description
+     */
+    i(this, "description", null);
+    /**
+     * @member {string} size
+     * @default 'md'
+     * @values 'sm', 'md', 'lg', 'xl'
+     */
+    i(this, "size", "md");
+    /**
+     * @member {string} type
+     * @default ''
+     * @values 'right', 'left'
+     * @description This will set the type of modal.
+     */
+    i(this, "type", "");
+    /**
+     * @member {boolean} hidePrimaryButton
+     * @default false
+     * @description This will hide the primary button.
+     * @values true, false
+     */
+    i(this, "hidePrimaryButton", !1);
+    /**
+     * @member {string} icon
+     */
+    i(this, "icon", null);
+    /**
+     * @member {function|nll} onSubmit
+     */
+    i(this, "onSubmit", null);
+    /**
+     * @member {function|null} onClose
+     */
+    i(this, "onClose", null);
+    /**
+     * @member {boolean} back
+     */
+    i(this, "back", !1);
+  }
+  /**
+   * This will render the modal component.
+   *
+   * @returns {object}
+   */
+  render() {
+    const o = this.getMainClass(), s = this.title || "", a = this.description || null;
+    return $e(
+      {
+        class: o,
+        title: s,
+        description: a,
+        options: this.headerOptions(),
+        buttons: this.getButtons(),
+        onSubmit: () => {
+          this.onSubmit && this.onSubmit(), this.destroy();
+        },
+        icon: this.icon,
+        back: this.back ?? !1,
+        aria: { expanded: ["open"] }
+      },
+      this.children
+    );
+  }
+  /**
+      * This will setup the states.
+      *
+      * @returns {object}
+      */
+  setupStates() {
+    return {
+      open: {
+        state: !1,
+        callBack: (o) => {
+          o || this.destroy();
+        }
+      }
+    };
+  }
+  /**
+   * This will get the header options.
+   *
+   * @returns {Array<object>}
+   */
+  headerOptions() {
+    return [];
+  }
+  /**
+      * This will get the buttons for the modal.
+      *
+      * @returns {array}
+      */
+  getButtons() {
+    return [
+      m({ variant: "outline", click: () => this.destroy() }, "Cancel"),
+      this.hidePrimaryButton !== !0 && m({ variant: "primary", type: "submit" }, "Save")
+    ];
+  }
+  /**
+      * This will check if the click was outside the component.
+      *
+      * @param {object} element
+      * @returns {boolean}
+      */
+  isOutsideClick(o) {
+    return !this.panel.contains(o);
+  }
+  /**
+   * This will get the size class.
+   *
+   * @returns {string}
+   */
+  getSizeClass() {
+    switch (this.size) {
+      case "lg":
+        return "lg max-w-[900px]";
+      case "xl":
+        return "xl max-w-[1400px]";
+      default:
+        return "md max-w-[760px]";
+    }
+  }
+  /**
+   * This will get the type class.
+   *
+   * @returns {string}
+   */
+  getTypeClass() {
+    switch (this.type) {
+      case "right":
+        return "right right-0";
+      case "left":
+        return "left left-0";
+      default:
+        return "";
+    }
+  }
+  /**
+   * This will get the modal class.
+   *
+   * @returns {string}
+   */
+  getMainClass() {
+    return this.getSizeClass() + " " + this.getTypeClass();
+  }
+  /**
+      * This will override the set up to use the app shell.
+      *
+      * @param {object} container
+      */
+  setContainer(o) {
+    this.container = app.root;
+  }
+  /**
+   * This will open the modal.
+   *
+   * @returns {void}
+   */
+  open() {
+    Me(this), this.showModal();
+  }
+  /**
+   * This will show the modal.
+   *
+   * @protected
+   * @returns {void}
+   */
+  showModal() {
+    window.setTimeout(() => this.panel.showPopover(), 10), this.state.open = !0, document.documentElement.style.overflowY = "hidden";
+  }
+  /**
+   * This will hide the modal.
+   *
+   * @protected
+   * @returns {void}
+   */
+  beforeDestroy() {
+    this.panel.hidePopover(), this.state.open = !1, typeof this.onClose == "function" && this.onClose(), document.documentElement.style.overflowY = "auto";
+  }
+}
+const F = {
+  info: {
+    bgColor: "bg-muted/10",
+    borderColor: "border-blue-500",
+    iconColor: "text-blue-500"
+  },
+  warning: {
+    bgColor: "bg-muted/10",
+    borderColor: "border-warning",
+    iconColor: "text-warning"
+  },
+  destructive: {
+    bgColor: "bg-muted/10",
+    borderColor: "border-destructive",
+    iconColor: "text-red-500"
+  },
+  success: {
+    bgColor: "bg-muted/10",
+    borderColor: "border-emerald-500",
+    iconColor: "text-emerald-500"
+  },
+  default: {
+    bgColor: "bg-muted/10",
+    borderColor: "border",
+    iconColor: "text-muted-foreground"
+  }
+}, Le = (e) => L({ class: "flex justify-center" }, [
+  X({ class: "text-lg font-bold mb-0" }, e)
+]), Ne = d(({ href: e, class: t }, o) => q({
+  class: `pullRightIn bg-popover text-popover-foreground relative flex flex-auto flex-col justify-start shadow-lg pointer-events-auto p-4 border rounded-md min-w-[340px] max-w-[450px] mt-4 ${t}`,
+  href: e,
+  role: "alert"
+}, o)), ze = d(({ close: e, class: t }, o) => n({
+  class: `pullRightIn bg-popover text-popover-foreground relative flex flex-auto flex-col justify-start shadow-lg pointer-events-auto p-4 border rounded-md min-w-[340px] max-w-[450px] mt-4 ${t}`,
+  click: () => e(),
+  role: "alert"
+}, o));
+class Fe extends me {
+  constructor() {
+    super(...arguments);
+    /**
+     * @member {stirng} removingClass}
+     */
+    i(this, "removingClass", "pullRight");
+    /**
+     * @member {function|null} secondaryAction
+     */
+    i(this, "secondaryAction", null);
+    /**
+     * @member {function|null} primaryAction
+     */
+    i(this, "primaryAction", null);
+    /**
+     * @member {boolean} primary
+     */
+    i(this, "primary", !1);
+    /**
+     * @member {boolean} secondary
+     */
+    i(this, "secondary", !1);
+    /**
+     * @member {string} title
+     */
+    i(this, "title", null);
+    /**
+     * @member {string} description
+     */
+    i(this, "description", null);
+    /**
+     * @member {string} icon
+     */
+    i(this, "icon", null);
+    /**
+     * @member {function} onClick
+     */
+    i(this, "onClick", null);
+  }
+  /**
+   * This will be called when the component is created.
+   *
+   * @returns {void}
+   */
+  onCreated() {
+    this.duration = this.duration || 4e3;
+  }
+  /**
+   * This will render the component.
+   *
+   * @returns {object}
+   */
+  render() {
+    const { bgColor: o, borderColor: s, iconColor: a } = this.getTypeStyles(), l = this.href || null, r = this.getChildren(a);
+    return l ? Ne({
+      href: l,
+      class: `${o} ${s}`
+    }, r) : ze({
+      close: this.close.bind(this),
+      class: `${o} ${s}`
+    }, r);
+  }
+  /**
+   * This will be called after the component is set up.
+   *
+   * @returns {void}
+   */
+  afterSetup() {
+    const o = this.duration;
+    o !== "infinite" && (this.timer = new re(o, this.close.bind(this)), this.timer.start());
+  }
+  /**
+   * This will get the style properties based on the notification type.
+   *
+   * @returns {object}
+   */
+  getTypeStyles() {
+    const o = this.type || "default";
+    return F[o] || F.default;
+  }
+  /**
+   * This will get the buttons for the notification.
+   *
+   * @returns {array}
+   */
+  getButtons() {
+    return [
+      n({ class: "flex flex-row mt-6 gap-2" }, [
+        this.secondary && m({ variant: "outline", click: () => this.secondaryAction && this.secondaryAction() }, this.secondary),
+        this.primary && m({ click: () => this.primaryAction && this.primaryAction() }, this.primary)
+      ])
+    ];
+  }
+  /**
+   * This will get the children for the notification.
+   *
+   * @param {string} iconColor
+   * @returns {array}
+   */
+  getChildren(o) {
+    return [
+      n({ class: "flex items-start" }, [
+        this.icon && f({ class: `mr-4 ${o}`, html: this.icon }),
+        n({ class: "flex flex-auto flex-col" }, [
+          n({ class: "flex flex-auto flex-row items-center w-full pr-12" }, [
+            this.title && Le(this.title)
+          ]),
+          p({ class: "text-base text-muted-foreground m-0 pr-12" }, this.description),
+          (this.primary || this.secondary) && M({ class: "margin-top-24 flex align-center" }, this.getButtons())
+        ])
+      ]),
+      m({
+        class: "absolute top-[12px] right-[12px]",
+        variant: "icon",
+        icon: u.x,
+        click: this.close.bind(this)
+      })
+    ];
+  }
+  /**
+   * This will close the notification.
+   *
+   * @param {object} e The event object.
+   * @returns {void}
+   */
+  close(o) {
+    o && o.stopPropagation(), this.duration !== "infinite" && this.timer.stop(), this.onClick && this.onClick(), this.destroy();
+  }
+}
+let Ee = 0;
+class St extends x {
+  /**
+   * This will render the component.
+   *
+   * @returns {object}
+   */
+  render() {
+    return n({ class: "notification-container pointer-events-none inset-auto bg-transparent backdrop:bg-transparent overflow-visible fixed bottom-[80px] right-0 z-50 p-5", popover: "manual" }, [
+      new ae({
+        cache: "list",
+        key: "id",
+        role: "list",
+        rowItem: (t) => new Fe(t)
+      })
+    ]);
+  }
+  /**
+   * This will add a notification.
+   *
+   * @param {object} props
+   * @returns {void}
+   */
+  addNotice(t = {}) {
+    t.id = Ee++, t.callBack = () => this.removeNotice(t), this.list.append([t]), this.panel.hidePopover(), this.panel.showPopover();
+  }
+  /**
+   * This will remove a notification.
+   *
+   * @param {object} notice
+   * @returns {void}
+   */
+  removeNotice(t) {
+    this.list.delete(t.id);
+  }
+}
+const E = window.matchMedia, T = d(({ value: e, label: t, icon: o }) => h({
+  class: 'text-sm gap-1 font-medium leading-none disabled:cursor-not-allowed disabled:opacity-70 flex flex-col items-center justify-between rounded-md border-2 bg-popover p-4 hover:bg-accent hover:text-accent-foreground data-[state="active"]:border-primary [&:has([data-state="active"])]:border-primary',
+  onState: ["method", { active: e }],
+  dataSet: ["method", ["state", e, "active"]],
+  click: (s, { state: a }) => {
+    a.method = e, localStorage.setItem("theme", e), e === "system" && localStorage.removeItem("theme"), Pe(e);
+  }
+}, [
+  I(o),
+  c(t)
+])), Pe = (e) => {
+  var s;
+  const t = document.documentElement;
+  if (e === "system" && (e = (s = window.matchMedia) != null && s.call(window, "(prefers-color-scheme: dark)").matches ? "dark" : "light"), E && !E("(prefers-color-scheme: " + e + ")").matches) {
+    t.classList.add(e);
+    return;
+  }
+  const o = e === "light" ? "dark" : "light";
+  t.classList.remove(o);
+}, Dt = S(
+  {
+    /**
+     * This will render the component.
+     *
+     * @returns {object}
+     */
+    render() {
+      return n({ class: "flex flex-auto flex-col" }, [
+        n({ class: "grid grid-cols-3 gap-4" }, [
+          T({ label: "System", value: "system", icon: u.adjustments.horizontal }),
+          T({ label: "Light", value: "light", icon: u.sun }),
+          T({ label: "Dark", value: "dark", icon: u.moon })
+        ])
+      ]);
+    },
+    /**
+     * This will setup the states.
+     *
+     * @returns {object}
+     */
+    state() {
+      return {
+        method: window.localStorage.getItem("theme") ?? "system"
+      };
+    }
+  }
+), It = w(
+  {
+    /**
+     * The initial state of the Toggle.
+     *
+     * @returns {object}
+     */
+    state() {
+      return {
+        active: this.active ?? !1
+      };
+    },
+    /**
+     * This is added to check the checkbox after the component is rendered.
+     * to see if the bind updated the checked value.
+     *
+     * @returns {void}
+     */
+    after() {
+      this.state.active = this.checkbox.checked;
+    },
+    /**
+     * Renders the Toggle component.
+     *
+     * @returns {object}
+     */
+    render() {
+      return h({
+        class: "relative inline-flex h-6 w-11 min-w-11 items-center rounded-full bg-muted transition-colors focus:outline-none",
+        onState: ["active", { "bg-primary": !0, "bg-muted": !1 }],
+        click: (t, { state: o }) => {
+          o.toggle("active"), this.checkbox.checked = o.active;
+        }
+      }, [
+        Z({
+          cache: "checkbox",
+          class: "opacity-0 absolute top-0 left-0 bottom-0 right-0 w-full h-full",
+          /**
+           * This will add the default checked before binding.
+           * If binding it will override the default checked value.
+           */
+          checked: this.state.active,
+          bind: this.bind,
+          required: this.required
+        }),
+        c({
+          class: "absolute h-5 w-5 bg-background rounded-full shadow-md transform transition-transform",
+          onState: ["active", { "translate-x-[22px]": !0, "translate-x-[2px]": !1 }]
+        })
+      ]);
+    }
+  }
+), y = {
+  ONLINE: "online",
+  OFFLINE: "offline",
+  BUSY: "busy",
+  AWAY: "away"
+}, g = {
+  ONLINE: "bg-green-500",
+  OFFLINE: "bg-gray-500",
+  BUSY: "bg-red-500",
+  AWAY: "bg-yellow-500"
+}, je = (e = "") => (e = e.toUpperCase(), g[e] || g.OFFLINE), Tt = (e) => n({
+  class: `absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full ${je(e)}`
+}), At = ({ propName: e = "status" } = {}) => n({
+  class: "absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full",
+  onSet: [e, {
+    [g.ONLINE]: y.ONLINE,
+    [g.OFFLINE]: y.OFFLINE,
+    [g.BUSY]: y.BUSY,
+    [g.AWAY]: y.AWAY
+  }]
+}), Oe = (e, t) => q(
+  {
+    href: e,
+    "aria-current": t === "Breadcrumb" && "page",
+    // Only set aria-current on the last item
+    class: "text-muted-foreground font-medium hover:text-foreground"
+  },
+  [c(t)]
+), Ve = () => I({
+  class: "mx-3 text-muted-foreground",
+  "aria-hidden": !0,
+  size: "xs"
+}, u.chevron.single.right), Ye = (e) => n({ class: "flex items-center" }, [
+  e.href ? Oe(e.href, e.label) : c(e.label),
+  e.separator && Ve()
+]), Bt = S(
+  {
+    /**
+     * Set initial data
+     *
+     * @returns {Data}
+     */
+    setData() {
+      return new k({
+        // @ts-ignore
+        items: this.items || []
+      });
+    },
+    /**
+     * Render Breadcrumb Component
+     *
+     * @returns {object}
+     */
+    render() {
+      const e = this.data.items.length - 1;
+      return ee(
+        {
+          "aria-label": "Breadcrumb",
+          class: "flex items-center space-x-1 text-sm"
+        },
+        [
+          n({
+            role: "list",
+            class: "flex items-center",
+            for: ["items", (t, o) => Ye({
+              href: t.href,
+              label: t.label,
+              separator: o < e
+            })]
+          })
+        ]
+      );
+    }
+  }
+), P = {
+  xs: "h-1 w-1",
+  sm: "h-2 w-2",
+  md: "h-4 w-4",
+  lg: "h-8 w-8",
+  xl: "h-12 w-12",
+  "2xl": "h-16 w-16",
+  "3xl": "h-24 w-24",
+  default: "h-4 w-4"
+}, qe = (e) => P[e] || P.default, He = ({ index: e, size: t }) => n({ class: `${t} rounded-full bg-muted cursor-pointer` }, [
+  c({
+    class: "block w-full h-full rounded-full transition-colors",
+    onSet: ["activeIndex", {
+      "bg-primary": e,
+      "shadow-md": e
+    }],
+    click: (o, { data: s, onClick: a }) => {
+      s.activeIndex = e, a && a(e);
+    }
+  })
+]), Ue = (e, t) => Array.from({ length: e }, (o, s) => He({
+  index: s,
+  size: t
+})), $t = S(
+  {
+    /**
+     * Defines component data (props).
+     *
+     * @returns {Data}
+     */
+    setData() {
+      return new k({
+        // @ts-ignore
+        count: this.count || 4,
+        // total dots
+        // @ts-ignore
+        activeIndex: this.activeIndex || 0
+      });
+    },
+    /**
+     * Renders the dots.
+     *
+     * @returns {object}
+     */
+    render() {
+      const e = this.gap || "gap-2", t = qe(this.size || "sm"), o = Ue(this.data.count, t);
+      return n(
+        { class: "flex justify-center items-center py-2" },
+        [
+          n({ class: `flex ${e}` }, o)
+        ]
+      );
+    }
+  }
+), _e = ({ toggleDropdown: e }) => h(
+  {
+    cache: "button",
+    class: "relative z-[2] inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-muted h-10 px-4 py-2 justify-between",
+    click: e
+  },
+  [
+    c({ onState: ["selectedLabel", (t) => t || "Select item..."] }),
+    f({ html: u.chevron.upDown })
+  ]
+), Re = (e, t) => V({
+  class: "flex flex-auto items-center cursor-pointer p-2 hover:bg-muted/50 rounded-sm",
+  click: () => t(e),
+  onState: ["selectedValue", { "bg-secondary": e.value }]
+}, [
+  e.icon && c({ class: "mr-2 flex items-baseline" }, [f({ class: "flex w-4 h-4", html: e.icon })]),
+  c(e.label)
+]), We = (e) => n({ class: "w-full border rounded-md" }, [
+  Y({ class: "max-h-60 overflow-y-auto p-2 grid gap-1", for: ["items", (t) => Re(t, e)] })
+]), Ge = ({ onSelect: e }) => n({ class: "flex flex-auto flex-col" }, [
+  v(
+    "open",
+    (t, o, s) => t ? new D({
+      cache: "dropdown",
+      parent: s,
+      button: s.button
+    }, [
+      We(e)
+    ]) : null
+  )
+]), Mt = S(
+  {
+    /**
+     * This will set up the data.
+     *
+     * @returns {Data}
+     */
+    setData() {
+      return new k({
+        // @ts-ignore
+        items: this.items || []
+      });
+    },
+    /**
+     * This will set up the states.
+     *
+     * @returns {object}
+     */
+    state: {
+      open: !1,
+      selectedLabel: "",
+      selectedValue: ""
+    },
+    /**
+     * Handles the selection of an item.
+     *
+     * @param {object} item
+     * @returns {void}
+     */
+    handleSelect(e) {
+      const t = this.state;
+      t.selectedValue = e.value, t.selectedLabel = e.label, t.open = !1, typeof this.onSelect == "function" && this.onSelect(e);
+    },
+    /**
+     * Toggles the dropdown open state.
+     *
+     * @returns {void}
+     */
+    toggleDropdown() {
+      this.state.toggle("open");
+    },
+    /**
+     * This will render the component.
+     *
+     * @returns {object}
+     */
+    render() {
+      const e = (t) => {
+        const o = this.state;
+        o.selectedValue = t.value, o.selectedLabel = t.label, o.open = !1;
+      };
+      return n({ class: "relative w-full flex flex-auto flex-col max-w-[250px]" }, [
+        // @ts-ignore
+        _e({ toggleDropdown: this.toggleDropdown.bind(this) }),
+        Ge({ onSelect: e }),
+        // Hidden required input for form validation
+        // @ts-ignore
+        this.required && C({
+          class: "opacity-0 absolute top-0 left-0 z-[1]",
+          type: "text",
+          // @ts-ignore
+          name: this.name,
+          required: !0,
+          // @ts-ignore
+          value: ["[[selectedValue]]", this.state]
+        })
+      ]);
+    }
+  }
+), _ = ({ icon: e, click: t, ariaLabel: o }) => m({
+  variant: "icon",
+  class: "flex flex-none",
+  click: t,
+  icon: e,
+  "aria-label": o
+}), Je = ({ click: e }) => _({
+  icon: u.circleMinus,
+  click: e,
+  ariaLabel: "Decrement"
+}), Ke = ({ click: e }) => _({
+  icon: u.circlePlus,
+  click: e,
+  ariaLabel: "Increment"
+}), Qe = ({ bind: e, min: t, max: o, readonly: s = !1 }) => C({
+  value: "[[count]]",
+  bind: e,
+  blur: (a, { state: l }) => {
+    let r = parseInt(a.target.value, 10);
+    isNaN(r) && (r = t ?? 0), t !== void 0 && (r = Math.max(r, t)), o !== void 0 && (r = Math.min(r, o)), l.count = r;
+  },
+  class: "flex flex-auto text-lg font-medium bg-transparent text-center border min-w-0",
+  readonly: s,
+  min: t,
+  max: o,
+  type: "number",
+  "aria-label": "Counter"
+}), Lt = w(
+  {
+    /**
+     * Initial state for the counter component.
+     *
+     * @member {object} state
+     */
+    state() {
+      return {
+        count: {
+          state: this.initialCount ?? 0,
+          callBack: (e) => this.change && this.change(e)
+        }
+      };
+    },
+    /**
+     * Renders the Counter component.
+     *
+     * @returns {object}
+     */
+    render() {
+      const e = this.class ?? "";
+      return n({ class: `flex flex-auto items-center justify-between space-x-4 p-4 ${e}` }, [
+        Je({ click: () => this.state.decrement("count") }),
+        Qe({
+          bind: this.bind,
+          readonly: this.readonly,
+          min: this.min,
+          max: this.max
+        }),
+        Ke({ click: () => this.state.increment("count") })
+      ]);
+    }
+  }
+), Xe = ({ bind: e, required: t }) => C({
+  cache: "input",
+  class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
+  bind: e,
+  required: t
+}), Ze = ({ bind: e, required: t, toggleOpen: o }) => h({
+  class: "relative flex items-center gap-2 w-full justify-between border border-input bg-background hover:bg-muted rounded-md h-10 px-4 py-2",
+  click: o
+}, [
+  Xe({ bind: e, required: t }),
+  c({
+    onState: ["selectedDate", (s) => s ? B.format("standard", s) : "Pick a date"]
+  }),
+  f({ html: u.calendar.days })
+]), et = ({ handleDateSelect: e }) => n({ class: "absolute mt-1 z-10 bg-background rounded-md shadow-lg" }, [
+  v(
+    "open",
+    (t, o, s) => t ? new D({
+      cache: "dropdown",
+      parent: s,
+      button: s.panel,
+      size: "fit"
+    }, [
+      new le({
+        selectedDate: s.state.selectedDate,
+        selectedCallBack: e
+      })
+    ]) : null
+  )
+]), Nt = w(
+  {
+    /**
+     * The initial state of the DatePicker.
+     *
+     * @member {object} state
+     */
+    state() {
+      return {
+        selectedDate: this.selectedDate ?? null,
+        open: !1
+      };
+    },
+    /**
+     * This is added to check the input after the component is rendered.
+     * to see if the bind updated the input value.
+     *
+     * @returns {void}
+     */
+    after() {
+      this.state.selectedDate = this.input.value;
+    },
+    /**
+     * Renders the DatePicker component.
+     *
+     * @returns {object}
+     */
+    render() {
+      const e = (o, { state: s }) => s.toggle("open"), t = (o) => {
+        this.state.selectedDate = o, this.state.open = !1, this.input.value = o, typeof this.onChange == "function" && this.onChange(o);
+      };
+      return n({ class: "relative w-full max-w-[320px]" }, [
+        Ze({
+          toggleOpen: e,
+          bind: this.bind,
+          required: this.required
+        }),
+        et({
+          handleDateSelect: t
+        })
+      ]);
+    }
+  }
+), zt = ({ dateTime: e = "", remoteTimeZone: t = "America/Denver", filter: o = null }) => te([
+  new ie({
+    dateTime: e,
+    filter: o || ((s) => {
+      const a = B.getLocalTime(s, !0, !1, t);
+      return B.getTimeFrame(a);
+    })
+  })
+]);
+function tt({ bind: e, required: t }) {
+  return C({
+    cache: "input",
+    class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
+    bind: e,
+    required: t
+  });
+}
+function ot({ bind: e, required: t, toggleOpen: o }) {
+  return h(
+    {
+      class: "relative flex items-center gap-2 w-full justify-between border border-input bg-background hover:bg-muted rounded-md h-10 px-4 py-2",
+      click: o
+    },
+    [
+      tt({ bind: e, required: t }),
+      c({
+        onState: ["selectedTime", (s) => s || "Pick a time"]
+      }),
+      f({ html: u.clock })
+    ]
+  );
+}
+function A({ items: e, handleTimeSelect: t, state: o, stateValue: s, pad: a = !1 }) {
+  return n(
+    { class: "flex flex-col max-h-[200px] overflow-y-auto" },
+    e.map((l) => {
+      let r = a ? l.toString().padStart(2, "0") : l.toString();
+      return h({
+        text: r,
+        class: "hover:bg-muted/50 rounded-md px-2 py-1",
+        click: () => t({ [s]: r }),
+        onState: [o, s, { "bg-muted": r }]
+      });
+    })
+  );
+}
+function st({ handleTimeSelect: e }) {
+  return n(
+    { class: "absolute mt-1 z-10 bg-background rounded-md shadow-lg" },
+    [
+      v(
+        "open",
+        (t, o, s) => t ? new D(
+          {
+            cache: "dropdown",
+            parent: s,
+            button: s.panel,
+            size: "fit"
+          },
+          [
+            n(
+              { class: "flex flex-auto flex-col border rounded-md shadow-md" },
+              [
+                n(
+                  { class: "grid grid-cols-3 gap-2 p-4 text-center max-h-[220px] min-w-[240px]" },
+                  [
+                    // Hours column
+                    A({
+                      items: Array.from({ length: 12 }, (a, l) => l + 1),
+                      handleTimeSelect: e,
+                      state: s.state,
+                      stateValue: "hour",
+                      pad: !0
+                    }),
+                    // Minutes column
+                    A({
+                      items: Array.from({ length: 60 }, (a, l) => l),
+                      handleTimeSelect: e,
+                      state: s.state,
+                      stateValue: "minute",
+                      pad: !0
+                    }),
+                    // AM/PM column
+                    A({
+                      items: ["AM", "PM"],
+                      handleTimeSelect: e,
+                      state: s.state,
+                      stateValue: "meridian"
+                    })
+                  ]
+                )
+              ]
+            )
+          ]
+        ) : null
+      )
+    ]
+  );
+}
+function j(e) {
+  if (!e)
+    return { hour: null, minute: null, meridian: null };
+  const t = /^(\d{1,2}):(\d{2})(?::(\d{2}))?\s?(AM|PM)?$/i, o = e.match(t);
+  if (!o)
+    return { hour: null, minute: null, meridian: null };
+  let [, s, a, , l] = o, r = parseInt(s, 10), b = parseInt(a, 10);
+  return r < 0 || r > 23 || b < 0 || b > 59 ? { hour: null, minute: null, meridian: null } : (l ? (l = l.toUpperCase(), l === "PM" && r < 12 ? r += 12 : l === "AM" && r === 12 && (r = 12)) : r === 0 ? (l = "AM", r = 12) : r < 12 ? l = "AM" : r === 12 ? l = "PM" : (l = "PM", r -= 12), {
+    hour: r.toString().padStart(2, "0"),
+    minute: b.toString().padStart(2, "0"),
+    meridian: l
+  });
+}
+const Ft = w(
+  {
+    /**
+     * The initial shallow state of the TimePicker.
+     *
+     * @member {object} state
+     */
+    state() {
+      const e = this.selectedTime ?? null, { hour: t, minute: o, meridian: s } = j(e);
+      return {
+        selectedTime: e,
+        open: !1,
+        hour: t,
+        minute: o,
+        meridian: s
+      };
+    },
+    /**
+     * Updates the state after the input is rendered.
+     *
+     * @returns {void}
+     */
+    after() {
+      if (this.input.value) {
+        const { hour: e, minute: t, meridian: o } = j(this.input.value);
+        this.state.set({
+          hour: e,
+          minute: t,
+          meridian: o,
+          selectedTime: this.input.value
+        });
+      }
+    },
+    /**
+     * Renders the TimePicker component.
+     *
+     * @returns {object}
+     */
+    render() {
+      const e = (o, { state: s }) => s.toggle("open"), t = ({ hour: o, minute: s, meridian: a }) => {
+        if (o && (this.state.hour = o), s && (this.state.minute = s), a && (this.state.meridian = a), this.state.hour && this.state.minute && this.state.meridian) {
+          const l = `${this.state.hour}:${this.state.minute} ${this.state.meridian}`;
+          this.state.selectedTime = l, this.state.open = !1, this.input.value = l, typeof this.change == "function" && this.change(l);
+        }
+      };
+      return n(
+        { class: "relative w-full max-w-[320px]" },
+        [
+          ot({
+            toggleOpen: e,
+            bind: this.bind,
+            required: this.required
+          }),
+          st({
+            handleTimeSelect: t
+          })
+        ]
+      );
+    }
+  }
+), nt = (e, t) => n({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${t}` }, [
+  I({ size: "lg" }, e)
+]), lt = ({ title: e }) => L({ class: "flex flex-auto items-center" }, [
+  $({ class: "text-lg font-semibold" }, e)
+]), rt = d((e, t) => oe(
+  {
+    class: `fixed pullUpIn z-30 w-[98%] border md:w-full max-w-lg bg-popover text-foreground shadow-lg duration-200
+                rounded-lg flex flex-auto flex-col
+                bottom-4 top-auto inset-auto m-auto md:bottom-0 md:top-0 left-0 right-0 ${e.class}`,
+    click: e.click,
+    aria: { expanded: ["open"] }
+  },
+  [
+    n({ class: "flex flex-auto p-6 pb-12 md:pb-6" }, [
+      // Icon and content
+      e.icon && nt(e.icon, e.iconColor),
+      n({ class: "flex flex-auto flex-col gap-4" }, [
+        n({ class: "flex flex-auto flex-col space-y-2" }, [
+          lt(e),
+          e.description && p({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, e.description),
+          n({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, t)
+        ]),
+        e.buttons && M({ class: "flex flex-col-reverse sm:flex-row sm:justify-end mt-6 gap-2 sm:gap-0 sm:space-x-2" }, e.buttons)
+      ])
+    ])
+  ]
+)), at = (e) => H.render(e, app.root), O = {
+  info: {
+    borderColor: "border-blue-500",
+    bgColor: "bg-muted/10",
+    iconColor: "text-blue-500"
+  },
+  warning: {
+    bgColor: "bg-muted/10",
+    borderColor: "border-warning",
+    iconColor: "text-warning"
+  },
+  destructive: {
+    bgColor: "bg-muted/10",
+    borderColor: "border-destructive",
+    iconColor: "text-red-500"
+  },
+  success: {
+    bgColor: "bg-muted/10",
+    borderColor: "border-emerald-500",
+    iconColor: "text-emerald-500"
+  },
+  default: {
+    borderColor: "border",
+    bgColor: "bg-muted/10",
+    iconColor: "text-muted-foreground"
+  }
+};
+class it extends x {
+  constructor() {
+    super(...arguments);
+    /**
+    * @member {string} title
+    */
+    i(this, "title", null);
+    /**
+     * @member {string} description
+     */
+    i(this, "description", null);
+    /**
+     * @member {string} Type
+        * @default ''
+        * @values 'info', 'warning', 'destructive', 'success', 'default'
+     */
+    i(this, "type", "");
+    /**
+     * @member {string} icon
+     */
+    i(this, "icon", null);
+    /**
+     * @member {function|null} onClose
+     */
+    i(this, "onClose", null);
+    /**
+     * @member {boolean} hideFooter
+     */
+    i(this, "hideFooter", !1);
+    /**
+     * @member {Array|null} buttons
+     */
+    i(this, "buttons", null);
+  }
+  /**
+   * This will render the modal component.
+   *
+   * @returns {object}
+   */
+  render() {
+    const o = (R) => {
+      R.target === this.panel && this.close();
+    }, { borderColor: s, bgColor: a, iconColor: l } = O[this.type] || O.default, r = `${this.getMainClass()} ${a} ${s}`, b = this.title || "Dialog Title";
+    return rt({
+      class: r,
+      title: b,
+      click: o,
+      icon: this.icon,
+      iconColor: l,
+      description: this.description,
+      buttons: this.getButtons()
+    }, this.children);
+  }
+  /**
+   * This will get the buttons for the modal.
+   *
+   * @returns {array}
+   */
+  getButtons() {
+    return this.hideFooter ? null : this.buttons ? this.buttons : [
+      m({ variant: "outline", click: () => this.close() }, "Close")
+    ];
+  }
+  /**
+   * This will setup the states.
+   *
+   * @returns {object}
+   */
+  setupStates() {
+    return {
+      open: !1
+    };
+  }
+  /**
+  * This will get the modal class.
+  *
+  * @returns {string}
+  */
+  getMainClass() {
+    return "";
+  }
+  /**
+   * This will open the modal.
+   *
+   * @returns {void}
+   */
+  open() {
+    at(this), this.panel.showModal(), this.state.open = !0;
+  }
+  /**
+   * This will close the modal.
+   *
+   * @returns {void}
+   */
+  close() {
+    this.state.open = !1, this.panel.close(), typeof this.onClose == "function" && this.onClose(), this.destroy();
+  }
+}
+class Et extends it {
+  constructor() {
+    super(...arguments);
+    /**
+     * @member {string} confirmTextLabel
+     */
+    i(this, "confirmTextLabel", null);
+    /**
+     * @member {function} confirmed
+     */
+    i(this, "confirmed", null);
+  }
+  /**
+      * This will get the buttons for the modal.
+      *
+      * @returns {array}
+      */
+  getButtons() {
+    const o = this.confirmTextLabel || "Confirm";
+    return [
+      m({ variant: "outline", click: () => this.close() }, "Cancel"),
+      m({ variant: "primary", click: () => this.confirm() }, o)
+    ];
+  }
+  /**
+   * This will confirm the action.
+   *
+   * @returns {void}
+   */
+  confirm() {
+    this.confirmed && this.confirmed(), this.close();
+  }
+}
+export {
+  pt as A,
+  Bt as B,
+  Mt as C,
+  me as D,
+  rt as E,
+  ve as F,
+  it as G,
+  kt as M,
+  St as N,
+  Ke as P,
+  Ct as S,
+  Dt as T,
+  be as a,
+  xt as b,
+  xe as c,
+  Ce as d,
+  ke as e,
+  Se as f,
+  Ie as g,
+  wt as h,
+  Ae as i,
+  yt as j,
+  vt as k,
+  Fe as l,
+  It as m,
+  Tt as n,
+  At as o,
+  y as p,
+  g as q,
+  je as r,
+  $t as s,
+  Je as t,
+  Qe as u,
+  Lt as v,
+  Nt as w,
+  zt as x,
+  Ft as y,
+  Et as z
+};