@skdx/react 0.26.0

package/dist/drawer/DrawerClose.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { DrawerCloseProps } from './types.js';
+/**
+ * Button that closes the drawer when clicked. Renders inside `DrawerContent`
+ * anywhere you like (e.g. the panel's header "×").
+ *
+ * @example
+ * ```tsx
+ * <DrawerContent>
+ *   <DrawerTitle>Navigation</DrawerTitle>
+ *   <DrawerClose>Close</DrawerClose>
+ * </DrawerContent>
+ * ```
+ */
+export declare const DrawerClose: React.ForwardRefExoticComponent<Omit<DrawerCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/drawer/DrawerContent.d.cts

@@ -0,0 +1,32 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <DrawerPortal>
+ *   <DrawerOverlay />
+ *   <DrawerContent onEscapeKeyDown={(e) => console.log('escape')}>
+ *     <DrawerTitle>Navigation</DrawerTitle>
+ *     <DrawerClose>Close</DrawerClose>
+ *   </DrawerContent>
+ * </DrawerPortal>
+ * ```
+ */
+export declare const DrawerContent: React.ForwardRefExoticComponent<Omit<DrawerContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/drawer/DrawerContent.d.ts

@@ -0,0 +1,32 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <DrawerPortal>
+ *   <DrawerOverlay />
+ *   <DrawerContent onEscapeKeyDown={(e) => console.log('escape')}>
+ *     <DrawerTitle>Navigation</DrawerTitle>
+ *     <DrawerClose>Close</DrawerClose>
+ *   </DrawerContent>
+ * </DrawerPortal>
+ * ```
+ */
+export declare const DrawerContent: React.ForwardRefExoticComponent<Omit<DrawerContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/drawer/DrawerDescription.d.cts

@@ -0,0 +1,15 @@
+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`.
+ *
+ * @example
+ * ```tsx
+ * <DrawerContent>
+ *   <DrawerTitle>Navigation</DrawerTitle>
+ *   <DrawerDescription>Jump to a section.</DrawerDescription>
+ * </DrawerContent>
+ * ```
+ */
+export declare const DrawerDescription: React.ForwardRefExoticComponent<Omit<DrawerDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;

package/dist/drawer/DrawerDescription.d.ts

@@ -0,0 +1,15 @@
+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`.
+ *
+ * @example
+ * ```tsx
+ * <DrawerContent>
+ *   <DrawerTitle>Navigation</DrawerTitle>
+ *   <DrawerDescription>Jump to a section.</DrawerDescription>
+ * </DrawerContent>
+ * ```
+ */
+export declare const DrawerDescription: React.ForwardRefExoticComponent<Omit<DrawerDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;

package/dist/drawer/DrawerOverlay.d.cts

@@ -0,0 +1,21 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <DrawerPortal>
+ *   <DrawerOverlay className="overlay" />
+ *   <DrawerContent>…</DrawerContent>
+ * </DrawerPortal>
+ * ```
+ */
+export declare const DrawerOverlay: React.ForwardRefExoticComponent<Omit<DrawerOverlayProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/drawer/DrawerOverlay.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { DrawerOverlayProps } from './types.js';
+/**
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <DrawerPortal>
+ *   <DrawerOverlay className="overlay" />
+ *   <DrawerContent>…</DrawerContent>
+ * </DrawerPortal>
+ * ```
+ */
+export declare const DrawerOverlay: React.ForwardRefExoticComponent<Omit<DrawerOverlayProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/drawer/DrawerPortal.d.cts

@@ -0,0 +1,23 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <Drawer>
+ *   <DrawerTrigger>Menu</DrawerTrigger>
+ *   <DrawerPortal>
+ *     <DrawerOverlay />
+ *     <DrawerContent>…</DrawerContent>
+ *   </DrawerPortal>
+ * </Drawer>
+ * ```
+ */
+export declare const DrawerPortal: {
+    ({ forceMount, children, ...props }: DrawerPortalProps): import("react").JSX.Element | null;
+    displayName: string;
+};

package/dist/drawer/DrawerPortal.d.ts

@@ -0,0 +1,23 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <Drawer>
+ *   <DrawerTrigger>Menu</DrawerTrigger>
+ *   <DrawerPortal>
+ *     <DrawerOverlay />
+ *     <DrawerContent>…</DrawerContent>
+ *   </DrawerPortal>
+ * </Drawer>
+ * ```
+ */
+export declare const DrawerPortal: {
+    ({ forceMount, children, ...props }: DrawerPortalProps): import("react").JSX.Element | null;
+    displayName: string;
+};

