@puzzle-ui/ui 0.0.0-stage → 0.2.0

package/dist/components/overlays/dropdown-menu/dropdown-menu-trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu-trigger.js","names":[],"sources":["../../../../src/components/overlays/dropdown-menu/dropdown-menu-trigger.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Children,\n  cloneElement,\n  Fragment,\n  isValidElement,\n  useCallback,\n  type ButtonHTMLAttributes,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type PointerEvent as ReactPointerEvent,\n  type ReactElement,\n  type Ref,\n} from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport { useDropdownMenuContext } from \"./dropdown-menu.context\";\nimport { setRef } from \"./dropdown-menu.utils\";\n\nimport type { DropdownMenuTriggerProps } from \"./dropdown-menu.types\";\n\nconst DropdownMenuTrigger = ({\n  asChild = false,\n  children,\n  id,\n  className,\n  disabled = false,\n  onKeyDown,\n  onPointerDown,\n  ref,\n  ...buttonProps\n}: DropdownMenuTriggerProps) => {\n  const context = useDropdownMenuContext();\n\n  const handleRef = useCallback(\n    (node: HTMLElement | null) => {\n      context.triggerRef.current = node;\n      setRef(ref, node);\n    },\n    [context.triggerRef, ref],\n  );\n\n  const child = asChild ? Children.only(children) : null;\n  const childRef = isValidElement(child)\n    ? (child.props as { ref?: Ref<HTMLElement> }).ref\n    : undefined;\n\n  const handleChildRef = useCallback(\n    (node: HTMLElement | null) => {\n      handleRef(node);\n      setRef(childRef, node);\n    },\n    [childRef, handleRef],\n  );\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n    onKeyDown?.(event as KeyboardEvent<HTMLButtonElement>);\n\n    if (event.defaultPrevented || disabled || context.disabled) {\n      return;\n    }\n\n    const target = event.currentTarget;\n    const isNativeButton =\n      target.tagName === \"BUTTON\" || target.tagName === \"INPUT\";\n    const isNativeLink =\n      target.tagName === \"A\" && target.hasAttribute(\"href\");\n    const needsSyntheticActivation =\n      asChild &&\n      !isNativeButton &&\n      (event.key === \" \" || (event.key === \"Enter\" && !isNativeLink));\n\n    if (\n      event.key === \"ArrowDown\" ||\n      event.key === \"ArrowUp\" ||\n      needsSyntheticActivation\n    ) {\n      event.preventDefault();\n      context.openFromKeyboard(event.key === \"ArrowUp\" ? \"last\" : \"first\");\n    }\n  };\n\n  const handlePointerDown = (event: ReactPointerEvent<HTMLElement>) => {\n    onPointerDown?.(event as ReactPointerEvent<HTMLButtonElement>);\n\n    if (!event.defaultPrevented) {\n      context.focusPositionRef.current = \"first\";\n    }\n  };\n\n  const commonProps = {\n    ...buttonProps,\n    id,\n    ref: handleRef,\n    className: cn(\"puzzle-dropdown-menu__trigger\", className),\n    \"aria-haspopup\": \"menu\" as const,\n    \"aria-expanded\": context.open,\n    \"aria-controls\": context.open ? context.contentId : undefined,\n    disabled: disabled || context.disabled,\n    \"data-state\": context.open ? \"open\" : \"closed\",\n    onKeyDown: handleKeyDown,\n    onPointerDown: handlePointerDown,\n  };\n\n  if (asChild) {\n    if (!isValidElement(child)) {\n      throw new Error(\"DropdownMenu.Trigger with asChild expects one element.\");\n    }\n\n    if (child.type === Fragment) {\n      throw new Error(\n        \"DropdownMenu.Trigger with asChild expects one non-Fragment element.\",\n      );\n    }\n\n    const childProps = child.props as HTMLAttributes<HTMLElement> & {\n      className?: string;\n      type?: ButtonHTMLAttributes<HTMLButtonElement>[\"type\"];\n      disabled?: boolean;\n      onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;\n      onPointerDown?: (event: ReactPointerEvent<HTMLElement>) => void;\n      onClick?: (event: MouseEvent<HTMLElement>) => void;\n    };\n    const childDisabled =\n      disabled ||\n      context.disabled ||\n      childProps.disabled === true ||\n      childProps[\"aria-disabled\"] === true ||\n      childProps[\"aria-disabled\"] === \"true\";\n\n    const handleClick = (event: MouseEvent<HTMLElement>) => {\n      if (childDisabled) {\n        event.preventDefault();\n        event.stopPropagation();\n        return;\n      }\n\n      childProps.onClick?.(event);\n      if (!event.defaultPrevented) {\n        buttonProps.onClick?.(event as unknown as MouseEvent<HTMLButtonElement>);\n      }\n    };\n\n    return cloneElement(child as unknown as ReactElement<Record<string, unknown>>, {\n      ...buttonProps,\n      id,\n      ref: handleChildRef,\n      className: cn(\n        \"puzzle-dropdown-menu__trigger\",\n        childProps.className,\n        className,\n      ),\n      role: child.type === \"button\" ? undefined : \"button\",\n      \"aria-haspopup\": \"menu\",\n      \"aria-expanded\": context.open,\n      \"aria-controls\": context.open ? context.contentId : undefined,\n      \"aria-disabled\": childDisabled || undefined,\n      disabled: child.type === \"button\" ? childDisabled : undefined,\n      ...(child.type === \"button\"\n        ? { type: buttonProps.type ?? childProps.type ?? \"button\" }\n        : {}),\n      tabIndex: childDisabled ? -1 : (childProps.tabIndex ?? 0),\n      \"data-state\": context.open ? \"open\" : \"closed\",\n      onKeyDown: (event: KeyboardEvent<HTMLElement>) => {\n        childProps.onKeyDown?.(event);\n        if (!event.defaultPrevented) {\n          handleKeyDown(event);\n        }\n      },\n      onPointerDown: (event: ReactPointerEvent<HTMLElement>) => {\n        childProps.onPointerDown?.(event);\n        if (!event.defaultPrevented) {\n          handlePointerDown(event);\n        }\n      },\n      onClick: handleClick,\n    });\n  }\n\n  return (\n    <button\n      {...(commonProps as ButtonHTMLAttributes<HTMLButtonElement>)}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  );\n};\n\nexport { DropdownMenuTrigger };\n"],"mappings":"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"}

