twenty-ui 2.46.0 → 2.48.0

package/dist/components.mjs

@@ -1,46 +1,48 @@
-import { a as t, i as o, n as s, r, t as n } from "./data-display-CehSwX8i.js";
-import { n as i, t as m } from "./TintedIconTile-BZgRO7cg.js";
-import { a as c, i as p, n as I, o as f, r as g, t as l } from "./feedback-BV1EK98d.js";
-import { n as B, r as C, t as d } from "./Dropdown-CZVEnq0N.js";
-import { a as M, i as S, n as P, o as h, r as w, s as A, t as k } from "./input-CKcuJwhb.js";
-import { n as D, r as y, t as O } from "./layout-Bt-DUE1X.js";
-import { a as b, c as E, i as _, l as x, n as F, o as G, r as J, s as N, t as U } from "./navigation-BVhRDMCr.js";
-import { t as q } from "./settings-Fpo_5Uen.js";
+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";
 export {
-  y as AnimatedIconCrossfade,
+  O as AnimatedIconCrossfade,
   t as AvatarGroup,
-  f as Callout,
+  l as Callout,
   o as CommandBlock,
-  A as CountrySelect,
-  h as CurrencyPicker,
-  N as DEFAULT_COLOR_LABELS,
-  d as Dropdown,
-  C as IconButton,
-  M as ImageInput,
+  h as CountrySelect,
+  M as CurrencyPicker,
+  j as DEFAULT_COLOR_LABELS,
+  B as Dropdown,
+  d as IconButton,
+  v as ImageInput,
   c as InlineBanner,
   r as JsonTree,
-  S as LightButton,
-  B as LightIconButton,
-  E as ListItemButton,
-  w as MainButton,
-  G as MenuItem,
-  b as MenuItemAvatar,
-  _ as MenuItemDraggable,
-  J as MenuItemSuggestion,
-  F as MenuPicker,
+  w as LightButton,
+  T 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,
-  n as NotificationCounter,
-  D as OverflowingList,
-  P as PhoneCountryPicker,
+  P as NumberStepper,
+  y as OverflowingList,
+  A as PhoneCountryPicker,
   k as SearchInput,
-  O as Section,
-  q as SettingsRow,
-  U as TabButton,
+  R as Section,
+  D as SegmentedControl,
+  H as SettingsRow,
+  e as StackIcon,
+  q as TabButton,
   m as TintedIconTile,
   g as Toast,
   I as ToastProvider,
-  l as Toaster,
+  f as Toaster,
   i as getIconTileColorShades,
-  x as useDropdownPage,
+  G as useDropdownPage,
   p as useToast
 };

package/dist/data-display-0QO_WDSs.js

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

package/dist/data-display-CPmTJAWJ.cjs

