@superleapai/flow-ui 2.5.11 → 2.5.13

package/components/record-multiselect.js

@@ -113,6 +113,24 @@
     return global.Icon;
   }
 
+  /**
+   * Get display name for the object from ObjectType: display_singular_name, display_plural_name, or slug.
+   * @param {{ display_singular_name?: string, display_plural_name?: string, slug?: string } | null} objectSchema - optional ObjectType
+   * @param {string} slug - objectSlug fallback
+   * @param {'singular'|'plural'} kind - which name to return
+   * @returns {string}
+   */
+  function getObjectDisplayName(objectSchema, slug, kind) {
+    var s = objectSchema;
+    var str = function (v) {
+      return typeof v === "string" && v ? v : "";
+    };
+    if (kind === "singular") {
+      return str(s && s.display_singular_name) || str(s && s.slug) || slug || "";
+    }
+    return str(s && s.display_plural_name) || str(s && s.display_singular_name) || str(s && s.slug) || slug || "";
+  }
+
   /**
    * Get iconStr and color for the object: from objectSchema.properties.icon_data first, else OBJECT_SLUG_TO_ICON, else IconDatabase fallback.
    * @param {string} slug - objectSlug
@@ -155,16 +173,21 @@
    * @param {number} [config.initialLimit] - Initial fetch limit (default 50)
    * @param {Array<string>} [config.displayFields] - Fields to display as secondary info (e.g. ["email", "phone"])
    * @param {Object} [config.initialFilter] - Optional filter object to merge with search (e.g. { field: "status", operator: "exact", value: "active" } or { and: [...] })
-   * @param {Object} [config.objectSchema] - Optional object type/schema; properties.icon_data { icon?, color? } used for static icon (not used for user; user shows Vivid Avatar)
+   * @param {Object} [config.objectSchema] - Optional ObjectType; display_plural_name/display_singular_name/slug used for placeholder/search/summary label; properties.icon_data { icon?, color? } for static icon (not used for user; user shows Vivid Avatar)
    * @returns {HTMLElement} Record multiselect container element
    */
   function createRecordMultiSelect(config) {
     var fieldId = config.fieldId;
     var objectSlug = config.objectSlug;
     var objectSchema = config.objectSchema || null;
-    var placeholder = config.placeholder || "Select records";
-    var searchPlaceholder = config.searchPlaceholder || "Search " + (objectSlug || "") + "...";
-    var summaryLabel = config.label || "selected";
+    var displayPlural = getObjectDisplayName(objectSchema, objectSlug, "plural");
+    var placeholder =
+      config.placeholder ||
+      (displayPlural ? "Select " + displayPlural : "Select records");
+    var searchPlaceholder =
+      config.searchPlaceholder ||
+      "Search " + (displayPlural || objectSlug || "") + "...";
+    var summaryLabel = config.label || (displayPlural || "selected");
     var onValuesChange = config.onValuesChange;
     var variant = config.variant || "default";
     var size = config.size || "default";
@@ -320,7 +343,7 @@
         },
       });
       var inputEl = searchInputWrapper.getInput();
-      if (inputEl) inputEl.setAttribute("aria-label", "Search records");
+      if (inputEl) inputEl.setAttribute("aria-label", "Search " + (displayPlural || "records"));
       searchInputEl = inputEl;
       searchWrap.appendChild(searchInputWrapper);
     } else {
@@ -337,7 +360,7 @@
       searchInput.className =
         "w-full bg-transparent text-reg-13 text-typography-primary-text placeholder:text-typography-quaternary-text focus:outline-none border-none";
       searchInput.placeholder = searchPlaceholder;
-      searchInput.setAttribute("aria-label", "Search records");
+      searchInput.setAttribute("aria-label", "Search " + (displayPlural || "records"));
       searchInputEl = searchInput;
       fallbackWrapper.appendChild(searchInput);
       searchWrap.appendChild(fallbackWrapper);

package/components/record-select.js

@@ -121,6 +121,24 @@
     return global.Icon;
   }
 
+  /**
+   * Get display name for the object from ObjectType: display_singular_name, display_plural_name, or slug.
+   * @param {{ display_singular_name?: string, display_plural_name?: string, slug?: string } | null} objectSchema - optional ObjectType
+   * @param {string} slug - objectSlug fallback
+   * @param {'singular'|'plural'} kind - which name to return
+   * @returns {string}
+   */
+  function getObjectDisplayName(objectSchema, slug, kind) {
+    var s = objectSchema;
+    var str = function (v) {
+      return typeof v === "string" && v ? v : "";
+    };
+    if (kind === "singular") {
+      return str(s && s.display_singular_name) || str(s && s.slug) || slug || "";
+    }
+    return str(s && s.display_plural_name) || str(s && s.display_singular_name) || str(s && s.slug) || slug || "";
+  }
+
   /**
    * Get iconStr and color for the object: from objectSchema.properties.icon_data first, else OBJECT_SLUG_TO_ICON, else IconDatabase fallback.
    * @param {string} slug - objectSlug
@@ -174,16 +192,21 @@
    * @param {boolean} [config.canClear] - Show clear button when value is set
    * @param {number} [config.initialLimit] - Initial fetch limit (default 50)
    * @param {Object} [config.initialFilter] - Optional filter object to merge with search (e.g. { field: "status", operator: "exact", value: "active" } or { and: [...] })
-   * @param {Object} [config.objectSchema] - Optional object type/schema; properties.icon_data { svg?, color? } used for static icon (not used for user; user shows Vivid Avatar)
+   * @param {Object} [config.objectSchema] - Optional ObjectType; display_singular_name/display_plural_name/slug used for placeholder/search text; properties.icon_data { icon?, color? } for static icon (not used for user; user shows Vivid Avatar)
    * @returns {HTMLElement} Record select container element
    */
   function createRecordSelect(config) {
     var fieldId = config.fieldId;
     var objectSlug = config.objectSlug;
     var objectSchema = config.objectSchema || null;
-    var placeholder = config.placeholder || "Select a record";
+    var displaySingular = getObjectDisplayName(objectSchema, objectSlug, "singular");
+    var displayPlural = getObjectDisplayName(objectSchema, objectSlug, "plural");
+    var placeholder =
+      config.placeholder ||
+      (displaySingular ? "Select a " + displaySingular : "Select a record");
     var searchPlaceholder =
-      config.searchPlaceholder || "Search " + (objectSlug || "") + "...";
+      config.searchPlaceholder ||
+      "Search " + (displayPlural || objectSlug || "") + "...";
     var onChange = config.onChange;
     var variant = config.variant || "default";
     var size = config.size || "default";
@@ -317,7 +340,7 @@
         },
       });
       var inputEl = searchInputWrapper.getInput();
-      if (inputEl) inputEl.setAttribute("aria-label", "Search records");
+      if (inputEl) inputEl.setAttribute("aria-label", "Search " + (displayPlural || "records"));
       searchInputEl = inputEl;
       searchWrap.appendChild(searchInputWrapper);
     } else {
@@ -334,7 +357,7 @@
       searchInput.className =
         "w-full bg-transparent text-reg-13 text-typography-primary-text placeholder:text-typography-quaternary-text focus:outline-none border-none";
       searchInput.placeholder = searchPlaceholder;
-      searchInput.setAttribute("aria-label", "Search records");
+      searchInput.setAttribute("aria-label", "Search " + (displayPlural || "records"));
       searchInputEl = searchInput;
       fallbackWrapper.appendChild(searchInput);
       searchWrap.appendChild(fallbackWrapper);

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) {