@videojs/react 10.0.0-beta.3 → 10.0.0-beta.31

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

@@ -1,9 +1,6 @@
-'use client';
-
-import { useAlertDialogContext } from "./context.js";
 import { renderElement } from "../../utils/use-render.js";
+import { useAlertDialogContext } from "./context.js";
 import { forwardRef, useCallback } from "react";
-
 //#region src/ui/alert-dialog/alert-dialog-close.tsx
 const AlertDialogClose = forwardRef(function AlertDialogClose({ render, className, style, disabled, ...elementProps }, forwardedRef) {
 	const { dialog, state } = useAlertDialogContext();
@@ -25,7 +22,7 @@ const AlertDialogClose = forwardRef(function AlertDialogClose({ render, classNam
 		}, elementProps]
 	});
 });
-
 //#endregion
 export { AlertDialogClose };
+
 //# sourceMappingURL=alert-dialog-close.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog-close.js","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-close.tsx"],"sourcesContent":["'use client';\n\nimport type { AlertDialogCore } from '@videojs/core';\nimport { forwardRef, useCallback } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useAlertDialogContext } from './context';\n\nexport interface AlertDialogCloseProps extends UIComponentProps<'button', AlertDialogCore.State> {}\n\nexport const AlertDialogClose = forwardRef<HTMLButtonElement, AlertDialogCloseProps>(function AlertDialogClose(\n  { render, className, style, disabled, ...elementProps },\n  forwardedRef\n) {\n  const { dialog, state } = useAlertDialogContext();\n\n  const handleClick = useCallback(() => {\n    if (disabled) return;\n    dialog.close();\n  }, [dialog, disabled]);\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ type: 'button' as const, disabled, onClick: handleClick }, elementProps],\n    }\n  );\n});\n\nexport namespace AlertDialogClose {\n  export type Props = AlertDialogCloseProps;\n  export type State = AlertDialogCore.State;\n}\n"],"mappings":";;;;;;;AAWA,MAAa,mBAAmB,WAAqD,SAAS,iBAC5F,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBACzC,cACA;CACA,MAAM,EAAE,QAAQ,UAAU,uBAAuB;CAEjD,MAAM,cAAc,kBAAkB;AACpC,MAAI,SAAU;AACd,SAAO,OAAO;IACb,CAAC,QAAQ,SAAS,CAAC;AAEtB,QAAO,cACL,UACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC;GAAE,MAAM;GAAmB;GAAU,SAAS;GAAa,EAAE,aAAa;EACnF,CACF;EACD"}
+{"version":3,"file":"alert-dialog-close.js","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-close.tsx"],"sourcesContent":["import type { AlertDialogCore } from '@videojs/core';\nimport { forwardRef, useCallback } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useAlertDialogContext } from './context';\n\nexport interface AlertDialogCloseProps extends UIComponentProps<'button', AlertDialogCore.State> {}\n\nexport const AlertDialogClose = forwardRef<HTMLButtonElement, AlertDialogCloseProps>(function AlertDialogClose(\n  { render, className, style, disabled, ...elementProps },\n  forwardedRef\n) {\n  const { dialog, state } = useAlertDialogContext();\n\n  const handleClick = useCallback(() => {\n    if (disabled) return;\n    dialog.close();\n  }, [dialog, disabled]);\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ type: 'button' as const, disabled, onClick: handleClick }, elementProps],\n    }\n  );\n});\n\nexport namespace AlertDialogClose {\n  export type Props = AlertDialogCloseProps;\n  export type State = AlertDialogCore.State;\n}\n"],"mappings":";;;;AASA,MAAa,mBAAmB,WAAqD,SAAS,iBAC5F,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBACzC,cACA;CACA,MAAM,EAAE,QAAQ,UAAU,sBAAsB;CAEhD,MAAM,cAAc,kBAAkB;EACpC,IAAI,UAAU;EACd,OAAO,MAAM;CACf,GAAG,CAAC,QAAQ,QAAQ,CAAC;CAErB,OAAO,cACL,UACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC;GAAE,MAAM;GAAmB;GAAU,SAAS;EAAY,GAAG,YAAY;CACnF,CACF;AACF,CAAC"}

package/dist/dev/ui/alert-dialog/alert-dialog-description.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-description.d.ts
 interface AlertDialogDescriptionProps extends UIComponentProps<'p', AlertDialogCore.State> {}
