@squaredr/fieldcraft-pro 1.4.0 → 1.5.0

package/dist/{chunk-BYT2P3I6.mjs → chunk-6LRUDBC7.mjs}

@@ -453,6 +453,14 @@ var QUESTION_TYPE_INFO = {
     icon: "Phone",
     description: "US phone number input"
   },
+  phone_international: {
+    type: "phone_international",
+    label: "Intl Phone",
+    category: "text",
+    icon: "Globe2",
+    description: "Phone with country code",
+    defaultConfig: { type: "phone_international", defaultCountry: "US" }
+  },
   url: {
     type: "url",
     label: "URL",
@@ -546,6 +554,14 @@ var QUESTION_TYPE_INFO = {
     requiresOptions: true,
     defaultConfig: { type: "ranking", items: [] }
   },
+  country_select: {
+    type: "country_select",
+    label: "Country",
+    category: "selection",
+    icon: "Globe",
+    description: "Country dropdown with search",
+    defaultConfig: { type: "country_select" }
+  },
   // ── Date/Time ──
   date: {
     type: "date",
@@ -597,6 +613,14 @@ var QUESTION_TYPE_INFO = {
     description: "Canvas signature pad",
     defaultConfig: { type: "signature" }
   },
+  image_capture: {
+    type: "image_capture",
+    label: "Camera",
+    category: "media",
+    icon: "Camera",
+    description: "Capture photo from camera",
+    defaultConfig: { type: "image_capture", allowGallery: true }
+  },
   date_range: {
     type: "date_range",
     label: "Date Range",
@@ -605,6 +629,14 @@ var QUESTION_TYPE_INFO = {
     description: "Start and end date picker",
     defaultConfig: { type: "date_range" }
   },
+  appointment: {
+    type: "appointment",
+    label: "Appointment",
+    category: "datetime",
+    icon: "CalendarCheck",
+    description: "Date & time slot booking",
+    defaultConfig: { type: "appointment", duration: 30 }
+  },
   // ── Advanced ──
   repeater: {
     type: "repeater",
@@ -676,6 +708,14 @@ var QUESTION_TYPE_INFO = {
     description: "Hidden value from URL or static",
     defaultConfig: { type: "hidden", source: "static" }
   },
+  payment: {
+    type: "payment",
+    label: "Payment",
+    category: "advanced",
+    icon: "CreditCard",
+    description: "Collect payment via Stripe",
+    defaultConfig: { type: "payment", provider: "stripe", publicKey: "", currency: "USD" }
+  },
   // ── Structural ──
   section_header: {
     type: "section_header",
@@ -780,7 +820,7 @@ var DEFAULT_PALETTE = [
   {
     category: "text",
     label: "Text Input",
-    types: ["short_text", "long_text", "email", "phone", "url", "legal_name", "address"]
+    types: ["short_text", "long_text", "email", "phone", "phone_international", "url", "legal_name", "address"]
   },
   {
     category: "numeric",
@@ -790,17 +830,17 @@ var DEFAULT_PALETTE = [
   {
     category: "selection",
     label: "Selection",
-    types: ["single_select", "multi_select", "dropdown", "boolean", "ranking"]
+    types: ["single_select", "multi_select", "dropdown", "boolean", "ranking", "country_select"]
   },
   {
     category: "datetime",
     label: "Date & Time",
-    types: ["date", "time", "date_range"]
+    types: ["date", "time", "date_range", "appointment"]
   },
   {
     category: "media",
     label: "Media",
-    types: ["file_upload", "signature"]
+    types: ["file_upload", "signature", "image_capture"]
   },
   {
     category: "content",
@@ -815,7 +855,7 @@ var DEFAULT_PALETTE = [
   {
     category: "advanced",
     label: "Advanced",
-    types: ["repeater", "likert", "scoring", "matrix", "calculated", "hidden"]
+    types: ["repeater", "likert", "scoring", "matrix", "calculated", "hidden", "payment"]
   }
 ];
 

package/dist/form-builder/index.d.mts

@@ -1,4 +1,4 @@
-export { B as BuilderState, a as BuilderStateHook, D as DEFAULT_PALETTE, b as DEFAULT_SCHEMA, c as DragItem, d as DropTarget, F as FormBuilder, f as FormBuilderProps, h as FormBuilderTheme, i as FormBuilderThemeProvider, M as MutationAction, P as PaletteCategory, j as PropertyPanelTab, Q as QUESTION_TYPE_INFO, k as QuestionTypeCategory, l as QuestionTypeInfo, S as SelectedItem, U as UndoRedoState, m as addOption, n as addQuestion, o as addSection, p as cleanPreset, q as cn, r as duplicateQuestion, s as duplicateSection, t as findQuestion, u as findSection, v as generateId, w as generateOptionId, x as generateQuestionId, y as generateSectionId, z as moveOption, A as moveQuestion, C as moveSection, E as removeOption, G as removeQuestion, H as removeSection, I as squaredrDarkPreset, J as updateOption, K as updateQuestion, L as updateSection, N as useBuilderState, O as useBuilderTheme, R as useDragDrop, T as useUndoRedo } from '../index-nvIvXlmc.mjs';
+export { B as BuilderState, a as BuilderStateHook, D as DEFAULT_PALETTE, b as DEFAULT_SCHEMA, c as DragItem, d as DropTarget, F as FormBuilder, f as FormBuilderProps, h as FormBuilderTheme, i as FormBuilderThemeProvider, M as MutationAction, P as PaletteCategory, j as PropertyPanelTab, Q as QUESTION_TYPE_INFO, k as QuestionTypeCategory, l as QuestionTypeInfo, S as SelectedItem, U as UndoRedoState, m as addOption, n as addQuestion, o as addSection, p as cleanPreset, q as cn, r as duplicateQuestion, s as duplicateSection, t as findQuestion, u as findSection, v as generateId, w as generateOptionId, x as generateQuestionId, y as generateSectionId, z as moveOption, A as moveQuestion, C as moveSection, E as removeOption, G as removeQuestion, H as removeSection, I as squaredrDarkPreset, J as updateOption, K as updateQuestion, L as updateSection, N as useBuilderState, O as useBuilderTheme, R as useDragDrop, T as useUndoRedo } from '../index-BHJ4mqHP.mjs';
 import 'react';
 import '@squaredr/fieldcraft-core';
 import '@squaredr/fieldcraft-react';

package/dist/form-builder/index.d.ts

@@ -1,4 +1,4 @@
-export { B as BuilderState, a as BuilderStateHook, D as DEFAULT_PALETTE, b as DEFAULT_SCHEMA, c as DragItem, d as DropTarget, F as FormBuilder, f as FormBuilderProps, h as FormBuilderTheme, i as FormBuilderThemeProvider, M as MutationAction, P as PaletteCategory, j as PropertyPanelTab, Q as QUESTION_TYPE_INFO, k as QuestionTypeCategory, l as QuestionTypeInfo, S as SelectedItem, U as UndoRedoState, m as addOption, n as addQuestion, o as addSection, p as cleanPreset, q as cn, r as duplicateQuestion, s as duplicateSection, t as findQuestion, u as findSection, v as generateId, w as generateOptionId, x as generateQuestionId, y as generateSectionId, z as moveOption, A as moveQuestion, C as moveSection, E as removeOption, G as removeQuestion, H as removeSection, I as squaredrDarkPreset, J as updateOption, K as updateQuestion, L as updateSection, N as useBuilderState, O as useBuilderTheme, R as useDragDrop, T as useUndoRedo } from '../index-nvIvXlmc.js';
+export { B as BuilderState, a as BuilderStateHook, D as DEFAULT_PALETTE, b as DEFAULT_SCHEMA, c as DragItem, d as DropTarget, F as FormBuilder, f as FormBuilderProps, h as FormBuilderTheme, i as FormBuilderThemeProvider, M as MutationAction, P as PaletteCategory, j as PropertyPanelTab, Q as QUESTION_TYPE_INFO, k as QuestionTypeCategory, l as QuestionTypeInfo, S as SelectedItem, U as UndoRedoState, m as addOption, n as addQuestion, o as addSection, p as cleanPreset, q as cn, r as duplicateQuestion, s as duplicateSection, t as findQuestion, u as findSection, v as generateId, w as generateOptionId, x as generateQuestionId, y as generateSectionId, z as moveOption, A as moveQuestion, C as moveSection, E as removeOption, G as removeQuestion, H as removeSection, I as squaredrDarkPreset, J as updateOption, K as updateQuestion, L as updateSection, N as useBuilderState, O as useBuilderTheme, R as useDragDrop, T as useUndoRedo } from '../index-BHJ4mqHP.js';
 import 'react';
 import '@squaredr/fieldcraft-core';
 import '@squaredr/fieldcraft-react';

package/dist/form-builder/index.js

@@ -777,6 +777,14 @@ var QUESTION_TYPE_INFO = {
     icon: "Phone",
     description: "US phone number input"
   },
+  phone_international: {
+    type: "phone_international",
+    label: "Intl Phone",
+    category: "text",
+    icon: "Globe2",
+    description: "Phone with country code",
+    defaultConfig: { type: "phone_international", defaultCountry: "US" }
+  },
   url: {
     type: "url",
     label: "URL",
@@ -870,6 +878,14 @@ var QUESTION_TYPE_INFO = {
     requiresOptions: true,
     defaultConfig: { type: "ranking", items: [] }
   },
+  country_select: {
+    type: "country_select",
+    label: "Country",
+    category: "selection",
+    icon: "Globe",
+    description: "Country dropdown with search",
+    defaultConfig: { type: "country_select" }
+  },
   // ── Date/Time ──
   date: {
     type: "date",
@@ -921,6 +937,14 @@ var QUESTION_TYPE_INFO = {
     description: "Canvas signature pad",
     defaultConfig: { type: "signature" }
   },
+  image_capture: {
+    type: "image_capture",
+    label: "Camera",
+    category: "media",
+    icon: "Camera",
+    description: "Capture photo from camera",
+    defaultConfig: { type: "image_capture", allowGallery: true }
+  },
   date_range: {
     type: "date_range",
     label: "Date Range",
@@ -929,6 +953,14 @@ var QUESTION_TYPE_INFO = {
     description: "Start and end date picker",
     defaultConfig: { type: "date_range" }
   },
+  appointment: {
+    type: "appointment",
+    label: "Appointment",
+    category: "datetime",
+    icon: "CalendarCheck",
+    description: "Date & time slot booking",
+    defaultConfig: { type: "appointment", duration: 30 }
+  },
   // ── Advanced ──
   repeater: {
     type: "repeater",
@@ -1000,6 +1032,14 @@ var QUESTION_TYPE_INFO = {
     description: "Hidden value from URL or static",
     defaultConfig: { type: "hidden", source: "static" }
   },
+  payment: {
+    type: "payment",
+    label: "Payment",
+    category: "advanced",
+    icon: "CreditCard",
+    description: "Collect payment via Stripe",
+    defaultConfig: { type: "payment", provider: "stripe", publicKey: "", currency: "USD" }
+  },
   // ── Structural ──
   section_header: {
     type: "section_header",
@@ -1104,7 +1144,7 @@ var DEFAULT_PALETTE = [
   {
     category: "text",
     label: "Text Input",
-    types: ["short_text", "long_text", "email", "phone", "url", "legal_name", "address"]
+    types: ["short_text", "long_text", "email", "phone", "phone_international", "url", "legal_name", "address"]
   },
   {
     category: "numeric",
@@ -1114,17 +1154,17 @@ var DEFAULT_PALETTE = [
   {
     category: "selection",
     label: "Selection",
-    types: ["single_select", "multi_select", "dropdown", "boolean", "ranking"]
+    types: ["single_select", "multi_select", "dropdown", "boolean", "ranking", "country_select"]
   },
   {
     category: "datetime",
     label: "Date & Time",
-    types: ["date", "time", "date_range"]
+    types: ["date", "time", "date_range", "appointment"]
   },
   {
     category: "media",
     label: "Media",
-    types: ["file_upload", "signature"]
+    types: ["file_upload", "signature", "image_capture"]
   },
   {
     category: "content",
@@ -1139,7 +1179,7 @@ var DEFAULT_PALETTE = [
   {
     category: "advanced",
     label: "Advanced",
-    types: ["repeater", "likert", "scoring", "matrix", "calculated", "hidden"]
+    types: ["repeater", "likert", "scoring", "matrix", "calculated", "hidden", "payment"]
   }
 ];
 

package/dist/form-builder/index.mjs

@@ -1,3 +1,3 @@
-export { DEFAULT_PALETTE, DEFAULT_SCHEMA, FormBuilder, FormBuilderThemeProvider, QUESTION_TYPE_INFO, addOption, addQuestion, addSection, cleanPreset, duplicateQuestion, duplicateSection, findQuestion, findSection, generateId, generateOptionId, generateQuestionId, generateSectionId, moveOption, moveQuestion, moveSection, removeOption, removeQuestion, removeSection, squaredrDarkPreset, updateOption, updateQuestion, updateSection, useBuilderState, useBuilderTheme, useDragDrop, useUndoRedo } from '../chunk-BYT2P3I6.mjs';
+export { DEFAULT_PALETTE, DEFAULT_SCHEMA, FormBuilder, FormBuilderThemeProvider, QUESTION_TYPE_INFO, addOption, addQuestion, addSection, cleanPreset, duplicateQuestion, duplicateSection, findQuestion, findSection, generateId, generateOptionId, generateQuestionId, generateSectionId, moveOption, moveQuestion, moveSection, removeOption, removeQuestion, removeSection, squaredrDarkPreset, updateOption, updateQuestion, updateSection, useBuilderState, useBuilderTheme, useDragDrop, useUndoRedo } from '../chunk-6LRUDBC7.mjs';
 export { cn } from '../chunk-QQ4JZGTD.mjs';
 import '../chunk-VECQKSWS.mjs';

package/dist/{index-nvIvXlmc.d.mts → index-BHJ4mqHP.d.mts}

@@ -243,12 +243,12 @@ declare const cleanPreset: FormBuilderTheme;
  * Metadata for all question types available in the Pro palette.
  * Icons are lucide-react component names (imported dynamically via ICON_MAP).
  *
- * 39 field types — general-purpose form building.
+ * 44 field types — general-purpose form building.
  * Telehealth-specific fields (15) are in @squaredr/fieldcraft-pro-telehealth.
  */
 declare const QUESTION_TYPE_INFO: Record<string, QuestionTypeInfo>;
 /**
- * Default palette layout with categories (39 Pro field types).
+ * Default palette layout with categories (44 Pro field types).
  * Telehealth fields can be appended via FormBuilder's `palette` prop.
  */
 declare const DEFAULT_PALETTE: ({

package/dist/{index-nvIvXlmc.d.ts → index-BHJ4mqHP.d.ts}

@@ -243,12 +243,12 @@ declare const cleanPreset: FormBuilderTheme;
  * Metadata for all question types available in the Pro palette.
  * Icons are lucide-react component names (imported dynamically via ICON_MAP).
  *
- * 39 field types — general-purpose form building.
+ * 44 field types — general-purpose form building.
  * Telehealth-specific fields (15) are in @squaredr/fieldcraft-pro-telehealth.
  */
 declare const QUESTION_TYPE_INFO: Record<string, QuestionTypeInfo>;
 /**
- * Default palette layout with categories (39 Pro field types).
+ * Default palette layout with categories (44 Pro field types).
  * Telehealth fields can be appended via FormBuilder's `palette` prop.
  */
 declare const DEFAULT_PALETTE: ({

package/dist/index.d.mts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, ComponentType } from 'react';
-export { B as BuilderState, a as BuilderStateHook, D as DEFAULT_PALETTE, b as DEFAULT_SCHEMA, c as DragItem, d as DropTarget, F as FormBuilder, e as FormBuilderPreviewProps, f as FormBuilderProps, g as FormBuilderTemplate, h as FormBuilderTheme, i as FormBuilderThemeProvider, M as MutationAction, P as PaletteCategory, j as PropertyPanelTab, Q as QUESTION_TYPE_INFO, k as QuestionTypeCategory, l as QuestionTypeInfo, S as SelectedItem, U as UndoRedoState, m as addOption, n as addQuestion, o as addSection, p as cleanPreset, q as cn, r as duplicateQuestion, s as duplicateSection, t as findQuestion, u as findSection, v as generateId, w as generateOptionId, x as generateQuestionId, y as generateSectionId, z as moveOption, A as moveQuestion, C as moveSection, E as removeOption, G as removeQuestion, H as removeSection, I as squaredrDarkPreset, J as updateOption, K as updateQuestion, L as updateSection, N as useBuilderState, O as useBuilderTheme, R as useDragDrop, T as useUndoRedo } from './index-nvIvXlmc.mjs';
+export { B as BuilderState, a as BuilderStateHook, D as DEFAULT_PALETTE, b as DEFAULT_SCHEMA, c as DragItem, d as DropTarget, F as FormBuilder, e as FormBuilderPreviewProps, f as FormBuilderProps, g as FormBuilderTemplate, h as FormBuilderTheme, i as FormBuilderThemeProvider, M as MutationAction, P as PaletteCategory, j as PropertyPanelTab, Q as QUESTION_TYPE_INFO, k as QuestionTypeCategory, l as QuestionTypeInfo, S as SelectedItem, U as UndoRedoState, m as addOption, n as addQuestion, o as addSection, p as cleanPreset, q as cn, r as duplicateQuestion, s as duplicateSection, t as findQuestion, u as findSection, v as generateId, w as generateOptionId, x as generateQuestionId, y as generateSectionId, z as moveOption, A as moveQuestion, C as moveSection, E as removeOption, G as removeQuestion, H as removeSection, I as squaredrDarkPreset, J as updateOption, K as updateQuestion, L as updateSection, N as useBuilderState, O as useBuilderTheme, R as useDragDrop, T as useUndoRedo } from './index-BHJ4mqHP.mjs';
+import { FieldComponent, FieldProps } from '@squaredr/fieldcraft-react';
 export { ResponseField, ResponseViewer, ResponseViewerProps, ViewMode } from './response-viewer/index.mjs';
 export { P as PREVIEW_SCHEMA, T as ThemeEditor, a as ThemeEditorInner, b as ThemeEditorProps } from './preview-schema-DFvV4y6J.mjs';
 import '@squaredr/fieldcraft-core';
-import '@squaredr/fieldcraft-react';
 import 'clsx';
 import '@dnd-kit/core';
 
@@ -56,4 +56,30 @@ declare function UnlicensedOverlay({ featureName, reason, children }: Unlicensed
  */
 declare function isProductionEnvironment(): boolean;
 
-export { FieldCraftProProvider, type LicenseContext, type LicenseStatus, UnlicensedOverlay, isProductionEnvironment, requireLicense, useLicense, validateLicense };
+/**
+ * Pro Payment Field — full Stripe integration with dual-mode support.
+ *
+ * Resolution order for getting clientSecret (first match wins):
+ * 1. `customProps.clientSecret` — direct mode (simplest)
+ * 2. `customProps.onCreatePaymentIntent` callback — Pro dev mode
+ * 3. `config.serverUrl` — SaaS mode (POST to create intent)
+ * 4. Nothing — show setup message
+ *
+ * Requires `@squaredr/paykit-react` and `@squaredr/paykit-stripe/client` as peer deps.
+ */
+declare function ProPaymentField(props: FieldProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * PRO_FIELD_OVERRIDES registry — maps field types to Pro-enhanced components.
+ * Pass this to FormEngineRenderer's `components` prop to enable Pro payment:
+ *
+ * ```tsx
+ * import { PRO_FIELD_OVERRIDES } from "@squaredr/fieldcraft-pro";
+ * <FormEngineRenderer schema={schema} components={PRO_FIELD_OVERRIDES} />
+ * ```
+ */
+declare const PRO_FIELD_OVERRIDES: {
+    readonly payment: FieldComponent;
+};
+
+export { FieldCraftProProvider, type LicenseContext, type LicenseStatus, PRO_FIELD_OVERRIDES, ProPaymentField, UnlicensedOverlay, isProductionEnvironment, requireLicense, useLicense, validateLicense };

package/dist/index.d.ts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, ComponentType } from 'react';
-export { B as BuilderState, a as BuilderStateHook, D as DEFAULT_PALETTE, b as DEFAULT_SCHEMA, c as DragItem, d as DropTarget, F as FormBuilder, e as FormBuilderPreviewProps, f as FormBuilderProps, g as FormBuilderTemplate, h as FormBuilderTheme, i as FormBuilderThemeProvider, M as MutationAction, P as PaletteCategory, j as PropertyPanelTab, Q as QUESTION_TYPE_INFO, k as QuestionTypeCategory, l as QuestionTypeInfo, S as SelectedItem, U as UndoRedoState, m as addOption, n as addQuestion, o as addSection, p as cleanPreset, q as cn, r as duplicateQuestion, s as duplicateSection, t as findQuestion, u as findSection, v as generateId, w as generateOptionId, x as generateQuestionId, y as generateSectionId, z as moveOption, A as moveQuestion, C as moveSection, E as removeOption, G as removeQuestion, H as removeSection, I as squaredrDarkPreset, J as updateOption, K as updateQuestion, L as updateSection, N as useBuilderState, O as useBuilderTheme, R as useDragDrop, T as useUndoRedo } from './index-nvIvXlmc.js';
+export { B as BuilderState, a as BuilderStateHook, D as DEFAULT_PALETTE, b as DEFAULT_SCHEMA, c as DragItem, d as DropTarget, F as FormBuilder, e as FormBuilderPreviewProps, f as FormBuilderProps, g as FormBuilderTemplate, h as FormBuilderTheme, i as FormBuilderThemeProvider, M as MutationAction, P as PaletteCategory, j as PropertyPanelTab, Q as QUESTION_TYPE_INFO, k as QuestionTypeCategory, l as QuestionTypeInfo, S as SelectedItem, U as UndoRedoState, m as addOption, n as addQuestion, o as addSection, p as cleanPreset, q as cn, r as duplicateQuestion, s as duplicateSection, t as findQuestion, u as findSection, v as generateId, w as generateOptionId, x as generateQuestionId, y as generateSectionId, z as moveOption, A as moveQuestion, C as moveSection, E as removeOption, G as removeQuestion, H as removeSection, I as squaredrDarkPreset, J as updateOption, K as updateQuestion, L as updateSection, N as useBuilderState, O as useBuilderTheme, R as useDragDrop, T as useUndoRedo } from './index-BHJ4mqHP.js';
+import { FieldComponent, FieldProps } from '@squaredr/fieldcraft-react';
 export { ResponseField, ResponseViewer, ResponseViewerProps, ViewMode } from './response-viewer/index.js';
 export { P as PREVIEW_SCHEMA, T as ThemeEditor, a as ThemeEditorInner, b as ThemeEditorProps } from './preview-schema-DFvV4y6J.js';
 import '@squaredr/fieldcraft-core';
-import '@squaredr/fieldcraft-react';
 import 'clsx';
 import '@dnd-kit/core';
 
@@ -56,4 +56,30 @@ declare function UnlicensedOverlay({ featureName, reason, children }: Unlicensed
  */
 declare function isProductionEnvironment(): boolean;
 
-export { FieldCraftProProvider, type LicenseContext, type LicenseStatus, UnlicensedOverlay, isProductionEnvironment, requireLicense, useLicense, validateLicense };
+/**
+ * Pro Payment Field — full Stripe integration with dual-mode support.
+ *
+ * Resolution order for getting clientSecret (first match wins):
+ * 1. `customProps.clientSecret` — direct mode (simplest)
+ * 2. `customProps.onCreatePaymentIntent` callback — Pro dev mode
+ * 3. `config.serverUrl` — SaaS mode (POST to create intent)
+ * 4. Nothing — show setup message
+ *
+ * Requires `@squaredr/paykit-react` and `@squaredr/paykit-stripe/client` as peer deps.
+ */
+declare function ProPaymentField(props: FieldProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * PRO_FIELD_OVERRIDES registry — maps field types to Pro-enhanced components.
+ * Pass this to FormEngineRenderer's `components` prop to enable Pro payment:
+ *
+ * ```tsx
+ * import { PRO_FIELD_OVERRIDES } from "@squaredr/fieldcraft-pro";
+ * <FormEngineRenderer schema={schema} components={PRO_FIELD_OVERRIDES} />
+ * ```
+ */
+declare const PRO_FIELD_OVERRIDES: {
+    readonly payment: FieldComponent;
+};
+
+export { FieldCraftProProvider, type LicenseContext, type LicenseStatus, PRO_FIELD_OVERRIDES, ProPaymentField, UnlicensedOverlay, isProductionEnvironment, requireLicense, useLicense, validateLicense };

package/dist/index.js

@@ -1032,6 +1032,14 @@ var QUESTION_TYPE_INFO = {
     icon: "Phone",
     description: "US phone number input"
   },
+  phone_international: {
+    type: "phone_international",
+    label: "Intl Phone",
+    category: "text",
+    icon: "Globe2",
+    description: "Phone with country code",
+    defaultConfig: { type: "phone_international", defaultCountry: "US" }
+  },
   url: {
     type: "url",
     label: "URL",
@@ -1125,6 +1133,14 @@ var QUESTION_TYPE_INFO = {
     requiresOptions: true,
     defaultConfig: { type: "ranking", items: [] }
   },
+  country_select: {
+    type: "country_select",
+    label: "Country",
+    category: "selection",
+    icon: "Globe",
+    description: "Country dropdown with search",
+    defaultConfig: { type: "country_select" }
+  },
   // ── Date/Time ──
   date: {
     type: "date",
@@ -1176,6 +1192,14 @@ var QUESTION_TYPE_INFO = {
     description: "Canvas signature pad",
     defaultConfig: { type: "signature" }
   },
+  image_capture: {
+    type: "image_capture",
+    label: "Camera",
+    category: "media",
+    icon: "Camera",
+    description: "Capture photo from camera",
+    defaultConfig: { type: "image_capture", allowGallery: true }
+  },
   date_range: {
     type: "date_range",
     label: "Date Range",
@@ -1184,6 +1208,14 @@ var QUESTION_TYPE_INFO = {
     description: "Start and end date picker",
     defaultConfig: { type: "date_range" }
   },
+  appointment: {
+    type: "appointment",
+    label: "Appointment",
+    category: "datetime",
+    icon: "CalendarCheck",
+    description: "Date & time slot booking",
+    defaultConfig: { type: "appointment", duration: 30 }
+  },
   // ── Advanced ──
   repeater: {
     type: "repeater",
@@ -1255,6 +1287,14 @@ var QUESTION_TYPE_INFO = {
     description: "Hidden value from URL or static",
     defaultConfig: { type: "hidden", source: "static" }
   },
+  payment: {
+    type: "payment",
+    label: "Payment",
+    category: "advanced",
+    icon: "CreditCard",
+    description: "Collect payment via Stripe",
+    defaultConfig: { type: "payment", provider: "stripe", publicKey: "", currency: "USD" }
+  },
   // ── Structural ──
   section_header: {
     type: "section_header",
@@ -1359,7 +1399,7 @@ var DEFAULT_PALETTE = [
   {
     category: "text",
     label: "Text Input",
-    types: ["short_text", "long_text", "email", "phone", "url", "legal_name", "address"]
+    types: ["short_text", "long_text", "email", "phone", "phone_international", "url", "legal_name", "address"]
   },
   {
     category: "numeric",
@@ -1369,17 +1409,17 @@ var DEFAULT_PALETTE = [
   {
     category: "selection",
     label: "Selection",
-    types: ["single_select", "multi_select", "dropdown", "boolean", "ranking"]
+    types: ["single_select", "multi_select", "dropdown", "boolean", "ranking", "country_select"]
   },
   {
     category: "datetime",
     label: "Date & Time",
-    types: ["date", "time", "date_range"]
+    types: ["date", "time", "date_range", "appointment"]
   },
   {
     category: "media",
     label: "Media",
-    types: ["file_upload", "signature"]
+    types: ["file_upload", "signature", "image_capture"]
   },
   {
     category: "content",
@@ -1394,7 +1434,7 @@ var DEFAULT_PALETTE = [
   {
     category: "advanced",
     label: "Advanced",
-    types: ["repeater", "likert", "scoring", "matrix", "calculated", "hidden"]
+    types: ["repeater", "likert", "scoring", "matrix", "calculated", "hidden", "payment"]
   }
 ];
 
@@ -5060,6 +5100,272 @@ var cleanPreset = {
   borderStrong: "#B9D1CF",
   textDim: "#6A7B85"
 };
+function formatCurrency(amount, currency) {
+  if (amount == null) return "";
+  try {
+    return new Intl.NumberFormat(void 0, {
+      style: "currency",
+      currency: currency ?? "USD"
+    }).format(amount);
+  } catch {
+    return `${currency ?? "USD"} ${amount.toFixed(2)}`;
+  }
+}
+function ProPaymentField(props) {
+  const { field, value, error, touched, disabled, readonly, onChange, onBlur, customProps } = props;
+  const config = field.config;
+  const current = value ?? { status: "pending" };
+  const provider = config?.provider ?? "stripe";
+  const publicKey = config?.publicKey;
+  const amount = customProps?.amount ?? config?.amount;
+  const currency = config?.currency ?? "USD";
+  const directSecret = customProps?.clientSecret;
+  const onCreateIntent = customProps?.onCreatePaymentIntent;
+  const onPaymentComplete = customProps?.onPaymentComplete;
+  const serverUrl = config?.serverUrl;
+  const [clientSecret, setClientSecret] = react.useState(directSecret);
+  const [intentLoading, setIntentLoading] = react.useState(false);
+  const [intentError, setIntentError] = react.useState(null);
+  const mode = directSecret ? "direct" : onCreateIntent ? "callback" : serverUrl ? "url" : "setup";
+  react.useEffect(() => {
+    if (directSecret) {
+      setClientSecret(directSecret);
+      return;
+    }
+    if (mode === "setup" || !amount || !publicKey) return;
+    if (clientSecret) return;
+    const fetchIntent = async () => {
+      setIntentLoading(true);
+      setIntentError(null);
+      try {
+        if (mode === "callback" && onCreateIntent) {
+          const result = await onCreateIntent({ amount, currency, provider, metadata: { fieldId: field.id } });
+          setClientSecret(result.clientSecret);
+        } else if (mode === "url" && serverUrl) {
+          const res = await fetch(serverUrl, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ amount, currency, provider, metadata: { fieldId: field.id } })
+          });
+          if (!res.ok) throw new Error(`Server error (${res.status})`);
+          const data = await res.json();
+          setClientSecret(data.clientSecret);
+        }
+      } catch (err) {
+        setIntentError(err instanceof Error ? err.message : "Failed to create payment intent");
+      } finally {
+        setIntentLoading(false);
+      }
+    };
+    fetchIntent();
+  }, [mode, amount, currency, provider, publicKey, directSecret, clientSecret, onCreateIntent, serverUrl, field.id]);
+  const handleSuccess = (chargeId) => {
+    const result = { status: "succeeded", chargeId };
+    onChange(result);
+    onPaymentComplete?.(result);
+    onBlur();
+  };
+  const handleError = (message) => {
+    const result = { status: "failed", error: message };
+    onChange(result);
+    onPaymentComplete?.(result);
+    onBlur();
+  };
+  if (!publicKey) {
+    return /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border-2 border-dashed border-input p-4 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
+      "Payment field \u2014 configure a ",
+      /* @__PURE__ */ jsxRuntime.jsx("code", { className: "bg-muted px-1 rounded text-xs", children: "publicKey" }),
+      " in the field properties panel."
+    ] }) }) });
+  }
+  if (provider !== "stripe") {
+    return /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-input bg-muted/50 p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
+      'Provider "',
+      provider,
+      '" \u2014 coming soon.'
+    ] }) }) });
+  }
+  if (current.status === "succeeded") {
+    return /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-input p-4", children: [
+      amount != null && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground mb-2", children: [
+        formatCurrency(amount, currency),
+        config?.description && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          " \u2014 ",
+          config.description
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm font-medium", style: { color: "var(--success, #22c55e)" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, width: 16, height: 16, children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          "Payment successful",
+          current.chargeId ? ` (${current.chargeId})` : ""
+        ] })
+      ] })
+    ] }) });
+  }
+  if (current.status === "failed") {
+    return /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-destructive/50 p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-destructive font-medium", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, width: 16, height: 16, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          "Payment failed",
+          current.error ? `: ${current.error}` : ""
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "mt-2 text-xs text-primary hover:underline",
+          onClick: () => {
+            onChange({ status: "pending" });
+            setClientSecret(void 0);
+          },
+          children: "Retry"
+        }
+      )
+    ] }) });
+  }
+  if (intentLoading || mode !== "setup" && mode !== "direct" && !clientSecret) {
+    return /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-input p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: "Payment" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs bg-muted px-2 py-0.5 rounded", children: provider })
+      ] }),
+      amount != null && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground mb-3", children: [
+        "Amount: ",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: formatCurrency(amount, currency) }),
+        config?.description && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          " \u2014 ",
+          config.description
+        ] })
+      ] }),
+      intentError ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: intentError }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "mt-2 text-xs text-primary hover:underline",
+            onClick: () => {
+              setIntentError(null);
+              setClientSecret(void 0);
+            },
+            children: "Retry"
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "animate-spin size-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", strokeDasharray: "60", strokeDashoffset: "20" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Preparing payment..." })
+      ] })
+    ] }) });
+  }
+  if (!clientSecret) {
+    const waitingForAmount = config?.amountField && !amount;
+    return /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-input p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: "Payment" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs bg-muted px-2 py-0.5 rounded", children: provider })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: waitingForAmount ? "Select an option above to proceed with payment." : "Provide a clientSecret via customProps, an onCreatePaymentIntent callback, or a serverUrl." })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-input p-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: "Payment" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs bg-muted px-2 py-0.5 rounded", children: provider })
+    ] }),
+    amount != null && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground mb-3", children: [
+      "Amount: ",
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: formatCurrency(amount, currency) }),
+      config?.description && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        " \u2014 ",
+        config.description
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react.Suspense,
+      {
+        fallback: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground py-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "animate-spin size-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", strokeDasharray: "60", strokeDashoffset: "20" }) }),
+          "Loading payment form..."
+        ] }),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          PayKitCheckout,
+          {
+            publicKey,
+            clientSecret,
+            amount,
+            currency,
+            disabled: disabled || readonly,
+            onSuccess: handleSuccess,
+            onError: handleError
+          }
+        )
+      }
+    )
+  ] }) });
+}
+function PayKitCheckout({
+  publicKey,
+  clientSecret,
+  amount,
+  currency,
+  disabled,
+  onSuccess,
+  onError
+}) {
+  const [PayKit, setPayKit] = react.useState(null);
+  const [loadError, setLoadError] = react.useState(null);
+  react.useEffect(() => {
+    let cancelled = false;
+    Promise.all([
+      // @ts-expect-error — optional peer dep, resolved at runtime
+      import('@squaredr/paykit-react'),
+      // @ts-expect-error — optional peer dep, resolved at runtime
+      import('@squaredr/paykit-stripe/client')
+    ]).then(([paykit, stripe]) => {
+      if (cancelled) return;
+      setPayKit({
+        Provider: paykit.PayKitProvider,
+        Form: paykit.CheckoutForm,
+        adapter: new stripe.StripeClientAdapter(publicKey)
+      });
+    }).catch((err) => {
+      if (cancelled) return;
+      setLoadError(
+        `Failed to load payment SDK. Ensure @squaredr/paykit-react and @squaredr/paykit-stripe are installed. (${err.message})`
+      );
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [publicKey]);
+  if (loadError) {
+    return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: loadError });
+  }
+  if (!PayKit) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground py-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "animate-spin size-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", strokeDasharray: "60", strokeDashoffset: "20" }) }),
+      "Loading Stripe..."
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(PayKit.Provider, { clientAdapter: PayKit.adapter, children: /* @__PURE__ */ jsxRuntime.jsx(
+    PayKit.Form,
+    {
+      clientSecret,
+      submitLabel: disabled ? "Payment disabled" : `Pay ${formatCurrency(amount, currency)}`,
+      onSuccess: (result) => onSuccess(result.chargeId),
+      onError: (err) => onError(err.message)
+    }
+  ) });
+}
+var PRO_FIELD_OVERRIDES = {
+  payment: ProPaymentField
+};
 
 // src/response-viewer/clinical-display-data.ts
 var BODY_REGION_LABELS = {
@@ -8244,7 +8550,7 @@ var ThemeEditor = requireLicense(ThemeEditorInner, "ThemeEditor");
 // src/index.ts
 if (typeof globalThis !== "undefined" && typeof globalThis.process !== "undefined" && globalThis.process.env?.NODE_ENV !== "production") {
   const _fc_banner = `
-%c FieldCraft Pro %c v1.4.0 
+%c FieldCraft Pro %c v1.5.0 
 
 %cForm Builder \xB7 Response Viewer \xB7 Theme Editor
 
@@ -8268,6 +8574,8 @@ exports.FieldCraftProProvider = FieldCraftProProvider;
 exports.FormBuilder = FormBuilder;
 exports.FormBuilderThemeProvider = FormBuilderThemeProvider;
 exports.PREVIEW_SCHEMA = PREVIEW_SCHEMA;
+exports.PRO_FIELD_OVERRIDES = PRO_FIELD_OVERRIDES;
+exports.ProPaymentField = ProPaymentField;
 exports.QUESTION_TYPE_INFO = QUESTION_TYPE_INFO;
 exports.ResponseViewer = ResponseViewer;
 exports.ThemeEditor = ThemeEditor;

package/dist/index.mjs

@@ -1,13 +1,283 @@
-export { DEFAULT_PALETTE, DEFAULT_SCHEMA, FormBuilder, FormBuilderThemeProvider, QUESTION_TYPE_INFO, addOption, addQuestion, addSection, cleanPreset, duplicateQuestion, duplicateSection, findQuestion, findSection, generateId, generateOptionId, generateQuestionId, generateSectionId, moveOption, moveQuestion, moveSection, removeOption, removeQuestion, removeSection, squaredrDarkPreset, updateOption, updateQuestion, updateSection, useBuilderState, useBuilderTheme, useDragDrop, useUndoRedo } from './chunk-BYT2P3I6.mjs';
+export { DEFAULT_PALETTE, DEFAULT_SCHEMA, FormBuilder, FormBuilderThemeProvider, QUESTION_TYPE_INFO, addOption, addQuestion, addSection, cleanPreset, duplicateQuestion, duplicateSection, findQuestion, findSection, generateId, generateOptionId, generateQuestionId, generateSectionId, moveOption, moveQuestion, moveSection, removeOption, removeQuestion, removeSection, squaredrDarkPreset, updateOption, updateQuestion, updateSection, useBuilderState, useBuilderTheme, useDragDrop, useUndoRedo } from './chunk-6LRUDBC7.mjs';
 export { ResponseViewer } from './chunk-BK4SMEW4.mjs';
 export { cn } from './chunk-QQ4JZGTD.mjs';
 export { PREVIEW_SCHEMA, ThemeEditor, ThemeEditorInner } from './chunk-22T5PY6L.mjs';
 export { FieldCraftProProvider, UnlicensedOverlay, isProductionEnvironment, requireLicense, useLicense, validateLicense } from './chunk-VECQKSWS.mjs';
+import { useState, useEffect, Suspense } from 'react';
+import { FieldWrapper } from '@squaredr/fieldcraft-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function formatCurrency(amount, currency) {
+  if (amount == null) return "";
+  try {
+    return new Intl.NumberFormat(void 0, {
+      style: "currency",
+      currency: currency ?? "USD"
+    }).format(amount);
+  } catch {
+    return `${currency ?? "USD"} ${amount.toFixed(2)}`;
+  }
+}
+function ProPaymentField(props) {
+  const { field, value, error, touched, disabled, readonly, onChange, onBlur, customProps } = props;
+  const config = field.config;
+  const current = value ?? { status: "pending" };
+  const provider = config?.provider ?? "stripe";
+  const publicKey = config?.publicKey;
+  const amount = customProps?.amount ?? config?.amount;
+  const currency = config?.currency ?? "USD";
+  const directSecret = customProps?.clientSecret;
+  const onCreateIntent = customProps?.onCreatePaymentIntent;
+  const onPaymentComplete = customProps?.onPaymentComplete;
+  const serverUrl = config?.serverUrl;
+  const [clientSecret, setClientSecret] = useState(directSecret);
+  const [intentLoading, setIntentLoading] = useState(false);
+  const [intentError, setIntentError] = useState(null);
+  const mode = directSecret ? "direct" : onCreateIntent ? "callback" : serverUrl ? "url" : "setup";
+  useEffect(() => {
+    if (directSecret) {
+      setClientSecret(directSecret);
+      return;
+    }
+    if (mode === "setup" || !amount || !publicKey) return;
+    if (clientSecret) return;
+    const fetchIntent = async () => {
+      setIntentLoading(true);
+      setIntentError(null);
+      try {
+        if (mode === "callback" && onCreateIntent) {
+          const result = await onCreateIntent({ amount, currency, provider, metadata: { fieldId: field.id } });
+          setClientSecret(result.clientSecret);
+        } else if (mode === "url" && serverUrl) {
+          const res = await fetch(serverUrl, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ amount, currency, provider, metadata: { fieldId: field.id } })
+          });
+          if (!res.ok) throw new Error(`Server error (${res.status})`);
+          const data = await res.json();
+          setClientSecret(data.clientSecret);
+        }
+      } catch (err) {
+        setIntentError(err instanceof Error ? err.message : "Failed to create payment intent");
+      } finally {
+        setIntentLoading(false);
+      }
+    };
+    fetchIntent();
+  }, [mode, amount, currency, provider, publicKey, directSecret, clientSecret, onCreateIntent, serverUrl, field.id]);
+  const handleSuccess = (chargeId) => {
+    const result = { status: "succeeded", chargeId };
+    onChange(result);
+    onPaymentComplete?.(result);
+    onBlur();
+  };
+  const handleError = (message) => {
+    const result = { status: "failed", error: message };
+    onChange(result);
+    onPaymentComplete?.(result);
+    onBlur();
+  };
+  if (!publicKey) {
+    return /* @__PURE__ */ jsx(FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsx("div", { className: "rounded-lg border-2 border-dashed border-input p-4 text-center", children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+      "Payment field \u2014 configure a ",
+      /* @__PURE__ */ jsx("code", { className: "bg-muted px-1 rounded text-xs", children: "publicKey" }),
+      " in the field properties panel."
+    ] }) }) });
+  }
+  if (provider !== "stripe") {
+    return /* @__PURE__ */ jsx(FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-input bg-muted/50 p-4", children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+      'Provider "',
+      provider,
+      '" \u2014 coming soon.'
+    ] }) }) });
+  }
+  if (current.status === "succeeded") {
+    return /* @__PURE__ */ jsx(FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-input p-4", children: [
+      amount != null && /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground mb-2", children: [
+        formatCurrency(amount, currency),
+        config?.description && /* @__PURE__ */ jsxs("span", { children: [
+          " \u2014 ",
+          config.description
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm font-medium", style: { color: "var(--success, #22c55e)" }, children: [
+        /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, width: 16, height: 16, children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          "Payment successful",
+          current.chargeId ? ` (${current.chargeId})` : ""
+        ] })
+      ] })
+    ] }) });
+  }
+  if (current.status === "failed") {
+    return /* @__PURE__ */ jsx(FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-destructive/50 p-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-destructive font-medium", children: [
+        /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, width: 16, height: 16, children: [
+          /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+          /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+        ] }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          "Payment failed",
+          current.error ? `: ${current.error}` : ""
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "mt-2 text-xs text-primary hover:underline",
+          onClick: () => {
+            onChange({ status: "pending" });
+            setClientSecret(void 0);
+          },
+          children: "Retry"
+        }
+      )
+    ] }) });
+  }
+  if (intentLoading || mode !== "setup" && mode !== "direct" && !clientSecret) {
+    return /* @__PURE__ */ jsx(FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-input p-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Payment" }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs bg-muted px-2 py-0.5 rounded", children: provider })
+      ] }),
+      amount != null && /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground mb-3", children: [
+        "Amount: ",
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: formatCurrency(amount, currency) }),
+        config?.description && /* @__PURE__ */ jsxs("span", { children: [
+          " \u2014 ",
+          config.description
+        ] })
+      ] }),
+      intentError ? /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: intentError }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "mt-2 text-xs text-primary hover:underline",
+            onClick: () => {
+              setIntentError(null);
+              setClientSecret(void 0);
+            },
+            children: "Retry"
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsx("svg", { className: "animate-spin size-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", strokeDasharray: "60", strokeDashoffset: "20" }) }),
+        /* @__PURE__ */ jsx("span", { children: "Preparing payment..." })
+      ] })
+    ] }) });
+  }
+  if (!clientSecret) {
+    const waitingForAmount = config?.amountField && !amount;
+    return /* @__PURE__ */ jsx(FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-input p-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Payment" }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs bg-muted px-2 py-0.5 rounded", children: provider })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: waitingForAmount ? "Select an option above to proceed with payment." : "Provide a clientSecret via customProps, an onCreatePaymentIntent callback, or a serverUrl." })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-input p-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Payment" }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs bg-muted px-2 py-0.5 rounded", children: provider })
+    ] }),
+    amount != null && /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground mb-3", children: [
+      "Amount: ",
+      /* @__PURE__ */ jsx("span", { className: "font-medium", children: formatCurrency(amount, currency) }),
+      config?.description && /* @__PURE__ */ jsxs("span", { children: [
+        " \u2014 ",
+        config.description
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Suspense,
+      {
+        fallback: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground py-4", children: [
+          /* @__PURE__ */ jsx("svg", { className: "animate-spin size-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", strokeDasharray: "60", strokeDashoffset: "20" }) }),
+          "Loading payment form..."
+        ] }),
+        children: /* @__PURE__ */ jsx(
+          PayKitCheckout,
+          {
+            publicKey,
+            clientSecret,
+            amount,
+            currency,
+            disabled: disabled || readonly,
+            onSuccess: handleSuccess,
+            onError: handleError
+          }
+        )
+      }
+    )
+  ] }) });
+}
+function PayKitCheckout({
+  publicKey,
+  clientSecret,
+  amount,
+  currency,
+  disabled,
+  onSuccess,
+  onError
+}) {
+  const [PayKit, setPayKit] = useState(null);
+  const [loadError, setLoadError] = useState(null);
+  useEffect(() => {
+    let cancelled = false;
+    Promise.all([
+      // @ts-expect-error — optional peer dep, resolved at runtime
+      import('@squaredr/paykit-react'),
+      // @ts-expect-error — optional peer dep, resolved at runtime
+      import('@squaredr/paykit-stripe/client')
+    ]).then(([paykit, stripe]) => {
+      if (cancelled) return;
+      setPayKit({
+        Provider: paykit.PayKitProvider,
+        Form: paykit.CheckoutForm,
+        adapter: new stripe.StripeClientAdapter(publicKey)
+      });
+    }).catch((err) => {
+      if (cancelled) return;
+      setLoadError(
+        `Failed to load payment SDK. Ensure @squaredr/paykit-react and @squaredr/paykit-stripe are installed. (${err.message})`
+      );
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [publicKey]);
+  if (loadError) {
+    return /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: loadError });
+  }
+  if (!PayKit) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground py-2", children: [
+      /* @__PURE__ */ jsx("svg", { className: "animate-spin size-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", strokeDasharray: "60", strokeDashoffset: "20" }) }),
+      "Loading Stripe..."
+    ] });
+  }
+  return /* @__PURE__ */ jsx(PayKit.Provider, { clientAdapter: PayKit.adapter, children: /* @__PURE__ */ jsx(
+    PayKit.Form,
+    {
+      clientSecret,
+      submitLabel: disabled ? "Payment disabled" : `Pay ${formatCurrency(amount, currency)}`,
+      onSuccess: (result) => onSuccess(result.chargeId),
+      onError: (err) => onError(err.message)
+    }
+  ) });
+}
+var PRO_FIELD_OVERRIDES = {
+  payment: ProPaymentField
+};
 
 // src/index.ts
 if (typeof globalThis !== "undefined" && typeof globalThis.process !== "undefined" && globalThis.process.env?.NODE_ENV !== "production") {
   const _fc_banner = `
-%c FieldCraft Pro %c v1.4.0 
+%c FieldCraft Pro %c v1.5.0 
 
 %cForm Builder \xB7 Response Viewer \xB7 Theme Editor
 
@@ -24,3 +294,5 @@ Need a license? \u2192 https://squaredr.tech/products/fieldcraft/admin-pro#prici
     "color:#6b7280"
   );
 }
