@planetaexo/design-system 0.10.0 → 0.11.0

package/dist/index.cjs

@@ -2404,7 +2404,18 @@ var STATUS_STYLES = {
   pendingPaymentOverdue: "bg-destructive/15 text-destructive dark:bg-destructive/25 dark:text-destructive",
   complete: "bg-success/15 text-success dark:bg-success/20 dark:text-success"
 };
-function StatusBadge({ status }) {
+var STATUS_DEFAULT_LABELS = {
+  pending: "Pending",
+  confirmed: "Confirmed",
+  cancelled: "Cancelled",
+  completed: "Completed",
+  pendingRegistration: "Pending registration",
+  pendingPayment: "Pending payment",
+  pendingPaymentOverdue: "Payment overdue",
+  complete: "Complete"
+};
+function StatusBadge({ status, label }) {
+  var _a;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
@@ -2412,7 +2423,7 @@ function StatusBadge({ status }) {
         "inline-flex items-center rounded-full px-3 py-1 text-xs font-bold font-heading uppercase tracking-wider",
         STATUS_STYLES[status]
       ),
-      children: status
+      children: (_a = label != null ? label : STATUS_DEFAULT_LABELS[status]) != null ? _a : status
     }
   );
 }
@@ -3245,6 +3256,7 @@ function OrderSummary({
 function BookingDetails({
   bookingId,
   status,
+  statusLabel,
   createdAt,
   contact,
   agent,
@@ -3400,7 +3412,7 @@ function BookingDetails({
                 createdAt
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status })
+            /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status, label: statusLabel })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-3", children: [
             /* @__PURE__ */ jsxRuntime.jsxs(InfoCard, { label: "Contact", children: [
@@ -4863,13 +4875,27 @@ function FormSection2({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-5", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-bold text-foreground whitespace-nowrap font-heading", children: title }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px flex-1 bg-border" })
-    ] }),
-    children
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("flex flex-col gap-5", className),
+      style: { breakInside: "avoid" },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "flex items-center gap-4",
+            style: { breakAfter: "avoid-page" },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-bold text-foreground whitespace-nowrap font-heading", children: title }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px flex-1 bg-border" })
+            ]
+          }
+        ),
+        children
+      ]
+    }
+  );
 }
 function isFieldEmpty(field, value) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i;
