@olundot/ui 0.19.0 → 0.20.0-next.0

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @olundot/ui
 
+## 0.20.0-next.0
+
+### Minor Changes
+
+- 213086c: `ActionMenu`를 추가한다. 같은 `items`를 900px 이상에서는 DropdownMenu로, 미만에서는 메뉴 시트로 그린다. 모양은 열 때 한 번 정하고, 열린 동안 폭이 바뀌어도 그대로 둔다. 항목을 고르면 메뉴가 닫히고 포커스가 트리거로 돌아온 뒤 `onSelect`가 실행된다. `groups`를 주면 묶음 사이에 구분선을 넣는다. `open`과 `onOpenChange`로 제어할 수도 있다.
+
+  `ActionSheet`는 사용 중단 예정이다. `ActionMenu`로 옮긴다. props는 그대로이고 모양이 바뀐다.
+
+  - 위에 손잡이가 생기고, 끌어내리면 닫힌다.
+  - 머리의 X가 없어지고 스크린 리더용 닫기 버튼만 남는다. `closeLabel`은 그 버튼의 이름이다.
+  - 표면 톤이 0.20 오버레이와 같아진다(`--bg-raised`, `--border-subtle`, 윗선 하이라이트).
+  - 열면 첫 번째 활성 행에 포커스가 간다.
+  - `data-slot`이 `action-menu-sheet`, `action-menu-item`으로 바뀐다.
+
+- 213086c: 확인 창 `AlertDialog`를 추가한다. 확인 모드는 `[취소][확인]`, 알림 모드는 버튼 하나이고, `tone`은 `neutral`과 `danger`다. 실행이 실패하면 `onError`로 받고 창은 열어 둔다. `ConfirmDialog`와 `InfoModal`은 `AlertDialog` 위의 래퍼가 되었고 사용 중단 예정이다. 동작이 바뀐다. InfoModal의 역할은 `alertdialog`가 되고, 바깥 클릭으로 닫히지 않으며, 900px 미만에서도 가운데에 고정된다. `mobilePresentation`과 InfoModal `width`는 무시한다.
+- 213086c: 오버레이 scrim 프리셋을 고를 수 있다. 앱 기본값은 루트에 `<html data-scrim="blur|dim">`으로 정하고, 한 오버레이만 바꿀 때는 `scrim` prop을 쓴다. prop이 루트 값보다 우선한다. `DialogContent`, `DialogOverlay`, `SheetContent`, `ConfirmDialog`가 `scrim`을 받는다. `dim`은 블러 없는 딤이고, `blur`는 옅은 딤에 `--scrim-blur`를 더한다. 둘 다 없으면 지금처럼 `--scrim`이다. 프리셋 타입 `OverlayScrim`을 내보낸다.
+- 213086c: `Dialog`에 `title`을 주면 구조형 다이얼로그가 된다. 머리의 X와 `footer`, 본문 스크롤, 푸터 위 선 1줄을 갖춘다. 바깥 클릭으로는 닫히지 않고 Escape와 X로 닫힌다. 폭은 `size` `sm`·`md`·`lg`(420·560·720)만 받고, `className`은 본문 배치에만 쓴다. 900px 미만에서는 손잡이가 있는 아래쪽 시트가 된다. `onSubmit`을 주면 폼 모드가 되어 `[취소][저장]` 푸터를 그리고, 제출 중에는 닫기를 막는다. `onError`를 주면 제출 실패를 넘겨받고 다시 던지지 않는다. `title` 없이 `DialogContent`로 조립한 다이얼로그는 모양과 동작이 그대로다.
+
+  `FormModal`은 사용 중단 예정이다(`Dialog`의 `onSubmit`을 쓴다). 이제 구조형 다이얼로그 폼 모드로 그린다. 그래서 900px 미만에서 아래쪽 시트가 되고, 표면 톤(`--bg-raised`, `--border-subtle`, `--shadow-16`)과 머리의 X를 갖는다. 바깥 클릭으로는 더 이상 닫히지 않는다. `wide`는 `size="lg"`로 옮겨지고, `mobilePresentation`은 무시된다.
+
+  옛 조각 `DialogContent`, `DialogHeader`, `DialogFooter`, `DialogTitle`, `DialogDescription`, `DialogEyebrow`, `DialogRawContent`와 `mobilePresentation`은 사용 중단 예정이다. 동작은 바뀌지 않는다.
+
+- 213086c: `Sheet`에 `title`을 주면 구조형 시트가 된다. 머리에는 `caption`, 제목, `description`, `headerActions`, 닫기 X가 들어가고, 본문만 스크롤하며, `footer`가 있으면 그 위에 선을 하나 긋는다. 바깥 클릭과 Escape로 닫힌다. 900px 이상에서는 `side`(`right`, `left`) 가장자리 패널이고 `size`는 `md` 480px, `lg` 720px, `full`이다. `motion`은 `SheetContent`와 같다. 900px 미만에서는 아래쪽 시트가 되고, 손잡이나 머리를 끌어내리면 닫힌다. 모션 감소 설정에서는 시트가 손가락을 따라 움직이지 않고 닫기 판정만 한다.
+
+  `SheetDrawer`는 사용 중단 예정이다. 이제 구조형 `Sheet`의 래퍼이고, `width`는 `size`로, `expanded`는 `full`로, 확장 버튼은 `headerActions`로 넘긴다. 모양이 바뀐다. 머리 아래 선이 없어지고, 푸터 위 선이 옅은 선(`--border-subtle`)이 되며, 표면 톤(`--bg-raised`, 윗선 하이라이트)을 쓰고, 900px 미만에서 손잡이가 보인다. 옛 조각 `SheetContent`, `SheetHeader`, `SheetBody`, `SheetFooter`, `SheetTitle`, `SheetDescription`과 `mobileSide`에도 사용 중단 표시를 붙였다. 동작은 그대로다.
+
+### Patch Changes
+
+- Updated dependencies [213086c]
+  - @olundot/tokens@0.18.0-next.0
+
+## 0.19.1
+
+### Patch Changes
+
+- a1c795c: 오버레이 7종(Dialog·ConfirmDialog·FormModal·InfoModal·Sheet·SheetDrawer·ActionSheet)의 중복 코드를 내부 모듈로 모았습니다. 공개 API와 기본값은 그대로이고, 화면에 보이는 변화는 아래뿐입니다.
+
+  - **닫기 버튼 통일** — Dialog·Sheet의 `showCloseButton`, SheetDrawer, ActionSheet의 닫기 버튼이 모두 `IconButton` ghost md(32px, 터치 영역 44px)입니다. hover는 `--action-hover`이고, 접근 가능한 이름은 '닫기'(SheetDrawer·ActionSheet는 `closeLabel`)입니다. Sheet 닫기 버튼의 이름이 영어 'Close'에서 '닫기'로 바뀌었습니다. ActionSheet는 버튼이 28px에서 32px로 커져 설명이 없는 헤더가 4px 높아집니다. SheetDrawer 닫기 버튼의 `data-slot="sheet-drawer-close"`는 `data-slot="icon-button"`이 됩니다.
+  - **SheetDescription** 글자색이 `text-text-secondary`입니다.
+  - **Dialog 포커스 복귀** — `DialogTrigger` 없이 `open`만으로 연 `DialogContent`도 닫으면 연 요소로 포커스를 돌려줍니다. 닫을 때 포커스를 직접 옮기는 화면은 `onCloseAutoFocus`에서 `preventDefault()`를 부르면 지금처럼 동작합니다.
+  - **Sheet 쌓임** — Sheet 계열의 오버레이가 `z-modal` 층에 그려집니다. 다른 오버레이 위에서 연 Sheet가 그 오버레이를 어둡게 덮습니다.
+
 ## 0.19.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -684,6 +684,14 @@ interface FormLayoutProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "ch
 declare const FormLayout: React.ForwardRefExoticComponent<FormLayoutProps & React.RefAttributes<HTMLDivElement>>;
 
 /**
+ * Scrim preset. `"dim"`: a plain dim (no backdrop blur). `"blur"`: a lighter dim over a backdrop
+ * blur (`--scrim-blur`). Without a preset (no prop, no `<html data-scrim>`) the scrim is `--scrim`.
+ */
+type OverlayScrim = "blur" | "dim";
+
+/**
+ * @deprecated The structured Dialog (`title`) is a bottom sheet below 900px on its own.
+ *
  * Where a dialog sits below 900px (the DS mobile band, same as Sheet `mobileSide`).
  * - `"center"` (default): the centered card at every width.
  * - `"sheet"`: a bottom sheet below 900px — pinned to the bottom edge, full width, top corners
@@ -691,33 +699,95 @@ declare const FormLayout: React.ForwardRefExoticComponent<FormLayoutProps & Reac
  *   Pure CSS, so SSR and hydration render the same tree at every width (no matchMedia swap).
  */
 type DialogMobilePresentation = "center" | "sheet";
