@buun_group/brutalist-ui
Version:
A brutalist-styled component library
66 lines (65 loc) • 1.51 kB
TypeScript
/**
* @module HalftonePattern
* @description A halftone dot pattern background component inspired by comic book and print media
*/
import React, { SVGProps } from 'react';
/**
* Props for the HalftonePattern component
*/
export interface HalftonePatternProps extends SVGProps<SVGSVGElement> {
/**
* The spacing between dots
* @default 20
*/
dotSpacing?: number;
/**
* The maximum radius of dots
* @default 8
*/
maxRadius?: number;
/**
* The minimum radius of dots
* @default 1
*/
minRadius?: number;
/**
* The pattern type
* @default 'radial'
*/
variant?: 'radial' | 'linear' | 'noise' | 'wave';
/**
* The color scheme
* @default 'black'
*/
color?: 'black' | 'white' | 'red' | 'blue' | 'yellow' | 'cyan';
/**
* Whether to animate the pattern
* @default false
*/
animated?: boolean;
/**
* The angle for linear gradient (in degrees)
* @default 45
*/
angle?: number;
/**
* Additional className
*/
className?: string;
}
/**
* HalftonePattern component for creating comic book style halftone backgrounds
*
* @example
* ```tsx
* <HalftonePattern
* dotSpacing={15}
* maxRadius={6}
* variant="wave"
* color="cyan"
* animated
* />
* ```
*/
export declare const HalftonePattern: React.ForwardRefExoticComponent<Omit<HalftonePatternProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
export default HalftonePattern;