@buun_group/brutalist-ui
Version:
A brutalist-styled component library
43 lines (42 loc) • 1.57 kB
TypeScript
/**
* Responsive and state-based utility system for Brutalist UI
*/
export declare const breakpoints: {
readonly sm: "640px";
readonly md: "768px";
readonly lg: "1024px";
readonly xl: "1280px";
readonly '2xl': "1536px";
};
export declare const stateModifiers: readonly ["hover", "focus", "active", "disabled", "focus-within", "focus-visible"];
export type Breakpoint = keyof typeof breakpoints;
export type StateModifier = typeof stateModifiers[number];
/**
* Parse a utility class with modifiers
* Examples:
* - "sm:px-4" -> { breakpoint: 'sm', utility: 'px-4' }
* - "hover:bg-gray-100" -> { state: 'hover', utility: 'bg-gray-100' }
* - "md:hover:text-blue" -> { breakpoint: 'md', state: 'hover', utility: 'text-blue' }
*/
export declare function parseModifiedUtility(className: string): {
breakpoint?: Breakpoint;
state?: StateModifier;
utility: string;
};
/**
* Generate CSS for responsive utilities
*/
export declare function generateResponsiveCSS(breakpoint: Breakpoint, selector: string, styles: React.CSSProperties): string;
/**
* Generate CSS for state-based utilities
*/
export declare function generateStateCSS(state: StateModifier, selector: string, styles: React.CSSProperties): string;
/**
* Group utilities by their modifiers for efficient CSS generation
*/
export declare function groupUtilitiesByModifiers(classNames: string[]): {
base: string[];
responsive: Map<Breakpoint, string[]>;
states: Map<StateModifier, string[]>;
responsiveStates: Map<`${Breakpoint}:${StateModifier}`, string[]>;
};