@orfium/ictinus 5.43.0 → 5.43.2

package/dist/vanilla/src/data-table/DataTableBody-css.js

@@ -0,0 +1,16 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-CBkaYCBT.css';
+import './../../assets/src/vanilla-extract/global.css.ts.vanilla-BHTgxO8_.css';
+import './../../assets/src/sprinkles/properties.css.ts.vanilla-C8hqLKur.css';
+import './../../assets/src/vanilla/Table/TableRow.css.ts.vanilla-B1NNK8v8.css';
+import './../../assets/src/data-table/DataTableBody.css.ts.vanilla-B8JRxzQ8.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var cell = createRuntimeFn({defaultClassName:'_146hxcf1mi _146hxcf0 _146hxcf2g nl338i8',variantClassNames:{pinned:{left:'nl338i9',right:'nl338ia'},resizable:{false:'nl338ib',true:'nl338ic'}},defaultVariants:{},compoundVariants:[]});
+var cellOffsetVar = 'var(--nl338i1)';
+var cellSizeVar = 'var(--nl338i0)';
+var leftTotalSizeVar = 'var(--nl338i2)';
+var rightTotalSizeVar = 'var(--nl338i3)';
+var root = createRuntimeFn({defaultClassName:'_146hxcf1jr _146hxcf1ju _146hxcf1ie _146hxcfhg _146hxcf2g _146hxcfkg nl338i6',variantClassNames:{},defaultVariants:{},compoundVariants:[]});
+var totalSizeVar = 'var(--nl338i4)';
+
+export { cell, cellOffsetVar, cellSizeVar, leftTotalSizeVar, rightTotalSizeVar, root, totalSizeVar };

package/dist/vanilla/src/data-table/DataTableBody.js

