@videojs/react 10.0.0-beta.9 → 10.0.0-rc.2

package/dist/default/presets/video/skin.js

@@ -1,283 +1,11 @@
-import { Container, usePlayer } from "../../player/context.js";
-import { isRenderProp } from "../../utils/use-render.js";
-import { BufferingIndicator } from "../../ui/buffering-indicator/buffering-indicator.js";
-import { CaptionsButton } from "../../ui/captions-button/captions-button.js";
-import { ControlsRoot } from "../../ui/controls/controls-root.js";
-import { FullscreenButton } from "../../ui/fullscreen-button/fullscreen-button.js";
-import { MuteButton } from "../../ui/mute-button/mute-button.js";
-import { PiPButton } from "../../ui/pip-button/pip-button.js";
-import { PlayButton } from "../../ui/play-button/play-button.js";
-import { PlaybackRateButton } from "../../ui/playback-rate-button/playback-rate-button.js";
-import { PopoverPopup } from "../../ui/popover/popover-popup.js";
-import { PopoverRoot } from "../../ui/popover/popover-root.js";
-import { PopoverTrigger } from "../../ui/popover/popover-trigger.js";
-import { Poster } from "../../ui/poster/poster.js";
-import { SeekButton } from "../../ui/seek-button/seek-button.js";
-import { SliderBuffer } from "../../ui/slider/slider-buffer.js";
-import { SliderFill } from "../../ui/slider/slider-fill.js";
-import { SliderThumb } from "../../ui/slider/slider-thumb.js";
-import { SliderThumbnail } from "../../ui/slider/slider-thumbnail.js";
-import { SliderTrack } from "../../ui/slider/slider-track.js";
-import { SliderValue } from "../../ui/slider/slider-value.js";
-import { Group } from "../../ui/time/time-group.js";
-import { Value } from "../../ui/time/time-value.js";
-import { TimeSliderRoot } from "../../ui/time-slider/time-slider-root.js";
-import { TooltipPopup } from "../../ui/tooltip/tooltip-popup.js";
-import { TooltipProvider } from "../../ui/tooltip/tooltip-provider.js";
-import { TooltipRoot } from "../../ui/tooltip/tooltip-root.js";
-import { TooltipTrigger } from "../../ui/tooltip/tooltip-trigger.js";
-import { VolumeSliderRoot } from "../../ui/volume-slider/volume-slider-root.js";
-import { ErrorDialog } from "../error-dialog.js";
-import CaptionsOffIcon from "../../icons/dist/react/default/captions-off.js";
-import CaptionsOnIcon from "../../icons/dist/react/default/captions-on.js";
-import FullscreenEnterIcon from "../../icons/dist/react/default/fullscreen-enter.js";
-import FullscreenExitIcon from "../../icons/dist/react/default/fullscreen-exit.js";
-import PauseIcon from "../../icons/dist/react/default/pause.js";
-import PipEnterIcon from "../../icons/dist/react/default/pip-enter.js";
-import PipExitIcon from "../../icons/dist/react/default/pip-exit.js";
-import PlayIcon from "../../icons/dist/react/default/play.js";
-import RestartIcon from "../../icons/dist/react/default/restart.js";
-import SeekIcon from "../../icons/dist/react/default/seek.js";
-import SpinnerIcon from "../../icons/dist/react/default/spinner.js";
-import VolumeHighIcon from "../../icons/dist/react/default/volume-high.js";
-import VolumeLowIcon from "../../icons/dist/react/default/volume-low.js";
-import VolumeOffIcon from "../../icons/dist/react/default/volume-off.js";
-import { forwardRef } from "react";
-import { isString } from "@videojs/utils/predicate";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "@videojs/utils/style";
-
+"use client";
+import { DefaultVideoSkin } from "../../internal/skins/default-video/skin.js";
+import { jsx } from "react/jsx-runtime";
 //#region src/presets/video/skin.tsx
