@videojs/react 10.0.0-beta.30 → 10.0.0-beta.32

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/error-dialog/context.tsx"],"sourcesContent":["import type { ErrorLike } from '@videojs/media';\nimport { createContext, useContext } from 'react';\n\nexport interface ErrorDialogContextValue {\n  lastError: ErrorLike | null;\n}\n\nconst ErrorDialogContext = createContext<ErrorDialogContextValue | null>(null);\n\nexport const ErrorDialogContextProvider = ErrorDialogContext.Provider;\n\nexport function useErrorDialogContext(): ErrorDialogContextValue {\n  const ctx = useContext(ErrorDialogContext);\n  if (!ctx) throw new Error('ErrorDialog compound components must be used within an ErrorDialog.Root');\n  return ctx;\n}\n"],"mappings":";;AAOA,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"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/error-dialog/context.tsx"],"sourcesContent":["import type { ErrorLike } from '@videojs/media';\nimport { createContext, useContext } from 'react';\n\nexport interface ErrorDialogContextValue {\n  lastError: ErrorLike | null;\n}\n\nconst ErrorDialogContext = createContext<ErrorDialogContextValue | null>(null);\n\nexport const ErrorDialogContextProvider = ErrorDialogContext.Provider;\n\n/** Returns the current error dialog compound-component context. Throws outside `ErrorDialog.Root`. */\nexport function useErrorDialogContext(): ErrorDialogContextValue {\n  const ctx = useContext(ErrorDialogContext);\n  if (!ctx) throw new Error('ErrorDialog compound components must be used within an ErrorDialog.Root');\n\n  return ctx;\n}\n"],"mappings":";;AAOA,MAAM,qBAAqB,cAA8C,IAAI;AAE7E,MAAa,6BAA6B,mBAAmB;;AAG7D,SAAgB,wBAAiD;CAC/D,MAAM,MAAM,WAAW,kBAAkB;CACzC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,yEAAyE;CAEnG,OAAO;AACT"}

package/dist/dev/ui/error-dialog/error-dialog-close.d.ts

@@ -1,11 +1,12 @@
 import { UIComponentProps } from "../../utils/types.js";
-import { AlertDialogCore } from "@videojs/core";
+import { DialogCore } from "@videojs/core";
 //#region src/ui/error-dialog/error-dialog-close.d.ts
-interface ErrorDialogCloseProps extends UIComponentProps<'button', AlertDialogCore.State> {}
+interface ErrorDialogCloseProps extends UIComponentProps<'button', DialogCore.State> {}
+/** Renders a localized button that closes the dialog and dismisses the player error. */
 declare const ErrorDialogClose: import("react").ForwardRefExoticComponent<Omit<ErrorDialogCloseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 declare namespace ErrorDialogClose {
   type Props = ErrorDialogCloseProps;
-  type State = AlertDialogCore.State;
+  type State = DialogCore.State;
 }
 //#endregion
 export { ErrorDialogClose, ErrorDialogCloseProps };

package/dist/dev/ui/error-dialog/error-dialog-close.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"error-dialog-close.d.ts","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-close.tsx"],"mappings":";;;UASiB,8BAA8B,2BAA2B,gBAAgB;cAE7E,kCAAgB,0BAAA,KAAA,gDAAA,cAAA;kBA0BZ;OACH,QAAQ;OACR,QAAQ,gBAAgB"}
+{"version":3,"file":"error-dialog-close.d.ts","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-close.tsx"],"mappings":";;;UASiB,8BAA8B,2BAA2B,WAAW;;cAGxE,kCAAgB,0BAAA,KAAA,gDAAA,cAAA;kBA2BZ;OACH,QAAQ;OACR,QAAQ,WAAW"}

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

@@ -1,13 +1,14 @@
 import { useTranslator } from "../../i18n/context.js";
 import { renderElement } from "../../utils/use-render.js";
-import { useAlertDialogContext } from "../alert-dialog/context.js";
+import { useDialogContext } from "../dialog/context.js";
 import { translateText } from "@videojs/core/i18n";
 import { forwardRef, useCallback } from "react";
 import { getErrorDialogDismissText } from "@videojs/core";
 //#region src/ui/error-dialog/error-dialog-close.tsx
+/** Renders a localized button that closes the dialog and dismisses the player error. */
 const ErrorDialogClose = forwardRef(function ErrorDialogClose({ render, className, style, disabled, children, ...elementProps }, forwardedRef) {
 	const t = useTranslator();
-	const { dialog, state, stateAttrMap } = useAlertDialogContext();
+	const { dialog, state, stateAttrMap } = useDialogContext();
 	const handleClick = useCallback(() => {
 		if (disabled) return;
 		dialog.close();

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

@@ -1 +1 @@
-{"version":3,"file":"error-dialog-close.js","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-close.tsx"],"sourcesContent":["import type { AlertDialogCore } from '@videojs/core';\nimport { getErrorDialogDismissText } from '@videojs/core';\nimport { translateText } from '@videojs/core/i18n';\nimport { forwardRef, type ReactNode, useCallback } from 'react';\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useAlertDialogContext } from '../alert-dialog/context';\n\nexport interface ErrorDialogCloseProps extends UIComponentProps<'button', AlertDialogCore.State> {}\n\nexport const ErrorDialogClose = forwardRef<HTMLButtonElement, ErrorDialogCloseProps>(function ErrorDialogClose(\n  { render, className, style, disabled, children, ...elementProps },\n  forwardedRef\n) {\n  const t = useTranslator();\n  const { dialog, state, stateAttrMap } = useAlertDialogContext();\n\n  const handleClick = useCallback(() => {\n    if (disabled) return;\n    dialog.close();\n  }, [dialog, disabled]);\n\n  const content: ReactNode = children ?? translateText(getErrorDialogDismissText(), t);\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: forwardedRef,\n      props: [{ type: 'button' as const, disabled, onClick: handleClick, children: content }, elementProps],\n    }\n  );\n});\n\nexport namespace ErrorDialogClose {\n  export type Props = ErrorDialogCloseProps;\n  export type State = AlertDialogCore.State;\n}\n"],"mappings":";;;;;;;AAWA,MAAa,mBAAmB,WAAqD,SAAS,iBAC5F,EAAE,QAAQ,WAAW,OAAO,UAAU,UAAU,GAAG,gBACnD,cACA;CACA,MAAM,IAAI,cAAc;CACxB,MAAM,EAAE,QAAQ,OAAO,iBAAiB,sBAAsB;CAE9D,MAAM,cAAc,kBAAkB;EACpC,IAAI,UAAU;EACd,OAAO,MAAM;CACf,GAAG,CAAC,QAAQ,QAAQ,CAAC;CAErB,MAAM,UAAqB,YAAY,cAAc,0BAA0B,GAAG,CAAC;CAEnF,OAAO,cACL,UACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC;GAAE,MAAM;GAAmB;GAAU,SAAS;GAAa,UAAU;EAAQ,GAAG,YAAY;CACtG,CACF;AACF,CAAC"}
+{"version":3,"file":"error-dialog-close.js","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-close.tsx"],"sourcesContent":["import { type DialogCore, getErrorDialogDismissText } from '@videojs/core';\nimport { translateText } from '@videojs/core/i18n';\nimport { forwardRef, type ReactNode, useCallback } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useDialogContext } from '../dialog/context';\n\nexport interface ErrorDialogCloseProps extends UIComponentProps<'button', DialogCore.State> {}\n\n/** Renders a localized button that closes the dialog and dismisses the player error. */\nexport const ErrorDialogClose = forwardRef<HTMLButtonElement, ErrorDialogCloseProps>(function ErrorDialogClose(\n  { render, className, style, disabled, children, ...elementProps },\n  forwardedRef\n) {\n  const t = useTranslator();\n  const { dialog, state, stateAttrMap } = useDialogContext();\n\n  const handleClick = useCallback(() => {\n    if (disabled) return;\n\n    dialog.close();\n  }, [dialog, disabled]);\n\n  const content: ReactNode = children ?? translateText(getErrorDialogDismissText(), t);\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: forwardedRef,\n      props: [{ type: 'button' as const, disabled, onClick: handleClick, children: content }, elementProps],\n    }\n  );\n});\n\nexport namespace ErrorDialogClose {\n  export type Props = ErrorDialogCloseProps;\n  export type State = DialogCore.State;\n}\n"],"mappings":";;;;;;;;AAYA,MAAa,mBAAmB,WAAqD,SAAS,iBAC5F,EAAE,QAAQ,WAAW,OAAO,UAAU,UAAU,GAAG,gBACnD,cACA;CACA,MAAM,IAAI,cAAc;CACxB,MAAM,EAAE,QAAQ,OAAO,iBAAiB,iBAAiB;CAEzD,MAAM,cAAc,kBAAkB;EACpC,IAAI,UAAU;EAEd,OAAO,MAAM;CACf,GAAG,CAAC,QAAQ,QAAQ,CAAC;CAErB,MAAM,UAAqB,YAAY,cAAc,0BAA0B,GAAG,CAAC;CAEnF,OAAO,cACL,UACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC;GAAE,MAAM;GAAmB;GAAU,SAAS;GAAa,UAAU;EAAQ,GAAG,YAAY;CACtG,CACF;AACF,CAAC"}

package/dist/dev/ui/error-dialog/error-dialog-description.d.ts

@@ -1,11 +1,12 @@
 import { UIComponentProps } from "../../utils/types.js";
-import { AlertDialogCore } from "@videojs/core";
+import { DialogCore } from "@videojs/core";
 //#region src/ui/error-dialog/error-dialog-description.d.ts
-interface ErrorDialogDescriptionProps extends UIComponentProps<'p', AlertDialogCore.State> {}
+interface ErrorDialogDescriptionProps extends UIComponentProps<'p', DialogCore.State> {}
+/** Renders the localized playback error message, or authored children when provided. */
 declare const ErrorDialogDescription: import("react").ForwardRefExoticComponent<Omit<ErrorDialogDescriptionProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
 declare namespace ErrorDialogDescription {
   type Props = ErrorDialogDescriptionProps;
-  type State = AlertDialogCore.State;
+  type State = DialogCore.State;
 }
 //#endregion
 export { ErrorDialogDescription, ErrorDialogDescriptionProps };

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

@@ -1 +1 @@
-{"version":3,"file":"error-dialog-description.d.ts","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-description.tsx"],"mappings":";;;UAUiB,oCAAoC,sBAAsB,gBAAgB;cAE9E,wCAAsB,0BAAA,KAAA,sDAAA,cAAA;kBAqBlB;OACH,QAAQ;OACR,QAAQ,gBAAgB"}
+{"version":3,"file":"error-dialog-description.d.ts","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-description.tsx"],"mappings":";;;UAUiB,oCAAoC,sBAAsB,WAAW;;cAGzE,wCAAsB,0BAAA,KAAA,sDAAA,cAAA;kBAqBlB;OACH,QAAQ;OACR,QAAQ,WAAW"}

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

