@base-framework/ui 1.0.246 → 1.0.248

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,12 +1,12 @@
1
- import { Div as n, H5 as J, P as g, I as f, Li as V, Span as i, Ul as q, Button as m, OnState as w, Label as G, Form as K, H2 as S, Header as D, Footer as P, A as H, H3 as Q, Checkbox as X, Nav as Z, Input as y, UseParent as Y, Time as ee, Dialog as te } from "@base-framework/atoms";
2
- import { Atom as c, Component as v, Html as M, Dom as se, base as oe, Data as I, Builder as U, Jot as $, DateTime as A } from "@base-framework/base";
3
- import { P as C, b as ne, R as le } from "./range-calendar-k0B4ZWJq.js";
4
- import { B as h, I as b } from "./buttons-Cm9etaEG.js";
1
+ import { Div as n, H5 as G, P as b, I as m, Li as V, Span as a, Ul as U, Button as f, OnState as x, Label as q, Form as K, H2 as D, Header as I, Footer as L, A as H, H3 as Q, Checkbox as X, Input as w, Img as Z, Nav as ee, UseParent as R, Time as te, Dialog as se } from "@base-framework/atoms";
2
+ import { Atom as c, Component as v, Html as P, Dom as oe, base as ne, Data as $, Builder as Y, Jot as C, Events as le, DateTime as A } from "@base-framework/base";
3
+ import { P as k, b as re, R as ie } from "./range-calendar-k0B4ZWJq.js";
4
+ import { B as h, I as p } from "./buttons-Cm9etaEG.js";
5
5
  import { Icons as u } from "./icons.es.js";
