@gait-financial/react 0.0.16

package/README.md

@@ -0,0 +1,103 @@
+# @gait-financial/react
+
+React wrappers for Gait Web Components. Thin, type-safe bindings that map React props to the underlying custom elements.
+
+## Installation
+
+```bash
+npm install @gait-financial/react
+```
+
+## Setup
+
+### 1. Register the Web Component
+
+Import the registration module once (e.g. in `_app.tsx`, `layout.tsx`, or your root component):
+
+```tsx
+import '@gait-financial/react/register';
+```
+
+This loads and registers the Gait Web Components in the browser. Safe for SSR—no-op when `window`/`customElements` are unavailable.
+
+**Alternative:** Load the Web Component via script tag and skip the register import:
+
+```html
+<script src="https://cdn.usegait.com/button.js"></script>
+```
+
+### 2. Use the Components
+
+```tsx
+import { GaitButton } from '@gait-financial/react';
+
+function Checkout() {
+  return (
+    <GaitButton
+      label="Checkout"
+      theme="dark"
+      data-id="your-checkout-id"
+      totalCost={99.99}
+      brandColor="#e91e63"
+      onClick={(detail) => console.log('Clicked', detail)}
+      onSplitFeedback={(detail) => {
+        if (detail.success) console.log('Split sent!');
+        else console.error('Failed', detail.error);
+      }}
+    />
+  );
+}
+```
+
+## GaitButton Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `label` | `string` | Button label (default: "Button") |
+| `theme` | `'dark' \| 'light'` | Theme variant |
+| `data-id` | `string` | Checkout/data identity (required for payments) |
+| `disabled` | `boolean` | Disable the button |
+| `size` | `'small' \| 'medium' \| 'large'` | Button size |
+| `style` | `string \| React.CSSProperties` | Inline styles |
+| `items` | `GaitButtonItem[] \| string` | Cart items for split payment modal |
+| `priceBreakdown` | `GaitPriceBreakdownItem[] \| string` | Price breakdown |
+| `totalCost` | `number \| string` | Total cost |
+| `brandColor` | `string` | Brand/accent color |
+| `customer` | `GaitCustomer \| string` | Customer info for split payment |
+| `webhook` | `GaitWebhook \| string` | Webhook config for split callbacks |
+| `merchantStoreUrl` | `string` | Merchant store URL |
+| `onClick` | `(detail) => void` | Button clicked |
+| `onLoaded` | `(detail) => void` | Component loaded |
+| `onDataProcessed` | `(detail) => void` | Data processed |
+| `onSplitFeedback` | `(detail) => void` | Split payment API result |
+| `onMerchantIdError` | `(detail) => void` | Merchant ID lookup failed |
+| `onConfirm` | `(detail) => void` | Pay remaining confirmed |
+
+## Next.js
+
+The package uses `"use client"` directives. Import and use in Client Components:
+
+```tsx
+'use client';
+
+import '@gait-financial/react/register';
+import { GaitButton } from '@gait-financial/react';
+
+export default function CheckoutPage() {
+  return <GaitButton data-id="..." label="Pay" />;
+}
+```
+
+## Architecture
+
+This package is a thin wrapper. The Web Component implementation is the source of truth. The structure allows adding other framework packages (e.g. `@gait/vue`, `@gait/svelte`) later without refactoring the core.
+
+### Adding @gait/vue later
+
+Copy the `packages/react` structure to `packages/vue`:
+
+1. **register.ts** – Same logic: load the bundled WC script, guard for SSR.
+2. **components/GaitButton.vue** – Vue wrapper: use `ref` + `onMounted`/`watch` to sync props to the element, map DOM events to emits.
+3. **types.ts** – Copy event detail types from the Web Component (source of truth).
+4. **Build** – Use Vite or similar to output ESM, CJS, and `.d.ts`.
+5. **Entry** – Export components and types; keep registration as a separate import.

package/dist/index.cjs

