@raystack/apsara 0.55.0-rc.4 → 0.55.1

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

@@ -2,7 +2,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var reactIcons = require('@radix-ui/react-icons');
+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 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.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_esm.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 '@radix-ui/react-icons';
+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 { 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 = require('@radix-ui/react-icons');
-var reactTable = require('@tanstack/react-table');
-var classVarianceAuthority = require('class-variance-authority');
+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 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: reactTable.flexRender(columnDef.header, header.getContext()) }, header.id));
+                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));
             }) }, headerGroup?.id))) }));
 }
 function LoaderRows({ rowCount, columnCount }) {
@@ -32,21 +32,21 @@ function GroupHeader({ colSpan, data }) {
 }
 const Rows = React.forwardRef((props, lastRowRef) => {
     const { rows = [], onRowClick, classNames } = props;
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: rows?.map((row, index) => {
+    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 === rows.length - 1;
-            const rowKey = row.id + '-' + index;
-            return isSectionHeadingRow ? (jsxRuntime.jsx(GroupHeader, { colSpan: cells.length, data: row.original }, rowKey)) : (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 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: classVarianceAuthority.cx(dataTable_module.default['cell'], columnDef.classNames?.cell), style: columnDef.styles?.cell, children: reactTable.flexRender(columnDef.cell, cell.getContext()) }, cell.id));
+                    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.TableIcon, {}), heading: 'No Data' }));
-function Content({ emptyState, classNames = {} }) {
-    const { onRowClick, table: table$1, mode, isLoading, loadMoreData, loadingRowCount = 3 } = useDataTable.useDataTable();
+const DefaultEmptyComponent = () => (jsxRuntime.jsx(emptyState.EmptyState, { icon: jsxRuntime.jsx(reactIcons_esm.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();
     const rowModel = table$1?.getRowModel();
     const { rows = [] } = rowModel || {};
@@ -80,9 +80,20 @@ function Content({ emptyState, 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: {
                                     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: emptyState || jsxRuntime.jsx(DefaultEmptyComponent, {}) }) })) })] }) }));
+                                } }), 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 }) })) })] }) }));
 }
 
 exports.Content = Content;

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  classNames = {}\n}: DataTableContentProps) {\n  const {\n    onRowClick,\n    table,\n    mode,\n    isLoading,\n    loadMoreData,\n    loadingRowCount = 3\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  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                {emptyState || <DefaultEmptyComponent />}\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;AAIJ;AAQA;AACA;;AAGA;AACA;AAEA;AAEI;AACA;AACE;;AAEJ;;;;AAOA;AACE;;AAGF;AACE;AACD;AACD;;AAEE;;AAGF;AACE;AACE;AACA;;AAEJ;;;;AAOF;;AAee;AAuBjB;;"}
+{"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;;"}

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

@@ -1,3 +1,3 @@
 import { DataTableContentProps } from '../data-table.types';
-export declare function Content({ emptyState, classNames }: DataTableContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function Content({ emptyState, zeroState, classNames }: DataTableContentProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=content.d.ts.map

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,UAAe,EAChB,EAAE,qBAAqB,2CA2FvB"}
+{"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"}

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

@@ -1,8 +1,8 @@
 "use client";
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { TableIcon } from '@radix-ui/react-icons';
-import { flexRender } from '@tanstack/react-table';
-import { cx } from 'class-variance-authority';
+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 { Badge } from '../../badge/badge.js';
 import { EmptyState } from '../../empty-state/empty-state.js';
@@ -43,8 +43,8 @@ const Rows = forwardRef((props, lastRowRef) => {
         }) }));
 });
 const DefaultEmptyComponent = () => (jsx(EmptyState, { icon: jsx(TableIcon, {}), heading: 'No Data' }));
