Move tabs and TabBar into UI package

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

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { Tabs, TabsList } from '../tabs';
+
+defineProps<{
+    defaultValue?: string;
+}>();
+</script>
+
+<template>
+    <Tabs :default-value="defaultValue" class="w-full">
+        <TabsList class="flex items-center space-x-0.5 sm:space-x-1">
+            <slot></slot>
+        </TabsList>
+    </Tabs>
+</template>
+
+<style scoped></style>

resources/js/packages/ui/src/TabBar/TabBarItem.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { TabsTrigger } from '../tabs';
+import { twMerge } from 'tailwind-merge';
+import type { Component } from 'vue';
+
+const props = defineProps<{
+    value: string;
+    class?: string;
+    icon?: Component;
+}>();
+</script>
+
+<template>
+    <TabsTrigger
+        :value="value"
+        :icon="icon"
+        :class="
+            twMerge(
+                'rounded-md px-2 sm:px-3 border py-1.5 text-xs sm:text-sm font-medium text-text-tertiary hover:text-text-primary focus-visible:outline-none data-[state=active]:bg-tab-background data-[state=active]:border-input-border data-[state=active]:text-text-primary border-tab-border',
+                props.class
+            )
+        ">
+        <slot></slot>
+    </TabsTrigger>
+</template>
+
+<style scoped></style>