@tide-tds/components 0.3.1 → 0.4.0

package/dist/Accordion.d.ts

@@ -0,0 +1,66 @@
+import { ComponentProps, ReactElement, ReactNode } from "react";
+/** 트리거를 감싸는 제목 요소의 단계 */
+export type AccordionHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export interface AccordionProps extends Omit<ComponentProps<"div">, "defaultValue" | "onChange"> {
+  /**
+   * 펼친 항목의 값 목록(제어). 주면 `onValueChange`로 바꾼다.
+   * `multiple`이 아닌데 값이 둘 이상이면 첫 값만 남기며 `onValueChange`를 부른다.
+   */
+  value?: readonly string[];
+  /** 처음 펼친 항목의 값 목록(비제어). 기본값은 빈 목록(모두 접힘)이다. */
+  defaultValue?: readonly string[];
+  /** 펼친 항목이 바뀌려 할 때 새 값 목록으로 부른다. 목록 순서는 펼친 순서다. */
+  onValueChange?: (value: string[]) => void;
+  /**
+   * 여러 항목을 함께 펼칠지. 기본값은 `false`로, 한 항목을 펼치면 펼쳐 있던 항목이 접힌다.
+   * 어느 쪽이든 펼친 항목을 다시 누르면 접힌다(모두 접을 수 있다).
+   */
+  multiple?: boolean;
+  /** `AccordionItem`들 */
+  children?: ReactNode;
+}
+/**
+ * 접고 펴는 영역 묶음. 루트는 `<div>`(radius `lg`, 장식용 경계)이고 안에 `AccordionItem`을 둔다.
+ * 기본은 한 번에 한 항목만 펼친다(`multiple`이면 여럿).
+ */
+export declare function Accordion({ value, defaultValue, onValueChange, multiple, ref, className, children, ...props }: AccordionProps): ReactElement;
+export interface AccordionItemProps extends Omit<ComponentProps<"div">, "value"> {
+  /** 항목을 가리키는 값. `Accordion`의 `value`·`defaultValue` 목록에 이 값을 넣으면 펼친다. */
+  value: string;
+  /** 펼치거나 접을 수 없게 한다. 트리거가 네이티브 `disabled`가 된다. 펼친 채 비활성이면 펼친 채로 남는다. */
+  disabled?: boolean;
+  /** `AccordionTrigger` 하나와 `AccordionPanel` 하나 */
+  children?: ReactNode;
+}
+/**
+ * 항목 하나. 안에 `AccordionTrigger`와 `AccordionPanel`을 둔다.
+ * 펼쳐 있으면 `data-open`, 비활성이면 `data-disabled`가 붙는다.
+ */
+export declare function AccordionItem({ value, disabled, ref, className, children, ...props }: AccordionItemProps): ReactElement;
+export interface AccordionTriggerProps extends Omit<ComponentProps<"button">, "type" | "id" | "disabled" | "aria-expanded" | "aria-controls"> {
+  /**
+   * 트리거를 감싸는 제목 요소의 단계(`<h1>`~`<h6>`). 기본값은 `3`이다.
+   * 페이지 제목 구조에 맞춘다(WAI-ARIA APG Accordion).
+   */
+  level?: AccordionHeadingLevel;
+  /** 항목 제목. 제목 요소 안에는 버튼만 둔다(APG). */
+  children?: ReactNode;
+}
+/**
+ * 항목 제목 버튼. 제목 요소(`level`, 기본 `<h3>`) 안의 `<button type="button">`이고 끝에 장식용 chevron이 있다.
+ * `ref`·`className`·나머지 props는 버튼에 간다. 펼침 상태는 `aria-expanded`와 `data-open`, 비활성은 `:disabled`다.
+ * Enter·Space·누름으로 펼치고 접는다.
+ */
+export declare function AccordionTrigger({ level, ref, className, children, ...props }: AccordionTriggerProps): ReactElement;
+export interface AccordionPanelProps extends Omit<ComponentProps<"div">, "id" | "role" | "hidden" | "aria-labelledby"> {
+  /**
+   * 패널 역할. 기본값은 `region`(트리거 이름이 붙은 영역, APG 예시)이다.
+   * 함께 펼칠 수 있는 패널이 많으면(대략 6개 넘음) 영역 랜드마크가 너무 늘지 않게 `group`으로 둔다(APG).
+   */
+  role?: "region" | "group";
+}
+/**
+ * 항목 내용. 트리거가 `aria-controls`로 가리키고 트리거 글자가 이름이 된다(`aria-labelledby`).
+ * 접혀 있으면 숨는다(`hidden`). 늘 렌더하므로 안의 입력 상태는 접어도 남는다.
+ */
+export declare function AccordionPanel({ role, ref, className, ...props }: AccordionPanelProps): ReactElement;

