@airplane/views/dist/components/heading/Heading.js

A React library for building Airplane views. Views components are optimized in style and functionality to produce internal apps that are easy to build and maintain.

import { jsx } from "react/jsx-runtime";
import { createStyles, Title } from "@mantine/core";
import { ComponentErrorBoundary } from "../errorBoundary/ComponentErrorBoundary.js";
import { useCommonLayoutStyle } from "../layout/useCommonLayoutStyle.js";
import { fontWeight } from "../theme/typography.js";
const titleOrderToGrayShade = {
  1: 9,
  2: 8,
  3: 8,
  4: 7,
  5: 7,
  6: 7
};
const useStyles = createStyles((theme, {
  level,
  weight
}) => {
  const headingPreset = {
    ...theme.other.typography.headingPreset[level]
  };
  if (weight) {
    headingPreset.fontWeight = fontWeight[weight];
  }
  return {
    root: {
      ...headingPreset,
      "&:first-child": {
        marginTop: 0
      }
    }
  };
});
const HeadingComponent = ({
  children,
  className,
  style,
  level = 1,
  color,
  weight,
  italic,
  underline,
  strikethrough,
  width,
  height,
  grow
}) => {
  const {
    classes,
    cx
  } = useStyles({
    level,
    weight
  });
  const {
    classes: layoutClasses
  } = useCommonLayoutStyle({
    width,
    height,
    grow
  });
  return /* @__PURE__ */ jsx(Title, { order: level, style, className: cx(classes.root, layoutClasses.style, className), color: color ?? `gray.${titleOrderToGrayShade[level]}`, italic, underline, strikethrough, children });
};
const Heading = (props) => /* @__PURE__ */ jsx(ComponentErrorBoundary, { componentName: Heading.displayName, children: /* @__PURE__ */ jsx(HeadingComponent, { ...props }) });
Heading.displayName = "Heading";
export {
  Heading,
  HeadingComponent
};
//# sourceMappingURL=Heading.js.map