@geomak/ui 7.0.1 → 7.2.0

package/dist/index.js

@@ -1,7 +1,7 @@
 export { icons_default as Icon, createIcon } from './chunk-KAFJJO5O.js';
 import { colors_default } from './chunk-I2P4JJDB.js';
 export { colors_default as COLORS, PALETTE as palette, semanticTokens, vars } from './chunk-I2P4JJDB.js';
-import React28, { createContext, useState, useEffect, useMemo, useId, useCallback, useRef, useContext, useSyncExternalStore, useLayoutEffect } from 'react';
+import React29, { createContext, useState, useEffect, useMemo, useId, useCallback, useRef, useContext, useSyncExternalStore, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
@@ -16,8 +16,8 @@ import * as ToggleGroup from '@radix-ui/react-toggle-group';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as NavigationMenu from '@radix-ui/react-navigation-menu';
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 
 // src/utils/cx.ts
@@ -555,7 +555,7 @@ var SIZE_CLASSES = {
   md: "h-9  px-4   text-sm  gap-1.5 rounded-lg",
   lg: "h-11 px-5   text-sm  gap-2   rounded-xl"
 };
-var Button = React28.forwardRef(function Button2({
+var Button = React29.forwardRef(function Button2({
   content,
   variant = "primary",
   size = "md",
@@ -663,7 +663,7 @@ function MenuButton({
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
         ].join(" "),
-        children: items.map((item) => /* @__PURE__ */ jsxs(React28.Fragment, { children: [
+        children: items.map((item) => /* @__PURE__ */ jsxs(React29.Fragment, { children: [
           item.separatorBefore && /* @__PURE__ */ jsx(DropdownMenu.Separator, { className: "my-1 h-px bg-border" }),
           /* @__PURE__ */ jsxs(
             DropdownMenu.Item,
@@ -1762,7 +1762,7 @@ function Kbd({
   style
 }) {
   if (keys && keys.length > 0) {
-    return /* @__PURE__ */ jsx("span", { className: cx("inline-flex items-center gap-1", className), style, children: keys.map((k, i) => /* @__PURE__ */ jsxs(React28.Fragment, { children: [
+    return /* @__PURE__ */ jsx("span", { className: cx("inline-flex items-center gap-1", className), style, children: keys.map((k, i) => /* @__PURE__ */ jsxs(React29.Fragment, { children: [
       i > 0 && /* @__PURE__ */ jsx("span", { className: "text-foreground-muted text-xs select-none", children: separator }),
       /* @__PURE__ */ jsx("kbd", { className: [cap, SIZE3[size]].join(" "), children: k })
     ] }, `${k}-${i}`)) });
@@ -1854,7 +1854,7 @@ function FlatCarousel({
   style
 }) {
   const scrollerRef = useRef(null);
-  const slides = React28.Children.toArray(children);
+  const slides = React29.Children.toArray(children);
   const [active, setActive] = useState(0);
   const [atStart, setAtStart] = useState(true);
   const [atEnd, setAtEnd] = useState(false);
@@ -1909,7 +1909,7 @@ function RotatingCarousel({
   className = "",
   style
 }) {
-  const slides = React28.Children.toArray(children);
+  const slides = React29.Children.toArray(children);
   const count = slides.length;
   const [active, setActive] = useState(0);
   const reduced = useReducedMotion();
@@ -5131,7 +5131,7 @@ function Wizard({
   ] });
 }
 var SearchIcon = /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z", clipRule: "evenodd" }) });
-var SearchInput = React28.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText, className }, ref) {
+var SearchInput = React29.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText, className }, ref) {
   return /* @__PURE__ */ jsx(Field, { className, label, htmlFor, layout, helperText, children: /* @__PURE__ */ jsxs(
     "div",
     {
@@ -5273,22 +5273,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__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", "aria-hidden": "true", className: "shrink-0", children: [
+    /* @__PURE__ */ 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__ */ 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__ */ 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
-    ))
+    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__ */ 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__ */ 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__ */ jsx("span", { children: col.label }),
+                /* @__PURE__ */ jsx(SortGlyph, { direction: dir })
+              ]
+            }
+          ) : col.label
+        },
+        col.key
+      );
+    })
   ] }) });
 }
 var DefaultExpandIcon = /* @__PURE__ */ jsx(
@@ -5296,24 +5352,66 @@ var DefaultExpandIcon = /* @__PURE__ */ 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__ */ jsx(
-      "path",
+    children: /* @__PURE__ */ 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] = 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__ */ jsx(Fragment, { children: col.editor({ value, row, commit, cancel }) });
+    return /* @__PURE__ */ 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__ */ 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] = useState(() => /* @__PURE__ */ new Set());
   const reduced = useReducedMotion();
@@ -5330,7 +5428,7 @@ function TableBody({
   return /* @__PURE__ */ jsx("tbody", { children: rows.map((row, i) => {
     const rowKey = getRowKey(row, i);
     const isExpanded = expanded.has(rowKey);
-    return /* @__PURE__ */ jsxs(React28.Fragment, { children: [
+    return /* @__PURE__ */ jsxs(React29.Fragment, { children: [
       /* @__PURE__ */ jsxs(
         "tr",
         {
@@ -5343,15 +5441,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__ */ 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__ */ jsx(EditableCell, { col, row, rowIndex: i, onCellEdit }) : col.component ? col.component(row[col.keyBind], row) : row[col.keyBind]
               },
               col.key
             ))
@@ -5445,6 +5543,10 @@ function Table({
   pagination = DEFAULT_PAGINATION,
   expandRow = DEFAULT_EXPAND,
   hasSearch = true,
+  search,
+  defaultSort = null,
+  onSortChange,
+  onCellEdit,
   footer = null,
   header = null,
   loading = false,
@@ -5458,20 +5560,54 @@ function Table({
     typeof pagination.perPage === "number" ? pagination.perPage : 15
   );
   const [activePage, setActivePage] = useState(0);
+  const [sortState, setSortState] = 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] = useState("");
+  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 = 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 = 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 = 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 = useMemo(() => {
     if (isServerSide && typeof pagination.maxPage === "number") return Math.max(0, pagination.maxPage);
     if (isServerSide && typeof pagination.totalCount === "number")
@@ -5510,32 +5646,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__ */ jsx(
+    Pagination,
+    {
+      activePage,
+      onPageChange: handlePageChange,
+      maxPage: MAX_PAGE,
+      onPerPageChange: onPaginationChange,
+      options: pagination,
+      serverSide: isServerSide
+    }
+  );
   return /* @__PURE__ */ jsxs("div", { className: `w-full h-max rounded-lg ${className}`.trim(), style, children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
-      hasSearch && /* @__PURE__ */ jsx(
+    (hasSearch || showTopPager) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 mb-2", children: [
+      hasSearch ? /* @__PURE__ */ jsx(
         SearchInput_default,
         {
           ref: searchRef,
           value: searchTerm,
           onChange: onSearchChange,
-          placeholder: "Search term..."
-        }
-      ),
-      pagination.enabled && /* @__PURE__ */ jsx(
-        Pagination,
-        {
-          activePage,
-          onPageChange: handlePageChange,
-          maxPage: MAX_PAGE,
-          onPerPageChange: onPaginationChange,
-          options: pagination,
-          serverSide: isServerSide
+          placeholder: search?.placeholder ?? "Search term..."
         }
-      )
+      ) : /* @__PURE__ */ jsx("span", {}),
+      showTopPager && pager
     ] }),
     /* @__PURE__ */ jsx("div", { children: header }),
     /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-lg", children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse", "aria-busy": loading || void 0, children: [
-      /* @__PURE__ */ jsx(TableHeader, { columns, hasExpand: !!expandRow.enabled }),
+      /* @__PURE__ */ jsx(TableHeader, { columns, hasExpand: !!expandRow.enabled, sort: sortState, onSort: handleSort }),
       loading ? /* @__PURE__ */ jsx(
         TableSkeletonBody,
         {
@@ -5549,10 +5689,12 @@ function Table({
           columns,
           rows: currentPageRows,
           expandRow,
-          getRowKey
+          getRowKey,
+          onCellEdit
         }
       )
     ] }) }),
+    showBottomPager && /* @__PURE__ */ jsx("div", { className: "mt-2 flex justify-end", children: pager }),
     /* @__PURE__ */ jsx("div", { children: footer })
   ] });
 }
@@ -5573,6 +5715,84 @@ function TableSkeletonBody({
     i
   )) });
 }
+var useIsoLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+function VirtualList({
+  items,
+  rowHeight,
+  renderItem: renderItem2,
+  height = 400,
+  getKey,
+  overscan = 6,
+  searchable = false,
+  searchKeys,
+  filter,
+  searchPlaceholder = "Search\u2026",
+  emptyState = "No results",
+  "aria-label": ariaLabel = "List",
+  className = "",
+  style
+}) {
+  const scrollRef = useRef(null);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [viewport, setViewport] = useState(typeof height === "number" ? height : 400);
+  const [term, setTerm] = useState("");
+  useIsoLayoutEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const measure = () => setViewport(el.clientHeight);
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const filtered = useMemo(() => {
+    if (!searchable || !term) return items;
+    if (filter) return items.filter((it) => filter(it, term));
+    const needle = term.toLowerCase();
+    return items.filter((it) => {
+      if (searchKeys) return searchKeys.some((k) => String(it[k] ?? "").toLowerCase().includes(needle));
+      return String(it).toLowerCase().includes(needle);
+    });
+  }, [items, searchable, term, filter, searchKeys]);
+  const total = filtered.length * rowHeight;
+  const startIndex = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);
+  const endIndex = Math.min(filtered.length, Math.ceil((scrollTop + viewport) / rowHeight) + overscan);
+  const offsetY = startIndex * rowHeight;
+  const visible = filtered.slice(startIndex, endIndex);
+  const onSearch = (e) => {
+    setTerm(e.target.value);
+    setScrollTop(0);
+    if (scrollRef.current) scrollRef.current.scrollTop = 0;
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cx("flex w-full flex-col gap-2", className), style, children: [
+    searchable && /* @__PURE__ */ jsx(SearchInput_default, { value: term, onChange: onSearch, placeholder: searchPlaceholder }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: scrollRef,
+        onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
+        role: "list",
+        "aria-label": ariaLabel,
+        className: "relative overflow-y-auto rounded-lg border border-border bg-surface",
+        style: { height },
+        children: filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center p-6 text-sm text-foreground-muted", children: emptyState }) : /* @__PURE__ */ jsx("div", { style: { height: total, position: "relative" }, children: /* @__PURE__ */ jsx("div", { style: { transform: `translateY(${offsetY}px)` }, children: visible.map((item, i) => {
+          const index = startIndex + i;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "listitem",
+              style: { height: rowHeight },
+              className: "box-border",
+              children: renderItem2(item, index)
+            },
+            getKey ? getKey(item, index) : index
+          );
+        }) }) })
+      }
+    )
+  ] });
+}
 function ThemeSwitch({ checked, onChange, label = "Toggle dark mode", className = "" }) {
   const id = useId();
   return /* @__PURE__ */ jsx("label", { htmlFor: id, className: `flex items-center gap-2 cursor-pointer select-none ${className}`.trim(), children: /* @__PURE__ */ jsx(
@@ -5874,8 +6094,8 @@ function MegaMenuLink({ href, icon, description, active, onClick, children, clas
 function MegaMenuFeatured({ children, className = "" }) {
   return /* @__PURE__ */ jsx("div", { className: cx("min-w-0 rounded-lg bg-surface-raised border border-border p-4 flex flex-col", className), children });
 }
-var elementsOfType = (children, type) => React28.Children.toArray(children).filter(
-  (c) => React28.isValidElement(c) && c.type === type
+var elementsOfType = (children, type) => React29.Children.toArray(children).filter(
+  (c) => React29.isValidElement(c) && c.type === type
 );
 var MOBILE_CHEVRON = /* @__PURE__ */ jsx(
   "svg",
@@ -5912,9 +6132,9 @@ function MobileLinkRow({ link, onNavigate }) {
   );
 }
 function MobilePanel({ panel, onNavigate }) {
-  const nodes = React28.Children.toArray(panel.props.children);
+  const nodes = React29.Children.toArray(panel.props.children);
   return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 px-2 pb-3 pt-1", children: nodes.map((node, i) => {
-    if (!React28.isValidElement(node)) return null;
+    if (!React29.isValidElement(node)) return null;
     const el = node;
     if (el.type === MegaMenuSection) {
       const { title, children } = el.props;
@@ -6323,7 +6543,7 @@ function ThemeProvider({
   className = "",
   style
 }) {
-  const id = React28.useId().replace(/:/g, "");
+  const id = React29.useId().replace(/:/g, "");
   const scopeClass = `geo-th-${id}`;
   const divRef = useRef(null);
   useEffect(() => {
@@ -6570,6 +6790,161 @@ function Password({
     }
   );
 }
+var defaultPasswordRules = [
+  { label: "At least 8 characters", test: (p) => p.length >= 8 },
+  { label: "A lowercase letter", test: (p) => /[a-z]/.test(p) },
+  { label: "An uppercase letter", test: (p) => /[A-Z]/.test(p) },
+  { label: "A number", test: (p) => /\d/.test(p) },
+  { label: "A symbol", test: (p) => /[^A-Za-z0-9]/.test(p) }
+];
+var LABELS = ["", "Weak", "Fair", "Good", "Strong"];
+function scorePassword(password) {
+  if (!password) return { score: 0, label: "" };
+  let s = 0;
+  if (password.length >= 8) s++;
+  if (/[a-z]/.test(password) && /[A-Z]/.test(password)) s++;
+  if (/\d/.test(password)) s++;
+  if (/[^A-Za-z0-9]/.test(password)) s++;
+  if (password.length >= 12) s++;
+  const lowEntropy = /^(.)\1+$/.test(password) || /^(?:0123456789|abcdefghijklmnopqrstuvwxyz|qwertyuiop)/i.test(password);
+  if (lowEntropy) s = Math.min(s, 1);
+  const score = Math.max(1, Math.min(4, s));
+  return { score, label: LABELS[score] };
+}
+var BAR_COLOR = {
+  0: "bg-border",
+  1: "bg-status-error",
+  2: "bg-status-warning",
+  3: "bg-accent",
+  4: "bg-status-success"
+};
+var TEXT_COLOR = {
+  0: "text-foreground-muted",
+  1: "text-status-error",
+  2: "text-status-warning",
+  3: "text-accent",
+  4: "text-status-success"
+};
+var Tick = ({ ok }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", "aria-hidden": "true", className: cx("h-3.5 w-3.5 shrink-0", ok ? "text-status-success" : "text-foreground-muted"), children: ok ? /* @__PURE__ */ jsx("path", { fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd", d: "M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm3.7 6.3a1 1 0 0 0-1.4-1.4L9 10.18 7.7 8.88a1 1 0 0 0-1.4 1.42l2 2a1 1 0 0 0 1.4 0l4-4Z" }) : /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "2.5", fill: "currentColor" }) });
+function PasswordStrength({
+  value,
+  scorer = scorePassword,
+  showRequirements = false,
+  rules = defaultPasswordRules,
+  confirmValue,
+  hideMeter = false,
+  className = "",
+  style
+}) {
+  const { score, label } = useMemo(() => scorer(value), [scorer, value]);
+  const showMatch = confirmValue != null && (value.length > 0 || confirmValue.length > 0);
+  const matches = value.length > 0 && value === confirmValue;
+  return /* @__PURE__ */ jsxs("div", { className: cx("flex flex-col gap-2", className), style, "aria-live": "polite", children: [
+    !hideMeter && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "flex gap-1", role: "meter", "aria-valuemin": 0, "aria-valuemax": 4, "aria-valuenow": score, "aria-label": "Password strength", children: [1, 2, 3, 4].map((seg) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cx("h-1.5 flex-1 rounded-full transition-colors duration-200", seg <= score ? BAR_COLOR[score] : "bg-border")
+        },
+        seg
+      )) }),
+      label && /* @__PURE__ */ jsxs("p", { className: "text-xs", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-foreground-muted", children: "Strength: " }),
+        /* @__PURE__ */ jsx("span", { className: cx("font-medium", TEXT_COLOR[score]), children: label })
+      ] })
+    ] }),
+    showRequirements && /* @__PURE__ */ jsx("ul", { className: "mt-0.5 flex flex-col gap-1", children: rules.map((rule, i) => {
+      const ok = rule.test(value);
+      return /* @__PURE__ */ jsxs("li", { className: cx("flex items-center gap-1.5 text-xs", ok ? "text-foreground-secondary" : "text-foreground-muted"), children: [
+        /* @__PURE__ */ jsx(Tick, { ok }),
+        rule.label
+      ] }, i);
+    }) }),
+    showMatch && /* @__PURE__ */ jsxs("p", { className: cx("flex items-center gap-1.5 text-xs font-medium", matches ? "text-status-success" : "text-status-error"), children: [
+      /* @__PURE__ */ jsx(Tick, { ok: matches }),
+      matches ? "Passwords match" : "Passwords don\u2019t match"
+    ] })
+  ] });
+}
+var COLS = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
+};
+var PAD2 = { sm: "p-3", md: "p-4", lg: "p-5" };
+var TITLE = { sm: "text-sm", md: "text-sm", lg: "text-base" };
+var CheckMark = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", className: "h-5 w-5 text-accent", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 2.25a9.75 9.75 0 1 0 0 19.5 9.75 9.75 0 0 0 0-19.5Zm4.28 7.53a.75.75 0 0 0-1.06-1.06l-4.97 4.97-1.97-1.97a.75.75 0 1 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l5.5-5.5Z" }) });
+function RadioTile({
+  options,
+  value,
+  defaultValue,
+  onChange,
+  name,
+  label,
+  columns = 2,
+  size = "md",
+  disabled,
+  required,
+  helperText,
+  errorMessage,
+  className
+}) {
+  const groupId = useId();
+  const errorId = useId();
+  const hasError = errorMessage != null;
+  return /* @__PURE__ */ jsx(
+    Field,
+    {
+      className,
+      label,
+      htmlFor: groupId,
+      errorId,
+      errorMessage,
+      required,
+      helperText,
+      children: /* @__PURE__ */ jsx(
+        RadioGroupPrimitive.Root,
+        {
+          id: groupId,
+          name,
+          value,
+          defaultValue,
+          onValueChange: onChange,
+          disabled,
+          required,
+          "aria-invalid": hasError || void 0,
+          "aria-describedby": hasError ? errorId : void 0,
+          className: cx("grid gap-3", COLS[columns]),
+          children: options.map((opt) => /* @__PURE__ */ jsxs(
+            RadioGroupPrimitive.Item,
+            {
+              value: opt.value,
+              disabled: opt.disabled,
+              className: cx(
+                "group relative flex flex-col gap-1 rounded-xl border bg-surface text-left transition-all duration-150",
+                PAD2[size],
+                "border-border hover:border-border-strong",
+                "data-[state=checked]:border-accent data-[state=checked]:ring-1 data-[state=checked]:ring-accent",
+                "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+                "disabled:cursor-not-allowed disabled:opacity-50"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "absolute right-3 top-3", children: CheckMark }),
+                opt.icon != null && /* @__PURE__ */ jsx("span", { className: "mb-1 text-accent [&>svg]:h-6 [&>svg]:w-6", children: opt.icon }),
+                /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 pr-6", children: [
+                  /* @__PURE__ */ jsx("span", { className: cx("font-semibold text-foreground", TITLE[size]), children: opt.label }),
+                  opt.badge != null && /* @__PURE__ */ jsx("span", { className: "rounded-full border border-border bg-surface-raised px-2 py-0.5 text-[11px] font-medium text-foreground-secondary", children: opt.badge })
+                ] }),
+                opt.description != null && /* @__PURE__ */ jsx("span", { className: "text-xs leading-relaxed text-foreground-secondary", children: opt.description })
+              ]
+            },
+            opt.value
+          ))
+        }
+      )
+    }
+  );
+}
 function Checkbox({
   checked,
   value,
@@ -8465,7 +8840,7 @@ function OtpInput({
     emit(valid.join(""));
     focusBox(valid.length);
   };
-  return /* @__PURE__ */ jsx(Field, { className, label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", role: "group", "aria-label": typeof label === "string" ? label : "One-time code", children: chars.map((char, idx) => /* @__PURE__ */ jsxs(React28.Fragment, { children: [
+  return /* @__PURE__ */ jsx(Field, { className, label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", role: "group", "aria-label": typeof label === "string" ? label : "One-time code", children: chars.map((char, idx) => /* @__PURE__ */ jsxs(React29.Fragment, { children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -9189,7 +9564,7 @@ function Jumbotron({
     }
   );
 }
-var COLS = {
+var COLS2 = {
   2: "sm:grid-cols-2",
   3: "sm:grid-cols-2 lg:grid-cols-3",
   4: "sm:grid-cols-2 lg:grid-cols-4"
@@ -9211,7 +9586,7 @@ function FeatureGrid({
       title != null && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight text-foreground", children: title }),
       description != null && /* @__PURE__ */ jsx("p", { className: "max-w-2xl text-base leading-relaxed text-foreground-secondary", children: description })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: ["grid grid-cols-1 gap-6", COLS[columns]].join(" "), children: features.map((f, i) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 rounded-xl border border-border bg-surface p-5", children: [
+    /* @__PURE__ */ jsx("div", { className: ["grid grid-cols-1 gap-6", COLS2[columns]].join(" "), children: features.map((f, i) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 rounded-xl border border-border bg-surface p-5", children: [
       f.icon != null && /* @__PURE__ */ jsx(
         "span",
         {
@@ -9268,7 +9643,7 @@ function PricingPlans({ plans, eyebrow, title, description, className = "", styl
     )) })
   ] });
 }
-var COLS2 = {
+var COLS3 = {
   1: "mx-auto max-w-2xl",
   2: "sm:grid-cols-2",
   3: "sm:grid-cols-2 lg:grid-cols-3"
@@ -9285,7 +9660,7 @@ function Testimonials({ testimonials, eyebrow, title, description, columns = 3,
       title != null && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight text-foreground", children: title }),
       description != null && /* @__PURE__ */ jsx("p", { className: "max-w-2xl text-base leading-relaxed text-foreground-secondary", children: description })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: ["grid grid-cols-1 gap-6", COLS2[columns]].join(" "), children: testimonials.map((tm, i) => /* @__PURE__ */ jsxs("figure", { className: "flex flex-col gap-4 rounded-xl border border-border bg-surface p-6", children: [
+    /* @__PURE__ */ jsx("div", { className: ["grid grid-cols-1 gap-6", COLS3[columns]].join(" "), children: testimonials.map((tm, i) => /* @__PURE__ */ jsxs("figure", { className: "flex flex-col gap-4 rounded-xl border border-border bg-surface p-6", children: [
       tm.rating != null && /* @__PURE__ */ jsx(Stars, { value: tm.rating }),
       /* @__PURE__ */ jsxs("blockquote", { className: "flex-1 text-sm leading-relaxed text-foreground", children: [
         "\u201C",
@@ -9489,7 +9864,7 @@ function Parallax({
     }
   );
 }
-var COLS3 = {
+var COLS4 = {
   2: "sm:grid-cols-2",
   3: "sm:grid-cols-2 lg:grid-cols-3"
 };
@@ -9510,7 +9885,7 @@ function Blog({
       title != null && /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold tracking-tight text-foreground sm:text-3xl", children: title }),
       description != null && /* @__PURE__ */ jsx("p", { className: "max-w-2xl text-base leading-relaxed text-foreground-secondary", children: description })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: ["grid grid-cols-1 gap-6", COLS3[columns]].join(" "), children: posts.map((post, i) => {
+    /* @__PURE__ */ jsx("div", { className: ["grid grid-cols-1 gap-6", COLS4[columns]].join(" "), children: posts.map((post, i) => {
       const meta = [post.author, post.date, post.readTime].filter((m) => m != null);
       const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
         post.image && /* @__PURE__ */ jsxs("div", { className: "relative aspect-video overflow-hidden bg-backdrop", children: [
@@ -9521,7 +9896,7 @@ function Blog({
           post.tag != null && !post.image && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Badge, { tone: "accent", variant: "soft", size: "sm", children: post.tag }) }),
           /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold leading-snug text-foreground transition-colors group-hover:text-accent", children: post.title }),
           post.excerpt != null && /* @__PURE__ */ jsx("p", { className: "line-clamp-3 text-sm leading-relaxed text-foreground-secondary", children: post.excerpt }),
-          meta.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-auto flex flex-wrap items-center gap-x-2 gap-y-1 pt-3 text-xs text-foreground-muted", children: meta.map((m, j) => /* @__PURE__ */ jsxs(React28.Fragment, { children: [
+          meta.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-auto flex flex-wrap items-center gap-x-2 gap-y-1 pt-3 text-xs text-foreground-muted", children: meta.map((m, j) => /* @__PURE__ */ jsxs(React29.Fragment, { children: [
             j > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
             /* @__PURE__ */ jsx("span", { children: m })
           ] }, j)) })
@@ -9694,6 +10069,6 @@ function LeadCapture({
   );
 }
 
-export { Accordion_default as Accordion, AppShell, AutoComplete, Avatar, Badge, Blog, Box, Breadcrumbs, Button_default as Button, CARD_BRANDS, Card_default as Card, CardCarousel, Cart, CartButton, CartProvider, Catalog, CatalogCarousel, CatalogGrid, Chat, Checkbox, Checkout, ColorPicker, ContextMenu, CookieConsent, CreditCardForm, DateRangePicker, Drawer, Dropdown, EmptyCart, FAB, FadingBase, FeatureGrid, Field, FieldHelpIcon, FieldLabel, FileInput, Flex, Form, FormContext, FormField, FormStore, Grid, GridCard, IconButton, Jumbotron, Kbd, LeadCapture, List2 as List, LoadingSpinner, LogoutTimer, MegaMenu_default as MegaMenu, MenuButton, Modal, NotificationProvider, NumberInput, OpaqueGridCard, OtpInput, Parallax, Password, PopConfirm, Portal, PricingPlans, RadioGroup, Rating, ScalableContainer, Scheduler, SearchInput_default as SearchInput, SecureLayout, SegmentedControl, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, SlideShow, Slider, Socials, Statistic, Stepper, Switch, Table, Tabs_default as Tabs, TagsInput, DatePicker as Temporal, Testimonials, TextArea, TextInput, ThemeProvider, ThemeSwitch, TimePicker, Timeline, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Video, Wizard, cardNumberError, cvvError, cx, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useBreakpoint, useCart, useFieldArray, useForm, useFormField, useFormStore, useJwt, useLocalStorage, useMediaQuery, useNotification };
+export { Accordion_default as Accordion, AppShell, AutoComplete, Avatar, Badge, Blog, Box, Breadcrumbs, Button_default as Button, CARD_BRANDS, Card_default as Card, CardCarousel, Cart, CartButton, CartProvider, Catalog, CatalogCarousel, CatalogGrid, Chat, Checkbox, Checkout, ColorPicker, ContextMenu, CookieConsent, CreditCardForm, DateRangePicker, Drawer, Dropdown, EmptyCart, FAB, FadingBase, FeatureGrid, Field, FieldHelpIcon, FieldLabel, FileInput, Flex, Form, FormContext, FormField, FormStore, Grid, GridCard, IconButton, Jumbotron, Kbd, LeadCapture, List2 as List, LoadingSpinner, LogoutTimer, MegaMenu_default as MegaMenu, MenuButton, Modal, NotificationProvider, NumberInput, OpaqueGridCard, OtpInput, Parallax, Password, PasswordStrength, PopConfirm, Portal, PricingPlans, RadioGroup, RadioTile, Rating, ScalableContainer, Scheduler, SearchInput_default as SearchInput, SecureLayout, SegmentedControl, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, SlideShow, Slider, Socials, Statistic, Stepper, Switch, Table, Tabs_default as Tabs, TagsInput, DatePicker as Temporal, Testimonials, TextArea, TextInput, ThemeProvider, ThemeSwitch, TimePicker, Timeline, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Video, VirtualList, Wizard, cardNumberError, cvvError, cx, defaultPasswordRules, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, scorePassword, useBreakpoint, useCart, useFieldArray, useForm, useFormField, useFormStore, useJwt, useLocalStorage, useMediaQuery, useNotification };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map