@planetaexo/design-system 0.48.2 → 0.49.0

package/dist/index.d.cts

@@ -50,6 +50,12 @@ interface OfferOptionalItem {
     decreaseQuantityLabel?: string;
     /** aria-label para o botão de incrementar quantidade. Default: "Increase quantity". */
     increaseQuantityLabel?: string;
+    /**
+     * Descrição multilinha do opcional. Quando truthy, exibe ícone "info" ao lado
+     * do label que abre um Dialog com o texto integral. Texto plano — preservar
+     * `\n` via `whitespace-pre-wrap` no render.
+     */
+    description?: string;
 }
 interface OfferAdventureItem {
     id: string;
@@ -150,6 +156,15 @@ interface OfferLabels {
         scheduleCallLabel?: string;
         atCompanyLabel?: string;
     };
+    /** Labels do modal de descrição do opcional. */
+    optionalInfo?: {
+        /** aria-label do botão-ícone gatilho. Default EN: "More info". */
+        triggerAriaLabel?: string;
+        /** Label do botão de fechar do Dialog. Default EN: "Close". */
+        closeLabel?: string;
+        /** Label da seção "Descrição" dentro do modal. Default EN: "Description". */
+        descriptionLabel?: string;
+    };
     /**
      * Strings do BookingWizard interno (renderizado quando `checkoutSlot` é
      * undefined — em produção do bookings esse caminho é ofuscado, mas

package/dist/index.d.ts

@@ -50,6 +50,12 @@ interface OfferOptionalItem {
     decreaseQuantityLabel?: string;
     /** aria-label para o botão de incrementar quantidade. Default: "Increase quantity". */
     increaseQuantityLabel?: string;
+    /**
+     * Descrição multilinha do opcional. Quando truthy, exibe ícone "info" ao lado
+     * do label que abre um Dialog com o texto integral. Texto plano — preservar
+     * `\n` via `whitespace-pre-wrap` no render.
+     */
+    description?: string;
 }
 interface OfferAdventureItem {
     id: string;
@@ -150,6 +156,15 @@ interface OfferLabels {
         scheduleCallLabel?: string;
         atCompanyLabel?: string;
     };
+    /** Labels do modal de descrição do opcional. */
+    optionalInfo?: {
+        /** aria-label do botão-ícone gatilho. Default EN: "More info". */
+        triggerAriaLabel?: string;
+        /** Label do botão de fechar do Dialog. Default EN: "Close". */
+        closeLabel?: string;
+        /** Label da seção "Descrição" dentro do modal. Default EN: "Description". */
+        descriptionLabel?: string;
+    };
     /**
      * Strings do BookingWizard interno (renderizado quando `checkoutSlot` é
      * undefined — em produção do bookings esse caminho é ofuscado, mas

package/dist/index.js

@@ -4,7 +4,7 @@ import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { XIcon, ChevronDownIcon, CalendarIcon, SearchIcon, ChevronRightIcon, ArrowLeftIcon, CheckCircle2Icon, MapIcon, LogOutIcon, UsersIcon, CreditCardIcon, AlertCircleIcon, MinusIcon, PlusIcon, CircleCheckIcon, SlidersHorizontalIcon, ChevronLeftIcon, HomeIcon, SailboatIcon, CarIcon, WavesIcon, FootprintsIcon, InfoIcon, ClockIcon, CheckIcon, ChevronUpIcon, MenuIcon, UserIcon, SunIcon, MoonIcon, MapPinIcon, PackageIcon, BedDoubleIcon, UtensilsIcon, CompassIcon, BackpackIcon, CherryIcon, ReceiptIcon, Loader2Icon, SendIcon, CheckCircleIcon, MailIcon, PhoneIcon, MessageCircleIcon, UserPlusIcon, ExternalLinkIcon, CopyIcon, PencilIcon, Trash2Icon, UserMinusIcon, AlertTriangleIcon, ZoomInIcon, StarIcon, TwitterIcon, YoutubeIcon, LinkedinIcon, InstagramIcon, FacebookIcon, ArrowRightIcon, LayoutGridIcon } from 'lucide-react';
+import { XIcon, ChevronDownIcon, CalendarIcon, SearchIcon, ChevronRightIcon, ArrowLeftIcon, CheckCircle2Icon, MapIcon, LogOutIcon, UsersIcon, CreditCardIcon, AlertCircleIcon, MinusIcon, PlusIcon, CircleCheckIcon, SlidersHorizontalIcon, ChevronLeftIcon, HomeIcon, SailboatIcon, CarIcon, WavesIcon, FootprintsIcon, InfoIcon, ClockIcon, CheckIcon, ChevronUpIcon, MenuIcon, UserIcon, SunIcon, MoonIcon, MapPinIcon, PackageIcon, BedDoubleIcon, UtensilsIcon, CompassIcon, BackpackIcon, CherryIcon, ReceiptIcon, Loader2Icon, SendIcon, CheckCircleIcon, Info, MailIcon, PhoneIcon, MessageCircleIcon, UserPlusIcon, ExternalLinkIcon, CopyIcon, PencilIcon, Trash2Icon, UserMinusIcon, AlertTriangleIcon, ZoomInIcon, StarIcon, TwitterIcon, YoutubeIcon, LinkedinIcon, InstagramIcon, FacebookIcon, ArrowRightIcon, LayoutGridIcon } from 'lucide-react';
 import { Separator as Separator$1 } from '@base-ui/react/separator';
 import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
 import { Button as Button$1 } from '@base-ui/react/button';
@@ -227,7 +227,7 @@ function DialogContent(_a) {
                 Button2,
                 {
                   variant: "ghost",
-                  className: "absolute top-2 right-2",
+                  className: "absolute top-2 right-2 cursor-pointer",
                   size: "icon-sm"
                 }
               ),
@@ -1274,11 +1274,13 @@ function AdventureCard({
   labels,
   interactionsDisabled
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
   const isControlled = (_b = (_a = adventure.optionals) == null ? void 0 : _a.some((o) => o.onCheckedChange !== void 0)) != null ? _b : false;
   const [checkedInternal, setCheckedInternal] = React28.useState(
     new Set((_d = (_c = adventure.optionals) == null ? void 0 : _c.filter((o) => o.defaultChecked).map((o) => o.id)) != null ? _d : [])
   );
+  const [openDescriptionId, setOpenDescriptionId] = React28.useState(null);
+  const openDescriptionOptional = openDescriptionId ? (_e = adventure.optionals) == null ? void 0 : _e.find((o) => o.id === openDescriptionId) : void 0;
   const isChecked = (opt) => {
     var _a2;
     return isControlled ? (_a2 = opt.checked) != null ? _a2 : false : checkedInternal.has(opt.id);
@@ -1300,7 +1302,7 @@ function AdventureCard({
       "img",
       {
         src: adventure.image,
-        alt: (_e = adventure.imageAlt) != null ? _e : adventure.title,
+        alt: (_f = adventure.imageAlt) != null ? _f : adventure.title,
         className: "w-full h-full object-cover"
       }
     ) }),
@@ -1315,7 +1317,7 @@ function AdventureCard({
             className: "flex items-center gap-1.5 rounded-full border border-border px-3 py-1 text-xs text-muted-foreground font-ui hover:border-destructive hover:text-destructive transition-colors",
             children: [
               /* @__PURE__ */ jsx(XIcon, { className: "w-3 h-3" }),
-              (_f = labels == null ? void 0 : labels.remove) != null ? _f : "Remove"
+              (_g = labels == null ? void 0 : labels.remove) != null ? _g : "Remove"
             ]
           }
         )
