@raystack/apsara 0.50.0 → 0.50.1

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":"AA2DA,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,6CA8DpC"}
+{"version":3,"file":"filters.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/filters.tsx"],"names":[],"mappings":"AA6DA,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,6CA8DpC"}

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { ReactComponent as SvgFilter } from '../../../icons/assets/filter.svg.js';
 import { FilterType } from '../../../types/filters.js';

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

@@ -1 +1 @@
-{"version":3,"file":"filters.js","sources":["../../../../components/data-table/components/filters.tsx"],"sourcesContent":["import { 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\ninterface AddFilterProps<TData, TValue> {\n  columnList: DataTableColumn<TData, TValue>[];\n  appliedFiltersSet: Set<string>;\n  onAddFilter: (column: DataTableColumn<TData, TValue>) => void;\n}\n\nfunction AddFilter<TData, TValue>({\n  columnList = [],\n  appliedFiltersSet,\n  onAddFilter\n}: AddFilterProps<TData, TValue>) {\n  const availableFilters = columnList?.filter(\n    col => !appliedFiltersSet.has(col.id)\n  );\n\n  return availableFilters.length > 0 ? (\n    <DropdownMenu>\n      <DropdownMenu.Trigger asChild>\n        {appliedFiltersSet.size > 0 ? (\n          <IconButton size={4}>\n            <FilterIcon />\n          </IconButton>\n        ) : (\n          <Button\n            variant='text'\n            size='small'\n            leadingIcon={<FilterIcon />}\n            color='neutral'\n          >\n            Filter\n          </Button>\n        )}\n      </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  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}>\n      <Flex gap={3}>\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          />\n        ))}\n      </Flex>\n      <AddFilter\n        columnList={columnList}\n        appliedFiltersSet={appliedFiltersSet}\n        onAddFilter={onAddFilter}\n      />\n    </Flex>\n  );\n}\n"],"names":["_jsxs","_jsx","FilterIcon"],"mappings":";;;;;;;;;;;AAiBA,SAAS,SAAS,CAAgB,EAChC,UAAU,GAAG,EAAE,EACf,iBAAiB,EACjB,WAAW,EACmB,EAAA;IAC9B,MAAM,gBAAgB,GAAG,UAAU,EAAE,MAAM,CACzC,GAAG,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACtC,CAAC;AAEF,IAAA,OAAO,gBAAgB,CAAC,MAAM,GAAG,CAAC,IAChCA,IAAA,CAAC,YAAY,EACX,EAAA,QAAA,EAAA,CAAAC,GAAA,CAAC,YAAY,CAAC,OAAO,EAAC,EAAA,OAAO,EAC1B,IAAA,EAAA,QAAA,EAAA,iBAAiB,CAAC,IAAI,GAAG,CAAC,IACzBA,GAAC,CAAA,UAAU,IAAC,IAAI,EAAE,CAAC,EACjB,QAAA,EAAAA,GAAA,CAACC,SAAU,EAAG,EAAA,CAAA,EAAA,CACH,KAEbD,GAAC,CAAA,MAAM,IACL,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,OAAO,EACZ,WAAW,EAAEA,IAACC,SAAU,EAAA,EAAA,CAAG,EAC3B,KAAK,EAAC,SAAS,EAAA,QAAA,EAAA,QAAA,EAAA,CAGR,CACV,EAAA,CACoB,EACvBD,GAAC,CAAA,YAAY,CAAC,OAAO,cAClB,gBAAgB,EAAE,GAAG,CAAC,MAAM,IAAG;AAC9B,oBAAA,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;oBACnC,MAAM,EAAE,GAAG,SAAS,CAAC,WAAW,IAAI,MAAM,CAAC,EAAE,CAAC;oBAC9C,QACEA,GAAC,CAAA,YAAY,CAAC,IAAI,IAAU,OAAO,EAAE,MAAM,WAAW,CAAC,MAAM,CAAC,EAC3D,QAAA,EAAA,SAAS,CAAC,MAAM,IAAI,EAAE,EADD,EAAA,EAAE,CAEN,EACpB;iBACH,CAAC,GACmB,CACV,EAAA,CAAA,IACb,IAAI,CAAC;AACX,CAAC;SAEe,OAAO,GAAA;IACrB,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,YAAY,EAAE,CAAC;AAC7C,IAAA,MAAM,OAAO,GAAG,KAAK,EAAE,aAAa,EAAsC,CAAC;AAE3E,IAAA,MAAM,EACJ,WAAW,EACX,kBAAkB,EAClB,uBAAuB,EACvB,2BAA2B,EAC5B,GAAG,UAAU,EAAiB,CAAC;AAEhC,IAAA,MAAM,UAAU,GAAG,OAAO,EAAE,MAAM,CAChC,MAAM,IAAI,MAAM,CAAC,SAAS,CAAC,kBAAkB,CAC9C,CAAC;IAEF,MAAM,iBAAiB,GAAG,IAAI,GAAG,CAC/B,UAAU,EAAE,OAAO,EAAE,GAAG,CAAC,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC,CAChD,CAAC;IAEF,MAAM,cAAc,GAClB,UAAU,EAAE,OAAO,EAAE,GAAG,CAAC,MAAM,IAAG;QAChC,MAAM,SAAS,GAAG,OAAO,EAAE,IAAI,CAAC,GAAG,IAAG;AACpC,YAAA,MAAM,SAAS,GAAG,GAAG,CAAC,SAAS,CAAC;YAChC,MAAM,EAAE,GAAG,SAAS,CAAC,WAAW,IAAI,GAAG,CAAC,EAAE,CAAC;AAC3C,YAAA,OAAO,EAAE,KAAK,MAAM,CAAC,IAAI,CAAC;SAC3B,CAAC,EAAE,SAAS,CAAC;QACd,OAAO;AACL,YAAA,UAAU,EAAE,SAAS,EAAE,UAAU,IAAI,UAAU,CAAC,MAAM;AACtD,YAAA,KAAK,EAAG,SAAS,EAAE,MAAiB,IAAI,EAAE;AAC1C,YAAA,OAAO,EAAE,SAAS,EAAE,aAAa,IAAI,EAAE;AACvC,YAAA,GAAG,MAAM;SACV,CAAC;KACH,CAAC,IAAI,EAAE,CAAC;IAEX,QACED,IAAC,CAAA,IAAI,EAAC,EAAA,GAAG,EAAE,CAAC,EACV,QAAA,EAAA,CAAAC,GAAA,CAAC,IAAI,EAAA,EAAC,GAAG,EAAE,CAAC,EACT,QAAA,EAAA,cAAc,CAAC,GAAG,CAAC,MAAM,KACxBA,GAAC,CAAA,UAAU,EAET,EAAA,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,kBAAkB,CAAC,MAAM,CAAC,IAAI,CAAC,EAC/C,aAAa,EAAE,KAAK,IAAI,uBAAuB,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,EACnE,iBAAiB,EAAE,QAAQ,IACzB,2BAA2B,CACzB,MAAM,CAAC,IAAI,EACX,QAA+B,CAChC,EAEH,UAAU,EAAE,MAAM,CAAC,UAAU,EAC7B,OAAO,EAAE,MAAM,CAAC,OAAO,EAZlB,EAAA,MAAM,CAAC,IAAI,CAahB,CACH,CAAC,EAAA,CACG,EACPA,GAAA,CAAC,SAAS,EAAA,EACR,UAAU,EAAE,UAAU,EACtB,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,WAAW,EAAA,CACxB,CACG,EAAA,CAAA,EACP;AACJ;;;;"}
+{"version":3,"file":"filters.js","sources":["../../../../components/data-table/components/filters.tsx"],"sourcesContent":["'use client';\n\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\ninterface AddFilterProps<TData, TValue> {\n  columnList: DataTableColumn<TData, TValue>[];\n  appliedFiltersSet: Set<string>;\n  onAddFilter: (column: DataTableColumn<TData, TValue>) => void;\n}\n\nfunction AddFilter<TData, TValue>({\n  columnList = [],\n  appliedFiltersSet,\n  onAddFilter\n}: AddFilterProps<TData, TValue>) {\n  const availableFilters = columnList?.filter(\n    col => !appliedFiltersSet.has(col.id)\n  );\n\n  return availableFilters.length > 0 ? (\n    <DropdownMenu>\n      <DropdownMenu.Trigger asChild>\n        {appliedFiltersSet.size > 0 ? (\n          <IconButton size={4}>\n            <FilterIcon />\n          </IconButton>\n        ) : (\n          <Button\n            variant='text'\n            size='small'\n            leadingIcon={<FilterIcon />}\n            color='neutral'\n          >\n            Filter\n          </Button>\n        )}\n      </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  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}>\n      <Flex gap={3}>\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          />\n        ))}\n      </Flex>\n      <AddFilter\n        columnList={columnList}\n        appliedFiltersSet={appliedFiltersSet}\n        onAddFilter={onAddFilter}\n      />\n    </Flex>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAmBA;;AASE;AAoBQ;;;;AAWV;;;AAIE;AAEA;AAOA;;;;AAWM;;AAEA;;;AAGA;AACA;AACA;AACA;;;;AAgCR;;"}

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

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
@@ -7,14 +8,14 @@ var text = require('../../text/text.cjs');
 var dataTable_module = require('../data-table.module.css.cjs');
 var dataTable_types = require('../data-table.types.cjs');
 
-function Grouping({ columns = [], onChange, onRemove, value, }) {
+function Grouping({ columns = [], onChange, onRemove, value }) {
     const columnList = columns
-        .filter((column) => column.columnDef.enableGrouping)
-        ?.map((column) => {
+        .filter(column => column.columnDef.enableGrouping)
+        ?.map(column => {
         const id = column.id;
         return {
             label: column.columnDef.header || id,
-            id: id,
+            id: id
         };
     });
     const handleGroupChange = (columnId) => {
@@ -22,12 +23,12 @@ function Grouping({ columns = [], onChange, onRemove, value, }) {
             onRemove();
             return;
         }
-        const column = columns.find((col) => col.id === columnId);
+        const column = columns.find(col => col.id === columnId);
         if (column) {
             onChange(column.id);
         }
     };
-    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: "Grouping" }), jsxRuntime.jsx(flex.Flex, { className: dataTable_module.default["flex-1"], children: jsxRuntime.jsxs(select.Select, { onValueChange: handleGroupChange, value: value, children: [jsxRuntime.jsx(select.Select.Trigger, { size: "small", className: dataTable_module.default["display-popover-properties-select"], children: jsxRuntime.jsx(select.Select.Value, { placeholder: "Select value" }) }), jsxRuntime.jsxs(select.Select.Content, { "data-variant": "filter", children: [jsxRuntime.jsx(select.Select.Item, { value: dataTable_types.defaultGroupOption.id, children: dataTable_types.defaultGroupOption.label }), columnList.map((column) => (jsxRuntime.jsx(select.Select.Item, { value: column.id, children: column.label }, column.id)))] })] }) })] }));
+    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: "Grouping" }), jsxRuntime.jsx(flex.Flex, { className: dataTable_module.default['flex-1'], children: jsxRuntime.jsxs(select.Select, { onValueChange: handleGroupChange, value: value, children: [jsxRuntime.jsx(select.Select.Trigger, { size: 'small', className: dataTable_module.default['display-popover-properties-select'], children: jsxRuntime.jsx(select.Select.Value, { placeholder: 'Select value' }) }), jsxRuntime.jsxs(select.Select.Content, { "data-variant": 'filter', children: [jsxRuntime.jsx(select.Select.Item, { value: dataTable_types.defaultGroupOption.id, children: dataTable_types.defaultGroupOption.label }), columnList.map(column => (jsxRuntime.jsx(select.Select.Item, { value: column.id, children: column.label }, column.id)))] })] }) })] }));
 }
 
 exports.Grouping = Grouping;

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

