@mantine/core/cjs/core/styles-api/use-styles/use-styles.cjs

React components library focused on usability, accessibility and developer experience

"use client";
const require_resolve_class_names = require("./get-class-name/resolve-class-names/resolve-class-names.cjs");
const require_resolve_styles = require("./get-style/resolve-styles/resolve-styles.cjs");
const require_Mantine_context = require("../../MantineProvider/Mantine.context.cjs");
const require_MantineThemeProvider = require("../../MantineProvider/MantineThemeProvider/MantineThemeProvider.cjs");
const require_get_class_name = require("./get-class-name/get-class-name.cjs");
const require_resolve_style = require("./get-style/resolve-style/resolve-style.cjs");
const require_get_style = require("./get-style/get-style.cjs");
const require_merge_vars = require("./get-style/resolve-vars/merge-vars.cjs");
const require_use_transformed_styles = require("./use-transformed-styles.cjs");
//#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 = require_MantineThemeProvider.useMantineTheme();
	const classNamesPrefix = require_Mantine_context.useMantineClassNamesPrefix();
	const withStaticClasses = require_Mantine_context.useMantineWithStaticClasses();
	const headless = require_Mantine_context.useMantineIsHeadless();
	const themeName = (Array.isArray(name) ? name : [name]).filter((n) => n);
	const { withStylesTransform, getTransformedStyles } = require_use_transformed_styles.useStylesTransform({
		props,
		stylesCtx,
		themeName,
		theme
	});
	const resolvedClassNames = require_resolve_class_names.resolveClassNames({
		theme,
		classNames,
		props,
		stylesCtx
	});
	const resolvedThemeClassNames = themeName.map((n) => require_resolve_class_names.resolveClassNames({
		theme,
		classNames: theme.components[n]?.classNames,
		props,
		stylesCtx
	}));
	const resolvedComponentStyles = withStylesTransform ? {} : require_resolve_styles.resolveStyles({
		theme,
		styles,
		props,
		stylesCtx
	});
	const resolvedThemeStyles = {};
	if (!withStylesTransform) for (const n of themeName) {
		const resolved = require_resolve_styles.resolveStyles({
			theme,
			styles: theme.components[n]?.styles,
			props,
			stylesCtx
		});
		for (const key of Object.keys(resolved)) resolvedThemeStyles[key] = {
			...resolvedThemeStyles[key],
			...resolved[key]
		};
	}
	const resolvedVars = require_merge_vars.mergeVars([
		headless ? {} : varsResolver?.(theme, props, stylesCtx),
		...themeName.map((n) => theme.components?.[n]?.vars?.(theme, props, stylesCtx)),
		vars?.(theme, props, stylesCtx)
	]);
	const resolvedRootStyle = require_resolve_style.resolveStyle({
		style,
		theme
	});
	return (selector, options) => ({
		...attributes?.[selector],
		className: require_get_class_name.getClassName({
			theme,
			options,
			themeName,
			selector,
			classNamesPrefix,
			resolvedClassNames,
			resolvedThemeClassNames,
			classes,
			unstyled,
			className,
			rootSelector,
			props,
			stylesCtx,
			withStaticClasses,
			headless,
			transformedStyles: getTransformedStyles([options?.styles, styles])
		}),
		style: require_get_style.getStyle({
			theme,
			selector,
			options,
			props,
			stylesCtx,
			rootSelector,
			withStylesTransform,
			resolvedStyles: resolvedComponentStyles,
			resolvedThemeStyles,
			resolvedVars,
			resolvedRootStyle
		})
	});
}
//#endregion
exports.useStyles = useStyles;

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