@planetaexo/design-system 0.23.2 → 0.23.3

package/dist/index.cjs

@@ -7790,8 +7790,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 +7824,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 +7847,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 +7972,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" })
           }
         )
       ] })