@superleapai/flow-ui 1.0.0

package/components/duration/duration-utils.js

@@ -0,0 +1,164 @@
+/**
+ * Duration utils: parse, format, convert between seconds and time units.
+ * formatType: 'seconds' | 'milliseconds' (value stored as number in that unit).
+ */
+
+(function (global) {
+  "use strict";
+
+  var SECONDS_PER_DAY = 86400;
+  var SECONDS_PER_HOUR = 3600;
+  var SECONDS_PER_MINUTE = 60;
+  var SECONDS_PER_MILLISECOND = 0.001;
+
+  /**
+   * @param {number} seconds - total seconds (can be fractional)
+   * @returns {{ days: number, hours: number, minutes: number, seconds: number, milliseconds: number }}
+   */
+  function convertSecondsToTimeUnits(seconds) {
+    var total = Math.max(0, seconds);
+    var days = Math.floor(total / SECONDS_PER_DAY);
+    total -= days * SECONDS_PER_DAY;
+    var hours = Math.floor(total / SECONDS_PER_HOUR);
+    total -= hours * SECONDS_PER_HOUR;
+    var minutes = Math.floor(total / SECONDS_PER_MINUTE);
+    total -= minutes * SECONDS_PER_MINUTE;
+    var secs = Math.floor(total);
+    var ms = Math.round((total - secs) * 1000);
+    return { days: days, hours: hours, minutes: minutes, seconds: secs, milliseconds: ms };
+  }
+
+  /**
+   * @param {number} val - stored value (seconds or milliseconds)
+   * @param {string} formatType - 'seconds' | 'milliseconds'
+   * @returns {number} seconds
+   */
+  function getSecondsFromValue(val, formatType) {
+    if (formatType === "milliseconds") {
+      return (val || 0) / 1000;
+    }
+    return val || 0;
+  }
+
+  /**
+   * @param {number} seconds
+   * @param {string} formatType - 'seconds' | 'milliseconds'
+   * @returns {number}
+   */
+  function getValueFromSeconds(seconds, formatType) {
+    if (formatType === "milliseconds") {
+      return Math.round(seconds * 1000);
+    }
+    return Math.round(seconds);
+  }
+
+  /**
+   * Parse duration string: "2d1h15m30s", "4000s", "1:30:00", "90", etc.
+   * @param {string} input
+   * @param {string} formatType - 'seconds' | 'milliseconds'
+   * @returns {number} total seconds (can be fractional)
+   */
+  function parseDuration(input, formatType) {
+    if (!input || typeof input !== "string") return 0;
+    var cleaned = input.replace(/\s+/g, "").toLowerCase();
+
+    if (/^\d+(\.\d+)?$/.test(cleaned)) {
+      var num = parseFloat(cleaned);
+      return formatType === "milliseconds" ? num / 1000 : num;
+    }
+
+    var totalSeconds = 0;
+    var patterns = [
+      { regex: /(\d+(?:\.\d+)?)d/g, multiplier: SECONDS_PER_DAY },
+      { regex: /(\d+(?:\.\d+)?)h/g, multiplier: SECONDS_PER_HOUR },
+      { regex: /(\d+(?:\.\d+)?)m(?!s)/g, multiplier: SECONDS_PER_MINUTE },
+      { regex: /(\d+(?:\.\d+)?)s/g, multiplier: 1 },
+      { regex: /(\d+(?:\.\d+)?)ms/g, multiplier: SECONDS_PER_MILLISECOND },
+    ];
+
+    patterns.forEach(function (p) {
+      var regex = new RegExp(p.regex.source, p.regex.flags || "g");
+      var match;
+      while ((match = regex.exec(cleaned)) !== null) {
+        totalSeconds += parseFloat(match[1]) * p.multiplier;
+      }
+    });
+
+    // Time format hh:mm:ss or mm:ss or d:hh:mm:ss
+    if (cleaned.indexOf(":") !== -1 && !/[dhms]/.test(cleaned)) {
+      var parts = cleaned.split(":").map(function (p) {
+        return parseFloat(p) || 0;
+      });
+      if (parts.length === 2) {
+        totalSeconds = parts[0] * SECONDS_PER_MINUTE + parts[1];
+      } else if (parts.length === 3) {
+        totalSeconds = parts[0] * SECONDS_PER_HOUR + parts[1] * SECONDS_PER_MINUTE + parts[2];
+      } else if (parts.length === 4) {
+        totalSeconds =
+          parts[0] * SECONDS_PER_DAY +
+          parts[1] * SECONDS_PER_HOUR +
+          parts[2] * SECONDS_PER_MINUTE +
+          parts[3];
+      }
+    }
+
+    return totalSeconds;
+  }
+
+  /**
+   * @param {number} seconds
+   * @param {string} [placeholder]
+   * @returns {string}
+   */
+  function formatDuration(seconds, placeholder) {
+    if (seconds === 0) return placeholder || "Select duration";
+    var u = convertSecondsToTimeUnits(seconds);
+    var parts = [];
+    if (u.days > 0) parts.push(u.days + "d");
+    if (u.hours > 0) parts.push(u.hours + "h");
+    if (u.minutes > 0) parts.push(u.minutes + "m");
+    if (u.seconds > 0) parts.push(u.seconds + "s");
+    if (u.milliseconds > 0 && parts.length === 0) parts.push(u.milliseconds + "ms");
+    return parts.join(" ") || "0s";
+  }
+
+  /**
+   * @param {{ days: number, hours: number, minutes: number, seconds: number }} values
+   * @returns {number}
+   */
+  function wheelValuesToSeconds(values) {
+    return (
+      (values.days || 0) * SECONDS_PER_DAY +
+      (values.hours || 0) * SECONDS_PER_HOUR +
+      (values.minutes || 0) * SECONDS_PER_MINUTE +
+      (values.seconds || 0)
+    );
+  }
+
+  var MAX_VALUES = { days: 999, hours: 23, minutes: 59, seconds: 59 };
+
+  /**
+   * @param {string} unit - 'days' | 'hours' | 'minutes' | 'seconds'
+   * @param {number} value
+   * @returns {number}
+   */
+  function clampWheelValue(unit, value) {
+    var max = MAX_VALUES[unit];
+    return Math.max(0, Math.min(max, isNaN(value) ? 0 : value));
+  }
+
+  global.DurationUtils = {
+    convertSecondsToTimeUnits: convertSecondsToTimeUnits,
+    getSecondsFromValue: getSecondsFromValue,
+    getValueFromSeconds: getValueFromSeconds,
+    parseDuration: parseDuration,
+    formatDuration: formatDuration,
+    wheelValuesToSeconds: wheelValuesToSeconds,
+    clampWheelValue: clampWheelValue,
+    MAX_VALUES: MAX_VALUES,
+    SECONDS_PER_DAY: SECONDS_PER_DAY,
+    SECONDS_PER_HOUR: SECONDS_PER_HOUR,
+    SECONDS_PER_MINUTE: SECONDS_PER_MINUTE,
+    SECONDS_PER_MILLISECOND: SECONDS_PER_MILLISECOND,
+  };
+})(typeof window !== "undefined" ? window : this);

