@meistrari/tela-build 1.0.0

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { TabsList } from 'reka-ui'
+import type { TabsListProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+    <TabsList
+        v-bind="delegatedProps"
+        :class="cn(
+            'relative inline-flex border-b-[0.5px] border-gray-200 items-center bg-white-1000 px-2 py-0.5',
+            props.class,
+        )"
+    >
+        <slot />
+    </TabsList>
+</template>

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

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TabsRootEmits, TabsRootProps } from 'reka-ui'
+import { TabsRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<TabsRootProps>()
+const emits = defineEmits<TabsRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+    <TabsRoot v-bind="forwarded">
+        <slot />
+    </TabsRoot>
+</template>

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

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { TabsTrigger, useForwardProps } from 'reka-ui'
+import type { TabsTriggerProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+    <TabsTrigger
+        v-bind="forwardedProps"
+        :class="cn(
+            'inline-flex cursor-pointer items-center justify-center whitespace-nowrap px-[6px] py-1 text-sm font-medium transition-all focus-visible:outline-none disabled:pointer-events-none text-gray-400 hover:text-black disabled:opacity-50 data-[state=active]:text-black data-[state=active]:shadow-sm',
+            props.class,
+        )"
+    >
+        <span class="truncate">
+            <slot />
+        </span>
+    </TabsTrigger>
+</template>

package/components/tela/tabs/tabs.mdx

@@ -0,0 +1,138 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as TabsStories from './tabs.stories.ts';
+
+<Meta of={TabsStories} />
+
+# TelaTabs
+
+A tabs component that organizes content into separate panels accessible via tab buttons. Supports v-model binding for the selected tab and provides a content slot for displaying tab-specific content. Useful for organizing related content into distinct sections.
+
+## Examples
+
+### Basic Usage
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const selectedTab = ref('overview')
+
+const tabs = [
+  { tab: 'overview', label: 'Overview' },
+  { tab: 'details', label: 'Details' },
+  { tab: 'settings', label: 'Settings' }
+]
+</script>
+
+<template>
+  <TelaTabs v-model="selectedTab" :options="tabs">
+    <template #content>
+      <div v-if="selectedTab === 'overview'">
+        <h3>Overview Content</h3>
+        <p>Overview information goes here</p>
+      </div>
+      <div v-else-if="selectedTab === 'details'">
+        <h3>Details Content</h3>
+        <p>Detailed information goes here</p>
+      </div>
+      <div v-else-if="selectedTab === 'settings'">
+        <h3>Settings Content</h3>
+        <p>Settings options go here</p>
+      </div>
+    </template>
+  </TelaTabs>
+</template>
+```
+
+### With Default Value
+
+```vue
+<TelaTabs
+  v-model="selectedTab"
+  :options="tabs"
+  default-value="details"
+>
+  <template #content>
+    <!-- Tab content -->
+  </template>
+</TelaTabs>
+```
+
+### Dynamic Tab Content
+
+```vue
+<script setup>
+import { ref, computed } from 'vue'
+
+const selectedTab = ref('tab1')
+const tabs = [
+  { tab: 'tab1', label: 'First Tab' },
+  { tab: 'tab2', label: 'Second Tab' },
+  { tab: 'tab3', label: 'Third Tab' }
+]
+
+const content = computed(() => {
+  const contentMap = {
+    tab1: 'Content for first tab',
+    tab2: 'Content for second tab',
+    tab3: 'Content for third tab'
+  }
+  return contentMap[selectedTab.value]
+})
+</script>
+
+<template>
+  <TelaTabs v-model="selectedTab" :options="tabs">
+    <template #content>
+      <div>{{ content }}</div>
+    </template>
+  </TelaTabs>
+</template>
+```
+
+## Props
+
+<ArgTypes />
+
+```typescript
+type TabOption = {
+  tab: string  // value
+  label: string  // display text
+}
+
+type TabsProps = {
+  modelValue?: string
+  options: TabOption[]
+  defaultValue?: string
+}
+```
+
+## Slots
+
+- `content` - Tab panel content area
+
+## Components
+
+The Tabs system consists of these reka-ui components:
+- `TelaTabsRoot` - Root tabs container
+- `TelaTabsList` - Container for tab triggers
+- `TelaTabsTrigger` - Individual tab button
+- `TelaTabsContent` - Tab panel content
+- `TelaTabsIndicator` - Visual indicator for active tab
+
+## Features
+
+- **Two-way Binding**: Full v-model support for selected tab
+- **Default Value**: Set initial tab on mount
+- **Keyboard Navigation**: Arrow keys to switch tabs, Enter/Space to activate
+- **Accessible**: Built on reka-ui with proper ARIA attributes
+- **Flexible Content**: Use slots for custom tab panel content
+- **Visual Indicator**: Animated indicator shows active tab
+
+## Accessibility
+
+- Built on reka-ui primitives
+- Proper ARIA attributes (role="tablist", role="tab", role="tabpanel")
+- Keyboard navigation (Arrow keys, Home, End, Space, Enter)
+- Focus management between tabs
+- Selected state properly conveyed to screen readers

package/components/tela/tabs/tabs.stories.ts

@@ -0,0 +1,72 @@
+import { ref } from 'vue'
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Tabs from './tabs.vue'
+
+const meta: Meta<typeof Tabs> = {
+    title: 'Core/Tabs',
+    component: Tabs,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A tabs component that organizes content into separate panels accessible via tab buttons. Supports v-model binding for the selected tab and provides a content slot for displaying tab-specific content. Useful for organizing related content into distinct sections.',
+            },
+        },
+    },
+    argTypes: {
+        modelValue: {
+            control: 'text',
+            description: 'The currently selected tab value (v-model).',
+        },
+        options: {
+            control: 'object',
+            description: 'Array of tab options. Each option should have a `tab` (value) and `label` (display text) property.',
+        },
+        defaultValue: {
+            control: 'text',
+            description: 'Default selected tab value when component first mounts.',
+        },
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    render: args => ({
+        components: { Tabs },
+        setup() {
+            const selectedTab = ref('tab1')
+            return { selectedTab, args }
+        },
+        template: `
+            <Tabs v-model="selectedTab" :options="args.options" :default-value="args.defaultValue">
+                <template #content>
+                    <div min-w-250px>
+                        <div v-if="selectedTab === 'tab1'" class="flex flex-col gap-2">
+                            <h3 body-16-semibold>Tab 1 Content</h3>
+                            <p body-14-regular>This is the content for Tab 1.</p>
+                        </div>
+                        <div v-else-if="selectedTab === 'tab2'" class="flex flex-col gap-2">
+                            <h3 body-16-semibold>Tab 2 Content</h3>
+                            <p body-14-regular>This is the content for Tab 2.</p>
+                        </div>
+                        <div v-else-if="selectedTab === 'tab3'" class="flex flex-col gap-2">
+                            <h3 body-16-semibold>Tab 3 Content</h3>
+                            <p body-14-regular>This is the content for Tab 3.</p>
+                        </div>
+                    </div>
+                </template>
+            </Tabs>
+        `,
+    }),
+    args: {
+        options: [
+            { tab: 'tab1', label: 'Tab 1' },
+            { tab: 'tab2', label: 'Tab 2' },
+            { tab: 'tab3', label: 'Tab 3' },
+        ],
+        defaultValue: 'tab1',
+    },
+}

package/components/tela/tabs/tabs.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type { TabsRootProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+import TelaTabsRoot from './tabs-root.vue'
+import TelaTabsList from './tabs-list.vue'
+import TelaTabsIndicator from './tabs-indicator.vue'
+import TelaTabsTrigger from './tabs-trigger.vue'
+import TelaTabsContent from './tabs-content.vue'
+
+type Option = { tab: string, label: string }
+
+interface Props extends TabsRootProps {
+    options: Option[]
+    defaultValue?: string
+    tabsListClass?: HTMLAttributes['class']
+    tabsTriggerClass?: HTMLAttributes['class']
+    tabsContentClass?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+
+const tabs = computed(() => {
+    if (!props.options || props.options.length === 0) {
+        return []
+    }
+    return props.options.map(option => option.tab)
+})
+
+const selectedTab = defineModel<string>({ required: true })
+const defaultTab = computed(() => {
+    if (props.defaultValue) {
+        return props.defaultValue
+    }
+    if (props.options && props.options.length > 0) {
+        return props.options[0].tab
+    }
+    return ''
+})
+
+function getLabel(tab: string) {
+    if (!props.options) {
+        return ''
+    }
+    return props.options.find(option => option.tab === tab)?.label || ''
+}
+</script>
+
+<template>
+    <TelaTabsRoot v-model="selectedTab" :default-value="defaultTab">
+        <TelaTabsList :class="cn('px-0 gap-3', tabsListClass)">
+            <TelaTabsIndicator />
+            <TelaTabsTrigger v-for="tab in tabs" :key="tab" :value="tab" :class="cn('px-0', tabsTriggerClass)">
+                {{ getLabel(tab) }}
+            </TelaTabsTrigger>
+        </TelaTabsList>
+        <TelaTabsContent :value="selectedTab" :class="cn('pt-4', tabsContentClass)">
+            <slot name="content" />
+        </TelaTabsContent>
+    </TelaTabsRoot>
+</template>

package/components/tela/tags/tags-select.mdx

@@ -0,0 +1,318 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as TagsSelectStories from './tags-select.stories.ts';
+
+<Meta of={TagsSelectStories} />
+
+# TelaTagsSelect
+
+A comprehensive tag management component that combines selection, creation, and editing capabilities in a popover interface. Displays selected tags as overlapping colored dots (up to 3) with a mask effect, and provides a full-featured interface for managing tags with 16 color options.
+
+## Examples
+
+### Default
+
+<Canvas of={TagsSelectStories.Default} />
+
+### Basic Usage
+
+```vue
+<script setup>
+const selectedTags = ref([
+  { id: '1', name: 'Design', color: 'purple' },
+  { id: '2', name: 'Development', color: 'blue' }
+])
+
+const availableTags = ref([
+  { id: '1', name: 'Design', color: 'purple' },
+  { id: '2', name: 'Development', color: 'blue' },
+  { id: '3', name: 'Marketing', color: 'green' }
+])
+</script>
+
+<template>
+  <TelaTagsSelect
+    v-model="selectedTags"
+    :options="availableTags"
+  />
+</template>
+```
+
+### With Custom Labels
+
+```vue
+<TelaTagsSelect
+  v-model="selectedTags"
+  :options="availableTags"
+  create-tag-label="Nova tag"
+  selected-label="selecionadas"
+  new-tag-label="Nova tag"
+  edit-tag-label="Editar tag"
+  define-name-placeholder="Defina um nome"
+  add-new-name-placeholder="Adicionar novo nome"
+  create-button-label="Criar"
+  save-changes-button-label="Salvar alterações"
+/>
+```
+
+### Programmatic Tag Management
+
+```vue
+<script setup>
+const selectedTags = ref([])
+const availableTags = ref([
+  { id: '1', name: 'Work', color: 'blue' },
+  { id: '2', name: 'Personal', color: 'green' },
+  { id: '3', name: 'Urgent', color: 'red' }
+])
+
+function addTag(tag) {
+  selectedTags.value = [...selectedTags.value, tag]
+}
+
+function removeTag(tagId) {
+  selectedTags.value = selectedTags.value.filter(t => t.id !== tagId)
+}
+
+function clearAll() {
+  selectedTags.value = []
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <TelaTagsSelect
+      v-model="selectedTags"
+      :options="availableTags"
+    />
+
+    <div class="flex gap-2">
+      <TelaButton size="sm" @click="clearAll">
+        Clear All
+      </TelaButton>
+      <TelaButton size="sm" variant="secondary" @click="addTag(availableTags[0])">
+        Select First
+      </TelaButton>
+    </div>
+  </div>
+</template>
+```
+
+### Read-Only Display
+
+```vue
+<script setup>
+const tags = ref([
+  { id: '1', name: 'Completed', color: 'green' },
+  { id: '2', name: 'Reviewed', color: 'blue' },
+  { id: '3', name: 'Published', color: 'purple' }
+])
+</script>
+
+<template>
+  <TelaTagsSelect
+    :model-value="tags"
+    :options="tags"
+  />
+</template>
+```
+
+## Props
+
+<ArgTypes />
+
+```typescript
+type Color = 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'purple' | 'pink' | 'rose' | 'red' | 'neutral'
+
+interface Tag {
+  id: string
+  color: Color
+  name: string
+  isSelected?: boolean // Computed internally, don't include when passing tags
+}
+
+type TagsSelectProps = {
+  class?: string
+  labelClass?: string
+  modelValue?: Tag[]
+  options: Tag[]
+  createTagLabel?: string
+  selectedLabel?: string
+  newTagLabel?: string
+  editTagLabel?: string
+  defineNamePlaceholder?: string
+  addNewNamePlaceholder?: string
+  createButtonLabel?: string
+  saveChangesButtonLabel?: string
+}
+```
+
+## Features
+
+### Tag Management Interface
+- **Three Content Views**:
+  1. **New Tag**: Create new tags with name and color selection
+  2. **Existing Tags**: Browse, select, and manage existing tags
+  3. **Edit Tag**: Modify tag name and color
+
+### Visual Feedback
+- **Overlapping Dots**: Shows up to 3 tag colors with a mask effect
+- **Dynamic Label**: Updates based on selection state
+  - "Create tag" when no tags exist
+  - "X tags" when tags exist but none selected
+  - "X selected" when tags are selected
+
+### Tag Creation
+- Name input with enter key support
+- 16 color options in an 8-column grid
+- Real-time color preview
+- Automatic selection upon creation
+- "Create More" option to add multiple tags
+
+### Tag Selection
+- Visual checkbox for each tag
+- Colored dot indicator showing tag color
+- Hover states with edit button
+- Multi-select capability
+- Apply button to confirm selections
+
+### Tag Editing
+- Edit existing tag names
+- Change tag colors
+- Updates all instances of the tag
+- Preserves selection state during edits
+- Cancel option to discard changes
+
+### Animations & Transitions
+- **Popover**: Smooth slide-down/fade-in animation (120ms)
+- **Content Switching**: Slide transitions between views with spring physics
+- **Height Animation**: Smooth height transitions when switching content
+- **Spring Configuration**: Natural bounce-free animations (duration: 500ms)
+
+## Color Options
+
+The component supports 16 different colors:
+
+**Warm Colors:**
+- orange, amber, yellow
+
+**Fresh Colors:**
+- lime, green, emerald
+
+**Cool Colors:**
+- teal, cyan, sky, blue
+
+**Deep Colors:**
+- indigo, purple
+
+**Vibrant Colors:**
+- pink, rose, red
+
+**Neutral:**
+- neutral (gray)
+
+Each color is available in both standard (500 shade) and light (300 shade) variants.
+
+## Behavior
+
+### Tag Merging
+The component intelligently merges `modelValue` and `options` to create a complete list of available tags:
+- Uses tag `id` as the unique identifier
+- Prevents duplicates automatically
+- Maintains selection state across merges
+
+### Selection State
+- Selection is tracked internally using tag IDs
+- Changes are emitted via `update:modelValue` event
+- Supports v-model for two-way binding
+- Selection state persists during editing operations
+
+### Keyboard Support
+- **Enter**: Create new tag or save edited tag
+- Tab navigation through color options
+- Escape to close popover (via Reka UI)
+
+### Dot Display Logic
+1. **With Selected Tags**: Shows first 3 selected tags' colors
+2. **With Available Tags**: Shows first 3 available tags' colors
+3. **No Tags**: Shows placeholder dots (2 neutral + 1 with plus icon)
+
+## Popover States
+
+### Trigger Button
+- Displays overlapping colored dots
+- Shows dynamic label text
+- Hover and open states with background changes
+- Smooth transitions (80ms ease-in-out)
+
+### Content Panel
+- 220px width
+- Shadow and border styling
+- Smooth entry/exit animations
+- Automatic positioning via Reka UI
+- 8px offset from trigger
+
+## Styling
+
+### Dot Mask Effect
+The overlapping dot effect is achieved using CSS mask:
+```css
+.dot-mask:not(:last-child) {
+  mask-image: radial-gradient(circle 6px at right center, transparent 6px, #fff 6px);
+}
+```
+
+### Animation Keyframes
+- **slideDownAndFade**: Entry animation with scale and translate
+- **slideUpAndFade**: Exit animation with scale and translate
+- Transform origin set to popover content origin
+
+## Integration with Form Systems
+
+The component works seamlessly with form libraries:
+
+```vue
+<script setup>
+import { useForm } from 'vee-validate'
+
+const { values } = useForm({
+  initialValues: {
+    tags: []
+  }
+})
+</script>
+
+<template>
+  <Field v-slot="{ value, handleChange }" name="tags">
+    <TelaTagsSelect
+      :model-value="value"
+      :options="availableTags"
+      @update:model-value="handleChange"
+    />
+  </Field>
+</template>
+```
+
+## Accessibility
+
+- Proper popover semantics via Reka UI
+- Keyboard navigation support
+- Focus management on open/close
+- Clear visual feedback for interactive elements
+- Semantic button and form elements
+- Proper ARIA attributes from Reka UI
+
+## Performance Considerations
+
+- Efficient tag merging with Set-based deduplication
+- Computed properties for derived state
+- Reactive refs for optimal reactivity
+- Animation optimizations with GPU-accelerated transforms
+- Lazy content rendering based on selected view
+
+## Best Practices
+
+1. **Always provide unique IDs**: Each tag must have a unique `id` property
+2. **Don't include `isSelected`**: This property is computed internally
+3. **Use v-model**: Prefer v-model over manual event handling
+4. **Provide options**: Always pass available tags via the `options` prop
+5. **Localize labels**: Use the label props for internationalization support