@superleapai/flow-ui 2.3.7 → 2.3.9

package/components/steps.js

@@ -0,0 +1,245 @@
+/**
+ * Steps Component (vanilla JS)
+ * Multi-step flow with numbered step triggers and optional content panels.
+ * Use for wizards / step-by-step forms (e.g. "1 Step One", "2 Step Two").
+ */
+
+(function (global) {
+  "use strict";
+
+  function getComponent(name) {
+    if (typeof global.FlowUI !== "undefined" && typeof global.FlowUI._getComponent === "function") {
+      var c = global.FlowUI._getComponent(name);
+      if (c) return c;
+    }
+    return global[name];
+  }
+
+  var LIST_BASE_CLASS =
+    "flex items-center flex-wrap gap-0 rounded-4 border border-border-primary bg-fill-quarternary-fill-white p-4";
+
+  /** Inactive step: muted label color only (button stays ghost large) */
+  var INACTIVE_LABEL_CLASS = "!text-typography-quaternary-text";
+
+  /** Box around step number: active = dark fill + invert text, inactive = dark gray fill + tertiary text */
+  var NUMBER_BOX_ACTIVE =
+    "flex h-16 w-16 items-center justify-center rounded-4 bg-typography-primary-text text-typography-invert-text shrink-0";
+  var NUMBER_BOX_INACTIVE =
+    "flex h-16 w-16 items-center justify-center rounded-4 bg-fill-primary-fill-dark-gray text-typography-tertiary-text shrink-0";
+
+  /** Horizontal line between steps (step1 ——— step2) */
+  var CONNECTOR_CLASS = "flex-1 min-w-12 max-w-32 h-0 border-t border-border-primary shrink-0 mx-2 self-center";
+
+  var CONTENT_BASE_CLASS =
+    "ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 h-full";
+
+  function join() {
+    return Array.prototype.filter.call(arguments, Boolean).join(" ");
+  }
+
+  /**
+   * Create a Steps component (numbered step triggers + optional content)
+   * Design: ghost large Button for all steps; inactive steps use muted label color. Connectors between steps. Optional title/description above.
+   * @param {Object} config
+   * @param {Array<{id: string, label: string, content?: HTMLElement|string}>} config.steps - step definitions
+   * @param {string} [config.defaultValue] - initial active step id
+   * @param {string} [config.value] - controlled active step id
+   * @param {Function} [config.onChange] - (stepId) => void when step changes
+   * @param {string} [config.title] - optional title above steps
+   * @param {string} [config.description] - optional description above steps
+   * @param {string} [config.listClassName] - extra class on step list
+   * @param {string} [config.contentClassName] - extra class on content wrapper
+   * @param {boolean} [config.showContent=true] - whether to render content panels (if steps have content)
+   * @returns {HTMLElement} root element
+   */
+  function create(config) {
+    var opts = config || {};
+    var steps = opts.steps || [];
+    var defaultValue = opts.defaultValue;
+    var controlledValue = opts.value;
+    var onChange = opts.onChange;
+    var title = opts.title;
+    var description = opts.description;
+    var listClassName = opts.listClassName || "";
+    var contentClassName = opts.contentClassName || "";
+    var showContent = opts.showContent !== false;
+
+    var root = document.createElement("div");
+    root.className = "steps-root w-full";
+
+    var activeId =
+      controlledValue !== undefined
+        ? controlledValue
+        : defaultValue !== undefined
+          ? defaultValue
+          : (steps[0] && steps[0].id) || "";
+
+    if (title != null && title !== "") {
+      var titleEl = document.createElement("h3");
+      titleEl.className = "text-typography-primary-text";
+      titleEl.textContent = title;
+      root.appendChild(titleEl);
+    }
+    if (description != null && description !== "") {
+      var descEl = document.createElement("p");
+      descEl.className = "text-typography-secondary-text";
+      descEl.textContent = description;
+      root.appendChild(descEl);
+    }
+
+    // Step list (horizontal: step, connector, step, connector, ...)
+    var list = document.createElement("div");
+    list.setAttribute("role", "tablist");
+    list.setAttribute("aria-label", "Steps");
+    list.className = join(LIST_BASE_CLASS, listClassName);
+
+    var triggerEls = [];
+    var numberBoxEls = [];
+    var contentPanels = [];
+    var contentWrapper = null;
+
+    if (showContent && steps.some(function (s) { return s.content != null; })) {
+      contentWrapper = document.createElement("div");
+      contentWrapper.className = join("steps-content-wrapper mt-4", contentClassName);
+    }
+
+    var Button = getComponent("Button");
+
+    steps.forEach(function (step, index) {
+      var stepId = step.id;
+      var label = step.label != null ? step.label : stepId;
+      var content = step.content;
+      var stepNumber = index + 1;
+      var isActive = stepId === activeId;
+
+      var trigger = Button.create({
+        variant: "ghost",
+        size: "large",
+        text: "\u00A0",
+        type: "button",
+        className: isActive ? "" : INACTIVE_LABEL_CLASS,
+        onClick: function () {
+          if (activeId === stepId) return;
+          if (controlledValue === undefined) {
+            activeId = stepId;
+            updateActiveState();
+          }
+          if (typeof onChange === "function") {
+            onChange(stepId);
+          }
+        },
+      });
+
+      var numberBox = document.createElement("span");
+      numberBox.setAttribute("aria-hidden", "true");
+      numberBox.className = isActive ? NUMBER_BOX_ACTIVE : NUMBER_BOX_INACTIVE;
+      numberBox.textContent = String(stepNumber);
+
+      trigger.innerHTML = "";
+      trigger.appendChild(numberBox);
+      trigger.appendChild(document.createTextNode(" " + label));
+
+      trigger.setAttribute("role", "tab");
+      trigger.setAttribute("aria-selected", isActive ? "true" : "false");
+      trigger.setAttribute("data-state", isActive ? "active" : "inactive");
+      trigger.setAttribute("data-step-id", stepId);
+      trigger.tabIndex = isActive ? 0 : -1;
+
+      numberBoxEls.push(numberBox);
+
+      trigger.addEventListener("keydown", function (e) {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          trigger.click();
+        }
+        if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+          e.preventDefault();
+          var nextIndex = e.key === "ArrowRight" ? index + 1 : index - 1;
+          if (nextIndex >= 0 && nextIndex < steps.length) {
+            var nextTrigger = triggerEls[nextIndex];
+            if (nextTrigger) {
+              nextTrigger.focus();
+              nextTrigger.click();
+            }
+          }
+        }
+      });
+
+      list.appendChild(trigger);
+      triggerEls.push(trigger);
+
+      if (index < steps.length - 1) {
+        var connector = document.createElement("span");
+        connector.className = CONNECTOR_CLASS;
+        connector.setAttribute("aria-hidden", "true");
+        list.appendChild(connector);
+      }
+
+      if (contentWrapper && content != null) {
+        var panel = document.createElement("div");
+        panel.setAttribute("role", "tabpanel");
+        panel.setAttribute("aria-hidden", stepId !== activeId ? "true" : "false");
+        panel.setAttribute("data-step-id", stepId);
+        panel.className = join(CONTENT_BASE_CLASS, stepId !== activeId ? "hidden" : "");
+        if (typeof content === "string") {
+          panel.innerHTML = content;
+        } else if (content && content.nodeType === 1) {
+          panel.appendChild(content);
+        }
+        contentWrapper.appendChild(panel);
+        contentPanels.push(panel);
+      }
+    });
+
+    function updateActiveState() {
+      triggerEls.forEach(function (t, i) {
+        var step = steps[i];
+        var id = step && step.id;
+        var isActive = id === activeId;
+        t.setAttribute("aria-selected", isActive ? "true" : "false");
+        t.setAttribute("data-state", isActive ? "active" : "inactive");
+        t.tabIndex = isActive ? 0 : -1;
+        if (isActive) {
+          t.classList.remove(INACTIVE_LABEL_CLASS);
+        } else {
+          t.classList.add(INACTIVE_LABEL_CLASS);
+        }
+        numberBoxEls[i].className = isActive ? NUMBER_BOX_ACTIVE : NUMBER_BOX_INACTIVE;
+      });
+      contentPanels.forEach(function (p, i) {
+        var step = steps[i];
+        var id = step && step.id;
+        var isActive = id === activeId;
+        p.setAttribute("aria-hidden", isActive ? "false" : "true");
+        p.classList.toggle("hidden", !isActive);
+      });
+    }
+
+    root.appendChild(list);
+    if (contentWrapper) {
+      root.appendChild(contentWrapper);
+    }
+
+    root.getValue = function () {
+      return activeId;
+    };
+
+    root.setValue = function (newId) {
+      if (newId === activeId) return;
+      activeId = newId;
+      updateActiveState();
+    };
+
+    return root;
+  }
+
+  var Steps = {
+    create: create,
+  };
+
+  if (typeof module !== "undefined" && module.exports) {
+    module.exports = Steps;
+  } else {
+    global.Steps = Steps;
+  }
+})(typeof window !== "undefined" ? window : this);

