@videojs/react 10.0.0-beta.10 → 10.0.0-beta.12

package/dist/dev/utils/use-render.js

@@ -1,11 +1,9 @@
-'use client';
-
+"use client";
 import { composeRefs } from "./use-composed-refs.js";
 import { mergeProps } from "./merge-props.js";
 import { getStateDataAttrs } from "@videojs/core/dom";
 import { cloneElement, createElement, isValidElement } from "react";
 import { isFunction } from "@videojs/utils/predicate";
-
 //#region src/utils/use-render.tsx
 /** Check if a value is a render prop (function or React element). */
 function isRenderProp(value) {
@@ -69,7 +67,7 @@ function renderElement(element, componentProps, params) {
 	mergedProps.ref = composeRefs(ref, mergedProps.ref);
 	return createElement(element, mergedProps);
 }
-
 //#endregion
 export { isRenderProp, renderElement };
+
 //# sourceMappingURL=use-render.js.map

package/dist/dev/utils/use-render.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-render.js","names":[],"sources":["../../../src/utils/use-render.tsx"],"sourcesContent":["'use client';\n\nimport { getStateDataAttrs, type StateAttrMap } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { CSSProperties, ReactElement, Ref } from 'react';\nimport { cloneElement, createElement, isValidElement } from 'react';\nimport { mergeProps } from './merge-props';\nimport type { HTMLProps, RenderProp } from './types';\nimport { composeRefs } from './use-composed-refs';\n\n/** Check if a value is a render prop (function or React element). */\nexport function isRenderProp(value: unknown): value is RenderProp<any> {\n  return isFunction(value) || isValidElement(value);\n}\n\ntype IntrinsicTagName = keyof React.JSX.IntrinsicElements;\n\nexport interface UseRenderComponentProps<State> {\n  className?: string | ((state: State) => string | undefined) | undefined;\n  style?: CSSProperties | ((state: State) => CSSProperties | undefined) | undefined;\n  render?: RenderProp<State> | undefined;\n}\n\nexport interface UseRenderParameters<State, RenderedElementType extends Element> {\n  state: State;\n  ref?: Ref<RenderedElementType> | Ref<RenderedElementType>[] | undefined;\n  props?: object | object[] | undefined;\n  stateAttrMap?: StateAttrMap<State> | undefined;\n}\n\nfunction resolveClassName<State>(\n  className: string | ((state: State) => string | undefined) | undefined,\n  state: State\n): string | undefined {\n  return isFunction(className) ? className(state) : className;\n}\n\nfunction resolveStyle<State>(\n  style: CSSProperties | ((state: State) => CSSProperties | undefined) | undefined,\n  state: State\n): CSSProperties | undefined {\n  return isFunction(style) ? style(state) : style;\n}\n\nfunction getElementRef(element: ReactElement): Ref<unknown> | undefined {\n  // React 19+ uses element.props.ref, older versions use element.ref\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const elementAny = element as any;\n  return elementAny.ref ?? elementAny.props?.ref;\n}\n\n/**\n * Render a UI component element.\n *\n * Handles:\n * - Default tag rendering\n * - Render prop (element or function)\n * - Props merging (event handlers chained, className concatenated, style merged)\n * - Ref composition\n * - className/style as functions of state\n *\n * @public\n * @example\n * ```tsx\n * return renderElement('button', componentProps, {\n *   state,\n *   ref: [forwardedRef, buttonRef],\n *   props: [{ type: 'button' }, elementProps, getButtonProps],\n * });\n * ```\n */\nexport function renderElement<\n  State extends object,\n  RenderedElementType extends Element,\n  TagName extends IntrinsicTagName,\n>(\n  element: TagName,\n  componentProps: UseRenderComponentProps<State>,\n  params: UseRenderParameters<State, RenderedElementType>\n): ReactElement | null {\n  const { className: classNameProp, style: styleProp, render } = componentProps;\n  const { state, ref, props, stateAttrMap } = params;\n\n  // Resolve className and style if they're functions\n  const className = resolveClassName(classNameProp, state);\n  const style = resolveStyle(styleProp, state);\n\n  // Generate data attributes from state\n  const stateDataAttrs = getStateDataAttrs(state, stateAttrMap);\n\n  // Merge: state data attrs first, then props (so props can override)\n  const propsArray = Array.isArray(props) ? props : props ? [props] : [];\n  const mergedProps = mergeProps(stateDataAttrs, ...(propsArray as Record<string, unknown>[]));\n\n  if (className !== undefined) {\n    // Add resolved className and style\n    mergedProps.className = mergedProps.className ? `${mergedProps.className} ${className}` : className;\n  }\n\n  if (style !== undefined) {\n    mergedProps.style = mergedProps.style ? { ...(mergedProps.style as CSSProperties), ...style } : style;\n  }\n\n  if (isFunction(render)) {\n    // Render function: call with props and state\n    const mergedRef = composeRefs(ref, mergedProps.ref);\n    return render({ ...mergedProps, ref: mergedRef } as HTMLProps, state);\n  }\n\n  if (isValidElement(render)) {\n    const elementRef = getElementRef(render);\n\n    const mergedRef = composeRefs(ref, mergedProps.ref, elementRef);\n\n    const elementProps = mergeProps(mergedProps, render.props as Record<string, unknown>);\n    elementProps.ref = mergedRef;\n\n    return cloneElement(render, elementProps);\n  }\n\n  // Default tag\n  const mergedRef = composeRefs(ref, mergedProps.ref);\n  mergedProps.ref = mergedRef;\n\n  return createElement(element, mergedProps);\n}\n\nexport namespace renderElement {\n  export type ComponentProps<State> = UseRenderComponentProps<State>;\n  export type Parameters<State, RenderedElementType extends Element> = UseRenderParameters<State, RenderedElementType>;\n}\n"],"mappings":";;;;;;;;;;AAWA,SAAgB,aAAa,OAA0C;AACrE,QAAO,WAAW,MAAM,IAAI,eAAe,MAAM;;AAkBnD,SAAS,iBACP,WACA,OACoB;AACpB,QAAO,WAAW,UAAU,GAAG,UAAU,MAAM,GAAG;;AAGpD,SAAS,aACP,OACA,OAC2B;AAC3B,QAAO,WAAW,MAAM,GAAG,MAAM,MAAM,GAAG;;AAG5C,SAAS,cAAc,SAAiD;CAGtE,MAAM,aAAa;AACnB,QAAO,WAAW,OAAO,WAAW,OAAO;;;;;;;;;;;;;;;;;;;;;;AAuB7C,SAAgB,cAKd,SACA,gBACA,QACqB;CACrB,MAAM,EAAE,WAAW,eAAe,OAAO,WAAW,WAAW;CAC/D,MAAM,EAAE,OAAO,KAAK,OAAO,iBAAiB;CAG5C,MAAM,YAAY,iBAAiB,eAAe,MAAM;CACxD,MAAM,QAAQ,aAAa,WAAW,MAAM;CAO5C,MAAM,cAAc,WAJG,kBAAkB,OAAO,aAAa,EAId,GAD5B,MAAM,QAAQ,MAAM,GAAG,QAAQ,QAAQ,CAAC,MAAM,GAAG,EAAE,CACsB;AAE5F,KAAI,cAAc,OAEhB,aAAY,YAAY,YAAY,YAAY,GAAG,YAAY,UAAU,GAAG,cAAc;AAG5F,KAAI,UAAU,OACZ,aAAY,QAAQ,YAAY,QAAQ;EAAE,GAAI,YAAY;EAAyB,GAAG;EAAO,GAAG;AAGlG,KAAI,WAAW,OAAO,EAAE;EAEtB,MAAM,YAAY,YAAY,KAAK,YAAY,IAAI;AACnD,SAAO,OAAO;GAAE,GAAG;GAAa,KAAK;GAAW,EAAe,MAAM;;AAGvE,KAAI,eAAe,OAAO,EAAE;EAC1B,MAAM,aAAa,cAAc,OAAO;EAExC,MAAM,YAAY,YAAY,KAAK,YAAY,KAAK,WAAW;EAE/D,MAAM,eAAe,WAAW,aAAa,OAAO,MAAiC;AACrF,eAAa,MAAM;AAEnB,SAAO,aAAa,QAAQ,aAAa;;AAK3C,aAAY,MADM,YAAY,KAAK,YAAY,IAAI;AAGnD,QAAO,cAAc,SAAS,YAAY"}
+{"version":3,"file":"use-render.js","names":[],"sources":["../../../src/utils/use-render.tsx"],"sourcesContent":["'use client';\n\nimport { getStateDataAttrs, type StateAttrMap } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { CSSProperties, ReactElement, Ref } from 'react';\nimport { cloneElement, createElement, isValidElement } from 'react';\nimport { mergeProps } from './merge-props';\nimport type { HTMLProps, RenderProp } from './types';\nimport { composeRefs } from './use-composed-refs';\n\n/** Check if a value is a render prop (function or React element). */\nexport function isRenderProp(value: unknown): value is RenderProp<any> {\n  return isFunction(value) || isValidElement(value);\n}\n\ntype IntrinsicTagName = keyof React.JSX.IntrinsicElements;\n\nexport interface UseRenderComponentProps<State> {\n  className?: string | ((state: State) => string | undefined) | undefined;\n  style?: CSSProperties | ((state: State) => CSSProperties | undefined) | undefined;\n  render?: RenderProp<State> | undefined;\n}\n\nexport interface UseRenderParameters<State, RenderedElementType extends Element> {\n  state: State;\n  ref?: Ref<RenderedElementType> | Ref<RenderedElementType>[] | undefined;\n  props?: object | object[] | undefined;\n  stateAttrMap?: StateAttrMap<State> | undefined;\n}\n\nfunction resolveClassName<State>(\n  className: string | ((state: State) => string | undefined) | undefined,\n  state: State\n): string | undefined {\n  return isFunction(className) ? className(state) : className;\n}\n\nfunction resolveStyle<State>(\n  style: CSSProperties | ((state: State) => CSSProperties | undefined) | undefined,\n  state: State\n): CSSProperties | undefined {\n  return isFunction(style) ? style(state) : style;\n}\n\nfunction getElementRef(element: ReactElement): Ref<unknown> | undefined {\n  // React 19+ uses element.props.ref, older versions use element.ref\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const elementAny = element as any;\n  return elementAny.ref ?? elementAny.props?.ref;\n}\n\n/**\n * Render a UI component element.\n *\n * Handles:\n * - Default tag rendering\n * - Render prop (element or function)\n * - Props merging (event handlers chained, className concatenated, style merged)\n * - Ref composition\n * - className/style as functions of state\n *\n * @public\n * @example\n * ```tsx\n * return renderElement('button', componentProps, {\n *   state,\n *   ref: [forwardedRef, buttonRef],\n *   props: [{ type: 'button' }, elementProps, getButtonProps],\n * });\n * ```\n */\nexport function renderElement<\n  State extends object,\n  RenderedElementType extends Element,\n  TagName extends IntrinsicTagName,\n>(\n  element: TagName,\n  componentProps: UseRenderComponentProps<State>,\n  params: UseRenderParameters<State, RenderedElementType>\n): ReactElement | null {\n  const { className: classNameProp, style: styleProp, render } = componentProps;\n  const { state, ref, props, stateAttrMap } = params;\n\n  // Resolve className and style if they're functions\n  const className = resolveClassName(classNameProp, state);\n  const style = resolveStyle(styleProp, state);\n\n  // Generate data attributes from state\n  const stateDataAttrs = getStateDataAttrs(state, stateAttrMap);\n\n  // Merge: state data attrs first, then props (so props can override)\n  const propsArray = Array.isArray(props) ? props : props ? [props] : [];\n  const mergedProps = mergeProps(stateDataAttrs, ...(propsArray as Record<string, unknown>[]));\n\n  if (className !== undefined) {\n    // Add resolved className and style\n    mergedProps.className = mergedProps.className ? `${mergedProps.className} ${className}` : className;\n  }\n\n  if (style !== undefined) {\n    mergedProps.style = mergedProps.style ? { ...(mergedProps.style as CSSProperties), ...style } : style;\n  }\n\n  if (isFunction(render)) {\n    // Render function: call with props and state\n    const mergedRef = composeRefs(ref, mergedProps.ref);\n    return render({ ...mergedProps, ref: mergedRef } as HTMLProps, state);\n  }\n\n  if (isValidElement(render)) {\n    const elementRef = getElementRef(render);\n\n    const mergedRef = composeRefs(ref, mergedProps.ref, elementRef);\n\n    const elementProps = mergeProps(mergedProps, render.props as Record<string, unknown>);\n    elementProps.ref = mergedRef;\n\n    return cloneElement(render, elementProps);\n  }\n\n  // Default tag\n  const mergedRef = composeRefs(ref, mergedProps.ref);\n  mergedProps.ref = mergedRef;\n\n  return createElement(element, mergedProps);\n}\n\nexport namespace renderElement {\n  export type ComponentProps<State> = UseRenderComponentProps<State>;\n  export type Parameters<State, RenderedElementType extends Element> = UseRenderParameters<State, RenderedElementType>;\n}\n"],"mappings":";;;;;;;;AAWA,SAAgB,aAAa,OAA0C;AACrE,QAAO,WAAW,MAAM,IAAI,eAAe,MAAM;;AAkBnD,SAAS,iBACP,WACA,OACoB;AACpB,QAAO,WAAW,UAAU,GAAG,UAAU,MAAM,GAAG;;AAGpD,SAAS,aACP,OACA,OAC2B;AAC3B,QAAO,WAAW,MAAM,GAAG,MAAM,MAAM,GAAG;;AAG5C,SAAS,cAAc,SAAiD;CAGtE,MAAM,aAAa;AACnB,QAAO,WAAW,OAAO,WAAW,OAAO;;;;;;;;;;;;;;;;;;;;;;AAuB7C,SAAgB,cAKd,SACA,gBACA,QACqB;CACrB,MAAM,EAAE,WAAW,eAAe,OAAO,WAAW,WAAW;CAC/D,MAAM,EAAE,OAAO,KAAK,OAAO,iBAAiB;CAG5C,MAAM,YAAY,iBAAiB,eAAe,MAAM;CACxD,MAAM,QAAQ,aAAa,WAAW,MAAM;CAO5C,MAAM,cAAc,WAJG,kBAAkB,OAAO,aAAa,EAId,GAD5B,MAAM,QAAQ,MAAM,GAAG,QAAQ,QAAQ,CAAC,MAAM,GAAG,EAAE,CACsB;AAE5F,KAAI,cAAc,KAAA,EAEhB,aAAY,YAAY,YAAY,YAAY,GAAG,YAAY,UAAU,GAAG,cAAc;AAG5F,KAAI,UAAU,KAAA,EACZ,aAAY,QAAQ,YAAY,QAAQ;EAAE,GAAI,YAAY;EAAyB,GAAG;EAAO,GAAG;AAGlG,KAAI,WAAW,OAAO,EAAE;EAEtB,MAAM,YAAY,YAAY,KAAK,YAAY,IAAI;AACnD,SAAO,OAAO;GAAE,GAAG;GAAa,KAAK;GAAW,EAAe,MAAM;;AAGvE,KAAI,eAAe,OAAO,EAAE;EAC1B,MAAM,aAAa,cAAc,OAAO;EAExC,MAAM,YAAY,YAAY,KAAK,YAAY,KAAK,WAAW;EAE/D,MAAM,eAAe,WAAW,aAAa,OAAO,MAAiC;AACrF,eAAa,MAAM;AAEnB,SAAO,aAAa,QAAQ,aAAa;;AAK3C,aAAY,MADM,YAAY,KAAK,YAAY,IAAI;AAGnD,QAAO,cAAc,SAAS,YAAY"}

package/dist/dev/utils/use-safe-id.js

@@ -1,7 +1,5 @@
-'use client';
-
+"use client";
 import { useId } from "react";
-
 //#region src/utils/use-safe-id.ts
 const UNSAFE_CHARS = /[^a-zA-Z0-9_-]/g;
 /**
@@ -14,9 +12,9 @@ const UNSAFE_CHARS = /[^a-zA-Z0-9_-]/g;
 */
 function useSafeId(prefix) {
 	const raw = useId().replace(UNSAFE_CHARS, "");
-	return prefix ? `${prefix}${raw}` : raw;
+	return prefix ? `${prefix}-${raw}` : raw;
 }
-
 //#endregion
 export { useSafeId };
+
 //# sourceMappingURL=use-safe-id.js.map

package/dist/dev/utils/use-safe-id.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-safe-id.js","names":[],"sources":["../../../src/utils/use-safe-id.ts"],"sourcesContent":["'use client';\n\nimport { useId } from 'react';\n\nconst UNSAFE_CHARS = /[^a-zA-Z0-9_-]/g;\n\n/**\n * Generate a CSS-safe identifier from React's `useId()`.\n *\n * `useId()` returns values like `:r0:` which contain colons — invalid\n * in CSS `<dashed-ident>` tokens (used by `anchor-name` / `position-anchor`).\n * This hook strips non-alphanumeric/underscore/hyphen characters and\n * optionally prepends a prefix.\n */\nexport function useSafeId(prefix?: string): string {\n  const raw = useId().replace(UNSAFE_CHARS, '');\n  return prefix ? `${prefix}${raw}` : raw;\n}\n"],"mappings":";;;;;AAIA,MAAM,eAAe;;;;;;;;;AAUrB,SAAgB,UAAU,QAAyB;CACjD,MAAM,MAAM,OAAO,CAAC,QAAQ,cAAc,GAAG;AAC7C,QAAO,SAAS,GAAG,SAAS,QAAQ"}
+{"version":3,"file":"use-safe-id.js","names":[],"sources":["../../../src/utils/use-safe-id.ts"],"sourcesContent":["'use client';\n\nimport { useId } from 'react';\n\nconst UNSAFE_CHARS = /[^a-zA-Z0-9_-]/g;\n\n/**\n * Generate a CSS-safe identifier from React's `useId()`.\n *\n * `useId()` returns values like `:r0:` which contain colons — invalid\n * in CSS `<dashed-ident>` tokens (used by `anchor-name` / `position-anchor`).\n * This hook strips non-alphanumeric/underscore/hyphen characters and\n * optionally prepends a prefix.\n */\nexport function useSafeId(prefix?: string): string {\n  const raw = useId().replace(UNSAFE_CHARS, '');\n  return prefix ? `${prefix}-${raw}` : raw;\n}\n"],"mappings":";;;AAIA,MAAM,eAAe;;;;;;;;;AAUrB,SAAgB,UAAU,QAAyB;CACjD,MAAM,MAAM,OAAO,CAAC,QAAQ,cAAc,GAAG;AAC7C,QAAO,SAAS,GAAG,OAAO,GAAG,QAAQ"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@videojs/react",
   "type": "module",
-  "version": "10.0.0-beta.10",
+  "version": "10.0.0-beta.12",
   "description": "React library for building media players",
   "license": "Apache-2.0",
   "repository": {
@@ -65,10 +65,10 @@
     "react": ">=16.8.0"
   },
   "dependencies": {
-    "@videojs/core": "10.0.0-beta.10",
-    "@videojs/spf": "10.0.0-beta.10",
-    "@videojs/store": "10.0.0-beta.10",
-    "@videojs/utils": "10.0.0-beta.10"
+    "@videojs/spf": "10.0.0-beta.12",
+    "@videojs/store": "10.0.0-beta.12",
+    "@videojs/core": "10.0.0-beta.12",
+    "@videojs/utils": "10.0.0-beta.12"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",
@@ -76,11 +76,11 @@
     "jsdom": "^26.1.0",
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
-    "tsdown": "^0.20.3",
-    "typescript": "^5.9.3",
-    "vitest": "^3.2.4",
-    "@videojs/icons": "10.0.0-beta.10",
-    "@videojs/skins": "10.0.0-beta.10"
+    "tsdown": "^0.21.4",
+    "typescript": "^6.0.2",
+    "vitest": "^4.1.0",
+    "@videojs/skins": "10.0.0-beta.12",
+    "@videojs/icons": "10.0.0-beta.12"
   },
   "publishConfig": {
     "access": "public"
@@ -99,6 +99,6 @@
     "dev": "pnpm build:watch",
     "test": "vitest run",
     "test:watch": "vitest",
-    "clean": "rm -rf dist types"
+    "clean": "rimraf --glob dist types '*.tsbuildinfo'"
   }
 }

package/dist/default/presets/error-dialog.js

@@ -1,51 +0,0 @@
-'use client';
-
-import { usePlayer } from "../player/context.js";
-import { AlertDialogClose } from "../ui/alert-dialog/alert-dialog-close.js";
-import { AlertDialogDescription } from "../ui/alert-dialog/alert-dialog-description.js";
-import { AlertDialogPopup } from "../ui/alert-dialog/alert-dialog-popup.js";
-import { AlertDialogRoot } from "../ui/alert-dialog/alert-dialog-root.js";
-import { AlertDialogTitle } from "../ui/alert-dialog/alert-dialog-title.js";
-import { selectError } from "@videojs/core/dom";
-import { useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/presets/error-dialog.tsx
-function ErrorDialog({ classNames }) {
-	const errorState = usePlayer(selectError);
-	const lastError = useRef(errorState?.error);
-	if (!errorState) return null;
-	if (errorState?.error) lastError.current = errorState.error;
-	return /* @__PURE__ */ jsx(AlertDialogRoot, {
-		open: Boolean(errorState.error),
-		onOpenChange: (open) => {
-			if (!open) errorState.dismissError();
-		},
-		children: /* @__PURE__ */ jsx(AlertDialogPopup, {
-			className: classNames?.root,
-			children: /* @__PURE__ */ jsxs("div", {
-				className: classNames?.dialog,
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: classNames?.content,
-					children: [/* @__PURE__ */ jsx(AlertDialogTitle, {
-						className: classNames?.title,
-						children: "Something went wrong."
-					}), /* @__PURE__ */ jsx(AlertDialogDescription, {
-						className: classNames?.description,
-						children: lastError.current?.message ?? "An error occurred. Please try again."
-					})]
-				}), /* @__PURE__ */ jsx("div", {
-					className: classNames?.actions,
-					children: /* @__PURE__ */ jsx(AlertDialogClose, {
-						className: classNames?.close,
-						children: "OK"
-					})
-				})]
-			})
-		})
-	});
-}
-
-//#endregion
-export { ErrorDialog };
-//# sourceMappingURL=error-dialog.js.map

