@geomak/ui 7.2.0 → 7.2.2

package/dist/index.js

@@ -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"
       }
     );
   }
@@ -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
               }
             ) }),
@@ -5477,29 +5478,18 @@ function Pagination({
   onPageChange,
   maxPage,
   options,
-  onPerPageChange,
-  serverSide = false
+  perPage,
+  onPerPageChange
 }) {
   const picker = options.pickerOptions ?? DEFAULT_PICKER;
-  const matchedOption = picker.find(
-    (o) => o.label === options.perPage || o.value === options.perPage
-  );
-  const [perPageKey, setPerPageKey] = useState(() => matchedOption?.key ?? picker[0]?.key);
-  const displayPerPageKey = serverSide ? matchedOption?.key ?? perPageKey : perPageKey;
-  useEffect(() => {
-    if (serverSide && options.perPage != null) {
-      const next = picker.find((o) => o.label === options.perPage || o.value === options.perPage);
-      if (next) setPerPageKey(next.key);
-    }
-  }, [serverSide, options.perPage, picker]);
-  const currentOpt = picker.find((o) => o.key === displayPerPageKey);
-  const currentPerPageLabel = currentOpt?.label ?? currentOpt?.value ?? options.perPage ?? "";
+  const currentOpt = picker.find((o) => o.value === perPage || o.label === perPage);
+  const currentPerPageLabel = currentOpt?.label ?? currentOpt?.value ?? perPage ?? "";
   const FOCUS = "focus-visible:!ring-0 focus-visible:!border-accent";
   const navBtn = (icon, disabled, onClick, title) => /* @__PURE__ */ jsx(Button_default, { variant: "outline", size: "sm", disabled, onClick, icon, className: `w-7 !px-0 ${FOCUS}`, "aria-label": title, title });
   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,
@@ -5512,10 +5502,7 @@ function Pagination({
           items: picker.map((o) => ({
             key: o.key,
             label: String(o.label ?? o.value ?? o.key),
-            onSelect: () => {
-              if (!serverSide) setPerPageKey(o.key);
-              onPerPageChange(o.label ?? o.value ?? o.key);
-            }
+            onSelect: () => onPerPageChange(o.value ?? o.label ?? o.key)
           }))
         }
       )
@@ -5655,9 +5642,9 @@ function Table({
       activePage,
       onPageChange: handlePageChange,
       maxPage: MAX_PAGE,
+      perPage,
       onPerPageChange: onPaginationChange,
-      options: pagination,
-      serverSide: isServerSide
+      options: pagination
     }
   );
   return /* @__PURE__ */ jsxs("div", { className: `w-full h-max rounded-lg ${className}`.trim(), style, children: [
@@ -6841,13 +6828,19 @@ function PasswordStrength({
   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
-      )) }),
+      /* @__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 })
@@ -6921,11 +6914,12 @@ function RadioTile({
               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",
+                "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",
-                "focus:outline-none focus-visible:ring-2 focus-visible: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: [