twenty-ui 2.48.0 → 2.50.0

package/dist/components/navigation/index.d.ts

@@ -6,10 +6,15 @@ export type { DropdownContentProps } from './Dropdown/types/DropdownContentProps
 export type { DropdownDismissEvent } from './Dropdown/types/DropdownDismissEvent';
 export type { DropdownHeaderProps } from './Dropdown/types/DropdownHeaderProps';
 export type { DropdownOptionItemProps } from './Dropdown/types/DropdownOptionItemProps';
+export type { DropdownOptionItemSelectEventDetails } from './Dropdown/types/DropdownOptionItemSelectEventDetails';
+export type { DropdownOptionItemState } from './Dropdown/types/DropdownOptionItemState';
 export type { DropdownPageProps } from './Dropdown/types/DropdownPageProps';
 export type { DropdownRootProps } from './Dropdown/types/DropdownRootProps';
 export type { DropdownSearchProps } from './Dropdown/types/DropdownSearchProps';
 export type { DropdownSectionProps } from './Dropdown/types/DropdownSectionProps';
+export type { DropdownSelectionGroupChangeEventDetails } from './Dropdown/types/DropdownSelectionGroupChangeEventDetails';
+export type { DropdownSelectionGroupProps } from './Dropdown/types/DropdownSelectionGroupProps';
+export type { DropdownSelectionGroupState } from './Dropdown/types/DropdownSelectionGroupState';
 export type { DropdownSubmenuProps } from './Dropdown/types/DropdownSubmenuProps';
 export type { DropdownSubmenuTriggerProps } from './Dropdown/types/DropdownSubmenuTriggerProps';
 export type { DropdownTitleProps } from './Dropdown/types/DropdownTitleProps';
@@ -18,18 +23,7 @@ export type { DropdownType } from './Dropdown/types/DropdownType';
 export { ListItemButton } from './ListItemButton/ListItemButton';
 export type { ListItemButtonProps } from './ListItemButton/types/ListItemButtonProps';
 export { DEFAULT_COLOR_LABELS } from './MenuItem/constants/DefaultColorLabels';
-export { MenuItem } from './MenuItem/MenuItem';
 export type { ColorLabels } from './MenuItem/types/ColorLabels';
 export type { MenuItemAccent } from './MenuItem/types/MenuItemAccent';
-export type { MenuItemDraggableGripMode } from './MenuItem/types/MenuItemDraggableGripMode';
-export type { MenuItemProps } from './MenuItem/types/MenuItemProps';
-export { MenuItemAvatar } from './MenuItemAvatar/MenuItemAvatar';
-export type { MenuItemAvatarProps } from './MenuItemAvatar/types/MenuItemAvatarProps';
-export { MenuItemDraggable } from './MenuItemDraggable/MenuItemDraggable';
-export type { MenuItemDraggableProps } from './MenuItemDraggable/types/MenuItemDraggableProps';
-export { MenuItemSuggestion } from './MenuItemSuggestion/MenuItemSuggestion';
-export type { MenuItemSuggestionProps } from './MenuItemSuggestion/types/MenuItemSuggestionProps';
-export { MenuPicker } from './MenuPicker/MenuPicker';
-export type { MenuPickerProps } from './MenuPicker/types/MenuPickerProps';
 export { TabButton } from './TabButton/TabButton';
 export type { TabButtonProps } from './TabButton/types/TabButtonProps';

package/dist/components/navigation.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../Dropdown-BKjAaZS0.cjs"),e=require("../navigation-DrOV5E67.cjs");exports.DEFAULT_COLOR_LABELS=e.DEFAULT_COLOR_LABELS;exports.Dropdown=t.Dropdown;exports.ListItemButton=e.ListItemButton;exports.MenuItem=e.MenuItem;exports.MenuItemAvatar=e.MenuItemAvatar;exports.MenuItemDraggable=e.MenuItemDraggable;exports.MenuItemSuggestion=e.MenuItemSuggestion;exports.MenuPicker=e.MenuPicker;exports.TabButton=e.TabButton;exports.useDropdownPage=e.useDropdownPage;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("../Dropdown-DlItz8Gh.cjs"),e=require("../navigation-7Y6gHFlj.cjs");exports.DEFAULT_COLOR_LABELS=e.DEFAULT_COLOR_LABELS;exports.Dropdown=o.Dropdown;exports.ListItemButton=e.ListItemButton;exports.TabButton=e.TabButton;exports.useDropdownPage=e.useDropdownPage;

