@vidstack/react - npm Package Compare versions

Comparing version 0.4.5 to 0.5.0

dist/dev.js

 // src/components.ts
 import { createLiteReactElement } from "maverick.js/react";
 import {
-  PlayerDefinition,
-  OutletDefinition,
-  CaptionButtonDefinition,
-  CaptionsDefinition,
-  FullscreenButtonDefinition,
-  LiveIndicatorDefinition,
-  MuteButtonDefinition,
-  PIPButtonDefinition,
-  PlayButtonDefinition,
-  PosterDefinition,
-  SeekButtonDefinition,
-  SliderThumbnailDefinition,
-  SliderValueDefinition,
-  SliderVideoDefinition,
-  SliderDefinition,
-  TimeSliderDefinition,
-  TimeDefinition,
-  ToggleButtonDefinition,
-  VolumeSliderDefinition
+  Outlet,
+  Player,
+  BufferingIndicator,
+  CaptionButton,
+  FullscreenButton,
+  MuteButton,
+  PIPButton,
+  PlayButton,
+  SeekButton,
+  ToggleButton,
+  Captions,
+  Gesture,
+  LiveIndicator,
+  AudioMenuButton,
+  AudioMenuItems,
+  CaptionsMenuButton,
+  CaptionsMenuItems,
+  ChaptersMenuItems,
+  MenuButton,
+  MenuItems,
+  Menu,
+  PlaybackRateMenuButton,
+  PlaybackRateMenuItems,
+  QualityMenuButton,
+  QualityMenuItems,
+  RadioGroup,
+  Radio,
+  Poster,
+  SliderThumbnail,
+  SliderValue,
+  SliderVideo,
+  Slider,
+  TimeSlider,
+  VolumeSlider,
+  Thumbnail,
+  Time,
+  Tooltip
 } from "vidstack";
-var MediaPlayer = /* @__PURE__ */ createLiteReactElement(PlayerDefinition);
-var MediaOutlet = /* @__PURE__ */ createLiteReactElement(OutletDefinition);
-var MediaCaptionButton = /* @__PURE__ */ createLiteReactElement(CaptionButtonDefinition);
-var MediaCaptions = /* @__PURE__ */ createLiteReactElement(CaptionsDefinition);
-var MediaFullscreenButton = /* @__PURE__ */ createLiteReactElement(FullscreenButtonDefinition);
-var MediaLiveIndicator = /* @__PURE__ */ createLiteReactElement(LiveIndicatorDefinition);
-var MediaMuteButton = /* @__PURE__ */ createLiteReactElement(MuteButtonDefinition);
-var MediaPIPButton = /* @__PURE__ */ createLiteReactElement(PIPButtonDefinition);
-var MediaPlayButton = /* @__PURE__ */ createLiteReactElement(PlayButtonDefinition);
-var MediaPoster = /* @__PURE__ */ createLiteReactElement(PosterDefinition);
-var MediaSeekButton = /* @__PURE__ */ createLiteReactElement(SeekButtonDefinition);
-var MediaSliderThumbnail = /* @__PURE__ */ createLiteReactElement(SliderThumbnailDefinition);
-var MediaSliderValue = /* @__PURE__ */ createLiteReactElement(SliderValueDefinition);
-var MediaSliderVideo = /* @__PURE__ */ createLiteReactElement(SliderVideoDefinition);
-var MediaSlider = /* @__PURE__ */ createLiteReactElement(SliderDefinition);
-var MediaTimeSlider = /* @__PURE__ */ createLiteReactElement(TimeSliderDefinition);
-var MediaTime = /* @__PURE__ */ createLiteReactElement(TimeDefinition);
-var MediaToggleButton = /* @__PURE__ */ createLiteReactElement(ToggleButtonDefinition);
-var MediaVolumeSlider = /* @__PURE__ */ createLiteReactElement(VolumeSliderDefinition);
+var MediaOutlet = /* @__PURE__ */ createLiteReactElement(Outlet);
+var MediaPlayer = /* @__PURE__ */ createLiteReactElement(Player);
+var MediaBufferingIndicator = /* @__PURE__ */ createLiteReactElement(BufferingIndicator);
+var MediaCaptionButton = /* @__PURE__ */ createLiteReactElement(CaptionButton);
+var MediaFullscreenButton = /* @__PURE__ */ createLiteReactElement(FullscreenButton);
+var MediaMuteButton = /* @__PURE__ */ createLiteReactElement(MuteButton);
+var MediaPIPButton = /* @__PURE__ */ createLiteReactElement(PIPButton);
+var MediaPlayButton = /* @__PURE__ */ createLiteReactElement(PlayButton);
+var MediaSeekButton = /* @__PURE__ */ createLiteReactElement(SeekButton);
+var MediaToggleButton = /* @__PURE__ */ createLiteReactElement(ToggleButton);
+var MediaCaptions = /* @__PURE__ */ createLiteReactElement(Captions);
+var MediaGesture = /* @__PURE__ */ createLiteReactElement(Gesture);
+var MediaLiveIndicator = /* @__PURE__ */ createLiteReactElement(LiveIndicator);
+var MediaAudioMenuButton = /* @__PURE__ */ createLiteReactElement(AudioMenuButton);
+var MediaAudioMenuItems = /* @__PURE__ */ createLiteReactElement(AudioMenuItems);
+var MediaCaptionsMenuButton = /* @__PURE__ */ createLiteReactElement(CaptionsMenuButton);
+var MediaCaptionsMenuItems = /* @__PURE__ */ createLiteReactElement(CaptionsMenuItems);
+var MediaChaptersMenuItems = /* @__PURE__ */ createLiteReactElement(ChaptersMenuItems);
+var MediaMenuButton = /* @__PURE__ */ createLiteReactElement(MenuButton);
+var MediaMenuItems = /* @__PURE__ */ createLiteReactElement(MenuItems);
+var MediaMenu = /* @__PURE__ */ createLiteReactElement(Menu);
+var MediaPlaybackRateMenuButton = /* @__PURE__ */ createLiteReactElement(PlaybackRateMenuButton);
+var MediaPlaybackRateMenuItems = /* @__PURE__ */ createLiteReactElement(PlaybackRateMenuItems);
+var MediaQualityMenuButton = /* @__PURE__ */ createLiteReactElement(QualityMenuButton);
+var MediaQualityMenuItems = /* @__PURE__ */ createLiteReactElement(QualityMenuItems);
+var MediaRadioGroup = /* @__PURE__ */ createLiteReactElement(RadioGroup);
+var MediaRadio = /* @__PURE__ */ createLiteReactElement(Radio);
+var MediaPoster = /* @__PURE__ */ createLiteReactElement(Poster);
+var MediaSliderThumbnail = /* @__PURE__ */ createLiteReactElement(SliderThumbnail);
+var MediaSliderValue = /* @__PURE__ */ createLiteReactElement(SliderValue);
+var MediaSliderVideo = /* @__PURE__ */ createLiteReactElement(SliderVideo);
+var MediaSlider = /* @__PURE__ */ createLiteReactElement(Slider);
+var MediaTimeSlider = /* @__PURE__ */ createLiteReactElement(TimeSlider);
+var MediaVolumeSlider = /* @__PURE__ */ createLiteReactElement(VolumeSlider);
+var MediaThumbnail = /* @__PURE__ */ createLiteReactElement(Thumbnail);
+var MediaTime = /* @__PURE__ */ createLiteReactElement(Time);
+var MediaTooltip = /* @__PURE__ */ createLiteReactElement(Tooltip);
 
@@ -58,4 +94,3 @@ // src/use-media-player.ts
       return;
-    const player2 = context.$player();
-    player2.onAttach(() => void setPlayer(player2));
+    context.player.onAttach(() => void setPlayer(player));
     return () => setPlayer(null);
@@ -89,3 +124,2 @@ }, []);
 // src/use-media-remote.ts
-import { peek } from "maverick.js";
 import { useReactContext as useReactContext3 } from "maverick.js/react";
