@planetaexo/design-system 0.19.0 → 0.21.0

package/dist/index.d.cts

@@ -266,6 +266,8 @@ interface OfferProps {
      * quando essa URL é informada.
      */
     confirmedState?: OfferConfirmedState;
+    /** When true, opcionais (checkbox + stepper) ficam read-only. Usado em estado expirado. */
+    interactionsDisabled?: boolean;
     className?: string;
 }
 interface BookingShellProps {
@@ -347,7 +349,7 @@ declare function BookingConfirmedCard({ title, email, message, onBack, backLabel
 declare function OfferAdventureCard({ adventure }: {
     adventure: OfferAdventureItem;
 }): react_jsx_runtime.JSX.Element;
-declare function Offer({ logo, logoAlt, title, subtitle, adventures, subtotal, total, depositInfo, agent, onContinue, continueLabel, externalBookingFlow, checkoutSlot, summaryNotesSlot, summaryDiscountLine, continueDisabled, labels, confirmedState, className, }: OfferProps): react_jsx_runtime.JSX.Element;
+declare function Offer({ logo, logoAlt, title, subtitle, adventures, subtotal, total, depositInfo, agent, onContinue, continueLabel, externalBookingFlow, checkoutSlot, summaryNotesSlot, summaryDiscountLine, continueDisabled, labels, confirmedState, interactionsDisabled, className, }: OfferProps): react_jsx_runtime.JSX.Element;
 
 type BookingStatus = "pending" | "confirmed" | "cancelled" | "completed" | "pendingRegistration" | "pendingPayment" | "pendingPaymentOverdue" | "complete";
 interface BookingTraveller {
@@ -1233,8 +1235,24 @@ interface RegistrationSuccessCardProps {
      * campos da interface são ignorados aqui.
      */
     labels?: RegistrationFormLabels;
+    /**
+     * Override de `break-inside` da seção "Trip info" — default `"avoid"` preserva
+     * o comportamento legado (não quebra). Em PDFs onde header + Trip info juntos
+     * podem ultrapassar a 1ª página, passar `"auto"` deixa a quebra fluir
+     * naturalmente em vez de empurrar a seção inteira para a página 2.
+     */
+    tripInfoBreakInside?: "auto" | "avoid";
+    /**
+     * Tipografia do conteúdo do parágrafo de Terms & Conditions.
+     * - `"default"` (padrão): sans-serif (`font-ui`) — usado no fluxo web.
+     * - `"compact-serif"`: serifada (`font-serif`) menor (`text-[8pt]`,
+     *   `leading-tight`) otimizada para PDF impresso/visualização A4.
+     * Apenas o `<p>` do conteúdo é afetado — título da seção e badge
+     * "Accepted/Not accepted" permanecem inalterados.
+     */
+    termsTypography?: "default" | "compact-serif";
 }
-declare function RegistrationSuccessCard({ variant, title, message, answersTitle, fields, answers, dateFormatter, formatAnswer, className, actions, logo, logoAlt, showSuccessIcon, terms, termsLayout, termsLabels, adventure, booking, traveller, tripInfoLabels, density, submissionTimestamps, submissionTimestampsLabels, labels: scLabels, }: RegistrationSuccessCardProps): react_jsx_runtime.JSX.Element;
+declare function RegistrationSuccessCard({ variant, title, message, answersTitle, fields, answers, dateFormatter, formatAnswer, className, actions, logo, logoAlt, showSuccessIcon, terms, termsLayout, termsLabels, adventure, booking, traveller, tripInfoLabels, density, submissionTimestamps, submissionTimestampsLabels, labels: scLabels, tripInfoBreakInside, termsTypography, }: RegistrationSuccessCardProps): react_jsx_runtime.JSX.Element;
 
 interface FloatingInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     label: string;

package/dist/index.d.ts

@@ -266,6 +266,8 @@ interface OfferProps {
      * quando essa URL é informada.
      */
     confirmedState?: OfferConfirmedState;
+    /** When true, opcionais (checkbox + stepper) ficam read-only. Usado em estado expirado. */
+    interactionsDisabled?: boolean;
     className?: string;
 }
 interface BookingShellProps {
@@ -347,7 +349,7 @@ declare function BookingConfirmedCard({ title, email, message, onBack, backLabel
 declare function OfferAdventureCard({ adventure }: {
     adventure: OfferAdventureItem;
 }): react_jsx_runtime.JSX.Element;
-declare function Offer({ logo, logoAlt, title, subtitle, adventures, subtotal, total, depositInfo, agent, onContinue, continueLabel, externalBookingFlow, checkoutSlot, summaryNotesSlot, summaryDiscountLine, continueDisabled, labels, confirmedState, className, }: OfferProps): react_jsx_runtime.JSX.Element;
+declare function Offer({ logo, logoAlt, title, subtitle, adventures, subtotal, total, depositInfo, agent, onContinue, continueLabel, externalBookingFlow, checkoutSlot, summaryNotesSlot, summaryDiscountLine, continueDisabled, labels, confirmedState, interactionsDisabled, className, }: OfferProps): react_jsx_runtime.JSX.Element;
 
 type BookingStatus = "pending" | "confirmed" | "cancelled" | "completed" | "pendingRegistration" | "pendingPayment" | "pendingPaymentOverdue" | "complete";
 interface BookingTraveller {
@@ -1233,8 +1235,24 @@ interface RegistrationSuccessCardProps {
      * campos da interface são ignorados aqui.
      */
     labels?: RegistrationFormLabels;
+    /**
+     * Override de `break-inside` da seção "Trip info" — default `"avoid"` preserva
+     * o comportamento legado (não quebra). Em PDFs onde header + Trip info juntos
+     * podem ultrapassar a 1ª página, passar `"auto"` deixa a quebra fluir
+     * naturalmente em vez de empurrar a seção inteira para a página 2.
+     */
+    tripInfoBreakInside?: "auto" | "avoid";
+    /**
+     * Tipografia do conteúdo do parágrafo de Terms & Conditions.
+     * - `"default"` (padrão): sans-serif (`font-ui`) — usado no fluxo web.
+     * - `"compact-serif"`: serifada (`font-serif`) menor (`text-[8pt]`,
+     *   `leading-tight`) otimizada para PDF impresso/visualização A4.
+     * Apenas o `<p>` do conteúdo é afetado — título da seção e badge
+     * "Accepted/Not accepted" permanecem inalterados.
+     */
+    termsTypography?: "default" | "compact-serif";
 }
-declare function RegistrationSuccessCard({ variant, title, message, answersTitle, fields, answers, dateFormatter, formatAnswer, className, actions, logo, logoAlt, showSuccessIcon, terms, termsLayout, termsLabels, adventure, booking, traveller, tripInfoLabels, density, submissionTimestamps, submissionTimestampsLabels, labels: scLabels, }: RegistrationSuccessCardProps): react_jsx_runtime.JSX.Element;
+declare function RegistrationSuccessCard({ variant, title, message, answersTitle, fields, answers, dateFormatter, formatAnswer, className, actions, logo, logoAlt, showSuccessIcon, terms, termsLayout, termsLabels, adventure, booking, traveller, tripInfoLabels, density, submissionTimestamps, submissionTimestampsLabels, labels: scLabels, tripInfoBreakInside, termsTypography, }: RegistrationSuccessCardProps): react_jsx_runtime.JSX.Element;
 
 interface FloatingInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     label: string;

package/dist/index.js

@@ -1261,7 +1261,11 @@ function Alert({ variant = "info", children, className }) {
     }
   );
 }
-function AdventureCard({ adventure, labels }) {
+function AdventureCard({
+  adventure,
+  labels,
+  interactionsDisabled
+}) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
   const isControlled = (_b = (_a = adventure.optionals) == null ? void 0 : _a.some((o) => o.onCheckedChange !== void 0)) != null ? _b : false;
   const [checkedInternal, setCheckedInternal] = React23.useState(
@@ -1330,15 +1334,19 @@ function AdventureCard({ adventure, labels }) {
           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: [
+          return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap items-center gap-x-3 gap-y-1.5", interactionsDisabled && "opacity-60"), children: [
+            /* @__PURE__ */ jsxs("label", { className: cn("flex items-center gap-3 group", interactionsDisabled ? "cursor-not-allowed" : "cursor-pointer"), children: [
               /* @__PURE__ */ jsx(
                 "input",
                 {
                   type: "checkbox",
                   checked,
                   onChange: () => toggleOptional(opt),
-                  className: "h-4 w-4 shrink-0 rounded border-border accent-primary cursor-pointer"
+                  disabled: interactionsDisabled,
+                  className: cn(
+                    "h-4 w-4 shrink-0 rounded border-border accent-primary",
+                    interactionsDisabled ? "cursor-not-allowed" : "cursor-pointer"
+                  )
                 }
               ),
               /* @__PURE__ */ jsxs("span", { className: "text-sm font-sans text-foreground/80 group-hover:text-foreground transition-colors leading-snug", children: [
@@ -1358,14 +1366,14 @@ function AdventureCard({ adventure, labels }) {
                   type: "button",
                   onClick: () => {
                     var _a3;
-                    return canDec && ((_a3 = opt.onQuantityChange) == null ? void 0 : _a3.call(opt, opt.id, currentQty - 1));
+                    return !interactionsDisabled && canDec && ((_a3 = opt.onQuantityChange) == null ? void 0 : _a3.call(opt, opt.id, currentQty - 1));
                   },
-                  disabled: !canDec,
+                  disabled: interactionsDisabled || !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"
+                    interactionsDisabled ? "opacity-40 cursor-not-allowed text-muted-foreground" : canDec ? "hover:bg-muted cursor-pointer text-foreground" : "opacity-40 cursor-not-allowed text-muted-foreground"
                   ),
                   children: "\u2212"
                 }
@@ -1377,14 +1385,14 @@ function AdventureCard({ adventure, labels }) {
                   type: "button",
                   onClick: () => {
                     var _a3;
-                    return canInc && ((_a3 = opt.onQuantityChange) == null ? void 0 : _a3.call(opt, opt.id, currentQty + 1));
+                    return !interactionsDisabled && canInc && ((_a3 = opt.onQuantityChange) == null ? void 0 : _a3.call(opt, opt.id, currentQty + 1));
                   },
-                  disabled: !canInc,
+                  disabled: interactionsDisabled || !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"
+                    interactionsDisabled ? "opacity-40 cursor-not-allowed text-muted-foreground" : canInc ? "hover:bg-muted cursor-pointer text-foreground" : "opacity-40 cursor-not-allowed text-muted-foreground"
                   ),
                   children: "+"
                 }
@@ -1456,28 +1464,16 @@ function OfferSidebar({
   bookLabel,
   bookDisabled,
   labels,
-  bookHref,
-  bookHrefLabel
+  bookHref
 }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-    /* @__PURE__ */ jsxs("div", { className: "hidden lg:flex rounded-2xl border border-border bg-card p-5 flex-col gap-4", children: [
+    !bookHref && /* @__PURE__ */ jsxs("div", { className: "hidden lg:flex rounded-2xl border border-border bg-card p-5 flex-col gap-4", children: [
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("p", { className: "text-xs uppercase tracking-widest text-muted-foreground font-heading mb-1", children: (_a = labels == null ? void 0 : labels.bookingTotal) != null ? _a : "Booking Total" }),
         /* @__PURE__ */ jsx("p", { className: "text-3xl font-black text-primary font-heading leading-none", children: total })
       ] }),
-      bookHref ? /* @__PURE__ */ jsx(
-        "a",
-        {
-          href: bookHref,
-          className: cn(
-            "w-full inline-flex items-center justify-center rounded-full bg-primary py-3 text-sm font-bold tracking-wide uppercase",
-            "text-primary-foreground font-heading transition-colors hover:bg-primary/90",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          ),
-          children: bookHrefLabel != null ? bookHrefLabel : bookLabel
-        }
-      ) : /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
@@ -2235,6 +2231,7 @@ function Offer({
   continueDisabled,
   labels,
   confirmedState,
+  interactionsDisabled,
   className
 }) {
   var _a, _b, _c;
@@ -2269,7 +2266,7 @@ function Offer({
             /* @__PURE__ */ jsx(MapIcon, { className: "w-5 h-5 text-primary shrink-0" }),
             /* @__PURE__ */ jsx("h2", { className: "font-bold text-foreground font-heading text-base", children: (_b = labels == null ? void 0 : labels.includedAdventures) != null ? _b : "Included Adventures" })
           ] }),
-          adventures.map((adventure) => /* @__PURE__ */ jsx(AdventureCard, { adventure, labels }, adventure.id))
+          adventures.map((adventure) => /* @__PURE__ */ jsx(AdventureCard, { adventure, labels, interactionsDisabled }, adventure.id))
         ] }),
         !isShowingCheckout && /* @__PURE__ */ jsx(
           OfferSummarySection,
@@ -2306,8 +2303,7 @@ function Offer({
           bookLabel: continueLabel,
           bookDisabled: continueDisabled,
           labels,
-          bookHref: confirmedState == null ? void 0 : confirmedState.viewBookingHref,
-          bookHrefLabel: confirmedState == null ? void 0 : confirmedState.viewBookingLabel
+          bookHref: confirmedState == null ? void 0 : confirmedState.viewBookingHref
         }
       ) })
     ] }),
@@ -5164,13 +5160,14 @@ function formatDateRange(adventure, fmt) {
 function FormSection2({
   title,
   children,
-  className
+  className,
+  breakInside = "avoid"
 }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn("flex flex-col gap-5", className),
-      style: { breakInside: "avoid" },
+      style: { breakInside },
       children: [
         /* @__PURE__ */ jsxs(
           "div",
@@ -6106,7 +6103,9 @@ function RegistrationSuccessCard({
   density = "comfortable",
   submissionTimestamps,
   submissionTimestampsLabels,
-  labels: scLabels
+  labels: scLabels,
+  tripInfoBreakInside = "avoid",
+  termsTypography = "default"
 }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
   const isMinimal = variant === "minimal";
@@ -6171,7 +6170,7 @@ function RegistrationSuccessCard({
             /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: submissionTimestamps.lastUpdatedAt })
           ] })
         ] }),
-        hasTripInfo && /* @__PURE__ */ jsx(FormSection2, { title: TL.sectionTitle, children: /* @__PURE__ */ jsxs("dl", { className: "flex flex-col gap-y-3 text-sm font-ui", children: [
+        hasTripInfo && /* @__PURE__ */ jsx(FormSection2, { title: TL.sectionTitle, breakInside: tripInfoBreakInside, children: /* @__PURE__ */ jsxs("dl", { className: "flex flex-col gap-y-3 text-sm font-ui", children: [
           adventure && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-x-4", children: [
             /* @__PURE__ */ jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: TL.adventureLabel }),
             /* @__PURE__ */ jsx("dd", { className: "w-1/2 text-foreground font-medium text-right min-w-0 break-words", children: adventure.name })
@@ -6223,8 +6222,8 @@ function RegistrationSuccessCard({
                 "p",
                 {
                   className: cn(
-                    "whitespace-pre-wrap break-words text-foreground font-ui",
-                    isCompact ? "text-xs leading-snug" : "text-sm leading-relaxed"
+                    "whitespace-pre-wrap break-words text-foreground",
+                    termsTypography === "compact-serif" ? "font-serif text-[8pt] leading-tight" : cn("font-ui", isCompact ? "text-xs leading-snug" : "text-sm leading-relaxed")
                   ),
                   children: terms.markdown
                 }