+
+export { PRO_FIELD_OVERRIDES, ProPaymentField };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squaredr/fieldcraft-pro",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Pro components for FieldCraft — visual drag-and-drop Form Builder, Response Viewer, and Theme Editor for React",
   "keywords": [
     "fieldcraft",
@@ -64,14 +64,24 @@
     "tailwind-merge": "^3.6.0"
   },
   "peerDependencies": {
-    "@squaredr/fieldcraft-core": "^1.5.0",
-    "@squaredr/fieldcraft-react": "^1.4.0",
+    "@squaredr/fieldcraft-core": "^1.6.0",
+    "@squaredr/fieldcraft-react": "^1.5.0",
+    "@squaredr/paykit-react": "^1.0.0",
+    "@squaredr/paykit-stripe": "^1.0.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },
+  "peerDependenciesMeta": {
+    "@squaredr/paykit-react": {
+      "optional": true
+    },
+    "@squaredr/paykit-stripe": {
+      "optional": true
+    }
+  },
   "devDependencies": {
-    "@squaredr/fieldcraft-core": "^1.5.0",
-    "@squaredr/fieldcraft-react": "^1.4.0",
+    "@squaredr/fieldcraft-core": "^1.6.0",
+    "@squaredr/fieldcraft-react": "^1.5.0",
     "@tailwindcss/cli": "^4.3.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",