@@ -0,0 +1,235 @@
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { flexRender } from '@tanstack/react-table';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { forwardRef, useRef, useEffect } from 'react';
+import { useDOMRef } from '../components/utils/useDOMRef.js';
+import { cn } from '../utils/cn.js';
+import { Box } from '../../Box/Box.js';
+import '../sprinkles/sprinkles.js';
+import { Table } from '../../Table/Table.js';
+import { TableBody } from '../../Table/TableBody.js';
+import { TableCell } from '../../Table/TableCell.js';
+import '../../Table/TableFooter.js';
+import { TableHeader } from '../../Table/TableHeader.js';
+import '../../Table/TableHeaderCell.js';
+import { TableRow } from '../../Table/TableRow.js';
+import { useDataTableContext } from './DataTableContext.js';
+import { DataTableHeaderCell } from './DataTableHeaderCell.js';
+import { DataTableRow } from './DataTableRow.js';
+import { cell, cellSizeVar, cellOffsetVar, root, totalSizeVar, rightTotalSizeVar, leftTotalSizeVar } from './DataTableBody-css.js';
+
+const COL_VIRTUALIZATION_THRESHOLD = 20;
+const ROW_VIRTUALIZATION_THRESHOLD = 20;
+const DataTableBody = forwardRef(
+  ({
+    className,
+    estimatedRowHeight = 44,
+    bordered = false,
+    size = "sm",
+    style,
+    ...props
+  }, ref) => {
+    const domRef = useDOMRef(ref);
+    const { table } = useDataTableContext();
+    const rows = table.getRowModel().rows;
+    const previousRowsRef = useRef(rows);
+    useEffect(() => {
+      previousRowsRef.current = rows;
+    });
+    const scrollContainerRef = useRef(null);
+    const calculateScrollTimeline = () => {
+      if (!domRef.current || !scrollContainerRef.current) {
+        return;
+      }
+      const { offsetWidth, scrollLeft, scrollWidth } = scrollContainerRef.current;
+      if (scrollWidth > offsetWidth) {
+        domRef.current.dataset.scrollTimeline = scrollLeft === 0 ? "left" : scrollLeft >= scrollWidth - offsetWidth ? "right" : "middle";
+      } else {
+        delete domRef.current.dataset.scrollTimeline;
+      }
+    };
+    useEffect(calculateScrollTimeline, []);
+    const centerColumns = table.getCenterVisibleLeafColumns();
+    const columnVirtualizer = useVirtualizer({
+      count: centerColumns.length,
+      enabled: centerColumns.length > COL_VIRTUALIZATION_THRESHOLD,
+      estimateSize: (index) => centerColumns[index].getSize(),
+      getItemKey: (index) => centerColumns[index].id,
+      getScrollElement: () => scrollContainerRef.current,
+      horizontal: true
+    });
+    const virtualColumns = columnVirtualizer.getVirtualItems();
+    const virtualColumnsOffset = virtualColumns[0]?.start ?? 0;
+    const rowVirtualizer = useVirtualizer({
+      count: rows.length,
+      enabled: centerColumns.length > COL_VIRTUALIZATION_THRESHOLD || rows.length > ROW_VIRTUALIZATION_THRESHOLD,
+      estimateSize: () => estimatedRowHeight,
+      getItemKey: (index) => rows[index].id,
+      getScrollElement: () => scrollContainerRef.current
+    });
+    const virtualRows = rowVirtualizer.getVirtualItems();
+    const isSelectable = table.options.enableRowSelection !== false;
+    const hasLeftPinned = table.getLeftTotalSize() > 0;
+    const hasRightPinned = table.getRightTotalSize() > 0;
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        ref: domRef,
+        "data-selectable": isSelectable ? "" : void 0,
+        "data-has-left-pinned": hasLeftPinned ? "" : void 0,
+        "data-has-right-pinned": hasRightPinned ? "" : void 0,
+        style: {
+          ...assignInlineVars({
+            [leftTotalSizeVar]: `${table.getLeftTotalSize()}px`,
+            [rightTotalSizeVar]: `${table.getRightTotalSize()}px`,
+            [totalSizeVar]: (table.getHeaderGroups()[0]?.headers.reduce(
+              (sum, header) => sum + (header.column.getCanResize() ? header.getSize() : 0),
+              0
+            ) ?? 0).toString()
+          }),
+          ...style
+        },
+        className: cn(root({}), className),
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          Table,
+          {
+            rounded: "inherit",
+            layout: "fixed",
+            onScroll: calculateScrollTimeline,
+            ref: scrollContainerRef,
+            children: [
+              /* @__PURE__ */ jsx(TableHeader, { display: "grid", pinned: true, children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { display: "flex", children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
+                DataTableHeaderCell,
+                {
+                  justifyContent: header.column.columnDef.meta?.align,
+                  bordered,
+                  header,
+                  pinned: !!header.column.getIsPinned(),
+                  style: {
+                    ...assignInlineVars({
+                      [cellOffsetVar]: `${header.column.getStart(header.column.getIsPinned() || "left")}px`,
+                      [cellSizeVar]: `${header.getSize()}`
+                    })
+                  },
+                  className: cn(
+                    cell({
+                      pinned: header.column.getIsPinned() || void 0,
+                      resizable: header.column.getCanResize()
+                    })
+                  ),
+                  children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
+                },
+                header.id
+              )) }, headerGroup.id)) }),
+              /* @__PURE__ */ jsx(
+                TableBody,
+                {
+                  display: "grid",
+                  style: rowVirtualizer.options.enabled ? { height: `${rowVirtualizer.getTotalSize()}px` } : void 0,
+                  children: (rowVirtualizer.options.enabled ? virtualRows.length === 0 && rows.length > 0 ? previousRowsRef.current.map((row) => ({
+                    row,
+                    virtualRow: void 0
+                  })) : virtualRows.map((virtualRow) => ({
+                    row: rows[virtualRow.index],
+                    virtualRow
+                  })) : rows.map((row) => ({ row, virtualRow: void 0 }))).map(({ row, virtualRow }, index) => /* @__PURE__ */ jsxs(
+                    DataTableRow,
+                    {
+                      "data-index": virtualRow?.index,
+                      display: "flex",
+                      index: virtualRow?.index ?? index,
+                      row,
+                      ref: virtualRow ? rowVirtualizer.measureElement : void 0,
+                      style: virtualRow ? {
+                        position: "absolute",
+                        transform: `translateY(${virtualRow.start}px)`
+                      } : void 0,
+                      children: [
+                        row.getLeftVisibleCells().map((cell$1) => /* @__PURE__ */ jsx(
+                          TableCell,
+                          {
+                            bordered,
+                            size,
+                            justifyContent: cell$1.column.columnDef.meta?.align,
+                            pinned: true,
+                            style: {
+                              ...assignInlineVars({
+                                [cellOffsetVar]: `${cell$1.column.getStart("left")}px`,
+                                [cellSizeVar]: `${cell$1.column.getSize()}`
+                              })
+                            },
+                            className: cn(
+                              cell({
+                                pinned: "left",
+                                resizable: cell$1.column.getCanResize()
+                              })
+                            ),
+                            children: flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
+                          },
+                          cell$1.id
+                        )),
+                        columnVirtualizer.options.enabled && virtualColumnsOffset > 0 && /* @__PURE__ */ jsx(TableCell, { style: { width: virtualColumnsOffset } }),
+                        (columnVirtualizer.options.enabled ? virtualColumns.map((virtualCell) => {
+                          const cells = row.getCenterVisibleCells();
+                          return cells[virtualCell.index];
+                        }) : row.getCenterVisibleCells()).map((cell$1) => /* @__PURE__ */ jsx(
+                          TableCell,
+                          {
+                            size,
+                            bordered,
+                            justifyContent: cell$1.column.columnDef.meta?.align,
+                            style: {
+                              ...assignInlineVars({
+                                [cellSizeVar]: `${cell$1.column.getSize()}`
+                              })
+                            },
+                            className: cn(
+                              cell({
+                                resizable: cell$1.column.getCanResize()
+                              })
+                            ),
+                            children: flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
+                          },
+                          cell$1.id
+                        )),
+                        row.getRightVisibleCells().map((cell$1) => /* @__PURE__ */ jsx(
+                          TableCell,
+                          {
+                            size,
+                            bordered,
+                            justifyContent: cell$1.column.columnDef.meta?.align,
+                            pinned: true,
+                            style: {
+                              ...assignInlineVars({
+                                [cellOffsetVar]: `${cell$1.column.getStart("right")}px`,
+                                [cellSizeVar]: `${cell$1.column.getSize()}`
+                              })
+                            },
+                            className: cn(
+                              cell({
+                                pinned: "right",
+                                resizable: cell$1.column.getCanResize()
+                              })
+                            ),
+                            children: flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
+                          },
+                          cell$1.id
+                        ))
+                      ]
+                    },
+                    row.id
+                  ))
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+DataTableBody.displayName = "DataTableBody";
+
+export { DataTableBody };

package/dist/vanilla/src/data-table/DataTableCheckbox.js

@@ -0,0 +1,48 @@
+import { jsx, Fragment } from '@emotion/react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef, useId, useEffect } from 'react';
+import { useDOMRef } from '../components/utils/useDOMRef.js';
+import CheckBox from '../components/Controls/CheckBox/CheckBox.js';
+import { useDataTableContext } from './DataTableContext.js';
+import { useDataTableRowContext } from './DataTableRowContext.js';
+
+const DataTableCheckbox = forwardRef(
+  ({ children, isDisabled, ...props }, ref) => {
+    const { table } = useDataTableContext();
+    const { labelId, row, setSelector } = useDataTableRowContext();
+    const labelPrefixId = useId();
+    const domRef = useDOMRef(ref);
+    useEffect(() => {
+      if (!setSelector) {
+        return;
+      }
+      if (!isDisabled) {
+        setSelector(domRef);
+      }
+      return () => setSelector(void 0);
+    }, [isDisabled, domRef, setSelector]);
+    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+      CheckBox,
+      {
+        "aria-label": !row ? "Select all" : void 0,
+        "aria-labelledby": row && clsx(labelPrefixId, labelId),
+        isSelected: row ? row.getIsSelected() : table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected(),
+        isDisabled,
+        isIndeterminate: !row && table.getIsSomePageRowsSelected(),
+        onChange: (isSelected) => {
+          if (row) {
+            row.toggleSelected(isSelected);
+          } else {
+            table.toggleAllPageRowsSelected(isSelected);
+          }
+        },
+        ref: domRef,
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+DataTableCheckbox.displayName = "DataTableCheckbox";
+
+export { DataTableCheckbox };

package/dist/vanilla/src/data-table/DataTableContext.js

@@ -0,0 +1,19 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { createContext, useContext } from 'react';
+
+const DataTableContext = createContext(null);
+function DataTableProvider({
+  children,
+  ...value
+}) {
+  return /* @__PURE__ */ jsx(DataTableContext.Provider, { value, children });
+}
+function useDataTableContext() {
+  const context = useContext(DataTableContext);
+  if (context === null) {
+    throw new Error("useDataTableContext must be used within a DataTableProvider");
+  }
+  return context;
+}
+
+export { DataTableProvider, useDataTableContext };

package/dist/vanilla/src/data-table/DataTableEditColumns.js

@@ -0,0 +1,82 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { useMemo } from 'react';
+import Button from '../components/Button/Button.js';
+import '../components/Controls/Radio/Radio.js';
+import '../components/Controls/Radio/components/RadioGroup/RadioGroup.js';
+import '../components/Controls/Radio/components/RadioGroup/RadioGroupContext.js';
+import '../components/Controls/CheckBox/CheckBox.js';
+import Switch from '../components/Controls/Switch/Switch.js';
+import { Box } from '../../Box/Box.js';
+import '../sprinkles/sprinkles.js';
+import { Menu, MenuTrigger, MenuContent, MenuItem, MenuLabel } from '../../Menu/Menu.js';
+import { Text } from '../../Text/Text.js';
+import { useDataTableContext } from './DataTableContext.js';
+
+function DataTableEditColumns() {
+  const { table } = useDataTableContext();
+  const allColumns = table.getAllColumns();
+  const hidableColumns = allColumns.filter((column) => column.getCanHide());
+  const selectedColumns = useMemo(() => {
+    const selected = /* @__PURE__ */ new Set();
+    for (const column of hidableColumns) {
+      if (column.getIsVisible()) {
+        selected.add(column.id);
+      }
+    }
+    return selected;
+  }, [hidableColumns]);
+  const handleSelectionChange = (keys) => {
+    const newVisibility = {};
+    for (const column of hidableColumns) {
+      if (keys === "all") {
+        newVisibility[column.id] = true;
+      } else {
+        newVisibility[column.id] = keys.has(column.id);
+      }
+    }
+    table.setColumnVisibility(newVisibility);
+  };
+  return /* @__PURE__ */ jsxs(Menu, { children: [
+    /* @__PURE__ */ jsx(MenuTrigger, { children: /* @__PURE__ */ jsx(Button, { type: "secondary", size: "compact", iconLeftName: "columnChooser", children: "Edit columns" }) }),
+    /* @__PURE__ */ jsx(
+      MenuContent,
+      {
+        selectionMode: "multiple",
+        popover: { placement: "bottom right" },
+        style: { minWidth: "280px" },
+        selectedKeys: selectedColumns,
+        onSelectionChange: handleSelectionChange,
+        children: allColumns.map((column) => {
+          const canHide = column.getCanHide();
+          const isSelected = canHide ? selectedColumns.has(column.id) : true;
+          const label = column.columnDef.meta?.label;
+          if (!label) {
+            return null;
+          }
+          return /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              id: column.id,
+              isDisabled: !canHide,
+              style: !canHide ? { cursor: "not-allowed" } : void 0,
+              children: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: "sm", children: [
+                /* @__PURE__ */ jsx(MenuLabel, { children: /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    color: !canHide ? "inverted.secondary" : isSelected ? "active" : "primary",
+                    typography: isSelected ? "label02" : "body02",
+                    children: label
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(Switch, { isSelected, isDisabled: !canHide })
+              ] })
+            },
+            column.id
+          );
+        })
+      }
+    )
+  ] });
+}
+
+export { DataTableEditColumns };

package/dist/vanilla/src/data-table/DataTableHeader.js

@@ -0,0 +1,33 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../../Box/Box.js';
+import '../sprinkles/sprinkles.js';
+
+const DataTableHeader = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        ref,
+        bg: "default",
+        px: "lg",
+        py: "sm",
+        h: "11",
+        borderT: "1",
+        borderL: "1",
+        borderR: "1",
+        borderColor: "decorative.default",
+        roundedT: "2",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        w: "full",
+        ...props,
+        children
+      }
+    );
+  }
+);
+DataTableHeader.displayName = "DataTableHeader";
+
+export { DataTableHeader };