@@ -0,0 +1,199 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  GaitButton: () => GaitButton
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/GaitButton.tsx
+var import_react = __toESM(require("react"), 1);
+var GaitButton = (0, import_react.forwardRef)(function GaitButton2({
+  label,
+  theme,
+  "data-id": dataId,
+  disabled,
+  size,
+  style,
+  items,
+  priceBreakdown,
+  totalCost,
+  brandColor,
+  customer,
+  webhook,
+  merchantStoreUrl,
+  onClick,
+  onLoaded,
+  onDataProcessed,
+  onSplitFeedback,
+  onMerchantIdError,
+  onConfirm,
+  className,
+  id,
+  ...rest
+}, ref) {
+  const elementRef = (0, import_react.useRef)(null);
+  (0, import_react.useImperativeHandle)(ref, () => elementRef.current, []);
+  (0, import_react.useEffect)(() => {
+    const el = elementRef.current;
+    if (!el) return;
+    if (label !== void 0) el.setAttribute("label", label);
+    if (theme !== void 0) el.setAttribute("theme", theme);
+    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 (brandColor !== void 0) el.setAttribute("brand-color", brandColor);
+    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);
+    }
+  }, [
+    label,
+    theme,
+    dataId,
+    disabled,
+    size,
+    style,
+    items,
+    priceBreakdown,
+    totalCost,
+    brandColor,
+    customer,
+    webhook,
+    merchantStoreUrl
+  ]);
+  (0, import_react.useEffect)(() => {
+    const el = elementRef.current;
+    if (!el) return;
+    const handleClick = (e) => {
+      if (onClick && e instanceof CustomEvent && e.detail) {
+        onClick(e.detail);
+      }
+    };
+    const handleLoaded = (e) => {
+      if (onLoaded && e instanceof CustomEvent && e.detail) {
+        onLoaded(e.detail);
+      }
+    };
+    const handleDataProcessed = (e) => {
+      if (onDataProcessed && e instanceof CustomEvent && e.detail) {
+        onDataProcessed(e.detail);
+      }
+    };
+    const handleSplitFeedback = (e) => {
+      if (onSplitFeedback && e instanceof CustomEvent && e.detail) {
+        onSplitFeedback(e.detail);
+      }
+    };
+    const handleMerchantIdError = (e) => {
+      if (onMerchantIdError && e instanceof CustomEvent && e.detail) {
+        onMerchantIdError(e.detail);
+      }
+    };
+    const handleConfirm = (e) => {
+      if (onConfirm && e instanceof CustomEvent && e.detail) {
+        onConfirm(e.detail);
+      }
+    };
+    el.addEventListener("gait-click", handleClick);
+    el.addEventListener("gait-loaded", handleLoaded);
+    el.addEventListener("gait-data-processed", handleDataProcessed);
+    el.addEventListener("gait-split-feedback", handleSplitFeedback);
+    el.addEventListener("gait-merchant-id-error", handleMerchantIdError);
+    el.addEventListener("gait-confirm", handleConfirm);
+    return () => {
+      el.removeEventListener("gait-click", handleClick);
+      el.removeEventListener("gait-loaded", handleLoaded);
+      el.removeEventListener("gait-data-processed", handleDataProcessed);
+      el.removeEventListener("gait-split-feedback", handleSplitFeedback);
+      el.removeEventListener("gait-merchant-id-error", handleMerchantIdError);
+      el.removeEventListener("gait-confirm", handleConfirm);
+    };
+  }, [
+    onClick,
+    onLoaded,
+    onDataProcessed,
+    onSplitFeedback,
+    onMerchantIdError,
+    onConfirm
+  ]);
+  const passthrough = {};
+  if (className) passthrough.className = className;
+  if (id) passthrough.id = id;
+  Object.assign(passthrough, rest);
+  return import_react.default.createElement("gait-button", {
+    ref: elementRef,
+    ...passthrough
+  });
+});
+GaitButton.displayName = "GaitButton";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GaitButton
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/components/GaitButton.tsx"],"sourcesContent":["'use client';\n\n/**\n * @gait/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/react/register';\n *\n *   2. Use the React components:\n *      import { GaitButton } from '@gait/react';\n */\n\nexport { GaitButton } from './components/GaitButton';\nexport type { GaitButtonProps } from './components/GaitButton';\n\nexport type {\n  ButtonTheme,\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 */\n\nimport React, {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\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  /** Button label (default: \"Button\") */\n  label?: string;\n  /** Theme variant */\n  theme?: 'dark' | 'light';\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  /** Brand/accent color */\n  brandColor?: 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    label,\n    theme,\n    'data-id': dataId,\n    disabled,\n    size,\n    style,\n    items,\n    priceBreakdown,\n    totalCost,\n    brandColor,\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\n  useImperativeHandle(ref, () => elementRef.current as HTMLElement, []);\n\n  // Sync props to element attributes via ref (WC reads attributes)\n  useEffect(() => {\n    const el = elementRef.current;\n    if (!el) return;\n\n    if (label !== undefined) el.setAttribute('label', label);\n    if (theme !== undefined) el.setAttribute('theme', theme);\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 (brandColor !== undefined) el.setAttribute('brand-color', brandColor);\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    label,\n    theme,\n    dataId,\n    disabled,\n    size,\n    style,\n    items,\n    priceBreakdown,\n    totalCost,\n    brandColor,\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  const passthrough: Record<string, unknown> = {};\n  if (className) passthrough.className = className;\n  if (id) passthrough.id = id;\n  Object.assign(passthrough, rest);\n\n  return React.createElement('gait-button', {\n    ref: elementRef,\n    ...passthrough,\n  });\n});\n\nGaitButton.displayName = 'GaitButton';\n\nexport { GaitButton };\n"],"mappings":"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","names":["GaitButton","React"]}

package/dist/index.d.cts

@@ -0,0 +1,123 @@
+import React from 'react';
+
+/**
+ * Shared types for Gait React components
+ * Mirrors the Web Component API (source of truth)
+ */
+type ButtonTheme = 'dark' | 'light';
+type ButtonSize = 'small' | 'medium' | 'large';
+interface GaitButtonItem {
+    name: string;
+    image: string;
+    id: string;
+    quantity: number;
+    category?: string;
+    price: number;
+}
+interface GaitPriceBreakdownItem {
+    name: string;
+    price: number | string;
+}
+interface GaitCustomer {
+    email: string;
+    name?: string;
+}
+interface GaitWebhook {
+    url: string;
+    body?: Record<string, unknown>;
+}
+/** gait-click event detail */
+interface GaitClickDetail {
+    label: string;
+    theme: ButtonTheme;
+    dataId: string | null;
+    dataAttributes: Record<string, string>;
+    timestamp: string;
+}
+/** gait-loaded event detail */
+interface GaitLoadedDetail {
+    attributes: Record<string, string | null>;
+    dataId: string | null;
+    dataAttributes: Record<string, string>;
+    label: string;
+    theme: ButtonTheme;
+    size: ButtonSize;
+    disabled: boolean;
+    timestamp: string;
+}
+/** gait-data-processed event detail */
+interface GaitDataProcessedDetail {
+    id?: string;
+    timestamp: string;
+    [key: string]: unknown;
+}
+/** gait-split-feedback event detail */
+interface GaitSplitFeedbackDetail {
+    success: boolean;
+    message?: string;
+    data?: unknown;
+    error?: string;
+    timestamp: string;
+}
+/** gait-merchant-id-error event detail */
+interface GaitMerchantIdErrorDetail {
+    message: string;
+    timestamp: string;
+}
+/** gait-confirm event detail */
+interface GaitConfirmDetail {
+    merchantId: string;
+    splitId: string;
+    paymentId: string;
+}
+
+/**
+ * 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.
+ */
+
+interface GaitButtonProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onClick' | 'style'> {
+    /** Button label (default: "Button") */
+    label?: string;
+    /** Theme variant */
+    theme?: 'dark' | 'light';
+    /** Checkout/data identity (required for payment flow) */
+    'data-id'?: string;
+    /** Disable the button */
+    disabled?: boolean;
+    /** Button size */
+    size?: 'small' | 'medium' | 'large';
+    /** Inline styles - string (for WC) or React.CSSProperties */
+    style?: React.CSSProperties | string;
+    /** Cart/order items for split payment modal */
+    items?: GaitButtonItem[] | string;
+    /** Price breakdown items */
+    priceBreakdown?: GaitPriceBreakdownItem[] | string;
+    /** Total cost */
+    totalCost?: number | string;
+    /** Brand/accent color */
+    brandColor?: string;
+    /** Customer info for split payment */
+    customer?: GaitCustomer | string;
+    /** Webhook config for split payment callbacks */
+    webhook?: GaitWebhook | string;
+    /** Merchant store URL (defaults to window.location.origin) */
+    merchantStoreUrl?: string;
+    /** Button clicked */
+    onClick?: (detail: GaitClickDetail) => void;
+    /** Component loaded/rendered */
+    onLoaded?: (detail: GaitLoadedDetail) => void;
+    /** Data processed (e.g. checkoutId resolved) */
+    onDataProcessed?: (detail: GaitDataProcessedDetail) => void;
+    /** Split payment API feedback (success/failure) */
+    onSplitFeedback?: (detail: GaitSplitFeedbackDetail) => void;
+    /** Merchant ID lookup failed */
+    onMerchantIdError?: (detail: GaitMerchantIdErrorDetail) => void;
+    /** Pay remaining confirmed */
+    onConfirm?: (detail: GaitConfirmDetail) => void;
+}
+declare const GaitButton: React.ForwardRefExoticComponent<GaitButtonProps & React.RefAttributes<HTMLElement>>;
+
+export { type ButtonSize, type ButtonTheme, GaitButton, type GaitButtonItem, type GaitButtonProps, type GaitClickDetail, type GaitConfirmDetail, type GaitCustomer, type GaitDataProcessedDetail, type GaitLoadedDetail, type GaitMerchantIdErrorDetail, type GaitPriceBreakdownItem, type GaitSplitFeedbackDetail, type GaitWebhook };

package/dist/index.d.ts

@@ -0,0 +1,123 @@
+import React from 'react';
+
+/**
+ * Shared types for Gait React components
+ * Mirrors the Web Component API (source of truth)
+ */
+type ButtonTheme = 'dark' | 'light';
+type ButtonSize = 'small' | 'medium' | 'large';
+interface GaitButtonItem {
+    name: string;
+    image: string;
+    id: string;
+    quantity: number;
+    category?: string;
+    price: number;
+}
+interface GaitPriceBreakdownItem {
+    name: string;
+    price: number | string;
+}
+interface GaitCustomer {
+    email: string;
+    name?: string;
+}
+interface GaitWebhook {
+    url: string;
+    body?: Record<string, unknown>;
+}
+/** gait-click event detail */
+interface GaitClickDetail {
+    label: string;
+    theme: ButtonTheme;
+    dataId: string | null;
+    dataAttributes: Record<string, string>;
+    timestamp: string;
+}
+/** gait-loaded event detail */
+interface GaitLoadedDetail {
+    attributes: Record<string, string | null>;
+    dataId: string | null;
+    dataAttributes: Record<string, string>;
+    label: string;
+    theme: ButtonTheme;
+    size: ButtonSize;
+    disabled: boolean;
+    timestamp: string;
+}
+/** gait-data-processed event detail */
+interface GaitDataProcessedDetail {
+    id?: string;
+    timestamp: string;
+    [key: string]: unknown;
+}
+/** gait-split-feedback event detail */
+interface GaitSplitFeedbackDetail {
+    success: boolean;
+    message?: string;
+    data?: unknown;
+    error?: string;
+    timestamp: string;
+}
+/** gait-merchant-id-error event detail */
+interface GaitMerchantIdErrorDetail {
+    message: string;
+    timestamp: string;
+}
+/** gait-confirm event detail */
+interface GaitConfirmDetail {
+    merchantId: string;
+    splitId: string;
+    paymentId: string;
+}
+
+/**
+ * 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.
+ */
+
+interface GaitButtonProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onClick' | 'style'> {
+    /** Button label (default: "Button") */
+    label?: string;
+    /** Theme variant */
+    theme?: 'dark' | 'light';
+    /** Checkout/data identity (required for payment flow) */
+    'data-id'?: string;
+    /** Disable the button */
+    disabled?: boolean;
+    /** Button size */
+    size?: 'small' | 'medium' | 'large';
+    /** Inline styles - string (for WC) or React.CSSProperties */
+    style?: React.CSSProperties | string;
+    /** Cart/order items for split payment modal */
+    items?: GaitButtonItem[] | string;
+    /** Price breakdown items */
+    priceBreakdown?: GaitPriceBreakdownItem[] | string;
+    /** Total cost */
+    totalCost?: number | string;
+    /** Brand/accent color */
+    brandColor?: string;
+    /** Customer info for split payment */
+    customer?: GaitCustomer | string;
+    /** Webhook config for split payment callbacks */
+    webhook?: GaitWebhook | string;
+    /** Merchant store URL (defaults to window.location.origin) */
+    merchantStoreUrl?: string;
+    /** Button clicked */
+    onClick?: (detail: GaitClickDetail) => void;
+    /** Component loaded/rendered */
+    onLoaded?: (detail: GaitLoadedDetail) => void;
+    /** Data processed (e.g. checkoutId resolved) */
+    onDataProcessed?: (detail: GaitDataProcessedDetail) => void;
+    /** Split payment API feedback (success/failure) */
+    onSplitFeedback?: (detail: GaitSplitFeedbackDetail) => void;
+    /** Merchant ID lookup failed */
+    onMerchantIdError?: (detail: GaitMerchantIdErrorDetail) => void;
+    /** Pay remaining confirmed */
+    onConfirm?: (detail: GaitConfirmDetail) => void;
+}
+declare const GaitButton: React.ForwardRefExoticComponent<GaitButtonProps & React.RefAttributes<HTMLElement>>;
+
+export { type ButtonSize, type ButtonTheme, GaitButton, type GaitButtonItem, type GaitButtonProps, type GaitClickDetail, type GaitConfirmDetail, type GaitCustomer, type GaitDataProcessedDetail, type GaitLoadedDetail, type GaitMerchantIdErrorDetail, type GaitPriceBreakdownItem, type GaitSplitFeedbackDetail, type GaitWebhook };