Initial commit from monorepo

app/components/ui/Pill.vue

@@ -0,0 +1,42 @@
+<template>
+  <span :class="pillClass">
+    <slot />
+  </span>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  variant: {
+    type: String,
+    default: 'neutral', // neutral | primary | outline | inverse
+  },
+  tone: {
+    type: String,
+    default: 'default', // default | success | warning
+  },
+  size: {
+    type: String,
+    default: 'md', // sm | md
+  },
+})
+
+const variantMap: Record<string, string> = {
+  neutral: 'badge-neutral',
+  primary: 'badge-primary',
+  outline: 'badge-outline',
+  inverse: 'badge-ghost bg-white/10 text-white border border-white/40',
+}
+
+const toneMap: Record<string, string> = {
+  default: '',
+  success: 'badge-success',
+  warning: 'badge-warning',
+}
+
+const pillClass = computed(() => {
+  const base = ['badge', props.size === 'sm' ? 'badge-sm' : 'badge-md']
+  const variantClass = variantMap[props.variant] || variantMap.neutral
+  const toneClass = toneMap[props.tone] || ''
+  return [base, variantClass, toneClass].flat().filter(Boolean).join(' ')
+})
+</script>