package/components/tabs.js

@@ -0,0 +1,191 @@
+/**
+ * Tabs Component (vanilla JS)
+ * Tabbed interface with list, triggers, and content panels.
+ * Ref: Radix-style Tabs; design tokens match design system.
+ */
+
+(function (global) {
+  "use strict";
+
+  function getComponent(name) {
+    if (typeof global.FlowUI !== "undefined" && typeof global.FlowUI._getComponent === "function") {
+      var c = global.FlowUI._getComponent(name);
+      if (c) return c;
+    }
+    return global[name];
+  }
+
+  var LIST_BASE_CLASS =
+    "inline-flex items-center justify-center gap-2 rounded-4 bg-fill-tertiary-fill-light-gray p-4";
+
+  /** Button variant classes for active (outline) vs inactive (ghost) */
+  var BUTTON_OUTLINE =
+    "shadow-soft-extra-small group bg-fill-quarternary-fill-white border-1/2 border-border-primary text-typography-primary-text hover:bg-fill-tertiary-fill-light-gray active:bg-fill-secondary-fill-gray disabled:opacity-50 disabled:border-fill-secondary-fill-gray";
+  var BUTTON_GHOST =
+    "group text-typography-primary-text hover:bg-fill-tertiary-fill-light-gray active:bg-fill-secondary-fill-gray disabled:text-typography-quaternary-text";
+  var BUTTON_BASE =
+    "inline-flex items-center justify-center whitespace-nowrap !text-med-12 transition-colors disabled:pointer-events-none hover:cursor-pointer h-fit";
+  var BUTTON_SIZES = {
+    default: "px-8 py-4 gap-4 rounded-4",
+    small: "px-8 py-4 gap-4 rounded-4",
+    large: "px-16 py-8 gap-4 rounded-4",
+  };
+
+  var CONTENT_BASE_CLASS =
+    "ring-offset-background focus-visible:ring-ring h-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2";
+
+  function join() {
+    return Array.prototype.filter.call(arguments, Boolean).join(" ");
+  }
+
+  /**
+   * Create a full Tabs component (list + triggers + content panels)
+   * @param {Object} config
+   * @param {string} [config.defaultValue] - initial active tab value
+   * @param {string} [config.value] - controlled active value
+   * @param {Function} [config.onChange] - (value) => void when tab changes
+   * @param {Array<{value: string, label: string, content: HTMLElement|string}>} config.tabs - tab definitions
+   * @param {string} [config.size] - 'default' | 'small' | 'large'
+   * @param {string} [config.listClassName] - extra class on list
+   * @param {string} [config.contentClassName] - extra class on content wrapper
+   * @returns {HTMLElement} root element (wrapper containing list + content area)
+   */
+  function create(config) {
+    var opts = config || {};
+    var defaultValue = opts.defaultValue;
+    var controlledValue = opts.value;
+    var onChange = opts.onChange;
+    var tabs = opts.tabs || [];
+    var size = opts.size || "default";
+    var listClassName = opts.listClassName || "";
+    var contentClassName = opts.contentClassName || "";
+
+    var sizeClass = BUTTON_SIZES[size] || BUTTON_SIZES.default;
+
+    var root = document.createElement("div");
+    root.className = "tabs-root w-full";
+
+    var activeValue = controlledValue !== undefined ? controlledValue : defaultValue !== undefined ? defaultValue : (tabs[0] && tabs[0].value) || "";
+
+    // List container
+    var list = document.createElement("div");
+    list.setAttribute("role", "tablist");
+    list.className = join(LIST_BASE_CLASS, listClassName);
+
+    // Content container (holds all panels; we show/hide by value)
+    var contentWrapper = document.createElement("div");
+    contentWrapper.className = join("tabs-content-wrapper mt-4", contentClassName);
+
+    var triggerEls = [];
+    var contentPanels = [];
+
+    var Button = getComponent("Button");
+
+    tabs.forEach(function (tab, index) {
+      var value = tab.value;
+      var label = tab.label != null ? tab.label : value;
+      var content = tab.content;
+
+      var isActive = value === activeValue;
+      var trigger = Button.create({
+        variant: isActive ? "outline" : "ghost",
+        size: size === "small" ? "small" : size === "large" ? "large" : "default",
+        text: label,
+        type: "button",
+        className: "mx-2",
+        onClick: function () {
+          if (activeValue === value) return;
+          if (controlledValue === undefined) {
+            activeValue = value;
+            updateActiveState();
+          }
+          if (typeof onChange === "function") {
+            onChange(value);
+          }
+        },
+      });
+
+      trigger.setAttribute("role", "tab");
+      trigger.setAttribute("aria-selected", value === activeValue ? "true" : "false");
+      trigger.setAttribute("data-state", value === activeValue ? "active" : "inactive");
+      trigger.setAttribute("data-value", value);
+      trigger.tabIndex = value === activeValue ? 0 : -1;
+
+      trigger.addEventListener("keydown", function (e) {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          trigger.click();
+        }
+        if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+          e.preventDefault();
+          var nextIndex = e.key === "ArrowRight" ? index + 1 : index - 1;
+          if (nextIndex >= 0 && nextIndex < tabs.length) {
+            var nextTrigger = triggerEls[nextIndex];
+            if (nextTrigger) {
+              nextTrigger.focus();
+              nextTrigger.click();
+            }
+          }
+        }
+      });
+
+      list.appendChild(trigger);
+      triggerEls.push(trigger);
+
+      var panel = document.createElement("div");
+      panel.setAttribute("role", "tabpanel");
+      panel.setAttribute("aria-hidden", value !== activeValue ? "true" : "false");
+      panel.setAttribute("data-value", value);
+      panel.className = join(CONTENT_BASE_CLASS, value !== activeValue ? "hidden" : "");
+      if (typeof content === "string") {
+        panel.innerHTML = content;
+      } else if (content && content.nodeType === 1) {
+        panel.appendChild(content);
+      }
+      contentWrapper.appendChild(panel);
+      contentPanels.push(panel);
+    });
+
+    function updateActiveState() {
+      triggerEls.forEach(function (t, i) {
+        var val = tabs[i] && tabs[i].value;
+        var isActive = val === activeValue;
+        t.setAttribute("aria-selected", isActive ? "true" : "false");
+        t.setAttribute("data-state", isActive ? "active" : "inactive");
+        t.tabIndex = isActive ? 0 : -1;
+        t.className = join(BUTTON_BASE, isActive ? BUTTON_OUTLINE : BUTTON_GHOST, sizeClass, "mx-2");
+      });
+      contentPanels.forEach(function (p, i) {
+        var val = tabs[i] && tabs[i].value;
+        var isActive = val === activeValue;
+        p.setAttribute("aria-hidden", isActive ? "false" : "true");
+        p.classList.toggle("hidden", !isActive);
+      });
+    }
+
+    root.appendChild(list);
+    root.appendChild(contentWrapper);
+
+    root.getValue = function () {
+      return activeValue;
+    };
+
+    root.setValue = function (newValue) {
+      if (newValue === activeValue) return;
+      activeValue = newValue;
+      updateActiveState();
+    };
+
+    return root;
+  }
+
+  var Tabs = {
+    create: create,
+  };
+
+  if (typeof module !== "undefined" && module.exports) {
+    module.exports = Tabs;
+  } else {
+    global.Tabs = Tabs;
+  }
+})(typeof window !== "undefined" ? window : this);

