@meistrari/tela-build 1.0.0

package/components/tela/tags/tags.mdx

@@ -0,0 +1,151 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as TagsStories from './tags.stories.ts';
+
+<Meta of={TagsStories} />
+
+# TelaTags
+
+A tag component used for categorization or labeling. Helps identify or group items by topic, type, or property. Supports custom dot colors, count badges, and closeable functionality with smooth animations.
+
+## Examples
+
+### Default
+
+<Canvas of={TagsStories.Default} />
+
+### With Count Badge
+
+<Canvas of={TagsStories.WithCount} />
+
+### With Custom Dot Color
+
+<Canvas of={TagsStories.WithCustomDotColor} />
+
+### Closeable Tags
+
+<Canvas of={TagsStories.WithCloseable} />
+
+### Basic Usage
+
+```vue
+<TelaTags dot-color="green">
+  Finances
+</TelaTags>
+```
+
+### With Count Badge Code
+
+```vue
+<TelaTags dot-color="purple" :count="5">
+  Technology
+</TelaTags>
+```
+
+### Closeable Tags Code
+
+```vue
+<script setup>
+const isVisible = ref(true)
+</script>
+
+<template>
+  <TelaTags v-model="isVisible" dot-color="blue">
+    Health
+  </TelaTags>
+</template>
+```
+
+### Multiple Tags with Different Colors
+
+```vue
+<div class="flex gap-2">
+  <TelaTags dot-color="orange">Design</TelaTags>
+  <TelaTags dot-color="purple">Development</TelaTags>
+  <TelaTags dot-color="green">Marketing</TelaTags>
+  <TelaTags dot-color="red" :count="3">Urgent</TelaTags>
+</div>
+```
+
+### Light Color Variant
+
+```vue
+<TelaTags dot-color="blue" dot-light-color>
+  Light Blue
+</TelaTags>
+```
+
+## Props
+
+<ArgTypes />
+
+```typescript
+type Color = 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'purple' | 'pink' | 'rose' | 'red' | 'neutral'
+
+type TagsProps = {
+  class?: string
+  textClass?: string
+  dotColor?: Color
+  dotLightColor?: boolean
+  count?: number
+  modelValue?: boolean
+}
+```
+
+## Slots
+
+The Tags component supports one slot:
+
+- `default` - Main tag content/text
+
+## Features
+
+- **16 Color Options**: Support for orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, purple, pink, rose, red, and neutral colors
+- **Light Color Variants**: Each color has a lighter variant (300 shade) available via `dotLightColor` prop
+- **Count Badges**: Optional numerical badge display next to tag text
+- **Closeable Functionality**: When `v-model` is used, the tag becomes closeable with smooth hover animations
+- **Custom Styling**: Accepts custom classes for both the container and text content
+- **Automatic Visibility Management**: Handles show/hide animations when closed
+
+## Color Options
+
+The component supports 16 different colors for the dot indicator:
+
+- **Warm**: orange, amber, yellow
+- **Fresh**: lime, green, emerald
+- **Cool**: teal, cyan, sky, blue
+- **Deep**: indigo, purple
+- **Vibrant**: pink, rose, red
+- **Neutral**: neutral (gray)
+
+Each color has both a standard (500 shade) and light (300 shade) variant.
+
+## Behavior
+
+### Non-Closeable Mode (Default)
+When used without `v-model`, the tag is a static display element:
+- Shows the dot indicator and text content
+- Optionally displays a count badge
+- No interaction or close functionality
+
+### Closeable Mode (with v-model)
+When `v-model` is provided:
+- Tag becomes interactive with hover effects
+- Close icon (X) appears on hover with smooth animation
+- Clicking the close icon hides the tag and updates the model value
+- The tag remains hidden until the model value is set back to `true`
+
+## Styling
+
+The tag uses a consistent design system:
+- **Container**: Rounded corners (8px), subtle border, background color
+- **Dot**: 8px circular indicator with customizable color
+- **Text**: Medium weight, 14px font size, primary text color
+- **Badge**: Filled variant with consistent spacing
+- **Close Button**: Smooth scale and opacity animations on hover/exit
+
+## Accessibility
+
+- Semantic HTML structure
+- Proper button semantics for closeable tags
+- Clear visual feedback on hover states
+- Smooth animations for better UX

