@planetaexo/design-system 0.12.6 → 0.13.0

package/dist/index.d.cts

@@ -30,6 +30,26 @@ interface OfferOptionalItem {
     checked?: boolean;
     /** Controlled: chamado ao marcar/desmarcar. Ignorado se `checked` não for passado. */
     onCheckedChange?: (id: string, checked: boolean) => void;
+    /** Quantidade atual (controlled). Quando ausente, o stepper não aparece. */
+    quantity?: number;
+    /** Chamado ao alterar a quantidade via stepper. Necessário para que o stepper apareça. */
+    onQuantityChange?: (id: string, next: number) => void;
+    /**
+     * Esconde explicitamente o stepper mesmo quando `quantity`/`onQuantityChange` estão presentes
+     * (ex.: opcional com billingType=VALOR_TOTAL onde a quantidade não impacta o preço).
+     * Default: `true` (stepper aparece quando `checked && quantity != null`).
+     */
+    showQuantityControl?: boolean;
+    /** Quantidade mínima permitida no stepper. Default: 1. */
+    minQuantity?: number;
+    /** Quantidade máxima permitida no stepper. Default: 50. */
+    maxQuantity?: number;
+    /** Texto pré-formatado da data agendada para exibição read-only (ex.: "10/05/2026"). */
+    scheduledAtLabel?: string;
+    /** aria-label para o botão de decrementar quantidade. Default: "Decrease quantity". */
+    decreaseQuantityLabel?: string;
+    /** aria-label para o botão de incrementar quantidade. Default: "Increase quantity". */
+    increaseQuantityLabel?: string;
 }
 interface OfferAdventureItem {
     id: string;
@@ -315,6 +335,9 @@ interface BookingDepositInfo {
     dueDateLabel?: string;
     /** Quando true, troca cor do botão "Pay remaining balance" para variante destructive. */
     isOverdue?: boolean;
+    /** Total efectivamente pago (com juros embutidos quando houver). Quando undefined,
+     *  a linha "Total paid" não é renderizada no OrderSummary. */
+    totalPaid?: string;
 }
 interface BookingDetailsProps {
     bookingId: string;
@@ -348,6 +371,9 @@ interface BookingDetailsProps {
     payBalanceLabel?: string;
     /** Label da linha "Balance due" no OrderSummary (default: "Balance due"). */
     balanceDueLabel?: string;
+    /** Label da linha "Total paid" no OrderSummary (default: "Total paid"). Apenas
+     *  renderizada quando `depositInfo.totalPaid` está definido. */
+    totalPaidLabel?: string;
     /** Tooltip/title exibido nos botões de remove/unassign desabilitados
      *  quando a aventura tem apenas 1 viajante. Default: "Cannot remove last traveller". */
     cannotRemoveLastTravellerLabel?: string;
@@ -397,7 +423,7 @@ interface BookingDetailsProps {
     signOutLabel?: string;
     className?: string;
 }
-declare function BookingDetails({ bookingId, status, statusLabel, createdAt, contact, agent, agentName, agentContactUrl, agentNameFallback, agentLabel, agentContactLabel, contactSectionLabel, payBalanceLabel, balanceDueLabel, cannotRemoveLastTravellerLabel, adventures, summaryLineItems, subtotal, total, depositInfo, onAddContactAsTraveller, onEditTraveller, onRemoveTraveller, onAddSuggestedTraveller, onAddTraveller, onUnassignFromAdventure, onCopyFormLink, onSubmitAddTraveller, onSubmitEditTraveller, onConfirmRemoveTraveller, travellerFormConfig, addTravellerSaving, editTravellerSaving, removeTravellerSaving, travellerFormError, onPayBalance, onCancelRequest, logoSrc, logoAlt, onSignOut, signOutLabel, className, }: BookingDetailsProps): react_jsx_runtime.JSX.Element;
+declare function BookingDetails({ bookingId, status, statusLabel, createdAt, contact, agent, agentName, agentContactUrl, agentNameFallback, agentLabel, agentContactLabel, contactSectionLabel, payBalanceLabel, balanceDueLabel, totalPaidLabel, cannotRemoveLastTravellerLabel, adventures, summaryLineItems, subtotal, total, depositInfo, onAddContactAsTraveller, onEditTraveller, onRemoveTraveller, onAddSuggestedTraveller, onAddTraveller, onUnassignFromAdventure, onCopyFormLink, onSubmitAddTraveller, onSubmitEditTraveller, onConfirmRemoveTraveller, travellerFormConfig, addTravellerSaving, editTravellerSaving, removeTravellerSaving, travellerFormError, onPayBalance, onCancelRequest, logoSrc, logoAlt, onSignOut, signOutLabel, className, }: BookingDetailsProps): react_jsx_runtime.JSX.Element;
 
 interface AgentContactCardProps {
     layout: "compact" | "wide";

package/dist/index.d.ts

@@ -30,6 +30,26 @@ interface OfferOptionalItem {
     checked?: boolean;
     /** Controlled: chamado ao marcar/desmarcar. Ignorado se `checked` não for passado. */
     onCheckedChange?: (id: string, checked: boolean) => void;
+    /** Quantidade atual (controlled). Quando ausente, o stepper não aparece. */
+    quantity?: number;
+    /** Chamado ao alterar a quantidade via stepper. Necessário para que o stepper apareça. */
+    onQuantityChange?: (id: string, next: number) => void;
+    /**
+     * Esconde explicitamente o stepper mesmo quando `quantity`/`onQuantityChange` estão presentes
+     * (ex.: opcional com billingType=VALOR_TOTAL onde a quantidade não impacta o preço).
+     * Default: `true` (stepper aparece quando `checked && quantity != null`).
+     */
+    showQuantityControl?: boolean;
+    /** Quantidade mínima permitida no stepper. Default: 1. */
+    minQuantity?: number;
+    /** Quantidade máxima permitida no stepper. Default: 50. */
+    maxQuantity?: number;
+    /** Texto pré-formatado da data agendada para exibição read-only (ex.: "10/05/2026"). */
+    scheduledAtLabel?: string;
+    /** aria-label para o botão de decrementar quantidade. Default: "Decrease quantity". */
+    decreaseQuantityLabel?: string;
+    /** aria-label para o botão de incrementar quantidade. Default: "Increase quantity". */
+    increaseQuantityLabel?: string;
 }
 interface OfferAdventureItem {
     id: string;
@@ -315,6 +335,9 @@ interface BookingDepositInfo {
     dueDateLabel?: string;
     /** Quando true, troca cor do botão "Pay remaining balance" para variante destructive. */
     isOverdue?: boolean;
+    /** Total efectivamente pago (com juros embutidos quando houver). Quando undefined,
+     *  a linha "Total paid" não é renderizada no OrderSummary. */
+    totalPaid?: string;
 }
 interface BookingDetailsProps {
     bookingId: string;
@@ -348,6 +371,9 @@ interface BookingDetailsProps {
     payBalanceLabel?: string;
     /** Label da linha "Balance due" no OrderSummary (default: "Balance due"). */
     balanceDueLabel?: string;
+    /** Label da linha "Total paid" no OrderSummary (default: "Total paid"). Apenas
+     *  renderizada quando `depositInfo.totalPaid` está definido. */
+    totalPaidLabel?: string;
     /** Tooltip/title exibido nos botões de remove/unassign desabilitados
      *  quando a aventura tem apenas 1 viajante. Default: "Cannot remove last traveller". */
     cannotRemoveLastTravellerLabel?: string;
@@ -397,7 +423,7 @@ interface BookingDetailsProps {
     signOutLabel?: string;
     className?: string;
 }
-declare function BookingDetails({ bookingId, status, statusLabel, createdAt, contact, agent, agentName, agentContactUrl, agentNameFallback, agentLabel, agentContactLabel, contactSectionLabel, payBalanceLabel, balanceDueLabel, cannotRemoveLastTravellerLabel, adventures, summaryLineItems, subtotal, total, depositInfo, onAddContactAsTraveller, onEditTraveller, onRemoveTraveller, onAddSuggestedTraveller, onAddTraveller, onUnassignFromAdventure, onCopyFormLink, onSubmitAddTraveller, onSubmitEditTraveller, onConfirmRemoveTraveller, travellerFormConfig, addTravellerSaving, editTravellerSaving, removeTravellerSaving, travellerFormError, onPayBalance, onCancelRequest, logoSrc, logoAlt, onSignOut, signOutLabel, className, }: BookingDetailsProps): react_jsx_runtime.JSX.Element;
+declare function BookingDetails({ bookingId, status, statusLabel, createdAt, contact, agent, agentName, agentContactUrl, agentNameFallback, agentLabel, agentContactLabel, contactSectionLabel, payBalanceLabel, balanceDueLabel, totalPaidLabel, cannotRemoveLastTravellerLabel, adventures, summaryLineItems, subtotal, total, depositInfo, onAddContactAsTraveller, onEditTraveller, onRemoveTraveller, onAddSuggestedTraveller, onAddTraveller, onUnassignFromAdventure, onCopyFormLink, onSubmitAddTraveller, onSubmitEditTraveller, onConfirmRemoveTraveller, travellerFormConfig, addTravellerSaving, editTravellerSaving, removeTravellerSaving, travellerFormError, onPayBalance, onCancelRequest, logoSrc, logoAlt, onSignOut, signOutLabel, className, }: BookingDetailsProps): react_jsx_runtime.JSX.Element;
 
 interface AgentContactCardProps {
     layout: "compact" | "wide";

package/dist/index.js

@@ -1321,16 +1321,22 @@ function AdventureCard({ adventure }) {
       ] }),
       adventure.optionals && adventure.optionals.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-2 rounded-xl border border-border bg-muted/30 p-4 flex flex-col gap-3", children: [
         /* @__PURE__ */ jsx("p", { className: "text-[10px] font-bold text-muted-foreground font-heading uppercase tracking-widest", children: "Available optionals" }),
-        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: adventure.optionals.map((opt) => /* @__PURE__ */ jsxs(
-          "label",
-          {
-            className: "flex items-center gap-3 cursor-pointer group",
-            children: [
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: adventure.optionals.map((opt) => {
+          var _a2, _b2, _c2, _d2, _e2;
+          const checked = isChecked(opt);
+          const minQty = (_a2 = opt.minQuantity) != null ? _a2 : 1;
+          const maxQty = (_b2 = opt.maxQuantity) != null ? _b2 : 50;
+          const showStepper = checked && opt.showQuantityControl !== false && opt.quantity != null && typeof opt.onQuantityChange === "function";
+          const currentQty = (_c2 = opt.quantity) != null ? _c2 : minQty;
+          const canDec = currentQty > minQty;
+          const canInc = currentQty < maxQty;
+          return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1.5", children: [
+            /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-3 cursor-pointer group", children: [
               /* @__PURE__ */ jsx(
                 "input",
                 {
                   type: "checkbox",
-                  checked: isChecked(opt),
+                  checked,
                   onChange: () => toggleOptional(opt),
                   className: "h-4 w-4 shrink-0 rounded border-border accent-primary cursor-pointer"
                 }
@@ -1344,10 +1350,52 @@ function AdventureCard({ adventure }) {
                   ")"
                 ] })
               ] })
-            ]
-          },
-          opt.id
-        )) })
+            ] }),
+            showStepper && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 ml-auto", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    var _a3;
+                    return canDec && ((_a3 = opt.onQuantityChange) == null ? void 0 : _a3.call(opt, opt.id, currentQty - 1));
+                  },
+                  disabled: !canDec,
+                  "aria-label": (_d2 = opt.decreaseQuantityLabel) != null ? _d2 : "Decrease quantity",
+                  className: cn(
+                    "h-7 w-7 rounded border border-border flex items-center justify-center text-sm font-semibold",
+                    "transition-colors",
+                    canDec ? "hover:bg-muted cursor-pointer text-foreground" : "opacity-40 cursor-not-allowed text-muted-foreground"
+                  ),
+                  children: "\u2212"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-sans tabular-nums w-6 text-center text-foreground", children: currentQty }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    var _a3;
+                    return canInc && ((_a3 = opt.onQuantityChange) == null ? void 0 : _a3.call(opt, opt.id, currentQty + 1));
+                  },
+                  disabled: !canInc,
+                  "aria-label": (_e2 = opt.increaseQuantityLabel) != null ? _e2 : "Increase quantity",
+                  className: cn(
+                    "h-7 w-7 rounded border border-border flex items-center justify-center text-sm font-semibold",
+                    "transition-colors",
+                    canInc ? "hover:bg-muted cursor-pointer text-foreground" : "opacity-40 cursor-not-allowed text-muted-foreground"
+                  ),
+                  children: "+"
+                }
+              )
+            ] }),
+            opt.scheduledAtLabel && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-xs text-muted-foreground font-sans", children: [
+              /* @__PURE__ */ jsx(CalendarIcon, { className: "w-3 h-3 text-primary shrink-0" }),
+              opt.scheduledAtLabel
+            ] })
+          ] }, opt.id);
+        }) })
       ] }),
       (adventure.description || adventure.detailsSlot) && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(Separator, { className: "my-1" }),
