@meistrari/tela-build 1.0.0

package/components/tela/tooltip-group/tooltip-group.mdx

@@ -0,0 +1,236 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as TooltipGroupStories from './tooltip-group.stories.ts';
+
+<Meta of={TooltipGroupStories} />
+
+# TelaTooltipGroup
+
+A tooltip group component that manages tooltips for multiple child elements. Provides coordinated tooltip behavior for groups of interactive elements like button groups or toolbar items. Each child element wrapped in TooltipGroupTrigger will show its tooltip when hovered.
+
+## Examples
+
+### Basic Usage
+
+<Canvas of={TooltipGroupStories.Simple} />
+
+### Text Editor Toolbar
+
+<Canvas of={TooltipGroupStories.Default} />
+
+### With Delay
+
+<Canvas of={TooltipGroupStories.WithDelay} />
+
+### With Skip Delay
+
+<Canvas of={TooltipGroupStories.WithSkipDelay} />
+
+### Multiline Tooltips
+
+<Canvas of={TooltipGroupStories.MultilineTooltips} />
+
+### Different Positions
+
+<Canvas of={TooltipGroupStories.WithPositioning} />
+
+### Disabled Group
+
+<Canvas of={TooltipGroupStories.Disabled} />
+
+### With Custom Content
+
+<Canvas of={TooltipGroupStories.WithCustomContent} />
+
+### Basic Usage Code
+
+```vue
+<TelaTooltipGroup>
+  <div class="flex gap-1">
+    <TelaTooltipGroupTrigger content="Cut">
+      <TelaIconButton icon="i-ph-scissors" />
+    </TelaTooltipGroupTrigger>
+    <TelaTooltipGroupTrigger content="Copy">
+      <TelaIconButton icon="i-ph-copy" />
+    </TelaTooltipGroupTrigger>
+    <TelaTooltipGroupTrigger content="Paste">
+      <TelaIconButton icon="i-ph-clipboard" />
+    </TelaTooltipGroupTrigger>
+  </div>
+</TelaTooltipGroup>
+```
+
+### Text Editor Toolbar Code
+
+```vue
+<TelaTooltipGroup>
+  <div class="flex gap-1">
+    <TelaTooltipGroupTrigger content="Bold">
+      <TelaIconButton icon="i-ph-text-b" />
+    </TelaTooltipGroupTrigger>
+    <TelaTooltipGroupTrigger content="Italic">
+      <TelaIconButton icon="i-ph-text-italic" />
+    </TelaTooltipGroupTrigger>
+    <TelaTooltipGroupTrigger content="Heading 1">
+      <TelaIconButton icon="i-ph-text-h-one" />
+    </TelaTooltipGroupTrigger>
+  </div>
+</TelaTooltipGroup>
+```
+
+### With Delay Code
+
+```vue
+<TelaTooltipGroup :delay-duration="500">
+  <div class="flex gap-1">
+    <TelaTooltipGroupTrigger content="Save">
+      <TelaIconButton icon="i-ph-floppy-disk" />
+    </TelaTooltipGroupTrigger>
+    <TelaTooltipGroupTrigger content="Undo">
+      <TelaIconButton icon="i-ph-arrow-counter-clockwise" />
+    </TelaTooltipGroupTrigger>
+    <TelaTooltipGroupTrigger content="Redo">
+      <TelaIconButton icon="i-ph-arrow-clockwise" />
+    </TelaTooltipGroupTrigger>
+  </div>
+</TelaTooltipGroup>
+```
+
+### With Skip Delay Code
+
+```vue
+<TelaTooltipGroup
+  :delay-duration="500"
+  :skip-delay-duration="300"
+>
+  <div class="flex gap-1">
+    <!-- Tooltips show quickly when moving between buttons -->
+    <TelaTooltipGroupTrigger content="Play">
+      <TelaIconButton icon="i-ph-play" />
+    </TelaTooltipGroupTrigger>
+    <TelaTooltipGroupTrigger content="Pause">
+      <TelaIconButton icon="i-ph-pause" />
+    </TelaTooltipGroupTrigger>
+    <TelaTooltipGroupTrigger content="Stop">
+      <TelaIconButton icon="i-ph-stop" />
+    </TelaTooltipGroupTrigger>
+  </div>
+</TelaTooltipGroup>
+```
+
+### Multiline Tooltips Code
+
+```vue
+<TelaTooltipGroup>
+  <div class="flex gap-1">
+    <TelaTooltipGroupTrigger
+      variant="multiline"
+      title="Export Document"
+      description="Save your document in PDF format"
+    >
+      <TelaIconButton icon="i-ph-file-pdf" />
+    </TelaTooltipGroupTrigger>
+    <TelaTooltipGroupTrigger
+      variant="multiline"
+      title="Share Document"
+      description="Collaborate with your team"
+    >
+      <TelaIconButton icon="i-ph-share-network" />
+    </TelaTooltipGroupTrigger>
+  </div>
+</TelaTooltipGroup>
+```
+
+### Different Positions Code
+
+```vue
+<TelaTooltipGroup>
+  <div class="flex gap-1">
+    <TelaTooltipGroupTrigger content="Top" side="top">
+      <TelaIconButton icon="i-ph-arrow-up" />
+    </TelaTooltipGroupTrigger>
+    <TelaTooltipGroupTrigger content="Right" side="right">
+      <TelaIconButton icon="i-ph-arrow-right" />
+    </TelaTooltipGroupTrigger>
+    <TelaTooltipGroupTrigger content="Bottom" side="bottom">
+      <TelaIconButton icon="i-ph-arrow-down" />
+    </TelaTooltipGroupTrigger>
+    <TelaTooltipGroupTrigger content="Left" side="left">
+      <TelaIconButton icon="i-ph-arrow-left" />
+    </TelaTooltipGroupTrigger>
+  </div>
+</TelaTooltipGroup>
+```
+
+### Disabled Group Code
+
+```vue
+<TelaTooltipGroup disabled>
+  <div class="flex gap-1">
+    <!-- Tooltips won't show -->
+    <TelaTooltipGroupTrigger content="Won't show">
+      <TelaIconButton icon="i-ph-info" />
+    </TelaTooltipGroupTrigger>
+  </div>
+</TelaTooltipGroup>
+```
+
+```vue
+<TelaTooltipGroup>
+  <div class="flex gap-1">
+    <TelaTooltipGroupTrigger>
+      <TelaIconButton icon="i-ph-star" />
+      <template #content>
+        <div class="flex items-center gap-1">
+          <span>⭐</span>
+          <span>Custom Content</span>
+        </div>
+      </template>
+    </TelaTooltipGroupTrigger>
+  </div>
+</TelaTooltipGroup>
+```
+
+## Props
+
+<ArgTypes />
+
+```typescript
+type TooltipGroupProps = {
+  delayDuration?: number
+  disabled?: boolean
+  skipDelayDuration?: number
+}
+```
+
+## Components
+
+- `TelaTooltipGroup` - Container that manages tooltip behavior
+- `TelaTooltipGroupTrigger` - Individual trigger with tooltip
+
+## Features
+
+- **Coordinated Behavior**: Manages multiple tooltips together
+- **Shared Delay**: Common delay for all tooltips
+- **Skip Delay**: Fast transitions between adjacent tooltips
+- **Single & Multiline**: Support both tooltip variants
+- **Custom Content**: Slots for rich tooltip content
+- **Position Control**: Individual positioning per trigger
+- **Disable All**: Disable entire group at once
+- **Toolbar Ready**: Perfect for button toolbars
+
+## Best Practices
+
+1. **Use for Groups**: Best for 3+ related interactive elements
+2. **Set Skip Delay**: Enable fast tooltip switching between items
+3. **Consistent Positioning**: Use same side for all in group
+4. **Brief Content**: Keep tooltip text concise
+5. **Icon Buttons**: Especially useful with icon-only buttons
+
+## Accessibility
+
+- Built on reka-ui primitives
+- Proper ARIA attributes for each tooltip
+- Keyboard navigation support
+- Focus triggers show tooltips
+- Screen reader friendly
+- Disabled state properly conveyed