@teamvortexsoftware/vortex-react-native 0.0.13 → 1.0.1

package/dist/components/VrtxContactsImport.js

@@ -0,0 +1,234 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VrtxContactsImport = VrtxContactsImport;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const VortexModulesContext_1 = require("../context/VortexModulesContext");
+const isWeb = react_native_1.Platform.OS === 'web';
+const ButtonWrapper = ({ children, style, gradientString, onPress, disabled, }) => {
+    // Get the gradient module and loaders from context
+    const { gradientModule, loaders } = (0, VortexModulesContext_1.useVortexModules)();
+    const styleArray = Array.isArray(style) ? style : [style];
+    // On web, use CSS gradients directly
+    if (gradientString && isWeb) {
+        return (<react_native_1.TouchableOpacity style={[...styleArray, { background: gradientString }]} onPress={onPress} disabled={disabled} activeOpacity={0.7}>
+        {children}
+      </react_native_1.TouchableOpacity>);
+    }
+    // On native, try to use gradient library if specified
+    if (gradientString && gradientModule && loaders) {
+        const GradientComponent = loaders.loadGradientComponent(gradientModule);
+        const parsed = loaders.parseCSSLinearGradient(gradientString);
+        if (GradientComponent && parsed) {
+            const points = loaders.angleToGradientPoints(parsed.angle);
+            return (<react_native_1.TouchableOpacity onPress={onPress} disabled={disabled} activeOpacity={0.7}>
+          <GradientComponent colors={parsed.colors} locations={parsed.locations} start={points.start} end={points.end} style={styleArray}>
+            {children}
+          </GradientComponent>
+        </react_native_1.TouchableOpacity>);
+        }
+    }
+    // Fallback: solid color from first gradient stop
+    const fallbackColor = gradientString && loaders ? loaders.parseGradientFirstColor(gradientString) : null;
+    const finalStyle = fallbackColor ? [...styleArray, { backgroundColor: fallbackColor }] : styleArray;
+    return (<react_native_1.TouchableOpacity style={finalStyle} onPress={onPress} disabled={disabled} activeOpacity={0.7}>
+      {children}
+    </react_native_1.TouchableOpacity>);
+};
+function VrtxContactsImport({ block, renderIcon, isNativeContactsEnabled, isGoogleContactsEnabled, handleSelectFromContacts, handleSelectFromGoogle, triggerHaptic, isEditMode = false, }) {
+    var _a;
+    // Get loaders from context
+    const { loaders } = (0, VortexModulesContext_1.useVortexModules)();
+    // Helper to get customization label - null/undefined uses default, empty string shows nothing
+    const getCustomLabel = (key, defaultLabel) => {
+        var _a, _b, _c;
+        const textContent = (_c = (_b = (_a = block === null || block === void 0 ? void 0 : block.settings) === null || _a === void 0 ? void 0 : _a.customizations) === null || _b === void 0 ? void 0 : _b[key]) === null || _c === void 0 ? void 0 : _c.textContent;
+        // If textContent is null or undefined, use default. Empty string is valid (shows no label).
+        if (textContent === null || textContent === undefined) {
+            return defaultLabel;
+        }
+        return textContent;
+    };
+    const handleSelectFromContactsWithHaptics = () => __awaiter(this, void 0, void 0, function* () {
+        yield (triggerHaptic === null || triggerHaptic === void 0 ? void 0 : triggerHaptic('light'));
+        handleSelectFromContacts();
+    });
+    const handleSelectFromGoogleWithHaptics = () => __awaiter(this, void 0, void 0, function* () {
+        yield (triggerHaptic === null || triggerHaptic === void 0 ? void 0 : triggerHaptic('light'));
+        handleSelectFromGoogle();
+    });
+    // Convert theme options to inline styles
+    const themeToStyle = (theme) => {
+        if (!(theme === null || theme === void 0 ? void 0 : theme.options) || !Array.isArray(theme.options))
+            return {};
+        const style = {};
+        theme.options.forEach((option) => {
+            if (!option.value)
+                return;
+            const { key, value } = option;
+            // Handle padding and margin with shorthand expansion
+            if (key === '--vrtx-icon-button-padding' && value) {
+                const parts = value.trim().split(/\s+/);
+                if (parts.length === 1) {
+                    style.paddingTop = style.paddingRight = style.paddingBottom = style.paddingLeft = value;
+                }
+                else if (parts.length === 2) {
+                    style.paddingTop = style.paddingBottom = parts[0];
+                    style.paddingRight = style.paddingLeft = parts[1];
+                }
+                else if (parts.length === 3) {
+                    style.paddingTop = parts[0];
+                    style.paddingRight = style.paddingLeft = parts[1];
+                    style.paddingBottom = parts[2];
+                }
+                else if (parts.length === 4) {
+                    style.paddingTop = parts[0];
+                    style.paddingRight = parts[1];
+                    style.paddingBottom = parts[2];
+                    style.paddingLeft = parts[3];
+                }
+                return;
+            }
+            if (key === '--vrtx-icon-button-margin' && value) {
+                const parts = value.trim().split(/\s+/);
+                if (parts.length === 1) {
+                    style.marginTop = style.marginRight = style.marginBottom = style.marginLeft = value;
+                }
+                else if (parts.length === 2) {
+                    style.marginTop = style.marginBottom = parts[0];
+                    style.marginRight = style.marginLeft = parts[1];
+                }
+                else if (parts.length === 3) {
+                    style.marginTop = parts[0];
+                    style.marginRight = style.marginLeft = parts[1];
+                    style.marginBottom = parts[2];
+                }
+                else if (parts.length === 4) {
+                    style.marginTop = parts[0];
+                    style.marginRight = parts[1];
+                    style.marginBottom = parts[2];
+                    style.marginLeft = parts[3];
+                }
+                return;
+            }
+            // Map CSS custom properties to React Native style properties
+            const propertyMap = {
+                '--vrtx-icon-button-color': 'color',
+                '--vrtx-icon-button-background': 'background',
+                '--vrtx-icon-button-background-color': 'backgroundColor',
+                '--vrtx-icon-button-border-radius': 'borderRadius',
+                '--vrtx-icon-button-font-size': 'fontSize',
+                '--vrtx-icon-button-font-weight': 'fontWeight',
+            };
+            const styleProperty = propertyMap[key];
+            if (styleProperty) {
+                style[styleProperty] = value;
+            }
+        });
+        return style;
+    };
+    // Extract styles from the vrtx-contacts-import block itself (this block has the theme)
+    const blockStyle = (block === null || block === void 0 ? void 0 : block.style) || {};
+    const blockThemeStyle = themeToStyle(block === null || block === void 0 ? void 0 : block.theme);
+    // Merge styles (theme styles take precedence over block.style)
+    const mergedBlockStyle = Object.assign(Object.assign({}, blockStyle), blockThemeStyle);
+    // Extract gradient string and fallback color
+    // On native, 'background' is a CSS property that doesn't work — convert solid colors to 'backgroundColor'
+    const rawBlockBackground = mergedBlockStyle.background || null;
+    const isBlockGradient = rawBlockBackground === null || rawBlockBackground === void 0 ? void 0 : rawBlockBackground.includes('gradient');
+    const blockGradientString = isBlockGradient ? rawBlockBackground : null;
+    const blockFallbackColor = isBlockGradient
+        ? loaders === null || loaders === void 0 ? void 0 : loaders.parseGradientFirstColor(rawBlockBackground)
+        : rawBlockBackground || mergedBlockStyle.backgroundColor;
+    const blockTextColor = mergedBlockStyle.color || '#333';
+    // Create a clean style object without background/backgroundColor (we'll handle those separately)
+    const cleanBlockStyle = Object.assign({}, mergedBlockStyle);
+    delete cleanBlockStyle.background;
+    delete cleanBlockStyle.backgroundColor;
+    // Extract label from block attributes
+    const label = (_a = block === null || block === void 0 ? void 0 : block.attributes) === null || _a === void 0 ? void 0 : _a.label;
+    return (<react_native_1.View key={block.id} style={styles.contactButtonsContainer}>
+      {/* Section label from block attributes */}
+      {label && (<react_native_1.Text style={styles.sectionLabel}>{label}</react_native_1.Text>)}
+      {isNativeContactsEnabled() && (<ButtonWrapper style={[
+                styles.button,
+                styles.fullButton,
+                styles.tertiaryButton,
+                cleanBlockStyle,
+                blockFallbackColor ? { backgroundColor: blockFallbackColor } : undefined,
+            ]} gradientString={blockGradientString} onPress={handleSelectFromContactsWithHaptics}>
+          <react_native_1.View style={styles.buttonIconContainer}>
+            {renderIcon({ name: 'import-contacts', size: 18, color: blockTextColor })}
+          </react_native_1.View>
+          <react_native_1.Text style={[styles.tertiaryButtonText, { color: blockTextColor }]}>
+            {getCustomLabel('importContacts', 'Add from Contacts')}
+          </react_native_1.Text>
+        </ButtonWrapper>)}
+
+      {isGoogleContactsEnabled() && (<ButtonWrapper style={[
+                styles.button,
+                styles.fullButton,
+                styles.tertiaryButton,
+                cleanBlockStyle,
+                blockFallbackColor ? { backgroundColor: blockFallbackColor } : undefined,
+            ]} gradientString={blockGradientString} onPress={handleSelectFromGoogleWithHaptics}>
+          <react_native_1.View style={styles.buttonIconContainer}>
+            {renderIcon({ name: 'google', size: 18, color: blockTextColor })}
+          </react_native_1.View>
+          <react_native_1.Text style={[styles.tertiaryButtonText, { color: blockTextColor }]}>
+            {getCustomLabel('google', 'Add from Google Contacts')}
+          </react_native_1.Text>
+        </ButtonWrapper>)}
+    </react_native_1.View>);
+}
+const styles = react_native_1.StyleSheet.create({
+    contactButtonsContainer: {
+        gap: 12,
+    },
+    sectionLabel: {
+        fontSize: 14,
+        fontWeight: '500',
+        color: '#666',
+        marginBottom: 4,
+    },
+    button: {
+        paddingVertical: 12,
+        paddingHorizontal: 16,
+        borderRadius: 8,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 8,
+    },
+    tertiaryButton: {
+        backgroundColor: '#f5f5f5',
+    },
+    fullButton: {
+        width: '100%',
+    },
+    buttonIconContainer: {
+        width: 18,
+        height: 18,
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'visible',
+    },
+    tertiaryButtonText: {
+        color: '#333',
+        fontSize: 16,
+        fontWeight: '500',
+    },
+});
+//# sourceMappingURL=VrtxContactsImport.js.map

