@planetaexo/design-system 0.3.2 → 0.3.4

package/dist/index.cjs

@@ -1475,6 +1475,184 @@ function BirthDateField({
     ) })
   ] });
 }
+function BookingShell({
+  steps,
+  currentStep,
+  title = "Booking details",
+  children,
+  onNext,
+  onBack,
+  onCancel,
+  nextLabel = "Next",
+  backLabel = "Back",
+  cancelLabel = "Cancel",
+  nextDisabled,
+  nextBlockedMessage,
+  error,
+  successMessage
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl border border-border bg-card overflow-hidden", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-border px-5 py-4 bg-muted/20", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-bold text-foreground font-heading mb-2", children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1.5 flex-wrap", children: steps.map((label, i) => /* @__PURE__ */ jsxRuntime.jsxs(React18__namespace.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "text-xs font-sans",
+              i === currentStep ? "text-primary font-semibold" : i < currentStep ? "text-foreground" : "text-muted-foreground"
+            ),
+            children: label
+          }
+        ),
+        i < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: "w-3 h-3 text-muted-foreground shrink-0" })
+      ] }, i)) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-5 flex flex-col gap-5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { children }),
+      error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive font-sans", children: error }),
+      successMessage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-sans rounded-lg px-3 py-2 bg-primary/10 border border-primary/30 text-primary", children: successMessage }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+          currentStep > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: onBack,
+              className: "flex items-center gap-1.5 rounded-full border border-border px-5 py-2.5 text-sm text-foreground font-sans hover:bg-muted/50 transition-colors",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeftIcon, { className: "w-3.5 h-3.5" }),
+                backLabel
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onNext,
+              disabled: nextDisabled,
+              className: cn(
+                "rounded-full bg-primary px-8 py-2.5 text-sm font-bold",
+                "text-primary-foreground font-heading transition-colors hover:bg-primary/90",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                nextDisabled && "opacity-50 pointer-events-none"
+              ),
+              children: nextLabel
+            }
+          )
+        ] }),
+        nextDisabled && nextBlockedMessage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-amber-400 bg-amber-500/10 border border-amber-500/30 rounded-lg px-3 py-2", children: nextBlockedMessage }),
+        currentStep === 0 && onCancel && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onCancel,
+            className: "text-sm text-muted-foreground font-sans hover:text-foreground transition-colors self-start underline underline-offset-2",
+            children: cancelLabel
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+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" },
@@ -1587,265 +1765,186 @@ function BookingWizard({
       )
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl border border-border bg-card overflow-hidden", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-border px-5 py-4 bg-muted/20", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-bold text-foreground font-heading mb-2", children: "Booking details" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1.5 flex-wrap", children: WIZARD_STEPS.map((s, i) => /* @__PURE__ */ jsxRuntime.jsxs(React18__namespace.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: cn(
-              "text-xs font-sans",
-              s.id === step ? "text-primary font-semibold" : i < stepIndex ? "text-foreground" : "text-muted-foreground"
-            ),
-            children: s.label
-          }
-        ),
-        i < WIZARD_STEPS.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: "w-3 h-3 text-muted-foreground shrink-0" })
-      ] }, s.id)) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-5 flex flex-col gap-5", children: [
-      step === "responsible" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground font-sans", children: "Enter the responsible person's details. This person will receive booking confirmations and is accountable for all travellers." }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(FloatingInput, { label: "First name", required: true, value: responsible.firstName, onChange: (e) => setR("firstName", e.target.value) }),
-          /* @__PURE__ */ jsxRuntime.jsx(FloatingInput, { label: "Last name", required: true, value: responsible.lastName, onChange: (e) => setR("lastName", e.target.value) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(FloatingInput, { label: "Email", type: "email", required: true, value: responsible.email, onChange: (e) => setR("email", e.target.value) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full min-w-0", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(PhoneCountrySelect, { value: responsible.phoneCountry, onChange: (c) => setR("phoneCountry", c), className: "shrink-0" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
-                {
-                  id: "wiz-phone",
-                  type: "tel",
-                  placeholder: " ",
-                  value: responsible.phone,
-                  onChange: (e) => setR("phone", e.target.value),
-                  className: "peer block h-14 w-full rounded-r-lg border border-border bg-background px-3 pt-5 pb-2 text-base text-foreground font-ui transition-colors placeholder-transparent focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "wiz-phone", className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-base text-muted-foreground font-ui transition-all duration-150 peer-focus:top-3 peer-focus:translate-y-0 peer-focus:text-xs peer-focus:text-primary peer-not-placeholder-shown:top-3 peer-not-placeholder-shown:translate-y-0 peer-not-placeholder-shown:text-xs", children: "Phone" })
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(CountrySearchField, { required: true, value: responsible.country, onChange: (code) => setR("country", code) }),
-        /* @__PURE__ */ jsxRuntime.jsx(FloatingInput, { label: "Passport / CPF", required: true, value: responsible.passport, onChange: (e) => setR("passport", e.target.value) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "textarea",
-            {
-              id: "wiz-notes",
-              placeholder: " ",
-              rows: 3,
-              value: responsible.notes,
-              onChange: (e) => setR("notes", e.target.value),
-              className: "peer block w-full resize-none rounded-lg border border-border bg-background px-3 pt-6 pb-3 text-base text-foreground font-ui transition-colors placeholder-transparent focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "wiz-notes", className: "pointer-events-none absolute left-3 top-4 text-base text-muted-foreground font-ui transition-all duration-150 peer-focus:top-2 peer-focus:text-xs peer-focus:text-primary peer-not-placeholder-shown:top-2 peer-not-placeholder-shown:text-xs", children: "Notes (optional)" })
-        ] })
-      ] }),
-      step === "travellers" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UsersIcon, { className: "w-5 h-5 text-primary shrink-0" }),
-          /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-bold text-foreground font-heading text-base", children: "Traveller details" })
-        ] }),
-        travellers.map((t, i) => {
-          const isChild = i >= totalAdults;
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-border p-4 flex flex-col gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm font-bold text-foreground font-heading", children: [
-                "Traveller ",
-                i + 1
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-                "text-xs font-semibold font-heading rounded-full px-2.5 py-0.5",
-                isChild ? "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400" : "bg-primary/10 text-primary"
-              ), children: isChild ? "Crian\xE7a" : "Adulto" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(FloatingInput, { label: "First name", required: true, value: t.firstName, onChange: (e) => setT(i, "firstName", e.target.value) }),
-              /* @__PURE__ */ jsxRuntime.jsx(FloatingInput, { label: "Last name", required: true, value: t.lastName, onChange: (e) => setT(i, "lastName", e.target.value) })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                BirthDateField,
-                {
-                  label: "Date of birth",
-                  required: isChild,
-                  value: t.dateOfBirth,
-                  onChange: (d) => setTDob(i, d)
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                FloatingInput,
-                {
-                  label: "Email",
-                  type: "email",
-                  value: t.email,
-                  onChange: (e) => setT(i, "email", e.target.value)
-                }
-              )
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BookingShell,
+    {
+      steps: WIZARD_STEPS.map((s) => s.label),
+      currentStep: stepIndex,
+      title: "Booking details",
+      onNext: goNext,
+      onBack: goPrev,
+      onCancel,
+      nextLabel: step === "payment" ? "Confirm booking" : "Next",
+      backLabel: "Back",
+      cancelLabel: "Cancel",
+      error,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5", children: [
+        step === "responsible" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground font-sans", children: "Enter the responsible person's details. This person will receive booking confirmations and is accountable for all travellers." }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(FloatingInput, { label: "First name", required: true, value: responsible.firstName, onChange: (e) => setR("firstName", e.target.value) }),
+            /* @__PURE__ */ jsxRuntime.jsx(FloatingInput, { label: "Last name", required: true, value: responsible.lastName, onChange: (e) => setR("lastName", e.target.value) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(FloatingInput, { label: "Email", type: "email", required: true, value: responsible.email, onChange: (e) => setR("email", e.target.value) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full min-w-0", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(PhoneCountrySelect, { value: responsible.phoneCountry, onChange: (c) => setR("phoneCountry", c), className: "shrink-0" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    id: "wiz-phone",
+                    type: "tel",
+                    placeholder: " ",
+                    value: responsible.phone,
+                    onChange: (e) => setR("phone", e.target.value),
+                    className: "peer block h-14 w-full rounded-r-lg border border-border bg-background px-3 pt-5 pb-2 text-base text-foreground font-ui transition-colors placeholder-transparent focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "wiz-phone", className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-base text-muted-foreground font-ui transition-all duration-150 peer-focus:top-3 peer-focus:translate-y-0 peer-focus:text-xs peer-focus:text-primary peer-not-placeholder-shown:top-3 peer-not-placeholder-shown:translate-y-0 peer-not-placeholder-shown:text-xs", children: "Phone" })
+              ] })
             ] })
