@raystack/apsara 0.55.0 → 0.56.0

package/dist/components/combobox/combobox.module.css.js

@@ -0,0 +1,4 @@
+var styles = {"content":"combobox-module_content__5b8Oc","list":"combobox-module_list__0Kbu0","itemIcon":"combobox-module_itemIcon__bbgmL","menuitem":"combobox-module_menuitem__6PPmr","label":"combobox-module_label__oU1VF","separator":"combobox-module_separator__nn47j"};
+
+export { styles as default };
+//# sourceMappingURL=combobox.module.css.js.map

package/dist/components/combobox/combobox.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

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

@@ -0,0 +1,2 @@
+export { Combobox } from './combobox';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/combobox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/combobox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/command/command.cjs

@@ -2,38 +2,38 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var reactIcons_esm = require('../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.2.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.cjs');
-var index$1 = require('../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
-var index = require('../../node_modules/.pnpm/cmdk@1.1.1_@types_react-dom@19.1.7_@types_react@19.1.9__@types_react@19.1.9_react-dom@19.2.1_react@19.2.1__react@19.2.1/node_modules/cmdk/dist/index.cjs');
+var reactIcons = require('@radix-ui/react-icons');
+var classVarianceAuthority = require('class-variance-authority');
+var cmdk = require('cmdk');
 var React = require('react');
 var dialog = require('../dialog/dialog.cjs');
 var flex = require('../flex/flex.cjs');
 var command_module = require('./command.module.css.cjs');
 
-const command = index$1.cva(command_module.default.command);
-const CommandRoot = React.forwardRef(({ className, ...props }, ref) => (jsxRuntime.jsx(index.Command, { ref: ref, className: command({ className }), ...props })));
-CommandRoot.displayName = index.Command?.displayName;
+const command = classVarianceAuthority.cva(command_module.default.command);
+const CommandRoot = React.forwardRef(({ className, ...props }, ref) => (jsxRuntime.jsx(cmdk.Command, { ref: ref, className: command({ className }), ...props })));
+CommandRoot.displayName = cmdk.Command?.displayName;
 const CommandDialog = ({ children, ...props }) => {
     return (jsxRuntime.jsx(dialog.Dialog, { ...props, children: jsxRuntime.jsx(dialog.Dialog.Content, { style: { overflow: 'hidden', padding: '0' }, children: jsxRuntime.jsx(Command, { className: command_module.default.dialogcommand, children: children }) }) }));
 };
-const input = index$1.cva(command_module.default.input);
-const CommandInput = React.forwardRef(({ className, ...props }, ref) => (jsxRuntime.jsxs(flex.Flex, { align: 'center', gap: 'small', "cmdk-input-wrapper": '', className: command_module.default.inputWrapper, children: [jsxRuntime.jsx(reactIcons_esm.MagnifyingGlassIcon, { className: command_module.default.inputIcon, width: 16, height: 16 }), jsxRuntime.jsx(index.Command.Input, { ref: ref, className: input({ className }), ...props })] })));
-CommandInput.displayName = index.Command.Input.displayName;
-const list = index$1.cva(command_module.default.list);
-const CommandList = React.forwardRef(({ className, ...props }, ref) => (jsxRuntime.jsx(index.Command.List, { ref: ref, className: list({ className }), ...props })));
-CommandList.displayName = index.Command.List.displayName;
-const CommandEmpty = React.forwardRef((props, ref) => (jsxRuntime.jsx(index.Command.Empty, { ref: ref, className: command_module.default.empty, ...props })));
-CommandEmpty.displayName = index.Command.Empty.displayName;
-const group = index$1.cva(command_module.default.group);
-const CommandGroup = React.forwardRef(({ className, ...props }, ref) => (jsxRuntime.jsx(index.Command.Group, { ref: ref, className: group({ className }), ...props })));
-CommandGroup.displayName = index.Command.Group.displayName;
-const separator = index$1.cva(command_module.default.separator);
-const CommandSeparator = React.forwardRef(({ className, ...props }, ref) => (jsxRuntime.jsx(index.Command.Separator, { ref: ref, className: separator({ className }), ...props })));
-CommandSeparator.displayName = index.Command.Separator.displayName;
-const item = index$1.cva(command_module.default.item);
-const CommandItem = React.forwardRef(({ className, ...props }, ref) => (jsxRuntime.jsx(index.Command.Item, { ref: ref, className: item({ className }), ...props })));
-CommandItem.displayName = index.Command.Item.displayName;
-const shortcut = index$1.cva(command_module.default.shortcut);
+const input = classVarianceAuthority.cva(command_module.default.input);
+const CommandInput = React.forwardRef(({ className, ...props }, ref) => (jsxRuntime.jsxs(flex.Flex, { align: 'center', gap: 'small', "cmdk-input-wrapper": '', className: command_module.default.inputWrapper, children: [jsxRuntime.jsx(reactIcons.MagnifyingGlassIcon, { className: command_module.default.inputIcon, width: 16, height: 16 }), jsxRuntime.jsx(cmdk.Command.Input, { ref: ref, className: input({ className }), ...props })] })));
+CommandInput.displayName = cmdk.Command.Input.displayName;
+const list = classVarianceAuthority.cva(command_module.default.list);
+const CommandList = React.forwardRef(({ className, ...props }, ref) => (jsxRuntime.jsx(cmdk.Command.List, { ref: ref, className: list({ className }), ...props })));
+CommandList.displayName = cmdk.Command.List.displayName;
+const CommandEmpty = React.forwardRef((props, ref) => (jsxRuntime.jsx(cmdk.Command.Empty, { ref: ref, className: command_module.default.empty, ...props })));
+CommandEmpty.displayName = cmdk.Command.Empty.displayName;
+const group = classVarianceAuthority.cva(command_module.default.group);
+const CommandGroup = React.forwardRef(({ className, ...props }, ref) => (jsxRuntime.jsx(cmdk.Command.Group, { ref: ref, className: group({ className }), ...props })));
+CommandGroup.displayName = cmdk.Command.Group.displayName;
+const separator = classVarianceAuthority.cva(command_module.default.separator);
+const CommandSeparator = React.forwardRef(({ className, ...props }, ref) => (jsxRuntime.jsx(cmdk.Command.Separator, { ref: ref, className: separator({ className }), ...props })));
+CommandSeparator.displayName = cmdk.Command.Separator.displayName;
+const item = classVarianceAuthority.cva(command_module.default.item);
+const CommandItem = React.forwardRef(({ className, ...props }, ref) => (jsxRuntime.jsx(cmdk.Command.Item, { ref: ref, className: item({ className }), ...props })));
+CommandItem.displayName = cmdk.Command.Item.displayName;
+const shortcut = classVarianceAuthority.cva(command_module.default.shortcut);
 const CommandShortcut = ({ className, ...props }) => {
     return jsxRuntime.jsx("span", { className: shortcut({ className }), ...props });
 };

package/dist/components/command/command.js

@@ -1,36 +1,36 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { MagnifyingGlassIcon } from '../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.2.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
-import { cva } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
-import { Command as _e } from '../../node_modules/.pnpm/cmdk@1.1.1_@types_react-dom@19.1.7_@types_react@19.1.9__@types_react@19.1.9_react-dom@19.2.1_react@19.2.1__react@19.2.1/node_modules/cmdk/dist/index.js';
+import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
+import { cva } from 'class-variance-authority';
+import { Command as Command$1 } from 'cmdk';
 import React__default from 'react';
 import { Dialog } from '../dialog/dialog.js';
 import { Flex } from '../flex/flex.js';
 import styles from './command.module.css.js';
 
 const command = cva(styles.command);
-const CommandRoot = React__default.forwardRef(({ className, ...props }, ref) => (jsx(_e, { ref: ref, className: command({ className }), ...props })));
-CommandRoot.displayName = _e?.displayName;
+const CommandRoot = React__default.forwardRef(({ className, ...props }, ref) => (jsx(Command$1, { ref: ref, className: command({ className }), ...props })));
+CommandRoot.displayName = Command$1?.displayName;
 const CommandDialog = ({ children, ...props }) => {
     return (jsx(Dialog, { ...props, children: jsx(Dialog.Content, { style: { overflow: 'hidden', padding: '0' }, children: jsx(Command, { className: styles.dialogcommand, children: children }) }) }));
 };
 const input = cva(styles.input);
-const CommandInput = React__default.forwardRef(({ className, ...props }, ref) => (jsxs(Flex, { align: 'center', gap: 'small', "cmdk-input-wrapper": '', className: styles.inputWrapper, children: [jsx(MagnifyingGlassIcon, { className: styles.inputIcon, width: 16, height: 16 }), jsx(_e.Input, { ref: ref, className: input({ className }), ...props })] })));
-CommandInput.displayName = _e.Input.displayName;
+const CommandInput = React__default.forwardRef(({ className, ...props }, ref) => (jsxs(Flex, { align: 'center', gap: 'small', "cmdk-input-wrapper": '', className: styles.inputWrapper, children: [jsx(MagnifyingGlassIcon, { className: styles.inputIcon, width: 16, height: 16 }), jsx(Command$1.Input, { ref: ref, className: input({ className }), ...props })] })));
+CommandInput.displayName = Command$1.Input.displayName;
 const list = cva(styles.list);
-const CommandList = React__default.forwardRef(({ className, ...props }, ref) => (jsx(_e.List, { ref: ref, className: list({ className }), ...props })));
-CommandList.displayName = _e.List.displayName;
-const CommandEmpty = React__default.forwardRef((props, ref) => (jsx(_e.Empty, { ref: ref, className: styles.empty, ...props })));
-CommandEmpty.displayName = _e.Empty.displayName;
+const CommandList = React__default.forwardRef(({ className, ...props }, ref) => (jsx(Command$1.List, { ref: ref, className: list({ className }), ...props })));
+CommandList.displayName = Command$1.List.displayName;
+const CommandEmpty = React__default.forwardRef((props, ref) => (jsx(Command$1.Empty, { ref: ref, className: styles.empty, ...props })));
+CommandEmpty.displayName = Command$1.Empty.displayName;
 const group = cva(styles.group);
-const CommandGroup = React__default.forwardRef(({ className, ...props }, ref) => (jsx(_e.Group, { ref: ref, className: group({ className }), ...props })));
-CommandGroup.displayName = _e.Group.displayName;
+const CommandGroup = React__default.forwardRef(({ className, ...props }, ref) => (jsx(Command$1.Group, { ref: ref, className: group({ className }), ...props })));
+CommandGroup.displayName = Command$1.Group.displayName;
 const separator = cva(styles.separator);
-const CommandSeparator = React__default.forwardRef(({ className, ...props }, ref) => (jsx(_e.Separator, { ref: ref, className: separator({ className }), ...props })));
-CommandSeparator.displayName = _e.Separator.displayName;
+const CommandSeparator = React__default.forwardRef(({ className, ...props }, ref) => (jsx(Command$1.Separator, { ref: ref, className: separator({ className }), ...props })));
+CommandSeparator.displayName = Command$1.Separator.displayName;
 const item = cva(styles.item);
-const CommandItem = React__default.forwardRef(({ className, ...props }, ref) => (jsx(_e.Item, { ref: ref, className: item({ className }), ...props })));
-CommandItem.displayName = _e.Item.displayName;
+const CommandItem = React__default.forwardRef(({ className, ...props }, ref) => (jsx(Command$1.Item, { ref: ref, className: item({ className }), ...props })));
+CommandItem.displayName = Command$1.Item.displayName;
 const shortcut = cva(styles.shortcut);
 const CommandShortcut = ({ className, ...props }) => {
     return jsx("span", { className: shortcut({ className }), ...props });

package/dist/components/container/container.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var index = require('../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
+var classVarianceAuthority = require('class-variance-authority');
 var container_module = require('./container.module.css.cjs');
 
-const container = index.cva(container_module.default.container, {
+const container = classVarianceAuthority.cva(container_module.default.container, {
     variants: {
         size: {
             small: container_module.default["container-small"],

package/dist/components/container/container.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"container.cjs","sources":["../../../components/container/container.tsx"],"sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\nimport { HTMLAttributes, PropsWithChildren } from \"react\";\n\nimport styles from \"./container.module.css\";\n\nconst container = cva(styles.container, {\n  variants: {\n    size: {\n      small: styles[\"container-small\"],\n      medium: styles[\"container-medium\"],\n      large: styles[\"container-large\"],\n      none: styles[\"container-none\"],\n    },\n    align: {\n      left: styles[\"container-align-left\"],\n      center: styles[\"container-align-center\"],\n      right: styles[\"container-align-right\"],\n    }\n  },\n  defaultVariants: {\n    size: \"none\",\n    align: \"center\",\n  },\n});\n\ntype ContainerProps = PropsWithChildren<VariantProps<typeof container>> &\n  HTMLAttributes<HTMLElement> & {\n    \"aria-label\"?: string;\n    \"aria-labelledby\"?: string;\n  };\n\nexport function Container({\n  children,\n  size,\n  align,\n  className,\n  role = \"region\",\n  ...props\n}: ContainerProps) {\n  return (\n    <div \n      className={container({ size, align, className })} \n      role={role}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n} "],"names":["cva","styles","_jsx"],"mappings":";;;;;;AAKA,MAAM,SAAS,GAAGA,SAAG,CAACC,wBAAM,CAAC,SAAS,EAAE;AACtC,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,KAAK,EAAEA,wBAAM,CAAC,iBAAiB,CAAC;AAChC,YAAA,MAAM,EAAEA,wBAAM,CAAC,kBAAkB,CAAC;AAClC,YAAA,KAAK,EAAEA,wBAAM,CAAC,iBAAiB,CAAC;AAChC,YAAA,IAAI,EAAEA,wBAAM,CAAC,gBAAgB,CAAC;AAC/B,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAEA,wBAAM,CAAC,sBAAsB,CAAC;AACpC,YAAA,MAAM,EAAEA,wBAAM,CAAC,wBAAwB,CAAC;AACxC,YAAA,KAAK,EAAEA,wBAAM,CAAC,uBAAuB,CAAC;AACvC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,KAAK,EAAE,QAAQ;AAChB,KAAA;AACF,CAAA,CAAC,CAAC;SAQa,SAAS,CAAC,EACxB,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,GAAG,KAAK,EACO,EAAA;IACf,QACEC,cACE,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,SAAS,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EAChD,IAAI,EAAE,IAAI,EAAA,GACN,KAAK,EAER,QAAA,EAAA,QAAQ,EACL,CAAA,EACN;AACJ;;;;"}
+{"version":3,"file":"container.cjs","sources":["../../../components/container/container.tsx"],"sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\nimport { HTMLAttributes, PropsWithChildren } from \"react\";\n\nimport styles from \"./container.module.css\";\n\nconst container = cva(styles.container, {\n  variants: {\n    size: {\n      small: styles[\"container-small\"],\n      medium: styles[\"container-medium\"],\n      large: styles[\"container-large\"],\n      none: styles[\"container-none\"],\n    },\n    align: {\n      left: styles[\"container-align-left\"],\n      center: styles[\"container-align-center\"],\n      right: styles[\"container-align-right\"],\n    }\n  },\n  defaultVariants: {\n    size: \"none\",\n    align: \"center\",\n  },\n});\n\ntype ContainerProps = PropsWithChildren<VariantProps<typeof container>> &\n  HTMLAttributes<HTMLElement> & {\n    \"aria-label\"?: string;\n    \"aria-labelledby\"?: string;\n  };\n\nexport function Container({\n  children,\n  size,\n  align,\n  className,\n  role = \"region\",\n  ...props\n}: ContainerProps) {\n  return (\n    <div \n      className={container({ size, align, className })} \n      role={role}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n} "],"names":["cva","styles","_jsx"],"mappings":";;;;;;AAKA,MAAM,SAAS,GAAGA,0BAAG,CAACC,wBAAM,CAAC,SAAS,EAAE;AACtC,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,KAAK,EAAEA,wBAAM,CAAC,iBAAiB,CAAC;AAChC,YAAA,MAAM,EAAEA,wBAAM,CAAC,kBAAkB,CAAC;AAClC,YAAA,KAAK,EAAEA,wBAAM,CAAC,iBAAiB,CAAC;AAChC,YAAA,IAAI,EAAEA,wBAAM,CAAC,gBAAgB,CAAC;AAC/B,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAEA,wBAAM,CAAC,sBAAsB,CAAC;AACpC,YAAA,MAAM,EAAEA,wBAAM,CAAC,wBAAwB,CAAC;AACxC,YAAA,KAAK,EAAEA,wBAAM,CAAC,uBAAuB,CAAC;AACvC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,KAAK,EAAE,QAAQ;AAChB,KAAA;AACF,CAAA,CAAC,CAAC;SAQa,SAAS,CAAC,EACxB,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,GAAG,KAAK,EACO,EAAA;IACf,QACEC,cACE,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,SAAS,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EAChD,IAAI,EAAE,IAAI,EAAA,GACN,KAAK,EAER,QAAA,EAAA,QAAQ,EACL,CAAA,EACN;AACJ;;;;"}

package/dist/components/container/container.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { cva } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
+import { cva } from 'class-variance-authority';
 import styles from './container.module.css.js';
 
 const container = cva(styles.container, {

package/dist/components/copy-button/copy-button.cjs

@@ -2,7 +2,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var reactIcons_esm = require('../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.2.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.cjs');
+var reactIcons = require('@radix-ui/react-icons');
 var React = require('react');
 var useCopyToClipboard = require('../../hooks/useCopyToClipboard.cjs');
 var checkCircleFilled = require('../../icons/assets/check-circle-filled.svg.cjs');
@@ -22,7 +22,7 @@ const CopyButton = React.forwardRef(({ text, resetTimeout = 1000, resetIcon = tr
             }
         }
     }
-    return (jsxRuntime.jsx(iconButton.IconButton, { ref: ref, ...props, onClick: onCopy, "data-test-id": 'copy-button', children: isCopied ? (jsxRuntime.jsx(checkCircleFilled.ReactComponent, { color: 'var(--rs-color-foreground-success-primary)' })) : (jsxRuntime.jsx(reactIcons_esm.CopyIcon, {})) }));
+    return (jsxRuntime.jsx(iconButton.IconButton, { ref: ref, ...props, onClick: onCopy, "data-test-id": 'copy-button', children: isCopied ? (jsxRuntime.jsx(checkCircleFilled.ReactComponent, { color: 'var(--rs-color-foreground-success-primary)' })) : (jsxRuntime.jsx(reactIcons.CopyIcon, {})) }));
 });
 CopyButton.displayName = 'CopyButton';
 

package/dist/components/copy-button/copy-button.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { CopyIcon } from '../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.2.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
+import { CopyIcon } from '@radix-ui/react-icons';
 import { forwardRef, useState } from 'react';
 import { useCopyToClipboard } from '../../hooks/useCopyToClipboard.js';
 import { ReactComponent as SvgCheckCircleFilled } from '../../icons/assets/check-circle-filled.svg.js';

package/dist/components/data-table/components/content.cjs

@@ -2,9 +2,9 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var reactIcons_esm = require('../../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.2.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.cjs');
-var index$1 = require('../../../node_modules/.pnpm/@tanstack_react-table@8.9.2_react-dom@19.2.1_react@19.2.1__react@19.2.1/node_modules/@tanstack/react-table/build/lib/index.cjs');
-var index = require('../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
+var reactIcons = require('@radix-ui/react-icons');
+var reactTable = require('@tanstack/react-table');
+var classVarianceAuthority = require('class-variance-authority');
 var React = require('react');
 var badge = require('../../badge/badge.cjs');
 var emptyState = require('../../empty-state/empty-state.cjs');
@@ -17,7 +17,7 @@ var useDataTable = require('../hooks/useDataTable.cjs');
 function Headers({ headerGroups = [], className = '' }) {
     return (jsxRuntime.jsx(table.Table.Header, { className: className, children: headerGroups?.map(headerGroup => (jsxRuntime.jsx(table.Table.Row, { children: headerGroup?.headers?.map(header => {
                 const columnDef = header.column.columnDef;
-                return (jsxRuntime.jsx(table.Table.Head, { colSpan: header.colSpan, className: columnDef.classNames?.header, style: columnDef.styles?.header, children: index$1.flexRender(columnDef.header, header.getContext()) }, header.id));
+                return (jsxRuntime.jsx(table.Table.Head, { colSpan: header.colSpan, className: classVarianceAuthority.cx(dataTable_module.default.head, columnDef.classNames?.header), style: columnDef.styles?.header, children: reactTable.flexRender(columnDef.header, header.getContext()) }, header.id));
             }) }, headerGroup?.id))) }));
 }
 function LoaderRows({ rowCount, columnCount }) {
@@ -30,21 +30,22 @@ function LoaderRows({ rowCount, columnCount }) {
 function GroupHeader({ colSpan, data }) {
     return (jsxRuntime.jsx(table.Table.SectionHeader, { colSpan: colSpan, children: jsxRuntime.jsxs(flex.Flex, { gap: 3, align: 'center', children: [data?.label, data.showGroupCount ? (jsxRuntime.jsx(badge.Badge, { variant: 'neutral', children: data?.count })) : null] }) }));
 }
-const Rows = React.forwardRef((props, lastRowRef) => {
-    const { rows = [], onRowClick, classNames } = props;
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: rows?.map((row, index$2) => {
-            const isSelected = row.getIsSelected();
-            const cells = row.getVisibleCells() || [];
-            const isSectionHeadingRow = row.depth === 0 && row.getIsExpanded();
-            const isLastRow = index$2 === rows.length - 1;
-            const rowKey = row.id + '-' + index$2;
-            return isSectionHeadingRow ? (jsxRuntime.jsx(GroupHeader, { colSpan: cells.length, data: row.original }, rowKey)) : (jsxRuntime.jsx(table.Table.Row, { className: index.cx(dataTable_module.default['row'], onRowClick ? dataTable_module.default['clickable'] : '', classNames?.row), "data-state": isSelected && 'selected', ref: isLastRow ? lastRowRef : undefined, onClick: () => onRowClick?.(row.original), children: cells.map(cell => {
-                    const columnDef = cell.column.columnDef;
-                    return (jsxRuntime.jsx(table.Table.Cell, { className: index.cx(dataTable_module.default['cell'], columnDef.classNames?.cell), style: columnDef.styles?.cell, children: index$1.flexRender(columnDef.cell, cell.getContext()) }, cell.id));
-                }) }, rowKey));
-        }) }));
-});
-const DefaultEmptyComponent = () => (jsxRuntime.jsx(emptyState.EmptyState, { icon: jsxRuntime.jsx(reactIcons_esm.TableIcon, {}), heading: 'No Data' }));
+function Rows({ rows = [], onRowClick, classNames, lastRowRef }) {
+    return rows.map((row, idx) => {
+        const isSelected = row.getIsSelected();
+        const cells = row.getVisibleCells() || [];
+        const isGroupHeader = row.subRows && row.subRows.length > 0;
+        const isLastRow = idx === rows.length - 1;
+        if (isGroupHeader) {
+            return (jsxRuntime.jsx(GroupHeader, { colSpan: cells.length, data: row.original }, row.id));
+        }
+        return (jsxRuntime.jsx(table.Table.Row, { className: classVarianceAuthority.cx(dataTable_module.default['row'], onRowClick ? dataTable_module.default['clickable'] : '', classNames?.row), "data-state": isSelected && 'selected', ref: isLastRow ? lastRowRef : undefined, onClick: () => onRowClick?.(row.original), children: cells.map(cell => {
+                const columnDef = cell.column.columnDef;
+                return (jsxRuntime.jsx(table.Table.Cell, { className: classVarianceAuthority.cx(dataTable_module.default['cell'], columnDef.classNames?.cell), style: columnDef.styles?.cell, children: reactTable.flexRender(columnDef.cell, cell.getContext()) }, cell.id));
+            }) }, row.id));
+    });
+}
+const DefaultEmptyComponent = () => (jsxRuntime.jsx(emptyState.EmptyState, { icon: jsxRuntime.jsx(reactIcons.TableIcon, {}), heading: 'No Data' }));
 function Content({ emptyState, zeroState, classNames = {} }) {
     const { onRowClick, table: table$1, mode, isLoading, loadMoreData, loadingRowCount = 3, tableQuery } = useDataTable.useDataTable();
     const headerGroups = table$1?.getHeaderGroups();
@@ -80,18 +81,16 @@ function Content({ emptyState, zeroState, classNames = {} }) {
     }, [mode, rows.length, handleObserver]);
     const visibleColumnsLength = table$1.getVisibleLeafColumns().length;
     const hasData = rows?.length > 0 || isLoading;
-    // Determine if we're in zero state (no filters/search applied) or empty state (filters/search applied)
     const hasFiltersOrSearch = (tableQuery?.filters && tableQuery.filters.length > 0) ||
         Boolean(tableQuery?.search && tableQuery.search.trim() !== '');
     const isZeroState = !hasData && !hasFiltersOrSearch;
     const isEmptyState = !hasData && hasFiltersOrSearch;
-    // Show zeroState when no data and no filters/search, otherwise show emptyState
     const stateToShow = isZeroState
         ? (zeroState ?? emptyState ?? jsxRuntime.jsx(DefaultEmptyComponent, {}))
         : isEmptyState
             ? (emptyState ?? jsxRuntime.jsx(DefaultEmptyComponent, {}))
             : null;
-    return (jsxRuntime.jsx("div", { className: classNames.root, children: jsxRuntime.jsxs(table.Table, { className: classNames.table, children: [hasData && (jsxRuntime.jsx(Headers, { headerGroups: headerGroups, className: classNames.header })), jsxRuntime.jsx(table.Table.Body, { className: classNames.body, children: hasData ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Rows, { rows: rows, ref: lastRowRef, onRowClick: onRowClick, classNames: {
+    return (jsxRuntime.jsx("div", { className: classVarianceAuthority.cx(dataTable_module.default.contentRoot, classNames.root), children: jsxRuntime.jsxs(table.Table, { className: classNames.table, children: [hasData && (jsxRuntime.jsx(Headers, { headerGroups: headerGroups, className: classNames.header })), jsxRuntime.jsx(table.Table.Body, { className: classNames.body, children: hasData ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Rows, { rows: rows, lastRowRef: lastRowRef, onRowClick: onRowClick, classNames: {
                                     row: classNames.row
                                 } }), isLoading ? (jsxRuntime.jsx(LoaderRows, { rowCount: loadingRowCount, columnCount: visibleColumnsLength })) : null] })) : (jsxRuntime.jsx(table.Table.Row, { children: jsxRuntime.jsx(table.Table.Cell, { colSpan: visibleColumnsLength, className: dataTable_module.default.emptyStateCell, children: stateToShow }) })) })] }) }));
 }

package/dist/components/data-table/components/content.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"content.cjs","sources":["../../../../components/data-table/components/content.tsx"],"sourcesContent":["'use client';\n\nimport { TableIcon } from '@radix-ui/react-icons';\nimport type { HeaderGroup, Row } from '@tanstack/react-table';\nimport { flexRender } from '@tanstack/react-table';\nimport { cx } from 'class-variance-authority';\nimport {\n  ForwardedRef,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef\n} from 'react';\n\nimport { Badge } from '../../badge';\nimport { EmptyState } from '../../empty-state';\nimport { Flex } from '../../flex';\nimport { Skeleton } from '../../skeleton';\nimport { Table } from '../../table';\nimport styles from '../data-table.module.css';\nimport {\n  DataTableColumnDef,\n  DataTableContentProps,\n  GroupedData\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\n\nfunction Headers<TData>({\n  headerGroups = [],\n  className = ''\n}: {\n  headerGroups: HeaderGroup<TData>[];\n  className?: string;\n}) {\n  return (\n    <Table.Header className={className}>\n      {headerGroups?.map(headerGroup => (\n        <Table.Row key={headerGroup?.id}>\n          {headerGroup?.headers?.map(header => {\n            const columnDef = header.column.columnDef as DataTableColumnDef<\n              TData,\n              unknown\n            >;\n            return (\n              <Table.Head\n                key={header.id}\n                colSpan={header.colSpan}\n                className={columnDef.classNames?.header}\n                style={columnDef.styles?.header}\n              >\n                {flexRender(columnDef.header, header.getContext())}\n              </Table.Head>\n            );\n          })}\n        </Table.Row>\n      ))}\n    </Table.Header>\n  );\n}\n\ninterface RowsProps<TData> {\n  rows: Row<TData>[];\n  lastRowRef?: ForwardedRef<HTMLTableRowElement>;\n  onRowClick?: (row: TData) => void;\n  classNames?: {\n    row?: string;\n  };\n}\n\nfunction LoaderRows({\n  rowCount,\n  columnCount\n}: {\n  rowCount: number;\n  columnCount: number;\n}) {\n  const rows = Array.from({ length: rowCount });\n  return rows.map((_, rowIndex) => {\n    const columns = Array.from({ length: columnCount });\n    return (\n      <Table.Row key={'loading-row-' + rowIndex}>\n        {columns.map((_, colIndex) => (\n          <Table.Cell key={'loading-column-' + colIndex}>\n            <Skeleton />\n          </Table.Cell>\n        ))}\n      </Table.Row>\n    );\n  });\n}\n\nfunction GroupHeader<TData>({\n  colSpan,\n  data\n}: {\n  colSpan: number;\n  data: GroupedData<TData>;\n}) {\n  return (\n    <Table.SectionHeader colSpan={colSpan}>\n      <Flex gap={3} align='center'>\n        {data?.label}\n        {data.showGroupCount ? (\n          <Badge variant='neutral'>{data?.count}</Badge>\n        ) : null}\n      </Flex>\n    </Table.SectionHeader>\n  );\n}\n\nconst Rows = forwardRef<HTMLTableRowElement, RowsProps<unknown>>(\n  (props, lastRowRef) => {\n    const { rows = [], onRowClick, classNames } = props;\n    return (\n      <>\n        {rows?.map((row, index) => {\n          const isSelected = row.getIsSelected();\n          const cells = row.getVisibleCells() || [];\n          const isSectionHeadingRow = row.depth === 0 && row.getIsExpanded();\n          const isLastRow = index === rows.length - 1;\n          const rowKey = row.id + '-' + index;\n          return isSectionHeadingRow ? (\n            <GroupHeader\n              key={rowKey}\n              colSpan={cells.length}\n              data={row.original as GroupedData<unknown>}\n            />\n          ) : (\n            <Table.Row\n              key={rowKey}\n              className={cx(\n                styles['row'],\n                onRowClick ? styles['clickable'] : '',\n                classNames?.row\n              )}\n              data-state={isSelected && 'selected'}\n              ref={isLastRow ? lastRowRef : undefined}\n              onClick={() => onRowClick?.(row.original)}\n            >\n              {cells.map(cell => {\n                const columnDef = cell.column.columnDef as DataTableColumnDef<\n                  unknown,\n                  unknown\n                >;\n                return (\n                  <Table.Cell\n                    key={cell.id}\n                    className={cx(styles['cell'], columnDef.classNames?.cell)}\n                    style={columnDef.styles?.cell}\n                  >\n                    {flexRender(columnDef.cell, cell.getContext())}\n                  </Table.Cell>\n                );\n              })}\n            </Table.Row>\n          );\n        })}\n      </>\n    );\n  }\n);\n\nconst DefaultEmptyComponent = () => (\n  <EmptyState icon={<TableIcon />} heading='No Data' />\n);\n\nexport function Content({\n  emptyState,\n  zeroState,\n  classNames = {}\n}: DataTableContentProps) {\n  const {\n    onRowClick,\n    table,\n    mode,\n    isLoading,\n    loadMoreData,\n    loadingRowCount = 3,\n    tableQuery\n  } = useDataTable();\n  const headerGroups = table?.getHeaderGroups();\n  const rowModel = table?.getRowModel();\n  const { rows = [] } = rowModel || {};\n\n  const lastRowRef = useRef<HTMLTableRowElement | null>(null);\n  const observerRef = useRef<IntersectionObserver | null>(null);\n\n  const handleObserver = useCallback(\n    (entries: IntersectionObserverEntry[]) => {\n      const target = entries[0];\n      if (target.isIntersecting && !isLoading) {\n        loadMoreData();\n      }\n    },\n    [loadMoreData, isLoading]\n  );\n\n  useEffect(() => {\n    if (mode !== 'server') return;\n\n    if (observerRef.current) {\n      observerRef.current.disconnect();\n    }\n\n    observerRef.current = new IntersectionObserver(handleObserver, {\n      threshold: 0.1\n    });\n    const lastRow = lastRowRef.current;\n    if (lastRow) {\n      observerRef.current.observe(lastRow);\n    }\n\n    return () => {\n      if (observerRef.current && lastRow) {\n        observerRef.current.unobserve(lastRow);\n        observerRef.current.disconnect();\n      }\n    };\n  }, [mode, rows.length, handleObserver]);\n\n  const visibleColumnsLength = table.getVisibleLeafColumns().length;\n\n  const hasData = rows?.length > 0 || isLoading;\n\n  // Determine if we're in zero state (no filters/search applied) or empty state (filters/search applied)\n  const hasFiltersOrSearch =\n    (tableQuery?.filters && tableQuery.filters.length > 0) ||\n    Boolean(tableQuery?.search && tableQuery.search.trim() !== '');\n\n  const isZeroState = !hasData && !hasFiltersOrSearch;\n  const isEmptyState = !hasData && hasFiltersOrSearch;\n\n  // Show zeroState when no data and no filters/search, otherwise show emptyState\n  const stateToShow: React.ReactNode = isZeroState\n    ? (zeroState ?? emptyState ?? <DefaultEmptyComponent />)\n    : isEmptyState\n      ? (emptyState ?? <DefaultEmptyComponent />)\n      : null;\n\n  return (\n    <div className={classNames.root}>\n      <Table className={classNames.table}>\n        {hasData && (\n          <Headers headerGroups={headerGroups} className={classNames.header} />\n        )}\n        <Table.Body className={classNames.body}>\n          {hasData ? (\n            <>\n              <Rows\n                rows={rows}\n                ref={lastRowRef}\n                onRowClick={onRowClick}\n                classNames={{\n                  row: classNames.row\n                }}\n              />\n              {isLoading ? (\n                <LoaderRows\n                  rowCount={loadingRowCount}\n                  columnCount={visibleColumnsLength}\n                />\n              ) : null}\n            </>\n          ) : (\n            <Table.Row>\n              <Table.Cell\n                colSpan={visibleColumnsLength}\n                className={styles.emptyStateCell}\n              >\n                {stateToShow}\n              </Table.Cell>\n            </Table.Row>\n          )}\n        </Table.Body>\n      </Table>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA2BA;AAOE;AAKU;;;AAmBZ;AAWA;AAOE;;AAEE;AACA;AASF;AACF;AAEA;;AAiBA;AAEA;;;AAMU;;AAEA;;;;AAsBM;;AAaF;;AAMZ;AAGF;AAIM;;AAcJ;AACA;;AAGA;AACA;AAEA;AAEI;AACA;AACE;;AAEJ;;;;AAOA;AACE;;AAGF;AACE;AACD;AACD;;AAEE;;AAGF;AACE;AACE;AACA;;AAEJ;;;;;AAQF;AAEE;AAEF;AACA;;;;AAKE;AACE;;AAGJ;;;AAsCF;;"}
+{"version":3,"file":"content.cjs","sources":["../../../../components/data-table/components/content.tsx"],"sourcesContent":["'use client';\n\nimport { TableIcon } from '@radix-ui/react-icons';\nimport type { HeaderGroup, Row } from '@tanstack/react-table';\nimport { flexRender } from '@tanstack/react-table';\nimport { cx } from 'class-variance-authority';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { Badge } from '../../badge';\nimport { EmptyState } from '../../empty-state';\nimport { Flex } from '../../flex';\nimport { Skeleton } from '../../skeleton';\nimport { Table } from '../../table';\nimport styles from '../data-table.module.css';\nimport {\n  DataTableColumnDef,\n  DataTableContentProps,\n  GroupedData\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\n\nfunction Headers<TData>({\n  headerGroups = [],\n  className = ''\n}: {\n  headerGroups: HeaderGroup<TData>[];\n  className?: string;\n}) {\n  return (\n    <Table.Header className={className}>\n      {headerGroups?.map(headerGroup => (\n        <Table.Row key={headerGroup?.id}>\n          {headerGroup?.headers?.map(header => {\n            const columnDef = header.column.columnDef as DataTableColumnDef<\n              TData,\n              unknown\n            >;\n            return (\n              <Table.Head\n                key={header.id}\n                colSpan={header.colSpan}\n                className={cx(styles.head, columnDef.classNames?.header)}\n                style={columnDef.styles?.header}\n              >\n                {flexRender(columnDef.header, header.getContext())}\n              </Table.Head>\n            );\n          })}\n        </Table.Row>\n      ))}\n    </Table.Header>\n  );\n}\n\ninterface RowsProps<TData> {\n  rows: Row<TData>[];\n  onRowClick?: (row: TData) => void;\n  classNames?: {\n    row?: string;\n  };\n  lastRowRef?: React.RefObject<HTMLTableRowElement | null>;\n}\n\nfunction LoaderRows({\n  rowCount,\n  columnCount\n}: {\n  rowCount: number;\n  columnCount: number;\n}) {\n  const rows = Array.from({ length: rowCount });\n  return rows.map((_, rowIndex) => {\n    const columns = Array.from({ length: columnCount });\n    return (\n      <Table.Row key={'loading-row-' + rowIndex}>\n        {columns.map((_, colIndex) => (\n          <Table.Cell key={'loading-column-' + colIndex}>\n            <Skeleton />\n          </Table.Cell>\n        ))}\n      </Table.Row>\n    );\n  });\n}\n\nfunction GroupHeader<TData>({\n  colSpan,\n  data\n}: {\n  colSpan: number;\n  data: GroupedData<TData>;\n}) {\n  return (\n    <Table.SectionHeader colSpan={colSpan}>\n      <Flex gap={3} align='center'>\n        {data?.label}\n        {data.showGroupCount ? (\n          <Badge variant='neutral'>{data?.count}</Badge>\n        ) : null}\n      </Flex>\n    </Table.SectionHeader>\n  );\n}\n\nfunction Rows<TData>({\n  rows = [],\n  onRowClick,\n  classNames,\n  lastRowRef\n}: RowsProps<TData>) {\n  return rows.map((row, idx) => {\n    const isSelected = row.getIsSelected();\n    const cells = row.getVisibleCells() || [];\n    const isGroupHeader = row.subRows && row.subRows.length > 0;\n    const isLastRow = idx === rows.length - 1;\n\n    if (isGroupHeader) {\n      return (\n        <GroupHeader\n          key={row.id}\n          colSpan={cells.length}\n          data={row.original as GroupedData<unknown>}\n        />\n      );\n    }\n\n    return (\n      <Table.Row\n        key={row.id}\n        className={cx(\n          styles['row'],\n          onRowClick ? styles['clickable'] : '',\n          classNames?.row\n        )}\n        data-state={isSelected && 'selected'}\n        ref={isLastRow ? lastRowRef : undefined}\n        onClick={() => onRowClick?.(row.original)}\n      >\n        {cells.map(cell => {\n          const columnDef = cell.column.columnDef as DataTableColumnDef<\n            unknown,\n            unknown\n          >;\n          return (\n            <Table.Cell\n              key={cell.id}\n              className={cx(styles['cell'], columnDef.classNames?.cell)}\n              style={columnDef.styles?.cell}\n            >\n              {flexRender(columnDef.cell, cell.getContext())}\n            </Table.Cell>\n          );\n        })}\n      </Table.Row>\n    );\n  });\n}\n\nconst DefaultEmptyComponent = () => (\n  <EmptyState icon={<TableIcon />} heading='No Data' />\n);\n\nexport function Content({\n  emptyState,\n  zeroState,\n  classNames = {}\n}: DataTableContentProps) {\n  const {\n    onRowClick,\n    table,\n    mode,\n    isLoading,\n    loadMoreData,\n    loadingRowCount = 3,\n    tableQuery\n  } = useDataTable();\n\n  const headerGroups = table?.getHeaderGroups();\n  const rowModel = table?.getRowModel();\n  const { rows = [] } = rowModel || {};\n\n  const lastRowRef = useRef<HTMLTableRowElement | null>(null);\n  const observerRef = useRef<IntersectionObserver | null>(null);\n\n  const handleObserver = useCallback(\n    (entries: IntersectionObserverEntry[]) => {\n      const target = entries[0];\n      if (target.isIntersecting && !isLoading) {\n        loadMoreData();\n      }\n    },\n    [loadMoreData, isLoading]\n  );\n\n  useEffect(() => {\n    if (mode !== 'server') return;\n\n    if (observerRef.current) {\n      observerRef.current.disconnect();\n    }\n\n    observerRef.current = new IntersectionObserver(handleObserver, {\n      threshold: 0.1\n    });\n    const lastRow = lastRowRef.current;\n    if (lastRow) {\n      observerRef.current.observe(lastRow);\n    }\n\n    return () => {\n      if (observerRef.current && lastRow) {\n        observerRef.current.unobserve(lastRow);\n        observerRef.current.disconnect();\n      }\n    };\n  }, [mode, rows.length, handleObserver]);\n\n  const visibleColumnsLength = table.getVisibleLeafColumns().length;\n\n  const hasData = rows?.length > 0 || isLoading;\n\n  const hasFiltersOrSearch =\n    (tableQuery?.filters && tableQuery.filters.length > 0) ||\n    Boolean(tableQuery?.search && tableQuery.search.trim() !== '');\n\n  const isZeroState = !hasData && !hasFiltersOrSearch;\n  const isEmptyState = !hasData && hasFiltersOrSearch;\n\n  const stateToShow: React.ReactNode = isZeroState\n    ? (zeroState ?? emptyState ?? <DefaultEmptyComponent />)\n    : isEmptyState\n      ? (emptyState ?? <DefaultEmptyComponent />)\n      : null;\n\n  return (\n    <div className={cx(styles.contentRoot, classNames.root)}>\n      <Table className={classNames.table}>\n        {hasData && (\n          <Headers headerGroups={headerGroups} className={classNames.header} />\n        )}\n        <Table.Body className={classNames.body}>\n          {hasData ? (\n            <>\n              <Rows\n                rows={rows}\n                lastRowRef={lastRowRef}\n                onRowClick={onRowClick}\n                classNames={{\n                  row: classNames.row\n                }}\n              />\n              {isLoading ? (\n                <LoaderRows\n                  rowCount={loadingRowCount}\n                  columnCount={visibleColumnsLength}\n                />\n              ) : null}\n            </>\n          ) : (\n            <Table.Row>\n              <Table.Cell\n                colSpan={visibleColumnsLength}\n                className={styles.emptyStateCell}\n              >\n                {stateToShow}\n              </Table.Cell>\n            </Table.Row>\n          )}\n        </Table.Body>\n      </Table>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAqBA;AAOE;AAKU;;;AAmBZ;AAWA;AAOE;;AAEE;AACA;AASF;AACF;AAEA;;AAiBA;AAEA;;AAOI;;AAEA;;;;;AAaA;AAaM;;AAaF;AAGN;AACF;AAEA;AAIM;;AAeJ;AACA;;AAGA;AACA;AAEA;AAEI;AACA;AACE;;AAEJ;;;;AAOA;AACE;;AAGF;AACE;AACD;AACD;;AAEE;;AAGF;AACE;AACE;AACA;;AAEJ;;;;AAOF;AAEE;AAEF;AACA;;;AAIE;AACE;;AAGJ;;;AAsCF;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/content.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAEL,qBAAqB,EAEtB,MAAM,qBAAqB,CAAC;AA8I7B,wBAAgB,OAAO,CAAC,EACtB,UAAU,EACV,SAAS,EACT,UAAe,EAChB,EAAE,qBAAqB,2CA2GvB"}
+{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/content.tsx"],"names":[],"mappings":"AAcA,OAAO,EAEL,qBAAqB,EAEtB,MAAM,qBAAqB,CAAC;AAgJ7B,wBAAgB,OAAO,CAAC,EACtB,UAAU,EACV,SAAS,EACT,UAAe,EAChB,EAAE,qBAAqB,2CA0GvB"}

package/dist/components/data-table/components/content.js

@@ -1,9 +1,9 @@
 "use client";
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { TableIcon } from '../../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.2.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
-import { flexRender } from '../../../node_modules/.pnpm/@tanstack_react-table@8.9.2_react-dom@19.2.1_react@19.2.1__react@19.2.1/node_modules/@tanstack/react-table/build/lib/index.js';
-import { cx } from '../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
-import { forwardRef, useRef, useCallback, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { TableIcon } from '@radix-ui/react-icons';
+import { flexRender } from '@tanstack/react-table';
+import { cx } from 'class-variance-authority';
+import { useRef, useCallback, useEffect } from 'react';
 import { Badge } from '../../badge/badge.js';
 import { EmptyState } from '../../empty-state/empty-state.js';
 import { Flex } from '../../flex/flex.js';
@@ -15,7 +15,7 @@ import { useDataTable } from '../hooks/useDataTable.js';
 function Headers({ headerGroups = [], className = '' }) {
     return (jsx(Table.Header, { className: className, children: headerGroups?.map(headerGroup => (jsx(Table.Row, { children: headerGroup?.headers?.map(header => {
                 const columnDef = header.column.columnDef;
-                return (jsx(Table.Head, { colSpan: header.colSpan, className: columnDef.classNames?.header, style: columnDef.styles?.header, children: flexRender(columnDef.header, header.getContext()) }, header.id));
+                return (jsx(Table.Head, { colSpan: header.colSpan, className: cx(styles.head, columnDef.classNames?.header), style: columnDef.styles?.header, children: flexRender(columnDef.header, header.getContext()) }, header.id));
             }) }, headerGroup?.id))) }));
 }
 function LoaderRows({ rowCount, columnCount }) {
@@ -28,20 +28,21 @@ function LoaderRows({ rowCount, columnCount }) {
 function GroupHeader({ colSpan, data }) {
     return (jsx(Table.SectionHeader, { colSpan: colSpan, children: jsxs(Flex, { gap: 3, align: 'center', children: [data?.label, data.showGroupCount ? (jsx(Badge, { variant: 'neutral', children: data?.count })) : null] }) }));
 }
-const Rows = forwardRef((props, lastRowRef) => {
-    const { rows = [], onRowClick, classNames } = props;
-    return (jsx(Fragment, { children: rows?.map((row, index) => {
-            const isSelected = row.getIsSelected();
-            const cells = row.getVisibleCells() || [];
-            const isSectionHeadingRow = row.depth === 0 && row.getIsExpanded();
-            const isLastRow = index === rows.length - 1;
-            const rowKey = row.id + '-' + index;
-            return isSectionHeadingRow ? (jsx(GroupHeader, { colSpan: cells.length, data: row.original }, rowKey)) : (jsx(Table.Row, { className: cx(styles['row'], onRowClick ? styles['clickable'] : '', classNames?.row), "data-state": isSelected && 'selected', ref: isLastRow ? lastRowRef : undefined, onClick: () => onRowClick?.(row.original), children: cells.map(cell => {
-                    const columnDef = cell.column.columnDef;
-                    return (jsx(Table.Cell, { className: cx(styles['cell'], columnDef.classNames?.cell), style: columnDef.styles?.cell, children: flexRender(columnDef.cell, cell.getContext()) }, cell.id));
-                }) }, rowKey));
-        }) }));
-});
+function Rows({ rows = [], onRowClick, classNames, lastRowRef }) {
+    return rows.map((row, idx) => {
+        const isSelected = row.getIsSelected();
+        const cells = row.getVisibleCells() || [];
+        const isGroupHeader = row.subRows && row.subRows.length > 0;
+        const isLastRow = idx === rows.length - 1;
+        if (isGroupHeader) {
+            return (jsx(GroupHeader, { colSpan: cells.length, data: row.original }, row.id));
+        }
+        return (jsx(Table.Row, { className: cx(styles['row'], onRowClick ? styles['clickable'] : '', classNames?.row), "data-state": isSelected && 'selected', ref: isLastRow ? lastRowRef : undefined, onClick: () => onRowClick?.(row.original), children: cells.map(cell => {
+                const columnDef = cell.column.columnDef;
+                return (jsx(Table.Cell, { className: cx(styles['cell'], columnDef.classNames?.cell), style: columnDef.styles?.cell, children: flexRender(columnDef.cell, cell.getContext()) }, cell.id));
+            }) }, row.id));
+    });
+}
 const DefaultEmptyComponent = () => (jsx(EmptyState, { icon: jsx(TableIcon, {}), heading: 'No Data' }));
 function Content({ emptyState, zeroState, classNames = {} }) {
     const { onRowClick, table, mode, isLoading, loadMoreData, loadingRowCount = 3, tableQuery } = useDataTable();
@@ -78,18 +79,16 @@ function Content({ emptyState, zeroState, classNames = {} }) {
     }, [mode, rows.length, handleObserver]);
     const visibleColumnsLength = table.getVisibleLeafColumns().length;
     const hasData = rows?.length > 0 || isLoading;
-    // Determine if we're in zero state (no filters/search applied) or empty state (filters/search applied)
     const hasFiltersOrSearch = (tableQuery?.filters && tableQuery.filters.length > 0) ||
         Boolean(tableQuery?.search && tableQuery.search.trim() !== '');
     const isZeroState = !hasData && !hasFiltersOrSearch;
     const isEmptyState = !hasData && hasFiltersOrSearch;
-    // Show zeroState when no data and no filters/search, otherwise show emptyState
     const stateToShow = isZeroState
         ? (zeroState ?? emptyState ?? jsx(DefaultEmptyComponent, {}))
         : isEmptyState
             ? (emptyState ?? jsx(DefaultEmptyComponent, {}))
             : null;
-    return (jsx("div", { className: classNames.root, children: jsxs(Table, { className: classNames.table, children: [hasData && (jsx(Headers, { headerGroups: headerGroups, className: classNames.header })), jsx(Table.Body, { className: classNames.body, children: hasData ? (jsxs(Fragment, { children: [jsx(Rows, { rows: rows, ref: lastRowRef, onRowClick: onRowClick, classNames: {
+    return (jsx("div", { className: cx(styles.contentRoot, classNames.root), children: jsxs(Table, { className: classNames.table, children: [hasData && (jsx(Headers, { headerGroups: headerGroups, className: classNames.header })), jsx(Table.Body, { className: classNames.body, children: hasData ? (jsxs(Fragment, { children: [jsx(Rows, { rows: rows, lastRowRef: lastRowRef, onRowClick: onRowClick, classNames: {
                                     row: classNames.row
                                 } }), isLoading ? (jsx(LoaderRows, { rowCount: loadingRowCount, columnCount: visibleColumnsLength })) : null] })) : (jsx(Table.Row, { children: jsx(Table.Cell, { colSpan: visibleColumnsLength, className: styles.emptyStateCell, children: stateToShow }) })) })] }) }));
 }

package/dist/components/data-table/components/content.js.map

@@ -1 +1 @@
-{"version":3,"file":"content.js","sources":["../../../../components/data-table/components/content.tsx"],"sourcesContent":["'use client';\n\nimport { TableIcon } from '@radix-ui/react-icons';\nimport type { HeaderGroup, Row } from '@tanstack/react-table';\nimport { flexRender } from '@tanstack/react-table';\nimport { cx } from 'class-variance-authority';\nimport {\n  ForwardedRef,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef\n} from 'react';\n\nimport { Badge } from '../../badge';\nimport { EmptyState } from '../../empty-state';\nimport { Flex } from '../../flex';\nimport { Skeleton } from '../../skeleton';\nimport { Table } from '../../table';\nimport styles from '../data-table.module.css';\nimport {\n  DataTableColumnDef,\n  DataTableContentProps,\n  GroupedData\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\n\nfunction Headers<TData>({\n  headerGroups = [],\n  className = ''\n}: {\n  headerGroups: HeaderGroup<TData>[];\n  className?: string;\n}) {\n  return (\n    <Table.Header className={className}>\n      {headerGroups?.map(headerGroup => (\n        <Table.Row key={headerGroup?.id}>\n          {headerGroup?.headers?.map(header => {\n            const columnDef = header.column.columnDef as DataTableColumnDef<\n              TData,\n              unknown\n            >;\n            return (\n              <Table.Head\n                key={header.id}\n                colSpan={header.colSpan}\n                className={columnDef.classNames?.header}\n                style={columnDef.styles?.header}\n              >\n                {flexRender(columnDef.header, header.getContext())}\n              </Table.Head>\n            );\n          })}\n        </Table.Row>\n      ))}\n    </Table.Header>\n  );\n}\n\ninterface RowsProps<TData> {\n  rows: Row<TData>[];\n  lastRowRef?: ForwardedRef<HTMLTableRowElement>;\n  onRowClick?: (row: TData) => void;\n  classNames?: {\n    row?: string;\n  };\n}\n\nfunction LoaderRows({\n  rowCount,\n  columnCount\n}: {\n  rowCount: number;\n  columnCount: number;\n}) {\n  const rows = Array.from({ length: rowCount });\n  return rows.map((_, rowIndex) => {\n    const columns = Array.from({ length: columnCount });\n    return (\n      <Table.Row key={'loading-row-' + rowIndex}>\n        {columns.map((_, colIndex) => (\n          <Table.Cell key={'loading-column-' + colIndex}>\n            <Skeleton />\n          </Table.Cell>\n        ))}\n      </Table.Row>\n    );\n  });\n}\n\nfunction GroupHeader<TData>({\n  colSpan,\n  data\n}: {\n  colSpan: number;\n  data: GroupedData<TData>;\n}) {\n  return (\n    <Table.SectionHeader colSpan={colSpan}>\n      <Flex gap={3} align='center'>\n        {data?.label}\n        {data.showGroupCount ? (\n          <Badge variant='neutral'>{data?.count}</Badge>\n        ) : null}\n      </Flex>\n    </Table.SectionHeader>\n  );\n}\n\nconst Rows = forwardRef<HTMLTableRowElement, RowsProps<unknown>>(\n  (props, lastRowRef) => {\n    const { rows = [], onRowClick, classNames } = props;\n    return (\n      <>\n        {rows?.map((row, index) => {\n          const isSelected = row.getIsSelected();\n          const cells = row.getVisibleCells() || [];\n          const isSectionHeadingRow = row.depth === 0 && row.getIsExpanded();\n          const isLastRow = index === rows.length - 1;\n          const rowKey = row.id + '-' + index;\n          return isSectionHeadingRow ? (\n            <GroupHeader\n              key={rowKey}\n              colSpan={cells.length}\n              data={row.original as GroupedData<unknown>}\n            />\n          ) : (\n            <Table.Row\n              key={rowKey}\n              className={cx(\n                styles['row'],\n                onRowClick ? styles['clickable'] : '',\n                classNames?.row\n              )}\n              data-state={isSelected && 'selected'}\n              ref={isLastRow ? lastRowRef : undefined}\n              onClick={() => onRowClick?.(row.original)}\n            >\n              {cells.map(cell => {\n                const columnDef = cell.column.columnDef as DataTableColumnDef<\n                  unknown,\n                  unknown\n                >;\n                return (\n                  <Table.Cell\n                    key={cell.id}\n                    className={cx(styles['cell'], columnDef.classNames?.cell)}\n                    style={columnDef.styles?.cell}\n                  >\n                    {flexRender(columnDef.cell, cell.getContext())}\n                  </Table.Cell>\n                );\n              })}\n            </Table.Row>\n          );\n        })}\n      </>\n    );\n  }\n);\n\nconst DefaultEmptyComponent = () => (\n  <EmptyState icon={<TableIcon />} heading='No Data' />\n);\n\nexport function Content({\n  emptyState,\n  zeroState,\n  classNames = {}\n}: DataTableContentProps) {\n  const {\n    onRowClick,\n    table,\n    mode,\n    isLoading,\n    loadMoreData,\n    loadingRowCount = 3,\n    tableQuery\n  } = useDataTable();\n  const headerGroups = table?.getHeaderGroups();\n  const rowModel = table?.getRowModel();\n  const { rows = [] } = rowModel || {};\n\n  const lastRowRef = useRef<HTMLTableRowElement | null>(null);\n  const observerRef = useRef<IntersectionObserver | null>(null);\n\n  const handleObserver = useCallback(\n    (entries: IntersectionObserverEntry[]) => {\n      const target = entries[0];\n      if (target.isIntersecting && !isLoading) {\n        loadMoreData();\n      }\n    },\n    [loadMoreData, isLoading]\n  );\n\n  useEffect(() => {\n    if (mode !== 'server') return;\n\n    if (observerRef.current) {\n      observerRef.current.disconnect();\n    }\n\n    observerRef.current = new IntersectionObserver(handleObserver, {\n      threshold: 0.1\n    });\n    const lastRow = lastRowRef.current;\n    if (lastRow) {\n      observerRef.current.observe(lastRow);\n    }\n\n    return () => {\n      if (observerRef.current && lastRow) {\n        observerRef.current.unobserve(lastRow);\n        observerRef.current.disconnect();\n      }\n    };\n  }, [mode, rows.length, handleObserver]);\n\n  const visibleColumnsLength = table.getVisibleLeafColumns().length;\n\n  const hasData = rows?.length > 0 || isLoading;\n\n  // Determine if we're in zero state (no filters/search applied) or empty state (filters/search applied)\n  const hasFiltersOrSearch =\n    (tableQuery?.filters && tableQuery.filters.length > 0) ||\n    Boolean(tableQuery?.search && tableQuery.search.trim() !== '');\n\n  const isZeroState = !hasData && !hasFiltersOrSearch;\n  const isEmptyState = !hasData && hasFiltersOrSearch;\n\n  // Show zeroState when no data and no filters/search, otherwise show emptyState\n  const stateToShow: React.ReactNode = isZeroState\n    ? (zeroState ?? emptyState ?? <DefaultEmptyComponent />)\n    : isEmptyState\n      ? (emptyState ?? <DefaultEmptyComponent />)\n      : null;\n\n  return (\n    <div className={classNames.root}>\n      <Table className={classNames.table}>\n        {hasData && (\n          <Headers headerGroups={headerGroups} className={classNames.header} />\n        )}\n        <Table.Body className={classNames.body}>\n          {hasData ? (\n            <>\n              <Rows\n                rows={rows}\n                ref={lastRowRef}\n                onRowClick={onRowClick}\n                classNames={{\n                  row: classNames.row\n                }}\n              />\n              {isLoading ? (\n                <LoaderRows\n                  rowCount={loadingRowCount}\n                  columnCount={visibleColumnsLength}\n                />\n              ) : null}\n            </>\n          ) : (\n            <Table.Row>\n              <Table.Cell\n                colSpan={visibleColumnsLength}\n                className={styles.emptyStateCell}\n              >\n                {stateToShow}\n              </Table.Cell>\n            </Table.Row>\n          )}\n        </Table.Body>\n      </Table>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AA2BA;AAOE;AAKU;;;AAmBZ;AAWA;AAOE;;AAEE;AACA;AASF;AACF;AAEA;;AAiBA;AAEA;;;AAMU;;AAEA;;;;AAsBM;;AAaF;;AAMZ;AAGF;AAIM;;AAcJ;AACA;;AAGA;AACA;AAEA;AAEI;AACA;AACE;;AAEJ;;;;AAOA;AACE;;AAGF;AACE;AACD;AACD;;AAEE;;AAGF;AACE;AACE;AACA;;AAEJ;;;;;AAQF;AAEE;AAEF;AACA;;;;AAKE;AACE;;AAGJ;;;AAsCF;;"}
+{"version":3,"file":"content.js","sources":["../../../../components/data-table/components/content.tsx"],"sourcesContent":["'use client';\n\nimport { TableIcon } from '@radix-ui/react-icons';\nimport type { HeaderGroup, Row } from '@tanstack/react-table';\nimport { flexRender } from '@tanstack/react-table';\nimport { cx } from 'class-variance-authority';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { Badge } from '../../badge';\nimport { EmptyState } from '../../empty-state';\nimport { Flex } from '../../flex';\nimport { Skeleton } from '../../skeleton';\nimport { Table } from '../../table';\nimport styles from '../data-table.module.css';\nimport {\n  DataTableColumnDef,\n  DataTableContentProps,\n  GroupedData\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\n\nfunction Headers<TData>({\n  headerGroups = [],\n  className = ''\n}: {\n  headerGroups: HeaderGroup<TData>[];\n  className?: string;\n}) {\n  return (\n    <Table.Header className={className}>\n      {headerGroups?.map(headerGroup => (\n        <Table.Row key={headerGroup?.id}>\n          {headerGroup?.headers?.map(header => {\n            const columnDef = header.column.columnDef as DataTableColumnDef<\n              TData,\n              unknown\n            >;\n            return (\n              <Table.Head\n                key={header.id}\n                colSpan={header.colSpan}\n                className={cx(styles.head, columnDef.classNames?.header)}\n                style={columnDef.styles?.header}\n              >\n                {flexRender(columnDef.header, header.getContext())}\n              </Table.Head>\n            );\n          })}\n        </Table.Row>\n      ))}\n    </Table.Header>\n  );\n}\n\ninterface RowsProps<TData> {\n  rows: Row<TData>[];\n  onRowClick?: (row: TData) => void;\n  classNames?: {\n    row?: string;\n  };\n  lastRowRef?: React.RefObject<HTMLTableRowElement | null>;\n}\n\nfunction LoaderRows({\n  rowCount,\n  columnCount\n}: {\n  rowCount: number;\n  columnCount: number;\n}) {\n  const rows = Array.from({ length: rowCount });\n  return rows.map((_, rowIndex) => {\n    const columns = Array.from({ length: columnCount });\n    return (\n      <Table.Row key={'loading-row-' + rowIndex}>\n        {columns.map((_, colIndex) => (\n          <Table.Cell key={'loading-column-' + colIndex}>\n            <Skeleton />\n          </Table.Cell>\n        ))}\n      </Table.Row>\n    );\n  });\n}\n\nfunction GroupHeader<TData>({\n  colSpan,\n  data\n}: {\n  colSpan: number;\n  data: GroupedData<TData>;\n}) {\n  return (\n    <Table.SectionHeader colSpan={colSpan}>\n      <Flex gap={3} align='center'>\n        {data?.label}\n        {data.showGroupCount ? (\n          <Badge variant='neutral'>{data?.count}</Badge>\n        ) : null}\n      </Flex>\n    </Table.SectionHeader>\n  );\n}\n\nfunction Rows<TData>({\n  rows = [],\n  onRowClick,\n  classNames,\n  lastRowRef\n}: RowsProps<TData>) {\n  return rows.map((row, idx) => {\n    const isSelected = row.getIsSelected();\n    const cells = row.getVisibleCells() || [];\n    const isGroupHeader = row.subRows && row.subRows.length > 0;\n    const isLastRow = idx === rows.length - 1;\n\n    if (isGroupHeader) {\n      return (\n        <GroupHeader\n          key={row.id}\n          colSpan={cells.length}\n          data={row.original as GroupedData<unknown>}\n        />\n      );\n    }\n\n    return (\n      <Table.Row\n        key={row.id}\n        className={cx(\n          styles['row'],\n          onRowClick ? styles['clickable'] : '',\n          classNames?.row\n        )}\n        data-state={isSelected && 'selected'}\n        ref={isLastRow ? lastRowRef : undefined}\n        onClick={() => onRowClick?.(row.original)}\n      >\n        {cells.map(cell => {\n          const columnDef = cell.column.columnDef as DataTableColumnDef<\n            unknown,\n            unknown\n          >;\n          return (\n            <Table.Cell\n              key={cell.id}\n              className={cx(styles['cell'], columnDef.classNames?.cell)}\n              style={columnDef.styles?.cell}\n            >\n              {flexRender(columnDef.cell, cell.getContext())}\n            </Table.Cell>\n          );\n        })}\n      </Table.Row>\n    );\n  });\n}\n\nconst DefaultEmptyComponent = () => (\n  <EmptyState icon={<TableIcon />} heading='No Data' />\n);\n\nexport function Content({\n  emptyState,\n  zeroState,\n  classNames = {}\n}: DataTableContentProps) {\n  const {\n    onRowClick,\n    table,\n    mode,\n    isLoading,\n    loadMoreData,\n    loadingRowCount = 3,\n    tableQuery\n  } = useDataTable();\n\n  const headerGroups = table?.getHeaderGroups();\n  const rowModel = table?.getRowModel();\n  const { rows = [] } = rowModel || {};\n\n  const lastRowRef = useRef<HTMLTableRowElement | null>(null);\n  const observerRef = useRef<IntersectionObserver | null>(null);\n\n  const handleObserver = useCallback(\n    (entries: IntersectionObserverEntry[]) => {\n      const target = entries[0];\n      if (target.isIntersecting && !isLoading) {\n        loadMoreData();\n      }\n    },\n    [loadMoreData, isLoading]\n  );\n\n  useEffect(() => {\n    if (mode !== 'server') return;\n\n    if (observerRef.current) {\n      observerRef.current.disconnect();\n    }\n\n    observerRef.current = new IntersectionObserver(handleObserver, {\n      threshold: 0.1\n    });\n    const lastRow = lastRowRef.current;\n    if (lastRow) {\n      observerRef.current.observe(lastRow);\n    }\n\n    return () => {\n      if (observerRef.current && lastRow) {\n        observerRef.current.unobserve(lastRow);\n        observerRef.current.disconnect();\n      }\n    };\n  }, [mode, rows.length, handleObserver]);\n\n  const visibleColumnsLength = table.getVisibleLeafColumns().length;\n\n  const hasData = rows?.length > 0 || isLoading;\n\n  const hasFiltersOrSearch =\n    (tableQuery?.filters && tableQuery.filters.length > 0) ||\n    Boolean(tableQuery?.search && tableQuery.search.trim() !== '');\n\n  const isZeroState = !hasData && !hasFiltersOrSearch;\n  const isEmptyState = !hasData && hasFiltersOrSearch;\n\n  const stateToShow: React.ReactNode = isZeroState\n    ? (zeroState ?? emptyState ?? <DefaultEmptyComponent />)\n    : isEmptyState\n      ? (emptyState ?? <DefaultEmptyComponent />)\n      : null;\n\n  return (\n    <div className={cx(styles.contentRoot, classNames.root)}>\n      <Table className={classNames.table}>\n        {hasData && (\n          <Headers headerGroups={headerGroups} className={classNames.header} />\n        )}\n        <Table.Body className={classNames.body}>\n          {hasData ? (\n            <>\n              <Rows\n                rows={rows}\n                lastRowRef={lastRowRef}\n                onRowClick={onRowClick}\n                classNames={{\n                  row: classNames.row\n                }}\n              />\n              {isLoading ? (\n                <LoaderRows\n                  rowCount={loadingRowCount}\n                  columnCount={visibleColumnsLength}\n                />\n              ) : null}\n            </>\n          ) : (\n            <Table.Row>\n              <Table.Cell\n                colSpan={visibleColumnsLength}\n                className={styles.emptyStateCell}\n              >\n                {stateToShow}\n              </Table.Cell>\n            </Table.Row>\n          )}\n        </Table.Body>\n      </Table>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAqBA;AAOE;AAKU;;;AAmBZ;AAWA;AAOE;;AAEE;AACA;AASF;AACF;AAEA;;AAiBA;AAEA;;AAOI;;AAEA;;;;;AAaA;AAaM;;AAaF;AAGN;AACF;AAEA;AAIM;;AAeJ;AACA;;AAGA;AACA;AAEA;AAEI;AACA;AACE;;AAEJ;;;;AAOA;AACE;;AAGF;AACE;AACD;AACD;;AAEE;;AAGF;AACE;AACE;AACA;;AAEJ;;;;AAOF;AAEE;AAEF;AACA;;;AAIE;AACE;;AAGJ;;;AAsCF;;"}

package/dist/components/data-table/components/display-settings.cjs

@@ -2,7 +2,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var reactIcons_esm = require('../../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.2.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.cjs');
+var reactIcons = require('@radix-ui/react-icons');
 var button = require('../../button/button.cjs');
 var flex = require('../../flex/flex.cjs');
 var popover = require('../../popover/popover.cjs');
@@ -13,7 +13,7 @@ var displayProperties = require('./display-properties.cjs');
 var grouping = require('./grouping.cjs');
 var ordering = require('./ordering.cjs');
 
-function DisplaySettings({ trigger = (jsxRuntime.jsx(button.Button, { variant: 'outline', color: 'neutral', size: 'small', leadingIcon: jsxRuntime.jsx(reactIcons_esm.MixerHorizontalIcon, {}), children: "Display" })) }) {
+function DisplaySettings({ trigger = (jsxRuntime.jsx(button.Button, { variant: 'outline', color: 'neutral', size: 'small', leadingIcon: jsxRuntime.jsx(reactIcons.MixerHorizontalIcon, {}), children: "Display" })) }) {
     const { table, updateTableQuery, tableQuery, defaultSort, onDisplaySettingsReset } = useDataTable.useDataTable();
     const columns = table?.getAllColumns();
     const sortableColumns = columns

package/dist/components/data-table/components/display-settings.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { MixerHorizontalIcon } from '../../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.2.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
+import { MixerHorizontalIcon } from '@radix-ui/react-icons';
 import { Button } from '../../button/button.js';
 import { Flex } from '../../flex/flex.js';
 import { Popover } from '../../popover/popover.js';

package/dist/components/data-table/components/ordering.cjs

@@ -2,7 +2,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var reactIcons_esm = require('../../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.2.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.cjs');
+var reactIcons = require('@radix-ui/react-icons');
 var flex = require('../../flex/flex.cjs');
 var iconButton = require('../../icon-button/icon-button.cjs');
 var select = require('../../select/select.cjs');
@@ -18,7 +18,7 @@ function Ordering({ columnList, onChange, value }) {
         const newOrder = value.order === dataTable_types.SortOrders.ASC ? dataTable_types.SortOrders.DESC : dataTable_types.SortOrders.ASC;
         onChange(value.name, newOrder);
     }
-    return (jsxRuntime.jsxs(flex.Flex, { justify: 'between', align: 'center', children: [jsxRuntime.jsx(text.Text, { size: 2, weight: 500, className: dataTable_module.default['flex-1'], children: "Ordering" }), jsxRuntime.jsxs(flex.Flex, { gap: 'extra-small', className: dataTable_module.default['flex-1'], children: [jsxRuntime.jsxs(select.Select, { onValueChange: handleColumnChange, value: value.name, disabled: columnList.length === 0, children: [jsxRuntime.jsx(select.Select.Trigger, { size: 'small', className: dataTable_module.default['display-popover-properties-select'], "with-icon-button": 'true', children: jsxRuntime.jsx(select.Select.Value, { placeholder: 'Select value' }) }), jsxRuntime.jsx(select.Select.Content, { "data-variant": 'filter', children: columnList.map(column => (jsxRuntime.jsx(select.Select.Item, { value: column.id, children: column.label }, column.id))) })] }), jsxRuntime.jsx(iconButton.IconButton, { onClick: handleOrderChange, size: 4, disabled: columnList.length === 0, children: value.order === dataTable_types.SortOrders?.ASC ? (jsxRuntime.jsx(reactIcons_esm.TextAlignBottomIcon, { className: dataTable_module.default['display-popover-sort-icon'] })) : (jsxRuntime.jsx(reactIcons_esm.TextAlignTopIcon, { className: dataTable_module.default['display-popover-sort-icon'] })) })] })] }));
+    return (jsxRuntime.jsxs(flex.Flex, { justify: 'between', align: 'center', children: [jsxRuntime.jsx(text.Text, { size: 2, weight: 500, className: dataTable_module.default['flex-1'], children: "Ordering" }), jsxRuntime.jsxs(flex.Flex, { gap: 'extra-small', className: dataTable_module.default['flex-1'], children: [jsxRuntime.jsxs(select.Select, { onValueChange: handleColumnChange, value: value.name, disabled: columnList.length === 0, children: [jsxRuntime.jsx(select.Select.Trigger, { size: 'small', className: dataTable_module.default['display-popover-properties-select'], "with-icon-button": 'true', children: jsxRuntime.jsx(select.Select.Value, { placeholder: 'Select value' }) }), jsxRuntime.jsx(select.Select.Content, { "data-variant": 'filter', children: columnList.map(column => (jsxRuntime.jsx(select.Select.Item, { value: column.id, children: column.label }, column.id))) })] }), jsxRuntime.jsx(iconButton.IconButton, { onClick: handleOrderChange, size: 4, disabled: columnList.length === 0, children: value.order === dataTable_types.SortOrders?.ASC ? (jsxRuntime.jsx(reactIcons.TextAlignBottomIcon, { className: dataTable_module.default['display-popover-sort-icon'] })) : (jsxRuntime.jsx(reactIcons.TextAlignTopIcon, { className: dataTable_module.default['display-popover-sort-icon'] })) })] })] }));
 }
 
 exports.Ordering = Ordering;

package/dist/components/data-table/components/ordering.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { TextAlignBottomIcon, TextAlignTopIcon } from '../../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.2.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
+import { TextAlignBottomIcon, TextAlignTopIcon } from '@radix-ui/react-icons';
 import { Flex } from '../../flex/flex.js';
 import { IconButton } from '../../icon-button/icon-button.js';
 import { Select } from '../../select/select.js';

package/dist/components/data-table/components/toolbar.cjs

@@ -2,7 +2,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var index = require('../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
+var classVarianceAuthority = require('class-variance-authority');
 var flex = require('../../flex/flex.cjs');
 var dataTable_module = require('../data-table.module.css.cjs');
 var useDataTable = require('../hooks/useDataTable.cjs');
@@ -14,7 +14,7 @@ function Toolbar({ className }) {
     if (!shouldShowFilters) {
         return null;
     }
-    return (jsxRuntime.jsxs(flex.Flex, { className: index.cx(dataTable_module.default['toolbar'], className), justify: 'between', align: 'center', children: [jsxRuntime.jsx(filters.Filters, {}), jsxRuntime.jsx(displaySettings.DisplaySettings, {})] }));
+    return (jsxRuntime.jsxs(flex.Flex, { className: classVarianceAuthority.cx(dataTable_module.default['toolbar'], className), justify: 'between', align: 'center', children: [jsxRuntime.jsx(filters.Filters, {}), jsxRuntime.jsx(displaySettings.DisplaySettings, {})] }));
 }
 
 exports.Toolbar = Toolbar;

package/dist/components/data-table/components/toolbar.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { cx } from '../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
+import { cx } from 'class-variance-authority';
 import { Flex } from '../../flex/flex.js';
 import styles from '../data-table.module.css.js';
 import { useDataTable } from '../hooks/useDataTable.js';