@versaur/react 1.0.11 → 1.0.12

package/dist/blocks.d.ts

@@ -1208,7 +1208,33 @@ declare const TableCheckbox: ForwardRefExoticComponent<TableCheckboxProps & RefA
 /**
  * Table.Checkbox - built-in checkbox for row selection
  */
-export declare interface TableCheckboxProps {
+export declare type TableCheckboxProps = {
+    /**
+     * Whether this is the select-all checkbox in the header
+     */
+    isMain: true;
+    /**
+     * Unique row identifier (not needed for main checkbox)
+     */
+    rowId?: never;
+    /**
+     * Whether checkbox is checked (optional - managed by Table context)
+     */
+    checked?: boolean;
+    /**
+     * Indeterminate state (e.g., for select-all checkbox)
+     */
+    indeterminate?: boolean;
+    /**
+     * Callback when checkbox state changes (optional - managed by Table context)
+     */
+    onChange?: (checked: boolean) => void;
+} | {
+    /**
+     * Whether this is the select-all checkbox in the header
+     * @default false
+     */
+    isMain?: false;
     /**
      * Unique row identifier
      */
@@ -1218,14 +1244,14 @@ export declare interface TableCheckboxProps {
      */
     checked?: boolean;
     /**
-     * Indeterminate state (e.g., for parent checkbox)
+     * Indeterminate state (e.g., for select-all checkbox)
      */
     indeterminate?: boolean;
     /**
      * Callback when checkbox state changes (optional - managed by Table context)
      */
     onChange?: (checked: boolean) => void;
-}
+};
 
 /**
  * TableCol - polymorphic cell with grid area support
@@ -1324,18 +1350,22 @@ declare interface TableSelectionData {
 }
 
 /**
- * TableToolbar - renders toolbar content with optional render function receiving selected row IDs
+ * TableToolbar - renders toolbar content with optional render functions for left and right slots
  */
 declare const TableToolbar: ForwardRefExoticComponent<TableToolbarProps & RefAttributes<HTMLDivElement>>;
 
 /**
- * Table.Toolbar - generic slot for action controls with optional render function
+ * Table.Toolbar - generic slot for action controls with optional render functions
  */
 export declare interface TableToolbarProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     /**
-     * Render function receives selected row IDs Set, or regular children
+     * Render function for left-aligned content (receives selected row IDs Set)
+     */
+    leftContent?: ReactNode | ((selectedIds: Set<string | number>) => ReactNode);
+    /**
+     * Render function for right-aligned content (receives selected row IDs Set)
      */
-    children?: ReactNode | ((selectedIds: Set<string | number>) => ReactNode);
+    rightContent?: ReactNode | ((selectedIds: Set<string | number>) => ReactNode);
 }
 
 /**

package/dist/blocks.js

@@ -15,7 +15,7 @@ function Gt() {
     throw new Error("Accordion.Summary must be used within an Accordion component");
   return e;
 }
-function Pt({ summary: e, open: t, onOpenChange: a, children: s, className: r, ...l }, i) {
+function Pt({ summary: e, open: t, onOpenChange: a, children: s, className: r, ...i }, l) {
   const [m, u] = P(t ?? !1), c = M(null);
   z(() => {
     t !== void 0 && u(t);
@@ -29,11 +29,11 @@ function Pt({ summary: e, open: t, onOpenChange: a, children: s, className: r, .
   return /* @__PURE__ */ o(ae.Provider, { value: { isOpen: m, toggle: p }, children: /* @__PURE__ */ y(
     "details",
     {
-      ref: i || c,
+      ref: l || c,
       className: d(D.item, r),
       open: m,
       ...N,
-      ...l,
+      ...i,
       children: [
         e,
         /* @__PURE__ */ o("div", { className: D.content, children: s })
@@ -44,18 +44,18 @@ function Pt({ summary: e, open: t, onOpenChange: a, children: s, className: r, .
 const se = n(Pt);
 se.displayName = "Accordion";
 const oe = n(
-  ({ children: e, right: t, clamp: a = 2, className: s, ...r }, l) => {
-    const { isOpen: i, toggle: m } = Gt(), u = M(null), c = (p) => {
+  ({ children: e, right: t, clamp: a = 2, className: s, ...r }, i) => {
+    const { isOpen: l, toggle: m } = Gt(), u = M(null), c = (p) => {
       p.preventDefault(), !(u.current && u.current.contains(p.target)) && m();
     };
     return /* @__PURE__ */ y(
       "summary",
       {
-        ref: l,
+        ref: i,
         className: d(D.trigger, s),
         onClick: c,
         role: "button",
-        "aria-expanded": i,
+        "aria-expanded": l,
         ...r,
         children: [
           /* @__PURE__ */ o("span", { className: D.label, style: { "--_clamp": a }, children: e }),
@@ -76,8 +76,8 @@ const na = Object.assign(se, {
     align: a = "center",
     wrap: s = "nowrap",
     "aria-label": r = "Avatar group",
-    children: l,
-    className: i,
+    children: i,
+    className: l,
     ...m
   }, u) => {
     const c = v({ align: a, direction: e, size: t, wrap: s });
@@ -85,12 +85,12 @@ const na = Object.assign(se, {
       "div",
       {
         ref: u,
-        className: d(St["avatar-group"], i),
+        className: d(St["avatar-group"], l),
         role: "group",
         "aria-label": r,
         ...c,
         ...m,
-        children: l
+        children: i
       }
     );
   }
@@ -113,25 +113,25 @@ function $t() {
     throw new Error("Tabs.Item must be used within a Tabs component");
   return e;
 }
-const le = n(({ value: e, onChange: t, children: a, className: s }, r) => {
-  const l = M(null), i = M(/* @__PURE__ */ new Map()), [m, u] = P(0), [c, p] = P(0), N = () => {
-    const f = i.current.get(e);
-    if (!f || !l.current)
+const ie = n(({ value: e, onChange: t, children: a, className: s }, r) => {
+  const i = M(null), l = M(/* @__PURE__ */ new Map()), [m, u] = P(0), [c, p] = P(0), N = () => {
+    const f = l.current.get(e);
+    if (!f || !i.current)
       return;
-    const h = l.current.getBoundingClientRect(), g = f.getBoundingClientRect(), ht = g.left - h.left + l.current.scrollLeft, { width: gt } = g;
+    const h = i.current.getBoundingClientRect(), g = f.getBoundingClientRect(), ht = g.left - h.left + i.current.scrollLeft, { width: gt } = g;
     u(ht), p(gt), f.scrollIntoView({
       behavior: "smooth",
       block: "nearest",
       inline: "center"
     });
   }, b = (f, h) => {
-    h && i.current.set(f, h);
+    h && l.current.set(f, h);
   };
   Ft(() => {
     N();
-  }, [e]), jt(l, N);
+  }, [e]), jt(i, N);
   const S = v({});
-  return /* @__PURE__ */ o(re.Provider, { value: { activeValue: e, onChange: t, registerTrigger: b }, children: /* @__PURE__ */ y("nav", { ref: ee(r, l), className: d(G.tabs, s), ...S, children: [
+  return /* @__PURE__ */ o(re.Provider, { value: { activeValue: e, onChange: t, registerTrigger: b }, children: /* @__PURE__ */ y("nav", { ref: ee(r, i), className: d(G.tabs, s), ...S, children: [
     /* @__PURE__ */ o("ul", { className: G.tablist, role: "tablist", children: a }),
     /* @__PURE__ */ o(
       "div",
@@ -145,14 +145,14 @@ const le = n(({ value: e, onChange: t, children: a, className: s }, r) => {
     )
   ] }) });
 });
-le.displayName = "Tabs";
-const ie = n(
+ie.displayName = "Tabs";
+const le = n(
   ({ value: e, disabled: t = !1, children: a, className: s }, r) => {
-    const { activeValue: l, onChange: i, registerTrigger: m } = $t(), u = l === e;
+    const { activeValue: i, onChange: l, registerTrigger: m } = $t(), u = i === e;
     let c;
     t ? c = "disabled" : u ? c = "active" : c = "default";
     const p = () => {
-      t || i(e);
+      t || l(e);
     };
     return /* @__PURE__ */ o("li", { className: G.tabitem, children: /* @__PURE__ */ o(
       "button",
@@ -171,7 +171,7 @@ const ie = n(
     ) });
   }
 );
-ie.displayName = "Tabs.Item";
+le.displayName = "Tabs.Item";
 function Et(e) {
   return {
     "aria-labelledby": `tabs-trigger-${e}`,
@@ -179,18 +179,18 @@ function Et(e) {
     role: "tabpanel"
   };
 }
-const da = Object.assign(le, {
-  Item: ie,
+const da = Object.assign(ie, {
+  Item: le,
   getPanelAttribute: Et
 }), _t = n(
-  ({ icon: e, title: t, subtitle: a, action: s, className: r, ...l }, i) => /* @__PURE__ */ y(
+  ({ icon: e, title: t, subtitle: a, action: s, className: r, ...i }, l) => /* @__PURE__ */ y(
     "section",
     {
-      ref: i,
+      ref: l,
       className: d(F["no-results"], r),
       role: "status",
       "aria-label": t,
-      ...l,
+      ...i,
       children: [
         /* @__PURE__ */ y("header", { className: F["no-results-header"], children: [
           /* @__PURE__ */ o("div", { className: F["no-results-icon"], children: /* @__PURE__ */ o(E, { as: e, color: "inherit", "aria-hidden": "true" }) }),
@@ -204,7 +204,7 @@ const da = Object.assign(le, {
 );
 _t.displayName = "NoResults";
 const ce = n(
-  ({ layout: e, columns: t = "repeat(3, 1fr)", gap: a, children: s, className: r, style: l, ...i }, m) => {
+  ({ layout: e, columns: t = "repeat(3, 1fr)", gap: a, children: s, className: r, style: i, ...l }, m) => {
     const u = v({
       layout: e
     });
@@ -217,9 +217,9 @@ const ce = n(
         style: {
           "--_columns": t,
           ...a !== void 0 && { "--_gap": typeof a == "number" ? `${a}px` : a },
-          ...l
+          ...i
         },
-        ...i,
+        ...l,
         children: s
       }
     );
@@ -227,16 +227,16 @@ const ce = n(
 );
 ce.displayName = "AttributeList";
 const ne = n(
-  ({ title: e, area: t, children: a, className: s, style: r, ...l }, i) => /* @__PURE__ */ y(
+  ({ title: e, area: t, children: a, className: s, style: r, ...i }, l) => /* @__PURE__ */ y(
     "div",
     {
-      ref: i,
+      ref: l,
       className: d(s),
       style: {
         "--_area": t,
         ...r
       },
-      ...l,
+      ...i,
       children: [
         /* @__PURE__ */ o("dt", { children: e }),
         /* @__PURE__ */ o("dd", { children: a })
@@ -254,8 +254,8 @@ const ma = Object.assign(ce, {
     align: a = "center",
     wrap: s = "nowrap",
     "aria-label": r = "Badge group",
-    children: l,
-    className: i,
+    children: i,
+    className: l,
     ...m
   }, u) => {
     const c = v({
@@ -268,47 +268,47 @@ const ma = Object.assign(ce, {
       "div",
       {
         ref: u,
-        className: d(Bt["badge-group"], i),
+        className: d(Bt["badge-group"], l),
         role: "group",
         "aria-label": r,
         ...c,
         ...m,
-        children: l
+        children: i
       }
     );
   }
 );
 Ct.displayName = "BadgeGroup";
-function Vt({ as: e = "div", size: t = "md", border: a, children: s, className: r, ...l }, i) {
+function Vt({ as: e = "div", size: t = "md", border: a, children: s, className: r, ...i }, l) {
   const m = v({
     border: a,
     interactive: e === "button" ? "true" : "false",
     size: t
   });
-  return /* @__PURE__ */ o(e === "button" ? "button" : "div", { ref: i, className: d(C.card, r), ...m, ...l, children: s });
+  return /* @__PURE__ */ o(e === "button" ? "button" : "div", { ref: l, className: d(C.card, r), ...m, ...i, children: s });
 }
 const de = n(
   Vt
 );
 de.displayName = "Card";
 const me = n(
-  ({ justify: e, gap: t, children: a, className: s, ...r }, l) => {
-    const i = v({ gap: t, justify: e });
-    return /* @__PURE__ */ o("div", { ref: l, className: d(C.header, s), ...i, ...r, children: a });
+  ({ justify: e, gap: t, children: a, className: s, ...r }, i) => {
+    const l = v({ gap: t, justify: e });
+    return /* @__PURE__ */ o("div", { ref: i, className: d(C.header, s), ...l, ...r, children: a });
   }
 );
 me.displayName = "Card.Header";
 const ue = n(
-  ({ align: e, gap: t, children: a, className: s, ...r }, l) => {
-    const i = v({ align: e, gap: t });
-    return /* @__PURE__ */ o("div", { ref: l, className: d(C.body, s), ...i, ...r, children: a });
+  ({ align: e, gap: t, children: a, className: s, ...r }, i) => {
+    const l = v({ align: e, gap: t });
+    return /* @__PURE__ */ o("div", { ref: i, className: d(C.body, s), ...l, ...r, children: a });
   }
 );
 ue.displayName = "Card.Body";
 const pe = n(
-  ({ justify: e, gap: t, children: a, className: s, ...r }, l) => {
-    const i = v({ gap: t, justify: e });
-    return /* @__PURE__ */ o("div", { ref: l, className: d(C.footer, s), ...i, ...r, children: a });
+  ({ justify: e, gap: t, children: a, className: s, ...r }, i) => {
+    const l = v({ gap: t, justify: e });
+    return /* @__PURE__ */ o("div", { ref: i, className: d(C.footer, s), ...l, ...r, children: a });
   }
 );
 pe.displayName = "Card.Footer";
@@ -323,8 +323,8 @@ const ua = Object.assign(de, {
     maxHeight: a = 400,
     minWidth: s = 160,
     maxWidth: r = 320,
-    gap: l = 8,
-    value: i,
+    gap: i = 8,
+    value: l,
     onChange: m,
     closeOnClick: u = !1,
     children: c,
@@ -334,9 +334,9 @@ const ua = Object.assign(de, {
       id: e,
       closeOnClick: u,
       onChange: m,
-      value: i
+      value: l
     };
-    return /* @__PURE__ */ o("div", { ref: N, ...p, children: /* @__PURE__ */ o(be.Provider, { value: b, children: /* @__PURE__ */ o(I, { id: e, placement: t, gap: l, triggerType: "focus", children: /* @__PURE__ */ o(
+    return /* @__PURE__ */ o("div", { ref: N, ...p, children: /* @__PURE__ */ o(be.Provider, { value: b, children: /* @__PURE__ */ o(I, { id: e, placement: t, gap: i, triggerType: "focus", children: /* @__PURE__ */ o(
       "div",
       {
         className: H["menu-list"],
@@ -363,7 +363,7 @@ const Q = Ne;
 Q.getTriggerProps = kt;
 Q.close = Wt;
 const ye = n(
-  ({ value: e, disabled: t = !1, leftIcon: a, rightIcon: s, children: r, onClick: l, className: i, ...m }, u) => {
+  ({ value: e, disabled: t = !1, leftIcon: a, rightIcon: s, children: r, onClick: i, className: l, ...m }, u) => {
     const c = R(be), p = c != null && c.onChange && e !== void 0 ? c.value === e : !1, N = v({
       active: p,
       disabled: t
@@ -372,13 +372,13 @@ const ye = n(
         S.preventDefault();
         return;
       }
-      c != null && c.onChange && e !== void 0 && c.onChange(e), l == null || l(S), c != null && c.closeOnClick && (c != null && c.id) && I.close({ id: c.id });
+      c != null && c.onChange && e !== void 0 && c.onChange(e), i == null || i(S), c != null && c.closeOnClick && (c != null && c.id) && I.close({ id: c.id });
     };
     return /* @__PURE__ */ y(
       "button",
       {
         ref: u,
-        className: d(H["menu-item"], i),
+        className: d(H["menu-item"], l),
         disabled: t,
         ...N,
         ...m,
@@ -402,10 +402,15 @@ function fe() {
     throw new Error("useTableProvider must be used within a Table component");
   return e;
 }
-const he = n(({ children: e, className: t, ...a }, s) => {
-  const r = fe(), l = typeof e == "function" ? e(r.selectedRows) : e;
-  return /* @__PURE__ */ o("div", { ref: s, className: d(B.toolbar, t), ...a, children: l });
-});
+const he = n(
+  ({ leftContent: e, rightContent: t, className: a, ...s }, r) => {
+    const i = fe(), l = typeof e == "function" ? e(i.selectedRows) : e, m = typeof t == "function" ? t(i.selectedRows) : t;
+    return /* @__PURE__ */ y("div", { ref: r, className: d(B.toolbar, a), ...s, children: [
+      /* @__PURE__ */ o("div", { children: l }),
+      /* @__PURE__ */ o("div", { children: m })
+    ] });
+  }
+);
 he.displayName = "Table.Toolbar";
 const ge = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: d(B.header, e), ...t }));
 ge.displayName = "Table.Header";
@@ -416,45 +421,45 @@ Se.displayName = "Table.Footer";
 const we = n(({ className: e, ...t }, a) => /* @__PURE__ */ o("div", { ref: a, className: d(B.row, e), ...t }));
 we.displayName = "Table.Row";
 const Be = n(
-  ({ as: e = "div", area: t, variant: a, className: s, style: r, ...l }, i) => {
+  ({ as: e = "div", area: t, variant: a, className: s, style: r, ...i }, l) => {
     const m = v({
       variant: a
     });
     return /* @__PURE__ */ o(
       e,
       {
-        ref: i,
+        ref: l,
         className: d(B.col, s),
         style: {
           "--_area": t,
           ...r
         },
         ...m,
-        ...l
+        ...i
       }
     );
   }
 );
 Be.displayName = "Table.Col";
 const Ae = n(
-  ({ rowId: e, checked: t, indeterminate: a, onChange: s }, r) => {
-    const l = fe(), i = e === "select-all", m = i ? l.selectedRows.size === l.allRowIds.size && l.allRowIds.size > 0 : l.selectedRows.has(e);
-    !i && e && l.registerRowId(e);
+  ({ rowId: e, isMain: t = !1, checked: a, indeterminate: s, onChange: r }, i) => {
+    const l = fe(), m = t ? l.selectedRows.size === l.allRowIds.size && l.allRowIds.size > 0 : e !== void 0 && l.selectedRows.has(e);
+    !t && e !== void 0 && l.registerRowId(e);
     const u = (p) => {
-      i ? l.onSelectAll(Array.from(l.allRowIds), p.target.checked) : l.onSelectionChange(e, p.target.checked), s == null || s(p.target.checked);
-    }, c = i && l.selectedRows.size > 0 && l.selectedRows.size < l.allRowIds.size;
+      t ? l.onSelectAll(Array.from(l.allRowIds), p.target.checked) : e !== void 0 && l.onSelectionChange(e, p.target.checked), r == null || r(p.target.checked);
+    }, c = t && l.selectedRows.size > 0 && l.selectedRows.size < l.allRowIds.size;
     return /* @__PURE__ */ y("label", { className: k.checkbox, children: [
       /* @__PURE__ */ o(
         "input",
         {
           ref: (p) => {
-            p && (p.indeterminate = c || a || !1, typeof r == "function" ? r(p) : r && (r.current = p));
+            p && (p.indeterminate = c || s || !1, typeof i == "function" ? i(p) : i && (i.current = p));
           },
           type: "checkbox",
           className: k.input,
-          checked: t !== void 0 ? t : m,
+          checked: a !== void 0 ? a : m,
           onChange: u,
-          "aria-label": i ? "Select all rows" : `Select row ${e}`
+          "aria-label": t ? "Select all rows" : `Select row ${e}`
         }
       ),
       /* @__PURE__ */ o("span", { className: k.indicator })
@@ -463,7 +468,7 @@ const Ae = n(
 );
 Ae.displayName = "Table.Checkbox";
 const Re = n(
-  ({ as: e = "div", title: t, subtitle: a, size: s = "md", className: r, ...l }, i) => /* @__PURE__ */ y(e, { ref: i, className: d(B.col, r), "data-variant": "double-line", ...l, children: [
+  ({ as: e = "div", title: t, subtitle: a, size: s = "md", className: r, ...i }, l) => /* @__PURE__ */ y(e, { ref: l, className: d(B.col, r), "data-variant": "double-line", ...i, children: [
     /* @__PURE__ */ o("div", { className: B["double-line-title"], "data-size": s, children: t }),
     /* @__PURE__ */ o("div", { className: B["double-line-subtitle"], "data-size": s, children: a })
   ] })
@@ -482,8 +487,8 @@ const Le = n(({ icon: e, children: t }, a) => {
         variant: "ghost",
         className: d(B["action-trigger"]),
         "aria-label": "Actions",
-        onClick: (l) => {
-          l.stopPropagation();
+        onClick: (i) => {
+          i.stopPropagation();
         },
         size: "small"
       }
@@ -492,7 +497,7 @@ const Le = n(({ icon: e, children: t }, a) => {
   ] });
 });
 Le.displayName = "Table.Action";
-const xe = n(({ columns: e, children: t, className: a, style: s, onSelectionChange: r, ...l }, i) => {
+const xe = n(({ columns: e, children: t, className: a, style: s, onSelectionChange: r, ...i }, l) => {
   const [m, u] = P(/* @__PURE__ */ new Set()), c = M(/* @__PURE__ */ new Set()), p = (f, h) => {
     const g = new Set(m);
     h ? g.add(f) : g.delete(f), u(g), r == null || r({
@@ -519,13 +524,13 @@ const xe = n(({ columns: e, children: t, className: a, style: s, onSelectionChan
   return /* @__PURE__ */ o(ve.Provider, { value: S, children: /* @__PURE__ */ o(
     "div",
     {
-      ref: i,
+      ref: l,
       className: d(B.table, a),
       style: {
         "--_columns": e,
         ...s
       },
-      ...l,
+      ...i,
       children: t
     }
   ) });
@@ -549,8 +554,8 @@ const pa = Object.assign(xe, {
     align: a = "center",
     wrap: s = "nowrap",
     fluid: r = !1,
-    "aria-label": l = "Button group",
-    children: i,
+    "aria-label": i = "Button group",
+    children: l,
     className: m,
     ...u
   }, c) => {
@@ -567,10 +572,10 @@ const pa = Object.assign(xe, {
         ref: c,
         className: d(At["button-group"], m),
         role: "group",
-        "aria-label": l,
+        "aria-label": i,
         ...p,
         ...u,
-        children: i
+        children: l
       }
     );
   }
@@ -585,17 +590,17 @@ Me.displayName = "TopBar.Centred";
 const He = n(({ children: e, className: t, ...a }, s) => /* @__PURE__ */ o("div", { ref: s, className: d(L["top-bar-trailing"], t), ...a, children: e }));
 He.displayName = "TopBar.Trailing";
 const Ge = n(
-  ({ as: e = "button", active: t, disabled: a, icon: s, className: r, children: l, ...i }, m) => /* @__PURE__ */ y(
+  ({ as: e = "button", active: t, disabled: a, icon: s, className: r, children: i, ...l }, m) => /* @__PURE__ */ y(
     e,
     {
       ref: m,
       className: d(L["top-bar-item"], r),
       "data-active": t ? "" : void 0,
       "data-disabled": a ? "" : void 0,
-      ...i,
+      ...l,
       children: [
         s && /* @__PURE__ */ o("span", { className: L["top-bar-item-icon"], children: s }),
-        l
+        i
       ]
     }
   )
@@ -610,7 +615,7 @@ const ba = Object.assign(Fe, {
   ListItem: Pe,
   Trailing: He
 }), ze = A(void 0), U = n(
-  ({ direction: e = "horizontal", gap: t, value: a, onChange: s, children: r, className: l, ...i }, m) => {
+  ({ direction: e = "horizontal", gap: t, value: a, onChange: s, children: r, className: i, ...l }, m) => {
     const u = v({ direction: e }), c = {
       lg: "var(--spacing-4)",
       md: "var(--spacing-3)",
@@ -624,14 +629,14 @@ const ba = Object.assign(Fe, {
       "nav",
       {
         ref: m,
-        className: d(j.nav, l),
+        className: d(j.nav, i),
         style: {
           ...t && {
             "--vers-comp-nav-gap": c[t]
           }
         },
         ...u,
-        ...i,
+        ...l,
         children: r
       }
     ) });
@@ -646,8 +651,8 @@ const je = n(
     value: a,
     disabled: s = !1,
     loading: r = !1,
-    leftIcon: l,
-    rightIcon: i,
+    leftIcon: i,
+    rightIcon: l,
     children: m,
     onClick: u,
     className: c,
@@ -676,9 +681,9 @@ const je = n(
         ...p,
         onClick: h,
         children: [
-          l && /* @__PURE__ */ o("span", { className: j["nav-item-icon"], children: /* @__PURE__ */ o(E, { as: l }) }),
+          i && /* @__PURE__ */ o("span", { className: j["nav-item-icon"], children: /* @__PURE__ */ o(E, { as: i }) }),
           m,
-          i && /* @__PURE__ */ o("span", { className: j["nav-item-icon"], children: /* @__PURE__ */ o(E, { as: i }) })
+          l && /* @__PURE__ */ o("span", { className: j["nav-item-icon"], children: /* @__PURE__ */ o(E, { as: l }) })
         ]
       }
     );
@@ -696,7 +701,7 @@ _e.displayName = "Sidebar.Body";
 const Ce = n(({ children: e, className: t }, a) => /* @__PURE__ */ o("div", { ref: a, className: d(T["sidebar-footer"], t), children: e }));
 Ce.displayName = "Sidebar.Footer";
 const Ve = n(
-  ({ label: e, icon: t, defaultExpanded: a = !0, isExpanded: s, onExpandedChange: r, children: l, className: i }, m) => {
+  ({ label: e, icon: t, defaultExpanded: a = !0, isExpanded: s, onExpandedChange: r, children: i, className: l }, m) => {
     const [u, c] = P(a), p = s !== void 0 ? s : u, N = () => {
       const b = !p;
       c(b), r == null || r(b);
@@ -705,7 +710,7 @@ const Ve = n(
       "div",
       {
         ref: m,
-        className: d(T["sidebar-group"], i),
+        className: d(T["sidebar-group"], l),
         "data-expanded": p ? "" : void 0,
         children: [
           /* @__PURE__ */ y("button", { className: T["sidebar-group-header"], onClick: N, "aria-expanded": p, children: [
@@ -713,7 +718,7 @@ const Ve = n(
             /* @__PURE__ */ o("span", { className: T["sidebar-group-label"], children: e }),
             /* @__PURE__ */ o(E, { as: Z, className: T["sidebar-group-chevron"], size: "sm" })
           ] }),
-          /* @__PURE__ */ o("div", { className: T["sidebar-group-content"], children: /* @__PURE__ */ o("div", { children: l }) })
+          /* @__PURE__ */ o("div", { className: T["sidebar-group-content"], children: /* @__PURE__ */ o("div", { children: i }) })
         ]
       }
     );
@@ -721,18 +726,18 @@ const Ve = n(
 );
 Ve.displayName = "Sidebar.Group";
 const ke = n(
-  ({ as: e = "button", active: t, disabled: a, icon: s, action: r, className: l, children: i, ...m }, u) => /* @__PURE__ */ y(
+  ({ as: e = "button", active: t, disabled: a, icon: s, action: r, className: i, children: l, ...m }, u) => /* @__PURE__ */ y(
     e,
     {
       ref: u,
-      className: d(T["sidebar-item"], l),
+      className: d(T["sidebar-item"], i),
       "data-active": t ? "" : void 0,
       "data-disabled": a ? "" : void 0,
       "data-action": r ? "" : void 0,
       ...m,
       children: [
         s && /* @__PURE__ */ o("span", { className: T["sidebar-item-icon"], children: s }),
-        /* @__PURE__ */ o("span", { className: T["sidebar-item-text"], children: i }),
+        /* @__PURE__ */ o("span", { className: T["sidebar-item-text"], children: l }),
         r && /* @__PURE__ */ o("span", { className: T["sidebar-item-action"], children: r })
       ]
     }
@@ -758,7 +763,7 @@ function qt(e, t) {
 const qe = n(({ children: e, className: t, ...a }, s) => /* @__PURE__ */ o("nav", { ref: s, className: d($["bottom-bar"], t), ...a, children: e }));
 qe.displayName = "BottomBar";
 const Je = n(
-  ({ as: e = "button", href: t, active: a = !1, disabled: s = !1, icon: r, children: l, onClick: i, className: m, ...u }, c) => {
+  ({ as: e = "button", href: t, active: a = !1, disabled: s = !1, icon: r, children: i, onClick: l, className: m, ...u }, c) => {
     const p = qt(e, "a"), N = v({
       active: a,
       disabled: s
@@ -767,7 +772,7 @@ const Je = n(
         h.preventDefault();
         return;
       }
-      i == null || i(h);
+      l == null || l(h);
     }, S = {
       className: d($["bottom-bar-item"], m),
       onClick: b,
@@ -777,7 +782,7 @@ const Je = n(
     };
     return p && (S.href = t), /* @__PURE__ */ y(e || "button", { ...S, children: [
       r && /* @__PURE__ */ o("span", { className: $["bottom-bar-item-icon"], children: r }),
-      l && /* @__PURE__ */ o("span", { className: $["bottom-bar-item-text"], children: l })
+      i && /* @__PURE__ */ o("span", { className: $["bottom-bar-item-text"], children: i })
     ] });
   }
 );
@@ -815,11 +820,11 @@ const fa = Object.assign(Ke, {
   SideLeft: Ze,
   SideRight: Oe
 });
-function Jt({ columns: e = "1fr", children: t, className: a, style: s, ...r }, l) {
+function Jt({ columns: e = "1fr", children: t, className: a, style: s, ...r }, i) {
   return /* @__PURE__ */ o(
     "form",
     {
-      ref: l,
+      ref: i,
       className: d(X["form-group"], a),
       style: {
         "--_columns": e,
@@ -833,10 +838,10 @@ function Jt({ columns: e = "1fr", children: t, className: a, style: s, ...r }, l
 const tt = n(Jt);
 tt.displayName = "FormGroup";
 const at = n(
-  ({ area: e, children: t, className: a, style: s, ...r }, l) => /* @__PURE__ */ o(
+  ({ area: e, children: t, className: a, style: s, ...r }, i) => /* @__PURE__ */ o(
     "div",
     {
-      ref: l,
+      ref: i,
       className: d(X.field, a),
       style: {
         "--_area": e,
@@ -878,12 +883,12 @@ function Kt({ direction: e = "column", children: t, className: a, ...s }, r) {
 const ot = n(Kt);
 ot.displayName = "Features";
 const rt = n(
-  ({ icon: e, children: t, className: a, "aria-label": s, ...r }, l) => {
+  ({ icon: e, children: t, className: a, "aria-label": s, ...r }, i) => {
     const m = `features-item-${O()}`, u = s ? I.getTooltipTriggerProps({ id: m }) : {};
     return /* @__PURE__ */ y(
       "li",
       {
-        ref: l,
+        ref: i,
         "aria-label": s,
         className: d(W.item, a),
         ...u,
@@ -900,9 +905,9 @@ const rt = n(
 rt.displayName = "Features.Item";
 const Qt = Object.assign(ot, {
   Item: rt
-}), ga = Qt, lt = xt.forwardRef(
-  ({ isOpen: e, onOpenChange: t, children: a, onClick: s, ...r }, l) => {
-    const i = M(null), m = l || i;
+}), ga = Qt, it = xt.forwardRef(
+  ({ isOpen: e, onOpenChange: t, children: a, onClick: s, ...r }, i) => {
+    const l = M(null), m = i || l;
     z(() => {
       const c = m.current;
       if (c) {
@@ -937,26 +942,26 @@ const Qt = Object.assign(ot, {
     return /* @__PURE__ */ o("dialog", { ...r, ref: m, onClick: u, children: a });
   }
 );
-lt.displayName = "Dialog";
-const Y = lt, it = A(void 0), Ut = () => {
-  const e = R(it);
+it.displayName = "Dialog";
+const Y = it, lt = A(void 0), Ut = () => {
+  const e = R(lt);
   if (!e)
     throw new Error("Drawer subcomponents must be used within Drawer");
   return e;
 }, ct = n(
-  ({ open: e, onOpenChange: t, placement: a = "right", children: s, className: r, ...l }, i) => {
+  ({ open: e, onOpenChange: t, placement: a = "right", children: s, className: r, ...i }, l) => {
     const m = v({
       placement: a
     });
-    return /* @__PURE__ */ o(it.Provider, { value: { onClose: () => t == null ? void 0 : t(!1) }, children: /* @__PURE__ */ o(
+    return /* @__PURE__ */ o(lt.Provider, { value: { onClose: () => t == null ? void 0 : t(!1) }, children: /* @__PURE__ */ o(
       Y,
       {
-        ref: i,
+        ref: l,
         isOpen: e,
         onOpenChange: t,
         className: d(e && Rt.drawer, r),
         ...m,
-        ...l,
+        ...i,
         children: /* @__PURE__ */ o("div", { className: w.content, children: s })
       }
     ) });
@@ -972,8 +977,8 @@ const nt = n(({ onClick: e, ...t }, a) => {
       variant: "ghost",
       as: q,
       "aria-label": "Close",
-      onClick: (l) => {
-        s(), e == null || e(l);
+      onClick: (i) => {
+        s(), e == null || e(i);
       },
       className: w.closeButton,
       ...t
@@ -982,10 +987,10 @@ const nt = n(({ onClick: e, ...t }, a) => {
 });
 nt.displayName = "Drawer.CloseButton";
 const dt = n(
-  ({ action: e, children: t, tabs: a, className: s, ...r }, l) => /* @__PURE__ */ y(
+  ({ action: e, children: t, tabs: a, className: s, ...r }, i) => /* @__PURE__ */ y(
     "div",
     {
-      ref: l,
+      ref: i,
       className: d(w.header, s),
       ...r,
       ...e && { "data-action": "" },
@@ -1013,7 +1018,7 @@ const Ta = Object.assign(ct, {
     throw new Error("Modal subcomponents must be used within Modal");
   return e;
 }, ut = n(
-  ({ open: e, onOpenChange: t, size: a, position: s, children: r, className: l, ...i }, m) => {
+  ({ open: e, onOpenChange: t, size: a, position: s, children: r, className: i, ...l }, m) => {
     const u = v({ size: a, position: s });
     return /* @__PURE__ */ o(mt.Provider, { value: { onClose: () => t == null ? void 0 : t(!1) }, children: /* @__PURE__ */ o(
       Y,
@@ -1021,10 +1026,10 @@ const Ta = Object.assign(ct, {
         ref: m,
         isOpen: e,
         onOpenChange: t,
-        className: d(e && It.modal, l),
+        className: d(e && It.modal, i),
         "data-modal": "",
         ...u,
-        ...i,
+        ...l,
         children: /* @__PURE__ */ o("div", { className: w.content, children: r })
       }
     ) });
@@ -1040,8 +1045,8 @@ const pt = n(({ onClick: e, ...t }, a) => {
       variant: "ghost",
       as: q,
       "aria-label": "Close",
-      onClick: (l) => {
-        s(), e == null || e(l);
+      onClick: (i) => {
+        s(), e == null || e(i);
       },
       className: w.closeButton,
       ...t
@@ -1080,10 +1085,10 @@ const Sa = Object.assign(ut, {
     throw new Error("BottomSheet subcomponents must be used within BottomSheet");
   return e;
 }, vt = n(
-  ({ open: e, onOpenChange: t, children: a, className: s, ...r }, l) => /* @__PURE__ */ o(yt.Provider, { value: { onClose: () => t == null ? void 0 : t(!1) }, children: /* @__PURE__ */ o(
+  ({ open: e, onOpenChange: t, children: a, className: s, ...r }, i) => /* @__PURE__ */ o(yt.Provider, { value: { onClose: () => t == null ? void 0 : t(!1) }, children: /* @__PURE__ */ o(
     Y,
     {
-      ref: l,
+      ref: i,
       isOpen: e,
       onOpenChange: t,
       className: d(Lt.bottomSheet, s),
@@ -1103,8 +1108,8 @@ const ft = n(
         ref: a,
         variant: "ghost",
         "aria-label": "Close",
-        onClick: (l) => {
-          s(), e == null || e(l);
+        onClick: (i) => {
+          s(), e == null || e(i);
         },
         className: w.closeButton,
         ...t

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@versaur/react",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "React components for Versaur Design System",
   "repository": {
     "type": "git",
@@ -49,7 +49,7 @@
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@versaur/core": "0.0.7",
+    "@versaur/core": "0.0.8",
     "@versaur/icons": "1.0.0"
   },
   "scripts": {