@loczer/storefront-sdk 0.181.0 → 0.183.0

package/dist/components/BookingPeriodSelector/components/BookingMobileDateDrawer.js

@@ -1,280 +1,211 @@
-import { jsx as r, jsxs as c } from "react/jsx-runtime";
-import { useState as z, useRef as R, useEffect as D } from "react";
-import { startOfMonth as s, differenceInCalendarDays as Z, isSameDay as w, endOfMonth as H, addMonths as L } from "date-fns";
-import { DayButton as ee } from "react-day-picker";
-import { cn as f } from "@rpcbase/ui";
-import { buttonVariants as te, Button as T } from "../../../ui/button.js";
-import { DayPicker as F } from "../../../ui/day-picker.js";
-import { Drawer as oe, DrawerContent as ne, DrawerHeader as ae, DrawerTitle as re } from "../../../ui/drawer.js";
-import { useBookingPeriod as le } from "../BookingPeriodContext.js";
-const se = ee, K = 1, P = f(
-  te({ variant: "outline" }),
-  "z-10 h-11 w-11 bg-background p-0 opacity-100 shadow-sm [&_svg]:size-5"
-), $ = {
-  months: "relative flex w-full flex-col",
-  month: "mobile-date-calendar-month w-full space-y-3",
-  month_caption: "flex h-11 items-center justify-center pt-0 relative",
-  caption_label: "mobile-date-calendar-caption text-base font-semibold",
-  nav: "absolute inset-x-0 top-0 flex items-center justify-between",
-  button_previous: P,
-  button_next: P,
-  month_grid: "w-full border-collapse space-y-1",
-  weekdays: "grid grid-cols-7",
-  weekday: "w-full rounded-md text-muted-foreground font-normal text-xs",
-  week: "grid w-full grid-cols-7 gap-y-2",
-  day: "h-11 w-full overflow-visible p-0 font-normal aria-selected:opacity-100 rounded-md first:aria-selected:rounded-l-md last:aria-selected:rounded-r-md",
-  day_button: "relative inline-flex h-11 w-full items-center justify-center overflow-visible rounded-md p-0 text-base font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
-}, I = (o) => `${o.getFullYear()}-${o.getMonth()}`, g = (o) => {
-  const [n = "0", a = "0"] = o.split("-");
-  return new Date(Number(n), Number(a), 1);
-}, Y = (o, n, a) => o ? w(o, H(o)) ? L(s(o), 1) : s(o) : s(n ?? a), A = (o) => {
-  if (!(!o || !w(o, H(o))))
-    return L(s(o), 1);
-}, we = () => {
-  const {
-    labels: o,
-    startDate: n,
-    endDate: a,
-    selectStartDate: V,
-    selectEndDate: b,
-    isStartDatePopoverOpen: N,
-    setIsStartDatePopoverOpen: M,
-    isEndDatePopoverOpen: C,
-    setIsEndDatePopoverOpen: E,
-    resetHoveredEndDate: q,
-    dateLocale: S,
-    isMobile: k,
-    withMobileDateDrawer: B,
-    minSelectableDate: d
-  } = le(), i = B && k && (N || C), l = C && !N ? "end" : "start", G = I(d), h = I(
-    Y(n, a, d)
-  ), [J, O] = z(
-    () => s(d)
-  ), [Q, p] = z(
-    () => g(h)
-  ), y = R(!0), v = R(!1), _ = n && (a ?? n) >= n ? Z(a ?? n, n) + 1 : null, j = a ?? n;
-  if (D(() => {
-    !i || l !== "start" || O(s(d));
-  }, [l, i, G]), D(() => {
-    !i || l !== "end" || p(g(h));
-  }, [l, h, i]), D(() => {
-    if (!i || typeof document > "u")
-      return;
-    const e = window.scrollY, { body: t, documentElement: u } = document, m = {
-      overflow: t.style.overflow,
-      position: t.style.position,
-      top: t.style.top,
-      width: t.style.width
-    }, X = u.style.overscrollBehavior;
-    return y.current = !0, t.style.overflow = "hidden", t.style.position = "fixed", t.style.top = `-${e}px`, t.style.width = "100%", u.style.overscrollBehavior = "none", () => {
-      t.style.overflow = m.overflow, t.style.position = m.position, t.style.top = m.top, t.style.width = m.width, u.style.overscrollBehavior = X, y.current && window.scrollTo(0, e);
-    };
-  }, [i]), !B || !k)
-    return null;
-  const x = (e) => {
-    if (e === "end") {
-      const t = A(n);
-      t && !a && !v.current ? (p(s(t)), b(t, {
-        close: !1,
-        commit: !1
-      })) : p(g(h));
-    }
-    M(e === "start"), E(e === "end");
-  }, U = () => {
-    M(!1), E(!1), q();
-  }, W = (e) => {
-    const t = _ != null && j != null && !e.modifiers.disabled && w(e.day.date, j);
-    return /* @__PURE__ */ c(
-      se,
-      {
-        ...e,
-        className: f(e.className, "overflow-visible"),
-        children: [
-          e.children,
-          t ? /* @__PURE__ */ r(
-            "span",
-            {
-              className: "pointer-events-none absolute left-1/2 top-0 z-[70] -translate-x-1/2 -translate-y-[calc(100%+4px)] whitespace-nowrap rounded-md border bg-popover px-2 py-1 text-xs font-semibold text-primary shadow-md",
-              "data-testid": "mobile-end-date-duration-tooltip",
-              children: o.selectedDaysTooltip?.({ count: _ })
-            }
-          ) : null
-        ]
-      }
-    );
-  };
-  return /* @__PURE__ */ r(
-    oe,
-    {
-      open: i,
-      lockScroll: !1,
-      onOpenChange: (e) => {
-        e || U();
-      },
-      children: /* @__PURE__ */ c(
-        ne,
-        {
-          className: "overflow-hidden",
-          closeLabel: o.closeDrawer,
-          showCloseButton: !0,
-          children: [
-            /* @__PURE__ */ c(ae, { className: "border-b px-16 pb-3 pt-4 text-left", children: [
-              /* @__PURE__ */ r(re, { className: "sr-only", children: l === "start" ? o.startDate : o.endDate }),
-              /* @__PURE__ */ c(
-                "div",
-                {
-                  className: "relative grid grid-cols-2 rounded-md bg-muted p-1",
-                  "aria-label": o.rentalPeriod,
-                  children: [
-                    /* @__PURE__ */ r(
-                      "span",
-                      {
-                        "aria-hidden": "true",
-                        className: f(
-                          "absolute inset-y-1 left-1 w-[calc(50%-0.25rem)] rounded bg-background shadow-sm transition-transform duration-300 ease-out",
-                          l === "end" && "translate-x-full"
-                        )
-                      }
-                    ),
-                    /* @__PURE__ */ r(
-                      "button",
-                      {
-                        type: "button",
-                        "aria-pressed": l === "start",
-                        className: f(
-                          "relative z-10 h-9 rounded px-3 text-sm font-medium transition-colors",
-                          l === "start" ? "text-foreground" : "text-muted-foreground"
-                        ),
-                        onClick: () => x("start"),
-                        children: o.startDate
-                      }
-                    ),
-                    /* @__PURE__ */ r(
-                      "button",
-                      {
-                        type: "button",
-                        "aria-pressed": l === "end",
-                        className: f(
-                          "relative z-10 h-9 rounded px-3 text-sm font-medium transition-colors",
-                          l === "end" ? "text-foreground" : "text-muted-foreground"
-                        ),
-                        onClick: () => x("end"),
-                        children: o.endDate
-                      }
-                    )
-                  ]
-                }
-              )
-            ] }),
-            /* @__PURE__ */ r("div", { className: "overflow-hidden px-4 py-4", children: /* @__PURE__ */ c(
-              "div",
-              {
-                className: f(
-                  "flex w-[200%] transition-transform duration-300 ease-out",
-                  l === "end" && "-translate-x-1/2"
-                ),
-                children: [
-                  /* @__PURE__ */ r("section", { className: "max-h-[calc(95dvh-9rem)] w-1/2 shrink-0 overflow-y-auto pr-4", children: /* @__PURE__ */ c("div", { className: "flex flex-col gap-4", children: [
-                    /* @__PURE__ */ r(
-                      F,
-                      {
-                        id: "start-date-calendar",
-                        mode: "single",
-                        locale: S,
-                        showOutsideDays: !1,
-                        numberOfMonths: K,
-                        required: !0,
-                        selected: n,
-                        month: J,
-                        onMonthChange: (e) => O(s(e)),
-                        disabled: (e) => e < d,
-                        onSelect: (e) => {
-                          const t = e ?? void 0, u = t != null && (n == null || !w(t, n)), m = A(t);
-                          u && (v.current = !1), p(
-                            Y(t, a, d)
-                          ), V(t, {
-                            close: !1,
-                            openEndDatePicker: !1
-                          }), u && b(m, {
-                            close: !1,
-                            commit: !1
-                          });
-                        },
-                        autoFocus: !0,
-                        "data-testid": "start-date-calendar",
-                        className: "w-full p-0",
-                        classNames: $
-                      }
-                    ),
-                    /* @__PURE__ */ r(
-                      T,
-                      {
-                        type: "button",
-                        className: "h-12 w-full text-base font-semibold",
-                        disabled: !n,
-                        "data-testid": "start-date-drawer-next",
-                        onClick: () => {
-                          n && x("end");
-                        },
-                        children: o.dateDrawerNext
-                      }
-                    )
-                  ] }) }),
-                  /* @__PURE__ */ r("section", { className: "max-h-[calc(95dvh-9rem)] w-1/2 shrink-0 overflow-y-auto pl-4", children: /* @__PURE__ */ c("div", { className: "flex flex-col gap-4", children: [
-                    /* @__PURE__ */ r(
-                      F,
-                      {
-                        id: "end-date-calendar",
-                        mode: "range",
-                        locale: S,
-                        showOutsideDays: !1,
-                        numberOfMonths: K,
-                        selected: {
-                          from: n,
-                          to: a
-                        },
-                        month: Q,
-                        onMonthChange: (e) => p(s(e)),
-                        disabled: (e) => n && e < n || e < d,
-                        onSelect: (e, t) => {
-                          v.current = !0, b(t ?? void 0, {
-                            close: !1,
-                            commit: !1
-                          });
-                        },
-                        autoFocus: !0,
-                        "data-testid": "end-date-calendar",
-                        className: "w-full p-0",
-                        classNames: $,
-                        components: {
-                          DayButton: W
-                        }
-                      },
-                      h
-                    ),
-                    /* @__PURE__ */ r(
-                      T,
-                      {
-                        type: "button",
-                        className: "h-12 w-full text-base font-semibold",
-                        disabled: !a,
-                        "data-testid": "date-drawer-next",
-                        onClick: () => {
-                          a && (y.current = !1, b(a, { close: !0, commit: !0 }));
-                        },
-                        children: o.dateDrawerNext
-                      }
-                    )
-                  ] }) })
-                ]
-              }
-            ) })
-          ]
-        }
-      )
-    }
-  );
-};
-export {
-  we as BookingMobileDateDrawer
+import { Button as e, buttonVariants as t } from "../../../ui/button.js";
+import { useBookingPeriod as n } from "../BookingPeriodContext.js";
+import { DayPicker as r } from "../../../ui/day-picker.js";
+import { Drawer as i, DrawerContent as a, DrawerHeader as o, DrawerTitle as s } from "../../../ui/drawer.js";
+import { addMonths as c, differenceInCalendarDays as l, endOfMonth as u, isSameDay as d, startOfMonth as f } from "date-fns";
+import { useEffect as p, useRef as m, useState as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { cn as v } from "@rpcbase/ui";
+import { DayButton as y } from "react-day-picker";
+//#region src/components/BookingPeriodSelector/components/BookingMobileDateDrawer.tsx
+var b = y, x = 1, S = v(t({ variant: "outline" }), "z-10 h-11 w-11 bg-background p-0 opacity-100 shadow-sm [&_svg]:size-5"), C = {
+	months: "relative flex w-full flex-col",
+	month: "mobile-date-calendar-month w-full space-y-3",
+	month_caption: "flex h-11 items-center justify-center pt-0 relative",
+	caption_label: "mobile-date-calendar-caption text-base font-semibold",
+	nav: "absolute inset-x-0 top-0 flex items-center justify-between",
+	button_previous: S,
+	button_next: S,
+	month_grid: "w-full border-collapse space-y-1",
+	weekdays: "grid grid-cols-7",
+	weekday: "w-full rounded-md text-muted-foreground font-normal text-xs",
+	week: "grid w-full grid-cols-7 gap-y-2",
+	day: "h-11 w-full overflow-visible p-0 font-normal aria-selected:opacity-100 rounded-md first:aria-selected:rounded-l-md last:aria-selected:rounded-r-md",
+	day_button: "relative inline-flex h-11 w-full items-center justify-center overflow-visible rounded-md p-0 text-base font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+}, w = (e) => `${e.getFullYear()}-${e.getMonth()}`, T = (e) => {
+	let [t = "0", n = "0"] = e.split("-");
+	return new Date(Number(t), Number(n), 1);
+}, E = (e, t, n) => e ? d(e, u(e)) ? c(f(e), 1) : f(e) : f(t ?? n), D = (e) => {
+	if (!(!e || !d(e, u(e)))) return c(f(e), 1);
+}, O = () => {
+	let { labels: t, startDate: c, endDate: u, selectStartDate: y, selectEndDate: S, isStartDatePopoverOpen: O, setIsStartDatePopoverOpen: k, isEndDatePopoverOpen: A, setIsEndDatePopoverOpen: j, resetHoveredEndDate: M, dateLocale: N, isMobile: P, withMobileDateDrawer: F, minSelectableDate: I } = n(), L = F && P && (O || A), R = A && !O ? "end" : "start", z = w(I), B = w(E(c, u, I)), [V, H] = h(() => f(I)), [U, W] = h(() => T(B)), G = m(!0), K = m(!1), q = c && (u ?? c) >= c ? l(u ?? c, c) + 1 : null, J = u ?? c;
+	if (p(() => {
+		!L || R !== "start" || H(f(I));
+	}, [
+		R,
+		L,
+		z
+	]), p(() => {
+		!L || R !== "end" || W(T(B));
+	}, [
+		R,
+		B,
+		L
+	]), p(() => {
+		if (!L || typeof document > "u") return;
+		let e = window.scrollY, { body: t, documentElement: n } = document, r = {
+			overflow: t.style.overflow,
+			position: t.style.position,
+			top: t.style.top,
+			width: t.style.width
+		}, i = n.style.overscrollBehavior;
+		return G.current = !0, t.style.overflow = "hidden", t.style.position = "fixed", t.style.top = `-${e}px`, t.style.width = "100%", n.style.overscrollBehavior = "none", () => {
+			t.style.overflow = r.overflow, t.style.position = r.position, t.style.top = r.top, t.style.width = r.width, n.style.overscrollBehavior = i, G.current && window.scrollTo(0, e);
+		};
+	}, [L]), !F || !P) return null;
+	let Y = (e) => {
+		if (e === "end") {
+			let e = D(c);
+			e && !u && !K.current ? (W(f(e)), S(e, {
+				close: !1,
+				commit: !1
+			})) : W(T(B));
+		}
+		k(e === "start"), j(e === "end");
+	}, X = () => {
+		k(!1), j(!1), M();
+	};
+	return /* @__PURE__ */ g(i, {
+		open: L,
+		lockScroll: !1,
+		onOpenChange: (e) => {
+			e || X();
+		},
+		children: /* @__PURE__ */ _(a, {
+			className: "overflow-hidden",
+			closeLabel: t.closeDrawer,
+			showCloseButton: !0,
+			children: [/* @__PURE__ */ _(o, {
+				className: "border-b px-16 pb-3 pt-4 text-left",
+				children: [/* @__PURE__ */ g(s, {
+					className: "sr-only",
+					children: R === "start" ? t.startDate : t.endDate
+				}), /* @__PURE__ */ _("div", {
+					className: "relative grid grid-cols-2 rounded-md bg-muted p-1",
+					"aria-label": t.rentalPeriod,
+					children: [
+						/* @__PURE__ */ g("span", {
+							"aria-hidden": "true",
+							className: v("absolute inset-y-1 left-1 w-[calc(50%-0.25rem)] rounded bg-background shadow-sm transition-transform duration-300 ease-out", R === "end" && "translate-x-full")
+						}),
+						/* @__PURE__ */ g("button", {
+							type: "button",
+							"aria-pressed": R === "start",
+							className: v("relative z-10 h-9 rounded px-3 text-sm font-medium transition-colors", R === "start" ? "text-foreground" : "text-muted-foreground"),
+							onClick: () => Y("start"),
+							children: t.startDate
+						}),
+						/* @__PURE__ */ g("button", {
+							type: "button",
+							"aria-pressed": R === "end",
+							className: v("relative z-10 h-9 rounded px-3 text-sm font-medium transition-colors", R === "end" ? "text-foreground" : "text-muted-foreground"),
+							onClick: () => Y("end"),
+							children: t.endDate
+						})
+					]
+				})]
+			}), /* @__PURE__ */ g("div", {
+				className: "overflow-hidden px-4 py-4",
+				children: /* @__PURE__ */ _("div", {
+					className: v("flex w-[200%] transition-transform duration-300 ease-out", R === "end" && "-translate-x-1/2"),
+					children: [/* @__PURE__ */ g("section", {
+						className: "max-h-[calc(95dvh-9rem)] w-1/2 shrink-0 overflow-y-auto pr-4",
+						children: /* @__PURE__ */ _("div", {
+							className: "flex flex-col gap-4",
+							children: [/* @__PURE__ */ g(r, {
+								id: "start-date-calendar",
+								mode: "single",
+								locale: N,
+								showOutsideDays: !1,
+								numberOfMonths: x,
+								required: !0,
+								selected: c,
+								month: V,
+								onMonthChange: (e) => H(f(e)),
+								disabled: (e) => e < I,
+								onSelect: (e) => {
+									let t = e ?? void 0, n = t != null && (c == null || !d(t, c)), r = D(t);
+									n && (K.current = !1), W(E(t, u, I)), y(t, {
+										close: !1,
+										openEndDatePicker: !1
+									}), n && S(r, {
+										close: !1,
+										commit: !1
+									});
+								},
+								autoFocus: !0,
+								"data-testid": "start-date-calendar",
+								className: "w-full p-0",
+								classNames: C
+							}), /* @__PURE__ */ g(e, {
+								type: "button",
+								className: "h-12 w-full text-base font-semibold",
+								disabled: !c,
+								"data-testid": "start-date-drawer-next",
+								onClick: () => {
+									c && Y("end");
+								},
+								children: t.dateDrawerNext
+							})]
+						})
+					}), /* @__PURE__ */ g("section", {
+						className: "max-h-[calc(95dvh-9rem)] w-1/2 shrink-0 overflow-y-auto pl-4",
+						children: /* @__PURE__ */ _("div", {
+							className: "flex flex-col gap-4",
+							children: [/* @__PURE__ */ g(r, {
+								id: "end-date-calendar",
+								mode: "range",
+								locale: N,
+								showOutsideDays: !1,
+								numberOfMonths: x,
+								selected: {
+									from: c,
+									to: u
+								},
+								month: U,
+								onMonthChange: (e) => W(f(e)),
+								disabled: (e) => c && e < c || e < I,
+								onSelect: (e, t) => {
+									K.current = !0, S(t ?? void 0, {
+										close: !1,
+										commit: !1
+									});
+								},
+								autoFocus: !0,
+								"data-testid": "end-date-calendar",
+								className: "w-full p-0",
+								classNames: C,
+								components: { DayButton: (e) => {
+									let n = q != null && J != null && !e.modifiers.disabled && d(e.day.date, J);
+									return /* @__PURE__ */ _(b, {
+										...e,
+										className: v(e.className, "overflow-visible"),
+										children: [e.children, n ? /* @__PURE__ */ g("span", {
+											className: "pointer-events-none absolute left-1/2 top-0 z-[70] -translate-x-1/2 -translate-y-[calc(100%+4px)] whitespace-nowrap rounded-md border bg-popover px-2 py-1 text-xs font-semibold text-primary shadow-md",
+											"data-testid": "mobile-end-date-duration-tooltip",
+											children: t.selectedDaysTooltip?.({ count: q })
+										}) : null]
+									});
+								} }
+							}, B), /* @__PURE__ */ g(e, {
+								type: "button",
+								className: "h-12 w-full text-base font-semibold",
+								disabled: !u,
+								"data-testid": "date-drawer-next",
+								onClick: () => {
+									u && (G.current = !1, S(u, {
+										close: !0,
+										commit: !0
+									}));
+								},
+								children: t.dateDrawerNext
+							})]
+						})
+					})]
+				})
+			})]
+		})
+	});
 };
+//#endregion
+export { O as BookingMobileDateDrawer };

package/dist/components/BookingPeriodSelector/components/BookingPeriodFieldErrorMessage.js

@@ -1,7 +1,10 @@
-import { jsx as o } from "react/jsx-runtime";
-function i({ children: t }) {
-  return /* @__PURE__ */ o("p", { className: "pointer-events-none absolute left-0 top-full z-[1] mt-1 max-w-full translate-y-1 break-words rounded-md bg-destructive px-2 py-1 text-sm text-destructive-foreground opacity-0 shadow-sm transition-[opacity,transform,visibility] duration-150 invisible group-hover/form-item:visible group-hover/form-item:translate-y-0 group-hover/form-item:opacity-100 group-focus-within/form-item:visible group-focus-within/form-item:translate-y-0 group-focus-within/form-item:opacity-100", children: /* @__PURE__ */ o("span", { children: t }) });
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/BookingPeriodSelector/components/BookingPeriodFieldErrorMessage.tsx
+function t({ children: t }) {
+	return /* @__PURE__ */ e("p", {
+		className: "pointer-events-none absolute left-0 top-full z-[1] mt-1 max-w-full translate-y-1 break-words rounded-md bg-destructive px-2 py-1 text-sm text-destructive-foreground opacity-0 shadow-sm transition-[opacity,transform,visibility] duration-150 invisible group-hover/form-item:visible group-hover/form-item:translate-y-0 group-hover/form-item:opacity-100 group-focus-within/form-item:visible group-focus-within/form-item:translate-y-0 group-focus-within/form-item:opacity-100",
+		children: /* @__PURE__ */ e("span", { children: t })
+	});
 }
-export {
-  i as BookingPeriodFieldErrorMessage
-};
+//#endregion
+export { t as BookingPeriodFieldErrorMessage };