@meistrari/tela-build 1.0.0

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

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { TooltipContent, TooltipPortal, useForwardPropsEmits } from 'reka-ui'
+import type { TooltipContentEmits, TooltipContentProps } from 'reka-ui'
+import { computed } from 'vue'
+import type { HTMLAttributes } from 'vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {
+    sideOffset: 4,
+})
+
+const emits = defineEmits<TooltipContentEmits & {
+    click: [event: Event]
+}>()
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props
+
+    return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+    <TooltipPortal>
+        <!-- Using z-1000 here because tela select menu is using z-999 -->
+        <TooltipContent
+            v-bind="{ ...forwarded, ...$attrs }"
+            :style="{ pointerEvents: 'auto' }"
+            z-1000 overflow-hidden rounded-12px
+            py-7px px-12px
+            body-12-semibold text-white
+            shadow-flying
+            class="bg-[#030C16F0]"
+            :class="props.class"
+            @click="$emit('click', $event)"
+        >
+            <slot />
+        </TooltipContent>
+    </TooltipPortal>
+</template>

package/components/tela/tooltip/tooltip-provider.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { TooltipProvider } from 'reka-ui'
+import type { TooltipProviderProps } from 'reka-ui'
+
+const props = defineProps<TooltipProviderProps>()
+</script>
+
+<template>
+    <TooltipProvider v-bind="props">
+        <slot />
+    </TooltipProvider>
+</template>

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

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

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

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { TooltipTrigger } from 'reka-ui'
+import type { TooltipTriggerProps } from 'reka-ui'
+
+const props = defineProps<TooltipTriggerProps>()
+</script>
+
+<template>
+    <TooltipTrigger v-bind="props">
+        <slot />
+    </TooltipTrigger>
+</template>

package/components/tela/tooltip/tooltip.mdx

@@ -0,0 +1,196 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as TooltipStories from './tooltip.stories.ts';
+
+<Meta of={TooltipStories} />
+
+# TelaTooltip
+
+A tooltip component that displays helpful information when hovering over elements. Supports single-line and multiline variants, custom positioning on all sides, and custom content via slots. Useful for providing contextual information without cluttering the UI.
+
+## Examples
+
+### Simple Tooltip
+
+<Canvas of={TooltipStories.Simple} />
+
+### Multiline Tooltip
+
+<Canvas of={TooltipStories.Multiline} />
+
+### Different Positions
+
+<Canvas of={TooltipStories.AllSides} />
+
+### With Custom Content
+
+<Canvas of={TooltipStories.WithCustomContent} />
+
+### With Positioning
+
+<Canvas of={TooltipStories.WithPositioning} />
+
+### Simple Tooltip Code
+
+```vue
+<TelaTooltip content="Helpful information">
+  <TelaButton>Hover me</TelaButton>
+</TelaTooltip>
+```
+
+### Multiline Tooltip Code
+
+```vue
+<TelaTooltip
+  variant="multiline"
+  title="Important Notice"
+  description="This action requires approval before proceeding"
+  side="top"
+>
+  <TelaButton disabled variant="danger">
+    Disabled Action
+  </TelaButton>
+</TelaTooltip>
+```
+
+### Different Positions Code
+
+```vue
+<!-- Top -->
+<TelaTooltip content="Top tooltip" side="top">
+  <TelaButton>Top</TelaButton>
+</TelaTooltip>
+
+<!-- Right -->
+<TelaTooltip content="Right tooltip" side="right">
+  <TelaButton>Right</TelaButton>
+</TelaTooltip>
+
+<!-- Bottom -->
+<TelaTooltip content="Bottom tooltip" side="bottom">
+  <TelaButton>Bottom</TelaButton>
+</TelaTooltip>
+
+<!-- Left -->
+<TelaTooltip content="Left tooltip" side="left">
+  <TelaButton>Left</TelaButton>
+</TelaTooltip>
+```
+
+### With Custom Content Code
+
+```vue
+<TelaTooltip variant="multiline">
+  <TelaButton>Custom Content</TelaButton>
+  <template #content>
+    <div class="flex items-center gap-2">
+      <TelaIcon name="i-ph-info" />
+      <span>Custom tooltip with icon</span>
+    </div>
+  </template>
+</TelaTooltip>
+```
+
+```vue
+<TelaTooltip
+  variant="multiline"
+  title="Custom Position"
+  description="Tooltip with custom align and arrow offsets"
+  side="top"
+  align="start"
+  :align-offset="-32"
+  :arrow-offset="-38"
+>
+  <TelaButton>Positioned</TelaButton>
+</TelaTooltip>
+```
+
+### With Delay
+
+```vue
+<TelaTooltip
+  content="Appears after 500ms"
+  :delay-duration="500"
+>
+  <TelaButton>Hover (with delay)</TelaButton>
+</TelaTooltip>
+```
+
+### Disabled Tooltip
+
+```vue
+<TelaTooltip
+  content="This won't show"
+  disabled
+>
+  <TelaButton>No Tooltip</TelaButton>
+</TelaTooltip>
+```
+
+## Props
+
+<ArgTypes />
+
+```typescript
+type TooltipVariant = 'single' | 'multiline'
+type TooltipSide = 'top' | 'right' | 'bottom' | 'left'
+type TooltipAlign = 'start' | 'center' | 'end'
+
+type TooltipProps = {
+  content?: string
+  align?: TooltipAlign
+  side?: TooltipSide
+  variant?: TooltipVariant
+  title?: string
+  description?: string
+  alignOffset?: number
+  arrowOffset?: number
+  delayDuration?: number
+  disabled?: boolean
+}
+```
+
+## Slots
+
+- `default` - Trigger element that shows tooltip on hover
+- `content` - Custom tooltip content (for multiline variant)
+
+## Features
+
+- **Two Variants**: Single-line for brief text, multiline for title + description
+- **Flexible Positioning**: All sides (top, right, bottom, left)
+- **Custom Alignment**: Start, center, or end alignment
+- **Delay Control**: Configurable delay before showing
+- **Custom Content**: Use slots for rich content
+- **Arrow Indicator**: Visual arrow pointing to trigger
+- **Offset Control**: Fine-tune position and arrow placement
+- **Accessible**: Built on reka-ui with proper ARIA
+
+## Variants
+
+### Single
+
+- One line of text
+- Simple and compact
+- For brief hints and labels
+
+### Multiline
+
+- Title and description
+- More detailed information
+- For complex explanations
+
+## Best Practices
+
+1. **Keep Content Brief**: Tooltips should be concise
+2. **Don't Repeat**: Avoid duplicating visible text
+3. **Use for Context**: Provide helpful, additional information
+4. **Consider Touch Devices**: Tooltips don't work well on touch
+5. **Position Wisely**: Ensure tooltip doesn't cover important content
+
+## Accessibility
+
+- Built on reka-ui primitives
+- Proper ARIA attributes (role="tooltip")
+- Keyboard navigation support (focus trigger shows tooltip)
+- Delay helps prevent accidental triggers
+- Screen reader friendly

