@base-framework/ui 1.0.2023 → 1.0.2024

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-BJJ3lWNv.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-CpNRoBnH.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-BJJ3lWNv.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-CpNRoBnH.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

@@ -0,0 +1,135 @@
+/**
+ * DrawerGesture
+ *
+ * Manages touch gesture tracking for drawer components.
+ * Handles drag state, velocity thresholds, and swipe-to-close behavior.
+ *
+ * This class provides methods for:
+ * - Tracking touch start/move/end events
+ * - Calculating drag deltas with rubber-band damping
+ * - Determining when to close or snap back the drawer
+ * - Managing backdrop opacity during drag
+ *
+ * @export
+ * @class DrawerGesture
+ */
+export class DrawerGesture {
+    /**
+     * Creates an instance of DrawerGesture.
+     *
+     * @param {object} [options={}]
+     * @param {HTMLElement} [options.modal=null] - The modal element (panel) reference
+     * @param {HTMLElement} [options.modalContent=null] - The modal content element reference
+     * @param {HTMLElement} [options.modalBody=null] - The scrollable body element reference
+     * @param {number} [options.closeThreshold=150] - Pixels to drag before closing
+     * @param {number} [options.snapThreshold=50] - Pixels to drag before snapping
+     * @param {Function} [options.onClose=null] - Callback when drawer should close
+     */
+    constructor(options?: {
+        modal?: HTMLElement;
+        modalContent?: HTMLElement;
+        modalBody?: HTMLElement;
+        closeThreshold?: number;
+        snapThreshold?: number;
+        onClose?: Function;
+    });
+    modal: HTMLElement;
+    modalContent: HTMLElement;
+    modalBody: HTMLElement;
+    closeThreshold: number;
+    snapThreshold: number;
+    onClose: Function;
+    /**
+     * Resets the drag state to initial values
+     *
+     * @returns {void}
+     */
+    reset(): void;
+    state: {
+        isDragging: boolean;
+        startY: number;
+        currentY: number;
+        startScrollTop: number;
+        canDrag: boolean;
+    };
+    /**
+     * Checks if the viewport is mobile size
+     *
+     * @returns {boolean}
+     */
+    isMobile(): boolean;
+    /**
+     * Handles touch start event
+     *
+     * @param {TouchEvent} e - The touch event
+     * @returns {void}
+     */
+    handleTouchStart(e: TouchEvent): void;
+    /**
+     * Handles touch move event
+     *
+     * @param {TouchEvent} e - The touch event
+     * @returns {void}
+     */
+    handleTouchMove(e: TouchEvent): void;
+    /**
+     * Handles touch end event
+     *
+     * @param {TouchEvent} e - The touch event
+     * @returns {void}
+     */
+    handleTouchEnd(e: TouchEvent): void;
+    /**
+     * Gets current drag delta Y
+     *
+     * @returns {number} The vertical drag distance in pixels
+     */
+    getDeltaY(): number;
+    /**
+     * Calculates translateY with rubber band damping effect.
+     * The further you drag, the more resistance is applied.
+     *
+     * @param {number} deltaY - The raw drag distance
+     * @returns {number} The damped translation distance
+     */
+    calculateTranslateY(deltaY: number): number;
+    /**
+     * Calculates backdrop opacity based on drag distance.
+     * Opacity decreases as the drawer is dragged down.
+     *
+     * @param {number} deltaY - The drag distance
+     * @returns {number} Opacity value between 0 and 1
+     */
+    calculateBackdropOpacity(deltaY: number): number;
+    /**
+     * Updates the backdrop opacity via CSS custom property
+     *
+     * @param {number} opacity - The opacity value (0-1)
+     * @returns {void}
+     */
+    updateBackdropOpacity(opacity: number): void;
+    /**
+     * Animates the drawer closing by translating it off-screen
+     *
+     * @returns {void}
+     */
+    animateClose(): void;
+    /**
+     * Snaps the drawer back to its original position
+     *
+     * @returns {void}
+     */
+    snapBack(): void;
+    /**
+     * Checks if currently dragging
+     *
+     * @returns {boolean}
+     */
+    isDragging(): boolean;
+    /**
+     * Cleans up resources and resets state
+     *
+     * @returns {void}
+     */
+    destroy(): void;
+}

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