package/dist/components/VrtxContactsImport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VrtxContactsImport.js","sourceRoot":"","sources":["../../src/components/VrtxContactsImport.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { View, Text, TouchableOpacity, StyleSheet, ViewStyle, Platform } from 'react-native';\nimport { IconRendererProps } from './InviteFormCore';\nimport { useVortexModules } from '../context/VortexModulesContext';\n\nconst isWeb = Platform.OS === 'web';\n\n// Button wrapper component that handles gradients on web, native gradient libraries, or solid color fallback\ninterface ButtonWrapperProps {\n  children: React.ReactNode;\n  style: ViewStyle | ViewStyle[];\n  gradientString: string | null;\n  onPress?: () => void;\n  disabled?: boolean;\n}\n\nconst ButtonWrapper: React.FC<ButtonWrapperProps> = ({\n  children,\n  style,\n  gradientString,\n  onPress,\n  disabled,\n}) => {\n  // Get the gradient module and loaders from context\n  const { gradientModule, loaders } = useVortexModules();\n  const styleArray = Array.isArray(style) ? style : [style];\n\n  // On web, use CSS gradients directly\n  if (gradientString && isWeb) {\n    return (\n      <TouchableOpacity\n        style={[...styleArray, { background: gradientString } as any]}\n        onPress={onPress}\n        disabled={disabled}\n        activeOpacity={0.7}\n      >\n        {children}\n      </TouchableOpacity>\n    );\n  }\n\n  // On native, try to use gradient library if specified\n  if (gradientString && gradientModule && loaders) {\n    const GradientComponent = loaders.loadGradientComponent(gradientModule);\n    const parsed = loaders.parseCSSLinearGradient(gradientString);\n\n    if (GradientComponent && parsed) {\n      const points = loaders.angleToGradientPoints(parsed.angle);\n\n      return (\n        <TouchableOpacity\n          onPress={onPress}\n          disabled={disabled}\n          activeOpacity={0.7}\n        >\n          <GradientComponent\n            colors={parsed.colors}\n            locations={parsed.locations}\n            start={points.start}\n            end={points.end}\n            style={styleArray}\n          >\n            {children}\n          </GradientComponent>\n        </TouchableOpacity>\n      );\n    }\n  }\n\n  // Fallback: solid color from first gradient stop\n  const fallbackColor = gradientString && loaders ? loaders.parseGradientFirstColor(gradientString) : null;\n  const finalStyle = fallbackColor ? [...styleArray, { backgroundColor: fallbackColor }] : styleArray;\n\n  return (\n    <TouchableOpacity\n      style={finalStyle}\n      onPress={onPress}\n      disabled={disabled}\n      activeOpacity={0.7}\n    >\n      {children}\n    </TouchableOpacity>\n  );\n};\n\nexport interface VrtxContactsImportProps {\n  block: any;\n  renderIcon: (props: IconRendererProps) => React.ReactNode;\n  isNativeContactsEnabled: () => boolean;\n  isGoogleContactsEnabled: () => boolean;\n  handleSelectFromContacts: () => void;\n  handleSelectFromGoogle: () => void;\n  triggerHaptic?: (style: 'light' | 'medium' | 'heavy') => Promise<void>;\n  isEditMode?: boolean;\n}\n\nexport function VrtxContactsImport({\n  block,\n  renderIcon,\n  isNativeContactsEnabled,\n  isGoogleContactsEnabled,\n  handleSelectFromContacts,\n  handleSelectFromGoogle,\n  triggerHaptic,\n  isEditMode = false,\n}: VrtxContactsImportProps) {\n  // Get loaders from context\n  const { loaders } = useVortexModules();\n\n  // Helper to get customization label - null/undefined uses default, empty string shows nothing\n  const getCustomLabel = (key: string, defaultLabel: string): string => {\n    const textContent = block?.settings?.customizations?.[key]?.textContent;\n    // If textContent is null or undefined, use default. Empty string is valid (shows no label).\n    if (textContent === null || textContent === undefined) {\n      return defaultLabel;\n    }\n    return textContent;\n  };\n\n  const handleSelectFromContactsWithHaptics = async () => {\n    await triggerHaptic?.('light');\n    handleSelectFromContacts();\n  };\n\n  const handleSelectFromGoogleWithHaptics = async () => {\n    await triggerHaptic?.('light');\n    handleSelectFromGoogle();\n  };\n\n  // Convert theme options to inline styles\n  const themeToStyle = (theme: any): Record<string, any> => {\n    if (!theme?.options || !Array.isArray(theme.options)) return {};\n\n    const style: Record<string, any> = {};\n\n    theme.options.forEach((option: any) => {\n      if (!option.value) return;\n\n      const { key, value } = option;\n\n      // Handle padding and margin with shorthand expansion\n      if (key === '--vrtx-icon-button-padding' && value) {\n        const parts = value.trim().split(/\\s+/);\n        if (parts.length === 1) {\n          style.paddingTop = style.paddingRight = style.paddingBottom = style.paddingLeft = value;\n        } else if (parts.length === 2) {\n          style.paddingTop = style.paddingBottom = parts[0];\n          style.paddingRight = style.paddingLeft = parts[1];\n        } else if (parts.length === 3) {\n          style.paddingTop = parts[0];\n          style.paddingRight = style.paddingLeft = parts[1];\n          style.paddingBottom = parts[2];\n        } else if (parts.length === 4) {\n          style.paddingTop = parts[0];\n          style.paddingRight = parts[1];\n          style.paddingBottom = parts[2];\n          style.paddingLeft = parts[3];\n        }\n        return;\n      }\n\n      if (key === '--vrtx-icon-button-margin' && value) {\n        const parts = value.trim().split(/\\s+/);\n        if (parts.length === 1) {\n          style.marginTop = style.marginRight = style.marginBottom = style.marginLeft = value;\n        } else if (parts.length === 2) {\n          style.marginTop = style.marginBottom = parts[0];\n          style.marginRight = style.marginLeft = parts[1];\n        } else if (parts.length === 3) {\n          style.marginTop = parts[0];\n          style.marginRight = style.marginLeft = parts[1];\n          style.marginBottom = parts[2];\n        } else if (parts.length === 4) {\n          style.marginTop = parts[0];\n          style.marginRight = parts[1];\n          style.marginBottom = parts[2];\n          style.marginLeft = parts[3];\n        }\n        return;\n      }\n\n      // Map CSS custom properties to React Native style properties\n      const propertyMap: Record<string, string> = {\n        '--vrtx-icon-button-color': 'color',\n        '--vrtx-icon-button-background': 'background',\n        '--vrtx-icon-button-background-color': 'backgroundColor',\n        '--vrtx-icon-button-border-radius': 'borderRadius',\n        '--vrtx-icon-button-font-size': 'fontSize',\n        '--vrtx-icon-button-font-weight': 'fontWeight',\n      };\n\n      const styleProperty = propertyMap[key];\n      if (styleProperty) {\n        style[styleProperty] = value;\n      }\n    });\n\n    return style;\n  };\n\n  // Extract styles from the vrtx-contacts-import block itself (this block has the theme)\n  const blockStyle = block?.style || {};\n  const blockThemeStyle = themeToStyle(block?.theme);\n\n  // Merge styles (theme styles take precedence over block.style)\n  const mergedBlockStyle = { ...blockStyle, ...blockThemeStyle };\n\n  // Extract gradient string and fallback color\n  // On native, 'background' is a CSS property that doesn't work — convert solid colors to 'backgroundColor'\n  const rawBlockBackground = mergedBlockStyle.background || null;\n  const isBlockGradient = rawBlockBackground?.includes('gradient');\n  const blockGradientString = isBlockGradient ? rawBlockBackground : null;\n  const blockFallbackColor = isBlockGradient\n    ? loaders?.parseGradientFirstColor(rawBlockBackground)\n    : rawBlockBackground || mergedBlockStyle.backgroundColor;\n\n  const blockTextColor = mergedBlockStyle.color || '#333';\n\n  // Create a clean style object without background/backgroundColor (we'll handle those separately)\n  const cleanBlockStyle = { ...mergedBlockStyle };\n  delete cleanBlockStyle.background;\n  delete cleanBlockStyle.backgroundColor;\n\n  // Extract label from block attributes\n  const label = block?.attributes?.label;\n\n  return (\n    <View key={block.id} style={styles.contactButtonsContainer}>\n      {/* Section label from block attributes */}\n      {label && (\n        <Text style={styles.sectionLabel}>{label}</Text>\n      )}\n      {isNativeContactsEnabled() && (\n        <ButtonWrapper\n          style={[\n            styles.button,\n            styles.fullButton,\n            styles.tertiaryButton,\n            cleanBlockStyle,\n            blockFallbackColor ? { backgroundColor: blockFallbackColor } : undefined,\n          ]}\n          gradientString={blockGradientString}\n          onPress={handleSelectFromContactsWithHaptics}\n        >\n          <View style={styles.buttonIconContainer}>\n            {renderIcon({ name: 'import-contacts', size: 18, color: blockTextColor })}\n          </View>\n          <Text style={[styles.tertiaryButtonText, { color: blockTextColor }]}>\n            {getCustomLabel('importContacts', 'Add from Contacts')}\n          </Text>\n        </ButtonWrapper>\n      )}\n\n      {isGoogleContactsEnabled() && (\n        <ButtonWrapper\n          style={[\n            styles.button,\n            styles.fullButton,\n            styles.tertiaryButton,\n            cleanBlockStyle,\n            blockFallbackColor ? { backgroundColor: blockFallbackColor } : undefined,\n          ]}\n          gradientString={blockGradientString}\n          onPress={handleSelectFromGoogleWithHaptics}\n        >\n          <View style={styles.buttonIconContainer}>\n            {renderIcon({ name: 'google', size: 18, color: blockTextColor })}\n          </View>\n          <Text style={[styles.tertiaryButtonText, { color: blockTextColor }]}>\n            {getCustomLabel('google', 'Add from Google Contacts')}\n          </Text>\n        </ButtonWrapper>\n      )}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  contactButtonsContainer: {\n    gap: 12,\n  },\n  sectionLabel: {\n    fontSize: 14,\n    fontWeight: '500',\n    color: '#666',\n    marginBottom: 4,\n  },\n  button: {\n    paddingVertical: 12,\n    paddingHorizontal: 16,\n    borderRadius: 8,\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: 8,\n  },\n  tertiaryButton: {\n    backgroundColor: '#f5f5f5',\n  },\n  fullButton: {\n    width: '100%',\n  },\n  buttonIconContainer: {\n    width: 18,\n    height: 18,\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'visible',\n  },\n  tertiaryButtonText: {\n    color: '#333',\n    fontSize: 16,\n    fontWeight: '500',\n  },\n});\n"]}