package/dist/drawer/DrawerTitle.d.cts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { DrawerTitleProps } from './types.cjs';
+/**
+ * The drawer's accessible name: renders an `<h2>` wired to `DrawerContent`
+ * via `aria-labelledby`. Every drawer should include one.
+ *
+ * @example
+ * ```tsx
+ * <DrawerContent>
+ *   <DrawerTitle>Navigation</DrawerTitle>
+ * </DrawerContent>
+ * ```
+ */
+export declare const DrawerTitle: React.ForwardRefExoticComponent<Omit<DrawerTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;

package/dist/drawer/DrawerTitle.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { DrawerTitleProps } from './types.js';
+/**
+ * The drawer's accessible name: renders an `<h2>` wired to `DrawerContent`
+ * via `aria-labelledby`. Every drawer should include one.
+ *
+ * @example
+ * ```tsx
+ * <DrawerContent>
+ *   <DrawerTitle>Navigation</DrawerTitle>
+ * </DrawerContent>
+ * ```
+ */
+export declare const DrawerTitle: React.ForwardRefExoticComponent<Omit<DrawerTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;

package/dist/drawer/DrawerTrigger.d.cts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { DrawerTriggerProps } from './types.cjs';
+/**
+ * Button that opens the drawer when clicked. Sets `aria-haspopup="dialog"`,
+ * `aria-expanded`, `aria-controls`, and `data-state` (`open`/`closed`).
+ *
+ * @example
+ * ```tsx
+ * <Drawer>
+ *   <DrawerTrigger>Menu</DrawerTrigger>
+ *   <DrawerPortal>
+ *     <DrawerContent>…</DrawerContent>
+ *   </DrawerPortal>
+ * </Drawer>
+ * ```
+ */
+export declare const DrawerTrigger: React.ForwardRefExoticComponent<Omit<DrawerTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/drawer/DrawerTrigger.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { DrawerTriggerProps } from './types.js';
+/**
+ * Button that opens the drawer when clicked. Sets `aria-haspopup="dialog"`,
+ * `aria-expanded`, `aria-controls`, and `data-state` (`open`/`closed`).
+ *
+ * @example
+ * ```tsx
+ * <Drawer>
+ *   <DrawerTrigger>Menu</DrawerTrigger>
+ *   <DrawerPortal>
+ *     <DrawerContent>…</DrawerContent>
+ *   </DrawerPortal>
+ * </Drawer>
+ * ```
+ */
+export declare const DrawerTrigger: React.ForwardRefExoticComponent<Omit<DrawerTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/drawer/index.d.cts

@@ -0,0 +1,9 @@
+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';

package/dist/drawer/index.d.ts

@@ -0,0 +1,9 @@
+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';

package/dist/drawer/types.d.cts

