@videojs/react 10.0.0-beta.11 → 10.0.0-beta.13

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

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

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

@@ -1,5 +1,4 @@
-'use client';
-
+"use client";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { useDestroy } from "../../utils/use-destroy.js";
 import { AlertDialogContextProvider } from "./context.js";
@@ -9,7 +8,6 @@ import { createAlertDialog, createTransition } from "@videojs/core/dom";
 import { useSnapshot } from "@videojs/store/react";
 import { useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/ui/alert-dialog/alert-dialog-root.tsx
 function AlertDialogRoot({ open: controlledOpen, defaultOpen = AlertDialogCore.defaultProps.defaultOpen, onOpenChange: onOpenChangeProp, onOpenChangeComplete: onOpenChangeCompleteProp, children }) {
 	const [core] = useState(() => new AlertDialogCore());
@@ -29,8 +27,8 @@ function AlertDialogRoot({ open: controlledOpen, defaultOpen = AlertDialogCore.d
 		if (!isControlled && defaultOpen) instance.open();
 		return instance;
 	});
-	const titleId = useSafeId("alert-dialog-title-");
-	const descriptionId = useSafeId("alert-dialog-desc-");
+	const titleId = useSafeId("alert-dialog-title");
+	const descriptionId = useSafeId("alert-dialog-desc");
 	core.setTitleId(titleId);
 	core.setDescriptionId(descriptionId);
 	useEffect(() => {
@@ -53,7 +51,7 @@ function AlertDialogRoot({ open: controlledOpen, defaultOpen = AlertDialogCore.d
 		children
 	});
 }
-
 //#endregion
 export { AlertDialogRoot };
+
 //# sourceMappingURL=alert-dialog-root.js.map

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

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

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

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

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

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

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

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

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

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

package/dist/default/ui/alert-dialog/index.js

@@ -1,4 +1,3 @@
 import { useAlertDialogContext } from "./context.js";
 import { index_parts_exports } from "./index.parts.js";
-
-export { index_parts_exports as AlertDialog, useAlertDialogContext };
+export { index_parts_exports as AlertDialog, useAlertDialogContext };

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

@@ -4,7 +4,6 @@ import { AlertDialogDescription } from "./alert-dialog-description.js";
 import { AlertDialogPopup } from "./alert-dialog-popup.js";
 import { AlertDialogRoot } from "./alert-dialog-root.js";
 import { AlertDialogTitle } from "./alert-dialog-title.js";
-
 //#region src/ui/alert-dialog/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Close: () => AlertDialogClose,
@@ -13,7 +12,7 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Root: () => AlertDialogRoot,
 	Title: () => AlertDialogTitle
 });
-
 //#endregion
 export { index_parts_exports };
+
 //# sourceMappingURL=index.parts.js.map

package/dist/default/ui/buffering-indicator/buffering-indicator.js

@@ -1,12 +1,10 @@
-'use client';
-
+"use client";
 import { usePlayer } from "../../player/context.js";
 import { useDestroy } from "../../utils/use-destroy.js";
 import { renderElement } from "../../utils/use-render.js";
 import { BufferingIndicatorCore, BufferingIndicatorDataAttrs } from "@videojs/core";
 import { selectPlayback } from "@videojs/core/dom";
 import { forwardRef, useState, useSyncExternalStore } from "react";
-
 //#region src/ui/buffering-indicator/buffering-indicator.tsx
 /**
 * Displays a buffering indicator when media is waiting for data.
@@ -46,7 +44,7 @@ const BufferingIndicator = forwardRef(function BufferingIndicator(componentProps
 		props: [elementProps]
 	});
 });
-
 //#endregion
 export { BufferingIndicator };
+
 //# sourceMappingURL=buffering-indicator.js.map

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

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

package/dist/default/ui/buffering-indicator/index.js

@@ -1,3 +1,2 @@
 import { BufferingIndicator } from "./buffering-indicator.js";
-
-export { BufferingIndicator };
+export { BufferingIndicator };

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

@@ -1,9 +1,7 @@
-'use client';
-
+"use client";
 import { createMediaButton } from "../create-media-button.js";
 import { CaptionsButtonCore, CaptionsButtonDataAttrs } from "@videojs/core";
 import { selectTextTrack } from "@videojs/core/dom";
-
 //#region src/ui/captions-button/captions-button.tsx
 /** A button that toggles captions. */
 const CaptionsButton = createMediaButton({
@@ -13,7 +11,7 @@ const CaptionsButton = createMediaButton({
 	selector: selectTextTrack,
 	action: (core, state) => core.toggle(state)
 });
-
 //#endregion
 export { CaptionsButton };
+
 //# sourceMappingURL=captions-button.js.map

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

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

package/dist/default/ui/captions-button/index.js

@@ -1,3 +1,2 @@
 import { CaptionsButton } from "./captions-button.js";
-
-export { CaptionsButton };
+export { CaptionsButton };

package/dist/default/ui/controls/context.js

@@ -1,7 +1,5 @@
-'use client';
-
+"use client";
 import { createContext, useContext } from "react";
-
 //#region src/ui/controls/context.tsx
 const ControlsContext = createContext(null);
 const ControlsContextProvider = ControlsContext.Provider;
@@ -10,7 +8,7 @@ function useControlsContext() {
 	if (!ctx) throw new Error("Controls compound components must be used within a Controls.Root");
 	return ctx;
 }
-
 //#endregion
 export { ControlsContextProvider, useControlsContext };
+
 //# sourceMappingURL=context.js.map

package/dist/default/ui/controls/context.js.map

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

package/dist/default/ui/controls/controls-group.js

@@ -1,9 +1,7 @@
-'use client';
-
+"use client";
 import { renderElement } from "../../utils/use-render.js";
 import { useControlsContext } from "./context.js";
 import { forwardRef } from "react";
-
 //#region src/ui/controls/controls-group.tsx
 /** Layout group for related controls; sets `role="group"` when labeled. */
 const ControlsGroup = forwardRef(function ControlsGroup(componentProps, forwardedRef) {
@@ -24,7 +22,7 @@ const ControlsGroup = forwardRef(function ControlsGroup(componentProps, forwarde
 		}, elementProps]
 	});
 });
-
 //#endregion
 export { ControlsGroup };
+
 //# sourceMappingURL=controls-group.js.map

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

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

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

@@ -1,5 +1,4 @@
-'use client';
-
+"use client";
 import { usePlayer } from "../../player/context.js";
 import { renderElement } from "../../utils/use-render.js";
 import { ControlsContextProvider } from "./context.js";
@@ -7,7 +6,6 @@ import { ControlsCore, ControlsDataAttrs } from "@videojs/core";
 import { selectControls } from "@videojs/core/dom";
 import { forwardRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/ui/controls/controls-root.tsx
 /** Root container for player controls state and rendered control content. */
 const ControlsRoot = forwardRef(function ControlsRoot(componentProps, forwardedRef) {
@@ -34,7 +32,7 @@ const ControlsRoot = forwardRef(function ControlsRoot(componentProps, forwardedR
 		})
 	});
 });
