zudoku 0.0.0-fix-downgrade-openapi-parser.aac00796 → 0.0.0-fix-firebase-export.2e421fda

package/src/lib/ui/Tooltip.tsx

@@ -1,43 +1,65 @@
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import * as React from "react";
+import { TooltipArrow } from "@radix-ui/react-tooltip";
+import type * as React from "react";
+import { cn } from "./util.js";
 
-import { cn } from "../util/cn.js";
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
 
-const TooltipProvider = TooltipPrimitive.Provider;
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
 
-const Tooltip = TooltipPrimitive.Root;
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
 
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipArrow = (
-  props: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>,
-) => (
-  <TooltipPrimitive.Arrow
-    {...props}
-    className={cn(props.className, "fill-border")}
-  />
-);
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md 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",
-      className,
-    )}
-    {...props}
-  />
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background 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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
 
 export {
   Tooltip,
-  TooltipArrow,
+  TooltipTrigger,
   TooltipContent,
   TooltipProvider,
-  TooltipTrigger,
+  TooltipArrow,
 };

package/src/lib/util/MdxComponents.tsx

@@ -3,6 +3,7 @@ import { AnchorLink } from "../components/AnchorLink.js";
 import { Framed } from "../components/Framed.js";
 import { Heading } from "../components/Heading.js";
 import { InlineCode } from "../components/InlineCode.js";
+import { Mermaid } from "../components/Mermaid.js";
 import { HIGHLIGHT_CODE_BLOCK_CLASS } from "../shiki.js";
 import { Button } from "../ui/Button.js";
 import { Callout } from "../ui/Callout.js";
@@ -76,6 +77,7 @@ export const MdxComponents = {
   Button,
   Callout,
   Stepper,
+  Mermaid,
   SyntaxHighlight,
   tip: (props) => <Callout type="tip" {...props} />,
   info: (props) => <Callout type="info" {...props} />,

package/src/lib/util/createVariantComponent.tsx

@@ -5,8 +5,31 @@ import type { HTMLElementType, JSX } from "react";
 import * as React from "react";
 import { cn } from "./cn.js";
 
+type ComponentOrElement =
+  | HTMLElementType
+  // biome-ignore lint/suspicious/noExplicitAny: Need to accept any component type
+  | React.ComponentType<any>
+  // biome-ignore lint/suspicious/noExplicitAny: Need to accept any component type
+  | React.ForwardRefExoticComponent<any>;
+
+type PropsOf<T> = T extends HTMLElementType
+  ? JSX.IntrinsicElements[T]
+  : T extends React.ComponentType<infer P>
+    ? P
+    : T extends React.ForwardRefExoticComponent<infer P>
+      ? P
+      : never;
+
+type RefOf<T> = T extends HTMLElementType
+  ? T extends keyof HTMLElementTagNameMap
+    ? HTMLElementTagNameMap[T]
+    : HTMLElement
+  : T extends React.ForwardRefExoticComponent<React.RefAttributes<infer R>>
+    ? R
+    : HTMLElement;
+
 const createVariantComponent = <
-  E extends HTMLElementType,
+  E extends ComponentOrElement,
   C extends ReturnType<typeof cva>,
 >(
   tag: E,
@@ -14,20 +37,23 @@ const createVariantComponent = <
   // variantProps: Array<keyof VariantProps<C>> = [],
 ) => {
   const MyVariant = React.forwardRef<
-    HTMLElement,
-    JSX.IntrinsicElements[E] & { className?: ClassValue; asChild?: boolean }
+    RefOf<E>,
+    PropsOf<E> & { className?: ClassValue; asChild?: boolean }
   >(({ className, asChild, ...props }, ref) => {
     const Comp = asChild ? Slot : tag;
 
     return React.createElement(Comp, {
       ...props,
-      ref,
+      ref: ref as React.Ref<HTMLElement>,
       className:
         typeof cvx === "function" ? cvx({ className }) : cn(cvx, className),
     });
   });
 
-  MyVariant.displayName = `VariantComponent(${tag})`;
+  MyVariant.displayName =
+    typeof tag === "string"
+      ? `VariantComponent(${tag})`
+      : `VariantComponent(${tag.displayName || tag.name || "Component"})`;
 
   return MyVariant;
 };