@superleapai/flow-ui 2.5.0 → 2.5.1

package/components/checkbox-group.js

@@ -0,0 +1,209 @@
+/**
+ * CheckboxGroup Component (vanilla JS)
+ * Multi-select via checkboxes; same API as MultiSelect (options, value array, onValuesChange).
+ * Uses input.js-style variants and sizes for the group wrapper.
+ */
+
+(function (global) {
+  "use strict";
+
+  // Wrapper classes aligned with input.js variants
+  var WRAPPER_CLASS = {
+    base:
+      "group flex flex-col border-1/2 border-border-primary rounded-4 text-typography-primary-text w-full transition-all ease-in-out group-has-[:disabled]:cursor-not-allowed group-has-[:disabled]:border-border-primary group-has-[:disabled]:bg-fill-tertiary-fill-light-gray group-has-[:disabled]:text-typography-quaternary-text",
+    default:
+      "bg-fill-quarternary-fill-white hover:border-primary-base focus-within:border-primary-base",
+    error:
+      "border-error-base bg-fill-quarternary-fill-white hover:border-error-base focus-within:border-error-base",
+    warning:
+      "border-warning-base bg-fill-quarternary-fill-white hover:border-warning-base focus-within:border-warning-base",
+    success:
+      "border-success-base bg-fill-quarternary-fill-white hover:border-success-base focus-within:border-success-base",
+    borderless:
+      "border-none shadow-none rounded-0 bg-fill-quarternary-fill-white",
+    inline:
+      "border-transparent shadow-none rounded-0 bg-fill-quarternary-fill-white hover:bg-fill-tertiary-fill-light-gray focus-within:border-transparent focus:bg-fill-tertiary-fill-light-gray focus-within:bg-fill-tertiary-fill-light-gray",
+    sizeDefault: "px-12 py-6 gap-6",
+    sizeLarge: "px-12 py-8 gap-8",
+    sizeSmall: "px-12 py-4 gap-4",
+    disabled:
+      "cursor-not-allowed border-border-primary bg-fill-tertiary-fill-light-gray text-typography-quaternary-text hover:border-border-primary",
+  };
+
+  function join() {
+    return Array.prototype.filter.call(arguments, Boolean).join(" ");
+  }
+
+  function getOptionValue(opt) {
+    return opt.value !== undefined && opt.value !== null
+      ? opt.value
+      : opt.slug || opt.id;
+  }
+
+  function getOptionLabel(opt) {
+    return opt.label || opt.name || opt.display_name || opt.value;
+  }
+
+  function getDep(name) {
+    if (typeof global.FlowUI !== "undefined" && typeof global.FlowUI._getComponent === "function") {
+      var c = global.FlowUI._getComponent(name);
+      if (c) return c;
+    }
+    return global[name];
+  }
+
+  /**
+   * Create a checkbox group component (multiselect-like: multiple values, options array)
+   * @param {Object} config
+   * @param {string} [config.fieldId] - Field ID for state management
+   * @param {Array} config.options - Array of { value, label } or { slug, display_name }
+   * @param {Array} [config.value] - Current selected values (array)
+   * @param {Function} config.onValuesChange - Change handler (values: string[])
+   * @param {boolean} [config.disabled] - Whether all checkboxes are disabled
+   * @param {string} [config.variant] - 'default' | 'error' | 'warning' | 'success' | 'borderless' | 'inline'
+   * @param {string} [config.size] - 'default' | 'large' | 'small'
+   * @param {string} [config.layout] - 'vertical' | 'horizontal'
+   * @param {string} [config.className] - Extra class on wrapper
+   * @returns {HTMLElement} CheckboxGroup container element
+   */
+  function createCheckboxGroup(config) {
+    var fieldId = config.fieldId;
+    var options = config.options || [];
+    var onValuesChange = config.onValuesChange;
+    var variant = config.variant || "default";
+    var size = config.size || "default";
+    var disabled = config.disabled === true;
+    var layout = config.layout || "vertical";
+    var className = config.className || "";
+
+    var values = Array.isArray(config.value)
+      ? config.value.slice()
+      : Array.isArray(config.values)
+        ? config.values.slice()
+        : [];
+
+    var Checkbox = getDep("Checkbox");
+    if (!Checkbox || typeof Checkbox.create !== "function") {
+      throw new Error("CheckboxGroup requires the Checkbox component. Load checkbox.js before checkbox-group.js.");
+    }
+
+    var container = document.createElement("div");
+    container.setAttribute("role", "group");
+    container.setAttribute("aria-label", config.ariaLabel || "Checkbox group");
+    if (fieldId) container.setAttribute("data-field-id", fieldId);
+
+    var sizeClass = size === "large" ? WRAPPER_CLASS.sizeLarge : size === "small" ? WRAPPER_CLASS.sizeSmall : WRAPPER_CLASS.sizeDefault;
+    function applyWrapperClasses() {
+      container.className = join(
+        WRAPPER_CLASS.base,
+        disabled ? WRAPPER_CLASS.disabled : (WRAPPER_CLASS[variant] || WRAPPER_CLASS.default),
+        sizeClass,
+        layout === "horizontal" ? "flex-row flex-wrap" : "flex-col",
+        "custom-checkbox-group",
+        className
+      );
+    }
+    applyWrapperClasses();
+    container.setAttribute("data-checkbox-group-variant", variant);
+
+    function isSelected(optionValue) {
+      return values.some(function (v) {
+        return v === optionValue || String(v) === String(optionValue);
+      });
+    }
+
+    function toggleValue(optionValue) {
+      var idx = values.findIndex(function (v) {
+        return v === optionValue || String(v) === String(optionValue);
+      });
+      if (idx >= 0) {
+        values.splice(idx, 1);
+      } else {
+        values.push(optionValue);
+      }
+      if (onValuesChange) onValuesChange(values.slice());
+    }
+
+    var optionsContainer = document.createElement("div");
+    optionsContainer.className = join(
+      "flex gap-8",
+      layout === "horizontal" ? "flex-row flex-wrap" : "flex-col"
+    );
+
+    function buildOptions() {
+      optionsContainer.innerHTML = "";
+      if (options.length === 0) {
+        var empty = document.createElement("div");
+        empty.className = "!text-reg-13 text-typography-quaternary-text py-4";
+        empty.textContent = "No options available";
+        optionsContainer.appendChild(empty);
+        return;
+      }
+
+      options.forEach(function (opt, index) {
+        var optionValue = getOptionValue(opt);
+        var optionLabel = getOptionLabel(opt);
+        var optionDisabled = disabled || !!opt.disabled;
+        var checked = isSelected(optionValue);
+
+        var cb = Checkbox.create({
+          id: (fieldId || "cbg") + "-" + index,
+          name: fieldId ? fieldId + "[]" : "checkbox-group-" + index,
+          checked: checked,
+          disabled: optionDisabled,
+          label: optionLabel,
+          align: "left",
+          size: size === "large" ? "large" : size === "small" ? "small" : "default",
+          onChange: function (isChecked) {
+            if (optionDisabled) return;
+            if (isChecked) {
+              if (!values.some(function (v) { return v === optionValue || String(v) === String(optionValue); })) {
+                values.push(optionValue);
+              }
+            } else {
+              var idx = values.findIndex(function (v) {
+                return v === optionValue || String(v) === String(optionValue);
+              });
+              if (idx >= 0) values.splice(idx, 1);
+            }
+            if (onValuesChange) onValuesChange(values.slice());
+          },
+        });
+        optionsContainer.appendChild(cb);
+      });
+    }
+
+    buildOptions();
+    container.appendChild(optionsContainer);
+
+    container.updateValues = function (newValues) {
+      values = Array.isArray(newValues) ? newValues.slice() : [];
+      buildOptions();
+    };
+
+    container.setDisabled = function (isDisabled) {
+      disabled = !!isDisabled;
+      applyWrapperClasses();
+      var wrappers = optionsContainer.querySelectorAll(":scope > div");
+      for (var i = 0; i < wrappers.length; i++) {
+        if (typeof wrappers[i].setDisabled === "function") wrappers[i].setDisabled(disabled);
+      }
+    };
+
+    container.setVariant = function (v) {
+      variant = v;
+      container.setAttribute("data-checkbox-group-variant", v);
+      applyWrapperClasses();
+    };
+
+    container.getValues = function () {
+      return values.slice();
+    };
+
+    return container;
+  }
+
+  global.CheckboxGroup = {
+    create: createCheckboxGroup,
+  };
+})(typeof window !== "undefined" ? window : this);