-
 //#endregion
 export { ControlsRoot };
+
 //# sourceMappingURL=controls-root.js.map

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

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

package/dist/default/ui/controls/index.js

@@ -1,3 +1,2 @@
 import { index_parts_exports } from "./index.parts.js";
-
-export { index_parts_exports as Controls };
+export { index_parts_exports as Controls };

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

@@ -1,13 +1,12 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
 import { ControlsGroup } from "./controls-group.js";
 import { ControlsRoot } from "./controls-root.js";
-
 //#region src/ui/controls/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Group: () => ControlsGroup,
 	Root: () => ControlsRoot
 });
-
 //#endregion
 export { index_parts_exports };
+
 //# sourceMappingURL=index.parts.js.map

package/dist/default/ui/create-context-part.js

@@ -1,8 +1,6 @@
-'use client';
-
+"use client";
 import { renderElement } from "../utils/use-render.js";
 import { forwardRef } from "react";
-
 //#region src/ui/create-context-part.tsx
 function createContextPart(config) {
 	const { displayName, tag, useContext, staticProps, getProps } = config;
@@ -28,7 +26,7 @@ function createContextPart(config) {
 	Component.displayName = displayName;
 	return Component;
 }
-
 //#endregion
 export { createContextPart };
+
 //# sourceMappingURL=create-context-part.js.map

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

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

package/dist/default/ui/create-media-button.js

@@ -1,11 +1,9 @@
-'use client';
-
+"use client";
 import { usePlayer } from "../player/context.js";
 import { renderElement } from "../utils/use-render.js";
 import { useButton } from "./hooks/use-button.js";
 import "@videojs/core/dom";
 import { forwardRef, useState } from "react";
-
 //#region src/ui/create-media-button.tsx
 /** Creates a media button React component from a core class and config. */
 function createMediaButton(config) {
@@ -46,7 +44,7 @@ function createMediaButton(config) {
 	Component.displayName = displayName;
 	return Component;
 }
-
 //#endregion
 export { createMediaButton };
+
 //# sourceMappingURL=create-media-button.js.map

package/dist/default/ui/create-media-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-media-button.js","names":[],"sources":["../../../src/ui/create-media-button.tsx"],"sourcesContent":["'use client';\n\nimport type { InferComponentState, InferMediaState, MediaUIComponent, StateAttrMap } from '@videojs/core';\nimport { logMissingFeature } from '@videojs/core/dom';\nimport type { Selector } from '@videojs/store';\nimport type { ForwardedRef, ForwardRefExoticComponent, RefAttributes } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../player/context';\nimport type { renderElement as renderElementFn } from '../utils/use-render';\nimport { renderElement } from '../utils/use-render';\nimport { useButton } from './hooks/use-button';\n\ninterface MediaButtonConfig<Core extends Required<MediaUIComponent>> {\n  displayName: string;\n  core: { new (): Core; defaultProps: Record<string, unknown> };\n  stateAttrMap: StateAttrMap<InferComponentState<Core>>;\n  selector: Selector<object, InferMediaState<Core> | undefined>;\n  action: (core: Core, state: InferMediaState<Core>) => void;\n}\n\n/** Creates a media button React component from a core class and config. */\nexport function createMediaButton<Core extends Required<MediaUIComponent>, Props extends object>(\n  config: MediaButtonConfig<Core>\n): ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>> {\n  const { displayName, core: CoreClass, stateAttrMap, selector, action } = config;\n\n  // Props that exist in the core's defaultProps are routed to setProps; the rest go to the DOM element.\n  const corePropKeys = new Set(Object.keys(CoreClass.defaultProps));\n\n  const Component = forwardRef(function MediaButton(\n    componentProps: Record<string, unknown>,\n    forwardedRef: ForwardedRef<HTMLButtonElement>\n  ) {\n    const { render, className, style, ...rest } = componentProps;\n\n    const coreProps: Record<string, unknown> = {};\n    const elementProps: Record<string, unknown> = {};\n\n    for (const key of Object.keys(rest)) {\n      if (corePropKeys.has(key)) {\n        coreProps[key] = rest[key];\n      } else {\n        elementProps[key] = rest[key];\n      }\n    }\n\n    const feature = usePlayer(selector);\n\n    const [core] = useState(() => new CoreClass());\n    core.setProps(coreProps);\n\n    const { getButtonProps, buttonRef } = useButton({\n      displayName,\n      onActivate: () => action(core, feature!),\n      isDisabled: () => !!coreProps.disabled || !feature,\n    });\n\n    if (!feature) {\n      if (__DEV__) logMissingFeature(displayName, selector.displayName ?? displayName);\n      return null;\n    }\n\n    type State = InferComponentState<Core>;\n\n    core.setMedia(feature);\n    const state = core.getState() as State;\n\n    return renderElement(\n      'button',\n      { render, className, style } as renderElementFn.ComponentProps<InferComponentState<Core>>,\n      {\n        state,\n        stateAttrMap,\n        ref: [forwardedRef, buttonRef],\n        props: [core.getAttrs(state), elementProps, getButtonProps()],\n      }\n    );\n  });\n\n  Component.displayName = displayName;\n\n  return Component as unknown as ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>>;\n}\n"],"mappings":";;;;;;;;;;AAsBA,SAAgB,kBACd,QACqE;CACrE,MAAM,EAAE,aAAa,MAAM,WAAW,cAAc,UAAU,WAAW;CAGzE,MAAM,eAAe,IAAI,IAAI,OAAO,KAAK,UAAU,aAAa,CAAC;CAEjE,MAAM,YAAY,WAAW,SAAS,YACpC,gBACA,cACA;EACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,SAAS;EAE9C,MAAM,YAAqC,EAAE;EAC7C,MAAM,eAAwC,EAAE;AAEhD,OAAK,MAAM,OAAO,OAAO,KAAK,KAAK,CACjC,KAAI,aAAa,IAAI,IAAI,CACvB,WAAU,OAAO,KAAK;MAEtB,cAAa,OAAO,KAAK;EAI7B,MAAM,UAAU,UAAU,SAAS;EAEnC,MAAM,CAAC,QAAQ,eAAe,IAAI,WAAW,CAAC;AAC9C,OAAK,SAAS,UAAU;EAExB,MAAM,EAAE,gBAAgB,cAAc,UAAU;GAC9C;GACA,kBAAkB,OAAO,MAAM,QAAS;GACxC,kBAAkB,CAAC,CAAC,UAAU,YAAY,CAAC;GAC5C,CAAC;AAEF,MAAI,CAAC,QAEH,QAAO;AAKT,OAAK,SAAS,QAAQ;EACtB,MAAM,QAAQ,KAAK,UAAU;AAE7B,SAAO,cACL,UACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA;GACA,KAAK,CAAC,cAAc,UAAU;GAC9B,OAAO;IAAC,KAAK,SAAS,MAAM;IAAE;IAAc,gBAAgB;IAAC;GAC9D,CACF;GACD;AAEF,WAAU,cAAc;AAExB,QAAO"}
+{"version":3,"file":"create-media-button.js","names":[],"sources":["../../../src/ui/create-media-button.tsx"],"sourcesContent":["'use client';\n\nimport type { InferComponentState, InferMediaState, MediaUIComponent, StateAttrMap } from '@videojs/core';\nimport { logMissingFeature } from '@videojs/core/dom';\nimport type { Selector } from '@videojs/store';\nimport type { ForwardedRef, ForwardRefExoticComponent, RefAttributes } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../player/context';\nimport type { renderElement as renderElementFn } from '../utils/use-render';\nimport { renderElement } from '../utils/use-render';\nimport { useButton } from './hooks/use-button';\n\ninterface MediaButtonConfig<Core extends Required<MediaUIComponent>> {\n  displayName: string;\n  core: { new (): Core; defaultProps: Record<string, unknown> };\n  stateAttrMap: StateAttrMap<InferComponentState<Core>>;\n  selector: Selector<object, InferMediaState<Core> | undefined>;\n  action: (core: Core, state: InferMediaState<Core>) => void;\n}\n\n/** Creates a media button React component from a core class and config. */\nexport function createMediaButton<Core extends Required<MediaUIComponent>, Props extends object>(\n  config: MediaButtonConfig<Core>\n): ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>> {\n  const { displayName, core: CoreClass, stateAttrMap, selector, action } = config;\n\n  // Props that exist in the core's defaultProps are routed to setProps; the rest go to the DOM element.\n  const corePropKeys = new Set(Object.keys(CoreClass.defaultProps));\n\n  const Component = forwardRef(function MediaButton(\n    componentProps: Record<string, unknown>,\n    forwardedRef: ForwardedRef<HTMLButtonElement>\n  ) {\n    const { render, className, style, ...rest } = componentProps;\n\n    const coreProps: Record<string, unknown> = {};\n    const elementProps: Record<string, unknown> = {};\n\n    for (const key of Object.keys(rest)) {\n      if (corePropKeys.has(key)) {\n        coreProps[key] = rest[key];\n      } else {\n        elementProps[key] = rest[key];\n      }\n    }\n\n    const feature = usePlayer(selector);\n\n    const [core] = useState(() => new CoreClass());\n    core.setProps(coreProps);\n\n    const { getButtonProps, buttonRef } = useButton({\n      displayName,\n      onActivate: () => action(core, feature!),\n      isDisabled: () => !!coreProps.disabled || !feature,\n    });\n\n    if (!feature) {\n      if (__DEV__) logMissingFeature(displayName, selector.displayName ?? displayName);\n      return null;\n    }\n\n    type State = InferComponentState<Core>;\n\n    core.setMedia(feature);\n    const state = core.getState() as State;\n\n    return renderElement(\n      'button',\n      { render, className, style } as renderElementFn.ComponentProps<InferComponentState<Core>>,\n      {\n        state,\n        stateAttrMap,\n        ref: [forwardedRef, buttonRef],\n        props: [core.getAttrs(state), elementProps, getButtonProps()],\n      }\n    );\n  });\n\n  Component.displayName = displayName;\n\n  return Component as unknown as ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>>;\n}\n"],"mappings":";;;;;;;;AAsBA,SAAgB,kBACd,QACqE;CACrE,MAAM,EAAE,aAAa,MAAM,WAAW,cAAc,UAAU,WAAW;CAGzE,MAAM,eAAe,IAAI,IAAI,OAAO,KAAK,UAAU,aAAa,CAAC;CAEjE,MAAM,YAAY,WAAW,SAAS,YACpC,gBACA,cACA;EACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,SAAS;EAE9C,MAAM,YAAqC,EAAE;EAC7C,MAAM,eAAwC,EAAE;AAEhD,OAAK,MAAM,OAAO,OAAO,KAAK,KAAK,CACjC,KAAI,aAAa,IAAI,IAAI,CACvB,WAAU,OAAO,KAAK;MAEtB,cAAa,OAAO,KAAK;EAI7B,MAAM,UAAU,UAAU,SAAS;EAEnC,MAAM,CAAC,QAAQ,eAAe,IAAI,WAAW,CAAC;AAC9C,OAAK,SAAS,UAAU;EAExB,MAAM,EAAE,gBAAgB,cAAc,UAAU;GAC9C;GACA,kBAAkB,OAAO,MAAM,QAAS;GACxC,kBAAkB,CAAC,CAAC,UAAU,YAAY,CAAC;GAC5C,CAAC;AAEF,MAAI,CAAC,QAEH,QAAO;AAKT,OAAK,SAAS,QAAQ;EACtB,MAAM,QAAQ,KAAK,UAAU;AAE7B,SAAO,cACL,UACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA;GACA,KAAK,CAAC,cAAc,UAAU;GAC9B,OAAO;IAAC,KAAK,SAAS,MAAM;IAAE;IAAc,gBAAgB;IAAC;GAC9D,CACF;GACD;AAEF,WAAU,cAAc;AAExB,QAAO"}

package/dist/default/ui/error-dialog/context.js

@@ -0,0 +1,14 @@
+"use client";
+import { createContext, useContext } from "react";
+//#region src/ui/error-dialog/context.tsx
+const ErrorDialogContext = createContext(null);
+const ErrorDialogContextProvider = ErrorDialogContext.Provider;
+function useErrorDialogContext() {
+	const ctx = useContext(ErrorDialogContext);
+	if (!ctx) throw new Error("ErrorDialog compound components must be used within an ErrorDialog.Root");
+	return ctx;
+}
+//#endregion
+export { ErrorDialogContextProvider, useErrorDialogContext };
+
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/error-dialog/context.tsx"],"sourcesContent":["'use client';\n\nimport type { MediaError } from '@videojs/core';\nimport { createContext, useContext } from 'react';\n\nexport interface ErrorDialogContextValue {\n  lastError: MediaError | 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":";;;AASA,MAAM,qBAAqB,cAA8C,KAAK;AAE9E,MAAa,6BAA6B,mBAAmB;AAE7D,SAAgB,wBAAiD;CAC/D,MAAM,MAAM,WAAW,mBAAmB;AAC1C,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,0EAA0E;AACpG,QAAO"}

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

@@ -0,0 +1,28 @@
+"use client";
+import { useAlertDialogContext } from "../alert-dialog/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useErrorDialogContext } from "./context.js";
+import { forwardRef } from "react";
+//#region src/ui/error-dialog/error-dialog-description.tsx
+const FALLBACK_MESSAGE = "An error occurred. Please try again.";
+const ErrorDialogDescription = forwardRef(function ErrorDialogDescription({ render, className, style, children, ...elementProps }, forwardedRef) {
+	const { state, stateAttrMap } = useAlertDialogContext();
+	const { lastError } = useErrorDialogContext();
+	return renderElement("p", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: forwardedRef,
+		props: [{
+			id: state.descriptionId,
+			children: children ?? lastError?.message ?? FALLBACK_MESSAGE
+		}, elementProps]
+	});
+});
+//#endregion
+export { ErrorDialogDescription };
+
+//# sourceMappingURL=error-dialog-description.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"error-dialog-description.js","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-description.tsx"],"sourcesContent":["'use client';\n\nimport type { AlertDialogCore } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useAlertDialogContext } from '../alert-dialog/context';\nimport { useErrorDialogContext } from './context';\n\nconst FALLBACK_MESSAGE = 'An error occurred. Please try again.';\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 { state, stateAttrMap } = useAlertDialogContext();\n    const { lastError } = useErrorDialogContext();\n\n    return renderElement(\n      'p',\n      { render, className, style },\n      {\n        state,\n        stateAttrMap,\n        ref: forwardedRef,\n        props: [\n          { id: state.descriptionId, children: children ?? lastError?.message ?? FALLBACK_MESSAGE },\n          elementProps,\n        ],\n      }\n    );\n  }\n);\n\nexport namespace ErrorDialogDescription {\n  export type Props = ErrorDialogDescriptionProps;\n  export type State = AlertDialogCore.State;\n}\n"],"mappings":";;;;;;AAUA,MAAM,mBAAmB;AAIzB,MAAa,yBAAyB,WACpC,SAAS,uBAAuB,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBAAgB,cAAc;CACrG,MAAM,EAAE,OAAO,iBAAiB,uBAAuB;CACvD,MAAM,EAAE,cAAc,uBAAuB;AAE7C,QAAO,cACL,KACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK;EACL,OAAO,CACL;GAAE,IAAI,MAAM;GAAe,UAAU,YAAY,WAAW,WAAW;GAAkB,EACzF,aACD;EACF,CACF;EAEJ"}

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

@@ -0,0 +1,57 @@
+"use client";
+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 { ErrorDialogContextProvider } from "./context.js";
+import { AlertDialogDataAttrs, ErrorDialogCore } from "@videojs/core";
+import { createAlertDialog, createTransition, selectError } from "@videojs/core/dom";
+import { useSnapshot } from "@videojs/store/react";
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/error-dialog/error-dialog-root.tsx
+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) => {
+			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();
+	if (!errorState) return null;
+	return /* @__PURE__ */ jsx(ErrorDialogContextProvider, {
+		value: { lastError: lastError.current },
+		children: /* @__PURE__ */ jsx(AlertDialogContextProvider, {
+			value: {
+				core,
+				dialog,
+				state,
+				stateAttrMap: AlertDialogDataAttrs
+			},
+			children
+		})
+	});
+}
+//#endregion
+export { ErrorDialogRoot };
+
+//# sourceMappingURL=error-dialog-root.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"error-dialog-root.js","names":[],"sources":["../../../../src/ui/error-dialog/error-dialog-root.tsx"],"sourcesContent":["'use client';\n\nimport { 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":";;;;;;;;;;;;;AAmBA,SAAgB,gBAAgB,EAAE,YAA6C;CAC7E,MAAM,CAAC,QAAQ,eAAe,IAAI,iBAAiB,CAAC;CACpD,MAAM,aAAa,UAAU,YAAY;CACzC,MAAM,YAAY,OAAO,YAAY,SAAS,KAAK;AAEnD,KAAI,YAAY,MAAO,WAAU,UAAU,WAAW;CAEtD,MAAM,gBAAgB,aAAa,WAAW;CAE9C,MAAM,CAAC,UAAU,eACf,kBAAkB;EAChB,YAAY,kBAAkB;EAC9B,eAAe,aAAsB;AACnC,OAAI,CAAC,SACH,eAAc,SAAS,cAAc;;EAG1C,CAAC,CACH;CAED,MAAM,UAAU,UAAU,qBAAqB;CAC/C,MAAM,gBAAgB,UAAU,oBAAoB;AAEpD,MAAK,WAAW,QAAQ;AACxB,MAAK,iBAAiB,cAAc;AAEpC,iBAAgB;EACd,MAAM,WAAW,QAAQ,YAAY,MAAM;EAC3C,MAAM,EAAE,QAAQ,WAAW,OAAO,MAAM;AAExC,MAAI,YAAY,CAAC,OACf,QAAO,MAAM;WACJ,CAAC,YAAY,OACtB,QAAO,OAAO;IAEf,CAAC,YAAY,OAAO,OAAO,CAAC;AAE/B,YAAW,OAAO;CAElB,MAAM,QAAQ,YAAY,OAAO,MAAM;AACvC,MAAK,SAAS,MAAM;CACpB,MAAM,QAAQ,KAAK,UAAU;AAE7B,KAAI,CAAC,WAAY,QAAO;AAExB,QACE,oBAAC,4BAAD;EAA4B,OAAO,EAAE,WAAW,UAAU,SAAS;YACjE,oBAAC,4BAAD;GAA4B,OAAO;IAAE;IAAM;IAAQ;IAAO,cAAc;IAAsB;GAC3F;GAC0B,CAAA;EACF,CAAA"}

