import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import * as React from "react";
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
import { ChevronRight } from "lucide-react";
import { cn } from "../../lib/utils.js";
import { MenuItem } from "../Menu/menu-item.js";
import { ScrollArea } from "../ScrollArea/scroll-area.js";
import { OVERLAY_COLLISION_PADDING, OVERLAY_SIDE_OFFSET } from "../../tokens/elevation/overlay-geometry.js";
import { useRowSize, RowSizeProvider, ICON_SIZE as ICON_SIZE$1 } from "../../patterns/element-anatomy/item-anatomy.js";
const floatingLayerClass = [
  "z-50 overflow-hidden rounded-lg border border-border bg-surface-raised",
  "data-[state=open]:animate-in data-[state=closed]:animate-out motion-reduce:animate-none",
  "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
  "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
  "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
  "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
  "origin-[var(--radix-dropdown-menu-content-transform-origin)]"
].join(" ");
const ICON_SIZE = ICON_SIZE$1;
const radixItemClass = [
  "relative cursor-pointer select-none outline-none",
  "transition-colors duration-150",
  "data-[highlighted]:bg-neutral-hover",
  "data-[disabled]:pointer-events-none data-[disabled]:text-fg-disabled data-[disabled]:cursor-default"
].join(" ");
const DropdownMenu = DropdownMenuPrimitive.Root;
const DropdownMenuTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  DropdownMenuPrimitive.Trigger,
  {
    ref,
    className: cn("outline-none", className),
    ...props
  }
));
DropdownMenuTrigger.displayName = DropdownMenuPrimitive.Trigger.displayName;
const DropdownMenuGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  DropdownMenuPrimitive.Group,
  {
    ref,
    className: cn("[&+&]:border-t [&+&]:border-divider [&+&]:mt-2 [&+&]:pt-2", className),
    ...props
  }
));
DropdownMenuGroup.displayName = "DropdownMenuGroup";
const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
const DropdownMenuSub = DropdownMenuPrimitive.Sub;
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
const DropdownMenuContent = React.forwardRef(({ className, size = "md", sideOffset = OVERLAY_SIDE_OFFSET, collisionPadding = OVERLAY_COLLISION_PADDING, align = "start", minWidth, maxHeight, children, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
  DropdownMenuPrimitive.Content,
  {
    ref,
    sideOffset,
    collisionPadding,
    align,
    "data-density": "md",
    onCloseAutoFocus: (e) => e.preventDefault(),
    className: cn(floatingLayerClass, !maxHeight && "py-2", className),
    style: {
      boxShadow: "var(--elevation-200)",
      minWidth: minWidth ?? "max(180px, var(--radix-dropdown-menu-trigger-width))",
      maxHeight
    },
    ...props,
    children: /* @__PURE__ */ jsx(RowSizeProvider, { value: size, children: maxHeight ? (
      // 長選單用 ScrollArea 跨 OS 一致捲動(不吃寬度,macOS/Windows 視覺一致)
      // py-2 移到內層,ScrollArea Viewport 才能 scroll 整個 padded 區
      /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-[inherit]", children: /* @__PURE__ */ jsx("div", { className: "py-2", children }) })
    ) : children })
  }
) }));
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
const DropdownMenuSubContent = React.forwardRef(({ className, children, ...props }, ref) => {
  const size = useRowSize();
  return /* @__PURE__ */ jsx(
    DropdownMenuPrimitive.SubContent,
    {
      ref,
      sideOffset: OVERLAY_SIDE_OFFSET,
      className: cn(floatingLayerClass, "py-2", className),
      style: { boxShadow: "var(--elevation-200)", minWidth: 180 },
      ...props,
      children: /* @__PURE__ */ jsx(RowSizeProvider, { value: size, children })
    }
  );
});
DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
function buildEndContent(size, badge, endIcon, shortcut) {
  const EndIcon = endIcon;
  if (!badge && !EndIcon && !shortcut) return void 0;
  const iconPx = ICON_SIZE[size];
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    badge,
    EndIcon && /* @__PURE__ */ jsx(EndIcon, { size: iconPx, className: "text-fg-muted", "aria-hidden": true }),
    shortcut && /* @__PURE__ */ jsx("span", { className: "text-caption text-fg-muted tracking-shortcut", children: shortcut })
  ] });
}
const DropdownMenuItem = React.forwardRef(({ className, children, startIcon, avatar, description, tag, badge, endIcon, shortcut, selected, disabled, ...props }, ref) => {
  const size = useRowSize();
  const endContent = buildEndContent(size, badge, endIcon, shortcut);
  return /* @__PURE__ */ jsx(
    DropdownMenuPrimitive.Item,
    {
      ref,
      disabled,
      className: cn(
        radixItemClass,
        selected && "bg-neutral-selected",
        className
      ),
      ...props,
      children: /* @__PURE__ */ jsx(
        MenuItem,
        {
          size,
          startIcon,
          avatar,
          description,
          tag,
          endContent,
          disabled,
          role: "presentation",
          className: "!bg-transparent hover:!bg-transparent pointer-events-none",
          children
        }
      )
    }
  );
});
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
const DropdownMenuSubTrigger = React.forwardRef(({ className, children, startIcon, value, badge, ...props }, ref) => {
  const size = useRowSize();
  const iconPx = ICON_SIZE[size];
  const endContent = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
    value && /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: value }),
    badge,
    /* @__PURE__ */ jsx(ChevronRight, { size: iconPx, className: "text-fg-muted" })
  ] });
  return /* @__PURE__ */ jsx(
    DropdownMenuPrimitive.SubTrigger,
    {
      ref,
      className: cn(
        radixItemClass,
        "data-[state=open]:bg-neutral-hover",
        className
      ),
      ...props,
      children: /* @__PURE__ */ jsx(
        MenuItem,
        {
          size,
          startIcon,
          endContent,
          role: "presentation",
          className: "!bg-transparent hover:!bg-transparent pointer-events-none",
          children
        }
      )
    }
  );
});
DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, startIcon, description, checked, disabled, ...props }, ref) => {
  const size = useRowSize();
  return /* @__PURE__ */ jsx(
    DropdownMenuPrimitive.CheckboxItem,
    {
      ref,
      checked,
      disabled,
      onSelect: (e) => e.preventDefault(),
      className: cn(radixItemClass, className),
      ...props,
      children: /* @__PURE__ */ jsx(
        MenuItem,
        {
          size,
          checkbox: true,
          checked: !!checked,
          startIcon,
          description,
          disabled,
          role: "presentation",
          className: "!bg-transparent hover:!bg-transparent pointer-events-none",
          children
        }
      )
    }
  );
});
DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
const DropdownMenuLabel = React.forwardRef(({ className, children, ...props }, ref) => {
  const size = useRowSize();
  return /* @__PURE__ */ jsx(
    DropdownMenuPrimitive.Label,
    {
      ref,
      className: cn("outline-none", className),
      ...props,
      children: /* @__PURE__ */ jsx(
        MenuItem,
        {
          size,
          header: true,
          role: "presentation",
          className: "pointer-events-none",
          children
        }
      )
    }
  );
});
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  DropdownMenuPrimitive.Separator,
  {
    ref,
    className: cn("my-2 h-px bg-divider", className),
    ...props
  }
));
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
const DropdownMenuRadioItem = React.forwardRef(({ className, children, startIcon, description, disabled, ...props }, ref) => {
  const size = useRowSize();
  return /* @__PURE__ */ jsx(
    DropdownMenuPrimitive.RadioItem,
    {
      ref,
      disabled,
      onSelect: (e) => e.preventDefault(),
      className: cn(radixItemClass, "data-[state=checked]:bg-neutral-selected", className),
      ...props,
      children: /* @__PURE__ */ jsx(
        MenuItem,
        {
          size,
          startIcon,
          description,
          disabled,
          role: "presentation",
          className: "!bg-transparent hover:!bg-transparent pointer-events-none",
          children
        }
      )
    }
  );
});
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
const DropdownMenuShortcut = ({ className, ...props }) => /* @__PURE__ */ jsx(
  "span",
  {
    className: cn("ml-auto text-caption text-fg-muted tracking-shortcut", className),
    ...props
  }
);
DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
const dropdownMenuMeta = {
  component: "DropdownMenu",
  family: null,
  // non-family composite / overlay / layout
  variants: {},
  sizes: {},
  states: ["default", "hover", "active", "focus-visible", "disabled"],
  tokens: {
    bg: ["bg-neutral-hover", "bg-surface-raised", "bg-transparent"],
    fg: ["text-fg-disabled", "text-fg-muted"],
    ring: []
  }
};
export {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuPortal,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
  dropdownMenuMeta,
  floatingLayerClass
};
//# sourceMappingURL=dropdown-menu.js.map
