@buun_group/brutalist-ui
Version:
A brutalist-styled component library
73 lines (72 loc) • 2.06 kB
TypeScript
/**
* Hook for processing utility classes in Brutalist UI components
* Handles both inline styles and CSS module classes
*/
import type { CSSProperties } from 'react';
export interface UseUtilityClassesOptions {
/**
* The className prop from the component
*/
className?: string;
/**
* The style prop from the component
*/
style?: CSSProperties;
/**
* Whether to use CSS modules for utility classes
* @default false - uses inline styles
*/
useUtilityCSS?: boolean;
/**
* Base component classes (from CSS modules)
*/
componentClasses?: string | string[];
}
export interface UseUtilityClassesResult {
/**
* Combined className string (component classes + non-utility classes + utility CSS classes if enabled)
*/
className: string;
/**
* Combined style object (component styles + utility styles if not using CSS)
*/
style?: CSSProperties;
}
/**
* Hook that processes utility classes and merges them with component classes and styles
*
* @example
* ```tsx
* const { className, style } = useUtilityClasses({
* className: "mt-4 mb-2 custom-class",
* style: { color: 'red' },
* componentClasses: styles.button
* })
* ```
*/
export declare function useUtilityClasses(options: UseUtilityClassesOptions): UseUtilityClassesResult;
/**
* Alternative hook that always uses inline styles (simpler API)
*
* @example
* ```tsx
* const { className, style } = useUtilityStyles(
* "mt-4 mb-2 custom-class",
* { color: 'red' },
* styles.button
* )
* ```
*/
export declare function useUtilityStyles(className?: string, style?: CSSProperties, componentClasses?: string | string[]): UseUtilityClassesResult;
/**
* Alternative hook that always uses CSS module classes
*
* @example
* ```tsx
* const { className } = useUtilityCSSClasses(
* "mt-4 mb-2 custom-class",
* styles.button
* )
* ```
*/
export declare function useUtilityCSSClasses(className?: string, componentClasses?: string | string[]): UseUtilityClassesResult;