@videojs/react 10.0.0-beta.24 → 10.0.0-beta.26

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,KAAA;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,qBAAqB;CAC/C,MAAM,gBAAgB,UAAU,oBAAoB;AAEpD,MAAK,WAAW,QAAQ;AACxB,MAAK,iBAAiB,cAAc;AAGpC,iBAAgB;AACd,MAAI,mBAAmB,KAAA,EAAW;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,4BAAD;EAA4B,OAAO;GAAE;GAAM;GAAQ,OAHvC,KAAK,UAAU;GAG+B,cAAc;GAAsB;EAC3F;EAC0B,CAAA"}
+{"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,gBAAgB,CAAC;CAEnD,MAAM,eAAe,mBAAmB,KAAA;CAExC,MAAM,kBAAkB,aAAa,gBAAgB;CACrD,MAAM,0BAA0B,aAAa,wBAAwB;CAErE,MAAM,CAAC,UAAU,eAAe;EAC9B,MAAM,WAAW,kBAAkB;GACjC,YAAY,iBAAiB;GAC7B,eAAe,aAAsB;IACnC,gBAAgB,UAAU,QAAQ;GACpC;GACA,uBAAuB,aAAsB;IAC3C,wBAAwB,UAAU,QAAQ;GAC5C;EACF,CAAC;EAED,IAAI,CAAC,gBAAgB,aACnB,SAAS,KAAK;EAGhB,OAAO;CACT,CAAC;CAED,MAAM,UAAU,UAAU,oBAAoB;CAC9C,MAAM,gBAAgB,UAAU,mBAAmB;CAEnD,KAAK,WAAW,OAAO;CACvB,KAAK,iBAAiB,aAAa;CAGnC,gBAAgB;EACd,IAAI,mBAAmB,KAAA,GAAW;EAElC,MAAM,EAAE,QAAQ,cAAc,OAAO,MAAM;EAC3C,IAAI,mBAAmB,WAAW;EAElC,IAAI,gBACF,OAAO,KAAK;OAEZ,OAAO,MAAM;CAEjB,GAAG,CAAC,gBAAgB,MAAM,CAAC;CAE3B,WAAW,MAAM;CAEjB,MAAM,QAAQ,YAAY,OAAO,KAAK;CACtC,KAAK,SAAS,KAAK;CAGnB,OACE,oBAAC,4BAAD;EAA4B,OAAO;GAAE;GAAM;GAAQ,OAHvC,KAAK,SAGsC;GAAG,cAAc;EAAqB;EAC1F;CACyB,CAAA;AAEhC"}

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

@@ -1,10 +1,8 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as _$react from "react";
 import { AlertDialogCore } from "@videojs/core";
-
 //#region src/ui/alert-dialog/alert-dialog-title.d.ts
 interface AlertDialogTitleProps extends UIComponentProps<'h2', AlertDialogCore.State> {}
-declare const AlertDialogTitle: _$react.ForwardRefExoticComponent<AlertDialogTitleProps>;
+declare const AlertDialogTitle: import("react").ForwardRefExoticComponent<AlertDialogTitleProps>;
 declare namespace AlertDialogTitle {
   type Props = AlertDialogTitleProps;
   type State = AlertDialogCore.State;

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

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog-title.d.ts","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-title.tsx"],"mappings":";;;;;UAQiB,qBAAA,SAA8B,gBAAA,OAAuB,eAAA,CAAgB,KAAA;AAAA,cAEzE,gBAAA,EAAgB,OAAA,CAAA,yBAAA,CAAA,qBAAA;AAAA,kBAOZ,gBAAA;EAAA,KACH,KAAA,GAAQ,qBAAA;EAAA,KACR,KAAA,GAAQ,eAAA,CAAgB,KAAA;AAAA"}
+{"version":3,"file":"alert-dialog-title.d.ts","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-title.tsx"],"mappings":";;;UAQiB,8BAA8B,uBAAuB,gBAAgB;cAEzE,kCAAgB,0BAAA;kBAOZ;OACH,QAAQ;OACR,QAAQ,gBAAgB"}

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

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog-title.js","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-title.tsx"],"sourcesContent":["'use client';\n\nimport type { AlertDialogCore } from '@videojs/core';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createContextPart } from '../create-context-part';\nimport { useAlertDialogContext } from './context';\n\nexport interface AlertDialogTitleProps extends UIComponentProps<'h2', AlertDialogCore.State> {}\n\nexport const AlertDialogTitle = createContextPart<AlertDialogTitleProps, AlertDialogCore.State>({\n  displayName: 'AlertDialogTitle',\n  tag: 'h2',\n  useContext: useAlertDialogContext,\n  getProps: (state) => ({ id: state.titleId }),\n});\n\nexport namespace AlertDialogTitle {\n  export type Props = AlertDialogTitleProps;\n  export type State = AlertDialogCore.State;\n}\n"],"mappings":";;;;AAUA,MAAa,mBAAmB,kBAAgE;CAC9F,aAAa;CACb,KAAK;CACL,YAAY;CACZ,WAAW,WAAW,EAAE,IAAI,MAAM,SAAS;CAC5C,CAAC"}
+{"version":3,"file":"alert-dialog-title.js","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-title.tsx"],"sourcesContent":["'use client';\n\nimport type { AlertDialogCore } from '@videojs/core';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createContextPart } from '../create-context-part';\nimport { useAlertDialogContext } from './context';\n\nexport interface AlertDialogTitleProps extends UIComponentProps<'h2', AlertDialogCore.State> {}\n\nexport const AlertDialogTitle = createContextPart<AlertDialogTitleProps, AlertDialogCore.State>({\n  displayName: 'AlertDialogTitle',\n  tag: 'h2',\n  useContext: useAlertDialogContext,\n  getProps: (state) => ({ id: state.titleId }),\n});\n\nexport namespace AlertDialogTitle {\n  export type Props = AlertDialogTitleProps;\n  export type State = AlertDialogCore.State;\n}\n"],"mappings":";;;;AAUA,MAAa,mBAAmB,kBAAgE;CAC9F,aAAa;CACb,KAAK;CACL,YAAY;CACZ,WAAW,WAAW,EAAE,IAAI,MAAM,QAAQ;AAC5C,CAAC"}

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

@@ -1,6 +1,5 @@
 import { AlertDialogApi } from "@videojs/core/dom";
 import { AlertDialogCore, StateAttrMap as StateAttrMap$1 } from "@videojs/core";