package/dist/components/navigation.mjs

@@ -1,14 +1,9 @@
-import { t } from "../Dropdown-C2hXrjvD.js";
-import { a as s, c as o, i as n, l as r, n as m, o as u, r as i, s as g, t as p } from "../navigation-B1SRvzKK.js";
+import { t } from "../Dropdown-ChTVyesF.js";
+import { i as a, n as s, r as m, t as n } from "../navigation-BcXCiLE1.js";
 export {
-  g as DEFAULT_COLOR_LABELS,
+  s as DEFAULT_COLOR_LABELS,
   t as Dropdown,
-  o as ListItemButton,
-  u as MenuItem,
-  s as MenuItemAvatar,
-  n as MenuItemDraggable,
-  i as MenuItemSuggestion,
-  m as MenuPicker,
-  p as TabButton,
-  r as useDropdownPage
+  m as ListItemButton,
+  n as TabButton,
+  a as useDropdownPage
 };

package/dist/components/settings.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../settings-BAYsnlZJ.cjs");exports.SettingsRow=e.SettingsRow;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../settings-DT5bEO6A.cjs");exports.SettingsRow=e.SettingsRow;

package/dist/components/settings.mjs

@@ -1,4 +1,4 @@
-import { t as o } from "../settings-BjEZiHXE.js";
+import { t as o } from "../settings-XGSJtobU.js";
 export {
   o as SettingsRow
 };