package/dist/components/overlays/dropdown-menu/dropdown-menu.cjs

@@ -0,0 +1,111 @@
+"use client";
+const require_index = require("../popout/index.cjs");
+const require_dropdown_menu_context = require("./dropdown-menu.context.cjs");
+const require_dropdown_menu_utils = require("./dropdown-menu.utils.cjs");
+const require_dropdown_menu_content = require("./dropdown-menu-content.cjs");
+const require_dropdown_menu_trigger = require("./dropdown-menu-trigger.cjs");
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/overlays/dropdown-menu/dropdown-menu.tsx
+const getMenuElements = (children) => react.Children.toArray(children).flatMap((child) => {
+	if ((0, react.isValidElement)(child) && child.type === react.Fragment) return getMenuElements(child.props.children);
+	return (0, react.isValidElement)(child) ? [child] : [];
+});
+const DropdownMenu = ({ children, open, defaultOpen = false, onOpenChange, disabled = false, position = "bottom", align = "start", offset = 8, collisionPadding = 8, matchTriggerWidth = false, triggerClassName, contentClassName }) => {
+	const baseId = (0, react.useId)();
+	const generatedTriggerId = `${baseId}-trigger`;
+	const generatedContentId = `${baseId}-content`;
+	const childElements = getMenuElements(children);
+	const triggers = childElements.filter((child) => child.type === require_dropdown_menu_trigger.DropdownMenuTrigger);
+	const contents = childElements.filter((child) => child.type === require_dropdown_menu_content.DropdownMenuContent);
+	const triggerElement = triggers[0];
+	const contentElement = contents[0];
+	if (triggers.length !== 1 || contents.length !== 1 || !triggerElement || !contentElement) throw new Error("DropdownMenu requires exactly one DropdownMenu.Trigger and one DropdownMenu.Content.");
+	const triggerChild = triggerElement.props.asChild ? react.Children.only(triggerElement.props.children) : null;
+	const triggerChildProps = (0, react.isValidElement)(triggerChild) ? triggerChild.props : void 0;
+	const triggerDisabled = disabled || triggerElement.props.disabled === true || triggerElement.props["aria-disabled"] === true || triggerElement.props["aria-disabled"] === "true" || triggerChildProps?.disabled === true || triggerChildProps?.["aria-disabled"] === true || triggerChildProps?.["aria-disabled"] === "true";
+	const controlled = open !== void 0;
+	const [internalOpen, setInternalOpen] = (0, react.useState)(defaultOpen);
+	const isOpen = !triggerDisabled && (controlled ? open ?? false : internalOpen);
+	(0, react.useEffect)(() => {
+		if (triggerDisabled && !controlled && internalOpen) {
+			setInternalOpen(false);
+			onOpenChange?.(false);
+		}
+	}, [
+		controlled,
+		internalOpen,
+		onOpenChange,
+		triggerDisabled
+	]);
+	const triggerRef = (0, react.useRef)(null);
+	const focusPositionRef = (0, react.useRef)("first");
+	const keyboardFocusPendingRef = (0, react.useRef)(false);
+	const triggerId = triggerElement.props.id ?? triggerChildProps?.id ?? generatedTriggerId;
+	const contentId = contentElement.props.id ?? generatedContentId;
+	const changeOpen = (0, react.useCallback)((nextOpen) => {
+		if (triggerDisabled && nextOpen) {
+			keyboardFocusPendingRef.current = false;
+			return;
+		}
+		if (nextOpen && !keyboardFocusPendingRef.current) focusPositionRef.current = "first";
+		keyboardFocusPendingRef.current = false;
+		if (nextOpen === isOpen) return;
+		if (!controlled) setInternalOpen(nextOpen);
+		onOpenChange?.(nextOpen);
+	}, [
+		controlled,
+		isOpen,
+		onOpenChange,
+		triggerDisabled
+	]);
+	const context = {
+		open: isOpen,
+		disabled: triggerDisabled,
+		triggerId,
+		contentId,
+		triggerRef,
+		focusPositionRef,
+		changeOpen,
+		openFromKeyboard: (0, react.useCallback)((focusPosition) => {
+			focusPositionRef.current = focusPosition;
+			keyboardFocusPendingRef.current = true;
+			changeOpen(true);
+		}, [changeOpen]),
+		close: (0, react.useCallback)((restoreFocus) => {
+			changeOpen(false);
+			if (restoreFocus) require_dropdown_menu_utils.focusElement(triggerRef.current ?? void 0);
+		}, [changeOpen])
+	};
+	const trigger = (0, react.cloneElement)(triggerElement, {
+		id: triggerId,
+		disabled: triggerDisabled,
+		className: (0, _puzzle_ui_core.cn)(triggerElement.props.className, triggerClassName)
+	});
+	const content = (0, react.cloneElement)(contentElement, {
+		id: contentId,
+		className: (0, _puzzle_ui_core.cn)(contentElement.props.className, contentClassName)
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_dropdown_menu_context.DropdownMenuContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Popout, {
+			trigger,
+			open: isOpen,
+			onOpenChange: changeOpen,
+			position,
+			align,
+			offset,
+			collisionPadding,
+			matchTriggerWidth,
+			closeOnOutsideClick: true,
+			closeOnEscape: true,
+			toggleOnClick: true,
+			contentClassName: "puzzle-dropdown-menu__popover",
+			children: content
+		})
+	});
+};
+exports.DropdownMenu = DropdownMenu;
+
+//# sourceMappingURL=dropdown-menu.cjs.map

