@planetaexo/design-system 0.48.2 → 0.49.0

package/dist/index.cjs

@@ -248,7 +248,7 @@ function DialogContent(_a) {
                 Button2,
                 {
                   variant: "ghost",
-                  className: "absolute top-2 right-2",
+                  className: "absolute top-2 right-2 cursor-pointer",
                   size: "icon-sm"
                 }
               ),
@@ -1295,11 +1295,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__namespace.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__namespace.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);
@@ -1321,7 +1323,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"
       }
     ) }),
@@ -1336,7 +1338,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__ */ jsxRuntime.jsx(lucideReact.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"
             ]
           }
         )
@@ -1353,9 +1355,9 @@ function AdventureCard({
         adventure.location
       ] }),
       adventure.optionals && adventure.optionals.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 rounded-xl border border-border bg-muted/30 p-4 flex flex-col gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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;
@@ -1363,6 +1365,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__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-wrap items-center gap-x-3 gap-y-1.5", interactionsDisabled && "opacity-60"), children: [
             /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cn("flex items-center gap-3 group", interactionsDisabled ? "cursor-not-allowed" : "cursor-pointer"), children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -1388,6 +1391,19 @@ function AdventureCard({
                 ] })
               ] })
             ] }),
+            hasDescription && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Info, { className: "w-4 h-4" })
+              }
+            ),
             showStepper && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 ml-auto", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
@@ -1398,7 +1414,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",
@@ -1417,7 +1433,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",
@@ -1432,12 +1448,31 @@ function AdventureCard({
               opt.scheduledAtLabel
             ] })
           ] }, opt.id);
-        }) })
+        }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Dialog,
+          {
+            open: openDescriptionId !== null,
+            onOpenChange: (open) => !open && setOpenDescriptionId(null),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "max-w-lg max-h-[85vh] overflow-y-auto p-6 sm:max-w-lg", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { className: "gap-3 pr-8", children: [
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Separator, {}),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "mt-2 flex justify-end", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-1" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-base text-foreground/80 leading-snug font-sans", children: adventure.description }),
           adventure.detailsSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
             "text-foreground",
@@ -1463,21 +1498,21 @@ function AdventureCard({
         ] })
       ] }),
       adventure.included && adventure.included.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2.5 mt-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-base font-bold text-foreground font-heading", children: (_i = adventure.includedLabel) != null ? _i : "What's included" }),
+        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-base font-bold text-foreground font-heading", children: (_p = adventure.includedLabel) != null ? _p : "What's included" }),
         /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-1.5", children: adventure.included.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-start gap-2 text-base text-foreground/80 font-sans", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { className: "w-4 h-4 text-primary shrink-0 mt-1" }),
           item
         ] }, i)) })
       ] }),
       adventure.notIncluded && adventure.notIncluded.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2.5 mt-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-base font-bold text-foreground font-heading", children: (_j = adventure.notIncludedLabel) != null ? _j : "What's not included" }),
+        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-base font-bold text-foreground font-heading", children: (_q = adventure.notIncludedLabel) != null ? _q : "What's not included" }),
         /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-1.5", children: adventure.notIncluded.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-start gap-2 text-base text-foreground/80 font-sans", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "w-4 h-4 text-destructive shrink-0 mt-1" }),
           item
         ] }, i)) })
       ] }),
       adventure.cancellationPolicy && adventure.cancellationPolicy.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2.5 mt-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-base font-bold text-foreground font-heading", children: (_k = adventure.cancellationPolicyLabel) != null ? _k : "Cancellation policy" }),
+        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-base font-bold text-foreground font-heading", children: (_r = adventure.cancellationPolicyLabel) != null ? _r : "Cancellation policy" }),
         /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-1.5", children: adventure.cancellationPolicy.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-start gap-2 text-base text-muted-foreground font-sans", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-primary shrink-0 mt-2.5" }),
           item