`Splitter` is a resizable split view component that allows content areas to be resized by users.

Features:

- Horizontal and vertical splitting modes - Nested splitter panels for complex layouts - Min/max size constraints for panes - Snap-to-zero functionality for collapsible panels - Programmatic control with ref methods - Visibility toggle support - Dynamic pane management

Usage Guidelines:

- Use for layouts that need user-adjustable sections - Apply explicit height/width to the container - Utilize Splitter.Pane for more control over individual panes - Set appropriate minSize/maxSize constraints for better UX - Leverage the reset method for restoring default layouts

Accessibility:

- Keyboard navigable resize functionality - Maintains focus management across panes - Proper ARIA attributes for interactive elements - High-contrast visual indicators for splitter handles - Consistent behavior across input devices Basic: Demonstrates the default horizontal splitter with two equally sized panes.

This example shows the simplest implementation with direct child content. The splitter automatically divides the available space between the children.

Pane: Demonstrates using the Splitter.Pane component for explicit pane control.

Using Splitter.Pane offers more control over individual panes, allowing for:

- Setting min/max sizes - Configuring snap behavior - Controlling visibility - Setting priority for resizing

Nested: Shows how to create complex layouts with nested splitters.

This example demonstrates:

- Mixing horizontal and vertical splitters - Setting size constraints (minSize/maxSize) - Using snap behavior for collapsible panes - Creating multi-level layouts

This pattern is useful for complex application layouts like IDEs, dashboards, or content management systems.

Close: Demonstrates dynamic pane management with the ability to remove panes.

This example shows:

- Dynamic rendering of panes based on state - Implementation of close functionality - Proper key management for list rendering - Maintaining layout after pane removal

This pattern is useful for applications with tabbed interfaces or dashboards where components can be added or removed.

Visible: Demonstrates toggling pane visibility.

This example shows:

- Controlling pane visibility with state - Using the onVisibleChange callback - Integrating with button controls - Proper state synchronization

This pattern is useful for collapsible sidebars, panels, or details areas that can be shown or hidden.

Reset: Demonstrates programmatic control using the splitter ref.

This example shows:

- Using a ref to access splitter methods - Implementing a reset button to restore default layout - Proper typing with SplitterHandle - Imperative control of the component

This pattern is useful for providing users with a way to reset the layout after manual adjustments, or for programmatically controlling the splitter layout from parent components.