@geomak/ui 6.25.0 → 6.26.1

package/dist/index.js

@@ -2840,6 +2840,7 @@ var MONTHS2 = [
   "November",
   "December"
 ];
+var MONTHS_SHORT = MONTHS2.map((m) => m.slice(0, 3));
 var WEEKDAYS2 = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 var toDate = (d) => d instanceof Date ? d : new Date(d);
 var startOfDay2 = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
@@ -2967,10 +2968,18 @@ function Scheduler({
             /* @__PURE__ */ jsx(IconButton, { type: "bordered", size: "sm", icon: /* @__PURE__ */ jsx(Chevron4, { dir: "left" }), title: "Previous", onClick: () => go(-1) }),
             /* @__PURE__ */ jsx(IconButton, { type: "bordered", size: "sm", icon: /* @__PURE__ */ jsx(Chevron4, { dir: "right" }), title: "Next", onClick: () => go(1) }),
             /* @__PURE__ */ jsx(Button_default, { variant: "ghost", size: "sm", content: "Today", onClick: goToday }),
-            /* @__PURE__ */ jsxs("h2", { className: "ml-1 min-w-[9rem] text-base font-semibold tracking-tight text-foreground", children: [
-              title,
-              loading && /* @__PURE__ */ jsx("span", { className: "ml-2 inline-flex translate-y-0.5", children: /* @__PURE__ */ jsx(Spinner2, {}) })
-            ] })
+            /* @__PURE__ */ jsx(
+              MonthYearPicker,
+              {
+                label: title,
+                cursor,
+                onPick: (d) => {
+                  setDir(0);
+                  setCursor(d);
+                }
+              }
+            ),
+            loading && /* @__PURE__ */ jsx(Spinner2, {})
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(
@@ -3021,6 +3030,64 @@ function Scheduler({
     }
   );
 }
+function MonthYearPicker({ label, cursor, onPick }) {
+  const [open, setOpen] = useState(false);
+  const [viewYear, setViewYear] = useState(cursor.getFullYear());
+  useEffect(() => {
+    if (open) setViewYear(cursor.getFullYear());
+  }, [open, cursor]);
+  return /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "group ml-1 inline-flex items-center gap-1.5 rounded-md px-1.5 py-0.5 text-lg font-semibold tracking-tight text-foreground transition-colors hover:bg-background focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+        children: [
+          label,
+          /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", className: "h-4 w-4 text-foreground-muted transition-transform duration-150 group-data-[state=open]:rotate-180", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 9l6 6 6-6" }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(
+      Popover.Content,
+      {
+        align: "start",
+        sideOffset: 8,
+        className: [
+          "z-[400] w-64 rounded-lg border border-border bg-surface p-3 shadow-lg",
+          "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: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx(IconButton, { size: "sm", type: "bordered", icon: /* @__PURE__ */ jsx(Chevron4, { dir: "left" }), title: "Previous year", onClick: () => setViewYear((y) => y - 1) }),
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold tabular-nums text-foreground", children: viewYear }),
+            /* @__PURE__ */ jsx(IconButton, { size: "sm", type: "bordered", icon: /* @__PURE__ */ jsx(Chevron4, { dir: "right" }), title: "Next year", onClick: () => setViewYear((y) => y + 1) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-1", children: MONTHS_SHORT.map((m, i) => {
+            const current = i === cursor.getMonth() && viewYear === cursor.getFullYear();
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  onPick(new Date(viewYear, i, 1));
+                  setOpen(false);
+                },
+                className: [
+                  "rounded-md px-2 py-1.5 text-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+                  current ? "bg-accent font-semibold text-accent-fg" : "text-foreground hover:bg-background"
+                ].join(" "),
+                children: m
+              },
+              m
+            );
+          }) })
+        ]
+      }
+    ) })
+  ] });
+}
 var MAX_CHIPS = 3;
 function MonthView({
   cursor,
@@ -3045,7 +3112,9 @@ function MonthView({
           className: [
             "group flex min-h-[5rem] flex-col gap-1 border-b border-r border-border p-1.5 text-left transition-colors",
             "[&:nth-child(7n)]:border-r-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent",
-            inMonth ? "bg-surface hover:bg-surface-raised" : "bg-background/40"
+            // surface===surface-raised in light mode, so hover lifts toward the
+            // cool chart-mist background instead (a visible, on-brand tint).
+            inMonth ? "bg-surface hover:bg-background" : "bg-background hover:bg-surface"
           ].join(" "),
           children: [
             /* @__PURE__ */ jsx(
@@ -3102,6 +3171,8 @@ function WeekView({
   onSelectEvent
 }) {
   const days = useMemo(() => getWeekDays(cursor, weekStartsOn), [cursor, weekStartsOn]);
+  const labels = useMemo(() => weekdayLabels(weekStartsOn), [weekStartsOn]);
+  const dow = (d) => labels[(d.getDay() - weekStartsOn + 7) % 7];
   const [startHour, endHour] = dayHours;
   const hours = useMemo(
     () => Array.from({ length: endHour - startHour }, (_, i) => startHour + i),
@@ -3113,7 +3184,7 @@ function WeekView({
     /* @__PURE__ */ jsxs("div", { className: "grid border-b border-border", style: { gridTemplateColumns: `3.5rem repeat(7, 1fr)` }, children: [
       /* @__PURE__ */ jsx("div", { className: "border-r border-border" }),
       days.map((d) => /* @__PURE__ */ jsxs("div", { className: "border-r border-border px-1 py-1.5 text-center last:border-r-0", children: [
-        /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium uppercase tracking-wide text-foreground-muted", children: weekdayLabels(weekStartsOn)[(d.getDay() - weekStartsOn + 7) % 7] }),
+        /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium uppercase tracking-wide text-foreground-muted", children: dow(d) }),
         /* @__PURE__ */ jsx("div", { className: ["mx-auto mt-0.5 flex h-6 w-6 items-center justify-center rounded-full text-xs tabular-nums", isToday(d) ? "bg-accent font-semibold text-accent-fg" : "text-foreground"].join(" "), children: d.getDate() })
       ] }, d.getTime()))
     ] }),
@@ -3126,9 +3197,9 @@ function WeekView({
             "button",
             {
               type: "button",
-              "aria-label": `${weekdayLabels(weekStartsOn)[(day.getDay() - weekStartsOn + 7) % 7]} ${day.getDate()} ${hourLabel(h)}`,
+              "aria-label": `${dow(day)} ${day.getDate()} ${hourLabel(h)}`,
               onClick: () => onSelectSlot?.(new Date(day.getFullYear(), day.getMonth(), day.getDate(), h)),
-              className: "absolute left-0 right-0 border-b border-border/60 hover:bg-surface-raised/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent",
+              className: "absolute left-0 right-0 border-b border-border hover:bg-background focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent",
               style: { top: i * hourHeight, height: hourHeight }
             },
             h
@@ -3147,11 +3218,16 @@ function WeekView({
                   onSelectEvent?.(e);
                 },
                 title: `${e.title} \xB7 ${timeLabel(e.start)}\u2013${timeLabel(e.end)}`,
-                className: "absolute left-0.5 right-0.5 overflow-hidden rounded-md border-l-2 px-1.5 py-0.5 text-left text-[11px] leading-tight text-foreground shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
-                style: { top: Math.max(0, top), height, borderLeftColor: color, backgroundColor: `color-mix(in oklab, ${color} 16%, var(--color-surface))` },
+                className: "absolute left-0.5 right-0.5 overflow-hidden rounded-md border px-1.5 py-0.5 text-left text-[11px] leading-tight text-foreground shadow-sm transition-shadow hover:shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+                style: {
+                  top: Math.max(0, top),
+                  height,
+                  backgroundColor: `color-mix(in oklab, ${color} 14%, var(--color-surface))`,
+                  borderColor: `color-mix(in oklab, ${color} 40%, var(--color-surface))`
+                },
                 children: [
                   /* @__PURE__ */ jsx("div", { className: "truncate font-medium", children: e.title }),
-                  /* @__PURE__ */ jsx("div", { className: "truncate text-foreground-muted", children: timeLabel(e.start) })
+                  /* @__PURE__ */ jsx("div", { className: "truncate", style: { color }, children: timeLabel(e.start) })
                 ]
               },
               e.id
@@ -5653,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({
@@ -8422,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",
       {
@@ -8833,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",
@@ -8848,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",