@@ -1,14 +1,15 @@
 import { useTranslator } from "../../i18n/context.js";
 import { renderElement } from "../../utils/use-render.js";
-import { useAlertDialogContext } from "../alert-dialog/context.js";
+import { useDialogContext } from "../dialog/context.js";
 import { useErrorDialogContext } from "./context.js";
 import { translateText } from "@videojs/core/i18n";
 import { forwardRef } from "react";
 import { resolveErrorDialogDescription } from "@videojs/core";
 //#region src/ui/error-dialog/error-dialog-description.tsx
+/** Renders the localized playback error message, or authored children when provided. */
 const ErrorDialogDescription = forwardRef(function ErrorDialogDescription({ render, className, style, children, ...elementProps }, forwardedRef) {
 	const t = useTranslator();
-	const { state, stateAttrMap } = useAlertDialogContext();
+	const { state, stateAttrMap } = useDialogContext();
 	const { lastError } = useErrorDialogContext();
 	const description = resolveErrorDialogDescription(lastError);
 	const content = children ?? translateText(description, t);

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

@@ -1 +1 @@
-{"version":3,"file":"error-dialog-description.js","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-description.tsx"],"sourcesContent":["import type { AlertDialogCore } from '@videojs/core';\nimport { resolveErrorDialogDescription } from '@videojs/core';\nimport { translateText } from '@videojs/core/i18n';\nimport { forwardRef, type ReactNode } from 'react';\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useAlertDialogContext } from '../alert-dialog/context';\nimport { useErrorDialogContext } from './context';\n\nexport interface ErrorDialogDescriptionProps extends UIComponentProps<'p', AlertDialogCore.State> {}\n\nexport const ErrorDialogDescription = forwardRef<HTMLParagraphElement, ErrorDialogDescriptionProps>(\n  function ErrorDialogDescription({ render, className, style, children, ...elementProps }, forwardedRef) {\n    const t = useTranslator();\n    const { state, stateAttrMap } = useAlertDialogContext();\n    const { lastError } = useErrorDialogContext();\n    const description = resolveErrorDialogDescription(lastError);\n    const content: ReactNode = children ?? translateText(description, t);\n\n    return renderElement(\n      'p',\n      { render, className, style },\n      {\n        state,\n        stateAttrMap,\n        ref: forwardedRef,\n        props: [{ id: state.descriptionId, children: content }, elementProps],\n      }\n    );\n  }\n);\n\nexport namespace ErrorDialogDescription {\n  export type Props = ErrorDialogDescriptionProps;\n  export type State = AlertDialogCore.State;\n}\n"],"mappings":";;;;;;;;AAYA,MAAa,yBAAyB,WACpC,SAAS,uBAAuB,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBAAgB,cAAc;CACrG,MAAM,IAAI,cAAc;CACxB,MAAM,EAAE,OAAO,iBAAiB,sBAAsB;CACtD,MAAM,EAAE,cAAc,sBAAsB;CAC5C,MAAM,cAAc,8BAA8B,SAAS;CAC3D,MAAM,UAAqB,YAAY,cAAc,aAAa,CAAC;CAEnE,OAAO,cACL,KACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC;GAAE,IAAI,MAAM;GAAe,UAAU;EAAQ,GAAG,YAAY;CACtE,CACF;AACF,CACF"}
+{"version":3,"file":"error-dialog-description.js","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-description.tsx"],"sourcesContent":["import { type DialogCore, resolveErrorDialogDescription } from '@videojs/core';\nimport { translateText } from '@videojs/core/i18n';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useDialogContext } from '../dialog/context';\nimport { useErrorDialogContext } from './context';\n\nexport interface ErrorDialogDescriptionProps extends UIComponentProps<'p', DialogCore.State> {}\n\n/** Renders the localized playback error message, or authored children when provided. */\nexport const ErrorDialogDescription = forwardRef<HTMLParagraphElement, ErrorDialogDescriptionProps>(\n  function ErrorDialogDescription({ render, className, style, children, ...elementProps }, forwardedRef) {\n    const t = useTranslator();\n    const { state, stateAttrMap } = useDialogContext();\n    const { lastError } = useErrorDialogContext();\n    const description = resolveErrorDialogDescription(lastError);\n    const content: ReactNode = children ?? translateText(description, t);\n\n    return renderElement(\n      'p',\n      { render, className, style },\n      {\n        state,\n        stateAttrMap,\n        ref: forwardedRef,\n        props: [{ id: state.descriptionId, children: content }, elementProps],\n      }\n    );\n  }\n);\n\nexport namespace ErrorDialogDescription {\n  export type Props = ErrorDialogDescriptionProps;\n  export type State = DialogCore.State;\n}\n"],"mappings":";;;;;;;;;AAaA,MAAa,yBAAyB,WACpC,SAAS,uBAAuB,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBAAgB,cAAc;CACrG,MAAM,IAAI,cAAc;CACxB,MAAM,EAAE,OAAO,iBAAiB,iBAAiB;CACjD,MAAM,EAAE,cAAc,sBAAsB;CAC5C,MAAM,cAAc,8BAA8B,SAAS;CAC3D,MAAM,UAAqB,YAAY,cAAc,aAAa,CAAC;CAEnE,OAAO,cACL,KACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC;GAAE,IAAI,MAAM;GAAe,UAAU;EAAQ,GAAG,YAAY;CACtE,CACF;AACF,CACF"}

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

@@ -3,6 +3,7 @@ import { ReactNode } from "react";
 interface ErrorDialogRootProps {
   children?: ReactNode;
 }
+/** Opens from player error state and provides it to the shared dialog parts. */
 declare function ErrorDialogRoot({ children }: ErrorDialogRootProps): ReactNode;
 declare namespace ErrorDialogRoot {
   type Props = ErrorDialogRootProps;

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

@@ -1 +1 @@
-{"version":3,"file":"error-dialog-root.d.ts","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-root.tsx"],"mappings":";;UAaiB;EACf,WAAW;;iBAGG,kBAAkB,YAAY,uBAAuB;kBAsDpD;OACH,QAAQ"}
+{"version":3,"file":"error-dialog-root.d.ts","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-root.tsx"],"mappings":";;UAWiB;EACf,WAAW;;;iBAIG,kBAAkB,YAAY,uBAAuB;kBA8BpD;OACH,QAAQ"}

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

@@ -1,55 +1,40 @@
 import { usePlayer } from "../../player/context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
-import { useDestroy } from "../../utils/use-destroy.js";
-import { AlertDialogContextProvider } from "../alert-dialog/context.js";
-import { useSafeId } from "../../utils/use-safe-id.js";
+import { DialogContextProvider } from "../dialog/context.js";
+import { useDialogRoot } from "../dialog/use-dialog-root.js";
 import { ErrorDialogContextProvider } from "./context.js";
-import { createAlertDialog, createTransition, selectError } from "@videojs/core/dom";
-import { useSnapshot } from "@videojs/store/react";
-import { useEffect, useRef, useState } from "react";
+import { selectError } from "@videojs/core/dom";
+import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { AlertDialogDataAttrs, ErrorDialogCore } from "@videojs/core";
+import { ErrorDialogCore, ErrorDialogDataAttrs } from "@videojs/core";
 //#region src/ui/error-dialog/error-dialog-root.tsx
