@memelabui/ui 0.5.0 → 0.6.0

package/dist/index.js

@@ -701,7 +701,7 @@ var Slider = forwardRef(function Slider2({
     if (numMax === numMin) return 0;
     return Math.max(0, Math.min(100, (numericValue - numMin) / (numMax - numMin) * 100));
   }, [numericValue, min, max]);
-  const trackGradient = `linear-gradient(to right, var(--ml-primary, #8b5cf6) ${percentage}%, rgba(255,255,255,0.1) ${percentage}%)`;
+  const trackGradient = `linear-gradient(to right, rgb(var(--ml-primary, 139 92 246)) ${percentage}%, rgba(255,255,255,0.1) ${percentage}%)`;
   const displayValue = formatValue ? formatValue(numericValue) : String(numericValue);
   const handleChange = (e) => {
     onChange?.(Number(e.target.value));
@@ -733,7 +733,7 @@ var Slider = forwardRef(function Slider2({
         "[&::-webkit-slider-thumb]:rounded-full",
         "[&::-webkit-slider-thumb]:bg-white",
         "[&::-webkit-slider-thumb]:border-2",
-        "[&::-webkit-slider-thumb]:border-[var(--ml-primary,#8b5cf6)]",
+        "[&::-webkit-slider-thumb]:border-[rgb(var(--ml-primary,139_92_246))]",
         "[&::-webkit-slider-thumb]:transition-shadow",
         "[&::-webkit-slider-thumb]:duration-150",
         // Moz thumb
@@ -742,7 +742,7 @@ var Slider = forwardRef(function Slider2({
         "[&::-moz-range-thumb]:rounded-full",
         "[&::-moz-range-thumb]:bg-white",
         "[&::-moz-range-thumb]:border-2",
-        "[&::-moz-range-thumb]:border-[var(--ml-primary,#8b5cf6)]",
+        "[&::-moz-range-thumb]:border-[rgb(var(--ml-primary,139_92_246))]",
         "[&::-moz-range-thumb]:transition-shadow",
         "[&::-moz-range-thumb]:duration-150",
         // Moz track — transparent so the gradient on the element shows through
@@ -2452,7 +2452,7 @@ function StageProgress({ stages, activeStage, className }) {
               ) })
             ) : isActive ? (
               // Active: primary dot with ring
-              /* @__PURE__ */ jsx("span", { className: "flex h-3.5 w-3.5 items-center justify-center rounded-full ring-2 ring-[var(--ml-primary)] ring-offset-1 ring-offset-black/50", children: /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-[var(--ml-primary)]" }) })
+              /* @__PURE__ */ jsx("span", { className: "flex h-3.5 w-3.5 items-center justify-center rounded-full ring-2 ring-[rgb(var(--ml-primary))] ring-offset-1 ring-offset-black/50", children: /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-[rgb(var(--ml-primary))]" }) })
             ) : (
               // Upcoming: hollow dim dot
               /* @__PURE__ */ jsx("span", { className: "h-3.5 w-3.5 rounded-full border border-white/20 bg-transparent" })
@@ -2475,7 +2475,7 @@ function StageProgress({ stages, activeStage, className }) {
         children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: "h-full rounded-full bg-gradient-to-r from-[var(--ml-accent)] to-[var(--ml-primary)] transition-[width] duration-500 ease-in-out",
+            className: "h-full rounded-full bg-gradient-to-r from-[rgb(var(--ml-accent))] to-[rgb(var(--ml-primary))] transition-[width] duration-500 ease-in-out",
             style: { width: `${fillPercent}%` },
             children: isAnimating && /* @__PURE__ */ jsx(
               "span",
@@ -3470,5 +3470,793 @@ var NotificationBell = forwardRef(
     );
   }
 );
+var sizeClass7 = {
+  xs: "text-sm font-semibold",
+  sm: "text-base font-semibold",
+  md: "text-lg font-bold",
+  lg: "text-xl font-bold",
+  xl: "text-2xl font-bold tracking-tight",
+  "2xl": "text-3xl font-bold tracking-tight sm:text-4xl"
+};
+var levelToSize = {
+  1: "2xl",
+  2: "xl",
+  3: "lg",
+  4: "md",
+  5: "sm",
+  6: "xs"
+};
+var colorClass = {
+  default: "text-white",
+  muted: "text-white/70",
+  gradient: "text-gradient"
+};
+var Heading = forwardRef(function Heading2({ level = 2, size, color = "default", className, ...props }, ref) {
+  const Tag = `h${level}`;
+  const effectiveSize = size ?? levelToSize[level];
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ref,
+      ...props,
+      className: cn(sizeClass7[effectiveSize], colorClass[color], className)
+    }
+  );
+});
+var sizeMap2 = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg"
+};
+var colorMap = {
+  default: "text-white/90",
+  muted: "text-white/70",
+  dimmed: "text-white/50",
+  primary: "text-primary-light",
+  success: "text-emerald-400",
+  warning: "text-amber-400",
+  danger: "text-rose-400"
+};
+var weightMap = {
+  normal: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold",
+  bold: "font-bold"
+};
+var Text = forwardRef(function Text2({ size = "md", color = "default", weight = "normal", inline = false, truncate = false, className, ...props }, ref) {
+  const Tag = inline ? "span" : "p";
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ref,
+      ...props,
+      className: cn(
+        sizeMap2[size],
+        colorMap[color],
+        weightMap[weight],
+        truncate && "truncate",
+        className
+      )
+    }
+  );
+});
+var gapClass = {
+  0: "gap-0",
+  1: "gap-1",
+  2: "gap-2",
+  3: "gap-3",
+  4: "gap-4",
+  5: "gap-5",
+  6: "gap-6",
+  8: "gap-8",
+  10: "gap-10",
+  12: "gap-12"
+};
+var alignClass2 = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch",
+  baseline: "items-baseline"
+};
+var justifyClass = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between",
+  around: "justify-around",
+  evenly: "justify-evenly"
+};
+var Stack = forwardRef(function Stack2({ children, direction = "vertical", gap = 4, align = "stretch", justify = "start", wrap = false, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      ...props,
+      className: cn(
+        "flex",
+        direction === "vertical" ? "flex-col" : "flex-row",
+        gapClass[gap],
+        alignClass2[align],
+        justifyClass[justify],
+        wrap && "flex-wrap",
+        className
+      ),
+      children
+    }
+  );
+});
+var ScrollArea = forwardRef(function ScrollArea2({ children, maxHeight, hideScrollbar = false, orientation = "vertical", className, style, ...props }, ref) {
+  const overflowClass = {
+    vertical: "overflow-y-auto overflow-x-hidden",
+    horizontal: "overflow-x-auto overflow-y-hidden",
+    both: "overflow-auto"
+  }[orientation];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      ...props,
+      tabIndex: 0,
+      className: cn(
+        overflowClass,
+        // Custom dark scrollbar styling
+        "[&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar]:h-1.5",
+        "[&::-webkit-scrollbar-track]:bg-transparent",
+        "[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-white/15 hover:[&::-webkit-scrollbar-thumb]:bg-white/25",
+        hideScrollbar && "no-scrollbar",
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/30 focus-visible:ring-inset",
+        className
+      ),
+      style: {
+        maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
+        ...style
+      },
+      children
+    }
+  );
+});
+var defaultSeparator = /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "w-3.5 h-3.5 text-white/30 flex-shrink-0",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx("path", { d: "M6 4l4 4-4 4" })
+  }
+);
+function Breadcrumbs({ items, separator = defaultSeparator, className }) {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: cn("flex items-center", className), children: /* @__PURE__ */ jsx("ol", { className: "flex items-center gap-1.5 text-sm", children: items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1.5", children: [
+      index > 0 && separator,
+      isLast ? /* @__PURE__ */ jsx("span", { className: "text-white font-medium", "aria-current": "page", children: item.label }) : item.href ? /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: item.href,
+          onClick: item.onClick,
+          className: "text-white/50 hover:text-white/80 transition-colors",
+          children: item.label
+        }
+      ) : item.onClick ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: item.onClick,
+          className: "text-white/50 hover:text-white/80 transition-colors",
+          children: item.label
+        }
+      ) : /* @__PURE__ */ jsx("span", { className: "text-white/50", children: item.label })
+    ] }, index);
+  }) }) });
+}
+function Popover({
+  content,
+  children,
+  placement = "bottom",
+  closeOnClickOutside = true,
+  closeOnEsc = true,
+  open: controlledOpen,
+  onOpenChange,
+  offset = 8,
+  className
+}) {
+  const popoverId = useId();
+  const anchorRef = useRef(null);
+  const popoverRef = useRef(null);
+  const [internalOpen, setInternalOpen] = useState(false);
+  const [pos, setPos] = useState(null);
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+  const setOpen = useCallback(
+    (value) => {
+      if (!isControlled) setInternalOpen(value);
+      onOpenChange?.(value);
+    },
+    [isControlled, onOpenChange]
+  );
+  const toggle = useCallback(() => setOpen(!isOpen), [isOpen, setOpen]);
+  const close = useCallback(() => setOpen(false), [setOpen]);
+  const updatePosition = useCallback(() => {
+    const el = anchorRef.current;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    let left;
+    let top;
+    let effPlacement = placement;
+    if (placement === "bottom" || placement === "top") {
+      left = r.left + r.width / 2;
+      if (placement === "bottom") {
+        top = r.bottom + offset;
+        if (top + 200 > window.innerHeight && r.top - offset > 200) {
+          effPlacement = "top";
+          top = r.top - offset;
+        }
+      } else {
+        top = r.top - offset;
+        if (top < 8) {
+          effPlacement = "bottom";
+          top = r.bottom + offset;
+        }
+      }
+    } else {
+      top = r.top + r.height / 2;
+      if (placement === "right") {
+        left = r.right + offset;
+      } else {
+        left = r.left - offset;
+      }
+    }
+    setPos({ left: Math.round(left), top: Math.round(top), placement: effPlacement });
+  }, [placement, offset]);
+  useEffect(() => {
+    if (!isOpen) return;
+    updatePosition();
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
+    return () => {
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [isOpen, updatePosition]);
+  useEffect(() => {
+    if (!isOpen || !closeOnClickOutside) return;
+    const handleClick = (e) => {
+      const target = e.target;
+      if (anchorRef.current?.contains(target) || popoverRef.current?.contains(target)) {
+        return;
+      }
+      close();
+    };
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [isOpen, closeOnClickOutside, close]);
+  useEffect(() => {
+    if (!isOpen || !closeOnEsc) return;
+    const handleKey = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        close();
+        anchorRef.current?.focus();
+      }
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [isOpen, closeOnEsc, close]);
+  if (!isValidElement(children)) return children;
+  const child = cloneElement(children, {
+    ref: (node) => {
+      anchorRef.current = node;
+      const childProps = children.props;
+      const prevRef = childProps.ref;
+      if (typeof prevRef === "function") prevRef(node);
+      else if (prevRef && typeof prevRef === "object") prevRef.current = node;
+    },
+    onClick: (e) => {
+      const childProps = children.props;
+      if (typeof childProps.onClick === "function") childProps.onClick(e);
+      toggle();
+    },
+    "aria-expanded": isOpen,
+    "aria-haspopup": "dialog",
+    "aria-controls": isOpen ? popoverId : void 0
+  });
+  const getTransform = () => {
+    if (!pos) return "translate(-9999px, -9999px)";
+    switch (pos.placement) {
+      case "top":
+        return "translate(-50%, -100%)";
+      case "bottom":
+        return "translate(-50%, 0%)";
+      case "left":
+        return "translate(-100%, -50%)";
+      case "right":
+        return "translate(0%, -50%)";
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    child,
+    isOpen && typeof document !== "undefined" ? createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: popoverRef,
+          id: popoverId,
+          role: "dialog",
+          className: cn(
+            "fixed z-[9999] rounded-xl shadow-xl ring-1 ring-white/10 bg-surface-50 backdrop-blur-md p-4",
+            className
+          ),
+          style: {
+            left: pos?.left ?? 0,
+            top: pos?.top ?? 0,
+            transform: getTransform()
+          },
+          children: content
+        }
+      ),
+      document.body
+    ) : null
+  ] });
+}
+var scrollLockCount2 = 0;
+var savedOverflow2 = "";
+function lockScroll2() {
+  if (typeof document === "undefined") return;
+  if (scrollLockCount2 === 0) {
+    savedOverflow2 = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+  }
+  scrollLockCount2++;
+}
+function unlockScroll2() {
+  if (typeof document === "undefined") return;
+  scrollLockCount2 = Math.max(0, scrollLockCount2 - 1);
+  if (scrollLockCount2 === 0) {
+    document.body.style.overflow = savedOverflow2;
+  }
+}
+var sizeClass8 = {
+  left: { sm: "w-64", md: "w-80", lg: "w-96", full: "w-screen" },
+  right: { sm: "w-64", md: "w-80", lg: "w-96", full: "w-screen" },
+  bottom: { sm: "h-1/4", md: "h-1/3", lg: "h-1/2", full: "h-screen" }
+};
+var positionClass2 = {
+  left: "inset-y-0 left-0",
+  right: "inset-y-0 right-0",
+  bottom: "inset-x-0 bottom-0"
+};
+var slideIn = {
+  left: "translate-x-0",
+  right: "translate-x-0",
+  bottom: "translate-y-0"
+};
+var slideOut = {
+  left: "-translate-x-full",
+  right: "translate-x-full",
+  bottom: "translate-y-full"
+};
+function Drawer({
+  isOpen,
+  onClose,
+  children,
+  side = "right",
+  size = "md",
+  ariaLabel,
+  closeOnBackdrop = true,
+  closeOnEsc = true,
+  className
+}) {
+  const panelRef = useRef(null);
+  const lastActiveRef = useRef(null);
+  useEffect(() => {
+    if (!isOpen) return;
+    lastActiveRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const raf = requestAnimationFrame(() => {
+      const el = panelRef.current;
+      if (!el) return;
+      const focusables = getFocusableElements(el);
+      focusSafely(focusables[0] ?? el);
+    });
+    return () => {
+      cancelAnimationFrame(raf);
+      const lastActive = lastActiveRef.current;
+      lastActiveRef.current = null;
+      if (lastActive?.isConnected) focusSafely(lastActive);
+    };
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen) return;
+    lockScroll2();
+    return () => unlockScroll2();
+  }, [isOpen]);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50", role: "presentation", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute inset-0 bg-black/40 backdrop-blur-sm transition-opacity duration-200",
+        "aria-hidden": "true",
+        onClick: closeOnBackdrop ? onClose : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: panelRef,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": ariaLabel,
+        tabIndex: -1,
+        className: cn(
+          "fixed flex flex-col bg-surface-50 shadow-2xl ring-1 ring-white/10 transition-transform duration-300 ease-out focus:outline-none",
+          positionClass2[side],
+          sizeClass8[side][size],
+          isOpen ? slideIn[side] : slideOut[side],
+          className
+        ),
+        onKeyDownCapture: (e) => {
+          if (closeOnEsc && e.key === "Escape") {
+            e.preventDefault();
+            e.stopPropagation();
+            onClose();
+            return;
+          }
+          if (e.key !== "Tab") return;
+          const el = panelRef.current;
+          if (!el) return;
+          const focusables = getFocusableElements(el);
+          if (focusables.length === 0) {
+            e.preventDefault();
+            focusSafely(el);
+            return;
+          }
+          const active = document.activeElement;
+          const first = focusables[0];
+          const last = focusables[focusables.length - 1];
+          if (e.shiftKey) {
+            if (active === first) {
+              e.preventDefault();
+              focusSafely(last);
+            }
+          } else {
+            if (active === last) {
+              e.preventDefault();
+              focusSafely(first);
+            }
+          }
+        },
+        children
+      }
+    )
+  ] });
+}
+var defaultFilter = (opt, q) => opt.label.toLowerCase().includes(q.toLowerCase());
+var Combobox = forwardRef(function Combobox2({
+  options,
+  value,
+  onChange,
+  placeholder,
+  label,
+  error,
+  allowCustom = false,
+  filterFn = defaultFilter,
+  emptyContent,
+  disabled,
+  className,
+  id: externalId
+}, ref) {
+  const generatedId = useId();
+  const inputId = externalId || generatedId;
+  const listboxId = `${inputId}-listbox`;
+  const [query, setQuery] = useState("");
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const inputRef = useRef(null);
+  const listRef = useRef(null);
+  const containerRef = useRef(null);
+  const [listPos, setListPos] = useState(null);
+  useEffect(() => {
+    if (value !== void 0) {
+      const opt = options.find((o) => o.value === value);
+      setQuery(opt ? opt.label : value);
+    }
+  }, [value, options]);
+  const filtered = useMemo(() => {
+    if (!query) return options;
+    return options.filter((opt) => filterFn(opt, query));
+  }, [options, query, filterFn]);
+  const enabledFiltered = useMemo(
+    () => filtered.filter((o) => !o.disabled),
+    [filtered]
+  );
+  const updatePosition = useCallback(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    setListPos({
+      left: r.left,
+      top: r.bottom + 4,
+      width: r.width
+    });
+  }, []);
+  useEffect(() => {
+    if (!open) return;
+    updatePosition();
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
+    return () => {
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [open, updatePosition]);
+  useEffect(() => {
+    if (!open) return;
+    const handleClick = (e) => {
+      const target = e.target;
+      if (containerRef.current?.contains(target) || listRef.current?.contains(target)) return;
+      setOpen(false);
+    };
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [open]);
+  const selectOption = useCallback(
+    (opt) => {
+      setQuery(opt.label);
+      onChange?.(opt.value);
+      setOpen(false);
+      setActiveIndex(-1);
+      inputRef.current?.focus();
+    },
+    [onChange]
+  );
+  const handleInputChange = (e) => {
+    const v = e.target.value;
+    setQuery(v);
+    setOpen(true);
+    setActiveIndex(-1);
+    if (allowCustom) onChange?.(v);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      if (!open) {
+        setOpen(true);
+        return;
+      }
+      setActiveIndex((i) => {
+        const next = i + 1;
+        return next >= enabledFiltered.length ? 0 : next;
+      });
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      if (!open) {
+        setOpen(true);
+        return;
+      }
+      setActiveIndex((i) => {
+        const prev = i - 1;
+        return prev < 0 ? enabledFiltered.length - 1 : prev;
+      });
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (open && activeIndex >= 0 && enabledFiltered[activeIndex]) {
+        selectOption(enabledFiltered[activeIndex]);
+      }
+    } else if (e.key === "Escape") {
+      if (open) {
+        e.preventDefault();
+        setOpen(false);
+        setActiveIndex(-1);
+      }
+    }
+  };
+  useEffect(() => {
+    if (activeIndex < 0 || !listRef.current) return;
+    const items = listRef.current.querySelectorAll('[role="option"]:not([aria-disabled="true"])');
+    const item = items[activeIndex];
+    if (item && typeof item.scrollIntoView === "function") {
+      item.scrollIntoView({ block: "nearest" });
+    }
+  }, [activeIndex]);
+  const activeOptionId = activeIndex >= 0 ? `${inputId}-opt-${activeIndex}` : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
+    label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "block text-sm text-white/70 mb-1.5", children: label }),
+    /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: (node) => {
+            inputRef.current = node;
+            if (typeof ref === "function") ref(node);
+            else if (ref) ref.current = node;
+          },
+          id: inputId,
+          type: "text",
+          role: "combobox",
+          "aria-expanded": open,
+          "aria-controls": listboxId,
+          "aria-activedescendant": activeOptionId,
+          "aria-autocomplete": "list",
+          autoComplete: "off",
+          disabled,
+          placeholder,
+          value: query,
+          onChange: handleInputChange,
+          onFocus: () => setOpen(true),
+          onKeyDown: handleKeyDown,
+          className: cn(
+            "w-full rounded-xl px-3 py-2.5 text-sm bg-white/10 text-white shadow-sm outline-none placeholder-white/30 focus-visible:ring-2 focus-visible:ring-primary/40 transition-shadow",
+            error && "ring-1 ring-rose-500/50",
+            disabled && "opacity-50 cursor-not-allowed"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          tabIndex: -1,
+          "aria-hidden": "true",
+          onClick: () => {
+            if (!disabled) {
+              setOpen(!open);
+              inputRef.current?.focus();
+            }
+          },
+          className: "absolute right-2 top-1/2 -translate-y-1/2 text-white/40 hover:text-white/60 p-1",
+          children: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsx("path", { d: "M4 6l4 4 4-4" }) })
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-rose-400", children: error }),
+    open && typeof document !== "undefined" ? createPortal(
+      /* @__PURE__ */ jsx(
+        "ul",
+        {
+          ref: listRef,
+          id: listboxId,
+          role: "listbox",
+          className: "fixed z-[9999] max-h-60 overflow-auto rounded-xl bg-surface-50 shadow-xl ring-1 ring-white/10 py-1 backdrop-blur-md",
+          style: {
+            left: listPos?.left ?? 0,
+            top: listPos?.top ?? 0,
+            width: listPos?.width ?? 0
+          },
+          children: filtered.length === 0 ? /* @__PURE__ */ jsx("li", { className: "px-3 py-2 text-sm text-white/40", children: emptyContent ?? "No results" }) : filtered.map((opt) => {
+            const enabledIndex = enabledFiltered.indexOf(opt);
+            const isActive = enabledIndex === activeIndex;
+            return /* @__PURE__ */ jsx(
+              "li",
+              {
+                id: isActive ? activeOptionId : void 0,
+                role: "option",
+                "aria-selected": opt.value === value,
+                "aria-disabled": opt.disabled || void 0,
+                className: cn(
+                  "px-3 py-2 text-sm cursor-pointer transition-colors",
+                  isActive && "bg-white/10",
+                  opt.value === value && "text-primary-light",
+                  opt.disabled && "opacity-40 cursor-not-allowed",
+                  !opt.disabled && !isActive && "text-white hover:bg-white/5"
+                ),
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  if (!opt.disabled) selectOption(opt);
+                },
+                onMouseEnter: () => {
+                  if (!opt.disabled) setActiveIndex(enabledIndex);
+                },
+                children: opt.label
+              },
+              opt.value
+            );
+          })
+        }
+      ),
+      document.body
+    ) : null
+  ] });
+});
+var presetStyles = {
+  fade: {
+    enter: "opacity-100",
+    exit: "opacity-0"
+  },
+  "fade-up": {
+    enter: "opacity-100 translate-y-0",
+    exit: "opacity-0 translate-y-2"
+  },
+  "fade-down": {
+    enter: "opacity-100 translate-y-0",
+    exit: "opacity-0 -translate-y-2"
+  },
+  scale: {
+    enter: "opacity-100 scale-100",
+    exit: "opacity-0 scale-95"
+  },
+  "slide-right": {
+    enter: "translate-x-0",
+    exit: "translate-x-full"
+  },
+  "slide-left": {
+    enter: "translate-x-0",
+    exit: "-translate-x-full"
+  }
+};
+function Transition({
+  show,
+  children,
+  preset = "fade",
+  duration = 200,
+  unmountOnHide = true,
+  className
+}) {
+  const [mounted, setMounted] = useState(show);
+  const [entering, setEntering] = useState(false);
+  const timerRef = useRef(null);
+  useEffect(() => {
+    if (timerRef.current !== null) clearTimeout(timerRef.current);
+    if (show) {
+      setMounted(true);
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => setEntering(true));
+      });
+    } else {
+      setEntering(false);
+      if (unmountOnHide) {
+        timerRef.current = setTimeout(() => {
+          setMounted(false);
+          timerRef.current = null;
+        }, duration);
+      }
+    }
+    return () => {
+      if (timerRef.current !== null) clearTimeout(timerRef.current);
+    };
+  }, [show, duration, unmountOnHide]);
+  if (!mounted) return null;
+  const styles = presetStyles[preset];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "transition-all",
+        entering ? styles.enter : styles.exit,
+        className
+      ),
+      style: { transitionDuration: `${duration}ms` },
+      "aria-hidden": !show,
+      children
+    }
+  );
+}
+function VisuallyHidden({ children, as: Tag = "span", style, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ...props,
+      style: {
+        position: "absolute",
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: "hidden",
+        clip: "rect(0,0,0,0)",
+        whiteSpace: "nowrap",
+        borderWidth: 0,
+        ...style
+      },
+      children
+    }
+  );
+}
 
