@superleapai/flow-ui 1.0.0

package/components/phone-input/phone-input.js

@@ -0,0 +1,392 @@
+/**
+ * Phone Input Component
+ * International phone number input with country selector
+ */
+
+(function (global) {
+  "use strict";
+
+  if (!global.PhoneInputUtils) {
+    console.error("[PhoneInput] PhoneInputUtils is required");
+    return;
+  }
+
+  const utils = global.PhoneInputUtils;
+
+  /** Resolve component by name (works after index.js captures and removes globals). */
+  function getComponent(name) {
+    if (typeof global.FlowUI !== "undefined" && typeof global.FlowUI._getComponent === "function") {
+      const c = global.FlowUI._getComponent(name);
+      if (c) return c;
+    }
+    return global[name];
+  }
+
+  // Selector icon SVG
+  const SELECTOR_ICON =
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>';
+
+  const SEARCH_ICON =
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>';
+
+  const CHECK_ICON =
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>';
+
+  /**
+   * Create a phone input component
+   * @param {Object} config
+   * @param {string} [config.variant] - 'default' | 'error' | 'warning' | 'borderless' | 'inline'
+   * @param {string} [config.inputSize] - 'default' | 'large' | 'small'
+   * @param {string} [config.defaultCountryCode] - Default country code (e.g., 'US', 'IN')
+   * @param {string} [config.defaultPhoneNumber] - Default phone number in format "callingCode-nationalNumber"
+   * @param {boolean} [config.disabled]
+   * @param {boolean} [config.disableCountrySelect] - Disable country selector
+   * @param {boolean} [config.hideCountrySelect] - Hide country selector completely
+   * @param {string} [config.placeholder] - Custom placeholder (overrides auto-generated)
+   * @param {string} [config.className] - Extra class for wrapper
+   * @param {string} [config.countryCodeClassName] - Extra class for country selector
+   * @param {Function} [config.onCountryChange] - Called when country changes (country)
+   * @param {Function} [config.onPhoneNumberChange] - Called when phone number changes (fullValue)
+   * @param {Function} [config.onChange] - Called when either changes (fullValue, country)
+   * @returns {HTMLElement} Phone input wrapper
+   */
+  function create(config = {}) {
+    const variant = config.variant || "default";
+    const inputSize = config.inputSize || "default";
+    const disabled = !!config.disabled;
+    const disableCountrySelect = !!config.disableCountrySelect;
+    const hideCountrySelect = !!config.hideCountrySelect;
+
+    const options = utils.getCountriesOptions();
+
+    // Determine initial country
+    let initialCountry = null;
+    if (config.defaultPhoneNumber) {
+      const parsed = utils.parsePhoneNumber(config.defaultPhoneNumber);
+      if (parsed.callingCode) {
+        const countryCode = utils.getCountryCodeFromCallingCode(
+          parsed.callingCode
+        );
+        if (countryCode) {
+          initialCountry = options.find((opt) => opt.value === countryCode);
+        }
+      }
+    }
+    if (!initialCountry && config.defaultCountryCode) {
+      initialCountry = options.find(
+        (opt) => opt.value === config.defaultCountryCode
+      );
+    }
+    // Default to India if no country specified
+    if (!initialCountry) {
+      initialCountry = options.find((opt) => opt.value === "IN") || options[0];
+    }
+
+    let currentCountry = initialCountry;
+    let phoneNumber = "";
+
+    // Parse initial phone number
+    if (config.defaultPhoneNumber) {
+      const parsed = utils.parsePhoneNumber(config.defaultPhoneNumber);
+      phoneNumber = parsed.nationalNumber;
+    }
+
+    // Main wrapper
+    const wrapper = document.createElement("div");
+    wrapper.className = "flex w-full flex-col gap-4";
+
+    // Row container
+    const row = document.createElement("div");
+    row.className = "flex items-center gap-2";
+
+    // Country selector (combobox-style with popover)
+    let countrySelector = null;
+    if (!hideCountrySelect) {
+      countrySelector = createCountrySelector({
+        variant,
+        inputSize,
+        disabled: disabled || disableCountrySelect,
+        options,
+        value: currentCountry,
+        getValue: () => currentCountry,
+        className: config.countryCodeClassName,
+        onChange: (country) => {
+          currentCountry = country;
+          updatePlaceholder();
+          if (config.onCountryChange) config.onCountryChange(country);
+          const fullValue = utils.formatPhoneNumber(
+            country.indicatif,
+            phoneNumber
+          );
+          if (config.onPhoneNumberChange)
+            config.onPhoneNumberChange(fullValue);
+          if (config.onChange) config.onChange(fullValue, country);
+        },
+      });
+      row.appendChild(countrySelector);
+    }
+
+    // Phone number input
+    const InputComponent = getComponent("InputComponent");
+    if (!InputComponent || typeof InputComponent.create !== "function") {
+      console.error("[PhoneInput] InputComponent is required");
+      return wrapper;
+    }
+    const phoneInputWrapper = InputComponent.create({
+      variant,
+      inputSize,
+      type: "tel",
+      placeholder:
+        config.placeholder || utils.getExampleFormat(currentCountry.value),
+      value: phoneNumber,
+      disabled,
+      className: config.className || "",
+      onInput: (e) => {
+        const input = e.target;
+        const digitsOnly = (input.value || "").replace(/\D/g, "");
+        if (input.value !== digitsOnly) {
+          input.value = digitsOnly;
+        }
+        phoneNumber = digitsOnly;
+        const fullValue = utils.formatPhoneNumber(
+          currentCountry.indicatif,
+          phoneNumber
+        );
+        if (config.onPhoneNumberChange) config.onPhoneNumberChange(fullValue);
+        if (config.onChange) config.onChange(fullValue, currentCountry);
+      },
+    });
+
+    row.appendChild(phoneInputWrapper);
+    wrapper.appendChild(row);
+
+    function updatePlaceholder() {
+      const input = phoneInputWrapper.getInput();
+      if (input) {
+        input.placeholder =
+          config.placeholder || utils.getExampleFormat(currentCountry.value);
+      }
+      // Update prefix
+      if (!hideCountrySelect) {
+        const prefix = phoneInputWrapper.querySelector(
+          "span.text-typography-quaternary-text"
+        );
+        if (prefix) {
+          prefix.textContent = `+${currentCountry.indicatif}`;
+        }
+      }
+    }
+
+    // Public API
+    wrapper.getValue = function () {
+      return utils.formatPhoneNumber(currentCountry.indicatif, phoneNumber);
+    };
+
+    wrapper.setValue = function (value) {
+      const parsed = utils.parsePhoneNumber(value);
+      if (parsed.callingCode) {
+        const countryCode = utils.getCountryCodeFromCallingCode(
+          parsed.callingCode
+        );
+        if (countryCode) {
+          const country = options.find((opt) => opt.value === countryCode);
+          if (country) {
+            currentCountry = country;
+            if (countrySelector) {
+              // Update country selector display
+              const triggerInput = countrySelector.querySelector("input");
+              if (triggerInput) {
+                triggerInput.value = utils.isoToEmoji(country.value) + " " + country.indicatif;
+              }
+            }
+          }
+        }
+      }
+      phoneNumber = parsed.nationalNumber;
+      phoneInputWrapper.setValue(phoneNumber);
+      updatePlaceholder();
+    };
+
+    wrapper.getCountry = function () {
+      return currentCountry;
+    };
+
+    wrapper.setCountry = function (countryCode) {
+      const country = options.find((opt) => opt.value === countryCode);
+      if (country) {
+        currentCountry = country;
+        if (countrySelector) {
+          const triggerInput = countrySelector.querySelector("input");
+          if (triggerInput) {
+            triggerInput.value = utils.isoToEmoji(country.value) + " " + country.indicatif;
+          }
+        }
+        updatePlaceholder();
+      }
+    };
+
+    wrapper.setDisabled = function (d) {
+      phoneInputWrapper.setDisabled(d);
+      if (countrySelector) {
+        const triggerInput = countrySelector.querySelector("input");
+        if (triggerInput) {
+          triggerInput.disabled = d;
+        }
+      }
+    };
+
+    return wrapper;
+  }
+
+  /**
+   * Create country selector (combobox with popover)
+   */
+  function createCountrySelector(config) {
+    const { variant, inputSize, disabled, options, value, getValue, className, onChange } =
+      config;
+    const getSelected = getValue && typeof getValue === "function" ? getValue : () => value;
+
+    const wrapper = document.createElement("div");
+    wrapper.className = "relative";
+
+    // Trigger (input with flag emoji)
+    const InputComponent = getComponent("InputComponent");
+    if (!InputComponent || typeof InputComponent.create !== "function") return wrapper;
+    const trigger = InputComponent.create({
+      variant,
+      inputSize,
+      type: "button",
+      value: utils.isoToEmoji(value.value) + " " + value.indicatif,
+      disabled,
+      readOnly: true,
+      showReadOnlyIcon: false,
+      className: "w-fit !gap-x-2 cursor-pointer " + (className || ""),
+      endIcon: SELECTOR_ICON,
+    });
+
+    const triggerInput = trigger.getInput();
+    triggerInput.style.cursor = "pointer";
+    triggerInput.style.caretColor = "transparent";
+
+    wrapper.appendChild(trigger);
+
+    // Create popover content (using Select component styles)
+    const popoverContent = document.createElement("div");
+    popoverContent.className = "w-[280px] max-w-full";
+
+    // Search input
+    const searchWrapper = document.createElement("div");
+    searchWrapper.className = "py-2 border-b-1/2 border-border-primary";
+
+    const searchInput = InputComponent.create({
+      variant: "borderless",
+      inputSize: "small",
+      type: "text",
+      placeholder: "Find your country...",
+      startIcon: SEARCH_ICON,
+    });
+
+    searchWrapper.appendChild(searchInput);
+    popoverContent.appendChild(searchWrapper);
+
+    // Options list (using Select component's option styles)
+    const listWrapper = document.createElement("div");
+    listWrapper.className =
+      "overflow-y-auto max-h-[200px] p-2 w-full rounded-4 bg-fill-quarternary-fill-white";
+
+    function renderOptions(filter = "") {
+      listWrapper.innerHTML = "";
+      const filtered = options.filter((opt) =>
+        opt.label.toLowerCase().includes(filter.toLowerCase())
+      );
+
+      if (filtered.length === 0) {
+        const empty = document.createElement("div");
+        empty.className =
+          "flex h-full min-h-[100px] w-full items-center justify-center p-4 !text-reg-13 text-typography-quaternary-text";
+        empty.textContent = "No country found.";
+        listWrapper.appendChild(empty);
+        return;
+      }
+
+      filtered.forEach((opt) => {
+        const selected = getSelected();
+        const isSelected = selected && selected.value === opt.value;
+        
+        // Using Select component's option classes
+        const item = document.createElement("div");
+        item.setAttribute("role", "option");
+        item.setAttribute("data-value", opt.value);
+        item.setAttribute("aria-selected", isSelected);
+        item.className = [
+          "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" : ""
+        ].filter(Boolean).join(" ");
+
+        const label = document.createElement("span");
+        label.className = "flex items-center gap-8 flex-1 truncate";
+        label.textContent = `${utils.isoToEmoji(opt.value)} ${opt.label}`;
+        item.appendChild(label);
+
+        if (isSelected) {
+          const check = document.createElement("span");
+          check.className = "ml-auto text-primary-base size-16";
+          check.innerHTML = CHECK_ICON;
+          item.appendChild(check);
+        }
+
+        item.addEventListener("click", () => {
+          triggerInput.value = utils.isoToEmoji(opt.value) + " " + opt.indicatif;
+          onChange(opt);
+          popover.hide();
+        });
+
+        listWrapper.appendChild(item);
+      });
+    }
+
+    renderOptions();
+    popoverContent.appendChild(listWrapper);
+
+    // Search handler
+    const searchInputEl = searchInput.getInput();
+    searchInputEl.addEventListener("input", (e) => {
+      renderOptions(e.target.value);
+    });
+
+    // Create popover
+    const Popover = getComponent("Popover");
+    if (!Popover || typeof Popover.create !== "function") return wrapper;
+    const popover = Popover.create({
+      trigger,
+      content: popoverContent,
+      placement: "bottom",
+      align: "start",
+      closeOnClickOutside: true,
+      bodyClassName: "p-0",
+      panelClassName: "w-[280px]",
+      onOpen: () => {
+        searchInputEl.value = "";
+        renderOptions();
+        // Focus search input after popover opens
+        setTimeout(() => searchInputEl.focus(), 100);
+      },
+    });
+
+    if (!disabled) {
+      trigger.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      });
+    }
+
+    return wrapper;
+  }
+
+  global.PhoneInput = {
+    create,
+  };
+
+  console.log("[PhoneInput] Component loaded successfully");
+})(typeof window !== "undefined" ? window : this);

