import { DetailedHTMLProps, FC, HTMLAttributes, PropsWithChildren } from "react";

//#region src/components/HeightResizer/index.d.ts
/**
 * Props for the HeightResizer component
 *
 * @interface HeightResizerProps
 */
type HeightResizerProps = {
  /**
   * Initial height in pixels for the resizable container
   * Sets the default size when the component first loads
   * @example 200
   */
  initialHeight: number;
  /**
   * Maximum height in pixels that the user can resize to (optional)
   * When undefined, no maximum limit is enforced
   * @example 500
   */
  maxHeight?: number;
  /**
   * Minimum height in pixels that the user can resize to (optional)
   * Prevents the container from being resized below this threshold
   * @default 0
   * @example 50
   */
  minHeight?: number;
} & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
/**
 * HeightResizer Component
 *
 * A resizable container component that allows users to dynamically adjust the height
 * by dragging a visual handle at the top. Provides smooth resizing with optional
 * minimum and maximum height constraints.
 *
 * ## Key Features
 * - **Interactive Resizing**: Drag handle to resize container vertically
 * - **Touch Support**: Full support for touch devices and mobile interactions
 * - **Height Constraints**: Optional minimum and maximum height limits
 * - **Visual Feedback**: Handle with hover and active states for clear interaction
 * - **Accessibility**: ARIA slider role with value announcements for screen readers
 * - **Smooth Animation**: CSS transitions for polished user experience
 *
 * ## Use Cases
 * - Code editors with resizable panels
 * - Chat interfaces with adjustable message areas
 * - Dashboard widgets with user-customizable sizes
 * - Documentation viewers with resizable content panes
 * - Settings panels with expandable sections
 *
 * ## Interaction Model
 * The component uses a drag interaction model where users click and drag the visual
 * handle (rounded bar) at the top of the container. The resize calculation is based
 * on the difference between the current cursor position and the container's top edge.
 *
 * ## Accessibility Features
 * - **ARIA Slider**: Proper slider role for assistive technologies
 * - **Value Announcements**: Current, min, and max values announced to screen readers
 * - **Keyboard Navigation**: Focusable with standard slider keyboard support
 * - **Visual Indicators**: Clear visual handle for drag interaction
 *
 * @component
 * @example
 * ```tsx
 * // Basic usage
 * <HeightResizer initialHeight={200}>
 *   <div>Your resizable content here</div>
 * </HeightResizer>
 *
 * // With height constraints
 * <HeightResizer
 *   initialHeight={300}
 *   minHeight={100}
 *   maxHeight={600}
 * >
 *   <div>Content with size limits</div>
 * </HeightResizer>
 *
 * // In a code editor context
 * <HeightResizer
 *   initialHeight={400}
 *   minHeight={150}
 *   className="border rounded-lg"
 * >
 *   <CodeEditor />
 * </HeightResizer>
 * ```
 *
 * @param props - HeightResizer component props
 * @param props.initialHeight - Starting height in pixels
 * @param props.minHeight - Optional minimum height constraint
 * @param props.maxHeight - Optional maximum height constraint
 * @param props.children - Content to display in the resizable container
 * @param props.className - Additional CSS classes for styling
 * @returns Interactive resizable container component
 */
declare const HeightResizer: FC<PropsWithChildren<HeightResizerProps>>;
//#endregion
export { HeightResizer };
//# sourceMappingURL=index.d.ts.map