-declare const AlertDialogDescription: react.ForwardRefExoticComponent<AlertDialogDescriptionProps>;
+declare const AlertDialogDescription: import("react").ForwardRefExoticComponent<AlertDialogDescriptionProps>;
 declare namespace AlertDialogDescription {
   type Props = AlertDialogDescriptionProps;
   type State = AlertDialogCore.State;

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

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog-description.d.ts","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-description.tsx"],"mappings":";;;;;UAQiB,2BAAA,SAAoC,gBAAA,MAAsB,eAAA,CAAgB,KAAA;AAAA,cAE9E,sBAAA,EAAsB,KAAA,CAAA,yBAAA,CAAA,2BAAA;AAAA,kBAOlB,sBAAA;EAAA,KACH,KAAA,GAAQ,2BAAA;EAAA,KACR,KAAA,GAAQ,eAAA,CAAgB,KAAA;AAAA"}
+{"version":3,"file":"alert-dialog-description.d.ts","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-description.tsx"],"mappings":";;;UAMiB,oCAAoC,sBAAsB,gBAAgB;cAE9E,wCAAsB,0BAAA;kBAOlB;OACH,QAAQ;OACR,QAAQ,gBAAgB"}

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

@@ -1,8 +1,5 @@
-'use client';
-
 import { useAlertDialogContext } from "./context.js";
 import { createContextPart } from "../create-context-part.js";
-
 //#region src/ui/alert-dialog/alert-dialog-description.tsx
 const AlertDialogDescription = createContextPart({
 	displayName: "AlertDialogDescription",
@@ -10,7 +7,7 @@ const AlertDialogDescription = createContextPart({
 	useContext: useAlertDialogContext,
 	getProps: (state) => ({ id: state.descriptionId })
 });
-
 //#endregion
 export { AlertDialogDescription };
+
 //# sourceMappingURL=alert-dialog-description.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog-description.js","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-description.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 AlertDialogDescriptionProps extends UIComponentProps<'p', AlertDialogCore.State> {}\n\nexport const AlertDialogDescription = createContextPart<AlertDialogDescriptionProps, AlertDialogCore.State>({\n  displayName: 'AlertDialogDescription',\n  tag: 'p',\n  useContext: useAlertDialogContext,\n  getProps: (state) => ({ id: state.descriptionId }),\n});\n\nexport namespace AlertDialogDescription {\n  export type Props = AlertDialogDescriptionProps;\n  export type State = AlertDialogCore.State;\n}\n"],"mappings":";;;;;;AAUA,MAAa,yBAAyB,kBAAsE;CAC1G,aAAa;CACb,KAAK;CACL,YAAY;CACZ,WAAW,WAAW,EAAE,IAAI,MAAM,eAAe;CAClD,CAAC"}
+{"version":3,"file":"alert-dialog-description.js","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-description.tsx"],"sourcesContent":["import 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 AlertDialogDescriptionProps extends UIComponentProps<'p', AlertDialogCore.State> {}\n\nexport const AlertDialogDescription = createContextPart<AlertDialogDescriptionProps, AlertDialogCore.State>({\n  displayName: 'AlertDialogDescription',\n  tag: 'p',\n  useContext: useAlertDialogContext,\n  getProps: (state) => ({ id: state.descriptionId }),\n});\n\nexport namespace AlertDialogDescription {\n  export type Props = AlertDialogDescriptionProps;\n  export type State = AlertDialogCore.State;\n}\n"],"mappings":";;;AAQA,MAAa,yBAAyB,kBAAsE;CAC1G,aAAa;CACb,KAAK;CACL,YAAY;CACZ,WAAW,WAAW,EAAE,IAAI,MAAM,cAAc;AAClD,CAAC"}

package/dist/dev/ui/alert-dialog/alert-dialog-popup.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-popup.d.ts
 interface AlertDialogPopupProps extends UIComponentProps<'div', AlertDialogCore.State> {}
-declare const AlertDialogPopup: react.ForwardRefExoticComponent<Omit<AlertDialogPopupProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogPopup: import("react").ForwardRefExoticComponent<Omit<AlertDialogPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare namespace AlertDialogPopup {
   type Props = AlertDialogPopupProps;
   type State = AlertDialogCore.State;

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

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog-popup.d.ts","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-popup.tsx"],"mappings":";;;;;UAUiB,qBAAA,SAA8B,gBAAA,QAAwB,eAAA,CAAgB,KAAA;AAAA,cAE1E,gBAAA,EAAgB,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,qBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBA6BZ,gBAAA;EAAA,KACH,KAAA,GAAQ,qBAAA;EAAA,KACR,KAAA,GAAQ,eAAA,CAAgB,KAAA;AAAA"}
+{"version":3,"file":"alert-dialog-popup.d.ts","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-popup.tsx"],"mappings":";;;UAQiB,8BAA8B,wBAAwB,gBAAgB;cAE1E,kCAAgB,0BAAA,KAAA,gDAAA,cAAA;kBA6BZ;OACH,QAAQ;OACR,QAAQ,gBAAgB"}

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

@@ -1,10 +1,7 @@
-'use client';
-
 import { useComposedRefs } from "../../utils/use-composed-refs.js";
-import { useAlertDialogContext } from "./context.js";
 import { renderElement } from "../../utils/use-render.js";
+import { useAlertDialogContext } from "./context.js";
 import { forwardRef, useCallback } from "react";
-
 //#region src/ui/alert-dialog/alert-dialog-popup.tsx
 const AlertDialogPopup = forwardRef(function AlertDialogPopup({ render, className, style, ...elementProps }, forwardedRef) {
 	const { core, dialog, state, stateAttrMap } = useAlertDialogContext();
@@ -26,7 +23,7 @@ const AlertDialogPopup = forwardRef(function AlertDialogPopup({ render, classNam
 		}, elementProps]
 	});
 });