package/dist/default/ui/error-dialog/index.js

@@ -0,0 +1,3 @@
+import { useErrorDialogContext } from "./context.js";
+import { index_parts_exports } from "./index.parts.js";
+export { index_parts_exports as ErrorDialog, useErrorDialogContext };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/error-dialog/index.parts.ts"],"sourcesContent":["export {\n  AlertDialogClose as Close,\n  type AlertDialogCloseProps as CloseProps,\n} from '../alert-dialog/alert-dialog-close';\nexport {\n  AlertDialogPopup as Popup,\n  type AlertDialogPopupProps as PopupProps,\n} from '../alert-dialog/alert-dialog-popup';\nexport {\n  AlertDialogTitle as Title,\n  type AlertDialogTitleProps as TitleProps,\n} from '../alert-dialog/alert-dialog-title';\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';\n"],"mappings":""}

package/dist/default/ui/fullscreen-button/fullscreen-button.js

@@ -1,9 +1,7 @@
-'use client';
-
+"use client";
 import { createMediaButton } from "../create-media-button.js";
 import { FullscreenButtonCore, FullscreenButtonDataAttrs } from "@videojs/core";
 import { selectFullscreen } from "@videojs/core/dom";
-
 //#region src/ui/fullscreen-button/fullscreen-button.tsx
 /** A button that toggles fullscreen. */
 const FullscreenButton = createMediaButton({
@@ -13,7 +11,7 @@ const FullscreenButton = createMediaButton({
 	selector: selectFullscreen,
 	action: (core, state) => core.toggle(state)
 });
-
 //#endregion
 export { FullscreenButton };
+
 //# sourceMappingURL=fullscreen-button.js.map