-declare const Dialog: React.FC<Dialog$1.DialogProps>;
+/** Structured Dialog width: 420 · 560 · 720. */
+type DialogSize = "sm" | "md" | "lg";
+/**
+ * Structured Dialog (spec §3.2): a center window for forms, pickers and long content. X + footer,
+ * outside click does not close, Escape does (not while submitting), the body scrolls inside the max
+ * height, a bottom sheet below 900px (OVERLAY_POLICY.dialog).
+ */
+interface DialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Heading, also the dialog's accessible name. Its presence selects the structured mode. */
+    title: string;
+    /** Line under the title, also the accessible description. */
+    description?: string;
+    /** Box width: 420 · 560 · 720. Default `"md"`. Other widths are not supported. */
+    size?: DialogSize;
+    /** Body. Scrolls inside the box's max height. */
+    children: React.ReactNode;
+    /** Footer content (buttons). Ignored in form mode, which renders `[cancel][submit]`. */
+    footer?: React.ReactNode;
+    /**
+     * Form mode: wraps body and footer in a `<form>` and runs this on submit. While it runs, Escape,
+     * cancel and the X do nothing; when it resolves the dialog closes; when it rejects it stays open.
+     */
+    onSubmit?: () => void | Promise<void>;
+    /** Form mode: receives a rejection of `onSubmit` instead of rethrowing it. */
+    onError?: (error: unknown) => void;
+    /** Form mode submit label. Default '저장'. */
+    submitLabel?: string;
+    /** Form mode cancel label. Default '취소'. */
+    cancelLabel?: string;
+    /** Form mode: shows submit busy and blocks closing, for a submit run outside `onSubmit`. */
+    loading?: boolean;
+    /** Accessible name of the X. Default '닫기'. */
+    closeLabel?: string;
+    /** Scrim preset; wins over `<html data-scrim>`. */
+    scrim?: OverlayScrim;
+    /** Layout of the body content only. It never reaches the box: width comes from `size`. */
+    className?: string;
+}
+/** Legacy root: the Radix Dialog Root for `DialogContent` composition (no `title`). */
+type DialogRootProps = React.ComponentProps<typeof Dialog$1.Root> & {
+    title?: never;
+};
+declare function Dialog(props: DialogProps | DialogRootProps): react_jsx_runtime.JSX.Element;
 declare const DialogTrigger: React.ForwardRefExoticComponent<Dialog$1.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DialogPortal: React.FC<Dialog$1.DialogPortalProps>;
 declare const DialogClose: React.ForwardRefExoticComponent<Dialog$1.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
-declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<Dialog$1.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<Dialog$1.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    /** Scrim preset; wins over `<html data-scrim>`. Default: the root preset, else `--scrim`. */
+    scrim?: OverlayScrim;
+} & React.RefAttributes<HTMLDivElement>>;
+/** @deprecated Pass `title` to `Dialog` for the structured dialog. */
 declare const DialogContent: React.ForwardRefExoticComponent<Omit<Dialog$1.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     showCloseButton?: boolean;
-    /** Below 900px: `"center"` card (default) or `"sheet"` — see {@link DialogMobilePresentation}. */
+    /**
+     * @deprecated The structured Dialog (`title`) is a bottom sheet below 900px on its own.
+     *
+     * Below 900px: `"center"` card (default) or `"sheet"` — see {@link DialogMobilePresentation}.
+     */
     mobilePresentation?: DialogMobilePresentation;
+    /** Scrim preset; wins over `<html data-scrim>`. Default: the root preset, else `--scrim`. */
+    scrim?: OverlayScrim;
 } & React.RefAttributes<HTMLDivElement>>;
+/** @deprecated The structured Dialog renders the header from `title` and `description`. */
 declare const DialogHeader: {
     ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
+/** @deprecated Use the structured Dialog `footer` prop. */
 declare const DialogFooter: {
     ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
+/** @deprecated Use the structured Dialog `title` prop. */
 declare const DialogTitle: React.ForwardRefExoticComponent<Omit<Dialog$1.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+/** @deprecated Use the structured Dialog `description` prop. */
 declare const DialogDescription: React.ForwardRefExoticComponent<Omit<Dialog$1.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 /**
+ * @deprecated The structured Dialog has no eyebrow; put the context in `title` or `description`.
+ *
  * DialogEyebrow — 제목 위 카테고리 overline(eyebrow). 2026 editorial 헤더 위계의 최상단.
  * DialogHeader 안에서 DialogTitle '위'에 둔다(예: "시간 제어" / "시험 제어").
  * 작은 uppercase + tracking + muted 색으로 title(bold)과 대비.
  */
 declare const DialogEyebrow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
 /**
+ * @deprecated Use the structured Dialog (`title`, `footer`, `size`).
+ *
  * DialogRawContent — shadcn 기본 스타일 없는 순수 radix Content.
  * 자체 head/body/foot 슬롯을 가진 ModalShell 등 커스텀 구현용.
  * DialogPortal + DialogOverlay와 함께 수동으로 조합해서 사용.
@@ -733,13 +803,24 @@ interface FormModalProps {
     onSubmit: () => void | Promise<void>;
     submitLabel?: string;
     cancelLabel?: string;
+    /** Dialog `size="lg"` (720). Default: `"md"` (560). */
     wide?: boolean;
     loading?: boolean;
+    /** Rendered at the top of the body. */
     status?: React.ReactNode;
-    /** Below 900px: `"center"` card (default) or `"sheet"` bottom sheet — see Dialog `mobilePresentation`. */
+    /**
+     * @deprecated Ignored. Dialog is a bottom sheet below 900px on its own.
+     */
     mobilePresentation?: DialogMobilePresentation;
 }
-declare function FormModal({ open, onOpenChange, title, description, children, onSubmit, submitLabel, cancelLabel, wide, loading, status, mobilePresentation, }: FormModalProps): react_jsx_runtime.JSX.Element;
+/**
+ * @deprecated Use Dialog with onSubmit.
+ *
+ * A thin wrapper over the structured Dialog's form mode: `wide` → `size="lg"`, `status` at the top
+ * of the body. The submit guard is Dialog's: one submit at a time, no closing while it runs, one
+ * close on success, open on failure (the rejection propagates).
+ */
+declare function FormModal({ open, onOpenChange, title, description, children, onSubmit, submitLabel, cancelLabel, wide, loading, status, }: FormModalProps): react_jsx_runtime.JSX.Element;
 
 interface InfoModalProps {
     open: boolean;
@@ -748,12 +829,17 @@ interface InfoModalProps {
     description?: string;
     children: React.ReactNode;
     closeLabel?: string;
+    /** @deprecated Ignored. Content that needs the wide box belongs in Dialog. */
     width?: "default" | "wide";
     footer?: React.ReactNode;
-    /** Below 900px: `"center"` card (default) or `"sheet"` bottom sheet — see Dialog `mobilePresentation`. */
+    /** @deprecated Ignored. AlertDialog stays a centered card below 900px. */
     mobilePresentation?: DialogMobilePresentation;
 }
-declare function InfoModal({ open, onOpenChange, title, description, children, closeLabel, width, footer, mobilePresentation, }: InfoModalProps): react_jsx_runtime.JSX.Element;
+/**
+ * @deprecated Use AlertDialog (short) or Dialog (long content). InfoModal is a thin wrapper over
+ * AlertDialog's acknowledge mode: role `alertdialog`, outside click does not close it.
+ */
+declare function InfoModal({ open, onOpenChange, title, description, children, closeLabel, footer, }: InfoModalProps): react_jsx_runtime.JSX.Element;
 
 type FilterToolbarCollapseBelow = "sm" | "md" | "lg" | "never";
 interface FilterToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -1002,10 +1088,69 @@ interface ConfirmDialogProps {
     children?: React.ReactNode;
     /** Keeps the confirm button disabled (e.g. until the typed count matches). */
     confirmDisabled?: boolean;
-    /** Below 900px: `"center"` card (default) or `"sheet"` bottom sheet — see Dialog `mobilePresentation`. */
+    /**
+     * @deprecated Ignored. AlertDialog stays a centered card below 900px.
+     */
     mobilePresentation?: DialogMobilePresentation;
+    /** Scrim preset; wins over `<html data-scrim>`. Default: the root preset, else `--scrim`. */
+    scrim?: OverlayScrim;
 }
-declare function ConfirmDialog({ open, onOpenChange, title, description, tone, confirmLabel, cancelLabel, onConfirm, loading, children, confirmDisabled, mobilePresentation, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
+/**
+ * @deprecated Use AlertDialog. ConfirmDialog is a thin wrapper over it: the surface has role
+ * `alertdialog`, an outside click does not close it, and it stays a centered card below 900px.
+ */
+declare function ConfirmDialog({ open, onOpenChange, title, description, tone, confirmLabel, cancelLabel, onConfirm, loading, children, confirmDisabled, scrim, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
+
+/** Confirm button tone. Same words as Button `tone`. */
+type AlertDialogTone = "neutral" | "danger";
+interface AlertDialogBaseProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Heading, also the dialog's accessible name. */
+    title: string;
+    /** One or two sentences under the title, also the accessible description. */
+    description?: string;
+    /**
+     * Short body between the description and the footer: one input for a typed confirmation, or a
+     * short list. When it holds an input, that input gets the initial focus.
+     */
+    children?: React.ReactNode;
+    /** Scrim preset; wins over `<html data-scrim>`. Default: the root preset, else `--scrim`. */
+    scrim?: OverlayScrim;
+}
+interface AlertDialogConfirmProps {
+    /** Confirm button label. Its presence selects confirm mode (`[cancel][confirm]`). */
+    confirmLabel: string;
+    /**
+     * Runs on confirm. While it runs, Escape and cancel do nothing; when it resolves the dialog
+     * closes. When it rejects the dialog stays open (see `onError`).
+     */
+    onConfirm: () => void | Promise<void>;
+    /** Receives a rejection of `onConfirm` instead of rethrowing it. Without it the rejection propagates. */
+    onError?: (error: unknown) => void;
+    /** Cancel button label. Default '취소'. Initial focus is on it unless the body holds an input. */
+    cancelLabel?: string;
+    /** Confirm button tone. Default `"neutral"`. */
+    tone?: AlertDialogTone;
+    /** Keeps the confirm button disabled (e.g. until the typed count matches). */
+    confirmDisabled?: boolean;
+    /** Shows the confirm button busy and blocks closing, for an action run outside `onConfirm`. */
+    loading?: boolean;
+    acknowledgeLabel?: never;
+}
+interface AlertDialogAcknowledgeProps {
+    /** Label of the single button that closes (acknowledge mode). Default '확인'. Initial focus is on it. */
+    acknowledgeLabel?: string;
+    confirmLabel?: never;
+    onConfirm?: never;
+    onError?: never;
+    cancelLabel?: never;
+    tone?: never;
+    confirmDisabled?: never;
+    loading?: never;
+}
+type AlertDialogProps = AlertDialogBaseProps & (AlertDialogConfirmProps | AlertDialogAcknowledgeProps);
+declare function AlertDialog({ open, onOpenChange, title, description, children, scrim, confirmLabel, onConfirm, onError, cancelLabel, tone, confirmDisabled, loading, acknowledgeLabel, }: AlertDialogProps): React.ReactElement;
 
 declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof Separator$1.Root>): react_jsx_runtime.JSX.Element;
 
@@ -1031,19 +1176,72 @@ type SheetMotionConfig = {
     duration?: SheetMotionDuration;
     easing?: SheetMotionEasing;
 };
-declare function Sheet({ ...props }: React.ComponentProps<typeof Dialog$1.Root>): react_jsx_runtime.JSX.Element;
+/** Structured Sheet width from 900px: 480 · 720 · viewport minus `--space-8`. */
+type SheetSize = "md" | "lg" | "full";
+/**
+ * Structured Sheet (spec §3.3): a side surface for supporting work without leaving the page. X,
+ * outside click and Escape close, the body scrolls, a bottom sheet below 900px (OVERLAY_POLICY.sheet).
+ */
+interface SheetProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Heading, also the sheet's accessible name. Its presence selects the structured mode. */
+    title: string;
+    /** Line under the title, also the accessible description. */
+    description?: string;
+    /** Above the title: a path or status badges. */
+    caption?: React.ReactNode;
+    /** Header controls before the X, e.g. an expand toggle. */
+    headerActions?: React.ReactNode;
+    /** Edge from 900px. Default `"right"`. Below 900px it is a bottom sheet. */
+    side?: "right" | "left";
+    /** Width from 900px. Default `"md"`. */
+    size?: SheetSize;
+    /** Body. Scrolls inside the sheet. */
+    children: React.ReactNode;
+    /** Footer content (buttons), under one line. No footer, no line. */
+    footer?: React.ReactNode;
+    /** Accessible name of the X. Default '닫기'. */
+    closeLabel?: string;
+    /** Side panel motion from 900px (`false`: none). Same as SheetContent `motion`. */
+    motion?: SheetMotionConfig | false;
+    /** Scrim preset; wins over `<html data-scrim>`. */
+    scrim?: OverlayScrim;
+    /** Body content layout only (not the box). */
+    className?: string;
+}
+/** Legacy root: the Radix Dialog Root for `SheetContent` composition (no `title`). */
+type SheetRootProps = React.ComponentProps<typeof Dialog$1.Root> & {
+    title?: never;
+};
+declare function Sheet(props: SheetProps | SheetRootProps): react_jsx_runtime.JSX.Element;
 declare function SheetTrigger({ ...props }: React.ComponentProps<typeof Dialog$1.Trigger>): react_jsx_runtime.JSX.Element;
 declare function SheetClose({ ...props }: React.ComponentProps<typeof Dialog$1.Close>): react_jsx_runtime.JSX.Element;
-declare function SheetContent({ className, children, side, mobileSide, motion, showCloseButton, style, onOpenAutoFocus, onCloseAutoFocus, ...props }: React.ComponentProps<typeof Dialog$1.Content> & {
+/**
+ * @deprecated Legacy composition, removed in 0.21. Use `Sheet` with `title` (the structured Sheet).
+ */
+declare function SheetContent({ className, children, side, mobileSide, motion, showCloseButton, scrim, style, onOpenAutoFocus, onCloseAutoFocus, ...props }: React.ComponentProps<typeof Dialog$1.Content> & {
+    /**
+     * Edge. `"top"` and `"bottom"` are deprecated: the structured Sheet takes `"right"` or `"left"`
+     * from 900px and is a bottom sheet below.
+     */
     side?: "top" | "right" | "bottom" | "left";
+    /** @deprecated The structured Sheet is a bottom sheet below 900px by rule. */
     mobileSide?: "top" | "right" | "bottom" | "left";
     motion?: SheetMotionConfig | false;
     showCloseButton?: boolean;
+    /** Scrim preset; wins over `<html data-scrim>`. Default: the root preset, else `--scrim`. */
+    scrim?: OverlayScrim;
 }): react_jsx_runtime.JSX.Element;
+/** @deprecated Legacy composition, removed in 0.21. Use `Sheet` with `title` (the structured Sheet): the body is the Sheet's children. */
 declare function SheetBody({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/** @deprecated Legacy composition, removed in 0.21. Use `Sheet` with `title` (the structured Sheet): `title`, `description`, `caption`, `headerActions`. */
 declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/** @deprecated Legacy composition, removed in 0.21. Use `Sheet` with `title` (the structured Sheet): `footer`. */
 declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/** @deprecated Legacy composition, removed in 0.21. Use `Sheet` with `title` (the structured Sheet): `title`. */
 declare function SheetTitle({ className, ...props }: React.ComponentProps<typeof Dialog$1.Title>): react_jsx_runtime.JSX.Element;
+/** @deprecated Legacy composition, removed in 0.21. Use `Sheet` with `title` (the structured Sheet): `description`. */
 declare function SheetDescription({ className, ...props }: React.ComponentProps<typeof Dialog$1.Description>): react_jsx_runtime.JSX.Element;
 
 interface SheetDrawerProps {
@@ -1068,6 +1266,11 @@ interface SheetDrawerProps {
     motion?: SheetMotionConfig | false;
     closeLabel?: string;
 }
+/**
+ * @deprecated Use `Sheet` with `title` (the structured Sheet). SheetDrawer is now a thin wrapper:
+ * `width` default/wide/full → `size` md/lg/full, `expanded` → `full`, and the expand toggle goes to
+ * `headerActions`.
+ */
 declare function SheetDrawer({ open, onOpenChange, caption, title, description, children, expandHref, onExpand, expandLabel, expanded, onExpandedChange, collapseLabel, footer, width, motion, closeLabel, }: SheetDrawerProps): react_jsx_runtime.JSX.Element;
 
 type ActionSheetIconProps = {
@@ -1093,11 +1296,64 @@ interface ActionSheetProps {
     title: string;
     description?: string;
     items: ActionSheetItem[];
-    /** Accessible name of the header close button. */
+    /** Accessible name of the screen-reader-only close button (D9). */
     closeLabel?: string;
 }
+/**
+ * @deprecated Use ActionMenu: the same items become a DropdownMenu from 900px and this menu sheet
+ * below, from one trigger.
+ */
 declare function ActionSheet({ open, onOpenChange, title, description, items, closeLabel, }: ActionSheetProps): react_jsx_runtime.JSX.Element;
 
+/** Props an item icon receives: a Lucide icon or any component taking `size` and `strokeWidth`. */
+type ActionMenuIconProps = {
+    size?: number | string;
+    strokeWidth?: number | string;
+    className?: string;
+    "aria-hidden"?: boolean;
+};
+interface ActionMenuItem {
+    id: string;
+    label: string;
+    /** Leading icon. */
+    icon?: React.ComponentType<ActionMenuIconProps>;
+    /** Secondary line under the label (menu sheet only). */
+    description?: string;
+    /** Danger color (DropdownMenuItem `variant="destructive"`, the sheet row's error color). */
+    destructive?: boolean;
+    disabled?: boolean;
+    /** Runs after the menu has closed and focus is back on the trigger. */
+    onSelect: () => void;
+}
+interface ActionMenuGroup {
+    id: string;
+    /** Group heading. */
+    label?: string;
+    items: ActionMenuItem[];
+}
+interface ActionMenuBaseProps {
+    /** The button that opens the menu, e.g. an IconButton with an `aria-label`. */
+    trigger: React.ReactElement;
+    /** Heading of the menu sheet below 900px (also its accessible name). The dropdown shows none. */
+    title?: string;
+    /** Line under the heading, menu sheet only (from ActionSheet). */
+    description?: string;
+    /** Controlled open state (optional). */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Accessible name of the menu sheet's screen-reader-only close button. Default '닫기'. */
+    closeLabel?: string;
+}
+type ActionMenuProps = ActionMenuBaseProps & ({
+    items: ActionMenuItem[];
+    groups?: never;
+} | {
+    /** Items in groups, with a separator between groups. Use instead of `items`. */
+    groups: ActionMenuGroup[];
+    items?: never;
+});
+declare function ActionMenu({ trigger, title, description, open: openProp, onOpenChange, closeLabel, items, groups, }: ActionMenuProps): react_jsx_runtime.JSX.Element;
+
 declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof Tooltip$1.Provider>): react_jsx_runtime.JSX.Element;
 interface TooltipProps extends React.ComponentProps<typeof Tooltip$1.Root> {
     /**
@@ -1828,4 +2084,4 @@ interface OrganizationLogoProps extends Omit<SVGProps<SVGSVGElement>, "width" |
 }
 declare function OrganizationLogo({ organization, size, className, style, role, "aria-label": ariaLabel, "aria-hidden": ariaHidden, ...props }: OrganizationLogoProps): react_jsx_runtime.JSX.Element;
 
-export { ActionFooter, type ActionFooterAction, type ActionFooterProps, type ActionFooterStatus, ActionSheet, type ActionSheetIconProps, type ActionSheetItem, type ActionSheetProps, Alert, type AlertEmphasis, type AlertProps, type AlertVariant, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, BulkActionBar, type BulkActionBarAction, type BulkActionBarProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardProse, CardTitle, type CardVariant, type CardVariantOptions, Checkbox, type CheckboxCheckedState, CheckboxGroup, type CheckboxGroupAppearance, type CheckboxGroupColumns, CheckboxGroupContext, type CheckboxGroupContextValue, type CheckboxGroupDensity, type CheckboxGroupOrientation, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, Chip, type ChipProps, type ChipSize, type ChipTone, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, ContextMenu, type ContextMenuPosition, type ContextMenuProps, CopyButton, type CopyButtonProps, DataLayout, type DataLayoutProps, DataTable, type DataTableColumn, type DataTableLinkProps, type DataTableProps, type DataTableSort, type DataTableVirtualHandle, type DataTableVirtualOptions, type DataTableVirtualRange, DetailLayout, type DetailLayoutProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogEyebrow, DialogFooter, DialogHeader, type DialogMobilePresentation, DialogOverlay, DialogPortal, DialogRawContent, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, type EmptyStateSize, type EmptyStateTone, type EmptyStateVariantOptions, ErrorState, type ErrorStateProps, FileUploadZone, type FileUploadZoneProps, FilterToolbar, type FilterToolbarCollapseBelow, type FilterToolbarProps, FormField, type FormFieldProps, type FormFieldRenderProps, FormLayout, type FormLayoutProps, type FormLayoutSection, FormModal, type FormModalProps, IconButton, type IconButtonBadgeTone, type IconButtonProps, type IconButtonSize, type IconButtonVariant, InfoModal, type InfoModalProps, InlineAlert, type InlineAlertProps, type InlineAlertSurface, Input, type InputProps, type InputSize, type InputSizeLegacy, type InputState, Label, type LabelProps, ModeToggle, type ModeToggleOption, type ModeToggleProps, NotificationBadge, type NotificationBadgePlacement, type NotificationBadgeProps, type NotificationBadgeSize, OTPField, type OTPFieldProps, type OTPFieldSize, OlunLogo, OlunSymbol, type OlunTheme, type OlunThemeDuration, type OlunThemeState, OrganizationLogo, type OrganizationLogoId, type OrganizationLogoProps, PageHeader, type PageHeaderProps, PageSizeSelect, type PageSizeSelectProps, type PageSizeSelectSize, Pagination, type PaginationProps, type PaginationSize, PermissionContext, type PermissionEvaluator, type PermissionFallback, PermissionGuard, type PermissionGuardProps, PermissionProvider, type PermissionProviderProps, type PermissionScope, type PermissionState, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, Progress, type ProgressProps, type ProgressStatus, Radio, RadioGroup, type RadioGroupAppearance, type RadioGroupColumns, type RadioGroupDensity, type RadioGroupOrientation, type RadioGroupProps, type RadioProps, ScrollArea, ScrollBar, SearchField, type SearchFieldProps, type SearchFieldSize, Select, type SelectAppearance, type SelectOption, type SelectProps, type SelectSize, type SelectState, type SelectVariant, type SemanticRole, Separator, type SetOlunThemeOptions, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetDrawer, type SheetDrawerProps, SheetFooter, SheetHeader, type SheetMotionConfig, type SheetMotionDuration, type SheetMotionEasing, type SheetMotionType, SheetTitle, SheetTrigger, Skeleton, type SkeletonProps, SkeletonRow, type SkeletonRowColumn, type SkeletonRowProps, SkeletonText, type SkeletonTextProps, Spinner, type SpinnerProps, StatusBadge, type StatusBadgeEmphasis, type StatusBadgeProps, type StatusBadgeSize, type StatusBadgeStatus, type SurfaceLevel, Switch, type SwitchProps, type TabItem, Tabs, TabsContent, type TabsProps, type TabsVariant, Textarea, type TextareaProps, type TextareaSize, type TextareaSizeLegacy, type TextareaState, ThemeFab, type ThemeFabProps, ThemeToggle, Toast, type ToastAction, type ToastItem, type ToastOptions, ToastProvider, ToastRoot, type ToastVariant, ToastViewport, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TreeItemRowVariantProps, type TreeItemState, type TreeNode, TreeView, type TreeViewProps, TwoTierBadge, type TwoTierBadgeEmphasis, type TwoTierBadgeProps, type TwoTierBadgeSize, type TwoTierBadgeTone, type UseOlunThemeValue, WizardLayout, type WizardLayoutProps, type WizardStep, type WizardStepState, actionFooterStatusVariants, actionFooterVariants, buttonVariants, cardVariants, checkboxBoxVariants, checkboxFieldVariants, checkboxGroupBoxVariants, checkboxGroupItemVariants, checkboxGroupVariants, checkboxRootVariants, checkboxVariants, chipCountVariants, chipVariants, cn, dataTableRowVariants, dataTableVariants, emptyStateIconVariants, emptyStateVariants, errorStateVariants, evaluatePermission, fileUploadIconVariants, fileUploadZoneVariants, formFieldControlStackClassName, formFieldDescriptionClassName, formFieldErrorClassName, formFieldLabelClassName, formFieldRequiredClassName, formFieldVariants, getOlunThemeState, getToastDuration, iconButtonBadgeVariants, iconButtonVariants, inputMessageVariants, inputVariants, limitToasts, modeToggleItemVariants, modeToggleVariants, notificationBadgeVariants, otpCellVariants, otpFieldGroupVariants, otpFieldMessageVariants, otpFieldVariants, paginationControlVariants, paginationVariants, radioControlVariants, radioGroupVariants, radioVariants, searchFieldInputVariants, searchFieldVariants, selectMessageVariants, selectVariants, setOlunTheme, skeletonVariants, spinnerVariants, tabsBadgeVariants, tabsListVariants, tabsRootVariants, tabsTriggerVariants, textareaMessageVariants, textareaVariants, toast, toastVariants, toastViewportVariants, treeItemRowVariants, treeViewVariants, useOlunTheme, usePermission };
+export { ActionFooter, type ActionFooterAction, type ActionFooterProps, type ActionFooterStatus, ActionMenu, type ActionMenuGroup, type ActionMenuItem, type ActionMenuProps, ActionSheet, type ActionSheetIconProps, type ActionSheetItem, type ActionSheetProps, Alert, AlertDialog, type AlertDialogProps, type AlertDialogTone, type AlertEmphasis, type AlertProps, type AlertVariant, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, BulkActionBar, type BulkActionBarAction, type BulkActionBarProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardProse, CardTitle, type CardVariant, type CardVariantOptions, Checkbox, type CheckboxCheckedState, CheckboxGroup, type CheckboxGroupAppearance, type CheckboxGroupColumns, CheckboxGroupContext, type CheckboxGroupContextValue, type CheckboxGroupDensity, type CheckboxGroupOrientation, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, Chip, type ChipProps, type ChipSize, type ChipTone, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, ContextMenu, type ContextMenuPosition, type ContextMenuProps, CopyButton, type CopyButtonProps, DataLayout, type DataLayoutProps, DataTable, type DataTableColumn, type DataTableLinkProps, type DataTableProps, type DataTableSort, type DataTableVirtualHandle, type DataTableVirtualOptions, type DataTableVirtualRange, DetailLayout, type DetailLayoutProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogEyebrow, DialogFooter, DialogHeader, type DialogMobilePresentation, DialogOverlay, DialogPortal, type DialogProps, DialogRawContent, type DialogSize, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, type EmptyStateSize, type EmptyStateTone, type EmptyStateVariantOptions, ErrorState, type ErrorStateProps, FileUploadZone, type FileUploadZoneProps, FilterToolbar, type FilterToolbarCollapseBelow, type FilterToolbarProps, FormField, type FormFieldProps, type FormFieldRenderProps, FormLayout, type FormLayoutProps, type FormLayoutSection, FormModal, type FormModalProps, IconButton, type IconButtonBadgeTone, type IconButtonProps, type IconButtonSize, type IconButtonVariant, InfoModal, type InfoModalProps, InlineAlert, type InlineAlertProps, type InlineAlertSurface, Input, type InputProps, type InputSize, type InputSizeLegacy, type InputState, Label, type LabelProps, ModeToggle, type ModeToggleOption, type ModeToggleProps, NotificationBadge, type NotificationBadgePlacement, type NotificationBadgeProps, type NotificationBadgeSize, OTPField, type OTPFieldProps, type OTPFieldSize, OlunLogo, OlunSymbol, type OlunTheme, type OlunThemeDuration, type OlunThemeState, OrganizationLogo, type OrganizationLogoId, type OrganizationLogoProps, type OverlayScrim, PageHeader, type PageHeaderProps, PageSizeSelect, type PageSizeSelectProps, type PageSizeSelectSize, Pagination, type PaginationProps, type PaginationSize, PermissionContext, type PermissionEvaluator, type PermissionFallback, PermissionGuard, type PermissionGuardProps, PermissionProvider, type PermissionProviderProps, type PermissionScope, type PermissionState, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, Progress, type ProgressProps, type ProgressStatus, Radio, RadioGroup, type RadioGroupAppearance, type RadioGroupColumns, type RadioGroupDensity, type RadioGroupOrientation, type RadioGroupProps, type RadioProps, ScrollArea, ScrollBar, SearchField, type SearchFieldProps, type SearchFieldSize, Select, type SelectAppearance, type SelectOption, type SelectProps, type SelectSize, type SelectState, type SelectVariant, type SemanticRole, Separator, type SetOlunThemeOptions, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetDrawer, type SheetDrawerProps, SheetFooter, SheetHeader, type SheetMotionConfig, type SheetMotionDuration, type SheetMotionEasing, type SheetMotionType, type SheetProps, type SheetSize, SheetTitle, SheetTrigger, Skeleton, type SkeletonProps, SkeletonRow, type SkeletonRowColumn, type SkeletonRowProps, SkeletonText, type SkeletonTextProps, Spinner, type SpinnerProps, StatusBadge, type StatusBadgeEmphasis, type StatusBadgeProps, type StatusBadgeSize, type StatusBadgeStatus, type SurfaceLevel, Switch, type SwitchProps, type TabItem, Tabs, TabsContent, type TabsProps, type TabsVariant, Textarea, type TextareaProps, type TextareaSize, type TextareaSizeLegacy, type TextareaState, ThemeFab, type ThemeFabProps, ThemeToggle, Toast, type ToastAction, type ToastItem, type ToastOptions, ToastProvider, ToastRoot, type ToastVariant, ToastViewport, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TreeItemRowVariantProps, type TreeItemState, type TreeNode, TreeView, type TreeViewProps, TwoTierBadge, type TwoTierBadgeEmphasis, type TwoTierBadgeProps, type TwoTierBadgeSize, type TwoTierBadgeTone, type UseOlunThemeValue, WizardLayout, type WizardLayoutProps, type WizardStep, type WizardStepState, actionFooterStatusVariants, actionFooterVariants, buttonVariants, cardVariants, checkboxBoxVariants, checkboxFieldVariants, checkboxGroupBoxVariants, checkboxGroupItemVariants, checkboxGroupVariants, checkboxRootVariants, checkboxVariants, chipCountVariants, chipVariants, cn, dataTableRowVariants, dataTableVariants, emptyStateIconVariants, emptyStateVariants, errorStateVariants, evaluatePermission, fileUploadIconVariants, fileUploadZoneVariants, formFieldControlStackClassName, formFieldDescriptionClassName, formFieldErrorClassName, formFieldLabelClassName, formFieldRequiredClassName, formFieldVariants, getOlunThemeState, getToastDuration, iconButtonBadgeVariants, iconButtonVariants, inputMessageVariants, inputVariants, limitToasts, modeToggleItemVariants, modeToggleVariants, notificationBadgeVariants, otpCellVariants, otpFieldGroupVariants, otpFieldMessageVariants, otpFieldVariants, paginationControlVariants, paginationVariants, radioControlVariants, radioGroupVariants, radioVariants, searchFieldInputVariants, searchFieldVariants, selectMessageVariants, selectVariants, setOlunTheme, skeletonVariants, spinnerVariants, tabsBadgeVariants, tabsListVariants, tabsRootVariants, tabsTriggerVariants, textareaMessageVariants, textareaVariants, toast, toastVariants, toastViewportVariants, treeItemRowVariants, treeViewVariants, useOlunTheme, usePermission };