/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
import { getStyles } from "../styles/styler.js";
import { createSlot } from "../utils/createSlot.js";
import { forwardRef } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/components/Text.tsx
const Slot = createSlot();
const asMap = {
	display1: "h1",
	display2: "h1",
	display3: "h1",
	title1: "h1",
	title2: "h2",
	title3: "h3",
	title4: "h4",
	headline1: "h5",
	body1: "p",
	label1: "p",
	label2: "p",
	label3: "p",
	label4: "p",
	caption1: "p",
	caption2: "p",
	legal1: "p",
	"display1/emphasized": "h1",
	"display2/emphasized": "h1",
	"display3/emphasized": "h1",
	"title1/emphasized": "h1",
	"title2/emphasized": "h2",
	"title3/emphasized": "h3",
	"title4/emphasized": "h4",
	"headline1/emphasized": "h5",
	"body1/emphasized": "p",
	"label1/emphasized": "p",
	"label2/emphasized": "p",
	"label3/emphasized": "p",
	"label4/emphasized": "p",
	"caption1/emphasized": "p",
	"caption2/emphasized": "p",
	"legal1/emphasized": "p",
	ui1: "span",
	ui2: "span",
	ui3: "span",
	ui4: "span",
	ui5: "span",
	ui6: "span",
	"ui1/emphasized": "span",
	"ui2/emphasized": "span",
	"ui3/emphasized": "span",
	"ui4/emphasized": "span",
	"ui5/emphasized": "span",
	"ui6/emphasized": "span",
	inherit: "p"
};
/**
* **💬 A text element that can be used to display text**
*
* @description
* By default, the `Text` component uses text primary color and selects the
* correct font, weight, and leading. It also choices appropriate semantic
* HTML element based on the `variant` prop. For example, `body1` will use a
* `<p>` tag, `title1` uses an `<h1>`, etc. This behavior can be overridden
* with the `as` prop.
*
*
* @example
* ```tsx
* import { Text } from '@yahoo/uds';
*
* <Text variant="body1" color="primary">
*   Text goes here
* </Text>
* ```
*
* @usage
* - Use `Text` to display text in your app.
* - Use `variant` to change the size and weight of the text.
* - Use `color` to change the color of the text.
* - Use `as` to change the HTML tag used to render the text.
*
* @see The {@link https://uds.build/docs/components/text Text Docs} for more info
*/
const Text = forwardRef(function Text({ className, asChild, color = "primary", variant = "body1", as = asMap[variant], italic, tabularNumbers, fontFamily, fontSize, fontWeight, lineHeight, textTransform, textAlign, letterSpacing, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, ...props }, ref) {
	const classNames = getStyles({
		className,
		...color && color !== "inherit" ? { color } : {},
		...variant && variant !== "inherit" ? {
			fontFamily: fontFamily ?? variant,
			fontSize: fontSize ?? variant,
			fontWeight: fontWeight ?? variant,
			lineHeight: lineHeight ?? variant,
			textTransform: textTransform ?? variant,
			letterSpacing: letterSpacing ?? variant
		} : {},
		textAlign,
		backgroundColor,
		borderRadius,
		borderTopStartRadius,
		borderTopEndRadius,
		borderBottomStartRadius,
		borderBottomEndRadius,
		borderColor,
		borderStartColor,
		borderEndColor,
		borderTopColor,
		borderBottomColor,
		borderWidth,
		borderVerticalWidth,
		borderHorizontalWidth,
		borderStartWidth,
		borderEndWidth,
		borderTopWidth,
		borderBottomWidth,
		alignContent,
		alignItems,
		alignSelf,
		flex,
		flexDirection,
		flexGrow,
		flexShrink,
		flexWrap,
		justifyContent,
		flexBasis,
		display,
		overflow,
		overflowX,
		overflowY,
		position,
		spacing,
		spacingHorizontal,
		spacingVertical,
		spacingBottom,
		spacingEnd,
		spacingStart,
		spacingTop,
		offset,
		offsetVertical,
		offsetHorizontal,
		offsetBottom,
		offsetEnd,
		offsetStart,
		offsetTop,
		columnGap,
		rowGap
	});
	const Comp = asChild ? Slot : as;
	const additionalStyles = {
		...italic && {
			fontStyle: "italic",
			[`--uds-font-slant-${variant}`]: 1
		},
		...tabularNumbers && { fontVariantNumeric: "tabular-nums" }
	};
	const mergedStyle = italic || tabularNumbers ? {
		...additionalStyles,
		...props.style
	} : props.style;
	return /* @__PURE__ */ jsx(Comp, {
		className: classNames,
		ref,
		...props,
		style: mergedStyle
	});
});
Text.displayName = "Text";

//#endregion
export { Text };