@@ -0,0 +1,144 @@
+import type * as React from 'react';
+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.
+ */
+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 {
+    /**
+     * 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.
+     */
+    children?: React.ReactNode;
+    /**
+     * Whether the drawer is open, for controlled usage. Pair with `onOpenChange`.
+     * @default undefined — uncontrolled, tracks its own open state internally.
+     */
+    open?: boolean;
+    /**
+     * Whether the drawer is initially open, for uncontrolled usage.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * 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;
+    /**
+     * 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.
+     */
+    onOpenChangeComplete?: (open: boolean) => void;
+    /**
+     * 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`, …).
+     * @default 'end'
+     */
+    placement?: DrawerPlacement;
+    /**
+     * 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.
+     * @default true
+     */
+    modal?: boolean;
+}
+/** Props for {@link DrawerTrigger}, the button that opens the drawer. */
+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.
+     * @default false
+     */
+    forceMount?: boolean;
+}
+/** 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.
+     * @default false
+     */
+    forceMount?: boolean;
+}
+/** 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.
+     * @default false
+     */
+    forceMount?: boolean;
+    /**
+     * 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.
+     */
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    /**
+     * Fires on pointer-down outside the content. Call `event.preventDefault()` to stop the drawer from closing.
+     * @default undefined — no-op if omitted.
+     */
+    onPointerDownOutside?: (event: PointerEvent) => void;
+    /**
+     * 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.
+     */
+    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.
+     * @default undefined — no-op if omitted.
+     */
+    onInteractOutside?: (event: InteractOutsideEvent) => void;
+    /**
+     * 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.
+     */
+    onOpenAutoFocus?: (event: AutoFocusEvent) => void;
+    /**
+     * 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.
+     */
+    onCloseAutoFocus?: (event: AutoFocusEvent) => void;
+}
+/** Props for {@link DrawerTitle}, the drawer's accessible name. */
+export interface DrawerTitleProps extends PrimitivePropsWithRef<'h2'> {
+}
+/** Props for {@link DrawerDescription}, the drawer's accessible description. */
+export interface DrawerDescriptionProps extends PrimitivePropsWithRef<'p'> {
+}
+/** Props for {@link DrawerClose}, a button that closes the drawer. */
+export interface DrawerCloseProps extends PrimitivePropsWithRef<'button'> {
+}

package/dist/drawer/types.d.ts

@@ -0,0 +1,144 @@
+import type * as React from 'react';
+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.
+ */
+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 {
+    /**
+     * 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.
+     */
+    children?: React.ReactNode;
+    /**
+     * Whether the drawer is open, for controlled usage. Pair with `onOpenChange`.
+     * @default undefined — uncontrolled, tracks its own open state internally.
+     */
+    open?: boolean;
+    /**
+     * Whether the drawer is initially open, for uncontrolled usage.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * 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;
+    /**
+     * 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.
+     */
+    onOpenChangeComplete?: (open: boolean) => void;
+    /**
+     * 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`, …).
+     * @default 'end'
+     */
+    placement?: DrawerPlacement;
+    /**
+     * 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.
+     * @default true
+     */
+    modal?: boolean;
+}
+/** Props for {@link DrawerTrigger}, the button that opens the drawer. */
+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.
+     * @default false
+     */
+    forceMount?: boolean;
+}
+/** 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.
+     * @default false
+     */
+    forceMount?: boolean;
+}
+/** 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.
+     * @default false
+     */
+    forceMount?: boolean;
+    /**
+     * 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.
+     */
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    /**
+     * Fires on pointer-down outside the content. Call `event.preventDefault()` to stop the drawer from closing.
+     * @default undefined — no-op if omitted.
+     */
+    onPointerDownOutside?: (event: PointerEvent) => void;
+    /**
+     * 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.
+     */
+    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.
+     * @default undefined — no-op if omitted.
+     */
+    onInteractOutside?: (event: InteractOutsideEvent) => void;
+    /**
+     * 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.
+     */
+    onOpenAutoFocus?: (event: AutoFocusEvent) => void;
+    /**
+     * 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.
+     */
+    onCloseAutoFocus?: (event: AutoFocusEvent) => void;
+}
+/** Props for {@link DrawerTitle}, the drawer's accessible name. */
+export interface DrawerTitleProps extends PrimitivePropsWithRef<'h2'> {
+}
+/** Props for {@link DrawerDescription}, the drawer's accessible description. */
+export interface DrawerDescriptionProps extends PrimitivePropsWithRef<'p'> {
+}
+/** Props for {@link DrawerClose}, a button that closes the drawer. */
+export interface DrawerCloseProps extends PrimitivePropsWithRef<'button'> {
+}

package/dist/dropdown-menu/DropdownMenu.cjs

