@avenue-ticketing/ui 0.3.0 → 0.5.0

package/dist/react/table-view/column-menu.js

@@ -0,0 +1,918 @@
+import { X, MoreVertical, ArrowLeft, ArrowRight, ChevronUp, ChevronDown, Pin, PinOff, EyeOff } from 'lucide-react';
+import * as React2 from 'react';
+import React2__default, { useCallback, forwardRef, useState, useImperativeHandle, memo, useRef, useMemo, useEffect, useLayoutEffect } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
+
+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 = React2.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 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_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)"
+};
+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 = React2__default.createContext(void 0);
+function useDropdown() {
+  const ctx = React2__default.useContext(DropdownContext);
+  if (!ctx)
+    throw new Error("Dropdown components must be used within <Dropdown />");
+  return ctx;
+}
+React2__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 = React2__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 && React2__default.isValidElement(children)) {
+      const child = children;
+      return React2__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";
+var DropdownMobileClose = React2__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
+  }
+);
+React2__default.createContext(
+  void 0
+);
+
+// src/react/table-view/helpers.ts
+function getTableLeafColumnOrderList(table) {
+  const o = table.getState().columnOrder;
+  if (o && o.length > 0) return [...o];
+  return table.getVisibleLeafColumns().map((c) => c.id);
+}
+function moveTableColumnOneStep(table, columnId, direction) {
+  const list = getTableLeafColumnOrderList(table);
+  const i = list.indexOf(columnId);
+  if (i < 0) return;
+  const next = [...list];
+  if (direction === "left" && i > 0) {
+    [next[i - 1], next[i]] = [next[i], next[i - 1]];
+  } else if (direction === "right" && i < next.length - 1) {
+    [next[i + 1], next[i]] = [next[i], next[i + 1]];
+  } else {
+    return;
+  }
+  table.setColumnOrder(next);
+}
+
+// src/react/table-view/meta.ts
+function getTableViewColumnDisableReorder(column) {
+  return Boolean(column.columnDef.meta?.tableView?.disableColumnReorder);
+}
+var ColumnHeaderMenuInner = forwardRef(function ColumnHeaderMenuInner2({ table, header, columnSort, columnReorder }, ref) {
+  const [open, setOpen] = useState(false);
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: () => {
+        setOpen(true);
+      }
+    }),
+    []
+  );
+  const col = header.column;
+  const id = col.id;
+  const canPin = col.getCanPin();
+  const pin = col.getIsPinned();
+  const list = getTableLeafColumnOrderList(table);
+  const idx = list.indexOf(id);
+  const reorderLocked = getTableViewColumnDisableReorder(col);
+  const canMoveLeft = columnReorder && !reorderLocked && idx > 0;
+  const canMoveRight = columnReorder && !reorderLocked && idx >= 0 && idx < list.length - 1;
+  const canSort = columnSort && col.getCanSort();
+  const hasMoveSection = canMoveLeft || canMoveRight;
+  const hasSortSection = !!canSort;
+  const hasPinSection = canPin;
+  const hasHideSection = col.getCanHide();
+  if (!hasMoveSection && !hasSortSection && !hasPinSection && !hasHideSection) {
+    return null;
+  }
+  const showSepBeforeHide = hasHideSection && (hasMoveSection || hasSortSection || hasPinSection);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex shrink-0 self-stretch items-center",
+        "opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100 has-[[data-state=open]]:opacity-100"
+      ),
+      onClick: (e) => e.stopPropagation(),
+      children: /* @__PURE__ */ jsxs(Dropdown, { open, onOpenChange: setOpen, children: [
+        /* @__PURE__ */ jsx(DropdownTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "xs",
+            iconOnly: true,
+            rounded: "full",
+            className: "touch-manipulation border-none bg-transparent shadow-none",
+            "aria-label": "Column options",
+            children: /* @__PURE__ */ jsx(MoreVertical, { className: "size-3.5", strokeWidth: 2.25, "aria-hidden": true })
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(DropdownContent, { align: "end", side: "bottom", offset: 4, children: [
+          hasMoveSection ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              DropdownItem,
+              {
+                disabled: !canMoveLeft,
+                icon: /* @__PURE__ */ jsx(
+                  ArrowLeft,
+                  {
+                    className: "size-3.5",
+                    strokeWidth: 2.25,
+                    "aria-hidden": true
+                  }
+                ),
+                onClick: () => {
+                  if (canMoveLeft) moveTableColumnOneStep(table, id, "left");
+                },
+                children: "Move to the left"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              DropdownItem,
+              {
+                disabled: !canMoveRight,
+                icon: /* @__PURE__ */ jsx(
+                  ArrowRight,
+                  {
+                    className: "size-3.5",
+                    strokeWidth: 2.25,
+                    "aria-hidden": true
+                  }
+                ),
+                onClick: () => {
+                  if (canMoveRight) moveTableColumnOneStep(table, id, "right");
+                },
+                children: "Move to the right"
+              }
+            )
+          ] }) : null,
+          hasMoveSection && (hasSortSection || hasPinSection) ? /* @__PURE__ */ jsx(DropdownSeparator, {}) : null,
+          hasSortSection ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              DropdownItem,
+              {
+                icon: /* @__PURE__ */ jsx(
+                  ChevronUp,
+                  {
+                    className: "size-3.5",
+                    strokeWidth: 2.25,
+                    "aria-hidden": true
+                  }
+                ),
+                onClick: () => {
+                  col.toggleSorting(false);
+                },
+                children: "Sort ascending"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              DropdownItem,
+              {
+                icon: /* @__PURE__ */ jsx(
+                  ChevronDown,
+                  {
+                    className: "size-3.5",
+                    strokeWidth: 2.25,
+                    "aria-hidden": true
+                  }
+                ),
+                onClick: () => {
+                  col.toggleSorting(true);
+                },
+                children: "Sort descending"
+              }
+            )
+          ] }) : null,
+          hasSortSection && hasPinSection ? /* @__PURE__ */ jsx(DropdownSeparator, {}) : null,
+          hasPinSection ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            pin !== "left" ? /* @__PURE__ */ jsx(
+              DropdownItem,
+              {
+                icon: /* @__PURE__ */ jsx(Pin, { className: "size-3.5", strokeWidth: 2.25, "aria-hidden": true }),
+                onClick: () => {
+                  col.pin("left");
+                },
+                children: "Pin to the left"
+              }
+            ) : null,
+            pin !== "right" ? /* @__PURE__ */ jsx(
+              DropdownItem,
+              {
+                icon: /* @__PURE__ */ jsx(
+                  Pin,
+                  {
+                    className: "size-3.5 -scale-x-100",
+                    strokeWidth: 2.25,
+                    "aria-hidden": true
+                  }
+                ),
+                onClick: () => {
+                  col.pin("right");
+                },
+                children: "Pin to the right"
+              }
+            ) : null,
+            pin ? /* @__PURE__ */ jsx(
+              DropdownItem,
+              {
+                icon: /* @__PURE__ */ jsx(
+                  PinOff,
+                  {
+                    className: "size-3.5",
+                    strokeWidth: 2.25,
+                    "aria-hidden": true
+                  }
+                ),
+                onClick: () => {
+                  col.pin(false);
+                },
+                children: "Unpin column"
+              }
+            ) : null
+          ] }) : null,
+          showSepBeforeHide ? /* @__PURE__ */ jsx(DropdownSeparator, {}) : null,
+          hasHideSection ? /* @__PURE__ */ jsx(
+            DropdownItem,
+            {
+              icon: /* @__PURE__ */ jsx(EyeOff, { className: "size-3.5", strokeWidth: 2.25, "aria-hidden": true }),
+              onClick: () => {
+                col.toggleVisibility(false);
+                setOpen(false);
+              },
+              children: "Hide column"
+            }
+          ) : null
+        ] })
+      ] })
+    }
+  );
+});
+ColumnHeaderMenuInner.displayName = "ColumnHeaderMenuInner";
+var ColumnHeaderMenu = memo(ColumnHeaderMenuInner);
+ColumnHeaderMenu.displayName = "ColumnHeaderMenu";
+
+export { ColumnHeaderMenu };
+//# sourceMappingURL=column-menu.js.map
+//# sourceMappingURL=column-menu.js.map