@planetaexo/design-system 0.23.2 → 0.23.4

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, ChevronLeftIcon, HomeIcon, SailboatIcon, CarIcon, WavesIcon, FootprintsIcon, ClockIcon, CheckIcon, ChevronUpIcon, UserIcon, MenuIcon, SunIcon, MoonIcon, MapPinIcon, InfoIcon, PackageIcon, SparklesIcon, BackpackIcon, BedDoubleIcon, UtensilsIcon, ReceiptIcon, Loader2Icon, SendIcon, CheckCircleIcon, MailIcon, PhoneIcon, MessageCircleIcon, CompassIcon, UserPlusIcon, ExternalLinkIcon, CopyIcon, PencilIcon, Trash2Icon, UserMinusIcon, AlertTriangleIcon, ZoomInIcon, StarIcon, LayoutGridIcon } from 'lucide-react';
+import { XIcon, ChevronDownIcon, CalendarIcon, SearchIcon, ChevronRightIcon, ArrowLeftIcon, CheckCircle2Icon, MapIcon, LogOutIcon, UsersIcon, CreditCardIcon, AlertCircleIcon, MinusIcon, PlusIcon, CircleCheckIcon, ChevronLeftIcon, HomeIcon, SailboatIcon, CarIcon, WavesIcon, FootprintsIcon, InfoIcon, ClockIcon, CheckIcon, ChevronUpIcon, UserIcon, MenuIcon, SunIcon, MoonIcon, MapPinIcon, PackageIcon, SparklesIcon, BackpackIcon, BedDoubleIcon, UtensilsIcon, ReceiptIcon, Loader2Icon, SendIcon, CheckCircleIcon, MailIcon, PhoneIcon, MessageCircleIcon, CompassIcon, UserPlusIcon, ExternalLinkIcon, CopyIcon, PencilIcon, Trash2Icon, UserMinusIcon, AlertTriangleIcon, ZoomInIcon, StarIcon, 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';
@@ -7538,16 +7538,13 @@ function ItineraryDay({
     specs && specs.length > 0 && /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-3 sm:gap-2.5", children: specs.map((spec, i) => /* @__PURE__ */ 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__ */ jsx("span", { className: "mt-0.5 shrink-0 text-foreground", "aria-hidden": true, children: spec.icon }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2", children: [
-              /* @__PURE__ */ jsx("span", { className: "font-semibold", children: spec.label }),
-              spec.detail && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: spec.detail })
-            ] }),
-            spec.subdetail && /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: spec.subdetail })
-          ] })
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-semibold", children: spec.label }),
+            spec.detail && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: spec.detail })
+          ] }),
+          spec.subdetail && /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: spec.subdetail })
         ]
       },
       i
@@ -7769,8 +7766,19 @@ function PricingTrip({
   const [showEstimates, setShowEstimates] = React25.useState(false);
   const [showPriceInfo, setShowPriceInfo] = React25.useState(false);
   if (variant === "compact") {
+    const showOverlay = showPriceInfo && (!!priceInfo || !!currencyEstimates && currencyEstimates.length > 0);
     return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      showOverlay && /* @__PURE__ */ 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__ */ jsxs("div", { className: "relative flex items-center gap-3", children: [
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ jsx("p", { className: "text-[10px] uppercase tracking-wide text-muted-foreground font-ui leading-none mb-0.5", children: "from" }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-1.5 flex-wrap", children: [
@@ -7792,15 +7800,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__ */ jsx(
-                  ChevronDownIcon,
-                  {
-                    className: cn(
-                      "h-4 w-4 transition-transform",
-                      showPriceInfo && "rotate-180"
-                    )
-                  }
-                )
+                children: /* @__PURE__ */ jsx(InfoIcon, { className: "h-4 w-4" })
               }
             )
           ] })
@@ -7823,8 +7823,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__ */ jsx(
@@ -7947,15 +7948,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__ */ jsx(
-              ChevronDownIcon,
-              {
-                className: cn(
-                  "h-4 w-4 transition-transform",
-                  showPriceInfo && "rotate-180"
-                )
-              }
-            )
+            children: /* @__PURE__ */ jsx(InfoIcon, { className: "h-4 w-4" })
           }
         )
       ] })
@@ -9254,10 +9247,7 @@ function TripPage({
                 ] })
               ] }),
               itineraryDays && itineraryDays.length > 0 ? /* @__PURE__ */ jsxs("section", { id: "trip-section-itinerary", className: "scroll-mt-20", children: [
-                /* @__PURE__ */ 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__ */ jsx("span", { className: "text-primary [&>svg]:h-5 [&>svg]:w-5", children: sectionIcons.itinerary }) : /* @__PURE__ */ jsx(ClockIcon, { className: "h-5 w-5 text-primary" }),
-                  "Itinerary"
-                ] }),
+                /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold text-foreground font-heading mb-6", children: "Itinerary" }),
                 /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-12", children: itineraryDays.map((day) => /* @__PURE__ */ jsx(
                   ItineraryDay,
                   __spreadProps(__spreadValues({}, day), {
@@ -9266,10 +9256,7 @@ function TripPage({
                   day.dayNumber
                 )) })
               ] }) : itinerary && itinerary.length > 0 && /* @__PURE__ */ jsxs("section", { id: "trip-section-itinerary", className: "scroll-mt-20", children: [
-                /* @__PURE__ */ 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__ */ jsx("span", { className: "text-primary [&>svg]:h-5 [&>svg]:w-5", children: sectionIcons.itinerary }) : /* @__PURE__ */ jsx(ClockIcon, { className: "h-5 w-5 text-primary" }),
-                  "Itinerary"
-                ] }),
+                /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold text-foreground font-heading mb-6", children: "Itinerary" }),
                 /* @__PURE__ */ jsx(ItineraryTimeline, { steps: itinerary })
               ] }),
               included && included.length > 0 && /* @__PURE__ */ jsxs("section", { id: "trip-section-included", className: "scroll-mt-20", children: [