package/components/phone-input/phone-utils.js

@@ -0,0 +1,157 @@
+/**
+ * Phone Input Utilities
+ * Country data and helper functions for phone number formatting
+ */
+
+(function (global) {
+  "use strict";
+
+  // Country codes with calling codes and names
+  const COUNTRIES_DATA = [
+    { code: "US", name: "United States", callingCode: "1" },
+    { code: "GB", name: "United Kingdom", callingCode: "44" },
+    { code: "CA", name: "Canada", callingCode: "1" },
+    { code: "AU", name: "Australia", callingCode: "61" },
+    { code: "IN", name: "India", callingCode: "91" },
+    { code: "DE", name: "Germany", callingCode: "49" },
+    { code: "FR", name: "France", callingCode: "33" },
+    { code: "IT", name: "Italy", callingCode: "39" },
+    { code: "ES", name: "Spain", callingCode: "34" },
+    { code: "BR", name: "Brazil", callingCode: "55" },
+    { code: "MX", name: "Mexico", callingCode: "52" },
+    { code: "AR", name: "Argentina", callingCode: "54" },
+    { code: "CN", name: "China", callingCode: "86" },
+    { code: "JP", name: "Japan", callingCode: "81" },
+    { code: "KR", name: "South Korea", callingCode: "82" },
+    { code: "RU", name: "Russia", callingCode: "7" },
+    { code: "ZA", name: "South Africa", callingCode: "27" },
+    { code: "NG", name: "Nigeria", callingCode: "234" },
+    { code: "EG", name: "Egypt", callingCode: "20" },
+    { code: "AE", name: "United Arab Emirates", callingCode: "971" },
+    { code: "SA", name: "Saudi Arabia", callingCode: "966" },
+    { code: "SG", name: "Singapore", callingCode: "65" },
+    { code: "MY", name: "Malaysia", callingCode: "60" },
+    { code: "TH", name: "Thailand", callingCode: "66" },
+    { code: "ID", name: "Indonesia", callingCode: "62" },
+    { code: "PH", name: "Philippines", callingCode: "63" },
+    { code: "VN", name: "Vietnam", callingCode: "84" },
+    { code: "PK", name: "Pakistan", callingCode: "92" },
+    { code: "BD", name: "Bangladesh", callingCode: "880" },
+    { code: "NZ", name: "New Zealand", callingCode: "64" },
+    { code: "IE", name: "Ireland", callingCode: "353" },
+    { code: "NL", name: "Netherlands", callingCode: "31" },
+    { code: "BE", name: "Belgium", callingCode: "32" },
+    { code: "CH", name: "Switzerland", callingCode: "41" },
+    { code: "AT", name: "Austria", callingCode: "43" },
+    { code: "SE", name: "Sweden", callingCode: "46" },
+    { code: "NO", name: "Norway", callingCode: "47" },
+    { code: "DK", name: "Denmark", callingCode: "45" },
+    { code: "FI", name: "Finland", callingCode: "358" },
+    { code: "PL", name: "Poland", callingCode: "48" },
+    { code: "PT", name: "Portugal", callingCode: "351" },
+    { code: "GR", name: "Greece", callingCode: "30" },
+    { code: "TR", name: "Turkey", callingCode: "90" },
+    { code: "IL", name: "Israel", callingCode: "972" },
+    { code: "CL", name: "Chile", callingCode: "56" },
+    { code: "CO", name: "Colombia", callingCode: "57" },
+    { code: "PE", name: "Peru", callingCode: "51" },
+    { code: "VE", name: "Venezuela", callingCode: "58" },
+  ];
+
+  // ISO 3166-1 alpha-2 to emoji flag
+  function isoToEmoji(code) {
+    if (!code || code.length !== 2) return "";
+    const codePoints = code
+      .toUpperCase()
+      .split("")
+      .map((char) => 127397 + char.charCodeAt(0));
+    return String.fromCodePoint(...codePoints);
+  }
+
+  // Get all countries as options for select/combobox
+  function getCountriesOptions() {
+    return COUNTRIES_DATA.map((country) => ({
+      value: country.code,
+      label: country.name,
+      indicatif: country.callingCode,
+    }));
+  }
+
+  // Find country by code
+  function getCountryByCode(code) {
+    return COUNTRIES_DATA.find((c) => c.code === code);
+  }
+
+  // Find country by calling code
+  function getCountryCodeFromCallingCode(callingCode) {
+    const normalized = callingCode.replace(/^\+/, "");
+    const country = COUNTRIES_DATA.find((c) => c.callingCode === normalized);
+    return country ? country.code : null;
+  }
+
+  // Replace numbers with zeros for placeholder (e.g., "+1 (555) 123-4567" -> "+1 (000) 000-0000")
+  function replaceNumbersWithZeros(str) {
+    return str.replace(/\d/g, "0");
+  }
+
+  // Get example phone number format for a country
+  function getExampleFormat(countryCode) {
+    const formats = {
+      US: "(000) 000-0000",
+      GB: "00000 000000",
+      IN: "00000 00000",
+      CA: "(000) 000-0000",
+      AU: "0000 000 000",
+      DE: "0000 0000000",
+      FR: "00 00 00 00 00",
+      IT: "000 000 0000",
+      ES: "000 00 00 00",
+      BR: "(00) 00000-0000",
+      MX: "00 0000 0000",
+      CN: "000 0000 0000",
+      JP: "00-0000-0000",
+      KR: "00-0000-0000",
+      RU: "(000) 000-00-00",
+    };
+    return formats[countryCode] || "000000000000";
+  }
+
+  // Parse phone number from format "callingCode-nationalNumber"
+  function parsePhoneNumber(value) {
+    if (!value) return { callingCode: "", nationalNumber: "" };
+    const parts = value.split("-");
+    if (parts.length === 2) {
+      return {
+        callingCode: parts[0].replace(/^\+/, ""),
+        nationalNumber: parts[1],
+      };
+    }
+    // Try to extract calling code from beginning
+    const match = value.match(/^\+?(\d{1,4})/);
+    if (match) {
+      return {
+        callingCode: match[1],
+        nationalNumber: value.substring(match[0].length),
+      };
+    }
+    return { callingCode: "", nationalNumber: value };
+  }
+
+  // Format phone number as "callingCode-nationalNumber"
+  function formatPhoneNumber(callingCode, nationalNumber) {
+    if (!nationalNumber) return callingCode || "";
+    return callingCode ? `${callingCode}-${nationalNumber}` : nationalNumber;
+  }
+
+  global.PhoneInputUtils = {
+    COUNTRIES_DATA,
+    isoToEmoji,
+    getCountriesOptions,
+    getCountryByCode,
+    getCountryCodeFromCallingCode,
+    replaceNumbersWithZeros,
+    getExampleFormat,
+    parsePhoneNumber,
+    formatPhoneNumber,
+  };
+})(typeof window !== "undefined" ? window : this);