@superleapai/flow-ui 1.0.0

package/components/icon.js

@@ -0,0 +1,200 @@
+/**
+ * Icon Component (vanilla JS)
+ * Renders a span with optional Tabler-style icon (by name) and bg/text color classes.
+ * API aligned with React Icon: iconStr, color, fallbackIconStr, fullSizeIcon, stroke, className.
+ * Tabler Icons: https://tabler.io/icons
+ */
+
+(function (global) {
+  "use strict";
+
+  var TI =
+    ' xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"';
+  var TI_PATH_NONE = '<path stroke="none" d="M0 0h24v24H0z" fill="none"/>';
+
+  /** Tabler icon name -> SVG string (stroke 1.5). Used when iconStr matches. */
+  var iconMap = {
+    IconDatabase:
+      "<svg" +
+      TI +
+      ' stroke-width="1.5">' +
+      TI_PATH_NONE +
+      '<path d="M4 6a8 3 0 1 0 16 0a8 3 0 1 0 -16 0"/><path d="M4 6v6a8 3 0 0 0 16 0v-6"/><path d="M4 12v6a8 3 0 0 0 16 0v-6"/></svg>',
+    IconUsers:
+      "<svg" +
+      TI +
+      ' stroke-width="1.5">' +
+      TI_PATH_NONE +
+      '<path d="M5 7a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"/><path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/><path d="M21 21v-2a4 4 0 0 0 -3 -3.85"/></svg>',
+    IconShield:
+      "<svg" +
+      TI +
+      ' stroke-width="1.5">' +
+      TI_PATH_NONE +
+      '<path d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3"/></svg>',
+    IconLayout:
+      "<svg" +
+      TI +
+      ' stroke-width="1.5">' +
+      TI_PATH_NONE +
+      '<path d="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"/><path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"/><path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"/><path d="M14 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"/></svg>',
+    IconUser:
+      "<svg" +
+      TI +
+      ' stroke-width="1.5">' +
+      TI_PATH_NONE +
+      '<path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"/><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"/></svg>',
+    IconCurrencyDollar:
+      "<svg" +
+      TI +
+      ' stroke-width="1.5">' +
+      TI_PATH_NONE +
+      '<path d="M16.7 8a3 3 0 0 0 -2.7 -2h-4a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6h-4a3 3 0 0 1 -2.7 -2"/><path d="M12 3v3m0 12v3"/></svg>',
+    IconPhone:
+      "<svg" +
+      TI +
+      ' stroke-width="1.5">' +
+      TI_PATH_NONE +
+      '<path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2"/></svg>',
+    IconMessage:
+      "<svg" +
+      TI +
+      ' stroke-width="1.5">' +
+      TI_PATH_NONE +
+      '<path d="M8 9h8"/><path d="M8 13h6"/><path d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12"/></svg>',
+    IconClock:
+      "<svg" +
+      TI +
+      ' stroke-width="1.5">' +
+      TI_PATH_NONE +
+      '<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/><path d="M12 7v5l4 2"/></svg>',
+    IconMail:
+      "<svg" +
+      TI +
+      ' stroke-width="1.5">' +
+      TI_PATH_NONE +
+      '<path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10"/><path d="M3 7l9 6l9 -6"/></svg>',
+    /** Filled circle for "just color" mode (IconOrColor when only icon_color is set) */
+    IconCircleFilled:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="currentColor"/></svg>',
+  };
+
+  function join() {
+    return Array.prototype.filter.call(arguments, Boolean).join(" ");
+  }
+
+  /**
+   * IconOrColor config: { start_icon?: string, icon_color?: string }.
+   * Treat as empty: empty string, null, undefined, or empty array.
+   */
+  function isFieldValueEmpty(value) {
+    if (value === null || value === undefined) return true;
+    if (typeof value === "string" && value.trim() === "") return true;
+    if (Array.isArray(value) && value.length === 0) return true;
+    return false;
+  }
+
+  /** Simple emoji check: single character in common emoji ranges */
+  function isEmoji(str) {
+    if (!str || typeof str !== "string") return false;
+    var s = str.trim();
+    if (s.length === 0 || s.length > 4) return false;
+    var code = s.charCodeAt(0);
+    return (
+      (code >= 0x1f300 && code <= 0x1f9ff) ||
+      (code >= 0x2600 && code <= 0x26ff) ||
+      (code >= 0x2700 && code <= 0x27bf) ||
+      code === 0xfe0f
+    );
+  }
+
+  /**
+   * Create an icon element.
+   * @param {Object} config
+   * @param {string} [config.iconStr] - Icon name (e.g. IconUsers, IconDatabase)
+   * @param {string} [config.iconSvg] - Optional raw SVG string; if set, used instead of iconMap[iconStr]
+   * @param {string} [config.color] - Token for bg/text (e.g. 'primary', 'neutral'); used as bg-{color}-surface-hover text-{color}-text-base
+   * @param {string} [config.fallbackIconStr] - Fallback icon name when iconStr not in map (default 'IconDatabase')
+   * @param {boolean} [config.defaultIcon] - If true, render fallback when iconStr missing; otherwise can return null
+   * @param {boolean} [config.fullSizeIcon] - If true, icon SVG gets size-full class wrapper
+   * @param {number} [config.stroke] - Stroke width for icon (default 1.5); only affects SVG when we support dynamic stroke
+   * @param {string} [config.className] - Extra classes (e.g. size-20 shrink-0 for record-select)
+   * @returns {HTMLElement} span with icon and color classes
+   */
+  function create(config) {
+    var iconStr = (config && config.iconStr) || "";
+    var iconSvg = config && config.iconSvg;
+    var color = (config && config.color) != null ? config.color : "neutral";
+    var fallbackIconStr = (config && config.fallbackIconStr) || "IconDatabase";
+    var defaultIcon = !!(config && config.defaultIcon);
+    var fullSizeIcon = !!(config && config.fullSizeIcon);
+    var className = (config && config.className) || "";
+
+    if (isEmoji(iconStr)) {
+      var emojiSpan = document.createElement("span");
+      emojiSpan.className = join("pr-4", className);
+      emojiSpan.textContent = iconStr;
+      return emojiSpan;
+    }
+
+    var svgContent = iconSvg || iconMap[iconStr] || iconMap[fallbackIconStr];
+    if (!svgContent && !defaultIcon) return null;
+    if (!svgContent) svgContent = iconMap[fallbackIconStr] || iconMap.IconDatabase;
+
+    var span = document.createElement("span");
+    span.className = join(
+      "box-content flex size-16 items-center justify-center rounded-4",
+      "bg-" + color + "-surface-hover",
+      "text-" + color + "-text-base",
+      className
+    );
+
+    if (fullSizeIcon) {
+      var wrap = document.createElement("span");
+      wrap.className = "size-full flex items-center justify-center";
+      wrap.innerHTML = svgContent;
+      span.appendChild(wrap);
+    } else {
+      span.innerHTML = svgContent;
+    }
+
+    return span;
+  }
+
+  /**
+   * IconOrColor: show icon + color, or just color (filled circle), or nothing.
+   * Matches React IconOrColor: return null if both start_icon and icon_color are empty;
+   * if only icon_color set, render IconCircleFilled with that color; else render icon with color.
+   * @param {Object} config - { start_icon?: string, icon_color?: string }
+   * @param {string} [config.start_icon] - Icon name (e.g. IconUsers)
+   * @param {string} [config.icon_color] - Color token (e.g. 'primary', 'neutral')
+   * @param {string} [config.className] - Extra classes
+   * @returns {HTMLElement | null}
+   */
+  function createIconOrColor(config) {
+    if (!config) return null;
+    if (isFieldValueEmpty(config.start_icon) && isFieldValueEmpty(config.icon_color)) return null;
+
+    var isJustColor = isFieldValueEmpty(config.start_icon) && !isFieldValueEmpty(config.icon_color);
+    var color = config.icon_color || "neutral";
+    var extraClass = (config.className || "") + (isJustColor ? " !bg-transparent text-" + color + "-base" : "");
+
+    return create({
+      iconStr: isJustColor ? "IconCircleFilled" : config.start_icon,
+      color: color,
+      fallbackIconStr: "IconCircleFilled",
+      defaultIcon: true,
+      className: extraClass.trim(),
+    });
+  }
+
+  global.Icon = {
+    iconMap: iconMap,
+    create: create,
+    createIconOrColor: createIconOrColor,
+    isEmoji: isEmoji,
+    isFieldValueEmpty: isFieldValueEmpty,
+  };
+
+  console.log("[Icon] Module loaded successfully");
+})(typeof window !== "undefined" ? window : this);