package/dist/vanilla/src/data-table/DataTableHeaderCell-css.js

@@ -0,0 +1,14 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-CBkaYCBT.css';
+import './../../assets/src/vanilla-extract/global.css.ts.vanilla-BHTgxO8_.css';
+import './../../assets/src/sprinkles/properties.css.ts.vanilla-C8hqLKur.css';
+import './../../assets/src/vanilla/Table/TableHeader.css.ts.vanilla-2yw_MsU1.css';
+import './../../assets/src/vanilla/Table/TableRow.css.ts.vanilla-B1NNK8v8.css';
+import './../../assets/src/vanilla/Table/TableHeaderCell.css.ts.vanilla-CZtubUTB.css';
+import './../../assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-B2HJ86a7.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var handle = createRuntimeFn({defaultClassName:'_146hxcf94 _146hxcf1w2 _16lgdksa',variantClassNames:{resizing:{false:'_16lgdksc',true:'_146hxcf1we'}},defaultVariants:{},compoundVariants:[]});
+createRuntimeFn({defaultClassName:'_146hxcf7w _146hxcfw0 _146hxcfyk _16lgdks4',variantClassNames:{active:{false:'_16lgdks5',true:'_16lgdks6'}},defaultVariants:{},compoundVariants:[]});
+var label = createRuntimeFn({defaultClassName:'_16lgdks0',variantClassNames:{sortDir:{false:'_16lgdks2',true:'_16lgdks3'}},defaultVariants:{},compoundVariants:[]});
+
+export { handle, label };