@@ -0,0 +1 @@
+"use strict";var $o=Object.create;var P=Object.defineProperty;var Jo=Object.getOwnPropertyDescriptor;var Qo=Object.getOwnPropertyNames;var Xo=Object.getPrototypeOf,Yo=Object.prototype.hasOwnProperty;var Zo=(o,e)=>{for(var r in e)P(o,r,{get:e[r],enumerable:!0})},_=(o,e,r,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of Qo(e))!Yo.call(o,t)&&t!==r&&P(o,t,{get:()=>e[t],enumerable:!(n=Jo(e,t))||n.enumerable});return o};var d=(o,e,r)=>(r=o!=null?$o(Xo(o)):{},_(e||!o||!o.__esModule?P(r,"default",{value:o,enumerable:!0}):r,o)),jo=o=>_(P({},"__esModule",{value:!0}),o);var ee={};Zo(ee,{DropdownMenu:()=>J,DropdownMenuArrow:()=>Q,DropdownMenuCheckboxItem:()=>N,DropdownMenuContent:()=>T,DropdownMenuGroup:()=>K,DropdownMenuItem:()=>k,DropdownMenuItemIndicator:()=>A,DropdownMenuLabel:()=>V,DropdownMenuPortal:()=>S,DropdownMenuProvider:()=>$,DropdownMenuRadioGroup:()=>G,DropdownMenuRadioItem:()=>O,DropdownMenuSeparator:()=>B,DropdownMenuSub:()=>F,DropdownMenuSubContent:()=>_o,DropdownMenuSubTrigger:()=>Fo,DropdownMenuTrigger:()=>h,ITEM_SELECTOR:()=>C,useDropdownMenuContext:()=>u});module.exports=jo(ee);var f=d(require("react"),1),U=require("../utils/createContext.cjs"),q=require("../utils/part.cjs"),x=require("../utils/popper.cjs"),W=require("../utils/useControllableState.cjs"),z=require("../utils/useOpenChangeComplete.cjs"),R=require("react/jsx-runtime"),C='[role^="menuitem"]:not([data-disabled])',[$,u]=(0,U.createSafeContext)("DropdownMenu");function J({children:o,open:e,defaultOpen:r=!1,onOpenChange:n,onOpenChangeComplete:t}){let s=f.useRef(null),m=f.useRef(null),[i=!1,w]=(0,W.useControllableState)({prop:e,defaultProp:r,onChange:n});return(0,z.useOpenChangeComplete)(i,m,t),(0,R.jsx)(x.PopperRoot,{children:(0,R.jsx)($,{triggerRef:s,contentRef:m,contentId:f.useId(),open:i,onOpenChange:w,children:o})})}J.displayName="DropdownMenu";var Q=f.forwardRef((o,e)=>(0,R.jsx)(x.PopperArrow,{...o,...(0,q.skdxPart)("dropdown-menu","arrow",o.className),ref:e}));Q.displayName="DropdownMenuArrow";var X=d(require("react"),1),Y=require("../utils/composeRefs.cjs"),Z=require("../utils/part.cjs"),j=require("../utils/popper.cjs"),M=require("../utils/primitive.cjs");var b=require("react/jsx-runtime"),h=X.forwardRef((o,e)=>{let r=u("DropdownMenuTrigger"),n=(0,Y.useComposedRefs)(e,r.triggerRef);return(0,b.jsx)(j.PopperAnchor,{asChild:!0,children:(0,b.jsx)(M.Primitive.button,{type:"button","aria-haspopup":"menu","aria-expanded":r.open,"aria-controls":r.contentId,"data-state":r.open?"open":"closed","data-disabled":o.disabled?"":void 0,...o,...(0,Z.skdxPart)("dropdown-menu","trigger",o.className),ref:n,onClick:(0,M.composeEventHandlers)(o.onClick,()=>{o.disabled||r.onOpenChange(!r.open)}),onKeyDown:(0,M.composeEventHandlers)(o.onKeyDown,t=>{o.disabled||["ArrowDown","ArrowUp"].includes(t.key)&&(t.preventDefault(),r.onOpenChange(!0))})})})});h.displayName="DropdownMenuTrigger";var oo=require("../utils/portal.cjs");var eo=require("react/jsx-runtime"),S=({forceMount:o,children:e,...r})=>{let n=u("DropdownMenuPortal");return o||n.open?(0,eo.jsx)(oo.Portal,{...r,children:e}):null};S.displayName="DropdownMenuPortal";var I=d(require("react"),1),ro=require("../utils/composeRefs.cjs"),no=require("../utils/menuSub.cjs"),to=require("../utils/part.cjs"),po=require("../utils/popper.cjs"),ao=require("../utils/primitive.cjs"),mo=require("../utils/useDismiss.cjs"),io=require("../utils/useRovingFocus.cjs");var uo=require("react/jsx-runtime"),T=I.forwardRef(({forceMount:o,loop:e=!0,onEscapeKeyDown:r,onPointerDownOutside:n,onFocusOutside:t,onInteractOutside:s,side:m="bottom",align:i="start",sideOffset:w=4,...v},qo)=>{let p=u("DropdownMenuContent"),Wo=(0,ro.useComposedRefs)(qo,p.contentRef),zo=(0,io.useRovingFocus)({orientation:"vertical",loop:e,itemSelector:C,typeahead:!0});return(0,mo.useDismiss)({enabled:p.open,insideSelector:`[${no.MENU_BRANCH_ATTRIBUTE}]`,onEscapeKeyDown:a=>{r?.(a),a.defaultPrevented||(p.onOpenChange(!1),p.triggerRef.current?.focus())},onInteractOutside:s,onPointerDownOutside:a=>{n?.(a),a.defaultPrevented||p.onOpenChange(!1)},onFocusOutside:a=>{t?.(a),a.defaultPrevented||p.onOpenChange(!1)}},[p.contentRef,p.triggerRef]),I.useEffect(()=>{if(!p.open)return;let a=requestAnimationFrame(()=>{(p.contentRef.current?.querySelector(C)??p.contentRef.current)?.focus()});return()=>cancelAnimationFrame(a)},[p.open,p.contentRef]),o||p.open?(0,uo.jsx)(po.PopperContent,{component:"dropdown-menu",role:"menu","aria-orientation":"vertical",id:p.contentId,"data-state":p.open?"open":"closed",tabIndex:-1,side:m,align:i,sideOffset:w,...v,...(0,to.skdxPart)("dropdown-menu","content",v.className),ref:Wo,onKeyDown:(0,ao.composeEventHandlers)(v.onKeyDown,a=>{zo(a),a.key==="Tab"&&(a.preventDefault(),p.onOpenChange(!1),p.triggerRef.current?.focus())})}):null});T.displayName="DropdownMenuContent";var g=d(require("react"),1),so=require("../utils/part.cjs"),fo=require("../utils/primitive.cjs"),co=require("../utils/useMenuItem.cjs");var lo=require("react/jsx-runtime"),c=g.createContext(!1);function D({disabled:o,onSelect:e,props:r}){let n=u("DropdownMenuItem");return(0,co.useMenuItem)({disabled:o,onSelect:e,onSelected:()=>{n.onOpenChange(!1),n.triggerRef.current?.focus()},contentRef:n.contentRef,props:r})}var k=g.forwardRef(({disabled:o,onSelect:e,...r},n)=>{let t=D({disabled:o,onSelect:e,props:r});return(0,lo.jsx)(fo.Primitive.div,{role:"menuitem",...r,...t,...(0,so.skdxPart)("dropdown-menu","item",r.className),ref:n})});k.displayName="DropdownMenuItem";var wo=d(require("react"),1),Mo=require("../utils/part.cjs"),Do=require("../utils/primitive.cjs");var E=require("react/jsx-runtime"),N=wo.forwardRef(({checked:o=!1,onCheckedChange:e,disabled:r,onSelect:n,...t},s)=>{let m=D({disabled:r,onSelect:i=>{e?.(!o),n?.(i),i.preventDefault()},props:t});return(0,E.jsx)(c.Provider,{value:o,children:(0,E.jsx)(Do.Primitive.div,{role:"menuitemcheckbox","aria-checked":o,"data-state":o?"checked":"unchecked",...t,...m,...(0,Mo.skdxPart)("dropdown-menu","checkbox-item",t.className),ref:s})})});N.displayName="DropdownMenuCheckboxItem";var Po=d(require("react"),1),Ro=require("../utils/createContext.cjs"),xo=require("../utils/part.cjs"),Co=require("../utils/primitive.cjs"),L=require("react/jsx-runtime"),[oe,Io]=(0,Ro.createSafeContext)("DropdownMenuRadioGroup"),G=Po.forwardRef(({value:o,onValueChange:e,...r},n)=>(0,L.jsx)(oe,{value:o,onValueChange:e,children:(0,L.jsx)(Co.Primitive.div,{role:"group",...r,...(0,xo.skdxPart)("dropdown-menu","radio-group",r.className),ref:n})}));G.displayName="DropdownMenuRadioGroup";var go=d(require("react"),1),yo=require("../utils/part.cjs"),vo=require("../utils/primitive.cjs");var H=require("react/jsx-runtime"),O=go.forwardRef(({value:o,disabled:e,onSelect:r,...n},t)=>{let s=Io("DropdownMenuRadioItem"),m=s.value===o,i=D({disabled:e,onSelect:w=>{s.onValueChange?.(o),r?.(w)},props:n});return(0,H.jsx)(c.Provider,{value:m,children:(0,H.jsx)(vo.Primitive.div,{role:"menuitemradio","aria-checked":m,"data-state":m?"checked":"unchecked",...n,...i,...(0,yo.skdxPart)("dropdown-menu","radio-item",n.className),ref:t})})});O.displayName="DropdownMenuRadioItem";var y=d(require("react"),1),bo=require("../utils/part.cjs"),ho=require("../utils/primitive.cjs");var So=require("react/jsx-runtime"),A=y.forwardRef(({forceMount:o,...e},r)=>{let n=y.useContext(c);return o||n?(0,So.jsx)(ho.Primitive.span,{"data-state":n?"checked":"unchecked",...e,...(0,bo.skdxPart)("dropdown-menu","item-indicator",e.className),ref:r}):null});A.displayName="DropdownMenuItemIndicator";var To=d(require("react"),1),ko=require("../utils/part.cjs"),Eo=require("../utils/primitive.cjs"),No=require("react/jsx-runtime"),K=To.forwardRef((o,e)=>(0,No.jsx)(Eo.Primitive.div,{role:"group",...o,...(0,ko.skdxPart)("dropdown-menu","group",o.className),ref:e}));K.displayName="DropdownMenuGroup";var Lo=d(require("react"),1),Go=require("../utils/part.cjs"),Ho=require("../utils/primitive.cjs"),Oo=require("react/jsx-runtime"),V=Lo.forwardRef((o,e)=>(0,Oo.jsx)(Ho.Primitive.div,{...o,...(0,Go.skdxPart)("dropdown-menu","label",o.className),ref:e}));V.displayName="DropdownMenuLabel";var Ao=d(require("react"),1),Ko=require("../utils/part.cjs"),Vo=require("../utils/primitive.cjs"),Bo=require("react/jsx-runtime"),B=Ao.forwardRef((o,e)=>(0,Bo.jsx)(Vo.Primitive.div,{role:"separator","aria-orientation":"horizontal",...o,...(0,Ko.skdxPart)("dropdown-menu","separator",o.className),ref:e}));B.displayName="DropdownMenuSeparator";var l=require("../utils/menuSub.cjs"),Uo=require("react/jsx-runtime");function F(o){return(0,Uo.jsx)(l.MenuSub,{family:"dropdown-menu",...o})}F.displayName="DropdownMenuSub";var Fo=l.MenuSubTrigger,_o=l.MenuSubContent;0&&(module.exports={DropdownMenu,DropdownMenuArrow,DropdownMenuCheckboxItem,DropdownMenuContent,DropdownMenuGroup,DropdownMenuItem,DropdownMenuItemIndicator,DropdownMenuLabel,DropdownMenuPortal,DropdownMenuProvider,DropdownMenuRadioGroup,DropdownMenuRadioItem,DropdownMenuSeparator,DropdownMenuSub,DropdownMenuSubContent,DropdownMenuSubTrigger,DropdownMenuTrigger,ITEM_SELECTOR,useDropdownMenuContext});