@raystack/apsara 0.31.1 → 0.33.0

package/dist/v1/components/command/command.js

@@ -0,0 +1,50 @@
+import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
+import React__default from 'react';
+import { MagnifyingGlassIcon } from '../../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
+import { Command as Le } from '../../node_modules/.pnpm/cmdk@0.2.0_@types_react@18.2.12_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/cmdk/dist/index.js';
+import { cva } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
+import { Dialog } from '../dialog/dialog.js';
+import { Flex } from '../flex/flex.js';
+import styles from './command.module.css.js';
+
+const command = cva(styles.command);
+const CommandRoot = React__default.forwardRef(({ className, ...props }, ref) => (jsxRuntimeExports.jsx(Le, { ref: ref, className: command({ className }), ...props })));
+CommandRoot.displayName = Le.displayName;
+const CommandDialog = ({ children, ...props }) => {
+    return (jsxRuntimeExports.jsx(Dialog, { ...props, children: jsxRuntimeExports.jsx(Dialog.Content, { style: { overflow: "hidden", padding: "0" }, children: jsxRuntimeExports.jsx(Command, { className: styles.dialogcommand, children: children }) }) }));
+};
+const input = cva(styles.input);
+const CommandInput = React__default.forwardRef(({ className, ...props }, ref) => (jsxRuntimeExports.jsxs(Flex, { align: "center", gap: "small", "cmdk-input-wrapper": "", className: styles.inputWrapper, children: [jsxRuntimeExports.jsx(MagnifyingGlassIcon, { className: styles.inputIcon, width: 16, height: 16 }), jsxRuntimeExports.jsx(Le.Input, { ref: ref, className: input({ className }), ...props })] })));
+CommandInput.displayName = Le.Input.displayName;
+const list = cva(styles.list);
+const CommandList = React__default.forwardRef(({ className, ...props }, ref) => (jsxRuntimeExports.jsx(Le.List, { ref: ref, className: list({ className }), ...props })));
+CommandList.displayName = Le.List.displayName;
+const CommandEmpty = React__default.forwardRef((props, ref) => (jsxRuntimeExports.jsx(Le.Empty, { ref: ref, className: styles.empty, ...props })));
+CommandEmpty.displayName = Le.Empty.displayName;
+const group = cva(styles.group);
+const CommandGroup = React__default.forwardRef(({ className, ...props }, ref) => (jsxRuntimeExports.jsx(Le.Group, { ref: ref, className: group({ className }), ...props })));
+CommandGroup.displayName = Le.Group.displayName;
+const separator = cva(styles.separator);
+const CommandSeparator = React__default.forwardRef(({ className, ...props }, ref) => (jsxRuntimeExports.jsx(Le.Separator, { ref: ref, className: separator({ className }), ...props })));
+CommandSeparator.displayName = Le.Separator.displayName;
+const item = cva(styles.item);
+const CommandItem = React__default.forwardRef(({ className, ...props }, ref) => (jsxRuntimeExports.jsx(Le.Item, { ref: ref, className: item({ className }), ...props })));
+CommandItem.displayName = Le.Item.displayName;
+const shortcut = cva(styles.shortcut);
+const CommandShortcut = ({ className, ...props }) => {
+    return jsxRuntimeExports.jsx("span", { className: shortcut({ className }), ...props });
+};
+CommandShortcut.displayName = "CommandShortcut";
+const Command = Object.assign(CommandRoot, {
+    Dialog: CommandDialog,
+    Input: CommandInput,
+    List: CommandList,
+    Empty: CommandEmpty,
+    Group: CommandGroup,
+    Item: CommandItem,
+    Shortcut: CommandShortcut,
+    Separator: CommandSeparator,
+});
+
+export { Command };
+//# sourceMappingURL=command.js.map

package/dist/v1/components/command/command.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command.js","sources":["../../../../v1/components/command/command.tsx"],"sourcesContent":["import React from \"react\";\nimport { DialogProps } from \"@radix-ui/react-dialog\";\nimport { MagnifyingGlassIcon } from \"@radix-ui/react-icons\";\nimport { Command as CommandPrimitive } from \"cmdk\";\n\nimport { cva } from \"class-variance-authority\";\nimport { Dialog } from \"../dialog\";\nimport { Flex } from \"../flex\";\n\nimport styles from \"./command.module.css\";\n\nconst command = cva(styles.command);\nconst CommandRoot = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive ref={ref} className={command({ className })} {...props} />\n));\nCommandRoot.displayName = CommandPrimitive.displayName;\n\ninterface CommandDialogProps extends DialogProps {}\n\nconst CommandDialog = ({ children, ...props }: CommandDialogProps) => {\n  return (\n    <Dialog {...props}>\n      <Dialog.Content style={{ overflow: \"hidden\", padding: \"0\" }}>\n        <Command className={styles.dialogcommand}>{children}</Command>\n      </Dialog.Content>\n    </Dialog>\n  );\n};\n\nconst input = cva(styles.input);\nconst CommandInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n  <Flex\n    align=\"center\"\n    gap=\"small\"\n    cmdk-input-wrapper=\"\"\n    className={styles.inputWrapper}\n  >\n    <MagnifyingGlassIcon className={styles.inputIcon} width={16} height={16} />\n    <CommandPrimitive.Input\n      ref={ref}\n      className={input({ className })}\n      {...props}\n    />\n  </Flex>\n));\n\nCommandInput.displayName = CommandPrimitive.Input.displayName;\n\nconst list = cva(styles.list);\nconst CommandList = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List ref={ref} className={list({ className })} {...props} />\n));\n\nCommandList.displayName = CommandPrimitive.List.displayName;\n\nconst CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n  <CommandPrimitive.Empty ref={ref} className={styles.empty} {...props} />\n));\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName;\n\nconst group = cva(styles.group);\nconst CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={group({ className })}\n    {...props}\n  />\n));\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName;\n\nconst separator = cva(styles.separator);\nconst CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator\n    ref={ref}\n    className={separator({ className })}\n    {...props}\n  />\n));\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName;\n\nconst item = cva(styles.item);\nconst CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item ref={ref} className={item({ className })} {...props} />\n));\n\nCommandItem.displayName = CommandPrimitive.Item.displayName;\n\nconst shortcut = cva(styles.shortcut);\nconst CommandShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return <span className={shortcut({ className })} {...props} />;\n};\nCommandShortcut.displayName = \"CommandShortcut\";\n\nexport const Command: any = Object.assign(CommandRoot, {\n  Dialog: CommandDialog,\n  Input: CommandInput,\n  List: CommandList,\n  Empty: CommandEmpty,\n  Group: CommandGroup,\n  Item: CommandItem,\n  Shortcut: CommandShortcut,\n  Separator: CommandSeparator,\n});\n"],"names":["React","_jsx","CommandPrimitive","_jsxs"],"mappings":"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"}

