@tedi-design-system/react 19.1.0-rc.2 → 19.1.0-rc.20

package/src/tedi/components/content/carousel/use-carousel.es.js

@@ -1,66 +1,66 @@
-import { useState as R, useRef as i, useEffect as G, useMemo as S, useCallback as s } from "react";
-import At from "../../../helpers/hooks/use-breakpoint.es.js";
-import { resolveBreakpointValue as ct } from "./carousel-utils.es.js";
-import { useLabels as Ft } from "../../../providers/label-provider/use-labels.es.js";
-const Xt = {
+import { useState as S, useRef as i, useEffect as K, useMemo as I, useCallback as s } from "react";
+import Xt from "../../../helpers/hooks/use-breakpoint.es.js";
+import { resolveBreakpointValue as at } from "./carousel-utils.es.js";
+import { useLabels as Nt } from "../../../providers/label-provider/use-labels.es.js";
+const Wt = {
   slidesPerView: { xs: 1 },
   gap: { xs: 1 },
   fade: !1,
   transitionMs: 400,
   loop: !0,
   centered: !1
-}, X = (T, x) => (T % x + x) % x, $t = () => {
-  const { getLabel: T } = Ft(), x = At(), [u, at] = R(Xt), [e, it] = R(0), [l, w] = R(0), [h, J] = R(0), [Q, g] = R(!1), [C, ut] = R(0), [Z, lt] = R(16), [ft, dt] = R(""), N = i(null), tt = i(null), et = i([]), V = i(!1), y = i(!1), K = i(!1), O = i(0), A = i(0), rt = i(0), Y = i(0), U = i(0), j = i(), W = i(0), nt = i(!0), f = i(l), ot = i(h);
-  G(() => {
+}, N = (V, x) => (V % x + x) % x, vt = (V) => {
+  const { getLabel: x } = Nt(), W = Xt(), [u, it] = S(Wt), [e, ut] = S(0), [l, w] = S(0), [h, Q] = S(0), [Z, g] = S(!1), [T, lt] = S(0), [tt, ft] = S(16), [dt, mt] = S(""), E = i(null), et = i(null), rt = i([]), y = i(!1), A = i(!1), O = i(!1), Y = i(0), F = i(0), nt = i(0), U = i(0), j = i(0), H = i(), L = i(0), ot = i(!0), f = i(l), st = i(h);
+  K(() => {
     f.current = l;
-  }, [l]), G(() => {
-    ot.current = h;
+  }, [l]), K(() => {
+    st.current = h;
   }, [h]);
-  const c = S(
-    () => ct(u.slidesPerView, x),
-    [u.slidesPerView, x]
-  ), I = S(() => ct(u.gap, x), [u.gap, x]), P = S(() => I * Z, [I, Z]), n = u.loop, M = S(
+  const c = I(
+    () => at(u.slidesPerView, W),
+    [u.slidesPerView, W]
+  ), b = I(() => at(u.gap, W), [u.gap, W]), C = I(() => b * tt, [b, tt]), n = u.loop, M = I(
     () => Math.max(0, e - Math.ceil(c)),
     [e, c]
-  ), b = s(
+  ), R = s(
     (t) => n ? t : Math.min(Math.max(t, 0), M),
     [n, M]
-  ), m = n ? e : 0, mt = S(() => e === 0 ? 0 : n ? X(Math.floor(l), e) : Math.min(Math.max(Math.round(l), 0), e - 1), [l, e, n]), E = n ? l - h + m : l, ht = n || l > 1e-3, pt = n || l < M - 1e-3, Mt = S(() => {
+  ), m = n ? e : 0, ht = I(() => e === 0 ? 0 : n ? N(Math.floor(l), e) : Math.min(Math.max(Math.round(l), 0), e - 1), [l, e, n]), z = n ? l - h + m : l, pt = n || l > 1e-3, Mt = n || l < M - 1e-3, xt = I(() => {
     if (!e) return [];
     if (!n) return Array.from({ length: e }, (o, a) => a);
     const t = 2 * m + Math.ceil(c), r = h - m;
-    return Array.from({ length: t }, (o, a) => X(r + a, e));
-  }, [e, m, c, h, n]), xt = S(
-    () => `0 0 calc((100% - ${(c - 1) * I}rem) / ${c})`,
-    [c, I]
-  ), wt = S(() => {
-    if (!C)
-      return { gap: `${I}rem`, transform: "translate3d(0,0,0)", transition: "none" };
-    const t = P * (c - 1), r = (C - t) / c, o = n ? l - h + m : l, a = u.centered ? (C - r) / 2 : 0, d = -o * (r + P) + a;
+    return Array.from({ length: t }, (o, a) => N(r + a, e));
+  }, [e, m, c, h, n]), wt = I(
+    () => `0 0 calc((100% - ${(c - 1) * b}rem) / ${c})`,
+    [c, b]
+  ), gt = I(() => {
+    if (!T)
+      return { gap: `${b}rem`, transform: "translate3d(0,0,0)", transition: "none" };
+    const t = C * (c - 1), r = (T - t) / c, o = n ? l - h + m : l, a = u.centered ? (T - r) / 2 : 0, d = -o * (r + C) + a;
     return {
-      gap: `${I}rem`,
+      gap: `${b}rem`,
       transform: `translate3d(${d}px, 0, 0)`,
-      transition: Q ? `transform ${u.transitionMs}ms ease` : "none"
+      transition: Z ? `transform ${u.transitionMs}ms ease` : "none"
     };
   }, [
+    T,
+    b,
     C,
-    I,
-    P,
     c,
     l,
     h,
     m,
-    Q,
+    Z,
     u.transitionMs,
     u.centered,
     n
-  ]), gt = s(
+  ]), Rt = s(
     (t) => {
       const r = Math.ceil(c);
-      return t >= E && t < E + r;
+      return t >= z && t < z + r;
     },
-    [c, E]
-  ), bt = s(
+    [c, z]
+  ), St = s(
     (t, r, o) => {
       const a = [t];
       if (u.fade) {
@@ -70,159 +70,159 @@ const Xt = {
       return a.join(" ");
     },
     [u.fade, c]
-  ), Rt = s((t, r) => {
-    et.current[t] = r;
-  }, []), D = s(() => {
+  ), It = s((t, r) => {
+    rt.current[t] = r;
+  }, []), P = s(() => {
     setTimeout(() => {
-      if (!nt.current || !e) return;
-      const t = n ? X(Math.floor(f.current), e) : Math.min(Math.max(Math.round(f.current), 0), e - 1);
-      dt(T("carousel.slide", t + 1, e));
+      if (!ot.current || !e) return;
+      const t = n ? N(Math.floor(f.current), e) : Math.min(Math.max(Math.round(f.current), 0), e - 1);
+      mt(x("carousel.slide", t + 1, e));
     }, 100);
-  }, [T, e, n]), z = s(() => {
-    V.current = !0, setTimeout(() => {
-      V.current = !1;
+  }, [x, e, n]), $ = s(() => {
+    y.current = !0, setTimeout(() => {
+      y.current = !1;
     }, u.transitionMs);
-  }, [u.transitionMs]), st = s(() => {
+  }, [u.transitionMs]), ct = s(() => {
     setTimeout(() => {
       var r;
-      const t = f.current - ot.current + m;
-      (r = et.current[t]) == null || r.focus({ preventScroll: !0 });
+      const t = f.current - st.current + m;
+      (r = rt.current[t]) == null || r.focus({ preventScroll: !0 });
     });
-  }, [m]), H = s(() => {
-    !e || V.current || !n && f.current >= M - 1e-3 || (g(!0), w((t) => b(t + 1)), z(), D());
-  }, [e, n, M, b, z, D]), q = s(() => {
-    !e || V.current || !n && f.current <= 1e-3 || (g(!0), w((t) => b(t - 1)), z(), D());
-  }, [e, n, b, z, D]), $ = s(
+  }, [m]), q = s(() => {
+    !e || y.current || !n && f.current >= M - 1e-3 || (g(!0), w((t) => R(t + 1)), $(), P());
+  }, [e, n, M, R, $, P]), J = s(() => {
+    !e || y.current || !n && f.current <= 1e-3 || (g(!0), w((t) => R(t - 1)), $(), P());
+  }, [e, n, R, $, P]), v = s(
     (t, r) => {
-      if (!(!e || V.current)) {
+      if (!(!e || y.current)) {
         if (g(!0), n) {
-          const o = X(Math.floor(f.current), e), d = X(t, e) - o;
+          const o = N(Math.floor(f.current), e), d = N(t, e) - o;
           w((p) => p + d);
         } else
-          w(b(t));
-        r != null && r.focusSlide ? K.current = !0 : D();
+          w(R(t));
+        r != null && r.focusSlide ? O.current = !0 : P();
       }
     },
-    [e, n, b, D]
-  ), St = s(
+    [e, n, R, P]
+  ), bt = s(
     (t) => {
-      t.target !== tt.current || t.propertyName !== "transform" || y.current || (g(!1), J(Math.floor(f.current)), K.current && (K.current = !1, st()));
+      t.target !== et.current || t.propertyName !== "transform" || A.current || (g(!1), Q(Math.floor(f.current)), O.current && (O.current = !1, ct()));
     },
-    [st]
-  ), It = s(() => {
-    const t = N.current;
+    [ct]
+  ), kt = s(() => {
+    const t = E.current;
     t && (t.scrollLeft = 0, t.scrollTop = 0);
-  }, []), L = s(() => (C - P * (c - 1)) / c + P, [C, P, c]), kt = s(
+  }, []), D = s(() => (T - C * (c - 1)) / c + C, [T, C, c]), Tt = s(
     (t) => {
       if (!e) return;
       const r = Math.abs(t.deltaX) > Math.abs(t.deltaY) ? t.deltaX : t.shiftKey ? t.deltaY : 0;
       if (!r) return;
-      const o = L();
+      const o = D();
       if (!o) return;
       const a = r / o;
-      W.current += a;
-      const d = m * 0.9, p = n ? h - d : 0, k = n ? h + d : M, v = f.current + a, B = Math.min(Math.max(v, p), k), Lt = B !== v;
-      g(!1), w(B), clearTimeout(j.current), j.current = setTimeout(() => {
+      L.current += a;
+      const d = m * 0.9, p = n ? h - d : 0, k = n ? h + d : M, B = f.current + a, _ = Math.min(Math.max(B, p), k), yt = _ !== B;
+      g(!1), w(_), clearTimeout(H.current), H.current = setTimeout(() => {
         g(!0);
-        const Vt = Math.sign(W.current), F = f.current;
-        let _ = Math.round(F);
-        Math.abs(W.current) > 0.3 && (_ = Vt > 0 ? Math.ceil(F) : Math.floor(F)), Lt && (F <= p && (_ = Math.ceil(p)), F >= k && (_ = Math.floor(k)));
-        const yt = Math.min(Math.max(_, p), k);
-        w(yt), W.current = 0;
+        const At = Math.sign(L.current), X = f.current;
+        let G = Math.round(X);
+        Math.abs(L.current) > 0.3 && (G = At > 0 ? Math.ceil(X) : Math.floor(X)), yt && (X <= p && (G = Math.ceil(p)), X >= k && (G = Math.floor(k)));
+        const Ft = Math.min(Math.max(G, p), k);
+        w(Ft), L.current = 0;
       }, 120);
     },
-    [e, L, m, h, n, M]
-  ), Tt = s(
+    [e, D, m, h, n, M]
+  ), Ct = s(
     (t) => {
       switch (t.key) {
         case "ArrowRight":
         case "PageDown":
-          t.preventDefault(), H();
+          t.preventDefault(), q();
           break;
         case "ArrowLeft":
         case "PageUp":
-          t.preventDefault(), q();
+          t.preventDefault(), J();
           break;
         case "Home":
-          t.preventDefault(), $(0);
+          t.preventDefault(), v(0);
           break;
         case "End":
-          t.preventDefault(), $(e - 1);
+          t.preventDefault(), v(e - 1);
           break;
       }
     },
-    [H, q, $, e]
-  ), Ct = s(
+    [q, J, v, e]
+  ), Pt = s(
     (t) => {
       var r;
-      e && ((r = N.current) == null || r.setPointerCapture(t.pointerId), y.current = !0, g(!1), O.current = t.clientX, A.current = f.current, rt.current = t.timeStamp, Y.current = t.clientX, U.current = t.timeStamp, n && J(Math.floor(f.current)));
+      e && ((r = E.current) == null || r.setPointerCapture(t.pointerId), A.current = !0, g(!1), Y.current = t.clientX, F.current = f.current, nt.current = t.timeStamp, U.current = t.clientX, j.current = t.timeStamp, n && Q(Math.floor(f.current)));
     },
     [e, n]
-  ), Pt = s(
+  ), Dt = s(
     (t) => {
-      if (!y.current) return;
-      const r = L();
+      if (!A.current) return;
+      const r = D();
       if (!r) return;
-      const o = t.clientX - O.current;
+      const o = t.clientX - Y.current;
       if (Number.isNaN(o)) return;
-      Y.current = t.clientX, U.current = t.timeStamp;
-      const a = o / r, d = A.current - a, p = m * 0.9, k = Math.floor(A.current), v = n ? k - p : 0, B = n ? k + p : M;
-      w(Math.min(Math.max(d, v), B));
+      U.current = t.clientX, j.current = t.timeStamp;
+      const a = o / r, d = F.current - a, p = m * 0.9, k = Math.floor(F.current), B = n ? k - p : 0, _ = n ? k + p : M;
+      w(Math.min(Math.max(d, B), _));
     },
-    [L, m, n, M]
-  ), Dt = s(() => {
-    if (!y.current) return;
-    y.current = !1, g(!0);
-    const t = L(), r = Math.round(f.current);
+    [D, m, n, M]
+  ), Vt = s(() => {
+    if (!A.current) return;
+    A.current = !1, g(!0);
+    const t = D(), r = Math.round(f.current);
     let o = r;
-    const a = U.current - rt.current, d = a > 0 && t ? -(Y.current - O.current) / t / a : 0;
-    Math.abs(d) > 15e-4 && r === Math.round(A.current) && (o = Math.round(A.current) + (d > 0 ? 1 : -1)), w(b(o));
-  }, [L, b]);
-  return G(() => {
-    const t = N.current;
+    const a = j.current - nt.current, d = a > 0 && t ? -(U.current - Y.current) / t / a : 0;
+    Math.abs(d) > 15e-4 && r === Math.round(F.current) && (o = Math.round(F.current) + (d > 0 ? 1 : -1)), w(R(o));
+  }, [D, R]);
+  return K(() => {
+    const t = E.current;
     if (!t) return;
     const r = () => {
-      ut(t.clientWidth), lt(parseFloat(getComputedStyle(document.documentElement).fontSize) || 16);
+      lt(t.clientWidth), ft(parseFloat(getComputedStyle(document.documentElement).fontSize) || 16);
     };
     r();
     const o = new ResizeObserver(r);
     return o.observe(t), () => o.disconnect();
-  }, []), G(
+  }, []), K(
     () => () => {
-      nt.current = !1, clearTimeout(j.current);
+      ot.current = !1, clearTimeout(H.current);
     },
     []
   ), {
-    viewportRef: N,
-    trackRef: tt,
-    setSlideRef: Rt,
-    setConfig: at,
-    setSlidesCount: it,
+    viewportRef: E,
+    trackRef: et,
+    setSlideRef: It,
+    setConfig: it,
+    setSlidesCount: ut,
     slidesCount: e,
-    slideIndex: mt,
-    canPrev: ht,
-    canNext: pt,
-    renderedIndices: Mt,
-    renderedActiveIndex: E,
-    slideFlex: xt,
-    trackStyle: wt,
-    contentClassName: bt,
-    isSlideVisible: gt,
-    announcement: ft,
-    regionLabel: T("carousel"),
-    slideLabel: (t) => T("carousel.slide", t, e),
-    next: H,
-    prev: q,
-    goToIndex: $,
-    onTransitionEnd: St,
-    onScroll: It,
-    onWheel: kt,
-    onKeyDown: Tt,
-    onPointerDown: Ct,
-    onPointerMove: Pt,
-    onPointerUp: Dt
+    slideIndex: ht,
+    canPrev: pt,
+    canNext: Mt,
+    renderedIndices: xt,
+    renderedActiveIndex: z,
+    slideFlex: wt,
+    trackStyle: gt,
+    contentClassName: St,
+    isSlideVisible: Rt,
+    announcement: dt,
+    regionLabel: (V == null ? void 0 : V.trim()) || x("carousel"),
+    slideLabel: (t) => x("carousel.slide", t, e),
+    next: q,
+    prev: J,
+    goToIndex: v,
+    onTransitionEnd: bt,
+    onScroll: kt,
+    onWheel: Tt,
+    onKeyDown: Ct,
+    onPointerDown: Pt,
+    onPointerMove: Dt,
+    onPointerUp: Vt
   };
 };
 export {
-  $t as useCarousel
+  vt as useCarousel
 };

package/src/tedi/components/content/table-card/index.d.ts

@@ -0,0 +1 @@
+export * from './table-card';

package/src/tedi/components/content/table-card/table-card.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../../../../../external/classnames/index.cjs.js"),C=require("react"),ve=require("../../base/icon/icon.cjs.js"),c=require("../../base/typography/text/text.cjs.js"),je=require("../../form/checkbox/checkbox.cjs.js"),f=require("../card/card.cjs.js"),Se=require("../label/label.cjs.js"),R=require("../text-group/text-group-list/text-group-list.cjs.js"),t=require("./table-card.module.scss.cjs.js"),ye=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),Ce=require("../../../providers/label-provider/use-labels.cjs.js"),Ae={horizontal:{labelAlign:"right",valueAlign:"right",labelWidth:"var(--text-group-label-width-sm)",rowGap:"0"},vertical:{labelAlign:"left",valueAlign:"left",labelWidth:"auto",rowGap:"var(--layout-grid-gutters-16)"}},Te=l=>l.bold?e.jsx(c.Text,{element:"span",modifiers:"bold",children:l.value}):l.value,Le=(l,_)=>typeof l=="string"?e.jsx(Se.Label,{isSmall:_,children:l}):l,D=l=>{const{getCurrentBreakpointProps:_}=ye.useBreakpointProps(l.defaultServerBreakpoint),{getLabel:A}=Ce.useLabels(),{rows:E,title:s,subtitle:n,endSlot:b,titleElement:T="h3",titleModifiers:u,collapsible:d=!1,defaultOpen:F=!0,open:L,onOpenChange:v,actions:N,summary:i,selectable:m=!1,selected:q,defaultSelected:M=!1,onSelectedChange:j,labelSize:U="default",selectionLabel:V=A("table-card.select-row"),ariaLabel:S,id:$,children:k,layout:z="horizontal",columns:Y=1,labelWidth:J,labelAlign:K,valueAlign:Q,rowAlign:X="start",padding:Z=1,rowGap:y,className:ee}=_(l),te=z==="horizontal",g=Ae[z],ae=K??g.labelAlign,le=Q??g.valueAlign,B=J??g.labelWidth,se=typeof y=="number"?`${y}rem`:y??g.rowGap,ne=C.useId(),x=$??ne,G=`${x}-body`,[de,ie]=C.useState(F),w=L!==void 0,r=d?w?L:de:!0,re=()=>{const a=!r;w||ie(a),v==null||v(a)},[oe,ce]=C.useState(M),H=q!==void 0,ue=H?q:oe,be=a=>{H||ce(a),j==null||j(a)},W=T;d&&!s&&!S&&console.warn("TableCard: a `collapsible` card needs a `title` or `ariaLabel` so its toggle has an accessible name.");const he=!!(m||s||n||b||d),h=!!N,I=!!i,pe=!!k,O=d?r||h:m,fe=r&&!O,me=I||h||pe,ge=h,p=m&&!d&&!!s&&!n,xe=E.map(a=>({label:Le(a.label,U==="small"),value:Te(a),...a.colSpan?{colSpan:a.colSpan}:{}})),P=m?e.jsx(je.Checkbox,{id:`${x}-select`,name:`${x}-select`,value:"selected",label:p?e.jsx(c.Text,{element:"span",color:"primary",modifiers:u,className:o.default(t.default["tedi-table-card__title"],{[t.default["tedi-table-card__title--body"]]:!u}),children:s}):V,hideLabel:!p,checked:ue,onChange:(a,_e)=>be(_e)}):null;return e.jsxs(f.Card,{padding:0,className:o.default(t.default["tedi-table-card"],ee),"aria-label":S,id:x,children:[he&&e.jsxs(f.Card.Content,{padding:fe?{top:1,right:1,bottom:0,left:1}:1,hasSeparator:O,className:o.default(t.default["tedi-table-card__header"],{[t.default["tedi-table-card__header--select-title"]]:p}),children:[p?e.jsx(W,{className:t.default["tedi-table-card__heading"],children:P}):P,d?e.jsx(W,{className:t.default["tedi-table-card__heading"],children:e.jsxs("button",{type:"button",className:t.default["tedi-table-card__toggle"],"aria-expanded":r,"aria-controls":G,"aria-label":s?void 0:S??A(r?"close":"open"),onClick:re,children:[e.jsxs("span",{className:t.default["tedi-table-card__title-group"],children:[s&&e.jsx(c.Text,{element:"span",modifiers:u,className:o.default(t.default["tedi-table-card__title"],{[t.default["tedi-table-card__title--body"]]:!u}),children:s}),n&&e.jsx(c.Text,{element:"span",color:"secondary",modifiers:"small",children:n})]}),b&&e.jsx("span",{className:t.default["tedi-table-card__end-slot"],children:b}),e.jsx("span",{className:o.default(t.default["tedi-table-card__chevron"],{[t.default["tedi-table-card__chevron--open"]]:r}),children:e.jsx(ve.Icon,{name:"expand_more",size:24,color:"inherit"})})]})}):e.jsxs(e.Fragment,{children:[(s||n)&&!p&&e.jsxs("span",{className:t.default["tedi-table-card__title-group"],children:[s&&e.jsx(c.Text,{element:T,modifiers:u,className:o.default(t.default["tedi-table-card__title"],{[t.default["tedi-table-card__title--body"]]:!u}),children:s}),n&&e.jsx(c.Text,{element:"span",color:"secondary",modifiers:"small",children:n})]}),b&&e.jsx("div",{className:t.default["tedi-table-card__end-slot"],children:b})]})]}),e.jsxs("div",{id:G,hidden:d&&!r,className:o.default({[t.default["tedi-table-card__body--has-footer"]]:h}),children:[e.jsx(f.Card.Content,{padding:Z,hasSeparator:me,children:e.jsx(R.TextGroupList,{columns:Y,items:xe,rowGap:se,...te?{type:"horizontal",labelAlign:ae,valueAlign:le,labelWidth:B,rowAlign:X}:{type:"vertical",labelAlign:"left",labelWidth:B}})}),k,I&&e.jsx(f.Card.Content,{padding:1,background:"tertiary",hasSeparator:ge,children:e.jsx(R.TextGroupList,{type:"horizontal",labelAlign:"left",valueAlign:"right",items:[{label:i==null?void 0:i.label,value:e.jsx(c.Text,{element:"span",modifiers:"bold",children:i==null?void 0:i.value})}]})})]}),h&&e.jsx(f.Card.Content,{padding:{vertical:.5,horizontal:1},className:t.default["tedi-table-card__actions"],children:N})]})};D.displayName="TableCard";exports.TableCard=D;

package/src/tedi/components/content/table-card/table-card.d.ts

@@ -0,0 +1,131 @@
+import { default as React } from 'react';
+import { BreakpointSupport } from '../../../helpers';
+import { TextModifiers } from '../../base/typography/text/text';
+import { CardContentPadding } from '../card/card';
+type TableCardAlign = 'left' | 'right';
+export interface TableCardRow {
+    /** Row label (usually the column header). Strings are wrapped in a `<Label>`; nodes render as-is. */
+    label: React.ReactNode;
+    /** Row value — text, a `StatusBadge`, a link, etc. */
+    value: React.ReactNode;
+    /**
+     * Show the value in bold.
+     * @default false
+     */
+    bold?: boolean;
+    /** In a multi-column body, span this row across N columns. Ignored when `columns` is 1. */
+    colSpan?: number;
+}
+type TableCardBreakpointProps = {
+    /**
+     * Row layout: `horizontal` (label beside value) or `vertical` (label above value).
+     * @default horizontal
+     */
+    layout?: 'horizontal' | 'vertical';
+    /**
+     * Number of equal-width columns. Best with `layout="vertical"`.
+     * @default 1
+     */
+    columns?: number;
+    /**
+     * Label column width (horizontal layout); a `number` is pixels.
+     * @default 8.25rem horizontal, auto vertical
+     */
+    labelWidth?: string | number;
+    /** Label text alignment. Defaults to `right` in horizontal layout, `left` otherwise. */
+    labelAlign?: TableCardAlign;
+    /** Value text alignment. Defaults to `right` in horizontal layout, `left` otherwise. */
+    valueAlign?: TableCardAlign;
+    /**
+     * Vertical alignment of each label against its value (horizontal layout only).
+     * `'center'` keeps the label centred when a value is taller, e.g. a `StatusBadge`.
+     * @default start
+     */
+    rowAlign?: 'start' | 'center';
+    /**
+     * Padding of the card body (the rows section). Accepts the same values as `Card.Content`:
+     * a number in rems, `{ vertical, horizontal }`, or `{ top, right, bottom, left }`.
+     * @default 1
+     */
+    padding?: CardContentPadding;
+    /**
+     * Vertical gap between rows in the body. A `number` is rems (matching `padding`); pass a
+     * string for any other CSS length.
+     * Defaults to the layout gutter in `vertical` layout and the list's compact spacing otherwise.
+     */
+    rowGap?: string | number;
+    /** Class name for the root element. */
+    className?: string;
+};
+export interface TableCardProps extends BreakpointSupport<TableCardBreakpointProps> {
+    /** Label / value pairs (one per column) rendered as the card body - a single `<dl>`. */
+    rows: TableCardRow[];
+    /** Header title. Required for `collapsible`. */
+    title?: React.ReactNode;
+    /** Secondary line under the title. */
+    subtitle?: React.ReactNode;
+    /** Content rendered at the end of the header — a `StatusBadge`, a link, etc. */
+    endSlot?: React.ReactNode;
+    /**
+     * Heading tag for `title` (for the document outline). The title stays body-sized unless
+     * `titleModifiers` is set.
+     * @default h3
+     */
+    titleElement?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /** Visual size / weight of the title (`Text` modifiers), independent of `titleElement`. */
+    titleModifiers?: TextModifiers;
+    /**
+     * Make the header a toggle that shows / hides the body. Provide a `title` (or, failing that,
+     * `ariaLabel`) so the toggle has an accessible name.
+     * @default false
+     */
+    collapsible?: boolean;
+    /**
+     * Initial open state (uncontrolled). Ignored when `open` is set.
+     * @default true
+     */
+    defaultOpen?: boolean;
+    /** Controlled open state. Pair with `onOpenChange`. */
+    open?: boolean;
+    /** Called with the next open state when the header toggles. */
+    onOpenChange?: (open: boolean) => void;
+    /** Footer content (e.g. `Button`s), divided from the body. */
+    actions?: React.ReactNode;
+    /** Emphasised summary / total row after the body, on a muted background. */
+    summary?: {
+        label: React.ReactNode;
+        value: React.ReactNode;
+    };
+    /**
+     * Show a leading checkbox to select the row.
+     * @default false
+     */
+    selectable?: boolean;
+    /** Controlled selected state. Pair with `onSelectedChange`. */
+    selected?: boolean;
+    /**
+     * Initial selected state in uncontrolled mode. Ignored when `selected` is provided.
+     * @default false
+     */
+    defaultSelected?: boolean;
+    /** Called with the next selected state when the checkbox toggles. */
+    onSelectedChange?: (selected: boolean) => void;
+    /**
+     * Label text size — `small` uses the 14px label style, `default` the 16px body style.
+     * @default default
+     */
+    labelSize?: 'small' | 'default';
+    /** Accessible name for the selection checkbox. Defaults to the `table-card.select-row` label. */
+    selectionLabel?: string;
+    /** Accessible name for the card region. */
+    ariaLabel?: string;
+    /** Root element id (also wires the collapsible ARIA). Auto-generated when omitted. */
+    id?: string;
+    /** Extra full-width body content after `rows` (e.g. child row-groups). Collapses with the body. */
+    children?: React.ReactNode;
+}
+export declare const TableCard: {
+    (props: TableCardProps): JSX.Element;
+    displayName: string;
+};
+export default TableCard;