feat(Tabs): new component

src/runtime/components/Tabs.vue

@@ -0,0 +1,71 @@
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { TabsRootProps, TabsRootEmits } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/tabs'
+
+const appConfig = _appConfig as AppConfig & { ui: { tabs: Partial<typeof theme> } }
+
+const tabs = tv({ extend: tv(theme), ...(appConfig.ui?.tabs || {}) })
+
+export interface TabsItem {
+  label: string
+  value?: string
+  slot?: string
+  disabled?: boolean
+  content?: string
+}
+
+export interface TabsProps extends Omit<TabsRootProps, 'asChild'> {
+  items: TabsItem[]
+  class?: any
+  ui?: Partial<typeof tabs.slots>
+}
+
+export interface TabsEmits extends TabsRootEmits {}
+
+export interface TabsSlots {
+  default(): any
+}
+</script>
+
+<script setup lang="ts" generic="T extends TabsItem">
+import { computed } from 'vue'
+import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent, useForwardPropsEmits } from 'radix-vue'
+
+const props = withDefaults(defineProps<TabsProps & { items: T[] }>(), { defaultValue: '0' })
+const emits = defineEmits<TabsEmits>()
+
+type SlotFunction<T> = (props: { item: T, index: number }) => any
+
+defineSlots<TabsSlots & {
+  item(): SlotFunction<T>
+} & {
+  [key in T['slot'] as string]?: SlotFunction<T>
+}>()
+
+const rootProps = useForwardPropsEmits(props, emits)
+
+const ui = computed(() => tv({ extend: tabs, slots: props.ui })())
+</script>
+
+<template>
+  <TabsRoot v-bind="rootProps" :class="ui.root({ class: props.class })">
+    <TabsList :class="ui.list()">
+      <TabsIndicator :class="ui.indicator()" />
+
+      <TabsTrigger v-for="(item, index) of items" :key="index" :value="item.value || String(index)" :disabled="item.disabled" :class="ui.trigger()">
+        <slot :item="item" :index="index">
+          <span class="truncate">{{ item.label }}</span>
+        </slot>
+      </TabsTrigger>
+    </TabsList>
+
+    <TabsContent v-for="(item, index) of items" :key="index" :value="item.value || String(index)" :class="ui.content()">
+      <slot :name="item.slot || 'item'" :item="item" :index="index">
+        {{ item.content }}
+      </slot>
+    </TabsContent>
+  </TabsRoot>
+</template>

src/theme/index.ts

@@ -9,4 +9,5 @@ export { default as icons } from './icons'
 export { default as kbd } from './kbd'
 export { default as popover } from './popover'
 export { default as skeleton } from './skeleton'
+export { default as tabs } from './tabs'
 export { default as tooltip } from './tooltip'

src/theme/tabs.ts

@@ -0,0 +1,10 @@
+export default {
+  slots: {
+    root: 'flex data-[orientation=horizontal]:flex-col items-center gap-2',
+    list: 'relative w-full flex data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-center justify-center rounded-lg bg-gray-50 dark:bg-gray-800 data-[orientation=horizontal]:h-10 p-1 group',
+    // FIXME: Replace transition with `transition-[width,transform]` when available
+    indicator: 'absolute group-data-[orientation=horizontal]:left-0 group-data-[orientation=vertical]:top-0 group-data-[orientation=horizontal]:inset-y-1 group-data-[orientation=vertical]:inset-x-1 group-data-[orientation=horizontal]:w-[--radix-tabs-indicator-size] group-data-[orientation=vertical]:h-[--radix-tabs-indicator-size] group-data-[orientation=horizontal]:translate-x-[--radix-tabs-indicator-position] group-data-[orientation=vertical]:translate-y-[--radix-tabs-indicator-position] transition-transform duration-200 bg-white dark:bg-gray-900 rounded-md shadow-sm',
+    trigger: 'relative inline-flex items-center justify-center flex-shrink-0 w-full h-8 text-gray-500 data-[state=active]:text-gray-900 dark:text-gray-400 dark:data-[state=active]:text-white px-3 text-sm font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:outline-0',
+    content: 'focus:outline-none'
+  }
+}