@@ -98,3 +132,3 @@ import { isUndefined } from "maverick.js/std";
   useEffect3(() => {
-    const player = context && peek(context.$player);
+    const player = context && context.player;
     const ref = !isUndefined(target) ? target && "current" in target ? target.current : target : player;
@@ -109,3 +143,6 @@ remote.setTarget(ref || null);
 import { useReactContext as useReactContext4 } from "maverick.js/react";
-import { mediaContext as mediaContext4, mediaStore } from "vidstack";
+import {
+  mediaContext as mediaContext4,
+  MediaStoreFactory
+} from "vidstack";
 
@@ -122,4 +159,5 @@ // src/use-store.ts
   useEffect4(() => {
-    if (ref?.current)
-      $setStore(ref.current.$store);
+    const $store2 = ref?.current?.$store;
+    if ($store2)
+      $setStore($store2);
   }, []);
@@ -132,3 +170,3 @@ useEffect4(() => {
       for (let i = 0; i < props.length; i++)
-        $store[props[i]];
+        $store[props[i]]();
       update((n) => n + 1);
@@ -139,3 +177,3 @@ });
     if (!$store)
-      return factory.initial;
+      return factory.record;
     const { observing, $props } = tracking.current;
@@ -148,3 +186,3 @@ return new Proxy($store, {
         }
-        return $store[prop];
+        return $store[prop]();
       },
@@ -165,3 +203,3 @@ // @ts-expect-error
   }
-  return useStore(mediaStore, ref, context?.$store);
+  return useStore(MediaStoreFactory, ref, context?.$store);
 }
@@ -172,7 +210,6 @@
 import {
-  sliderStore,
-  sliderStoreContext
+  SliderStoreFactory
 } from "vidstack";
 function useSliderStore(ref) {
-  const $store = useReactContext5(sliderStoreContext);
+  const $store = useReactContext5(SliderStoreFactory);
   if (!$store && !ref) {
@@ -183,3 +220,3 @@ console.warn(
   }
-  return useStore(sliderStore, ref, $store);
+  return useStore(SliderStoreFactory, ref, $store);
 }
@@ -218,5 +255,8 @@
   arrowCollapsePaths,
+  arrowDownPaths,
   arrowExpandOutPaths,
   arrowExpandPaths,
   arrowLeftPaths,
+  arrowRightPaths,
+  arrowUpPaths,
   bookmarkPaths,
@@ -228,3 +268,5 @@ cameraPaths,
   chevronDownPaths,
+  chevronLeftPaths,
   chevronRightPaths,
+  chevronUpPaths,
   chromecastPaths,
@@ -335,2 +377,5 @@ clipPaths,
 });
+var ArrowDownIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
+  return createElement2(Icon, { ...props, ref, __paths: arrowDownPaths });
+});
 var ArrowExpandOutIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
@@ -345,2 +390,8 @@ return createElement2(Icon, { ...props, ref, __paths: arrowExpandOutPaths });
 });
+var ArrowRightIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
+  return createElement2(Icon, { ...props, ref, __paths: arrowRightPaths });
+});
+var ArrowUpIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
+  return createElement2(Icon, { ...props, ref, __paths: arrowUpPaths });
+});
 var BookmarkIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
@@ -364,5 +415,11 @@ return createElement2(Icon, { ...props, ref, __paths: bookmarkPaths });
 });
+var ChevronLeftIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
+  return createElement2(Icon, { ...props, ref, __paths: chevronLeftPaths });
+});
 var ChevronRightIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
   return createElement2(Icon, { ...props, ref, __paths: chevronRightPaths });
 });
+var ChevronUpIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
+  return createElement2(Icon, { ...props, ref, __paths: chevronUpPaths });
+});
 var ChromecastIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
@@ -622,5 +679,8 @@ return createElement2(Icon, { ...props, ref, __paths: chromecastPaths });
   ArrowCollapseInIcon,
+  ArrowDownIcon,
   ArrowExpandIcon,
   ArrowExpandOutIcon,
   ArrowLeftIcon,
+  ArrowRightIcon,
+  ArrowUpIcon,
   BookmarkIcon,
@@ -632,3 +692,5 @@ CameraIcon,
   ChevronDownIcon,
+  ChevronLeftIcon,
   ChevronRightIcon,
+  ChevronUpIcon,
   ChromecastIcon,
@@ -658,6 +720,16 @@ ClipIcon,
   LockOpenIcon,
+  MediaAudioMenuButton,
+  MediaAudioMenuItems,
+  MediaBufferingIndicator,
   MediaCaptionButton,
   MediaCaptions,
+  MediaCaptionsMenuButton,
+  MediaCaptionsMenuItems,
+  MediaChaptersMenuItems,
   MediaFullscreenButton,
+  MediaGesture,
   MediaLiveIndicator,
+  MediaMenu,
+  MediaMenuButton,
+  MediaMenuItems,
   MediaMuteButton,
@@ -667,4 +739,10 @@ MediaOutlet,
   MediaPlayButton,
+  MediaPlaybackRateMenuButton,
+  MediaPlaybackRateMenuItems,
   MediaPlayer,
   MediaPoster,
+  MediaQualityMenuButton,
+  MediaQualityMenuItems,
+  MediaRadio,
+  MediaRadioGroup,
   MediaSeekButton,
@@ -675,5 +753,7 @@ MediaSlider,
   MediaSliderVideo,
+  MediaThumbnail,
   MediaTime,
   MediaTimeSlider,
   MediaToggleButton,
+  MediaTooltip,
   MediaVolumeSlider,
@@ -680,0 +760,0 @@ MenuHorizontalIcon,

dist/prod.js

 // src/components.ts
 import { createLiteReactElement } from "maverick.js/react";
 import {
-  PlayerDefinition,
-  OutletDefinition,
-  CaptionButtonDefinition,
-  CaptionsDefinition,
-  FullscreenButtonDefinition,
-  LiveIndicatorDefinition,
-  MuteButtonDefinition,
-  PIPButtonDefinition,
-  PlayButtonDefinition,
-  PosterDefinition,
-  SeekButtonDefinition,
-  SliderThumbnailDefinition,
-  SliderValueDefinition,
-  SliderVideoDefinition,
-  SliderDefinition,
-  TimeSliderDefinition,
-  TimeDefinition,
-  ToggleButtonDefinition,
-  VolumeSliderDefinition
+  Outlet,
+  Player,
+  BufferingIndicator,
+  CaptionButton,
+  FullscreenButton,
+  MuteButton,
+  PIPButton,
+  PlayButton,
+  SeekButton,
+  ToggleButton,
+  Captions,
+  Gesture,
+  LiveIndicator,
+  AudioMenuButton,
+  AudioMenuItems,
+  CaptionsMenuButton,
+  CaptionsMenuItems,
+  ChaptersMenuItems,
+  MenuButton,
+  MenuItems,
+  Menu,
+  PlaybackRateMenuButton,
+  PlaybackRateMenuItems,
+  QualityMenuButton,
+  QualityMenuItems,
+  RadioGroup,
+  Radio,
+  Poster,
+  SliderThumbnail,
+  SliderValue,
+  SliderVideo,
+  Slider,
+  TimeSlider,
+  VolumeSlider,
+  Thumbnail,
+  Time,
+  Tooltip
 } from "vidstack";
