@superleapai/flow-ui 1.0.0

package/components/button.js

@@ -0,0 +1,201 @@
+/**
+ * Button Component (vanilla JS)
+ * Design-system button with variants and sizes via Tailwind.
+ * Ref: React Button with cva variants (primary, outline, ghost, link, destructive, dashed, toggle, etc.)
+ */
+
+(function (global) {
+  "use strict";
+
+  var BASE_CLASS =
+    "inline-flex items-center justify-center whitespace-nowrap !text-med-12 transition-colors disabled:pointer-events-none hover:cursor-pointer h-fit";
+
+  var VARIANTS = {
+    primary:
+      "shadow-soft-extra-small group bg-primary-base border-1/2 border-primary-base text-typography-invert-text hover:bg-primary-hover active:bg-primary-active disabled:opacity-50",
+    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",
+    ghost:
+      "group text-typography-primary-text hover:bg-fill-tertiary-fill-light-gray active:bg-fill-secondary-fill-gray disabled:text-typography-quaternary-text",
+    link: "group text-primary-text-base hover:bg-primary-surface active:bg-primary-surface-hover disabled:text-typography-quaternary-text",
+    primaryDestructive:
+      "shadow-soft-extra-small group bg-error-base text-typography-invert-text border-1/2 border-error-base hover:bg-error-hover active:bg-error-active disabled:opacity-50",
+    outlineDestructive:
+      "shadow-soft-extra-small group bg-fill-quarternary-fill-white border-1/2 border-error-border text-error-text-base hover:bg-error-surface active:bg-error-surface-hover active:text-error-text-active disabled:opacity-50 disabled:border-fill-secondary-fill-gray disabled:text-typography-quaternary-text",
+    ghostDestructive:
+      "group text-error-text-base hover:bg-error-surface active:bg-error-surface-hover active:text-error-text-active disabled:opacity-50",
+    dashed:
+      "group bg-fill-quarternary-fill-white border border-border-primary border-dashed text-typography-secondary-text hover:bg-fill-tertiary-fill-light-gray active:bg-fill-secondary-fill-gray disabled:opacity-50 disabled:border-fill-secondary-fill-gray",
+    toggleOff:
+      "shadow-soft-extra-small group bg-fill-quarternary-fill-white border-1/2 border-border-primary text-typography-primary-text hover:bg-primary-surface active:bg-primary-surface disabled:opacity-50 disabled:border-fill-secondary-fill-gray",
+    toggleOn:
+      "shadow-soft-extra-small group bg-primary-surface border-1/2 border-border-primary text-primary-text-base hover:bg-primary-surface active:bg-primary-surface disabled:opacity-50 disabled:border-fill-secondary-fill-gray",
+    ghostInline:
+      "group text-typography-primary-text disabled:text-typography-quaternary-text hover:bg-transparent active:bg-transparent !px-0 hover:text-typography-secondary-text",
+    linkInline:
+      "group text-primary-text-base hover:bg-transparent active:bg-transparent disabled:text-typography-quaternary-text !px-0 hover:text-primary-text-active",
+  };
+
+  var SIZES = {
+    small: "px-8 py-4 gap-4 rounded-4",
+    medium: "px-12 py-6 gap-4 rounded-4",
+    default: "px-8 py-4 gap-4 rounded-4",
+    large: "px-16 py-8 gap-4 rounded-4",
+  };
+
+  var SHADOW_CLASS = "shadow-soft-extra-small";
+
+  // Icon-only button variants (same visual, different size treatment)
+  var ICON_SIZES = {
+    small: "box-content size-16 p-4 rounded-4",
+    medium: "box-content size-16 p-6 rounded-4",
+    default: "box-content size-16 p-4 rounded-4",
+    large: "box-content size-16 p-8 rounded-4",
+  };
+
+  var ICON_BASE = "flex items-center justify-center disabled:pointer-events-none hover:cursor-pointer";
+
+  function join() {
+    return Array.prototype.filter.call(arguments, Boolean).join(" ");
+  }
+
+  /**
+   * Create a button element
+   * @param {Object} config
+   * @param {string} [config.variant] - 'primary' | 'outline' | 'ghost' | 'link' | 'primaryDestructive' | 'outlineDestructive' | 'ghostDestructive' | 'dashed' | 'toggleOff' | 'toggleOn' | 'ghostInline' | 'linkInline'
+   * @param {string} [config.size] - 'small' | 'medium' | 'default' | 'large'
+   * @param {boolean} [config.isShadow] - add extra shadow
+   * @param {string} [config.className] - extra Tailwind/classes
+   * @param {boolean} [config.disabled]
+   * @param {string} [config.type] - 'button' | 'submit' | 'reset'
+   * @param {string} [config.label] - accessible label (aria-label)
+   * @param {string} [config.text] - button text (same as children for simple case)
+   * @param {string} [config.innerHTML] - raw HTML for content (use for icons + text)
+   * @param {HTMLElement|string} [config.startIcon] - element or HTML string for left icon
+   * @param {HTMLElement|string} [config.endIcon] - element or HTML string for right icon
+   * @param {HTMLElement|string} [config.icon] - single icon for icon-only button (no text)
+   * @param {function} [config.onClick] - click handler
+   * @returns {HTMLButtonElement}
+   */
+  function create(config) {
+    var opts = config || {};
+    var variant = opts.variant || "primary";
+    var size = opts.size || "default";
+    var isShadow = opts.isShadow === true;
+    var className = opts.className || "";
+    var disabled = opts.disabled === true;
+    var type = opts.type || "button";
+    var label = opts.label;
+    var text = opts.text;
+    var innerHTML = opts.innerHTML;
+    var startIcon = opts.startIcon;
+    var endIcon = opts.endIcon;
+    var iconOnly = opts.icon != null;
+    var icon = opts.icon;
+    var onClick = opts.onClick;
+
+    var button = document.createElement("button");
+    button.type = type;
+    if (disabled) {
+      button.disabled = true;
+    }
+    if (label) {
+      button.setAttribute("aria-label", label);
+    }
+
+    var variantClass = VARIANTS[variant] != null ? VARIANTS[variant] : VARIANTS.primary;
+    var sizeClass = SIZES[size] != null ? SIZES[size] : SIZES.default;
+
+    if (iconOnly) {
+      var iconVariantClass = VARIANTS[variant] != null ? VARIANTS[variant] : VARIANTS.primary;
+      var iconSizeClass = ICON_SIZES[size] != null ? ICON_SIZES[size] : ICON_SIZES.default;
+      button.className = join(
+        BASE_CLASS,
+        ICON_BASE,
+        iconVariantClass,
+        iconSizeClass,
+        isShadow ? SHADOW_CLASS : "",
+        className
+      );
+      appendContent(button, icon);
+    } else {
+      button.className = join(
+        BASE_CLASS,
+        variantClass,
+        sizeClass,
+        isShadow ? SHADOW_CLASS : "",
+        className
+      );
+      if (startIcon) {
+        var startSpan = document.createElement("span");
+        startSpan.className = "box-content flex size-16 items-center justify-center rounded-4 !p-0";
+        appendContent(startSpan, startIcon);
+        button.appendChild(startSpan);
+      }
+      if (innerHTML != null) {
+        var frag = document.createElement("span");
+        frag.innerHTML = innerHTML;
+        while (frag.firstChild) {
+          button.appendChild(frag.firstChild);
+        }
+      } else if (text != null) {
+        button.appendChild(document.createTextNode(text));
+      }
+      if (endIcon) {
+        var endSpan = document.createElement("span");
+        endSpan.className = "box-content flex size-16 items-center justify-center rounded-4 !p-0";
+        appendContent(endSpan, endIcon);
+        button.appendChild(endSpan);
+      }
+    }
+
+    if (typeof onClick === "function") {
+      button.addEventListener("click", onClick);
+    }
+
+    return button;
+  }
+
+  function appendContent(el, content) {
+    if (content == null) return;
+    if (typeof content === "string") {
+      el.insertAdjacentHTML("beforeend", content);
+    } else if (content instanceof HTMLElement) {
+      el.appendChild(content);
+    } else if (content instanceof Node) {
+      el.appendChild(content);
+    }
+  }
+
+  /**
+   * Get Tailwind class string for a button (for use with asChild or custom elements)
+   * @param {Object} options - { variant, size, isShadow, iconOnly }
+   * @returns {string}
+   */
+  function getButtonClasses(options) {
+    var o = options || {};
+    var variant = o.variant || "primary";
+    var size = o.size || "default";
+    var isShadow = o.isShadow === true;
+    var iconOnly = o.iconOnly === true;
+    var variantClass = VARIANTS[variant] != null ? VARIANTS[variant] : VARIANTS.primary;
+    var sizeClass = iconOnly
+      ? (ICON_SIZES[size] != null ? ICON_SIZES[size] : ICON_SIZES.default)
+      : (SIZES[size] != null ? SIZES[size] : SIZES.default);
+    var base = iconOnly ? join(BASE_CLASS, ICON_BASE) : BASE_CLASS;
+    return join(base, variantClass, sizeClass, isShadow ? SHADOW_CLASS : "");
+  }
+
+  var Button = {
+    create: create,
+    getButtonClasses: getButtonClasses,
+    VARIANTS: VARIANTS,
+    SIZES: SIZES,
+  };
+
+  if (typeof module !== "undefined" && module.exports) {
+    module.exports = Button;
+  } else {
+    global.Button = Button;
+  }
+})(typeof window !== "undefined" ? window : this);