package/dist/v1/components/command/command.module.css.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"command":"command-module_command__nL7ZN","inputWrapper":"command-module_inputWrapper__cHbMq","inputIcon":"command-module_inputIcon__TVZjd","input":"command-module_input__mAo31","list":"command-module_list__-gHj-","empty":"command-module_empty__YkGtz","group":"command-module_group__xJ8b6","item":"command-module_item__2zyMe","separator":"command-module_separator__W5vCu"};
+
+exports.default = styles;
+//# sourceMappingURL=command.module.css.cjs.map

package/dist/v1/components/command/command.module.css.cjs.map

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

package/dist/v1/components/command/command.module.css.js

@@ -0,0 +1,4 @@
+var styles = {"command":"command-module_command__nL7ZN","inputWrapper":"command-module_inputWrapper__cHbMq","inputIcon":"command-module_inputIcon__TVZjd","input":"command-module_input__mAo31","list":"command-module_list__-gHj-","empty":"command-module_empty__YkGtz","group":"command-module_group__xJ8b6","item":"command-module_item__2zyMe","separator":"command-module_separator__W5vCu"};
+
+export { styles as default };
+//# sourceMappingURL=command.module.css.js.map

package/dist/v1/components/command/command.module.css.js.map

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

package/dist/v1/components/command/index.d.ts

@@ -0,0 +1,2 @@
+export { Command } from "./command";
+//# sourceMappingURL=index.d.ts.map

package/dist/v1/components/command/index.d.ts.map

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

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

