@geomak/ui 1.7.1 → 1.7.3

package/dist/index.js

@@ -1,7 +1,7 @@
 import { colors_default } from './chunk-GKXP6OJJ.js';
 export { colors_default as COLORS, PALETTE as palette, semanticTokens, vars } from './chunk-GKXP6OJJ.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React10, { createContext, useState, useEffect, useMemo, useContext, useRef, useCallback, useId } from 'react';
+import React9, { createContext, useState, useEffect, useMemo, useContext, useRef, useCallback, useId } from 'react';
 import { createPortal } from 'react-dom';
 import * as Dialog from '@radix-ui/react-dialog';
 import { useReducedMotion, AnimatePresence, motion } from 'framer-motion';
@@ -940,39 +940,61 @@ function useNotification() {
     danger: (props) => open({ type: "danger", ...props })
   };
 }
-function LoadingSpinner({ prompt }) {
-  const letterRefs = useMemo(() => [], []);
-  const letters = prompt.split("");
-  useEffect(() => {
-    const timeouts = [];
-    if (letterRefs.length === letters.length) {
-      letterRefs.forEach((ref, index) => {
-        const t = setTimeout(() => {
-          ref?.classList.add("slowly-appear");
-        }, index * 100);
-        timeouts.push(t);
-      });
+var containerVariants = {
+  hidden: {},
+  visible: { transition: { staggerChildren: 0.06 } }
+};
+var letterVariants = {
+  hidden: { opacity: 0, y: 6 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.25, ease: "easeOut" } }
+};
+function LoadingSpinner({
+  prompt,
+  spinnerColor,
+  textColor,
+  backdropOpacity = 0.92
+}) {
+  const reduced = useReducedMotion();
+  const letters = Array.from(prompt);
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": prompt,
+      className: "fixed inset-0 z-[8000000] flex flex-col items-center justify-center gap-6 bg-background",
+      style: { opacity: backdropOpacity },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "w-20 h-20 rounded-2xl border-[6px] border-transparent border-t-current border-r-current animate-spin",
+            style: { color: spinnerColor ?? "var(--color-accent)" },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: "text-3xl font-bold tracking-tight select-none",
+            style: { color: textColor ?? "var(--color-foreground)" },
+            variants: containerVariants,
+            initial: reduced ? "visible" : "hidden",
+            animate: "visible",
+            children: letters.map((letter, index) => /* @__PURE__ */ jsx(
+              motion.span,
+              {
+                className: "inline-block whitespace-pre",
+                variants: letterVariants,
+                children: letter
+              },
+              index
+            ))
+          }
+        )
+      ]
     }
-    return () => timeouts.forEach(clearTimeout);
-  }, [letterRefs, letters.length]);
-  return (
-    // Portaled so the full-screen overlay always covers the real viewport,
-    // not whatever container the consumer renders LoadingSpinner inside.
-    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs("div", { className: "fixed top-0 bottom-0 right-0 left-0 bg-oxford-blue-700-opaque z-[8000000] flex flex-col gap-5 items-center justify-start pt-80", children: [
-      /* @__PURE__ */ jsx("div", { className: "border-r-prussian-blue border-l-prussian-blue border-t-white border-b-white border-[10px] w-[80px] h-[80px] rounded-xl shapeshift" }),
-      /* @__PURE__ */ jsx("div", { className: "text-prussian-blue dark:text-white text-3xl font-bold", children: letters.map((letter, index) => /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: "select-none",
-          ref: (ref) => {
-            letterRefs[index] = ref;
-          },
-          children: letter
-        },
-        index
-      )) })
-    ] }) })
-  );
+  ) });
 }
 function FadingBase({
   className = "",
@@ -1447,7 +1469,7 @@ function Wizard({ children, steps, storageKey = "po_wizard" }) {
     children
   ] });
 }
