import { n as __exportAll } from "./chunk-B-1-B7_t.js";
import { computed, createBlock, defineComponent, h, openBlock } from "vue";
//#region src/components/compositions/elements/display/TypeDisplay.vue?vue&type=script&setup=true&lang.ts
var TypeDisplay_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "TypeDisplay",
	props: {
		value: {},
		contentType: { default: "paragraph" },
		classList: {}
	},
	setup(__props) {
		/**
		* Props-driven typography display.
		*
		* The `contentType` sub-style selects the semantic tag and Tailwind
		* classes (heading-1 .. heading-6, paragraph, lead, small, caption,
		* code, quote).
		*
		*   <TypeDisplay value="Hello, world" content-type="heading-1" />
		*/
		const props = __props;
		const content = computed(() => {
			if (props.value === void 0 || props.value === null) return "";
			return String(props.value);
		});
		const rootClass = computed(() => {
			const cl = props.classList;
			if (!cl) return "";
			return Array.isArray(cl) ? cl.join(" ") : cl;
		});
		const VARIANTS = {
			"heading-1": {
				tag: "h1",
				classes: "text-4xl font-bold tracking-tight"
			},
			"heading-2": {
				tag: "h2",
				classes: "text-3xl font-semibold tracking-tight"
			},
			"heading-3": {
				tag: "h3",
				classes: "text-2xl font-semibold"
			},
			"heading-4": {
				tag: "h4",
				classes: "text-xl font-semibold"
			},
			"heading-5": {
				tag: "h5",
				classes: "text-lg font-semibold"
			},
			"heading-6": {
				tag: "h6",
				classes: "text-base font-semibold"
			},
			paragraph: {
				tag: "p",
				classes: "leading-7"
			},
			lead: {
				tag: "p",
				classes: "text-lg text-muted-foreground"
			},
			small: {
				tag: "small",
				classes: "text-xs"
			},
			caption: {
				tag: "span",
				classes: "text-xs text-muted-foreground"
			},
			code: {
				tag: "code",
				classes: "font-mono bg-muted px-1 rounded text-sm"
			},
			quote: {
				tag: "blockquote",
				classes: "border-l-4 pl-4 italic text-muted-foreground"
			}
		};
		const variant = computed(() => {
			return VARIANTS[props.contentType] ?? VARIANTS.paragraph;
		});
		const Rendered = { render() {
			return h(variant.value.tag, {
				class: [variant.value.classes, rootClass.value].filter(Boolean).join(" "),
				"data-testid": "type-display",
				"data-content-type": props.contentType
			}, content.value);
		} };
		return (_ctx, _cache) => {
			return openBlock(), createBlock(Rendered);
		};
	}
});
//#endregion
//#region src/components/compositions/elements/display/TypeDisplay.vue
var TypeDisplay_exports = /* @__PURE__ */ __exportAll({ default: () => TypeDisplay_default });
var TypeDisplay_default = TypeDisplay_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { TypeDisplay_exports as n, TypeDisplay_default as t };

//# sourceMappingURL=TypeDisplay-DMHw3h8F.js.map