package/dist/components.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("./data-display-DjhAHvj1.cjs"),i=require("./TintedIconTile-CU2hCerq.cjs"),n=require("./feedback-ybO4n69s.cjs"),r=require("./Dropdown-BKjAaZS0.cjs"),e=require("./input-3D2lXywH.cjs"),u=require("./layout-VaIq7Sjr.cjs"),t=require("./navigation-DrOV5E67.cjs"),a=require("./settings-BAYsnlZJ.cjs");exports.AnimatedIconCrossfade=u.AnimatedIconCrossfade;exports.AvatarGroup=o.AvatarGroup;exports.Callout=n.Callout;exports.CommandBlock=o.CommandBlock;exports.CountrySelect=e.CountrySelect;exports.CurrencyPicker=e.CurrencyPicker;exports.DEFAULT_COLOR_LABELS=t.DEFAULT_COLOR_LABELS;exports.Dropdown=r.Dropdown;exports.IconButton=r.IconButton;exports.ImageInput=e.ImageInput;exports.InlineBanner=n.InlineBanner;exports.JsonTree=o.JsonTree;exports.LightButton=e.LightButton;exports.LightIconButton=r.LightIconButton;exports.ListItemButton=t.ListItemButton;exports.MainButton=e.MainButton;exports.MenuItem=t.MenuItem;exports.MenuItemAvatar=t.MenuItemAvatar;exports.MenuItemDraggable=t.MenuItemDraggable;exports.MenuItemSuggestion=t.MenuItemSuggestion;exports.MenuPicker=t.MenuPicker;exports.MetricRow=o.MetricRow;exports.NumberStepper=e.NumberStepper;exports.OverflowingList=u.OverflowingList;exports.PhoneCountryPicker=e.PhoneCountryPicker;exports.SearchInput=e.SearchInput;exports.Section=u.Section;exports.SegmentedControl=e.SegmentedControl;exports.SettingsRow=a.SettingsRow;exports.StackIcon=o.StackIcon;exports.TabButton=t.TabButton;exports.TintedIconTile=i.TintedIconTile;exports.Toast=n.Toast;exports.ToastProvider=n.ToastProvider;exports.Toaster=n.Toaster;exports.getIconTileColorShades=i.getIconTileColorShades;exports.useDropdownPage=t.useDropdownPage;exports.useToast=n.useToast;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./data-display-CM1yXpnE.cjs"),o=require("./feedback-DspXawf9.cjs"),e=require("./input-CvZ_uB_9.cjs"),r=require("./Dropdown-DlItz8Gh.cjs"),i=require("./layout-iSfGrMrH.cjs"),n=require("./navigation-7Y6gHFlj.cjs"),u=require("./settings-DT5bEO6A.cjs");exports.AnimatedIconCrossfade=i.AnimatedIconCrossfade;exports.AvatarGroup=t.AvatarGroup;exports.Callout=o.Callout;exports.CommandBlock=t.CommandBlock;exports.CountrySelect=e.CountrySelect;exports.CurrencyPicker=e.CurrencyPicker;exports.DEFAULT_COLOR_LABELS=n.DEFAULT_COLOR_LABELS;exports.Dropdown=r.Dropdown;exports.IconButton=r.IconButton;exports.ImageInput=e.ImageInput;exports.InlineBanner=o.InlineBanner;exports.JsonTree=t.JsonTree;exports.LightButton=e.LightButton;exports.LightIconButton=r.LightIconButton;exports.ListItemButton=n.ListItemButton;exports.MainButton=e.MainButton;exports.MetricRow=t.MetricRow;exports.NumberStepper=e.NumberStepper;exports.OverflowingList=i.OverflowingList;exports.PhoneCountryPicker=e.PhoneCountryPicker;exports.SearchInput=e.SearchInput;exports.Section=i.Section;exports.SegmentedControl=e.SegmentedControl;exports.SettingsRow=u.SettingsRow;exports.StackIcon=t.StackIcon;exports.TabButton=n.TabButton;exports.TintedIconTile=t.TintedIconTile;exports.Toast=o.Toast;exports.ToastProvider=o.ToastProvider;exports.Toaster=o.Toaster;exports.getIconTileColorShades=t.getIconTileColorShades;exports.useDropdownPage=n.useDropdownPage;exports.useToast=o.useToast;

package/dist/components.mjs

