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

package/dist/dev/presets/video/skin.d.ts

@@ -1,9 +1,7 @@
 import { BaseVideoSkinProps } from "../types.js";
-import { ReactNode } from "react";
-
 //#region src/presets/video/skin.d.ts
-type VideoSkinProps = BaseVideoSkinProps;
-declare function VideoSkin(props: VideoSkinProps): ReactNode;
+interface VideoSkinProps extends BaseVideoSkinProps {}
+declare function VideoSkin(props: VideoSkinProps): import("react").JSX.Element;
 //#endregion
 export { VideoSkin, VideoSkinProps };
 //# sourceMappingURL=skin.d.ts.map

package/dist/dev/presets/video/skin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skin.d.ts","names":[],"sources":["../../../../src/presets/video/skin.tsx"],"mappings":";;;;KAoDY,cAAA,GAAiB,kBAAA;AAAA,iBA+Db,SAAA,CAAU,KAAA,EAAO,cAAA,GAAiB,SAAA"}
+{"version":3,"file":"skin.d.ts","names":[],"sources":["../../../../src/presets/video/skin.tsx"],"mappings":";;UAKiB,uBAAuB;iBAExB,UAAU,OAAO,iCAAc,IAAA"}

package/dist/dev/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/dev/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/dev/ui/airplay-button/airplay-button.d.ts

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { AirPlayButtonCore } from "@videojs/core";
+//#region src/ui/airplay-button/airplay-button.d.ts
+interface AirPlayButtonProps extends UIComponentProps<'button', AirPlayButtonCore.State>, AirPlayButtonCore.Props {}
+/** A button that toggles AirPlay to a remote device. */
+declare const AirPlayButton: import("react").ForwardRefExoticComponent<AirPlayButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare namespace AirPlayButton {
+  type Props = AirPlayButtonProps;
+  type State = AirPlayButtonCore.State;
+}
+//#endregion
+export { AirPlayButton, AirPlayButtonProps };
+//# sourceMappingURL=airplay-button.d.ts.map

package/dist/dev/ui/airplay-button/airplay-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"airplay-button.d.ts","names":[],"sources":["../../../../src/ui/airplay-button/airplay-button.tsx"],"mappings":";;;UAMiB,2BACP,2BAA2B,kBAAkB,QAAQ,kBAAkB;;cAGpE,+BAAa,0BAAA,qCAAA,cAAA;kBAST;OACH,QAAQ;OACR,QAAQ,kBAAkB"}

package/dist/dev/ui/airplay-button/airplay-button.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/airplay-button.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=airplay-button.js.map

package/dist/dev/ui/airplay-button/airplay-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"airplay-button.js","names":[],"sources":["../../../../src/ui/airplay-button/airplay-button.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/dev/ui/airplay-button/index.d.ts

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

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

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

package/dist/dev/ui/alert-dialog/alert-dialog-root.d.ts

@@ -1,21 +1,15 @@
-import { ReactNode } from "react";
 import { AlertDialogProps } from "@videojs/core";
-
+import { ReactNode } from "react";
 //#region src/ui/alert-dialog/alert-dialog-root.d.ts
 interface AlertDialogRootProps extends AlertDialogProps {
-  /** Called when the open state changes (fires immediately, before animations). */
+  /** Called when the open state changes, before animations complete. */
   onOpenChange?: (open: boolean) => void;
-  /** Called after open/close animations complete. */
+  /** Called after open or close animations complete. */
   onOpenChangeComplete?: (open: boolean) => void;
   children?: ReactNode;
 }
-declare function AlertDialogRoot({
-  open: controlledOpen,
-  defaultOpen,
-  onOpenChange: onOpenChangeProp,
-  onOpenChangeComplete: onOpenChangeCompleteProp,
-  children
-}: AlertDialogRootProps): ReactNode;
+/** Manages alert dialog state and provides it to the shared dialog parts. */
+declare function AlertDialogRoot({ children, ...props }: AlertDialogRootProps): ReactNode;
 declare namespace AlertDialogRoot {
   type Props = AlertDialogRootProps;
 }

package/dist/dev/ui/alert-dialog/alert-dialog-root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog-root.d.ts","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-root.tsx"],"mappings":";;;;UAaiB,oBAAA,SAA6B,gBAAA;;EAE5C,YAAA,IAAgB,IAAA;EAFoB;EAIpC,oBAAA,IAAwB,IAAA;EACxB,QAAA,GAAW,SAAA;AAAA;AAAA,iBAGG,eAAA,CAAA;EACd,IAAA,EAAM,cAAA;EACN,WAAA;EACA,YAAA,EAAc,gBAAA;EACd,oBAAA,EAAsB,wBAAA;EACtB;AAAA,GACC,oBAAA,GAAuB,SAAA;AAAA,kBA2DT,eAAA;EAAA,KACH,KAAA,GAAQ,oBAAA;AAAA"}
+{"version":3,"file":"alert-dialog-root.d.ts","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-root.tsx"],"mappings":";;;UAMiB,6BAA6B;;EAE5C,gBAAgB;;EAEhB,wBAAwB;EACxB,WAAW;;;iBAIG,kBAAkB,aAAa,SAAS,uBAAuB;kBAe9D;OACH,QAAQ"}

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