package/components/tela/tags/tags.stories.ts

@@ -0,0 +1,118 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+import Tags from './tags.vue'
+import TelaButton from '../button/button.vue'
+
+const meta: Meta<typeof Tags> = {
+    title: 'Core/Tags',
+    component: Tags,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'Used for categorization or labeling. Helps identify or group items by topic, type, or property. Supports custom dot colors and count badges. When `v-model` is used, the tag becomes closeable with a hover animation.',
+            },
+        },
+    },
+    argTypes: {
+        class: {
+            control: 'text',
+            description: 'Custom CSS classes for the tag container.',
+        },
+        textClass: {
+            control: 'text',
+            description: 'Custom CSS classes for the text content.',
+        },
+        dotColor: {
+            control: 'text',
+            description: 'Color class for the dot indicator (e.g., "green", "purple", "red", "neutral"). Uses UnoCSS color classes.',
+        },
+        dotLightColor: {
+            control: 'boolean',
+            description: 'Whether to use the light color variant for the dot indicator.',
+        },
+        count: {
+            control: 'number',
+            description: 'Optional count badge to display next to the tag text.',
+        },
+        modelValue: {
+            control: 'boolean',
+            description: 'Enables closeable functionality when set to `true`. Use `v-model` for two-way binding. When provided, the tag renders as a button and shows a close icon on hover.',
+        },
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Tags>
+
+export const Default: Story = {
+    render: () => ({
+        components: { Tags },
+        setup() {
+            return {}
+        },
+        template: `<Tags>Finances</Tags>`,
+    }),
+}
+
+export const WithCount: Story = {
+    args: {
+        count: 2,
+    },
+    render: () => ({
+        components: { Tags },
+        setup() {
+            return {}
+        },
+        template: `<Tags :count="2">Finances</Tags>`,
+    }),
+}
+
+export const WithCustomDotColor: Story = {
+    args: {
+        dotColor: 'purple',
+        count: 3,
+    },
+    render: () => ({
+        components: { Tags },
+        setup() {
+            return {}
+        },
+        template: `<Tags dot-color="purple" :count="3">Children</Tags>`,
+    }),
+}
+
+export const WithCloseable: Story = {
+    render: () => ({
+        components: { Tags, TelaButton },
+        setup() {
+            const isFirstTagVisible = ref(true)
+            const isSecondTagVisible = ref(true)
+            const isThirdTagVisible = ref(true)
+
+            function reset() {
+                isFirstTagVisible.value = true
+                isSecondTagVisible.value = true
+                isThirdTagVisible.value = true
+            }
+
+            return {
+                isFirstTagVisible,
+                isSecondTagVisible,
+                isThirdTagVisible,
+                reset,
+            }
+        },
+        template: `
+            <div flex="~ col" gap-12px>
+                <div flex="~" gap-6px w-300px>
+                    <Tags v-model="isFirstTagVisible" dot-color="purple">Technology</Tags>
+                    <Tags v-model="isSecondTagVisible" dot-color="red" :count="1">Finances</Tags>
+                    <Tags v-model="isThirdTagVisible" dot-color="blue">Health</Tags>
+                </div>
+                <TelaButton size="sm" @click="reset" w-fit mx-auto>Reset</TelaButton>
+            </div>
+        `,
+    }),
+}

package/components/tela/tags/tags.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+type Color = 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'purple' | 'pink' | 'rose' | 'red' | 'neutral'
+
+const props = withDefaults(defineProps<{
+    class?: HTMLAttributes['class']
+    textClass?: HTMLAttributes['class']
+    dotColor?: Color
+    dotLightColor?: boolean
+    count?: number
+    modelValue?: boolean
+}>(), {
+    dotColor: 'green',
+    dotLightColor: false,
+    modelValue: false,
+})
+
+const emit = defineEmits<{
+    'update:modelValue': [value: boolean]
+}>()
+
+const isHovered = ref(false)
+const isVisible = ref(true)
+
+const hasModelValue = computed(() => props.modelValue)
+
+function resolveColor(color: Color, lightColor = false) {
+    const colorMap: Record<Color, string> = {
+        orange: lightColor ? 'bg-orange-300' : 'bg-orange-500',
+        amber: lightColor ? 'bg-amber-300' : 'bg-amber-500',
+        yellow: lightColor ? 'bg-yellow-300' : 'bg-yellow-500',
+        lime: lightColor ? 'bg-lime-300' : 'bg-lime-500',
+        green: lightColor ? 'bg-green-300' : 'bg-green-500',
+        emerald: lightColor ? 'bg-emerald-300' : 'bg-emerald-500',
+        teal: lightColor ? 'bg-teal-300' : 'bg-teal-500',
+        cyan: lightColor ? 'bg-cyan-300' : 'bg-cyan-500',
+        sky: lightColor ? 'bg-sky-300' : 'bg-sky-500',
+        blue: lightColor ? 'bg-blue-300' : 'bg-blue-500',
+        indigo: lightColor ? 'bg-indigo-300' : 'bg-indigo-500',
+        purple: lightColor ? 'bg-purple-300' : 'bg-purple-500',
+        pink: lightColor ? 'bg-pink-300' : 'bg-pink-500',
+        rose: lightColor ? 'bg-rose-300' : 'bg-rose-500',
+        red: lightColor ? 'bg-red-300' : 'bg-red-500',
+        neutral: lightColor ? 'bg-neutral-300' : 'bg-neutral-500',
+    }
+
+    if (lightColor && !colorMap[color]) {
+        const colorWith300 = color.replace(/\d+$/, '300')
+        return `bg-${colorWith300}`
+    }
+
+    return colorMap[color] || `bg-${color}`
+}
+
+watch(() => props.modelValue, (newValue) => {
+    if (newValue) {
+        isVisible.value = true
+    }
+})
+
+function handleClose() {
+    if (!hasModelValue.value)
+        return
+
+    isVisible.value = false
+    isHovered.value = false
+
+    emit('update:modelValue', false)
+}
+</script>
+
+<template>
+    <div
+        v-if="isVisible"
+        :class="cn(
+            'inline-flex w-fit items-center pl-[8px] pr-[10px] py-[3px] bg-background border-[0.5px] border-border-strong rounded-[8px] select-none transition-all duration-150',
+            ((isHovered && hasModelValue) || count) && 'pr-[6px]',
+            props.class,
+        )"
+        @mouseenter="isHovered = true"
+        @mouseleave="isHovered = false"
+    >
+        <div class="relative z-[1] flex items-center gap-[6px] bg-[inherit]">
+            <div :class="cn('w-[8px] h-[8px] rounded-full', resolveColor(dotColor, dotLightColor))" />
+            <span :class="cn('body-14-medium text-text-primary', textClass)">
+                <slot />
+            </span>
+        </div>
+        <div class="flex items-center">
+            <TelaBadge v-if="count" variant="filled" class="relative z-[1] ml-[6px]">
+                {{ count }}
+            </TelaBadge>
+            <AnimatePresence v-if="hasModelValue">
+                <Motion
+                    v-if="isHovered"
+                    as="button"
+                    class="ml-[4px]"
+                    :initial="{ width: 0, x: -20, scale: 0, opacity: 0 }"
+                    :animate="{ width: 'auto', x: 0, scale: 1, opacity: 1 }"
+                    :exit="{ width: 0, x: -20, scale: 0, opacity: 0 }"
+                    :transition="{ duration: 0.15, ease: 'easeOut' }"
+                    @click="handleClose"
+                >
+                    <div class="p-[2px] hover:bg-background-lowered rounded-[5px]">
+                        <TelaIcon name="i-ph-x-bold" size="12px" color="text-secondary" />
+                    </div>
+                </Motion>
+            </AnimatePresence>
+        </div>
+    </div>
+</template>