-var MediaPlayer = /* @__PURE__ */ createLiteReactElement(PlayerDefinition);
-var MediaOutlet = /* @__PURE__ */ createLiteReactElement(OutletDefinition);
-var MediaCaptionButton = /* @__PURE__ */ createLiteReactElement(CaptionButtonDefinition);
-var MediaCaptions = /* @__PURE__ */ createLiteReactElement(CaptionsDefinition);
-var MediaFullscreenButton = /* @__PURE__ */ createLiteReactElement(FullscreenButtonDefinition);
-var MediaLiveIndicator = /* @__PURE__ */ createLiteReactElement(LiveIndicatorDefinition);
-var MediaMuteButton = /* @__PURE__ */ createLiteReactElement(MuteButtonDefinition);
-var MediaPIPButton = /* @__PURE__ */ createLiteReactElement(PIPButtonDefinition);
-var MediaPlayButton = /* @__PURE__ */ createLiteReactElement(PlayButtonDefinition);
-var MediaPoster = /* @__PURE__ */ createLiteReactElement(PosterDefinition);
-var MediaSeekButton = /* @__PURE__ */ createLiteReactElement(SeekButtonDefinition);
-var MediaSliderThumbnail = /* @__PURE__ */ createLiteReactElement(SliderThumbnailDefinition);
-var MediaSliderValue = /* @__PURE__ */ createLiteReactElement(SliderValueDefinition);
-var MediaSliderVideo = /* @__PURE__ */ createLiteReactElement(SliderVideoDefinition);
-var MediaSlider = /* @__PURE__ */ createLiteReactElement(SliderDefinition);
-var MediaTimeSlider = /* @__PURE__ */ createLiteReactElement(TimeSliderDefinition);
-var MediaTime = /* @__PURE__ */ createLiteReactElement(TimeDefinition);
-var MediaToggleButton = /* @__PURE__ */ createLiteReactElement(ToggleButtonDefinition);
-var MediaVolumeSlider = /* @__PURE__ */ createLiteReactElement(VolumeSliderDefinition);
+var MediaOutlet = /* @__PURE__ */ createLiteReactElement(Outlet);
+var MediaPlayer = /* @__PURE__ */ createLiteReactElement(Player);
+var MediaBufferingIndicator = /* @__PURE__ */ createLiteReactElement(BufferingIndicator);
+var MediaCaptionButton = /* @__PURE__ */ createLiteReactElement(CaptionButton);
+var MediaFullscreenButton = /* @__PURE__ */ createLiteReactElement(FullscreenButton);
+var MediaMuteButton = /* @__PURE__ */ createLiteReactElement(MuteButton);
+var MediaPIPButton = /* @__PURE__ */ createLiteReactElement(PIPButton);
+var MediaPlayButton = /* @__PURE__ */ createLiteReactElement(PlayButton);
+var MediaSeekButton = /* @__PURE__ */ createLiteReactElement(SeekButton);
+var MediaToggleButton = /* @__PURE__ */ createLiteReactElement(ToggleButton);
+var MediaCaptions = /* @__PURE__ */ createLiteReactElement(Captions);
+var MediaGesture = /* @__PURE__ */ createLiteReactElement(Gesture);
+var MediaLiveIndicator = /* @__PURE__ */ createLiteReactElement(LiveIndicator);
+var MediaAudioMenuButton = /* @__PURE__ */ createLiteReactElement(AudioMenuButton);
+var MediaAudioMenuItems = /* @__PURE__ */ createLiteReactElement(AudioMenuItems);
+var MediaCaptionsMenuButton = /* @__PURE__ */ createLiteReactElement(CaptionsMenuButton);
+var MediaCaptionsMenuItems = /* @__PURE__ */ createLiteReactElement(CaptionsMenuItems);
+var MediaChaptersMenuItems = /* @__PURE__ */ createLiteReactElement(ChaptersMenuItems);
+var MediaMenuButton = /* @__PURE__ */ createLiteReactElement(MenuButton);
+var MediaMenuItems = /* @__PURE__ */ createLiteReactElement(MenuItems);
+var MediaMenu = /* @__PURE__ */ createLiteReactElement(Menu);
+var MediaPlaybackRateMenuButton = /* @__PURE__ */ createLiteReactElement(PlaybackRateMenuButton);
+var MediaPlaybackRateMenuItems = /* @__PURE__ */ createLiteReactElement(PlaybackRateMenuItems);
+var MediaQualityMenuButton = /* @__PURE__ */ createLiteReactElement(QualityMenuButton);
+var MediaQualityMenuItems = /* @__PURE__ */ createLiteReactElement(QualityMenuItems);
+var MediaRadioGroup = /* @__PURE__ */ createLiteReactElement(RadioGroup);
+var MediaRadio = /* @__PURE__ */ createLiteReactElement(Radio);
+var MediaPoster = /* @__PURE__ */ createLiteReactElement(Poster);
+var MediaSliderThumbnail = /* @__PURE__ */ createLiteReactElement(SliderThumbnail);
+var MediaSliderValue = /* @__PURE__ */ createLiteReactElement(SliderValue);
+var MediaSliderVideo = /* @__PURE__ */ createLiteReactElement(SliderVideo);
+var MediaSlider = /* @__PURE__ */ createLiteReactElement(Slider);
+var MediaTimeSlider = /* @__PURE__ */ createLiteReactElement(TimeSlider);
+var MediaVolumeSlider = /* @__PURE__ */ createLiteReactElement(VolumeSlider);
+var MediaThumbnail = /* @__PURE__ */ createLiteReactElement(Thumbnail);
+var MediaTime = /* @__PURE__ */ createLiteReactElement(Time);
+var MediaTooltip = /* @__PURE__ */ createLiteReactElement(Tooltip);
 
@@ -58,4 +94,3 @@ // src/use-media-player.ts
       return;
-    const player2 = context.$player();
-    player2.onAttach(() => void setPlayer(player2));
+    context.player.onAttach(() => void setPlayer(player));
     return () => setPlayer(null);
@@ -89,3 +124,2 @@ }, []);
 // src/use-media-remote.ts
-import { peek } from "maverick.js";
 import { useReactContext as useReactContext3 } from "maverick.js/react";
@@ -98,3 +132,3 @@ import { isUndefined } from "maverick.js/std";
   useEffect3(() => {
-    const player = context && peek(context.$player);
+    const player = context && context.player;
     const ref = !isUndefined(target) ? target && "current" in target ? target.current : target : player;
@@ -109,3 +143,6 @@ remote.setTarget(ref || null);
 import { useReactContext as useReactContext4 } from "maverick.js/react";
-import { mediaContext as mediaContext4, mediaStore } from "vidstack";
+import {
+  mediaContext as mediaContext4,
+  MediaStoreFactory
+} from "vidstack";
 
@@ -122,4 +159,5 @@ // src/use-store.ts
   useEffect4(() => {
-    if (ref?.current)
-      $setStore(ref.current.$store);
+    const $store2 = ref?.current?.$store;
+    if ($store2)
+      $setStore($store2);
   }, []);
@@ -132,3 +170,3 @@ useEffect4(() => {
       for (let i = 0; i < props.length; i++)
-        $store[props[i]];
+        $store[props[i]]();
       update((n) => n + 1);
@@ -139,3 +177,3 @@ });
     if (!$store)
-      return factory.initial;
+      return factory.record;
     const { observing, $props } = tracking.current;
@@ -148,3 +186,3 @@ return new Proxy($store, {
         }
-        return $store[prop];
+        return $store[prop]();
       },
@@ -165,3 +203,3 @@ // @ts-expect-error
   }
-  return useStore(mediaStore, ref, context?.$store);
+  return useStore(MediaStoreFactory, ref, context?.$store);
 }
@@ -172,7 +210,6 @@
 import {
-  sliderStore,
-  sliderStoreContext
+  SliderStoreFactory
 } from "vidstack";
 function useSliderStore(ref) {
-  const $store = useReactContext5(sliderStoreContext);
+  const $store = useReactContext5(SliderStoreFactory);
   if (false) {
@@ -183,3 +220,3 @@ console.warn(
   }
-  return useStore(sliderStore, ref, $store);
+  return useStore(SliderStoreFactory, ref, $store);
 }
@@ -218,5 +255,8 @@
   arrowCollapsePaths,
+  arrowDownPaths,
   arrowExpandOutPaths,
   arrowExpandPaths,
   arrowLeftPaths,
+  arrowRightPaths,
+  arrowUpPaths,
   bookmarkPaths,
@@ -228,3 +268,5 @@ cameraPaths,
   chevronDownPaths,
+  chevronLeftPaths,
   chevronRightPaths,
+  chevronUpPaths,
   chromecastPaths,
@@ -335,2 +377,5 @@ clipPaths,
 });
+var ArrowDownIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
+  return createElement2(Icon, { ...props, ref, __paths: arrowDownPaths });
+});
 var ArrowExpandOutIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
@@ -345,2 +390,8 @@ return createElement2(Icon, { ...props, ref, __paths: arrowExpandOutPaths });
 });
+var ArrowRightIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
+  return createElement2(Icon, { ...props, ref, __paths: arrowRightPaths });
+});
+var ArrowUpIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
+  return createElement2(Icon, { ...props, ref, __paths: arrowUpPaths });
+});
 var BookmarkIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
@@ -364,5 +415,11 @@ return createElement2(Icon, { ...props, ref, __paths: bookmarkPaths });
 });
+var ChevronLeftIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
+  return createElement2(Icon, { ...props, ref, __paths: chevronLeftPaths });
+});
 var ChevronRightIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
   return createElement2(Icon, { ...props, ref, __paths: chevronRightPaths });
 });
+var ChevronUpIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
+  return createElement2(Icon, { ...props, ref, __paths: chevronUpPaths });
+});
 var ChromecastIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
@@ -622,5 +679,8 @@ return createElement2(Icon, { ...props, ref, __paths: chromecastPaths });
   ArrowCollapseInIcon,
+  ArrowDownIcon,
   ArrowExpandIcon,
   ArrowExpandOutIcon,
   ArrowLeftIcon,
