twenty-ui 2.45.0 → 2.46.0

package/dist/layout-Bt-DUE1X.js

@@ -0,0 +1,267 @@
+import { t as p } from "./isDefined-fMi6eQ4r.js";
+import { n as re, t as se } from "./OverflowingTextWithTooltip-wRABzEWd.js";
+import { t as P } from "./Popover-C-JjVGKl.js";
+import { t as ae } from "./Heading-pXllCJCO.js";
+import { useRender as j } from "@base-ui/react/use-render";
+import { isNonEmptyString as ne, isString as K } from "@sniptt/guards";
+import { clsx as W } from "clsx";
+import { useCallback as Z, useId as oe, useLayoutEffect as G, useRef as E, useState as O } from "react";
+import { Fragment as ee, jsx as l, jsxs as D } from "react/jsx-runtime";
+import { useMergedRefs as J } from "@base-ui/utils/useMergedRefs";
+var ie = "_container_1hm4x_1", le = "_layer_1hm4x_9", ce = "_visible_1hm4x_23", de = "_hidden_1hm4x_28", N = {
+  container: ie,
+  layer: le,
+  visible: ce,
+  hidden: de
+}, He = ({ isActive: t, activeIcon: e, inactiveIcon: r, className: a, render: s, ref: n, ...o }) => j({
+  defaultTagName: "span",
+  render: s,
+  ref: n,
+  props: {
+    ...o,
+    className: W(N.container, a),
+    children: /* @__PURE__ */ D(ee, { children: [/* @__PURE__ */ l("span", {
+      "aria-hidden": "true",
+      className: W(N.layer, t ? N.hidden : N.visible),
+      children: r
+    }), /* @__PURE__ */ l("span", {
+      "aria-hidden": "true",
+      className: W(N.layer, t ? N.visible : N.hidden),
+      children: e
+    })] })
+  }
+}), ue = "_root_1yq9n_1", me = "_items_1yq9n_11", fe = "_item_1yq9n_11", ve = "_trigger_1yq9n_45", pe = "_popup_1yq9n_72", A = {
+  root: ue,
+  items: me,
+  item: fe,
+  trigger: ve,
+  popup: pe
+}, te = (t) => Z((e) => {
+  if (p(e))
+    return () => {
+      e.contains(e.ownerDocument.activeElement) && t();
+    };
+}, [t]), he = ({ children: t, isHidden: e, isLastVisible: r, onFocusedItemUnmount: a }) => /* @__PURE__ */ l("div", {
+  ref: te(a),
+  className: A.item,
+  "data-hidden": e || void 0,
+  "data-last-visible": r || void 0,
+  "aria-hidden": e || void 0,
+  inert: e,
+  children: t
+}), Q = ({ itemWidths: t, availableWidth: e, gap: r, includePartialItem: a }) => {
+  let s = 0, n = 0;
+  for (const o of t) {
+    const c = s + o + (n > 0 ? r : 0);
+    if (n !== 0 && c > e) {
+      const h = s + r < e;
+      return a && h ? n + 1 : n;
+    }
+    s = c, n += 1;
+  }
+  return n;
+}, _e = ({ items: t, itemElements: e, supportsSynchronousLayout: r }) => {
+  if (!r) return e.map((s) => s.scrollWidth);
+  t.setAttribute("data-measuring", "");
+  const a = e.map((s) => s.clientWidth);
+  return t.removeAttribute("data-measuring"), a;
+}, ge = 100, be = ({ itemCount: t, inlineItemCount: e, reserveCountSpace: r, isMeasurementEnabled: a }) => {
+  const s = E(null), n = E(null), o = E(null), c = E(void 0), h = E({
+    itemCount: t,
+    reserveCountSpace: r
+  }), [T, x] = O(e), [F, y] = O(t > e);
+  return G(() => {
+    h.current = {
+      itemCount: t,
+      reserveCountSpace: r
+    }, c.current?.();
+  }, [
+    t,
+    e,
+    r
+  ]), G(() => {
+    const f = s.current, d = n.current;
+    if (!a || !p(f) || !p(d)) return;
+    const u = p(globalThis.ResizeObserver), R = /* @__PURE__ */ new Set(), v = () => {
+      const b = Array.from(d.children), S = /* @__PURE__ */ new Set([f, ...b]);
+      p(o.current) && S.add(o.current);
+      for (const m of R) S.has(m) || (_?.unobserve(m), R.delete(m));
+      for (const m of S) R.has(m) || (_?.observe(m), R.add(m));
+      const I = h.current, H = _e({
+        items: d,
+        itemElements: b,
+        supportsSynchronousLayout: u
+      }), w = parseFloat(getComputedStyle(d).columnGap) || 0, L = f.clientWidth, V = Q({
+        itemWidths: H,
+        availableWidth: L,
+        gap: w,
+        includePartialItem: !1
+      }), q = I.itemCount > V, U = o.current?.offsetWidth ?? 0, $ = I.reserveCountSpace && q ? Math.max(0, L - U - w) : L;
+      y(q), x(Q({
+        itemWidths: H,
+        availableWidth: $,
+        gap: w,
+        includePartialItem: !I.reserveCountSpace
+      }));
+    }, _ = u ? new ResizeObserver(v) : void 0;
+    c.current = v, v();
+    const g = new MutationObserver(v);
+    if (g.observe(d, {
+      attributes: !0,
+      attributeFilter: [
+        "class",
+        "style",
+        "hidden"
+      ],
+      characterData: !0,
+      childList: !0,
+      subtree: !0
+    }), g.observe(f, { childList: !0 }), !p(_)) {
+      const b = setInterval(v, ge);
+      return window.addEventListener("resize", v), () => {
+        c.current = void 0, clearInterval(b), g.disconnect(), window.removeEventListener("resize", v);
+      };
+    }
+    return () => {
+      c.current = void 0, g.disconnect(), _.disconnect();
+    };
+  }, [a]), {
+    containerRef: s,
+    itemsRef: n,
+    triggerRef: o,
+    visibleItemCount: T,
+    hasOverflow: F
+  };
+}, M = (t) => t.stopPropagation(), X = {
+  onClick: M,
+  onMouseDown: M,
+  onPointerDown: M,
+  onKeyDown: M,
+  onKeyUp: M
+}, Ve = ({ children: t, showOverflowCount: e, maxInlineCount: r, overflowLabel: a = "Show all items", className: s, onMouseEnter: n, onMouseLeave: o, onFocusCapture: c, onBlurCapture: h, ref: T, ...x }) => {
+  const [F, y] = O(!1), [f, d] = O(!1), [u, R] = O(!1), [v, _] = O(), g = e ?? v ?? (F || f || u), b = p(r) && Number.isFinite(r) ? Math.min(t.length, Math.max(0, Math.floor(r))) : t.length, { containerRef: S, itemsRef: I, triggerRef: H, visibleItemCount: w, hasOverflow: L } = be({
+    itemCount: t.length,
+    inlineItemCount: b,
+    reserveCountSpace: g,
+    isMeasurementEnabled: e !== !1 || u
+  }), V = Z(() => {
+    d(!1), _(void 0);
+  }, []), q = te(V), U = J(S, T), $ = J(H, q), m = e === !1 ? b : w, B = t.length - w, k = L && (u || e !== !1);
+  return u && !k && R(!1), /* @__PURE__ */ l(P.Root, {
+    open: u && k,
+    onOpenChange: R,
+    children: /* @__PURE__ */ D("div", {
+      ...x,
+      ref: U,
+      className: W(A.root, s),
+      onMouseEnter: (i) => {
+        y(!0), n?.(i);
+      },
+      onMouseLeave: (i) => {
+        y(!1), o?.(i);
+      },
+      onFocusCapture: (i) => {
+        d(!0), I.current?.contains(i.target) && _((C) => C ?? g), c?.(i);
+      },
+      onBlurCapture: (i) => {
+        d(i.currentTarget.contains(i.relatedTarget)), I.current?.contains(i.relatedTarget) || _(void 0), h?.(i);
+      },
+      children: [
+        /* @__PURE__ */ l("div", {
+          ref: I,
+          className: A.items,
+          children: t.slice(0, b).map((i, C) => /* @__PURE__ */ l(he, {
+            isHidden: C >= m,
+            isLastVisible: e !== !1 && C === m - 1,
+            onFocusedItemUnmount: V,
+            children: i
+          }, i.key ?? C))
+        }),
+        k && /* @__PURE__ */ D(P.Trigger, {
+          ref: $,
+          type: "button",
+          className: A.trigger,
+          "data-visible": g || void 0,
+          "aria-label": `+${B} ${a}`,
+          ...X,
+          children: ["+", B]
+        }),
+        /* @__PURE__ */ l(P.Portal, { children: /* @__PURE__ */ l(P.Positioner, {
+          anchor: S,
+          align: "start",
+          sideOffset: -9,
+          alignOffset: -7,
+          children: /* @__PURE__ */ l(P.Popup, {
+            "aria-label": a,
+            className: A.popup,
+            "data-overflowing-list-popup": "",
+            ...X,
+            children: t
+          })
+        }) })
+      ]
+    })
+  });
+}, ye = "_header_1dz7y_1", Re = "_titleRow_1dz7y_8", Ie = "_title_1dz7y_8", Ne = "_actions_1dz7y_21", Se = "_description_1dz7y_27", z = {
+  header: ye,
+  titleRow: Re,
+  title: Ie,
+  actions: Ne,
+  description: Se
+}, we = ({ title: t, description: e, actions: r, level: a = 2, size: s = "md", color: n = "primary", descriptionLineClamp: o = 5, isDescriptionFocusable: c = !1, render: h, ref: T, className: x, ...F }) => {
+  const y = oe(), f = K(e) ? ne(e) : p(e) && e !== !1, d = K(e) && o !== !1, u = K(e) ? /* @__PURE__ */ l(re, {
+    style: { whiteSpace: "pre-wrap" },
+    children: e
+  }) : e;
+  return j({
+    render: h,
+    ref: T,
+    props: {
+      ...F,
+      className: W(z.header, x),
+      children: /* @__PURE__ */ D(ee, { children: [/* @__PURE__ */ D("div", {
+        className: z.titleRow,
+        children: [/* @__PURE__ */ l(ae, {
+          level: a,
+          size: s,
+          color: n,
+          className: z.title,
+          "aria-describedby": f ? y : void 0,
+          children: t
+        }), p(r) && /* @__PURE__ */ l("div", {
+          className: z.actions,
+          children: r
+        })]
+      }), f && /* @__PURE__ */ l("div", {
+        id: y,
+        className: z.description,
+        children: d ? /* @__PURE__ */ l(se, {
+          text: e,
+          lineClamp: o,
+          isTooltipMultiline: !0,
+          isFocusable: c
+        }) : u
+      })] })
+    }
+  });
+}, Oe = "_root_ztxxm_1", We = "_fullWidth_ztxxm_20", Y = {
+  root: Oe,
+  fullWidth: We
+}, Te = ({ align: t = "left", color: e = "primary", fullWidth: r = !0, className: a, render: s, ref: n, ...o }) => j({
+  render: s,
+  ref: n,
+  props: {
+    ...o,
+    "data-align": t,
+    "data-color": e,
+    className: W(Y.root, r && Y.fullWidth, a)
+  }
+}), qe = {
+  Root: Te,
+  Header: we
+};
+export {
+  Ve as n,
+  He as r,
+  qe as t
+};

