design system token v0.1

2026-04-13 15:33:00 -05:00
parent 52b4156653
commit c3215945f2
63 changed files with 11562 additions and 181 deletions
--- a/stories/Overlay/Tooltip.stories.tsx
+++ b/stories/Overlay/Tooltip.stories.tsx
@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Plus } from 'lucide-react'
+
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from '@/components/ui/tooltip'
+import { Button } from '@/components/ui/button'
+
+const meta = {
+  title: 'Overlay/Tooltip',
+  component: Tooltip,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+} satisfies Meta<typeof Tooltip>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline">Hover me</Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>This is a tooltip</p>
+      </TooltipContent>
+    </Tooltip>
+  ),
+}
+
+export const Top: Story = {
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline">Top</Button>
+      </TooltipTrigger>
+      <TooltipContent side="top">
+        <p>Tooltip on top</p>
+      </TooltipContent>
+    </Tooltip>
+  ),
+}
+
+export const Right: Story = {
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline">Right</Button>
+      </TooltipTrigger>
+      <TooltipContent side="right">
+        <p>Tooltip on right</p>
+      </TooltipContent>
+    </Tooltip>
+  ),
+}
+
+export const Bottom: Story = {
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline">Bottom</Button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">
+        <p>Tooltip on bottom</p>
+      </TooltipContent>
+    </Tooltip>
+  ),
+}
+
+export const Left: Story = {
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline">Left</Button>
+      </TooltipTrigger>
+      <TooltipContent side="left">
+        <p>Tooltip on left</p>
+      </TooltipContent>
+    </Tooltip>
+  ),
+}
+
+export const WithIconButton: Story = {
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button size="icon" variant="outline">
+          <Plus className="size-4" />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>Add item</p>
+      </TooltipContent>
+    </Tooltip>
+  ),
+}