-var SearchInput = React10.forwardRef(function SearchInput2({
+var SearchInput = React9.forwardRef(function SearchInput2({
   value,
   onChange,
   disabled,
@@ -1669,9 +1691,7 @@ var DEFAULT_PAGINATION = {
   pickerOptions: DEFAULT_PICKER
 };
 var DEFAULT_EXPAND = {
-  enabled: false,
-  expandIcon: /* @__PURE__ */ jsx(Fragment, {}),
-  expandComponent: () => /* @__PURE__ */ jsx(Fragment, {})
+  enabled: false
 };
 function createDatasets(rows, perPage) {
   if (!perPage) return [rows.slice()];
@@ -1681,78 +1701,95 @@ function createDatasets(rows, perPage) {
   }
   return all;
 }
-function TableHeader({ columns }) {
-  return /* @__PURE__ */ jsx("thead", { className: "bg-surface-raised min-h-[50px] border-b border-b-border flex items-center", children: /* @__PURE__ */ jsx("tr", { className: "flex w-full items-center justify-center", children: columns.map((col) => /* @__PURE__ */ jsx(
-    "th",
-    {
-      className: "text-center w-full text-[13px] text-foreground",
-      children: col.label
-    },
-    col.key
-  )) }) });
+var defaultGetRowKey = (_row, index) => index;
+var cellAlign = (align) => align === "left" ? "text-left" : align === "right" ? "text-right" : "text-center";
+function TableHeader({
+  columns,
+  hasExpand
+}) {
+  return /* @__PURE__ */ jsx("thead", { className: "bg-surface-raised border-b border-border", children: /* @__PURE__ */ jsxs("tr", { children: [
+    hasExpand && /* @__PURE__ */ jsx("th", { "aria-hidden": "true", className: "w-9" }),
+    columns.map((col) => /* @__PURE__ */ 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
+    ))
+  ] }) });
 }
+var DefaultExpandIcon = /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    className: "w-5 h-5 text-foreground-muted",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        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"
+      }
+    )
+  }
+);
 function TableBody({
   columns,
   rows,
-  expandRow
+  expandRow,
+  getRowKey
 }) {
-  const [visibleRows, setVisibleRows] = useState({});
+  const [expanded, setExpanded] = useState(() => /* @__PURE__ */ new Set());
   const toggleRow = (rowKey) => {
-    setVisibleRows((prev) => ({
-      ...prev,
-      [rowKey]: { visible: !prev[rowKey]?.visible }
-    }));
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(rowKey)) next.delete(rowKey);
+      else next.add(rowKey);
+      return next;
+    });
   };