@@ -1,59 +1,25 @@
-'use client';
-
-import { useDestroy } from "../../utils/use-destroy.js";
-import { AlertDialogContextProvider } from "./context.js";
-import { useLatestRef } from "../../utils/use-latest-ref.js";
-import { useSafeId } from "../../utils/use-safe-id.js";
-import { createAlertDialog, createTransition } from "@videojs/core/dom";
-import { useSnapshot } from "@videojs/store/react";
-import { useEffect, useState } from "react";
-import { jsx } from "react/jsx-runtime";
+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/alert-dialog-root.tsx
-function AlertDialogRoot({ open: controlledOpen, defaultOpen = AlertDialogCore.defaultProps.defaultOpen, onOpenChange: onOpenChangeProp, onOpenChangeComplete: onOpenChangeCompleteProp, children }) {
-	const [core] = useState(() => new AlertDialogCore());
-	const isControlled = controlledOpen !== void 0;
-	const onOpenChangeRef = useLatestRef(onOpenChangeProp);
-	const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);
-	const [dialog] = useState(() => {
-		const instance = createAlertDialog({
-			transition: createTransition(),
-			onOpenChange: (nextOpen) => {
-				onOpenChangeRef.current?.(nextOpen);
-			},
-			onOpenChangeComplete: (nextOpen) => {
-				onOpenChangeCompleteRef.current?.(nextOpen);
-			}
-		});
-		if (!isControlled && defaultOpen) instance.open();
-		return instance;
+/** 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"
 	});
-	const titleId = useSafeId("alert-dialog-title-");
-	const descriptionId = useSafeId("alert-dialog-desc-");
-	core.setTitleId(titleId);
-	core.setDescriptionId(descriptionId);
-	useEffect(() => {
-		if (controlledOpen === void 0) return;
-		const { active: inputOpen } = dialog.input.current;
-		if (controlledOpen === inputOpen) return;
-		if (controlledOpen) dialog.open();
-		else dialog.close();
-	}, [controlledOpen, dialog]);
-	useDestroy(dialog);
-	const input = useSnapshot(dialog.input);
-	core.setInput(input);
-	return /* @__PURE__ */ jsx(AlertDialogContextProvider, {
-		value: {
-			core,
-			dialog,
-			state: core.getState(),
-			stateAttrMap: AlertDialogDataAttrs
-		},
+	return /* @__PURE__ */ jsx(DialogContextProvider, {
+		value: context,
 		children
 	});
 }
-
+function createAlertDialogCore() {
+	return new AlertDialogCore();
+}
 //#endregion
 export { AlertDialogRoot };
+
 //# sourceMappingURL=alert-dialog-root.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog-root.js","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-root.tsx"],"sourcesContent":["'use client';\n\nimport { AlertDialogCore, AlertDialogDataAttrs, type AlertDialogProps } from '@videojs/core';\nimport { createAlertDialog, createTransition } from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport type { ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { AlertDialogContextProvider } from './context';\n\nexport interface AlertDialogRootProps extends AlertDialogProps {\n  /** Called when the open state changes (fires immediately, before animations). */\n  onOpenChange?: (open: boolean) => void;\n  /** Called after open/close animations complete. */\n  onOpenChangeComplete?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\nexport function AlertDialogRoot({\n  open: controlledOpen,\n  defaultOpen = AlertDialogCore.defaultProps.defaultOpen,\n  onOpenChange: onOpenChangeProp,\n  onOpenChangeComplete: onOpenChangeCompleteProp,\n  children,\n}: AlertDialogRootProps): ReactNode {\n  const [core] = useState(() => new AlertDialogCore());\n\n  const isControlled = controlledOpen !== undefined;\n\n  const onOpenChangeRef = useLatestRef(onOpenChangeProp);\n  const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);\n\n  const [dialog] = useState(() => {\n    const instance = createAlertDialog({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean) => {\n        onOpenChangeRef.current?.(nextOpen);\n      },\n      onOpenChangeComplete: (nextOpen: boolean) => {\n        onOpenChangeCompleteRef.current?.(nextOpen);\n      },\n    });\n\n    if (!isControlled && defaultOpen) {\n      instance.open();\n    }\n\n    return instance;\n  });\n\n  const titleId = useSafeId('alert-dialog-title-');\n  const descriptionId = useSafeId('alert-dialog-desc-');\n\n  core.setTitleId(titleId);\n  core.setDescriptionId(descriptionId);\n\n  // Sync controlled open prop -> internal input state.\n  useEffect(() => {\n    if (controlledOpen === undefined) return;\n\n    const { active: inputOpen } = dialog.input.current;\n    if (controlledOpen === inputOpen) return;\n\n    if (controlledOpen) {\n      dialog.open();\n    } else {\n      dialog.close();\n    }\n  }, [controlledOpen, dialog]);\n\n  useDestroy(dialog);\n\n  const input = useSnapshot(dialog.input);\n  core.setInput(input);\n  const state = core.getState();\n\n  return (\n    <AlertDialogContextProvider value={{ core, dialog, state, stateAttrMap: AlertDialogDataAttrs }}>\n      {children}\n    </AlertDialogContextProvider>\n  );\n}\n\nexport namespace AlertDialogRoot {\n  export type Props = AlertDialogRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;AAqBA,SAAgB,gBAAgB,EAC9B,MAAM,gBACN,cAAc,gBAAgB,aAAa,aAC3C,cAAc,kBACd,sBAAsB,0BACtB,YACkC;CAClC,MAAM,CAAC,QAAQ,eAAe,IAAI,iBAAiB,CAAC;CAEpD,MAAM,eAAe,mBAAmB;CAExC,MAAM,kBAAkB,aAAa,iBAAiB;CACtD,MAAM,0BAA0B,aAAa,yBAAyB;CAEtE,MAAM,CAAC,UAAU,eAAe;EAC9B,MAAM,WAAW,kBAAkB;GACjC,YAAY,kBAAkB;GAC9B,eAAe,aAAsB;AACnC,oBAAgB,UAAU,SAAS;;GAErC,uBAAuB,aAAsB;AAC3C,4BAAwB,UAAU,SAAS;;GAE9C,CAAC;AAEF,MAAI,CAAC,gBAAgB,YACnB,UAAS,MAAM;AAGjB,SAAO;GACP;CAEF,MAAM,UAAU,UAAU,sBAAsB;CAChD,MAAM,gBAAgB,UAAU,qBAAqB;AAErD,MAAK,WAAW,QAAQ;AACxB,MAAK,iBAAiB,cAAc;AAGpC,iBAAgB;AACd,MAAI,mBAAmB,OAAW;EAElC,MAAM,EAAE,QAAQ,cAAc,OAAO,MAAM;AAC3C,MAAI,mBAAmB,UAAW;AAElC,MAAI,eACF,QAAO,MAAM;MAEb,QAAO,OAAO;IAEf,CAAC,gBAAgB,OAAO,CAAC;AAE5B,YAAW,OAAO;CAElB,MAAM,QAAQ,YAAY,OAAO,MAAM;AACvC,MAAK,SAAS,MAAM;AAGpB,QACE,oBAAC;EAA2B,OAAO;GAAE;GAAM;GAAQ,OAHvC,KAAK,UAAU;GAG+B,cAAc;GAAsB;EAC3F;GAC0B"}
+{"version":3,"file":"alert-dialog-root.js","names":[],"sources":["../../../../src/ui/alert-dialog/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/dev/ui/alert-dialog/index.d.ts

@@ -1,3 +1,2 @@
-import { AlertDialogContextValue, useAlertDialogContext } from "./context.js";
 import { index_parts_d_exports } from "./index.parts.js";
-export { index_parts_d_exports as AlertDialog, type AlertDialogContextValue, useAlertDialogContext };
+export { index_parts_d_exports as AlertDialog };

package/dist/dev/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/dev/ui/alert-dialog/index.parts.d.ts

@@ -1,13 +1,13 @@
-import { AlertDialogClose, AlertDialogCloseProps } from "./alert-dialog-close.js";
-import { AlertDialogDescription, AlertDialogDescriptionProps } from "./alert-dialog-description.js";
-import { AlertDialogPopup, AlertDialogPopupProps } from "./alert-dialog-popup.js";
+import { DialogBackdrop, DialogBackdropProps } from "../dialog/dialog-backdrop.js";
+import { DialogClose, DialogCloseProps } from "../dialog/dialog-close.js";
+import { DialogDescription, DialogDescriptionProps } from "../dialog/dialog-description.js";
+import { DialogPopup, DialogPopupProps } from "../dialog/dialog-popup.js";
+import { DialogTitle, DialogTitleProps } from "../dialog/dialog-title.js";
+import "../dialog/index.parts.js";
 import { AlertDialogRoot, AlertDialogRootProps } from "./alert-dialog-root.js";
-import { AlertDialogTitle, AlertDialogTitleProps } from "./alert-dialog-title.js";
-
-//#region src/ui/alert-dialog/index.parts.d.ts
 declare namespace index_parts_d_exports {
-  export { AlertDialogClose as Close, AlertDialogCloseProps as CloseProps, AlertDialogDescription as Description, AlertDialogDescriptionProps as DescriptionProps, AlertDialogPopup as Popup, AlertDialogPopupProps as PopupProps, AlertDialogRoot as Root, AlertDialogRootProps as RootProps, AlertDialogTitle as Title, AlertDialogTitleProps as TitleProps };
+  export { DialogBackdrop as Backdrop, DialogBackdropProps as BackdropProps, DialogClose as Close, DialogCloseProps as CloseProps, DialogDescription as Description, DialogDescriptionProps as DescriptionProps, DialogPopup as Popup, DialogPopupProps as PopupProps, AlertDialogRoot as Root, AlertDialogRootProps as RootProps, DialogTitle as Title, DialogTitleProps as TitleProps };
 }
 //#endregion
-export { index_parts_d_exports };
+export { DialogBackdrop as Backdrop, type DialogBackdropProps as BackdropProps, DialogClose as Close, type DialogCloseProps as CloseProps, DialogDescription as Description, type DialogDescriptionProps as DescriptionProps, DialogPopup as Popup, type DialogPopupProps as PopupProps, AlertDialogRoot as Root, type AlertDialogRootProps as RootProps, DialogTitle as Title, type DialogTitleProps as TitleProps, index_parts_d_exports };
 //# sourceMappingURL=index.parts.d.ts.map

package/dist/dev/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 { DialogBackdrop } from "../dialog/dialog-backdrop.js";
+import { DialogClose } from "../dialog/dialog-close.js";
+import { DialogDescription } from "../dialog/dialog-description.js";
+import { DialogPopup } from "../dialog/dialog-popup.js";
+import { DialogTitle } from "../dialog/dialog-title.js";
 import { AlertDialogRoot } from "./alert-dialog-root.js";
-import { AlertDialogTitle } from "./alert-dialog-title.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/dev/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 './alert-dialog-root';\n"],"mappings":""}

package/dist/dev/ui/audio-track/index.d.ts

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

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

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