package/components/duration/duration.js

@@ -0,0 +1,448 @@
+/**
+ * Duration Component (vanilla JS)
+ * Popover duration picker: text input, number wheels (d/h/m/s), presets, Clear/Done.
+ * Ref: React DurationInput with formatType (seconds | milliseconds), variants, sizes.
+ * Depends: DurationUtils, DurationConstants, Popover, Button, InputComponent.
+ */
+
+(function (global) {
+  "use strict";
+
+  function getDep(name) {
+    if (typeof global.FlowUI !== "undefined" && typeof global.FlowUI._getComponent === "function") {
+      var c = global.FlowUI._getComponent(name);
+      if (c) return c;
+    }
+    return global[name];
+  }
+
+  var ICON_CHEVRON_DOWN =
+    '<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="m6 9 6 6 6-6"/></svg>';
+  var ICON_X =
+    '<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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>';
+
+  var TRIGGER_CLASS = {
+    base:
+      "flex items-center justify-between border-1/2 rounded-4 text-typography-primary-text gap-x-8 w-full transition-all ease-in-out cursor-pointer",
+    default:
+      "border-border-primary 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",
+    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 opacity-60",
+  };
+
+  function join() {
+    return Array.prototype.filter.call(arguments, Boolean).join(" ");
+  }
+
+  function createNumberWheel(unit, label, value, maxVal, onChange, onKeyDown) {
+    var Utils = global.DurationUtils;
+    if (!Utils) throw new Error("DurationUtils required");
+    var wrapper = document.createElement("div");
+    wrapper.className = "flex flex-col items-center justify-center";
+    var inputWrap = document.createElement("div");
+    inputWrap.className = "overflow-hidden rounded-4 border-1/2 border-border-primary";
+    var input = document.createElement("input");
+    input.type = "number";
+    input.min = 0;
+    input.max = maxVal;
+    input.value = Math.max(0, Math.min(maxVal, value));
+    input.className = join(
+      "w-full bg-inherit text-center outline-none text-reg-13 px-8 py-4 border-0",
+      "placeholder:text-typography-quaternary-text focus:bg-fill-tertiary-fill-light-gray",
+      unit === "days" ? "!w-48 !min-w-48" : "!w-40 !min-w-40"
+    );
+    input.setAttribute("placeholder", label);
+    inputWrap.appendChild(input);
+    wrapper.appendChild(inputWrap);
+    var labelEl = document.createElement("span");
+    labelEl.className = "mt-4 text-reg-10 text-typography-tertiary-text";
+    labelEl.textContent = label;
+    wrapper.appendChild(labelEl);
+
+    input.addEventListener("input", function () {
+      var v = parseInt(input.value, 10);
+      if (isNaN(v)) v = 0;
+      var clamped = Utils.clampWheelValue(unit, v);
+      input.value = clamped;
+      onChange(clamped);
+    });
+    input.addEventListener("change", function () {
+      var v = parseInt(input.value, 10);
+      if (isNaN(v)) v = 0;
+      var clamped = Utils.clampWheelValue(unit, v);
+      input.value = clamped;
+      onChange(clamped);
+    });
+    if (onKeyDown) {
+      input.addEventListener("keydown", onKeyDown);
+    }
+
+    wrapper.getInput = function () {
+      return input;
+    };
+    wrapper.setValue = function (v) {
+      var clamped = Utils.clampWheelValue(unit, v);
+      input.value = clamped;
+    };
+    return wrapper;
+  }
+
+  /**
+   * Create duration picker component
+   * @param {Object} config
+   * @param {number|null} [config.value] - Current value (seconds or ms depending on formatType)
+   * @param {string} [config.formatType='seconds'] - 'seconds' | 'milliseconds'
+   * @param {Function} [config.onChange] - (value: number | null) => void
+   * @param {string} [config.placeholder='hh:mm:ss']
+   * @param {string} [config.variant='default'] - default | error | warning | success | borderless | inline
+   * @param {string} [config.size='default'] - small | default | large
+   * @param {boolean} [config.disabled]
+   * @param {string} [config.className]
+   * @returns {HTMLElement} Container (trigger + popover)
+   */
+  function create(config) {
+    var Utils = global.DurationUtils;
+    var Constants = global.DurationConstants;
+    var Popover = getDep("Popover");
+    var Button = getDep("Button");
+    var InputComponent = getDep("InputComponent");
+    if (!Utils || !Constants || !Popover || !Button) {
+      throw new Error("Duration requires DurationUtils, DurationConstants, Popover, Button");
+    }
+
+    var value = config.value != null ? config.value : null;
+    var formatType = config.formatType === "milliseconds" ? "milliseconds" : "seconds";
+    var onChange = config.onChange;
+    var placeholder = config.placeholder != null ? config.placeholder : "hh:mm:ss";
+    var variant = config.variant || "default";
+    var size = config.size || "default";
+    var disabled = !!config.disabled;
+    var className = config.className || "";
+
+    var currentSeconds = Utils.getSecondsFromValue(value || 0, formatType);
+    var displayDuration = Utils.formatDuration(currentSeconds, placeholder);
+    var millisecondsDisplay =
+      currentSeconds > 0 && formatType === "milliseconds"
+        ? Math.round(currentSeconds * 1000) + "ms"
+        : null;
+
+    var wheelValues = Utils.convertSecondsToTimeUnits(currentSeconds);
+    var inputValue = "";
+
+    var triggerWrapper = document.createElement("div");
+    triggerWrapper.className = join(
+      TRIGGER_CLASS.base,
+      TRIGGER_CLASS[variant] != null ? TRIGGER_CLASS[variant] : TRIGGER_CLASS.default,
+      size === "large" ? TRIGGER_CLASS.sizeLarge : size === "small" ? TRIGGER_CLASS.sizeSmall : TRIGGER_CLASS.sizeDefault,
+      disabled ? TRIGGER_CLASS.disabled : "",
+      className
+    );
+    triggerWrapper.setAttribute("role", "button");
+    triggerWrapper.setAttribute("tabindex", disabled ? "-1" : "0");
+    triggerWrapper.setAttribute("aria-haspopup", "dialog");
+    triggerWrapper.setAttribute("aria-expanded", "false");
+
+    var triggerContent = document.createElement("div");
+    triggerContent.className = "flex flex-1 items-center gap-8 min-w-0";
+    var triggerText = document.createElement("p");
+    triggerText.className = "truncate text-reg-13 " + (displayDuration === placeholder ? "text-typography-quaternary-text" : "");
+    triggerText.textContent = displayDuration;
+    triggerContent.appendChild(triggerText);
+    if (millisecondsDisplay) {
+      var msSpan = document.createElement("span");
+      msSpan.className = "text-xs text-typography-tertiary-text truncate shrink-0";
+      msSpan.textContent = millisecondsDisplay;
+      triggerContent.appendChild(msSpan);
+    }
+    triggerWrapper.appendChild(triggerContent);
+
+    if (variant !== "inline") {
+      var chevronWrap = document.createElement("span");
+      chevronWrap.className = "size-16 text-typography-quaternary-text shrink-0 flex items-center justify-center";
+      chevronWrap.innerHTML = ICON_CHEVRON_DOWN;
+      chevronWrap.setAttribute("aria-hidden", "true");
+      triggerWrapper.appendChild(chevronWrap);
+    }
+
+    var container = document.createElement("div");
+    container.className = "duration-picker relative w-full";
+    container.appendChild(triggerWrapper);
+
+    function updateTriggerDisplay() {
+      currentSeconds = Utils.getSecondsFromValue(value || 0, formatType);
+      displayDuration = Utils.formatDuration(currentSeconds, placeholder);
+      triggerText.textContent = displayDuration;
+      triggerText.className = "truncate text-reg-13 " + (displayDuration === placeholder ? "text-typography-quaternary-text" : "");
+      if (msSpan) {
+        if (currentSeconds > 0 && formatType === "milliseconds") {
+          msSpan.textContent = Math.round(currentSeconds * 1000) + "ms";
+          msSpan.style.display = "";
+        } else {
+          msSpan.style.display = "none";
+        }
+      }
+    }
+
+    function applyAndClose(seconds) {
+      value = seconds === 0 ? null : Utils.getValueFromSeconds(seconds, formatType);
+      inputValue = "";
+      updateTriggerDisplay();
+      if (onChange) onChange(value);
+      popoverApi.hide();
+    }
+
+    function handleDone() {
+      var seconds = inputValue
+        ? Utils.parseDuration(inputValue, formatType)
+        : Utils.wheelValuesToSeconds(wheelValues);
+      applyAndClose(seconds);
+      inputValue = "";
+    }
+
+    function handleClear() {
+      value = null;
+      wheelValues = { days: 0, hours: 0, minutes: 0, seconds: 0 };
+      inputValue = "";
+      updateTriggerDisplay();
+      if (onChange) onChange(null);
+      popoverApi.hide();
+    }
+
+    var popoverContent = document.createElement("div");
+    popoverContent.className = "p-0";
+
+    var inputSection = document.createElement("div");
+    inputSection.className = "p-8";
+    var durationInputEl;
+    var clearBtnWrap;
+    if (InputComponent && InputComponent.create) {
+      var inputWrapper = document.createElement("div");
+      inputWrapper.className = "relative";
+      durationInputEl = InputComponent.create({
+        type: "text",
+        placeholder: "2d1h15m30s, 4000s, 1:30:00...",
+        variant: "default",
+        inputSize: "default",
+        onChange: function () {},
+        onInput: function () {
+          var inputEl = durationInputEl.getInput && durationInputEl.getInput();
+          if (inputEl) {
+            inputValue = inputEl.value;
+            if (inputValue) {
+              var parsed = Utils.parseDuration(inputValue, formatType);
+              wheelValues = Utils.convertSecondsToTimeUnits(parsed);
+              DURATION_WHEELS.forEach(function (w, i) {
+                if (wheelInputs[i] && wheelInputs[i].setValue) wheelInputs[i].setValue(wheelValues[w.unit]);
+              });
+            }
+          }
+        },
+      });
+      var inputEl = durationInputEl.getInput && durationInputEl.getInput();
+      if (inputEl) {
+        inputEl.addEventListener("keydown", function (e) {
+          if (e.key !== "Enter") return;
+          e.preventDefault();
+          var val = durationInputEl.getValue && durationInputEl.getValue();
+          if (val) {
+            var parsed = Utils.parseDuration(val, formatType);
+            applyAndClose(parsed);
+            if (durationInputEl.setValue) durationInputEl.setValue("");
+          }
+          inputValue = "";
+        });
+      }
+      inputWrapper.appendChild(durationInputEl);
+      clearBtnWrap = document.createElement("span");
+      clearBtnWrap.className = "absolute right-12 top-1/2 -translate-y-1/2 cursor-pointer text-typography-quaternary-text hover:text-typography-primary-text";
+      clearBtnWrap.innerHTML = ICON_X;
+      clearBtnWrap.setAttribute("role", "button");
+      clearBtnWrap.setAttribute("aria-label", "Clear input");
+      clearBtnWrap.style.display = "none";
+      inputWrapper.appendChild(clearBtnWrap);
+      clearBtnWrap.addEventListener("click", function (e) {
+        e.stopPropagation();
+        if (durationInputEl.setValue) durationInputEl.setValue("");
+        inputValue = "";
+        clearBtnWrap.style.display = "none";
+      });
+      if (inputEl) {
+        inputEl.addEventListener("input", function () {
+          clearBtnWrap.style.display = inputEl.value ? "" : "none";
+        });
+      }
+      inputSection.appendChild(inputWrapper);
+    }
+    popoverContent.appendChild(inputSection);
+
+    var sep1 = document.createElement("div");
+    sep1.className = "border-t-1/2 border-border-primary w-full";
+    popoverContent.appendChild(sep1);
+
+    var wheelsSection = document.createElement("div");
+    wheelsSection.className = "flex justify-center gap-8 p-8";
+    var DURATION_WHEELS = Constants.DURATION_WHEELS;
+    var MAX_VALUES = Utils.MAX_VALUES;
+    var wheelInputs = [];
+
+    function handleWheelKeyDown(e) {
+      if (e.key !== "Enter") return;
+      e.preventDefault();
+      handleDone();
+    }
+
+    DURATION_WHEELS.forEach(function (w) {
+      var wheelEl = createNumberWheel(
+        w.unit,
+        w.label,
+        wheelValues[w.unit],
+        MAX_VALUES[w.unit],
+        function (newVal) {
+          wheelValues[w.unit] = newVal;
+          inputValue = "";
+          if (durationInputEl && durationInputEl.setValue) durationInputEl.setValue("");
+          if (clearBtnWrap) clearBtnWrap.style.display = "none";
+        },
+        handleWheelKeyDown
+      );
+      wheelInputs.push(wheelEl);
+      wheelsSection.appendChild(wheelEl);
+    });
+    popoverContent.appendChild(wheelsSection);
+
+    var sep2 = document.createElement("div");
+    sep2.className = "border-t-1/2 border-border-primary w-full";
+    popoverContent.appendChild(sep2);
+
+    var presetsSection = document.createElement("div");
+    presetsSection.className = "p-8";
+    var PRESET_DURATIONS = Constants.PRESET_DURATIONS;
+    PRESET_DURATIONS.forEach(function (group) {
+      var groupDiv = document.createElement("div");
+      groupDiv.className = "space-y-2";
+      var labelEl = document.createElement("label");
+      labelEl.className = "text-reg-12 text-typography-secondary-text block";
+      labelEl.textContent = group.title;
+      groupDiv.appendChild(labelEl);
+      var grid = document.createElement("div");
+      grid.className = "grid grid-cols-4 gap-4";
+      group.presets.forEach(function (preset) {
+        var isSelected = Math.abs(currentSeconds - preset.value) < 1;
+        var btn = Button.create({
+          variant: isSelected ? "outline" : "dashed",
+          size: "small",
+          text: preset.label,
+          className: "text-xs",
+          onClick: function () {
+            applyAndClose(preset.value);
+            inputValue = "";
+          },
+        });
+        grid.appendChild(btn);
+      });
+      groupDiv.appendChild(grid);
+      presetsSection.appendChild(groupDiv);
+    });
+    popoverContent.appendChild(presetsSection);
+
+    var sep3 = document.createElement("div");
+    sep3.className = "border-t-1/2 border-border-primary w-full";
+    popoverContent.appendChild(sep3);
+
+    var footer = document.createElement("div");
+    footer.className = "flex justify-end gap-8 p-8";
+    var clearBtn = Button.create({
+      variant: "outline",
+      size: "small",
+      text: "Clear",
+      className: "text-error-text-base hover:text-error-text-hover",
+      onClick: handleClear,
+    });
+    if (currentSeconds <= 0) clearBtn.style.display = "none";
+    footer.appendChild(clearBtn);
+    var doneBtn = Button.create({
+      variant: "primary",
+      size: "small",
+      text: "Done",
+      onClick: handleDone,
+    });
+    footer.appendChild(doneBtn);
+    popoverContent.appendChild(footer);
+
+    var popoverApi = Popover.create({
+      trigger: triggerWrapper,
+      content: popoverContent,
+      placement: "bottom",
+      align: "start",
+      closeOnClickOutside: true,
+      panelClassName: "w-[275px]",
+      bodyClassName: "p-0",
+      onOpen: function () {
+        triggerWrapper.setAttribute("aria-expanded", "true");
+        if (!inputValue) {
+          wheelValues = Utils.convertSecondsToTimeUnits(currentSeconds);
+          wheelInputs.forEach(function (el, i) {
+            if (el.setValue) el.setValue(wheelValues[DURATION_WHEELS[i].unit]);
+          });
+        }
+        if (durationInputEl && durationInputEl.setValue) durationInputEl.setValue(inputValue);
+        if (clearBtnWrap) clearBtnWrap.style.display = inputValue ? "" : "none";
+        clearBtn.style.display = currentSeconds > 0 ? "" : "none";
+      },
+      onClose: function () {
+        triggerWrapper.setAttribute("aria-expanded", "false");
+      },
+    });
+
+    triggerWrapper.addEventListener(
+      "click",
+      function (e) {
+        if (disabled) {
+          e.preventDefault();
+          e.stopImmediatePropagation();
+        }
+      },
+      true
+    );
+    triggerWrapper.addEventListener("keydown", function (e) {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        if (!disabled) triggerWrapper.click();
+      }
+    });
+
+    container.getValue = function () {
+      return value;
+    };
+    container.setValue = function (v) {
+      value = v;
+      updateTriggerDisplay();
+    };
+    container.setDisabled = function (d) {
+      disabled = !!d;
+      triggerWrapper.classList.toggle("cursor-not-allowed", disabled);
+      triggerWrapper.classList.toggle("opacity-60", disabled);
+      triggerWrapper.setAttribute("tabindex", disabled ? "-1" : "0");
+      if (disabled) popoverApi.hide();
+    };
+
+    return container;
+  }
+
+  global.Duration = {
+    create: create,
+  };
+})(typeof window !== "undefined" ? window : this);