package/dist/layout-DJq0Dcmq.cjs

@@ -0,0 +1 @@
+const h=require("./isDefined-DS2Q42p5.cjs"),$=require("./OverflowingTextWithTooltip-CXHiE4BG.cjs"),D=require("./Popover-D_S9MGZm.cjs"),Y=require("./Heading-CTRYClCO.cjs");let U=require("@base-ui/react/use-render"),A=require("@sniptt/guards"),P=require("clsx"),o=require("react"),s=require("react/jsx-runtime"),B=require("@base-ui/utils/useMergedRefs");var Z="_container_1hm4x_1",ee="_layer_1hm4x_9",te="_visible_1hm4x_23",re="_hidden_1hm4x_28",I={container:Z,layer:ee,visible:te,hidden:re},se=({isActive:t,activeIcon:e,inactiveIcon:r,className:n,render:i,ref:a,...c})=>(0,U.useRender)({defaultTagName:"span",render:i,ref:a,props:{...c,className:(0,P.clsx)(I.container,n),children:(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("span",{"aria-hidden":"true",className:(0,P.clsx)(I.layer,t?I.hidden:I.visible),children:r}),(0,s.jsx)("span",{"aria-hidden":"true",className:(0,P.clsx)(I.layer,t?I.visible:I.hidden),children:e})]})}}),ie="_root_1yq9n_1",ne="_items_1yq9n_11",ae="_item_1yq9n_11",oe="_trigger_1yq9n_45",ce="_popup_1yq9n_72",F={root:ie,items:ne,item:ae,trigger:oe,popup:ce},X=t=>(0,o.useCallback)(e=>{if(h.isDefined(e))return()=>{e.contains(e.ownerDocument.activeElement)&&t()}},[t]),le=({children:t,isHidden:e,isLastVisible:r,onFocusedItemUnmount:n})=>(0,s.jsx)("div",{ref:X(n),className:F.item,"data-hidden":e||void 0,"data-last-visible":r||void 0,"aria-hidden":e||void 0,inert:e,children:t}),G=({itemWidths:t,availableWidth:e,gap:r,includePartialItem:n})=>{let i=0,a=0;for(const c of t){const u=i+c+(a>0?r:0);if(a!==0&&u>e){const p=i+r<e;return n&&p?a+1:a}i=u,a+=1}return a},ue=({items:t,itemElements:e,supportsSynchronousLayout:r})=>{if(!r)return e.map(i=>i.scrollWidth);t.setAttribute("data-measuring","");const n=e.map(i=>i.clientWidth);return t.removeAttribute("data-measuring"),n},de=100,fe=({itemCount:t,inlineItemCount:e,reserveCountSpace:r,isMeasurementEnabled:n})=>{const i=(0,o.useRef)(null),a=(0,o.useRef)(null),c=(0,o.useRef)(null),u=(0,o.useRef)(void 0),p=(0,o.useRef)({itemCount:t,reserveCountSpace:r}),[w,N]=(0,o.useState)(e),[q,y]=(0,o.useState)(t>e);return(0,o.useLayoutEffect)(()=>{p.current={itemCount:t,reserveCountSpace:r},u.current?.()},[t,e,r]),(0,o.useLayoutEffect)(()=>{const m=i.current,d=a.current;if(!n||!h.isDefined(m)||!h.isDefined(d))return;const f=h.isDefined(globalThis.ResizeObserver),R=new Set,_=()=>{const x=Array.from(d.children),O=new Set([m,...x]);h.isDefined(c.current)&&O.add(c.current);for(const v of R)O.has(v)||(g?.unobserve(v),R.delete(v));for(const v of O)R.has(v)||(g?.observe(v),R.add(v));const S=p.current,M=ue({items:d,itemElements:x,supportsSynchronousLayout:f}),j=parseFloat(getComputedStyle(d).columnGap)||0,T=m.clientWidth,E=G({itemWidths:M,availableWidth:T,gap:j,includePartialItem:!1}),z=S.itemCount>E,H=c.current?.offsetWidth??0,V=S.reserveCountSpace&&z?Math.max(0,T-H-j):T;y(z),N(G({itemWidths:M,availableWidth:V,gap:j,includePartialItem:!S.reserveCountSpace}))},g=f?new ResizeObserver(_):void 0;u.current=_,_();const b=new MutationObserver(_);if(b.observe(d,{attributes:!0,attributeFilter:["class","style","hidden"],characterData:!0,childList:!0,subtree:!0}),b.observe(m,{childList:!0}),!h.isDefined(g)){const x=setInterval(_,de);return window.addEventListener("resize",_),()=>{u.current=void 0,clearInterval(x),b.disconnect(),window.removeEventListener("resize",_)}}return()=>{u.current=void 0,b.disconnect(),g.disconnect()}},[n]),{containerRef:i,itemsRef:a,triggerRef:c,visibleItemCount:w,hasOverflow:q}},L=t=>t.stopPropagation(),J={onClick:L,onMouseDown:L,onPointerDown:L,onKeyDown:L,onKeyUp:L},ve=({children:t,showOverflowCount:e,maxInlineCount:r,overflowLabel:n="Show all items",className:i,onMouseEnter:a,onMouseLeave:c,onFocusCapture:u,onBlurCapture:p,ref:w,...N})=>{const[q,y]=(0,o.useState)(!1),[m,d]=(0,o.useState)(!1),[f,R]=(0,o.useState)(!1),[_,g]=(0,o.useState)(),b=e??_??(q||m||f),x=h.isDefined(r)&&Number.isFinite(r)?Math.min(t.length,Math.max(0,Math.floor(r))):t.length,{containerRef:O,itemsRef:S,triggerRef:M,visibleItemCount:j,hasOverflow:T}=fe({itemCount:t.length,inlineItemCount:x,reserveCountSpace:b,isMeasurementEnabled:e!==!1||f}),E=(0,o.useCallback)(()=>{d(!1),g(void 0)},[]),z=X(E),H=(0,B.useMergedRefs)(O,w),V=(0,B.useMergedRefs)(M,z),v=e===!1?x:j,K=t.length-j,k=T&&(f||e!==!1);return f&&!k&&R(!1),(0,s.jsx)(D.Popover.Root,{open:f&&k,onOpenChange:R,children:(0,s.jsxs)("div",{...N,ref:H,className:(0,P.clsx)(F.root,i),onMouseEnter:l=>{y(!0),a?.(l)},onMouseLeave:l=>{y(!1),c?.(l)},onFocusCapture:l=>{d(!0),S.current?.contains(l.target)&&g(W=>W??b),u?.(l)},onBlurCapture:l=>{d(l.currentTarget.contains(l.relatedTarget)),S.current?.contains(l.relatedTarget)||g(void 0),p?.(l)},children:[(0,s.jsx)("div",{ref:S,className:F.items,children:t.slice(0,x).map((l,W)=>(0,s.jsx)(le,{isHidden:W>=v,isLastVisible:e!==!1&&W===v-1,onFocusedItemUnmount:E,children:l},l.key??W))}),k&&(0,s.jsxs)(D.Popover.Trigger,{ref:V,type:"button",className:F.trigger,"data-visible":b||void 0,"aria-label":`+${K} ${n}`,...J,children:["+",K]}),(0,s.jsx)(D.Popover.Portal,{children:(0,s.jsx)(D.Popover.Positioner,{anchor:O,align:"start",sideOffset:-9,alignOffset:-7,children:(0,s.jsx)(D.Popover.Popup,{"aria-label":n,className:F.popup,"data-overflowing-list-popup":"",...J,children:t})})})]})})},me="_header_1dz7y_1",_e="_titleRow_1dz7y_8",he="_title_1dz7y_8",pe="_actions_1dz7y_21",ge="_description_1dz7y_27",C={header:me,titleRow:_e,title:he,actions:pe,description:ge},be=({title:t,description:e,actions:r,level:n=2,size:i="md",color:a="primary",descriptionLineClamp:c=5,isDescriptionFocusable:u=!1,render:p,ref:w,className:N,...q})=>{const y=(0,o.useId)(),m=(0,A.isString)(e)?(0,A.isNonEmptyString)(e):h.isDefined(e)&&e!==!1,d=(0,A.isString)(e)&&c!==!1,f=(0,A.isString)(e)?(0,s.jsx)($.Text,{style:{whiteSpace:"pre-wrap"},children:e}):e;return(0,U.useRender)({render:p,ref:w,props:{...q,className:(0,P.clsx)(C.header,N),children:(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)("div",{className:C.titleRow,children:[(0,s.jsx)(Y.Heading,{level:n,size:i,color:a,className:C.title,"aria-describedby":m?y:void 0,children:t}),h.isDefined(r)&&(0,s.jsx)("div",{className:C.actions,children:r})]}),m&&(0,s.jsx)("div",{id:y,className:C.description,children:d?(0,s.jsx)($.OverflowingTextWithTooltip,{text:e,lineClamp:c,isTooltipMultiline:!0,isFocusable:u}):f})]})}})},xe="_root_ztxxm_1",ye="_fullWidth_ztxxm_20",Q={root:xe,fullWidth:ye},Re=({align:t="left",color:e="primary",fullWidth:r=!0,className:n,render:i,ref:a,...c})=>(0,U.useRender)({render:i,ref:a,props:{...c,"data-align":t,"data-color":e,className:(0,P.clsx)(Q.root,r&&Q.fullWidth,n)}}),Se={Root:Re,Header:be};Object.defineProperty(exports,"AnimatedIconCrossfade",{enumerable:!0,get:function(){return se}});Object.defineProperty(exports,"OverflowingList",{enumerable:!0,get:function(){return ve}});Object.defineProperty(exports,"Section",{enumerable:!0,get:function(){return Se}});

