@versaur/react 0.0.1

package/dist/components/blocks/menu/menu.js

@@ -0,0 +1,55 @@
+import { jsx as o } from "react/jsx-runtime";
+import h from "../../../core/src/components/blocks/menu/menu.module.css.js";
+import { createContext as T, forwardRef as v } from "react";
+import { Tooltip as t } from "../../primitive/tooltip/tooltip.js";
+const y = T(void 0), r = v(
+  ({
+    id: e,
+    placement: n = "bottom",
+    maxHeight: s = 400,
+    minWidth: c = 160,
+    maxWidth: l = 320,
+    gap: m = 8,
+    value: p,
+    onChange: u,
+    closeOnClick: g = !1,
+    children: d,
+    ...a
+  }, f) => {
+    const x = {
+      id: e,
+      closeOnClick: g,
+      onChange: u,
+      value: p
+    };
+    return /* @__PURE__ */ o("div", { ref: f, ...a, children: /* @__PURE__ */ o(y.Provider, { value: x, children: /* @__PURE__ */ o(t, { id: e, placement: n, gap: m, triggerType: "focus", children: /* @__PURE__ */ o(
+      "div",
+      {
+        className: h["menu-list"],
+        style: {
+          "--_max-height": `${s}px`,
+          "--_max-width": `${l}px`,
+          "--_min-width": `${c}px`
+        },
+        children: d
+      }
+    ) }) }) });
+  }
+);
+r.displayName = "Menu";
+function M(e) {
+  return t.getTooltipTriggerProps({
+    id: e.id,
+    triggerType: "focus"
+  });
+}
+function P(e) {
+  t.close(e);
+}
+const i = r;
+i.getTriggerProps = M;
+i.close = P;
+export {
+  i as Menu,
+  y as MenuContext
+};

package/dist/components/blocks/modal/modal.js

@@ -0,0 +1,81 @@
+import { jsx as r, jsxs as N } from "react/jsx-runtime";
+import x from "../../../core/src/components/blocks/modal/modal.module.css.js";
+import d from "../../../core/src/components/utils/overlay-parts/overlay-parts.module.css.js";
+import { XIcon as h } from "@versaur/icons";
+import { createContext as B, forwardRef as s, useContext as b } from "react";
+import { useDataAttrs as w } from "../../../hooks/use-data-attrs.js";
+import { cx as i } from "../../../utils/cx.js";
+import { ButtonIcon as C } from "../../primitive/button-icon/button-icon.js";
+import { OverlayTitle as j, OverlayBody as F } from "../../utils/overlay-parts/overlay-parts.js";
+import { Dialog as H } from "../dialog/dialog.js";
+const c = B(void 0), A = () => {
+  const o = b(c);
+  if (!o)
+    throw new Error("Modal subcomponents must be used within Modal");
+  return o;
+}, n = s(
+  ({ open: o, onOpenChange: t, size: a, position: e, children: l, className: m, ...v }, p) => {
+    const y = w({ size: a, position: e });
+    return /* @__PURE__ */ r(c.Provider, { value: { onClose: () => t == null ? void 0 : t(!1) }, children: /* @__PURE__ */ r(
+      H,
+      {
+        ref: p,
+        isOpen: o,
+        onOpenChange: t,
+        className: i(o && x.modal, m),
+        "data-modal": "",
+        ...y,
+        ...v,
+        children: /* @__PURE__ */ r("div", { className: d.content, children: l })
+      }
+    ) });
+  }
+);
+n.displayName = "Modal";
+const f = s(({ onClick: o, ...t }, a) => {
+  const { onClose: e } = A();
+  return /* @__PURE__ */ r(
+    C,
+    {
+      ref: a,
+      variant: "ghost",
+      as: h,
+      "aria-label": "Close",
+      onClick: (m) => {
+        e(), o == null || o(m);
+      },
+      className: d.closeButton,
+      ...t
+    }
+  );
+});
+f.displayName = "Modal.CloseButton";
+const u = s(({ action: o, children: t, className: a, ...e }, l) => /* @__PURE__ */ N("div", { ref: l, className: i(d.header, "modal-header", a), "data-modal-header": "", ...e, children: [
+  /* @__PURE__ */ r("div", { children: t }),
+  o && /* @__PURE__ */ r("div", { className: "modal-header-action", children: o })
+] }));
+u.displayName = "Modal.Header";
+const M = s(
+  ({ align: o = "end", children: t, className: a, ...e }, l) => /* @__PURE__ */ r(
+    "div",
+    {
+      ref: l,
+      className: i(d.footer, "modal-footer", a),
+      "data-modal-footer": "",
+      "data-align": o,
+      ...e,
+      children: t
+    }
+  )
+);
+M.displayName = "Modal.Footer";
+const G = Object.assign(n, {
+  Body: F,
+  CloseButton: f,
+  Footer: M,
+  Header: u,
+  Title: j
+});
+export {
+  G as Modal
+};

