✨ feat(tooltip): add TooltipWithToggleDemo component to registry (#5)

📚 docs(tooltip): add documentation for TooltipWithToggleDemo component

apps/web/__registry__/index.tsx

@@ -2810,6 +2810,17 @@ export const Index: Record<string, any> = {
          subcategory: 'undefined',
          chunks: [],
       },
+      'tooltip-with-toggle-demo': {
+         name: 'tooltip-with-toggle-demo',
+         type: 'components:example',
+         registryDependencies: ['tooltip'],
+         component: React.lazy(() => import('~/registry/default/example/tooltip-with-toggle-demo')),
+         source: '',
+         files: ['registry/default/example/tooltip-with-toggle-demo.tsx'],
+         category: 'undefined',
+         subcategory: 'undefined',
+         chunks: [],
+      },
       'typography-blockquote': {
          name: 'typography-blockquote',
          type: 'components:example',
@@ -8149,6 +8160,17 @@ export const Index: Record<string, any> = {
          subcategory: 'undefined',
          chunks: [],
       },
+      'tooltip-with-toggle-demo': {
+         name: 'tooltip-with-toggle-demo',
+         type: 'components:example',
+         registryDependencies: ['tooltip'],
+         component: React.lazy(() => import('~/registry/miami/example/tooltip-with-toggle-demo')),
+         source: '',
+         files: ['registry/miami/example/tooltip-with-toggle-demo.tsx'],
+         category: 'undefined',
+         subcategory: 'undefined',
+         chunks: [],
+      },
       'typography-blockquote': {
          name: 'typography-blockquote',
          type: 'components:example',

apps/web/content/docs/components/tooltip.mdx

@@ -106,3 +106,7 @@ styleSwitch={true}
 button="copy"
 dots={false}
 />
+
+### Tooltip with Toggle
+
+<ComponentPreview name="tooltip-with-toggle-demo" description="A tooltip with Toggle component." styleSwitch={true} button="copy" dots={false} />

apps/web/registry/default/example/tooltip-with-toggle-demo.tsx

@@ -0,0 +1,26 @@
+import { Heart } from 'lucide-react'
+
+import { Toggle } from '~/registry/default/ui/toggle'
+import {
+   Tooltip,
+   TooltipContent,
+   TooltipProvider,
+   TooltipTrigger,
+} from '~/registry/default/ui/tooltip'
+
+export default function TooltipWithToggleDemo() {
+   return (
+      <TooltipProvider>
+         <Tooltip>
+            <TooltipTrigger>
+               <Toggle variant="outline" aria-label="Toggle love">
+                  <Heart className="h-4 w-4" />
+               </Toggle>
+            </TooltipTrigger>
+            <TooltipContent>
+               <p>Heart</p>
+            </TooltipContent>
+         </Tooltip>
+      </TooltipProvider>
+   )
+}

apps/web/registry/examples.ts

@@ -885,6 +885,12 @@ export const examples: Registry = [
       registryDependencies: ['tooltip'],
       files: ['example/tooltip-secondary.tsx'],
    },
+   {
+      name: 'tooltip-with-toggle-demo',
+      type: 'components:example',
+      registryDependencies: ['tooltip'],
+      files: ['example/tooltip-with-toggle-demo.tsx'],
+   },
    {
       name: 'typography-blockquote',
       type: 'components:example',

apps/web/registry/miami/example/tooltip-with-toggle-demo.tsx

@@ -0,0 +1,24 @@
+import { Heart } from 'lucide-react'
+
+import { Toggle } from '~/registry/miami/ui/toggle'
+import {
+   Tooltip,
+   TooltipContent,
+   TooltipProvider,
+   TooltipTrigger,
+} from '~/registry/miami/ui/tooltip'
+
+export default function TooltipWithToggleDemo() {
+   return (
+      <TooltipProvider>
+         <Tooltip>
+            <TooltipTrigger>
+               <Toggle variant="outline" aria-label="Toggle Heart">
+                  <Heart className="h-4 w-4" />
+               </Toggle>
+            </TooltipTrigger>
+            <TooltipContent><p>Heart</p></TooltipContent>
+         </Tooltip>
+      </TooltipProvider>
+   )
+}