package/components/checkbox.js

@@ -0,0 +1,254 @@
+/**
+ * Checkbox Component (vanilla JS)
+ * Design-system checkbox with variants, sizes, indeterminate state, and label support.
+ * Ref: React Checkbox with Radix UI primitives and cva variants; no React/Radix/cva dependency.
+ */
+
+(function (global) {
+  "use strict";
+
+  // Inline SVGs (Tabler-style icons for check and minus)
+  var ICONS = {
+    check:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>',
+    minus:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/></svg>',
+  };
+
+  // Size-based icon variants
+  var ICON_SIZES = {
+    small: { width: "12", height: "12" },
+    default: { width: "14", height: "14" },
+    large: { width: "16", height: "16" },
+  };
+
+  var ALIGN_VARIANTS = {
+    left: "justify-start",
+    center: "justify-center",
+    right: "justify-end",
+  };
+
+  var CHECKBOX_SIZES = {
+    small: "size-12",
+    default: "size-16",
+    large: "size-20",
+  };
+
+  var CHECKBOX_BASE_CLASS =
+    "flex items-center justify-center rounded-2 border-1/2 border-borderColor-border-primary bg-fill-quarternary-fill-white p-4 transition-all hover:border-primary-base hover:shadow-primary-focused disabled:cursor-not-allowed disabled:border-borderColor-border-primary disabled:opacity-50 disabled:hover:shadow-none";
+
+  var CHECKBOX_CHECKED_CLASS =
+    "data-checked:border-transparent data-checked:bg-primary-base data-checked:hover:border-primary-base data-checked:hover:shadow-primary-focused data-checked:disabled:border-borderColor-border-primary";
+
+  var LABEL_BASE_CLASS =
+    "cursor-pointer pb-0 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 checkbox component
+   * @param {Object} config
+   * @param {string} [config.id] - checkbox input id (also used for label htmlFor)
+   * @param {string} [config.name] - name attribute for the checkbox
+   * @param {boolean} [config.checked] - initial checked state
+   * @param {boolean} [config.indeterminate] - indeterminate state (shows minus icon)
+   * @param {boolean} [config.disabled] - disabled state
+   * @param {string} [config.label] - label text
+   * @param {boolean} [config.isLabelCaps] - capitalize label
+   * @param {string} [config.align] - 'left' | 'center' | 'right' (default: 'center')
+   * @param {string} [config.size] - 'small' | 'default' | 'large'
+   * @param {string} [config.className] - extra class on wrapper
+   * @param {Function} [config.onChange] - change handler (receives checked state)
+   * @returns {HTMLElement} wrapper element containing checkbox and optional label
+   */
+  function create(config) {
+    var opts = config || {};
+    var id = opts.id || "checkbox-" + Math.random().toString(36).substr(2, 9);
+    var name = opts.name;
+    var checked = !!opts.checked;
+    var indeterminate = !!opts.indeterminate;
+    var disabled = !!opts.disabled;
+    var label = opts.label;
+    var isLabelCaps = !!opts.isLabelCaps;
+    var align = opts.align || "center";
+    var size = opts.size || "default";
+    var className = opts.className || "";
+    var onChange = opts.onChange;
+
+    // Wrapper container
+    var wrapper = document.createElement("div");
+    wrapper.className = join(
+      "flex gap-8 items-center",
+      ALIGN_VARIANTS[align] || ALIGN_VARIANTS.center,
+      className
+    );
+
+    // Hidden native checkbox (for accessibility and form submission)
+    var input = document.createElement("input");
+    input.type = "checkbox";
+    input.id = id;
+    if (name) input.name = name;
+    input.checked = checked;
+    input.disabled = disabled;
+    input.className = "absolute opacity-0 w-0 h-0 peer"; // completely hidden
+    input.setAttribute("aria-checked", indeterminate ? "mixed" : checked ? "true" : "false");
+    input.style.position = "absolute";
+    input.style.opacity = "0";
+    input.style.width = "0";
+    input.style.height = "0";
+    input.style.pointerEvents = "none";
+
+    // Custom checkbox visual
+    var checkboxBox = document.createElement("div");
+    checkboxBox.className = join(
+      CHECKBOX_BASE_CLASS,
+      CHECKBOX_CHECKED_CLASS,
+      CHECKBOX_SIZES[size] || CHECKBOX_SIZES.default,
+      "cursor-pointer"
+    );
+    checkboxBox.setAttribute("role", "checkbox");
+    checkboxBox.setAttribute("tabindex", disabled ? "-1" : "0");
+    checkboxBox.setAttribute("aria-checked", indeterminate ? "mixed" : checked ? "true" : "false");
+    if (disabled) {
+      checkboxBox.setAttribute("aria-disabled", "true");
+    }
+
+    // Indicator (checkmark or minus icon)
+    var indicator = document.createElement("span");
+    indicator.className = "flex items-center justify-center text-current";
+    updateIndicator(indicator, checked, indeterminate, size);
+
+    checkboxBox.appendChild(indicator);
+
+    // Update visual state
+    function updateCheckedState() {
+      var isChecked = input.checked;
+      var isIndeterminate = input.indeterminate;
+      checkboxBox.setAttribute("aria-checked", isIndeterminate ? "mixed" : isChecked ? "true" : "false");
+      input.setAttribute("aria-checked", isIndeterminate ? "mixed" : isChecked ? "true" : "false");
+      
+      if (isChecked || isIndeterminate) {
+        checkboxBox.setAttribute("data-checked", "true");
+        checkboxBox.classList.add("border-transparent", "bg-primary-base");
+        checkboxBox.classList.remove("border-borderColor-border-primary", "bg-fill-quarternary-fill-white");
+      } else {
+        checkboxBox.removeAttribute("data-checked");
+        checkboxBox.classList.remove("border-transparent", "bg-primary-base");
+        checkboxBox.classList.add("border-borderColor-border-primary", "bg-fill-quarternary-fill-white");
+      }
+      
+      updateIndicator(indicator, isChecked, isIndeterminate, size);
+    }
+
+    // Toggle on click
+    checkboxBox.addEventListener("click", function () {
+      if (disabled) return;
+      input.indeterminate = false;
+      input.checked = !input.checked;
+      updateCheckedState();
+      if (typeof onChange === "function") {
+        onChange(input.checked);
+      }
+      input.dispatchEvent(new Event("change", { bubbles: true }));
+    });
+
+    // Keyboard support
+    checkboxBox.addEventListener("keydown", function (e) {
+      if (disabled) return;
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        checkboxBox.click();
+      }
+    });
+
+    // Sync with native input changes (for programmatic updates)
+    input.addEventListener("change", function () {
+      updateCheckedState();
+      if (typeof onChange === "function") {
+        onChange(input.checked);
+      }
+    });
+
+    wrapper.appendChild(input);
+    wrapper.appendChild(checkboxBox);
+
+    // Label
+    if (label) {
+      var labelEl = document.createElement("label");
+      labelEl.htmlFor = id;
+      labelEl.className = join(
+        LABEL_BASE_CLASS,
+        isLabelCaps ? "capitalize" : "",
+        disabled ? "text-typography-quaternary-text" : ""
+      );
+      labelEl.textContent = label;
+      wrapper.appendChild(labelEl);
+    }
+
+    // Set initial visual state
+    if (indeterminate) {
+      input.indeterminate = true;
+    }
+    updateCheckedState();
+
+    // Public API
+    wrapper.getInput = function () {
+      return input;
+    };
+    wrapper.setChecked = function (value) {
+      input.indeterminate = false;
+      input.checked = !!value;
+      updateCheckedState();
+    };
+    wrapper.getChecked = function () {
+      return input.checked;
+    };
+    wrapper.setIndeterminate = function (value) {
+      input.indeterminate = !!value;
+      if (value) {
+        input.checked = false; // typically indeterminate means partially checked, not fully checked
+      }
+      updateCheckedState();
+    };
+    wrapper.getIndeterminate = function () {
+      return input.indeterminate;
+    };
+    wrapper.setDisabled = function (value) {
+      disabled = !!value;
+      input.disabled = disabled;
+      checkboxBox.setAttribute("tabindex", disabled ? "-1" : "0");
+      if (disabled) {
+        checkboxBox.setAttribute("aria-disabled", "true");
+      } else {
+        checkboxBox.removeAttribute("aria-disabled");
+      }
+      updateCheckedState();
+    };
+
+    return wrapper;
+  }
+
+  function updateIndicator(indicator, checked, indeterminate, size) {
+    indicator.innerHTML = "";
+    if (checked || indeterminate) {
+      var iconSize = ICON_SIZES[size] || ICON_SIZES.default;
+      var iconSVG = indeterminate ? ICONS.minus : ICONS.check;
+      // Update SVG with size
+      iconSVG = iconSVG.replace(/width="\d+"/, 'width="' + iconSize.width + '"');
+      iconSVG = iconSVG.replace(/height="\d+"/, 'height="' + iconSize.height + '"');
+      indicator.innerHTML = iconSVG;
+    }
+  }
+
+  var Checkbox = {
+    create: create,
+  };
+
+  if (typeof module !== "undefined" && module.exports) {
+    module.exports = Checkbox;
+  } else {
+    global.Checkbox = Checkbox;
+  }
+})(typeof window !== "undefined" ? window : this);

