@geomak/ui 6.26.0 → 6.26.1

package/dist/index.js

@@ -5729,48 +5729,45 @@ function Pagination({
       if (next) setPerPageKey(next.key);
     }
   }, [serverSide, options.perPage, picker]);
-  const navBtn = (icon, disabled, onClick) => /* @__PURE__ */ jsx(IconButton, { disabled, onClick, icon });
-  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,
-      () => onPageChange(0)
-    ),
-    navBtn(
-      /* @__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,
-      () => activePage < maxPage && onPageChange(activePage + 1)
-    ),
-    navBtn(
-      doubleChevronRight,
-      activePage === maxPage,
-      () => onPageChange(maxPage)
-    ),
-    options.withPicker && /* @__PURE__ */ jsx(
-      Dropdown,
-      {
-        style: { width: 80, position: "relative", bottom: 4 },
-        hasSearch: false,
-        items: picker,
-        isMultiselect: false,
-        value: displayPerPageKey,
-        onChange: ({ target: { value } }) => {
-          if (Array.isArray(value)) return;
-          const numKey = typeof value === "number" ? value : Number(value);
-          if (!serverSide) setPerPageKey(numKey);
-          const opt = picker.find((o) => o.key === numKey);
-          onPerPageChange(opt?.label ?? opt?.value ?? numKey);
+  const navBtn = (icon, disabled, onClick, title) => /* @__PURE__ */ jsx(IconButton, { type: "bordered", size: "sm", disabled, onClick, icon, title });
+  const chevronRight = /* @__PURE__ */ jsx("svg", { 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 5l7 7-7 7" }) });
+  const doubleChevronRight = /* @__PURE__ */ jsx("svg", { 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: "M13 5l7 7-7 7M5 5l7 7-7 7" }) });
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-end gap-x-4 gap-y-3 pt-3", children: [
+    options.withPicker && /* @__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(
+        Dropdown,
+        {
+          size: "sm",
+          style: { width: 76 },
+          hasSearch: false,
+          items: picker,
+          isMultiselect: false,
+          value: displayPerPageKey,
+          onChange: ({ target: { value } }) => {
+            if (Array.isArray(value)) return;
+            const numKey = typeof value === "number" ? value : Number(value);
+            if (!serverSide) setPerPageKey(numKey);
+            const opt = picker.find((o) => o.key === numKey);
+            onPerPageChange(opt?.label ?? opt?.value ?? numKey);
+          }
         }
-      }
-    )
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      navBtn(/* @__PURE__ */ jsx("span", { className: "inline-flex rotate-180", children: doubleChevronRight }), activePage === 0, () => onPageChange(0), "First page"),
+      navBtn(/* @__PURE__ */ jsx("span", { className: "inline-flex rotate-180", children: chevronRight }), activePage === 0, () => activePage > 0 && onPageChange(activePage - 1), "Previous page"),
+      /* @__PURE__ */ jsxs("span", { className: "px-2 text-sm tabular-nums text-foreground-secondary select-none", children: [
+        activePage + 1,
+        " ",
+        /* @__PURE__ */ jsxs("span", { className: "text-foreground-muted", children: [
+          "/ ",
+          maxPage + 1
+        ] })
+      ] }),
+      navBtn(chevronRight, activePage === maxPage, () => activePage < maxPage && onPageChange(activePage + 1), "Next page"),
+      navBtn(doubleChevronRight, activePage === maxPage, () => onPageChange(maxPage), "Last page")
+    ] })
   ] });
 }
 function Table({
@@ -8498,7 +8495,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 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: [
+  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",
       {
@@ -8909,9 +8906,9 @@ function DateRangePicker({
       {
         align: "start",
         sideOffset: 4,
-        className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-50 p-3 flex gap-3 animate-in fade-in-0 zoom-in-95",
+        className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-50 p-3 flex flex-col gap-3 sm:flex-row max-w-[calc(100vw-1rem)] max-h-[calc(100vh-2rem)] overflow-auto animate-in fade-in-0 zoom-in-95",
         children: [
-          presets && presets.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 pr-3 border-r border-border min-w-[120px]", children: presets.map((p) => /* @__PURE__ */ jsx(
+          presets && presets.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 min-w-[120px] sm:pr-3 sm:border-r sm:border-border", children: presets.map((p) => /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
@@ -8924,7 +8921,7 @@ function DateRangePicker({
             },
             p.label
           )) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 sm:flex-row", children: [
             /* @__PURE__ */ jsxs("div", { className: "relative", children: [
               /* @__PURE__ */ jsx(
                 "button",