@planetaexo/design-system 0.3.3 → 0.3.5

package/dist/index.cjs

@@ -1556,6 +1556,103 @@ function BookingShell({
     ] })
   ] });
 }
+function PaymentAmountSelector({
+  title = "What do you want to pay now?",
+  depositLabel,
+  fullLabel,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-bold text-foreground font-heading", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2", children: ["deposit", "full"].map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onChange(opt),
+        className: cn(
+          "rounded-lg border-2 px-4 py-3 text-sm text-left font-sans transition-colors",
+          value === opt ? "border-primary bg-primary/5 text-foreground font-semibold" : "border-border bg-background text-muted-foreground hover:border-primary/40"
+        ),
+        children: opt === "deposit" ? depositLabel : fullLabel
+      },
+      opt
+    )) })
+  ] });
+}
+function PaymentMethodSelector({
+  title = "Payment method",
+  methods,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-border p-4 flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: methods.map((m) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        disabled: m.disabled,
+        onClick: () => !m.disabled && onChange(m.id),
+        className: cn(
+          "flex items-start gap-3 rounded-lg border-2 px-4 py-3 text-left transition-colors",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          value === m.id ? "border-primary bg-primary/5" : "border-border bg-background hover:border-primary/40"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
+                value === m.id ? "border-primary" : "border-border"
+              ),
+              children: value === m.id && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-2 w-2 rounded-full bg-primary" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col gap-0.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(
+                  "text-sm font-semibold font-sans",
+                  value === m.id ? "text-primary" : "text-foreground"
+                ),
+                children: m.label
+              }
+            ),
+            m.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground font-sans", children: m.description })
+          ] })
+        ]
+      },
+      m.id
+    )) })
+  ] });
+}
+function TermsSection({
+  title = "Terms and conditions",
+  checked,
+  onChange,
+  label,
+  warningMessage
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-border p-4 flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-start gap-2.5 cursor-pointer", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked,
+          onChange: (e) => onChange(e.target.checked),
+          className: "h-4 w-4 shrink-0 mt-0.5 rounded border-border accent-primary cursor-pointer"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-sans text-foreground/80 leading-snug", children: label })
+    ] }),
+    !checked && warningMessage && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-amber-400 flex items-center gap-1", children: warningMessage })
+  ] });
+}
 var WIZARD_STEPS = [
   { id: "responsible", label: "Responsible party details" },
   { id: "travellers", label: "Travellers" },
@@ -1772,70 +1869,33 @@ function BookingWizard({
         ] }),
         step === "payment" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5", children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground font-sans", children: "When you confirm, we will open secure online payment (Stripe). Choose deposit vs full amount below when applicable." }),
-          depositInfo && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-bold text-foreground font-heading", children: "What do you want to pay now?" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2", children: ["deposit", "full"].map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => setPayAmount(opt),
-                className: cn(
-                  "rounded-lg border-2 px-4 py-3 text-sm text-left font-sans transition-colors",
-                  payAmount === opt ? "border-primary bg-primary/5 text-foreground font-semibold" : "border-border bg-background text-muted-foreground hover:border-primary/40"
-                ),
-                children: opt === "deposit" ? depositLabel : fullLabel
-              },
-              opt
-            )) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-border p-4 flex flex-col gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "$" }),
-              " Payment method"
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: [
-              { id: "stripe", label: "Credit / Debit card", sub: "Secure payment via Stripe" },
-              { id: "pix", label: "PIX", sub: "Instant transfer \u2014 Brazil only" },
-              { id: "bank", label: "Bank transfer", sub: "Wire / TED / DOC" }
-            ].map((m) => /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                type: "button",
-                onClick: () => setPayMethod(m.id),
-                className: cn(
-                  "flex items-start gap-3 rounded-lg border-2 px-4 py-3 text-left transition-colors",
-                  payMethod === m.id ? "border-primary bg-primary/5" : "border-border bg-background hover:border-primary/40"
-                ),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-                    "mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
-                    payMethod === m.id ? "border-primary" : "border-border"
-                  ), children: payMethod === m.id && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-2 w-2 rounded-full bg-primary" }) }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col gap-0.5", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-                      "text-sm font-semibold font-sans",
-                      payMethod === m.id ? "text-primary" : "text-foreground"
-                    ), children: m.label }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground font-sans", children: m.sub })
-                  ] })
-                ]
-              },
-              m.id
-            )) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-border p-4 flex flex-col gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest", children: "Terms and conditions" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-start gap-2.5 cursor-pointer", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
-                {
-                  type: "checkbox",
-                  checked: termsAccepted,
-                  onChange: (e) => setTermsAccepted(e.target.checked),
-                  className: "h-4 w-4 shrink-0 mt-0.5 rounded border-border accent-primary cursor-pointer"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-sans text-foreground/80 leading-snug", children: [
+          depositInfo && /* @__PURE__ */ jsxRuntime.jsx(
+            PaymentAmountSelector,
+            {
+              depositLabel,
+              fullLabel,
+              value: payAmount,
+              onChange: setPayAmount
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            PaymentMethodSelector,
+            {
+              methods: [
+                { id: "stripe", label: "Credit / Debit card", description: "Secure payment via Stripe" },
+                { id: "pix", label: "PIX", description: "Instant transfer \u2014 Brazil only" },
+                { id: "bank", label: "Bank transfer", description: "Wire / TED / DOC" }
+              ],
+              value: payMethod,
+              onChange: (v) => setPayMethod(v)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TermsSection,
+            {
+              checked: termsAccepted,
+              onChange: setTermsAccepted,
+              label: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 "I have read and accept the",
                 " ",
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -1850,8 +1910,8 @@ function BookingWizard({
                 " ",
                 "of the reservation."
               ] })
-            ] })
-          ] }),
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: termsModalOpen, onOpenChange: setTermsModalOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "!max-w-[80vw] w-[80vw] max-h-[85vh] overflow-y-auto", children: [
             /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "font-heading text-xl", children: "Terms and Conditions" }) }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 text-sm font-sans text-foreground/80 leading-relaxed", children: [