-
 //#endregion
 export { AlertDialogPopup };
+
 //# sourceMappingURL=alert-dialog-popup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog-popup.js","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-popup.tsx"],"sourcesContent":["'use client';\n\nimport type { AlertDialogCore } from '@videojs/core';\nimport { forwardRef, useCallback } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { useAlertDialogContext } from './context';\n\nexport interface AlertDialogPopupProps extends UIComponentProps<'div', AlertDialogCore.State> {}\n\nexport const AlertDialogPopup = forwardRef<HTMLDivElement, AlertDialogPopupProps>(function AlertDialogPopup(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { core, dialog, state, stateAttrMap } = useAlertDialogContext();\n\n  const elementRef = useCallback(\n    (el: HTMLDivElement | null) => {\n      dialog.setElement(el);\n    },\n    [dialog]\n  );\n\n  const composedRef = useComposedRefs(forwardedRef, elementRef);\n\n  if (!state.open) return null;\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: composedRef,\n      props: [{ tabIndex: -1, ...core.getAttrs(state) }, elementProps],\n    }\n  );\n});\n\nexport namespace AlertDialogPopup {\n  export type Props = AlertDialogPopupProps;\n  export type State = AlertDialogCore.State;\n}\n"],"mappings":";;;;;;;;AAYA,MAAa,mBAAmB,WAAkD,SAAS,iBACzF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,QAAQ,OAAO,iBAAiB,uBAAuB;CASrE,MAAM,cAAc,gBAAgB,cAPjB,aAChB,OAA8B;AAC7B,SAAO,WAAW,GAAG;IAEvB,CAAC,OAAO,CACT,CAE4D;AAE7D,KAAI,CAAC,MAAM,KAAM,QAAO;AAExB,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC;GAAE,UAAU;GAAI,GAAG,KAAK,SAAS,MAAM;GAAE,EAAE,aAAa;EACjE,CACF;EACD"}
