@meistrari/tela-build 1.0.0

package/components/tela/avatar/avatar.mdx

@@ -0,0 +1,117 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as AvatarStories from './avatar.stories.ts';
+
+<Meta of={AvatarStories} />
+
+# TelaAvatar
+
+A flexible avatar component that displays user images with fallback support. Automatically falls back to initials when no image is provided or when image loading fails. Supports multiple sizes and includes skeleton loading state.
+
+## Examples
+
+### With Initials Fallback
+
+<Canvas of={AvatarStories.Initials} />
+
+### Broken Image Fallback
+
+<Canvas of={AvatarStories.Broken} />
+
+### Basic Usage
+
+```vue
+<TelaAvatar
+  image="https://example.com/avatar.jpg"
+  alt="John Doe"
+  size="md"
+/>
+```
+
+### With Initials Fallback Code
+
+```vue
+<TelaAvatar
+  alt="John Doe"
+  size="md"
+/>
+```
+
+The component automatically generates initials from the `alt` text when no image is provided.
+
+### Different Sizes
+
+```vue
+<TelaAvatar image="..." size="2xs" alt="User" />
+<TelaAvatar image="..." size="xs" alt="User" />
+<TelaAvatar image="..." size="sm" alt="User" />
+<TelaAvatar image="..." size="md" alt="User" />
+```
+
+### Broken Image Fallback Code
+
+When an image fails to load, the component shows a broken image icon.
+
+### Custom Styling
+
+```vue
+<TelaAvatar
+  image="..."
+  alt="User"
+  class="ring-2 ring-blue-500"
+/>
+```
+
+### Avatar Group
+
+```vue
+<div class="flex -space-x-2">
+  <TelaAvatar image="..." alt="User 1" size="sm" />
+  <TelaAvatar image="..." alt="User 2" size="sm" />
+  <TelaAvatar image="..." alt="User 3" size="sm" />
+  <TelaAvatar image="..." alt="User 4" size="sm" />
+</div>
+```
+
+## Props
+
+<ArgTypes />
+
+```typescript
+type AvatarSize = '2xs' | 'xs' | 'sm' | 'md'
+
+type AvatarProps = {
+  image?: string
+  size?: AvatarSize
+  alt?: string
+  class?: string
+}
+```
+
+## Features
+
+- **Image Support**: Display user profile pictures
+- **Fallback Initials**: Automatically generated from alt text
+- **Error Handling**: Shows icon when image fails to load
+- **Multiple Sizes**: Four size options (2xs, xs, sm, md)
+- **Skeleton Loading**: Shows skeleton while image loads
+- **Custom Styling**: Accepts custom classes
+- **Accessible**: Proper alt text for screen readers
+
+## Sizes
+
+- **2xs**: Extra extra small (smallest size)
+- **xs**: Extra small
+- **sm**: Small
+- **md**: Medium (default)
+
+## Components
+
+The Avatar system works with:
+- `TelaAvatarGroup` - Container for multiple avatars with overlap
+
+## Accessibility
+
+- Alt text required for images
+- Initials fallback maintains context
+- Proper img semantics
+- Screen reader friendly

package/components/tela/avatar/avatar.stories.ts

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import Avatar from './avatar.vue'
+
+const meta: Meta<typeof Avatar> = {
+    title: 'Core/Avatar',
+    component: Avatar,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A flexible avatar component that displays user images with fallback support. Automatically falls back to initials when no image is provided or when image loading fails. Supports multiple sizes and includes skeleton loading state.',
+            },
+        },
+    },
+    argTypes: {
+        image: {
+            control: 'text',
+            description: 'URL of the image to display. If not provided or loading fails, the component will show initials or a broken image icon.',
+        },
+        size: {
+            control: 'select',
+            options: ['2xs', 'xs', 'sm', 'md'],
+            description: 'Size of the avatar. Controls width and height dimensions.',
+        },
+        alt: {
+            control: 'text',
+            description: 'Alternative text for the image. Used for accessibility and as fallback text for initials when image is not available.',
+        },
+        class: {
+            control: 'text',
+            description: 'Custom CSS classes to apply to the avatar container.',
+        },
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    args: {
+        image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150&h=150&fit=crop&crop=faces',
+        size: 'md',
+        alt: 'Avatar',
+    },
+}
+
+export const Initials: Story = {
+    args: {
+        ...Default.args,
+        image: undefined,
+        alt: 'John Doe',
+    },
+}
+
+export const Broken: Story = {
+    args: {
+        ...Default.args,
+        image: 'broken-url',
+    },
+}

