@gait-financial/react 0.1.10 → 0.1.12

package/dist/index.cjs

@@ -87,6 +87,54 @@ if (typeof window !== "undefined" && typeof customElements !== "undefined") {
 }
 
 // src/components/GaitButton.tsx
+function setAttributes(el, props) {
+  const {
+    "data-id": dataId,
+    disabled,
+    size,
+    style,
+    items,
+    priceBreakdown,
+    totalCost,
+    customer,
+    webhook,
+    merchantStoreUrl
+  } = props;
+  if (dataId !== void 0) el.setAttribute("data-id", dataId);
+  if (size !== void 0) el.setAttribute("size", size);
+  if (disabled) el.setAttribute("disabled", "");
+  else el.removeAttribute("disabled");
+  if (style !== void 0) {
+    const styleStr = typeof style === "string" ? style : Object.entries(style).map(
+      ([k, v]) => `${k.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${v}`
+    ).join("; ");
+    el.setAttribute("style", styleStr);
+  }
+  if (items !== void 0)
+    el.setAttribute(
+      "items",
+      typeof items === "string" ? items : JSON.stringify(items)
+    );
+  if (priceBreakdown !== void 0)
+    el.setAttribute(
+      "price-breakdown",
+      typeof priceBreakdown === "string" ? priceBreakdown : JSON.stringify(priceBreakdown)
+    );
+  if (totalCost !== void 0)
+    el.setAttribute("total-cost", String(totalCost));
+  if (customer !== void 0)
+    el.setAttribute(
+      "customer",
+      typeof customer === "string" ? customer : JSON.stringify(customer)
+    );
+  if (webhook !== void 0)
+    el.setAttribute(
+      "webhook",
+      typeof webhook === "string" ? webhook : JSON.stringify(webhook)
+    );
+  if (merchantStoreUrl !== void 0)
+    el.setAttribute("merchant-store-url", merchantStoreUrl);
+}
 var GaitButton = (0, import_react.forwardRef)(function GaitButton2({
   "data-id": dataId,
   disabled,
@@ -108,8 +156,25 @@ var GaitButton = (0, import_react.forwardRef)(function GaitButton2({
   id,
   ...rest
 }, ref) {
+  const containerRef = (0, import_react.useRef)(null);
   const elementRef = (0, import_react.useRef)(null);
   const [isReady, setIsReady] = (0, import_react.useState)(false);
+  const callbackRef = (0, import_react.useRef)({
+    onClick,
+    onLoaded,
+    onDataProcessed,
+    onSplitFeedback,
+    onMerchantIdError,
+    onConfirm
+  });
+  callbackRef.current = {
+    onClick,
+    onLoaded,
+    onDataProcessed,
+    onSplitFeedback,
+    onMerchantIdError,
+    onConfirm
+  };
   (0, import_react.useImperativeHandle)(ref, () => elementRef.current, []);
   (0, import_react.useEffect)(() => {
     if (typeof customElements !== "undefined" && customElements.get("gait-button")) {
@@ -119,95 +184,51 @@ var GaitButton = (0, import_react.forwardRef)(function GaitButton2({
     defineCustomElements().then(() => setIsReady(true)).catch(() => setIsReady(false));
   }, []);
   (0, import_react.useEffect)(() => {
-    const el = elementRef.current;
-    if (!el) return;
-    if (dataId !== void 0) el.setAttribute("data-id", dataId);
-    if (size !== void 0) el.setAttribute("size", size);
-    if (disabled) {
-      el.setAttribute("disabled", "");
-    } else {
-      el.removeAttribute("disabled");
-    }
-    if (style !== void 0) {
-      const styleStr = typeof style === "string" ? style : Object.entries(style).map(
-        ([k, v]) => `${k.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${v}`
-      ).join("; ");
-      el.setAttribute("style", styleStr);
-    }
-    if (items !== void 0) {
-      el.setAttribute(
-        "items",
-        typeof items === "string" ? items : JSON.stringify(items)
-      );
-    }
-    if (priceBreakdown !== void 0) {
-      el.setAttribute(
-        "price-breakdown",
-        typeof priceBreakdown === "string" ? priceBreakdown : JSON.stringify(priceBreakdown)
-      );
-    }
-    if (totalCost !== void 0) {
-      el.setAttribute("total-cost", String(totalCost));
-    }
-    if (customer !== void 0) {
-      el.setAttribute(
-        "customer",
-        typeof customer === "string" ? customer : JSON.stringify(customer)
-      );
-    }
-    if (webhook !== void 0) {
-      el.setAttribute(
-        "webhook",
-        typeof webhook === "string" ? webhook : JSON.stringify(webhook)
-      );
-    }
-    if (merchantStoreUrl !== void 0) {
-      el.setAttribute("merchant-store-url", merchantStoreUrl);
-    }
-  }, [
-    dataId,
-    disabled,
-    size,
-    style,
-    items,
-    priceBreakdown,
-    totalCost,
-    customer,
-    webhook,
-    merchantStoreUrl
-  ]);
-  (0, import_react.useEffect)(() => {
-    const el = elementRef.current;
-    if (!el) return;
+    if (!isReady || !containerRef.current || typeof document === "undefined")
+      return;
+    const container = containerRef.current;
+    const el = document.createElement("gait-button");
+    setAttributes(el, {
+      "data-id": dataId,
+      disabled,
+      size,
+      style,
+      items,
+      priceBreakdown,
+      totalCost,
+      customer,
+      webhook,
+      merchantStoreUrl
+    });
+    if (className) el.className = className;
+    if (id) el.id = id;
+    Object.entries(rest).forEach(([k, v]) => {
+      if (v != null && typeof v !== "function") el.setAttribute(k, String(v));
+    });
+    const cbs = callbackRef.current;
     const handleClick = (e) => {
-      if (onClick && e instanceof CustomEvent && e.detail) {
-        onClick(e.detail);
-      }
+      if (cbs.onClick && e instanceof CustomEvent && e.detail)
+        cbs.onClick(e.detail);
     };
     const handleLoaded = (e) => {
-      if (onLoaded && e instanceof CustomEvent && e.detail) {
-        onLoaded(e.detail);
-      }
+      if (cbs.onLoaded && e instanceof CustomEvent && e.detail)
+        cbs.onLoaded(e.detail);
     };
     const handleDataProcessed = (e) => {
-      if (onDataProcessed && e instanceof CustomEvent && e.detail) {
-        onDataProcessed(e.detail);
-      }
+      if (cbs.onDataProcessed && e instanceof CustomEvent && e.detail)
+        cbs.onDataProcessed(e.detail);
     };
     const handleSplitFeedback = (e) => {
-      if (onSplitFeedback && e instanceof CustomEvent && e.detail) {
-        onSplitFeedback(e.detail);
-      }
+      if (cbs.onSplitFeedback && e instanceof CustomEvent && e.detail)
+        cbs.onSplitFeedback(e.detail);
     };
     const handleMerchantIdError = (e) => {
-      if (onMerchantIdError && e instanceof CustomEvent && e.detail) {
-        onMerchantIdError(e.detail);
-      }
+      if (cbs.onMerchantIdError && e instanceof CustomEvent && e.detail)
+        cbs.onMerchantIdError(e.detail);
     };
     const handleConfirm = (e) => {
-      if (onConfirm && e instanceof CustomEvent && e.detail) {
-        onConfirm(e.detail);
-      }
+      if (cbs.onConfirm && e instanceof CustomEvent && e.detail)
+        cbs.onConfirm(e.detail);
     };
     el.addEventListener("gait-click", handleClick);
     el.addEventListener("gait-loaded", handleLoaded);
@@ -215,6 +236,8 @@ var GaitButton = (0, import_react.forwardRef)(function GaitButton2({
     el.addEventListener("gait-split-feedback", handleSplitFeedback);
     el.addEventListener("gait-merchant-id-error", handleMerchantIdError);
     el.addEventListener("gait-confirm", handleConfirm);
+    elementRef.current = el;
+    container.appendChild(el);
     return () => {
       el.removeEventListener("gait-click", handleClick);
       el.removeEventListener("gait-loaded", handleLoaded);
@@ -222,49 +245,45 @@ var GaitButton = (0, import_react.forwardRef)(function GaitButton2({
       el.removeEventListener("gait-split-feedback", handleSplitFeedback);
       el.removeEventListener("gait-merchant-id-error", handleMerchantIdError);
       el.removeEventListener("gait-confirm", handleConfirm);
+      container.removeChild(el);
+      elementRef.current = null;
     };
+  }, [isReady]);
+  (0, import_react.useEffect)(() => {
+    const el = elementRef.current;
+    if (!el) return;
+    setAttributes(el, {
+      "data-id": dataId,
+      disabled,
+      size,
+      style,
+      items,
+      priceBreakdown,
+      totalCost,
+      customer,
+      webhook,
+      merchantStoreUrl
+    });
+    if (className) el.className = className;
+    else el.removeAttribute("class");
+    if (id) el.id = id;
+    else el.removeAttribute("id");
   }, [
-    onClick,
-    onLoaded,
-    onDataProcessed,
-    onSplitFeedback,
-    onMerchantIdError,
-    onConfirm
+    dataId,
+    disabled,
+    size,
+    style,
+    items,
+    priceBreakdown,
+    totalCost,
+    customer,
+    webhook,
+    merchantStoreUrl,
+    className,
+    id
   ]);
-  if (!isReady) {
-    return null;
-  }
-  const elementProps = {
-    ref: elementRef
-  };
-  if (className) elementProps.className = className;
-  if (id) elementProps.id = id;
-  if (dataId !== void 0) elementProps["data-id"] = dataId;
-  if (size !== void 0) elementProps.size = size;
-  if (disabled) elementProps.disabled = "";
-  if (style !== void 0) {
-    elementProps.style = typeof style === "string" ? style : Object.entries(style).map(
-      ([k, v]) => `${k.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${v}`
-    ).join("; ");
-  }
-  if (items !== void 0) {
-    elementProps.items = typeof items === "string" ? items : JSON.stringify(items);
-  }
-  if (priceBreakdown !== void 0) {
-    elementProps["price-breakdown"] = typeof priceBreakdown === "string" ? priceBreakdown : JSON.stringify(priceBreakdown);
-  }
-  if (totalCost !== void 0) elementProps["total-cost"] = String(totalCost);
-  if (customer !== void 0) {
-    elementProps.customer = typeof customer === "string" ? customer : JSON.stringify(customer);
-  }
-  if (webhook !== void 0) {
-    elementProps.webhook = typeof webhook === "string" ? webhook : JSON.stringify(webhook);
-  }
-  if (merchantStoreUrl !== void 0) {
-    elementProps["merchant-store-url"] = merchantStoreUrl;
-  }
-  Object.assign(elementProps, rest);
-  return import_react.default.createElement("gait-button", elementProps);
+  if (!isReady) return null;
+  return import_react.default.createElement("div", { ref: containerRef });
 });
 GaitButton.displayName = "GaitButton";
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/components/GaitButton.tsx","../src/register.ts"],"sourcesContent":["'use client';\n\n/**\n * @gait-financial/react - React wrappers for Gait Web Components\n *\n * Usage:\n *   1. Register the Web Component (run once, e.g. in _app.tsx or layout):\n *      import '@gait-financial/react/register';\n *\n *   2. Use the React components:\n *      import { GaitButton } from '@gait-financial/react';\n */\n\nexport { GaitButton } from './components/GaitButton';\nexport type { GaitButtonProps } from './components/GaitButton';\n\nexport type {\n  ButtonSize,\n  GaitButtonItem,\n  GaitPriceBreakdownItem,\n  GaitCustomer,\n  GaitWebhook,\n  GaitClickDetail,\n  GaitLoadedDetail,\n  GaitDataProcessedDetail,\n  GaitSplitFeedbackDetail,\n  GaitMerchantIdErrorDetail,\n  GaitConfirmDetail,\n} from './types';\n","'use client';\n\n/**\n * React wrapper for GaitButton Web Component\n * Maps React props to element attributes (WC uses attributes as source of truth).\n * Uses ref + useEffect for binding - no direct JSX attribute spread to avoid React's\n * string coercion of booleans/objects.\n * Waits for WC registration before rendering to avoid invisible element (race condition).\n */\n\nimport React, {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\nimport { defineCustomElements } from '../register';\nimport type {\n  GaitButtonItem,\n  GaitPriceBreakdownItem,\n  GaitCustomer,\n  GaitWebhook,\n  GaitClickDetail,\n  GaitLoadedDetail,\n  GaitDataProcessedDetail,\n  GaitSplitFeedbackDetail,\n  GaitMerchantIdErrorDetail,\n  GaitConfirmDetail,\n} from '../types';\n\nexport interface GaitButtonProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'onClick' | 'style'> {\n  /** Checkout/data identity (required for payment flow) */\n  'data-id'?: string;\n  /** Disable the button */\n  disabled?: boolean;\n  /** Button size */\n  size?: 'small' | 'medium' | 'large';\n  /** Inline styles - string (for WC) or React.CSSProperties */\n  style?: React.CSSProperties | string;\n  /** Cart/order items for split payment modal */\n  items?: GaitButtonItem[] | string;\n  /** Price breakdown items */\n  priceBreakdown?: GaitPriceBreakdownItem[] | string;\n  /** Total cost */\n  totalCost?: number | string;\n  /** Customer info for split payment */\n  customer?: GaitCustomer | string;\n  /** Webhook config for split payment callbacks */\n  webhook?: GaitWebhook | string;\n  /** Merchant store URL (defaults to window.location.origin) */\n  merchantStoreUrl?: string;\n\n  /** Button clicked */\n  onClick?: (detail: GaitClickDetail) => void;\n  /** Component loaded/rendered */\n  onLoaded?: (detail: GaitLoadedDetail) => void;\n  /** Data processed (e.g. checkoutId resolved) */\n  onDataProcessed?: (detail: GaitDataProcessedDetail) => void;\n  /** Split payment API feedback (success/failure) */\n  onSplitFeedback?: (detail: GaitSplitFeedbackDetail) => void;\n  /** Merchant ID lookup failed */\n  onMerchantIdError?: (detail: GaitMerchantIdErrorDetail) => void;\n  /** Pay remaining confirmed */\n  onConfirm?: (detail: GaitConfirmDetail) => void;\n}\n\nconst GaitButton = forwardRef<HTMLElement, GaitButtonProps>(function GaitButton(\n  {\n    'data-id': dataId,\n    disabled,\n    size,\n    style,\n    items,\n    priceBreakdown,\n    totalCost,\n    customer,\n    webhook,\n    merchantStoreUrl,\n    onClick,\n    onLoaded,\n    onDataProcessed,\n    onSplitFeedback,\n    onMerchantIdError,\n    onConfirm,\n    className,\n    id,\n    ...rest\n  },\n  ref\n) {\n  const elementRef = useRef<HTMLElement>(null);\n  const [isReady, setIsReady] = useState(false);\n\n  useImperativeHandle(ref, () => elementRef.current as HTMLElement, []);\n\n  // Wait for WC to be registered before rendering (avoids invisible element)\n  useEffect(() => {\n    if (typeof customElements !== 'undefined' && customElements.get('gait-button')) {\n      setIsReady(true);\n      return;\n    }\n    defineCustomElements().then(() => setIsReady(true)).catch(() => setIsReady(false));\n  }, []);\n\n  // Sync props to element attributes via ref (WC reads attributes) - must run every render (hooks order)\n  useEffect(() => {\n    const el = elementRef.current;\n    if (!el) return;\n\n    if (dataId !== undefined) el.setAttribute('data-id', dataId);\n    if (size !== undefined) el.setAttribute('size', size);\n\n    if (disabled) {\n      el.setAttribute('disabled', '');\n    } else {\n      el.removeAttribute('disabled');\n    }\n\n    if (style !== undefined) {\n      const styleStr =\n        typeof style === 'string'\n          ? style\n          : Object.entries(style)\n              .map(\n                ([k, v]) =>\n                  `${k.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${v}`\n              )\n              .join('; ');\n      el.setAttribute('style', styleStr);\n    }\n\n    if (items !== undefined) {\n      el.setAttribute(\n        'items',\n        typeof items === 'string' ? items : JSON.stringify(items)\n      );\n    }\n\n    if (priceBreakdown !== undefined) {\n      el.setAttribute(\n        'price-breakdown',\n        typeof priceBreakdown === 'string'\n          ? priceBreakdown\n          : JSON.stringify(priceBreakdown)\n      );\n    }\n\n    if (totalCost !== undefined) {\n      el.setAttribute('total-cost', String(totalCost));\n    }\n\n    if (customer !== undefined) {\n      el.setAttribute(\n        'customer',\n        typeof customer === 'string' ? customer : JSON.stringify(customer)\n      );\n    }\n\n    if (webhook !== undefined) {\n      el.setAttribute(\n        'webhook',\n        typeof webhook === 'string' ? webhook : JSON.stringify(webhook)\n      );\n    }\n\n    if (merchantStoreUrl !== undefined) {\n      el.setAttribute('merchant-store-url', merchantStoreUrl);\n    }\n  }, [\n    dataId,\n    disabled,\n    size,\n    style,\n    items,\n    priceBreakdown,\n    totalCost,\n    customer,\n    webhook,\n    merchantStoreUrl,\n  ]);\n\n  // Event listeners\n  useEffect(() => {\n    const el = elementRef.current;\n    if (!el) return;\n\n    const handleClick = (e: Event) => {\n      if (onClick && e instanceof CustomEvent && e.detail) {\n        onClick(e.detail as GaitClickDetail);\n      }\n    };\n    const handleLoaded = (e: Event) => {\n      if (onLoaded && e instanceof CustomEvent && e.detail) {\n        onLoaded(e.detail as GaitLoadedDetail);\n      }\n    };\n    const handleDataProcessed = (e: Event) => {\n      if (onDataProcessed && e instanceof CustomEvent && e.detail) {\n        onDataProcessed(e.detail as GaitDataProcessedDetail);\n      }\n    };\n    const handleSplitFeedback = (e: Event) => {\n      if (onSplitFeedback && e instanceof CustomEvent && e.detail) {\n        onSplitFeedback(e.detail as GaitSplitFeedbackDetail);\n      }\n    };\n    const handleMerchantIdError = (e: Event) => {\n      if (onMerchantIdError && e instanceof CustomEvent && e.detail) {\n        onMerchantIdError(e.detail as GaitMerchantIdErrorDetail);\n      }\n    };\n    const handleConfirm = (e: Event) => {\n      if (onConfirm && e instanceof CustomEvent && e.detail) {\n        onConfirm(e.detail as GaitConfirmDetail);\n      }\n    };\n\n    el.addEventListener('gait-click', handleClick as EventListener);\n    el.addEventListener('gait-loaded', handleLoaded as EventListener);\n    el.addEventListener('gait-data-processed', handleDataProcessed as EventListener);\n    el.addEventListener('gait-split-feedback', handleSplitFeedback as EventListener);\n    el.addEventListener('gait-merchant-id-error', handleMerchantIdError as EventListener);\n    el.addEventListener('gait-confirm', handleConfirm as EventListener);\n\n    return () => {\n      el.removeEventListener('gait-click', handleClick as EventListener);\n      el.removeEventListener('gait-loaded', handleLoaded as EventListener);\n      el.removeEventListener('gait-data-processed', handleDataProcessed as EventListener);\n      el.removeEventListener('gait-split-feedback', handleSplitFeedback as EventListener);\n      el.removeEventListener('gait-merchant-id-error', handleMerchantIdError as EventListener);\n      el.removeEventListener('gait-confirm', handleConfirm as EventListener);\n    };\n  }, [\n    onClick,\n    onLoaded,\n    onDataProcessed,\n    onSplitFeedback,\n    onMerchantIdError,\n    onConfirm,\n  ]);\n\n  // Conditional render AFTER all hooks - required by Rules of Hooks\n  if (!isReady) {\n    return null;\n  }\n\n  // Pass attributes on initial render so WC sees them in connectedCallback (useEffect runs after mount)\n  const elementProps: Record<string, unknown> = {\n    ref: elementRef,\n  };\n  if (className) elementProps.className = className;\n  if (id) elementProps.id = id;\n  if (dataId !== undefined) elementProps['data-id'] = dataId;\n  if (size !== undefined) elementProps.size = size;\n  if (disabled) elementProps.disabled = '';\n  if (style !== undefined) {\n    elementProps.style =\n      typeof style === 'string'\n        ? style\n        : Object.entries(style)\n            .map(\n              ([k, v]) =>\n                `${k.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${v}`\n            )\n            .join('; ');\n  }\n  if (items !== undefined) {\n    elementProps.items =\n      typeof items === 'string' ? items : JSON.stringify(items);\n  }\n  if (priceBreakdown !== undefined) {\n    elementProps['price-breakdown'] =\n      typeof priceBreakdown === 'string'\n        ? priceBreakdown\n        : JSON.stringify(priceBreakdown);\n  }\n  if (totalCost !== undefined) elementProps['total-cost'] = String(totalCost);\n  if (customer !== undefined) {\n    elementProps.customer =\n      typeof customer === 'string' ? customer : JSON.stringify(customer);\n  }\n  if (webhook !== undefined) {\n    elementProps.webhook =\n      typeof webhook === 'string' ? webhook : JSON.stringify(webhook);\n  }\n  if (merchantStoreUrl !== undefined) {\n    elementProps['merchant-store-url'] = merchantStoreUrl;\n  }\n  Object.assign(elementProps, rest);\n\n  return React.createElement('gait-button', elementProps);\n});\n\nGaitButton.displayName = 'GaitButton';\n\nexport { GaitButton };\n","/**\n * Registers Gait Web Components in the browser.\n * Safe to call in SSR environments - no-op when window/customElements unavailable.\n *\n * Usage:\n *   import '@gait-financial/react/register';  // Side-effect: registers when in browser\n *   // or\n *   import { defineCustomElements } from '@gait-financial/react/register';\n *   await defineCustomElements();  // Optional: load from custom URL\n */\n\nlet loadPromise: Promise<void> | null = null;\n\n/**\n * Loads and registers Gait Web Components.\n * In browser: loads the WC script if not already registered.\n * In SSR: no-op.\n * Deduplicated: multiple calls return the same promise.\n *\n * @param scriptUrl - Optional URL to the button.js script. If omitted, uses the bundled script.\n */\nexport async function defineCustomElements(\n  scriptUrl?: string\n): Promise<void> {\n  if (typeof window === 'undefined' || typeof customElements === 'undefined') {\n    return;\n  }\n  if (customElements.get('gait-button')) {\n    return;\n  }\n  if (loadPromise) {\n    return loadPromise;\n  }\n\n  const tryLoad = (url: string): Promise<void> =>\n    new Promise((resolve, reject) => {\n      const script = document.createElement('script');\n      script.async = true;\n      script.src = url;\n      script.onload = () => resolve();\n      script.onerror = () => reject();\n      document.head.appendChild(script);\n    });\n\n  loadPromise = (async () => {\n    const fallbackUrl = `${typeof window !== 'undefined' ? window.location.origin : ''}/node_modules/@gait-financial/react/dist/wc/button.js`;\n\n    if (scriptUrl) {\n      await tryLoad(scriptUrl);\n      return;\n    }\n\n    // Try relative to module first (works when not pre-bundled)\n    try {\n      const url = new URL('./wc/button.js', import.meta.url).href;\n      await tryLoad(url);\n      return;\n    } catch {\n      // ignore\n    }\n\n    // Fallback: direct path (works when Vite pre-bundles and breaks import.meta.url)\n    try {\n      await tryLoad(fallbackUrl);\n      return;\n    } catch {\n      throw new Error(\n        '[@gait-financial/react] Failed to load web component script. If using Vite, add optimizeDeps: { exclude: [\"@gait-financial/react\"] } to vite.config.'\n      );\n    }\n  })();\n  return loadPromise;\n}\n\n// Side-effect: auto-register when imported in browser (SSR-safe)\nif (typeof window !== 'undefined' && typeof customElements !== 'undefined') {\n  void defineCustomElements();\n}\n"],"mappings":"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","names":["GaitButton","React"]}
+{"version":3,"sources":["../src/index.ts","../src/components/GaitButton.tsx","../src/register.ts"],"sourcesContent":["'use client';\n\n/**\n * @gait-financial/react - React wrappers for Gait Web Components\n *\n * Usage:\n *   1. Register the Web Component (run once, e.g. in _app.tsx or layout):\n *      import '@gait-financial/react/register';\n *\n *   2. Use the React components:\n *      import { GaitButton } from '@gait-financial/react';\n */\n\nexport { GaitButton } from './components/GaitButton';\nexport type { GaitButtonProps } from './components/GaitButton';\n\nexport type {\n  ButtonSize,\n  GaitButtonItem,\n  GaitPriceBreakdownItem,\n  GaitCustomer,\n  GaitWebhook,\n  GaitClickDetail,\n  GaitLoadedDetail,\n  GaitDataProcessedDetail,\n  GaitSplitFeedbackDetail,\n  GaitMerchantIdErrorDetail,\n  GaitConfirmDetail,\n} from './types';\n","'use client';\n\n/**\n * React wrapper for GaitButton Web Component\n * Creates the element imperatively with attributes set BEFORE appending,\n * so connectedCallback sees data-id and other attrs immediately.\n * Avoids React's prop handling which causes \"readonly property\" errors.\n */\n\nimport React, {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\nimport { defineCustomElements } from '../register';\nimport type {\n  GaitButtonItem,\n  GaitPriceBreakdownItem,\n  GaitCustomer,\n  GaitWebhook,\n  GaitClickDetail,\n  GaitLoadedDetail,\n  GaitDataProcessedDetail,\n  GaitSplitFeedbackDetail,\n  GaitMerchantIdErrorDetail,\n  GaitConfirmDetail,\n} from '../types';\n\nexport interface GaitButtonProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'onClick' | 'style'> {\n  /** Checkout/data identity (required for payment flow) */\n  'data-id'?: string;\n  /** Disable the button */\n  disabled?: boolean;\n  /** Button size */\n  size?: 'small' | 'medium' | 'large';\n  /** Inline styles - string (for WC) or React.CSSProperties */\n  style?: React.CSSProperties | string;\n  /** Cart/order items for split payment modal */\n  items?: GaitButtonItem[] | string;\n  /** Price breakdown items */\n  priceBreakdown?: GaitPriceBreakdownItem[] | string;\n  /** Total cost */\n  totalCost?: number | string;\n  /** Customer info for split payment */\n  customer?: GaitCustomer | string;\n  /** Webhook config for split payment callbacks */\n  webhook?: GaitWebhook | string;\n  /** Merchant store URL (defaults to window.location.origin) */\n  merchantStoreUrl?: string;\n\n  /** Button clicked */\n  onClick?: (detail: GaitClickDetail) => void;\n  /** Component loaded/rendered */\n  onLoaded?: (detail: GaitLoadedDetail) => void;\n  /** Data processed (e.g. checkoutId resolved) */\n  onDataProcessed?: (detail: GaitDataProcessedDetail) => void;\n  /** Split payment API feedback (success/failure) */\n  onSplitFeedback?: (detail: GaitSplitFeedbackDetail) => void;\n  /** Merchant ID lookup failed */\n  onMerchantIdError?: (detail: GaitMerchantIdErrorDetail) => void;\n  /** Pay remaining confirmed */\n  onConfirm?: (detail: GaitConfirmDetail) => void;\n}\n\nfunction setAttributes(\n  el: HTMLElement,\n  props: Pick<\n    GaitButtonProps,\n    | 'data-id'\n    | 'disabled'\n    | 'size'\n    | 'style'\n    | 'items'\n    | 'priceBreakdown'\n    | 'totalCost'\n    | 'customer'\n    | 'webhook'\n    | 'merchantStoreUrl'\n  >\n) {\n  const {\n    'data-id': dataId,\n    disabled,\n    size,\n    style,\n    items,\n    priceBreakdown,\n    totalCost,\n    customer,\n    webhook,\n    merchantStoreUrl,\n  } = props;\n\n  if (dataId !== undefined) el.setAttribute('data-id', dataId);\n  if (size !== undefined) el.setAttribute('size', size);\n  if (disabled) el.setAttribute('disabled', '');\n  else el.removeAttribute('disabled');\n  if (style !== undefined) {\n    const styleStr =\n      typeof style === 'string'\n        ? style\n        : Object.entries(style)\n            .map(\n              ([k, v]) =>\n                `${k.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${v}`\n            )\n            .join('; ');\n    el.setAttribute('style', styleStr);\n  }\n  if (items !== undefined)\n    el.setAttribute(\n      'items',\n      typeof items === 'string' ? items : JSON.stringify(items)\n    );\n  if (priceBreakdown !== undefined)\n    el.setAttribute(\n      'price-breakdown',\n      typeof priceBreakdown === 'string'\n        ? priceBreakdown\n        : JSON.stringify(priceBreakdown)\n    );\n  if (totalCost !== undefined)\n    el.setAttribute('total-cost', String(totalCost));\n  if (customer !== undefined)\n    el.setAttribute(\n      'customer',\n      typeof customer === 'string' ? customer : JSON.stringify(customer)\n    );\n  if (webhook !== undefined)\n    el.setAttribute(\n      'webhook',\n      typeof webhook === 'string' ? webhook : JSON.stringify(webhook)\n    );\n  if (merchantStoreUrl !== undefined)\n    el.setAttribute('merchant-store-url', merchantStoreUrl);\n}\n\nconst GaitButton = forwardRef<HTMLElement, GaitButtonProps>(function GaitButton(\n  {\n    'data-id': dataId,\n    disabled,\n    size,\n    style,\n    items,\n    priceBreakdown,\n    totalCost,\n    customer,\n    webhook,\n    merchantStoreUrl,\n    onClick,\n    onLoaded,\n    onDataProcessed,\n    onSplitFeedback,\n    onMerchantIdError,\n    onConfirm,\n    className,\n    id,\n    ...rest\n  },\n  ref\n) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const elementRef = useRef<HTMLElement | null>(null);\n  const [isReady, setIsReady] = useState(false);\n\n  const callbackRef = useRef({\n    onClick,\n    onLoaded,\n    onDataProcessed,\n    onSplitFeedback,\n    onMerchantIdError,\n    onConfirm,\n  });\n  callbackRef.current = {\n    onClick,\n    onLoaded,\n    onDataProcessed,\n    onSplitFeedback,\n    onMerchantIdError,\n    onConfirm,\n  };\n\n  useImperativeHandle(ref, () => elementRef.current as HTMLElement, []);\n\n  // Wait for WC registration\n  useEffect(() => {\n    if (\n      typeof customElements !== 'undefined' &&\n      customElements.get('gait-button')\n    ) {\n      setIsReady(true);\n      return;\n    }\n    defineCustomElements()\n      .then(() => setIsReady(true))\n      .catch(() => setIsReady(false));\n  }, []);\n\n  // Create gait-button imperatively with attrs BEFORE append (so connectedCallback sees data-id)\n  useEffect(() => {\n    if (!isReady || !containerRef.current || typeof document === 'undefined')\n      return;\n\n    const container = containerRef.current;\n    const el = document.createElement('gait-button') as HTMLElement;\n\n    // Set attributes BEFORE appending - connectedCallback fires on append and will see them\n    setAttributes(el, {\n      'data-id': dataId,\n      disabled,\n      size,\n      style,\n      items,\n      priceBreakdown,\n      totalCost,\n      customer,\n      webhook,\n      merchantStoreUrl,\n    });\n\n    if (className) el.className = className;\n    if (id) el.id = id;\n    Object.entries(rest).forEach(([k, v]) => {\n      if (v != null && typeof v !== 'function') el.setAttribute(k, String(v));\n    });\n\n    const cbs = callbackRef.current;\n    const handleClick = (e: Event) => {\n      if (cbs.onClick && e instanceof CustomEvent && e.detail)\n        cbs.onClick(e.detail as GaitClickDetail);\n    };\n    const handleLoaded = (e: Event) => {\n      if (cbs.onLoaded && e instanceof CustomEvent && e.detail)\n        cbs.onLoaded(e.detail as GaitLoadedDetail);\n    };\n    const handleDataProcessed = (e: Event) => {\n      if (cbs.onDataProcessed && e instanceof CustomEvent && e.detail)\n        cbs.onDataProcessed(e.detail as GaitDataProcessedDetail);\n    };\n    const handleSplitFeedback = (e: Event) => {\n      if (cbs.onSplitFeedback && e instanceof CustomEvent && e.detail)\n        cbs.onSplitFeedback(e.detail as GaitSplitFeedbackDetail);\n    };\n    const handleMerchantIdError = (e: Event) => {\n      if (cbs.onMerchantIdError && e instanceof CustomEvent && e.detail)\n        cbs.onMerchantIdError(e.detail as GaitMerchantIdErrorDetail);\n    };\n    const handleConfirm = (e: Event) => {\n      if (cbs.onConfirm && e instanceof CustomEvent && e.detail)\n        cbs.onConfirm(e.detail as GaitConfirmDetail);\n    };\n\n    el.addEventListener('gait-click', handleClick as EventListener);\n    el.addEventListener('gait-loaded', handleLoaded as EventListener);\n    el.addEventListener('gait-data-processed', handleDataProcessed as EventListener);\n    el.addEventListener('gait-split-feedback', handleSplitFeedback as EventListener);\n    el.addEventListener('gait-merchant-id-error', handleMerchantIdError as EventListener);\n    el.addEventListener('gait-confirm', handleConfirm as EventListener);\n\n    elementRef.current = el;\n    container.appendChild(el);\n\n    return () => {\n      el.removeEventListener('gait-click', handleClick as EventListener);\n      el.removeEventListener('gait-loaded', handleLoaded as EventListener);\n      el.removeEventListener('gait-data-processed', handleDataProcessed as EventListener);\n      el.removeEventListener('gait-split-feedback', handleSplitFeedback as EventListener);\n      el.removeEventListener('gait-merchant-id-error', handleMerchantIdError as EventListener);\n      el.removeEventListener('gait-confirm', handleConfirm as EventListener);\n      container.removeChild(el);\n      elementRef.current = null;\n    };\n  }, [isReady]); // Only run when isReady changes - create once\n\n  // Update attributes when props change\n  useEffect(() => {\n    const el = elementRef.current;\n    if (!el) return;\n\n    setAttributes(el, {\n      'data-id': dataId,\n      disabled,\n      size,\n      style,\n      items,\n      priceBreakdown,\n      totalCost,\n      customer,\n      webhook,\n      merchantStoreUrl,\n    });\n\n    if (className) el.className = className;\n    else el.removeAttribute('class');\n    if (id) el.id = id;\n    else el.removeAttribute('id');\n  }, [\n    dataId,\n    disabled,\n    size,\n    style,\n    items,\n    priceBreakdown,\n    totalCost,\n    customer,\n    webhook,\n    merchantStoreUrl,\n    className,\n    id,\n  ]);\n\n  if (!isReady) return null;\n\n  return React.createElement('div', { ref: containerRef });\n});\n\nGaitButton.displayName = 'GaitButton';\n\nexport { GaitButton };\n","/**\n * Registers Gait Web Components in the browser.\n * Safe to call in SSR environments - no-op when window/customElements unavailable.\n *\n * Usage:\n *   import '@gait-financial/react/register';  // Side-effect: registers when in browser\n *   // or\n *   import { defineCustomElements } from '@gait-financial/react/register';\n *   await defineCustomElements();  // Optional: load from custom URL\n */\n\nlet loadPromise: Promise<void> | null = null;\n\n/**\n * Loads and registers Gait Web Components.\n * In browser: loads the WC script if not already registered.\n * In SSR: no-op.\n * Deduplicated: multiple calls return the same promise.\n *\n * @param scriptUrl - Optional URL to the button.js script. If omitted, uses the bundled script.\n */\nexport async function defineCustomElements(\n  scriptUrl?: string\n): Promise<void> {\n  if (typeof window === 'undefined' || typeof customElements === 'undefined') {\n    return;\n  }\n  if (customElements.get('gait-button')) {\n    return;\n  }\n  if (loadPromise) {\n    return loadPromise;\n  }\n\n  const tryLoad = (url: string): Promise<void> =>\n    new Promise((resolve, reject) => {\n      const script = document.createElement('script');\n      script.async = true;\n      script.src = url;\n      script.onload = () => resolve();\n      script.onerror = () => reject();\n      document.head.appendChild(script);\n    });\n\n  loadPromise = (async () => {\n    const fallbackUrl = `${typeof window !== 'undefined' ? window.location.origin : ''}/node_modules/@gait-financial/react/dist/wc/button.js`;\n\n    if (scriptUrl) {\n      await tryLoad(scriptUrl);\n      return;\n    }\n\n    // Try relative to module first (works when not pre-bundled)\n    try {\n      const url = new URL('./wc/button.js', import.meta.url).href;\n      await tryLoad(url);\n      return;\n    } catch {\n      // ignore\n    }\n\n    // Fallback: direct path (works when Vite pre-bundles and breaks import.meta.url)\n    try {\n      await tryLoad(fallbackUrl);\n      return;\n    } catch {\n      throw new Error(\n        '[@gait-financial/react] Failed to load web component script. If using Vite, add optimizeDeps: { exclude: [\"@gait-financial/react\"] } to vite.config.'\n      );\n    }\n  })();\n  return loadPromise;\n}\n\n// Side-effect: auto-register when imported in browser (SSR-safe)\nif (typeof window !== 'undefined' && typeof customElements !== 'undefined') {\n  void defineCustomElements();\n}\n"],"mappings":"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","names":["GaitButton","React"]}

package/dist/index.d.cts

@@ -70,10 +70,9 @@ interface GaitConfirmDetail {
 
 /**
  * React wrapper for GaitButton Web Component
- * Maps React props to element attributes (WC uses attributes as source of truth).
- * Uses ref + useEffect for binding - no direct JSX attribute spread to avoid React's
- * string coercion of booleans/objects.
- * Waits for WC registration before rendering to avoid invisible element (race condition).
+ * Creates the element imperatively with attributes set BEFORE appending,
+ * so connectedCallback sees data-id and other attrs immediately.
+ * Avoids React's prop handling which causes "readonly property" errors.
  */
 
 interface GaitButtonProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onClick' | 'style'> {

package/dist/index.d.ts

@@ -70,10 +70,9 @@ interface GaitConfirmDetail {
 
 /**
  * React wrapper for GaitButton Web Component
- * Maps React props to element attributes (WC uses attributes as source of truth).
- * Uses ref + useEffect for binding - no direct JSX attribute spread to avoid React's
- * string coercion of booleans/objects.
- * Waits for WC registration before rendering to avoid invisible element (race condition).
+ * Creates the element imperatively with attributes set BEFORE appending,
+ * so connectedCallback sees data-id and other attrs immediately.
+ * Avoids React's prop handling which causes "readonly property" errors.
  */
 
 interface GaitButtonProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onClick' | 'style'> {

package/dist/index.js

@@ -57,6 +57,54 @@ if (typeof window !== "undefined" && typeof customElements !== "undefined") {
 }
 
 // src/components/GaitButton.tsx
+function setAttributes(el, props) {
+  const {
+    "data-id": dataId,
+    disabled,
+    size,
+    style,
+    items,
+    priceBreakdown,
+    totalCost,
+    customer,
+    webhook,
+    merchantStoreUrl
+  } = props;
+  if (dataId !== void 0) el.setAttribute("data-id", dataId);
+  if (size !== void 0) el.setAttribute("size", size);
+  if (disabled) el.setAttribute("disabled", "");
+  else el.removeAttribute("disabled");
+  if (style !== void 0) {
+    const styleStr = typeof style === "string" ? style : Object.entries(style).map(
+      ([k, v]) => `${k.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${v}`
+    ).join("; ");
+    el.setAttribute("style", styleStr);
+  }
+  if (items !== void 0)
+    el.setAttribute(
+      "items",
+      typeof items === "string" ? items : JSON.stringify(items)
+    );
+  if (priceBreakdown !== void 0)
+    el.setAttribute(
+      "price-breakdown",
+      typeof priceBreakdown === "string" ? priceBreakdown : JSON.stringify(priceBreakdown)
+    );
+  if (totalCost !== void 0)
+    el.setAttribute("total-cost", String(totalCost));
+  if (customer !== void 0)
+    el.setAttribute(
+      "customer",
+      typeof customer === "string" ? customer : JSON.stringify(customer)
+    );
+  if (webhook !== void 0)
+    el.setAttribute(
+      "webhook",
+      typeof webhook === "string" ? webhook : JSON.stringify(webhook)
+    );
+  if (merchantStoreUrl !== void 0)
+    el.setAttribute("merchant-store-url", merchantStoreUrl);
+}
 var GaitButton = forwardRef(function GaitButton2({
   "data-id": dataId,
   disabled,
@@ -78,8 +126,25 @@ var GaitButton = forwardRef(function GaitButton2({
   id,
   ...rest
 }, ref) {
+  const containerRef = useRef(null);
   const elementRef = useRef(null);
   const [isReady, setIsReady] = useState(false);
+  const callbackRef = useRef({
+    onClick,
+    onLoaded,
+    onDataProcessed,
+    onSplitFeedback,
+    onMerchantIdError,
+    onConfirm
+  });
+  callbackRef.current = {
+    onClick,
+    onLoaded,
+    onDataProcessed,
+    onSplitFeedback,
+    onMerchantIdError,
+    onConfirm
+  };
   useImperativeHandle(ref, () => elementRef.current, []);
   useEffect(() => {
     if (typeof customElements !== "undefined" && customElements.get("gait-button")) {
@@ -89,95 +154,51 @@ var GaitButton = forwardRef(function GaitButton2({
     defineCustomElements().then(() => setIsReady(true)).catch(() => setIsReady(false));
   }, []);
   useEffect(() => {
-    const el = elementRef.current;
-    if (!el) return;
-    if (dataId !== void 0) el.setAttribute("data-id", dataId);
-    if (size !== void 0) el.setAttribute("size", size);
-    if (disabled) {
-      el.setAttribute("disabled", "");
-    } else {
-      el.removeAttribute("disabled");
-    }
-    if (style !== void 0) {
-      const styleStr = typeof style === "string" ? style : Object.entries(style).map(
-        ([k, v]) => `${k.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${v}`
-      ).join("; ");
-      el.setAttribute("style", styleStr);
-    }
-    if (items !== void 0) {
-      el.setAttribute(
-        "items",
-        typeof items === "string" ? items : JSON.stringify(items)
-      );
-    }
-    if (priceBreakdown !== void 0) {
-      el.setAttribute(
-        "price-breakdown",
-        typeof priceBreakdown === "string" ? priceBreakdown : JSON.stringify(priceBreakdown)
-      );
-    }
-    if (totalCost !== void 0) {
-      el.setAttribute("total-cost", String(totalCost));
-    }
-    if (customer !== void 0) {
-      el.setAttribute(
-        "customer",
-        typeof customer === "string" ? customer : JSON.stringify(customer)
-      );
-    }
-    if (webhook !== void 0) {
-      el.setAttribute(
-        "webhook",
-        typeof webhook === "string" ? webhook : JSON.stringify(webhook)
-      );
-    }
-    if (merchantStoreUrl !== void 0) {
-      el.setAttribute("merchant-store-url", merchantStoreUrl);
-    }
-  }, [
-    dataId,
-    disabled,
-    size,
-    style,
-    items,
-    priceBreakdown,
-    totalCost,
-    customer,
-    webhook,
-    merchantStoreUrl
-  ]);
-  useEffect(() => {
-    const el = elementRef.current;
-    if (!el) return;
+    if (!isReady || !containerRef.current || typeof document === "undefined")
+      return;
+    const container = containerRef.current;
+    const el = document.createElement("gait-button");
+    setAttributes(el, {
+      "data-id": dataId,
+      disabled,
+      size,
+      style,
+      items,
+      priceBreakdown,
+      totalCost,
+      customer,
+      webhook,
+      merchantStoreUrl
+    });
+    if (className) el.className = className;
+    if (id) el.id = id;
+    Object.entries(rest).forEach(([k, v]) => {
+      if (v != null && typeof v !== "function") el.setAttribute(k, String(v));
+    });
+    const cbs = callbackRef.current;
     const handleClick = (e) => {
-      if (onClick && e instanceof CustomEvent && e.detail) {
-        onClick(e.detail);
-      }
+      if (cbs.onClick && e instanceof CustomEvent && e.detail)
+        cbs.onClick(e.detail);
     };
     const handleLoaded = (e) => {
-      if (onLoaded && e instanceof CustomEvent && e.detail) {
-        onLoaded(e.detail);
-      }
+      if (cbs.onLoaded && e instanceof CustomEvent && e.detail)
+        cbs.onLoaded(e.detail);
     };
     const handleDataProcessed = (e) => {
-      if (onDataProcessed && e instanceof CustomEvent && e.detail) {
-        onDataProcessed(e.detail);
-      }
+      if (cbs.onDataProcessed && e instanceof CustomEvent && e.detail)
+        cbs.onDataProcessed(e.detail);
     };
     const handleSplitFeedback = (e) => {
-      if (onSplitFeedback && e instanceof CustomEvent && e.detail) {
-        onSplitFeedback(e.detail);
-      }
+      if (cbs.onSplitFeedback && e instanceof CustomEvent && e.detail)
+        cbs.onSplitFeedback(e.detail);
     };
     const handleMerchantIdError = (e) => {
-      if (onMerchantIdError && e instanceof CustomEvent && e.detail) {
-        onMerchantIdError(e.detail);
-      }
+      if (cbs.onMerchantIdError && e instanceof CustomEvent && e.detail)
+        cbs.onMerchantIdError(e.detail);
     };
     const handleConfirm = (e) => {
-      if (onConfirm && e instanceof CustomEvent && e.detail) {
-        onConfirm(e.detail);
-      }
+      if (cbs.onConfirm && e instanceof CustomEvent && e.detail)
+        cbs.onConfirm(e.detail);
     };
     el.addEventListener("gait-click", handleClick);
     el.addEventListener("gait-loaded", handleLoaded);
@@ -185,6 +206,8 @@ var GaitButton = forwardRef(function GaitButton2({
     el.addEventListener("gait-split-feedback", handleSplitFeedback);
     el.addEventListener("gait-merchant-id-error", handleMerchantIdError);
     el.addEventListener("gait-confirm", handleConfirm);
+    elementRef.current = el;
+    container.appendChild(el);
     return () => {
       el.removeEventListener("gait-click", handleClick);
       el.removeEventListener("gait-loaded", handleLoaded);
@@ -192,49 +215,45 @@ var GaitButton = forwardRef(function GaitButton2({
       el.removeEventListener("gait-split-feedback", handleSplitFeedback);
       el.removeEventListener("gait-merchant-id-error", handleMerchantIdError);
       el.removeEventListener("gait-confirm", handleConfirm);
+      container.removeChild(el);
+      elementRef.current = null;
     };
+  }, [isReady]);
+  useEffect(() => {
+    const el = elementRef.current;
+    if (!el) return;
+    setAttributes(el, {
+      "data-id": dataId,
+      disabled,
+      size,
+      style,
+      items,
+      priceBreakdown,
+      totalCost,
+      customer,
+      webhook,
+      merchantStoreUrl
+    });
+    if (className) el.className = className;
+    else el.removeAttribute("class");
+    if (id) el.id = id;
+    else el.removeAttribute("id");
   }, [
-    onClick,
-    onLoaded,
-    onDataProcessed,
-    onSplitFeedback,
-    onMerchantIdError,
-    onConfirm
+    dataId,
+    disabled,
+    size,
+    style,
+    items,
+    priceBreakdown,
+    totalCost,
+    customer,
+    webhook,
+    merchantStoreUrl,
+    className,
+    id
   ]);
-  if (!isReady) {
-    return null;
-  }
-  const elementProps = {
-    ref: elementRef
-  };
-  if (className) elementProps.className = className;
-  if (id) elementProps.id = id;
-  if (dataId !== void 0) elementProps["data-id"] = dataId;
-  if (size !== void 0) elementProps.size = size;
-  if (disabled) elementProps.disabled = "";
-  if (style !== void 0) {
-    elementProps.style = typeof style === "string" ? style : Object.entries(style).map(
-      ([k, v]) => `${k.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${v}`
-    ).join("; ");
-  }
-  if (items !== void 0) {
-    elementProps.items = typeof items === "string" ? items : JSON.stringify(items);
-  }
-  if (priceBreakdown !== void 0) {
-    elementProps["price-breakdown"] = typeof priceBreakdown === "string" ? priceBreakdown : JSON.stringify(priceBreakdown);
-  }
-  if (totalCost !== void 0) elementProps["total-cost"] = String(totalCost);
-  if (customer !== void 0) {
-    elementProps.customer = typeof customer === "string" ? customer : JSON.stringify(customer);
-  }
-  if (webhook !== void 0) {
-    elementProps.webhook = typeof webhook === "string" ? webhook : JSON.stringify(webhook);
-  }
-  if (merchantStoreUrl !== void 0) {
-    elementProps["merchant-store-url"] = merchantStoreUrl;
-  }
-  Object.assign(elementProps, rest);
-  return React.createElement("gait-button", elementProps);
+  if (!isReady) return null;
+  return React.createElement("div", { ref: containerRef });
 });
 GaitButton.displayName = "GaitButton";
 export {

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/GaitButton.tsx","../src/register.ts"],"sourcesContent":["'use client';\n\n/**\n * React wrapper for GaitButton Web Component\n * Maps React props to element attributes (WC uses attributes as source of truth).\n * Uses ref + useEffect for binding - no direct JSX attribute spread to avoid React's\n * string coercion of booleans/objects.\n * Waits for WC registration before rendering to avoid invisible element (race condition).\n */\n\nimport React, {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\nimport { defineCustomElements } from '../register';\nimport type {\n  GaitButtonItem,\n  GaitPriceBreakdownItem,\n  GaitCustomer,\n  GaitWebhook,\n  GaitClickDetail,\n  GaitLoadedDetail,\n  GaitDataProcessedDetail,\n  GaitSplitFeedbackDetail,\n  GaitMerchantIdErrorDetail,\n  GaitConfirmDetail,\n} from '../types';\n\nexport interface GaitButtonProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'onClick' | 'style'> {\n  /** Checkout/data identity (required for payment flow) */\n  'data-id'?: string;\n  /** Disable the button */\n  disabled?: boolean;\n  /** Button size */\n  size?: 'small' | 'medium' | 'large';\n  /** Inline styles - string (for WC) or React.CSSProperties */\n  style?: React.CSSProperties | string;\n  /** Cart/order items for split payment modal */\n  items?: GaitButtonItem[] | string;\n  /** Price breakdown items */\n  priceBreakdown?: GaitPriceBreakdownItem[] | string;\n  /** Total cost */\n  totalCost?: number | string;\n  /** Customer info for split payment */\n  customer?: GaitCustomer | string;\n  /** Webhook config for split payment callbacks */\n  webhook?: GaitWebhook | string;\n  /** Merchant store URL (defaults to window.location.origin) */\n  merchantStoreUrl?: string;\n\n  /** Button clicked */\n  onClick?: (detail: GaitClickDetail) => void;\n  /** Component loaded/rendered */\n  onLoaded?: (detail: GaitLoadedDetail) => void;\n  /** Data processed (e.g. checkoutId resolved) */\n  onDataProcessed?: (detail: GaitDataProcessedDetail) => void;\n  /** Split payment API feedback (success/failure) */\n  onSplitFeedback?: (detail: GaitSplitFeedbackDetail) => void;\n  /** Merchant ID lookup failed */\n  onMerchantIdError?: (detail: GaitMerchantIdErrorDetail) => void;\n  /** Pay remaining confirmed */\n  onConfirm?: (detail: GaitConfirmDetail) => void;\n}\n\nconst GaitButton = forwardRef<HTMLElement, GaitButtonProps>(function GaitButton(\n  {\n    'data-id': dataId,\n    disabled,\n    size,\n    style,\n    items,\n    priceBreakdown,\n    totalCost,\n    customer,\n    webhook,\n    merchantStoreUrl,\n    onClick,\n    onLoaded,\n    onDataProcessed,\n    onSplitFeedback,\n    onMerchantIdError,\n    onConfirm,\n    className,\n    id,\n    ...rest\n  },\n  ref\n) {\n  const elementRef = useRef<HTMLElement>(null);\n  const [isReady, setIsReady] = useState(false);\n\n  useImperativeHandle(ref, () => elementRef.current as HTMLElement, []);\n\n  // Wait for WC to be registered before rendering (avoids invisible element)\n  useEffect(() => {\n    if (typeof customElements !== 'undefined' && customElements.get('gait-button')) {\n      setIsReady(true);\n      return;\n    }\n    defineCustomElements().then(() => setIsReady(true)).catch(() => setIsReady(false));\n  }, []);\n\n  // Sync props to element attributes via ref (WC reads attributes) - must run every render (hooks order)\n  useEffect(() => {\n    const el = elementRef.current;\n    if (!el) return;\n\n    if (dataId !== undefined) el.setAttribute('data-id', dataId);\n    if (size !== undefined) el.setAttribute('size', size);\n\n    if (disabled) {\n      el.setAttribute('disabled', '');\n    } else {\n      el.removeAttribute('disabled');\n    }\n\n    if (style !== undefined) {\n      const styleStr =\n        typeof style === 'string'\n          ? style\n          : Object.entries(style)\n              .map(\n                ([k, v]) =>\n                  `${k.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${v}`\n              )\n              .join('; ');\n      el.setAttribute('style', styleStr);\n    }\n\n    if (items !== undefined) {\n      el.setAttribute(\n        'items',\n        typeof items === 'string' ? items : JSON.stringify(items)\n      );\n    }\n\n    if (priceBreakdown !== undefined) {\n      el.setAttribute(\n        'price-breakdown',\n        typeof priceBreakdown === 'string'\n          ? priceBreakdown\n          : JSON.stringify(priceBreakdown)\n      );\n    }\n\n    if (totalCost !== undefined) {\n      el.setAttribute('total-cost', String(totalCost));\n    }\n\n    if (customer !== undefined) {\n      el.setAttribute(\n        'customer',\n        typeof customer === 'string' ? customer : JSON.stringify(customer)\n      );\n    }\n\n    if (webhook !== undefined) {\n      el.setAttribute(\n        'webhook',\n        typeof webhook === 'string' ? webhook : JSON.stringify(webhook)\n      );\n    }\n\n    if (merchantStoreUrl !== undefined) {\n      el.setAttribute('merchant-store-url', merchantStoreUrl);\n    }\n  }, [\n    dataId,\n    disabled,\n    size,\n    style,\n    items,\n    priceBreakdown,\n    totalCost,\n    customer,\n    webhook,\n    merchantStoreUrl,\n  ]);\n\n  // Event listeners\n  useEffect(() => {\n    const el = elementRef.current;\n    if (!el) return;\n\n    const handleClick = (e: Event) => {\n      if (onClick && e instanceof CustomEvent && e.detail) {\n        onClick(e.detail as GaitClickDetail);\n      }\n    };\n    const handleLoaded = (e: Event) => {\n      if (onLoaded && e instanceof CustomEvent && e.detail) {\n        onLoaded(e.detail as GaitLoadedDetail);\n      }\n    };\n    const handleDataProcessed = (e: Event) => {\n      if (onDataProcessed && e instanceof CustomEvent && e.detail) {\n        onDataProcessed(e.detail as GaitDataProcessedDetail);\n      }\n    };\n    const handleSplitFeedback = (e: Event) => {\n      if (onSplitFeedback && e instanceof CustomEvent && e.detail) {\n        onSplitFeedback(e.detail as GaitSplitFeedbackDetail);\n      }\n    };\n    const handleMerchantIdError = (e: Event) => {\n      if (onMerchantIdError && e instanceof CustomEvent && e.detail) {\n        onMerchantIdError(e.detail as GaitMerchantIdErrorDetail);\n      }\n    };\n    const handleConfirm = (e: Event) => {\n      if (onConfirm && e instanceof CustomEvent && e.detail) {\n        onConfirm(e.detail as GaitConfirmDetail);\n      }\n    };\n\n    el.addEventListener('gait-click', handleClick as EventListener);\n    el.addEventListener('gait-loaded', handleLoaded as EventListener);\n    el.addEventListener('gait-data-processed', handleDataProcessed as EventListener);\n    el.addEventListener('gait-split-feedback', handleSplitFeedback as EventListener);\n    el.addEventListener('gait-merchant-id-error', handleMerchantIdError as EventListener);\n    el.addEventListener('gait-confirm', handleConfirm as EventListener);\n\n    return () => {\n      el.removeEventListener('gait-click', handleClick as EventListener);\n      el.removeEventListener('gait-loaded', handleLoaded as EventListener);\n      el.removeEventListener('gait-data-processed', handleDataProcessed as EventListener);\n      el.removeEventListener('gait-split-feedback', handleSplitFeedback as EventListener);\n      el.removeEventListener('gait-merchant-id-error', handleMerchantIdError as EventListener);\n      el.removeEventListener('gait-confirm', handleConfirm as EventListener);\n    };\n  }, [\n    onClick,\n    onLoaded,\n    onDataProcessed,\n    onSplitFeedback,\n    onMerchantIdError,\n    onConfirm,\n  ]);\n\n  // Conditional render AFTER all hooks - required by Rules of Hooks\n  if (!isReady) {\n    return null;\n  }\n\n  // Pass attributes on initial render so WC sees them in connectedCallback (useEffect runs after mount)\n  const elementProps: Record<string, unknown> = {\n    ref: elementRef,\n  };\n  if (className) elementProps.className = className;\n  if (id) elementProps.id = id;\n  if (dataId !== undefined) elementProps['data-id'] = dataId;\n  if (size !== undefined) elementProps.size = size;\n  if (disabled) elementProps.disabled = '';\n  if (style !== undefined) {\n    elementProps.style =\n      typeof style === 'string'\n        ? style\n        : Object.entries(style)\n            .map(\n              ([k, v]) =>\n                `${k.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${v}`\n            )\n            .join('; ');\n  }\n  if (items !== undefined) {\n    elementProps.items =\n      typeof items === 'string' ? items : JSON.stringify(items);\n  }\n  if (priceBreakdown !== undefined) {\n    elementProps['price-breakdown'] =\n      typeof priceBreakdown === 'string'\n        ? priceBreakdown\n        : JSON.stringify(priceBreakdown);\n  }\n  if (totalCost !== undefined) elementProps['total-cost'] = String(totalCost);\n  if (customer !== undefined) {\n    elementProps.customer =\n      typeof customer === 'string' ? customer : JSON.stringify(customer);\n  }\n  if (webhook !== undefined) {\n    elementProps.webhook =\n      typeof webhook === 'string' ? webhook : JSON.stringify(webhook);\n  }\n  if (merchantStoreUrl !== undefined) {\n    elementProps['merchant-store-url'] = merchantStoreUrl;\n  }\n  Object.assign(elementProps, rest);\n\n  return React.createElement('gait-button', elementProps);\n});\n\nGaitButton.displayName = 'GaitButton';\n\nexport { GaitButton };\n","/**\n * Registers Gait Web Components in the browser.\n * Safe to call in SSR environments - no-op when window/customElements unavailable.\n *\n * Usage:\n *   import '@gait-financial/react/register';  // Side-effect: registers when in browser\n *   // or\n *   import { defineCustomElements } from '@gait-financial/react/register';\n *   await defineCustomElements();  // Optional: load from custom URL\n */\n\nlet loadPromise: Promise<void> | null = null;\n\n/**\n * Loads and registers Gait Web Components.\n * In browser: loads the WC script if not already registered.\n * In SSR: no-op.\n * Deduplicated: multiple calls return the same promise.\n *\n * @param scriptUrl - Optional URL to the button.js script. If omitted, uses the bundled script.\n */\nexport async function defineCustomElements(\n  scriptUrl?: string\n): Promise<void> {\n  if (typeof window === 'undefined' || typeof customElements === 'undefined') {\n    return;\n  }\n  if (customElements.get('gait-button')) {\n    return;\n  }\n  if (loadPromise) {\n    return loadPromise;\n  }\n\n  const tryLoad = (url: string): Promise<void> =>\n    new Promise((resolve, reject) => {\n      const script = document.createElement('script');\n      script.async = true;\n      script.src = url;\n      script.onload = () => resolve();\n      script.onerror = () => reject();\n      document.head.appendChild(script);\n    });\n\n  loadPromise = (async () => {\n    const fallbackUrl = `${typeof window !== 'undefined' ? window.location.origin : ''}/node_modules/@gait-financial/react/dist/wc/button.js`;\n\n    if (scriptUrl) {\n      await tryLoad(scriptUrl);\n      return;\n    }\n\n    // Try relative to module first (works when not pre-bundled)\n    try {\n      const url = new URL('./wc/button.js', import.meta.url).href;\n      await tryLoad(url);\n      return;\n    } catch {\n      // ignore\n    }\n\n    // Fallback: direct path (works when Vite pre-bundles and breaks import.meta.url)\n    try {\n      await tryLoad(fallbackUrl);\n      return;\n    } catch {\n      throw new Error(\n        '[@gait-financial/react] Failed to load web component script. If using Vite, add optimizeDeps: { exclude: [\"@gait-financial/react\"] } to vite.config.'\n      );\n    }\n  })();\n  return loadPromise;\n}\n\n// Side-effect: auto-register when imported in browser (SSR-safe)\nif (typeof window !== 'undefined' && typeof customElements !== 'undefined') {\n  void defineCustomElements();\n}\n"],"mappings":"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","names":["GaitButton"]}
+{"version":3,"sources":["../src/components/GaitButton.tsx","../src/register.ts"],"sourcesContent":["'use client';\n\n/**\n * React wrapper for GaitButton Web Component\n * Creates the element imperatively with attributes set BEFORE appending,\n * so connectedCallback sees data-id and other attrs immediately.\n * Avoids React's prop handling which causes \"readonly property\" errors.\n */\n\nimport React, {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\nimport { defineCustomElements } from '../register';\nimport type {\n  GaitButtonItem,\n  GaitPriceBreakdownItem,\n  GaitCustomer,\n  GaitWebhook,\n  GaitClickDetail,\n  GaitLoadedDetail,\n  GaitDataProcessedDetail,\n  GaitSplitFeedbackDetail,\n  GaitMerchantIdErrorDetail,\n  GaitConfirmDetail,\n} from '../types';\n\nexport interface GaitButtonProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'onClick' | 'style'> {\n  /** Checkout/data identity (required for payment flow) */\n  'data-id'?: string;\n  /** Disable the button */\n  disabled?: boolean;\n  /** Button size */\n  size?: 'small' | 'medium' | 'large';\n  /** Inline styles - string (for WC) or React.CSSProperties */\n  style?: React.CSSProperties | string;\n  /** Cart/order items for split payment modal */\n  items?: GaitButtonItem[] | string;\n  /** Price breakdown items */\n  priceBreakdown?: GaitPriceBreakdownItem[] | string;\n  /** Total cost */\n  totalCost?: number | string;\n  /** Customer info for split payment */\n  customer?: GaitCustomer | string;\n  /** Webhook config for split payment callbacks */\n  webhook?: GaitWebhook | string;\n  /** Merchant store URL (defaults to window.location.origin) */\n  merchantStoreUrl?: string;\n\n  /** Button clicked */\n  onClick?: (detail: GaitClickDetail) => void;\n  /** Component loaded/rendered */\n  onLoaded?: (detail: GaitLoadedDetail) => void;\n  /** Data processed (e.g. checkoutId resolved) */\n  onDataProcessed?: (detail: GaitDataProcessedDetail) => void;\n  /** Split payment API feedback (success/failure) */\n  onSplitFeedback?: (detail: GaitSplitFeedbackDetail) => void;\n  /** Merchant ID lookup failed */\n  onMerchantIdError?: (detail: GaitMerchantIdErrorDetail) => void;\n  /** Pay remaining confirmed */\n  onConfirm?: (detail: GaitConfirmDetail) => void;\n}\n\nfunction setAttributes(\n  el: HTMLElement,\n  props: Pick<\n    GaitButtonProps,\n    | 'data-id'\n    | 'disabled'\n    | 'size'\n    | 'style'\n    | 'items'\n    | 'priceBreakdown'\n    | 'totalCost'\n    | 'customer'\n    | 'webhook'\n    | 'merchantStoreUrl'\n  >\n) {\n  const {\n    'data-id': dataId,\n    disabled,\n    size,\n    style,\n    items,\n    priceBreakdown,\n    totalCost,\n    customer,\n    webhook,\n    merchantStoreUrl,\n  } = props;\n\n  if (dataId !== undefined) el.setAttribute('data-id', dataId);\n  if (size !== undefined) el.setAttribute('size', size);\n  if (disabled) el.setAttribute('disabled', '');\n  else el.removeAttribute('disabled');\n  if (style !== undefined) {\n    const styleStr =\n      typeof style === 'string'\n        ? style\n        : Object.entries(style)\n            .map(\n              ([k, v]) =>\n                `${k.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${v}`\n            )\n            .join('; ');\n    el.setAttribute('style', styleStr);\n  }\n  if (items !== undefined)\n    el.setAttribute(\n      'items',\n      typeof items === 'string' ? items : JSON.stringify(items)\n    );\n  if (priceBreakdown !== undefined)\n    el.setAttribute(\n      'price-breakdown',\n      typeof priceBreakdown === 'string'\n        ? priceBreakdown\n        : JSON.stringify(priceBreakdown)\n    );\n  if (totalCost !== undefined)\n    el.setAttribute('total-cost', String(totalCost));\n  if (customer !== undefined)\n    el.setAttribute(\n      'customer',\n      typeof customer === 'string' ? customer : JSON.stringify(customer)\n    );\n  if (webhook !== undefined)\n    el.setAttribute(\n      'webhook',\n      typeof webhook === 'string' ? webhook : JSON.stringify(webhook)\n    );\n  if (merchantStoreUrl !== undefined)\n    el.setAttribute('merchant-store-url', merchantStoreUrl);\n}\n\nconst GaitButton = forwardRef<HTMLElement, GaitButtonProps>(function GaitButton(\n  {\n    'data-id': dataId,\n    disabled,\n    size,\n    style,\n    items,\n    priceBreakdown,\n    totalCost,\n    customer,\n    webhook,\n    merchantStoreUrl,\n    onClick,\n    onLoaded,\n    onDataProcessed,\n    onSplitFeedback,\n    onMerchantIdError,\n    onConfirm,\n    className,\n    id,\n    ...rest\n  },\n  ref\n) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const elementRef = useRef<HTMLElement | null>(null);\n  const [isReady, setIsReady] = useState(false);\n\n  const callbackRef = useRef({\n    onClick,\n    onLoaded,\n    onDataProcessed,\n    onSplitFeedback,\n    onMerchantIdError,\n    onConfirm,\n  });\n  callbackRef.current = {\n    onClick,\n    onLoaded,\n    onDataProcessed,\n    onSplitFeedback,\n    onMerchantIdError,\n    onConfirm,\n  };\n\n  useImperativeHandle(ref, () => elementRef.current as HTMLElement, []);\n\n  // Wait for WC registration\n  useEffect(() => {\n    if (\n      typeof customElements !== 'undefined' &&\n      customElements.get('gait-button')\n    ) {\n      setIsReady(true);\n      return;\n    }\n    defineCustomElements()\n      .then(() => setIsReady(true))\n      .catch(() => setIsReady(false));\n  }, []);\n\n  // Create gait-button imperatively with attrs BEFORE append (so connectedCallback sees data-id)\n  useEffect(() => {\n    if (!isReady || !containerRef.current || typeof document === 'undefined')\n      return;\n\n    const container = containerRef.current;\n    const el = document.createElement('gait-button') as HTMLElement;\n\n    // Set attributes BEFORE appending - connectedCallback fires on append and will see them\n    setAttributes(el, {\n      'data-id': dataId,\n      disabled,\n      size,\n      style,\n      items,\n      priceBreakdown,\n      totalCost,\n      customer,\n      webhook,\n      merchantStoreUrl,\n    });\n\n    if (className) el.className = className;\n    if (id) el.id = id;\n    Object.entries(rest).forEach(([k, v]) => {\n      if (v != null && typeof v !== 'function') el.setAttribute(k, String(v));\n    });\n\n    const cbs = callbackRef.current;\n    const handleClick = (e: Event) => {\n      if (cbs.onClick && e instanceof CustomEvent && e.detail)\n        cbs.onClick(e.detail as GaitClickDetail);\n    };\n    const handleLoaded = (e: Event) => {\n      if (cbs.onLoaded && e instanceof CustomEvent && e.detail)\n        cbs.onLoaded(e.detail as GaitLoadedDetail);\n    };\n    const handleDataProcessed = (e: Event) => {\n      if (cbs.onDataProcessed && e instanceof CustomEvent && e.detail)\n        cbs.onDataProcessed(e.detail as GaitDataProcessedDetail);\n    };\n    const handleSplitFeedback = (e: Event) => {\n      if (cbs.onSplitFeedback && e instanceof CustomEvent && e.detail)\n        cbs.onSplitFeedback(e.detail as GaitSplitFeedbackDetail);\n    };\n    const handleMerchantIdError = (e: Event) => {\n      if (cbs.onMerchantIdError && e instanceof CustomEvent && e.detail)\n        cbs.onMerchantIdError(e.detail as GaitMerchantIdErrorDetail);\n    };\n    const handleConfirm = (e: Event) => {\n      if (cbs.onConfirm && e instanceof CustomEvent && e.detail)\n        cbs.onConfirm(e.detail as GaitConfirmDetail);\n    };\n\n    el.addEventListener('gait-click', handleClick as EventListener);\n    el.addEventListener('gait-loaded', handleLoaded as EventListener);\n    el.addEventListener('gait-data-processed', handleDataProcessed as EventListener);\n    el.addEventListener('gait-split-feedback', handleSplitFeedback as EventListener);\n    el.addEventListener('gait-merchant-id-error', handleMerchantIdError as EventListener);\n    el.addEventListener('gait-confirm', handleConfirm as EventListener);\n\n    elementRef.current = el;\n    container.appendChild(el);\n\n    return () => {\n      el.removeEventListener('gait-click', handleClick as EventListener);\n      el.removeEventListener('gait-loaded', handleLoaded as EventListener);\n      el.removeEventListener('gait-data-processed', handleDataProcessed as EventListener);\n      el.removeEventListener('gait-split-feedback', handleSplitFeedback as EventListener);\n      el.removeEventListener('gait-merchant-id-error', handleMerchantIdError as EventListener);\n      el.removeEventListener('gait-confirm', handleConfirm as EventListener);\n      container.removeChild(el);\n      elementRef.current = null;\n    };\n  }, [isReady]); // Only run when isReady changes - create once\n\n  // Update attributes when props change\n  useEffect(() => {\n    const el = elementRef.current;\n    if (!el) return;\n\n    setAttributes(el, {\n      'data-id': dataId,\n      disabled,\n      size,\n      style,\n      items,\n      priceBreakdown,\n      totalCost,\n      customer,\n      webhook,\n      merchantStoreUrl,\n    });\n\n    if (className) el.className = className;\n    else el.removeAttribute('class');\n    if (id) el.id = id;\n    else el.removeAttribute('id');\n  }, [\n    dataId,\n    disabled,\n    size,\n    style,\n    items,\n    priceBreakdown,\n    totalCost,\n    customer,\n    webhook,\n    merchantStoreUrl,\n    className,\n    id,\n  ]);\n\n  if (!isReady) return null;\n\n  return React.createElement('div', { ref: containerRef });\n});\n\nGaitButton.displayName = 'GaitButton';\n\nexport { GaitButton };\n","/**\n * Registers Gait Web Components in the browser.\n * Safe to call in SSR environments - no-op when window/customElements unavailable.\n *\n * Usage:\n *   import '@gait-financial/react/register';  // Side-effect: registers when in browser\n *   // or\n *   import { defineCustomElements } from '@gait-financial/react/register';\n *   await defineCustomElements();  // Optional: load from custom URL\n */\n\nlet loadPromise: Promise<void> | null = null;\n\n/**\n * Loads and registers Gait Web Components.\n * In browser: loads the WC script if not already registered.\n * In SSR: no-op.\n * Deduplicated: multiple calls return the same promise.\n *\n * @param scriptUrl - Optional URL to the button.js script. If omitted, uses the bundled script.\n */\nexport async function defineCustomElements(\n  scriptUrl?: string\n): Promise<void> {\n  if (typeof window === 'undefined' || typeof customElements === 'undefined') {\n    return;\n  }\n  if (customElements.get('gait-button')) {\n    return;\n  }\n  if (loadPromise) {\n    return loadPromise;\n  }\n\n  const tryLoad = (url: string): Promise<void> =>\n    new Promise((resolve, reject) => {\n      const script = document.createElement('script');\n      script.async = true;\n      script.src = url;\n      script.onload = () => resolve();\n      script.onerror = () => reject();\n      document.head.appendChild(script);\n    });\n\n  loadPromise = (async () => {\n    const fallbackUrl = `${typeof window !== 'undefined' ? window.location.origin : ''}/node_modules/@gait-financial/react/dist/wc/button.js`;\n\n    if (scriptUrl) {\n      await tryLoad(scriptUrl);\n      return;\n    }\n\n    // Try relative to module first (works when not pre-bundled)\n    try {\n      const url = new URL('./wc/button.js', import.meta.url).href;\n      await tryLoad(url);\n      return;\n    } catch {\n      // ignore\n    }\n\n    // Fallback: direct path (works when Vite pre-bundles and breaks import.meta.url)\n    try {\n      await tryLoad(fallbackUrl);\n      return;\n    } catch {\n      throw new Error(\n        '[@gait-financial/react] Failed to load web component script. If using Vite, add optimizeDeps: { exclude: [\"@gait-financial/react\"] } to vite.config.'\n      );\n    }\n  })();\n  return loadPromise;\n}\n\n// Side-effect: auto-register when imported in browser (SSR-safe)\nif (typeof window !== 'undefined' && typeof customElements !== 'undefined') {\n  void defineCustomElements();\n}\n"],"mappings":"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","names":["GaitButton"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gait-financial/react",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "private": false,
   "description": "React wrappers for Gait Web Components",
   "type": "module",