/*! ratio-ui · design system for knowledge sharing · https://github.com/losol/ratio-ui · (c) 2026 Losol AS · MPL-2.0 */
import { cn } from "../../utils/cn.js";
import { buildSpacingClasses } from "../../tokens/spacing.js";
import { jsx } from "react/jsx-runtime";
//#region src/core/Heading/Heading.tsx
/**
* Semantic heading component.
*
* Text color follows `--text` from the design tokens, which is theme-aware
* by default. To force a tone for content rendered on a colored container,
* wrap with `<div className="surface-dark">` (or `surface-light`) — see
* `Surface tone overrides` in `global.css`.
*/
var HeadingRoot = ({ as: HeadingComponent = "h1", children, className, testId, ...spacingProps }) => /* @__PURE__ */ jsx(HeadingComponent, {
	className: cn("text-(--text)", buildSpacingClasses(spacingProps), className),
	"data-testid": testId,
	children
});
/**
* Renders an `<hgroup>` — semantic HTML for a heading paired with an
* eyebrow, kicker, or tagline. Use this when stacking `Heading.Eyebrow`
* + `Heading` (or any title + subtitle pair) so the markup conveys the
* pair as a unit. Assistive-technology presentation of `<hgroup>` varies
* across browsers and screen readers, so treat the benefit as semantic
* grouping rather than a guaranteed single-announcement.
*
* @example
* ```tsx
* <Heading.Group>
*   <Heading.Eyebrow>The library</Heading.Eyebrow>
*   <Heading as="h2">What's inside</Heading>
* </Heading.Group>
* ```
*/
var HeadingGroup = ({ children, className }) => /* @__PURE__ */ jsx("hgroup", {
	className,
	children
});
var eyebrowToneClasses = {
	primary: "text-(--primary)",
	accent: "text-(--accent)"
};
/**
* Small mono-font kicker line for above a heading. Pair with `Heading`
* inside `Heading.Group` so screen readers announce it as the heading's
* subtitle.
*/
var HeadingEyebrow = ({ children, className, tone = "primary" }) => /* @__PURE__ */ jsx("p", {
	className: cn("font-mono text-[10.5px] uppercase tracking-[0.18em] font-bold mb-2", eyebrowToneClasses[tone], className),
	children
});
var Heading = Object.assign(HeadingRoot, {
	Group: HeadingGroup,
	Eyebrow: HeadingEyebrow
});
//#endregion
export { Heading };

//# sourceMappingURL=Heading.js.map