package/dist/layout-d4uPminV.cjs

@@ -0,0 +1 @@
+const s=require("./mergeClassNames-D4lshrT6.cjs"),u=require("./TextDirectionContext-pwtyVyKv.cjs");let c=require("clsx"),i=require("react/jsx-runtime"),l=require("@base-ui/react/collapsible"),_=require("@base-ui/react/direction-provider");var d="_panel_i9x0u_1",b="_contained_i9x0u_28",t={panel:d,contained:b},p=({dimension:e="height",containAnimation:r=!0,duration:a="normal",className:n,...o})=>(0,i.jsx)(l.Collapsible.Panel,{"data-dimension":e,"data-duration":a,...o,className:s.mergeClassNames((0,c.clsx)(t.panel,r&&t.contained),n)}),v={Root:l.Collapsible.Root,Trigger:l.Collapsible.Trigger,Panel:p},x=({direction:e="ltr",children:r})=>(0,i.jsx)(u.TextDirectionContext.Provider,{value:e,children:(0,i.jsx)(_.DirectionProvider,{direction:e,children:r})});Object.defineProperty(exports,"Collapsible",{enumerable:!0,get:function(){return v}});Object.defineProperty(exports,"DirectionProvider",{enumerable:!0,get:function(){return x}});

package/dist/layout-xYrynD7_.js