package/dist/components/blocks/nav/index.js

@@ -0,0 +1,9 @@
+import { Nav as t } from "./nav.js";
+import { NavItem as a } from "./nav-item.js";
+const r = Object.assign(t, {
+  Item: a
+});
+export {
+  r as Nav,
+  a as NavItem
+};

package/dist/components/blocks/nav/nav-item.js

@@ -0,0 +1,56 @@
+import { jsxs as y, jsx as e } from "react/jsx-runtime";
+import o from "../../../core/src/components/blocks/nav/nav.module.css.js";
+import { forwardRef as A, useContext as I } from "react";
+import { cx as j } from "../../../utils/cx.js";
+import { useDataAttrs as D } from "../../../hooks/use-data-attrs.js";
+import { Icon as v } from "../../primitive/icon/icon.js";
+import { NavContext as w } from "./nav.js";
+const S = A(
+  ({
+    as: m = "button",
+    active: u = !1,
+    value: a,
+    disabled: s = !1,
+    loading: r = !1,
+    leftIcon: c,
+    rightIcon: n,
+    children: d,
+    onClick: i,
+    className: h,
+    ...N
+  }, l) => {
+    const t = I(w), f = t != null && t.onChange && a !== void 0 ? t.value === a : u, b = D({
+      active: f,
+      disabled: s || r,
+      loading: r
+    }), x = (p) => {
+      if (s || r) {
+        p.preventDefault();
+        return;
+      }
+      t != null && t.onChange && a !== void 0 && t.onChange(a), i == null || i(p);
+    };
+    return /* @__PURE__ */ y(
+      m,
+      {
+        ref: l,
+        className: j(o["nav-item"], h),
+        "aria-current": f && m !== "button" ? "page" : void 0,
+        "aria-disabled": s || r ? "true" : void 0,
+        "aria-busy": r ? "true" : void 0,
+        ...b,
+        ...N,
+        onClick: x,
+        children: [
+          c && /* @__PURE__ */ e("span", { className: o["nav-item-icon"], children: /* @__PURE__ */ e(v, { as: c }) }),
+          d,
+          n && /* @__PURE__ */ e("span", { className: o["nav-item-icon"], children: /* @__PURE__ */ e(v, { as: n }) })
+        ]
+      }
+    );
+  }
+);
+S.displayName = "NavItem";
+export {
+  S as NavItem
+};

package/dist/components/blocks/nav/nav.js

@@ -0,0 +1,39 @@
+import { jsx as t } from "react/jsx-runtime";
+import d from "../../../core/src/components/blocks/nav/nav.module.css.js";
+import { createContext as f, forwardRef as x } from "react";
+import { cx as N } from "../../../utils/cx.js";
+import { useDataAttrs as g } from "../../../hooks/use-data-attrs.js";
+const u = f(void 0), r = x(
+  ({ direction: o = "horizontal", gap: a, value: s, onChange: n, children: e, className: c, ...i }, m) => {
+    const v = g({ direction: o }), p = {
+      lg: "var(--spacing-4)",
+      md: "var(--spacing-3)",
+      sm: "var(--spacing-2)",
+      xs: "var(--spacing-1)"
+    }, l = {
+      onChange: n,
+      value: s
+    };
+    return /* @__PURE__ */ t(u.Provider, { value: l, children: /* @__PURE__ */ t(
+      "nav",
+      {
+        ref: m,
+        className: N(d.nav, c),
+        style: {
+          ...a && {
+            "--vers-comp-nav-gap": p[a]
+          }
+        },
+        ...v,
+        ...i,
+        children: e
+      }
+    ) });
+  }
+);
+r.displayName = "Nav";
+r.displayName = "Nav";
+export {
+  r as Nav,
+  u as NavContext
+};

package/dist/components/blocks/no-results/no-results.js

