@livekit/components-react - npm Package Compare versions

Comparing version 0.1.8 to 0.1.9

dist/components/Chat.d.ts

@@ -0,0 +0,0 @@ import { ChatMessage } from '@livekit/components-core';

dist/components/ConnectionState.d.ts

@@ -0,0 +0,0 @@ import type { Room } from 'livekit-client';

dist/components/controls/DeviceSelector.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

dist/components/controls/DisconnectButton.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

dist/components/controls/MediaControlButton.d.ts

@@ -28,2 +28,7 @@ import { LocalParticipant, Track, TrackPublication } from 'livekit-client';
         onClick: React.MouseEventHandler<HTMLButtonElement>;
+        children?: React.ReactNode;
+        className: string;
+        slot?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        title?: string | undefined;
         defaultChecked?: boolean | undefined;
@@ -34,3 +39,2 @@ defaultValue?: string | number | readonly string[] | undefined;
         accessKey?: string | undefined;
-        className: string;
         contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
@@ -45,7 +49,4 @@ contextMenu?: string | undefined;
         placeholder?: string | undefined;
-        slot?: string | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        style?: React.CSSProperties | undefined;
         tabIndex?: number | undefined;
-        title?: string | undefined;
         translate?: "yes" | "no" | undefined;
@@ -85,3 +86,3 @@ radioGroup?: string | undefined;
         'aria-controls'?: string | undefined;
-        'aria-current'?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | undefined;
+        'aria-current'?: boolean | "true" | "false" | "time" | "page" | "step" | "location" | "date" | undefined;
         'aria-describedby'?: string | undefined;
@@ -124,3 +125,2 @@ 'aria-details'?: string | undefined;
         'aria-valuetext'?: string | undefined;
