@superleapai/flow-ui 2.6.2 → 2.6.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.md +2 -2
  2. package/LICENSE +1 -1
  3. package/README.md +38 -38
  4. package/components/enum-multiselect.js +2 -2
  5. package/components/enum-select.js +2 -2
  6. package/components/file-input.js +1 -1
  7. package/core/bridge.js +4 -4
  8. package/core/crm.js +9 -9
  9. package/core/flow.js +30 -8
  10. package/core/superleapClient.js +3 -3
  11. package/dist/superleap-flow.min.js +2 -2
  12. package/index.d.ts +8 -8
  13. package/index.js +32 -32
  14. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -24,7 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
24
24
  - Phone input (international)
25
25
  - Currency input
26
26
  - File upload
27
- - Record select (Superleap integration)
27
+ - Record select (SuperLeap integration)
28
28
  - Record multi-select
29
29
  - Enumeration select/multi-select
30
30
  - Advanced components:
@@ -53,7 +53,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
53
53
  - Accessibility features
54
54
  - Responsive design
55
55
  - Dark mode compatible
56
- - Superleap client integration
56
+ - SuperLeap client integration
57
57
 
58
58
  ### Documentation
59
59
  - README.md with complete API reference
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2026 Superleap
3
+ Copyright (c) 2026 SuperLeap
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  A comprehensive, reusable design system for building multi-step forms and UI components with vanilla JavaScript and Tailwind CSS.
4
4
 
5
- **✨ Clean Architecture:** Only `FlowUI` and `Superleap` are exposed to global scope. All components are internal.
5
+ **✨ Clean Architecture:** Only `FlowUI` and `SuperLeap` are exposed to global scope. All components are internal.
6
6
 
7
7
  ## 📦 Installation
8
8
 
@@ -23,14 +23,14 @@ npm install @superleapai/flow-ui
23
23
  <body>
24
24
  <div id="app"></div>
25
25
 
26
- <!-- Single script tag - includes Superleap SDK and all components -->
26
+ <!-- Single script tag - includes SuperLeap SDK and all components -->
27
27
  <script src="https://cdn.jsdelivr.net/npm/@superleapai/flow-ui@latest/index.js"></script>
28
28
 
29
29
  <script>
30
30
  // Wait for library to be ready