package/dist/Accordion.js

@@ -0,0 +1,127 @@
+"use client";
+
+import { cn } from "./cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use, useMemo, useRef } from "react";
+import { ChevronDownIcon } from "@tide-tds/icons";
+import { mergeProps, mergeRefs, useButton, useDisclosure } from "react-aria";
+import { useDisclosureGroupState, useDisclosureState } from "react-stately";
+
+// src/Accordion.tsx
+const AccordionContext = createContext(null);
+const AccordionItemContext = createContext(null);
+function useAccordionItemContext(part) {
+	const context = use(AccordionItemContext);
+	if (!context) throw new Error(`${part}는 AccordionItem 안에 둔다.`);
+	return context;
+}
+const accordionClass = "rounded-lg border border-default text-default";
+const itemClass = "not-first:border-t not-first:border-default";
+const triggerClass = [
+	"group flex flex-1 cursor-pointer items-center gap-3 rounded-md px-4 py-3 text-start text-label-lg outline-none select-none",
+	"enabled:hover:bg-neutral-subtle-hover focus-visible:focus-ring",
+	"disabled:cursor-not-allowed disabled:text-disabled"
+].join(" ");
+const chevronClass = "ms-auto shrink-0 text-muted group-hover:group-enabled:text-default group-disabled:text-disabled group-aria-expanded:rotate-180 motion-safe:transition-[rotate] forced-colors:text-current forced-colors:group-disabled:text-current";
+const panelClass = "px-4 pb-4 text-body-md [&[hidden]]:p-0";
+/**
+* 접고 펴는 영역 묶음. 루트는 `<div>`(radius `lg`, 장식용 경계)이고 안에 `AccordionItem`을 둔다.
+* 기본은 한 번에 한 항목만 펼친다(`multiple`이면 여럿).
+*/
+function Accordion({ value, defaultValue, onValueChange, multiple = false, ref, className, children, ...props }) {
+	const state = useDisclosureGroupState({
+		allowsMultipleExpanded: multiple,
+		expandedKeys: value,
+		defaultExpandedKeys: defaultValue,
+		onExpandedChange: onValueChange && ((keys) => onValueChange([...keys].map(String)))
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		className: cn(accordionClass, className),
+		children: /* @__PURE__ */ jsx(AccordionContext, {
+			value: state,
+			children
+		})
+	});
+}
+/**
+* 항목 하나. 안에 `AccordionTrigger`와 `AccordionPanel`을 둔다.
+* 펼쳐 있으면 `data-open`, 비활성이면 `data-disabled`가 붙는다.
+*/
+function AccordionItem({ value, disabled = false, ref, className, children, ...props }) {
+	const group = use(AccordionContext);
+	if (!group) throw new Error("AccordionItem는 Accordion 안에 둔다.");
+	const panelRef = useRef(null);
+	const state = useDisclosureState({
+		isExpanded: group.expandedKeys.has(value),
+		onExpandedChange: () => group.toggleKey(value)
+	});
+	const { buttonProps, panelProps } = useDisclosure({ isDisabled: disabled }, state, panelRef);
+	const context = useMemo(() => ({
+		expanded: state.isExpanded,
+		disabled,
+		buttonProps,
+		panelProps,
+		panelRef
+	}), [
+		state.isExpanded,
+		disabled,
+		buttonProps,
+		panelProps
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		"data-open": state.isExpanded ? "" : void 0,
+		"data-disabled": disabled ? "" : void 0,
+		className: cn(itemClass, className),
+		children: /* @__PURE__ */ jsx(AccordionItemContext, {
+			value: context,
+			children
+		})
+	});
+}
+/**
+* 항목 제목 버튼. 제목 요소(`level`, 기본 `<h3>`) 안의 `<button type="button">`이고 끝에 장식용 chevron이 있다.
+* `ref`·`className`·나머지 props는 버튼에 간다. 펼침 상태는 `aria-expanded`와 `data-open`, 비활성은 `:disabled`다.
+* Enter·Space·누름으로 펼치고 접는다.
+*/
+function AccordionTrigger({ level = 3, ref, className, children, ...props }) {
+	const item = useAccordionItemContext("AccordionTrigger");
+	const buttonRef = useRef(null);
+	const { buttonProps } = useButton(item.buttonProps, buttonRef);
+	const mergedRef = useMemo(() => mergeRefs(ref, buttonRef), [ref, buttonRef]);
+	const Heading = `h${level}`;
+	return /* @__PURE__ */ jsx(Heading, {
+		className: "flex",
+		children: /* @__PURE__ */ jsxs("button", {
+			...mergeProps(props, buttonProps),
+			ref: mergedRef,
+			type: "button",
+			"data-open": item.expanded ? "" : void 0,
+			className: cn(triggerClass, className),
+			children: [children, /* @__PURE__ */ jsx(ChevronDownIcon, {
+				size: 16,
+				className: chevronClass
+			})]
+		})
+	});
+}
+/**
+* 항목 내용. 트리거가 `aria-controls`로 가리키고 트리거 글자가 이름이 된다(`aria-labelledby`).
+* 접혀 있으면 숨는다(`hidden`). 늘 렌더하므로 안의 입력 상태는 접어도 남는다.
+*/
+function AccordionPanel({ role = "region", ref, className, ...props }) {
+	const item = useAccordionItemContext("AccordionPanel");
+	const mergedRef = useMemo(() => mergeRefs(ref, item.panelRef), [ref, item.panelRef]);
+	return /* @__PURE__ */ jsx("div", {
+		...mergeProps(props, item.panelProps),
+		ref: mergedRef,
+		role,
+		"data-open": item.expanded ? "" : void 0,
+		className: cn(panelClass, className)
+	});
+}
+
+export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger };

package/dist/AlertDialog.d.ts

@@ -0,0 +1,8 @@
+import { DialogProps } from "./Dialog.js";
+import { ReactElement } from "react";
+export type AlertDialogProps = DialogProps;
+/**
+ * 삭제 확인처럼 응답이 꼭 필요한 모달의 열림 상태. DOM 요소를 만들지 않는다.
+ * 안에 `DialogTrigger`와 `DialogContent`를 두면 내용이 `role="alertdialog"`가 된다.
+ */
+export declare function AlertDialog(props: AlertDialogProps): ReactElement;

package/dist/AlertDialog.js

@@ -0,0 +1,18 @@
+"use client";
+
+import { DialogRoot } from "./Dialog.js";
+import { jsx } from "react/jsx-runtime";
+
+// src/AlertDialog.tsx
+/**
+* 삭제 확인처럼 응답이 꼭 필요한 모달의 열림 상태. DOM 요소를 만들지 않는다.
+* 안에 `DialogTrigger`와 `DialogContent`를 두면 내용이 `role="alertdialog"`가 된다.
+*/
+function AlertDialog(props) {
+	return /* @__PURE__ */ jsx(DialogRoot, {
+		...props,
+		alert: true
+	});
+}
+
+export { AlertDialog };

package/dist/Combobox.d.ts