+  ArrowRightIcon,
+  ArrowUpIcon,
   BookmarkIcon,
@@ -632,3 +692,5 @@ CameraIcon,
   ChevronDownIcon,
+  ChevronLeftIcon,
   ChevronRightIcon,
+  ChevronUpIcon,
   ChromecastIcon,
@@ -658,6 +720,16 @@ ClipIcon,
   LockOpenIcon,
+  MediaAudioMenuButton,
+  MediaAudioMenuItems,
+  MediaBufferingIndicator,
   MediaCaptionButton,
   MediaCaptions,
+  MediaCaptionsMenuButton,
+  MediaCaptionsMenuItems,
+  MediaChaptersMenuItems,
   MediaFullscreenButton,
+  MediaGesture,
   MediaLiveIndicator,
+  MediaMenu,
+  MediaMenuButton,
+  MediaMenuItems,
   MediaMuteButton,
@@ -667,4 +739,10 @@ MediaOutlet,
   MediaPlayButton,
+  MediaPlaybackRateMenuButton,
+  MediaPlaybackRateMenuItems,
   MediaPlayer,
   MediaPoster,
+  MediaQualityMenuButton,
+  MediaQualityMenuItems,
+  MediaRadio,
+  MediaRadioGroup,
   MediaSeekButton,
@@ -675,5 +753,7 @@ MediaSlider,
   MediaSliderVideo,
+  MediaThumbnail,
   MediaTime,
   MediaTimeSlider,
   MediaToggleButton,
+  MediaTooltip,
   MediaVolumeSlider,
@@ -680,0 +760,0 @@ MenuHorizontalIcon,

dist/server.js

 // src/components.ts
 import { createLiteReactElement } from "maverick.js/react";
 import {
-  PlayerDefinition,
-  OutletDefinition,
-  CaptionButtonDefinition,
-  CaptionsDefinition,
-  FullscreenButtonDefinition,
-  LiveIndicatorDefinition,
-  MuteButtonDefinition,
-  PIPButtonDefinition,
-  PlayButtonDefinition,
-  PosterDefinition,
-  SeekButtonDefinition,
-  SliderThumbnailDefinition,
-  SliderValueDefinition,
-  SliderVideoDefinition,
-  SliderDefinition,
-  TimeSliderDefinition,
-  TimeDefinition,
-  ToggleButtonDefinition,
-  VolumeSliderDefinition
+  Outlet,
+  Player,
+  BufferingIndicator,
+  CaptionButton,
+  FullscreenButton,
+  MuteButton,
+  PIPButton,
+  PlayButton,
+  SeekButton,
+  ToggleButton,
+  Captions,
+  Gesture,
+  LiveIndicator,
+  AudioMenuButton,
+  AudioMenuItems,
+  CaptionsMenuButton,
+  CaptionsMenuItems,
+  ChaptersMenuItems,
+  MenuButton,
+  MenuItems,
+  Menu,
+  PlaybackRateMenuButton,
+  PlaybackRateMenuItems,
+  QualityMenuButton,
+  QualityMenuItems,
+  RadioGroup,
+  Radio,
+  Poster,
+  SliderThumbnail,
+  SliderValue,
+  SliderVideo,
+  Slider,
+  TimeSlider,
+  VolumeSlider,
+  Thumbnail,
+  Time,
+  Tooltip
 } from "vidstack";
-var MediaPlayer = /* @__PURE__ */ createLiteReactElement(PlayerDefinition);
-var MediaOutlet = /* @__PURE__ */ createLiteReactElement(OutletDefinition);
-var MediaCaptionButton = /* @__PURE__ */ createLiteReactElement(CaptionButtonDefinition);
-var MediaCaptions = /* @__PURE__ */ createLiteReactElement(CaptionsDefinition);
-var MediaFullscreenButton = /* @__PURE__ */ createLiteReactElement(FullscreenButtonDefinition);
-var MediaLiveIndicator = /* @__PURE__ */ createLiteReactElement(LiveIndicatorDefinition);
-var MediaMuteButton = /* @__PURE__ */ createLiteReactElement(MuteButtonDefinition);
-var MediaPIPButton = /* @__PURE__ */ createLiteReactElement(PIPButtonDefinition);
-var MediaPlayButton = /* @__PURE__ */ createLiteReactElement(PlayButtonDefinition);
-var MediaPoster = /* @__PURE__ */ createLiteReactElement(PosterDefinition);
-var MediaSeekButton = /* @__PURE__ */ createLiteReactElement(SeekButtonDefinition);
-var MediaSliderThumbnail = /* @__PURE__ */ createLiteReactElement(SliderThumbnailDefinition);
-var MediaSliderValue = /* @__PURE__ */ createLiteReactElement(SliderValueDefinition);
-var MediaSliderVideo = /* @__PURE__ */ createLiteReactElement(SliderVideoDefinition);
-var MediaSlider = /* @__PURE__ */ createLiteReactElement(SliderDefinition);
-var MediaTimeSlider = /* @__PURE__ */ createLiteReactElement(TimeSliderDefinition);
-var MediaTime = /* @__PURE__ */ createLiteReactElement(TimeDefinition);
-var MediaToggleButton = /* @__PURE__ */ createLiteReactElement(ToggleButtonDefinition);
-var MediaVolumeSlider = /* @__PURE__ */ createLiteReactElement(VolumeSliderDefinition);
+var MediaOutlet = /* @__PURE__ */ createLiteReactElement(Outlet);
+var MediaPlayer = /* @__PURE__ */ createLiteReactElement(Player);
+var MediaBufferingIndicator = /* @__PURE__ */ createLiteReactElement(BufferingIndicator);
+var MediaCaptionButton = /* @__PURE__ */ createLiteReactElement(CaptionButton);
+var MediaFullscreenButton = /* @__PURE__ */ createLiteReactElement(FullscreenButton);
+var MediaMuteButton = /* @__PURE__ */ createLiteReactElement(MuteButton);
+var MediaPIPButton = /* @__PURE__ */ createLiteReactElement(PIPButton);
+var MediaPlayButton = /* @__PURE__ */ createLiteReactElement(PlayButton);
+var MediaSeekButton = /* @__PURE__ */ createLiteReactElement(SeekButton);
+var MediaToggleButton = /* @__PURE__ */ createLiteReactElement(ToggleButton);
+var MediaCaptions = /* @__PURE__ */ createLiteReactElement(Captions);
+var MediaGesture = /* @__PURE__ */ createLiteReactElement(Gesture);
+var MediaLiveIndicator = /* @__PURE__ */ createLiteReactElement(LiveIndicator);
+var MediaAudioMenuButton = /* @__PURE__ */ createLiteReactElement(AudioMenuButton);
+var MediaAudioMenuItems = /* @__PURE__ */ createLiteReactElement(AudioMenuItems);
+var MediaCaptionsMenuButton = /* @__PURE__ */ createLiteReactElement(CaptionsMenuButton);
+var MediaCaptionsMenuItems = /* @__PURE__ */ createLiteReactElement(CaptionsMenuItems);
+var MediaChaptersMenuItems = /* @__PURE__ */ createLiteReactElement(ChaptersMenuItems);
+var MediaMenuButton = /* @__PURE__ */ createLiteReactElement(MenuButton);
+var MediaMenuItems = /* @__PURE__ */ createLiteReactElement(MenuItems);
+var MediaMenu = /* @__PURE__ */ createLiteReactElement(Menu);
+var MediaPlaybackRateMenuButton = /* @__PURE__ */ createLiteReactElement(PlaybackRateMenuButton);
+var MediaPlaybackRateMenuItems = /* @__PURE__ */ createLiteReactElement(PlaybackRateMenuItems);
+var MediaQualityMenuButton = /* @__PURE__ */ createLiteReactElement(QualityMenuButton);
+var MediaQualityMenuItems = /* @__PURE__ */ createLiteReactElement(QualityMenuItems);
+var MediaRadioGroup = /* @__PURE__ */ createLiteReactElement(RadioGroup);
+var MediaRadio = /* @__PURE__ */ createLiteReactElement(Radio);
+var MediaPoster = /* @__PURE__ */ createLiteReactElement(Poster);
+var MediaSliderThumbnail = /* @__PURE__ */ createLiteReactElement(SliderThumbnail);
+var MediaSliderValue = /* @__PURE__ */ createLiteReactElement(SliderValue);
+var MediaSliderVideo = /* @__PURE__ */ createLiteReactElement(SliderVideo);
+var MediaSlider = /* @__PURE__ */ createLiteReactElement(Slider);
+var MediaTimeSlider = /* @__PURE__ */ createLiteReactElement(TimeSlider);
+var MediaVolumeSlider = /* @__PURE__ */ createLiteReactElement(VolumeSlider);
+var MediaThumbnail = /* @__PURE__ */ createLiteReactElement(Thumbnail);
+var MediaTime = /* @__PURE__ */ createLiteReactElement(Time);
+var MediaTooltip = /* @__PURE__ */ createLiteReactElement(Tooltip);
 
