@planetaexo/design-system 0.79.0 → 0.80.0

package/dist/index.cjs

@@ -19416,6 +19416,159 @@ function USPBand({
     }
   );
 }
+var TONES = {
+  light: {
+    bg: "#faf7f1",
+    vars: {
+      "--ps-eyebrow": "#1a5f56",
+      "--ps-head": "#2e2d2c",
+      "--ps-sub": "#74726e",
+      "--ps-chip-bd": "#ccd2d0",
+      "--ps-chip-fg": "#2e2d2c",
+      "--ps-chip-hover-bg": "#1a5f56",
+      "--ps-chip-hover-fg": "#ffffff",
+      "--ps-feat-bg": "#1a5f56",
+      "--ps-feat-fg": "#ffffff",
+      "--ps-feat-hover-bg": "#0d3832"
+    }
+  },
+  dark: {
+    bg: "#14352e",
+    vars: {
+      "--ps-eyebrow": "#a7e8c4",
+      "--ps-head": "#f4f1e9",
+      "--ps-sub": "rgba(244,241,233,.7)",
+      "--ps-chip-bd": "rgba(244,241,233,.22)",
+      "--ps-chip-fg": "#f4f1e9",
+      "--ps-chip-hover-bg": "#f4f1e9",
+      "--ps-chip-hover-fg": "#14352e",
+      "--ps-feat-bg": "#bff0d6",
+      "--ps-feat-fg": "#08231e",
+      "--ps-feat-hover-bg": "#a7e8c4"
+    }
+  }
+};
+var SIZES = {
+  md: {
+    pad: "py-20 sm:py-28",
+    heading: "text-2xl sm:text-3xl lg:text-4xl",
+    chip: "px-5 py-2.5 text-sm",
+    gap: "gap-2.5",
+    chipsMt: "mt-9"
+  },
+  sm: {
+    pad: "py-16 sm:py-24",
+    heading: "text-xl sm:text-2xl lg:text-3xl",
+    chip: "px-3.5 py-1.5 text-[13px]",
+    gap: "gap-2",
+    chipsMt: "mt-7"
+  }
+};
+var SCOPED_CSS = `
+.ps-chip{border:1px solid var(--ps-chip-bd);background:transparent;color:var(--ps-chip-fg);text-decoration:none;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
+.ps-chip:hover{background:var(--ps-chip-hover-bg);border-color:var(--ps-chip-hover-bg);color:var(--ps-chip-hover-fg)}
+.ps-chip[data-featured="true"]{background:var(--ps-feat-bg);border-color:var(--ps-feat-bg);color:var(--ps-feat-fg)}
+.ps-chip[data-featured="true"]:hover{background:var(--ps-feat-hover-bg);border-color:var(--ps-feat-hover-bg)}
+`;
+function PopularSearches({
+  eyebrow,
+  title,
+  subtitle,
+  chips,
+  tone = "light",
+  size = "md",
+  align = "center",
+  className
+}) {
+  const t = TONES[tone];
+  const s = SIZES[size];
+  const centered = align === "center";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      className: cn("ps-root w-full", className),
+      style: __spreadValues({ backgroundColor: t.bg }, t.vars),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: SCOPED_CSS } }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto w-full max-w-6xl px-6 sm:px-8",
+              s.pad,
+              centered && "text-center"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("max-w-2xl", centered && "mx-auto"), children: [
+                eyebrow && /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: "mb-3 font-ui text-xs font-bold uppercase tracking-[0.24em]",
+                    style: { color: "var(--ps-eyebrow)" },
+                    children: eyebrow
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "h2",
+                  {
+                    className: cn(
+                      "font-heading font-black uppercase leading-[1.05]",
+                      s.heading
+                    ),
+                    style: { color: "var(--ps-head)" },
+                    children: title
+                  }
+                ),
+                subtitle && /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: cn("mt-3 max-w-[46ch] text-base", centered && "mx-auto"),
+                    style: { color: "var(--ps-sub)" },
+                    children: subtitle
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex max-w-4xl flex-wrap items-center",
+                    s.gap,
+                    s.chipsMt,
+                    centered ? "mx-auto justify-center" : "justify-start"
+                  ),
+                  children: chips.map((chip, i) => {
+                    const className2 = "ps-chip inline-flex items-center rounded-full font-ui font-bold " + s.chip;
+                    const inner = chip.label;
+                    return chip.href ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "a",
+                      {
+                        href: chip.href,
+                        onClick: chip.onClick,
+                        "data-featured": chip.featured ? "true" : void 0,
+                        className: className2,
+                        children: inner
+                      },
+                      i
+                    ) : /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "data-featured": chip.featured ? "true" : void 0,
+                        className: className2,
+                        children: inner
+                      },
+                      i
+                    );
+                  })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 function RotatingSubtitle({
   phrases,
   interval,
@@ -20111,6 +20264,7 @@ exports.PhoneCountrySelect = PhoneCountrySelect;
 exports.PhotoGallery = PhotoGallery;
 exports.PhotoTourProvider = PhotoTourProvider;
 exports.Picture = Picture;
+exports.PopularSearches = PopularSearches;
 exports.PriceProgress = PriceProgress;
 exports.PricingMatrixCard = PricingMatrixCard;
 exports.PricingTrip = PricingTrip;