@@ -0,0 +1,81 @@
+'use strict';
+
+var jsxRuntime = require('../../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
+var table = require('../../table/table.cjs');
+var emptyState = require('../../empty-state/empty-state.cjs');
+var reactIcons_esm = require('../../../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.cjs');
+var index = require('../../../node_modules/.pnpm/@tanstack_react-table@8.9.2_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@tanstack/react-table/build/lib/index.cjs');
+var useDataTable = require('../hooks/useDataTable.cjs');
+var index$1 = require('../../../node_modules/.pnpm/react-loading-skeleton@3.4.0_react@18.2.0/node_modules/react-loading-skeleton/dist/index.cjs');
+var React = require('react');
+var badge = require('../../badge/badge.cjs');
+var flex = require('../../flex/flex.cjs');
+
+function Headers({ headerGroups = [], className = "", }) {
+    return (jsxRuntime.jsxRuntimeExports.jsx(table.Table.Header, { className: className, children: headerGroups?.map((headerGroup) => (jsxRuntime.jsxRuntimeExports.jsx(table.Table.Row, { children: headerGroup?.headers?.map((header) => {
+                const columnDef = header.column.columnDef;
+                return (jsxRuntime.jsxRuntimeExports.jsx(table.Table.Head, { colSpan: header.colSpan, className: columnDef.classNames?.header, style: columnDef.styles?.header, children: index.flexRender(columnDef.header, header.getContext()) }, header.id));
+            }) }, headerGroup?.id))) }));
+}
+function LoaderRows({ rowCount, columnCount, }) {
+    const rows = Array.from({ length: rowCount });
+    return rows.map((_, rowIndex) => {
+        const columns = Array.from({ length: columnCount });
+        return (jsxRuntime.jsxRuntimeExports.jsx(table.Table.Row, { children: columns.map((_, colIndex) => (jsxRuntime.jsxRuntimeExports.jsx(table.Table.Cell, { children: jsxRuntime.jsxRuntimeExports.jsx(index$1.default, {}) }, "loading-column-" + colIndex))) }, "loading-row-" + rowIndex));
+    });
+}
+function GroupHeader({ colSpan, data, }) {
+    return (jsxRuntime.jsxRuntimeExports.jsx(table.Table.SectionHeader, { colSpan: colSpan, children: jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { gap: 3, align: "center", children: [data?.group_key, data.showGroupCount ? (jsxRuntime.jsxRuntimeExports.jsx(badge.Badge, { variant: "neutral", children: data?.count })) : null] }) }));
+}
+const Rows = React.forwardRef((props, lastRowRef) => {
+    const { rows = [] } = props;
+    return (jsxRuntime.jsxRuntimeExports.jsx(jsxRuntime.jsxRuntimeExports.Fragment, { children: rows?.map((row, index$1) => {
+            const isSelected = row.getIsSelected();
+            const cells = row.getVisibleCells() || [];
+            const isSectionHeadingRow = row.depth === 0 && row.getIsExpanded();
+            const isLastRow = index$1 === rows.length - 1;
+            const rowKey = row.id + "-" + index$1;
+            return isSectionHeadingRow ? (jsxRuntime.jsxRuntimeExports.jsx(GroupHeader, { colSpan: cells.length, data: row.original }, rowKey)) : (jsxRuntime.jsxRuntimeExports.jsx(table.Table.Row, { "data-state": isSelected && "selected", ref: isLastRow ? lastRowRef : undefined, children: cells.map((cell) => {
+                    const columnDef = cell.column.columnDef;
+                    return (jsxRuntime.jsxRuntimeExports.jsx(table.Table.Cell, { className: columnDef.classNames?.cell, style: columnDef.styles?.cell, children: index.flexRender(columnDef.cell, cell.getContext()) }, cell.id));
+                }) }, rowKey));
+        }) }));
+});
+const DefaultEmptyComponent = () => (jsxRuntime.jsxRuntimeExports.jsx(emptyState.EmptyState, { icon: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.TableIcon, {}), heading: "No Data" }));
+function Content({ emptyState, classNames = {}, }) {
+    const { table: table$1, columns, mode, isLoading, loadMoreData, loadingRowCount = 3, } = useDataTable.useDataTable();
+    const headerGroups = table$1?.getHeaderGroups();
+    const { rows = [] } = table$1?.getRowModel();
+    const lastRowRef = React.useRef(null);
+    const observerRef = React.useRef(null);
+    const handleObserver = React.useCallback((entries) => {
+        const target = entries[0];
+        if (target.isIntersecting && !isLoading) {
+            loadMoreData();
+        }
+    }, [loadMoreData, isLoading]);
+    React.useEffect(() => {
+        if (mode !== "server")
+            return;
+        if (observerRef.current) {
+            observerRef.current.disconnect();
+        }
+        observerRef.current = new IntersectionObserver(handleObserver, {
+            threshold: 0.1,
+        });
+        const lastRow = lastRowRef.current;
+        if (lastRow) {
+            observerRef.current.observe(lastRow);
+        }
+        return () => {
+            if (observerRef.current && lastRow) {
+                observerRef.current.unobserve(lastRow);
+                observerRef.current.disconnect();
+            }
+        };
+    }, [mode, rows.length, handleObserver]);
+    return (jsxRuntime.jsxRuntimeExports.jsxs(table.Table, { className: classNames.table, children: [jsxRuntime.jsxRuntimeExports.jsx(Headers, { headerGroups: headerGroups, className: classNames.header }), jsxRuntime.jsxRuntimeExports.jsx(table.Table.Body, { className: classNames.body, children: rows?.length || isLoading ? (jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [jsxRuntime.jsxRuntimeExports.jsx(Rows, { rows: rows, ref: lastRowRef }), isLoading ? (jsxRuntime.jsxRuntimeExports.jsx(LoaderRows, { rowCount: loadingRowCount, columnCount: columns.length })) : null] })) : (jsxRuntime.jsxRuntimeExports.jsx(table.Table.Row, { children: jsxRuntime.jsxRuntimeExports.jsx(table.Table.Cell, { colSpan: columns.length, children: emptyState || jsxRuntime.jsxRuntimeExports.jsx(DefaultEmptyComponent, {}) }) })) })] }));
+}
+
+exports.Content = Content;
+//# sourceMappingURL=content.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"content.cjs","sources":["../../../../../v1/components/data-table/components/content.tsx"],"sourcesContent":["import { Table } from \"../../table\";\nimport type { Row, HeaderGroup } from \"@tanstack/react-table\";\nimport { EmptyState } from \"../../empty-state\";\nimport { TableIcon } from \"@radix-ui/react-icons\";\nimport { flexRender } from \"@tanstack/react-table\";\nimport { useDataTable } from \"../hooks/useDataTable\";\nimport {\n  DataTableColumnDef,\n  DataTableContentProps,\n  GroupedData,\n} from \"../data-table.types\";\nimport Skeleton from \"react-loading-skeleton\";\nimport {\n  ForwardedRef,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { Badge } from \"../../badge\";\nimport { Flex } from \"../../flex\";\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}\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?.group_key}\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 = [] } = 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              data-state={isSelected && \"selected\"}\n              ref={isLastRow ? lastRowRef : undefined}\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={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    table,\n    columns,\n    mode,\n    isLoading,\n    loadMoreData,\n    loadingRowCount = 3,\n  } = useDataTable();\n  const headerGroups = table?.getHeaderGroups();\n  const { rows = [] } = table?.getRowModel();\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  return (\n    <Table className={classNames.table}>\n      <Headers headerGroups={headerGroups} className={classNames.header} />\n      <Table.Body className={classNames.body}>\n        {rows?.length || isLoading ? (\n          <>\n            <Rows rows={rows} ref={lastRowRef} />\n            {isLoading ? (\n              <LoaderRows\n                rowCount={loadingRowCount}\n                columnCount={columns.length}\n              />\n            ) : null}\n          </>\n        ) : (\n          <Table.Row>\n            <Table.Cell colSpan={columns.length}>\n              {emptyState || <DefaultEmptyComponent />}\n            </Table.Cell>\n          </Table.Row>\n        )}\n      </Table.Body>\n    </Table>\n  );\n}\n"],"names":["_jsx","Table","flexRender","Skeleton","_jsxs","Flex","Badge","forwardRef","_Fragment","index","EmptyState","TableIcon","table","useDataTable","useRef","useCallback","useEffect"],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../../../../../v1/components/data-table/components/content.tsx"],"names":[],"mappings":"AAMA,OAAO,EAEL,qBAAqB,EAEtB,MAAM,qBAAqB,CAAC;AA6I7B,wBAAgB,OAAO,CAAC,EACtB,UAAU,EACV,UAAe,GAChB,EAAE,qBAAqB,2CAwEvB"}

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