@@ -6363,6 +6423,81 @@ function ActivityCard({
     }
   );
 }
+var VARIANT_STYLES = {
+  error: "text-destructive border-destructive/30 bg-destructive/5",
+  warning: "text-amber-400 border-amber-500/30 bg-amber-500/10",
+  success: "text-primary border-primary/30 bg-primary/10",
+  info: "text-muted-foreground border-primary/25 bg-primary/5"
+};
+function Alert({ variant = "info", children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-lg border px-3 py-2 text-sm font-sans leading-snug",
+        VARIANT_STYLES[variant],
+        className
+      ),
+      children
+    }
+  );
+}
+function PaymentModalShell({
+  open,
+  title,
+  subtitle,
+  bookingRef,
+  busy,
+  busyMessage,
+  onClose,
+  closeLabel = "Cancel",
+  closeDisabled,
+  children,
+  className
+}) {
+  if (!open) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "fixed inset-0 z-[100] flex items-center justify-center bg-black/70 p-4",
+      role: "dialog",
+      "aria-modal": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "relative w-full max-w-md rounded-2xl border border-border bg-card p-6 shadow-xl",
+            "max-h-[90vh] overflow-y-auto",
+            className
+          ),
+          children: [
+            onClose && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => !closeDisabled && onClose(),
+                disabled: closeDisabled,
+                "aria-label": closeLabel,
+                className: "absolute right-4 top-4 text-xl leading-none text-muted-foreground hover:text-foreground disabled:opacity-40 transition-colors",
+                children: "\xD7"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "pr-8 text-lg font-bold text-foreground font-heading", children: title }),
+            subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-muted-foreground font-sans", children: subtitle }),
+            bookingRef != null && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-1 text-xs text-muted-foreground font-sans", children: [
+              "#",
+              bookingRef
+            ] }),
+            busy ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 flex flex-col items-center gap-4 py-6", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-10 w-10 animate-spin rounded-full border-2 border-primary/30 border-t-primary" }),
+              busyMessage && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-muted-foreground font-sans", children: busyMessage })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6", children })
+          ]
+        }
+      )
+    }
+  );
+}
 function Input(_a) {
   var _b = _a, { className, type } = _b, props = __objRest(_b, ["className", "type"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -6727,6 +6862,7 @@ function LeadCapturePopup({
 }
 
 exports.ActivityCard = ActivityCard;
+exports.Alert = Alert;
 exports.BookingConfirmation = BookingConfirmation;
 exports.BookingConfirmationEmail = BookingConfirmationEmail;
 exports.BookingDetails = BookingDetails;
@@ -6746,10 +6882,14 @@ exports.LeadCapturePopup = LeadCapturePopup;
 exports.MenuTrip = MenuTrip;
 exports.Offer = Offer;
 exports.OfferAdventureCard = OfferAdventureCard;
+exports.PaymentAmountSelector = PaymentAmountSelector;
+exports.PaymentMethodSelector = PaymentMethodSelector;
+exports.PaymentModalShell = PaymentModalShell;
 exports.PhoneCountrySelect = PhoneCountrySelect;
 exports.PhotoGallery = PhotoGallery;
 exports.PricingTrip = PricingTrip;
 exports.SiteHeader = SiteHeader;
+exports.TermsSection = TermsSection;
 exports.ThemeToggle = ThemeToggle;
 exports.TripCard = TripCard;
 exports.TripHeader = TripHeader;