-
 //#region src/ui/alert-dialog/context.d.ts
 interface AlertDialogContextValue {
   core: AlertDialogCore;

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

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","names":[],"sources":["../../../../src/ui/alert-dialog/context.tsx"],"mappings":";;;;UAMiB,uBAAA;EACf,IAAA,EAAM,eAAA;EACN,MAAA,EAAQ,cAAA;EACR,KAAA,EAAO,eAAA,CAAgB,KAAA;EACvB,YAAA,EAAc,cAAA,CAAa,eAAA,CAAgB,KAAA;AAAA;AAAA,iBAO7B,qBAAA,CAAA,GAAyB,uBAAA"}
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../../../src/ui/alert-dialog/context.tsx"],"mappings":";;;UAMiB;EACf,MAAM;EACN,QAAQ;EACR,OAAO,gBAAgB;EACvB,cAAc,eAAa,gBAAgB;;iBAO7B,yBAAyB"}

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/alert-dialog/context.tsx"],"sourcesContent":["'use client';\n\nimport type { AlertDialogCore, StateAttrMap } from '@videojs/core';\nimport type { AlertDialogApi } from '@videojs/core/dom';\nimport { createContext, useContext } from 'react';\n\nexport interface AlertDialogContextValue {\n  core: AlertDialogCore;\n  dialog: AlertDialogApi;\n  state: AlertDialogCore.State;\n  stateAttrMap: StateAttrMap<AlertDialogCore.State>;\n}\n\nconst AlertDialogContext = createContext<AlertDialogContextValue | null>(null);\n\nexport const AlertDialogContextProvider = AlertDialogContext.Provider;\n\nexport function useAlertDialogContext(): AlertDialogContextValue {\n  const ctx = useContext(AlertDialogContext);\n  if (!ctx) throw new Error('AlertDialog compound components must be used within an AlertDialog.Root');\n  return ctx;\n}\n"],"mappings":";;;AAaA,MAAM,qBAAqB,cAA8C,KAAK;AAE9E,MAAa,6BAA6B,mBAAmB;AAE7D,SAAgB,wBAAiD;CAC/D,MAAM,MAAM,WAAW,mBAAmB;AAC1C,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,0EAA0E;AACpG,QAAO"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/alert-dialog/context.tsx"],"sourcesContent":["'use client';\n\nimport type { AlertDialogCore, StateAttrMap } from '@videojs/core';\nimport type { AlertDialogApi } from '@videojs/core/dom';\nimport { createContext, useContext } from 'react';\n\nexport interface AlertDialogContextValue {\n  core: AlertDialogCore;\n  dialog: AlertDialogApi;\n  state: AlertDialogCore.State;\n  stateAttrMap: StateAttrMap<AlertDialogCore.State>;\n}\n\nconst AlertDialogContext = createContext<AlertDialogContextValue | null>(null);\n\nexport const AlertDialogContextProvider = AlertDialogContext.Provider;\n\nexport function useAlertDialogContext(): AlertDialogContextValue {\n  const ctx = useContext(AlertDialogContext);\n  if (!ctx) throw new Error('AlertDialog compound components must be used within an AlertDialog.Root');\n  return ctx;\n}\n"],"mappings":";;;AAaA,MAAM,qBAAqB,cAA8C,IAAI;AAE7E,MAAa,6BAA6B,mBAAmB;AAE7D,SAAgB,wBAAiD;CAC/D,MAAM,MAAM,WAAW,kBAAkB;CACzC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,yEAAyE;CACnG,OAAO;AACT"}

package/dist/dev/ui/alert-dialog/index.parts.d.ts

@@ -3,11 +3,9 @@ import { AlertDialogDescription, AlertDialogDescriptionProps } from "./alert-dia
 import { AlertDialogPopup, AlertDialogPopupProps } from "./alert-dialog-popup.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 };
 }
 //#endregion
-export { index_parts_d_exports };
+export { AlertDialogClose as Close, type AlertDialogCloseProps as CloseProps, AlertDialogDescription as Description, type AlertDialogDescriptionProps as DescriptionProps, AlertDialogPopup as Popup, type AlertDialogPopupProps as PopupProps, AlertDialogRoot as Root, type AlertDialogRootProps as RootProps, AlertDialogTitle as Title, type AlertDialogTitleProps as TitleProps, index_parts_d_exports };
 //# sourceMappingURL=index.parts.d.ts.map

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

@@ -13,6 +13,6 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Title: () => AlertDialogTitle
 });
 //#endregion
-export { index_parts_exports };
+export { AlertDialogClose as Close, AlertDialogDescription as Description, AlertDialogPopup as Popup, AlertDialogRoot as Root, AlertDialogTitle as Title, index_parts_exports };
 
 //# sourceMappingURL=index.parts.js.map

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 };

package/dist/dev/ui/audio-track/use-audio-track-options.d.ts

@@ -0,0 +1,30 @@
+import { AudioTrackRadioGroupCore } from "@videojs/core";
+//#region src/ui/audio-track/use-audio-track-options.d.ts
+interface AudioTrackOptionsProps extends AudioTrackRadioGroupCore.Props {}
+interface AudioTrackOption {
+  value: string;
+  label: string;
+  disabled: boolean;
+}
+interface AudioTrackOptionsResult {
+  state: AudioTrackRadioGroupCore.State;
+  value: string;
+  options: AudioTrackOption[];
+  disabled: boolean;
+  setValue: (value: string) => void;
+}
+/**
+ * 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.
+ */
+declare function useAudioTrackOptions(props?: AudioTrackOptionsProps): AudioTrackOptionsResult | null;
+declare namespace useAudioTrackOptions {
+  type Props = AudioTrackOptionsProps;
+  type Result = AudioTrackOptionsResult;
+  type Option = AudioTrackOption;
+}
+//#endregion
+export { AudioTrackOption, AudioTrackOptionsProps, AudioTrackOptionsResult, useAudioTrackOptions };
+//# sourceMappingURL=use-audio-track-options.d.ts.map

package/dist/dev/ui/audio-track/use-audio-track-options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-audio-track-options.d.ts","names":[],"sources":["../../../../src/ui/audio-track/use-audio-track-options.ts"],"mappings":";;UAUiB,+BAA+B,yBAAyB;UAExD;EACf;EACA;EACA;;UAGe;EACf,OAAO,yBAAyB;EAChC;EACA,SAAS;EACT;EACA,WAAW;;;;;;;;iBASG,qBAAqB,QAAQ,yBAAyB;kBAgCrD;OACH,QAAQ;OACR,SAAS;OACT,SAAS"}

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

@@ -0,0 +1,43 @@
+"use client";
+import { useTranslator } from "../../i18n/context.js";
+import { usePlayer } from "../../player/context.js";
+import { logMissingFeature, selectAudioTrack } from "@videojs/core/dom";
+import { translateText } from "@videojs/core/i18n";
+import { useCallback, useState } from "react";
+import { AudioTrackRadioGroupCore } from "@videojs/core";
+//#region src/ui/audio-track/use-audio-track-options.ts
+/**
+* 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";
+	const media = usePlayer(selectAudioTrack);
+	const t = useTranslator();
+	const [core] = useState(() => new AudioTrackRadioGroupCore());
+	core.setProps(props ?? {});
+	const setValue = useCallback((value) => core.selectValue(media, value), [core, media]);
+	if (!media) {
+		logMissingFeature("useAudioTrackOptions", selectAudioTrack.displayName ?? "audioTrack");
+		return null;
+	}
+	core.setMedia(media);
+	const state = core.getState();
+	return {
+		state,
+		value: state.value,
+		options: state.tracks.map((track) => ({
+			value: track.value,
+			label: translateText(track.label, t),
+			disabled: state.disabled
+		})),
+		disabled: state.disabled,
+		setValue
+	};
+}
+//#endregion
+export { useAudioTrackOptions };
+
+//# sourceMappingURL=use-audio-track-options.js.map

package/dist/dev/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":["'use client';\n\nimport { AudioTrackRadioGroupCore } from '@videojs/core';\nimport { logMissingFeature, selectAudioTrack } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport { useCallback, useState } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport { usePlayer } from '../../player/context';\n\nexport interface AudioTrackOptionsProps extends AudioTrackRadioGroupCore.Props {}\n\nexport interface AudioTrackOption {\n  value: string;\n  label: string;\n  disabled: boolean;\n}\n\nexport interface AudioTrackOptionsResult {\n  state: AudioTrackRadioGroupCore.State;\n  value: string;\n  options: AudioTrackOption[];\n  disabled: boolean;\n  setValue: (value: string) => void;\n}\n\n/**\n * Create audio track menu options from the player audio track state. Returns\n * `null` when the audio track feature is not 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  const media = usePlayer(selectAudioTrack);\n  const t = useTranslator();\n  const [core] = useState(() => new AudioTrackRadioGroupCore());\n\n  core.setProps(props ?? {});\n\n  const setValue = useCallback((value: string) => core.selectValue(media!, value), [core, media]);\n\n  if (!media) {\n    if (__DEV__) logMissingFeature('useAudioTrackOptions', selectAudioTrack.displayName ?? 'audioTrack');\n    return null;\n  }\n\n  core.setMedia(media);\n  const state = core.getState();\n\n  return {\n    state,\n    value: state.value,\n    options: state.tracks.map((track) => ({\n      value: track.value,\n      label: translateText(track.label, t),\n      disabled: state.disabled,\n    })),\n    disabled: state.disabled,\n    setValue,\n  };\n}\n\nexport namespace useAudioTrackOptions {\n  export type Props = AudioTrackOptionsProps;\n  export type Result = AudioTrackOptionsResult;\n  export type Option = AudioTrackOption;\n}\n"],"mappings":";;;;;;;;;;;;;;AAgCA,SAAgB,qBAAqB,OAAgE;CACnG;CAEA,MAAM,QAAQ,UAAU,gBAAgB;CACxC,MAAM,IAAI,cAAc;CACxB,MAAM,CAAC,QAAQ,eAAe,IAAI,yBAAyB,CAAC;CAE5D,KAAK,SAAS,SAAS,CAAC,CAAC;CAEzB,MAAM,WAAW,aAAa,UAAkB,KAAK,YAAY,OAAQ,KAAK,GAAG,CAAC,MAAM,KAAK,CAAC;CAE9F,IAAI,CAAC,OAAO;EACG,kBAAkB,wBAAwB,iBAAiB,eAAe,YAAY;EACnG,OAAO;CACT;CAEA,KAAK,SAAS,KAAK;CACnB,MAAM,QAAQ,KAAK,SAAS;CAE5B,OAAO;EACL;EACA,OAAO,MAAM;EACb,SAAS,MAAM,OAAO,KAAK,WAAW;GACpC,OAAO,MAAM;GACb,OAAO,cAAc,MAAM,OAAO,CAAC;GACnC,UAAU,MAAM;EAClB,EAAE;EACF,UAAU,MAAM;EAChB;CACF;AACF"}

package/dist/dev/ui/buffering-indicator/buffering-indicator.d.ts

@@ -1,7 +1,5 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as _$react from "react";
 import { BufferingIndicatorCore } from "@videojs/core";
-
 //#region src/ui/buffering-indicator/buffering-indicator.d.ts
 interface BufferingIndicatorProps extends UIComponentProps<'div', BufferingIndicatorCore.State>, BufferingIndicatorCore.Props {}
 /**
@@ -22,7 +20,7 @@ interface BufferingIndicatorProps extends UIComponentProps<'div', BufferingIndic
  * />
  * ```
  */