@@ -58,4 +94,3 @@ // src/use-media-player.ts
       return;
-    const player2 = context.$player();
-    player2.onAttach(() => void setPlayer(player2));
+    context.player.onAttach(() => void setPlayer(player));
     return () => setPlayer(null);
@@ -89,3 +124,2 @@ }, []);
 // src/use-media-remote.ts
-import { peek } from "maverick.js";
 import { useReactContext as useReactContext3 } from "maverick.js/react";
@@ -98,3 +132,3 @@ import { isUndefined } from "maverick.js/std";
   useEffect3(() => {
-    const player = context && peek(context.$player);
+    const player = context && context.player;
     const ref = !isUndefined(target) ? target && "current" in target ? target.current : target : player;
@@ -109,3 +143,6 @@ remote.setTarget(ref || null);
 import { useReactContext as useReactContext4 } from "maverick.js/react";
-import { mediaContext as mediaContext4, mediaStore } from "vidstack";
+import {
+  mediaContext as mediaContext4,
+  MediaStoreFactory
+} from "vidstack";
 
@@ -122,4 +159,6 @@ // src/use-store.ts
   useEffect4(() => {
-    if (ref == null ? void 0 : ref.current)
-      $setStore(ref.current.$store);
+    var _a;
+    const $store2 = (_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.$store;
+    if ($store2)
+      $setStore($store2);
   }, []);
@@ -132,3 +171,3 @@ useEffect4(() => {
       for (let i = 0; i < props.length; i++)
-        $store[props[i]];
+        $store[props[i]]();
       update((n) => n + 1);
@@ -139,3 +178,3 @@ });
     if (!$store)
-      return factory.initial;
+      return factory.record;
     const { observing, $props } = tracking.current;
@@ -148,3 +187,3 @@ return new Proxy($store, {
         }
-        return $store[prop];
+        return $store[prop]();
       },
@@ -165,3 +204,3 @@ // @ts-expect-error
   }
-  return useStore(mediaStore, ref, context == null ? void 0 : context.$store);
+  return useStore(MediaStoreFactory, ref, context == null ? void 0 : context.$store);
 }
@@ -172,7 +211,6 @@
 import {
-  sliderStore,
-  sliderStoreContext
+  SliderStoreFactory
 } from "vidstack";
 function useSliderStore(ref) {
-  const $store = useReactContext5(sliderStoreContext);
+  const $store = useReactContext5(SliderStoreFactory);
   if (false) {
@@ -183,3 +221,3 @@ console.warn(
   }
-  return useStore(sliderStore, ref, $store);
+  return useStore(SliderStoreFactory, ref, $store);
 }
@@ -218,5 +256,8 @@
   arrowCollapsePaths,
+  arrowDownPaths,
   arrowExpandOutPaths,
   arrowExpandPaths,
   arrowLeftPaths,
+  arrowRightPaths,
+  arrowUpPaths,
   bookmarkPaths,
@@ -228,3 +269,5 @@ cameraPaths,
   chevronDownPaths,
+  chevronLeftPaths,
   chevronRightPaths,
+  chevronUpPaths,
   chromecastPaths,
@@ -335,2 +378,5 @@ clipPaths,
 });
+var ArrowDownIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
+  return createElement2(Icon, { ...props, ref, __paths: arrowDownPaths });
+});
 var ArrowExpandOutIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
@@ -345,2 +391,8 @@ return createElement2(Icon, { ...props, ref, __paths: arrowExpandOutPaths });
 });
+var ArrowRightIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
+  return createElement2(Icon, { ...props, ref, __paths: arrowRightPaths });
+});
+var ArrowUpIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
+  return createElement2(Icon, { ...props, ref, __paths: arrowUpPaths });
+});
 var BookmarkIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
@@ -364,5 +416,11 @@ return createElement2(Icon, { ...props, ref, __paths: bookmarkPaths });
 });
+var ChevronLeftIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
+  return createElement2(Icon, { ...props, ref, __paths: chevronLeftPaths });
+});
 var ChevronRightIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
   return createElement2(Icon, { ...props, ref, __paths: chevronRightPaths });
 });
+var ChevronUpIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
+  return createElement2(Icon, { ...props, ref, __paths: chevronUpPaths });
+});
 var ChromecastIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
@@ -622,5 +680,8 @@ return createElement2(Icon, { ...props, ref, __paths: chromecastPaths });
   ArrowCollapseInIcon,
+  ArrowDownIcon,
   ArrowExpandIcon,
   ArrowExpandOutIcon,
   ArrowLeftIcon,
+  ArrowRightIcon,
+  ArrowUpIcon,
   BookmarkIcon,
@@ -632,3 +693,5 @@ CameraIcon,
   ChevronDownIcon,
+  ChevronLeftIcon,
   ChevronRightIcon,
+  ChevronUpIcon,
   ChromecastIcon,
@@ -658,6 +721,16 @@ ClipIcon,
   LockOpenIcon,
+  MediaAudioMenuButton,
+  MediaAudioMenuItems,
+  MediaBufferingIndicator,
   MediaCaptionButton,
   MediaCaptions,
+  MediaCaptionsMenuButton,
+  MediaCaptionsMenuItems,
+  MediaChaptersMenuItems,
   MediaFullscreenButton,
+  MediaGesture,
   MediaLiveIndicator,
+  MediaMenu,
+  MediaMenuButton,
+  MediaMenuItems,
   MediaMuteButton,
@@ -667,4 +740,10 @@ MediaOutlet,
   MediaPlayButton,
+  MediaPlaybackRateMenuButton,
+  MediaPlaybackRateMenuItems,
   MediaPlayer,
   MediaPoster,
+  MediaQualityMenuButton,
+  MediaQualityMenuItems,
+  MediaRadio,
+  MediaRadioGroup,
   MediaSeekButton,
@@ -675,5 +754,7 @@ MediaSlider,
   MediaSliderVideo,
+  MediaThumbnail,
   MediaTime,
   MediaTimeSlider,
   MediaToggleButton,
+  MediaTooltip,
   MediaVolumeSlider,
@@ -680,0 +761,0 @@ MenuHorizontalIcon,

dist/types/components.d.ts

@@ -0,2 +1,16 @@
+import { type MediaOutletElement, type MediaPlayerElement, type MediaBufferingIndicatorElement, type MediaCaptionButtonElement, type MediaFullscreenButtonElement, type MediaMuteButtonElement, type MediaPIPButtonElement, type MediaPlayButtonElement, type MediaSeekButtonElement, type MediaToggleButtonElement, type MediaCaptionsElement, type MediaGestureElement, type MediaLiveIndicatorElement, type MediaAudioMenuButtonElement, type MediaAudioMenuItemsElement, type MediaCaptionsMenuButtonElement, type MediaCaptionsMenuItemsElement, type MediaMenuButtonElement, type MediaMenuItemsElement, type MediaMenuElement, type MediaPlaybackRateMenuButtonElement, type MediaPlaybackRateMenuItemsElement, type MediaQualityMenuButtonElement, type MediaQualityMenuItemsElement, type MediaRadioGroupElement, type MediaRadioElement, type MediaPosterElement, type MediaSliderThumbnailElement, type MediaSliderValueElement, type MediaSliderVideoElement, type MediaSliderElement, type MediaTimeSliderElement, type MediaVolumeSliderElement, type MediaTimeElement, type MediaTooltipElement } from 'vidstack';
 /**
+Used to render the current provider.
+
+* @docs {@link https://www.vidstack.io/docs/react/player/components/media/outlet}
+* @example
+*```tsx
+*<MediaPlayer>
+*  <MediaOutlet></MediaOutlet>
+*  ...
+*</MediaPlayer>
+*```
+*/
+export declare const MediaOutlet: import("maverick.js/react").ReactElement<MediaOutletElement>;
+/**
 All media elements exist inside the `<media-player>` component. This component's main
@@ -7,3 +21,3 @@ responsibilities are to manage media state updates, dispatch media events, handle media
 
-* @docs {@link https://www.vidstack.io/docs/react/player/components/layout/player}
+* @docs {@link https://www.vidstack.io/docs/react/player/components/media/player}
 * @example
@@ -17,16 +31,14 @@ *```tsx
 */
