/*! 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 { ArrowUpRight } from "../../icons/index.js";
import { buildSpacingClasses, extractSpacingProps } from "../../tokens/spacing.js";
import { surfaceBgClasses } from "../../tokens/colors.js";
import { Heading } from "../../core/Heading/Heading.js";
import "../../core/Heading/index.js";
import React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/layout/Section/Section.tsx
var SectionRoot = ((props) => {
	const [spacing, { color, dark, className, children, testId, ...rest }] = extractSpacingProps(props);
	return /* @__PURE__ */ jsx("section", {
		className: cn(buildSpacingClasses(spacing), color && surfaceBgClasses[color], dark && "surface-dark", className),
		"data-testid": testId,
		...rest,
		children
	});
});
/**
* Header row for a section — eyebrow + title on the left, optional
* `Section.Link`(s) on the right. The component picks up `Section.Link`
* children automatically and groups them on the right via
* `justify-between`; `Section.Eyebrow` + `Section.Title` are wrapped in
* `Heading.Group` (renders `<hgroup>`) for semantic grouping; any other
* "free markup" children render below the heading group as siblings in
* the left column. Drop the link to get a left-aligned single-column
* header.
*
* `Section.Link`, `Section.Eyebrow`, and `Section.Title` must be direct
* children — items nested inside fragments or other wrappers are treated
* as free markup.
*
* @example
* ```tsx
* <Section.Header>
*   <Section.Eyebrow>Aktuelle samlinger</Section.Eyebrow>
*   <Section.Title>Det skjer i <em>Nordland</em></Section.Title>
*   <Section.Link href="#">Se alle</Section.Link>
* </Section.Header>
* ```
*/
var SectionHeader = ({ children, className }) => {
	const childArray = React.Children.toArray(children);
	const isLink = (child) => React.isValidElement(child) && child.type === SectionLink;
	const isHeadingPair = (child) => React.isValidElement(child) && (child.type === SectionEyebrow || child.type === SectionTitle);
	const links = childArray.filter(isLink);
	const headingPair = childArray.filter(isHeadingPair);
	const freeMarkup = childArray.filter((child) => !isLink(child) && !isHeadingPair(child));
	return /* @__PURE__ */ jsxs("div", {
		className: cn("flex justify-between items-baseline gap-6 flex-wrap mb-9", className),
		children: [/* @__PURE__ */ jsxs("div", {
			className: "flex flex-col",
			children: [headingPair.length > 0 && /* @__PURE__ */ jsx(Heading.Group, { children: headingPair }), freeMarkup]
		}), links.length > 0 && /* @__PURE__ */ jsx("div", {
			className: "flex items-baseline gap-4",
			children: links
		})]
	});
};
/**
* Small mono-font kicker line above the section title. Uses Linseed
* primary by default — quieter than a hero eyebrow (which is Ochre)
* so sections stay subordinate to the page's primary heading.
*
* Delegates to `Heading.Eyebrow` with `tone="primary"`.
*/
var SectionEyebrow = ({ children, className }) => /* @__PURE__ */ jsx(Heading.Eyebrow, {
	tone: "primary",
	className,
	children
});
/**
* Section heading — serif, ~36px, with subtle italic accents for emphasis
* via `<em>` children. Renders as `<h2>` by default since the page's
* primary heading is usually in a Hero. Override via `as`.
*
* Delegates to `Heading` with section-tier serif styling.
*/
var SectionTitle = ({ children, className, as = "h2" }) => /* @__PURE__ */ jsx(Heading, {
	as,
	className: cn("font-serif font-medium text-3xl md:text-4xl leading-[1.1] tracking-tight m-0", className),
	children
});
/**
* Right-side CTA link for `Section.Header`. Renders the label followed
* by an up-right arrow that nudges on hover. Pass any anchor props
* (`href`, `target`, etc.).
*/
var SectionLink = ({ as: Component = "a", children, className, ...rest }) => /* @__PURE__ */ jsxs(Component, {
	className: cn("group inline-flex items-center gap-1.5 text-sm font-medium text-(--primary) no-underline border-b border-transparent hover:border-(--primary) pb-0.5 transition-colors", className),
	...rest,
	children: [children, /* @__PURE__ */ jsx(ArrowUpRight, {
		"aria-hidden": "true",
		focusable: false,
		className: "size-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5"
	})]
});
SectionRoot.Header = SectionHeader;
SectionRoot.Eyebrow = SectionEyebrow;
SectionRoot.Title = SectionTitle;
SectionRoot.Link = SectionLink;
SectionRoot.displayName = "Section";
var Section = SectionRoot;
//#endregion
export { Section };

//# sourceMappingURL=Section.js.map