@@ -0,0 +1,19 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import s from "../../../core/src/components/blocks/no-results/no-results.module.css.js";
+import { forwardRef as m } from "react";
+import { cx as d } from "../../../utils/cx.js";
+import { Icon as u } from "../../primitive/icon/icon.js";
+const h = m(
+  ({ icon: i, title: r, subtitle: l, action: o, className: t, ...n }, c) => /* @__PURE__ */ a("section", { ref: c, className: d(s["no-results"], t), role: "status", "aria-label": r, ...n, children: [
+    /* @__PURE__ */ a("header", { className: s["no-results-header"], children: [
+      /* @__PURE__ */ e("div", { className: s["no-results-icon"], children: /* @__PURE__ */ e(u, { as: i, color: "inherit", "aria-hidden": "true" }) }),
+      /* @__PURE__ */ e("h5", { className: s["no-results-title"], children: r })
+    ] }),
+    l && /* @__PURE__ */ e("p", { className: s["no-results-subtitle"], children: l }),
+    o && /* @__PURE__ */ e("div", { className: s["no-results-action"], role: "group", "aria-label": "Available actions", children: o })
+  ] })
+);
+h.displayName = "NoResults";
+export {
+  h as NoResults
+};

package/dist/components/blocks/sidebar/sidebar.js