package/components/tela/avatar/avatar.vue

@@ -0,0 +1,71 @@
+<script setup lang=ts>
+export type AvatarSize = '2xs' | 'xs' | 'sm' | 'md'
+
+const props = defineProps<{
+    image?: string
+    size?: AvatarSize
+    alt?: string
+    class?: string
+}>()
+
+const errorLoadingImage = ref(false)
+const sizes = {
+    '2xs': {
+        width: 16,
+        height: 16,
+    },
+    'xs': {
+        width: 24,
+        height: 24,
+    },
+    'sm': {
+        width: 32,
+        height: 32,
+    },
+    'md': {
+        width: 40,
+        height: 40,
+    },
+    'default': {
+        width: 40,
+        height: 40,
+    },
+}
+const resolvedSize = computed(() => props.size ?? 'default')
+const style = computed(() => ({
+    width: `${sizes[resolvedSize.value].width}px`,
+    height: `${sizes[resolvedSize.value].height}px`,
+}))
+watch(() => props.image, () => {
+    errorLoadingImage.value = false
+})
+</script>
+
+<template>
+    <div
+        class="rounded-6px" :class="props.class"
+        bg-cover
+        bg-center
+        overflow-hidden
+        flex items-center justify-center
+        :style="style"
+    >
+        <ClientOnly v-if="image && !errorLoadingImage">
+            <img
+                :alt="alt"
+                :src="image"
+                :width="sizes[resolvedSize].width"
+                :height="sizes[resolvedSize].height"
+                loading="lazy"
+                rounded-6px object-cover
+                :style="style"
+                @error="() => errorLoadingImage = true"
+            >
+            <template #fallback>
+                <TelaSkeleton :style="style" />
+            </template>
+        </ClientOnly>
+        <TelaIcon v-else-if="errorLoadingImage" name="i-ph-image-broken" text="black/560" size="lg" />
+        <TelaInitials v-else-if="alt" :size="size" :word="alt" />
+    </div>
+</template>

package/components/tela/avatar/group/avatar-group.stories.ts

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import TelaAvatarGroup from './avatar-group.vue'
+
+const meta = {
+    title: 'Core/AvatarGroup',
+    component: TelaAvatarGroup,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'An avatar group component that displays multiple avatars in a stacked or overlapping layout. Supports maximum display limits with "+X more" indicator, different sizes per avatar, and custom styling. Useful for showing teams, collaborators, or groups of users.',
+            },
+        },
+    },
+    argTypes: {
+        images: {
+            control: 'object',
+            description: 'Array of avatar objects. Each object should have `image` (URL), `alt` (text), and optionally `size` ("2xs", "xs", "sm", "md") properties.',
+        },
+        max: {
+            control: 'number',
+            description: 'Maximum number of avatars to display before showing "+X more" indicator.',
+        },
+        othersSize: {
+            control: 'select',
+            options: ['2xs', 'xs', 'sm', 'md'],
+            description: 'Size of the "+X more" indicator avatar.',
+        },
+    },
+    args: {
+        images: [
+            { image: 'https://i.pravatar.cc/150?img=1', alt: 'User 1' },
+            { image: 'https://i.pravatar.cc/150?img=2', alt: 'User 2' },
+            { image: 'https://i.pravatar.cc/150?img=3', alt: 'User 3' },
+            { image: 'https://i.pravatar.cc/150?img=4', alt: 'User 4' },
+            { image: 'https://i.pravatar.cc/150?img=5', alt: 'User 5' },
+        ],
+    },
+} satisfies Meta<typeof TelaAvatarGroup>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    args: {},
+}
+
+export const WithMaxLimit: Story = {
+    args: {
+        max: 3,
+    },
+}
+
+export const DifferentSizes: Story = {
+    args: {
+        images: [
+            { image: 'https://i.pravatar.cc/150?img=1', alt: 'User 1', size: '2xs' },
+            { image: 'https://i.pravatar.cc/150?img=2', alt: 'User 2', size: 'xs' },
+            { image: 'https://i.pravatar.cc/150?img=3', alt: 'User 3', size: 'sm' },
+            { image: 'https://i.pravatar.cc/150?img=4', alt: 'User 4', size: 'md' },
+        ],
+    },
+}
+
+export const WithCustomOthersSize: Story = {
+    args: {
+        max: 3,
+        othersSize: 'xs',
+        images: [
+            { image: 'https://i.pravatar.cc/150?img=1', alt: 'User 1' },
+            { image: 'https://i.pravatar.cc/150?img=2', alt: 'User 2' },
+            { image: 'https://i.pravatar.cc/150?img=3', alt: 'User 3' },
+            { image: 'https://i.pravatar.cc/150?img=4', alt: 'User 4' },
+            { image: 'https://i.pravatar.cc/150?img=5', alt: 'User 5' },
+        ],
+    },
+}