-export { ActiveFilterPills, Alert, Avatar, Badge, Button, Card, Checkbox, CollapsibleSection, ColorInput, ConfirmDialog, CooldownRing, CopyField, DashboardLayout, Divider, DotIndicator, DropZone, Dropdown, DropdownItem, DropdownMenu, DropdownSeparator, DropdownTrigger, EmptyState, FormField, IconButton, Input, Modal, MutationOverlay, Navbar, NotificationBell, PageShell, Pagination, Pill, ProgressBar, ProgressButton, RadioGroup, RadioItem, SearchInput, SectionCard, Select, Sidebar, Skeleton, Slider, Spinner, StageProgress, StatCard, Stepper, Tab, TabList, TabPanel, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TagInput, Textarea, ToastProvider, Toggle, Tooltip, cn, colors, focusSafely, getFocusableElements, useClipboard, useDebounce, useDisclosure, useHotkeys, useIntersectionObserver, useMediaQuery, useSharedNow, useToast };
+export { ActiveFilterPills, Alert, Avatar, Badge, Breadcrumbs, Button, Card, Checkbox, CollapsibleSection, ColorInput, Combobox, ConfirmDialog, CooldownRing, CopyField, DashboardLayout, Divider, DotIndicator, Drawer, DropZone, Dropdown, DropdownItem, DropdownMenu, DropdownSeparator, DropdownTrigger, EmptyState, FormField, Heading, IconButton, Input, Modal, MutationOverlay, Navbar, NotificationBell, PageShell, Pagination, Pill, Popover, ProgressBar, ProgressButton, RadioGroup, RadioItem, ScrollArea, SearchInput, SectionCard, Select, Sidebar, Skeleton, Slider, Spinner, Stack, StageProgress, StatCard, Stepper, Tab, TabList, TabPanel, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TagInput, Text, Textarea, ToastProvider, Toggle, Tooltip, Transition, VisuallyHidden, cn, colors, focusSafely, getFocusableElements, useClipboard, useDebounce, useDisclosure, useHotkeys, useIntersectionObserver, useMediaQuery, useSharedNow, useToast };