@versaur/react 1.0.0 → 1.0.1

package/dist/blocks.js

@@ -1,40 +1,1004 @@
-import { AvatarGroup as t } from "./components/blocks/avatar-group/avatar-group.js";
-import { Tabs as p } from "./components/blocks/tabs/tabs.js";
-import { NoResults as f } from "./components/blocks/no-results/no-results.js";
-import { AttributeList as a } from "./components/blocks/attribute-list/index.js";
-import { BadgeGroup as B } from "./components/blocks/badge-group/badge-group.js";
-import { Card as d } from "./components/blocks/card/card.js";
-import { Table as l } from "./components/blocks/table/table.js";
-import { ButtonGroup as v } from "./components/blocks/button-group/button-group.js";
-import { Menu as G } from "./components/blocks/menu/index.js";
-import { TopBar as T } from "./components/blocks/top-bar/top-bar.js";
-import { Nav as n } from "./components/blocks/nav/index.js";
-import { Sidebar as L } from "./components/blocks/sidebar/sidebar.js";
-import { BottomBar as S } from "./components/blocks/bottom-bar/bottom-bar.js";
-import { AppLayout as w } from "./components/blocks/app-layout/app-layout.js";
-import { Dialog as C } from "./components/blocks/dialog/dialog.js";
-import { Drawer as R } from "./components/blocks/drawer/drawer.js";
-import { Modal as j } from "./components/blocks/modal/modal.js";
-import { BottomSheet as q } from "./components/blocks/bottom-sheet/bottom-sheet.js";
-import { NavItem as E } from "./components/blocks/nav/nav-item.js";
+import { jsx as s, jsxs as y, Fragment as K } from "react/jsx-runtime";
+import { avatarGroupStyles as lt, tabsStyles as H, noResultsStyles as x, attributeListStyles as nt, badgeGroupStyles as dt, cardStyles as j, tableStyles as w, buttonGroupStyles as ct, menuStyles as M, topBarStyles as S, navStyles as D, sidebarStyles as h, bottomBarStyles as C, appLayoutStyles as A, drawerStyles as mt, modalStyles as ut, bottomSheetStyles as bt } from "@versaur/core/blocks";
+import pt, { forwardRef as l, useEffect as G, createContext as L, useRef as z, useState as k, useLayoutEffect as Nt, useContext as I, useCallback as yt } from "react";
+import { c as d } from "./cx-B9vmfsc1.js";
+import { u as N } from "./use-data-attrs-iPFyfiKN.js";
+import { c as Q, I as F, B as P, T as $, H as vt } from "./tooltip-QgerMOQE.js";
+import { checkboxStyles as E } from "@versaur/core/forms";
+import { ChevronUpIcon as ht, ChevronDownIcon as V, MenuIcon as ft, XIcon as W } from "@versaur/icons";
+import { overlayPartsStyles as f } from "@versaur/core/utils";
+import { c as _, a as Y, O as U, b as gt } from "./overlay-parts-BhSNUdE2.js";
+const Bt = l(
+  ({
+    direction: e = "horizontal",
+    size: t = "md",
+    align: a = "center",
+    wrap: o = "nowrap",
+    "aria-label": r = "Avatar group",
+    children: i,
+    className: c,
+    ...m
+  }, u) => {
+    const n = N({ align: a, direction: e, size: t, wrap: o });
+    return /* @__PURE__ */ s(
+      "div",
+      {
+        ref: u,
+        className: d(lt["avatar-group"], c),
+        role: "group",
+        "aria-label": r,
+        ...n,
+        ...m,
+        children: i
+      }
+    );
+  }
+);
+Bt.displayName = "AvatarGroup";
+function Tt(e, t) {
+  G(() => {
+    if (!e.current)
+      return;
+    const a = new ResizeObserver(t);
+    return a.observe(e.current), () => {
+      a.disconnect();
+    };
+  }, [e, t]);
+}
+const Z = L(void 0);
+function St() {
+  const e = I(Z);
+  if (!e)
+    throw new Error("Tabs.Item must be used within a Tabs component");
+  return e;
+}
+const O = l(({ value: e, onChange: t, children: a, className: o }, r) => {
+  const i = z(null), c = z(/* @__PURE__ */ new Map()), [m, u] = k(0), [n, b] = k(0), v = () => {
+    const T = c.current.get(e);
+    if (!T || !i.current)
+      return;
+    const B = i.current.getBoundingClientRect(), R = T.getBoundingClientRect(), rt = R.left - B.left + i.current.scrollLeft, { width: it } = R;
+    u(rt), b(it), T.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+      inline: "center"
+    });
+  }, p = (T, B) => {
+    B && c.current.set(T, B);
+  };
+  Nt(() => {
+    v();
+  }, [e]), Tt(i, v);
+  const g = N({});
+  return /* @__PURE__ */ s(Z.Provider, { value: { activeValue: e, onChange: t, registerTrigger: p }, children: /* @__PURE__ */ y("nav", { ref: Q(r, i), className: d(H.tabs, o), ...g, children: [
+    /* @__PURE__ */ s("ul", { className: H.tablist, role: "tablist", children: a }),
+    /* @__PURE__ */ s(
+      "div",
+      {
+        className: H["tabs-thumb"],
+        style: {
+          left: `${m}px`,
+          width: `${n}px`
+        }
+      }
+    )
+  ] }) });
+});
+O.displayName = "Tabs";
+const ee = l(
+  ({ value: e, disabled: t = !1, children: a, className: o }, r) => {
+    const { activeValue: i, onChange: c, registerTrigger: m } = St(), u = i === e;
+    let n;
+    t ? n = "disabled" : u ? n = "active" : n = "default";
+    const b = () => {
+      t || c(e);
+    };
+    return /* @__PURE__ */ s("li", { className: H.tabitem, children: /* @__PURE__ */ s(
+      "button",
+      {
+        ref: Q(r, (v) => m(e, v)),
+        className: d(H.trigger, o),
+        role: "tab",
+        id: `tabs-trigger-${e}`,
+        "aria-selected": u,
+        "aria-controls": `tabs-panel-${e}`,
+        "data-state": n,
+        disabled: t,
+        onClick: b,
+        children: a
+      }
+    ) });
+  }
+);
+ee.displayName = "Tabs.Item";
+function wt(e) {
+  return {
+    "aria-labelledby": `tabs-trigger-${e}`,
+    id: `tabs-panel-${e}`,
+    role: "tabpanel"
+  };
+}
+const qt = Object.assign(O, {
+  Item: ee,
+  getPanelAttribute: wt
+}), At = l(
+  ({ icon: e, title: t, subtitle: a, action: o, className: r, ...i }, c) => /* @__PURE__ */ y("section", { ref: c, className: d(x["no-results"], r), role: "status", "aria-label": t, ...i, children: [
+    /* @__PURE__ */ y("header", { className: x["no-results-header"], children: [
+      /* @__PURE__ */ s("div", { className: x["no-results-icon"], children: /* @__PURE__ */ s(F, { as: e, color: "inherit", "aria-hidden": "true" }) }),
+      /* @__PURE__ */ s("h5", { className: x["no-results-title"], children: t })
+    ] }),
+    a && /* @__PURE__ */ s("p", { className: x["no-results-subtitle"], children: a }),
+    o && /* @__PURE__ */ s("div", { className: x["no-results-action"], role: "group", "aria-label": "Available actions", children: o })
+  ] })
+);
+At.displayName = "NoResults";
+const te = L(void 0), Lt = () => {
+  const e = I(te);
+  if (!e)
+    throw new Error("AttributeList.Item must be used within an AttributeList component");
+  return e;
+}, ae = l(
+  ({ columns: e = "3", children: t, className: a, ...o }, r) => {
+    const i = N({
+      columns: e
+    });
+    return /* @__PURE__ */ s(te.Provider, { value: { columns: e }, children: /* @__PURE__ */ s("dl", { ref: r, className: d(nt["attribute-list"], a), ...i, ...o, children: t }) });
+  }
+);
+ae.displayName = "AttributeList";
+const se = l(
+  ({ title: e, columnSpan: t = "1", contentLineClamp: a = "2", children: o, className: r }, i) => {
+    Lt();
+    const c = N({
+      "column-span": t,
+      "content-line-clamp": a
+    });
+    return /* @__PURE__ */ y("div", { ref: i, className: d(r), ...c, children: [
+      /* @__PURE__ */ s("dt", { children: e }),
+      /* @__PURE__ */ s("dd", { children: o })
+    ] });
+  }
+);
+se.displayName = "AttributeList.Item";
+const Jt = Object.assign(ae, {
+  Item: se
+}), It = l(
+  ({
+    gap: e = "md",
+    direction: t = "horizontal",
+    align: a = "center",
+    wrap: o = "nowrap",
+    "aria-label": r = "Badge group",
+    children: i,
+    className: c,
+    ...m
+  }, u) => {
+    const n = N({
+      align: a,
+      direction: t,
+      gap: e,
+      wrap: o
+    });
+    return /* @__PURE__ */ s(
+      "div",
+      {
+        ref: u,
+        className: d(dt["badge-group"], c),
+        role: "group",
+        "aria-label": r,
+        ...n,
+        ...m,
+        children: i
+      }
+    );
+  }
+);
+It.displayName = "BadgeGroup";
+function xt({ as: e = "div", size: t = "md", border: a, children: o, className: r, ...i }, c) {
+  const m = N({
+    border: a,
+    interactive: e === "button" ? "true" : "false",
+    size: t
+  });
+  return /* @__PURE__ */ s(e === "button" ? "button" : "div", { ref: c, className: d(j.card, r), ...m, ...i, children: o });
+}
+const oe = l(
+  xt
+);
+oe.displayName = "Card";
+const re = l(({ justify: e, gap: t, children: a, className: o, ...r }, i) => {
+  const c = N({ gap: t, justify: e });
+  return /* @__PURE__ */ s("div", { ref: i, className: d(j.header, o), ...c, ...r, children: a });
+});
+re.displayName = "Card.Header";
+const ie = l(({ align: e, gap: t, children: a, className: o, ...r }, i) => {
+  const c = N({ align: e, gap: t });
+  return /* @__PURE__ */ s("div", { ref: i, className: d(j.body, o), ...c, ...r, children: a });
+});
+ie.displayName = "Card.Body";
+const le = l(({ justify: e, gap: t, children: a, className: o, ...r }, i) => {
+  const c = N({ gap: t, justify: e });
+  return /* @__PURE__ */ s("div", { ref: i, className: d(j.footer, o), ...c, ...r, children: a });
+});
+le.displayName = "Card.Footer";
+const Kt = Object.assign(oe, {
+  Body: ie,
+  Footer: le,
+  Header: re
+}), ne = l(({ className: e, ...t }, a) => /* @__PURE__ */ s("thead", { ref: a, className: d(w["table-header"], e), ...t }));
+ne.displayName = "Table.Header";
+const de = l(({ className: e, ...t }, a) => /* @__PURE__ */ s("tbody", { ref: a, className: d(w["table-body"], e), ...t }));
+de.displayName = "Table.Body";
+const ce = l(({ className: e, ...t }, a) => /* @__PURE__ */ s("tfoot", { ref: a, className: d(w["table-footer"], e), ...t }));
+ce.displayName = "Table.Footer";
+const me = l(({ onClick: e, className: t, ...a }, o) => /* @__PURE__ */ s("tr", { ref: o, className: d(t), "data-clickable": e ? "true" : void 0, onClick: e, ...a }));
+me.displayName = "Table.Row";
+const ue = l(
+  ({ sortable: e, sortDirection: t, onSort: a, children: o, className: r, ...i }, c) => {
+    const m = () => {
+      if (!e || !a)
+        return;
+      let n = "asc";
+      t === "asc" ? n = "desc" : t === "desc" && (n = null), a(n);
+    }, u = N({
+      sortable: e ? "true" : void 0
+    });
+    return /* @__PURE__ */ s(
+      "th",
+      {
+        ref: c,
+        className: d(w["table-head"], r),
+        onClick: e ? m : void 0,
+        ...u,
+        ...i,
+        children: /* @__PURE__ */ y(
+          "div",
+          {
+            style: {
+              alignItems: "center",
+              display: "flex",
+              gap: "0.5rem",
+              justifyContent: "flex-start"
+            },
+            children: [
+              o,
+              e && /* @__PURE__ */ y(K, { children: [
+                t === "asc" && /* @__PURE__ */ s(ht, { style: { flexShrink: 0, height: "1em", width: "1em" } }),
+                t === "desc" && /* @__PURE__ */ s(V, { style: { flexShrink: 0, height: "1em", width: "1em" } }),
+                !t && /* @__PURE__ */ s(
+                  V,
+                  {
+                    style: {
+                      flexShrink: 0,
+                      height: "1em",
+                      opacity: 0.5,
+                      width: "1em"
+                    }
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+ue.displayName = "Table.HeaderCell";
+const be = l(({ variant: e, className: t, ...a }, o) => /* @__PURE__ */ s("td", { ref: o, className: d(w["table-cell"], t), "data-table-cell-variant": e, ...a }));
+be.displayName = "Table.BodyCell";
+const pe = l(
+  ({ rowId: e, checked: t, indeterminate: a, onChange: o }, r) => /* @__PURE__ */ y("label", { className: E.checkbox, children: [
+    /* @__PURE__ */ s(
+      "input",
+      {
+        ref: (i) => {
+          i && (i.indeterminate = a || !1, typeof r == "function" ? r(i) : r && (r.current = i));
+        },
+        type: "checkbox",
+        className: E.input,
+        checked: t || !1,
+        onChange: (i) => o(i.target.checked),
+        "aria-label": `Select row ${e}`
+      }
+    ),
+    /* @__PURE__ */ s("span", { className: E.indicator })
+  ] })
+);
+pe.displayName = "Table.Checkbox";
+const Ne = l(({ title: e, subtitle: t, size: a = "md", className: o }, r) => {
+  const i = {
+    title: {
+      sm: "0.875rem",
+      md: "0.9375rem",
+      lg: "1rem"
+    },
+    subtitle: {
+      sm: "0.75rem",
+      md: "0.8125rem",
+      lg: "0.875rem"
+    }
+  };
+  return /* @__PURE__ */ y("div", { ref: r, className: d(w["table-cell"], o), "data-table-cell-variant": "double-line", children: [
+    /* @__PURE__ */ s(
+      "div",
+      {
+        style: {
+          fontWeight: 600,
+          fontSize: i.title[a]
+        },
+        children: e
+      }
+    ),
+    /* @__PURE__ */ s(
+      "div",
+      {
+        style: {
+          fontSize: i.subtitle[a],
+          color: "#6b7280"
+        },
+        children: t
+      }
+    )
+  ] });
+});
+Ne.displayName = "Table.DoubleLine";
+const ye = l(({ onClick: e, disabled: t }, a) => /* @__PURE__ */ s(
+  P,
+  {
+    ref: a,
+    as: ft,
+    onClick: (r) => {
+      r.stopPropagation(), e == null || e();
+    },
+    disabled: t,
+    variant: "ghost",
+    size: "medium",
+    "aria-label": "Action button"
+  }
+));
+ye.displayName = "Table.Action";
+const ve = l(({ columns: e, children: t, className: a, ...o }, r) => /* @__PURE__ */ s(
+  "div",
+  {
+    ref: r,
+    className: d(w.table, a),
+    style: {
+      "--table-grid-columns": e
+    },
+    ...o,
+    children: /* @__PURE__ */ s("table", { children: t })
+  }
+));
+ve.displayName = "Table";
+const Qt = Object.assign(ve, {
+  Action: ye,
+  Body: de,
+  BodyCell: be,
+  Checkbox: pe,
+  DoubleLine: Ne,
+  Footer: ce,
+  Header: ne,
+  HeaderCell: ue,
+  Row: me
+}), Rt = l(
+  ({
+    gap: e = "md",
+    direction: t = "horizontal",
+    align: a = "center",
+    wrap: o = "nowrap",
+    fluid: r = !1,
+    "aria-label": i = "Button group",
+    children: c,
+    className: m,
+    ...u
+  }, n) => {
+    const b = N({
+      align: a,
+      direction: t,
+      fluid: r,
+      gap: e,
+      wrap: o
+    });
+    return /* @__PURE__ */ s(
+      "div",
+      {
+        ref: n,
+        className: d(ct["button-group"], m),
+        role: "group",
+        "aria-label": i,
+        ...b,
+        ...u,
+        children: c
+      }
+    );
+  }
+);
+Rt.displayName = "ButtonGroup";
+const he = L(void 0), fe = l(
+  ({
+    id: e,
+    placement: t = "bottom",
+    maxHeight: a = 400,
+    minWidth: o = 160,
+    maxWidth: r = 320,
+    gap: i = 8,
+    value: c,
+    onChange: m,
+    closeOnClick: u = !1,
+    children: n,
+    ...b
+  }, v) => {
+    const p = {
+      id: e,
+      closeOnClick: u,
+      onChange: m,
+      value: c
+    };
+    return /* @__PURE__ */ s("div", { ref: v, ...b, children: /* @__PURE__ */ s(he.Provider, { value: p, children: /* @__PURE__ */ s($, { id: e, placement: t, gap: i, triggerType: "focus", children: /* @__PURE__ */ s(
+      "div",
+      {
+        className: M["menu-list"],
+        style: {
+          "--_max-height": `${a}px`,
+          "--_max-width": `${r}px`,
+          "--_min-width": `${o}px`
+        },
+        children: n
+      }
+    ) }) }) });
+  }
+);
+fe.displayName = "Menu";
+function Mt(e) {
+  return $.getTooltipTriggerProps({
+    id: e.id,
+    triggerType: "focus"
+  });
+}
+function Ht(e) {
+  $.close(e);
+}
+const X = fe;
+X.getTriggerProps = Mt;
+X.close = Ht;
+const ge = l(
+  ({ value: e, disabled: t = !1, leftIcon: a, rightIcon: o, children: r, onClick: i, className: c, ...m }, u) => {
+    const n = I(he), b = n != null && n.onChange && e !== void 0 ? n.value === e : !1, v = N({
+      active: b,
+      disabled: t
+    }), p = (g) => {
+      if (t) {
+        g.preventDefault();
+        return;
+      }
+      n != null && n.onChange && e !== void 0 && n.onChange(e), i == null || i(g), n != null && n.closeOnClick && (n != null && n.id) && $.close({ id: n.id });
+    };
+    return /* @__PURE__ */ y(
+      "button",
+      {
+        ref: u,
+        className: d(M["menu-item"], c),
+        disabled: t,
+        ...v,
+        ...m,
+        onClick: p,
+        children: [
+          a ? /* @__PURE__ */ s("span", { className: M["menu-item-icon"], children: a }) : null,
+          /* @__PURE__ */ s("span", { className: M["menu-item-label"], children: r }),
+          o ? /* @__PURE__ */ s("span", { className: M["menu-item-icon"], children: o }) : null
+        ]
+      }
+    );
+  }
+);
+ge.displayName = "Menu.Item";
+const Dt = X;
+Dt.Item = ge;
+const Be = l(({ children: e, className: t, ...a }, o) => /* @__PURE__ */ s("div", { ref: o, className: d(S["top-bar"], t), ...a, children: e }));
+Be.displayName = "TopBar";
+const Te = l(({ children: e, className: t, ...a }, o) => /* @__PURE__ */ s("div", { ref: o, className: d(S["top-bar-leading"], t), ...a, children: e }));
+Te.displayName = "TopBar.Leading";
+const Se = l(({ children: e, className: t, ...a }, o) => /* @__PURE__ */ s("div", { ref: o, className: d(S["top-bar-centred"], t), ...a, children: e }));
+Se.displayName = "TopBar.Centred";
+const we = l(({ children: e, className: t, ...a }, o) => /* @__PURE__ */ s("div", { ref: o, className: d(S["top-bar-trailing"], t), ...a, children: e }));
+we.displayName = "TopBar.Trailing";
+const Ae = l(
+  ({ as: e = "button", active: t, disabled: a, icon: o, className: r, children: i, ...c }, m) => /* @__PURE__ */ y(
+    e,
+    {
+      ref: m,
+      className: d(S["top-bar-item"], r),
+      "data-active": t ? "" : void 0,
+      "data-disabled": a ? "" : void 0,
+      ...c,
+      children: [
+        o && /* @__PURE__ */ s("span", { className: S["top-bar-item-icon"], children: o }),
+        i
+      ]
+    }
+  )
+);
+Ae.displayName = "TopBar.Item";
+const Le = l(({ children: e, className: t, ...a }, o) => /* @__PURE__ */ s("div", { ref: o, className: d(S["top-bar-list-item"], t), ...a, children: e }));
+Le.displayName = "TopBar.ListItem";
+const Yt = Object.assign(Be, {
+  Centred: Se,
+  Item: Ae,
+  Leading: Te,
+  ListItem: Le,
+  Trailing: we
+}), Ie = L(void 0), q = l(
+  ({ direction: e = "horizontal", gap: t, value: a, onChange: o, children: r, className: i, ...c }, m) => {
+    const u = N({ direction: e }), n = {
+      lg: "var(--spacing-4)",
+      md: "var(--spacing-3)",
+      sm: "var(--spacing-2)",
+      xs: "var(--spacing-1)"
+    }, b = {
+      onChange: o,
+      value: a
+    };
+    return /* @__PURE__ */ s(Ie.Provider, { value: b, children: /* @__PURE__ */ s(
+      "nav",
+      {
+        ref: m,
+        className: d(D.nav, i),
+        style: {
+          ...t && {
+            "--vers-comp-nav-gap": n[t]
+          }
+        },
+        ...u,
+        ...c,
+        children: r
+      }
+    ) });
+  }
+);
+q.displayName = "Nav";
+q.displayName = "Nav";
+const xe = l(
+  ({
+    as: e = "button",
+    active: t = !1,
+    value: a,
+    disabled: o = !1,
+    loading: r = !1,
+    leftIcon: i,
+    rightIcon: c,
+    children: m,
+    onClick: u,
+    className: n,
+    ...b
+  }, v) => {
+    const p = I(Ie), g = p != null && p.onChange && a !== void 0 ? p.value === a : t, T = N({
+      active: g,
+      disabled: o || r,
+      loading: r
+    }), B = (R) => {
+      if (o || r) {
+        R.preventDefault();
+        return;
+      }
+      p != null && p.onChange && a !== void 0 && p.onChange(a), u == null || u(R);
+    };
+    return /* @__PURE__ */ y(
+      e,
+      {
+        ref: v,
+        className: d(D["nav-item"], n),
+        "aria-current": g && e !== "button" ? "page" : void 0,
+        "aria-disabled": o || r ? "true" : void 0,
+        "aria-busy": r ? "true" : void 0,
+        ...T,
+        ...b,
+        onClick: B,
+        children: [
+          i && /* @__PURE__ */ s("span", { className: D["nav-item-icon"], children: /* @__PURE__ */ s(F, { as: i }) }),
+          m,
+          c && /* @__PURE__ */ s("span", { className: D["nav-item-icon"], children: /* @__PURE__ */ s(F, { as: c }) })
+        ]
+      }
+    );
+  }
+);
+xe.displayName = "NavItem";
+const Zt = Object.assign(q, {
+  Item: xe
+}), Re = l(({ children: e, className: t }, a) => /* @__PURE__ */ s("aside", { ref: a, className: d(h.sidebar, t), children: e }));
+Re.displayName = "Sidebar";
+const Me = l(({ children: e, className: t }, a) => /* @__PURE__ */ s("div", { ref: a, className: d(h["sidebar-header"], t), children: e }));
+Me.displayName = "Sidebar.Header";
+const He = l(({ children: e, className: t }, a) => /* @__PURE__ */ s("div", { ref: a, className: d(h["sidebar-body"], t), children: e }));
+He.displayName = "Sidebar.Body";
+const De = l(({ children: e, className: t }, a) => /* @__PURE__ */ s("div", { ref: a, className: d(h["sidebar-footer"], t), children: e }));
+De.displayName = "Sidebar.Footer";
+const Ce = l(
+  ({
+    label: e,
+    icon: t,
+    defaultExpanded: a = !0,
+    isExpanded: o,
+    onExpandedChange: r,
+    children: i,
+    className: c
+  }, m) => {
+    const [u, n] = k(a), b = o !== void 0 ? o : u, v = () => {
+      const p = !b;
+      n(p), r == null || r(p);
+    };
+    return /* @__PURE__ */ y(
+      "div",
+      {
+        ref: m,
+        className: d(h["sidebar-group"], c),
+        "data-expanded": b ? "" : void 0,
+        children: [
+          /* @__PURE__ */ y(
+            "button",
+            {
+              className: h["sidebar-group-header"],
+              onClick: v,
+              "aria-expanded": b,
+              children: [
+                t && /* @__PURE__ */ s("span", { children: t }),
+                /* @__PURE__ */ s("span", { className: h["sidebar-group-label"], children: e }),
+                /* @__PURE__ */ s(
+                  F,
+                  {
+                    as: V,
+                    className: h["sidebar-group-chevron"],
+                    size: "sm"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ s("div", { className: h["sidebar-group-content"], children: /* @__PURE__ */ s("div", { children: i }) })
+        ]
+      }
+    );
+  }
+);
+Ce.displayName = "Sidebar.Group";
+const Fe = l(
+  ({ as: e = "button", active: t, disabled: a, icon: o, action: r, className: i, children: c, ...m }, u) => /* @__PURE__ */ y(
+    e,
+    {
+      ref: u,
+      className: d(h["sidebar-item"], i),
+      "data-active": t ? "" : void 0,
+      "data-disabled": a ? "" : void 0,
+      "data-action": r ? "" : void 0,
+      ...m,
+      children: [
+        o && /* @__PURE__ */ s("span", { className: h["sidebar-item-icon"], children: o }),
+        /* @__PURE__ */ s("span", { className: h["sidebar-item-text"], children: c }),
+        r && /* @__PURE__ */ s("span", { className: h["sidebar-item-action"], children: r })
+      ]
+    }
+  )
+);
+Fe.displayName = "Sidebar.Item";
+const je = l(({ children: e, className: t }, a) => /* @__PURE__ */ s("div", { ref: a, className: d(h["sidebar-item-list"], t), children: e }));
+je.displayName = "Sidebar.ItemList";
+const Pe = l(({ className: e }, t) => /* @__PURE__ */ s("div", { ref: t, className: d(h["sidebar-divider"], e), children: /* @__PURE__ */ s(vt, {}) }));
+Pe.displayName = "Sidebar.Divider";
+const Ot = Object.assign(Re, {
+  Body: He,
+  Divider: Pe,
+  Footer: De,
+  Group: Ce,
+  Header: Me,
+  Item: Fe,
+  ItemList: je
+});
+function Ct(e, t) {
+  return e === t;
+}
+const $e = l(({ children: e, className: t, ...a }, o) => /* @__PURE__ */ s("nav", { ref: o, className: d(C["bottom-bar"], t), ...a, children: e }));
+$e.displayName = "BottomBar";
+const Ee = l(
+  ({ as: e = "button", href: t, active: a = !1, disabled: o = !1, icon: r, children: i, onClick: c, className: m, ...u }, n) => {
+    const b = Ct(e, "a"), v = N({
+      active: a,
+      disabled: o
+    }), p = (B) => {
+      if (o) {
+        B.preventDefault();
+        return;
+      }
+      c == null || c(B);
+    }, g = {
+      className: d(C["bottom-bar-item"], m),
+      onClick: p,
+      ref: n,
+      ...v,
+      ...u
+    };
+    return b && (g.href = t), /* @__PURE__ */ y(e || "button", { ...g, children: [
+      r && /* @__PURE__ */ s("span", { className: C["bottom-bar-item-icon"], children: r }),
+      i && /* @__PURE__ */ s("span", { className: C["bottom-bar-item-text"], children: i })
+    ] });
+  }
+);
+Ee.displayName = "BottomBar.Item";
+const ea = Object.assign($e, {
+  Item: Ee
+}), Ge = l(
+  ({
+    variant: e = "classic",
+    hideHeader: t,
+    hideBottom: a,
+    className: o,
+    children: r
+  }, i) => {
+    const c = N({
+      "hide-header": t,
+      "hide-bottom": a,
+      variant: e
+    });
+    return /* @__PURE__ */ s("div", { ref: i, className: d(A["app-layout"], o), ...c, children: r });
+  }
+);
+Ge.displayName = "AppLayout";
+const ze = l(
+  ({ className: e, children: t }, a) => /* @__PURE__ */ s("div", { ref: a, className: d(A["app-layout-body"], e), children: t })
+);
+ze.displayName = "AppLayout.Body";
+const ke = l(({ className: e, children: t }, a) => /* @__PURE__ */ s("header", { ref: a, className: d(A["app-layout-header"], e), children: t }));
+ke.displayName = "AppLayout.Header";
+const Ve = l(
+  ({ className: e, placement: t = "full-width", children: a }, o) => {
+    const r = N({
+      placement: t
+    });
+    return /* @__PURE__ */ s("main", { ref: o, className: d(A["app-layout-main"], e), ...r, children: a });
+  }
+);
+Ve.displayName = "AppLayout.Main";
+const We = l(({ className: e, children: t }, a) => /* @__PURE__ */ s("aside", { ref: a, className: d(A["app-layout-side-left"], e), children: t }));
+We.displayName = "AppLayout.SideLeft";
+const _e = l(({ className: e, children: t }, a) => /* @__PURE__ */ s("aside", { ref: a, className: d(A["app-layout-side-right"], e), children: t }));
+_e.displayName = "AppLayout.SideRight";
+const Ue = l(({ className: e, children: t }, a) => /* @__PURE__ */ s("footer", { ref: a, className: d(A["app-layout-bottom"], e), children: t }));
+Ue.displayName = "AppLayout.Bottom";
+const ta = Object.assign(Ge, {
+  Body: ze,
+  Bottom: Ue,
+  Header: ke,
+  Main: Ve,
+  SideLeft: We,
+  SideRight: _e
+}), Xe = pt.forwardRef(
+  ({ isOpen: e, onOpenChange: t, children: a, onClick: o, ...r }, i) => {
+    const c = z(null), m = i || c;
+    G(() => {
+      const n = m.current;
+      if (n) {
+        if (e)
+          try {
+            n.showModal(), document.documentElement.style.overflow = "hidden";
+          } catch {
+          }
+        else
+          n.close(), document.documentElement.style.overflow = "";
+        return () => {
+          document.documentElement.style.overflow = "";
+        };
+      }
+    }, [e, m]), G(() => {
+      const n = m.current;
+      if (!n)
+        return;
+      const b = () => t == null ? void 0 : t(!1), v = (p) => {
+        p.preventDefault(), t == null || t(!1);
+      };
+      return n.addEventListener("close", b), n.addEventListener("cancel", v), () => {
+        n.removeEventListener("close", b), n.removeEventListener("cancel", v);
+      };
+    }, [t, m]);
+    const u = yt(
+      (n) => {
+        n.target === n.currentTarget && (t == null || t(!1)), o == null || o(n);
+      },
+      [t, o]
+    );
+    return /* @__PURE__ */ s("dialog", { ...r, ref: m, onClick: u, children: a });
+  }
+);
+Xe.displayName = "Dialog";
+const J = Xe, qe = L(void 0), Ft = () => {
+  const e = I(qe);
+  if (!e)
+    throw new Error("Drawer subcomponents must be used within Drawer");
+  return e;
+}, Je = l(
+  ({ open: e, onOpenChange: t, placement: a = "right", children: o, className: r, ...i }, c) => {
+    const m = N({
+      placement: a
+    });
+    return /* @__PURE__ */ s(qe.Provider, { value: { onClose: () => t == null ? void 0 : t(!1) }, children: /* @__PURE__ */ s(
+      J,
+      {
+        ref: c,
+        isOpen: e,
+        onOpenChange: t,
+        className: d(e && mt.drawer, r),
+        ...m,
+        ...i,
+        children: /* @__PURE__ */ s("div", { className: f.content, children: o })
+      }
+    ) });
+  }
+);
+Je.displayName = "Drawer";
+const Ke = l(({ onClick: e, ...t }, a) => {
+  const { onClose: o } = Ft();
+  return /* @__PURE__ */ s(
+    P,
+    {
+      ref: a,
+      variant: "ghost",
+      as: W,
+      "aria-label": "Close",
+      onClick: (i) => {
+        o(), e == null || e(i);
+      },
+      className: f.closeButton,
+      ...t
+    }
+  );
+});
+Ke.displayName = "Drawer.CloseButton";
+const Qe = l(
+  ({ action: e, children: t, tabs: a, className: o, ...r }, i) => /* @__PURE__ */ y(
+    "div",
+    {
+      ref: i,
+      className: d(f.header, o),
+      ...r,
+      ...e && { "data-action": "" },
+      ...a && { "data-tabs": "" },
+      children: [
+        e ? /* @__PURE__ */ y(K, { children: [
+          /* @__PURE__ */ s("div", { className: f.headerTop, children: e }),
+          t && /* @__PURE__ */ s("div", { className: f.headerContent, children: t })
+        ] }) : /* @__PURE__ */ s("div", { className: f.headerTop, children: t }),
+        a
+      ]
+    }
+  )
+);
+Qe.displayName = "Drawer.Header";
+const aa = Object.assign(Je, {
+  Body: U,
+  CloseButton: Ke,
+  Footer: Y,
+  Header: Qe,
+  Title: _
+}), Ye = L(void 0), jt = () => {
+  const e = I(Ye);
+  if (!e)
+    throw new Error("Modal subcomponents must be used within Modal");
+  return e;
+}, Ze = l(
+  ({ open: e, onOpenChange: t, size: a, position: o, children: r, className: i, ...c }, m) => {
+    const u = N({ size: a, position: o });
+    return /* @__PURE__ */ s(Ye.Provider, { value: { onClose: () => t == null ? void 0 : t(!1) }, children: /* @__PURE__ */ s(
+      J,
+      {
+        ref: m,
+        isOpen: e,
+        onOpenChange: t,
+        className: d(e && ut.modal, i),
+        "data-modal": "",
+        ...u,
+        ...c,
+        children: /* @__PURE__ */ s("div", { className: f.content, children: r })
+      }
+    ) });
+  }
+);
+Ze.displayName = "Modal";
+const Oe = l(({ onClick: e, ...t }, a) => {
+  const { onClose: o } = jt();
+  return /* @__PURE__ */ s(
+    P,
+    {
+      ref: a,
+      variant: "ghost",
+      as: W,
+      "aria-label": "Close",
+      onClick: (i) => {
+        o(), e == null || e(i);
+      },
+      className: f.closeButton,
+      ...t
+    }
+  );
+});
+Oe.displayName = "Modal.CloseButton";
+const et = l(({ action: e, children: t, className: a, ...o }, r) => /* @__PURE__ */ y("div", { ref: r, className: d(f.header, "modal-header", a), "data-modal-header": "", ...o, children: [
+  /* @__PURE__ */ s("div", { children: t }),
+  e && /* @__PURE__ */ s("div", { className: "modal-header-action", children: e })
+] }));
+et.displayName = "Modal.Header";
+const tt = l(
+  ({ align: e = "end", children: t, className: a, ...o }, r) => /* @__PURE__ */ s(
+    "div",
+    {
+      ref: r,
+      className: d(f.footer, "modal-footer", a),
+      "data-modal-footer": "",
+      "data-align": e,
+      ...o,
+      children: t
+    }
+  )
+);
+tt.displayName = "Modal.Footer";
+const sa = Object.assign(Ze, {
+  Body: U,
+  CloseButton: Oe,
+  Footer: tt,
+  Header: et,
+  Title: _
+}), at = L(void 0), Pt = () => {
+  const e = I(at);
+  if (!e)
+    throw new Error("BottomSheet subcomponents must be used within BottomSheet");
+  return e;
+}, st = l(
+  ({ open: e, onOpenChange: t, children: a, className: o, ...r }, i) => /* @__PURE__ */ s(at.Provider, { value: { onClose: () => t == null ? void 0 : t(!1) }, children: /* @__PURE__ */ s(J, { ref: i, isOpen: e, onOpenChange: t, className: d(bt.bottomSheet, o), ...r, children: /* @__PURE__ */ s("div", { className: f.content, children: a }) }) })
+);
+st.displayName = "BottomSheet";
+const ot = l(
+  ({ onClick: e, ...t }, a) => {
+    const { onClose: o } = Pt();
+    return /* @__PURE__ */ s(
+      P,
+      {
+        as: W,
+        ref: a,
+        variant: "ghost",
+        "aria-label": "Close",
+        onClick: (i) => {
+          o(), e == null || e(i);
+        },
+        className: f.closeButton,
+        ...t
+      }
+    );
+  }
+);
+ot.displayName = "BottomSheet.CloseButton";
+const oa = Object.assign(st, {
+  Body: U,
+  CloseButton: ot,
+  Footer: Y,
+  Header: gt,
+  Title: _
+});
 export {
-  w as AppLayout,
-  a as AttributeList,
-  t as AvatarGroup,
-  B as BadgeGroup,
-  S as BottomBar,
-  q as BottomSheet,
-  v as ButtonGroup,
-  d as Card,
-  C as Dialog,
-  R as Drawer,
-  G as Menu,
-  j as Modal,
-  n as Nav,
-  E as NavItem,
-  f as NoResults,
-  L as Sidebar,
-  l as Table,
-  p as Tabs,
-  T as TopBar
+  ta as AppLayout,
+  Jt as AttributeList,
+  Bt as AvatarGroup,
+  It as BadgeGroup,
+  ea as BottomBar,
+  oa as BottomSheet,
+  Rt as ButtonGroup,
+  Kt as Card,
+  J as Dialog,
+  aa as Drawer,
+  Dt as Menu,
+  sa as Modal,
+  Zt as Nav,
+  xe as NavItem,
+  At as NoResults,
+  Ot as Sidebar,
+  Qt as Table,
+  qt as Tabs,
+  Yt as TopBar
 };