@base-framework/ui 1.0.2026 → 1.0.2029

package/dist/{empty-state-DI1FdTbh.js → empty-state-DJrgCPat.js}

@@ -6,8 +6,8 @@ import { B as h, I as g } from "./buttons-CHEs54Wl.js";
 import { Icons as u } from "./icons.es.js";
 import { Timer as ht, List as mt, DynamicTime as ft } from "@base-framework/organisms";
 import { a as v } from "./image-BB__4s0g.js";
-import { F as Y } from "./format-BmrNQptv.js";
-const j = {
+import { F as z } from "./format-BmrNQptv.js";
+const Y = {
   info: {
     borderColor: "border-blue-500",
     bgColor: "bg-muted/10",
@@ -36,7 +36,7 @@ const j = {
 }, gt = (t, e) => n({ class: `flex items-center justify-center h-6 w-6 mr-3 ${e}` }, [
   x({ html: t })
 ]), 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" }) => {
-  const { borderColor: r, bgColor: i, iconColor: l } = j[o] || j.default;
+  const { borderColor: r, bgColor: i, iconColor: l } = Y[o] || Y.default;
   return n({ class: `flex items-start p-4 border rounded-lg ${i} ${r}` }, [
     // Icon and content
     s && gt(s, l),
@@ -168,13 +168,13 @@ class Ae extends w {
     ]);
   }
 }
-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" }, [
+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" }, [
   t.title && S({ class: "text-lg font-semibold py-4 px-6" }, t.title),
   t.description && b({ class: "text-sm text-muted-foreground pb-4 px-6 max-w-[700px]" }, t.description),
   ...e
-])), je = c((t, e = []) => ut({ label: t.label, description: t.description, class: "py-4 px-6", border: t.border }, [
+])), Ye = c((t, e = []) => ut({ label: t.label, description: t.description, class: "py-4 px-6", border: t.border }, [
   n({ class: "flex flex-col gap-y-6" }, e)
-])), Ee = c((t, e = []) => {
+])), je = c((t, e = []) => {
   const s = t.border ? "border-t" : "";
   return n({ ...t, class: `flex flex-col pb-4 px-6 gap-y-4 ${s} ${t.class || ""}` }, e);
 }), $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))
     ...t,
     class: "w-full"
   }, r);
