@planetaexo/design-system 0.2.14 → 0.2.15

package/dist/index.cjs

@@ -16,6 +16,7 @@ var checkbox = require('@base-ui/react/checkbox');
 var accordion = require('@base-ui/react/accordion');
 var mergeProps = require('@base-ui/react/merge-props');
 var useRender = require('@base-ui/react/use-render');
+var input = require('@base-ui/react/input');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -6274,6 +6275,368 @@ function ActivityCard({
     }
   );
 }
+function Input(_a) {
+  var _b = _a, { className, type } = _b, props = __objRest(_b, ["className", "type"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    input.Input,
+    __spreadValues({
+      type,
+      "data-slot": "input",
+      className: cn(
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none 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)
+  );
+}
+function Label(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "label",
+    __spreadValues({
+      "data-slot": "label",
+      className: cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )
+    }, props)
+  );
+}
+var DEFAULTS = {
+  heading: "Where will your next adventure take you?",
+  subtitle: "Tell us about your dream trip and our travel experts will craft the perfect itinerary for you.",
+  nameLabel: "Your name",
+  namePlaceholder: "e.g. Maria Silva",
+  emailLabel: "Email",
+  emailPlaceholder: "you@example.com",
+  travelDateLabel: "When are you planning to travel?",
+  travelDateOptions: [
+    "In the next 30 days",
+    "1 \u2013 3 months from now",
+    "3 \u2013 6 months from now",
+    "6 \u2013 12 months from now",
+    "I'm just exploring"
+  ],
+  submitLabel: "Send my request",
+  successHeading: "Thank you!",
+  successMessage: "One of our travel experts will reach out soon to help plan your perfect trip.",
+  privacyText: 'By submitting you agree to our <a href="/privacy-policy" target="_blank" rel="noopener">Privacy Policy</a>.',
+  trigger: "delay",
+  delaySeconds: 5,
+  scrollPercent: 50,
+  dismissDays: 7,
+  overlayOpacity: 40,
+  position: "center"
+};
+var COOKIE_NAME = "pexo_lead_popup_dismissed";
+function isDismissed() {
+  return document.cookie.includes(`${COOKIE_NAME}=1`);
+}
+function setDismissed(days) {
+  const expires = new Date(Date.now() + days * 864e5).toUTCString();
+  document.cookie = `${COOKIE_NAME}=1; expires=${expires}; path=/; SameSite=Lax`;
+}
+function LeadCapturePopup({
+  config: _config
+}) {
+  var _a;
+  const config = __spreadValues(__spreadValues({}, DEFAULTS), _config);
+  const [open, setOpen] = React18.useState(false);
+  const [closing, setClosing] = React18.useState(false);
+  const [submitted, setSubmitted] = React18.useState(false);
+  const [submitting, setSubmitting] = React18.useState(false);
+  const [error, setError] = React18.useState(null);
+  const [name, setName] = React18.useState("");
+  const [email, setEmail] = React18.useState("");
+  const [travelDate, setTravelDate] = React18.useState("");
+  const panelRef = React18.useRef(null);
+  const nameRef = React18.useRef(null);
+  const show = React18.useCallback(() => {
+    if (isDismissed()) return;
+    setOpen(true);
+  }, []);
+  React18.useEffect(() => {
+    var _a2;
+    if (isDismissed()) return;
+    if (config.trigger === "delay") {
+      const t = setTimeout(show, ((_a2 = config.delaySeconds) != null ? _a2 : 5) * 1e3);
+      return () => clearTimeout(t);
+    }
+    if (config.trigger === "exit_intent") {
+      const handler = (e) => {
+        if (e.clientY <= 5) show();
+      };
+      document.addEventListener("mouseout", handler);
+      return () => document.removeEventListener("mouseout", handler);
+    }
+    if (config.trigger === "scroll") {
+      const handler = () => {
+        var _a3;
+        const pct = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight) * 100;
+        if (pct >= ((_a3 = config.scrollPercent) != null ? _a3 : 50)) {
+          show();
+          window.removeEventListener("scroll", handler);
+        }
+      };
+      window.addEventListener("scroll", handler, { passive: true });
+      return () => window.removeEventListener("scroll", handler);
+    }
+  }, [config.trigger, config.delaySeconds, config.scrollPercent, show]);
+  React18.useEffect(() => {
+    if (open && !submitted) {
+      requestAnimationFrame(() => {
+        var _a2;
+        return (_a2 = nameRef.current) == null ? void 0 : _a2.focus();
+      });
+    }
+  }, [open, submitted]);
+  const close = React18.useCallback(() => {
+    setClosing(true);
+    setDismissed(config.dismissDays);
+    setTimeout(() => {
+      setOpen(false);
+      setClosing(false);
+    }, 250);
+  }, [config.dismissDays]);
+  React18.useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (e.key === "Escape") close();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [open, close]);
+  const onOverlayClick = React18.useCallback(
+    (e) => {
+      if (panelRef.current && !panelRef.current.contains(e.target)) {
+        close();
+      }
+    },
+    [close]
+  );
+  const handleSubmit = async (e) => {
+    var _a2;
+    e.preventDefault();
+    setError(null);
+    if (!name.trim() || !email.trim() || !travelDate) {
+      setError("Please fill in all fields.");
+      return;
+    }
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      setError("Please enter a valid email address.");
+      return;
+    }
+    setSubmitting(true);
+    try {
+      if (config.ajaxUrl) {
+        const res = await fetch(config.ajaxUrl, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            name: name.trim(),
+            email: email.trim(),
+            travel_date: travelDate,
+            nonce: (_a2 = config.nonce) != null ? _a2 : ""
+          })
+        });
+        if (!res.ok) throw new Error("Server error");
+      }
+      setSubmitted(true);
+      setDismissed(config.dismissDays);
+    } catch (e2) {
+      setError("Something went wrong. Please try again.");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  if (!open) return null;
+  const accentStyle = config.accentColor ? { "--popup-accent": config.accentColor } : void 0;
+  const isCenter = config.position === "center";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "pexo-lead-popup fixed inset-0 z-[99999] flex",
+        isCenter ? "items-center justify-center" : "items-end justify-end",
+        closing ? "animate-fade-out" : "animate-fade-in"
+      ),
+      style: {
+        backgroundColor: `rgba(0,0,0,${((_a = config.overlayOpacity) != null ? _a : 40) / 100})`,
+        backdropFilter: "blur(4px)",
+        WebkitBackdropFilter: "blur(4px)"
+      },
+      onClick: onOverlayClick,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": config.heading,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: panelRef,
+            className: cn(
+              "relative flex flex-col overflow-hidden bg-background text-foreground shadow-2xl ring-1 ring-foreground/5",
+              isCenter ? "m-4 w-full max-w-md rounded-2xl sm:max-w-lg" : "m-4 w-full max-w-sm rounded-2xl sm:m-6",
+              closing ? isCenter ? "animate-zoom-out" : "animate-slide-out-right" : isCenter ? "animate-zoom-in" : "animate-slide-in-right"
+            ),
+            style: accentStyle,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: close,
+                  className: "absolute top-3 right-3 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-black/30 text-white backdrop-blur-sm transition-colors hover:bg-black/50",
+                  "aria-label": "Close",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "h-4 w-4" })
+                }
+              ),
+              config.imageUrl && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-44 w-full shrink-0 overflow-hidden sm:h-52", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: config.imageUrl,
+                    alt: "",
+                    className: "h-full w-full object-cover",
+                    loading: "eager"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col gap-5 p-5 sm:p-6", children: !submitted ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-heading text-lg font-bold leading-tight tracking-tight text-foreground sm:text-xl", children: config.heading }),
+                  config.subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: config.subtitle })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "pexo-lead-name", className: "text-xs uppercase tracking-wider text-muted-foreground", children: config.nameLabel }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      Input,
+                      {
+                        ref: nameRef,
+                        id: "pexo-lead-name",
+                        type: "text",
+                        placeholder: config.namePlaceholder,
+                        value: name,
+                        onChange: (e) => setName(e.target.value),
+                        autoComplete: "name",
+                        className: "h-10 rounded-lg border-border/60 bg-muted/30 px-3 text-sm focus-visible:border-primary focus-visible:ring-primary/30"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "pexo-lead-email", className: "text-xs uppercase tracking-wider text-muted-foreground", children: config.emailLabel }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      Input,
+                      {
+                        id: "pexo-lead-email",
+                        type: "email",
+                        placeholder: config.emailPlaceholder,
+                        value: email,
+                        onChange: (e) => setEmail(e.target.value),
+                        autoComplete: "email",
+                        className: "h-10 rounded-lg border-border/60 bg-muted/30 px-3 text-sm focus-visible:border-primary focus-visible:ring-primary/30"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "pexo-lead-travel", className: "text-xs uppercase tracking-wider text-muted-foreground", children: config.travelDateLabel }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "select",
+                      {
+                        id: "pexo-lead-travel",
+                        value: travelDate,
+                        onChange: (e) => setTravelDate(e.target.value),
+                        className: cn(
+                          "h-10 w-full appearance-none rounded-lg border border-border/60 bg-muted/30 px-3 text-sm text-foreground outline-none transition-colors",
+                          "focus-visible:border-primary focus-visible:ring-3 focus-visible:ring-primary/30",
+                          !travelDate && "text-muted-foreground"
+                        ),
+                        style: {
+                          backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")`,
+                          backgroundRepeat: "no-repeat",
+                          backgroundPosition: "right 0.75rem center",
+                          paddingRight: "2.5rem"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: "Select a timeframe\u2026" }),
+                          config.travelDateOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt, children: opt }, opt))
+                        ]
+                      }
+                    )
+                  ] }),
+                  error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-destructive", role: "alert", children: error }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    Button,
+                    {
+                      type: "submit",
+                      disabled: submitting,
+                      className: cn(
+                        "h-11 w-full gap-2 rounded-lg text-sm font-bold tracking-wide",
+                        config.accentColor ? "border-transparent text-white" : "bg-primary text-primary-foreground hover:bg-primary/90"
+                      ),
+                      style: config.accentColor ? { backgroundColor: config.accentColor } : void 0,
+                      children: [
+                        submitting ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2Icon, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SendIcon, { className: "h-4 w-4" }),
+                        submitting ? "Sending\u2026" : config.submitLabel
+                      ]
+                    }
+                  ),
+                  config.privacyText && /* @__PURE__ */ jsxRuntime.jsx(
+                    "p",
+                    {
+                      className: "text-center text-[11px] leading-relaxed text-muted-foreground [&_a]:underline [&_a]:underline-offset-2 [&_a]:hover:text-foreground",
+                      dangerouslySetInnerHTML: { __html: config.privacyText }
+                    }
+                  )
+                ] })
+              ] }) : (
+                /* ---- Success state ---- */
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-4 py-8 text-center", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircleIcon, { className: "h-8 w-8 text-primary" }) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-heading text-lg font-bold text-foreground", children: config.successHeading }),
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: config.successMessage })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Button,
+                    {
+                      onClick: close,
+                      variant: "outline",
+                      className: "mt-2 h-10 px-6 text-sm",
+                      children: "Close"
+                    }
+                  )
+                ] })
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+        @keyframes pexo-fade-in { from { opacity: 0 } to { opacity: 1 } }
+        @keyframes pexo-fade-out { from { opacity: 1 } to { opacity: 0 } }
+        @keyframes pexo-zoom-in { from { opacity: 0; transform: scale(0.92) } to { opacity: 1; transform: scale(1) } }
+        @keyframes pexo-zoom-out { from { opacity: 1; transform: scale(1) } to { opacity: 0; transform: scale(0.92) } }
+        @keyframes pexo-slide-in-right { from { opacity: 0; transform: translateX(100%) } to { opacity: 1; transform: translateX(0) } }
+        @keyframes pexo-slide-out-right { from { opacity: 1; transform: translateX(0) } to { opacity: 0; transform: translateX(100%) } }
+
+        .pexo-lead-popup .animate-fade-in { animation: pexo-fade-in 0.3s ease-out both }
+        .pexo-lead-popup .animate-fade-out { animation: pexo-fade-out 0.25s ease-in both }
+        .pexo-lead-popup .animate-zoom-in { animation: pexo-zoom-in 0.35s cubic-bezier(0.16,1,0.3,1) both }
+        .pexo-lead-popup .animate-zoom-out { animation: pexo-zoom-out 0.25s ease-in both }
+        .pexo-lead-popup .animate-slide-in-right { animation: pexo-slide-in-right 0.4s cubic-bezier(0.16,1,0.3,1) both }
+        .pexo-lead-popup .animate-slide-out-right { animation: pexo-slide-out-right 0.3s ease-in both }
+
+        /* Ensure popup fonts inherit from design system */
+        .pexo-lead-popup { font-family: var(--font-sans, "Literata", Georgia, serif); }
+        .pexo-lead-popup h1, .pexo-lead-popup h2, .pexo-lead-popup h3 { font-family: var(--font-heading, "ArcaMajora3", sans-serif); }
+        .pexo-lead-popup button, .pexo-lead-popup label { font-family: var(--font-ui, "ArcaMajora3", sans-serif); }
+        .pexo-lead-popup select { font-family: var(--font-sans, "Literata", Georgia, serif); }
+      ` })
+      ]
+    }
+  );
+}
 
 exports.ActivityCard = ActivityCard;
 exports.BookingConfirmation = BookingConfirmation;
@@ -6290,6 +6653,7 @@ exports.FilterPanel = FilterPanel;
 exports.FloatingInput = FloatingInput;
 exports.FloatingSelect = FloatingSelect;
 exports.Itinerary = Itinerary;
+exports.LeadCapturePopup = LeadCapturePopup;
 exports.MenuTrip = MenuTrip;
 exports.Offer = Offer;
 exports.OfferAdventureCard = OfferAdventureCard;