@base-framework/ui 1.0.286 → 1.0.287

package/dist/{empty-state-BcVcVLhU.js → empty-state-D09aUoDA.js}

@@ -1,12 +1,12 @@
-import { Div as n, H5 as J, P as m, I as p, Li as U, Span as i, Ul as R, Button as f, OnState as v, Label as V, H2 as C, Form as K, Header as I, Footer as A, A as q, H3 as Q, Checkbox as X, Input as x, Img as Z, Nav as ee, UseParent as H, IfState as te, Time as se, Dialog as oe } from "@base-framework/atoms";
-import { Atom as c, Component as w, Html as L, Dom as ne, base as le, Data as $, Builder as Y, Jot as k, Events as re, DateTime as F } from "@base-framework/base";
-import { P as S, b as ae, R as ie } from "./range-calendar-DW0cMOJy.js";
+import { Div as n, H5 as Q, P as m, I as p, Li as V, Span as a, Ul as q, Button as f, OnState as A, Label as H, H2 as v, Form as X, Header as D, Footer as L, A as Y, H3 as Z, Checkbox as ee, Input as x, Img as te, Nav as se, UseParent as _, OnStateOpen as P, Time as oe, Dialog as ne } from "@base-framework/atoms";
+import { Atom as c, Component as w, Html as M, Dom as le, base as re, Data as I, Builder as W, Jot as C, Events as $, DateTime as F } from "@base-framework/base";
+import { P as k, b as ie, R as ae } from "./range-calendar-DW0cMOJy.js";
 import { C as ce, F as ue, a as y } from "./veil-tVDPinrr.js";
 import { B as h, I as g } from "./buttons-BKLL4I6r.js";
 import { Icons as d } from "./icons.es.js";
 import { Timer as de, List as he, DynamicTime as fe } from "@base-framework/organisms";
