twenty-ui 2.45.0 → 2.46.0

package/dist/data-display-CehSwX8i.js

@@ -0,0 +1,333 @@
+import { t as u } from "./isDefined-fMi6eQ4r.js";
+import { Jc as W, No as Y, Pn as Z, Tn as ee, Vt as F, rr as re, wn as ne } from "./icon-Bo3y4NHM.js";
+import { a as j, r as D } from "./theme-yAk9zrNA.js";
+import { t as te } from "./VisuallyHidden-CFZP7ybO.js";
+import { t as oe } from "./ProgressRing-Cwqo4hWZ.js";
+import { useRender as k } from "@base-ui/react/use-render";
+import { isArray as ae, isBoolean as le, isNonEmptyArray as B, isNonEmptyString as G, isNumber as se, isString as H } from "@sniptt/guards";
+import { clsx as c } from "clsx";
+import { Children as S, createContext as ie, isValidElement as ce, useContext as de, useId as ue, useState as me } from "react";
+import { Fragment as q, jsx as r, jsxs as d } from "react/jsx-runtime";
+import { Collapsible as M } from "@base-ui/react/collapsible";
+var _e = "_container_5cu4g_1", ve = "_itemContainer_5cu4g_6", he = "_overflowCountContainer_5cu4g_22", pe = "_overflowCount_5cu4g_22", y = {
+  container: _e,
+  itemContainer: ve,
+  overflowCountContainer: he,
+  overflowCount: pe
+}, Ce = 4, vr = ({ avatars: e, className: n, maxVisible: t = Ce, total: o, renderOverflow: s, overflowShape: l = "square", overlap: a = "right", overlapOffset: i = "3px", render: C, ref: b, ...m }) => {
+  const v = S.toArray(e), g = Number.isNaN(t) ? 0 : Math.max(0, Math.floor(t)), f = v.slice(0, g), h = o ?? v.length, N = (Number.isFinite(h) ? Math.max(v.length, Math.floor(h)) : v.length) - f.length, w = u(s), I = N > 0 && (w ? s(N) : /* @__PURE__ */ d("span", {
+    className: y.overflowCount,
+    "data-shape": l,
+    children: ["+", N]
+  })), V = B(S.toArray(I)), O = { "--avatar-group-overlap-offset": i }, Q = k({
+    render: C,
+    ref: b,
+    props: {
+      ...m,
+      className: c(y.container, n),
+      children: /* @__PURE__ */ d(q, { children: [S.map(f, (T) => /* @__PURE__ */ r("span", {
+        className: y.itemContainer,
+        "data-overlap": a,
+        style: O,
+        children: T
+      }, ce(T) ? T.key : void 0)), V && /* @__PURE__ */ r("span", {
+        className: c(y.itemContainer, !w && y.overflowCountContainer),
+        "data-overlap": a,
+        style: O,
+        children: I
+      })] })
+    }
+  });
+  return B(f) || V ? Q : null;
+}, be = "_container_1j72k_1", fe = "_commands_1j72k_13", Ne = "_actions_1j72k_25", ye = "_prompt_1j72k_32", A = {
+  container: be,
+  commands: fe,
+  actions: Ne,
+  prompt: ye
+}, hr = ({ commands: e, actions: n, render: t, ref: o, className: s, ...l }) => k({
+  render: t,
+  ref: o,
+  props: {
+    ...l,
+    className: c(A.container, s),
+    children: /* @__PURE__ */ d(q, { children: [/* @__PURE__ */ r("pre", {
+      className: A.commands,
+      children: /* @__PURE__ */ r("code", { children: e.map((a, i) => /* @__PURE__ */ d("span", { children: [
+        i > 0 && `
+`,
+        /* @__PURE__ */ r("span", {
+          className: A.prompt,
+          "aria-hidden": "true",
+          children: "> "
+        }),
+        a
+      ] }, i)) })
+    }), u(n) && /* @__PURE__ */ r("div", {
+      className: A.actions,
+      children: n
+    })] })
+  }
+}), xe = "_list_1i4lv_1", ge = "_nested_1i4lv_8", P = {
+  list: xe,
+  nested: ge
+}, we = ({ depth: e, className: n, children: t }) => /* @__PURE__ */ r("ul", {
+  className: c(P.list, e > 0 && P.nested, n),
+  children: t
+}), K = ie(void 0), p = () => {
+  const e = de(K);
+  if (!u(e)) throw new Error("useJsonTreeContextOrThrow must be used within a JsonTreeContextProvider");
+  return e;
+}, Ie = "_button_1e3ij_1", Ae = "_red_1e3ij_17", Je = "_chevron_1e3ij_22", $ = {
+  button: Ie,
+  red: Ae,
+  chevron: Je
+}, Te = ({ isOpen: e, onClick: n, variant: t }) => {
+  const o = D(), { arrowButtonCollapsedLabel: s, arrowButtonExpandedLabel: l } = p(), a = t === "blue" ? j.color.blue : t === "red" ? j.font.color.danger : j.font.color.secondary;
+  return /* @__PURE__ */ d("button", {
+    className: c($.button, t === "red" && $.red),
+    onClick: n,
+    children: [/* @__PURE__ */ r(te, { children: e ? l : s }), /* @__PURE__ */ r("div", {
+      className: $.chevron,
+      "data-open": e || void 0,
+      children: /* @__PURE__ */ r(ee, {
+        size: o.icon.size.md,
+        color: a
+      })
+    })]
+  });
+}, je = ({ label: e, value: n, depth: t, keyPath: o, highlighting: s }) => {
+  const { emptyArrayLabel: l } = p();
+  return /* @__PURE__ */ r(R, {
+    elements: [...n.entries()].map(([a, i]) => ({
+      id: a,
+      label: String(a),
+      value: i
+    })),
+    renderElementsCount: (a) => `[${a}]`,
+    label: e,
+    Icon: F,
+    depth: t,
+    emptyElementsText: l,
+    keyPath: o,
+    highlighting: s
+  });
+}, Se = ({ label: e, value: n, depth: t, keyPath: o, highlighting: s }) => {
+  const { emptyObjectLabel: l } = p();
+  return /* @__PURE__ */ r(R, {
+    elements: Object.entries(n).map(([a, i]) => ({
+      id: a,
+      label: a,
+      value: i
+    })),
+    renderElementsCount: (a) => `{${a}}`,
+    label: e,
+    Icon: re,
+    depth: t,
+    emptyElementsText: l,
+    keyPath: o,
+    highlighting: s
+  });
+}, $e = "_labelContainer_1pq94_1", Le = "_blue_1pq94_23", Ee = "_red_1pq94_29", L = {
+  labelContainer: $e,
+  blue: Le,
+  red: Ee
+}, U = ({ label: e, Icon: n, highlighting: t }) => {
+  const o = D();
+  return /* @__PURE__ */ d("span", {
+    className: c(L.labelContainer, t === "blue" && L.blue, t === "red" && L.red),
+    children: [/* @__PURE__ */ r(n, {
+      size: o.icon.size.md,
+      color: t === "blue" ? o.color.blue : t === "red" ? o.font.color.danger : o.font.color.tertiary
+    }), /* @__PURE__ */ r("span", { children: e })]
+  });
+}, ke = "_text_1ot24_1", qe = "_blue_1ot24_10", Re = "_red_1ot24_14", Ve = "_button_1ot24_18", J = {
+  text: ke,
+  blue: qe,
+  red: Re,
+  button: Ve
+}, Oe = ({ valueAsString: e, highlighting: n }) => {
+  const { onNodeValueClick: t } = p(), o = u(t), s = () => {
+    t?.(e);
+  }, l = c(J.text, n === "blue" && J.blue, n === "red" && J.red);
+  return o ? /* @__PURE__ */ r("button", {
+    className: c(l, J.button),
+    type: "button",
+    onClick: s,
+    children: e
+  }) : /* @__PURE__ */ r("span", {
+    className: l,
+    children: e
+  });
+}, Be = "_listItem_1i7if_1", Me = { listItem: Be }, x = (e) => /* @__PURE__ */ d("li", {
+  className: Me.listItem,
+  children: [e.label && /* @__PURE__ */ r(U, {
+    label: e.label,
+    Icon: e.Icon,
+    highlighting: e.highlighting
+  }), /* @__PURE__ */ r(Oe, {
+    valueAsString: e.valueAsString,
+    highlighting: e.highlighting
+  })]
+}), Pe = (e) => ae(e), X = ({ label: e, value: n, depth: t, keyPath: o }) => {
+  const { getNodeHighlighting: s, emptyStringLabel: l } = p(), a = s?.(o);
+  return u(n) ? H(n) ? /* @__PURE__ */ r(x, {
+    label: e,
+    valueAsString: G(n) ? n : l,
+    Icon: W,
+    highlighting: a
+  }) : se(n) ? /* @__PURE__ */ r(x, {
+    label: e,
+    valueAsString: String(n),
+    Icon: Y,
+    highlighting: a
+  }) : le(n) ? /* @__PURE__ */ r(x, {
+    label: e,
+    valueAsString: String(n),
+    Icon: ne,
+    highlighting: a
+  }) : Pe(n) ? /* @__PURE__ */ r(je, {
+    label: e,
+    value: n,
+    depth: t,
+    keyPath: o,
+    highlighting: a
+  }) : /* @__PURE__ */ r(Se, {
+    label: e,
+    value: n,
+    depth: t,
+    keyPath: o,
+    highlighting: a
+  }) : /* @__PURE__ */ r(x, {
+    label: e,
+    valueAsString: "null",
+    Icon: Z,
+    highlighting: a
+  });
+}, ze = "_container_d0cqx_1", Fe = "_labelContainer_d0cqx_6", De = "_elementsCount_d0cqx_12", Ge = "_elementsCountRed_d0cqx_16", He = "_panel_d0cqx_20", Ke = "_list_d0cqx_30", Ue = "_nested_d0cqx_37", _ = {
+  container: ze,
+  labelContainer: Fe,
+  elementsCount: De,
+  elementsCountRed: Ge,
+  panel: He,
+  list: Ke,
+  nested: Ue
+}, R = ({ label: e, Icon: n, elements: t, renderElementsCount: o, emptyElementsText: s, depth: l, keyPath: a, highlighting: i }) => {
+  const { shouldExpandNodeInitially: C } = p(), b = !u(e), [m, v] = me(C({
+    keyPath: a,
+    depth: l
+  })), g = /* @__PURE__ */ r("ul", {
+    className: c(_.list, l > 0 && _.nested),
+    children: t.length === 0 ? /* @__PURE__ */ r(x, {
+      valueAsString: s,
+      highlighting: void 0
+    }) : t.map(({ id: h, label: N, value: w }) => {
+      const I = G(a) ? `${a}.${h}` : String(h);
+      return /* @__PURE__ */ r(X, {
+        label: N,
+        value: w,
+        depth: l + 1,
+        keyPath: I
+      }, h);
+    })
+  }), f = () => {
+    v(!m);
+  };
+  return b ? /* @__PURE__ */ r("li", {
+    className: _.container,
+    children: g
+  }) : /* @__PURE__ */ d(M.Root, {
+    className: _.container,
+    open: m,
+    render: /* @__PURE__ */ r("li", {}),
+    children: [/* @__PURE__ */ d("div", {
+      className: _.labelContainer,
+      children: [
+        /* @__PURE__ */ r(Te, {
+          isOpen: m,
+          onClick: f,
+          variant: i === "partial-blue" ? "blue" : i === "red" ? i : void 0
+        }),
+        /* @__PURE__ */ r(U, {
+          label: e,
+          Icon: n,
+          highlighting: i === "red" ? i : void 0
+        }),
+        o && /* @__PURE__ */ r("span", {
+          className: c(_.elementsCount, i === "red" && _.elementsCountRed),
+          children: o(t.length)
+        })
+      ]
+    }), /* @__PURE__ */ r(M.Panel, {
+      className: _.panel,
+      children: g
+    })]
+  });
+}, Xe = ({ value: e, children: n }) => /* @__PURE__ */ r(K.Provider, {
+  value: e,
+  children: n
+}), Qe = ({ depth: e }) => e <= 1, pr = ({ value: e, entries: n, shouldExpandNodeInitially: t = Qe, ...o }) => /* @__PURE__ */ r(Xe, {
+  value: {
+    ...o,
+    shouldExpandNodeInitially: t
+  },
+  children: /* @__PURE__ */ r(we, {
+    depth: 0,
+    children: u(n) ? /* @__PURE__ */ r(R, {
+      elements: n,
+      Icon: F,
+      depth: 0,
+      keyPath: "",
+      emptyElementsText: o.emptyObjectLabel
+    }) : /* @__PURE__ */ r(X, {
+      value: e ?? null,
+      depth: 0,
+      keyPath: ""
+    })
+  })
+}), We = "_row_1hj4l_1", Ye = "_label_1hj4l_11", Ze = "_icon_1hj4l_20", E = {
+  row: We,
+  label: Ye,
+  icon: Ze
+}, Cr = ({ children: e, startIcon: n, value: t, progress: o, progressColor: s, progressValueText: l, render: a, ref: i, className: C, ...b }) => {
+  const m = ue();
+  return k({
+    render: a,
+    ref: i,
+    props: {
+      ...b,
+      className: c(E.row, C),
+      children: /* @__PURE__ */ d(q, { children: [/* @__PURE__ */ d("div", {
+        className: E.label,
+        children: [u(n) && /* @__PURE__ */ r("span", {
+          className: E.icon,
+          "aria-hidden": "true",
+          children: n
+        }), /* @__PURE__ */ r("span", {
+          id: m,
+          children: e
+        })]
+      }), u(o) ? /* @__PURE__ */ r(oe, {
+        value: o,
+        size: "sm",
+        barColor: s,
+        "aria-labelledby": m,
+        "aria-valuetext": l ?? (H(t) ? t : void 0),
+        children: t
+      }) : /* @__PURE__ */ r("span", { children: t })] })
+    }
+  });
+}, er = "_notificationCounter_1lalu_1", rr = "_primary_1lalu_13", nr = "_secondary_1lalu_18", z = {
+  notificationCounter: er,
+  primary: rr,
+  secondary: nr
+}, br = ({ count: e, variant: n = "primary", className: t }) => /* @__PURE__ */ r("div", {
+  className: c(z.notificationCounter, z[n], t),
+  children: e
+});
+export {
+  vr as a,
+  hr as i,
+  Cr as n,
+  pr as r,
+  br as t
+};