@superleapai/flow-ui 2.5.2 → 2.5.3

package/components/card-select.js

@@ -0,0 +1,283 @@
+/**
+ * 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);

package/core/flow.js

@@ -591,6 +591,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
@@ -1775,6 +1850,7 @@
     createTimePicker,
     createDateTimePicker,
     createRadioGroup,
+    createCardSelect,
     createMultiSelect,
     createRecordSelect,
     createRecordMultiSelect,