package/components/tela/avatar/group/avatar-group.vue

@@ -0,0 +1,46 @@
+<script setup lang=ts>
+export type AvatarSize = '2xs' | 'xs' | 'sm' | 'md'
+
+const props = defineProps<{
+    images: {
+        image?: string
+        alt: string
+        size?: AvatarSize
+    }[]
+    max?: number
+    othersSize?: AvatarSize
+}>()
+
+const resolvedMax = computed(() => props.max ?? props.images.length)
+const visibleImages = computed(() => props.images.slice(0, resolvedMax.value))
+const remainingImages = computed(() => props.images.length - visibleImages.value.length)
+</script>
+
+<template>
+    <div flex items-center>
+        <div relative flex>
+            <TelaAvatar
+                v-for="(image, index) in visibleImages"
+                :key="image.image"
+                :image="image.image"
+                :alt="image.alt"
+                :size="image.size ?? othersSize ?? 'md'"
+                rounded-full
+                :style="{ marginLeft: index > 0 ? '-8px' : '0', boxShadow: '0 0 0 3px white' }"
+            />
+            <div
+                v-if="remainingImages > 0"
+                body-12-regular
+                text-gray-600
+                :style="{ marginLeft: '-8px' }"
+            >
+                <TelaAvatar
+                    :alt="`${remainingImages}`"
+                    :size="othersSize ?? 'md'"
+                    rounded-full
+                    :style="{ boxShadow: '0 0 0 3px white' }"
+                />
+            </div>
+        </div>
+    </div>
+</template>

package/components/tela/badge/badge.mdx

@@ -0,0 +1,154 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as BadgeStories from './badge.stories.ts';
+
+<Meta of={BadgeStories} />
+
+# TelaBadge
+
+A versatile badge component for displaying small pieces of information, counts, or status indicators. Supports outline and filled variants, icons, and can function as a link.
+
+## Examples
+
+### Outline Variant (Default)
+
+<Canvas of={BadgeStories.Outline} />
+
+### Filled Variant
+
+<Canvas of={BadgeStories.Filled} />
+
+### With Icon
+
+<Canvas of={BadgeStories.WithIcon} />
+
+### Basic Usage
+
+```vue
+<TelaBadge>Badge Label</TelaBadge>
+```
+
+### Outline Variant Code
+
+```vue
+<TelaBadge variant="outline">Outline Badge</TelaBadge>
+```
+
+### Filled Variant Code
+
+```vue
+<TelaBadge variant="filled">Filled Badge</TelaBadge>
+```
+
+### With Icon Code
+
+```vue
+<TelaBadge icon="i-ph-star">Featured</TelaBadge>
+<TelaBadge icon="i-ph-check">Verified</TelaBadge>
+<TelaBadge icon="i-ph-warning">Warning</TelaBadge>
+```
+
+### As Link
+
+```vue
+<TelaBadge to="/profile">View Profile</TelaBadge>
+<TelaBadge to="https://example.com" target="_blank">
+  External Link
+</TelaBadge>
+```
+
+### Custom Styling
+
+```vue
+<TelaBadge
+  container-class="bg-blue-100 border-blue-300"
+  text-class="text-blue-700 font-bold"
+>
+  Custom Badge
+</TelaBadge>
+```
+
+### Status Badges
+
+```vue
+<TelaBadge variant="filled" container-class="bg-green-100" text-class="text-green-700">
+  Active
+</TelaBadge>
+<TelaBadge variant="filled" container-class="bg-yellow-100" text-class="text-yellow-700">
+  Pending
+</TelaBadge>
+<TelaBadge variant="filled" container-class="bg-red-100" text-class="text-red-700">
+  Inactive
+</TelaBadge>
+```
+
+### Count Badges
+
+```vue
+<TelaBadge variant="filled">2</TelaBadge>
+<TelaBadge variant="filled">99+</TelaBadge>
+```
+
+### With Button
+
+```vue
+<TelaButton>
+  Messages
+  <TelaBadge variant="filled" container-class="ml-2">5</TelaBadge>
+</TelaButton>
+```
+
+## Props
+
+<ArgTypes />
+
+```typescript
+type BadgeVariant = 'outline' | 'filled'
+
+type BadgeProps = {
+  variant?: BadgeVariant
+  containerClass?: string
+  textClass?: string
+  icon?: string
+  to?: string
+}
+```
+
+## Features
+
+- **Two Variants**: Outline and filled styles
+- **Icon Support**: Add icons before text
+- **Link Functionality**: Works as a link when `to` is provided
+- **Custom Styling**: Full control over container and text styles
+- **Flexible Content**: Display text, numbers, or combinations
+- **Compact Size**: Small footprint for tight spaces
+- **Inline Display**: Works well inline with text or buttons
+
+## Variants
+
+### Outline
+
+- Transparent background
+- Visible border
+- Default variant
+
+### Filled
+
+- Colored background
+- No border
+- Higher emphasis
+
+## Use Cases
+
+- **Status Indicators**: Show active/inactive states
+- **Counts**: Display notification or item counts
+- **Labels**: Tag items with categories or types
+- **Feature Flags**: Mark new or beta features
+- **Inline Links**: Create small clickable links
+- **Pills**: Create pill-shaped UI elements
+
+## Accessibility
+
+- Semantic markup
+- Link badges have proper anchor behavior
+- Icon badges maintain text content for context
+- Custom classes allow ARIA attributes

