@superleapai/flow-ui 2.5.0 → 2.5.1

package/index.d.ts

@@ -84,6 +84,8 @@ declare module "@superleapai/flow-ui" {
     getSdk(): any;
     isAvailable(): boolean;
     getDefaultConfig(): SuperLeapConfig;
+    /** Current base URL from merged config (null if not initialized). Used by file-input and other components. */
+    getBaseUrl(): string | null;
 
     // Bridge Methods (from crm.js)
 

package/index.js

@@ -88,6 +88,7 @@
     require("./components/phone-input/phone-utils.js");
     require("./components/phone-input/phone-input.js");
     require("./components/checkbox.js");
+    require("./components/checkbox-group.js");
     require("./components/radio-group.js");
     require("./components/table.js");
     require("./components/tabs.js");
@@ -102,6 +103,7 @@
             getSdk: global.superleapClient.getSdk,
             isAvailable: global.superleapClient.isAvailable,
             getDefaultConfig: global.superleapClient.getDefaultConfig,
+            getBaseUrl: global.superleapClient.getBaseUrl,
           }
         : null;
 
@@ -117,6 +119,7 @@
             getSdk: window.superleapClient.getSdk,
             isAvailable: window.superleapClient.isAvailable,
             getDefaultConfig: window.superleapClient.getDefaultConfig,
+            getBaseUrl: window.superleapClient.getBaseUrl,
           }
         : null;
 
@@ -164,8 +167,8 @@
         "FileInput",
         "PhoneInput",
         "Checkbox",
+        "CheckboxGroup",
         "RadioGroup",
-        "CardSelect",
         "SuperleapTable",
         "Tabs",
         "Steps",
@@ -198,6 +201,7 @@
           getSdk: client.getSdk.bind(client),
           isAvailable: client.isAvailable.bind(client),
           getDefaultConfig: client.getDefaultConfig.bind(client),
+          getBaseUrl: client.getBaseUrl.bind(client),
           // Bridge methods (from crm.js)
           connect: client.connect ? client.connect.bind(client) : undefined,
           isConnected: client.isConnected

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superleapai/flow-ui",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "description": "A reusable design system for building multi-step forms with comprehensive UI components. Single file, clean globals, SDK included. Only FlowUI and SuperLeap exposed.",
   "main": "dist/superleap-flow.min.js",
   "types": "index.d.ts",

package/components/card-select.js