-export declare const MediaPlayer: import("maverick.js/react").ReactElement<import("vidstack").MediaPlayerElement>;
+export declare const MediaPlayer: import("maverick.js/react").ReactElement<MediaPlayerElement>;
 /**
-Used to render the current provider.
+Display a loading indicator to users before the media is ready for playback or when
+waiting for media to buffer.
 
-* @docs {@link https://www.vidstack.io/docs/react/player/components/layout/outlet}
+* @docs {@link https://www.vidstack.io/docs/react/player/components/display/buffering-indicator}
 * @example
 *```tsx
-*<MediaPlayer>
-*  <MediaOutlet></MediaOutlet>
-*  ...
-*</MediaPlayer>
+*<MediaBufferingIndicator></MediaBufferingIndicator>
 *```
 */
-export declare const MediaOutlet: import("maverick.js/react").ReactElement<import("vidstack").MediaOutletElement>;
+export declare const MediaBufferingIndicator: import("maverick.js/react").ReactElement<MediaBufferingIndicatorElement>;
 /**
@@ -41,4 +53,70 @@ A button for toggling the showing state of the captions.
 */
-export declare const MediaCaptionButton: import("maverick.js/react").ReactElement<import("vidstack").MediaCaptionButtonElement>;
+export declare const MediaCaptionButton: import("maverick.js/react").ReactElement<MediaCaptionButtonElement>;
 /**
+A button for toggling the fullscreen mode of the player.
+
+* @docs {@link https://www.vidstack.io/docs/react/player/components/buttons/fullscreen-button}
+* @example
+*```tsx
+*<MediaFullscreenButton></MediaFullscreenButton>
+*```
+*/
+export declare const MediaFullscreenButton: import("maverick.js/react").ReactElement<MediaFullscreenButtonElement>;
+/**
+A button for toggling the muted state of the player.
+
+* @docs {@link https://www.vidstack.io/docs/react/player/components/buttons/mute-button}
+* @example
+*```tsx
+*<MediaMuteButton></MediaMuteButton>
+*```
+*/
+export declare const MediaMuteButton: import("maverick.js/react").ReactElement<MediaMuteButtonElement>;
+/**
+A button for toggling the picture-in-picture (PIP) mode of the player.
+
+* @docs {@link https://www.vidstack.io/docs/react/player/components/buttons/pip-button}
+* @example
+*```tsx
+*<MediaPipButton></MediaPipButton>
+*```
+*/
+export declare const MediaPIPButton: import("maverick.js/react").ReactElement<MediaPIPButtonElement>;
+/**
+A button for toggling the playback state (play/pause) of the current media.
+
+* @docs {@link https://www.vidstack.io/docs/react/player/components/buttons/play-button}
+* @example
+*```tsx
+*<MediaPlayButton></MediaPlayButton>
+*```
+*/
+export declare const MediaPlayButton: import("maverick.js/react").ReactElement<MediaPlayButtonElement>;
+/**
+A button for seeking the current media playback forwards or backwards by a specified amount.
+
+* @docs {@link https://www.vidstack.io/docs/react/player/components/buttons/seek-button}
+* @example
+*```tsx
+*Forward +30s on each press.
+*<MediaSeekButton seconds="+30"></MediaSeekButton>
+*Backward -30s on each press.
+*<MediaSeekButton seconds="-30"></MediaSeekButton>
+*```
+*/
+export declare const MediaSeekButton: import("maverick.js/react").ReactElement<MediaSeekButtonElement>;
+/**
+A toggle button is a two-state button that can be either off (not pressed) or on (pressed).
+
+* @docs {@link https://www.vidstack.io/docs/react/player/components/buttons/toggle-button}
+* @example
+*```tsx
+*<MediaToggleButton ariaLabel="...">
+*  <svg slot="on">...</svg>
+*  <svg slot="off">...</svg>
+*</MediaToggleButton>
+*```
+*/
+export declare const MediaToggleButton: import("maverick.js/react").ReactElement<MediaToggleButtonElement>;
+/**
 Renders and displays captions/subtitles. This will be an overlay for video and a simple
@@ -53,13 +131,21 @@ captions box for audio.
 */
-export declare const MediaCaptions: import("maverick.js/react").ReactElement<import("vidstack").MediaCaptionsElement>;
+export declare const MediaCaptions: import("maverick.js/react").ReactElement<MediaCaptionsElement>;
 /**
-A button for toggling the fullscreen mode of the player.
+This component enables actions to be performed on the media based on user gestures.
 
-* @docs {@link https://www.vidstack.io/docs/react/player/components/buttons/fullscreen-button}
+* @docs {@link https://www.vidstack.io/docs/react/player/components/media/gesture}
 * @example
 *```tsx
-*<MediaFullscreenButton></MediaFullscreenButton>
+*<MediaPlayer>
+*  <MediaOutlet>
+*    <MediaGesture event="pointerup" action="toggle:paused"></MediaGesture>
+*    <MediaGesture
+*      event="dblpointerup"
+*      action="toggle:fullscreen"
+*    ></MediaGesture>
+*  </MediaOutlet>
+*</MediaPlayer>
 *```
 */
-export declare const MediaFullscreenButton: import("maverick.js/react").ReactElement<import("vidstack").MediaFullscreenButtonElement>;
+export declare const MediaGesture: import("maverick.js/react").ReactElement<MediaGestureElement>;
 /**
@@ -86,34 +172,198 @@ This component displays the current live status of the stream. This includes whether it's
 */
-export declare const MediaLiveIndicator: import("maverick.js/react").ReactElement<import("vidstack").MediaLiveIndicatorElement>;
+export declare const MediaLiveIndicator: import("maverick.js/react").ReactElement<MediaLiveIndicatorElement>;
 /**
-A button for toggling the muted state of the player.
+This component is a pre-styled menu button that controls the opening and closing of a audio
+tracks menu.
 
-* @docs {@link https://www.vidstack.io/docs/react/player/components/buttons/mute-button}
+* @docs {@link https://www.vidstack.io/docs/react/player/components/menu/audio-menu}
 * @example
 *```tsx
-*<MediaMuteButton></MediaMuteButton>
+*<MediaMenu>
+*  <MediaAudioMenuButton label="Audio"></MediaAudioMenuButton>
+*  <MediaAudioMenuItems></MediaAudioMenuItems>
+*</MediaMenu>
 *```
 */
-export declare const MediaMuteButton: import("maverick.js/react").ReactElement<import("vidstack").MediaMuteButtonElement>;
+export declare const MediaAudioMenuButton: import("maverick.js/react").ReactElement<MediaAudioMenuButtonElement>;
 /**
-A button for toggling the picture-in-picture (PIP) mode of the player.
+This component displays menu radio options to the user so they can manually change the current
+audio track.
 
-* @docs {@link https://www.vidstack.io/docs/react/player/components/buttons/pip-button}
+* @docs {@link https://www.vidstack.io/docs/react/player/components/menu/audio-menu}
 * @example
 *```tsx
-*<MediaPipButton></MediaPipButton>
+*<MediaMenu>
+*  <MediaAudioMenuButton label="Audio"></MediaAudioMenuButton>
+*  <MediaAudioMenuItems></MediaAudioMenuItems>
+*</MediaMenu>
 *```
 */
-export declare const MediaPIPButton: import("maverick.js/react").ReactElement<import("vidstack").MediaPIPButtonElement>;
+export declare const MediaAudioMenuItems: import("maverick.js/react").ReactElement<MediaAudioMenuItemsElement>;
 /**
-A button for toggling the playback state (play/pause) of the current media.
+This component is a pre-styled menu button that controls the opening and closing of a captions
+menu.
 
-* @docs {@link https://www.vidstack.io/docs/react/player/components/buttons/play-button}
+* @docs {@link https://www.vidstack.io/docs/react/player/components/menu/captions-menu}
 * @example
 *```tsx
-*<MediaPlayButton></MediaPlayButton>
+*<MediaMenu>
+*  <MediaCaptionsMenuButton label="Captions"></MediaCaptionsMenuButton>
+*  <MediaCaptionsMenuItems></MediaCaptionsMenuItems>
+*</MediaMenu>
 *```
 */
