@commercetools/nimbus 3.4.0 → 3.5.1

package/dist/chunks/visually-hidden-D-IEsRrW.es.js

@@ -0,0 +1,15 @@
+import { t as e } from "./VisuallyHidden-xzelpFPL.es.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/visually-hidden/visually-hidden.tsx
+var n = (n) => {
+	let { as: r = "div", ...i } = n;
+	return /* @__PURE__ */ t(e, {
+		elementType: r,
+		...i
+	});
+};
+n.displayName = "VisuallyHidden";
+//#endregion
+export { n as t };
+
+//# sourceMappingURL=visually-hidden-D-IEsRrW.es.js.map

package/dist/chunks/visually-hidden-D-IEsRrW.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"visually-hidden-D-IEsRrW.es.js","names":[],"sources":["../../src/components/visually-hidden/visually-hidden.tsx"],"sourcesContent":["import {\n  VisuallyHidden as ReactAriaViusallyHidden,\n  type VisuallyHiddenProps as ReactAriaVisuallyHiddenProps,\n} from \"react-aria\";\n\nexport type VisuallyHiddenProps = Omit<\n  ReactAriaVisuallyHiddenProps,\n  \"elementType\"\n> & {\n  /** specifies the element type to render, use `span` for inline content\n   * and `div` for block content */\n  as?: \"span\" | \"div\";\n};\n\n/**\n * # VisuallyHidden\n *\n * makes content accessible to screen readers but hides it visually\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/accessibility/visually-hidden}\n */\nexport const VisuallyHidden = (props: VisuallyHiddenProps) => {\n  const { as = \"div\", ...leftoverProps } = props;\n  return <ReactAriaViusallyHidden elementType={as} {...leftoverProps} />;\n};\n\nVisuallyHidden.displayName = \"VisuallyHidden\";\n"],"mappings":";;;AAqBA,IAAa,KAAkB,MAA+B;CAC5D,IAAM,EAAE,QAAK,OAAO,GAAG,MAAkB;CACzC,OAAO,kBAAC,GAAD;EAAyB,aAAa;EAAI,GAAI;CAAgB,CAAA;AACvE;AAEA,EAAe,cAAc"}

package/dist/chunks/visually-hidden-WO2h6D4Z.cjs

@@ -0,0 +1,2 @@
+const e=require("./VisuallyHidden-BQfIuYJt.cjs");let t=require("react/jsx-runtime");var n=n=>{let{as:r=`div`,...i}=n;return(0,t.jsx)(e.t,{elementType:r,...i})};n.displayName=`VisuallyHidden`,Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return n}});
+//# sourceMappingURL=visually-hidden-WO2h6D4Z.cjs.map

package/dist/chunks/visually-hidden-WO2h6D4Z.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"visually-hidden-WO2h6D4Z.cjs.js","names":[],"sources":["../../src/components/visually-hidden/visually-hidden.tsx"],"sourcesContent":["import {\n  VisuallyHidden as ReactAriaViusallyHidden,\n  type VisuallyHiddenProps as ReactAriaVisuallyHiddenProps,\n} from \"react-aria\";\n\nexport type VisuallyHiddenProps = Omit<\n  ReactAriaVisuallyHiddenProps,\n  \"elementType\"\n> & {\n  /** specifies the element type to render, use `span` for inline content\n   * and `div` for block content */\n  as?: \"span\" | \"div\";\n};\n\n/**\n * # VisuallyHidden\n *\n * makes content accessible to screen readers but hides it visually\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/accessibility/visually-hidden}\n */\nexport const VisuallyHidden = (props: VisuallyHiddenProps) => {\n  const { as = \"div\", ...leftoverProps } = props;\n  return <ReactAriaViusallyHidden elementType={as} {...leftoverProps} />;\n};\n\nVisuallyHidden.displayName = \"VisuallyHidden\";\n"],"mappings":"uFAqBA,IAAa,EAAkB,GAA+B,CAC5D,GAAM,CAAE,KAAK,MAAO,GAAG,GAAkB,EACzC,OAAO,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CAAyB,YAAa,EAAI,GAAI,CAAgB,CAAA,CACvE,EAEA,EAAe,YAAc"}

package/dist/components/accordion.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/components-tMYnGsnG.cjs.js"),t=require("../chunks/accordion-BJQKQHIG.cjs.js");exports.Accordion=t.t,exports._AccordionContent=e.t,exports._AccordionHeader=e.n,exports._AccordionHeaderRightContent=e.r,exports._AccordionItem=e.i,exports._AccordionRoot=e.a;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/components-D-VxMSW0.cjs"),t=require("../chunks/accordion-DtoB7qSG.cjs");exports.Accordion=t.t,exports._AccordionContent=e.t,exports._AccordionHeader=e.n,exports._AccordionHeaderRightContent=e.r,exports._AccordionItem=e.i,exports._AccordionRoot=e.a;