-}), ze = v(
+}), Ee = v(
   {
     /**
      * 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))
     n({ class: "flex flex-none items-center gap-2" }, r)
   ])
 ])), Q = c((t, e) => {
-  const o = t.class?.includes("drawer") ? "" : "m-auto top-0 right-0 bottom-0 left-0";
+  const s = t.class?.includes("drawer");
   return n({
     popover: "manual",
-    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}`,
-    click: (r, i) => {
-      r.target === i.panel && (r.preventDefault(), r.stopPropagation(), i.state.open = !1);
+    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}`,
+    click: (i, l) => {
+      i.target === l.panel && (i.preventDefault(), i.stopPropagation(), l.state.open = !1);
     }
   }, [
     K({
       class: "modal-content relative bg-background z-[1] flex flex-auto flex-col gap-y-4 min-w-0",
-      submit: (r, i) => t.onSubmit && t.onSubmit(i),
+      submit: (i, l) => t.onSubmit && t.onSubmit(l),
       cache: "modalContent",
       ...t.gestureHandlers
     }, [
@@ -456,7 +456,7 @@ class At extends w {
     this.panel.hidePopover(), this.state.open = !1, typeof this.onClose == "function" && this.onClose(this), document.documentElement.style.overflowY = "auto";
   }
 }
-class Yt {
+class zt {
   /**
    * Creates an instance of DrawerGesture.
    *
@@ -634,7 +634,7 @@ class qe extends At {
    */
   getContainerProps() {
     const e = {};
-    return this.swipeToClose && this.gesture && (e.gestureHandlers = this.getGestureHandlers()), e;
+    return this.swipeToClose && (e.gestureHandlers = this.getGestureHandlers()), e;
   }
   /**
    * Renders the drawer with gesture handlers
@@ -670,7 +670,7 @@ class qe extends At {
    * @returns {void}
    */
   showModal() {
-    super.showModal(), this.swipeToClose && !this.gesture && (this.gesture = new Yt({
+    super.showModal(), this.swipeToClose && !this.gesture && (this.gesture = new zt({
       modal: this.panel,
       modalContent: this.modalContent,
       modalBody: this.modalBody,
@@ -682,15 +682,16 @@ class qe extends At {
   /**
    * Gets gesture event handlers for modal content.
    * Returns event props to be spread onto the modal-content element.
+   * Handlers are bound methods that will work once gesture is initialized.
    *
    * @returns {object}
    */
   getGestureHandlers() {
-    return !this.swipeToClose || !this.gesture || !this.gesture.isMobile() ? {} : {
-      touchstart: (e) => this.gesture.handleTouchStart(e),
-      touchmove: (e) => this.gesture.handleTouchMove(e),
-      touchend: (e) => this.gesture.handleTouchEnd(e)
-    };
+    return this.swipeToClose ? {
+      touchstart: (e) => this.gesture?.handleTouchStart(e),
+      touchmove: (e) => this.gesture?.handleTouchMove(e),
+      touchend: (e) => this.gesture?.handleTouchEnd(e)
+    } : {};
   }
   /**
    * Cleans up before destroy
@@ -702,7 +703,7 @@ class qe extends At {
     this.gesture && (this.gesture.destroy(), this.gesture = null), super.beforeDestroy();
   }
 }
-const E = {
+const j = {
   info: {
     bgColor: "bg-muted/10",
     borderColor: "border-blue-500",
@@ -728,15 +729,15 @@ const E = {
     borderColor: "border",
     iconColor: "text-muted-foreground"
   }
-}, jt = (t) => I({ class: "flex justify-center" }, [
+}, Yt = (t) => I({ class: "flex justify-center" }, [
   et({ class: "text-lg font-bold mb-0" }, t)
-]), Et = c(({ href: t, class: e }, s) => V({
+]), jt = c(({ href: t, class: e }, s) => V({
   class: `bg-popover text-popover-foreground relative flex flex-auto flex-col justify-start shadow-lg pointer-events-auto p-4 border rounded-md min-w-[340px] max-w-[450px] mt-4 ${e}`,
   href: t,
   animateIn: "pullRightIn",
   animateOut: "pullRight",
   role: "alert"
-}, s)), zt = c(({ close: t, class: e }, s) => n({
+}, s)), Et = c(({ close: t, class: e }, s) => n({
   class: `pullRightIn bg-popover text-popover-foreground relative flex flex-auto flex-col justify-start shadow-lg pointer-events-auto p-4 border rounded-md min-w-[340px] max-w-[450px] mt-4 ${e}`,
   click: () => t(),
   animateIn: "pullRightIn",
@@ -767,10 +768,10 @@ class Nt extends w {
    */
   render() {
     const { bgColor: e, borderColor: s, iconColor: o } = this.getTypeStyles(), r = this.href || null, i = this.getChildren(o);
-    return r ? Et({
+    return r ? jt({
       href: r,
       class: `${e} ${s}`
-    }, i) : zt({
+    }, i) : Et({
       close: this.close.bind(this),
       class: `${e} ${s}`
     }, i);
@@ -791,7 +792,7 @@ class Nt extends w {
    */
   getTypeStyles() {
     const e = this.type || "default";
-    return E[e] || E.default;
+    return j[e] || j.default;
   }
   /**
    * This will get the buttons for the notification.
@@ -818,7 +819,7 @@ class Nt extends w {
         this.icon && x({ class: `mr-4 ${e}`, html: this.icon }),
         n({ class: "flex flex-auto flex-col" }, [
           n({ class: "flex flex-auto flex-row items-center w-full pr-12" }, [
-            this.title && jt(this.title)
+            this.title && Yt(this.title)
           ]),
           b({ class: "text-base text-muted-foreground m-0 pr-12" }, this.description),
           (this.primary || this.secondary) && L({ class: "margin-top-24 flex align-center" }, this.getButtons())
@@ -878,7 +879,7 @@ class Ve extends w {
     this.list.delete(e.id), this.list.isEmpty() && this.panel.hidePopover();
   }
 }
-const z = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
+const E = globalThis.matchMedia, F = c(({ value: t, label: e, 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: t }],
   dataSet: ["method", ["state", t, "active"]],
@@ -890,7 +891,7 @@ const z = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
   a(e)
 ])), Rt = (t) => {
   const e = document.documentElement;
-  if (t === "system" && (t = globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light"), z && !z("(prefers-color-scheme: " + t + ")").matches) {
+  if (t === "system" && (t = globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light"), E && !E("(prefers-color-scheme: " + t + ")").matches) {
     e.classList.add(t);
     return;
   }
@@ -1585,9 +1586,9 @@ const z = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
 }, [
   de({ bind: t, required: e }),
   W(({ state: o }) => [
-    a(Y.date(["[[start]]", o], "Start Date")),
+    a(z.date(["[[start]]", o], "Start Date")),
     a(" - "),
-    a(Y.date(["[[end]]", o], "End Date"))
+    a(z.date(["[[end]]", o], "End Date"))
   ]),
   x({ html: u.calendar.days })
 ]), he = ({ handleDateSelect: t, blockPriorDates: e }) => O((s, o, r) => new D({
@@ -2089,11 +2090,11 @@ export {
   It as d,
   Bt as e,
   Ft as f,
-  Ye as g,
-  je as h,
-  Ee as i,
+  ze as g,
+  Ye as h,
+  je as i,
   Mt as j,
-  ze as k,
+  Ee as k,
   K as l,
   Ne as m,
   Ue as n,

package/dist/index.es.js

@@ -4,7 +4,7 @@ import { C as T, F as b } from "./form-group-BB7dLJir.js";
 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";
 import { I as R, V as A, a as G } from "./image-BB__4s0g.js";
 import { Icons as E } from "./icons.es.js";
-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";
+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-DJrgCPat.js";
 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";
 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";
 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";

package/dist/molecules.es.js

@@ -1,4 +1,4 @@
-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";
+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-DJrgCPat.js";
 import { A as X, P as Y, g as Z } from "./range-calendar-6CLMTieN.js";
 export {
   s as Alert,

package/dist/types/components/molecules/modals/drawer/drawer.d.ts

@@ -58,6 +58,7 @@ export class Drawer extends Modal {
     /**
      * Gets gesture event handlers for modal content.
      * Returns event props to be spread onto the modal-content element.
+     * Handlers are bound methods that will work once gesture is initialized.
      *
      * @returns {object}
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@base-framework/ui",
-	"version": "1.0.2026",
+	"version": "1.0.2029",
 	"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": {