@superleapai/flow-ui 2.5.11 → 2.5.12

package/components/switch.js

@@ -0,0 +1,185 @@
+/**
+ * Switch Component (vanilla JS)
+ * Design-system switch with track + thumb, size variants, and accessibility.
+ * Ref: React Switch with Radix UI primitives and cva variants; no React/Radix/cva dependency.
+ */
+
+(function (global) {
+  "use strict";
+
+  var SWITCH_BASE_CLASS =
+    "cursor-pointer flex items-center rounded-128 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-[0.65]";
+
+  var SWITCH_TRACK_CLASS = {
+    checked: "bg-primary-base",
+    unchecked: "bg-fill-primary-fill-dark-gray",
+  };
+
+  var SWITCH_SIZES = {
+    default: "h-[22px] w-44 min-w-44",
+    small: "h-16 w-28 min-w-28",
+  };
+
+  var THUMB_BASE_CLASS =
+    "pointer-events-none shadow-soft-large block bg-fill-quarternary-fill-white rounded-128 ring-0 transition-transform duration-200 ease-in-out";
+
+  var THUMB_SIZES = {
+    default: "size-16",
+    small: "size-12",
+  };
+
+  // Thumb translate X (px) so visibility doesn't rely on data-state variants
+  var THUMB_TRANSLATE = {
+    default: { unchecked: 3, checked: 24 },
+    small: { unchecked: 8, checked: 14 },
+  };
+
+  function join() {
+    return Array.prototype.filter.call(arguments, Boolean).join(" ");
+  }
+
+  /**
+   * Create a switch component
+   * @param {Object} config
+   * @param {string} [config.id] - input id (for form/label association)
+   * @param {string} [config.name] - name attribute for the hidden input
+   * @param {boolean} [config.checked] - initial checked state
+   * @param {boolean} [config.disabled] - disabled state
+   * @param {string} [config.size] - 'default' | 'small'
+   * @param {string} [config.className] - extra class on root (track)
+   * @param {Function} [config.onChange] - change handler (receives checked state)
+   * @returns {HTMLElement} root element (track) containing thumb and hidden input
+   */
+  function create(config) {
+    var opts = config || {};
+    var id = opts.id || "switch-" + Math.random().toString(36).substr(2, 9);
+    var name = opts.name;
+    var checked = !!opts.checked;
+    var disabled = !!opts.disabled;
+    var size = opts.size || "default";
+    var className = opts.className || "";
+    var onChange = opts.onChange;
+
+    var sizeKey = size === "small" ? "small" : "default";
+
+    // Hidden native checkbox (accessibility + 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";
+    input.setAttribute("aria-checked", checked ? "true" : "false");
+    input.style.position = "absolute";
+    input.style.opacity = "0";
+    input.style.width = "0";
+    input.style.height = "0";
+    input.style.pointerEvents = "none";
+    input.setAttribute("tabindex", "-1");
+
+    // Root = track (switch container)
+    var root = document.createElement("button");
+    root.type = "button";
+    root.className = join(
+      SWITCH_BASE_CLASS,
+      SWITCH_SIZES[sizeKey],
+      className
+    );
+    root.setAttribute("role", "switch");
+    root.setAttribute("aria-checked", checked ? "true" : "false");
+    root.setAttribute("tabindex", disabled ? "-1" : "0");
+    if (disabled) root.setAttribute("aria-disabled", "true");
+
+    // Thumb
+    var thumb = document.createElement("span");
+    thumb.className = join(THUMB_BASE_CLASS, THUMB_SIZES[sizeKey]);
+    thumb.setAttribute("aria-hidden", "true");
+
+    root.appendChild(thumb);
+
+    function updateRootDataState(el, isChecked) {
+      el.setAttribute("data-state", isChecked ? "checked" : "unchecked");
+      el.setAttribute("aria-checked", isChecked ? "true" : "false");
+      el.classList.remove(SWITCH_TRACK_CLASS.checked, SWITCH_TRACK_CLASS.unchecked);
+      el.classList.add(isChecked ? SWITCH_TRACK_CLASS.checked : SWITCH_TRACK_CLASS.unchecked);
+    }
+
+    function updateThumbPosition(el, isChecked) {
+      var t = THUMB_TRANSLATE[sizeKey] || THUMB_TRANSLATE.default;
+      var x = isChecked ? t.checked : t.unchecked;
+      el.style.transform = "translateX(" + x + "px)";
+      el.setAttribute("data-state", isChecked ? "checked" : "unchecked");
+    }
+
+    function updateVisualState() {
+      var isChecked = input.checked;
+      updateRootDataState(root, isChecked);
+      updateThumbPosition(thumb, isChecked);
+    }
+
+    updateVisualState();
+
+    root.addEventListener("click", function (e) {
+      e.preventDefault();
+      if (disabled) return;
+      input.checked = !input.checked;
+      updateVisualState();
+      if (typeof onChange === "function") onChange(input.checked);
+      input.dispatchEvent(new Event("change", { bubbles: true }));
+    });
+
+    root.addEventListener("keydown", function (e) {
+      if (disabled) return;
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        root.click();
+      }
+    });
+
+    input.addEventListener("change", function () {
+      updateVisualState();
+      if (typeof onChange === "function") onChange(input.checked);
+    });
+
+    // Mount: parent gets both (input can be visually hidden next to root or in a form)
+    var wrapper = document.createElement("div");
+    wrapper.className = "relative inline-flex";
+    wrapper.appendChild(input);
+    wrapper.appendChild(root);
+
+    // Public API
+    wrapper.getInput = function () {
+      return input;
+    };
+    wrapper.getRoot = function () {
+      return root;
+    };
+    wrapper.setChecked = function (value) {
+      input.checked = !!value;
+      updateVisualState();
+    };
+    wrapper.getChecked = function () {
+      return input.checked;
+    };
+    wrapper.setDisabled = function (value) {
+      disabled = !!value;
+      input.disabled = disabled;
+      root.setAttribute("tabindex", disabled ? "-1" : "0");
+      if (disabled) root.setAttribute("aria-disabled", "true");
+      else root.removeAttribute("aria-disabled");
+    };
+
+    return wrapper;
+  }
+
+  var Switch = {
+    create: create,
+  };
+
+  if (typeof module !== "undefined" && module.exports) {
+    module.exports = Switch;
+  } else {
+    global.Switch = Switch;
+  }
+})(typeof window !== "undefined" ? window : this);

