refactor(core)!: tighten constrained jsx boundary

packages/react/src/player/context.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import type { Media } from '@videojs/core';
+import type { ContainerProps as CoreContainerProps, Media } from '@videojs/core';
 import type { MediaContainer, PopupGroup } from '@videojs/core/dom';
 import type { UnknownState, UnknownStore } from '@videojs/store';
 import { useStore } from '@videojs/store/react';
@@ -113,7 +113,7 @@ export function useContainerAttach(): Dispatch<SetStateAction<HTMLElement | null
   return ctx?.setContainer;
 }
 
-export interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
+export interface ContainerProps extends HTMLAttributes<HTMLDivElement>, CoreContainerProps {
   children?: ReactNode;
 }
 

packages/react/src/ui/gesture/gesture.tsx

@@ -1,28 +1,12 @@
 'use client';
 
-import {
-  type AnyPlayerStore,
-  createDoubleTapGesture,
-  createTapGesture,
-  type GestureActionName,
-  type GesturePointerType,
-  type GestureRegion,
-  resolveGestureAction,
-} from '@videojs/core/dom';
+import type { GestureProps } from '@videojs/core';
+import { type AnyPlayerStore, createDoubleTapGesture, createTapGesture, resolveGestureAction } from '@videojs/core/dom';
 import type { ReactNode } from 'react';
 import { useEffect } from 'react';
 
 import { useContainer, usePlayer } from '../../player/context';
 
-export interface GestureProps {
-  type: 'tap' | 'doubletap' | (string & {});
-  action: GestureActionName | (string & {});
-  value?: number;
-  pointer?: GesturePointerType;
-  region?: GestureRegion;
-  disabled?: boolean;
-}
-
 export function Gesture({ type, action, value, pointer, region, disabled }: GestureProps): ReactNode {
   const store = usePlayer() as AnyPlayerStore;
   const container = useContainer();
@@ -53,6 +37,8 @@ export namespace Gesture {
   export type Props = GestureProps;
 }
 
+export type { GestureProps };
+
 /** @deprecated Use `GestureProps` instead. */
 export type MediaGestureProps = GestureProps;
 

packages/react/src/ui/hotkey/hotkey.tsx

@@ -1,25 +1,12 @@
 'use client';
 
-import {
-  type AnyPlayerStore,
-  createHotkey,
-  type HotkeyActionName,
-  isHotkeyToggleAction,
-  resolveHotkeyAction,
-} from '@videojs/core/dom';
+import type { HotkeyProps } from '@videojs/core';
+import { type AnyPlayerStore, createHotkey, isHotkeyToggleAction, resolveHotkeyAction } from '@videojs/core/dom';
 import type { ReactNode } from 'react';
 import { useEffect } from 'react';
 
 import { useContainer, usePlayer } from '../../player/context';
 
-export interface HotkeyProps {
-  keys: string;
-  action: HotkeyActionName | (string & {});
-  value?: number;
-  disabled?: boolean;
-  target?: 'player' | 'document';
-}
-
 export function Hotkey({ keys, action, value, disabled, target }: HotkeyProps): ReactNode {
   const store = usePlayer() as AnyPlayerStore;
   const container = useContainer();
@@ -50,6 +37,8 @@ export namespace Hotkey {
   export type Props = HotkeyProps;
 }
 
+export type { HotkeyProps };
+
 /** @deprecated Use `HotkeyProps` instead. */
 export type MediaHotkeyProps = HotkeyProps;
 

packages/react/src/ui/hotkey/use-hotkey.ts

@@ -1,5 +1,6 @@
 'use client';
 
+import type { HotkeyTarget } from '@videojs/core';
 import { createHotkey } from '@videojs/core/dom';
 import { useEffect } from 'react';
 
@@ -9,7 +10,7 @@ import { useLatestRef } from '../../utils/use-latest-ref';
 export interface UseHotkeyOptions {
   keys: string;
   onActivate: (event: KeyboardEvent, key: string) => void;
-  target?: 'player' | 'document';
+  target?: HotkeyTarget;
   repeatable?: boolean;
   disabled?: boolean;
 }