package/components/file-input.js

@@ -40,6 +40,15 @@
     return ICONS.file;
   }
 
+  /** Resolve client: use FlowUI._getComponent when bundle has captured globals, else global.superleapClient (same as enum-select) */
+  function getClient() {
+    if (global.FlowUI && typeof global.FlowUI._getComponent === "function") {
+      var c = global.FlowUI._getComponent("superleapClient");
+      if (c) return c;
+    }
+    return global.superleapClient;
+  }
+
   /**
    * Upload file to S3
    * @param {File} file - File to upload
@@ -51,26 +60,31 @@
     formData.append("file", file, file.name);
     formData.append("is_private", String(!!isPrivate));
 
-    // Get upload URL - can be configured via global.S3_UPLOAD_URL
+    // Get upload path - can be configured via global.S3_UPLOAD_URL
     const uploadUrl = global.S3_UPLOAD_URL || "/org/file/upload";
-    const baseUrl = global.SUPERLEAP_BASE_URL || "https://app.superleap.com/api/v1";
-    const fullUrl = uploadUrl.startsWith("http") ? uploadUrl : `${baseUrl}${uploadUrl}`;
 
-    // Get API key: use FlowUI._getComponent when globals were captured (index.js), else global.superleapClient
-    let apiKey = null;
+    // Base URL and API key from superleapClient only (same pattern as enum-select)
+    var client = getClient();
+    var baseUrl = null;
+    var apiKey = null;
     try {
-      const client =
-        global.FlowUI && typeof global.FlowUI._getComponent === "function"
-          ? global.FlowUI._getComponent("superleapClient")
-          : global.superleapClient;
+      if (client && typeof client.getBaseUrl === "function") {
+        baseUrl = client.getBaseUrl();
+      }
       if (client && typeof client.getSdk === "function") {
-        const sdk = client.getSdk();
-        apiKey = sdk?.apiKey;
+        var sdk = client.getSdk();
+        apiKey = sdk ? sdk.apiKey : null;
       }
     } catch (e) {
-      console.warn("[S3FileUpload] Could not get API key:", e);
+      console.warn("[S3FileUpload] Could not get client:", e);
     }
 
+    if (!baseUrl) {
+      throw new Error("SuperLeap client not initialized. Call superleapClient.init({ baseUrl, apiKey }) first.");
+    }
+
+    const fullUrl = uploadUrl.startsWith("http") ? uploadUrl : baseUrl.replace(/\/$/, "") + (uploadUrl.startsWith("/") ? uploadUrl : "/" + uploadUrl);
+
     const headers = {};
     if (apiKey) {
       headers.Authorization = `Bearer ${apiKey}`;

package/core/flow.js

@@ -591,81 +591,6 @@
     return field;
   }
 
-  /**
-   * Create a card select field (uses CardSelect component when available, else radio fallback)
-   * @param {Object} config - Configuration object
-   * @param {string} config.label - Field label
-   * @param {string} config.fieldId - State key for this field
-   * @param {Array} config.options - Array of { value, label, description?, icon?, disabled? }
-   * @param {boolean} [config.required] - Whether field is required
-   * @param {Function} [config.onChange] - Optional change handler (receives selected value)
-   * @param {string} [config.helpText] - Optional help text for tooltip
-   * @param {boolean} [config.disabled] - Whether all cards are disabled
-   * @param {string} [config.className] - Extra CSS class on card container
-   * @returns {HTMLElement} Field wrapper element
-   */
-  function createCardSelect(config) {
-    const { label, fieldId, options = [], required = false, onChange, helpText = null, disabled = false, className } = config;
-
-    const field = createFieldWrapper(label, required, helpText);
-
-    if (getComponent("CardSelect") && getComponent("CardSelect").create) {
-      const currentValue = get(fieldId);
-      const cardSelectEl = getComponent("CardSelect").create({
-        name: fieldId,
-        options: options.map((opt) => ({
-          value: opt.value,
-          label: opt.label || opt.value,
-          description: opt.description,
-          icon: opt.icon,
-          disabled: opt.disabled,
-        })),
-        value: currentValue,
-        disabled,
-        className,
-        onChange: (value) => {
-          set(fieldId, value);
-          if (onChange) onChange(value);
-        },
-      });
-      cardSelectEl._fieldId = fieldId;
-      field.appendChild(cardSelectEl);
-      return field;
-    }
-
-    // Fallback: native radio buttons
-    const radioGroup = document.createElement("div");
-    radioGroup.className = "card-select-fallback";
-
-    options.forEach((opt) => {
-      const wrapper = document.createElement("div");
-      wrapper.className = "card-option";
-
-      const radio = document.createElement("input");
-      radio.type = "radio";
-      radio.name = fieldId;
-      radio.value = opt.value;
-      radio.id = `${fieldId}-${opt.value}`;
-      radio.checked = get(fieldId) === opt.value;
-      radio.disabled = disabled || !!opt.disabled;
-      radio.addEventListener("change", () => {
-        set(fieldId, opt.value);
-        if (onChange) { onChange(opt.value); }
-      });
-
-      const radioLabel = document.createElement("label");
-      radioLabel.htmlFor = `${fieldId}-${opt.value}`;
-      radioLabel.textContent = opt.label || opt.value;
-
-      wrapper.appendChild(radio);
-      wrapper.appendChild(radioLabel);
-      radioGroup.appendChild(wrapper);
-    });
-
-    field.appendChild(radioGroup);
-    return field;
-  }
-
   /**
    * Create a multi-select field (uses MultiSelect component when available, else checkbox group)
    * @param {Object} config - Configuration object
@@ -1422,6 +1347,40 @@
     return field;
   }
 
+  /**
+   * Create a checkbox group field (multiselect-like: options array, value array, onValuesChange)
+   * @param {Object} config - { label, fieldId, options, required, helpText, variant, size, layout, disabled, onChange }
+   * @returns {HTMLElement} Field wrapper containing checkbox group
+   */
+  function createCheckboxGroup(config) {
+    const { label, fieldId, options = [], required = false, helpText = null, variant, size, layout = "vertical", disabled = false, onChange } = config;
+
+    const field = createFieldWrapper(label, required, helpText);
+    field.setAttribute("data-field-id", fieldId);
+
+    if (getComponent("CheckboxGroup") && getComponent("CheckboxGroup").create) {
+      const currentValues = get(fieldId) || [];
+      const groupEl = getComponent("CheckboxGroup").create({
+        fieldId,
+        options,
+        value: currentValues,
+        variant: variant || "default",
+        size: size || "default",
+        layout,
+        disabled,
+        onValuesChange: (values) => {
+          set(fieldId, values);
+          if (onChange) onChange(values);
+        },
+      });
+      groupEl._fieldId = fieldId;
+      field.appendChild(groupEl);
+      return field;
+    }
+
+    return field;
+  }
+
   // ============================================================================
   // STEPPER COMPONENT
   // ============================================================================
@@ -1816,7 +1775,6 @@
     createTimePicker,
     createDateTimePicker,
     createRadioGroup,
-    createCardSelect,
     createMultiSelect,
     createRecordSelect,
     createRecordMultiSelect,
@@ -1828,6 +1786,7 @@
     createCurrency,
     createPhoneInput,
     createCheckbox,
+    createCheckboxGroup,
 
     // Button (delegates to Button component when available; resolved at call time via getComponent)
     createButton: function (config) {

package/core/superleapClient.js

@@ -137,11 +137,23 @@
     return mergeConfig({}, DEFAULT_CONFIG);
   }
 
+  /**
+   * Return the current base URL (from merged config after init).
+   * Used by file-input and other components that build API URLs.
+   *
+   * @returns {string|null} baseUrl or null if not initialized
+   */
+  function getBaseUrl() {
+    if (_config && _config.baseUrl) return _config.baseUrl;
+    return null;
+  }
+
   var superleapClient = {
     init: init,
     getSdk: getSdk,
     isAvailable: isAvailable,
     getDefaultConfig: getDefaultConfig,
+    getBaseUrl: getBaseUrl,
   };
 
   if (global) {