@base-framework/ui 1.2.10 → 1.2.12

package/dist/atoms.es.js

@@ -1,47 +1,49 @@
-import { B as e, C as t, a as o, F as n, b as r, L as i, P as p, R as u, S as I, T as l } from "./tooltip-CwOm1Qs5.js";
-import { B as d, C as g, a as m, I as T, L as B, M as C, T as x, U as b, i as f, b as F } from "./buttons-DthWscX3.js";
-import { C as S, a as L, D as P, b as R, E as U, F as h, H as k, I as D, c as H, M as V, N as E, P as G, R as N, T as W, d as v, e as w, U as J, V as j, f as q, W as y } from "./image-XjAp5NjV.js";
-import { S as A } from "./skeleton-BlY3opxG.js";
+import { B as e, C as t, a as o, F as n, b as r, L as i, P as p, R as u, S as I, c as l, d as c, T as d } from "./tooltip-Cks2gfw4.js";
+import { B as T, C as g, a as B, I as C, L as f, M as S, T as x, U as b, i as F, b as M } from "./buttons-DthWscX3.js";
+import { C as P, a as R, D as U, b as h, E as k, F as D, H, I as V, c as E, M as G, N, P as W, R as Z, T as v, d as w, e as J, U as j, V as q, f as y, W as z } from "./image-XjAp5NjV.js";
+import { S as K } from "./skeleton-BlY3opxG.js";
 export {
   e as Badge,
-  d as Button,
+  T as Button,
   t as Card,
-  S as Checkbox,
+  P as Checkbox,
   g as CircleButton,
   o as CircleGraph,
-  m as CircleToggleButton,
-  L as ColorInput,
-  P as DateInput,
-  R as DateTimeInput,
-  U as EmailInput,
+  B as CircleToggleButton,
+  R as ColorInput,
+  U as DateInput,
+  h as DateTimeInput,
+  k as EmailInput,
   n as Fieldset,
-  h as FileInput,
+  D as FileInput,
   r as FormGroup,
-  k as HiddenInput,
-  T as Icon,
-  D as Image,
-  H as Input,
+  H as HiddenInput,
+  C as Icon,
+  V as Image,
+  E as Input,
   i as Legend,
-  B as LoadingButton,
-  C as MaterialIcon,
-  V as MonthInput,
-  E as NumberInput,
-  G as PasswordInput,
+  f as LoadingButton,
+  S as MaterialIcon,
+  G as MonthInput,
+  N as NumberInput,
+  W as PasswordInput,
   p as ProgressBar,
-  N as Radio,
+  Z as Radio,
   u as RangeSlider,
-  I as Select,
-  A as Skeleton,
-  W as TelInput,
-  v as Textarea,
-  w as TimeInput,
+  I as SafeZoneBottom,
+  l as SafeZoneTop,
+  c as Select,
+  K as Skeleton,
+  v as TelInput,
+  w as Textarea,
+  J as TimeInput,
   x as ToggleButton,
-  l as Tooltip,
+  d as Tooltip,
   b as UniversalIcon,
-  J as UrlInput,
-  j as Veil,
-  q as VeilJot,
-  y as WeekInput,
-  f as isHeroicon,
-  F as isMaterialIcon
+  j as UrlInput,
+  q as Veil,
+  y as VeilJot,
+  z as WeekInput,
+  F as isHeroicon,
+  M as isMaterialIcon
 };

package/dist/{empty-state-DLpHv8MG.js → empty-state-CcxkrsqJ.js}