@@ -1,283 +0,0 @@
-/**
- * CardSelect Component (vanilla JS)
- * Full-width clickable card selection with icon, title, description, and check indicator.
- * Drop-in replacement / upgrade to RadioGroup when visual card UI is preferred.
- */
-
-(function (global) {
-  "use strict";
-
-  var COLORS = {
-    selectedBorder: "#175259",
-    unselectedBorder: "#e5e7eb",
-    selectedBg: "#f0f9f8",
-    unselectedBg: "#ffffff",
-    selectedShadow: "0px 0px 0px 2px #e9f7f5",
-    unselectedShadow: "0px 1.5px 4px -1px rgba(10,9,11,0.07)",
-    hoverBorder: "#9ca3af",
-    hoverShadow: "0px 5px 13px -5px rgba(10,9,11,0.05), 0px 2px 4px -1px rgba(10,9,11,0.02)",
-    iconSelectedBg: "#d0ede9",
-    iconUnselectedBg: "#f3f4f6",
-    iconSelectedColor: "#175259",
-    iconUnselectedColor: "#6b7280",
-    titleSelected: "#175259",
-    titleUnselected: "#111827",
-    descSelected: "#35b18b",
-    descUnselected: "#6b7280",
-    checkBorderSelected: "#175259",
-    checkBorderUnselected: "#d1d5db",
-    checkBgSelected: "#175259",
-    checkBgUnselected: "transparent",
-  };
-
-  var CHECK_ICON =
-    '<svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5l2.5 2.5L8 3" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
-
-  function join() {
-    return Array.prototype.filter.call(arguments, Boolean).join(" ");
-  }
-
-  function applyCardStyles(card, isSelected) {
-    card.style.borderColor = isSelected ? COLORS.selectedBorder : COLORS.unselectedBorder;
-    card.style.background = isSelected ? COLORS.selectedBg : COLORS.unselectedBg;
-    card.style.boxShadow = isSelected ? COLORS.selectedShadow : COLORS.unselectedShadow;
-  }
-
-  function applyIconStyles(iconWrapper, isSelected) {
-    iconWrapper.style.background = isSelected ? COLORS.iconSelectedBg : COLORS.iconUnselectedBg;
-    iconWrapper.style.color = isSelected ? COLORS.iconSelectedColor : COLORS.iconUnselectedColor;
-  }
-
-  function applyTitleStyles(titleEl, isSelected) {
-    titleEl.style.color = isSelected ? COLORS.titleSelected : COLORS.titleUnselected;
-  }
-
-  function applyDescStyles(descEl, isSelected) {
-    descEl.style.color = isSelected ? COLORS.descSelected : COLORS.descUnselected;
-  }
-
-  function applyCheckStyles(checkEl, isSelected) {
-    checkEl.style.borderColor = isSelected ? COLORS.checkBorderSelected : COLORS.checkBorderUnselected;
-    checkEl.style.background = isSelected ? COLORS.checkBgSelected : COLORS.checkBgUnselected;
-    checkEl.innerHTML = isSelected ? CHECK_ICON : "";
-  }
-
-  /**
-   * Create a card select component
-   * @param {Object} config
-   * @param {string} [config.name] - name attribute for the group (used for id generation)
-   * @param {Array} config.options - array of { value, label, description?, icon?, disabled? }
-   * @param {string} [config.defaultValue] - initial selected value
-   * @param {string} [config.value] - controlled value (takes priority over defaultValue)
-   * @param {boolean} [config.disabled] - disable all cards
-   * @param {string} [config.className] - extra class on wrapper
-   * @param {Function} [config.onChange] - change handler (receives selected value)
-   * @returns {HTMLElement} wrapper element with getValue/setValue/setDisabled API
-   */
-  function create(config) {
-    var opts = config || {};
-    var name = opts.name || "card-select-" + Math.random().toString(36).substr(2, 9);
-    var options = opts.options || [];
-    var defaultValue = opts.defaultValue;
-    var selectedValue = opts.value !== undefined ? opts.value : defaultValue;
-    var disabled = !!opts.disabled;
-    var className = opts.className || "";
-    var onChange = opts.onChange;
-
-    // Wrapper container
-    var wrapper = document.createElement("div");
-    wrapper.setAttribute("role", "radiogroup");
-    wrapper.setAttribute("dir", "ltr");
-    wrapper.className = join("flex flex-col gap-3 w-full", className);
-
-    function updateAllCards(newValue) {
-      var cards = wrapper.querySelectorAll("[data-card-value]");
-      cards.forEach(function (card) {
-        var cv = card.dataset.cardValue;
-        var active = cv === newValue;
-        applyCardStyles(card, active);
-        card.setAttribute("aria-checked", active ? "true" : "false");
-        var iw = card.querySelector("[data-icon]");
-        var titleEl = card.querySelector("[data-title]");
-        var descEl = card.querySelector("[data-desc]");
-        var checkEl = card.querySelector("[data-check]");
-        if (iw) applyIconStyles(iw, active);
-        if (titleEl) applyTitleStyles(titleEl, active);
-        if (descEl) applyDescStyles(descEl, active);
-        if (checkEl) applyCheckStyles(checkEl, active);
-      });
-    }
-
-    options.forEach(function (option, index) {
-      var optionValue = option.value;
-      var optionLabel = option.label || option.value;
-      var optionDesc = option.description || "";
-      var optionIcon = option.icon || "";
-      var optionDisabled = disabled || !!option.disabled;
-      var isSelected = optionValue === selectedValue;
-
-      // Card element
-      var card = document.createElement("div");
-      card.dataset.cardValue = optionValue;
-      card.id = name + "-card-" + index;
-      card.setAttribute("role", "radio");
-      card.setAttribute("aria-checked", isSelected ? "true" : "false");
-      card.setAttribute("tabindex", optionDisabled ? "-1" : "0");
-
-      card.style.cssText = [
-        "display: flex",
-        "align-items: flex-start",
-        "gap: 16px",
-        "padding: 18px 20px",
-        "border-radius: 10px",
-        "border: 1.5px solid " + (isSelected ? COLORS.selectedBorder : COLORS.unselectedBorder),
-        "background: " + (isSelected ? COLORS.selectedBg : COLORS.unselectedBg),
-        "cursor: " + (optionDisabled ? "not-allowed" : "pointer"),
-        "transition: border-color 0.15s, background 0.15s, box-shadow 0.15s",
-        "box-shadow: " + (isSelected ? COLORS.selectedShadow : COLORS.unselectedShadow),
-        "user-select: none",
-        optionDisabled ? "opacity: 0.5" : "",
-      ].filter(Boolean).join("; ");
-
-      // Icon wrapper (only rendered when icon is provided)
-      if (optionIcon) {
-        var iconWrapper = document.createElement("div");
-        iconWrapper.dataset.icon = "";
-        iconWrapper.style.cssText = [
-          "flex-shrink: 0",
-          "width: 44px",
-          "height: 44px",
-          "border-radius: 8px",
-          "background: " + (isSelected ? COLORS.iconSelectedBg : COLORS.iconUnselectedBg),
-          "display: flex",
-          "align-items: center",
-          "justify-content: center",
-          "color: " + (isSelected ? COLORS.iconSelectedColor : COLORS.iconUnselectedColor),
-          "transition: background 0.15s, color 0.15s",
-        ].join("; ");
-        iconWrapper.innerHTML = optionIcon;
-        card.appendChild(iconWrapper);
-      }
-
-      // Text wrapper
-      var textWrapper = document.createElement("div");
-      textWrapper.style.cssText = "display: flex; flex-direction: column; gap: 4px; flex: 1;";
-
-      var titleEl = document.createElement("span");
-      titleEl.dataset.title = "";
-      titleEl.textContent = optionLabel;
-      titleEl.style.cssText = [
-        "font-size: 14px",
-        "font-weight: 600",
-        "color: " + (isSelected ? COLORS.titleSelected : COLORS.titleUnselected),
-        "line-height: 1.4",
-        "transition: color 0.15s",
-      ].join("; ");
-      textWrapper.appendChild(titleEl);
-
-      if (optionDesc) {
-        var descEl = document.createElement("span");
-        descEl.dataset.desc = "";
-        descEl.textContent = optionDesc;
-        descEl.style.cssText = [
-          "font-size: 12px",
-          "color: " + (isSelected ? COLORS.descSelected : COLORS.descUnselected),
-          "line-height: 1.5",
-          "transition: color 0.15s",
-        ].join("; ");
-        textWrapper.appendChild(descEl);
-      }
-
-      card.appendChild(textWrapper);
-
-      // Check indicator (radio circle in top-right)
-      var checkEl = document.createElement("div");
-      checkEl.dataset.check = "";
-      checkEl.style.cssText = [
-        "flex-shrink: 0",
-        "width: 18px",
-        "height: 18px",
-        "border-radius: 50%",
-        "border: 2px solid " + (isSelected ? COLORS.checkBorderSelected : COLORS.checkBorderUnselected),
-        "background: " + (isSelected ? COLORS.checkBgSelected : COLORS.checkBgUnselected),
-        "display: flex",
-        "align-items: center",
-        "justify-content: center",
-        "margin-top: 2px",
-        "transition: all 0.15s",
-      ].join("; ");
-      if (isSelected) {
-        checkEl.innerHTML = CHECK_ICON;
-      }
-      card.appendChild(checkEl);
-
-      // Hover and focus styles
-      if (!optionDisabled) {
-        card.addEventListener("mouseenter", function () {
-          if (card.getAttribute("aria-checked") !== "true") {
-            card.style.borderColor = COLORS.hoverBorder;
-            card.style.boxShadow = COLORS.hoverShadow;
-          }
-        });
-        card.addEventListener("mouseleave", function () {
-          if (card.getAttribute("aria-checked") !== "true") {
-            card.style.borderColor = COLORS.unselectedBorder;
-            card.style.boxShadow = COLORS.unselectedShadow;
-          }
-        });
-
-        // Click handler
-        card.addEventListener("click", function () {
-          if (optionDisabled || disabled) return;
-          selectedValue = optionValue;
-          updateAllCards(selectedValue);
-          if (typeof onChange === "function") {
-            onChange(selectedValue);
-          }
-        });
-
-        // Keyboard support
-        card.addEventListener("keydown", function (e) {
-          if (optionDisabled || disabled) return;
-          if (e.key === " " || e.key === "Enter") {
-            e.preventDefault();
-            card.click();
-          }
-        });
-      }
-
-      wrapper.appendChild(card);
-    });
-
-    // Public API
-    wrapper.getValue = function () {
-      return selectedValue !== undefined ? selectedValue : null;
-    };
-
-    wrapper.setValue = function (newValue) {
-      selectedValue = newValue;
-      updateAllCards(newValue);
-    };
-
-    wrapper.setDisabled = function (isDisabled) {
-      disabled = !!isDisabled;
-      wrapper.querySelectorAll("[data-card-value]").forEach(function (card) {
-        card.style.cursor = disabled ? "not-allowed" : "pointer";
-        card.style.opacity = disabled ? "0.5" : "1";
-        card.setAttribute("tabindex", disabled ? "-1" : "0");
-      });
-    };
-
-    return wrapper;
-  }
-
-  var CardSelect = {
-    create: create,
-  };
-
-  if (typeof module !== "undefined" && module.exports) {
-    module.exports = CardSelect;
-  } else {
-    global.CardSelect = CardSelect;
-  }
-})(typeof window !== "undefined" ? window : this);