@tipp/ui 1.6.24 → 1.6.26

package/src/atoms/tooltip.tsx

@@ -1 +1,72 @@
-export { Tooltip, type TooltipProps } from '@radix-ui/themes';
+import { createContext, useContext, useEffect, useState } from 'react';
+import type {
+  TooltipContentProps,
+  TooltipProps,
+  TooltipTriggerProps,
+  TooltipProviderProps,
+} from '@radix-ui/react-tooltip';
+import {
+  TooltipProvider as OriginalTooltipProvider,
+  Tooltip as OriginalTooltip,
+  TooltipTrigger as OriginalTooltipTrigger,
+  TooltipContent as OriginalTooltipContent,
+} from '@radix-ui/react-tooltip';
+import type {
+  PopoverContentProps,
+  PopoverProps,
+  PopoverTriggerProps,
+} from '@radix-ui/react-popover';
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from '@radix-ui/react-popover';
+
+const TouchContext = createContext<boolean | undefined>(undefined);
+const useTouch = (): boolean | undefined => useContext(TouchContext);
+
+export function TooltipProvider({
+  children,
+  ...props
+}: TooltipProviderProps): JSX.Element {
+  const [isTouch, setIsTouch] = useState<boolean | undefined>(undefined);
+  useEffect(() => {
+    setIsTouch(window.matchMedia('(pointer: coarse)').matches);
+  }, []);
+  return (
+    <TouchContext.Provider value={isTouch}>
+      <OriginalTooltipProvider {...props}>{children}</OriginalTooltipProvider>
+    </TouchContext.Provider>
+  );
+}
+
+export function Tooltip(props: TooltipProps & PopoverProps): JSX.Element {
+  const isTouch = useTouch();
+  return (
+    <TooltipProvider>
+      {isTouch ? <Popover {...props} /> : <OriginalTooltip {...props} />}
+    </TooltipProvider>
+  );
+}
+
+export function TooltipTrigger(
+  props: TooltipTriggerProps & PopoverTriggerProps
+): JSX.Element {
+  const isTouch = useTouch();
+  return isTouch ? (
+    <PopoverTrigger {...props} />
+  ) : (
+    <OriginalTooltipTrigger {...props} />
+  );
+}
+
+export function TooltipContent(
+  props: TooltipContentProps & PopoverContentProps
+): JSX.Element {
+  const isTouch = useTouch();
+  return isTouch ? (
+    <PopoverContent {...props} />
+  ) : (
+    <OriginalTooltipContent {...props} />
+  );
+}