`Dialog` is a versatile overlay component for displaying modal or non-modal content.

Features:

- Modal and non-modal display modes - Draggable dialog window with customizable handle - Resizable width and height options - Customizable backdrop/overlay - Optional outside click dismissal - Header component with built-in close button - Structured content organization - Proper focus management

Usage Guidelines:

- Use for important information that requires user attention - Control visibility with `open` and `onOpenChange` props - Include a clear title in the Dialog.Header - Provide close/cancel actions for users - Consider using `outsidePress` for non-critical dialogs

Accessibility:

- Proper focus management when opened/closed - Keyboard navigation and dismissal - Screen reader announcements for modal state - ARIA attributes for semantic structure Basic: Demonstrates the standard Dialog component with header and content. This simple example shows the minimal required setup with controlled open state.

Draggable: Demonstrates a dialog that can be moved around the screen. Enable this feature with the `draggable` prop to allow repositioning. The dialog header acts as the drag handle by default.

InitialPosition: Demonstrates a dialog with preset initial positions. Use the `initialPosition` prop to set the dialog's starting position without manual x,y coordinates. Supports: left-top, center-top, right-top, left-center, center, right-center, left-bottom, center-bottom, right-bottom.

RememberPosition: Demonstrates a dialog that remembers its position when closed. Enable this feature with the `rememberPosition` prop to keep the dialog in the same position when closed.

CustomBackdrop: Demonstrates how to customize the backdrop component. Use Dialog.Backdrop to explicitly include and customize the backdrop element. This provides more control over the appearance and behavior of the overlay.

OutsidePress: Demonstrates a dialog that closes when clicking outside. Enable with the `outsidePress` prop to allow dismissal by clicking the backdrop. Use for less critical dialogs where quick dismissal is appropriate.

Resizable: Demonstrates a dialog that can be resized by the user. Enable with the `resizable` prop and specify which dimensions can be adjusted. When using resizable dialogs:

- Include scrollable content to handle overflow - Set appropriate min/max dimensions - Consider how content reflows when resized - Use the corner handle (bottom-right) to resize both width and height simultaneously - Cursor styles are maintained throughout the resize operation for better UX - Press ESC to cancel ongoing resize operations

RememberSize: Demonstrates a dialog that remembers its size when closed. Enable this feature with the `rememberSize` prop to keep the dialog in the same size when closed.

CornerResize: Demonstrates the corner resize handle for simultaneous width and height adjustment. The 16x16 corner handle appears in the bottom-right when both width and height resize are enabled. This provides an intuitive way to resize the dialog in both dimensions at once.

Features:

- Persistent cursor styles during resize operations (even when mouse leaves the handle) - Three different cursor styles for different resize modes - ESC key cancellation support - Automatic cleanup when window loses focus

Nested: Demonstrates how dialogs work with other overlay components. Shows proper stacking behavior with dropdowns, selects, and popovers. Dialog manages focus and keyboard interactions correctly with nested components.

FocusManagerProps: Demonstrates how to customize the focus manager props. Use the `focusManagerProps` prop to customize the focus manager props.

CloseOnEscape: Demonstrates the closeOnEscape prop functionality. By default, dialogs can be closed with the ESC key. This story shows two dialogs - one with ESC key enabled (default) and one with it disabled.

WithInput: Demonstrates a dialog containing input fields for user data entry. This example shows a typical form dialog pattern with text inputs and action buttons. The dialog automatically focuses the first input when opened for better UX.

Keyboard behavior:

- ESC in input field: Blur the input (does not close dialog) - ESC outside input field: Close the dialog

Implementation: Input handles ESC to blur and stops propagation. Dialog only receives ESC events when focus is not on an input.

AsForm: Demonstrates using the `as` prop to render the dialog container as a form element. This allows wrapping all dialog content in a native HTML form for better form semantics.

Benefits:

- Native form validation - Submit on Enter key in inputs - Form data can be collected via FormData API - Better accessibility with proper form semantics

Usage: Set `as="form"` and add `onSubmit` handler to the Dialog.

WithUseForm: Demonstrates integrating Dialog with the `useForm` hook for complex form handling. This example shows how to use the `as="form"` prop combined with `useForm` for:

- Field-level validation with real-time feedback - Form state management - Structured form submission - Reset form on dialog close

The `as="form"` prop allows the dialog to act as a native form element, enabling proper form semantics while `useForm` provides powerful validation and state management.