@@ -1332,9 +1334,9 @@ function AdventureCard({
         adventure.location
       ] }),
       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: (_g = labels == null ? void 0 : labels.availableOptionals) != null ? _g : "Available optionals" }),
+        /* @__PURE__ */ jsx("p", { className: "text-[10px] font-bold text-muted-foreground font-heading uppercase tracking-widest", children: (_h = labels == null ? void 0 : labels.availableOptionals) != null ? _h : "Available optionals" }),
         /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: adventure.optionals.map((opt) => {
-          var _a2, _b2, _c2, _d2, _e2;
+          var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
           const checked = isChecked(opt);
           const minQty = (_a2 = opt.minQuantity) != null ? _a2 : 1;
           const maxQty = (_b2 = opt.maxQuantity) != null ? _b2 : 50;
@@ -1342,6 +1344,7 @@ function AdventureCard({
           const currentQty = (_c2 = opt.quantity) != null ? _c2 : minQty;
           const canDec = currentQty > minQty;
           const canInc = currentQty < maxQty;
+          const hasDescription = !!((_d2 = opt.description) == null ? void 0 : _d2.trim());
           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(
@@ -1367,6 +1370,19 @@ function AdventureCard({
                 ] })
               ] })
             ] }),
+            hasDescription && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setOpenDescriptionId(opt.id);
+                },
+                "aria-label": (_f2 = (_e2 = labels == null ? void 0 : labels.optionalInfo) == null ? void 0 : _e2.triggerAriaLabel) != null ? _f2 : "More info",
+                className: "inline-flex cursor-pointer items-center justify-center text-muted-foreground hover:text-primary transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded",
+                children: /* @__PURE__ */ jsx(Info, { className: "w-4 h-4" })
+              }
+            ),
             showStepper && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 ml-auto", children: [
               /* @__PURE__ */ jsx(
                 "button",
@@ -1377,7 +1393,7 @@ function AdventureCard({
                     return !interactionsDisabled && canDec && ((_a3 = opt.onQuantityChange) == null ? void 0 : _a3.call(opt, opt.id, currentQty - 1));
                   },
                   disabled: interactionsDisabled || !canDec,
-                  "aria-label": (_d2 = opt.decreaseQuantityLabel) != null ? _d2 : "Decrease quantity",
+                  "aria-label": (_g2 = opt.decreaseQuantityLabel) != null ? _g2 : "Decrease quantity",
                   className: cn(
                     "h-7 w-7 rounded border border-border flex items-center justify-center text-sm font-semibold",
                     "transition-colors",
@@ -1396,7 +1412,7 @@ function AdventureCard({
                     return !interactionsDisabled && canInc && ((_a3 = opt.onQuantityChange) == null ? void 0 : _a3.call(opt, opt.id, currentQty + 1));
                   },
                   disabled: interactionsDisabled || !canInc,
-                  "aria-label": (_e2 = opt.increaseQuantityLabel) != null ? _e2 : "Increase quantity",
+                  "aria-label": (_h2 = opt.increaseQuantityLabel) != null ? _h2 : "Increase quantity",
                   className: cn(
                     "h-7 w-7 rounded border border-border flex items-center justify-center text-sm font-semibold",
                     "transition-colors",
@@ -1411,12 +1427,31 @@ function AdventureCard({
               opt.scheduledAtLabel
             ] })
           ] }, opt.id);
-        }) })
+        }) }),
+        /* @__PURE__ */ jsx(
+          Dialog,
+          {
+            open: openDescriptionId !== null,
+            onOpenChange: (open) => !open && setOpenDescriptionId(null),
+            children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-lg max-h-[85vh] overflow-y-auto p-6 sm:max-w-lg", children: [
+              /* @__PURE__ */ jsxs(DialogHeader, { className: "gap-3 pr-8", children: [
+                /* @__PURE__ */ jsx(DialogTitle, { className: "font-heading text-xl font-bold text-foreground leading-snug", children: (_i = openDescriptionOptional == null ? void 0 : openDescriptionOptional.label) != null ? _i : "" }),
+                (openDescriptionOptional == null ? void 0 : openDescriptionOptional.pricePerPerson) && /* @__PURE__ */ jsx("span", { className: "inline-flex w-fit items-center rounded-full bg-primary/10 px-3 py-1 text-sm font-semibold text-primary font-heading", children: openDescriptionOptional.pricePerPerson })
+              ] }),
+              /* @__PURE__ */ jsx(Separator, {}),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-[10px] font-bold text-muted-foreground font-heading uppercase tracking-widest", children: (_k = (_j = labels == null ? void 0 : labels.optionalInfo) == null ? void 0 : _j.descriptionLabel) != null ? _k : "Description" }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-sans text-foreground leading-relaxed whitespace-pre-wrap", children: (_l = openDescriptionOptional == null ? void 0 : openDescriptionOptional.description) != null ? _l : "" })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "mt-2 flex justify-end", children: /* @__PURE__ */ jsx(DialogClose, { className: "cursor-pointer px-4 py-2 rounded-lg bg-primary text-primary-foreground text-sm font-heading font-semibold hover:bg-primary/90 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: (_n = (_m = labels == null ? void 0 : labels.optionalInfo) == null ? void 0 : _m.closeLabel) != null ? _n : "Close" }) })
+            ] })
+          }
+        )
       ] }),
       (adventure.description || adventure.detailsSlot) && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(Separator, { className: "my-1" }),
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("p", { className: "text-[10px] font-bold text-muted-foreground font-heading uppercase tracking-widest mb-3", children: (_h = adventure.itineraryLabel) != null ? _h : "Details" }),
+          /* @__PURE__ */ jsx("p", { className: "text-[10px] font-bold text-muted-foreground font-heading uppercase tracking-widest mb-3", children: (_o = adventure.itineraryLabel) != null ? _o : "Details" }),
           adventure.description && !adventure.detailsSlot && /* @__PURE__ */ jsx("p", { className: "text-base text-foreground/80 leading-snug font-sans", children: adventure.description }),
           adventure.detailsSlot && /* @__PURE__ */ jsx("div", { className: cn(
             "text-foreground",
@@ -1442,21 +1477,21 @@ function AdventureCard({
         ] })
       ] }),
       adventure.included && adventure.included.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5 mt-1", children: [
