alinea/dist/ui/util/CreateTypo.js

Headless git-based CMS

import {
  styler
} from "../../chunks/chunk-A5O3N2GS.js";
import "../../chunks/chunk-NZLE2WMY.js";

// src/ui/util/CreateTypo.tsx
import {
  forwardRef
} from "react";
import { forwardRefWithAs } from "./PropsWithAs.js";
import { jsx } from "react/jsx-runtime";
function createTypo(styles, overrides = {}) {
  function Typo({
    children,
    align
  }) {
    return /* @__PURE__ */ jsx("div", { style: { textAlign: align }, className: styles.root(), children });
  }
  function H1Component(props, ref) {
    const { as: Type = overrides.h1 ?? "h1", flat, light, ...rest } = props;
    return /* @__PURE__ */ jsx(
      Type,
      {
        ref,
        ...rest,
        className: styles.h1(styler.merge(rest), { flat, light })
      }
    );
  }
  function H2Component(props, ref) {
    const { as: Type = overrides.h2 ?? "h2", flat, light, ...rest } = props;
    return /* @__PURE__ */ jsx(
      Type,
      {
        ref,
        ...rest,
        className: styles.h2(styler.merge(rest), { flat, light })
      }
    );
  }
  function H3Component(props, ref) {
    const { as: Type = overrides.h3 ?? "h3", flat, light, ...rest } = props;
    return /* @__PURE__ */ jsx(
      Type,
      {
        ref,
        ...rest,
        className: styles.h3(styler.merge(rest), { flat, light })
      }
    );
  }
  function H4Component(props, ref) {
    const { as: Type = overrides.h4 ?? "h4", flat, light, ...rest } = props;
    return /* @__PURE__ */ jsx(
      Type,
      {
        ref,
        ...rest,
        className: styles.h4(styler.merge(rest), { flat, light })
      }
    );
  }
  function H5Component(props, ref) {
    const { as: Type = overrides.h5 ?? "h5", flat, light, ...rest } = props;
    return /* @__PURE__ */ jsx(
      Type,
      {
        ref,
        ...rest,
        className: styles.h5(styler.merge(rest), { flat, light })
      }
    );
  }
  function PComponent(props, ref) {
    const { as: Type = overrides.p ?? "p", flat, light, ...rest } = props;
    return /* @__PURE__ */ jsx(
      Type,
      {
        ref,
        ...rest,
        className: styles.p(styler.merge(rest), { flat, light })
      }
    );
  }
  const LinkComponent = forwardRef(function LinkComponent2(props, ref) {
    const Tag = overrides.a ?? "a";
    return /* @__PURE__ */ jsx(Tag, { ...props, ref, className: styles.link(styler.merge(props)) });
  });
  function MonospaceComponent(props, ref) {
    const { as: Type = "span", ...rest } = props;
    return /* @__PURE__ */ jsx(
      Type,
      {
        ...props,
        ref,
        className: styles.monospace(styler.merge(rest))
      }
    );
  }
  function SmallComponent(props, ref) {
    const { as: Type = overrides.small ?? "small", ...rest } = props;
    return /* @__PURE__ */ jsx(Type, { ...props, className: styles.small(styler.merge(rest)), ref });
  }
  return Object.assign(Typo, {
    H1: forwardRefWithAs(H1Component),
    H2: forwardRefWithAs(H2Component),
    H3: forwardRefWithAs(H3Component),
    H4: forwardRefWithAs(H4Component),
    H5: forwardRefWithAs(H5Component),
    P: forwardRefWithAs(PComponent),
    Link: LinkComponent,
    link: styles.link,
    Monospace: forwardRefWithAs(MonospaceComponent),
    Small: forwardRefWithAs(SmallComponent)
  });
}
export {
  createTypo
};