@geomak/ui 7.1.0 → 7.2.1

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",
     {
@@ -5379,6 +5379,7 @@ function EditableCell({
       "input",
       {
         autoFocus: true,
+        size: 1,
         defaultValue: value == null ? "" : String(value),
         onBlur: (e) => commit(e.target.value),
         onKeyDown: (e) => {
@@ -5391,7 +5392,7 @@ function EditableCell({
           }
         },
         "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"
+        className: "box-border w-full min-w-0 rounded border border-accent bg-surface px-2 py-1 text-sm text-foreground outline-none"
       }
     );
   }
@@ -5428,7 +5429,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",
         {
@@ -5441,7 +5442,7 @@ 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-background transition-transform duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${isExpanded && !expandRow.collapseIcon ? "rotate-180" : ""}`,
+                className: `w-9 h-9 inline-flex items-center justify-center rounded-md text-foreground-muted hover:text-foreground transition-[transform,color] 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
               }
             ) }),
@@ -5499,7 +5500,7 @@ function Pagination({
   const chevronRight = /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 6l6 6-6 6" }) });
   const doubleChevronRight = /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 6l6 6-6 6M12 6l6 6-6 6" }) });
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-end gap-x-4 gap-y-3", children: [
-    options.withPicker && /* @__PURE__ */ jsxs("div", { className: "mr-auto flex items-center gap-2", children: [
+    options.withPicker !== false && /* @__PURE__ */ jsxs("div", { className: "mr-auto flex items-center gap-2", children: [
       /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap text-xs text-foreground-muted", children: "Rows per page" }),
       /* @__PURE__ */ jsx(
         MenuButton,
@@ -5715,6 +5716,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(
@@ -6016,8 +6095,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",
@@ -6054,9 +6133,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;
@@ -6465,7 +6544,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(() => {
@@ -6712,6 +6791,168 @@ 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) => {
+        const active = seg <= score;
+        return /* @__PURE__ */ jsx("div", { className: "h-1.5 flex-1 overflow-hidden rounded-full bg-border", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cx(
+              "h-full origin-left rounded-full transition-[transform,background-color] duration-300 ease-out motion-reduce:transition-none",
+              score > 0 ? BAR_COLOR[score] : "bg-border"
+            ),
+            style: { transform: `scaleX(${active ? 1 : 0})`, transitionDelay: active ? `${(seg - 1) * 70}ms` : "0ms" }
+          }
+        ) }, 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-colors 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",
+                // Keyboard focus only (no mouse-click flash); ring is instant, not animated.
+                "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-surface",
+                "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,
@@ -8607,7 +8848,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",
       {
@@ -9331,7 +9572,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"
@@ -9353,7 +9594,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",
         {
@@ -9410,7 +9651,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"
@@ -9427,7 +9668,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",
@@ -9631,7 +9872,7 @@ function Parallax({
     }
   );
 }
-var COLS3 = {
+var COLS4 = {
   2: "sm:grid-cols-2",
   3: "sm:grid-cols-2 lg:grid-cols-3"
 };
@@ -9652,7 +9893,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: [
@@ -9663,7 +9904,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)) })
@@ -9836,6 +10077,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