-export declare const MediaPlayButton: import("maverick.js/react").ReactElement<import("vidstack").MediaPlayButtonElement>;
+export declare const MediaCaptionsMenuButton: import("maverick.js/react").ReactElement<MediaCaptionsMenuButtonElement>;
 /**
+This component displays menu radio options to the user so they can manually change the current
+captions/subtitles track.
+
+* @docs {@link https://www.vidstack.io/docs/react/player/components/menu/captions-menu-items}
+* @example
+*```tsx
+*<MediaMenu>
+*  <MediaCaptionsMenuButton label="Captions"></MediaCaptionsMenuButton>
+*  <MediaCaptionsMenuItems></MediaCaptionsMenuItems>
+*</MediaMenu>
+*```
+*/
+export declare const MediaCaptionsMenuItems: import("maverick.js/react").ReactElement<MediaCaptionsMenuItemsElement>;
+/**
+A button that controls the opening and closing of a menu component. The button will become a
+menuitem when used inside a submenu.
+
+* @docs {@link https://www.vidstack.io/docs/react/player/components/menu/menu}
+* @example
+*```tsx
+*<MediaMenu>
+*  <MediaMenuButton ariaLabel="Settings">
+*    <MediaIcon type="settings"></MediaIcon>
+*  </MediaMenuButton>
+*  <MediaMenuItems>
+*    ...
+*  </MediaMenuItems>
+*</MediaMenu>
+*```
+*/
+export declare const MediaMenuButton: import("maverick.js/react").ReactElement<MediaMenuButtonElement>;
+/**
+Menu items can be used to display settings or arbitrary content in a floating panel.
+
+* @docs {@link https://www.vidstack.io/docs/react/player/components/menu/menu}
+* @example
+*```tsx
+*<MediaMenu>
+*  <MediaMenuButton ariaLabel="Settings">
+*    <MediaIcon type="settings"></MediaIcon>
+*  </MediaMenuButton>
+*  <MediaMenuItems>
+*    ...
+*  </MediaMenuItems>
+*</MediaMenu>
+*```
+*/
+export declare const MediaMenuItems: import("maverick.js/react").ReactElement<MediaMenuItemsElement>;
+/**
+This component is used to display options in a floating panel.
+
+* @docs {@link https://www.vidstack.io/docs/react/player/components/menu/menu}
+* @example
+*```tsx
+*<MediaMenu>
+*  <MediaMenuButton ariaLabel="Settings">
+*    <MediaIcon type="settings"></MediaIcon>
+*  </MediaMenuButton>
+*  <MediaMenuItems>
+*    ...
+*  </MediaMenuItems>
+*</MediaMenu>
+*```
+*/
+export declare const MediaMenu: import("maverick.js/react").ReactElement<MediaMenuElement>;
+/**
+This component is a pre-styled menu button that controls the opening and closing of a playback
+rate menu.
+
+* @docs {@link https://www.vidstack.io/docs/react/player/components/menu/playback-rate-menu}
+* @example
+*```tsx
+*<MediaMenu>
+*  <MediaPlaybackRateMenuButton label="Speed"></MediaPlaybackRateMenuButton>
+*  <MediaPlaybackRateMenuItems></MediaPlaybackRateMenuItems>
+*</MediaMenu>
+*```
+*/
+export declare const MediaPlaybackRateMenuButton: import("maverick.js/react").ReactElement<MediaPlaybackRateMenuButtonElement>;
+/**
+This component displays menu radio options to the user so they can manually change the current
+playback speed.
+
+* @docs {@link https://www.vidstack.io/docs/react/player/components/menu/playback-rate-menu}
+* @example
+*```tsx
+*<MediaMenu>
+*  <MediaPlaybackRateMenuButton label="Speed"></MediaPlaybackRateMenuButton>
+*  <MediaPlaybackRateMenuItems></MediaPlaybackRateMenuItems>
+*</MediaMenu>
+*```
+*/
+export declare const MediaPlaybackRateMenuItems: import("maverick.js/react").ReactElement<MediaPlaybackRateMenuItemsElement>;
+/**
+This component is a pre-filled menu button that controls the opening and closing of a quality
+rate menu.
+
+* @docs {@link https://www.vidstack.io/docs/react/player/components/menu/quality-menu}
+* @example
+*```tsx
+*<MediaMenu>
+*  <MediaQualityMenuButton label="Quality"></MediaQualityMenuButton>
+*  <MediaQualityMenuItems></MediaQualityMenuItems>
+*</MediaMenu>
+*```
+*/
+export declare const MediaQualityMenuButton: import("maverick.js/react").ReactElement<MediaQualityMenuButtonElement>;
+/**
+This component displays menu radio options to the user so they can manually change the current
+playback quality.
+
+* @docs {@link https://www.vidstack.io/docs/react/player/components/menu/quality-menu}
+* @example
+*```tsx
+*<MediaMenu>
+*  <MediaQualityMenuButton label="Quality"></MediaQualityMenuButton>
+*  <MediaQualityMenuItems></MediaQualityMenuItems>
+*</MediaMenu>
+*```
+*/
+export declare const MediaQualityMenuItems: import("maverick.js/react").ReactElement<MediaQualityMenuItemsElement>;
+/**
+A radio group consists of options where only one of them can be checked. Each option is
+provided as a radio (i.e., a selectable element).
+
+* @docs {@link https://www.vidstack.io/docs/react/player/components/menu/radio-group}
+* @example
+*```tsx
+*<MediaRadioGroup value={720}>
+*  <MediaRadio value={1080}>1080p</MediaRadio>
+*  <MediaRadio value={720}>720p</MediaRadio>
+*  ...
+*</MediaRadioGroup>
+*```
+*/
+export declare const MediaRadioGroup: import("maverick.js/react").ReactElement<MediaRadioGroupElement>;
+/**
+A radio represents a option that a user can select inside of a radio group. Only one radio
+can be checked in a group.
+
+* @docs {@link https://www.vidstack.io/docs/react/player/components/menu/radio}
+* @example
+*```tsx
+*<MediaRadioGroup value={720}>
+*  <MediaRadio value={1080}>1080p</MediaRadio>
+*  <MediaRadio value={720}>720p</MediaRadio>
+*  ...
+*</MediaRadioGroup>
+*```
+*/
+export declare const MediaRadio: import("maverick.js/react").ReactElement<MediaRadioElement>;
+/**
 Loads and displays the current media poster image. By default, the media provider's
@@ -130,17 +380,4 @@ loading strategy is respected meaning the poster won't load until the media can.
 */
-export declare const MediaPoster: import("maverick.js/react").ReactElement<import("vidstack").MediaPosterElement>;
+export declare const MediaPoster: import("maverick.js/react").ReactElement<MediaPosterElement>;
 /**
-A button for seeking the current media playback forwards or backwards by a specified amount.
-
-* @docs {@link https://www.vidstack.io/docs/react/player/components/buttons/seek-button}
-* @example
-*```tsx
-*Forward +30s on each press.
-*<MediaSeekButton seconds="+30"></MediaSeekButton>
-*Backward -30s on each press.
-*<MediaSeekButton seconds="-30"></MediaSeekButton>
-*```
-*/
-export declare const MediaSeekButton: import("maverick.js/react").ReactElement<import("vidstack").MediaSeekButtonElement>;
-/**
 Used to load/parse WebVTT files and display preview thumbnails when the user is hovering hover
@@ -161,3 +398,3 @@ or dragging the time slider. The time ranges in the WebVTT file will automatically be matched
 */
-export declare const MediaSliderThumbnail: import("maverick.js/react").ReactElement<import("vidstack").MediaSliderThumbnailElement>;
+export declare const MediaSliderThumbnail: import("maverick.js/react").ReactElement<MediaSliderThumbnailElement>;
 /**
@@ -199,3 +436,3 @@ Outputs the current slider value as text.
 */
-export declare const MediaSliderValue: import("maverick.js/react").ReactElement<import("vidstack").MediaSliderValueElement>;
+export declare const MediaSliderValue: import("maverick.js/react").ReactElement<MediaSliderValueElement>;
 /**
@@ -214,3 +451,3 @@ Used to load a low-resolution video to be displayed when the user is hovering over or dragging
 */