package/core/flow.js

@@ -1443,6 +1443,55 @@
     return field;
   }
 
+  /**
+   * Create a switch field with label and optional help text (same pattern as createCheckbox).
+   * Layout: justify-between, items-center. Supports orientation 'horizontal' | 'vertical'.
+   * @param {Object} config - { label, fieldId, checked, disabled, helpText, size, orientation, required, onChange }
+   * @returns {HTMLElement} Field wrapper containing switch
+   */
+  function createSwitch(config) {
+    const {
+      label,
+      fieldId,
+      checked = false,
+      disabled = false,
+      helpText = null,
+      size = "default",
+      orientation = "horizontal",
+      required = false,
+      onChange,
+    } = config;
+
+    const field = createFieldWrapper(label, required, helpText);
+    field.setAttribute("data-field-id", fieldId);
+
+    if (orientation === "vertical") {
+      field.className = "field flex flex-col gap-2 items-start";
+    } else {
+      field.className = "field flex justify-between items-center";
+    }
+
+    if (getComponent("Switch") && getComponent("Switch").create) {
+      const currentValue = get(fieldId);
+      const switchEl = getComponent("Switch").create({
+        id: fieldId,
+        name: fieldId,
+        checked: currentValue !== undefined ? currentValue : checked,
+        disabled,
+        size,
+        onChange: (isChecked) => {
+          set(fieldId, isChecked);
+          if (onChange) onChange(isChecked);
+        },
+      });
+      switchEl._fieldId = fieldId;
+      field.appendChild(switchEl);
+      return field;
+    }
+
+    return field;
+  }
+
   // ============================================================================
   // STEPPER COMPONENT
   // ============================================================================
@@ -1867,6 +1916,7 @@
     createPhoneInput,
     createCheckbox,
     createCheckboxGroup,
+    createSwitch,
 
     // Button (delegates to Button component when available; resolved at call time via getComponent)
     createButton: function (config) {