feat: new component tabs

[Haviles04]

    <Tabs.Root v-model="selected">
      <Tabs.List
        label="Filter"
        class="inline-flex gap-1 p-1 bg-gray-100 dark:bg-gray-800 rounded-lg m-auto"
      >
        <Tabs.Tab
          v-for="tab in ['all', 'active', 'completed']"
          :key="tab"
          v-slot="{ isSelected }"
          :value="tab"
        >
          <button
            class="px-3 py-1.5 text-sm font-medium rounded-md transition-colors"
            :class="
              isSelected
                ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
            "
          >
            {{ tab.charAt(0).toUpperCase() + tab.slice(1) }}
          </button>
        </Tabs.Tab>
      </Tabs.List>

      <Tabs.Panel value="all" class="mt-4">All items</Tabs.Panel>
      <Tabs.Panel value="active" class="mt-4">Active items</Tabs.Panel>
      <Tabs.Panel value="completed" class="mt-4">Completed items</Tabs.Panel>
    </Tabs.Root>
</template>

<script setup lang="ts">
import { Tabs } from '#v0';

const selected = ref([]);

</script>

[pkg-pr-new]

Open in StackBlitz

commit: 1691d65