@meistrari/tela-build 1.48.0 → 1.49.1

package/components/tela/avatar/label/avatar-label.mdx

@@ -0,0 +1,93 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as AvatarLabelStories from './avatar-label.stories.ts';
+
+<Meta of={AvatarLabelStories} />
+
+# TelaAvatarLabel
+
+An inline avatar + text chip. Pairs a `TelaAvatar` with a text label so any "entity reference" (created-by, assigned-to, owner, reviewer, member, etc.) renders consistently across summary rows, list cells, and metadata strips. The component is named after its **shape**, not a role — pick the role at the call site via the `label`.
+
+## Examples
+
+### Basic Usage
+
+```vue
+<TelaAvatarLabel label="Gustavo Rodrigues" />
+```
+
+### With Avatar Image
+
+```vue
+<TelaAvatarLabel
+  label="Jane Doe"
+  avatar-src="https://i.pravatar.cc/150?img=5"
+/>
+```
+
+### Larger Avatar
+
+```vue
+<TelaAvatarLabel
+  label="Project Phoenix"
+  avatar-size="sm"
+/>
+```
+
+### Inside a Summary Row
+
+A common usage — combining text labels, a `TelaDotSeparator`, and an avatar label:
+
+```vue
+<TelaDetailsSummary>
+  <TelaDetailsSummaryLabel>
+    Processed 23 minutes ago
+  </TelaDetailsSummaryLabel>
+  <TelaDotSeparator />
+  <TelaAvatarLabel label="Gustavo Rodrigues" />
+</TelaDetailsSummary>
+```
+
+### Custom Alt Text
+
+By default `avatarAlt` falls back to `label`. Override when the alt text needs to differ (e.g. for screen reader context):
+
+```vue
+<TelaAvatarLabel
+  label="Gustavo Rodrigues"
+  avatar-alt="Avatar of Gustavo Rodrigues, case reviewer"
+/>
+```
+
+## Props
+
+<ArgTypes />
+
+```typescript
+type AvatarLabelProps = {
+  label: string
+  avatarSize?: '2xs' | 'xs' | 'sm' | 'md' | 'lg'  // default: '2xs'
+  avatarSrc?: string
+  avatarAlt?: string                               // falls back to `label`
+}
+```
+
+## Slots
+
+This component does not expose slots — `label` is the single source of truth for the text. If you need rich content next to the avatar, compose `TelaAvatar` directly instead.
+
+## Layout
+
+Renders as `flex items-center gap-4px` — a small inline chip designed to sit next to other inline elements (text, separators, badges) inside a summary row.
+
+## Use Cases
+
+- **Summary rows** in details headers (created-by, assigned-to, last edited by).
+- **List cells** showing the owner / responsible person for a row.
+- **Activity feeds** to attribute an action to someone.
+- **Comment headers** above a comment body.
+- **Notification rows** indicating who triggered an event.
+
+## Related
+
+- `TelaAvatar` — underlying avatar primitive.
+- `TelaDotSeparator` — pairs naturally inside a summary row between labels.

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

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import TelaAvatarLabel from './avatar-label.vue'
+
+const meta = {
+    title: 'Core/AvatarLabel',
+    component: TelaAvatarLabel,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'An inline avatar + text chip. Pairs a `TelaAvatar` with a label, useful for representing any entity reference (created-by, assigned-to, owner, reviewer, etc.) in summary rows, lists, or metadata.',
+            },
+        },
+    },
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Text rendered next to the avatar.',
+        },
+        avatarSize: {
+            control: 'select',
+            options: ['2xs', 'xs', 'sm', 'md', 'lg'],
+            description: 'Size variant for the avatar. Defaults to `2xs` to fit inline in summary rows.',
+        },
+        avatarSrc: {
+            control: 'text',
+            description: 'Image URL for the avatar. When omitted, the avatar falls back to its initials/placeholder behavior.',
+        },
+        avatarAlt: {
+            control: 'text',
+            description: 'Alt text for the avatar image. Falls back to `label` when not provided.',
+        },
+    },
+    args: {
+        label: 'Gustavo Rodrigues',
+        avatarSize: '2xs',
+    },
+} satisfies Meta<typeof TelaAvatarLabel>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const WithImage: Story = {
+    args: {
+        label: 'Jane Doe',
+        avatarSrc: 'https://i.pravatar.cc/150?img=5',
+    },
+}
+
+export const Larger: Story = {
+    args: {
+        label: 'Project Phoenix',
+        avatarSize: 'sm',
+    },
+}
+
+export const InSummaryRow: Story = {
+    render: args => ({
+        components: { TelaAvatarLabel },
+        setup() {
+            return { args }
+        },
+        template: `
+            <div class="flex items-center gap-8px">
+                <p class="text-body-12-regular text-secondary">Created 23 minutes ago</p>
+                <div aria-hidden="true" class="size-3px rounded-full bg-icon-subtle" />
+                <TelaAvatarLabel v-bind="args" />
+            </div>
+        `,
+    }),
+}

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

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+type AvatarSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg'
+
+interface Props {
+    label: string
+    avatarSize?: AvatarSize
+    avatarSrc?: string
+    avatarAlt?: string
+}
+
+withDefaults(defineProps<Props>(), {
+    avatarSize: '2xs',
+})
+</script>
+
+<template>
+    <div flex items-center gap-4px>
+        <TelaAvatar
+            :size="avatarSize"
+            :src="avatarSrc"
+            :alt="avatarAlt ?? label"
+            rounded-full
+        />
+        <p body-12-regular text-secondary>
+            {{ label }}
+        </p>
+    </div>
+</template>