package/dist/components/accordion.es.js

@@ -1,3 +1,3 @@
-import { a as e, i as t, n, r, t as i } from "../chunks/components-DJj34Iqi.esm.js";
-import { t as a } from "../chunks/accordion-DPnhySdl.esm.js";
+import { a as e, i as t, n, r, t as i } from "../chunks/components-DMY8-g3_.es.js";
+import { t as a } from "../chunks/accordion-NS-me7qP.es.js";
 export { a as Accordion, i as _AccordionContent, n as _AccordionHeader, r as _AccordionHeaderRightContent, t as _AccordionItem, e as _AccordionRoot };

package/dist/components/actions.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/form-action-bar-DhmjijBw.cjs.js");exports.FormActionBar=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/form-action-bar-DdVPkXsf.cjs");exports.FormActionBar=e.t;

package/dist/components/actions.es.js

@@ -1,2 +1,2 @@
-import { t as e } from "../chunks/form-action-bar-CfJjVyeS.esm.js";
+import { t as e } from "../chunks/form-action-bar-B8rb4wrR.es.js";
 export { e as FormActionBar };

package/dist/components/activity-indicator.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/activity-indicator-CmGp3H_M.cjs.js");exports.ActivityIndicator=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/activity-indicator-CmGp3H_M.cjs");exports.ActivityIndicator=e.t;

package/dist/components/activity-indicator.es.js

@@ -1,2 +1,2 @@
-import { t as e } from "../chunks/activity-indicator-SMeTxJxm.esm.js";
+import { t as e } from "../chunks/activity-indicator-SMeTxJxm.es.js";
 export { e as ActivityIndicator };

package/dist/components/alert.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/alert-GP75E0QV.cjs.js");exports.Alert=e.t,exports._AlertActions=e.r,exports._AlertDescription=e.i,exports._AlertDismissButton=e.n,exports._AlertRoot=e.o,exports._AlertTitle=e.a;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/alert-1W2Eavif.cjs");exports.Alert=e.t,exports._AlertActions=e.r,exports._AlertDescription=e.i,exports._AlertDismissButton=e.n,exports._AlertRoot=e.o,exports._AlertTitle=e.a;

package/dist/components/alert.es.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, o as r, r as i, t as a } from "../chunks/alert-Coz95VgD.esm.js";
+import { a as e, i as t, n, o as r, r as i, t as a } from "../chunks/alert-BaevQy1p.es.js";
 export { a as Alert, i as _AlertActions, t as _AlertDescription, n as _AlertDismissButton, r as _AlertRoot, e as _AlertTitle };

package/dist/components/avatar.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/avatar-CYZYJBfO.cjs.js");exports.Avatar=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/avatar-C9OkamvO.cjs");exports.Avatar=e.t;

package/dist/components/avatar.es.js

@@ -1,2 +1,2 @@
-import { t as e } from "../chunks/avatar-9QAY7VNI.esm.js";
+import { t as e } from "../chunks/avatar-CExo0AUn.es.js";
 export { e as Avatar };

package/dist/components/badge/badge.recipe.d.ts

@@ -26,6 +26,17 @@ export declare const badgeRecipe: import('@chakra-ui/react').RecipeDefinition<{
                 height: "500";
             };
         };
+        sm: {
+            fontSize: "400";
+            gap: "100";
+            h: "900";
+            lineHeight: "500";
+            px: "300";
+            _icon: {
+                width: "500";
+                height: "500";
+            };
+        };
         md: {
             fontSize: "400";
             gap: "200";

package/dist/components/badge.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/badge-BtYdLSvg.cjs.js");exports.Badge=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/badge-DYiIw-ZO.cjs");exports.Badge=e.t;

package/dist/components/badge.es.js

@@ -1,2 +1,2 @@
-import { t as e } from "../chunks/badge-Dd0LsXLP.esm.js";
+import { t as e } from "../chunks/badge-B_TxgXJi.es.js";
 export { e as Badge };

package/dist/components/box.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/box-B6vF0vdN.cjs.js");exports.Box=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/box-B6vF0vdN.cjs");exports.Box=e.t;

package/dist/components/box.es.js

@@ -1,2 +1,2 @@
-import { t as e } from "../chunks/box-CZyqYgLL.esm.js";
+import { t as e } from "../chunks/box-CZyqYgLL.es.js";
 export { e as Box };

package/dist/components/breadcrumbs.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/breadcrumbs-TP5PrTuN.cjs.js");exports.Breadcrumbs=e.t,exports._BreadcrumbsItem=e.r,exports._BreadcrumbsRoot=e.n;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/breadcrumbs-DjTSddNB.cjs");exports.Breadcrumbs=e.t,exports._BreadcrumbsItem=e.r,exports._BreadcrumbsRoot=e.n;

