@tide-tds/components 0.3.1 → 0.5.0

package/dist/Dialog.js

@@ -0,0 +1,255 @@
+"use client";
+
+import { cn } from "./cn.js";
+import { IconButton } from "./IconButton.js";
+import { OverlayPortal, useOverlayPresence, useOverlayTheme } from "./overlay.js";
+import { backdropMotionClass, dialogMotionClass, dialogSurfaceClass } from "./overlay-style.js";
+import { renderElement } from "./render.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, createElement, use, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { XIcon } from "@tide-tds/icons";
+import { mergeProps, mergeRefs, useDialog, useFocusManager, useModalOverlay, useOverlayTrigger, usePress } from "react-aria";
+import { useOverlayTriggerState } from "react-stately";
+
+// src/Dialog.tsx
+const DialogContext = createContext(null);
+function useDialogContext(part) {
+	const context = use(DialogContext);
+	if (!context) throw new Error(`${part}는 Dialog나 AlertDialog 안에 둔다.`);
+	return context;
+}
+const DialogPartsContext = createContext(null);
+function useDialogPartsContext(part) {
+	const context = use(DialogPartsContext);
+	if (!context) throw new Error(`${part}는 DialogContent 안에 둔다.`);
+	return context;
+}
+/** Dialog·AlertDialog가 같이 쓰는 열림 상태. 공개 API가 아니다(AlertDialog.tsx가 쓴다). */
+function DialogRoot({ open, defaultOpen, onOpenChange, alert, children }) {
+	const state = useOverlayTriggerState({
+		isOpen: open,
+		defaultOpen,
+		onOpenChange
+	});
+	const triggerRef = useRef(null);
+	const { triggerProps, overlayProps } = useOverlayTrigger({ type: "dialog" }, state, triggerRef);
+	const [triggerId, setTriggerId] = useState(null);
+	const value = useMemo(() => ({
+		state,
+		triggerRef,
+		triggerProps,
+		contentId: overlayProps.id,
+		triggerId,
+		setTriggerId,
+		alert
+	}), [
+		state,
+		triggerProps,
+		overlayProps.id,
+		triggerId,
+		alert
+	]);
+	return /* @__PURE__ */ jsx(DialogContext, {
+		value,
+		children
+	});
+}
+/**
+* 트리거와 내용을 잇는 열림 상태. DOM 요소를 만들지 않는다.
+* 안에 `DialogTrigger`(없어도 된다. `open`으로 제어해 Menu 항목 등에서 열 수 있다)와 `DialogContent`를 둔다.
+*/
+function Dialog(props) {
+	return /* @__PURE__ */ jsx(DialogRoot, {
+		...props,
+		alert: false
+	});
+}
+/**
+* Dialog를 여는 버튼. 누르면(마우스, 터치, Enter, Space) 연다. 열린 동안은 바깥이 inert라 다시 누를 수 없다.
+* `aria-haspopup="dialog"`, `aria-expanded`, 열렸을 때 `aria-controls`와 `data-open`이 붙는다.
+*/
+function DialogTrigger({ render, ref, id, className, ...props }) {
+	const { state, triggerRef, triggerProps, setTriggerId } = useDialogContext("DialogTrigger");
+	const { onPress, ...ariaProps } = triggerProps;
+	const { pressProps } = usePress({
+		onPress,
+		ref: triggerRef
+	});
+	const mergedRef = useMemo(() => mergeRefs(ref, triggerRef), [ref, triggerRef]);
+	const generatedId = useId();
+	const resolvedId = id ?? generatedId;
+	useLayoutEffect(() => {
+		setTriggerId(resolvedId);
+		return () => setTriggerId(null);
+	}, [resolvedId, setTriggerId]);
+	const merged = {
+		...mergeProps(props, ariaProps, pressProps),
+		id: resolvedId,
+		ref: mergedRef,
+		"data-open": state.isOpen ? "" : void 0
+	};
+	if (!render) return createElement("button", {
+		type: "button",
+		...merged,
+		className
+	});
+	return renderElement({
+		defaultElement: "button",
+		render,
+		baseClassName: "",
+		props: {
+			...merged,
+			className
+		}
+	});
+}
+const backdropClass = `fixed inset-0 isolate z-modal flex items-center justify-center bg-overlay p-4 ${backdropMotionClass}`;
+const contentClass = `relative flex max-h-full w-full flex-col gap-4 overflow-y-auto p-6 text-body-md outline-none ${dialogSurfaceClass} ${dialogMotionClass}`;
+const sizeClass = {
+	sm: "max-w-96",
+	md: "max-w-128",
+	lg: "max-w-160"
+};
+/**
+* 화면 가운데 뜨는 모달 내용(`role="dialog"`, AlertDialog 안에서는 `role="alertdialog"`).
+* 열릴 때만 `document.body`에 portal하고, 반투명 막(`bg-overlay`)과 함께 `z-modal`로 쌓는다.
+* 등장은 opacity + scale 0.96 → 1(`normal`), 퇴장은 opacity + scale 0.98(`fast`)이다. 움직임 줄이기에서는 opacity만 바뀐다.
+* Dialog에는 끝 위쪽에 닫기 버튼(IconButton)이 있고 바깥 막을 누르면 닫힌다. AlertDialog는 둘 다 없다(Esc는 닫는다).
+*/
+function DialogContent(props) {
+	const context = useDialogContext("DialogContent");
+	const backdropRef = useRef(null);
+	if (!useOverlayPresence(context.state.isOpen, backdropRef)) return null;
+	return /* @__PURE__ */ jsx(OverlayPortal, {
+		isExiting: !context.state.isOpen,
+		children: /* @__PURE__ */ jsx(DialogContentInner, {
+			...props,
+			context,
+			backdropRef
+		})
+	});
+}
+/** DOM에 있는 동안만 portal 안에서 렌더한다. React Aria 오버레이 hook은 요소가 있다고 보고 동작한다. */
+function DialogContentInner({ context, backdropRef, size = "md", closeLabel = "닫기", ref, className, children, ...props }) {
+	const { state, triggerRef, contentId, triggerId, alert } = context;
+	const dialogRef = useRef(null);
+	const [titleId, setTitleId] = useState(null);
+	const [descriptionId, setDescriptionId] = useState(null);
+	useOverlayTheme(triggerRef, backdropRef);
+	const { modalProps, underlayProps } = useModalOverlay({ isDismissable: !alert }, state, dialogRef);
+	const labelledBy = props["aria-labelledby"] ?? (props["aria-label"] ? void 0 : titleId ?? triggerId ?? void 0);
+	const describedBy = props["aria-describedby"] ?? descriptionId ?? void 0;
+	const { dialogProps } = useDialog({
+		role: alert ? "alertdialog" : "dialog",
+		"aria-label": props["aria-label"],
+		"aria-labelledby": labelledBy,
+		"aria-describedby": describedBy
+	}, dialogRef);
+	const focusManager = useFocusManager();
+	useEffect(() => {
+		if (alert && document.activeElement === dialogRef.current) focusManager?.focusFirst({ tabbable: true });
+	}, []);
+	const mergedRef = useMemo(() => mergeRefs(ref, dialogRef), [ref]);
+	const parts = useMemo(() => ({
+		alert,
+		setTitleId,
+		setDescriptionId
+	}), [alert]);
+	const open = state.isOpen ? "" : void 0;
+	return /* @__PURE__ */ jsx("div", {
+		...underlayProps,
+		ref: backdropRef,
+		"data-open": open,
+		className: backdropClass,
+		children: /* @__PURE__ */ jsxs("div", {
+			...mergeProps(props, modalProps, dialogProps),
+			id: contentId,
+			ref: mergedRef,
+			"data-open": open,
+			className: cn(contentClass, sizeClass[size], className),
+			children: [/* @__PURE__ */ jsx(DialogPartsContext, {
+				value: parts,
+				children
+			}), !alert && /* @__PURE__ */ jsx(IconButton, {
+				"aria-label": closeLabel,
+				variant: "ghost",
+				color: "neutral",
+				size: "sm",
+				onClick: state.close,
+				className: "absolute end-5 top-5",
+				children: /* @__PURE__ */ jsx(XIcon, {})
+			})]
+		})
+	});
+}
+/** 부분 요소의 id를 정하고 열린 동안 dialog에 알린다. */
+function usePartId(id, register) {
+	const generated = useId();
+	const resolved = id ?? generated;
+	useLayoutEffect(() => {
+		register(resolved);
+		return () => register(null);
+	}, [resolved, register]);
+	return resolved;
+}
+/**
+* Dialog 제목(`<h2>`, `text-heading-sm`). 있으면 dialog의 `aria-labelledby`가 가리켜 이름이 된다.
+* Dialog에서는 끝쪽 닫기 버튼과 겹치지 않게 끝 여백(36px)을 둔다.
+*/
+function DialogTitle({ id, className, ...props }) {
+	const { alert, setTitleId } = useDialogPartsContext("DialogTitle");
+	const resolvedId = usePartId(id, setTitleId);
+	return /* @__PURE__ */ jsx("h2", {
+		...props,
+		id: resolvedId,
+		className: cn("text-heading-sm text-default", !alert && "pe-9", className)
+	});
+}
+/**
+* Dialog 설명(`<p>`, `text-muted`). 있으면 dialog의 `aria-describedby`가 가리킨다. AlertDialog에서는 알릴 내용을 여기에 쓴다.
+* 목록·여러 문단처럼 구조가 있는 내용은 한 줄로 읽히므로 이 요소 밖에 둔다(APG Dialog).
+*/
+function DialogDescription({ id, className, ...props }) {
+	const { setDescriptionId } = useDialogPartsContext("DialogDescription");
+	const resolvedId = usePartId(id, setDescriptionId);
+	return /* @__PURE__ */ jsx("p", {
+		...props,
+		id: resolvedId,
+		className: cn("text-body-md text-muted", className)
+	});
+}
+/** 동작 버튼 줄. 끝쪽에 맞추고 버튼 사이는 8px이다. 앞에 덜 위험한 동작(취소)을, 끝에 주 동작을 둔다. */
+function DialogFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("mt-2 flex flex-wrap justify-end gap-2", className)
+	});
+}
+/**
+* 누르면 Dialog를 닫는 버튼. `onClick`을 먼저 부르고, 그 안에서 `event.preventDefault()`를 부르면 닫지 않는다.
+* 닫히면 포커스는 열기 전 요소로 돌아간다.
+*/
+function DialogClose({ render, onClick, className, ...props }) {
+	const { state } = useDialogContext("DialogClose");
+	const handleClick = (event) => {
+		onClick?.(event);
+		if (!event.defaultPrevented) state.close();
+	};
+	const merged = {
+		...props,
+		onClick: handleClick,
+		className
+	};
+	if (!render) return createElement("button", {
+		type: "button",
+		...merged
+	});
+	return renderElement({
+		defaultElement: "button",
+		render,
+		baseClassName: "",
+		props: merged
+	});
+}
+
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogRoot, DialogTitle, DialogTrigger };

