@planetaexo/design-system 0.91.0 → 0.92.3

package/dist/index.d.cts

@@ -517,13 +517,27 @@ interface PaymentAmountSelectorProps {
     fullLabel: string;
     value: "deposit" | "full";
     onChange: (value: "deposit" | "full") => void;
+    /**
+     * Quando true, o seletor fica ESMAECIDO e não-clicável (escolha já travada — ex.:
+     * após a 1ª parcela do sinal no checkout dividido). Mantém AMBAS as opções visíveis,
+     * com a selecionada destacada, em vez de ocultar a opção não escolhida.
+     */
+    disabled?: boolean;
 }
-declare function PaymentAmountSelector({ title, depositLabel, fullLabel, value, onChange, }: PaymentAmountSelectorProps): react_jsx_runtime.JSX.Element;
+declare function PaymentAmountSelector({ title, depositLabel, fullLabel, value, onChange, disabled, }: PaymentAmountSelectorProps): react_jsx_runtime.JSX.Element;
 interface PaymentMethodOption {
     id: string;
     label: string;
     description?: string;
     disabled?: boolean;
+    /**
+     * Conteúdo renderizado QUANDO este método está selecionado (`value === id`),
+     * no RODAPÉ do bloco "Forma de pagamento" — abaixo de TODAS as opções, não
+     * entre elas. Use para detalhes específicos do método selecionado — ex.: o
+     * campo de valor da parcela "neste cartão" no checkout dividido. Renderizado
+     * FORA do `<button>` (não aninhar controles interativos dentro de um button).
+     */
+    expandedContent?: React.ReactNode;
 }
 interface PaymentMethodSelectorProps {
     title?: string;

package/dist/index.d.ts

@@ -517,13 +517,27 @@ interface PaymentAmountSelectorProps {
     fullLabel: string;
     value: "deposit" | "full";
     onChange: (value: "deposit" | "full") => void;
+    /**
+     * Quando true, o seletor fica ESMAECIDO e não-clicável (escolha já travada — ex.:
+     * após a 1ª parcela do sinal no checkout dividido). Mantém AMBAS as opções visíveis,
+     * com a selecionada destacada, em vez de ocultar a opção não escolhida.
+     */
+    disabled?: boolean;
 }
-declare function PaymentAmountSelector({ title, depositLabel, fullLabel, value, onChange, }: PaymentAmountSelectorProps): react_jsx_runtime.JSX.Element;
+declare function PaymentAmountSelector({ title, depositLabel, fullLabel, value, onChange, disabled, }: PaymentAmountSelectorProps): react_jsx_runtime.JSX.Element;
 interface PaymentMethodOption {
     id: string;
     label: string;
     description?: string;
     disabled?: boolean;
+    /**
+     * Conteúdo renderizado QUANDO este método está selecionado (`value === id`),
+     * no RODAPÉ do bloco "Forma de pagamento" — abaixo de TODAS as opções, não
+     * entre elas. Use para detalhes específicos do método selecionado — ex.: o
+     * campo de valor da parcela "neste cartão" no checkout dividido. Renderizado
+     * FORA do `<button>` (não aninhar controles interativos dentro de um button).
+     */
+    expandedContent?: React.ReactNode;
 }
 interface PaymentMethodSelectorProps {
     title?: string;

package/dist/index.js

@@ -1846,18 +1846,25 @@ function PaymentAmountSelector({
   depositLabel,
   fullLabel,
   value,
-  onChange
+  onChange,
+  disabled = false
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ jsx("p", { className: "text-sm font-bold text-foreground font-heading", children: title }),
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2", children: ["deposit", "full"].map((opt) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-1 sm:grid-cols-2 gap-2", disabled && "opacity-60"), children: ["deposit", "full"].map((opt) => /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
-        onClick: () => onChange(opt),
+        disabled,
+        "aria-disabled": disabled,
+        onClick: () => !disabled && 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"
+          disabled && "cursor-not-allowed",
+          value === opt ? "border-primary bg-primary/5 text-foreground font-semibold" : cn(
+            "border-border bg-background text-muted-foreground",
+            !disabled && "hover:border-primary/40"
+          )
         ),
         children: opt === "deposit" ? depositLabel : fullLabel
       },
@@ -1911,7 +1918,11 @@ function PaymentMethodSelector({
         ]
       },
       m.id
-    )) })
+    )) }),
+    (() => {
+      const selected = methods.find((m) => m.id === value);
+      return (selected == null ? void 0 : selected.expandedContent) ? /* @__PURE__ */ jsx("div", { children: selected.expandedContent }) : null;
+    })()
   ] });
 }
 var TERMS_I18N = {
@@ -13764,6 +13775,8 @@ function SiteHeader({
   const [mobileOpen, setMobileOpen] = React20.useState(false);
   const [openMobileSection, setOpenMobileSection] = React20.useState(null);
   const [activeLang, setActiveLang] = React20.useState(currentLanguage);
+  const [mounted, setMounted] = React20.useState(false);
+  React20.useEffect(() => setMounted(true), []);
   const toggleMobileSection = (label) => setOpenMobileSection((prev) => prev === label ? null : label);
   const menuCloseTimer = React20.useRef(void 0);
   const langCloseTimer = React20.useRef(void 0);
@@ -13968,157 +13981,160 @@ function SiteHeader({
             )
           ] })
         ] }),