-const SEEK_TIME = 10;
-const ERROR_CLASSNAMES = {
-	root: "media-error",
-	dialog: "media-error__dialog media-surface",
-	content: "media-error__content",
-	title: "media-error__title",
-	description: "media-error__description",
-	actions: "media-error__actions",
-	close: "media-button media-button--primary"
-};
-const Button = forwardRef(function Button({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx("button", {
-		ref,
-		type: "button",
-		className: cn("media-button media-button--subtle media-button--icon", className),
-		...props
-	});
-});
-function PlayLabel() {
-	const paused = usePlayer((s) => Boolean(s.paused));
-	if (usePlayer((s) => Boolean(s.ended))) return "Replay";
-	return paused ? "Play" : "Pause";
-}
-function CaptionsLabel() {
-	return usePlayer((s) => Boolean(s.subtitlesShowing)) ? "Disable captions" : "Enable captions";
-}
-function PiPLabel() {
-	return usePlayer((s) => Boolean(s.pip)) ? "Exit picture-in-picture" : "Enter picture-in-picture";
-}
-function FullscreenLabel() {
-	return usePlayer((s) => Boolean(s.fullscreen)) ? "Exit fullscreen" : "Enter fullscreen";
-}
-function VolumePopover() {
-	const volumeUnsupported = usePlayer((s) => s.volumeAvailability === "unsupported");
-	const muteButton = /* @__PURE__ */ jsxs(MuteButton, {
-		className: "media-button--mute",
-		render: /* @__PURE__ */ jsx(Button, {}),
-		children: [
-			/* @__PURE__ */ jsx(VolumeOffIcon, { className: "media-icon media-icon--volume-off" }),
-			/* @__PURE__ */ jsx(VolumeLowIcon, { className: "media-icon media-icon--volume-low" }),
-			/* @__PURE__ */ jsx(VolumeHighIcon, { className: "media-icon media-icon--volume-high" })
-		]
-	});
-	if (volumeUnsupported) return muteButton;
-	return /* @__PURE__ */ jsxs(PopoverRoot, {
-		openOnHover: true,
-		delay: 200,
-		closeDelay: 100,
-		side: "top",
-		children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: muteButton }), /* @__PURE__ */ jsx(PopoverPopup, {
-			className: "media-surface media-popover media-popover--volume",
-			children: /* @__PURE__ */ jsxs(VolumeSliderRoot, {
-				className: "media-slider",
-				orientation: "vertical",
-				thumbAlignment: "edge",
-				children: [/* @__PURE__ */ jsx(SliderTrack, {
-					className: "media-slider__track",
-					children: /* @__PURE__ */ jsx(SliderFill, { className: "media-slider__fill" })
-				}), /* @__PURE__ */ jsx(SliderThumb, { className: "media-slider__thumb media-slider__thumb--persistent" })]
-			})
-		})]
-	});
-}
 function VideoSkin(props) {
-	const { children, className, poster, ...rest } = props;
-	return /* @__PURE__ */ jsxs(Container, {
-		className: cn("media-default-skin media-default-skin--video", className),
-		...rest,
-		children: [
-			children,
-			poster && /* @__PURE__ */ jsx(Poster, {
-				src: isString(poster) ? poster : void 0,
-				render: isRenderProp(poster) ? poster : void 0
-			}),
-			/* @__PURE__ */ jsx(BufferingIndicator, { render: (props) => /* @__PURE__ */ jsx("div", {
-				...props,
-				className: "media-buffering-indicator",
-				children: /* @__PURE__ */ jsx("div", {
-					className: "media-surface",
-					children: /* @__PURE__ */ jsx(SpinnerIcon, { className: "media-icon" })
-				})
-			}) }),
-			/* @__PURE__ */ jsx(ErrorDialog, { classNames: ERROR_CLASSNAMES }),
-			/* @__PURE__ */ jsx(ControlsRoot, {
-				className: "media-surface media-controls",
-				children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
-					/* @__PURE__ */ jsxs(TooltipRoot, {
-						side: "top",
-						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(PlayButton, {
-							className: "media-button--play",
-							render: /* @__PURE__ */ jsx(Button, {}),
-							children: [
-								/* @__PURE__ */ jsx(RestartIcon, { className: "media-icon media-icon--restart" }),
-								/* @__PURE__ */ jsx(PlayIcon, { className: "media-icon media-icon--play" }),
-								/* @__PURE__ */ jsx(PauseIcon, { className: "media-icon media-icon--pause" })
-							]
-						}) }), /* @__PURE__ */ jsx(TooltipPopup, {
-							className: "media-surface media-tooltip",
-							children: /* @__PURE__ */ jsx(PlayLabel, {})
-						})]
-					}),
-					/* @__PURE__ */ jsxs(TooltipRoot, {
-						side: "top",
-						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(SeekButton, {
-							seconds: -SEEK_TIME,
-							className: "media-button--seek",
-							render: /* @__PURE__ */ jsx(Button, {}),
-							children: /* @__PURE__ */ jsxs("span", {
-								className: "media-icon__container",
-								children: [/* @__PURE__ */ jsx(SeekIcon, { className: "media-icon media-icon--seek media-icon--flipped" }), /* @__PURE__ */ jsx("span", {
-									className: "media-icon__label",
-									children: SEEK_TIME
-								})]
-							})
-						}) }), /* @__PURE__ */ jsxs(TooltipPopup, {
-							className: "media-surface media-tooltip",
-							children: [
-								"Seek backward ",
-								SEEK_TIME,
-								" seconds"
-							]
-						})]
-					}),
-					/* @__PURE__ */ jsxs(TooltipRoot, {
-						side: "top",
-						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(SeekButton, {
-							seconds: SEEK_TIME,
-							className: "media-button--seek",
-							render: /* @__PURE__ */ jsx(Button, {}),
-							children: /* @__PURE__ */ jsxs("span", {
-								className: "media-icon__container",
-								children: [/* @__PURE__ */ jsx(SeekIcon, { className: "media-icon media-icon--seek" }), /* @__PURE__ */ jsx("span", {
-									className: "media-icon__label",
-									children: SEEK_TIME
-								})]
-							})
-						}) }), /* @__PURE__ */ jsxs(TooltipPopup, {
-							className: "media-surface media-tooltip",
-							children: [
-								"Seek forward ",
-								SEEK_TIME,
-								" seconds"
-							]
-						})]
-					}),
-					/* @__PURE__ */ jsxs(Group, {
-						className: "media-time",
-						children: [
-							/* @__PURE__ */ jsx(Value, {
-								type: "current",
-								className: "media-time__value"
-							}),
-							/* @__PURE__ */ jsxs(TimeSliderRoot, {
-								className: "media-slider",
-								children: [
-									/* @__PURE__ */ jsxs(SliderTrack, {
-										className: "media-slider__track",
-										children: [/* @__PURE__ */ jsx(SliderFill, { className: "media-slider__fill" }), /* @__PURE__ */ jsx(SliderBuffer, { className: "media-slider__buffer" })]
-									}),
-									/* @__PURE__ */ jsx(SliderThumb, { className: "media-slider__thumb" }),
-									/* @__PURE__ */ jsxs("div", {
-										className: "media-surface media-preview media-slider__preview",
-										children: [
-											/* @__PURE__ */ jsx(SliderThumbnail, { className: "media-preview__thumbnail" }),
-											/* @__PURE__ */ jsx(SliderValue, {
-												type: "pointer",
-												className: "media-preview__timestamp"
-											}),
-											/* @__PURE__ */ jsx(SpinnerIcon, { className: "media-preview__spinner media-icon" })
-										]
-									})
-								]
-							}),
-							/* @__PURE__ */ jsx(Value, {
-								type: "duration",
-								className: "media-time__value"
-							})
-						]
-					}),
-					/* @__PURE__ */ jsxs(TooltipRoot, {
-						side: "top",
-						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(PlaybackRateButton, {
-							className: "media-button--playback-rate",
-							render: /* @__PURE__ */ jsx(Button, {})
-						}) }), /* @__PURE__ */ jsx(TooltipPopup, {
-							className: "media-surface media-tooltip",
-							children: "Toggle playback rate"
-						})]
-					}),
-					/* @__PURE__ */ jsx(VolumePopover, {}),
-					/* @__PURE__ */ jsxs(TooltipRoot, {
-						side: "top",
-						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(CaptionsButton, {
-							className: "media-button--captions",
-							render: /* @__PURE__ */ jsx(Button, {}),
-							children: [/* @__PURE__ */ jsx(CaptionsOffIcon, { className: "media-icon media-icon--captions-off" }), /* @__PURE__ */ jsx(CaptionsOnIcon, { className: "media-icon media-icon--captions-on" })]
-						}) }), /* @__PURE__ */ jsx(TooltipPopup, {
-							className: "media-surface media-tooltip",
-							children: /* @__PURE__ */ jsx(CaptionsLabel, {})
-						})]
-					}),
-					/* @__PURE__ */ jsxs(TooltipRoot, {
-						side: "top",
-						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(PiPButton, {
-							className: "media-button--pip",
-							render: /* @__PURE__ */ jsx(Button, {}),
-							children: [/* @__PURE__ */ jsx(PipEnterIcon, { className: "media-icon media-icon--pip-enter" }), /* @__PURE__ */ jsx(PipExitIcon, { className: "media-icon media-icon--pip-exit" })]
-						}) }), /* @__PURE__ */ jsx(TooltipPopup, {
-							className: "media-surface media-tooltip",
-							children: /* @__PURE__ */ jsx(PiPLabel, {})
-						})]
-					}),
-					/* @__PURE__ */ jsxs(TooltipRoot, {
-						side: "top",
-						children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs(FullscreenButton, {
-							className: "media-button--fullscreen",
-							render: /* @__PURE__ */ jsx(Button, {}),
-							children: [/* @__PURE__ */ jsx(FullscreenEnterIcon, { className: "media-icon media-icon--fullscreen-enter" }), /* @__PURE__ */ jsx(FullscreenExitIcon, { className: "media-icon media-icon--fullscreen-exit" })]
-						}) }), /* @__PURE__ */ jsx(TooltipPopup, {
-							className: "media-surface media-tooltip",
-							children: /* @__PURE__ */ jsx(FullscreenLabel, {})
-						})]
-					})
-				] })
-			}),
-			/* @__PURE__ */ jsx("div", { className: "media-overlay" })
-		]
-	});
+	return /* @__PURE__ */ jsx(DefaultVideoSkin, { ...props });
 }