-  useEffect(() => {
-    if (rows.length && Object.keys(visibleRows).length === 0) {
-      const initial = {};
-      rows.forEach((row) => {
-        initial[row.key] = { visible: false };
-      });
-      setVisibleRows(initial);
-    }
-  }, [rows]);
-  return /* @__PURE__ */ jsx("tbody", { className: "w-full", children: rows.map((row, i) => /* @__PURE__ */ jsxs(React10.Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      "tr",
-      {
-        className: `border-b border-b-border flex min-w-max hover:bg-surface-raised transition-all duration-150 ${i % 2 === 0 ? "bg-surface" : "bg-surface-raised"}`,
-        children: [
-          expandRow.enabled && /* @__PURE__ */ jsx("td", { className: "flex items-center", children: /* @__PURE__ */ jsx(
-            "span",
-            {
-              onClick: () => toggleRow(row.key),
-              className: `p-2 cursor-pointer origin-center transition-all duration-200 ${visibleRows[row.key]?.visible ? "rotate-180" : "rotate-0"}`,
-              children: expandRow.expandIcon ?? /* PlusCircle */
-              /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-5 h-5 text-foreground-muted", children: /* @__PURE__ */ jsx("path", { 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" }) })
-            }
-          ) }),
-          columns.map((col, index) => /* @__PURE__ */ jsx(
-            "td",
-            {
-              className: `text-center min-h-[40px] w-full flex items-center justify-center p-1 border-border ${index !== columns.length - 1 ? "border-r-2" : ""}`,
-              children: "component" in col && col.component ? col.component(row[col.keyBind], row) : row[col.keyBind]
-            },
-            index
-          ))
-        ]
-      }
-    ),
-    expandRow.enabled && /* @__PURE__ */ jsx(
-      "tr",
-      {
-        className: `overflow-hidden w-full transition-all duration-300 ${visibleRows[row.key]?.visible ? "max-h-[2000px]" : "max-h-0"}`,
-        children: /* @__PURE__ */ jsx("td", { colSpan: columns.length, className: "p-0 pb-1", children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `overflow-hidden w-full transition-[max-height] duration-300 ${visibleRows[row.key]?.visible ? "max-h-[2000px]" : "max-h-0"}`,
-            children: expandRow.expandComponent?.(row)
-          }
-        ) })
-      },
-      `extra-${i}`
-    )
-  ] }, row.key)) });
+  const hasExpand = !!expandRow.enabled;
+  const expandColCount = columns.length + (hasExpand ? 1 : 0);
+  return /* @__PURE__ */ jsx("tbody", { children: rows.map((row, i) => {
+    const rowKey = getRowKey(row, i);
+    const isExpanded = expanded.has(rowKey);
+    return /* @__PURE__ */ jsxs(React9.Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "tr",
+        {
+          className: `border-b border-border hover:bg-surface-raised transition-colors duration-150 ${i % 2 === 0 ? "bg-surface" : "bg-surface-raised"}`,
+          children: [
+            hasExpand && /* @__PURE__ */ jsx("td", { className: "p-0 align-middle w-9", children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                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
+              }
+            ) }),
+            columns.map((col) => /* @__PURE__ */ 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]
+              },
+              col.key
+            ))
+          ]
+        }
+      ),
+      hasExpand && isExpanded && /* @__PURE__ */ jsx("tr", { className: "bg-surface", children: /* @__PURE__ */ jsx("td", { colSpan: expandColCount, className: "p-0 border-b border-border", children: /* @__PURE__ */ jsx("div", { className: "p-3", children: expandRow.expandComponent?.(row) }) }) })
+    ] }, rowKey);
+  }) });
 }
 function Pagination({
   activePage,
@@ -1775,29 +1812,27 @@ function Pagination({
     }
   }, [serverSide, options.perPage, picker]);
   const navBtn = (icon, disabled, onClick) => /* @__PURE__ */ jsx(IconButton, { disabled, onClick, icon });
-  const chevronRight = (color) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, className: "h-5 w-5", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
-  const doubleChevronRight = (color) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, className: "h-5 w-5", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 5l7 7-7 7M5 5l7 7-7 7" }) });
-  const disabledColor = "var(--color-foreground-muted)";
-  const enabledColor = "var(--color-foreground)";
+  const chevronRight = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-5 w-5", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
+  const doubleChevronRight = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-5 w-5", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 5l7 7-7 7M5 5l7 7-7 7" }) });
   return /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center justify-end pt-2", children: [
     navBtn(
-      /* @__PURE__ */ jsx("span", { className: "rotate-180 inline-flex", children: doubleChevronRight(activePage === 0 ? disabledColor : enabledColor) }),
+      /* @__PURE__ */ jsx("span", { className: "rotate-180 inline-flex", children: doubleChevronRight }),
       activePage === 0,
       () => onPageChange(0)
     ),
     navBtn(
-      /* @__PURE__ */ jsx("span", { className: "rotate-180 inline-flex", children: chevronRight(activePage === 0 ? disabledColor : enabledColor) }),
+      /* @__PURE__ */ jsx("span", { className: "rotate-180 inline-flex", children: chevronRight }),
       activePage === 0,
       () => activePage > 0 && onPageChange(activePage - 1)
     ),
     /* @__PURE__ */ jsx("span", { className: "bg-surface-raised rounded-lg ml-2 mr-2 shadow-sm p-2 w-10 text-center select-none text-foreground", children: activePage + 1 }),
     navBtn(
-      chevronRight(activePage === maxPage ? disabledColor : enabledColor),
+      chevronRight,
       activePage === maxPage,
       () => activePage < maxPage && onPageChange(activePage + 1)
     ),
     navBtn(
-      doubleChevronRight(activePage === maxPage ? disabledColor : enabledColor),
+      doubleChevronRight,
       activePage === maxPage,
       () => onPageChange(maxPage)
     ),
