@puzzle-ui/ui 0.0.0-stage → 0.1.0

package/dist/components/overlays/drawer/use-resize-bar.js

@@ -0,0 +1,152 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+// src/components/overlays/drawer/use-resize-bar.ts
+const KEYBOARD_STEP = 16;
+const KEYBOARD_LARGE_STEP = 64;
+const isHorizontal = (position) => position === "left" || position === "right";
+const getDirection = (position) => position === "left" || position === "top" ? 1 : -1;
+const getViewportMax = (position, margin, ownerWindow) => Math.max(margin, (isHorizontal(position) ? ownerWindow.innerWidth : ownerWindow.innerHeight) - margin);
+const useResizeBar = (position, active, { min = 100, margin = 40 } = {}) => {
+	const resizeRef = useRef(null);
+	const [size, setSize] = useState(null);
+	const [measured, setMeasured] = useState(null);
+	const [viewportMax, setViewportMax] = useState(null);
+	const measure = useCallback(() => {
+		const panel = resizeRef.current?.parentElement;
+		if (!panel) return null;
+		const rect = panel.getBoundingClientRect();
+		const value = Math.round(isHorizontal(position) ? rect.width : rect.height);
+		setMeasured(value);
+		return value;
+	}, [position]);
+	useEffect(() => {
+		if (active) setSize(null);
+	}, [active, position]);
+	useLayoutEffect(() => {
+		if (active) measure();
+	}, [
+		active,
+		size,
+		position,
+		measure
+	]);
+	useLayoutEffect(() => {
+		const ownerWindow = resizeRef.current?.ownerDocument.defaultView;
+		if (!active || !ownerWindow) return;
+		const update = () => setViewportMax(getViewportMax(position, margin, ownerWindow));
+		update();
+		ownerWindow.addEventListener("resize", update);
+		return () => ownerWindow.removeEventListener("resize", update);
+	}, [
+		active,
+		position,
+		margin
+	]);
+	useEffect(() => {
+		if (!active) return;
+		const element = resizeRef.current;
+		const ownerDocument = element?.ownerDocument;
+		const ownerWindow = ownerDocument?.defaultView;
+		if (!element || !ownerDocument || !ownerWindow) return;
+		const body = ownerDocument.body;
+		let activePointerId = null;
+		let startPointer = 0;
+		let startSize = 0;
+		let previousUserSelect = "";
+		let previousTouchAction = "";
+		const endDrag = (event) => {
+			if (activePointerId === null) return;
+			if (event && element.hasPointerCapture?.(event.pointerId)) element.releasePointerCapture(event.pointerId);
+			activePointerId = null;
+			body.style.userSelect = previousUserSelect;
+			body.style.touchAction = previousTouchAction;
+		};
+		const getPointer = (event) => isHorizontal(position) ? event.clientX : event.clientY;
+		const handlePointerDown = (event) => {
+			if (event.button !== 0 && event.pointerType === "mouse") return;
+			event.stopPropagation();
+			const panel = element.parentElement;
+			if (!panel) return;
+			const rect = panel.getBoundingClientRect();
+			activePointerId = event.pointerId;
+			startPointer = getPointer(event);
+			startSize = isHorizontal(position) ? rect.width : rect.height;
+			previousUserSelect = body.style.userSelect;
+			previousTouchAction = body.style.touchAction;
+			body.style.userSelect = "none";
+			body.style.touchAction = "none";
+			element.setPointerCapture?.(event.pointerId);
+		};
+		const handlePointerMove = (event) => {
+			if (event.pointerId !== activePointerId) return;
+			event.stopPropagation();
+			const delta = (getPointer(event) - startPointer) * getDirection(position);
+			setSize(Math.min(Math.max(0, Math.round(startSize + delta)), getViewportMax(position, margin, ownerWindow)));
+		};
+		const handlePointerEnd = (event) => {
+			if (event.pointerId !== activePointerId) return;
+			endDrag(event);
+		};
+		element.addEventListener("pointerdown", handlePointerDown);
+		element.addEventListener("pointermove", handlePointerMove);
+		element.addEventListener("pointerup", handlePointerEnd);
+		element.addEventListener("pointercancel", handlePointerEnd);
+		return () => {
+			element.removeEventListener("pointerdown", handlePointerDown);
+			element.removeEventListener("pointermove", handlePointerMove);
+			element.removeEventListener("pointerup", handlePointerEnd);
+			element.removeEventListener("pointercancel", handlePointerEnd);
+			endDrag();
+		};
+	}, [
+		position,
+		active,
+		margin
+	]);
+	const max = Math.max(min, viewportMax ?? min);
+	const handleKeyDown = (event) => {
+		const current = size ?? measured ?? measure();
+		if (current === null) return;
+		const step = event.shiftKey ? KEYBOARD_LARGE_STEP : KEYBOARD_STEP;
+		const direction = getDirection(position);
+		const horizontal = isHorizontal(position);
+		let next = null;
+		switch (event.key) {
+			case "ArrowRight":
+				next = horizontal ? current + step * direction : null;
+				break;
+			case "ArrowLeft":
+				next = horizontal ? current - step * direction : null;
+				break;
+			case "ArrowDown":
+				next = horizontal ? null : current + step * direction;
+				break;
+			case "ArrowUp":
+				next = horizontal ? null : current - step * direction;
+				break;
+			case "PageUp":
+				next = current + KEYBOARD_LARGE_STEP;
+				break;
+			case "PageDown":
+				next = current - KEYBOARD_LARGE_STEP;
+				break;
+			case "Home":
+				next = min;
+				break;
+			case "End": next = max;
+		}
+		if (next === null) return;
+		event.preventDefault();
+		setSize(Math.min(Math.max(next, min), max));
+	};
+	return {
+		size,
+		value: size ?? measured,
+		min,
+		max,
+		resizeRef,
+		handleKeyDown
+	};
+};
+export { useResizeBar };
+
+//# sourceMappingURL=use-resize-bar.js.map