-        mobileOpen && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "fixed inset-0 z-50 lg:hidden flex flex-col",
-              variant === "white" ? "bg-white" : "bg-primary-900"
-            ),
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 h-[72px] shrink-0 border-b border-white/8", children: [
-                /* @__PURE__ */ jsx("a", { href: logoHref, className: "shrink-0 flex items-center", onClick: () => setMobileOpen(false), children: /* @__PURE__ */ jsx(
-                  "img",
-                  {
-                    src: resolvedLogo,
-                    alt: logoAlt,
-                    className: "h-14 w-auto select-none",
-                    draggable: false
-                  }
-                ) }),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => setMobileOpen(false),
-                    "aria-label": (_e = labels == null ? void 0 : labels.closeMenu) != null ? _e : "Close menu",
-                    className: cn(
-                      "flex h-9 w-9 items-center justify-center rounded-full transition-colors",
-                      t.mobileTrigger
-                    ),
-                    children: /* @__PURE__ */ jsx(XIcon, { className: "h-5 w-5" })
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx("nav", { className: "flex-1 overflow-y-auto px-6 py-6 flex flex-col gap-1", children: links.map((link) => {
-                var _a2, _b2;
-                const hasDropdown = !!((_a2 = link.items) == null ? void 0 : _a2.length);
-                const isExpanded = openMobileSection === link.label;
-                return /* @__PURE__ */ jsxs("div", { children: [
-                  hasDropdown ? /* @__PURE__ */ jsxs(
-                    "button",
+        mounted && mobileOpen && createPortal(
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "fixed inset-0 z-[1000] lg:hidden flex flex-col",
+                variant === "white" ? "bg-white" : "bg-primary-900"
+              ),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 h-[72px] shrink-0 border-b border-white/8", children: [
+                  /* @__PURE__ */ jsx("a", { href: logoHref, className: "shrink-0 flex items-center", onClick: () => setMobileOpen(false), children: /* @__PURE__ */ jsx(
+                    "img",
                     {
-                      type: "button",
-                      onClick: () => toggleMobileSection(link.label),
-                      className: cn(
-                        "flex items-center justify-between w-full py-4 text-xl font-ui font-black transition-colors border-b border-white/8",
-                        t.mobileLink
-                      ),
-                      children: [
-                        link.label,
-                        /* @__PURE__ */ jsx(
-                          ChevronDownIcon,
-                          {
-                            className: cn(
-                              "h-5 w-5 transition-transform duration-200 opacity-40",
-                              isExpanded && "rotate-180"
-                            )
-                          }
-                        )
-                      ]
+                      src: resolvedLogo,
+                      alt: logoAlt,
+                      className: "h-14 w-auto select-none",
+                      draggable: false
                     }
-                  ) : /* @__PURE__ */ jsx(
-                    "a",
+                  ) }),
+                  /* @__PURE__ */ jsx(
+                    "button",
                     {
-                      href: (_b2 = link.href) != null ? _b2 : "#",
+                      type: "button",
                       onClick: () => setMobileOpen(false),
+                      "aria-label": (_e = labels == null ? void 0 : labels.closeMenu) != null ? _e : "Close menu",
                       className: cn(
-                        "flex items-center py-4 text-xl font-ui font-black transition-colors border-b border-white/8",
-                        t.mobileLink
+                        "flex h-9 w-9 items-center justify-center rounded-full transition-colors",
+                        t.mobileTrigger
                       ),
-                      children: link.label
+                      children: /* @__PURE__ */ jsx(XIcon, { className: "h-5 w-5" })
                     }
-                  ),
-                  hasDropdown && isExpanded && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0 pl-4 pb-2", children: link.items.map((item) => {
-                    var _a3;
-                    return /* @__PURE__ */ jsx(
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("nav", { className: "flex-1 overflow-y-auto px-6 py-6 flex flex-col gap-1", children: links.map((link) => {
+                  var _a2, _b2;
+                  const hasDropdown = !!((_a2 = link.items) == null ? void 0 : _a2.length);
+                  const isExpanded = openMobileSection === link.label;
+                  return /* @__PURE__ */ jsxs("div", { children: [
+                    hasDropdown ? /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => toggleMobileSection(link.label),
+                        className: cn(
+                          "flex items-center justify-between w-full py-4 text-xl font-ui font-black transition-colors border-b border-white/8",
+                          t.mobileLink
+                        ),
+                        children: [
+                          link.label,
+                          /* @__PURE__ */ jsx(
+                            ChevronDownIcon,
+                            {
+                              className: cn(
+                                "h-5 w-5 transition-transform duration-200 opacity-40",
+                                isExpanded && "rotate-180"
+                              )
+                            }
+                          )
+                        ]
+                      }
+                    ) : /* @__PURE__ */ jsx(
                       "a",
                       {
-                        href: (_a3 = item.href) != null ? _a3 : "#",
+                        href: (_b2 = link.href) != null ? _b2 : "#",
                         onClick: () => setMobileOpen(false),
                         className: cn(
-                          "py-3 text-base font-ui font-bold transition-colors border-b",
-                          t.mobileSub
+                          "flex items-center py-4 text-xl font-ui font-black transition-colors border-b border-white/8",
+                          t.mobileLink
                         ),
-                        children: item.label
-                      },
-                      item.label
-                    );
-                  }) })
-                ] }, link.label);
-              }) }),
-              /* @__PURE__ */ jsxs("div", { className: cn(
-                "shrink-0 px-6 py-5 flex items-center justify-between border-t",
-                variant === "white" ? "border-border" : "border-white/10"
-              ), children: [
-                /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5 flex-wrap", children: languages.map((lang, i) => {
-                  const isActive = lang.code === activeLang;
-                  return /* @__PURE__ */ jsxs(React20.Fragment, { children: [
-                    i > 0 && /* @__PURE__ */ jsx("span", { className: cn(
-                      "text-xs select-none",
-                      variant === "white" ? "text-border" : "text-white/15"
-                    ), children: "\xB7" }),
+                        children: link.label
+                      }
+                    ),
+                    hasDropdown && isExpanded && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0 pl-4 pb-2", children: link.items.map((item) => {
+                      var _a3;
+                      return /* @__PURE__ */ jsx(
+                        "a",
+                        {
+                          href: (_a3 = item.href) != null ? _a3 : "#",
+                          onClick: () => setMobileOpen(false),
+                          className: cn(
+                            "py-3 text-base font-ui font-bold transition-colors border-b",
+                            t.mobileSub
+                          ),
+                          children: item.label
+                        },
+                        item.label
+                      );
+                    }) })
+                  ] }, link.label);
+                }) }),
+                /* @__PURE__ */ jsxs("div", { className: cn(
+                  "shrink-0 px-6 py-5 flex items-center justify-between border-t",
+                  variant === "white" ? "border-border" : "border-white/10"
+                ), children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5 flex-wrap", children: languages.map((lang, i) => {
+                    const isActive = lang.code === activeLang;
+                    return /* @__PURE__ */ jsxs(React20.Fragment, { children: [
+                      i > 0 && /* @__PURE__ */ jsx("span", { className: cn(
+                        "text-xs select-none",
+                        variant === "white" ? "text-border" : "text-white/15"
+                      ), children: "\xB7" }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => handleLangSelect(lang.code),
+                          className: cn(
+                            "font-ui font-black transition-all duration-150 rounded-full",
+                            isActive ? cn(
+                              "text-sm px-3 py-1 border",
+                              variant === "white" ? "text-primary border-primary bg-primary/8" : "text-primary-400 border-primary-400/50 bg-primary-400/10"
+                            ) : cn(
+                              "text-xs px-2 py-1",
+                              variant === "white" ? "text-muted-foreground hover:text-foreground" : "text-white/35 hover:text-white/70"
+                            )
+                          ),
+                          children: lang.code
+                        }
+                      )
+                    ] }, lang.code);
+                  }) }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
                     /* @__PURE__ */ jsx(
                       "button",
                       {
                         type: "button",
-                        onClick: () => handleLangSelect(lang.code),
-                        className: cn(
-                          "font-ui font-black transition-all duration-150 rounded-full",
-                          isActive ? cn(
-                            "text-sm px-3 py-1 border",
-                            variant === "white" ? "text-primary border-primary bg-primary/8" : "text-primary-400 border-primary-400/50 bg-primary-400/10"
-                          ) : cn(
-                            "text-xs px-2 py-1",
-                            variant === "white" ? "text-muted-foreground hover:text-foreground" : "text-white/35 hover:text-white/70"
-                          )
-                        ),
-                        children: lang.code
+                        onClick: () => {
+                          onSearch == null ? void 0 : onSearch();
+                          setMobileOpen(false);
+                        },
+                        "aria-label": (_f = labels == null ? void 0 : labels.search) != null ? _f : "Search",
+                        className: cn("flex h-9 w-9 items-center justify-center rounded-full transition-colors", t.icon),
+                        children: /* @__PURE__ */ jsx(SearchIcon, { className: "h-[18px] w-[18px]" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => {
+                          onAccount == null ? void 0 : onAccount();
+                          setMobileOpen(false);
+                        },
+                        "aria-label": (_g = labels == null ? void 0 : labels.account) != null ? _g : "Account",
+                        className: cn("flex h-9 w-9 items-center justify-center rounded-full transition-colors", t.icon),
+                        children: /* @__PURE__ */ jsx(UserIcon, { className: "h-[18px] w-[18px]" })
                       }
                     )
-                  ] }, lang.code);
-                }) }),
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => {
-                        onSearch == null ? void 0 : onSearch();
-                        setMobileOpen(false);
-                      },
-                      "aria-label": (_f = labels == null ? void 0 : labels.search) != null ? _f : "Search",
-                      className: cn("flex h-9 w-9 items-center justify-center rounded-full transition-colors", t.icon),
-                      children: /* @__PURE__ */ jsx(SearchIcon, { className: "h-[18px] w-[18px]" })
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => {
-                        onAccount == null ? void 0 : onAccount();
-                        setMobileOpen(false);
-                      },
-                      "aria-label": (_g = labels == null ? void 0 : labels.account) != null ? _g : "Account",
-                      className: cn("flex h-9 w-9 items-center justify-center rounded-full transition-colors", t.icon),
-                      children: /* @__PURE__ */ jsx(UserIcon, { className: "h-[18px] w-[18px]" })
-                    }
-                  )
+                  ] })
                 ] })
