koval-ui/dist/src/lib/Text/Headers.js

React components collection with minimalistic design. Supports theming, layout, and input validation.

"use client";
import { jsx as o, jsxs as i } from "react/jsx-runtime";
import { forwardRef as n } from "react";
import c from "classnames";
import { IconLink as N } from "../../internal/Icons/IconLink.js";
import m from "./Text.module.css.js";
const t = n(({ children: e, className: s, as: r, anchor: a, ...l }, d) => /* @__PURE__ */ i(r, { ...l, className: c(m.header, s), ref: d, children: [
  e,
  a && /* @__PURE__ */ o("a", { className: m.anchor, href: `#${a}`, children: /* @__PURE__ */ o(N, { className: m.icon }) })
] }));
t.displayName = "Header";
const h = n(
  ({ children: e, className: s, ...r }, a) => /* @__PURE__ */ o(
    t,
    {
      ...r,
      as: "h1",
      className: c(m.header1, s),
      ref: a,
      children: e
    }
  )
);
h.displayName = "H1";
const p = n(
  ({ children: e, className: s, ...r }, a) => /* @__PURE__ */ o(
    t,
    {
      ...r,
      as: "h2",
      className: c(m.header2, s),
      ref: a,
      children: e
    }
  )
);
p.displayName = "H2";
const H = n(
  ({ children: e, className: s, ...r }, a) => /* @__PURE__ */ o(
    t,
    {
      ...r,
      as: "h3",
      className: c(m.header3, s),
      ref: a,
      children: e
    }
  )
);
H.displayName = "H3";
const f = n(
  ({ children: e, className: s, ...r }, a) => /* @__PURE__ */ o(
    t,
    {
      ...r,
      as: "h4",
      className: c(m.header4, s),
      ref: a,
      children: e
    }
  )
);
f.displayName = "H4";
const u = n(
  ({ children: e, className: s, ...r }, a) => /* @__PURE__ */ o(
    t,
    {
      ...r,
      as: "h5",
      className: c(m.header5, s),
      ref: a,
      children: e
    }
  )
);
u.displayName = "H5";
const y = n(
  ({ children: e, className: s, ...r }, a) => /* @__PURE__ */ o(
    t,
    {
      ...r,
      as: "h6",
      className: c(m.header6, s),
      ref: a,
      children: e
    }
  )
);
y.displayName = "H6";
export {
  h as H1,
  p as H2,
  H as H3,
  f as H4,
  u as H5,
  y as H6,
  t as Header
};
//# sourceMappingURL=Headers.js.map