@@ -0,0 +1,66 @@
+/**
+ * Drawer
+ *
+ * A mobile-first drawer component that slides up from the bottom on mobile
+ * and appears as a centered modal on desktop. Supports swipe-to-close gestures.
+ *
+ * Extends the Modal component with:
+ * - Mobile-optimized slide-up animation
+ * - Touch gesture support for swipe-to-close
+ * - Rubber-band drag effect
+ * - Adaptive behavior (drawer on mobile, modal on desktop)
+ *
+ * @export
+ * @class Drawer
+ * @extends {Modal}
+ */
+export class Drawer extends Modal {
+    /**
+     * Enables swipe-to-close gesture on mobile
+     * @type {boolean}
+     * @default true
+     */
+    swipeToClose: boolean;
+    /**
+     * Pixels to drag before closing (mobile only)
+     * @type {number}
+     * @default 150
+     */
+    closeThreshold: number;
+    /**
+     * Pixels to drag before snapping behavior kicks in
+     * @type {number}
+     * @default 50
+     */
+    snapThreshold: number;
+    /**
+     * DrawerGesture instance for handling touch events
+     * @type {DrawerGesture|null}
+     * @private
+     */
+    private gesture;
+    /**
+     * Cached reference to modal content element (set via cache property)
+     * @type {HTMLElement|null}
+     */
+    modalContent: HTMLElement | null;
+    /**
+     * Cached reference to modal body element (set via cache property)
+     * @type {HTMLElement|null}
+     */
+    modalBody: HTMLElement | null;
+    /**
+     * Gets extra props to pass to ModalContainer
+     *
+     * @returns {object}
+     */
+    getContainerProps(): object;
+    /**
+     * Gets gesture event handlers for modal content.
+     * Returns event props to be spread onto the modal-content element.
+     *
+     * @returns {object}
+     */
+    getGestureHandlers(): object;
+}
+import { Modal } from '../modal.js';

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

@@ -0,0 +1,2 @@
+export { DrawerGesture } from "./drawer-gesture.js";
+export { Drawer } from "./drawer.js";

package/dist/types/components/molecules/modals/modal-container.d.ts

@@ -1,8 +1,21 @@
 /**
- * This will create a dialog component.
+ * ModalContainer
  *
- * @param {object} props
- * @param {array} children
+ * Creates a container for modal/drawer components with header, body, and footer.
+ * Handles popover behavior, form submission, and backdrop clicks.
+ *
+ * @param {object} props - Component properties
+ * @param {string} [props.class] - Additional CSS classes
+ * @param {string} props.title - Modal title
+ * @param {string} [props.description] - Optional description
+ * @param {boolean} [props.back=false] - Show back button on mobile
+ * @param {string} [props.icon] - Icon to display in header
+ * @param {Array} [props.options=[]] - Header action buttons
+ * @param {Array} [props.buttons=[]] - Footer buttons
+ * @param {boolean} [props.hideFooter=false] - Hide footer section
+ * @param {Function} [props.onSubmit] - Form submission handler
+ * @param {object} [props.gestureHandlers] - Touch gesture handlers for drawer
+ * @param {Array} children - Modal body content
  * @returns {object}
  */
 export const ModalContainer: Function;

package/dist/types/components/molecules/modals/modal-header.d.ts

@@ -0,0 +1,15 @@
+/**
+ * ModalHeader
+ *
+ * Renders a header for modal/drawer components with title, description,
+ * optional back button (mobile), icon, and action buttons.
+ *
+ * @param {object} props
+ * @param {string} props.title - The modal title
+ * @param {string} [props.description] - Optional description text
+ * @param {boolean} [props.back=false] - Show back button on mobile
+ * @param {string} [props.icon] - SVG icon string to display
+ * @param {Array} [props.options=[]] - Array of action buttons/elements
+ * @returns {object}
+ */
+export const ModalHeader: Function;

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

@@ -9,7 +9,7 @@ export * from "./form/form-control.js";
 export * from "./form/form-field.js";
 export * from "./form/form.js";
 export * from "./modals/atoms.js";
-export * from "./modals/drawer.js";
+export * from "./modals/drawer/drawer.js";
 export * from "./modals/modal.js";
 export * from "./notifications/notification-container.js";
 export * from "./notifications/notification.js";

package/package.json

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

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

