/**
 * @module Wireframe
 * @description A brutalist wireframe component for building layouts with a sketchy, hand-drawn aesthetic. Perfect for prototyping and creating low-fidelity mockups with distinctive brutalist styling.
 */
import { HTMLAttributes } from 'react';
/**
 * Props for the Wireframe component
 */
export interface WireframeProps extends HTMLAttributes<HTMLDivElement> {
    /**
     * Visual variant of the wireframe
     * @default 'box'
     */
    variant?: 'box' | 'dashed' | 'dotted' | 'sketch';
    /**
     * The type of wireframe element
     * @default 'container'
     */
    type?: 'container' | 'text' | 'image' | 'button' | 'input' | 'header' | 'nav' | 'content';
    /**
     * Height of the wireframe element
     * @default 'auto'
     */
    height?: 'auto' | 'sm' | 'md' | 'lg' | 'full' | string;
    /**
     * Whether to show a label inside the wireframe
     * @default true
     */
    showLabel?: boolean;
    /**
     * Custom label text (defaults to the type)
     */
    label?: string;
    /**
     * Whether to add diagonal lines pattern
     * @default false
     */
    hatched?: boolean;
    /**
     * Whether the wireframe should have interactive hover effects
     * @default false
     */
    interactive?: boolean;
    /**
     * Padding size for the wireframe content
     * @default 'md'
     */
    padding?: 'none' | 'sm' | 'md' | 'lg';
    /**
     * Whether to make the wireframe scrollable
     * @default false
     */
    scrollable?: boolean;
    /**
     * Scroll direction when scrollable is true
     * @default 'vertical'
     */
    scrollDirection?: 'vertical' | 'horizontal' | 'both';
}
/**
 * Props for Wireframe.Group component
 */
export interface WireframeGroupProps extends HTMLAttributes<HTMLDivElement> {
    /**
     * Direction of the group layout
     * @default 'vertical'
     */
    direction?: 'horizontal' | 'vertical';
    /**
     * Gap between wireframe items
     * @default 'md'
     */
    gap?: 'sm' | 'md' | 'lg';
}
/**
 * A brutalist wireframe component for creating low-fidelity layouts and mockups.
 * Features hand-drawn aesthetics with various styles like sketchy borders, hatching patterns, and labels.
 *
 * @example
 * ```tsx
 * <Wireframe type="header" height="sm">
 *   <Wireframe.Group direction="horizontal">
 *     <Wireframe type="image" variant="sketch" />
 *     <Wireframe type="nav" variant="dashed" />
 *   </Wireframe.Group>
 * </Wireframe>
 * ```
 */
export declare const Wireframe: import("react").ForwardRefExoticComponent<WireframeProps & import("react").RefAttributes<HTMLDivElement>>;
export declare const WireframeWithGroup: import("react").ForwardRefExoticComponent<WireframeProps & import("react").RefAttributes<HTMLDivElement>> & {
    Group: import("react").ForwardRefExoticComponent<WireframeGroupProps & import("react").RefAttributes<HTMLDivElement>>;
};