-        children?: React.ReactNode;
         dangerouslySetInnerHTML?: {
@@ -127,0 +127,0 @@ __html: string;

dist/components/controls/StartAudio.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

dist/components/FocusViewRenderer.d.ts

@@ -0,0 +0,0 @@ import { TrackPublication } from 'livekit-client';

dist/components/layout/FocusView.d.ts

@@ -0,0 +0,0 @@ import { Participant, Track } from 'livekit-client';

dist/components/layout/GridView.d.ts

@@ -0,0 +0,0 @@ import { Participant } from 'livekit-client';

dist/components/LiveKitRoom.d.ts

@@ -0,0 +0,0 @@ import { AudioCaptureOptions, Room, RoomConnectOptions, RoomOptions, ScreenShareCaptureOptions, VideoCaptureOptions } from 'livekit-client';

dist/components/participant/ConnectionQualityIndicator.d.ts

@@ -63,3 +63,3 @@ import * as React from 'react';
         'aria-controls'?: string | undefined;
-        'aria-current'?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | undefined;
+        'aria-current'?: boolean | "true" | "false" | "time" | "page" | "step" | "location" | "date" | undefined;
         'aria-describedby'?: string | undefined;
@@ -66,0 +66,0 @@ 'aria-details'?: string | undefined;

dist/components/participant/MediaMutedIndicator.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

dist/components/participant/MediaTrack.d.ts

@@ -0,0 +0,0 @@ import { Participant, Track } from 'livekit-client';

dist/components/participant/Participant.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

dist/components/participant/ParticipantName.d.ts

@@ -0,0 +0,0 @@ import { Participant } from 'livekit-client';

dist/components/Participants.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

dist/components/PinContextProvider.d.ts

@@ -0,0 +0,0 @@ import { PinState } from '@livekit/components-core';

dist/components/RoomAudioRenderer.d.ts

 export declare const RoomAudioRenderer: () => JSX.Element;
 //# sourceMappingURL=RoomAudioRenderer.d.ts.map

dist/components/RoomName.d.ts

@@ -0,0 +0,0 @@ import { Room } from 'livekit-client';

dist/components/ScreenShareRenderer.d.ts

@@ -0,0 +0,0 @@ import { ScreenShareTrackMap } from '@livekit/components-core';

dist/contexts.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

dist/index.d.ts

@@ -1,25 +0,806 @@
-export * from './contexts';
-export * from './components/participant/Participant';
-export * from './components/participant/ConnectionQualityIndicator';
-export * from './components/LiveKitRoom';
-export * from './components/controls/MediaControlButton';
-export * from './components/Participants';
-export * from './components/ConnectionState';
-export * from './components/controls/DisconnectButton';
-export * from './components/ScreenShareRenderer';
-export * from './components/participant/MediaMutedIndicator';
-export * from './components/participant/ParticipantName';
-export * from './components/RoomName';
-export * from './components/RoomAudioRenderer';
-export * from './components/FocusViewRenderer';
-export * from './components/participant/MediaTrack';
-export * from './components/layout/FocusView';
-export * from './components/layout/GridView';
-export * from './components/controls/DeviceSelector';
-export * from './components/Chat';
-export * from './components/controls/StartAudio';
-export * from './components/PinContextProvider';
-export * from './prefabs/PreJoin';
-export * from './prefabs/DefaultRoomView';
-export * from './prefabs/DefaultControls';
-//# sourceMappingURL=index.d.ts.map
+import * as React$1 from 'react';
+import { PinState, ScreenShareTrackMap, ChatMessage } from '@livekit/components-core';
+import * as livekit_client from 'livekit-client';
+import { Participant, Room, Track, TrackPublication, ConnectionQuality, RoomOptions, RoomConnectOptions, AudioCaptureOptions, VideoCaptureOptions, ScreenShareCaptureOptions, LocalParticipant } from 'livekit-client';
+
+declare const ParticipantContext: React$1.Context<Participant | undefined>;
+declare function useParticipantContext(): Participant;
+declare function useMaybeParticipantContext(): Participant | undefined;
+declare function useEnsureParticipant(participant?: Participant): Participant;
+declare const RoomContext: React$1.Context<Room | undefined>;
+declare function useRoomContext(): Room;
+declare function useMaybeRoomContext(): Room | undefined;
+declare function useEnsureRoom(room?: Room): Room;
+declare type PinAction = {
+    msg: 'set_pin';
+    participant: Participant;
+    source: Track.Source;
+} | {
+    msg: 'clear_pin';
+};
+declare type PinContextType = {
+    dispatch?: React.Dispatch<PinAction>;
+    state?: PinState;
+};
+declare const PinContext: React$1.Context<PinContextType>;
+declare function usePinContext(): PinContextType;
+declare function useMaybePinContext(): PinContextType;
+
+interface ParticipantClickEvent {
+    participant?: Participant;
+    publication?: TrackPublication;
+}
+declare type ParticipantProps = React$1.HTMLAttributes<HTMLDivElement> & {
+    participant?: Participant;
+    trackSource?: Track.Source;
+    onParticipantClick?: (evt: ParticipantClickEvent) => void;
+};
+declare const useMediaTrack: (participant: Participant, source: Track.Source, element?: React$1.RefObject<HTMLMediaElement>, props?: React$1.HTMLAttributes<HTMLVideoElement | HTMLAudioElement>) => {
+    publication: TrackPublication | undefined;
+    isMuted: boolean | undefined;
+    isSubscribed: boolean | undefined;
+    track: Track | undefined;
+    elementProps: React$1.HTMLAttributes<HTMLElement>;
+};
+declare function useIsSpeaking(participant?: Participant): boolean;
+declare function useIsMuted(source: Track.Source, participant?: Participant): boolean;
+declare const ParticipantView: ({ participant, children, onParticipantClick, trackSource, ...htmlProps }: ParticipantProps) => JSX.Element;
+
+interface ConnectionQualityIndicatorProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    participant?: Participant;
+}
+declare const useConnectionQualityIndicator: (props?: ConnectionQualityIndicatorProps) => {
+    elementProps: {
+        'data-lk-quality': ConnectionQuality;
+        defaultChecked?: boolean | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined;
+        suppressHydrationWarning?: boolean | undefined;
+        accessKey?: string | undefined;
+        className?: string | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+        contextMenu?: string | undefined;
+        dir?: string | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        hidden?: boolean | undefined;
+        id?: string | undefined;
+        lang?: string | undefined;
+        nonce?: string | undefined;
+        placeholder?: string | undefined;
+        slot?: string | undefined;
+        spellCheck?: (boolean | "true" | "false") | undefined;
+        style?: React$1.CSSProperties | undefined;
+        tabIndex?: number | undefined;
+        title?: string | undefined;
+        translate?: "yes" | "no" | undefined;
+        radioGroup?: string | undefined;
+        role?: React$1.AriaRole | undefined;
+        about?: string | undefined;
+        datatype?: string | undefined;
+        inlist?: any;
+        prefix?: string | undefined;
+        property?: string | undefined;
+        resource?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autoCapitalize?: string | undefined;
+        autoCorrect?: string | undefined;
+        autoSave?: string | undefined;
+        color?: string | undefined;
+        itemProp?: string | undefined;
+        itemScope?: boolean | undefined;
+        itemType?: string | undefined;
+        itemID?: string | undefined;
+        itemRef?: string | undefined;
+        results?: number | undefined;
+        security?: string | undefined;
+        unselectable?: "on" | "off" | undefined;
+        inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+        is?: string | undefined;
+        'aria-activedescendant'?: string | undefined;
+        'aria-atomic'?: (boolean | "true" | "false") | undefined;
+        'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
+        'aria-busy'?: (boolean | "true" | "false") | undefined;
+        'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
+        'aria-colcount'?: number | undefined;
+        'aria-colindex'?: number | undefined;
+        'aria-colspan'?: number | undefined;
+        'aria-controls'?: string | undefined;
+        'aria-current'?: boolean | "true" | "false" | "time" | "page" | "step" | "location" | "date" | undefined;
+        'aria-describedby'?: string | undefined;
+        'aria-details'?: string | undefined;
+        'aria-disabled'?: (boolean | "true" | "false") | undefined;
+        'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+        'aria-errormessage'?: string | undefined;
+        'aria-expanded'?: (boolean | "true" | "false") | undefined;
+        'aria-flowto'?: string | undefined;
+        'aria-grabbed'?: (boolean | "true" | "false") | undefined;
+        'aria-haspopup'?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
+        'aria-hidden'?: (boolean | "true" | "false") | undefined;
+        'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+        'aria-keyshortcuts'?: string | undefined;
+        'aria-label'?: string | undefined;
+        'aria-labelledby'?: string | undefined;
+        'aria-level'?: number | undefined;
+        'aria-live'?: "off" | "assertive" | "polite" | undefined;
+        'aria-modal'?: (boolean | "true" | "false") | undefined;
+        'aria-multiline'?: (boolean | "true" | "false") | undefined;
+        'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
+        'aria-orientation'?: "horizontal" | "vertical" | undefined;
+        'aria-owns'?: string | undefined;
+        'aria-placeholder'?: string | undefined;
+        'aria-posinset'?: number | undefined;
+        'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
+        'aria-readonly'?: (boolean | "true" | "false") | undefined;
+        'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+        'aria-required'?: (boolean | "true" | "false") | undefined;
+        'aria-roledescription'?: string | undefined;
+        'aria-rowcount'?: number | undefined;
+        'aria-rowindex'?: number | undefined;
+        'aria-rowspan'?: number | undefined;
+        'aria-selected'?: (boolean | "true" | "false") | undefined;
+        'aria-setsize'?: number | undefined;
+        'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
+        'aria-valuemax'?: number | undefined;
+        'aria-valuemin'?: number | undefined;
+        'aria-valuenow'?: number | undefined;
+        'aria-valuetext'?: string | undefined;
+        children?: React$1.ReactNode;
+        dangerouslySetInnerHTML?: {
+            __html: string;
+        } | undefined;
+        onCopy?: React$1.ClipboardEventHandler<HTMLElement> | undefined;
+        onCopyCapture?: React$1.ClipboardEventHandler<HTMLElement> | undefined;
+        onCut?: React$1.ClipboardEventHandler<HTMLElement> | undefined;
+        onCutCapture?: React$1.ClipboardEventHandler<HTMLElement> | undefined;
+        onPaste?: React$1.ClipboardEventHandler<HTMLElement> | undefined;
+        onPasteCapture?: React$1.ClipboardEventHandler<HTMLElement> | undefined;
+        onCompositionEnd?: React$1.CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionEndCapture?: React$1.CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionStart?: React$1.CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionStartCapture?: React$1.CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionUpdate?: React$1.CompositionEventHandler<HTMLElement> | undefined;
+        onCompositionUpdateCapture?: React$1.CompositionEventHandler<HTMLElement> | undefined;
+        onFocus?: React$1.FocusEventHandler<HTMLElement> | undefined;
+        onFocusCapture?: React$1.FocusEventHandler<HTMLElement> | undefined;
+        onBlur?: React$1.FocusEventHandler<HTMLElement> | undefined;
+        onBlurCapture?: React$1.FocusEventHandler<HTMLElement> | undefined;
+        onChange?: React$1.FormEventHandler<HTMLElement> | undefined;
+        onChangeCapture?: React$1.FormEventHandler<HTMLElement> | undefined;
+        onBeforeInput?: React$1.FormEventHandler<HTMLElement> | undefined;
+        onBeforeInputCapture?: React$1.FormEventHandler<HTMLElement> | undefined;
+        onInput?: React$1.FormEventHandler<HTMLElement> | undefined;
+        onInputCapture?: React$1.FormEventHandler<HTMLElement> | undefined;
+        onReset?: React$1.FormEventHandler<HTMLElement> | undefined;
+        onResetCapture?: React$1.FormEventHandler<HTMLElement> | undefined;
+        onSubmit?: React$1.FormEventHandler<HTMLElement> | undefined;
+        onSubmitCapture?: React$1.FormEventHandler<HTMLElement> | undefined;
+        onInvalid?: React$1.FormEventHandler<HTMLElement> | undefined;
+        onInvalidCapture?: React$1.FormEventHandler<HTMLElement> | undefined;
+        onLoad?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onLoadCapture?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onError?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onErrorCapture?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onKeyDown?: React$1.KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyDownCapture?: React$1.KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyPress?: React$1.KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyPressCapture?: React$1.KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyUp?: React$1.KeyboardEventHandler<HTMLElement> | undefined;
+        onKeyUpCapture?: React$1.KeyboardEventHandler<HTMLElement> | undefined;
+        onAbort?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onAbortCapture?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onCanPlay?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onCanPlayCapture?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onCanPlayThrough?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onCanPlayThroughCapture?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onDurationChange?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onDurationChangeCapture?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onEmptied?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onEmptiedCapture?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onEncrypted?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onEncryptedCapture?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onEnded?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onEndedCapture?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onLoadedData?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onLoadedDataCapture?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onLoadedMetadata?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onLoadedMetadataCapture?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onLoadStart?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onLoadStartCapture?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onPause?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onPauseCapture?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onPlay?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onPlayCapture?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onPlaying?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onPlayingCapture?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onProgress?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onProgressCapture?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onRateChange?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onRateChangeCapture?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onResize?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onResizeCapture?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onSeeked?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onSeekedCapture?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onSeeking?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onSeekingCapture?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onStalled?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onStalledCapture?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onSuspend?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onSuspendCapture?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onTimeUpdate?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onTimeUpdateCapture?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onVolumeChange?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onVolumeChangeCapture?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onWaiting?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onWaitingCapture?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onAuxClick?: React$1.MouseEventHandler<HTMLElement> | undefined;
+        onAuxClickCapture?: React$1.MouseEventHandler<HTMLElement> | undefined;
+        onClick?: React$1.MouseEventHandler<HTMLElement> | undefined;
+        onClickCapture?: React$1.MouseEventHandler<HTMLElement> | undefined;
+        onContextMenu?: React$1.MouseEventHandler<HTMLElement> | undefined;
+        onContextMenuCapture?: React$1.MouseEventHandler<HTMLElement> | undefined;
+        onDoubleClick?: React$1.MouseEventHandler<HTMLElement> | undefined;
+        onDoubleClickCapture?: React$1.MouseEventHandler<HTMLElement> | undefined;
+        onDrag?: React$1.DragEventHandler<HTMLElement> | undefined;
+        onDragCapture?: React$1.DragEventHandler<HTMLElement> | undefined;
+        onDragEnd?: React$1.DragEventHandler<HTMLElement> | undefined;
+        onDragEndCapture?: React$1.DragEventHandler<HTMLElement> | undefined;
+        onDragEnter?: React$1.DragEventHandler<HTMLElement> | undefined;
+        onDragEnterCapture?: React$1.DragEventHandler<HTMLElement> | undefined;
+        onDragExit?: React$1.DragEventHandler<HTMLElement> | undefined;
+        onDragExitCapture?: React$1.DragEventHandler<HTMLElement> | undefined;
+        onDragLeave?: React$1.DragEventHandler<HTMLElement> | undefined;
+        onDragLeaveCapture?: React$1.DragEventHandler<HTMLElement> | undefined;
+        onDragOver?: React$1.DragEventHandler<HTMLElement> | undefined;
+        onDragOverCapture?: React$1.DragEventHandler<HTMLElement> | undefined;
+        onDragStart?: React$1.DragEventHandler<HTMLElement> | undefined;
+        onDragStartCapture?: React$1.DragEventHandler<HTMLElement> | undefined;
+        onDrop?: React$1.DragEventHandler<HTMLElement> | undefined;
+        onDropCapture?: React$1.DragEventHandler<HTMLElement> | undefined;
+        onMouseDown?: React$1.MouseEventHandler<HTMLElement> | undefined;
+        onMouseDownCapture?: React$1.MouseEventHandler<HTMLElement> | undefined;
+        onMouseEnter?: React$1.MouseEventHandler<HTMLElement> | undefined;
+        onMouseLeave?: React$1.MouseEventHandler<HTMLElement> | undefined;
+        onMouseMove?: React$1.MouseEventHandler<HTMLElement> | undefined;
+        onMouseMoveCapture?: React$1.MouseEventHandler<HTMLElement> | undefined;
+        onMouseOut?: React$1.MouseEventHandler<HTMLElement> | undefined;
+        onMouseOutCapture?: React$1.MouseEventHandler<HTMLElement> | undefined;
+        onMouseOver?: React$1.MouseEventHandler<HTMLElement> | undefined;
+        onMouseOverCapture?: React$1.MouseEventHandler<HTMLElement> | undefined;
+        onMouseUp?: React$1.MouseEventHandler<HTMLElement> | undefined;
+        onMouseUpCapture?: React$1.MouseEventHandler<HTMLElement> | undefined;
+        onSelect?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onSelectCapture?: React$1.ReactEventHandler<HTMLElement> | undefined;
+        onTouchCancel?: React$1.TouchEventHandler<HTMLElement> | undefined;
+        onTouchCancelCapture?: React$1.TouchEventHandler<HTMLElement> | undefined;
+        onTouchEnd?: React$1.TouchEventHandler<HTMLElement> | undefined;
+        onTouchEndCapture?: React$1.TouchEventHandler<HTMLElement> | undefined;
+        onTouchMove?: React$1.TouchEventHandler<HTMLElement> | undefined;
+        onTouchMoveCapture?: React$1.TouchEventHandler<HTMLElement> | undefined;
+        onTouchStart?: React$1.TouchEventHandler<HTMLElement> | undefined;
+        onTouchStartCapture?: React$1.TouchEventHandler<HTMLElement> | undefined;
+        onPointerDown?: React$1.PointerEventHandler<HTMLElement> | undefined;
+        onPointerDownCapture?: React$1.PointerEventHandler<HTMLElement> | undefined;
+        onPointerMove?: React$1.PointerEventHandler<HTMLElement> | undefined;
+        onPointerMoveCapture?: React$1.PointerEventHandler<HTMLElement> | undefined;
+        onPointerUp?: React$1.PointerEventHandler<HTMLElement> | undefined;
+        onPointerUpCapture?: React$1.PointerEventHandler<HTMLElement> | undefined;
+        onPointerCancel?: React$1.PointerEventHandler<HTMLElement> | undefined;
+        onPointerCancelCapture?: React$1.PointerEventHandler<HTMLElement> | undefined;
+        onPointerEnter?: React$1.PointerEventHandler<HTMLElement> | undefined;
+        onPointerEnterCapture?: React$1.PointerEventHandler<HTMLElement> | undefined;
+        onPointerLeave?: React$1.PointerEventHandler<HTMLElement> | undefined;
+        onPointerLeaveCapture?: React$1.PointerEventHandler<HTMLElement> | undefined;
+        onPointerOver?: React$1.PointerEventHandler<HTMLElement> | undefined;
+        onPointerOverCapture?: React$1.PointerEventHandler<HTMLElement> | undefined;
+        onPointerOut?: React$1.PointerEventHandler<HTMLElement> | undefined;
+        onPointerOutCapture?: React$1.PointerEventHandler<HTMLElement> | undefined;
+        onGotPointerCapture?: React$1.PointerEventHandler<HTMLElement> | undefined;
+        onGotPointerCaptureCapture?: React$1.PointerEventHandler<HTMLElement> | undefined;
+        onLostPointerCapture?: React$1.PointerEventHandler<HTMLElement> | undefined;
+        onLostPointerCaptureCapture?: React$1.PointerEventHandler<HTMLElement> | undefined;
+        onScroll?: React$1.UIEventHandler<HTMLElement> | undefined;
+        onScrollCapture?: React$1.UIEventHandler<HTMLElement> | undefined;
+        onWheel?: React$1.WheelEventHandler<HTMLElement> | undefined;
+        onWheelCapture?: React$1.WheelEventHandler<HTMLElement> | undefined;
+        onAnimationStart?: React$1.AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationStartCapture?: React$1.AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationEnd?: React$1.AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationEndCapture?: React$1.AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationIteration?: React$1.AnimationEventHandler<HTMLElement> | undefined;
+        onAnimationIterationCapture?: React$1.AnimationEventHandler<HTMLElement> | undefined;
+        onTransitionEnd?: React$1.TransitionEventHandler<HTMLElement> | undefined;
+        onTransitionEndCapture?: React$1.TransitionEventHandler<HTMLElement> | undefined;
+    };
+    quality: ConnectionQuality;
+};
+/**
+ * Indicates the connection quality of the participant.
+ */
+declare const ConnectionQualityIndicator: (props: ConnectionQualityIndicatorProps) => JSX.Element;
+
+declare type LiveKitRoomProps = {
+    children?: React$1.ReactNode | React$1.ReactNode[];
+    serverUrl?: string;
+    token?: string;
+    room?: Room;
+    options?: RoomOptions;
+    connectOptions?: RoomConnectOptions;
+    audio?: AudioCaptureOptions | boolean;
+    video?: VideoCaptureOptions | boolean;
+    screen?: ScreenShareCaptureOptions | boolean;
+    connect?: boolean;
+    onConnected?: () => void;
+    onDisconnected?: () => void;
+    onError?: (error: Error) => void;
+};
+interface UserInfo {
+    identity?: string;
+    name?: string;
+    metadata?: string;
+}
+declare function useToken(tokenEndpoint: string | undefined, roomName: string, userInfo?: UserInfo): string | undefined;
+declare const useLiveKitRoom: (props: LiveKitRoomProps) => Room;
+declare const LiveKitRoom: (props: LiveKitRoomProps) => JSX.Element;
+
+declare type MediaControlProps = Omit<React$1.HTMLAttributes<HTMLButtonElement>, 'onChange'> & {
+    source: Track.Source;
+    initialState?: boolean;
+    onChange?: (enabled: boolean) => void;
+};
+declare const TrackSource: typeof Track.Source;
+declare const useLocalParticipant: () => {
+    isMicrophoneEnabled: boolean;
+    isScreenShareEnabled: boolean;
+    isCameraEnabled: boolean;
+    microphoneTrack: TrackPublication | undefined;
+    cameraTrack: TrackPublication | undefined;
+    localParticipant: LocalParticipant;
+};
+declare const useMediaToggle: ({ source, onChange, initialState, ...rest }: MediaControlProps) => {
+    toggle: () => void;
+    enabled: boolean;
+    pending: boolean;
+    track: livekit_client.LocalTrackPublication | undefined;
+    buttonProps: {
+        'aria-pressed': boolean;
+        'data-lk-source': Track.Source;
+        'data-lk-enabled': boolean;
+        disabled: boolean;
+        onClick: React$1.MouseEventHandler<HTMLButtonElement>;
+        children?: React$1.ReactNode;
+        className: string;
+        slot?: string | undefined;
+        style?: React$1.CSSProperties | undefined;
+        title?: string | undefined;
+        defaultChecked?: boolean | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined;
+        suppressHydrationWarning?: boolean | undefined;
+        accessKey?: string | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+        contextMenu?: string | undefined;
+        dir?: string | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        hidden?: boolean | undefined;
+        id?: string | undefined;
+        lang?: string | undefined;
+        nonce?: string | undefined;
+        placeholder?: string | undefined;
+        spellCheck?: (boolean | "true" | "false") | undefined;
+        tabIndex?: number | undefined;
+        translate?: "yes" | "no" | undefined;
+        radioGroup?: string | undefined;
+        role?: React$1.AriaRole | undefined;
+        about?: string | undefined;
+        datatype?: string | undefined;
+        inlist?: any;
+        prefix?: string | undefined;
+        property?: string | undefined;
+        resource?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autoCapitalize?: string | undefined;
+        autoCorrect?: string | undefined;
+        autoSave?: string | undefined;
+        color?: string | undefined;
+        itemProp?: string | undefined;
+        itemScope?: boolean | undefined;
+        itemType?: string | undefined;
+        itemID?: string | undefined;
+        itemRef?: string | undefined;
+        results?: number | undefined;
+        security?: string | undefined;
+        unselectable?: "on" | "off" | undefined;
+        inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+        is?: string | undefined;
+        'aria-activedescendant'?: string | undefined;
+        'aria-atomic'?: (boolean | "true" | "false") | undefined;
+        'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
+        'aria-busy'?: (boolean | "true" | "false") | undefined;
+        'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
+        'aria-colcount'?: number | undefined;
+        'aria-colindex'?: number | undefined;
+        'aria-colspan'?: number | undefined;
+        'aria-controls'?: string | undefined;
+        'aria-current'?: boolean | "true" | "false" | "time" | "page" | "step" | "location" | "date" | undefined;
+        'aria-describedby'?: string | undefined;
+        'aria-details'?: string | undefined;
+        'aria-disabled'?: (boolean | "true" | "false") | undefined;
+        'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+        'aria-errormessage'?: string | undefined;
+        'aria-expanded'?: (boolean | "true" | "false") | undefined;
+        'aria-flowto'?: string | undefined;
+        'aria-grabbed'?: (boolean | "true" | "false") | undefined;
+        'aria-haspopup'?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
+        'aria-hidden'?: (boolean | "true" | "false") | undefined;
+        'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+        'aria-keyshortcuts'?: string | undefined;
+        'aria-label'?: string | undefined;
+        'aria-labelledby'?: string | undefined;
+        'aria-level'?: number | undefined;
+        'aria-live'?: "off" | "assertive" | "polite" | undefined;
+        'aria-modal'?: (boolean | "true" | "false") | undefined;
+        'aria-multiline'?: (boolean | "true" | "false") | undefined;
+        'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
+        'aria-orientation'?: "horizontal" | "vertical" | undefined;
+        'aria-owns'?: string | undefined;
+        'aria-placeholder'?: string | undefined;
+        'aria-posinset'?: number | undefined;
+        'aria-readonly'?: (boolean | "true" | "false") | undefined;
+        'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+        'aria-required'?: (boolean | "true" | "false") | undefined;
+        'aria-roledescription'?: string | undefined;
+        'aria-rowcount'?: number | undefined;
+        'aria-rowindex'?: number | undefined;
+        'aria-rowspan'?: number | undefined;
+        'aria-selected'?: (boolean | "true" | "false") | undefined;
+        'aria-setsize'?: number | undefined;
+        'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
+        'aria-valuemax'?: number | undefined;
+        'aria-valuemin'?: number | undefined;
+        'aria-valuenow'?: number | undefined;
+        'aria-valuetext'?: string | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string;
+        } | undefined;
+        onCopy?: React$1.ClipboardEventHandler<HTMLButtonElement> | undefined;
+        onCopyCapture?: React$1.ClipboardEventHandler<HTMLButtonElement> | undefined;
+        onCut?: React$1.ClipboardEventHandler<HTMLButtonElement> | undefined;
+        onCutCapture?: React$1.ClipboardEventHandler<HTMLButtonElement> | undefined;
+        onPaste?: React$1.ClipboardEventHandler<HTMLButtonElement> | undefined;
+        onPasteCapture?: React$1.ClipboardEventHandler<HTMLButtonElement> | undefined;
+        onCompositionEnd?: React$1.CompositionEventHandler<HTMLButtonElement> | undefined;
+        onCompositionEndCapture?: React$1.CompositionEventHandler<HTMLButtonElement> | undefined;
+        onCompositionStart?: React$1.CompositionEventHandler<HTMLButtonElement> | undefined;
+        onCompositionStartCapture?: React$1.CompositionEventHandler<HTMLButtonElement> | undefined;
+        onCompositionUpdate?: React$1.CompositionEventHandler<HTMLButtonElement> | undefined;
+        onCompositionUpdateCapture?: React$1.CompositionEventHandler<HTMLButtonElement> | undefined;
+        onFocus?: React$1.FocusEventHandler<HTMLButtonElement> | undefined;
+        onFocusCapture?: React$1.FocusEventHandler<HTMLButtonElement> | undefined;
+        onBlur?: React$1.FocusEventHandler<HTMLButtonElement> | undefined;
+        onBlurCapture?: React$1.FocusEventHandler<HTMLButtonElement> | undefined;
+        onChangeCapture?: React$1.FormEventHandler<HTMLButtonElement> | undefined;
+        onBeforeInput?: React$1.FormEventHandler<HTMLButtonElement> | undefined;
+        onBeforeInputCapture?: React$1.FormEventHandler<HTMLButtonElement> | undefined;
+        onInput?: React$1.FormEventHandler<HTMLButtonElement> | undefined;
+        onInputCapture?: React$1.FormEventHandler<HTMLButtonElement> | undefined;
+        onReset?: React$1.FormEventHandler<HTMLButtonElement> | undefined;
+        onResetCapture?: React$1.FormEventHandler<HTMLButtonElement> | undefined;
+        onSubmit?: React$1.FormEventHandler<HTMLButtonElement> | undefined;
+        onSubmitCapture?: React$1.FormEventHandler<HTMLButtonElement> | undefined;
+        onInvalid?: React$1.FormEventHandler<HTMLButtonElement> | undefined;
+        onInvalidCapture?: React$1.FormEventHandler<HTMLButtonElement> | undefined;
+        onLoad?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onLoadCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onError?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onErrorCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onKeyDown?: React$1.KeyboardEventHandler<HTMLButtonElement> | undefined;
+        onKeyDownCapture?: React$1.KeyboardEventHandler<HTMLButtonElement> | undefined;
+        onKeyPress?: React$1.KeyboardEventHandler<HTMLButtonElement> | undefined;
+        onKeyPressCapture?: React$1.KeyboardEventHandler<HTMLButtonElement> | undefined;
+        onKeyUp?: React$1.KeyboardEventHandler<HTMLButtonElement> | undefined;
+        onKeyUpCapture?: React$1.KeyboardEventHandler<HTMLButtonElement> | undefined;
+        onAbort?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onAbortCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onCanPlay?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onCanPlayCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onCanPlayThrough?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onCanPlayThroughCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onDurationChange?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onDurationChangeCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onEmptied?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onEmptiedCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onEncrypted?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onEncryptedCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onEnded?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onEndedCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onLoadedData?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onLoadedDataCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onLoadedMetadata?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onLoadedMetadataCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onLoadStart?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onLoadStartCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onPause?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onPauseCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onPlay?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onPlayCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onPlaying?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onPlayingCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onProgress?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onProgressCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onRateChange?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onRateChangeCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onResize?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onResizeCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onSeeked?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onSeekedCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onSeeking?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onSeekingCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onStalled?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onStalledCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onSuspend?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onSuspendCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onTimeUpdate?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onTimeUpdateCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onVolumeChange?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onVolumeChangeCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onWaiting?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onWaitingCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onAuxClick?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
+        onAuxClickCapture?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
+        onClickCapture?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
+        onContextMenu?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
+        onContextMenuCapture?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
+        onDoubleClick?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
+        onDoubleClickCapture?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
+        onDrag?: React$1.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragCapture?: React$1.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragEnd?: React$1.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragEndCapture?: React$1.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragEnter?: React$1.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragEnterCapture?: React$1.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragExit?: React$1.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragExitCapture?: React$1.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragLeave?: React$1.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragLeaveCapture?: React$1.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragOver?: React$1.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragOverCapture?: React$1.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragStart?: React$1.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragStartCapture?: React$1.DragEventHandler<HTMLButtonElement> | undefined;
+        onDrop?: React$1.DragEventHandler<HTMLButtonElement> | undefined;
+        onDropCapture?: React$1.DragEventHandler<HTMLButtonElement> | undefined;
+        onMouseDown?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseDownCapture?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseEnter?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseLeave?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseMove?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseMoveCapture?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseOut?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseOutCapture?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseOver?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseOverCapture?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseUp?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseUpCapture?: React$1.MouseEventHandler<HTMLButtonElement> | undefined;
+        onSelect?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onSelectCapture?: React$1.ReactEventHandler<HTMLButtonElement> | undefined;
+        onTouchCancel?: React$1.TouchEventHandler<HTMLButtonElement> | undefined;
+        onTouchCancelCapture?: React$1.TouchEventHandler<HTMLButtonElement> | undefined;
+        onTouchEnd?: React$1.TouchEventHandler<HTMLButtonElement> | undefined;
+        onTouchEndCapture?: React$1.TouchEventHandler<HTMLButtonElement> | undefined;
+        onTouchMove?: React$1.TouchEventHandler<HTMLButtonElement> | undefined;
+        onTouchMoveCapture?: React$1.TouchEventHandler<HTMLButtonElement> | undefined;
+        onTouchStart?: React$1.TouchEventHandler<HTMLButtonElement> | undefined;
+        onTouchStartCapture?: React$1.TouchEventHandler<HTMLButtonElement> | undefined;
+        onPointerDown?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerDownCapture?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerMove?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerMoveCapture?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerUp?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerUpCapture?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerCancel?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerCancelCapture?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerEnter?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerEnterCapture?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerLeave?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerLeaveCapture?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerOver?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerOverCapture?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerOut?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerOutCapture?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
+        onGotPointerCapture?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
+        onGotPointerCaptureCapture?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
+        onLostPointerCapture?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
+        onLostPointerCaptureCapture?: React$1.PointerEventHandler<HTMLButtonElement> | undefined;
+        onScroll?: React$1.UIEventHandler<HTMLButtonElement> | undefined;
+        onScrollCapture?: React$1.UIEventHandler<HTMLButtonElement> | undefined;
+        onWheel?: React$1.WheelEventHandler<HTMLButtonElement> | undefined;
+        onWheelCapture?: React$1.WheelEventHandler<HTMLButtonElement> | undefined;
+        onAnimationStart?: React$1.AnimationEventHandler<HTMLButtonElement> | undefined;
+        onAnimationStartCapture?: React$1.AnimationEventHandler<HTMLButtonElement> | undefined;
+        onAnimationEnd?: React$1.AnimationEventHandler<HTMLButtonElement> | undefined;
+        onAnimationEndCapture?: React$1.AnimationEventHandler<HTMLButtonElement> | undefined;
+        onAnimationIteration?: React$1.AnimationEventHandler<HTMLButtonElement> | undefined;
+        onAnimationIterationCapture?: React$1.AnimationEventHandler<HTMLButtonElement> | undefined;
+        onTransitionEnd?: React$1.TransitionEventHandler<HTMLButtonElement> | undefined;
+        onTransitionEndCapture?: React$1.TransitionEventHandler<HTMLButtonElement> | undefined;
+    };
+};
+declare const MediaControlButton: (props: MediaControlProps) => JSX.Element;
+
+declare type ParticipantsProps = {
+    children: React$1.ReactNode | React$1.ReactNode[];
+    filterDependencies?: Array<unknown>;
+    filter?: (participants: Array<Participant>) => Array<Participant>;
+};
+declare const useRemoteParticipants: (filter?: ((participants: Array<Participant>) => Array<Participant>) | undefined) => Participant[];
+declare const useParticipants: (filter?: ((participants: Array<Participant>) => Array<Participant>) | undefined, filterDependencies?: Array<unknown>) => Participant[];
+declare const useSpeakingParticipants: () => Participant[];
+declare const useSortedParticipants: (participants: Array<Participant>) => Participant[];
+declare const Participants: ({ children, filter, filterDependencies }: ParticipantsProps) => JSX.Element;
+
+interface ConnectionStatusProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    room?: Room;
+}
+declare function useConnectionState(room?: Room): livekit_client.ConnectionState;
+declare const ConnectionState: ({ room, ...props }: ConnectionStatusProps) => JSX.Element;
+
+declare type DisconnectButtonProps = React$1.HTMLAttributes<HTMLButtonElement> & {
+    stopTracks?: boolean;
+};
+declare const useDisconnectButton: (props: DisconnectButtonProps) => {
+    buttonProps: React$1.HTMLAttributes<HTMLElement>;
+};
+declare const DisconnectButton: (props: DisconnectButtonProps) => JSX.Element;
+
+declare type ScreenShareOptions = {
+    screenEl?: React$1.RefObject<HTMLVideoElement>;
+    audioEl?: React$1.RefObject<HTMLMediaElement>;
+    onScreenShareChange?: (isActive: boolean, publication?: TrackPublication, participant?: Participant) => void;
+    room?: Room;
+};
+declare const useScreenShare: ({ room, onScreenShareChange, screenEl, }: ScreenShareOptions) => {
+    hasActiveScreenShare: boolean;
+    screenShareTrack: TrackPublication | undefined;
+    screenShareParticipant: Participant | undefined;
+    allScreenShares: ScreenShareTrackMap;
+};
+declare type ScreenShareProps = React$1.HTMLAttributes<HTMLDivElement> & {
+    onScreenShareChange?: (active: boolean) => void;
+};
+declare const ScreenShareView: ({ children, onScreenShareChange, ...htmlProps }: ScreenShareProps) => JSX.Element;
+
+interface MediaMutedIndicatorProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    source: Track.Source;
+    participant?: Participant;
+}
+declare const useMediaMutedIndicator: (source: Track.Source, participant?: Participant, props?: React$1.HtmlHTMLAttributes<HTMLDivElement>) => {
+    isMuted: boolean;
+    htmlProps: React$1.HTMLAttributes<HTMLElement>;
+};
+declare const MediaMutedIndicator: ({ source, participant, ...props }: MediaMutedIndicatorProps) => JSX.Element;
+
+declare const useParticipantInfo: (participant: Participant) => {
+    identity: string;
+    name: string | undefined;
+    metadata: string | undefined;
+};
+interface ParticipantNameProps extends React$1.HTMLAttributes<HTMLSpanElement> {
+}
+declare const ParticipantName: ({ ...props }: ParticipantNameProps) => JSX.Element;
+
+declare const useRoomInfo: (room: Room) => {
+    name: string;
+    metadata: string | undefined;
+};
+interface RoomNameProps extends React$1.HTMLAttributes<HTMLSpanElement> {
+    childrenPosition?: 'before' | 'after';
+}
+declare const RoomName: ({ childrenPosition, children, ...htmlAttributes }: RoomNameProps) => JSX.Element;
+
+declare const RoomAudioRenderer: () => JSX.Element;
+
+declare function useTrack(pub?: TrackPublication): {
+    publication: TrackPublication | undefined;
+    track: livekit_client.Track | undefined;
+};
+
+interface MediaTrackProps<T extends HTMLMediaElement = HTMLMediaElement> extends Omit<React$1.HTMLAttributes<T>, 'children'> {
+    participant?: Participant;
+    source: Track.Source;
+    onTrackClick?: (evt: ParticipantClickEvent) => void;
+}
+declare const MediaTrack: ({ onTrackClick, onClick, ...props }: MediaTrackProps) => JSX.Element;
+
+interface FocusViewContainerProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    focusParticipant?: Participant;
+    focusTrackSource?: Track.Source;
+    participants?: Array<Participant>;
+    onParticipantClick?: (evt: ParticipantClickEvent) => void;
+}
+declare function FocusViewContainer({ focusParticipant, focusTrackSource, onParticipantClick, ...props }: FocusViewContainerProps): JSX.Element;
+interface FocusViewProps extends React$1.HTMLAttributes<HTMLElement> {
+    participant: Participant;
+    trackSource?: Track.Source;
+    onParticipantClick?: (evt: ParticipantClickEvent) => void;
+}
+declare function FocusView({ participant, trackSource, onParticipantClick, ...props }: FocusViewProps): JSX.Element;
+interface CarouselProps extends React$1.HTMLAttributes<HTMLMediaElement> {
+    participants: Participant[];
+    onParticipantClick?: (evt: ParticipantClickEvent) => void;
+    showScreenShares?: boolean;
+}
+declare function CarouselView({ participants, showScreenShares, onParticipantClick, ...props }: CarouselProps): JSX.Element;
+
+interface GridViewProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    participants?: Array<Participant>;
+    showScreenShares?: boolean;
+}
+declare function GridView({ participants, showScreenShares, ...props }: GridViewProps): JSX.Element;
+
+declare const useMediaDevices: (kind: MediaDeviceKind) => MediaDeviceInfo[];
+declare const useDeviceSelector: (kind: MediaDeviceKind, room?: Room) => {
+    devices: MediaDeviceInfo[];
+    className: string;
+    activeDeviceId: string;
+    setActiveMediaDevice: (kind: MediaDeviceKind, id: string) => Promise<void>;
+};
+interface DeviceSelectorProps extends React$1.HTMLAttributes<HTMLUListElement> {
+    kind: MediaDeviceKind;
+    onActiveDeviceChange?: (deviceId: string) => void;
+}
+declare function DeviceSelector({ kind, onActiveDeviceChange, ...props }: DeviceSelectorProps): JSX.Element;
+interface DeviceSelectButtonProps extends React$1.HTMLAttributes<HTMLButtonElement> {
+    kind?: MediaDeviceKind;
+    onActiveDeviceChange?: (kind: MediaDeviceKind, deviceId: string) => void;
+}
+declare const DeviceSelectButton: ({ kind, onActiveDeviceChange, ...props }: DeviceSelectButtonProps) => JSX.Element;
+
+interface ChatProps extends React$1.HTMLAttributes<HTMLDivElement> {
+}
+declare function useChat(): {
+    send: (message: string) => Promise<void>;
+    chatMessages: ChatMessage[];
+    isSending: boolean;
+};
+interface ChatEntryProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    entry: ChatMessage;
+}
+declare function ChatEntry({ entry, ...props }: ChatEntryProps): JSX.Element;
+declare function Chat({ ...props }: ChatProps): JSX.Element;
+
+interface AllowAudioPlaybackProps extends React$1.HTMLAttributes<HTMLButtonElement> {
+    label: string;
+}
+declare const StartAudio: ({ label, ...props }: AllowAudioPlaybackProps) => JSX.Element;
+
+declare type PinContextProviderProps = {
+    children?: React$1.ReactNode | React$1.ReactNode[];
+    onChange?: (pinState: PinState) => void;
+};
+declare const PinContextProvider: ({ onChange, children }: PinContextProviderProps) => JSX.Element;
+
+declare type LocalUserChoices = {
+    username: string;
+    videoEnabled: boolean;
+    audioEnabled: boolean;
+    videoDeviceId: string;
+    audioDeviceId: string;
+};
+declare type PreJoinProps = Omit<React$1.HTMLAttributes<HTMLDivElement>, 'onSubmit'> & {
+    defaults?: Partial<LocalUserChoices>;
+    onValidate?: (values: LocalUserChoices) => boolean;
+    onSubmit?: (values: LocalUserChoices) => void;
+    debug?: boolean;
+};
+declare const PreJoin: ({ defaults, onValidate, onSubmit, debug, ...htmlProps }: PreJoinProps) => JSX.Element;
+
+interface DefaultRoomViewProps extends React$1.HTMLAttributes<HTMLDivElement> {
+}
+declare function DefaultRoomView({ ...props }: DefaultRoomViewProps): JSX.Element;
+
+interface DefaultControlsProps extends React$1.HTMLAttributes<HTMLDivElement> {
+}
+declare function DefaultControls(props: DefaultControlsProps): JSX.Element;
+
+export { CarouselProps, CarouselView, Chat, ChatEntry, ChatEntryProps, ChatProps, ConnectionQualityIndicator, ConnectionQualityIndicatorProps, ConnectionState, ConnectionStatusProps, DefaultControls, DefaultControlsProps, DefaultRoomView, DefaultRoomViewProps, DeviceSelectButton, DeviceSelector, DeviceSelectorProps, DisconnectButton, DisconnectButtonProps, FocusView, FocusViewContainer, FocusViewProps, GridView, GridViewProps, LiveKitRoom, LiveKitRoomProps, LocalUserChoices, MediaControlButton, MediaControlProps, MediaMutedIndicator, MediaMutedIndicatorProps, MediaTrack, MediaTrackProps, ParticipantClickEvent, ParticipantContext, ParticipantName, ParticipantNameProps, ParticipantProps, ParticipantView, Participants, PinAction, PinContext, PinContextProvider, PreJoin, RoomAudioRenderer, RoomContext, RoomName, RoomNameProps, ScreenShareView, StartAudio, TrackSource, useChat, useConnectionQualityIndicator, useConnectionState, useDeviceSelector, useDisconnectButton, useEnsureParticipant, useEnsureRoom, useIsMuted, useIsSpeaking, useLiveKitRoom, useLocalParticipant, useMaybeParticipantContext, useMaybePinContext, useMaybeRoomContext, useMediaDevices, useMediaMutedIndicator, useMediaToggle, useMediaTrack, useParticipantContext, useParticipantInfo, useParticipants, usePinContext, useRemoteParticipants, useRoomContext, useRoomInfo, useScreenShare, useSortedParticipants, useSpeakingParticipants, useToken, useTrack };

