@geomak/ui 7.0.0 → 7.1.0

package/README.md

@@ -10,9 +10,9 @@
 [![types](https://img.shields.io/npm/types/@geomak/ui?color=0466c8)](https://www.npmjs.com/package/@geomak/ui)
 [![license](https://img.shields.io/npm/l/@geomak/ui?color=0466c8)](./LICENSE)
 [![React 19](https://img.shields.io/badge/React-19-0466c8)](https://react.dev)
-[![Storybook](https://img.shields.io/badge/Storybook-live%20demo-ff4785)](https://oxygen-ui.netlify.app)
+[![Storybook](https://img.shields.io/badge/Storybook-live%20demo-ff4785)](https://oxygenui.com)
 
-### ▶ [Browse the live, interactive demo →](https://oxygen-ui.netlify.app)
+### ▶ [Browse the live, interactive demo →](https://oxygenui.com)
 
 <!-- Tip: drop a Storybook screen-recording here for the launch — docs/assets/preview.gif -->
 
@@ -64,7 +64,7 @@ import { ChevronDown, Search, createIcon } from '@geomak/ui/icons'
 
 ## Components
 
-60+ components across these groups — all with **live controls and a written guide** in [Storybook](https://oxygen-ui.netlify.app).
+60+ components across these groups — all with **live controls and a written guide** in [Storybook](https://oxygenui.com).
 
 | Group | Components |
 |---|---|

package/dist/index.cjs

@@ -5310,22 +5310,78 @@ function createDatasets(rows, perPage) {
 }
 var defaultGetRowKey = (_row, index) => index;
 var cellAlign = (align) => align === "left" ? "text-left" : align === "right" ? "text-right" : "text-center";
+function compareValues(a, b) {
+  if (a == null && b == null) return 0;
+  if (a == null) return -1;
+  if (b == null) return 1;
+  if (typeof a === "number" && typeof b === "number") return a - b;
+  if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
+  if (typeof a === "boolean" && typeof b === "boolean") return a === b ? 0 : a ? 1 : -1;
+  return String(a).localeCompare(String(b), void 0, { numeric: true, sensitivity: "base" });
+}
+function SortGlyph({ direction }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", "aria-hidden": "true", className: "shrink-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M8 11l4-4 4 4",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: direction === "asc" ? "text-accent" : "text-foreground-muted",
+        opacity: direction === "asc" ? 1 : 0.45
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M8 13l4 4 4-4",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: direction === "desc" ? "text-accent" : "text-foreground-muted",
+        opacity: direction === "desc" ? 1 : 0.45
+      }
+    )
+  ] });
+}
 function TableHeader({
   columns,
-  hasExpand
+  hasExpand,
+  sort,
+  onSort
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-surface-raised border-b border-border", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
     hasExpand && /* @__PURE__ */ jsxRuntime.jsx("th", { "aria-hidden": "true", className: "w-9" }),
-    columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
-      "th",
-      {
-        scope: "col",
-        className: `${cellAlign(col.align)} text-sm font-semibold text-foreground py-3 px-3`,
-        style: col.width != null ? { width: col.width } : void 0,
-        children: col.label
-      },
-      col.key
-    ))
+    columns.map((col) => {
+      const active = sort?.key === col.keyBind;
+      const dir = active ? sort.direction : void 0;
+      const justify = col.align === "left" ? "justify-start" : col.align === "right" ? "justify-end" : "justify-center";
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "th",
+        {
+          scope: "col",
+          "aria-sort": col.sortable ? active ? dir === "asc" ? "ascending" : "descending" : "none" : void 0,
+          className: `${cellAlign(col.align)} text-sm font-semibold text-foreground py-3 px-3`,
+          style: col.width != null ? { width: col.width } : void 0,
+          children: col.sortable ? /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => onSort(col),
+              className: `inline-flex items-center gap-1.5 ${justify} w-full select-none rounded transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${active ? "text-accent" : "hover:text-accent"}`,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: col.label }),
+                /* @__PURE__ */ jsxRuntime.jsx(SortGlyph, { direction: dir })
+              ]
+            }
+          ) : col.label
+        },
+        col.key
+      );
+    })
   ] }) });
 }
 var DefaultExpandIcon = /* @__PURE__ */ jsxRuntime.jsx(
@@ -5333,24 +5389,66 @@ var DefaultExpandIcon = /* @__PURE__ */ jsxRuntime.jsx(
   {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
-    fill: "currentColor",
-    className: "w-5 h-5 text-foreground-muted",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    className: "w-4 h-4 text-foreground-muted",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsxRuntime.jsx(
-      "path",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 8.25l-7.5 7.5-7.5-7.5" })
+  }
+);
+function EditableCell({
+  col,
+  row,
+  rowIndex,
+  onCellEdit
+}) {
+  const [editing, setEditing] = React28.useState(false);
+  const value = row[col.keyBind];
+  const commit = (next) => {
+    setEditing(false);
+    onCellEdit?.({ row, key: col.keyBind, value: next, rowIndex });
+  };
+  const cancel = () => setEditing(false);
+  if (editing) {
+    if (col.editor) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: col.editor({ value, row, commit, cancel }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
       {
-        fillRule: "evenodd",
-        d: "M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zM12.75 9a.75.75 0 00-1.5 0v2.25H9a.75.75 0 000 1.5h2.25V15a.75.75 0 001.5 0v-2.25H15a.75.75 0 000-1.5h-2.25V9z",
-        clipRule: "evenodd"
+        autoFocus: true,
+        defaultValue: value == null ? "" : String(value),
+        onBlur: (e) => commit(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            commit(e.target.value);
+          } else if (e.key === "Escape") {
+            e.preventDefault();
+            cancel();
+          }
+        },
+        "aria-label": `Edit ${typeof col.label === "string" ? col.label : col.keyBind}`,
+        className: "w-full rounded border border-accent bg-surface px-2 py-1 text-sm text-foreground outline-none"
       }
-    )
+    );
   }
-);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => setEditing(true),
+      title: "Click to edit",
+      className: `${cellAlign(col.align)} w-full cursor-text rounded px-1 py-0.5 hover:bg-background focus:outline-none focus-visible:ring-2 focus-visible:ring-accent`,
+      children: col.component ? col.component(value, row) : value
+    }
+  );
+}
 function TableBody({
   columns,
   rows,
   expandRow,
-  getRowKey
+  getRowKey,
+  onCellEdit
 }) {
   const [expanded, setExpanded] = React28.useState(() => /* @__PURE__ */ new Set());
   const reduced = framerMotion.useReducedMotion();
@@ -5380,15 +5478,15 @@ function TableBody({
                 onClick: () => toggleRow(rowKey),
                 "aria-expanded": isExpanded,
                 "aria-label": isExpanded ? "Collapse row" : "Expand row",
-                className: `w-9 h-9 inline-flex items-center justify-center rounded-md hover:bg-surface/80 transition-transform duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${isExpanded ? "rotate-180" : ""}`,
-                children: expandRow.expandIcon ?? DefaultExpandIcon
+                className: `w-9 h-9 inline-flex items-center justify-center rounded-md hover:bg-background transition-transform duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${isExpanded && !expandRow.collapseIcon ? "rotate-180" : ""}`,
+                children: isExpanded ? expandRow.collapseIcon ?? expandRow.expandIcon ?? DefaultExpandIcon : expandRow.expandIcon ?? DefaultExpandIcon
               }
             ) }),
             columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
               "td",
               {
                 className: `${cellAlign(col.align)} text-sm text-foreground py-2 px-3 align-middle`,
-                children: col.component ? col.component(row[col.keyBind], row) : row[col.keyBind]
+                children: col.editable ? /* @__PURE__ */ jsxRuntime.jsx(EditableCell, { col, row, rowIndex: i, onCellEdit }) : col.component ? col.component(row[col.keyBind], row) : row[col.keyBind]
               },
               col.key
             ))