package/core/flow.js

@@ -1374,6 +1374,38 @@
     });
   }
 
+  /**
+   * Create a Tabs component (list + triggers + content panels)
+   * @param {Object} config - { defaultValue?, value?, onChange?, tabs: [{ value, label, content }], size?, variant?, listClassName?, contentClassName? }
+   * @returns {HTMLElement} Tabs root element
+   */
+  function createTabs(config) {
+    const Tabs = getComponent("Tabs");
+    if (Tabs && typeof Tabs.create === "function") {
+      return Tabs.create(config);
+    }
+    const fallback = document.createElement("div");
+    fallback.className = "tabs-root";
+    fallback.textContent = "Tabs component not loaded.";
+    return fallback;
+  }
+
+  /**
+   * Create a Steps component (numbered step triggers + optional content panels)
+   * @param {Object} config - { steps: [{ id, label, content? }], defaultValue?, value?, onChange?, size?, variant?, listClassName?, contentClassName?, showContent? }
+   * @returns {HTMLElement} Steps root element
+   */
+  function createSteps(config) {
+    const Steps = getComponent("Steps");
+    if (Steps && typeof Steps.create === "function") {
+      return Steps.create(config);
+    }
+    const fallback = document.createElement("div");
+    fallback.className = "steps-root";
+    fallback.textContent = "Steps component not loaded.";
+    return fallback;
+  }
+
   // ============================================================================
   // TABLE COMPONENT
   // ============================================================================
@@ -1736,6 +1768,8 @@
 
     // Stepper
     renderStepper,
+    createTabs,
+    createSteps,
 
     // Alerts
     renderAlerts,