@meistrari/tela-build 1.0.0

package/components/tela/hover-card/hover-card.mdx

@@ -0,0 +1,221 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as HoverCardStories from './hover-card.stories.ts';
+
+<Meta of={HoverCardStories} />
+
+# TelaHoverCard
+
+A hover card component that displays content in a floating panel when hovering over a trigger element. Similar to tooltips but supports richer content. Useful for showing previews, user profiles, or additional information on hover.
+
+## Examples
+
+### With Custom Content
+
+<Canvas of={HoverCardStories.WithCustomContent} />
+
+### Basic Usage
+
+```vue
+<TelaHoverCard>
+  <span>Hover over me</span>
+  <template #content>
+    <div class="p-4">
+      <h3>Hover Card Content</h3>
+      <p>Additional information appears here</p>
+    </div>
+  </template>
+</TelaHoverCard>
+```
+
+### User Profile Card
+
+```vue
+<TelaHoverCard side="right">
+  <a href="/user/john">@johndoe</a>
+  <template #content>
+    <div class="p-4 w-300px">
+      <div class="flex items-center gap-3 mb-3">
+        <TelaAvatar
+          image="https://example.com/avatar.jpg"
+          alt="John Doe"
+          size="md"
+        />
+        <div>
+          <div class="font-semibold">John Doe</div>
+          <div class="text-sm text-gray-600">@johndoe</div>
+        </div>
+      </div>
+      <p class="text-sm text-gray-700">
+        Full-stack developer passionate about building great UIs.
+      </p>
+      <div class="flex gap-4 mt-3 text-sm">
+        <span><strong>234</strong> followers</span>
+        <span><strong>89</strong> following</span>
+      </div>
+    </div>
+  </template>
+</TelaHoverCard>
+```
+
+### Link Preview
+
+```vue
+<TelaHoverCard>
+  <a href="https://example.com">example.com</a>
+  <template #content>
+    <div class="p-4 w-320px">
+      <img
+        src="https://example.com/preview.jpg"
+        alt="Preview"
+        class="w-full h-160px object-cover rounded mb-3"
+      />
+      <h4 class="font-semibold mb-1">Example Website</h4>
+      <p class="text-sm text-gray-600">
+        A brief description of the linked content
+      </p>
+    </div>
+  </template>
+</TelaHoverCard>
+```
+
+```vue
+<TelaHoverCard>
+  <TelaButton variant="ghost">Product Details</TelaButton>
+  <template #content>
+    <div class="p-4 w-280px">
+      <img
+        src="/product.jpg"
+        class="w-full h-140px object-cover rounded mb-3"
+      />
+      <h3 class="font-semibold mb-2">Premium Headphones</h3>
+      <div class="flex items-center justify-between mb-2">
+        <span class="text-2xl font-bold">$299</span>
+        <TelaBadge variant="filled">In Stock</TelaBadge>
+      </div>
+      <p class="text-sm text-gray-600 mb-3">
+        High-quality wireless headphones with noise cancellation
+      </p>
+      <TelaButton variant="primary" class="w-full">
+        Add to Cart
+      </TelaButton>
+    </div>
+  </template>
+</TelaHoverCard>
+```
+
+### Definition Card
+
+```vue
+<TelaHoverCard>
+  <span class="underline decoration-dotted cursor-help">
+    React
+  </span>
+  <template #content>
+    <div class="p-4 w-300px">
+      <h4 class="font-semibold mb-2">React</h4>
+      <p class="text-sm text-gray-700">
+        A JavaScript library for building user interfaces.
+        Developed by Meta (formerly Facebook).
+      </p>
+    </div>
+  </template>
+</TelaHoverCard>
+```
+
+### Different Positions
+
+```vue
+<!-- Bottom (default) -->
+<TelaHoverCard side="bottom">
+  <span>Bottom</span>
+  <template #content>
+    <div class="p-3">Content below</div>
+  </template>
+</TelaHoverCard>
+
+<!-- Top -->
+<TelaHoverCard side="top">
+  <span>Top</span>
+  <template #content>
+    <div class="p-3">Content above</div>
+  </template>
+</TelaHoverCard>
+
+<!-- Left -->
+<TelaHoverCard side="left">
+  <span>Left</span>
+  <template #content>
+    <div class="p-3">Content on left</div>
+  </template>
+</TelaHoverCard>
+
+<!-- Right -->
+<TelaHoverCard side="right">
+  <span>Right</span>
+  <template #content>
+    <div class="p-3">Content on right</div>
+  </template>
+</TelaHoverCard>
+```
+
+## Props
+
+<ArgTypes />
+
+```typescript
+type HoverCardSide = 'top' | 'right' | 'bottom' | 'left'
+type HoverCardAlign = 'start' | 'center' | 'end'
+
+type HoverCardProps = {
+  align?: HoverCardAlign
+  side?: HoverCardSide
+  open?: boolean
+  sideOffset?: number
+}
+```
+
+## Slots
+
+- `default` - Trigger element
+- `content` - Card content (required)
+
+## Features
+
+- **Rich Content**: Supports complex HTML content
+- **Hover Trigger**: Shows on hover, hides on mouse leave
+- **Flexible Positioning**: All sides and alignments
+- **Custom Styling**: Full control over content appearance
+- **Delay Control**: Configurable show/hide delays
+- **Accessible**: Built on reka-ui with proper ARIA
+- **Portal Rendering**: Avoids z-index issues
+
+## HoverCard vs Tooltip
+
+- **HoverCard**: Rich content, longer descriptions, images
+- **Tooltip**: Brief text, simple information
+
+## Use Cases
+
+- **User Profiles**: Show user info on username hover
+- **Link Previews**: Display page preview on link hover
+- **Definitions**: Explain terms or concepts
+- **Product Cards**: Show product details on hover
+- **Help Text**: Provide contextual help information
+- **Image Previews**: Show larger version on thumbnail hover
+
+## Best Practices
+
+1. **Use for Rich Content**: Choose hover card when content is complex
+2. **Keep It Relevant**: Show information related to trigger
+3. **Responsive Design**: Consider mobile experience (no hover)
+4. **Loading States**: Show skeleton while loading async content
+5. **Don't Overuse**: Too many hover cards can overwhelm users
+
+## Accessibility
+
+- Built on reka-ui primitives
+- Proper ARIA attributes
+- Keyboard navigation support (focus shows card)
+- Hover and focus both trigger display
+- Screen reader friendly
+- Escape key to close

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

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from '@storybook-vue/vue3'
+
+import HoverCard from './hover-card.vue'
+
+const meta: Meta<typeof HoverCard> = {
+    title: 'Core/HoverCard',
+    component: HoverCard,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A hover card component that displays content in a floating panel when hovering over a trigger element. Similar to tooltips but supports richer content. Useful for showing previews, user profiles, or additional information on hover.',
+            },
+        },
+    },
+    argTypes: {
+        align: {
+            control: 'select',
+            options: ['start', 'center', 'end'],
+            description: 'Alignment of the hover card relative to the trigger element.',
+        },
+        side: {
+            control: 'select',
+            options: ['top', 'right', 'bottom', 'left'],
+            description: 'Side of the trigger element where the hover card should appear.',
+        },
+        open: {
+            control: 'boolean',
+            description: 'Controls the open state of the hover card. Use v-model:open for two-way binding.',
+        },
+        sideOffset: {
+            control: 'number',
+            description: 'Distance in pixels from the trigger element to the hover card content.',
+        },
+    },
+    args: {
+        align: 'center',
+        side: 'bottom',
+    } as any,
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Simple: Story = {
+    render: args => ({
+        components: { HoverCard },
+        setup() {
+            return { args }
+        },
+        template: `
+          <div style="width: 100%; height: 300px; display: flex; align-items: center; justify-content: center;">
+            <HoverCard v-bind="args">
+              <button>Hover me</button>
+              <template #content>
+                <div style="padding: 16px; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+                  Hover card content
+                </div>
+              </template>
+            </HoverCard>
+          </div>`,
+    }),
+}
+
+export const WithCustomContent: Story = {
+    render: args => ({
+        components: { HoverCard },
+        setup() {
+            return { args }
+        },
+        template: `
+          <div style="width: 100%; height: 300px; display: flex; align-items: center; justify-content: center;">
+            <HoverCard v-bind="args">
+              <button>Hover for details</button>
+              <template #content>
+                <div style="padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); max-width: 300px;">
+                  <h3 style="margin: 0 0 8px 0; font-size: 16px; font-weight: 500;">Custom Content</h3>
+                  <p style="margin: 0; color: #666;">
+                    This is a more complex hover card with custom styled content. You can put any content here.
+                  </p>
+                </div>
+              </template>
+            </HoverCard>
+          </div>`,
+    }),
+}

