@planetaexo/design-system 0.23.2 → 0.23.4

package/dist/index.cjs

@@ -7559,16 +7559,13 @@ function ItineraryDay({
     specs && specs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-3 sm:gap-2.5", children: specs.map((spec, i) => /* @__PURE__ */ jsxRuntime.jsxs(
       "li",
       {
-        className: "flex items-start gap-3 text-base text-foreground font-ui",
+        className: "flex flex-col text-base text-foreground font-ui",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 shrink-0 text-foreground", "aria-hidden": true, children: spec.icon }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: spec.label }),
-              spec.detail && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: spec.detail })
-            ] }),
-            spec.subdetail && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: spec.subdetail })
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: spec.label }),
+            spec.detail && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: spec.detail })
+          ] }),
+          spec.subdetail && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: spec.subdetail })
         ]
       },
       i
@@ -7790,8 +7787,19 @@ function PricingTrip({
   const [showEstimates, setShowEstimates] = React25__namespace.useState(false);
   const [showPriceInfo, setShowPriceInfo] = React25__namespace.useState(false);
   if (variant === "compact") {
+    const showOverlay = showPriceInfo && (!!priceInfo || !!currencyEstimates && currencyEstimates.length > 0);
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+      showOverlay && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Close price details",
+          tabIndex: -1,
+          onClick: () => setShowPriceInfo(false),
+          className: "absolute bottom-full left-1/2 -translate-x-1/2 w-screen h-screen bg-foreground/20 backdrop-blur-sm cursor-default animate-in fade-in"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center gap-3", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] uppercase tracking-wide text-muted-foreground font-ui leading-none mb-0.5", children: "from" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end gap-1.5 flex-wrap", children: [
@@ -7813,15 +7821,7 @@ function PricingTrip({
                   "text-muted-foreground hover:text-foreground transition-colors",
                   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                 ),
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  lucideReact.ChevronDownIcon,
-                  {
-                    className: cn(
-                      "h-4 w-4 transition-transform",
-                      showPriceInfo && "rotate-180"
-                    )
-                  }
-                )
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.InfoIcon, { className: "h-4 w-4" })
               }
             )
           ] })
@@ -7844,8 +7844,9 @@ function PricingTrip({
         "div",
         {
           className: cn(
-            "rounded-xl border border-border bg-muted/40 overflow-hidden",
-            "font-ui text-sm leading-relaxed text-foreground"
+            "relative rounded-xl border border-border bg-card overflow-hidden shadow-lg",
+            "font-ui text-sm leading-relaxed text-foreground",
+            "animate-in fade-in slide-in-from-bottom-2"
           ),
           children: [
             priceInfo && /* @__PURE__ */ jsxRuntime.jsx(
@@ -7968,15 +7969,7 @@ function PricingTrip({
               "text-muted-foreground hover:text-foreground transition-colors",
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
             ),
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              lucideReact.ChevronDownIcon,
-              {
-                className: cn(
-                  "h-4 w-4 transition-transform",
-                  showPriceInfo && "rotate-180"
-                )
-              }
-            )
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.InfoIcon, { className: "h-4 w-4" })
           }
         )
       ] })
@@ -9275,10 +9268,7 @@ function TripPage({
                 ] })
               ] }),
               itineraryDays && itineraryDays.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("section", { id: "trip-section-itinerary", className: "scroll-mt-20", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: "text-xl font-bold text-foreground font-heading mb-6 flex items-center gap-2", children: [
-                  (sectionIcons == null ? void 0 : sectionIcons.itinerary) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary [&>svg]:h-5 [&>svg]:w-5", children: sectionIcons.itinerary }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ClockIcon, { className: "h-5 w-5 text-primary" }),
-                  "Itinerary"
-                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-bold text-foreground font-heading mb-6", children: "Itinerary" }),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-12", children: itineraryDays.map((day) => /* @__PURE__ */ jsxRuntime.jsx(
                   ItineraryDay,
                   __spreadProps(__spreadValues({}, day), {
@@ -9287,10 +9277,7 @@ function TripPage({
                   day.dayNumber
                 )) })
               ] }) : itinerary && itinerary.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("section", { id: "trip-section-itinerary", className: "scroll-mt-20", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: "text-xl font-bold text-foreground font-heading mb-6 flex items-center gap-2", children: [
-                  (sectionIcons == null ? void 0 : sectionIcons.itinerary) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary [&>svg]:h-5 [&>svg]:w-5", children: sectionIcons.itinerary }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ClockIcon, { className: "h-5 w-5 text-primary" }),
-                  "Itinerary"
-                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-bold text-foreground font-heading mb-6", children: "Itinerary" }),
                 /* @__PURE__ */ jsxRuntime.jsx(ItineraryTimeline, { steps: itinerary })
               ] }),
               included && included.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("section", { id: "trip-section-included", className: "scroll-mt-20", children: [