-declare const BufferingIndicator: _$react.ForwardRefExoticComponent<Omit<BufferingIndicatorProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+declare const BufferingIndicator: import("react").ForwardRefExoticComponent<Omit<BufferingIndicatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare namespace BufferingIndicator {
   type Props = BufferingIndicatorProps;
   type State = BufferingIndicatorCore.State;

package/dist/dev/ui/buffering-indicator/buffering-indicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buffering-indicator.d.ts","names":[],"sources":["../../../../src/ui/buffering-indicator/buffering-indicator.tsx"],"mappings":";;;;;UAYiB,uBAAA,SACP,gBAAA,QAAwB,sBAAA,CAAuB,KAAA,GACrD,sBAAA,CAAuB,KAAA;;AAF3B;;;;;;;;;;;;;;;AAsBA;;cAAa,kBAAA,EAAkB,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,uBAAA,WAAA,OAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAqCd,kBAAA;EAAA,KACH,KAAA,GAAQ,uBAAA;EAAA,KACR,KAAA,GAAQ,sBAAA,CAAuB,KAAA;AAAA"}
+{"version":3,"file":"buffering-indicator.d.ts","names":[],"sources":["../../../../src/ui/buffering-indicator/buffering-indicator.tsx"],"mappings":";;;UAYiB,gCACP,wBAAwB,uBAAuB,QACrD,uBAAuB;;;;;;;;;;;;;;;;;;;cAoBd,oCAAkB,0BAAA,KAAA,kDAAA,cAAA;kBAqCd;OACH,QAAQ;OACR,QAAQ,uBAAuB"}

package/dist/dev/ui/buffering-indicator/buffering-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"buffering-indicator.js","names":[],"sources":["../../../../src/ui/buffering-indicator/buffering-indicator.tsx"],"sourcesContent":["'use client';\n\nimport { BufferingIndicatorCore, BufferingIndicatorDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectPlayback } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState, useSyncExternalStore } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface BufferingIndicatorProps\n  extends UIComponentProps<'div', BufferingIndicatorCore.State>,\n    BufferingIndicatorCore.Props {}\n\n/**\n * Displays a buffering indicator when media is waiting for data.\n *\n * Visibility is delayed (default 500ms) to avoid flashing on quick buffers.\n *\n * @example\n * ```tsx\n * <BufferingIndicator />\n *\n * <BufferingIndicator delay={1000} />\n *\n * <BufferingIndicator\n *   render={(props, state) => (\n *     <div {...props}>{state.visible && <Spinner />}</div>\n *   )}\n * />\n * ```\n */\nexport const BufferingIndicator = forwardRef(function BufferingIndicator(\n  componentProps: BufferingIndicatorProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, delay, ...elementProps } = componentProps;\n\n  const playback = usePlayer(selectPlayback);\n\n  const [core] = useState(() => new BufferingIndicatorCore());\n  useDestroy(core);\n  core.setProps({ delay });\n\n  if (playback) core.update(playback);\n\n  const state = useSyncExternalStore(\n    (cb) => core.state.subscribe(cb),\n    () => core.state.current,\n    () => core.state.current\n  );\n\n  if (!playback) {\n    if (__DEV__) logMissingFeature('BufferingIndicator', 'playback');\n    return null;\n  }\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: BufferingIndicatorDataAttrs,\n      ref: [forwardedRef],\n      props: [elementProps],\n    }\n  );\n});\n\nexport namespace BufferingIndicator {\n  export type Props = BufferingIndicatorProps;\n  export type State = BufferingIndicatorCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,MAAa,qBAAqB,WAAW,SAAS,mBACpD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,GAAG,iBAAiB;CAE7D,MAAM,WAAW,UAAU,eAAe;CAE1C,MAAM,CAAC,QAAQ,eAAe,IAAI,wBAAwB,CAAC;AAC3D,YAAW,KAAK;AAChB,MAAK,SAAS,EAAE,OAAO,CAAC;AAExB,KAAI,SAAU,MAAK,OAAO,SAAS;CAEnC,MAAM,QAAQ,sBACX,OAAO,KAAK,MAAM,UAAU,GAAG,QAC1B,KAAK,MAAM,eACX,KAAK,MAAM,QAClB;AAED,KAAI,CAAC,UAAU;AACA,oBAAkB,sBAAsB,WAAW;AAChE,SAAO;;AAGT,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC,aAAa;EACtB,CACF;EACD"}
+{"version":3,"file":"buffering-indicator.js","names":[],"sources":["../../../../src/ui/buffering-indicator/buffering-indicator.tsx"],"sourcesContent":["'use client';\n\nimport { BufferingIndicatorCore, BufferingIndicatorDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectPlayback } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState, useSyncExternalStore } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface BufferingIndicatorProps\n  extends UIComponentProps<'div', BufferingIndicatorCore.State>,\n    BufferingIndicatorCore.Props {}\n\n/**\n * Displays a buffering indicator when media is waiting for data.\n *\n * Visibility is delayed (default 500ms) to avoid flashing on quick buffers.\n *\n * @example\n * ```tsx\n * <BufferingIndicator />\n *\n * <BufferingIndicator delay={1000} />\n *\n * <BufferingIndicator\n *   render={(props, state) => (\n *     <div {...props}>{state.visible && <Spinner />}</div>\n *   )}\n * />\n * ```\n */\nexport const BufferingIndicator = forwardRef(function BufferingIndicator(\n  componentProps: BufferingIndicatorProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, delay, ...elementProps } = componentProps;\n\n  const playback = usePlayer(selectPlayback);\n\n  const [core] = useState(() => new BufferingIndicatorCore());\n  useDestroy(core);\n  core.setProps({ delay });\n\n  if (playback) core.update(playback);\n\n  const state = useSyncExternalStore(\n    (cb) => core.state.subscribe(cb),\n    () => core.state.current,\n    () => core.state.current\n  );\n\n  if (!playback) {\n    if (__DEV__) logMissingFeature('BufferingIndicator', 'playback');\n    return null;\n  }\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: BufferingIndicatorDataAttrs,\n      ref: [forwardedRef],\n      props: [elementProps],\n    }\n  );\n});\n\nexport namespace BufferingIndicator {\n  export type Props = BufferingIndicatorProps;\n  export type State = BufferingIndicatorCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,MAAa,qBAAqB,WAAW,SAAS,mBACpD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,GAAG,iBAAiB;CAE7D,MAAM,WAAW,UAAU,cAAc;CAEzC,MAAM,CAAC,QAAQ,eAAe,IAAI,uBAAuB,CAAC;CAC1D,WAAW,IAAI;CACf,KAAK,SAAS,EAAE,MAAM,CAAC;CAEvB,IAAI,UAAU,KAAK,OAAO,QAAQ;CAElC,MAAM,QAAQ,sBACX,OAAO,KAAK,MAAM,UAAU,EAAE,SACzB,KAAK,MAAM,eACX,KAAK,MAAM,OACnB;CAEA,IAAI,CAAC,UAAU;EACA,kBAAkB,sBAAsB,UAAU;EAC/D,OAAO;CACT;CAEA,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,YAAY;CACtB,CACF;AACF,CAAC"}

package/dist/dev/ui/captions-button/captions-button.d.ts

@@ -1,11 +1,9 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as _$react from "react";
 import { CaptionsButtonCore } from "@videojs/core";
-
 //#region src/ui/captions-button/captions-button.d.ts
 interface CaptionsButtonProps extends UIComponentProps<'button', CaptionsButtonCore.State>, CaptionsButtonCore.Props {}
 /** A button that toggles captions. */
-declare const CaptionsButton: _$react.ForwardRefExoticComponent<CaptionsButtonProps & _$react.RefAttributes<HTMLButtonElement>>;
+declare const CaptionsButton: import("react").ForwardRefExoticComponent<CaptionsButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 declare namespace CaptionsButton {
   type Props = CaptionsButtonProps;
   type State = CaptionsButtonCore.State;

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

@@ -1 +1 @@
-{"version":3,"file":"captions-button.d.ts","names":[],"sources":["../../../../src/ui/captions-button/captions-button.tsx"],"mappings":";;;;;UAQiB,mBAAA,SACP,gBAAA,WAA2B,kBAAA,CAAmB,KAAA,GACpD,kBAAA,CAAmB,KAAA;;cAGV,cAAA,EAAc,OAAA,CAAA,yBAAA,CAAA,mBAAA,GAAA,OAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBASV,cAAA;EAAA,KACH,KAAA,GAAQ,mBAAA;EAAA,KACR,KAAA,GAAQ,kBAAA,CAAmB,KAAA;AAAA"}
+{"version":3,"file":"captions-button.d.ts","names":[],"sources":["../../../../src/ui/captions-button/captions-button.tsx"],"mappings":";;;UAQiB,4BACP,2BAA2B,mBAAmB,QACpD,mBAAmB;;cAGV,gCAAc,0BAAA,sCAAA,cAAA;kBAUV;OACH,QAAQ;OACR,QAAQ,mBAAmB"}

package/dist/dev/ui/captions-button/captions-button.js

@@ -10,7 +10,8 @@ const CaptionsButton = createMediaButton({
 	stateAttrMap: CaptionsButtonDataAttrs,
 	selector: selectTextTrack,
 	action: (core, state) => core.toggle(state),
-	hotkeyAction: "toggleSubtitles"
+	hotkeyAction: "toggleSubtitles",
+	isSupported: (state) => !state.hidden
 });
 //#endregion
 export { CaptionsButton };

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

@@ -1 +1 @@
-{"version":3,"file":"captions-button.js","names":[],"sources":["../../../../src/ui/captions-button/captions-button.tsx"],"sourcesContent":["'use client';\n\nimport { CaptionsButtonCore, CaptionsButtonDataAttrs } from '@videojs/core';\nimport { selectTextTrack } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface CaptionsButtonProps\n  extends UIComponentProps<'button', CaptionsButtonCore.State>,\n    CaptionsButtonCore.Props {}\n\n/** A button that toggles captions. */\nexport const CaptionsButton = createMediaButton<CaptionsButtonCore, CaptionsButtonProps>({\n  displayName: 'CaptionsButton',\n  core: CaptionsButtonCore,\n  stateAttrMap: CaptionsButtonDataAttrs,\n  selector: selectTextTrack,\n  action: (core, state) => core.toggle(state),\n  hotkeyAction: 'toggleSubtitles',\n});\n\nexport namespace CaptionsButton {\n  export type Props = CaptionsButtonProps;\n  export type State = CaptionsButtonCore.State;\n}\n"],"mappings":";;;;;;AAaA,MAAa,iBAAiB,kBAA2D;CACvF,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,MAAM;CAC3C,cAAc;CACf,CAAC"}
+{"version":3,"file":"captions-button.js","names":[],"sources":["../../../../src/ui/captions-button/captions-button.tsx"],"sourcesContent":["'use client';\n\nimport { CaptionsButtonCore, CaptionsButtonDataAttrs } from '@videojs/core';\nimport { selectTextTrack } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface CaptionsButtonProps\n  extends UIComponentProps<'button', CaptionsButtonCore.State>,\n    CaptionsButtonCore.Props {}\n\n/** A button that toggles captions. */\nexport const CaptionsButton = createMediaButton<CaptionsButtonCore, CaptionsButtonProps>({\n  displayName: 'CaptionsButton',\n  core: CaptionsButtonCore,\n  stateAttrMap: CaptionsButtonDataAttrs,\n  selector: selectTextTrack,\n  action: (core, state) => core.toggle(state),\n  hotkeyAction: 'toggleSubtitles',\n  isSupported: (state) => !state.hidden,\n});\n\nexport namespace CaptionsButton {\n  export type Props = CaptionsButtonProps;\n  export type State = CaptionsButtonCore.State;\n}\n"],"mappings":";;;;;;AAaA,MAAa,iBAAiB,kBAA2D;CACvF,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,KAAK;CAC1C,cAAc;CACd,cAAc,UAAU,CAAC,MAAM;AACjC,CAAC"}

package/dist/dev/ui/captions-radio-group/index.d.ts

@@ -0,0 +1,2 @@
+import { CaptionsOption, CaptionsOptionsProps, CaptionsOptionsResult, useCaptionsOptions } from "./use-captions-options.js";
+export { type CaptionsOption, type CaptionsOptionsProps, type CaptionsOptionsResult, useCaptionsOptions };

package/dist/dev/ui/captions-radio-group/index.js

@@ -0,0 +1,2 @@
+import { useCaptionsOptions } from "./use-captions-options.js";
+export { useCaptionsOptions };

package/dist/dev/ui/captions-radio-group/use-captions-options.d.ts

@@ -0,0 +1,32 @@
+import { CaptionsRadioGroupCore } from "@videojs/core";
+//#region src/ui/captions-radio-group/use-captions-options.d.ts
+interface CaptionsOptionsProps extends CaptionsRadioGroupCore.Props {}
+interface CaptionsOption {
+  value: string;
+  label: string;
+  disabled: boolean;
+}
+interface CaptionsOptionsResult {
+  state: CaptionsRadioGroupCore.State;
+  value: string;
+  options: CaptionsOption[];
+  disabled: boolean;
+  showMenu: boolean;
+  setValue: (value: string) => void;
+}
+/**
+ * Create captions menu options (including an `Off` option) from the player
+ * text track state. Returns `null` when the text tracks feature is not
+ * configured.
+ *
+ * @param props - Optional `label`, `formatTrack`, and `disabled` overrides.
+ */
+declare function useCaptionsOptions(props?: CaptionsOptionsProps): CaptionsOptionsResult | null;
+declare namespace useCaptionsOptions {
+  type Props = CaptionsOptionsProps;
+  type Result = CaptionsOptionsResult;
+  type Option = CaptionsOption;
+}
+//#endregion
+export { CaptionsOption, CaptionsOptionsProps, CaptionsOptionsResult, useCaptionsOptions };
+//# sourceMappingURL=use-captions-options.d.ts.map

package/dist/dev/ui/captions-radio-group/use-captions-options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-captions-options.d.ts","names":[],"sources":["../../../../src/ui/captions-radio-group/use-captions-options.ts"],"mappings":";;UAWiB,6BAA6B,uBAAuB;UAEpD;EACf;EACA;EACA;;UAGe;EACf,OAAO,uBAAuB;EAC9B;EACA,SAAS;EACT;EACA;EACA,WAAW;;;;;;;;;iBAUG,mBAAmB,QAAQ,uBAAuB;kBAyCjD;OACH,QAAQ;OACR,SAAS;OACT,SAAS"}

package/dist/dev/ui/captions-radio-group/use-captions-options.js

@@ -0,0 +1,51 @@
+"use client";
+import { useTranslator } from "../../i18n/context.js";
+import { usePlayer } from "../../player/context.js";
+import { logMissingFeature, selectTextTrack } from "@videojs/core/dom";
+import { translateText } from "@videojs/core/i18n";
+import { useCallback, useState } from "react";
+import { CAPTIONS_OFF_VALUE, CaptionsRadioGroupCore } from "@videojs/core";
+import { offText } from "@videojs/core/i18n/text/menu";
+//#region src/ui/captions-radio-group/use-captions-options.ts
+/**
+* Create captions menu options (including an `Off` option) from the player
+* text track state. Returns `null` when the text tracks feature is not
+* configured.
+*
+* @param props - Optional `label`, `formatTrack`, and `disabled` overrides.
+*/
+function useCaptionsOptions(props) {
+	"use no memo";
+	const media = usePlayer(selectTextTrack);
+	const t = useTranslator();
+	const [core] = useState(() => new CaptionsRadioGroupCore());
+	core.setProps(props ?? {});
+	const setValue = useCallback((value) => core.selectValue(media, value), [core, media]);
+	if (!media) {
+		logMissingFeature("useCaptionsOptions", selectTextTrack.displayName ?? "textTrack");
+		return null;
+	}
+	core.setMedia(media);
+	const state = core.getState();
+	const showMenu = state.tracks.length > 1;
+	return {
+		state,
+		value: state.value,
+		options: [{
+			value: CAPTIONS_OFF_VALUE,
+			label: translateText(offText, t),
+			disabled: state.disabled
+		}, ...state.tracks.map((track) => ({
+			value: track.value,
+			label: translateText(track.label, t),
+			disabled: state.disabled
+		}))],
+		disabled: state.disabled,
+		showMenu,
+		setValue
+	};
+}
+//#endregion
+export { useCaptionsOptions };
+
+//# sourceMappingURL=use-captions-options.js.map

package/dist/dev/ui/captions-radio-group/use-captions-options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-captions-options.js","names":[],"sources":["../../../../src/ui/captions-radio-group/use-captions-options.ts"],"sourcesContent":["'use client';\n\nimport { CAPTIONS_OFF_VALUE, CaptionsRadioGroupCore } from '@videojs/core';\nimport { logMissingFeature, selectTextTrack } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport { offText } from '@videojs/core/i18n/text/menu';\nimport { useCallback, useState } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport { usePlayer } from '../../player/context';\n\nexport interface CaptionsOptionsProps extends CaptionsRadioGroupCore.Props {}\n\nexport interface CaptionsOption {\n  value: string;\n  label: string;\n  disabled: boolean;\n}\n\nexport interface CaptionsOptionsResult {\n  state: CaptionsRadioGroupCore.State;\n  value: string;\n  options: CaptionsOption[];\n  disabled: boolean;\n  showMenu: boolean;\n  setValue: (value: string) => void;\n}\n\n/**\n * Create captions menu options (including an `Off` option) from the player\n * text track state. Returns `null` when the text tracks feature is not\n * configured.\n *\n * @param props - Optional `label`, `formatTrack`, and `disabled` overrides.\n */\nexport function useCaptionsOptions(props?: CaptionsOptionsProps): CaptionsOptionsResult | null {\n  'use no memo';\n\n  const media = usePlayer(selectTextTrack);\n  const t = useTranslator();\n  const [core] = useState(() => new CaptionsRadioGroupCore());\n\n  core.setProps(props ?? {});\n\n  const setValue = useCallback((value: string) => core.selectValue(media!, value), [core, media]);\n\n  if (!media) {\n    if (__DEV__) logMissingFeature('useCaptionsOptions', selectTextTrack.displayName ?? 'textTrack');\n    return null;\n  }\n\n  core.setMedia(media);\n  const state = core.getState();\n  const showMenu = state.tracks.length > 1;\n\n  return {\n    state,\n    value: state.value,\n    options: [\n      {\n        value: CAPTIONS_OFF_VALUE,\n        label: translateText(offText, t),\n        disabled: state.disabled,\n      },\n      ...state.tracks.map((track) => ({\n        value: track.value,\n        label: translateText(track.label, t),\n        disabled: state.disabled,\n      })),\n    ],\n    disabled: state.disabled,\n    showMenu,\n    setValue,\n  };\n}\n\nexport namespace useCaptionsOptions {\n  export type Props = CaptionsOptionsProps;\n  export type Result = CaptionsOptionsResult;\n  export type Option = CaptionsOption;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAmCA,SAAgB,mBAAmB,OAA4D;CAC7F;CAEA,MAAM,QAAQ,UAAU,eAAe;CACvC,MAAM,IAAI,cAAc;CACxB,MAAM,CAAC,QAAQ,eAAe,IAAI,uBAAuB,CAAC;CAE1D,KAAK,SAAS,SAAS,CAAC,CAAC;CAEzB,MAAM,WAAW,aAAa,UAAkB,KAAK,YAAY,OAAQ,KAAK,GAAG,CAAC,MAAM,KAAK,CAAC;CAE9F,IAAI,CAAC,OAAO;EACG,kBAAkB,sBAAsB,gBAAgB,eAAe,WAAW;EAC/F,OAAO;CACT;CAEA,KAAK,SAAS,KAAK;CACnB,MAAM,QAAQ,KAAK,SAAS;CAC5B,MAAM,WAAW,MAAM,OAAO,SAAS;CAEvC,OAAO;EACL;EACA,OAAO,MAAM;EACb,SAAS,CACP;GACE,OAAO;GACP,OAAO,cAAc,SAAS,CAAC;GAC/B,UAAU,MAAM;EAClB,GACA,GAAG,MAAM,OAAO,KAAK,WAAW;GAC9B,OAAO,MAAM;GACb,OAAO,cAAc,MAAM,OAAO,CAAC;GACnC,UAAU,MAAM;EAClB,EAAE,CACJ;EACA,UAAU,MAAM;EAChB;EACA;CACF;AACF"}

package/dist/dev/ui/cast-button/cast-button.d.ts

@@ -1,11 +1,9 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as _$react from "react";
 import { CastButtonCore } from "@videojs/core";
-
 //#region src/ui/cast-button/cast-button.d.ts
 interface CastButtonProps extends UIComponentProps<'button', CastButtonCore.State>, CastButtonCore.Props {}
 /** A button that toggles casting to a remote device. */
-declare const CastButton: _$react.ForwardRefExoticComponent<CastButtonProps & _$react.RefAttributes<HTMLButtonElement>>;
+declare const CastButton: import("react").ForwardRefExoticComponent<CastButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 declare namespace CastButton {
   type Props = CastButtonProps;
   type State = CastButtonCore.State;

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

@@ -1 +1 @@
-{"version":3,"file":"cast-button.d.ts","names":[],"sources":["../../../../src/ui/cast-button/cast-button.tsx"],"mappings":";;;;;UAQiB,eAAA,SAAwB,gBAAA,WAA2B,cAAA,CAAe,KAAA,GAAQ,cAAA,CAAe,KAAA;;cAG7F,UAAA,EAAU,OAAA,CAAA,yBAAA,CAAA,eAAA,GAAA,OAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBAQN,UAAA;EAAA,KACH,KAAA,GAAQ,eAAA;EAAA,KACR,KAAA,GAAQ,cAAA,CAAe,KAAA;AAAA"}
+{"version":3,"file":"cast-button.d.ts","names":[],"sources":["../../../../src/ui/cast-button/cast-button.tsx"],"mappings":";;;UAQiB,wBAAwB,2BAA2B,eAAe,QAAQ,eAAe;;cAG7F,4BAAU,0BAAA,kCAAA,cAAA;kBASN;OACH,QAAQ;OACR,QAAQ,eAAe"}

package/dist/dev/ui/cast-button/cast-button.js

@@ -9,7 +9,8 @@ const CastButton = createMediaButton({
 	core: CastButtonCore,
 	stateAttrMap: CastButtonDataAttrs,
 	selector: selectRemotePlayback,
-	action: (core, state) => core.toggle(state)
+	action: (core, state) => core.toggle(state),
+	isSupported: (state) => !state.hidden
 });
 //#endregion
 export { CastButton };

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

@@ -1 +1 @@
-{"version":3,"file":"cast-button.js","names":[],"sources":["../../../../src/ui/cast-button/cast-button.tsx"],"sourcesContent":["'use client';\n\nimport { CastButtonCore, CastButtonDataAttrs } 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 CastButtonProps extends UIComponentProps<'button', CastButtonCore.State>, CastButtonCore.Props {}\n\n/** A button that toggles casting to a remote device. */\nexport const CastButton = createMediaButton<CastButtonCore, CastButtonProps>({\n  displayName: 'CastButton',\n  core: CastButtonCore,\n  stateAttrMap: CastButtonDataAttrs,\n  selector: selectRemotePlayback,\n  action: (core, state) => core.toggle(state),\n});\n\nexport namespace CastButton {\n  export type Props = CastButtonProps;\n  export type State = CastButtonCore.State;\n}\n"],"mappings":";;;;;;AAWA,MAAa,aAAa,kBAAmD;CAC3E,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,MAAM;CAC5C,CAAC"}
+{"version":3,"file":"cast-button.js","names":[],"sources":["../../../../src/ui/cast-button/cast-button.tsx"],"sourcesContent":["'use client';\n\nimport { CastButtonCore, CastButtonDataAttrs } 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 CastButtonProps extends UIComponentProps<'button', CastButtonCore.State>, CastButtonCore.Props {}\n\n/** A button that toggles casting to a remote device. */\nexport const CastButton = createMediaButton<CastButtonCore, CastButtonProps>({\n  displayName: 'CastButton',\n  core: CastButtonCore,\n  stateAttrMap: CastButtonDataAttrs,\n  selector: selectRemotePlayback,\n  action: (core, state) => core.toggle(state),\n  isSupported: (state) => !state.hidden,\n});\n\nexport namespace CastButton {\n  export type Props = CastButtonProps;\n  export type State = CastButtonCore.State;\n}\n"],"mappings":";;;;;;AAWA,MAAa,aAAa,kBAAmD;CAC3E,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/controls/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/controls/context.tsx"],"sourcesContent":["'use client';\n\nimport type { ControlsState, StateAttrMap } from '@videojs/core';\nimport { createContext, useContext } from 'react';\n\nexport interface ControlsContextValue {\n  state: ControlsState;\n  stateAttrMap: StateAttrMap<ControlsState>;\n}\n\nconst ControlsContext = createContext<ControlsContextValue | null>(null);\n\nexport const ControlsContextProvider = ControlsContext.Provider;\n\nexport function useControlsContext(): ControlsContextValue {\n  const ctx = useContext(ControlsContext);\n  if (!ctx) throw new Error('Controls compound components must be used within a Controls.Root');\n  return ctx;\n}\n\nexport function useOptionalControlsContext(): ControlsContextValue | null {\n  return useContext(ControlsContext);\n}\n"],"mappings":";;;AAUA,MAAM,kBAAkB,cAA2C,KAAK;AAExE,MAAa,0BAA0B,gBAAgB;AAEvD,SAAgB,qBAA2C;CACzD,MAAM,MAAM,WAAW,gBAAgB;AACvC,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,mEAAmE;AAC7F,QAAO;;AAGT,SAAgB,6BAA0D;AACxE,QAAO,WAAW,gBAAgB"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/controls/context.tsx"],"sourcesContent":["'use client';\n\nimport type { ControlsState, StateAttrMap } from '@videojs/core';\nimport { createContext, useContext } from 'react';\n\nexport interface ControlsContextValue {\n  state: ControlsState;\n  stateAttrMap: StateAttrMap<ControlsState>;\n}\n\nconst ControlsContext = createContext<ControlsContextValue | null>(null);\n\nexport const ControlsContextProvider = ControlsContext.Provider;\n\nexport function useControlsContext(): ControlsContextValue {\n  const ctx = useContext(ControlsContext);\n  if (!ctx) throw new Error('Controls compound components must be used within a Controls.Root');\n  return ctx;\n}\n\nexport function useOptionalControlsContext(): ControlsContextValue | null {\n  return useContext(ControlsContext);\n}\n"],"mappings":";;;AAUA,MAAM,kBAAkB,cAA2C,IAAI;AAEvE,MAAa,0BAA0B,gBAAgB;AAEvD,SAAgB,qBAA2C;CACzD,MAAM,MAAM,WAAW,eAAe;CACtC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,kEAAkE;CAC5F,OAAO;AACT;AAEA,SAAgB,6BAA0D;CACxE,OAAO,WAAW,eAAe;AACnC"}

package/dist/dev/ui/controls/controls-group.d.ts

@@ -1,14 +1,12 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as _$react from "react";
 import { ReactNode } from "react";
 import { ControlsCore } from "@videojs/core";
-
 //#region src/ui/controls/controls-group.d.ts
 interface ControlsGroupProps extends UIComponentProps<'div', ControlsCore.State> {
   children?: ReactNode | undefined;
 }
 /** Layout group for related controls; sets `role="group"` when labeled. */
-declare const ControlsGroup: _$react.ForwardRefExoticComponent<Omit<ControlsGroupProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+declare const ControlsGroup: import("react").ForwardRefExoticComponent<Omit<ControlsGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare namespace ControlsGroup {
   type Props = ControlsGroupProps;
 }

package/dist/dev/ui/controls/controls-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"controls-group.d.ts","names":[],"sources":["../../../../src/ui/controls/controls-group.tsx"],"mappings":";;;;;;UAUiB,kBAAA,SAA2B,gBAAA,QAAwB,YAAA,CAAa,KAAA;EAC/E,QAAA,GAAW,SAAA;AAAA;AADb;AAAA,cAKa,aAAA,EAAa,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,kBAAA,WAAA,OAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAqBT,aAAA;EAAA,KACH,KAAA,GAAQ,kBAAA;AAAA"}
+{"version":3,"file":"controls-group.d.ts","names":[],"sources":["../../../../src/ui/controls/controls-group.tsx"],"mappings":";;;;UAUiB,2BAA2B,wBAAwB,aAAa;EAC/E,WAAW;;;cAIA,+BAAa,0BAAA,KAAA,6CAAA,cAAA;kBAqBT;OACH,QAAQ"}

package/dist/dev/ui/controls/controls-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"controls-group.js","names":[],"sources":["../../../../src/ui/controls/controls-group.tsx"],"sourcesContent":["'use client';\n\nimport type { ControlsCore } from '@videojs/core';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useControlsContext } from './context';\n\nexport interface ControlsGroupProps extends UIComponentProps<'div', ControlsCore.State> {\n  children?: ReactNode | undefined;\n}\n\n/** Layout group for related controls; sets `role=\"group\"` when labeled. */\nexport const ControlsGroup = forwardRef(function ControlsGroup(\n  componentProps: ControlsGroupProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, children, ...elementProps } = componentProps;\n\n  const { state, stateAttrMap } = useControlsContext();\n  const role = elementProps['aria-label'] || elementProps['aria-labelledby'] ? 'group' : undefined;\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: [forwardedRef],\n      props: [{ role, children }, elementProps],\n    }\n  );\n});\n\nexport namespace ControlsGroup {\n  export type Props = ControlsGroupProps;\n}\n"],"mappings":";;;;;;AAeA,MAAa,gBAAgB,WAAW,SAAS,cAC/C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,iBAAiB;CAEhE,MAAM,EAAE,OAAO,iBAAiB,oBAAoB;CACpD,MAAM,OAAO,aAAa,iBAAiB,aAAa,qBAAqB,UAAU,KAAA;AAEvF,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC;GAAE;GAAM;GAAU,EAAE,aAAa;EAC1C,CACF;EACD"}
+{"version":3,"file":"controls-group.js","names":[],"sources":["../../../../src/ui/controls/controls-group.tsx"],"sourcesContent":["'use client';\n\nimport type { ControlsCore } from '@videojs/core';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useControlsContext } from './context';\n\nexport interface ControlsGroupProps extends UIComponentProps<'div', ControlsCore.State> {\n  children?: ReactNode | undefined;\n}\n\n/** Layout group for related controls; sets `role=\"group\"` when labeled. */\nexport const ControlsGroup = forwardRef(function ControlsGroup(\n  componentProps: ControlsGroupProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, children, ...elementProps } = componentProps;\n\n  const { state, stateAttrMap } = useControlsContext();\n  const role = elementProps['aria-label'] || elementProps['aria-labelledby'] ? 'group' : undefined;\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: [forwardedRef],\n      props: [{ role, children }, elementProps],\n    }\n  );\n});\n\nexport namespace ControlsGroup {\n  export type Props = ControlsGroupProps;\n}\n"],"mappings":";;;;;;AAeA,MAAa,gBAAgB,WAAW,SAAS,cAC/C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,iBAAiB;CAEhE,MAAM,EAAE,OAAO,iBAAiB,mBAAmB;CACnD,MAAM,OAAO,aAAa,iBAAiB,aAAa,qBAAqB,UAAU,KAAA;CAEvF,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC;GAAE;GAAM;EAAS,GAAG,YAAY;CAC1C,CACF;AACF,CAAC"}

package/dist/dev/ui/controls/controls-root.d.ts

@@ -1,14 +1,12 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as _$react from "react";
 import { ReactNode } from "react";
 import { ControlsCore } from "@videojs/core";
-
 //#region src/ui/controls/controls-root.d.ts
 interface ControlsRootProps extends UIComponentProps<'div', ControlsCore.State> {
   children?: ReactNode | undefined;
 }
 /** Root container for player controls state and rendered control content. */
-declare const ControlsRoot: _$react.ForwardRefExoticComponent<Omit<ControlsRootProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+declare const ControlsRoot: import("react").ForwardRefExoticComponent<Omit<ControlsRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare namespace ControlsRoot {
   type Props = ControlsRootProps;
   type State = ControlsCore.State;

package/dist/dev/ui/controls/controls-root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"controls-root.d.ts","names":[],"sources":["../../../../src/ui/controls/controls-root.tsx"],"mappings":";;;;;;UAYiB,iBAAA,SAA0B,gBAAA,QAAwB,YAAA,CAAa,KAAA;EAC9E,QAAA,GAAW,SAAA;AAAA;AADb;AAAA,cAKa,YAAA,EAAY,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,iBAAA,WAAA,OAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAkCR,YAAA;EAAA,KACH,KAAA,GAAQ,iBAAA;EAAA,KACR,KAAA,GAAQ,YAAA,CAAa,KAAA;AAAA"}
+{"version":3,"file":"controls-root.d.ts","names":[],"sources":["../../../../src/ui/controls/controls-root.tsx"],"mappings":";;;;UAYiB,0BAA0B,wBAAwB,aAAa;EAC9E,WAAW;;;cAIA,8BAAY,0BAAA,KAAA,4CAAA,cAAA;kBAkCR;OACH,QAAQ;OACR,QAAQ,aAAa"}

package/dist/dev/ui/controls/controls-root.js

@@ -31,7 +31,11 @@ const ControlsRoot = forwardRef(function ControlsRoot(componentProps, forwardedR
 			state,
 			stateAttrMap: ControlsDataAttrs,
 			ref: [forwardedRef],
-			props: [{ children }, elementProps]
+			props: [
+				{ children },
+				elementProps,
+				{ "data-interactive": "" }
+			]
 		})
 	});
 });