@@ -1 +1 @@
-{"version":3,"file":"grouping.cjs","sources":["../../../../components/data-table/components/grouping.tsx"],"sourcesContent":["import { Flex } from \"../../flex\";\nimport { Select } from \"../../select\";\nimport { Text } from \"../../text\";\nimport styles from \"../data-table.module.css\";\nimport {\n  DataTableColumn,\n  SortOrders,\n  SortOrdersValues,\n  defaultGroupOption,\n} from \"../data-table.types\";\n\ninterface GroupingProps<TData, TValue> {\n  columns: DataTableColumn<TData, TValue>[];\n  onChange: (columnId: string) => void;\n  onRemove: () => void;\n  value: string;\n}\n\nexport function Grouping<TData, TValue>({\n  columns = [],\n  onChange,\n  onRemove,\n  value,\n}: GroupingProps<TData, TValue>) {\n  const columnList = columns\n    .filter((column) => column.columnDef.enableGrouping)\n    ?.map((column) => {\n      const id = column.id;\n      return {\n        label: column.columnDef.header || id,\n        id: id,\n      };\n    });\n\n  const handleGroupChange = (columnId: string) => {\n    if (columnId === defaultGroupOption.id) {\n      onRemove();\n      return;\n    }\n    const column = columns.find((col) => col.id === columnId);\n    if (column) {\n      onChange(column.id);\n    }\n  };\n\n  return (\n    <Flex justify=\"between\" align=\"center\">\n      <Text size={2} weight={500} className={styles[\"flex-1\"]}>\n        Grouping\n      </Text>\n      <Flex className={styles[\"flex-1\"]}>\n        <Select onValueChange={handleGroupChange} value={value}>\n          <Select.Trigger\n            size={\"small\"}\n            className={styles[\"display-popover-properties-select\"]}\n          >\n            <Select.Value placeholder=\"Select value\" />\n          </Select.Trigger>\n          <Select.Content data-variant=\"filter\">\n            <Select.Item value={defaultGroupOption.id}>\n              {defaultGroupOption.label}\n            </Select.Item>\n            {columnList.map((column) => (\n              <Select.Item key={column.id} value={column.id}>\n                {column.label}\n              </Select.Item>\n            ))}\n          </Select.Content>\n        </Select>\n      </Flex>\n    </Flex>\n  );\n}\n"],"names":["defaultGroupOption","_jsxs","Flex","_jsx","Text","styles","Select"],"mappings":";;;;;;;;;AAkBgB,SAAA,QAAQ,CAAgB,EACtC,OAAO,GAAG,EAAE,EACZ,QAAQ,EACR,QAAQ,EACR,KAAK,GACwB,EAAA;IAC7B,MAAM,UAAU,GAAG,OAAO;SACvB,MAAM,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC;AACpD,UAAE,GAAG,CAAC,CAAC,MAAM,KAAI;AACf,QAAA,MAAM,EAAE,GAAG,MAAM,CAAC,EAAE,CAAC;QACrB,OAAO;AACL,YAAA,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC,MAAM,IAAI,EAAE;AACpC,YAAA,EAAE,EAAE,EAAE;SACP,CAAC;AACJ,KAAC,CAAC,CAAC;AAEL,IAAA,MAAM,iBAAiB,GAAG,CAAC,QAAgB,KAAI;AAC7C,QAAA,IAAI,QAAQ,KAAKA,kCAAkB,CAAC,EAAE,EAAE;AACtC,YAAA,QAAQ,EAAE,CAAC;YACX,OAAO;SACR;AACD,QAAA,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,KAAK,QAAQ,CAAC,CAAC;QAC1D,IAAI,MAAM,EAAE;AACV,YAAA,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;SACrB;AACH,KAAC,CAAC;AAEF,IAAA,QACEC,eAAA,CAACC,SAAI,EAAA,EAAC,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EAAA,QAAA,EAAA,CACpCC,eAACC,SAAI,EAAA,EAAC,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAEC,wBAAM,CAAC,QAAQ,CAAC,EAAA,QAAA,EAAA,UAAA,EAAA,CAEhD,EACPF,cAAC,CAAAD,SAAI,EAAC,EAAA,SAAS,EAAEG,wBAAM,CAAC,QAAQ,CAAC,EAC/B,QAAA,EAAAJ,eAAA,CAACK,aAAM,EAAA,EAAC,aAAa,EAAE,iBAAiB,EAAE,KAAK,EAAE,KAAK,EACpD,QAAA,EAAA,CAAAH,cAAA,CAACG,aAAM,CAAC,OAAO,EAAA,EACb,IAAI,EAAE,OAAO,EACb,SAAS,EAAED,wBAAM,CAAC,mCAAmC,CAAC,EAEtD,QAAA,EAAAF,cAAA,CAACG,aAAM,CAAC,KAAK,EAAA,EAAC,WAAW,EAAC,cAAc,EAAA,CAAG,EAC5B,CAAA,EACjBL,eAAC,CAAAK,aAAM,CAAC,OAAO,oBAAc,QAAQ,EAAA,QAAA,EAAA,CACnCH,cAAC,CAAAG,aAAM,CAAC,IAAI,EAAC,EAAA,KAAK,EAAEN,kCAAkB,CAAC,EAAE,EAAA,QAAA,EACtCA,kCAAkB,CAAC,KAAK,EAAA,CACb,EACb,UAAU,CAAC,GAAG,CAAC,CAAC,MAAM,MACrBG,cAAA,CAACG,aAAM,CAAC,IAAI,EAAA,EAAiB,KAAK,EAAE,MAAM,CAAC,EAAE,EAC1C,QAAA,EAAA,MAAM,CAAC,KAAK,EADG,EAAA,MAAM,CAAC,EAAE,CAEb,CACf,CAAC,CACa,EAAA,CAAA,CAAA,EAAA,CACV,EACJ,CAAA,CAAA,EAAA,CACF,EACP;AACJ;;;;"}
+{"version":3,"file":"grouping.cjs","sources":["../../../../components/data-table/components/grouping.tsx"],"sourcesContent":["'use client';\n\nimport { Flex } from '../../flex';\nimport { Select } from '../../select';\nimport { Text } from '../../text';\nimport styles from '../data-table.module.css';\nimport { DataTableColumn, defaultGroupOption } from '../data-table.types';\n\ninterface GroupingProps<TData, TValue> {\n  columns: DataTableColumn<TData, TValue>[];\n  onChange: (columnId: string) => void;\n  onRemove: () => void;\n  value: string;\n}\n\nexport function Grouping<TData, TValue>({\n  columns = [],\n  onChange,\n  onRemove,\n  value\n}: GroupingProps<TData, TValue>) {\n  const columnList = columns\n    .filter(column => column.columnDef.enableGrouping)\n    ?.map(column => {\n      const id = column.id;\n      return {\n        label: column.columnDef.header || id,\n        id: id\n      };\n    });\n\n  const handleGroupChange = (columnId: string) => {\n    if (columnId === defaultGroupOption.id) {\n      onRemove();\n      return;\n    }\n    const column = columns.find(col => col.id === columnId);\n    if (column) {\n      onChange(column.id);\n    }\n  };\n\n  return (\n    <Flex justify='between' align='center'>\n      <Text size={2} weight={500} className={styles['flex-1']}>\n        Grouping\n      </Text>\n      <Flex className={styles['flex-1']}>\n        <Select onValueChange={handleGroupChange} value={value}>\n          <Select.Trigger\n            size='small'\n            className={styles['display-popover-properties-select']}\n          >\n            <Select.Value placeholder='Select value' />\n          </Select.Trigger>\n          <Select.Content data-variant='filter'>\n            <Select.Item value={defaultGroupOption.id}>\n              {defaultGroupOption.label}\n            </Select.Item>\n            {columnList.map(column => (\n              <Select.Item key={column.id} value={column.id}>\n                {column.label}\n              </Select.Item>\n            ))}\n          </Select.Content>\n        </Select>\n      </Flex>\n    </Flex>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAegB;;;AAQZ;AACE;;AAEE;AACA;;AAEJ;AAEF;AACE;AACE;;;AAGF;;AAEE;;AAEJ;AAEA;AA2BF;;"}

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

@@ -1,10 +1,10 @@
-import { DataTableColumn } from "../data-table.types";
+import { DataTableColumn } from '../data-table.types';
 interface GroupingProps<TData, TValue> {
     columns: DataTableColumn<TData, TValue>[];
     onChange: (columnId: string) => void;
     onRemove: () => void;
     value: string;
 }
-export declare function Grouping<TData, TValue>({ columns, onChange, onRemove, value, }: GroupingProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export declare function Grouping<TData, TValue>({ columns, onChange, onRemove, value }: GroupingProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=grouping.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"grouping.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/grouping.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,eAAe,EAIhB,MAAM,qBAAqB,CAAC;AAE7B,UAAU,aAAa,CAAC,KAAK,EAAE,MAAM;IACnC,OAAO,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,CAAC;IAC1C,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,EACtC,OAAY,EACZ,QAAQ,EACR,QAAQ,EACR,KAAK,GACN,EAAE,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,2CAiD9B"}
+{"version":3,"file":"grouping.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/grouping.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,eAAe,EAAsB,MAAM,qBAAqB,CAAC;AAE1E,UAAU,aAAa,CAAC,KAAK,EAAE,MAAM;IACnC,OAAO,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,CAAC;IAC1C,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,EACtC,OAAY,EACZ,QAAQ,EACR,QAAQ,EACR,KAAK,EACN,EAAE,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,2CAiD9B"}

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Flex } from '../../flex/flex.js';
 import { Select } from '../../select/select.js';
@@ -5,14 +6,14 @@ import { Text } from '../../text/text.js';
 import styles from '../data-table.module.css.js';
 import { defaultGroupOption } from '../data-table.types.js';
 
-function Grouping({ columns = [], onChange, onRemove, value, }) {
+function Grouping({ columns = [], onChange, onRemove, value }) {
     const columnList = columns
-        .filter((column) => column.columnDef.enableGrouping)
-        ?.map((column) => {
+        .filter(column => column.columnDef.enableGrouping)
+        ?.map(column => {
         const id = column.id;
         return {
             label: column.columnDef.header || id,
-            id: id,
+            id: id
         };
     });
     const handleGroupChange = (columnId) => {
@@ -20,12 +21,12 @@ function Grouping({ columns = [], onChange, onRemove, value, }) {
             onRemove();
             return;
         }
-        const column = columns.find((col) => col.id === columnId);
+        const column = columns.find(col => col.id === columnId);
         if (column) {
             onChange(column.id);
         }
     };
-    return (jsxs(Flex, { justify: "between", align: "center", children: [jsx(Text, { size: 2, weight: 500, className: styles["flex-1"], children: "Grouping" }), jsx(Flex, { className: styles["flex-1"], children: jsxs(Select, { onValueChange: handleGroupChange, value: value, children: [jsx(Select.Trigger, { size: "small", className: styles["display-popover-properties-select"], children: jsx(Select.Value, { placeholder: "Select value" }) }), jsxs(Select.Content, { "data-variant": "filter", children: [jsx(Select.Item, { value: defaultGroupOption.id, children: defaultGroupOption.label }), columnList.map((column) => (jsx(Select.Item, { value: column.id, children: column.label }, column.id)))] })] }) })] }));
+    return (jsxs(Flex, { justify: 'between', align: 'center', children: [jsx(Text, { size: 2, weight: 500, className: styles['flex-1'], children: "Grouping" }), jsx(Flex, { className: styles['flex-1'], children: jsxs(Select, { onValueChange: handleGroupChange, value: value, children: [jsx(Select.Trigger, { size: 'small', className: styles['display-popover-properties-select'], children: jsx(Select.Value, { placeholder: 'Select value' }) }), jsxs(Select.Content, { "data-variant": 'filter', children: [jsx(Select.Item, { value: defaultGroupOption.id, children: defaultGroupOption.label }), columnList.map(column => (jsx(Select.Item, { value: column.id, children: column.label }, column.id)))] })] }) })] }));
 }
 
 export { Grouping };

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

@@ -1 +1 @@
-{"version":3,"file":"grouping.js","sources":["../../../../components/data-table/components/grouping.tsx"],"sourcesContent":["import { Flex } from \"../../flex\";\nimport { Select } from \"../../select\";\nimport { Text } from \"../../text\";\nimport styles from \"../data-table.module.css\";\nimport {\n  DataTableColumn,\n  SortOrders,\n  SortOrdersValues,\n  defaultGroupOption,\n} from \"../data-table.types\";\n\ninterface GroupingProps<TData, TValue> {\n  columns: DataTableColumn<TData, TValue>[];\n  onChange: (columnId: string) => void;\n  onRemove: () => void;\n  value: string;\n}\n\nexport function Grouping<TData, TValue>({\n  columns = [],\n  onChange,\n  onRemove,\n  value,\n}: GroupingProps<TData, TValue>) {\n  const columnList = columns\n    .filter((column) => column.columnDef.enableGrouping)\n    ?.map((column) => {\n      const id = column.id;\n      return {\n        label: column.columnDef.header || id,\n        id: id,\n      };\n    });\n\n  const handleGroupChange = (columnId: string) => {\n    if (columnId === defaultGroupOption.id) {\n      onRemove();\n      return;\n    }\n    const column = columns.find((col) => col.id === columnId);\n    if (column) {\n      onChange(column.id);\n    }\n  };\n\n  return (\n    <Flex justify=\"between\" align=\"center\">\n      <Text size={2} weight={500} className={styles[\"flex-1\"]}>\n        Grouping\n      </Text>\n      <Flex className={styles[\"flex-1\"]}>\n        <Select onValueChange={handleGroupChange} value={value}>\n          <Select.Trigger\n            size={\"small\"}\n            className={styles[\"display-popover-properties-select\"]}\n          >\n            <Select.Value placeholder=\"Select value\" />\n          </Select.Trigger>\n          <Select.Content data-variant=\"filter\">\n            <Select.Item value={defaultGroupOption.id}>\n              {defaultGroupOption.label}\n            </Select.Item>\n            {columnList.map((column) => (\n              <Select.Item key={column.id} value={column.id}>\n                {column.label}\n              </Select.Item>\n            ))}\n          </Select.Content>\n        </Select>\n      </Flex>\n    </Flex>\n  );\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAkBgB,SAAA,QAAQ,CAAgB,EACtC,OAAO,GAAG,EAAE,EACZ,QAAQ,EACR,QAAQ,EACR,KAAK,GACwB,EAAA;IAC7B,MAAM,UAAU,GAAG,OAAO;SACvB,MAAM,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC;AACpD,UAAE,GAAG,CAAC,CAAC,MAAM,KAAI;AACf,QAAA,MAAM,EAAE,GAAG,MAAM,CAAC,EAAE,CAAC;QACrB,OAAO;AACL,YAAA,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC,MAAM,IAAI,EAAE;AACpC,YAAA,EAAE,EAAE,EAAE;SACP,CAAC;AACJ,KAAC,CAAC,CAAC;AAEL,IAAA,MAAM,iBAAiB,GAAG,CAAC,QAAgB,KAAI;AAC7C,QAAA,IAAI,QAAQ,KAAK,kBAAkB,CAAC,EAAE,EAAE;AACtC,YAAA,QAAQ,EAAE,CAAC;YACX,OAAO;SACR;AACD,QAAA,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,KAAK,QAAQ,CAAC,CAAC;QAC1D,IAAI,MAAM,EAAE;AACV,YAAA,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;SACrB;AACH,KAAC,CAAC;AAEF,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EAAA,QAAA,EAAA,CACpCC,IAAC,IAAI,EAAA,EAAC,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,EAAA,QAAA,EAAA,UAAA,EAAA,CAEhD,EACPA,GAAC,CAAA,IAAI,EAAC,EAAA,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,EAC/B,QAAA,EAAAD,IAAA,CAAC,MAAM,EAAA,EAAC,aAAa,EAAE,iBAAiB,EAAE,KAAK,EAAE,KAAK,EACpD,QAAA,EAAA,CAAAC,GAAA,CAAC,MAAM,CAAC,OAAO,EAAA,EACb,IAAI,EAAE,OAAO,EACb,SAAS,EAAE,MAAM,CAAC,mCAAmC,CAAC,EAEtD,QAAA,EAAAA,GAAA,CAAC,MAAM,CAAC,KAAK,EAAA,EAAC,WAAW,EAAC,cAAc,EAAA,CAAG,EAC5B,CAAA,EACjBD,IAAC,CAAA,MAAM,CAAC,OAAO,oBAAc,QAAQ,EAAA,QAAA,EAAA,CACnCC,GAAC,CAAA,MAAM,CAAC,IAAI,EAAC,EAAA,KAAK,EAAE,kBAAkB,CAAC,EAAE,EAAA,QAAA,EACtC,kBAAkB,CAAC,KAAK,EAAA,CACb,EACb,UAAU,CAAC,GAAG,CAAC,CAAC,MAAM,MACrBA,GAAA,CAAC,MAAM,CAAC,IAAI,EAAA,EAAiB,KAAK,EAAE,MAAM,CAAC,EAAE,EAC1C,QAAA,EAAA,MAAM,CAAC,KAAK,EADG,EAAA,MAAM,CAAC,EAAE,CAEb,CACf,CAAC,CACa,EAAA,CAAA,CAAA,EAAA,CACV,EACJ,CAAA,CAAA,EAAA,CACF,EACP;AACJ;;;;"}
+{"version":3,"file":"grouping.js","sources":["../../../../components/data-table/components/grouping.tsx"],"sourcesContent":["'use client';\n\nimport { Flex } from '../../flex';\nimport { Select } from '../../select';\nimport { Text } from '../../text';\nimport styles from '../data-table.module.css';\nimport { DataTableColumn, defaultGroupOption } from '../data-table.types';\n\ninterface GroupingProps<TData, TValue> {\n  columns: DataTableColumn<TData, TValue>[];\n  onChange: (columnId: string) => void;\n  onRemove: () => void;\n  value: string;\n}\n\nexport function Grouping<TData, TValue>({\n  columns = [],\n  onChange,\n  onRemove,\n  value\n}: GroupingProps<TData, TValue>) {\n  const columnList = columns\n    .filter(column => column.columnDef.enableGrouping)\n    ?.map(column => {\n      const id = column.id;\n      return {\n        label: column.columnDef.header || id,\n        id: id\n      };\n    });\n\n  const handleGroupChange = (columnId: string) => {\n    if (columnId === defaultGroupOption.id) {\n      onRemove();\n      return;\n    }\n    const column = columns.find(col => col.id === columnId);\n    if (column) {\n      onChange(column.id);\n    }\n  };\n\n  return (\n    <Flex justify='between' align='center'>\n      <Text size={2} weight={500} className={styles['flex-1']}>\n        Grouping\n      </Text>\n      <Flex className={styles['flex-1']}>\n        <Select onValueChange={handleGroupChange} value={value}>\n          <Select.Trigger\n            size='small'\n            className={styles['display-popover-properties-select']}\n          >\n            <Select.Value placeholder='Select value' />\n          </Select.Trigger>\n          <Select.Content data-variant='filter'>\n            <Select.Item value={defaultGroupOption.id}>\n              {defaultGroupOption.label}\n            </Select.Item>\n            {columnList.map(column => (\n              <Select.Item key={column.id} value={column.id}>\n                {column.label}\n              </Select.Item>\n            ))}\n          </Select.Content>\n        </Select>\n      </Flex>\n    </Flex>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAegB;;;AAQZ;AACE;;AAEE;AACA;;AAEJ;AAEF;AACE;AACE;;;AAGF;;AAEE;;AAEJ;AAEA;AA2BF;;"}

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

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

@@ -1 +1 @@
-{"version":3,"file":"ordering.cjs","sources":["../../../../components/data-table/components/ordering.tsx"],"sourcesContent":["import { TextAlignBottomIcon,TextAlignTopIcon } from \"@radix-ui/react-icons\";\n\nimport { Flex } from \"../../flex\";\nimport { IconButton } from \"../../icon-button\";\nimport { Select } from \"../../select\";\nimport { Text } from \"../../text\";\nimport styles from \"../data-table.module.css\";\nimport {\n  ColumnData,\n  DataTableSort,\n  SortOrders,\n  SortOrdersValues,\n} from \"../data-table.types\";\n\nexport interface OrderingProps {\n  columnList: ColumnData[];\n  onChange: (columnId: string, order: SortOrdersValues) => void;\n  value: DataTableSort;\n}\n\nexport function Ordering({ columnList, onChange, value }: OrderingProps) {\n  function handleColumnChange(columnId: string) {\n    onChange(columnId, value.order);\n  }\n\n  function handleOrderChange() {\n    const newOrder =\n      value.order === SortOrders.ASC ? SortOrders.DESC : SortOrders.ASC;\n    onChange(value.name, newOrder);\n  }\n\n  return (\n    <Flex justify=\"between\" align=\"center\">\n      <Text size={2} weight={500} className={styles[\"flex-1\"]}>\n        Ordering\n      </Text>\n      <Flex gap={\"extra-small\"} className={styles[\"flex-1\"]}>\n        <Select\n          onValueChange={handleColumnChange}\n          value={value.name}\n          disabled={columnList.length === 0}\n        >\n          <Select.Trigger\n            size={\"small\"}\n            className={styles[\"display-popover-properties-select\"]}\n            with-icon-button=\"true\"\n          >\n            <Select.Value placeholder=\"Select value\" />\n          </Select.Trigger>\n          <Select.Content data-variant=\"filter\">\n            {columnList.map((column) => (\n              <Select.Item key={column.id} value={column.id}>\n                {column.label}\n              </Select.Item>\n            ))}\n          </Select.Content>\n        </Select>\n        <IconButton\n          onClick={handleOrderChange}\n          size={4}\n          disabled={columnList.length === 0}\n        >\n          {value.order === SortOrders?.ASC ? (\n            <TextAlignBottomIcon\n              className={styles[\"display-popover-sort-icon\"]}\n            />\n          ) : (\n            <TextAlignTopIcon className={styles[\"display-popover-sort-icon\"]} />\n          )}\n        </IconButton>\n      </Flex>\n    </Flex>\n  );\n}\n"],"names":["SortOrders","_jsxs","Flex","_jsx","Text","styles","Select","IconButton","TextAlignBottomIcon","TextAlignTopIcon"],"mappings":";;;;;;;;;;;AAoBM,SAAU,QAAQ,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAiB,EAAA;IACrE,SAAS,kBAAkB,CAAC,QAAgB,EAAA;AAC1C,QAAA,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;KACjC;AAED,IAAA,SAAS,iBAAiB,GAAA;QACxB,MAAM,QAAQ,GACZ,KAAK,CAAC,KAAK,KAAKA,0BAAU,CAAC,GAAG,GAAGA,0BAAU,CAAC,IAAI,GAAGA,0BAAU,CAAC,GAAG,CAAC;AACpE,QAAA,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;KAChC;IAED,QACEC,gBAACC,SAAI,EAAA,EAAC,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EACpC,QAAA,EAAA,CAAAC,cAAA,CAACC,SAAI,EAAC,EAAA,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAEC,wBAAM,CAAC,QAAQ,CAAC,yBAEhD,EACPJ,eAAA,CAACC,SAAI,EAAC,EAAA,GAAG,EAAE,aAAa,EAAE,SAAS,EAAEG,wBAAM,CAAC,QAAQ,CAAC,EACnD,QAAA,EAAA,CAAAJ,eAAA,CAACK,aAAM,EAAA,EACL,aAAa,EAAE,kBAAkB,EACjC,KAAK,EAAE,KAAK,CAAC,IAAI,EACjB,QAAQ,EAAE,UAAU,CAAC,MAAM,KAAK,CAAC,EAAA,QAAA,EAAA,CAEjCH,eAACG,aAAM,CAAC,OAAO,EAAA,EACb,IAAI,EAAE,OAAO,EACb,SAAS,EAAED,wBAAM,CAAC,mCAAmC,CAAC,EAAA,kBAAA,EACrC,MAAM,EAEvB,QAAA,EAAAF,cAAA,CAACG,aAAM,CAAC,KAAK,IAAC,WAAW,EAAC,cAAc,EAAG,CAAA,EAAA,CAC5B,EACjBH,cAAA,CAACG,aAAM,CAAC,OAAO,EAAc,EAAA,cAAA,EAAA,QAAQ,YAClC,UAAU,CAAC,GAAG,CAAC,CAAC,MAAM,MACrBH,cAAA,CAACG,aAAM,CAAC,IAAI,IAAiB,KAAK,EAAE,MAAM,CAAC,EAAE,EAAA,QAAA,EAC1C,MAAM,CAAC,KAAK,IADG,MAAM,CAAC,EAAE,CAEb,CACf,CAAC,EACa,CAAA,CAAA,EAAA,CACV,EACTH,cAAC,CAAAI,qBAAU,IACT,OAAO,EAAE,iBAAiB,EAC1B,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,UAAU,CAAC,MAAM,KAAK,CAAC,YAEhC,KAAK,CAAC,KAAK,KAAKP,0BAAU,EAAE,GAAG,IAC9BG,eAACK,kCAAmB,EAAA,EAClB,SAAS,EAAEH,wBAAM,CAAC,2BAA2B,CAAC,EAAA,CAC9C,KAEFF,cAAA,CAACM,+BAAgB,EAAC,EAAA,SAAS,EAAEJ,wBAAM,CAAC,2BAA2B,CAAC,EAAA,CAAI,CACrE,EACU,CAAA,CAAA,EAAA,CACR,CACF,EAAA,CAAA,EACP;AACJ;;;;"}
+{"version":3,"file":"ordering.cjs","sources":["../../../../components/data-table/components/ordering.tsx"],"sourcesContent":["'use client';\n\nimport { TextAlignBottomIcon, TextAlignTopIcon } from '@radix-ui/react-icons';\n\nimport { Flex } from '../../flex';\nimport { IconButton } from '../../icon-button';\nimport { Select } from '../../select';\nimport { Text } from '../../text';\nimport styles from '../data-table.module.css';\nimport {\n  ColumnData,\n  DataTableSort,\n  SortOrders,\n  SortOrdersValues\n} from '../data-table.types';\n\nexport interface OrderingProps {\n  columnList: ColumnData[];\n  onChange: (columnId: string, order: SortOrdersValues) => void;\n  value: DataTableSort;\n}\n\nexport function Ordering({ columnList, onChange, value }: OrderingProps) {\n  function handleColumnChange(columnId: string) {\n    onChange(columnId, value.order);\n  }\n\n  function handleOrderChange() {\n    const newOrder =\n      value.order === SortOrders.ASC ? SortOrders.DESC : SortOrders.ASC;\n    onChange(value.name, newOrder);\n  }\n\n  return (\n    <Flex justify='between' align='center'>\n      <Text size={2} weight={500} className={styles['flex-1']}>\n        Ordering\n      </Text>\n      <Flex gap='extra-small' className={styles['flex-1']}>\n        <Select\n          onValueChange={handleColumnChange}\n          value={value.name}\n          disabled={columnList.length === 0}\n        >\n          <Select.Trigger\n            size='small'\n            className={styles['display-popover-properties-select']}\n            with-icon-button='true'\n          >\n            <Select.Value placeholder='Select value' />\n          </Select.Trigger>\n          <Select.Content data-variant='filter'>\n            {columnList.map(column => (\n              <Select.Item key={column.id} value={column.id}>\n                {column.label}\n              </Select.Item>\n            ))}\n          </Select.Content>\n        </Select>\n        <IconButton\n          onClick={handleOrderChange}\n          size={4}\n          disabled={columnList.length === 0}\n        >\n          {value.order === SortOrders?.ASC ? (\n            <TextAlignBottomIcon\n              className={styles['display-popover-sort-icon']}\n            />\n          ) : (\n            <TextAlignTopIcon className={styles['display-popover-sort-icon']} />\n          )}\n        </IconButton>\n      </Flex>\n    </Flex>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAsBM;;AAEF;;AAGF;;AAGE;;;AA6CJ;;"}

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

@@ -1,4 +1,4 @@
-import { ColumnData, DataTableSort, SortOrdersValues } from "../data-table.types";
+import { ColumnData, DataTableSort, SortOrdersValues } from '../data-table.types';
 export interface OrderingProps {
     columnList: ColumnData[];
     onChange: (columnId: string, order: SortOrdersValues) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"ordering.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/ordering.tsx"],"names":[],"mappings":"AAOA,OAAO,EACL,UAAU,EACV,aAAa,EAEb,gBAAgB,EACjB,MAAM,qBAAqB,CAAC;AAE7B,MAAM,WAAW,aAAa;IAC5B,UAAU,EAAE,UAAU,EAAE,CAAC;IACzB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC9D,KAAK,EAAE,aAAa,CAAC;CACtB;AAED,wBAAgB,QAAQ,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,aAAa,2CAqDtE"}
+{"version":3,"file":"ordering.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/ordering.tsx"],"names":[],"mappings":"AASA,OAAO,EACL,UAAU,EACV,aAAa,EAEb,gBAAgB,EACjB,MAAM,qBAAqB,CAAC;AAE7B,MAAM,WAAW,aAAa;IAC5B,UAAU,EAAE,UAAU,EAAE,CAAC;IACzB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC9D,KAAK,EAAE,aAAa,CAAC;CACtB;AAED,wBAAgB,QAAQ,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,aAAa,2CAqDtE"}

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { TextAlignBottomIcon, TextAlignTopIcon } from '../../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.1.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
 import { Flex } from '../../flex/flex.js';
@@ -15,7 +16,7 @@ function Ordering({ columnList, onChange, value }) {
         const newOrder = value.order === SortOrders.ASC ? SortOrders.DESC : SortOrders.ASC;
         onChange(value.name, newOrder);
     }
-    return (jsxs(Flex, { justify: "between", align: "center", children: [jsx(Text, { size: 2, weight: 500, className: styles["flex-1"], children: "Ordering" }), jsxs(Flex, { gap: "extra-small", className: styles["flex-1"], children: [jsxs(Select, { onValueChange: handleColumnChange, value: value.name, disabled: columnList.length === 0, children: [jsx(Select.Trigger, { size: "small", className: styles["display-popover-properties-select"], "with-icon-button": "true", children: jsx(Select.Value, { placeholder: "Select value" }) }), jsx(Select.Content, { "data-variant": "filter", children: columnList.map((column) => (jsx(Select.Item, { value: column.id, children: column.label }, column.id))) })] }), jsx(IconButton, { onClick: handleOrderChange, size: 4, disabled: columnList.length === 0, children: value.order === SortOrders?.ASC ? (jsx(TextAlignBottomIcon, { className: styles["display-popover-sort-icon"] })) : (jsx(TextAlignTopIcon, { className: styles["display-popover-sort-icon"] })) })] })] }));
+    return (jsxs(Flex, { justify: 'between', align: 'center', children: [jsx(Text, { size: 2, weight: 500, className: styles['flex-1'], children: "Ordering" }), jsxs(Flex, { gap: 'extra-small', className: styles['flex-1'], children: [jsxs(Select, { onValueChange: handleColumnChange, value: value.name, disabled: columnList.length === 0, children: [jsx(Select.Trigger, { size: 'small', className: styles['display-popover-properties-select'], "with-icon-button": 'true', children: jsx(Select.Value, { placeholder: 'Select value' }) }), jsx(Select.Content, { "data-variant": 'filter', children: columnList.map(column => (jsx(Select.Item, { value: column.id, children: column.label }, column.id))) })] }), jsx(IconButton, { onClick: handleOrderChange, size: 4, disabled: columnList.length === 0, children: value.order === SortOrders?.ASC ? (jsx(TextAlignBottomIcon, { className: styles['display-popover-sort-icon'] })) : (jsx(TextAlignTopIcon, { className: styles['display-popover-sort-icon'] })) })] })] }));
 }
 
 export { Ordering };

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

@@ -1 +1 @@
-{"version":3,"file":"ordering.js","sources":["../../../../components/data-table/components/ordering.tsx"],"sourcesContent":["import { TextAlignBottomIcon,TextAlignTopIcon } from \"@radix-ui/react-icons\";\n\nimport { Flex } from \"../../flex\";\nimport { IconButton } from \"../../icon-button\";\nimport { Select } from \"../../select\";\nimport { Text } from \"../../text\";\nimport styles from \"../data-table.module.css\";\nimport {\n  ColumnData,\n  DataTableSort,\n  SortOrders,\n  SortOrdersValues,\n} from \"../data-table.types\";\n\nexport interface OrderingProps {\n  columnList: ColumnData[];\n  onChange: (columnId: string, order: SortOrdersValues) => void;\n  value: DataTableSort;\n}\n\nexport function Ordering({ columnList, onChange, value }: OrderingProps) {\n  function handleColumnChange(columnId: string) {\n    onChange(columnId, value.order);\n  }\n\n  function handleOrderChange() {\n    const newOrder =\n      value.order === SortOrders.ASC ? SortOrders.DESC : SortOrders.ASC;\n    onChange(value.name, newOrder);\n  }\n\n  return (\n    <Flex justify=\"between\" align=\"center\">\n      <Text size={2} weight={500} className={styles[\"flex-1\"]}>\n        Ordering\n      </Text>\n      <Flex gap={\"extra-small\"} className={styles[\"flex-1\"]}>\n        <Select\n          onValueChange={handleColumnChange}\n          value={value.name}\n          disabled={columnList.length === 0}\n        >\n          <Select.Trigger\n            size={\"small\"}\n            className={styles[\"display-popover-properties-select\"]}\n            with-icon-button=\"true\"\n          >\n            <Select.Value placeholder=\"Select value\" />\n          </Select.Trigger>\n          <Select.Content data-variant=\"filter\">\n            {columnList.map((column) => (\n              <Select.Item key={column.id} value={column.id}>\n                {column.label}\n              </Select.Item>\n            ))}\n          </Select.Content>\n        </Select>\n        <IconButton\n          onClick={handleOrderChange}\n          size={4}\n          disabled={columnList.length === 0}\n        >\n          {value.order === SortOrders?.ASC ? (\n            <TextAlignBottomIcon\n              className={styles[\"display-popover-sort-icon\"]}\n            />\n          ) : (\n            <TextAlignTopIcon className={styles[\"display-popover-sort-icon\"]} />\n          )}\n        </IconButton>\n      </Flex>\n    </Flex>\n  );\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AAoBM,SAAU,QAAQ,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAiB,EAAA;IACrE,SAAS,kBAAkB,CAAC,QAAgB,EAAA;AAC1C,QAAA,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;KACjC;AAED,IAAA,SAAS,iBAAiB,GAAA;QACxB,MAAM,QAAQ,GACZ,KAAK,CAAC,KAAK,KAAK,UAAU,CAAC,GAAG,GAAG,UAAU,CAAC,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC;AACpE,QAAA,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;KAChC;IAED,QACEA,KAAC,IAAI,EAAA,EAAC,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EACpC,QAAA,EAAA,CAAAC,GAAA,CAAC,IAAI,EAAC,EAAA,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,yBAEhD,EACPD,IAAA,CAAC,IAAI,EAAC,EAAA,GAAG,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,EACnD,QAAA,EAAA,CAAAA,IAAA,CAAC,MAAM,EAAA,EACL,aAAa,EAAE,kBAAkB,EACjC,KAAK,EAAE,KAAK,CAAC,IAAI,EACjB,QAAQ,EAAE,UAAU,CAAC,MAAM,KAAK,CAAC,EAAA,QAAA,EAAA,CAEjCC,IAAC,MAAM,CAAC,OAAO,EAAA,EACb,IAAI,EAAE,OAAO,EACb,SAAS,EAAE,MAAM,CAAC,mCAAmC,CAAC,EAAA,kBAAA,EACrC,MAAM,EAEvB,QAAA,EAAAA,GAAA,CAAC,MAAM,CAAC,KAAK,IAAC,WAAW,EAAC,cAAc,EAAG,CAAA,EAAA,CAC5B,EACjBA,GAAA,CAAC,MAAM,CAAC,OAAO,EAAc,EAAA,cAAA,EAAA,QAAQ,YAClC,UAAU,CAAC,GAAG,CAAC,CAAC,MAAM,MACrBA,GAAA,CAAC,MAAM,CAAC,IAAI,IAAiB,KAAK,EAAE,MAAM,CAAC,EAAE,EAAA,QAAA,EAC1C,MAAM,CAAC,KAAK,IADG,MAAM,CAAC,EAAE,CAEb,CACf,CAAC,EACa,CAAA,CAAA,EAAA,CACV,EACTA,GAAC,CAAA,UAAU,IACT,OAAO,EAAE,iBAAiB,EAC1B,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,UAAU,CAAC,MAAM,KAAK,CAAC,YAEhC,KAAK,CAAC,KAAK,KAAK,UAAU,EAAE,GAAG,IAC9BA,IAAC,mBAAmB,EAAA,EAClB,SAAS,EAAE,MAAM,CAAC,2BAA2B,CAAC,EAAA,CAC9C,KAEFA,GAAA,CAAC,gBAAgB,EAAC,EAAA,SAAS,EAAE,MAAM,CAAC,2BAA2B,CAAC,EAAA,CAAI,CACrE,EACU,CAAA,CAAA,EAAA,CACR,CACF,EAAA,CAAA,EACP;AACJ;;;;"}
+{"version":3,"file":"ordering.js","sources":["../../../../components/data-table/components/ordering.tsx"],"sourcesContent":["'use client';\n\nimport { TextAlignBottomIcon, TextAlignTopIcon } from '@radix-ui/react-icons';\n\nimport { Flex } from '../../flex';\nimport { IconButton } from '../../icon-button';\nimport { Select } from '../../select';\nimport { Text } from '../../text';\nimport styles from '../data-table.module.css';\nimport {\n  ColumnData,\n  DataTableSort,\n  SortOrders,\n  SortOrdersValues\n} from '../data-table.types';\n\nexport interface OrderingProps {\n  columnList: ColumnData[];\n  onChange: (columnId: string, order: SortOrdersValues) => void;\n  value: DataTableSort;\n}\n\nexport function Ordering({ columnList, onChange, value }: OrderingProps) {\n  function handleColumnChange(columnId: string) {\n    onChange(columnId, value.order);\n  }\n\n  function handleOrderChange() {\n    const newOrder =\n      value.order === SortOrders.ASC ? SortOrders.DESC : SortOrders.ASC;\n    onChange(value.name, newOrder);\n  }\n\n  return (\n    <Flex justify='between' align='center'>\n      <Text size={2} weight={500} className={styles['flex-1']}>\n        Ordering\n      </Text>\n      <Flex gap='extra-small' className={styles['flex-1']}>\n        <Select\n          onValueChange={handleColumnChange}\n          value={value.name}\n          disabled={columnList.length === 0}\n        >\n          <Select.Trigger\n            size='small'\n            className={styles['display-popover-properties-select']}\n            with-icon-button='true'\n          >\n            <Select.Value placeholder='Select value' />\n          </Select.Trigger>\n          <Select.Content data-variant='filter'>\n            {columnList.map(column => (\n              <Select.Item key={column.id} value={column.id}>\n                {column.label}\n              </Select.Item>\n            ))}\n          </Select.Content>\n        </Select>\n        <IconButton\n          onClick={handleOrderChange}\n          size={4}\n          disabled={columnList.length === 0}\n        >\n          {value.order === SortOrders?.ASC ? (\n            <TextAlignBottomIcon\n              className={styles['display-popover-sort-icon']}\n            />\n          ) : (\n            <TextAlignTopIcon className={styles['display-popover-sort-icon']} />\n          )}\n        </IconButton>\n      </Flex>\n    </Flex>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAsBM;;AAEF;;AAGF;;AAGE;;;AA6CJ;;"}

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

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
@@ -9,18 +10,18 @@ const TableSearch = React.forwardRef(({ ...props }, ref) => {
     const { updateTableQuery, tableQuery } = useDataTable.useDataTable();
     const handleSearch = (e) => {
         const value = e.target.value;
-        updateTableQuery((query) => {
+        updateTableQuery(query => {
             return {
                 ...query,
-                search: value,
+                search: value
             };
         });
     };
     const handleClear = () => {
-        updateTableQuery((query) => {
+        updateTableQuery(query => {
             return {
                 ...query,
-                search: "",
+                search: ''
             };
         });
     };

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

@@ -1 +1 @@
-{"version":3,"file":"search.cjs","sources":["../../../../components/data-table/components/search.tsx"],"sourcesContent":["import { 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":["forwardRef","useDataTable","_jsx","Search"],"mappings":";;;;;;;AAKO,MAAM,WAAW,GAAGA,gBAAU,CACnC,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;IACpB,MAAM,EAAE,gBAAgB,EAAE,UAAU,EAAE,GAAGC,yBAAY,EAAE,CAAC;AAExD,IAAA,MAAM,YAAY,GAAG,CAAC,CAAsC,KAAI;AAC9D,QAAA,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;AAC7B,QAAA,gBAAgB,CAAC,CAAC,KAAK,KAAI;YACzB,OAAO;AACL,gBAAA,GAAG,KAAK;AACR,gBAAA,MAAM,EAAE,KAAK;aACd,CAAC;AACJ,SAAC,CAAC,CAAC;AACL,KAAC,CAAC;IAEF,MAAM,WAAW,GAAG,MAAK;AACvB,QAAA,gBAAgB,CAAC,CAAC,KAAK,KAAI;YACzB,OAAO;AACL,gBAAA,GAAG,KAAK;AACR,gBAAA,MAAM,EAAE,EAAE;aACX,CAAC;AACJ,SAAC,CAAC,CAAC;AACL,KAAC,CAAC;IAEF,QACEC,cAAC,CAAAC,aAAM,EACD,EAAA,GAAA,KAAK,EACT,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE,UAAU,EAAE,MAAM,EACzB,OAAO,EAAE,WAAW,EACpB,CAAA,EACF;AACJ,CAAC;;;;"}
+{"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;;"}

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

@@ -1,3 +1,3 @@
-import { SearchProps } from "../../search/search";
+import { SearchProps } from '../../search/search';
 export declare const TableSearch: import("react").ForwardRefExoticComponent<SearchProps & 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":"AAEA,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,eAAO,MAAM,WAAW,0GAiCvB,CAAC"}

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Search } from '../../search/search.js';
@@ -7,18 +8,18 @@ const TableSearch = forwardRef(({ ...props }, ref) => {
     const { updateTableQuery, tableQuery } = useDataTable();
     const handleSearch = (e) => {
         const value = e.target.value;
-        updateTableQuery((query) => {
+        updateTableQuery(query => {
             return {
                 ...query,
-                search: value,
+                search: value
             };
         });
     };
     const handleClear = () => {
-        updateTableQuery((query) => {
+        updateTableQuery(query => {
             return {
                 ...query,
-                search: "",
+                search: ''
             };
         });
     };

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

@@ -1 +1 @@
-{"version":3,"file":"search.js","sources":["../../../../components/data-table/components/search.tsx"],"sourcesContent":["import { 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":["_jsx"],"mappings":";;;;;AAKO,MAAM,WAAW,GAAG,UAAU,CACnC,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;IACpB,MAAM,EAAE,gBAAgB,EAAE,UAAU,EAAE,GAAG,YAAY,EAAE,CAAC;AAExD,IAAA,MAAM,YAAY,GAAG,CAAC,CAAsC,KAAI;AAC9D,QAAA,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;AAC7B,QAAA,gBAAgB,CAAC,CAAC,KAAK,KAAI;YACzB,OAAO;AACL,gBAAA,GAAG,KAAK;AACR,gBAAA,MAAM,EAAE,KAAK;aACd,CAAC;AACJ,SAAC,CAAC,CAAC;AACL,KAAC,CAAC;IAEF,MAAM,WAAW,GAAG,MAAK;AACvB,QAAA,gBAAgB,CAAC,CAAC,KAAK,KAAI;YACzB,OAAO;AACL,gBAAA,GAAG,KAAK;AACR,gBAAA,MAAM,EAAE,EAAE;aACX,CAAC;AACJ,SAAC,CAAC,CAAC;AACL,KAAC,CAAC;IAEF,QACEA,GAAC,CAAA,MAAM,EACD,EAAA,GAAA,KAAK,EACT,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE,UAAU,EAAE,MAAM,EACzB,OAAO,EAAE,WAAW,EACpB,CAAA,EACF;AACJ,CAAC;;;;"}
+{"version":3,"file":"search.js","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;;"}

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

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

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

@@ -1 +1 @@
-{"version":3,"file":"toolbar.cjs","sources":["../../../../components/data-table/components/toolbar.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport { Flex } from '../../flex';\nimport styles from '../data-table.module.css';\nimport { DisplaySettings } from './display-settings';\nimport { Filters } from './filters';\n\nexport function Toolbar<TData, TValue>({ className }: { className?: string }) {\n  return (\n    <Flex\n      className={cx(styles['toolbar'], className)}\n      justify='between'\n      align='center'\n    >\n      <Filters<TData, TValue> />\n      <DisplaySettings />\n    </Flex>\n  );\n}\n"],"names":["_jsxs","Flex","cx","styles","_jsx","Filters","DisplaySettings"],"mappings":";;;;;;;;;AAMgB,SAAA,OAAO,CAAgB,EAAE,SAAS,EAA0B,EAAA;AAC1E,IAAA,QACEA,eAAA,CAACC,SAAI,EAAA,EACH,SAAS,EAAEC,QAAE,CAACC,wBAAM,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,EAC3C,OAAO,EAAC,SAAS,EACjB,KAAK,EAAC,QAAQ,EAEd,QAAA,EAAA,CAAAC,cAAA,CAACC,eAAO,EAAA,EAAA,CAAkB,EAC1BD,cAAC,CAAAE,+BAAe,EAAG,EAAA,CAAA,CAAA,EAAA,CACd,EACP;AACJ;;;;"}
+{"version":3,"file":"toolbar.cjs","sources":["../../../../components/data-table/components/toolbar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { Flex } from '../../flex';\nimport styles from '../data-table.module.css';\nimport { DisplaySettings } from './display-settings';\nimport { Filters } from './filters';\n\nexport function Toolbar<TData, TValue>({ className }: { className?: string }) {\n  return (\n    <Flex\n      className={cx(styles['toolbar'], className)}\n      justify='between'\n      align='center'\n    >\n      <Filters<TData, TValue> />\n      <DisplaySettings />\n    </Flex>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAQgB;AACd;AAUF;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/toolbar.tsx"],"names":[],"mappings":"AAMA,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAW3E"}
+{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/toolbar.tsx"],"names":[],"mappings":"AAQA,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAW3E"}

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { cx } from '../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
 import { Flex } from '../../flex/flex.js';

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

@@ -1 +1 @@
-{"version":3,"file":"toolbar.js","sources":["../../../../components/data-table/components/toolbar.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport { Flex } from '../../flex';\nimport styles from '../data-table.module.css';\nimport { DisplaySettings } from './display-settings';\nimport { Filters } from './filters';\n\nexport function Toolbar<TData, TValue>({ className }: { className?: string }) {\n  return (\n    <Flex\n      className={cx(styles['toolbar'], className)}\n      justify='between'\n      align='center'\n    >\n      <Filters<TData, TValue> />\n      <DisplaySettings />\n    </Flex>\n  );\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAMgB,SAAA,OAAO,CAAgB,EAAE,SAAS,EAA0B,EAAA;AAC1E,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,EAC3C,OAAO,EAAC,SAAS,EACjB,KAAK,EAAC,QAAQ,EAEd,QAAA,EAAA,CAAAC,GAAA,CAAC,OAAO,EAAA,EAAA,CAAkB,EAC1BA,GAAC,CAAA,eAAe,EAAG,EAAA,CAAA,CAAA,EAAA,CACd,EACP;AACJ;;;;"}
+{"version":3,"file":"toolbar.js","sources":["../../../../components/data-table/components/toolbar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { Flex } from '../../flex';\nimport styles from '../data-table.module.css';\nimport { DisplaySettings } from './display-settings';\nimport { Filters } from './filters';\n\nexport function Toolbar<TData, TValue>({ className }: { className?: string }) {\n  return (\n    <Flex\n      className={cx(styles['toolbar'], className)}\n      justify='between'\n      align='center'\n    >\n      <Filters<TData, TValue> />\n      <DisplaySettings />\n    </Flex>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAQgB;AACd;AAUF;;"}

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

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var React = require('react');

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

@@ -1 +1 @@
-{"version":3,"file":"context.cjs","sources":["../../../components/data-table/context.tsx"],"sourcesContent":["import { createContext } from \"react\";\n\nimport { TableContextType } from \"./data-table.types\";\n\nexport const TableContext = createContext<TableContextType<any, any> | null>(\n  null\n);\n"],"names":["createContext"],"mappings":";;;;MAIa,YAAY,GAAGA,mBAAa,CACvC,IAAI;;;;"}
+{"version":3,"file":"context.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

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

@@ -1,3 +1,3 @@
-import { TableContextType } from "./data-table.types";
+import { TableContextType } from './data-table.types';
 export declare const TableContext: import("react").Context<TableContextType<any, any> | null>;
 //# sourceMappingURL=context.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../components/data-table/context.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,eAAO,MAAM,YAAY,4DAExB,CAAC"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../components/data-table/context.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,eAAO,MAAM,YAAY,4DAExB,CAAC"}

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

@@ -1,3 +1,4 @@
+"use client";
 import { createContext } from 'react';
 
 const TableContext = createContext(null);

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","sources":["../../../components/data-table/context.tsx"],"sourcesContent":["import { createContext } from \"react\";\n\nimport { TableContextType } from \"./data-table.types\";\n\nexport const TableContext = createContext<TableContextType<any, any> | null>(\n  null\n);\n"],"names":[],"mappings":";;MAIa,YAAY,GAAG,aAAa,CACvC,IAAI;;;;"}
+{"version":3,"file":"context.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

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

@@ -1,17 +1,18 @@
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var index$1 = require('../../node_modules/.pnpm/@tanstack_react-table@8.9.2_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@tanstack/react-table/build/lib/index.cjs');
 var React = require('react');
+var content = require('./components/content.cjs');
+var search = require('./components/search.cjs');
+var toolbar = require('./components/toolbar.cjs');
 var context = require('./context.cjs');
 var dataTable_types = require('./data-table.types.cjs');
-var index$1 = require('../../node_modules/.pnpm/@tanstack_react-table@8.9.2_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@tanstack/react-table/build/lib/index.cjs');
 var index = require('./utils/index.cjs');
-var content = require('./components/content.cjs');
-var toolbar = require('./components/toolbar.cjs');
-var search = require('./components/search.cjs');
 var index$2 = require('../../node_modules/.pnpm/@tanstack_table-core@8.9.2/node_modules/@tanstack/table-core/build/lib/index.cjs');
 
-function DataTableRoot({ data = [], columns, query, mode = "client", isLoading = false, loadingRowCount = 3, defaultSort, children, onTableQueryChange, onLoadMore, onRowClick, }) {
+function DataTableRoot({ data = [], columns, query, mode = 'client', isLoading = false, loadingRowCount = 3, defaultSort, children, onTableQueryChange, onLoadMore, onRowClick }) {
     const defaultTableQuery = index.getDefaultTableQuery(defaultSort, query);
     const initialColumnVisibility = index.getInitialColumnVisibility(columns);
     const [columnVisibility, setColumnVisibility] = React.useState(initialColumnVisibility);
@@ -19,7 +20,7 @@ function DataTableRoot({ data = [], columns, query, mode = "client", isLoading =
     const oldQueryRef = React.useRef(null);
     const reactTableState = React.useMemo(() => index.queryToTableState(tableQuery), [tableQuery]);
     const onDisplaySettingsReset = React.useCallback(() => {
-        setTableQuery((prev) => ({ ...prev, ...defaultTableQuery }));
+        setTableQuery(prev => ({ ...prev, ...defaultTableQuery }));
         setColumnVisibility(initialColumnVisibility);
     }, [defaultTableQuery, initialColumnVisibility]);
     const group_by = tableQuery.group_by?.[0];
@@ -29,7 +30,7 @@ function DataTableRoot({ data = [], columns, query, mode = "client", isLoading =
         if (tableQuery &&
             onTableQueryChange &&
             index.hasQueryChanged(oldQueryRef.current, tableQuery) &&
-            mode === "server") {
+            mode === 'server') {
             onTableQueryChange(index.sanitizeTableQuery(tableQuery));
             oldQueryRef.current = tableQuery;
         }
@@ -39,37 +40,37 @@ function DataTableRoot({ data = [], columns, query, mode = "client", isLoading =
         columns: columnsWithFilters,
         getCoreRowModel: index$2.getCoreRowModel(),
         getExpandedRowModel: index$2.getExpandedRowModel(),
-        getSubRows: (row) => row?.subRows || [],
-        getSortedRowModel: mode === "server" ? undefined : index$2.getSortedRowModel(),
-        getFilteredRowModel: mode === "server" ? undefined : index$2.getFilteredRowModel(),
-        manualSorting: mode === "server",
-        manualFiltering: mode === "server",
+        getSubRows: row => row?.subRows || [],
+        getSortedRowModel: mode === 'server' ? undefined : index$2.getSortedRowModel(),
+        getFilteredRowModel: mode === 'server' ? undefined : index$2.getFilteredRowModel(),
+        manualSorting: mode === 'server',
+        manualFiltering: mode === 'server',
         onColumnVisibilityChange: setColumnVisibility,
-        globalFilterFn: mode === "server" ? undefined : "auto",
+        globalFilterFn: mode === 'server' ? undefined : 'auto',
         initialState: {
-            columnVisibility: initialColumnVisibility,
+            columnVisibility: initialColumnVisibility
         },
         filterFromLeafRows: true,
         state: {
             ...reactTableState,
             columnVisibility: columnVisibility,
-            expanded: group_by && group_by !== dataTable_types.defaultGroupOption.id ? true : undefined,
-        },
+            expanded: group_by && group_by !== dataTable_types.defaultGroupOption.id ? true : undefined
+        }
     });
     function updateTableQuery(fn) {
-        setTableQuery((prev) => fn(prev));
+        setTableQuery(prev => fn(prev));
     }
     const loadMoreData = React.useCallback(() => {
-        if (mode === "server" && onLoadMore) {
+        if (mode === 'server' && onLoadMore) {
             onLoadMore();
         }
     }, [mode, onLoadMore]);
     const searchQuery = query?.search;
     React.useEffect(() => {
         if (searchQuery) {
-            updateTableQuery((prev) => ({
+            updateTableQuery(prev => ({
                 ...prev,
-                search: searchQuery,
+                search: searchQuery
             }));
         }
     }, [searchQuery]);
@@ -85,7 +86,7 @@ function DataTableRoot({ data = [], columns, query, mode = "client", isLoading =
             onDisplaySettingsReset,
             defaultSort,
             loadingRowCount,
-            onRowClick,
+            onRowClick
         };
     }, [
         table,
@@ -98,14 +99,14 @@ function DataTableRoot({ data = [], columns, query, mode = "client", isLoading =
         onDisplaySettingsReset,
         defaultSort,
         loadingRowCount,
-        onRowClick,
+        onRowClick
     ]);
     return (jsxRuntime.jsx(context.TableContext.Provider, { value: contextValue, children: children }));
 }
 const DataTable = Object.assign(DataTableRoot, {
     Content: content.Content,
     Toolbar: toolbar.Toolbar,
-    Search: search.TableSearch,
+    Search: search.TableSearch
 });
 
 exports.DataTable = DataTable;