package/components/tela/card/card.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 
-const props = withDefaults(defineProps <{
-    size?: 'xs' | 'sm'
+const props = withDefaults(defineProps<{
+    size?: 'xs' | 'sm' | 'md'
     class?: HTMLAttributes['class']
     /** @deprecated Use `class` instead */
     contentPadding?: HTMLAttributes['class']

package/components/tela/collapsible-group/collapsible-group-item.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+    title: string
+    itemsLength?: number
+    singularLabel?: string
+    pluralLabel?: string
+}>(), {
+    singularLabel: 'item',
+    pluralLabel: 'items',
+})
+
+const open = defineModel<boolean>('open', { default: false })
+</script>
+
+<template>
+    <TelaCollapsible v-model:open="open" class="first:rounded-t-inherit last:rounded-b-inherit">
+        <TelaCollapsibleTrigger
+            class="group data-[state=closed]:rounded-b-inherit focus-visible:ring-1 focus-visible:ring-neutral-400"
+            outline-none w-full first:rounded-t-inherit
+        >
+            <div flex items-center justify-between py-20px pl-16px pr-20px>
+                <div flex items-center gap-16px>
+                    <TelaIcon
+                        name="i-ph-caret-down"
+                        size="24px"
+                        color="icon-tertiary"
+                        class="transition-all ease-out group-data-[state=open]:rotate-180"
+                    />
+                    <h5 heading-h4-semibold text-primary>
+                        {{ title }}
+                    </h5>
+                </div>
+                <div flex items-center gap-14px>
+                    <slot name="trigger-trailing" />
+                    <p v-if="props.itemsLength" body-14-regular text-secondary>
+                        {{ props.itemsLength }} {{ props.itemsLength === 1 ? props.singularLabel : props.pluralLabel }}
+                    </p>
+                </div>
+            </div>
+        </TelaCollapsibleTrigger>
+        <TelaCollapsibleContent>
+            <div pl-56px pr-36px pb-28px>
+                <slot />
+            </div>
+        </TelaCollapsibleContent>
+    </TelaCollapsible>
+</template>

package/components/tela/collapsible-group/collapsible-group.mdx

@@ -0,0 +1,174 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as CollapsibleGroupStories from './collapsible-group.stories.ts';
+
+<Meta of={CollapsibleGroupStories} />
+
+# TelaCollapsibleGroup
+
+A grouped collapsible component for stacking multiple expandable items in a single bordered container with dividers between rows. Each `TelaCollapsibleGroupItem` supports a title, an optional item count with customizable singular/plural labels, an open/close model, and a slot for arbitrary content. Useful for accordion-style sections, document outlines, and grouped detail panels.
+
+## Examples
+
+### Basic Usage
+
+```vue
+<TelaCollapsibleGroup>
+  <TelaCollapsibleGroupItem title="Item 1" :items-length="4">
+    <p>Lorem ipsum dolor sit amet.</p>
+  </TelaCollapsibleGroupItem>
+  <TelaCollapsibleGroupItem title="Item 2" :items-length="2">
+    <p>Sed do eiusmod tempor incididunt.</p>
+  </TelaCollapsibleGroupItem>
+  <TelaCollapsibleGroupItem title="Item 3" :items-length="1">
+    <p>Ut enim ad minim veniam.</p>
+  </TelaCollapsibleGroupItem>
+</TelaCollapsibleGroup>
+```
+
+### Without Item Count
+
+Omit `itemsLength` to hide the count badge entirely.
+
+```vue
+<TelaCollapsibleGroup>
+  <TelaCollapsibleGroupItem title="Overview">
+    <p>Just a title and content.</p>
+  </TelaCollapsibleGroupItem>
+  <TelaCollapsibleGroupItem title="Details">
+    <p>No count is shown.</p>
+  </TelaCollapsibleGroupItem>
+</TelaCollapsibleGroup>
+```
+
+### Custom Singular / Plural Labels
+
+The count text defaults to `item` / `items`. Pass `singularLabel` and `pluralLabel` to localize or customize.
+
+```vue
+<TelaCollapsibleGroup>
+  <TelaCollapsibleGroupItem
+    title="Documents"
+    :items-length="1"
+    singular-label="file"
+    plural-label="files"
+  >
+    <p>A single file.</p>
+  </TelaCollapsibleGroupItem>
+  <TelaCollapsibleGroupItem
+    title="Reports"
+    :items-length="12"
+    singular-label="file"
+    plural-label="files"
+  >
+    <p>Twelve files inside.</p>
+  </TelaCollapsibleGroupItem>
+</TelaCollapsibleGroup>
+```
+
+### Controlled Open State
+
+Use `v-model:open` to control whether an item is expanded.
+
+```vue
+<script setup>
+const isOpen = ref(true)
+</script>
+
+<template>
+  <TelaCollapsibleGroup>
+    <TelaCollapsibleGroupItem
+      v-model:open="isOpen"
+      title="Controlled Item"
+      :items-length="3"
+    >
+      <p>Open state is bound to a parent ref.</p>
+    </TelaCollapsibleGroupItem>
+  </TelaCollapsibleGroup>
+</template>
+```
+
+### Custom Trailing Slot
+
+The `trigger-trailing` slot lets you place arbitrary content (badges, actions) next to the item count.
+
+```vue
+<TelaCollapsibleGroup>
+  <TelaCollapsibleGroupItem title="With Action" :items-length="2">
+    <template #trigger-trailing>
+      <TelaBadge variant="warning">Pending</TelaBadge>
+    </template>
+    <p>Item content goes here.</p>
+  </TelaCollapsibleGroupItem>
+</TelaCollapsibleGroup>
+```
+
+## Props
+
+### TelaCollapsibleGroup
+
+Wrapper component. Accepts no props — renders a bordered, divided container around its default slot.
+
+### TelaCollapsibleGroupItem
+
+<ArgTypes />
+
+```typescript
+type CollapsibleGroupItemProps = {
+  title: string
+  itemsLength?: number
+  singularLabel?: string  // default: 'item'
+  pluralLabel?: string    // default: 'items'
+}
+
+type CollapsibleGroupItemModels = {
+  open?: boolean  // v-model:open
+}
+```
+
+## Slots
+
+### TelaCollapsibleGroup
+
+- `default` — One or more `TelaCollapsibleGroupItem` components.
+
+### TelaCollapsibleGroupItem
+
+- `default` — Content revealed when the item is expanded.
+- `trigger-trailing` — Custom content rendered to the left of the item count in the header row.
+
+## Components
+
+The collapsible group system consists of two components:
+
+- `TelaCollapsibleGroup` — Bordered container with dividers between items.
+- `TelaCollapsibleGroupItem` — Individual expandable row with title, optional count, and content.
+
+## Features
+
+- **Stacked Layout**: Multiple items share a single bordered container with dividers.
+- **Item Count**: Optional numeric badge with customizable singular/plural labels.
+- **Controlled or Uncontrolled**: Use `v-model:open` or let each item manage its own state.
+- **Custom Trailing Content**: Slot for badges or actions next to the count.
+- **Smooth Animation**: Caret icon rotates and content animates on toggle.
+- **Accessible**: Built on `TelaCollapsible` (reka-ui Collapsible primitives).
+
+## Use Cases
+
+- **Document Sections**: Group chapters, attachments, or structured details.
+- **Accordions**: Stack related expandable items with consistent styling.
+- **File / Folder Lists**: Show grouped items with counts.
+- **Detail Panels**: Organize record metadata into expandable groups.
+
+## Best Practices
+
+1. **Consistent Counts**: When using `itemsLength`, apply it to all items in the group for visual rhythm.
+2. **Localize Labels**: Always pass `singularLabel` / `pluralLabel` when copy needs to match the surrounding locale.
+3. **Avoid Deep Nesting**: Don't nest `TelaCollapsibleGroup` inside another item — flatten when possible.
+4. **Concise Titles**: Keep titles short so the row stays scannable.
+
+## Accessibility
+
+- Built on `TelaCollapsible` / reka-ui Collapsible primitives.
+- Proper ARIA attributes (`aria-expanded`, `aria-controls`).
+- Keyboard navigation (Space/Enter to toggle).
+- Focus management and screen reader support.

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

@@ -0,0 +1,134 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import CollapsibleGroup from './collapsible-group.vue'
+import CollapsibleGroupItem from './collapsible-group-item.vue'
+
+const meta: Meta<typeof CollapsibleGroupItem> = {
+    title: 'Core/CollapsibleGroup',
+    component: CollapsibleGroupItem,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A grouped collapsible component for stacking multiple expandable items in a single bordered container. Each item displays a title, an optional item count with customizable singular/plural labels, and a slot for arbitrary content. Useful for accordion-style sections, document outlines, and grouped detail panels.',
+            },
+        },
+    },
+    argTypes: {
+        title: {
+            control: 'text',
+            description: 'Title text displayed in the collapsible item header.',
+        },
+        itemsLength: {
+            control: 'number',
+            description: 'Optional number shown next to the title (e.g. "4 itens"). Hidden when falsy.',
+        },
+        singularLabel: {
+            control: 'text',
+            description: 'Label used when `itemsLength === 1`. Defaults to `item`.',
+        },
+        pluralLabel: {
+            control: 'text',
+            description: 'Label used when `itemsLength !== 1`. Defaults to `itens`.',
+        },
+        open: {
+            control: 'boolean',
+            description: 'Controls the open state of the item (v-model:open).',
+        },
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    render: () => ({
+        components: { CollapsibleGroup, CollapsibleGroupItem },
+        template: `
+            <div style="width: 600px;">
+                <CollapsibleGroup>
+                    <CollapsibleGroupItem title="Item 1" :items-length="4">
+                        <p class="text-body-16-regular">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                    </CollapsibleGroupItem>
+                    <CollapsibleGroupItem title="Item 2" :items-length="2">
+                        <p class="text-body-16-regular">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                    </CollapsibleGroupItem>
+                    <CollapsibleGroupItem title="Item 3" :items-length="1">
+                        <p class="text-body-16-regular">Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
+                    </CollapsibleGroupItem>
+                </CollapsibleGroup>
+            </div>
+        `,
+    }),
+}
+
+export const WithoutCount: Story = {
+    render: () => ({
+        components: { CollapsibleGroup, CollapsibleGroupItem },
+        template: `
+            <div style="width: 600px;">
+                <CollapsibleGroup>
+                    <CollapsibleGroupItem title="Overview">
+                        <p class="text-body-16-regular">No item count is shown when itemsLength is omitted.</p>
+                    </CollapsibleGroupItem>
+                    <CollapsibleGroupItem title="Details">
+                        <p class="text-body-16-regular">Just title and content.</p>
+                    </CollapsibleGroupItem>
+                </CollapsibleGroup>
+            </div>
+        `,
+    }),
+}
+
+export const CustomLabels: Story = {
+    render: () => ({
+        components: { CollapsibleGroup, CollapsibleGroupItem },
+        template: `
+            <div style="width: 600px;">
+                <CollapsibleGroup>
+                    <CollapsibleGroupItem
+                        title="Documents"
+                        :items-length="1"
+                        singular-label="file"
+                        plural-label="files"
+                    >
+                        <p class="text-body-16-regular">A single file.</p>
+                    </CollapsibleGroupItem>
+                    <CollapsibleGroupItem
+                        title="Reports"
+                        :items-length="12"
+                        singular-label="file"
+                        plural-label="files"
+                    >
+                        <p class="text-body-16-regular">Twelve files inside.</p>
+                    </CollapsibleGroupItem>
+                </CollapsibleGroup>
+            </div>
+        `,
+    }),
+}
+
+export const SingleItem: Story = {
+    render: args => ({
+        components: { CollapsibleGroup, CollapsibleGroupItem },
+        setup() {
+            return { args }
+        },
+        template: `
+            <div style="width: 600px;">
+                <CollapsibleGroup>
+                    <CollapsibleGroupItem v-bind="args">
+                        <p class="text-body-16-regular">Standalone item content.</p>
+                    </CollapsibleGroupItem>
+                </CollapsibleGroup>
+            </div>
+        `,
+    }),
+    args: {
+        title: 'Standalone Item',
+        itemsLength: 3,
+        singularLabel: 'item',
+        pluralLabel: 'itens',
+    },
+}

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