-
 //#endregion
 export { VideoSkin };
+
 //# sourceMappingURL=skin.js.map

package/dist/default/presets/video/skin.js.map

@@ -1 +1 @@
-{"version":3,"file":"skin.js","names":["Popover.Root","Popover.Trigger","Popover.Popup","VolumeSlider.Root","VolumeSlider.Track","VolumeSlider.Fill","VolumeSlider.Thumb","Controls.Root","Tooltip.Provider","Tooltip.Root","Tooltip.Trigger","Tooltip.Popup","Time.Group","Time.Value","TimeSlider.Root","TimeSlider.Track","TimeSlider.Fill","TimeSlider.Buffer","TimeSlider.Thumb","Slider.Thumbnail","TimeSlider.Value"],"sources":["../../../../src/presets/video/skin.tsx"],"sourcesContent":["import {\n  CaptionsOffIcon,\n  CaptionsOnIcon,\n  FullscreenEnterIcon,\n  FullscreenExitIcon,\n  PauseIcon,\n  PipEnterIcon,\n  PipExitIcon,\n  PlayIcon,\n  RestartIcon,\n  SeekIcon,\n  SpinnerIcon,\n  VolumeHighIcon,\n  VolumeLowIcon,\n  VolumeOffIcon,\n} from '@videojs/icons/react';\nimport { isString } from '@videojs/utils/predicate';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container, usePlayer } from '@/player/context';\nimport { BufferingIndicator } from '@/ui/buffering-indicator';\nimport { CaptionsButton } from '@/ui/captions-button';\nimport { Controls } from '@/ui/controls';\nimport { FullscreenButton } from '@/ui/fullscreen-button';\nimport { MuteButton } from '@/ui/mute-button';\nimport { PiPButton } from '@/ui/pip-button';\nimport { PlayButton } from '@/ui/play-button';\nimport { PlaybackRateButton } from '@/ui/playback-rate-button';\nimport { Popover } from '@/ui/popover';\nimport { Poster } from '@/ui/poster';\nimport { SeekButton } from '@/ui/seek-button';\nimport { Slider } from '@/ui/slider';\nimport { Time } from '@/ui/time';\nimport { TimeSlider } from '@/ui/time-slider';\nimport { Tooltip } from '@/ui/tooltip';\nimport { VolumeSlider } from '@/ui/volume-slider';\nimport { isRenderProp } from '@/utils/use-render';\nimport { ErrorDialog } from '../error-dialog';\nimport type { BaseVideoSkinProps } from '../types';\n\nconst SEEK_TIME = 10;\n\nconst ERROR_CLASSNAMES = {\n  root: 'media-error',\n  dialog: 'media-error__dialog media-surface',\n  content: 'media-error__content',\n  title: 'media-error__title',\n  description: 'media-error__description',\n  actions: 'media-error__actions',\n  close: 'media-button media-button--primary',\n};\n\nexport type VideoSkinProps = BaseVideoSkinProps;\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={cn('media-button media-button--subtle media-button--icon', className)}\n      {...props}\n    />\n  );\n});\n\nfunction PlayLabel(): string {\n  const paused = usePlayer((s) => Boolean(s.paused));\n  const ended = usePlayer((s) => Boolean(s.ended));\n  if (ended) return 'Replay';\n  return paused ? 'Play' : 'Pause';\n}\n\nfunction CaptionsLabel(): string {\n  const active = usePlayer((s) => Boolean(s.subtitlesShowing));\n  return active ? 'Disable captions' : 'Enable captions';\n}\n\nfunction PiPLabel(): string {\n  const pip = usePlayer((s) => Boolean(s.pip));\n  return pip ? 'Exit picture-in-picture' : 'Enter picture-in-picture';\n}\n\nfunction FullscreenLabel(): string {\n  const fullscreen = usePlayer((s) => Boolean(s.fullscreen));\n  return fullscreen ? 'Exit fullscreen' : 'Enter fullscreen';\n}\n\nfunction VolumePopover(): ReactNode {\n  const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');\n\n  const muteButton = (\n    <MuteButton className=\"media-button--mute\" render={<Button />}>\n      <VolumeOffIcon className=\"media-icon media-icon--volume-off\" />\n      <VolumeLowIcon className=\"media-icon media-icon--volume-low\" />\n      <VolumeHighIcon className=\"media-icon media-icon--volume-high\" />\n    </MuteButton>\n  );\n\n  if (volumeUnsupported) return muteButton;\n\n  return (\n    <Popover.Root openOnHover delay={200} closeDelay={100} side=\"top\">\n      <Popover.Trigger render={muteButton} />\n      <Popover.Popup className=\"media-surface media-popover media-popover--volume\">\n        <VolumeSlider.Root className=\"media-slider\" orientation=\"vertical\" thumbAlignment=\"edge\">\n          <VolumeSlider.Track className=\"media-slider__track\">\n            <VolumeSlider.Fill className=\"media-slider__fill\" />\n          </VolumeSlider.Track>\n          <VolumeSlider.Thumb className=\"media-slider__thumb media-slider__thumb--persistent\" />\n        </VolumeSlider.Root>\n      </Popover.Popup>\n    </Popover.Root>\n  );\n}\n\nexport function VideoSkin(props: VideoSkinProps): ReactNode {\n  const { children, className, poster, ...rest } = props;\n\n  return (\n    <Container className={cn('media-default-skin media-default-skin--video', className)} {...rest}>\n      {children}\n\n      {poster && (\n        <Poster src={isString(poster) ? poster : undefined} render={isRenderProp(poster) ? poster : undefined} />\n      )}\n\n      <BufferingIndicator\n        render={(props) => (\n          <div {...props} className=\"media-buffering-indicator\">\n            <div className=\"media-surface\">\n              <SpinnerIcon className=\"media-icon\" />\n            </div>\n          </div>\n        )}\n      />\n\n      <ErrorDialog classNames={ERROR_CLASSNAMES} />\n\n      <Controls.Root className=\"media-surface media-controls\">\n        <Tooltip.Provider>\n          <Tooltip.Root side=\"top\">\n            <Tooltip.Trigger\n              render={\n                <PlayButton className=\"media-button--play\" render={<Button />}>\n                  <RestartIcon className=\"media-icon media-icon--restart\" />\n                  <PlayIcon className=\"media-icon media-icon--play\" />\n                  <PauseIcon className=\"media-icon media-icon--pause\" />\n                </PlayButton>\n              }\n            />\n            <Tooltip.Popup className=\"media-surface media-tooltip\">\n              <PlayLabel />\n            </Tooltip.Popup>\n          </Tooltip.Root>\n\n          <Tooltip.Root side=\"top\">\n            <Tooltip.Trigger\n              render={\n                <SeekButton seconds={-SEEK_TIME} className=\"media-button--seek\" render={<Button />}>\n                  <span className=\"media-icon__container\">\n                    <SeekIcon className=\"media-icon media-icon--seek media-icon--flipped\" />\n                    <span className=\"media-icon__label\">{SEEK_TIME}</span>\n                  </span>\n                </SeekButton>\n              }\n            />\n            <Tooltip.Popup className=\"media-surface media-tooltip\">Seek backward {SEEK_TIME} seconds</Tooltip.Popup>\n          </Tooltip.Root>\n\n          <Tooltip.Root side=\"top\">\n            <Tooltip.Trigger\n              render={\n                <SeekButton seconds={SEEK_TIME} className=\"media-button--seek\" render={<Button />}>\n                  <span className=\"media-icon__container\">\n                    <SeekIcon className=\"media-icon media-icon--seek\" />\n                    <span className=\"media-icon__label\">{SEEK_TIME}</span>\n                  </span>\n                </SeekButton>\n              }\n            />\n            <Tooltip.Popup className=\"media-surface media-tooltip\">Seek forward {SEEK_TIME} seconds</Tooltip.Popup>\n          </Tooltip.Root>\n\n          <Time.Group className=\"media-time\">\n            <Time.Value type=\"current\" className=\"media-time__value\" />\n            <TimeSlider.Root className=\"media-slider\">\n              <TimeSlider.Track className=\"media-slider__track\">\n                <TimeSlider.Fill className=\"media-slider__fill\" />\n                <TimeSlider.Buffer className=\"media-slider__buffer\" />\n              </TimeSlider.Track>\n              <TimeSlider.Thumb className=\"media-slider__thumb\" />\n\n              <div className=\"media-surface media-preview media-slider__preview\">\n                <Slider.Thumbnail className=\"media-preview__thumbnail\" />\n                <TimeSlider.Value type=\"pointer\" className=\"media-preview__timestamp\" />\n                <SpinnerIcon className=\"media-preview__spinner media-icon\" />\n              </div>\n            </TimeSlider.Root>\n            <Time.Value type=\"duration\" className=\"media-time__value\" />\n          </Time.Group>\n\n          <Tooltip.Root side=\"top\">\n            <Tooltip.Trigger\n              render={<PlaybackRateButton className=\"media-button--playback-rate\" render={<Button />} />}\n            />\n            <Tooltip.Popup className=\"media-surface media-tooltip\">Toggle playback rate</Tooltip.Popup>\n          </Tooltip.Root>\n\n          <VolumePopover />\n\n          <Tooltip.Root side=\"top\">\n            <Tooltip.Trigger\n              render={\n                <CaptionsButton className=\"media-button--captions\" render={<Button />}>\n                  <CaptionsOffIcon className=\"media-icon media-icon--captions-off\" />\n                  <CaptionsOnIcon className=\"media-icon media-icon--captions-on\" />\n                </CaptionsButton>\n              }\n            />\n            <Tooltip.Popup className=\"media-surface media-tooltip\">\n              <CaptionsLabel />\n            </Tooltip.Popup>\n          </Tooltip.Root>\n\n          <Tooltip.Root side=\"top\">\n            <Tooltip.Trigger\n              render={\n                <PiPButton className=\"media-button--pip\" render={<Button />}>\n                  <PipEnterIcon className=\"media-icon media-icon--pip-enter\" />\n                  <PipExitIcon className=\"media-icon media-icon--pip-exit\" />\n                </PiPButton>\n              }\n            />\n            <Tooltip.Popup className=\"media-surface media-tooltip\">\n              <PiPLabel />\n            </Tooltip.Popup>\n          </Tooltip.Root>\n\n          <Tooltip.Root side=\"top\">\n            <Tooltip.Trigger\n              render={\n                <FullscreenButton className=\"media-button--fullscreen\" render={<Button />}>\n                  <FullscreenEnterIcon className=\"media-icon media-icon--fullscreen-enter\" />\n                  <FullscreenExitIcon className=\"media-icon media-icon--fullscreen-exit\" />\n                </FullscreenButton>\n              }\n            />\n            <Tooltip.Popup className=\"media-surface media-tooltip\">\n              <FullscreenLabel />\n            </Tooltip.Popup>\n          </Tooltip.Root>\n        </Tooltip.Provider>\n      </Controls.Root>\n\n      <div className=\"media-overlay\" />\n    </Container>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"skin.js","names":["Skin"],"sources":["../../../../src/presets/video/skin.tsx"],"sourcesContent":["'use client';\n\nimport { DefaultVideoSkin as Skin } from '../../internal/skins/default-video/skin';\nimport type { BaseVideoSkinProps } from '../types';\n\nexport interface VideoSkinProps extends BaseVideoSkinProps {}\n\nexport function VideoSkin(props: VideoSkinProps) {\n  return <Skin {...props} />;\n}\n"],"mappings":";;;;AAOA,SAAgB,UAAU,OAAuB;CAC/C,OAAO,oBAACA,kBAAD,EAAM,GAAI,MAAQ,CAAA;AAC3B"}

package/dist/default/ui/airplay-button/component.js

@@ -0,0 +1,17 @@
+import { createMediaButton } from "../create-media-button.js";
+import { AirPlayButtonCore, AirPlayButtonDataAttrs } from "@videojs/core";
+import { selectRemotePlayback } from "@videojs/core/dom";
+//#region src/ui/airplay-button/component.tsx
+/** A button that toggles AirPlay to a remote device. */
+const AirPlayButton = createMediaButton({
+	displayName: "AirPlayButton",
+	core: AirPlayButtonCore,
+	stateAttrMap: AirPlayButtonDataAttrs,
+	selector: selectRemotePlayback,
+	action: (core, state) => core.toggle(state),
+	isSupported: (state) => !state.hidden
+});
+//#endregion
+export { AirPlayButton };
+
+//# sourceMappingURL=component.js.map

package/dist/default/ui/airplay-button/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","names":[],"sources":["../../../../src/ui/airplay-button/component.tsx"],"sourcesContent":["import { AirPlayButtonCore, AirPlayButtonDataAttrs } from '@videojs/core';\nimport { selectRemotePlayback } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface AirPlayButtonProps\n  extends UIComponentProps<'button', AirPlayButtonCore.State>, AirPlayButtonCore.Props {}\n\n/** A button that toggles AirPlay to a remote device. */\nexport const AirPlayButton = createMediaButton<AirPlayButtonCore, AirPlayButtonProps>({\n  displayName: 'AirPlayButton',\n  core: AirPlayButtonCore,\n  stateAttrMap: AirPlayButtonDataAttrs,\n  selector: selectRemotePlayback,\n  action: (core, state) => core.toggle(state),\n  isSupported: (state) => !state.hidden,\n});\n\nexport namespace AirPlayButton {\n  export type Props = AirPlayButtonProps;\n  export type State = AirPlayButtonCore.State;\n}\n"],"mappings":";;;;;AAUA,MAAa,gBAAgB,kBAAyD;CACpF,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,KAAK;CAC1C,cAAc,UAAU,CAAC,MAAM;AACjC,CAAC"}

package/dist/default/ui/airplay-button/index.js

@@ -0,0 +1,2 @@
+import { AirPlayButton } from "./component.js";
+export { AirPlayButton };

package/dist/default/ui/alert-dialog/index.js

@@ -1,4 +1,2 @@
-import { useAlertDialogContext } from "./context.js";
 import { index_parts_exports } from "./index.parts.js";
-
-export { index_parts_exports as AlertDialog, useAlertDialogContext };
+export { index_parts_exports as AlertDialog };

package/dist/default/ui/alert-dialog/index.parts.js

@@ -1,19 +1,20 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
-import { AlertDialogClose } from "./alert-dialog-close.js";
-import { AlertDialogDescription } from "./alert-dialog-description.js";
-import { AlertDialogPopup } from "./alert-dialog-popup.js";
-import { AlertDialogRoot } from "./alert-dialog-root.js";
-import { AlertDialogTitle } from "./alert-dialog-title.js";
-
+import { DialogBackdrop } from "../dialog/backdrop.js";
+import { DialogClose } from "../dialog/close.js";
+import { DialogDescription } from "../dialog/description.js";
+import { DialogPopup } from "../dialog/popup.js";
+import { DialogTitle } from "../dialog/title.js";
+import { AlertDialogRoot } from "./root.js";
 //#region src/ui/alert-dialog/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
-	Close: () => AlertDialogClose,
-	Description: () => AlertDialogDescription,
-	Popup: () => AlertDialogPopup,
+	Backdrop: () => DialogBackdrop,
+	Close: () => DialogClose,
+	Description: () => DialogDescription,
+	Popup: () => DialogPopup,
 	Root: () => AlertDialogRoot,
-	Title: () => AlertDialogTitle
+	Title: () => DialogTitle
 });