package/dist/components/overlays/drawer/use-resize-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-resize-bar.js","names":[],"sources":["../../../../src/components/overlays/drawer/use-resize-bar.ts"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type KeyboardEvent,\n} from \"react\";\n\ntype ResizePosition = \"left\" | \"right\" | \"top\" | \"bottom\";\n\nconst KEYBOARD_STEP = 16;\nconst KEYBOARD_LARGE_STEP = 64;\n\nconst isHorizontal = (position: ResizePosition) =>\n  position === \"left\" || position === \"right\";\n\n// Left and top drawers grow when their bar moves away from the origin edge.\nconst getDirection = (position: ResizePosition) =>\n  position === \"left\" || position === \"top\" ? 1 : -1;\n\n// Uses the window that owns the element, which may belong to another document.\nconst getViewportMax = (\n  position: ResizePosition,\n  margin: number,\n  ownerWindow: Window,\n) =>\n  Math.max(\n    margin,\n    (isHorizontal(position)\n      ? ownerWindow.innerWidth\n      : ownerWindow.innerHeight) - margin,\n  );\n\ntype UseResizeBarOptions = {\n  /** Smallest size reachable with the keyboard, in px. */\n  min?: number;\n  /** Space kept free next to the drawer, in px. */\n  margin?: number;\n};\n\nconst useResizeBar = (\n  position: ResizePosition,\n  active: boolean,\n  { min = 100, margin = 40 }: UseResizeBarOptions = {},\n) => {\n  const resizeRef = useRef<HTMLDivElement | null>(null);\n  const [size, setSize] = useState<number | null>(null);\n  const [measured, setMeasured] = useState<number | null>(null);\n  const [viewportMax, setViewportMax] = useState<number | null>(null);\n\n  const measure = useCallback(() => {\n    const panel = resizeRef.current?.parentElement;\n\n    if (!panel) {\n      return null;\n    }\n\n    const rect = panel.getBoundingClientRect();\n    const value = Math.round(isHorizontal(position) ? rect.width : rect.height);\n\n    setMeasured(value);\n\n    return value;\n  }, [position]);\n\n  useEffect(() => {\n    if (active) {\n      setSize(null);\n    }\n  }, [active, position]);\n\n  useLayoutEffect(() => {\n    if (active) {\n      measure();\n    }\n  }, [active, size, position, measure]);\n\n  useLayoutEffect(() => {\n    const ownerWindow = resizeRef.current?.ownerDocument.defaultView;\n\n    if (!active || !ownerWindow) return;\n\n    const update = () =>\n      setViewportMax(getViewportMax(position, margin, ownerWindow));\n\n    update();\n    ownerWindow.addEventListener(\"resize\", update);\n\n    return () => ownerWindow.removeEventListener(\"resize\", update);\n  }, [active, position, margin]);\n\n  useEffect(() => {\n    if (!active) return;\n\n    const element = resizeRef.current;\n    const ownerDocument = element?.ownerDocument;\n    const ownerWindow = ownerDocument?.defaultView;\n\n    if (!element || !ownerDocument || !ownerWindow) return;\n\n    const body = ownerDocument.body;\n    let activePointerId: number | null = null;\n    let startPointer = 0;\n    let startSize = 0;\n    let previousUserSelect = \"\";\n    let previousTouchAction = \"\";\n\n    const endDrag = (event?: PointerEvent) => {\n      if (activePointerId === null) return;\n\n      if (event && element.hasPointerCapture?.(event.pointerId)) {\n        element.releasePointerCapture(event.pointerId);\n      }\n\n      activePointerId = null;\n      body.style.userSelect = previousUserSelect;\n      body.style.touchAction = previousTouchAction;\n    };\n\n    const getPointer = (event: PointerEvent) =>\n      isHorizontal(position) ? event.clientX : event.clientY;\n\n    const handlePointerDown = (event: PointerEvent) => {\n      if (event.button !== 0 && event.pointerType === \"mouse\") return;\n\n      event.stopPropagation();\n\n      const panel = element.parentElement;\n\n      if (!panel) return;\n\n      const rect = panel.getBoundingClientRect();\n\n      activePointerId = event.pointerId;\n      startPointer = getPointer(event);\n      startSize = isHorizontal(position) ? rect.width : rect.height;\n\n      previousUserSelect = body.style.userSelect;\n      previousTouchAction = body.style.touchAction;\n      body.style.userSelect = \"none\";\n      body.style.touchAction = \"none\";\n\n      element.setPointerCapture?.(event.pointerId);\n    };\n\n    const handlePointerMove = (event: PointerEvent) => {\n      if (event.pointerId !== activePointerId) return;\n\n      event.stopPropagation();\n\n      const delta = (getPointer(event) - startPointer) * getDirection(position);\n\n      setSize(\n        Math.min(\n          Math.max(0, Math.round(startSize + delta)),\n          getViewportMax(position, margin, ownerWindow),\n        ),\n      );\n    };\n\n    const handlePointerEnd = (event: PointerEvent) => {\n      if (event.pointerId !== activePointerId) return;\n\n      endDrag(event);\n    };\n\n    element.addEventListener(\"pointerdown\", handlePointerDown);\n    element.addEventListener(\"pointermove\", handlePointerMove);\n    element.addEventListener(\"pointerup\", handlePointerEnd);\n    element.addEventListener(\"pointercancel\", handlePointerEnd);\n\n    return () => {\n      element.removeEventListener(\"pointerdown\", handlePointerDown);\n      element.removeEventListener(\"pointermove\", handlePointerMove);\n      element.removeEventListener(\"pointerup\", handlePointerEnd);\n      element.removeEventListener(\"pointercancel\", handlePointerEnd);\n\n      endDrag();\n    };\n  }, [position, active, margin]);\n\n  const max = Math.max(min, viewportMax ?? min);\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n    const current = size ?? measured ?? measure();\n\n    if (current === null) return;\n\n    const step = event.shiftKey ? KEYBOARD_LARGE_STEP : KEYBOARD_STEP;\n    const direction = getDirection(position);\n    const horizontal = isHorizontal(position);\n    let next: number | null = null;\n\n    switch (event.key) {\n      case \"ArrowRight\":\n        next = horizontal ? current + step * direction : null;\n        break;\n      case \"ArrowLeft\":\n        next = horizontal ? current - step * direction : null;\n        break;\n      case \"ArrowDown\":\n        next = horizontal ? null : current + step * direction;\n        break;\n      case \"ArrowUp\":\n        next = horizontal ? null : current - step * direction;\n        break;\n      case \"PageUp\":\n        next = current + KEYBOARD_LARGE_STEP;\n        break;\n      case \"PageDown\":\n        next = current - KEYBOARD_LARGE_STEP;\n        break;\n      case \"Home\":\n        next = min;\n        break;\n      case \"End\":\n        next = max;\n        break;\n    }\n\n    if (next === null) return;\n\n    event.preventDefault();\n    setSize(Math.min(Math.max(next, min), max));\n  };\n\n  return {\n    size,\n    value: size ?? measured,\n    min,\n    max,\n    resizeRef,\n    handleKeyDown,\n  };\n};\n\nexport { useResizeBar };\n"],"mappings":"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"}

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