@@ -0,0 +1,79 @@
+import { j as jsxRuntimeExports } from '../../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
+import { Table } from '../../table/table.js';
+import { EmptyState } from '../../empty-state/empty-state.js';
+import { TableIcon } from '../../../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/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@18.3.1_react@18.2.0__react@18.2.0/node_modules/@tanstack/react-table/build/lib/index.js';
+import { useDataTable } from '../hooks/useDataTable.js';
+import Skeleton from '../../../node_modules/.pnpm/react-loading-skeleton@3.4.0_react@18.2.0/node_modules/react-loading-skeleton/dist/index.js';
+import { forwardRef, useRef, useCallback, useEffect } from 'react';
+import { Badge } from '../../badge/badge.js';
+import { Flex } from '../../flex/flex.js';
+
+function Headers({ headerGroups = [], className = "", }) {
+    return (jsxRuntimeExports.jsx(Table.Header, { className: className, children: headerGroups?.map((headerGroup) => (jsxRuntimeExports.jsx(Table.Row, { children: headerGroup?.headers?.map((header) => {
+                const columnDef = header.column.columnDef;
+                return (jsxRuntimeExports.jsx(Table.Head, { colSpan: header.colSpan, className: columnDef.classNames?.header, style: columnDef.styles?.header, children: flexRender(columnDef.header, header.getContext()) }, header.id));
+            }) }, headerGroup?.id))) }));
+}
+function LoaderRows({ rowCount, columnCount, }) {
+    const rows = Array.from({ length: rowCount });
+    return rows.map((_, rowIndex) => {
+        const columns = Array.from({ length: columnCount });
+        return (jsxRuntimeExports.jsx(Table.Row, { children: columns.map((_, colIndex) => (jsxRuntimeExports.jsx(Table.Cell, { children: jsxRuntimeExports.jsx(Skeleton, {}) }, "loading-column-" + colIndex))) }, "loading-row-" + rowIndex));
+    });
+}
+function GroupHeader({ colSpan, data, }) {
+    return (jsxRuntimeExports.jsx(Table.SectionHeader, { colSpan: colSpan, children: jsxRuntimeExports.jsxs(Flex, { gap: 3, align: "center", children: [data?.group_key, data.showGroupCount ? (jsxRuntimeExports.jsx(Badge, { variant: "neutral", children: data?.count })) : null] }) }));
+}
+const Rows = forwardRef((props, lastRowRef) => {
+    const { rows = [] } = props;
+    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: rows?.map((row, index) => {
+            const isSelected = row.getIsSelected();
+            const cells = row.getVisibleCells() || [];
+            const isSectionHeadingRow = row.depth === 0 && row.getIsExpanded();
+            const isLastRow = index === rows.length - 1;
+            const rowKey = row.id + "-" + index;
+            return isSectionHeadingRow ? (jsxRuntimeExports.jsx(GroupHeader, { colSpan: cells.length, data: row.original }, rowKey)) : (jsxRuntimeExports.jsx(Table.Row, { "data-state": isSelected && "selected", ref: isLastRow ? lastRowRef : undefined, children: cells.map((cell) => {
+                    const columnDef = cell.column.columnDef;
+                    return (jsxRuntimeExports.jsx(Table.Cell, { className: columnDef.classNames?.cell, style: columnDef.styles?.cell, children: flexRender(columnDef.cell, cell.getContext()) }, cell.id));
+                }) }, rowKey));
+        }) }));
+});
+const DefaultEmptyComponent = () => (jsxRuntimeExports.jsx(EmptyState, { icon: jsxRuntimeExports.jsx(TableIcon, {}), heading: "No Data" }));
+function Content({ emptyState, classNames = {}, }) {
+    const { table, columns, mode, isLoading, loadMoreData, loadingRowCount = 3, } = useDataTable();
+    const headerGroups = table?.getHeaderGroups();
+    const { rows = [] } = table?.getRowModel();
+    const lastRowRef = useRef(null);
+    const observerRef = useRef(null);
+    const handleObserver = useCallback((entries) => {
+        const target = entries[0];
+        if (target.isIntersecting && !isLoading) {
+            loadMoreData();
+        }
+    }, [loadMoreData, isLoading]);
+    useEffect(() => {
+        if (mode !== "server")
+            return;
+        if (observerRef.current) {
+            observerRef.current.disconnect();
+        }
+        observerRef.current = new IntersectionObserver(handleObserver, {
+            threshold: 0.1,
+        });
+        const lastRow = lastRowRef.current;
+        if (lastRow) {
+            observerRef.current.observe(lastRow);
+        }
+        return () => {
+            if (observerRef.current && lastRow) {
+                observerRef.current.unobserve(lastRow);
+                observerRef.current.disconnect();
+            }
+        };
+    }, [mode, rows.length, handleObserver]);
+    return (jsxRuntimeExports.jsxs(Table, { className: classNames.table, children: [jsxRuntimeExports.jsx(Headers, { headerGroups: headerGroups, className: classNames.header }), jsxRuntimeExports.jsx(Table.Body, { className: classNames.body, children: rows?.length || isLoading ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Rows, { rows: rows, ref: lastRowRef }), isLoading ? (jsxRuntimeExports.jsx(LoaderRows, { rowCount: loadingRowCount, columnCount: columns.length })) : null] })) : (jsxRuntimeExports.jsx(Table.Row, { children: jsxRuntimeExports.jsx(Table.Cell, { colSpan: columns.length, children: emptyState || jsxRuntimeExports.jsx(DefaultEmptyComponent, {}) }) })) })] }));
+}
+
+export { Content };
+//# sourceMappingURL=content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"content.js","sources":["../../../../../v1/components/data-table/components/content.tsx"],"sourcesContent":["import { Table } from \"../../table\";\nimport type { Row, HeaderGroup } from \"@tanstack/react-table\";\nimport { EmptyState } from \"../../empty-state\";\nimport { TableIcon } from \"@radix-ui/react-icons\";\nimport { flexRender } from \"@tanstack/react-table\";\nimport { useDataTable } from \"../hooks/useDataTable\";\nimport {\n  DataTableColumnDef,\n  DataTableContentProps,\n  GroupedData,\n} from \"../data-table.types\";\nimport Skeleton from \"react-loading-skeleton\";\nimport {\n  ForwardedRef,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { Badge } from \"../../badge\";\nimport { Flex } from \"../../flex\";\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}\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?.group_key}\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 = [] } = 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              data-state={isSelected && \"selected\"}\n              ref={isLastRow ? lastRowRef : undefined}\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={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    table,\n    columns,\n    mode,\n    isLoading,\n    loadMoreData,\n    loadingRowCount = 3,\n  } = useDataTable();\n  const headerGroups = table?.getHeaderGroups();\n  const { rows = [] } = table?.getRowModel();\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  return (\n    <Table className={classNames.table}>\n      <Headers headerGroups={headerGroups} className={classNames.header} />\n      <Table.Body className={classNames.body}>\n        {rows?.length || isLoading ? (\n          <>\n            <Rows rows={rows} ref={lastRowRef} />\n            {isLoading ? (\n              <LoaderRows\n                rowCount={loadingRowCount}\n                columnCount={columns.length}\n              />\n            ) : null}\n          </>\n        ) : (\n          <Table.Row>\n            <Table.Cell colSpan={columns.length}>\n              {emptyState || <DefaultEmptyComponent />}\n            </Table.Cell>\n          </Table.Row>\n        )}\n      </Table.Body>\n    </Table>\n  );\n}\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/dist/v1/components/data-table/components/display-properties.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var jsxRuntime = require('../../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
+var chip = require('../../chip/chip.cjs');
+var flex = require('../../flex/flex.cjs');
+var text = require('../../text/text.cjs');
+
+function DisplayProperties({ columns, }) {
+    const hidableColumns = columns?.filter((col) => col.columnDef.enableHiding);
+    return (jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { direction: "column", gap: 3, children: [jsxRuntime.jsxRuntimeExports.jsx(text.Text, { children: "Display Properties" }), jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { gap: 3, children: hidableColumns.map((column) => (jsxRuntime.jsxRuntimeExports.jsx(chip.Chip, { variant: "outline", size: "small", color: column.getIsVisible() ? "accent" : "neutral", onClick: () => column.toggleVisibility(), children: column.columnDef.header || column.id }, column.id))) })] }));
+}
+
+exports.DisplayProperties = DisplayProperties;
+//# sourceMappingURL=display-properties.cjs.map