package/components/tela/hover-card/hover-card.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import {
+    HoverCardContent,
+    HoverCardPortal,
+    HoverCardRoot,
+    HoverCardTrigger,
+    useForwardPropsEmits,
+} from 'radix-vue'
+import type { HoverCardContentProps, HoverCardRootEmits, HoverCardRootProps } from 'radix-vue'
+
+const props = defineProps<HoverCardRootProps & {
+    class?: string
+    align?: HoverCardContentProps['align']
+    side?: HoverCardContentProps['side']
+    sideOffset?: HoverCardContentProps['sideOffset']
+}>()
+const emits = defineEmits<HoverCardRootEmits>()
+
+const forwarded = useForwardPropsEmits(withoutKeys(props, ['class', 'align', 'side']), emits)
+const isOpen = defineModel<boolean>()
+</script>
+
+<template>
+    <HoverCardRoot v-bind="forwarded" v-model:open="isOpen">
+        <HoverCardTrigger as-child>
+            <slot />
+        </HoverCardTrigger>
+        <HoverCardPortal>
+            <HoverCardContent
+                :class="
+                    cn(
+                        'translate-z-0 z600 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+                        props.class,
+                    )
+                "
+                :align="props.align"
+                :side="props.side"
+                :side-offset="props.sideOffset"
+            >
+                <slot name="content" />
+            </HoverCardContent>
+        </HoverCardPortal>
+    </HoverCardRoot>
+</template>
+
+<style lang="css" scoped>
+.hover-card-enter-active,
+.hover-card-leave-active {
+    transition: opacity 150ms ease-in-out;
+}
+
+.hover-card-enter-from,
+.hover-card-leave-to {
+    opacity: 0;
+}
+
+.hover-card-enter-to,
+.hover-card-leave-from {
+    opacity: 1;
+}
+</style>