@meistrari/tela-build 1.0.0

package/components/tela/table/table-row.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+    class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+    <tr :class="cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)">
+        <slot />
+    </tr>
+</template>

package/components/tela/table/table.mdx

@@ -0,0 +1,230 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as TableStories from './table.stories.ts';
+
+<Meta of={TableStories} />
+
+# TelaTable
+
+A complete table component system built with semantic HTML table elements and styled for modern interfaces.
+
+## Props
+
+<ArgTypes />
+
+## Components
+
+The Table system consists of these components:
+
+### Core Table Structure
+- `TelaTable` - Root table container with overflow handling
+- `TelaTableHeader` - Table header section (`<thead>`)
+- `TelaTableBody` - Table body section (`<tbody>`)
+- `TelaTableFooter` - Table footer section (`<tfoot>`)
+
+### Table Content
+- `TelaTableRow` - Table row with hover effects (`<tr>`)
+- `TelaTableHead` - Header cell with proper styling (`<th>`)
+- `TelaTableCell` - Data cell with consistent padding (`<td>`)
+
+### Optional Elements
+- `TelaTableCaption` - Accessible table description (`<caption>`)
+- `TelaTableEmpty` - Empty state component for when no data is available
+
+## Examples
+
+### Basic Usage
+
+<Canvas of={TableStories.Default} />
+
+### Table with Empty State
+
+<Canvas of={TableStories.EmptyState} />
+
+### Data Table with Footer
+
+<Canvas of={TableStories.WithFooter} />
+
+### Selectable Rows with Checkboxes
+
+<Canvas of={TableStories.WithCheckboxes} />
+
+### Custom Styled Table
+
+<Canvas of={TableStories.CustomStyling} />
+
+### Responsive Scrollable Table
+
+<Canvas of={TableStories.ResponsiveTable} />
+
+### Basic Usage Code
+
+```vue
+<TelaTable>
+  <TelaTableCaption>A list of your recent invoices.</TelaTableCaption>
+  <TelaTableHeader>
+    <TelaTableRow>
+      <TelaTableHead>Invoice</TelaTableHead>
+      <TelaTableHead>Status</TelaTableHead>
+      <TelaTableHead>Method</TelaTableHead>
+      <TelaTableHead class="text-right">Amount</TelaTableHead>
+    </TelaTableRow>
+  </TelaTableHeader>
+  <TelaTableBody>
+    <TelaTableRow>
+      <TelaTableCell class="font-medium">INV001</TelaTableCell>
+      <TelaTableCell>Paid</TelaTableCell>
+      <TelaTableCell>Credit Card</TelaTableCell>
+      <TelaTableCell class="text-right">$250.00</TelaTableCell>
+    </TelaTableRow>
+    <TelaTableRow>
+      <TelaTableCell class="font-medium">INV002</TelaTableCell>
+      <TelaTableCell>Pending</TelaTableCell>
+      <TelaTableCell>PayPal</TelaTableCell>
+      <TelaTableCell class="text-right">$150.00</TelaTableCell>
+    </TelaTableRow>
+  </TelaTableBody>
+</TelaTable>
+```
+
+### Table with Empty State Code
+
+```vue
+<TelaTable>
+  <TelaTableCaption>No invoices found.</TelaTableCaption>
+  <TelaTableHeader>
+    <TelaTableRow>
+      <TelaTableHead>Invoice</TelaTableHead>
+      <TelaTableHead>Status</TelaTableHead>
+      <TelaTableHead>Method</TelaTableHead>
+      <TelaTableHead class="text-right">Amount</TelaTableHead>
+    </TelaTableRow>
+  </TelaTableHeader>
+  <TelaTableBody>
+    <TelaTableRow>
+      <TelaTableCell colspan="4">
+        <TelaTableEmpty>
+          <div class="text-center py-8">
+            <p class="text-muted-foreground">No data available</p>
+          </div>
+        </TelaTableEmpty>
+      </TelaTableCell>
+    </TelaTableRow>
+  </TelaTableBody>
+</TelaTable>
+```
+
+### Data Table with Footer Code
+
+```vue
+<TelaTable>
+  <TelaTableHeader>
+    <TelaTableRow>
+      <TelaTableHead>Product</TelaTableHead>
+      <TelaTableHead>Quantity</TelaTableHead>
+      <TelaTableHead class="text-right">Price</TelaTableHead>
+      <TelaTableHead class="text-right">Total</TelaTableHead>
+    </TelaTableRow>
+  </TelaTableHeader>
+  <TelaTableBody>
+    <TelaTableRow>
+      <TelaTableCell>Product A</TelaTableCell>
+      <TelaTableCell>2</TelaTableCell>
+      <TelaTableCell class="text-right">$50.00</TelaTableCell>
+      <TelaTableCell class="text-right">$100.00</TelaTableCell>
+    </TelaTableRow>
+    <TelaTableRow>
+      <TelaTableCell>Product B</TelaTableCell>
+      <TelaTableCell>1</TelaTableCell>
+      <TelaTableCell class="text-right">$75.00</TelaTableCell>
+      <TelaTableCell class="text-right">$75.00</TelaTableCell>
+    </TelaTableRow>
+  </TelaTableBody>
+  <TelaTableFooter>
+    <TelaTableRow>
+      <TelaTableCell colspan="3" class="font-medium">Total</TelaTableCell>
+      <TelaTableCell class="text-right font-medium">$175.00</TelaTableCell>
+    </TelaTableRow>
+  </TelaTableFooter>
+</TelaTable>
+```
+
+### Selectable Rows with Checkboxes Code
+
+```vue
+<TelaTable>
+  <TelaTableHeader>
+    <TelaTableRow>
+      <TelaTableHead class="w-12">
+        <input type="checkbox" class="checkbox" />
+      </TelaTableHead>
+      <TelaTableHead>Name</TelaTableHead>
+      <TelaTableHead>Email</TelaTableHead>
+      <TelaTableHead>Role</TelaTableHead>
+    </TelaTableRow>
+  </TelaTableHeader>
+  <TelaTableBody>
+    <TelaTableRow>
+      <TelaTableCell>
+        <input type="checkbox" class="checkbox" />
+      </TelaTableCell>
+      <TelaTableCell class="font-medium">John Doe</TelaTableCell>
+      <TelaTableCell>john@example.com</TelaTableCell>
+      <TelaTableCell>Admin</TelaTableCell>
+    </TelaTableRow>
+    <TelaTableRow>
+      <TelaTableCell>
+        <input type="checkbox" class="checkbox" />
+      </TelaTableCell>
+      <TelaTableCell class="font-medium">Jane Smith</TelaTableCell>
+      <TelaTableCell>jane@example.com</TelaTableCell>
+      <TelaTableCell>User</TelaTableCell>
+    </TelaTableRow>
+  </TelaTableBody>
+</TelaTable>
+```
+
+## Props
+
+<ArgTypes />
+
+## Components
+
+The Table system consists of these components:
+
+### Core Table Structure
+- `TelaTable` - Root table container with overflow handling
+- `TelaTableHeader` - Table header section (`<thead>`)
+- `TelaTableBody` - Table body section (`<tbody>`)
+- `TelaTableFooter` - Table footer section (`<tfoot>`)
+
+### Table Content
+- `TelaTableRow` - Table row with hover effects (`<tr>`)
+- `TelaTableHead` - Header cell with proper styling (`<th>`)
+- `TelaTableCell` - Data cell with consistent padding (`<td>`)
+
+### Optional Elements
+- `TelaTableCaption` - Accessible table description (`<caption>`)
+- `TelaTableEmpty` - Empty state component for when no data is available
+
+## Features
+
+- **Responsive**: Horizontal scrolling on smaller screens
+- **Accessible**: Proper semantic HTML structure with caption support
+- **Styled**: Consistent padding, borders, and hover states
+- **Flexible**: Support for custom classes on all components
+- **Empty States**: Built-in empty state handling
+- **Selection**: Optimized spacing for checkbox columns
+
+## Styling Classes
+
+Each component accepts a `class` prop for custom styling:
+
+```vue
+<TelaTable class="border-2">
+  <TelaTableRow class="bg-accent">
+    <TelaTableCell class="font-bold text-primary">
+      Custom styled content
+    </TelaTableCell>
+  </TelaTableRow>
+</TelaTable>
+```

