@buun_group/brutalist-ui
Version:
A brutalist-styled component library
93 lines (92 loc) • 2.88 kB
TypeScript
/**
* @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>>;
};