@@ -1,119 +0,0 @@
-/**
- * DrawerGesture
- *
- * Handles touch gesture tracking for drawer components.
- * Manages drag state, thresholds, and provides helper methods for swipe-to-close behavior.
- *
- * @export
- * @class DrawerGesture
- */
-export class DrawerGesture {
-    /**
-     * Creates an instance of DrawerGesture.
-     *
-     * @param {object} [options={}]
-     * @param {HTMLElement|null} [options.modal=null] - The modal element (panel) reference
-     * @param {number} [options.closeThreshold=150] - Pixels to drag before closing
-     * @param {number} [options.snapThreshold=50] - Pixels to drag before snapping
-     * @param {Function|null} [options.onClose=null] - Callback when drawer should close
-     */
-    constructor(options?: {
-        modal?: HTMLElement | null;
-        closeThreshold?: number;
-        snapThreshold?: number;
-        onClose?: Function | null;
-    });
-    modal: HTMLElement;
-    /**
-     * Reset drag state
-     *
-     * @returns {void}
-     */
-    reset(): void;
-    state: {
-        isDragging: boolean;
-        startY: number;
-        currentY: number;
-        startScrollTop: number;
-        canDrag: boolean;
-    };
-    /**
-     * Check if viewport is mobile
-     *
-     * @returns {boolean}
-     */
-    isMobile(): boolean;
-    /**
-     * Handle touch start
-     *
-     * @param {TouchEvent} e
-     * @returns {void}
-     */
-    handleTouchStart(e: TouchEvent): void;
-    /**
-     * Handle touch move
-     *
-     * @param {TouchEvent} e
-     * @returns {void}
-     */
-    handleTouchMove(e: TouchEvent): void;
-    /**
-     * Handle touch end
-     *
-     * @param {TouchEvent} e
-     * @returns {void}
-     */
-    handleTouchEnd(e: TouchEvent): void;
-    /**
-     * Get current drag delta Y
-     *
-     * @returns {number}
-     */
-    getDeltaY(): number;
-    /**
-     * Calculate translateY with rubber band damping
-     *
-     * @param {number} deltaY
-     * @returns {number}
-     */
-    calculateTranslateY(deltaY: number): number;
-    /**
-     * Calculate backdrop opacity based on drag distance
-     *
-     * @param {number} deltaY
-     * @returns {number}
-     */
-    calculateBackdropOpacity(deltaY: number): number;
-    /**
-     * Update backdrop opacity
-     *
-     * @param {number} opacity
-     * @returns {void}
-     */
-    updateBackdropOpacity(opacity: number): void;
-    /**
-     * Animate drawer closing
-     *
-     * @returns {void}
-     */
-    animateClose(): void;
-    /**
-     * Snap drawer back to original position
-     *
-     * @returns {void}
-     */
-    snapBack(): void;
-    /**
-     * Check if currently dragging
-     *
-     * @returns {boolean}
-     */
-    isDragging(): boolean;
-    /**
-     * Cleanup
-     *
-     * @returns {void}
-     */
-    destroy(): void;
-    onClose: any;
-}

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

@@ -1,46 +0,0 @@
-/**
- * Drawer
- *
- * A mobile-first drawer component that slides up from the bottom on mobile
- * and appears as a centered modal on desktop. Supports swipe-to-close gestures.
- *
- * @export
- * @class Drawer
- * @extends {Modal}
- */
-export class Drawer extends Modal {
-    /**
-     * @member {boolean} swipeToClose
-     * @default true
-     * @description Enable swipe-to-close gesture on mobile
-     */
-    swipeToClose: boolean;
-    /**
-     * @member {number} closeThreshold
-     * @default 150
-     * @description Pixels to drag before closing (mobile only)
-     */
-    closeThreshold: number;
-    /**
-     * @member {number} snapThreshold
-     * @default 50
-     * @description Pixels to drag before snapping behavior kicks in
-     */
-    snapThreshold: number;
-    /**
-     * Get extra props for ModalContainer
-     *
-     * @returns {object}
-     */
-    getContainerProps(): object;
-    gesture: DrawerGesture;
-    /**
-     * Get gesture event handlers for modal content
-     * Returns event props to be spread onto the modal-content element
-     *
-     * @returns {object}
-     */
-    getGestureHandlers(): object;
-}
-import { Modal } from './modal.js';
-import { DrawerGesture } from './drawer-gesture.js';