@base-framework/ui 1.0.2028 → 1.0.2030

package/dist/{empty-state-BIeHWiqh.js → empty-state-BbkagIqj.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 z } from "./format-BmrNQptv.js";
-const Y = {
+import { F as Y } from "./format-BmrNQptv.js";
+const z = {
   info: {
     borderColor: "border-blue-500",
     bgColor: "bg-muted/10",
@@ -36,7 +36,7 @@ const Y = {
 }, 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 } = Y[o] || Y.default;
+  const { borderColor: r, bgColor: i, iconColor: l } = z[o] || z.default;
   return n({ class: `flex items-start p-4 border rounded-lg ${i} ${r}` }, [
     // Icon and content
     s && gt(s, l),
@@ -168,11 +168,11 @@ 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)), ze = 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)), Ye = 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
-])), Ye = c((t, e = []) => ut({ label: t.label, description: t.description, class: "py-4 px-6", border: t.border }, [
+])), ze = 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)
 ])), je = c((t, e = []) => {
   const s = t.border ? "border-t" : "";
@@ -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 zt {
+class Yt {
   /**
    * Creates an instance of DrawerGesture.
    *
@@ -584,12 +584,12 @@ class zt {
     this.modal && this.modal.style.setProperty("--backdrop-opacity", e.toString());
   }
   /**
-   * Animates the drawer closing by translating it off-screen
+   * Animates the drawer closing by translating the entire modal off-screen
    *
    * @returns {void}
    */
   animateClose() {
-    this.modalContent && (this.modalContent.style.transform = "translateY(100%)", this.updateBackdropOpacity(0), setTimeout(() => {
+    !this.modal || !this.modalContent || (this.modalContent.style.transform = "translateY(0)", this.modalContent.style.transition = "none", this.modal.style.transition = "transform 0.3s ease-out, opacity 0.3s ease-out", this.modal.style.transform = "translateY(100%)", this.updateBackdropOpacity(0), setTimeout(() => {
       this.onClose && this.onClose();
     }, 300));
   }
@@ -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 zt({
+    super.showModal(), this.swipeToClose && !this.gesture && (this.gesture = new Yt({
       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
@@ -728,7 +729,7 @@ const j = {
     borderColor: "border",
     iconColor: "text-muted-foreground"
   }
-}, Yt = (t) => I({ class: "flex justify-center" }, [
+}, zt = (t) => I({ class: "flex justify-center" }, [
   et({ class: "text-lg font-bold mb-0" }, t)
 ]), 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}`,
@@ -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 && Yt(this.title)
+            this.title && zt(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())
@@ -1585,9 +1586,9 @@ const E = globalThis.matchMedia, F = c(({ value: t, label: e, icon: s }) => f({
 }, [
   de({ bind: t, required: e }),
   W(({ state: o }) => [
-    a(z.date(["[[start]]", o], "Start Date")),
+    a(Y.date(["[[start]]", o], "Start Date")),
     a(" - "),
-    a(z.date(["[[end]]", o], "End Date"))
+    a(Y.date(["[[end]]", o], "End Date"))
   ]),
   x({ html: u.calendar.days })
 ]), he = ({ handleDateSelect: t, blockPriorDates: e }) => O((s, o, r) => new D({
@@ -2089,8 +2090,8 @@ export {
   It as d,
   Bt as e,
   Ft as f,
-  ze as g,
-  Ye as h,
+  Ye as g,
+  ze as h,
   je as i,
   Mt as j,
   Ee as k,

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-BIeHWiqh.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-BbkagIqj.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-BIeHWiqh.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-BbkagIqj.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-gesture.d.ts

@@ -109,7 +109,7 @@ export class DrawerGesture {
      */
     updateBackdropOpacity(opacity: number): void;
     /**
-     * Animates the drawer closing by translating it off-screen
+     * Animates the drawer closing by translating the entire modal off-screen
      *
      * @returns {void}
      */

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.2028",
+	"version": "1.0.2030",
 	"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": {