package/dist/v1/components/data-table/components/display-properties.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"display-properties.cjs","sources":["../../../../../v1/components/data-table/components/display-properties.tsx"],"sourcesContent":["import { Chip } from \"../../chip\";\nimport { Flex } from \"../../flex\";\nimport { Text } from \"../../text\";\nimport { DataTableColumn } from \"../data-table.types\";\n\nexport function DisplayProperties<TData, TValue>({\n  columns,\n}: {\n  columns: DataTableColumn<TData, TValue>[];\n}) {\n  const hidableColumns = columns?.filter((col) => col.columnDef.enableHiding);\n\n  return (\n    <Flex direction={\"column\"} gap={3}>\n      <Text>Display Properties</Text>\n      <Flex gap={3}>\n        {hidableColumns.map((column) => (\n          <Chip\n            key={column.id}\n            variant=\"outline\"\n            size=\"small\"\n            color={column.getIsVisible() ? \"accent\" : \"neutral\"}\n            onClick={() => column.toggleVisibility()}\n          >\n            {(column.columnDef.header as string) || column.id}\n          </Chip>\n        ))}\n      </Flex>\n    </Flex>\n  );\n}\n"],"names":["_jsxs","Flex","_jsx","Text","Chip"],"mappings":";;;;;;;AAKgB,SAAA,iBAAiB,CAAgB,EAC/C,OAAO,GAGR,EAAA;AACC,IAAA,MAAM,cAAc,GAAG,OAAO,EAAE,MAAM,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;AAE5E,IAAA,QACEA,iCAAC,CAAAC,SAAI,IAAC,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAA,QAAA,EAAA,CAC/BC,iCAACC,SAAI,EAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,CAA0B,EAC/BD,gCAAC,CAAAD,SAAI,IAAC,GAAG,EAAE,CAAC,EAAA,QAAA,EACT,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,MACzBC,gCAAC,CAAAE,SAAI,IAEH,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,MAAM,CAAC,YAAY,EAAE,GAAG,QAAQ,GAAG,SAAS,EACnD,OAAO,EAAE,MAAM,MAAM,CAAC,gBAAgB,EAAE,EAAA,QAAA,EAEtC,MAAM,CAAC,SAAS,CAAC,MAAiB,IAAI,MAAM,CAAC,EAAE,IAN5C,MAAM,CAAC,EAAE,CAOT,CACR,CAAC,EACG,CAAA,CAAA,EAAA,CACF,EACP;AACJ;;;;"}

package/dist/v1/components/data-table/components/display-properties.d.ts