+{"version":3,"file":"alert-dialog-popup.js","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-popup.tsx"],"sourcesContent":["import type { AlertDialogCore } from '@videojs/core';\nimport { forwardRef, useCallback } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { useAlertDialogContext } from './context';\n\nexport interface AlertDialogPopupProps extends UIComponentProps<'div', AlertDialogCore.State> {}\n\nexport const AlertDialogPopup = forwardRef<HTMLDivElement, AlertDialogPopupProps>(function AlertDialogPopup(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { core, dialog, state, stateAttrMap } = useAlertDialogContext();\n\n  const elementRef = useCallback(\n    (el: HTMLDivElement | null) => {\n      dialog.setElement(el);\n    },\n    [dialog]\n  );\n\n  const composedRef = useComposedRefs(forwardedRef, elementRef);\n\n  if (!state.open) return null;\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: composedRef,\n      props: [{ tabIndex: -1, ...core.getAttrs(state) }, elementProps],\n    }\n  );\n});\n\nexport namespace AlertDialogPopup {\n  export type Props = AlertDialogPopupProps;\n  export type State = AlertDialogCore.State;\n}\n"],"mappings":";;;;;AAUA,MAAa,mBAAmB,WAAkD,SAAS,iBACzF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,QAAQ,OAAO,iBAAiB,sBAAsB;CASpE,MAAM,cAAc,gBAAgB,cAPjB,aAChB,OAA8B;EAC7B,OAAO,WAAW,EAAE;CACtB,GACA,CAAC,MAAM,CAGkD,CAAC;CAE5D,IAAI,CAAC,MAAM,MAAM,OAAO;CAExB,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC;GAAE,UAAU;GAAI,GAAG,KAAK,SAAS,KAAK;EAAE,GAAG,YAAY;CACjE,CACF;AACF,CAAC"}

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

@@ -1,6 +1,5 @@
 import { ReactNode } from "react";
 import { AlertDialogProps } from "@videojs/core";
