@superleapai/flow-ui 1.0.0

package/components/time-picker.js

@@ -0,0 +1,357 @@
+/**
+ * Time Picker Component (vanilla JS, Tailwind)
+ * Dropdown with three vertical scrollable columns (hour, minute, AM/PM).
+ * Selected items: dark teal background, white text. Trigger shows time + clock icon.
+ */
+
+(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 CLOCK_SVG =
+    '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>';
+
+  function pad(n) {
+    return String(n).padStart(2, "0");
+  }
+
+  function parseValue(value) {
+    if (!value || typeof value !== "string") {
+      return { hour: 0, minute: 0 };
+    }
+    var parts = value.trim().split(":");
+    var hour = Math.min(23, Math.max(0, parseInt(parts[0], 10) || 0));
+    var minute = Math.min(59, Math.max(0, parseInt(parts[1], 10) || 0));
+    return { hour: hour, minute: minute };
+  }
+
+  /** Internal value "HH:mm" (24h) */
+  function formatValue(hour, minute) {
+    return pad(hour) + ":" + pad(minute);
+  }
+
+  /** Display string: "12 : 00 AM" or "00 : 00" */
+  function formatDisplay(hour, minute, use24Hour) {
+    if (use24Hour) {
+      return pad(hour) + " : " + pad(minute);
+    }
+    var h12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
+    var amPm = hour >= 12 ? "PM" : "AM";
+    return pad(h12) + " : " + pad(minute) + " " + amPm;
+  }
+
+  function triggerClasses(disabled, hasValue, size) {
+    var base =
+      "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 focus:outline-none min-h-0 h-full truncate hover:cursor-pointer ";
+    var sizeClass = size === "small" ? "px-12 py-4 !text-reg-12" : "px-12 py-6 !text-reg-13";
+    var valueClass = hasValue ? "text-inherit" : "text-typography-quaternary-text";
+    var disabledClass = disabled
+      ? " pointer-events-none cursor-not-allowed border-border-primary bg-fill-tertiary-fill-light-gray text-typography-quaternary-text hover:border-border-primary"
+      : "";
+    return base + sizeClass + " " + valueClass + disabledClass;
+  }
+
+  /**
+   * Create a scrollable column of options; one item is selected (teal bg, white text).
+   * Uses Button component for each option.
+   * @param {Array<{value: string|number, label: string}>} options
+   * @param {string|number} selectedValue
+   * @param {function(string|number)} onSelect
+   * @param {boolean} [tabularNums] - use tabular-nums for digit alignment (hour/minute)
+   * @returns {{ el: HTMLElement, setSelected: function, scrollToSelected: function }}
+   */
+  function createColumn(options, selectedValue, onSelect, tabularNums) {
+    var Button = getDep("Button");
+    var col = document.createElement("div");
+    col.className =
+      "flex flex-col flex-shrink-0 min-w-32 overflow-y-auto max-h-[200px] p-6 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:[display:none]";
+    col.setAttribute("role", "listbox");
+
+    var itemClassName = (tabularNums ? "tabular-nums" : "");
+    var items = [];
+    if (!Button || typeof Button.create !== "function") {
+      var fallbackCol = document.createElement("div");
+      fallbackCol.className = col.className;
+      fallbackCol.setAttribute("role", "listbox");
+      fallbackCol.textContent = "Button component required";
+      return { el: fallbackCol, setSelected: function () {}, scrollToSelected: function () {}, items: [] };
+    }
+    options.forEach(function (opt) {
+      var val = opt.value !== undefined ? opt.value : opt.label;
+      var label = opt.label !== undefined ? opt.label : String(val);
+      var isSelected = String(val) === String(selectedValue);
+      var item = Button.create({
+        variant: isSelected ? "primary" : "ghost",
+        size: "small",
+        text: label,
+        className: itemClassName,
+        onClick: function () {
+          onSelect(val);
+        },
+      });
+      item.setAttribute("role", "option");
+      item.setAttribute("data-value", String(val));
+      item.setAttribute("aria-selected", isSelected);
+      col.appendChild(item);
+      items.push({ el: item, value: val, label: label });
+    });
+
+    function setSelected(val) {
+      items.forEach(function (x) {
+        var selected = String(x.value) === String(val);
+        x.el.setAttribute("aria-selected", selected);
+        x.el.className = Button.getButtonClasses({
+          variant: selected ? "primary" : "ghost",
+          size: "small",
+        }) + " " + itemClassName;
+      });
+    }
+
+    function scrollToSelected() {
+      var selectedEl = col.querySelector("[aria-selected=true]");
+      if (selectedEl) selectedEl.scrollIntoView({ block: "nearest", behavior: "auto" });
+    }
+
+    return { el: col, setSelected: setSelected, scrollToSelected: scrollToSelected, items: items };
+  }
+
+  /**
+   * Create a time picker component
+   * @param {Object} config - Configuration object
+   * @param {string} config.fieldId - Field ID for state / form
+   * @param {string} config.value - Current value "HH:mm"
+   * @param {string} config.placeholder - Placeholder text
+   * @param {Function} config.onChange - Change handler (value: string "HH:mm")
+   * @param {boolean} config.disabled - Whether the picker is disabled
+   * @param {boolean} config.use24Hour - Use 24-hour format (default: false, i.e. 12-hour AM/PM)
+   * @param {string} [config.size] - 'default' | 'small' (matches Input/Select sizes)
+   * @returns {HTMLElement} Time picker container element
+   */
+  function create(config) {
+    var fieldId = config.fieldId;
+    var initialValue = config.value !== undefined ? config.value : "";
+    var placeholder = config.placeholder || "Select time";
+    var onChange = config.onChange;
+    var disabled = config.disabled === true;
+    var use24Hour = config.use24Hour === true;
+    var size = config.size === "small" ? "small" : "default";
+
+    var value = typeof initialValue === "string" ? initialValue : "";
+    var parsed = parseValue(value);
+    var hour = parsed.hour;
+    var minute = parsed.minute;
+    var period = hour >= 12 ? "PM" : "AM";
+    var hour12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
+
+    var container = document.createElement("div");
+    container.className = "time-picker relative w-full group";
+    if (fieldId) container.setAttribute("data-field-id", fieldId);
+
+    var trigger = document.createElement("button");
+    trigger.type = "button";
+    trigger.disabled = disabled;
+    trigger.setAttribute("aria-haspopup", "listbox");
+    trigger.setAttribute("aria-expanded", "false");
+    trigger.setAttribute("aria-label", placeholder);
+    trigger.className = triggerClasses(disabled, !!value, size);
+
+    var triggerText = document.createElement("span");
+    triggerText.className =
+      "flex-1 truncate text-left tabular-nums " +
+      (value ? "text-inherit" : "text-typography-quaternary-text");
+    triggerText.textContent = value ? formatDisplay(hour, minute, use24Hour) : placeholder;
+    trigger.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 = CLOCK_SVG;
+    trigger.appendChild(iconWrap);
+
+    var hourOptions = [];
+    if (use24Hour) {
+      for (var h = 0; h <= 23; h++) {
+        hourOptions.push({ value: h, label: pad(h) });
+      }
+    } else {
+      for (var h = 1; h <= 12; h++) {
+        hourOptions.push({ value: h, label: pad(h) });
+      }
+    }
+    var minuteOptions = [];
+    for (var m = 0; m <= 59; m++) {
+      minuteOptions.push({ value: m, label: pad(m) });
+    }
+    var periodOptions = [{ value: "AM", label: "AM" }, { value: "PM", label: "PM" }];
+
+    var hourColVal = use24Hour ? hour : hour12;
+    var hourColumn = createColumn(hourOptions, hourColVal, function (v) {
+      if (use24Hour) {
+        hour = v;
+      } else {
+        hour12 = v;
+        hour = period === "PM" ? (v === 12 ? 12 : v + 12) : (v === 12 ? 0 : v);
+      }
+      hourColumn.setSelected(use24Hour ? hour : hour12);
+      hourColumn.scrollToSelected();
+      value = formatValue(hour, minute);
+      triggerText.textContent = formatDisplay(hour, minute, use24Hour);
+      triggerText.className =
+        "flex-1 truncate text-left tabular-nums " +
+        (value ? "text-inherit" : "text-typography-quaternary-text");
+      trigger.className = triggerClasses(disabled, !!value, size);
+      if (onChange) onChange(value);
+    }, true);
+    var minuteColumn = createColumn(minuteOptions, minute, function (v) {
+      minute = v;
+      minuteColumn.setSelected(minute);
+      minuteColumn.scrollToSelected();
+      value = formatValue(hour, minute);
+      triggerText.textContent = formatDisplay(hour, minute, use24Hour);
+      triggerText.className =
+        "flex-1 truncate text-left tabular-nums " +
+        (value ? "text-inherit" : "text-typography-quaternary-text");
+      trigger.className = triggerClasses(disabled, !!value, size);
+      if (onChange) onChange(value);
+    }, true);
+    var periodColumn = null;
+    if (!use24Hour) {
+      periodColumn = createColumn(periodOptions, period, function (v) {
+        period = v;
+        hour = period === "PM" ? (hour12 === 12 ? 12 : hour12 + 12) : (hour12 === 12 ? 0 : hour12);
+        periodColumn.setSelected(period);
+        periodColumn.scrollToSelected();
+        value = formatValue(hour, minute);
+        triggerText.textContent = formatDisplay(hour, minute, use24Hour);
+        triggerText.className =
+          "flex-1 truncate text-left tabular-nums " +
+          (value ? "text-inherit" : "text-typography-quaternary-text");
+        trigger.className = triggerClasses(disabled, !!value, size);
+        if (onChange) onChange(value);
+      }, false);
+    }
+
+    var columnsRow = document.createElement("div");
+    columnsRow.className = "flex flex-row flex-nowrap items-stretch gap-0";
+    // Condition-based borders: only add separator between columns (not before first / after last)
+    hourColumn.el.className += " border-r-1/2 border-border-primary";
+    minuteColumn.el.className += " border-l-1/2 border-border-primary";
+    if (periodColumn) {
+      minuteColumn.el.className += " border-r-1/2 border-border-primary";
+      periodColumn.el.className += " border-l-1/2 border-border-primary";
+    }
+    columnsRow.appendChild(hourColumn.el);
+    columnsRow.appendChild(minuteColumn.el);
+    if (periodColumn) columnsRow.appendChild(periodColumn.el);
+
+    var hidePopover = null;
+    var ButtonForClose = getDep("Button");
+    var closeBtn = ButtonForClose && typeof ButtonForClose.create === "function"
+      ? ButtonForClose.create({
+          variant: "outline",
+          size: "small",
+          text: "Close",
+          onClick: function () {
+            if (hidePopover) hidePopover();
+          },
+        })
+      : (function () {
+          var b = document.createElement("button");
+          b.type = "button";
+          b.className = "px-2 py-1 border rounded text-sm";
+          b.textContent = "Close";
+          b.onclick = function () { if (hidePopover) hidePopover(); };
+          return b;
+        })();
+
+    var closeRow = document.createElement("div");
+    closeRow.className =
+      "flex justify-end border-t-1/2 border-border-primary pt-6 px-8 pb-12";
+    closeRow.appendChild(closeBtn);
+
+    var popoverContent = document.createElement("div");
+    popoverContent.setAttribute("role", "listbox");
+    popoverContent.setAttribute("data-time-picker-dropdown", "true");
+    popoverContent.appendChild(columnsRow);
+    popoverContent.appendChild(closeRow);
+
+    function syncColumnsAndScroll() {
+      if (disabled) return;
+      hourColumn.setSelected(use24Hour ? hour : hour12);
+      minuteColumn.setSelected(minute);
+      if (periodColumn) {
+        period = hour >= 12 ? "PM" : "AM";
+        periodColumn.setSelected(period);
+      }
+      hourColumn.scrollToSelected();
+      minuteColumn.scrollToSelected();
+      if (periodColumn) periodColumn.scrollToSelected();
+    }
+
+    var Popover = getDep("Popover");
+    if (!Popover || typeof Popover.create !== "function") {
+      container.appendChild(trigger);
+      container.updateValue = function (newVal) { value = typeof newVal === "string" ? newVal : ""; };
+      container.setDisabled = function (isDisabled) { trigger.disabled = !!isDisabled; };
+      return container;
+    }
+    var popover = Popover.create({
+      trigger: trigger,
+      content: popoverContent,
+      placement: "bottom",
+      closeOnClickOutside: true,
+      bodyClassName: "p-0",
+      panelClassName: "!w-auto min-w-max",
+      onOpen: function () {
+        trigger.setAttribute("aria-expanded", "true");
+        container.classList.add("open");
+        syncColumnsAndScroll();
+      },
+      onClose: function () {
+        trigger.setAttribute("aria-expanded", "false");
+        container.classList.remove("open");
+      },
+    });
+    hidePopover = popover.hide;
+
+    container.appendChild(trigger);
+
+    container.updateValue = function (newVal) {
+      value = typeof newVal === "string" ? newVal : "";
+      var p = parseValue(value);
+      hour = p.hour;
+      minute = p.minute;
+      hour12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
+      period = hour >= 12 ? "PM" : "AM";
+      triggerText.textContent = value ? formatDisplay(hour, minute, use24Hour) : placeholder;
+      triggerText.className =
+        "flex-1 truncate text-left tabular-nums " +
+        (value ? "text-inherit" : "text-typography-quaternary-text");
+      trigger.className = triggerClasses(disabled, !!value, size);
+      hourColumn.setSelected(use24Hour ? hour : hour12);
+      minuteColumn.setSelected(minute);
+      if (periodColumn) periodColumn.setSelected(period);
+    };
+
+    container.setDisabled = function (isDisabled) {
+      disabled = !!isDisabled;
+      trigger.disabled = disabled;
+      trigger.className = triggerClasses(disabled, !!value, size);
+      if (disabled) popover.hide();
+    };
+
+    return container;
+  }
+
+  global.TimePicker = {
+    create: create,
+  };
+})(typeof window !== "undefined" ? window : this);