package/components/currency.js

@@ -0,0 +1,227 @@
+/**
+ * Currency Component (vanilla JS)
+ * Label (currency type, fit-content) + decimal input. Styles/variants match input.js.
+ */
+
+(function (global) {
+  "use strict";
+
+  // Match input.js WRAPPER_CLASS for style and variants
+  var WRAPPER_CLASS = {
+    base:
+      "group flex items-stretch border-1/2 border-border-primary rounded-4 text-typography-primary-text gap-x-0 w-full transition-all ease-in-out overflow-hidden",
+    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",
+    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: "",
+    sizeLarge: "",
+    sizeSmall: "",
+    disabled:
+      "cursor-not-allowed border-border-primary bg-fill-tertiary-fill-light-gray text-typography-quaternary-text hover:border-border-primary",
+  };
+
+  // Currency type label: fit-content, separator (border-r) on type only, full height
+  var LABEL_CLASS =
+    "flex shrink-0 w-fit items-center justify-center border-r-1/2 border-border-primary bg-fill-tertiary-fill-light-gray text-typography-primary-text px-12 text-reg-12";
+  var LABEL_SIZE = {
+    default: "py-6",
+    large: "py-8",
+    small: "py-4",
+  };
+  var INPUT_WRAPPER_CLASS = "flex items-center flex-1 min-w-0 border-0";
+  // Input: no separator/border (separator is on type only)
+  var INPUT_CLASS = {
+    base:
+      "w-full min-w-0 border-0 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 !text-reg-13 px-12",
+    inline:
+      "transition-all focus:bg-fill-tertiary-fill-light-gray group-hover:bg-fill-tertiary-fill-light-gray",
+    sizeDefault: "py-6",
+    sizeLarge: "py-8",
+    sizeSmall: "py-4",
+  };
+
+  var DECIMAL_PLACES = 2;
+  var DECIMAL_REGEX = /^-?\d*\.?\d{0,2}$/;
+
+  function join() {
+    return Array.prototype.filter.call(arguments, Boolean).join(" ");
+  }
+
+  /**
+   * Parse string to number or null (2 decimal places).
+   * @param {string} str
+   * @returns {number|null}
+   */
+  function parseDecimal(str) {
+    if (str === "" || str == null) return null;
+    var trimmed = String(str).trim();
+    if (trimmed === "") return null;
+    var n = parseFloat(trimmed);
+    return isNaN(n) ? null : Math.round(n * 100) / 100;
+  }
+
+  /**
+   * Format number for display (2 decimal places).
+   * @param {number|null} num
+   * @returns {string}
+   */
+  function formatDecimal(num) {
+    if (num == null || isNaN(num)) return "";
+    return Number(num).toFixed(DECIMAL_PLACES);
+  }
+
+  /**
+   * Restrict input to decimal with max 2 decimal places.
+   * @param {HTMLInputElement} input
+   */
+  function restrictDecimalInput(input) {
+    input.addEventListener("input", function () {
+      var val = input.value;
+      if (val === "" || val === "-") return;
+      if (!DECIMAL_REGEX.test(val)) {
+        var neg = val.charAt(0) === "-" ? "-" : "";
+        var rest = neg ? val.slice(1) : val;
+        var dotIdx = rest.indexOf(".");
+        if (dotIdx === -1) {
+          input.value = neg + rest.replace(/\D/g, "");
+        } else {
+          var before = rest.slice(0, dotIdx).replace(/\D/g, "");
+          var after = rest.slice(dotIdx + 1).replace(/\D/g, "").slice(0, DECIMAL_PLACES);
+          input.value = neg + (after.length ? before + "." + after : before);
+        }
+      }
+    });
+  }
+
+  /**
+   * Create a currency field (currency type label fit-content + decimal input).
+   * Variants/sizes match input.js.
+   * @param {Object} config
+   * @param {string} [config.variant] - 'default' | 'error' | 'warning' | 'success' | 'borderless' | 'inline'
+   * @param {string} [config.size] - 'small' | 'default' | 'large' (maps to inputSize)
+   * @param {string} [config.placeholder]
+   * @param {boolean} [config.disabled]
+   * @param {string} [config.className]
+   * @param {Object} [config.column] - { properties?: { currency?: { currency?: string } }, placeholder?: string }
+   * @param {Function} [config.onChange] - (v: number | null) => void
+   * @param {number|null} [config.value]
+   * @param {boolean} [config.autoFocus]
+   * @param {Function} [config.onBlur]
+   * @param {string} [config.rootClassName]
+   * @returns {HTMLElement} Wrapper (label + input)
+   */
+  function create(config) {
+    var variant = config.variant || "default";
+    var size = config.size || "default";
+    var disabled = !!config.disabled;
+    var className = config.className || "";
+    var column = config.column || {};
+    var onChange = config.onChange;
+    var value = config.value != null ? config.value : null;
+    var autoFocus = !!config.autoFocus;
+    var onBlur = config.onBlur;
+    var placeholder =
+      config.placeholder != null
+        ? config.placeholder
+        : (column.placeholder || "Enter value");
+    var rootClassName = config.rootClassName || "";
+
+    var currencyLabel =
+      (column.properties && column.properties.currency && column.properties.currency.currency) ||
+      "Currency";
+
+    var sizeClass = size === "large" ? "large" : size === "small" ? "small" : "default";
+
+    var wrapper = document.createElement("div");
+    wrapper.className = join(
+      WRAPPER_CLASS.base,
+      WRAPPER_CLASS[variant] != null ? WRAPPER_CLASS[variant] : WRAPPER_CLASS.default,
+      disabled ? WRAPPER_CLASS.disabled : "",
+      className
+    );
+    wrapper.setAttribute("data-currency-variant", variant);
+
+    var labelEl = document.createElement("div");
+    labelEl.className = join(LABEL_CLASS, LABEL_SIZE[sizeClass]);
+    labelEl.textContent = currencyLabel;
+    wrapper.appendChild(labelEl);
+
+    var inputWrap = document.createElement("div");
+    inputWrap.className = INPUT_WRAPPER_CLASS;
+
+    var input = document.createElement("input");
+    input.type = "text";
+    input.inputMode = "decimal";
+    input.autocomplete = "off";
+    input.placeholder = placeholder;
+    input.value = value != null ? formatDecimal(value) : "";
+    input.disabled = disabled;
+    input.className = join(
+      INPUT_CLASS.base,
+      variant === "inline" ? INPUT_CLASS.inline : "",
+      INPUT_CLASS[sizeClass === "large" ? "sizeLarge" : sizeClass === "small" ? "sizeSmall" : "sizeDefault"],
+      rootClassName
+    );
+    if (autoFocus) input.autofocus = true;
+
+    restrictDecimalInput(input);
+
+    function notifyChange() {
+      var parsed = parseDecimal(input.value);
+      if (onChange) onChange(parsed);
+    }
+
+    input.addEventListener("input", notifyChange);
+    input.addEventListener("change", notifyChange);
+    if (onBlur) input.addEventListener("blur", onBlur);
+
+    inputWrap.appendChild(input);
+    wrapper.appendChild(inputWrap);
+
+    wrapper.getInput = function () {
+      return input;
+    };
+    wrapper.setValue = function (v) {
+      if (v == null || v === "") {
+        input.value = "";
+      } else {
+        input.value = formatDecimal(Number(v));
+      }
+    };
+    wrapper.getValue = function () {
+      return parseDecimal(input.value);
+    };
+    wrapper.setVariant = function (v) {
+      variant = v;
+      wrapper.setAttribute("data-currency-variant", v);
+      wrapper.className = join(
+        WRAPPER_CLASS.base,
+        WRAPPER_CLASS[variant] != null ? WRAPPER_CLASS[variant] : WRAPPER_CLASS.default,
+        disabled ? WRAPPER_CLASS.disabled : "",
+        config.className || ""
+      );
+    };
+    wrapper.setDisabled = function (d) {
+      disabled = !!d;
+      input.disabled = disabled;
+      wrapper.classList.toggle("cursor-not-allowed", disabled);
+    };
+
+    return wrapper;
+  }
+
+  global.CurrencyComponent = {
+    create: create,
+    parseDecimal: parseDecimal,
+    formatDecimal: formatDecimal,
+  };
+})(typeof window !== "undefined" ? window : this);