package/dist/default/presets/error-dialog.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"error-dialog.js","names":["AlertDialog.Root","AlertDialog.Popup","AlertDialog.Title","AlertDialog.Description","AlertDialog.Close"],"sources":["../../../src/presets/error-dialog.tsx"],"sourcesContent":["'use client';\n\nimport { selectError } from '@videojs/core/dom';\nimport { type ReactNode, useRef } from 'react';\nimport { usePlayer } from '@/player/context';\nimport { AlertDialog } from '@/ui/alert-dialog';\n\nexport interface ErrorDialogClassNames {\n  root?: string;\n  dialog?: string;\n  content?: string;\n  title?: string;\n  description?: string;\n  actions?: string;\n  close?: string;\n}\n\nexport function ErrorDialog({ classNames }: { classNames?: ErrorDialogClassNames }): ReactNode {\n  const errorState = usePlayer(selectError);\n  const lastError = useRef(errorState?.error);\n\n  if (!errorState) return null;\n\n  if (errorState?.error) lastError.current = errorState.error;\n\n  return (\n    <AlertDialog.Root\n      open={Boolean(errorState.error)}\n      onOpenChange={(open) => {\n        if (!open) errorState.dismissError();\n      }}\n    >\n      <AlertDialog.Popup className={classNames?.root}>\n        <div className={classNames?.dialog}>\n          <div className={classNames?.content}>\n            <AlertDialog.Title className={classNames?.title}>Something went wrong.</AlertDialog.Title>\n            <AlertDialog.Description className={classNames?.description}>\n              {lastError.current?.message ?? 'An error occurred. Please try again.'}\n            </AlertDialog.Description>\n          </div>\n          <div className={classNames?.actions}>\n            <AlertDialog.Close className={classNames?.close}>OK</AlertDialog.Close>\n          </div>\n        </div>\n      </AlertDialog.Popup>\n    </AlertDialog.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAiBA,SAAgB,YAAY,EAAE,cAAiE;CAC7F,MAAM,aAAa,UAAU,YAAY;CACzC,MAAM,YAAY,OAAO,YAAY,MAAM;AAE3C,KAAI,CAAC,WAAY,QAAO;AAExB,KAAI,YAAY,MAAO,WAAU,UAAU,WAAW;AAEtD,QACE,oBAACA;EACC,MAAM,QAAQ,WAAW,MAAM;EAC/B,eAAe,SAAS;AACtB,OAAI,CAAC,KAAM,YAAW,cAAc;;YAGtC,oBAACC;GAAkB,WAAW,YAAY;aACxC,qBAAC;IAAI,WAAW,YAAY;eAC1B,qBAAC;KAAI,WAAW,YAAY;gBAC1B,oBAACC;MAAkB,WAAW,YAAY;gBAAO;OAAyC,EAC1F,oBAACC;MAAwB,WAAW,YAAY;gBAC7C,UAAU,SAAS,WAAW;OACP;MACtB,EACN,oBAAC;KAAI,WAAW,YAAY;eAC1B,oBAACC;MAAkB,WAAW,YAAY;gBAAO;OAAsB;MACnE;KACF;IACY;GACH"}