package/dist/components/overlays/dropdown-menu/dropdown-menu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.cjs","names":["Children","isValidElement","Fragment","useId","DropdownMenuTrigger","DropdownMenuContent","useState","useRef","useCallback","cloneElement","cn","DropdownMenuContext","Popout"],"sources":["../../../../src/components/overlays/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Children,\n  cloneElement,\n  Fragment,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport { Popout, type PopoutTriggerProps } from \"../popout\";\n\nimport {\n  DropdownMenuContext,\n  type DropdownMenuContextValue,\n  type FocusPosition,\n} from \"./dropdown-menu.context\";\nimport { focusElement } from \"./dropdown-menu.utils\";\nimport { DropdownMenuContent } from \"./dropdown-menu-content\";\nimport { DropdownMenuTrigger } from \"./dropdown-menu-trigger\";\n\nimport type {\n  DropdownMenuContentProps,\n  DropdownMenuProps,\n  DropdownMenuTriggerProps,\n} from \"./dropdown-menu.types\";\n\nconst getMenuElements = (children: ReactNode): ReactElement[] =>\n  Children.toArray(children).flatMap((child): ReactElement[] => {\n    if (\n      isValidElement<{ children?: ReactNode }>(child) &&\n      child.type === Fragment\n    ) {\n      return getMenuElements(child.props.children);\n    }\n\n    return isValidElement(child) ? [child] : [];\n  });\n\nconst DropdownMenu = ({\n  children,\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  disabled = false,\n  position = \"bottom\",\n  align = \"start\",\n  offset = 8,\n  collisionPadding = 8,\n  matchTriggerWidth = false,\n  triggerClassName,\n  contentClassName,\n}: DropdownMenuProps) => {\n  const baseId = useId();\n  const generatedTriggerId = `${baseId}-trigger`;\n  const generatedContentId = `${baseId}-content`;\n\n  const childElements = getMenuElements(children);\n  const triggers = childElements.filter(\n    (child) => child.type === DropdownMenuTrigger,\n  );\n  const contents = childElements.filter(\n    (child) => child.type === DropdownMenuContent,\n  );\n  const triggerElement = triggers[0] as\n    | ReactElement<DropdownMenuTriggerProps>\n    | undefined;\n  const contentElement = contents[0] as\n    | ReactElement<DropdownMenuContentProps>\n    | undefined;\n\n  if (\n    triggers.length !== 1 ||\n    contents.length !== 1 ||\n    !triggerElement ||\n    !contentElement\n  ) {\n    throw new Error(\n      \"DropdownMenu requires exactly one DropdownMenu.Trigger and one DropdownMenu.Content.\",\n    );\n  }\n\n  const triggerChild = triggerElement.props.asChild\n    ? Children.only(triggerElement.props.children)\n    : null;\n  const triggerChildProps = isValidElement(triggerChild)\n    ? (triggerChild.props as {\n        id?: string;\n        disabled?: boolean;\n        \"aria-disabled\"?: boolean | \"true\" | \"false\";\n      })\n    : undefined;\n  const triggerDisabled =\n    disabled ||\n    triggerElement.props.disabled === true ||\n    triggerElement.props[\"aria-disabled\"] === true ||\n    triggerElement.props[\"aria-disabled\"] === \"true\" ||\n    triggerChildProps?.disabled === true ||\n    triggerChildProps?.[\"aria-disabled\"] === true ||\n    triggerChildProps?.[\"aria-disabled\"] === \"true\";\n\n  const controlled = open !== undefined;\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const isOpen =\n    !triggerDisabled && (controlled ? (open ?? false) : internalOpen);\n\n  useEffect(() => {\n    if (triggerDisabled && !controlled && internalOpen) {\n      setInternalOpen(false);\n      onOpenChange?.(false);\n    }\n  }, [controlled, internalOpen, onOpenChange, triggerDisabled]);\n\n  const triggerRef = useRef<HTMLElement | null>(null);\n  const focusPositionRef = useRef<FocusPosition>(\"first\");\n  const keyboardFocusPendingRef = useRef(false);\n\n  const triggerId =\n    triggerElement.props.id ?? triggerChildProps?.id ?? generatedTriggerId;\n  const contentId = contentElement.props.id ?? generatedContentId;\n\n  const changeOpen = useCallback(\n    (nextOpen: boolean) => {\n      if (triggerDisabled && nextOpen) {\n        keyboardFocusPendingRef.current = false;\n        return;\n      }\n\n      if (nextOpen && !keyboardFocusPendingRef.current) {\n        focusPositionRef.current = \"first\";\n      }\n\n      keyboardFocusPendingRef.current = false;\n\n      if (nextOpen === isOpen) {\n        return;\n      }\n\n      if (!controlled) {\n        setInternalOpen(nextOpen);\n      }\n\n      onOpenChange?.(nextOpen);\n    },\n    [controlled, isOpen, onOpenChange, triggerDisabled],\n  );\n\n  const openFromKeyboard = useCallback(\n    (focusPosition: FocusPosition) => {\n      focusPositionRef.current = focusPosition;\n      keyboardFocusPendingRef.current = true;\n      changeOpen(true);\n    },\n    [changeOpen],\n  );\n\n  const close = useCallback(\n    (restoreFocus: boolean) => {\n      changeOpen(false);\n\n      if (restoreFocus) {\n        focusElement(triggerRef.current ?? undefined);\n      }\n    },\n    [changeOpen],\n  );\n\n  const context: DropdownMenuContextValue = {\n    open: isOpen,\n    disabled: triggerDisabled,\n    triggerId,\n    contentId,\n    triggerRef,\n    focusPositionRef,\n    changeOpen,\n    openFromKeyboard,\n    close,\n  };\n\n  const trigger = cloneElement(triggerElement, {\n    id: triggerId,\n    disabled: triggerDisabled,\n    className: cn(triggerElement.props.className, triggerClassName),\n  });\n\n  const content = cloneElement(contentElement, {\n    id: contentId,\n    className: cn(contentElement.props.className, contentClassName),\n  });\n\n  return (\n    <DropdownMenuContext.Provider value={context}>\n      <Popout\n        trigger={trigger as unknown as ReactElement<PopoutTriggerProps>}\n        open={isOpen}\n        onOpenChange={changeOpen}\n        position={position}\n        align={align}\n        offset={offset}\n        collisionPadding={collisionPadding}\n        matchTriggerWidth={matchTriggerWidth}\n        closeOnOutsideClick\n        closeOnEscape\n        toggleOnClick\n        contentClassName=\"puzzle-dropdown-menu__popover\"\n      >\n        {content}\n      </Popout>\n    </DropdownMenuContext.Provider>\n  );\n};\n\nexport { DropdownMenu };\n"],"mappings":"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"}

package/dist/components/overlays/dropdown-menu/dropdown-menu.context.cjs