-
 //#endregion
-export { index_parts_exports };
+export { DialogBackdrop as Backdrop, DialogClose as Close, DialogDescription as Description, DialogPopup as Popup, AlertDialogRoot as Root, DialogTitle as Title, index_parts_exports };
+
 //# sourceMappingURL=index.parts.js.map

package/dist/default/ui/alert-dialog/index.parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/alert-dialog/index.parts.ts"],"sourcesContent":["export { AlertDialogClose as Close, type AlertDialogCloseProps as CloseProps } from './alert-dialog-close';\nexport {\n  AlertDialogDescription as Description,\n  type AlertDialogDescriptionProps as DescriptionProps,\n} from './alert-dialog-description';\nexport { AlertDialogPopup as Popup, type AlertDialogPopupProps as PopupProps } from './alert-dialog-popup';\nexport { AlertDialogRoot as Root, type AlertDialogRootProps as RootProps } from './alert-dialog-root';\nexport { AlertDialogTitle as Title, type AlertDialogTitleProps as TitleProps } from './alert-dialog-title';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/alert-dialog/index.parts.ts"],"sourcesContent":["export {\n  Backdrop,\n  type BackdropProps,\n  Close,\n  type CloseProps,\n  Description,\n  type DescriptionProps,\n  Popup,\n  type PopupProps,\n  Title,\n  type TitleProps,\n} from '../dialog/index.parts';\nexport { AlertDialogRoot as Root, type AlertDialogRootProps as RootProps } from './root';\n"],"mappings":""}