@@ -0,0 +1,59 @@
+import { InputSize } from "./input-style.js";
+import { ListBoxOptionProps, ListBoxSectionProps } from "./listbox.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+export interface ComboboxProps extends Omit<ComponentProps<"input">, "value" | "defaultValue" | "onChange" | "type" | "size" | "children" | "name" | "form" | "list"> {
+  /** 고른 값(제어). 고른 옵션의 `value`다. `null`이면 아무것도 고르지 않은 상태다. 주면 `onValueChange`로 바꾼다. */
+  value?: string | null;
+  /** 처음 고른 값(비제어). 입력에 그 옵션의 글자가 보인다. 폼을 reset하면 이 값으로 돌아간다. */
+  defaultValue?: string;
+  /**
+   * 고른 값이 바뀌면 부른다. 옵션을 고르면 그 `value`로, 사용자가 입력을 모두 지우면 `null`로 부른다.
+   */
+  onValueChange?: (value: string | null) => void;
+  /** 목록이 열리거나 닫힐 때 새 상태로 부른다. 열림 상태는 입력이 정하므로 제어할 수 없다. */
+  onOpenChange?: (open: boolean) => void;
+  /** 거른 결과가 없을 때 목록에 보이는 글자. 기본값은 `"결과가 없습니다"`다. */
+  emptyMessage?: ReactNode;
+  /** 폼 제출 이름. 숨은 input에 붙어 고른 옵션의 `value`가 이 이름으로 제출된다(입력한 글자는 제출되지 않는다). */
+  name?: string;
+  /** 숨은 input이 속할 `<form>`의 id. 폼 밖에 둘 때 쓴다. */
+  form?: string;
+  /** 높이 `sm` 32px, `md` 40px, `lg` 48px. 같은 size의 Input·Select·Button과 높이가 같다. 기본값은 `md`다. */
+  size?: InputSize;
+  /**
+   * 오류 상태. 입력에 `aria-invalid="true"`와 `data-invalid`가 붙고 경계가 danger 색이 된다.
+   * Field 안에서는 Field의 값을 따르고, 여기에 준 값이 이긴다.
+   */
+  invalid?: boolean;
+  /**
+   * 필수. 비어 있으면 폼 제출이 막히고 입력으로 포커스가 오며 오류 상태가 된다(브라우저 오류 말풍선은 없다).
+   * 메시지는 Field의 `error`로 앱이 보여 준다. Field 안에서는 Field의 값을 따른다.
+   */
+  required?: boolean;
+  /** `ComboboxItem`과 `ComboboxSection`. 이 요소들을 바로 아래(또는 Fragment·배열 안)에 둔다. */
+  children?: ReactNode;
+}
+/**
+ * 글자를 쳐서 옵션을 거르고 하나를 고르는 입력. 치면 목록이 열리고 옵션 글자에 친 글자가 들어 있는 옵션만 남는다
+ * (대소문자·악센트 무시, 현재 locale 기준). ↓·↑로 목록을 열고 옵션을 옮겨 Enter로 고르며, chevron 버튼을 누르면 거르지
+ * 않은 전체 목록이 열린다. 고르면 닫히고 입력에 그 옵션의 글자가 들어간다. Esc는 닫고 입력을 고른 옵션의 글자로 되돌린다.
+ * 포커스가 나가면 고르지 않은 글자는 지워진다(자유 입력 없음). 거른 결과가 없으면 목록에 `emptyMessage`가 보인다.
+ * Field 안에 두면 label·설명·오류가 자동으로 연결되고, `name`을 주면 고른 옵션의 `value`가 폼에 제출된다.
+ * 상태는 `data-open`·`data-invalid`·네이티브 `:disabled`(입력), `data-open`(목록),
+ * `data-highlighted`·`data-selected`·`data-disabled`(옵션)로 노출한다.
+ */
+export declare function Combobox({ value, defaultValue, onValueChange, onOpenChange, emptyMessage, name, form, size, invalid, disabled, required, readOnly, id, ref, className, children, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: ComboboxProps): ReactElement;
+export interface ComboboxItemProps extends ListBoxOptionProps {}
+/**
+ * Combobox의 옵션(`role="option"`). `Combobox`나 `ComboboxSection` 바로 안에 둔다. `value`가 고른 값이고 폼에
+ * 제출된다. 거르기와 고른 뒤 입력에 들어가는 글자는 `textValue`(기본은 내용의 글자)다. 키보드 위치와 마우스를 올린
+ * 옵션은 highlight, 고른 옵션은 neutral subtle-active 배경과 끝의 체크 아이콘이다(Select 옵션과 같다).
+ * 상태는 `data-highlighted`, `data-selected`, `data-disabled`로 노출한다.
+ */
+export declare function ComboboxItem(_props: ComboboxItemProps): null;
+export interface ComboboxSectionProps extends ListBoxSectionProps {}
+/**
+ * 옵션 묶음(`role="group"`). `heading`이 화면에 보이는 제목이자 묶음의 이름이고, 없으면 `aria-label`이 이름이다.
+ * 거른 결과 묶음 안에 남은 옵션이 없으면 묶음도 빠진다.
+ */
+export declare function ComboboxSection(_props: ComboboxSectionProps): null;

package/dist/Combobox.js

@@ -0,0 +1,206 @@
+"use client";
+
+import { cn } from "./cn.js";
+import { FieldContext, useFieldControl } from "./field-context.js";
+import { inputBaseClass, inputSizeClass } from "./input-style.js";
+import { asCollectionComponent, resolveCollectionChildren, sectionCollectionNode, valueItemCollectionNode } from "./list-collection.js";
+import { listPopupClass } from "./list-style.js";
+import { ListBoxNodes } from "./listbox.js";
+import { OverlayPortal, useOverlayPresence, useOverlayTheme, usePopoverOverlay } from "./overlay.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { use, useLayoutEffect, useMemo, useRef } from "react";
+import { ChevronDownIcon } from "@tide-tds/icons";
+import { mergeProps, mergeRefs, useButton, useComboBox, useFilter, useListBox } from "react-aria";
+import { useComboBoxState } from "react-stately";
+
+// src/Combobox.tsx
+const wrapperClass = "flex w-full";
+const inputEndClass = {
+	sm: "pe-[34px]",
+	md: "pe-9",
+	lg: "pe-10"
+};
+const buttonSizeClass = {
+	sm: "-ms-[35px] w-[35px] pe-[11px]",
+	md: "-ms-[37px] w-[37px] pe-[13px]",
+	lg: "-ms-[41px] w-[41px] pe-[17px]"
+};
+const buttonClass = "inline-flex shrink-0 cursor-pointer items-center justify-end text-muted outline-none disabled:cursor-not-allowed disabled:text-disabled";
+/**
+* 거른 결과가 없을 때의 글자. 옵션과 같은 여백·글자 크기라 목록 높이가 옵션 하나와 같다. `text-muted`.
+* listbox 밖(같은 목록 표면 안)에 둔다. listbox 자식은 option·group만 될 수 있어서다. 결과 개수(0개)는 React Aria가
+* live region으로 알린다.
+*/
+const emptyClass = "px-2 py-1.5 text-body-md text-muted select-none";
+/**
+* 한글 IME 조합 중의 keydown인지. 조합 중 Enter·화살표·Esc는 IME가 쓰므로 목록 동작에 쓰지 않는다.
+* Chromium·Firefox는 `isComposing`이 `true`다. Safari는 조합을 끝내는 Enter의 keydown이 compositionend 뒤에
+* `isComposing: false`로 오지만 `keyCode`가 229다(조합 처리 중인 키). 그래서 둘 다 본다.
+*/
+const isComposingKey = (event) => event.nativeEvent.isComposing || event.keyCode === 229;
+/**
+* 글자를 쳐서 옵션을 거르고 하나를 고르는 입력. 치면 목록이 열리고 옵션 글자에 친 글자가 들어 있는 옵션만 남는다
+* (대소문자·악센트 무시, 현재 locale 기준). ↓·↑로 목록을 열고 옵션을 옮겨 Enter로 고르며, chevron 버튼을 누르면 거르지
+* 않은 전체 목록이 열린다. 고르면 닫히고 입력에 그 옵션의 글자가 들어간다. Esc는 닫고 입력을 고른 옵션의 글자로 되돌린다.
+* 포커스가 나가면 고르지 않은 글자는 지워진다(자유 입력 없음). 거른 결과가 없으면 목록에 `emptyMessage`가 보인다.
+* Field 안에 두면 label·설명·오류가 자동으로 연결되고, `name`을 주면 고른 옵션의 `value`가 폼에 제출된다.
+* 상태는 `data-open`·`data-invalid`·네이티브 `:disabled`(입력), `data-open`(목록),
+* `data-highlighted`·`data-selected`·`data-disabled`(옵션)로 노출한다.
+*/
+function Combobox({ value, defaultValue, onValueChange, onOpenChange, emptyMessage = "결과가 없습니다", name, form, size = "md", invalid, disabled, required, readOnly, id, ref, className, children, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
+	const field = use(FieldContext);
+	const control = useFieldControl({
+		id,
+		invalid,
+		disabled,
+		required,
+		"aria-describedby": ariaDescribedBy,
+		"aria-invalid": ariaInvalid
+	});
+	const isDisabled = control.disabled ?? false;
+	const isRequired = control.required ?? false;
+	const items = useMemo(() => resolveCollectionChildren(children), [children]);
+	const { contains } = useFilter({ sensitivity: "base" });
+	const state = useComboBoxState({
+		children: items,
+		defaultFilter: contains,
+		value,
+		defaultValue,
+		onChange: (key) => onValueChange?.(key == null ? null : String(key)),
+		onOpenChange: (open) => onOpenChange?.(open),
+		allowsEmptyCollection: true,
+		isDisabled,
+		isReadOnly: readOnly,
+		isRequired,
+		validationBehavior: "native"
+	});
+	const inputRef = useRef(null);
+	const buttonRef = useRef(null);
+	const popoverRef = useRef(null);
+	const listBoxRef = useRef(null);
+	const { inputProps, buttonProps, listBoxProps, isInvalid } = useComboBox({
+		inputRef,
+		buttonRef,
+		popoverRef,
+		listBoxRef,
+		id: control.id,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy ?? field?.labelId,
+		isDisabled,
+		isReadOnly: readOnly,
+		isRequired,
+		validationBehavior: "native"
+	}, state);
+	const { buttonProps: chevronProps } = useButton(buttonProps, buttonRef);
+	const mergedRef = useMemo(() => mergeRefs(ref, inputRef), [ref, inputRef]);
+	const showInvalid = control["data-invalid"] === "" || isInvalid;
+	const { onKeyDown: ariaKeyDown, ...ariaInputProps } = inputProps;
+	return /* @__PURE__ */ jsxs("div", {
+		className: wrapperClass,
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				...mergeProps(props, ariaInputProps),
+				ref: mergedRef,
+				onKeyDown: (event) => {
+					props.onKeyDown?.(event);
+					if (!isComposingKey(event)) ariaKeyDown?.(event);
+				},
+				"aria-describedby": control["aria-describedby"],
+				"aria-invalid": showInvalid ? true : control["aria-invalid"],
+				"data-invalid": showInvalid ? "" : void 0,
+				"data-open": state.isOpen ? "" : void 0,
+				className: cn(inputSizeClass[size], inputBaseClass, inputEndClass[size], className)
+			}),
+			/* @__PURE__ */ jsx("button", {
+				...chevronProps,
+				ref: buttonRef,
+				className: cn(buttonClass, buttonSizeClass[size]),
+				children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: 16 })
+			}),
+			name !== void 0 && /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				form,
+				value: state.selectedKey == null ? "" : String(state.selectedKey),
+				disabled: isDisabled
+			}),
+			/* @__PURE__ */ jsx(ComboboxPopover, {
+				state,
+				inputRef,
+				popoverRef,
+				listBoxRef,
+				listBoxProps,
+				emptyMessage
+			})
+		]
+	});
+}
+/**
+* 목록을 DOM에 둘지 정하고 portal한다. 닫혀도 퇴장 전환이 끝날 때까지 남긴다(ADR 0018).
+* 포커스는 입력에 머물므로 FocusScope로 감싸지 않는다(`focusManagement={false}`). 감싸면 바깥 빈 곳을 눌러 포커스가
+* body로 간 뒤 목록이 빠질 때 FocusScope가 입력으로 포커스를 되돌린다(react-aria 3.53.1 FocusScope restoreFocus).
+*/
+function ComboboxPopover(props) {
+	if (!useOverlayPresence(props.state.isOpen, props.popoverRef)) return null;
+	return /* @__PURE__ */ jsx(OverlayPortal, {
+		isExiting: !props.state.isOpen,
+		focusManagement: false,
+		children: /* @__PURE__ */ jsx(ComboboxPopoverInner, { ...props })
+	});
+}
+/**
+* 목록 표면(`listPopupClass`)과 그 안의 `role="listbox"`. 입력 아래 시작 끝에 4px 떨어져 붙고(Select와 같다),
+* 폭은 입력보다 좁지 않다. 거른 결과가 없으면 listbox 뒤에 `emptyMessage`를 보인다.
+*/
+function ComboboxPopoverInner({ state, inputRef, popoverRef, listBoxRef, listBoxProps, emptyMessage }) {
+	useOverlayTheme(inputRef, popoverRef);
+	useLayoutEffect(() => {
+		const popover = popoverRef.current;
+		const width = inputRef.current?.offsetWidth;
+		if (popover && width) popover.style.minWidth = `min(${width}px, 100vw - 24px)`;
+	}, [inputRef, popoverRef]);
+	const { overlayProps } = usePopoverOverlay({
+		triggerRef: inputRef,
+		popoverRef,
+		placement: "bottom start",
+		offset: 4,
+		nonModal: true
+	}, state);
+	const { listBoxProps: listProps } = useListBox(listBoxProps, state, listBoxRef);
+	const empty = state.collection.size === 0;
+	return /* @__PURE__ */ jsxs("div", {
+		...overlayProps,
+		ref: popoverRef,
+		"data-open": state.isOpen ? "" : void 0,
+		className: listPopupClass,
+		children: [/* @__PURE__ */ jsx("div", {
+			...listProps,
+			ref: listBoxRef,
+			className: "outline-none",
+			children: /* @__PURE__ */ jsx(ListBoxNodes, { state })
+		}), empty && /* @__PURE__ */ jsx("div", {
+			className: emptyClass,
+			children: emptyMessage
+		})]
+	});
+}
+/**
+* Combobox의 옵션(`role="option"`). `Combobox`나 `ComboboxSection` 바로 안에 둔다. `value`가 고른 값이고 폼에
+* 제출된다. 거르기와 고른 뒤 입력에 들어가는 글자는 `textValue`(기본은 내용의 글자)다. 키보드 위치와 마우스를 올린
+* 옵션은 highlight, 고른 옵션은 neutral subtle-active 배경과 끝의 체크 아이콘이다(Select 옵션과 같다).
+* 상태는 `data-highlighted`, `data-selected`, `data-disabled`로 노출한다.
+*/
+function ComboboxItem(_props) {
+	return null;
+}
+asCollectionComponent(ComboboxItem, valueItemCollectionNode);
+/**
+* 옵션 묶음(`role="group"`). `heading`이 화면에 보이는 제목이자 묶음의 이름이고, 없으면 `aria-label`이 이름이다.
+* 거른 결과 묶음 안에 남은 옵션이 없으면 묶음도 빠진다.
+*/
+function ComboboxSection(_props) {
+	return null;
+}
+asCollectionComponent(ComboboxSection, sectionCollectionNode);
+
+export { Combobox, ComboboxItem, ComboboxSection };