@@ -0,0 +1,21 @@
+"use client";
+let react = require("react");
+// src/components/overlays/dropdown-menu/dropdown-menu.context.ts
+const DropdownMenuContext = (0, react.createContext)(null);
+const RadioGroupContext = (0, react.createContext)(null);
+const useDropdownMenuContext = () => {
+	const context = (0, react.useContext)(DropdownMenuContext);
+	if (!context) throw new Error("DropdownMenu components must be rendered inside DropdownMenu.");
+	return context;
+};
+const useRadioGroupContext = () => {
+	const context = (0, react.useContext)(RadioGroupContext);
+	if (!context) throw new Error("DropdownMenu.RadioItem must be rendered inside DropdownMenu.RadioGroup.");
+	return context;
+};
+exports.DropdownMenuContext = DropdownMenuContext;
+exports.RadioGroupContext = RadioGroupContext;
+exports.useDropdownMenuContext = useDropdownMenuContext;
+exports.useRadioGroupContext = useRadioGroupContext;
+
+//# sourceMappingURL=dropdown-menu.context.cjs.map

package/dist/components/overlays/dropdown-menu/dropdown-menu.context.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.context.cjs","names":["createContext","useContext"],"sources":["../../../../src/components/overlays/dropdown-menu/dropdown-menu.context.ts"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext } from \"react\";\nimport type { MutableRefObject } from \"react\";\n\ntype FocusPosition = \"first\" | \"last\";\n\ntype DropdownMenuContextValue = {\n  open: boolean;\n  disabled: boolean;\n  triggerId: string;\n  contentId: string;\n  triggerRef: MutableRefObject<HTMLElement | null>;\n  focusPositionRef: MutableRefObject<FocusPosition>;\n  changeOpen: (nextOpen: boolean) => void;\n  openFromKeyboard: (position: FocusPosition) => void;\n  close: (restoreFocus: boolean) => void;\n};\n\ntype RadioGroupContextValue = {\n  value: string | undefined;\n  setValue: (value: string) => void;\n};\n\nconst DropdownMenuContext = createContext<DropdownMenuContextValue | null>(null);\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n\nconst useDropdownMenuContext = () => {\n  const context = useContext(DropdownMenuContext);\n\n  if (!context) {\n    throw new Error(\n      \"DropdownMenu components must be rendered inside DropdownMenu.\",\n    );\n  }\n\n  return context;\n};\n\nconst useRadioGroupContext = () => {\n  const context = useContext(RadioGroupContext);\n\n  if (!context) {\n    throw new Error(\n      \"DropdownMenu.RadioItem must be rendered inside DropdownMenu.RadioGroup.\",\n    );\n  }\n\n  return context;\n};\n\nexport {\n  DropdownMenuContext,\n  RadioGroupContext,\n  useDropdownMenuContext,\n  useRadioGroupContext,\n};\n\nexport type {\n  DropdownMenuContextValue,\n  FocusPosition,\n  RadioGroupContextValue,\n};\n"],"mappings":";;;AAwBA,MAAM,uBAAA,GAAsBA,MAAAA,cAAAA,CAA+C,IAAI;AAC/E,MAAM,qBAAA,GAAoBA,MAAAA,cAAAA,CAA6C,IAAI;AAE3E,MAAM,+BAA+B;CACnC,MAAM,WAAA,GAAUC,MAAAA,WAAAA,CAAW,mBAAmB;CAE9C,IAAI,CAAC,SACH,MAAM,IAAI,MACR,+DACF;CAGF,OAAO;AACT;AAEA,MAAM,6BAA6B;CACjC,MAAM,WAAA,GAAUA,MAAAA,WAAAA,CAAW,iBAAiB;CAE5C,IAAI,CAAC,SACH,MAAM,IAAI,MACR,yEACF;CAGF,OAAO;AACT"}

package/dist/components/overlays/dropdown-menu/dropdown-menu.context.js

@@ -0,0 +1,18 @@
+"use client";
+import { createContext, useContext } from "react";
+// src/components/overlays/dropdown-menu/dropdown-menu.context.ts
+const DropdownMenuContext = createContext(null);
+const RadioGroupContext = createContext(null);
+const useDropdownMenuContext = () => {
+	const context = useContext(DropdownMenuContext);
+	if (!context) throw new Error("DropdownMenu components must be rendered inside DropdownMenu.");
+	return context;
+};
+const useRadioGroupContext = () => {
+	const context = useContext(RadioGroupContext);
+	if (!context) throw new Error("DropdownMenu.RadioItem must be rendered inside DropdownMenu.RadioGroup.");
+	return context;
+};
+export { DropdownMenuContext, RadioGroupContext, useDropdownMenuContext, useRadioGroupContext };
+
+//# sourceMappingURL=dropdown-menu.context.js.map

package/dist/components/overlays/dropdown-menu/dropdown-menu.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.context.js","names":[],"sources":["../../../../src/components/overlays/dropdown-menu/dropdown-menu.context.ts"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext } from \"react\";\nimport type { MutableRefObject } from \"react\";\n\ntype FocusPosition = \"first\" | \"last\";\n\ntype DropdownMenuContextValue = {\n  open: boolean;\n  disabled: boolean;\n  triggerId: string;\n  contentId: string;\n  triggerRef: MutableRefObject<HTMLElement | null>;\n  focusPositionRef: MutableRefObject<FocusPosition>;\n  changeOpen: (nextOpen: boolean) => void;\n  openFromKeyboard: (position: FocusPosition) => void;\n  close: (restoreFocus: boolean) => void;\n};\n\ntype RadioGroupContextValue = {\n  value: string | undefined;\n  setValue: (value: string) => void;\n};\n\nconst DropdownMenuContext = createContext<DropdownMenuContextValue | null>(null);\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n\nconst useDropdownMenuContext = () => {\n  const context = useContext(DropdownMenuContext);\n\n  if (!context) {\n    throw new Error(\n      \"DropdownMenu components must be rendered inside DropdownMenu.\",\n    );\n  }\n\n  return context;\n};\n\nconst useRadioGroupContext = () => {\n  const context = useContext(RadioGroupContext);\n\n  if (!context) {\n    throw new Error(\n      \"DropdownMenu.RadioItem must be rendered inside DropdownMenu.RadioGroup.\",\n    );\n  }\n\n  return context;\n};\n\nexport {\n  DropdownMenuContext,\n  RadioGroupContext,\n  useDropdownMenuContext,\n  useRadioGroupContext,\n};\n\nexport type {\n  DropdownMenuContextValue,\n  FocusPosition,\n  RadioGroupContextValue,\n};\n"],"mappings":";;;AAwBA,MAAM,sBAAsB,cAA+C,IAAI;AAC/E,MAAM,oBAAoB,cAA6C,IAAI;AAE3E,MAAM,+BAA+B;CACnC,MAAM,UAAU,WAAW,mBAAmB;CAE9C,IAAI,CAAC,SACH,MAAM,IAAI,MACR,+DACF;CAGF,OAAO;AACT;AAEA,MAAM,6BAA6B;CACjC,MAAM,UAAU,WAAW,iBAAiB;CAE5C,IAAI,CAAC,SACH,MAAM,IAAI,MACR,yEACF;CAGF,OAAO;AACT"}

