@meistrari/tela-build 1.0.0

package/components/tela/status-bar/status-bar.mdx

@@ -0,0 +1,178 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as StatusBarStories from './status-bar.stories.ts';
+
+<Meta of={StatusBarStories} />
+
+# TelaStatusBar
+
+A status bar component that displays a visual representation of status distribution using colored segments. Each segment represents a percentage of the total with different status types (success, error, neutral, etc.). Useful for showing progress, status breakdowns, or distribution metrics.
+
+## Examples
+
+### Equal Distribution
+
+<Canvas of={StatusBarStories.Default} />
+
+### All Success
+
+<Canvas of={StatusBarStories.AllSuccess} />
+
+### Disabled State
+
+<Canvas of={StatusBarStories.Disabled} />
+
+### Basic Usage
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const statusItems = [
+  { status: 'success', percentage: 60 },
+  { status: 'error', percentage: 25 },
+  { status: 'neutral', percentage: 15 }
+]
+</script>
+
+<template>
+  <TelaStatusBar :items="statusItems" />
+</template>
+```
+
+### Equal Distribution Code
+
+```vue
+<TelaStatusBar
+  :items="[
+    { status: 'success', percentage: 33 },
+    { status: 'error', percentage: 33 },
+    { status: 'neutral', percentage: 34 }
+  ]"
+/>
+```
+
+### All Success Code
+
+```vue
+<TelaStatusBar
+  :items="[
+    { status: 'success', percentage: 100 }
+  ]"
+/>
+```
+
+```vue
+<TelaStatusBar
+  :items="statusItems"
+  disabled
+/>
+```
+
+### Custom Distribution
+
+```vue
+<TelaStatusBar
+  :items="[
+    { status: 'success', percentage: 70 },
+    { status: 'warning', percentage: 20 },
+    { status: 'error', percentage: 10 }
+  ]"
+/>
+```
+
+### Task Progress
+
+```vue
+<script setup>
+import { ref, computed } from 'vue'
+
+const tasks = ref([
+  { status: 'completed', count: 45 },
+  { status: 'failed', count: 5 },
+  { status: 'pending', count: 10 }
+])
+
+const total = computed(() =>
+  tasks.value.reduce((sum, task) => sum + task.count, 0)
+)
+
+const statusItems = computed(() =>
+  tasks.value.map(task => ({
+    status: task.status === 'completed' ? 'success' :
+            task.status === 'failed' ? 'error' : 'neutral',
+    percentage: Math.round((task.count / total.value) * 100)
+  }))
+)
+</script>
+
+<template>
+  <div>
+    <TelaStatusBar :items="statusItems" />
+    <div class="mt-2 text-sm text-gray-600">
+      {{ tasks[0].count }} completed,
+      {{ tasks[1].count }} failed,
+      {{ tasks[2].count }} pending
+    </div>
+  </div>
+</template>
+```
+
+## Props
+
+<ArgTypes />
+
+```typescript
+type StatusType = 'success' | 'error' | 'neutral' | 'warning' | 'info'
+
+type StatusItem = {
+  status: StatusType
+  percentage: number  // 0-100
+}
+
+type StatusBarProps = {
+  items: StatusItem[]
+  disabled?: boolean
+}
+```
+
+## Status Colors
+
+- **success**: Green - Completed, successful, or positive states
+- **error**: Red - Failed, error, or negative states
+- **neutral**: Gray - Pending, neutral, or inactive states
+- **warning**: Yellow/Orange - Warning or caution states
+- **info**: Blue - Informational states
+
+## Features
+
+- **Visual Distribution**: Clear visual representation of status breakdown
+- **Multiple Segments**: Support for multiple status types
+- **Percentage-based**: Each segment sized by percentage
+- **Color-coded**: Different colors for each status type
+- **Disabled State**: Muted appearance when disabled
+- **Responsive**: Adapts to container width
+- **Smooth Rendering**: Clean segment transitions
+
+## Best Practices
+
+1. **Percentages Must Sum to 100**: Ensure all percentages add up to 100
+2. **Use Appropriate Status Types**: Choose status colors that match meaning
+3. **Provide Context**: Add labels or descriptions to explain what the bar represents
+4. **Minimum Segment Size**: Very small percentages may be hard to see
+5. **Consistent Colors**: Use status colors consistently across your app
+
+## Use Cases
+
+- **Task Progress**: Show completed vs. pending vs. failed tasks
+- **Test Results**: Display pass/fail/skip test counts
+- **Resource Allocation**: Visualize resource distribution
+- **Status Distribution**: Show breakdown of item statuses
+- **Health Metrics**: Display system health indicators
+- **Quality Scores**: Visualize quality distribution
+
+## Accessibility
+
+- Decorative visual indicator
+- Should be paired with text labels
+- Consider providing ARIA labels for screen readers
+- Disabled state visually distinguishable

package/components/tela/status-bar/status-bar.stories.ts

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import StatusBar from './status-bar.vue'
+
+const meta = {
+    title: 'Tela/StatusBar',
+    component: StatusBar,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A status bar component that displays a visual representation of status distribution using colored segments. Each segment represents a percentage of the total with different status types (success, error, neutral, etc.). Useful for showing progress, status breakdowns, or distribution metrics.',
+            },
+        },
+    },
+    argTypes: {
+        items: {
+            control: 'object',
+            description: 'Array of status items. Each item should have a `status` (e.g., "success", "error", "neutral") and `percentage` (0-100) property. Percentages should sum to 100.',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disable the status bar, showing it in a muted/disabled state.',
+        },
+    },
+    args: {
+        items: [
+            { status: 'success', percentage: 33 },
+            { status: 'error', percentage: 33 },
+            { status: 'neutral', percentage: 34 },
+        ],
+        disabled: false,
+    },
+} satisfies Meta<typeof StatusBar>
+
+export default meta
+type Story = StoryObj<typeof StatusBar>
+
+export const Default: Story = {
+    args: {
+        items: [
+            { status: 'success', percentage: 33 },
+            { status: 'error', percentage: 33 },
+            { status: 'neutral', percentage: 34 },
+        ],
+    },
+}
+
+export const AllSuccess: Story = {
+    args: {
+        items: [
+            { status: 'success', percentage: 100 },
+        ],
+    },
+}
+
+export const Disabled: Story = {
+    args: {
+        items: [
+            { status: 'success', percentage: 50 },
+            { status: 'neutral', percentage: 50 },
+        ],
+        disabled: true,
+    },
+}

package/components/tela/status-bar/status-bar.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { BarItem } from './types'
+
+const props = defineProps<{
+    items: BarItem[]
+    disabled?: boolean
+}>()
+
+function getBarItemClass(item: BarItem) {
+    if (item.status === 'success')
+        return 'bg-[#02C78C]'
+    if (item.status === 'error')
+        return 'bg-[#EC615D]'
+    if (item.status === 'neutral')
+        return 'bg-[#BBC4CD]'
+}
+const filteredItems = computed(() => props.items.filter(item => item.percentage > 0))
+</script>
+
+<template>
+    <div
+        flex
+        items-center
+        justify-center
+        w-80px
+        h-12px
+        gap-6px
+        p-4px
+        mt-4px
+        :class="disabled ? 'opacity-40' : 'opacity-100'"
+    >
+        <div
+            v-if="filteredItems.length === 0"
+            flex
+            items-center
+            justify-center
+            h-4px
+            rounded-3px
+            bg-gray-300
+            opacity-24
+            w-full
+        />
+        <div
+            v-for="item in filteredItems"
+            v-else
+            :key="item.status"
+            flex
+            items-center
+            justify-center
+            h-4px
+            rounded-3px
+            :class="getBarItemClass(item)"
+            :style="{ width: `${item.percentage}%` }"
+        />
+    </div>
+</template>

package/components/tela/status-bar/types.ts

@@ -0,0 +1,5 @@
+export type BarStatus = 'neutral' | 'error' | 'success'
+export type BarItem = {
+    status: BarStatus
+    percentage: number
+}

package/components/tela/switch/switch.mdx

@@ -0,0 +1,118 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as SwitchStories from './switch.stories.ts';
+
+<Meta of={SwitchStories} />
+
+# TelaSwitch
+
+A toggle switch component for boolean values. Supports v-model binding, different sizes, and custom thumb content via slots. Useful for enabling/disabling features, toggling settings, and other binary choices.
+
+## Examples
+
+### All Sizes
+
+<Canvas of={SwitchStories.Sizes} />
+
+### With Icon
+
+<Canvas of={SwitchStories.WithIcon} />
+
+### Basic Usage
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const enabled = ref(false)
+</script>
+
+<template>
+  <TelaSwitch v-model="enabled" />
+</template>
+```
+
+### All Sizes Code
+
+```vue
+<TelaSwitch size="sm" />
+<TelaSwitch size="md" />
+```
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const isDarkMode = ref(false)
+</script>
+
+<template>
+  <TelaSwitch v-model="isDarkMode">
+    <template #thumb>
+      <TelaIcon
+        v-if="isDarkMode"
+        name="i-ph-moon"
+        size="12px"
+        color="#aaa"
+      />
+      <TelaIcon
+        v-else
+        name="i-ph-sun"
+        size="12px"
+        color="#aaa"
+      />
+    </template>
+  </TelaSwitch>
+</template>
+```
+
+### Disabled State
+
+```vue
+<TelaSwitch disabled :model-value="true" />
+<TelaSwitch disabled :model-value="false" />
+```
+
+## Props
+
+<ArgTypes />
+
+```typescript
+type SwitchSize = 'sm' | 'md'
+
+type SwitchProps = {
+  modelValue?: boolean
+  size?: SwitchSize
+  disabled?: boolean
+}
+```
+
+## Slots
+
+The Switch component supports:
+
+- `thumb` - Custom content inside the switch thumb (e.g., icons)
+
+## Features
+
+- **Two-way Binding**: Full v-model support for reactive state
+- **Multiple Sizes**: Small (32x20px) and medium (40x24px) options
+- **Custom Thumb Content**: Use slots to add icons or other content to the thumb
+- **Disabled State**: Proper disabled styling and interaction prevention
+- **Smooth Animations**: Transitions for thumb movement and color changes
+- **Accessible**: Built on reka-ui with proper ARIA attributes
+- **Keyboard Support**: Can be toggled with keyboard (Space/Enter)
+
+## Colors
+
+- **Unchecked**: Gray background (#E5E7EB)
+- **Checked**: Green background (#10B981)
+- **Hover**: Slightly darker shades
+- **Disabled**: Reduced opacity with cursor not-allowed
+
+## Accessibility
+
+- Built on reka-ui's SwitchRoot and SwitchThumb primitives
+- Proper ARIA attributes for screen readers
+- Keyboard navigation support
+- Focus visible ring for keyboard users
+- Disabled state properly conveyed

package/components/tela/switch/switch.stories.ts

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+import Switch from './switch.vue'
+import TelaIcon from '../icon.vue'
+
+const meta: Meta<typeof Switch> = {
+    title: 'Core/Switch',
+    component: Switch,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A toggle switch component for boolean values. Supports v-model binding, different sizes, and custom thumb content via slots. Useful for enabling/disabling features, toggling settings, and other binary choices.',
+            },
+        },
+    },
+    argTypes: {
+        modelValue: {
+            control: 'boolean',
+            description: 'The checked state of the switch (v-model). True when on, false when off.',
+        },
+        size: {
+            control: 'radio',
+            options: ['sm', 'md'],
+            description: 'Size of the switch. Controls the overall dimensions.',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disable the switch, preventing user interaction.',
+        },
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    render: () => ({
+        components: { Switch },
+        template: `<Switch />`,
+    }),
+}
+
+export const Sizes: Story = {
+    render: args => ({
+        components: { Switch },
+        setup() {
+            return { args }
+        },
+        template: `
+            <div class="flex items-center gap-10px">
+                <Switch v-bind="args" />
+                <Switch v-bind="args" size="md" />
+            </div>
+        `,
+    }),
+    args: {
+        size: 'sm',
+    },
+}
+
+export const WithIcon: Story = {
+    render: args => ({
+        components: { Switch, TelaIcon },
+        setup() {
+            const isDarkMode = ref(false)
+
+            return { args, isDarkMode }
+        },
+        template: `
+            <Switch v-model="isDarkMode">
+                <template #thumb>
+                    <TelaIcon v-if="isDarkMode" name="i-ph-moon" size="12px" color="#aaa" />
+                    <TelaIcon v-else name="i-ph-sun" size="12px" color="#aaa" />
+                </template>
+            </Switch>
+        `,
+    }),
+}

package/components/tela/switch/switch.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+
+import {
+    SwitchRoot,
+    SwitchThumb,
+    useForwardPropsEmits,
+} from 'reka-ui'
+import type { SwitchRootEmits, SwitchRootProps } from 'reka-ui'
+
+import { cn } from '@/lib/utils'
+
+type SwitchSize = 'sm' | 'md'
+
+const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'], size?: SwitchSize }>()
+
+const emits = defineEmits<SwitchRootEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const resolvedSize = computed(() => props.size || 'sm')
+
+const sizeStyle = computed(() => (({
+    sm: 'w-32px h-20px',
+    md: 'w-40px h-24px',
+}) as Record<SwitchSize, string>)[resolvedSize.value] ?? '')
+
+const thumbSizeStyle = computed(() => (({
+    sm: 'w-16px h-16px data-[state=checked]:translate-x-3',
+    md: 'w-20px h-20px data-[state=checked]:translate-x-4',
+}) as Record<SwitchSize, string>)[resolvedSize.value] ?? '')
+</script>
+
+<template>
+    <SwitchRoot
+        v-bind="forwarded"
+        :class="cn(
+            'peer inline-flex w-32px h-20px shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-600 disabled:cursor-not-allowed disabled:opacity-50',
+            'data-[state=unchecked]:bg-gray-300 data-[state=unchecked]:hover:bg-#ccd2d9 data-[state=checked]:bg-green-500 data-[state=checked]:hover:bg-green-600',
+            sizeStyle,
+            props.class,
+        )"
+    >
+        <SwitchThumb
+            :class="cn(
+                'flex items-center justify-center rounded-full bg-white-1000 ring-0 transition-[transform,colors] hover:bg-gray-100 data-[state=checked]:drop-shadow-md',
+                thumbSizeStyle,
+            )"
+        >
+            <slot name="thumb" />
+        </SwitchThumb>
+    </SwitchRoot>
+</template>

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

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+    class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+    <tbody :class="cn('[&_tr:last-child]:border-0', props.class)">
+        <slot />
+    </tbody>
+</template>

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

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+    class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+    <caption :class="cn('mt-4 text-sm text-muted-foreground', props.class)">
+        <slot />
+    </caption>
+</template>

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+    class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+    <td
+        :class="
+            cn(
+                'p-4 align-middle [&:has([role=checkbox])]:pr-0',
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </td>
+</template>

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

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { computed } from 'vue'
+import TableCell from './table-cell.vue'
+import TableRow from './table-row.vue'
+
+const props = withDefaults(defineProps<{
+    class?: HTMLAttributes['class']
+    colspan?: number
+}>(), {
+    colspan: 1,
+})
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props
+
+    return delegated
+})
+</script>
+
+<template>
+    <TableRow>
+        <TableCell
+            :class="
+                cn(
+                    'p-4 whitespace-nowrap align-middle text-sm text-foreground',
+                    props.class,
+                )
+            "
+            v-bind="delegatedProps"
+        >
+            <div class="flex items-center justify-center py-10">
+                <slot />
+            </div>
+        </TableCell>
+    </TableRow>
+</template>

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

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+    class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+    <tfoot :class="cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)">
+        <slot />
+    </tfoot>
+</template>

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

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+    class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+    <th :class="cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)">
+        <slot />
+    </th>
+</template>

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

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+    class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+    <thead :class="cn('[&_tr]:border-b', props.class)">
+        <slot />
+    </thead>
+</template>