package/components/input.js

@@ -0,0 +1,259 @@
+/**
+ * Input Component (vanilla JS)
+ * Design-system input with variants, sizes, status icons, and password toggle.
+ * Ref: React Input with cva variants; no React/cva/icons dependency.
+ */
+
+(function (global) {
+  "use strict";
+
+  // Inline SVGs (Tabler-style) – no external icon lib
+  var 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="2" 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="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>',
+    eye:
+      '<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="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>',
+    eyeOff:
+      '<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="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.16 13.16 0 0 0 2 12s3 7 10 7a9.9 9.9 0 0 0 5.39-1.61"/><line x1="2" y1="2" x2="22" y2="22"/></svg>',
+    lock:
+      '<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"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>',
+  };
+
+  var WRAPPER_CLASS = {
+    base:
+      "group flex items-center border-1/2 border-border-primary rounded-4 text-typography-primary-text gap-x-8 w-full transition-all ease-in-out",
+    default:
+      "bg-fill-quarternary-fill-white hover:border-primary-base focus-within:border-primary-base",
+    error:
+      "border-error-base bg-fill-quarternary-fill-white hover:border-error-base focus-within:border-error-base",
+    warning:
+      "border-warning-base bg-fill-quarternary-fill-white hover:border-warning-base focus-within:border-warning-base",
+    success:
+      "border-success-base bg-fill-quarternary-fill-white hover:border-success-base focus-within:border-success-base",
+    password:
+      "bg-fill-quarternary-fill-white hover:border-primary-base focus-within:border-primary-base",
+    borderless:
+      "border-none shadow-none rounded-0 bg-fill-quarternary-fill-white",
+    inline:
+      "border-transparent shadow-none rounded-0 bg-fill-quarternary-fill-white hover:bg-fill-tertiary-fill-light-gray focus-within:border-transparent focus:bg-fill-tertiary-fill-light-gray focus-within:bg-fill-tertiary-fill-light-gray",
+    sizeDefault: "px-12 py-6",
+    sizeLarge: "px-12 py-8",
+    sizeSmall: "px-12 py-4",
+    disabled:
+      "cursor-not-allowed border-border-primary bg-fill-tertiary-fill-light-gray text-typography-quaternary-text hover:border-border-primary",
+  };
+
+  var INPUT_CLASS = {
+    base:
+      "w-full bg-inherit text-start outline-none placeholder:text-typography-quaternary-text focus:bg-inherit hover:bg-inherit focus-visible:outline-none disabled:cursor-not-allowed disabled:text-typography-quaternary-text file:rounded-4 file:border-none file:text-typography-primary-text file:shadow-none file:outline-none",
+    inline:
+      "transition-all focus:bg-fill-tertiary-fill-light-gray group-hover:bg-fill-tertiary-fill-light-gray",
+  };
+
+  var ICON_WRAPPER_CLASS = {
+    default: "flex items-center justify-center rounded-4 size-16 text-typography-quaternary-text shrink-0",
+    error: "flex items-center justify-center rounded-4 size-16 text-error-base shrink-0",
+    warning: "flex items-center justify-center rounded-4 size-16 text-warning-base shrink-0",
+    success: "flex items-center justify-center rounded-4 size-16 text-primary-base shrink-0",
+    password: "flex items-center justify-center rounded-4 size-16 text-primary-base hover:cursor-pointer shrink-0",
+  };
+
+  function join() {
+    return Array.prototype.filter.call(arguments, Boolean).join(" ");
+  }
+
+  /**
+   * Create an input component
+   * @param {Object} config
+   * @param {string} [config.variant] - 'default' | 'error' | 'warning' | 'success' | 'password' | 'borderless' | 'inline'
+   * @param {string} [config.inputSize] - 'default' | 'large' | 'small'
+   * @param {string} [config.type] - input type (text, email, password, etc.)
+   * @param {string} [config.placeholder]
+   * @param {string} [config.value]
+   * @param {boolean} [config.disabled]
+   * @param {boolean} [config.readOnly]
+   * @param {boolean} [config.showReadOnlyIcon] - show lock icon when readOnly
+   * @param {string} [config.name]
+   * @param {string} [config.id]
+   * @param {string} [config.className] - extra class on wrapper
+   * @param {string} [config.rootClassName] - extra class on inner input
+   * @param {HTMLElement|string} [config.prefixNode] - node or HTML string before input
+   * @param {HTMLElement|string} [config.startIcon] - node or HTML string at start (not for inline)
+   * @param {HTMLElement|string} [config.endIcon] - node or HTML string at end (default/borderless only)
+   * @param {Function} [config.onChange]
+   * @param {Function} [config.onInput]
+   * @param {Function} [config.onFocus]
+   * @param {Function} [config.onBlur]
+   * @returns {HTMLElement} wrapper element (contains input + optional icons)
+   */
+  function create(config) {
+    var variant = config.variant || "default";
+    var inputSize = config.inputSize || "default";
+    var type = config.type || "text";
+    var disabled = !!config.disabled;
+    var readOnly = !!config.readOnly;
+    var showReadOnlyIcon = config.showReadOnlyIcon !== false;
+    var isPassword = type === "password";
+
+    var wrapper = document.createElement("div");
+    wrapper.className = join(
+      WRAPPER_CLASS.base,
+      WRAPPER_CLASS[variant] || WRAPPER_CLASS.default,
+      inputSize === "large" ? WRAPPER_CLASS.sizeLarge : inputSize === "small" ? WRAPPER_CLASS.sizeSmall : WRAPPER_CLASS.sizeDefault,
+      disabled ? WRAPPER_CLASS.disabled : "",
+      config.className || ""
+    );
+    wrapper.setAttribute("data-input-variant", variant);
+
+    if (config.prefixNode) {
+      var prefixWrap = document.createElement("span");
+      prefixWrap.className = "shrink-0";
+      if (typeof config.prefixNode === "string") {
+        prefixWrap.innerHTML = config.prefixNode;
+      } else {
+        prefixWrap.appendChild(config.prefixNode);
+      }
+      wrapper.appendChild(prefixWrap);
+    }
+
+    if (config.startIcon && variant !== "inline") {
+      var startWrap = document.createElement("span");
+      startWrap.className = ICON_WRAPPER_CLASS[variant] || ICON_WRAPPER_CLASS.default;
+      if (typeof config.startIcon === "string") {
+        startWrap.innerHTML = config.startIcon;
+      } else {
+        startWrap.appendChild(config.startIcon);
+      }
+      wrapper.appendChild(startWrap);
+    }
+
+    var input = document.createElement("input");
+    input.type = isPassword ? "text" : type;
+    input.autocomplete = "off";
+    if (config.placeholder != null) input.placeholder = config.placeholder;
+    if (config.value != null) input.value = config.value;
+    if (config.name) input.name = config.name;
+    if (config.id) input.id = config.id;
+    input.disabled = disabled;
+    input.readOnly = readOnly;
+    input.className = join(
+      "!text-reg-13",
+      INPUT_CLASS.base,
+      variant === "inline" ? INPUT_CLASS.inline : "",
+      config.rootClassName || ""
+    );
+
+    var showPassword = false;
+    if (isPassword) {
+      input.type = "password";
+      input.setAttribute("data-password-masked", "true");
+    }
+
+    wrapper.appendChild(input);
+
+    if (variant !== "inline") {
+      if (variant === "error") {
+        var errIcon = document.createElement("span");
+        errIcon.className = ICON_WRAPPER_CLASS.error;
+        errIcon.innerHTML = ICONS.alertCircle;
+        errIcon.setAttribute("aria-hidden", "true");
+        wrapper.appendChild(errIcon);
+      } else if (variant === "warning") {
+        var warnIcon = document.createElement("span");
+        warnIcon.className = ICON_WRAPPER_CLASS.warning;
+        warnIcon.innerHTML = ICONS.alertCircle;
+        warnIcon.setAttribute("aria-hidden", "true");
+        wrapper.appendChild(warnIcon);
+      } else if (variant === "success") {
+        var okIcon = document.createElement("span");
+        okIcon.className = ICON_WRAPPER_CLASS.success;
+        okIcon.innerHTML = ICONS.circleCheck;
+        okIcon.setAttribute("aria-hidden", "true");
+        wrapper.appendChild(okIcon);
+      }
+
+      if (variant === "password" && isPassword) {
+        var pwdWrap = document.createElement("span");
+        pwdWrap.className = ICON_WRAPPER_CLASS.password;
+        pwdWrap.setAttribute("role", "button");
+        pwdWrap.setAttribute("tabindex", "0");
+        pwdWrap.setAttribute("aria-label", "Toggle password visibility");
+        pwdWrap.innerHTML = showPassword ? ICONS.eyeOff : ICONS.eye;
+        pwdWrap.addEventListener("click", function () {
+          if (disabled) return;
+          showPassword = !showPassword;
+          input.type = showPassword ? "text" : "password";
+          input.setAttribute("data-password-masked", showPassword ? "false" : "true");
+          pwdWrap.innerHTML = showPassword ? ICONS.eyeOff : ICONS.eye;
+        });
+        pwdWrap.addEventListener("keydown", function (e) {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            pwdWrap.click();
+          }
+        });
+        wrapper.appendChild(pwdWrap);
+      }
+
+      if (readOnly && showReadOnlyIcon) {
+        var lockWrap = document.createElement("span");
+        lockWrap.className = join(ICON_WRAPPER_CLASS.default, "text-typography-quaternary-text");
+        lockWrap.innerHTML = ICONS.lock;
+        lockWrap.setAttribute("aria-hidden", "true");
+        wrapper.appendChild(lockWrap);
+      }
+
+      if ((!variant || variant === "default" || variant === "borderless") && config.endIcon) {
+        var endWrap = document.createElement("span");
+        endWrap.className = ICON_WRAPPER_CLASS.default;
+        if (typeof config.endIcon === "string") {
+          endWrap.innerHTML = config.endIcon;
+        } else {
+          endWrap.appendChild(config.endIcon);
+        }
+        wrapper.appendChild(endWrap);
+      }
+    }
+
+    if (config.onChange) input.addEventListener("change", config.onChange);
+    if (config.onInput) input.addEventListener("input", config.onInput);
+    if (config.onFocus) input.addEventListener("focus", config.onFocus);
+    if (config.onBlur) input.addEventListener("blur", config.onBlur);
+
+    wrapper.getInput = function () {
+      return input;
+    };
+    wrapper.setValue = function (v) {
+      input.value = v;
+    };
+    wrapper.getValue = function () {
+      return input.value;
+    };
+    wrapper.setVariant = function (v) {
+      variant = v;
+      wrapper.setAttribute("data-input-variant", v);
+      wrapper.className = join(
+        WRAPPER_CLASS.base,
+        WRAPPER_CLASS[variant] || WRAPPER_CLASS.default,
+        inputSize === "large" ? WRAPPER_CLASS.sizeLarge : inputSize === "small" ? WRAPPER_CLASS.sizeSmall : WRAPPER_CLASS.sizeDefault,
+        disabled ? WRAPPER_CLASS.disabled : "",
+        config.className || ""
+      );
+    };
+    wrapper.setDisabled = function (d) {
+      disabled = !!d;
+      input.disabled = disabled;
+      wrapper.classList.toggle("cursor-not-allowed", disabled);
+      wrapper.classList.toggle("opacity-60", disabled);
+    };
+
+    return wrapper;
+  }
+
+  global.InputComponent = {
+    create: create,
+    ICONS: ICONS,
+  };
+})(typeof window !== "undefined" ? window : this);

