/*! 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 { buildBorderClasses } from "../../tokens/borders.js";
import { surfaceBgClasses } from "../../tokens/colors.js";
import "react";
import { jsx } from "react/jsx-runtime";
//#region src/core/Strip/Strip.tsx
var SHADOW_CLASSES = {
	none: "",
	xs: "shadow-xs",
	sm: "shadow-sm",
	md: "shadow-md"
};
/**
* Leading slot of a `Strip` — a fixed-width column anchored on the
* left. Use for date stamps, avatars, icons, or other identity blocks.
* Picks up a subtle tinted background and a dashed right-border that
* separates it from the body.
*/
var StripLead = ({ children, className }) => /* @__PURE__ */ jsx("div", {
	className: cn("px-5 py-5 flex flex-col gap-1", "border-b md:border-b-0 md:border-r border-dashed border-border-2", "group-data-borderless/strip:border-0", "bg-secondary-300 dark:bg-primary-900", "[&>span]:font-mono [&>span]:text-base [&>span]:uppercase [&>span]:tracking-wide [&>span]:font-bold [&>span]:text-(--primary) [&>span]:leading-tight", className),
	children
});
StripLead.displayName = "Strip.Lead";
/**
* Body slot of a `Strip` — the flexible center column that takes
* the remaining horizontal space. Use for the primary content (title,
* description, pills).
*/
var StripBody = ({ children, className }) => /* @__PURE__ */ jsx("div", {
	className: cn("px-6 py-5 flex flex-col gap-2 min-w-0", className),
	children
});
StripBody.displayName = "Strip.Body";
/**
* Trailing slot of a `Strip` — the right-aligned column. Use for
* meta info (location, points, duration) and a CTA. Stacks vertically
* on wide screens, falls back to an inline row when the strip stacks.
*/
var StripTrail = ({ children, className }) => /* @__PURE__ */ jsx("div", {
	className: cn("px-6 py-5 flex flex-row md:flex-col items-start md:items-stretch md:justify-center gap-3 md:gap-2.5 min-w-0", "border-t md:border-t-0 md:border-l border-dashed border-border-2", "group-data-borderless/strip:border-0", className),
	children
});
StripTrail.displayName = "Strip.Trail";
/**
* Three-column horizontal card — leading slot (fixed-width left
* column), body (flexible center), trailing slot (fixed-width right
* column). Stacks vertically below the `md` breakpoint. Pair with
* `Strip.Lead`, `Strip.Body`, `Strip.Trail` for the
* canonical layout; pass `href` to render the strip itself as an
* anchor (the whole row becomes clickable).
*
* Use for chronological listings, calendar entries, search results,
* and any dense row-shaped content where date/identity, body, and
* meta/action separate naturally.
*
* @beta This component is experimental. The prop shape, slot contract,
* and visual treatment may change before release.
*
* @example
* ```tsx
* <Strip hoverEffect href="/events/123">
*   <Strip.Lead>
*     <span className="font-mono text-xs uppercase">SEP</span>
*     <span className="font-serif text-5xl">14</span>
*   </Strip.Lead>
*   <Strip.Body>
*     <h3 className="font-serif text-xl">Title</h3>
*     <p className="text-sm text-(--text-muted)">Headline.</p>
*   </Strip.Body>
*   <Strip.Trail>
*     <span>Place</span>
*     <span>See course →</span>
*   </Strip.Trail>
* </Strip>
* ```
*/
var StripRoot = ({ as, href, hoverEffect = false, shadow = "none", color, children, className, testId, margin, marginX, marginY, marginTop, marginBottom, ...border }) => {
	const Component = as ?? (href ? "a" : "div");
	const radius = border.radius ?? "xl";
	const borderProp = border.border ?? true;
	const bgClasses = color ? surfaceBgClasses[color] : "bg-card";
	const transitionClasses = hoverEffect ? "transition-all duration-200 ease-out" : "";
	const hoverClasses = hoverEffect ? cn("hover:border-(--primary) hover:-translate-y-px", shadow === "none" ? "hover:shadow-card-hover-tile" : "hover:shadow-card-hover") : "";
	const borderClasses = buildBorderClasses({
		border: borderProp,
		borderColor: border.borderColor,
		radius
	});
	const spacingClasses = buildSpacingClasses({
		margin,
		marginX,
		marginY,
		marginTop,
		marginBottom
	});
	return /* @__PURE__ */ jsx(Component, {
		href,
		"data-borderless": borderProp === false || borderProp === "none" || void 0,
		className: cn("group/strip grid grid-cols-1 md:grid-cols-[160px_1fr_280px] gap-0 overflow-hidden", "text-(--text) no-underline", bgClasses, borderClasses, SHADOW_CLASSES[shadow], transitionClasses, hoverClasses, spacingClasses, className),
		"data-testid": testId,
		children
	});
};
StripRoot.displayName = "Strip";
var Strip = Object.assign(StripRoot, {
	Lead: StripLead,
	Body: StripBody,
	Trail: StripTrail
});
//#endregion
export { Strip };

//# sourceMappingURL=Strip.js.map