dist/mergeProps.d.ts

@@ -0,0 +0,0 @@ /**

dist/prefabs/DefaultControls.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

dist/prefabs/DefaultRoomView.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

dist/prefabs/PreJoin.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

dist/utils.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

package.json

 {
-  "version": "0.1.8",
+  "version": "0.1.9",
   "publishConfig": {
@@ -29,4 +29,4 @@ "access": "restricted"
   "scripts": {
-    "dev": "rollup --config --watch",
-    "build": "rollup --config"
+    "dev": "tsup --watch",
+    "build": "tsup --onSuccess \"tsc --declaration --emitDeclarationOnly\""
   },
@@ -37,3 +37,3 @@ "dependencies": {
   "peerDependencies": {
-    "livekit-client": "^1.4.3",
+    "livekit-client": "^1.5.0",
     "react": ">=18",
@@ -44,12 +44,6 @@ "react-dom": ">=18"
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^23.0.2",
-    "@rollup/plugin-node-resolve": "^15.0.1",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.8",
-    "rollup": "^3.2.5",
-    "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-filesize": "^9.1.2",
-    "rollup-plugin-typescript2": "^0.34.1",
     "tsup": "^6.4.0"
   }
 }

README.md

@@ -1,160 +0,11 @@
-# TSDX React User Guide
-
-Congrats! You just saved yourself hours of work by bootstrapping this project with TSDX. Let’s get you oriented with what’s here and how to use it.
-
-> This TSDX setup is meant for developing React component libraries (not apps!) that can be published to NPM. If you’re looking to build a React-based app, you should use `create-react-app`, `razzle`, `nextjs`, `gatsby`, or `react-static`.
-
-> If you’re new to TypeScript and React, checkout [this handy cheatsheet](https://github.com/sw-yx/react-typescript-cheatsheet/)
-
-## Commands
-
-TSDX scaffolds your new library inside `/src`, and also sets up a [Parcel-based](https://parceljs.org) playground for it inside `/example`.
-
-The recommended workflow is to run TSDX in one terminal:
-
-```bash
-npm start # or yarn start
-```
-
-This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.
-
-Then run the example inside another:
-
-```bash
-cd example
-npm i # or yarn to install dependencies
-npm start # or yarn start
-```
-
-The default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. **No symlinking required**, we use [Parcel's aliasing](https://parceljs.org/module_resolution.html#aliases).
-
-To do a one-off build, use `npm run build` or `yarn build`.
-
-To run tests, use `npm test` or `yarn test`.
-
-## Configuration
-
-Code quality is set up for you with `prettier`, `husky`, and `lint-staged`. Adjust the respective fields in `package.json` accordingly.
-
-### Jest
-
-Jest tests are set up to run with `npm test` or `yarn test`.
-
-### Bundle analysis
-
-Calculates the real cost of your library using [size-limit](https://github.com/ai/size-limit) with `npm run size` and visulize it with `npm run analyze`.
-
-#### Setup Files
-
-This is the folder structure we set up for you:
-
-```txt
-/example
-  index.html
-  index.tsx       # test your component here in a demo app
-  package.json
-  tsconfig.json
-/src
-  index.tsx       # EDIT THIS
-/test
-  blah.test.tsx   # EDIT THIS
-.gitignore
-package.json
-README.md         # EDIT THIS
-tsconfig.json
-```
-
-#### React Testing Library
-
-We do not set up `react-testing-library` for you yet, we welcome contributions and documentation on this.
-
-### Rollup
-
-TSDX uses [Rollup](https://rollupjs.org) as a bundler and generates multiple rollup configs for various module formats and build settings. See [Optimizations](#optimizations) for details.
-
-### TypeScript
-
-`tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. Adjust according to your needs.
-
-## Continuous Integration
-
-### GitHub Actions
-
-Two actions are added by default:
-
-- `main` which installs deps w/ cache, lints, tests, and builds on all pushes against a Node and OS matrix
-- `size` which comments cost comparison of your library on every pull request using [`size-limit`](https://github.com/ai/size-limit)
-
-## Optimizations
-
-Please see the main `tsdx` [optimizations docs](https://github.com/palmerhq/tsdx#optimizations). In particular, know that you can take advantage of development-only optimizations:
-
-```js
-// ./types/index.d.ts
-declare var __DEV__: boolean;
-
-// inside your code...
-if (__DEV__) {
-  console.log('foo');
-}
-```
-
-You can also choose to install and use [invariant](https://github.com/palmerhq/tsdx#invariant) and [warning](https://github.com/palmerhq/tsdx#warning) functions.
-
-## Module Formats
-
-CJS, ESModules, and UMD module formats are supported.
-
-The appropriate paths are configured in `package.json` and `dist/index.js` accordingly. Please report if any issues are found.
-
-## Deploying the Example Playground
-
-The Playground is just a simple [Parcel](https://parceljs.org) app, you can deploy it anywhere you would normally deploy that. Here are some guidelines for **manually** deploying with the Netlify CLI (`npm i -g netlify-cli`):
-
-```bash
-cd example # if not already in the example folder
-npm run build # builds to dist
-netlify deploy # deploy the dist folder
-```
-
-Alternatively, if you already have a git repo connected, you can set up continuous deployment with Netlify:
-
-```bash
-netlify init
-# build command: yarn build && cd example && yarn && yarn build
-# directory to deploy: example/dist
-# pick yes for netlify.toml
-```
-
-## Named Exports
-
-Per Palmer Group guidelines, [always use named exports.](https://github.com/palmerhq/typescript#exports) Code split inside your React app instead of your React library.
-
-## Including Styles
-
-There are many ways to ship styles, including with CSS-in-JS. TSDX has no opinion on this, configure how you like.
-
-For vanilla CSS, you can include it at the root directory and add it to the `files` section in your `package.json`, so that it can be imported separately by your users and run through their bundler's loader.
-
-## Publishing to NPM
-
-We recommend using [np](https://github.com/sindresorhus/np).
-
-## Usage with Lerna
-
-When creating a new package with TSDX within a project set up with Lerna, you might encounter a `Cannot resolve dependency` error when trying to run the `example` project. To fix that you will need to make changes to the `package.json` file _inside the `example` directory_.
-
-The problem is that due to the nature of how dependencies are installed in Lerna projects, the aliases in the example project's `package.json` might not point to the right place, as those dependencies might have been installed in the root of your Lerna project.
-
-Change the `alias` to point to where those packages are actually installed. This depends on the directory structure of your Lerna project, so the actual path might be different from the diff below.
-
-```diff
-   "alias": {
--    "react": "../node_modules/react",
--    "react-dom": "../node_modules/react-dom"
-+    "react": "../../../node_modules/react",
-+    "react-dom": "../../../node_modules/react-dom"
-   },
-```
-
-An alternative to fixing this problem would be to remove aliases altogether and define the dependencies referenced as aliases as dev dependencies instead. [However, that might cause other problems.](https://github.com/palmerhq/tsdx/issues/64)
+`<!--NAV_START-->
+## Monorepo Navigation
+* [Home](/README.md)
+* **Framework Implementations**:
+    * [React 👈](/packages/react/README.md)
+* **Documentation**
+    * [Storybook](/docs/storybook/README.md)
+* **Internal Packages**
+    * [Core](/packages/core/README.md)
+    * [Styles](/packages/styles/README.md)
+<!--NAV_END-->

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

3

decreased by-66.67%

Worsened metrics

Total package byte prevSize

492195

decreased by-47.41%

Lines of code

6389

decreased by-26.03%

Number of lines in readme file

11

decreased by-93.17%

No dependency changes