@@ -0,0 +1 @@
+const o=require("./theme-1XkFz8Qu.cjs"),_=require("./isDefined-DS2Q42p5.cjs"),A=require("./utilities-BeLfNQ0Q.cjs"),k=require("./Loader-Bb72CUQ9.cjs"),y=require("./OverflowingTextWithTooltip-Z2daM0_x.cjs");let p=require("@base-ui/react/use-render"),f=require("@sniptt/guards"),g=require("clsx"),e=require("react/jsx-runtime");var z={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"}},L="_badge_1q6rc_1",F={badge:L},Y=({size:t="sm",color:r="tertiary",shape:s="pill",className:l,render:a,ref:n,...i})=>(0,p.useRender)({defaultTagName:"span",render:a,ref:n,props:{...i,className:(0,g.clsx)(F.badge,l),"data-badge-size":t,"data-badge-color":r,"data-badge-shape":s}}),I="_chip_j2xcu_1",M="_label_j2xcu_26",W="_endElementDivider_j2xcu_75",v={chip:I,label:M,endElementDivider:W},Z={height:"var(--t-spacing-4)"},$=({children:t,size:r="sm",variant:s="ghost",color:l="primary",shape:a="square",weight:n="regular",onClick:i,clickable:d=_.isDefined(i),startElement:c,endElement:u,endElementDivider:b=!1,maxWidth:m,truncate:h=!0,tooltipContent:j,tooltipDelay:C,isTooltipMultiline:w,tooltipPlace:S,alwaysShowTooltip:N=!1,className:O,style:P,render:R,ref:V,...D})=>{const E=_.isDefined(t)&&!(0,f.isBoolean)(t)&&t!=="",B=(0,f.isString)(t)?{text:t,tooltipContent:j}:{text:t??!1,tooltipContent:j??""};return(0,p.useRender)({render:R,ref:V,state:{size:r,variant:s,color:l,shape:a,weight:n,clickable:d,truncate:h},props:{...D,onClick:i,className:(0,g.clsx)(v.chip,O),style:{..._.isDefined(m)?{"--tw-chip-max-width":`calc(${m}px - 2 * var(--tw-chip-padding))`}:{},...P},children:(0,e.jsxs)(e.Fragment,{children:[c,E&&(0,e.jsx)(y.OverflowingTextWithTooltip,{...B,render:(0,e.jsx)("span",{}),className:v.label,style:r==="md"?Z:void 0,truncate:h,tooltipDelay:C,isTooltipMultiline:w,tooltipPlace:S,alwaysShowTooltip:N}),_.isDefined(u)&&u!==!1&&(0,e.jsxs)(e.Fragment,{children:[b&&(0,e.jsx)("span",{className:v.endElementDivider}),u]})]})}})},U="_root_6bfj6_1",G="_circle_6bfj6_13",T={root:U,circle:G},H=({colorName:t,color:r,variant:s,className:l,style:a,render:n,ref:i,...d})=>(0,p.useRender)({defaultTagName:"div",render:n,ref:i,props:{...d,className:(0,g.clsx)(T.root,s==="circle"&&T.circle,l),style:{"--color-sample-color":r??o.themeCssVariables.tag.background[t],"--color-sample-border-color":o.themeCssVariables.tag.text[t],...a}}}),J="_status_y5v42_1",K="_content_y5v42_49",q={status:J,content:K},Q=({children:t,color:r,loading:s=!1,weight:l="regular",className:a,style:n,render:i,ref:d,...c})=>{const u=A.parseThemeColor(r);return(0,p.useRender)({defaultTagName:"span",render:i,ref:d,state:{loading:s,weight:l},props:{"aria-busy":s||void 0,...c,className:(0,g.clsx)(q.status,a),style:{"--tw-status-background":o.themeCssVariables.tag.background[u],"--tw-status-text-color":o.themeCssVariables.tag.text[u],...n},children:(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("span",{className:q.content,children:t}),s&&(0,e.jsx)(k.Loader,{color:r,"aria-hidden":"true",render:(0,e.jsx)("span",{})})]})}})},X="_tag_1rqsl_1",ee="_content_1rqsl_46",te="_overflowingText_1rqsl_55",re="_iconContainer_1rqsl_59",x={tag:X,content:ee,overflowingText:te,iconContainer:re},ae=({children:t,color:r,weight:s="regular",variant:l="soft",startIcon:a,truncate:n=!0,borderStyle:i="solid",className:d,style:c,render:u,ref:b,...m})=>(0,p.useRender)({defaultTagName:"span",render:u,ref:b,state:{variant:l,weight:s,truncate:n},props:{...m,className:(0,g.clsx)(x.tag,d),style:{"--tw-tag-background":r==="transparent"?"transparent":o.themeCssVariables.tag.background[r]??o.themeCssVariables.tag.background.gray,"--tw-tag-text":r==="transparent"?o.themeCssVariables.font.color.secondary:o.themeCssVariables.tag.text[r]??o.themeCssVariables.font.color.secondary,"--tw-tag-border-style":i,...c},children:(0,e.jsxs)(e.Fragment,{children:[_.isDefined(a)&&!(0,f.isBoolean)(a)&&a!==""&&(0,e.jsx)("span",{className:x.iconContainer,"aria-hidden":!0,children:a}),(0,e.jsx)("span",{className:x.content,children:(0,f.isString)(t)&&n?(0,e.jsx)(y.OverflowingTextWithTooltip,{text:t,render:(0,e.jsx)("span",{}),className:x.overflowingText}):t})]})}});Object.defineProperty(exports,"AVATAR_PROPERTIES_BY_SIZE",{enumerable:!0,get:function(){return z}});Object.defineProperty(exports,"Badge",{enumerable:!0,get:function(){return Y}});Object.defineProperty(exports,"Chip",{enumerable:!0,get:function(){return $}});Object.defineProperty(exports,"ColorSample",{enumerable:!0,get:function(){return H}});Object.defineProperty(exports,"Status",{enumerable:!0,get:function(){return Q}});Object.defineProperty(exports,"Tag",{enumerable:!0,get:function(){return ae}});

package/dist/data-display-DjhAHvj1.cjs

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

package/dist/data-display-KyZbLLy-.js

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