@@ -1822,6 +1857,7 @@ function Pagination({
 function Table({
   columns = [],
   rows = [],
+  getRowKey = defaultGetRowKey,
   pagination = DEFAULT_PAGINATION,
   expandRow = DEFAULT_EXPAND,
   hasSearch = true,
@@ -1834,8 +1870,20 @@ function Table({
     typeof pagination.perPage === "number" ? pagination.perPage : 15
   );
   const [activePage, setActivePage] = useState(0);
-  const [datasets, setDatasets] = useState([]);
   const isServerSide = !!(pagination.enabled && pagination.serverSide);
+  const filteredRows = 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]);
+  const datasets = useMemo(() => {
+    if (isServerSide) return [rows];
+    return createDatasets(filteredRows, pagination.enabled ? perPage : null);
+  }, [filteredRows, perPage, pagination.enabled, isServerSide, rows]);
   const MAX_PAGE = useMemo(() => {
     if (isServerSide && typeof pagination.maxPage === "number") return Math.max(0, pagination.maxPage);
     if (isServerSide && typeof pagination.totalCount === "number")
@@ -1844,32 +1892,22 @@ function Table({
   }, [isServerSide, pagination.maxPage, pagination.totalCount, perPage, datasets.length]);
   const currentPageRows = useMemo(() => {
     if (isServerSide) return rows;
-    return datasets.length ? datasets[activePage] ?? [] : [];
+    return datasets[activePage] ?? [];
   }, [isServerSide, rows, datasets, activePage]);
   useEffect(() => {
-    if (pagination.enabled && !isServerSide) setPerPage(pagination.perPage ?? 15);
-  }, [pagination, isServerSide]);
+    if (pagination.enabled && !isServerSide && typeof pagination.perPage === "number") {
+      setPerPage(pagination.perPage);
+    }
+  }, [pagination.enabled, pagination.perPage, isServerSide]);
   useEffect(() => {
     if (isServerSide && typeof pagination.perPage === "number") setPerPage(pagination.perPage);
   }, [isServerSide, pagination.perPage]);
-  useEffect(() => {
-    if (isServerSide) return;
-    setDatasets(createDatasets(rows, pagination.enabled ? perPage : null));
-  }, [rows, perPage, pagination, isServerSide]);
   useEffect(() => {
     if (isServerSide && typeof pagination.page === "number" && pagination.page >= 1)
       setActivePage(pagination.page - 1);
   }, [isServerSide, pagination.page]);
   const onSearchChange = (e) => {
-    const term = e.target.value;
-    setSearchTerm(term);
-    if (isServerSide) return;
-    const filtered = rows.filter(
-      (row) => Object.values(row).some(
-        (v) => !!v && String(v).toLowerCase().includes(term.toLowerCase())
-      )
-    );
-    setDatasets(createDatasets(filtered, pagination.enabled ? perPage : null));
+    setSearchTerm(e.target.value);
     setActivePage(0);
   };
   const onPaginationChange = (perPageValue) => {
@@ -1908,9 +1946,17 @@ function Table({
       )
     ] }),
     /* @__PURE__ */ jsx("div", { children: header }),
-    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-lg", children: /* @__PURE__ */ jsxs("table", { className: "w-full", children: [
-      /* @__PURE__ */ jsx(TableHeader, { columns }),
-      /* @__PURE__ */ jsx(TableBody, { columns, rows: currentPageRows, expandRow })
+    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-lg", children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse", children: [
+      /* @__PURE__ */ jsx(TableHeader, { columns, hasExpand: !!expandRow.enabled }),
+      /* @__PURE__ */ jsx(
+        TableBody,
+        {
+          columns,
+          rows: currentPageRows,
+          expandRow,
+          getRowKey
+        }
+      )
     ] }) }),
     /* @__PURE__ */ jsx("div", { children: footer })
   ] });
@@ -2293,7 +2339,7 @@ function ThemeProvider({
   className = "",
   style
 }) {
-  const id = React10.useId().replace(/:/g, "");
+  const id = React9.useId().replace(/:/g, "");
   const scopeClass = `geo-th-${id}`;
   const divRef = useRef(null);
   useEffect(() => {