@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
64 lines (63 loc) • 1.93 kB
JavaScript
"use client";
import { createVarsResolver } from "../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
import { factory } from "../../core/factory/factory.mjs";
import { Box } from "../../core/Box/Box.mjs";
import { getTitleSize } from "./get-title-size.mjs";
import Title_module_default from "./Title.module.mjs";
import { jsx } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/Title/Title.tsx
const defaultProps = { order: 1 };
const varsResolver = createVarsResolver((_, { order, size, lineClamp, textWrap }) => {
const sizeVariables = getTitleSize(order || 1, size);
return { root: {
"--title-fw": sizeVariables.fontWeight,
"--title-lh": sizeVariables.lineHeight,
"--title-fz": sizeVariables.fontSize,
"--title-line-clamp": typeof lineClamp === "number" ? lineClamp.toString() : void 0,
"--title-text-wrap": textWrap
} };
});
const Title = factory((_props) => {
const props = useProps("Title", defaultProps, _props);
const { classNames, className, style, styles, unstyled, order, vars, size, variant, lineClamp, textWrap, mod, attributes, ...others } = props;
const getStyles = useStyles({
name: "Title",
props,
classes: Title_module_default,
className,
style,
classNames,
styles,
unstyled,
attributes,
vars,
varsResolver
});
if (![
1,
2,
3,
4,
5,
6
].includes(order)) return null;
return /* @__PURE__ */ jsx(Box, {
...getStyles("root"),
component: `h${order}`,
variant,
mod: [{
order,
"data-line-clamp": typeof lineClamp === "number"
}, mod],
size,
...others
});
});
Title.classes = Title_module_default;
Title.varsResolver = varsResolver;
Title.displayName = "@mantine/core/Title";
//#endregion
export { Title };
//# sourceMappingURL=Title.mjs.map