-function Content({ emptyState, classNames = {} }) {
-    const { onRowClick, table, mode, isLoading, loadMoreData, loadingRowCount = 3 } = useDataTable();
+function Content({ emptyState, zeroState, classNames = {} }) {
+    const { onRowClick, table, mode, isLoading, loadMoreData, loadingRowCount = 3, tableQuery } = useDataTable();
     const headerGroups = table?.getHeaderGroups();
     const rowModel = table?.getRowModel();
     const { rows = [] } = rowModel || {};
@@ -78,9 +78,20 @@ function Content({ emptyState, 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: {
                                     row: classNames.row
-                                } }), isLoading ? (jsx(LoaderRows, { rowCount: loadingRowCount, columnCount: visibleColumnsLength })) : null] })) : (jsx(Table.Row, { children: jsx(Table.Cell, { colSpan: visibleColumnsLength, className: styles.emptyStateCell, children: emptyState || jsx(DefaultEmptyComponent, {}) }) })) })] }) }));
+                                } }), isLoading ? (jsx(LoaderRows, { rowCount: loadingRowCount, columnCount: visibleColumnsLength })) : null] })) : (jsx(Table.Row, { children: jsx(Table.Cell, { colSpan: visibleColumnsLength, className: styles.emptyStateCell, children: stateToShow }) })) })] }) }));
 }
 
 export { Content };

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  classNames = {}\n}: DataTableContentProps) {\n  const {\n    onRowClick,\n    table,\n    mode,\n    isLoading,\n    loadMoreData,\n    loadingRowCount = 3\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  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                {emptyState || <DefaultEmptyComponent />}\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;AAIJ;AAQA;AACA;;AAGA;AACA;AAEA;AAEI;AACA;AACE;;AAEJ;;;;AAOA;AACE;;AAGF;AACE;AACD;AACD;;AAEE;;AAGF;AACE;AACE;AACA;;AAEJ;;;;AAOF;;AAee;AAuBjB;;"}
+{"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;;"}

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

@@ -2,7 +2,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var reactIcons = require('@radix-ui/react-icons');
+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 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() {
+function DisplaySettings({ trigger = (jsxRuntime.jsx(button.Button, { variant: 'outline', color: 'neutral', size: 'small', leadingIcon: jsxRuntime.jsx(reactIcons_esm.MixerHorizontalIcon, {}), children: "Display" })) }) {
     const { table, updateTableQuery, tableQuery, defaultSort, onDisplaySettingsReset } = useDataTable.useDataTable();
     const columns = table?.getAllColumns();
     const sortableColumns = columns
@@ -52,7 +52,7 @@ function DisplaySettings() {
     function onReset() {
         onDisplaySettingsReset();
     }
-    return (jsxRuntime.jsxs(popover.Popover, { children: [jsxRuntime.jsx(popover.Popover.Trigger, { asChild: true, children: jsxRuntime.jsx(button.Button, { variant: 'outline', color: 'neutral', size: 'small', leadingIcon: jsxRuntime.jsx(reactIcons.MixerHorizontalIcon, {}), children: "Display" }) }), jsxRuntime.jsx(popover.Popover.Content, { className: dataTable_module.default['display-popover-content'], align: 'end', children: jsxRuntime.jsxs(flex.Flex, { direction: 'column', children: [jsxRuntime.jsxs(flex.Flex, { direction: 'column', className: dataTable_module.default['display-popover-properties-container'], gap: 5, children: [jsxRuntime.jsx(ordering.Ordering, { columnList: sortableColumns, onChange: onSortChange, value: tableQuery?.sort?.[0] || defaultSort }), jsxRuntime.jsx(grouping.Grouping, { columns: columns, onRemove: onGroupRemove, onChange: onGroupChange, value: tableQuery?.group_by?.[0] || dataTable_types.defaultGroupOption.id })] }), jsxRuntime.jsx(flex.Flex, { className: dataTable_module.default['display-popover-properties-container'], children: jsxRuntime.jsx(displayProperties.DisplayProperties, { columns: columns }) }), jsxRuntime.jsx(flex.Flex, { justify: 'end', className: dataTable_module.default['display-popover-reset-container'], children: jsxRuntime.jsx(button.Button, { variant: 'text', onClick: onReset, color: 'neutral', children: "Reset to default" }) })] }) })] }));
+    return (jsxRuntime.jsxs(popover.Popover, { children: [jsxRuntime.jsx(popover.Popover.Trigger, { asChild: true, children: trigger }), jsxRuntime.jsx(popover.Popover.Content, { className: dataTable_module.default['display-popover-content'], align: 'end', children: jsxRuntime.jsxs(flex.Flex, { direction: 'column', children: [jsxRuntime.jsxs(flex.Flex, { direction: 'column', className: dataTable_module.default['display-popover-properties-container'], gap: 5, children: [jsxRuntime.jsx(ordering.Ordering, { columnList: sortableColumns, onChange: onSortChange, value: tableQuery?.sort?.[0] || defaultSort }), jsxRuntime.jsx(grouping.Grouping, { columns: columns, onRemove: onGroupRemove, onChange: onGroupChange, value: tableQuery?.group_by?.[0] || dataTable_types.defaultGroupOption.id })] }), jsxRuntime.jsx(flex.Flex, { className: dataTable_module.default['display-popover-properties-container'], children: jsxRuntime.jsx(displayProperties.DisplayProperties, { columns: columns }) }), jsxRuntime.jsx(flex.Flex, { justify: 'end', className: dataTable_module.default['display-popover-reset-container'], children: jsxRuntime.jsx(button.Button, { variant: 'text', onClick: onReset, color: 'neutral', children: "Reset to default" }) })] }) })] }));
 }
 
 exports.DisplaySettings = DisplaySettings;

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

@@ -1 +1 @@
-{"version":3,"file":"display-settings.cjs","sources":["../../../../components/data-table/components/display-settings.tsx"],"sourcesContent":["'use client';\n\nimport { MixerHorizontalIcon } from '@radix-ui/react-icons';\n\nimport { Button } from '../../button';\nimport { Flex } from '../../flex';\nimport { Popover } from '../../popover';\nimport styles from '../data-table.module.css';\nimport {\n  DataTableColumn,\n  SortOrdersValues,\n  defaultGroupOption\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { DisplayProperties } from './display-properties';\nimport { Grouping } from './grouping';\nimport { Ordering } from './ordering';\n\nexport function DisplaySettings<TData, TValue>() {\n  const {\n    table,\n    updateTableQuery,\n    tableQuery,\n    defaultSort,\n    onDisplaySettingsReset\n  } = useDataTable();\n  const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n  const sortableColumns = columns\n    ?.filter(col => col.columnDef.enableSorting)\n    ?.map(column => {\n      const id = column.id;\n      return {\n        label: column.columnDef.header || id,\n        id: id\n      };\n    });\n\n  function onSortChange(columnId: string, order: SortOrdersValues) {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        sort: [{ name: columnId, order }]\n      };\n    });\n  }\n\n  function onGroupChange(columnId: string) {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        group_by: [columnId]\n      };\n    });\n  }\n\n  function onGroupRemove() {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        group_by: []\n      };\n    });\n  }\n\n  function onReset() {\n    onDisplaySettingsReset();\n  }\n\n  return (\n    <Popover>\n      <Popover.Trigger asChild>\n        <Button\n          variant='outline'\n          color='neutral'\n          size='small'\n          leadingIcon={<MixerHorizontalIcon />}\n        >\n          Display\n        </Button>\n      </Popover.Trigger>\n      <Popover.Content\n        className={styles['display-popover-content']}\n        align='end'\n      >\n        <Flex direction='column'>\n          <Flex\n            direction='column'\n            className={styles['display-popover-properties-container']}\n            gap={5}\n          >\n            <Ordering\n              columnList={sortableColumns}\n              onChange={onSortChange}\n              value={tableQuery?.sort?.[0] || defaultSort}\n            />\n            <Grouping\n              columns={columns}\n              onRemove={onGroupRemove}\n              onChange={onGroupChange}\n              value={tableQuery?.group_by?.[0] || defaultGroupOption.id}\n            />\n          </Flex>\n          <Flex className={styles['display-popover-properties-container']}>\n            <DisplayProperties columns={columns} />\n          </Flex>\n          <Flex\n            justify='end'\n            className={styles['display-popover-reset-container']}\n          >\n            <Button variant='text' onClick={onReset} color='neutral'>\n              Reset to default\n            </Button>\n          </Flex>\n        </Flex>\n      </Popover.Content>\n    </Popover>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAmBE;AAOA;;;AAIE;AACE;;AAEE;AACA;;AAEJ;AAEF;;;AAGM;;;AAGJ;;;;;AAMI;;;AAGJ;;AAGF;;;AAGM;AACA;;AAEJ;;AAGF;AACE;;AAGF;AAiDF;;"}
+{"version":3,"file":"display-settings.cjs","sources":["../../../../components/data-table/components/display-settings.tsx"],"sourcesContent":["'use client';\n\nimport { MixerHorizontalIcon } from '@radix-ui/react-icons';\n\nimport { ReactNode } from 'react';\nimport { Button } from '../../button';\nimport { Flex } from '../../flex';\nimport { Popover } from '../../popover';\nimport styles from '../data-table.module.css';\nimport {\n  DataTableColumn,\n  SortOrdersValues,\n  defaultGroupOption\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { DisplayProperties } from './display-properties';\nimport { Grouping } from './grouping';\nimport { Ordering } from './ordering';\n\ninterface DisplaySettingsProps {\n  trigger?: ReactNode;\n}\n\nexport function DisplaySettings<TData, TValue>({\n  trigger = (\n    <Button\n      variant='outline'\n      color='neutral'\n      size='small'\n      leadingIcon={<MixerHorizontalIcon />}\n    >\n      Display\n    </Button>\n  )\n}: DisplaySettingsProps) {\n  const {\n    table,\n    updateTableQuery,\n    tableQuery,\n    defaultSort,\n    onDisplaySettingsReset\n  } = useDataTable();\n  const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n  const sortableColumns = columns\n    ?.filter(col => col.columnDef.enableSorting)\n    ?.map(column => {\n      const id = column.id;\n      return {\n        label: column.columnDef.header || id,\n        id: id\n      };\n    });\n\n  function onSortChange(columnId: string, order: SortOrdersValues) {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        sort: [{ name: columnId, order }]\n      };\n    });\n  }\n\n  function onGroupChange(columnId: string) {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        group_by: [columnId]\n      };\n    });\n  }\n\n  function onGroupRemove() {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        group_by: []\n      };\n    });\n  }\n\n  function onReset() {\n    onDisplaySettingsReset();\n  }\n\n  return (\n    <Popover>\n      <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n      <Popover.Content\n        className={styles['display-popover-content']}\n        align='end'\n      >\n        <Flex direction='column'>\n          <Flex\n            direction='column'\n            className={styles['display-popover-properties-container']}\n            gap={5}\n          >\n            <Ordering\n              columnList={sortableColumns}\n              onChange={onSortChange}\n              value={tableQuery?.sort?.[0] || defaultSort}\n            />\n            <Grouping\n              columns={columns}\n              onRemove={onGroupRemove}\n              onChange={onGroupChange}\n              value={tableQuery?.group_by?.[0] || defaultGroupOption.id}\n            />\n          </Flex>\n          <Flex className={styles['display-popover-properties-container']}>\n            <DisplayProperties columns={columns} />\n          </Flex>\n          <Flex\n            justify='end'\n            className={styles['display-popover-reset-container']}\n          >\n            <Button variant='text' onClick={onReset} color='neutral'>\n              Reset to default\n            </Button>\n          </Flex>\n        </Flex>\n      </Popover.Content>\n    </Popover>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAuBgB;AAYd;AAOA;;;AAIE;AACE;;AAEE;AACA;;AAEJ;AAEF;;;AAGM;;;AAGJ;;;;;AAMI;;;AAGJ;;AAGF;;;AAGM;AACA;;AAEJ;;AAGF;AACE;;AAGF;AAwCF;;"}

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

@@ -1,2 +1,7 @@
-export declare function DisplaySettings<TData, TValue>(): import("react/jsx-runtime").JSX.Element;
+import { ReactNode } from 'react';
+interface DisplaySettingsProps {
+    trigger?: ReactNode;
+}
+export declare function DisplaySettings<TData, TValue>({ trigger }: DisplaySettingsProps): import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=display-settings.d.ts.map

package/dist/components/data-table/components/display-settings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"display-settings.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/display-settings.tsx"],"names":[],"mappings":"AAkBA,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,6CAoG5C"}
+{"version":3,"file":"display-settings.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/display-settings.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAelC,UAAU,oBAAoB;IAC5B,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,EAC7C,OASC,EACF,EAAE,oBAAoB,2CA2FtB"}

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 '@radix-ui/react-icons';
+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 { Button } from '../../button/button.js';
 import { Flex } from '../../flex/flex.js';
 import { Popover } from '../../popover/popover.js';
@@ -11,7 +11,7 @@ import { DisplayProperties } from './display-properties.js';
 import { Grouping } from './grouping.js';
 import { Ordering } from './ordering.js';
 
-function DisplaySettings() {
+function DisplaySettings({ trigger = (jsx(Button, { variant: 'outline', color: 'neutral', size: 'small', leadingIcon: jsx(MixerHorizontalIcon, {}), children: "Display" })) }) {
     const { table, updateTableQuery, tableQuery, defaultSort, onDisplaySettingsReset } = useDataTable();
     const columns = table?.getAllColumns();
     const sortableColumns = columns
@@ -50,7 +50,7 @@ function DisplaySettings() {
     function onReset() {
         onDisplaySettingsReset();
     }
-    return (jsxs(Popover, { children: [jsx(Popover.Trigger, { asChild: true, children: jsx(Button, { variant: 'outline', color: 'neutral', size: 'small', leadingIcon: jsx(MixerHorizontalIcon, {}), children: "Display" }) }), jsx(Popover.Content, { className: styles['display-popover-content'], align: 'end', children: jsxs(Flex, { direction: 'column', children: [jsxs(Flex, { direction: 'column', className: styles['display-popover-properties-container'], gap: 5, children: [jsx(Ordering, { columnList: sortableColumns, onChange: onSortChange, value: tableQuery?.sort?.[0] || defaultSort }), jsx(Grouping, { columns: columns, onRemove: onGroupRemove, onChange: onGroupChange, value: tableQuery?.group_by?.[0] || defaultGroupOption.id })] }), jsx(Flex, { className: styles['display-popover-properties-container'], children: jsx(DisplayProperties, { columns: columns }) }), jsx(Flex, { justify: 'end', className: styles['display-popover-reset-container'], children: jsx(Button, { variant: 'text', onClick: onReset, color: 'neutral', children: "Reset to default" }) })] }) })] }));
+    return (jsxs(Popover, { children: [jsx(Popover.Trigger, { asChild: true, children: trigger }), jsx(Popover.Content, { className: styles['display-popover-content'], align: 'end', children: jsxs(Flex, { direction: 'column', children: [jsxs(Flex, { direction: 'column', className: styles['display-popover-properties-container'], gap: 5, children: [jsx(Ordering, { columnList: sortableColumns, onChange: onSortChange, value: tableQuery?.sort?.[0] || defaultSort }), jsx(Grouping, { columns: columns, onRemove: onGroupRemove, onChange: onGroupChange, value: tableQuery?.group_by?.[0] || defaultGroupOption.id })] }), jsx(Flex, { className: styles['display-popover-properties-container'], children: jsx(DisplayProperties, { columns: columns }) }), jsx(Flex, { justify: 'end', className: styles['display-popover-reset-container'], children: jsx(Button, { variant: 'text', onClick: onReset, color: 'neutral', children: "Reset to default" }) })] }) })] }));
 }
 
 export { DisplaySettings };

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

@@ -1 +1 @@
-{"version":3,"file":"display-settings.js","sources":["../../../../components/data-table/components/display-settings.tsx"],"sourcesContent":["'use client';\n\nimport { MixerHorizontalIcon } from '@radix-ui/react-icons';\n\nimport { Button } from '../../button';\nimport { Flex } from '../../flex';\nimport { Popover } from '../../popover';\nimport styles from '../data-table.module.css';\nimport {\n  DataTableColumn,\n  SortOrdersValues,\n  defaultGroupOption\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { DisplayProperties } from './display-properties';\nimport { Grouping } from './grouping';\nimport { Ordering } from './ordering';\n\nexport function DisplaySettings<TData, TValue>() {\n  const {\n    table,\n    updateTableQuery,\n    tableQuery,\n    defaultSort,\n    onDisplaySettingsReset\n  } = useDataTable();\n  const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n  const sortableColumns = columns\n    ?.filter(col => col.columnDef.enableSorting)\n    ?.map(column => {\n      const id = column.id;\n      return {\n        label: column.columnDef.header || id,\n        id: id\n      };\n    });\n\n  function onSortChange(columnId: string, order: SortOrdersValues) {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        sort: [{ name: columnId, order }]\n      };\n    });\n  }\n\n  function onGroupChange(columnId: string) {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        group_by: [columnId]\n      };\n    });\n  }\n\n  function onGroupRemove() {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        group_by: []\n      };\n    });\n  }\n\n  function onReset() {\n    onDisplaySettingsReset();\n  }\n\n  return (\n    <Popover>\n      <Popover.Trigger asChild>\n        <Button\n          variant='outline'\n          color='neutral'\n          size='small'\n          leadingIcon={<MixerHorizontalIcon />}\n        >\n          Display\n        </Button>\n      </Popover.Trigger>\n      <Popover.Content\n        className={styles['display-popover-content']}\n        align='end'\n      >\n        <Flex direction='column'>\n          <Flex\n            direction='column'\n            className={styles['display-popover-properties-container']}\n            gap={5}\n          >\n            <Ordering\n              columnList={sortableColumns}\n              onChange={onSortChange}\n              value={tableQuery?.sort?.[0] || defaultSort}\n            />\n            <Grouping\n              columns={columns}\n              onRemove={onGroupRemove}\n              onChange={onGroupChange}\n              value={tableQuery?.group_by?.[0] || defaultGroupOption.id}\n            />\n          </Flex>\n          <Flex className={styles['display-popover-properties-container']}>\n            <DisplayProperties columns={columns} />\n          </Flex>\n          <Flex\n            justify='end'\n            className={styles['display-popover-reset-container']}\n          >\n            <Button variant='text' onClick={onReset} color='neutral'>\n              Reset to default\n            </Button>\n          </Flex>\n        </Flex>\n      </Popover.Content>\n    </Popover>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAmBE;AAOA;;;AAIE;AACE;;AAEE;AACA;;AAEJ;AAEF;;;AAGM;;;AAGJ;;;;;AAMI;;;AAGJ;;AAGF;;;AAGM;AACA;;AAEJ;;AAGF;AACE;;AAGF;AAiDF;;"}
+{"version":3,"file":"display-settings.js","sources":["../../../../components/data-table/components/display-settings.tsx"],"sourcesContent":["'use client';\n\nimport { MixerHorizontalIcon } from '@radix-ui/react-icons';\n\nimport { ReactNode } from 'react';\nimport { Button } from '../../button';\nimport { Flex } from '../../flex';\nimport { Popover } from '../../popover';\nimport styles from '../data-table.module.css';\nimport {\n  DataTableColumn,\n  SortOrdersValues,\n  defaultGroupOption\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { DisplayProperties } from './display-properties';\nimport { Grouping } from './grouping';\nimport { Ordering } from './ordering';\n\ninterface DisplaySettingsProps {\n  trigger?: ReactNode;\n}\n\nexport function DisplaySettings<TData, TValue>({\n  trigger = (\n    <Button\n      variant='outline'\n      color='neutral'\n      size='small'\n      leadingIcon={<MixerHorizontalIcon />}\n    >\n      Display\n    </Button>\n  )\n}: DisplaySettingsProps) {\n  const {\n    table,\n    updateTableQuery,\n    tableQuery,\n    defaultSort,\n    onDisplaySettingsReset\n  } = useDataTable();\n  const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n  const sortableColumns = columns\n    ?.filter(col => col.columnDef.enableSorting)\n    ?.map(column => {\n      const id = column.id;\n      return {\n        label: column.columnDef.header || id,\n        id: id\n      };\n    });\n\n  function onSortChange(columnId: string, order: SortOrdersValues) {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        sort: [{ name: columnId, order }]\n      };\n    });\n  }\n\n  function onGroupChange(columnId: string) {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        group_by: [columnId]\n      };\n    });\n  }\n\n  function onGroupRemove() {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        group_by: []\n      };\n    });\n  }\n\n  function onReset() {\n    onDisplaySettingsReset();\n  }\n\n  return (\n    <Popover>\n      <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n      <Popover.Content\n        className={styles['display-popover-content']}\n        align='end'\n      >\n        <Flex direction='column'>\n          <Flex\n            direction='column'\n            className={styles['display-popover-properties-container']}\n            gap={5}\n          >\n            <Ordering\n              columnList={sortableColumns}\n              onChange={onSortChange}\n              value={tableQuery?.sort?.[0] || defaultSort}\n            />\n            <Grouping\n              columns={columns}\n              onRemove={onGroupRemove}\n              onChange={onGroupChange}\n              value={tableQuery?.group_by?.[0] || defaultGroupOption.id}\n            />\n          </Flex>\n          <Flex className={styles['display-popover-properties-container']}>\n            <DisplayProperties columns={columns} />\n          </Flex>\n          <Flex\n            justify='end'\n            className={styles['display-popover-reset-container']}\n          >\n            <Button variant='text' onClick={onReset} color='neutral'>\n              Reset to default\n            </Button>\n          </Flex>\n        </Flex>\n      </Popover.Content>\n    </Popover>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAuBgB;AAYd;AAOA;;;AAIE;AACE;;AAEE;AACA;;AAEJ;AAEF;;;AAGM;;;AAGJ;;;;;AAMI;;;AAGJ;;AAGF;;;AAGM;AACA;;AAEJ;;AAGF;AACE;;AAGF;AAwCF;;"}

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

@@ -50,7 +50,7 @@ function Filters({ classNames, className, trigger }) {
             ...filter
         };
     }) || [];
-    return (jsxRuntime.jsxs(flex.Flex, { gap: 3, className: className, children: [jsxRuntime.jsx(flex.Flex, { gap: 3, className: classNames?.container, children: appliedFilters.map(filter => (jsxRuntime.jsx(filterChip.FilterChip, { label: filter.label, value: filter.value, onRemove: () => handleRemoveFilter(filter.name), onValueChange: value => handleFilterValueChange(filter.name, value), onOperationChange: operator => handleFilterOperationChange(filter.name, operator), columnType: filter.filterType, options: filter.options, className: classNames?.filterChips }, filter.name))) }), jsxRuntime.jsx(AddFilter, { columnList: columnList, appliedFiltersSet: appliedFiltersSet, onAddFilter: onAddFilter, children: trigger })] }));
+    return (jsxRuntime.jsxs(flex.Flex, { gap: 3, className: className, children: [appliedFilters.length > 0 && (jsxRuntime.jsx(flex.Flex, { gap: 3, className: classNames?.container, children: appliedFilters.map(filter => (jsxRuntime.jsx(filterChip.FilterChip, { label: filter.label, value: filter.value, onRemove: () => handleRemoveFilter(filter.name), onValueChange: value => handleFilterValueChange(filter.name, value), onOperationChange: operator => handleFilterOperationChange(filter.name, operator), columnType: filter.filterType, options: filter.options, className: classNames?.filterChips }, filter.name))) })), jsxRuntime.jsx(AddFilter, { columnList: columnList, appliedFiltersSet: appliedFiltersSet, onAddFilter: onAddFilter, children: trigger })] }));
 }
 
 exports.Filters = Filters;

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

@@ -1 +1 @@
-{"version":3,"file":"filters.cjs","sources":["../../../../components/data-table/components/filters.tsx"],"sourcesContent":["'use client';\n\nimport { ReactNode, useMemo } from 'react';\nimport { FilterIcon } from '~/icons';\nimport { FilterOperatorTypes, FilterType } from '~/types/filters';\nimport { Button } from '../../button';\nimport { DropdownMenu } from '../../dropdown-menu';\nimport { FilterChip } from '../../filter-chip';\nimport { Flex } from '../../flex';\nimport { IconButton } from '../../icon-button';\nimport { DataTableColumn } from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { useFilters } from '../hooks/useFilters';\n\ntype Trigger<TData, TValue> =\n  | ReactNode\n  | (({\n      availableFilters,\n      appliedFilters\n    }: {\n      availableFilters: DataTableColumn<TData, TValue>[];\n      appliedFilters: Set<string>;\n    }) => ReactNode);\n\ninterface AddFilterProps<TData, TValue> {\n  columnList: DataTableColumn<TData, TValue>[];\n  appliedFiltersSet: Set<string>;\n  onAddFilter: (column: DataTableColumn<TData, TValue>) => void;\n  children?: Trigger<TData, TValue>;\n}\n\nfunction AddFilter<TData, TValue>({\n  columnList = [],\n  appliedFiltersSet,\n  onAddFilter,\n  children\n}: AddFilterProps<TData, TValue>) {\n  const availableFilters = columnList?.filter(\n    col => !appliedFiltersSet.has(col.id)\n  );\n\n  const trigger = useMemo(() => {\n    if (typeof children === 'function')\n      return children({ availableFilters, appliedFilters: appliedFiltersSet });\n    else if (children) return children;\n    else if (appliedFiltersSet.size > 0)\n      return (\n        <IconButton size={4}>\n          <FilterIcon />\n        </IconButton>\n      );\n    else\n      return (\n        <Button\n          variant='text'\n          size='small'\n          leadingIcon={<FilterIcon />}\n          color='neutral'\n        >\n          Filter\n        </Button>\n      );\n  }, [children, appliedFiltersSet, availableFilters]);\n\n  return availableFilters.length > 0 ? (\n    <DropdownMenu>\n      <DropdownMenu.Trigger asChild>{trigger}</DropdownMenu.Trigger>\n      <DropdownMenu.Content>\n        {availableFilters?.map(column => {\n          const columnDef = column.columnDef;\n          const id = columnDef.accessorKey || column.id;\n          return (\n            <DropdownMenu.Item key={id} onClick={() => onAddFilter(column)}>\n              {columnDef.header || id}\n            </DropdownMenu.Item>\n          );\n        })}\n      </DropdownMenu.Content>\n    </DropdownMenu>\n  ) : null;\n}\n\nexport function Filters<TData, TValue>({\n  classNames,\n  className,\n  trigger\n}: {\n  classNames?: {\n    container?: string;\n    filterChips?: string;\n    addFilter?: string;\n  };\n  className?: string;\n  trigger?: Trigger<TData, TValue>;\n}) {\n  const { table, tableQuery } = useDataTable();\n  const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n  const {\n    onAddFilter,\n    handleRemoveFilter,\n    handleFilterValueChange,\n    handleFilterOperationChange\n  } = useFilters<TData, TValue>();\n\n  const columnList = columns?.filter(\n    column => column.columnDef.enableColumnFilter\n  );\n\n  const appliedFiltersSet = new Set(\n    tableQuery?.filters?.map(filter => filter.name)\n  );\n\n  const appliedFilters =\n    tableQuery?.filters?.map(filter => {\n      const columnDef = columns?.find(col => {\n        const columnDef = col.columnDef;\n        const id = columnDef.accessorKey || col.id;\n        return id === filter.name;\n      })?.columnDef;\n      return {\n        filterType: columnDef?.filterType || FilterType.string,\n        label: (columnDef?.header as string) || '',\n        options: columnDef?.filterOptions || [],\n        ...filter\n      };\n    }) || [];\n\n  return (\n    <Flex gap={3} className={className}>\n      <Flex gap={3} className={classNames?.container}>\n        {appliedFilters.map(filter => (\n          <FilterChip\n            key={filter.name}\n            label={filter.label}\n            value={filter.value}\n            onRemove={() => handleRemoveFilter(filter.name)}\n            onValueChange={value => handleFilterValueChange(filter.name, value)}\n            onOperationChange={operator =>\n              handleFilterOperationChange(\n                filter.name,\n                operator as FilterOperatorTypes\n              )\n            }\n            columnType={filter.filterType}\n            options={filter.options}\n            className={classNames?.filterChips}\n          />\n        ))}\n      </Flex>\n      <AddFilter\n        columnList={columnList}\n        appliedFiltersSet={appliedFiltersSet}\n        onAddFilter={onAddFilter}\n      >\n        {trigger}\n      </AddFilter>\n    </Flex>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AA+BA;;AAUE;;;AAGO;AAAc;AACd;AACH;;;;AAkBJ;AAKQ;;;;AAWV;AAEM;;AAcJ;AAEA;AAOA;;;;AAWM;;AAEA;;;AAGA;AACA;AACA;AACA;;;AAIN;AA+BF;;"}
+{"version":3,"file":"filters.cjs","sources":["../../../../components/data-table/components/filters.tsx"],"sourcesContent":["'use client';\n\nimport { ReactNode, useMemo } from 'react';\nimport { FilterIcon } from '~/icons';\nimport { FilterOperatorTypes, FilterType } from '~/types/filters';\nimport { Button } from '../../button';\nimport { DropdownMenu } from '../../dropdown-menu';\nimport { FilterChip } from '../../filter-chip';\nimport { Flex } from '../../flex';\nimport { IconButton } from '../../icon-button';\nimport { DataTableColumn } from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { useFilters } from '../hooks/useFilters';\n\ntype Trigger<TData, TValue> =\n  | ReactNode\n  | (({\n      availableFilters,\n      appliedFilters\n    }: {\n      availableFilters: DataTableColumn<TData, TValue>[];\n      appliedFilters: Set<string>;\n    }) => ReactNode);\n\ninterface AddFilterProps<TData, TValue> {\n  columnList: DataTableColumn<TData, TValue>[];\n  appliedFiltersSet: Set<string>;\n  onAddFilter: (column: DataTableColumn<TData, TValue>) => void;\n  children?: Trigger<TData, TValue>;\n}\n\nfunction AddFilter<TData, TValue>({\n  columnList = [],\n  appliedFiltersSet,\n  onAddFilter,\n  children\n}: AddFilterProps<TData, TValue>) {\n  const availableFilters = columnList?.filter(\n    col => !appliedFiltersSet.has(col.id)\n  );\n\n  const trigger = useMemo(() => {\n    if (typeof children === 'function')\n      return children({ availableFilters, appliedFilters: appliedFiltersSet });\n    else if (children) return children;\n    else if (appliedFiltersSet.size > 0)\n      return (\n        <IconButton size={4}>\n          <FilterIcon />\n        </IconButton>\n      );\n    else\n      return (\n        <Button\n          variant='text'\n          size='small'\n          leadingIcon={<FilterIcon />}\n          color='neutral'\n        >\n          Filter\n        </Button>\n      );\n  }, [children, appliedFiltersSet, availableFilters]);\n\n  return availableFilters.length > 0 ? (\n    <DropdownMenu>\n      <DropdownMenu.Trigger asChild>{trigger}</DropdownMenu.Trigger>\n      <DropdownMenu.Content>\n        {availableFilters?.map(column => {\n          const columnDef = column.columnDef;\n          const id = columnDef.accessorKey || column.id;\n          return (\n            <DropdownMenu.Item key={id} onClick={() => onAddFilter(column)}>\n              {columnDef.header || id}\n            </DropdownMenu.Item>\n          );\n        })}\n      </DropdownMenu.Content>\n    </DropdownMenu>\n  ) : null;\n}\n\nexport function Filters<TData, TValue>({\n  classNames,\n  className,\n  trigger\n}: {\n  classNames?: {\n    container?: string;\n    filterChips?: string;\n    addFilter?: string;\n  };\n  className?: string;\n  trigger?: Trigger<TData, TValue>;\n}) {\n  const { table, tableQuery } = useDataTable();\n  const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n  const {\n    onAddFilter,\n    handleRemoveFilter,\n    handleFilterValueChange,\n    handleFilterOperationChange\n  } = useFilters<TData, TValue>();\n\n  const columnList = columns?.filter(\n    column => column.columnDef.enableColumnFilter\n  );\n\n  const appliedFiltersSet = new Set(\n    tableQuery?.filters?.map(filter => filter.name)\n  );\n\n  const appliedFilters =\n    tableQuery?.filters?.map(filter => {\n      const columnDef = columns?.find(col => {\n        const columnDef = col.columnDef;\n        const id = columnDef.accessorKey || col.id;\n        return id === filter.name;\n      })?.columnDef;\n      return {\n        filterType: columnDef?.filterType || FilterType.string,\n        label: (columnDef?.header as string) || '',\n        options: columnDef?.filterOptions || [],\n        ...filter\n      };\n    }) || [];\n\n  return (\n    <Flex gap={3} className={className}>\n      {appliedFilters.length > 0 && (\n        <Flex gap={3} className={classNames?.container}>\n          {appliedFilters.map(filter => (\n            <FilterChip\n              key={filter.name}\n              label={filter.label}\n              value={filter.value}\n              onRemove={() => handleRemoveFilter(filter.name)}\n              onValueChange={value =>\n                handleFilterValueChange(filter.name, value)\n              }\n              onOperationChange={operator =>\n                handleFilterOperationChange(\n                  filter.name,\n                  operator as FilterOperatorTypes\n                )\n              }\n              columnType={filter.filterType}\n              options={filter.options}\n              className={classNames?.filterChips}\n            />\n          ))}\n        </Flex>\n      )}\n      <AddFilter\n        columnList={columnList}\n        appliedFiltersSet={appliedFiltersSet}\n        onAddFilter={onAddFilter}\n      >\n        {trigger}\n      </AddFilter>\n    </Flex>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AA+BA;;AAUE;;;AAGO;AAAc;AACd;AACH;;;;AAkBJ;AAKQ;;;;AAWV;AAEM;;AAcJ;AAEA;AAOA;;;;AAWM;;AAEA;;;AAGA;AACA;AACA;AACA;;;AAIN;AAmCF;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"filters.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/filters.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAQ3C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAItD,KAAK,OAAO,CAAC,KAAK,EAAE,MAAM,IACtB,SAAS,GACT,CAAC,CAAC,EACA,gBAAgB,EAChB,cAAc,EACf,EAAE;IACD,gBAAgB,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,CAAC;IACnD,cAAc,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CAC7B,KAAK,SAAS,CAAC,CAAC;AA4DrB,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,EACrC,UAAU,EACV,SAAS,EACT,OAAO,EACR,EAAE;IACD,UAAU,CAAC,EAAE;QACX,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;CAClC,2CAiEA"}
+{"version":3,"file":"filters.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/filters.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAQ3C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAItD,KAAK,OAAO,CAAC,KAAK,EAAE,MAAM,IACtB,SAAS,GACT,CAAC,CAAC,EACA,gBAAgB,EAChB,cAAc,EACf,EAAE;IACD,gBAAgB,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,CAAC;IACnD,cAAc,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CAC7B,KAAK,SAAS,CAAC,CAAC;AA4DrB,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,EACrC,UAAU,EACV,SAAS,EACT,OAAO,EACR,EAAE;IACD,UAAU,CAAC,EAAE;QACX,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;CAClC,2CAqEA"}

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

@@ -48,7 +48,7 @@ function Filters({ classNames, className, trigger }) {
             ...filter
         };
     }) || [];
-    return (jsxs(Flex, { gap: 3, className: className, children: [jsx(Flex, { gap: 3, className: classNames?.container, children: appliedFilters.map(filter => (jsx(FilterChip, { label: filter.label, value: filter.value, onRemove: () => handleRemoveFilter(filter.name), onValueChange: value => handleFilterValueChange(filter.name, value), onOperationChange: operator => handleFilterOperationChange(filter.name, operator), columnType: filter.filterType, options: filter.options, className: classNames?.filterChips }, filter.name))) }), jsx(AddFilter, { columnList: columnList, appliedFiltersSet: appliedFiltersSet, onAddFilter: onAddFilter, children: trigger })] }));
+    return (jsxs(Flex, { gap: 3, className: className, children: [appliedFilters.length > 0 && (jsx(Flex, { gap: 3, className: classNames?.container, children: appliedFilters.map(filter => (jsx(FilterChip, { label: filter.label, value: filter.value, onRemove: () => handleRemoveFilter(filter.name), onValueChange: value => handleFilterValueChange(filter.name, value), onOperationChange: operator => handleFilterOperationChange(filter.name, operator), columnType: filter.filterType, options: filter.options, className: classNames?.filterChips }, filter.name))) })), jsx(AddFilter, { columnList: columnList, appliedFiltersSet: appliedFiltersSet, onAddFilter: onAddFilter, children: trigger })] }));
 }
 
 export { Filters };

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

@@ -1 +1 @@
-{"version":3,"file":"filters.js","sources":["../../../../components/data-table/components/filters.tsx"],"sourcesContent":["'use client';\n\nimport { ReactNode, useMemo } from 'react';\nimport { FilterIcon } from '~/icons';\nimport { FilterOperatorTypes, FilterType } from '~/types/filters';\nimport { Button } from '../../button';\nimport { DropdownMenu } from '../../dropdown-menu';\nimport { FilterChip } from '../../filter-chip';\nimport { Flex } from '../../flex';\nimport { IconButton } from '../../icon-button';\nimport { DataTableColumn } from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { useFilters } from '../hooks/useFilters';\n\ntype Trigger<TData, TValue> =\n  | ReactNode\n  | (({\n      availableFilters,\n      appliedFilters\n    }: {\n      availableFilters: DataTableColumn<TData, TValue>[];\n      appliedFilters: Set<string>;\n    }) => ReactNode);\n\ninterface AddFilterProps<TData, TValue> {\n  columnList: DataTableColumn<TData, TValue>[];\n  appliedFiltersSet: Set<string>;\n  onAddFilter: (column: DataTableColumn<TData, TValue>) => void;\n  children?: Trigger<TData, TValue>;\n}\n\nfunction AddFilter<TData, TValue>({\n  columnList = [],\n  appliedFiltersSet,\n  onAddFilter,\n  children\n}: AddFilterProps<TData, TValue>) {\n  const availableFilters = columnList?.filter(\n    col => !appliedFiltersSet.has(col.id)\n  );\n\n  const trigger = useMemo(() => {\n    if (typeof children === 'function')\n      return children({ availableFilters, appliedFilters: appliedFiltersSet });\n    else if (children) return children;\n    else if (appliedFiltersSet.size > 0)\n      return (\n        <IconButton size={4}>\n          <FilterIcon />\n        </IconButton>\n      );\n    else\n      return (\n        <Button\n          variant='text'\n          size='small'\n          leadingIcon={<FilterIcon />}\n          color='neutral'\n        >\n          Filter\n        </Button>\n      );\n  }, [children, appliedFiltersSet, availableFilters]);\n\n  return availableFilters.length > 0 ? (\n    <DropdownMenu>\n      <DropdownMenu.Trigger asChild>{trigger}</DropdownMenu.Trigger>\n      <DropdownMenu.Content>\n        {availableFilters?.map(column => {\n          const columnDef = column.columnDef;\n          const id = columnDef.accessorKey || column.id;\n          return (\n            <DropdownMenu.Item key={id} onClick={() => onAddFilter(column)}>\n              {columnDef.header || id}\n            </DropdownMenu.Item>\n          );\n        })}\n      </DropdownMenu.Content>\n    </DropdownMenu>\n  ) : null;\n}\n\nexport function Filters<TData, TValue>({\n  classNames,\n  className,\n  trigger\n}: {\n  classNames?: {\n    container?: string;\n    filterChips?: string;\n    addFilter?: string;\n  };\n  className?: string;\n  trigger?: Trigger<TData, TValue>;\n}) {\n  const { table, tableQuery } = useDataTable();\n  const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n  const {\n    onAddFilter,\n    handleRemoveFilter,\n    handleFilterValueChange,\n    handleFilterOperationChange\n  } = useFilters<TData, TValue>();\n\n  const columnList = columns?.filter(\n    column => column.columnDef.enableColumnFilter\n  );\n\n  const appliedFiltersSet = new Set(\n    tableQuery?.filters?.map(filter => filter.name)\n  );\n\n  const appliedFilters =\n    tableQuery?.filters?.map(filter => {\n      const columnDef = columns?.find(col => {\n        const columnDef = col.columnDef;\n        const id = columnDef.accessorKey || col.id;\n        return id === filter.name;\n      })?.columnDef;\n      return {\n        filterType: columnDef?.filterType || FilterType.string,\n        label: (columnDef?.header as string) || '',\n        options: columnDef?.filterOptions || [],\n        ...filter\n      };\n    }) || [];\n\n  return (\n    <Flex gap={3} className={className}>\n      <Flex gap={3} className={classNames?.container}>\n        {appliedFilters.map(filter => (\n          <FilterChip\n            key={filter.name}\n            label={filter.label}\n            value={filter.value}\n            onRemove={() => handleRemoveFilter(filter.name)}\n            onValueChange={value => handleFilterValueChange(filter.name, value)}\n            onOperationChange={operator =>\n              handleFilterOperationChange(\n                filter.name,\n                operator as FilterOperatorTypes\n              )\n            }\n            columnType={filter.filterType}\n            options={filter.options}\n            className={classNames?.filterChips}\n          />\n        ))}\n      </Flex>\n      <AddFilter\n        columnList={columnList}\n        appliedFiltersSet={appliedFiltersSet}\n        onAddFilter={onAddFilter}\n      >\n        {trigger}\n      </AddFilter>\n    </Flex>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AA+BA;;AAUE;;;AAGO;AAAc;AACd;AACH;;;;AAkBJ;AAKQ;;;;AAWV;AAEM;;AAcJ;AAEA;AAOA;;;;AAWM;;AAEA;;;AAGA;AACA;AACA;AACA;;;AAIN;AA+BF;;"}
+{"version":3,"file":"filters.js","sources":["../../../../components/data-table/components/filters.tsx"],"sourcesContent":["'use client';\n\nimport { ReactNode, useMemo } from 'react';\nimport { FilterIcon } from '~/icons';\nimport { FilterOperatorTypes, FilterType } from '~/types/filters';\nimport { Button } from '../../button';\nimport { DropdownMenu } from '../../dropdown-menu';\nimport { FilterChip } from '../../filter-chip';\nimport { Flex } from '../../flex';\nimport { IconButton } from '../../icon-button';\nimport { DataTableColumn } from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { useFilters } from '../hooks/useFilters';\n\ntype Trigger<TData, TValue> =\n  | ReactNode\n  | (({\n      availableFilters,\n      appliedFilters\n    }: {\n      availableFilters: DataTableColumn<TData, TValue>[];\n      appliedFilters: Set<string>;\n    }) => ReactNode);\n\ninterface AddFilterProps<TData, TValue> {\n  columnList: DataTableColumn<TData, TValue>[];\n  appliedFiltersSet: Set<string>;\n  onAddFilter: (column: DataTableColumn<TData, TValue>) => void;\n  children?: Trigger<TData, TValue>;\n}\n\nfunction AddFilter<TData, TValue>({\n  columnList = [],\n  appliedFiltersSet,\n  onAddFilter,\n  children\n}: AddFilterProps<TData, TValue>) {\n  const availableFilters = columnList?.filter(\n    col => !appliedFiltersSet.has(col.id)\n  );\n\n  const trigger = useMemo(() => {\n    if (typeof children === 'function')\n      return children({ availableFilters, appliedFilters: appliedFiltersSet });\n    else if (children) return children;\n    else if (appliedFiltersSet.size > 0)\n      return (\n        <IconButton size={4}>\n          <FilterIcon />\n        </IconButton>\n      );\n    else\n      return (\n        <Button\n          variant='text'\n          size='small'\n          leadingIcon={<FilterIcon />}\n          color='neutral'\n        >\n          Filter\n        </Button>\n      );\n  }, [children, appliedFiltersSet, availableFilters]);\n\n  return availableFilters.length > 0 ? (\n    <DropdownMenu>\n      <DropdownMenu.Trigger asChild>{trigger}</DropdownMenu.Trigger>\n      <DropdownMenu.Content>\n        {availableFilters?.map(column => {\n          const columnDef = column.columnDef;\n          const id = columnDef.accessorKey || column.id;\n          return (\n            <DropdownMenu.Item key={id} onClick={() => onAddFilter(column)}>\n              {columnDef.header || id}\n            </DropdownMenu.Item>\n          );\n        })}\n      </DropdownMenu.Content>\n    </DropdownMenu>\n  ) : null;\n}\n\nexport function Filters<TData, TValue>({\n  classNames,\n  className,\n  trigger\n}: {\n  classNames?: {\n    container?: string;\n    filterChips?: string;\n    addFilter?: string;\n  };\n  className?: string;\n  trigger?: Trigger<TData, TValue>;\n}) {\n  const { table, tableQuery } = useDataTable();\n  const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n  const {\n    onAddFilter,\n    handleRemoveFilter,\n    handleFilterValueChange,\n    handleFilterOperationChange\n  } = useFilters<TData, TValue>();\n\n  const columnList = columns?.filter(\n    column => column.columnDef.enableColumnFilter\n  );\n\n  const appliedFiltersSet = new Set(\n    tableQuery?.filters?.map(filter => filter.name)\n  );\n\n  const appliedFilters =\n    tableQuery?.filters?.map(filter => {\n      const columnDef = columns?.find(col => {\n        const columnDef = col.columnDef;\n        const id = columnDef.accessorKey || col.id;\n        return id === filter.name;\n      })?.columnDef;\n      return {\n        filterType: columnDef?.filterType || FilterType.string,\n        label: (columnDef?.header as string) || '',\n        options: columnDef?.filterOptions || [],\n        ...filter\n      };\n    }) || [];\n\n  return (\n    <Flex gap={3} className={className}>\n      {appliedFilters.length > 0 && (\n        <Flex gap={3} className={classNames?.container}>\n          {appliedFilters.map(filter => (\n            <FilterChip\n              key={filter.name}\n              label={filter.label}\n              value={filter.value}\n              onRemove={() => handleRemoveFilter(filter.name)}\n              onValueChange={value =>\n                handleFilterValueChange(filter.name, value)\n              }\n              onOperationChange={operator =>\n                handleFilterOperationChange(\n                  filter.name,\n                  operator as FilterOperatorTypes\n                )\n              }\n              columnType={filter.filterType}\n              options={filter.options}\n              className={classNames?.filterChips}\n            />\n          ))}\n        </Flex>\n      )}\n      <AddFilter\n        columnList={columnList}\n        appliedFiltersSet={appliedFiltersSet}\n        onAddFilter={onAddFilter}\n      >\n        {trigger}\n      </AddFilter>\n    </Flex>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AA+BA;;AAUE;;;AAGO;AAAc;AACd;AACH;;;;AAkBJ;AAKQ;;;;AAWV;AAEM;;AAcJ;AAEA;AAOA;;;;AAWM;;AAEA;;;AAGA;AACA;AACA;AACA;;;AAIN;AAmCF;;"}

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

@@ -2,7 +2,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var reactIcons = require('@radix-ui/react-icons');
+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 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.TextAlignBottomIcon, { className: dataTable_module.default['display-popover-sort-icon'] })) : (jsxRuntime.jsx(reactIcons.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_esm.TextAlignBottomIcon, { className: dataTable_module.default['display-popover-sort-icon'] })) : (jsxRuntime.jsx(reactIcons_esm.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 '@radix-ui/react-icons';
+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 { 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/search.cjs

@@ -6,8 +6,8 @@ var React = require('react');
 var search = require('../../search/search.cjs');
 var useDataTable = require('../hooks/useDataTable.cjs');
 
-const TableSearch = React.forwardRef(({ ...props }, ref) => {
-    const { updateTableQuery, tableQuery } = useDataTable.useDataTable();
+const TableSearch = React.forwardRef(({ autoDisableInZeroState = true, disabled, ...props }, ref) => {
+    const { updateTableQuery, tableQuery, shouldShowFilters = false } = useDataTable.useDataTable();
     const handleSearch = (e) => {
         const value = e.target.value;
         updateTableQuery(query => {
@@ -25,8 +25,13 @@ const TableSearch = React.forwardRef(({ ...props }, ref) => {
             };
         });
     };
-    return (jsxRuntime.jsx(search.Search, { ...props, ref: ref, onChange: handleSearch, value: tableQuery?.search, onClear: handleClear }));
+    // Auto-disable in zero state if enabled, but allow manual override
+    // Once search is applied, keep it enabled (even if shouldShowFilters is false)
+    const hasSearch = Boolean(tableQuery?.search && tableQuery.search.trim() !== '');
+    const isDisabled = disabled ?? (autoDisableInZeroState && !shouldShowFilters && !hasSearch);
+    return (jsxRuntime.jsx(search.Search, { ...props, ref: ref, onChange: handleSearch, value: tableQuery?.search, onClear: handleClear, disabled: isDisabled }));
 });
+TableSearch.displayName = 'TableSearch';
 
 exports.TableSearch = TableSearch;
 //# sourceMappingURL=search.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"search.cjs","sources":["../../../../components/data-table/components/search.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef } from 'react';\nimport { Search } from '../../search';\nimport { SearchProps } from '../../search/search';\nimport { useDataTable } from '../hooks/useDataTable';\n\nexport const TableSearch = forwardRef<HTMLInputElement, SearchProps>(\n  ({ ...props }, ref) => {\n    const { updateTableQuery, tableQuery } = useDataTable();\n\n    const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = e.target.value;\n      updateTableQuery(query => {\n        return {\n          ...query,\n          search: value\n        };\n      });\n    };\n\n    const handleClear = () => {\n      updateTableQuery(query => {\n        return {\n          ...query,\n          search: ''\n        };\n      });\n    };\n\n    return (\n      <Search\n        {...props}\n        ref={ref}\n        onChange={handleSearch}\n        value={tableQuery?.search}\n        onClear={handleClear}\n      />\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;AAOO;;AAIH;AACE;;;AAGI;AACA;;AAEJ;AACF;;;;AAKM;AACA;;AAEJ;AACF;;AAWF;;"}
+{"version":3,"file":"search.cjs","sources":["../../../../components/data-table/components/search.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef } from 'react';\nimport { Search } from '../../search';\nimport { SearchProps } from '../../search/search';\nimport { useDataTable } from '../hooks/useDataTable';\n\nexport interface DataTableSearchProps extends SearchProps {\n  /**\n   * Automatically disable search in zero state (when no data and no filters/search applied).\n   * @defaultValue true\n   */\n  autoDisableInZeroState?: boolean;\n}\n\nexport const TableSearch = forwardRef<HTMLInputElement, DataTableSearchProps>(\n  ({ autoDisableInZeroState = true, disabled, ...props }, ref) => {\n    const {\n      updateTableQuery,\n      tableQuery,\n      shouldShowFilters = false\n    } = useDataTable();\n\n    const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = e.target.value;\n      updateTableQuery(query => {\n        return {\n          ...query,\n          search: value\n        };\n      });\n    };\n\n    const handleClear = () => {\n      updateTableQuery(query => {\n        return {\n          ...query,\n          search: ''\n        };\n      });\n    };\n\n    // Auto-disable in zero state if enabled, but allow manual override\n    // Once search is applied, keep it enabled (even if shouldShowFilters is false)\n    const hasSearch = Boolean(\n      tableQuery?.search && tableQuery.search.trim() !== ''\n    );\n    const isDisabled =\n      disabled ?? (autoDisableInZeroState && !shouldShowFilters && !hasSearch);\n\n    return (\n      <Search\n        {...props}\n        ref={ref}\n        onChange={handleSearch}\n        value={tableQuery?.search}\n        onClear={handleClear}\n        disabled={isDisabled}\n      />\n    );\n  }\n);\n\nTableSearch.displayName = 'TableSearch';\n"],"names":[],"mappings":";;;;;;;;;AAiBI;AAMA;AACE;;;AAGI;AACA;;AAEJ;AACF;;;;AAKM;AACA;;AAEJ;AACF;;;AAIA;AAGA;AAGA;AAUF;AAGF;;"}

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

@@ -1,3 +1,10 @@
 import { SearchProps } from '../../search/search';
-export declare const TableSearch: import("react").ForwardRefExoticComponent<SearchProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface DataTableSearchProps extends SearchProps {
+    /**
+     * Automatically disable search in zero state (when no data and no filters/search applied).
+     * @defaultValue true
+     */
+    autoDisableInZeroState?: boolean;
+}
+export declare const TableSearch: import("react").ForwardRefExoticComponent<DataTableSearchProps & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=search.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/search.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGlD,eAAO,MAAM,WAAW,0GAiCvB,CAAC"}
+{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/search.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGlD,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,eAAO,MAAM,WAAW,mHA8CvB,CAAC"}

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

@@ -4,8 +4,8 @@ import { forwardRef } from 'react';
 import { Search } from '../../search/search.js';
 import { useDataTable } from '../hooks/useDataTable.js';
 
-const TableSearch = forwardRef(({ ...props }, ref) => {
-    const { updateTableQuery, tableQuery } = useDataTable();
+const TableSearch = forwardRef(({ autoDisableInZeroState = true, disabled, ...props }, ref) => {
+    const { updateTableQuery, tableQuery, shouldShowFilters = false } = useDataTable();
     const handleSearch = (e) => {
         const value = e.target.value;
         updateTableQuery(query => {
@@ -23,8 +23,13 @@ const TableSearch = forwardRef(({ ...props }, ref) => {
             };
         });
     };
-    return (jsx(Search, { ...props, ref: ref, onChange: handleSearch, value: tableQuery?.search, onClear: handleClear }));
+    // Auto-disable in zero state if enabled, but allow manual override
+    // Once search is applied, keep it enabled (even if shouldShowFilters is false)
+    const hasSearch = Boolean(tableQuery?.search && tableQuery.search.trim() !== '');
+    const isDisabled = disabled ?? (autoDisableInZeroState && !shouldShowFilters && !hasSearch);
+    return (jsx(Search, { ...props, ref: ref, onChange: handleSearch, value: tableQuery?.search, onClear: handleClear, disabled: isDisabled }));
 });
+TableSearch.displayName = 'TableSearch';
 
 export { TableSearch };
 //# sourceMappingURL=search.js.map