@@ -0,0 +1,5 @@
+<template>
+    <div divide-y-0.5px divide-border border-0.5px border rounded-12px>
+        <slot />
+    </div>
+</template>

package/components/tela/details/details-content-columns.vue

@@ -0,0 +1,5 @@
+<template>
+    <div flex w-full flex-1 min-h-0>
+        <slot />
+    </div>
+</template>

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

@@ -0,0 +1,10 @@
+<template>
+    <div
+        flex-1
+        w-full
+        flex="~ col"
+        bg
+    >
+        <slot />
+    </div>
+</template>

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

@@ -0,0 +1,5 @@
+<template>
+    <div relative mt-64px p-24px border-t-0.5px border flex="~ col" flex-shrink-0>
+        <slot />
+    </div>
+</template>

package/components/tela/details/details-review-confirm.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+interface Props {
+    reviewLabel: string
+    actionLabel: string
+    actionDisabled?: boolean
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+    confirm: []
+}>()
+
+const checked = defineModel<boolean>('checked', { default: false })
+
+const isActionDisabled = computed(() => !checked.value || Boolean(props.actionDisabled))
+</script>
+
+<template>
+    <div
+        flex="~ col"
+        gap-20px
+        max-w-640px
+        mx-auto
+        w-full
+    >
+        <label flex items-center gap-12px>
+            <TelaCheckbox id="review-check" v-model="checked" />
+            <span heading-h5-semibold text-primary cursor-pointer select-none>{{ reviewLabel }}</span>
+        </label>
+
+        <TelaButton
+            variant="primary"
+            size="md"
+            w-full
+            :disabled="isActionDisabled"
+            @click="emit('confirm')"
+        >
+            {{ actionLabel }}
+        </TelaButton>
+    </div>
+</template>

package/components/tela/details/details-summary-label.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{ variant?: 'default' | 'contrast' }>(), {
+    variant: 'default',
+})
+
+const variantClass = computed(() => ({
+    default: 'body-12-regular text-secondary',
+    contrast: 'body-12-semibold text-primary',
+}[props.variant]))
+</script>
+
+<template>
+    <p :class="variantClass">
+        <slot />
+    </p>
+</template>

package/components/tela/details/details-summary.vue

@@ -0,0 +1,5 @@
+<template>
+    <div flex items-center gap-8px>
+        <slot />
+    </div>
+</template>

package/components/tela/details/details-title.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{ size?: 'sm' | 'md' | 'lg' }>(), {
+    size: 'lg',
+})
+
+const sizeClass = computed(() => ({
+    lg: 'heading-h2-semibold',
+    md: 'heading-h3-semibold',
+    sm: 'heading-h5-semibold',
+}[props.size]))
+</script>
+
+<template>
+    <h2 :class="sizeClass" text-primary>
+        <slot />
+    </h2>
+</template>