package/components/tela/tooltip/tooltip.stories.ts

@@ -0,0 +1,200 @@
+import type { Meta, StoryObj } from '@storybook-vue/vue3'
+import { h } from 'vue'
+
+import Tooltip from './tooltip.vue'
+import Button from '../button/button.vue'
+
+const meta: Meta<typeof Tooltip> = {
+    title: 'Core/Tooltip',
+    component: Tooltip,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A tooltip component that displays helpful information when hovering over elements. Supports single-line and multiline variants, custom positioning on all sides, and custom content via slots. Useful for providing contextual information without cluttering the UI.',
+            },
+        },
+    },
+    argTypes: {
+        content: {
+            control: 'text',
+            description: 'Text content to display in the tooltip. Used for single-line tooltips. For multiline tooltips, use title and description props instead.',
+        },
+        align: {
+            control: 'select',
+            options: ['start', 'center', 'end'],
+            description: 'Alignment of the tooltip relative to the trigger element.',
+        },
+        side: {
+            control: 'select',
+            options: ['top', 'right', 'bottom', 'left'],
+            description: 'Side of the trigger element where the tooltip should appear.',
+        },
+        variant: {
+            control: 'select',
+            options: ['single', 'multiline'],
+            description: 'Visual variant of the tooltip. Single displays one line of text, multiline supports title and description.',
+        },
+        title: {
+            control: 'text',
+            description: 'Title text for multiline tooltips. Displayed prominently at the top.',
+        },
+        description: {
+            control: 'text',
+            description: 'Description text for multiline tooltips. Displayed below the title.',
+        },
+        alignOffset: {
+            control: 'number',
+            description: 'Offset in pixels to adjust the tooltip alignment position.',
+        },
+        arrowOffset: {
+            control: 'number',
+            description: 'Offset in pixels to adjust the tooltip arrow position.',
+        },
+        delayDuration: {
+            control: 'number',
+            description: 'Delay in milliseconds before showing the tooltip after hover.',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disable the tooltip, preventing it from showing.',
+        },
+    },
+    args: {
+        content: 'Text when hovered',
+        align: 'center',
+        side: 'bottom',
+        variant: 'single',
+    } as any,
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Simple: Story = {
+    render: args => ({
+        components: { Tooltip, Button },
+        setup() {
+            return { args }
+        },
+        template: `
+          <div style="width: 100%; height: 300px; display: flex; align-items: center; justify-content: center;">
+            <Tooltip v-bind="args">
+                <Button>
+                    Hover me
+                </Button>
+            </Tooltip>
+          </div>`,
+    }),
+}
+
+export const Multiline: Story = {
+    args: {
+        variant: 'multiline',
+        title: 'Some tasks are pending review',
+        description: 'You need to approve all selected tasks before downloading them',
+        side: 'top',
+        align: 'start',
+    },
+    render: args => ({
+        components: { Tooltip },
+        setup() {
+            return { args }
+        },
+        template: `
+          <div style="width: 100%; height: 300px; display: flex; align-items: center; justify-content: center;">
+            <Tooltip v-bind="args">
+                <button style="padding: 8px 16px; background: #dc3545; color: white; border: none; border-radius: 4px; cursor: pointer;">
+                    Download (Disabled)
+                </button>
+            </Tooltip>
+          </div>`,
+    }),
+}
+
+export const WithPositioning: Story = {
+    args: {
+        variant: 'multiline',
+        title: 'Positioned Tooltip',
+        description: 'This tooltip has custom positioning with arrow offset',
+        side: 'top',
+        align: 'start',
+        alignOffset: -32,
+        arrowOffset: -38,
+    },
+    render: args => ({
+        components: { Tooltip },
+        setup() {
+            return { args }
+        },
+        template: `
+          <div style="width: 100%; height: 300px; display: flex; align-items: center; justify-content: center;">
+            <Tooltip v-bind="args">
+                <button style="padding: 8px 16px; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer;">
+                    Positioned Tooltip
+                </button>
+            </Tooltip>
+          </div>`,
+    }),
+}
+
+export const AllSides: Story = {
+    render: () => ({
+        components: { Tooltip },
+        template: `
+          <div style="width: 100%; height: 400px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; justify-items: center;">
+            <Tooltip content="Top tooltip" side="top">
+                <button style="padding: 8px 16px; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer;">
+                    Top
+                </button>
+            </Tooltip>
+            
+            <Tooltip content="Right tooltip" side="right">
+                <button style="padding: 8px 16px; background: #ffc107; color: black; border: none; border-radius: 4px; cursor: pointer;">
+                    Right
+                </button>
+            </Tooltip>
+            
+            <Tooltip content="Bottom tooltip" side="bottom">
+                <button style="padding: 8px 16px; background: #17a2b8; color: white; border: none; border-radius: 4px; cursor: pointer;">
+                    Bottom
+                </button>
+            </Tooltip>
+            
+            <Tooltip content="Left tooltip" side="left">
+                <button style="padding: 8px 16px; background: #6f42c1; color: white; border: none; border-radius: 4px; cursor: pointer;">
+                    Left
+                </button>
+            </Tooltip>
+          </div>`,
+    }),
+}
+
+export const WithCustomContent: Story = {
+    render: () => ({
+        components: { Tooltip },
+        setup() {
+            return { h }
+        },
+        template: `
+          <div style="width: 100%; height: 300px; display: flex; align-items: center; justify-content: center;">
+            <Tooltip variant="multiline" side="top">
+                <button style="padding: 8px 16px; background: #fd7e14; color: white; border: none; border-radius: 4px; cursor: pointer;">
+                    Custom Content
+                </button>
+                <template #content>
+                    <div>
+                        <div style="font-weight: 600; color: #fff; margin-bottom: 4px;">
+                            🚀 Custom Tooltip
+                        </div>
+                        <div style="color: #DFE3E7; font-size: 12px;">
+                            This tooltip has <strong>custom</strong> content with 
+                            <span style="color: #ffc107;">colored text</span> and emojis! ✨
+                        </div>
+                    </div>
+                </template>
+            </Tooltip>
+          </div>`,
+    }),
+}

