@geomak/ui 6.26.0 → 6.27.0

package/dist/index.cjs

@@ -2947,6 +2947,7 @@ function Scheduler({
   onSelectSlot,
   onSelectEvent,
   onNewEvent,
+  onError,
   className = "",
   style
 }) {
@@ -2955,9 +2956,11 @@ function Scheduler({
   const [cursor, setCursor] = React29.useState(() => defaultDate ?? /* @__PURE__ */ new Date());
   const [loaded, setLoaded] = React29.useState([]);
   const [loading, setLoading] = React29.useState(false);
+  const [error, setError] = React29.useState(null);
+  const [reloadKey, setReloadKey] = React29.useState(0);
   const [dir, setDir] = React29.useState(0);
-  const loaderRef = React29.useRef(loadEvents);
-  loaderRef.current = loadEvents;
+  const cbRef = React29.useRef({ loadEvents, onError });
+  cbRef.current = { loadEvents, onError };
   const range = React29.useMemo(
     () => view === "month" ? monthRange(cursor) : weekRange(cursor, weekStartsOn),
     [view, cursor, weekStartsOn]
@@ -2965,21 +2968,26 @@ function Scheduler({
   const fromKey = range.from.getTime();
   const toKey = range.to.getTime();
   React29.useEffect(() => {
-    const loader = loaderRef.current;
+    const { loadEvents: loader, onError: onErr } = cbRef.current;
     if (!loader) return;
     let cancelled = false;
     setLoading(true);
+    setError(null);
     Promise.resolve(loader({ from: new Date(fromKey), to: new Date(toKey) }, view)).then((evts) => {
       if (!cancelled) setLoaded(evts);
-    }).catch(() => {
-      if (!cancelled) setLoaded([]);
+    }).catch((err) => {
+      if (!cancelled) {
+        setError(err ?? new Error("Failed to load events"));
+        onErr?.(err);
+      }
     }).finally(() => {
       if (!cancelled) setLoading(false);
     });
     return () => {
       cancelled = true;
     };
-  }, [fromKey, toKey, view]);
+  }, [fromKey, toKey, view, reloadKey]);
+  const retry = React29.useCallback(() => setReloadKey((k) => k + 1), []);
   const events = React29.useMemo(
     () => (controlledEvents ?? loaded).map(normalize),
     [controlledEvents, loaded]
@@ -3032,7 +3040,7 @@ function Scheduler({
             onNewEvent && /* @__PURE__ */ jsxRuntime.jsx(Button_default, { size: "sm", icon: /* @__PURE__ */ jsxRuntime.jsx(Plus, {}), content: "New event", onClick: onNewEvent })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex-1 overflow-hidden", children: error ? /* @__PURE__ */ jsxRuntime.jsx(SchedulerError, { onRetry: retry }) : loadEvents && loading && events.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(SchedulerSkeleton, { view }) : /* @__PURE__ */ jsxRuntime.jsx(
           framerMotion.motion.div,
           {
             initial: { opacity: 0, x: reduced ? 0 : dir * 24 },
@@ -3067,6 +3075,36 @@ function Scheduler({
     }
   );
 }
+function SchedulerSkeleton({ view }) {
+  const bar = "rounded bg-background animate-pulse";
+  if (view === "week") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col p-3", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 grid gap-2", style: { gridTemplateColumns: "3.5rem repeat(7, 1fr)" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+        Array.from({ length: 7 }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${bar} mx-auto h-8 w-8 rounded-full` }, i))
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col gap-3", children: Array.from({ length: 8 }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${bar} h-6`, style: { width: `${60 + i * 13 % 35}%` } }, i)) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col p-3", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3 grid grid-cols-7 gap-2", children: Array.from({ length: 7 }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${bar} h-2.5` }, i)) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid flex-1 grid-cols-7 grid-rows-5 gap-2", children: Array.from({ length: 35 }, (_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${bar} h-5 w-5 rounded-full` }),
+      i % 3 === 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${bar} h-3` }),
+      i % 5 === 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${bar} h-3`, style: { width: "70%" } })
+    ] }, i)) })
+  ] });
+}
+function SchedulerError({ onRetry }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "alert", className: "flex h-full flex-col items-center justify-center gap-3 p-8 text-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-10 w-10 items-center justify-center rounded-full text-status-error", style: { backgroundColor: "color-mix(in oklab, var(--color-error) 12%, var(--color-surface))" }, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", className: "h-5 w-5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v4m0 4h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h16.94a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z" }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-foreground", children: "Couldn\u2019t load events" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 text-xs text-foreground-muted", children: "Something went wrong fetching this range." })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(Button_default, { size: "sm", variant: "secondary", content: "Retry", onClick: onRetry })
+  ] });
+}
 function MonthYearPicker({ label, cursor, onPick }) {
   const [open, setOpen] = React29.useState(false);
   const [viewYear, setViewYear] = React29.useState(cursor.getFullYear());
@@ -5766,48 +5804,45 @@ function Pagination({
       if (next) setPerPageKey(next.key);
     }
   }, [serverSide, options.perPage, picker]);
-  const navBtn = (icon, disabled, onClick) => /* @__PURE__ */ jsxRuntime.jsx(IconButton, { disabled, onClick, icon });
-  const chevronRight = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-5 w-5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
-  const doubleChevronRight = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-5 w-5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 5l7 7-7 7M5 5l7 7-7 7" }) });
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 items-center justify-end pt-2", children: [
-    navBtn(
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rotate-180 inline-flex", children: doubleChevronRight }),
-      activePage === 0,
-      () => onPageChange(0)
-    ),
-    navBtn(
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rotate-180 inline-flex", children: chevronRight }),
-      activePage === 0,
-      () => activePage > 0 && onPageChange(activePage - 1)
-    ),
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(IconButton, { type: "bordered", size: "sm", disabled, onClick, icon, title });
+  const chevronRight = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
+  const doubleChevronRight = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 5l7 7-7 7M5 5l7 7-7 7" }) });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-end gap-x-4 gap-y-3 pt-3", children: [
+    options.withPicker && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mr-auto flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap text-xs text-foreground-muted", children: "Rows per page" }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+      navBtn(/* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex rotate-180", children: doubleChevronRight }), activePage === 0, () => onPageChange(0), "First page"),
+      navBtn(/* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex rotate-180", children: chevronRight }), activePage === 0, () => activePage > 0 && onPageChange(activePage - 1), "Previous page"),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-2 text-sm tabular-nums text-foreground-secondary select-none", children: [
+        activePage + 1,
+        " ",
+        /* @__PURE__ */ jsxRuntime.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({
@@ -8535,7 +8570,7 @@ function OtpInput({
     emit(valid.join(""));
     focusBox(valid.length);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(Field, { className, label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(React29__default.default.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Field, { className, label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(React29__default.default.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
@@ -8946,9 +8981,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__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1 pr-3 border-r border-border min-w-[120px]", children: presets.map((p) => /* @__PURE__ */ jsxRuntime.jsx(
+          presets && presets.length > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
@@ -8961,7 +8996,7 @@ function DateRangePicker({
             },
             p.label
           )) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 sm:flex-row", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "button",