@@ -0,0 +1,106 @@
+import { jsx as i, jsxs as N } from "react/jsx-runtime";
+import { ChevronDownIcon as j } from "@versaur/icons";
+import r from "../../../core/src/components/blocks/sidebar/sidebar.module.css.js";
+import { forwardRef as d, useState as B } from "react";
+import { cx as t } from "../../../utils/cx.js";
+import { Hr as F } from "../../primitive/hr/hr.js";
+import { Icon as G } from "../../primitive/icon/icon.js";
+const S = d(({ children: a, className: e }, s) => /* @__PURE__ */ i("aside", { ref: s, className: t(r.sidebar, e), children: a }));
+S.displayName = "Sidebar";
+const u = d(({ children: a, className: e }, s) => /* @__PURE__ */ i("div", { ref: s, className: t(r["sidebar-header"], e), children: a }));
+u.displayName = "Sidebar.Header";
+const y = d(({ children: a, className: e }, s) => /* @__PURE__ */ i("div", { ref: s, className: t(r["sidebar-body"], e), children: a }));
+y.displayName = "Sidebar.Body";
+const f = d(({ children: a, className: e }, s) => /* @__PURE__ */ i("div", { ref: s, className: t(r["sidebar-footer"], e), children: a }));
+f.displayName = "Sidebar.Footer";
+const h = d(
+  ({
+    label: a,
+    icon: e,
+    defaultExpanded: s = !0,
+    isExpanded: m,
+    onExpandedChange: o,
+    children: c,
+    className: b
+  }, l) => {
+    const [n, D] = B(s), p = m !== void 0 ? m : n, H = () => {
+      const v = !p;
+      D(v), o == null || o(v);
+    };
+    return /* @__PURE__ */ N(
+      "div",
+      {
+        ref: l,
+        className: t(r["sidebar-group"], b),
+        "data-expanded": p ? "" : void 0,
+        children: [
+          /* @__PURE__ */ N(
+            "button",
+            {
+              className: r["sidebar-group-header"],
+              onClick: H,
+              "aria-expanded": p,
+              children: [
+                e && /* @__PURE__ */ i("span", { children: e }),
+                /* @__PURE__ */ i("span", { className: r["sidebar-group-label"], children: a }),
+                /* @__PURE__ */ i(
+                  G,
+                  {
+                    as: j,
+                    className: r["sidebar-group-chevron"],
+                    size: "sm"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ i("div", { className: r["sidebar-group-content"], children: /* @__PURE__ */ i("div", { children: c }) })
+        ]
+      }
+    );
+  }
+);
+h.displayName = "Sidebar.Group";
+const I = d(
+  ({ as: a = "button", active: e, disabled: s, icon: m, action: o, className: c, children: b, ...l }, n) => /* @__PURE__ */ N(
+    a,
+    {
+      ref: n,
+      className: t(r["sidebar-item"], c),
+      "data-active": e ? "" : void 0,
+      "data-disabled": s ? "" : void 0,
+      "data-action": o ? "" : void 0,
+      ...l,
+      children: [
+        m && /* @__PURE__ */ i("span", { className: r["sidebar-item-icon"], children: m }),
+        /* @__PURE__ */ i("span", { className: r["sidebar-item-text"], children: b }),
+        o && /* @__PURE__ */ i("span", { className: r["sidebar-item-action"], children: o })
+      ]
+    }
+  )
+);
+I.displayName = "Sidebar.Item";
+const x = d(({ children: a, className: e }, s) => /* @__PURE__ */ i("div", { ref: s, className: t(r["sidebar-item-list"], e), children: a }));
+x.displayName = "Sidebar.ItemList";
+const g = d(({ className: a }, e) => /* @__PURE__ */ i("div", { ref: e, className: t(r["sidebar-divider"], a), children: /* @__PURE__ */ i(F, {}) }));
+g.displayName = "Sidebar.Divider";
+const A = Object.assign(S, {
+  Body: y,
+  Divider: g,
+  Footer: f,
+  Group: h,
+  Header: u,
+  Item: I,
+  ItemList: x
+});
+export {
+  A as Sidebar,
+  y as SidebarBody,
+  g as SidebarDivider,
+  f as SidebarFooter,
+  h as SidebarGroup,
+  u as SidebarHeader,
+  I as SidebarItem,
+  x as SidebarItemList,
+  S as SidebarRoot
+};

package/dist/components/blocks/table/table.js

@@ -0,0 +1,177 @@
+import { jsx as t, jsxs as r, Fragment as B } from "react/jsx-runtime";
+import b from "../../../core/src/components/forms/checkbox/checkbox.module.css.js";
+import d from "../../../core/src/components/blocks/table/table.module.css.js";
+import { ChevronUpIcon as A, ChevronDownIcon as h, MenuIcon as H } from "@versaur/icons";
+import { forwardRef as c } from "react";
+import { cx as n } from "../../../utils/cx.js";
+import { useDataAttrs as I } from "../../../hooks/use-data-attrs.js";
+import { ButtonIcon as j } from "../../primitive/button-icon/button-icon.js";
+const p = c(({ className: e, ...a }, l) => /* @__PURE__ */ t("thead", { ref: l, className: n(d["table-header"], e), ...a }));
+p.displayName = "Table.Header";
+const y = c(({ className: e, ...a }, l) => /* @__PURE__ */ t("tbody", { ref: l, className: n(d["table-body"], e), ...a }));
+y.displayName = "Table.Body";
+const f = c(({ className: e, ...a }, l) => /* @__PURE__ */ t("tfoot", { ref: l, className: n(d["table-footer"], e), ...a }));
+f.displayName = "Table.Footer";
+const u = c(({ onClick: e, className: a, ...l }, o) => /* @__PURE__ */ t("tr", { ref: o, className: n(a), "data-clickable": e ? "true" : void 0, onClick: e, ...l }));
+u.displayName = "Table.Row";
+const N = c(
+  ({ sortable: e, sortDirection: a, onSort: l, children: o, className: s, ...i }, k) => {
+    const w = () => {
+      if (!e || !l)
+        return;
+      let m = "asc";
+      a === "asc" ? m = "desc" : a === "desc" && (m = null), l(m);
+    }, S = I({
+      sortable: e ? "true" : void 0
+    });
+    return /* @__PURE__ */ t(
+      "th",
+      {
+        ref: k,
+        className: n(d["table-head"], s),
+        onClick: e ? w : void 0,
+        ...S,
+        ...i,
+        children: /* @__PURE__ */ r(
+          "div",
+          {
+            style: {
+              alignItems: "center",
+              display: "flex",
+              gap: "0.5rem",
+              justifyContent: "flex-start"
+            },
+            children: [
+              o,
+              e && /* @__PURE__ */ r(B, { children: [
+                a === "asc" && /* @__PURE__ */ t(A, { style: { flexShrink: 0, height: "1em", width: "1em" } }),
+                a === "desc" && /* @__PURE__ */ t(h, { style: { flexShrink: 0, height: "1em", width: "1em" } }),
+                !a && /* @__PURE__ */ t(
+                  h,
+                  {
+                    style: {
+                      flexShrink: 0,
+                      height: "1em",
+                      opacity: 0.5,
+                      width: "1em"
+                    }
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+N.displayName = "Table.HeaderCell";
+const T = c(({ variant: e, className: a, ...l }, o) => /* @__PURE__ */ t("td", { ref: o, className: n(d["table-cell"], a), "data-table-cell-variant": e, ...l }));
+T.displayName = "Table.BodyCell";
+const g = c(
+  ({ rowId: e, checked: a, indeterminate: l, onChange: o }, s) => /* @__PURE__ */ r("label", { className: b.checkbox, children: [
+    /* @__PURE__ */ t(
+      "input",
+      {
+        ref: (i) => {
+          i && (i.indeterminate = l || !1, typeof s == "function" ? s(i) : s && (s.current = i));
+        },
+        type: "checkbox",
+        className: b.input,
+        checked: a || !1,
+        onChange: (i) => o(i.target.checked),
+        "aria-label": `Select row ${e}`
+      }
+    ),
+    /* @__PURE__ */ t("span", { className: b.indicator })
+  ] })
+);
+g.displayName = "Table.Checkbox";
+const x = c(({ title: e, subtitle: a, size: l = "md", className: o }, s) => {
+  const i = {
+    title: {
+      sm: "0.875rem",
+      md: "0.9375rem",
+      lg: "1rem"
+    },
+    subtitle: {
+      sm: "0.75rem",
+      md: "0.8125rem",
+      lg: "0.875rem"
+    }
+  };
+  return /* @__PURE__ */ r("div", { ref: s, className: n(d["table-cell"], o), "data-table-cell-variant": "double-line", children: [
+    /* @__PURE__ */ t(
+      "div",
+      {
+        style: {
+          fontWeight: 600,
+          fontSize: i.title[l]
+        },
+        children: e
+      }
+    ),
+    /* @__PURE__ */ t(
+      "div",
+      {
+        style: {
+          fontSize: i.subtitle[l],
+          color: "#6b7280"
+        },
+        children: a
+      }
+    )
+  ] });
+});
+x.displayName = "Table.DoubleLine";
+const C = c(({ onClick: e, disabled: a }, l) => /* @__PURE__ */ t(
+  j,
+  {
+    ref: l,
+    as: H,
+    onClick: (s) => {
+      s.stopPropagation(), e == null || e();
+    },
+    disabled: a,
+    variant: "ghost",
+    size: "medium",
+    "aria-label": "Action button"
+  }
+));
+C.displayName = "Table.Action";
+const v = c(({ columns: e, children: a, className: l, ...o }, s) => /* @__PURE__ */ t(
+  "div",
+  {
+    ref: s,
+    className: n(d.table, l),
+    style: {
+      "--table-grid-columns": e
+    },
+    ...o,
+    children: /* @__PURE__ */ t("table", { children: a })
+  }
+));
+v.displayName = "Table";
+const U = Object.assign(v, {
+  Action: C,
+  Body: y,
+  BodyCell: T,
+  Checkbox: g,
+  DoubleLine: x,
+  Footer: f,
+  Header: p,
+  HeaderCell: N,
+  Row: u
+});
+export {
+  U as Table,
+  C as TableAction,
+  y as TableBody,
+  T as TableBodyCell,
+  g as TableCheckbox,
+  x as TableDoubleLine,
+  f as TableFooter,
+  p as TableHeader,
+  N as TableHeaderCell,
+  u as TableRow
+};

package/dist/components/blocks/tabs/tabs.js

@@ -0,0 +1,89 @@
+import { jsx as a, jsxs as L } from "react/jsx-runtime";
+import o from "../../../core/src/components/blocks/tabs/tabs.module.css.js";
+import { createContext as j, forwardRef as x, useRef as p, useState as T, useLayoutEffect as k, useContext as V } from "react";
+import { useDataAttrs as B } from "../../../hooks/use-data-attrs.js";
+import { useResizeObserver as E } from "../../../hooks/use-resize-observer.js";
+import { combineRefs as R } from "../../../utils/combine-refs.js";
+import { cx as C } from "../../../utils/cx.js";
+const w = j(void 0);
+function O() {
+  const t = V(w);
+  if (!t)
+    throw new Error("Tabs.Item must be used within a Tabs component");
+  return t;
+}
+const v = x(({ value: t, onChange: r, children: m, className: f }, u) => {
+  const e = p(null), i = p(/* @__PURE__ */ new Map()), [g, c] = T(0), [s, d] = T(0), l = () => {
+    const n = i.current.get(t);
+    if (!n || !e.current)
+      return;
+    const b = e.current.getBoundingClientRect(), h = n.getBoundingClientRect(), I = h.left - b.left + e.current.scrollLeft, { width: A } = h;
+    c(I), d(A), n.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+      inline: "center"
+    });
+  }, y = (n, b) => {
+    b && i.current.set(n, b);
+  };
+  k(() => {
+    l();
+  }, [t]), E(e, l);
+  const $ = B({});
+  return /* @__PURE__ */ a(w.Provider, { value: { activeValue: t, onChange: r, registerTrigger: y }, children: /* @__PURE__ */ L("nav", { ref: R(u, e), className: C(o.tabs, f), ...$, children: [
+    /* @__PURE__ */ a("ul", { className: o.tablist, role: "tablist", children: m }),
+    /* @__PURE__ */ a(
+      "div",
+      {
+        className: o["tabs-thumb"],
+        style: {
+          left: `${g}px`,
+          width: `${s}px`
+        }
+      }
+    )
+  ] }) });
+});
+v.displayName = "Tabs";
+const N = x(
+  ({ value: t, disabled: r = !1, children: m, className: f }, u) => {
+    const { activeValue: e, onChange: i, registerTrigger: g } = O(), c = e === t;
+    let s;
+    r ? s = "disabled" : c ? s = "active" : s = "default";
+    const d = () => {
+      r || i(t);
+    };
+    return /* @__PURE__ */ a("li", { className: o.tabitem, children: /* @__PURE__ */ a(
+      "button",
+      {
+        ref: R(u, (l) => g(t, l)),
+        className: C(o.trigger, f),
+        role: "tab",
+        id: `tabs-trigger-${t}`,
+        "aria-selected": c,
+        "aria-controls": `tabs-panel-${t}`,
+        "data-state": s,
+        disabled: r,
+        onClick: d,
+        children: m
+      }
+    ) });
+  }
+);
+N.displayName = "Tabs.Item";
+function P(t) {
+  return {
+    "aria-labelledby": `tabs-trigger-${t}`,
+    id: `tabs-panel-${t}`,
+    role: "tabpanel"
+  };
+}
+const G = Object.assign(v, {
+  Item: N,
+  getPanelAttribute: P
+});
+export {
+  G as Tabs,
+  N as TabsItem,
+  P as getPanelAttribute
+};

package/dist/components/blocks/top-bar/top-bar.js

@@ -0,0 +1,46 @@
+import { jsx as i, jsxs as v } from "react/jsx-runtime";
+import e from "../../../core/src/components/blocks/top-bar/top-bar.module.css.js";
+import { forwardRef as s } from "react";
+import { cx as p } from "../../../utils/cx.js";
+const m = s(({ children: t, className: o, ...r }, a) => /* @__PURE__ */ i("div", { ref: a, className: p(e["top-bar"], o), ...r, children: t }));
+m.displayName = "TopBar";
+const d = s(({ children: t, className: o, ...r }, a) => /* @__PURE__ */ i("div", { ref: a, className: p(e["top-bar-leading"], o), ...r, children: t }));
+d.displayName = "TopBar.Leading";
+const n = s(({ children: t, className: o, ...r }, a) => /* @__PURE__ */ i("div", { ref: a, className: p(e["top-bar-centred"], o), ...r, children: t }));
+n.displayName = "TopBar.Centred";
+const l = s(({ children: t, className: o, ...r }, a) => /* @__PURE__ */ i("div", { ref: a, className: p(e["top-bar-trailing"], o), ...r, children: t }));
+l.displayName = "TopBar.Trailing";
+const c = s(
+  ({ as: t = "button", active: o, disabled: r, icon: a, className: B, children: N, ...b }, g) => /* @__PURE__ */ v(
+    t,
+    {
+      ref: g,
+      className: p(e["top-bar-item"], B),
+      "data-active": o ? "" : void 0,
+      "data-disabled": r ? "" : void 0,
+      ...b,
+      children: [
+        a && /* @__PURE__ */ i("span", { className: e["top-bar-item-icon"], children: a }),
+        N
+      ]
+    }
+  )
+);
+c.displayName = "TopBar.Item";
+const T = s(({ children: t, className: o, ...r }, a) => /* @__PURE__ */ i("div", { ref: a, className: p(e["top-bar-list-item"], o), ...r, children: t }));
+T.displayName = "TopBar.ListItem";
+const x = Object.assign(m, {
+  Centred: n,
+  Item: c,
+  Leading: d,
+  ListItem: T,
+  Trailing: l
+});
+export {
+  x as TopBar,
+  n as TopBarCentred,
+  c as TopBarItem,
+  d as TopBarLeading,
+  T as TopBarListItem,
+  l as TopBarTrailing
+};