package/components/tela/textarea/textarea.mdx

@@ -0,0 +1,102 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as TextareaStories from './textarea.stories.ts';
+
+<Meta of={TextareaStories} />
+
+# TelaTextarea
+
+A simple textarea component for multi-line text input. Supports v-model binding, default values, and can be styled with custom classes. Perfect for capturing longer text content like messages, descriptions, or comments.
+
+## Examples
+
+### Default
+
+<Canvas of={TextareaStories.Default} />
+
+### With Default Value
+
+<Canvas of={TextareaStories.WithDefaultValue} />
+
+### Basic Usage
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const message = ref('')
+</script>
+
+<template>
+  <TelaTextarea
+    v-model="message"
+  />
+</template>
+```
+
+```vue
+<TelaTextarea
+  default-value="This is the default content"
+/>
+```
+
+### Custom Styling
+
+```vue
+<TelaTextarea
+  v-model="content"
+  class="h-200px border-blue-400"
+/>
+```
+
+### Multi-line Content
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const poem = ref(`In the quiet of the night,
+Stars above shining bright,
+Whispers of the moonlight,
+Guide my dreams till morning light.`)
+</script>
+
+<template>
+  <TelaTextarea v-model="poem" />
+</template>
+```
+
+## Props
+
+<ArgTypes />
+
+```typescript
+type TextareaProps = {
+  class?: string
+  defaultValue?: string | number
+  modelValue?: string | number
+}
+```
+
+## Features
+
+- **Two-way Binding**: Full v-model support using VueUse's useVModel
+- **Default Value**: Set initial content without v-model
+- **Resizable**: Non-resizable by default (resize-none), but can be overridden with classes
+- **Custom Styling**: Accepts custom classes for flexible styling
+- **Focus States**: Proper focus ring and border transitions
+- **Disabled Support**: Standard HTML textarea disabled attribute
+
+## Default Styling
+
+- **Height**: 128px (adjustable via classes)
+- **Border**: 0.5px gray border with rounded corners (10px)
+- **Font**: 16px size, -0.01em tracking, 24px line height
+- **Colors**: White background, gray text, placeholder in gray-400
+- **Focus**: Gray-400 border with gray-100 ring
+
+## Accessibility
+
+- Standard textarea element with proper semantics
+- Placeholder text for context
+- Focus visible styles for keyboard navigation
+- Disabled state support