-
 //#region src/ui/alert-dialog/alert-dialog-root.d.ts
 interface AlertDialogRootProps extends AlertDialogProps {
   /** Called when the open state changes (fires immediately, before animations). */
@@ -9,13 +8,7 @@ interface AlertDialogRootProps extends AlertDialogProps {
   onOpenChangeComplete?: (open: boolean) => void;
   children?: ReactNode;
 }
-declare function AlertDialogRoot({
-  open: controlledOpen,
-  defaultOpen,
-  onOpenChange: onOpenChangeProp,
-  onOpenChangeComplete: onOpenChangeCompleteProp,
-  children
-}: AlertDialogRootProps): ReactNode;
+declare function AlertDialogRoot({ open: controlledOpen, defaultOpen, onOpenChange: onOpenChangeProp, onOpenChangeComplete: onOpenChangeCompleteProp, children }: 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":";;;UAWiB,6BAA6B;;EAE5C,gBAAgB;;EAEhB,wBAAwB;EACxB,WAAW;;iBAGG,kBACd,MAAM,gBACN,aACA,cAAc,kBACd,sBAAsB,0BACtB,YACC,uBAAuB;kBA2DT;OACH,QAAQ"}

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

@@ -1,15 +1,12 @@
-'use client';
-
+import { useLatestRef } from "../../utils/use-latest-ref.js";
 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 { AlertDialogCore, AlertDialogDataAttrs } from "@videojs/core";
-
 //#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());
@@ -29,8 +26,8 @@ function AlertDialogRoot({ open: controlledOpen, defaultOpen = AlertDialogCore.d
 		if (!isControlled && defaultOpen) instance.open();
 		return instance;
 	});
-	const titleId = useSafeId("alert-dialog-title-");
-	const descriptionId = useSafeId("alert-dialog-desc-");
+	const titleId = useSafeId("alert-dialog-title");
+	const descriptionId = useSafeId("alert-dialog-desc");
 	core.setTitleId(titleId);
 	core.setDescriptionId(descriptionId);
 	useEffect(() => {
@@ -53,7 +50,7 @@ function AlertDialogRoot({ open: controlledOpen, defaultOpen = AlertDialogCore.d
 		children
 	});
 }
-
 //#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 { 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":";;;;;;;;;;AAmBA,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,KAAA,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":";;;UAMiB,8BAA8B,uBAAuB,gBAAgB;cAEzE,kCAAgB,0BAAA;kBAOZ;OACH,QAAQ;OACR,QAAQ,gBAAgB"}

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

@@ -1,8 +1,5 @@
-'use client';
-
 import { useAlertDialogContext } from "./context.js";
 import { createContextPart } from "../create-context-part.js";
-
 //#region src/ui/alert-dialog/alert-dialog-title.tsx
 const AlertDialogTitle = createContextPart({
 	displayName: "AlertDialogTitle",
@@ -10,7 +7,7 @@ const AlertDialogTitle = createContextPart({
 	useContext: useAlertDialogContext,
 	getProps: (state) => ({ id: state.titleId })
 });
-
 //#endregion
 export { AlertDialogTitle };
+
 //# sourceMappingURL=alert-dialog-title.js.map

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":["import 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":";;;AAQA,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":";;;UAIiB;EACf,MAAM;EACN,QAAQ;EACR,OAAO,gBAAgB;EACvB,cAAc,eAAa,gBAAgB;;iBAO7B,yBAAyB"}

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

@@ -1,7 +1,4 @@
-'use client';
-
 import { createContext, useContext } from "react";
-
 //#region src/ui/alert-dialog/context.tsx
 const AlertDialogContext = createContext(null);
 const AlertDialogContextProvider = AlertDialogContext.Provider;
@@ -10,7 +7,7 @@ function useAlertDialogContext() {
 	if (!ctx) throw new Error("AlertDialog compound components must be used within an AlertDialog.Root");
 	return ctx;
 }
-
 //#endregion
 export { AlertDialogContextProvider, useAlertDialogContext };
+
 //# sourceMappingURL=context.js.map

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":["import 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":";;AAWA,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.js

@@ -1,4 +1,3 @@
 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, useAlertDialogContext };

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

@@ -4,7 +4,6 @@ import { AlertDialogDescription } from "./alert-dialog-description.js";
 import { AlertDialogPopup } from "./alert-dialog-popup.js";
 import { AlertDialogRoot } from "./alert-dialog-root.js";
 import { AlertDialogTitle } from "./alert-dialog-title.js";
-
 //#region src/ui/alert-dialog/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Close: () => AlertDialogClose,
@@ -13,7 +12,7 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Root: () => AlertDialogRoot,
 	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 { TranslatedRadioOption } from "../hooks/create-radio-options-hook.js";
+import { AudioTrackRadioGroupCore, AudioTrackRadioGroupOption } from "@videojs/core";
+//#region src/ui/audio-track/use-audio-track-options.d.ts
+interface AudioTrackOptionsProps extends AudioTrackRadioGroupCore.Props {}
+type AudioTrackOption = TranslatedRadioOption<AudioTrackRadioGroupOption>;
+interface AudioTrackOptionsResult {
+  state: AudioTrackRadioGroupCore.State;
+  label: string;
+  value: string;
+  selectedLabel: string;
+  options: AudioTrackOption[];
+  disabled: boolean;
+  hidden: 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":";;;UAKiB,+BAA+B,yBAAyB;KAE7D,mBAAmB,sBAAsB;UAEpC;EACf,OAAO,yBAAyB;EAChC;EACA;EACA;EACA,SAAS;EACT;EACA;EACA,WAAW;;;;;;;;iBAgBG,qBAAqB,QAAQ,yBAAyB;kBAMrD;OACH,QAAQ;OACR,SAAS;OACT,SAAS"}

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

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

package/dist/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":["import { AudioTrackRadioGroupCore, type AudioTrackRadioGroupOption } from '@videojs/core';\nimport { selectAudioTrack } from '@videojs/core/dom';\n\nimport { createRadioOptionsHook, type TranslatedRadioOption } from '../hooks/create-radio-options-hook';\n\nexport interface AudioTrackOptionsProps extends AudioTrackRadioGroupCore.Props {}\n\nexport type AudioTrackOption = TranslatedRadioOption<AudioTrackRadioGroupOption>;\n\nexport interface AudioTrackOptionsResult {\n  state: AudioTrackRadioGroupCore.State;\n  label: string;\n  value: string;\n  selectedLabel: string;\n  options: AudioTrackOption[];\n  disabled: boolean;\n  hidden: boolean;\n  setValue: (value: string) => void;\n}\n\nconst useAudioTrackRadioOptions = createRadioOptionsHook({\n  name: 'useAudioTrackOptions',\n  feature: 'audioTrack',\n  selector: selectAudioTrack,\n  createCore: () => new AudioTrackRadioGroupCore(),\n});\n\n/**\n * Create audio track menu options from the player audio track state. Returns\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  return useAudioTrackRadioOptions(props);\n}\n\nexport namespace useAudioTrackOptions {\n  export type Props = AudioTrackOptionsProps;\n  export type Result = AudioTrackOptionsResult;\n  export type Option = AudioTrackOption;\n}\n"],"mappings":";;;;AAoBA,MAAM,4BAA4B,uBAAuB;CACvD,MAAM;CACN,SAAS;CACT,UAAU;CACV,kBAAkB,IAAI,yBAAyB;AACjD,CAAC;;;;;;;AAQD,SAAgB,qBAAqB,OAAgE;CACnG;CAEA,OAAO,0BAA0B,KAAK;AACxC"}

package/dist/dev/ui/audio-track-radio-group/audio-track-radio-group.d.ts

@@ -0,0 +1,43 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { AudioTrackOption, AudioTrackOptionsProps } from "../audio-track/use-audio-track-options.js";
+import { MenuRadioItemProps } from "../menu/menu-radio-item.js";
+import { ReactElement } from "react";
+import { AudioTrackRadioGroupCore } from "@videojs/core";
+//#region src/ui/audio-track-radio-group/audio-track-radio-group.d.ts
+type AudioTrackRadioGroupItemState = AudioTrackOption & {
+  /** Whether this option is the currently enabled audio track. */
+  checked: boolean;
+};
+interface AudioTrackRadioGroupItemProps extends Omit<MenuRadioItemProps, 'ref'> {
+  /** Audio track value represented by the option. */
+  'data-track': string;
+}
+interface AudioTrackRadioGroupProps extends Omit<UIComponentProps<'div', AudioTrackRadioGroupCore.State>, 'children'>, AudioTrackOptionsProps {
+  /** Render one consumer-owned menu radio item for every audio track. */
+  renderItem: (props: AudioTrackRadioGroupItemProps, state: AudioTrackRadioGroupItemState) => ReactElement;
+}
+/**
+ * Renders menu radio options for the player's audio tracks.
+ *
+ * @example
+ * ```tsx
+ * <AudioTrackRadioGroup
+ *   renderItem={(props, item) => (
+ *     <Menu.RadioItem {...props}>
+ *       {item.label}
+ *       <Menu.ItemIndicator checked={item.checked} />
+ *     </Menu.RadioItem>
+ *   )}
+ * />
+ * ```
+ */
+declare const AudioTrackRadioGroup: import("react").ForwardRefExoticComponent<Omit<AudioTrackRadioGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace AudioTrackRadioGroup {
+  type Props = AudioTrackRadioGroupProps;
+  type State = AudioTrackRadioGroupCore.State;
+  type ItemProps = AudioTrackRadioGroupItemProps;
+  type ItemState = AudioTrackRadioGroupItemState;
+}
+//#endregion
+export { AudioTrackRadioGroup, AudioTrackRadioGroupItemProps, AudioTrackRadioGroupItemState, AudioTrackRadioGroupProps };
+//# sourceMappingURL=audio-track-radio-group.d.ts.map

package/dist/dev/ui/audio-track-radio-group/audio-track-radio-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"audio-track-radio-group.d.ts","names":[],"sources":["../../../../src/ui/audio-track-radio-group/audio-track-radio-group.tsx"],"mappings":";;;;;;KAeY,gCAAgC;;EAE1C;;UAGe,sCAAsC,KAAK;;EAE1D;;UAGe,kCACP,KAAK,wBAAwB,yBAAyB,qBAC5D;;EAEF,aAAa,OAAO,+BAA+B,OAAO,kCAAkC;;;;;;;;;;;;;;;;;cAkBjF,sCAAoB,0BAAA,KAAA,oDAAA,cAAA;kBAyDhB;OACH,QAAQ;OACR,QAAQ,yBAAyB;OACjC,YAAY;OACZ,YAAY"}

package/dist/dev/ui/audio-track-radio-group/audio-track-radio-group.js

@@ -0,0 +1,64 @@
+import { useAudioTrackOptions } from "../audio-track/use-audio-track-options.js";
+import { MenuRadioGroup } from "../menu/menu-radio-group.js";
+import { getStateDataAttrs } from "@videojs/core/dom";
+import { Fragment, forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { isFunction } from "@videojs/utils/predicate";
+import { AudioTrackRadioGroupDataAttrs } from "@videojs/core";
+//#region src/ui/audio-track-radio-group/audio-track-radio-group.tsx
+/**
+* Renders menu radio options for the player's audio tracks.
+*
+* @example
+* ```tsx
+* <AudioTrackRadioGroup
+*   renderItem={(props, item) => (
+*     <Menu.RadioItem {...props}>
+*       {item.label}
+*       <Menu.ItemIndicator checked={item.checked} />
+*     </Menu.RadioItem>
+*   )}
+* />
+* ```
+*/
+const AudioTrackRadioGroup = forwardRef(function AudioTrackRadioGroup(componentProps, forwardedRef) {
+	const { renderItem, render, className, style, label, formatTrack, disabled, "aria-label": ariaLabelProp, "aria-labelledby": ariaLabelledBy, ...elementProps } = componentProps;
+	const audioTrack = useAudioTrackOptions({
+		label,
+		formatTrack,
+		disabled
+	});
+	if (!audioTrack) return null;
+	const { state, value, options, setValue } = audioTrack;
+	const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === void 0 ? audioTrack.label : void 0);
+	return /* @__PURE__ */ jsx(MenuRadioGroup, {
+		...getStateDataAttrs(state, AudioTrackRadioGroupDataAttrs),
+		...elementProps,
+		ref: forwardedRef,
+		className: isFunction(className) ? className(state) : className,
+		style: isFunction(style) ? style(state) : style,
+		render: isFunction(render) ? (props) => render(props, state) : render,
+		value,
+		onValueChange: setValue,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		"aria-disabled": state.disabled || void 0,
+		hidden: state.hidden,
+		children: options.map((option) => {
+			const itemState = {
+				...option,
+				checked: option.value === value
+			};
+			return /* @__PURE__ */ jsx(Fragment, { children: renderItem({
+				value: option.value,
+				disabled: option.disabled,
+				"data-track": option.value,
+				children: option.label
+			}, itemState) }, option.value);
+		})
+	});
+});
+//#endregion
+export { AudioTrackRadioGroup };
+
+//# sourceMappingURL=audio-track-radio-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"audio-track-radio-group.js","names":[],"sources":["../../../../src/ui/audio-track-radio-group/audio-track-radio-group.tsx"],"sourcesContent":["import { type AudioTrackRadioGroupCore, AudioTrackRadioGroupDataAttrs } from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { ReactElement } from 'react';\nimport { Fragment, forwardRef } from 'react';\n\nimport type { HTMLProps, UIComponentProps } from '../../utils/types';\nimport {\n  type AudioTrackOption,\n  type AudioTrackOptionsProps,\n  useAudioTrackOptions,\n} from '../audio-track/use-audio-track-options';\nimport { MenuRadioGroup } from '../menu/menu-radio-group';\nimport type { MenuRadioItemProps } from '../menu/menu-radio-item';\n\nexport type AudioTrackRadioGroupItemState = AudioTrackOption & {\n  /** Whether this option is the currently enabled audio track. */\n  checked: boolean;\n};\n\nexport interface AudioTrackRadioGroupItemProps extends Omit<MenuRadioItemProps, 'ref'> {\n  /** Audio track value represented by the option. */\n  'data-track': string;\n}\n\nexport interface AudioTrackRadioGroupProps\n  extends Omit<UIComponentProps<'div', AudioTrackRadioGroupCore.State>, 'children'>,\n    AudioTrackOptionsProps {\n  /** Render one consumer-owned menu radio item for every audio track. */\n  renderItem: (props: AudioTrackRadioGroupItemProps, state: AudioTrackRadioGroupItemState) => ReactElement;\n}\n\n/**\n * Renders menu radio options for the player's audio tracks.\n *\n * @example\n * ```tsx\n * <AudioTrackRadioGroup\n *   renderItem={(props, item) => (\n *     <Menu.RadioItem {...props}>\n *       {item.label}\n *       <Menu.ItemIndicator checked={item.checked} />\n *     </Menu.RadioItem>\n *   )}\n * />\n * ```\n */\nexport const AudioTrackRadioGroup = forwardRef<HTMLDivElement, AudioTrackRadioGroupProps>(\n  function AudioTrackRadioGroup(componentProps, forwardedRef) {\n    const {\n      renderItem,\n      render,\n      className,\n      style,\n      label,\n      formatTrack,\n      disabled,\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledBy,\n      ...elementProps\n    } = componentProps;\n    const audioTrack = useAudioTrackOptions({ label, formatTrack, disabled });\n    if (!audioTrack) return null;\n\n    const { state, value, options, setValue } = audioTrack;\n    const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === undefined ? audioTrack.label : undefined);\n\n    return (\n      <MenuRadioGroup\n        {...getStateDataAttrs(state, AudioTrackRadioGroupDataAttrs)}\n        {...elementProps}\n        ref={forwardedRef}\n        className={isFunction(className) ? className(state) : className}\n        style={isFunction(style) ? style(state) : style}\n        render={isFunction(render) ? (props: HTMLProps) => render(props, state) : render}\n        value={value}\n        onValueChange={setValue}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-disabled={state.disabled || undefined}\n        hidden={state.hidden}\n      >\n        {options.map((option) => {\n          const itemState = { ...option, checked: option.value === value };\n\n          return (\n            <Fragment key={option.value}>\n              {renderItem(\n                {\n                  value: option.value,\n                  disabled: option.disabled,\n                  'data-track': option.value,\n                  children: option.label,\n                },\n                itemState\n              )}\n            </Fragment>\n          );\n        })}\n      </MenuRadioGroup>\n    );\n  }\n);\n\nexport namespace AudioTrackRadioGroup {\n  export type Props = AudioTrackRadioGroupProps;\n  export type State = AudioTrackRadioGroupCore.State;\n  export type ItemProps = AudioTrackRadioGroupItemProps;\n  export type ItemState = AudioTrackRadioGroupItemState;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAa,uBAAuB,WAClC,SAAS,qBAAqB,gBAAgB,cAAc;CAC1D,MAAM,EACJ,YACA,QACA,WACA,OACA,OACA,aACA,UACA,cAAc,eACd,mBAAmB,gBACnB,GAAG,iBACD;CACJ,MAAM,aAAa,qBAAqB;EAAE;EAAO;EAAa;CAAS,CAAC;CACxE,IAAI,CAAC,YAAY,OAAO;CAExB,MAAM,EAAE,OAAO,OAAO,SAAS,aAAa;CAC5C,MAAM,YAAY,kBAAkB,mBAAmB,KAAA,IAAY,WAAW,QAAQ,KAAA;CAEtF,OACE,oBAAC,gBAAD;EACE,GAAI,kBAAkB,OAAO,6BAA6B;EAC1D,GAAI;EACJ,KAAK;EACL,WAAW,WAAW,SAAS,IAAI,UAAU,KAAK,IAAI;EACtD,OAAO,WAAW,KAAK,IAAI,MAAM,KAAK,IAAI;EAC1C,QAAQ,WAAW,MAAM,KAAK,UAAqB,OAAO,OAAO,KAAK,IAAI;EACnE;EACP,eAAe;EACf,cAAY;EACZ,mBAAiB;EACjB,iBAAe,MAAM,YAAY,KAAA;EACjC,QAAQ,MAAM;EAEb,UAAA,QAAQ,KAAK,WAAW;GACvB,MAAM,YAAY;IAAE,GAAG;IAAQ,SAAS,OAAO,UAAU;GAAM;GAE/D,OACE,oBAAC,UAAD,EAAA,UACG,WACC;IACE,OAAO,OAAO;IACd,UAAU,OAAO;IACjB,cAAc,OAAO;IACrB,UAAU,OAAO;GACnB,GACA,SACF,EACQ,GAVK,OAAO,KAUZ;EAEd,CAAC;CACa,CAAA;AAEpB,CACF"}

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

@@ -0,0 +1,2 @@
+import { AudioTrackRadioGroup, AudioTrackRadioGroupItemProps, AudioTrackRadioGroupItemState, AudioTrackRadioGroupProps } from "./audio-track-radio-group.js";
+export { AudioTrackRadioGroup, type AudioTrackRadioGroupItemProps, type AudioTrackRadioGroupItemState, type AudioTrackRadioGroupProps };

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

@@ -0,0 +1,2 @@
+import { AudioTrackRadioGroup } from "./audio-track-radio-group.js";
+export { AudioTrackRadioGroup };

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":";;;;;UAWiB,uBAAA,SACP,gBAAA,QAAwB,sBAAA,CAAuB,KAAA,GACrD,sBAAA,CAAuB,KAAA;;AAF3B;;;;;;;;;;;;;;;AAsBA;;cAAa,kBAAA,EAAkB,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,uBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAoCd,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":";;;UAUiB,gCACP,wBAAwB,uBAAuB,QACrD,uBAAuB;;;;;;;;;;;;;;;;;;;cAoBd,oCAAkB,0BAAA,KAAA,kDAAA,cAAA;kBAqCd;OACH,QAAQ;OACR,QAAQ,uBAAuB"}