@@ -5783,10 +5809,14 @@ function RegistrationSuccessCard({
   adventure,
   booking,
   traveller,
-  tripInfoLabels
+  tripInfoLabels,
+  density = "comfortable",
+  submissionTimestamps,
+  submissionTimestampsLabels
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   const isMinimal = variant === "minimal";
+  const isCompact = density === "compact";
   const sorted = isMinimal ? [] : [...fields].sort((a, b) => {
     var _a2, _b2;
     return ((_a2 = a.order) != null ? _a2 : 0) - ((_b2 = b.order) != null ? _b2 : 0);
@@ -5800,62 +5830,114 @@ function RegistrationSuccessCard({
     partnerLabel: (_d = tripInfoLabels == null ? void 0 : tripInfoLabels.partnerLabel) != null ? _d : "Partner",
     travellerLabel: (_e = tripInfoLabels == null ? void 0 : tripInfoLabels.travellerLabel) != null ? _e : "Traveller"
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("rounded-xl border border-border bg-card p-6 sm:p-8 flex flex-col gap-10", className), children: [
-    actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-3 justify-end", children: actions }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-3 text-center", children: [
-      logo !== null && /* eslint-disable-next-line @next/next/no-img-element */
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "img",
-        {
-          src: logo != null ? logo : "/logo-planetaexo.png",
-          alt: logoAlt,
-          className: "h-10 w-auto object-contain"
-        }
+  const STL = {
+    submittedAt: (_f = submissionTimestampsLabels == null ? void 0 : submissionTimestampsLabels.submittedAt) != null ? _f : "Submitted",
+    lastUpdatedAt: (_g = submissionTimestampsLabels == null ? void 0 : submissionTimestampsLabels.lastUpdatedAt) != null ? _g : "Last updated"
+  };
+  const hasTimestamps = !isMinimal && !!submissionTimestamps && (!!submissionTimestamps.submittedAt || !!submissionTimestamps.lastUpdatedAt);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-xl border border-border bg-card p-6 sm:p-8 flex flex-col",
+        isCompact ? "gap-6" : "gap-10",
+        className
       ),
-      logo === void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex h-14 w-14 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheckIcon, { size: 28 }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-black uppercase tracking-wide text-foreground font-heading leading-tight", children: title }),
-      message && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground font-ui", children: message })
-    ] }),
-    hasTripInfo && /* @__PURE__ */ jsxRuntime.jsx(FormSection2, { title: TL.sectionTitle, children: /* @__PURE__ */ jsxRuntime.jsxs("dl", { className: "flex flex-col gap-y-3 text-sm font-ui", children: [
-      adventure && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-x-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: TL.adventureLabel }),
-        /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "w-1/2 text-foreground font-medium text-right min-w-0 break-words", children: adventure.name })
-      ] }),
-      dateRange && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-x-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: (adventure == null ? void 0 : adventure.startDate) && (adventure == null ? void 0 : adventure.endDate) ? "Dates" : "Date" }),
-        /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "w-1/2 text-foreground text-right min-w-0 break-words", children: dateRange })
-      ] }),
-      (adventure == null ? void 0 : adventure.partnerName) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-x-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: TL.partnerLabel }),
-        /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "w-1/2 text-foreground text-right min-w-0 break-words", children: adventure.partnerName })
-      ] }),
-      booking && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-x-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: TL.bookingLabel }),
-        /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "w-1/2 text-foreground font-mono tabular-nums text-right min-w-0 break-words", children: booking.id })
-      ] }),
-      traveller && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-x-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: TL.travellerLabel }),
-        /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "w-1/2 text-foreground font-medium text-right min-w-0 break-words", children: traveller.fullName })
-      ] })
-    ] }) }),
-    sorted.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(FormSection2, { title: answersTitle, children: /* @__PURE__ */ jsxRuntime.jsx("dl", { className: "flex flex-col gap-y-3 text-sm font-ui", children: sorted.map((f) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-x-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: f.label }),
-      /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "w-1/2 text-foreground text-right min-w-0 break-words", children: (formatAnswer != null ? formatAnswer : ((field, v) => defaultFormatAnswer(field, v, dateFormatter)))(
-        f,
-        answers[f.id]
-      ) })
-    ] }, f.id)) }) }),
-    !isMinimal && terms && /* @__PURE__ */ jsxRuntime.jsx(FormSection2, { title: (_f = termsLabels == null ? void 0 : termsLabels.title) != null ? _f : "Terms & Conditions", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 text-sm font-ui", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-          "inline-flex h-5 w-5 items-center justify-center rounded-full text-white text-xs font-bold",
-          terms.accepted ? "bg-primary" : "bg-destructive"
-        ), children: terms.accepted ? "\u2713" : "\u2717" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: terms.accepted ? "text-primary font-medium" : "text-destructive font-medium", children: terms.accepted ? (_g = termsLabels == null ? void 0 : termsLabels.accepted) != null ? _g : "Accepted" : (_h = termsLabels == null ? void 0 : termsLabels.notAccepted) != null ? _h : "Not accepted" })
-      ] }),
-      termsLayout === "full" && terms.markdown.trim().length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-border bg-muted/30 p-4", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "whitespace-pre-wrap break-words text-sm leading-relaxed text-foreground font-ui", children: terms.markdown }) })
-    ] }) })
-  ] });
+      children: [
+        actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-3 justify-end", children: actions }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-3 text-center", children: [
+          logo !== null && /* eslint-disable-next-line @next/next/no-img-element */
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: logo != null ? logo : "/logo-planetaexo.png",
+              alt: logoAlt,
+              className: "h-10 w-auto object-contain"
+            }
+          ),
+          logo === void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex h-14 w-14 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheckIcon, { size: 28 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-black uppercase tracking-wide text-foreground font-heading leading-tight", children: title }),
+          message && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground font-ui", children: message })
+        ] }),
+        hasTimestamps && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end gap-0.5 text-xs text-muted-foreground font-ui", children: [
+          (submissionTimestamps == null ? void 0 : submissionTimestamps.submittedAt) && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
+              STL.submittedAt,
+              ":"
+            ] }),
+            " ",
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums", children: submissionTimestamps.submittedAt })
+          ] }),
+          (submissionTimestamps == null ? void 0 : submissionTimestamps.lastUpdatedAt) && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
+              STL.lastUpdatedAt,
+              ":"
+            ] }),
+            " ",
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums", children: submissionTimestamps.lastUpdatedAt })
+          ] })
+        ] }),
+        hasTripInfo && /* @__PURE__ */ jsxRuntime.jsx(FormSection2, { title: TL.sectionTitle, children: /* @__PURE__ */ jsxRuntime.jsxs("dl", { className: "flex flex-col gap-y-3 text-sm font-ui", children: [
+          adventure && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-x-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: TL.adventureLabel }),
+            /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "w-1/2 text-foreground font-medium text-right min-w-0 break-words", children: adventure.name })
+          ] }),
+          dateRange && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-x-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: (adventure == null ? void 0 : adventure.startDate) && (adventure == null ? void 0 : adventure.endDate) ? "Dates" : "Date" }),
+            /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "w-1/2 text-foreground text-right min-w-0 break-words", children: dateRange })
+          ] }),
+          (adventure == null ? void 0 : adventure.partnerName) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-x-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: TL.partnerLabel }),
+            /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "w-1/2 text-foreground text-right min-w-0 break-words", children: adventure.partnerName })
+          ] }),
+          booking && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-x-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: TL.bookingLabel }),
+            /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "w-1/2 text-foreground font-mono tabular-nums text-right min-w-0 break-words", children: booking.id })
+          ] }),
+          traveller && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-x-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: TL.travellerLabel }),
+            /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "w-1/2 text-foreground font-medium text-right min-w-0 break-words", children: traveller.fullName })
+          ] })
+        ] }) }),
+        sorted.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(FormSection2, { title: answersTitle, children: /* @__PURE__ */ jsxRuntime.jsx("dl", { className: "flex flex-col gap-y-3 text-sm font-ui", children: sorted.map((f) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-x-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: f.label }),
+          /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "w-1/2 text-foreground text-right min-w-0 break-words", children: (formatAnswer != null ? formatAnswer : ((field, v) => defaultFormatAnswer(field, v, dateFormatter)))(
+            f,
+            answers[f.id]
+          ) })
+        ] }, f.id)) }) }),
+        !isMinimal && terms && /* @__PURE__ */ jsxRuntime.jsx(FormSection2, { title: (_h = termsLabels == null ? void 0 : termsLabels.title) != null ? _h : "Terms & Conditions", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 text-sm font-ui", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
+              "inline-flex h-5 w-5 items-center justify-center rounded-full text-white text-xs font-bold",
+              terms.accepted ? "bg-primary" : "bg-destructive"
+            ), children: terms.accepted ? "\u2713" : "\u2717" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: terms.accepted ? "text-primary font-medium" : "text-destructive font-medium", children: terms.accepted ? (_i = termsLabels == null ? void 0 : termsLabels.accepted) != null ? _i : "Accepted" : (_j = termsLabels == null ? void 0 : termsLabels.notAccepted) != null ? _j : "Not accepted" })
+          ] }),
+          termsLayout === "full" && terms.markdown.trim().length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "rounded-lg border border-border bg-muted/30",
+                isCompact ? "p-3" : "p-4"
+              ),
+              style: { breakInside: "auto" },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "whitespace-pre-wrap break-words text-foreground font-ui",
+                    isCompact ? "text-xs leading-snug" : "text-sm leading-relaxed"
+                  ),
+                  children: terms.markdown
+                }
+              )
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
 }
 var OTPCodeInput = ({
   value,