@superleapai/flow-ui 2.5.2 → 2.5.4

package/dist/superleap-flow.js

@@ -1,12 +1,12 @@
 /**
- * @superleapai/flow-ui v2.5.1
+ * @superleapai/flow-ui v2.5.3
  * A reusable design system for building multi-step forms
  *
  * Copyright (c) 2024-present SuperLeap
  * Licensed under MIT
  *
  * Build: development
- * Date: 2026-02-25T15:52:26.090Z
+ * Date: 2026-02-25T17:41:37.089Z
  *
  * For documentation and examples, visit:
  * https://github.com/superleap/superleap-flow
@@ -15,7 +15,7 @@
   'use strict';
 
   // ============================================
-  // File 1/41: node_modules/superleap-sdk/superleap.js
+  // File 1/42: node_modules/superleap-sdk/superleap.js
   // ============================================
 
   /**
@@ -2642,7 +2642,7 @@
 
 
   // ============================================
-  // File 2/41: core/superleapClient.js
+  // File 2/42: core/superleapClient.js
   // ============================================
 
   /**
@@ -2810,7 +2810,7 @@
 
 
   // ============================================
-  // File 3/41: core/bridge.js
+  // File 3/42: core/bridge.js
   // ============================================
 
   /**
@@ -3338,7 +3338,7 @@
 
 
   // ============================================
-  // File 4/41: core/crm.js
+  // File 4/42: core/crm.js
   // ============================================
 
   /**
@@ -3681,7 +3681,7 @@
 
 
   // ============================================
-  // File 5/41: components/label.js
+  // File 5/42: components/label.js
   // ============================================
 
   /**
@@ -3798,7 +3798,7 @@
 
 
   // ============================================
-  // File 6/41: core/flow.js
+  // File 6/42: core/flow.js
   // ============================================
 
   /**
@@ -4393,6 +4393,81 @@
       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
@@ -5577,6 +5652,7 @@
       createTimePicker,
       createDateTimePicker,
       createRadioGroup,
+      createCardSelect,
       createMultiSelect,
       createRecordSelect,
       createRecordMultiSelect,
@@ -5641,7 +5717,7 @@
 
 
   // ============================================
-  // File 7/41: components/toast.js
+  // File 7/42: components/toast.js
   // ============================================
 
   /**
@@ -5990,7 +6066,7 @@
 
 
   // ============================================
-  // File 8/41: components/alert.js
+  // File 8/42: components/alert.js
   // ============================================
 
   /**
@@ -6278,7 +6354,7 @@
 
 
   // ============================================
-  // File 9/41: components/button.js
+  // File 9/42: components/button.js
   // ============================================
 
   /**
@@ -6485,7 +6561,7 @@
 
 
   // ============================================
-  // File 10/41: components/spinner.js
+  // File 10/42: components/spinner.js
   // ============================================
 
   /**
@@ -6627,7 +6703,7 @@
 
 
   // ============================================
-  // File 11/41: components/badge.js
+  // File 11/42: components/badge.js
   // ============================================
 
   /**
@@ -6768,7 +6844,7 @@
 
 
   // ============================================
-  // File 12/41: components/avatar.js
+  // File 12/42: components/avatar.js
   // ============================================
 
   /**
@@ -6969,7 +7045,7 @@
 
 
   // ============================================
-  // File 13/41: components/icon.js
+  // File 13/42: components/icon.js
   // ============================================
 
   /**
@@ -7209,7 +7285,7 @@
 
 
   // ============================================
-  // File 14/41: components/popover.js
+  // File 14/42: components/popover.js
   // ============================================
 
   /**
@@ -7563,7 +7639,7 @@
 
 
   // ============================================
-  // File 15/41: components/select.js
+  // File 15/42: components/select.js
   // ============================================
 
   /**
@@ -8121,7 +8197,7 @@
 
 
   // ============================================
-  // File 16/41: components/enum-select.js
+  // File 16/42: components/enum-select.js
   // ============================================
 
   /**
@@ -8904,7 +8980,7 @@
 
 
   // ============================================
-  // File 17/41: components/record-select.js
+  // File 17/42: components/record-select.js
   // ============================================
 
   /**
@@ -9842,7 +9918,7 @@
 
 
   // ============================================
-  // File 18/41: components/multiselect.js
+  // File 18/42: components/multiselect.js
   // ============================================
 
   /**
@@ -10223,7 +10299,7 @@
 
 
   // ============================================
-  // File 19/41: components/enum-multiselect.js
+  // File 19/42: components/enum-multiselect.js
   // ============================================
 
   /**
@@ -11047,7 +11123,7 @@
 
 
   // ============================================
-  // File 20/41: components/record-multiselect.js
+  // File 20/42: components/record-multiselect.js
   // ============================================
 
   /**
@@ -11949,7 +12025,7 @@
 
 
   // ============================================
-  // File 21/41: components/input.js
+  // File 21/42: components/input.js
   // ============================================
 
   /**
@@ -12210,7 +12286,7 @@
 
 
   // ============================================
-  // File 22/41: components/currency.js
+  // File 22/42: components/currency.js
   // ============================================
 
   /**
@@ -12448,7 +12524,7 @@
 
 
   // ============================================
-  // File 23/41: components/textarea.js
+  // File 23/42: components/textarea.js
   // ============================================
 
   /**
@@ -12568,7 +12644,7 @@
 
 
   // ============================================
-  // File 24/41: components/richtext-editor.js
+  // File 24/42: components/richtext-editor.js
   // ============================================
 
   /**
@@ -12908,7 +12984,7 @@
 
 
   // ============================================
-  // File 25/41: components/checkbox.js
+  // File 25/42: components/checkbox.js
   // ============================================
 
   /**
@@ -13181,7 +13257,7 @@
 
 
   // ============================================
-  // File 26/41: components/checkbox-group.js
+  // File 26/42: components/checkbox-group.js
   // ============================================
 
   /**
@@ -13384,7 +13460,7 @@
 
 
   // ============================================
-  // File 27/41: components/radio-group.js
+  // File 27/42: components/radio-group.js
   // ============================================
 
   /**
@@ -13795,7 +13871,296 @@
 
 
   // ============================================
-  // File 28/41: components/enumeration.js
+  // File 28/42: components/card-select.js
+  // ============================================
+
+  /**
+   * 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) {
+
+    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 : undefined);
+
+
+
+  // ============================================
+  // File 29/42: components/enumeration.js
   // ============================================
 
   /**
@@ -14033,7 +14398,7 @@
 
 
   // ============================================
-  // File 29/41: components/time-picker.js
+  // File 30/42: components/time-picker.js
   // ============================================
 
   /**
@@ -14394,7 +14759,7 @@
 
 
   // ============================================
-  // File 30/41: components/duration/duration-utils.js
+  // File 31/42: components/duration/duration-utils.js
   // ============================================
 
   /**
@@ -14564,7 +14929,7 @@
 
 
   // ============================================
-  // File 31/41: components/duration/duration-constants.js
+  // File 32/42: components/duration/duration-constants.js
   // ============================================
 
   /**
@@ -14616,7 +14981,7 @@
 
 
   // ============================================
-  // File 32/41: components/duration/duration.js
+  // File 33/42: components/duration/duration.js
   // ============================================
 
   /**
@@ -15075,7 +15440,7 @@
 
 
   // ============================================
-  // File 33/41: components/date-time-picker/date-time-picker-utils.js
+  // File 34/42: components/date-time-picker/date-time-picker-utils.js
   // ============================================
 
   /**
@@ -15334,7 +15699,7 @@
 
 
   // ============================================
-  // File 34/41: components/date-time-picker/date-time-picker.js
+  // File 35/42: components/date-time-picker/date-time-picker.js
   // ============================================
 
   /**
@@ -15871,7 +16236,7 @@
 
 
   // ============================================
-  // File 35/41: components/phone-input/phone-utils.js
+  // File 36/42: components/phone-input/phone-utils.js
   // ============================================
 
   /**
@@ -16034,7 +16399,7 @@
 
 
   // ============================================
-  // File 36/41: components/phone-input/phone-input.js
+  // File 37/42: components/phone-input/phone-input.js
   // ============================================
 
   /**
@@ -16432,7 +16797,7 @@
 
 
   // ============================================
-  // File 37/41: components/file-input.js
+  // File 38/42: components/file-input.js
   // ============================================
 
   /**
@@ -17062,7 +17427,7 @@
 
 
   // ============================================
-  // File 38/41: components/table.js
+  // File 39/42: components/table.js
   // ============================================
 
   /**
@@ -17403,7 +17768,7 @@
 
 
   // ============================================
-  // File 39/41: components/tabs.js
+  // File 40/42: components/tabs.js
   // ============================================
 
   /**
@@ -17600,7 +17965,7 @@
 
 
   // ============================================
-  // File 40/41: components/steps.js
+  // File 41/42: components/steps.js
   // ============================================
 
   /**
@@ -17851,7 +18216,7 @@
 
 
   // ============================================
-  // File 41/41: index.js
+  // File 42/42: index.js
   // ============================================
 
   /**
@@ -17945,6 +18310,7 @@
       require("./components/checkbox.js");
       require("./components/checkbox-group.js");
       require("./components/radio-group.js");
+      require("./components/card-select.js");
       require("./components/table.js");
       require("./components/tabs.js");
       require("./components/steps.js");
@@ -18024,6 +18390,7 @@
           "Checkbox",
           "CheckboxGroup",
           "RadioGroup",
+          "CardSelect",
           "SuperleapTable",
           "Tabs",
           "Steps",
@@ -18115,7 +18482,7 @@
             },
           });
           document.dispatchEvent(event);
-          console.log("[Superleap-Flow] Library ready - v2.5.1");
+          console.log("[Superleap-Flow] Library ready - v2.5.3");
         }
 
         // Wait for DOM to be ready before dispatching event