package/dist/Dialog.d.ts

@@ -0,0 +1,70 @@
+import { ComponentProps, ReactElement, ReactNode } from "react";
+export interface DialogProps {
+  /** 열림 상태(제어). 주면 `onOpenChange`로 바꾼다. */
+  open?: boolean;
+  /** 처음 열림 상태(비제어). 기본값은 `false`다. */
+  defaultOpen?: boolean;
+  /** 열림 상태가 바뀌려 할 때 새 값으로 부른다. */
+  onOpenChange?: (open: boolean) => void;
+  /** `DialogTrigger`와 `DialogContent` */
+  children: ReactNode;
+}
+/**
+ * 트리거와 내용을 잇는 열림 상태. DOM 요소를 만들지 않는다.
+ * 안에 `DialogTrigger`(없어도 된다. `open`으로 제어해 Menu 항목 등에서 열 수 있다)와 `DialogContent`를 둔다.
+ */
+export declare function Dialog(props: DialogProps): ReactElement;
+export interface DialogTriggerProps extends ComponentProps<"button"> {
+  /**
+   * 다른 요소로 렌더한다. 예: `render={<Button variant="outline" />}`, `render={<IconButton aria-label="삭제" />}`.
+   * props, ref, className, 이벤트 핸들러를 그 요소에 병합한다. 기본은 class 없는 `<button type="button">`이다.
+   */
+  render?: ReactElement;
+}
+/**
+ * Dialog를 여는 버튼. 누르면(마우스, 터치, Enter, Space) 연다. 열린 동안은 바깥이 inert라 다시 누를 수 없다.
+ * `aria-haspopup="dialog"`, `aria-expanded`, 열렸을 때 `aria-controls`와 `data-open`이 붙는다.
+ */
+export declare function DialogTrigger({ render, ref, id, className, ...props }: DialogTriggerProps): ReactElement;
+/** Dialog 최대 폭. `sm` 24rem(384px), `md` 32rem(512px), `lg` 40rem(640px)이다. */
+export type DialogSize = "sm" | "md" | "lg";
+export interface DialogContentProps extends Omit<ComponentProps<"div">, "id" | "role"> {
+  /** 최대 폭. 기본값은 `md`(32rem)다. 화면이 좁으면 화면 폭 − 32px까지 줄어든다. */
+  size?: DialogSize;
+  /** 닫기 버튼(IconButton)의 이름. 기본값은 `"닫기"`다. AlertDialog에는 닫기 버튼이 없어 쓰지 않는다. */
+  closeLabel?: string;
+}
+/**
+ * 화면 가운데 뜨는 모달 내용(`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는 닫는다).
+ */
+export declare function DialogContent(props: DialogContentProps): ReactElement | null;
+export type DialogTitleProps = ComponentProps<"h2">;
+/**
+ * Dialog 제목(`<h2>`, `text-heading-sm`). 있으면 dialog의 `aria-labelledby`가 가리켜 이름이 된다.
+ * Dialog에서는 끝쪽 닫기 버튼과 겹치지 않게 끝 여백(36px)을 둔다.
+ */
+export declare function DialogTitle({ id, className, ...props }: DialogTitleProps): ReactElement;
+export type DialogDescriptionProps = ComponentProps<"p">;
+/**
+ * Dialog 설명(`<p>`, `text-muted`). 있으면 dialog의 `aria-describedby`가 가리킨다. AlertDialog에서는 알릴 내용을 여기에 쓴다.
+ * 목록·여러 문단처럼 구조가 있는 내용은 한 줄로 읽히므로 이 요소 밖에 둔다(APG Dialog).
+ */
+export declare function DialogDescription({ id, className, ...props }: DialogDescriptionProps): ReactElement;
+export type DialogFooterProps = ComponentProps<"div">;
+/** 동작 버튼 줄. 끝쪽에 맞추고 버튼 사이는 8px이다. 앞에 덜 위험한 동작(취소)을, 끝에 주 동작을 둔다. */
+export declare function DialogFooter({ className, ...props }: DialogFooterProps): ReactElement;
+export interface DialogCloseProps extends ComponentProps<"button"> {
+  /**
+   * 다른 요소로 렌더한다. 예: `render={<Button variant="ghost" color="neutral" />}`.
+   * 기본은 class 없는 `<button type="button">`이다.
+   */
+  render?: ReactElement;
+}
+/**
+ * 누르면 Dialog를 닫는 버튼. `onClick`을 먼저 부르고, 그 안에서 `event.preventDefault()`를 부르면 닫지 않는다.
+ * 닫히면 포커스는 열기 전 요소로 돌아간다.
+ */
+export declare function DialogClose({ render, onClick, className, ...props }: DialogCloseProps): ReactElement;