@skdx/react 0.27.0 → 0.29.0

package/dist/dialog/types.d.ts

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

package/dist/divider/Divider.cjs

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

package/dist/divider/Divider.d.cts

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

package/dist/divider/Divider.d.ts

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

package/dist/divider/Divider.js

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

package/dist/divider/index.d.cts

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

package/dist/divider/index.d.ts

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

package/dist/divider/types.d.cts

@@ -0,0 +1,19 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/** Props for the {@link Divider} root. */
+export interface DividerProps extends PrimitivePropsWithRef<'hr'> {
+    /**
+     * Layout axis. Exposed as `data-orientation` and `aria-orientation` when not `decorative` (vertical only; horizontal is ARIA default).
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical' | undefined;
+    /**
+     * When true, the separator is purely visual and removed from the a11y tree.
+     * @default false
+     */
+    decorative?: boolean | undefined;
+    /**
+     * Insets the rule from its container edges, mirrored to `data-inset`.
+     * @default undefined — the rule spans the full width.
+     */
+    inset?: 'inset' | (string & {}) | undefined;
+}

package/dist/divider/types.d.ts

@@ -0,0 +1,19 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+/** Props for the {@link Divider} root. */
+export interface DividerProps extends PrimitivePropsWithRef<'hr'> {
+    /**
+     * Layout axis. Exposed as `data-orientation` and `aria-orientation` when not `decorative` (vertical only; horizontal is ARIA default).
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical' | undefined;
+    /**
+     * When true, the separator is purely visual and removed from the a11y tree.
+     * @default false
+     */
+    decorative?: boolean | undefined;
+    /**
+     * Insets the rule from its container edges, mirrored to `data-inset`.
+     * @default undefined — the rule spans the full width.
+     */
+    inset?: 'inset' | (string & {}) | undefined;
+}

package/dist/drawer/Drawer.cjs