-          ] }, i);
-        })
-      ] }),
-      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(CountrySearchField, { required: true, value: responsible.country, onChange: (code) => setR("country", code) }),
+          /* @__PURE__ */ jsxRuntime.jsx(FloatingInput, { label: "Passport / CPF", required: true, value: responsible.passport, onChange: (e) => setR("passport", e.target.value) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
+              "textarea",
               {
-                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"
+                id: "wiz-notes",
+                placeholder: " ",
+                rows: 3,
+                value: responsible.notes,
+                onChange: (e) => setR("notes", e.target.value),
+                className: "peer block w-full resize-none rounded-lg border border-border bg-background px-3 pt-6 pb-3 text-base text-foreground font-ui transition-colors placeholder-transparent focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary"
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-sans text-foreground/80 leading-snug", children: [
-              "I have read and accept the",
-              " ",
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setTermsModalOpen(true),
-                  className: "underline underline-offset-2 text-primary hover:text-primary/80 transition-colors font-semibold",
-                  children: "terms and conditions"
-                }
-              ),
-              " ",
-              "of the reservation."
-            ] })
+            /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "wiz-notes", className: "pointer-events-none absolute left-3 top-4 text-base text-muted-foreground font-ui transition-all duration-150 peer-focus:top-2 peer-focus:text-xs peer-focus:text-primary peer-not-placeholder-shown:top-2 peer-not-placeholder-shown:text-xs", children: "Notes (optional)" })
           ] })
         ] }),