@@ -0,0 +1,5 @@
+import { DataTableColumn } from "../data-table.types";
+export declare function DisplayProperties<TData, TValue>({ columns, }: {
+    columns: DataTableColumn<TData, TValue>[];
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=display-properties.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"display-properties.d.ts","sourceRoot":"","sources":["../../../../../v1/components/data-table/components/display-properties.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,EAC/C,OAAO,GACR,EAAE;IACD,OAAO,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,CAAC;CAC3C,2CAqBA"}

package/dist/v1/components/data-table/components/display-properties.js

@@ -0,0 +1,12 @@
+import { j as jsxRuntimeExports } from '../../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
+import { Chip } from '../../chip/chip.js';
+import { Flex } from '../../flex/flex.js';
+import { Text } from '../../text/text.js';
+
+function DisplayProperties({ columns, }) {
+    const hidableColumns = columns?.filter((col) => col.columnDef.enableHiding);
+    return (jsxRuntimeExports.jsxs(Flex, { direction: "column", gap: 3, children: [jsxRuntimeExports.jsx(Text, { children: "Display Properties" }), jsxRuntimeExports.jsx(Flex, { gap: 3, children: hidableColumns.map((column) => (jsxRuntimeExports.jsx(Chip, { variant: "outline", size: "small", color: column.getIsVisible() ? "accent" : "neutral", onClick: () => column.toggleVisibility(), children: column.columnDef.header || column.id }, column.id))) })] }));
+}
+
+export { DisplayProperties };
+//# sourceMappingURL=display-properties.js.map

package/dist/v1/components/data-table/components/display-properties.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"display-properties.js","sources":["../../../../../v1/components/data-table/components/display-properties.tsx"],"sourcesContent":["import { Chip } from \"../../chip\";\nimport { Flex } from \"../../flex\";\nimport { Text } from \"../../text\";\nimport { DataTableColumn } from \"../data-table.types\";\n\nexport function DisplayProperties<TData, TValue>({\n  columns,\n}: {\n  columns: DataTableColumn<TData, TValue>[];\n}) {\n  const hidableColumns = columns?.filter((col) => col.columnDef.enableHiding);\n\n  return (\n    <Flex direction={\"column\"} gap={3}>\n      <Text>Display Properties</Text>\n      <Flex gap={3}>\n        {hidableColumns.map((column) => (\n          <Chip\n            key={column.id}\n            variant=\"outline\"\n            size=\"small\"\n            color={column.getIsVisible() ? \"accent\" : \"neutral\"}\n            onClick={() => column.toggleVisibility()}\n          >\n            {(column.columnDef.header as string) || column.id}\n          </Chip>\n        ))}\n      </Flex>\n    </Flex>\n  );\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAKgB,SAAA,iBAAiB,CAAgB,EAC/C,OAAO,GAGR,EAAA;AACC,IAAA,MAAM,cAAc,GAAG,OAAO,EAAE,MAAM,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;AAE5E,IAAA,QACEA,sBAAC,CAAA,IAAI,IAAC,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAA,QAAA,EAAA,CAC/BC,sBAAC,IAAI,EAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,CAA0B,EAC/BA,qBAAC,CAAA,IAAI,IAAC,GAAG,EAAE,CAAC,EAAA,QAAA,EACT,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,MACzBA,qBAAC,CAAA,IAAI,IAEH,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,MAAM,CAAC,YAAY,EAAE,GAAG,QAAQ,GAAG,SAAS,EACnD,OAAO,EAAE,MAAM,MAAM,CAAC,gBAAgB,EAAE,EAAA,QAAA,EAEtC,MAAM,CAAC,SAAS,CAAC,MAAiB,IAAI,MAAM,CAAC,EAAE,IAN5C,MAAM,CAAC,EAAE,CAOT,CACR,CAAC,EACG,CAAA,CAAA,EAAA,CACF,EACP;AACJ;;;;"}

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

@@ -0,0 +1,51 @@
+'use strict';
+
+var jsxRuntime = require('../../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
+var flex = require('../../flex/flex.cjs');
+var dataTable_module = require('../data-table.module.css.cjs');
+var button = require('../../button/button.cjs');
+var popover = require('../../popover/popover.cjs');
+var reactIcons_esm = require('../../../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.cjs');
+var useDataTable = require('../hooks/useDataTable.cjs');
+var index = require('../utils/index.cjs');
+var ordering = require('./ordering.cjs');
+var grouping = require('./grouping.cjs');
+var displayProperties = require('./display-properties.cjs');
+
+function DisplaySettings() {
+    const { table, updateTableQuery, tableQuery, defaultSort, onDisplaySettingsReset, } = useDataTable.useDataTable();
+    const columns = table?.getAllColumns();
+    const sortableColumns = columns
+        ?.filter((col) => col.columnDef.enableSorting)
+        ?.map((column) => {
+        const id = column.id;
+        return {
+            label: column.columnDef.header || id,
+            id: id,
+        };
+    });
+    function onSortChange(columnId, order) {
+        updateTableQuery((query) => {
+            return {
+                ...query,
+                sort: [{ name: columnId, order }],
+            };
+        });
+    }
+    function onGroupChange(columnId, order) {
+        updateTableQuery((query) => {
+            return {
+                ...query,
+                group_by: [columnId],
+                __group_by_sort: order,
+            };
+        });
+    }
+    function onReset() {
+        onDisplaySettingsReset();
+    }
+    return (jsxRuntime.jsxRuntimeExports.jsxs(popover.Popover, { children: [jsxRuntime.jsxRuntimeExports.jsx(popover.Popover.Trigger, { asChild: true, children: jsxRuntime.jsxRuntimeExports.jsx(button.Button, { variant: "outline", color: "neutral", size: "small", leadingIcon: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.MixerHorizontalIcon, {}), children: "Display" }) }), jsxRuntime.jsxRuntimeExports.jsx(popover.Popover.Content, { className: dataTable_module.default["display-popover-content"], align: "end", children: jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { direction: "column", children: [jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { direction: "column", className: dataTable_module.default["display-popover-properties-container"], gap: 5, children: [jsxRuntime.jsxRuntimeExports.jsx(ordering.Ordering, { columnList: sortableColumns, onChange: onSortChange, value: tableQuery?.sort?.[0] || defaultSort }), jsxRuntime.jsxRuntimeExports.jsx(grouping.Grouping, { columns: columns, onChange: onGroupChange, value: tableQuery?.group_by?.[0] || index.defaultGroupOption.id })] }), jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { className: dataTable_module.default["display-popover-properties-container"], children: jsxRuntime.jsxRuntimeExports.jsx(displayProperties.DisplayProperties, { columns: columns }) }), jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { justify: "end", className: dataTable_module.default["display-popover-reset-container"], children: jsxRuntime.jsxRuntimeExports.jsx(button.Button, { variant: "text", onClick: onReset, children: "Reset to default" }) })] }) })] }));
+}
+
+exports.DisplaySettings = DisplaySettings;
+//# sourceMappingURL=display-settings.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"display-settings.cjs","sources":["../../../../../v1/components/data-table/components/display-settings.tsx"],"sourcesContent":["import { Flex } from \"../../flex\";\nimport styles from \"../data-table.module.css\";\nimport { Button } from \"../../button\";\nimport { Popover } from \"../../popover\";\nimport { MixerHorizontalIcon } from \"@radix-ui/react-icons\";\nimport { useDataTable } from \"../hooks/useDataTable\";\nimport { DataTableColumn, SortOrdersValues } from \"../data-table.types\";\nimport { defaultGroupOption } from \"../utils\";\nimport { Ordering } from \"./ordering\";\nimport { Grouping } from \"./grouping\";\nimport { DisplayProperties } from \"./display-properties\";\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, order: SortOrdersValues) {\n    updateTableQuery((query) => {\n      return {\n        ...query,\n        group_by: [columnId],\n        __group_by_sort: order,\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              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}>\n              Reset to default\n            </Button>\n          </Flex>\n        </Flex>\n      </Popover.Content>\n    </Popover>\n  );\n}\n"],"names":["useDataTable","_jsxs","Popover","_jsx","Button","MixerHorizontalIcon","styles","Flex","Ordering","Grouping","defaultGroupOption","DisplayProperties"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+export declare function DisplaySettings<TData, TValue>(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=display-settings.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"display-settings.d.ts","sourceRoot":"","sources":["../../../../../v1/components/data-table/components/display-settings.tsx"],"names":[],"mappings":"AAYA,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,6CA2F5C"}

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

