@a2v2ai/uikit 0.0.38 → 0.0.39

package/Tooltip/Tooltip.stories.tsx

@@ -1,463 +0,0 @@
-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

@@ -1,96 +0,0 @@
-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 }