-              ] })
-            ]
-          }
+              ]
+            }
+          ),
+          document.body
         )
       ]
     }
@@ -19907,7 +19923,7 @@ function ExpeditionsRail({ eyebrow, title, subtitle, link, trips }) {
             type: "button",
             onClick: () => scrollByCard(-1),
             "aria-label": "Previous expeditions",
-            className: "flex h-11 w-11 items-center justify-center rounded-full border border-border bg-background text-foreground transition-colors hover:border-primary hover:bg-primary hover:text-primary-foreground",
+            className: "hidden h-11 w-11 items-center justify-center rounded-full border border-border bg-background text-foreground transition-colors hover:border-primary hover:bg-primary hover:text-primary-foreground lg:flex",
             children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "h-5 w-5" })
           }
         ),
@@ -19917,7 +19933,7 @@ function ExpeditionsRail({ eyebrow, title, subtitle, link, trips }) {
             type: "button",
             onClick: () => scrollByCard(1),
             "aria-label": "Next expeditions",
-            className: "flex h-11 w-11 items-center justify-center rounded-full border border-border bg-background text-foreground transition-colors hover:border-primary hover:bg-primary hover:text-primary-foreground",
+            className: "hidden h-11 w-11 items-center justify-center rounded-full border border-border bg-background text-foreground transition-colors hover:border-primary hover:bg-primary hover:text-primary-foreground lg:flex",
             children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-5 w-5" })
           }
         )