@@ -3,7 +3,7 @@ import { Div as n, H5 as et, P as b, Li as q, Span as a, Ul as V, Button as p, I
 import { P as S, C as at, R as ct } from "./simple-search-input-DKWA4zYs.js";
 import { U as m, B as h, I as dt } from "./buttons-DthWscX3.js";
 import { Timer as ut, List as ht, DynamicTime as mt } from "@base-framework/organisms";
-import { C as ft, b as pt } from "./tooltip-CwOm1Qs5.js";
+import { C as ft, b as pt } from "./tooltip-Cks2gfw4.js";
 import { f as C } from "./image-XjAp5NjV.js";
 import { Icons as u } from "./icons.es.js";
 import { F as z } from "./format-DE4rFWuD.js";

package/dist/index.es.js

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

package/dist/molecules.es.js

@@ -1,4 +1,4 @@
-import { A as s, B as t, C as r, a as e, b as i, c as n, d as m, D as l, e as d, f as C, g as p, h as D, i as S, j as u, k as c, l as g, m as F, n as T, o as P, E as w, F as A, p as I, q as f, r as b, s as y, t as B, u as M, v as U, w as k, x, I as L, L as R, M as v, y as E, N, z as h, P as G, S as O, G as j, H as q, J as z, K as H, T as J, O as K, Q, R as _, U as V } from "./empty-state-DLpHv8MG.js";
+import { A as s, B as t, C as r, a as e, b as i, c as n, d as m, D as l, e as d, f as C, g as p, h as D, i as S, j as u, k as c, l as g, m as F, n as T, o as P, E as w, F as A, p as I, q as f, r as b, s as y, t as B, u as M, v as U, w as k, x, I as L, L as R, M as v, y as E, N, z as h, P as G, S as O, G as j, H as q, J as z, K as H, T as J, O as K, Q, R as _, U as V } from "./empty-state-CcxkrsqJ.js";
 import { A as X, P as Y, m as Z } from "./simple-search-input-DKWA4zYs.js";
 export {
   s as Alert,

package/dist/{tooltip-CwOm1Qs5.js → tooltip-Cks2gfw4.js}

@@ -1,8 +1,8 @@
-import { Span as d, Div as n, Legend as h, Fieldset as p, H4 as y, P as k, UseParent as b, Input as w } from "@base-framework/atoms";
+import { Span as m, Div as n, Legend as h, Fieldset as p, H4 as y, P as k, UseParent as x, Input as w } from "@base-framework/atoms";
 import { Atom as s, Html as $ } from "@base-framework/base";
 import { U as v } from "./buttons-DthWscX3.js";
-import { f as m, g as P, h as S, i as E } from "./image-XjAp5NjV.js";
-const g = {
+import { f as C, g as P, h as S, i as B } from "./image-XjAp5NjV.js";
+const d = {
   gray: {
     backgroundColor: "bg-gray-50",
     textColor: "text-gray-600",
@@ -83,27 +83,27 @@ const g = {
     textColor: "text-foreground",
     ringColor: "ring-white/10"
   }
-}, B = (r) => g[r] || g.gray, F = (r, e = {}) => {
-  const t = B(r), o = e.backgroundColor ?? t.backgroundColor, l = e.textColor ?? t.textColor, a = e.ringColor ?? t.ringColor;
+}, N = (r) => d[r] || d.gray, E = (r, e = {}) => {
+  const t = N(r), o = e.backgroundColor ?? t.backgroundColor, l = e.textColor ?? t.textColor, a = e.ringColor ?? t.ringColor;
   return `inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors ${o} ${l} ${a}`;
-}, U = s((r, e) => {
-  const { type: t, icon: o, size: l = "xs", backgroundColor: a, textColor: i, ringColor: f, ...x } = r, C = F(t, { backgroundColor: a, textColor: i, ringColor: f });
-  return d({ ...x, class: C }, [
+}, O = s((r, e) => {
+  const { type: t, icon: o, size: l = "xs", backgroundColor: a, textColor: i, ringColor: c, ...g } = r, u = E(t, { backgroundColor: a, textColor: i, ringColor: c });
+  return m({ ...g, class: u }, [
     o ? v({ size: l, class: "mr-1" }, o) : null,
     ...e || []
   ]);
-}), V = s((r, e) => {
+}), U = s((r, e) => {
   const t = r.margin ?? "my-5 mx-5", o = r.padding ?? "p-4", l = r.border ?? "border-border";
   return r.hover && (r.class += " hover:shadow-lg hover:bg-muted/50"), n({
     ...r,
     // @ts-ignore
     class: `rounded-lg ${l} bg-card text-card-foreground shadow-md min-w-[120px] min-h-[80px] ${t} ${o} ${r.class || ""}`
   }, e);
-}), N = s((r, e) => h({
+}), F = s((r, e) => h({
   ...r,
   // @ts-ignore
   class: ` font-medium -mt-4 -mx-1 px-2 py-2 ${r.class || ""}`
-}, e)), _ = s((r, e) => {
+}, e)), V = s((r, e) => {
   const t = r.border === "full" ? "border rounded-md" : "border-t";
   return p({
     ...r,
@@ -111,10 +111,10 @@ const g = {
     class: `p-6 ${t} ${r.class || ""}`
   }, [
     // @ts-ignore
-    r.legend && N(r.legend),
+    r.legend && F(r.legend),
     n({ class: "flex flex-auto flex-col gap-y-6" }, e)
   ]);
-}), z = s((r, e) => {
+}), _ = s((r, e) => {
   const t = r.border === !0 ? "border-t" : "";
   return n({
     ...r,
@@ -136,7 +136,7 @@ const g = {
     // Controls container: grows to fill remaining space, spacing between items
     n({ class: "flex flex-col gap-y-4" }, e)
   ]);
-}), D = m(
+}), j = C(
   {
     /**
      * This will create the initial state of the RangeSlider.
@@ -169,7 +169,7 @@ const g = {
       return n({ class: "relative w-full h-4 flex items-center" }, [
         // Track
         n({ class: "absolute h-2 w-full rounded-full bg-muted" }),
-        b(({ state: r }) => [
+        x(({ state: r }) => [
           // Filled Track
           n({
             class: "absolute h-2 bg-primary rounded-full",
@@ -208,15 +208,15 @@ const g = {
       ]);
     }
   }
-), H = s((r) => ({
+), D = s((r) => ({
   tag: "select",
   onCreated(e) {
     r.options && $.setupSelectOptions(e, r.options);
   },
   ...r,
   // @ts-ignore
-  class: `${E} ${r.class || ""}`.trim()
-})), A = (r) => !r || isNaN(r) ? null : r, c = (r, e) => {
+  class: `${B} ${r.class || ""}`.trim()
+})), I = (r) => !r || isNaN(r) ? null : r, b = (r, e) => {
   const t = r, o = 16, l = 2 * Math.PI * o, a = t / 100 * l, i = `
 	<svg class="w-40 h-40 mx-auto" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
 		<!-- Background Circle -->
@@ -259,20 +259,20 @@ const g = {
     class: "circle-graph text-inherit",
     html: i
   });
-}, M = s((r) => {
-  const e = r.progress || 0, t = r.class || "", o = c(e, t);
+}, H = s((r) => {
+  const e = r.progress || 0, t = r.class || "", o = b(e, t);
   return n({
     class: "circle-graph-wrap",
     onSet: [
       // @ts-ignore
       r.prop,
-      (l) => (l = A(l), l ? c(l, t) : o)
+      (l) => (l = I(l), l ? b(l, t) : o)
     ]
   }, [o]);
-}), T = () => b(({ state: r }) => n({
+}), T = () => x(({ state: r }) => n({
   class: "absolute h-full rounded-full bg-primary transition-all duration-300",
   style: ["width: [[progress]]%;", r]
-})), J = m(
+})), M = C(
   {
     /**
      * This will render the progress bar component.
@@ -324,7 +324,49 @@ const g = {
       r < 0 && (r = 0), r > 100 && (r = 100), this.state.progress = r;
     }
   }
-), u = {
+), Z = s((r = {}) => {
+  const {
+    class: e = "",
+    background: t = !0,
+    blur: o = !0,
+    backgroundClass: l = "bg-background/95",
+    blurClass: a = "backdrop-blur",
+    zIndexClass: i = "z-9999",
+    style: c = ""
+  } = r, g = [
+    "fixed bottom-0 left-0 right-0 w-full",
+    i,
+    t ? l : "",
+    o ? a : "",
+    e
+  ].filter(Boolean).join(" "), u = `height: env(safe-area-inset-bottom, 0px);${c ? ` ${c}` : ""}`;
+  return n({
+    class: g,
+    style: u,
+    "aria-hidden": "true"
+  });
+}), J = s((r = {}) => {
+  const {
+    class: e = "",
+    background: t = !0,
+    blur: o = !0,
+    backgroundClass: l = "bg-background/95",
+    blurClass: a = "backdrop-blur",
+    zIndexClass: i = "z-9999",
+    style: c = ""
+  } = r, g = [
+    "fixed top-0 left-0 right-0 w-full",
+    i,
+    t ? l : "",
+    o ? a : "",
+    e
+  ].filter(Boolean).join(" "), u = `height: env(safe-area-inset-top, 0px);${c ? ` ${c}` : ""}`;
+  return n({
+    class: g,
+    style: u,
+    "aria-hidden": "true"
+  });
+}), f = {
   top: "bottom-full left-1/2 transform -translate-x-1/2 mb-2",
   "top-right": "bottom-full left-full transform -translate-x-1 mb-2",
   "top-left": "bottom-full right-full transform translate-x-1 mb-2",
@@ -333,12 +375,12 @@ const g = {
   "bottom-left": "top-full right-full transform translate-x-1 mt-2",
   left: "top-1/2 right-full transform -translate-y-1/2 mr-2",
   right: "top-1/2 left-full transform -translate-y-1/2 ml-2"
-}, I = (r) => u[String(r)] || u.top, Y = s(({ position: r = "top", content: e }, t) => {
-  const o = I(r);
+}, A = (r) => f[String(r)] || f.top, Y = s(({ position: r = "top", content: e }, t) => {
+  const o = A(r);
   return Array.isArray(t) === !1 && (t = [t]), n({ class: "relative group inline-block" }, [
     ...t,
     // Tooltip box
-    d({
+    m({
       class: `
 				absolute z-20 px-2 py-1 border text-sm bg-background rounded shadow-md opacity-0 whitespace-nowrap
 				group-hover:opacity-100 transition-opacity duration-200 ${o} pointer-events-none
@@ -347,14 +389,16 @@ const g = {
   ]);
 });
 export {
-  U as B,
-  V as C,
-  _ as F,
-  N as L,
-  J as P,
-  D as R,
-  H as S,
+  O as B,
+  U as C,
+  V as F,
+  F as L,
+  M as P,
+  j as R,
+  Z as S,
   Y as T,
-  M as a,
-  z as b
+  H as a,
+  _ as b,
+  J as c,
+  D as d
 };

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

@@ -13,6 +13,8 @@ export * from "./image.js";
 export * from "./material-icon.js";
 export * from "./progress/circle-graph.js";
 export * from "./progress/progress-bar.js";
+export * from "./safe-zone-bottom.js";
+export * from "./safe-zone-top.js";
 export * from "./skeleton.js";
 export * from "./tooltip.js";
 export * from "./universal-icon.js";

package/dist/types/components/atoms/safe-zone-bottom.d.ts

@@ -0,0 +1,24 @@
+/**
+ * SafeZoneBottom
+ *
+ * A fixed overlay atom that fills the bottom safe area inset on mobile devices
+ * (e.g. iOS home indicator area).
+ *
+ * Usage:
+ *   SafeZoneBottom()
+ *
+ * Then offset sticky/fixed footers with `pb-[env(safe-area-inset-bottom)]`
+ * or use the companion CSS variable `--safe-area-inset-bottom`.
+ *
+ * @param {object} [props]
+ * @param {string} [props.class]
+ * @param {boolean} [props.background=true]
+ * @param {boolean} [props.blur=true]
+ * @param {string} [props.backgroundClass='bg-background/95']
+ * @param {string} [props.blurClass='backdrop-blur']
+ * @param {string} [props.zIndexClass='z-9999']
+ * @param {string} [props.style]
+ * @returns {object}
+ */
+export const SafeZoneBottom: (...args: any[]) => object;
+export default SafeZoneBottom;

package/dist/types/components/atoms/safe-zone-top.d.ts

@@ -0,0 +1,24 @@
+/**
+ * SafeZoneTop
+ *
+ * A fixed overlay atom that fills the top safe area inset on mobile devices
+ * (e.g. iOS notch / Dynamic Island).
+ *
+ * Usage:
+ *   SafeZoneTop()
+ *
+ * Then offset sticky/fixed headers with `pt-[env(safe-area-inset-top)]`
+ * or use the companion CSS variable `--safe-area-inset-top`.
+ *
+ * @param {object} [props]
+ * @param {string} [props.class]
+ * @param {boolean} [props.background=true]
+ * @param {boolean} [props.blur=true]
+ * @param {string} [props.backgroundClass='bg-background/95']
+ * @param {string} [props.blurClass='backdrop-blur']
+ * @param {string} [props.zIndexClass='z-9999']
+ * @param {string} [props.style]
+ * @returns {object}
+ */
+export const SafeZoneTop: (...args: any[]) => object;
+export default SafeZoneTop;

package/package.json

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