prime-ui-kit 0.7.13 → 0.9.1

package/dist/components/input/Input.d.ts

@@ -1,73 +1,120 @@
 import * as React from "react";
-import type { InputSize } from "@/internal/states";
-type InputContextValue = {
-    size: InputSize;
-    hasError: boolean;
-    inputId: string;
-    describedBy: string | undefined;
+import { type FieldRootDomProps } from "@/internal/FieldFrame";
+import type { ControlSize } from "@/internal/states";
+export type InputLabels = {
+    /** Muted marker after the label when `optional`. */
+    optional: string;
+    /** Accessible name of `Input.ClearButton`. */
+    clear: string;
+    /** Screen-reader text of `Input.Counter`; `{current}` and `{max}` are replaced. */
+    counter: string;
 };
-declare const useInputContext: () => InputContextValue;
-export type InputRootProps = {
-    size?: InputSize;
-    /** Mark the field as invalid visually and propagate aria-invalid to the input. */
-    hasError?: boolean;
+export type InputRootProps = FieldRootDomProps & {
+    /** Tier. Default: the tier of the surrounding control (a form, a panel), else `m`. */
+    size?: ControlSize;
+    /** Invalid state: danger ring on the field and `aria-invalid` on the input. A non-empty `error` implies it. */
+    invalid?: boolean;
+    /**
+     * Draws the focus ring on `Input.Wrapper` (default). `false` hides only the visual ring — focus,
+     * keyboard and ARIA are unchanged, the error ring still shows. Turn it off only where focus is
+     * otherwise obvious (a single search field with a caret, e.g. a command palette); WCAG 2.4.7.
+     */
+    focusRing?: boolean;
     label?: React.ReactNode;
-    optionalLabel?: React.ReactNode;
+    /** Shows a red `*` after the label and sets native `required` on `Input.Field`. */
+    required?: boolean;
+    /** Shows the muted optional marker after the label text (`labels.optional`). */
+    optional?: boolean;
     hint?: React.ReactNode;
-    /** Error message rendered below the field; also sets hasError=true. */
+    /** Error message; replaces the hint in the same slot and implies `invalid`. */
     error?: React.ReactNode;
+    /** Right-aligned slot of the support row, e.g. `<Input.Counter current={n} max={50} />`. */
+    counter?: React.ReactNode;
+    /** Always render the support row so an appearing error does not shift the layout. */
+    reserveSupportRow?: boolean;
     /** Explicit id for the underlying <input>; auto-generated if omitted. */
     id?: string;
+    labels?: Partial<InputLabels>;
     children: React.ReactNode;
-    className?: string;
 };
-declare function InputRoot({ size, hasError: hasErrorProp, label, optionalLabel, hint, error, id, children, className, }: InputRootProps): import("react/jsx-runtime").JSX.Element;
+declare function InputRoot({ size: sizeProp, invalid, focusRing, label, required, optional, hint, error, counter, reserveSupportRow, id, labels: labelsProp, children, className, ...rest }: InputRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace InputRoot {
     var displayName: string;
 }
-export type InputWrapperProps = {
+export type InputWrapperProps = React.HTMLAttributes<HTMLDivElement> & {
     children: React.ReactNode;
-    className?: string;
+    ref?: React.Ref<HTMLDivElement>;
 };
-declare function InputWrapper({ children, className }: InputWrapperProps): import("react/jsx-runtime").JSX.Element;
+declare function InputWrapper({ children, className, ...rest }: InputWrapperProps): import("react/jsx-runtime").JSX.Element;
 declare namespace InputWrapper {
     var displayName: string;
 }
-export type InputFieldProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
-export type InputIconProps = {
+export type InputFieldProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "id"> & {
+    /** Called with the new string value; native `onChange` still fires. */
+    onValueChange?: (value: string) => void;
+    ref?: React.Ref<HTMLInputElement>;
+};
+/** The `<input>`; its id comes from `Input.Root` so the label, hint and error stay linked. */
+declare function InputField({ className, "aria-describedby": ariaDescribedBy, required, onChange, onValueChange, ref, ...rest }: InputFieldProps): import("react/jsx-runtime").JSX.Element;
+declare namespace InputField {
+    var displayName: string;
+}
+export type InputIconProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
     side: "start" | "end";
     children: React.ReactNode;
-    className?: string;
+    ref?: React.Ref<HTMLSpanElement>;
 };
-declare function InputIcon({ side, children, className }: InputIconProps): import("react/jsx-runtime").JSX.Element;
+declare function InputIcon({ side, children, className, ...rest }: InputIconProps): import("react/jsx-runtime").JSX.Element;
 declare namespace InputIcon {
     var displayName: string;
 }
-export type InputAffixProps = {
+export type InputAffixProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
     side: "start" | "end";
     children: React.ReactNode;
-    className?: string;
+    ref?: React.Ref<HTMLDivElement>;
 };
-declare function InputAffix({ side, children, className }: InputAffixProps): import("react/jsx-runtime").JSX.Element;
+declare function InputAffix({ side, children, className, ...rest }: InputAffixProps): import("react/jsx-runtime").JSX.Element;
 declare namespace InputAffix {
     var displayName: string;
 }
-export type InputInlineAffixProps = {
+export type InputInlineAffixProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
     side: "start" | "end";
     children: React.ReactNode;
-    className?: string;
+    ref?: React.Ref<HTMLSpanElement>;
 };
-declare function InputInlineAffix({ side, children, className }: InputInlineAffixProps): import("react/jsx-runtime").JSX.Element;
+declare function InputInlineAffix({ side, children, className, ...rest }: InputInlineAffixProps): import("react/jsx-runtime").JSX.Element;
 declare namespace InputInlineAffix {
     var displayName: string;
 }
+export type InputClearButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "children" | "aria-label"> & {
+    ref?: React.Ref<HTMLButtonElement>;
+};
+/**
+ * Trailing clear action. Render it only when the field has a value; clicking returns focus
+ * to the input after `onClick` runs (clear the value in `onClick`).
+ */
+declare function InputClearButton({ className, onClick, ref, ...rest }: InputClearButtonProps): import("react/jsx-runtime").JSX.Element;
+declare namespace InputClearButton {
+    var displayName: string;
+}
+export type InputCounterProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
+    current: number;
+    max: number;
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/** Character counter for the support row; turns danger when `current > max`. */
+declare function InputCounter(props: InputCounterProps): import("react/jsx-runtime").JSX.Element;
+declare namespace InputCounter {
+    var displayName: string;
+}
 export declare const Input: {
     Root: typeof InputRoot;
     Wrapper: typeof InputWrapper;
-    Field: React.ForwardRefExoticComponent<InputFieldProps & React.RefAttributes<HTMLInputElement>>;
+    Field: typeof InputField;
     Icon: typeof InputIcon;
     Affix: typeof InputAffix;
     InlineAffix: typeof InputInlineAffix;
+    ClearButton: typeof InputClearButton;
+    Counter: typeof InputCounter;
 };
-export { useInputContext };
-//# sourceMappingURL=Input.d.ts.map
+export {};

package/dist/components/kbd/Kbd.d.ts

@@ -1,15 +1,9 @@
-import * as React from "react";
-import type { KbdSize } from "@/internal/states";
-export type KbdRootProps = Omit<React.HTMLAttributes<HTMLElement>, "size"> & {
-    children: React.ReactNode;
-    className?: string;
-    size?: KbdSize;
+import type * as React from "react";
+import type { ControlSize } from "@/internal/states";
+export type KbdProps = Omit<React.HTMLAttributes<HTMLElement>, "size"> & {
+    /** Badge tier; without it the key follows the surrounding control one tier down, else `m`. */
+    size?: ControlSize;
+    ref?: React.Ref<HTMLElement>;
 };
-export declare const Kbd: {
-    Root: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement>, "size"> & {
-        children: React.ReactNode;
-        className?: string;
-        size?: KbdSize;
-    } & React.RefAttributes<HTMLElement>>;
-};
-//# sourceMappingURL=Kbd.d.ts.map
+/** One keyboard key as a native `<kbd>`; passes its tier to a nested `Icon`. */
+export declare function Kbd({ children, className, size: sizeProp, ...rest }: KbdProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/label/Label.d.ts

@@ -1,29 +1,42 @@
-import * as React from "react";
-import type { LabelSize } from "@/internal/states";
-export type { LabelSize };
+import type * as React from "react";
+import type { ControlSize } from "@/internal/states";
+export type LabelLabels = {
+    /** Muted marker after the label text when `optional`. */
+    optional: string;
+};
 export type LabelRootProps = Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "size"> & {
     disabled?: boolean;
-    size?: LabelSize;
+    /** Tier. Default: the tier of the surrounding control (a form, a panel), else `m`. */
+    size?: ControlSize;
+    /** Appends a red `*` (decorative, `aria-hidden`). Put native `required` on the control itself. */
+    required?: boolean;
+    /** Appends the muted optional marker (`labels.optional`). */
+    optional?: boolean;
+    labels?: Partial<LabelLabels>;
+    ref?: React.Ref<HTMLLabelElement>;
 };
-declare function LabelIcon({ className, children, ...rest }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
-declare namespace LabelIcon {
+declare function LabelRoot({ className, disabled, children, size: sizeProp, required, optional, labels, ref, ...rest }: LabelRootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace LabelRoot {
     var displayName: string;
 }
-declare function LabelAsterisk({ className, children, ...rest }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
-declare namespace LabelAsterisk {
+export type LabelIconProps = React.HTMLAttributes<HTMLSpanElement> & {
+    ref?: React.Ref<HTMLSpanElement>;
+};
+declare function LabelIcon({ className, ...rest }: LabelIconProps): import("react/jsx-runtime").JSX.Element;
+declare namespace LabelIcon {
     var displayName: string;
 }
-declare function LabelSub({ className, children, ...rest }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
-declare namespace LabelSub {
+export type LabelDescriptionProps = React.HTMLAttributes<HTMLSpanElement> & {
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/** Secondary inline text inside the label (units, short clarification). */
+declare function LabelDescription({ className, ...rest }: LabelDescriptionProps): import("react/jsx-runtime").JSX.Element;
+declare namespace LabelDescription {
     var displayName: string;
 }
 export declare const Label: {
-    Root: React.ForwardRefExoticComponent<Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "size"> & {
-        disabled?: boolean;
-        size?: LabelSize;
-    } & React.RefAttributes<HTMLLabelElement>>;
+    Root: typeof LabelRoot;
     Icon: typeof LabelIcon;
-    Asterisk: typeof LabelAsterisk;
-    Sub: typeof LabelSub;
+    Description: typeof LabelDescription;
 };
-//# sourceMappingURL=Label.d.ts.map
+export {};

package/dist/components/link-button/LinkButton.d.ts

@@ -1,18 +1,20 @@
-import * as React from "react";
-import type { LinkButtonSize } from "@/internal/states";
-export type { LinkButtonSize };
-export type LinkButtonRootProps = {
-    size?: LinkButtonSize;
+import type * as React from "react";
+import type { ControlSize, Tone } from "@/internal/states";
+export type LinkButtonProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    /** Tier. Default: the tier of the surrounding control or text host, else `m`. */
+    size?: ControlSize;
+    /** `accent` — a regular link; `neutral` — quiet links in footers, metadata and dense navigation. */
+    tone?: Extract<Tone, "accent" | "neutral">;
     disabled?: boolean;
-    children?: React.ReactNode;
-    className?: string;
-} & React.AnchorHTMLAttributes<HTMLAnchorElement>;
-export declare const LinkButton: {
-    Root: React.ForwardRefExoticComponent<{
-        size?: LinkButtonSize;
-        disabled?: boolean;
-        children?: React.ReactNode;
-        className?: string;
-    } & React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>;
+    /**
+     * Merges the link look onto its single child instead of rendering `<a>`: a router link, or a
+     * `<button type="button">` for an inline action that is not navigation («выберите файл»).
+     * `disabled` becomes `aria-disabled` and swallows the click.
+     */
+    asChild?: boolean;
+    ref?: React.Ref<HTMLAnchorElement>;
 };
-//# sourceMappingURL=LinkButton.d.ts.map
+export declare function LinkButton({ size: sizeProp, tone, disabled, asChild, children, className, href, onClick, ref, ...rest }: LinkButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace LinkButton {
+    var displayName: string;
+}

package/dist/components/login-form/LoginForm.d.ts

@@ -0,0 +1,115 @@
+import type * as React from "react";
+import type { ControlSize } from "@/internal/states";
+export type LoginFormRootProps = {
+    /** Tier of spacing and type; fields and buttons inside without their own `size` take it. Default `m`. */
+    size?: ControlSize;
+    /**
+     * Header layout. `start` (default): the Modal-header layout — a rounded accent tile on the left,
+     * title over description on its right. `center`: round logo above centered text.
+     */
+    align?: "center" | "start";
+    /** Removes the card shadow, e.g. inside a modal or on a plain page. No border in either case. */
+    flat?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare function LoginFormRoot({ size, align, flat, className, children, ref, ...rest }: LoginFormRootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace LoginFormRoot {
+    var displayName: string;
+}
+export type LoginFormHeaderProps = {
+    className?: string;
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLElement>;
+} & React.HTMLAttributes<HTMLElement>;
+/** Logo, title, description: icon-left / text-right by default, a centered column with Root `align="center"`. */
+declare function LoginFormHeader({ className, children, ...rest }: LoginFormHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare namespace LoginFormHeader {
+    var displayName: string;
+}
+export type LoginFormLogoProps = {
+    className?: string;
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
+} & React.HTMLAttributes<HTMLDivElement>;
+/** Tile for the product mark or an icon (rounded accent square by default, round when `align="center"`). Decorative unless it has an `aria-label`. */
+declare function LoginFormLogo({ className, children, ...rest }: LoginFormLogoProps): import("react/jsx-runtime").JSX.Element;
+declare namespace LoginFormLogo {
+    var displayName: string;
+}
+export type LoginFormTitleProps = {
+    /** Heading element. Default `h1`; use `h2` when the form sits inside a page that already has an `h1`. */
+    as?: "h1" | "h2" | "h3";
+    className?: string;
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLHeadingElement>;
+} & Omit<React.HTMLAttributes<HTMLHeadingElement>, "children">;
+declare function LoginFormTitle({ as, className, children, ...rest }: LoginFormTitleProps): import("react/jsx-runtime").JSX.Element;
+declare namespace LoginFormTitle {
+    var displayName: string;
+}
+export type LoginFormDescriptionProps = {
+    className?: string;
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLParagraphElement>;
+} & Omit<React.HTMLAttributes<HTMLParagraphElement>, "children">;
+declare function LoginFormDescription({ className, children, ...rest }: LoginFormDescriptionProps): import("react/jsx-runtime").JSX.Element;
+declare namespace LoginFormDescription {
+    var displayName: string;
+}
+export type LoginFormBodyProps = {
+    className?: string;
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
+} & React.HTMLAttributes<HTMLDivElement>;
+/** Everything under the header: social buttons, divider, form, footer. */
+declare function LoginFormBody({ className, children, ...rest }: LoginFormBodyProps): import("react/jsx-runtime").JSX.Element;
+declare namespace LoginFormBody {
+    var displayName: string;
+}
+export type LoginFormFormProps = {
+    className?: string;
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLFormElement>;
+} & React.FormHTMLAttributes<HTMLFormElement>;
+/** The `<form>`: fields, then the submit button, one column with field → field spacing. Native submit and `onSubmit` work as usual. */
+declare function LoginFormForm({ className, children, ref, ...rest }: LoginFormFormProps): import("react/jsx-runtime").JSX.Element;
+declare namespace LoginFormForm {
+    var displayName: string;
+}
+export type LoginFormActionsProps = {
+    className?: string;
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
+} & React.HTMLAttributes<HTMLDivElement>;
+/**
+ * Column of full-width buttons: provider buttons above the form, or the primary action first
+ * with a `ghost` back action under it.
+ */
+declare function LoginFormActions({ className, children, ...rest }: LoginFormActionsProps): import("react/jsx-runtime").JSX.Element;
+declare namespace LoginFormActions {
+    var displayName: string;
+}
+export type LoginFormFooterProps = {
+    className?: string;
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLParagraphElement>;
+} & Omit<React.HTMLAttributes<HTMLParagraphElement>, "children">;
+/** Secondary line with a `LinkButton`: «Нет аккаунта? Зарегистрироваться». Follows Root `align`. */
+declare function LoginFormFooter({ className, children, ...rest }: LoginFormFooterProps): import("react/jsx-runtime").JSX.Element;
+declare namespace LoginFormFooter {
+    var displayName: string;
+}
+export declare const LoginForm: {
+    Root: typeof LoginFormRoot;
+    Header: typeof LoginFormHeader;
+    Logo: typeof LoginFormLogo;
+    Title: typeof LoginFormTitle;
+    Description: typeof LoginFormDescription;
+    Body: typeof LoginFormBody;
+    Form: typeof LoginFormForm;
+    Actions: typeof LoginFormActions;
+    Footer: typeof LoginFormFooter;
+};
+export {};

package/dist/components/modal/DialogParts.d.ts

@@ -0,0 +1,161 @@
+/**
+ * Shared header / body / footer parts of Modal and Drawer. Not exported from the package root:
+ * consumers use them as `Modal.*` and `Drawer.*`. The owning content component provides the
+ * shell context (ids, close handler, labels, default footer layout).
+ */
+import * as React from "react";
+import type { Tone } from "@/internal/states";
+export type DialogRootOptions = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    closeOnEscape?: boolean;
+    closeOnOutsideClick?: boolean;
+    closeLabel: string;
+    /** Modal only: Enter clicks `Modal.Confirm`. */
+    confirmOnEnter?: boolean;
+    onEnterConfirm?: (event: KeyboardEvent) => void;
+};
+export type DialogRootState = {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    closeOnEscape: boolean;
+    closeOnOutsideClick: boolean;
+    closeLabel: string;
+    confirmOnEnter: boolean;
+    onEnterConfirm?: (event: KeyboardEvent) => void;
+};
+declare const DialogRootProvider: React.Provider<DialogRootState | null>, useDialogRootContext: () => DialogRootState;
+export { DialogRootProvider, useDialogRootContext };
+/** State of Modal.Root / Drawer.Root: open (controlled or not) and the dismiss policy. */
+export declare function useDialogRoot({ open, defaultOpen, onOpenChange, closeOnEscape, closeOnOutsideClick, closeLabel, confirmOnEnter, onEnterConfirm, }: DialogRootOptions): DialogRootState;
+/**
+ * The modal layer of a Modal / Drawer panel: Escape and scrim clicks close it per the Root's
+ * `closeOnEscape` / `closeOnOutsideClick`; focus returns to the opener (foundation §8).
+ */
+export declare function useDialogLayer<T extends HTMLElement>({ open, setOpen, closeOnEscape, closeOnOutsideClick, }: DialogRootState): {
+    onClose: () => void;
+    ref: React.RefObject<T | null>;
+    layer: import("@/internal/overlay/layerStack").LayerEntry;
+};
+/** Class for the `role="dialog"` element: hairline tokens and the `prime-dialog` container. */
+export declare const dialogShellClassName: string;
+/** Footer actions: `fill` — equal-width buttons in one row; `end` — auto-width, right-aligned. */
+export type DialogFooterLayout = "fill" | "end";
+type DialogShellContextValue = {
+    titleId: string;
+    descriptionId: string;
+    hasDescription: boolean;
+    registerTitle: (present: boolean) => void;
+    registerDescription: (present: boolean) => void;
+    onClose: () => void;
+    closeLabel: string;
+    footerLayout: DialogFooterLayout;
+    /** Enter-confirm target (Modal only). */
+    confirmRef?: React.MutableRefObject<HTMLElement | null>;
+};
+type UseDialogShellOptions = {
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+    onClose: () => void;
+    closeLabel: string;
+    footerLayout: DialogFooterLayout;
+    confirmRef?: React.MutableRefObject<HTMLElement | null>;
+};
+/** Builds the shell context and the resolved `aria-*` for the `role="dialog"` element. */
+export declare function useDialogShellValue({ ariaLabel, ariaLabelledBy, ariaDescribedBy, onClose, closeLabel, footerLayout, confirmRef, }: UseDialogShellOptions): {
+    value: DialogShellContextValue;
+    aria: {
+        "aria-label": string | undefined;
+        "aria-labelledby": string | undefined;
+        "aria-describedby": string | undefined;
+    };
+};
+export declare function DialogShellProvider({ value, children, }: {
+    value: DialogShellContextValue;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export type DialogIconProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
+    /** Soft fill + text color of the role. Default `neutral`. */
+    tone?: Tone;
+    children: React.ReactNode;
+    ref?: React.Ref<HTMLSpanElement>;
+};
+export declare function DialogIcon({ tone, children, className, ...rest }: DialogIconProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DialogIcon {
+    var displayName: string;
+}
+export type DialogTitleProps = Omit<React.HTMLAttributes<HTMLHeadingElement>, "id"> & {
+    ref?: React.Ref<HTMLHeadingElement>;
+};
+export declare function DialogTitle({ className, ...rest }: DialogTitleProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DialogTitle {
+    var displayName: string;
+}
+export type DialogDescriptionProps = Omit<React.HTMLAttributes<HTMLParagraphElement>, "id"> & {
+    ref?: React.Ref<HTMLParagraphElement>;
+};
+export declare function DialogDescription({ className, ...rest }: DialogDescriptionProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DialogDescription {
+    var displayName: string;
+}
+export type DialogHeaderProps = React.HTMLAttributes<HTMLElement> & {
+    /** Built-in close button (square ghost `s`, `labels.close`). Default `true`. */
+    showClose?: boolean;
+    ref?: React.Ref<HTMLElement>;
+};
+/**
+ * `[Icon] [Title + Description] [close]` in one row. Layout is a CSS grid, so child order
+ * does not matter; text children stack in the middle column.
+ */
+export declare function DialogHeader({ showClose, className, children, ...rest }: DialogHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DialogHeader {
+    var displayName: string;
+}
+export type DialogBodyProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+/** The only scrolling zone; header and footer stay put. */
+export declare function DialogBody({ className, ...rest }: DialogBodyProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DialogBody {
+    var displayName: string;
+}
+export type DialogFooterProps = React.HTMLAttributes<HTMLElement> & {
+    /** `fill` — equal-width buttons; `end` — auto width, right-aligned. Default depends on the container. */
+    layout?: DialogFooterLayout;
+    ref?: React.Ref<HTMLElement>;
+};
+/** Actions in DOM order, primary last. Stacks full width when the dialog is narrower than 360px. */
+export declare function DialogFooter({ layout, className, ...rest }: DialogFooterProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DialogFooter {
+    var displayName: string;
+}
+type SlotChild = React.ReactElement<{
+    onClick?: React.MouseEventHandler;
+    ref?: React.Ref<HTMLElement>;
+}>;
+export type DialogTriggerProps = {
+    children: SlotChild;
+};
+/** Adds "open the dialog" to the child's click (unless the child prevents default). */
+export declare function DialogTrigger({ children }: DialogTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DialogTrigger {
+    var displayName: string;
+}
+export type DialogCloseProps = {
+    children: SlotChild;
+};
+/** Adds "close the dialog" to the child's click (unless the child prevents default). */
+export declare function DialogClose({ children }: DialogCloseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DialogClose {
+    var displayName: string;
+}
+export type DialogConfirmProps = {
+    children: SlotChild;
+};
+/** Marks the primary action: Enter inside the dialog clicks it (`confirmOnEnter`). */
+export declare function DialogConfirm({ children }: DialogConfirmProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DialogConfirm {
+    var displayName: string;
+}