package/dist/components/breadcrumbs.es.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "../chunks/breadcrumbs-1MAxlCTS.esm.js";
+import { n as e, r as t, t as n } from "../chunks/breadcrumbs-D-czwkPu.es.js";
 export { n as Breadcrumbs, t as _BreadcrumbsItem, e as _BreadcrumbsRoot };

package/dist/components/button.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/button-D6f5OX0h.cjs.js");exports.Button=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/button-zlbFzh1O.cjs");exports.Button=e.t;

package/dist/components/button.es.js

@@ -1,2 +1,2 @@
-import { t as e } from "../chunks/button-DyM-iqBq.esm.js";
+import { t as e } from "../chunks/button-CWxApN56.es.js";
 export { e as Button };

package/dist/components/calendar.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/calendar-YtVTt0Tm.cjs.js");exports.Calendar=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/calendar-BQPUcx-Q.cjs");exports.Calendar=e.t;

package/dist/components/calendar.es.js

@@ -1,2 +1,2 @@
-import { t as e } from "../chunks/calendar-bydCjK4Q.esm.js";
+import { t as e } from "../chunks/calendar-BgvDuhqv.es.js";
 export { e as Calendar };

package/dist/components/card.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/card-Cs2Z5Nrc.cjs.js");exports.Card=e.t,exports._CardBody=e.r,exports._CardFooter=e.n,exports._CardHeader=e.i,exports._CardRoot=e.a;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/card-ChYF4tXJ.cjs");exports.Card=e.t,exports._CardBody=e.r,exports._CardFooter=e.n,exports._CardHeader=e.i,exports._CardRoot=e.a;

package/dist/components/card.es.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, r, t as i } from "../chunks/card-DbBguIa0.esm.js";
+import { a as e, i as t, n, r, t as i } from "../chunks/card-oumyNI3z.es.js";
 export { i as Card, r as _CardBody, n as _CardFooter, t as _CardHeader, e as _CardRoot };

package/dist/components/chat-message-list.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/chat-message-list-BEQEQzhV.cjs.js");exports.ChatMessageList=e.t,exports._ChatMessageListItem=e.n,exports._ChatMessageListRoot=e.r;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/chat-message-list-C8tG_HdL.cjs");exports.ChatMessageList=e.t,exports._ChatMessageListItem=e.n,exports._ChatMessageListRoot=e.r;

package/dist/components/chat-message-list.es.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "../chunks/chat-message-list-D_4ZLopT.esm.js";
+import { n as e, r as t, t as n } from "../chunks/chat-message-list-y96PUgzk.es.js";
 export { n as ChatMessageList, e as _ChatMessageListItem, t as _ChatMessageListRoot };

package/dist/components/chat-message.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/chat-message-BcuYfXqe.cjs.js");exports.ChatMessage=e.t,exports._ChatMessageActions=e.i,exports._ChatMessageAvatar=e.o,exports._ChatMessageBody=e.a,exports._ChatMessageMeta=e.r,exports._ChatMessageRoot=e.s,exports._ChatMessageTyping=e.n;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/chat-message-DQweuwJ9.cjs");exports.ChatMessage=e.t,exports._ChatMessageActions=e.i,exports._ChatMessageAvatar=e.o,exports._ChatMessageBody=e.a,exports._ChatMessageMeta=e.r,exports._ChatMessageRoot=e.s,exports._ChatMessageTyping=e.n;

package/dist/components/chat-message.es.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "../chunks/chat-message-D9947sio.esm.js";
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "../chunks/chat-message-Caums4e_.es.js";
 export { o as ChatMessage, t as _ChatMessageActions, r as _ChatMessageAvatar, e as _ChatMessageBody, i as _ChatMessageMeta, a as _ChatMessageRoot, n as _ChatMessageTyping };

package/dist/components/checkbox.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/checkbox-DCVW3K9i.cjs.js");exports.Checkbox=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/checkbox-02p60mUs.cjs");exports.Checkbox=e.t;

package/dist/components/checkbox.es.js

@@ -1,2 +1,2 @@
-import { t as e } from "../chunks/checkbox-dSuozQvl.esm.js";
+import { t as e } from "../chunks/checkbox-DoC2Gevz.es.js";
 export { e as Checkbox };

package/dist/components/code.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/code-CYzW0wgO.cjs.js");exports.Code=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/code-CYzW0wgO.cjs");exports.Code=e.t;

package/dist/components/code.es.js

@@ -1,2 +1,2 @@
-import { t as e } from "../chunks/code-Bn8wj68o.esm.js";
+import { t as e } from "../chunks/code-Bn8wj68o.es.js";
 export { e as Code };