-import { F as P } from "./format-DnofNaaz.js";
-const M = {
+import { F as N } from "./format-DnofNaaz.js";
+const z = {
   info: {
     borderColor: "border-blue-500",
     bgColor: "bg-muted/10",
@@ -34,11 +34,11 @@ const M = {
   }
 }, me = (e, t) => n({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
   p({ html: e })
-]), pe = (e) => J({ class: "font-semibold" }, e), ge = (e) => m({ class: "text-sm text-muted-foreground" }, e), kt = c(({ title: e, description: t, icon: s, type: o = "default" }) => {
-  const { borderColor: l, bgColor: r, iconColor: a } = M[o] || M.default;
+]), pe = (e) => Q({ class: "font-semibold" }, e), ge = (e) => m({ class: "text-sm text-muted-foreground" }, e), kt = c(({ title: e, description: t, icon: s, type: o = "default" }) => {
+  const { borderColor: l, bgColor: r, iconColor: i } = z[o] || z.default;
   return n({ class: `flex items-start p-4 border rounded-lg ${r} ${l}` }, [
     // Icon and content
-    s && me(s, a),
+    s && me(s, i),
     n({ class: "flex flex-col" }, [
       pe(e),
       ge(t)
@@ -63,20 +63,20 @@ class St extends w {
     this.prepareDestroy(), this.removeContext();
     const t = this.panel, s = this.removingClass;
     if (!s) {
-      L.removeElement(t);
+      M.removeElement(t);
       return;
     }
-    ne.addClass(t, s), le.on("animationend", t, (o) => L.removeElement(t));
+    le.addClass(t, s), re.on("animationend", t, (o) => M.removeElement(t));
   }
 }
-const be = (e) => i({ class: "ml-auto text-xs tracking-widest opacity-60" }, e), xe = (e) => i({ class: "flex w-4 h-4", html: e }), we = (e) => i({ class: "flex-auto" }, e), ye = (e, t) => U({
+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), ye = (e, t) => V({
   class: "relative flex cursor-pointer hover:bg-muted/50 select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   click: () => t(e)
 }, [
   e.icon && xe(e.icon),
   we(e.label),
   e.shortcut && be(e.shortcut)
-]), ve = (e, t) => R({ class: "grid gap-2" }, [
+]), ve = (e, t) => q({ class: "grid gap-2" }, [
   e.map((s) => ye(s, t))
 ]), Ce = (e) => n({ class: "w-full z-10" }, [
   n({
@@ -90,12 +90,12 @@ const be = (e) => i({ class: "ml-auto text-xs tracking-widest opacity-60" }, e),
 			focus:outline-none transition duration-150 ease-in-out`,
   click: s
 }, [
-  e && i(e),
+  e && a(e),
   t && p({ html: t })
 ]), Se = ({ onSelect: e }) => n([
-  v(
+  A(
     "open",
-    (t, s, o) => t ? new S({
+    (t, s, o) => t ? new k({
       cache: "dropdown",
       parent: o,
       button: o.button
@@ -119,7 +119,7 @@ class Dt extends w {
    * @returns {Data}
    */
   setData() {
-    return new $({
+    return new I({
       groups: this.groups || []
     });
   }
@@ -167,8 +167,8 @@ class Dt extends w {
     ]);
   }
 }
-const De = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t)), Ie = c((e, t) => V({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), $e = c((e, t) => m({ ...e, class: "text-sm text-muted-foreground italic" }, t)), Te = c((e, t) => m({ ...e, class: "text-sm text-destructive" }, t)), It = c((e, t = []) => ce({ class: "space-y-0", margin: "m-0", padding: "p-0" }, [
-  e.title && C({ class: "text-lg font-semibold py-4 px-6" }, e.title),
+const De = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t)), Ie = c((e, t) => H({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), $e = c((e, t) => m({ ...e, class: "text-sm text-muted-foreground italic" }, t)), Te = c((e, t) => m({ ...e, class: "text-sm text-destructive" }, t)), It = c((e, t = []) => ce({ class: "space-y-0", margin: "m-0", padding: "p-0" }, [
+  e.title && v({ class: "text-lg font-semibold py-4 px-6" }, e.title),
   e.description && m({ 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 }, [
@@ -176,7 +176,7 @@ const De = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
 ])), Tt = c((e, t = []) => {
   const s = e.border ? "border-t" : "";
   return n({ ...e, class: `flex flex-col pb-4 px-6 space-y-4 ${s} ${e.class || ""}` }, t);
-}), Be = (e) => e.tag === "input" || e.tag === "select" || e.tag === "textarea", _ = (e, t, s) => e.map((o) => !o || (o.children && o.children.length > 0 && (o.children = _(o.children, t, s)), !o.required) ? o : Be(o) ? {
+}), Be = (e) => e.tag === "input" || e.tag === "select" || e.tag === "textarea", G = (e, t, s) => e.map((o) => !o || (o.children && o.children.length > 0 && (o.children = G(o.children, t, s)), !o.required) ? o : Be(o) ? {
   ...o,
   aria: {
     invalid: ["hasError"]
@@ -184,7 +184,7 @@ const De = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
   invalid: s,
   input: t
 } : o), Fe = c((e, t) => {
-  const l = _(t, (r) => {
+  const l = G(t, (r) => {
     r.target.checkValidity() && e.setError(null);
   }, (r) => {
     e.setError(r.target.validationMessage);
@@ -234,22 +234,22 @@ const De = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
   }
 ), Ae = (e, t, s = null) => {
   e.target.checkValidity() && (e.preventDefault(), s && s(e, t));
-}, W = c(
-  (e, t) => K({ ...e, submit: (s, o) => Ae(s, o, e.submit), class: `w-full ${e.class ?? ""}` }, t)
+}, J = c(
+  (e, t) => X({ ...e, submit: (s, o) => Ae(s, o, e.submit), class: `w-full ${e.class ?? ""}` }, t)
 ), Ft = c((e, t) => n({ ...e, class: `space-y-6 p-4 md:p-6 divide-y ${e.class || ""}` }, t)), At = c((e, t = []) => n({ class: "space-y-3 py-4" }, [
-  e.title && C({ class: "font-semibold" }, e.title),
+  e.title && v({ class: "font-semibold" }, e.title),
   ...t
 ])), Lt = (e, t) => n({ class: "flex justify-between" }, [
-  i({ class: "text-muted-foreground" }, e),
-  i(t)
+  a({ class: "text-muted-foreground" }, e),
+  a(t)
 ]), Pt = (e, t) => n({ class: "flex" }, [
-  i({ class: "text-muted-foreground mr-8 w-24 truncate text-nowrap" }, e),
-  i(t)
-]), Le = ({ title: e, description: t, back: s, icon: o, options: l = [] }) => I({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10" }, [
+  a({ class: "text-muted-foreground mr-8 w-24 truncate text-nowrap" }, e),
+  a(t)
+]), Le = ({ title: e, description: t, back: s, icon: o, options: l = [] }) => D({ 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: d.arrows.left, class: "mr-2 p-0 flex sm:hidden", click: (r, a) => a.close() }),
+  s && h({ variant: "icon", icon: d.arrows.left, class: "mr-2 p-0 flex sm:hidden", click: (r, i) => i.close() }),
   /**
    * Icon
    */
@@ -259,7 +259,7 @@ const De = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
    */
   n({ class: "flex flex-auto flex-row justify-between w-full ml-2 gap-2" }, [
     n({ class: "flex flex-auto flex-col" }, [
-      C({ class: "text-lg font-semibold m-0 truncate" }, e),
+      v({ class: "text-lg font-semibold m-0 truncate" }, e),
       t && n({ class: "text-sm text-muted-foreground truncate" }, t)
     ]),
     ...l
@@ -271,12 +271,12 @@ const De = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
     s.target === o.panel && (s.preventDefault(), s.stopPropagation(), o.state.open = !1);
   }
 }, [
-  W({ class: "modal-content relative bg-background z-[1] flex flex-auto flex-col space-y-4", submit: (s, o) => e.onSubmit && e.onSubmit(o) }, [
+  J({ class: "modal-content relative bg-background z-[1] flex flex-auto flex-col space-y-4", submit: (s, o) => e.onSubmit && e.onSubmit(o) }, [
     Le(e),
     n({ class: "modal-body flex flex-grow flex-col overflow-y-auto py-0 px-6 z-0" }, t),
-    A({ class: "modal-footer sticky bg-background/80 backdrop-blur-md flex flex-none justify-between py-4 px-6 z-10" }, e.buttons)
+    L({ 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) => Y.render(e, app.root);
+])), Me = (e) => W.render(e, app.root);
 class Mt extends w {
   /**
    * This will declare the props for the compiler.
@@ -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 E = {
   info: {
     bgColor: "bg-muted/10",
     borderColor: "border-blue-500",
@@ -463,9 +463,9 @@ const N = {
     borderColor: "border",
     iconColor: "text-muted-foreground"
   }
-}, Ne = (e) => I({ class: "flex justify-center" }, [
-  Q({ class: "text-lg font-bold mb-0" }, e)
-]), ze = c(({ href: e, class: t }, s) => q({
+}, Ne = (e) => D({ class: "flex justify-center" }, [
+  Z({ class: "text-lg font-bold mb-0" }, e)
+]), ze = c(({ href: e, class: t }, s) => Y({
   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",
@@ -526,7 +526,7 @@ class je extends w {
    */
   getTypeStyles() {
     const t = this.type || "default";
-    return N[t] || N.default;
+    return E[t] || E.default;
   }
   /**
    * This will get the buttons for the notification.
@@ -556,7 +556,7 @@ class je extends w {
             this.title && Ne(this.title)
           ]),
           m({ class: "text-base text-muted-foreground m-0 pr-12" }, this.description),
-          (this.primary || this.secondary) && A({ class: "margin-top-24 flex align-center" }, this.getButtons())
+          (this.primary || this.secondary) && L({ class: "margin-top-24 flex align-center" }, this.getButtons())
         ])
       ]),
       h({
@@ -613,7 +613,7 @@ class Nt extends w {
     this.list.delete(t.id);
   }
 }
-const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
+const j = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
   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"]],
@@ -622,17 +622,17 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
   }
 }, [
   g(s),
-  i(t)
+  a(t)
 ])), Ue = (e) => {
   var o;
   const t = document.documentElement;
-  if (e === "system" && (e = (o = globalThis.matchMedia) != null && o.call(globalThis, "(prefers-color-scheme: dark)").matches ? "dark" : "light"), z && !z("(prefers-color-scheme: " + e + ")").matches) {
+  if (e === "system" && (e = (o = globalThis.matchMedia) != null && o.call(globalThis, "(prefers-color-scheme: dark)").matches ? "dark" : "light"), j && !j("(prefers-color-scheme: " + e + ")").matches) {
     t.classList.add(e);
     return;
   }
   const s = e === "light" ? "dark" : "light";
   t.classList.remove(s);
-}, zt = k(
+}, zt = C(
   {
     /**
      * This will render the component.
@@ -693,7 +693,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
           s.toggle("active"), this.checkbox.checked = s.active, this.change && this.change(s.active, t, this);
         }
       }, [
-        X({
+        ee({
           cache: "checkbox",
           class: "opacity-0 absolute top-0 left-0 bottom-0 right-0 w-full h-full",
           /**
@@ -704,14 +704,14 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
           bind: this.bind,
           required: this.required
         }),
-        i({
+        a({
           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 = {
+), S = {
   ONLINE: "online",
   OFFLINE: "offline",
   BUSY: "busy",
@@ -726,12 +726,12 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
 }), Ot = ({ propName: e = "status" } = {}) => n({
   class: "absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full",
   onSet: [e, {
-    [b.ONLINE]: D.ONLINE,
-    [b.OFFLINE]: D.OFFLINE,
-    [b.BUSY]: D.BUSY,
-    [b.AWAY]: D.AWAY
+    [b.ONLINE]: S.ONLINE,
+    [b.OFFLINE]: S.OFFLINE,
+    [b.BUSY]: S.BUSY,
+    [b.AWAY]: S.AWAY
   }]
-}), Ut = k(
+}), Ut = C(
   {
     /**
      * Get the initial state for the component.
@@ -751,7 +751,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
      */
     openFileBrowse() {
       const e = this.input;
-      e && (e.value = "", re.trigger("click", e));
+      e && (e.value = "", $.trigger("click", e));
     },
     /**
      * Get the URL for the uploaded file.
@@ -788,13 +788,13 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
             s.preventDefault(), s.stopPropagation(), this.openFileBrowse();
           }
         }, [
-          v(
+          A(
             "loaded",
-            (s) => s ? Z({
+            (s) => s ? te({
               // @ts-ignore
               src: this.src,
               class: "absolute inset-0 w-full h-full object-cover rounded-full"
-            }) : V({
+            }) : H({
               htmlFor: e,
               class: "z-10 flex flex-col items-center justify-center text-sm text-muted-foreground group-hover:text-primary"
             }, [
@@ -806,22 +806,22 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
       ]);
     }
   }
-), Ve = (e, t) => q(
+), Ve = (e, t) => Y(
   {
     href: e,
     "aria-current": t === "Breadcrumb" && "page",
     // Only set aria-current on the last item
     class: "text-muted-foreground font-medium hover:text-foreground"
   },
-  [i(t)]
+  [a(t)]
 ), qe = () => g({
   class: "mx-3 text-muted-foreground",
   "aria-hidden": !0,
   size: "xs"
 }, d.chevron.single.right), He = (e) => n({ class: "flex items-center" }, [
-  e.href ? Ve(e.href, e.label) : i(e.label),
+  e.href ? Ve(e.href, e.label) : a(e.label),
   e.separator && qe()
-]), Rt = k(
+]), Rt = C(
   {
     /**
      * Set initial data
@@ -829,7 +829,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
      * @returns {Data}
      */
     setData() {
-      return new $({
+      return new I({
         // @ts-ignore
         items: this.items || []
       });
@@ -841,7 +841,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
      */
     render() {
       const e = this.data.items.length - 1;
-      return ee(
+      return se(
         {
           "aria-label": "Breadcrumb",
           class: "flex items-center space-x-1 text-sm"
@@ -860,7 +860,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
       );
     }
   }
-), E = {
+), O = {
   xs: "h-1 w-1",
   sm: "h-2 w-2",
   md: "h-4 w-4",
@@ -869,8 +869,8 @@ const z = globalThis.matchMedia, T = 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) => E[e] || E.default, _e = ({ index: e, size: t }) => n({ class: `${t} rounded-full bg-muted cursor-pointer` }, [
-  i({
+}, Ye = (e) => O[e] || O.default, _e = ({ 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,
@@ -883,7 +883,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
 ]), We = (e, t) => Array.from({ length: e }, (s, o) => _e({
   index: o,
   size: t
-})), Vt = k(
+})), Vt = C(
   {
     /**
      * Defines component data (props).
@@ -891,7 +891,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
      * @returns {Data}
      */
     setData() {
-      return new $({
+      return new I({
         // @ts-ignore
         count: this.count || 4,
         // total dots
@@ -921,22 +921,22 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
     click: e
   },
   [
-    i({ onState: ["selectedLabel", (t) => t || "Select item..."] }),
+    a({ onState: ["selectedLabel", (t) => t || "Select item..."] }),
     p({ html: d.chevron.upDown })
   ]
-), Je = (e, t, s) => U({
+), Je = (e, t, s) => V({
   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 && i({ class: "mr-2 flex items-baseline" }, [g({ size: "xs" }, e.icon)]),
-  i({ class: "text-base font-normal" }, e.label)
+  e.icon && a({ class: "mr-2 flex items-baseline" }, [g({ size: "xs" }, e.icon)]),
+  a({ class: "text-base font-normal" }, e.label)
 ]), Ke = (e, t) => n({ class: "w-full border rounded-md" }, [
-  R({ class: "max-h-60 overflow-y-auto p-2 grid gap-1", for: ["items", (s) => Je(s, e, t)] })
+  q({ class: "max-h-60 overflow-y-auto p-2 grid gap-1", for: ["items", (s) => Je(s, e, t)] })
 ]), Qe = ({ onSelect: e, state: t }) => n({ class: "flex flex-auto flex-col" }, [
-  v(
+  A(
     "open",
-    (s, o, l) => s ? new S({
+    (s, o, l) => s ? new k({
       cache: "dropdown",
       parent: l,
       button: l.button
@@ -944,7 +944,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
       Ke(e, t)
     ]) : null
   )
-]), qt = k(
+]), qt = C(
   {
     /**
      * This will set up the data.
@@ -952,7 +952,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
      * @returns {Data}
      */
     setData() {
-      return new $({
+      return new I({
         // @ts-ignore
         items: this.items || []
       });
@@ -1046,26 +1046,26 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
       ]);
     }
   }
-), G = ({ icon: e, click: t, ariaLabel: s }) => h({
+), K = ({ icon: e, click: t, ariaLabel: s }) => h({
   variant: "icon",
   class: "flex flex-none",
   click: t,
   icon: e,
   "aria-label": s
-}), Xe = ({ click: e }) => G({
+}), Xe = ({ click: e }) => K({
   icon: d.circleMinus,
   click: e,
   ariaLabel: "Decrement"
-}), Ze = ({ click: e }) => G({
+}), Ze = ({ click: e }) => K({
   icon: d.circlePlus,
   click: e,
   ariaLabel: "Increment"
-}), et = ({ bind: e, min: t, max: s, readonly: o = !1 }) => H(({ state: l }) => x({
+}), et = ({ bind: e, min: t, max: s, readonly: o = !1 }) => _(({ state: l }) => x({
   value: ["[[count]]", l],
   bind: e,
-  blur: (r, { state: a }) => {
+  blur: (r, { state: i }) => {
     let u = parseInt(r.target.value, 10);
-    isNaN(u) && (u = t ?? 0), t !== void 0 && (u = Math.max(u, t)), s !== void 0 && (u = Math.min(u, s)), a.count = u;
+    isNaN(u) && (u = t ?? 0), t !== void 0 && (u = Math.max(u, t)), s !== void 0 && (u = Math.min(u, s)), i.count = u;
   },
   class: "flex flex-auto text-lg font-medium bg-input text-center border min-w-0",
   readonly: o,
@@ -1117,20 +1117,18 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
   click: s
 }, [
   tt({ bind: e, required: t }),
-  i({
+  a({
     onState: ["selectedDate", (o) => o ? F.format("standard", o) : "Pick a date"]
   }),
   p({ html: d.calendar.days })
-]), ot = ({ handleDateSelect: e, blockPriorDates: t }) => te(
-  "open",
-  !0,
-  (s, o, l) => new S({
+]), ot = ({ handleDateSelect: e, blockPriorDates: t }) => P(
+  (s, o, l) => new k({
     cache: "dropdown",
     parent: l,
     button: l.panel,
     size: "fit"
   }, [
-    new ae({
+    new ie({
       selectedDate: l.state.selectedDate,
       selectedCallBack: e,
       blockPriorDates: t
@@ -1165,7 +1163,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
      */
     render() {
       const e = (s, { state: o }) => o.toggle("open"), t = (s) => {
-        console.log(this, this.data), this.state.selectedDate = s, this.state.open = !1, this.input.value = s, typeof this.onChange == "function" && this.onChange(s);
+        this.state.selectedDate = s, this.state.open = !1, this.input.value = s, $.trigger("change", this.input), typeof this.onChange == "function" && this.onChange(s);
       };
       return n({ class: "relative w-full max-w-[320px]" }, [
         st({
@@ -1190,28 +1188,25 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
   click: s
 }, [
   nt({ bind: e, required: t }),
-  H(({ state: o }) => [
-    i(P.date(["[[start]]", o], "Start Date")),
-    i(" - "),
-    i(P.date(["[[end]]", o], "End Date"))
+  _(({ state: o }) => [
+    a(N.date(["[[start]]", o], "Start Date")),
+    a(" - "),
+    a(N.date(["[[end]]", o], "End Date"))
   ]),
   p({ html: d.calendar.days })
-]), rt = ({ handleDateSelect: e, blockPriorDates: t }) => v(
-  "open",
-  (s, o, l) => s ? new S({
-    cache: "dropdown",
-    parent: l,
-    button: l.panel,
-    size: "xl"
-  }, [
-    new ie({
-      startDate: l.state.start,
-      endDate: l.state.end,
-      onRangeSelect: e,
-      blockPriorDates: t
-    })
-  ]) : null
-), _t = y(
+]), rt = ({ handleDateSelect: e, blockPriorDates: t }) => P((s, o, l) => new k({
+  cache: "dropdown",
+  parent: l,
+  button: l.panel,
+  size: "xl"
+}, [
+  new ae({
+    startDate: l.state.start,
+    endDate: l.state.end,
+    onRangeSelect: e,
+    blockPriorDates: t
+  })
+])), _t = y(
   {
     /**
      * The initial state of the DateRangePicker.
@@ -1244,7 +1239,7 @@ const z = globalThis.matchMedia, T = 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}`, 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}`, $.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]" }, [
         lt({
@@ -1259,7 +1254,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
       ]);
     }
   }
-), Wt = ({ dateTime: e = "", remoteTimeZone: t = "America/Denver", filter: s = null }) => se([
+), Wt = ({ dateTime: e = "", remoteTimeZone: t = "America/Denver", filter: s = null }) => oe([
   new fe({
     dateTime: e,
     filter: s || ((o) => {
@@ -1268,7 +1263,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
     })
   })
 ]);
-function at({ bind: e, required: t }) {
+function it({ bind: e, required: t }) {
   return x({
     cache: "input",
     class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
@@ -1276,15 +1271,15 @@ function at({ bind: e, required: t }) {
     required: t
   });
 }
-function it({ bind: e, required: t, toggleOpen: s }) {
+function at({ bind: e, required: t, toggleOpen: s }) {
   return 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
     },
     [
-      at({ bind: e, required: t }),
-      i({
+      it({ bind: e, required: t }),
+      a({
         onState: ["selectedTime", (o) => o || "Pick a time"]
       }),
       p({ html: d.clock })
@@ -1295,20 +1290,19 @@ function B({ items: e, handleTimeSelect: t, state: s, stateValue: o, pad: l = !1
   return n(
     { class: "flex flex-col max-h-[200px] overflow-y-auto" },
     e.map((r) => {
-      let a = l ? r.toString().padStart(2, "0") : r.toString();
+      let i = l ? r.toString().padStart(2, "0") : r.toString();
       return f({
-        text: a,
+        text: i,
         class: "hover:bg-muted/50 rounded-md px-2 py-1",
-        click: () => t({ [o]: a }),
-        onState: [s, o, { "bg-muted": a }]
+        click: () => t({ [o]: i }),
+        onState: [s, o, { "bg-muted": i }]
       });
     })
   );
 }
 function ct({ handleTimeSelect: e }) {
-  return v(
-    "open",
-    (t, s, o) => t ? new S(
+  return P(
+    (t, s, o) => new k(
       {
         cache: "dropdown",
         parent: o,
@@ -1350,18 +1344,18 @@ function ct({ handleTimeSelect: e }) {
           ]
         )
       ]
-    ) : null
+    )
   );
 }
-function j(e) {
+function U(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, a = parseInt(o, 10), u = parseInt(l, 10);
-  return a < 0 || a > 23 || u < 0 || u > 59 ? { hour: null, minute: null, meridian: null } : (r ? (r = r.toUpperCase(), r === "PM" && a < 12 ? a += 12 : r === "AM" && a === 12 && (a = 12)) : a === 0 ? (r = "AM", a = 12) : a < 12 ? r = "AM" : a === 12 ? r = "PM" : (r = "PM", a -= 12), {
-    hour: a.toString().padStart(2, "0"),
+  let [, o, l, , r] = s, i = parseInt(o, 10), u = parseInt(l, 10);
+  return i < 0 || i > 23 || u < 0 || u > 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: u.toString().padStart(2, "0"),
     meridian: r
   });
@@ -1374,7 +1368,7 @@ const Gt = y(
      * @member {object} state
      */
     state() {
-      const e = this.selectedTime ?? null, { hour: t, minute: s, meridian: o } = j(e);
+      const e = this.selectedTime ?? null, { hour: t, minute: s, meridian: o } = U(e);
       return {
         selectedTime: e,
         open: !1,
@@ -1390,7 +1384,7 @@ const Gt = y(
      */
     after() {
       if (this.input.value) {
-        const { hour: e, minute: t, meridian: s } = j(this.input.value);
+        const { hour: e, minute: t, meridian: s } = U(this.input.value);
         this.state.set({
           hour: e,
           minute: t,
@@ -1408,13 +1402,13 @@ const Gt = y(
       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);
+          this.state.selectedTime = r, this.state.open = !1, this.input.value = r, $.trigger("change", this.input), typeof this.change == "function" && this.change(r);
         }
       };
       return n(
         { class: "relative w-full max-w-[320px]" },
         [
-          it({
+          at({
             toggleOpen: e,
             bind: this.bind,
             required: this.required
@@ -1428,9 +1422,9 @@ const Gt = y(
   }
 ), ut = (e, t) => n({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${t}` }, [
   g({ size: "lg" }, e)
-]), dt = ({ title: e }) => I({ class: "flex flex-auto items-center" }, [
-  C({ class: "text-lg font-semibold" }, e)
-]), ht = c((e, t) => oe(
+]), dt = ({ title: e }) => D({ class: "flex flex-auto items-center" }, [
+  v({ class: "text-lg font-semibold" }, e)
+]), ht = 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
@@ -1448,11 +1442,11 @@ const Gt = y(
           e.description && m({ 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 && A({ 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 && L({ class: "flex flex-col-reverse sm:flex-row sm:justify-end mt-6 gap-2 sm:gap-0 sm:space-x-2" }, e.buttons)
       ])
     ])
   ]
-)), ft = (e) => Y.render(e, app.root), O = {
+)), ft = (e) => W.render(e, app.root), R = {
   info: {
     borderColor: "border-blue-500",
     bgColor: "bg-muted/10",
@@ -1496,10 +1490,10 @@ class mt extends w {
   render() {
     const t = (u) => {
       u.target === this.panel && this.close();
-    }, { borderColor: s, bgColor: o, iconColor: l } = O[this.type] || O.default, r = `${this.getMainClass()} ${o} ${s}`, a = this.title || "Dialog Title";
+    }, { borderColor: s, bgColor: o, iconColor: l } = R[this.type] || R.default, r = `${this.getMainClass()} ${o} ${s}`, i = this.title || "Dialog Title";
     return ht({
       class: r,
-      title: a,
+      title: i,
       click: t,
       icon: this.icon,
       iconColor: l,
@@ -1583,15 +1577,15 @@ class Jt extends mt {
   }
 }
 const Kt = c((e, t = []) => n({ class: "w-full max-w-md p-6 m-auto" }, [
-  W({ class: "flex flex-auto flex-col" }, [
+  J({ class: "flex flex-auto flex-col" }, [
     n({ class: "flex flex-auto flex-col space-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)
         ])
       ]),
-      I({ class: "py-4 text-center" }, [
-        C({ class: "text-xl font-bold" }, e.title),
+      D({ class: "py-4 text-center" }, [
+        v({ class: "text-xl font-bold" }, e.title),
         m({ class: "pb-8 text-muted-foreground" }, e.description || ""),
         ...t
       ])
@@ -1629,14 +1623,14 @@ export {
   Tt as i,
   Fe as j,
   Bt as k,
-  W as l,
+  J as l,
   Ft as m,
   At as n,
   je as o,
   Et as p,
   jt as q,
   Ot as r,
-  D as s,
+  S as s,
   b as t,
   Re as u,
   Vt as v,

package/dist/index.es.js

@@ -3,7 +3,7 @@ import { B as d, I as g, L as C } from "./buttons-BKLL4I6r.js";
 import { C as T, F as D, V as I, a as b } from "./veil-tVDPinrr.js";
 import { C as F, d as P, D as B, c as k, E as M, F as f, H as x, I as N, M as v, N as y, P as h, R as L, T as W, a as H, b as A, U as R, W as w } from "./inputs-DYxmO1rQ.js";
 import { Icons as G } from "./icons.es.js";
-import { A as E, B as V, C as j, w as q, J, y as z, z as K, E as Q, G as _, D as X, m as Y, n as Z, O as $, K as aa, v as ea, c as sa, a as oa, b as ta, Q as ra, l as na, g as la, i as ia, h as pa, j as ma, e as ua, k as da, F as ga, d as Ca, f as ca, L as Ta, x as Da, M as Ia, o as ba, N as Sa, P as Fa, s as Pa, t as Ba, S as ka, q as Ma, r as fa, T as xa, H as Na, I as va, p as ya, u as ha } from "./empty-state-BcVcVLhU.js";
+import { A as E, B as V, C as j, w as q, J, y as z, z as K, E as Q, G as _, D as X, m as Y, n as Z, O as $, K as aa, v as ea, c as sa, a as oa, b as ta, Q as ra, l as na, g as la, i as ia, h as pa, j as ma, e as ua, k as da, F as ga, d as Ca, f as ca, L as Ta, x as Da, M as Ia, o as ba, N as Sa, P as Fa, s as Pa, t as Ba, S as ka, q as Ma, r as fa, T as xa, H as Na, I as va, p as ya, u as ha } from "./empty-state-D09aUoDA.js";
 import { A as Wa, b as Ha, C as Aa, D as Ra, a as wa, F as Ua, M as Ga, P as Oa, R as Ea, c as Va, g as ja, p as qa } from "./range-calendar-DW0cMOJy.js";
 import { B as za, p as Ka, C as Qa, j as _a, D as Xa, m as Ya, k as Za, H as $a, I as ae, N as ee, O as se, P as oe, S as te, n as re, o as ne, t as le, s as ie, q as pe, r as me, T as ue, l as de, U as ge, W as Ce, f as ce, h as Te, i as De, c as Ie, d as be, b as Se, e as Fe, a as Pe, g as Be } from "./signature-panel-BEO99NlI.js";
 import { B as Me, I as fe, M as xe, d as Ne, e as ve, g as ye, N as he, b as Le, a as We, f as He, P as Ae, c as Re, S as we, T as Ue } from "./mobile-nav-wrapper-C7RyGC5a.js";

package/dist/molecules.es.js

@@ -1,4 +1,4 @@
-import { A as s, B as t, C as r, w as e, J as i, y as n, z as m, E as l, G as C, D as d, m as S, n as p, O as u, K as D, v as c, c as g, a as F, b as T, Q as P, l as A, g as f, i as w, h as I, j as b, e as y, k as B, F as M, d as k, f as x, L, x as v, M as E, o as N, N as R, P as U, s as h, t as G, S as O, q as j, r as q, T as z, H, I as J, p as K, u as Q } from "./empty-state-BcVcVLhU.js";
+import { A as s, B as t, C as r, w as e, J as i, y as n, z as m, E as l, G as C, D as d, m as S, n as p, O as u, K as D, v as c, c as g, a as F, b as T, Q as P, l as A, g as f, i as w, h as I, j as b, e as y, k as B, F as M, d as k, f as x, L, x as v, M as E, o as N, N as R, P as U, s as h, t as G, S as O, q as j, r as q, T as z, H, I as J, p as K, u as Q } from "./empty-state-D09aUoDA.js";
 import { A as V, P as W, g as X } from "./range-calendar-DW0cMOJy.js";
 export {
   s as Alert,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@base-framework/ui",
-	"version": "1.0.286",
+	"version": "1.0.287",
 	"description": "This is a UI package that adds components and atoms that use Tailwind CSS and a theme based on Shadcn.",
 	"main": "./dist/index.es.js",
 	"scripts": {