prime-ui-kit 0.9.0 → 0.9.1

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

@@ -1,5 +1,6 @@
 import * as React from "react";
-import type { ControlSize, PaletteColor } from "@/internal/states";
+import { type FieldRootDomProps } from "@/internal/FieldFrame";
+import type { ControlSize } from "@/internal/states";
 export type InputLabels = {
     /** Muted marker after the label when `optional`. */
     optional: string;
@@ -8,7 +9,8 @@ export type InputLabels = {
     /** Screen-reader text of `Input.Counter`; `{current}` and `{max}` are replaced. */
     counter: string;
 };
-export type InputRootProps = {
+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;
@@ -34,89 +36,85 @@ export type InputRootProps = {
     id?: string;
     labels?: Partial<InputLabels>;
     children: React.ReactNode;
-    className?: string;
 };
-declare function InputRoot({ size, invalid: invalidProp, focusRing, label, required, optional, hint, error, counter, reserveSupportRow, id, labels: labelsProp, 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 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>;
 };
-export type InputIconProps = {
+/** 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 InputBadgeProps = {
-    /** Palette hue of the soft badge. Default `gray`. */
-    color?: PaletteColor;
-    children: React.ReactNode;
-    className?: string;
+export type InputClearButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "children" | "aria-label"> & {
+    ref?: React.Ref<HTMLButtonElement>;
 };
 /**
- * Status inside the field: a soft Badge one tier below the field, at the trailing edge before
- * the trailing icon / clear button. The value truncates before it; the field height is unchanged.
+ * 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 InputBadge({ color, children, className }: InputBadgeProps): import("react/jsx-runtime").JSX.Element;
-declare namespace InputBadge {
+declare function InputClearButton({ className, onClick, ref, ...rest }: InputClearButtonProps): import("react/jsx-runtime").JSX.Element;
+declare namespace InputClearButton {
     var displayName: string;
 }
-export type InputClearButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "children" | "aria-label">;
-export type InputCounterProps = {
+export type InputCounterProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
     current: number;
     max: number;
-    className?: string;
+    ref?: React.Ref<HTMLSpanElement>;
 };
 /** Character counter for the support row; turns danger when `current > max`. */
-declare function InputCounter({ current, max, className }: InputCounterProps): import("react/jsx-runtime").JSX.Element;
+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<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
-        /** Called with the new string value; native `onChange` still fires. */
-        onValueChange?: (value: string) => void;
-    } & React.RefAttributes<HTMLInputElement>>;
+    Field: typeof InputField;
     Icon: typeof InputIcon;
     Affix: typeof InputAffix;
     InlineAffix: typeof InputInlineAffix;
-    Badge: typeof InputBadge;
-    ClearButton: React.ForwardRefExoticComponent<InputClearButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    ClearButton: typeof InputClearButton;
     Counter: typeof InputCounter;
 };
 export {};
-//# sourceMappingURL=Input.d.ts.map

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

@@ -1,15 +1,9 @@
-import * as React from "react";
+import type * as React from "react";
 import type { ControlSize } from "@/internal/states";
-export type KbdRootProps = Omit<React.HTMLAttributes<HTMLElement>, "size"> & {
-    children: React.ReactNode;
-    className?: string;
+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?: ControlSize;
-    } & 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,4 +1,4 @@
-import * as React from "react";
+import type * as React from "react";
 import type { ControlSize } from "@/internal/states";
 export type LabelLabels = {
     /** Muted marker after the label text when `optional`. */
@@ -6,34 +6,37 @@ export type LabelLabels = {
 };
 export type LabelRootProps = Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "size"> & {
     disabled?: boolean;
+    /** 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 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;
+}
+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;
 }
+export type LabelDescriptionProps = React.HTMLAttributes<HTMLSpanElement> & {
+    ref?: React.Ref<HTMLSpanElement>;
+};
 /** Secondary inline text inside the label (units, short clarification). */
-declare function LabelSub({ className, children, ...rest }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
-declare namespace LabelSub {
+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?: 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>;
-    } & React.RefAttributes<HTMLLabelElement>>;
+    Root: typeof LabelRoot;
     Icon: typeof LabelIcon;
-    Sub: typeof LabelSub;
+    Description: typeof LabelDescription;
 };
 export {};
-//# sourceMappingURL=Label.d.ts.map

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

@@ -1,21 +1,20 @@
-import * as React from "react";
+import type * as React from "react";
 import type { ControlSize, Tone } from "@/internal/states";
-export type LinkButtonRootProps = {
+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?: 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> & 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

@@ -5,6 +5,39 @@
  */
 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. */
@@ -43,22 +76,26 @@ export declare function DialogShellProvider({ value, children, }: {
     value: DialogShellContextValue;
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-export type DialogIconProps = {
+export type DialogIconProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
     /** Soft fill + text color of the role. Default `neutral`. */
     tone?: Tone;
     children: React.ReactNode;
-    className?: string;
+    ref?: React.Ref<HTMLSpanElement>;
 };
-export declare function DialogIcon({ tone, children, className }: DialogIconProps): import("react/jsx-runtime").JSX.Element;
+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">;
+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">;
+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;
@@ -66,6 +103,7 @@ export declare namespace DialogDescription {
 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
@@ -75,7 +113,9 @@ export declare function DialogHeader({ showClose, className, children, ...rest }
 export declare namespace DialogHeader {
     var displayName: string;
 }
-export type DialogBodyProps = React.HTMLAttributes<HTMLDivElement>;
+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 {
@@ -84,6 +124,7 @@ export declare namespace DialogBody {
 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;
@@ -94,14 +135,19 @@ 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): React.ReactElement<{
-    onClick?: React.MouseEventHandler;
-    ref?: React.Ref<HTMLElement>;
-}, string | React.JSXElementConstructor<any>>;
+export declare function DialogClose({ children }: DialogCloseProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace DialogClose {
     var displayName: string;
 }
@@ -109,12 +155,7 @@ export type DialogConfirmProps = {
     children: SlotChild;
 };
 /** Marks the primary action: Enter inside the dialog clicks it (`confirmOnEnter`). */
-export declare function DialogConfirm({ children }: DialogConfirmProps): React.ReactElement<{
-    onClick?: React.MouseEventHandler;
-    ref?: React.Ref<HTMLElement>;
-}, string | React.JSXElementConstructor<any>>;
+export declare function DialogConfirm({ children }: DialogConfirmProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace DialogConfirm {
     var displayName: string;
 }
-export {};
-//# sourceMappingURL=DialogParts.d.ts.map

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { ControlSize } from "@/internal/states";
-import { DialogBody, DialogClose, DialogConfirm, DialogDescription, DialogFooter, DialogHeader, DialogIcon, DialogTitle } from "./DialogParts";
-export type { DialogBodyProps as ModalBodyProps, DialogCloseProps as ModalCloseProps, DialogConfirmProps as ModalConfirmProps, DialogDescriptionProps as ModalDescriptionProps, DialogFooterProps as ModalFooterProps, DialogHeaderProps as ModalHeaderProps, DialogIconProps as ModalIconProps, DialogTitleProps as ModalTitleProps, } from "./DialogParts";
+import { DialogBody, DialogClose, DialogConfirm, DialogDescription, DialogFooter, DialogHeader, DialogIcon, DialogTitle, DialogTrigger } from "./DialogParts";
+export type { DialogBodyProps as ModalBodyProps, DialogCloseProps as ModalCloseProps, DialogConfirmProps as ModalConfirmProps, DialogDescriptionProps as ModalDescriptionProps, DialogFooterProps as ModalFooterProps, DialogHeaderProps as ModalHeaderProps, DialogIconProps as ModalIconProps, DialogTitleProps as ModalTitleProps, DialogTriggerProps as ModalTriggerProps, } from "./DialogParts";
 export type ModalLabels = {
     /** `aria-label` of the header close button. */
     close: string;
@@ -12,10 +12,7 @@ export type ModalRootProps = {
     onOpenChange?: (open: boolean) => void;
     /** Escape closes the dialog. Default `true`. */
     closeOnEscape?: boolean;
-    /**
-     * A click on the scrim (any pointerdown outside the dialog) closes it. Default `true`; turn it
-     * off for destructive confirms.
-     */
+    /** A click on the scrim closes the dialog. Default `true`; turn it off for destructive confirms. */
     closeOnOutsideClick?: boolean;
     /** Enter clicks the action wrapped in `Modal.Confirm`. Default `true`. */
     confirmOnEnter?: boolean;
@@ -24,22 +21,10 @@ export type ModalRootProps = {
     labels?: Partial<ModalLabels>;
     children?: React.ReactNode;
 };
-declare function ModalRoot({ open, defaultOpen, onOpenChange, closeOnEscape, closeOnOutsideClick, confirmOnEnter, onEnterConfirm, labels, children, }: ModalRootProps): import("react/jsx-runtime").JSX.Element;
+declare function ModalRoot({ confirmOnEnter, labels, children, ...options }: ModalRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ModalRoot {
     var displayName: string;
 }
-export type ModalTriggerProps = {
-    children: React.ReactElement<{
-        onClick?: React.MouseEventHandler;
-    }>;
-};
-/** Opens the dialog on the child's click (unless the child prevents default). */
-declare function ModalTrigger({ children }: ModalTriggerProps): React.ReactElement<{
-    onClick?: React.MouseEventHandler;
-}, string | React.JSXElementConstructor<any>>;
-declare namespace ModalTrigger {
-    var displayName: string;
-}
 export type ModalContentProps = React.HTMLAttributes<HTMLDivElement> & {
     /**
      * Dialog width: `s` 440 · `m` 560 · `l` 720 · `xl` 960. Below 640px of viewport the dialog is
@@ -50,6 +35,8 @@ export type ModalContentProps = React.HTMLAttributes<HTMLDivElement> & {
     container?: HTMLElement | null;
     /** Class on the full-screen scrim. */
     overlayClassName?: string;
+    /** The `role="dialog"` panel. */
+    ref?: React.Ref<HTMLDivElement>;
 };
 declare function ModalContent({ container, ...props }: ModalContentProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace ModalContent {
@@ -57,7 +44,7 @@ declare namespace ModalContent {
 }
 export declare const Modal: {
     Root: typeof ModalRoot;
-    Trigger: typeof ModalTrigger;
+    Trigger: typeof DialogTrigger;
     Content: typeof ModalContent;
     Header: typeof DialogHeader;
     Icon: typeof DialogIcon;
@@ -68,4 +55,3 @@ export declare const Modal: {
     Close: typeof DialogClose;
     Confirm: typeof DialogConfirm;
 };
-//# sourceMappingURL=Modal.d.ts.map

package/dist/components/native-select/NativeSelect.d.ts

@@ -0,0 +1,28 @@
+import type * as React from "react";
+import { type FieldFrameProps } from "@/internal/FieldFrame";
+import type { ControlSize } from "@/internal/states";
+export type NativeSelectLabels = {
+    /** Muted marker after the label when `optional`. */
+    optional: string;
+};
+export type NativeSelectProps = FieldFrameProps & Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size" | "multiple" | "children"> & {
+    size?: ControlSize;
+    /** Danger ring and `aria-invalid`; a non-empty `error` implies it. */
+    invalid?: boolean;
+    /** First, empty option shown while nothing is picked. */
+    placeholder?: string;
+    /** Called with the picked value; native `onChange` still fires. */
+    onValueChange?: (value: string) => void;
+    labels?: Partial<NativeSelectLabels>;
+    /** Native `<option>` and `<optgroup>` elements. */
+    children: React.ReactNode;
+    ref?: React.Ref<HTMLSelectElement>;
+};
+/**
+ * The system `<select>` in the field look: the OS picker opens on touch devices. Options are
+ * plain `<option>` / `<optgroup>` elements.
+ */
+export declare function NativeSelect({ size, label, required, optional, hint, error, invalid, focusRing, disabled, placeholder, id, value, defaultValue, onChange, onValueChange, labels: labelsProp, className, children, "aria-describedby": ariaDescribedBy, ...rest }: NativeSelectProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace NativeSelect {
+    var displayName: string;
+}