chore: ratelimit overview tooltip move to unkey ui and renamed

apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-created-success-dialog.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { RatelimitOverviewTooltip } from "@/app/(app)/ratelimits/[namespaceId]/_overview/components/table/components/ratelimit-overview-tooltip";
 import { CopyButton } from "@/components/dashboard/copy-button";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 import { Popover, PopoverContent } from "@/components/ui/popover";
@@ -16,6 +15,7 @@ import {
   Plus,
   TriangleWarning2,
 } from "@unkey/icons";
+import { OverviewTooltip } from "@unkey/ui";
 import { Button } from "@unkey/ui";
 import { useRef, useState } from "react";
 import { SecretKey } from "./secret-key";
@@ -132,7 +132,7 @@ export const KeyCreatedSuccessDialog = ({
                   </div>
                   <div className="flex flex-col gap-1 py-6">
                     <div className="text-accent-12 text-xs font-mono">{keyData.id}</div>
-                    <RatelimitOverviewTooltip
+                    <OverviewTooltip
                       content={keyData.name}
                       position={{ side: "bottom", align: "center" }}
                       asChild
@@ -141,7 +141,7 @@ export const KeyCreatedSuccessDialog = ({
                       <div className="text-accent-9 text-xs max-w-[160px] truncate">
                         {keyData.name ?? "Unnamed Key"}
                       </div>
-                    </RatelimitOverviewTooltip>
+                    </OverviewTooltip>
                   </div>
                   <Button
                     variant="outline"

apps/dashboard/app/(app)/apis/[apiId]/_overview/components/table/components/override-indicator.tsx

@@ -2,7 +2,7 @@
 import { cn } from "@/lib/utils";
 import type { KeysOverviewLog } from "@unkey/clickhouse/src/keys/keys";
 import { TriangleWarning2 } from "@unkey/icons";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@unkey/ui";
+import { OverviewTooltip } from "@unkey/ui";
 import Link from "next/link";
 import { getErrorPercentage, getErrorSeverity } from "../utils/calculate-blocked-percentage";
 
@@ -14,17 +14,9 @@ export const KeyTooltip = ({
   content: React.ReactNode;
 }) => {
   return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>{children}</TooltipTrigger>
-        <TooltipContent
-          className="bg-gray-12 text-gray-1 px-3 py-2 border border-accent-6 shadow-md font-medium text-xs"
-          side="right"
-        >
-          {content}
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
+    <OverviewTooltip content={content} asChild position={{ side: "right" }}>
+      {children}
+    </OverviewTooltip>
   );
 };
 

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/bar-chart/components/outcome-explainer.tsx

@@ -1,6 +1,6 @@
 import { formatNumber } from "@/lib/fmt";
 
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@unkey/ui";
+import { OverviewTooltip } from "@unkey/ui";
 import { useMemo } from "react";
 import type { ProcessedTimeseriesDataPoint } from "../use-fetch-timeseries";
 
@@ -100,15 +100,14 @@ export function OutcomeExplainer({ children, timeseries }: OutcomeExplainerProps
   }, [aggregatedData]);
 
   return (
-    <TooltipProvider>
-      <Tooltip delayDuration={300}>
-        <TooltipTrigger asChild>
-          <div>{children}</div>
-        </TooltipTrigger>
-        <TooltipContent
-          className="min-w-64 bg-gray-1 dark:bg-black shadow-2xl p-0 border border-grayA-2 rounded-lg overflow-hidden flex justify-start px-4 pt-2 pb-1 flex-col gap-1"
-          side="bottom"
-        >
+    <OverviewTooltip
+      asChild
+      className="bg-gray-1 dark:bg-black shadow-2xl p-0 border border-grayA-2 rounded-lg overflow-hidden px-4 pt-2 pb-1"
+      delayDuration={300}
+      variant="secondary"
+      position={{ side: "bottom" }}
+      content={
+        <div className="flex flex-col gap-1 min-w-64 justify-start ">
           <div className="text-gray-12 font-medium text-[13px] pr-2">API Key Activity</div>
           <div className="text-xs text-grayA-9 pr-2 font-normal">Last 36 hours</div>
 
@@ -145,8 +144,10 @@ export function OutcomeExplainer({ children, timeseries }: OutcomeExplainerProps
               <div className="text-gray-9 text-[13px] py-1">No verification activity</div>
             )}
           </div>
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
+        </div>
+      }
+    >
+      <div>{children}</div>
+    </OverviewTooltip>
   );
 }

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/status-cell/index.tsx

