@planetaexo/design-system 0.52.0 → 0.52.1

package/dist/index.cjs

@@ -14298,10 +14298,450 @@ function LeadCapturePopup({
     }
   );
 }
+function ExoOrb({
+  size = 80,
+  logoSrc = "/white_transparent_exo.png",
+  pulse = true,
+  trackCursor = true,
+  className
+}) {
+  const uid = React28.useId().replace(/:/g, "");
+  const id = (name) => `exo-orb-${uid}-${name}`;
+  const rootRef = React28.useRef(null);
+  const pupilRef = React28.useRef(null);
+  React28.useEffect(() => {
+    if (!trackCursor) return;
+    if (typeof window === "undefined") return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    const root = rootRef.current;
+    const pupil = pupilRef.current;
+    if (!root || !pupil) return;
+    const MAX_OFFSET = 3.5;
+    const REACH_PX = 260;
+    const EASE = 0.18;
+    let targetX = 0, targetY = 0, curX = 0, curY = 0;
+    let raf = 0;
+    const onMove = (e) => {
+      const r = root.getBoundingClientRect();
+      const cx = r.left + r.width / 2;
+      const cy = r.top + r.height / 2;
+      const dx = e.clientX - cx;
+      const dy = e.clientY - cy;
+      const dist = Math.hypot(dx, dy) || 1;
+      const factor = Math.min(dist, REACH_PX) / REACH_PX;
+      targetX = dx / dist * MAX_OFFSET * factor;
+      targetY = dy / dist * MAX_OFFSET * factor;
+    };
+    const onLeave = () => {
+      targetX = 0;
+      targetY = 0;
+    };
+    const tick = () => {
+      curX += (targetX - curX) * EASE;
+      curY += (targetY - curY) * EASE;
+      pupil.setAttribute(
+        "transform",
+        `translate(${curX.toFixed(2)} ${curY.toFixed(2)})`
+      );
+      raf = requestAnimationFrame(tick);
+    };
+    window.addEventListener("pointermove", onMove, { passive: true });
+    window.addEventListener("pointerleave", onLeave);
+    window.addEventListener("blur", onLeave);
+    raf = requestAnimationFrame(tick);
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerleave", onLeave);
+      window.removeEventListener("blur", onLeave);
+    };
+  }, [trackCursor]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      ref: rootRef,
+      "aria-hidden": "true",
+      className: cn("inline-block leading-none", className),
+      style: { width: size, height: size },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            width: size,
+            height: size,
+            viewBox: "0 0 100 100",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            className: cn(
+              "block overflow-visible",
+              pulse && "motion-safe:animate-[exo-orb-pulse_3.6s_ease-in-out_infinite]"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("radialGradient", { id: id("body"), cx: "35%", cy: "30%", r: "75%", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#a8efe2" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "35%", stopColor: "#5bd3bf" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "70%", stopColor: "#47bca9" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#155b52" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("radialGradient", { id: id("highlight"), cx: "30%", cy: "22%", r: "35%", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#ffffff", stopOpacity: "0.85" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "60%", stopColor: "#ffffff", stopOpacity: "0.10" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#ffffff", stopOpacity: "0" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("radialGradient", { id: id("rim"), cx: "60%", cy: "85%", r: "65%", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "60%", stopColor: "#000000", stopOpacity: "0" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#000000", stopOpacity: "0.35" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "filter",
+                  {
+                    id: id("glow"),
+                    x: "-60%",
+                    y: "-60%",
+                    width: "220%",
+                    height: "220%",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "6", result: "blur" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "feColorMatrix",
+                        {
+                          in: "blur",
+                          type: "matrix",
+                          values: "0 0 0 0 0.28\n                      0 0 0 0 0.74\n                      0 0 0 0 0.66\n                      0 0 0 1 0",
+                          result: "tinted"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx("feComponentTransfer", { in: "tinted", result: "strong", children: /* @__PURE__ */ jsxRuntime.jsx("feFuncA", { type: "linear", slope: 1.6 }) }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("feMerge", { children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("feMergeNode", { in: "strong" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("feMergeNode", { in: "SourceGraphic" })
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: id("clip"), children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "50", cy: "50", r: "22" }) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "circle",
+                {
+                  cx: "50",
+                  cy: "50",
+                  r: "30",
+                  fill: "#47bca9",
+                  opacity: "0.18",
+                  filter: `url(#${id("glow")})`
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("g", { filter: `url(#${id("glow")})`, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "50", cy: "50", r: "22", fill: `url(#${id("body")})` }),
+                /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "50", cy: "50", r: "22", fill: `url(#${id("highlight")})` }),
+                /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "50", cy: "50", r: "22", fill: `url(#${id("rim")})` })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: "M 34 38 Q 50 28 66 38",
+                  stroke: "#ffffff",
+                  strokeOpacity: "0.45",
+                  strokeWidth: "1.4",
+                  strokeLinecap: "round",
+                  fill: "none"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: `url(#${id("clip")})`, children: /* @__PURE__ */ jsxRuntime.jsx("g", { ref: pupilRef, children: /* @__PURE__ */ jsxRuntime.jsx(
+                "image",
+                {
+                  href: logoSrc,
+                  x: "33.8",
+                  y: "33.8",
+                  width: "32.4",
+                  height: "32.4",
+                  preserveAspectRatio: "xMidYMid meet"
+                }
+              ) }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("style", { children: `@keyframes exo-orb-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}` })
+      ]
+    }
+  );
+}
+function Textarea(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "textarea",
+    __spreadValues({
+      "data-slot": "textarea",
+      className: cn(
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )
+    }, props)
+  );
+}
+var DEFAULT_BASE_URL = "https://staging.ask.planetaexo.com";
+var DEFAULT_SUGGESTIONS = [
+  { label: "Where do I start?", ask: "I am new to PlanetaEXO, what should I check out first?" },
+  { label: "Destinations", ask: "What destinations does PlanetaEXO offer?" },
+  { label: "5 days in the Amazon", ask: "Plan a 5-day trip to the Amazon for two travelers." },
+  { label: "Mount Roraima trek", ask: "What is included in the Mount Roraima trek?" },
+  { label: "Best time for Pantanal", ask: "Best time of year to visit the Pantanal?" },
+  { label: "Fitness level needed", ask: "How fit do I need to be for an EXO trek?" }
+];
+function AskExo({
+  baseUrl = DEFAULT_BASE_URL,
+  variant = "suggestions",
+  eyebrow = "PLANETAEXO",
+  title = "Ask EXO",
+  subtitle = "Our AI travel concierge will answer in seconds.",
+  suggestions = DEFAULT_SUGGESTIONS,
+  inputPlaceholder,
+  submitLabel = "Ask",
+  logoSrc = "/white_transparent_exo.png",
+  className,
+  teaser = "Need help?",
+  teaserDelayMs = 2500,
+  teaserDurationMs = 6e3
+}) {
+  const [open, setOpen] = React28.useState(false);
+  const [question, setQuestion] = React28.useState("");
+  const [teaserVisible, setTeaserVisible] = React28.useState(false);
+  const teaserEnabled = !!teaser && teaser !== "";
+  const inputRef = React28.useRef(null);
+  const textareaRef = React28.useRef(null);
+  React28.useEffect(() => {
+    if (!open) {
+      setQuestion("");
+      return;
+    }
+    const t = setTimeout(() => {
+      var _a, _b;
+      if (variant === "compose") (_a = textareaRef.current) == null ? void 0 : _a.focus();
+      else (_b = inputRef.current) == null ? void 0 : _b.focus();
+    }, 200);
+    return () => clearTimeout(t);
+  }, [open, variant]);
+  React28.useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open]);
+  React28.useEffect(() => {
+    if (!teaserEnabled || open) return;
+    if (typeof window === "undefined") return;
+    const showTimer = setTimeout(() => setTeaserVisible(true), teaserDelayMs);
+    const hideTimer = setTimeout(
+      () => setTeaserVisible(false),
+      teaserDelayMs + teaserDurationMs
+    );
+    return () => {
+      clearTimeout(showTimer);
+      clearTimeout(hideTimer);
+    };
+  }, [teaserEnabled, teaserDelayMs, teaserDurationMs, open]);
+  React28.useEffect(() => {
+    if (open) setTeaserVisible(false);
+  }, [open]);
+  const askExo = (q) => {
+    const trimmed = q.trim();
+    if (!trimmed) return;
+    const url = baseUrl.replace(/\/+$/, "") + "/?q=" + encodeURIComponent(trimmed) + "&source=" + encodeURIComponent(window.location.href);
+    window.open(url, "_blank", "noopener,noreferrer");
+    setOpen(false);
+  };
+  const placeholder = inputPlaceholder != null ? inputPlaceholder : variant === "compose" ? "Type your question\u2026" : "Ask your own question\u2026";
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    teaserEnabled && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "aria-hidden": !teaserVisible,
+        tabIndex: teaserVisible ? 0 : -1,
+        onClick: () => setOpen(true),
+        className: cn(
+          // shape + tone
+          "fixed right-24 bottom-13 z-40 cursor-pointer rounded-full border border-border bg-card px-3.5 py-1.5",
+          "font-sans text-[12.5px] leading-none font-normal whitespace-nowrap text-muted-foreground",
+          "shadow-[0_6px_18px_oklch(0.20_0.002_60_/_0.12)]",
+          // entrance / exit animation
+          "transition-[opacity,transform,color] duration-300 ease-out",
+          teaserVisible ? "translate-x-0 scale-100 opacity-100" : "pointer-events-none translate-x-1 scale-95 opacity-0",
+          // hover
+          "hover:text-foreground",
+          // a11y
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2",
+          "max-[480px]:hidden"
+        ),
+        children: teaser
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": open ? "Close Ask EXO" : "Open Ask EXO",
+        "aria-expanded": open,
+        "aria-controls": "ask-exo-panel",
+        onClick: () => setOpen((v) => !v),
+        className: cn(
+          "fixed right-5 bottom-6 z-40 size-20 cursor-pointer border-0 bg-transparent p-0",
+          "transition-transform duration-200 ease-out hover:-translate-y-px hover:scale-[1.04] active:translate-y-0 active:scale-[0.98]",
+          "focus-visible:outline-none [-webkit-tap-highlight-color:transparent]"
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(ExoOrb, { size: 80, logoSrc })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "aside",
+      {
+        id: "ask-exo-panel",
+        role: "dialog",
+        "aria-labelledby": "ask-exo-title",
+        "aria-hidden": !open,
+        "data-open": open,
+        className: cn(
+          "fixed right-5 bottom-30 z-50 w-[400px] max-h-[min(640px,80vh)]",
+          variant === "compose" && "max-h-[min(560px,82vh)]",
+          "flex flex-col overflow-hidden rounded-2xl border border-border bg-card text-card-foreground",
+          "shadow-[0_40px_100px_oklch(0.20_0.002_60_/_0.35)]",
+          "transition-[opacity,transform] duration-200 ease-out",
+          "data-[open=false]:pointer-events-none data-[open=false]:translate-y-4 data-[open=false]:scale-[0.985] data-[open=false]:opacity-0",
+          "data-[open=true]:pointer-events-auto data-[open=true]:translate-y-0 data-[open=true]:scale-100 data-[open=true]:opacity-100",
+          "max-[480px]:right-2 max-[480px]:bottom-28 max-[480px]:w-[calc(100%-1rem)] max-[480px]:rounded-xl",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "relative border-b border-border bg-gradient-to-b from-primary-300/20 to-transparent px-5 py-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 mb-1 font-ui text-[10.5px] font-bold tracking-[1.4px] text-primary-800 uppercase", children: eyebrow }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "h2",
+              {
+                id: "ask-exo-title",
+                className: "m-0 font-heading text-[20px] font-bold tracking-[-0.3px] text-foreground",
+                children: title
+              }
+            ),
+            subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1.5 mb-0 font-sans text-[13.5px] leading-relaxed text-muted-foreground", children: subtitle }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Close",
+                onClick: () => setOpen(false),
+                className: cn(
+                  "absolute top-3 right-3 inline-flex size-8 cursor-pointer items-center justify-center rounded-full border-0 bg-transparent text-muted-foreground transition-colors",
+                  "hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "size-4" })
+              }
+            )
+          ] }),
+          variant === "compose" ? (
+            /* — Compose variant: just a big textarea — */
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "form",
+              {
+                className: "flex flex-1 flex-col gap-2.5 overflow-y-auto p-5",
+                onSubmit: (e) => {
+                  e.preventDefault();
+                  askExo(question);
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Textarea,
+                    {
+                      ref: textareaRef,
+                      placeholder,
+                      value: question,
+                      onChange: (e) => setQuestion(e.target.value),
+                      maxLength: 500,
+                      className: "min-h-[220px] flex-1 resize-y bg-muted/50 px-4 py-3.5 font-sans text-[15px] leading-relaxed placeholder:italic focus-visible:bg-card"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Button2,
+                    {
+                      type: "submit",
+                      disabled: !question.trim(),
+                      className: "h-11 w-full font-ui text-[13px] font-bold tracking-[0.5px] uppercase",
+                      children: submitLabel
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 mb-0 text-center font-ui text-[10.5px] font-bold tracking-[0.5px] text-muted-foreground uppercase", children: "Opens in a new tab" })
+                ]
+              }
+            )
+          ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-3.5 overflow-y-auto px-5 py-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 mb-0 font-ui text-[10.5px] font-bold tracking-[1.2px] text-muted-foreground uppercase", children: "Suggested questions" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: suggestions.map((s) => /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => askExo(s.ask),
+                  className: cn(
+                    "cursor-pointer rounded-full border border-border bg-muted/60 px-3.5 py-2 text-left font-ui text-[12.5px] font-bold leading-tight text-foreground",
+                    "transition-colors hover:border-primary hover:bg-primary-100 hover:text-primary-800",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                  ),
+                  children: s.label
+                },
+                s.label
+              )) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: "border-t border-border bg-card px-4 py-3.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "form",
+                {
+                  className: "flex items-stretch gap-2",
+                  onSubmit: (e) => {
+                    e.preventDefault();
+                    askExo(question);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      Input,
+                      {
+                        ref: inputRef,
+                        type: "text",
+                        placeholder,
+                        value: question,
+                        onChange: (e) => setQuestion(e.target.value),
+                        maxLength: 500,
+                        "aria-label": "Ask EXO",
+                        className: "h-10 flex-1 rounded-xl bg-muted/50 px-3.5 py-2.5 font-sans text-[14.5px] focus-visible:bg-card"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      Button2,
+                      {
+                        type: "submit",
+                        disabled: !question.trim(),
+                        className: "h-10 min-w-[86px] rounded-xl font-ui text-[12px] font-bold tracking-[0.5px] uppercase",
+                        children: submitLabel
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2.5 mb-0 text-center font-ui text-[10.5px] font-bold tracking-[0.5px] text-muted-foreground uppercase", children: "Opens in a new tab" })
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
 
 exports.ActivityCard = ActivityCard;
 exports.AgentContactCard = AgentContactCard;
 exports.Alert = Alert;
+exports.AskExo = AskExo;
 exports.BirthDateField = BirthDateField;
 exports.BookingAdventureCard = BookingAdventureCard;
 exports.BookingCancellationEmail = BookingCancellationEmail;
@@ -14327,6 +14767,7 @@ exports.DialogDescription = DialogDescription;
 exports.DialogFooter = DialogFooter;
 exports.DialogHeader = DialogHeader;
 exports.DialogTitle = DialogTitle;
+exports.ExoOrb = ExoOrb;
 exports.FilterPanel = FilterPanel;
 exports.FloatingInput = FloatingInput;
 exports.FloatingSelect = FloatingSelect;