@skdx/react 0.26.0 → 0.28.0

package/dist/dialog/types.d.cts

@@ -1,8 +1,16 @@
 import type * as React from 'react';
+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.
+ */
+export type DialogDismiss = 'any' | 'escape' | 'outside' | 'none';
 /** @internal Shared state distributed from {@link Dialog} to its parts via context. Not part of the public API. */
 export interface DialogContextValue {
     triggerRef: React.RefObject<HTMLButtonElement | null>;
@@ -10,12 +18,23 @@ export interface DialogContextValue {
     contentId: string;
     titleId: string;
     descriptionId: string;
+    /** Whether a {@link DialogTitle} is mounted, so Content can withhold a dangling `aria-labelledby`. */
+    hasTitle: boolean;
+    setHasTitle: (present: boolean) => void;
+    /** Whether a {@link DialogDescription} is mounted, gating `aria-describedby` the same way. */
+    hasDescription: boolean;
+    setHasDescription: (present: boolean) => void;
     open: boolean;
     onOpenChange: (open: boolean) => void;
     modal: boolean;
+    /** The resolved dismissal policy, read by `DialogContent` to gate each channel and to emit `data-dismiss`. */
+    dismiss: DialogDismiss;
 }
-/** Props for the {@link Dialog} root. */
-export interface DialogProps {
+/**
+ * Props for the {@link Dialog} root. Standard attributes ({@link
+ * PassThroughProps}) land on the derived `DialogContent` panel.
+ */
+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.
@@ -38,10 +57,8 @@ export interface DialogProps {
      */
     onOpenChange?: (open: boolean) => void;
     /**
-     * Fires with the new open state once the change has finished on screen —
-     * after `DialogContent`'s enter or exit animation ends, or as soon as it has
-     * settled when the panel declares no animation. Use it for work that must not race
-     * the transition; use `onOpenChange` for work that must not wait for it.
+     * 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;
@@ -52,6 +69,40 @@ export interface DialogProps {
      * @default true
      */
     modal?: boolean;
+    /**
+     * 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`.
+     * @default 'any'
+     */
+    dismiss?: DialogDismiss;
+    /**
+     * The derived panel's title, rendered as a `DialogTitle`. Only read when
+     * `children` is plain body content — ignored under full manual composition.
+     * @default undefined — no derived title.
+     */
+    title?: string;
+    /**
+     * The derived panel's description, rendered as a `DialogDescription`.
+     * Only read when `children` is plain body content.
+     * @default undefined — no derived description.
+     */
+    description?: string;
+    /**
+     * 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;
+    /**
+     * Whether the derived panel can be dismissed at all: `false` forces
+     * `dismiss="none"` and withholds the derived close button.
+     * @default true
+     */
+    dismissible?: boolean;
 }
 /** Props for {@link DialogTrigger}, the button that opens the dialog. */
 export interface DialogTriggerProps extends PrimitivePropsWithRef<'button'> {
@@ -85,6 +136,22 @@ export interface DialogContentProps extends PrimitivePropsWithRef<'div'> {
      * @default false
      */
     forceMount?: boolean;
+    /**
+     * 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.
+     * @default undefined — focus moves to the first tabbable element.
+     */
+    initialFocus?: string;
+    /**
+     * 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.
+     * @default undefined — focus returns to the element focused before the dialog opened.
+     */
+    finalFocus?: string;
     /**
      * Fires when Escape is pressed while the dialog is open. Call `event.preventDefault()` to stop the dialog from closing.
      * @default undefined — no-op if omitted.
@@ -101,7 +168,9 @@ export interface DialogContentProps extends PrimitivePropsWithRef<'div'> {
      */
     onFocusOutside?: (event: FocusOutsideEvent) => void;
     /**
-     * Fires for either kind of outside interaction — pointer-down or focus — immediately before the specific handler above and with the same event, so one `event.preventDefault()` here vetoes the dismissal whichever way it was triggered.
+     * 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;

package/dist/dialog/types.d.ts

@@ -1,8 +1,16 @@
 import type * as React from 'react';
+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.
+ */
+export type DialogDismiss = 'any' | 'escape' | 'outside' | 'none';
 /** @internal Shared state distributed from {@link Dialog} to its parts via context. Not part of the public API. */
 export interface DialogContextValue {
     triggerRef: React.RefObject<HTMLButtonElement | null>;
@@ -10,12 +18,23 @@ export interface DialogContextValue {
     contentId: string;
     titleId: string;
     descriptionId: string;
+    /** Whether a {@link DialogTitle} is mounted, so Content can withhold a dangling `aria-labelledby`. */
+    hasTitle: boolean;
+    setHasTitle: (present: boolean) => void;
+    /** Whether a {@link DialogDescription} is mounted, gating `aria-describedby` the same way. */
+    hasDescription: boolean;
+    setHasDescription: (present: boolean) => void;
     open: boolean;
     onOpenChange: (open: boolean) => void;
     modal: boolean;
+    /** The resolved dismissal policy, read by `DialogContent` to gate each channel and to emit `data-dismiss`. */
+    dismiss: DialogDismiss;
 }
-/** Props for the {@link Dialog} root. */
-export interface DialogProps {
+/**
+ * Props for the {@link Dialog} root. Standard attributes ({@link
+ * PassThroughProps}) land on the derived `DialogContent` panel.
+ */
+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.
@@ -38,10 +57,8 @@ export interface DialogProps {
      */
     onOpenChange?: (open: boolean) => void;
     /**
-     * Fires with the new open state once the change has finished on screen —
-     * after `DialogContent`'s enter or exit animation ends, or as soon as it has
-     * settled when the panel declares no animation. Use it for work that must not race
-     * the transition; use `onOpenChange` for work that must not wait for it.
+     * 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;
@@ -52,6 +69,40 @@ export interface DialogProps {
      * @default true
      */
     modal?: boolean;
+    /**
+     * 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`.
+     * @default 'any'
+     */
+    dismiss?: DialogDismiss;
+    /**
+     * The derived panel's title, rendered as a `DialogTitle`. Only read when
+     * `children` is plain body content — ignored under full manual composition.
+     * @default undefined — no derived title.
+     */
+    title?: string;
+    /**
+     * The derived panel's description, rendered as a `DialogDescription`.
+     * Only read when `children` is plain body content.
+     * @default undefined — no derived description.
+     */
+    description?: string;
+    /**
+     * 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;
+    /**
+     * Whether the derived panel can be dismissed at all: `false` forces
+     * `dismiss="none"` and withholds the derived close button.
+     * @default true
+     */
+    dismissible?: boolean;
 }
 /** Props for {@link DialogTrigger}, the button that opens the dialog. */
 export interface DialogTriggerProps extends PrimitivePropsWithRef<'button'> {
@@ -85,6 +136,22 @@ export interface DialogContentProps extends PrimitivePropsWithRef<'div'> {
      * @default false
      */
     forceMount?: boolean;
+    /**
+     * 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.
+     * @default undefined — focus moves to the first tabbable element.
+     */
+    initialFocus?: string;
+    /**
+     * 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.
+     * @default undefined — focus returns to the element focused before the dialog opened.
+     */
+    finalFocus?: string;
     /**
      * Fires when Escape is pressed while the dialog is open. Call `event.preventDefault()` to stop the dialog from closing.
      * @default undefined — no-op if omitted.
@@ -101,7 +168,9 @@ export interface DialogContentProps extends PrimitivePropsWithRef<'div'> {
      */
     onFocusOutside?: (event: FocusOutsideEvent) => void;
     /**
-     * Fires for either kind of outside interaction — pointer-down or focus — immediately before the specific handler above and with the same event, so one `event.preventDefault()` here vetoes the dismissal whichever way it was triggered.
+     * 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;

package/dist/drawer/Drawer.cjs

@@ -1 +1 @@
-"use strict";var le=Object.create;var c=Object.defineProperty;var me=Object.getOwnPropertyDescriptor;var de=Object.getOwnPropertyNames;var fe=Object.getPrototypeOf,ce=Object.prototype.hasOwnProperty;var we=(e,r)=>{for(var t in r)c(e,t,{get:r[t],enumerable:!0})},O=(e,r,t,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of de(r))!ce.call(e,s)&&s!==t&&c(e,s,{get:()=>r[s],enumerable:!(n=me(r,s))||n.enumerable});return e};var p=(e,r,t)=>(t=e!=null?le(fe(e)):{},O(r||!e||!e.__esModule?c(t,"default",{value:e,enumerable:!0}):t,e)),De=e=>O(c({},"__esModule",{value:!0}),e);var ue={};we(ue,{Drawer:()=>I,DrawerClose:()=>T,DrawerContent:()=>v,DrawerDescription:()=>h,DrawerOverlay:()=>R,DrawerPortal:()=>C,DrawerProvider:()=>E,DrawerTitle:()=>x,DrawerTrigger:()=>g,useDrawerContext:()=>a});module.exports=De(ue);var l=p(require("react"),1),b=require("../utils/createContext.cjs"),N=require("../utils/useControllableState.cjs"),k=require("../utils/useOpenChangeComplete.cjs"),H=require("react/jsx-runtime"),[E,a]=(0,b.createSafeContext)("Drawer");function I({children:e,open:r,defaultOpen:t=!1,onOpenChange:n,onOpenChangeComplete:s,placement:u="end",modal:P=!0}){let d=l.useRef(null),f=l.useRef(null),[o=!1,y]=(0,N.useControllableState)({prop:r,defaultProp:t,onChange:n});return(0,k.useOpenChangeComplete)(o,f,s),(0,H.jsx)(E,{triggerRef:d,contentRef:f,contentId:l.useId(),titleId:l.useId(),descriptionId:l.useId(),open:o,onOpenChange:y,placement:u,modal:P,children:e})}I.displayName="Drawer";var L=p(require("react"),1),M=require("../utils/composeRefs.cjs"),S=require("../utils/part.cjs"),w=require("../utils/primitive.cjs");var B=require("react/jsx-runtime"),g=L.forwardRef((e,r)=>{let t=a("DrawerTrigger"),n=(0,M.useComposedRefs)(r,t.triggerRef);return(0,B.jsx)(w.Primitive.button,{type:"button","aria-haspopup":"dialog","aria-expanded":t.open,"aria-controls":t.contentId,"data-state":t.open?"open":"closed",...e,...(0,S.skdxPart)("drawer","trigger",e.className),ref:n,onClick:(0,w.composeEventHandlers)(e.onClick,()=>t.onOpenChange(!0))})});g.displayName="DrawerTrigger";var F=require("../utils/portal.cjs");var V=require("react/jsx-runtime"),C=({forceMount:e,children:r,...t})=>{let n=a("DrawerPortal");return e||n.open?(0,V.jsx)(F.Portal,{...t,children:r}):null};C.displayName="DrawerPortal";var J=p(require("react"),1),K=require("../utils/part.cjs"),q=require("../utils/primitive.cjs");var z=require("react/jsx-runtime"),R=J.forwardRef(({forceMount:e,...r},t)=>{let n=a("DrawerOverlay");return e||n.open?(0,z.jsx)(q.Primitive.div,{"data-state":n.open?"open":"closed",...r,...(0,K.skdxPart)("drawer","overlay",r.className),ref:t,style:{pointerEvents:"auto",...r.style}}):null});R.displayName="DrawerOverlay";var A=p(require("react"),1),G=require("../utils/composeRefs.cjs"),m=require("../utils/direction.cjs"),Q=require("../utils/part.cjs"),U=require("../utils/primitive.cjs"),W=require("../utils/useBodyScrollLock.cjs"),X=require("../utils/useDismiss.cjs"),Y=require("../utils/useFocusTrap.cjs");var Z=require("react/jsx-runtime"),v=A.forwardRef(({forceMount:e,onEscapeKeyDown:r,onPointerDownOutside:t,onFocusOutside:n,onInteractOutside:s,onOpenAutoFocus:u,onCloseAutoFocus:P,...d},f)=>{let o=a("DrawerContent"),y=(0,G.useComposedRefs)(f,o.contentRef),pe=(0,m.useDirection)();return(0,W.useBodyScrollLock)(o.open&&o.modal),(0,Y.useFocusTrap)(o.contentRef,o.open&&o.modal,{onOpenAutoFocus:u,onCloseAutoFocus:P}),(0,X.useDismiss)({enabled:o.open,onEscapeKeyDown:i=>{r?.(i),i.defaultPrevented||o.onOpenChange(!1)},onInteractOutside:s,onPointerDownOutside:i=>{t?.(i),i.defaultPrevented||o.onOpenChange(!1)},onFocusOutside:i=>{n?.(i),i.defaultPrevented||o.onOpenChange(!1)}},[o.contentRef,o.triggerRef]),e||o.open?(0,Z.jsx)(U.Primitive.div,{role:"dialog","aria-modal":o.modal||void 0,"aria-labelledby":o.titleId,"aria-describedby":o.descriptionId,id:o.contentId,"data-state":o.open?"open":"closed","data-placement":o.placement,"data-side":(0,m.resolvePhysicalSide)(o.placement,(0,m.resolveDirection)(null,pe)),...d,...(0,Q.skdxPart)("drawer","content",d.className),ref:y}):null});v.displayName="DrawerContent";var _=p(require("react"),1),$=require("../utils/part.cjs"),j=require("../utils/primitive.cjs");var ee=require("react/jsx-runtime"),x=_.forwardRef((e,r)=>{let t=a("DrawerTitle");return(0,ee.jsx)(j.Primitive.h2,{id:t.titleId,...e,...(0,$.skdxPart)("drawer","title",e.className),ref:r})});x.displayName="DrawerTitle";var re=p(require("react"),1),te=require("../utils/part.cjs"),oe=require("../utils/primitive.cjs");var ae=require("react/jsx-runtime"),h=re.forwardRef((e,r)=>{let t=a("DrawerDescription");return(0,ae.jsx)(oe.Primitive.p,{id:t.descriptionId,...e,...(0,te.skdxPart)("drawer","description",e.className),ref:r})});h.displayName="DrawerDescription";var ne=p(require("react"),1),se=require("../utils/part.cjs"),D=require("../utils/primitive.cjs");var ie=require("react/jsx-runtime"),T=ne.forwardRef((e,r)=>{let t=a("DrawerClose");return(0,ie.jsx)(D.Primitive.button,{type:"button",...e,...(0,se.skdxPart)("drawer","close",e.className),ref:r,onClick:(0,D.composeEventHandlers)(e.onClick,()=>t.onOpenChange(!1))})});T.displayName="DrawerClose";0&&(module.exports={Drawer,DrawerClose,DrawerContent,DrawerDescription,DrawerOverlay,DrawerPortal,DrawerProvider,DrawerTitle,DrawerTrigger,useDrawerContext});
+"use strict";var xe=Object.create;var R=Object.defineProperty;var Te=Object.getOwnPropertyDescriptor;var be=Object.getOwnPropertyNames;var Oe=Object.getPrototypeOf,Ee=Object.prototype.hasOwnProperty;var He=(e,r)=>{for(var t in r)R(e,t,{get:r[t],enumerable:!0})},q=(e,r,t,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of be(r))!Ee.call(e,n)&&n!==t&&R(e,n,{get:()=>r[n],enumerable:!(a=Te(r,n))||a.enumerable});return e};var c=(e,r,t)=>(t=e!=null?xe(Oe(e)):{},q(r||!e||!e.__esModule?R(t,"default",{value:e,enumerable:!0}):t,e)),ke=e=>q(R({},"__esModule",{value:!0}),e);var Ne={};He(Ne,{Drawer:()=>ge,DrawerClose:()=>C,DrawerContent:()=>T,DrawerDescription:()=>O,DrawerOverlay:()=>E,DrawerPortal:()=>H,DrawerProvider:()=>he,DrawerRoot:()=>$,DrawerTitle:()=>F,DrawerTrigger:()=>ve,useDrawerContext:()=>i});module.exports=ke(Ne);var p=c(require("react"),1),ue=require("../utils/createContext.cjs"),we=require("../utils/useControllableState.cjs"),De=require("../utils/useOpenChangeComplete.cjs");var J=c(require("react"),1),K=require("../utils/part.cjs"),v=require("../utils/primitive.cjs");var W=require("react/jsx-runtime"),C=J.forwardRef((e,r)=>{let t=i("DrawerClose");return(0,W.jsx)(v.Primitive.button,{type:"button",...e,...(0,K.skdxPart)("drawer","close",e.className),ref:r,onClick:(0,v.composeEventHandlers)(e.onClick,()=>t.onOpenChange(!1))})});C.displayName="DrawerClose";var Q=c(require("react"),1),U=require("../utils/composeRefs.cjs"),w=require("../utils/direction.cjs"),X=require("../utils/part.cjs"),Y=require("../utils/primitive.cjs"),Z=require("../utils/useBodyScrollLock.cjs"),_=require("../utils/useDismiss.cjs"),x=require("../utils/useFocusTrap.cjs"),j=require("../utils/useOutsideInert.cjs");var G=require("../utils/is-dev-mode.cjs"),z=new Set;function A(e,r,t){if(!r)return null;let a=null;try{a=e.querySelector(r)}catch{}if(a)return a;let n=`${t}:${r}`;return z.has(n)||(z.add(n),(0,G.isDevMode)()&&console.warn(`[skdx] DrawerContent: \`${t}="${r}"\` matched no element ${t==="initialFocus"?"inside the panel":"in the document"}, so focus ${t==="initialFocus"?"went to the panel's first tabbable element instead":"returned to whatever held it before the drawer opened instead"}. That fallback is why this is a warning rather than an error, and also why the mistake is otherwise invisible.`)),null}var ee=require("react/jsx-runtime"),T=Q.forwardRef(({forceMount:e,onEscapeKeyDown:r,onPointerDownOutside:t,onFocusOutside:a,onInteractOutside:n,onOpenAutoFocus:m,onCloseAutoFocus:D,initialFocus:h,finalFocus:g,...d},f)=>{let o=i("DrawerContent"),y=(0,U.useComposedRefs)(f,o.contentRef),M=(0,w.useDirection)(),L=o.dismiss==="any"||o.dismiss==="escape",P=o.dismiss==="any"||o.dismiss==="outside",S=s=>{if(m?.(s),s.defaultPrevented)return;let u=o.contentRef.current,V=u&&A(u,h,"initialFocus");V&&(s.preventDefault(),V.focus({preventScroll:!0}))},B=s=>{if(D?.(s),s.defaultPrevented)return;let u=A(document,g,"finalFocus");u&&(s.preventDefault(),u.focus({preventScroll:!0}))};return(0,Z.useBodyScrollLock)(o.open&&o.modal),(0,j.useOutsideInert)(o.contentRef,o.open&&o.modal),(0,x.useFocusTrap)(o.contentRef,o.open&&o.modal,{onOpenAutoFocus:S,onCloseAutoFocus:B}),(0,_.useDismiss)({enabled:o.open,onEscapeKeyDown:s=>{r?.(s),!(s.defaultPrevented||!L||(o.onOpenChange(!1),o.modal)||!o.contentRef.current?.contains(document.activeElement))&&(0,x.autoFocusEvent)("close-auto-focus",B)&&o.triggerRef.current?.focus()},onInteractOutside:n,onPointerDownOutside:s=>{t?.(s),!s.defaultPrevented&&P&&o.onOpenChange(!1)},onFocusOutside:s=>{a?.(s),!s.defaultPrevented&&P&&o.onOpenChange(!1)}},[o.contentRef,o.triggerRef]),e||o.open?(0,ee.jsx)(Y.Primitive.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-placement":o.placement,"data-side":(0,w.resolvePhysicalSide)(o.placement,(0,w.resolveDirection)(null,M)),"data-dismiss":o.dismiss,...d,...(0,X.skdxPart)("drawer","content",d.className),ref:y}):null});T.displayName="DrawerContent";var b=c(require("react"),1),re=require("../utils/part.cjs"),te=require("../utils/primitive.cjs");var oe=require("react/jsx-runtime"),O=b.forwardRef((e,r)=>{let t=i("DrawerDescription"),{setHasDescription:a}=t;return b.useEffect(()=>(a(!0),()=>a(!1)),[a]),(0,oe.jsx)(te.Primitive.p,{id:t.descriptionId,...e,...(0,re.skdxPart)("drawer","description",e.className),ref:r})});O.displayName="DrawerDescription";var ae=c(require("react"),1),ne=require("../utils/part.cjs"),se=require("../utils/primitive.cjs");var ie=require("react/jsx-runtime"),E=ae.forwardRef(({forceMount:e,...r},t)=>{let a=i("DrawerOverlay");return e||a.open?(0,ie.jsx)(se.Primitive.div,{"data-state":a.open?"open":"closed",...r,...(0,ne.skdxPart)("drawer","overlay",r.className),ref:t,style:{pointerEvents:"auto",...r.style}}):null});E.displayName="DrawerOverlay";var le=require("../utils/portal.cjs");var pe=require("react/jsx-runtime"),H=({forceMount:e,children:r,...t})=>{let a=i("DrawerPortal");return e||a.open?(0,pe.jsx)(le.Portal,{...t,children:r}):null};H.displayName="DrawerPortal";var k=c(require("react"),1),me=require("../utils/part.cjs"),ce=require("../utils/primitive.cjs");var de=require("react/jsx-runtime"),F=k.forwardRef((e,r)=>{let t=i("DrawerTitle"),{setHasTitle:a}=t;return k.useEffect(()=>(a(!0),()=>a(!1)),[a]),(0,de.jsx)(ce.Primitive.h2,{id:t.titleId,...e,...(0,me.skdxPart)("drawer","title",e.className),ref:r})});F.displayName="DrawerTitle";var l=require("react/jsx-runtime"),Fe=()=>(0,l.jsx)("svg",{viewBox:"0 0 16 16",width:"1em",height:"1em",fill:"none","aria-hidden":"true",focusable:"false",children:(0,l.jsx)("path",{d:"M4 4l8 8M12 4l-8 8",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})}),fe=({title:e,description:r,footer:t,dismissible:a,children:n,passThrough:m})=>(0,l.jsxs)(H,{children:[(0,l.jsx)(E,{}),(0,l.jsxs)(T,{...m,children:[e?(0,l.jsx)(F,{children:e}):null,r?(0,l.jsx)(O,{children:r}):null,n,t,a?(0,l.jsx)(C,{"aria-label":"Close",children:(0,l.jsx)(Fe,{})}):null]})]});var N=require("react/jsx-runtime"),[he,i]=(0,ue.createSafeContext)("Drawer");function $({children:e,open:r,defaultOpen:t=!1,onOpenChange:a,onOpenChangeComplete:n,placement:m="end",modal:D=!0,dismiss:h="any",dismissible:g=!0}){let d=p.useRef(null),f=p.useRef(null),[o,y]=p.useState(!1),[M,L]=p.useState(!1),[P=!1,S]=(0,we.useControllableState)({prop:r,defaultProp:t,onChange:a});return(0,De.useOpenChangeComplete)(P,f,n),(0,N.jsx)(he,{triggerRef:d,contentRef:f,contentId:p.useId(),titleId:p.useId(),descriptionId:p.useId(),hasTitle:o,setHasTitle:y,hasDescription:M,setHasDescription:L,open:P,onOpenChange:S,placement:m,modal:D,dismiss:g?h:"none",children:e})}$.displayName="DrawerRoot";function ge({children:e,open:r,defaultOpen:t,onOpenChange:a,onOpenChangeComplete:n,placement:m,modal:D,dismiss:h,title:g,description:d,footer:f,dismissible:o=!0,...y}){return(0,N.jsx)($,{open:r,defaultOpen:t,onOpenChange:a,onOpenChangeComplete:n,placement:m,modal:D,dismiss:h,dismissible:o,children:(0,N.jsx)(fe,{title:g,description:d,footer:f,dismissible:o,passThrough:y,children:e})})}ge.displayName="Drawer";var ye=c(require("react"),1),Pe=require("../utils/composeRefs.cjs"),Re=require("../utils/part.cjs"),I=require("../utils/primitive.cjs");var Ce=require("react/jsx-runtime"),ve=ye.forwardRef((e,r)=>{let t=i("DrawerTrigger"),a=(0,Pe.useComposedRefs)(r,t.triggerRef);return(0,Ce.jsx)(I.Primitive.button,{type:"button","aria-haspopup":"dialog","aria-expanded":t.open,"aria-controls":t.contentId,"data-state":t.open?"open":"closed",...e,...(0,Re.skdxPart)("drawer","trigger",e.className),ref:a,onClick:(0,I.composeEventHandlers)(e.onClick,()=>t.onOpenChange(!0))})});ve.displayName="DrawerTrigger";0&&(module.exports={Drawer,DrawerClose,DrawerContent,DrawerDescription,DrawerOverlay,DrawerPortal,DrawerProvider,DrawerRoot,DrawerTitle,DrawerTrigger,useDrawerContext});

package/dist/drawer/Drawer.d.cts

@@ -6,6 +6,19 @@ export declare const DrawerProvider: {
     }): React.JSX.Element;
     displayName: string;
 }, useDrawerContext: (consumerName: string) => DrawerContextValue;
+/** Props for {@link DrawerRoot}: {@link DrawerProps} minus the derived-anatomy-only props. */
+export type DrawerRootProps = Omit<DrawerProps, 'title' | 'description' | 'footer'>;
+/**
+ * State/context primitive that owns open state, placement, and modality,
+ * passing them to all drawer parts via context with no DOM element. The
+ * `Drawer` recipe (below) wraps this with `DrawerAnatomy`, adding derived
+ * anatomy. For full manual composition, use `DrawerRoot` from
+ * `@skdx/react/primitives/drawer`.
+ */
+export declare function DrawerRoot({ children, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, placement, modal, dismiss, dismissible, }: DrawerRootProps): React.JSX.Element;
+export declare namespace DrawerRoot {
+    var displayName: string;
+}
 /**
  * Root of a drawer — a panel anchored to one edge of the viewport (side
  * sheet, navigation drawer, or `placement="bottom"` bottom sheet). Owns open
@@ -14,10 +27,21 @@ export declare const DrawerProvider: {
  * `DrawerDescription` / `DrawerClose` via context. Renders no DOM element
  * itself.
  *
+ * Always draws the derived anatomy from `title`/`description`/`footer`/
+ * `dismissible`: portal, overlay, a derived title and description, the body
+ * (`children`), the footer, and a close button. `children` is the panel's
+ * body, never a switch — this component never inspects what it was given,
+ * only whether it exists. For full manual composition of the parts, use
+ * `DrawerRoot` from `@skdx/react/primitives/drawer` instead of this recipe.
+ *
  * Works controlled (`open` + `onOpenChange`) or uncontrolled (`defaultOpen`).
  * When `modal` is true (the default), `DrawerContent` traps focus and locks
  * body scroll; a non-modal drawer skips both but still closes on Escape or an
- * outside interaction.
+ * outside interaction. `dismiss` is what switches those two channels off — and
+ * the only thing that does, since (unlike Dialog) outside dismissal here is not
+ * gated on `modal`. `dismissible={false}` is the recipe's coarser form of the
+ * same thing — it forces `dismiss="none"` and withholds the derived close
+ * button, regardless of `dismiss`.
  *
  * `placement` is logical — `start`/`end` mirror under `dir="rtl"` — and is
  * passed through to `data-placement` untouched; the CSS decides which physical
@@ -25,7 +49,16 @@ export declare const DrawerProvider: {
  *
  * @example
  * ```tsx
- * <Drawer placement="start">
+ * <Drawer open={open} onOpenChange={setOpen} placement="end" title="Navigation">
+ *   <NavLinks />
+ * </Drawer>
+ * ```
+ *
+ * @example Full manual composition, for anything the derived anatomy can't express — `@skdx/react/primitives/drawer`.
+ * ```tsx
+ * import { DrawerClose, DrawerContent, DrawerDescription, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTitle, DrawerTrigger } from '@skdx/react/primitives/drawer';
+ *
+ * <DrawerRoot placement="start">
  *   <DrawerTrigger>Menu</DrawerTrigger>
  *   <DrawerPortal>
  *     <DrawerOverlay />
@@ -35,10 +68,10 @@ export declare const DrawerProvider: {
  *       <DrawerClose>Close</DrawerClose>
  *     </DrawerContent>
  *   </DrawerPortal>
- * </Drawer>
+ * </DrawerRoot>
  * ```
  */
-export declare function Drawer({ children, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, placement, modal, }: DrawerProps): React.JSX.Element;
+export declare function Drawer({ children, open, defaultOpen, onOpenChange, onOpenChangeComplete, placement, modal, dismiss, title, description, footer, dismissible, ...rest }: DrawerProps): React.JSX.Element;
 export declare namespace Drawer {
     var displayName: string;
 }

package/dist/drawer/Drawer.d.ts

@@ -6,6 +6,19 @@ export declare const DrawerProvider: {
     }): React.JSX.Element;
     displayName: string;
 }, useDrawerContext: (consumerName: string) => DrawerContextValue;
+/** Props for {@link DrawerRoot}: {@link DrawerProps} minus the derived-anatomy-only props. */
+export type DrawerRootProps = Omit<DrawerProps, 'title' | 'description' | 'footer'>;
+/**
+ * State/context primitive that owns open state, placement, and modality,
+ * passing them to all drawer parts via context with no DOM element. The
+ * `Drawer` recipe (below) wraps this with `DrawerAnatomy`, adding derived
+ * anatomy. For full manual composition, use `DrawerRoot` from
+ * `@skdx/react/primitives/drawer`.
+ */
+export declare function DrawerRoot({ children, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, placement, modal, dismiss, dismissible, }: DrawerRootProps): React.JSX.Element;
+export declare namespace DrawerRoot {
+    var displayName: string;
+}
 /**
  * Root of a drawer — a panel anchored to one edge of the viewport (side
  * sheet, navigation drawer, or `placement="bottom"` bottom sheet). Owns open
@@ -14,10 +27,21 @@ export declare const DrawerProvider: {
  * `DrawerDescription` / `DrawerClose` via context. Renders no DOM element
  * itself.
  *
+ * Always draws the derived anatomy from `title`/`description`/`footer`/
+ * `dismissible`: portal, overlay, a derived title and description, the body
+ * (`children`), the footer, and a close button. `children` is the panel's
+ * body, never a switch — this component never inspects what it was given,
+ * only whether it exists. For full manual composition of the parts, use
+ * `DrawerRoot` from `@skdx/react/primitives/drawer` instead of this recipe.
+ *
  * Works controlled (`open` + `onOpenChange`) or uncontrolled (`defaultOpen`).
  * When `modal` is true (the default), `DrawerContent` traps focus and locks
  * body scroll; a non-modal drawer skips both but still closes on Escape or an
- * outside interaction.
+ * outside interaction. `dismiss` is what switches those two channels off — and
+ * the only thing that does, since (unlike Dialog) outside dismissal here is not
+ * gated on `modal`. `dismissible={false}` is the recipe's coarser form of the
+ * same thing — it forces `dismiss="none"` and withholds the derived close
+ * button, regardless of `dismiss`.
  *
  * `placement` is logical — `start`/`end` mirror under `dir="rtl"` — and is
  * passed through to `data-placement` untouched; the CSS decides which physical
@@ -25,7 +49,16 @@ export declare const DrawerProvider: {
  *
  * @example
  * ```tsx
- * <Drawer placement="start">
+ * <Drawer open={open} onOpenChange={setOpen} placement="end" title="Navigation">
+ *   <NavLinks />
+ * </Drawer>
+ * ```
+ *
+ * @example Full manual composition, for anything the derived anatomy can't express — `@skdx/react/primitives/drawer`.
+ * ```tsx
+ * import { DrawerClose, DrawerContent, DrawerDescription, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTitle, DrawerTrigger } from '@skdx/react/primitives/drawer';
+ *
+ * <DrawerRoot placement="start">
  *   <DrawerTrigger>Menu</DrawerTrigger>
  *   <DrawerPortal>
  *     <DrawerOverlay />
@@ -35,10 +68,10 @@ export declare const DrawerProvider: {
  *       <DrawerClose>Close</DrawerClose>
  *     </DrawerContent>
  *   </DrawerPortal>
- * </Drawer>
+ * </DrawerRoot>
  * ```
  */
-export declare function Drawer({ children, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, placement, modal, }: DrawerProps): React.JSX.Element;
+export declare function Drawer({ children, open, defaultOpen, onOpenChange, onOpenChangeComplete, placement, modal, dismiss, title, description, footer, dismissible, ...rest }: DrawerProps): React.JSX.Element;
 export declare namespace Drawer {
     var displayName: string;
 }

package/dist/drawer/Drawer.js

@@ -1 +1 @@
-import*as i from"react";import{createSafeContext as N}from"../utils/createContext.js";import{useControllableState as k}from"../utils/useControllableState.js";import{useOpenChangeComplete as E}from"../utils/useOpenChangeComplete.js";import{jsx as L}from"react/jsx-runtime";var[I,a]=N("Drawer");function H({children:r,open:o,defaultOpen:t=!1,onOpenChange:n,onOpenChangeComplete:m,placement:d="end",modal:f=!0}){let p=i.useRef(null),l=i.useRef(null),[e=!1,c]=k({prop:o,defaultProp:t,onChange:n});return E(e,l,m),L(I,{triggerRef:p,contentRef:l,contentId:i.useId(),titleId:i.useId(),descriptionId:i.useId(),open:e,onOpenChange:c,placement:d,modal:f,children:r})}H.displayName="Drawer";import*as w from"react";import{useComposedRefs as M}from"../utils/composeRefs.js";import{skdxPart as S}from"../utils/part.js";import{composeEventHandlers as B,Primitive as F}from"../utils/primitive.js";import{jsx as V}from"react/jsx-runtime";var D=w.forwardRef((r,o)=>{let t=a("DrawerTrigger"),n=M(o,t.triggerRef);return V(F.button,{type:"button","aria-haspopup":"dialog","aria-expanded":t.open,"aria-controls":t.contentId,"data-state":t.open?"open":"closed",...r,...S("drawer","trigger",r.className),ref:n,onClick:B(r.onClick,()=>t.onOpenChange(!0))})});D.displayName="DrawerTrigger";import{Portal as J}from"../utils/portal.js";import{jsx as K}from"react/jsx-runtime";var u=({forceMount:r,children:o,...t})=>{let n=a("DrawerPortal");return r||n.open?K(J,{...t,children:o}):null};u.displayName="DrawerPortal";import*as P from"react";import{skdxPart as q}from"../utils/part.js";import{Primitive as z}from"../utils/primitive.js";import{jsx as A}from"react/jsx-runtime";var y=P.forwardRef(({forceMount:r,...o},t)=>{let n=a("DrawerOverlay");return r||n.open?A(z.div,{"data-state":n.open?"open":"closed",...o,...q("drawer","overlay",o.className),ref:t,style:{pointerEvents:"auto",...o.style}}):null});y.displayName="DrawerOverlay";import*as g from"react";import{useComposedRefs as G}from"../utils/composeRefs.js";import{resolveDirection as Q,resolvePhysicalSide as U,useDirection as W}from"../utils/direction.js";import{skdxPart as X}from"../utils/part.js";import{Primitive as Y}from"../utils/primitive.js";import{useBodyScrollLock as Z}from"../utils/useBodyScrollLock.js";import{useDismiss as _}from"../utils/useDismiss.js";import{useFocusTrap as $}from"../utils/useFocusTrap.js";import{jsx as j}from"react/jsx-runtime";var C=g.forwardRef(({forceMount:r,onEscapeKeyDown:o,onPointerDownOutside:t,onFocusOutside:n,onInteractOutside:m,onOpenAutoFocus:d,onCloseAutoFocus:f,...p},l)=>{let e=a("DrawerContent"),c=G(l,e.contentRef),b=W();return Z(e.open&&e.modal),$(e.contentRef,e.open&&e.modal,{onOpenAutoFocus:d,onCloseAutoFocus:f}),_({enabled:e.open,onEscapeKeyDown:s=>{o?.(s),s.defaultPrevented||e.onOpenChange(!1)},onInteractOutside:m,onPointerDownOutside:s=>{t?.(s),s.defaultPrevented||e.onOpenChange(!1)},onFocusOutside:s=>{n?.(s),s.defaultPrevented||e.onOpenChange(!1)}},[e.contentRef,e.triggerRef]),r||e.open?j(Y.div,{role:"dialog","aria-modal":e.modal||void 0,"aria-labelledby":e.titleId,"aria-describedby":e.descriptionId,id:e.contentId,"data-state":e.open?"open":"closed","data-placement":e.placement,"data-side":U(e.placement,Q(null,b)),...p,...X("drawer","content",p.className),ref:c}):null});C.displayName="DrawerContent";import*as R from"react";import{skdxPart as ee}from"../utils/part.js";import{Primitive as re}from"../utils/primitive.js";import{jsx as te}from"react/jsx-runtime";var v=R.forwardRef((r,o)=>{let t=a("DrawerTitle");return te(re.h2,{id:t.titleId,...r,...ee("drawer","title",r.className),ref:o})});v.displayName="DrawerTitle";import*as x from"react";import{skdxPart as oe}from"../utils/part.js";import{Primitive as ae}from"../utils/primitive.js";import{jsx as ne}from"react/jsx-runtime";var h=x.forwardRef((r,o)=>{let t=a("DrawerDescription");return ne(ae.p,{id:t.descriptionId,...r,...oe("drawer","description",r.className),ref:o})});h.displayName="DrawerDescription";import*as T from"react";import{skdxPart as se}from"../utils/part.js";import{composeEventHandlers as ie,Primitive as pe}from"../utils/primitive.js";import{jsx as le}from"react/jsx-runtime";var O=T.forwardRef((r,o)=>{let t=a("DrawerClose");return le(pe.button,{type:"button",...r,...se("drawer","close",r.className),ref:o,onClick:ie(r.onClick,()=>t.onOpenChange(!1))})});O.displayName="DrawerClose";export{H as Drawer,O as DrawerClose,C as DrawerContent,h as DrawerDescription,y as DrawerOverlay,u as DrawerPortal,I as DrawerProvider,v as DrawerTitle,D as DrawerTrigger,a as useDrawerContext};
+import*as l from"react";import{createSafeContext as he}from"../utils/createContext.js";import{useControllableState as ge}from"../utils/useControllableState.js";import{useOpenChangeComplete as ye}from"../utils/useOpenChangeComplete.js";import*as M from"react";import{skdxPart as J}from"../utils/part.js";import{composeEventHandlers as K,Primitive as W}from"../utils/primitive.js";import{jsx as z}from"react/jsx-runtime";var x=M.forwardRef((t,o)=>{let r=s("DrawerClose");return z(W.button,{type:"button",...t,...J("drawer","close",t.className),ref:o,onClick:K(t.onClick,()=>r.onOpenChange(!1))})});x.displayName="DrawerClose";import*as S from"react";import{useComposedRefs as Q}from"../utils/composeRefs.js";import{resolveDirection as U,resolvePhysicalSide as X,useDirection as Y}from"../utils/direction.js";import{skdxPart as Z}from"../utils/part.js";import{Primitive as _}from"../utils/primitive.js";import{useBodyScrollLock as j}from"../utils/useBodyScrollLock.js";import{useDismiss as ee}from"../utils/useDismiss.js";import{autoFocusEvent as re,useFocusTrap as te}from"../utils/useFocusTrap.js";import{useOutsideInert as oe}from"../utils/useOutsideInert.js";import{isDevMode as G}from"../utils/is-dev-mode.js";var L=new Set;function T(t,o,r){if(!o)return null;let a=null;try{a=t.querySelector(o)}catch{}if(a)return a;let i=`${r}:${o}`;return L.has(i)||(L.add(i),G()&&console.warn(`[skdx] DrawerContent: \`${r}="${o}"\` matched no element ${r==="initialFocus"?"inside the panel":"in the document"}, so focus ${r==="initialFocus"?"went to the panel's first tabbable element instead":"returned to whatever held it before the drawer opened instead"}. That fallback is why this is a warning rather than an error, and also why the mistake is otherwise invisible.`)),null}import{jsx as ae}from"react/jsx-runtime";var b=S.forwardRef(({forceMount:t,onEscapeKeyDown:o,onPointerDownOutside:r,onFocusOutside:a,onInteractOutside:i,onOpenAutoFocus:p,onCloseAutoFocus:u,initialFocus:w,finalFocus:D,...c},d)=>{let e=s("DrawerContent"),h=Q(d,e.contentRef),R=Y(),v=e.dismiss==="any"||e.dismiss==="escape",g=e.dismiss==="any"||e.dismiss==="outside",C=n=>{if(p?.(n),n.defaultPrevented)return;let f=e.contentRef.current,I=f&&T(f,w,"initialFocus");I&&(n.preventDefault(),I.focus({preventScroll:!0}))},N=n=>{if(u?.(n),n.defaultPrevented)return;let f=T(document,D,"finalFocus");f&&(n.preventDefault(),f.focus({preventScroll:!0}))};return j(e.open&&e.modal),oe(e.contentRef,e.open&&e.modal),te(e.contentRef,e.open&&e.modal,{onOpenAutoFocus:C,onCloseAutoFocus:N}),ee({enabled:e.open,onEscapeKeyDown:n=>{o?.(n),!(n.defaultPrevented||!v||(e.onOpenChange(!1),e.modal)||!e.contentRef.current?.contains(document.activeElement))&&re("close-auto-focus",N)&&e.triggerRef.current?.focus()},onInteractOutside:i,onPointerDownOutside:n=>{r?.(n),!n.defaultPrevented&&g&&e.onOpenChange(!1)},onFocusOutside:n=>{a?.(n),!n.defaultPrevented&&g&&e.onOpenChange(!1)}},[e.contentRef,e.triggerRef]),t||e.open?ae(_.div,{role:"dialog","aria-modal":e.modal||void 0,"aria-labelledby":e.hasTitle?e.titleId:void 0,"aria-describedby":e.hasDescription?e.descriptionId:void 0,id:e.contentId,"data-state":e.open?"open":"closed","data-placement":e.placement,"data-side":X(e.placement,U(null,R)),"data-dismiss":e.dismiss,...c,...Z("drawer","content",c.className),ref:h}):null});b.displayName="DrawerContent";import*as y from"react";import{skdxPart as ne}from"../utils/part.js";import{Primitive as se}from"../utils/primitive.js";import{jsx as ie}from"react/jsx-runtime";var O=y.forwardRef((t,o)=>{let r=s("DrawerDescription"),{setHasDescription:a}=r;return y.useEffect(()=>(a(!0),()=>a(!1)),[a]),ie(se.p,{id:r.descriptionId,...t,...ne("drawer","description",t.className),ref:o})});O.displayName="DrawerDescription";import*as A from"react";import{skdxPart as le}from"../utils/part.js";import{Primitive as pe}from"../utils/primitive.js";import{jsx as me}from"react/jsx-runtime";var E=A.forwardRef(({forceMount:t,...o},r)=>{let a=s("DrawerOverlay");return t||a.open?me(pe.div,{"data-state":a.open?"open":"closed",...o,...le("drawer","overlay",o.className),ref:r,style:{pointerEvents:"auto",...o.style}}):null});E.displayName="DrawerOverlay";import{Portal as ce}from"../utils/portal.js";import{jsx as de}from"react/jsx-runtime";var H=({forceMount:t,children:o,...r})=>{let a=s("DrawerPortal");return t||a.open?de(ce,{...r,children:o}):null};H.displayName="DrawerPortal";import*as P from"react";import{skdxPart as fe}from"../utils/part.js";import{Primitive as ue}from"../utils/primitive.js";import{jsx as we}from"react/jsx-runtime";var k=P.forwardRef((t,o)=>{let r=s("DrawerTitle"),{setHasTitle:a}=r;return P.useEffect(()=>(a(!0),()=>a(!1)),[a]),we(ue.h2,{id:r.titleId,...t,...fe("drawer","title",t.className),ref:o})});k.displayName="DrawerTitle";import{jsx as m,jsxs as $}from"react/jsx-runtime";var De=()=>m("svg",{viewBox:"0 0 16 16",width:"1em",height:"1em",fill:"none","aria-hidden":"true",focusable:"false",children:m("path",{d:"M4 4l8 8M12 4l-8 8",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})}),B=({title:t,description:o,footer:r,dismissible:a,children:i,passThrough:p})=>$(H,{children:[m(E,{}),$(b,{...p,children:[t?m(k,{children:t}):null,o?m(O,{children:o}):null,i,r,a?m(x,{"aria-label":"Close",children:m(De,{})}):null]})]});import{jsx as F}from"react/jsx-runtime";var[Pe,s]=he("Drawer");function V({children:t,open:o,defaultOpen:r=!1,onOpenChange:a,onOpenChangeComplete:i,placement:p="end",modal:u=!0,dismiss:w="any",dismissible:D=!0}){let c=l.useRef(null),d=l.useRef(null),[e,h]=l.useState(!1),[R,v]=l.useState(!1),[g=!1,C]=ge({prop:o,defaultProp:r,onChange:a});return ye(g,d,i),F(Pe,{triggerRef:c,contentRef:d,contentId:l.useId(),titleId:l.useId(),descriptionId:l.useId(),hasTitle:e,setHasTitle:h,hasDescription:R,setHasDescription:v,open:g,onOpenChange:C,placement:p,modal:u,dismiss:D?w:"none",children:t})}V.displayName="DrawerRoot";function Re({children:t,open:o,defaultOpen:r,onOpenChange:a,onOpenChangeComplete:i,placement:p,modal:u,dismiss:w,title:D,description:c,footer:d,dismissible:e=!0,...h}){return F(V,{open:o,defaultOpen:r,onOpenChange:a,onOpenChangeComplete:i,placement:p,modal:u,dismiss:w,dismissible:e,children:F(B,{title:D,description:c,footer:d,dismissible:e,passThrough:h,children:t})})}Re.displayName="Drawer";import*as q from"react";import{useComposedRefs as ve}from"../utils/composeRefs.js";import{skdxPart as Ce}from"../utils/part.js";import{composeEventHandlers as xe,Primitive as Te}from"../utils/primitive.js";import{jsx as Oe}from"react/jsx-runtime";var be=q.forwardRef((t,o)=>{let r=s("DrawerTrigger"),a=ve(o,r.triggerRef);return Oe(Te.button,{type:"button","aria-haspopup":"dialog","aria-expanded":r.open,"aria-controls":r.contentId,"data-state":r.open?"open":"closed",...t,...Ce("drawer","trigger",t.className),ref:a,onClick:xe(t.onClick,()=>r.onOpenChange(!0))})});be.displayName="DrawerTrigger";export{Re as Drawer,x as DrawerClose,b as DrawerContent,O as DrawerDescription,E as DrawerOverlay,H as DrawerPortal,Pe as DrawerProvider,V as DrawerRoot,k as DrawerTitle,be as DrawerTrigger,s as useDrawerContext};

package/dist/drawer/DrawerAnatomy.d.cts

@@ -0,0 +1,18 @@
+import type * as React from 'react';
+import type { PassThroughProps } from '../utils/passThrough.cjs';
+/**
+ * The anatomy a {@link Drawer} draws for plain body content: the portal,
+ * overlay, and panel, with `DrawerTitle`/`DrawerDescription` derived from
+ * `title`/`description`, the body in the middle, `footer` after it, and a
+ * close button when `dismissible`.
+ *
+ * @internal
+ */
+export declare const DrawerAnatomy: ({ title, description, footer, dismissible, children, passThrough, }: {
+    title?: string;
+    description?: string;
+    footer?: React.ReactNode;
+    dismissible: boolean;
+    children?: React.ReactNode;
+    passThrough?: PassThroughProps;
+}) => React.JSX.Element;

package/dist/drawer/DrawerAnatomy.d.ts

@@ -0,0 +1,18 @@
+import type * as React from 'react';
+import type { PassThroughProps } from '../utils/passThrough.js';
+/**
+ * The anatomy a {@link Drawer} draws for plain body content: the portal,
+ * overlay, and panel, with `DrawerTitle`/`DrawerDescription` derived from
+ * `title`/`description`, the body in the middle, `footer` after it, and a
+ * close button when `dismissible`.
+ *
+ * @internal
+ */
+export declare const DrawerAnatomy: ({ title, description, footer, dismissible, children, passThrough, }: {
+    title?: string;
+    description?: string;
+    footer?: React.ReactNode;
+    dismissible: boolean;
+    children?: React.ReactNode;
+    passThrough?: PassThroughProps;
+}) => React.JSX.Element;

package/dist/drawer/DrawerContent.d.cts

@@ -1,22 +1,9 @@
 import * as React from 'react';
 import type { DrawerContentProps } from './types.cjs';
 /**
- * The drawer's sliding panel: `role="dialog"`, labelled by `DrawerTitle` and
- * described by `DrawerDescription` via `aria-labelledby`/`aria-describedby`,
- * with `aria-modal`, `data-state` (`open`/`closed`) and `data-placement`
- * reflecting state. A plain positioned element, not a native `<dialog>` —
- * see `drawerContract` for why — so position it yourself off `data-placement`.
- *
- * When rendered under a modal `Drawer`, it traps focus and locks body scroll
- * while open; a non-modal drawer does neither. Either way it closes on Escape
- * and on an outside interaction — pointer-down outside or focus moving
- * outside, each reported to `onPointerDownOutside`/`onFocusOutside` and, just
- * before them and with the same event, to `onInteractOutside`. Any of those
- * (or `onEscapeKeyDown`) calling `event.preventDefault()` keeps it open.
- * The two focus moves the trap makes on the drawer's behalf are announced
- * first as `onOpenAutoFocus`/`onCloseAutoFocus`, cancelable the same way and —
- * unlike Dialog outside React — genuinely suppressed when vetoed.
- * Mounts only while open unless `forceMount` is set.
+ * Drawer panel: `role="dialog"`, labelled by Title/Description. Modal traps focus,
+ * locks scroll, marks outside `inert`. Closes on Escape/outside interaction. Position
+ * yourself via `data-placement`. Focus moves announced via `onOpenAutoFocus`/`onCloseAutoFocus`.
  *
  * @example
  * ```tsx

package/dist/drawer/DrawerContent.d.ts

@@ -1,22 +1,9 @@
 import * as React from 'react';
 import type { DrawerContentProps } from './types.js';
 /**
- * The drawer's sliding panel: `role="dialog"`, labelled by `DrawerTitle` and
- * described by `DrawerDescription` via `aria-labelledby`/`aria-describedby`,
- * with `aria-modal`, `data-state` (`open`/`closed`) and `data-placement`
- * reflecting state. A plain positioned element, not a native `<dialog>` —
- * see `drawerContract` for why — so position it yourself off `data-placement`.
- *
- * When rendered under a modal `Drawer`, it traps focus and locks body scroll
- * while open; a non-modal drawer does neither. Either way it closes on Escape
- * and on an outside interaction — pointer-down outside or focus moving
- * outside, each reported to `onPointerDownOutside`/`onFocusOutside` and, just
- * before them and with the same event, to `onInteractOutside`. Any of those
- * (or `onEscapeKeyDown`) calling `event.preventDefault()` keeps it open.
- * The two focus moves the trap makes on the drawer's behalf are announced
- * first as `onOpenAutoFocus`/`onCloseAutoFocus`, cancelable the same way and —
- * unlike Dialog outside React — genuinely suppressed when vetoed.
- * Mounts only while open unless `forceMount` is set.
+ * Drawer panel: `role="dialog"`, labelled by Title/Description. Modal traps focus,
+ * locks scroll, marks outside `inert`. Closes on Escape/outside interaction. Position
+ * yourself via `data-placement`. Focus moves announced via `onOpenAutoFocus`/`onCloseAutoFocus`.
  *
  * @example
  * ```tsx

package/dist/drawer/DrawerDescription.d.cts

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import type { DrawerDescriptionProps } from './types.cjs';
 /**
- * The drawer's accessible description: renders a `<p>` wired to
- * `DrawerContent` via `aria-describedby`.
+ * Drawer's accessible description: `<p>` wired to `DrawerContent` via `aria-describedby`.
  *
  * @example
  * ```tsx

package/dist/drawer/DrawerDescription.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import type { DrawerDescriptionProps } from './types.js';
 /**
- * The drawer's accessible description: renders a `<p>` wired to
- * `DrawerContent` via `aria-describedby`.
+ * Drawer's accessible description: `<p>` wired to `DrawerContent` via `aria-describedby`.
  *
  * @example
  * ```tsx

package/dist/drawer/DrawerOverlay.d.cts

@@ -1,14 +1,10 @@
 import * as React from 'react';
 import type { DrawerOverlayProps } from './types.cjs';
 /**
- * Scrim rendered behind `DrawerContent`, typically styled to dim the page.
- * A real element rather than a `::backdrop` pseudo-element (see
- * `drawerContract`'s note on why Drawer is not a native `<dialog>`), so it
- * carries `data-state` and can fade on its own timeline while the panel
- * slides. Mounts only while open unless `forceMount` is set.
- *
- * Rendered whether or not the drawer is modal — a non-modal drawer usually
- * styles it `pointer-events: none` or leaves it out entirely.
+ * Scrim rendered behind `DrawerContent` with independent `data-state`. Allows
+ * the overlay to fade on its own timeline while the panel slides. Mounts only
+ * while open unless `forceMount` is set. Rendered whether modal or not — a
+ * non-modal drawer typically uses `pointer-events: none` or omits it.
  *
  * @example
  * ```tsx