@skdx/react 0.28.0 → 0.30.0

package/dist/dialog/types.d.cts

@@ -1,20 +1,26 @@
 import type * as React from 'react';
+import type { DrawerPlacement } from '../drawer/types.cjs';
+import type { AutoFocusEvent } from '../utils/dismissal.cjs';
 import type { PassThroughProps } from '../utils/passThrough.cjs';
 import type { PortalProps } from '../utils/portal.cjs';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
 import type { FocusOutsideEvent, InteractOutsideEvent } from '../utils/useDismiss.cjs';
-import type { AutoFocusEvent } from '../utils/useFocusTrap.cjs';
 /**
- * Which dismissal channels may close a {@link Dialog}: `'any'` both, `'escape'`
- * the Escape key only, `'outside'` an outside interaction only, `'none'`
- * neither. A policy over dismissal, not over the events — all four fire
- * regardless of mode.
+ * Which dismissal channels may close a {@link Dialog} — `'any'` both, `'escape'` Escape only, `'outside'` outside interaction only, `'none'` neither; a policy over dismissal, not over the events, which fire regardless.
  */
 export type DialogDismiss = 'any' | 'escape' | 'outside' | 'none';
+/**
+ * The panel's role — `'dialog'` for the ordinary panel, `'alertdialog'` for the interruptive confirmation that is always modal, never closed by an outside interaction, and focused on its Cancel button first.
+ */
+export type DialogRole = 'dialog' | 'alertdialog';
+/** @internal Which family a part belongs to, deciding its class stem and `data-part` namespace. Not part of the public API. */
+export type DialogFamily = 'dialog' | 'drawer';
 /** @internal Shared state distributed from {@link Dialog} to its parts via context. Not part of the public API. */
 export interface DialogContextValue {
+    /** Which family provided this state, so one part implementation serves both. */
+    family: DialogFamily;
     triggerRef: React.RefObject<HTMLButtonElement | null>;
-    contentRef: React.RefObject<HTMLDivElement | null>;
+    contentRef: React.RefObject<HTMLElement | null>;
     contentId: string;
     titleId: string;
     descriptionId: string;
@@ -29,6 +35,12 @@ export interface DialogContextValue {
     modal: boolean;
     /** The resolved dismissal policy, read by `DialogContent` to gate each channel and to emit `data-dismiss`. */
     dismiss: DialogDismiss;
+    /** The resolved panel role, read by `DialogContent` for its `role` attribute. */
+    role: DialogRole;
+    /** The severity rung `DialogContent` and `DialogAction` write as `data-status`. */
+    status: string | undefined;
+    /** The drawer family's viewport edge; the dialog family renders no placement of its own. */
+    placement: DrawerPlacement;
 }
 /**
  * Props for the {@link Dialog} root. Standard attributes ({@link
@@ -36,86 +48,102 @@ export interface DialogContextValue {
  */
 export interface DialogProps extends PassThroughProps {
     /**
-     * The trigger and portal, typically — the dialog's own DOM (overlay,
-     * content, title, description) is rendered by {@link DialogPortal} elsewhere.
+     * The trigger and portal, typically — the dialog's own DOM is rendered by {@link DialogPortal} elsewhere.
      * @default undefined — renders nothing if omitted.
      */
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
     /**
      * Whether the dialog is open, for controlled usage. Pair with `onOpenChange`.
      * @default undefined — uncontrolled, tracks its own open state internally.
      */
-    open?: boolean;
+    open?: boolean | undefined;
     /**
      * Whether the dialog is initially open, for uncontrolled usage.
      * @default false
      */
-    defaultOpen?: boolean;
+    defaultOpen?: boolean | undefined;
     /**
      * Fires with the new open state whenever the dialog opens or closes, controlled or not.
      * @default undefined — no-op if omitted.
      */
-    onOpenChange?: (open: boolean) => void;
+    onOpenChange?: ((open: boolean) => void) | undefined;
     /**
      * Fires with the new open state once the change has finished on screen,
      * after `DialogContent`'s exit/enter animation (or immediately with none).
      * @default undefined — no-op if omitted.
      */
-    onOpenChangeComplete?: (open: boolean) => void;
+    onOpenChangeComplete?: ((open: boolean) => void) | undefined;
     /**
-     * Whether the dialog traps focus and blocks interaction with the rest of
-     * the page (scroll lock, pointer-down-outside closes it). Set to `false`
-     * for a non-modal dialog that lets the page remain interactive.
+     * Whether the dialog traps focus and blocks interaction with the rest of the page; `false` leaves the page interactive.
      * @default true
      */
-    modal?: boolean;
+    modal?: boolean | undefined;
     /**
-     * Which dismissal channels close the dialog: `'any'`, `'escape'`,
-     * `'outside'`, or `'none'` (leaving `open`/`DialogClose`/`DialogTrigger`
-     * as the only ways out). The four dismissal events still fire in every
-     * mode; this only decides whether an un-prevented one closes the dialog.
-     * Narrows `modal` and never widens it — `'outside'` needs `modal` too.
-     * Reflected as `data-dismiss` on `DialogContent`.
+     * Which dismissal channels close the dialog — `'any'`, `'escape'`, `'outside'`, or `'none'` — reflected as `data-dismiss` on `DialogContent`.
      * @default 'any'
      */
-    dismiss?: DialogDismiss;
+    dismiss?: DialogDismiss | undefined;
     /**
-     * The derived panel's title, rendered as a `DialogTitle`. Only read when
-     * `children` is plain body content — ignored under full manual composition.
+     * The derived panel's title, rendered as a `DialogTitle`; only read when `children` is plain body content.
      * @default undefined — no derived title.
      */
-    title?: string;
+    title?: string | undefined;
     /**
-     * The derived panel's description, rendered as a `DialogDescription`.
-     * Only read when `children` is plain body content.
+     * The derived panel's description, rendered as a `DialogDescription`; only read when `children` is plain body content.
      * @default undefined — no derived description.
      */
-    description?: string;
+    description?: string | undefined;
     /**
-     * Content rendered after the body in the derived panel — typically the
-     * action buttons. Only read when `children` is plain body content.
+     * Content rendered after the body in the derived panel — typically the action buttons; only read when `children` is plain body content.
      * @default undefined — no footer.
      */
-    footer?: React.ReactNode;
+    footer?: React.ReactNode | undefined;
     /**
-     * Whether the derived panel can be dismissed at all: `false` forces
-     * `dismiss="none"` and withholds the derived close button.
+     * Whether the derived panel can be dismissed at all — `false` forces `dismiss="none"` and withholds the derived close button.
      * @default true
      */
-    dismissible?: boolean;
+    dismissible?: boolean | undefined;
+    /**
+     * Panel width rung the skin reads, fed to the derived `DialogContent`.
+     * @default undefined — the skin's own default width.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
+    /**
+     * The panel's role. `'alertdialog'` forces `modal`, resolves the outside dismissal channels away, focuses Cancel first, withholds the close button, and always derives an Action and a Cancel button.
+     * @default 'dialog'
+     */
+    role?: DialogRole | undefined;
+    /**
+     * Severity rung the skin reads, written as `data-status` on the panel and on the derived action button; `'danger'` is the destructive confirmation.
+     * @default undefined — the skin's own neutral appearance.
+     */
+    status?: 'info' | 'success' | 'warning' | 'danger' | (string & {}) | undefined;
+    /**
+     * Label of the derived action button, which renders only when this is given — or always under `role="alertdialog"`, where it defaults to `'Confirm'`.
+     * @default undefined — no derived action button, unless the role is `'alertdialog'`.
+     */
+    confirmLabel?: string | undefined;
+    /**
+     * Label of the derived cancel button, which renders only when this is given — or always under `role="alertdialog"`, where it defaults to `'Cancel'`.
+     * @default undefined — no derived cancel button, unless the role is `'alertdialog'`.
+     */
+    cancelLabel?: string | undefined;
+    /**
+     * Fires when the derived action button is clicked, before the close. Call `event.preventDefault()` to hold the panel open while the confirmed request is in flight.
+     * @default undefined — no-op if omitted.
+     */
+    onConfirm?: ((event: React.MouseEvent<HTMLButtonElement>) => void) | undefined;
+    /**
+     * Fires when the derived cancel button is clicked, before the close. Call `event.preventDefault()` to keep the panel open.
+     * @default undefined — no-op if omitted.
+     */
+    onCancel?: ((event: React.MouseEvent<HTMLButtonElement>) => void) | undefined;
 }
 /** Props for {@link DialogTrigger}, the button that opens the dialog. */
 export interface DialogTriggerProps extends PrimitivePropsWithRef<'button'> {
 }
 /** Props for {@link DialogPortal}, which teleports its children to `document.body`. */
 export interface DialogPortalProps extends PortalProps {
-    /**
-     * Render the portal even while the dialog is closed, instead of unmounting
-     * it. Useful for animation libraries that need the outgoing content present
-     * in the DOM during an exit transition.
-     * @default false
-     */
-    forceMount?: boolean;
 }
 /** Props for {@link DialogOverlay}, the backdrop rendered behind `DialogContent`. */
 export interface DialogOverlayProps extends PrimitivePropsWithRef<'div'> {
@@ -125,65 +153,55 @@ export interface DialogOverlayProps extends PrimitivePropsWithRef<'div'> {
      * during an exit transition.
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
 }
-/** Props for {@link DialogContent}, the dialog's panel. */
-export interface DialogContentProps extends PrimitivePropsWithRef<'div'> {
+/** Props for {@link DialogContent}, the dialog's panel — a native `<dialog>`, so it takes no `asChild`. */
+export interface DialogContentProps extends React.ComponentPropsWithRef<'dialog'> {
     /**
-     * Keep this panel mounted even while the dialog is closed. Useful for
-     * animation libraries that need the outgoing panel present in the DOM
-     * during an exit transition.
-     * @default false
+     * Panel width rung the skin reads, mirrored to `data-size` on the panel.
+     * @default undefined — the skin's own default width.
      */
-    forceMount?: boolean;
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
     /**
-     * CSS selector for the element to focus when the dialog opens, resolved
-     * with `querySelector` inside this panel only. Applies only when
-     * `onOpenAutoFocus` was not prevented; falls back to the first tabbable
-     * element (then the panel) with a console warning if it matches nothing.
+     * CSS selector for the element to focus when the dialog opens, resolved inside this panel; falls back to the first tabbable element with a console warning on a miss.
      * @default undefined — focus moves to the first tabbable element.
      */
-    initialFocus?: string;
+    initialFocus?: string | undefined;
     /**
-     * CSS selector for the element to focus when the dialog closes, resolved
-     * at document level since the panel is unmounting by then. Applies only
-     * when `onCloseAutoFocus` was not prevented; falls back to the previously
-     * focused element with a console warning if it matches nothing.
+     * CSS selector for the element to focus when the dialog closes, resolved at document level since the panel is unmounting; falls back to the previously focused element with a console warning on a miss.
      * @default undefined — focus returns to the element focused before the dialog opened.
      */
-    finalFocus?: string;
+    finalFocus?: string | undefined;
     /**
-     * Fires when Escape is pressed while the dialog is open. Call `event.preventDefault()` to stop the dialog from closing.
+     * Fires with the native `cancel` event when Escape is pressed while the dialog is open. Call `event.preventDefault()` to stop the dialog from closing.
      * @default undefined — no-op if omitted.
      */
-    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    onEscapeKeyDown?: ((event: Event) => void) | undefined;
     /**
      * Fires on pointer-down outside the content. Call `event.preventDefault()` to stop the dialog from closing (only applies when `modal` is true).
      * @default undefined — no-op if omitted.
      */
-    onPointerDownOutside?: (event: PointerEvent) => void;
+    onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;
     /**
      * Fires when focus moves to an element outside the content. Call `event.preventDefault()` to stop the dialog from closing (only applies when `modal` is true). Receives a cancelable stand-in carrying the original `focusin` as its `detail`, since `focusin` itself cannot be canceled.
      * @default undefined — no-op if omitted.
      */
-    onFocusOutside?: (event: FocusOutsideEvent) => void;
+    onFocusOutside?: ((event: FocusOutsideEvent) => void) | undefined;
     /**
-     * Fires for any outside interaction (pointer-down or focus) just before the
-     * specific handler, with the same event. One `event.preventDefault()` here
-     * vetoes dismissal regardless of trigger type.
+     * Fires for any outside interaction (pointer-down or focus) just before the specific handler, with the same event — one `event.preventDefault()` here vetoes dismissal regardless of trigger type.
      * @default undefined — no-op if omitted.
      */
-    onInteractOutside?: (event: InteractOutsideEvent) => void;
+    onInteractOutside?: ((event: InteractOutsideEvent) => void) | undefined;
     /**
-     * Fires before focus moves into the content on open. Call `event.preventDefault()` to keep focus where it is and place it yourself. Modal dialogs only — a non-modal dialog never moves focus.
+     * Fires before focus moves into the content on open, modal dialogs only; call `event.preventDefault()` to place focus yourself.
      * @default undefined — focus moves to the first tabbable element.
      */
-    onOpenAutoFocus?: (event: AutoFocusEvent) => void;
+    onOpenAutoFocus?: ((event: AutoFocusEvent) => void) | undefined;
     /**
-     * Fires before focus returns to the previously focused element on close. Call `event.preventDefault()` to suppress the return — useful when the trigger no longer exists. Modal dialogs only.
+     * Fires before focus returns to the previously focused element on close, modal dialogs only; call `event.preventDefault()` to suppress the return.
      * @default undefined — focus returns to the element focused before the dialog opened.
      */
-    onCloseAutoFocus?: (event: AutoFocusEvent) => void;
+    onCloseAutoFocus?: ((event: AutoFocusEvent) => void) | undefined;
 }
 /** Props for {@link DialogTitle}, the dialog's accessible name. */
 export interface DialogTitleProps extends PrimitivePropsWithRef<'h2'> {
@@ -194,3 +212,19 @@ export interface DialogDescriptionProps extends PrimitivePropsWithRef<'p'> {
 /** Props for {@link DialogClose}, a button that closes the dialog. */
 export interface DialogCloseProps extends PrimitivePropsWithRef<'button'> {
 }
+/** Props for {@link DialogAction}, the button that carries out the confirmed action. */
+export interface DialogActionProps extends PrimitivePropsWithRef<'button'> {
+    /**
+     * Sets the native disabled attribute so the button neither confirms nor closes the dialog.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+}
+/** Props for {@link DialogCancel}, the button that abandons the action and takes initial focus in an alert dialog. */
+export interface DialogCancelProps extends PrimitivePropsWithRef<'button'> {
+    /**
+     * Sets the native disabled attribute so the button neither cancels nor closes the dialog.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+}

package/dist/dialog/types.d.ts

@@ -1,20 +1,26 @@
 import type * as React from 'react';
+import type { DrawerPlacement } from '../drawer/types.js';
+import type { AutoFocusEvent } from '../utils/dismissal.js';
 import type { PassThroughProps } from '../utils/passThrough.js';
 import type { PortalProps } from '../utils/portal.js';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
 import type { FocusOutsideEvent, InteractOutsideEvent } from '../utils/useDismiss.js';
-import type { AutoFocusEvent } from '../utils/useFocusTrap.js';
 /**
- * Which dismissal channels may close a {@link Dialog}: `'any'` both, `'escape'`
- * the Escape key only, `'outside'` an outside interaction only, `'none'`
- * neither. A policy over dismissal, not over the events — all four fire
- * regardless of mode.
+ * Which dismissal channels may close a {@link Dialog} — `'any'` both, `'escape'` Escape only, `'outside'` outside interaction only, `'none'` neither; a policy over dismissal, not over the events, which fire regardless.
  */
 export type DialogDismiss = 'any' | 'escape' | 'outside' | 'none';
+/**
+ * The panel's role — `'dialog'` for the ordinary panel, `'alertdialog'` for the interruptive confirmation that is always modal, never closed by an outside interaction, and focused on its Cancel button first.
+ */
+export type DialogRole = 'dialog' | 'alertdialog';
+/** @internal Which family a part belongs to, deciding its class stem and `data-part` namespace. Not part of the public API. */
+export type DialogFamily = 'dialog' | 'drawer';
 /** @internal Shared state distributed from {@link Dialog} to its parts via context. Not part of the public API. */
 export interface DialogContextValue {
+    /** Which family provided this state, so one part implementation serves both. */
+    family: DialogFamily;
     triggerRef: React.RefObject<HTMLButtonElement | null>;
-    contentRef: React.RefObject<HTMLDivElement | null>;
+    contentRef: React.RefObject<HTMLElement | null>;
     contentId: string;
     titleId: string;
     descriptionId: string;
@@ -29,6 +35,12 @@ export interface DialogContextValue {
     modal: boolean;
     /** The resolved dismissal policy, read by `DialogContent` to gate each channel and to emit `data-dismiss`. */
     dismiss: DialogDismiss;
+    /** The resolved panel role, read by `DialogContent` for its `role` attribute. */
+    role: DialogRole;
+    /** The severity rung `DialogContent` and `DialogAction` write as `data-status`. */
+    status: string | undefined;
+    /** The drawer family's viewport edge; the dialog family renders no placement of its own. */
+    placement: DrawerPlacement;
 }
 /**
  * Props for the {@link Dialog} root. Standard attributes ({@link
@@ -36,86 +48,102 @@ export interface DialogContextValue {
  */
 export interface DialogProps extends PassThroughProps {
     /**
-     * The trigger and portal, typically — the dialog's own DOM (overlay,
-     * content, title, description) is rendered by {@link DialogPortal} elsewhere.
+     * The trigger and portal, typically — the dialog's own DOM is rendered by {@link DialogPortal} elsewhere.
      * @default undefined — renders nothing if omitted.
      */
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
     /**
      * Whether the dialog is open, for controlled usage. Pair with `onOpenChange`.
      * @default undefined — uncontrolled, tracks its own open state internally.
      */
-    open?: boolean;
+    open?: boolean | undefined;
     /**
      * Whether the dialog is initially open, for uncontrolled usage.
      * @default false
      */
-    defaultOpen?: boolean;
+    defaultOpen?: boolean | undefined;
     /**
      * Fires with the new open state whenever the dialog opens or closes, controlled or not.
      * @default undefined — no-op if omitted.
      */
-    onOpenChange?: (open: boolean) => void;
+    onOpenChange?: ((open: boolean) => void) | undefined;
     /**
      * Fires with the new open state once the change has finished on screen,
      * after `DialogContent`'s exit/enter animation (or immediately with none).
      * @default undefined — no-op if omitted.
      */
-    onOpenChangeComplete?: (open: boolean) => void;
+    onOpenChangeComplete?: ((open: boolean) => void) | undefined;
     /**
-     * Whether the dialog traps focus and blocks interaction with the rest of
-     * the page (scroll lock, pointer-down-outside closes it). Set to `false`
-     * for a non-modal dialog that lets the page remain interactive.
+     * Whether the dialog traps focus and blocks interaction with the rest of the page; `false` leaves the page interactive.
      * @default true
      */
-    modal?: boolean;
+    modal?: boolean | undefined;
     /**
-     * Which dismissal channels close the dialog: `'any'`, `'escape'`,
-     * `'outside'`, or `'none'` (leaving `open`/`DialogClose`/`DialogTrigger`
-     * as the only ways out). The four dismissal events still fire in every
-     * mode; this only decides whether an un-prevented one closes the dialog.
-     * Narrows `modal` and never widens it — `'outside'` needs `modal` too.
-     * Reflected as `data-dismiss` on `DialogContent`.
+     * Which dismissal channels close the dialog — `'any'`, `'escape'`, `'outside'`, or `'none'` — reflected as `data-dismiss` on `DialogContent`.
      * @default 'any'
      */
-    dismiss?: DialogDismiss;
+    dismiss?: DialogDismiss | undefined;
     /**
-     * The derived panel's title, rendered as a `DialogTitle`. Only read when
-     * `children` is plain body content — ignored under full manual composition.
+     * The derived panel's title, rendered as a `DialogTitle`; only read when `children` is plain body content.
      * @default undefined — no derived title.
      */
-    title?: string;
+    title?: string | undefined;
     /**
-     * The derived panel's description, rendered as a `DialogDescription`.
-     * Only read when `children` is plain body content.
+     * The derived panel's description, rendered as a `DialogDescription`; only read when `children` is plain body content.
      * @default undefined — no derived description.
      */
-    description?: string;
+    description?: string | undefined;
     /**
-     * Content rendered after the body in the derived panel — typically the
-     * action buttons. Only read when `children` is plain body content.
+     * Content rendered after the body in the derived panel — typically the action buttons; only read when `children` is plain body content.
      * @default undefined — no footer.
      */
-    footer?: React.ReactNode;
+    footer?: React.ReactNode | undefined;
     /**
-     * Whether the derived panel can be dismissed at all: `false` forces
-     * `dismiss="none"` and withholds the derived close button.
+     * Whether the derived panel can be dismissed at all — `false` forces `dismiss="none"` and withholds the derived close button.
      * @default true
      */
-    dismissible?: boolean;
+    dismissible?: boolean | undefined;
+    /**
+     * Panel width rung the skin reads, fed to the derived `DialogContent`.
+     * @default undefined — the skin's own default width.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
+    /**
+     * The panel's role. `'alertdialog'` forces `modal`, resolves the outside dismissal channels away, focuses Cancel first, withholds the close button, and always derives an Action and a Cancel button.
+     * @default 'dialog'
+     */
+    role?: DialogRole | undefined;
+    /**
+     * Severity rung the skin reads, written as `data-status` on the panel and on the derived action button; `'danger'` is the destructive confirmation.
+     * @default undefined — the skin's own neutral appearance.
+     */
+    status?: 'info' | 'success' | 'warning' | 'danger' | (string & {}) | undefined;
+    /**
+     * Label of the derived action button, which renders only when this is given — or always under `role="alertdialog"`, where it defaults to `'Confirm'`.
+     * @default undefined — no derived action button, unless the role is `'alertdialog'`.
+     */
+    confirmLabel?: string | undefined;
+    /**
+     * Label of the derived cancel button, which renders only when this is given — or always under `role="alertdialog"`, where it defaults to `'Cancel'`.
+     * @default undefined — no derived cancel button, unless the role is `'alertdialog'`.
+     */
+    cancelLabel?: string | undefined;
+    /**
+     * Fires when the derived action button is clicked, before the close. Call `event.preventDefault()` to hold the panel open while the confirmed request is in flight.
+     * @default undefined — no-op if omitted.
+     */
+    onConfirm?: ((event: React.MouseEvent<HTMLButtonElement>) => void) | undefined;
+    /**
+     * Fires when the derived cancel button is clicked, before the close. Call `event.preventDefault()` to keep the panel open.
+     * @default undefined — no-op if omitted.
+     */
+    onCancel?: ((event: React.MouseEvent<HTMLButtonElement>) => void) | undefined;
 }
 /** Props for {@link DialogTrigger}, the button that opens the dialog. */
 export interface DialogTriggerProps extends PrimitivePropsWithRef<'button'> {
 }
 /** Props for {@link DialogPortal}, which teleports its children to `document.body`. */
 export interface DialogPortalProps extends PortalProps {
-    /**
-     * Render the portal even while the dialog is closed, instead of unmounting
-     * it. Useful for animation libraries that need the outgoing content present
-     * in the DOM during an exit transition.
-     * @default false
-     */
-    forceMount?: boolean;
 }
 /** Props for {@link DialogOverlay}, the backdrop rendered behind `DialogContent`. */
 export interface DialogOverlayProps extends PrimitivePropsWithRef<'div'> {
@@ -125,65 +153,55 @@ export interface DialogOverlayProps extends PrimitivePropsWithRef<'div'> {
      * during an exit transition.
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
 }
-/** Props for {@link DialogContent}, the dialog's panel. */
-export interface DialogContentProps extends PrimitivePropsWithRef<'div'> {
+/** Props for {@link DialogContent}, the dialog's panel — a native `<dialog>`, so it takes no `asChild`. */
+export interface DialogContentProps extends React.ComponentPropsWithRef<'dialog'> {
     /**
-     * Keep this panel mounted even while the dialog is closed. Useful for
-     * animation libraries that need the outgoing panel present in the DOM
-     * during an exit transition.
-     * @default false
+     * Panel width rung the skin reads, mirrored to `data-size` on the panel.
+     * @default undefined — the skin's own default width.
      */
-    forceMount?: boolean;
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
     /**
-     * CSS selector for the element to focus when the dialog opens, resolved
-     * with `querySelector` inside this panel only. Applies only when
-     * `onOpenAutoFocus` was not prevented; falls back to the first tabbable
-     * element (then the panel) with a console warning if it matches nothing.
+     * CSS selector for the element to focus when the dialog opens, resolved inside this panel; falls back to the first tabbable element with a console warning on a miss.
      * @default undefined — focus moves to the first tabbable element.
      */
-    initialFocus?: string;
+    initialFocus?: string | undefined;
     /**
-     * CSS selector for the element to focus when the dialog closes, resolved
-     * at document level since the panel is unmounting by then. Applies only
-     * when `onCloseAutoFocus` was not prevented; falls back to the previously
-     * focused element with a console warning if it matches nothing.
+     * CSS selector for the element to focus when the dialog closes, resolved at document level since the panel is unmounting; falls back to the previously focused element with a console warning on a miss.
      * @default undefined — focus returns to the element focused before the dialog opened.
      */
-    finalFocus?: string;
+    finalFocus?: string | undefined;
     /**
-     * Fires when Escape is pressed while the dialog is open. Call `event.preventDefault()` to stop the dialog from closing.
+     * Fires with the native `cancel` event when Escape is pressed while the dialog is open. Call `event.preventDefault()` to stop the dialog from closing.
      * @default undefined — no-op if omitted.
      */
-    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    onEscapeKeyDown?: ((event: Event) => void) | undefined;
     /**
      * Fires on pointer-down outside the content. Call `event.preventDefault()` to stop the dialog from closing (only applies when `modal` is true).
      * @default undefined — no-op if omitted.
      */
-    onPointerDownOutside?: (event: PointerEvent) => void;
+    onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;
     /**
      * Fires when focus moves to an element outside the content. Call `event.preventDefault()` to stop the dialog from closing (only applies when `modal` is true). Receives a cancelable stand-in carrying the original `focusin` as its `detail`, since `focusin` itself cannot be canceled.
      * @default undefined — no-op if omitted.
      */
-    onFocusOutside?: (event: FocusOutsideEvent) => void;
+    onFocusOutside?: ((event: FocusOutsideEvent) => void) | undefined;
     /**
-     * Fires for any outside interaction (pointer-down or focus) just before the
-     * specific handler, with the same event. One `event.preventDefault()` here
-     * vetoes dismissal regardless of trigger type.
+     * Fires for any outside interaction (pointer-down or focus) just before the specific handler, with the same event — one `event.preventDefault()` here vetoes dismissal regardless of trigger type.
      * @default undefined — no-op if omitted.
      */
-    onInteractOutside?: (event: InteractOutsideEvent) => void;
+    onInteractOutside?: ((event: InteractOutsideEvent) => void) | undefined;
     /**
-     * Fires before focus moves into the content on open. Call `event.preventDefault()` to keep focus where it is and place it yourself. Modal dialogs only — a non-modal dialog never moves focus.
+     * Fires before focus moves into the content on open, modal dialogs only; call `event.preventDefault()` to place focus yourself.
      * @default undefined — focus moves to the first tabbable element.
      */
-    onOpenAutoFocus?: (event: AutoFocusEvent) => void;
+    onOpenAutoFocus?: ((event: AutoFocusEvent) => void) | undefined;
     /**
-     * Fires before focus returns to the previously focused element on close. Call `event.preventDefault()` to suppress the return — useful when the trigger no longer exists. Modal dialogs only.
+     * Fires before focus returns to the previously focused element on close, modal dialogs only; call `event.preventDefault()` to suppress the return.
      * @default undefined — focus returns to the element focused before the dialog opened.
      */
-    onCloseAutoFocus?: (event: AutoFocusEvent) => void;
+    onCloseAutoFocus?: ((event: AutoFocusEvent) => void) | undefined;
 }
 /** Props for {@link DialogTitle}, the dialog's accessible name. */
 export interface DialogTitleProps extends PrimitivePropsWithRef<'h2'> {
@@ -194,3 +212,19 @@ export interface DialogDescriptionProps extends PrimitivePropsWithRef<'p'> {
 /** Props for {@link DialogClose}, a button that closes the dialog. */
 export interface DialogCloseProps extends PrimitivePropsWithRef<'button'> {
 }
+/** Props for {@link DialogAction}, the button that carries out the confirmed action. */
+export interface DialogActionProps extends PrimitivePropsWithRef<'button'> {
+    /**
+     * Sets the native disabled attribute so the button neither confirms nor closes the dialog.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+}
+/** Props for {@link DialogCancel}, the button that abandons the action and takes initial focus in an alert dialog. */
+export interface DialogCancelProps extends PrimitivePropsWithRef<'button'> {
+    /**
+     * Sets the native disabled attribute so the button neither cancels nor closes the dialog.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+}

package/dist/divider/Divider.cjs

@@ -0,0 +1,2 @@
+'use client';
+"use strict";var d=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var y=(e,r)=>{for(var t in r)d(e,t,{get:r[t],enumerable:!0})},h=(e,r,t,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of c(r))!v.call(e,o)&&o!==t&&d(e,o,{get:()=>r[o],enumerable:!(i=f(r,o))||i.enumerable});return e};var D=e=>h(d({},"__esModule",{value:!0}),e);var P={};y(P,{Divider:()=>s});module.exports=D(P);var p=require("../utils/appearance.cjs"),m=require("../utils/part.cjs"),n=require("../utils/primitive.cjs"),l=require("react/jsx-runtime"),s=({orientation:e="horizontal",decorative:r,children:t,ref:i,inset:o,...a})=>(0,l.jsx)(n.Primitive.hr,{"data-orientation":e,...r?{role:"none"}:{role:"separator","aria-orientation":e==="vertical"?e:void 0},...a,...(0,p.appearanceAttrs)({inset:o},a),...(0,m.skdxPart)("divider","root",a.className),...a.asChild?{children:t}:null,ref:i});s.displayName="Divider";0&&(module.exports={Divider});

package/dist/divider/Divider.d.cts

@@ -0,0 +1,18 @@
+import type * as React from 'react';
+import type { DividerProps } from './types.cjs';
+/**
+ * Divider rendered as `<hr>` with `role="separator"`, or `role="none"` when `decorative`.
+ *
+ * @example
+ * ```tsx
+ * <div>
+ *   <p>Section one</p>
+ *   <Divider />
+ *   <p>Section two</p>
+ * </div>
+ * ```
+ */
+export declare const Divider: {
+    ({ orientation, decorative, children, ref: forwardedRef, inset, ...props }: DividerProps): React.ReactNode;
+    displayName: string;
+};

package/dist/divider/Divider.d.ts

@@ -0,0 +1,18 @@
+import type * as React from 'react';
+import type { DividerProps } from './types.js';
+/**
+ * Divider rendered as `<hr>` with `role="separator"`, or `role="none"` when `decorative`.
+ *
+ * @example
+ * ```tsx
+ * <div>
+ *   <p>Section one</p>
+ *   <Divider />
+ *   <p>Section two</p>
+ * </div>
+ * ```
+ */
+export declare const Divider: {
+    ({ orientation, decorative, children, ref: forwardedRef, inset, ...props }: DividerProps): React.ReactNode;
+    displayName: string;
+};

package/dist/divider/Divider.js

@@ -0,0 +1,2 @@
+'use client';
+import{appearanceAttrs as d}from"../utils/appearance.js";import{skdxPart as p}from"../utils/part.js";import{Primitive as m}from"../utils/primitive.js";import{jsx as s}from"react/jsx-runtime";var n=({orientation:r="horizontal",decorative:o,children:t,ref:i,inset:a,...e})=>s(m.hr,{"data-orientation":r,...o?{role:"none"}:{role:"separator","aria-orientation":r==="vertical"?r:void 0},...e,...d({inset:a},e),...p("divider","root",e.className),...e.asChild?{children:t}:null,ref:i});n.displayName="Divider";export{n as Divider};

package/dist/divider/index.d.cts

@@ -0,0 +1,2 @@
+export * from './Divider.cjs';
+export type { DividerProps } from './types.cjs';

package/dist/divider/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Divider.js';
+export type { DividerProps } from './types.js';