@equinor/fusion-react-styles/dist/make-styles.d.ts

style lib inspired by @material-ui/styles

import { type FusionTheme } from './theme';
import type { StyleRules } from './types';
import { type ClassNameMap } from './utils/sheet-manager';
export type { ClassNameMap };
/**
 * Options for configuring the makeStyles hook
 */
export interface MakeStylesOptions {
    /** Name prefix for generated class names (used for debugging) */
    name?: string;
    /** Default theme to use when no ThemeProvider is present */
    defaultTheme?: unknown;
}
/**
 * Creates a styles hook using JSS
 *
 * This function returns a hook that generates CSS class names from style definitions.
 * Styles can be static objects or functions that receive theme/props and return styles.
 *
 * @template Theme - The theme type (defaults to FusionTheme, but can be extended)
 * @template Props - The props type for dynamic styles
 * @template ClassKey - The class key type (auto-inferred from styles)
 *
 * @param stylesOrCreator - Either a static styles object or a function that receives theme and returns styles
 * @param options - Configuration options for the styles hook
 *
 * @returns A hook function that returns a Record<ClassKey, string>.
 *          The ClassKey type is inferred from the styles, ensuring type-safe access.
 *          If Props is empty, the hook accepts optional props.
 *          Otherwise, props are required.
 *
 * @example
 * ```tsx
 * const useStyles = makeStyles({
 *   root: { color: 'red' },
 *   button: { padding: '10px' }
 * }, { name: 'MyComponent' });
 *
 * function Component() {
 *   const classes = useStyles();
 *   return <div className={classes.root}>Hello</div>;
 * }
 * ```
 *
 * @example
 * ```tsx
 * const useStyles = makeStyles((theme) => ({
 *   root: {
 *     color: theme.colors.text.static_icons__default.getVariable('color'),
 *     padding: theme.spacing.comfortable.medium.getVariable('padding')
 *   }
 * }), { name: 'ThemedComponent' });
 *
 * function Component() {
 *   const classes = useStyles();
 *   return <div className={classes.root}>Hello</div>;
 * }
 * ```
 */
type ExtractClassKey<T> = T extends StyleRules<any, infer K> ? K : keyof T & string;
export declare function makeStyles<Theme extends FusionTheme, Props extends Record<string, unknown> = {}, SR extends Record<string, any> = Record<string, any>>(stylesOrCreator: (theme: Theme) => SR, options?: MakeStylesOptions): keyof Props extends never ? (props?: Props) => Record<ExtractClassKey<SR>, string> : (props: Props) => Record<ExtractClassKey<SR>, string>;
export declare function makeStyles<Theme extends FusionTheme = FusionTheme, Props extends Record<string, unknown> = {}, SR extends Record<string, any> = Record<string, any>>(stylesOrCreator: SR, options?: MakeStylesOptions): keyof Props extends never ? (props?: Props) => Record<ExtractClassKey<SR>, string> : (props: Props) => Record<ExtractClassKey<SR>, string>;
export default makeStyles;
//# sourceMappingURL=make-styles.d.ts.map