package/dist/Input.d.ts

@@ -1,7 +1,5 @@
-import { Size } from "./types.js";
+import { InputSize } from "./input-style.js";
 import { ComponentProps, ReactElement } from "react";
-/** Input의 size. `xs`(24px)는 입력하기에 작아서 받지 않는다. */
-type InputSize = Extract<Size, "sm" | "md" | "lg">;
 export interface InputProps extends Omit<ComponentProps<"input">, "size"> {
   /** 높이 `sm` 32px, `md` 40px, `lg` 48px. 같은 size의 Button과 높이가 같다. 기본값은 `md`다. */
   size?: InputSize;
@@ -15,5 +13,4 @@ export interface InputProps extends Omit<ComponentProps<"input">, "size"> {
  * 한 줄 텍스트를 입력하는 네이티브 `<input>`. `type`(`email`, `password`, `date` 등)을 그대로 받는다.
  * Field 안에 두면 label, 설명, 오류 메시지가 자동으로 연결된다.
  */
-export declare function Input({ size, invalid, id, disabled, required, className, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...props }: InputProps): ReactElement;
-export {};
+export declare function Input({ size, invalid, id, disabled, required, className, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...props }: InputProps): ReactElement;

package/dist/Input.js

@@ -2,16 +2,10 @@
 
 import { cn } from "./cn.js";
 import { useFieldControl } from "./field-context.js";
-import { inputBaseClass } from "./input-style.js";
+import { inputBaseClass, inputSizeClass } from "./input-style.js";
 import { jsx } from "react/jsx-runtime";
 
 // src/Input.tsx
-/** 높이, 좌우 padding, 텍스트 스타일(spec size 표). radius는 모든 size에서 `md`다. */
-const sizeClass = {
-	sm: "h-8 px-2.5 text-label-sm",
-	md: "h-10 px-3 text-label-md",
-	lg: "h-12 px-4 text-label-lg"
-};
 /**
 * 한 줄 텍스트를 입력하는 네이티브 `<input>`. `type`(`email`, `password`, `date` 등)을 그대로 받는다.
 * Field 안에 두면 label, 설명, 오류 메시지가 자동으로 연결된다.
@@ -28,7 +22,7 @@ function Input({ size = "md", invalid, id, disabled, required, className, "aria-
 	return /* @__PURE__ */ jsx("input", {
 		...props,
 		...control,
-		className: cn(sizeClass[size], inputBaseClass, className)
+		className: cn(inputSizeClass[size], inputBaseClass, className)
 	});
 }
 

package/dist/Menu.d.ts

@@ -0,0 +1,72 @@
+import { CollectionItemProps, CollectionSectionProps } from "./list-collection.js";
+import { OverlayPlacement } from "./overlay.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+/** Menu 목록의 위치. 앞은 트리거의 어느 쪽, 뒤는 그 변에서 맞출 끝이다. 공간이 모자라면 반대쪽으로 뒤집힌다. */
+export type MenuPlacement = OverlayPlacement;
+export interface MenuProps {
+  /** 열림 상태(제어). 주면 `onOpenChange`로 바꾼다. */
+  open?: boolean;
+  /** 처음 열림 상태(비제어). 기본값은 `false`다. */
+  defaultOpen?: boolean;
+  /** 열림 상태가 바뀌려 할 때 새 값으로 부른다. 항목을 실행해 닫힐 때도 부른다. */
+  onOpenChange?: (open: boolean) => void;
+  /** `MenuTrigger`와 `MenuContent` */
+  children: ReactNode;
+}
+/**
+ * 트리거와 동작 목록을 잇는 열림 상태. DOM 요소를 만들지 않는다.
+ * 안에 `MenuTrigger` 하나와 `MenuContent` 하나를 둔다.
+ */
+export declare function Menu({ open, defaultOpen, onOpenChange, children }: MenuProps): ReactElement;
+export interface MenuTriggerProps extends ComponentProps<"button"> {
+  /**
+   * 다른 요소로 렌더한다. 예: `render={<Button variant="outline" />}`, `render={<IconButton aria-label="더보기" />}`.
+   * props, ref, className, 이벤트 핸들러를 그 요소에 병합한다. 기본은 class 없는 `<button type="button">`이다.
+   */
+  render?: ReactElement;
+}
+/**
+ * Menu를 여는 버튼. 마우스는 누르는 순간 열고, 키보드는 Enter·Space·↓로 열어 첫 항목에, ↑로 열어 마지막 항목에
+ * 위치한다. `aria-haspopup`, `aria-expanded`, 열렸을 때 `aria-controls`와 `data-open`이 붙는다.
+ */
+export declare function MenuTrigger({ render, ref, id, className, ...props }: MenuTriggerProps): ReactElement;
+export interface MenuContentProps extends Omit<ComponentProps<"div">, "id" | "role"> {
+  /** 트리거 기준 위치. 기본값은 `bottom start`(아래, 시작 끝 맞춤)다. 공간이 모자라면 반대쪽으로 뒤집힌다. */
+  placement?: MenuPlacement;
+  /** 트리거와의 간격(px). 기본값은 `4`다. */
+  offset?: number;
+  /** `MenuItem`과 `MenuSection`. 이 요소들을 바로 아래(또는 Fragment·배열 안)에 둔다. */
+  children?: ReactNode;
+}
+/**
+ * 트리거 옆에 뜨는 동작 목록(`role="menu"`). 열릴 때만 `document.body`에 portal로 렌더하고 `z-popover`로 쌓는다.
+ * 바로 나타나고, 닫히면 opacity만 `fast`(150ms)로 사라진다.
+ * 열려 있으면 `data-open`이, 트리거 기준 방향이 `data-placement`(`top`/`bottom`/`left`/`right`)로 붙는다.
+ */
+export declare function MenuContent(props: MenuContentProps): ReactElement | null;
+export interface MenuItemProps extends Omit<ComponentProps<"div">, "role" | "children">, CollectionItemProps {
+  /** 항목 내용. 아이콘(장식용)과 글자를 함께 둘 수 있다. */
+  children?: ReactNode;
+  /**
+   * 항목을 실행할 때 부른다. 마우스·터치 누름뿐 아니라 Enter·Space도 click으로 실행한다(네이티브 버튼과 같다).
+   * 실행하면 메뉴가 닫힌다. `disabled`면 부르지 않는다.
+   */
+  onClick?: ComponentProps<"div">["onClick"];
+}
+/**
+ * Menu의 동작 항목(`role="menuitem"`). `MenuContent`나 `MenuSection` 바로 안에 둔다.
+ * 키보드 위치와 마우스를 올린 항목은 highlight(primary subtle 배경, primary 글자)로 바로 바뀐다.
+ * 상태는 `data-highlighted`(키보드 위치·hover), `data-disabled`(비활성)로 노출한다.
+ */
+export declare function MenuItem(_props: MenuItemProps): null;
+export interface MenuSectionProps extends CollectionSectionProps {
+  /** 묶음 감싸개(`<div role="presentation">`)에 붙는 class */
+  className?: string;
+  /** `MenuItem`. 바로 아래(또는 Fragment·배열 안)에 둔다. */
+  children?: ReactNode;
+}
+/**
+ * 항목 묶음(`role="group"`). `heading`이 화면에 보이는 제목이자 묶음의 이름이고, 없으면 `aria-label`이 이름이다.
+ * 앞뒤 다른 항목·묶음과의 사이에 구분선(`role="separator"`)이 그려진다.
+ */
+export declare function MenuSection(_props: MenuSectionProps): null;

package/dist/Menu.js

@@ -0,0 +1,226 @@
+"use client";
+
+import { cn } from "./cn.js";
+import { asCollectionComponent, itemCollectionNode, resolveCollectionChildren, sectionCollectionNode } from "./list-collection.js";
+import { listHeadingClass, listItemClass, listPopupClass, listSeparatorClass } from "./list-style.js";
+import { OverlayPortal, useCloseOnTab, useOverlayPresence, useOverlayTheme, usePopoverOverlay } from "./overlay.js";
+import { renderElement } from "./render.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, createElement, use, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { mergeProps, mergeRefs, useMenu, useMenuItem, useMenuSection, useMenuTrigger, usePress } from "react-aria";
+import { useMenuTriggerState, useTreeState } from "react-stately";
+
+// src/Menu.tsx
+const MenuContext = createContext(null);
+function useMenuContext(part) {
+	const context = use(MenuContext);
+	if (!context) throw new Error(`${part}는 Menu 안에 둔다.`);
+	return context;
+}
+/**
+* 트리거와 동작 목록을 잇는 열림 상태. DOM 요소를 만들지 않는다.
+* 안에 `MenuTrigger` 하나와 `MenuContent` 하나를 둔다.
+*/
+function Menu({ open, defaultOpen, onOpenChange, children }) {
+	const state = useMenuTriggerState({
+		isOpen: open,
+		defaultOpen,
+		onOpenChange
+	});
+	const triggerRef = useRef(null);
+	const { menuTriggerProps, menuProps } = useMenuTrigger({}, state, triggerRef);
+	const generatedTriggerId = useId();
+	const [triggerId, setTriggerId] = useState(generatedTriggerId);
+	const value = useMemo(() => ({
+		state,
+		triggerRef,
+		menuTriggerProps,
+		menuProps,
+		triggerId,
+		setTriggerId
+	}), [
+		state,
+		menuTriggerProps,
+		menuProps,
+		triggerId
+	]);
+	return /* @__PURE__ */ jsx(MenuContext, {
+		value,
+		children
+	});
+}
+/**
+* Menu를 여는 버튼. 마우스는 누르는 순간 열고, 키보드는 Enter·Space·↓로 열어 첫 항목에, ↑로 열어 마지막 항목에
+* 위치한다. `aria-haspopup`, `aria-expanded`, 열렸을 때 `aria-controls`와 `data-open`이 붙는다.
+*/
+function MenuTrigger({ render, ref, id, className, ...props }) {
+	const { state, triggerRef, menuTriggerProps, triggerId, setTriggerId } = useMenuContext("MenuTrigger");
+	const { onPressStart, onPress, preventFocusOnPress, id: _ariaId, isDisabled: _isDisabled, ...ariaProps } = menuTriggerProps;
+	const { pressProps } = usePress({
+		onPressStart,
+		onPress,
+		preventFocusOnPress,
+		ref: triggerRef
+	});
+	const mergedRef = useMemo(() => mergeRefs(ref, triggerRef), [ref, triggerRef]);
+	const resolvedId = id ?? triggerId;
+	useLayoutEffect(() => {
+		if (resolvedId !== triggerId) setTriggerId(resolvedId);
+	}, [
+		resolvedId,
+		triggerId,
+		setTriggerId
+	]);
+	const merged = {
+		...mergeProps(props, ariaProps, pressProps),
+		id: resolvedId,
+		ref: mergedRef,
+		"data-open": state.isOpen ? "" : void 0
+	};
+	if (!render) return createElement("button", {
+		type: "button",
+		...merged,
+		className
+	});
+	return renderElement({
+		defaultElement: "button",
+		render,
+		baseClassName: "",
+		props: {
+			...merged,
+			className
+		}
+	});
+}
+/**
+* 트리거 옆에 뜨는 동작 목록(`role="menu"`). 열릴 때만 `document.body`에 portal로 렌더하고 `z-popover`로 쌓는다.
+* 바로 나타나고, 닫히면 opacity만 `fast`(150ms)로 사라진다.
+* 열려 있으면 `data-open`이, 트리거 기준 방향이 `data-placement`(`top`/`bottom`/`left`/`right`)로 붙는다.
+*/
+function MenuContent(props) {
+	const context = useMenuContext("MenuContent");
+	const popoverRef = useRef(null);
+	if (!useOverlayPresence(context.state.isOpen, popoverRef)) return null;
+	return /* @__PURE__ */ jsx(OverlayPortal, {
+		isExiting: !context.state.isOpen,
+		children: /* @__PURE__ */ jsx(MenuContentInner, {
+			...props,
+			context,
+			popoverRef
+		})
+	});
+}
+/** DOM에 있는 동안만 portal 안에서 렌더한다. React Aria 오버레이·목록 hook은 요소가 있다고 보고 동작한다. */
+function MenuContentInner({ context, popoverRef, placement = "bottom start", offset = 4, ref, className, children, ...props }) {
+	const { state, triggerRef, menuProps, triggerId } = context;
+	useOverlayTheme(triggerRef, popoverRef);
+	const { overlayProps } = usePopoverOverlay({
+		triggerRef,
+		popoverRef,
+		placement,
+		offset
+	}, state);
+	const items = useMemo(() => resolveCollectionChildren(children), [children]);
+	const tree = useTreeState({ children: items });
+	const labelledBy = props["aria-labelledby"] ?? (props["aria-label"] ? void 0 : triggerId);
+	const { menuProps: ariaMenuProps } = useMenu({
+		...menuProps,
+		"aria-label": props["aria-label"],
+		"aria-labelledby": labelledBy
+	}, tree, popoverRef);
+	const mergedRef = useMemo(() => mergeRefs(ref, popoverRef), [ref, popoverRef]);
+	useCloseOnTab(popoverRef, state.close);
+	const { style: _style, ...rest } = mergeProps(props, overlayProps, ariaMenuProps);
+	const nodes = [...tree.collection];
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		ref: mergedRef,
+		"data-open": state.isOpen ? "" : void 0,
+		className: cn(listPopupClass, className),
+		style: {
+			...overlayProps.style,
+			...props.style
+		},
+		children: nodes.map((node, index) => {
+			const previous = nodes[index - 1];
+			const separator = previous !== void 0 && (node.type === "section" || previous.type === "section");
+			const element = node.type === "section" ? /* @__PURE__ */ jsx(MenuSectionView, {
+				node,
+				tree
+			}, node.key) : /* @__PURE__ */ jsx(MenuItemView, {
+				node,
+				tree
+			}, node.key);
+			if (!separator) return element;
+			return [/* @__PURE__ */ jsx("div", {
+				role: "separator",
+				className: listSeparatorClass
+			}, `${String(node.key)}-separator`), element];
+		})
+	});
+}
+/**
+* Menu의 동작 항목(`role="menuitem"`). `MenuContent`나 `MenuSection` 바로 안에 둔다.
+* 키보드 위치와 마우스를 올린 항목은 highlight(primary subtle 배경, primary 글자)로 바로 바뀐다.
+* 상태는 `data-highlighted`(키보드 위치·hover), `data-disabled`(비활성)로 노출한다.
+*/
+function MenuItem(_props) {
+	return null;
+}
+asCollectionComponent(MenuItem, itemCollectionNode);
+/**
+* 항목 묶음(`role="group"`). `heading`이 화면에 보이는 제목이자 묶음의 이름이고, 없으면 `aria-label`이 이름이다.
+* 앞뒤 다른 항목·묶음과의 사이에 구분선(`role="separator"`)이 그려진다.
+*/
+function MenuSection(_props) {
+	return null;
+}
+asCollectionComponent(MenuSection, sectionCollectionNode);
+/** 항목 하나를 그린다. node.props는 앱이 MenuItem에 준 props(와 컬렉션이 더한 isDisabled)다. */
+function MenuItemView({ node, tree }) {
+	const itemRef = useRef(null);
+	const { ref, className, onClick, disabled: _disabled, textValue: _textValue, isDisabled: _isDisabled, children: _children, id, ...props } = node.props;
+	const { menuItemProps, isFocused, isDisabled } = useMenuItem({
+		key: node.key,
+		id,
+		onClick,
+		"aria-label": props["aria-label"]
+	}, tree, itemRef);
+	const mergedRef = useMemo(() => mergeRefs(ref, itemRef), [ref, itemRef]);
+	const merged = mergeProps(props, menuItemProps);
+	return /* @__PURE__ */ jsx("div", {
+		...merged,
+		ref: mergedRef,
+		"aria-labelledby": props["aria-labelledby"],
+		"aria-describedby": props["aria-describedby"],
+		"data-highlighted": isFocused ? "" : void 0,
+		"data-disabled": isDisabled ? "" : void 0,
+		className: cn(listItemClass, className),
+		children: node.rendered
+	});
+}
+/** 묶음 하나를 그린다. 제목은 보조기술에서 숨기고(`presentation`) 묶음의 이름으로만 쓴다(useMenuSection). */
+function MenuSectionView({ node, tree }) {
+	const { className } = node.props;
+	const { itemProps, headingProps, groupProps } = useMenuSection({
+		heading: node.rendered,
+		"aria-label": node["aria-label"]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		...itemProps,
+		className,
+		children: [node.rendered != null && /* @__PURE__ */ jsx("div", {
+			...headingProps,
+			className: "px-2 pt-1.5 pb-1 text-label-sm text-muted select-none",
+			children: node.rendered
+		}), /* @__PURE__ */ jsx("div", {
+			...groupProps,
+			children: [...node.childNodes].map((child) => /* @__PURE__ */ jsx(MenuItemView, {
+				node: child,
+				tree
+			}, child.key))
+		})]
+	});
+}
+
+export { Menu, MenuContent, MenuItem, MenuSection, MenuTrigger };