-        /* @__PURE__ */ jsx("h4", { className: "text-base font-bold text-foreground font-heading", children: (_i = adventure.includedLabel) != null ? _i : "What's included" }),
+        /* @__PURE__ */ jsx("h4", { className: "text-base font-bold text-foreground font-heading", children: (_p = adventure.includedLabel) != null ? _p : "What's included" }),
         /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1.5", children: adventure.included.map((item, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-base text-foreground/80 font-sans", children: [
           /* @__PURE__ */ jsx(CheckIcon, { className: "w-4 h-4 text-primary shrink-0 mt-1" }),
           item
         ] }, i)) })
       ] }),
       adventure.notIncluded && adventure.notIncluded.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5 mt-1", children: [
-        /* @__PURE__ */ jsx("h4", { className: "text-base font-bold text-foreground font-heading", children: (_j = adventure.notIncludedLabel) != null ? _j : "What's not included" }),
+        /* @__PURE__ */ jsx("h4", { className: "text-base font-bold text-foreground font-heading", children: (_q = adventure.notIncludedLabel) != null ? _q : "What's not included" }),
         /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1.5", children: adventure.notIncluded.map((item, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-base text-foreground/80 font-sans", children: [
           /* @__PURE__ */ jsx(XIcon, { className: "w-4 h-4 text-destructive shrink-0 mt-1" }),
           item
         ] }, i)) })
       ] }),
       adventure.cancellationPolicy && adventure.cancellationPolicy.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5 mt-1", children: [
-        /* @__PURE__ */ jsx("h4", { className: "text-base font-bold text-foreground font-heading", children: (_k = adventure.cancellationPolicyLabel) != null ? _k : "Cancellation policy" }),
+        /* @__PURE__ */ jsx("h4", { className: "text-base font-bold text-foreground font-heading", children: (_r = adventure.cancellationPolicyLabel) != null ? _r : "Cancellation policy" }),
         /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1.5", children: adventure.cancellationPolicy.map((item, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-base text-muted-foreground font-sans", children: [
           /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-primary shrink-0 mt-2.5" }),
           item