@base-framework/ui 1.0.1726 → 1.0.2000

package/dist/{confirmation-BxmDhBjv.js → empty-state-BfT4MKkN.js}

@@ -1,11 +1,13 @@
-import { Div as n, H5 as _, P as b, I as g, Li as O, Span as a, Ul as V, Button as m, OnState as v, Label as R, Form as W, H2 as A, Header as B, Footer as M, A as Y, H3 as G, Checkbox as J, Nav as K, Input as C, UseParent as Q, Time as X, Dialog as Z } from "@base-framework/atoms";
-import { Atom as c, Component as p, Html as L, Dom as ee, base as te, Data as k, Builder as H, Jot as S, DateTime as $ } from "@base-framework/base";
-import { P as D, b as se } from "./calendar-DQXME-2u.js";
-import { B as h, I as x } from "./buttons-Cm9etaEG.js";
+import { Div as n, H5 as X, P as b, I as x, Li as q, Span as a, Ul as Y, Button as m, OnState as D, Label as A, H2 as S, Form as Z, Header as T, Footer as M, A as V, H3 as ee, Checkbox as te, Input as f, Img as _, Nav as se, UseParent as W, OnStateOpen as P, Time as oe, Dialog as ne } from "@base-framework/atoms";
+import { Atom as c, Component as y, Html as O, Dom as re, base as le, Data as F, Builder as G, Jot as w, Events as p, DateTime as L } from "@base-framework/base";
+import { P as I, b as ie, R as ae } from "./range-calendar-BMWSJTE0.js";
+import { C as ce, F as ue } from "./form-group-CJzpq9Us.js";
+import { B as h, I as g } from "./buttons-CHEs54Wl.js";
 import { Icons as u } from "./icons.es.js";