package/dist/Select.d.ts

@@ -0,0 +1,62 @@
+import { InputSize } from "./input-style.js";
+import { ListBoxOptionProps, ListBoxSectionProps } from "./listbox.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+export interface SelectProps extends Omit<ComponentProps<"button">, "value" | "defaultValue" | "onChange" | "type" | "size" | "children" | "name" | "form"> {
+  /** 고른 값(제어). 고른 옵션의 `value`다. `null`이면 아무것도 고르지 않은 상태다. 주면 `onValueChange`로 바꾼다. */
+  value?: string | null;
+  /** 처음 고른 값(비제어). 주지 않으면 아무것도 고르지 않은 상태로 시작한다. 폼을 reset하면 이 값으로 돌아간다. */
+  defaultValue?: string;
+  /** 사용자가 다른 옵션을 고르면 그 옵션의 `value`로 부른다. */
+  onValueChange?: (value: string) => void;
+  /** 목록 열림 상태(제어). 주면 `onOpenChange`로 바꾼다. */
+  open?: boolean;
+  /** 처음 목록 열림 상태(비제어). 기본값은 `false`다. */
+  defaultOpen?: boolean;
+  /** 목록 열림 상태가 바뀌려 할 때 새 값으로 부른다. 옵션을 골라 닫힐 때도 부른다. */
+  onOpenChange?: (open: boolean) => void;
+  /** 폼 제출 이름. 숨은 `<select>`에 붙어 고른 값이 이 이름으로 제출된다(트리거 버튼에는 붙지 않는다). */
+  name?: string;
+  /** 숨은 `<select>`가 속할 `<form>`의 id. 폼 밖에 둘 때 쓴다. */
+  form?: string;
+  /** 브라우저 자동 완성 힌트. 숨은 `<select>`에 붙는다. */
+  autoComplete?: string;
+  /** 아무것도 고르지 않았을 때 트리거에 보이는 글자. 기본값은 `"선택하세요"`다. */
+  placeholder?: string;
+  /** 높이 `sm` 32px, `md` 40px, `lg` 48px. 같은 size의 Input·Button과 높이가 같다. 기본값은 `md`다. */
+  size?: InputSize;
+  /**
+   * 오류 상태. 트리거에 `aria-invalid="true"`와 `data-invalid`가 붙고 경계가 danger 색이 된다.
+   * Field 안에서는 Field의 값을 따르고, 여기에 준 값이 이긴다.
+   */
+  invalid?: boolean;
+  /**
+   * 필수. 고르지 않고 폼을 제출하면 제출이 막히고 트리거로 포커스가 오며 오류 상태가 된다(브라우저 오류 말풍선은
+   * 없다). 메시지는 Field의 `error`로 앱이 보여 준다. Field 안에서는 Field의 값을 따른다.
+   */
+  required?: boolean;
+  /** `SelectItem`과 `SelectSection`. 이 요소들을 바로 아래(또는 Fragment·배열 안)에 둔다. */
+  children?: ReactNode;
+}
+/**
+ * 값 하나를 고르는 입력. 트리거를 누르거나(마우스는 누르는 순간) Enter·Space·↓·↑로 목록을 열고, 화살표·Home/End·
+ * 영문 글자로 옵션을 옮겨 Enter·Space·누름으로 고른다. 닫힌 채로 글자를 치면 바로 그 옵션을 고른다.
+ * 고르면 닫히고 포커스는 트리거로 돌아온다. Esc·바깥 누름·Tab으로도 닫힌다.
+ * Field 안에 두면 label·설명·오류가 자동으로 연결되고, `name`을 주면 고른 값이 폼에 제출된다.
+ * 상태는 `data-open`(트리거·목록), `data-invalid`(트리거), 네이티브 `:disabled`(트리거),
+ * `data-highlighted`·`data-selected`·`data-disabled`(옵션)로 노출한다.
+ */
+export declare function Select({ value, defaultValue, onValueChange, open, defaultOpen, onOpenChange, name, form, autoComplete, placeholder, size, invalid, disabled, required, id, ref, className, children, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: SelectProps): ReactElement;
+export interface SelectItemProps extends ListBoxOptionProps {}
+/**
+ * Select의 옵션(`role="option"`). `Select`나 `SelectSection` 바로 안에 둔다. `value`가 고른 값이고 폼에 제출된다.
+ * 내용(아이콘과 글자)은 고르면 트리거에도 보인다. 키보드 위치와 마우스를 올린 옵션은 highlight(primary subtle 배경,
+ * primary 글자), 고른 옵션은 neutral subtle-active 배경과 끝의 체크 아이콘이다.
+ * 상태는 `data-highlighted`, `data-selected`, `data-disabled`로 노출한다.
+ */
+export declare function SelectItem(_props: SelectItemProps): null;
+export interface SelectSectionProps extends ListBoxSectionProps {}
+/**
+ * 옵션 묶음(`role="group"`). `heading`이 화면에 보이는 제목이자 묶음의 이름이고, 없으면 `aria-label`이 이름이다.
+ * 앞뒤 다른 옵션·묶음과의 사이에 구분선이 그려진다.
+ */
+export declare function SelectSection(_props: SelectSectionProps): null;