31
31
  document.addEventListener('superleap-flow:ready', function() {
32
- // Initialize Superleap SDK (optional, for Record Select)
33
- Superleap.init({
32
+ // Initialize SuperLeap SDK (optional, for Record Select)
33
+ SuperLeap.init({
34
34
  // apiKey: 'YOUR_API_KEY'
35
35
  });
36
36
 
@@ -77,7 +77,7 @@ npm install @superleapai/flow-ui
77
77
 
78
78
  ## 🔌 CRM Embedded Usage (Inside iframes)
79
79
 
80
- When your flow is embedded in the Superleap CRM as an iframe, use `Superleap.connect()` to establish a secure connection. This automatically provides credentials and context without requiring hardcoded API keys.
80
+ When your flow is embedded in the SuperLeap CRM as an iframe, use `SuperLeap.connect()` to establish a secure connection. This automatically provides credentials and context without requiring hardcoded API keys.
81
81
 
82
82
  ```html
83
83
  <!DOCTYPE html>
@@ -95,7 +95,7 @@ When your flow is embedded in the Superleap CRM as an iframe, use `Superleap.con
95
95
  try {
96
96
  // Connect to CRM - SDK is auto-initialized with credentials
97
97
  // flowId must match the custom_id of your iframe component in the CRM
98
- const { context, config } = await Superleap.connect({
98
+ const { context, config } = await SuperLeap.connect({
99
99
  flowId: 'my-onboarding-flow' // Use the custom_id from your iframe component
100
100
  });
101
101
 
@@ -137,22 +137,22 @@ When your flow is embedded in the Superleap CRM as an iframe, use `Superleap.con
137
137
  const data = FlowUI.getState();
138
138
 
139
139
  // Show loading in CRM
140
- Superleap.setLoading(true);
140
+ SuperLeap.setLoading(true);
141
141
 
142
142
  try {
143
143
  // Your business logic here
144
- const sdk = Superleap.getSdk();
144
+ const sdk = SuperLeap.getSdk();
145
145
  await sdk.records.create('contacts', data);
146
146
 
147
147
  // Show success notification in CRM
148
- Superleap.toast('Profile created successfully!', 'success');
148
+ SuperLeap.toast('Profile created successfully!', 'success');
149
149
 
150
150
  // Close the form/modal
151
- Superleap.closeForm();
151
+ SuperLeap.closeForm();
152
152
  } catch (error) {
153
- Superleap.toast('Failed to create profile', 'error');
153
+ SuperLeap.toast('Failed to create profile', 'error');
154
154
  } finally {
155
- Superleap.setLoading(false);
155
+ SuperLeap.setLoading(false);
156
156
  }
157
157
  }
158
158
  });
@@ -174,7 +174,7 @@ When your flow is embedded in the Superleap CRM as an iframe, use `Superleap.con
174
174
 
175
175
  **Connect to CRM:**
176
176
  ```javascript
177
- const { context, config } = await Superleap.connect({
177
+ const { context, config } = await SuperLeap.connect({
178
178
  flowId: 'my-flow', // Required: the custom_id of your iframe component in CRM
179
179
  crmOrigin: 'https://...', // Optional: validate CRM origin
180
180
  autoInit: true, // Optional: auto-initialize SDK (default: true)
@@ -184,7 +184,7 @@ const { context, config } = await Superleap.connect({
184
184
 
185
185
  **Access CRM Context:**
186
186
  ```javascript
187
- const context = Superleap.getContext();
187
+ const context = SuperLeap.getContext();
188
188
  // {
189
189
  // orgId: string,
190
190
  // userId: string,
@@ -198,35 +198,35 @@ const context = Superleap.getContext();
198
198
  **CRM Actions:**
199
199
  ```javascript
200
200
  // Show/hide loading overlay in CRM
201
- Superleap.setLoading(true);
202
- Superleap.setLoading(false);
201
+ SuperLeap.setLoading(true);
202
+ SuperLeap.setLoading(false);
203
203
 
204
204
  // Close the current form/modal in CRM
205
- Superleap.closeForm();
205
+ SuperLeap.closeForm();
206
206
 
207
207
  // Show toast notification in CRM
208
- Superleap.toast('Success!', 'success', 3000);
209
- Superleap.toast('Error occurred', 'error');
210
- Superleap.toast('Warning message', 'warning');
211
- Superleap.toast('Info message', 'info');
208
+ SuperLeap.toast('Success!', 'success', 3000);
209
+ SuperLeap.toast('Error occurred', 'error');
210
+ SuperLeap.toast('Warning message', 'warning');
211
+ SuperLeap.toast('Info message', 'info');
212
212
 
213
213
  // Navigate to a path in CRM
214
- Superleap.navigate('/records/contacts/123');
214
+ SuperLeap.navigate('/records/contacts/123');
215
215
  ```
216
216
 
217
217
  **Custom Events (CRM ↔ Iframe Communication):**
218
218
  ```javascript
219
219
  // Send custom event to CRM
220
- Superleap.send('form-submitted', { values: {...} });
221
- Superleap.send('validation-failed', { errors: [...] });
220
+ SuperLeap.send('form-submitted', { values: {...} });
221
+ SuperLeap.send('validation-failed', { errors: [...] });
222
222
 
223
223
  // Listen for custom events from CRM
224
- const unsubscribe = Superleap.on('prefill-data', (data) => {
224
+ const unsubscribe = SuperLeap.on('prefill-data', (data) => {
225
225
  FlowUI.setState(data);
226
226
  });
227
227
 
228
228
  // Remove listener
229
- Superleap.off('prefill-data', callbackFunction);
229
+ SuperLeap.off('prefill-data', callbackFunction);
230
230
 
231
231
  // Or use unsubscribe function
232
232
  unsubscribe();
@@ -234,14 +234,14 @@ unsubscribe();
234
234
 
235
235
  **Check Connection Status:**
236
236
  ```javascript
237
- if (Superleap.isConnected()) {
237
+ if (SuperLeap.isConnected()) {
238
238
  // Connected to CRM
239
239
  }
240
240
  ```
241
241
 
242
242
  **Disconnect:**
243
243
  ```javascript
244
- Superleap.disconnect();
244
+ SuperLeap.disconnect();
245
245
  ```
246
246
 
247
247
  #### React Native WebView Support
@@ -253,7 +253,7 @@ The bridge automatically detects and supports React Native WebView environments.
253
253
  ```javascript
254
254
  // Only 2 objects in global scope
255
255
  window.FlowUI // ✅ UI Framework with all components
256
- window.Superleap // ✅ SDK Client for API integration
256
+ window.SuperLeap // ✅ SDK Client for API integration
257
257
 
258
258
  // All components are internal (not global)
259
259
  window.Toast // ❌ Not available
@@ -273,7 +273,7 @@ window.Alert // ❌ Not available
273
273
  - 📊 **Data Tables** - Sortable, searchable tables
274
274
  - 🎨 **Customizable** - Tailwind CSS for easy styling
275
275
  - 📱 **Responsive** - Mobile-first design
276
- - ✨ **Clean Architecture** - Only FlowUI and Superleap exposed globally
276
+ - ✨ **Clean Architecture** - Only FlowUI and SuperLeap exposed globally
277
277
  - 📦 **Single Script** - One file includes everything (SDK + components)
278
278
  - 🚀 **Zero Dependencies** - Pure vanilla JavaScript
279
279
 
@@ -421,7 +421,7 @@ FlowUI.createFileUpload({
421
421
  accept: '.pdf,.jpg,.png'
422
422
  })
423
423
 
424
- // Record select (requires Superleap SDK)
424
+ // Record select (requires SuperLeap SDK)
425
425
  FlowUI.createRecordSelect({
426
426
  label: 'Account',
427
427
  fieldId: 'account',
@@ -519,25 +519,25 @@ Toast.success('Hello!')
519
519
  Button.create({ text: 'Click me' })
520
520
  ```
521
521
 
522
- ### Superleap API
522
+ ### SuperLeap API
523
523
 
524
524
  ```javascript
525
525
  // Initialize SDK
526
- Superleap.init({
526
+ SuperLeap.init({
527
527
  apiKey: 'YOUR_API_KEY',
528
528
  baseUrl: 'https://app.superleap.com/api/v1'
529
529
  })
530
530
 
531
531
  // Get SDK instance
532
- const sdk = Superleap.getSdk()
532
+ const sdk = SuperLeap.getSdk()
533
533
 
534
534
  // Check availability
535
- if (Superleap.isAvailable()) {
535
+ if (SuperLeap.isAvailable()) {
536
536
  // SDK is ready
537
537
  }
538
538
 
539
539
  // Get default config
540
- const config = Superleap.getDefaultConfig()
540
+ const config = SuperLeap.getDefaultConfig()
541
541
  ```
542
542
 
543
543
  ## 🎨 Component Variants
@@ -573,13 +573,13 @@ See `example.html` for a comprehensive demonstration of all components.
573
573
  Full TypeScript definitions included:
574
574
 
575
575
  ```typescript
576
- import { FlowUI, Superleap, SuperLeapConfig } from '@superleapai/flow-ui';
576
+ import { FlowUI, SuperLeap, SuperLeapConfig } from '@superleapai/flow-ui';
577
577
 
578
578
  const config: SuperLeapConfig = {
579
579
  apiKey: 'YOUR_KEY'
580
580
  };
581
581
 
582
- Superleap.init(config);
582
+ SuperLeap.init(config);
583
583
  FlowUI.initState({ name: '' });
584
584
  ```
585
585
 
package/components/enum-multiselect.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * EnumMultiSelect Component (vanilla JS, Tailwind)
3
- * A multiselect component that fetches options from Superleap SDK based on object column metadata.
3
+ * A multiselect component that fetches options from SuperLeap SDK based on object column metadata.
4
4
  * Supports dependent fields, URL-based enums, and search functionality.
5
5
  *
6
6
  * Usage:
@@ -678,7 +678,7 @@
678
678
  !client ||
679
679
  (typeof client.isAvailable === "function" && !client.isAvailable())
680
680
  ) {
681
- error = "Superleap SDK not initialized";
681
+ error = "SuperLeap SDK not initialized";
682
682
  showError(error);
683
683
  if (onError) onError(error);
684
684
  return;
package/components/enum-select.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * EnumSelect Component (vanilla JS, Tailwind)
3
- * A select component that fetches options from Superleap SDK based on object column metadata.
3
+ * A select component that fetches options from SuperLeap SDK based on object column metadata.
4
4
  * Supports dependent fields, URL-based enums, and search functionality.
5
5
  *
6
6
  * Usage:
@@ -612,7 +612,7 @@
612
612
  !client ||
613
613
  (typeof client.isAvailable === "function" && !client.isAvailable())
614
614
  ) {
615
- error = "Superleap SDK not initialized";
615
+ error = "SuperLeap SDK not initialized";
616
616
  showError(error);
617
617
  if (onError) onError(error);
618
618
  return;
package/components/file-input.js CHANGED
@@ -88,7 +88,7 @@
88
88
 
89
89
  if (!baseUrl) {
90
90
  throw new Error(
91
- "Superleap client not initialized. Call superleapClient.init({ baseUrl, apiKey }) first.",
91
+ "SuperLeap client not initialized. Call superleapClient.init({ baseUrl, apiKey }) first.",
92
92
  );
93
93
  }
94
94
 
package/core/bridge.js CHANGED
@@ -1,12 +1,12 @@
1
1
  /**
2
- * Superleap-Flow Bridge Transport Layer
2
+ * SuperLeap-Flow Bridge Transport Layer
3
3
  *
4
4
  * Handles postMessage / MessageChannel communication between an iframe
5
5
  * (running this library) and the host CRM window. Also supports React
6
6
  * Native WebView via window.ReactNativeWebView.
7
7
  *
8
8
  * This module is transport-only — it knows nothing about CRM concepts,
9
- * the Superleap SDK, or FlowUI state. The higher-level core/crm.js
9
+ * the SuperLeap SDK, or FlowUI state. The higher-level core/crm.js
10
10
  * builds on top of it.
11
11
  *
12
12
  * Exposed temporarily as window.SuperleapBridge, then captured into
@@ -327,7 +327,7 @@
327
327
  if (!_bridgeId) {
328
328
  reject(
329
329
  new Error(
330
- "SuperleapBridge: No _bridgeId found in URL. Is this page embedded in the Superleap CRM?",
330
+ "SuperleapBridge: No _bridgeId found in URL. Is this page embedded in the SuperLeap CRM?",
331
331
  ),
332
332
  );
333
333
  return;
@@ -391,7 +391,7 @@
391
391
  var err = new Error(
392
392
  "SuperleapBridge: Handshake timed out after " +
393
393
  timeoutMs +
394
- "ms. Is this page embedded in the Superleap CRM?",
394
+ "ms. Is this page embedded in the SuperLeap CRM?",
395
395
  );
396
396
  if (_pendingReject) _pendingReject(err);
397
397
  cleanup();
package/core/crm.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
- * Superleap-Flow CRM Bridge Extensions
2
+ * SuperLeap-Flow CRM Bridge Extensions
3
3
  *
4
- * This module extends the existing Superleap object (from superleapClient.js)
4
+ * This module extends the existing SuperLeap object (from superleapClient.js)
5
5
  * with CRM bridge functionality. It wraps the low-level bridge transport
6
6
  * (core/bridge.js) and adds:
7
7
  *
@@ -14,7 +14,7 @@
14
14
  * read from the URL). User code should listen for the 'superleap-flow:ready'
15
15
  * event — by the time it fires, the SDK is initialized and context is available.
16
16
  *
17
- * This extends the existing Superleap API from superleapClient.js which
17
+ * This extends the existing SuperLeap API from superleapClient.js which
18
18
  * already has: init(), getSdk(), isAvailable(), getDefaultConfig().
19
19
  */
20
20
 
@@ -73,7 +73,7 @@
73
73
  if (c) return c;
74
74
  }
75
75
  if (global.superleapClient) return global.superleapClient;
76
- if (global.Superleap) return global.Superleap;
76
+ if (global.SuperLeap) return global.SuperLeap;
77
77
  return null;
78
78
  }
79
79
 
@@ -84,7 +84,7 @@
84
84
  /**
85
85
  * Connect to the CRM. Performs the postMessage handshake, receives
86
86
  * credentials and context, and (by default) auto-initializes the
87
- * Superleap SDK.
87
+ * SuperLeap SDK.
88
88
  *
89
89
  * If already connected, silently resolves with the existing context/config.
90
90
  * If a connection is in flight (e.g. auto-connect), returns the same promise.
@@ -92,7 +92,7 @@
92
92
  * @param {Object} [options]
93
93
  * @param {string} [options.bridgeId] – explicit bridgeId override (auto-read from URL)
94
94
  * @param {string} [options.crmOrigin] – expected CRM origin for validation
95
- * @param {boolean} [options.autoInit] – auto-call Superleap.init() (default true)
95
+ * @param {boolean} [options.autoInit] – auto-call SuperLeap.init() (default true)
96
96
  * @param {number} [options.timeout] – handshake timeout in ms (default 5000)
97
97
  * @returns {Promise<{ context: Object, config: Object }>}
98
98
  */
@@ -125,7 +125,7 @@
125
125
  _context = (payload && payload.context) || {};
126
126
  _config = (payload && payload.config) || {};
127
127
 
128
- // Auto-initialize the Superleap SDK
128
+ // Auto-initialize the SuperLeap SDK
129
129
  var sdkConfig = payload && payload.sdkConfig;
130
130
  if (opts.autoInit !== false && sdkConfig) {
131
131
  var client = getSuperLeapClient();
@@ -324,7 +324,7 @@
324
324
  }
325
325
 
326
326
  // ---------------------------------------------------------------------------
327
- // Extend the existing superleapClient (which becomes Superleap)
327
+ // Extend the existing superleapClient (which becomes SuperLeap)
328
328
  // ---------------------------------------------------------------------------
329
329
 
330
330
  // Wait for superleapClient to be defined, then extend it
@@ -347,7 +347,7 @@
347
347
  // superleapClient not loaded yet — this shouldn't happen if scripts
348
348
  // load in order, but handle it gracefully
349
349
  console.warn(
350
- "Superleap CRM Bridge: superleapClient not found. Make sure core/superleapClient.js loads before core/crm.js",
350
+ "SuperLeap CRM Bridge: superleapClient not found. Make sure core/superleapClient.js loads before core/crm.js",
351
351
  );
352
352
  }
353
353
  })(typeof window !== "undefined" ? window : this);
package/core/flow.js CHANGED
@@ -321,7 +321,16 @@
321
321
  * @returns {HTMLElement} Field element
322
322
  */
323
323
  function createSelect(config) {
324
- const { label, fieldId, options = [], required = false, onChange, showSearch = false, disabled = false, helpText = null } = config;
324
+ const {
325
+ label,
326
+ fieldId,
327
+ options = [],
328
+ required = false,
329
+ onChange,
330
+ showSearch = false,
331
+ disabled = false,
332
+ helpText = null,
333
+ } = config;
325
334
 
326
335
  const field = createFieldWrapper(label, required, helpText);
327
336
 
@@ -784,7 +793,20 @@
784
793
  * @returns {HTMLElement} Field element
785
794
  */
786
795
  function createMultiSelect(config) {
787
- const { label, fieldId, options = [], required = false, onChange, placeholder, helpText = null, variant, size, type, showSearch = false, disabled = false } = config;
796
+ const {
797
+ label,
798
+ fieldId,
799
+ options = [],
800
+ required = false,
801
+ onChange,
802
+ placeholder,
803
+ helpText = null,
804
+ variant,
805
+ size,
806
+ type,
807
+ showSearch = false,
808
+ disabled = false,
809
+ } = config;
788
810
 
789
811
  const field = createFieldWrapper(label, required, helpText);
790
812
 
@@ -918,7 +940,7 @@
918
940
  const fallback = document.createElement("div");
919
941
  fallback.className = "text-reg-13 text-typography-quaternary-text";
920
942
  fallback.textContent =
921
- "Record select requires RecordSelect component and Superleap client.";
943
+ "Record select requires RecordSelect component and SuperLeap client.";
922
944
  field.appendChild(fallback);
923
945
  return field;
924
946
  }
@@ -991,13 +1013,13 @@
991
1013
  const fallback = document.createElement("div");
992
1014
  fallback.className = "text-reg-13 text-typography-quaternary-text";
993
1015
  fallback.textContent =
994
- "Record multi-select requires RecordMultiSelect component and Superleap client.";
1016
+ "Record multi-select requires RecordMultiSelect component and SuperLeap client.";
995
1017
  field.appendChild(fallback);
996
1018
  return field;
997
1019
  }
998
1020
 
999
1021
  /**
1000
- * Create an enum select field (options from Superleap object column)
1022
+ * Create an enum select field (options from SuperLeap object column)
1001
1023
  * @param {Object} config - Configuration object
1002
1024
  * @param {string} config.label - Field label
1003
1025
  * @param {string} config.fieldId - State key for this field
@@ -1059,13 +1081,13 @@
1059
1081
  const fallback = document.createElement("div");
1060
1082
  fallback.className = "text-reg-13 text-typography-quaternary-text";
1061
1083
  fallback.textContent =
1062
- "Enum select requires EnumSelect component and Superleap client.";
1084
+ "Enum select requires EnumSelect component and SuperLeap client.";
1063
1085
  field.appendChild(fallback);
1064
1086
  return field;
1065
1087
  }
1066
1088
 
1067
1089
  /**
1068
- * Create an enum multi-select field (options from Superleap object column)
1090
+ * Create an enum multi-select field (options from SuperLeap object column)
1069
1091
  * @param {Object} config - Configuration object
1070
1092
  * @param {string} config.label - Field label
1071
1093
  * @param {string} config.fieldId - State key (stores array of values)
@@ -1130,7 +1152,7 @@
1130
1152
  const fallback = document.createElement("div");
1131
1153
  fallback.className = "text-reg-13 text-typography-quaternary-text";
1132
1154
  fallback.textContent =
1133
- "Enum multi-select requires EnumMultiSelect component and Superleap client.";
1155
+ "Enum multi-select requires EnumMultiSelect component and SuperLeap client.";
1134
1156
  field.appendChild(fallback);
1135
1157
  return field;
1136
1158
  }
package/core/superleapClient.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
- * Superleap-Flow SDK client
3
- * Thin wrapper around the Superleap SDK (createSuperLeapSDK from sdk.js or superleap.js).
2
+ * SuperLeap-Flow SDK client
3
+ * Thin wrapper around the SuperLeap SDK (createSuperLeapSDK from sdk.js or superleap.js).
4
4
  * Exposes getSdk() for record-select, file-input, etc.
5
5
  * Load the SDK script before this script; then call superleapClient.init(config).
6
6
  *
@@ -39,7 +39,7 @@
39
39
  _sdkInstance = new global.SuperLeapSDK(_config);
40
40
  } else {
41
41
  console.warn(
42
- "[superleapClient] Superleap SDK not found. Install with: npm install superleap-sdk",
42
+ "[superleapClient] SuperLeap SDK not found. Install with: npm install superleap-sdk",
43
43
  );
44
44
  _sdkInstance = null;
45
45
  }