package/components/tela/table/table.stories.ts

@@ -0,0 +1,384 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import TelaTable from './table.vue'
+import TelaTableHeader from './table-header.vue'
+import TelaTableBody from './table-body.vue'
+import TelaTableFooter from './table-footer.vue'
+import TelaTableRow from './table-row.vue'
+import TelaTableHead from './table-head.vue'
+import TelaTableCell from './table-cell.vue'
+import TelaTableCaption from './table-caption.vue'
+import TelaTableEmpty from './table-empty.vue'
+
+const meta: Meta<typeof TelaTable> = {
+    title: 'tela/table',
+    component: TelaTable,
+    argTypes: {
+        class: {
+            control: 'text',
+            description: 'Custom CSS classes for styling',
+        },
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    render: args => ({
+        components: {
+            TelaTable,
+            TelaTableHeader,
+            TelaTableBody,
+            TelaTableRow,
+            TelaTableHead,
+            TelaTableCell,
+            TelaTableCaption,
+        },
+        setup() {
+            return { args }
+        },
+        template: `
+      <TelaTable v-bind="args">
+        <TelaTableCaption>A list of your recent invoices.</TelaTableCaption>
+        <TelaTableHeader>
+          <TelaTableRow>
+            <TelaTableHead class="w-[100px]">Invoice</TelaTableHead>
+            <TelaTableHead>Status</TelaTableHead>
+            <TelaTableHead>Method</TelaTableHead>
+            <TelaTableHead class="text-right">Amount</TelaTableHead>
+          </TelaTableRow>
+        </TelaTableHeader>
+        <TelaTableBody>
+          <TelaTableRow>
+            <TelaTableCell class="font-medium">INV001</TelaTableCell>
+            <TelaTableCell>Paid</TelaTableCell>
+            <TelaTableCell>Credit Card</TelaTableCell>
+            <TelaTableCell class="text-right">$250.00</TelaTableCell>
+          </TelaTableRow>
+          <TelaTableRow>
+            <TelaTableCell class="font-medium">INV002</TelaTableCell>
+            <TelaTableCell>Pending</TelaTableCell>
+            <TelaTableCell>PayPal</TelaTableCell>
+            <TelaTableCell class="text-right">$150.00</TelaTableCell>
+          </TelaTableRow>
+          <TelaTableRow>
+            <TelaTableCell class="font-medium">INV003</TelaTableCell>
+            <TelaTableCell>Unpaid</TelaTableCell>
+            <TelaTableCell>Bank Transfer</TelaTableCell>
+            <TelaTableCell class="text-right">$350.00</TelaTableCell>
+          </TelaTableRow>
+          <TelaTableRow>
+            <TelaTableCell class="font-medium">INV004</TelaTableCell>
+            <TelaTableCell>Paid</TelaTableCell>
+            <TelaTableCell>Credit Card</TelaTableCell>
+            <TelaTableCell class="text-right">$450.00</TelaTableCell>
+          </TelaTableRow>
+        </TelaTableBody>
+      </TelaTable>
+    `,
+    }),
+}
+
+export const WithFooter: Story = {
+    render: args => ({
+        components: {
+            TelaTable,
+            TelaTableHeader,
+            TelaTableBody,
+            TelaTableFooter,
+            TelaTableRow,
+            TelaTableHead,
+            TelaTableCell,
+        },
+        setup() {
+            return { args }
+        },
+        template: `
+      <TelaTable v-bind="args">
+        <TelaTableHeader>
+          <TelaTableRow>
+            <TelaTableHead>Product</TelaTableHead>
+            <TelaTableHead class="text-center">Quantity</TelaTableHead>
+            <TelaTableHead class="text-right">Price</TelaTableHead>
+            <TelaTableHead class="text-right">Total</TelaTableHead>
+          </TelaTableRow>
+        </TelaTableHeader>
+        <TelaTableBody>
+          <TelaTableRow>
+            <TelaTableCell>Product A</TelaTableCell>
+            <TelaTableCell class="text-center">2</TelaTableCell>
+            <TelaTableCell class="text-right">$50.00</TelaTableCell>
+            <TelaTableCell class="text-right">$100.00</TelaTableCell>
+          </TelaTableRow>
+          <TelaTableRow>
+            <TelaTableCell>Product B</TelaTableCell>
+            <TelaTableCell class="text-center">1</TelaTableCell>
+            <TelaTableCell class="text-right">$75.00</TelaTableCell>
+            <TelaTableCell class="text-right">$75.00</TelaTableCell>
+          </TelaTableRow>
+          <TelaTableRow>
+            <TelaTableCell>Product C</TelaTableCell>
+            <TelaTableCell class="text-center">3</TelaTableCell>
+            <TelaTableCell class="text-right">$30.00</TelaTableCell>
+            <TelaTableCell class="text-right">$90.00</TelaTableCell>
+          </TelaTableRow>
+        </TelaTableBody>
+        <TelaTableFooter>
+          <TelaTableRow>
+            <TelaTableCell colspan="3" class="font-medium">Total</TelaTableCell>
+            <TelaTableCell class="text-right font-medium">$265.00</TelaTableCell>
+          </TelaTableRow>
+        </TelaTableFooter>
+      </TelaTable>
+    `,
+    }),
+}
+
+export const EmptyState: Story = {
+    render: args => ({
+        components: {
+            TelaTable,
+            TelaTableHeader,
+            TelaTableBody,
+            TelaTableRow,
+            TelaTableHead,
+            TelaTableCell,
+            TelaTableEmpty,
+            TelaTableCaption,
+        },
+        setup() {
+            return { args }
+        },
+        template: `
+      <TelaTable v-bind="args">
+        <TelaTableCaption>No data available.</TelaTableCaption>
+        <TelaTableHeader>
+          <TelaTableRow>
+            <TelaTableHead>Invoice</TelaTableHead>
+            <TelaTableHead>Status</TelaTableHead>
+            <TelaTableHead>Method</TelaTableHead>
+            <TelaTableHead class="text-right">Amount</TelaTableHead>
+          </TelaTableRow>
+        </TelaTableHeader>
+        <TelaTableBody>
+          <TelaTableRow>
+            <TelaTableCell colspan="4">
+              <TelaTableEmpty>
+                <div class="flex flex-col items-center justify-center py-12 text-center">
+                  <svg class="w-12 h-12 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                  </svg>
+                  <p class="text-muted-foreground mb-1">No invoices found</p>
+                  <p class="text-sm text-muted-foreground">Your invoices will appear here once created.</p>
+                </div>
+              </TelaTableEmpty>
+            </TelaTableCell>
+          </TelaTableRow>
+        </TelaTableBody>
+      </TelaTable>
+    `,
+    }),
+}
+
+export const WithCheckboxes: Story = {
+    render: args => ({
+        components: {
+            TelaTable,
+            TelaTableHeader,
+            TelaTableBody,
+            TelaTableRow,
+            TelaTableHead,
+            TelaTableCell,
+        },
+        setup() {
+            const selectedRows = ref<number[]>([])
+            const allSelected = computed(() => selectedRows.value.length === 4)
+
+            const toggleAll = () => {
+                if (allSelected.value) {
+                    selectedRows.value = []
+                }
+                else {
+                    selectedRows.value = [0, 1, 2, 3]
+                }
+            }
+
+            const toggleRow = (index: number) => {
+                const idx = selectedRows.value.indexOf(index)
+                if (idx > -1) {
+                    selectedRows.value.splice(idx, 1)
+                }
+                else {
+                    selectedRows.value.push(index)
+                }
+            }
+
+            return { args, selectedRows, allSelected, toggleAll, toggleRow }
+        },
+        template: `
+      <TelaTable v-bind="args">
+        <TelaTableHeader>
+          <TelaTableRow>
+            <TelaTableHead class="w-12">
+              <input 
+                type="checkbox" 
+                :checked="allSelected"
+                @change="toggleAll"
+                class="w-4 h-4 rounded border-gray-300"
+              />
+            </TelaTableHead>
+            <TelaTableHead>Name</TelaTableHead>
+            <TelaTableHead>Email</TelaTableHead>
+            <TelaTableHead>Role</TelaTableHead>
+            <TelaTableHead>Status</TelaTableHead>
+          </TelaTableRow>
+        </TelaTableHeader>
+        <TelaTableBody>
+          <TelaTableRow v-for="(user, index) in [
+            { name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'Active' },
+            { name: 'Jane Smith', email: 'jane@example.com', role: 'User', status: 'Active' },
+            { name: 'Bob Johnson', email: 'bob@example.com', role: 'User', status: 'Inactive' },
+            { name: 'Alice Williams', email: 'alice@example.com', role: 'Moderator', status: 'Active' }
+          ]" :key="index">
+            <TelaTableCell>
+              <input 
+                type="checkbox" 
+                :checked="selectedRows.includes(index)"
+                @change="toggleRow(index)"
+                class="w-4 h-4 rounded border-gray-300"
+              />
+            </TelaTableCell>
+            <TelaTableCell class="font-medium">{{ user.name }}</TelaTableCell>
+            <TelaTableCell>{{ user.email }}</TelaTableCell>
+            <TelaTableCell>{{ user.role }}</TelaTableCell>
+            <TelaTableCell>
+              <span :class="user.status === 'Active' ? 'text-green-600' : 'text-gray-500'">
+                {{ user.status }}
+              </span>
+            </TelaTableCell>
+          </TelaTableRow>
+        </TelaTableBody>
+      </TelaTable>
+    `,
+    }),
+}
+
+export const CustomStyling: Story = {
+    render: args => ({
+        components: {
+            TelaTable,
+            TelaTableHeader,
+            TelaTableBody,
+            TelaTableRow,
+            TelaTableHead,
+            TelaTableCell,
+        },
+        setup() {
+            return { args }
+        },
+        template: `
+      <TelaTable class="border-2 border-blue-200" v-bind="args">
+        <TelaTableHeader>
+          <TelaTableRow class="bg-blue-50">
+            <TelaTableHead class="text-blue-900 font-bold">Task</TelaTableHead>
+            <TelaTableHead class="text-blue-900 font-bold">Priority</TelaTableHead>
+            <TelaTableHead class="text-blue-900 font-bold">Status</TelaTableHead>
+            <TelaTableHead class="text-blue-900 font-bold text-right">Progress</TelaTableHead>
+          </TelaTableRow>
+        </TelaTableHeader>
+        <TelaTableBody>
+          <TelaTableRow class="hover:bg-blue-50/50">
+            <TelaTableCell class="font-medium">Design System Update</TelaTableCell>
+            <TelaTableCell>
+              <span class="px-2 py-1 text-xs rounded bg-red-100 text-red-700">High</span>
+            </TelaTableCell>
+            <TelaTableCell>
+              <span class="px-2 py-1 text-xs rounded bg-yellow-100 text-yellow-700">In Progress</span>
+            </TelaTableCell>
+            <TelaTableCell class="text-right">75%</TelaTableCell>
+          </TelaTableRow>
+          <TelaTableRow class="hover:bg-blue-50/50">
+            <TelaTableCell class="font-medium">API Documentation</TelaTableCell>
+            <TelaTableCell>
+              <span class="px-2 py-1 text-xs rounded bg-yellow-100 text-yellow-700">Medium</span>
+            </TelaTableCell>
+            <TelaTableCell>
+              <span class="px-2 py-1 text-xs rounded bg-green-100 text-green-700">Complete</span>
+            </TelaTableCell>
+            <TelaTableCell class="text-right">100%</TelaTableCell>
+          </TelaTableRow>
+          <TelaTableRow class="hover:bg-blue-50/50">
+            <TelaTableCell class="font-medium">Bug Fixes</TelaTableCell>
+            <TelaTableCell>
+              <span class="px-2 py-1 text-xs rounded bg-red-100 text-red-700">High</span>
+            </TelaTableCell>
+            <TelaTableCell>
+              <span class="px-2 py-1 text-xs rounded bg-blue-100 text-blue-700">Review</span>
+            </TelaTableCell>
+            <TelaTableCell class="text-right">90%</TelaTableCell>
+          </TelaTableRow>
+        </TelaTableBody>
+      </TelaTable>
+    `,
+    }),
+}
+
+export const ResponsiveTable: Story = {
+    render: args => ({
+        components: {
+            TelaTable,
+            TelaTableHeader,
+            TelaTableBody,
+            TelaTableRow,
+            TelaTableHead,
+            TelaTableCell,
+            TelaTableCaption,
+        },
+        setup() {
+            return { args }
+        },
+        template: `
+      <div class="max-w-[600px] border-1px rounded-lg p-4">
+        <TelaTable v-bind="args">
+          <TelaTableCaption>Scroll horizontally to see all columns</TelaTableCaption>
+          <TelaTableHeader>
+            <TelaTableRow>
+              <TelaTableHead class="min-w-[150px]">Employee</TelaTableHead>
+              <TelaTableHead class="min-w-[150px]">Department</TelaTableHead>
+              <TelaTableHead class="min-w-[120px]">Location</TelaTableHead>
+              <TelaTableHead class="min-w-[100px]">Start Date</TelaTableHead>
+              <TelaTableHead class="min-w-[120px]">Salary</TelaTableHead>
+              <TelaTableHead class="min-w-[100px]">Status</TelaTableHead>
+            </TelaTableRow>
+          </TelaTableHeader>
+          <TelaTableBody>
+            <TelaTableRow>
+              <TelaTableCell class="font-medium">Sarah Johnson</TelaTableCell>
+              <TelaTableCell>Engineering</TelaTableCell>
+              <TelaTableCell>San Francisco</TelaTableCell>
+              <TelaTableCell>2021-03-15</TelaTableCell>
+              <TelaTableCell>$125,000</TelaTableCell>
+              <TelaTableCell>Active</TelaTableCell>
+            </TelaTableRow>
+            <TelaTableRow>
+              <TelaTableCell class="font-medium">Michael Chen</TelaTableCell>
+              <TelaTableCell>Product</TelaTableCell>
+              <TelaTableCell>New York</TelaTableCell>
+              <TelaTableCell>2020-07-20</TelaTableCell>
+              <TelaTableCell>$115,000</TelaTableCell>
+              <TelaTableCell>Active</TelaTableCell>
+            </TelaTableRow>
+            <TelaTableRow>
+              <TelaTableCell class="font-medium">Emily Davis</TelaTableCell>
+              <TelaTableCell>Marketing</TelaTableCell>
+              <TelaTableCell>London</TelaTableCell>
+              <TelaTableCell>2022-01-10</TelaTableCell>
+              <TelaTableCell>$95,000</TelaTableCell>
+              <TelaTableCell>Active</TelaTableCell>
+            </TelaTableRow>
+          </TelaTableBody>
+        </TelaTable>
+      </div>
+    `,
+    }),
+}

package/components/tela/table/table.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+    class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+    <div class="relative w-full overflow-auto">
+        <table :class="cn('w-full caption-bottom text-sm', props.class)">
+            <slot />
+        </table>
+    </div>
+</template>

package/components/tela/tabs/tabs-content.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { TabsContent } from 'reka-ui'
+import type { TabsContentProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+    <TabsContent
+        :class="cn('focus-visible:outline-none pt-2', props.class)"
+        v-bind="delegatedProps"
+    >
+        <slot />
+    </TabsContent>
+</template>

package/components/tela/tabs/tabs-indicator.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+
+import { TabsIndicator } from 'reka-ui'
+import type { TabsIndicatorProps } from 'reka-ui'
+
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TabsIndicatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+    <TabsIndicator
+        v-bind="delegatedProps"
+        :class="cn('absolute left-0 h-[1.5px] bottom-0 w-[--reka-tabs-indicator-size] translate-x-[--reka-tabs-indicator-position] translate-y-[1px] rounded-full transition-[width,transform] duration-300', props.class)"
+    >
+        <div class="bg-black w-full h-full" />
+    </TabsIndicator>
+</template>