package/dist/default/ui/alert-dialog/root.js

@@ -0,0 +1,25 @@
+import { DialogContextProvider } from "../dialog/context.js";
+import { useDialogRoot } from "../dialog/use-dialog-root.js";
+import { AlertDialogCore, AlertDialogDataAttrs } from "@videojs/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/alert-dialog/root.tsx
+/** Manages alert dialog state and provides it to the shared dialog parts. */
+function AlertDialogRoot({ children, ...props }) {
+	const context = useDialogRoot({
+		...props,
+		coreFactory: createAlertDialogCore,
+		stateAttrMap: AlertDialogDataAttrs,
+		idPrefix: "alert-dialog"
+	});
+	return /* @__PURE__ */ jsx(DialogContextProvider, {
+		value: context,
+		children
+	});
+}
+function createAlertDialogCore() {
+	return new AlertDialogCore();
+}
+//#endregion
+export { AlertDialogRoot };
+
+//# sourceMappingURL=root.js.map

package/dist/default/ui/alert-dialog/root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.js","names":[],"sources":["../../../../src/ui/alert-dialog/root.tsx"],"sourcesContent":["import { AlertDialogCore, AlertDialogDataAttrs, type AlertDialogProps } from '@videojs/core';\nimport type { ReactNode } from 'react';\n\nimport { DialogContextProvider } from '../dialog/context';\nimport { useDialogRoot } from '../dialog/use-dialog-root';\n\nexport interface AlertDialogRootProps extends AlertDialogProps {\n  /** Called when the open state changes, before animations complete. */\n  onOpenChange?: (open: boolean) => void;\n  /** Called after open or close animations complete. */\n  onOpenChangeComplete?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\n/** Manages alert dialog state and provides it to the shared dialog parts. */\nexport function AlertDialogRoot({ children, ...props }: AlertDialogRootProps): ReactNode {\n  const context = useDialogRoot({\n    ...props,\n    coreFactory: createAlertDialogCore,\n    stateAttrMap: AlertDialogDataAttrs,\n    idPrefix: 'alert-dialog',\n  });\n\n  return <DialogContextProvider value={context}>{children}</DialogContextProvider>;\n}\n\nfunction createAlertDialogCore(): AlertDialogCore {\n  return new AlertDialogCore();\n}\n\nexport namespace AlertDialogRoot {\n  export type Props = AlertDialogRootProps;\n}\n"],"mappings":";;;;;;AAeA,SAAgB,gBAAgB,EAAE,UAAU,GAAG,SAA0C;CACvF,MAAM,UAAU,cAAc;EAC5B,GAAG;EACH,aAAa;EACb,cAAc;EACd,UAAU;CACZ,CAAC;CAED,OAAO,oBAAC,uBAAD;EAAuB,OAAO;EAAU;CAAgC,CAAA;AACjF;AAEA,SAAS,wBAAyC;CAChD,OAAO,IAAI,gBAAgB;AAC7B"}

package/dist/default/ui/audio-track/index.js

@@ -0,0 +1,2 @@
+import { useAudioTrackOptions } from "./use-audio-track-options.js";
+export { useAudioTrackOptions };

package/dist/default/ui/audio-track/use-audio-track-options.js

@@ -0,0 +1,24 @@
+import { createRadioOptionsHook } from "../hooks/create-radio-options-hook.js";
+import { AudioTrackRadioGroupCore } from "@videojs/core";
+import { selectAudioTrack } from "@videojs/core/dom";
+//#region src/ui/audio-track/use-audio-track-options.ts
+const useAudioTrackRadioOptions = createRadioOptionsHook({
+	name: "useAudioTrackOptions",
+	feature: "audioTrack",
+	selector: selectAudioTrack,
+	createCore: () => new AudioTrackRadioGroupCore()
+});
+/**
+* Create audio track menu options from the player audio track state. Returns `null` when the audio track feature is not
+* configured.
+*
+* @param props - Optional `label`, `formatTrack`, and `disabled` overrides.
+*/
+function useAudioTrackOptions(props) {
+	"use no memo";
+	return useAudioTrackRadioOptions(props);
+}
+//#endregion
+export { useAudioTrackOptions };
+
+//# sourceMappingURL=use-audio-track-options.js.map

package/dist/default/ui/audio-track/use-audio-track-options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-audio-track-options.js","names":[],"sources":["../../../../src/ui/audio-track/use-audio-track-options.ts"],"sourcesContent":["import { AudioTrackRadioGroupCore, type AudioTrackRadioGroupOption } from '@videojs/core';\nimport { selectAudioTrack } from '@videojs/core/dom';\n\nimport { createRadioOptionsHook, type TranslatedRadioOption } from '../hooks/create-radio-options-hook';\n\nexport interface AudioTrackOptionsProps extends AudioTrackRadioGroupCore.Props {}\n\nexport type AudioTrackOption = TranslatedRadioOption<AudioTrackRadioGroupOption>;\n\nexport interface AudioTrackOptionsResult {\n  state: AudioTrackRadioGroupCore.State;\n  label: string;\n  value: string;\n  selectedLabel: string;\n  options: AudioTrackOption[];\n  disabled: boolean;\n  hidden: boolean;\n  setValue: (value: string) => void;\n}\n\nconst useAudioTrackRadioOptions = createRadioOptionsHook({\n  name: 'useAudioTrackOptions',\n  feature: 'audioTrack',\n  selector: selectAudioTrack,\n  createCore: () => new AudioTrackRadioGroupCore(),\n});\n\n/**\n * Create audio track menu options from the player audio track state. Returns `null` when the audio track feature is not\n * configured.\n *\n * @param props - Optional `label`, `formatTrack`, and `disabled` overrides.\n */\nexport function useAudioTrackOptions(props?: AudioTrackOptionsProps): AudioTrackOptionsResult | null {\n  'use no memo';\n\n  return useAudioTrackRadioOptions(props);\n}\n\nexport namespace useAudioTrackOptions {\n  export type Props = AudioTrackOptionsProps;\n  export type Result = AudioTrackOptionsResult;\n  export type Option = AudioTrackOption;\n}\n"],"mappings":";;;;AAoBA,MAAM,4BAA4B,uBAAuB;CACvD,MAAM;CACN,SAAS;CACT,UAAU;CACV,kBAAkB,IAAI,yBAAyB;AACjD,CAAC;;;;;;;AAQD,SAAgB,qBAAqB,OAAgE;CACnG;CAEA,OAAO,0BAA0B,KAAK;AACxC"}

package/dist/default/ui/audio-track-radio-group/component.js

@@ -0,0 +1,97 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useMenuOptionState } from "../menu/context.js";
+import { useAudioTrackOptions } from "../audio-track/use-audio-track-options.js";
+import { MenuRadioGroup } from "../menu/radio-group.js";
+import { AudioTrackRadioGroupDataAttrs } from "@videojs/core";
+import { getStateDataAttrs } from "@videojs/core/dom";
+import { Fragment, createContext, forwardRef, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import { isFunction } from "@videojs/utils/predicate";
+//#region src/ui/audio-track-radio-group/component.tsx
+const AudioTrackRadioGroupContext = createContext(void 0);
+/** Owns audio-track option state and shares it with an enclosing menu. Does not render a DOM element. */
+function AudioTrackRadioGroupRoot({ children, ...props }) {
+	const audioTrack = useAudioTrackOptions(props);
+	useMenuOptionState(toMenuOptionState(audioTrack));
+	return /* @__PURE__ */ jsx(AudioTrackRadioGroupContext.Provider, {
+		value: audioTrack,
+		children
+	});
+}
+/** Displays the selected audio-track label. */
+const AudioTrackRadioGroupValue = forwardRef(function AudioTrackRadioGroupValue({ render, className, style, ...elementProps }, forwardedRef) {
+	const audioTrack = useAudioTrackRadioGroupContext();
+	if (!audioTrack) return null;
+	return renderElement("span", {
+		render,
+		className,
+		style
+	}, {
+		state: audioTrack,
+		ref: forwardedRef,
+		props: [elementProps, { children: audioTrack.selectedLabel }]
+	});
+});
+/** Renders menu radio items for the player's available audio tracks. */
+const AudioTrackRadioGroupOptions = forwardRef(function AudioTrackRadioGroupOptions(componentProps, forwardedRef) {
+	const { renderItem, render, className, style, "aria-label": ariaLabelProp, "aria-labelledby": ariaLabelledBy, ...elementProps } = componentProps;
+	const audioTrack = useAudioTrackRadioGroupContext();
+	if (!audioTrack) return null;
+	const { state, value, options, setValue } = audioTrack;
+	const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === void 0 ? audioTrack.label : void 0);
+	return /* @__PURE__ */ jsx(MenuRadioGroup, {
+		...getStateDataAttrs(state, AudioTrackRadioGroupDataAttrs),
+		...elementProps,
+		ref: forwardedRef,
+		className: isFunction(className) ? className(state) : className,
+		style: isFunction(style) ? style(state) : style,
+		render: isFunction(render) ? (props) => render(props, state) : render,
+		value,
+		onValueChange: setValue,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		"aria-disabled": state.disabled || void 0,
+		hidden: state.hidden,
+		children: options.map((option) => {
+			const itemState = {
+				...option,
+				checked: option.value === value
+			};
+			return /* @__PURE__ */ jsx(Fragment, { children: renderItem({
+				value: option.value,
+				disabled: option.disabled,
+				"data-track": option.value,
+				children: option.label
+			}, itemState) }, option.value);
+		})
+	});
+});
+/** @internal Compatibility adapter for the existing preset sources. */
+const AudioTrackRadioGroupLegacy = forwardRef(function AudioTrackRadioGroupLegacy({ label, formatTrack, disabled, ...props }, forwardedRef) {
+	return /* @__PURE__ */ jsx(AudioTrackRadioGroupRoot, {
+		label,
+		formatTrack,
+		disabled,
+		children: /* @__PURE__ */ jsx(AudioTrackRadioGroupOptions, {
+			...props,
+			ref: forwardedRef
+		})
+	});
+});
+function useAudioTrackRadioGroupContext() {
+	const audioTrack = useContext(AudioTrackRadioGroupContext);
+	if (audioTrack === void 0) throw new Error("AudioTrackRadioGroup parts must be used within AudioTrackRadioGroup.Root");
+	return audioTrack;
+}
+function toMenuOptionState(audioTrack) {
+	return {
+		value: audioTrack?.selectedLabel ?? "",
+		disabled: audioTrack?.disabled ?? true,
+		hidden: audioTrack?.hidden ?? true,
+		availability: audioTrack?.state.availability ?? "unsupported"
+	};
+}
+//#endregion
+export { AudioTrackRadioGroupLegacy, AudioTrackRadioGroupOptions, AudioTrackRadioGroupRoot, AudioTrackRadioGroupValue };
+
+//# sourceMappingURL=component.js.map

