@base-framework/ui 1.0.2026 → 1.0.2028

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.
@@ -6,8 +6,8 @@ import { B as h, I as g } from "./buttons-CHEs54Wl.js";
6
6
  import { Icons as u } from "./icons.es.js";
7
7
  import { Timer as ht, List as mt, DynamicTime as ft } from "@base-framework/organisms";
8
8
  import { a as v } from "./image-BB__4s0g.js";
9
- import { F as Y } from "./format-BmrNQptv.js";
10
- const j = {
9
+ import { F as z } from "./format-BmrNQptv.js";
10
+ const Y = {
11
11
  info: {
12
12
  borderColor: "border-blue-500",
13
13
  bgColor: "bg-muted/10",
@@ -36,7 +36,7 @@ const j = {
36
36
  }, gt = (t, e) => n({ class: `flex items-center justify-center h-6 w-6 mr-3 ${e}` }, [
37
37
  x({ html: t })
38
38
  ]), pt = (t) => Z({ class: "font-semibold" }, t), bt = (t) => b({ class: "text-sm text-muted-foreground" }, t), Le = c(({ title: t, description: e, icon: s, type: o = "default" }) => {
39
- const { borderColor: r, bgColor: i, iconColor: l } = j[o] || j.default;
39
+ const { borderColor: r, bgColor: i, iconColor: l } = Y[o] || Y.default;
40
40
  return n({ class: `flex items-start p-4 border rounded-lg ${i} ${r}` }, [
41
41
  // Icon and content
42
42
  s && gt(s, l),
@@ -168,13 +168,13 @@ class Ae extends w {
168
168
  ]);
169
169
  }
170
170
  }
171
- const Tt = c((t, e) => n({ ...t, class: "flex flex-auto flex-col gap-y-2" }, e)), It = c((t, e) => P({ ...t, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, e)), Bt = c((t, e) => b({ ...t, class: "text-sm text-muted-foreground italic" }, e)), Ft = c((t, e) => b({ ...t, class: "text-sm text-destructive" }, e)), Ye = c((t, e = []) => dt({ class: "flex flex-auto flex-col gap-y-0", margin: "m-0", padding: "p-0" }, [
171
+ const Tt = c((t, e) => n({ ...t, class: "flex flex-auto flex-col gap-y-2" }, e)), It = c((t, e) => P({ ...t, class: "flex auto text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" }, e)), Bt = c((t, e) => b({ ...t, class: "text-sm text-muted-foreground italic" }, e)), Ft = c((t, e) => b({ ...t, class: "text-sm text-destructive" }, e)), ze = c((t, e = []) => dt({ class: "flex flex-auto flex-col gap-y-0", margin: "m-0", padding: "p-0" }, [
172
172
  t.title && S({ class: "text-lg font-semibold py-4 px-6" }, t.title),
173
173
  t.description && b({ class: "text-sm text-muted-foreground pb-4 px-6 max-w-[700px]" }, t.description),
174
174
  ...e
175
- ])), je = c((t, e = []) => ut({ label: t.label, description: t.description, class: "py-4 px-6", border: t.border }, [
175
+ ])), Ye = c((t, e = []) => ut({ label: t.label, description: t.description, class: "py-4 px-6", border: t.border }, [
176
176
  n({ class: "flex flex-col gap-y-6" }, e)
177
- ])), Ee = c((t, e = []) => {
177
+ ])), je = c((t, e = []) => {
178
178
  const s = t.border ? "border-t" : "";
179
179
  return n({ ...t, class: `flex flex-col pb-4 px-6 gap-y-4 ${s} ${t.class || ""}` }, e);
180
180
  }), $t = (t) => t.tag === "input" || t.tag === "select" || t.tag === "textarea", J = (t, e, s) => t.map((o) => !o || (o.children && o.children.length > 0 && (o.children = J(o.children, e, s)), !o.required) ? o : $t(o) ? {
@@ -194,7 +194,7 @@ const Tt = c((t, e) => n({ ...t, class: "flex flex-auto flex-col gap-y-2" }, e))
194
194
  ...t,
195
195
  class: "w-full"
196
196
  }, r);
197
- }), ze = v(
197
+ }), Ee = v(
198
198
  {
199
199
  /**
200
200
  * The initial state of the FormField.
@@ -273,17 +273,17 @@ const Tt = c((t, e) => n({ ...t, class: "flex flex-auto flex-col gap-y-2" }, e))
273
273
  n({ class: "flex flex-none items-center gap-2" }, r)
274
274
  ])
275
275
  ])), Q = c((t, e) => {
276
- const o = t.class?.includes("drawer") ? "" : "m-auto top-0 right-0 bottom-0 left-0";
276
+ const s = t.class?.includes("drawer");
277
277
  return n({
278
278
  popover: "manual",
279
- class: `modal ${o} fixed z-20 grid w-full h-full max-h-screen gap-2 lg:border bg-background text-foreground shadow-xl break-words p-0 overflow-y-auto ${t.class}`,
280
- click: (r, i) => {
281
- r.target === i.panel && (r.preventDefault(), r.stopPropagation(), i.state.open = !1);
279
+ class: `modal ${s ? "" : "m-auto top-0 right-0 bottom-0 left-0"} ${s ? "" : "h-full max-h-screen"} fixed z-20 grid w-full gap-2 lg:border bg-background text-foreground shadow-xl break-words p-0 overflow-y-auto ${t.class}`,
280
+ click: (i, l) => {
281
+ i.target === l.panel && (i.preventDefault(), i.stopPropagation(), l.state.open = !1);
282
282
  }
283
283
  }, [
284
284
  K({
285
285
  class: "modal-content relative bg-background z-[1] flex flex-auto flex-col gap-y-4 min-w-0",
286
- submit: (r, i) => t.onSubmit && t.onSubmit(i),
286
+ submit: (i, l) => t.onSubmit && t.onSubmit(l),
287
287
  cache: "modalContent",
288
288
  ...t.gestureHandlers
289
289
  }, [
@@ -456,7 +456,7 @@ class At extends w {
456
456
  this.panel.hidePopover(), this.state.open = !1, typeof this.onClose == "function" && this.onClose(this), document.documentElement.style.overflowY = "auto";
457
457
  }
458
458
  }
459
- class Yt {
459
+ class zt {
460
460
  /**
461
461
  * Creates an instance of DrawerGesture.
462
462
  *
@@ -670,7 +670,7 @@ class qe extends At {
670
670
  * @returns {void}
671
671
  */
672
672
  showModal() {
673
- super.showModal(), this.swipeToClose && !this.gesture && (this.gesture = new Yt({
673
+ super.showModal(), this.swipeToClose && !this.gesture && (this.gesture = new zt({
674
674
  modal: this.panel,
675
675
  modalContent: this.modalContent,
676
676
  modalBody: this.modalBody,
@@ -702,7 +702,7 @@ class qe extends At {
702
702
  this.gesture && (this.gesture.destroy(), this.gesture = null), super.beforeDestroy();
703
703
  }
704
704
  }
705
- const E = {
705
+ const j = {
706
706
  info: {
707
707
  bgColor: "bg-muted/10",
708
708
  borderColor: "border-blue-500",
@@ -728,15 +728,15 @@ const E = {
728
728
  borderColor: "border",
729
729
  iconColor: "text-muted-foreground"
730
730
  }
731
- }, jt = (t) => I({ class: "flex justify-center" }, [
731
+ }, Yt = (t) => I({ class: "flex justify-center" }, [
732
732
  et({ class: "text-lg font-bold mb-0" }, t)
733
- ]), Et = c(({ href: t, class: e }, s) => V({
733
+ ]), jt = c(({ href: t, class: e }, s) => V({
734
734
  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 ${e}`,
735
735
  href: t,
736
736
  animateIn: "pullRightIn",
737
737
  animateOut: "pullRight",
738
738
  role: "alert"
739
- }, s)), zt = c(({ close: t, class: e }, s) => n({
739
+ }, s)), Et = c(({ close: t, class: e }, s) => n({
740
740
  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 ${e}`,
741
741
  click: () => t(),
742
742
  animateIn: "pullRightIn",
@@ -767,10 +767,10 @@ class Nt extends w {
767
767
  */
768
768
  render() {
769
769
  const { bgColor: e, borderColor: s, iconColor: o } = this.getTypeStyles(), r = this.href || null, i = this.getChildren(o);
770
- return r ? Et({
770
+ return r ? jt({
771
771
  href: r,
772
772
  class: `${e} ${s}`
773
- }, i) : zt({
773
+ }, i) : Et({
774
774
  close: this.close.bind(this),
775
775
  class: `${e} ${s}`
776
776
  }, i);
@@ -791,7 +791,7 @@ class Nt extends w {
791
791
  */
792
792
  getTypeStyles() {
793
793
  const e = this.type || "default";
794
- return E[e] || E.default;
794
+ return j[e] || j.default;
795
795
  }
796
796
  /**
797
797
  * This will get the buttons for the notification.
@@ -818,7 +818,7 @@ class Nt extends w {
818
818
  this.icon && x({ class: `mr-4 ${e}`, html: this.icon }),
819
819
  n({ class: "flex flex-auto flex-col" }, [
820
820
  n({ class: "flex flex-auto flex-row items-center w-full pr-12" }, [
821
- this.title && jt(this.title)
821
+ this.title && Yt(this.title)
822
822
  ]),
823
823
  b({ class: "text-base text-muted-foreground m-0 pr-12" }, this.description),
824
824
  (this.primary || this.secondary) && L({ class: "margin-top-24 flex align-center" }, this.getButtons())
@@ -878,7 +878,7 @@ class Ve extends w {
878
878
  this.list.delete(e.id), this.list.isEmpty() && this.panel.hidePopover();
879
879
  }
880
880
  }
881
- const z = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
881
+ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
882
882
  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',
883
883
  onState: ["method", { active: t }],
884
884
  dataSet: ["method", ["state", t, "active"]],
@@ -890,7 +890,7 @@ const z = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
890
890
  a(e)
891
891
  ])), Rt = (t) => {
892
892
  const e = document.documentElement;
893
- if (t === "system" && (t = globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light"), z && !z("(prefers-color-scheme: " + t + ")").matches) {
893
+ if (t === "system" && (t = globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light"), E && !E("(prefers-color-scheme: " + t + ")").matches) {
894
894
  e.classList.add(t);
895
895
  return;
896
896
  }
@@ -1585,9 +1585,9 @@ const z = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
1585
1585
  }, [
1586
1586
  de({ bind: t, required: e }),
1587
1587
  W(({ state: o }) => [
1588
- a(Y.date(["[[start]]", o], "Start Date")),
1588
+ a(z.date(["[[start]]", o], "Start Date")),
1589
1589
  a(" - "),
1590
- a(Y.date(["[[end]]", o], "End Date"))
1590
+ a(z.date(["[[end]]", o], "End Date"))
1591
1591
  ]),
1592
1592
  x({ html: u.calendar.days })
1593
1593
  ]), he = ({ handleDateSelect: t, blockPriorDates: e }) => O((s, o, r) => new D({
@@ -2089,11 +2089,11 @@ export {
2089
2089
  It as d,
2090
2090
  Bt as e,
2091
2091
  Ft as f,
2092
- Ye as g,
2093
- je as h,
2094
- Ee as i,
2092
+ ze as g,
2093
+ Ye as h,
2094
+ je as i,
2095
2095
  Mt as j,
2096
- ze as k,
2096
+ Ee as k,
2097
2097
  K as l,
2098
2098
  Ne as m,
2099
2099
  Ue as n,
package/dist/index.es.js CHANGED
@@ -4,7 +4,7 @@ import { C as T, F as b } from "./form-group-BB7dLJir.js";
4
4
  import { C as D, d as S, D as F, c as B, E as P, F as k, H as M, I as x, M as f, N as v, P as N, R as y, T as h, a as U, b as L, U as W, W as w } from "./inputs-9udyzkHR.js";
5
5
  import { I as R, V as A, a as G } from "./image-BB__4s0g.js";
6
6
  import { Icons as E } from "./icons.es.js";
7
- import { A as j, B as q, C as J, x as z, O as K, z as Q, E as _, G as X, H as Y, D as Z, m as $, n as aa, R as ea, Q as sa, w as oa, o as ta, c as ra, a as na, b as la, U as ia, l as pa, g as ma, i as da, h as ua, j as ga, e as Ca, k as ca, F as Ta, d as ba, f as Ia, I as Da, L as Sa, y as Fa, M as Ba, p as Pa, N as ka, P as Ma, t as xa, u as fa, S as va, r as Na, s as ya, T as ha, J as Ua, K as La, q as Wa, v as wa } from "./empty-state-DI1FdTbh.js";
7
+ import { A as j, B as q, C as J, x as z, O as K, z as Q, E as _, G as X, H as Y, D as Z, m as $, n as aa, R as ea, Q as sa, w as oa, o as ta, c as ra, a as na, b as la, U as ia, l as pa, g as ma, i as da, h as ua, j as ga, e as Ca, k as ca, F as Ta, d as ba, f as Ia, I as Da, L as Sa, y as Fa, M as Ba, p as Pa, N as ka, P as Ma, t as xa, u as fa, S as va, r as Na, s as ya, T as ha, J as Ua, K as La, q as Wa, v as wa } from "./empty-state-BIeHWiqh.js";
8
8
  import { A as Ra, b as Aa, C as Ga, D as Oa, a as Ea, F as Va, M as ja, P as qa, R as Ja, c as za, g as Ka, p as Qa } from "./range-calendar-6CLMTieN.js";
9
9
  import { B as Xa, p as Ya, C as Za, j as $a, D as ae, m as ee, k as se, H as oe, I as te, N as re, O as ne, P as le, S as ie, n as pe, o as me, x as de, s as ue, q as ge, r as Ce, T as ce, t as Te, w as be, u as Ie, v as De, l as Se, U as Fe, W as Be, f as Pe, h as ke, i as Me, c as xe, d as fe, b as ve, e as Ne, a as ye, g as he } from "./signature-panel-JSfsTsVc.js";
10
10
  import { B as Le, I as We, M as we, d as He, e as Re, g as Ae, N as Ge, b as Oe, a as Ee, f as Ve, P as je, c as qe, S as Je, T as ze } from "./mobile-nav-wrapper-Dm9DinRD.js";
@@ -1,4 +1,4 @@
1
- import { A as s, B as t, C as r, x as e, O as i, z as n, E as m, G as l, H as d, D as C, m as p, n as D, R as S, Q as g, w as u, o as c, c as F, a as T, b as P, U as w, l as A, g as I, i as f, h as b, j as y, e as B, k as M, F as U, d as k, f as x, I as L, L as R, y as v, M as E, p as N, N as h, P as G, t as O, u as j, S as q, r as z, s as H, T as J, J as K, K as Q, q as _, v as V } from "./empty-state-DI1FdTbh.js";
1
+ import { A as s, B as t, C as r, x as e, O as i, z as n, E as m, G as l, H as d, D as C, m as p, n as D, R as S, Q as g, w as u, o as c, c as F, a as T, b as P, U as w, l as A, g as I, i as f, h as b, j as y, e as B, k as M, F as U, d as k, f as x, I as L, L as R, y as v, M as E, p as N, N as h, P as G, t as O, u as j, S as q, r as z, s as H, T as J, J as K, K as Q, q as _, v as V } from "./empty-state-BIeHWiqh.js";
2
2
  import { A as X, P as Y, g as Z } from "./range-calendar-6CLMTieN.js";
3
3
  export {
4
4
  s as Alert,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@base-framework/ui",
3
- "version": "1.0.2026",
3
+ "version": "1.0.2028",
4
4
  "description": "This is a UI package that adds components and atoms that use Tailwind CSS and a theme based on Shadcn.",
5
5
  "main": "./dist/index.es.js",
6
6
  "scripts": {