@@ -1 +1,2 @@
-"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 client';
+"use strict";var R=Object.defineProperty;var Z=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var $=Object.prototype.hasOwnProperty;var j=(o,r)=>{for(var t in r)R(o,t,{get:r[t],enumerable:!0})},ee=(o,r,t,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of _(r))!$.call(o,a)&&a!==t&&R(o,a,{get:()=>r[a],enumerable:!(i=Z(r,a))||i.enumerable});return o};var re=o=>ee(R({},"__esModule",{value:!0}),o);var te={};j(te,{Drawer:()=>q,DrawerContent:()=>y,DrawerPortal:()=>g,DrawerRoot:()=>C});module.exports=re(te);var H=require("../dialog/Dialog.cjs"),K=require("../utils/recipeAxis.cjs");var F=require("../dialog/Dialog.cjs"),L=require("../dialog/Dialog.cjs"),M=require("../dialog/Dialog.cjs"),W=require("../dialog/Dialog.cjs"),B=require("../utils/Glyph.cjs");var v=require("../dialog/Dialog.cjs"),b=require("../utils/appearance.cjs"),x=require("../utils/composeRefs.cjs"),c=require("../utils/direction.cjs"),T=require("../utils/focus-targets.cjs"),S=require("../utils/part.cjs"),E=require("../utils/primitive.cjs"),N=require("../utils/useBodyScrollLock.cjs"),I=require("../utils/useDismiss.cjs"),z=require("../utils/useFocusTrap.cjs"),J=require("../utils/useOutsideInert.cjs"),X=require("react/jsx-runtime"),y=({forceMount:o,onEscapeKeyDown:r,onPointerDownOutside:t,onFocusOutside:i,onInteractOutside:a,onOpenAutoFocus:p,onCloseAutoFocus:s,initialFocus:f,finalFocus:m,size:h,ref:P,...d})=>{let e=(0,v.useDialogContext)("DrawerContent"),{contentRef:D}=e,u=D,Q=(0,x.useComposedRefs)(P,u),U=(0,c.useDirection)(),V=e.dismiss==="any"||e.dismiss==="escape",O=e.dismiss==="any"||e.dismiss==="outside";return(0,N.useBodyScrollLock)(e.open&&e.modal),(0,J.useOutsideInert)(u,e.open&&e.modal),(0,z.useFocusTrap)(u,e.open&&e.modal,{onOpenAutoFocus:p,onCloseAutoFocus:s,initialFocus:f,finalFocus:m,family:"Drawer"}),(0,I.useDismiss)({enabled:e.open,onEscapeKeyDown:l=>{if(r?.(l),l.defaultPrevented||!V)return;let Y=!!u.current?.contains(document.activeElement);e.onOpenChange(!1),!(e.modal||!Y)&&(0,T.returnFocus)(m,"Drawer",e.triggerRef.current,s)},onInteractOutside:a,onPointerDownOutside:l=>{t?.(l),!l.defaultPrevented&&O&&e.onOpenChange(!1)},onFocusOutside:l=>{i?.(l),!l.defaultPrevented&&O&&e.onOpenChange(!1)}},[u,e.triggerRef]),o||e.open?(0,X.jsx)(E.Primitive.div,{role:"dialog","aria-modal":e.open&&e.modal?"true":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":(0,c.resolvePhysicalSide)(e.placement,(0,c.resolveDirection)(null,U)),"data-dismiss":e.dismiss,...d,...(0,b.appearanceAttrs)({size:h},d),...(0,S.skdxPart)("drawer","content",d.className),ref:Q}):null};y.displayName="DrawerContent";var A=require("../dialog/Dialog.cjs"),k=require("react/jsx-runtime"),g=({forceMount:o,children:r,...t})=>(0,k.jsx)(A.OverlayPortal,{forceMount:o,...t,children:r});g.displayName="DrawerPortal";var n=require("react/jsx-runtime"),oe=()=>(0,n.jsx)(B.Glyph,{name:"close"}),G=({size:o,title:r,description:t,footer:i,dismissible:a,children:p,passThrough:s})=>(0,n.jsxs)(g,{children:[(0,n.jsx)(M.DialogOverlay,{}),(0,n.jsxs)(y,{...s,size:o,children:[r?(0,n.jsx)(W.DialogTitle,{children:r}):null,t?(0,n.jsx)(L.DialogDescription,{children:t}):null,p,i,a?(0,n.jsx)(F.DialogClose,{"aria-label":"Close",children:(0,n.jsx)(oe,{})}):null]})]});var w=require("react/jsx-runtime");function C({children:o,open:r,defaultOpen:t,onOpenChange:i,onOpenChangeComplete:a,placement:p,modal:s=!0,dismiss:f="any",dismissible:m=!0}){return(0,w.jsx)(H.DialogStateProvider,{family:"drawer",open:r,defaultOpen:t,onOpenChange:i,onOpenChangeComplete:a,placement:p,modal:s,dismiss:m?f:"none",children:o})}C.displayName="DrawerRoot";function q({children:o,open:r,defaultOpen:t,onOpenChange:i,onOpenChangeComplete:a,placement:p,modal:s,dismiss:f,title:m,description:h,footer:P,dismissible:d=!0,size:e,...D}){return(0,w.jsx)(C,{open:r,defaultOpen:t,onOpenChange:i,onOpenChangeComplete:a,placement:p,modal:s,dismiss:f,dismissible:d,children:(0,w.jsx)(G,{size:(0,K.recipeAxis)(e,D,"data-size"),title:m,description:h,footer:P,dismissible:d,passThrough:D,children:o})})}q.displayName="Drawer";0&&(module.exports={Drawer,DrawerContent,DrawerPortal,DrawerRoot});

package/dist/drawer/Drawer.d.cts

@@ -1,44 +1,25 @@
-import * as React from 'react';
-import type { DrawerContextValue, DrawerProps } from './types.cjs';
-export declare const DrawerProvider: {
-    (props: DrawerContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useDrawerContext: (consumerName: string) => DrawerContextValue;
+import type * as React from 'react';
+import type { DrawerProps } from './types.cjs';
+/** Props for {@link DrawerRoot}: {@link DrawerProps} minus the derived-anatomy-only props. */
+export type DrawerRootProps = Omit<DrawerProps, 'title' | 'description' | 'footer'>;
 /**
- * Root of a drawer — a panel anchored to one edge of the viewport (side
- * sheet, navigation drawer, or `placement="bottom"` bottom sheet). Owns open
- * state, placement and modality, and hands them down to `DrawerTrigger` /
- * `DrawerPortal` / `DrawerOverlay` / `DrawerContent` / `DrawerTitle` /
- * `DrawerDescription` / `DrawerClose` via context. Renders no DOM element
- * itself.
- *
- * 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.
- *
- * `placement` is logical — `start`/`end` mirror under `dir="rtl"` — and is
- * passed through to `data-placement` untouched; the CSS decides which physical
- * edge that is.
+ * State/context primitive that owns open state, placement, and modality, passing them to all drawer parts via context with no DOM element of its own.
+ */
+export declare function DrawerRoot({ children, open, defaultOpen, onOpenChange, onOpenChangeComplete, placement, modal, dismiss, dismissible, }: DrawerRootProps): React.JSX.Element;
+export declare namespace DrawerRoot {
+    var displayName: string;
+}
+/**
+ * Recipe for a drawer — a panel anchored to one edge of the viewport — deriving anatomy from `title`/`description`/`footer`/`dismissible`: portal, overlay, title, description, body, footer, and close button.
  *
  * @example
  * ```tsx
- * <Drawer placement="start">
- *   <DrawerTrigger>Menu</DrawerTrigger>
- *   <DrawerPortal>
- *     <DrawerOverlay />
- *     <DrawerContent>
- *       <DrawerTitle>Navigation</DrawerTitle>
- *       <DrawerDescription>Jump to a section.</DrawerDescription>
- *       <DrawerClose>Close</DrawerClose>
- *     </DrawerContent>
- *   </DrawerPortal>
+ * <Drawer open={open} onOpenChange={setOpen} placement="end" title="Navigation">
+ *   <NavLinks />
  * </Drawer>
  * ```
  */
-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, size, ...rest }: DrawerProps): React.JSX.Element;
 export declare namespace Drawer {
     var displayName: string;
 }

package/dist/drawer/Drawer.d.ts

@@ -1,44 +1,25 @@
-import * as React from 'react';
-import type { DrawerContextValue, DrawerProps } from './types.js';
-export declare const DrawerProvider: {
-    (props: DrawerContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useDrawerContext: (consumerName: string) => DrawerContextValue;
+import type * as React from 'react';
+import type { DrawerProps } from './types.js';
+/** Props for {@link DrawerRoot}: {@link DrawerProps} minus the derived-anatomy-only props. */
+export type DrawerRootProps = Omit<DrawerProps, 'title' | 'description' | 'footer'>;
 /**
- * Root of a drawer — a panel anchored to one edge of the viewport (side
- * sheet, navigation drawer, or `placement="bottom"` bottom sheet). Owns open
- * state, placement and modality, and hands them down to `DrawerTrigger` /
- * `DrawerPortal` / `DrawerOverlay` / `DrawerContent` / `DrawerTitle` /
- * `DrawerDescription` / `DrawerClose` via context. Renders no DOM element
- * itself.
- *
- * 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.
- *
- * `placement` is logical — `start`/`end` mirror under `dir="rtl"` — and is
- * passed through to `data-placement` untouched; the CSS decides which physical
- * edge that is.
+ * State/context primitive that owns open state, placement, and modality, passing them to all drawer parts via context with no DOM element of its own.
+ */
+export declare function DrawerRoot({ children, open, defaultOpen, onOpenChange, onOpenChangeComplete, placement, modal, dismiss, dismissible, }: DrawerRootProps): React.JSX.Element;
+export declare namespace DrawerRoot {
+    var displayName: string;
+}
+/**
+ * Recipe for a drawer — a panel anchored to one edge of the viewport — deriving anatomy from `title`/`description`/`footer`/`dismissible`: portal, overlay, title, description, body, footer, and close button.
  *
  * @example
  * ```tsx
- * <Drawer placement="start">
- *   <DrawerTrigger>Menu</DrawerTrigger>
- *   <DrawerPortal>
- *     <DrawerOverlay />
- *     <DrawerContent>
- *       <DrawerTitle>Navigation</DrawerTitle>
- *       <DrawerDescription>Jump to a section.</DrawerDescription>
- *       <DrawerClose>Close</DrawerClose>
- *     </DrawerContent>
- *   </DrawerPortal>
+ * <Drawer open={open} onOpenChange={setOpen} placement="end" title="Navigation">
+ *   <NavLinks />
  * </Drawer>
  * ```
  */
-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, size, ...rest }: DrawerProps): React.JSX.Element;
 export declare namespace Drawer {
     var displayName: string;
 }

package/dist/drawer/Drawer.js

@@ -1 +1,2 @@
-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};
+'use client';
+import{DialogStateProvider as Z}from"../dialog/Dialog.js";import{recipeAxis as _}from"../utils/recipeAxis.js";import{DialogClose as K}from"../dialog/Dialog.js";import{DialogDescription as q}from"../dialog/Dialog.js";import{DialogOverlay as Q}from"../dialog/Dialog.js";import{DialogTitle as U}from"../dialog/Dialog.js";import{Glyph as V}from"../utils/Glyph.js";import{useDialogContext as S}from"../dialog/Dialog.js";import{appearanceAttrs as E}from"../utils/appearance.js";import{useComposedRefs as N}from"../utils/composeRefs.js";import{resolveDirection as I,resolvePhysicalSide as z,useDirection as J}from"../utils/direction.js";import{returnFocus as X}from"../utils/focus-targets.js";import{skdxPart as A}from"../utils/part.js";import{Primitive as k}from"../utils/primitive.js";import{useBodyScrollLock as F}from"../utils/useBodyScrollLock.js";import{useDismiss as L}from"../utils/useDismiss.js";import{useFocusTrap as M}from"../utils/useFocusTrap.js";import{useOutsideInert as W}from"../utils/useOutsideInert.js";import{jsx as B}from"react/jsx-runtime";var g=({forceMount:t,onEscapeKeyDown:r,onPointerDownOutside:o,onFocusOutside:n,onInteractOutside:s,onOpenAutoFocus:l,onCloseAutoFocus:a,initialFocus:c,finalFocus:p,size:D,ref:y,...m})=>{let e=S("DrawerContent"),{contentRef:u}=e,f=u,v=N(y,f),b=J(),x=e.dismiss==="any"||e.dismiss==="escape",P=e.dismiss==="any"||e.dismiss==="outside";return F(e.open&&e.modal),W(f,e.open&&e.modal),M(f,e.open&&e.modal,{onOpenAutoFocus:l,onCloseAutoFocus:a,initialFocus:c,finalFocus:p,family:"Drawer"}),L({enabled:e.open,onEscapeKeyDown:i=>{if(r?.(i),i.defaultPrevented||!x)return;let T=!!f.current?.contains(document.activeElement);e.onOpenChange(!1),!(e.modal||!T)&&X(p,"Drawer",e.triggerRef.current,a)},onInteractOutside:s,onPointerDownOutside:i=>{o?.(i),!i.defaultPrevented&&P&&e.onOpenChange(!1)},onFocusOutside:i=>{n?.(i),!i.defaultPrevented&&P&&e.onOpenChange(!1)}},[f,e.triggerRef]),t||e.open?B(k.div,{role:"dialog","aria-modal":e.open&&e.modal?"true":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":z(e.placement,I(null,b)),"data-dismiss":e.dismiss,...m,...E({size:D},m),...A("drawer","content",m.className),ref:v}):null};g.displayName="DrawerContent";import{OverlayPortal as G}from"../dialog/Dialog.js";import{jsx as H}from"react/jsx-runtime";var w=({forceMount:t,children:r,...o})=>H(G,{forceMount:t,...o,children:r});w.displayName="DrawerPortal";import{jsx as d,jsxs as R}from"react/jsx-runtime";var Y=()=>d(V,{name:"close"}),C=({size:t,title:r,description:o,footer:n,dismissible:s,children:l,passThrough:a})=>R(w,{children:[d(Q,{}),R(g,{...a,size:t,children:[r?d(U,{children:r}):null,o?d(q,{children:o}):null,l,n,s?d(K,{"aria-label":"Close",children:d(Y,{})}):null]})]});import{jsx as h}from"react/jsx-runtime";function O({children:t,open:r,defaultOpen:o,onOpenChange:n,onOpenChangeComplete:s,placement:l,modal:a=!0,dismiss:c="any",dismissible:p=!0}){return h(Z,{family:"drawer",open:r,defaultOpen:o,onOpenChange:n,onOpenChangeComplete:s,placement:l,modal:a,dismiss:p?c:"none",children:t})}O.displayName="DrawerRoot";function $({children:t,open:r,defaultOpen:o,onOpenChange:n,onOpenChangeComplete:s,placement:l,modal:a,dismiss:c,title:p,description:D,footer:y,dismissible:m=!0,size:e,...u}){return h(O,{open:r,defaultOpen:o,onOpenChange:n,onOpenChangeComplete:s,placement:l,modal:a,dismiss:c,dismissible:m,children:h(C,{size:_(e,u,"data-size"),title:p,description:D,footer:y,dismissible:m,passThrough:u,children:t})})}$.displayName="Drawer";export{$ as Drawer,g as DrawerContent,w as DrawerPortal,O as DrawerRoot};

package/dist/drawer/DrawerAnatomy.d.cts

@@ -0,0 +1,17 @@
+import type * as React from 'react';
+import type { PassThroughProps } from '../utils/passThrough.cjs';
+import type { DrawerContentProps } from './types.cjs';
+/**
+ * Default {@link Drawer} anatomy: portal, overlay, panel with derived title/description, body, footer, and close button.
+ *
+ * @internal
+ */
+export declare const DrawerAnatomy: ({ size, title, description, footer, dismissible, children, passThrough, }: {
+    size?: DrawerContentProps["size"] | undefined;
+    title?: string | undefined;
+    description?: string | undefined;
+    footer?: React.ReactNode | undefined;
+    dismissible: boolean;
+    children?: React.ReactNode | undefined;
+    passThrough?: PassThroughProps | undefined;
+}) => React.JSX.Element;

package/dist/drawer/DrawerAnatomy.d.ts

@@ -0,0 +1,17 @@
+import type * as React from 'react';
+import type { PassThroughProps } from '../utils/passThrough.js';
+import type { DrawerContentProps } from './types.js';
+/**
+ * Default {@link Drawer} anatomy: portal, overlay, panel with derived title/description, body, footer, and close button.
+ *
+ * @internal
+ */
+export declare const DrawerAnatomy: ({ size, title, description, footer, dismissible, children, passThrough, }: {
+    size?: DrawerContentProps["size"] | undefined;
+    title?: string | undefined;
+    description?: string | undefined;
+    footer?: React.ReactNode | undefined;
+    dismissible: boolean;
+    children?: React.ReactNode | undefined;
+    passThrough?: PassThroughProps | undefined;
+}) => React.JSX.Element;

package/dist/drawer/DrawerContent.d.cts

@@ -1,22 +1,7 @@
-import * as React from 'react';
+import type * 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, trapping focus and locking scroll under modal, positioned via `data-placement`.
  *
  * @example
  * ```tsx
@@ -29,4 +14,7 @@ import type { DrawerContentProps } from './types.cjs';
  * </DrawerPortal>
  * ```
  */
-export declare const DrawerContent: React.ForwardRefExoticComponent<Omit<DrawerContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DrawerContent: {
+    ({ forceMount, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, onOpenAutoFocus, onCloseAutoFocus, initialFocus, finalFocus, size, ref: forwardedRef, ...props }: DrawerContentProps): React.ReactNode;
+    displayName: string;
+};