feat(uds): introduce a tooltip component

Author: steveoh

packages/utah-design-system/src/components/Tooltip.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta } from '@storybook/react-vite';
+import { PrinterIcon, SaveIcon } from 'lucide-react';
+import { TooltipTrigger, type TooltipProps } from 'react-aria-components';
+import { Button } from './Button';
+import { Tooltip } from './Tooltip';
+
+const meta: Meta<typeof Tooltip> = {
+  component: Tooltip,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {},
+  args: {},
+};
+
+export default meta;
+
+export const Example = (args: TooltipProps) => (
+  <div className="flex gap-2">
+    <TooltipTrigger>
+      <Button variant="secondary" className="px-2">
+        <SaveIcon className="h-5 w-5" />
+      </Button>
+      <Tooltip {...args}>Save</Tooltip>
+    </TooltipTrigger>
+    <TooltipTrigger>
+      <Button variant="secondary" className="px-2">
+        <PrinterIcon className="h-5 w-5" />
+      </Button>
+      <Tooltip {...args}>Print</Tooltip>
+    </TooltipTrigger>
+  </div>
+);

packages/utah-design-system/src/components/Tooltip.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import {
+  Tooltip as AriaTooltip,
+  type TooltipProps as AriaTooltipProps,
+  OverlayArrow,
+  composeRenderProps,
+} from 'react-aria-components';
+import { tv } from 'tailwind-variants';
+
+export interface TooltipProps extends Omit<AriaTooltipProps, 'children'> {
+  children: React.ReactNode;
+}
+
+const styles = tv({
+  base: 'group rounded-lg border border-slate-800 bg-slate-700 px-3 py-1 text-sm text-white shadow-[inset_0_1px_0_0_theme(colors.gray.600)] drop-shadow-lg will-change-transform dark:border-white/10 dark:bg-slate-600 dark:shadow-none',
+  variants: {
+    isEntering: {
+      true: 'duration-200 ease-out animate-in fade-in placement-left:slide-in-from-right-0.5 placement-right:slide-in-from-left-0.5 placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5',
+    },
+    isExiting: {
+      true: 'duration-150 ease-in animate-out fade-out placement-left:slide-out-to-right-0.5 placement-right:slide-out-to-left-0.5 placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5',
+    },
+  },
+});
+
+export function Tooltip({ children, ...props }: TooltipProps) {
+  return (
+    <AriaTooltip
+      {...props}
+      offset={10}
+      className={composeRenderProps(props.className, (className, renderProps) =>
+        styles({ ...renderProps, className }),
+      )}
+    >
+      <OverlayArrow>
+        <svg
+          width={8}
+          height={8}
+          viewBox="0 0 8 8"
+          className="fill-slate-700 stroke-gray-800 group-placement-left:-rotate-90 group-placement-right:rotate-90 group-placement-bottom:rotate-180 dark:fill-slate-600 dark:stroke-white/10 forced-colors:fill-[Canvas] forced-colors:stroke-[ButtonBorder]"
+        >
+          <path d="M0 0 L4 4 L8 0" />
+        </svg>
+      </OverlayArrow>
+      {children}
+    </AriaTooltip>
+  );
+}

packages/utah-design-system/src/index.ts

@@ -31,6 +31,7 @@ export * from './components/TextArea';
 export * from './components/TextField';
 export * from './components/ToggleButton';
 export * from './components/ToggleButtonGroup';
+export * from './components/Tooltip';
 export * from './components/UtahIdLogin';
 export * from './contexts/FirebaseAnalyticsProvider';
 export * from './contexts/FirebaseAppProvider';