@superleapai/flow-ui 1.0.0

package/components/popover.js

@@ -0,0 +1,240 @@
+/**
+ * Popover Component (shadcn-style)
+ * Floating panel anchored to a trigger element.
+ */
+
+(function (global) {
+  "use strict";
+
+  /**
+   * Create a popover
+   * @param {Object} config - Configuration object
+   * @param {HTMLElement|string} config.trigger - Trigger element or CSS selector
+   * @param {HTMLElement|string} config.content - Popover content (element or HTML string)
+   * @param {string} [config.placement='bottom'] - 'top' | 'bottom' | 'left' | 'right'
+   * @param {string} [config.align='start'] - 'start' | 'center' | 'end' - align panel to trigger
+   * @param {string} [config.title] - Optional title text
+   * @param {boolean} [config.closeOnClickOutside=true] - Close when clicking outside
+   * @param {Function} [config.onClose] - Called when popover closes
+   * @param {Function} [config.onOpen] - Called when popover opens (before positioning)
+   * @param {string} [config.bodyClassName] - Optional class for body wrapper (overrides default padding)
+   * @param {string} [config.panelClassName] - Optional class to add to panel (e.g. for width)
+   * @returns {Object} Popover API {show, hide, destroy, element}
+   */
+  function create(config = {}) {
+    const {
+      trigger,
+      content = "",
+      placement = "bottom",
+      align = "start",
+      title = "",
+      closeOnClickOutside = true,
+      onClose = null,
+      onOpen = null,
+      bodyClassName = "",
+      panelClassName = "",
+    } = config;
+
+    const triggerEl =
+      typeof trigger === "string" ? document.querySelector(trigger) : trigger;
+    if (!triggerEl) {
+      console.warn("[Popover] Trigger element not found");
+      return { show: noop, hide: noop, destroy: noop, element: null };
+    }
+
+    const wrapper = document.createElement("div");
+    wrapper.className =
+      "fixed z-50  pointer-events-none opacity-0 invisible transition-opacity duration-150 ease-out";
+    wrapper.setAttribute("aria-hidden", "true");
+
+    const panel = document.createElement("div");
+    panel.className =
+      "relative z-50 rounded-4 bg-fill-quarternary-fill-white text-typography-primary-text shadow-default-medium outline-none border-1/2 border-border-primary min-w-0 pointer-events-auto " +
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 " +
+      "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";
+    panel.setAttribute("role", "dialog");
+    panel.setAttribute("data-side", placement);
+    panel.setAttribute("data-state", "closed");
+    panel.setAttribute("tabindex", "-1");
+
+    if (title) {
+      const titleEl = document.createElement("div");
+      titleEl.className =
+        "text-semi-14 text-typography-primary-text border-b-1/2 border-border-primary";
+      titleEl.textContent = title;
+      panel.appendChild(titleEl);
+    }
+
+    const body = document.createElement("div");
+    body.className =
+      bodyClassName ||
+      "text-reg-14 text-typography-secondary-text leading-5 [&_p]:mb-2 [&_p:last-child]:mb-0";
+    if (panelClassName) {
+      panel.className = panel.className + " " + panelClassName;
+    }
+    if (typeof content === "string") {
+      body.innerHTML = content;
+    } else if (content instanceof HTMLElement) {
+      body.appendChild(content);
+    }
+    panel.appendChild(body);
+
+    wrapper.appendChild(panel);
+
+    function noop() {}
+
+    function position() {
+      const rect = triggerEl.getBoundingClientRect();
+      const panelRect = panel.getBoundingClientRect();
+      const gap = 8;
+      let top = 0;
+      let left = 0;
+
+      // Alignment offset: start = 0, center = half diff, end = full diff
+      const alignLeft = (align === "center" ? (rect.width - panelRect.width) / 2 : align === "end" ? rect.width - panelRect.width : 0);
+      const alignTop = (align === "center" ? (rect.height - panelRect.height) / 2 : align === "end" ? rect.height - panelRect.height : 0);
+
+      switch (placement) {
+        case "bottom":
+          top = rect.bottom + gap;
+          left = rect.left + alignLeft;
+          break;
+        case "top":
+          top = rect.top - panelRect.height - gap;
+          left = rect.left + alignLeft;
+          break;
+        case "right":
+          top = rect.top + alignTop;
+          left = rect.right + gap;
+          break;
+        case "left":
+          top = rect.top + alignTop;
+          left = rect.left - panelRect.width - gap;
+          break;
+        default:
+          top = rect.bottom + gap;
+          left = rect.left + alignLeft;
+      }
+
+      // Keep within viewport
+      const padding = 8;
+      if (left < padding) left = padding;
+      if (left + panelRect.width > window.innerWidth - padding) {
+        left = window.innerWidth - panelRect.width - padding;
+      }
+      if (top < padding) top = padding;
+      if (top + panelRect.height > window.innerHeight - padding) {
+        top = window.innerHeight - panelRect.height - padding;
+      }
+
+      wrapper.style.left = "0";
+      wrapper.style.top = "0";
+      wrapper.style.transform = "translate(" + left + "px, " + top + "px)";
+      // Force reflow so transform is applied before we show (avoids flash from left/top-left)
+      wrapper.offsetHeight;
+    }
+
+    function hide() {
+      panel.setAttribute("data-state", "closed");
+      wrapper.classList.add("invisible", "opacity-0", "pointer-events-none");
+      wrapper.classList.remove("visible", "opacity-100", "pointer-events-auto");
+      wrapper.setAttribute("aria-hidden", "true");
+      if (onClose) onClose();
+    }
+
+    function show() {
+      if (onOpen) onOpen();
+      var justAppended = !wrapper.parentNode;
+      if (justAppended) {
+        document.body.appendChild(wrapper);
+      }
+      // On first open, wait for layout so getBoundingClientRect() is correct (avoids wrong position / "from left" look)
+      if (justAppended) {
+        requestAnimationFrame(function () {
+          position();
+          wrapper.classList.remove("invisible", "opacity-0", "pointer-events-none");
+          wrapper.classList.add("visible", "opacity-100", "pointer-events-auto");
+          wrapper.setAttribute("aria-hidden", "false");
+          requestAnimationFrame(function () {
+            requestAnimationFrame(function () {
+              panel.setAttribute("data-state", "open");
+            });
+          });
+        });
+      } else {
+        position();
+        wrapper.classList.remove("invisible", "opacity-0", "pointer-events-none");
+        wrapper.classList.add("visible", "opacity-100", "pointer-events-auto");
+        wrapper.setAttribute("aria-hidden", "false");
+        requestAnimationFrame(function () {
+          requestAnimationFrame(function () {
+            panel.setAttribute("data-state", "open");
+          });
+        });
+      }
+    }
+
+    function destroy() {
+      hide();
+      if (wrapper.parentNode) {
+        wrapper.parentNode.removeChild(wrapper);
+      }
+      if (closeOnClickOutside) {
+        document.removeEventListener("click", outsideClick);
+      }
+      triggerEl.removeEventListener("click", toggleClick);
+      document.removeEventListener("keydown", handleKeyDown);
+    }
+
+    function toggleClick(e) {
+      e.stopPropagation();
+      if (wrapper.classList.contains("visible")) {
+        hide();
+      } else {
+        show();
+      }
+    }
+
+    function outsideClick(e) {
+      if (
+        wrapper.classList.contains("visible") &&
+        !wrapper.contains(e.target) &&
+        !triggerEl.contains(e.target)
+      ) {
+        hide();
+      }
+    }
+
+    function handleKeyDown(e) {
+      if (e.key === "Escape" && wrapper.classList.contains("visible")) {
+        hide();
+      }
+    }
+
+    triggerEl.addEventListener("click", toggleClick);
+    if (closeOnClickOutside) {
+      document.addEventListener("click", outsideClick);
+    }
+    document.addEventListener("keydown", handleKeyDown);
+
+    return {
+      show,
+      hide,
+      destroy,
+      setContent(newContent) {
+        body.innerHTML = "";
+        if (typeof newContent === "string") {
+          body.innerHTML = newContent;
+        } else if (newContent instanceof HTMLElement) {
+          body.appendChild(newContent);
+        }
+      },
+      element: wrapper,
+      panel,
+    };
+  }
+
+  global.Popover = {
+    create,
+  };
+})(typeof window !== "undefined" ? window : this);

