@skdx/react 0.28.0 → 0.30.0

package/dist/dialog/Dialog.d.ts

@@ -1,37 +1,45 @@
 import * as React from 'react';
-import type { DialogContextValue, DialogProps } from './types.js';
-export declare const DialogProvider: {
-    (props: DialogContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useDialogContext: (consumerName: string) => DialogContextValue;
+import type { DrawerPlacement } from '../drawer/types.js';
+import type { DialogContextValue, DialogDismiss, DialogFamily, DialogProps, DialogRole } from './types.js';
+export declare const DialogProvider: React.FC<DialogContextValue & {
+    children: React.ReactNode;
+}>, useDialogContext: (consumerName: string) => DialogContextValue;
+/** @internal Props for {@link DialogStateProvider}. Not part of the public API. */
+export interface DialogStateProviderProps {
+    children?: React.ReactNode | undefined;
+    family: DialogFamily;
+    open?: boolean | undefined;
+    defaultOpen?: boolean | undefined;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    onOpenChangeComplete?: ((open: boolean) => void) | undefined;
+    modal: boolean;
+    dismiss: DialogDismiss;
+    role?: DialogRole | undefined;
+    status?: string | undefined;
+    placement?: DrawerPlacement | undefined;
+}
+/**
+ * The open state, element refs and generated ids every dialog and drawer part
+ * reads, published under one context so a single part implementation serves
+ * both families.
+ *
+ * @internal
+ */
+export declare function DialogStateProvider({ children, family, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, modal, dismiss, role, status, placement, }: DialogStateProviderProps): React.JSX.Element;
+export declare namespace DialogStateProvider {
+    var displayName: string;
+}
 /** Props for {@link DialogRoot}: {@link DialogProps} minus the derived-anatomy-only props. */
-export type DialogRootProps = Omit<DialogProps, 'title' | 'description' | 'footer'>;
+export type DialogRootProps = Omit<DialogProps, 'title' | 'description' | 'footer' | 'confirmLabel' | 'cancelLabel' | 'onConfirm' | 'onCancel'>;
 /**
- * State/context primitive that owns open state and hands it down to all dialog
- * parts via context, rendering `children` verbatim with no DOM element of its own.
- * The `Dialog` recipe (below) wraps this with `DialogAnatomy`, adding derived
- * anatomy. For full manual composition, use `DialogRoot` from
- * `@skdx/react/primitives/dialog`.
+ * State/context primitive that owns open state and hands it to all dialog parts via context, rendering `children` verbatim with no DOM element of its own.
  */
-export declare function DialogRoot({ children, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, modal, dismiss, dismissible, }: DialogRootProps): React.JSX.Element;
+export declare function DialogRoot({ children, open, defaultOpen, onOpenChange, onOpenChangeComplete, modal, dismiss, dismissible, role, status, }: DialogRootProps): React.JSX.Element;
 export declare namespace DialogRoot {
     var displayName: string;
 }
 /**
- * Recipe for a modal (by default) dialog: owns open state and passes it to all
- * parts via context with no DOM element of its own. Derives anatomy from
- * `title`/`description`/`footer`/`dismissible`: portal, overlay, title,
- * description, body (`children`), footer, and close button. `children` is the
- * body; the component reads only whether it exists. Works controlled (`open` +
- * `onOpenChange`) or uncontrolled (`defaultOpen`).
- *
- * When `modal={true}` (default), traps focus, locks body scroll, and closes on
- * outside pointer-down or Escape. `dismiss` narrows which channels close it
- * without silencing the dismissal events; `dismissible={false}` forces
- * `dismiss="none"` and withholds the close button, regardless of `dismiss`.
- * For full manual composition, use `DialogRoot` from `@skdx/react/primitives/dialog`.
+ * Recipe for a modal (by default) dialog, deriving anatomy from `title`/`description`/`footer`/`dismissible` — portal, overlay, title, description, body, footer, and close button. With `role="alertdialog"` it derives an action and a cancel button instead of the close.
  *
  * @example
  * ```tsx
@@ -39,25 +47,8 @@ export declare namespace DialogRoot {
  *   <SettingsForm />
  * </Dialog>
  * ```
- *
- * @example Full manual composition — `@skdx/react/primitives/dialog`.
- * ```tsx
- * import { DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger } from '@skdx/react/primitives/dialog';
- *
- * <DialogRoot>
- *   <DialogTrigger>Open</DialogTrigger>
- *   <DialogPortal>
- *     <DialogOverlay />
- *     <DialogContent>
- *       <DialogTitle>Edit profile</DialogTitle>
- *       <DialogDescription>Make changes to your profile here.</DialogDescription>
- *       <DialogClose>Close</DialogClose>
- *     </DialogContent>
- *   </DialogPortal>
- * </DialogRoot>
- * ```
  */
-export declare function Dialog({ children, open, defaultOpen, onOpenChange, onOpenChangeComplete, modal, dismiss, title, description, footer, dismissible, ...rest }: DialogProps): React.JSX.Element;
+export declare function Dialog({ children, open, defaultOpen, onOpenChange, onOpenChangeComplete, modal, dismiss, title, description, footer, dismissible, size, role, status, confirmLabel, cancelLabel, onConfirm, onCancel, ...rest }: DialogProps): React.JSX.Element;
 export declare namespace Dialog {
     var displayName: string;
 }

package/dist/dialog/Dialog.js

@@ -1 +1,2 @@
-import*as l from"react";import{createSafeContext as go}from"../utils/createContext.js";import{useControllableState as uo}from"../utils/useControllableState.js";import{useOpenChangeComplete as Do}from"../utils/useOpenChangeComplete.js";import*as I from"react";import{skdxPart as q}from"../utils/part.js";import{composeEventHandlers as V,Primitive as W}from"../utils/primitive.js";import{jsx as K}from"react/jsx-runtime";var T=I.forwardRef((t,e)=>{let r=n("DialogClose");return K(W.button,{type:"button",...t,...q("dialog","close",t.className),ref:e,onClick:V(t.onClick,()=>r.onOpenChange(!1))})});T.displayName="DialogClose";import*as M from"react";import{useComposedRefs as z}from"../utils/composeRefs.js";import{skdxPart as G}from"../utils/part.js";import{Primitive as J}from"../utils/primitive.js";import{TABBABLE_SELECTOR as Q}from"../utils/tabbable.js";import{useBodyScrollLock as U}from"../utils/useBodyScrollLock.js";import{useDismiss as X}from"../utils/useDismiss.js";import{autoFocusEvent as Y,useFocusTrap as Z}from"../utils/useFocusTrap.js";import{useOutsideInert as j}from"../utils/useOutsideInert.js";import{isDevMode as L}from"../utils/is-dev-mode.js";function v(t,e,r){if(!e)return null;let i;try{i=t.querySelector(e)}catch{return L()&&console.warn(`[skdx] Dialog: ${r}="${e}" is not a valid CSS selector. Falling back to the default focus target.`),null}return!i&&L()&&console.warn(_(r,e)),i}function _(t,e){return t==="initialFocus"?`[skdx] Dialog: initialFocus="${e}" matched no element inside the dialog panel. Falling back to the first tabbable element, then the panel itself.`:`[skdx] Dialog: finalFocus="${e}" matched no element in the document. Falling back to the element that was focused before the dialog opened.`}import{jsx as oo}from"react/jsx-runtime";var b=M.forwardRef(({forceMount:t,initialFocus:e,finalFocus:r,onEscapeKeyDown:i,onPointerDownOutside:s,onFocusOutside:p,onInteractOutside:u,onOpenAutoFocus:D,onCloseAutoFocus:c,...m},d)=>{let o=n("DialogContent"),C=z(d,o.contentRef),x=o.dismiss==="any"||o.dismiss==="escape",h=o.dismiss==="any"||o.dismiss==="outside",R=()=>{let a=v(document,r,"finalFocus");return a?(a.focus({preventScroll:!0}),!0):!1};return U(o.open&&o.modal),j(o.contentRef,o.open&&o.modal),Z(o.contentRef,o.open&&o.modal,{onOpenAutoFocus:a=>{if(D?.(a),a.defaultPrevented||!e)return;let g=o.contentRef.current;if(!g)return;let N=v(g,e,"initialFocus")??g.querySelector(Q)??g;a.preventDefault(),N===g&&(g.tabIndex=-1),N.focus({preventScroll:!0})},onCloseAutoFocus:a=>{c?.(a),!(a.defaultPrevented||!r)&&R()&&a.preventDefault()}}),X({enabled:o.open,onEscapeKeyDown:a=>{i?.(a),!(a.defaultPrevented||!x)&&(o.onOpenChange(!1),!o.modal&&Y("close-auto-focus",c)&&(R()||o.triggerRef.current?.focus()))},onInteractOutside:u,onPointerDownOutside:a=>{s?.(a),!a.defaultPrevented&&o.modal&&h&&o.onOpenChange(!1)},onFocusOutside:a=>{p?.(a),!a.defaultPrevented&&o.modal&&h&&o.onOpenChange(!1)}},[o.contentRef,o.triggerRef]),t||o.open?oo(J.div,{role:"dialog","aria-modal":o.modal||void 0,"aria-labelledby":o.hasTitle?o.titleId:void 0,"aria-describedby":o.hasDescription?o.descriptionId:void 0,id:o.contentId,"data-state":o.open?"open":"closed","data-dismiss":o.dismiss,...m,...G("dialog","content",m.className),ref:C}):null});b.displayName="DialogContent";import*as y from"react";import{skdxPart as eo}from"../utils/part.js";import{Primitive as to}from"../utils/primitive.js";import{jsx as ro}from"react/jsx-runtime";var O=y.forwardRef((t,e)=>{let r=n("DialogDescription"),{setHasDescription:i}=r;return y.useEffect(()=>(i(!0),()=>i(!1)),[i]),ro(to.p,{id:r.descriptionId,...t,...eo("dialog","description",t.className),ref:e})});O.displayName="DialogDescription";import*as w from"react";import{skdxPart as io}from"../utils/part.js";import{Primitive as ao}from"../utils/primitive.js";import{jsx as no}from"react/jsx-runtime";var E=w.forwardRef(({forceMount:t,...e},r)=>{let i=n("DialogOverlay");return t||i.open?no(ao.div,{"data-state":i.open?"open":"closed",...e,...io("dialog","overlay",e.className),ref:r,style:{pointerEvents:"auto",...e.style}}):null});E.displayName="DialogOverlay";import{Portal as lo}from"../utils/portal.js";import{jsx as so}from"react/jsx-runtime";var k=({forceMount:t,children:e,...r})=>{let i=n("DialogPortal");return t||i.open?so(lo,{...r,children:e}):null};k.displayName="DialogPortal";import*as P from"react";import{skdxPart as po}from"../utils/part.js";import{Primitive as mo}from"../utils/primitive.js";import{jsx as fo}from"react/jsx-runtime";var H=P.forwardRef((t,e)=>{let r=n("DialogTitle"),{setHasTitle:i}=r;return P.useEffect(()=>(i(!0),()=>i(!1)),[i]),fo(mo.h2,{id:r.titleId,...t,...po("dialog","title",t.className),ref:e})});H.displayName="DialogTitle";import{jsx as f,jsxs as S}from"react/jsx-runtime";var co=()=>f("svg",{viewBox:"0 0 16 16",width:"1em",height:"1em",fill:"none","aria-hidden":"true",focusable:"false",children:f("path",{d:"M4 4l8 8M12 4l-8 8",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})}),B=({title:t,description:e,footer:r,dismissible:i,children:s,passThrough:p})=>S(k,{children:[f(E,{}),S(b,{...p,children:[t?f(H,{children:t}):null,e?f(O,{children:e}):null,s,r,i?f(T,{"aria-label":"Close",children:f(co,{})}):null]})]});import{jsx as F}from"react/jsx-runtime";var[ho,n]=go("Dialog");function A({children:t,open:e,defaultOpen:r=!1,onOpenChange:i,onOpenChangeComplete:s,modal:p=!0,dismiss:u="any",dismissible:D=!0}){let c=l.useRef(null),m=l.useRef(null),[d,o]=l.useState(!1),[C,x]=l.useState(!1),[h=!1,R]=uo({prop:e,defaultProp:r,onChange:i});return Do(h,m,s),F(ho,{triggerRef:c,contentRef:m,contentId:l.useId(),titleId:l.useId(),descriptionId:l.useId(),hasTitle:d,setHasTitle:o,hasDescription:C,setHasDescription:x,open:h,onOpenChange:R,modal:p,dismiss:D?u:"none",children:t})}A.displayName="DialogRoot";function Ro({children:t,open:e,defaultOpen:r,onOpenChange:i,onOpenChangeComplete:s,modal:p,dismiss:u,title:D,description:c,footer:m,dismissible:d=!0,...o}){return F(A,{open:e,defaultOpen:r,onOpenChange:i,onOpenChangeComplete:s,modal:p,dismiss:u,dismissible:d,children:F(B,{title:D,description:c,footer:m,dismissible:d,passThrough:o,children:t})})}Ro.displayName="Dialog";import*as $ from"react";import{useComposedRefs as yo}from"../utils/composeRefs.js";import{skdxPart as Po}from"../utils/part.js";import{composeEventHandlers as Co,Primitive as xo}from"../utils/primitive.js";import{jsx as vo}from"react/jsx-runtime";var To=$.forwardRef((t,e)=>{let r=n("DialogTrigger"),i=yo(e,r.triggerRef);return vo(xo.button,{type:"button","aria-haspopup":"dialog","aria-expanded":r.open,"aria-controls":r.contentId,"data-state":r.open?"open":"closed",...t,...Po("dialog","trigger",t.className),ref:i,onClick:Co(t.onClick,()=>r.onOpenChange(!0))})});To.displayName="DialogTrigger";export{Ro as Dialog,T as DialogClose,b as DialogContent,O as DialogDescription,E as DialogOverlay,k as DialogPortal,ho as DialogProvider,A as DialogRoot,H as DialogTitle,To as DialogTrigger,n as useDialogContext};
+'use client';
+import*as y from"react";import{createSafeContext as Me}from"../utils/createContext.js";import{recipeAxis as U}from"../utils/recipeAxis.js";import{useControllableState as we}from"../utils/useControllableState.js";import{useOpenChangeComplete as Fe}from"../utils/useOpenChangeComplete.js";import{Glyph as Xe}from"../utils/Glyph.js";import{appearanceAttrs as te}from"../utils/appearance.js";import{skdxPart as ae}from"../utils/part.js";import{composeEventHandlers as ie,Primitive as ne}from"../utils/primitive.js";import{jsx as re}from"react/jsx-runtime";function H({ref:a,...e}){let o=r("DialogAction"),{disabled:t=!1}=e;return re(ne.button,{type:"button",...e,...te({status:o.status},e),...ae("dialog","action",e.className),ref:a,disabled:t,"data-disabled":t?"":void 0,onClick:ie(e.onClick,()=>o.onOpenChange(!1))})}H.displayName="DialogAction";import{skdxPart as le}from"../utils/part.js";import{composeEventHandlers as se,Primitive as me}from"../utils/primitive.js";import{jsx as pe}from"react/jsx-runtime";function L({ref:a,...e}){let o=r("DialogCancel"),{disabled:t=!1}=e;return pe(me.button,{type:"button","data-skdx-dialog-cancel":"",...e,...le("dialog","cancel",e.className),ref:a,disabled:t,"data-disabled":t?"":void 0,onClick:se(e.onClick,()=>o.onOpenChange(!1))})}L.displayName="DialogCancel";import{skdxPart as ce}from"../utils/part.js";import{composeEventHandlers as de,Primitive as fe}from"../utils/primitive.js";import{jsx as ge}from"react/jsx-runtime";function I({ref:a,...e}){let o=r("DialogClose");return ge(fe.button,{type:"button",...e,...ce(o.family,"close",e.className),ref:a,onClick:de(e.onClick,()=>o.onOpenChange(!1))})}I.displayName="DialogClose";import*as S from"react";import{appearanceAttrs as ue}from"../utils/appearance.js";import{useComposedRefs as De}from"../utils/composeRefs.js";import{autoFocusEvent as B,backdropPointerDown as ye,focusOnOpen as V}from"../utils/dismissal.js";import{applyFinalFocus as Ce,applyOpenAutoFocus as Pe}from"../utils/focus-targets.js";import{skdxPart as Re}from"../utils/part.js";import{composeEventHandlers as J}from"../utils/primitive.js";import{useBodyScrollLock as xe}from"../utils/useBodyScrollLock.js";import{useCallbackRef as O}from"../utils/useCallbackRef.js";import{useDismiss as ve}from"../utils/useDismiss.js";import{jsx as he}from"react/jsx-runtime";function X({ref:a,initialFocus:e,finalFocus:o,onEscapeKeyDown:t,onPointerDownOutside:d,onFocusOutside:C,onInteractOutside:l,onOpenAutoFocus:f,onCloseAutoFocus:s,onCancel:P,onClose:m,onPointerDown:g,size:p,...u}){let i=r("DialogContent"),{open:D,modal:c,onOpenChange:h,contentRef:v}=i,E=v,Z=De(a,E),$=i.dismiss==="any"||i.dismiss==="escape",N=i.dismiss==="any"||i.dismiss==="outside";xe(D&&c);let b=S.useRef(!1),T=O(()=>{b.current=!B("close-auto-focus",s),E.current?.close?.()}),z=O(()=>{let n=E.current;if(n)if(D&&!n.open){let R=document.activeElement;c?V(()=>n.showModal?.()):V(()=>n.show?.()),Pe(n,e,"Dialog",f,R)}else!D&&n.open&&T()});S.useEffect(()=>{z()},[D,c,z]),ve({enabled:D,onInteractOutside:l,onPointerDownOutside:n=>{d?.(n),!n.defaultPrevented&&c&&N&&T()},onFocusOutside:n=>{C?.(n),!n.defaultPrevented&&c&&N&&T()}},[E,i.triggerRef]);let j=O(n=>{let R=n.nativeEvent;if(t?.(R),!$){n.preventDefault();return}R.defaultPrevented||(b.current=!B("close-auto-focus",s))}),ee=O(()=>{b.current?(b.current=!1,document.activeElement?.blur?.()):Ce(o,"Dialog"),h(!1)});function oe(n){let R=ye(n.nativeEvent,n.currentTarget);R&&(l?.(R),d?.(R),!R.defaultPrevented&&c&&N&&T())}return he("dialog",{role:i.role,"aria-modal":c||void 0,"aria-labelledby":i.hasTitle?i.titleId:void 0,"aria-describedby":i.hasDescription?i.descriptionId:void 0,id:i.contentId,"data-state":D?"open":"closed","data-dismiss":i.dismiss,...u,...ue({size:p,status:i.status},u),...Re("dialog","content",u.className),ref:Z,onCancel:J(P,j),onClose:J(m,ee),onPointerDown:J(g,oe)})}X.displayName="DialogContent";import*as G from"react";import{skdxPart as Ee}from"../utils/part.js";import{Primitive as be}from"../utils/primitive.js";import{jsx as Te}from"react/jsx-runtime";function A({ref:a,...e}){let o=r("DialogDescription"),{setHasDescription:t}=o;return G.useEffect(()=>(t(!0),()=>t(!1)),[t]),Te(be.p,{id:o.descriptionId,...e,...Ee(o.family,"description",e.className),ref:a})}A.displayName="DialogDescription";import{skdxPart as Oe}from"../utils/part.js";import{Primitive as Se}from"../utils/primitive.js";import{jsx as ke}from"react/jsx-runtime";function M({ref:a,forceMount:e,...o}){let t=r("DialogOverlay");return e||t.open?ke(Se.div,{"data-state":t.open?"open":"closed",...o,...Oe(t.family,"overlay",o.className),ref:a,style:{pointerEvents:t.modal&&t.open?"auto":"none",...o.style}}):null}M.displayName="DialogOverlay";import{Portal as Ne}from"../utils/portal.js";import{jsx as _}from"react/jsx-runtime";var He=({forceMount:a,children:e,...o})=>{let t=r("Portal");return t.family==="dialog"||a||t.open?_(Ne,{...o,children:e}):null},w=({children:a,...e})=>_(He,{...e,children:a});w.displayName="DialogPortal";import*as q from"react";import{skdxPart as Le}from"../utils/part.js";import{Primitive as Ie}from"../utils/primitive.js";import{jsx as Je}from"react/jsx-runtime";function F({ref:a,...e}){let o=r("DialogTitle"),{setHasTitle:t}=o;return q.useEffect(()=>(t(!0),()=>t(!1)),[t]),Je(Ie.h2,{id:o.titleId,...e,...Le(o.family,"title",e.className),ref:a})}F.displayName="DialogTitle";import{jsx as x,jsxs as K}from"react/jsx-runtime";var Ae=()=>x(Xe,{name:"close"}),Q=({size:a,title:e,description:o,footer:t,dismissible:d,role:C,confirmLabel:l,cancelLabel:f,onConfirm:s,onCancel:P,children:m,passThrough:g})=>{let p=C==="alertdialog",u=p?l??"Confirm":l,i=p?f??"Cancel":f;return K(w,{children:[x(M,{}),K(X,{...g,size:a,children:[e?x(F,{children:e}):null,o?x(A,{children:o}):null,m,t,i?x(L,{onClick:P,children:i}):null,u?x(H,{onClick:s,children:u}):null,d&&!p?x(I,{"aria-label":"Close",children:x(Ae,{})}):null]})]})};import{jsx as k}from"react/jsx-runtime";var[ze,r]=Me("Dialog");function W({children:a,family:e,open:o,defaultOpen:t=!1,onOpenChange:d,onOpenChangeComplete:C,modal:l,dismiss:f,role:s="dialog",status:P,placement:m="end"}){let g=y.useRef(null),p=y.useRef(null),[u,i]=y.useState(!1),[D,c]=y.useState(!1),[h=!1,v]=we({prop:o,defaultProp:t,onChange:d});return Fe(h,p,C),k(ze,{family:e,triggerRef:g,contentRef:p,contentId:y.useId(),titleId:y.useId(),descriptionId:y.useId(),hasTitle:u,setHasTitle:i,hasDescription:D,setHasDescription:c,open:h,onOpenChange:v,modal:l,dismiss:f,role:s,status:P,placement:m,children:a})}W.displayName="DialogStateProvider";var Be={any:"escape",escape:"escape",outside:"none",none:"none"};function Y({children:a,open:e,defaultOpen:o,onOpenChange:t,onOpenChangeComplete:d,modal:C=!0,dismiss:l="any",dismissible:f=!0,role:s="dialog",status:P}){let m=s==="alertdialog",g=m?Be[l]:l;return f||(g="none"),k(W,{family:"dialog",open:e,defaultOpen:o,onOpenChange:t,onOpenChangeComplete:d,modal:m||C,dismiss:g,role:s,status:P,children:a})}Y.displayName="DialogRoot";function Ve({children:a,open:e,defaultOpen:o,onOpenChange:t,onOpenChangeComplete:d,modal:C,dismiss:l,title:f,description:s,footer:P,dismissible:m=!0,size:g,role:p="dialog",status:u,confirmLabel:i,cancelLabel:D,onConfirm:c,onCancel:h,...v}){let E=U(u,v,"data-status");return k(Y,{open:e,defaultOpen:o,onOpenChange:t,onOpenChangeComplete:d,modal:C,dismiss:l,dismissible:m,role:p,status:E,children:k(Q,{size:U(g,v,"data-size"),title:f,description:s,footer:P,dismissible:m,role:p,confirmLabel:i,cancelLabel:D,onConfirm:c,onCancel:h,passThrough:v,children:a})})}Ve.displayName="Dialog";import{useComposedRefs as Ge}from"../utils/composeRefs.js";import{skdxPart as _e}from"../utils/part.js";import{composeEventHandlers as qe,Primitive as Ke}from"../utils/primitive.js";import{jsx as Ue}from"react/jsx-runtime";function Qe({ref:a,...e}){let o=r("DialogTrigger"),t=Ge(a,o.triggerRef);return Ue(Ke.button,{type:"button","aria-haspopup":"dialog","aria-expanded":o.open,"aria-controls":o.contentId,"data-state":o.open?"open":"closed",...e,..._e(o.family,"trigger",e.className),ref:t,onClick:qe(e.onClick,()=>o.onOpenChange(!0))})}Qe.displayName="DialogTrigger";export{Ve as Dialog,H as DialogAction,L as DialogCancel,I as DialogClose,X as DialogContent,A as DialogDescription,M as DialogOverlay,w as DialogPortal,ze as DialogProvider,Y as DialogRoot,W as DialogStateProvider,F as DialogTitle,Qe as DialogTrigger,He as OverlayPortal,r as useDialogContext};

package/dist/dialog/DialogAction.d.cts

@@ -0,0 +1,17 @@
+import type * as React from 'react';
+import type { DialogActionProps } from './types.cjs';
+/**
+ * Button that carries out the confirmed action and closes the dialog. Attach
+ * `onClick` to do the work; the close is vetoable with
+ * `event.preventDefault()`, which is how a confirmation is held open while its
+ * request is in flight. Carries `data-status` when the root has one.
+ *
+ * @example
+ * ```tsx
+ * <DialogAction onClick={handleDelete}>Delete</DialogAction>
+ * ```
+ */
+export declare function DialogAction({ ref, ...props }: DialogActionProps): React.JSX.Element;
+export declare namespace DialogAction {
+    var displayName: string;
+}

package/dist/dialog/DialogAction.d.ts

@@ -0,0 +1,17 @@
+import type * as React from 'react';
+import type { DialogActionProps } from './types.js';
+/**
+ * Button that carries out the confirmed action and closes the dialog. Attach
+ * `onClick` to do the work; the close is vetoable with
+ * `event.preventDefault()`, which is how a confirmation is held open while its
+ * request is in flight. Carries `data-status` when the root has one.
+ *
+ * @example
+ * ```tsx
+ * <DialogAction onClick={handleDelete}>Delete</DialogAction>
+ * ```
+ */
+export declare function DialogAction({ ref, ...props }: DialogActionProps): React.JSX.Element;
+export declare namespace DialogAction {
+    var displayName: string;
+}

package/dist/dialog/DialogAnatomy.d.cts

@@ -1,17 +1,22 @@
 import type * as React from 'react';
 import type { PassThroughProps } from '../utils/passThrough.cjs';
+import type { DialogContentProps, DialogRole } from './types.cjs';
 /**
- * The anatomy a {@link Dialog} draws for plain body content: portal, overlay,
- * panel with derived title/description, body, footer, and close button (if
- * `dismissible`).
+ * Default {@link Dialog} anatomy: portal, overlay, panel with derived title/description, body, footer, and the buttons the role calls for.
  *
  * @internal
  */
-export declare const DialogAnatomy: ({ title, description, footer, dismissible, children, passThrough, }: {
-    title?: string;
-    description?: string;
-    footer?: React.ReactNode;
+export declare const DialogAnatomy: ({ size, title, description, footer, dismissible, role, confirmLabel, cancelLabel, onConfirm, onCancel, children, passThrough, }: {
+    size?: DialogContentProps["size"] | undefined;
+    title?: string | undefined;
+    description?: string | undefined;
+    footer?: React.ReactNode | undefined;
     dismissible: boolean;
-    children?: React.ReactNode;
-    passThrough?: PassThroughProps;
+    role: DialogRole;
+    confirmLabel?: string | undefined;
+    cancelLabel?: string | undefined;
+    onConfirm?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+    onCancel?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+    children?: React.ReactNode | undefined;
+    passThrough?: PassThroughProps | undefined;
 }) => React.JSX.Element;

package/dist/dialog/DialogAnatomy.d.ts

@@ -1,17 +1,22 @@
 import type * as React from 'react';
 import type { PassThroughProps } from '../utils/passThrough.js';
+import type { DialogContentProps, DialogRole } from './types.js';
 /**
- * The anatomy a {@link Dialog} draws for plain body content: portal, overlay,
- * panel with derived title/description, body, footer, and close button (if
- * `dismissible`).
+ * Default {@link Dialog} anatomy: portal, overlay, panel with derived title/description, body, footer, and the buttons the role calls for.
  *
  * @internal
  */
-export declare const DialogAnatomy: ({ title, description, footer, dismissible, children, passThrough, }: {
-    title?: string;
-    description?: string;
-    footer?: React.ReactNode;
+export declare const DialogAnatomy: ({ size, title, description, footer, dismissible, role, confirmLabel, cancelLabel, onConfirm, onCancel, children, passThrough, }: {
+    size?: DialogContentProps["size"] | undefined;
+    title?: string | undefined;
+    description?: string | undefined;
+    footer?: React.ReactNode | undefined;
     dismissible: boolean;
-    children?: React.ReactNode;
-    passThrough?: PassThroughProps;
+    role: DialogRole;
+    confirmLabel?: string | undefined;
+    cancelLabel?: string | undefined;
+    onConfirm?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+    onCancel?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+    children?: React.ReactNode | undefined;
+    passThrough?: PassThroughProps | undefined;
 }) => React.JSX.Element;

package/dist/dialog/DialogCancel.d.cts

@@ -0,0 +1,17 @@
+import type * as React from 'react';
+import type { DialogCancelProps } from './types.cjs';
+/**
+ * Button that abandons the action and closes the dialog. Marked with
+ * `data-skdx-dialog-cancel`, so an alert dialog gives it initial focus as the
+ * least destructive option; the close is vetoable with
+ * `event.preventDefault()`.
+ *
+ * @example
+ * ```tsx
+ * <DialogCancel>Cancel</DialogCancel>
+ * ```
+ */
+export declare function DialogCancel({ ref, ...props }: DialogCancelProps): React.JSX.Element;
+export declare namespace DialogCancel {
+    var displayName: string;
+}

package/dist/dialog/DialogCancel.d.ts

@@ -0,0 +1,17 @@
+import type * as React from 'react';
+import type { DialogCancelProps } from './types.js';
+/**
+ * Button that abandons the action and closes the dialog. Marked with
+ * `data-skdx-dialog-cancel`, so an alert dialog gives it initial focus as the
+ * least destructive option; the close is vetoable with
+ * `event.preventDefault()`.
+ *
+ * @example
+ * ```tsx
+ * <DialogCancel>Cancel</DialogCancel>
+ * ```
+ */
+export declare function DialogCancel({ ref, ...props }: DialogCancelProps): React.JSX.Element;
+export declare namespace DialogCancel {
+    var displayName: string;
+}

package/dist/dialog/DialogClose.d.cts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { DialogCloseProps } from './types.cjs';
 /**
  * Button that closes the dialog when clicked. Renders inside `DialogContent`
@@ -12,4 +12,7 @@ import type { DialogCloseProps } from './types.cjs';
  * </DialogContent>
  * ```
  */
-export declare const DialogClose: React.ForwardRefExoticComponent<Omit<DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare function DialogClose({ ref, ...props }: DialogCloseProps): React.JSX.Element;
+export declare namespace DialogClose {
+    var displayName: string;
+}

package/dist/dialog/DialogClose.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { DialogCloseProps } from './types.js';
 /**
  * Button that closes the dialog when clicked. Renders inside `DialogContent`
@@ -12,4 +12,7 @@ import type { DialogCloseProps } from './types.js';
  * </DialogContent>
  * ```
  */
-export declare const DialogClose: React.ForwardRefExoticComponent<Omit<DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare function DialogClose({ ref, ...props }: DialogCloseProps): React.JSX.Element;
+export declare namespace DialogClose {
+    var displayName: string;
+}

package/dist/dialog/DialogContent.d.cts

@@ -1,20 +1,7 @@
 import * as React from 'react';
 import type { DialogContentProps } from './types.cjs';
 /**
- * The dialog's panel: `role="dialog"` with `aria-modal` and `data-state`
- * (`open`/`closed`), labelled by `DialogTitle` and described by
- * `DialogDescription` via `aria-labelledby`/`aria-describedby` (emitted only
- * when mounted, avoiding dangling references).
- *
- * Under modal mode, traps focus, locks body scroll, and marks the rest `inert`
- * while open. Closes on Escape and (when modal) outside interaction
- * (pointer-down or focus-out). Each dismissal fires to its handler and to
- * `onInteractOutside` just before, with `event.preventDefault()` keeping it
- * open. Which channels actually dismiss is governed by the `dismiss` policy
- * (reflected as `data-dismiss`), with all events firing regardless. Focus moves
- * are announced as `onOpenAutoFocus`/`onCloseAutoFocus` and can be targeted
- * with `initialFocus`/`finalFocus`. Mounts only while open unless
- * `forceMount={true}`.
+ * The dialog's panel — a native `<dialog>` driven by `showModal()`/`show()`/`close()`, so the focus trap, top layer and page inertness come from the platform; labelled by `DialogTitle`, described by `DialogDescription`, and carrying `aria-modal`, `data-state` and `data-dismiss`.
  *
  * @example
  * ```tsx
@@ -27,4 +14,7 @@ import type { DialogContentProps } from './types.cjs';
  * </DialogPortal>
  * ```
  */
-export declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare function DialogContent({ ref, initialFocus, finalFocus, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, onOpenAutoFocus, onCloseAutoFocus, onCancel, onClose, onPointerDown, size, ...props }: DialogContentProps): React.JSX.Element;
+export declare namespace DialogContent {
+    var displayName: string;
+}

package/dist/dialog/DialogContent.d.ts

@@ -1,20 +1,7 @@
 import * as React from 'react';
 import type { DialogContentProps } from './types.js';
 /**
- * The dialog's panel: `role="dialog"` with `aria-modal` and `data-state`
- * (`open`/`closed`), labelled by `DialogTitle` and described by
- * `DialogDescription` via `aria-labelledby`/`aria-describedby` (emitted only
- * when mounted, avoiding dangling references).
- *
- * Under modal mode, traps focus, locks body scroll, and marks the rest `inert`
- * while open. Closes on Escape and (when modal) outside interaction
- * (pointer-down or focus-out). Each dismissal fires to its handler and to
- * `onInteractOutside` just before, with `event.preventDefault()` keeping it
- * open. Which channels actually dismiss is governed by the `dismiss` policy
- * (reflected as `data-dismiss`), with all events firing regardless. Focus moves
- * are announced as `onOpenAutoFocus`/`onCloseAutoFocus` and can be targeted
- * with `initialFocus`/`finalFocus`. Mounts only while open unless
- * `forceMount={true}`.
+ * The dialog's panel — a native `<dialog>` driven by `showModal()`/`show()`/`close()`, so the focus trap, top layer and page inertness come from the platform; labelled by `DialogTitle`, described by `DialogDescription`, and carrying `aria-modal`, `data-state` and `data-dismiss`.
  *
  * @example
  * ```tsx
@@ -27,4 +14,7 @@ import type { DialogContentProps } from './types.js';
  * </DialogPortal>
  * ```
  */
-export declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare function DialogContent({ ref, initialFocus, finalFocus, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, onOpenAutoFocus, onCloseAutoFocus, onCancel, onClose, onPointerDown, size, ...props }: DialogContentProps): React.JSX.Element;
+export declare namespace DialogContent {
+    var displayName: string;
+}

package/dist/dialog/DialogDescription.d.cts

@@ -11,4 +11,7 @@ import type { DialogDescriptionProps } from './types.cjs';
  * </DialogContent>
  * ```
  */
-export declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export declare function DialogDescription({ ref, ...props }: DialogDescriptionProps): React.JSX.Element;
+export declare namespace DialogDescription {
+    var displayName: string;
+}

package/dist/dialog/DialogDescription.d.ts

@@ -11,4 +11,7 @@ import type { DialogDescriptionProps } from './types.js';
  * </DialogContent>
  * ```
  */
-export declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export declare function DialogDescription({ ref, ...props }: DialogDescriptionProps): React.JSX.Element;
+export declare namespace DialogDescription {
+    var displayName: string;
+}

package/dist/dialog/DialogOverlay.d.cts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { DialogOverlayProps } from './types.cjs';
 /**
  * Backdrop behind `DialogContent` for dimming. Exposes `data-state` for animation; mounts only while open unless `forceMount` is set.
@@ -11,4 +11,7 @@ import type { DialogOverlayProps } from './types.cjs';
  * </DialogPortal>
  * ```
  */
-export declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogOverlayProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare function DialogOverlay({ ref, forceMount, ...props }: DialogOverlayProps): React.JSX.Element | null;
+export declare namespace DialogOverlay {
+    var displayName: string;
+}

package/dist/dialog/DialogOverlay.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { DialogOverlayProps } from './types.js';
 /**
  * Backdrop behind `DialogContent` for dimming. Exposes `data-state` for animation; mounts only while open unless `forceMount` is set.
@@ -11,4 +11,7 @@ import type { DialogOverlayProps } from './types.js';
  * </DialogPortal>
  * ```
  */
-export declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogOverlayProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare function DialogOverlay({ ref, forceMount, ...props }: DialogOverlayProps): React.JSX.Element | null;
+export declare namespace DialogOverlay {
+    var displayName: string;
+}

package/dist/dialog/DialogPortal.d.cts

@@ -1,7 +1,16 @@
+import type { JSX } from 'react';
+import { type PortalProps } from '../utils/portal.cjs';
 import type { DialogPortalProps } from './types.cjs';
 /**
- * Teleports `DialogOverlay` and `DialogContent` to `document.body` (or a custom
- * `container`). Mounts only while open unless `forceMount` is set.
+ * The portal both families render through.
+ *
+ * @internal
+ */
+export declare const OverlayPortal: ({ forceMount, children, ...props }: PortalProps & {
+    forceMount?: boolean | undefined;
+}) => JSX.Element | null;
+/**
+ * Teleports `DialogOverlay` and `DialogContent` to `document.body` (or a custom `container`), and stays mounted while the dialog is closed so the native `<dialog>` survives its own `close()`.
  *
  * @example
  * ```tsx
@@ -15,6 +24,6 @@ import type { DialogPortalProps } from './types.cjs';
  * ```
  */
 export declare const DialogPortal: {
-    ({ forceMount, children, ...props }: DialogPortalProps): import("react").JSX.Element | null;
+    ({ children, ...props }: DialogPortalProps): JSX.Element | null;
     displayName: string;
 };

package/dist/dialog/DialogPortal.d.ts

@@ -1,7 +1,16 @@
+import type { JSX } from 'react';
+import { type PortalProps } from '../utils/portal.js';
 import type { DialogPortalProps } from './types.js';
 /**
- * Teleports `DialogOverlay` and `DialogContent` to `document.body` (or a custom
- * `container`). Mounts only while open unless `forceMount` is set.
+ * The portal both families render through.
+ *
+ * @internal
+ */
+export declare const OverlayPortal: ({ forceMount, children, ...props }: PortalProps & {
+    forceMount?: boolean | undefined;
+}) => JSX.Element | null;
+/**
+ * Teleports `DialogOverlay` and `DialogContent` to `document.body` (or a custom `container`), and stays mounted while the dialog is closed so the native `<dialog>` survives its own `close()`.
  *
  * @example
  * ```tsx
@@ -15,6 +24,6 @@ import type { DialogPortalProps } from './types.js';
  * ```
  */
 export declare const DialogPortal: {
-    ({ forceMount, children, ...props }: DialogPortalProps): import("react").JSX.Element | null;
+    ({ children, ...props }: DialogPortalProps): JSX.Element | null;
     displayName: string;
 };

package/dist/dialog/DialogTitle.d.cts

@@ -11,4 +11,7 @@ import type { DialogTitleProps } from './types.cjs';
  * </DialogContent>
  * ```
  */
-export declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export declare function DialogTitle({ ref, ...props }: DialogTitleProps): React.JSX.Element;
+export declare namespace DialogTitle {
+    var displayName: string;
+}

package/dist/dialog/DialogTitle.d.ts

@@ -11,4 +11,7 @@ import type { DialogTitleProps } from './types.js';
  * </DialogContent>
  * ```
  */
-export declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export declare function DialogTitle({ ref, ...props }: DialogTitleProps): React.JSX.Element;
+export declare namespace DialogTitle {
+    var displayName: string;
+}

package/dist/dialog/DialogTrigger.d.cts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { DialogTriggerProps } from './types.cjs';
 /**
  * Button that opens the dialog. Sets `aria-haspopup="dialog"`, `aria-expanded`, `aria-controls`, and `data-state`.
@@ -13,4 +13,7 @@ import type { DialogTriggerProps } from './types.cjs';
  * </Dialog>
  * ```
  */
-export declare const DialogTrigger: React.ForwardRefExoticComponent<Omit<DialogTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare function DialogTrigger({ ref, ...props }: DialogTriggerProps): React.JSX.Element;
+export declare namespace DialogTrigger {
+    var displayName: string;
+}

package/dist/dialog/DialogTrigger.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { DialogTriggerProps } from './types.js';
 /**
  * Button that opens the dialog. Sets `aria-haspopup="dialog"`, `aria-expanded`, `aria-controls`, and `data-state`.
@@ -13,4 +13,7 @@ import type { DialogTriggerProps } from './types.js';
  * </Dialog>
  * ```
  */
-export declare const DialogTrigger: React.ForwardRefExoticComponent<Omit<DialogTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare function DialogTrigger({ ref, ...props }: DialogTriggerProps): React.JSX.Element;
+export declare namespace DialogTrigger {
+    var displayName: string;
+}

package/dist/dialog/index.d.cts

@@ -1,2 +1,2 @@
 export * from './Dialog.cjs';
-export type { DialogDismiss, DialogProps } from './types.cjs';
+export type { DialogDismiss, DialogProps, DialogRole } from './types.cjs';

package/dist/dialog/index.d.ts

@@ -1,2 +1,2 @@
 export * from './Dialog.js';
-export type { DialogDismiss, DialogProps } from './types.js';
+export type { DialogDismiss, DialogProps, DialogRole } from './types.js';

package/dist/dialog/primitives.d.cts

@@ -26,5 +26,7 @@ export { DialogContent } from './DialogContent.cjs';
 export { DialogTitle } from './DialogTitle.cjs';
 export { DialogDescription } from './DialogDescription.cjs';
 export { DialogClose } from './DialogClose.cjs';
+export { DialogAction } from './DialogAction.cjs';
+export { DialogCancel } from './DialogCancel.cjs';
 export type { DialogRootProps } from './Dialog.cjs';
-export type { DialogDismiss, DialogTriggerProps, DialogPortalProps, DialogOverlayProps, DialogContentProps, DialogTitleProps, DialogDescriptionProps, DialogCloseProps, } from './types.cjs';
+export type { DialogDismiss, DialogRole, DialogTriggerProps, DialogPortalProps, DialogOverlayProps, DialogContentProps, DialogTitleProps, DialogDescriptionProps, DialogCloseProps, DialogActionProps, DialogCancelProps, } from './types.cjs';

package/dist/dialog/primitives.d.ts

@@ -26,5 +26,7 @@ export { DialogContent } from './DialogContent.js';
 export { DialogTitle } from './DialogTitle.js';
 export { DialogDescription } from './DialogDescription.js';
 export { DialogClose } from './DialogClose.js';
+export { DialogAction } from './DialogAction.js';
+export { DialogCancel } from './DialogCancel.js';
 export type { DialogRootProps } from './Dialog.js';
-export type { DialogDismiss, DialogTriggerProps, DialogPortalProps, DialogOverlayProps, DialogContentProps, DialogTitleProps, DialogDescriptionProps, DialogCloseProps, } from './types.js';
+export type { DialogDismiss, DialogRole, DialogTriggerProps, DialogPortalProps, DialogOverlayProps, DialogContentProps, DialogTitleProps, DialogDescriptionProps, DialogCloseProps, DialogActionProps, DialogCancelProps, } from './types.js';