@planetaexo/design-system 0.23.2 → 0.23.3

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';
@@ -7769,8 +7769,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 +7803,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 +7826,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 +7951,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" })
           }
         )
       ] })