package/dist/components/overlays/dropdown-menu/dropdown-menu.css

@@ -0,0 +1,127 @@
+.puzzle-popout__content.puzzle-dropdown-menu__popover {
+  min-width: 11rem;
+  padding: var(--puzzle-space-1, .25rem);
+  scrollbar-width: thin;
+  overflow: hidden auto;
+}
+
+.puzzle-dropdown-menu__trigger {
+  touch-action: manipulation;
+}
+
+.puzzle-dropdown-menu__trigger:focus-visible {
+  outline: 2px solid var(--puzzle-color-ring);
+  outline-offset: 2px;
+}
+
+.puzzle-dropdown-menu__content {
+  gap: var(--puzzle-space-1, .25rem);
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  outline: none;
+  flex-direction: column;
+  min-width: 0;
+  max-width: 100%;
+  display: flex;
+  overflow: hidden auto;
+}
+
+.puzzle-dropdown-menu__group, .puzzle-dropdown-menu__radio-group {
+  gap: var(--puzzle-space-1, .25rem);
+  flex-direction: column;
+  min-width: 0;
+  display: flex;
+}
+
+.puzzle-dropdown-menu__label {
+  padding: var(--puzzle-space-2, .5rem) var(--puzzle-space-3, .75rem);
+  color: var(--puzzle-color-text-muted);
+  font-size: var(--puzzle-font-size-xs, .75rem);
+  font-weight: var(--puzzle-font-weight-semibold, 600);
+  line-height: var(--puzzle-font-line-height-body2, 1.4);
+}
+
+.puzzle-dropdown-menu__item {
+  box-sizing: border-box;
+  align-items: center;
+  gap: var(--puzzle-space-2, .5rem);
+  width: 100%;
+  min-width: 0;
+  min-height: 2.25rem;
+  padding: var(--puzzle-space-2, .5rem) var(--puzzle-space-3, .75rem);
+  border-radius: var(--puzzle-radius-sm, .25rem);
+  color: var(--puzzle-color-text);
+  font: inherit;
+  font-size: var(--puzzle-font-size-sm, .875rem);
+  line-height: var(--puzzle-font-line-height-body2, 1.4);
+  text-align: start;
+  cursor: pointer;
+  user-select: none;
+  touch-action: manipulation;
+  transition: color var(--puzzle-duration-fast, .15s) ease,
+        background-color var(--puzzle-duration-fast, .15s) ease,
+        border-color var(--puzzle-duration-fast, .15s) ease;
+  background: none;
+  border: 1px solid #0000;
+  text-decoration: none;
+  display: flex;
+}
+
+.puzzle-dropdown-menu__item:hover:not(:disabled):not([aria-disabled="true"]), .puzzle-dropdown-menu__item:focus-visible:not(:disabled):not([aria-disabled="true"]) {
+  background: var(--puzzle-color-surface-sunken);
+  outline: none;
+}
+
+.puzzle-dropdown-menu__item:focus-visible:not(:disabled):not([aria-disabled="true"]) {
+  border-color: var(--puzzle-color-ring);
+}
+
+.puzzle-dropdown-menu__item:disabled, .puzzle-dropdown-menu__item[aria-disabled="true"] {
+  opacity: .5;
+  cursor: not-allowed;
+}
+
+.puzzle-dropdown-menu__item--danger {
+  color: var(--puzzle-color-danger);
+}
+
+.puzzle-dropdown-menu__item--danger:hover:not(:disabled):not([aria-disabled="true"]), .puzzle-dropdown-menu__item--danger:focus-visible:not(:disabled):not([aria-disabled="true"]) {
+  background: color-mix(in srgb, var(--puzzle-color-danger), transparent 92%);
+}
+
+.puzzle-dropdown-menu__item-label {
+  flex: auto;
+  min-width: 0;
+}
+
+.puzzle-dropdown-menu__indicator {
+  width: 1rem;
+  min-height: 1rem;
+  color: var(--puzzle-color-primary);
+  font-size: .875rem;
+  font-weight: var(--puzzle-font-weight-semibold, 600);
+  flex: 0 0 1rem;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+.puzzle-dropdown-menu__separator {
+  height: 1px;
+  margin-block: var(--puzzle-space-1, .25rem);
+  background: var(--puzzle-color-border);
+  flex: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .puzzle-dropdown-menu__item, .puzzle-dropdown-menu__trigger {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .puzzle-dropdown-menu__item:focus-visible:not(:disabled), .puzzle-dropdown-menu__trigger:focus-visible {
+    outline-offset: 2px;
+    outline: 2px solid highlight;
+  }
+}

package/dist/components/overlays/dropdown-menu/dropdown-menu.d.cts

@@ -0,0 +1,3 @@
+import { DropdownMenuProps } from "./dropdown-menu.types.cjs";
+declare const DropdownMenu: ({ children, open, defaultOpen, onOpenChange, disabled, position, align, offset, collisionPadding, matchTriggerWidth, triggerClassName, contentClassName }: DropdownMenuProps) => import("react").JSX.Element;
+export { DropdownMenu };

package/dist/components/overlays/dropdown-menu/dropdown-menu.d.ts

@@ -0,0 +1,3 @@
+import { DropdownMenuProps } from "./dropdown-menu.types.js";
+declare const DropdownMenu: ({ children, open, defaultOpen, onOpenChange, disabled, position, align, offset, collisionPadding, matchTriggerWidth, triggerClassName, contentClassName }: DropdownMenuProps) => import("react").JSX.Element;
+export { DropdownMenu };

package/dist/components/overlays/dropdown-menu/dropdown-menu.js

@@ -0,0 +1,111 @@
+"use client";
+import { Popout } from "../popout/index.js";
+import { DropdownMenuContext } from "./dropdown-menu.context.js";
+import { focusElement } from "./dropdown-menu.utils.js";
+import { DropdownMenuContent } from "./dropdown-menu-content.js";
+import { DropdownMenuTrigger } from "./dropdown-menu-trigger.js";
+import { cn } from "@puzzle-ui/core";
+import { Children, Fragment, cloneElement, isValidElement, useCallback, useEffect, useId, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/components/overlays/dropdown-menu/dropdown-menu.tsx
+const getMenuElements = (children) => Children.toArray(children).flatMap((child) => {
+	if (isValidElement(child) && child.type === Fragment) return getMenuElements(child.props.children);
+	return isValidElement(child) ? [child] : [];
+});
+const DropdownMenu = ({ children, open, defaultOpen = false, onOpenChange, disabled = false, position = "bottom", align = "start", offset = 8, collisionPadding = 8, matchTriggerWidth = false, triggerClassName, contentClassName }) => {
+	const baseId = useId();
+	const generatedTriggerId = `${baseId}-trigger`;
+	const generatedContentId = `${baseId}-content`;
+	const childElements = getMenuElements(children);
+	const triggers = childElements.filter((child) => child.type === DropdownMenuTrigger);
+	const contents = childElements.filter((child) => child.type === DropdownMenuContent);
+	const triggerElement = triggers[0];
+	const contentElement = contents[0];
+	if (triggers.length !== 1 || contents.length !== 1 || !triggerElement || !contentElement) throw new Error("DropdownMenu requires exactly one DropdownMenu.Trigger and one DropdownMenu.Content.");
+	const triggerChild = triggerElement.props.asChild ? Children.only(triggerElement.props.children) : null;
+	const triggerChildProps = isValidElement(triggerChild) ? triggerChild.props : void 0;
+	const triggerDisabled = disabled || triggerElement.props.disabled === true || triggerElement.props["aria-disabled"] === true || triggerElement.props["aria-disabled"] === "true" || triggerChildProps?.disabled === true || triggerChildProps?.["aria-disabled"] === true || triggerChildProps?.["aria-disabled"] === "true";
+	const controlled = open !== void 0;
+	const [internalOpen, setInternalOpen] = useState(defaultOpen);
+	const isOpen = !triggerDisabled && (controlled ? open ?? false : internalOpen);
+	useEffect(() => {
+		if (triggerDisabled && !controlled && internalOpen) {
+			setInternalOpen(false);
+			onOpenChange?.(false);
+		}
+	}, [
+		controlled,
+		internalOpen,
+		onOpenChange,
+		triggerDisabled
+	]);
+	const triggerRef = useRef(null);
+	const focusPositionRef = useRef("first");
+	const keyboardFocusPendingRef = useRef(false);
+	const triggerId = triggerElement.props.id ?? triggerChildProps?.id ?? generatedTriggerId;
+	const contentId = contentElement.props.id ?? generatedContentId;
+	const changeOpen = useCallback((nextOpen) => {
+		if (triggerDisabled && nextOpen) {
+			keyboardFocusPendingRef.current = false;
+			return;
+		}
+		if (nextOpen && !keyboardFocusPendingRef.current) focusPositionRef.current = "first";
+		keyboardFocusPendingRef.current = false;
+		if (nextOpen === isOpen) return;
+		if (!controlled) setInternalOpen(nextOpen);
+		onOpenChange?.(nextOpen);
+	}, [
+		controlled,
+		isOpen,
+		onOpenChange,
+		triggerDisabled
+	]);
+	const context = {
+		open: isOpen,
+		disabled: triggerDisabled,
+		triggerId,
+		contentId,
+		triggerRef,
+		focusPositionRef,
+		changeOpen,
+		openFromKeyboard: useCallback((focusPosition) => {
+			focusPositionRef.current = focusPosition;
+			keyboardFocusPendingRef.current = true;
+			changeOpen(true);
+		}, [changeOpen]),
+		close: useCallback((restoreFocus) => {
+			changeOpen(false);
+			if (restoreFocus) focusElement(triggerRef.current ?? void 0);
+		}, [changeOpen])
+	};
+	const trigger = cloneElement(triggerElement, {
+		id: triggerId,
+		disabled: triggerDisabled,
+		className: cn(triggerElement.props.className, triggerClassName)
+	});
+	const content = cloneElement(contentElement, {
+		id: contentId,
+		className: cn(contentElement.props.className, contentClassName)
+	});
+	return /* @__PURE__ */ jsx(DropdownMenuContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(Popout, {
+			trigger,
+			open: isOpen,
+			onOpenChange: changeOpen,
+			position,
+			align,
+			offset,
+			collisionPadding,
+			matchTriggerWidth,
+			closeOnOutsideClick: true,
+			closeOnEscape: true,
+			toggleOnClick: true,
+			contentClassName: "puzzle-dropdown-menu__popover",
+			children: content
+		})
+	});
+};
+export { DropdownMenu };
+
+//# sourceMappingURL=dropdown-menu.js.map

package/dist/components/overlays/dropdown-menu/dropdown-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.js","names":[],"sources":["../../../../src/components/overlays/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Children,\n  cloneElement,\n  Fragment,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport { Popout, type PopoutTriggerProps } from \"../popout\";\n\nimport {\n  DropdownMenuContext,\n  type DropdownMenuContextValue,\n  type FocusPosition,\n} from \"./dropdown-menu.context\";\nimport { focusElement } from \"./dropdown-menu.utils\";\nimport { DropdownMenuContent } from \"./dropdown-menu-content\";\nimport { DropdownMenuTrigger } from \"./dropdown-menu-trigger\";\n\nimport type {\n  DropdownMenuContentProps,\n  DropdownMenuProps,\n  DropdownMenuTriggerProps,\n} from \"./dropdown-menu.types\";\n\nconst getMenuElements = (children: ReactNode): ReactElement[] =>\n  Children.toArray(children).flatMap((child): ReactElement[] => {\n    if (\n      isValidElement<{ children?: ReactNode }>(child) &&\n      child.type === Fragment\n    ) {\n      return getMenuElements(child.props.children);\n    }\n\n    return isValidElement(child) ? [child] : [];\n  });\n\nconst DropdownMenu = ({\n  children,\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  disabled = false,\n  position = \"bottom\",\n  align = \"start\",\n  offset = 8,\n  collisionPadding = 8,\n  matchTriggerWidth = false,\n  triggerClassName,\n  contentClassName,\n}: DropdownMenuProps) => {\n  const baseId = useId();\n  const generatedTriggerId = `${baseId}-trigger`;\n  const generatedContentId = `${baseId}-content`;\n\n  const childElements = getMenuElements(children);\n  const triggers = childElements.filter(\n    (child) => child.type === DropdownMenuTrigger,\n  );\n  const contents = childElements.filter(\n    (child) => child.type === DropdownMenuContent,\n  );\n  const triggerElement = triggers[0] as\n    | ReactElement<DropdownMenuTriggerProps>\n    | undefined;\n  const contentElement = contents[0] as\n    | ReactElement<DropdownMenuContentProps>\n    | undefined;\n\n  if (\n    triggers.length !== 1 ||\n    contents.length !== 1 ||\n    !triggerElement ||\n    !contentElement\n  ) {\n    throw new Error(\n      \"DropdownMenu requires exactly one DropdownMenu.Trigger and one DropdownMenu.Content.\",\n    );\n  }\n\n  const triggerChild = triggerElement.props.asChild\n    ? Children.only(triggerElement.props.children)\n    : null;\n  const triggerChildProps = isValidElement(triggerChild)\n    ? (triggerChild.props as {\n        id?: string;\n        disabled?: boolean;\n        \"aria-disabled\"?: boolean | \"true\" | \"false\";\n      })\n    : undefined;\n  const triggerDisabled =\n    disabled ||\n    triggerElement.props.disabled === true ||\n    triggerElement.props[\"aria-disabled\"] === true ||\n    triggerElement.props[\"aria-disabled\"] === \"true\" ||\n    triggerChildProps?.disabled === true ||\n    triggerChildProps?.[\"aria-disabled\"] === true ||\n    triggerChildProps?.[\"aria-disabled\"] === \"true\";\n\n  const controlled = open !== undefined;\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const isOpen =\n    !triggerDisabled && (controlled ? (open ?? false) : internalOpen);\n\n  useEffect(() => {\n    if (triggerDisabled && !controlled && internalOpen) {\n      setInternalOpen(false);\n      onOpenChange?.(false);\n    }\n  }, [controlled, internalOpen, onOpenChange, triggerDisabled]);\n\n  const triggerRef = useRef<HTMLElement | null>(null);\n  const focusPositionRef = useRef<FocusPosition>(\"first\");\n  const keyboardFocusPendingRef = useRef(false);\n\n  const triggerId =\n    triggerElement.props.id ?? triggerChildProps?.id ?? generatedTriggerId;\n  const contentId = contentElement.props.id ?? generatedContentId;\n\n  const changeOpen = useCallback(\n    (nextOpen: boolean) => {\n      if (triggerDisabled && nextOpen) {\n        keyboardFocusPendingRef.current = false;\n        return;\n      }\n\n      if (nextOpen && !keyboardFocusPendingRef.current) {\n        focusPositionRef.current = \"first\";\n      }\n\n      keyboardFocusPendingRef.current = false;\n\n      if (nextOpen === isOpen) {\n        return;\n      }\n\n      if (!controlled) {\n        setInternalOpen(nextOpen);\n      }\n\n      onOpenChange?.(nextOpen);\n    },\n    [controlled, isOpen, onOpenChange, triggerDisabled],\n  );\n\n  const openFromKeyboard = useCallback(\n    (focusPosition: FocusPosition) => {\n      focusPositionRef.current = focusPosition;\n      keyboardFocusPendingRef.current = true;\n      changeOpen(true);\n    },\n    [changeOpen],\n  );\n\n  const close = useCallback(\n    (restoreFocus: boolean) => {\n      changeOpen(false);\n\n      if (restoreFocus) {\n        focusElement(triggerRef.current ?? undefined);\n      }\n    },\n    [changeOpen],\n  );\n\n  const context: DropdownMenuContextValue = {\n    open: isOpen,\n    disabled: triggerDisabled,\n    triggerId,\n    contentId,\n    triggerRef,\n    focusPositionRef,\n    changeOpen,\n    openFromKeyboard,\n    close,\n  };\n\n  const trigger = cloneElement(triggerElement, {\n    id: triggerId,\n    disabled: triggerDisabled,\n    className: cn(triggerElement.props.className, triggerClassName),\n  });\n\n  const content = cloneElement(contentElement, {\n    id: contentId,\n    className: cn(contentElement.props.className, contentClassName),\n  });\n\n  return (\n    <DropdownMenuContext.Provider value={context}>\n      <Popout\n        trigger={trigger as unknown as ReactElement<PopoutTriggerProps>}\n        open={isOpen}\n        onOpenChange={changeOpen}\n        position={position}\n        align={align}\n        offset={offset}\n        collisionPadding={collisionPadding}\n        matchTriggerWidth={matchTriggerWidth}\n        closeOnOutsideClick\n        closeOnEscape\n        toggleOnClick\n        contentClassName=\"puzzle-dropdown-menu__popover\"\n      >\n        {content}\n      </Popout>\n    </DropdownMenuContext.Provider>\n  );\n};\n\nexport { DropdownMenu };\n"],"mappings":"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"}