package/dist/dev/presets/error-dialog.js

@@ -1,51 +0,0 @@
-'use client';
-
-import { usePlayer } from "../player/context.js";
-import { AlertDialogClose } from "../ui/alert-dialog/alert-dialog-close.js";
-import { AlertDialogDescription } from "../ui/alert-dialog/alert-dialog-description.js";
-import { AlertDialogPopup } from "../ui/alert-dialog/alert-dialog-popup.js";
-import { AlertDialogRoot } from "../ui/alert-dialog/alert-dialog-root.js";
-import { AlertDialogTitle } from "../ui/alert-dialog/alert-dialog-title.js";
-import { selectError } from "@videojs/core/dom";
-import { useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/presets/error-dialog.tsx
-function ErrorDialog({ classNames }) {
-	const errorState = usePlayer(selectError);
-	const lastError = useRef(errorState?.error);
-	if (!errorState) return null;
-	if (errorState?.error) lastError.current = errorState.error;
-	return /* @__PURE__ */ jsx(AlertDialogRoot, {
-		open: Boolean(errorState.error),
-		onOpenChange: (open) => {
-			if (!open) errorState.dismissError();
-		},
-		children: /* @__PURE__ */ jsx(AlertDialogPopup, {
-			className: classNames?.root,
-			children: /* @__PURE__ */ jsxs("div", {
-				className: classNames?.dialog,
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: classNames?.content,
-					children: [/* @__PURE__ */ jsx(AlertDialogTitle, {
-						className: classNames?.title,
-						children: "Something went wrong."
-					}), /* @__PURE__ */ jsx(AlertDialogDescription, {
-						className: classNames?.description,
-						children: lastError.current?.message ?? "An error occurred. Please try again."
-					})]
-				}), /* @__PURE__ */ jsx("div", {
-					className: classNames?.actions,
-					children: /* @__PURE__ */ jsx(AlertDialogClose, {
-						className: classNames?.close,
-						children: "OK"
-					})
-				})]
-			})
-		})
-	});
-}
-
-//#endregion
-export { ErrorDialog };
-//# sourceMappingURL=error-dialog.js.map