package/dist/vanilla/src/data-table/DataTableHeaderCell.js

@@ -0,0 +1,197 @@
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Menu, MenuTrigger, MenuContent, MenuItem, MenuSeparator } from '../../Menu/Menu.js';
+import { ActionsContent } from '../actions/ActionsContent.js';
+import { ActionsRoot } from '../actions/ActionsRoot.js';
+import '../components/Controls/Radio/Radio.js';
+import '../components/Controls/Radio/components/RadioGroup/RadioGroup.js';
+import '../components/Controls/Radio/components/RadioGroup/RadioGroupContext.js';
+import '../components/Controls/CheckBox/CheckBox.js';
+import Switch from '../components/Controls/Switch/Switch.js';
+import IconButton from '../components/IconButton/IconButton.js';
+import { Icon } from '../icon/Icon.js';
+import { cn } from '../utils/cn.js';
+import { Box } from '../../Box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../../Table/Table.js';
+import '../../Table/TableBody.js';
+import '../../Table/TableCell.js';
+import '../../Table/TableFooter.js';
+import '../../Table/TableHeader.js';
+import { TableHeaderCell } from '../../Table/TableHeaderCell.js';
+import '../../Table/TableRow.js';
+import { Text } from '../../Text/Text.js';
+import { Tooltip, TooltipTrigger, TooltipContent } from '../../Tooltip/Tooltip.js';
+import { handle, label } from './DataTableHeaderCell-css.js';
+
+const DataTableHeaderCell = forwardRef(
+  ({ children, header, ...props }, ref) => {
+    const sortDir = header.column.getIsSorted();
+    const flexDir = header.column.columnDef.meta?.align === "flex-end" ? "row-reverse" : "row";
+    return /* @__PURE__ */ jsx(ActionsRoot, { asChild: true, children: /* @__PURE__ */ jsx(
+      TableHeaderCell,
+      {
+        "aria-sort": getAriaSort(header.column.getCanSort(), sortDir),
+        colSpan: header.colSpan,
+        ref,
+        "data-test": true,
+        ...props,
+        children: typeof children !== "string" || !header.column.getCanSort() ? children : /* @__PURE__ */ jsxs(
+          Box,
+          {
+            display: "flex",
+            alignItems: "center",
+            gap: "sm",
+            justifyContent: "space-between",
+            flex: "1",
+            flexDirection: flexDir,
+            children: [
+              /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: "sm", flexDirection: flexDir, children: [
+                header.column.getCanResize() && /* @__PURE__ */ jsx(
+                  ActionsContent,
+                  {
+                    asChild: true,
+                    visible: header.column.getIsResizing() ? "always" : "if-needed",
+                    children: /* @__PURE__ */ jsx(
+                      Box,
+                      {
+                        onDoubleClick: () => header.column.resetSize(),
+                        onPointerDown: (event) => {
+                          event.currentTarget.setPointerCapture(event.pointerId);
+                          header.getResizeHandler()(event);
+                        },
+                        style: {
+                          transform: header.getContext().table.options.columnResizeMode === "onEnd" && header.column.getIsResizing() ? `translateX(${header.getContext().table.getState().columnSizingInfo.deltaOffset}px)` : ""
+                        },
+                        className: cn(handle({ resizing: header.column.getIsResizing() }))
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxs(Tooltip, { auto: true, children: [
+                  /* @__PURE__ */ jsx(TooltipTrigger, { children: /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      role: "button",
+                      lineClamp: "1",
+                      className: label({ sortDir: !!sortDir }),
+                      children
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(TooltipContent, { children })
+                ] }),
+                header.column.columnDef.meta?.tooltip && /* @__PURE__ */ jsxs(Tooltip, { children: [
+                  /* @__PURE__ */ jsx(TooltipTrigger, { children: /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", size: "3", children: /* @__PURE__ */ jsx(Icon, { name: "informational", size: "xs", color: "secondary" }) }) }),
+                  /* @__PURE__ */ jsx(TooltipContent, { maxW: "22", children: header.column.columnDef.meta.tooltip })
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  ActionsContent,
+                  {
+                    display: "grid",
+                    placeItems: "center",
+                    position: "relative",
+                    visible: sortDir ? "always" : "if-needed",
+                    flexDirection: flexDir,
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        IconButton,
+                        {
+                          onClick: () => header.column.toggleSorting(void 0, header.column.getCanMultiSort()),
+                          type: "tertiary",
+                          size: "compact",
+                          iconName: getSortIcon(sortDir)
+                        }
+                      ),
+                      header.column.getCanMultiSort() && header.column.getSortIndex() > -1 && /* @__PURE__ */ jsx(
+                        Text,
+                        {
+                          typography: "label04",
+                          color: "primary",
+                          position: "absolute",
+                          pointerEvents: "none",
+                          style: { top: 0, right: 0 },
+                          children: header.column.getSortIndex() + 1
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(ActionsContent, { visible: sortDir ? "always" : "if-needed", children: /* @__PURE__ */ jsxs(Menu, { children: [
+                /* @__PURE__ */ jsx(MenuTrigger, { children: /* @__PURE__ */ jsx(IconButton, { type: "tertiary", size: "compact", iconName: "moreOptions" }) }),
+                /* @__PURE__ */ jsxs(MenuContent, { style: { minWidth: "220px" }, children: [
+                  /* @__PURE__ */ jsx(MenuItem, { onAction: () => header.column.toggleSorting(true), children: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: "sm", children: [
+                    /* @__PURE__ */ jsx(Icon, { name: "sortDescending" }),
+                    /* @__PURE__ */ jsx(Text, { typography: "body03", children: "Sort descending (z-a)" })
+                  ] }) }),
+                  /* @__PURE__ */ jsx(MenuItem, { onAction: () => header.column.toggleSorting(false), children: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: "sm", children: [
+                    /* @__PURE__ */ jsx(Icon, { name: "sortAscending" }),
+                    /* @__PURE__ */ jsx(Text, { typography: "body03", children: "Sort ascending (a-z)" })
+                  ] }) }),
+                  header.column.getCanPin() && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(MenuSeparator, {}),
+                    /* @__PURE__ */ jsx(
+                      MenuItem,
+                      {
+                        onAction: () => {
+                          const isPinnedLeft = header.column.getIsPinned() === "left";
+                          header.column.pin(isPinnedLeft ? false : "left");
+                        },
+                        children: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: "sm", w: "full", children: [
+                          /* @__PURE__ */ jsx(Icon, { name: "freeze" }),
+                          /* @__PURE__ */ jsx(Text, { typography: "body03", children: "Freeze column (left)" }),
+                          /* @__PURE__ */ jsx(Box, { flex: "1" }),
+                          /* @__PURE__ */ jsx(
+                            Switch,
+                            {
+                              isSelected: header.column.getIsPinned() === "left",
+                              isReadOnly: true
+                            }
+                          )
+                        ] })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      MenuItem,
+                      {
+                        onAction: () => {
+                          const isPinnedRight = header.column.getIsPinned() === "right";
+                          header.column.pin(isPinnedRight ? false : "right");
+                        },
+                        children: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: "sm", w: "full", children: [
+                          /* @__PURE__ */ jsx(Icon, { name: "freeze" }),
+                          /* @__PURE__ */ jsx(Text, { typography: "body03", children: "Freeze column (right)" }),
+                          /* @__PURE__ */ jsx(Box, { flex: "1" }),
+                          /* @__PURE__ */ jsx(
+                            Switch,
+                            {
+                              isSelected: header.column.getIsPinned() === "right",
+                              isReadOnly: true
+                            }
+                          )
+                        ] })
+                      }
+                    )
+                  ] })
+                ] })
+              ] }) })
+            ]
+          }
+        )
+      }
+    ) });
+  }
+);
+DataTableHeaderCell.displayName = "DataTableHeaderCell";
+const getAriaSort = (canSort, sortDir) => {
+  if (!canSort) return void 0;
+  if (sortDir === false) return "none";
+  return sortDir === "asc" ? "ascending" : "descending";
+};
+const getSortIcon = (sortDir) => {
+  if (sortDir === "asc") return "arrowUp";
+  if (sortDir === "desc") return "arrowDown";
+  return "sort";
+};
+
+export { DataTableHeaderCell };