/*! 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 "react";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
//#region src/core/ValueTile/ValueTile.tsx
/**
* Editorial stat tile — a serif display value with a small muted caption.
*
* Two APIs:
* - **Convenience:** pass `number` + `label` for the dashboard pattern
*   (matches the prior `NumberCard` shape, with the brand's editorial
*   look).
* - **Compound:** wrap `ValueTile.Value` and `ValueTile.Caption` for rich
*   markup — italic accents, multi-token phrases, etc.
*
* Has no surface of its own. Wrap in `Card` (e.g.
* `<Card transparent border>` or `<Card padding="lg" radius="lg"
* shadow="none">` for the editorial tile look) when you want a
* border or background.
*
* @example
* ```tsx
* <ValueTile number={42} label="Total events" />
*
* <ValueTile>
*   <ValueTile.Value>
*     <em className="text-(--accent)">240+</em> articles
*   </ValueTile.Value>
*   <ValueTile.Caption>Across reading, writing, research, and craft</ValueTile.Caption>
* </ValueTile>
* ```
*/
var ValueTileRoot = (({ number, label, orientation = "vertical", children, className, testId }) => {
	const layoutClass = orientation === "horizontal" ? "flex items-baseline gap-3" : "flex flex-col";
	const inner = number !== void 0 || label !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ValueTileValue, { children: number ?? "—" }), label && /* @__PURE__ */ jsx(ValueTileCaption, { children: label })] }) : children;
	return /* @__PURE__ */ jsx("div", {
		className: cn("group/value-tile", layoutClass, className),
		"data-orientation": orientation,
		"data-testid": testId,
		children: inner
	});
});
/**
* Display value slot. Serif, large, follows the semantic `--primary`
* token (Linseed-600 on light, Linseed-400 on dark) so the value reads
* on either surface. Wrap accent tokens in `<em>` for the editorial
* italic-numeral look (HTML `<em>` is italic by default; add a color
* class for emphasis).
*/
var ValueTileValue = ({ children, className }) => /* @__PURE__ */ jsx("div", {
	className: cn("font-serif text-4xl leading-none tracking-tight text-(--primary)", className),
	children
});
/**
* Caption slot. Small muted line under the value (vertical) or beside it
* (horizontal). The vertical layout adds a small top margin; horizontal
* relies on the parent's gap.
*/
var ValueTileCaption = ({ children, className }) => /* @__PURE__ */ jsx("p", {
	className: cn("text-sm text-(--text-muted)", "mt-1.5 group-data-[orientation=horizontal]/value-tile:mt-0", className),
	children
});
ValueTileRoot.Value = ValueTileValue;
ValueTileRoot.Caption = ValueTileCaption;
ValueTileRoot.displayName = "ValueTile";
var ValueTile = ValueTileRoot;
//#endregion
export { ValueTile };

//# sourceMappingURL=ValueTile.js.map