+/** Opens from player error state and provides it to the shared dialog parts. */
 function ErrorDialogRoot({ children }) {
-	const [core] = useState(() => new ErrorDialogCore());
 	const errorState = usePlayer(selectError);
 	const lastError = useRef(errorState?.error ?? null);
 	if (errorState?.error) lastError.current = errorState.error;
 	const errorStateRef = useLatestRef(errorState);
-	const [dialog] = useState(() => createAlertDialog({
-		transition: createTransition(),
-		onOpenChange: (nextOpen) => {
+	const dialogContext = useDialogRoot({
+		open: Boolean(errorState?.error),
+		onOpenChange(nextOpen) {
 			if (!nextOpen) errorStateRef.current?.dismissError();
-		}
-	}));
-	const titleId = useSafeId("error-dialog-title");
-	const descriptionId = useSafeId("error-dialog-desc");
-	core.setTitleId(titleId);
-	core.setDescriptionId(descriptionId);
-	useEffect(() => {
-		const hasError = Boolean(errorState?.error);
-		const { active: isOpen } = dialog.input.current;
-		if (hasError && !isOpen) dialog.open();
-		else if (!hasError && isOpen) dialog.close();
-	}, [errorState?.error, dialog]);
-	useDestroy(dialog);
-	const input = useSnapshot(dialog.input);
-	core.setInput(input);
-	const state = core.getState();
+		},
+		coreFactory: createErrorDialogCore,
+		stateAttrMap: ErrorDialogDataAttrs,
+		idPrefix: "error-dialog"
+	});
 	if (!errorState) return null;
 	return /* @__PURE__ */ jsx(ErrorDialogContextProvider, {
 		value: { lastError: lastError.current },
-		children: /* @__PURE__ */ jsx(AlertDialogContextProvider, {
-			value: {
-				core,
-				dialog,
-				state,
-				stateAttrMap: AlertDialogDataAttrs
-			},
+		children: /* @__PURE__ */ jsx(DialogContextProvider, {
+			value: dialogContext,
 			children
 		})
 	});
 }
+function createErrorDialogCore() {
+	return new ErrorDialogCore();
+}
 //#endregion
 export { ErrorDialogRoot };
 

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

@@ -1 +1 @@
-{"version":3,"file":"error-dialog-root.js","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-root.tsx"],"sourcesContent":["import { AlertDialogDataAttrs, ErrorDialogCore } from '@videojs/core';\nimport { createAlertDialog, createTransition, selectError } from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport type { ReactNode } from 'react';\nimport { useEffect, useRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { AlertDialogContextProvider } from '../alert-dialog/context';\nimport { ErrorDialogContextProvider } from './context';\n\nexport interface ErrorDialogRootProps {\n  children?: ReactNode;\n}\n\nexport function ErrorDialogRoot({ children }: ErrorDialogRootProps): ReactNode {\n  const [core] = useState(() => new ErrorDialogCore());\n  const errorState = usePlayer(selectError);\n  const lastError = useRef(errorState?.error ?? null);\n\n  if (errorState?.error) lastError.current = errorState.error;\n\n  const errorStateRef = useLatestRef(errorState);\n\n  const [dialog] = useState(() =>\n    createAlertDialog({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean) => {\n        if (!nextOpen) {\n          errorStateRef.current?.dismissError();\n        }\n      },\n    })\n  );\n\n  const titleId = useSafeId('error-dialog-title');\n  const descriptionId = useSafeId('error-dialog-desc');\n\n  core.setTitleId(titleId);\n  core.setDescriptionId(descriptionId);\n\n  useEffect(() => {\n    const hasError = Boolean(errorState?.error);\n    const { active: isOpen } = dialog.input.current;\n\n    if (hasError && !isOpen) {\n      dialog.open();\n    } else if (!hasError && isOpen) {\n      dialog.close();\n    }\n  }, [errorState?.error, dialog]);\n\n  useDestroy(dialog);\n\n  const input = useSnapshot(dialog.input);\n  core.setInput(input);\n  const state = core.getState();\n\n  if (!errorState) return null;\n\n  return (\n    <ErrorDialogContextProvider value={{ lastError: lastError.current }}>\n      <AlertDialogContextProvider value={{ core, dialog, state, stateAttrMap: AlertDialogDataAttrs }}>\n        {children}\n      </AlertDialogContextProvider>\n    </ErrorDialogContextProvider>\n  );\n}\n\nexport namespace ErrorDialogRoot {\n  export type Props = ErrorDialogRootProps;\n}\n"],"mappings":";;;;;;;;;;;;AAiBA,SAAgB,gBAAgB,EAAE,YAA6C;CAC7E,MAAM,CAAC,QAAQ,eAAe,IAAI,gBAAgB,CAAC;CACnD,MAAM,aAAa,UAAU,WAAW;CACxC,MAAM,YAAY,OAAO,YAAY,SAAS,IAAI;CAElD,IAAI,YAAY,OAAO,UAAU,UAAU,WAAW;CAEtD,MAAM,gBAAgB,aAAa,UAAU;CAE7C,MAAM,CAAC,UAAU,eACf,kBAAkB;EAChB,YAAY,iBAAiB;EAC7B,eAAe,aAAsB;GACnC,IAAI,CAAC,UACH,cAAc,SAAS,aAAa;EAExC;CACF,CAAC,CACH;CAEA,MAAM,UAAU,UAAU,oBAAoB;CAC9C,MAAM,gBAAgB,UAAU,mBAAmB;CAEnD,KAAK,WAAW,OAAO;CACvB,KAAK,iBAAiB,aAAa;CAEnC,gBAAgB;EACd,MAAM,WAAW,QAAQ,YAAY,KAAK;EAC1C,MAAM,EAAE,QAAQ,WAAW,OAAO,MAAM;EAExC,IAAI,YAAY,CAAC,QACf,OAAO,KAAK;OACP,IAAI,CAAC,YAAY,QACtB,OAAO,MAAM;CAEjB,GAAG,CAAC,YAAY,OAAO,MAAM,CAAC;CAE9B,WAAW,MAAM;CAEjB,MAAM,QAAQ,YAAY,OAAO,KAAK;CACtC,KAAK,SAAS,KAAK;CACnB,MAAM,QAAQ,KAAK,SAAS;CAE5B,IAAI,CAAC,YAAY,OAAO;CAExB,OACE,oBAAC,4BAAD;EAA4B,OAAO,EAAE,WAAW,UAAU,QAAQ;EAChE,UAAA,oBAAC,4BAAD;GAA4B,OAAO;IAAE;IAAM;IAAQ;IAAO,cAAc;GAAqB;GAC1F;EACyB,CAAA;CACF,CAAA;AAEhC"}
+{"version":3,"file":"error-dialog-root.js","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-root.tsx"],"sourcesContent":["import { ErrorDialogCore, ErrorDialogDataAttrs } from '@videojs/core';\nimport { selectError } from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { useRef } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { DialogContextProvider } from '../dialog/context';\nimport { useDialogRoot } from '../dialog/use-dialog-root';\nimport { ErrorDialogContextProvider } from './context';\n\nexport interface ErrorDialogRootProps {\n  children?: ReactNode;\n}\n\n/** Opens from player error state and provides it to the shared dialog parts. */\nexport function ErrorDialogRoot({ children }: ErrorDialogRootProps): ReactNode {\n  const errorState = usePlayer(selectError);\n  const lastError = useRef(errorState?.error ?? null);\n\n  if (errorState?.error) lastError.current = errorState.error;\n\n  const errorStateRef = useLatestRef(errorState);\n  const dialogContext = useDialogRoot({\n    open: Boolean(errorState?.error),\n    onOpenChange(nextOpen) {\n      if (!nextOpen) errorStateRef.current?.dismissError();\n    },\n    coreFactory: createErrorDialogCore,\n    stateAttrMap: ErrorDialogDataAttrs,\n    idPrefix: 'error-dialog',\n  });\n\n  if (!errorState) return null;\n\n  return (\n    <ErrorDialogContextProvider value={{ lastError: lastError.current }}>\n      <DialogContextProvider value={dialogContext}>{children}</DialogContextProvider>\n    </ErrorDialogContextProvider>\n  );\n}\n\nfunction createErrorDialogCore(): ErrorDialogCore {\n  return new ErrorDialogCore();\n}\n\nexport namespace ErrorDialogRoot {\n  export type Props = ErrorDialogRootProps;\n}\n"],"mappings":";;;;;;;;;;;AAgBA,SAAgB,gBAAgB,EAAE,YAA6C;CAC7E,MAAM,aAAa,UAAU,WAAW;CACxC,MAAM,YAAY,OAAO,YAAY,SAAS,IAAI;CAElD,IAAI,YAAY,OAAO,UAAU,UAAU,WAAW;CAEtD,MAAM,gBAAgB,aAAa,UAAU;CAC7C,MAAM,gBAAgB,cAAc;EAClC,MAAM,QAAQ,YAAY,KAAK;EAC/B,aAAa,UAAU;GACrB,IAAI,CAAC,UAAU,cAAc,SAAS,aAAa;EACrD;EACA,aAAa;EACb,cAAc;EACd,UAAU;CACZ,CAAC;CAED,IAAI,CAAC,YAAY,OAAO;CAExB,OACE,oBAAC,4BAAD;EAA4B,OAAO,EAAE,WAAW,UAAU,QAAQ;EAChE,UAAA,oBAAC,uBAAD;GAAuB,OAAO;GAAgB;EAAgC,CAAA;CACpD,CAAA;AAEhC;AAEA,SAAS,wBAAyC;CAChD,OAAO,IAAI,gBAAgB;AAC7B"}

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

@@ -1,11 +1,12 @@
 import { UIComponentProps } from "../../utils/types.js";
-import { AlertDialogCore } from "@videojs/core";
+import { DialogCore } from "@videojs/core";
 //#region src/ui/error-dialog/error-dialog-title.d.ts
-interface ErrorDialogTitleProps extends UIComponentProps<'h2', AlertDialogCore.State> {}
+interface ErrorDialogTitleProps extends UIComponentProps<'h2', DialogCore.State> {}
+/** Renders the localized error dialog heading, or authored children when provided. */
 declare const ErrorDialogTitle: import("react").ForwardRefExoticComponent<Omit<ErrorDialogTitleProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
 declare namespace ErrorDialogTitle {
   type Props = ErrorDialogTitleProps;
-  type State = AlertDialogCore.State;
+  type State = DialogCore.State;
 }
 //#endregion
 export { ErrorDialogTitle, ErrorDialogTitleProps };

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

