@a2v2ai/uikit 0.0.36 → 0.0.38

package/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,463 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Bookmark } from "../icons"
+
+import { Button } from "../Button/Button"
+import { IconButton } from "../IconButton/IconButton"
+import { Flex } from "../Flex/Flex"
+import { Typography } from "../Typography/Typography"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./Tooltip"
+
+const meta: Meta<typeof TooltipContent> = {
+  title: "Components/Tooltip",
+  component: TooltipContent,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    side: {
+      control: "select",
+      options: ["top", "bottom", "left", "right"],
+      description: "The side of the trigger the tooltip appears on",
+    },
+    variant: {
+      control: "select",
+      options: ["default", "light"],
+      description: "The visual variant of the tooltip",
+    },
+    showArrow: {
+      control: "boolean",
+      description: "Whether to show the arrow",
+    },
+    sideOffset: {
+      control: "number",
+      description: "The distance from the trigger",
+    },
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <TooltipProvider>
+        <Story />
+      </TooltipProvider>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Default story
+export const Default: Story = {
+  render: (args) => (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline">Hover me</Button>
+      </TooltipTrigger>
+      <TooltipContent {...args}>
+        <p>Tooltip text</p>
+      </TooltipContent>
+    </Tooltip>
+  ),
+  args: {
+    side: "top",
+    showArrow: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<TooltipProvider>
+  <Tooltip>
+    <TooltipTrigger asChild>
+      <Button variant="outline">Hover me</Button>
+    </TooltipTrigger>
+    <TooltipContent>
+      <p>Tooltip text</p>
+    </TooltipContent>
+  </Tooltip>
+</TooltipProvider>`,
+      },
+    },
+  },
+}
+
+// Top position
+export const Top: Story = {
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline">Top</Button>
+      </TooltipTrigger>
+      <TooltipContent side="top">
+        <p>Tooltip text</p>
+      </TooltipContent>
+    </Tooltip>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Tooltip>
+  <TooltipTrigger asChild>
+    <Button variant="outline">Top</Button>
+  </TooltipTrigger>
+  <TooltipContent side="top">
+    <p>Tooltip text</p>
+  </TooltipContent>
+</Tooltip>`,
+      },
+    },
+  },
+}
+
+// Bottom position
+export const Bottom: Story = {
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline">Bottom</Button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">
+        <p>Tooltip text</p>
+      </TooltipContent>
+    </Tooltip>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Tooltip>
+  <TooltipTrigger asChild>
+    <Button variant="outline">Bottom</Button>
+  </TooltipTrigger>
+  <TooltipContent side="bottom">
+    <p>Tooltip text</p>
+  </TooltipContent>
+</Tooltip>`,
+      },
+    },
+  },
+}
+
+// Left position
+export const Left: Story = {
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline">Left</Button>
+      </TooltipTrigger>
+      <TooltipContent side="left">
+        <p>Tooltip text</p>
+      </TooltipContent>
+    </Tooltip>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Tooltip>
+  <TooltipTrigger asChild>
+    <Button variant="outline">Left</Button>
+  </TooltipTrigger>
+  <TooltipContent side="left">
+    <p>Tooltip text</p>
+  </TooltipContent>
+</Tooltip>`,
+      },
+    },
+  },
+}
+
+// Right position
+export const Right: Story = {
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline">Right</Button>
+      </TooltipTrigger>
+      <TooltipContent side="right">
+        <p>Tooltip text</p>
+      </TooltipContent>
+    </Tooltip>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Tooltip>
+  <TooltipTrigger asChild>
+    <Button variant="outline">Right</Button>
+  </TooltipTrigger>
+  <TooltipContent side="right">
+    <p>Tooltip text</p>
+  </TooltipContent>
+</Tooltip>`,
+      },
+    },
+  },
+}
+
+// Without arrow
+export const WithoutArrow: Story = {
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline">No Arrow</Button>
+      </TooltipTrigger>
+      <TooltipContent showArrow={false}>
+        <p>Tooltip without arrow</p>
+      </TooltipContent>
+    </Tooltip>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Tooltip>
+  <TooltipTrigger asChild>
+    <Button variant="outline">No Arrow</Button>
+  </TooltipTrigger>
+  <TooltipContent showArrow={false}>
+    <p>Tooltip without arrow</p>
+  </TooltipContent>
+</Tooltip>`,
+      },
+    },
+  },
+}
+
+// Light variant
+export const Light: Story = {
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline">Light Tooltip</Button>
+      </TooltipTrigger>
+      <TooltipContent variant="light">
+        <p>Light tooltip text</p>
+      </TooltipContent>
+    </Tooltip>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Tooltip>
+  <TooltipTrigger asChild>
+    <Button variant="outline">Light Tooltip</Button>
+  </TooltipTrigger>
+  <TooltipContent variant="light">
+    <p>Light tooltip text</p>
+  </TooltipContent>
+</Tooltip>`,
+      },
+    },
+  },
+}
+
+// With IconButton
+export const WithIconButton: Story = {
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <IconButton variant="outline" icon={<Bookmark />} aria-label="Add to library" />
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>Add to library</p>
+      </TooltipContent>
+    </Tooltip>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Tooltip>
+  <TooltipTrigger asChild>
+    <IconButton variant="outline" icon={<Bookmark />} aria-label="Add to library" />
+  </TooltipTrigger>
+  <TooltipContent>
+    <p>Add to library</p>
+  </TooltipContent>
+</Tooltip>`,
+      },
+    },
+  },
+}
+
+// Long content
+export const LongContent: Story = {
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline">Export File</Button>
+      </TooltipTrigger>
+      <TooltipContent side="right" className="max-w-[200px]">
+        <p>To learn more about how this works, check out the docs. If you have any questions, please reach out to us.</p>
+      </TooltipContent>
+    </Tooltip>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Tooltip>
+  <TooltipTrigger asChild>
+    <Button variant="outline">Export File</Button>
+  </TooltipTrigger>
+  <TooltipContent side="right" className="max-w-[200px]">
+    <p>To learn more about how this works, check out the docs. If you have any questions, please reach out to us.</p>
+  </TooltipContent>
+</Tooltip>`,
+      },
+    },
+  },
+}
+
+// All Variants showcase
+export const AllVariants: Story = {
+  render: () => (
+    <Flex  gap={8}>
+      {/* Tooltip Positions */}
+      <Flex  gap={4}>
+        <Typography variant="h4" className="text-white">Tooltip</Typography>
+
+        <Flex  gap={6}>
+          {/* Top */}
+          <Flex direction="row" gap={4} align="center">
+            <Typography variant="body2" className="text-neutral-400 w-20">Top</Typography>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="outline" size="small">Hover</Button>
+              </TooltipTrigger>
+              <TooltipContent side="top">
+                <p>Tooltip text</p>
+              </TooltipContent>
+            </Tooltip>
+          </Flex>
+
+          {/* Bottom */}
+          <Flex direction="row" gap={4} align="center">
+            <Typography variant="body2" className="text-neutral-400 w-20">Bottom</Typography>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="outline" size="small">Hover</Button>
+              </TooltipTrigger>
+              <TooltipContent side="bottom">
+                <p>Tooltip text</p>
+              </TooltipContent>
+            </Tooltip>
+          </Flex>
+
+          {/* Left */}
+          <Flex direction="row" gap={4} align="center">
+            <Typography variant="body2" className="text-neutral-400 w-20">Left</Typography>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="outline" size="small">Hover</Button>
+              </TooltipTrigger>
+              <TooltipContent side="left">
+                <p>Tooltip text</p>
+              </TooltipContent>
+            </Tooltip>
+          </Flex>
+
+          {/* Right */}
+          <Flex direction="row" gap={4} align="center">
+            <Typography variant="body2" className="text-neutral-400 w-20">Right</Typography>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="outline" size="small">Hover</Button>
+              </TooltipTrigger>
+              <TooltipContent side="right">
+                <p>Tooltip text</p>
+              </TooltipContent>
+            </Tooltip>
+          </Flex>
+        </Flex>
+      </Flex>
+
+      {/* Examples */}
+      <Flex  gap={4}>
+        <Typography variant="h4" className="text-white">Examples</Typography>
+
+        <Flex direction="row" gap={4} align="center">
+          {/* Icon Button with tooltip */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <IconButton variant="outline" icon={<Bookmark />} aria-label="Add to library" />
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Add to library</p>
+            </TooltipContent>
+          </Tooltip>
+
+          {/* Button with long tooltip */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="outline">Export File</Button>
+            </TooltipTrigger>
+            <TooltipContent side="right" className="max-w-[200px]">
+              <p>To learn more about how this works, check out the docs. If you have any questions, please reach out to us.</p>
+            </TooltipContent>
+          </Tooltip>
+        </Flex>
+      </Flex>
+
+      {/* Variants */}
+      <Flex  gap={4}>
+        <Typography variant="h4" className="text-white">Variants</Typography>
+
+        <Flex direction="row" gap={4} align="center">
+          {/* Default */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="outline">Default</Button>
+            </TooltipTrigger>
+            <TooltipContent variant="default">
+              <p>Default dark tooltip</p>
+            </TooltipContent>
+          </Tooltip>
+
+          {/* Light */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="outline">Light</Button>
+            </TooltipTrigger>
+            <TooltipContent variant="light">
+              <p>Light tooltip variant</p>
+            </TooltipContent>
+          </Tooltip>
+
+          {/* No Arrow */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="outline">No Arrow</Button>
+            </TooltipTrigger>
+            <TooltipContent showArrow={false}>
+              <p>Without arrow</p>
+            </TooltipContent>
+          </Tooltip>
+        </Flex>
+      </Flex>
+    </Flex>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `// Basic usage
+<TooltipProvider>
+  <Tooltip>
+    <TooltipTrigger asChild>
+      <Button variant="outline">Hover me</Button>
+    </TooltipTrigger>
+    <TooltipContent>
+      <p>Tooltip text</p>
+    </TooltipContent>
+  </Tooltip>
+</TooltipProvider>
+
+// With position
+<TooltipContent side="bottom">...</TooltipContent>
+<TooltipContent side="left">...</TooltipContent>
+<TooltipContent side="right">...</TooltipContent>
+
+// Light variant
+<TooltipContent variant="light">...</TooltipContent>
+
+// Without arrow
+<TooltipContent showArrow={false}>...</TooltipContent>`,
+      },
+    },
+  },
+}

package/Tooltip/Tooltip.tsx

@@ -0,0 +1,96 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import { cva } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+
+type TooltipContentVariant = "default" | "light"
+
+const tooltipContentVariants = cva(
+  "z-50 overflow-hidden rounded-lg bg-neutral-950 px-2 py-1.5 text-xs text-neutral-50 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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",
+  {
+    variants: {
+      variant: {
+        default: "bg-neutral-950 text-neutral-50",
+        light: "bg-white text-neutral-900 border border-neutral-200 shadow-md",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TooltipProvider({
+  delayDuration = 200,
+  skipDelayDuration = 300,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      delayDuration={delayDuration}
+      skipDelayDuration={skipDelayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root {...props} />
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger {...props} />
+}
+
+export type TooltipContentProps = React.ComponentProps<
+  typeof TooltipPrimitive.Content
+> & {
+  variant?: TooltipContentVariant
+  /** Whether to show the arrow */
+  showArrow?: boolean
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 4,
+  variant,
+  showArrow = true,
+  children,
+  ...props
+}: TooltipContentProps) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        sideOffset={sideOffset}
+        className={cn(tooltipContentVariants({ variant }), className)}
+        {...props}
+      >
+        {children}
+        {showArrow && (
+          <TooltipPrimitive.Arrow
+            className={cn(
+              "fill-neutral-950",
+              variant === "light" && "fill-white"
+            )}
+            width={11}
+            height={5}
+          />
+        )}
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+  tooltipContentVariants,
+}
+export type { TooltipContentVariant }