package/dist/components/overlays/dropdown-menu/dropdown-menu.types.d.cts

@@ -0,0 +1,66 @@
+import { PopoutAlignment, PopoutPosition } from "../popout/index.cjs";
+import { ButtonHTMLAttributes, CSSProperties, HTMLAttributes, MouseEvent, ReactNode, Ref } from "react";
+export type DropdownMenuPosition = PopoutPosition;
+export type DropdownMenuAlignment = PopoutAlignment;
+export type DropdownMenuItemVariant = "default" | "danger";
+export type DropdownMenuCheckedState = boolean | "indeterminate";
+export type DropdownMenuProps = {
+  children: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  disabled?: boolean;
+  position?: DropdownMenuPosition;
+  align?: DropdownMenuAlignment;
+  offset?: number;
+  collisionPadding?: number;
+  matchTriggerWidth?: boolean;
+  triggerClassName?: string;
+  contentClassName?: string;
+};
+export type DropdownMenuTriggerProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+  asChild?: boolean;
+  children: ReactNode;
+  ref?: Ref<HTMLElement>;
+};
+export type DropdownMenuContentProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  children: ReactNode;
+  maxHeight?: CSSProperties["maxHeight"];
+};
+export type DropdownMenuItemProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onSelect"> & {
+  asChild?: boolean;
+  children: ReactNode;
+  textValue?: string;
+  closeOnSelect?: boolean;
+  variant?: DropdownMenuItemVariant;
+  onSelect?: (event: MouseEvent<HTMLElement>) => void;
+};
+export type DropdownMenuGroupProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  children: ReactNode;
+};
+export type DropdownMenuLabelProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  children: ReactNode;
+};
+export type DropdownMenuSeparatorProps = HTMLAttributes<HTMLDivElement>;
+export type DropdownMenuCheckboxItemProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onSelect"> & {
+  children: ReactNode;
+  checked?: DropdownMenuCheckedState;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  closeOnSelect?: boolean;
+  textValue?: string;
+  onSelect?: (event: MouseEvent<HTMLElement>) => void;
+};
+export type DropdownMenuRadioGroupProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  children: ReactNode;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+};
+export type DropdownMenuRadioItemProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onSelect"> & {
+  children: ReactNode;
+  value: string;
+  closeOnSelect?: boolean;
+  textValue?: string;
+  onSelect?: (event: MouseEvent<HTMLElement>) => void;
+};

