feat: add component tooltip

Author: Ohh-889

packages/ui/package.json

@@ -35,12 +35,14 @@
     "@radix-ui/react-hover-card": "^1.1.14",
     "@radix-ui/react-label": "2.1.7",
     "@radix-ui/react-menu": "^2.1.15",
+    "@radix-ui/react-menubar": "^1.1.15",
     "@radix-ui/react-popover": "1.1.14",
     "@radix-ui/react-scroll-area": "1.2.9",
     "@radix-ui/react-separator": "1.1.7",
     "@radix-ui/react-slot": "1.2.3",
     "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-tabs": "1.1.12",
+    "@radix-ui/react-tooltip": "^1.2.7",
     "@soybean-react-ui/tailwind-plugin": "workspace:*",
     "clsx": "2.1.1",
     "cmdk": "^1.1.1",

packages/ui/src/components/tooltip/Tooltip.tsx

@@ -0,0 +1,32 @@
+import { Root, Trigger } from '@radix-ui/react-tooltip';
+
+import TooltipArrow from './TooltipArrow';
+import TooltipContent from './TooltipContent';
+import type { TooltipProps } from './types';
+
+const Tooltip = (props: TooltipProps) => {
+  const { children, className, classNames, content, contentProps, showArrow, size, ...rest } = props;
+
+  return (
+    <Root {...rest}>
+      <Trigger asChild>{children}</Trigger>
+
+      <TooltipContent
+        className={className || classNames?.content}
+        size={size}
+        {...contentProps}
+      >
+        {content}
+
+        {showArrow && (
+          <TooltipArrow
+            className={classNames?.arrow}
+            size={size}
+          />
+        )}
+      </TooltipContent>
+    </Root>
+  );
+};
+
+export default Tooltip;

packages/ui/src/components/tooltip/TooltipArrow.tsx

@@ -0,0 +1,23 @@
+import { Arrow } from '@radix-ui/react-tooltip';
+
+import { cn } from '@/lib/utils';
+
+import { tooltipVariants } from './tooltip-variants';
+import type { TooltipArrowProps } from './types';
+
+const TooltipArrow = (props: TooltipArrowProps) => {
+  const { className, size, ...rest } = props;
+
+  const { arrow } = tooltipVariants({ size });
+
+  const mergedCls = cn(arrow(), className);
+
+  return (
+    <Arrow
+      className={mergedCls}
+      {...rest}
+    />
+  );
+};
+
+export default TooltipArrow;

packages/ui/src/components/tooltip/TooltipContent.tsx

@@ -0,0 +1,32 @@
+import { Content, Portal } from '@radix-ui/react-tooltip';
+import type { ComponentRef } from 'react';
+import { forwardRef } from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { tooltipVariants } from './tooltip-variants';
+import type { TooltipContentProps } from './types';
+
+const TooltipContent = forwardRef<ComponentRef<typeof Content>, TooltipContentProps>((props, ref) => {
+  const { avoidCollisions = true, className, sideOffset = 8, size, ...rest } = props;
+
+  const { content } = tooltipVariants({ size });
+
+  const mergedCls = cn(content(), className);
+
+  return (
+    <Portal>
+      <Content
+        avoidCollisions={avoidCollisions}
+        className={mergedCls}
+        ref={ref}
+        sideOffset={sideOffset}
+        {...rest}
+      />
+    </Portal>
+  );
+});
+
+TooltipContent.displayName = 'TooltipContent';
+
+export default TooltipContent;

packages/ui/src/components/tooltip/index.ts

@@ -0,0 +1,7 @@
+export { Tooltip as TooltipRoot, TooltipProvider, TooltipTrigger } from '@radix-ui/react-tooltip';
+
+export { default as Tooltip } from './Tooltip';
+export { default as TooltipArrow } from './TooltipArrow';
+export { default as TooltipContent } from './TooltipContent';
+
+export * from './types';

packages/ui/src/components/tooltip/tooltip-variants.ts