package/components/label.js

@@ -0,0 +1,111 @@
+/**
+ * Label component – vanilla JS equivalent of Radix Label with CVA-style variants.
+ * Supports size, requiredPosition, optional, icon, and optional suffix (e.g. tooltip).
+ *
+ * Padding/margin use Tailwind theme.spacing (tailwind.config.js) → --sizes-size-* (tailwind-input.css):
+ * - pb-8 = padding-bottom 0.5rem (--sizes-size-8)
+ * - gap-2 = gap 0.125rem (--sizes-size-2) between label text, icon, asterisk
+ * - size-16 = icon wrapper 1rem (--sizes-size-16)
+ */
+(function (global) {
+  "use strict";
+
+  var SIZE_CLASSES = {
+    default: "text-reg-13",
+    small: "text-reg-12",
+    large: "text-reg-14",
+  };
+
+  var REQUIRED_POSITION_CLASSES = {
+    left: "required-left",
+    right: "required-right",
+    none: "required-none",
+  };
+
+  function joinClasses() {
+    var parts = [];
+    for (var i = 0; i < arguments.length; i++) {
+      if (arguments[i]) parts.push(arguments[i]);
+    }
+    return parts.join(" ");
+  }
+
+  /**
+   * Create a label element matching the Radix Label API (size, requiredPosition, optional, icon).
+   * @param {Object} config
+   * @param {string} config.label - Label text
+   * @param {boolean} [config.required=false] - Show required asterisk
+   * @param {'left'|'right'|'none'} [config.requiredPosition='right'] - Where to show asterisk
+   * @param {boolean} [config.optional=false] - Show "(optional)" after label
+   * @param {string} [config.size='default'] - 'default' | 'small' | 'large'
+   * @param {HTMLElement} [config.icon] - Optional icon node
+   * @param {string} [config.className] - Extra classes
+   * @param {string} [config.htmlFor] - For attribute
+   * @param {HTMLElement} [config.suffix] - Optional node appended after content (e.g. tooltip)
+   * @returns {HTMLElement} <label> element
+   */
+  function create(config) {
+    var labelText = config.label != null ? String(config.label) : "";
+    var required = !!config.required;
+    var requiredPosition = config.requiredPosition || "right";
+    var optional = !!config.optional;
+    var size = config.size || "default";
+    var icon = config.icon;
+    var className = config.className || "";
+    var htmlFor = config.htmlFor;
+    var suffix = config.suffix;
+
+    var base =
+      "inline-flex items-center gap-2 flex-shrink-0 pb-8 leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70";
+    var sizeClass = SIZE_CLASSES[size] || SIZE_CLASSES.default;
+    var requiredPosClass = REQUIRED_POSITION_CLASSES[requiredPosition] || REQUIRED_POSITION_CLASSES.none;
+    var optionalClass = optional ? "optional-true" : "optional-false";
+
+    var labelEl = document.createElement("label");
+    labelEl.className = joinClasses(
+      "!text-typography-tertiary-text",
+      base,
+      sizeClass,
+      requiredPosClass,
+      optionalClass,
+      className
+    );
+    if (htmlFor) labelEl.htmlFor = htmlFor;
+
+    if (required && requiredPosition === "left") {
+      var leftAsterisk = document.createElement("span");
+      leftAsterisk.className = "required-label text-error-base";
+      leftAsterisk.textContent = "*";
+      labelEl.appendChild(leftAsterisk);
+    }
+
+    labelEl.appendChild(document.createTextNode(labelText));
+
+    if (icon) {
+      var iconWrap = document.createElement("span");
+      iconWrap.className = "box-content flex size-16 items-center justify-center";
+      iconWrap.appendChild(icon);
+      labelEl.appendChild(iconWrap);
+    }
+
+    if (required && requiredPosition === "right") {
+      var rightAsterisk = document.createElement("span");
+      rightAsterisk.className = "required-label text-error-base";
+      rightAsterisk.textContent = " *";
+      labelEl.appendChild(rightAsterisk);
+    }
+
+    if (optional) {
+      var optionalSpan = document.createElement("span");
+      optionalSpan.className = "optional-label text-typography-tertiary-text";
+      optionalSpan.textContent = " (optional)";
+      labelEl.appendChild(optionalSpan);
+    }
+
+    if (suffix) labelEl.appendChild(suffix);
+
+    return labelEl;
+  }
+
+  global.Label = { create: create };
+})(typeof window !== "undefined" ? window : this);