@meistrari/tela-build 1.47.3 → 1.49.0

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/button/button.vue

@@ -33,16 +33,16 @@ const sizeStyle = computed(() => (({
 
 const variantStyle = computed(() => (({
     'primary': fold`
-        bg-gray-900 text-white
-        hover:bg-gray-800
-        active:bg-gray-700
+        bg-neutral-900 text-white
+        hover:bg-neutral-800
+        active:bg-neutral-700
         focus-visible:ring-0.5px focus-visible:ring-cyan-600
     `,
     'secondary': fold`
-        bg-white text-gray-900 border border-0.5px
+        bg-white text-neutral-900 border border-0.5px
       [box-shadow:0_1px_6px_0_rgba(103,127,148,0.05)]
-        hover:bg-subtle hover:border-gray-300
-        active:bg-muted active:border-gray-400/60
+        hover:bg-subtle hover:border-strong
+        active:bg-muted active:border-neutral-400/60
         focus-visible:ring-0.5px focus-visible:ring-cyan-600
     `,
     'ghost': fold`

package/components/tela/card/card.mdx

@@ -14,16 +14,18 @@ A surface container component used to group related content with consistent visu
 
 Always use the `size` prop to control card padding — it maps directly to the standardized values. Never apply padding manually to `<TelaCard>` or its inner elements.
 
+Only `xs` and `sm` are available. Both share `rounded-12px`.
+
 | `size` | Applied classes | Use for |
 |--------|------------------|---------|
-| `md` *(default)* | `p-32px sm:p-48px rounded-24px` | Standard and large cards |
-| `sm` | `p-24px rounded-12px` | Small cards, inner containers |
+| `xs` | `p-20px` | Compact cards, dense inner containers |
+| `sm` *(default)* | `p-24px` | Standard cards |
 
 ```vue
-<!-- Correct — use size prop -->
-<TelaCard size="md">...</TelaCard>
+<!-- Correct — use xs or sm -->
+<TelaCard size="xs">...</TelaCard>
 <TelaCard size="sm">...</TelaCard>
-<TelaCard>...</TelaCard> <!-- md is the default -->
+<TelaCard>...</TelaCard> <!-- sm is the default -->
 
 <!-- Incorrect — never apply padding manually -->
 <TelaCard class="p-20px">...</TelaCard>
@@ -43,10 +45,10 @@ Always use the `size` prop to control card padding — it maps directly to the s
 </TelaCard>
 ```
 
-### Minor / Inner Card
+### Compact / Inner Card
 
 ```vue
-<TelaCard size="sm">
+<TelaCard size="xs">
   <span class="body-12-medium text-secondary">Compact content</span>
 </TelaCard>
 ```
@@ -85,7 +87,7 @@ Cards in grids must use `h-full` for consistent heights.
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `size` | `'sm' \| 'md'` | `'md'` | `md` = `p-32px sm:p-48px rounded-24px`, `sm` = `p-24px rounded-12px` |
+| `size` | `'xs' \| 'sm'` | `'sm'` | `xs` = `p-20px`, `sm` = `p-24px`. Both use `rounded-12px` |
 
 ## Slots
 

package/components/tela/card/card.stories.ts

@@ -8,15 +8,15 @@ const meta: Meta<typeof Card> = {
         layout: 'centered',
         docs: {
             description: {
-                component: 'A surface container that groups related content with consistent visual boundaries. Use the `size` prop to control padding — `md` for standard cards, `sm` for minor or inner containers.',
+                component: 'A surface container that groups related content with consistent visual boundaries. Use the `size` prop to control padding — `sm` for standard cards, `xs` for compact or inner containers.',
             },
         },
     },
     argTypes: {
         size: {
             control: 'select',
-            options: ['md', 'sm'],
-            description: '`md` applies standard card padding. `sm` applies minor/inner container padding.',
+            options: ['xs', 'sm'],
+            description: '`sm` applies standard card padding. `xs` applies compact/inner container padding.',
         },
     },
 }
@@ -41,7 +41,7 @@ export const Default: Story = {
         `,
     }),
     args: {
-        size: 'md',
+        size: 'sm',
     },
 }
 
@@ -49,10 +49,10 @@ export const Standard: Story = {
     render: () => ({
         components: { Card },
         template: `
-            <Card size="md">
+            <Card size="sm">
                 <div style="display: flex; flex-direction: column; gap: 8px; min-width: 280px;">
                     <p class="heading-h4-semibold text-contrast">Standard Card</p>
-                    <p class="body-14-regular text-secondary">Used for large, standard, and medium cards.</p>
+                    <p class="body-14-regular text-secondary">Used for standard content surfaces.</p>
                 </div>
             </Card>
         `,
@@ -60,7 +60,7 @@ export const Standard: Story = {
     parameters: {
         docs: {
             description: {
-                story: 'Default size (`md`). Use for primary content surfaces.',
+                story: 'Default size (`sm`). Use for primary content surfaces.',
             },
         },
     },
@@ -70,10 +70,10 @@ export const Minor: Story = {
     render: () => ({
         components: { Card },
         template: `
-            <Card size="sm">
+            <Card size="xs">
                 <div style="display: flex; flex-direction: column; gap: 8px; min-width: 240px;">
-                    <p class="heading-h5-semibold text-contrast">Minor Card</p>
-                    <p class="body-12-regular text-secondary">Used for small cards and inner containers.</p>
+                    <p class="heading-h5-semibold text-contrast">Compact Card</p>
+                    <p class="body-12-regular text-secondary">Used for compact cards and inner containers.</p>
                 </div>
             </Card>
         `,
@@ -81,7 +81,7 @@ export const Minor: Story = {
     parameters: {
         docs: {
             description: {
-                story: 'Small size (`sm`). Use for compact cards or nested inner containers.',
+                story: 'Compact size (`xs`). Use for compact cards or nested inner containers.',
             },
         },
     },
@@ -92,18 +92,18 @@ export const SizeComparison: Story = {
         components: { Card },
         template: `
             <div style="display: flex; gap: 16px; align-items: flex-start;">
-                <Card size="md">
+                <Card size="sm">
                     <div style="display: flex; flex-direction: column; gap: 6px; min-width: 200px;">
-                        <p class="body-12-medium text-secondary">size="md"</p>
+                        <p class="body-12-medium text-secondary">size="sm"</p>
                         <p class="heading-h4-semibold text-contrast">Standard</p>
-                        <p class="body-14-regular text-tertiary">p-32px sm:p-48px padding</p>
+                        <p class="body-14-regular text-tertiary">p-24px padding</p>
                     </div>
                 </Card>
-                <Card size="sm">
+                <Card size="xs">
                     <div style="display: flex; flex-direction: column; gap: 6px; min-width: 200px;">
-                        <p class="body-12-medium text-secondary">size="sm"</p>
-                        <p class="heading-h4-semibold text-contrast">Minor</p>
-                        <p class="body-14-regular text-tertiary">p-24px padding</p>
+                        <p class="body-12-medium text-secondary">size="xs"</p>
+                        <p class="heading-h4-semibold text-contrast">Compact</p>
+                        <p class="body-14-regular text-tertiary">p-20px padding</p>
                     </div>
                 </Card>
             </div>
@@ -136,7 +136,7 @@ export const Grid: Story = {
         layout: 'padded',
         docs: {
             description: {
-                story: 'Cards used in a grid layout. No padding override needed — `size="md"` is the default.',
+                story: 'Cards used in a grid layout. No padding override needed — `size="sm"` is the default.',
             },
         },
     },

package/components/tela/card/card.vue

@@ -2,20 +2,22 @@
 import type { HTMLAttributes } from 'vue'
 
 const props = withDefaults(defineProps<{
-    size?: 'sm' | 'md'
+    size?: 'xs' | 'sm' | 'md'
     class?: HTMLAttributes['class']
     /** @deprecated Use `class` instead */
     contentPadding?: HTMLAttributes['class']
     /** @deprecated Use `class` instead */
     borderRadius?: HTMLAttributes['class']
 }>(), {
-    size: 'md',
+    size: 'sm',
 })
 
 const sizeStyles = computed(() => (({
+    xs: { padding: 'p-20px' },
     sm: { padding: 'p-24px' },
+    /** @deprecated: Use 'xs' or 'sm' instead */
     md: { padding: 'p-32px' },
-}) as Record<string, { padding: string }>)[props.size ?? 'md'] ?? { padding: '' })
+}) as Record<string, { padding: string }>)[props.size ?? 'sm'] ?? { padding: '' })
 
 const paddingClass = computed(() => props.contentPadding ?? sizeStyles.value.padding)
 const rootEl = ref<HTMLElement | null>(null)
@@ -26,7 +28,7 @@ defineExpose({
 </script>
 
 <template>
-    <div ref="rootEl" :class="cn('rounded-16px bg border-0.5px border', paddingClass, props.class)">
+    <div ref="rootEl" :class="cn('rounded-12px bg border-0.5px border', paddingClass, props.class)">
         <slot />
     </div>
 </template>

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

@@ -8,7 +8,7 @@ const props = withDefaults(defineProps<{
 }>(), {
     height: '12px',
     gap: '2px',
-    duration: 1000,
+    duration: 400,
 })
 
 const animatedFilled = ref(0)
@@ -52,7 +52,7 @@ watch(() => props.filled, (newValue) => {
             :style="{ height }"
             w-1px
             rounded-1px
-            :bg="bar.isFilled ? '#5DC16B' : '#DFE3E7'"
+            :bg="bar.isFilled ? 'green-500' : 'neutral-200'"
         />
     </div>
 </template>

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.