package/dist/components/collapsible-motion.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/collapsible-motion-BW3mF74f.cjs.js");exports.CollapsibleMotion=e.t,exports._CollapsibleMotionContent=e.n,exports._CollapsibleMotionRoot=e.i,exports._CollapsibleMotionTrigger=e.r;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/collapsible-motion-C5xK9G1O.cjs");exports.CollapsibleMotion=e.t,exports._CollapsibleMotionContent=e.n,exports._CollapsibleMotionRoot=e.i,exports._CollapsibleMotionTrigger=e.r;

package/dist/components/collapsible-motion.es.js

@@ -1,2 +1,2 @@
-import { i as e, n as t, r as n, t as r } from "../chunks/collapsible-motion-CKrXIpgY.esm.js";
+import { i as e, n as t, r as n, t as r } from "../chunks/collapsible-motion-BFd23PRu.es.js";
 export { r as CollapsibleMotion, t as _CollapsibleMotionContent, e as _CollapsibleMotionRoot, n as _CollapsibleMotionTrigger };

package/dist/components/combobox.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/combobox-3_YvuwlN.cjs.js");exports.ComboBox=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/combobox-CZbetiTg.cjs");exports.ComboBox=e.t;

package/dist/components/combobox.es.js

@@ -1,2 +1,2 @@
-import { t as e } from "../chunks/combobox-C9gMnokj.esm.js";
+import { t as e } from "../chunks/combobox-BM4q5Owd.es.js";
 export { e as ComboBox };

package/dist/components/components.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/components-tMYnGsnG.cjs.js");exports.AccordionContent=e.t,exports.AccordionHeader=e.n,exports.AccordionHeaderRightContent=e.r,exports.AccordionItem=e.i,exports.AccordionRoot=e.a;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/components-D-VxMSW0.cjs");exports.AccordionContent=e.t,exports.AccordionHeader=e.n,exports.AccordionHeaderRightContent=e.r,exports.AccordionItem=e.i,exports.AccordionRoot=e.a;

package/dist/components/components.es.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, r, t as i } from "../chunks/components-DJj34Iqi.esm.js";
+import { a as e, i as t, n, r, t as i } from "../chunks/components-DMY8-g3_.es.js";
 export { i as AccordionContent, n as AccordionHeader, r as AccordionHeaderRightContent, t as AccordionItem, e as AccordionRoot };

package/dist/components/confirmation-dialog.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/confirmation-dialog-DGV0mgM8.cjs.js");exports.ConfirmationDialog=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/confirmation-dialog-DRy1N2vI.cjs");exports.ConfirmationDialog=e.t;

package/dist/components/confirmation-dialog.es.js

@@ -1,2 +1,2 @@
-import { t as e } from "../chunks/confirmation-dialog-EiNUlhQA.esm.js";
+import { t as e } from "../chunks/confirmation-dialog-DOUxiZEx.es.js";
 export { e as ConfirmationDialog };

package/dist/components/constants.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/constants-Di8K6z4e.cjs.js");exports.ALLOWED_PROTOCOLS=e.t,exports.DEFAULT_FORBIDDEN_TAGS=e.n;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../chunks/constants-Di8K6z4e.cjs");exports.ALLOWED_PROTOCOLS=e.t,exports.DEFAULT_FORBIDDEN_TAGS=e.n;

package/dist/components/constants.es.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../chunks/constants-DC5faRyy.esm.js";
+import { n as e, t } from "../chunks/constants-DC5faRyy.es.js";
 export { t as ALLOWED_PROTOCOLS, e as DEFAULT_FORBIDDEN_TAGS };

package/dist/components/data-table/components/data-table.body.d.ts

@@ -5,6 +5,6 @@ import { DataTableBodyProps, DataTableRowItem } from '../data-table.types.js';
  * @supportsStyleProps
  */
 export declare const DataTableBody: {
-    <T extends DataTableRowItem = DataTableRowItem>({ ref, "aria-label": ariaLabelProp, ...props }: DataTableBodyProps<T>): import("react").JSX.Element;
+    <T extends DataTableRowItem = DataTableRowItem>({ ref, children, dependencies: dependenciesFromProps, "aria-label": ariaLabelProp, ...props }: DataTableBodyProps<T>): import("react").JSX.Element;
     displayName: string;
 };

package/dist/components/data-table/components/data-table.header.d.ts

@@ -5,6 +5,6 @@ import { DataTableHeaderProps, DataTableColumnItem } from '../data-table.types.j
  * @supportsStyleProps
  */
 export declare const DataTableHeader: {
-    <T extends DataTableColumnItem = DataTableColumnItem>({ ref, "aria-label": ariaLabelProp, ...props }: DataTableHeaderProps<T>): import("react").JSX.Element;
+    <T extends DataTableColumnItem = DataTableColumnItem>({ ref, children, "aria-label": ariaLabelProp, ...props }: DataTableHeaderProps<T>): import("react").JSX.Element;
     displayName: string;
 };

package/dist/components/data-table/components/data-table.row.d.ts