package/components/toast.js

@@ -0,0 +1,343 @@
+/**
+ * Toast Component (vanilla JS, Tailwind)
+ * Toast notification system with multiple variants.
+ * Adapted from Radix UI Toast primitives.
+ */
+
+(function (global) {
+  "use strict";
+
+  // SVG Icons
+  const ICONS = {
+    alertCircle: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>`,
+    circleCheck: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>`,
+    infoCircle: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>`,
+    loader: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>`,
+    playstationX: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>`,
+    x: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" 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>`,
+  };
+
+  // Variant to icon mapping
+  const VARIANT_ICONS = {
+    loading: "loader",
+    default: "alertCircle",
+    warning: "alertCircle",
+    error: "playstationX",
+    success: "circleCheck",
+    info: "infoCircle",
+    notification: null,
+  };
+
+  // Toast container singleton
+  let toastViewport = null;
+  let toastCount = 0;
+  let styleInjected = false;
+
+  /**
+   * Inject toast styles into document
+   */
+  function injectStyles() {
+    if (styleInjected) return;
+    
+    const style = document.createElement("style");
+    style.id = "toast-styles";
+    style.textContent = `
+      @keyframes toast-slide-in {
+        from {
+          opacity: 0;
+          transform: translateY(-100%);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+      @keyframes toast-slide-out {
+        from {
+          opacity: 1;
+          transform: translateY(0);
+        }
+        to {
+          opacity: 0;
+          transform: translateY(-100%);
+        }
+      }
+      @keyframes toast-spin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+      }
+      .toast-viewport {
+        position: fixed;
+        left: 50%;
+        top: 5%;
+        z-index: 100;
+        max-height: 100vh;
+        width: fit-content;
+        transform: translateX(-50%);
+        padding: 1rem;
+        max-width: 26rem;
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+        pointer-events: none;
+      }
+      .toast-root {
+        pointer-events: auto;
+        width: 100%;
+        border-radius: 8px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        overflow: hidden;
+        padding: 0.75rem 1rem;
+        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        animation: toast-slide-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+      .toast-root[data-state="closed"] {
+        animation: toast-slide-out 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+      .toast-icon-spin {
+        animation: toast-spin 1s linear infinite;
+      }
+    `;
+    document.head.appendChild(style);
+    styleInjected = true;
+  }
+
+  /**
+   * Initialize or get the toast viewport container
+   */
+  function initToastViewport() {
+    if (toastViewport && document.body.contains(toastViewport)) {
+      return toastViewport;
+    }
+
+    injectStyles();
+
+    toastViewport = document.createElement("div");
+    toastViewport.className = "toast-viewport";
+    toastViewport.setAttribute("role", "region");
+    toastViewport.setAttribute("aria-label", "Notifications");
+    document.body.appendChild(toastViewport);
+
+    return toastViewport;
+  }
+
+  /**
+   * Get variant-specific Tailwind classes
+   */
+  function getVariantClasses(variant) {
+    const variants = {
+      loading: "bg-fill-tertiary-fill-light-gray border-borderColor-border-primary text-typography-primary-text",
+      default: "bg-fill-quarternary-fill-white border-borderColor-border-primary text-typography-primary-text",
+      warning: "bg-warning-surface border-warning-border text-warning-text-base",
+      error: "bg-error-surface border-error-border text-error-text-base",
+      success: "bg-success-surface border-success-border text-success-text-base",
+      info: "bg-info-surface border-info-border text-info-text-base",
+      notification: "bg-fill-quarternary-fill-white border-borderColor-border-primary text-typography-primary-text",
+    };
+    return variants[variant] || variants.default;
+  }
+
+  /**
+   * Create a toast notification
+   * @param {Object} config - Configuration object
+   * @param {string} config.title - Toast title (optional)
+   * @param {string} config.description - Toast description/message
+   * @param {string} [config.variant='default'] - 'loading' | 'default' | 'warning' | 'error' | 'success' | 'info' | 'notification'
+   * @param {number} [config.duration=4000] - Duration in ms (0 for persistent)
+   * @param {Function} [config.onClose] - Called when toast closes
+   * @param {boolean} [config.showClose=true] - Show close button
+   * @returns {Object} Toast API {close, element}
+   */
+  function create(config = {}) {
+    const {
+      title = "",
+      description = "",
+      variant = "default",
+      duration = 4000,
+      onClose = null,
+      showClose = true,
+    } = config;
+
+    if (!description && !title) {
+      console.warn("[Toast] No title or description provided");
+      return { close: noop, element: null };
+    }
+
+    const viewport = initToastViewport();
+    const id = ++toastCount;
+    const variantClasses = getVariantClasses(variant);
+
+    // Create toast root element
+    const toast = document.createElement("div");
+    toast.className = `toast-root border-1/2 ${variantClasses}`;
+    toast.setAttribute("data-toast-id", id);
+    toast.setAttribute("data-state", "closed");
+    toast.setAttribute("role", "status");
+    toast.setAttribute("aria-live", "polite");
+    toast.setAttribute("aria-atomic", "true");
+
+    // Create content wrapper
+    const contentWrapper = document.createElement("div");
+    contentWrapper.className = "flex w-full items-center justify-start gap-8";
+
+    // Add icon if variant has one
+    const iconKey = VARIANT_ICONS[variant];
+    if (iconKey) {
+      const iconWrapper = document.createElement("div");
+      iconWrapper.className = `flex items-center justify-center ${variant === "loading" ? "toast-icon-spin" : ""}`;
+      iconWrapper.style.cssText = "width: 16px; height: 16px; flex-shrink: 0;";
+      iconWrapper.innerHTML = ICONS[iconKey];
+      contentWrapper.appendChild(iconWrapper);
+    }
+
+    // Create text content container
+    const textContainer = document.createElement("div");
+    textContainer.className = "flex-1 text-reg-12";
+
+    if (title) {
+      const titleEl = document.createElement("div");
+      titleEl.className = "text-med-12 mb-4";
+      titleEl.textContent = title;
+      textContainer.appendChild(titleEl);
+    }
+
+    if (description) {
+      const descEl = document.createElement("div");
+      descEl.className = "text-reg-12";
+      descEl.textContent = description;
+      textContainer.appendChild(descEl);
+    }
+
+    contentWrapper.appendChild(textContainer);
+
+    // Add close button
+    if (showClose) {
+      const closeBtn = document.createElement("button");
+      closeBtn.type = "button";
+      closeBtn.className = "ml-auto flex items-center justify-center rounded-4 p-4 transition-opacity hover:opacity-100 focus:opacity-100 focus:outline-none";
+      closeBtn.style.cssText = "flex-shrink: 0; width: 16px; height: 16px; border: none; background: transparent; opacity: 0.6; cursor: pointer;";
+      closeBtn.innerHTML = ICONS.x;
+      closeBtn.addEventListener("click", close);
+      contentWrapper.appendChild(closeBtn);
+    }
+
+    toast.appendChild(contentWrapper);
+
+    function noop() {}
+
+    function close() {
+      toast.setAttribute("data-state", "closed");
+      
+      setTimeout(() => {
+        if (toast.parentElement) {
+          toast.parentElement.removeChild(toast);
+        }
+        // Clean up viewport if empty
+        if (toastViewport && toastViewport.children.length === 0) {
+          toastViewport.remove();
+          toastViewport = null;
+        }
+        if (onClose) onClose();
+      }, 300); // Match animation duration
+    }
+
+    // Append and animate in
+    viewport.appendChild(toast);
+
+    // Trigger animation
+    requestAnimationFrame(() => {
+      toast.setAttribute("data-state", "open");
+    });
+
+    // Auto-dismiss if duration is set
+    if (duration > 0) {
+      setTimeout(close, duration);
+    }
+
+    return {
+      close,
+      element: toast,
+    };
+  }
+
+  /**
+   * Show a simple toast with message and type
+   * Convenience method compatible with the old showAlert API
+   * @param {string} message - Toast message
+   * @param {string} [type='info'] - Toast type: 'success' | 'error' | 'warning' | 'info' | 'loading'
+   * @param {number} [duration=4000] - Duration in ms (0 for persistent)
+   * @returns {Object} Toast API {close, element}
+   */
+  function show(message, type = "info", duration = 4000) {
+    console.log("[Toast] Showing toast:", message, "Type:", type);
+    return create({
+      description: message,
+      variant: type,
+      duration: duration,
+    });
+  }
+
+  /**
+   * Show a success toast
+   * @param {string} message - Toast message
+   * @param {number} [duration=4000] - Duration in ms
+   * @returns {Object} Toast API {close, element}
+   */
+  function success(message, duration = 4000) {
+    return show(message, "success", duration);
+  }
+
+  /**
+   * Show an error toast
+   * @param {string} message - Toast message
+   * @param {number} [duration=4000] - Duration in ms
+   * @returns {Object} Toast API {close, element}
+   */
+  function error(message, duration = 4000) {
+    return show(message, "error", duration);
+  }
+
+  /**
+   * Show a warning toast
+   * @param {string} message - Toast message
+   * @param {number} [duration=4000] - Duration in ms
+   * @returns {Object} Toast API {close, element}
+   */
+  function warning(message, duration = 4000) {
+    return show(message, "warning", duration);
+  }
+
+  /**
+   * Show an info toast
+   * @param {string} message - Toast message
+   * @param {number} [duration=4000] - Duration in ms
+   * @returns {Object} Toast API {close, element}
+   */
+  function info(message, duration = 4000) {
+    return show(message, "info", duration);
+  }
+
+  /**
+   * Show a loading toast
+   * @param {string} message - Toast message
+   * @param {number} [duration=0] - Duration in ms (0 for persistent by default)
+   * @returns {Object} Toast API {close, element}
+   */
+  function loading(message, duration = 0) {
+    return show(message, "loading", duration);
+  }
+
+  // Export to global namespace
+  global.Toast = {
+    create,
+    show,
+    success,
+    error,
+    warning,
+    info,
+    loading,
+  };
+})(typeof window !== "undefined" ? window : this);