package/dist/default/ui/audio-track-radio-group/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","names":[],"sources":["../../../../src/ui/audio-track-radio-group/component.tsx"],"sourcesContent":["import { type AudioTrackRadioGroupCore, AudioTrackRadioGroupDataAttrs, type MenuOptionState } from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { ReactElement, ReactNode } from 'react';\nimport { createContext, Fragment, forwardRef, useContext } from 'react';\n\nimport type { HTMLProps, UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport {\n  type AudioTrackOption,\n  type AudioTrackOptionsProps,\n  type AudioTrackOptionsResult,\n  useAudioTrackOptions,\n} from '../audio-track';\nimport { useMenuOptionState } from '../menu/context';\nimport { MenuRadioGroup } from '../menu/radio-group';\nimport type { MenuRadioItemProps } from '../menu/radio-item';\n\nexport type AudioTrackRadioGroupItemState = AudioTrackOption & {\n  /** Whether this option is the currently enabled audio track. */\n  checked: boolean;\n};\n\nexport interface AudioTrackRadioGroupItemProps extends Omit<MenuRadioItemProps, 'ref'> {\n  /** Audio track value represented by the option. */\n  'data-track': string;\n}\n\nexport interface AudioTrackRadioGroupRootProps extends AudioTrackOptionsProps {\n  children?: ReactNode;\n}\n\nexport interface AudioTrackRadioGroupOptionsProps extends Omit<\n  UIComponentProps<'div', AudioTrackRadioGroupCore.State>,\n  'children'\n> {\n  /** Render one consumer-owned menu radio item for every audio track. */\n  renderItem: (props: AudioTrackRadioGroupItemProps, state: AudioTrackRadioGroupItemState) => ReactElement;\n}\n\nexport type AudioTrackRadioGroupValueProps = UIComponentProps<'span', AudioTrackOptionsResult>;\n\nexport interface AudioTrackRadioGroupLegacyProps extends AudioTrackRadioGroupOptionsProps, AudioTrackOptionsProps {}\n\nconst AudioTrackRadioGroupContext = createContext<AudioTrackOptionsResult | null | undefined>(undefined);\n\n/** Owns audio-track option state and shares it with an enclosing menu. Does not render a DOM element. */\nexport function AudioTrackRadioGroupRoot({ children, ...props }: AudioTrackRadioGroupRootProps): ReactNode {\n  const audioTrack = useAudioTrackOptions(props);\n\n  useMenuOptionState(toMenuOptionState(audioTrack));\n\n  return <AudioTrackRadioGroupContext.Provider value={audioTrack}>{children}</AudioTrackRadioGroupContext.Provider>;\n}\n\n/** Displays the selected audio-track label. */\nexport const AudioTrackRadioGroupValue = forwardRef<HTMLSpanElement, AudioTrackRadioGroupValueProps>(\n  function AudioTrackRadioGroupValue({ render, className, style, ...elementProps }, forwardedRef) {\n    const audioTrack = useAudioTrackRadioGroupContext();\n    if (!audioTrack) return null;\n\n    return renderElement(\n      'span',\n      { render, className, style },\n      { state: audioTrack, ref: forwardedRef, props: [elementProps, { children: audioTrack.selectedLabel }] }\n    );\n  }\n);\n\n/** Renders menu radio items for the player's available audio tracks. */\nexport const AudioTrackRadioGroupOptions = forwardRef<HTMLDivElement, AudioTrackRadioGroupOptionsProps>(\n  function AudioTrackRadioGroupOptions(componentProps, forwardedRef) {\n    const {\n      renderItem,\n      render,\n      className,\n      style,\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledBy,\n      ...elementProps\n    } = componentProps;\n    const audioTrack = useAudioTrackRadioGroupContext();\n    if (!audioTrack) return null;\n\n    const { state, value, options, setValue } = audioTrack;\n    const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === undefined ? audioTrack.label : undefined);\n\n    return (\n      <MenuRadioGroup\n        {...getStateDataAttrs(state, AudioTrackRadioGroupDataAttrs)}\n        {...elementProps}\n        ref={forwardedRef}\n        className={isFunction(className) ? className(state) : className}\n        style={isFunction(style) ? style(state) : style}\n        render={isFunction(render) ? (props: HTMLProps) => render(props, state) : render}\n        value={value}\n        onValueChange={setValue}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-disabled={state.disabled || undefined}\n        hidden={state.hidden}\n      >\n        {options.map((option) => {\n          const itemState = { ...option, checked: option.value === value };\n\n          return (\n            <Fragment key={option.value}>\n              {renderItem(\n                {\n                  value: option.value,\n                  disabled: option.disabled,\n                  'data-track': option.value,\n                  children: option.label,\n                },\n                itemState\n              )}\n            </Fragment>\n          );\n        })}\n      </MenuRadioGroup>\n    );\n  }\n);\n\n/** @internal Compatibility adapter for the existing preset sources. */\nexport const AudioTrackRadioGroupLegacy = forwardRef<HTMLDivElement, AudioTrackRadioGroupLegacyProps>(\n  function AudioTrackRadioGroupLegacy({ label, formatTrack, disabled, ...props }, forwardedRef) {\n    return (\n      <AudioTrackRadioGroupRoot label={label} formatTrack={formatTrack} disabled={disabled}>\n        <AudioTrackRadioGroupOptions {...props} ref={forwardedRef} />\n      </AudioTrackRadioGroupRoot>\n    );\n  }\n);\n\nfunction useAudioTrackRadioGroupContext(): AudioTrackOptionsResult | null {\n  const audioTrack = useContext(AudioTrackRadioGroupContext);\n\n  if (audioTrack === undefined) {\n    throw new Error('AudioTrackRadioGroup parts must be used within AudioTrackRadioGroup.Root');\n  }\n\n  return audioTrack;\n}\n\nfunction toMenuOptionState(audioTrack: AudioTrackOptionsResult | null): MenuOptionState {\n  return {\n    value: audioTrack?.selectedLabel ?? '',\n    disabled: audioTrack?.disabled ?? true,\n    hidden: audioTrack?.hidden ?? true,\n    availability: audioTrack?.state.availability ?? 'unsupported',\n  };\n}\n\nexport namespace AudioTrackRadioGroupRoot {\n  export type Props = AudioTrackRadioGroupRootProps;\n}\n\nexport namespace AudioTrackRadioGroupValue {\n  export type Props = AudioTrackRadioGroupValueProps;\n  export type State = AudioTrackOptionsResult;\n}\n\nexport namespace AudioTrackRadioGroupOptions {\n  export type Props = AudioTrackRadioGroupOptionsProps;\n  export type State = AudioTrackRadioGroupCore.State;\n  export type ItemProps = AudioTrackRadioGroupItemProps;\n  export type ItemState = AudioTrackRadioGroupItemState;\n}\n"],"mappings":";;;;;;;;;;AA4CA,MAAM,8BAA8B,cAA0D,KAAA,CAAS;;AAGvG,SAAgB,yBAAyB,EAAE,UAAU,GAAG,SAAmD;CACzG,MAAM,aAAa,qBAAqB,KAAK;CAE7C,mBAAmB,kBAAkB,UAAU,CAAC;CAEhD,OAAO,oBAAC,4BAA4B,UAA7B;EAAsC,OAAO;EAAa;CAA+C,CAAA;AAClH;;AAGA,MAAa,4BAA4B,WACvC,SAAS,0BAA0B,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAAgB,cAAc;CAC9F,MAAM,aAAa,+BAA+B;CAClD,IAAI,CAAC,YAAY,OAAO;CAExB,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EAAE,OAAO;EAAY,KAAK;EAAc,OAAO,CAAC,cAAc,EAAE,UAAU,WAAW,cAAc,CAAC;CAAE,CACxG;AACF,CACF;;AAGA,MAAa,8BAA8B,WACzC,SAAS,4BAA4B,gBAAgB,cAAc;CACjE,MAAM,EACJ,YACA,QACA,WACA,OACA,cAAc,eACd,mBAAmB,gBACnB,GAAG,iBACD;CACJ,MAAM,aAAa,+BAA+B;CAClD,IAAI,CAAC,YAAY,OAAO;CAExB,MAAM,EAAE,OAAO,OAAO,SAAS,aAAa;CAC5C,MAAM,YAAY,kBAAkB,mBAAmB,KAAA,IAAY,WAAW,QAAQ,KAAA;CAEtF,OACE,oBAAC,gBAAD;EACE,GAAI,kBAAkB,OAAO,6BAA6B;EAC1D,GAAI;EACJ,KAAK;EACL,WAAW,WAAW,SAAS,IAAI,UAAU,KAAK,IAAI;EACtD,OAAO,WAAW,KAAK,IAAI,MAAM,KAAK,IAAI;EAC1C,QAAQ,WAAW,MAAM,KAAK,UAAqB,OAAO,OAAO,KAAK,IAAI;EACnE;EACP,eAAe;EACf,cAAY;EACZ,mBAAiB;EACjB,iBAAe,MAAM,YAAY,KAAA;EACjC,QAAQ,MAAM;EAEb,UAAA,QAAQ,KAAK,WAAW;GACvB,MAAM,YAAY;IAAE,GAAG;IAAQ,SAAS,OAAO,UAAU;GAAM;GAE/D,OACE,oBAAC,UAAD,EAAA,UACG,WACC;IACE,OAAO,OAAO;IACd,UAAU,OAAO;IACjB,cAAc,OAAO;IACrB,UAAU,OAAO;GACnB,GACA,SACF,EACQ,GAVK,OAAO,KAUZ;EAEd,CAAC;CACa,CAAA;AAEpB,CACF;;AAGA,MAAa,6BAA6B,WACxC,SAAS,2BAA2B,EAAE,OAAO,aAAa,UAAU,GAAG,SAAS,cAAc;CAC5F,OACE,oBAAC,0BAAD;EAAiC;EAAoB;EAAuB;EAC1E,UAAA,oBAAC,6BAAD;GAA6B,GAAI;GAAO,KAAK;EAAe,CAAA;CACpC,CAAA;AAE9B,CACF;AAEA,SAAS,iCAAiE;CACxE,MAAM,aAAa,WAAW,2BAA2B;CAEzD,IAAI,eAAe,KAAA,GACjB,MAAM,IAAI,MAAM,0EAA0E;CAG5F,OAAO;AACT;AAEA,SAAS,kBAAkB,YAA6D;CACtF,OAAO;EACL,OAAO,YAAY,iBAAiB;EACpC,UAAU,YAAY,YAAY;EAClC,QAAQ,YAAY,UAAU;EAC9B,cAAc,YAAY,MAAM,gBAAgB;CAClD;AACF"}