-import { a as w } from "./veil-D4dRxILB.js";
-import { Timer as oe, List as ne, DynamicTime as re } from "@base-framework/organisms";
-const P = {
+import { Timer as de, List as he, DynamicTime as fe } from "@base-framework/organisms";
+import { a as C } from "./veil-CqnAmj-D.js";
+import { F as j } from "./format-BLolnx9j.js";
+const z = {
   info: {
     borderColor: "border-blue-500",
     bgColor: "bg-muted/10",
@@ -31,20 +33,20 @@ const P = {
     bgColor: "bg-muted/10",
     iconColor: "text-muted-foreground"
   }
-}, le = (e, t) => n({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
-  g({ html: e })
-]), ie = (e) => _({ class: "font-semibold" }, e), ae = (e) => b({ class: "text-sm text-muted-foreground" }, e), mt = c(({ title: e, description: t, icon: s, type: o = "default" }) => {
-  const { borderColor: l, bgColor: r, iconColor: i } = P[o] || P.default;
-  return n({ class: `flex items-start p-4 border rounded-lg ${r} ${l}` }, [
+}, me = (e, t) => n({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
+  x({ html: e })
+]), ge = (e) => X({ class: "font-semibold" }, e), pe = (e) => b({ class: "text-sm text-muted-foreground" }, e), Lt = c(({ title: e, description: t, icon: s, type: o = "default" }) => {
+  const { borderColor: r, bgColor: l, iconColor: i } = z[o] || z.default;
+  return n({ class: `flex items-start p-4 border rounded-lg ${l} ${r}` }, [
     // Icon and content
-    s && le(s, i),
+    s && me(s, i),
     n({ class: "flex flex-col" }, [
-      ie(e),
-      ae(t)
+      ge(e),
+      pe(t)
     ])
   ]);
 });
-class ce extends p {
+class At extends y {
   /**
    * This will declare the props for the compiler.
    *
@@ -62,48 +64,48 @@ class ce extends p {
     this.prepareDestroy(), this.removeContext();
     const t = this.panel, s = this.removingClass;
     if (!s) {
-      L.removeElement(t);
+      O.removeElement(t);
       return;
     }
-    ee.addClass(t, s), te.on("animationend", t, (o) => L.removeElement(t));
+    re.addClass(t, s), le.on("animationend", t, (o) => O.removeElement(t));
   }
 }
-const de = (e) => a({ class: "ml-auto text-xs tracking-widest opacity-60" }, e), ue = (e) => a({ class: "flex w-4 h-4", html: e }), he = (e) => a({ class: "flex-auto" }, e), me = (e, t) => O({
+const be = (e) => a({ class: "ml-auto text-xs tracking-widest opacity-60" }, e), xe = (e) => a({ class: "flex w-4 h-4", html: e }), ve = (e) => a({ class: "flex-auto" }, e), ye = (e, t) => q({
   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 && ue(e.icon),
-  he(e.label),
-  e.shortcut && de(e.shortcut)
-]), fe = (e, t) => V({ class: "grid gap-2" }, [
-  e.map((s) => me(s, t))
-]), ge = (e) => n({ class: "w-full z-10" }, [
+  e.icon && xe(e.icon),
+  ve(e.label),
+  e.shortcut && be(e.shortcut)
+]), we = (e, t) => Y({ class: "grid gap-2" }, [
+  e.map((s) => ye(s, t))
+]), Ce = (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) => fe(t, e)]
+    for: ["groups", (t) => we(t, e)]
   })
-]), be = ({ label: e, icon: t, toggleDropdown: s }) => m({
+]), Se = ({ label: e, icon: t, toggleDropdown: s }) => m({
   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
+  class: `inline-flex items-center justify-between rounded-md border
+			px-2 py-2 text-sm font-medium hover:bg-muted
 			focus:outline-none transition duration-150 ease-in-out`,
   click: s
 }, [
   e && a(e),
-  t && g({ html: t })
-]), pe = ({ onSelect: e }) => n([
-  v(
+  t && x({ html: t })
+]), Ie = ({ onSelect: e }) => n([
+  D(
     "open",
-    (t, s, o) => t ? new D({
+    (t, s, o) => t ? new I({
       cache: "dropdown",
       parent: o,
       button: o.button
     }, [
-      ge(e)
+      Ce(e)
     ]) : null
   )
 ]);
-class ft extends p {
+class Mt extends y {
   /**
    * This will declare the props for the compiler.
    *
@@ -118,7 +120,7 @@ class ft extends p {
    * @returns {Data}
    */
   setData() {
-    return new k({
+    return new F({
       groups: this.groups || []
     });
   }
@@ -157,33 +159,42 @@ class ft extends p {
    */
   render() {
     return n({ class: "relative" }, [
-      be({
+      Se({
         label: this.label,
         icon: this.icon,
         toggleDropdown: this.toggleDropdown.bind(this)
       }),
-      pe({ onSelect: this.handleSelect.bind(this) })
+      Ie({ onSelect: this.handleSelect.bind(this) })
     ]);
   }
 }
-const xe = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t)), we = c((e, t) => R({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), ye = c((e, t) => b({ ...e, class: "text-sm text-muted-foreground italic" }, t)), ve = c((e, t) => b({ ...e, class: "text-sm text-destructive" }, t)), Ce = (e) => e.tag === "input" || e.tag === "select" || e.tag === "textarea", U = (e, t, s) => e.map((o) => (o.children && o.children.length > 0 && (o.children = U(o.children, t, s)), o.required && Ce(o) ? {
+const ke = c((e, t) => n({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t)), De = c((e, t) => A({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), Te = c((e, t) => b({ ...e, class: "text-sm text-muted-foreground italic" }, t)), Fe = c((e, t) => b({ ...e, class: "text-sm text-destructive" }, t)), Pt = c((e, t = []) => ce({ class: "flex flex-auto flex-col gap-y-0", margin: "m-0", padding: "p-0" }, [
+  e.title && S({ class: "text-lg font-semibold py-4 px-6" }, e.title),
+  e.description && b({ class: "text-sm text-muted-foreground pb-4 px-6 max-w-[700px]" }, e.description),
+  ...t
+])), Ot = c((e, t = []) => ue({ label: e.label, description: e.description, class: "py-4 px-6", border: e.border }, [
+  n({ class: "flex flex-col gap-y-6" }, t)
+])), jt = c((e, t = []) => {
+  const s = e.border ? "border-t" : "";
+  return n({ ...e, class: `flex flex-col pb-4 px-6 gap-y-4 ${s} ${e.class || ""}` }, t);
+}), $e = (e) => e.tag === "input" || e.tag === "select" || e.tag === "textarea", J = (e, t, s) => e.map((o) => !o || (o.children && o.children.length > 0 && (o.children = J(o.children, t, s)), !o.required) ? o : $e(o) ? {
   ...o,
   aria: {
     invalid: ["hasError"]
   },
   invalid: s,
   input: t
-} : o)), ke = c((e, t) => {
-  const l = U(t, (r) => {
-    r.target.checkValidity() && e.setError(null);
-  }, (r) => {
-    e.setError(r.target.validationMessage);
+} : o), Be = c((e, t) => {
+  const r = J(t, (l) => {
+    l.target.checkValidity() && e.setError(null);
+  }, (l) => {
+    e.setError(l.target.validationMessage);
   });
   return n({
     ...e,
     class: "w-full"
-  }, l);
-}), gt = w(
+  }, r);
+}), zt = C(
   {
     /**
      * The initial state of the FormField.
@@ -204,70 +215,70 @@ const xe = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
      * @returns {object}
      */
     render() {
-      const e = this.name, t = this.getId(`${e}`), { label: s, description: o } = this, l = (r) => {
-        this.state.error = r, this.state.hasError = !!r;
+      const e = this.name, t = this.getId(`${e}`), { label: s, description: o } = this, r = (l) => {
+        this.state.error = l, this.state.hasError = !!l;
       };
-      return n({ class: "flex flex-auto space-y-4" }, [
-        xe([
-          we({ htmlFor: t }, s),
-          ke({
+      return n({ class: "flex flex-auto gap-y-4" }, [
+        ke([
+          De({ htmlFor: t }, s),
+          Be({
             id: t,
             name: e,
             value: this.state.value,
-            setError: l
+            setError: r
           }, this.children),
-          o && ye({ id: this.getId("description") }, o),
-          n({ onState: ["error", (r) => r && ve(r)] })
+          o && Te({ id: this.getId("description") }, o),
+          n({ onState: ["error", (l) => l && Fe(l)] })
         ])
       ]);
     }
   }
-), Se = (e, t, s = null) => {
+), Le = (e, t, s = null) => {
   e.target.checkValidity() && (e.preventDefault(), s && s(e, t));
-}, De = c(
-  (e, t) => W({ ...e, submit: (s, o) => Se(s, o, e.submit), class: `w-full ${e.class ?? ""}` }, t)
-), bt = c((e, t) => n({ ...e, class: `space-y-6 p-4 md:p-6 divide-y ${e.class || ""}` }, t)), pt = c((e, t = []) => n({ class: "space-y-3 py-4" }, [
-  e.title && A({ class: "font-semibold" }, e.title),
+}, K = c(
+  (e, t) => Z({ ...e, submit: (s, o) => Le(s, o, e.submit), class: `w-full ${e.class ?? ""}` }, t)
+), Et = c((e, t) => n({ ...e, class: `flex flex-auto flex-col gap-y-6 p-4 md:p-6 divide-y ${e.class || ""}` }, t)), Nt = c((e, t = []) => n({ class: "flex flex-col gap-y-3 py-4" }, [
+  e.title && S({ class: "font-semibold" }, e.title),
   ...t
-])), xt = (e, t) => n({ class: "flex justify-between" }, [
+])), Ut = (e, t) => n({ class: "flex justify-between" }, [
   a({ class: "text-muted-foreground" }, e),
   a(t)
-]), wt = (e, t) => n({ class: "flex" }, [
+]), Rt = (e, t) => n({ class: "flex" }, [
   a({ class: "text-muted-foreground mr-8 w-24 truncate text-nowrap" }, e),
   a(t)
-]), Ie = ({ title: e, description: t, back: s, icon: o, options: l = [] }) => B({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10" }, [
+]), Ae = ({ title: e, description: t, back: s, icon: o, options: r = [] }) => T({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10 min-w-0" }, [
   /**
    * Back Button
    */
-  s && h({ variant: "icon", icon: u.arrows.left, class: "mr-2 p-0 flex sm:hidden", click: (r, i) => i.close() }),
+  s && h({ variant: "icon", icon: u.arrows.left, class: "mr-2 p-0 flex sm:hidden", click: (l, i) => i.close() }),
   /**
    * Icon
    */
-  o && n({ class: "mr-2 w-12 h-12 rounded-full bg-muted flex flex-none items-center justify-center" }, [x(o)]),
+  o && n({ class: "mr-2 w-12 h-12 rounded-full bg-muted flex flex-none items-center justify-center" }, [g(o)]),
   /**
    * 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" }, [
-      A({ class: "text-lg font-semibold m-0 truncate" }, e),
+  n({ class: "flex flex-auto flex-row justify-between ml-2 gap-2 min-w-0" }, [
+    n({ class: "flex flex-auto flex-col min-w-0" }, [
+      S({ class: "text-lg font-semibold m-0 truncate" }, e),
       t && n({ class: "text-sm text-muted-foreground truncate" }, t)
     ]),
-    ...l
+    n({ class: "flex flex-none items-center gap-2" }, r)
   ])
-]), Te = c((e, t) => n({
+]), Me = c((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}`,
+  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 overflow-hidden ${e.class}`,
   click: (s, o) => {
     s.target === o.panel && (s.preventDefault(), s.stopPropagation(), o.state.open = !1);
   }
 }, [
-  De({ class: "modal-content relative bg-background z-[1] flex flex-auto flex-col space-y-4", submit: (s, o) => e.onSubmit && e.onSubmit(o) }, [
-    Ie(e),
+  K({ class: "modal-content relative bg-background z-[1] flex flex-auto flex-col gap-y-4 overflow-hidden", submit: (s, o) => e.onSubmit && e.onSubmit(o) }, [
+    Ae(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)
   ])
-])), $e = (e) => H.render(e, app.root);
-class yt extends p {
+])), Pe = (e) => G.render(e, app.root);
+class Ht extends y {
   /**
    * This will declare the props for the compiler.
    *
@@ -283,16 +294,16 @@ class yt extends p {
    */
   render() {
     const t = this.getMainClass(), s = this.title || "", o = this.description || null;
-    return Te(
+    return Me(
       {
         class: t,
         title: s,
         description: o,
         options: this.headerOptions(),
         buttons: this.getButtons(),
-        onSubmit: (l) => {
-          let r = !0;
-          this.onSubmit && (r = this.onSubmit(l)), r !== !1 && this.destroy();
+        onSubmit: (r) => {
+          let l = !0;
+          this.onSubmit && (l = this.onSubmit(r)), l !== !1 && this.destroy();
         },
         icon: this.icon,
         back: this.back ?? !1,
@@ -398,7 +409,7 @@ class yt extends p {
    * @returns {void}
    */
   open() {
-    $e(this), this.showModal();
+    Pe(this), this.showModal();
   }
   /**
    * This will destroy the modal.
@@ -427,7 +438,7 @@ class yt extends p {
     this.panel.hidePopover(), this.state.open = !1, typeof this.onClose == "function" && this.onClose(this), document.documentElement.style.overflowY = "auto";
   }
 }
-const F = {
+const E = {
   info: {
     bgColor: "bg-muted/10",
     borderColor: "border-blue-500",
@@ -453,25 +464,29 @@ const F = {
     borderColor: "border",
     iconColor: "text-muted-foreground"
   }
-}, Ae = (e) => B({ class: "flex justify-center" }, [
-  G({ class: "text-lg font-bold mb-0" }, e)
-]), Be = c(({ href: e, class: t }, s) => Y({
-  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}`,
+}, Oe = (e) => T({ class: "flex justify-center" }, [
+  ee({ class: "text-lg font-bold mb-0" }, e)
+]), je = c(({ href: e, class: t }, s) => V({
+  class: `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,
+  animateIn: "pullRightIn",
+  animateOut: "pullRight",
   role: "alert"
-}, s)), Me = c(({ close: e, class: t }, s) => n({
+}, s)), ze = c(({ close: e, class: t }, s) => 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(),
+  animateIn: "pullRightIn",
+  animateOut: "pullRight",
   role: "alert"
 }, s));
-class Le extends ce {
+class Ee extends y {
   /**
    * This will declare the props for the compiler.
    *
    * @returns {void}
    */
   declareProps() {
-    this.removingClass = "pullRight", this.secondaryAction = null, this.primaryAction = null, this.primary = !1, this.secondary = !1, this.title = null, this.description = null, this.icon = null, this.onClick = null;
+    this.secondaryAction = null, this.primaryAction = null, this.primary = !1, this.secondary = !1, this.title = null, this.description = null, this.icon = null, this.onClick = null;
   }
   /**
    * This will be called when the component is created.
@@ -487,14 +502,14 @@ class Le extends ce {
    * @returns {object}
    */
   render() {
-    const { bgColor: t, borderColor: s, iconColor: o } = this.getTypeStyles(), l = this.href || null, r = this.getChildren(o);
-    return l ? Be({
-      href: l,
+    const { bgColor: t, borderColor: s, iconColor: o } = this.getTypeStyles(), r = this.href || null, l = this.getChildren(o);
+    return r ? je({
+      href: r,
       class: `${t} ${s}`
-    }, r) : Me({
+    }, l) : ze({
       close: this.close.bind(this),
       class: `${t} ${s}`
-    }, r);
+    }, l);
   }
   /**
    * This will be called after the component is set up.
@@ -503,7 +518,7 @@ class Le extends ce {
    */
   afterSetup() {
     const t = this.duration;
-    t !== "infinite" && (this.timer = new oe(t, this.close.bind(this)), this.timer.start());
+    t !== "infinite" && (this.timer = new de(t, this.close.bind(this)), this.timer.start());
   }
   /**
    * This will get the style properties based on the notification type.
@@ -512,7 +527,7 @@ class Le extends ce {
    */
   getTypeStyles() {
     const t = this.type || "default";
-    return F[t] || F.default;
+    return E[t] || E.default;
   }
   /**
    * This will get the buttons for the notification.
@@ -536,10 +551,10 @@ class Le extends ce {
   getChildren(t) {
     return [
       n({ class: "flex items-start" }, [
-        this.icon && g({ class: `mr-4 ${t}`, html: this.icon }),
+        this.icon && x({ class: `mr-4 ${t}`, 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 && Ae(this.title)
+            this.title && Oe(this.title)
           ]),
           b({ 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())
@@ -563,8 +578,8 @@ class Le extends ce {
     t && t.stopPropagation(), this.duration !== "infinite" && this.timer.stop(), this.onClick && this.onClick(), this.destroy();
   }
 }
-let Pe = 0;
-class vt extends p {
+let Ne = 0;
+class qt extends y {
   /**
    * This will render the component.
    *
@@ -572,11 +587,11 @@ class vt extends p {
    */
   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 ne({
+      new he({
         cache: "list",
         key: "id",
         role: "list",
-        rowItem: (t) => new Le(t)
+        rowItem: (t) => new Ee(t)
       })
     ]);
   }
@@ -587,7 +602,7 @@ class vt extends p {
    * @returns {void}
    */
   addNotice(t = {}) {
-    t.id = Pe++, t.callBack = () => this.removeNotice(t), this.list.append([t]), this.panel.hidePopover(), this.panel.showPopover();
+    t.id = Ne++, t.callBack = () => this.removeNotice(t), this.list.append([t]), this.panel.hidePopover(), this.panel.showPopover();
   }
   /**
    * This will remove a notification.
@@ -596,29 +611,28 @@ class vt extends p {
    * @returns {void}
    */
   removeNotice(t) {
-    this.list.delete(t.id);
+    this.list.delete(t.id), this.list.isEmpty() && this.panel.hidePopover();
   }
 }
-const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
+const N = globalThis.matchMedia, $ = c(({ value: e, label: t, icon: s }) => m({
   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: (o, { state: l }) => {
-    l.method = e, localStorage.setItem("theme", e), e === "system" && localStorage.removeItem("theme"), Fe(e);
+  click: (o, { state: r }) => {
+    r.method = e, localStorage.setItem("theme", e), e === "system" && localStorage.removeItem("theme"), Ue(e);
   }
 }, [
-  x(s),
+  g(s),
   a(t)
-])), Fe = (e) => {
-  var o;
+])), Ue = (e) => {
   const t = document.documentElement;
-  if (e === "system" && (e = (o = globalThis.matchMedia) != null && o.call(globalThis, "(prefers-color-scheme: dark)").matches ? "dark" : "light"), N && !N("(prefers-color-scheme: " + e + ")").matches) {
+  if (e === "system" && (e = globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light"), N && !N("(prefers-color-scheme: " + e + ")").matches) {
     t.classList.add(e);
     return;
   }
   const s = e === "light" ? "dark" : "light";
   t.classList.remove(s);
-}, Ct = S(
+}, Yt = w(
   {
     /**
      * This will render the component.
@@ -628,9 +642,9 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
     render() {
       return n({ class: "flex flex-auto flex-col" }, [
         n({ class: "grid grid-cols-3 gap-4" }, [
-          I({ label: "System", value: "system", icon: u.adjustments.horizontal }),
-          I({ label: "Light", value: "light", icon: u.sun }),
-          I({ label: "Dark", value: "dark", icon: u.moon })
+          $({ label: "System", value: "system", icon: u.adjustments.horizontal }),
+          $({ label: "Light", value: "light", icon: u.sun }),
+          $({ label: "Dark", value: "dark", icon: u.moon })
         ])
       ]);
     },
@@ -645,7 +659,7 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
       };
     }
   }
-), kt = w(
+), Vt = C(
   {
     /**
      * The initial state of the Toggle.
@@ -676,10 +690,10 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
         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: s }) => {
-          s.toggle("active"), this.checkbox.checked = s.active;
+          s.toggle("active"), this.checkbox.checked = s.active, this.change && this.change(s.active, t, this);
         }
       }, [
-        J({
+        te({
           cache: "checkbox",
           class: "opacity-0 absolute top-0 left-0 bottom-0 right-0 w-full h-full",
           /**
@@ -697,27 +711,172 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
       ]);
     }
   }
-), y = {
+), k = {
   ONLINE: "online",
   OFFLINE: "offline",
   BUSY: "busy",
   AWAY: "away"
-}, f = {
+}, v = {
   ONLINE: "bg-green-500",
   OFFLINE: "bg-gray-500",
   BUSY: "bg-red-500",
   AWAY: "bg-yellow-500"
-}, Ne = (e = "") => (e = e.toUpperCase(), f[e] || f.OFFLINE), St = (e) => n({
-  class: `absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full ${Ne(e)}`
-}), Dt = ({ propName: e = "status" } = {}) => n({
+}, Re = (e = "") => (e = e.toUpperCase(), v[e] || v.OFFLINE), _t = (e) => n({
+  class: `absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full ${Re(e)}`
+}), Wt = ({ propName: e = "status" } = {}) => n({
   class: "absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full",
   onSet: [e, {
-    [f.ONLINE]: y.ONLINE,
-    [f.OFFLINE]: y.OFFLINE,
-    [f.BUSY]: y.BUSY,
-    [f.AWAY]: y.AWAY
+    [v.ONLINE]: k.ONLINE,
+    [v.OFFLINE]: k.OFFLINE,
+    [v.BUSY]: k.BUSY,
+    [v.AWAY]: k.AWAY
   }]
-}), ze = (e, t) => Y(
+}), He = (e) => e.indexOf(".") === -1 && e.indexOf("[[") === -1 && e.indexOf("blob:") === -1, Gt = w(
+  {
+    /**
+     * Get the initial state for the component.
+     *
+     * @returns {object} Initial state for the component
+     */
+    state() {
+      return {
+        // @ts-ignore
+        loaded: !!this.src
+      };
+    },
+    /**
+     * This will open the file browse dialog.
+     *
+     * @returns {void}
+     */
+    openFileBrowse() {
+      const e = this.input;
+      e && (e.value = "", p.trigger("click", e));
+    },
+    /**
+     * Get the URL for the uploaded file.
+     *
+     * @param {File} file - The file to get the URL for.
+     * @returns {string} The object URL for the file.
+     */
+    getFileUrl(e) {
+      return this.url && URL.revokeObjectURL(this.url), this.url = URL.createObjectURL(e);
+    },
+    /**
+     * Render the component.
+     *
+     * @returns {object} Rendered component
+     */
+    render() {
+      const e = "image-upload", t = this.onChange || null;
+      return n({ class: "flex-none items-center" }, [
+        f({
+          id: e,
+          cache: "input",
+          type: "file",
+          accept: "image/*",
+          class: "hidden",
+          change: (s) => {
+            const o = s.target.files?.[0];
+            o && t && (this.state.loaded = !1, t(o, this.parent), this.src = this.getFileUrl(o), this.state.loaded = !0);
+          }
+        }),
+        n({
+          class: "relative w-32 h-32 rounded-full border flex items-center justify-center cursor-pointer hover:bg-muted transition-colors duration-150 overflow-hidden group",
+          click: (s) => {
+            s.preventDefault(), s.stopPropagation(), this.openFileBrowse();
+          }
+        }, [
+          D("loaded", (s) => s === !1 || He(this.src) ? A({
+            htmlFor: e,
+            class: "z-10 flex flex-col items-center justify-center text-sm text-muted-foreground group-hover:text-primary"
+          }, [
+            g(u.upload),
+            n("Upload Image")
+          ]) : _({
+            // @ts-ignore
+            src: this.src,
+            class: "absolute inset-0 w-full h-full object-cover rounded-full"
+          }))
+        ])
+      ]);
+    }
+  }
+), Jt = w(
+  {
+    /**
+     * Get the initial state for the component.
+     *
+     * @returns {object} Initial state for the component
+     */
+    state() {
+      return {
+        // @ts-ignore
+        loaded: !!this.src
+      };
+    },
+    /**
+     * This will open the file browse dialog.
+     *
+     * @returns {void}
+     */
+    openFileBrowse() {
+      const e = this.input;
+      e && (e.value = "", p.trigger("click", e));
+    },
+    /**
+     * Get the URL for the uploaded file.
+     *
+     * @param {File} file - The file to get the URL for.
+     * @returns {string} The object URL for the file.
+     */
+    getFileUrl(e) {
+      return this.url && URL.revokeObjectURL(this.url), this.url = URL.createObjectURL(e);
+    },
+    /**
+     * Render the component.
+     *
+     * @returns {object} Rendered component
+     */
+    render() {
+      const e = "logo-upload", t = this.onChange || null;
+      return n({ class: "flex-none items-center" }, [
+        f({
+          id: e,
+          cache: "input",
+          type: "file",
+          accept: "image/*",
+          class: "hidden",
+          change: (s) => {
+            const o = s.target.files?.[0];
+            o && t && (this.state.loaded = !1, t(o, this.parent), this.src = this.getFileUrl(o), this.state.loaded = !0);
+          }
+        }),
+        n({
+          class: "relative w-32 h-32 rounded-full border flex items-center justify-center cursor-pointer hover:bg-muted transition-colors duration-150 overflow-hidden group",
+          click: (s) => {
+            s.preventDefault(), s.stopPropagation(), this.openFileBrowse();
+          }
+        }, [
+          D(
+            "loaded",
+            (s) => s ? _({
+              // @ts-ignore
+              src: this.src,
+              class: "absolute inset-0 w-full h-full object-cover rounded-full"
+            }) : A({
+              htmlFor: e,
+              class: "z-10 flex flex-col items-center justify-center text-sm text-muted-foreground group-hover:text-primary"
+            }, [
+              g(u.upload),
+              n("Upload logo")
+            ])
+          )
+        ])
+      ]);
+    }
+  }
+), qe = (e, t) => V(
   {
     href: e,
     "aria-current": t === "Breadcrumb" && "page",
@@ -725,14 +884,14 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
     class: "text-muted-foreground font-medium hover:text-foreground"
   },
   [a(t)]
-), Ee = () => x({
+), Ye = () => g({
   class: "mx-3 text-muted-foreground",
   "aria-hidden": !0,
   size: "xs"
-}, u.chevron.single.right), je = (e) => n({ class: "flex items-center" }, [
-  e.href ? ze(e.href, e.label) : a(e.label),
-  e.separator && Ee()
-]), It = S(
+}, u.chevron.single.right), Ve = (e) => n({ class: "flex items-center" }, [
+  e.href ? qe(e.href, e.label) : a(e.label),
+  e.separator && Ye()
+]), Kt = w(
   {
     /**
      * Set initial data
@@ -740,7 +899,7 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
      * @returns {Data}
      */
     setData() {
-      return new k({
+      return new F({
         // @ts-ignore
         items: this.items || []
       });
@@ -752,16 +911,16 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
      */
     render() {
       const e = this.data.items.length - 1;
-      return K(
+      return se(
         {
           "aria-label": "Breadcrumb",
-          class: "flex items-center space-x-1 text-sm"
+          class: "flex items-center gap-x-1 text-sm"
         },
         [
           n({
             role: "list",
             class: "flex items-center",
-            for: ["items", (t, s) => je({
+            for: ["items", (t, s) => Ve({
               href: t.href,
               label: t.label,
               separator: s < e
@@ -771,7 +930,7 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
       );
     }
   }
-), z = {
+), U = {
   xs: "h-1 w-1",
   sm: "h-2 w-2",
   md: "h-4 w-4",
@@ -780,21 +939,21 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
   "2xl": "h-16 w-16",
   "3xl": "h-24 w-24",
   default: "h-4 w-4"
-}, Oe = (e) => z[e] || z.default, Ve = ({ index: e, size: t }) => n({ class: `${t} rounded-full bg-muted cursor-pointer` }, [
+}, _e = (e) => U[e] || U.default, We = ({ index: e, size: t }) => n({ class: `${t} rounded-full bg-muted cursor-pointer` }, [
   a({
     class: "block w-full h-full rounded-full transition-colors",
     onSet: ["activeIndex", {
       "bg-primary": e,
       "shadow-md": e
     }],
-    click: (s, { data: o, onClick: l }) => {
-      o.activeIndex = e, l && l(e);
+    click: (s, { data: o, onClick: r }) => {
+      o.activeIndex = e, r && r(e);
     }
   })
-]), Ye = (e, t) => Array.from({ length: e }, (s, o) => Ve({
+]), Ge = (e, t) => Array.from({ length: e }, (s, o) => We({
   index: o,
   size: t
-})), Tt = S(
+})), Qt = w(
   {
     /**
      * Defines component data (props).
@@ -802,7 +961,7 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
      * @returns {Data}
      */
     setData() {
-      return new k({
+      return new F({
         // @ts-ignore
         count: this.count || 4,
         // total dots
@@ -816,7 +975,7 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
      * @returns {object}
      */
     render() {
-      const e = this.gap || "gap-2", t = Oe(this.size || "sm"), s = Ye(this.data.count, t);
+      const e = this.gap || "gap-2", t = _e(this.size || "sm"), s = Ge(this.data.count, t);
       return n(
         { class: "flex justify-center items-center py-2" },
         [
@@ -825,37 +984,37 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
       );
     }
   }
-), He = ({ toggleDropdown: e }) => m(
+), Je = ({ toggleDropdown: e }) => m(
   {
     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",
+    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 bg-input hover:bg-muted h-10 px-4 py-2 justify-between",
     click: e
   },
   [
     a({ onState: ["selectedLabel", (t) => t || "Select item..."] }),
-    g({ html: u.chevron.upDown })
+    x({ html: u.chevron.upDown })
   ]
-), Ue = (e, t, s) => O({
+), Ke = (e, t, s) => q({
   class: "flex flex-auto items-center cursor-pointer p-2 hover:bg-muted/50 rounded-sm",
   click: () => t(e),
   onState: [s, "selectedValue", { "bg-secondary": e.value }]
 }, [
-  e.icon && a({ class: "mr-2 flex items-baseline" }, [x({ size: "xs" }, e.icon)]),
+  e.icon && a({ class: "mr-2 flex items-baseline" }, [g({ size: "xs" }, e.icon)]),
   a({ class: "text-base font-normal" }, e.label)
-]), qe = (e, t) => n({ class: "w-full border rounded-md" }, [
-  V({ class: "max-h-60 overflow-y-auto p-2 grid gap-1", for: ["items", (s) => Ue(s, e, t)] })
-]), _e = ({ onSelect: e, state: t }) => n({ class: "flex flex-auto flex-col" }, [
-  v(
+]), Qe = (e, t) => n({ class: "w-full border rounded-md" }, [
+  Y({ class: "max-h-60 overflow-y-auto p-2 grid gap-1", for: ["items", (s) => Ke(s, e, t)] })
+]), Xe = ({ onSelect: e, state: t }) => n({ class: "flex flex-auto flex-col" }, [
+  D(
     "open",
-    (s, o, l) => s ? new D({
+    (s, o, r) => s ? new I({
       cache: "dropdown",
-      parent: l,
-      button: l.button
+      parent: r,
+      button: r.button
     }, [
-      qe(e, t)
+      Qe(e, t)
     ]) : null
   )
-]), $t = S(
+]), Xt = w(
   {
     /**
      * This will set up the data.
@@ -863,7 +1022,7 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
      * @returns {Data}
      */
     setData() {
-      return new k({
+      return new F({
         // @ts-ignore
         items: this.items || []
       });
@@ -936,8 +1095,8 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
       const e = this.class || "", t = this.maxWidth || "max-w-[250px]", s = this.width || "w-full";
       return n({ class: `relative ${s} flex flex-auto flex-col ${t} ${e}` }, [
         // @ts-ignore
-        He({ toggleDropdown: this.toggleDropdown.bind(this) }),
-        _e({
+        Je({ toggleDropdown: this.toggleDropdown.bind(this) }),
+        Xe({
           // @ts-ignore
           state: this.state,
           // @ts-ignore
@@ -945,7 +1104,7 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
         }),
         // Hidden required input for form validation
         // @ts-ignore
-        this.required && C({
+        this.required && f({
           class: "opacity-0 absolute top-0 left-0 z-[1]",
           type: "text",
           // @ts-ignore
@@ -957,34 +1116,34 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
       ]);
     }
   }
-), q = ({ icon: e, click: t, ariaLabel: s }) => h({
+), Q = ({ icon: e, click: t, ariaLabel: s }) => h({
   variant: "icon",
   class: "flex flex-none",
   click: t,
   icon: e,
   "aria-label": s
-}), Re = ({ click: e }) => q({
+}), Ze = ({ click: e }) => Q({
   icon: u.circleMinus,
   click: e,
   ariaLabel: "Decrement"
-}), We = ({ click: e }) => q({
+}), et = ({ click: e }) => Q({
   icon: u.circlePlus,
   click: e,
   ariaLabel: "Increment"
-}), Ge = ({ bind: e, min: t, max: s, readonly: o = !1 }) => Q(({ state: l }) => C({
-  value: ["[[count]]", l],
+}), tt = ({ bind: e, min: t, max: s, readonly: o = !1 }) => W(({ state: r }) => f({
+  value: ["[[count]]", r],
   bind: e,
-  blur: (r, { state: i }) => {
-    let d = parseInt(r.target.value, 10);
+  blur: (l, { state: i }) => {
+    let d = parseInt(l.target.value, 10);
     isNaN(d) && (d = t ?? 0), t !== void 0 && (d = Math.max(d, t)), s !== void 0 && (d = Math.min(d, s)), i.count = d;
   },
-  class: "flex flex-auto text-lg font-medium bg-transparent text-center border min-w-0",
+  class: "flex flex-auto text-lg font-medium bg-input text-center border min-w-0",
   readonly: o,
   min: t,
   max: s,
   type: "number",
   "aria-label": "Counter"
-})), At = w(
+})), Zt = C(
   {
     /**
      * Initial state for the counter component.
@@ -1006,47 +1165,69 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
      */
     render() {
       const e = this.class ?? "";
-      return n({ class: `flex flex-auto items-center justify-between space-x-4 p-4 ${e}` }, [
-        Re({ click: () => this.state.decrement("count") }),
-        Ge({
+      return n({ class: `flex flex-auto items-center justify-between gap-x-4 p-4 ${e}` }, [
+        Ze({ click: () => this.state.decrement("count") }),
+        tt({
           bind: this.bind,
           readonly: this.readonly,
           min: this.min,
           max: this.max
         }),
-        We({ click: () => this.state.increment("count") })
+        et({ click: () => this.state.increment("count") })
       ]);
     }
   }
-), Je = ({ bind: e, required: t }) => C({
+), st = (e) => {
+  let t = "";
+  return e.length > 0 && (t = e.substring(0, 2), e.length > 2 && (t += "/" + e.substring(2, 4), e.length > 4 && (t += "/" + e.substring(4, 8)))), t;
+}, ot = (e) => {
+  if (e.length !== 8)
+    return null;
+  const t = parseInt(e.substring(0, 2), 10), s = parseInt(e.substring(2, 4), 10), o = parseInt(e.substring(4, 8), 10);
+  return t >= 1 && t <= 12 && s >= 1 && s <= 31 && o >= 1900 ? `${o}-${t.toString().padStart(2, "0")}-${s.toString().padStart(2, "0")}` : null;
+}, nt = ({ bind: e, required: t }) => f({
   cache: "input",
   class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
   bind: e,
   required: t
-}), Ke = ({ bind: e, required: t, toggleOpen: s }) => m({
-  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: s
-}, [
-  Je({ bind: e, required: t }),
-  a({
-    onState: ["selectedDate", (o) => o ? $.format("standard", o) : "Pick a date"]
-  }),
-  g({ html: u.calendar.days })
-]), Qe = ({ handleDateSelect: e, blockPriorDates: t }) => v(
-  "open",
-  (s, o, l) => s ? new D({
+}), rt = ({ placeholder: e, handleInputChange: t, handleInputFocus: s }) => f({
+  cache: "dateInput",
+  class: "flex-1 bg-transparent outline-none placeholder:text-muted-foreground border-0",
+  placeholder: e || "mm/dd/yyyy",
+  input: t,
+  focus: s,
+  onState: ["selectedDate", (o) => o ? L.format("standard", o) : ""]
+}), lt = ({ bind: e, required: t, toggleOpen: s, handleInputChange: o, handleInputFocus: r, placeholder: l }) => n(
+  {
+    class: "relative flex items-center gap-2 w-full justify-between border bg-input hover:bg-muted rounded-md h-10 pr-4 py-2"
+  },
+  [
+    nt({ bind: e, required: t }),
+    rt({ placeholder: l, handleInputChange: o, handleInputFocus: r }),
+    m(
+      {
+        class: "flex-shrink-0 hover:bg-muted/50 rounded p-1 cursor-pointer",
+        click: s
+      },
+      [
+        x({ html: u.calendar.days })
+      ]
+    )
+  ]
+), it = ({ handleDateSelect: e, blockPriorDates: t }) => P(
+  (s, o, r) => new I({
     cache: "dropdown",
-    parent: l,
-    button: l.panel,
+    parent: r,
+    button: r.panel,
     size: "fit"
   }, [
-    new se({
-      selectedDate: l.state.selectedDate,
+    new ie({
+      selectedDate: r.state.selectedDate,
       selectedCallBack: e,
       blockPriorDates: t
     })
-  ]) : null
-), Bt = w(
+  ])
+), es = C(
   {
     /**
      * The initial state of the DatePicker.
@@ -1068,141 +1249,283 @@ const N = globalThis.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
     after() {
       this.input.value && (this.state.selectedDate = this.input.value);
     },
+    /**
+     * Handles direct input changes and formats the date.
+     *
+     * @param {Event} e
+     */
+    handleInputChange(e) {
+      const s = e.target.value.replace(/\D/g, "");
+      e.target.value = st(s);
+      const o = ot(s);
+      o && (this.state.selectedDate = o, this.input.value = o, p.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(o));
+    },
+    /**
+     * Handles input focus - select all text for easy editing.
+     *
+     * @param {Event} e
+     */
+    handleInputFocus(e) {
+      e.target.select();
+    },
+    /**
+     * Handles date selection from calendar.
+     *
+     * @param {string} date
+     */
+    handleDateSelect(e) {
+      this.state.selectedDate = e, this.state.open = !1, this.input.value = e, p.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(e);
+    },
+    /**
+     * Toggles the calendar popover.
+     *
+     * @param {Event} e
+     * @param {object} context
+     */
+    toggleOpen(e, { state: t }) {
+      t.toggle("open");
+    },
     /**
      * Renders the DatePicker component.
      *
      * @returns {object}
      */
     render() {
-      const e = (s, { state: o }) => o.toggle("open"), t = (s) => {
-        this.state.selectedDate = s, this.state.open = !1, this.input.value = s, typeof this.onChange == "function" && this.onChange(s);
+      return n(
+        { class: "relative w-full max-w-[320px]" },
+        [
+          lt({
+            toggleOpen: this.toggleOpen.bind(this),
+            bind: this.bind,
+            required: this.required,
+            handleInputChange: this.handleInputChange.bind(this),
+            handleInputFocus: this.handleInputFocus.bind(this),
+            placeholder: this.placeholder
+          }),
+          it({
+            handleDateSelect: this.handleDateSelect.bind(this),
+            blockPriorDates: this.blockPriorDates || !1
+          })
+        ]
+      );
+    }
+  }
+), at = ({ bind: e, required: t }) => f({
+  cache: "input",
+  class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
+  bind: e,
+  required: t
+}), ct = ({ bind: e, required: t, toggleOpen: s }) => m({
+  class: "relative flex items-center gap-2 w-full justify-between border bg-input hover:bg-muted rounded-md h-10 px-4 py-2",
+  click: s
+}, [
+  at({ bind: e, required: t }),
+  W(({ state: o }) => [
+    a(j.date(["[[start]]", o], "Start Date")),
+    a(" - "),
+    a(j.date(["[[end]]", o], "End Date"))
+  ]),
+  x({ html: u.calendar.days })
+]), ut = ({ handleDateSelect: e, blockPriorDates: t }) => P((s, o, r) => new I({
+  cache: "dropdown",
+  parent: r,
+  button: r.panel,
+  size: "xl"
+}, [
+  new ae({
+    startDate: r.state.start,
+    endDate: r.state.end,
+    onRangeSelect: e,
+    blockPriorDates: t
+  })
+])), ts = C(
+  {
+    /**
+     * The initial state of the DateRangePicker.
+     *
+     * @member {object} state
+     */
+    state() {
+      return {
+        start: this.start ?? null,
+        end: this.end ?? 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() {
+      if (this.input.value) {
+        const e = this.input.value.split("-");
+        this.state.start = e[0], this.state.end = e[1];
+      }
+    },
+    /**
+     * Renders the DatePicker component.
+     *
+     * @returns {object}
+     */
+    render() {
+      const e = (s, { state: o }) => o.toggle("open"), t = (s, o) => {
+        this.state.start = s, this.state.end = o, this.state.open = !1, this.input.value = `${s}-${o}`, p.trigger("change", this.input), typeof this.onChange == "function" && this.onChange({ start: s, end: o }, this.parent);
       };
       return n({ class: "relative w-full max-w-[320px]" }, [
-        Ke({
+        ct({
           toggleOpen: e,
           bind: this.bind,
           required: this.required
         }),
-        Qe({
+        ut({
           handleDateSelect: t,
           blockPriorDates: this.blockPriorDates || !1
         })
       ]);
     }
   }
-), Mt = ({ dateTime: e = "", remoteTimeZone: t = "America/Denver", filter: s = null }) => X([
-  new re({
+), ss = ({ dateTime: e = "", remoteTimeZone: t = "America/Denver", filter: s = null }) => oe([
+  new fe({
     dateTime: e,
     filter: s || ((o) => {
-      const l = $.getLocalTime(o, !0, !1, t);
-      return $.getTimeFrame(l);
+      const r = L.getLocalTime(o, !0, !1, t);
+      return L.getTimeFrame(r);
     })
   })
 ]);
-function Xe({ bind: e, required: t }) {
-  return C({
+function dt(e) {
+  let t = "";
+  return e.length > 0 && (t = e.substring(0, 2), e.length > 2 && (t += ":" + e.substring(2, 4))), t;
+}
+function ht(e) {
+  if (e.length < 4)
+    return { formattedTime: null, hour: null, minute: null, meridian: null };
+  const t = parseInt(e.substring(0, 2), 10), s = parseInt(e.substring(2, 4), 10);
+  if (t < 0 || t > 23 || s < 0 || s > 59)
+    return { formattedTime: null, hour: null, minute: null, meridian: null };
+  let o = t, r = "AM";
+  return t === 0 ? o = 12 : t > 12 ? (o = t - 12, r = "PM") : t === 12 && (r = "PM"), {
+    formattedTime: `${o.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")} ${r}`,
+    hour: o.toString().padStart(2, "0"),
+    minute: s.toString().padStart(2, "0"),
+    meridian: r
+  };
+}
+function ft({ bind: e, required: t }) {
+  return f({
     cache: "input",
     class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
     bind: e,
     required: t
   });
 }
-function Ze({ bind: e, required: t, toggleOpen: s }) {
-  return m(
+function mt({ placeholder: e, handleInputChange: t, handleInputFocus: s }) {
+  return f({
+    cache: "timeInput",
+    class: "flex-1 bg-transparent outline-none placeholder:text-muted-foreground border-0",
+    placeholder: e || "hh:mm AM/PM",
+    input: t,
+    focus: s,
+    onState: ["selectedTime", (o) => o || ""]
+  });
+}
+function gt({ bind: e, required: t, toggleOpen: s, handleInputChange: o, handleInputFocus: r, placeholder: l }) {
+  return n(
     {
-      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: s
+      class: "relative flex items-center gap-2 w-full justify-between border bg-input hover:bg-muted rounded-md h-10 pr-4 py-2"
     },
     [
-      Xe({ bind: e, required: t }),
-      a({
-        onState: ["selectedTime", (o) => o || "Pick a time"]
-      }),
-      g({ html: u.clock })
+      ft({ bind: e, required: t }),
+      mt({ placeholder: l, handleInputChange: o, handleInputFocus: r }),
+      m(
+        {
+          class: "flex-shrink-0 hover:bg-muted/50 rounded p-1 cursor-pointer",
+          click: s
+        },
+        [
+          x({ html: u.clock })
+        ]
+      )
     ]
   );
 }
-function T({ items: e, handleTimeSelect: t, state: s, stateValue: o, pad: l = !1 }) {
+function B({ items: e, handleTimeSelect: t, state: s, stateValue: o, pad: r = !1 }) {
   return n(
     { class: "flex flex-col max-h-[200px] overflow-y-auto" },
-    e.map((r) => {
-      let i = l ? r.toString().padStart(2, "0") : r.toString();
+    e.map((l) => {
+      let i = r ? l.toString().padStart(2, "0") : l.toString();
       return m({
         text: i,
-        class: "hover:bg-muted/50 rounded-md px-2 py-1",
+        class: "hover:bg-muted/50 rounded-md pr-2 py-1",
         click: () => t({ [o]: i }),
         onState: [s, o, { "bg-muted": i }]
       });
     })
   );
 }
-function et({ handleTimeSelect: e }) {
-  return n(
-    { class: "absolute mt-1 z-10 bg-background rounded-md shadow-lg" },
-    [
-      v(
-        "open",
-        (t, s, o) => t ? new D(
-          {
-            cache: "dropdown",
-            parent: o,
-            button: o.panel,
-            size: "fit"
-          },
+function pt({ handleTimeSelect: e }) {
+  return P(
+    (t, s, o) => new I(
+      {
+        cache: "dropdown",
+        parent: o,
+        button: o.panel,
+        size: "fit"
+      },
+      [
+        n(
+          { class: "flex flex-auto flex-col border rounded-md shadow-md" },
           [
             n(
-              { class: "flex flex-auto flex-col border rounded-md shadow-md" },
+              { class: "grid grid-cols-3 gap-2 p-4 text-center max-h-[220px] min-w-[240px]" },
               [
-                n(
-                  { class: "grid grid-cols-3 gap-2 p-4 text-center max-h-[220px] min-w-[240px]" },
-                  [
-                    // Hours column
-                    T({
-                      items: Array.from({ length: 12 }, (l, r) => r + 1),
-                      handleTimeSelect: e,
-                      state: o.state,
-                      stateValue: "hour",
-                      pad: !0
-                    }),
-                    // Minutes column
-                    T({
-                      items: Array.from({ length: 60 }, (l, r) => r),
-                      handleTimeSelect: e,
-                      state: o.state,
-                      stateValue: "minute",
-                      pad: !0
-                    }),
-                    // AM/PM column
-                    T({
-                      items: ["AM", "PM"],
-                      handleTimeSelect: e,
-                      state: o.state,
-                      stateValue: "meridian"
-                    })
-                  ]
-                )
+                // Hours column
+                B({
+                  items: Array.from({ length: 12 }, (r, l) => l + 1),
+                  handleTimeSelect: e,
+                  state: o.state,
+                  stateValue: "hour",
+                  pad: !0
+                }),
+                // Minutes column
+                B({
+                  items: Array.from({ length: 60 }, (r, l) => l),
+                  handleTimeSelect: e,
+                  state: o.state,
+                  stateValue: "minute",
+                  pad: !0
+                }),
+                // AM/PM column
+                B({
+                  items: ["AM", "PM"],
+                  handleTimeSelect: e,
+                  state: o.state,
+                  stateValue: "meridian"
+                })
               ]
             )
           ]
-        ) : null
-      )
-    ]
+        )
+      ]
+    )
   );
 }
-function E(e) {
+function R(e) {
   if (!e)
     return { hour: null, minute: null, meridian: null };
   const t = /^(\d{1,2}):(\d{2})(?::(\d{2}))?\s?(AM|PM)?$/i, s = e.match(t);
   if (!s)
     return { hour: null, minute: null, meridian: null };
-  let [, o, l, , r] = s, i = parseInt(o, 10), d = parseInt(l, 10);
-  return i < 0 || i > 23 || d < 0 || d > 59 ? { hour: null, minute: null, meridian: null } : (r ? (r = r.toUpperCase(), r === "PM" && i < 12 ? i += 12 : r === "AM" && i === 12 && (i = 12)) : i === 0 ? (r = "AM", i = 12) : i < 12 ? r = "AM" : i === 12 ? r = "PM" : (r = "PM", i -= 12), {
+  let [, o, r, , l] = s, i = parseInt(o, 10), d = parseInt(r, 10);
+  return i < 0 || i > 23 || d < 0 || d > 59 ? { hour: null, minute: null, meridian: null } : (l ? (l = l.toUpperCase(), l === "PM" && i < 12 ? i += 12 : l === "AM" && i === 12 && (i = 12)) : i === 0 ? (l = "AM", i = 12) : i < 12 ? l = "AM" : i === 12 ? l = "PM" : (l = "PM", i -= 12), {
     hour: i.toString().padStart(2, "0"),
     minute: d.toString().padStart(2, "0"),
-    meridian: r
+    meridian: l
   });
 }
-const Lt = w(
+const os = C(
   {
     /**
      * The initial shallow state of the TimePicker.
@@ -1210,7 +1533,7 @@ const Lt = w(
      * @member {object} state
      */
     state() {
-      const e = this.selectedTime ?? null, { hour: t, minute: s, meridian: o } = E(e);
+      const e = this.selectedTime ?? null, { hour: t, minute: s, meridian: o } = R(e);
       return {
         selectedTime: e,
         open: !1,
@@ -1226,7 +1549,7 @@ const Lt = w(
      */
     after() {
       if (this.input.value) {
-        const { hour: e, minute: t, meridian: s } = E(this.input.value);
+        const { hour: e, minute: t, meridian: s } = R(this.input.value);
         this.state.set({
           hour: e,
           minute: t,
@@ -1235,38 +1558,78 @@ const Lt = w(
         });
       }
     },
+    /**
+     * Toggles the time picker popover.
+     *
+     * @param {Event} e
+     * @param {object} context
+     */
+    toggleOpen(e, { state: t }) {
+      t.toggle("open");
+    },
+    /**
+     * Handles direct input changes and formats the time.
+     *
+     * @param {Event} e
+     */
+    handleInputChange(e) {
+      let t = e.target.value.replace(/[^\d]/g, ""), s = dt(t);
+      const o = ht(t);
+      o.formattedTime && (s = o.formattedTime, this.state.set({
+        hour: o.hour,
+        minute: o.minute,
+        meridian: o.meridian,
+        selectedTime: o.formattedTime
+      }), this.input.value = o.formattedTime, p.trigger("change", this.input), typeof this.change == "function" && this.change(o.formattedTime)), e.target.value = s;
+    },
+    /**
+     * Handles input focus - select all text for easy editing.
+     *
+     * @param {Event} e
+     */
+    handleInputFocus(e) {
+      e.target.select();
+    },
+    /**
+     * Handles time selection from the picker columns.
+     *
+     * @param {object} params
+     */
+    handleTimeSelect({ hour: e, minute: t, meridian: s }) {
+      if (e && (this.state.hour = e), t && (this.state.minute = t), s && (this.state.meridian = s), this.state.hour && this.state.minute && this.state.meridian) {
+        const o = `${this.state.hour}:${this.state.minute} ${this.state.meridian}`;
+        this.state.selectedTime = o, this.state.open = !1, this.input.value = o, p.trigger("change", this.input), typeof this.change == "function" && this.change(o);
+      }
+    },
     /**
      * Renders the TimePicker component.
      *
      * @returns {object}
      */
     render() {
-      const e = (s, { state: o }) => o.toggle("open"), t = ({ hour: s, minute: o, meridian: l }) => {
-        if (s && (this.state.hour = s), o && (this.state.minute = o), l && (this.state.meridian = l), this.state.hour && this.state.minute && this.state.meridian) {
-          const r = `${this.state.hour}:${this.state.minute} ${this.state.meridian}`;
-          this.state.selectedTime = r, this.state.open = !1, this.input.value = r, typeof this.change == "function" && this.change(r);
-        }
-      };
       return n(
         { class: "relative w-full max-w-[320px]" },
         [
-          Ze({
-            toggleOpen: e,
+          gt({
+            toggleOpen: this.toggleOpen.bind(this),
             bind: this.bind,
-            required: this.required
+            required: this.required,
+            handleInputChange: this.handleInputChange.bind(this),
+            handleInputFocus: this.handleInputFocus.bind(this),
+            placeholder: this.placeholder
           }),
-          et({
-            handleTimeSelect: t
+          pt({
+            handleTimeSelect: this.handleTimeSelect.bind(this)
           })
         ]
       );
     }
   }
-), tt = (e, t) => n({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${t}` }, [
-  x({ size: "lg" }, e)
-]), st = ({ title: e }) => B({ class: "flex flex-auto items-center" }, [
-  A({ class: "text-lg font-semibold" }, e)
-]), ot = c((e, t) => Z(
+), bt = (e, t) => n({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${t}` }, [
+  g({ size: "lg" }, e)
+]), xt = ({ title: e }) => T({ class: "flex flex-auto items-center" }, [
+  S({ class: "text-lg font-semibold" }, e)
+]), vt = c((e, t) => ne(
   {
     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
@@ -1277,18 +1640,18 @@ const Lt = w(
   [
     n({ class: "flex flex-auto p-6 pb-12 md:pb-6" }, [
       // Icon and content
-      e.icon && tt(e.icon, e.iconColor),
+      e.icon && bt(e.icon, e.iconColor),
       n({ class: "flex flex-auto flex-col gap-4" }, [
-        n({ class: "flex flex-auto flex-col space-y-2" }, [
-          st(e),
+        n({ class: "flex flex-auto flex-col gap-y-2" }, [
+          xt(e),
           e.description && b({ 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)
+        e.buttons && M({ class: "flex flex-col-reverse sm:flex-row sm:justify-end mt-6 gap-2 sm:gap-0 sm:gap-x-2" }, e.buttons)
       ])
     ])
   ]
-)), nt = (e) => H.render(e, app.root), j = {
+)), yt = (e) => G.render(e, app.root), H = {
   info: {
     borderColor: "border-blue-500",
     bgColor: "bg-muted/10",
@@ -1315,7 +1678,7 @@ const Lt = w(
     iconColor: "text-muted-foreground"
   }
 };
-class rt extends p {
+class wt extends y {
   /**
    * This will declare the props for the compiler.
    *
@@ -1332,13 +1695,13 @@ class rt extends p {
   render() {
     const t = (d) => {
       d.target === this.panel && this.close();
-    }, { borderColor: s, bgColor: o, iconColor: l } = j[this.type] || j.default, r = `${this.getMainClass()} ${o} ${s}`, i = this.title || "Dialog Title";
-    return ot({
-      class: r,
+    }, { borderColor: s, bgColor: o, iconColor: r } = H[this.type] || H.default, l = `${this.getMainClass()} ${o} ${s}`, i = this.title || "Dialog Title";
+    return vt({
+      class: l,
       title: i,
       click: t,
       icon: this.icon,
-      iconColor: l,
+      iconColor: r,
       description: this.description,
       buttons: this.getButtons()
     }, this.children);
@@ -1377,7 +1740,7 @@ class rt extends p {
    * @returns {void}
    */
   open() {
-    nt(this), this.panel.showModal(), this.state.open = !0;
+    yt(this), this.panel.showModal(), this.state.open = !0;
   }
   /**
    * This will close the modal.
@@ -1388,7 +1751,7 @@ class rt extends p {
     this.state.open = !1, this.panel.close(), typeof this.onClose == "function" && this.onClose(), this.destroy();
   }
 }
-class Pt extends rt {
+class ns extends wt {
   /**
    * This will declare the props for the compiler.
    *
@@ -1418,44 +1781,67 @@ class Pt extends rt {
     this.confirmed && this.confirmed(), this.close();
   }
 }
+const rs = c((e, t = []) => n({ class: "w-full max-w-md p-6 m-auto" }, [
+  K({ class: "flex flex-auto flex-col" }, [
+    n({ class: "flex flex-auto flex-col gap-y-4" }, [
+      n({ class: "flex flex-auto items-center justify-center" }, [
+        e.icon && n({ class: "w-16 h-16 mb-2 text-primary" }, [
+          g(e.icon)
+        ])
+      ]),
+      T({ class: "py-4 text-center" }, [
+        S({ class: "text-xl font-bold" }, e.title),
+        b({ class: "pb-8 text-muted-foreground" }, e.description || ""),
+        ...t
+      ])
+    ])
+  ])
+]));
 export {
-  mt as A,
-  It as B,
-  wt as C,
-  ce as D,
-  Pt as E,
-  xe as F,
-  ot as G,
-  rt as H,
-  yt as M,
-  vt as N,
-  We as P,
-  xt as S,
-  Ct as T,
-  me as a,
-  ft as b,
-  ge as c,
-  we as d,
-  ye as e,
-  ve as f,
-  ke as g,
-  gt as h,
-  De as i,
-  bt as j,
-  pt as k,
-  Le as l,
-  kt as m,
-  St as n,
-  Dt as o,
-  y as p,
-  f as q,
-  Ne as r,
-  Tt as s,
-  $t as t,
+  Lt as A,
+  Kt as B,
+  Rt as C,
+  At as D,
+  es as E,
+  ke as F,
+  ts as G,
+  ss as H,
+  Gt as I,
+  os as J,
+  ns as K,
+  Jt as L,
+  Ht as M,
+  qt as N,
+  vt as O,
+  et as P,
+  wt as Q,
+  rs as R,
+  Ut as S,
+  Yt as T,
+  ye as a,
+  Mt as b,
+  Ce as c,
+  De as d,
+  Te as e,
+  Fe as f,
+  Pt as g,
+  Ot as h,
+  jt as i,
+  Be as j,
+  zt as k,
+  K as l,
+  Et as m,
+  Nt as n,
+  Ee as o,
+  Vt as p,
+  _t as q,
+  Wt as r,
+  k as s,
+  v as t,
   Re as u,
-  Ge as v,
-  At as w,
-  Bt as x,
-  Mt as y,
-  Lt as z
+  Qt as v,
+  Xt as w,
+  Ze as x,
+  tt as y,
+  Zt as z
 };