@superleapai/flow-ui 1.0.0

package/components/select.js

@@ -0,0 +1,544 @@
+/**
+ * Select Component (vanilla JS, Tailwind)
+ * Design-system select; ref: Radix/cva select trigger, content, item variants.
+ */
+
+(function (global) {
+  "use strict";
+
+  var CHEVRON_SVG =
+    '<svg width="16" height="16" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"/></svg>';
+
+  var X_SVG =
+    '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6l12 12"/></svg>';
+
+  function triggerClasses(variant, size, disabled, placeholder, hasClear) {
+    var v = variant || "default";
+    var base =
+      "w-full items-center justify-between rounded-4 border-1/2 bg-fill-quarternary-fill-white text-typography-primary-text !text-reg-13 focus:outline-none flex h-full truncate hover:cursor-pointer ";
+    var variantClasses = {
+      default:
+        "border-border-primary hover:border-primary-border focus:border-1/2 focus:border-primary-border",
+      error:
+        "border-error-border hover:border-error-border-hover focus:border-1/2 focus:border-error-border-hover",
+      warning:
+        "border-warning-border hover:border-warning-border-hover focus:border-1/2 focus:border-warning-border-hover",
+      borderless: "border-none shadow-none rounded-0 bg-fill-quarternary-fill-white",
+      inline:
+        "focus:border-transparent border border-transparent shadow-none rounded-0 bg-fill-quarternary-fill-white hover:bg-fill-tertiary-fill-light-gray hover:border-transparent",
+    };
+    var sizeClasses = {
+      default: "px-12 py-6",
+      large: "px-12 py-8",
+      small: "px-8 py-4",
+    };
+    var placeholderClass = placeholder ? " text-typography-quaternary-text" : "";
+    var disabledClass = disabled
+      ? " pointer-events-none cursor-not-allowed bg-fill-tertiary-fill-light-gray text-typography-quaternary-text hover:border-border-primary"
+      : "";
+    var clearPadding = hasClear ? " pr-24" : "";
+    return (
+      base +
+      (variantClasses[v] || variantClasses.default) +
+      " " +
+      (sizeClasses[size] || sizeClasses.default) +
+      placeholderClass +
+      disabledClass +
+      clearPadding
+    );
+  }
+
+  function join() {
+    return Array.prototype.filter.call(arguments, Boolean).join(" ");
+  }
+
+  /**
+   * Create a custom select component
+   * @param {Object} config
+   * @param {string} config.fieldId - Field ID for state management
+   * @param {Array} config.options - Array of { value, label } or { slug, display_name } objects
+   * @param {string} config.placeholder - Placeholder text
+   * @param {string} config.value - Current value
+   * @param {Function} config.onChange - Change handler
+   * @param {boolean} config.disabled - Whether select is disabled
+   * @param {string} [config.variant] - 'default' | 'error' | 'warning' | 'borderless' | 'inline'
+   * @param {string} [config.size] - 'default' | 'large' | 'small'
+   * @param {boolean} [config.canClear] - Show clear button when value is set
+   * @param {Function} [config.onClear] - Called when clear is clicked
+   * @returns {HTMLElement} Select container element
+   */
+  function createCustomSelect(config) {
+    var fieldId = config.fieldId;
+    var options = config.options || [];
+    var placeholder = config.placeholder || "Select an option";
+    var onChange = config.onChange;
+    var variant = config.variant || "default";
+    var size = config.size || "default";
+    var canClear = !!config.canClear;
+    var onClear = config.onClear;
+
+    var disabled = config.disabled === true;
+    var value =
+      config.value !== undefined && config.value !== null ? config.value : "";
+
+    var selectedOption = options.find(function (opt) {
+      var optValue =
+        opt.value !== undefined && opt.value !== null
+          ? opt.value
+          : opt.slug || opt.id;
+      return optValue === value;
+    });
+    var displayText = selectedOption
+      ? selectedOption.label || selectedOption.name || selectedOption.display_name || selectedOption.value
+      : placeholder;
+
+    var container = document.createElement("div");
+    container.className = "custom-select relative w-full group";
+    container.setAttribute("data-field-id", fieldId);
+
+    var triggerWrapper = document.createElement("span");
+    triggerWrapper.className =
+      "select-trigger-wrapper relative flex w-full items-center justify-between gap-8";
+
+    var trigger = document.createElement("button");
+    trigger.type = "button";
+    trigger.className = triggerClasses(variant, size, disabled, !value, canClear && !!value && !disabled);
+    trigger.disabled = disabled;
+    trigger.setAttribute("aria-haspopup", "listbox");
+    trigger.setAttribute("aria-expanded", "false");
+    trigger.setAttribute("aria-label", placeholder);
+
+    var triggerText = document.createElement("div");
+    triggerText.className = "truncate text-inherit";
+    triggerText.textContent = displayText;
+    trigger.appendChild(triggerText);
+
+    var chevron = document.createElement("span");
+    chevron.className =
+      "ml-4 box-content flex size-16 items-center justify-center shrink-0 transition-transform duration-200 group-[.open]:rotate-180";
+    chevron.innerHTML = CHEVRON_SVG;
+    chevron.setAttribute("aria-hidden", "true");
+    
+    var showChevron = variant !== "inline" || !value;
+    if (showChevron) {
+      trigger.appendChild(chevron);
+    }
+
+    triggerWrapper.appendChild(trigger);
+
+    // Create clear button (will be shown/hidden dynamically)
+    var clearBtn = document.createElement("button");
+    clearBtn.type = "button";
+    clearBtn.className =
+      "rounded-full absolute right-12 top-1/2 -translate-y-1/2 bg-transparent p-0 text-typography-tertiary-text hover:text-typography-secondary-text focus:outline-none";
+    clearBtn.innerHTML = X_SVG;
+    clearBtn.setAttribute("aria-label", "Clear selection");
+    clearBtn.style.display = canClear && value && !disabled ? "" : "none";
+    clearBtn.addEventListener("click", function (e) {
+      e.stopPropagation();
+      value = "";
+      var sel = options.find(function (opt) {
+        var ov =
+          opt.value !== undefined && opt.value !== null
+            ? opt.value
+            : opt.slug || opt.id;
+        return ov === value;
+      });
+      triggerText.textContent = placeholder;
+      trigger.className = triggerClasses(
+        variant,
+        size,
+        disabled,
+        true,
+        false
+      );
+      
+      // Update chevron visibility for inline variant
+      var shouldShowChevron = variant !== "inline" || !value;
+      if (shouldShowChevron && !chevron.parentNode) {
+        trigger.appendChild(chevron);
+      } else if (!shouldShowChevron && chevron.parentNode) {
+        chevron.parentNode.removeChild(chevron);
+      }
+      
+      updateClearButton();
+      updateOptionsSelection();
+      
+      if (onClear) onClear();
+      if (onChange) onChange("");
+    });
+    triggerWrapper.appendChild(clearBtn);
+    
+    // Helper to update clear button visibility
+    function updateClearButton() {
+      if (clearBtn) {
+        clearBtn.style.display = canClear && value && !disabled ? "" : "none";
+      }
+    }
+
+    container.appendChild(triggerWrapper);
+
+    var content = document.createElement("div");
+    content.setAttribute("role", "listbox");
+    var contentBase =
+      "custom-select-content absolute left-0 right-0 z-50 max-h-[200px] min-w-[8rem] overflow-hidden rounded-4 bg-fill-quarternary-fill-white shadow-default-medium opacity-0 invisible transition-all duration-150 ease-out " +
+      "group-[.open]:opacity-100 group-[.open]:visible ";
+    content.className =
+      contentBase + "top-full mt-1 -translate-y-1 group-[.open]:translate-y-0";
+
+    var optionsList = document.createElement("div");
+    optionsList.className =
+      "overflow-y-auto max-h-[200px] p-2 w-full rounded-4 bg-fill-quarternary-fill-white";
+
+    if (options.length === 0) {
+      var noOpt = document.createElement("div");
+      noOpt.className =
+        "flex h-full min-h-[100px] w-full items-center justify-center p-4 !text-reg-13 text-typography-quaternary-text";
+      noOpt.textContent = "No options available";
+      optionsList.appendChild(noOpt);
+    } else {
+      options.forEach(function (opt) {
+        var optionValue =
+          opt.value !== undefined && opt.value !== null
+            ? opt.value
+            : opt.slug || opt.id;
+        var optionLabel =
+          opt.label || opt.name || opt.display_name || opt.value;
+        var isSelected = optionValue === value;
+
+        var option = document.createElement("div");
+        option.setAttribute("role", "option");
+        option.setAttribute("data-value", optionValue);
+        option.setAttribute("aria-selected", isSelected);
+        option.className = join(
+          "relative flex w-full cursor-pointer select-none items-center gap-8 rounded-2 px-12 py-6 text-reg-13 outline-none first:rounded-t-4 last:rounded-b-4",
+          "hover:bg-fill-tertiary-fill-light-gray focus:bg-fill-tertiary-fill-light-gray",
+          isSelected
+            ? "bg-primary-surface hover:!bg-primary-surface-hover"
+            : ""
+        );
+
+        var optionContent = document.createElement("span");
+        optionContent.className = "flex items-center gap-8 flex-1 truncate";
+        optionContent.textContent = optionLabel;
+        option.appendChild(optionContent);
+
+        option.addEventListener("click", function (e) {
+          e.stopPropagation();
+          if (disabled) return;
+          selectOption(optionValue);
+        });
+        option.addEventListener("mouseenter", function () {
+          if (disabled) return;
+          highlightOption(option);
+        });
+
+        optionsList.appendChild(option);
+      });
+    }
+
+    content.appendChild(optionsList);
+    container.appendChild(content);
+
+    var isOpen = false;
+    var highlightedIndex = -1;
+
+    function openDropdown() {
+      if (disabled) return;
+      document
+        .querySelectorAll(".custom-select.open, .record-select.open")
+        .forEach(function (other) {
+          if (other !== container) {
+            other.classList.remove("open");
+            var t = other.querySelector(
+              "button, .custom-select-trigger, .record-select-trigger"
+            );
+            if (t) t.setAttribute("aria-expanded", "false");
+          }
+        });
+      isOpen = true;
+      container.classList.add("open");
+      trigger.setAttribute("aria-expanded", "true");
+      highlightOptionByValue(value);
+      updatePosition();
+    }
+
+    function closeDropdown() {
+      isOpen = false;
+      container.classList.remove("open");
+      trigger.setAttribute("aria-expanded", "false");
+      highlightedIndex = -1;
+    }
+
+    function toggleDropdown() {
+      var others = document.querySelectorAll(
+        ".custom-select.open, .record-select.open"
+      );
+      var hasOther = Array.from(others).some(function (s) {
+        return s !== container;
+      });
+      if (hasOther) openDropdown();
+      else if (isOpen) closeDropdown();
+      else openDropdown();
+    }
+
+    function updateOptionsSelection() {
+      optionsList.querySelectorAll("[role=option]").forEach(function (opt) {
+        var dv = opt.getAttribute("data-value");
+        var match =
+          dv === String(value) ||
+          (dv === "false" && value === false) ||
+          (dv === "true" && value === true);
+        opt.setAttribute("aria-selected", !!match);
+        opt.classList.remove("bg-primary-surface", "hover:!bg-primary-surface-hover");
+        opt.classList.add("hover:bg-fill-tertiary-fill-light-gray");
+        if (match) {
+          opt.classList.add("bg-primary-surface", "hover:!bg-primary-surface-hover");
+          opt.classList.remove("hover:bg-fill-tertiary-fill-light-gray");
+        } else {
+          opt.classList.remove("bg-primary-surface", "hover:!bg-primary-surface-hover");
+        }
+      });
+    }
+
+    function selectOption(optionValue) {
+      var selected = options.find(function (opt) {
+        var ov =
+          opt.value !== undefined && opt.value !== null
+            ? opt.value
+            : opt.slug || opt.id;
+        return ov === optionValue;
+      });
+      if (!selected) return;
+
+      value = optionValue;
+      triggerText.textContent =
+        selected.label || selected.name || selected.display_name || selected.value;
+      trigger.className = triggerClasses(
+        variant,
+        size,
+        disabled,
+        false,
+        canClear && !!value && !disabled
+      );
+
+      // Update chevron visibility for inline variant
+      var shouldShowChevron = variant !== "inline" || !value;
+      if (shouldShowChevron && !chevron.parentNode) {
+        trigger.appendChild(chevron);
+      } else if (!shouldShowChevron && chevron.parentNode) {
+        chevron.parentNode.removeChild(chevron);
+      }
+
+      updateClearButton();
+      updateOptionsSelection();
+
+      closeDropdown();
+      if (onChange) onChange(optionValue);
+    }
+
+    function highlightOption(el) {
+      optionsList.querySelectorAll("[role=option]").forEach(function (o) {
+        o.classList.remove("bg-fill-tertiary-fill-light-gray");
+      });
+      if (!el.classList.contains("bg-primary-surface")) {
+        el.classList.add("bg-fill-tertiary-fill-light-gray");
+      }
+      highlightedIndex = Array.from(optionsList.children).indexOf(el);
+    }
+
+    function highlightOptionByValue(val) {
+      var opt = optionsList.querySelector('[data-value="' + val + '"]');
+      if (opt) {
+        highlightOption(opt);
+        scrollToOption(opt);
+      }
+    }
+
+    function scrollToOption(opt) {
+      if (!opt) return;
+      var cr = content.getBoundingClientRect();
+      var top = opt.offsetTop;
+      var bottom = top + opt.offsetHeight;
+      var st = content.scrollTop;
+      var sb = st + cr.height;
+      if (top < st) content.scrollTop = top - 8;
+      else if (bottom > sb)
+        content.scrollTop = bottom - cr.height + 8;
+    }
+
+    function updatePosition() {
+      var rect = trigger.getBoundingClientRect();
+      var vh = window.innerHeight;
+      var below = vh - rect.bottom;
+      var above = rect.top;
+      if (below < 200 && above > below) {
+        content.className =
+          contentBase +
+          "bottom-full mb-1 translate-y-1 group-[.open]:translate-y-0";
+      } else {
+        content.className =
+          contentBase +
+          "top-full mt-1 -translate-y-1 group-[.open]:translate-y-0";
+      }
+    }
+
+    trigger.addEventListener("click", function (e) {
+      e.preventDefault();
+      e.stopPropagation();
+      toggleDropdown();
+    });
+
+    trigger.addEventListener("keydown", function (e) {
+      if (disabled) return;
+      switch (e.key) {
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          toggleDropdown();
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          if (!isOpen) openDropdown();
+          else navigateOptions(1);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (!isOpen) openDropdown();
+          else navigateOptions(-1);
+          break;
+        case "Escape":
+          if (isOpen) {
+            e.preventDefault();
+            closeDropdown();
+          }
+          break;
+      }
+    });
+
+    function navigateOptions(dir) {
+      var list = Array.from(optionsList.children).filter(function (n) {
+        return n.getAttribute("role") === "option";
+      });
+      if (list.length === 0) return;
+      highlightedIndex += dir;
+      if (highlightedIndex < 0) highlightedIndex = list.length - 1;
+      else if (highlightedIndex >= list.length) highlightedIndex = 0;
+      var opt = list[highlightedIndex];
+      highlightOption(opt);
+      scrollToOption(opt);
+    }
+
+    document.addEventListener("click", function (e) {
+      if (isOpen && !container.contains(e.target)) closeDropdown();
+    });
+    document.addEventListener("keydown", function (e) {
+      if (e.key === "Escape" && isOpen) closeDropdown();
+    });
+
+    container.updateValue = function (newValue) {
+      value =
+        newValue !== undefined && newValue !== null ? newValue : "";
+      var sel = options.find(function (opt) {
+        var ov =
+          opt.value !== undefined && opt.value !== null
+            ? opt.value
+            : opt.slug || opt.id;
+        return ov === value;
+      });
+      triggerText.textContent = sel
+        ? sel.label || sel.name || sel.display_name || sel.value
+        : placeholder;
+      trigger.className = triggerClasses(
+        variant,
+        size,
+        disabled,
+        !value,
+        canClear && !!value && !disabled
+      );
+
+      // Update chevron visibility for inline variant
+      var shouldShowChevron = variant !== "inline" || !value;
+      if (shouldShowChevron && !chevron.parentNode) {
+        trigger.appendChild(chevron);
+      } else if (!shouldShowChevron && chevron.parentNode) {
+        chevron.parentNode.removeChild(chevron);
+      }
+
+      updateClearButton();
+      updateOptionsSelection();
+    };
+
+    container.updateOptions = function (newOptions) {
+      options.length = 0;
+      options.push.apply(options, newOptions);
+      optionsList.innerHTML = "";
+
+      if (newOptions.length === 0) {
+        var noOpt = document.createElement("div");
+        noOpt.className =
+          "flex h-full min-h-[100px] w-full items-center justify-center p-4 !text-reg-13 text-typography-quaternary-text";
+        noOpt.textContent = "No options available";
+        optionsList.appendChild(noOpt);
+        return;
+      }
+
+      newOptions.forEach(function (opt) {
+        var optionValue =
+          opt.value !== undefined && opt.value !== null
+            ? opt.value
+            : opt.slug || opt.id;
+        var optionLabel =
+          opt.label || opt.name || opt.display_name || opt.value;
+        var isSelected = optionValue === value;
+
+        var option = document.createElement("div");
+        option.setAttribute("role", "option");
+        option.setAttribute("data-value", optionValue);
+        option.setAttribute("aria-selected", isSelected);
+        option.className = join(
+          "relative flex w-full cursor-pointer select-none items-center gap-8 rounded-2 px-12 py-6 text-reg-13 outline-none first:rounded-t-4 last:rounded-b-4",
+          "hover:bg-fill-tertiary-fill-light-gray focus:bg-fill-tertiary-fill-light-gray",
+          isSelected
+            ? "bg-primary-surface hover:!bg-primary-surface-hover"
+            : ""
+        );
+
+        var optionContent = document.createElement("span");
+        optionContent.className = "flex items-center gap-8 flex-1 truncate";
+        optionContent.textContent = optionLabel;
+        option.appendChild(optionContent);
+
+        option.addEventListener("click", function () {
+          if (disabled) return;
+          selectOption(optionValue);
+        });
+        option.addEventListener("mouseenter", function () {
+          if (disabled) return;
+          highlightOption(option);
+        });
+        optionsList.appendChild(option);
+      });
+    };
+
+    container.setDisabled = function (isDisabled) {
+      disabled = !!isDisabled;
+      trigger.disabled = disabled;
+      trigger.className = triggerClasses(
+        variant,
+        size,
+        disabled,
+        !value,
+        canClear && !!value && !disabled
+      );
+      updateClearButton();
+      if (disabled && isOpen) closeDropdown();
+    };
+
+    return container;
+  }
+
+  global.Select = {
+    create: createCustomSelect,
+  };
+})(typeof window !== "undefined" ? window : this);