@@ -1,12 +1,6 @@
-import { DataTableRowItem, DataTableRowProps } from '../data-table.types.js';
-type DataTableRowPerRowProps = {
-    isExpanded: boolean;
-    isPinned: boolean;
-    isFirstPinned: boolean;
-    isLastPinned: boolean;
-    isSinglePinned: boolean;
-};
-declare const DataTableRowInner: <T extends DataTableRowItem = DataTableRowItem>({ row, ref, isExpanded, isPinned, isFirstPinned, isLastPinned, isSinglePinned, ...props }: DataTableRowProps<T> & DataTableRowPerRowProps) => import("react").JSX.Element;
+import { DataTableRowItem, DataTableRowProps, DataTableRowRenderProps } from '../data-table.types.js';
+type DataTableRowPerRowProps = Partial<DataTableRowRenderProps>;
+declare const DataTableRowInner: <T extends DataTableRowItem = DataTableRowItem>({ row, ref, children, className: consumerClassName, isExpanded, isPinned, isFirstPinned, isLastPinned, isSinglePinned, ...props }: DataTableRowProps<T> & DataTableRowPerRowProps) => import("react").JSX.Element;
 export declare const DataTableRow: typeof DataTableRowInner & {
     displayName?: string;
 };

package/dist/components/data-table/data-table.d.ts

