@avenue-ticketing/ui 0.3.0 → 0.5.0

package/dist/react/dropdown.js

@@ -0,0 +1,1269 @@
+import * as React3 from 'react';
+import React3__default, { useState, useCallback, useRef, useLayoutEffect, useMemo, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { X, ChevronDown, Check, ChevronRight } from 'lucide-react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var sizeClass = {
+  xs: "h-8 min-h-8 gap-2 px-4 text-sm has-[>svg]:px-3 [&_svg:not([class*='size-'])]:size-3",
+  default: "h-10 min-h-10 gap-2 px-5 text-sm has-[>svg]:px-4 [&_svg:not([class*='size-'])]:size-4",
+  lg: "h-11 min-h-11 gap-2 px-6 text-base has-[>svg]:px-5 [&_svg:not([class*='size-'])]:size-5"
+};
+var iconOnlySizeClass = {
+  xs: "size-8 min-h-8 min-w-8 gap-0 p-0 [&_svg:not([class*='size-'])]:size-3",
+  default: "size-10 min-h-10 min-w-10 gap-0 p-0 [&_svg:not([class*='size-'])]:size-4",
+  lg: "size-11 min-h-11 min-w-11 gap-0 p-0 [&_svg:not([class*='size-'])]:size-5"
+};
+var roundedClass = {
+  full: "rounded-full",
+  lg: "rounded-lg",
+  md: "rounded-md"
+};
+var variantClass = {
+  primary: "bg-primary text-background border border-transparent hover:bg-primary/90 active:bg-primary/85",
+  secondary: "bg-background text-primary border border-primary/10 hover:bg-primary/5",
+  destructive: "bg-background text-red-500 border border-red-500/25 hover:bg-red-500/5",
+  success: "bg-background text-green-500 border border-green-500/25 hover:bg-green-500/5"
+};
+var Button = React3.forwardRef(
+  ({
+    className,
+    type = "button",
+    variant = "secondary",
+    rounded: roundedProp,
+    size = "default",
+    iconOnly = false,
+    disabled,
+    ...props
+  }, ref) => {
+    const rounded = roundedProp ?? (iconOnly ? "md" : "full");
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type,
+        disabled,
+        "data-slot": "button",
+        "data-icon-only": iconOnly ? "" : void 0,
+        className: cn(
+          "inline-flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap outline-none scale-100 transition-[color,background-color,box-shadow,transform] duration-150 ease-out active:scale-[0.98] active:duration-100 active:ease-linear [&_svg]:pointer-events-none [&_svg]:shrink-0",
+          "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+          "focus-visible:border-ring font-medium lg:tracking-wide focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+          iconOnly ? iconOnlySizeClass[size] : sizeClass[size],
+          roundedClass[rounded],
+          variantClass[variant],
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var CHECKBOX_TICK_DELAY_MS = 60;
+var CHECKBOX_TICK_DRAW_MS = 100;
+function CheckboxAnimatedCheckMark() {
+  const lineRef = useRef(null);
+  useLayoutEffect(() => {
+    const poly = lineRef.current;
+    if (!poly || typeof poly.getTotalLength !== "function") return;
+    const len = poly.getTotalLength();
+    if (len <= 0) return;
+    poly.style.strokeDasharray = `${len}`;
+    poly.style.strokeDashoffset = `${len}`;
+    if (typeof poly.animate !== "function") {
+      poly.style.strokeDashoffset = "0";
+      return;
+    }
+    const anim = poly.animate(
+      [{ strokeDashoffset: len }, { strokeDashoffset: 0 }],
+      {
+        duration: CHECKBOX_TICK_DRAW_MS,
+        delay: CHECKBOX_TICK_DELAY_MS,
+        easing: "cubic-bezier(0.45, 0, 0.2, 1)",
+        fill: "forwards"
+      }
+    );
+    return () => anim.cancel();
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "size-4 shrink-0 overflow-visible",
+      viewBox: "0 0 24 24",
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx(
+        "polyline",
+        {
+          ref: lineRef,
+          points: "4 12 9 17 20 6",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "3",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+var Checkbox = React3.forwardRef(
+  ({
+    checked: checkedProp,
+    defaultChecked = false,
+    onCheckedChange,
+    indeterminate = false,
+    disabled = false,
+    className,
+    onClick,
+    ...rest
+  }, ref) => {
+    const isControlled = checkedProp !== void 0;
+    const [uncontrolledChecked, setUncontrolledChecked] = useState(
+      defaultChecked
+    );
+    const checked = isControlled ? checkedProp : uncontrolledChecked;
+    const ariaChecked = indeterminate ? "mixed" : checked ? true : false;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        role: "checkbox",
+        "data-slot": "checkbox",
+        "data-state": indeterminate ? "indeterminate" : checked ? "checked" : "unchecked",
+        disabled,
+        "aria-checked": ariaChecked,
+        className: cn(
+          "ring-offset-background focus-visible:ring-primary/40 inline-flex shrink-0 items-center justify-center rounded-md border border-transparent p-0 outline-none select-none",
+          "focus-visible:ring-2 focus-visible:ring-offset-2",
+          "disabled:cursor-not-allowed",
+          className
+        ),
+        onClick: (e) => {
+          onClick?.(e);
+          if (e.defaultPrevented) return;
+          if (disabled) return;
+          if (isControlled) {
+            onCheckedChange?.(!checked);
+            return;
+          }
+          setUncontrolledChecked((prev) => {
+            const next = !prev;
+            onCheckedChange?.(next);
+            return next;
+          });
+        },
+        ...rest,
+        children: /* @__PURE__ */ jsx("span", { className: "pointer-events-none", children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "flex size-5 shrink-0 items-center justify-center rounded-[4px] border",
+              !disabled && (indeterminate ? "border-primary bg-primary text-background" : checked ? "border-primary bg-primary text-background" : "border-primary/20 bg-background"),
+              disabled && (indeterminate ? "border-primary/40 bg-primary/45 text-primary-foreground" : checked ? "border-primary/40 bg-primary/45 text-primary-foreground" : "border-primary/10 bg-muted/25")
+            ),
+            children: indeterminate ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "size-2.5 shrink-0 rounded-[2px] border border-primary/20 bg-background",
+                "aria-hidden": true
+              }
+            ) : checked ? /* @__PURE__ */ jsx(CheckboxAnimatedCheckMark, {}) : null
+          }
+        ) })
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+var DROPDOWN_PANEL_OPEN_EASING = "cubic-bezier(0,0.55,0.45,1)";
+var DROPDOWN_PANEL_CLOSE_EASING = "cubic-bezier(0.55,0,1,0.45)";
+var DROPDOWN_MENU_MIN_WIDTH_PX = 192;
+var DROPDOWN_MOBILE_SHEET_MAX_PX = 1024;
+var DROPDOWN_MOBILE_SHEET_MOTION_MS = 175;
+var DROPDOWN_MOBILE_SHEET_ENTRY_EASING = "cubic-bezier(0.85, 0, 0.15, 1)";
+var DROPDOWN_MOBILE_SHEET_EXIT_EASING = "cubic-bezier(0.85, 0, 1, 0.15)";
+var DROPDOWN_MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_DEFAULT_PX = 120;
+function resolveDropdownMobileSheet(mobileOptions) {
+  return {
+    sheet: mobileOptions?.sheet ?? true,
+    title: mobileOptions?.title,
+    sheetExtraClassName: mobileOptions?.className,
+    contentClassName: mobileOptions?.contentClassName
+  };
+}
+var DROPDOWN_SUB_CONTENT_ATTR = "data-dropdown-sub-content";
+var DROPDOWN_SHEET_MENU_TEXT = "max-[1024px]:text-base";
+var DROPDOWN_SHEET_MENU_SHORTCUT = "max-[1024px]:text-sm";
+var DROPDOWN_SHEET_MENU_LABEL_TEXT = "max-[1024px]:text-sm";
+var DROPDOWN_CONTENT_ORIGIN = {
+  bottom: "top center",
+  top: "bottom center",
+  left: "right center",
+  right: "left center"
+};
+var DROPDOWN_CONTENT_HIDDEN = {
+  bottom: "translateY(-4px) scale(0.97)",
+  top: "translateY(4px) scale(0.97)",
+  left: "translateX(4px) scale(0.97)",
+  right: "translateX(-4px) scale(0.97)"
+};
+var SUB_CONTENT_ORIGIN = {
+  bottom: "top center",
+  top: "bottom center",
+  left: "right top",
+  right: "left top"
+};
+function computePos(trigger, menu, side, align, offset, pad) {
+  const tr = trigger.getBoundingClientRect();
+  const mr = menu.getBoundingClientRect();
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const sx = window.scrollX;
+  const sy = window.scrollY;
+  let top = 0;
+  let left = 0;
+  let effectiveSide = side;
+  const calc = (s) => {
+    switch (s) {
+      case "bottom":
+        top = tr.bottom + sy + offset;
+        if (align === "start") left = tr.left + sx;
+        else if (align === "end") left = tr.right + sx - mr.width;
+        else left = tr.left + sx + tr.width / 2 - mr.width / 2;
+        break;
+      case "top":
+        top = tr.top + sy - mr.height - offset;
+        if (align === "start") left = tr.left + sx;
+        else if (align === "end") left = tr.right + sx - mr.width;
+        else left = tr.left + sx + tr.width / 2 - mr.width / 2;
+        break;
+      case "right":
+        left = tr.right + sx + offset;
+        if (align === "start") top = tr.top + sy;
+        else if (align === "end") top = tr.bottom + sy - mr.height;
+        else top = tr.top + sy + tr.height / 2 - mr.height / 2;
+        break;
+      case "left":
+        left = tr.left + sx - mr.width - offset;
+        if (align === "start") top = tr.top + sy;
+        else if (align === "end") top = tr.bottom + sy - mr.height;
+        else top = tr.top + sy + tr.height / 2 - mr.height / 2;
+        break;
+    }
+  };
+  calc(side);
+  if (side === "bottom" && top + mr.height > vh + sy - pad) {
+    const ft = tr.top + sy - mr.height - offset;
+    if (ft >= sy + pad) {
+      effectiveSide = "top";
+      top = ft;
+    }
+  } else if (side === "top" && top < sy + pad) {
+    const ft = tr.bottom + sy + offset;
+    if (ft + mr.height <= vh + sy - pad) {
+      effectiveSide = "bottom";
+      top = ft;
+    }
+  } else if (side === "right" && left + mr.width > vw + sx - pad) {
+    const fl = tr.left + sx - mr.width - offset;
+    if (fl >= sx + pad) {
+      effectiveSide = "left";
+      left = fl;
+    }
+  } else if (side === "left" && left < sx + pad) {
+    const fl = tr.right + sx + offset;
+    if (fl + mr.width <= vw + sx - pad) {
+      effectiveSide = "right";
+      left = fl;
+    }
+  }
+  left = Math.max(sx + pad, Math.min(left, vw + sx - mr.width - pad));
+  top = Math.max(sy + pad, Math.min(top, vh + sy - mr.height - pad));
+  return { top, left, side: effectiveSide };
+}
+function useIsMobile(breakpoint = 1025) {
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    const mq = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+    setIsMobile(mq.matches);
+    const handler = (e) => setIsMobile(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [breakpoint]);
+  return isMobile;
+}
+var DropdownContext = React3__default.createContext(void 0);
+function useDropdown() {
+  const ctx = React3__default.useContext(DropdownContext);
+  if (!ctx)
+    throw new Error("Dropdown components must be used within <Dropdown />");
+  return ctx;
+}
+var SubContext = React3__default.createContext(void 0);
+var Dropdown = ({
+  children,
+  open: controlledOpen,
+  onOpenChange
+}) => {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : internalOpen;
+  const triggerRef = useRef(null);
+  const [radioValues, setRadioValues] = useState({});
+  const setOpen = useCallback(
+    (v) => {
+      if (!isControlled) setInternalOpen(v);
+      onOpenChange?.(v);
+    },
+    [isControlled, onOpenChange]
+  );
+  const setRadioValue = useCallback((group, value) => {
+    setRadioValues((prev) => ({ ...prev, [group]: value }));
+  }, []);
+  const ctx = useMemo(
+    () => ({ open, setOpen, triggerRef, radioValues, setRadioValue }),
+    [open, setOpen, radioValues, setRadioValue]
+  );
+  return /* @__PURE__ */ jsx(DropdownContext.Provider, { value: ctx, children });
+};
+function mergeTriggerRef(triggerRef, node, childRef) {
+  triggerRef.current = node;
+  if (typeof childRef === "function") childRef(node);
+  else if (childRef && typeof childRef === "object")
+    childRef.current = node;
+}
+var DropdownTrigger = React3__default.forwardRef(
+  ({
+    children,
+    asChild,
+    className,
+    onClick: onClickProp,
+    disabled,
+    ...buttonProps
+  }, ref) => {
+    const { open, setOpen, triggerRef } = useDropdown();
+    const handleClick = useCallback(
+      (e) => {
+        onClickProp?.(e);
+        e.stopPropagation();
+        if (disabled) return;
+        setOpen(!open);
+      },
+      [disabled, onClickProp, open, setOpen]
+    );
+    const setButtonRef = useCallback(
+      (el) => {
+        triggerRef.current = el;
+        if (typeof ref === "function") ref(el);
+        else if (ref) ref.current = el;
+      },
+      [ref, triggerRef]
+    );
+    if (asChild && React3__default.isValidElement(children)) {
+      const child = children;
+      return React3__default.cloneElement(child, {
+        ref: (node) => {
+          mergeTriggerRef(
+            triggerRef,
+            node,
+            child.ref
+          );
+        },
+        className: cn("group", child.props.className),
+        onClick: (e) => {
+          child.props.onClick?.(e);
+          handleClick(e);
+        },
+        "aria-expanded": open,
+        "aria-haspopup": "menu",
+        "data-state": open ? "open" : "closed",
+        ...disabled !== void 0 ? {
+          disabled
+        } : {}
+      });
+    }
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref: setButtonRef,
+        type: "button",
+        ...buttonProps,
+        disabled,
+        className: cn("group", className),
+        "aria-expanded": open,
+        "aria-haspopup": "menu",
+        "data-state": open ? "open" : "closed",
+        onClick: handleClick,
+        children
+      }
+    );
+  }
+);
+DropdownTrigger.displayName = "DropdownTrigger";
+function DropdownChevron({
+  className,
+  ...props
+}) {
+  const { open } = useDropdown();
+  return /* @__PURE__ */ jsx(
+    ChevronDown,
+    {
+      "aria-hidden": true,
+      className: cn("size-4 shrink-0", open && "rotate-180", className),
+      ...props
+    }
+  );
+}
+var DropdownMobileClose = React3__default.forwardRef(({ className, type = "button", ...props }, ref) => {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type,
+      className: cn(
+        "z-100 flex size-12 shrink-0 cursor-pointer items-center justify-center rounded-full transition-all hover:bg-secondary-background active:scale-[0.96]",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(X, { className: "size-5.5" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+      ]
+    }
+  );
+});
+DropdownMobileClose.displayName = "DropdownMobileClose";
+function DropdownMobileBottomSheetPortal({
+  open,
+  isAnimating,
+  slideEntrance,
+  slideOffsetPx,
+  sheetTitle,
+  sheetExtraClassName,
+  contentClassName,
+  onRequestClose,
+  menuRef,
+  portalZClassName = "z-50",
+  children,
+  className,
+  style,
+  ...panelProps
+}) {
+  const sheetMotion = open ? DROPDOWN_MOBILE_SHEET_ENTRY_EASING : DROPDOWN_MOBILE_SHEET_EXIT_EASING;
+  const sheetHiddenTransform = slideEntrance ? `translateY(${slideOffsetPx}px)` : "translateY(100%)";
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "fixed inset-0 flex items-end justify-center p-0",
+          portalZClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "fixed inset-0 bg-black/40 dark:bg-black/60",
+                isAnimating ? "opacity-100" : "opacity-0"
+              ),
+              style: {
+                transitionProperty: "opacity",
+                transitionDuration: `${DROPDOWN_MOBILE_SHEET_MOTION_MS}ms`,
+                transitionTimingFunction: sheetMotion
+              },
+              onClick: onRequestClose
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ...panelProps,
+              ref: menuRef,
+              className: cn(
+                "bg-background border-primary/10 relative z-10 flex w-full max-h-[min(90dvh,calc(100dvh-env(safe-area-inset-bottom,0px)))] flex-col overflow-hidden shadow-2xl outline-none",
+                "rounded-t-2xl rounded-b-none border-x-0 border-b-0 border-t",
+                sheetExtraClassName,
+                className
+              ),
+              style: {
+                transform: isAnimating ? "translateY(0)" : sheetHiddenTransform,
+                opacity: isAnimating ? 1 : 0,
+                transitionProperty: "transform, opacity",
+                transitionDuration: `${DROPDOWN_MOBILE_SHEET_MOTION_MS}ms`,
+                transitionTimingFunction: sheetMotion,
+                ...style
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "flex w-full shrink-0 items-center py-2 pl-4 pr-2",
+                      sheetTitle ? "justify-between gap-3" : "justify-end"
+                    ),
+                    children: [
+                      sheetTitle ? /* @__PURE__ */ jsx("p", { className: "text-foreground min-w-0 flex-1 truncate text-base font-semibold", children: sheetTitle }) : null,
+                      /* @__PURE__ */ jsx(
+                        DropdownMobileClose,
+                        {
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            onRequestClose();
+                          }
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "min-h-0 flex-1 overflow-y-auto pb-[calc(5rem+env(safe-area-inset-bottom,0px))]",
+                      contentClassName
+                    ),
+                    children
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+}
+var DropdownContent = ({
+  children,
+  side = "bottom",
+  align = "start",
+  offset = 10,
+  duration = 80,
+  viewportPadding = 8,
+  closeOnEscape = true,
+  minWidth = "trigger",
+  loop = true,
+  mobileOptions,
+  slideEntrance = true,
+  slideEntranceOffsetPx: slideEntranceOffsetPxProp,
+  className,
+  style,
+  ...props
+}) => {
+  const isMobile = useIsMobile(DROPDOWN_MOBILE_SHEET_MAX_PX + 1);
+  const { open, setOpen, triggerRef } = useDropdown();
+  const [shouldRender, setShouldRender] = useState(false);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [pos, setPos] = useState({ top: -9999, left: -9999, side });
+  const [triggerW, setTriggerW] = useState(0);
+  const menuRef = useRef(null);
+  const resolvedMobile = useMemo(
+    () => resolveDropdownMobileSheet(mobileOptions),
+    [mobileOptions]
+  );
+  const slideOffsetPx = useMemo(
+    () => slideEntranceOffsetPxProp ?? DROPDOWN_MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_DEFAULT_PX,
+    [slideEntranceOffsetPxProp]
+  );
+  const closeDuration = isMobile && resolvedMobile.sheet ? DROPDOWN_MOBILE_SHEET_MOTION_MS : duration;
+  const closeMenu = useCallback(() => setOpen(false), [setOpen]);
+  useEffect(() => {
+    if (open) {
+      setShouldRender(true);
+    } else {
+      setIsAnimating(false);
+      const timer = setTimeout(() => setShouldRender(false), closeDuration);
+      return () => clearTimeout(timer);
+    }
+  }, [open, closeDuration]);
+  useEffect(() => {
+    if (!shouldRender || !open) return;
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => setIsAnimating(true));
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      if (raf2) cancelAnimationFrame(raf2);
+    };
+  }, [shouldRender, open]);
+  useLayoutEffect(() => {
+    if (!shouldRender || !triggerRef.current || !menuRef.current) return;
+    const update = () => {
+      if (!triggerRef.current || !menuRef.current) return;
+      setTriggerW(triggerRef.current.getBoundingClientRect().width);
+      setPos(
+        computePos(
+          triggerRef.current,
+          menuRef.current,
+          side,
+          align,
+          offset,
+          viewportPadding
+        )
+      );
+    };
+    update();
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, true);
+    return () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update, true);
+    };
+  }, [shouldRender, side, align, offset, viewportPadding]);
+  useEffect(() => {
+    if (isAnimating && menuRef.current) {
+      menuRef.current.focus();
+    }
+  }, [isAnimating]);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      const t = e.target;
+      if (menuRef.current?.contains(t) || triggerRef.current?.contains(t))
+        return;
+      const el = e.target instanceof Element ? e.target : null;
+      if (el?.closest?.(`[${DROPDOWN_SUB_CONTENT_ATTR}]`)) return;
+      setOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open, setOpen, triggerRef]);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      const menu = menuRef.current;
+      if (!menu) return;
+      const focusedEl = document.activeElement;
+      if (focusedEl && !menu.contains(focusedEl)) return;
+      const items = getItems(menu);
+      const idx = items.indexOf(focusedEl);
+      switch (e.key) {
+        case "Escape":
+          if (closeOnEscape) {
+            e.preventDefault();
+            setOpen(false);
+            triggerRef.current?.focus();
+          }
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          if (items.length === 0) break;
+          if (idx === -1 || idx === items.length - 1 && loop)
+            items[0]?.focus();
+          else if (idx < items.length - 1) items[idx + 1]?.focus();
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (items.length === 0) break;
+          if (idx <= 0 && loop) items[items.length - 1]?.focus();
+          else if (idx > 0) items[idx - 1]?.focus();
+          break;
+        case "Home":
+          e.preventDefault();
+          items[0]?.focus();
+          break;
+        case "End":
+          e.preventDefault();
+          items[items.length - 1]?.focus();
+          break;
+        case "Tab":
+          setOpen(false);
+          break;
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [open, closeOnEscape, loop, setOpen, triggerRef]);
+  useEffect(() => {
+    if (open && isMobile && resolvedMobile.sheet) {
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [open, isMobile, resolvedMobile.sheet]);
+  if (!shouldRender || typeof document === "undefined") return null;
+  if (isMobile && resolvedMobile.sheet) {
+    return /* @__PURE__ */ jsx(
+      DropdownMobileBottomSheetPortal,
+      {
+        ...props,
+        open,
+        isAnimating,
+        slideEntrance,
+        slideOffsetPx,
+        sheetTitle: resolvedMobile.title,
+        sheetExtraClassName: resolvedMobile.sheetExtraClassName,
+        contentClassName: resolvedMobile.contentClassName,
+        onRequestClose: closeMenu,
+        menuRef,
+        portalZClassName: "z-50",
+        className,
+        style,
+        role: "menu",
+        "aria-orientation": "vertical",
+        tabIndex: -1,
+        children
+      }
+    );
+  }
+  const resolvedMinW = minWidth === "trigger" ? Math.max(triggerW, DROPDOWN_MENU_MIN_WIDTH_PX) : minWidth;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...props,
+        ref: menuRef,
+        role: "menu",
+        "aria-orientation": "vertical",
+        tabIndex: -1,
+        className: cn(
+          "bg-background border-primary/10 absolute z-50 overflow-hidden rounded-xl border py-1.5 shadow-xl outline-none",
+          className
+        ),
+        style: {
+          position: "absolute",
+          top: pos.top,
+          left: pos.left,
+          minWidth: resolvedMinW,
+          transformOrigin: DROPDOWN_CONTENT_ORIGIN[pos.side],
+          transform: isAnimating ? "none" : DROPDOWN_CONTENT_HIDDEN[pos.side],
+          opacity: isAnimating ? 1 : 0,
+          transitionProperty: "opacity, transform",
+          transitionDuration: `${duration}ms`,
+          transitionTimingFunction: isAnimating ? DROPDOWN_PANEL_OPEN_EASING : DROPDOWN_PANEL_CLOSE_EASING,
+          ...style
+        },
+        children
+      }
+    ),
+    document.body
+  );
+};
+function getItems(menu) {
+  return Array.from(
+    menu.querySelectorAll(
+      '[role="menuitem"]:not([aria-disabled="true"]),[role="menuitemcheckbox"]:not([aria-disabled="true"]),[role="menuitemradio"]:not([aria-disabled="true"])'
+    )
+  );
+}
+var DropdownItem = ({
+  children,
+  disabled = false,
+  destructive = false,
+  icon,
+  shortcut,
+  closeOnSelect = true,
+  inset = false,
+  className,
+  onClick,
+  ...props
+}) => {
+  const { setOpen } = useDropdown();
+  const handleClick = (e) => {
+    if (disabled) return;
+    onClick?.(e);
+    if (closeOnSelect) setOpen(false);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleClick(e);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      role: "menuitem",
+      tabIndex: disabled ? void 0 : -1,
+      "aria-disabled": disabled,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      className: cn(
+        "relative mx-1.5 flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors duration-0 outline-none select-none",
+        DROPDOWN_SHEET_MENU_TEXT,
+        inset && "pl-9",
+        !disabled && "cursor-pointer",
+        disabled && "lg:cursor-not-allowed",
+        !disabled && !destructive && "text-foreground hover:bg-primary/8 focus-visible:bg-primary/8 dark:hover:bg-primary/4 dark:focus-visible:bg-primary/4",
+        !disabled && destructive && "text-destructive hover:bg-destructive/10 focus-visible:bg-destructive/10 dark:text-destructive-foreground dark:hover:bg-destructive-foreground/18 dark:focus-visible:bg-destructive-foreground/18",
+        disabled && !destructive && "text-foreground/45 dark:text-foreground/50",
+        disabled && destructive && "bg-destructive/5 text-destructive/75 dark:bg-destructive-foreground/12 dark:text-destructive-foreground/78",
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "flex size-4 shrink-0 items-center justify-center", children: icon }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1", children }),
+        shortcut ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "ml-auto text-xs tracking-widest",
+              DROPDOWN_SHEET_MENU_SHORTCUT,
+              destructive ? "text-destructive/70 dark:text-destructive-foreground/80" : "opacity-40"
+            ),
+            children: shortcut
+          }
+        ) : null
+      ]
+    }
+  );
+};
+var DropdownSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    role: "separator",
+    className: cn("border-primary/10 my-1.5 border-t", className),
+    ...props
+  }
+);
+var DropdownLabel = ({ className, inset, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "text-primary/50 px-4 py-2 text-xs font-medium",
+      DROPDOWN_SHEET_MENU_LABEL_TEXT,
+      inset && "pl-9",
+      className
+    ),
+    ...props
+  }
+);
+var DropdownCheckboxItem = ({
+  children,
+  checked = false,
+  onCheckedChange,
+  disabled = false,
+  shortcut,
+  closeOnSelect = false,
+  className,
+  onClick,
+  ...props
+}) => {
+  const { setOpen } = useDropdown();
+  const handleClick = (e) => {
+    if (disabled) return;
+    onCheckedChange?.(!checked);
+    onClick?.(e);
+    if (closeOnSelect) setOpen(false);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleClick(e);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      role: "menuitemcheckbox",
+      "aria-checked": checked,
+      tabIndex: disabled ? void 0 : -1,
+      "aria-disabled": disabled,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      className: cn(
+        "mx-1.5 flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors duration-0 outline-none select-none",
+        DROPDOWN_SHEET_MENU_TEXT,
+        !disabled && "cursor-pointer text-foreground hover:bg-primary/8 focus-visible:bg-primary/8 dark:hover:bg-primary/4 dark:focus-visible:bg-primary/4",
+        disabled && "lg:cursor-not-allowed text-foreground/45 dark:text-foreground/50",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "mr-1 inline-flex shrink-0", "aria-hidden": true, children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked,
+            disabled,
+            tabIndex: -1,
+            className: "pointer-events-none"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", children }),
+        shortcut && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "ml-auto text-xs tracking-widest opacity-40",
+              DROPDOWN_SHEET_MENU_SHORTCUT
+            ),
+            children: shortcut
+          }
+        )
+      ]
+    }
+  );
+};
+var DropdownRadioGroup = ({ children, value, onValueChange, group }) => {
+  const { setRadioValue, radioValues } = useDropdown();
+  const resolvedValue = value ?? radioValues[group] ?? "";
+  const handleValueChange = useCallback(
+    (v) => {
+      setRadioValue(group, v);
+      onValueChange?.(v);
+    },
+    [group, onValueChange, setRadioValue]
+  );
+  const radioCtx = useMemo(
+    () => ({
+      group,
+      value: resolvedValue,
+      onValueChange: handleValueChange
+    }),
+    [group, resolvedValue, handleValueChange]
+  );
+  return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: radioCtx, children });
+};
+var RadioGroupContext = React3__default.createContext(
+  void 0
+);
+function useRadioGroup() {
+  const ctx = React3__default.useContext(RadioGroupContext);
+  if (!ctx)
+    throw new Error("DropdownRadioItem must be inside DropdownRadioGroup");
+  return ctx;
+}
+var DropdownRadioItem = ({
+  children,
+  value,
+  disabled = false,
+  shortcut,
+  closeOnSelect = false,
+  className,
+  onClick,
+  ...props
+}) => {
+  const { setOpen } = useDropdown();
+  const { value: groupValue, onValueChange } = useRadioGroup();
+  const checked = groupValue === value;
+  const handleClick = (e) => {
+    if (disabled) return;
+    onValueChange(value);
+    onClick?.(e);
+    if (closeOnSelect) setOpen(false);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleClick(e);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      role: "menuitemradio",
+      "aria-checked": checked,
+      tabIndex: disabled ? void 0 : -1,
+      "aria-disabled": disabled,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      className: cn(
+        "relative mx-1.5 flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors duration-0 outline-none select-none",
+        DROPDOWN_SHEET_MENU_TEXT,
+        !disabled && "cursor-pointer text-foreground hover:bg-primary/8 focus-visible:bg-primary/8 dark:hover:bg-primary/4 dark:focus-visible:bg-primary/4",
+        disabled && "lg:cursor-not-allowed text-foreground/45 dark:text-foreground/50",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", children }),
+        shortcut ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "shrink-0 text-xs tracking-widest opacity-40",
+              DROPDOWN_SHEET_MENU_SHORTCUT
+            ),
+            children: shortcut
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "flex size-4 shrink-0 items-center justify-center",
+            "aria-hidden": true,
+            children: checked ? /* @__PURE__ */ jsx(Check, { className: "size-3.5", strokeWidth: 2.5 }) : null
+          }
+        )
+      ]
+    }
+  );
+};
+var DropdownSub = ({
+  children
+}) => {
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef(null);
+  const subCtx = useMemo(
+    () => ({ open, setOpen, triggerRef }),
+    [open, setOpen]
+  );
+  return /* @__PURE__ */ jsx(SubContext.Provider, { value: subCtx, children });
+};
+var DropdownSubTrigger = ({ children, icon, inset, disabled = false, className, ...props }) => {
+  const sub = React3__default.useContext(SubContext);
+  if (!sub) throw new Error("DropdownSubTrigger must be inside DropdownSub");
+  const { open, setOpen, triggerRef } = sub;
+  const isMobile = useIsMobile(DROPDOWN_MOBILE_SHEET_MAX_PX + 1);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      ref: (el) => {
+        triggerRef.current = el;
+      },
+      role: "menuitem",
+      "aria-haspopup": "menu",
+      "aria-expanded": open,
+      tabIndex: disabled ? void 0 : -1,
+      "aria-disabled": disabled,
+      onMouseEnter: () => {
+        if (disabled || isMobile) return;
+        setOpen(true);
+      },
+      onMouseLeave: () => {
+        if (isMobile) return;
+        setOpen(false);
+      },
+      onKeyDown: (e) => {
+        if (disabled) return;
+        if (e.key === "ArrowRight" || e.key === "Enter") {
+          e.preventDefault();
+          setOpen(true);
+        }
+      },
+      onClick: () => {
+        if (disabled) return;
+        setOpen(!open);
+      },
+      className: cn(
+        "relative mx-1.5 flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors duration-0 outline-none select-none",
+        DROPDOWN_SHEET_MENU_TEXT,
+        inset && "pl-9",
+        !disabled && "cursor-pointer text-foreground hover:bg-primary/8 focus-visible:bg-primary/8 dark:hover:bg-primary/4 dark:focus-visible:bg-primary/4",
+        disabled && "lg:cursor-not-allowed text-foreground/45 dark:text-foreground/50",
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "flex size-4 shrink-0 items-center justify-center", children: icon }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1", children }),
+        /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto size-4 opacity-50" })
+      ]
+    }
+  );
+};
+var DropdownSubContent = ({
+  children,
+  duration = 80,
+  viewportPadding = 8,
+  mobileOptions,
+  slideEntrance = true,
+  slideEntranceOffsetPx: slideEntranceOffsetPxProp,
+  className,
+  style,
+  onKeyDown: onKeyDownProp,
+  ...props
+}) => {
+  const sub = React3__default.useContext(SubContext);
+  if (!sub) throw new Error("DropdownSubContent must be inside DropdownSub");
+  const { open, setOpen, triggerRef } = sub;
+  const isMobile = useIsMobile(DROPDOWN_MOBILE_SHEET_MAX_PX + 1);
+  const slideOffsetPx = useMemo(
+    () => slideEntranceOffsetPxProp ?? DROPDOWN_MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_DEFAULT_PX,
+    [slideEntranceOffsetPxProp]
+  );
+  const resolvedMobile = useMemo(
+    () => resolveDropdownMobileSheet(mobileOptions),
+    [mobileOptions]
+  );
+  const [shouldRender, setShouldRender] = useState(false);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [pos, setPos] = useState({
+    top: -9999,
+    left: -9999,
+    side: "right"
+  });
+  const menuRef = useRef(null);
+  const closeDuration = isMobile && resolvedMobile.sheet ? DROPDOWN_MOBILE_SHEET_MOTION_MS : duration;
+  const closeSub = useCallback(() => setOpen(false), [setOpen]);
+  useEffect(() => {
+    if (open) {
+      setShouldRender(true);
+    } else {
+      setIsAnimating(false);
+      const timer = setTimeout(() => setShouldRender(false), closeDuration);
+      return () => clearTimeout(timer);
+    }
+  }, [open, closeDuration]);
+  useEffect(() => {
+    if (!shouldRender || !open) return;
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => setIsAnimating(true));
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      if (raf2) cancelAnimationFrame(raf2);
+    };
+  }, [shouldRender, open]);
+  useLayoutEffect(() => {
+    if (!shouldRender || !triggerRef.current || !menuRef.current) return;
+    if (isMobile && resolvedMobile.sheet) return;
+    const update = () => {
+      if (!triggerRef.current || !menuRef.current) return;
+      setPos(
+        computePos(
+          triggerRef.current,
+          menuRef.current,
+          "right",
+          "start",
+          -8,
+          viewportPadding
+        )
+      );
+    };
+    update();
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, true);
+    return () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update, true);
+    };
+  }, [shouldRender, viewportPadding, isMobile, resolvedMobile.sheet]);
+  useEffect(() => {
+    if (isAnimating && menuRef.current) {
+      menuRef.current.focus();
+    }
+  }, [isAnimating]);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      const t = e.target;
+      if (menuRef.current?.contains(t) || triggerRef.current?.contains(t))
+        return;
+      const el = e.target instanceof Element ? e.target : null;
+      const subPanel = el?.closest?.(`[${DROPDOWN_SUB_CONTENT_ATTR}]`);
+      if (subPanel && subPanel !== menuRef.current) return;
+      setOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open, setOpen, triggerRef]);
+  const handleSubMenuKeyDown = useCallback(
+    (e) => {
+      onKeyDownProp?.(e);
+      if (e.defaultPrevented) return;
+      const menu = menuRef.current;
+      if (!menu) return;
+      const items = getItems(menu);
+      const focused = document.activeElement;
+      const idx = items.indexOf(focused);
+      switch (e.key) {
+        case "ArrowLeft":
+        case "Escape":
+          e.preventDefault();
+          setOpen(false);
+          triggerRef.current?.focus();
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          if (items.length === 0) break;
+          if (idx === -1 || idx === items.length - 1) items[0]?.focus();
+          else items[idx + 1]?.focus();
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (items.length === 0) break;
+          if (idx <= 0) items[items.length - 1]?.focus();
+          else items[idx - 1]?.focus();
+          break;
+        case "Home":
+          e.preventDefault();
+          items[0]?.focus();
+          break;
+        case "End":
+          e.preventDefault();
+          items[items.length - 1]?.focus();
+          break;
+      }
+    },
+    [onKeyDownProp, setOpen, triggerRef]
+  );
+  if (!shouldRender || typeof document === "undefined") return null;
+  if (isMobile && resolvedMobile.sheet) {
+    return /* @__PURE__ */ jsx(
+      DropdownMobileBottomSheetPortal,
+      {
+        ...props,
+        open,
+        isAnimating,
+        slideEntrance,
+        slideOffsetPx,
+        sheetTitle: resolvedMobile.title,
+        sheetExtraClassName: resolvedMobile.sheetExtraClassName,
+        contentClassName: resolvedMobile.contentClassName,
+        onRequestClose: closeSub,
+        menuRef,
+        portalZClassName: "z-[70]",
+        className,
+        style,
+        role: "menu",
+        tabIndex: -1,
+        onKeyDown: handleSubMenuKeyDown,
+        "data-dropdown-sub-content": "",
+        children
+      }
+    );
+  }
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...props,
+        ref: menuRef,
+        role: "menu",
+        tabIndex: -1,
+        onMouseEnter: () => setOpen(true),
+        onMouseLeave: () => setOpen(false),
+        onKeyDown: handleSubMenuKeyDown,
+        "data-dropdown-sub-content": "",
+        className: cn(
+          "bg-background border-primary/10 absolute z-60 overflow-hidden rounded-xl border py-1.5 shadow-xl outline-none",
+          className
+        ),
+        style: {
+          position: "absolute",
+          top: pos.top,
+          left: pos.left,
+          minWidth: DROPDOWN_MENU_MIN_WIDTH_PX,
+          transformOrigin: SUB_CONTENT_ORIGIN[pos.side],
+          transform: isAnimating ? "none" : DROPDOWN_CONTENT_HIDDEN[pos.side],
+          opacity: isAnimating ? 1 : 0,
+          transitionProperty: "opacity, transform",
+          transitionDuration: `${duration}ms`,
+          transitionTimingFunction: isAnimating ? DROPDOWN_PANEL_OPEN_EASING : DROPDOWN_PANEL_CLOSE_EASING,
+          ...style
+        },
+        children
+      }
+    ),
+    document.body
+  );
+};
+
+export { Dropdown, DropdownCheckboxItem, DropdownChevron, DropdownContent, DropdownItem, DropdownLabel, DropdownMobileClose, DropdownRadioGroup, DropdownRadioItem, DropdownSeparator, DropdownSub, DropdownSubContent, DropdownSubTrigger, DropdownTrigger };
+//# sourceMappingURL=dropdown.js.map
+//# sourceMappingURL=dropdown.js.map