-        /* @__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: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { children: 'These terms and conditions ("Terms") govern the booking of travel experiences offered through Planeta EXO ("Company"). By confirming a booking, you agree to these Terms in full.' }),
-            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-bold text-foreground font-heading text-base", children: "1. Bookings and payments" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { children: "A booking is confirmed upon receipt of the required deposit or full payment. The deposit amount is specified in your offer. The remaining balance must be paid by the balance due date stated in your offer." }),
-            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-bold text-foreground font-heading text-base", children: "2. Cancellation policy" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Cancellations made more than 60 days before departure are eligible for a full refund of the deposit. Cancellations between 30 and 60 days forfeit 50% of the deposit. Cancellations within 30 days of departure are non-refundable." }),
-            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-bold text-foreground font-heading text-base", children: "3. Changes and modifications" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { children: "The Company reserves the right to modify itineraries due to weather, safety, or operational reasons. Equivalent alternatives will be offered wherever possible." }),
-            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-bold text-foreground font-heading text-base", children: "4. Travel insurance" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Comprehensive travel insurance is strongly recommended. The Company is not liable for costs arising from trip interruption, medical emergencies, or personal loss." }),
-            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-bold text-foreground font-heading text-base", children: "5. Liability" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Participation in adventure activities carries inherent risk. By booking, you acknowledge and accept these risks. The Company's liability is limited to the total booking amount." }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
-              DialogClose,
-              {
-                render: /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
+        step === "travellers" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UsersIcon, { className: "w-5 h-5 text-primary shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-bold text-foreground font-heading text-base", children: "Traveller details" })
+          ] }),
+          travellers.map((t, i) => {
+            const isChild = i >= totalAdults;
+            return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-border p-4 flex flex-col gap-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm font-bold text-foreground font-heading", children: [
+                  "Traveller ",
+                  i + 1
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+                  "text-xs font-semibold font-heading rounded-full px-2.5 py-0.5",
+                  isChild ? "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400" : "bg-primary/10 text-primary"
+                ), children: isChild ? "Crian\xE7a" : "Adulto" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(FloatingInput, { label: "First name", required: true, value: t.firstName, onChange: (e) => setT(i, "firstName", e.target.value) }),
+                /* @__PURE__ */ jsxRuntime.jsx(FloatingInput, { label: "Last name", required: true, value: t.lastName, onChange: (e) => setT(i, "lastName", e.target.value) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  BirthDateField,
                   {
-                    type: "button",
-                    className: "rounded-full bg-primary px-6 py-2.5 text-sm font-bold text-primary-foreground font-heading hover:bg-primary/90 transition-colors"
+                    label: "Date of birth",
+                    required: isChild,
+                    value: t.dateOfBirth,
+                    onChange: (d) => setTDob(i, d)
                   }
                 ),
-                children: "Close"
-              }
-            ) })
-          ] })
-        ] }) })
-      ] }),
-      error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive font-sans", children: error }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-          stepIndex > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  FloatingInput,
+                  {
+                    label: "Email",
+                    type: "email",
+                    value: t.email,
+                    onChange: (e) => setT(i, "email", e.target.value)
+                  }
+                )
+              ] })
+            ] }, i);
+          })
+        ] }),
+        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.jsx(
+            PaymentAmountSelector,
             {
-              type: "button",
-              onClick: goPrev,
-              className: "flex items-center gap-1.5 rounded-full border border-border px-5 py-2.5 text-sm text-foreground font-sans hover:bg-muted/50 transition-colors",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeftIcon, { className: "w-3.5 h-3.5" }),
-                "Back"
-              ]
+              depositLabel,
+              fullLabel,
+              value: payAmount,
+              onChange: setPayAmount
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
+            PaymentMethodSelector,
             {
-              type: "button",
-              onClick: goNext,
-              className: cn(
-                "rounded-full bg-primary px-8 py-2.5 text-sm font-bold",
-                "text-primary-foreground font-heading transition-colors hover:bg-primary/90",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              ),
-              children: step === "payment" ? "Confirm booking" : "Next"
+              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)
             }