@@ -0,0 +1,120 @@
+"use client";
+const require_dropdown_menu_context = require("./dropdown-menu.context.cjs");
+const require_dropdown_menu_utils = require("./dropdown-menu.utils.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-content.tsx
+const DropdownMenuContent = ({ children, id, className, style, maxHeight = "min(24rem, calc(100dvh - 2rem))", onKeyDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...contentProps }) => {
+	const context = require_dropdown_menu_context.useDropdownMenuContext();
+	const menuRef = (0, react.useRef)(null);
+	const typeaheadRef = (0, react.useRef)("");
+	const typeaheadTimerRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		typeaheadRef.current = "";
+		if (typeaheadTimerRef.current !== null) {
+			clearTimeout(typeaheadTimerRef.current);
+			typeaheadTimerRef.current = null;
+		}
+		if (!context.open) return;
+		const menu = menuRef.current;
+		if (!menu) return;
+		const items = require_dropdown_menu_utils.getEnabledMenuItems(menu);
+		const target = context.focusPositionRef.current === "last" ? items[items.length - 1] : items[0];
+		require_dropdown_menu_utils.focusElement(target ?? menu);
+	}, [context.open, context.focusPositionRef]);
+	(0, react.useEffect)(() => () => {
+		if (typeaheadTimerRef.current !== null) clearTimeout(typeaheadTimerRef.current);
+	}, []);
+	const focusIndex = (items, index) => {
+		if (index >= 0 && index < items.length) require_dropdown_menu_utils.focusElement(items[index]);
+	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		const menu = menuRef.current;
+		if (!menu) return;
+		if (event.key === "Tab") {
+			const ownerDocument = event.currentTarget.ownerDocument;
+			const trigger = context.triggerRef.current;
+			const tabbableSelector = [
+				"a[href]",
+				"area[href]",
+				"button:not([disabled])",
+				"input:not([disabled]):not([type='hidden'])",
+				"select:not([disabled])",
+				"textarea:not([disabled])",
+				"iframe",
+				"object",
+				"embed",
+				"summary",
+				"audio[controls]",
+				"video[controls]",
+				"[contenteditable='true']",
+				"[tabindex]:not([tabindex='-1'])"
+			].join(",");
+			const tabbableElements = Array.from(ownerDocument.querySelectorAll(tabbableSelector)).filter((element) => {
+				if (element === menu || menu.contains(element) || element.hidden || element.tabIndex < 0 || element.getAttribute("aria-disabled") === "true" || element.closest("[hidden], [inert], [aria-hidden='true']")) return false;
+				const computedStyle = ownerDocument.defaultView?.getComputedStyle(element);
+				return computedStyle?.display !== "none" && computedStyle?.visibility !== "hidden";
+			});
+			const triggerIndex = trigger ? tabbableElements.indexOf(trigger) : -1;
+			const targetIndex = triggerIndex + (event.shiftKey ? -1 : 1);
+			const target = triggerIndex >= 0 && tabbableElements.length > 0 ? tabbableElements[(targetIndex + tabbableElements.length) % tabbableElements.length] : void 0;
+			context.changeOpen(false);
+			if (target) {
+				event.preventDefault();
+				require_dropdown_menu_utils.focusElement(target);
+			}
+			return;
+		}
+		const items = require_dropdown_menu_utils.getEnabledMenuItems(menu);
+		const activeIndex = items.indexOf(menu.ownerDocument.activeElement);
+		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+			event.preventDefault();
+			const direction = event.key === "ArrowDown" ? 1 : -1;
+			const startIndex = activeIndex < 0 ? direction === 1 ? -1 : 0 : activeIndex;
+			const nextIndex = require_dropdown_menu_utils.findNextMenuItemIndex(items.map(() => ({ disabled: false })), startIndex, direction);
+			focusIndex(items, nextIndex);
+			return;
+		}
+		if (event.key === "Home" || event.key === "End") {
+			event.preventDefault();
+			focusIndex(items, event.key === "Home" ? 0 : items.length - 1);
+			return;
+		}
+		if (event.key.length !== 1 || event.key === " " || event.ctrlKey || event.metaKey || event.altKey) return;
+		event.preventDefault();
+		const nextBuffer = `${typeaheadRef.current}${event.key}`;
+		const query = [...nextBuffer].every((character) => character.toLocaleLowerCase() === nextBuffer[0].toLocaleLowerCase()) ? event.key : nextBuffer;
+		typeaheadRef.current = query;
+		if (typeaheadTimerRef.current !== null) clearTimeout(typeaheadTimerRef.current);
+		typeaheadTimerRef.current = setTimeout(() => {
+			typeaheadRef.current = "";
+			typeaheadTimerRef.current = null;
+		}, 500);
+		const nextIndex = require_dropdown_menu_utils.findMenuItemIndexByText(items.map((item) => ({ text: item.dataset.textValue ?? item.querySelector(".puzzle-dropdown-menu__item-label")?.textContent ?? item.textContent ?? "" })), query, activeIndex);
+		focusIndex(items, nextIndex);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...contentProps,
+		ref: menuRef,
+		id: id ?? context.contentId,
+		className: (0, _puzzle_ui_core.cn)("puzzle-dropdown-menu__content", className),
+		role: "menu",
+		"aria-orientation": "vertical",
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy ?? context.triggerId,
+		tabIndex: -1,
+		"data-state": context.open ? "open" : "closed",
+		style: {
+			...style,
+			maxHeight
+		},
+		onKeyDown: handleKeyDown,
+		children
+	});
+};
+exports.DropdownMenuContent = DropdownMenuContent;
+
+//# sourceMappingURL=dropdown-menu-content.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu-content.cjs","names":["useDropdownMenuContext","useRef","getEnabledMenuItems","findNextMenuItemIndex","findMenuItemIndexByText","cn"],"sources":["../../../../src/components/overlays/dropdown-menu/dropdown-menu-content.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, type KeyboardEvent } from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport { useDropdownMenuContext } from \"./dropdown-menu.context\";\nimport {\n  findMenuItemIndexByText,\n  findNextMenuItemIndex,\n  focusElement,\n  getEnabledMenuItems,\n} from \"./dropdown-menu.utils\";\n\nimport type { DropdownMenuContentProps } from \"./dropdown-menu.types\";\n\nconst DropdownMenuContent = ({\n  children,\n  id,\n  className,\n  style,\n  maxHeight = \"min(24rem, calc(100dvh - 2rem))\",\n  onKeyDown,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  ...contentProps\n}: DropdownMenuContentProps) => {\n  const context = useDropdownMenuContext();\n  const menuRef = useRef<HTMLDivElement | null>(null);\n  const typeaheadRef = useRef(\"\");\n  const typeaheadTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    typeaheadRef.current = \"\";\n\n    if (typeaheadTimerRef.current !== null) {\n      clearTimeout(typeaheadTimerRef.current);\n      typeaheadTimerRef.current = null;\n    }\n\n    if (!context.open) {\n      return;\n    }\n\n    const menu = menuRef.current;\n\n    if (!menu) {\n      return;\n    }\n\n    const items = getEnabledMenuItems(menu);\n    const target =\n      context.focusPositionRef.current === \"last\"\n        ? items[items.length - 1]\n        : items[0];\n\n    focusElement(target ?? menu);\n  }, [context.open, context.focusPositionRef]);\n\n  useEffect(\n    () => () => {\n      if (typeaheadTimerRef.current !== null) {\n        clearTimeout(typeaheadTimerRef.current);\n      }\n    },\n    [],\n  );\n\n  const focusIndex = (items: HTMLElement[], index: number) => {\n    if (index >= 0 && index < items.length) {\n      focusElement(items[index]);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    const menu = menuRef.current;\n\n    if (!menu) {\n      return;\n    }\n\n    if (event.key === \"Tab\") {\n      const ownerDocument = event.currentTarget.ownerDocument;\n      const trigger = context.triggerRef.current;\n      const tabbableSelector = [\n        \"a[href]\",\n        \"area[href]\",\n        \"button:not([disabled])\",\n        \"input:not([disabled]):not([type='hidden'])\",\n        \"select:not([disabled])\",\n        \"textarea:not([disabled])\",\n        \"iframe\",\n        \"object\",\n        \"embed\",\n        \"summary\",\n        \"audio[controls]\",\n        \"video[controls]\",\n        \"[contenteditable='true']\",\n        \"[tabindex]:not([tabindex='-1'])\",\n      ].join(\",\");\n      const tabbableElements = Array.from(\n        ownerDocument.querySelectorAll<HTMLElement>(tabbableSelector),\n      ).filter((element) => {\n        if (\n          element === menu ||\n          menu.contains(element) ||\n          element.hidden ||\n          element.tabIndex < 0 ||\n          element.getAttribute(\"aria-disabled\") === \"true\" ||\n          element.closest(\"[hidden], [inert], [aria-hidden='true']\")\n        ) {\n          return false;\n        }\n\n        const computedStyle = ownerDocument.defaultView?.getComputedStyle(\n          element,\n        );\n\n        return (\n          computedStyle?.display !== \"none\" &&\n          computedStyle?.visibility !== \"hidden\"\n        );\n      });\n      const triggerIndex = trigger ? tabbableElements.indexOf(trigger) : -1;\n      const direction = event.shiftKey ? -1 : 1;\n      const targetIndex = triggerIndex + direction;\n      const target =\n        triggerIndex >= 0 && tabbableElements.length > 0\n          ? tabbableElements[\n              (targetIndex + tabbableElements.length) % tabbableElements.length\n            ]\n          : undefined;\n\n      context.changeOpen(false);\n\n      if (target) {\n        event.preventDefault();\n        focusElement(target);\n      }\n\n      return;\n    }\n\n    const items = getEnabledMenuItems(menu);\n    const activeIndex = items.indexOf(\n      menu.ownerDocument.activeElement as HTMLElement,\n    );\n\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n      event.preventDefault();\n      const direction = event.key === \"ArrowDown\" ? 1 : -1;\n      const startIndex =\n        activeIndex < 0 ? (direction === 1 ? -1 : 0) : activeIndex;\n      const nextIndex = findNextMenuItemIndex(\n        items.map(() => ({ disabled: false })),\n        startIndex,\n        direction,\n      );\n      focusIndex(items, nextIndex);\n      return;\n    }\n\n    if (event.key === \"Home\" || event.key === \"End\") {\n      event.preventDefault();\n      focusIndex(items, event.key === \"Home\" ? 0 : items.length - 1);\n      return;\n    }\n\n    if (\n      event.key.length !== 1 ||\n      event.key === \" \" ||\n      event.ctrlKey ||\n      event.metaKey ||\n      event.altKey\n    ) {\n      return;\n    }\n\n    event.preventDefault();\n\n    const nextBuffer = `${typeaheadRef.current}${event.key}`;\n    const repeatedCharacter = [...nextBuffer].every(\n      (character) =>\n        character.toLocaleLowerCase() === nextBuffer[0].toLocaleLowerCase(),\n    );\n    const query = repeatedCharacter ? event.key : nextBuffer;\n    typeaheadRef.current = query;\n\n    if (typeaheadTimerRef.current !== null) {\n      clearTimeout(typeaheadTimerRef.current);\n    }\n\n    typeaheadTimerRef.current = setTimeout(() => {\n      typeaheadRef.current = \"\";\n      typeaheadTimerRef.current = null;\n    }, 500);\n\n    const nextIndex = findMenuItemIndexByText(\n      items.map((item) => ({\n        text:\n          item.dataset.textValue ??\n          item.querySelector(\".puzzle-dropdown-menu__item-label\")?.textContent ??\n          item.textContent ??\n          \"\",\n      })),\n      query,\n      activeIndex,\n    );\n\n    focusIndex(items, nextIndex);\n  };\n\n  return (\n    <div\n      {...contentProps}\n      ref={menuRef}\n      id={id ?? context.contentId}\n      className={cn(\"puzzle-dropdown-menu__content\", className)}\n      role=\"menu\"\n      aria-orientation=\"vertical\"\n      aria-label={ariaLabel}\n      aria-labelledby={\n        ariaLabel ? undefined : (ariaLabelledBy ?? context.triggerId)\n      }\n      tabIndex={-1}\n      data-state={context.open ? \"open\" : \"closed\"}\n      style={{ ...style, maxHeight }}\n      onKeyDown={handleKeyDown}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport { DropdownMenuContent };\n"],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+import { DropdownMenuContentProps } from "./dropdown-menu.types.cjs";
+declare const DropdownMenuContent: ({ children, id, className, style, maxHeight, onKeyDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...contentProps }: DropdownMenuContentProps) => import("react").JSX.Element;
+export { DropdownMenuContent };

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

