@planetaexo/design-system 0.89.0 → 0.92.2

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 = {
@@ -14419,7 +14430,8 @@ function TripCardEditorial(props) {
       {
         href,
         "aria-label": title,
-        className: "absolute inset-0 z-[1] rounded-2xl focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        className: "absolute inset-0 z-[1] rounded-2xl focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: title })
       }
     )
   ] });
@@ -18725,7 +18737,8 @@ function HomeHeader({
                         target: "_blank",
                         rel: "noopener noreferrer",
                         "aria-label": "Read our reviews on Trustpilot",
-                        className: "absolute inset-0 z-10"
+                        className: "absolute inset-0 z-10",
+                        children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Read our reviews on Trustpilot" })
                       }
                     )
                   ]