package/dist/components/overlays/dropdown-menu/dropdown-menu.types.d.ts

@@ -0,0 +1,66 @@
+import { PopoutAlignment, PopoutPosition } from "../popout/index.js";
+import { ButtonHTMLAttributes, CSSProperties, HTMLAttributes, MouseEvent, ReactNode, Ref } from "react";
+export type DropdownMenuPosition = PopoutPosition;
+export type DropdownMenuAlignment = PopoutAlignment;
+export type DropdownMenuItemVariant = "default" | "danger";
+export type DropdownMenuCheckedState = boolean | "indeterminate";
+export type DropdownMenuProps = {
+  children: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  disabled?: boolean;
+  position?: DropdownMenuPosition;
+  align?: DropdownMenuAlignment;
+  offset?: number;
+  collisionPadding?: number;
+  matchTriggerWidth?: boolean;
+  triggerClassName?: string;
+  contentClassName?: string;
+};
+export type DropdownMenuTriggerProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+  asChild?: boolean;
+  children: ReactNode;
+  ref?: Ref<HTMLElement>;
+};
+export type DropdownMenuContentProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  children: ReactNode;
+  maxHeight?: CSSProperties["maxHeight"];
+};
+export type DropdownMenuItemProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onSelect"> & {
+  asChild?: boolean;
+  children: ReactNode;
+  textValue?: string;
+  closeOnSelect?: boolean;
+  variant?: DropdownMenuItemVariant;
+  onSelect?: (event: MouseEvent<HTMLElement>) => void;
+};
+export type DropdownMenuGroupProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  children: ReactNode;
+};
+export type DropdownMenuLabelProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  children: ReactNode;
+};
+export type DropdownMenuSeparatorProps = HTMLAttributes<HTMLDivElement>;
+export type DropdownMenuCheckboxItemProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onSelect"> & {
+  children: ReactNode;
+  checked?: DropdownMenuCheckedState;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  closeOnSelect?: boolean;
+  textValue?: string;
+  onSelect?: (event: MouseEvent<HTMLElement>) => void;
+};
+export type DropdownMenuRadioGroupProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  children: ReactNode;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+};
+export type DropdownMenuRadioItemProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onSelect"> & {
+  children: ReactNode;
+  value: string;
+  closeOnSelect?: boolean;
+  textValue?: string;
+  onSelect?: (event: MouseEvent<HTMLElement>) => void;
+};

