@versaur/react 1.0.19 → 1.0.21

package/dist/blocks.d.ts

@@ -960,6 +960,33 @@ declare interface OverlayTitleProps extends HTMLAttributes<HTMLHeadingElement> {
     as?: ElementType;
 }
 
+/**
+ * PageContent component for wrapping main page content
+ *
+ * Container that applies consistent padding matching PageHeader.
+ * Used as a pair with PageHeader for consistent spacing.
+ *
+ * @example
+ * ```tsx
+ * <AppLayout>
+ *   <AppLayout.Main>
+ *     <PageHeader title="Settings" />
+ *     <PageContent>
+ *       <Form>
+ *         <TextInput label="Name" />
+ *       </Form>
+ *     </PageContent>
+ *   </AppLayout.Main>
+ * </AppLayout>
+ * ```
+ */
+export declare const PageContent: ForwardRefExoticComponent<PageContentProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface PageContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Page content to render */
+    children?: ReactNode;
+}
+
 export declare const PageHeader: PageHeaderComponent;
 
 export declare interface PageHeaderComponent extends ForwardRefExoticComponent<PageHeaderRootProps & RefAttributes<HTMLElement>> {

package/dist/blocks.js

@@ -1,33 +1,34 @@
 import { jsxs as b, jsx as o } from "react/jsx-runtime";
-import { accordionStyles as L, avatarGroupStyles as Nt, tabsStyles as z, noResultsStyles as I, attributeListStyles as yt, badgeGroupStyles as ht, cardStyles as O, menuStyles as C, tableStyles as B, buttonGroupStyles as vt, topBarStyles as w, sidebarStyles as g, bottomBarStyles as j, appLayoutStyles as x, formGroupStyles as V, featuresStyles as _, modalStyles as ft, bottomSheetStyles as gt, pageHeaderStyles as A } from "@versaur/core/blocks";
+import { accordionStyles as L, avatarGroupStyles as Nt, tabsStyles as G, noResultsStyles as I, attributeListStyles as yt, badgeGroupStyles as ht, cardStyles as $, menuStyles as C, tableStyles as B, buttonGroupStyles as ft, topBarStyles as w, sidebarStyles as g, bottomBarStyles as j, appLayoutStyles as x, formGroupStyles as E, featuresStyles as _, modalStyles as vt, bottomSheetStyles as gt, pageContentStyles as Tt, pageHeaderStyles as A } from "@versaur/core/blocks";
 import { ChevronDownIcon as q, XIcon as J } from "@versaur/icons";
-import { createContext as F, forwardRef as n, useRef as G, useState as M, useEffect as E, useContext as H, useLayoutEffect as Tt, useId as K } from "react";
-import { u as f, I as Q, B as W } from "./helpers-D23F5WBX.js";
+import { createContext as F, forwardRef as n, useRef as M, useState as z, useEffect as X, useContext as H, useLayoutEffect as St, useId as K } from "react";
+import { u as v, I as Q, B as V } from "./helpers-D23F5WBX.js";
 import { c } from "./cx-B9vmfsc1.js";
-import { e as U, d as R, c as St, H as Bt, T as At } from "./tooltip-60d7mYVa.js";
+import { e as U, d as R, c as Bt, H as At, T as Rt } from "./tooltip-60d7mYVa.js";
+import { u as wt } from "./use-resize-observer-DLkpn8HX.js";
 import { checkboxStyles as k } from "@versaur/core/forms";
 import { a as Y } from "./drawer-BjNHPqBr.js";
-import { D as va } from "./drawer-BjNHPqBr.js";
+import { D as Ta } from "./drawer-BjNHPqBr.js";
 import { overlayPartsStyles as P } from "@versaur/core/utils";
-import { O as Z, b as ee, c as Rt, a as wt } from "./overlay-parts-BtD-Qj_k.js";
+import { O as Z, b as ee, c as xt, a as It } from "./overlay-parts-BtD-Qj_k.js";
 const te = F(void 0);
-function xt() {
+function Lt() {
   const e = H(te);
   if (!e)
     throw new Error("Accordion.Summary must be used within an Accordion component");
   return e;
 }
-function It({ summary: e, open: t, onOpenChange: a, children: s, className: r, ...i }, l) {
-  const [d, u] = M(t ?? !1), m = G(null);
-  E(() => {
+function Ft({ summary: e, open: t, onOpenChange: a, children: s, className: r, ...i }, l) {
+  const [d, u] = z(t ?? !1), m = M(null);
+  X(() => {
     t !== void 0 && u(t);
-  }, [t]), E(() => {
+  }, [t]), X(() => {
     m.current && (m.current.open = d);
   }, [d]);
   const p = () => {
     const h = !d;
     u(h), a == null || a(h);
-  }, y = f({ open: d ? "" : void 0 });
+  }, y = v({ open: d ? "" : void 0 });
   return /* @__PURE__ */ o(te.Provider, { value: { isOpen: d, toggle: p }, children: /* @__PURE__ */ b(
     "details",
     {
@@ -43,11 +44,11 @@ function It({ summary: e, open: t, onOpenChange: a, children: s, className: r, .
     }
   ) });
 }
-const ae = n(It);
+const ae = n(Ft);
 ae.displayName = "Accordion";
 const se = n(
   ({ children: e, right: t, clamp: a = 2, className: s, ...r }, i) => {
-    const { isOpen: l, toggle: d } = xt(), u = G(null), m = (p) => {
+    const { isOpen: l, toggle: d } = Lt(), u = M(null), m = (p) => {
       p.preventDefault(), !(u.current && u.current.contains(p.target)) && d();
     };
     return /* @__PURE__ */ b(
@@ -69,9 +70,9 @@ const se = n(
   }
 );
 se.displayName = "Accordion.Summary";
-const aa = Object.assign(ae, {
+const ra = Object.assign(ae, {
   Summary: se
-}), Lt = n(
+}), Ht = n(
   ({
     direction: e = "horizontal",
     size: t = "md",
@@ -82,7 +83,7 @@ const aa = Object.assign(ae, {
     className: l,
     ...d
   }, u) => {
-    const m = f({ align: a, direction: e, size: t, wrap: s });
+    const m = v({ align: a, direction: e, size: t, wrap: s });
     return /* @__PURE__ */ o(
       "div",
       {
@@ -97,48 +98,38 @@ const aa = Object.assign(ae, {
     );
   }
 );
-Lt.displayName = "AvatarGroup";
-function Ft(e, t) {
-  E(() => {
-    if (!e.current)
-      return;
-    const a = new ResizeObserver(t);
-    return a.observe(e.current), () => {
-      a.disconnect();
-    };
-  }, [e, t]);
-}
+Ht.displayName = "AvatarGroup";
 const oe = F(void 0);
-function Ht() {
+function Pt() {
   const e = H(oe);
   if (!e)
     throw new Error("Tabs.Item must be used within a Tabs component");
   return e;
 }
 const re = n(({ value: e, onChange: t, children: a, className: s }, r) => {
-  const i = G(null), l = G(/* @__PURE__ */ new Map()), [d, u] = M(0), [m, p] = M(0), y = () => {
-    const v = l.current.get(e);
-    if (!v || !i.current)
+  const i = M(null), l = M(/* @__PURE__ */ new Map()), [d, u] = z(0), [m, p] = z(0), y = () => {
+    const f = l.current.get(e);
+    if (!f || !i.current)
       return;
-    const N = i.current.getBoundingClientRect(), S = v.getBoundingClientRect(), $ = S.left - N.left + i.current.scrollLeft, { width: bt } = S;
-    u($), p(bt), v.scrollIntoView({
+    const N = i.current.getBoundingClientRect(), S = f.getBoundingClientRect(), O = S.left - N.left + i.current.scrollLeft, { width: bt } = S;
+    u(O), p(bt), f.scrollIntoView({
       behavior: "smooth",
       block: "nearest",
       inline: "center"
     });
-  }, h = (v, N) => {
-    N && l.current.set(v, N);
+  }, h = (f, N) => {
+    N && l.current.set(f, N);
   };
-  Tt(() => {
+  St(() => {
     y();
-  }, [e]), Ft(i, y);
-  const T = f({});
-  return /* @__PURE__ */ o(oe.Provider, { value: { activeValue: e, onChange: t, registerTrigger: h }, children: /* @__PURE__ */ b("nav", { ref: U(r, i), className: c(z.tabs, s), ...T, children: [
-    /* @__PURE__ */ o("ul", { className: z.tablist, role: "tablist", children: a }),
+  }, [e]), wt(i, y);
+  const T = v({});
+  return /* @__PURE__ */ o(oe.Provider, { value: { activeValue: e, onChange: t, registerTrigger: h }, children: /* @__PURE__ */ b("nav", { ref: U(r, i), className: c(G.tabs, s), ...T, children: [
+    /* @__PURE__ */ o("ul", { className: G.tablist, role: "tablist", children: a }),
     /* @__PURE__ */ o(
       "div",
       {
-        className: z["tabs-thumb"],
+        className: G["tabs-thumb"],
         style: {
           left: `${d}px`,
           width: `${m}px`
@@ -150,20 +141,20 @@ const re = n(({ value: e, onChange: t, children: a, className: s }, r) => {
 re.displayName = "Tabs";
 const ie = n(
   ({ value: e, disabled: t = !1, leftIcon: a, rightIcon: s, children: r, className: i }, l) => {
-    const { activeValue: d, onChange: u, registerTrigger: m } = Ht(), p = d === e;
+    const { activeValue: d, onChange: u, registerTrigger: m } = Pt(), p = d === e;
     let y;
     t ? y = "disabled" : p ? y = "active" : y = "default";
-    const h = !!a, T = !!s, v = !!r;
+    const h = !!a, T = !!s, f = !!r;
     let N;
-    h && T && v ? N = "both-text" : h && v ? N = "left-text" : T && v ? N = "right-text" : h && T ? N = "both" : h ? N = "left" : T && (N = "right");
+    h && T && f ? N = "both-text" : h && f ? N = "left-text" : T && f ? N = "right-text" : h && T ? N = "both" : h ? N = "left" : T && (N = "right");
     const S = () => {
       t || u(e);
     };
-    return /* @__PURE__ */ o("li", { className: z.tabitem, children: /* @__PURE__ */ b(
+    return /* @__PURE__ */ o("li", { className: G.tabitem, children: /* @__PURE__ */ b(
       "button",
       {
-        ref: U(l, ($) => m(e, $)),
-        className: c(z.trigger, i),
+        ref: U(l, (O) => m(e, O)),
+        className: c(G.trigger, i),
         role: "tab",
         id: `tabs-trigger-${e}`,
         "aria-selected": p,
@@ -182,17 +173,17 @@ const ie = n(
   }
 );
 ie.displayName = "Tabs.Item";
-function Pt(e) {
+function Ct(e) {
   return {
     "aria-labelledby": `tabs-trigger-${e}`,
     id: `tabs-panel-${e}`,
     role: "tabpanel"
   };
 }
-const sa = Object.assign(re, {
+const ia = Object.assign(re, {
   Item: ie,
-  getPanelAttribute: Pt
-}), Ct = n(
+  getPanelAttribute: Ct
+}), Gt = n(
   ({ icon: e, title: t, subtitle: a, action: s, className: r, ...i }, l) => /* @__PURE__ */ b(
     "section",
     {
@@ -212,10 +203,10 @@ const sa = Object.assign(re, {
     }
   )
 );
-Ct.displayName = "NoResults";
+Gt.displayName = "NoResults";
 const le = n(
   ({ layout: e, columns: t = "repeat(3, 1fr)", gap: a, children: s, className: r, style: i, ...l }, d) => {
-    const u = f({
+    const u = v({
       layout: e
     });
     return /* @__PURE__ */ o(
@@ -255,9 +246,9 @@ const ne = n(
   )
 );
 ne.displayName = "AttributeList.Item";
-const oa = Object.assign(le, {
+const la = Object.assign(le, {
   Item: ne
-}), zt = n(
+}), Mt = n(
   ({
     gap: e = "md",
     direction: t = "horizontal",
@@ -268,7 +259,7 @@ const oa = Object.assign(le, {
     className: l,
     ...d
   }, u) => {
-    const m = f({
+    const m = v({
       align: a,
       direction: t,
       gap: e,
@@ -288,41 +279,41 @@ const oa = Object.assign(le, {
     );
   }
 );
-zt.displayName = "BadgeGroup";
-function Gt({ as: e = "div", size: t = "md", border: a, children: s, className: r, ...i }, l) {
-  const d = f({
+Mt.displayName = "BadgeGroup";
+function zt({ as: e = "div", size: t = "md", border: a, children: s, className: r, ...i }, l) {
+  const d = v({
     border: a,
     interactive: e === "button" ? "true" : "false",
     size: t
   });
-  return /* @__PURE__ */ o(e === "button" ? "button" : "div", { ref: l, className: c(O.card, r), ...d, ...i, children: s });
+  return /* @__PURE__ */ o(e === "button" ? "button" : "div", { ref: l, className: c($.card, r), ...d, ...i, children: s });
 }
 const ce = n(
-  Gt
+  zt
 );
 ce.displayName = "Card";
 const de = n(
   ({ justify: e, gap: t, children: a, className: s, ...r }, i) => {
-    const l = f({ gap: t, justify: e });
-    return /* @__PURE__ */ o("div", { ref: i, className: c(O.header, s), ...l, ...r, children: a });
+    const l = v({ gap: t, justify: e });
+    return /* @__PURE__ */ o("div", { ref: i, className: c($.header, s), ...l, ...r, children: a });
   }
 );
 de.displayName = "Card.Header";
 const me = n(
   ({ align: e, gap: t, children: a, className: s, ...r }, i) => {
-    const l = f({ align: e, gap: t });
-    return /* @__PURE__ */ o("div", { ref: i, className: c(O.body, s), ...l, ...r, children: a });
+    const l = v({ align: e, gap: t });
+    return /* @__PURE__ */ o("div", { ref: i, className: c($.body, s), ...l, ...r, children: a });
   }
 );
 me.displayName = "Card.Body";
 const ue = n(
   ({ justify: e, gap: t, children: a, className: s, ...r }, i) => {
-    const l = f({ gap: t, justify: e });
-    return /* @__PURE__ */ o("div", { ref: i, className: c(O.footer, s), ...l, ...r, children: a });
+    const l = v({ gap: t, justify: e });
+    return /* @__PURE__ */ o("div", { ref: i, className: c($.footer, s), ...l, ...r, children: a });
   }
 );
 ue.displayName = "Card.Footer";
-const ra = Object.assign(ce, {
+const na = Object.assign(ce, {
   Body: me,
   Footer: ue,
   Header: de
@@ -359,20 +350,20 @@ const ra = Object.assign(ce, {
   }
 );
 be.displayName = "Menu";
-function Mt(e) {
+function jt(e) {
   return R.getTooltipTriggerProps({
     id: e.id
   });
 }
-function jt(e) {
+function Dt(e) {
   R.close(e);
 }
-const X = be;
-X.getTriggerProps = Mt;
-X.close = jt;
+const W = be;
+W.getTriggerProps = jt;
+W.close = Dt;
 const Ne = n(
   ({ value: e, disabled: t = !1, leftIcon: a, rightIcon: s, children: r, onClick: i, className: l, ...d }, u) => {
-    const m = H(pe), p = m != null && m.onChange && e !== void 0 ? m.value === e : !1, y = f({
+    const m = H(pe), p = m != null && m.onChange && e !== void 0 ? m.value === e : !1, y = v({
       active: p,
       disabled: t
     }), h = (T) => {
@@ -401,7 +392,7 @@ const Ne = n(
   }
 );
 Ne.displayName = "Menu.Item";
-const D = X;
+const D = W;
 D.Item = Ne;
 const ye = F(void 0);
 function he() {
@@ -410,7 +401,7 @@ function he() {
     throw new Error("useTableProvider must be used within a Table component");
   return e;
 }
-const ve = n(
+const fe = n(
   ({ leftContent: e, rightContent: t, className: a, ...s }, r) => {
     const i = he(), l = typeof e == "function" ? e(i.selectedRows) : e, d = typeof t == "function" ? t(i.selectedRows) : t;
     return /* @__PURE__ */ b("div", { ref: r, className: c(B.toolbar, a), ...s, children: [
@@ -419,9 +410,9 @@ const ve = n(
     ] });
   }
 );
-ve.displayName = "Table.Toolbar";
-const fe = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: c(B.header, e), ...t }));
-fe.displayName = "Table.Header";
+fe.displayName = "Table.Toolbar";
+const ve = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: c(B.header, e), ...t }));
+ve.displayName = "Table.Header";
 const ge = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: c(B.body, e), ...t }));
 ge.displayName = "Table.Body";
 const Te = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: c(B.footer, e), ...t }));
@@ -430,7 +421,7 @@ const Se = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, c
 Se.displayName = "Table.Row";
 const Be = n(
   ({ as: e = "div", area: t, variant: a, className: s, style: r, ...i }, l) => {
-    const d = f({
+    const d = v({
       variant: a
     });
     return /* @__PURE__ */ o(
@@ -488,7 +479,7 @@ const xe = n(({ icon: e, children: t }, a) => {
   const s = K(), r = D.getTriggerProps({ id: s });
   return /* @__PURE__ */ b("div", { ref: a, className: c(B.action), children: [
     /* @__PURE__ */ o(
-      W,
+      V,
       {
         ...r,
         as: e,
@@ -506,22 +497,22 @@ const xe = n(({ icon: e, children: t }, a) => {
 });
 xe.displayName = "Table.Action";
 const Ie = n(({ columns: e, children: t, className: a, style: s, onSelectionChange: r, ...i }, l) => {
-  const [d, u] = M(/* @__PURE__ */ new Set()), m = G(/* @__PURE__ */ new Set()), p = (v, N) => {
+  const [d, u] = z(/* @__PURE__ */ new Set()), m = M(/* @__PURE__ */ new Set()), p = (f, N) => {
     const S = new Set(d);
-    N ? S.add(v) : S.delete(v), u(S), r == null || r({
+    N ? S.add(f) : S.delete(f), u(S), r == null || r({
       selected: S,
       allSelected: S.size === m.current.size && m.current.size > 0,
       someSelected: S.size > 0
     });
-  }, y = (v, N) => {
-    const S = N ? new Set(v) : /* @__PURE__ */ new Set();
+  }, y = (f, N) => {
+    const S = N ? new Set(f) : /* @__PURE__ */ new Set();
     u(S), r == null || r({
       selected: S,
       allSelected: N,
       someSelected: N
     });
-  }, h = (v) => {
-    m.current.add(v);
+  }, h = (f) => {
+    m.current.add(f);
   }, T = {
     selectedRows: d,
     allRowIds: m.current,
@@ -544,9 +535,9 @@ const Ie = n(({ columns: e, children: t, className: a, style: s, onSelectionChan
   ) });
 });
 Ie.displayName = "Table";
-const ia = Object.assign(Ie, {
-  Toolbar: ve,
-  Header: fe,
+const ca = Object.assign(Ie, {
+  Toolbar: fe,
+  Header: ve,
   Body: ge,
   Footer: Te,
   Row: Se,
@@ -555,7 +546,7 @@ const ia = Object.assign(Ie, {
   DoubleLine: Re,
   Action: xe,
   ActionItem: we
-}), Dt = n(
+}), $t = n(
   ({
     gap: e = "md",
     direction: t = "horizontal",
@@ -567,7 +558,7 @@ const ia = Object.assign(Ie, {
     className: d,
     ...u
   }, m) => {
-    const p = f({
+    const p = v({
       align: a,
       direction: t,
       fluid: r,
@@ -578,7 +569,7 @@ const ia = Object.assign(Ie, {
       "div",
       {
         ref: m,
-        className: c(vt["button-group"], d),
+        className: c(ft["button-group"], d),
         role: "group",
         "aria-label": i,
         ...p,
@@ -588,7 +579,7 @@ const ia = Object.assign(Ie, {
     );
   }
 );
-Dt.displayName = "ButtonGroup";
+$t.displayName = "ButtonGroup";
 const Le = n(({ children: e, className: t, ...a }, s) => /* @__PURE__ */ o("div", { ref: s, className: c(w["top-bar"], t), ...a, children: e }));
 Le.displayName = "TopBar";
 const Fe = n(({ children: e, className: t, ...a }, s) => /* @__PURE__ */ o("div", { ref: s, className: c(w["top-bar-leading"], t), ...a, children: e }));
@@ -614,25 +605,25 @@ const Ce = n(
   )
 );
 Ce.displayName = "TopBar.Item";
-const ze = n(({ children: e, className: t, ...a }, s) => /* @__PURE__ */ o("div", { ref: s, className: c(w["top-bar-list-item"], t), ...a, children: e }));
-ze.displayName = "TopBar.ListItem";
-const la = Object.assign(Le, {
+const Ge = n(({ children: e, className: t, ...a }, s) => /* @__PURE__ */ o("div", { ref: s, className: c(w["top-bar-list-item"], t), ...a, children: e }));
+Ge.displayName = "TopBar.ListItem";
+const da = Object.assign(Le, {
   Centred: He,
   Item: Ce,
   Leading: Fe,
-  ListItem: ze,
+  ListItem: Ge,
   Trailing: Pe
-}), Ge = n(({ children: e, className: t }, a) => /* @__PURE__ */ o("aside", { ref: a, className: c(g.sidebar, t), children: e }));
-Ge.displayName = "Sidebar";
-const Me = n(({ children: e, className: t }, a) => /* @__PURE__ */ o("div", { ref: a, className: c(g["sidebar-header"], t), children: e }));
-Me.displayName = "Sidebar.Header";
+}), Me = n(({ children: e, className: t }, a) => /* @__PURE__ */ o("aside", { ref: a, className: c(g.sidebar, t), children: e }));
+Me.displayName = "Sidebar";
+const ze = n(({ children: e, className: t }, a) => /* @__PURE__ */ o("div", { ref: a, className: c(g["sidebar-header"], t), children: e }));
+ze.displayName = "Sidebar.Header";
 const je = n(({ children: e, className: t }, a) => /* @__PURE__ */ o("div", { ref: a, className: c(g["sidebar-body"], t), children: e }));
 je.displayName = "Sidebar.Body";
 const De = n(({ children: e, className: t }, a) => /* @__PURE__ */ o("div", { ref: a, className: c(g["sidebar-footer"], t), children: e }));
 De.displayName = "Sidebar.Footer";
-const Oe = n(
+const $e = n(
   ({ label: e, icon: t, defaultExpanded: a = !0, isExpanded: s, onExpandedChange: r, children: i, className: l }, d) => {
-    const [u, m] = M(a), p = s !== void 0 ? s : u, y = () => {
+    const [u, m] = z(a), p = s !== void 0 ? s : u, y = () => {
       const h = !p;
       m(h), r == null || r(h);
     };
@@ -654,8 +645,8 @@ const Oe = n(
     );
   }
 );
-Oe.displayName = "Sidebar.Group";
-const $e = n(
+$e.displayName = "Sidebar.Group";
+const Oe = n(
   ({ as: e = "button", active: t, disabled: a, icon: s, action: r, className: i, children: l, ...d }, u) => /* @__PURE__ */ b(
     e,
     {
@@ -673,18 +664,18 @@ const $e = n(
     }
   )
 );
-$e.displayName = "Sidebar.Item";
+Oe.displayName = "Sidebar.Item";
 const ke = n(({ children: e, className: t }, a) => /* @__PURE__ */ o("div", { ref: a, className: c(g["sidebar-item-list"], t), children: e }));
 ke.displayName = "Sidebar.ItemList";
-const _e = n(({ className: e }, t) => /* @__PURE__ */ o("div", { ref: t, className: c(g["sidebar-divider"], e), children: /* @__PURE__ */ o(St, {}) }));
+const _e = n(({ className: e }, t) => /* @__PURE__ */ o("div", { ref: t, className: c(g["sidebar-divider"], e), children: /* @__PURE__ */ o(Bt, {}) }));
 _e.displayName = "Sidebar.Divider";
-const na = Object.assign(Ge, {
+const ma = Object.assign(Me, {
   Body: je,
   Divider: _e,
   Footer: De,
-  Group: Oe,
-  Header: Me,
-  Item: $e,
+  Group: $e,
+  Header: ze,
+  Item: Oe,
   ItemList: ke
 });
 function Ot(e, t) {
@@ -694,7 +685,7 @@ const Ee = n(({ children: e, className: t, ...a }, s) => /* @__PURE__ */ o("nav"
 Ee.displayName = "BottomBar";
 const Ve = n(
   ({ as: e = "button", href: t, active: a = !1, disabled: s = !1, icon: r, children: i, onClick: l, className: d, ...u }, m) => {
-    const p = Ot(e, "a"), y = f({
+    const p = Ot(e, "a"), y = v({
       active: a,
       disabled: s
     }), h = (N) => {
@@ -717,12 +708,12 @@ const Ve = n(
   }
 );
 Ve.displayName = "BottomBar.Item";
-const ca = Object.assign(Ee, {
+const ua = Object.assign(Ee, {
   Item: Ve
 }), We = n(({ className: e, children: t }, a) => /* @__PURE__ */ o("div", { ref: a, className: c(x["app-layout"], e), children: t }));
 We.displayName = "AppLayout";
 const Xe = n(({ centered: e, className: t, children: a }, s) => {
-  const r = f({
+  const r = v({
     centered: e
   });
   return /* @__PURE__ */ o("div", { ref: s, className: c(x["app-layout-body"], t), ...r, children: a });
@@ -738,7 +729,7 @@ const Qe = n(({ className: e, children: t }, a) => /* @__PURE__ */ o("aside", {
 Qe.displayName = "AppLayout.SideRight";
 const Ue = n(({ className: e, children: t }, a) => /* @__PURE__ */ o("footer", { ref: a, className: c(x["app-layout-footer"], e), children: t }));
 Ue.displayName = "AppLayout.Footer";
-const da = Object.assign(We, {
+const pa = Object.assign(We, {
   Body: Xe,
   Footer: Ue,
   Header: qe,
@@ -746,12 +737,12 @@ const da = Object.assign(We, {
   SideLeft: Ke,
   SideRight: Qe
 });
-function $t({ columns: e = "1fr", children: t, className: a, style: s, ...r }, i) {
+function kt({ columns: e = "1fr", children: t, className: a, style: s, ...r }, i) {
   return /* @__PURE__ */ o(
     "form",
     {
       ref: i,
-      className: c(V["form-group"], a),
+      className: c(E["form-group"], a),
       style: {
         "--_columns": e,
         ...s
@@ -761,14 +752,14 @@ function $t({ columns: e = "1fr", children: t, className: a, style: s, ...r }, i
     }
   );
 }
-const Ye = n($t);
+const Ye = n(kt);
 Ye.displayName = "FormGroup";
 const Ze = n(
   ({ area: e, children: t, className: a, style: s, ...r }, i) => /* @__PURE__ */ o(
     "div",
     {
       ref: i,
-      className: c(V.field, a),
+      className: c(E.field, a),
       style: {
         "--_area": e,
         ...s
@@ -779,16 +770,16 @@ const Ze = n(
   )
 );
 Ze.displayName = "FormGroup.Field";
-const et = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("hr", { ref: a, className: c(V.separator, e), ...t }));
+const et = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("hr", { ref: a, className: c(E.separator, e), ...t }));
 et.displayName = "FormGroup.Separator";
-const ma = Object.assign(Ye, {
+const ba = Object.assign(Ye, {
   Field: Ze,
   Separator: et
 });
-function kt({ direction: e = "column", children: t, className: a, ...s }, r) {
+function _t({ direction: e = "column", children: t, className: a, ...s }, r) {
   return /* @__PURE__ */ o("ul", { ref: r, className: c(_.features, a), "data-direction": e, ...s, children: t });
 }
-const tt = n(kt);
+const tt = n(_t);
 tt.displayName = "Features";
 const at = n(
   ({ icon: e, children: t, className: a, "aria-label": s, ...r }, i) => {
@@ -801,23 +792,23 @@ const at = n(
   }
 );
 at.displayName = "Features.Item";
-const _t = Object.assign(tt, {
+const Et = Object.assign(tt, {
   Item: at
-}), ua = _t, st = F(void 0), Et = () => {
+}), Na = Et, st = F(void 0), Vt = () => {
   const e = H(st);
   if (!e)
     throw new Error("Modal subcomponents must be used within Modal");
   return e;
 }, ot = n(
   ({ open: e, onOpenChange: t, size: a, position: s, children: r, className: i, ...l }, d) => {
-    const u = f({ size: a, position: s });
+    const u = v({ size: a, position: s });
     return /* @__PURE__ */ o(st.Provider, { value: { onClose: () => t == null ? void 0 : t(!1) }, children: /* @__PURE__ */ o(
       Y,
       {
         ref: d,
         isOpen: e,
         onOpenChange: t,
-        className: c(e && ft.modal, i),
+        className: c(e && vt.modal, i),
         "data-modal": "",
         ...u,
         ...l,
@@ -828,9 +819,9 @@ const _t = Object.assign(tt, {
 );
 ot.displayName = "Modal";
 const rt = n(({ onClick: e, ...t }, a) => {
-  const { onClose: s } = Et();
+  const { onClose: s } = Vt();
   return /* @__PURE__ */ o(
-    W,
+    V,
     {
       ref: a,
       variant: "ghost",
@@ -864,13 +855,13 @@ const lt = n(
   )
 );
 lt.displayName = "Modal.Footer";
-const pa = Object.assign(ot, {
+const ya = Object.assign(ot, {
   Body: ee,
   CloseButton: rt,
   Footer: lt,
   Header: it,
   Title: Z
-}), nt = F(void 0), Vt = () => {
+}), nt = F(void 0), Wt = () => {
   const e = H(nt);
   if (!e)
     throw new Error("BottomSheet subcomponents must be used within BottomSheet");
@@ -891,9 +882,9 @@ const pa = Object.assign(ot, {
 ct.displayName = "BottomSheet";
 const dt = n(
   ({ onClick: e, ...t }, a) => {
-    const { onClose: s } = Vt();
+    const { onClose: s } = Wt();
     return /* @__PURE__ */ o(
-      W,
+      V,
       {
         as: J,
         ref: a,
@@ -909,13 +900,17 @@ const dt = n(
   }
 );
 dt.displayName = "BottomSheet.CloseButton";
-const ba = Object.assign(ct, {
+const ha = Object.assign(ct, {
   Body: ee,
   CloseButton: dt,
-  Footer: wt,
-  Header: Rt,
+  Footer: It,
+  Header: xt,
   Title: Z
-}), mt = n(
+}), Xt = n(
+  ({ children: e, className: t, ...a }, s) => /* @__PURE__ */ o("div", { ref: s, className: c(Tt.content, t), ...a, children: e })
+);
+Xt.displayName = "PageContent";
+const mt = n(
   ({ title: e, subtitle: t, supplementary: a, className: s, ...r }, i) => /* @__PURE__ */ b("header", { ref: i, className: c(A.header, s), ...r, children: [
     e,
     t,
@@ -925,12 +920,12 @@ const ba = Object.assign(ct, {
 mt.displayName = "PageHeader";
 const ut = n(
   ({ action: e, additionalInfo: t, className: a, children: s, ...r }, i) => {
-    const l = f({
+    const l = v({
       action: e ? "true" : "false",
       "additional-info": t ? "true" : "false"
     });
     return /* @__PURE__ */ b("div", { ref: i, className: c(A.title, a), ...l, ...r, children: [
-      /* @__PURE__ */ o("div", { className: A["title-inner"], children: /* @__PURE__ */ o(Bt, { as: "h1", size: "xl", weight: "bold", intent: "default", className: A.heading, children: s }) }),
+      /* @__PURE__ */ o("div", { className: A["title-inner"], children: /* @__PURE__ */ o(At, { as: "h1", size: "xl", weight: "bold", intent: "default", className: A.heading, children: s }) }),
       (e || t) && /* @__PURE__ */ b("div", { className: A["title-right"], children: [
         t && /* @__PURE__ */ o("div", { className: A["additional-info"], children: t }),
         e && /* @__PURE__ */ o("div", { className: A.action, children: e })
@@ -941,35 +936,36 @@ const ut = n(
 ut.displayName = "PageHeader.Title";
 const pt = n(
   ({ additionalInfo: e, className: t, children: a, ...s }, r) => /* @__PURE__ */ b("div", { ref: r, className: c(A.subtitle, t), ...s, children: [
-    /* @__PURE__ */ o(At, { as: "p", size: "base", weight: "normal", intent: "default", className: A["subtitle-text"], children: a }),
+    /* @__PURE__ */ o(Rt, { as: "p", size: "base", weight: "normal", intent: "default", className: A["subtitle-text"], children: a }),
     e && /* @__PURE__ */ o("div", { className: A["subtitle-additional-info"], children: e })
   ] })
 );
 pt.displayName = "PageHeader.Subtitle";
-const Na = Object.assign(mt, {
+const fa = Object.assign(mt, {
   Title: ut,
   Subtitle: pt
 });
 export {
-  aa as Accordion,
-  da as AppLayout,
-  oa as AttributeList,
-  Lt as AvatarGroup,
-  zt as BadgeGroup,
-  ca as BottomBar,
-  ba as BottomSheet,
-  Dt as ButtonGroup,
-  ra as Card,
+  ra as Accordion,
+  pa as AppLayout,
+  la as AttributeList,
+  Ht as AvatarGroup,
+  Mt as BadgeGroup,
+  ua as BottomBar,
+  ha as BottomSheet,
+  $t as ButtonGroup,
+  na as Card,
   Y as Dialog,
-  va as Drawer,
-  ua as Features,
-  ma as FormGroup,
+  Ta as Drawer,
+  Na as Features,
+  ba as FormGroup,
   D as Menu,
-  pa as Modal,
-  Ct as NoResults,
-  Na as PageHeader,
-  na as Sidebar,
-  ia as Table,
-  sa as Tabs,
-  la as TopBar
+  ya as Modal,
+  Gt as NoResults,
+  Xt as PageContent,
+  fa as PageHeader,
+  ma as Sidebar,
+  ca as Table,
+  ia as Tabs,
+  da as TopBar
 };

package/dist/hooks.d.ts

@@ -0,0 +1,89 @@
+import { RefObject } from 'react';
+
+/**
+ * Hook to detect if viewport is at desktop breakpoint (exclusive)
+ * Returns true only if viewport width is 1024px or greater
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const isDesktop = useDesktopBreakpoint();
+ *   return <div>{isDesktop ? "Desktop view" : "Smaller view"}</div>;
+ * }
+ * ```
+ */
+export declare function useDesktopBreakpoint(): boolean;
+
+/**
+ * Hook to detect if viewport is at mobile breakpoint (exclusive)
+ * Returns true only if viewport width is less than 640px
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const isMobile = useMobileBreakpoint();
+ *   return <div>{isMobile ? "Mobile view" : "Larger view"}</div>;
+ * }
+ * ```
+ */
+export declare function useMobileBreakpoint(): boolean;
+
+/**
+ * Hook to detect if viewport is mobile or tablet (combined)
+ * Returns true if viewport width is less than 1024px
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const isSmall = useMobileOrTabletBreakpoint();
+ *   return <div>{isSmall ? "Small screen" : "Large screen"}</div>;
+ * }
+ * ```
+ */
+export declare function useMobileOrTabletBreakpoint(): boolean;
+
+/**
+ * Hook for observing resize events on a DOM element
+ *
+ * @param ref - React ref to the element to observe
+ * @param callback - Function to call when element is resized
+ *
+ * @example
+ * ```tsx
+ * const containerRef = useRef<HTMLDivElement>(null);
+ * useResizeObserver(containerRef, () => {
+ *   console.log("Container resized!");
+ * });
+ * ```
+ */
+export declare function useResizeObserver(ref: RefObject<HTMLElement>, callback: () => void): void;
+
+/**
+ * Hook to detect if viewport is at tablet breakpoint (exclusive)
+ * Returns true only if viewport width is 640px to 1023px (not mobile, not desktop)
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const isTablet = useTabletBreakpoint();
+ *   return <div>{isTablet ? "Tablet-only view" : "Other view"}</div>;
+ * }
+ * ```
+ */
+export declare function useTabletBreakpoint(): boolean;
+
+/**
+ * Hook to detect if viewport is tablet or desktop (combined)
+ * Returns true if viewport width is 640px or greater
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const isLarge = useTabletOrDesktopBreakpoint();
+ *   return <div>{isLarge ? "Large screen" : "Mobile"}</div>;
+ * }
+ * ```
+ */
+export declare function useTabletOrDesktopBreakpoint(): boolean;
+
+export { }

package/dist/hooks.js

@@ -0,0 +1,10 @@
+import { u as a, a as o, b as r, c as t, d as p } from "./use-breakpoints-DGKHJ-Jb.js";
+import { u } from "./use-resize-observer-DLkpn8HX.js";
+export {
+  a as useDesktopBreakpoint,
+  o as useMobileBreakpoint,
+  r as useMobileOrTabletBreakpoint,
+  u as useResizeObserver,
+  t as useTabletBreakpoint,
+  p as useTabletOrDesktopBreakpoint
+};

package/dist/use-breakpoints-DGKHJ-Jb.js

@@ -0,0 +1,44 @@
+import { useState as p, useEffect as c } from "react";
+import { getBreakpointPx as e } from "@versaur/core/utils";
+function n(t) {
+  const [a, i] = p(!1);
+  return c(() => {
+    const o = window.matchMedia(t);
+    i(o.matches);
+    const r = (s) => {
+      i(s.matches);
+    };
+    return o.addEventListener("change", r), () => {
+      o.removeEventListener("change", r);
+    };
+  }, [t]), a;
+}
+function l() {
+  const t = e("mobile");
+  return n(`(max-width: ${parseInt(t) - 1}px)`);
+}
+function b() {
+  const t = e("mobile"), a = e("tablet");
+  return n(
+    `(min-width: ${parseInt(t)}px) and (max-width: ${parseInt(a) - 1}px)`
+  );
+}
+function h() {
+  const t = e("tablet");
+  return n(`(min-width: ${parseInt(t)}px)`);
+}
+function d() {
+  const t = e("tablet");
+  return n(`(max-width: ${parseInt(t) - 1}px)`);
+}
+function k() {
+  const t = e("mobile");
+  return n(`(min-width: ${parseInt(t)}px)`);
+}
+export {
+  l as a,
+  d as b,
+  b as c,
+  k as d,
+  h as u
+};

package/dist/use-resize-observer-DLkpn8HX.js

@@ -0,0 +1,14 @@
+import { useEffect as n } from "react";
+function u(e, r) {
+  n(() => {
+    if (!e.current)
+      return;
+    const s = new ResizeObserver(r);
+    return s.observe(e.current), () => {
+      s.disconnect();
+    };
+  }, [e, r]);
+}
+export {
+  u
+};

package/dist/utils.js

@@ -1,64 +1,28 @@
-import { b as v, a as S, c as g, O as D } from "./overlay-parts-BtD-Qj_k.js";
-import { useState as l, useEffect as c } from "react";
-import { getBreakpointPx as n } from "@versaur/core/utils";
-function r(e) {
-  const [t, a] = l(!1);
-  return c(() => {
-    const o = window.matchMedia(e);
-    a(o.matches);
-    const i = (s) => {
-      a(s.matches);
-    };
-    return o.addEventListener("change", i), () => {
-      o.removeEventListener("change", i);
-    };
-  }, [e]), t;
+import { b as O, a as T, c as f, O as D } from "./overlay-parts-BtD-Qj_k.js";
+import { a as r, c as o, u as n, b as a, d as s } from "./use-breakpoints-DGKHJ-Jb.js";
+function l({ children: e }) {
+  return r() ? e : null;
 }
-function p() {
-  const e = n("mobile");
-  return r(`(max-width: ${parseInt(e) - 1}px)`);
+function u({ children: e }) {
+  return o() ? e : null;
 }
-function u() {
-  const e = n("mobile"), t = n("tablet");
-  return r(
-    `(min-width: ${parseInt(e)}px) and (max-width: ${parseInt(t) - 1}px)`
-  );
+function p({ children: e }) {
+  return n() ? e : null;
 }
-function b() {
-  const e = n("tablet");
-  return r(`(min-width: ${parseInt(e)}px)`);
+function b({ children: e }) {
+  return a() ? e : null;
 }
-function m() {
-  const e = n("tablet");
-  return r(`(max-width: ${parseInt(e) - 1}px)`);
-}
-function k() {
-  const e = n("mobile");
-  return r(`(min-width: ${parseInt(e)}px)`);
-}
-function h({ children: e }) {
-  return p() ? e : null;
-}
-function d({ children: e }) {
-  return u() ? e : null;
-}
-function x({ children: e }) {
-  return b() ? e : null;
-}
-function M({ children: e }) {
-  return m() ? e : null;
-}
-function O({ children: e }) {
-  return k() ? e : null;
+function c({ children: e }) {
+  return s() ? e : null;
 }
 export {
-  x as DesktopBreakpoint,
-  h as MobileBreakpoint,
-  M as MobileOrTabletBreakpoint,
-  v as OverlayBody,
-  S as OverlayFooter,
-  g as OverlayHeader,
+  p as DesktopBreakpoint,
+  l as MobileBreakpoint,
+  b as MobileOrTabletBreakpoint,
+  O as OverlayBody,
+  T as OverlayFooter,
+  f as OverlayHeader,
   D as OverlayTitle,
-  d as TabletBreakpoint,
-  O as TabletOrDesktopBreakpoint
+  u as TabletBreakpoint,
+  c as TabletOrDesktopBreakpoint
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@versaur/react",
-  "version": "1.0.19",
+  "version": "1.0.21",
   "description": "React components for Versaur Design System",
   "repository": {
     "type": "git",
@@ -30,6 +30,11 @@
       "types": "./dist/utils/index.d.ts",
       "source": "./src/components/utils/index.ts",
       "import": "./dist/utils.js"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "source": "./src/hooks/index.ts",
+      "import": "./dist/hooks.js"
     }
   },
   "publishConfig": {
@@ -49,8 +54,8 @@
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@versaur/core": "0.0.14",
-    "@versaur/icons": "1.0.0"
+    "@versaur/core": "0.0.16",
+    "@versaur/icons": "1.0.1"
   },
   "scripts": {
     "build": "vite build",