@hybridcore/ui 1.6.26 → 1.6.27

package/CATALOG.md

@@ -61,6 +61,7 @@ import { ComponentName } from '@hybridcore/ui';
 | InstanceHierarchyTable     | HCInstanceHierarchyTable     | Accordion table showing template hierarchy with counts                   | data-table, hierarchy, accordion    |
 | SimplePivotTable           | HCSimplePivotTable           | Pivot table with row/column dimensions + aggregations (sum/avg/min/max)  | data-table, pivot, aggregation      |
 | PaginatedList              | HCPaginatedList              | Paginated list with selection mode and snapshot export                   | data-list, pagination, selection    |
+| DataList                   | HCDataList                   | Dashboard list: leading icon states, composed meta line, trailing badge/progress slot | data-list, dashboard, badge, status |
 | SortableList               | HCSortableList               | Drag-and-drop sortable list                                              | data-list, sortable, drag           |
 | InstanceVariableList       | HCInstanceVariableList       | Renders typed instance variables with per-type widgets                   | data-list, ontology, variable, domain |
 

package/dist/IconCheck-BcUcbvno.js

@@ -0,0 +1,19 @@
+import { c as e } from "./createReactComponent-C7L-DMHj.js";
+/**
+ * @license @tabler/icons-react v3.44.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const t = [["path", { d: "M12 9v4", key: "svg-0" }], ["path", { d: "M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0", key: "svg-1" }], ["path", { d: "M12 16h.01", key: "svg-2" }]], c = e("outline", "alert-triangle", "AlertTriangle", t);
+/**
+ * @license @tabler/icons-react v3.44.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const a = [["path", { d: "M5 12l5 5l10 -10", key: "svg-0" }]], n = e("outline", "check", "Check", a);
+export {
+  n as I,
+  c as a
+};

package/dist/components/data-list/index.js

@@ -0,0 +1,139 @@
+import { jsxs as o, jsx as a, Fragment as g } from "react/jsx-runtime";
+import { Typography as k, Stack as u, Skeleton as L, CircularProgress as w, TablePagination as x } from "@mui/material";
+import { LinearIndicator as m } from "../linear-indicator/index.js";
+import { useDataListLogic as y } from "./logic.js";
+import { DataListRoot as v, DataListHeader as A, DataListHeaderActionLink as B, DataListHeaderActionButton as R, DataListContent as E, DataListEmpty as H, DataListList as M, DataListLoadMore as T, DataListPagination as j, DataListItemRow as z, DataListItemButton as O, DataListItemEnd as V, DataListItemStart as f, DataListBadge as F, DataListEndLabel as b, DataListItemMain as N, DataListItemTitle as W, DataListItemMeta as _ } from "./styled.js";
+const Q = (t) => {
+  const { refs: c, state: r, actions: d } = y(t), { ownerState: l, displayData: C } = r, D = !!(t.title || t.headerAction || t.actionLabel && (t.onActionClick || t.actionHref)), s = (e) => {
+    if (t.renderItemStart) return t.renderItemStart(e);
+    if (e.icon)
+      return /* @__PURE__ */ a(f, { ownerState: l, children: e.icon });
+    const i = r.getIcon(e);
+    if (!i) return null;
+    const n = r.getIconState(e);
+    return /* @__PURE__ */ a(
+      f,
+      {
+        ownerState: l,
+        iconColor: n == null ? void 0 : n.color,
+        iconBackground: n == null ? void 0 : n.backgroundColor,
+        role: n != null && n.label ? "img" : void 0,
+        "aria-label": n == null ? void 0 : n.label,
+        "aria-hidden": n != null && n.label ? void 0 : !0,
+        title: n == null ? void 0 : n.label,
+        children: /* @__PURE__ */ a(i, { size: l.dense ? 16 : 20 })
+      }
+    );
+  }, P = (e) => {
+    if (t.renderItemEnd) return t.renderItemEnd(e);
+    if (e.endContent) return e.endContent;
+    if (r.endSlot === "badge") {
+      const i = r.getBadgeLabel(e);
+      if (!i) return null;
+      const n = r.getBadgeState(e);
+      return /* @__PURE__ */ a(
+        F,
+        {
+          badgeColor: n == null ? void 0 : n.color,
+          badgeBackground: n == null ? void 0 : n.backgroundColor,
+          badgeBorder: n == null ? void 0 : n.borderColor,
+          children: i
+        }
+      );
+    }
+    if (r.endSlot === "progress")
+      return /* @__PURE__ */ o(g, { children: [
+        /* @__PURE__ */ a(
+          m,
+          {
+            value: r.getProgressValue(e),
+            sx: { flex: 1, minWidth: 0 }
+          }
+        ),
+        e.endLabel && /* @__PURE__ */ a(b, { children: e.endLabel })
+      ] });
+    if (r.endSlot === "text") {
+      const i = e.endLabel ?? e.endValue;
+      return i == null || `${i}`.trim() === "" ? null : /* @__PURE__ */ a(b, { children: i });
+    }
+    return null;
+  }, h = (e) => {
+    const i = r.getSecondaryText(e);
+    return /* @__PURE__ */ o(N, { ownerState: l, children: [
+      /* @__PURE__ */ a(W, { title: e.title, children: e.title }),
+      i && /* @__PURE__ */ a(_, { ownerState: l, title: i, children: i })
+    ] });
+  }, I = (e) => {
+    const i = P(e);
+    return /* @__PURE__ */ o(z, { ownerState: l, children: [
+      r.isItemClickable(e) ? /* @__PURE__ */ o(
+        O,
+        {
+          onClick: d.handleItemClick(e),
+          disabled: e.disabled,
+          children: [
+            s(e),
+            h(e)
+          ]
+        }
+      ) : /* @__PURE__ */ o(g, { children: [
+        s(e),
+        h(e)
+      ] }),
+      i && /* @__PURE__ */ a(V, { ownerState: l, children: i })
+    ] }, e.id);
+  };
+  return /* @__PURE__ */ o(
+    v,
+    {
+      ownerState: l,
+      sx: t.sx,
+      elevation: 0,
+      "data-snapshot": r.snapshot,
+      children: [
+        D && /* @__PURE__ */ o(A, { ownerState: l, children: [
+          t.title && /* @__PURE__ */ a(k, { variant: "h3", children: t.title }),
+          t.headerAction ?? (t.actionLabel && (t.actionHref ? /* @__PURE__ */ a(
+            B,
+            {
+              href: t.actionHref,
+              onClick: t.onActionClick,
+              children: t.actionLabel
+            }
+          ) : t.onActionClick && /* @__PURE__ */ a(
+            R,
+            {
+              type: "button",
+              onClick: t.onActionClick,
+              children: t.actionLabel
+            }
+          )))
+        ] }),
+        /* @__PURE__ */ o(E, { ownerState: l, children: [
+          t.loading ? /* @__PURE__ */ a(u, { spacing: 2, padding: 2, children: Array.from({ length: t.loadingRows ?? 4 }).map((e, i) => /* @__PURE__ */ o(u, { spacing: 0.5, children: [
+            /* @__PURE__ */ a(L, { variant: "text", width: "60%" }),
+            /* @__PURE__ */ a(L, { variant: "text", width: "40%" })
+          ] }, i)) }) : l.isEmpty ? /* @__PURE__ */ a(H, { ownerState: l, children: t.emptyMessage ?? "No records to display" }) : /* @__PURE__ */ o(M, { ownerState: l, ref: c.listRef, children: [
+            C.map(I),
+            r.hasMore && /* @__PURE__ */ a(T, { ownerState: l, ref: c.sentinelRef, children: r.isLoadingMore && /* @__PURE__ */ a(w, { size: 18 }) })
+          ] }),
+          r.showPagination && /* @__PURE__ */ a(j, { ownerState: l, children: /* @__PURE__ */ a(
+            x,
+            {
+              component: "div",
+              count: r.count,
+              page: r.page,
+              rowsPerPage: r.rowsPerPage,
+              rowsPerPageOptions: r.rowsPerPageOptions,
+              onPageChange: d.handleChangePage,
+              onRowsPerPageChange: d.handleChangeRowsPerPage
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  Q as DataList
+};

package/dist/components/data-list/logic.js

@@ -0,0 +1,224 @@
+import { useThemeProps as de } from "@mui/material";
+import { useRef as f, useState as N, useMemo as S, useCallback as ge, useEffect as B } from "react";
+import { c as s } from "../../createReactComponent-C7L-DMHj.js";
+import { a as he, I as pe } from "../../IconCheck-BcUcbvno.js";
+import { I as ve } from "../../IconCircle-HcgE1lHy.js";
+/**
+ * @license @tabler/icons-react v3.44.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const fe = [["path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", key: "svg-0" }], ["path", { d: "M12 8v4", key: "svg-1" }], ["path", { d: "M12 16h.01", key: "svg-2" }]], Me = s("outline", "alert-circle", "AlertCircle", fe);
+/**
+ * @license @tabler/icons-react v3.44.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const me = [["path", { d: "M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6", key: "svg-0" }], ["path", { d: "M9 17v1a3 3 0 0 0 6 0v-1", key: "svg-1" }]], ke = s("outline", "bell", "Bell", me);
+/**
+ * @license @tabler/icons-react v3.44.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const ye = [["path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", key: "svg-0" }], ["path", { d: "M12 7v5l3 3", key: "svg-1" }]], _e = s("outline", "clock", "Clock", ye);
+/**
+ * @license @tabler/icons-react v3.44.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Ie = [["path", { d: "M14 3v4a1 1 0 0 0 1 1h4", key: "svg-0" }], ["path", { d: "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2", key: "svg-1" }], ["path", { d: "M9 9l1 0", key: "svg-2" }], ["path", { d: "M9 13l6 0", key: "svg-3" }], ["path", { d: "M9 17l6 0", key: "svg-4" }]], Pe = s("outline", "file-text", "FileText", Ie);
+/**
+ * @license @tabler/icons-react v3.44.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const be = [["path", { d: "M5 5a5 5 0 0 1 7 0a5 5 0 0 0 7 0v9a5 5 0 0 1 -7 0a5 5 0 0 0 -7 0v-9", key: "svg-0" }], ["path", { d: "M5 21v-7", key: "svg-1" }]], Ne = s("outline", "flag", "Flag", be);
+/**
+ * @license @tabler/icons-react v3.44.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Se = [["path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", key: "svg-0" }], ["path", { d: "M12 9h.01", key: "svg-1" }], ["path", { d: "M11 12h1v4h1", key: "svg-2" }]], we = s("outline", "info-circle", "InfoCircle", Se);
+/**
+ * @license @tabler/icons-react v3.44.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Re = [["path", { d: "M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0", key: "svg-0" }], ["path", { d: "M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0", key: "svg-1" }]], $e = s("outline", "map-pin", "MapPin", Re);
+/**
+ * @license @tabler/icons-react v3.44.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Ce = [["path", { d: "M8 9h8", key: "svg-0" }], ["path", { d: "M8 13h6", key: "svg-1" }], ["path", { d: "M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12", key: "svg-2" }]], Oe = s("outline", "message", "Message", Ce);
+/**
+ * @license @tabler/icons-react v3.44.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Le = [["path", { d: "M15.04 19.745c-.942 .551 -1.964 .976 -3.04 1.255a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3a12 12 0 0 0 8.5 3a12 12 0 0 1 .195 6.015", key: "svg-0" }], ["path", { d: "M19 16v3", key: "svg-1" }], ["path", { d: "M19 22v.01", key: "svg-2" }]], xe = s("outline", "shield-exclamation", "ShieldExclamation", Le);
+/**
+ * @license @tabler/icons-react v3.44.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Te = [["path", { d: "M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3", key: "svg-0" }]], Ae = s("outline", "shield", "Shield", Te);
+/**
+ * @license @tabler/icons-react v3.44.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Ee = [["path", { d: "M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3", key: "svg-0" }]], Be = s("outline", "thumb-up", "ThumbUp", Ee);
+/**
+ * @license @tabler/icons-react v3.44.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Fe = [["path", { d: "M5 7a4 4 0 1 0 8 0a4 4 0 1 0 -8 0", key: "svg-0" }], ["path", { d: "M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2", key: "svg-1" }], ["path", { d: "M16 3.13a4 4 0 0 1 0 7.75", key: "svg-2" }], ["path", { d: "M21 21v-2a4 4 0 0 0 -3 -3.85", key: "svg-3" }]], Ve = s("outline", "users", "Users", Fe), De = {
+  shield: Ae,
+  "shield-alert": xe,
+  "alert-triangle": he,
+  "alert-circle": Me,
+  info: we,
+  bell: ke,
+  check: pe,
+  clock: _e,
+  flag: Ne,
+  file: Pe,
+  "map-pin": $e,
+  message: Oe,
+  "thumb-up": Be,
+  users: Ve,
+  circle: ve
+}, Ue = [5, 10, 25, 50], Ge = "120px", F = (g, d) => {
+  if (!(g != null && g.length) || d === void 0 || d === null) return;
+  const o = `${d}`.trim().toLowerCase();
+  if (o)
+    return g.find((k) => `${k.value}`.trim().toLowerCase() === o);
+}, qe = (g) => {
+  const d = de({ props: g, name: "HCDataList" }), {
+    data: o = [],
+    totalCount: k,
+    payload: i,
+    onChange: r,
+    onItemClick: M,
+    iconStates: V,
+    iconShape: D = "circle",
+    badgeStates: U,
+    endSlot: w = "badge",
+    metaSeparator: G = "•",
+    descriptionLines: j = 1,
+    dense: H = !1,
+    divider: J = !0,
+    headerGutter: K = !1,
+    paginationMode: y = "infinite",
+    rowsPerPage: W = 10,
+    resetKey: q,
+    loading: _ = !1,
+    loadingMore: z = !1
+  } = d, R = f(null), $ = f(null), [Q, C] = N(0), [X, Y] = N(W), l = (i == null ? void 0 : i.pageNumber) ?? Q, a = (i == null ? void 0 : i.rows) ?? X, c = !!r, u = y === "infinite", [O, L] = N(a), p = f(/* @__PURE__ */ new Map()), m = `${q ?? ""}`, x = f(m), h = f(null);
+  x.current !== m && (x.current = m, p.current.clear(), h.current = null), c && u && (l === 0 && p.current.clear(), p.current.set(l, o), h.current === l && (h.current = null));
+  const T = S(() => !c || !u ? o : Array.from(p.current.keys()).sort((e, t) => e - t).flatMap((e) => p.current.get(e) ?? []), [c, u, o, l]), I = c ? k ?? 0 : o.length, v = S(() => u ? c ? T : o.slice(0, O) : c ? o : o.slice(l * a, (l + 1) * a), [u, c, T, o, O, l, a]), P = u && v.length < I, Z = y === "buttons" && I > a, b = ge(() => {
+    if (!c) {
+      L((t) => t + a);
+      return;
+    }
+    const e = l + 1;
+    h.current === null && (h.current = e, r == null || r({ ...i, pageNumber: e, rows: a }));
+  }, [c, a, l, r, i]);
+  B(() => {
+    if (!u || !P || _) return;
+    const e = $.current;
+    if (!e || typeof IntersectionObserver > "u") return;
+    const t = new IntersectionObserver(
+      (n) => {
+        n.some((ue) => ue.isIntersecting) && b();
+      },
+      { root: R.current, rootMargin: Ge }
+    );
+    return t.observe(e), () => t.disconnect();
+  }, [u, P, _, b]), B(() => {
+    u && !c && L(a);
+  }, [u, c, a, m, o.length]);
+  const ee = (e, t) => {
+    C(t), r == null || r({ ...i, pageNumber: t, rows: a });
+  }, te = (e) => {
+    const t = parseInt(e.target.value, 10);
+    Y(t), C(0), r == null || r({ ...i, pageNumber: 0, rows: t });
+  }, ne = (e) => () => {
+    e.disabled || M == null || M(e);
+  }, oe = (e) => !!M && !e.disabled, ae = (e) => {
+    if (!e.meta) return e.description;
+    const t = e.meta.filter((n) => n != null && `${n}`.trim() !== "").map((n) => `${n}`.trim());
+    return t.length ? t.join(` ${G} `) : void 0;
+  }, A = (e) => F(V, e.iconValue), se = (e) => {
+    var n;
+    const t = (n = A(e)) == null ? void 0 : n.icon;
+    return t ? De[t] : void 0;
+  }, E = (e) => F(U, e.status), re = (e) => {
+    var n;
+    const t = E(e);
+    return t ? t.label ?? t.value : ((n = e.status) == null ? void 0 : n.trim()) || void 0;
+  }, ce = (e) => {
+    const t = typeof e.endValue == "string" ? Number(e.endValue) : e.endValue;
+    return Number.isFinite(t) ? Math.min(100, Math.max(0, t)) : 0;
+  }, ie = S(
+    () => JSON.stringify({ title: d.title, data: v }),
+    [d.title, v]
+  ), le = {
+    ...d,
+    iconShape: D,
+    endSlot: w,
+    dense: H,
+    divider: J,
+    descriptionLines: j,
+    headerGutter: K,
+    paginationMode: y,
+    isEmpty: !_ && v.length === 0
+  };
+  return {
+    refs: { listRef: R, sentinelRef: $ },
+    state: {
+      ownerState: le,
+      displayData: v,
+      count: I,
+      page: l,
+      rowsPerPage: a,
+      rowsPerPageOptions: d.rowsPerPageOptions ?? Ue,
+      showPagination: Z,
+      hasMore: P,
+      // Either the caller says a request is running, or we know one is in flight.
+      isLoadingMore: z || h.current !== null,
+      snapshot: ie,
+      endSlot: w,
+      isItemClickable: oe,
+      getSecondaryText: ae,
+      getIconState: A,
+      getIcon: se,
+      getBadgeState: E,
+      getBadgeLabel: re,
+      getProgressValue: ce
+    },
+    actions: {
+      handleChangePage: ee,
+      handleChangeRowsPerPage: te,
+      handleItemClick: ne,
+      loadMore: b
+    }
+  };
+};
+export {
+  qe as useDataListLogic
+};

package/dist/components/data-list/styled.js

@@ -0,0 +1,260 @@
+import { styled as a, List as u, ButtonBase as L, alpha as g, Typography as l, Box as f } from "@mui/material";
+import { resolvePaletteColor as s } from "../metric-card/helpers.js";
+import { Widget as p } from "../widget/styled.js";
+const e = {
+  shouldForwardProp: (t) => t !== "ownerState"
+}, m = a(p.Root, {
+  name: "HCDataList",
+  slot: "Root",
+  ...e
+})(() => ({
+  overflow: "hidden"
+})), C = a(p.Header, {
+  name: "HCDataList",
+  slot: "Header",
+  ...e
+})(({ theme: t, ownerState: o }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: t.spacing(2),
+  padding: t.spacing(1.75, 2),
+  // Separates the header from the first row, as the dashboard cards are drawn. Same
+  // rule the rows use between themselves, so the whole card reads as one ruled list.
+  borderBottom: `1px solid ${t.palette.divider}`,
+  // Clears the widget store's floating menu trigger (absolute, top/right 8px) and
+  // the error badge that parks beside it, so neither lands on the header content.
+  ...o.headerGutter && {
+    paddingRight: typeof o.headerGutter == "number" ? o.headerGutter : 44
+  }
+})), y = ({ theme: t }) => ({
+  ...t.typography.body2,
+  color: t.palette.primary.main,
+  fontWeight: 500,
+  background: "none",
+  border: "none",
+  cursor: "pointer",
+  textDecoration: "none",
+  borderRadius: t.shape.borderRadius,
+  padding: t.spacing(0.25, 0.5),
+  flex: "0 0 auto",
+  "&:hover": {
+    textDecoration: "underline"
+  }
+}), H = a("button", {
+  name: "HCDataList",
+  slot: "HeaderAction"
+})(y), I = a("a", {
+  name: "HCDataList",
+  slot: "HeaderAction"
+})(y), w = a(p.Content, {
+  name: "HCDataList",
+  slot: "Content",
+  ...e
+})(() => ({
+  overflow: "hidden"
+})), v = a(u, {
+  name: "HCDataList",
+  slot: "List",
+  ...e
+})(() => ({
+  flex: 1,
+  overflowY: "auto",
+  padding: 0
+})), h = a("li", {
+  name: "HCDataList",
+  slot: "Item",
+  ...e
+})(({ theme: t, ownerState: o }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: t.spacing(1.5),
+  padding: t.spacing(o.dense ? 1 : 1.5, 2),
+  listStyle: "none",
+  ...o.divider && {
+    "& + &": {
+      borderTop: `1px solid ${t.palette.divider}`
+    }
+  }
+})), B = a(L, {
+  name: "HCDataList",
+  slot: "ItemButton"
+})(({ theme: t }) => ({
+  flex: "1 1 auto",
+  minWidth: 0,
+  display: "flex",
+  alignItems: "center",
+  gap: t.spacing(1.5),
+  justifyContent: "flex-start",
+  textAlign: "left",
+  borderRadius: t.shape.borderRadius,
+  padding: t.spacing(0.5),
+  margin: t.spacing(-0.5),
+  "&:hover": {
+    backgroundColor: t.palette.action.hover
+  },
+  "&.Mui-disabled": {
+    opacity: t.palette.action.disabledOpacity
+  }
+})), R = a("span", {
+  name: "HCDataList",
+  slot: "ItemStart",
+  shouldForwardProp: (t) => t !== "ownerState" && t !== "iconColor" && t !== "iconBackground"
+})(({ theme: t, ownerState: o, iconColor: r, iconBackground: d }) => {
+  const i = s(t, r) ?? t.palette.text.secondary, n = {
+    flex: "0 0 auto",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: i
+  };
+  if (o.iconShape === "plain") return n;
+  const c = o.dense ? 32 : 40;
+  return {
+    ...n,
+    width: c,
+    height: c,
+    // The dashboard's alert rows use a solid disc with a light glyph; a state that
+    // sets only `color` gets a tint of that color instead of a hard-coded grey.
+    backgroundColor: s(t, d) ?? g(i, 0.12),
+    borderRadius: o.iconShape === "circle" ? "50%" : t.shape.borderRadius
+  };
+}), M = a("span", {
+  name: "HCDataList",
+  slot: "ItemMain",
+  ...e
+})(() => ({
+  flex: "1 1 auto",
+  minWidth: 0,
+  display: "flex",
+  flexDirection: "column"
+})), k = a(l, {
+  name: "HCDataList",
+  slot: "ItemTitle"
+})(({ theme: t }) => ({
+  ...t.typography.subtitle2,
+  color: t.palette.text.primary,
+  // Rows live in a resizable widget grid with no character limit — clip to one line
+  // so a long title never reflows the row. Full text on hover.
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis"
+})), P = a(l, {
+  name: "HCDataList",
+  slot: "ItemMeta",
+  ...e
+})(({ theme: t, ownerState: o }) => ({
+  ...t.typography.body2,
+  color: t.palette.text.secondary,
+  marginTop: t.spacing(0.25),
+  ...o.descriptionLines > 0 && {
+    display: "-webkit-box",
+    WebkitBoxOrient: "vertical",
+    WebkitLineClamp: o.descriptionLines,
+    overflow: "hidden"
+  }
+})), T = a("span", {
+  name: "HCDataList",
+  slot: "ItemEnd",
+  ...e
+})(({ theme: t, ownerState: o }) => ({
+  flex: "0 0 auto",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-end",
+  gap: t.spacing(1),
+  // A bar needs room to read as a bar; a badge should only take the width it needs.
+  ...o.endSlot === "progress" && {
+    flex: "0 1 45%",
+    minWidth: 120
+  }
+})), W = a("span", {
+  name: "HCDataList",
+  slot: "Badge",
+  shouldForwardProp: (t) => t !== "badgeColor" && t !== "badgeBackground" && t !== "badgeBorder"
+})(({ theme: t, badgeColor: o, badgeBackground: r, badgeBorder: d }) => {
+  const i = s(t, o) ?? t.palette.text.secondary, n = s(t, d);
+  return {
+    ...t.typography.caption,
+    display: "inline-flex",
+    alignItems: "center",
+    whiteSpace: "nowrap",
+    color: i,
+    // Filled tint by default; an outlined chip is opt-in per state via `borderColor`,
+    // which is how the design's two chip styles differ.
+    backgroundColor: s(t, r) ?? (n ? "transparent" : g(i, 0.12)),
+    border: `1px solid ${n ?? "transparent"}`,
+    borderRadius: 999,
+    padding: t.spacing(0.5, 1.25),
+    fontWeight: 500,
+    lineHeight: 1.2
+  };
+}), S = a(l, {
+  name: "HCDataList",
+  slot: "ItemEnd"
+})(({ theme: t }) => ({
+  ...t.typography.body2,
+  color: t.palette.text.primary,
+  fontWeight: 500,
+  whiteSpace: "nowrap"
+})), j = a(f, {
+  name: "HCDataList",
+  slot: "Empty",
+  ...e
+})(({ theme: t }) => ({
+  flex: 1,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: t.spacing(4, 2),
+  color: t.palette.text.secondary,
+  ...t.typography.body2
+})), A = a("li", {
+  name: "HCDataList",
+  slot: "LoadMore",
+  ...e
+})(({ theme: t }) => ({
+  listStyle: "none",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  minHeight: t.spacing(5),
+  color: t.palette.text.secondary
+})), E = a("div", {
+  name: "HCDataList",
+  slot: "Pagination",
+  ...e
+})(({ theme: t }) => ({
+  flex: "0 0 auto",
+  borderTop: `1px solid ${t.palette.divider}`,
+  ".MuiToolbar-root": {
+    minHeight: 24,
+    paddingLeft: t.spacing(1)
+  },
+  ".MuiTablePagination-actions .MuiButtonBase-root": {
+    padding: t.spacing(0.5)
+  },
+  ".MuiTablePagination-displayedRows": {
+    lineHeight: 1
+  }
+}));
+export {
+  W as DataListBadge,
+  w as DataListContent,
+  j as DataListEmpty,
+  S as DataListEndLabel,
+  C as DataListHeader,
+  H as DataListHeaderActionButton,
+  I as DataListHeaderActionLink,
+  B as DataListItemButton,
+  T as DataListItemEnd,
+  M as DataListItemMain,
+  P as DataListItemMeta,
+  h as DataListItemRow,
+  R as DataListItemStart,
+  k as DataListItemTitle,
+  v as DataListList,
+  A as DataListLoadMore,
+  E as DataListPagination,
+  m as DataListRoot
+};