-          )
-        ] }),
-        stepIndex === 0 && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: onCancel,
-            className: "text-sm text-muted-foreground font-sans hover:text-foreground transition-colors self-start underline underline-offset-2",
-            children: "Cancel"
-          }
-        )
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TermsSection,
+            {
+              checked: termsAccepted,
+              onChange: setTermsAccepted,
+              label: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                "I have read and accept the",
+                " ",
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setTermsModalOpen(true),
+                    className: "underline underline-offset-2 text-primary hover:text-primary/80 transition-colors font-semibold",
+                    children: "terms and conditions"
+                  }
+                ),
+                " ",
+                "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: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { children: 'These terms and conditions ("Terms") govern the booking of travel experiences offered through Planeta EXO ("Company"). By confirming a booking, you agree to these Terms in full.' }),
+              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-bold text-foreground font-heading text-base", children: "1. Bookings and payments" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { children: "A booking is confirmed upon receipt of the required deposit or full payment. The deposit amount is specified in your offer. The remaining balance must be paid by the balance due date stated in your offer." }),
+              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-bold text-foreground font-heading text-base", children: "2. Cancellation policy" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Cancellations made more than 60 days before departure are eligible for a full refund of the deposit. Cancellations between 30 and 60 days forfeit 50% of the deposit. Cancellations within 30 days of departure are non-refundable." }),
+              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-bold text-foreground font-heading text-base", children: "3. Changes and modifications" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { children: "The Company reserves the right to modify itineraries due to weather, safety, or operational reasons. Equivalent alternatives will be offered wherever possible." }),
+              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-bold text-foreground font-heading text-base", children: "4. Travel insurance" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Comprehensive travel insurance is strongly recommended. The Company is not liable for costs arising from trip interruption, medical emergencies, or personal loss." }),
+              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-bold text-foreground font-heading text-base", children: "5. Liability" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Participation in adventure activities carries inherent risk. By booking, you acknowledge and accept these risks. The Company's liability is limited to the total booking amount." }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+                DialogClose,
+                {
+                  render: /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "rounded-full bg-primary px-6 py-2.5 text-sm font-bold text-primary-foreground font-heading hover:bg-primary/90 transition-colors"
+                    }
+                  ),
+                  children: "Close"
+                }
+              ) })
+            ] })
+          ] }) })
+        ] })
       ] })
-    ] })
-  ] });
+    }
+  );
 }
 function OfferAdventureCard({ adventure }) {
   return /* @__PURE__ */ jsxRuntime.jsx(AdventureCard, { adventure });
@@ -6692,6 +6791,7 @@ exports.BookingConfirmation = BookingConfirmation;
 exports.BookingConfirmationEmail = BookingConfirmationEmail;
 exports.BookingDetails = BookingDetails;
 exports.BookingForm = BookingForm;
+exports.BookingShell = BookingShell;
 exports.COUNTRIES = COUNTRIES;
 exports.CounterField = CounterField;
 exports.CountrySearchField = CountrySearchField;
@@ -6706,10 +6806,13 @@ exports.LeadCapturePopup = LeadCapturePopup;
 exports.MenuTrip = MenuTrip;
 exports.Offer = Offer;
 exports.OfferAdventureCard = OfferAdventureCard;
+exports.PaymentAmountSelector = PaymentAmountSelector;
+exports.PaymentMethodSelector = PaymentMethodSelector;
 exports.PhoneCountrySelect = PhoneCountrySelect;
 exports.PhotoGallery = PhotoGallery;
 exports.PricingTrip = PricingTrip;
 exports.SiteHeader = SiteHeader;
+exports.TermsSection = TermsSection;
 exports.ThemeToggle = ThemeToggle;
 exports.TripCard = TripCard;
 exports.TripHeader = TripHeader;