package/dist/components/overlays/dropdown-menu/dropdown-menu.utils.cjs

@@ -0,0 +1,44 @@
+// src/components/overlays/dropdown-menu/dropdown-menu.utils.ts
+const normalizeMenuText = (value) => value.normalize("NFKD").replace(/\p{Diacritic}/gu, "").trim().toLocaleLowerCase();
+const findNextMenuItemIndex = (items, currentIndex, direction, loop = true) => {
+	if (items.length === 0) return -1;
+	for (let step = 1; step <= items.length; step += 1) {
+		let index = currentIndex + step * direction;
+		if (loop) index = (index + items.length) % items.length;
+		else if (index < 0 || index >= items.length) return -1;
+		if (!items[index].disabled) return index;
+	}
+	return -1;
+};
+const findMenuItemIndexByText = (items, query, currentIndex = -1) => {
+	const normalizedQuery = normalizeMenuText(query);
+	if (!normalizedQuery || items.length === 0) return -1;
+	for (let step = 1; step <= items.length; step += 1) {
+		const index = (currentIndex + step + items.length) % items.length;
+		const item = items[index];
+		if (!item.disabled && normalizeMenuText(item.text ?? "").startsWith(normalizedQuery)) return index;
+	}
+	return -1;
+};
+const setRef = (ref, value) => {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
+};
+const getEnabledMenuItems = (menu) => Array.from(menu.querySelectorAll("[data-puzzle-dropdown-menu-item=\"true\"]")).filter((item) => item.getAttribute("aria-disabled") !== "true" && !("disabled" in item && Boolean(item.disabled)) && !item.hasAttribute("hidden") && !item.closest("[hidden], [inert], [aria-hidden='true']"));
+const focusElement = (element) => {
+	if (!element) return;
+	try {
+		element.focus({ preventScroll: true });
+	} catch {
+		element.focus();
+	}
+	element.scrollIntoView?.({ block: "nearest" });
+};
+exports.findMenuItemIndexByText = findMenuItemIndexByText;
+exports.findNextMenuItemIndex = findNextMenuItemIndex;
+exports.focusElement = focusElement;
+exports.getEnabledMenuItems = getEnabledMenuItems;
+exports.normalizeMenuText = normalizeMenuText;
+exports.setRef = setRef;
+
+//# sourceMappingURL=dropdown-menu.utils.cjs.map