@superleapai/flow-ui 1.0.0

package/components/date-time-picker/date-time-picker.js

@@ -0,0 +1,532 @@
+/**
+ * Date-time-picker Component (vanilla JS)
+ * Combines calendar grid, optional time picker, and quick actions (Today, Tomorrow, No date).
+ * Uses Popover, Button, Select, TimePicker; depends on date-time-picker-utils.js.
+ */
+
+(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_CALENDAR =
+    '<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="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>';
+
+  var ICON_CHEVRON_LEFT =
+    '<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="m15 18-6-6 6-6"/></svg>';
+  var ICON_CHEVRON_RIGHT =
+    '<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 18 6-6-6-6"/></svg>';
+  var ICON_CALENDAR_DOT =
+    '<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="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/><circle cx="12" cy="15" r="1"/></svg>';
+  var ICON_CALENDAR_UP =
+    '<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="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/><path d="m12 14 2-2 2 2"/><path d="m12 18 2-2 2 2"/></svg>';
+  var ICON_CALENDAR_MINUS =
+    '<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="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/><path d="M8 14h8"/></svg>';
+  var ICON_CLOCK =
+    '<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"/><polyline points="12 6 12 12 16 14"/></svg>';
+
+  function join() {
+    return Array.prototype.filter.call(arguments, Boolean).join(" ");
+  }
+
+  /**
+   * Create the calendar caption (month + year selects) and nav buttons
+   */
+  function createCaption(displayMonth, fromDate, toDate, yearRange, onMonthChange, onPrev, onNext) {
+    var Utils = global.DateTimePickerUtils;
+    if (!Utils) throw new Error("DateTimePickerUtils required");
+    var MONTHS = Utils.genMonths();
+    var YEARS = Utils.genYears(fromDate, toDate, yearRange);
+    var isPrevDisabled = Utils.isPreviousMonthDisabled(displayMonth, fromDate);
+    var isNextDisabled = Utils.isNextMonthDisabled(displayMonth, toDate);
+
+    var captionWrap = document.createElement("div");
+    captionWrap.className = "flex justify-between relative items-center p-6";
+
+    var Select = getDep("Select");
+    if (Select && typeof Select.create === "function") {
+      var monthValue = displayMonth.getMonth();
+      var yearValue = displayMonth.getFullYear();
+      var monthOptions = MONTHS.map(function (m) {
+        return { value: m.value, label: m.label.slice(0, 3) };
+      });
+      var yearOptions = YEARS.map(function (y) {
+        return { value: y.value, label: y.label };
+      });
+      var selectWrap = document.createElement("div");
+      selectWrap.className = "inline-flex gap-x-8";
+      var monthSelect = Select.create({
+        options: monthOptions,
+        value: monthValue,
+        placeholder: "Month",
+        size: "small",
+        onChange: function (val) {
+          var d = new Date(displayMonth.getTime());
+          d.setMonth(Number(val));
+          onMonthChange(d);
+        },
+      });
+      var yearSelect = Select.create({
+        options: yearOptions,
+        value: yearValue,
+        placeholder: "Year",
+        size: "small",
+        onChange: function (val) {
+          var d = new Date(displayMonth.getTime());
+          d.setFullYear(Number(val));
+          onMonthChange(d);
+        },
+      });
+      selectWrap.appendChild(monthSelect);
+      selectWrap.appendChild(yearSelect);
+      captionWrap.appendChild(selectWrap);
+    }
+
+    var Button = getDep("Button");
+    if (!Button || typeof Button.create !== "function") {
+      var fallbackNav = document.createElement("div");
+      fallbackNav.className = "flex items-center gap-x-8";
+      fallbackNav.textContent = "Button component required";
+      captionWrap.appendChild(fallbackNav);
+      return { element: captionWrap, setMonth: function () {} };
+    }
+    var nav = document.createElement("div");
+    nav.className = "flex items-center gap-x-8";
+    var prevBtn = Button.create({
+      icon: ICON_CHEVRON_LEFT,
+      variant: "ghost",
+      size: "small",
+      label: "Previous month",
+      disabled: isPrevDisabled,
+      className: "opacity-50 hover:opacity-100",
+      onClick: !isPrevDisabled ? onPrev : undefined,
+    });
+    var nextBtn = Button.create({
+      icon: ICON_CHEVRON_RIGHT,
+      variant: "ghost",
+      size: "small",
+      label: "Next month",
+      disabled: isNextDisabled,
+      className: "opacity-50 hover:opacity-100",
+      onClick: !isNextDisabled ? onNext : undefined,
+    });
+    nav.appendChild(prevBtn);
+    nav.appendChild(nextBtn);
+    captionWrap.appendChild(nav);
+
+    return {
+      element: captionWrap,
+      setMonth: function (d) {
+        if (Select && captionWrap.querySelectorAll(".custom-select").length >= 2) {
+          var selects = captionWrap.querySelectorAll(".custom-select");
+          if (selects[0].updateValue) selects[0].updateValue(d.getMonth());
+          if (selects[1].updateValue) selects[1].updateValue(d.getFullYear());
+        }
+      },
+    };
+  }
+
+  /**
+   * Build calendar table (weekday headers + day grid)
+   */
+  function createCalendarGrid(displayMonth, selectedDate, fromDate, toDate, onSelectDay) {
+    var Utils = global.DateTimePickerUtils;
+    if (!Utils) throw new Error("DateTimePickerUtils required");
+    var grid = Utils.getMonthGrid(displayMonth, selectedDate, fromDate, toDate);
+    var weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+
+    var tableWrap = document.createElement("div");
+    tableWrap.className = "w-full border-collapse border-t-1/2 border-border-primary";
+
+    var headRow = document.createElement("div");
+    headRow.className = "flex gap-x-6 p-6";
+    weekDays.forEach(function (wd) {
+      var th = document.createElement("div");
+      th.className = "text-typography-tertiary-text flex-1 flex items-center justify-center text-reg-12 my-2 text-center";
+      th.textContent = wd;
+      headRow.appendChild(th);
+    });
+    tableWrap.appendChild(headRow);
+
+    var Button = getDep("Button");
+    if (!Button || typeof Button.create !== "function") {
+      var fallbackRows = document.createElement("div");
+      fallbackRows.className = "space-y-0 p-6 text-typography-tertiary-text text-reg-12";
+      fallbackRows.textContent = "Button component required";
+      tableWrap.appendChild(fallbackRows);
+      return tableWrap;
+    }
+    var rowsWrap = document.createElement("div");
+    rowsWrap.className = "space-y-0";
+    grid.forEach(function (week) {
+      var row = document.createElement("div");
+      row.className = "flex gap-x-6 px-6";
+      week.forEach(function (cell) {
+        var variant = "ghost";
+        if (cell.isSelected) {
+          variant = "primary";
+        } else if (cell.isToday) {
+          variant = "outline";
+        }
+        var btnClassName = join(
+          "!text-reg-12 my-2  flex-1 !px-0 !py-0",
+          cell.currentMonth ? "" : "text-typography-quaternary-text"
+        );
+        var btn = Button.create({
+          variant: variant,
+          size: "small",
+          text: String(cell.date.getDate()),
+          label: cell.date.toDateString(),
+          disabled: cell.disabled,
+          className: btnClassName,
+          onClick: !cell.disabled ? function () {
+            onSelectDay(new Date(cell.date.getTime()));
+          } : undefined,
+        });
+        row.appendChild(btn);
+      });
+      rowsWrap.appendChild(row);
+    });
+    tableWrap.appendChild(rowsWrap);
+
+    return tableWrap;
+  }
+
+  /**
+   * Create date-time-picker component
+   * @param {Object} config
+   * @param {Date} [config.value] - Current value
+   * @param {Function} [config.onChange] - (date: Date | undefined) => void
+   * @param {boolean} [config.disabled]
+   * @param {12|24} [config.hourCycle=12]
+   * @param {number} [config.yearRange=50]
+   * @param {string} [config.placeholder='Pick a date']
+   * @param {'day'|'hour'|'minute'|'second'} [config.granularity='minute']
+   * @param {string} [config.variant='default']
+   * @param {string} [config.size='default']
+   * @param {string} [config.className]
+   * @param {Date} [config.fromDate]
+   * @param {Date} [config.toDate]
+   * @param {string} [config.align='start']
+   * @returns {HTMLElement} Container element (trigger + popover instance)
+   */
+  function create(config) {
+    var Utils = global.DateTimePickerUtils;
+    if (!Utils) throw new Error("DateTimePickerUtils required");
+    var Popover = getDep("Popover");
+    var Button = getDep("Button");
+    var TimePicker = getDep("TimePicker");
+    if (!Popover || typeof Popover.create !== "function" || !Button || typeof Button.create !== "function") {
+      throw new Error("Popover and Button required");
+    }
+
+    var value = config.value;
+    var onChange = config.onChange;
+    var disabled = !!config.disabled;
+    var hourCycle = config.hourCycle === 24 ? 24 : 12;
+    var yearRange = config.yearRange != null ? config.yearRange : 50;
+    var placeholder = config.placeholder != null ? config.placeholder : "Pick a date";
+    var granularity = config.granularity || "minute";
+    var variant = config.variant || "default";
+    var size = config.size || "default";
+    var fromDate = config.fromDate;
+    var toDate = config.toDate;
+    var align = config.align || "start";
+
+    var validDate = Utils.getValidDate(value, fromDate, toDate);
+    var displayMonth = validDate ? new Date(validDate.getTime()) : new Date();
+
+    var triggerWrapper = document.createElement("div");
+    var triggerClasses = join(
+      "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",
+      "bg-fill-quarternary-fill-white hover:border-primary-base focus-within:border-primary-base",
+      size === "large" ? "px-12 py-8" : size === "small" ? "px-12 py-4" : "px-12 py-6",
+      disabled ? "cursor-not-allowed border-border-primary bg-fill-tertiary-fill-light-gray text-typography-quaternary-text hover:border-border-primary" : "cursor-pointer"
+    );
+    triggerWrapper.className = triggerClasses;
+    triggerWrapper.setAttribute("role", "button");
+    triggerWrapper.setAttribute("tabindex", disabled ? "-1" : "0");
+    triggerWrapper.setAttribute("aria-haspopup", "dialog");
+    triggerWrapper.setAttribute("aria-expanded", "false");
+
+    var triggerText = document.createElement("span");
+    triggerText.className = "flex-1 truncate text-left text-reg-13";
+    var formatted = Utils.formatDateTime(validDate, hourCycle, granularity);
+    triggerText.textContent = formatted || placeholder;
+    triggerText.classList.toggle("text-typography-quaternary-text", !formatted);
+    triggerWrapper.appendChild(triggerText);
+
+    var iconWrap = document.createElement("span");
+    iconWrap.className = "flex size-16 shrink-0 items-center justify-center text-typography-primary-text [&_svg]:text-typography-primary-text";
+    iconWrap.setAttribute("aria-hidden", "true");
+    iconWrap.innerHTML = ICON_CALENDAR;
+    triggerWrapper.appendChild(iconWrap);
+
+    var container = document.createElement("div");
+    container.className = "date-time-picker relative w-full " + (config.className || "");
+    container.appendChild(triggerWrapper);
+
+    function updateTriggerText() {
+      validDate = Utils.getValidDate(value, fromDate, toDate);
+      formatted = Utils.formatDateTime(validDate, hourCycle, granularity);
+      triggerText.textContent = formatted || placeholder;
+      triggerText.classList.toggle("text-typography-quaternary-text", !formatted);
+    }
+
+    function setMonth(d) {
+      displayMonth = new Date(d.getTime());
+    }
+
+    var captionEl;
+    var calendarEl;
+    var timePickerEl;
+    var quickRow;
+
+    function handleSelectDay(dayDate) {
+      var out;
+      if (granularity === "day") {
+        out = Utils.startOfDay(dayDate);
+      } else {
+        out = new Date(dayDate.getTime());
+        if (validDate) {
+          out.setHours(validDate.getHours(), validDate.getMinutes(), validDate.getSeconds(), 0);
+        }
+      }
+      value = Utils.getValidDate(out, fromDate, toDate);
+      validDate = value;
+      updateTriggerText();
+      if (onChange) onChange(value);
+      setMonth(out);
+      if (captionEl && captionEl.setMonth) captionEl.setMonth(displayMonth);
+      if (timePickerEl && timePickerEl.updateValue) {
+        timePickerEl.updateValue(Utils.getTimeString(value));
+      }
+      refreshCalendar();
+    }
+
+    function refreshCalendar() {
+      var oldCalendar = panelInner.querySelector("[data-dtp-calendar]");
+      if (oldCalendar) oldCalendar.remove();
+      var calendarWrap = document.createElement("div");
+      calendarWrap.setAttribute("data-dtp-calendar", "true");
+      calendarEl = createCalendarGrid(
+        displayMonth,
+        validDate,
+        fromDate,
+        toDate,
+        handleSelectDay
+      );
+      calendarWrap.appendChild(calendarEl);
+      var first = panelInner.firstElementChild;
+      if (first) {
+        panelInner.insertBefore(calendarWrap, first.nextSibling);
+      } else {
+        panelInner.appendChild(calendarWrap);
+      }
+    }
+
+    var panelInner = document.createElement("div");
+    panelInner.className = "px-0";
+
+    function buildPanelContent() {
+      var fragment = document.createDocumentFragment();
+
+      // Caption (month/year dropdowns then nav chevrons)
+      captionEl = createCaption(
+        displayMonth,
+        fromDate,
+        toDate,
+        yearRange,
+        function (d) {
+          setMonth(d);
+          refreshCalendar();
+          if (captionEl && captionEl.setMonth) captionEl.setMonth(displayMonth);
+        },
+        function () {
+          if (!Utils.isPreviousMonthDisabled(displayMonth, fromDate)) {
+            setMonth(Utils.addMonths(displayMonth, -1));
+            refreshCalendar();
+            if (captionEl && captionEl.setMonth) captionEl.setMonth(displayMonth);
+          }
+        },
+        function () {
+          if (!Utils.isNextMonthDisabled(displayMonth, toDate)) {
+            setMonth(Utils.addMonths(displayMonth, 1));
+            refreshCalendar();
+            if (captionEl && captionEl.setMonth) captionEl.setMonth(displayMonth);
+          }
+        }
+      );
+      fragment.appendChild(captionEl.element);
+
+      // Calendar grid (reduced bottom padding to avoid large gap above date/time row)
+      var calendarWrap = document.createElement("div");
+      calendarWrap.setAttribute("data-dtp-calendar", "true");
+      calendarEl = createCalendarGrid(
+        displayMonth,
+        validDate,
+        fromDate,
+        toDate,
+        handleSelectDay
+      );
+      calendarWrap.appendChild(calendarEl);
+      fragment.appendChild(calendarWrap);
+
+      // Time row (when granularity !== 'day'): TimePicker only
+      if (granularity !== "day" && TimePicker) {
+        var timeRow = document.createElement("div");
+        timeRow.className = "border-t-1/2 border-border-primary p-6";
+
+        var timeValue = validDate ? Utils.getTimeString(validDate) : "00:00";
+        timePickerEl = TimePicker.create({
+          fieldId: "dtp-time",
+          value: timeValue,
+          placeholder: "Time",
+          use24Hour: hourCycle === 24,
+          size: "small",
+          onChange: function (timeStr) {
+            var base = value ? new Date(value.getTime()) : new Date();
+            Utils.setTimeFromString(base, timeStr);
+            value = Utils.getValidDate(base, fromDate, toDate);
+            validDate = value;
+            updateTriggerText();
+            if (onChange) onChange(value);
+          },
+        });
+        timeRow.appendChild(timePickerEl);
+        fragment.appendChild(timeRow);
+      }
+
+      // Quick actions
+      var quick = Utils.getQuickSelectionDates(fromDate, toDate);
+      quickRow = document.createElement("div");
+      quickRow.className = "flex flex-wrap gap-8 border-t-1/2 border-border-primary p-6";
+      if (quick.today) {
+        var todayBtn = Button.create({
+          variant: "outline",
+          size: "small",
+          text: "Today",
+          startIcon: ICON_CALENDAR_DOT,
+          onClick: function () {
+            var t = granularity === "day" ? Utils.startOfDay(new Date()) : new Date();
+            value = Utils.getValidDate(t, fromDate, toDate);
+            validDate = value;
+            setMonth(value || new Date());
+            updateTriggerText();
+            if (onChange) onChange(value);
+            refreshCalendar();
+            if (timePickerEl && timePickerEl.updateValue && value) {
+              timePickerEl.updateValue(Utils.getTimeString(value));
+            }
+          },
+        });
+        quickRow.appendChild(todayBtn);
+      }
+      if (quick.tomorrow) {
+        var tomorrowBtn = Button.create({
+          variant: "outline",
+          size: "small",
+          text: "Tomorrow",
+          startIcon: ICON_CALENDAR_UP,
+          onClick: function () {
+            var t = Utils.addDays(new Date(), 1);
+            t = granularity === "day" ? Utils.startOfDay(t) : t;
+            value = Utils.getValidDate(t, fromDate, toDate);
+            validDate = value;
+            setMonth(value || new Date());
+            updateTriggerText();
+            if (onChange) onChange(value);
+            refreshCalendar();
+            if (timePickerEl && timePickerEl.updateValue && value) {
+              timePickerEl.updateValue(Utils.getTimeString(value));
+            }
+          },
+        });
+        quickRow.appendChild(tomorrowBtn);
+      }
+      var noDateBtn = Button.create({
+        variant: "outline",
+        size: "small",
+        text: "No date",
+        startIcon: ICON_CALENDAR_MINUS,
+        onClick: function () {
+          value = undefined;
+          validDate = undefined;
+          setMonth(new Date());
+          updateTriggerText();
+          if (onChange) onChange(undefined);
+          popoverApi.hide();
+        },
+      });
+      quickRow.appendChild(noDateBtn);
+      fragment.appendChild(quickRow);
+
+      return fragment;
+    }
+
+    panelInner.appendChild(buildPanelContent());
+
+    var popoverApi = Popover.create({
+      trigger: triggerWrapper,
+      content: panelInner,
+      placement: "bottom",
+      align: align,
+      closeOnClickOutside: true,
+      onOpen: function () {
+        triggerWrapper.setAttribute("aria-expanded", "true");
+        displayMonth = validDate ? new Date(validDate.getTime()) : new Date();
+        if (captionEl && captionEl.setMonth) captionEl.setMonth(displayMonth);
+      },
+      onClose: function () {
+        triggerWrapper.setAttribute("aria-expanded", "false");
+      },
+    });
+
+    // Popover already toggles on trigger click; we only block when disabled (use capture so we run first)
+    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;
+      validDate = Utils.getValidDate(value, fromDate, toDate);
+      displayMonth = validDate ? new Date(validDate.getTime()) : new Date();
+      updateTriggerText();
+    };
+    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.DateTimePicker = {
+    create: create,
+  };
+})(typeof window !== "undefined" ? window : this);