@@ -0,0 +1,3 @@
+import { DropdownMenuContentProps } from "./dropdown-menu.types.js";
+declare const DropdownMenuContent: ({ children, id, className, style, maxHeight, onKeyDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...contentProps }: DropdownMenuContentProps) => import("react").JSX.Element;
+export { DropdownMenuContent };

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

@@ -0,0 +1,120 @@
+"use client";
+import { useDropdownMenuContext } from "./dropdown-menu.context.js";
+import { findMenuItemIndexByText, findNextMenuItemIndex, focusElement, getEnabledMenuItems } from "./dropdown-menu.utils.js";
+import { cn } from "@puzzle-ui/core";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/components/overlays/dropdown-menu/dropdown-menu-content.tsx
+const DropdownMenuContent = ({ children, id, className, style, maxHeight = "min(24rem, calc(100dvh - 2rem))", onKeyDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...contentProps }) => {
+	const context = useDropdownMenuContext();
+	const menuRef = useRef(null);
+	const typeaheadRef = useRef("");
+	const typeaheadTimerRef = useRef(null);
+	useEffect(() => {
+		typeaheadRef.current = "";
+		if (typeaheadTimerRef.current !== null) {
+			clearTimeout(typeaheadTimerRef.current);
+			typeaheadTimerRef.current = null;
+		}
+		if (!context.open) return;
+		const menu = menuRef.current;
+		if (!menu) return;
+		const items = getEnabledMenuItems(menu);
+		const target = context.focusPositionRef.current === "last" ? items[items.length - 1] : items[0];
+		focusElement(target ?? menu);
+	}, [context.open, context.focusPositionRef]);
+	useEffect(() => () => {
+		if (typeaheadTimerRef.current !== null) clearTimeout(typeaheadTimerRef.current);
+	}, []);
+	const focusIndex = (items, index) => {
+		if (index >= 0 && index < items.length) focusElement(items[index]);
+	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		const menu = menuRef.current;
+		if (!menu) return;
+		if (event.key === "Tab") {
+			const ownerDocument = event.currentTarget.ownerDocument;
+			const trigger = context.triggerRef.current;
+			const tabbableSelector = [
+				"a[href]",
+				"area[href]",
+				"button:not([disabled])",
+				"input:not([disabled]):not([type='hidden'])",
+				"select:not([disabled])",
+				"textarea:not([disabled])",
+				"iframe",
+				"object",
+				"embed",
+				"summary",
+				"audio[controls]",
+				"video[controls]",
+				"[contenteditable='true']",
+				"[tabindex]:not([tabindex='-1'])"
+			].join(",");
+			const tabbableElements = Array.from(ownerDocument.querySelectorAll(tabbableSelector)).filter((element) => {
+				if (element === menu || menu.contains(element) || element.hidden || element.tabIndex < 0 || element.getAttribute("aria-disabled") === "true" || element.closest("[hidden], [inert], [aria-hidden='true']")) return false;
+				const computedStyle = ownerDocument.defaultView?.getComputedStyle(element);
+				return computedStyle?.display !== "none" && computedStyle?.visibility !== "hidden";
+			});
+			const triggerIndex = trigger ? tabbableElements.indexOf(trigger) : -1;
+			const targetIndex = triggerIndex + (event.shiftKey ? -1 : 1);
+			const target = triggerIndex >= 0 && tabbableElements.length > 0 ? tabbableElements[(targetIndex + tabbableElements.length) % tabbableElements.length] : void 0;
+			context.changeOpen(false);
+			if (target) {
+				event.preventDefault();
+				focusElement(target);
+			}
+			return;
+		}
+		const items = getEnabledMenuItems(menu);
+		const activeIndex = items.indexOf(menu.ownerDocument.activeElement);
+		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+			event.preventDefault();
+			const direction = event.key === "ArrowDown" ? 1 : -1;
+			const startIndex = activeIndex < 0 ? direction === 1 ? -1 : 0 : activeIndex;
+			const nextIndex = findNextMenuItemIndex(items.map(() => ({ disabled: false })), startIndex, direction);
+			focusIndex(items, nextIndex);
+			return;
+		}
+		if (event.key === "Home" || event.key === "End") {
+			event.preventDefault();
+			focusIndex(items, event.key === "Home" ? 0 : items.length - 1);
+			return;
+		}
+		if (event.key.length !== 1 || event.key === " " || event.ctrlKey || event.metaKey || event.altKey) return;
+		event.preventDefault();
+		const nextBuffer = `${typeaheadRef.current}${event.key}`;
+		const query = [...nextBuffer].every((character) => character.toLocaleLowerCase() === nextBuffer[0].toLocaleLowerCase()) ? event.key : nextBuffer;
+		typeaheadRef.current = query;
+		if (typeaheadTimerRef.current !== null) clearTimeout(typeaheadTimerRef.current);
+		typeaheadTimerRef.current = setTimeout(() => {
+			typeaheadRef.current = "";
+			typeaheadTimerRef.current = null;
+		}, 500);
+		const nextIndex = findMenuItemIndexByText(items.map((item) => ({ text: item.dataset.textValue ?? item.querySelector(".puzzle-dropdown-menu__item-label")?.textContent ?? item.textContent ?? "" })), query, activeIndex);
+		focusIndex(items, nextIndex);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...contentProps,
+		ref: menuRef,
+		id: id ?? context.contentId,
+		className: cn("puzzle-dropdown-menu__content", className),
+		role: "menu",
+		"aria-orientation": "vertical",
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy ?? context.triggerId,
+		tabIndex: -1,
+		"data-state": context.open ? "open" : "closed",
+		style: {
+			...style,
+			maxHeight
+		},
+		onKeyDown: handleKeyDown,
+		children
+	});
+};
+export { DropdownMenuContent };
+
+//# sourceMappingURL=dropdown-menu-content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu-content.js","names":[],"sources":["../../../../src/components/overlays/dropdown-menu/dropdown-menu-content.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, type KeyboardEvent } from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport { useDropdownMenuContext } from \"./dropdown-menu.context\";\nimport {\n  findMenuItemIndexByText,\n  findNextMenuItemIndex,\n  focusElement,\n  getEnabledMenuItems,\n} from \"./dropdown-menu.utils\";\n\nimport type { DropdownMenuContentProps } from \"./dropdown-menu.types\";\n\nconst DropdownMenuContent = ({\n  children,\n  id,\n  className,\n  style,\n  maxHeight = \"min(24rem, calc(100dvh - 2rem))\",\n  onKeyDown,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  ...contentProps\n}: DropdownMenuContentProps) => {\n  const context = useDropdownMenuContext();\n  const menuRef = useRef<HTMLDivElement | null>(null);\n  const typeaheadRef = useRef(\"\");\n  const typeaheadTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    typeaheadRef.current = \"\";\n\n    if (typeaheadTimerRef.current !== null) {\n      clearTimeout(typeaheadTimerRef.current);\n      typeaheadTimerRef.current = null;\n    }\n\n    if (!context.open) {\n      return;\n    }\n\n    const menu = menuRef.current;\n\n    if (!menu) {\n      return;\n    }\n\n    const items = getEnabledMenuItems(menu);\n    const target =\n      context.focusPositionRef.current === \"last\"\n        ? items[items.length - 1]\n        : items[0];\n\n    focusElement(target ?? menu);\n  }, [context.open, context.focusPositionRef]);\n\n  useEffect(\n    () => () => {\n      if (typeaheadTimerRef.current !== null) {\n        clearTimeout(typeaheadTimerRef.current);\n      }\n    },\n    [],\n  );\n\n  const focusIndex = (items: HTMLElement[], index: number) => {\n    if (index >= 0 && index < items.length) {\n      focusElement(items[index]);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    const menu = menuRef.current;\n\n    if (!menu) {\n      return;\n    }\n\n    if (event.key === \"Tab\") {\n      const ownerDocument = event.currentTarget.ownerDocument;\n      const trigger = context.triggerRef.current;\n      const tabbableSelector = [\n        \"a[href]\",\n        \"area[href]\",\n        \"button:not([disabled])\",\n        \"input:not([disabled]):not([type='hidden'])\",\n        \"select:not([disabled])\",\n        \"textarea:not([disabled])\",\n        \"iframe\",\n        \"object\",\n        \"embed\",\n        \"summary\",\n        \"audio[controls]\",\n        \"video[controls]\",\n        \"[contenteditable='true']\",\n        \"[tabindex]:not([tabindex='-1'])\",\n      ].join(\",\");\n      const tabbableElements = Array.from(\n        ownerDocument.querySelectorAll<HTMLElement>(tabbableSelector),\n      ).filter((element) => {\n        if (\n          element === menu ||\n          menu.contains(element) ||\n          element.hidden ||\n          element.tabIndex < 0 ||\n          element.getAttribute(\"aria-disabled\") === \"true\" ||\n          element.closest(\"[hidden], [inert], [aria-hidden='true']\")\n        ) {\n          return false;\n        }\n\n        const computedStyle = ownerDocument.defaultView?.getComputedStyle(\n          element,\n        );\n\n        return (\n          computedStyle?.display !== \"none\" &&\n          computedStyle?.visibility !== \"hidden\"\n        );\n      });\n      const triggerIndex = trigger ? tabbableElements.indexOf(trigger) : -1;\n      const direction = event.shiftKey ? -1 : 1;\n      const targetIndex = triggerIndex + direction;\n      const target =\n        triggerIndex >= 0 && tabbableElements.length > 0\n          ? tabbableElements[\n              (targetIndex + tabbableElements.length) % tabbableElements.length\n            ]\n          : undefined;\n\n      context.changeOpen(false);\n\n      if (target) {\n        event.preventDefault();\n        focusElement(target);\n      }\n\n      return;\n    }\n\n    const items = getEnabledMenuItems(menu);\n    const activeIndex = items.indexOf(\n      menu.ownerDocument.activeElement as HTMLElement,\n    );\n\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n      event.preventDefault();\n      const direction = event.key === \"ArrowDown\" ? 1 : -1;\n      const startIndex =\n        activeIndex < 0 ? (direction === 1 ? -1 : 0) : activeIndex;\n      const nextIndex = findNextMenuItemIndex(\n        items.map(() => ({ disabled: false })),\n        startIndex,\n        direction,\n      );\n      focusIndex(items, nextIndex);\n      return;\n    }\n\n    if (event.key === \"Home\" || event.key === \"End\") {\n      event.preventDefault();\n      focusIndex(items, event.key === \"Home\" ? 0 : items.length - 1);\n      return;\n    }\n\n    if (\n      event.key.length !== 1 ||\n      event.key === \" \" ||\n      event.ctrlKey ||\n      event.metaKey ||\n      event.altKey\n    ) {\n      return;\n    }\n\n    event.preventDefault();\n\n    const nextBuffer = `${typeaheadRef.current}${event.key}`;\n    const repeatedCharacter = [...nextBuffer].every(\n      (character) =>\n        character.toLocaleLowerCase() === nextBuffer[0].toLocaleLowerCase(),\n    );\n    const query = repeatedCharacter ? event.key : nextBuffer;\n    typeaheadRef.current = query;\n\n    if (typeaheadTimerRef.current !== null) {\n      clearTimeout(typeaheadTimerRef.current);\n    }\n\n    typeaheadTimerRef.current = setTimeout(() => {\n      typeaheadRef.current = \"\";\n      typeaheadTimerRef.current = null;\n    }, 500);\n\n    const nextIndex = findMenuItemIndexByText(\n      items.map((item) => ({\n        text:\n          item.dataset.textValue ??\n          item.querySelector(\".puzzle-dropdown-menu__item-label\")?.textContent ??\n          item.textContent ??\n          \"\",\n      })),\n      query,\n      activeIndex,\n    );\n\n    focusIndex(items, nextIndex);\n  };\n\n  return (\n    <div\n      {...contentProps}\n      ref={menuRef}\n      id={id ?? context.contentId}\n      className={cn(\"puzzle-dropdown-menu__content\", className)}\n      role=\"menu\"\n      aria-orientation=\"vertical\"\n      aria-label={ariaLabel}\n      aria-labelledby={\n        ariaLabel ? undefined : (ariaLabelledBy ?? context.triggerId)\n      }\n      tabIndex={-1}\n      data-state={context.open ? \"open\" : \"closed\"}\n      style={{ ...style, maxHeight }}\n      onKeyDown={handleKeyDown}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport { DropdownMenuContent };\n"],"mappings":"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"}

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