package/components/spinner.js

@@ -0,0 +1,136 @@
+/**
+ * Spinner Component (shadcn-style)
+ * A reusable loading spinner component. Styles via Tailwind CSS.
+ */
+(function (global) {
+  "use strict";
+
+  /**
+   * Create a spinner element
+   * @param {Object} config - Configuration options
+   * @param {string} config.size - Size: 'small' (16px), 'medium' (24px), 'large' (32px), or custom pixel value
+   * @param {string} config.color - Color of the spinner (default: currentColor)
+   * @param {string} config.text - Optional loading text to display next to spinner
+   * @returns {HTMLElement} Spinner container element
+   */
+  function createSpinner(config = {}) {
+    const {
+      size = "medium",
+      color = "currentColor",
+      text = null,
+    } = config;
+
+    // Determine pixel size
+    let pixelSize;
+    switch (size) {
+      case "small": {
+        pixelSize = "16px";
+        break;
+      }
+      case "medium": {
+        pixelSize = "24px";
+        break;
+      }
+      case "large": {
+        pixelSize = "32px";
+        break;
+      }
+      default: {
+        pixelSize = size;
+      }
+    }
+
+    // Create container (Tailwind: inline-flex items-center gap-2)
+    const container = document.createElement("div");
+    container.setAttribute("data-spinner", "container");
+    container.className = "inline-flex items-center gap-2";
+
+    // Create SVG element (Tailwind: animate-spin)
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    svg.setAttribute("width", pixelSize);
+    svg.setAttribute("height", pixelSize);
+    svg.setAttribute("viewBox", "0 0 24 24");
+    svg.setAttribute("fill", "none");
+    svg.setAttribute("stroke", color);
+    svg.setAttribute("stroke-width", "2");
+    svg.setAttribute("stroke-linecap", "round");
+    svg.setAttribute("stroke-linejoin", "round");
+    svg.classList.add("animate-spin");
+
+    // Create path elements
+    const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path1.setAttribute("stroke", "none");
+    path1.setAttribute("d", "M0 0h24v24H0z");
+    path1.setAttribute("fill", "none");
+
+    const path2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path2.setAttribute("d", "M12 3a9 9 0 1 0 9 9");
+
+    svg.appendChild(path1);
+    svg.appendChild(path2);
+
+    container.appendChild(svg);
+
+    // Add text if provided (Tailwind: text-sm text-typography-tertiary-text)
+    if (text) {
+      const textSpan = document.createElement("span");
+      textSpan.className = "text-sm text-typography-tertiary-text";
+      textSpan.textContent = text;
+      container.appendChild(textSpan);
+    }
+
+    return container;
+  }
+
+  /**
+   * Create a centered spinner (for full-width loading states)
+   * @param {Object} config - Configuration options (same as createSpinner)
+   * @returns {HTMLElement} Centered spinner container
+   */
+  function createCenteredSpinner(config = {}) {
+    const spinner = createSpinner(config);
+    spinner.classList.add("flex", "justify-center", "items-center", "p-5");
+    return spinner;
+  }
+
+  /**
+   * Show spinner in a container
+   * @param {HTMLElement} container - Container element
+   * @param {Object} config - Configuration options
+   * @returns {HTMLElement} The spinner element (for later removal)
+   */
+  function showSpinner(container, config = {}) {
+    if (!container) {
+      return null;
+    }
+    const spinner = createCenteredSpinner(config);
+    container.innerHTML = "";
+    container.appendChild(spinner);
+    return spinner;
+  }
+
+  /**
+   * Remove spinner from a container
+   * @param {HTMLElement} container - Container element
+   */
+  function hideSpinner(container) {
+    if (!container) {
+      return;
+    }
+    const spinner = container.querySelector("[data-spinner=\"container\"]");
+    if (spinner) {
+      spinner.remove();
+    }
+  }
+
+  // Export to global
+  global.Spinner = {
+    create: createSpinner,
+    createCentered: createCenteredSpinner,
+    show: showSpinner,
+    hide: hideSpinner,
+  };
+  // Backward compatibility
+  global.Loader = global.Spinner;
+})(typeof window !== "undefined" ? window : this);