@@ -2,8 +2,7 @@ import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import type { KeyDetails } from "@/lib/trpc/routers/api/keys/query-api-keys/schema";
 import { cn } from "@/lib/utils";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@unkey/ui";
-import { useState } from "react";
+import { OverviewTooltip } from "@unkey/ui";
 import { StatusBadge } from "./components/status-badge";
 import { useKeyStatus } from "./use-key-status";
 
@@ -15,7 +14,6 @@ type StatusDisplayProps = {
 export const StatusDisplay = ({ keyAuthId, keyData }: StatusDisplayProps) => {
   const { primary, count, isLoading, statuses, isError } = useKeyStatus(keyAuthId, keyData);
   const utils = trpc.useUtils();
-  const [isOpen, setIsOpen] = useState(false);
 
   const enableKeyMutation = trpc.api.keys.enableKey.useMutation({
     onSuccess: async () => {
@@ -58,12 +56,10 @@ export const StatusDisplay = ({ keyAuthId, keyData }: StatusDisplayProps) => {
   }
 
   return (
-    <TooltipProvider>
-      <Tooltip open={isOpen} onOpenChange={setIsOpen}>
-        <TooltipTrigger onClick={() => setIsOpen(!isOpen)} className="cursor-pointer">
-          <StatusBadge primary={primary} count={count} />
-        </TooltipTrigger>
-        <TooltipContent className="p-0 bg-white dark:bg-black border rounded-lg border-grayA-3 w-72 flex flex-col drop-shadow-xl">
+    <OverviewTooltip
+      asChild
+      content={
+        <div className="p-0 bg-white dark:bg-black border rounded-lg border-grayA-3 w-72 flex flex-col drop-shadow-xl">
           {statuses && statuses.length > 1 && (
             <div className="border-b border-grayA-3 ">
               <div className="px-4 py-3">
@@ -136,8 +132,10 @@ export const StatusDisplay = ({ keyAuthId, keyData }: StatusDisplayProps) => {
               </div>
             </div>
           ))}
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
+        </div>
+      }
+    >
+      <StatusBadge primary={primary} count={count} />
+    </OverviewTooltip>
   );
 };

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/keys-list.tsx

@@ -3,15 +3,7 @@ import { VirtualTable } from "@/components/virtual-table/index";
 import type { Column } from "@/components/virtual-table/types";
 import type { KeyDetails } from "@/lib/trpc/routers/api/keys/query-api-keys/schema";
 import { BookBookmark, Focus, Key } from "@unkey/icons";
-import {
-  AnimatedLoadingSpinner,
-  Button,
-  Empty,
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@unkey/ui";
+import { AnimatedLoadingSpinner, Button, Empty, OverviewTooltip } from "@unkey/ui";
 import { cn } from "@unkey/ui/src/lib/utils";
 import Link from "next/link";
 import { useCallback, useMemo, useState } from "react";
@@ -82,17 +74,11 @@ export const KeysList = ({
             <div className="flex flex-col items-start px-[18px] py-[6px]">
               <div className="flex gap-4 items-center">
                 {identity ? (
-                  <TooltipProvider delayDuration={100}>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        {React.cloneElement(iconContainer, {
-                          className: cn(iconContainer.props.className, "cursor-pointer"),
-                        })}
-                      </TooltipTrigger>
-                      <TooltipContent
-                        className="bg-gray-1 px-4 py-2 border border-gray-4 shadow-md font-medium text-xs text-accent-12"
-                        side="right"
-                      >
+                  <OverviewTooltip
+                    variant="secondary"
+                    position={{ side: "right" }}
+                    content={
+                      <div>
                         This key is associated with the identity:{" "}
                         {key.identity_id ? (
                           <Link
@@ -108,9 +94,14 @@ export const KeysList = ({
                         ) : (
                           <span className="font-mono bg-gray-4 p-1 rounded">{identity}</span>
                         )}
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
+                      </div>
+                    }
+                    asChild
+                  >
+                    {React.cloneElement(iconContainer, {
+                      className: cn(iconContainer.props.className, "cursor-pointer"),
+                    })}
+                  </OverviewTooltip>
                 ) : (
                   iconContainer
                 )}

apps/dashboard/app/(app)/authorization/roles/[roleId]/tree.tsx

@@ -2,8 +2,8 @@
 
 import { CopyButton } from "@/components/dashboard/copy-button";
 import { Switch } from "@/components/ui/switch";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { ChevronRight } from "@unkey/icons";
+import { OverviewTooltip } from "@unkey/ui";
 import type React from "react";
 import { useEffect, useState } from "react";
 import { PermissionToggle } from "./permission-toggle";
@@ -88,9 +88,21 @@ export const RecursivePermission: React.FC<
 
   if (!hasChildren) {
     return (
-      <Tooltip delayDuration={50}>
-        <TooltipTrigger
-          className={`flex flex-col items-start px-2 first:pt-0  py-1.5 mx-1 rounded transition-colors ${getBgColor(
+      <OverviewTooltip
+        asChild
+        delayDuration={50}
+        content={
+          <div className="flex items-center justify-start max-w-sm gap-2">
+            <pre className="text-ellipsis overflow-hidden hover:overflow-visible">{name}</pre>
+            <div>
+              <CopyButton value={name} />
+            </div>
+          </div>
+        }
+        position={{ side: "top", align: "start" }}
+      >
+        <div
+          className={`flex flex-col items-start px-2 first:pt-0 py-1.5 mx-1 rounded transition-colors ${getBgColor(
             hover,
           )}`}
           onMouseEnter={() => setHover(true)}
@@ -101,21 +113,8 @@ export const RecursivePermission: React.FC<
             <pre className="text-sm text-accent-12 font-medium">{k}</pre>
           </div>
           {description && <p className="text-xs text-accent-11 mt-0.5">{description}</p>}
-        </TooltipTrigger>
-        <TooltipContent
-          side="top"
-          align="start"
-          avoidCollisions={true}
-          className="bg-gray-12 text-gray-1 px-3 py-2 border border-accent-6 shadow-md font-medium text-xs"
-        >
-          <div className="flex items-center justify-start max-w-sm gap-2">
-            <pre className="text-ellipsis overflow-hidden hover:overflow-visible">{name}</pre>
-            <div>
-              <CopyButton value={name} />
-            </div>
-          </div>
-        </TooltipContent>
-      </Tooltip>
+        </div>
+      </OverviewTooltip>
     );
   }
 

apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/table/components/inline-filter.tsx

@@ -1,7 +1,7 @@
 import { BarsFilter } from "@unkey/icons";
+import { OverviewTooltip } from "@unkey/ui";
 import type { RatelimitOverviewFilterValue } from "../../../filters.schema";
 import { useFilters } from "../../../hooks/use-filters";
-import { RatelimitOverviewTooltip } from "./ratelimit-overview-tooltip";
 
 type FilterPair = {
   status?: "blocked" | "passed";
@@ -25,7 +25,7 @@ export const InlineFilter = ({
   );
 
   return (
-    <RatelimitOverviewTooltip content={<span className="text-xs font-medium">{content}</span>}>
+    <OverviewTooltip content={<span className="text-xs font-medium">{content}</span>}>
       <button
         onClick={() => {
           updateFilters([
@@ -48,6 +48,6 @@ export const InlineFilter = ({
           size="md-regular"
         />
       </button>
-    </RatelimitOverviewTooltip>
+    </OverviewTooltip>
   );
 };