package/components/tela/tooltip/tooltip.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { TooltipArrow } from 'reka-ui'
+import TelaTooltipProvider from './tooltip-provider.vue'
+import TelaTooltipRoot from './tooltip-root.vue'
+import TelaTooltipTrigger from './tooltip-trigger.vue'
+import TelaTooltipContent from './tooltip-content.vue'
+import { computed } from 'vue'
+import { cn } from '@/lib/utils'
+
+export type TooltipProps = {
+    content?: string
+    align?: 'start' | 'center' | 'end'
+    side?: 'top' | 'right' | 'bottom' | 'left'
+    contentClass?: string
+    disabled?: boolean
+    delayDuration?: number
+    open?: boolean
+    alignOffset?: number
+    arrowOffset?: number
+    variant?: 'single' | 'multiline'
+    title?: string
+    description?: string
+    triggerClass?: string
+}
+
+const props = withDefaults(defineProps<TooltipProps>(), {
+    open: undefined,
+    variant: 'single',
+})
+
+defineEmits<{
+    (e: 'clickContent', event: Event): void
+}>()
+
+const tooltipRootProps = computed(() => {
+    const rootProps: any = {}
+
+    if (props.open !== undefined) {
+        rootProps.open = props.open
+    }
+
+    return rootProps
+})
+
+const variantClasses = computed(() => {
+    if (props.variant === 'multiline') {
+        return 'w-full min-w-255px max-w-320px pt-12px pb-16px px-16px gap-12px flex flex-col text-left max-h-96 overflow-y-auto'
+    }
+    return ''
+})
+</script>
+
+<template>
+    <TelaTooltipProvider :disabled="disabled" :delay-duration="delayDuration">
+        <TelaTooltipRoot v-bind="tooltipRootProps">
+            <TelaTooltipTrigger :class="triggerClass" :tabindex="-1">
+                <slot />
+            </TelaTooltipTrigger>
+            <TelaTooltipContent
+                :align="align"
+                :side="side"
+                :align-offset="props.alignOffset"
+                :class="cn(contentClass, variantClasses)"
+                @click="$emit('clickContent', $event)"
+            >
+                <slot name="content">
+                    <div v-if="variant === 'multiline' && (title || description)">
+                        <div
+                            v-if="title"
+                            class="text-white font-inter text-14px leading-16px not-italic font-580 tracking--0.14px"
+                        >
+                            {{ title }}
+                        </div>
+                        <div
+                            v-if="description"
+                            class="body-12-regular text-gray-200 mt-[4px] break-words whitespace-pre-line w-full"
+                        >
+                            {{ description }}
+                        </div>
+                    </div>
+                    <template v-else>
+                        {{ content }}
+                    </template>
+                </slot>
+                <TooltipArrow
+                    :style="props.arrowOffset ? { transform: `translateX(${props.arrowOffset}px)` } : {}"
+                />
+            </TelaTooltipContent>
+        </TelaTooltipRoot>
+    </TelaTooltipProvider>
+</template>