@@ -0,0 +1,136 @@
+"use client";
+const require_dropdown_menu_context = require("./dropdown-menu.context.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-items.tsx
+const DropdownMenuItem = ({ asChild = false, children, className, disabled = false, "aria-disabled": ariaDisabled, textValue, closeOnSelect = true, variant = "default", onClick, onKeyDown, onSelect, ...itemProps }) => {
+	const context = require_dropdown_menu_context.useDropdownMenuContext();
+	const itemDisabled = disabled || ariaDisabled === true || ariaDisabled === "true";
+	const handleClick = (event) => {
+		if (itemDisabled) {
+			event.preventDefault();
+			event.stopPropagation();
+			return;
+		}
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		onSelect?.(event);
+		if (!event.defaultPrevented && closeOnSelect) context.close(true);
+	};
+	const classes = (0, _puzzle_ui_core.cn)("puzzle-dropdown-menu__item", variant === "danger" && "puzzle-dropdown-menu__item--danger", className);
+	if (asChild) {
+		const child = react.Children.only(children);
+		if (!(0, react.isValidElement)(child) || child.type === react.Fragment) throw new Error("DropdownMenu.Item with asChild expects one non-Fragment element.");
+		const childProps = child.props;
+		const childDisabled = itemDisabled || childProps.disabled === true || childProps["aria-disabled"] === true || childProps["aria-disabled"] === "true";
+		return (0, react.cloneElement)(child, {
+			...itemProps,
+			role: "menuitem",
+			tabIndex: -1,
+			"aria-disabled": childDisabled || void 0,
+			disabled: child.type === "button" ? childDisabled : void 0,
+			...child.type === "button" ? { type: itemProps.type ?? childProps.type ?? "button" } : {},
+			"data-puzzle-dropdown-menu-item": "true",
+			"data-text-value": textValue,
+			className: (0, _puzzle_ui_core.cn)(classes, childProps.className),
+			onClick: (event) => {
+				if (childDisabled) {
+					event.preventDefault();
+					event.stopPropagation();
+					return;
+				}
+				childProps.onClick?.(event);
+				if (!event.defaultPrevented) handleClick(event);
+			},
+			onKeyDown: (event) => {
+				childProps.onKeyDown?.(event);
+				if (!event.defaultPrevented) onKeyDown?.(event);
+				if (event.defaultPrevented || childDisabled || event.key !== " ") return;
+				event.preventDefault();
+				event.currentTarget.click();
+			}
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		...itemProps,
+		type: "button",
+		className: classes,
+		role: "menuitem",
+		tabIndex: -1,
+		disabled: itemDisabled,
+		"aria-disabled": itemDisabled || void 0,
+		"data-puzzle-dropdown-menu-item": "true",
+		"data-text-value": textValue,
+		onClick: handleClick,
+		children
+	});
+};
+const DropdownMenuGroup = ({ children, className, "aria-label": ariaLabel, ...groupProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	...groupProps,
+	className: (0, _puzzle_ui_core.cn)("puzzle-dropdown-menu__group", className),
+	role: "group",
+	"aria-label": ariaLabel,
+	children
+});
+const DropdownMenuLabel = ({ children, className, ...labelProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	...labelProps,
+	className: (0, _puzzle_ui_core.cn)("puzzle-dropdown-menu__label", className),
+	children
+});
+const DropdownMenuSeparator = ({ className, ...separatorProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	...separatorProps,
+	className: (0, _puzzle_ui_core.cn)("puzzle-dropdown-menu__separator", className),
+	role: "separator",
+	"aria-orientation": "horizontal"
+});
+const DropdownMenuCheckboxItem = ({ children, checked, defaultChecked = false, onCheckedChange, closeOnSelect = false, textValue, className, disabled = false, "aria-disabled": ariaDisabled, onClick, onSelect, ...itemProps }) => {
+	const context = require_dropdown_menu_context.useDropdownMenuContext();
+	const itemDisabled = disabled || ariaDisabled === true || ariaDisabled === "true";
+	const controlled = checked !== void 0;
+	const [internalChecked, setInternalChecked] = (0, react.useState)(defaultChecked);
+	const resolvedChecked = checked ?? internalChecked;
+	const handleClick = (event) => {
+		if (itemDisabled) {
+			event.preventDefault();
+			return;
+		}
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		onSelect?.(event);
+		if (event.defaultPrevented) return;
+		const nextChecked = resolvedChecked !== true;
+		if (!controlled) setInternalChecked(nextChecked);
+		onCheckedChange?.(nextChecked);
+		if (closeOnSelect) context.close(true);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		...itemProps,
+		type: "button",
+		className: (0, _puzzle_ui_core.cn)("puzzle-dropdown-menu__item", className),
+		role: "menuitemcheckbox",
+		tabIndex: -1,
+		disabled: itemDisabled,
+		"aria-disabled": itemDisabled || void 0,
+		"aria-checked": resolvedChecked === "indeterminate" ? "mixed" : resolvedChecked,
+		"data-state": resolvedChecked === "indeterminate" ? "indeterminate" : resolvedChecked ? "checked" : "unchecked",
+		"data-puzzle-dropdown-menu-item": "true",
+		"data-text-value": textValue,
+		onClick: handleClick,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "puzzle-dropdown-menu__indicator",
+			"aria-hidden": "true",
+			children: resolvedChecked === "indeterminate" ? "−" : resolvedChecked ? "✓" : ""
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "puzzle-dropdown-menu__item-label",
+			children
+		})]
+	});
+};
+exports.DropdownMenuCheckboxItem = DropdownMenuCheckboxItem;
+exports.DropdownMenuGroup = DropdownMenuGroup;
+exports.DropdownMenuItem = DropdownMenuItem;
+exports.DropdownMenuLabel = DropdownMenuLabel;
+exports.DropdownMenuSeparator = DropdownMenuSeparator;
+
+//# sourceMappingURL=dropdown-menu-items.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu-items.cjs","names":["useDropdownMenuContext","cn","Children","isValidElement","Fragment","cloneElement","useState"],"sources":["../../../../src/components/overlays/dropdown-menu/dropdown-menu-items.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Children,\n  cloneElement,\n  Fragment,\n  isValidElement,\n  useState,\n  type ButtonHTMLAttributes,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactElement,\n} from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport { useDropdownMenuContext } from \"./dropdown-menu.context\";\n\nimport type {\n  DropdownMenuCheckboxItemProps,\n  DropdownMenuGroupProps,\n  DropdownMenuItemProps,\n  DropdownMenuLabelProps,\n  DropdownMenuSeparatorProps,\n} from \"./dropdown-menu.types\";\n\nconst DropdownMenuItem = ({\n  asChild = false,\n  children,\n  className,\n  disabled = false,\n  \"aria-disabled\": ariaDisabled,\n  textValue,\n  closeOnSelect = true,\n  variant = \"default\",\n  onClick,\n  onKeyDown,\n  onSelect,\n  ...itemProps\n}: DropdownMenuItemProps) => {\n  const context = useDropdownMenuContext();\n  const itemDisabled =\n    disabled || ariaDisabled === true || ariaDisabled === \"true\";\n\n  const handleClick = (event: MouseEvent<HTMLElement>) => {\n    if (itemDisabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    onClick?.(event as unknown as MouseEvent<HTMLButtonElement>);\n\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    onSelect?.(event);\n\n    if (!event.defaultPrevented && closeOnSelect) {\n      context.close(true);\n    }\n  };\n\n  const classes = cn(\n    \"puzzle-dropdown-menu__item\",\n    variant === \"danger\" && \"puzzle-dropdown-menu__item--danger\",\n    className,\n  );\n\n  if (asChild) {\n    const child = Children.only(children);\n\n    if (!isValidElement(child) || child.type === Fragment) {\n      throw new Error(\n        \"DropdownMenu.Item 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      onClick?: (event: MouseEvent<HTMLElement>) => void;\n      onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;\n    };\n    const childDisabled =\n      itemDisabled ||\n      childProps.disabled === true ||\n      childProps[\"aria-disabled\"] === true ||\n      childProps[\"aria-disabled\"] === \"true\";\n\n    return cloneElement(child as unknown as ReactElement<Record<string, unknown>>, {\n      ...itemProps,\n      role: \"menuitem\",\n      tabIndex: -1,\n      \"aria-disabled\": childDisabled || undefined,\n      disabled: child.type === \"button\" ? childDisabled : undefined,\n      ...(child.type === \"button\"\n        ? { type: itemProps.type ?? childProps.type ?? \"button\" }\n        : {}),\n      \"data-puzzle-dropdown-menu-item\": \"true\",\n      \"data-text-value\": textValue,\n      className: cn(classes, childProps.className),\n      onClick: (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          handleClick(event);\n        }\n      },\n      onKeyDown: (event: KeyboardEvent<HTMLElement>) => {\n        childProps.onKeyDown?.(event);\n        if (!event.defaultPrevented) {\n          onKeyDown?.(event as unknown as KeyboardEvent<HTMLButtonElement>);\n        }\n\n        if (event.defaultPrevented || childDisabled || event.key !== \" \") {\n          return;\n        }\n\n        event.preventDefault();\n        event.currentTarget.click();\n      },\n    });\n  }\n\n  return (\n    <button\n      {...(itemProps as ButtonHTMLAttributes<HTMLButtonElement>)}\n      type=\"button\"\n      className={classes}\n      role=\"menuitem\"\n      tabIndex={-1}\n      disabled={itemDisabled}\n      aria-disabled={itemDisabled || undefined}\n      data-puzzle-dropdown-menu-item=\"true\"\n      data-text-value={textValue}\n      onClick={handleClick}\n    >\n      {children}\n    </button>\n  );\n};\n\nconst DropdownMenuGroup = ({\n  children,\n  className,\n  \"aria-label\": ariaLabel,\n  ...groupProps\n}: DropdownMenuGroupProps) => (\n  <div\n    {...groupProps}\n    className={cn(\"puzzle-dropdown-menu__group\", className)}\n    role=\"group\"\n    aria-label={ariaLabel}\n  >\n    {children}\n  </div>\n);\n\nconst DropdownMenuLabel = ({\n  children,\n  className,\n  ...labelProps\n}: DropdownMenuLabelProps) => (\n  <div\n    {...labelProps}\n    className={cn(\"puzzle-dropdown-menu__label\", className)}\n  >\n    {children}\n  </div>\n);\n\nconst DropdownMenuSeparator = ({\n  className,\n  ...separatorProps\n}: DropdownMenuSeparatorProps) => (\n  <div\n    {...separatorProps}\n    className={cn(\"puzzle-dropdown-menu__separator\", className)}\n    role=\"separator\"\n    aria-orientation=\"horizontal\"\n  />\n);\n\nconst DropdownMenuCheckboxItem = ({\n  children,\n  checked,\n  defaultChecked = false,\n  onCheckedChange,\n  closeOnSelect = false,\n  textValue,\n  className,\n  disabled = false,\n  \"aria-disabled\": ariaDisabled,\n  onClick,\n  onSelect,\n  ...itemProps\n}: DropdownMenuCheckboxItemProps) => {\n  const context = useDropdownMenuContext();\n  const itemDisabled =\n    disabled || ariaDisabled === true || ariaDisabled === \"true\";\n  const controlled = checked !== undefined;\n  const [internalChecked, setInternalChecked] = useState(defaultChecked);\n  const resolvedChecked = checked ?? internalChecked;\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    if (itemDisabled) {\n      event.preventDefault();\n      return;\n    }\n\n    onClick?.(event);\n\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    onSelect?.(event);\n\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    const nextChecked = resolvedChecked !== true;\n\n    if (!controlled) {\n      setInternalChecked(nextChecked);\n    }\n\n    onCheckedChange?.(nextChecked);\n\n    if (closeOnSelect) {\n      context.close(true);\n    }\n  };\n\n  return (\n    <button\n      {...(itemProps as ButtonHTMLAttributes<HTMLButtonElement>)}\n      type=\"button\"\n      className={cn(\"puzzle-dropdown-menu__item\", className)}\n      role=\"menuitemcheckbox\"\n      tabIndex={-1}\n      disabled={itemDisabled}\n      aria-disabled={itemDisabled || undefined}\n      aria-checked={\n        resolvedChecked === \"indeterminate\" ? \"mixed\" : resolvedChecked\n      }\n      data-state={\n        resolvedChecked === \"indeterminate\"\n          ? \"indeterminate\"\n          : resolvedChecked\n            ? \"checked\"\n            : \"unchecked\"\n      }\n      data-puzzle-dropdown-menu-item=\"true\"\n      data-text-value={textValue}\n      onClick={handleClick}\n    >\n      <span className=\"puzzle-dropdown-menu__indicator\" aria-hidden=\"true\">\n        {resolvedChecked === \"indeterminate\" ? \"−\" : resolvedChecked ? \"✓\" : \"\"}\n      </span>\n      <span className=\"puzzle-dropdown-menu__item-label\">{children}</span>\n    </button>\n  );\n};\n\nexport {\n  DropdownMenuCheckboxItem,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,7 @@
+import { DropdownMenuCheckboxItemProps, DropdownMenuGroupProps, DropdownMenuItemProps, DropdownMenuLabelProps, DropdownMenuSeparatorProps } from "./dropdown-menu.types.cjs";
+declare const DropdownMenuItem: ({ asChild, children, className, disabled, "aria-disabled": ariaDisabled, textValue, closeOnSelect, variant, onClick, onKeyDown, onSelect, ...itemProps }: DropdownMenuItemProps) => import("react").JSX.Element;
+declare const DropdownMenuGroup: ({ children, className, "aria-label": ariaLabel, ...groupProps }: DropdownMenuGroupProps) => import("react").JSX.Element;
+declare const DropdownMenuLabel: ({ children, className, ...labelProps }: DropdownMenuLabelProps) => import("react").JSX.Element;
+declare const DropdownMenuSeparator: ({ className, ...separatorProps }: DropdownMenuSeparatorProps) => import("react").JSX.Element;
+declare const DropdownMenuCheckboxItem: ({ children, checked, defaultChecked, onCheckedChange, closeOnSelect, textValue, className, disabled, "aria-disabled": ariaDisabled, onClick, onSelect, ...itemProps }: DropdownMenuCheckboxItemProps) => import("react").JSX.Element;
+export { DropdownMenuCheckboxItem, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator };