@superleapai/flow-ui 1.0.0

package/components/alert.js

@@ -0,0 +1,282 @@
+/**
+ * Alert Component (vanilla JS, Tailwind)
+ * Alert notification component with multiple variants.
+ * Displays contextual feedback messages with optional icons and actions.
+ */
+
+(function (global) {
+  "use strict";
+
+  // SVG Icons
+  const ICONS = {
+    alertCircle: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>`,
+    circleCheck: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>`,
+    infoCircle: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>`,
+    playstationX: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>`,
+    x: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>`,
+  };
+
+  // Variant to icon mapping
+  const VARIANT_ICONS = {
+    default: null,
+    destructive: "playstationX",
+    warning: "alertCircle",
+    error: "playstationX",
+    success: "circleCheck",
+    info: "infoCircle",
+  };
+
+  /**
+   * Get variant-specific Tailwind classes
+   */
+  function getVariantClasses(variant) {
+    const variants = {
+      default: {
+        container: "bg-fill-quarternary-fill-white border-borderColor-border-primary",
+        title: "text-typography-primary-text",
+        description: "text-typography-secondary-text",
+      },
+      destructive: {
+        container: "bg-fill-quarternary-fill-white border-error-border",
+        title: "text-error-text-base",
+        description: "text-error-text-base",
+      },
+      warning: {
+        container: "bg-warning-surface border-warning-border",
+        title: "text-warning-text-base",
+        description: "text-warning-text-base",
+      },
+      error: {
+        container: "bg-error-surface border-error-border",
+        title: "text-error-text-base",
+        description: "text-error-text-base",
+      },
+      success: {
+        container: "bg-success-surface border-success-border",
+        title: "text-success-text-base",
+        description: "text-success-text-base",
+      },
+      info: {
+        container: "bg-info-surface border-info-border",
+        title: "text-info-text-base",
+        description: "text-info-text-base",
+      },
+    };
+    return variants[variant] || variants.default;
+  }
+
+  /**
+   * Create an alert element
+   * @param {Object} config - Configuration object
+   * @param {string} config.title - Alert title (optional)
+   * @param {string} config.description - Alert description/message
+   * @param {string} [config.variant='default'] - 'default' | 'destructive' | 'warning' | 'error' | 'success' | 'info'
+   * @param {HTMLElement|string} [config.icon] - Custom icon element or HTML string (optional)
+   * @param {HTMLElement|string} [config.action] - Action element or HTML string (optional, e.g., close button)
+   * @param {string} [config.className] - Additional CSS classes
+   * @returns {HTMLElement} Alert element
+   */
+  function create(config = {}) {
+    const {
+      title = "",
+      description = "",
+      variant = "default",
+      icon = null,
+      action = null,
+      className = "",
+    } = config;
+
+    if (!description && !title) {
+      console.warn("[Alert] No title or description provided");
+      return null;
+    }
+
+    const variantClasses = getVariantClasses(variant);
+
+    // Create alert root element
+    const alert = document.createElement("div");
+    alert.setAttribute("data-slot", "alert");
+    alert.setAttribute("role", "alert");
+    
+    // Base classes - using flex layout for better control
+    const baseClasses = "flex gap-8 rounded-4 border-1/2 p-8 text-left w-full";
+    
+    alert.className = `${baseClasses} ${variantClasses.container} ${className}`.trim();
+
+    // Add icon if provided or if variant has default icon
+    const iconKey = VARIANT_ICONS[variant];
+    if (icon !== null || iconKey) {
+      const iconWrapper = document.createElement("div");
+      iconWrapper.className = "flex-shrink-0 flex items-start pt-2";
+      iconWrapper.style.cssText = "width: 16px; height: 16px;";
+      
+      if (icon !== null) {
+        if (typeof icon === "string") {
+          iconWrapper.innerHTML = icon;
+        } else if (icon instanceof HTMLElement) {
+          iconWrapper.appendChild(icon);
+        }
+      } else if (iconKey) {
+        iconWrapper.innerHTML = ICONS[iconKey];
+      }
+      
+      alert.appendChild(iconWrapper);
+    }
+
+    // Create content wrapper for title and description
+    const contentWrapper = document.createElement("div");
+    contentWrapper.className = "flex-1 flex flex-col gap-4 min-w-0";
+
+    // Create title if provided
+    if (title) {
+      const titleEl = document.createElement("div");
+      titleEl.setAttribute("data-slot", "alert-title");
+      titleEl.className = `text-med-12 ${variantClasses.title}`;
+      
+      if (typeof title === "string") {
+        titleEl.textContent = title;
+      } else if (title instanceof HTMLElement) {
+        titleEl.appendChild(title);
+      }
+      
+      contentWrapper.appendChild(titleEl);
+    }
+
+    // Create description if provided
+    if (description) {
+      const descEl = document.createElement("div");
+      descEl.setAttribute("data-slot", "alert-description");
+      descEl.className = `text-reg-12 ${variantClasses.description}`;
+      
+      if (typeof description === "string") {
+        descEl.textContent = description;
+      } else if (description instanceof HTMLElement) {
+        descEl.appendChild(description);
+      }
+      
+      contentWrapper.appendChild(descEl);
+    }
+
+    alert.appendChild(contentWrapper);
+
+    // Add action if provided
+    if (action !== null) {
+      const actionWrapper = document.createElement("div");
+      actionWrapper.setAttribute("data-slot", "alert-action");
+      actionWrapper.className = "flex-shrink-0 flex items-start pt-2";
+      actionWrapper.style.cssText = "margin-left: auto;";
+      
+      if (typeof action === "string") {
+        actionWrapper.innerHTML = action;
+      } else if (action instanceof HTMLElement) {
+        actionWrapper.appendChild(action);
+      }
+      
+      alert.appendChild(actionWrapper);
+    }
+
+    return alert;
+  }
+
+  /**
+   * Create a simple alert with default styling
+   * @param {string} message - Alert message
+   * @param {string} [variant='default'] - Alert variant
+   * @param {Object} [options] - Additional options
+   * @returns {HTMLElement} Alert element
+   */
+  function simple(message, variant = "default", options = {}) {
+    return create({
+      description: message,
+      variant: variant,
+      ...options,
+    });
+  }
+
+  /**
+   * Create a success alert
+   * @param {string} message - Alert message
+   * @param {Object} [options] - Additional options
+   * @returns {HTMLElement} Alert element
+   */
+  function success(message, options = {}) {
+    return simple(message, "success", options);
+  }
+
+  /**
+   * Create an error alert
+   * @param {string} message - Alert message
+   * @param {Object} [options] - Additional options
+   * @returns {HTMLElement} Alert element
+   */
+  function error(message, options = {}) {
+    return simple(message, "error", options);
+  }
+
+  /**
+   * Create a warning alert
+   * @param {string} message - Alert message
+   * @param {Object} [options] - Additional options
+   * @returns {HTMLElement} Alert element
+   */
+  function warning(message, options = {}) {
+    return simple(message, "warning", options);
+  }
+
+  /**
+   * Create an info alert
+   * @param {string} message - Alert message
+   * @param {Object} [options] - Additional options
+   * @returns {HTMLElement} Alert element
+   */
+  function info(message, options = {}) {
+    return simple(message, "info", options);
+  }
+
+  /**
+   * Create a destructive alert
+   * @param {string} message - Alert message
+   * @param {Object} [options] - Additional options
+   * @returns {HTMLElement} Alert element
+   */
+  function destructive(message, options = {}) {
+    return simple(message, "destructive", options);
+  }
+
+  /**
+   * Create a close button for use in alert actions
+   * @param {Function} onClick - Click handler
+   * @param {string} [variant='default'] - Alert variant to match button color
+   * @returns {HTMLElement} Close button element
+   */
+  function createCloseButton(onClick, variant = 'default') {
+    const button = document.createElement("button");
+    button.type = "button";
+    
+    // Get the appropriate text color class based on variant
+    const variantClasses = getVariantClasses(variant);
+    const colorClass = variantClasses.title; // Use title color for consistency
+    
+    button.className = `flex items-center justify-center rounded-4 transition-opacity opacity-70 hover:opacity-100 focus:opacity-100 focus:outline-none ${colorClass}`;
+    button.style.cssText = "flex-shrink: 0; width: 20px; height: 20px; border: none; background: transparent; cursor: pointer; padding: 2px;";
+    button.innerHTML = ICONS.x;
+    
+    if (onClick) {
+      button.addEventListener("click", onClick);
+    }
+    
+    return button;
+  }
+
+  // Export to global namespace
+  global.Alert = {
+    create,
+    simple,
+    success,
+    error,
+    warning,
+    info,
+    destructive,
+    createCloseButton,
+  };
+})(typeof window !== "undefined" ? window : this);

package/components/avatar.js

@@ -0,0 +1,195 @@
+/**
+ * Avatar Component (vanilla JS)
+ * Avatar, VividAvatar (name-based color), AvatarGroup, VividAvatarGroup.
+ * Uses stringToColor for deterministic background/text colors from a string (e.g. user name).
+ */
+
+(function (global) {
+  "use strict";
+
+  var AVATAR_BASE =
+    "flex shrink-0 overflow-hidden items-center justify-center bg-primary-base !text-typography-invert-text object-cover";
+
+  var AVATAR_SIZE = {
+    custom: "size-full",
+    large: "size-40 text-reg-14",
+    default: "size-32 text-reg-12",
+    small: "size-20 text-reg-12",
+  };
+
+  var AVATAR_SHAPE = {
+    circle: "rounded-128",
+    square: "rounded-4",
+  };
+
+  var GROUP_SPACING = {
+    custom: "-space-x-12",
+    large: "-space-x-12",
+    default: "-space-x-4",
+    small: "-space-x-8",
+  };
+
+  var VIVID_COLORS = [
+    { backgroundColor: "#f8cfcd", textColor: "#550b15" },
+    { backgroundColor: "#fde09b", textColor: "#5f1a05" },
+    { backgroundColor: "#a6eb84", textColor: "#004433" },
+    { backgroundColor: "#c7dcfc", textColor: "#0c2c5b" },
+    { backgroundColor: "#a5dbe2", textColor: "#002a2e" },
+    { backgroundColor: "#82ffd3", textColor: "#00916b" },
+    { backgroundColor: "#8eeee2", textColor: "#016f66" },
+    { backgroundColor: "#f8d5d8", textColor: "#5c0d21" },
+    { backgroundColor: "#fef7be", textColor: "#4a4410" },
+    { backgroundColor: "#f1d4fc", textColor: "#4c0e5f" },
+    { backgroundColor: "#f8d4eb", textColor: "#570e45" },
+    { backgroundColor: "#d9d8fc", textColor: "#2b0c7b" },
+    { backgroundColor: "#d8dcd2", textColor: "#233400" },
+    { backgroundColor: "#dbd6e1", textColor: "#371c51" },
+    { backgroundColor: "#bcfb94", textColor: "#213b0d" },
+    { backgroundColor: "#d4dcfc", textColor: "#190d8a" },
+    { backgroundColor: "#ffd2b1", textColor: "#4a2400" },
+  ];
+
+  function join() {
+    return Array.prototype.filter.call(arguments, Boolean).join(" ");
+  }
+
+  /**
+   * Map a string to a deterministic background and text color pair.
+   * @param {string} str - e.g. user name
+   * @returns {{ backgroundColor: string, textColor: string }}
+   */
+  function stringToColor(str) {
+    if (!str || typeof str !== "string") {
+      return { backgroundColor: "#f4f6f6", textColor: "#292929" };
+    }
+    var s = str.toLowerCase();
+    var hash = 0;
+    for (var i = 0; i < s.length; i += 1) {
+      hash = s.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    var idx = Math.abs(hash % VIVID_COLORS.length);
+    return VIVID_COLORS[idx];
+  }
+
+  /**
+   * Create a single Avatar element (no vivid colors).
+   * @param {Object} config
+   * @param {string} [config.name] - Used for fallback initial (first letter)
+   * @param {string} [config.image] - Image URL
+   * @param {'small'|'default'|'large'|'custom'} [config.size]
+   * @param {'circle'|'square'} [config.shape]
+   * @param {string} [config.className]
+   * @returns {HTMLElement}
+   */
+  function create(config) {
+    var size = (config && config.size) || "default";
+    var shape = (config && config.shape) || "circle";
+    var name = (config && config.name) || "";
+    var image = config && config.image;
+    var className = (config && config.className) || "";
+
+    var root = document.createElement("div");
+    root.className = join(AVATAR_BASE, AVATAR_SIZE[size], AVATAR_SHAPE[shape], className);
+
+    var fallback = document.createElement("span");
+    fallback.className = "flex h-full w-full items-center justify-center capitalize";
+    fallback.textContent = name ? name.charAt(0).toUpperCase() : "?";
+    root.appendChild(fallback);
+
+    if (image) {
+      var img = document.createElement("img");
+      img.src = image;
+      img.alt = name || "Avatar";
+      img.className = "h-full w-full object-cover";
+      img.setAttribute("referrerpolicy", "no-referrer");
+      img.onerror = function () {
+        img.style.display = "none";
+        fallback.style.display = "flex";
+      };
+      img.onload = function () {
+        fallback.style.display = "none";
+      };
+      fallback.style.display = "none";
+      root.appendChild(img);
+    }
+
+    return root;
+  }
+
+  /**
+   * Create a VividAvatar: same as Avatar but background and text color come from stringToColor(name).
+   * @param {Object} config - Same as create(), name is used for color and fallback initial
+   * @returns {HTMLElement}
+   */
+  function createVivid(config) {
+    var name = (config && config.name) || "";
+    var el = create(config);
+    var colors = stringToColor(name);
+    el.style.backgroundColor = colors.backgroundColor;
+    var fallbackSpan = el.querySelector("span");
+    if (fallbackSpan) fallbackSpan.style.color = colors.textColor;
+    return el;
+  }
+
+  /**
+   * Create an AvatarGroup (overlapping avatars, max 3 shown + remainder count).
+   * @param {Object} config
+   * @param {{ id: number, name: string, image?: string }[]} config.users
+   * @param {'small'|'default'|'large'|'custom'} [config.size]
+   * @param {string} [config.className]
+   * @returns {HTMLElement}
+   */
+  function createGroup(config) {
+    var users = (config && config.users) || [];
+    var size = (config && config.size) || "default";
+    var className = (config && config.className) || "";
+    var vivid = !!(config && config.vivid);
+
+    var wrap = document.createElement("div");
+    wrap.className = join("flex", GROUP_SPACING[size], className);
+
+    var displayUsers = users.slice(0, 3);
+    var remaining = users.length - 3;
+
+    displayUsers.forEach(function (user) {
+      var avatar = vivid
+        ? createVivid({ name: user.name, image: user.image, size: size, shape: "circle" })
+        : create({ name: user.name, image: user.image, size: size, shape: "circle" });
+      wrap.appendChild(avatar);
+    });
+
+    if (remaining > 0) {
+      var extra = create({
+        name: "",
+        size: size,
+        shape: "circle",
+      });
+      var fallback = extra.querySelector("span");
+      if (fallback) {
+        fallback.textContent = "+" + remaining;
+      }
+      wrap.appendChild(extra);
+    }
+
+    return wrap;
+  }
+
+  /**
+   * Create a VividAvatarGroup (each avatar uses name-based color).
+   * @param {Object} config - Same as createGroup()
+   * @returns {HTMLElement}
+   */
+  function createVividGroup(config) {
+    return createGroup(Object.assign({}, config, { vivid: true }));
+  }
+
+  global.Avatar = {
+    stringToColor: stringToColor,
+    create: create,
+    createVivid: createVivid,
+    createGroup: createGroup,
+    createVividGroup: createVividGroup,
+  };
+
+  console.log("[Avatar] Module loaded successfully");
+})(typeof window !== "undefined" ? window : this);

package/components/badge.js

@@ -0,0 +1,135 @@
+/**
+ * Badge Component (vanilla JS)
+ * Mirrors React Badge with cva-style variants: variant, color, size, startIcon, endIcon, icon.
+ * Use border-border-primary (flow convention) instead of border-borderColor-border-primary.
+ */
+
+(function (global) {
+  "use strict";
+
+  var BADGE_BASE =
+    "inline-flex  items-center gap-4  rounded-4 border-1/2 !text-med-12 transition-colors focus:outline-none";
+
+  var BADGE_COLOR = {
+    default: "bg-fill-tertiary-fill-light-gray text-typography-primary-text hover:text-typography-secondary-text border-border-primary ",
+    info: "text-info-text-base bg-info-surface-hover border-info-border-base",
+    warning: "text-warning-text-base bg-warning-surface-hover border-warning-border-base",
+    error: "text-error-text-base bg-error-surface-hover border-error-border-base",
+    success: "text-success-text-base bg-success-surface-hover border-success-border-base",
+  };
+
+  var BADGE_SIZE = {
+    small: "px-8 py-2",
+    medium: "px-8 py-6",
+    large: "px-8 py-6",
+  };
+
+  var ICON_BADGE_BASE =
+    "flex items-center justify-center p-4 text-typography-primary-text bg-fill-default-fill-gray rounded-4 border-1/2 border-border-primary !text-med-12 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2";
+
+  var ICON_BADGE_VARIANT = {
+    default: "bg-fill-default-fill-gray",
+    primary: "border-none",
+  };
+
+  var ICON_BADGE_COLOR = {
+    default: "bg-fill-default-fill-gray",
+    info: "text-info-text-base bg-info-surface-hover border-info-surface-hover",
+    warning: "text-warning-text-base bg-warning-surface-hover border-warning-surface-hover",
+    error: "text-error-text-base bg-error-surface-hover border-error-surface-hover",
+    success: "text-success-text-base bg-success-surface-hover border-success-surface-hover",
+  };
+
+  var ICON_WRAPPER_CLASS = "flex size-16 items-center justify-center";
+
+  function join() {
+    return Array.prototype.filter.call(arguments, Boolean).join(" ");
+  }
+
+  /**
+   * Create a Badge element
+   * @param {Object} config
+   * @param {'default'|'primary'} [config.variant]
+   * @param {'default'|'info'|'warning'|'error'|'success'} [config.color]
+   * @param {'small'|'medium'|'large'} [config.size] - default 'large' (React default)
+   * @param {string|HTMLElement} [config.startIcon] - HTML string or element before content
+   * @param {string|HTMLElement} [config.endIcon] - HTML string or element after content
+   * @param {string|HTMLElement} [config.icon] - if set, render icon-only badge (iconBadgeVariants)
+   * @param {string|HTMLElement} [config.content] - main content (text or node); use for non–icon-only badges
+   * @param {string} [config.className]
+   * @returns {HTMLElement}
+   */
+  function create(config) {
+    var variant = config.variant || "default";
+    var color = config.color || "default";
+    var size = config.size || "large";
+    var className = config.className || "";
+
+    if (config.icon) {
+      var iconBadge = document.createElement("div");
+      iconBadge.className = join(
+        ICON_BADGE_BASE,
+        ICON_BADGE_VARIANT[variant] || ICON_BADGE_VARIANT.default,
+        ICON_BADGE_COLOR[color] || ICON_BADGE_COLOR.default,
+        className
+      );
+      var iconContent = config.icon;
+      if (typeof iconContent === "string") {
+        iconBadge.innerHTML = iconContent;
+      } else if (iconContent && iconContent.nodeType === 1) {
+        iconBadge.appendChild(iconContent);
+      }
+      return iconBadge;
+    }
+
+    var badge = document.createElement("div");
+    badge.className = join(
+      BADGE_BASE,
+      BADGE_COLOR[color] || BADGE_COLOR.default,
+      BADGE_SIZE[size] || BADGE_SIZE.large,
+      className
+    );
+
+    if (config.startIcon) {
+      var startWrap = document.createElement("span");
+      startWrap.className = ICON_WRAPPER_CLASS;
+      if (typeof config.startIcon === "string") {
+        startWrap.innerHTML = config.startIcon;
+      } else if (config.startIcon && config.startIcon.nodeType === 1) {
+        startWrap.appendChild(config.startIcon);
+      }
+      badge.appendChild(startWrap);
+    }
+
+    if (config.content !== undefined && config.content !== null) {
+      var content = config.content;
+      if (typeof content === "string") {
+        badge.appendChild(document.createTextNode(content));
+      } else if (content && content.nodeType === 1) {
+        badge.appendChild(content);
+      }
+    }
+
+    if (config.endIcon) {
+      var endWrap = document.createElement("span");
+      endWrap.className =
+        typeof config.endIcon === "string"
+          ? ICON_WRAPPER_CLASS
+          : "flex items-center justify-center shrink-0";
+      if (typeof config.endIcon === "string") {
+        endWrap.innerHTML = config.endIcon;
+      } else if (config.endIcon && config.endIcon.nodeType === 1) {
+        endWrap.appendChild(config.endIcon);
+      }
+      badge.appendChild(endWrap);
+    }
+
+    return badge;
+  }
+
+  global.Badge = {
+    create: create,
+  };
+
+  console.log("[Badge] Module loaded successfully");
+})(typeof window !== "undefined" ? window : this);