@base-framework/ui 1.0.2022 → 1.0.2023

package/dist/index.es.js

@@ -1,37 +1,37 @@
 import { B as s, C as o, F as t, L as r, P as n, R as l, S as i, a as p, T as m } from "./tooltip-Czvqmxt3.js";
 import { B as u, I as g, L as C } from "./buttons-CHEs54Wl.js";
 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 H } from "./inputs-9udyzkHR.js";
-import { I as w, V as A, a as G } from "./image-BB__4s0g.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, w as z, K, y as Q, z as _, E as X, G as Y, D as Z, m as $, n as aa, Q as ea, O as sa, v as oa, c as ta, a as ra, b as na, R as la, l as ia, g as pa, i as ma, h as da, j as ua, e as ga, k as Ca, F as ca, d as Ta, f as ba, I as Ia, L as Da, x as Sa, M as Fa, o as Ba, N as Pa, P as ka, s as Ma, t as xa, S as fa, q as va, r as Na, T as ya, H as ha, J as Ua, p as La, u as Wa } from "./empty-state-BQmqxn9k.js";
-import { A as Ra, b as wa, C as Aa, D as Ga, a as Oa, F as Ea, M as Va, P as ja, R as qa, c as Ja, g as za, p as Ka } from "./range-calendar-6CLMTieN.js";
-import { B as _a, p as Xa, C as Ya, j as Za, D as $a, m as ae, k as ee, H as se, I as oe, N as te, O as re, P as ne, S as le, n as ie, o as pe, x as me, s as de, q as ue, r as ge, T as Ce, t as ce, w as Te, u as be, v as Ie, l as De, U as Se, W as Fe, f as Be, h as Pe, i as ke, c as Me, d as xe, b as fe, e as ve, a as Ne, g as ye } from "./signature-panel-JSfsTsVc.js";
-import { B as Ue, I as Le, M as We, d as He, e as Re, g as we, N as Ae, b as Ge, a as Oe, f as Ee, P as Ve, c as je, S as qe, T as Je } from "./mobile-nav-wrapper-Dm9DinRD.js";
-import { B as Ke, a as Qe, C as _e, F as Xe, b as Ye, c as Ze, M as $e, P as as, S as es } from "./sidebar-menu-page-D4WMgz5U.js";
-import { A as os, F as ts, M as rs, a as ns, T as ls } from "./aside-template-sUm-F2f0.js";
-import { B as ps } from "./bside-template-do_hXebn.js";
-import { F as ds, c as us } from "./format-BmrNQptv.js";
-import { I as Cs } from "./image-scaler-1G-JzJVG.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 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";
+import { B as Qe, a as _e, C as Xe, F as Ye, b as Ze, c as $e, M as as, P as es, S as ss } from "./sidebar-menu-page-D4WMgz5U.js";
+import { A as ts, F as rs, M as ns, a as ls, T as is } from "./aside-template-sUm-F2f0.js";
+import { B as ms } from "./bside-template-do_hXebn.js";
+import { F as us, c as gs } from "./format-BmrNQptv.js";
+import { I as cs } from "./image-scaler-1G-JzJVG.js";
 export {
   j as Alert,
-  os as AsideTemplate,
+  ts as AsideTemplate,
   Ra as Avatar,
-  _a as BackButton,
-  Ue as Backdrop,
+  Xa as BackButton,
+  Le as Backdrop,
   s as Badge,
-  Ke as BasicPage,
-  Qe as BlankPage,
+  Qe as BasicPage,
+  _e as BlankPage,
   q as Breadcrumb,
-  ps as BsideTemplate,
+  ms as BsideTemplate,
   u as Button,
-  Xa as ButtonTab,
-  wa as Calendar,
-  Aa as CalendarCells,
+  Ya as ButtonTab,
+  Aa as Calendar,
+  Ga as CalendarCells,
   T as Card,
-  _e as CenterPage,
+  Xe as CenterPage,
   D as Checkbox,
-  Ya as CheckboxCol,
+  Za as CheckboxCol,
   o as CircleGraph,
   S as ColorInput,
   J as ColumnRow,
@@ -39,140 +39,141 @@ export {
   K as Confirmation,
   Q as CountDisplay,
   _ as Counter,
-  Za as DataTable,
-  $a as DataTableBody,
+  $a as DataTable,
+  ae as DataTableBody,
   F as DateInput,
   X as DatePicker,
   Y as DateRangePicker,
   B as DateTimeInput,
-  Ga as DayCell,
-  Oa as DayHeader,
+  Oa as DayCell,
+  Ea as DayHeader,
   Z as DelayComponent,
   $ as DetailBody,
   aa as DetailSection,
   ea as Dialog,
   sa as DialogContainer,
-  ae as DockableOverlay,
+  ee as DockableOverlay,
   oa as DotsIndicator,
-  ta as Dropdown,
-  ra as DropdownItem,
-  na as DropdownMenu,
-  ee as DynamicDataTable,
+  ta as Drawer,
+  ra as Dropdown,
+  na as DropdownItem,
+  la as DropdownMenu,
+  se as DynamicDataTable,
   P as EmailInput,
-  la as EmptyState,
+  ia as EmptyState,
   t as Fieldset,
   k as FileInput,
-  ia as Form,
-  pa as FormCard,
-  ma as FormCardContent,
-  da as FormCardGroup,
-  ua as FormControl,
-  ga as FormDescription,
-  Ca as FormField,
+  pa as Form,
+  ma as FormCard,
+  da as FormCardContent,
+  ua as FormCardGroup,
+  ga as FormControl,
+  Ca as FormDescription,
+  ca as FormField,
   b as FormGroup,
-  ca as FormItem,
-  Ta as FormLabel,
-  ba as FormMessage,
-  ds as Format,
-  Ea as FormatDate,
-  Xe as FullContainPage,
-  Ye as FullPage,
-  ts as FullTemplate,
-  Ze as FullscreenPage,
-  se as HeaderCol,
+  Ta as FormItem,
+  ba as FormLabel,
+  Ia as FormMessage,
+  us as Format,
+  Va as FormatDate,
+  Ye as FullContainPage,
+  Ze as FullPage,
+  rs as FullTemplate,
+  $e as FullscreenPage,
+  oe as HeaderCol,
   M as HiddenInput,
   g as Icon,
   E as Icons,
-  w as Image,
-  Cs as ImageScaler,
-  Ia as ImageUploader,
-  Le as InlineNavigation,
-  oe as InlineOverlay,
+  R as Image,
+  cs as ImageScaler,
+  Da as ImageUploader,
+  We as InlineNavigation,
+  te as InlineOverlay,
   x as Input,
   r as Legend,
   C as LoadingButton,
-  Da as LogoUploader,
-  rs as MainColumn,
-  We as MainLink,
-  $e as MainSection,
-  Sa as MinusButton,
+  Sa as LogoUploader,
+  ns as MainColumn,
+  we as MainLink,
+  as as MainSection,
+  Fa as MinusButton,
   He as MobileNavButton,
   Re as MobileNavWrapper,
-  Fa as Modal,
-  Va as MonthCalendar,
+  Ba as Modal,
+  ja as MonthCalendar,
   f as MonthInput,
-  we as NavButton,
-  Ae as NavButtonLink,
-  Ge as Navigation,
-  Oe as NavigationGroup,
-  te as NavigationMenu,
-  Ee as NavigationPopover,
-  Ba as Notification,
-  Pa as NotificationContainer,
+  Ae as NavButton,
+  Ge as NavButtonLink,
+  Oe as Navigation,
+  Ee as NavigationGroup,
+  re as NavigationMenu,
+  Ve as NavigationPopover,
+  Pa as Notification,
+  ka as NotificationContainer,
   v as NumberInput,
-  re as Overlay,
-  as as Page,
-  ne as Panel,
+  ne as Overlay,
+  es as Page,
+  le as Panel,
   N as PasswordInput,
-  ka as PlusButton,
-  ja as PopOver,
-  Ve as PopupHeader,
+  Ma as PlusButton,
+  qa as PopOver,
+  je as PopupHeader,
   n as ProgressBar,
   y as Radio,
-  qa as RangeCalendar,
+  Ja as RangeCalendar,
   l as RangeSlider,
-  Ma as STATUSES,
-  xa as STATUS_CLASS,
-  le as ScrollableDataTable,
-  ie as SearchDropdown,
-  pe as SearchInput,
+  xa as STATUSES,
+  fa as STATUS_CLASS,
+  ie as ScrollableDataTable,
+  pe as SearchDropdown,
+  me as SearchInput,
   i as Select,
-  je as SidebarMenu,
-  es as SidebarMenuPage,
-  me as SignaturePanel,
+  qe as SidebarMenu,
+  ss as SidebarMenuPage,
+  de as SignaturePanel,
   p as Skeleton,
-  fa as SplitRow,
-  va as StaticStatusIndicator,
-  Na as StatusIndicator,
-  qe as SubNavigation,
-  de as Tab,
-  ue as TabGroup,
-  ge as TabNavigation,
-  Ce as TableHeader,
+  va as SplitRow,
+  Na as StaticStatusIndicator,
+  ya as StatusIndicator,
+  Je as SubNavigation,
+  ue as Tab,
+  ge as TabGroup,
+  Ce as TabNavigation,
+  ce as TableHeader,
   h as TelInput,
-  ns as Template,
+  ls as Template,
   U as Textarea,
-  ya as ThemeToggle,
-  ha as TimeFrame,
+  ha as ThemeToggle,
+  Ua as TimeFrame,
   L as TimeInput,
-  Ua as TimePicker,
-  Je as TitleHeader,
-  La as Toggle,
+  La as TimePicker,
+  ze as TitleHeader,
+  Wa as Toggle,
   m as Tooltip,
-  ls as TopBar,
-  ce as UnderlinedButtonTab,
-  Te as UnderlinedTab,
-  be as UnderlinedTabGroup,
-  Ie as UnderlinedTabNavigation,
+  is as TopBar,
+  Te as UnderlinedButtonTab,
+  be as UnderlinedTab,
+  Ie as UnderlinedTabGroup,
+  De as UnderlinedTabNavigation,
   W as UrlInput,
-  De as UserList,
-  Se as UserListItem,
+  Se as UserList,
+  Fe as UserListItem,
   A as Veil,
   G as VeilJot,
-  Fe as WeekCalendar,
-  Be as WeekCell,
-  Pe as WeekCells,
-  ke as WeekHeader,
-  H as WeekInput,
-  Ja as addTime,
-  Me as calculateWeekNumber,
-  us as createWatcherCallback,
-  xe as generateWeeks,
-  fe as getDateFromWeek,
-  ve as getMonthDays,
-  Ne as getNextMonthDays,
-  za as getPosition,
-  ye as getPreviousMonthDays,
-  Wa as getStatusClass,
-  Ka as pad
+  Be as WeekCalendar,
+  Pe as WeekCell,
+  ke as WeekCells,
+  Me as WeekHeader,
+  w as WeekInput,
+  za as addTime,
+  xe as calculateWeekNumber,
+  gs as createWatcherCallback,
+  fe as generateWeeks,
+  ve as getDateFromWeek,
+  Ne as getMonthDays,
+  ye as getNextMonthDays,
+  Ka as getPosition,
+  he as getPreviousMonthDays,
+  wa as getStatusClass,
+  Qa as pad
 };

package/dist/molecules.es.js

@@ -1,11 +1,11 @@
-import { A as s, B as t, C as e, w as r, K as i, y as n, z as m, E as l, G as d, D as C, m as p, n as S, Q as g, O as u, v as D, c, a as F, b as T, R as P, l as A, g as I, i as f, h as w, j as b, e as y, k as B, F as M, d as k, f as x, I as L, L as R, x as U, M as v, o as E, N, P as h, s as G, t as O, S as j, q, r as z, T as H, H as J, J as K, p as Q, u as _ } from "./empty-state-BQmqxn9k.js";
-import { A as W, P as X, g as Y } from "./range-calendar-6CLMTieN.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-BJJ3lWNv.js";
+import { A as X, P as Y, g as Z } from "./range-calendar-6CLMTieN.js";
 export {
   s as Alert,
-  W as Avatar,
+  X as Avatar,
   t as Breadcrumb,
-  e as ColumnRow,
-  r as Combobox,
+  r as ColumnRow,
+  e as Combobox,
   i as Confirmation,
   n as CountDisplay,
   m as Counter,
@@ -13,41 +13,42 @@ export {
   d as DateRangePicker,
   C as DelayComponent,
   p as DetailBody,
-  S as DetailSection,
-  g as Dialog,
-  u as DialogContainer,
-  D as DotsIndicator,
-  c as Dropdown,
-  F as DropdownItem,
-  T as DropdownMenu,
-  P as EmptyState,
+  D as DetailSection,
+  S as Dialog,
+  g as DialogContainer,
+  u as DotsIndicator,
+  c as Drawer,
+  F as Dropdown,
+  T as DropdownItem,
+  P as DropdownMenu,
+  w as EmptyState,
   A as Form,
   I as FormCard,
   f as FormCardContent,
-  w as FormCardGroup,
-  b as FormControl,
-  y as FormDescription,
-  B as FormField,
-  M as FormItem,
+  b as FormCardGroup,
+  y as FormControl,
+  B as FormDescription,
+  M as FormField,
+  U as FormItem,
   k as FormLabel,
   x as FormMessage,
   L as ImageUploader,
   R as LogoUploader,
-  U as MinusButton,
-  v as Modal,
-  E as Notification,
-  N as NotificationContainer,
-  h as PlusButton,
-  X as PopOver,
-  G as STATUSES,
-  O as STATUS_CLASS,
-  j as SplitRow,
-  q as StaticStatusIndicator,
-  z as StatusIndicator,
-  H as ThemeToggle,
-  J as TimeFrame,
-  K as TimePicker,
-  Q as Toggle,
-  Y as getPosition,
-  _ as getStatusClass
+  v as MinusButton,
+  E as Modal,
+  N as Notification,
+  h as NotificationContainer,
+  G as PlusButton,
+  Y as PopOver,
+  O as STATUSES,
+  j as STATUS_CLASS,
+  q as SplitRow,
+  z as StaticStatusIndicator,
+  H as StatusIndicator,
+  J as ThemeToggle,
+  K as TimeFrame,
+  Q as TimePicker,
+  _ as Toggle,
+  Z as getPosition,
+  V as getStatusClass
 };

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

@@ -0,0 +1,119 @@
+/**
+ * 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

@@ -0,0 +1,46 @@
+/**
+ * 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';

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

@@ -25,7 +25,7 @@ export class Modal extends Component {
     /**
      * @member {string|null} type
      * @default null
-     * @values 'right', 'left'
+     * @values 'right', 'left', 'drawer'
      * @description This will set the type of modal.
      */
     type: any;

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

@@ -9,6 +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/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.2022",
+	"version": "1.0.2023",
 	"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": {