package/dist/components/VrtxEmailInvitations.js

@@ -0,0 +1,341 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VrtxEmailInvitations = VrtxEmailInvitations;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const isWeb = react_native_1.Platform.OS === 'web';
+// Parse CSS linear-gradient to extract first color for fallback
+function parseGradientFirstColor(gradientString) {
+    if (!gradientString || !gradientString.includes('linear-gradient')) {
+        return null;
+    }
+    const stopsRegex = /(rgba?\([^)]+\)|#[0-9a-fA-F]{3,8}|[a-z]+)\s+(\d+)%/i;
+    const match = stopsRegex.exec(gradientString);
+    if (match) {
+        return match[1].trim();
+    }
+    return null;
+}
+const ButtonWrapper = ({ children, style, gradientString, onPress, disabled, }) => {
+    const styleArray = Array.isArray(style) ? style : [style];
+    // On web, use CSS gradients directly
+    if (gradientString && isWeb) {
+        return (<react_native_1.TouchableOpacity style={[...styleArray, { background: gradientString }]} onPress={onPress} disabled={disabled} activeOpacity={0.7}>
+        {children}
+      </react_native_1.TouchableOpacity>);
+    }
+    // On native, use first color from gradient as solid background
+    const fallbackColor = gradientString ? parseGradientFirstColor(gradientString) : null;
+    const finalStyle = fallbackColor ? [...styleArray, { backgroundColor: fallbackColor }] : styleArray;
+    return (<react_native_1.TouchableOpacity style={finalStyle} onPress={onPress} disabled={disabled} activeOpacity={0.7}>
+      {children}
+    </react_native_1.TouchableOpacity>);
+};
+const ChipWrapper = ({ children, style, gradientString }) => {
+    const styleArray = Array.isArray(style) ? style : [style];
+    // On web, use CSS gradients directly
+    if (gradientString && isWeb) {
+        return <react_native_1.View style={[...styleArray, { background: gradientString }]}>{children}</react_native_1.View>;
+    }
+    // On native, use first color from gradient as solid background
+    const fallbackColor = gradientString ? parseGradientFirstColor(gradientString) : null;
+    const finalStyle = fallbackColor ? [...styleArray, { backgroundColor: fallbackColor }] : styleArray;
+    return <react_native_1.View style={finalStyle}>{children}</react_native_1.View>;
+};
+function VrtxEmailInvitations({ block, view, emails, emailInput, setEmailInput, handleEmailSubmit, handleRemoveEmail, submitButtonBlock, handleSendInvitation, triggerHaptic, loadingEmailInvite = false, sendSuccess = false, lastInvalidEmail = null, EditableWrapper, onEmailFieldFocus, onEmailFieldBlur, handleAddByEmail, renderIcon, isEditMode = false, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const inputRef = react_1.default.useRef(null);
+    // Smart email input handler: detect delimiter characters (space, comma, semicolon)
+    // and automatically convert valid emails into pills — best-practice multi-email UX.
+    // Also handles paste of multiple emails separated by delimiters.
+    const handleChangeText = react_1.default.useCallback((text) => {
+        // Check if pasted text contains multiple emails (e.g. "a@b.com, c@d.com")
+        const delimiterRegex = /[,;\s]+/;
+        if (delimiterRegex.test(text) && text.trim().includes('@')) {
+            const parts = text.split(delimiterRegex).filter(Boolean);
+            // If multiple parts, try to pill-ify all complete ones
+            if (parts.length > 1) {
+                for (const part of parts) {
+                    handleEmailSubmit(part.trim());
+                }
+                setEmailInput('');
+                return;
+            }
+        }
+        // Check if the last character typed is a delimiter
+        const lastChar = text.slice(-1);
+        const delimiters = [' ', ',', ';'];
+        if (delimiters.includes(lastChar)) {
+            const candidate = text.slice(0, -1).trim();
+            if (candidate) {
+                handleEmailSubmit(candidate);
+                triggerHaptic === null || triggerHaptic === void 0 ? void 0 : triggerHaptic('light');
+                return;
+            }
+            // If nothing before the delimiter, ignore it
+            return;
+        }
+        setEmailInput(text);
+    }, [setEmailInput, handleEmailSubmit, triggerHaptic]);
+    // Convert any pending text to a pill on blur
+    const handleBlur = react_1.default.useCallback(() => {
+        if (emailInput.trim()) {
+            handleEmailSubmit(emailInput.trim());
+        }
+        onEmailFieldBlur === null || onEmailFieldBlur === void 0 ? void 0 : onEmailFieldBlur();
+    }, [emailInput, handleEmailSubmit, onEmailFieldBlur]);
+    // Extract styles from block.style
+    const blockStyle = (block === null || block === void 0 ? void 0 : block.style) || {};
+    // Merge styles
+    const mergedStyle = Object.assign({}, blockStyle);
+    // Extract gradient string and fallback color
+    // On native, 'background' is a CSS property that doesn't work — convert solid colors to 'backgroundColor'
+    const rawBackground = mergedStyle.background || null;
+    const isGradient = rawBackground === null || rawBackground === void 0 ? void 0 : rawBackground.includes('gradient');
+    const gradientString = isGradient ? rawBackground : null;
+    const fallbackColor = isGradient
+        ? parseGradientFirstColor(rawBackground)
+        : rawBackground || mergedStyle.backgroundColor;
+    // Extract text color
+    const textColor = mergedStyle.color || '#333';
+    // Create text style
+    const textStyle = Object.assign(Object.assign({}, mergedStyle), { color: textColor });
+    // Extract submit button styles and content if provided
+    const submitButtonStyle = (submitButtonBlock === null || submitButtonBlock === void 0 ? void 0 : submitButtonBlock.style) || {};
+    const submitButtonGradientString = submitButtonStyle.background || null;
+    const submitButtonFallbackColor = submitButtonGradientString
+        ? parseGradientFirstColor(submitButtonGradientString)
+        : submitButtonStyle.backgroundColor;
+    const submitButtonTextColor = submitButtonStyle.color || '#fff';
+    const submitButtonText = (submitButtonBlock === null || submitButtonBlock === void 0 ? void 0 : submitButtonBlock.textContent) || ((_a = submitButtonBlock === null || submitButtonBlock === void 0 ? void 0 : submitButtonBlock.attributes) === null || _a === void 0 ? void 0 : _a.label) || 'Invite';
+    const handleSendInvitationWithHaptics = () => __awaiter(this, void 0, void 0, function* () {
+        if (handleSendInvitation) {
+            yield (triggerHaptic === null || triggerHaptic === void 0 ? void 0 : triggerHaptic('light'));
+            yield handleSendInvitation();
+        }
+    });
+    const handleAddByEmailWithHaptics = () => __awaiter(this, void 0, void 0, function* () {
+        if (handleAddByEmail) {
+            yield (triggerHaptic === null || triggerHaptic === void 0 ? void 0 : triggerHaptic('light'));
+            handleAddByEmail();
+        }
+    });
+    // On main view, render as a button
+    if (view === 'main') {
+        return (<react_native_1.View key={block.id} style={{
+                position: 'relative',
+            }}>
+        <ButtonWrapper style={[
+                styles.button,
+                styles.fullButton,
+                {
+                    borderWidth: 1,
+                    borderColor: '#e0e0e0',
+                },
+                mergedStyle,
+                fallbackColor ? { backgroundColor: fallbackColor } : undefined,
+            ]} gradientString={gradientString} onPress={isEditMode ? undefined : handleAddByEmailWithHaptics} disabled={isEditMode}>
+          {renderIcon && (<react_native_1.View style={styles.buttonIconContainer}>
+              {renderIcon({ name: 'email', size: 18, color: textColor })}
+            </react_native_1.View>)}
+          <react_native_1.Text style={[styles.buttonText, { color: textColor }]}>
+            {((_d = (_c = (_b = block.settings) === null || _b === void 0 ? void 0 : _b.customizations) === null || _c === void 0 ? void 0 : _c['mobile.addByEmailButton']) === null || _d === void 0 ? void 0 : _d.textContent) || ((_e = block.attributes) === null || _e === void 0 ? void 0 : _e.label) || 'Add by Email'}
+          </react_native_1.Text>
+        </ButtonWrapper>
+        {/* Circle button for edit mode to preview the email form */}
+        {isEditMode && (<react_native_1.TouchableOpacity {...{
+                'data-circle-button': 'true',
+                onMouseDown: (e) => __awaiter(this, void 0, void 0, function* () {
+                    console.log('[VrtxEmailInvitations] Circle button onMouseDown - switching to email view');
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    e._circleButtonClick = true;
+                    if (e.nativeEvent) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        e.nativeEvent._circleButtonClick = true;
+                    }
+                    e.stopPropagation();
+                    e.preventDefault();
+                    yield (triggerHaptic === null || triggerHaptic === void 0 ? void 0 : triggerHaptic('light'));
+                    if (handleAddByEmail) {
+                        console.log('[VrtxEmailInvitations] Calling handleAddByEmail');
+                        handleAddByEmail();
+                    }
+                }),
+                onClick: (e) => {
+                    console.log('[VrtxEmailInvitations] Circle button onClick - preventing default');
+                    e.stopPropagation();
+                    e.preventDefault();
+                },
+                onClickCapture: (e) => {
+                    console.log('[VrtxEmailInvitations] Circle button onClickCapture - preventing default');
+                    e.stopPropagation();
+                    e.preventDefault();
+                },
+            }} style={Object.assign({ position: 'absolute', right: 8, bottom: '8%', transform: [{ translateY: -12 }], width: 24, height: 24, borderRadius: 12, backgroundColor: '#606971ff', justifyContent: 'center', alignItems: 'center', shadowColor: '#2196F3', shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.8, shadowRadius: 8, elevation: 99999, zIndex: 99999 }, (isWeb && {
+                    boxShadow: '0 0 12px 3px rgba(118, 122, 125, 0.6)',
+                }))} activeOpacity={0.7} onPress={(e) => __awaiter(this, void 0, void 0, function* () {
+                    console.log('[VrtxEmailInvitations] Circle button pressed - switching to email view');
+                    // Mark the event so EditableWrapper ignores it
+                    if (e) {
+                        e._circleButtonClick = true;
+                        if (e.nativeEvent) {
+                            e.nativeEvent._circleButtonClick = true;
+                        }
+                    }
+                    yield (triggerHaptic === null || triggerHaptic === void 0 ? void 0 : triggerHaptic('light'));
+                    if (handleAddByEmail) {
+                        handleAddByEmail();
+                    }
+                })}>
+            <react_native_1.Text style={{ color: '#fff', fontSize: 14, fontWeight: 'bold' }}></react_native_1.Text>
+          </react_native_1.TouchableOpacity>)}
+        {/* Invisible spacer to ensure outline includes the circle button */}
+        {isEditMode && (<react_native_1.View style={{
+                    position: 'absolute',
+                    right: 0,
+                    top: 0,
+                    bottom: 0,
+                    width: 40,
+                    pointerEvents: 'none',
+                }}/>)}
+      </react_native_1.View>);
+    }
+    // On email view, render the full form
+    if (view !== 'email') {
+        return null;
+    }
+    return (<react_native_1.View key={block.id}>
+      {emails.length > 0 && (<react_native_1.View style={styles.emailChipsContainer}>
+          {emails.map((email, index) => (<ChipWrapper key={index} style={[styles.emailChip, mergedStyle, fallbackColor ? { backgroundColor: fallbackColor } : undefined]} gradientString={gradientString}>
+              <react_native_1.Text style={[styles.emailChipText, textStyle]}>{email}</react_native_1.Text>
+              <react_native_1.TouchableOpacity onPress={() => handleRemoveEmail(email)} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }} style={{ padding: 4 }}>
+                <react_native_1.Text style={[styles.emailChipRemove, { color: textColor }]}>×</react_native_1.Text>
+              </react_native_1.TouchableOpacity>
+            </ChipWrapper>))}
+        </react_native_1.View>)}
+
+      <react_native_1.TextInput ref={inputRef} style={[styles.input, lastInvalidEmail ? styles.inputInvalid : undefined]} placeholder={emails.length > 0 ? (((_h = (_g = (_f = block.settings) === null || _f === void 0 ? void 0 : _f.customizations) === null || _g === void 0 ? void 0 : _g['mobile.addAnotherPlaceholder']) === null || _h === void 0 ? void 0 : _h.textContent) || 'Add another email') : (((_l = (_k = (_j = block.settings) === null || _j === void 0 ? void 0 : _j.customizations) === null || _k === void 0 ? void 0 : _k['mobile.placeholder']) === null || _l === void 0 ? void 0 : _l.textContent) || 'Enter email addresses')} placeholderTextColor="#999" value={emailInput} onChangeText={handleChangeText} onSubmitEditing={() => {
+            var _a;
+            handleEmailSubmit();
+            // Keep keyboard open for entering more emails
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }} onFocus={onEmailFieldFocus} onBlur={handleBlur} keyboardType="email-address" autoCapitalize="none" autoCorrect={false} returnKeyType="done" blurOnSubmit={false} autoFocus={true}/>
+
+      {/* Hint text below input */}
+      {(() => {
+            var _a, _b, _c;
+            const hintText = ((_c = (_b = (_a = block.settings) === null || _a === void 0 ? void 0 : _a.customizations) === null || _b === void 0 ? void 0 : _b['mobile.hint']) === null || _c === void 0 ? void 0 : _c.textContent) || 'Separate emails with spaces or commas';
+            return hintText ? (<react_native_1.Text style={styles.hintText}>{hintText}</react_native_1.Text>) : null;
+        })()}
+
+      {/* Submit button is now rendered separately in InviteFormCore */}
+    </react_native_1.View>);
+}
+const styles = react_native_1.StyleSheet.create({
+    emailChipsContainer: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 8,
+        marginBottom: 12,
+    },
+    emailChip: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: '#f0f0f0',
+        borderRadius: 16,
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+        gap: 6,
+    },
+    emailChipText: {
+        fontSize: 14,
+        color: '#333',
+    },
+    emailChipRemove: {
+        fontSize: 20,
+        color: '#666',
+        fontWeight: '300',
+    },
+    input: {
+        borderWidth: 1,
+        borderColor: '#ddd',
+        borderRadius: 8,
+        padding: 12,
+        fontSize: 16,
+        backgroundColor: '#fff',
+        marginBottom: 4,
+    },
+    inputInvalid: {
+        borderColor: '#d9534f',
+        borderWidth: 1.5,
+    },
+    hintText: {
+        fontSize: 12,
+        color: '#999',
+        marginBottom: 12,
+        marginLeft: 4,
+    },
+    submitButtonContainer: {
+        marginTop: 16,
+    },
+    successMessageContainer: {
+        padding: 16,
+        backgroundColor: '#e8f5e9',
+        borderRadius: 8,
+        alignItems: 'center',
+    },
+    invitedText: {
+        color: '#2e7d32',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    button: {
+        paddingVertical: 12,
+        paddingHorizontal: 16,
+        borderRadius: 8,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 8,
+        backgroundColor: '#f5f5f5',
+    },
+    submitButton: {
+        backgroundColor: '#007AFF',
+    },
+    fullButton: {
+        width: '100%',
+    },
+    submitButtonText: {
+        color: '#fff',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    buttonContainer: {
+        marginBottom: 16,
+    },
+    buttonIconContainer: {
+        width: 18,
+        height: 18,
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'visible',
+    },
+    buttonText: {
+        color: '#333',
+        fontSize: 16,
+        fontWeight: '500',
+    },
+});
+//# sourceMappingURL=VrtxEmailInvitations.js.map