@@ -5482,6 +5580,10 @@ function Table({
   pagination = DEFAULT_PAGINATION,
   expandRow = DEFAULT_EXPAND,
   hasSearch = true,
+  search,
+  defaultSort = null,
+  onSortChange,
+  onCellEdit,
   footer = null,
   header = null,
   loading = false,
@@ -5495,20 +5597,54 @@ function Table({
     typeof pagination.perPage === "number" ? pagination.perPage : 15
   );
   const [activePage, setActivePage] = React28.useState(0);
+  const [sortState, setSortState] = React28.useState(defaultSort);
   const isServerSide = !!(pagination.enabled && pagination.serverSide);
+  const handleSort = (col) => {
+    const key = col.keyBind;
+    let next;
+    if (!sortState || sortState.key !== key) next = { key, direction: "asc" };
+    else if (sortState.direction === "asc") next = { key, direction: "desc" };
+    else next = null;
+    setSortState(next);
+    onSortChange?.(next);
+  };
+  const debounceMs = search?.debounceMs ?? 0;
+  const [debouncedTerm, setDebouncedTerm] = React28.useState("");
+  React28.useEffect(() => {
+    if (debounceMs <= 0) {
+      setDebouncedTerm(searchTerm);
+      return;
+    }
+    const t = setTimeout(() => setDebouncedTerm(searchTerm), debounceMs);
+    return () => clearTimeout(t);
+  }, [searchTerm, debounceMs]);
+  const term = debounceMs > 0 ? debouncedTerm : searchTerm;
   const filteredRows = React28.useMemo(() => {
-    if (isServerSide || !searchTerm) return rows;
-    const term = searchTerm.toLowerCase();
-    return rows.filter(
-      (row) => Object.values(row).some(
-        (v) => v != null && String(v).toLowerCase().includes(term)
-      )
-    );
-  }, [rows, searchTerm, isServerSide]);
+    if (isServerSide || !term) return rows;
+    if (search?.predicate) return rows.filter((row) => search.predicate(row, term));
+    const cs = !!search?.caseSensitive;
+    const needle = cs ? term : term.toLowerCase();
+    const mode = search?.matchMode ?? "contains";
+    const keys = search?.keys;
+    const test = (raw) => {
+      if (raw == null) return false;
+      const s = cs ? String(raw) : String(raw).toLowerCase();
+      return mode === "startsWith" ? s.startsWith(needle) : mode === "equals" ? s === needle : s.includes(needle);
+    };
+    return rows.filter((row) => keys ? keys.some((k) => test(row[k])) : Object.values(row).some(test));
+  }, [rows, term, isServerSide, search?.predicate, search?.caseSensitive, search?.matchMode, search?.keys]);
+  const sortedRows = React28.useMemo(() => {
+    if (isServerSide || !sortState) return filteredRows;
+    const col = columns.find((c) => c.keyBind === sortState.key);
+    const accessor = col?.sortAccessor ?? ((r) => r[sortState.key]);
+    const out = [...filteredRows].sort((a, b) => compareValues(accessor(a), accessor(b)));
+    if (sortState.direction === "desc") out.reverse();
+    return out;
+  }, [filteredRows, sortState, isServerSide, columns]);
   const datasets = React28.useMemo(() => {
     if (isServerSide) return [rows];
-    return createDatasets(filteredRows, pagination.enabled ? perPage : null);
-  }, [filteredRows, perPage, pagination.enabled, isServerSide, rows]);
+    return createDatasets(sortedRows, pagination.enabled ? perPage : null);
+  }, [sortedRows, perPage, pagination.enabled, isServerSide, rows]);
   const MAX_PAGE = React28.useMemo(() => {
     if (isServerSide && typeof pagination.maxPage === "number") return Math.max(0, pagination.maxPage);
     if (isServerSide && typeof pagination.totalCount === "number")
@@ -5547,32 +5683,36 @@ function Table({
     }
     setActivePage(newPage);
   };
+  const pagPos = pagination.position ?? "top";
+  const showTopPager = !!pagination.enabled && (pagPos === "top" || pagPos === "both");
+  const showBottomPager = !!pagination.enabled && (pagPos === "bottom" || pagPos === "both");
+  const pager = /* @__PURE__ */ jsxRuntime.jsx(
+    Pagination,
+    {
+      activePage,
+      onPageChange: handlePageChange,
+      maxPage: MAX_PAGE,
+      onPerPageChange: onPaginationChange,
+      options: pagination,
+      serverSide: isServerSide
+    }
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `w-full h-max rounded-lg ${className}`.trim(), style, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
-      hasSearch && /* @__PURE__ */ jsxRuntime.jsx(
+    (hasSearch || showTopPager) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 mb-2", children: [
+      hasSearch ? /* @__PURE__ */ jsxRuntime.jsx(
         SearchInput_default,
         {
           ref: searchRef,
           value: searchTerm,
           onChange: onSearchChange,
-          placeholder: "Search term..."
+          placeholder: search?.placeholder ?? "Search term..."
         }
-      ),
-      pagination.enabled && /* @__PURE__ */ jsxRuntime.jsx(
-        Pagination,
-        {
-          activePage,
-          onPageChange: handlePageChange,
-          maxPage: MAX_PAGE,
-          onPerPageChange: onPaginationChange,
-          options: pagination,
-          serverSide: isServerSide
-        }
-      )
+      ) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+      showTopPager && pager
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { children: header }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full border-collapse", "aria-busy": loading || void 0, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { columns, hasExpand: !!expandRow.enabled }),
+      /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { columns, hasExpand: !!expandRow.enabled, sort: sortState, onSort: handleSort }),
       loading ? /* @__PURE__ */ jsxRuntime.jsx(
         TableSkeletonBody,
         {
@@ -5586,10 +5726,12 @@ function Table({
           columns,
           rows: currentPageRows,
           expandRow,
-          getRowKey
+          getRowKey,
+          onCellEdit
         }
       )
     ] }) }),
+    showBottomPager && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex justify-end", children: pager }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { children: footer })
   ] });
 }