package/components/tela/textarea/textarea.stories.ts

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook-vue/vue3'
+import { fn } from '@storybook/test'
+import Textarea from './textarea.vue'
+
+const meta: Meta<typeof Textarea> = {
+    title: 'Core/Textarea',
+    component: Textarea,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A simple textarea component for multi-line text input. Supports v-model binding, default values, and can be styled with custom classes. Perfect for capturing longer text content like messages, descriptions, or comments.',
+            },
+        },
+    },
+    argTypes: {
+        modelValue: {
+            control: 'text',
+            description: 'The v-model binding value. Supports two-way binding using VueUse\'s useVModel.',
+        },
+        defaultValue: {
+            control: 'text',
+            description: 'Initial content for the textarea. Used when v-model is not provided.',
+        },
+        class: {
+            control: 'text',
+            description: 'Additional CSS classes to apply to the textarea element. Can be used to customize height, border, colors, and other styles.',
+        },
+    },
+    args: {
+        'onUpdate:modelValue': fn(),
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    render: () => ({
+        components: { Textarea },
+        template: '<Textarea />',
+    }),
+}
+
+export const WithDefaultValue: Story = {
+    args: {
+        defaultValue: 'This is the default content that appears when the textarea is first rendered.',
+    },
+}

package/components/tela/textarea/textarea.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+    class?: HTMLAttributes['class']
+    defaultValue?: string | number
+    modelValue?: string | number
+}>()
+
+const emits = defineEmits<{
+    (e: 'update:modelValue', payload: string | number): void
+}>()
+
+const internalValue = ref(props.defaultValue ?? props.modelValue ?? '')
+
+const currentValue = computed({
+    get: () => props.modelValue !== undefined ? props.modelValue : internalValue.value,
+    set: (value) => {
+        internalValue.value = value
+        emits('update:modelValue', value)
+    },
+})
+</script>
+
+<template>
+    <textarea
+        v-model="currentValue"
+        :class="cn(
+            'flex h-128px resize-none w-full rounded-10px border-[0.5px] border-gray-300 bg-white-1000 px-5 py-4 text-16px tracking--0.01em leading-24px text-gray-900',
+            'placeholder:text-gray-400 focus-visible:outline-none focus-within-b-gray-400 focus-within-ring-2 focus-within-ring-gray-100 disabled:cursor-not-allowed disabled:opacity-50',
+            props.class,
+        )"
+    />
+</template>

