@olundot/ui 0.20.0-next.1 → 0.20.0-next.11

package/dist/index.d.ts

@@ -3,9 +3,9 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import * as React from 'react';
 import { HTMLAttributes, ReactNode, SVGProps } from 'react';
 import { VariantProps } from 'class-variance-authority';
-import { LucideIcon } from 'lucide-react';
 import { Select as Select$1, Label as Label$1, Switch as Switch$1, Tabs as Tabs$1, Dialog as Dialog$1, DropdownMenu as DropdownMenu$1, Separator as Separator$1, Avatar as Avatar$1, Tooltip as Tooltip$1, Popover as Popover$1, Checkbox as Checkbox$1, RadioGroup as RadioGroup$1, ScrollArea as ScrollArea$1 } from 'radix-ui';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { LucideIcon } from 'lucide-react';
 
 declare function cn(...inputs: ClassValue[]): string;
 
@@ -31,80 +31,74 @@ declare function useOlunTheme(): UseOlunThemeValue;
 
 type SurfaceLevel = "surface" | "canvas" | "raised";
 
-type ActionAppearance = 'filled' | 'outline' | 'ghost';
 type ActionTone = 'primary' | 'neutral' | 'danger';
 type FilledDefaultActionStyle = {
     appearance?: 'filled';
     tone?: ActionTone;
 } | {
-    appearance: 'outline' | 'ghost';
+    appearance: 'outline';
+    tone?: 'neutral' | 'danger';
+} | {
+    appearance: 'ghost';
     tone?: 'neutral';
 };