6
- import { Timer as re, List as ae, DynamicTime as ie } from "@base-framework/organisms";
7
- import { a as x } from "./veil-D4dRxILB.js";
8
- import { F as L } from "./format-DnofNaaz.js";
9
- const F = {
6
+ import { Timer as ae, List as ce, DynamicTime as de } from "@base-framework/organisms";
7
+ import { a as y } from "./veil-D4dRxILB.js";
8
+ import { F } from "./format-DnofNaaz.js";
9
+ const M = {
10
10
  info: {
11
11
  borderColor: "border-blue-500",
12
12
  bgColor: "bg-muted/10",
@@ -32,20 +32,20 @@ const F = {
32
32
  bgColor: "bg-muted/10",
33
33
  iconColor: "text-muted-foreground"
34
34
  }
35
- }, ce = (e, t) => n({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
36
- f({ html: e })
37
- ]), de = (e) => J({ class: "font-semibold" }, e), ue = (e) => g({ class: "text-sm text-muted-foreground" }, e), wt = c(({ title: e, description: t, icon: s, type: o = "default" }) => {
38
- const { borderColor: l, bgColor: r, iconColor: a } = F[o] || F.default;
35
+ }, ue = (e, t) => n({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
36
+ m({ html: e })
37
+ ]), he = (e) => G({ class: "font-semibold" }, e), fe = (e) => b({ class: "text-sm text-muted-foreground" }, e), vt = c(({ title: e, description: t, icon: s, type: o = "default" }) => {
38
+ const { borderColor: l, bgColor: r, iconColor: i } = M[o] || M.default;
39
39
  return n({ class: `flex items-start p-4 border rounded-lg ${r} ${l}` }, [
40
40
  // Icon and content
41
- s && ce(s, a),
41
+ s && ue(s, i),
42
42
  n({ class: "flex flex-col" }, [
43
- de(e),
44
- ue(t)
43
+ he(e),
44
+ fe(t)
45
45
  ])
46
46
  ]);
47
47
  });
48
- class he extends v {
48
+ class me extends v {
49
49
  /**
50
50
  * This will declare the props for the compiler.
51
51
  *
@@ -63,48 +63,48 @@ class he extends v {
63
63
  this.prepareDestroy(), this.removeContext();
64
64
  const t = this.panel, s = this.removingClass;
65
65
  if (!s) {
66
- M.removeElement(t);
66
+ P.removeElement(t);
67
67
  return;
68
68
  }
69
- se.addClass(t, s), oe.on("animationend", t, (o) => M.removeElement(t));
69
+ oe.addClass(t, s), ne.on("animationend", t, (o) => P.removeElement(t));
70
70
  }
71
71
  }
72
- const me = (e) => i({ class: "ml-auto text-xs tracking-widest opacity-60" }, e), fe = (e) => i({ class: "flex w-4 h-4", html: e }), pe = (e) => i({ class: "flex-auto" }, e), ge = (e, t) => V({
72
+ const pe = (e) => a({ class: "ml-auto text-xs tracking-widest opacity-60" }, e), ge = (e) => a({ class: "flex w-4 h-4", html: e }), be = (e) => a({ class: "flex-auto" }, e), xe = (e, t) => V({
73
73
  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",
74
74
  click: () => t(e)
75
75
  }, [
76
- e.icon && fe(e.icon),
77
- pe(e.label),
78
- e.shortcut && me(e.shortcut)
79
- ]), be = (e, t) => q({ class: "grid gap-2" }, [
80
- e.map((s) => ge(s, t))
81
- ]), xe = (e) => n({ class: "w-full z-10" }, [
76
+ e.icon && ge(e.icon),
77
+ be(e.label),
78
+ e.shortcut && pe(e.shortcut)
79
+ ]), we = (e, t) => U({ class: "grid gap-2" }, [
80
+ e.map((s) => xe(s, t))
81
+ ]), ye = (e) => n({ class: "w-full z-10" }, [
82
82
  n({
83
83
  class: "max-h-60 border rounded-md overflow-y-auto p-1 grid gap-2 divide-y divide-border",
84
- for: ["groups", (t) => be(t, e)]
84
+ for: ["groups", (t) => we(t, e)]
85
85
  })
86
- ]), we = ({ label: e, icon: t, toggleDropdown: s }) => m({
86
+ ]), ve = ({ label: e, icon: t, toggleDropdown: s }) => f({
87
87
  cache: "button",
88
88
  class: `inline-flex items-center justify-between rounded-md border border-input
89
89
  bg-background px-2 py-2 text-sm font-medium hover:bg-muted
90
90
  focus:outline-none transition duration-150 ease-in-out`,
91
91
  click: s
92
92
  }, [
93
- e && i(e),
94
- t && f({ html: t })
95
- ]), ye = ({ onSelect: e }) => n([
96
- w(
93
+ e && a(e),
94
+ t && m({ html: t })
95
+ ]), Ce = ({ onSelect: e }) => n([
96
+ x(
97
97
  "open",
98
- (t, s, o) => t ? new C({
98
+ (t, s, o) => t ? new k({
99
99
  cache: "dropdown",
100
100
  parent: o,
101
101
  button: o.button
102
102
  }, [
103
- xe(e)
103
+ ye(e)
104
104
  ]) : null
105
105
  )
106
106
  ]);
107
- class yt extends v {
107
+ class Ct extends v {
108
108
  /**
109
109
  * This will declare the props for the compiler.
110
110
  *
@@ -119,7 +119,7 @@ class yt extends v {
119
119
  * @returns {Data}
120
120
  */
121
121
  setData() {
122
- return new I({
122
+ return new $({
123
123
  groups: this.groups || []
124
124
  });
125
125
  }
@@ -158,24 +158,24 @@ class yt extends v {
158
158
  */
159
159
  render() {
160
160
  return n({ class: "relative" }, [
161
- we({
161
+ ve({
162
162
  label: this.label,
163
163
  icon: this.icon,
164
164
  toggleDropdown: this.toggleDropdown.bind(this)
165
165
  }),
166
- ye({ onSelect: this.handleSelect.bind(this) })
166
+ Ce({ onSelect: this.handleSelect.bind(this) })
167
167
  ]);
168
168
  }
169
169
  }
170
- const ve = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t)), Ce = c((e, t) => G({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), ke = c((e, t) => g({ ...e, class: "text-sm text-muted-foreground italic" }, t)), Se = c((e, t) => g({ ...e, class: "text-sm text-destructive" }, t)), De = (e) => e.tag === "input" || e.tag === "select" || e.tag === "textarea", R = (e, t, s) => e.map((o) => (o.children && o.children.length > 0 && (o.children = R(o.children, t, s)), o.required && De(o) ? {
170
+ const ke = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t)), Se = c((e, t) => q({ ...e, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, t)), De = c((e, t) => b({ ...e, class: "text-sm text-muted-foreground italic" }, t)), Ie = c((e, t) => b({ ...e, class: "text-sm text-destructive" }, t)), $e = (e) => e.tag === "input" || e.tag === "select" || e.tag === "textarea", _ = (e, t, s) => e.map((o) => (o.children && o.children.length > 0 && (o.children = _(o.children, t, s)), o.required && $e(o) ? {
171
171
  ...o,
172
172
  aria: {
173
173
  invalid: ["hasError"]
174
174
  },
175
175
  invalid: s,
176
176
  input: t
177
- } : o)), Ie = c((e, t) => {
178
- const l = R(t, (r) => {
177
+ } : o)), Te = c((e, t) => {
178
+ const l = _(t, (r) => {
179
179
  r.target.checkValidity() && e.setError(null);
180
180
  }, (r) => {
181
181
  e.setError(r.target.validationMessage);
@@ -184,7 +184,7 @@ const ve = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
184
184
  ...e,
185
185
  class: "w-full"
186
186
  }, l);
187
- }), vt = x(
187
+ }), kt = y(
188
188
  {
189
189
  /**
190
190
  * The initial state of the FormField.
@@ -209,66 +209,66 @@ const ve = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
209
209
  this.state.error = r, this.state.hasError = !!r;
210
210
  };
211
211
  return n({ class: "flex flex-auto space-y-4" }, [
212
- ve([
213
- Ce({ htmlFor: t }, s),
214
- Ie({
212
+ ke([
213
+ Se({ htmlFor: t }, s),
214
+ Te({
215
215
  id: t,
216
216
  name: e,
217
217
  value: this.state.value,
218
218
  setError: l
219
219
  }, this.children),
220
- o && ke({ id: this.getId("description") }, o),
221
- n({ onState: ["error", (r) => r && Se(r)] })
220
+ o && De({ id: this.getId("description") }, o),
221
+ n({ onState: ["error", (r) => r && Ie(r)] })
222
222
  ])
223
223
  ]);
224
224
  }
225
225
  }
226
- ), $e = (e, t, s = null) => {
226
+ ), Be = (e, t, s = null) => {
227
227
  e.target.checkValidity() && (e.preventDefault(), s && s(e, t));
228
- }, _ = c(
229
- (e, t) => K({ ...e, submit: (s, o) => $e(s, o, e.submit), class: `w-full ${e.class ?? ""}` }, t)
230
- ), Ct = c((e, t) => n({ ...e, class: `space-y-6 p-4 md:p-6 divide-y ${e.class || ""}` }, t)), kt = c((e, t = []) => n({ class: "space-y-3 py-4" }, [
231
- e.title && S({ class: "font-semibold" }, e.title),
228
+ }, W = c(
229
+ (e, t) => K({ ...e, submit: (s, o) => Be(s, o, e.submit), class: `w-full ${e.class ?? ""}` }, t)
230
+ ), St = c((e, t) => n({ ...e, class: `space-y-6 p-4 md:p-6 divide-y ${e.class || ""}` }, t)), Dt = c((e, t = []) => n({ class: "space-y-3 py-4" }, [
231
+ e.title && D({ class: "font-semibold" }, e.title),
232
232
  ...t
233
- ])), St = (e, t) => n({ class: "flex justify-between" }, [
234
- i({ class: "text-muted-foreground" }, e),
235
- i(t)
236
- ]), Dt = (e, t) => n({ class: "flex" }, [
237
- i({ class: "text-muted-foreground mr-8 w-24 truncate text-nowrap" }, e),
238
- i(t)
239
- ]), Te = ({ 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" }, [
233
+ ])), It = (e, t) => n({ class: "flex justify-between" }, [
234
+ a({ class: "text-muted-foreground" }, e),
235
+ a(t)
236
+ ]), $t = (e, t) => n({ class: "flex" }, [
237
+ a({ class: "text-muted-foreground mr-8 w-24 truncate text-nowrap" }, e),
238
+ a(t)
239
+ ]), Ae = ({ 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" }, [
240
240
  /**
241
241
  * Back Button
242
242
  */
243
- s && h({ variant: "icon", icon: u.arrows.left, class: "mr-2 p-0 flex sm:hidden", click: (r, a) => a.close() }),
243
+ s && h({ variant: "icon", icon: u.arrows.left, class: "mr-2 p-0 flex sm:hidden", click: (r, i) => i.close() }),
244
244
  /**
245
245
  * Icon
246
246
  */
247
- o && n({ class: "mr-2 w-12 h-12 rounded-full bg-muted flex flex-none items-center justify-center" }, [b(o)]),
247
+ o && n({ class: "mr-2 w-12 h-12 rounded-full bg-muted flex flex-none items-center justify-center" }, [p(o)]),
248
248
  /**
249
249
  * Title and Description
250
250
  */
251
251
  n({ class: "flex flex-auto flex-row justify-between w-full ml-2 gap-2" }, [
252
252
  n({ class: "flex flex-auto flex-col" }, [
253
- S({ class: "text-lg font-semibold m-0 truncate" }, e),
253
+ D({ class: "text-lg font-semibold m-0 truncate" }, e),
254
254
  t && n({ class: "text-sm text-muted-foreground truncate" }, t)
255
255
  ]),
256
256
  ...l
257
257
  ])
258
- ]), Be = c((e, t) => n({
258
+ ]), Le = c((e, t) => n({
259
259
  popover: "manual",
260
260
  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}`,
261
261
  click: (s, o) => {
262
262
  s.target === o.panel && (s.preventDefault(), s.stopPropagation(), o.state.open = !1);
263
263
  }
264
264
  }, [
265
- _({ class: "modal-content relative bg-background z-[1] flex flex-auto flex-col space-y-4", submit: (s, o) => e.onSubmit && e.onSubmit(o) }, [
266
- Te(e),
265
+ 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) }, [
266
+ Ae(e),
267
267
  n({ class: "modal-body flex flex-grow flex-col overflow-y-auto py-0 px-6 z-0" }, t),
268
- P({ class: "modal-footer sticky bg-background/80 backdrop-blur-md flex flex-none justify-between py-4 px-6 z-10" }, e.buttons)
268
+ L({ class: "modal-footer sticky bg-background/80 backdrop-blur-md flex flex-none justify-between py-4 px-6 z-10" }, e.buttons)
269
269
  ])
270
- ])), Ae = (e) => U.render(e, app.root);
271
- class It extends v {
270
+ ])), Pe = (e) => Y.render(e, app.root);
271
+ class Tt extends v {
272
272
  /**
273
273
  * This will declare the props for the compiler.
274
274
  *
@@ -284,7 +284,7 @@ class It extends v {
284
284
  */
285
285
  render() {
286
286
  const t = this.getMainClass(), s = this.title || "", o = this.description || null;
287
- return Be(
287
+ return Le(
288
288
  {
289
289
  class: t,
290
290
  title: s,
@@ -399,7 +399,7 @@ class It extends v {
399
399
  * @returns {void}
400
400
  */
401
401
  open() {
402
- Ae(this), this.showModal();
402
+ Pe(this), this.showModal();
403
403
  }
404
404
  /**
405
405
  * This will destroy the modal.
@@ -428,7 +428,7 @@ class It extends v {
428
428
  this.panel.hidePopover(), this.state.open = !1, typeof this.onClose == "function" && this.onClose(this), document.documentElement.style.overflowY = "auto";
429
429
  }
430
430
  }
431
- const N = {
431
+ const z = {
432
432
  info: {
433
433
  bgColor: "bg-muted/10",
434
434
  borderColor: "border-blue-500",
@@ -454,18 +454,18 @@ const N = {
454
454
  borderColor: "border",
455
455
  iconColor: "text-muted-foreground"
456
456
  }
457
- }, Pe = (e) => D({ class: "flex justify-center" }, [
457
+ }, Fe = (e) => I({ class: "flex justify-center" }, [
458
458
  Q({ class: "text-lg font-bold mb-0" }, e)
459
459
  ]), Me = c(({ href: e, class: t }, s) => H({
460
460
  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}`,
461
461
  href: e,
462
462
  role: "alert"
463
- }, s)), Le = c(({ close: e, class: t }, s) => n({
463
+ }, s)), ze = c(({ close: e, class: t }, s) => n({
464
464
  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}`,
465
465
  click: () => e(),
466
466
  role: "alert"
467
467
  }, s));
468
- class Fe extends he {
468
+ class Ne extends me {
469
469
  /**
470
470
  * This will declare the props for the compiler.
471
471
  *
@@ -492,7 +492,7 @@ class Fe extends he {
492
492
  return l ? Me({
493
493
  href: l,
494
494
  class: `${t} ${s}`
495
- }, r) : Le({
495
+ }, r) : ze({
496
496
  close: this.close.bind(this),
497
497
  class: `${t} ${s}`
498
498
  }, r);
@@ -504,7 +504,7 @@ class Fe extends he {
504
504
  */
505
505
  afterSetup() {
506
506
  const t = this.duration;
507
- t !== "infinite" && (this.timer = new re(t, this.close.bind(this)), this.timer.start());
507
+ t !== "infinite" && (this.timer = new ae(t, this.close.bind(this)), this.timer.start());
508
508
  }
509
509
  /**
510
510
  * This will get the style properties based on the notification type.
@@ -513,7 +513,7 @@ class Fe extends he {
513
513
  */
514
514
  getTypeStyles() {
515
515
  const t = this.type || "default";
516
- return N[t] || N.default;
516
+ return z[t] || z.default;
517
517
  }
518
518
  /**
519
519
  * This will get the buttons for the notification.
@@ -537,13 +537,13 @@ class Fe extends he {
537
537
  getChildren(t) {
538
538
  return [
539
539
  n({ class: "flex items-start" }, [
540
- this.icon && f({ class: `mr-4 ${t}`, html: this.icon }),
540
+ this.icon && m({ class: `mr-4 ${t}`, html: this.icon }),
541
541
  n({ class: "flex flex-auto flex-col" }, [
542
542
  n({ class: "flex flex-auto flex-row items-center w-full pr-12" }, [
543
- this.title && Pe(this.title)
543
+ this.title && Fe(this.title)
544
544
  ]),
545
- g({ class: "text-base text-muted-foreground m-0 pr-12" }, this.description),
546
- (this.primary || this.secondary) && P({ class: "margin-top-24 flex align-center" }, this.getButtons())
545
+ b({ class: "text-base text-muted-foreground m-0 pr-12" }, this.description),
546
+ (this.primary || this.secondary) && L({ class: "margin-top-24 flex align-center" }, this.getButtons())
547
547
  ])
548
548
  ]),
549
549
  h({
@@ -564,8 +564,8 @@ class Fe extends he {
564
564
  t && t.stopPropagation(), this.duration !== "infinite" && this.timer.stop(), this.onClick && this.onClick(), this.destroy();
565
565
  }
566
566
  }
567
- let Ne = 0;
568
- class $t extends v {
567
+ let Ee = 0;
568
+ class Bt extends v {
569
569
  /**
570
570
  * This will render the component.
571
571
  *
@@ -573,11 +573,11 @@ class $t extends v {
573
573
  */
574
574
  render() {
575
575
  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" }, [
576
- new ae({
576
+ new ce({
577
577
  cache: "list",
578
578
  key: "id",
579
579
  role: "list",
580
- rowItem: (t) => new Fe(t)
580
+ rowItem: (t) => new Ne(t)
581
581
  })
582
582
  ]);
583
583
  }
@@ -588,7 +588,7 @@ class $t extends v {
588
588
  * @returns {void}
589
589
  */
590
590
  addNotice(t = {}) {
591
- t.id = Ne++, t.callBack = () => this.removeNotice(t), this.list.append([t]), this.panel.hidePopover(), this.panel.showPopover();
591
+ t.id = Ee++, t.callBack = () => this.removeNotice(t), this.list.append([t]), this.panel.hidePopover(), this.panel.showPopover();
592
592
  }
593
593
  /**
594
594
  * This will remove a notification.
@@ -600,26 +600,26 @@ class $t extends v {
600
600
  this.list.delete(t.id);
601
601
  }
602
602
  }
603
- const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => m({
603
+ const N = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => f({
604
604
  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',
605
605
  onState: ["method", { active: e }],
606
606
  dataSet: ["method", ["state", e, "active"]],
607
607
  click: (o, { state: l }) => {
608
- l.method = e, localStorage.setItem("theme", e), e === "system" && localStorage.removeItem("theme"), ze(e);
608
+ l.method = e, localStorage.setItem("theme", e), e === "system" && localStorage.removeItem("theme"), je(e);
609
609
  }
610
610
  }, [
611
- b(s),
612
- i(t)
613
- ])), ze = (e) => {
611
+ p(s),
612
+ a(t)
613
+ ])), je = (e) => {
614
614
  var o;
615
615
  const t = document.documentElement;
616
- 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) {
616
+ 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) {
617
617
  t.classList.add(e);
618
618
  return;
619
619
  }
620
620
  const s = e === "light" ? "dark" : "light";
621
621
  t.classList.remove(s);
622
- }, Tt = $(
622
+ }, At = C(
623
623
  {
624
624
  /**
625
625
  * This will render the component.
@@ -646,7 +646,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => m({
646
646
  };
647
647
  }
648
648
  }
649
- ), Bt = x(
649
+ ), Lt = y(
650
650
  {
651
651
  /**
652
652
  * The initial state of the Toggle.
@@ -673,7 +673,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => m({
673
673
  * @returns {object}
674
674
  */
675
675
  render() {
676
- return m({
676
+ return f({
677
677
  class: "relative inline-flex h-6 w-11 min-w-11 items-center rounded-full bg-muted transition-colors focus:outline-none",
678
678
  onState: ["active", { "bg-primary": !0, "bg-muted": !1 }],
679
679
  click: (t, { state: s }) => {
@@ -691,49 +691,112 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => m({
691
691
  bind: this.bind,
692
692
  required: this.required
693
693
  }),
694
- i({
694
+ a({
695
695
  class: "absolute h-5 w-5 bg-background rounded-full shadow-md transform transition-transform",
696
696
  onState: ["active", { "translate-x-[22px]": !0, "translate-x-[2px]": !1 }]
697
697
  })
698
698
  ]);
699
699
  }
700
700
  }
701
- ), k = {
701
+ ), S = {
702
702
  ONLINE: "online",
703
703
  OFFLINE: "offline",
704
704
  BUSY: "busy",
705
705
  AWAY: "away"
706
- }, p = {
706
+ }, g = {
707
707
  ONLINE: "bg-green-500",
708
708
  OFFLINE: "bg-gray-500",
709
709
  BUSY: "bg-red-500",
710
710
  AWAY: "bg-yellow-500"
711
- }, Ee = (e = "") => (e = e.toUpperCase(), p[e] || p.OFFLINE), At = (e) => n({
712
- class: `absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full ${Ee(e)}`
713
- }), Pt = ({ propName: e = "status" } = {}) => n({
711
+ }, Oe = (e = "") => (e = e.toUpperCase(), g[e] || g.OFFLINE), Pt = (e) => n({
712
+ class: `absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full ${Oe(e)}`
713
+ }), Ft = ({ propName: e = "status" } = {}) => n({
714
714
  class: "absolute bottom-0 right-0 w-3 h-3 border-2 rounded-full",
715
715
  onSet: [e, {
716
- [p.ONLINE]: k.ONLINE,
717
- [p.OFFLINE]: k.OFFLINE,
718
- [p.BUSY]: k.BUSY,
719
- [p.AWAY]: k.AWAY
716
+ [g.ONLINE]: S.ONLINE,
717
+ [g.OFFLINE]: S.OFFLINE,
718
+ [g.BUSY]: S.BUSY,
719
+ [g.AWAY]: S.AWAY
720
720
  }]
721
- }), je = (e, t) => H(
721
+ }), Mt = C(
722
+ {
723
+ /**
724
+ * Get the initial state for the component.
725
+ *
726
+ * @returns {object} Initial state for the component
727
+ */
728
+ state() {
729
+ return {
730
+ // @ts-ignore
731
+ loaded: !!this.src
732
+ };
733
+ },
734
+ /**
735
+ * This will open the file browse dialog.
736
+ *
737
+ * @returns {void}
738
+ */
739
+ openFileBrowse() {
740
+ const e = this.input;
741
+ e && (e.value = "", le.trigger("click", e));
742
+ },
743
+ /**
744
+ * Render the component.
745
+ *
746
+ * @returns {object} Rendered component
747
+ */
748
+ render() {
749
+ const e = "logo-upload", t = this.onChange || null;
750
+ return n({
751
+ class: "relative w-32 h-32 rounded-full border border-muted-foreground flex items-center justify-center cursor-pointer hover:bg-muted transition-colors duration-150 overflow-hidden group",
752
+ // @ts-ignore
753
+ click: () => this.openFileBrowse()
754
+ }, [
755
+ w({
756
+ id: e,
757
+ cache: "input",
758
+ type: "file",
759
+ accept: "image/*",
760
+ class: "hidden",
761
+ change: (s) => {
762
+ var l;
763
+ const o = (l = s.target.files) == null ? void 0 : l[0];
764
+ o && t && (t(o, this.parent), this.src = URL.createObjectURL(o), this.state.loaded = !0);
765
+ }
766
+ }),
767
+ x(
768
+ "loaded",
769
+ (s) => s ? Z({
770
+ // @ts-ignore
771
+ src: this.src,
772
+ class: "absolute inset-0 w-full h-full object-cover rounded-full pointer-events-none"
773
+ }) : q({
774
+ htmlFor: e,
775
+ class: "z-10 flex flex-col items-center justify-center text-sm text-muted-foreground pointer-events-none group-hover:text-primary"
776
+ }, [
777
+ p(u.upload),
778
+ n("Upload logo")
779
+ ])
780
+ )
781
+ ]);
782
+ }
783
+ }
784
+ ), Ve = (e, t) => H(
722
785
  {
723
786
  href: e,
724
787
  "aria-current": t === "Breadcrumb" && "page",
725
788
  // Only set aria-current on the last item
726
789
  class: "text-muted-foreground font-medium hover:text-foreground"
727
790
  },
728
- [i(t)]
729
- ), Oe = () => b({
791
+ [a(t)]
792
+ ), Ue = () => p({
730
793
  class: "mx-3 text-muted-foreground",
731
794
  "aria-hidden": !0,
732
795
  size: "xs"
733
- }, u.chevron.single.right), Ve = (e) => n({ class: "flex items-center" }, [
734
- e.href ? je(e.href, e.label) : i(e.label),
735
- e.separator && Oe()
736
- ]), Mt = $(
796
+ }, u.chevron.single.right), qe = (e) => n({ class: "flex items-center" }, [
797
+ e.href ? Ve(e.href, e.label) : a(e.label),
798
+ e.separator && Ue()
799
+ ]), zt = C(
737
800
  {
738
801
  /**
739
802
  * Set initial data
@@ -741,7 +804,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => m({
741
804
  * @returns {Data}
742
805
  */
743
806
  setData() {
744
- return new I({
807
+ return new $({
745
808
  // @ts-ignore
746
809
  items: this.items || []
747
810
  });
@@ -753,7 +816,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => m({
753
816
  */
754
817
  render() {
755
818
  const e = this.data.items.length - 1;
756
- return Z(
819
+ return ee(
757
820
  {
758
821
  "aria-label": "Breadcrumb",
759
822
  class: "flex items-center space-x-1 text-sm"
@@ -762,7 +825,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => m({
762
825
  n({
763
826
  role: "list",
764
827
  class: "flex items-center",
765
- for: ["items", (t, s) => Ve({
828
+ for: ["items", (t, s) => qe({
766
829
  href: t.href,
767
830
  label: t.label,
768
831
  separator: s < e
@@ -781,8 +844,8 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => m({
781
844
  "2xl": "h-16 w-16",
782
845
  "3xl": "h-24 w-24",
783
846
  default: "h-4 w-4"
784
- }, qe = (e) => E[e] || E.default, He = ({ index: e, size: t }) => n({ class: `${t} rounded-full bg-muted cursor-pointer` }, [
785
- i({
847
+ }, He = (e) => E[e] || E.default, Re = ({ index: e, size: t }) => n({ class: `${t} rounded-full bg-muted cursor-pointer` }, [
848
+ a({
786
849
  class: "block w-full h-full rounded-full transition-colors",
787
850
  onSet: ["activeIndex", {
788
851
  "bg-primary": e,
@@ -792,10 +855,10 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => m({
792
855
  o.activeIndex = e, l && l(e);
793
856
  }
794
857
  })
795
- ]), Ye = (e, t) => Array.from({ length: e }, (s, o) => He({
858
+ ]), Ye = (e, t) => Array.from({ length: e }, (s, o) => Re({
796
859
  index: o,
797
860
  size: t
798
- })), Lt = $(
861
+ })), Nt = C(
799
862
  {
800
863
  /**
801
864
  * Defines component data (props).
@@ -803,7 +866,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => m({
803
866
  * @returns {Data}
804
867
  */
805
868
  setData() {
806
- return new I({
869
+ return new $({
807
870
  // @ts-ignore
808
871
  count: this.count || 4,
809
872
  // total dots
@@ -817,7 +880,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => m({
817
880
  * @returns {object}
818
881
  */
819
882
  render() {
820
- const e = this.gap || "gap-2", t = qe(this.size || "sm"), s = Ye(this.data.count, t);
883
+ const e = this.gap || "gap-2", t = He(this.size || "sm"), s = Ye(this.data.count, t);
821
884
  return n(
822
885
  { class: "flex justify-center items-center py-2" },
823
886
  [
@@ -826,37 +889,37 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => m({
826
889
  );
827
890
  }
828
891
  }
829
- ), Ue = ({ toggleDropdown: e }) => m(
892
+ ), _e = ({ toggleDropdown: e }) => f(
830
893
  {
831
894
  cache: "button",
832
895
  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",
833
896
  click: e
834
897
  },
835
898
  [
836
- i({ onState: ["selectedLabel", (t) => t || "Select item..."] }),
837
- f({ html: u.chevron.upDown })
899
+ a({ onState: ["selectedLabel", (t) => t || "Select item..."] }),
900
+ m({ html: u.chevron.upDown })
838
901
  ]
839
- ), Re = (e, t, s) => V({
902
+ ), We = (e, t, s) => V({
840
903
  class: "flex flex-auto items-center cursor-pointer p-2 hover:bg-muted/50 rounded-sm",
841
904
  click: () => t(e),
842
905
  onState: [s, "selectedValue", { "bg-secondary": e.value }]
843
906
  }, [
844
- e.icon && i({ class: "mr-2 flex items-baseline" }, [b({ size: "xs" }, e.icon)]),
845
- i({ class: "text-base font-normal" }, e.label)
846
- ]), _e = (e, t) => n({ class: "w-full border rounded-md" }, [
847
- q({ class: "max-h-60 overflow-y-auto p-2 grid gap-1", for: ["items", (s) => Re(s, e, t)] })
848
- ]), We = ({ onSelect: e, state: t }) => n({ class: "flex flex-auto flex-col" }, [
849
- w(
907
+ e.icon && a({ class: "mr-2 flex items-baseline" }, [p({ size: "xs" }, e.icon)]),
908
+ a({ class: "text-base font-normal" }, e.label)
909
+ ]), Je = (e, t) => n({ class: "w-full border rounded-md" }, [
910
+ U({ class: "max-h-60 overflow-y-auto p-2 grid gap-1", for: ["items", (s) => We(s, e, t)] })
911
+ ]), Ge = ({ onSelect: e, state: t }) => n({ class: "flex flex-auto flex-col" }, [
912
+ x(
850
913
  "open",
851
- (s, o, l) => s ? new C({
914
+ (s, o, l) => s ? new k({
852
915
  cache: "dropdown",
853
916
  parent: l,
854
917
  button: l.button
855
918
  }, [
856
- _e(e, t)
919
+ Je(e, t)
857
920
  ]) : null
858
921
  )
859
- ]), Ft = $(
922
+ ]), Et = C(
860
923
  {
861
924
  /**
862
925
  * This will set up the data.
@@ -864,7 +927,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => m({
864
927
  * @returns {Data}
865
928
  */
866
929
  setData() {
867
- return new I({
930
+ return new $({
868
931
  // @ts-ignore
869
932
  items: this.items || []
870
933
  });
@@ -937,8 +1000,8 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => m({
937
1000
  const e = this.class || "", t = this.maxWidth || "max-w-[250px]", s = this.width || "w-full";
938
1001
  return n({ class: `relative ${s} flex flex-auto flex-col ${t} ${e}` }, [
939
1002
  // @ts-ignore
940
- Ue({ toggleDropdown: this.toggleDropdown.bind(this) }),
941
- We({
1003
+ _e({ toggleDropdown: this.toggleDropdown.bind(this) }),
1004
+ Ge({
942
1005
  // @ts-ignore
943
1006
  state: this.state,
944
1007
  // @ts-ignore
@@ -946,7 +1009,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => m({
946
1009
  }),
947
1010
  // Hidden required input for form validation
948
1011
  // @ts-ignore
949
- this.required && y({
1012
+ this.required && w({
950
1013
  class: "opacity-0 absolute top-0 left-0 z-[1]",
951
1014
  type: "text",
952
1015
  // @ts-ignore
@@ -958,26 +1021,26 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => m({
958
1021
  ]);
959
1022
  }
960
1023
  }
961
- ), W = ({ icon: e, click: t, ariaLabel: s }) => h({
1024
+ ), J = ({ icon: e, click: t, ariaLabel: s }) => h({
962
1025
  variant: "icon",
963
1026
  class: "flex flex-none",
964
1027
  click: t,
965
1028
  icon: e,
966
1029
  "aria-label": s
967
- }), Je = ({ click: e }) => W({
1030
+ }), Ke = ({ click: e }) => J({
968
1031
  icon: u.circleMinus,
969
1032
  click: e,
970
1033
  ariaLabel: "Decrement"
971
- }), Ge = ({ click: e }) => W({
1034
+ }), Qe = ({ click: e }) => J({
972
1035
  icon: u.circlePlus,
973
1036
  click: e,
974
1037
  ariaLabel: "Increment"
975
- }), Ke = ({ bind: e, min: t, max: s, readonly: o = !1 }) => Y(({ state: l }) => y({
1038
+ }), Xe = ({ bind: e, min: t, max: s, readonly: o = !1 }) => R(({ state: l }) => w({
976
1039
  value: ["[[count]]", l],
977
1040
  bind: e,
978
- blur: (r, { state: a }) => {
1041
+ blur: (r, { state: i }) => {
979
1042
  let d = parseInt(r.target.value, 10);
980
- isNaN(d) && (d = t ?? 0), t !== void 0 && (d = Math.max(d, t)), s !== void 0 && (d = Math.min(d, s)), a.count = d;
1043
+ isNaN(d) && (d = t ?? 0), t !== void 0 && (d = Math.max(d, t)), s !== void 0 && (d = Math.min(d, s)), i.count = d;
981
1044
  },
982
1045
  class: "flex flex-auto text-lg font-medium bg-transparent text-center border min-w-0",
983
1046
  readonly: o,
@@ -985,7 +1048,7 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => m({
985
1048
  max: s,
986
1049
  type: "number",
987
1050
  "aria-label": "Counter"
988
- })), Nt = x(
1051
+ })), jt = y(
989
1052
  {
990
1053
  /**
991
1054
  * Initial state for the counter component.
@@ -1008,46 +1071,46 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => m({
1008
1071
  render() {
1009
1072
  const e = this.class ?? "";
1010
1073
  return n({ class: `flex flex-auto items-center justify-between space-x-4 p-4 ${e}` }, [
1011
- Je({ click: () => this.state.decrement("count") }),
1012
- Ke({
1074
+ Ke({ click: () => this.state.decrement("count") }),
1075
+ Xe({
1013
1076
  bind: this.bind,
1014
1077
  readonly: this.readonly,
1015
1078
  min: this.min,
1016
1079
  max: this.max
1017
1080
  }),
1018
- Ge({ click: () => this.state.increment("count") })
1081
+ Qe({ click: () => this.state.increment("count") })
1019
1082
  ]);
1020
1083
  }
1021
1084
  }
1022
- ), Qe = ({ bind: e, required: t }) => y({
1085
+ ), Ze = ({ bind: e, required: t }) => w({
1023
1086
  cache: "input",
1024
1087
  class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
1025
1088
  bind: e,
1026
1089
  required: t
1027
- }), Xe = ({ bind: e, required: t, toggleOpen: s }) => m({
1090
+ }), et = ({ bind: e, required: t, toggleOpen: s }) => f({
1028
1091
  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",
1029
1092
  click: s
1030
1093
  }, [
1031
- Qe({ bind: e, required: t }),
1032
- i({
1094
+ Ze({ bind: e, required: t }),
1095
+ a({
1033
1096
  onState: ["selectedDate", (o) => o ? A.format("standard", o) : "Pick a date"]
1034
1097
  }),
1035
- f({ html: u.calendar.days })
1036
- ]), Ze = ({ handleDateSelect: e, blockPriorDates: t }) => w(
1098
+ m({ html: u.calendar.days })
1099
+ ]), tt = ({ handleDateSelect: e, blockPriorDates: t }) => x(
1037
1100
  "open",
1038
- (s, o, l) => s ? new C({
1101
+ (s, o, l) => s ? new k({
1039
1102
  cache: "dropdown",
1040
1103
  parent: l,
1041
1104
  button: l.panel,
1042
1105
  size: "fit"
1043
1106
  }, [
1044
- new ne({
1107
+ new re({
1045
1108
  selectedDate: l.state.selectedDate,
1046
1109
  selectedCallBack: e,
1047
1110
  blockPriorDates: t
1048
1111
  })
1049
1112
  ]) : null
1050
- ), zt = x(
1113
+ ), Ot = y(
1051
1114
  {
1052
1115
  /**
1053
1116
  * The initial state of the DatePicker.
@@ -1079,50 +1142,50 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => m({
1079
1142
  this.state.selectedDate = s, this.state.open = !1, this.input.value = s, typeof this.onChange == "function" && this.onChange(s);
1080
1143
  };
1081
1144
  return n({ class: "relative w-full max-w-[320px]" }, [
1082
- Xe({
1145
+ et({
1083
1146
  toggleOpen: e,
1084
1147
  bind: this.bind,
1085
1148
  required: this.required
1086
1149
  }),
1087
- Ze({
1150
+ tt({
1088
1151
  handleDateSelect: t,
1089
1152
  blockPriorDates: this.blockPriorDates || !1
1090
1153
  })
1091
1154
  ]);
1092
1155
  }
1093
1156
  }
1094
- ), et = ({ bind: e, required: t }) => y({
1157
+ ), st = ({ bind: e, required: t }) => w({
1095
1158
  cache: "input",
1096
1159
  class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
1097
1160
  bind: e,
1098
1161
  required: t
1099
- }), tt = ({ bind: e, required: t, toggleOpen: s }) => m({
1162
+ }), ot = ({ bind: e, required: t, toggleOpen: s }) => f({
1100
1163
  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",
1101
1164
  click: s
1102
1165
  }, [
1103
- et({ bind: e, required: t }),
1104
- Y(({ state: o }) => [
1105
- i(L.date(["[[start]]", o], "Start Date")),
1106
- i(" - "),
1107
- i(L.date(["[[end]]", o], "End Date"))
1166
+ st({ bind: e, required: t }),
1167
+ R(({ state: o }) => [
1168
+ a(F.date(["[[start]]", o], "Start Date")),
1169
+ a(" - "),
1170
+ a(F.date(["[[end]]", o], "End Date"))
1108
1171
  ]),
1109
- f({ html: u.calendar.days })
1110
- ]), st = ({ handleDateSelect: e, blockPriorDates: t }) => w(
1172
+ m({ html: u.calendar.days })
1173
+ ]), nt = ({ handleDateSelect: e, blockPriorDates: t }) => x(
1111
1174
  "open",
1112
- (s, o, l) => s ? new C({
1175
+ (s, o, l) => s ? new k({
1113
1176
  cache: "dropdown",
1114
1177
  parent: l,
1115
1178
  button: l.panel,
1116
1179
  size: "xl"
1117
1180
  }, [
1118
- new le({
1181
+ new ie({
1119
1182
  startDate: l.state.start,
1120
1183
  endDate: l.state.end,
1121
1184
  onRangeSelect: e,
1122
1185
  blockPriorDates: t
1123
1186
  })
1124
1187
  ]) : null
1125
- ), Et = x(
1188
+ ), Vt = y(
1126
1189
  {
1127
1190
  /**
1128
1191
  * The initial state of the DateRangePicker.
@@ -1158,20 +1221,20 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => m({
1158
1221
  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);
1159
1222
  };
1160
1223
  return n({ class: "relative w-full max-w-[320px]" }, [
1161
- tt({
1224
+ ot({
1162
1225
  toggleOpen: e,
1163
1226
  bind: this.bind,
1164
1227
  required: this.required
1165
1228
  }),
1166
- st({
1229
+ nt({
1167
1230
  handleDateSelect: t,
1168
1231
  blockPriorDates: this.blockPriorDates || !1
1169
1232
  })
1170
1233
  ]);
1171
1234
  }
1172
1235
  }
1173
- ), jt = ({ dateTime: e = "", remoteTimeZone: t = "America/Denver", filter: s = null }) => ee([
1174
- new ie({
1236
+ ), Ut = ({ dateTime: e = "", remoteTimeZone: t = "America/Denver", filter: s = null }) => te([
1237
+ new de({
1175
1238
  dateTime: e,
1176
1239
  filter: s || ((o) => {
1177
1240
  const l = A.getLocalTime(o, !0, !1, t);
@@ -1179,26 +1242,26 @@ const z = globalThis.matchMedia, T = c(({ value: e, label: t, icon: s }) => m({
1179
1242
  })
1180
1243
  })
1181
1244
  ]);
1182
- function ot({ bind: e, required: t }) {
1183
- return y({
1245
+ function lt({ bind: e, required: t }) {
1246
+ return w({
1184
1247
  cache: "input",
1185
1248
  class: "opacity-0 absolute top-0 left-0 w-full h-full pointer-events-none",
1186
1249
  bind: e,
1187
1250
  required: t
1188
1251
  });
1189
1252
  }
1190
- function nt({ bind: e, required: t, toggleOpen: s }) {
1191
- return m(
1253
+ function rt({ bind: e, required: t, toggleOpen: s }) {
1254
+ return f(
1192
1255
  {
1193
1256
  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",
1194
1257
  click: s
1195
1258
  },
1196
1259
  [
1197
- ot({ bind: e, required: t }),
1198
- i({
1260
+ lt({ bind: e, required: t }),
1261
+ a({
1199
1262
  onState: ["selectedTime", (o) => o || "Pick a time"]
1200
1263
  }),
1201
- f({ html: u.clock })
1264
+ m({ html: u.clock })
1202
1265
  ]
1203
1266
  );
1204
1267
  }
@@ -1206,23 +1269,23 @@ function B({ items: e, handleTimeSelect: t, state: s, stateValue: o, pad: l = !1
1206
1269
  return n(
1207
1270
  { class: "flex flex-col max-h-[200px] overflow-y-auto" },
1208
1271
  e.map((r) => {
1209
- let a = l ? r.toString().padStart(2, "0") : r.toString();
1210
- return m({
1211
- text: a,
1272
+ let i = l ? r.toString().padStart(2, "0") : r.toString();
1273
+ return f({
1274
+ text: i,
1212
1275
  class: "hover:bg-muted/50 rounded-md px-2 py-1",
1213
- click: () => t({ [o]: a }),
1214
- onState: [s, o, { "bg-muted": a }]
1276
+ click: () => t({ [o]: i }),
1277
+ onState: [s, o, { "bg-muted": i }]
1215
1278
  });
1216
1279
  })
1217
1280
  );
1218
1281
  }
1219
- function lt({ handleTimeSelect: e }) {
1282
+ function it({ handleTimeSelect: e }) {
1220
1283
  return n(
1221
1284
  { class: "absolute mt-1 z-10 bg-background rounded-md shadow-lg" },
1222
1285
  [
1223
- w(
1286
+ x(
1224
1287
  "open",
1225
- (t, s, o) => t ? new C(
1288
+ (t, s, o) => t ? new k(
1226
1289
  {
1227
1290
  cache: "dropdown",
1228
1291
  parent: o,
@@ -1275,14 +1338,14 @@ function j(e) {
1275
1338
  const t = /^(\d{1,2}):(\d{2})(?::(\d{2}))?\s?(AM|PM)?$/i, s = e.match(t);
1276
1339
  if (!s)
1277
1340
  return { hour: null, minute: null, meridian: null };
1278
- let [, o, l, , r] = s, a = parseInt(o, 10), d = parseInt(l, 10);
1279
- return a < 0 || a > 23 || d < 0 || d > 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), {
1280
- hour: a.toString().padStart(2, "0"),
1341
+ let [, o, l, , r] = s, i = parseInt(o, 10), d = parseInt(l, 10);
1342
+ 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), {
1343
+ hour: i.toString().padStart(2, "0"),
1281
1344
  minute: d.toString().padStart(2, "0"),
1282
1345
  meridian: r
1283
1346
  });
1284
1347
  }
1285
- const Ot = x(
1348
+ const qt = y(
1286
1349
  {
1287
1350
  /**
1288
1351
  * The initial shallow state of the TimePicker.
@@ -1330,23 +1393,23 @@ const Ot = x(
1330
1393
  return n(
1331
1394
  { class: "relative w-full max-w-[320px]" },
1332
1395
  [
1333
- nt({
1396
+ rt({
1334
1397
  toggleOpen: e,
1335
1398
  bind: this.bind,
1336
1399
  required: this.required
1337
1400
  }),
1338
- lt({
1401
+ it({
1339
1402
  handleTimeSelect: t
1340
1403
  })
1341
1404
  ]
1342
1405
  );
1343
1406
  }
1344
1407
  }
1345
- ), rt = (e, t) => n({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${t}` }, [
1346
- b({ size: "lg" }, e)
1347
- ]), at = ({ title: e }) => D({ class: "flex flex-auto items-center" }, [
1348
- S({ class: "text-lg font-semibold" }, e)
1349
- ]), it = c((e, t) => te(
1408
+ ), at = (e, t) => n({ class: `hidden md:flex items-start justify-center w-6 h-6 mr-3 ${t}` }, [
1409
+ p({ size: "lg" }, e)
1410
+ ]), ct = ({ title: e }) => I({ class: "flex flex-auto items-center" }, [
1411
+ D({ class: "text-lg font-semibold" }, e)
1412
+ ]), dt = c((e, t) => se(
1350
1413
  {
1351
1414
  class: `fixed pullUpIn z-30 w-[98%] border md:w-full max-w-lg bg-popover text-foreground shadow-lg duration-200
1352
1415
  rounded-lg flex flex-auto flex-col
@@ -1357,18 +1420,18 @@ const Ot = x(
1357
1420
  [
1358
1421
  n({ class: "flex flex-auto p-6 pb-12 md:pb-6" }, [
1359
1422
  // Icon and content
1360
- e.icon && rt(e.icon, e.iconColor),
1423
+ e.icon && at(e.icon, e.iconColor),
1361
1424
  n({ class: "flex flex-auto flex-col gap-4" }, [
1362
1425
  n({ class: "flex flex-auto flex-col space-y-2" }, [
1363
- at(e),
1364
- e.description && g({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, e.description),
1426
+ ct(e),
1427
+ e.description && b({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, e.description),
1365
1428
  n({ class: "flex flex-auto flex-col text-sm text-muted-foreground" }, t)
1366
1429
  ]),
1367
- e.buttons && P({ class: "flex flex-col-reverse sm:flex-row sm:justify-end mt-6 gap-2 sm:gap-0 sm:space-x-2" }, e.buttons)
1430
+ 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)
1368
1431
  ])
1369
1432
  ])
1370
1433
  ]
1371
- )), ct = (e) => U.render(e, app.root), O = {
1434
+ )), ut = (e) => Y.render(e, app.root), O = {
1372
1435
  info: {
1373
1436
  borderColor: "border-blue-500",
1374
1437
  bgColor: "bg-muted/10",
@@ -1395,7 +1458,7 @@ const Ot = x(
1395
1458
  iconColor: "text-muted-foreground"
1396
1459
  }
1397
1460
  };
1398
- class dt extends v {
1461
+ class ht extends v {
1399
1462
  /**
1400
1463
  * This will declare the props for the compiler.
1401
1464
  *
@@ -1412,10 +1475,10 @@ class dt extends v {
1412
1475
  render() {
1413
1476
  const t = (d) => {
1414
1477
  d.target === this.panel && this.close();
1415
- }, { borderColor: s, bgColor: o, iconColor: l } = O[this.type] || O.default, r = `${this.getMainClass()} ${o} ${s}`, a = this.title || "Dialog Title";
1416
- return it({
1478
+ }, { borderColor: s, bgColor: o, iconColor: l } = O[this.type] || O.default, r = `${this.getMainClass()} ${o} ${s}`, i = this.title || "Dialog Title";
1479
+ return dt({
1417
1480
  class: r,
1418
- title: a,
1481
+ title: i,
1419
1482
  click: t,
1420
1483
  icon: this.icon,
1421
1484
  iconColor: l,
@@ -1457,7 +1520,7 @@ class dt extends v {
1457
1520
  * @returns {void}
1458
1521
  */
1459
1522
  open() {
1460
- ct(this), this.panel.showModal(), this.state.open = !0;
1523
+ ut(this), this.panel.showModal(), this.state.open = !0;
1461
1524
  }
1462
1525
  /**
1463
1526
  * This will close the modal.
@@ -1468,7 +1531,7 @@ class dt extends v {
1468
1531
  this.state.open = !1, this.panel.close(), typeof this.onClose == "function" && this.onClose(), this.destroy();
1469
1532
  }
1470
1533
  }
1471
- class Vt extends dt {
1534
+ class Ht extends ht {
1472
1535
  /**
1473
1536
  * This will declare the props for the compiler.
1474
1537
  *
@@ -1498,62 +1561,63 @@ class Vt extends dt {
1498
1561
  this.confirmed && this.confirmed(), this.close();
1499
1562
  }
1500
1563
  }
1501
- const qt = c((e, t = []) => n({ class: "w-full max-w-md p-6 m-auto" }, [
1502
- _({ class: "flex flex-auto flex-col" }, [
1564
+ const Rt = c((e, t = []) => n({ class: "w-full max-w-md p-6 m-auto" }, [
1565
+ W({ class: "flex flex-auto flex-col" }, [
1503
1566
  n({ class: "flex flex-auto flex-col space-y-4" }, [
1504
1567
  n({ class: "flex flex-auto items-center justify-center" }, [
1505
1568
  e.icon && n({ class: "w-16 h-16 mb-2 text-primary" }, [
1506
- b(e.icon)
1569
+ p(e.icon)
1507
1570
  ])
1508
1571
  ]),
1509
- D({ class: "py-4 text-center" }, [
1510
- S({ class: "text-xl font-bold" }, e.title),
1511
- g({ class: "pb-8 text-muted-foreground" }, e.description || ""),
1572
+ I({ class: "py-4 text-center" }, [
1573
+ D({ class: "text-xl font-bold" }, e.title),
1574
+ b({ class: "pb-8 text-muted-foreground" }, e.description || ""),
1512
1575
  ...t
1513
1576
  ])
1514
1577
  ])
1515
1578
  ])
1516
1579
  ]));
1517
1580
  export {
1518
- wt as A,
1519
- Mt as B,
1520
- Dt as C,
1521
- he as D,
1522
- Ot as E,
1523
- ve as F,
1524
- Vt as G,
1525
- it as H,
1526
- dt as I,
1527
- qt as J,
1528
- It as M,
1529
- $t as N,
1530
- Ge as P,
1531
- St as S,
1532
- Tt as T,
1533
- ge as a,
1534
- yt as b,
1535
- xe as c,
1536
- Ce as d,
1537
- ke as e,
1538
- Se as f,
1539
- Ie as g,
1540
- vt as h,
1541
- _ as i,
1542
- Ct as j,
1543
- kt as k,
1544
- Fe as l,
1545
- Bt as m,
1546
- At as n,
1547
- Pt as o,
1548
- k as p,
1549
- p as q,
1550
- Ee as r,
1551
- Lt as s,
1552
- Ft as t,
1553
- Je as u,
1554
- Ke as v,
1555
- Nt as w,
1556
- zt as x,
1557
- Et as y,
1558
- jt as z
1581
+ vt as A,
1582
+ zt as B,
1583
+ $t as C,
1584
+ me as D,
1585
+ qt as E,
1586
+ ke as F,
1587
+ Ht as G,
1588
+ dt as H,
1589
+ ht as I,
1590
+ Rt as J,
1591
+ Mt as L,
1592
+ Tt as M,
1593
+ Bt as N,
1594
+ Qe as P,
1595
+ It as S,
1596
+ At as T,
1597
+ xe as a,
1598
+ Ct as b,
1599
+ ye as c,
1600
+ Se as d,
1601
+ De as e,
1602
+ Ie as f,
1603
+ Te as g,
1604
+ kt as h,
1605
+ W as i,
1606
+ St as j,
1607
+ Dt as k,
1608
+ Ne as l,
1609
+ Lt as m,
1610
+ Pt as n,
1611
+ Ft as o,
1612
+ S as p,
1613
+ g as q,
1614
+ Oe as r,
1615
+ Nt as s,
1616
+ Et as t,
1617
+ Ke as u,
1618
+ Xe as v,
1619
+ jt as w,
1620
+ Ot as x,
1621
+ Vt as y,
1622
+ Ut as z
1559
1623
  };