@mantine/core/esm/core/styles-api/use-styles/use-styles.mjs

React components library focused on usability, accessibility and developer experience

"use client";
import { resolveClassNames } from "./get-class-name/resolve-class-names/resolve-class-names.mjs";
import { resolveStyles } from "./get-style/resolve-styles/resolve-styles.mjs";
import { useMantineClassNamesPrefix, useMantineIsHeadless, useMantineWithStaticClasses } from "../../MantineProvider/Mantine.context.mjs";
import { useMantineTheme } from "../../MantineProvider/MantineThemeProvider/MantineThemeProvider.mjs";
import { getClassName } from "./get-class-name/get-class-name.mjs";
import { resolveStyle } from "./get-style/resolve-style/resolve-style.mjs";
import { getStyle } from "./get-style/get-style.mjs";
import { mergeVars } from "./get-style/resolve-vars/merge-vars.mjs";
import { useStylesTransform } from "./use-transformed-styles.mjs";
//#region packages/@mantine/core/src/core/styles-api/use-styles/use-styles.ts
function useStyles({ name, classes, props, stylesCtx, className, style, rootSelector = "root", unstyled, classNames, styles, vars, varsResolver, attributes }) {
	const theme = useMantineTheme();
	const classNamesPrefix = useMantineClassNamesPrefix();
	const withStaticClasses = useMantineWithStaticClasses();
	const headless = useMantineIsHeadless();
	const themeName = (Array.isArray(name) ? name : [name]).filter((n) => n);
	const { withStylesTransform, getTransformedStyles } = useStylesTransform({
		props,
		stylesCtx,
		themeName,
		theme
	});
	const resolvedClassNames = resolveClassNames({
		theme,
		classNames,
		props,
		stylesCtx
	});
	const resolvedThemeClassNames = themeName.map((n) => resolveClassNames({
		theme,
		classNames: theme.components[n]?.classNames,
		props,
		stylesCtx
	}));
	const resolvedComponentStyles = withStylesTransform ? {} : resolveStyles({
		theme,
		styles,
		props,
		stylesCtx
	});
	const resolvedThemeStyles = {};
	if (!withStylesTransform) for (const n of themeName) {
		const resolved = resolveStyles({
			theme,
			styles: theme.components[n]?.styles,
			props,
			stylesCtx
		});
		for (const key of Object.keys(resolved)) resolvedThemeStyles[key] = {
			...resolvedThemeStyles[key],
			...resolved[key]
		};
	}
	const resolvedVars = mergeVars([
		headless ? {} : varsResolver?.(theme, props, stylesCtx),
		...themeName.map((n) => theme.components?.[n]?.vars?.(theme, props, stylesCtx)),
		vars?.(theme, props, stylesCtx)
	]);
	const resolvedRootStyle = resolveStyle({
		style,
		theme
	});
	return (selector, options) => ({
		...attributes?.[selector],
		className: getClassName({
			theme,
			options,
			themeName,
			selector,
			classNamesPrefix,
			resolvedClassNames,
			resolvedThemeClassNames,
			classes,
			unstyled,
			className,
			rootSelector,
			props,
			stylesCtx,
			withStaticClasses,
			headless,
			transformedStyles: getTransformedStyles([options?.styles, styles])
		}),
		style: getStyle({
			theme,
			selector,
			options,
			props,
			stylesCtx,
			rootSelector,
			withStylesTransform,
			resolvedStyles: resolvedComponentStyles,
			resolvedThemeStyles,
			resolvedVars,
			resolvedRootStyle
		})
	});
}
//#endregion
export { useStyles };

//# sourceMappingURL=use-styles.mjs.map