feat(tabs): add custom styled variant

Author: codebender828

packages/c-tabs/examples/unstyled.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { ref } from "vue"
+import { chakra, CStack, useColorModeValue } from "../../vue/src"
+import {
+  CTabs,
+  CTabList,
+  CTab,
+  CTabPanel,
+  CTabPanels,
+  CTabIndicator,
+} from "../src"
+
+const value = ref("two")
+</script>
+
+<template>
+  <chakra.div data-testid="simple-tabs-example">
+    <c-stack spacing="5">
+      <c-heading size="md">Tabs - Unstyled</c-heading>
+      <c-simple-grid template-rows="auto auto" gap="4">
+        <c-stack
+          spacing="5"
+          rounded="8px"
+          :border-color="
+            useColorModeValue('blackAlpha.300', 'whiteAlpha.300').value
+          "
+          border-width="1px"
+          border-style="solid"
+          px="4"
+          py="3"
+        >
+          <c-heading size="sm">With Indicator</c-heading>
+          <c-tabs v-model="value" variant="unstyled">
+            <c-tab-list>
+              <c-tab value="one"> Item One </c-tab>
+              <c-tab value="two"> Item Two </c-tab>
+              <c-tab value="three"> Item Three </c-tab>
+            </c-tab-list>
+            <c-tab-indicator
+              mt="-1.5px"
+              height="2px"
+              bg="pink.400"
+              border-radius="1px"
+            />
+
+            <c-tab-panels>
+              <c-tab-panel value="one"> Value Item 1 </c-tab-panel>
+              <c-tab-panel value="two"> Value Item 2 </c-tab-panel>
+              <c-tab-panel value="three"> Value Item 3 </c-tab-panel>
+            </c-tab-panels>
+          </c-tabs>
+        </c-stack>
+        <c-stack
+          spacing="5"
+          rounded="8px"
+          :border-color="
+            useColorModeValue('blackAlpha.300', 'whiteAlpha.300').value
+          "
+          border-width="1px"
+          border-style="solid"
+          px="4"
+          py="3"
+        >
+          <c-heading size="sm">With Custom Style</c-heading>
+          <c-tabs v-model="value" variant="unstyled">
+            <c-tab-list>
+              <c-tab
+                :_selected="{ color: 'white', bg: 'blue.500' }"
+                value="one"
+              >
+                Item One
+              </c-tab>
+              <c-tab
+                :_selected="{ color: 'white', bg: 'green.500' }"
+                value="two"
+              >
+                Item Two
+              </c-tab>
+              <c-tab
+                :_selected="{ color: 'white', bg: 'orange.500' }"
+                value="three"
+              >
+                Item Three
+              </c-tab>
+            </c-tab-list>
+
+            <c-tab-panels>
+              <c-tab-panel value="one"> Value Item 1 </c-tab-panel>
+              <c-tab-panel value="two"> Value Item 2 </c-tab-panel>
+              <c-tab-panel value="three"> Value Item 3 </c-tab-panel>
+            </c-tab-panels>
+          </c-tabs>
+        </c-stack>
+      </c-simple-grid>
+    </c-stack>
+  </chakra.div>
+</template>

packages/c-tabs/examples/with-indicator.vue

@@ -23,7 +23,7 @@ const value = ref("two")
 <template>
   <chakra.div data-testid="simple-tabs-example">
     <c-stack spacing="5">
-      <c-heading size="md">Tabs - Basic</c-heading>
+      <c-heading size="md">Tabs - with variants</c-heading>
       <c-simple-grid
         template-rows="auto auto"
         template-columns="auto auto"

packages/c-tabs/examples/with-variants.vue

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render properly 1`] = `
+<DocumentFragment>
+  <div
+    class="chakra-tabs chakra-13o7eu2"
+    data-orientation="horizontal"
+    data-part="root"
+    data-scope="tabs"
+    dir="ltr"
+    id="tabs:1"
+  />
+</DocumentFragment>
+`;