package/dist/dev/ui/controls/controls-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"controls-root.js","names":[],"sources":["../../../../src/ui/controls/controls-root.tsx"],"sourcesContent":["'use client';\n\nimport { ControlsCore, ControlsDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectControls } from '@videojs/core/dom';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { ControlsContextProvider } from './context';\n\nexport interface ControlsRootProps extends UIComponentProps<'div', ControlsCore.State> {\n  children?: ReactNode | undefined;\n}\n\n/** Root container for player controls state and rendered control content. */\nexport const ControlsRoot = forwardRef(function ControlsRoot(\n  componentProps: ControlsRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, children, ...elementProps } = componentProps;\n\n  const controls = usePlayer(selectControls);\n\n  const [core] = useState(() => new ControlsCore());\n\n  if (!controls) {\n    if (__DEV__) logMissingFeature('Controls.Root', 'controls');\n    return null;\n  }\n\n  core.setMedia(controls);\n  const state = core.getState();\n\n  return (\n    <ControlsContextProvider value={{ state, stateAttrMap: ControlsDataAttrs }}>\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: ControlsDataAttrs,\n          ref: [forwardedRef],\n          props: [{ children }, elementProps],\n        }\n      )}\n    </ControlsContextProvider>\n  );\n});\n\nexport namespace ControlsRoot {\n  export type Props = ControlsRootProps;\n  export type State = ControlsCore.State;\n}\n"],"mappings":";;;;;;;;;;AAiBA,MAAa,eAAe,WAAW,SAAS,aAC9C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,iBAAiB;CAEhE,MAAM,WAAW,UAAU,eAAe;CAE1C,MAAM,CAAC,QAAQ,eAAe,IAAI,cAAc,CAAC;AAEjD,KAAI,CAAC,UAAU;AACA,oBAAkB,iBAAiB,WAAW;AAC3D,SAAO;;AAGT,MAAK,SAAS,SAAS;CACvB,MAAM,QAAQ,KAAK,UAAU;AAE7B,QACE,oBAAC,yBAAD;EAAyB,OAAO;GAAE;GAAO,cAAc;GAAmB;YACvE,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,aAAa;GACnB,OAAO,CAAC,EAAE,UAAU,EAAE,aAAa;GACpC,CACF;EACuB,CAAA;EAE5B"}
+{"version":3,"file":"controls-root.js","names":[],"sources":["../../../../src/ui/controls/controls-root.tsx"],"sourcesContent":["'use client';\n\nimport { ControlsCore, ControlsDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectControls } from '@videojs/core/dom';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { ControlsContextProvider } from './context';\n\nexport interface ControlsRootProps extends UIComponentProps<'div', ControlsCore.State> {\n  children?: ReactNode | undefined;\n}\n\n/** Root container for player controls state and rendered control content. */\nexport const ControlsRoot = forwardRef(function ControlsRoot(\n  componentProps: ControlsRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, children, ...elementProps } = componentProps;\n\n  const controls = usePlayer(selectControls);\n\n  const [core] = useState(() => new ControlsCore());\n\n  if (!controls) {\n    if (__DEV__) logMissingFeature('Controls.Root', 'controls');\n    return null;\n  }\n\n  core.setMedia(controls);\n  const state = core.getState();\n\n  return (\n    <ControlsContextProvider value={{ state, stateAttrMap: ControlsDataAttrs }}>\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: ControlsDataAttrs,\n          ref: [forwardedRef],\n          props: [{ children }, elementProps, { 'data-interactive': '' }],\n        }\n      )}\n    </ControlsContextProvider>\n  );\n});\n\nexport namespace ControlsRoot {\n  export type Props = ControlsRootProps;\n  export type State = ControlsCore.State;\n}\n"],"mappings":";;;;;;;;;;AAiBA,MAAa,eAAe,WAAW,SAAS,aAC9C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,iBAAiB;CAEhE,MAAM,WAAW,UAAU,cAAc;CAEzC,MAAM,CAAC,QAAQ,eAAe,IAAI,aAAa,CAAC;CAEhD,IAAI,CAAC,UAAU;EACA,kBAAkB,iBAAiB,UAAU;EAC1D,OAAO;CACT;CAEA,KAAK,SAAS,QAAQ;CACtB,MAAM,QAAQ,KAAK,SAAS;CAE5B,OACE,oBAAC,yBAAD;EAAyB,OAAO;GAAE;GAAO,cAAc;EAAkB;EACtE,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,cAAc;GACd,KAAK,CAAC,YAAY;GAClB,OAAO;IAAC,EAAE,SAAS;IAAG;IAAc,EAAE,oBAAoB,GAAG;GAAC;EAChE,CACF;CACuB,CAAA;AAE7B,CAAC"}