package/dist/dev/presets/error-dialog.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"error-dialog.js","names":["AlertDialog.Root","AlertDialog.Popup","AlertDialog.Title","AlertDialog.Description","AlertDialog.Close"],"sources":["../../../src/presets/error-dialog.tsx"],"sourcesContent":["'use client';\n\nimport { selectError } from '@videojs/core/dom';\nimport { type ReactNode, useRef } from 'react';\nimport { usePlayer } from '@/player/context';\nimport { AlertDialog } from '@/ui/alert-dialog';\n\nexport interface ErrorDialogClassNames {\n  root?: string;\n  dialog?: string;\n  content?: string;\n  title?: string;\n  description?: string;\n  actions?: string;\n  close?: string;\n}\n\nexport function ErrorDialog({ classNames }: { classNames?: ErrorDialogClassNames }): ReactNode {\n  const errorState = usePlayer(selectError);\n  const lastError = useRef(errorState?.error);\n\n  if (!errorState) return null;\n\n  if (errorState?.error) lastError.current = errorState.error;\n\n  return (\n    <AlertDialog.Root\n      open={Boolean(errorState.error)}\n      onOpenChange={(open) => {\n        if (!open) errorState.dismissError();\n      }}\n    >\n      <AlertDialog.Popup className={classNames?.root}>\n        <div className={classNames?.dialog}>\n          <div className={classNames?.content}>\n            <AlertDialog.Title className={classNames?.title}>Something went wrong.</AlertDialog.Title>\n            <AlertDialog.Description className={classNames?.description}>\n              {lastError.current?.message ?? 'An error occurred. Please try again.'}\n            </AlertDialog.Description>\n          </div>\n          <div className={classNames?.actions}>\n            <AlertDialog.Close className={classNames?.close}>OK</AlertDialog.Close>\n          </div>\n        </div>\n      </AlertDialog.Popup>\n    </AlertDialog.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAiBA,SAAgB,YAAY,EAAE,cAAiE;CAC7F,MAAM,aAAa,UAAU,YAAY;CACzC,MAAM,YAAY,OAAO,YAAY,MAAM;AAE3C,KAAI,CAAC,WAAY,QAAO;AAExB,KAAI,YAAY,MAAO,WAAU,UAAU,WAAW;AAEtD,QACE,oBAACA;EACC,MAAM,QAAQ,WAAW,MAAM;EAC/B,eAAe,SAAS;AACtB,OAAI,CAAC,KAAM,YAAW,cAAc;;YAGtC,oBAACC;GAAkB,WAAW,YAAY;aACxC,qBAAC;IAAI,WAAW,YAAY;eAC1B,qBAAC;KAAI,WAAW,YAAY;gBAC1B,oBAACC;MAAkB,WAAW,YAAY;gBAAO;OAAyC,EAC1F,oBAACC;MAAwB,WAAW,YAAY;gBAC7C,UAAU,SAAS,WAAW;OACP;MACtB,EACN,oBAAC;KAAI,WAAW,YAAY;eAC1B,oBAACC;MAAkB,WAAW,YAAY;gBAAO;OAAsB;MACnE;KACF;IACY;GACH"}