Initial commit from monorepo

app/components/ui/Heading.vue

@@ -0,0 +1,45 @@
+<template>
+  <component :is="tag" :class="headingClass">
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  level: {
+    type: Number,
+    default: 1,
+  },
+  weight: {
+    type: String,
+    default: 'bold',
+  },
+  tone: {
+    type: String,
+    default: 'default', // default | inverse | muted
+  },
+})
+
+const tag = computed(() => {
+  const n = Math.min(Math.max(props.level, 1), 4)
+  return `h${n}`
+})
+
+const headingClass = computed(() => {
+  const sizeMap: Record<number, string> = {
+    1: 'text-3xl lg:text-4xl',
+    2: 'text-2xl lg:text-3xl',
+    3: 'text-xl lg:text-2xl',
+    4: 'text-lg',
+  }
+  const sizeClass = sizeMap[Math.min(Math.max(props.level, 1), 4)]
+  const weightClass = props.weight === 'semibold' ? 'font-semibold' : 'font-bold'
+  const toneMap: Record<string, string> = {
+    default: 'text-base-content',
+    inverse: 'text-primary-content',
+    muted: 'text-base-content/80',
+  }
+  const toneClass = toneMap[props.tone] || toneMap.default
+  return [sizeClass, weightClass, toneClass].join(' ')
+})
+</script>