@@ -0,0 +1,49 @@
+import { j as jsxRuntimeExports } from '../../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
+import { Flex } from '../../flex/flex.js';
+import styles from '../data-table.module.css.js';
+import { Button } from '../../button/button.js';
+import { Popover } from '../../popover/popover.js';
+import { MixerHorizontalIcon } from '../../../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
+import { useDataTable } from '../hooks/useDataTable.js';
+import { defaultGroupOption } from '../utils/index.js';
+import { Ordering } from './ordering.js';
+import { Grouping } from './grouping.js';
+import { DisplayProperties } from './display-properties.js';
+
+function DisplaySettings() {
+    const { table, updateTableQuery, tableQuery, defaultSort, onDisplaySettingsReset, } = useDataTable();
+    const columns = table?.getAllColumns();
+    const sortableColumns = columns
+        ?.filter((col) => col.columnDef.enableSorting)
+        ?.map((column) => {
+        const id = column.id;
+        return {
+            label: column.columnDef.header || id,
+            id: id,
+        };
+    });
+    function onSortChange(columnId, order) {
+        updateTableQuery((query) => {
+            return {
+                ...query,
+                sort: [{ name: columnId, order }],
+            };
+        });
+    }
+    function onGroupChange(columnId, order) {
+        updateTableQuery((query) => {
+            return {
+                ...query,
+                group_by: [columnId],
+                __group_by_sort: order,
+            };
+        });
+    }
+    function onReset() {
+        onDisplaySettingsReset();
+    }
+    return (jsxRuntimeExports.jsxs(Popover, { children: [jsxRuntimeExports.jsx(Popover.Trigger, { asChild: true, children: jsxRuntimeExports.jsx(Button, { variant: "outline", color: "neutral", size: "small", leadingIcon: jsxRuntimeExports.jsx(MixerHorizontalIcon, {}), children: "Display" }) }), jsxRuntimeExports.jsx(Popover.Content, { className: styles["display-popover-content"], align: "end", children: jsxRuntimeExports.jsxs(Flex, { direction: "column", children: [jsxRuntimeExports.jsxs(Flex, { direction: "column", className: styles["display-popover-properties-container"], gap: 5, children: [jsxRuntimeExports.jsx(Ordering, { columnList: sortableColumns, onChange: onSortChange, value: tableQuery?.sort?.[0] || defaultSort }), jsxRuntimeExports.jsx(Grouping, { columns: columns, onChange: onGroupChange, value: tableQuery?.group_by?.[0] || defaultGroupOption.id })] }), jsxRuntimeExports.jsx(Flex, { className: styles["display-popover-properties-container"], children: jsxRuntimeExports.jsx(DisplayProperties, { columns: columns }) }), jsxRuntimeExports.jsx(Flex, { justify: "end", className: styles["display-popover-reset-container"], children: jsxRuntimeExports.jsx(Button, { variant: "text", onClick: onReset, children: "Reset to default" }) })] }) })] }));
+}
+
+export { DisplaySettings };
+//# sourceMappingURL=display-settings.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"display-settings.js","sources":["../../../../../v1/components/data-table/components/display-settings.tsx"],"sourcesContent":["import { Flex } from \"../../flex\";\nimport styles from \"../data-table.module.css\";\nimport { Button } from \"../../button\";\nimport { Popover } from \"../../popover\";\nimport { MixerHorizontalIcon } from \"@radix-ui/react-icons\";\nimport { useDataTable } from \"../hooks/useDataTable\";\nimport { DataTableColumn, SortOrdersValues } from \"../data-table.types\";\nimport { defaultGroupOption } from \"../utils\";\nimport { Ordering } from \"./ordering\";\nimport { Grouping } from \"./grouping\";\nimport { DisplayProperties } from \"./display-properties\";\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, order: SortOrdersValues) {\n    updateTableQuery((query) => {\n      return {\n        ...query,\n        group_by: [columnId],\n        __group_by_sort: order,\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              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}>\n              Reset to default\n            </Button>\n          </Flex>\n        </Flex>\n      </Popover.Content>\n    </Popover>\n  );\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -0,0 +1,44 @@
+'use strict';
+
+var jsxRuntime = require('../../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
+var filterChip = require('../../filter-chip/filter-chip.cjs');
+var iconButton = require('../../icon-button/icon-button.cjs');
+var button = require('../../button/button.cjs');
+var filter = require('../../icons/assets/filter.svg.cjs');
+var dropdownMenu = require('../../dropdown-menu/dropdown-menu.cjs');
+var useDataTable = require('../hooks/useDataTable.cjs');
+var flex = require('../../flex/flex.cjs');
+var useFilters = require('../hooks/useFilters.cjs');
+
+function AddFilter({ columnList = [], appliedFiltersSet, onAddFilter, }) {
+    const availableFilters = columnList?.filter((col) => !appliedFiltersSet.has(col.id));
+    return availableFilters.length > 0 ? (jsxRuntime.jsxRuntimeExports.jsxs(dropdownMenu.DropdownMenu, { children: [jsxRuntime.jsxRuntimeExports.jsx(dropdownMenu.DropdownMenu.Trigger, { asChild: true, children: appliedFiltersSet.size > 0 ? (jsxRuntime.jsxRuntimeExports.jsx(iconButton.IconButton, { size: 4, children: jsxRuntime.jsxRuntimeExports.jsx(filter.ReactComponent, {}) })) : (jsxRuntime.jsxRuntimeExports.jsx(button.Button, { variant: "text", size: "small", leadingIcon: jsxRuntime.jsxRuntimeExports.jsx(filter.ReactComponent, {}), children: "Filter" })) }), jsxRuntime.jsxRuntimeExports.jsx(dropdownMenu.DropdownMenu.Content, { align: "start", children: availableFilters?.map((column) => {
+                    const columnDef = column.columnDef;
+                    const id = columnDef.accessorKey || column.id;
+                    return (jsxRuntime.jsxRuntimeExports.jsx(dropdownMenu.DropdownMenu.Item, { onSelect: () => onAddFilter(column), children: columnDef.header || id }, id));
+                }) })] })) : null;
+}
+function Filters() {
+    const { table, tableQuery } = useDataTable.useDataTable();
+    const columns = table?.getAllColumns();
+    const { onAddFilter, handleRemoveFilter, handleFilterValueChange, handleFilterOperationChange, } = useFilters.useFilters();
+    const columnList = columns?.filter((column) => column.columnDef.enableColumnFilter);
+    const appliedFiltersSet = new Set(tableQuery?.filters?.map((filter) => filter.name));
+    const appliedFilters = tableQuery?.filters?.map((filter) => {
+        const columnDef = columns?.find((col) => {
+            const columnDef = col.columnDef;
+            const id = columnDef.accessorKey || col.id;
+            return id === filter.name;
+        })?.columnDef;
+        return {
+            columnType: columnDef?.columnType || "text",
+            label: columnDef?.header || "",
+            options: columnDef?.filterOptions || [],
+            ...filter,
+        };
+    }) || [];
+    return (jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { gap: 3, children: [jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { gap: 3, children: appliedFilters.map((filter) => (jsxRuntime.jsxRuntimeExports.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.columnType, options: filter.options }, filter.name))) }), jsxRuntime.jsxRuntimeExports.jsx(AddFilter, { columnList: columnList, appliedFiltersSet: appliedFiltersSet, onAddFilter: onAddFilter })] }));
+}
+
+exports.Filters = Filters;
+//# sourceMappingURL=filters.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filters.cjs","sources":["../../../../../v1/components/data-table/components/filters.tsx"],"sourcesContent":["import { FilterChip } from \"../../filter-chip\";\nimport { DataTableColumn } from \"../data-table.types\";\nimport { IconButton } from \"../../icon-button\";\nimport { Button } from \"../../button\";\nimport { FilterIcon } from \"../../icons\";\nimport { DropdownMenu } from \"../../dropdown-menu\";\nimport { useDataTable } from \"../hooks/useDataTable\";\nimport { Flex } from \"../../flex\";\nimport { FilterOperatorTypes } from \"~/v1/types/filters\";\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 variant={\"text\"} size={\"small\"} leadingIcon={<FilterIcon />}>\n            Filter\n          </Button>\n        )}\n      </DropdownMenu.Trigger>\n      <DropdownMenu.Content align=\"start\">\n        {availableFilters?.map((column) => {\n          const columnDef = column.columnDef;\n          const id = columnDef.accessorKey || column.id;\n          return (\n            <DropdownMenu.Item key={id} onSelect={() => 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        columnType: columnDef?.columnType || \"text\",\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) =>\n              handleFilterValueChange(filter.name, value)\n            }\n            onOperationChange={(operator) =>\n              handleFilterOperationChange(\n                filter.name,\n                operator as FilterOperatorTypes\n              )\n            }\n            columnType={filter.columnType}\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","DropdownMenu","_jsx","IconButton","FilterIcon","Button","useDataTable","useFilters","Flex","FilterChip"],"mappings":"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"}