@@ -1,4 +1,4 @@
-import { DataTableRoot, DataTableTable, DataTableHeader, DataTableBody, DataTableFooter, DataTableManager } from './components/index.js';
+import { DataTableRoot, DataTableTable, DataTableHeader, DataTableBody, DataTableRow, DataTableCell, DataTableColumn, DataTableFooter, DataTableManager } from './components/index.js';
 import { DataTableProps } from './data-table.types.js';
 export declare const DataTable: (<T extends object = Record<string, unknown>>({ ref: forwardedRef, footer, dragAndDropHooks, ...props }: DataTableProps<T> & {
     footer?: React.ReactNode;
@@ -61,7 +61,7 @@ export declare const DataTable: (<T extends object = Record<string, unknown>>({
      * ```
      */
     Header: {
-        <T extends import('./data-table.types.js').DataTableColumnItem = import('./data-table.types.js').DataTableColumnItem>({ ref, "aria-label": ariaLabelProp, ...props }: import('./data-table.types.js').DataTableHeaderProps<T>): import("react").JSX.Element;
+        <T extends import('./data-table.types.js').DataTableColumnItem = import('./data-table.types.js').DataTableColumnItem>({ ref, children, "aria-label": ariaLabelProp, ...props }: import('./data-table.types.js').DataTableHeaderProps<T>): import("react").JSX.Element;
         displayName: string;
     };
     /**
@@ -81,9 +81,55 @@ export declare const DataTable: (<T extends object = Record<string, unknown>>({
      * ```
      */
     Body: {
-        <T extends import('./data-table.types.js').DataTableRowItem = import('./data-table.types.js').DataTableRowItem>({ ref, "aria-label": ariaLabelProp, ...props }: import('./data-table.types.js').DataTableBodyProps<T>): import("react").JSX.Element;
+        <T extends import('./data-table.types.js').DataTableRowItem = import('./data-table.types.js').DataTableRowItem>({ ref, children, dependencies: dependenciesFromProps, "aria-label": ariaLabelProp, ...props }: import('./data-table.types.js').DataTableBodyProps<T>): import("react").JSX.Element;
         displayName: string;
     };
+    /**
+     * # DataTable.Row
+     *
+     * Individual row component that renders data cells and handles row-level interactions.
+     * Use directly for custom row rendering in compound composition patterns.
+     *
+     * @example
+     * ```tsx
+     * <DataTable.Root columns={columns} rows={rows}>
+     *   <DataTable.Table>
+     *     <DataTable.Header />
+     *     <DataTable.Body />
+     *   </DataTable.Table>
+     * </DataTable.Root>
+     * ```
+     */
+    Row: (<T extends import('./data-table.types.js').DataTableRowItem = import('./data-table.types.js').DataTableRowItem>({ row, ref, children, className: consumerClassName, isExpanded, isPinned, isFirstPinned, isLastPinned, isSinglePinned, ...props }: import('./data-table.types.js').DataTableRowProps<T> & Partial<import('./data-table.types.js').DataTableRowRenderProps>) => import("react").JSX.Element) & {
+        displayName?: string;
+    };
+    /**
+     * # DataTable.Cell
+     *
+     * Individual cell component that displays data values with proper accessibility attributes.
+     * Use directly for custom cell rendering in compound composition patterns.
+     *
+     * @example
+     * ```tsx
+     * <DataTable.Cell>Cell content</DataTable.Cell>
+     * ```
+     */
+    Cell: {
+        ({ ref, children, isDisabled, ...props }: import('./data-table.types.js').DataTableCellProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * # DataTable.Column
+     *
+     * Individual column header component that handles sorting interactions.
+     * Use directly for custom header rendering in compound composition patterns.
+     *
+     * @example
+     * ```tsx
+     * <DataTable.Column allowsSorting>Column Title</DataTable.Column>
+     * ```
+     */
+    Column: import('./data-table.types.js').DataTableColumnComponent;
     /**
      * # DataTable.Footer
      *
@@ -159,4 +205,4 @@ export declare const DataTable: (<T extends object = Record<string, unknown>>({
  * that is parsing the typescript types for our documentation. The _ underscores
  * serve as a reminder that this exports are awkward and should not be used.
  */
-export { DataTableRoot as _DataTableRoot, DataTableTable as _DataTableTable, DataTableHeader as _DataTableHeader, DataTableBody as _DataTableBody, DataTableFooter as _DataTableFooter, DataTableManager as _DataTableManager, };
+export { DataTableRoot as _DataTableRoot, DataTableTable as _DataTableTable, DataTableHeader as _DataTableHeader, DataTableBody as _DataTableBody, DataTableRow as _DataTableRow, DataTableCell as _DataTableCell, DataTableColumn as _DataTableColumn, DataTableFooter as _DataTableFooter, DataTableManager as _DataTableManager, };

package/dist/components/data-table/data-table.i18n.d.ts

@@ -19,6 +19,16 @@ export declare const messages: {
         description: string;
         defaultMessage: string;
     };
+    expandRow: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    collapseRow: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
     dragRow: {
         id: string;
         description: string;
@@ -34,6 +44,11 @@ export declare const messages: {
         description: string;
         defaultMessage: string;
     };
+    nestedContentRow: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
     selectRow: {
         id: string;
         description: string;

package/dist/components/data-table/data-table.messages.d.ts

@@ -3,4 +3,4 @@ export declare const dataTableMessagesStrings: LocalizedStrings<string, Localize
 /**
  * Available message keys for DataTable component
  */
-export type DataTableMessageKey = "comfortable" | "comfortableAriaLabel" | "compact" | "compactAriaLabel" | "dataTable" | "dataTableBody" | "dataTableHeader" | "dragRow" | "dragRowsColumn" | "expandRows" | "fullText" | "fullTextAriaLabel" | "hiddenColumns" | "hiddenColumnsAriaLabel" | "hideColumn" | "layoutSettings" | "layoutSettingsAriaLabel" | "noHiddenColumns" | "pinRows" | "reset" | "resizeColumn" | "rowDensity" | "rowDensityAriaLabel" | "searchHiddenColumns" | "selectRow" | "settings" | "settingsTabsAriaLabel" | "textPreviews" | "textPreviewsAriaLabel" | "textVisibility" | "textVisibilityAriaLabel" | "visibleColumns" | "visibleColumnsAria" | "visibleColumnsList";
+export type DataTableMessageKey = "collapseRow" | "comfortable" | "comfortableAriaLabel" | "compact" | "compactAriaLabel" | "dataTable" | "dataTableBody" | "dataTableHeader" | "dragRow" | "dragRowsColumn" | "expandRow" | "expandRows" | "fullText" | "fullTextAriaLabel" | "hiddenColumns" | "hiddenColumnsAriaLabel" | "hideColumn" | "layoutSettings" | "layoutSettingsAriaLabel" | "nestedContentRow" | "noHiddenColumns" | "pinRows" | "reset" | "resizeColumn" | "rowDensity" | "rowDensityAriaLabel" | "searchHiddenColumns" | "selectRow" | "settings" | "settingsTabsAriaLabel" | "textPreviews" | "textPreviewsAriaLabel" | "textVisibility" | "textVisibilityAriaLabel" | "visibleColumns" | "visibleColumnsAria" | "visibleColumnsList";

package/dist/components/data-table/data-table.types.d.ts

@@ -55,6 +55,10 @@ export type DataTableRowItem<T extends object = Record<string, unknown>> = T & {
     isDisabled?: boolean;
     [key: string]: unknown;
 };
+export type DataTableNestedContentOptions = {
+    /** Collapses the nested content for the current row */
+    close: () => void;
+};
 export type DataTableDensity = "default" | "condensed";
 export type DataTableCustomSettings = {
     icon?: ReactNode;
@@ -65,7 +69,6 @@ export type DataTableContextValue<T extends object = Record<string, unknown>> =
     columns: DataTableColumnItem<T>[];
     rows: DataTableRowItem<T>[];
     visibleColumns?: string[];
-    onSettingsChange?: (action: (typeof UPDATE_ACTIONS)[keyof typeof UPDATE_ACTIONS] | string | undefined) => void;
     renderEmptyState?: RaTableBodyProps<T>["renderEmptyState"];
     search?: string;
     sortDescriptor?: SortDescriptor;
@@ -81,22 +84,27 @@ export type DataTableContextValue<T extends object = Record<string, unknown>> =
     nestedKey?: string;
     onSortChange?: (descriptor: SortDescriptor) => void;
     onSelectionChange?: (keys: Selection) => void;
-    onRowClick?: (row: DataTableRowItem<T>) => void;
-    toggleExpand: (id: string) => void;
+    isRowClickable: boolean;
+    hasRenderNestedContent: boolean;
+    onRowClickRef: React.RefObject<((row: DataTableRowItem<T>) => void) | undefined>;
+    renderNestedContent?: (row: DataTableRowItem<T>, options: DataTableNestedContentOptions) => ReactNode;
+    toggleExpand: (id: string, columnId?: string) => void;
     activeColumns: DataTableColumnItem<T>[];
     filteredRows: DataTableRowItem<T>[];
     sortedRows: DataTableRowItem<T>[];
     showExpandColumn: boolean;
+    hasExpandableContent: boolean;
     showSelectionColumn: boolean;
+    showPinColumn: boolean;
     pinnedRowIds: string[];
     selectRowLabel: string;
     disabledKeys?: Selection;
-    onRowAction?: (row: DataTableRowItem<T>, action: "click" | "select") => void;
+    onRowActionRef: React.RefObject<((row: DataTableRowItem<T>, action: "click" | "select") => void) | undefined>;
     isResizable?: boolean;
     pinnedRows: Set<string>;
-    onPinToggle?: (rowId: string) => void;
     togglePin: (id: string) => void;
-    onColumnsChange?: (columns: DataTableColumnItem<T>[]) => void;
+    onColumnsChangeRef: React.RefObject<((columns: DataTableColumnItem<T>[]) => void) | undefined>;
+    onSettingsChangeRef: React.RefObject<((action: (typeof UPDATE_ACTIONS)[keyof typeof UPDATE_ACTIONS] | string | undefined) => void) | undefined>;
     onVisibilityChange?: (visibleColumnIds: string[]) => void;
 };
 export type TableSelectionContextValue = {
@@ -137,8 +145,8 @@ export type DataTableProps<T extends object = Record<string, unknown>> = Omit<Da
     defaultSelectedKeys?: Selection;
     onSelectionChange?: (keys: Selection) => void;
     onRowClick?: (row: DataTableRowItem<T>) => void;
-    onDetailsClick?: (row: DataTableRowItem<T>) => void;
-    renderDetails?: (row: DataTableRowItem<T>) => ReactNode;
+    /** Renders a full-width nested content panel below a row when expanded. Use this when every row should render the same component template with its own data. For per-row heterogeneous content, use `nestedKey` instead. The options object provides a `close` callback for collapsing the panel from within. */
+    renderNestedContent?: (row: DataTableRowItem<T>, options: DataTableNestedContentOptions) => ReactNode;
     children?: ReactNode;
     density?: DataTableDensity;
     isTruncated?: boolean;
@@ -150,8 +158,12 @@ export type DataTableProps<T extends object = Record<string, unknown>> = Omit<Da
     expandedRows?: Set<string>;
     /** Default expansion state for uncontrolled mode */
     defaultExpandedRows?: Set<string>;
-    /** Callback fired when expansion state changes */
-    onExpandRowsChange?: (expanded: Set<string>) => void;
+    /** Callback fired when expansion state changes. Receives the new expanded set, the ID of the toggled row, and the column ID that triggered the expansion (if triggered by a cell click). */
+    onExpandRowsChange?: (expanded: Set<string>, toggledRowId?: string, columnId?: string) => void;
+    /** Whether to show the pin column. Defaults to `true`. */
+    allowsPinning?: boolean;
+    /** Whether to show the expand chevron column. When `false`, rows with nested content can be expanded via row click. If `onRowClick` is also provided, both the expand toggle and `onRowClick` fire on click. Defaults to `true`. */
+    allowsExpandColumn?: boolean;
     pinnedRows?: Set<string>;
     defaultPinnedRows?: Set<string>;
     onPinToggle?: (rowId: string) => void;
@@ -159,9 +171,15 @@ export type DataTableProps<T extends object = Record<string, unknown>> = Omit<Da
     onSettingsChange?: (action: (typeof UPDATE_ACTIONS)[keyof typeof UPDATE_ACTIONS] | string | undefined) => void;
     customSettings?: DataTableCustomSettings;
 };
+/** Render props passed to custom DataTable.Header children. */
+export type DataTableColumnRenderProps = {
+    columns: DataTableColumnItem[];
+    allowsSorting: boolean;
+};
 /**Combined props for the TableHeader element (Chakra styles + Aria behavior). */
-export type DataTableHeaderProps<T extends DataTableColumnItem> = RaTableHeaderProps<T> & DataTableHeaderSlotProps & {
+export type DataTableHeaderProps<T extends DataTableColumnItem> = Omit<RaTableHeaderProps<T>, "children"> & Omit<DataTableHeaderSlotProps, "children"> & {
     ref?: Ref<HTMLTableSectionElement>;
+    children?: (renderProps: DataTableColumnRenderProps) => ReactNode;
 };
 /** Combined props for the Column element (Chakra styles + Aria behavior). */
 export type DataTableColumnProps = RaColumnProps & Omit<DataTableColumnSlotProps, "width" | "minWidth" | "maxWidth"> & {
@@ -173,15 +191,40 @@ export type DataTableColumnProps = RaColumnProps & Omit<DataTableColumnSlotProps
 };
 /** Type signature for the `DataTable.Column` sub-component. */
 export type DataTableColumnComponent = FC<DataTableColumnProps>;
-/** Combined props for the TableBody element (Chakra styles + Aria behavior). */
-export type DataTableBodyProps<T extends DataTableRowItem> = RaTableBodyProps<T> & DataTableBodySlotProps & {
+/** Per-row state computed by DataTable.Body and passed to custom render functions. */
+export type DataTableRowRenderProps = {
+    isExpanded: boolean;
+    isPinned: boolean;
+    isFirstPinned: boolean;
+    isLastPinned: boolean;
+    isSinglePinned: boolean;
+};
+/**
+ * Combined props for the TableBody element (Chakra styles + Aria behavior).
+ *
+ * **Reactivity constraint:** custom `children` render functions are only
+ * re-invoked when row data, expansion, or pin state changes. They should
+ * derive output purely from the `row` and `renderProps` arguments — closing
+ * over external React state will produce stale renders. Route reactive values
+ * through the `rows` array or row keys instead. If you need rows to
+ * re-render in response to additional values, pass a `dependencies` array —
+ * it is merged with the internal dependency tracking.
+ */
+export type DataTableBodyProps<T extends DataTableRowItem> = Omit<RaTableBodyProps<T>, "children"> & Omit<DataTableBodySlotProps, "children"> & {
     ref?: Ref<HTMLTableSectionElement>;
+    children?: (row: DataTableRowItem<T>, renderProps: DataTableRowRenderProps) => ReactNode;
+};
+/** Render props passed to custom DataTable.Row children for rendering cells. */
+export type DataTableCellRenderProps<T extends object = Record<string, unknown>> = {
+    columns: DataTableColumnItem<T>[];
+    row: DataTableRowItem<T>;
+    isDisabled: boolean;
 };
 /** Combined props for the Row element (Chakra styles + Aria behavior). */
-export type DataTableRowProps<T extends DataTableRowItem> = RaRowProps<T> & DataTableRowSlotProps & {
+export type DataTableRowProps<T extends DataTableRowItem> = Omit<RaRowProps<T>, "children"> & Omit<DataTableRowSlotProps, "children"> & {
     ref?: Ref<HTMLTableRowElement>;
     row: T;
-    depth?: number;
+    children?: (renderProps: DataTableCellRenderProps<T>) => ReactNode;
 };
 /** Combined props for the Cell element (Chakra styles + Aria behavior). */
 export type DataTableCellProps = RaCellProps & DataTableCellSlotProps & {

package/dist/components/data-table/intl/de.d.ts

@@ -4,6 +4,7 @@
  * DO NOT EDIT MANUALLY
  */
 declare const _default: {
+    collapseRow: string;
     comfortable: string;
     comfortableAriaLabel: string;
     compact: string;
@@ -13,6 +14,7 @@ declare const _default: {
     dataTableHeader: string;
     dragRow: string;
     dragRowsColumn: string;
+    expandRow: string;
     expandRows: string;
     fullText: string;
     fullTextAriaLabel: string;
@@ -21,6 +23,7 @@ declare const _default: {
     hideColumn: string;
     layoutSettings: string;
     layoutSettingsAriaLabel: string;
+    nestedContentRow: (args: Record<string, string | number>) => string;
     noHiddenColumns: string;
     pinRows: string;
     reset: string;

package/dist/components/data-table/intl/en.d.ts

@@ -4,6 +4,7 @@
  * DO NOT EDIT MANUALLY
  */
 declare const _default: {
+    collapseRow: string;
     comfortable: string;
     comfortableAriaLabel: string;
     compact: string;
@@ -13,6 +14,7 @@ declare const _default: {
     dataTableHeader: string;
     dragRow: string;
     dragRowsColumn: string;
+    expandRow: string;
     expandRows: string;
     fullText: string;
     fullTextAriaLabel: string;
@@ -21,6 +23,7 @@ declare const _default: {
     hideColumn: string;
     layoutSettings: string;
     layoutSettingsAriaLabel: string;
+    nestedContentRow: (args: Record<string, string | number>) => string;
     noHiddenColumns: string;
     pinRows: string;
     reset: string;