package/components/radio-group.js

@@ -0,0 +1,435 @@
+/**
+ * RadioGroup Component (vanilla JS)
+ * Design-system radio group with variants, sizes, and label support.
+ * Ref: React RadioGroup with Radix UI primitives; no React/Radix dependency.
+ */
+
+(function (global) {
+  "use strict";
+
+  // Inline SVG for circle icon (checked state indicator)
+  var CIRCLE_ICON =
+    '<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="white" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path></svg>';
+
+  var RADIO_GROUP_BASE_CLASS = "flex content-center gap-6";
+
+  var RADIO_ITEM_BASE_CLASS =
+    "size-16 rounded-128 border focus:ring-0 transition-all cursor-pointer";
+  
+  var RADIO_ITEM_UNCHECKED_CLASS =
+    "bg-fill-quarternary-fill-white border-typography-quaternary-text hover:border-primary-base hover:shadow-primary-focused";
+  
+  var RADIO_ITEM_CHECKED_CLASS =
+    "bg-primary-base border-primary-base hover:border-primary-base hover:shadow-primary-focused";
+  
+  var RADIO_ITEM_DISABLED_CLASS =
+    "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:shadow-none";
+
+  var RADIO_INDICATOR_CLASS =
+    "size-8 rounded-128 bg-fill-quarternary-fill-white text-fill-quarternary-fill-white data-[state=checked]:text-typography-quaternary-text group-disabled:text-typography-quaternary-text data-[state=checked]:group-disabled:text-typography-quaternary-text";
+
+  var LABEL_BASE_CLASS =
+    "cursor-pointer text-reg-12 leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70";
+
+  function join() {
+    return Array.prototype.filter.call(arguments, Boolean).join(" ");
+  }
+
+  /**
+   * Create a radio group component
+   * @param {Object} config
+   * @param {string} [config.name] - name attribute for all radio inputs (required for grouping)
+   * @param {Array} config.options - array of { value, label, disabled? }
+   * @param {string} [config.defaultValue] - initial selected value
+   * @param {string} [config.value] - controlled value
+   * @param {boolean} [config.disabled] - disable all radio buttons
+   * @param {string} [config.className] - extra class on wrapper
+   * @param {string} [config.orientation] - 'horizontal' | 'vertical' (default: horizontal)
+   * @param {Function} [config.onChange] - change handler (receives selected value)
+   * @returns {HTMLElement} wrapper element containing all radio items
+   */
+  function create(config) {
+    var opts = config || {};
+    var name = opts.name || "radio-group-" + Math.random().toString(36).substr(2, 9);
+    var options = opts.options || [];
+    var defaultValue = opts.defaultValue;
+    var value = opts.value !== undefined ? opts.value : defaultValue;
+    var disabled = !!opts.disabled;
+    var className = opts.className || "";
+    var orientation = opts.orientation || "horizontal";
+    var onChange = opts.onChange;
+
+    // Wrapper container (RadioGroup root)
+    var wrapper = document.createElement("div");
+    wrapper.setAttribute("role", "radiogroup");
+    wrapper.setAttribute("aria-required", "false");
+    wrapper.setAttribute("dir", "ltr");
+    wrapper.className = join(
+      RADIO_GROUP_BASE_CLASS,
+      orientation === "vertical" ? "flex-col" : "",
+      className
+    );
+    wrapper.tabIndex = 0;
+
+    var selectedValue = value;
+
+    // Create radio items
+    options.forEach(function (option, index) {
+      var optionValue = option.value;
+      var optionLabel = option.label || option.value;
+      var optionDisabled = disabled || !!option.disabled;
+      var isChecked = optionValue === selectedValue;
+
+      var itemWrapper = document.createElement("div");
+      itemWrapper.className = "flex items-center gap-8";
+
+      // Hidden native radio input
+      var input = document.createElement("input");
+      input.type = "radio";
+      input.name = name;
+      input.value = optionValue;
+      input.id = name + "-" + index;
+      input.checked = isChecked;
+      input.disabled = optionDisabled;
+      input.className = "absolute opacity-0 w-0 h-0 peer";
+      input.style.position = "absolute";
+      input.style.opacity = "0";
+      input.style.width = "0";
+      input.style.height = "0";
+      input.style.pointerEvents = "none";
+
+      // Custom radio visual (RadioGroupItem)
+      var radioButton = document.createElement("button");
+      radioButton.type = "button";
+      radioButton.setAttribute("role", "radio");
+      radioButton.setAttribute("aria-checked", isChecked ? "true" : "false");
+      radioButton.setAttribute("data-state", isChecked ? "checked" : "unchecked");
+      radioButton.value = optionValue;
+      radioButton.id = name + "-button-" + index;
+      radioButton.tabIndex = -1;
+      radioButton.className = join(
+        RADIO_ITEM_BASE_CLASS,
+        isChecked ? RADIO_ITEM_CHECKED_CLASS : RADIO_ITEM_UNCHECKED_CLASS,
+        RADIO_ITEM_DISABLED_CLASS
+      );
+      if (optionDisabled) {
+        radioButton.disabled = true;
+      }
+
+      // Indicator (circle icon when checked)
+      var indicator = document.createElement("span");
+      indicator.setAttribute("data-state", isChecked ? "checked" : "unchecked");
+      indicator.className = "flex items-center justify-center";
+      if (isChecked) {
+        indicator.innerHTML = CIRCLE_ICON;
+        var svg = indicator.querySelector("svg");
+        if (svg) {
+          svg.setAttribute("class", RADIO_INDICATOR_CLASS);
+        }
+      }
+
+      radioButton.appendChild(indicator);
+
+      // Update visual state
+      function updateCheckedState(newValue) {
+        var isNowChecked = newValue === optionValue;
+        input.checked = isNowChecked;
+        radioButton.setAttribute("aria-checked", isNowChecked ? "true" : "false");
+        radioButton.setAttribute("data-state", isNowChecked ? "checked" : "unchecked");
+        indicator.setAttribute("data-state", isNowChecked ? "checked" : "unchecked");
+
+        // Update button classes
+        if (isNowChecked) {
+          radioButton.className = join(
+            RADIO_ITEM_BASE_CLASS,
+            RADIO_ITEM_CHECKED_CLASS,
+            RADIO_ITEM_DISABLED_CLASS
+          );
+          indicator.innerHTML = CIRCLE_ICON;
+          var svg = indicator.querySelector("svg");
+          if (svg) {
+            svg.setAttribute("class", RADIO_INDICATOR_CLASS);
+          }
+        } else {
+          radioButton.className = join(
+            RADIO_ITEM_BASE_CLASS,
+            RADIO_ITEM_UNCHECKED_CLASS,
+            RADIO_ITEM_DISABLED_CLASS
+          );
+          indicator.innerHTML = "";
+        }
+      }
+
+      // Click handler
+      radioButton.addEventListener("click", function () {
+        if (optionDisabled) return;
+        selectedValue = optionValue;
+        
+        // Update all radio items in this group
+        var allInputs = wrapper.querySelectorAll('input[name="' + name + '"]');
+        var allInputsArray = Array.prototype.slice.call(allInputs);
+        allInputsArray.forEach(function (inp, idx) {
+          var btn = wrapper.querySelector('[id="' + name + '-button-' + idx + '"]');
+          if (btn) {
+            updateRadioState(inp, btn, inp.value === selectedValue);
+          }
+        });
+
+        if (typeof onChange === "function") {
+          onChange(selectedValue);
+        }
+        input.dispatchEvent(new Event("change", { bubbles: true }));
+      });
+
+      // Keyboard support
+      radioButton.addEventListener("keydown", function (e) {
+        if (optionDisabled) return;
+        if (e.key === " " || e.key === "Enter") {
+          e.preventDefault();
+          radioButton.click();
+        }
+      });
+
+      itemWrapper.appendChild(input);
+      itemWrapper.appendChild(radioButton);
+
+      // Label
+      if (optionLabel) {
+        var labelEl = document.createElement("label");
+        labelEl.htmlFor = name + "-" + index;
+        labelEl.className = join(
+          LABEL_BASE_CLASS,
+          optionDisabled ? "text-typography-quaternary-text" : ""
+        );
+        labelEl.textContent = optionLabel;
+        labelEl.addEventListener("click", function () {
+          if (!optionDisabled) {
+            radioButton.click();
+          }
+        });
+        itemWrapper.appendChild(labelEl);
+      }
+
+      wrapper.appendChild(itemWrapper);
+    });
+
+    // Helper function to update radio state
+    function updateRadioState(input, button, isChecked) {
+      input.checked = isChecked;
+      button.setAttribute("aria-checked", isChecked ? "true" : "false");
+      button.setAttribute("data-state", isChecked ? "checked" : "unchecked");
+      
+      // Update button classes
+      if (isChecked) {
+        button.className = join(
+          RADIO_ITEM_BASE_CLASS,
+          RADIO_ITEM_CHECKED_CLASS,
+          RADIO_ITEM_DISABLED_CLASS
+        );
+      } else {
+        button.className = join(
+          RADIO_ITEM_BASE_CLASS,
+          RADIO_ITEM_UNCHECKED_CLASS,
+          RADIO_ITEM_DISABLED_CLASS
+        );
+      }
+      
+      var indicator = button.querySelector("span");
+      if (indicator) {
+        indicator.setAttribute("data-state", isChecked ? "checked" : "unchecked");
+        if (isChecked) {
+          indicator.innerHTML = CIRCLE_ICON;
+          var svg = indicator.querySelector("svg");
+          if (svg) {
+            svg.setAttribute("class", RADIO_INDICATOR_CLASS);
+          }
+        } else {
+          indicator.innerHTML = "";
+        }
+      }
+    }
+
+    // Public API
+    wrapper.getValue = function () {
+      var checkedInput = wrapper.querySelector('input[name="' + name + '"]:checked');
+      return checkedInput ? checkedInput.value : null;
+    };
+
+    wrapper.setValue = function (newValue) {
+      selectedValue = newValue;
+      var allInputs = wrapper.querySelectorAll('input[name="' + name + '"]');
+      allInputs.forEach(function (inp, idx) {
+        var btn = wrapper.querySelector('[id="' + name + '-button-' + idx + '"]');
+        if (btn) {
+          updateRadioState(inp, btn, inp.value === newValue);
+        }
+      });
+    };
+
+    wrapper.setDisabled = function (isDisabled) {
+      disabled = !!isDisabled;
+      var allInputs = wrapper.querySelectorAll('input[name="' + name + '"]');
+      allInputs.forEach(function (inp, idx) {
+        inp.disabled = disabled;
+        var btn = wrapper.querySelector('[id="' + name + '-button-' + idx + '"]');
+        if (btn) {
+          btn.disabled = disabled;
+        }
+      });
+    };
+
+    return wrapper;
+  }
+
+  /**
+   * Create a standalone radio group item (for custom layouts)
+   * @param {Object} config
+   * @param {string} config.value - radio value
+   * @param {string} [config.name] - name attribute
+   * @param {string} [config.id] - radio id
+   * @param {boolean} [config.checked] - initial checked state
+   * @param {boolean} [config.disabled] - disabled state
+   * @param {string} [config.className] - extra class
+   * @param {Function} [config.onChange] - change handler
+   * @returns {HTMLElement}
+   */
+  function createItem(config) {
+    var opts = config || {};
+    var value = opts.value;
+    var name = opts.name || "radio-" + Math.random().toString(36).substr(2, 9);
+    var id = opts.id || name + "-" + value;
+    var checked = !!opts.checked;
+    var disabled = !!opts.disabled;
+    var className = opts.className || "";
+    var onChange = opts.onChange;
+
+    var wrapper = document.createElement("div");
+    wrapper.className = "flex items-center gap-8";
+
+    // Hidden native radio input
+    var input = document.createElement("input");
+    input.type = "radio";
+    input.name = name;
+    input.value = value;
+    input.id = id;
+    input.checked = checked;
+    input.disabled = disabled;
+    input.className = "absolute opacity-0 w-0 h-0 peer";
+    input.style.position = "absolute";
+    input.style.opacity = "0";
+    input.style.width = "0";
+    input.style.height = "0";
+    input.style.pointerEvents = "none";
+
+    // Custom radio visual
+    var radioButton = document.createElement("button");
+    radioButton.type = "button";
+    radioButton.setAttribute("role", "radio");
+    radioButton.setAttribute("aria-checked", checked ? "true" : "false");
+    radioButton.setAttribute("data-state", checked ? "checked" : "unchecked");
+    radioButton.value = value;
+    radioButton.tabIndex = disabled ? -1 : 0;
+    radioButton.className = join(
+      RADIO_ITEM_BASE_CLASS,
+      checked ? RADIO_ITEM_CHECKED_CLASS : RADIO_ITEM_UNCHECKED_CLASS,
+      RADIO_ITEM_DISABLED_CLASS,
+      className
+    );
+    if (disabled) {
+      radioButton.disabled = true;
+    }
+
+    // Indicator
+    var indicator = document.createElement("span");
+    indicator.setAttribute("data-state", checked ? "checked" : "unchecked");
+    indicator.className = "flex items-center justify-center";
+    if (checked) {
+      indicator.innerHTML = CIRCLE_ICON;
+      var svg = indicator.querySelector("svg");
+      if (svg) {
+        svg.setAttribute("class", RADIO_INDICATOR_CLASS);
+      }
+    }
+
+    radioButton.appendChild(indicator);
+
+    // Update visual state
+    function updateCheckedState() {
+      var isChecked = input.checked;
+      radioButton.setAttribute("aria-checked", isChecked ? "true" : "false");
+      radioButton.setAttribute("data-state", isChecked ? "checked" : "unchecked");
+      indicator.setAttribute("data-state", isChecked ? "checked" : "unchecked");
+
+      // Update button classes
+      if (isChecked) {
+        radioButton.className = join(
+          RADIO_ITEM_BASE_CLASS,
+          RADIO_ITEM_CHECKED_CLASS,
+          RADIO_ITEM_DISABLED_CLASS,
+          className
+        );
+        indicator.innerHTML = CIRCLE_ICON;
+        var svg = indicator.querySelector("svg");
+        if (svg) {
+          svg.setAttribute("class", RADIO_INDICATOR_CLASS);
+        }
+      } else {
+        radioButton.className = join(
+          RADIO_ITEM_BASE_CLASS,
+          RADIO_ITEM_UNCHECKED_CLASS,
+          RADIO_ITEM_DISABLED_CLASS,
+          className
+        );
+        indicator.innerHTML = "";
+      }
+    }
+
+    // Click handler
+    radioButton.addEventListener("click", function () {
+      if (disabled) return;
+      input.checked = true;
+      updateCheckedState();
+      if (typeof onChange === "function") {
+        onChange(value);
+      }
+      input.dispatchEvent(new Event("change", { bubbles: true }));
+    });
+
+    // Keyboard support
+    radioButton.addEventListener("keydown", function (e) {
+      if (disabled) return;
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        radioButton.click();
+      }
+    });
+
+    wrapper.appendChild(input);
+    wrapper.appendChild(radioButton);
+
+    // Public API
+    wrapper.getInput = function () {
+      return input;
+    };
+    wrapper.setChecked = function (isChecked) {
+      input.checked = !!isChecked;
+      updateCheckedState();
+    };
+    wrapper.getChecked = function () {
+      return input.checked;
+    };
+
+    return wrapper;
+  }
+
+  var RadioGroup = {
+    create: create,
+    createItem: createItem,
+  };
+
+  if (typeof module !== "undefined" && module.exports) {
+    module.exports = RadioGroup;
+  } else {
+    global.RadioGroup = RadioGroup;
+  }
+})(typeof window !== "undefined" ? window : this);