@eyesee/ui-components 0.15.1 → 0.17.0

package/dist/components/Button/Button.js

@@ -1,7 +1,7 @@
 import { jsxs as m, jsx as r } from "react/jsx-runtime";
-import { useState as E, useRef as L, useEffect as R } from "react";
+import { useState as L, useRef as R, useEffect as S } from "react";
 import p from "clsx";
-import { ChevronDownIcon as S } from "../icons-v2/ChevronDownIcon.js";
+import { ChevronDownIcon as W } from "../icons-v2/ChevronDownIcon.js";
 import { ChevronUpIcon as A } from "../icons-v2/ChevronUpIcon.js";
 import U from "../../hooks/useClickOutside.js";
 import { ListItem as q } from "../ListItem/ListItem.js";
@@ -13,36 +13,36 @@ function Z({
   options: f = [],
   onClick: u = () => {
   },
-  className: v,
+  className: N,
   iconSize: h = "m",
-  size: N = "md",
-  variant: O = "primary",
-  type: g = "fill",
+  size: O = "md",
+  variant: g = "primary",
+  type: y = "fill",
   pressed: d = !1,
   icon: s = null,
   tooltipContent: b = null,
-  tooltipTitle: y,
+  tooltipTitle: D,
   disabled: i = !1,
-  fullWidth: D = !1,
+  fullWidth: I = !1,
   dropdownAlign: x = "start",
   tooltipProps: k = { position: "bottom", variant: "light" },
   dropdownCustomContent: c = null,
   ...B
 }) {
-  const [l, o] = E(!1), I = L(null);
-  U(I, () => o(!1));
+  const [l, o] = L(!1), w = R(null);
+  U(w, () => o(!1));
   const T = (n) => {
     u(n), o(!1);
   };
-  R(() => {
+  S(() => {
     i && l && o(!1);
   }, [i, l]);
-  const t = f.length > 0 || !!c, W = s && !a && !t, j = s && !a, C = !!b, w = /* @__PURE__ */ m(
+  const t = f.length > 0 || !!c, j = s && !a && !t, C = s && !a, E = !!b, v = /* @__PURE__ */ m(
     "div",
     {
-      ref: I,
+      ref: w,
       "data-button-wrapper": !0,
-      className: p(e.wrapper, v, D && e.fullWidth),
+      className: p(e.wrapper, N, I && e.fullWidth),
       ...B,
       children: [
         /* @__PURE__ */ m(
@@ -51,12 +51,12 @@ function Z({
             type: "button",
             className: p(
               e.button,
-              e[N],
               e[O],
               e[g],
+              e[y],
               t && e.hasDropdown,
-              W && e.iconOnly,
-              j && e.isIcon,
+              j && e.iconOnly,
+              C && e.isIcon,
               d && e.pressed
             ),
             onClick: () => t ? o((n) => !n) : u(),
@@ -78,7 +78,7 @@ function Z({
                   ]
                 }
               ),
-              t && /* @__PURE__ */ r("span", { className: e.buttonArrow, children: l ? /* @__PURE__ */ r(A, { iconSize: h }) : /* @__PURE__ */ r(S, { iconSize: h }) })
+              t && /* @__PURE__ */ r("span", { className: e.buttonArrow, children: l ? /* @__PURE__ */ r(A, { iconSize: h }) : /* @__PURE__ */ r(W, { iconSize: h }) })
             ]
           }
         ),
@@ -98,7 +98,7 @@ function Z({
       ]
     }
   );
-  return C ? /* @__PURE__ */ r(F, { title: y, content: b, ...k, children: w }) : w;
+  return E ? /* @__PURE__ */ r(F, { title: D, content: b, ...k, fullWidth: I, children: v }) : v;
 }
 export {
   Z as Button

package/dist/components/ImagePlaceholder/ImageHoverPreview/ImageHoverPreview.js

@@ -1,65 +1,58 @@
-import { jsxs as f, Fragment as p, jsx as m } from "react/jsx-runtime";
-import { useRef as I, useState as E } from "react";
-import { createPortal as M } from "react-dom";
-import P from "../ImagePlaceholder.js";
-import u from "./ImageHoverPreview.module.scss.js";
-const w = 200, r = 8, d = 8, x = () => document.getElementById("modal") ?? document.body, g = (t, e, a) => Math.min(Math.max(t, e), a);
-function j({ previewSize: t = w, ...e }) {
-  const a = I(null), [s, i] = E(null);
+import { jsxs as f, Fragment as p, jsx as i } from "react/jsx-runtime";
+import { useRef as P, useState as I } from "react";
+import { createPortal as E } from "react-dom";
+import u from "../ImagePlaceholder.js";
+import M from "./ImageHoverPreview.module.scss.js";
+const w = 200, n = 8, d = 8, A = () => document.getElementById("modal") ?? document.body, h = (t, r, a) => Math.min(Math.max(t, r), a);
+function B({ previewSize: t = w, ...r }) {
+  const a = P(null), [s, m] = I(null);
   return /* @__PURE__ */ f(p, { children: [
-    /* @__PURE__ */ m(
-      P,
+    /* @__PURE__ */ i(
+      u,
       {
-        ...e,
+        ...r,
         imageAreaRef: a,
         onImageAreaMouseEnter: (l) => {
           var c;
           l.stopPropagation();
-          const o = (c = a.current) == null ? void 0 : c.getBoundingClientRect();
-          if (!o) return;
-          let n = o.right + d;
-          n + t > window.innerWidth - r && (n = o.left - t - d), n = g(
+          const e = (c = a.current) == null ? void 0 : c.getBoundingClientRect();
+          if (!e) return;
+          let o = e.right + d;
+          o + t > window.innerWidth - n && (o = e.left - t - d), o = h(
+            o,
             n,
-            r,
-            window.innerWidth - t - r
+            window.innerWidth - t - n
           );
-          const h = g(
-            o.top + o.height / 2 - t / 2,
-            r,
-            window.innerHeight - t - r
+          const g = h(
+            e.top + e.height / 2 - t / 2,
+            n,
+            window.innerHeight - t - n
           );
-          i({ top: h, left: n });
+          m({ top: g, left: o });
         },
         onImageAreaMouseLeave: (l) => {
-          l.stopPropagation(), i(null);
+          l.stopPropagation(), m(null);
         }
       }
     ),
-    s && M(
-      /* @__PURE__ */ m(
+    s && E(
+      /* @__PURE__ */ i(
         "div",
         {
-          className: u.preview,
+          className: M.preview,
           style: {
             top: s.top,
             left: s.left,
             width: t,
             height: t
           },
-          children: /* @__PURE__ */ m(
-            "img",
-            {
-              src: e.url,
-              alt: e.text ?? "",
-              className: u.previewImage
-            }
-          )
+          children: /* @__PURE__ */ i(u, { url: r.url })
         }
       ),
-      x()
+      A()
     )
   ] });
 }
 export {
-  j as ImageHoverPreview
+  B as ImageHoverPreview
 };

package/dist/components/ImagePlaceholder/ImageHoverPreview/ImageHoverPreview.module.scss.js

@@ -1,9 +1,7 @@
-const e = "_preview_18mb5_3", p = "_previewImage_18mb5_12", r = {
-  preview: e,
-  previewImage: p
+const e = "_preview_10zam_3", t = {
+  preview: e
 };
 export {
-  r as default,
-  e as preview,
-  p as previewImage
+  t as default,
+  e as preview
 };

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,225 @@
+/**
+ * Flexible table with per-column custom headers and cells, plus optional infinite scroll.
+ *
+ * @param {TableProps} props
+ * @returns {import('react').ReactElement}
+ *
+ * @example <caption>Columns, rows, infinite scroll</caption>
+ * import { Button, Checkbox, Table } from '@eyesee/ui-components';
+ *
+ * const columns = [
+ *   {
+ *     id: 'select',
+ *     width: 'max-content',
+ *     align: 'center',
+ *     renderHeader: () => <Checkbox aria-label="Select all" />,
+ *     renderCell: (row, rowIndex) => (
+ *       <Checkbox checked={row.selected} aria-label={`Select row ${rowIndex + 1}`} />
+ *     ),
+ *   },
+ *   {
+ *     id: 'name',
+ *     headerTitle: 'Product',
+ *     renderCell: (row, rowIndex, column) => row.name,
+ *   },
+ *   {
+ *     id: 'qty',
+ *     width: 96,
+ *     align: 'end',
+ *     renderHeader: (column) => <strong>{column.headerTitle ?? 'Qty'}</strong>,
+ *     headerTitle: 'Qty',
+ *     renderCell: (row) => row.qty,
+ *   },
+ *   {
+ *     id: 'actions',
+ *     width: '10rem',
+ *     align: 'center',
+ *     renderHeader: () => null,
+ *     renderCell: (row) => <Button text="Edit" onClick={() => editRow(row.id)} />,
+ *   },
+ * ];
+ *
+ * // Shape is yours — fields below match only what `columns` / callbacks read.
+ * const rows = [
+ *   { id: 1, name: 'Granola pack', qty: 12, selected: true },
+ *   { id: 2, name: 'Shelf display', qty: 3, selected: false },
+ * ];
+ *
+ * <Table
+ *   aria-label="Orders"
+ *   rowHeight={80}
+ *   headerHeight={56}
+ *   columns={columns}
+ *   rows={rows}
+ *   getRowKey={(row) => row.id}
+ *   isRowSubtle={(row) => row.selected}
+ *   hasMore={hasNextPage}
+ *   isLoadingMore={isFetchingNextPage}
+ *   onLoadMore={fetchNextPage}
+ *   loadMoreThreshold={50}
+ *   loadingMoreContent="Loading more…"
+ * />
+ *
+ * @example <caption>Client-side sort</caption>
+ * import { Table, useTableClientSort } from '@eyesee/ui-components';
+ *
+ * const sortableColumns = [
+ *   {
+ *     id: 'name',
+ *     headerTitle: 'Product',
+ *     sortable: true,
+ *     sortValue: (row) => row.name,
+ *     renderCell: (row) => row.name,
+ *   },
+ * ];
+ *
+ * const { sort, onSortChange, sortedRows } = useTableClientSort({
+ *   rows,
+ *   columns: sortableColumns,
+ * });
+ *
+ * <Table
+ *   aria-label="Orders"
+ *   columns={sortableColumns}
+ *   rows={sortedRows}
+ *   sort={sort}
+ *   onSortChange={onSortChange}
+ * />
+ *
+ * @example <caption>Server-side sort (fetch in parent)</caption>
+ * <Table
+ *   aria-label="Orders"
+ *   columns={sortableColumns}
+ *   rows={rowsFromApi}
+ *   sort={sort}
+ *   onSortChange={handleSortChange}
+ *   isSortLoading={isFetchingSort}
+ *   sortError={sortFetchError}
+ * />
+ */
+export function Table({ columns, rows, getRowKey, "aria-label": ariaLabel, hasMore, isLoadingMore, onLoadMore, loadMoreThreshold, loadingMoreContent, isRowSubtle, rowHeight, headerHeight, sort, onSortChange, isSortLoading, sortError, }: TableProps): import("react").ReactElement;
+export type TableColumn = {
+    /**
+     *   Unique column key.
+     */
+    id: string;
+    /**
+     * Default header label when `renderHeader` is omitted.
+     */
+    headerTitle?: string;
+    /**
+     * Custom header cell content. Receives the column definition.
+     */
+    renderHeader?: (column: TableColumn) => import("react").ReactNode;
+    /**
+     *   Custom body cell content.
+     */
+    renderCell: (row: any, rowIndex: number, column: TableColumn) => import("react").ReactNode;
+    /**
+     * Column width (e.g. `128`, `'128px'`, `'max-content'`). Omit `width` for a fluid column that
+     * shares remaining space.
+     */
+    width?: string | number;
+    /**
+     * Horizontal alignment inside the cell. Default `'start'`.
+     */
+    align?: "start" | "center" | "end";
+    /**
+     * When true and `onSortChange` is set on {@link Table}, the default header (`headerTitle`) is
+     * sort arrows (up applies/clears asc, down applies/clears desc). Custom `renderHeader` must wire
+     * sort UI yourself; `aria-sort` is still applied on the column header.
+     */
+    sortable?: boolean;
+    /**
+     * Used with {@link useTableClientSort} / {@link sortTableRows} for client-side sort (not read by
+     * {@link Table} itself).
+     */
+    sortValue?: (row: any) => string | number | null | undefined;
+};
+export type TableSort = {
+    /**
+     *   Active sort column id.
+     */
+    columnId: string;
+    /**
+     *   Sort direction.
+     */
+    direction: "asc" | "desc";
+};
+export type TableSortChangeHandler = (sort: TableSort | null) => void;
+export type TableLoadMoreHandler = () => void;
+export type TableRowKeyGetter = (row: any, index: number) => string | number;
+export type TableRowSubtlePredicate = (row: any, index: number) => boolean;
+export type TableProps = {
+    /**
+     *   Column definitions (order defines layout).
+     */
+    columns: TableColumn[];
+    /**
+     *   Arbitrary row objects from your app. `Table` does not read fixed keys — only what you use in
+     *   `renderCell`, `getRowKey`, and `isRowSubtle`.
+     */
+    rows: any[];
+    /**
+     * Stable React key per row. Default uses `row.id` or the row index.
+     */
+    getRowKey?: TableRowKeyGetter;
+    /**
+     * Accessible name for the table region. Parent must define height (`height: 100%` or flex
+     * child with `flex: 1` and `min-height: 0`) so the table can fill it and scroll internally.
+     */
+    "aria-label"?: string;
+    /**
+     * When true, scrolling near the bottom can trigger `onLoadMore`. Default `false`.
+     */
+    hasMore?: boolean;
+    /**
+     * Suppresses duplicate `onLoadMore` calls while a page is loading. Default `false`.
+     */
+    isLoadingMore?: boolean;
+    /**
+     * Called when the user scrolls within `loadMoreThreshold` px of the bottom.
+     */
+    onLoadMore?: TableLoadMoreHandler;
+    /**
+     * Distance from the bottom (px) that triggers `onLoadMore`. Default `50`.
+     */
+    loadMoreThreshold?: number;
+    /**
+     * Shown at the bottom while `isLoadingMore` is true.
+     */
+    loadingMoreContent?: import("react").ReactNode;
+    /**
+     * When true for a row, applies the subtle background (selected/highlight row).
+     */
+    isRowSubtle?: TableRowSubtlePredicate;
+    /**
+     * Fixed body row height (e.g. `80`). Default `80`.
+     */
+    rowHeight?: string | number;
+    /**
+     * Fixed header row height (e.g. `56`). Default `56`.
+     */
+    headerHeight?: string | number;
+    /**
+     * Active sort (controlled). Default `null`.
+     */
+    sort?: TableSort | null;
+    /**
+     * Fired when sort arrows are used. Update `sort` and supply `rows` (e.g. fetch sorted data from
+     * the server, or use {@link useTableClientSort} and pass `sortedRows`).
+     */
+    onSortChange?: TableSortChangeHandler;
+    /**
+     * When true (e.g. while fetching server-sorted `rows`), body rows are hidden and a loader is
+     * shown until new data arrives. Default `false`.
+     */
+    isSortLoading?: boolean;
+    /**
+     * When set (and not `isSortLoading`), body rows are hidden and an error message is shown instead
+     * (same slot as the sort loader). Clear on retry or the next successful fetch. Default
+     * `undefined`.
+     */
+    sortError?: import("react").ReactNode;
+};
+export { getTableSortFromArrowClick, sortTableRows } from "./tableSort/tableSortUtils";

package/dist/components/Table/Table.js

@@ -0,0 +1,135 @@
+import { jsx as t, jsxs as C } from "react/jsx-runtime";
+import { useRef as I, useCallback as K, useEffect as R } from "react";
+import d from "clsx";
+import { LoaderIcon as W } from "../icons-v2/LoaderIcon.js";
+import { renderTableColumnHeader as $ } from "./TableColumnHeader/TableColumnHeader.js";
+import r from "./Table.module.scss.js";
+import { Infobox as q } from "../Infobox/Infobox.js";
+function v(e) {
+  if (e != null)
+    return typeof e == "number" ? `${e}px` : e;
+}
+function D(e) {
+  return e.map((a) => a.width == null ? "minmax(0, 1fr)" : v(a.width)).join(" ");
+}
+function x(e) {
+  if (e === "start") return r.alignStart;
+  if (e === "center") return r.alignCenter;
+  if (e === "end") return r.alignEnd;
+}
+function J(e, a) {
+  if (e.sortable)
+    return !a || a.columnId !== e.id ? "none" : a.direction === "asc" ? "ascending" : "descending";
+}
+function Y({
+  columns: e,
+  rows: a,
+  getRowKey: T = (n, h) => (n == null ? void 0 : n.id) ?? h,
+  "aria-label": j,
+  hasMore: b = !1,
+  isLoadingMore: c = !1,
+  onLoadMore: f,
+  loadMoreThreshold: g = 50,
+  loadingMoreContent: k = "Loading…",
+  isRowSubtle: u,
+  rowHeight: w = 80,
+  headerHeight: B = 56,
+  sort: N = null,
+  onSortChange: H,
+  isSortLoading: i = !1,
+  sortError: m
+}) {
+  const n = I(!1), h = K(
+    (l) => {
+      if (!b || c || i || !f)
+        return;
+      const s = l.currentTarget;
+      if (s.scrollHeight - s.scrollTop - s.clientHeight > g) {
+        n.current = !1;
+        return;
+      }
+      n.current || (n.current = !0, f());
+    },
+    [b, c, i, g, f]
+  );
+  R(() => {
+    c || (n.current = !1);
+  }, [c]);
+  const A = D(e), F = { height: v(B) }, z = { height: v(w) }, E = i || !!m;
+  let p = null;
+  return i ? p = /* @__PURE__ */ t(
+    W,
+    {
+      iconSize: "xl",
+      strokeColor: "var(--color--text--default--body-lighter)",
+      animated: !0
+    }
+  ) : m && (p = /* @__PURE__ */ t(q, { title: "Error sorting table", text: m, status: "error", fullWidth: !0 })), /* @__PURE__ */ t("div", { className: r.table, children: /* @__PURE__ */ C(
+    "div",
+    {
+      className: r.scrollArea,
+      onScroll: h,
+      role: "table",
+      "aria-label": j,
+      "aria-busy": i || void 0,
+      children: [
+        /* @__PURE__ */ C("div", { className: r.gridTable, style: { gridTemplateColumns: A }, children: [
+          /* @__PURE__ */ t("div", { role: "rowgroup", className: r.rowgroup, children: /* @__PURE__ */ t("div", { className: r.header, role: "row", style: F, children: e.map((l) => /* @__PURE__ */ t(
+            "div",
+            {
+              role: "columnheader",
+              "aria-sort": J(l, N),
+              className: d(
+                r.cell,
+                x(l.align ?? "start")
+              ),
+              children: $(
+                l,
+                N,
+                H,
+                i
+              )
+            },
+            l.id
+          )) }) }),
+          /* @__PURE__ */ t("div", { className: r.body, role: "rowgroup", children: E ? /* @__PURE__ */ t("div", { role: "row", className: d(r.row, r.statusRow), children: /* @__PURE__ */ t(
+            "div",
+            {
+              role: "cell",
+              className: r.infoContent,
+              "aria-live": i ? "polite" : "assertive",
+              children: p
+            }
+          ) }) : a.map((l, s) => {
+            const y = T(l, s), G = (u == null ? void 0 : u(l, s)) ?? !1;
+            return /* @__PURE__ */ t(
+              "div",
+              {
+                role: "row",
+                className: d(r.row, G && r.subtle),
+                style: z,
+                children: e.map((o) => /* @__PURE__ */ t(
+                  "div",
+                  {
+                    role: "cell",
+                    className: d(
+                      r.cell,
+                      x(o.align ?? "start")
+                    ),
+                    children: o.renderCell(l, s, o)
+                  },
+                  o.id
+                ))
+              },
+              y
+            );
+          }) })
+        ] }),
+        c ? /* @__PURE__ */ t("div", { className: r.loadMore, "aria-live": "polite", children: k }) : null
+      ]
+    }
+  ) });
+}
+export {
+  Y as Table
+};

package/dist/components/Table/Table.module.scss.js

@@ -0,0 +1,33 @@
+const o = "_table_181fo_3", _ = "_scrollArea_181fo_16", n = "_gridTable_181fo_23", t = "_rowgroup_181fo_28", e = "_header_181fo_32", l = "_row_181fo_28", r = "_body_181fo_50", a = "_subtle_181fo_60", s = "_cell_181fo_64", c = "_alignStart_181fo_74", f = "_alignCenter_181fo_77", d = "_alignEnd_181fo_80", g = "_infoContent_181fo_84", i = "_loadMore_181fo_95", b = {
+  table: o,
+  scrollArea: _,
+  gridTable: n,
+  rowgroup: t,
+  header: e,
+  row: l,
+  body: r,
+  subtle: a,
+  cell: s,
+  alignStart: c,
+  alignCenter: f,
+  alignEnd: d,
+  infoContent: g,
+  loadMore: i
+};
+export {
+  f as alignCenter,
+  d as alignEnd,
+  c as alignStart,
+  r as body,
+  s as cell,
+  b as default,
+  n as gridTable,
+  e as header,
+  g as infoContent,
+  i as loadMore,
+  l as row,
+  t as rowgroup,
+  _ as scrollArea,
+  a as subtle,
+  o as table
+};

package/dist/components/Table/TableColumnHeader/TableColumnHeader.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @param {object} props
+ * @param {TableColumnHeaderColumn} props.column
+ * @param {TableSort|null} props.sort
+ * @param {TableSortChangeHandler} props.onSortChange
+ * @param {boolean} [props.isSortLoading]
+ * @returns {import('react').ReactElement}
+ */
+export function TableSortableHeader({ column, sort, onSortChange, isSortLoading }: {
+    column: TableColumnHeaderColumn;
+    sort: TableSort | null;
+    onSortChange: TableSortChangeHandler;
+    isSortLoading?: boolean;
+}): import("react").ReactElement;
+/**
+ * @param {TableColumnHeaderColumn} column
+ * @param {TableSort|null} sort
+ * @param {TableSortChangeHandler} [onSortChange]
+ * @param {boolean} [isSortLoading]
+ * @returns {import('react').ReactNode}
+ */
+export function renderTableColumnHeader(column: TableColumnHeaderColumn, sort: TableSort | null, onSortChange?: TableSortChangeHandler, isSortLoading?: boolean): import("react").ReactNode;
+export type TableColumnHeaderColumn = {
+    id: string;
+    headerTitle?: string;
+    renderHeader?: (column: TableColumnHeaderColumn) => import("react").ReactNode;
+    sortable?: boolean;
+};
+export type TableSort = {
+    columnId: string;
+    direction: "asc" | "desc";
+};
+export type TableSortChangeHandler = (sort: TableSort | null) => void;

package/dist/components/Table/TableColumnHeader/TableColumnHeader.js

@@ -0,0 +1,60 @@
+import { jsx as i, jsxs as l } from "react/jsx-runtime";
+import { ArrowDownIcon as f } from "../../icons-v2/ArrowDownIcon.js";
+import { ArrowUpIcon as p } from "../../icons-v2/ArrowUpIcon.js";
+import { Button as c } from "../../Button/Button.js";
+import { getTableSortFromArrowClick as h } from "../tableSort/tableSortUtils.js";
+import n from "./TableColumnHeader.module.scss.js";
+function b(e) {
+  return e.headerTitle ? /* @__PURE__ */ i("span", { className: n.headerTitle, children: e.headerTitle }) : null;
+}
+function x({ column: e, sort: r, onSortChange: t, isSortLoading: a = !1 }) {
+  const d = (r == null ? void 0 : r.columnId) === e.id ? r.direction : null, s = (o) => {
+    a || t(h(r, e.id, o));
+  };
+  return /* @__PURE__ */ l("div", { className: n.sortHeader, children: [
+    /* @__PURE__ */ i("span", { className: n.headerTitle, children: e.headerTitle }),
+    /* @__PURE__ */ l("span", { className: n.sortIcons, children: [
+      /* @__PURE__ */ i(
+        c,
+        {
+          type: "blank",
+          variant: "neutral",
+          size: "xxxxs",
+          onClick: () => s("asc"),
+          disabled: a,
+          pressed: d === "asc",
+          "aria-label": `Sort ${e.headerTitle} ascending`,
+          icon: /* @__PURE__ */ i(p, { iconSize: "s" })
+        }
+      ),
+      /* @__PURE__ */ i(
+        c,
+        {
+          type: "blank",
+          variant: "neutral",
+          size: "xxxxs",
+          pressed: d === "desc",
+          icon: /* @__PURE__ */ i(f, { iconSize: "s" }),
+          onClick: () => s("desc"),
+          disabled: a,
+          "aria-label": `Sort ${e.headerTitle} descending`
+        }
+      )
+    ] })
+  ] });
+}
+function w(e, r, t, a) {
+  return e.renderHeader ? e.renderHeader(e) : e.sortable && t && e.headerTitle ? /* @__PURE__ */ i(
+    x,
+    {
+      column: e,
+      sort: r,
+      onSortChange: t,
+      isSortLoading: a
+    }
+  ) : b(e);
+}
+export {
+  x as TableSortableHeader,
+  w as renderTableColumnHeader
+};