@@ -3130,7 +3178,8 @@ function OrderSummary({
   subtotal,
   total,
   depositInfo,
-  balanceDueLabel
+  balanceDueLabel,
+  totalPaidLabel
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-border bg-card p-5 lg:p-6 flex flex-col gap-4", children: [
     /* @__PURE__ */ jsx("h3", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest", children: "Order Summary" }),
@@ -3212,6 +3261,10 @@ function OrderSummary({
       /* @__PURE__ */ jsx("span", { className: "text-base font-bold text-foreground font-heading", children: "Total" }),
       /* @__PURE__ */ jsx("span", { className: "text-2xl font-black text-primary font-heading", children: total })
     ] }),
+    (depositInfo == null ? void 0 : depositInfo.totalPaid) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground font-sans", children: totalPaidLabel != null ? totalPaidLabel : "Total paid" }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground font-sans", children: depositInfo.totalPaid })
+    ] }),
     depositInfo && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 rounded-lg bg-muted/50 border border-border p-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground font-sans", children: [
@@ -3247,6 +3300,7 @@ function BookingDetails({
   contactSectionLabel,
   payBalanceLabel,
   balanceDueLabel,
+  totalPaidLabel,
   cannotRemoveLastTravellerLabel,
   adventures,
   summaryLineItems,
@@ -3463,7 +3517,8 @@ function BookingDetails({
               subtotal,
               total,
               depositInfo,
-              balanceDueLabel
+              balanceDueLabel,
+              totalPaidLabel
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-border bg-card p-5 lg:p-6 flex flex-col gap-4", children: [