-export declare const MediaSliderVideo: import("maverick.js/react").ReactElement<import("vidstack").MediaSliderVideoElement>;
+export declare const MediaSliderVideo: import("maverick.js/react").ReactElement<MediaSliderVideoElement>;
 /**
@@ -227,3 +464,3 @@ A custom-built range input that is cross-browser friendly, ARIA friendly, mouse/touch-friendly
 */
-export declare const MediaSlider: import("maverick.js/react").ReactElement<import("vidstack").MediaSliderElement>;
+export declare const MediaSlider: import("maverick.js/react").ReactElement<MediaSliderElement>;
 /**
@@ -248,4 +485,23 @@ A slider control that lets the user specify their desired time level.
 */
-export declare const MediaTimeSlider: import("maverick.js/react").ReactElement<import("vidstack").MediaTimeSliderElement>;
+export declare const MediaTimeSlider: import("maverick.js/react").ReactElement<MediaTimeSliderElement>;
 /**
+A slider control that lets the user specify their desired volume level.
+
+* @docs {@link https://www.vidstack.io/docs/react/player/components/sliders/volume-slider}
+* @example
+*```tsx
+*<MediaVolumeSlider></MediaVolumeSlider>
+*```
+* @example
+*```tsx
+*<MediaVolumeSlider>
+*  <MediaSliderValue
+*    type="pointer"
+*    format="percent"
+*  ></MediaSliderValue>
+*</MediaVolumeSlider>
+*```
+*/
+export declare const MediaVolumeSlider: import("maverick.js/react").ReactElement<MediaVolumeSliderElement>;
+/**
 Outputs a media duration (eg: `currentTime`, `duration`, `bufferedAmount`, etc.) value as time
@@ -265,34 +521,18 @@ formatted text.
 */
-export declare const MediaTime: import("maverick.js/react").ReactElement<import("vidstack").MediaTimeElement>;
+export declare const MediaTime: import("maverick.js/react").ReactElement<MediaTimeElement>;
 /**
-A toggle button is a two-state button that can be either off (not pressed) or on (pressed).
+A contextual text bubble that displays a description for an element that appears on pointer
+hover or keyboard focus.
 
-* @docs {@link https://www.vidstack.io/docs/react/player/components/buttons/toggle-button}
+* @docs {@link https://www.vidstack.io/docs/react/player/components/buttons/tooltip}
 * @example
 *```tsx
-*<MediaToggleButton ariaLabel="...">
-*  <svg slot="on">...</svg>
-*  <svg slot="off">...</svg>
-*</MediaToggleButton>
+*<MediaPlayButton>
+*  <MediaTooltip position="top left">
+*    <span slot="play">Play</span>
+*    <span slot="pause">Pause</span>
+*  </MediaTooltip>
+*</MediaPlayButton>
 *```
 */
-export declare const MediaToggleButton: import("maverick.js/react").ReactElement<import("vidstack").MediaToggleButtonElement>;
-/**
-A slider control that lets the user specify their desired volume level.
-
-* @docs {@link https://www.vidstack.io/docs/react/player/components/sliders/volume-slider}
-* @example
-*```tsx
-*<MediaVolumeSlider></MediaVolumeSlider>
-*```
-* @example
-*```tsx
-*<MediaVolumeSlider>
-*  <MediaSliderValue
-*    type="pointer"
-*    format="percent"
-*  ></MediaSliderValue>
-*</MediaVolumeSlider>
-*```
-*/
-export declare const MediaVolumeSlider: import("maverick.js/react").ReactElement<import("vidstack").MediaVolumeSliderElement>;
+export declare const MediaTooltip: import("maverick.js/react").ReactElement<MediaTooltipElement>;

dist/types/icons.d.ts

@@ -16,2 +16,4 @@ import { type IconComponent } from './icon';
 export declare const ArrowCollapseIcon: IconComponent;
+/** [Click here to preview icon](https://vidstack.io/media-icons?lib=react&icon=arrow-down) */
+export declare const ArrowDownIcon: IconComponent;
 /** [Click here to preview icon](https://vidstack.io/media-icons?lib=react&icon=arrow-expand-out) */
@@ -23,2 +25,6 @@ export declare const ArrowExpandOutIcon: IconComponent;
 export declare const ArrowLeftIcon: IconComponent;
+/** [Click here to preview icon](https://vidstack.io/media-icons?lib=react&icon=arrow-right) */
+export declare const ArrowRightIcon: IconComponent;
+/** [Click here to preview icon](https://vidstack.io/media-icons?lib=react&icon=arrow-up) */
+export declare const ArrowUpIcon: IconComponent;
 /** [Click here to preview icon](https://vidstack.io/media-icons?lib=react&icon=bookmark) */
@@ -36,4 +42,8 @@ export declare const BookmarkIcon: IconComponent;
 export declare const ChevronDownIcon: IconComponent;
+/** [Click here to preview icon](https://vidstack.io/media-icons?lib=react&icon=chevron-left) */
+export declare const ChevronLeftIcon: IconComponent;
 /** [Click here to preview icon](https://vidstack.io/media-icons?lib=react&icon=chevron-right) */
 export declare const ChevronRightIcon: IconComponent;
+/** [Click here to preview icon](https://vidstack.io/media-icons?lib=react&icon=chevron-up) */
+export declare const ChevronUpIcon: IconComponent;
 /** [Click here to preview icon](https://vidstack.io/media-icons?lib=react&icon=chromecast) */
@@ -40,0 +50,0 @@ export declare const ChromecastIcon: IconComponent;

dist/types/index.d.ts

@@ -0,1 +1,6 @@
+declare module 'react' {
+    interface DOMAttributes<T> {
+        part?: string | undefined;
+    }
+}
 export * from './components';
@@ -2,0 +7,0 @@ export * from './use-media-player';

dist/types/use-media-store.d.ts

 import type { RefObject } from 'react';
-import { type MediaPlayerElement, type MediaStore } from 'vidstack';
+import { type MediaPlayerElement, type MediaState } from 'vidstack';
 /**
@@ -9,2 +9,2 @@ * This hook is used to subscribe to the current media state on the nearest parent
  */
-export declare function useMediaStore(ref?: RefObject<MediaPlayerElement | null>): Readonly<MediaStore>;
+export declare function useMediaStore(ref?: RefObject<MediaPlayerElement | null>): Readonly<MediaState>;

dist/types/use-slider-store.d.ts

 import type { RefObject } from 'react';
-import { type MediaSliderElement, type SliderStore } from 'vidstack';
+import { type MediaSliderElement, type SliderState } from 'vidstack';
 /**
@@ -9,2 +9,2 @@ * This hook is used to subscribe to the current slider state on the given or nearest
  */
-export declare function useSliderStore(ref?: RefObject<MediaSliderElement | null>): SliderStore;
+export declare function useSliderStore(ref?: RefObject<MediaSliderElement | null>): Readonly<SliderState>;

dist/types/use-store.d.ts

@@ -1,5 +0,4 @@
-import { type AnyRecord, type Store } from 'maverick.js';
+import { type ReadSignalRecord, type StoreFactory } from 'maverick.js';
+import type { HostElement } from 'maverick.js/element';
 import { type RefObject } from 'react';
-export declare function useStore<Record extends AnyRecord, StoreFactory extends Store<Record>, StoreRecord extends Record>(factory: StoreFactory, ref?: RefObject<{
-    $store: StoreRecord;
-} | null>, init?: StoreRecord): Record;
+export declare function useStore<Record extends {}>(factory: StoreFactory<Record>, ref?: RefObject<HostElement | null>, init?: ReadSignalRecord<Record>): Record;

package.json

 {
   "name": "@vidstack/react",
-  "version": "0.4.5",
+  "version": "0.5.0",
   "description": "Build awesome media experiences on the web.",
@@ -26,11 +26,11 @@ "license": "MIT",
     "@types/react": "^18.0.0",
-    "maverick.js": "0.33.1",
-    "media-icons": "^0.4.2",
+    "maverick.js": "0.36.1",
+    "media-icons": "0.5.0",
     "react": "^18.0.0",
-    "vidstack": "0.4.5"
+    "vidstack": "0.5.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",
-    "maverick.js": "0.33.1",
-    "media-icons": "^0.4.2",
+    "maverick.js": "0.36.1",
+    "media-icons": "0.5.0",
     "react": "^18.0.0",
@@ -37,0 +37,0 @@ "rimraf": "^3.0.0",

No alert changes

Improved metrics

Total package byte prevSize

165161

increased by15.22%

Lines of code

3983

increased by16.39%

No dependency changes