@@ -1,48 +1,42 @@
-import { a as t, i as o, n as s, r, t as e } from "./data-display-KyZbLLy-.js";
-import { n as i, t as m } from "./TintedIconTile-4BGa8g8n.js";
-import { a as c, i as p, n as I, o as l, r as g, t as f } from "./feedback-CM6fatE8.js";
-import { n as T, r as d, t as B } from "./Dropdown-C2hXrjvD.js";
-import { a as L, c as M, i as P, l as h, n as k, o as w, r as A, s as v, t as D } from "./input-TM3nUdu6.js";
-import { n as y, r as O, t as R } from "./layout-BszCDxAO.js";
-import { a as _, c as x, i as F, l as G, n as J, o as N, r as U, s as j, t as q } from "./navigation-B1SRvzKK.js";
-import { t as H } from "./settings-BjEZiHXE.js";
+import { a, i as t, n as s, o as r, r as n, s as e, t as i } from "./data-display-C-eoJ5En.js";
+import { a as c, i as u, n as p, o as l, r as I, t as T } from "./feedback-4HKPcMRs.js";
+import { a as f, c as B, i as C, l as S, n as g, o as L, r as h, s as w, t as P } from "./input-Qn5_aFYU.js";
+import { a as A, i as v, t as y } from "./Dropdown-ChTVyesF.js";
+import { n as O, r as R, t as b } from "./layout-DDqeMgFv.js";
+import { i as M, n as _, r as x, t as F } from "./navigation-BcXCiLE1.js";
+import { t as J } from "./settings-XGSJtobU.js";
 export {
-  O as AnimatedIconCrossfade,
-  t as AvatarGroup,
+  R as AnimatedIconCrossfade,
+  e as AvatarGroup,
   l as Callout,
-  o as CommandBlock,
-  h as CountrySelect,
-  M as CurrencyPicker,
-  j as DEFAULT_COLOR_LABELS,
-  B as Dropdown,
-  d as IconButton,
-  v as ImageInput,
+  r as CommandBlock,
+  S as CountrySelect,
+  B as CurrencyPicker,
+  _ as DEFAULT_COLOR_LABELS,
+  y as Dropdown,
+  A as IconButton,
+  w as ImageInput,
   c as InlineBanner,
-  r as JsonTree,
-  w as LightButton,
-  T as LightIconButton,
+  a as JsonTree,
+  L as LightButton,
+  v as LightIconButton,
   x as ListItemButton,
-  L as MainButton,
-  N as MenuItem,
-  _ as MenuItemAvatar,
-  F as MenuItemDraggable,
-  U as MenuItemSuggestion,
-  J as MenuPicker,
-  s as MetricRow,
-  P as NumberStepper,
-  y as OverflowingList,
-  A as PhoneCountryPicker,
-  k as SearchInput,
-  R as Section,
-  D as SegmentedControl,
-  H as SettingsRow,
-  e as StackIcon,
-  q as TabButton,
-  m as TintedIconTile,
-  g as Toast,
-  I as ToastProvider,
-  f as Toaster,
-  i as getIconTileColorShades,
-  G as useDropdownPage,
-  p as useToast
+  f as MainButton,
+  t as MetricRow,
+  C as NumberStepper,
+  O as OverflowingList,
+  h as PhoneCountryPicker,
+  g as SearchInput,
+  b as Section,
+  P as SegmentedControl,
+  J as SettingsRow,
+  n as StackIcon,
+  F as TabButton,
+  i as TintedIconTile,
+  I as Toast,
+  p as ToastProvider,
+  T as Toaster,
+  s as getIconTileColorShades,
+  M as useDropdownPage,
+  u as useToast
 };

package/dist/data-display-C-eoJ5En.js

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

package/dist/data-display-CM1yXpnE.cjs

