@queuezero/react 0.1.7 → 0.1.8

package/dist/index.d.mts

@@ -74,6 +74,12 @@ interface WaitlistFormProps {
     showLabel?: boolean;
     /** Label text */
     labelText?: string;
+    /** Display mode: 'inline' renders form directly, 'modal' renders trigger button */
+    displayMode?: 'inline' | 'modal';
+    /** Text for modal trigger button (only used when displayMode is 'modal') */
+    triggerText?: string;
+    /** Modal size (only used when displayMode is 'modal') */
+    modalSize?: 'sm' | 'md' | 'lg';
     /** Children for custom rendering */
     children?: React.ReactNode;
 }
@@ -193,30 +199,11 @@ declare function useWaitlist(campaign: string, config?: WaitlistProviderProps['c
  * // Basic usage
  * <WaitlistForm onSuccess={(res) => console.log('Joined!', res)} />
  *
- * // With referral code from URL
- * const referrerCode = new URLSearchParams(window.location.search).get('ref');
- * <WaitlistForm referrerCode={referrerCode || undefined} />
- *
- * // With custom styling
- * <WaitlistForm
- *   className="my-form"
- *   placeholder="Enter your work email"
- *   buttonText="Get Early Access"
- * />
- *
- * // With custom rendering
- * <WaitlistForm>
- *   {({ email, setEmail, submit, loading, error }) => (
- *     <div>
- *       <input value={email} onChange={(e) => setEmail(e.target.value)} />
- *       <button onClick={submit} disabled={loading}>Join</button>
- *       {error && <span>{error.message}</span>}
- *     </div>
- *   )}
- * </WaitlistForm>
+ * // Modal mode
+ * <WaitlistForm displayMode="modal" triggerText="Join Our Waitlist" />
  * ```
  */
-declare function WaitlistForm({ onSuccess, onError, referrerCode, metadata, className, placeholder, buttonText, loadingText, showLabel, labelText, children, }: WaitlistFormProps): any;
+declare function WaitlistForm({ onSuccess, onError, referrerCode, metadata, className, placeholder, buttonText, loadingText, showLabel, labelText, displayMode, triggerText, modalSize, children, }: WaitlistFormProps): any;
 
 /**
  * WaitlistStatus - Shows current position, score, and referral count

package/dist/index.d.ts

@@ -74,6 +74,12 @@ interface WaitlistFormProps {
     showLabel?: boolean;
     /** Label text */
     labelText?: string;
+    /** Display mode: 'inline' renders form directly, 'modal' renders trigger button */
+    displayMode?: 'inline' | 'modal';
+    /** Text for modal trigger button (only used when displayMode is 'modal') */
+    triggerText?: string;
+    /** Modal size (only used when displayMode is 'modal') */
+    modalSize?: 'sm' | 'md' | 'lg';
     /** Children for custom rendering */
     children?: React.ReactNode;
 }
@@ -193,30 +199,11 @@ declare function useWaitlist(campaign: string, config?: WaitlistProviderProps['c
  * // Basic usage
  * <WaitlistForm onSuccess={(res) => console.log('Joined!', res)} />
  *
- * // With referral code from URL
- * const referrerCode = new URLSearchParams(window.location.search).get('ref');
- * <WaitlistForm referrerCode={referrerCode || undefined} />
- *
- * // With custom styling
- * <WaitlistForm
- *   className="my-form"
- *   placeholder="Enter your work email"
- *   buttonText="Get Early Access"
- * />
- *
- * // With custom rendering
- * <WaitlistForm>
- *   {({ email, setEmail, submit, loading, error }) => (
- *     <div>
- *       <input value={email} onChange={(e) => setEmail(e.target.value)} />
- *       <button onClick={submit} disabled={loading}>Join</button>
- *       {error && <span>{error.message}</span>}
- *     </div>
- *   )}
- * </WaitlistForm>
+ * // Modal mode
+ * <WaitlistForm displayMode="modal" triggerText="Join Our Waitlist" />
  * ```
  */
-declare function WaitlistForm({ onSuccess, onError, referrerCode, metadata, className, placeholder, buttonText, loadingText, showLabel, labelText, children, }: WaitlistFormProps): any;
+declare function WaitlistForm({ onSuccess, onError, referrerCode, metadata, className, placeholder, buttonText, loadingText, showLabel, labelText, displayMode, triggerText, modalSize, children, }: WaitlistFormProps): any;
 
 /**
  * WaitlistStatus - Shows current position, score, and referral count

package/dist/index.js

@@ -173,12 +173,33 @@ function WaitlistForm({
   loadingText = "Joining...",
   showLabel = false,
   labelText = "Email",
+  displayMode = "inline",
+  triggerText = "Join Waitlist",
+  modalSize = "md",
   children
 }) {
   const { join, loading, error, isJoined, config, configLoading } = useWaitlistContext();
   const [email, setEmail] = (0, import_react2.useState)("");
   const [formData, setFormData] = (0, import_react2.useState)({});
   const [localError, setLocalError] = (0, import_react2.useState)(null);
+  const [isModalOpen, setIsModalOpen] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
+    const handleEsc = (e) => {
+      if (e.key === "Escape" && isModalOpen) setIsModalOpen(false);
+    };
+    document.addEventListener("keydown", handleEsc);
+    return () => document.removeEventListener("keydown", handleEsc);
+  }, [isModalOpen]);
+  (0, import_react2.useEffect)(() => {
+    if (isModalOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isModalOpen]);
   const controller = (0, import_react2.useMemo)(
     () => new import_queuezero2.FormController(join, config?.formFields || [], referrerCode),
     [join, config, referrerCode]
@@ -205,6 +226,13 @@ function WaitlistForm({
     [email, formData, controller, metadata, onSuccess, onError, error]
   );
   const displayError = localError || error;
+  const branding = config?.branding || {};
+  const themeColor = branding.themeColor || "#10B981";
+  const sizeClasses = {
+    sm: "max-w-sm",
+    md: "max-w-md",
+    lg: "max-w-lg"
+  };
   if (isJoined) {
     return null;
   }
@@ -217,7 +245,7 @@ function WaitlistForm({
       error: displayError
     });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("form", { onSubmit: handleSubmit, className: `qz-form ${className}`.trim(), children: [
+  const formContent = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("form", { onSubmit: handleSubmit, className: `qz-form ${displayMode === "inline" ? className : ""}`.trim(), children: [
     showLabel && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: "qz-email", className: "qz-form-label", children: labelText }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "qz-form-row", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "input",
@@ -307,8 +335,49 @@ function WaitlistForm({
       ] }, field.key);
     }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "qz-form-row", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "submit", disabled: loading, className: "qz-form-button", children: loading ? loadingText : buttonText }) }),
-    displayError && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "qz-form-error", role: "alert", children: displayError.message }),
-    children
+    displayError && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "qz-form-error", role: "alert", children: displayError.message })
+  ] });
+  if (displayMode === "inline") {
+    return formContent;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => setIsModalOpen(true),
+        className: `qz-modal-trigger ${className}`.trim(),
+        style: { "--qz-theme-color": themeColor },
+        children: triggerText
+      }
+    ),
+    isModalOpen && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        className: "qz-modal-overlay",
+        onClick: (e) => e.target === e.currentTarget && setIsModalOpen(false),
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `qz-modal ${sizeClasses[modalSize]}`, style: { "--qz-theme-color": themeColor }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "qz-modal-header", children: [
+            branding.logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { src: branding.logoUrl, alt: "Logo", className: "qz-modal-logo" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "qz-modal-close",
+                onClick: () => setIsModalOpen(false),
+                "aria-label": "Close",
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M18 6L6 18M6 6l12 12" }) })
+              }
+            )
+          ] }),
+          branding.coverImageUrl && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { src: branding.coverImageUrl, alt: "", className: "qz-modal-cover" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "qz-modal-body", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { className: "qz-modal-title", children: config?.name || "Join Waitlist" }),
+            formContent
+          ] })
+        ] })
+      }
+    )
   ] });
 }
 

package/dist/index.mjs

@@ -125,9 +125,9 @@ function useWaitlist(campaign, config) {
 }
 
 // src/WaitlistForm.tsx
-import { useState as useState2, useCallback as useCallback2, useMemo as useMemo2 } from "react";
+import { useState as useState2, useCallback as useCallback2, useMemo as useMemo2, useEffect as useEffect2 } from "react";
 import { FormController } from "queuezero";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 function WaitlistForm({
   onSuccess,
   onError,
@@ -139,12 +139,33 @@ function WaitlistForm({
   loadingText = "Joining...",
   showLabel = false,
   labelText = "Email",
+  displayMode = "inline",
+  triggerText = "Join Waitlist",
+  modalSize = "md",
   children
 }) {
   const { join, loading, error, isJoined, config, configLoading } = useWaitlistContext();
   const [email, setEmail] = useState2("");
   const [formData, setFormData] = useState2({});
   const [localError, setLocalError] = useState2(null);
+  const [isModalOpen, setIsModalOpen] = useState2(false);
+  useEffect2(() => {
+    const handleEsc = (e) => {
+      if (e.key === "Escape" && isModalOpen) setIsModalOpen(false);
+    };
+    document.addEventListener("keydown", handleEsc);
+    return () => document.removeEventListener("keydown", handleEsc);
+  }, [isModalOpen]);
+  useEffect2(() => {
+    if (isModalOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isModalOpen]);
   const controller = useMemo2(
     () => new FormController(join, config?.formFields || [], referrerCode),
     [join, config, referrerCode]
@@ -171,6 +192,13 @@ function WaitlistForm({
     [email, formData, controller, metadata, onSuccess, onError, error]
   );
   const displayError = localError || error;
+  const branding = config?.branding || {};
+  const themeColor = branding.themeColor || "#10B981";
+  const sizeClasses = {
+    sm: "max-w-sm",
+    md: "max-w-md",
+    lg: "max-w-lg"
+  };
   if (isJoined) {
     return null;
   }
@@ -183,7 +211,7 @@ function WaitlistForm({
       error: displayError
     });
   }
-  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: `qz-form ${className}`.trim(), children: [
+  const formContent = /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: `qz-form ${displayMode === "inline" ? className : ""}`.trim(), children: [
     showLabel && /* @__PURE__ */ jsx2("label", { htmlFor: "qz-email", className: "qz-form-label", children: labelText }),
     /* @__PURE__ */ jsx2("div", { className: "qz-form-row", children: /* @__PURE__ */ jsx2(
       "input",
@@ -273,13 +301,54 @@ function WaitlistForm({
       ] }, field.key);
     }),
     /* @__PURE__ */ jsx2("div", { className: "qz-form-row", children: /* @__PURE__ */ jsx2("button", { type: "submit", disabled: loading, className: "qz-form-button", children: loading ? loadingText : buttonText }) }),
-    displayError && /* @__PURE__ */ jsx2("div", { className: "qz-form-error", role: "alert", children: displayError.message }),
-    children
+    displayError && /* @__PURE__ */ jsx2("div", { className: "qz-form-error", role: "alert", children: displayError.message })
+  ] });
+  if (displayMode === "inline") {
+    return formContent;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        onClick: () => setIsModalOpen(true),
+        className: `qz-modal-trigger ${className}`.trim(),
+        style: { "--qz-theme-color": themeColor },
+        children: triggerText
+      }
+    ),
+    isModalOpen && /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: "qz-modal-overlay",
+        onClick: (e) => e.target === e.currentTarget && setIsModalOpen(false),
+        children: /* @__PURE__ */ jsxs("div", { className: `qz-modal ${sizeClasses[modalSize]}`, style: { "--qz-theme-color": themeColor }, children: [
+          /* @__PURE__ */ jsxs("div", { className: "qz-modal-header", children: [
+            branding.logoUrl ? /* @__PURE__ */ jsx2("img", { src: branding.logoUrl, alt: "Logo", className: "qz-modal-logo" }) : /* @__PURE__ */ jsx2("span", {}),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                className: "qz-modal-close",
+                onClick: () => setIsModalOpen(false),
+                "aria-label": "Close",
+                children: /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx2("path", { d: "M18 6L6 18M6 6l12 12" }) })
+              }
+            )
+          ] }),
+          branding.coverImageUrl && /* @__PURE__ */ jsx2("img", { src: branding.coverImageUrl, alt: "", className: "qz-modal-cover" }),
+          /* @__PURE__ */ jsxs("div", { className: "qz-modal-body", children: [
+            /* @__PURE__ */ jsx2("h2", { className: "qz-modal-title", children: config?.name || "Join Waitlist" }),
+            formContent
+          ] })
+        ] })
+      }
+    )
   ] });
 }
 
 // src/WaitlistStatus.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function WaitlistStatus({
   className = "",
   showReferrals = true,