@@ -0,0 +1,46 @@
+import { tv } from 'tailwind-variants';
+
+export const tooltipVariants = tv({
+  defaultVariants: {
+    size: 'md'
+  },
+  slots: {
+    arrow: 'w-1em h-0.5em fill-carbon stroke-border',
+    content: [
+      'w-auto rounded-md border bg-carbon  text-carbon-foreground shadow-md outline-none z-50 will-change-transform',
+      '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: {
+    size: {
+      '2xl': {
+        arrow: 'text-lg',
+        content: 'px-4.5 py-2.5 text-xl'
+      },
+      lg: {
+        arrow: 'text-sm',
+        content: 'px-3.5 py-1.75 text-base'
+      },
+      md: {
+        arrow: 'text-xs',
+        content: 'px-3 py-1.5 text-sm'
+      },
+      sm: {
+        arrow: 'text-2xs',
+        content: 'px-2.5 py-1.25 text-xs'
+      },
+      xl: {
+        arrow: 'text-base',
+        content: 'px-4 py-2 text-lg'
+      },
+      xs: {
+        arrow: 'text-3xs',
+        content: 'px-2 py-1 text-2xs'
+      }
+    }
+  }
+});
+
+export type TooltipSlots = keyof typeof tooltipVariants.slots;

packages/ui/src/components/tooltip/types.ts

@@ -0,0 +1,26 @@
+import type {
+  TooltipArrowProps as _TooltipArrowProps,
+  TooltipContentProps as _TooltipContentProps,
+  TooltipProps as _TooltipProps
+} from '@radix-ui/react-tooltip';
+
+import type { BaseNodeProps, ClassValue, ThemeAlign, ThemeSide } from '@/types/other';
+
+import type { TooltipSlots } from './tooltip-variants';
+
+export type TooltipClassNames = Partial<Record<TooltipSlots, ClassValue>>;
+
+export interface TooltipContentProps extends BaseNodeProps<_TooltipContentProps> {}
+
+export interface TooltipArrowProps extends BaseNodeProps<_TooltipArrowProps> {}
+
+export interface TooltipProps extends BaseNodeProps<_TooltipProps> {
+  classNames?: TooltipClassNames;
+  content: React.ReactNode;
+  contentProps?: Omit<TooltipContentProps, 'children' | 'className'>;
+  showArrow?: boolean;
+}
+
+export type TooltipSide = ThemeSide;
+
+export type TooltipAlign = ThemeAlign;

packages/ui/src/index.ts

@@ -62,6 +62,8 @@ export * from './components/switch';
 
 export * from './components/tabs';
 
+export * from './components/tooltip';
+
 export * from './lib';
 
 export * from './types';

playground/src/app/(demo)/tooltip/modules/TooltipArrow.tsx

@@ -0,0 +1,19 @@
+import { Button, Card, Tooltip } from 'soybean-react-ui';
+
+const TooltipArrow = () => {
+  return (
+    <Card
+      split
+      title="Tooltip Arrow"
+    >
+      <Tooltip
+        showArrow
+        content="Tooltip content"
+      >
+        <Button variant="plain">with arrow</Button>
+      </Tooltip>
+    </Card>
+  );
+};
+
+export default TooltipArrow;

playground/src/app/(demo)/tooltip/modules/TooltipDemo.tsx

@@ -0,0 +1,41 @@
+import type { TooltipAlign, TooltipSide } from 'soybean-react-ui';
+import { Button, Card, Tooltip } from 'soybean-react-ui';
+
+const sides: TooltipSide[] = ['top', 'right', 'bottom', 'left'];
+
+const aligns: TooltipAlign[] = ['start', 'center', 'end'];
+
+const TooltipDemo = () => {
+  return (
+    <Card
+      split
+      title="Tooltip Position"
+    >
+      {sides.map(side => {
+        return (
+          <div key={side}>
+            <div className="py-[12px] text-[18px] font-medium">Side: {side}</div>
+            <div className="flex flex-wrap gap-[12px]">
+              {aligns.map(align => {
+                return (
+                  <Tooltip
+                    content="Tooltip content"
+                    key={align}
+                    contentProps={{
+                      align,
+                      side
+                    }}
+                  >
+                    <Button variant="plain">align:{align}</Button>
+                  </Tooltip>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+    </Card>
+  );
+};
+
+export default TooltipDemo;