@planetaexo/design-system 0.91.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 = {