@@ -297,7 +366,7 @@ function WaitlistStatus({
     return /* @__PURE__ */ jsx3("div", { className: `qz-status qz-status-loading ${className}`.trim(), children: "Loading..." });
   }
   if (typeof children === "function") {
-    return /* @__PURE__ */ jsx3(Fragment, { children: children(status) });
+    return /* @__PURE__ */ jsx3(Fragment2, { children: children(status) });
   }
   return /* @__PURE__ */ jsxs2("div", { className: `qz-status ${className}`.trim(), children: [
     /* @__PURE__ */ jsxs2("div", { className: "qz-status-item qz-status-position", children: [
@@ -320,7 +389,7 @@ function WaitlistStatus({
 
 // src/ReferralShare.tsx
 import { useState as useState3, useCallback as useCallback3 } from "react";
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function ReferralShare({
   className = "",
   label = "Share your referral link:",
@@ -381,7 +450,7 @@ ${link}`);
     return null;
   }
   if (typeof children === "function") {
-    return /* @__PURE__ */ jsx4(Fragment2, { children: children({ link, code, copy: handleCopy, copied }) });
+    return /* @__PURE__ */ jsx4(Fragment3, { children: children({ link, code, copy: handleCopy, copied }) });
   }
   return /* @__PURE__ */ jsxs3("div", { className: `qz-share ${className}`.trim(), children: [
     label && /* @__PURE__ */ jsx4("div", { className: "qz-share-label", children: label }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@queuezero/react",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "React components and hooks for QueueZero viral waitlists",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -35,7 +35,7 @@
     "react": ">=17.0.0"
   },
   "dependencies": {
-    "queuezero": "^0.1.5"
+    "queuezero": "^0.1.6"
   },
   "devDependencies": {
     "@types/node": "^22.13.11",