package/dist/dev/ui/controls/index.parts.d.ts

@@ -1,10 +1,8 @@
 import { ControlsGroup, ControlsGroupProps } from "./controls-group.js";
 import { ControlsRoot, ControlsRootProps } from "./controls-root.js";
-
-//#region src/ui/controls/index.parts.d.ts
 declare namespace index_parts_d_exports {
   export { ControlsGroup as Group, ControlsGroupProps as GroupProps, ControlsRoot as Root, ControlsRootProps as RootProps };
 }
 //#endregion
-export { index_parts_d_exports };
+export { ControlsGroup as Group, type ControlsGroupProps as GroupProps, ControlsRoot as Root, type ControlsRootProps as RootProps, index_parts_d_exports };
 //# sourceMappingURL=index.parts.d.ts.map

package/dist/dev/ui/controls/index.parts.js

@@ -7,6 +7,6 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Root: () => ControlsRoot
 });
 //#endregion
-export { index_parts_exports };
+export { ControlsGroup as Group, ControlsRoot as Root, index_parts_exports };
 
 //# sourceMappingURL=index.parts.js.map

package/dist/dev/ui/create-context-part.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-context-part.js","names":[],"sources":["../../../src/ui/create-context-part.tsx"],"sourcesContent":["'use client';\n\nimport type { StateAttrMap } from '@videojs/core';\nimport type { ForwardRefExoticComponent } from 'react';\nimport { forwardRef } from 'react';\nimport type { UIComponentProps } from '@/utils/types';\nimport type { renderElement as renderElementFn } from '../utils/use-render';\nimport { renderElement } from '../utils/use-render';\n\ninterface ContextPartConfig<Props extends object, State extends object> {\n  displayName: string;\n  tag: keyof React.JSX.IntrinsicElements;\n  useContext: () => { state: State; stateAttrMap: StateAttrMap<State> };\n  staticProps?: Partial<Props>;\n  /** Derive props from state on each render (e.g. `id` from a state field). */\n  getProps?: (state: State) => Record<string, unknown>;\n}\n\nexport function createContextPart<Props extends UIComponentProps<any, any>, State extends object>(\n  config: ContextPartConfig<Props, State>\n): ForwardRefExoticComponent<Props> {\n  const { displayName, tag, useContext, staticProps, getProps } = config;\n\n  const Component = forwardRef<HTMLElement, Props>(function ContextPart(componentProps, forwardedRef) {\n    const { render, className, style, ...elementProps } = componentProps;\n    const context = useContext();\n    const dynamicProps = getProps?.(context.state);\n\n    return renderElement(tag, { render, className, style } as renderElementFn.ComponentProps<State>, {\n      state: context.state,\n      stateAttrMap: context.stateAttrMap,\n      ref: forwardedRef,\n      props: [staticProps, dynamicProps, elementProps].filter(Boolean),\n    });\n  });\n\n  Component.displayName = displayName;\n\n  return Component as ForwardRefExoticComponent<Props>;\n}\n"],"mappings":";;;;AAkBA,SAAgB,kBACd,QACkC;CAClC,MAAM,EAAE,aAAa,KAAK,YAAY,aAAa,aAAa;CAEhE,MAAM,YAAY,WAA+B,SAAS,YAAY,gBAAgB,cAAc;EAClG,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;EACtD,MAAM,UAAU,YAAY;EAC5B,MAAM,eAAe,WAAW,QAAQ,MAAM;AAE9C,SAAO,cAAc,KAAK;GAAE;GAAQ;GAAW;GAAO,EAA2C;GAC/F,OAAO,QAAQ;GACf,cAAc,QAAQ;GACtB,KAAK;GACL,OAAO;IAAC;IAAa;IAAc;IAAa,CAAC,OAAO,QAAQ;GACjE,CAAC;GACF;AAEF,WAAU,cAAc;AAExB,QAAO"}
+{"version":3,"file":"create-context-part.js","names":[],"sources":["../../../src/ui/create-context-part.tsx"],"sourcesContent":["'use client';\n\nimport type { StateAttrMap } from '@videojs/core';\nimport type { ForwardRefExoticComponent } from 'react';\nimport { forwardRef } from 'react';\nimport type { UIComponentProps } from '@/utils/types';\nimport type { renderElement as renderElementFn } from '../utils/use-render';\nimport { renderElement } from '../utils/use-render';\n\ninterface ContextPartConfig<Props extends object, State extends object> {\n  displayName: string;\n  tag: keyof React.JSX.IntrinsicElements;\n  useContext: () => { state: State; stateAttrMap: StateAttrMap<State> };\n  staticProps?: Partial<Props>;\n  /** Derive props from state on each render (e.g. `id` from a state field). */\n  getProps?: (state: State) => Record<string, unknown>;\n}\n\nexport function createContextPart<Props extends UIComponentProps<any, any>, State extends object>(\n  config: ContextPartConfig<Props, State>\n): ForwardRefExoticComponent<Props> {\n  const { displayName, tag, useContext, staticProps, getProps } = config;\n\n  const Component = forwardRef<HTMLElement, Props>(function ContextPart(componentProps, forwardedRef) {\n    const { render, className, style, ...elementProps } = componentProps;\n    const context = useContext();\n    const dynamicProps = getProps?.(context.state);\n\n    return renderElement(tag, { render, className, style } as renderElementFn.ComponentProps<State>, {\n      state: context.state,\n      stateAttrMap: context.stateAttrMap,\n      ref: forwardedRef,\n      props: [staticProps, dynamicProps, elementProps].filter(Boolean),\n    });\n  });\n\n  Component.displayName = displayName;\n\n  return Component as ForwardRefExoticComponent<Props>;\n}\n"],"mappings":";;;;AAkBA,SAAgB,kBACd,QACkC;CAClC,MAAM,EAAE,aAAa,KAAK,YAAY,aAAa,aAAa;CAEhE,MAAM,YAAY,WAA+B,SAAS,YAAY,gBAAgB,cAAc;EAClG,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;EACtD,MAAM,UAAU,WAAW;EAC3B,MAAM,eAAe,WAAW,QAAQ,KAAK;EAE7C,OAAO,cAAc,KAAK;GAAE;GAAQ;GAAW;EAAM,GAA4C;GAC/F,OAAO,QAAQ;GACf,cAAc,QAAQ;GACtB,KAAK;GACL,OAAO;IAAC;IAAa;IAAc;GAAY,CAAC,CAAC,OAAO,OAAO;EACjE,CAAC;CACH,CAAC;CAED,UAAU,cAAc;CAExB,OAAO;AACT"}