package/components/tela/toggle-group.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { ToggleGroupItem, ToggleGroupRoot } from 'radix-vue'
+
+const props = defineProps<{
+    modelValue: unknown
+    readOnly?: boolean
+    size?: 'sm' | 'md'
+    options: ({
+        label: string
+        value: unknown
+        icon?: string
+    } & Record<string, any>)[]
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const currentValue = ref()
+watch(() => props.modelValue, newValue => currentValue.value = String(newValue), { immediate: true })
+
+const sizeStyles = computed(() => {
+    switch (props.size) {
+        case 'sm':
+            return 'text-11px py-3px px-8px'
+        case 'md':
+        default:
+            return 'text-11px leading-14px py-8px px-12px'
+    }
+})
+
+function onUpdateValue(newValue: string) {
+    if (props.readOnly)
+        return
+
+    if (newValue) {
+        currentValue.value = newValue
+        emit('update:modelValue', newValue)
+    }
+}
+</script>
+
+<template>
+    <ToggleGroupRoot
+        :model-value="currentValue"
+        type="single"
+        rounded="8.5px"
+        flex-inline
+        font-semibold
+        h-30px
+        :class="[
+            readOnly && '!op-50',
+        ]"
+        class="bg-gray-300"
+        :disabled="readOnly"
+        @update:model-value="(val) => onUpdateValue(val as string)"
+    >
+        <ToggleGroupItem
+            v-for="option in options"
+            :key="String(option.value)"
+            :value="String(option.value)"
+            rounded="8.5px"
+            py-8px
+            px-12px
+            b-0.5px b-gray-300
+            flex
+            items-center
+            justify-center
+            body-12-medium
+            text-gray-700
+            grow
+            :class="[
+                sizeStyles,
+                currentValue === String(option.value) && 'bg-white subtle-shadow text-gray-800',
+                !readOnly && currentValue !== String(option.value) && 'hover:white-800 hover:text-gray-700 cursor-pointer',
+                readOnly && 'cursor-not-allowed',
+            ]"
+            class="group"
+            outline-gray-300
+            transition ease
+        >
+            <div v-if="$slots.option">
+                <slot name="option" :option="option" />
+            </div>
+            <div v-else flex gap-4px items-center justify-center>
+                <TelaIcon v-if="option.icon" :name="option.icon" size="sm" />
+                <span>
+                    {{ option.label }}
+                </span>
+            </div>
+        </ToggleGroupItem>
+    </ToggleGroupRoot>
+</template>