@skdx/react 0.27.0 → 0.29.0

package/dist/drawer/DrawerContent.d.ts

@@ -1,22 +1,7 @@
-import * as React from 'react';
+import type * 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, trapping focus and locking scroll under modal, positioned via `data-placement`.
  *
  * @example
  * ```tsx
@@ -29,4 +14,7 @@ import type { DrawerContentProps } from './types.js';
  * </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;
+};

package/dist/drawer/DrawerPortal.d.cts

@@ -1,10 +1,7 @@
+import type { JSX } from 'react';
 import type { DrawerPortalProps } from './types.cjs';
 /**
- * Teleports `DrawerOverlay` and `DrawerContent` to `document.body` (or a
- * custom `container`), so the drawer escapes any clipping/`overflow`
- * ancestors — including one with a `transform`/`filter`/`contain`, which
- * `position: fixed` alone cannot escape. Mounts only while open unless
- * `forceMount` is set.
+ * Teleports `DrawerOverlay` and `DrawerContent` to `document.body` or `container`, mounting only while open unless `forceMount` is set.
  *
  * @example
  * ```tsx
@@ -18,6 +15,6 @@ import type { DrawerPortalProps } from './types.cjs';
  * ```
  */
 export declare const DrawerPortal: {
-    ({ forceMount, children, ...props }: DrawerPortalProps): import("react").JSX.Element | null;
+    ({ forceMount, children, ...props }: DrawerPortalProps): JSX.Element | null;
     displayName: string;
 };

package/dist/drawer/DrawerPortal.d.ts

@@ -1,10 +1,7 @@
+import type { JSX } from 'react';
 import type { DrawerPortalProps } from './types.js';
 /**
- * Teleports `DrawerOverlay` and `DrawerContent` to `document.body` (or a
- * custom `container`), so the drawer escapes any clipping/`overflow`
- * ancestors — including one with a `transform`/`filter`/`contain`, which
- * `position: fixed` alone cannot escape. Mounts only while open unless
- * `forceMount` is set.
+ * Teleports `DrawerOverlay` and `DrawerContent` to `document.body` or `container`, mounting only while open unless `forceMount` is set.
  *
  * @example
  * ```tsx