-type GhostDefaultActionStyle = {
+type OutlineDefaultActionStyle = {
     appearance: 'filled';
     tone?: ActionTone;
 } | {
-    appearance: 'outline' | 'ghost';
+    appearance?: 'outline';
+    tone?: 'neutral' | 'danger';
+} | {
+    appearance: 'ghost';
     tone?: 'neutral';
+};
+type GhostDefaultActionStyle = {
+    appearance: 'filled';
+    tone?: ActionTone;
+} | {
+    appearance: 'outline';
+    tone?: 'neutral' | 'danger';
 } | {
-    appearance?: never;
-    tone: 'neutral';
+    appearance?: 'ghost';
+    tone?: 'neutral';
 };
 
 declare const buttonCva: (props?: ({
-    size?: "default" | "md" | "xs" | "sm" | "lg" | "xl" | "icon" | "icon-xs" | null | undefined;
-    appearance?: "filled" | "outline" | "ghost" | null | undefined;
+    appearance?: "filled" | "outline" | "ghost" | "link" | null | undefined;
     tone?: "primary" | "neutral" | "danger" | null | undefined;
-    variant?: "default" | "outline" | "ghost" | "primary" | "danger" | "emergency" | "subtle" | "destructive" | "secondary" | "link" | null | undefined;
+    size?: "default" | "md" | "xs" | "sm" | "lg" | "xl" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ButtonVariantsOptions = Parameters<typeof buttonCva>[0];
 declare function buttonVariants(options?: ButtonVariantsOptions): string;
-type ButtonVariant = NonNullable<VariantProps<typeof buttonVariants>['variant']>;
 type ButtonSize = NonNullable<VariantProps<typeof buttonVariants>['size']>;
-type ButtonStyleProps = (FilledDefaultActionStyle & {
-    /**
-     * @deprecated Use `appearance` × `tone` instead. Removed in 0.20.
-     */
-    variant?: never;
-}) | {
-    /**
-     * @deprecated Use `appearance` × `tone`: `primary`/`default` → filled + primary ·
-     * `secondary`/`outline`/`subtle` → outline + neutral · `ghost` → ghost + neutral ·
-     * `danger`/`destructive`/`emergency` → filled + danger · `link` → no Button replacement
-     * (a link component is planned). Removed in 0.20.
-     */
-    variant?: ButtonVariant | null;
+type ButtonStyleProps = FilledDefaultActionStyle | {
+    appearance: 'link';
+    tone?: 'primary' | 'danger';
 };
 type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & ButtonStyleProps & {
-    /** `icon`·`icon-xs` are deprecated — use IconButton (`lg`·`md`). */
     size?: ButtonSize | null;
+    /**
+     * Renders the single child element (e.g. Next `Link`) instead of a `<button>`. Ref, `href` and
+     * anchor-typed events belong on that child; Button's own ref and handlers stay typed for
+     * `HTMLButtonElement`. Disabled or loading, the child stays in place with its `href` but takes
+     * `aria-disabled`, leaves the tab order and swallows clicks.
+     */
     asChild?: boolean;
-    /** @deprecated Use IconButton with `label` (or children). Removed in 0.20. */
-    leadingIcon?: LucideIcon;
-    /** @deprecated Use IconButton with `label` and `iconPosition="end"`. Removed in 0.20. */
-    trailingIcon?: LucideIcon;
     loading?: boolean;
+    /** Trailing ▾ for a menu trigger. The trigger (DropdownMenu etc.) supplies `aria-haspopup`. */
+    menuIndicator?: boolean;
 };
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
-type CopyButtonProps = Omit<ButtonProps, 'children' | 'leadingIcon' | 'loading' | 'size' | 'trailingIcon' | 'variant'> & {
+type CopyButtonProps = Omit<ButtonProps, 'appearance' | 'children' | 'loading' | 'size' | 'tone' | 'variant'> & OutlineDefaultActionStyle & {
     value: string;
     label?: React.ReactNode;
     copiedLabel?: React.ReactNode;
     onCopied?: () => void;
     size?: ButtonSize;
-    variant?: ButtonVariant;
     duration?: number;
 };
-declare const CopyButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "size" | "variant" | "children" | "leadingIcon" | "trailingIcon" | "loading"> & {
-    value: string;
-    label?: React.ReactNode;
-    copiedLabel?: React.ReactNode;
-    onCopied?: () => void;
-    size?: ButtonSize;
-    variant?: ButtonVariant;
-    duration?: number;
-} & React.RefAttributes<HTMLButtonElement>>;
+declare const CopyButton: React.ForwardRefExoticComponent<CopyButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
 declare const inputVariants: (props?: ({
     size?: "md" | "sm" | "lg" | null | undefined;
@@ -185,19 +179,25 @@ declare const FileUploadZone: React.ForwardRefExoticComponent<FileUploadZoneProp
 
 type AlertVariant = 'info' | 'success' | 'warning' | 'error';
 type AlertEmphasis = 'subtle' | 'strong';
-type InlineAlertSurface = 'filled' | 'plain';
+type AlertMarker = 'icon' | 'dot';
 interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'> {
     variant?: AlertVariant;
+    /** `subtle` (default) or `strong` (status-colored surface). */
     emphasis?: AlertEmphasis;
-    title?: ReactNode;
-    children: ReactNode;
+    /** Status mark before the title. `icon` (default) is the status icon, `dot` a small status dot. */
+    marker?: AlertMarker;
+    title: ReactNode;
+    /** Description under the title. Without it the alert is one line, centered. */
+    children?: ReactNode;
+    /** Control at the end of the title line, before the dismiss button. Narrow alerts put it under the text. */
+    action?: ReactNode;
     onDismiss?: () => void;
 }
 declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
 interface InlineAlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     variant?: AlertVariant;
-    emphasis?: AlertEmphasis;
-    surface?: InlineAlertSurface;
+    /** Status mark before the text. `icon` (default) is the status icon, `dot` a small status dot. */
+    marker?: AlertMarker;
     children: ReactNode;
 }
 declare const InlineAlert: React.ForwardRefExoticComponent<InlineAlertProps & React.RefAttributes<HTMLDivElement>>;
@@ -285,6 +285,8 @@ interface SelectProps extends Omit<React.ComponentPropsWithoutRef<typeof Select$
     className?: string;
     id?: string;
     label?: React.ReactNode;
+    /** Label position: above the field by default, or inside the trigger before its value. */
+    labelPlacement?: "top" | "inline";
     /**
      * Pre-input hint text (always visible in default state). Hidden when
      * `state` is "error" or "success" — `message` takes over.
@@ -337,7 +339,8 @@ interface SelectProps extends Omit<React.ComponentPropsWithoutRef<typeof Select$
     selectVariant?: SelectVariant;
     /**
      * When `true`, prepends a reset option to the dropdown. Selecting it fires
-     * `onValueChange("")` and restores the trigger placeholder. Default `false`.
+     * `onValueChange("")` and restores the trigger placeholder. Default `true`,
+     * or `false` when `labelPlacement="inline"`. An explicit value takes precedence.
      *
      * Eliminates the need for callers to manage a sentinel value themselves —
      * use `value=""` + `onValueChange` with `clearable` for the standard pattern.
@@ -422,6 +425,13 @@ interface SwitchProps extends Omit<React.ComponentPropsWithoutRef<typeof Switch$
      * Use for pending async preference changes (e.g., saving remote setting).
      */
     loading?: boolean;
+    /**
+     * Where the label sits relative to the track. `end` (default) puts the track first,
+     * `start` puts the label first and pushes the track to the row's right edge.
+     */
+    labelPlacement?: "end" | "start";
+    /** Fills the parent's width. With `labelPlacement="start"` the track ends at the right edge. */
+    fullWidth?: boolean;
 }
 declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
 
@@ -554,8 +564,9 @@ declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & Reac
 
 interface DataLayoutProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
     /** Top block — typically a PageHeader. Owns the page's single heading and
-     *  page-level actions. */
-    header: React.ReactNode;
+     *  page-level actions. Omit when the app shell already renders the page
+     *  header; no header block or gap is rendered then. */
+    header?: React.ReactNode;
     /** Filter row — typically a FilterToolbar (search · filters · result summary). */
     toolbar?: React.ReactNode;
     /** The list body — typically a DataTable or any list/grid. */
@@ -612,6 +623,7 @@ declare const tabsBadgeVariants: (props?: class_variance_authority_types.ClassPr
 interface TabItem {
     key: string;
     label: string;
+    /** 라벨 뒤 건수 알약입니다. 0도 보이고, 1000부터는 `999+`로 보입니다. 접근 이름에는 실제 수가 들어갑니다. */
     badge?: number;
     disabled?: boolean;
 }
@@ -690,11 +702,11 @@ declare const FormLayout: React.ForwardRefExoticComponent<FormLayoutProps & Reac
 type OverlayScrim = "blur" | "dim";
 
 /**
- * @deprecated The structured Dialog (`title`) is a bottom sheet below 900px on its own.
+ * @deprecated The structured Dialog (`title`) is a bottom sheet below 1024px on its own.
  *
- * Where a dialog sits below 900px (the DS mobile band, same as Sheet `mobileSide`).
+ * Where a dialog sits below 1024px (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
+ * - `"sheet"`: a bottom sheet below 1024px — pinned to the bottom edge, full width, top corners
  *   rounded, height capped with its own scroll, sliding in on the Sheet bottom keyframes.
  *   Pure CSS, so SSR and hydration render the same tree at every width (no matchMedia swap).
  */
@@ -704,7 +716,7 @@ 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).
+ * height, a bottom sheet below 1024px (OVERLAY_POLICY.dialog).
  */
 interface DialogProps {
     open: boolean;
@@ -745,7 +757,7 @@ type DialogRootProps = React.ComponentProps<typeof Dialog$1.Root> & {
 };
 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 function DialogPortal(props: React.ComponentProps<typeof Dialog$1.Portal>): react_jsx_runtime.JSX.Element;
 declare const DialogClose: React.ForwardRefExoticComponent<Dialog$1.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
 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`. */
@@ -755,9 +767,9 @@ declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<Dialog$1.Dialo
 declare const DialogContent: React.ForwardRefExoticComponent<Omit<Dialog$1.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     showCloseButton?: boolean;
     /**
-     * @deprecated The structured Dialog (`title`) is a bottom sheet below 900px on its own.
+     * @deprecated The structured Dialog (`title`) is a bottom sheet below 1024px on its own.
      *
-     * Below 900px: `"center"` card (default) or `"sheet"` — see {@link DialogMobilePresentation}.
+     * Below 1024px: `"center"` card (default) or `"sheet"` — see {@link DialogMobilePresentation}.
      */
     mobilePresentation?: DialogMobilePresentation;
     /** Scrim preset; wins over `<html data-scrim>`. Default: the root preset, else `--scrim`. */
@@ -792,7 +804,7 @@ declare const DialogEyebrow: React.ForwardRefExoticComponent<React.HTMLAttribute
  * 자체 head/body/foot 슬롯을 가진 ModalShell 등 커스텀 구현용.
  * DialogPortal + DialogOverlay와 함께 수동으로 조합해서 사용.
  */
-declare const DialogRawContent: React.ForwardRefExoticComponent<Dialog$1.DialogContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const DialogRawContent: React.ForwardRefExoticComponent<Omit<Dialog$1.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
 interface FormModalProps {
     open: boolean;
@@ -809,7 +821,7 @@ interface FormModalProps {
     /** Rendered at the top of the body. */
     status?: React.ReactNode;
     /**
-     * @deprecated Ignored. Dialog is a bottom sheet below 900px on its own.
+     * @deprecated Ignored. Dialog is a bottom sheet below 1024px on its own.
      */
     mobilePresentation?: DialogMobilePresentation;
 }
@@ -832,7 +844,7 @@ interface InfoModalProps {
     /** @deprecated Ignored. Content that needs the wide box belongs in Dialog. */
     width?: "default" | "wide";
     footer?: React.ReactNode;
-    /** @deprecated Ignored. AlertDialog stays a centered card below 900px. */
+    /** @deprecated Ignored. AlertDialog stays a centered card below 1024px. */
     mobilePresentation?: DialogMobilePresentation;
 }
 /**
@@ -856,6 +868,103 @@ interface FilterToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const FilterToolbar: React.ForwardRefExoticComponent<FilterToolbarProps & React.RefAttributes<HTMLDivElement>>;
 
+/** 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;
+    /** Not focusable and runs nothing. */
+    disabled?: boolean;
+    /**
+     * Why the item cannot run now. The item shows faded but stays in the focus order like the other
+     * items, named by its label alone; this line sits under the label at every width as its
+     * description (`aria-describedby`), and choosing the item runs nothing and leaves the menu open.
+     * Shown instead of `description`; wins over `disabled`.
+     */
+    disabledReason?: string;
+    /** 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 1024px (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;
+
+/** The card's ⋮ menu: the same items as the desktop row menu. */
+interface ListCardActions {
+    items: readonly ActionMenuItem[];
+    /** Accessible name of the ⋮ button, e.g. the desktop ⋮ label. */
+    label: string;
+}
+interface ListCardProps {
+    title: React.ReactNode;
+    /**
+     * Up to two meta groups; each is one node or a list of values. A group is one line with its
+     * values 12px apart; values wrap to the next line whole.
+     */
+    meta?: readonly [React.ReactNode, React.ReactNode?];
+    /** One status badge at the bottom row's left. */
+    status?: React.ReactNode;
+    /** On the bottom row, after `status` or alone at its left. */
+    caption?: React.ReactNode;
+    leading?: React.ReactNode;
+    /** Optional value (score, count) at the right of the top line, before the ⋮ or the chevron. */
+    value?: React.ReactNode;
+    /**
+     * The icon at the top right. With `actions` it moves to the bottom right and the card is at
+     * least 84px tall, so the two 44px hit areas do not overlap.
+     */
+    trailing?: 'chevron' | 'none' | React.ReactNode;
+    /**
+     * ⋮ menu at the top right. With `href` or `onClick` the title becomes the link or button and
+     * its ::after covers the card, so the ⋮ button is never inside it.
+     */
+    actions?: ListCardActions;
+    href?: string;
+    linkComponent?: React.ElementType;
+    linkProps?: Record<string, unknown>;
+    onClick?: () => void;
+    /** Prefix for the `data-slot` of each part (`<slot>-title`, `<slot>-meta1`, …). */
+    slot?: string;
+    className?: string;
+}
+declare function ListCard({ title, meta, status, caption, leading, value, trailing, actions, href, linkComponent, linkProps, onClick, slot, className, }: ListCardProps): react_jsx_runtime.JSX.Element;
+
 declare const dataTableVariants: (props?: ({
     density?: "compact" | "standard" | null | undefined;
     surface?: SurfaceLevel | null | undefined;
@@ -866,12 +975,20 @@ declare const dataTableRowVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface DataTableColumn<T> {
     key: string;
-    header: React.ReactNode;
+    /** Column name as text. It is also the name of the column's cells for screen readers. */
+    header: string;
+    /** Hides the header text on screen and keeps it as the accessible name. */
+    hideHeader?: boolean;
     width?: string;
     align?: 'left' | 'right' | 'center';
     render?: (row: T) => React.ReactNode;
     tabular?: boolean;
     sortable?: boolean;
+    /**
+     * Cells of this column wrap onto several lines (at word boundaries) instead of being cut with
+     * an ellipsis; the row grows to its tallest cell. Not with `virtual`: virtual rows share one height.
+     */
+    wrap?: boolean;
 }
 interface DataTableLinkProps {
     href: string;
@@ -908,11 +1025,61 @@ interface DataTableSort {
     key: string;
     dir: 'asc' | 'desc';
 }
-interface DataTableProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>, VariantProps<typeof dataTableVariants> {
+/** One card meta group: up to two values on one line, 12px apart. */
+type DataTableMobileMetaLine = readonly [React.ReactNode, React.ReactNode?];
+type DataTableMobileCardName = {
+    title: string | number;
+    /** Accessible name of the card (`listitem`). Defaults to the title text. */
+    ariaLabel?: string;
+} | {
+    title: React.ReactNode;
+    /** Accessible name of the card (`listitem`). */
+    ariaLabel: string;
+};
+/** What one row shows as a card below the table breakpoint. */
+type DataTableMobileCardContent = DataTableMobileCardName & {
+    leading?: React.ReactNode;
+    /** Up to two meta groups under the title, one line each. */
+    meta?: readonly [DataTableMobileMetaLine, DataTableMobileMetaLine?];
+    /** One status badge at the bottom row's left. */
+    status?: React.ReactNode;
+    /** On the bottom row, after `status` or alone at its left. */
+    date?: React.ReactNode;
+    /** Optional value at the right of the card's top line, before the ⋮ or the chevron. */
+    value?: React.ReactNode;
+    /**
+     * ⋮ menu at the card's top right (a menu sheet below 1024px). `label` names the ⋮ button —
+     * pass the desktop ⋮ label. On a navigating card the chevron moves to the bottom right.
+     * With the table's `rowActions` the card takes that menu instead and this is ignored.
+     */
+    actions?: ListCardActions;
+};
+/** A row's menu: items, or groups with a separator between them. An empty list draws no ⋮. */
+type DataTableRowActions = readonly ActionMenuItem[] | readonly ActionMenuGroup[];
+interface DataTableBaseProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>, Omit<VariantProps<typeof dataTableVariants>, 'density'> {
+    /**
+     * @deprecated No effect: rows and header look the same for every value. Remove it; it will be
+     * dropped in a breaking release.
+     */
+    density?: VariantProps<typeof dataTableVariants>['density'];
     columns: DataTableColumn<T>[];
     data: T[];
     keyField: keyof T;
+    /**
+     * Maps a row to its card below the table breakpoint. Navigation, expanding, selection and
+     * the chevron come from the table (`rowHref`, `linkComponent`, `onRowClick`,
+     * `renderExpanded`, `selectable`): the card title becomes the link or button and its ::after
+     * covers the card, so the checkbox and the ⋮ stay beside it, never inside.
+     * With `virtual`, keep it stable (module function or `useCallback`) like `columns`.
+     */
+    getMobileCardContent: (row: T) => DataTableMobileCardContent;
     selectable?: boolean;
+    /**
+     * With `selectable`, `false` blocks a row's selection: its checkbox is disabled, it is never
+     * drawn selected or passed to `onSelectionChange`, and select-all counts only the other rows.
+     * Navigating, expanding and the row menu still work.
+     */
+    isRowSelectable?: (row: T) => boolean;
     selectedIds?: Set<string>;
     onSelectionChange?: (ids: Set<string>) => void;
     /** Unit in the screen-reader selection message — `12명 선택됨`. Defaults to `개`. */
@@ -925,11 +1092,30 @@ interface DataTableProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement>, '
      */
     announceSelection?: boolean;
     activeRowId?: string;
-    onRowContextMenu?: (rowId: string, event: React.MouseEvent) => void;
     sortBy?: DataTableSort;
+    /**
+     * The order the rows fall back to when the sort is cleared. Clicking its column
+     * flips between its direction and the opposite one, never to a clear that looks
+     * the same. Without `sortBy`, the header and the sort button show this sort.
+     */
+    defaultSort?: DataTableSort;
     onSortChange?: (key: string, dir: 'asc' | 'desc' | null) => void;
     loading?: boolean;
     emptyState?: React.ReactNode;
+    skeletonRowCount?: number;
+    /**
+     * Background level for the table container. Header, selected rows, loading,
+     * and empty states keep their own state styling.
+     */
+    surface?: SurfaceLevel;
+    /**
+     * Bottom of the table frame, under the rows or cards in both layouts — a `TablePagination`.
+     * The line above it is drawn only when the footer renders something.
+     */
+    footer?: React.ReactNode;
+}
+/** Rows that navigate, or a long virtual list. No expanded rows. */
+interface DataTableNavigationProps<T> {
     rowHref?: (row: T) => string;
     /**
      * Renders `rowHref` as a real link — e.g. Next `Link` — instead of
@@ -944,22 +1130,60 @@ interface DataTableProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement>, '
      * `rowHref` full-page `window.location.assign` — e.g. `router.push`.
      */
     onRowClick?: (row: T, event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
-    skeletonRowCount?: number;
     /**
-     * Virtual scrolling for long, continuously loaded lists (opt-in). Rows must
-     * share one fixed height (measured from the first rendered row). Only the
-     * visible layout — table or cards — renders rows, and only those near the
-     * viewport; rows are memoized. Works with any scroll container (window or an
+     * Virtual scrolling for long, continuously loaded lists (opt-in). Table rows must
+     * share one fixed height (measured from the first rendered row); cards are
+     * measured one by one, and unmeasured cards are estimated from the measured
+     * average. Only the visible layout — table or cards — renders rows, and only
+     * those near the viewport; rows are memoized. Works with any scroll container (window or an
      * app-shell `overflow-y-auto` main). Header "select all" still covers every
-     * loaded row. Browser find (Ctrl+F) cannot see rows outside the window.
+     * loaded row that can be selected. Browser find (Ctrl+F) cannot see rows outside the window.
      */
     virtual?: boolean | DataTableVirtualOptions;
+    renderExpanded?: never;
+    getExpandLabel?: never;
+    expandedIds?: never;
+    onExpandedChange?: never;
+}
+/**
+ * Rows that expand in place. Not with navigation (`rowHref`, `linkComponent`, `onRowClick`) or
+ * `virtual`: virtual rows share one fixed height.
+ */
+interface DataTableExpandProps<T> {
     /**
-     * Background level for the table container. Header, selected rows, loading,
-     * and empty states keep their own state styling.
+     * Content drawn under the row, full width — below the row from 1024px, inside the card below
+     * it. Giving it turns on expanding: a 32px button column at the table's end, and the card
+     * title as the toggle. Rendered on first open and kept, so closing animates.
      */
-    surface?: SurfaceLevel;
+    renderExpanded: (row: T) => React.ReactNode;
+    /** Accessible name of the expand button and of the card title button, e.g. `3번 펼치기`. */
+    getExpandLabel: (row: T) => string;
+    /** Expanded row ids (`keyField` values), several at once. Without it the table keeps the state. */
+    expandedIds?: Set<string>;
+    onExpandedChange?: (ids: Set<string>) => void;
+    rowHref?: never;
+    linkComponent?: never;
+    onRowClick?: never;
+    virtual?: never;
+}
+/**
+ * The row menu, one list for the ⋮ column from 1024px, the card ⋮ below it, and a right click
+ * on the row. Not with `onRowContextMenu`: the table opens the right-click menu itself.
+ */
+interface DataTableRowActionsProps<T> {
+    /** Items or groups of the row's menu. An empty list draws no ⋮ and keeps the column. */
+    rowActions: (row: T) => DataTableRowActions;
+    /** Accessible name of the row's ⋮ button, e.g. `김지수 더보기`. */
+    getRowActionsLabel: (row: T) => string;
+    onRowContextMenu?: never;
+}
+/** No row menu from the table; a right click is the consumer's (`onRowContextMenu`). */
+interface DataTableOwnContextMenuProps {
+    rowActions?: never;
+    getRowActionsLabel?: never;
+    onRowContextMenu?: (rowId: string, event: React.MouseEvent) => void;
 }
+type DataTableProps<T> = DataTableBaseProps<T> & (DataTableNavigationProps<T> | DataTableExpandProps<T>) & (DataTableRowActionsProps<T> | DataTableOwnContextMenuProps);
 type DataTableComponent = (<T>(props: DataTableProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null) & {
     displayName?: string;
 };
@@ -1014,24 +1238,23 @@ interface BulkActionBarAction {
     /** Disabled reason tooltip. */
     title?: string;
 }
-interface BulkActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
+interface BulkActionBarBaseProps extends React.HTMLAttributes<HTMLDivElement> {
     count: number;
     actions: BulkActionBarAction[];
     onClear: () => void;
     emptyHint?: React.ReactNode;
-    /**
-     * `floating` (default) — pill stuck to the bottom of the list, as before.
-     * `inline` — full-width band stuck to the top, placed where the status line sits
-     * under the toolbar. Render it BEFORE the list so it comes first in tab order.
-     */
-    placement?: "floating" | "inline";
     /** Count unit — `12명 선택됨`. Defaults to `개`. */
     unit?: string;
-    /** Next to the count — e.g. an "이 조건의 3,214명 모두 선택" link or a cap notice. */
+    /**
+     * Under the count in the floating card, next to it inline — e.g. an "이 조건의 3,214명
+     * 모두 선택" link or a cap notice. The card wraps it at full width, never clips it.
+     */
     summary?: React.ReactNode;
     /**
      * Inline only: a shorter `summary` (e.g. "모두 선택") swapped in when the band is too
      * narrow to show `summary` on one line. Without it, `summary` is clipped, never wrapped.
+     *
+     * @deprecated Only `placement="inline"` uses it; removed together with `inline` in the next minor.
      */
     compactSummary?: React.ReactNode;
     /**
@@ -1039,28 +1262,44 @@ interface BulkActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
      * Takes precedence over `emptyHint`; with neither, the bar hides at count 0.
      */
     idleContent?: React.ReactNode;
+}
+type BulkActionBarProps = BulkActionBarBaseProps & ({
+    /** `floating` (default) — card stuck to the bottom of the list. */
+    placement?: "floating";
+    /** Not taken by the floating card: edit-mode controls go at the right end of the toolbar. */
+    trailing?: never;
+} | {
+    /**
+     * `inline` — full-width band stuck to the top, placed where the status line sits
+     * under the toolbar. Render it BEFORE the list so it comes first in tab order.
+     * Deprecated: `inline` is removed in the next minor.
+     */
+    placement: "inline";
     /**
-     * After the clear (✕) button — e.g. an edit-mode "완료" button. On the idle line it
-     * sits at the right end, outside the `role="status"` region, so it is not re-read
-     * whenever `idleContent` changes. Same spot in both placements.
+     * Inline only: after the clear (✕) button — e.g. an edit-mode "완료" button. On the
+     * idle line it sits at the right end, outside the `role="status"` region, so it is
+     * not re-read whenever `idleContent` changes.
      */
     trailing?: React.ReactNode;
-}
+});
 /**
  * OLUN BulkActionBar — multi-select table/list actions.
  *
- * placement="floating" (default) is the bottom pill; placement="inline" is a
- * top-sticky band that replaces the status line under the toolbar, so it comes
- * before the rows in tab order. `unit` sets the count unit, `summary` holds a
- * suggestion next to the count, `idleContent` shows while nothing is selected,
- * `trailing` follows the clear button (right end of the idle line).
- * Inline, the band and the idle line are one 40px line: a long `summary` is
- * clipped or swapped for `compactSummary`, never wrapped.
+ * placement="floating" (default) is a card at the bottom of the list: the count
+ * with the clear (✕) button on its right, `summary` under it at full width, then
+ * the actions as outline sm Buttons aligned right, wrapping onto more lines when
+ * they do not fit. `variant: "destructive"` is outline danger. The card is
+ * min(360px, its slot − 32px) wide; while it is mounted the document root carries
+ * `--olun-bulk-bar-offset` (its height + bottom gap) for toasts to clear it.
+ * DOM order stays count → actions → ✕. It takes no `trailing`.
+ *
+ * placement="inline" (deprecated) is a top-sticky band that replaces the status
+ * line under the toolbar, so it comes before the rows in tab order. The band and
+ * the idle line are one 40px line: a long `summary` is clipped or swapped for
+ * `compactSummary`, never wrapped. Its actions are borderless text/icon buttons
+ * between hairline dividers; `trailing` follows the clear button.
  *
- * Low-chrome by design: actions are borderless text/icon buttons separated by
- * hairline dividers — not filled Button components. Destructive actions read as
- * error-toned text (var(--error)), not a red filled button. Two dividers are
- * always rendered: count↔actions and actions↔clear.
+ * `unit` sets the count unit, `idleContent` shows while nothing is selected.
  *
  * @example
  * <BulkActionBar count={sel.size} onClear={clear}
@@ -1089,7 +1328,7 @@ interface ConfirmDialogProps {
     /** Keeps the confirm button disabled (e.g. until the typed count matches). */
     confirmDisabled?: boolean;
     /**
-     * @deprecated Ignored. AlertDialog stays a centered card below 900px.
+     * @deprecated Ignored. AlertDialog stays a centered card below 1024px.
      */
     mobilePresentation?: DialogMobilePresentation;
     /** Scrim preset; wins over `<html data-scrim>`. Default: the root preset, else `--scrim`. */
@@ -1097,7 +1336,7 @@ interface ConfirmDialogProps {
 }
 /**
  * @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.
+ * `alertdialog`, an outside click does not close it, and it stays a centered card below 1024px.
  */
 declare function ConfirmDialog({ open, onOpenChange, title, description, tone, confirmLabel, cancelLabel, onConfirm, loading, children, confirmDisabled, scrim, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
 
@@ -1176,11 +1415,11 @@ type SheetMotionConfig = {
     duration?: SheetMotionDuration;
     easing?: SheetMotionEasing;
 };
-/** Structured Sheet width from 900px: 480 · 720 · viewport minus `--space-8`. */
+/** Structured Sheet width from 1024px: 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).
+ * outside click and Escape close, the body scrolls, a bottom sheet below 1024px (OVERLAY_POLICY.sheet).
  */
 interface SheetProps {
     open: boolean;
@@ -1193,9 +1432,9 @@ interface SheetProps {
     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. */
+    /** Edge from 1024px. Default `"right"`. Below 1024px it is a bottom sheet. */
     side?: "right" | "left";
-    /** Width from 900px. Default `"md"`. */
+    /** Width from 1024px. Default `"md"`. */
     size?: SheetSize;
     /** Body. Scrolls inside the sheet. */
     children: React.ReactNode;
@@ -1203,7 +1442,7 @@ interface SheetProps {
     footer?: React.ReactNode;
     /** Accessible name of the X. Default '닫기'. */
     closeLabel?: string;
-    /** Side panel motion from 900px (`false`: none). Same as SheetContent `motion`. */
+    /** Side panel motion from 1024px (`false`: none). Same as SheetContent `motion`. */
     motion?: SheetMotionConfig | false;
     /** Scrim preset; wins over `<html data-scrim>`. */
     scrim?: OverlayScrim;
@@ -1223,10 +1462,10 @@ declare function SheetClose({ ...props }: React.ComponentProps<typeof Dialog$1.C
 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.
+     * from 1024px and is a bottom sheet below.
      */
     side?: "top" | "right" | "bottom" | "left";
-    /** @deprecated The structured Sheet is a bottom sheet below 900px by rule. */
+    /** @deprecated The structured Sheet is a bottom sheet below 1024px by rule. */
     mobileSide?: "top" | "right" | "bottom" | "left";
     motion?: SheetMotionConfig | false;
     showCloseButton?: boolean;
@@ -1288,6 +1527,8 @@ interface ActionSheetItem {
     onSelect: () => void;
     destructive?: boolean;
     disabled?: boolean;
+    /** Why the row cannot run now: focusable, runs nothing, keeps the sheet open (see ActionMenuItem). */
+    disabledReason?: string;
 }
 interface ActionSheetProps {
     open: boolean;
@@ -1300,60 +1541,11 @@ interface ActionSheetProps {
     closeLabel?: string;
 }
 /**
- * @deprecated Use ActionMenu: the same items become a DropdownMenu from 900px and this menu sheet
+ * @deprecated Use ActionMenu: the same items become a DropdownMenu from 1024px 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> {
     /**
@@ -1512,6 +1704,7 @@ declare const emptyStateBaseVariants: (props?: ({
     bordered?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type EmptyStateTone = "neutral" | "muted" | "raised";
+type EmptyStateLayout = "inline" | "page";
 interface EmptyStateVariantOptions extends VariantProps<typeof emptyStateBaseVariants> {
     tone?: EmptyStateTone;
     surface?: SurfaceLevel;
@@ -1524,6 +1717,13 @@ declare const emptyStateIconVariants: (props?: ({
 type EmptyStateSize = NonNullable<VariantProps<typeof emptyStateBaseVariants>["size"]>;
 interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof emptyStateBaseVariants> {
     tone?: EmptyStateTone;
+    /**
+     * `inline` (default) takes its content height. `page` stands in for a whole page body: it
+     * fills the parent's width, and at >= 768px grows to the free height of the nearest scroll
+     * container and centers its content there. Below 768px it stays top-aligned with a
+     * `--space-12` top gap.
+     */
+    layout?: EmptyStateLayout;
     /**
      * Background level for the empty-state container. When provided, this
      * overrides the legacy `tone` background mapping.
@@ -1591,28 +1791,17 @@ interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
 declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLSpanElement>>;
 
 declare const iconButtonCva: (props?: ({
-    size?: "md" | "sm" | "lg" | null | undefined;
+    size?: "md" | "xs" | "sm" | "lg" | "xl" | null | undefined;
     pressed?: boolean | null | undefined;
     appearance?: "filled" | "outline" | "ghost" | null | undefined;
     tone?: "primary" | "neutral" | "danger" | null | undefined;
-    variant?: "outline" | "ghost" | "danger" | "subtle" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-type IconButtonAxisSize = "xs" | "sm" | "md" | "lg" | "xl";
-type IconButtonCvaOptions = NonNullable<Parameters<typeof iconButtonCva>[0]>;
-type IconButtonVariantsOptions = (IconButtonCvaOptions & {
-    appearance?: null;
-    tone?: null;
-}) | (Omit<IconButtonCvaOptions, "size"> & {
-    appearance?: ActionAppearance | null;
-    tone?: ActionTone | null;
-    size?: IconButtonAxisSize | null;
-});
+type IconButtonSize = NonNullable<VariantProps<typeof iconButtonCva>["size"]>;
+type IconButtonVariantsOptions = NonNullable<Parameters<typeof iconButtonCva>[0]>;
 declare function iconButtonVariants(options?: IconButtonVariantsOptions): string;
 declare const iconButtonBadgeVariants: (props?: ({
     tone?: "error" | "info" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-type IconButtonVariant = NonNullable<VariantProps<typeof iconButtonCva>["variant"]>;
-type IconButtonSize = NonNullable<VariantProps<typeof iconButtonCva>["size"]>;
 type IconButtonBadgeTone = NonNullable<VariantProps<typeof iconButtonBadgeVariants>["tone"]>;
 type IconButtonIcon = React.ComponentType<React.SVGProps<SVGSVGElement> & {
     size?: number | string;
@@ -1629,34 +1818,26 @@ type IconButtonOptionalName = {
     "aria-label"?: string;
     "aria-labelledby"?: string;
 };
+type IconButtonTextEnd = {
+    iconPosition?: "start" | "end";
+    menuIndicator?: false;
+} | {
+    iconPosition?: "start";
+    menuIndicator: true;
+};
 type IconButtonContent = (IconButtonAccessibleName & {
     label?: never;
     children?: never;
+    menuIndicator?: never;
 }) | (IconButtonOptionalName & {
     label: React.ReactNode;
     children?: never;
-}) | (IconButtonOptionalName & {
+} & IconButtonTextEnd) | (IconButtonOptionalName & {
     children: React.ReactNode;
     label?: never;
-});
-type IconButtonStyleProps = (GhostDefaultActionStyle & {
-    /**
-     * @deprecated Use `appearance` × `tone` instead. Removed in 0.20.
-     */
-    variant?: never;
+} & IconButtonTextEnd);
+type IconButtonStyleProps = GhostDefaultActionStyle & {
     /** Button's scale: `xs` 28 · `sm` 30 · `md` 32 · `lg` 36 · `xl` 40. */
-    size?: IconButtonAxisSize | null;
-}) | {
-    /**
-     * @deprecated Use `appearance` × `tone`: `ghost` → ghost + neutral · `outline` →
-     * outline + neutral · `subtle` → filled + neutral · `danger` → filled + danger
-     * (solid red; `danger` keeps its light red until removal). When moving to the new axes,
-     * `size` follows Button's scale: `sm` → `xs`, `lg` → `xl` (`md` stays). Removed in 0.20.
-     */
-    variant?: IconButtonVariant | null;
-    appearance?: never;
-    tone?: never;
-    /** Legacy scale without `appearance`/`tone`: `sm` 28 · `md` 32 · `lg` 40. */
     size?: IconButtonSize | null;
 };
 type IconButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-label" | "aria-labelledby" | "children" | "color"> & IconButtonStyleProps & IconButtonContent & {
@@ -1666,6 +1847,13 @@ type IconButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria
     badgeTone?: IconButtonBadgeTone;
     /** Icon side when the button has text. */
     iconPosition?: "start" | "end";
+    /** Like Button: the spinner takes the icon's place and the button is disabled. */
+    loading?: boolean;
+    /**
+     * Trailing ▾ for a menu trigger, with text and a start icon only. The trigger (DropdownMenu
+     * etc.) supplies `aria-haspopup`.
+     */
+    menuIndicator?: boolean;
 };
 declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
@@ -1732,6 +1920,43 @@ interface PageSizeSelectProps {
  */
 declare function PageSizeSelect({ value, onChange, options, label, unit, size, disabled, id, 'aria-label': ariaLabel, className, }: PageSizeSelectProps): react_jsx_runtime.JSX.Element;
 
+declare const TABLE_PAGE_SIZE_OPTIONS: readonly [20, 50, 100];
+interface TablePaginationProps {
+    pageSize: number;
+    /** The caller sends the list back to the first page when the page size changes. */
+    onPageSizeChange: (pageSize: number) => void;
+    /** Default `TABLE_PAGE_SIZE_OPTIONS` (20, 50, 100). */
+    pageSizeOptions?: readonly number[];
+    /** First row number on this page, from 1. 0 when there are no rows. */
+    rangeStart: number;
+    /** Last row number on this page. */
+    rangeEnd: number;
+    /** Total count. Leave it out when the API has none: only the range shows. */
+    total?: number;
+    /** Unit after the total — `명` for people. Default `개`. */
+    unit?: string;
+    hasPrev: boolean;
+    hasNext: boolean;
+    onPrev: () => void;
+    onNext: () => void;
+    /** While the next page loads, ◀ ▶ are disabled. */
+    loading?: boolean;
+    'aria-label'?: string;
+}
+type TablePaginationVisibility = Pick<TablePaginationProps, 'rangeEnd' | 'total' | 'hasPrev' | 'hasNext' | 'pageSizeOptions'>;
+/**
+ * Hide the panel when there are no rows, or when everything fits in the smallest choice
+ * (nothing to pick). Without `total`, the first page with no next page decides by its row count.
+ */
+declare function shouldHideTablePagination({ rangeEnd, total, hasPrev, hasNext, pageSizeOptions, }: TablePaginationVisibility): boolean;
+/**
+ * Page panel at the bottom of a table — page size on the left, the range (`1–100 / 총 N개`)
+ * and ◀ ▶ on the right. Put it in `DataTable`'s `footer`, which draws the line above it.
+ * Below 1024px the `페이지당` label hides (the select keeps its name), and below 400px of
+ * panel width the total hides. Both are CSS, so nothing flashes on hydration or paging.
+ */
+declare function TablePagination({ pageSize, onPageSizeChange, pageSizeOptions, rangeStart, rangeEnd, total, unit, hasPrev, hasNext, onPrev, onNext, loading, 'aria-label': ariaLabel, }: TablePaginationProps): react_jsx_runtime.JSX.Element | null;
+
 declare const modeToggleVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 declare const modeToggleItemVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 interface ModeToggleOption<T extends string> {
@@ -1746,7 +1971,7 @@ interface ModeToggleProps<T extends string> extends Omit<React.HTMLAttributes<HT
     onChange: (value: T) => void;
     itemClassName?: string;
 }
-declare function ModeToggle<T extends string>({ className, itemClassName, options, value, onChange, ...props }: ModeToggleProps<T>): react_jsx_runtime.JSX.Element;
+declare function ModeToggle<T extends string>({ className, itemClassName, options, value, onChange, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...props }: ModeToggleProps<T>): react_jsx_runtime.JSX.Element;
 
 declare const actionFooterVariants: (props?: ({
     position?: "fixed" | "static" | "sticky" | null | undefined;
@@ -1759,16 +1984,15 @@ interface ActionFooterStatus {
     kind: 'saving' | 'saved' | 'error';
     lastSavedAt?: Date;
 }
-interface ActionFooterAction {
+type ActionFooterAction = FilledDefaultActionStyle & {
     id?: string;
     label: string;
-    variant?: ButtonVariant;
     onClick: () => void;
     disabled?: boolean;
     loading?: boolean;
     permission?: string;
     leadingIcon?: LucideIcon;
-}
+};
 interface ActionFooterProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>, VariantProps<typeof actionFooterVariants> {
     status?: ActionFooterStatus;
     actions: ActionFooterAction[];
@@ -1904,11 +2128,11 @@ declare const checkboxBoxVariants: (props?: ({
     size?: "md" | "sm" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const checkboxGroupItemVariants: (props?: ({
-    appearance?: "plain" | "card" | null | undefined;
+    appearance?: "card" | "plain" | null | undefined;
     density?: "compact" | "comfortable" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const checkboxGroupBoxVariants: (props?: ({
-    appearance?: "plain" | "card" | null | undefined;
+    appearance?: "card" | "plain" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type CheckboxSize = NonNullable<VariantProps<typeof checkboxBoxVariants>["size"]>;
 type CheckboxCheckedState = React.ComponentProps<typeof Checkbox$1.Root>["checked"];
@@ -1917,6 +2141,7 @@ type CheckboxGroupDensity = NonNullable<VariantProps<typeof checkboxGroupItemVar
 type CheckboxGroupContextValue = {
     appearance: CheckboxGroupAppearance;
     density: CheckboxGroupDensity;
+    orientation?: "vertical" | "horizontal";
     disabled?: boolean;
     name?: string;
     selectedValues: Set<string>;
@@ -1933,7 +2158,7 @@ interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<typeof Check
 declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
 
 declare const checkboxGroupVariants: (props?: ({
-    appearance?: "plain" | "card" | null | undefined;
+    appearance?: "card" | "plain" | null | undefined;
     orientation?: "horizontal" | "vertical" | null | undefined;
     columns?: "one" | "two" | "three" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -1954,16 +2179,16 @@ interface CheckboxGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
 declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const radioGroupVariants: (props?: ({
-    appearance?: "plain" | "card" | null | undefined;
+    appearance?: "card" | "plain" | null | undefined;
     orientation?: "horizontal" | "vertical" | null | undefined;
     columns?: "one" | "two" | "three" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const radioVariants: (props?: ({
-    appearance?: "plain" | "card" | null | undefined;
+    appearance?: "card" | "plain" | null | undefined;
     density?: "compact" | "comfortable" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const radioControlVariants: (props?: ({
-    appearance?: "plain" | "card" | null | undefined;
+    appearance?: "card" | "plain" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type RadioGroupAppearance = NonNullable<VariantProps<typeof radioGroupVariants>["appearance"]>;
 type RadioGroupColumns = NonNullable<VariantProps<typeof radioGroupVariants>["columns"]>;
@@ -2055,11 +2280,11 @@ declare function TreeView<T extends TreeNode>({ nodes, selectedId, selectionAria
 /**
  * OLUN 브랜드 로고.
  *
- * - symbol: O 원형 테두리 + 우하단 accent-pop 작은 circle (32px 초과/이하 두 비율)
- * - wordmark: "OLUN" + 마지막 "." 은 accent 색상
- * - 조합: symbol과 함께 쓰면 wordmark의 "."를 뺀다. 궤도 점은 symbol이 맡는다(점 두 개 경쟁 방지).
+ * - symbol: O 링 + 우하단 accent-pop 궤도 점 (32px 초과/이하 두 광학 비율)
+ * - wordmark: Montserrat 700 윤곽 `OLUN` + 단독일 때 accent-pop 마침표
+ * - MASTER: symbol과 함께 쓰면 wordmark의 "."를 뺀다. 궤도 점이 마침표를 맡는다(점 두 개 경쟁 방지).
  *
- * 레퍼런스: apps/web/docs/wireframes/ref/shell-wireframe.html Topbar 브랜드 영역.
+ * 기하는 `@olundot/tokens/brand`의 정본 데이터(scripts/brand/build-brand-svg.mjs가 생성)에서만 온다.
  */
 interface OlunSymbolProps {
     /** 심볼 크기 px (기본 28) */
@@ -2068,9 +2293,15 @@ interface OlunSymbolProps {
 }
 declare function OlunSymbol({ size, className }: OlunSymbolProps): react_jsx_runtime.JSX.Element;
 interface OlunLogoProps {
-    /** 심볼 크기 px (기본 28) */
+    /**
+     * MASTER 크기. 심볼 240 상자 기준 px (기본 28).
+     * 워드마크와 간격은 고정 비율로 함께 커진다. 32px 이하는 아이콘 비율 심볼을 쓴다.
+     */
     symbolSize?: number;
-    /** wordmark font-size px (기본 18) */
+    /**
+     * 워드마크만 쓸 때(`showSymbol={false}`) 글자 크기 px (기본 18).
+     * MASTER에서는 쓰지 않는다. MASTER 크기는 `symbolSize` 하나로 정한다.
+     */
     fontSize?: number;
     /** 심볼 표시 여부 (기본 true) */
     showSymbol?: boolean;
@@ -2101,4 +2332,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, 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, StatusDot, type StatusDotProps, type StatusDotTone, 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 AlertMarker, 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, 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 DataTableMobileCardContent, type DataTableMobileMetaLine, type DataTableProps, type DataTableRowActions, 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 EmptyStateLayout, 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, InfoModal, type InfoModalProps, InlineAlert, type InlineAlertProps, Input, type InputProps, type InputSize, type InputSizeLegacy, type InputState, Label, type LabelProps, ListCard, type ListCardActions, type ListCardProps, 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, StatusDot, type StatusDotProps, type StatusDotTone, type SurfaceLevel, Switch, type SwitchProps, TABLE_PAGE_SIZE_OPTIONS, type TabItem, TablePagination, type TablePaginationProps, type TablePaginationVisibility, 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, shouldHideTablePagination, skeletonVariants, spinnerVariants, tabsBadgeVariants, tabsListVariants, tabsRootVariants, tabsTriggerVariants, textareaMessageVariants, textareaVariants, toast, toastVariants, toastViewportVariants, treeItemRowVariants, treeViewVariants, useOlunTheme, usePermission };