@base-framework/ui 1.0.312 → 1.0.314

package/dist/{empty-state-D1QN4wKI.js → empty-state-CWlzRq2X.js}

@@ -1,12 +1,12 @@
-import { Div as l, H5 as X, P as g, I as p, Li as q, Span as a, Ul as H, Button as f, OnState as I, Label as A, H2 as C, Form as Z, Header as $, Footer as P, A as Y, H3 as ee, Checkbox as te, Input as b, Img as _, Nav as se, UseParent as W, OnStateOpen as M, Time as oe, Dialog as le } from "@base-framework/atoms";
-import { Atom as c, Component as w, Html as j, Dom as ne, base as re, Data as F, Builder as G, Jot as v, Events as k, DateTime as L } from "@base-framework/base";
-import { P as S, b as ie, R as ae } from "./range-calendar-BMWSJTE0.js";
-import { C as ce, F as ue, a as y } from "./veil-CVCuKSvj.js";
-import { B as h, I as m } from "./buttons-CHEs54Wl.js";
-import { Icons as u } from "./icons.es.js";
-import { Timer as de, List as he, DynamicTime as fe } from "@base-framework/organisms";
-import { F as z } from "./format-DnofNaaz.js";
-const E = {
+import { Div as l, H5 as se, P as w, I as C, Li as W, Span as c, Ul as G, Button as b, OnState as B, Label as j, H2 as $, Form as oe, Header as L, Footer as N, A as J, H3 as ne, Checkbox as le, Input as f, Img as K, Nav as re, UseParent as Q, OnStateOpen as O, Time as ie, Dialog as ae } from "@base-framework/atoms";
+import { Atom as u, Component as k, Html as z, Dom as ce, base as ue, Data as A, Builder as X, Jot as I, Events as v, DateTime as E } from "@base-framework/base";
+import { P as F, b as de, R as he } from "./range-calendar-BMWSJTE0.js";
+import { C as fe, F as me, a as D } from "./veil-CVCuKSvj.js";
+import { B as h, I as x } from "./buttons-CHEs54Wl.js";
+import { Icons as d } from "./icons.es.js";
+import { Timer as ge, List as pe, DynamicTime as be } from "@base-framework/organisms";
+import { F as U } from "./format-DnofNaaz.js";
+const V = {
   info: {
     borderColor: "border-blue-500",
     bgColor: "bg-muted/10",
@@ -32,20 +32,20 @@ const E = {
     bgColor: "bg-muted/10",
     iconColor: "text-muted-foreground"
   }
-}, me = (e, t) => l({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
-  p({ html: e })
-]), ge = (e) => X({ class: "font-semibold" }, e), pe = (e) => g({ class: "text-sm text-muted-foreground" }, e), kt = c(({ title: e, description: t, icon: s, type: o = "default" }) => {
-  const { borderColor: n, bgColor: r, iconColor: i } = E[o] || E.default;
+}, xe = (e, t) => l({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
+  C({ html: e })
+]), ye = (e) => se({ class: "font-semibold" }, e), ve = (e) => w({ class: "text-sm text-muted-foreground" }, e), Bt = u(({ title: e, description: t, icon: s, type: o = "default" }) => {
+  const { borderColor: n, bgColor: r, iconColor: i } = V[o] || V.default;
   return l({ class: `flex items-start p-4 border rounded-lg ${r} ${n}` }, [
     // Icon and content
-    s && me(s, i),
+    s && xe(s, i),
     l({ class: "flex flex-col" }, [
-      ge(e),
-      pe(t)
+      ye(e),
+      ve(t)
     ])
   ]);
 });
-class St extends w {
+class Lt extends k {
   /**
    * This will declare the props for the compiler.
    *
@@ -63,48 +63,48 @@ class St extends w {
     this.prepareDestroy(), this.removeContext();
     const t = this.panel, s = this.removingClass;
     if (!s) {
-      j.removeElement(t);
+      z.removeElement(t);
       return;
     }
-    ne.addClass(t, s), re.on("animationend", t, (o) => j.removeElement(t));
+    ce.addClass(t, s), ue.on("animationend", t, (o) => z.removeElement(t));
   }
 }
-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 }), we = (e) => a({ class: "flex-auto" }, e), ve = (e, t) => q({
+const we = (e) => c({ class: "ml-auto text-xs tracking-widest opacity-60" }, e), Ce = (e) => c({ class: "flex w-4 h-4", html: e }), Se = (e) => c({ class: "flex-auto" }, e), ke = (e, t) => W({
   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 && xe(e.icon),
-  we(e.label),
-  e.shortcut && be(e.shortcut)
-]), ye = (e, t) => H({ class: "grid gap-2" }, [
-  e.map((s) => ve(s, t))
-]), Ce = (e) => l({ class: "w-full z-10" }, [
+  e.icon && Ce(e.icon),
+  Se(e.label),
+  e.shortcut && we(e.shortcut)
+]), Ie = (e, t) => G({ class: "grid gap-2" }, [
+  e.map((s) => ke(s, t))
+]), De = (e) => l({ class: "w-full z-10" }, [
   l({
     class: "max-h-60 border rounded-md overflow-y-auto p-1 grid gap-2 divide-y divide-border",
-    for: ["groups", (t) => ye(t, e)]
+    for: ["groups", (t) => Ie(t, e)]
   })
-]), ke = ({ label: e, icon: t, toggleDropdown: s }) => f({
+]), $e = ({ label: e, icon: t, toggleDropdown: s }) => b({
   cache: "button",
   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 && p({ html: t })
-]), Se = ({ onSelect: e }) => l([
-  I(
+  e && c(e),
+  t && C({ html: t })
+]), Fe = ({ onSelect: e }) => l([
+  B(
     "open",
-    (t, s, o) => t ? new S({
+    (t, s, o) => t ? new F({
       cache: "dropdown",
       parent: o,
       button: o.button
     }, [
-      Ce(e)
+      De(e)
     ]) : null
   )
 ]);
-class Dt extends w {
+class At extends k {
   /**
    * This will declare the props for the compiler.
    *
@@ -119,7 +119,7 @@ class Dt extends w {
    * @returns {Data}
    */
   setData() {
-    return new F({
+    return new A({
       groups: this.groups || []
     });
   }
@@ -158,33 +158,33 @@ class Dt extends w {
    */
   render() {
     return l({ class: "relative" }, [
-      ke({
+      $e({
         label: this.label,
         icon: this.icon,
         toggleDropdown: this.toggleDropdown.bind(this)
       }),
-      Se({ onSelect: this.handleSelect.bind(this) })
+      Fe({ onSelect: this.handleSelect.bind(this) })
     ]);
   }
 }
-const De = c((e, t) => l({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t)), Ie = c((e, t) => A({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), $e = c((e, t) => g({ ...e, class: "text-sm text-muted-foreground italic" }, t)), Fe = c((e, t) => g({ ...e, class: "text-sm text-destructive" }, t)), It = c((e, t = []) => ce({ class: "flex flex-auto flex-col gap-y-0", margin: "m-0", padding: "p-0" }, [
-  e.title && C({ class: "text-lg font-semibold py-4 px-6" }, e.title),
-  e.description && g({ class: "text-sm text-muted-foreground pb-4 px-6 max-w-[700px]" }, e.description),
+const Te = u((e, t) => l({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t)), Be = u((e, t) => j({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), Le = u((e, t) => w({ ...e, class: "text-sm text-muted-foreground italic" }, t)), Ae = u((e, t) => w({ ...e, class: "text-sm text-destructive" }, t)), Mt = u((e, t = []) => fe({ class: "flex flex-auto flex-col gap-y-0", margin: "m-0", padding: "p-0" }, [
+  e.title && $({ class: "text-lg font-semibold py-4 px-6" }, e.title),
+  e.description && w({ class: "text-sm text-muted-foreground pb-4 px-6 max-w-[700px]" }, e.description),
   ...t
-])), $t = c((e, t = []) => ue({ label: e.label, description: e.description, class: "py-4 px-6", border: e.border }, [
+])), Pt = u((e, t = []) => me({ label: e.label, description: e.description, class: "py-4 px-6", border: e.border }, [
   l({ class: "flex flex-col gap-y-6" }, t)
-])), Ft = c((e, t = []) => {
+])), jt = u((e, t = []) => {
   const s = e.border ? "border-t" : "";
   return l({ ...e, class: `flex flex-col pb-4 px-6 gap-y-4 ${s} ${e.class || ""}` }, t);
-}), Be = (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 : Be(o) ? {
+}), Me = (e) => e.tag === "input" || e.tag === "select" || e.tag === "textarea", Z = (e, t, s) => e.map((o) => !o || (o.children && o.children.length > 0 && (o.children = Z(o.children, t, s)), !o.required) ? o : Me(o) ? {
   ...o,
   aria: {
     invalid: ["hasError"]
   },
   invalid: s,
   input: t
-} : o), Te = c((e, t) => {
-  const n = J(t, (r) => {
+} : o), Pe = u((e, t) => {
+  const n = Z(t, (r) => {
     r.target.checkValidity() && e.setError(null);
   }, (r) => {
     e.setError(r.target.validationMessage);
@@ -193,7 +193,7 @@ const De = c((e, t) => l({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t))
     ...e,
     class: "w-full"
   }, n);
-}), Bt = y(
+}), Nt = D(
   {
     /**
      * The initial state of the FormField.
@@ -218,66 +218,66 @@ const De = c((e, t) => l({ ...e, class: "flex flex-auto flex-col gap-y-2" }, t))
         this.state.error = r, this.state.hasError = !!r;
       };
       return l({ class: "flex flex-auto gap-y-4" }, [
-        De([
-          Ie({ htmlFor: t }, s),
-          Te({
+        Te([
+          Be({ htmlFor: t }, s),
+          Pe({
             id: t,
             name: e,
             value: this.state.value,
             setError: n
           }, this.children),
-          o && $e({ id: this.getId("description") }, o),
-          l({ onState: ["error", (r) => r && Fe(r)] })
+          o && Le({ id: this.getId("description") }, o),
+          l({ onState: ["error", (r) => r && Ae(r)] })
         ])
       ]);
     }
   }
-), Le = (e, t, s = null) => {
+), je = (e, t, s = null) => {
   e.target.checkValidity() && (e.preventDefault(), s && s(e, t));
-}, K = c(
-  (e, t) => Z({ ...e, submit: (s, o) => Le(s, o, e.submit), class: `w-full ${e.class ?? ""}` }, t)
-), Tt = c((e, t) => l({ ...e, class: `flex flex-auto flex-col gap-y-6 p-4 md:p-6 divide-y ${e.class || ""}` }, t)), Lt = c((e, t = []) => l({ class: "flex flex-col gap-y-3 py-4" }, [
-  e.title && C({ class: "font-semibold" }, e.title),
+}, ee = u(
+  (e, t) => oe({ ...e, submit: (s, o) => je(s, o, e.submit), class: `w-full ${e.class ?? ""}` }, t)
+), Ot = u((e, t) => l({ ...e, class: `flex flex-auto flex-col gap-y-6 p-4 md:p-6 divide-y ${e.class || ""}` }, t)), zt = u((e, t = []) => l({ class: "flex flex-col gap-y-3 py-4" }, [
+  e.title && $({ class: "font-semibold" }, e.title),
   ...t
-])), At = (e, t) => l({ class: "flex justify-between" }, [
-  a({ class: "text-muted-foreground" }, e),
-  a(t)
-]), Pt = (e, t) => l({ class: "flex" }, [
-  a({ class: "text-muted-foreground mr-8 w-24 truncate text-nowrap" }, e),
-  a(t)
-]), Ae = ({ title: e, description: t, back: s, icon: o, options: n = [] }) => $({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10" }, [
+])), Et = (e, t) => l({ class: "flex justify-between" }, [
+  c({ class: "text-muted-foreground" }, e),
+  c(t)
+]), Ut = (e, t) => l({ class: "flex" }, [
+  c({ class: "text-muted-foreground mr-8 w-24 truncate text-nowrap" }, e),
+  c(t)
+]), Ne = ({ title: e, description: t, back: s, icon: o, options: n = [] }) => L({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10" }, [
   /**
    * 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: d.arrows.left, class: "mr-2 p-0 flex sm:hidden", click: (r, i) => i.close() }),
   /**
    * Icon
    */
-  o && l({ class: "mr-2 w-12 h-12 rounded-full bg-muted flex flex-none items-center justify-center" }, [m(o)]),
+  o && l({ class: "mr-2 w-12 h-12 rounded-full bg-muted flex flex-none items-center justify-center" }, [x(o)]),
   /**
    * Title and Description
    */
   l({ class: "flex flex-auto flex-row justify-between w-full ml-2 gap-2" }, [
     l({ class: "flex flex-auto flex-col" }, [
-      C({ class: "text-lg font-semibold m-0 truncate" }, e),
+      $({ class: "text-lg font-semibold m-0 truncate" }, e),
       t && l({ class: "text-sm text-muted-foreground truncate" }, t)
     ]),
     ...n
   ])
-]), Pe = c((e, t) => l({
+]), Oe = u((e, t) => l({
   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: (s, o) => {
     s.target === o.panel && (s.preventDefault(), s.stopPropagation(), o.state.open = !1);
   }
 }, [
-  K({ class: "modal-content relative bg-background z-[1] flex flex-auto flex-col gap-y-4", submit: (s, o) => e.onSubmit && e.onSubmit(o) }, [
-    Ae(e),
+  ee({ class: "modal-content relative bg-background z-[1] flex flex-auto flex-col gap-y-4", submit: (s, o) => e.onSubmit && e.onSubmit(o) }, [
+    Ne(e),
     l({ class: "modal-body flex flex-grow flex-col overflow-y-auto py-0 px-6 z-0" }, t),
-    P({ class: "modal-footer sticky bg-background/80 backdrop-blur-md flex flex-none justify-between py-4 px-6 z-10" }, e.buttons)
+    N({ 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) => G.render(e, app.root);
-class Mt extends w {
+])), ze = (e) => X.render(e, app.root);
+class Vt extends k {
   /**
    * This will declare the props for the compiler.
    *
@@ -293,7 +293,7 @@ class Mt extends w {
    */
   render() {
     const t = this.getMainClass(), s = this.title || "", o = this.description || null;
-    return Pe(
+    return Oe(
       {
         class: t,
         title: s,
@@ -408,7 +408,7 @@ class Mt extends w {
    * @returns {void}
    */
   open() {
-    Me(this), this.showModal();
+    ze(this), this.showModal();
   }
   /**
    * This will destroy the modal.
@@ -437,7 +437,7 @@ class Mt extends w {
     this.panel.hidePopover(), this.state.open = !1, typeof this.onClose == "function" && this.onClose(this), document.documentElement.style.overflowY = "auto";
   }
 }
-const N = {
+const R = {
   info: {
     bgColor: "bg-muted/10",
     borderColor: "border-blue-500",
@@ -463,22 +463,22 @@ const N = {
     borderColor: "border",
     iconColor: "text-muted-foreground"
   }
-}, je = (e) => $({ class: "flex justify-center" }, [
-  ee({ class: "text-lg font-bold mb-0" }, e)
-]), ze = c(({ href: e, class: t }, s) => Y({
+}, Ee = (e) => L({ class: "flex justify-center" }, [
+  ne({ class: "text-lg font-bold mb-0" }, e)
+]), Ue = u(({ href: e, class: t }, s) => J({
   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)), Ee = c(({ close: e, class: t }, s) => l({
+}, s)), Ve = u(({ close: e, class: t }, s) => l({
   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 Ne extends w {
+class Re extends k {
   /**
    * This will declare the props for the compiler.
    *
@@ -502,10 +502,10 @@ class Ne extends w {
    */
   render() {
     const { bgColor: t, borderColor: s, iconColor: o } = this.getTypeStyles(), n = this.href || null, r = this.getChildren(o);
-    return n ? ze({
+    return n ? Ue({
       href: n,
       class: `${t} ${s}`
-    }, r) : Ee({
+    }, r) : Ve({
       close: this.close.bind(this),
       class: `${t} ${s}`
     }, r);
@@ -517,7 +517,7 @@ class Ne extends w {
    */
   afterSetup() {
     const t = this.duration;
-    t !== "infinite" && (this.timer = new de(t, this.close.bind(this)), this.timer.start());
+    t !== "infinite" && (this.timer = new ge(t, this.close.bind(this)), this.timer.start());
   }
   /**
    * This will get the style properties based on the notification type.
@@ -526,7 +526,7 @@ class Ne extends w {
    */
   getTypeStyles() {
     const t = this.type || "default";
-    return N[t] || N.default;
+    return R[t] || R.default;
   }
   /**
    * This will get the buttons for the notification.
@@ -550,19 +550,19 @@ class Ne extends w {
   getChildren(t) {
     return [
       l({ class: "flex items-start" }, [
-        this.icon && p({ class: `mr-4 ${t}`, html: this.icon }),
+        this.icon && C({ class: `mr-4 ${t}`, html: this.icon }),
         l({ class: "flex flex-auto flex-col" }, [
           l({ class: "flex flex-auto flex-row items-center w-full pr-12" }, [
-            this.title && je(this.title)
+            this.title && Ee(this.title)
           ]),
-          g({ class: "text-base text-muted-foreground m-0 pr-12" }, this.description),
-          (this.primary || this.secondary) && P({ class: "margin-top-24 flex align-center" }, this.getButtons())
+          w({ class: "text-base text-muted-foreground m-0 pr-12" }, this.description),
+          (this.primary || this.secondary) && N({ class: "margin-top-24 flex align-center" }, this.getButtons())
         ])
       ]),
       h({
         class: "absolute top-[12px] right-[12px]",
         variant: "icon",
-        icon: u.x,
+        icon: d.x,
         click: this.close.bind(this)
       })
     ];
@@ -577,8 +577,8 @@ class Ne extends w {
     t && t.stopPropagation(), this.duration !== "infinite" && this.timer.stop(), this.onClick && this.onClick(), this.destroy();
   }
 }
-let Oe = 0;
-class jt extends w {
+let He = 0;
+class Rt extends k {
   /**
    * This will render the component.
    *
@@ -586,11 +586,11 @@ class jt extends w {
    */
   render() {
     return l({ 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 he({
+      new pe({
         cache: "list",
         key: "id",
         role: "list",
-        rowItem: (t) => new Ne(t)
+        rowItem: (t) => new Re(t)
       })
     ]);
   }
@@ -601,7 +601,7 @@ class jt extends w {
    * @returns {void}
    */
   addNotice(t = {}) {
-    t.id = Oe++, t.callBack = () => this.removeNotice(t), this.list.append([t]), this.panel.hidePopover(), this.panel.showPopover();
+    t.id = He++, t.callBack = () => this.removeNotice(t), this.list.append([t]), this.panel.hidePopover(), this.panel.showPopover();
   }
   /**
    * This will remove a notification.
@@ -613,25 +613,25 @@ class jt extends w {
     this.list.delete(t.id), this.list.isEmpty() && this.panel.hidePopover();
   }
 }
-const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
+const H = globalThis.matchMedia, M = u(({ value: e, label: t, icon: s }) => b({
   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: n }) => {
-    n.method = e, localStorage.setItem("theme", e), e === "system" && localStorage.removeItem("theme"), Ue(e);
+    n.method = e, localStorage.setItem("theme", e), e === "system" && localStorage.removeItem("theme"), Ye(e);
   }
 }, [
-  m(s),
-  a(t)
-])), Ue = (e) => {
+  x(s),
+  c(t)
+])), Ye = (e) => {
   const t = document.documentElement;
-  if (e === "system" && (e = globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light"), O && !O("(prefers-color-scheme: " + e + ")").matches) {
+  if (e === "system" && (e = globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light"), H && !H("(prefers-color-scheme: " + e + ")").matches) {
     t.classList.add(e);
     return;
   }
   const s = e === "light" ? "dark" : "light";
   t.classList.remove(s);
-}, zt = v(
+}, Ht = I(
   {
     /**
      * This will render the component.
@@ -641,9 +641,9 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
     render() {
       return l({ class: "flex flex-auto flex-col" }, [
         l({ class: "grid grid-cols-3 gap-4" }, [
-          B({ label: "System", value: "system", icon: u.adjustments.horizontal }),
-          B({ label: "Light", value: "light", icon: u.sun }),
-          B({ label: "Dark", value: "dark", icon: u.moon })
+          M({ label: "System", value: "system", icon: d.adjustments.horizontal }),
+          M({ label: "Light", value: "light", icon: d.sun }),
+          M({ label: "Dark", value: "dark", icon: d.moon })
         ])
       ]);
     },
@@ -658,7 +658,7 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
       };
     }
   }
-), Et = y(
+), Yt = D(
   {
     /**
      * The initial state of the Toggle.
@@ -685,14 +685,14 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
      * @returns {object}
      */
     render() {
-      return f({
+      return b({
         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, this.change && this.change(s.active, t, this);
         }
       }, [
-        te({
+        le({
           cache: "checkbox",
           class: "opacity-0 absolute top-0 left-0 bottom-0 right-0 w-full h-full",
           /**
@@ -703,34 +703,34 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
           bind: this.bind,
           required: this.required
         }),
-        a({
+        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 }]
         })
       ]);
     }
   }
-), D = {
+), T = {
   ONLINE: "online",
   OFFLINE: "offline",
   BUSY: "busy",
   AWAY: "away"
-}, x = {
+}, S = {
   ONLINE: "bg-green-500",
   OFFLINE: "bg-gray-500",
   BUSY: "bg-red-500",
   AWAY: "bg-yellow-500"
-}, Re = (e = "") => (e = e.toUpperCase(), x[e] || x.OFFLINE), Nt = (e) => l({
-  class: `absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full ${Re(e)}`
-}), Ot = ({ propName: e = "status" } = {}) => l({
+}, qe = (e = "") => (e = e.toUpperCase(), S[e] || S.OFFLINE), qt = (e) => l({
+  class: `absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full ${qe(e)}`
+}), _t = ({ propName: e = "status" } = {}) => l({
   class: "absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full",
   onSet: [e, {
-    [x.ONLINE]: D.ONLINE,
-    [x.OFFLINE]: D.OFFLINE,
-    [x.BUSY]: D.BUSY,
-    [x.AWAY]: D.AWAY
+    [S.ONLINE]: T.ONLINE,
+    [S.OFFLINE]: T.OFFLINE,
+    [S.BUSY]: T.BUSY,
+    [S.AWAY]: T.AWAY
   }]
-}), Ut = v(
+}), _e = (e) => e.indexOf(".") === -1 && e.indexOf("[[") === -1, Wt = I(
   {
     /**
      * Get the initial state for the component.
@@ -750,7 +750,7 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
      */
     openFileBrowse() {
       const e = this.input;
-      e && (e.value = "", k.trigger("click", e));
+      e && (e.value = "", v.trigger("click", e));
     },
     /**
      * Get the URL for the uploaded file.
@@ -769,7 +769,7 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
     render() {
       const e = "image-upload", t = this.onChange || null;
       return l({ class: "flex-none items-center" }, [
-        b({
+        f({
           id: e,
           cache: "input",
           type: "file",
@@ -786,25 +786,22 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
             s.preventDefault(), s.stopPropagation(), this.openFileBrowse();
           }
         }, [
-          I(
-            "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"
-            }, [
-              m(u.upload),
-              l("Upload Image")
-            ])
-          )
+          B("loaded", (s) => s === !1 || _e(this.src) ? j({
+            htmlFor: e,
+            class: "z-10 flex flex-col items-center justify-center text-sm text-muted-foreground group-hover:text-primary"
+          }, [
+            x(d.upload),
+            l("Upload Image")
+          ]) : K({
+            // @ts-ignore
+            src: this.src,
+            class: "absolute inset-0 w-full h-full object-cover rounded-full"
+          }))
         ])
       ]);
     }
   }
-), Rt = v(
+), Gt = I(
   {
     /**
      * Get the initial state for the component.
@@ -824,7 +821,7 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
      */
     openFileBrowse() {
       const e = this.input;
-      e && (e.value = "", k.trigger("click", e));
+      e && (e.value = "", v.trigger("click", e));
     },
     /**
      * Get the URL for the uploaded file.
@@ -843,7 +840,7 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
     render() {
       const e = "logo-upload", t = this.onChange || null;
       return l({ class: "flex-none items-center" }, [
-        b({
+        f({
           id: e,
           cache: "input",
           type: "file",
@@ -860,17 +857,17 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
             s.preventDefault(), s.stopPropagation(), this.openFileBrowse();
           }
         }, [
-          I(
+          B(
             "loaded",
-            (s) => s ? _({
+            (s) => s ? K({
               // @ts-ignore
               src: this.src,
               class: "absolute inset-0 w-full h-full object-cover rounded-full"
-            }) : A({
+            }) : j({
               htmlFor: e,
               class: "z-10 flex flex-col items-center justify-center text-sm text-muted-foreground group-hover:text-primary"
             }, [
-              m(u.upload),
+              x(d.upload),
               l("Upload logo")
             ])
           )
@@ -878,22 +875,22 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
       ]);
     }
   }
-), Ve = (e, t) => Y(
+), We = (e, t) => J(
   {
     href: e,
     "aria-current": t === "Breadcrumb" && "page",
     // Only set aria-current on the last item
     class: "text-muted-foreground font-medium hover:text-foreground"
   },
-  [a(t)]
-), qe = () => m({
+  [c(t)]
+), Ge = () => x({
   class: "mx-3 text-muted-foreground",
   "aria-hidden": !0,
   size: "xs"
-}, u.chevron.single.right), He = (e) => l({ class: "flex items-center" }, [
-  e.href ? Ve(e.href, e.label) : a(e.label),
-  e.separator && qe()
-]), Vt = v(
+}, d.chevron.single.right), Je = (e) => l({ class: "flex items-center" }, [
+  e.href ? We(e.href, e.label) : c(e.label),
+  e.separator && Ge()
+]), Jt = I(
   {
     /**
      * Set initial data
@@ -901,7 +898,7 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
      * @returns {Data}
      */
     setData() {
-      return new F({
+      return new A({
         // @ts-ignore
         items: this.items || []
       });
@@ -913,7 +910,7 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
      */
     render() {
       const e = this.data.items.length - 1;
-      return se(
+      return re(
         {
           "aria-label": "Breadcrumb",
           class: "flex items-center gap-x-1 text-sm"
@@ -922,7 +919,7 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
           l({
             role: "list",
             class: "flex items-center",
-            for: ["items", (t, s) => He({
+            for: ["items", (t, s) => Je({
               href: t.href,
               label: t.label,
               separator: s < e
@@ -932,7 +929,7 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
       );
     }
   }
-), U = {
+), Y = {
   xs: "h-1 w-1",
   sm: "h-2 w-2",
   md: "h-4 w-4",
@@ -941,8 +938,8 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
   "2xl": "h-16 w-16",
   "3xl": "h-24 w-24",
   default: "h-4 w-4"
-}, Ye = (e) => U[e] || U.default, _e = ({ index: e, size: t }) => l({ class: `${t} rounded-full bg-muted cursor-pointer` }, [
-  a({
+}, Ke = (e) => Y[e] || Y.default, Qe = ({ index: e, size: t }) => l({ class: `${t} rounded-full bg-muted cursor-pointer` }, [
+  c({
     class: "block w-full h-full rounded-full transition-colors",
     onSet: ["activeIndex", {
       "bg-primary": e,
@@ -952,10 +949,10 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
       o.activeIndex = e, n && n(e);
     }
   })
-]), We = (e, t) => Array.from({ length: e }, (s, o) => _e({
+]), Xe = (e, t) => Array.from({ length: e }, (s, o) => Qe({
   index: o,
   size: t
-})), qt = v(
+})), Kt = I(
   {
     /**
      * Defines component data (props).
@@ -963,7 +960,7 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
      * @returns {Data}
      */
     setData() {
-      return new F({
+      return new A({
         // @ts-ignore
         count: this.count || 4,
         // total dots
@@ -977,7 +974,7 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
      * @returns {object}
      */
     render() {
-      const e = this.gap || "gap-2", t = Ye(this.size || "sm"), s = We(this.data.count, t);
+      const e = this.gap || "gap-2", t = Ke(this.size || "sm"), s = Xe(this.data.count, t);
       return l(
         { class: "flex justify-center items-center py-2" },
         [
@@ -986,37 +983,37 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
       );
     }
   }
-), Ge = ({ toggleDropdown: e }) => f(
+), Ze = ({ toggleDropdown: e }) => b(
   {
     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 bg-input hover:bg-muted h-10 px-4 py-2 justify-between",
     click: e
   },
   [
-    a({ onState: ["selectedLabel", (t) => t || "Select item..."] }),
-    p({ html: u.chevron.upDown })
+    c({ onState: ["selectedLabel", (t) => t || "Select item..."] }),
+    C({ html: d.chevron.upDown })
   ]
-), Je = (e, t, s) => q({
+), et = (e, t, s) => W({
   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" }, [m({ size: "xs" }, e.icon)]),
-  a({ class: "text-base font-normal" }, e.label)
-]), Ke = (e, t) => l({ class: "w-full border rounded-md" }, [
-  H({ class: "max-h-60 overflow-y-auto p-2 grid gap-1", for: ["items", (s) => Je(s, e, t)] })
-]), Qe = ({ onSelect: e, state: t }) => l({ class: "flex flex-auto flex-col" }, [
-  I(
+  e.icon && c({ class: "mr-2 flex items-baseline" }, [x({ size: "xs" }, e.icon)]),
+  c({ class: "text-base font-normal" }, e.label)
+]), tt = (e, t) => l({ class: "w-full border rounded-md" }, [
+  G({ class: "max-h-60 overflow-y-auto p-2 grid gap-1", for: ["items", (s) => et(s, e, t)] })
+]), st = ({ onSelect: e, state: t }) => l({ class: "flex flex-auto flex-col" }, [
+  B(
     "open",
-    (s, o, n) => s ? new S({
+    (s, o, n) => s ? new F({
       cache: "dropdown",
       parent: n,
       button: n.button
     }, [
-      Ke(e, t)
+      tt(e, t)
     ]) : null
   )
-]), Ht = v(
+]), Qt = I(
   {
     /**
      * This will set up the data.
@@ -1024,7 +1021,7 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
      * @returns {Data}
      */
     setData() {
-      return new F({
+      return new A({
         // @ts-ignore
         items: this.items || []
       });
@@ -1097,8 +1094,8 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
       const e = this.class || "", t = this.maxWidth || "max-w-[250px]", s = this.width || "w-full";
       return l({ class: `relative ${s} flex flex-auto flex-col ${t} ${e}` }, [
         // @ts-ignore
-        Ge({ toggleDropdown: this.toggleDropdown.bind(this) }),
-        Qe({
+        Ze({ toggleDropdown: this.toggleDropdown.bind(this) }),
+        st({
           // @ts-ignore
           state: this.state,
           // @ts-ignore
@@ -1106,7 +1103,7 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
         }),
         // Hidden required input for form validation
         // @ts-ignore
-        this.required && b({
+        this.required && f({
           class: "opacity-0 absolute top-0 left-0 z-[1]",
           type: "text",
           // @ts-ignore
@@ -1118,26 +1115,26 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
       ]);
     }
   }
-), Q = ({ icon: e, click: t, ariaLabel: s }) => h({
+), te = ({ icon: e, click: t, ariaLabel: s }) => h({
   variant: "icon",
   class: "flex flex-none",
   click: t,
   icon: e,
   "aria-label": s
-}), Xe = ({ click: e }) => Q({
-  icon: u.circleMinus,
+}), ot = ({ click: e }) => te({
+  icon: d.circleMinus,
   click: e,
   ariaLabel: "Decrement"
-}), Ze = ({ click: e }) => Q({
-  icon: u.circlePlus,
+}), nt = ({ click: e }) => te({
+  icon: d.circlePlus,
   click: e,
   ariaLabel: "Increment"
-}), et = ({ bind: e, min: t, max: s, readonly: o = !1 }) => W(({ state: n }) => b({
+}), lt = ({ bind: e, min: t, max: s, readonly: o = !1 }) => Q(({ state: n }) => f({
   value: ["[[count]]", n],
   bind: e,
   blur: (r, { state: i }) => {
-    let d = parseInt(r.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;
+    let a = parseInt(r.target.value, 10);
+    isNaN(a) && (a = t ?? 0), t !== void 0 && (a = Math.max(a, t)), s !== void 0 && (a = Math.min(a, s)), i.count = a;
   },
   class: "flex flex-auto text-lg font-medium bg-input text-center border min-w-0",
   readonly: o,
@@ -1145,7 +1142,7 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
   max: s,
   type: "number",
   "aria-label": "Counter"
-})), Yt = y(
+})), Xt = D(
   {
     /**
      * Initial state for the counter component.
@@ -1168,45 +1165,69 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
     render() {
       const e = this.class ?? "";
       return l({ class: `flex flex-auto items-center justify-between gap-x-4 p-4 ${e}` }, [
-        Xe({ click: () => this.state.decrement("count") }),
-        et({
+        ot({ click: () => this.state.decrement("count") }),
+        lt({
           bind: this.bind,
           readonly: this.readonly,
           min: this.min,
           max: this.max
         }),
-        Ze({ click: () => this.state.increment("count") })
+        nt({ click: () => this.state.increment("count") })
       ]);
     }
   }
-), tt = ({ bind: e, required: t }) => b({
+), rt = ({ 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
-}), st = ({ bind: e, required: t, toggleOpen: s }) => f({
-  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
-}, [
-  tt({ bind: e, required: t }),
-  a({
-    onState: ["selectedDate", (o) => o ? L.format("standard", o) : "Pick a date"]
-  }),
-  p({ html: u.calendar.days })
-]), ot = ({ handleDateSelect: e, blockPriorDates: t }) => M(
-  (s, o, n) => new S({
+}), it = ({ placeholder: e, handleInputChange: t, handleInputFocus: s }) => f({
+  cache: "dateInput",
+  class: "flex-1 bg-transparent outline-none placeholder:text-muted-foreground",
+  placeholder: e || "mm/dd/yyyy",
+  input: t,
+  focus: s,
+  onState: ["selectedDate", (o) => {
+    if (o) {
+      const n = new Date(o);
+      if (!isNaN(n.getTime())) {
+        const r = (n.getMonth() + 1).toString().padStart(2, "0"), i = n.getDate().toString().padStart(2, "0"), a = n.getFullYear();
+        return `${r}/${i}/${a}`;
+      }
+    }
+    return "";
+  }]
+}), at = ({ bind: e, required: t, toggleOpen: s, handleInputChange: o, handleInputFocus: n, placeholder: r }) => l(
+  {
+    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"
+  },
+  [
+    rt({ bind: e, required: t }),
+    it({ placeholder: r, handleInputChange: o, handleInputFocus: n }),
+    b(
+      {
+        class: "flex-shrink-0 hover:bg-muted/50 rounded p-1",
+        click: s
+      },
+      [
+        C({ html: d.calendar.days })
+      ]
+    )
+  ]
+), ct = ({ handleDateSelect: e, blockPriorDates: t }) => O(
+  (s, o, n) => new F({
     cache: "dropdown",
     parent: n,
     button: n.panel,
     size: "fit"
   }, [
-    new ie({
+    new de({
       selectedDate: n.state.selectedDate,
       selectedCallBack: e,
       blockPriorDates: t
     })
   ])
-), _t = y(
+), Zt = D(
   {
     /**
      * The initial state of the DatePicker.
@@ -1234,51 +1255,69 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
      * @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, k.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(s);
+      const e = (n, { state: r }) => r.toggle("open"), t = (n) => {
+        const i = n.target.value.replace(/\D/g, "");
+        let a = "";
+        if (i.length > 0 && (a = i.substring(0, 2), i.length > 2 && (a += "/" + i.substring(2, 4), i.length > 4 && (a += "/" + i.substring(4, 8)))), n.target.value = a, i.length === 8) {
+          const m = parseInt(i.substring(0, 2), 10), g = parseInt(i.substring(2, 4), 10), y = parseInt(i.substring(4, 8), 10);
+          if (m >= 1 && m <= 12 && g >= 1 && g <= 31 && y >= 1900) {
+            const p = `${y}-${m.toString().padStart(2, "0")}-${g.toString().padStart(2, "0")}`;
+            this.state.selectedDate = p, this.input.value = p, v.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(p);
+          }
+        }
+      }, s = (n) => {
+        n.target.select();
+      }, o = (n) => {
+        this.state.selectedDate = n, this.state.open = !1, this.input.value = n, v.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(n);
       };
-      return l({ class: "relative w-full max-w-[320px]" }, [
-        st({
-          toggleOpen: e,
-          bind: this.bind,
-          required: this.required
-        }),
-        ot({
-          handleDateSelect: t,
-          blockPriorDates: this.blockPriorDates || !1
-        })
-      ]);
+      return l(
+        { class: "relative w-full max-w-[320px]" },
+        [
+          at({
+            toggleOpen: e,
+            bind: this.bind,
+            required: this.required,
+            handleInputChange: t,
+            handleInputFocus: s,
+            placeholder: this.placeholder
+          }),
+          ct({
+            handleDateSelect: o,
+            blockPriorDates: this.blockPriorDates || !1
+          })
+        ]
+      );
     }
   }
-), lt = ({ bind: e, required: t }) => b({
+), ut = ({ 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
-}), nt = ({ bind: e, required: t, toggleOpen: s }) => f({
+}), dt = ({ bind: e, required: t, toggleOpen: s }) => b({
   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
 }, [
-  lt({ bind: e, required: t }),
-  W(({ state: o }) => [
-    a(z.date(["[[start]]", o], "Start Date")),
-    a(" - "),
-    a(z.date(["[[end]]", o], "End Date"))
+  ut({ bind: e, required: t }),
+  Q(({ state: o }) => [
+    c(U.date(["[[start]]", o], "Start Date")),
+    c(" - "),
+    c(U.date(["[[end]]", o], "End Date"))
   ]),
-  p({ html: u.calendar.days })
-]), rt = ({ handleDateSelect: e, blockPriorDates: t }) => M((s, o, n) => new S({
+  C({ html: d.calendar.days })
+]), ht = ({ handleDateSelect: e, blockPriorDates: t }) => O((s, o, n) => new F({
   cache: "dropdown",
   parent: n,
   button: n.panel,
   size: "xl"
 }, [
-  new ae({
+  new he({
     startDate: n.state.start,
     endDate: n.state.end,
     onRangeSelect: e,
     blockPriorDates: t
   })
-])), Wt = y(
+])), es = D(
   {
     /**
      * The initial state of the DateRangePicker.
@@ -1311,59 +1350,74 @@ const O = globalThis.matchMedia, B = c(({ value: e, label: t, icon: s }) => f({
      */
     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}`, k.trigger("change", this.input), typeof this.onChange == "function" && this.onChange({ start: s, end: o }, this.parent);
+        this.state.start = s, this.state.end = o, this.state.open = !1, this.input.value = `${s}-${o}`, v.trigger("change", this.input), typeof this.onChange == "function" && this.onChange({ start: s, end: o }, this.parent);
       };
       return l({ class: "relative w-full max-w-[320px]" }, [
-        nt({
+        dt({
           toggleOpen: e,
           bind: this.bind,
           required: this.required
         }),
-        rt({
+        ht({
           handleDateSelect: t,
           blockPriorDates: this.blockPriorDates || !1
         })
       ]);
     }
   }
-), Gt = ({ dateTime: e = "", remoteTimeZone: t = "America/Denver", filter: s = null }) => oe([
-  new fe({
+), ts = ({ dateTime: e = "", remoteTimeZone: t = "America/Denver", filter: s = null }) => ie([
+  new be({
     dateTime: e,
     filter: s || ((o) => {
-      const n = L.getLocalTime(o, !0, !1, t);
-      return L.getTimeFrame(n);
+      const n = E.getLocalTime(o, !0, !1, t);
+      return E.getTimeFrame(n);
     })
   })
 ]);
-function it({ bind: e, required: t }) {
-  return b({
+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 at({ bind: e, required: t, toggleOpen: s }) {
-  return f(
+function mt({ placeholder: e, handleInputChange: t, handleInputFocus: s }) {
+  return f({
+    cache: "timeInput",
+    class: "flex-1 bg-transparent outline-none placeholder:text-muted-foreground",
+    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: n, placeholder: r }) {
+  return l(
     {
-      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
+      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"
     },
     [
-      it({ bind: e, required: t }),
-      a({
-        onState: ["selectedTime", (o) => o || "Pick a time"]
-      }),
-      p({ html: u.clock })
+      ft({ bind: e, required: t }),
+      mt({ placeholder: r, handleInputChange: o, handleInputFocus: n }),
+      b(
+        {
+          class: "flex-shrink-0 hover:bg-muted/50 rounded p-1",
+          click: s
+        },
+        [
+          C({ html: d.clock })
+        ]
+      )
     ]
   );
 }
-function T({ items: e, handleTimeSelect: t, state: s, stateValue: o, pad: n = !1 }) {
+function P({ items: e, handleTimeSelect: t, state: s, stateValue: o, pad: n = !1 }) {
   return l(
     { class: "flex flex-col max-h-[200px] overflow-y-auto" },
     e.map((r) => {
       let i = n ? r.toString().padStart(2, "0") : r.toString();
-      return f({
+      return b({
         text: i,
         class: "hover:bg-muted/50 rounded-md px-2 py-1",
         click: () => t({ [o]: i }),
@@ -1372,9 +1426,9 @@ function T({ items: e, handleTimeSelect: t, state: s, stateValue: o, pad: n = !1
     })
   );
 }
-function ct({ handleTimeSelect: e }) {
-  return M(
-    (t, s, o) => new S(
+function pt({ handleTimeSelect: e }) {
+  return O(
+    (t, s, o) => new F(
       {
         cache: "dropdown",
         parent: o,
@@ -1389,7 +1443,7 @@ function ct({ handleTimeSelect: e }) {
               { class: "grid grid-cols-3 gap-2 p-4 text-center max-h-[220px] min-w-[240px]" },
               [
                 // Hours column
-                T({
+                P({
                   items: Array.from({ length: 12 }, (n, r) => r + 1),
                   handleTimeSelect: e,
                   state: o.state,
@@ -1397,7 +1451,7 @@ function ct({ handleTimeSelect: e }) {
                   pad: !0
                 }),
                 // Minutes column
-                T({
+                P({
                   items: Array.from({ length: 60 }, (n, r) => r),
                   handleTimeSelect: e,
                   state: o.state,
@@ -1405,7 +1459,7 @@ function ct({ handleTimeSelect: e }) {
                   pad: !0
                 }),
                 // AM/PM column
-                T({
+                P({
                   items: ["AM", "PM"],
                   handleTimeSelect: e,
                   state: o.state,
@@ -1419,20 +1473,20 @@ function ct({ handleTimeSelect: e }) {
     )
   );
 }
-function R(e) {
+function q(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, n, , r] = s, i = parseInt(o, 10), d = parseInt(n, 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, n, , r] = s, i = parseInt(o, 10), a = parseInt(n, 10);
+  return i < 0 || i > 23 || a < 0 || a > 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), {
     hour: i.toString().padStart(2, "0"),
-    minute: d.toString().padStart(2, "0"),
+    minute: a.toString().padStart(2, "0"),
     meridian: r
   });
 }
-const Jt = y(
+const ss = D(
   {
     /**
      * The initial shallow state of the TimePicker.
@@ -1440,7 +1494,7 @@ const Jt = y(
      * @member {object} state
      */
     state() {
-      const e = this.selectedTime ?? null, { hour: t, minute: s, meridian: o } = R(e);
+      const e = this.selectedTime ?? null, { hour: t, minute: s, meridian: o } = q(e);
       return {
         selectedTime: e,
         open: !1,
@@ -1456,7 +1510,7 @@ const Jt = y(
      */
     after() {
       if (this.input.value) {
-        const { hour: e, minute: t, meridian: s } = R(this.input.value);
+        const { hour: e, minute: t, meridian: s } = q(this.input.value);
         this.state.set({
           hour: e,
           minute: t,
@@ -1471,32 +1525,54 @@ const Jt = y(
      * @returns {object}
      */
     render() {
-      const e = (s, { state: o }) => o.toggle("open"), t = ({ hour: s, minute: o, meridian: n }) => {
-        if (s && (this.state.hour = s), o && (this.state.minute = o), n && (this.state.meridian = n), 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, k.trigger("change", this.input), typeof this.change == "function" && this.change(r);
+      const e = (n, { state: r }) => r.toggle("open"), t = (n) => {
+        let r = n.target.value.replace(/[^\d]/g, ""), i = "";
+        if (r.length > 0 && (i = r.substring(0, 2), r.length > 2 && (i += ":" + r.substring(2, 4))), r.length >= 4) {
+          const a = parseInt(r.substring(0, 2), 10), m = parseInt(r.substring(2, 4), 10);
+          if (a >= 0 && a <= 23 && m >= 0 && m <= 59) {
+            let g = a, y = "AM";
+            a === 0 ? g = 12 : a > 12 ? (g = a - 12, y = "PM") : a === 12 && (y = "PM");
+            const p = `${g.toString().padStart(2, "0")}:${m.toString().padStart(2, "0")} ${y}`;
+            i = p, this.state.set({
+              hour: g.toString().padStart(2, "0"),
+              minute: m.toString().padStart(2, "0"),
+              meridian: y,
+              selectedTime: p
+            }), this.input.value = p, v.trigger("change", this.input), typeof this.change == "function" && this.change(p);
+          }
+        }
+        n.target.value = i;
+      }, s = (n) => {
+        n.target.select();
+      }, o = ({ hour: n, minute: r, meridian: i }) => {
+        if (n && (this.state.hour = n), r && (this.state.minute = r), i && (this.state.meridian = i), this.state.hour && this.state.minute && this.state.meridian) {
+          const a = `${this.state.hour}:${this.state.minute} ${this.state.meridian}`;
+          this.state.selectedTime = a, this.state.open = !1, this.input.value = a, v.trigger("change", this.input), typeof this.change == "function" && this.change(a);
         }
       };
       return l(
         { class: "relative w-full max-w-[320px]" },
         [
-          at({
+          gt({
             toggleOpen: e,
             bind: this.bind,
-            required: this.required
+            required: this.required,
+            handleInputChange: t,
+            handleInputFocus: s,
+            placeholder: this.placeholder
           }),
-          ct({
-            handleTimeSelect: t
+          pt({
+            handleTimeSelect: o
           })
         ]
       );
     }
   }
-), ut = (e, t) => l({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${t}` }, [
-  m({ size: "lg" }, e)
-]), dt = ({ title: e }) => $({ class: "flex flex-auto items-center" }, [
-  C({ class: "text-lg font-semibold" }, e)
-]), ht = c((e, t) => le(
+), bt = (e, t) => l({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${t}` }, [
+  x({ size: "lg" }, e)
+]), xt = ({ title: e }) => L({ class: "flex flex-auto items-center" }, [
+  $({ class: "text-lg font-semibold" }, e)
+]), yt = u((e, t) => ae(
   {
     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
@@ -1507,18 +1583,18 @@ const Jt = y(
   [
     l({ class: "flex flex-auto p-6 pb-12 md:pb-6" }, [
       // Icon and content
-      e.icon && ut(e.icon, e.iconColor),
+      e.icon && bt(e.icon, e.iconColor),
       l({ class: "flex flex-auto flex-col gap-4" }, [
         l({ class: "flex flex-auto flex-col gap-y-2" }, [
-          dt(e),
-          e.description && g({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, e.description),
+          xt(e),
+          e.description && w({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, e.description),
           l({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, t)
         ]),
-        e.buttons && P({ class: "flex flex-col-reverse sm:flex-row sm:justify-end mt-6 gap-2 sm:gap-0 sm:gap-x-2" }, e.buttons)
+        e.buttons && N({ class: "flex flex-col-reverse sm:flex-row sm:justify-end mt-6 gap-2 sm:gap-0 sm:gap-x-2" }, e.buttons)
       ])
     ])
   ]
-)), ft = (e) => G.render(e, app.root), V = {
+)), vt = (e) => X.render(e, app.root), _ = {
   info: {
     borderColor: "border-blue-500",
     bgColor: "bg-muted/10",
@@ -1545,7 +1621,7 @@ const Jt = y(
     iconColor: "text-muted-foreground"
   }
 };
-class mt extends w {
+class wt extends k {
   /**
    * This will declare the props for the compiler.
    *
@@ -1560,10 +1636,10 @@ class mt extends w {
    * @returns {object}
    */
   render() {
-    const t = (d) => {
-      d.target === this.panel && this.close();
-    }, { borderColor: s, bgColor: o, iconColor: n } = V[this.type] || V.default, r = `${this.getMainClass()} ${o} ${s}`, i = this.title || "Dialog Title";
-    return ht({
+    const t = (a) => {
+      a.target === this.panel && this.close();
+    }, { borderColor: s, bgColor: o, iconColor: n } = _[this.type] || _.default, r = `${this.getMainClass()} ${o} ${s}`, i = this.title || "Dialog Title";
+    return yt({
       class: r,
       title: i,
       click: t,
@@ -1607,7 +1683,7 @@ class mt extends w {
    * @returns {void}
    */
   open() {
-    ft(this), this.panel.showModal(), this.state.open = !0;
+    vt(this), this.panel.showModal(), this.state.open = !0;
   }
   /**
    * This will close the modal.
@@ -1618,7 +1694,7 @@ class mt extends w {
     this.state.open = !1, this.panel.close(), typeof this.onClose == "function" && this.onClose(), this.destroy();
   }
 }
-class Kt extends mt {
+class os extends wt {
   /**
    * This will declare the props for the compiler.
    *
@@ -1648,67 +1724,67 @@ class Kt extends mt {
     this.confirmed && this.confirmed(), this.close();
   }
 }
-const Qt = c((e, t = []) => l({ class: "w-full max-w-md p-6 m-auto" }, [
-  K({ class: "flex flex-auto flex-col" }, [
+const ns = u((e, t = []) => l({ class: "w-full max-w-md p-6 m-auto" }, [
+  ee({ class: "flex flex-auto flex-col" }, [
     l({ class: "flex flex-auto flex-col gap-y-4" }, [
       l({ class: "flex flex-auto items-center justify-center" }, [
         e.icon && l({ class: "w-16 h-16 mb-2 text-primary" }, [
-          m(e.icon)
+          x(e.icon)
         ])
       ]),
-      $({ class: "py-4 text-center" }, [
-        C({ class: "text-xl font-bold" }, e.title),
-        g({ class: "pb-8 text-muted-foreground" }, e.description || ""),
+      L({ class: "py-4 text-center" }, [
+        $({ class: "text-xl font-bold" }, e.title),
+        w({ class: "pb-8 text-muted-foreground" }, e.description || ""),
         ...t
       ])
     ])
   ])
 ]));
 export {
-  kt as A,
-  Vt as B,
-  Pt as C,
-  St as D,
-  _t as E,
-  De as F,
-  Wt as G,
-  Gt as H,
-  Ut as I,
-  Jt as J,
-  Kt as K,
-  Rt as L,
-  Mt as M,
-  jt as N,
-  ht as O,
-  Ze as P,
-  mt as Q,
-  Qt as R,
-  At as S,
-  zt as T,
-  ve as a,
-  Dt as b,
-  Ce as c,
-  Ie as d,
-  $e as e,
-  Fe as f,
-  It as g,
-  $t as h,
-  Ft as i,
-  Te as j,
-  Bt as k,
-  K as l,
-  Tt as m,
-  Lt as n,
-  Ne as o,
-  Et as p,
-  Nt as q,
-  Ot as r,
-  D as s,
-  x as t,
-  Re as u,
-  qt as v,
-  Ht as w,
-  Xe as x,
-  et as y,
-  Yt as z
+  Bt as A,
+  Jt as B,
+  Ut as C,
+  Lt as D,
+  Zt as E,
+  Te as F,
+  es as G,
+  ts as H,
+  Wt as I,
+  ss as J,
+  os as K,
+  Gt as L,
+  Vt as M,
+  Rt as N,
+  yt as O,
+  nt as P,
+  wt as Q,
+  ns as R,
+  Et as S,
+  Ht as T,
+  ke as a,
+  At as b,
+  De as c,
+  Be as d,
+  Le as e,
+  Ae as f,
+  Mt as g,
+  Pt as h,
+  jt as i,
+  Pe as j,
+  Nt as k,
+  ee as l,
+  Ot as m,
+  zt as n,
+  Re as o,
+  Yt as p,
+  qt as q,
+  _t as r,
+  T as s,
+  S as t,
+  qe as u,
+  Kt as v,
+  Qt as w,
+  ot as x,
+  lt as y,
+  Xt as z
 };