twenty-ui 2.44.0 → 2.46.0

package/dist/data-display-CRDo6TBH.js

@@ -0,0 +1,175 @@
+import { t as _ } from "./isDefined-fMi6eQ4r.js";
+import { a as l } from "./theme-yAk9zrNA.js";
+import { s as O } from "./utilities-DpSj_IdQ.js";
+import { t as V } from "./Loader-BBMC4fe6.js";
+import { t as N } from "./OverflowingTextWithTooltip-wRABzEWd.js";
+import { useRender as x } from "@base-ui/react/use-render";
+import { isBoolean as C, isString as E } from "@sniptt/guards";
+import { clsx as f } from "clsx";
+import { Fragment as v, jsx as s, jsxs as c } from "react/jsx-runtime";
+var pa = {
+  xl: {
+    fontSize: "16px",
+    width: "40px"
+  },
+  lg: {
+    fontSize: "13px",
+    width: "24px"
+  },
+  md: {
+    fontSize: "12px",
+    width: "16px"
+  },
+  sm: {
+    fontSize: "10px",
+    width: "14px"
+  },
+  xs: {
+    fontSize: "8px",
+    width: "12px"
+  }
+}, Y = "_chip_a644p_1", $ = "_endElementDivider_a644p_75", T = {
+  chip: Y,
+  endElementDivider: $
+}, F = { height: "var(--t-spacing-4)" }, da = ({ children: a, size: t = "sm", variant: e = "ghost", color: o = "primary", shape: r = "square", weight: i = "regular", onClick: n, clickable: d = _(n), startElement: m, endElement: p, endElementDivider: h = !1, maxWidth: g, truncate: w = !0, tooltipContent: y, tooltipDelay: z, isTooltipMultiline: k, tooltipPlace: q, alwaysShowTooltip: D = !1, className: P, style: j, render: A, ref: L, ...R }) => {
+  const B = _(a) && !C(a) && a !== "", M = E(a) ? {
+    text: a,
+    tooltipContent: y
+  } : {
+    text: a ?? !1,
+    tooltipContent: y ?? ""
+  };
+  return x({
+    render: A,
+    ref: L,
+    state: {
+      size: t,
+      variant: e,
+      color: o,
+      shape: r,
+      weight: i,
+      clickable: d,
+      truncate: w
+    },
+    props: {
+      ...R,
+      onClick: n,
+      className: f(T.chip, P),
+      style: {
+        ..._(g) ? { "--tw-chip-max-width": `calc(${g}px - 2 * var(--tw-chip-padding))` } : {},
+        ...j
+      },
+      children: /* @__PURE__ */ c(v, { children: [
+        m,
+        B && /* @__PURE__ */ s(N, {
+          ...M,
+          render: /* @__PURE__ */ s("span", {}),
+          style: t === "md" ? F : void 0,
+          truncate: w,
+          tooltipDelay: z,
+          isTooltipMultiline: k,
+          tooltipPlace: q,
+          alwaysShowTooltip: D
+        }),
+        _(p) && p !== !1 && /* @__PURE__ */ c(v, { children: [h && /* @__PURE__ */ s("span", { className: T.endElementDivider }), p] })
+      ] })
+    }
+  });
+}, U = "_root_6bfj6_1", Z = "_circle_6bfj6_13", S = {
+  root: U,
+  circle: Z
+}, ma = ({ colorName: a, color: t, variant: e, className: o, style: r, render: i, ref: n, ...d }) => x({
+  defaultTagName: "div",
+  render: i,
+  ref: n,
+  props: {
+    ...d,
+    className: f(S.root, e === "circle" && S.circle, o),
+    style: {
+      "--color-sample-color": t ?? l.tag.background[a],
+      "--color-sample-border-color": l.tag.text[a],
+      ...r
+    }
+  }
+}), G = "_pill_fndai_1", H = { pill: G }, _a = ({ className: a, label: t, Icon: e, size: o = "sm", color: r = "tertiary" }) => /* @__PURE__ */ c("span", {
+  className: f(H.pill, a),
+  "data-size": o,
+  "data-color": r,
+  children: [e && /* @__PURE__ */ s(e, { size: 12 }), t]
+}), J = "_status_y5v42_1", K = "_content_y5v42_49", b = {
+  status: J,
+  content: K
+}, ca = ({ children: a, color: t, loading: e = !1, weight: o = "regular", className: r, style: i, render: n, ref: d, ...m }) => {
+  const p = O(t);
+  return x({
+    defaultTagName: "span",
+    render: n,
+    ref: d,
+    state: {
+      loading: e,
+      weight: o
+    },
+    props: {
+      "aria-busy": e || void 0,
+      ...m,
+      className: f(b.status, r),
+      style: {
+        "--tw-status-background": l.tag.background[p],
+        "--tw-status-text-color": l.tag.text[p],
+        ...i
+      },
+      children: /* @__PURE__ */ c(v, { children: [/* @__PURE__ */ s("span", {
+        className: b.content,
+        children: a
+      }), e && /* @__PURE__ */ s(V, {
+        color: t,
+        "aria-hidden": "true",
+        render: /* @__PURE__ */ s("span", {})
+      })] })
+    }
+  });
+}, Q = "_tag_1rqsl_1", W = "_content_1rqsl_46", X = "_overflowingText_1rqsl_55", I = "_iconContainer_1rqsl_59", u = {
+  tag: Q,
+  content: W,
+  overflowingText: X,
+  iconContainer: I
+}, fa = ({ children: a, color: t, weight: e = "regular", variant: o = "soft", startIcon: r, truncate: i = !0, borderStyle: n = "solid", className: d, style: m, render: p, ref: h, ...g }) => x({
+  defaultTagName: "span",
+  render: p,
+  ref: h,
+  state: {
+    variant: o,
+    weight: e,
+    truncate: i
+  },
+  props: {
+    ...g,
+    className: f(u.tag, d),
+    style: {
+      "--tw-tag-background": t === "transparent" ? "transparent" : l.tag.background[t] ?? l.tag.background.gray,
+      "--tw-tag-text": t === "transparent" ? l.font.color.secondary : l.tag.text[t] ?? l.font.color.secondary,
+      "--tw-tag-border-style": n,
+      ...m
+    },
+    children: /* @__PURE__ */ c(v, { children: [_(r) && !C(r) && r !== "" && /* @__PURE__ */ s("span", {
+      className: u.iconContainer,
+      "aria-hidden": !0,
+      children: r
+    }), /* @__PURE__ */ s("span", {
+      className: u.content,
+      children: E(a) && i ? /* @__PURE__ */ s(N, {
+        text: a,
+        render: /* @__PURE__ */ s("span", {}),
+        className: u.overflowingText
+      }) : a
+    })] })
+  }
+});
+export {
+  da as a,
+  ma as i,
+  ca as n,
+  pa as o,
+  _a as r,
+  fa as t
+};

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
+};