package/components/tela/badge/badge.stories.ts

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Badge from './badge.vue'
+
+const meta: Meta<typeof Badge> = {
+    title: 'Core/Badge',
+    component: Badge,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A versatile button component with multiple variants, sizes, and states. Supports icons, and can function as a link when provided with a `to` prop. Built for consistent UI interactions across the application.',
+            },
+        },
+    },
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['outline', 'filled'],
+            description: 'Variant of the badge. Outline is the default style, filled is a filled background.',
+        },
+        class: {
+            control: 'text',
+            description: 'Custom CSS classes to apply to the badge container.',
+        },
+        textClass: {
+            control: 'text',
+            description: 'Custom CSS classes to apply to the badge text.',
+        },
+        icon: {
+            control: 'text',
+            description: 'Icon class or name to display in the badge. Use icon names like "i-ph-plus" or similar iconify classes.',
+        },
+        to: {
+            control: 'boolean',
+            description: 'Link to navigate to when the badge is clicked.',
+        },
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Badge>
+
+export const Default: Story = {
+    render: args => ({
+        components: { Badge },
+        setup() {
+            return { args }
+        },
+        template: `<Badge v-bind="args">Badge Label</Badge>`,
+    }),
+}
+
+export const Outline: Story = {
+    render: args => ({
+        components: { Badge },
+        setup() {
+            return { args }
+        },
+        template: `<Badge v-bind="args" variant="outline">Badge Label</Badge>`,
+    }),
+}
+
+export const Filled: Story = {
+    render: args => ({
+        components: { Badge },
+        setup() {
+            return { args }
+        },
+        template: `<Badge v-bind="args" variant="filled">2</Badge>`,
+    }),
+}
+
+export const WithIcon: Story = {
+    render: args => ({
+        components: { Badge },
+        setup() {
+            return { args }
+        },
+        template: `<Badge v-bind="args" icon="i-ph-eye-slash-bold">Badge Label</Badge>`,
+    }),
+}

package/components/tela/badge/badge.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { NuxtLink } from '#components'
+import type { HTMLAttributes } from 'vue'
+
+const props = withDefaults(defineProps<{
+    class?: HTMLAttributes['class']
+    textClass?: HTMLAttributes['class']
+    variant?: 'outline' | 'filled'
+    icon?: string
+    to?: boolean
+}>(), {
+    variant: 'outline',
+    to: false,
+})
+
+const tag = computed(() => props.to ? NuxtLink : 'div')
+</script>
+
+<template>
+    <component
+        :is="tag"
+        :class="cn(
+            'inline-block px-[5px] rounded-[5px] select-none',
+            variant === 'outline' && 'border-[0.5px] ring-border-strong',
+            variant === 'filled' && 'bg-background-lowered',
+            props.class,
+        )"
+    >
+        <span
+            :class="cn(
+                'flex items-center gap-[4px] text-[9px] whitespace-nowrap font-580 leading-[16px] tracking-[0.04rem] uppercase',
+                variant === 'outline' && 'text-tertiary',
+                variant === 'filled' && 'text-secondary tracking-normal',
+                textClass,
+            )"
+        >
+            <TelaIcon v-if="icon" :name="icon" size="10px" />
+            <slot />
+        </span>
+    </component>
+</template>