@@ -18,6 +15,6 @@ import type { DrawerPortalProps } from './types.js';
  * ```
  */
 export declare const DrawerPortal: {
-    ({ forceMount, children, ...props }: DrawerPortalProps): import("react").JSX.Element | null;
+    ({ forceMount, children, ...props }: DrawerPortalProps): JSX.Element | null;
     displayName: string;
 };

package/dist/drawer/index.d.cts

@@ -1,9 +1,2 @@
 export * from './Drawer.cjs';
-export { DrawerTrigger } from './DrawerTrigger.cjs';
-export { DrawerPortal } from './DrawerPortal.cjs';
-export { DrawerOverlay } from './DrawerOverlay.cjs';
-export { DrawerContent } from './DrawerContent.cjs';
-export { DrawerTitle } from './DrawerTitle.cjs';
-export { DrawerDescription } from './DrawerDescription.cjs';
-export { DrawerClose } from './DrawerClose.cjs';
-export type { DrawerPlacement, DrawerProps, DrawerTriggerProps, DrawerPortalProps, DrawerOverlayProps, DrawerContentProps, DrawerTitleProps, DrawerDescriptionProps, DrawerCloseProps, } from './types.cjs';
+export type { DrawerPlacement, DrawerDismiss, DrawerProps } from './types.cjs';

package/dist/drawer/index.d.ts

@@ -1,9 +1,2 @@
 export * from './Drawer.js';
-export { DrawerTrigger } from './DrawerTrigger.js';
-export { DrawerPortal } from './DrawerPortal.js';
-export { DrawerOverlay } from './DrawerOverlay.js';
-export { DrawerContent } from './DrawerContent.js';
-export { DrawerTitle } from './DrawerTitle.js';
-export { DrawerDescription } from './DrawerDescription.js';
-export { DrawerClose } from './DrawerClose.js';
-export type { DrawerPlacement, DrawerProps, DrawerTriggerProps, DrawerPortalProps, DrawerOverlayProps, DrawerContentProps, DrawerTitleProps, DrawerDescriptionProps, DrawerCloseProps, } from './types.js';
+export type { DrawerPlacement, DrawerDismiss, DrawerProps } from './types.js';

package/dist/drawer/primitives.d.cts

@@ -0,0 +1,30 @@
+/**
+ * Primitives for `Drawer` — manual composition escape hatch.
+ *
+ * @example
+ * ```tsx
+ * import { DrawerRoot, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription, DrawerClose } from '@skdx/react/primitives/drawer';
+ *
+ * <DrawerRoot placement="start">
+ *   <DrawerTrigger>Menu</DrawerTrigger>
+ *   <DrawerPortal>
+ *     <DrawerOverlay />
+ *     <DrawerContent>
+ *       <DrawerTitle>Navigation</DrawerTitle>
+ *       <DrawerDescription>Jump to a section.</DrawerDescription>
+ *       <DrawerClose>Close</DrawerClose>
+ *     </DrawerContent>
+ *   </DrawerPortal>
+ * </DrawerRoot>
+ * ```
+ */
+export { DrawerRoot } from './Drawer.cjs';
+export { DialogTrigger as DrawerTrigger } from '../dialog/DialogTrigger.cjs';
+export { DrawerPortal } from './DrawerPortal.cjs';
+export { DialogOverlay as DrawerOverlay } from '../dialog/DialogOverlay.cjs';
+export { DrawerContent } from './DrawerContent.cjs';
+export { DialogTitle as DrawerTitle } from '../dialog/DialogTitle.cjs';
+export { DialogDescription as DrawerDescription } from '../dialog/DialogDescription.cjs';
+export { DialogClose as DrawerClose } from '../dialog/DialogClose.cjs';
+export type { DrawerRootProps } from './Drawer.cjs';
+export type { DrawerPlacement, DrawerDismiss, DrawerTriggerProps, DrawerPortalProps, DrawerOverlayProps, DrawerContentProps, DrawerTitleProps, DrawerDescriptionProps, DrawerCloseProps, } from './types.cjs';

package/dist/drawer/primitives.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Primitives for `Drawer` — manual composition escape hatch.
+ *
+ * @example
+ * ```tsx
+ * import { DrawerRoot, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription, DrawerClose } from '@skdx/react/primitives/drawer';
+ *
+ * <DrawerRoot placement="start">
+ *   <DrawerTrigger>Menu</DrawerTrigger>
+ *   <DrawerPortal>
+ *     <DrawerOverlay />
+ *     <DrawerContent>
+ *       <DrawerTitle>Navigation</DrawerTitle>
+ *       <DrawerDescription>Jump to a section.</DrawerDescription>
+ *       <DrawerClose>Close</DrawerClose>
+ *     </DrawerContent>
+ *   </DrawerPortal>
+ * </DrawerRoot>
+ * ```
+ */
+export { DrawerRoot } from './Drawer.js';
+export { DialogTrigger as DrawerTrigger } from '../dialog/DialogTrigger.js';
+export { DrawerPortal } from './DrawerPortal.js';
+export { DialogOverlay as DrawerOverlay } from '../dialog/DialogOverlay.js';
+export { DrawerContent } from './DrawerContent.js';
+export { DialogTitle as DrawerTitle } from '../dialog/DialogTitle.js';
+export { DialogDescription as DrawerDescription } from '../dialog/DialogDescription.js';
+export { DialogClose as DrawerClose } from '../dialog/DialogClose.js';
+export type { DrawerRootProps } from './Drawer.js';
+export type { DrawerPlacement, DrawerDismiss, DrawerTriggerProps, DrawerPortalProps, DrawerOverlayProps, DrawerContentProps, DrawerTitleProps, DrawerDescriptionProps, DrawerCloseProps, } from './types.js';

package/dist/drawer/types.d.cts

@@ -1,74 +1,87 @@
 import type * as React from 'react';
+import type { AutoFocusEvent } from '../utils/dismissal.cjs';
+import type { PassThroughProps } from '../utils/passThrough.cjs';
 import type { PortalProps } from '../utils/portal.cjs';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
 import type { FocusOutsideEvent, InteractOutsideEvent } from '../utils/useDismiss.cjs';
-import type { AutoFocusEvent } from '../utils/useFocusTrap.cjs';
 /**
- * Which viewport edge the drawer is anchored to, expressed **logically**:
- * `start`/`end` follow the writing direction (start is the left edge under
- * `dir="ltr"` and the right edge under `dir="rtl"`), `top`/`bottom` are
- * physical. `bottom` is the bottom-sheet case.
+ * Viewport edge (logical: `start`/`end` mirror under `dir="rtl"`; `top`/`bottom` physical).
  */
 export type DrawerPlacement = 'start' | 'end' | 'top' | 'bottom';
-/** @internal Shared state distributed from {@link Drawer} to its parts via context. Not part of the public API. */
-export interface DrawerContextValue {
-    triggerRef: React.RefObject<HTMLButtonElement | null>;
-    contentRef: React.RefObject<HTMLDivElement | null>;
-    contentId: string;
-    titleId: string;
-    descriptionId: string;
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
-    placement: DrawerPlacement;
-    modal: boolean;
-}
-/** Props for the {@link Drawer} root. */
-export interface DrawerProps {
+/**
+ * Dismissal policy — `any` (Escape + outside), `escape`, `outside`, or `none`; events fire regardless, this only decides if an un-prevented one closes the drawer.
+ */
+export type DrawerDismiss = 'any' | 'escape' | 'outside' | 'none';
+/**
+ * Props for the {@link Drawer} root. Standard attributes ({@link
+ * PassThroughProps}) land on the derived `DrawerContent` panel.
+ */
+export interface DrawerProps extends PassThroughProps {
     /**
-     * The trigger and portal, typically — the drawer's own DOM (overlay,
-     * content, title, description) is rendered by {@link DrawerPortal} elsewhere.
-     * @default undefined — renders nothing if omitted.
+     * The trigger and portal, typically — the drawer's own DOM is rendered via {@link DrawerPortal}.
+     * @default undefined
      */
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
     /**
      * Whether the drawer is open, for controlled usage. Pair with `onOpenChange`.
      * @default undefined — uncontrolled, tracks its own open state internally.
      */
-    open?: boolean;
+    open?: boolean | undefined;
     /**
      * Whether the drawer is initially open, for uncontrolled usage.
      * @default false
      */
-    defaultOpen?: boolean;
+    defaultOpen?: boolean | undefined;
     /**
      * Fires with the new open state whenever the drawer 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 `DrawerContent`'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.
-     * @default undefined — no-op if omitted.
+     * Fires once the open/close animation settles, for work that must not race the transition.
+     * @default undefined
      */
-    onOpenChangeComplete?: (open: boolean) => void;
+    onOpenChangeComplete?: ((open: boolean) => void) | undefined;
     /**
-     * Which viewport edge the drawer slides in from, expressed logically so it
-     * mirrors under `dir="rtl"`. Surfaces verbatim as `data-placement` on
-     * `DrawerContent` — the component never resolves it to a physical side, so
-     * position the panel with logical CSS (`inset-inline-start`, …).
+     * Viewport edge, logical so it mirrors under `dir="rtl"`, surfaced as `data-placement`.
      * @default 'end'
      */
-    placement?: DrawerPlacement;
+    placement?: DrawerPlacement | undefined;
     /**
-     * Whether the drawer traps focus, locks body scroll, and blocks interaction
-     * with the rest of the page. `false` gives a non-modal drawer that leaves
-     * the page interactive but keeps Escape, outside-interaction dismissal, and
-     * its place in the overlay stack.
+     * Whether the drawer traps focus, locks scroll, and blocks page interaction; `false` leaves the page interactive.
      * @default true
      */
-    modal?: boolean;
+    modal?: boolean | undefined;
+    /**
+     * Dismissal policy — `'any'`, `'escape'`, `'outside'`, or `'none'` — reflected as `data-dismiss` on Content; the drawer dismisses on outside interaction whether modal or not, and this is the only way to disable it.
+     * @default 'any'
+     */
+    dismiss?: DrawerDismiss | undefined;
+    /**
+     * The derived panel's title, rendered as a `DrawerTitle`; only read when `children` is plain body content.
+     * @default undefined — no derived title.
+     */
+    title?: string | undefined;
+    /**
+     * The derived panel's description, rendered as a `DrawerDescription`; 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 close button.
+     * @default true
+     */
+    dismissible?: boolean | undefined;
+    /**
+     * Panel thickness rung the skin reads, fed to the derived `DrawerContent`.
+     * @default undefined — the skin's own default thickness.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
 }
 /** Props for {@link DrawerTrigger}, the button that opens the drawer. */
 export interface DrawerTriggerProps extends PrimitivePropsWithRef<'button'> {
@@ -76,62 +89,71 @@ export interface DrawerTriggerProps extends PrimitivePropsWithRef<'button'> {
 /** Props for {@link DrawerPortal}, which teleports its children to `document.body`. */
 export interface DrawerPortalProps extends PortalProps {
     /**
-     * Render the portal even while the drawer is closed, instead of unmounting
-     * it. Useful for animation libraries that need the outgoing content present
-     * in the DOM during an exit transition.
+     * Keep portal mounted while closed (useful for exit animation libraries).
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
 }
 /** Props for {@link DrawerOverlay}, the scrim rendered behind `DrawerContent`. */
 export interface DrawerOverlayProps extends PrimitivePropsWithRef<'div'> {
     /**
-     * Keep this overlay mounted even while the drawer is closed. Useful for
-     * animation libraries that need the outgoing overlay present in the DOM
-     * during an exit transition.
+     * Keep overlay mounted while closed (useful for exit animation libraries).
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
 }
 /** Props for {@link DrawerContent}, the drawer's sliding panel. */
 export interface DrawerContentProps extends PrimitivePropsWithRef<'div'> {
     /**
-     * Keep this panel mounted even while the drawer is closed. Useful for
-     * animation libraries that need the outgoing panel present in the DOM
-     * during an exit transition.
+     * Panel thickness rung the skin reads, mirrored to `data-size` on the panel.
+     * @default undefined — the skin's own default thickness.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
+    /**
+     * Keep panel mounted while closed (useful for exit animation libraries).
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
     /**
-     * Fires when Escape is pressed while the drawer is open, modal or not. Call `event.preventDefault()` to stop the drawer from closing.
-     * @default undefined — no-op if omitted.
+     * Fires on Escape, modal or non-modal; call `event.preventDefault()` to prevent close.
+     * @default undefined
      */
-    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;
     /**
-     * Fires on pointer-down outside the content. Call `event.preventDefault()` to stop the drawer from closing.
-     * @default undefined — no-op if omitted.
+     * Fires on pointer-down outside; call `event.preventDefault()` to prevent close.
+     * @default undefined
      */
-    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 drawer from closing. Receives a cancelable stand-in carrying the original `focusin` as its `detail`, since `focusin` itself cannot be canceled.
-     * @default undefined — no-op if omitted.
+     * Fires when focus moves outside, a cancelable stand-in for `focusin`; call `event.preventDefault()` to prevent close.
+     * @default undefined
      */
-    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.
-     * @default undefined — no-op if omitted.
+     * Fires for pointer-down or focus outside, before the specific handlers; one `preventDefault()` vetoes either.
+     * @default undefined
+     */
+    onInteractOutside?: ((event: InteractOutsideEvent) => void) | undefined;
+    /**
+     * Fires before focus enters on open, modal only; call `event.preventDefault()` to place focus yourself.
+     * @default focus moves to first tabbable element.
+     */
+    onOpenAutoFocus?: ((event: AutoFocusEvent) => void) | undefined;
+    /**
+     * Fires before focus returns on close — always for modal, only when the user had moved focus inside for non-modal; call `event.preventDefault()` to suppress the return.
+     * @default focus returns to pre-open focus or Trigger.
      */
-    onInteractOutside?: (event: InteractOutsideEvent) => void;
+    onCloseAutoFocus?: ((event: AutoFocusEvent) => 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 drawers only — a non-modal drawer never moves focus.
-     * @default undefined — focus moves to the first tabbable element.
+     * CSS selector for the element to focus on open, resolved inside the panel and applied only when `onOpenAutoFocus` isn't vetoed; falls back to the first tabbable element.
+     * @default first tabbable element.
      */
-    onOpenAutoFocus?: (event: AutoFocusEvent) => void;
+    initialFocus?: string | 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 drawers only.
-     * @default undefined — focus returns to the element focused before the drawer opened.
+     * CSS selector for the element to focus on close, resolved at document level and applied only when `onCloseAutoFocus` isn't vetoed; falls back to the pre-open focus.
+     * @default pre-open focus.
      */
-    onCloseAutoFocus?: (event: AutoFocusEvent) => void;
+    finalFocus?: string | undefined;
 }
 /** Props for {@link DrawerTitle}, the drawer's accessible name. */
 export interface DrawerTitleProps extends PrimitivePropsWithRef<'h2'> {

package/dist/drawer/types.d.ts

@@ -1,74 +1,87 @@
 import type * as React from 'react';
+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 viewport edge the drawer is anchored to, expressed **logically**:
- * `start`/`end` follow the writing direction (start is the left edge under
- * `dir="ltr"` and the right edge under `dir="rtl"`), `top`/`bottom` are
- * physical. `bottom` is the bottom-sheet case.
+ * Viewport edge (logical: `start`/`end` mirror under `dir="rtl"`; `top`/`bottom` physical).
  */
 export type DrawerPlacement = 'start' | 'end' | 'top' | 'bottom';
-/** @internal Shared state distributed from {@link Drawer} to its parts via context. Not part of the public API. */
-export interface DrawerContextValue {
-    triggerRef: React.RefObject<HTMLButtonElement | null>;
-    contentRef: React.RefObject<HTMLDivElement | null>;
-    contentId: string;
-    titleId: string;
-    descriptionId: string;
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
-    placement: DrawerPlacement;
-    modal: boolean;
-}
-/** Props for the {@link Drawer} root. */
-export interface DrawerProps {
+/**
+ * Dismissal policy — `any` (Escape + outside), `escape`, `outside`, or `none`; events fire regardless, this only decides if an un-prevented one closes the drawer.
+ */
+export type DrawerDismiss = 'any' | 'escape' | 'outside' | 'none';
+/**
+ * Props for the {@link Drawer} root. Standard attributes ({@link
+ * PassThroughProps}) land on the derived `DrawerContent` panel.
+ */
+export interface DrawerProps extends PassThroughProps {
     /**
-     * The trigger and portal, typically — the drawer's own DOM (overlay,
-     * content, title, description) is rendered by {@link DrawerPortal} elsewhere.
-     * @default undefined — renders nothing if omitted.
+     * The trigger and portal, typically — the drawer's own DOM is rendered via {@link DrawerPortal}.
+     * @default undefined
      */
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
     /**
      * Whether the drawer is open, for controlled usage. Pair with `onOpenChange`.
      * @default undefined — uncontrolled, tracks its own open state internally.
      */
-    open?: boolean;
+    open?: boolean | undefined;
     /**
      * Whether the drawer is initially open, for uncontrolled usage.
      * @default false
      */
-    defaultOpen?: boolean;
+    defaultOpen?: boolean | undefined;
     /**
      * Fires with the new open state whenever the drawer 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 `DrawerContent`'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.
-     * @default undefined — no-op if omitted.
+     * Fires once the open/close animation settles, for work that must not race the transition.
+     * @default undefined
      */
-    onOpenChangeComplete?: (open: boolean) => void;
+    onOpenChangeComplete?: ((open: boolean) => void) | undefined;
     /**
-     * Which viewport edge the drawer slides in from, expressed logically so it
-     * mirrors under `dir="rtl"`. Surfaces verbatim as `data-placement` on
-     * `DrawerContent` — the component never resolves it to a physical side, so
-     * position the panel with logical CSS (`inset-inline-start`, …).
+     * Viewport edge, logical so it mirrors under `dir="rtl"`, surfaced as `data-placement`.
      * @default 'end'
      */
-    placement?: DrawerPlacement;
+    placement?: DrawerPlacement | undefined;
     /**
-     * Whether the drawer traps focus, locks body scroll, and blocks interaction
-     * with the rest of the page. `false` gives a non-modal drawer that leaves
-     * the page interactive but keeps Escape, outside-interaction dismissal, and
-     * its place in the overlay stack.
+     * Whether the drawer traps focus, locks scroll, and blocks page interaction; `false` leaves the page interactive.
      * @default true
      */
-    modal?: boolean;
+    modal?: boolean | undefined;
+    /**
+     * Dismissal policy — `'any'`, `'escape'`, `'outside'`, or `'none'` — reflected as `data-dismiss` on Content; the drawer dismisses on outside interaction whether modal or not, and this is the only way to disable it.
+     * @default 'any'
+     */
+    dismiss?: DrawerDismiss | undefined;
+    /**
+     * The derived panel's title, rendered as a `DrawerTitle`; only read when `children` is plain body content.
+     * @default undefined — no derived title.
+     */
+    title?: string | undefined;
+    /**
+     * The derived panel's description, rendered as a `DrawerDescription`; 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 close button.
+     * @default true
+     */
+    dismissible?: boolean | undefined;
+    /**
+     * Panel thickness rung the skin reads, fed to the derived `DrawerContent`.
+     * @default undefined — the skin's own default thickness.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
 }
 /** Props for {@link DrawerTrigger}, the button that opens the drawer. */
 export interface DrawerTriggerProps extends PrimitivePropsWithRef<'button'> {
@@ -76,62 +89,71 @@ export interface DrawerTriggerProps extends PrimitivePropsWithRef<'button'> {
 /** Props for {@link DrawerPortal}, which teleports its children to `document.body`. */
 export interface DrawerPortalProps extends PortalProps {
     /**
-     * Render the portal even while the drawer is closed, instead of unmounting
-     * it. Useful for animation libraries that need the outgoing content present
-     * in the DOM during an exit transition.
+     * Keep portal mounted while closed (useful for exit animation libraries).
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
 }
 /** Props for {@link DrawerOverlay}, the scrim rendered behind `DrawerContent`. */
 export interface DrawerOverlayProps extends PrimitivePropsWithRef<'div'> {
     /**
-     * Keep this overlay mounted even while the drawer is closed. Useful for
-     * animation libraries that need the outgoing overlay present in the DOM
-     * during an exit transition.
+     * Keep overlay mounted while closed (useful for exit animation libraries).
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
 }
 /** Props for {@link DrawerContent}, the drawer's sliding panel. */
 export interface DrawerContentProps extends PrimitivePropsWithRef<'div'> {
     /**
-     * Keep this panel mounted even while the drawer is closed. Useful for
-     * animation libraries that need the outgoing panel present in the DOM
-     * during an exit transition.
+     * Panel thickness rung the skin reads, mirrored to `data-size` on the panel.
+     * @default undefined — the skin's own default thickness.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
+    /**
+     * Keep panel mounted while closed (useful for exit animation libraries).
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
     /**
-     * Fires when Escape is pressed while the drawer is open, modal or not. Call `event.preventDefault()` to stop the drawer from closing.
-     * @default undefined — no-op if omitted.
+     * Fires on Escape, modal or non-modal; call `event.preventDefault()` to prevent close.
+     * @default undefined
      */
-    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;
     /**
-     * Fires on pointer-down outside the content. Call `event.preventDefault()` to stop the drawer from closing.
-     * @default undefined — no-op if omitted.
+     * Fires on pointer-down outside; call `event.preventDefault()` to prevent close.
+     * @default undefined
      */
-    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 drawer from closing. Receives a cancelable stand-in carrying the original `focusin` as its `detail`, since `focusin` itself cannot be canceled.
-     * @default undefined — no-op if omitted.
+     * Fires when focus moves outside, a cancelable stand-in for `focusin`; call `event.preventDefault()` to prevent close.
+     * @default undefined
      */
-    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.
-     * @default undefined — no-op if omitted.
+     * Fires for pointer-down or focus outside, before the specific handlers; one `preventDefault()` vetoes either.
+     * @default undefined
+     */
+    onInteractOutside?: ((event: InteractOutsideEvent) => void) | undefined;
+    /**
+     * Fires before focus enters on open, modal only; call `event.preventDefault()` to place focus yourself.
+     * @default focus moves to first tabbable element.
+     */
+    onOpenAutoFocus?: ((event: AutoFocusEvent) => void) | undefined;
+    /**
+     * Fires before focus returns on close — always for modal, only when the user had moved focus inside for non-modal; call `event.preventDefault()` to suppress the return.
+     * @default focus returns to pre-open focus or Trigger.
      */
-    onInteractOutside?: (event: InteractOutsideEvent) => void;
+    onCloseAutoFocus?: ((event: AutoFocusEvent) => 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 drawers only — a non-modal drawer never moves focus.
-     * @default undefined — focus moves to the first tabbable element.
+     * CSS selector for the element to focus on open, resolved inside the panel and applied only when `onOpenAutoFocus` isn't vetoed; falls back to the first tabbable element.
+     * @default first tabbable element.
      */
-    onOpenAutoFocus?: (event: AutoFocusEvent) => void;
+    initialFocus?: string | 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 drawers only.
-     * @default undefined — focus returns to the element focused before the drawer opened.
+     * CSS selector for the element to focus on close, resolved at document level and applied only when `onCloseAutoFocus` isn't vetoed; falls back to the pre-open focus.
+     * @default pre-open focus.
      */
-    onCloseAutoFocus?: (event: AutoFocusEvent) => void;
+    finalFocus?: string | undefined;
 }
 /** Props for {@link DrawerTitle}, the drawer's accessible name. */
 export interface DrawerTitleProps extends PrimitivePropsWithRef<'h2'> {