@@ -1 +1 @@
-{"version":3,"file":"error-dialog-title.d.ts","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-title.tsx"],"mappings":";;;UASiB,8BAA8B,uBAAuB,gBAAgB;cAEzE,kCAAgB,0BAAA,KAAA,gDAAA,cAAA;kBAoBZ;OACH,QAAQ;OACR,QAAQ,gBAAgB"}
+{"version":3,"file":"error-dialog-title.d.ts","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-title.tsx"],"mappings":";;;UASiB,8BAA8B,uBAAuB,WAAW;;cAGpE,kCAAgB,0BAAA,KAAA,gDAAA,cAAA;kBAoBZ;OACH,QAAQ;OACR,QAAQ,WAAW"}

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

@@ -1,13 +1,14 @@
 import { useTranslator } from "../../i18n/context.js";
 import { renderElement } from "../../utils/use-render.js";
-import { useAlertDialogContext } from "../alert-dialog/context.js";
+import { useDialogContext } from "../dialog/context.js";
 import { translateText } from "@videojs/core/i18n";
 import { forwardRef } from "react";
 import { getErrorDialogTitleText } from "@videojs/core";
 //#region src/ui/error-dialog/error-dialog-title.tsx
+/** Renders the localized error dialog heading, or authored children when provided. */
 const ErrorDialogTitle = forwardRef(function ErrorDialogTitle({ render, className, style, children, ...elementProps }, forwardedRef) {
 	const t = useTranslator();
-	const { state, stateAttrMap } = useAlertDialogContext();
+	const { state, stateAttrMap } = useDialogContext();
 	const content = children ?? translateText(getErrorDialogTitleText(), t);
 	return renderElement("h2", {
 		render,

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

@@ -1 +1 @@
-{"version":3,"file":"error-dialog-title.js","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-title.tsx"],"sourcesContent":["import type { AlertDialogCore } from '@videojs/core';\nimport { getErrorDialogTitleText } from '@videojs/core';\nimport { translateText } from '@videojs/core/i18n';\nimport { forwardRef, type ReactNode } from 'react';\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useAlertDialogContext } from '../alert-dialog/context';\n\nexport interface ErrorDialogTitleProps extends UIComponentProps<'h2', AlertDialogCore.State> {}\n\nexport const ErrorDialogTitle = forwardRef<HTMLHeadingElement, ErrorDialogTitleProps>(function ErrorDialogTitle(\n  { render, className, style, children, ...elementProps },\n  forwardedRef\n) {\n  const t = useTranslator();\n  const { state, stateAttrMap } = useAlertDialogContext();\n  const content: ReactNode = children ?? translateText(getErrorDialogTitleText(), t);\n\n  return renderElement(\n    'h2',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: forwardedRef,\n      props: [{ id: state.titleId, children: content }, elementProps],\n    }\n  );\n});\n\nexport namespace ErrorDialogTitle {\n  export type Props = ErrorDialogTitleProps;\n  export type State = AlertDialogCore.State;\n}\n"],"mappings":";;;;;;;AAWA,MAAa,mBAAmB,WAAsD,SAAS,iBAC7F,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBACzC,cACA;CACA,MAAM,IAAI,cAAc;CACxB,MAAM,EAAE,OAAO,iBAAiB,sBAAsB;CACtD,MAAM,UAAqB,YAAY,cAAc,wBAAwB,GAAG,CAAC;CAEjF,OAAO,cACL,MACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC;GAAE,IAAI,MAAM;GAAS,UAAU;EAAQ,GAAG,YAAY;CAChE,CACF;AACF,CAAC"}
+{"version":3,"file":"error-dialog-title.js","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-title.tsx"],"sourcesContent":["import { type DialogCore, getErrorDialogTitleText } from '@videojs/core';\nimport { translateText } from '@videojs/core/i18n';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useDialogContext } from '../dialog/context';\n\nexport interface ErrorDialogTitleProps extends UIComponentProps<'h2', DialogCore.State> {}\n\n/** Renders the localized error dialog heading, or authored children when provided. */\nexport const ErrorDialogTitle = forwardRef<HTMLHeadingElement, ErrorDialogTitleProps>(function ErrorDialogTitle(\n  { render, className, style, children, ...elementProps },\n  forwardedRef\n) {\n  const t = useTranslator();\n  const { state, stateAttrMap } = useDialogContext();\n  const content: ReactNode = children ?? translateText(getErrorDialogTitleText(), t);\n\n  return renderElement(\n    'h2',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: forwardedRef,\n      props: [{ id: state.titleId, children: content }, elementProps],\n    }\n  );\n});\n\nexport namespace ErrorDialogTitle {\n  export type Props = ErrorDialogTitleProps;\n  export type State = DialogCore.State;\n}\n"],"mappings":";;;;;;;;AAYA,MAAa,mBAAmB,WAAsD,SAAS,iBAC7F,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBACzC,cACA;CACA,MAAM,IAAI,cAAc;CACxB,MAAM,EAAE,OAAO,iBAAiB,iBAAiB;CACjD,MAAM,UAAqB,YAAY,cAAc,wBAAwB,GAAG,CAAC;CAEjF,OAAO,cACL,MACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC;GAAE,IAAI,MAAM;GAAS,UAAU;EAAQ,GAAG,YAAY;CAChE,CACF;AACF,CAAC"}

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

@@ -1,11 +1,13 @@
-import { AlertDialogPopup, AlertDialogPopupProps } from "../alert-dialog/alert-dialog-popup.js";
+import { DialogBackdrop, DialogBackdropProps } from "../dialog/dialog-backdrop.js";
+import { DialogPopup, DialogPopupProps } from "../dialog/dialog-popup.js";
+import "../dialog/index.parts.js";
 import { ErrorDialogClose, ErrorDialogCloseProps } from "./error-dialog-close.js";
 import { ErrorDialogDescription, ErrorDialogDescriptionProps } from "./error-dialog-description.js";
 import { ErrorDialogRoot, ErrorDialogRootProps } from "./error-dialog-root.js";
 import { ErrorDialogTitle, ErrorDialogTitleProps } from "./error-dialog-title.js";
 declare namespace index_parts_d_exports {
-  export { ErrorDialogClose as Close, ErrorDialogCloseProps as CloseProps, ErrorDialogDescription as Description, ErrorDialogDescriptionProps as DescriptionProps, AlertDialogPopup as Popup, AlertDialogPopupProps as PopupProps, ErrorDialogRoot as Root, ErrorDialogRootProps as RootProps, ErrorDialogTitle as Title, ErrorDialogTitleProps as TitleProps };
+  export { DialogBackdrop as Backdrop, DialogBackdropProps as BackdropProps, ErrorDialogClose as Close, ErrorDialogCloseProps as CloseProps, ErrorDialogDescription as Description, ErrorDialogDescriptionProps as DescriptionProps, DialogPopup as Popup, DialogPopupProps as PopupProps, ErrorDialogRoot as Root, ErrorDialogRootProps as RootProps, ErrorDialogTitle as Title, ErrorDialogTitleProps as TitleProps };
 }
 //#endregion
-export { ErrorDialogClose as Close, type ErrorDialogCloseProps as CloseProps, ErrorDialogDescription as Description, type ErrorDialogDescriptionProps as DescriptionProps, AlertDialogPopup as Popup, type AlertDialogPopupProps as PopupProps, ErrorDialogRoot as Root, type ErrorDialogRootProps as RootProps, ErrorDialogTitle as Title, type ErrorDialogTitleProps as TitleProps, index_parts_d_exports };
+export { DialogBackdrop as Backdrop, type DialogBackdropProps as BackdropProps, ErrorDialogClose as Close, type ErrorDialogCloseProps as CloseProps, ErrorDialogDescription as Description, type ErrorDialogDescriptionProps as DescriptionProps, DialogPopup as Popup, type DialogPopupProps as PopupProps, ErrorDialogRoot as Root, type ErrorDialogRootProps as RootProps, ErrorDialogTitle as Title, type ErrorDialogTitleProps as TitleProps, index_parts_d_exports };
 //# sourceMappingURL=index.parts.d.ts.map

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

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

package/dist/dev/ui/error-dialog/index.parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/error-dialog/index.parts.ts"],"sourcesContent":["export {\n  AlertDialogPopup as Popup,\n  type AlertDialogPopupProps as PopupProps,\n} from '../alert-dialog/alert-dialog-popup';\nexport { ErrorDialogClose as Close, type ErrorDialogCloseProps as CloseProps } from './error-dialog-close';\nexport {\n  ErrorDialogDescription as Description,\n  type ErrorDialogDescriptionProps as DescriptionProps,\n} from './error-dialog-description';\nexport { ErrorDialogRoot as Root, type ErrorDialogRootProps as RootProps } from './error-dialog-root';\nexport { ErrorDialogTitle as Title, type ErrorDialogTitleProps as TitleProps } from './error-dialog-title';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/error-dialog/index.parts.ts"],"sourcesContent":["export { Backdrop, type BackdropProps, Popup, type PopupProps } from '../dialog/index.parts';\nexport { ErrorDialogClose as Close, type ErrorDialogCloseProps as CloseProps } from './error-dialog-close';\nexport {\n  ErrorDialogDescription as Description,\n  type ErrorDialogDescriptionProps as DescriptionProps,\n} from './error-dialog-description';\nexport { ErrorDialogRoot as Root, type ErrorDialogRootProps as RootProps } from './error-dialog-root';\nexport { ErrorDialogTitle as Title, type ErrorDialogTitleProps as TitleProps } from './error-dialog-title';\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"fullscreen-button.d.ts","names":[],"sources":["../../../../src/ui/fullscreen-button/fullscreen-button.tsx"],"mappings":";;;UAMiB,8BACP,2BAA2B,qBAAqB,QACtD,qBAAqB;;cAGZ,kCAAgB,0BAAA,wCAAA,cAAA;kBAUZ;OACH,QAAQ;OACR,QAAQ,qBAAqB"}
+{"version":3,"file":"fullscreen-button.d.ts","names":[],"sources":["../../../../src/ui/fullscreen-button/fullscreen-button.tsx"],"mappings":";;;UAMiB,8BACP,2BAA2B,qBAAqB,QAAQ,qBAAqB;;cAG1E,kCAAgB,0BAAA,wCAAA,cAAA;kBAUZ;OACH,QAAQ;OACR,QAAQ,qBAAqB"}

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

@@ -1 +1 @@
-{"version":3,"file":"fullscreen-button.js","names":[],"sources":["../../../../src/ui/fullscreen-button/fullscreen-button.tsx"],"sourcesContent":["import { FullscreenButtonCore, FullscreenButtonDataAttrs } from '@videojs/core';\nimport { selectFullscreen } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface FullscreenButtonProps\n  extends UIComponentProps<'button', FullscreenButtonCore.State>,\n    FullscreenButtonCore.Props {}\n\n/** A button that toggles fullscreen. */\nexport const FullscreenButton = createMediaButton<FullscreenButtonCore, FullscreenButtonProps>({\n  displayName: 'FullscreenButton',\n  core: FullscreenButtonCore,\n  stateAttrMap: FullscreenButtonDataAttrs,\n  selector: selectFullscreen,\n  action: (core, state) => core.toggle(state),\n  hotkeyAction: 'toggleFullscreen',\n  isSupported: (state) => !state.hidden,\n});\n\nexport namespace FullscreenButton {\n  export type Props = FullscreenButtonProps;\n  export type State = FullscreenButtonCore.State;\n}\n"],"mappings":";;;;;AAWA,MAAa,mBAAmB,kBAA+D;CAC7F,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,KAAK;CAC1C,cAAc;CACd,cAAc,UAAU,CAAC,MAAM;AACjC,CAAC"}
+{"version":3,"file":"fullscreen-button.js","names":[],"sources":["../../../../src/ui/fullscreen-button/fullscreen-button.tsx"],"sourcesContent":["import { FullscreenButtonCore, FullscreenButtonDataAttrs } from '@videojs/core';\nimport { selectFullscreen } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface FullscreenButtonProps\n  extends UIComponentProps<'button', FullscreenButtonCore.State>, FullscreenButtonCore.Props {}\n\n/** A button that toggles fullscreen. */\nexport const FullscreenButton = createMediaButton<FullscreenButtonCore, FullscreenButtonProps>({\n  displayName: 'FullscreenButton',\n  core: FullscreenButtonCore,\n  stateAttrMap: FullscreenButtonDataAttrs,\n  selector: selectFullscreen,\n  action: (core, state) => core.toggle(state),\n  hotkeyAction: 'toggleFullscreen',\n  isSupported: (state) => !state.hidden,\n});\n\nexport namespace FullscreenButton {\n  export type Props = FullscreenButtonProps;\n  export type State = FullscreenButtonCore.State;\n}\n"],"mappings":";;;;;AAUA,MAAa,mBAAmB,kBAA+D;CAC7F,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/gesture/use-doubletap-gesture.d.ts

@@ -4,6 +4,12 @@ import { GestureProps } from "@videojs/core";
 interface UseDoubleTapGestureOptions extends Pick<GestureProps, 'pointer' | 'region' | 'disabled'> {
   target?: RefObject<HTMLElement | null>;
 }
+/**
+ * Registers a double-tap gesture on the current player container or an explicit target.
+ *
+ * @param onActivate - Callback invoked when a matching double tap is recognized.
+ * @param options - Gesture matching, target, and disabled options.
+ */
 declare function useDoubleTapGesture(onActivate: (event: PointerEvent) => void, options?: UseDoubleTapGestureOptions): void;
 //#endregion
 export { UseDoubleTapGestureOptions, useDoubleTapGesture };

package/dist/dev/ui/gesture/use-doubletap-gesture.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-doubletap-gesture.d.ts","names":[],"sources":["../../../../src/ui/gesture/use-doubletap-gesture.ts"],"mappings":";;;UAQiB,mCAAmC,KAAK;EACvD,SAAS,UAAU;;iBAGL,oBACd,aAAa,OAAO,uBACpB,UAAU"}
+{"version":3,"file":"use-doubletap-gesture.d.ts","names":[],"sources":["../../../../src/ui/gesture/use-doubletap-gesture.ts"],"mappings":";;;UAQiB,mCAAmC,KAAK;EACvD,SAAS,UAAU;;;;;;;;iBASL,oBACd,aAAa,OAAO,uBACpB,UAAU"}

package/dist/dev/ui/gesture/use-doubletap-gesture.js

@@ -3,6 +3,12 @@ import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { createDoubleTapGesture } from "@videojs/core/dom";
 import { useEffect } from "react";
 //#region src/ui/gesture/use-doubletap-gesture.ts
+/**
+* Registers a double-tap gesture on the current player container or an explicit target.
+*
+* @param onActivate - Callback invoked when a matching double tap is recognized.
+* @param options - Gesture matching, target, and disabled options.
+*/
 function useDoubleTapGesture(onActivate, options) {
 	const { pointer, region, disabled = false, target } = options ?? {};
 	const contextContainer = useContainer();

package/dist/dev/ui/gesture/use-doubletap-gesture.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-doubletap-gesture.js","names":[],"sources":["../../../../src/ui/gesture/use-doubletap-gesture.ts"],"sourcesContent":["import type { GestureProps } from '@videojs/core';\nimport { createDoubleTapGesture } from '@videojs/core/dom';\nimport type { RefObject } from 'react';\nimport { useEffect } from 'react';\n\nimport { useContainer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport interface UseDoubleTapGestureOptions extends Pick<GestureProps, 'pointer' | 'region' | 'disabled'> {\n  target?: RefObject<HTMLElement | null>;\n}\n\nexport function useDoubleTapGesture(\n  onActivate: (event: PointerEvent) => void,\n  options?: UseDoubleTapGestureOptions\n): void {\n  const { pointer, region, disabled = false, target } = options ?? {};\n  const contextContainer = useContainer();\n  const container = target?.current ?? contextContainer;\n  const onActivateRef = useLatestRef(onActivate);\n\n  useEffect(() => {\n    if (!container || disabled) return;\n\n    return createDoubleTapGesture(container, (event) => onActivateRef.current(event), { pointer, region });\n  }, [container, disabled, pointer, region]);\n}\n"],"mappings":";;;;;AAYA,SAAgB,oBACd,YACA,SACM;CACN,MAAM,EAAE,SAAS,QAAQ,WAAW,OAAO,WAAW,WAAW,CAAC;CAClE,MAAM,mBAAmB,aAAa;CACtC,MAAM,YAAY,QAAQ,WAAW;CACrC,MAAM,gBAAgB,aAAa,UAAU;CAE7C,gBAAgB;EACd,IAAI,CAAC,aAAa,UAAU;EAE5B,OAAO,uBAAuB,YAAY,UAAU,cAAc,QAAQ,KAAK,GAAG;GAAE;GAAS;EAAO,CAAC;CACvG,GAAG;EAAC;EAAW;EAAU;EAAS;CAAM,CAAC;AAC3C"}
+{"version":3,"file":"use-doubletap-gesture.js","names":[],"sources":["../../../../src/ui/gesture/use-doubletap-gesture.ts"],"sourcesContent":["import type { GestureProps } from '@videojs/core';\nimport { createDoubleTapGesture } from '@videojs/core/dom';\nimport type { RefObject } from 'react';\nimport { useEffect } from 'react';\n\nimport { useContainer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport interface UseDoubleTapGestureOptions extends Pick<GestureProps, 'pointer' | 'region' | 'disabled'> {\n  target?: RefObject<HTMLElement | null>;\n}\n\n/**\n * Registers a double-tap gesture on the current player container or an explicit target.\n *\n * @param onActivate - Callback invoked when a matching double tap is recognized.\n * @param options - Gesture matching, target, and disabled options.\n */\nexport function useDoubleTapGesture(\n  onActivate: (event: PointerEvent) => void,\n  options?: UseDoubleTapGestureOptions\n): void {\n  const { pointer, region, disabled = false, target } = options ?? {};\n  const contextContainer = useContainer();\n  const container = target?.current ?? contextContainer;\n  const onActivateRef = useLatestRef(onActivate);\n\n  useEffect(() => {\n    if (!container || disabled) return;\n\n    return createDoubleTapGesture(container, (event) => onActivateRef.current(event), { pointer, region });\n  }, [container, disabled, pointer, region]);\n}\n"],"mappings":";;;;;;;;;;;AAkBA,SAAgB,oBACd,YACA,SACM;CACN,MAAM,EAAE,SAAS,QAAQ,WAAW,OAAO,WAAW,WAAW,CAAC;CAClE,MAAM,mBAAmB,aAAa;CACtC,MAAM,YAAY,QAAQ,WAAW;CACrC,MAAM,gBAAgB,aAAa,UAAU;CAE7C,gBAAgB;EACd,IAAI,CAAC,aAAa,UAAU;EAE5B,OAAO,uBAAuB,YAAY,UAAU,cAAc,QAAQ,KAAK,GAAG;GAAE;GAAS;EAAO,CAAC;CACvG,GAAG;EAAC;EAAW;EAAU;EAAS;CAAM,CAAC;AAC3C"}

package/dist/dev/ui/gesture/use-tap-gesture.d.ts

@@ -4,6 +4,12 @@ import { GestureProps } from "@videojs/core";
 interface UseTapGestureOptions extends Pick<GestureProps, 'pointer' | 'region' | 'disabled'> {
   target?: RefObject<HTMLElement | null>;
 }
+/**
+ * Registers a tap gesture on the current player container or an explicit target.
+ *
+ * @param onActivate - Callback invoked when a matching tap is recognized.
+ * @param options - Gesture matching, target, and disabled options.
+ */
 declare function useTapGesture(onActivate: (event: PointerEvent) => void, options?: UseTapGestureOptions): void;
 //#endregion
 export { UseTapGestureOptions, useTapGesture };

package/dist/dev/ui/gesture/use-tap-gesture.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-tap-gesture.d.ts","names":[],"sources":["../../../../src/ui/gesture/use-tap-gesture.ts"],"mappings":";;;UAQiB,6BAA6B,KAAK;EACjD,SAAS,UAAU;;iBAGL,cAAc,aAAa,OAAO,uBAAuB,UAAU"}
+{"version":3,"file":"use-tap-gesture.d.ts","names":[],"sources":["../../../../src/ui/gesture/use-tap-gesture.ts"],"mappings":";;;UAQiB,6BAA6B,KAAK;EACjD,SAAS,UAAU;;;;;;;;iBASL,cAAc,aAAa,OAAO,uBAAuB,UAAU"}

package/dist/dev/ui/gesture/use-tap-gesture.js

@@ -3,6 +3,12 @@ import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { createTapGesture } from "@videojs/core/dom";
 import { useEffect } from "react";
 //#region src/ui/gesture/use-tap-gesture.ts
+/**
+* Registers a tap gesture on the current player container or an explicit target.
+*
+* @param onActivate - Callback invoked when a matching tap is recognized.
+* @param options - Gesture matching, target, and disabled options.
+*/
 function useTapGesture(onActivate, options) {
 	const { pointer, region, disabled = false, target } = options ?? {};
 	const contextContainer = useContainer();

package/dist/dev/ui/gesture/use-tap-gesture.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-tap-gesture.js","names":[],"sources":["../../../../src/ui/gesture/use-tap-gesture.ts"],"sourcesContent":["import type { GestureProps } from '@videojs/core';\nimport { createTapGesture } from '@videojs/core/dom';\nimport type { RefObject } from 'react';\nimport { useEffect } from 'react';\n\nimport { useContainer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport interface UseTapGestureOptions extends Pick<GestureProps, 'pointer' | 'region' | 'disabled'> {\n  target?: RefObject<HTMLElement | null>;\n}\n\nexport function useTapGesture(onActivate: (event: PointerEvent) => void, options?: UseTapGestureOptions): void {\n  const { pointer, region, disabled = false, target } = options ?? {};\n  const contextContainer = useContainer();\n  const container = target?.current ?? contextContainer;\n  const onActivateRef = useLatestRef(onActivate);\n\n  useEffect(() => {\n    if (!container || disabled) return;\n\n    return createTapGesture(container, (event) => onActivateRef.current(event), { pointer, region });\n  }, [container, disabled, pointer, region]);\n}\n"],"mappings":";;;;;AAYA,SAAgB,cAAc,YAA2C,SAAsC;CAC7G,MAAM,EAAE,SAAS,QAAQ,WAAW,OAAO,WAAW,WAAW,CAAC;CAClE,MAAM,mBAAmB,aAAa;CACtC,MAAM,YAAY,QAAQ,WAAW;CACrC,MAAM,gBAAgB,aAAa,UAAU;CAE7C,gBAAgB;EACd,IAAI,CAAC,aAAa,UAAU;EAE5B,OAAO,iBAAiB,YAAY,UAAU,cAAc,QAAQ,KAAK,GAAG;GAAE;GAAS;EAAO,CAAC;CACjG,GAAG;EAAC;EAAW;EAAU;EAAS;CAAM,CAAC;AAC3C"}
+{"version":3,"file":"use-tap-gesture.js","names":[],"sources":["../../../../src/ui/gesture/use-tap-gesture.ts"],"sourcesContent":["import type { GestureProps } from '@videojs/core';\nimport { createTapGesture } from '@videojs/core/dom';\nimport type { RefObject } from 'react';\nimport { useEffect } from 'react';\n\nimport { useContainer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport interface UseTapGestureOptions extends Pick<GestureProps, 'pointer' | 'region' | 'disabled'> {\n  target?: RefObject<HTMLElement | null>;\n}\n\n/**\n * Registers a tap gesture on the current player container or an explicit target.\n *\n * @param onActivate - Callback invoked when a matching tap is recognized.\n * @param options - Gesture matching, target, and disabled options.\n */\nexport function useTapGesture(onActivate: (event: PointerEvent) => void, options?: UseTapGestureOptions): void {\n  const { pointer, region, disabled = false, target } = options ?? {};\n  const contextContainer = useContainer();\n  const container = target?.current ?? contextContainer;\n  const onActivateRef = useLatestRef(onActivate);\n\n  useEffect(() => {\n    if (!container || disabled) return;\n\n    return createTapGesture(container, (event) => onActivateRef.current(event), { pointer, region });\n  }, [container, disabled, pointer, region]);\n}\n"],"mappings":";;;;;;;;;;;AAkBA,SAAgB,cAAc,YAA2C,SAAsC;CAC7G,MAAM,EAAE,SAAS,QAAQ,WAAW,OAAO,WAAW,WAAW,CAAC;CAClE,MAAM,mBAAmB,aAAa;CACtC,MAAM,YAAY,QAAQ,WAAW;CACrC,MAAM,gBAAgB,aAAa,UAAU;CAE7C,gBAAgB;EACd,IAAI,CAAC,aAAa,UAAU;EAE5B,OAAO,iBAAiB,YAAY,UAAU,cAAc,QAAQ,KAAK,GAAG;GAAE;GAAS;EAAO,CAAC;CACjG,GAAG;EAAC;EAAW;EAAU;EAAS;CAAM,CAAC;AAC3C"}

package/dist/dev/ui/hooks/create-radio-options-hook.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-radio-options-hook.js","names":[],"sources":["../../../../src/ui/hooks/create-radio-options-hook.ts"],"sourcesContent":["import type { RadioOption, RadioOptionsState } from '@videojs/core';\nimport { logMissingFeature } from '@videojs/core/dom';\nimport { type Text, type TextParams, translateText } from '@videojs/core/i18n';\nimport type { UnknownState } from '@videojs/store';\nimport { useCallback, useState } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport { usePlayer } from '../../player/context';\n\ninterface RadioOptionsCore<Props, Media, State extends RadioOptionsState> {\n  setProps(props: Props): void;\n  setMedia(media: Media): void;\n  getState(): State;\n  getLabel(state: State): Text | string;\n  getLabelParams?(state: State): TextParams | undefined;\n  selectValue(media: Media, value: string): void;\n}\n\ninterface RadioOptionsHookConfig<Props, Media, State extends RadioOptionsState> {\n  name: string;\n  feature: string;\n  selector: ((state: UnknownState) => Media | null) & { displayName?: string | undefined };\n  createCore: () => RadioOptionsCore<Props, Media, State>;\n}\n\ntype StateOption<State extends RadioOptionsState> = State extends RadioOptionsState<infer Option> ? Option : never;\n\nexport type TranslatedRadioOption<Option extends RadioOption> = Omit<Option, 'label' | 'labelParams' | 'disabled'> & {\n  label: string;\n  disabled: boolean;\n};\n\nexport interface RadioOptionsHookResult<Option extends RadioOption, State extends RadioOptionsState> {\n  state: State;\n  label: string;\n  value: string;\n  selectedLabel: string;\n  options: TranslatedRadioOption<Option>[];\n  disabled: boolean;\n  hidden: boolean;\n  setValue: (value: string) => void;\n}\n\n/** Creates framework adapter mechanics shared by media-backed radio option hooks. */\nexport function createRadioOptionsHook<Props, Media, State extends RadioOptionsState>({\n  name,\n  feature,\n  selector,\n  createCore,\n}: RadioOptionsHookConfig<Props, Media, State>): (\n  props?: Props\n) => RadioOptionsHookResult<StateOption<State>, State> | null {\n  return function useRadioOptions(props?: Props): RadioOptionsHookResult<StateOption<State>, State> | null {\n    'use no memo';\n\n    const media = usePlayer(selector);\n    const t = useTranslator();\n    const [core] = useState(createCore);\n\n    core.setProps(props ?? ({} as Props));\n\n    const setValue = useCallback((value: string) => core.selectValue(media!, value), [core, media]);\n\n    if (!media) {\n      if (__DEV__) logMissingFeature(name, selector.displayName ?? feature);\n      return null;\n    }\n\n    core.setMedia(media);\n    const state = core.getState();\n    const options = state.options.map((option) => {\n      const { label, labelParams, disabled, ...rest } = option;\n\n      return {\n        ...rest,\n        label: translateText(label, t, labelParams),\n        disabled: state.disabled || disabled,\n      } as TranslatedRadioOption<StateOption<State>>;\n    });\n\n    return {\n      state,\n      label: translateText(core.getLabel(state), t, core.getLabelParams?.(state)),\n      value: state.value,\n      selectedLabel: options.find((option) => option.value === state.value)?.label ?? '',\n      options,\n      disabled: state.disabled,\n      hidden: state.hidden,\n      setValue,\n    };\n  };\n}\n"],"mappings":";;;;;;;AA4CA,SAAgB,uBAAsE,EACpF,MACA,SACA,UACA,cAG4D;CAC5D,OAAO,SAAS,gBAAgB,OAAyE;EACvG;EAEA,MAAM,QAAQ,UAAU,QAAQ;EAChC,MAAM,IAAI,cAAc;EACxB,MAAM,CAAC,QAAQ,SAAS,UAAU;EAElC,KAAK,SAAS,SAAU,CAAC,CAAW;EAEpC,MAAM,WAAW,aAAa,UAAkB,KAAK,YAAY,OAAQ,KAAK,GAAG,CAAC,MAAM,KAAK,CAAC;EAE9F,IAAI,CAAC,OAAO;GACG,kBAAkB,MAAM,SAAS,eAAe,OAAO;GACpE,OAAO;EACT;EAEA,KAAK,SAAS,KAAK;EACnB,MAAM,QAAQ,KAAK,SAAS;EAC5B,MAAM,UAAU,MAAM,QAAQ,KAAK,WAAW;GAC5C,MAAM,EAAE,OAAO,aAAa,UAAU,GAAG,SAAS;GAElD,OAAO;IACL,GAAG;IACH,OAAO,cAAc,OAAO,GAAG,WAAW;IAC1C,UAAU,MAAM,YAAY;GAC9B;EACF,CAAC;EAED,OAAO;GACL;GACA,OAAO,cAAc,KAAK,SAAS,KAAK,GAAG,GAAG,KAAK,iBAAiB,KAAK,CAAC;GAC1E,OAAO,MAAM;GACb,eAAe,QAAQ,MAAM,WAAW,OAAO,UAAU,MAAM,KAAK,CAAC,EAAE,SAAS;GAChF;GACA,UAAU,MAAM;GAChB,QAAQ,MAAM;GACd;EACF;CACF;AACF"}
+{"version":3,"file":"create-radio-options-hook.js","names":[],"sources":["../../../../src/ui/hooks/create-radio-options-hook.ts"],"sourcesContent":["import type { RadioOption, RadioOptionsState } from '@videojs/core';\nimport { logMissingFeature } from '@videojs/core/dom';\nimport { type Text, type TextParams, translateText } from '@videojs/core/i18n';\nimport type { UnknownState } from '@videojs/store';\nimport { useCallback, useState } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport { usePlayer } from '../../player/context';\n\ninterface RadioOptionsCore<Props, Media, State extends RadioOptionsState> {\n  setProps(props: Props): void;\n  setMedia(media: Media): void;\n  getState(): State;\n  getLabel(state: State): Text | string;\n  getLabelParams?(state: State): TextParams | undefined;\n  selectValue(media: Media, value: string): void;\n}\n\ninterface RadioOptionsHookConfig<Props, Media, State extends RadioOptionsState> {\n  name: string;\n  feature: string;\n  selector: ((state: UnknownState) => Media | null) & { displayName?: string | undefined };\n  createCore: () => RadioOptionsCore<Props, Media, State>;\n}\n\ntype StateOption<State extends RadioOptionsState> = State extends RadioOptionsState<infer Option> ? Option : never;\n\nexport type TranslatedRadioOption<Option extends RadioOption> = Omit<Option, 'label' | 'labelParams' | 'disabled'> & {\n  label: string;\n  disabled: boolean;\n};\n\nexport interface RadioOptionsHookResult<Option extends RadioOption, State extends RadioOptionsState> {\n  state: State;\n  label: string;\n  value: string;\n  selectedLabel: string;\n  options: TranslatedRadioOption<Option>[];\n  disabled: boolean;\n  hidden: boolean;\n  setValue: (value: string) => void;\n}\n\n/** Creates framework adapter mechanics shared by media-backed radio option hooks. */\nexport function createRadioOptionsHook<Props, Media, State extends RadioOptionsState>({\n  name,\n  feature,\n  selector,\n  createCore,\n}: RadioOptionsHookConfig<Props, Media, State>): (\n  props?: Props\n) => RadioOptionsHookResult<StateOption<State>, State> | null {\n  return function useRadioOptions(props?: Props): RadioOptionsHookResult<StateOption<State>, State> | null {\n    'use no memo';\n\n    const media = usePlayer(selector);\n    const t = useTranslator();\n    const [core] = useState(createCore);\n\n    core.setProps(props ?? ({} as Props));\n\n    const setValue = useCallback((value: string) => core.selectValue(media!, value), [core, media]);\n\n    if (!media) {\n      if (__DEV__) logMissingFeature(name, selector.displayName ?? feature);\n\n      return null;\n    }\n\n    core.setMedia(media);\n    const state = core.getState();\n    const options = state.options.map((option) => {\n      const { label, labelParams, disabled, ...rest } = option;\n\n      return {\n        ...rest,\n        label: translateText(label, t, labelParams),\n        disabled: state.disabled || disabled,\n      } as TranslatedRadioOption<StateOption<State>>;\n    });\n\n    return {\n      state,\n      label: translateText(core.getLabel(state), t, core.getLabelParams?.(state)),\n      value: state.value,\n      selectedLabel: options.find((option) => option.value === state.value)?.label ?? '',\n      options,\n      disabled: state.disabled,\n      hidden: state.hidden,\n      setValue,\n    };\n  };\n}\n"],"mappings":";;;;;;;AA4CA,SAAgB,uBAAsE,EACpF,MACA,SACA,UACA,cAG4D;CAC5D,OAAO,SAAS,gBAAgB,OAAyE;EACvG;EAEA,MAAM,QAAQ,UAAU,QAAQ;EAChC,MAAM,IAAI,cAAc;EACxB,MAAM,CAAC,QAAQ,SAAS,UAAU;EAElC,KAAK,SAAS,SAAU,CAAC,CAAW;EAEpC,MAAM,WAAW,aAAa,UAAkB,KAAK,YAAY,OAAQ,KAAK,GAAG,CAAC,MAAM,KAAK,CAAC;EAE9F,IAAI,CAAC,OAAO;GACG,kBAAkB,MAAM,SAAS,eAAe,OAAO;GAEpE,OAAO;EACT;EAEA,KAAK,SAAS,KAAK;EACnB,MAAM,QAAQ,KAAK,SAAS;EAC5B,MAAM,UAAU,MAAM,QAAQ,KAAK,WAAW;GAC5C,MAAM,EAAE,OAAO,aAAa,UAAU,GAAG,SAAS;GAElD,OAAO;IACL,GAAG;IACH,OAAO,cAAc,OAAO,GAAG,WAAW;IAC1C,UAAU,MAAM,YAAY;GAC9B;EACF,CAAC;EAED,OAAO;GACL;GACA,OAAO,cAAc,KAAK,SAAS,KAAK,GAAG,GAAG,KAAK,iBAAiB,KAAK,CAAC;GAC1E,OAAO,MAAM;GACb,eAAe,QAAQ,MAAM,WAAW,OAAO,UAAU,MAAM,KAAK,CAAC,EAAE,SAAS;GAChF;GACA,UAAU,MAAM;GAChB,QAAQ,MAAM;GACd;EACF;CACF;AACF"}

package/dist/dev/ui/hooks/use-button.d.ts

@@ -14,19 +14,19 @@ interface UseButtonReturnValue {
  * Hook for button behavior with keyboard and pointer interaction.
  *
  * @example
- * ```tsx
- * const { getButtonProps, buttonRef } = useButton({
- *   displayName: 'PlayButton',
- *   onActivate: () => togglePlayback(),
- *   isDisabled: () => disabled,
- * });
+ *   ```tsx
+ *   const { getButtonProps, buttonRef } = useButton({
+ *     displayName: 'PlayButton',
+ *     onActivate: () => togglePlayback(),
+ *     isDisabled: () => disabled,
+ *   });
  *
- * return useRender('button', componentProps, {
- *   state,
- *   ref: [forwardedRef, buttonRef],
- *   props: [elementProps, getButtonProps],
- * });
- * ```
+ *   return useRender('button', componentProps, {
+ *     state,
+ *     ref: [forwardedRef, buttonRef],
+ *     props: [elementProps, getButtonProps],
+ *   });
+ *   ```;
  *
  * @param params - Button configuration with activation handler and disabled check.
  */

package/dist/dev/ui/hooks/use-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-button.d.ts","names":[],"sources":["../../../../src/ui/hooks/use-button.ts"],"mappings":";;;UAKiB;EACf;EACA,aAAa,OAAO;EACpB;;UAGe;EACf,iBAAiB,gBAAgB,oCAAoC;EACrE,WAAW,IAAI;;;;;;;;;;;;;;;;;;;;;;iBAuBD,UAAU,QAAQ,sBAAsB;kBAuBvC;OACH,aAAa;OACb,cAAc"}
+{"version":3,"file":"use-button.d.ts","names":[],"sources":["../../../../src/ui/hooks/use-button.ts"],"mappings":";;;UAMiB;EACf;EACA,aAAa,OAAO;EACpB;;UAGe;EACf,iBAAiB,gBAAgB,oCAAoC;EACrE,WAAW,IAAI;;;;;;;;;;;;;;;;;;;;;;iBAuBD,UAAU,QAAQ,sBAAsB;kBAwBvC;OACH,aAAa;OACb,cAAc"}

package/dist/dev/ui/hooks/use-button.js

@@ -6,19 +6,19 @@ import { useCallback } from "react";
 * Hook for button behavior with keyboard and pointer interaction.
 *
 * @example
-* ```tsx
-* const { getButtonProps, buttonRef } = useButton({
-*   displayName: 'PlayButton',
-*   onActivate: () => togglePlayback(),
-*   isDisabled: () => disabled,
-* });
+*   ```tsx
+*   const { getButtonProps, buttonRef } = useButton({
+*     displayName: 'PlayButton',
+*     onActivate: () => togglePlayback(),
+*     isDisabled: () => disabled,
+*   });
 *
-* return useRender('button', componentProps, {
-*   state,
-*   ref: [forwardedRef, buttonRef],
-*   props: [elementProps, getButtonProps],
-* });
-* ```
+*   return useRender('button', componentProps, {
+*     state,
+*     ref: [forwardedRef, buttonRef],
+*     props: [elementProps, getButtonProps],
+*   });
+*   ```;
 *
 * @param params - Button configuration with activation handler and disabled check.
 */
@@ -29,10 +29,11 @@ function useButton(params) {
 	}, [displayName]);
 	return {
 		getButtonProps: useCallback((externalProps) => {
-			return mergeProps(createButton({
+			const buttonProps = createButton({
 				onActivate,
 				isDisabled
-			}), externalProps);
+			});
+			return mergeProps(buttonProps, externalProps);
 		}, [onActivate, isDisabled]),
 		buttonRef
 	};

package/dist/dev/ui/hooks/use-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-button.js","names":[],"sources":["../../../../src/ui/hooks/use-button.ts"],"sourcesContent":["import { createButton, type UIEvent } from '@videojs/core/dom';\nimport type { ComponentPropsWithRef, Ref } from 'react';\nimport { useCallback } from 'react';\nimport { mergeProps } from '../../utils/merge-props';\n\nexport interface UseButtonParameters {\n  displayName: string;\n  onActivate: (event: UIEvent) => void;\n  isDisabled: () => boolean;\n}\n\nexport interface UseButtonReturnValue {\n  getButtonProps: (externalProps?: ComponentPropsWithRef<'button'>) => ComponentPropsWithRef<'button'>;\n  buttonRef: Ref<HTMLElement>;\n}\n\n/**\n * Hook for button behavior with keyboard and pointer interaction.\n *\n * @example\n * ```tsx\n * const { getButtonProps, buttonRef } = useButton({\n *   displayName: 'PlayButton',\n *   onActivate: () => togglePlayback(),\n *   isDisabled: () => disabled,\n * });\n *\n * return useRender('button', componentProps, {\n *   state,\n *   ref: [forwardedRef, buttonRef],\n *   props: [elementProps, getButtonProps],\n * });\n * ```\n *\n * @param params - Button configuration with activation handler and disabled check.\n */\nexport function useButton(params: UseButtonParameters): UseButtonReturnValue {\n  const { displayName, onActivate, isDisabled } = params;\n\n  const buttonRef = useCallback(\n    (element: HTMLElement | null) => {\n      if (__DEV__ && element && element.tagName !== 'BUTTON') {\n        console.warn(`${displayName} should render a <button> element for accessibility`);\n      }\n    },\n    [displayName]\n  );\n\n  const getButtonProps = useCallback(\n    (externalProps?: ComponentPropsWithRef<'button'>): ComponentPropsWithRef<'button'> => {\n      const buttonProps = createButton({ onActivate, isDisabled });\n      return mergeProps(buttonProps, externalProps);\n    },\n    [onActivate, isDisabled]\n  );\n\n  return { getButtonProps, buttonRef };\n}\n\nexport namespace useButton {\n  export type Parameters = UseButtonParameters;\n  export type ReturnValue = UseButtonReturnValue;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAoCA,SAAgB,UAAU,QAAmD;CAC3E,MAAM,EAAE,aAAa,YAAY,eAAe;CAEhD,MAAM,YAAY,aACf,YAAgC;EAC/B,IAAe,WAAW,QAAQ,YAAY,UAC5C,QAAQ,KAAK,GAAG,YAAY,oDAAoD;CAEpF,GACA,CAAC,WAAW,CACd;CAUA,OAAO;EAAE,gBARc,aACpB,kBAAqF;GAEpF,OAAO,WADa,aAAa;IAAE;IAAY;GAAW,CAC9B,GAAG,aAAa;EAC9C,GACA,CAAC,YAAY,UAAU,CAGH;EAAG;CAAU;AACrC"}
+{"version":3,"file":"use-button.js","names":[],"sources":["../../../../src/ui/hooks/use-button.ts"],"sourcesContent":["import { createButton, type UIEvent } from '@videojs/core/dom';\nimport type { ComponentPropsWithRef, Ref } from 'react';\nimport { useCallback } from 'react';\n\nimport { mergeProps } from '../../utils/merge-props';\n\nexport interface UseButtonParameters {\n  displayName: string;\n  onActivate: (event: UIEvent) => void;\n  isDisabled: () => boolean;\n}\n\nexport interface UseButtonReturnValue {\n  getButtonProps: (externalProps?: ComponentPropsWithRef<'button'>) => ComponentPropsWithRef<'button'>;\n  buttonRef: Ref<HTMLElement>;\n}\n\n/**\n * Hook for button behavior with keyboard and pointer interaction.\n *\n * @example\n *   ```tsx\n *   const { getButtonProps, buttonRef } = useButton({\n *     displayName: 'PlayButton',\n *     onActivate: () => togglePlayback(),\n *     isDisabled: () => disabled,\n *   });\n *\n *   return useRender('button', componentProps, {\n *     state,\n *     ref: [forwardedRef, buttonRef],\n *     props: [elementProps, getButtonProps],\n *   });\n *   ```;\n *\n * @param params - Button configuration with activation handler and disabled check.\n */\nexport function useButton(params: UseButtonParameters): UseButtonReturnValue {\n  const { displayName, onActivate, isDisabled } = params;\n\n  const buttonRef = useCallback(\n    (element: HTMLElement | null) => {\n      if (__DEV__ && element && element.tagName !== 'BUTTON') {\n        console.warn(`${displayName} should render a <button> element for accessibility`);\n      }\n    },\n    [displayName]\n  );\n\n  const getButtonProps = useCallback(\n    (externalProps?: ComponentPropsWithRef<'button'>): ComponentPropsWithRef<'button'> => {\n      const buttonProps = createButton({ onActivate, isDisabled });\n\n      return mergeProps(buttonProps, externalProps);\n    },\n    [onActivate, isDisabled]\n  );\n\n  return { getButtonProps, buttonRef };\n}\n\nexport namespace useButton {\n  export type Parameters = UseButtonParameters;\n  export type ReturnValue = UseButtonReturnValue;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAqCA,SAAgB,UAAU,QAAmD;CAC3E,MAAM,EAAE,aAAa,YAAY,eAAe;CAEhD,MAAM,YAAY,aACf,YAAgC;EAC/B,IAAe,WAAW,QAAQ,YAAY,UAC5C,QAAQ,KAAK,GAAG,YAAY,oDAAoD;CAEpF,GACA,CAAC,WAAW,CACd;CAWA,OAAO;EAAE,gBATc,aACpB,kBAAqF;GACpF,MAAM,cAAc,aAAa;IAAE;IAAY;GAAW,CAAC;GAE3D,OAAO,WAAW,aAAa,aAAa;EAC9C,GACA,CAAC,YAAY,UAAU,CAGH;EAAG;CAAU;AACrC"}

package/dist/dev/ui/hooks/use-slider.d.ts

@@ -23,9 +23,8 @@ interface UseSliderReturnValue<State extends SliderState = SliderState> {
 /**
  * Manages slider input lifecycle for React.
  *
- * Wraps `createSlider()` from `@videojs/core/dom` and subscribes to its
- * input state via `useSnapshot`. Returns split props for the root
- * (pointer events) and thumb (keyboard/focus) elements.
+ * Wraps `createSlider()` from `@videojs/core/dom` and subscribes to its input state via `useSnapshot`. Returns split
+ * props for the root (pointer events) and thumb (keyboard/focus) elements.
  */
 declare function useSlider<State extends SliderState = SliderState>(options: UseSliderOptions<State>): UseSliderReturnValue<State>;
 declare namespace useSlider {

package/dist/dev/ui/hooks/use-slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-slider.d.ts","names":[],"sources":["../../../../src/ui/hooks/use-slider.ts"],"mappings":";;;UAkBiB,iBAAiB,cAAc,cAAc,qBACpD,KACN;EAUF,eAAe,OAAO,gBAAgB;EACtC;EACA;;EAEA,kBAAkB,oBAAoB,mBAAmB;;EAEzD,aAAa,OAAO,UAAU;;UAGf,qBAAqB,cAAc,cAAc;EAChE,OAAO;EACP,OAAO;EACP,SAAS;EACT,SAAS,MAAM,YAAY;EAC3B,UAAU,MAAM,YAAY;EAC5B,WAAW;EACX,WAAW;EACX,YAAY;;;;;;;;;iBAUE,UAAU,cAAc,cAAc,aACpD,SAAS,iBAAiB,SACzB,qBAAqB;kBA6GP;OACH,UAAU;OACV,cAAc"}
+{"version":3,"file":"use-slider.d.ts","names":[],"sources":["../../../../src/ui/hooks/use-slider.ts"],"mappings":";;;UAmBiB,iBAAiB,cAAc,cAAc,qBAAqB,KACjF;EAUA,eAAe,OAAO,gBAAgB;EACtC;EACA;;EAEA,kBAAkB,oBAAoB,mBAAmB;;EAEzD,aAAa,OAAO,UAAU;;UAGf,qBAAqB,cAAc,cAAc;EAChE,OAAO;EACP,OAAO;EACP,SAAS;EACT,SAAS,MAAM,YAAY;EAC3B,UAAU,MAAM,YAAY;EAC5B,WAAW;EACX,WAAW;EACX,YAAY;;;;;;;;iBASE,UAAU,cAAc,cAAc,aACpD,SAAS,iBAAiB,SACzB,qBAAqB;kBA+GP;OACH,UAAU;OACV,cAAc"}