package/dist/default/ui/audio-track-radio-group/index.js

@@ -0,0 +1,3 @@
+import { AudioTrackRadioGroupLegacy } from "./component.js";
+import { index_parts_exports } from "./index.parts.js";
+export { index_parts_exports as AudioTrackRadioGroup, AudioTrackRadioGroupLegacy };

package/dist/default/ui/audio-track-radio-group/index.parts.js

@@ -0,0 +1,12 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { AudioTrackRadioGroupOptions, AudioTrackRadioGroupRoot, AudioTrackRadioGroupValue } from "./component.js";
+//#region src/ui/audio-track-radio-group/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Options: () => AudioTrackRadioGroupOptions,
+	Root: () => AudioTrackRadioGroupRoot,
+	Value: () => AudioTrackRadioGroupValue
+});
+//#endregion
+export { AudioTrackRadioGroupOptions as Options, AudioTrackRadioGroupRoot as Root, AudioTrackRadioGroupValue as Value, index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

package/dist/default/ui/audio-track-radio-group/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/audio-track-radio-group/index.parts.ts"],"sourcesContent":["export {\n  type AudioTrackRadioGroupItemProps as ItemProps,\n  type AudioTrackRadioGroupItemState as ItemState,\n  AudioTrackRadioGroupOptions as Options,\n  type AudioTrackRadioGroupOptionsProps as OptionsProps,\n  AudioTrackRadioGroupRoot as Root,\n  type AudioTrackRadioGroupRootProps as RootProps,\n  AudioTrackRadioGroupValue as Value,\n  type AudioTrackRadioGroupValueProps as ValueProps,\n} from './component';\n"],"mappings":""}