package/components/duration/duration-constants.js

@@ -0,0 +1,46 @@
+/**
+ * Duration component constants: preset durations and wheel definitions.
+ */
+
+(function (global) {
+  "use strict";
+
+  var PRESET_DURATIONS = [
+    {
+      title: "Seconds & Minutes",
+      presets: [
+        { label: "30s", value: 30 },
+        { label: "1m", value: 60 },
+        { label: "2m", value: 120 },
+        { label: "5m", value: 300 },
+        { label: "10m", value: 600 },
+        { label: "15m", value: 900 },
+        { label: "30m", value: 1800 },
+      ],
+    },
+    {
+      title: "Hours & Days",
+      presets: [
+        { label: "1h", value: 3600 },
+        { label: "2h", value: 7200 },
+        { label: "6h", value: 21600 },
+        { label: "12h", value: 43200 },
+        { label: "1d", value: 86400 },
+        { label: "2d", value: 172800 },
+        { label: "7d", value: 604800 },
+      ],
+    },
+  ];
+
+  var DURATION_WHEELS = [
+    { unit: "days", label: "days" },
+    { unit: "hours", label: "hours" },
+    { unit: "minutes", label: "min" },
+    { unit: "seconds", label: "sec" },
+  ];
+
+  global.DurationConstants = {
+    PRESET_DURATIONS: PRESET_DURATIONS,
+    DURATION_WHEELS: DURATION_WHEELS,
+  };
+})(typeof window !== "undefined" ? window : this);