@@ -0,0 +1,2 @@
+const x=require("./theme-1XkFz8Qu.cjs"),_=require("./isDefined-DS2Q42p5.cjs"),X=require("./doNotTranslate-CHE7WmRS.cjs"),Q=require("./VisuallyHidden-B-n4x1KY.cjs"),W=require("./ProgressRing-g1nHGyUp.cjs"),Y=require("./utilities-xZh8D2gd.cjs");let T=require("@base-ui/react/use-render"),u=require("@sniptt/guards"),c=require("clsx"),h=require("react"),e=require("react/jsx-runtime"),B=require("@base-ui/react/collapsible"),b=require("@tabler/icons-react");var Z="_container_5cu4g_1",ee="_itemContainer_5cu4g_6",re="_overflowCountContainer_5cu4g_22",ne="_overflowCount_5cu4g_22",y={container:Z,itemContainer:ee,overflowCountContainer:re,overflowCount:ne},te=4,oe=({avatars:r,className:n,maxVisible:t=te,total:o,renderOverflow:l,overflowShape:a="square",overlap:s="right",overlapOffset:i="3px",render:C,ref:f,...m})=>{const d=h.Children.toArray(r),q=Number.isNaN(t)?0:Math.max(0,Math.floor(t)),N=d.slice(0,q),p=o??d.length,g=(Number.isFinite(p)?Math.max(d.length,Math.floor(p)):d.length)-N.length,A=_.isDefined(l),k=g>0&&(A?l(g):(0,e.jsxs)("span",{className:y.overflowCount,"data-shape":a,children:["+",g]})),V=(0,u.isNonEmptyArray)(h.Children.toArray(k)),P={"--avatar-group-overlap-offset":i},U=(0,T.useRender)({render:C,ref:f,props:{...m,className:(0,c.clsx)(y.container,n),children:(0,e.jsxs)(e.Fragment,{children:[h.Children.map(N,J=>(0,e.jsx)("span",{className:y.itemContainer,"data-overlap":s,style:P,children:J},(0,h.isValidElement)(J)?J.key:void 0)),V&&(0,e.jsx)("span",{className:(0,c.clsx)(y.itemContainer,!A&&y.overflowCountContainer),"data-overlap":s,style:P,children:k})]})}});return(0,u.isNonEmptyArray)(N)||V?U:null},se="_container_1j72k_1",ae="_commands_1j72k_13",le="_actions_1j72k_25",ie="_prompt_1j72k_32",w={container:se,commands:ae,actions:le,prompt:ie},ce=({commands:r,actions:n,render:t,ref:o,className:l,...a})=>(0,T.useRender)({render:t,ref:o,props:{...a,className:(0,c.clsx)(w.container,l),children:(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("pre",{className:w.commands,children:(0,e.jsx)("code",{children:r.map((s,i)=>(0,e.jsxs)("span",{children:[i>0&&`
+`,(0,e.jsx)("span",{className:w.prompt,"aria-hidden":"true",children:"> "}),s]},i))})}),_.isDefined(n)&&(0,e.jsx)("div",{className:w.actions,children:n})]})}}),de="_list_1i4lv_1",ue="_nested_1i4lv_8",F={list:de,nested:ue},_e=({depth:r,className:n,children:t})=>(0,e.jsx)("ul",{className:(0,c.clsx)(F.list,r>0&&F.nested,n),children:t}),z=(0,h.createContext)(void 0),j=()=>{const r=(0,h.useContext)(z);if(!_.isDefined(r))throw new Error(X.doNotTranslate("useJsonTreeContextOrThrow must be used within a JsonTreeContextProvider"));return r},me="_button_1e3ij_1",ve="_red_1e3ij_17",xe="_chevron_1e3ij_22",E={button:me,red:ve,chevron:xe},he=({isOpen:r,onClick:n,variant:t})=>{const o=x.useTheme(),{arrowButtonCollapsedLabel:l,arrowButtonExpandedLabel:a}=j(),s=t==="blue"?x.themeCssVariables.color.blue:t==="red"?x.themeCssVariables.font.color.danger:x.themeCssVariables.font.color.secondary;return(0,e.jsxs)("button",{className:(0,c.clsx)(E.button,t==="red"&&E.red),onClick:n,children:[(0,e.jsx)(Q.VisuallyHidden,{children:r?a:l}),(0,e.jsx)("div",{className:E.chevron,"data-open":r||void 0,children:(0,e.jsx)(b.IconChevronDown,{size:o.icon.size.md,color:s})})]})},be=({label:r,value:n,depth:t,keyPath:o,highlighting:l})=>{const{emptyArrayLabel:a}=j();return(0,e.jsx)($,{elements:[...n.entries()].map(([s,i])=>({id:s,label:String(s),value:i})),renderElementsCount:s=>`[${s}]`,label:r,Icon:b.IconBrackets,depth:t,emptyElementsText:a,keyPath:o,highlighting:l})},pe=({label:r,value:n,depth:t,keyPath:o,highlighting:l})=>{const{emptyObjectLabel:a}=j();return(0,e.jsx)($,{elements:Object.entries(n).map(([s,i])=>({id:s,label:s,value:i})),renderElementsCount:s=>`{${s}}`,label:r,Icon:b.IconCube,depth:t,emptyElementsText:a,keyPath:o,highlighting:l})},je="_labelContainer_1pq94_1",Ce="_blue_1pq94_23",fe="_red_1pq94_29",O={labelContainer:je,blue:Ce,red:fe},H=({label:r,Icon:n,highlighting:t})=>{const o=x.useTheme();return(0,e.jsxs)("span",{className:(0,c.clsx)(O.labelContainer,t==="blue"&&O.blue,t==="red"&&O.red),children:[(0,e.jsx)(n,{size:o.icon.size.md,color:t==="blue"?o.color.blue:t==="red"?o.font.color.danger:o.font.color.tertiary}),(0,e.jsx)("span",{children:r})]})},Ne="_text_1ot24_1",ge="_blue_1ot24_10",ye="_red_1ot24_14",Ie="_button_1ot24_18",S={text:Ne,blue:ge,red:ye,button:Ie},Te=({valueAsString:r,highlighting:n})=>{const{onNodeValueClick:t}=j(),o=_.isDefined(t),l=()=>{t?.(r)},a=(0,c.clsx)(S.text,n==="blue"&&S.blue,n==="red"&&S.red);return o?(0,e.jsx)("button",{className:(0,c.clsx)(a,S.button),type:"button",onClick:l,children:r}):(0,e.jsx)("span",{className:a,children:r})},qe="_listItem_1i7if_1",Ae={listItem:qe},I=r=>(0,e.jsxs)("li",{className:Ae.listItem,children:[r.label&&(0,e.jsx)(H,{label:r.label,Icon:r.Icon,highlighting:r.highlighting}),(0,e.jsx)(Te,{valueAsString:r.valueAsString,highlighting:r.highlighting})]}),ke=r=>(0,u.isArray)(r),G=({label:r,value:n,depth:t,keyPath:o})=>{const{getNodeHighlighting:l,emptyStringLabel:a}=j(),s=l?.(o);return _.isDefined(n)?(0,u.isString)(n)?(0,e.jsx)(I,{label:r,valueAsString:(0,u.isNonEmptyString)(n)?n:a,Icon:b.IconTypography,highlighting:s}):(0,u.isNumber)(n)?(0,e.jsx)(I,{label:r,valueAsString:String(n),Icon:b.IconNumber9,highlighting:s}):(0,u.isBoolean)(n)?(0,e.jsx)(I,{label:r,valueAsString:String(n),Icon:b.IconCheckbox,highlighting:s}):ke(n)?(0,e.jsx)(be,{label:r,value:n,depth:t,keyPath:o,highlighting:s}):(0,e.jsx)(pe,{label:r,value:n,depth:t,keyPath:o,highlighting:s}):(0,e.jsx)(I,{label:r,valueAsString:"null",Icon:b.IconCircleOff,highlighting:s})},we="_container_d0cqx_1",Se="_labelContainer_d0cqx_6",Je="_elementsCount_d0cqx_12",Ee="_elementsCountRed_d0cqx_16",Oe="_panel_d0cqx_20",Le="_list_d0cqx_30",Re="_nested_d0cqx_37",v={container:we,labelContainer:Se,elementsCount:Je,elementsCountRed:Ee,panel:Oe,list:Le,nested:Re},$=({label:r,Icon:n,elements:t,renderElementsCount:o,emptyElementsText:l,depth:a,keyPath:s,highlighting:i})=>{const{shouldExpandNodeInitially:C}=j(),f=!_.isDefined(r),[m,d]=(0,h.useState)(C({keyPath:s,depth:a})),q=(0,e.jsx)("ul",{className:(0,c.clsx)(v.list,a>0&&v.nested),children:t.length===0?(0,e.jsx)(I,{valueAsString:l,highlighting:void 0}):t.map(({id:p,label:g,value:A})=>{const k=(0,u.isNonEmptyString)(s)?`${s}.${p}`:String(p);return(0,e.jsx)(G,{label:g,value:A,depth:a+1,keyPath:k},p)})}),N=()=>{d(!m)};return f?(0,e.jsx)("li",{className:v.container,children:q}):(0,e.jsxs)(B.Collapsible.Root,{className:v.container,open:m,render:(0,e.jsx)("li",{}),children:[(0,e.jsxs)("div",{className:v.labelContainer,children:[(0,e.jsx)(he,{isOpen:m,onClick:N,variant:i==="partial-blue"?"blue":i==="red"?i:void 0}),(0,e.jsx)(H,{label:r,Icon:n,highlighting:i==="red"?i:void 0}),o&&(0,e.jsx)("span",{className:(0,c.clsx)(v.elementsCount,i==="red"&&v.elementsCountRed),children:o(t.length)})]}),(0,e.jsx)(B.Collapsible.Panel,{className:v.panel,children:q})]})},De=({value:r,children:n})=>(0,e.jsx)(z.Provider,{value:r,children:n}),$e=({depth:r})=>r<=1,Ve=({value:r,entries:n,shouldExpandNodeInitially:t=$e,...o})=>(0,e.jsx)(De,{value:{...o,shouldExpandNodeInitially:t},children:(0,e.jsx)(_e,{depth:0,children:_.isDefined(n)?(0,e.jsx)($,{elements:n,Icon:b.IconBrackets,depth:0,keyPath:"",emptyElementsText:o.emptyObjectLabel}):(0,e.jsx)(G,{value:r??null,depth:0,keyPath:""})})}),Pe="_row_1hj4l_1",Be="_label_1hj4l_11",Fe="_icon_1hj4l_20",L={row:Pe,label:Be,icon:Fe},Me=({children:r,startIcon:n,value:t,progress:o,progressColor:l,progressValueText:a,render:s,ref:i,className:C,...f})=>{const m=(0,h.useId)(),d=a??t;return(0,T.useRender)({render:s,ref:i,props:{...f,className:(0,c.clsx)(L.row,C),children:(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)("div",{className:L.label,children:[_.isDefined(n)&&(0,e.jsx)("span",{className:L.icon,"aria-hidden":"true",children:n}),(0,e.jsx)("span",{id:m,children:r})]}),_.isDefined(o)?(0,e.jsx)(W.ProgressRing,{value:o,size:"sm",barColor:l,"aria-labelledby":m,...(0,u.isNonEmptyString)(d)?{"aria-valuetext":d}:{},children:t}):(0,e.jsx)("span",{children:t})]})}})},ze="_root_7l8sk_1",He="_stackedIcon_7l8sk_14",M={root:ze,stackedIcon:He},Ge=({icon:r,stackedIcon:n,className:t,render:o,ref:l,...a})=>(0,T.useRender)({render:o,ref:l,props:{...a,className:(0,c.clsx)(M.root,t),children:(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("span",{"aria-hidden":"true",children:r}),(0,e.jsx)("span",{"aria-hidden":"true",className:M.stackedIcon,children:n})]})}}),R={background:4,border:6,icon:10},D=(r,n)=>x.themeCssVariables.color[`${r}${n}`]??x.themeCssVariables.tag.text[r],K=r=>{const n=Y.parseThemeColor(r);return{backgroundColor:D(n,R.background),iconColor:D(n,R.icon),borderColor:D(n,R.border)}},Ke="_root_9ntdy_1",Ue={root:Ke},Xe=({icon:r,color:n=x.DEFAULT_THEME_COLOR_FALLBACK,className:t,style:o,render:l,ref:a,...s})=>{const i=K(n);return(0,T.useRender)({render:l,ref:a,props:{...s,className:(0,c.clsx)(Ue.root,t),style:{backgroundColor:i.backgroundColor,color:i.iconColor,...o},children:(0,e.jsx)("span",{"aria-hidden":"true",children:r})}})};Object.defineProperty(exports,"AvatarGroup",{enumerable:!0,get:function(){return oe}});Object.defineProperty(exports,"CommandBlock",{enumerable:!0,get:function(){return ce}});Object.defineProperty(exports,"JsonTree",{enumerable:!0,get:function(){return Ve}});Object.defineProperty(exports,"MetricRow",{enumerable:!0,get:function(){return Me}});Object.defineProperty(exports,"StackIcon",{enumerable:!0,get:function(){return Ge}});Object.defineProperty(exports,"TintedIconTile",{enumerable:!0,get:function(){return Xe}});Object.defineProperty(exports,"getIconTileColorShades",{enumerable:!0,get:function(){return K}});