@@ -0,0 +1,29 @@
+import { t as m } from "./mergeClassNames-ClFMR1v0.js";
+import { t as s } from "./TextDirectionContext-zzaQWZg6.js";
+import { clsx as p } from "clsx";
+import { jsx as e } from "react/jsx-runtime";
+import { Collapsible as o } from "@base-ui/react/collapsible";
+import { DirectionProvider as d } from "@base-ui/react/direction-provider";
+var v = "_panel_i9x0u_1", c = "_contained_i9x0u_28", i = {
+  panel: v,
+  contained: c
+}, _ = ({ dimension: r = "height", containAnimation: a = !0, duration: l = "normal", className: t, ...n }) => /* @__PURE__ */ e(o.Panel, {
+  "data-dimension": r,
+  "data-duration": l,
+  ...n,
+  className: m(p(i.panel, a && i.contained), t)
+}), b = {
+  Root: o.Root,
+  Trigger: o.Trigger,
+  Panel: _
+}, h = ({ direction: r = "ltr", children: a }) => /* @__PURE__ */ e(s.Provider, {
+  value: r,
+  children: /* @__PURE__ */ e(d, {
+    direction: r,
+    children: a
+  })
+});
+export {
+  b as n,
+  h as t
+};

package/dist/mergeClassNames-ClFMR1v0.js

@@ -0,0 +1,6 @@
+import { isFunction as o } from "@sniptt/guards";
+import { clsx as p } from "clsx";
+var x = (t, r) => (i) => p(t, o(r) ? r(i) : r);
+export {
+  x as t
+};

package/dist/mergeClassNames-D4lshrT6.cjs

@@ -0,0 +1 @@
+let i=require("@sniptt/guards"),n=require("clsx");var u=(r,e)=>t=>(0,n.clsx)(r,(0,i.isFunction)(e)?e(t):e);Object.defineProperty(exports,"mergeClassNames",{enumerable:!0,get:function(){return u}});