move ui and api to seperate packages and add npm actions for them

resources/js/packages/ui/src/Badge.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { twMerge } from 'tailwind-merge';
+import { computed } from 'vue';
+
+const props = withDefaults(
+    defineProps<{
+        size: 'base' | 'large' | 'xlarge';
+        tag: string;
+        class?: string;
+        color: string;
+        border: boolean;
+    }>(),
+    {
+        size: 'base',
+        tag: 'div',
+        color: 'var(--theme-color-icon-default)',
+        border: true,
+    }
+);
+
+const badgeClasses = {
+    base: 'py-1 px-2 space-x-1.5 text-xs',
+    large: 'py-1 sm:py-1.5 px-2 sm:px-3 space-x-1.5 sm:space-x-2 text-xs sm:text-sm text-muted',
+    xlarge: 'py-2 sm:py-2.5 px-3 sm:px-3.5 space-x-2 sm:space-x-3 text-sm sm:text-sm text-muted',
+};
+
+const borderClasses = computed(() => {
+    if (props.border) {
+        return 'border-input-border border';
+    }
+    return '';
+});
+</script>
+
+<template>
+    <component
+        :is="tag"
+        :class="
+            twMerge(
+                badgeClasses[size],
+                borderClasses,
+                'rounded inline-flex items-center font-semibold text-white',
+                props.class
+            )
+        ">
+        <slot></slot>
+    </component>
+</template>
+
+<style scoped></style>