package/components/tela/tooltip-group/tooltip-group-trigger.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { TooltipArrow } from 'reka-ui'
+import TelaTooltipRoot from '../tooltip/tooltip-root.vue'
+import TelaTooltipTrigger from '../tooltip/tooltip-trigger.vue'
+import TelaTooltipContent from '../tooltip/tooltip-content.vue'
+import { computed } from 'vue'
+import { cn } from '@/lib/utils'
+
+export type TooltipProps = {
+    content?: string
+    align?: 'start' | 'center' | 'end'
+    side?: 'top' | 'right' | 'bottom' | 'left'
+    contentClass?: string
+    disabled?: boolean
+    delayDuration?: number
+    open?: boolean
+    alignOffset?: number
+    arrowOffset?: number
+    variant?: 'single' | 'multiline'
+    title?: string
+    description?: string
+}
+
+const props = withDefaults(defineProps<TooltipProps>(), {
+    open: undefined,
+    variant: 'single',
+})
+
+defineEmits<{
+    (e: 'clickContent', event: Event): void
+}>()
+
+const tooltipRootProps = computed(() => {
+    const rootProps: any = {}
+
+    if (props.open !== undefined) {
+        rootProps.open = props.open
+    }
+
+    return rootProps
+})
+
+const variantClasses = computed(() => {
+    if (props.variant === 'multiline') {
+        return 'max-w-280px text-left'
+    }
+    return ''
+})
+</script>
+
+<template>
+    <TelaTooltipRoot v-bind="tooltipRootProps">
+        <TelaTooltipTrigger>
+            <slot />
+        </TelaTooltipTrigger>
+        <TelaTooltipContent
+            :align="align"
+            :side="side"
+            :align-offset="props.alignOffset"
+            :class="cn(contentClass, variantClasses)"
+            @click="$emit('clickContent', $event)"
+        >
+            <slot name="content">
+                <div v-if="variant === 'multiline' && (title || description)">
+                    <div v-if="title" class="body-14-semibold text-white">
+                        {{ title }}
+                    </div>
+                    <div
+                        v-if="description"
+                        class="text-[#DFE3E7] mt-[2px]"
+                        :style="{
+                            fontFamily: 'Inter, sans-serif',
+                            fontWeight: 400,
+                            fontStyle: 'normal',
+                            fontSize: '12px',
+                            lineHeight: '16px',
+                            letterSpacing: '0%',
+                        }"
+                    >
+                        {{ description }}
+                    </div>
+                </div>
+                <template v-else>
+                    {{ content }}
+                </template>
+            </slot>
+            <TooltipArrow
+                :style="props.arrowOffset ? { transform: `translateX(${props.arrowOffset}px)` } : {}"
+            />
+        </TelaTooltipContent>
+    </TelaTooltipRoot>
+</template>