@videojs/react 0.1.0-preview.8 → 10.0.0-alpha.11

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

@@ -0,0 +1,3 @@
+import { AlertDialogContextValue, useAlertDialogContext } from "./context.js";
+import { index_parts_d_exports } from "./index.parts.js";
+export { index_parts_d_exports as AlertDialog, type AlertDialogContextValue, useAlertDialogContext };

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

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

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

@@ -0,0 +1,13 @@
+import { AlertDialogClose, AlertDialogCloseProps } from "./alert-dialog-close.js";
+import { AlertDialogDescription, AlertDialogDescriptionProps } from "./alert-dialog-description.js";
+import { AlertDialogPopup, AlertDialogPopupProps } from "./alert-dialog-popup.js";
+import { AlertDialogRoot, AlertDialogRootProps } from "./alert-dialog-root.js";
+import { AlertDialogTitle, AlertDialogTitleProps } from "./alert-dialog-title.js";
+
+//#region src/ui/alert-dialog/index.parts.d.ts
+declare namespace index_parts_d_exports {
+  export { AlertDialogClose as Close, AlertDialogCloseProps as CloseProps, AlertDialogDescription as Description, AlertDialogDescriptionProps as DescriptionProps, AlertDialogPopup as Popup, AlertDialogPopupProps as PopupProps, AlertDialogRoot as Root, AlertDialogRootProps as RootProps, AlertDialogTitle as Title, AlertDialogTitleProps as TitleProps };
+}
+//#endregion
+export { index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.d.ts","names":[],"sources":["../../../../src/ui/alert-dialog/index.parts.ts"],"mappings":""}

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

@@ -0,0 +1,19 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { AlertDialogClose } from "./alert-dialog-close.js";
+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,
+	Description: () => AlertDialogDescription,
+	Popup: () => AlertDialogPopup,
+	Root: () => AlertDialogRoot,
+	Title: () => AlertDialogTitle
+});
+
+//#endregion
+export { index_parts_exports };
+//# sourceMappingURL=index.parts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/alert-dialog/index.parts.ts"],"sourcesContent":["export { AlertDialogClose as Close, type AlertDialogCloseProps as CloseProps } from './alert-dialog-close';\nexport {\n  AlertDialogDescription as Description,\n  type AlertDialogDescriptionProps as DescriptionProps,\n} from './alert-dialog-description';\nexport { AlertDialogPopup as Popup, type AlertDialogPopupProps as PopupProps } from './alert-dialog-popup';\nexport { AlertDialogRoot as Root, type AlertDialogRootProps as RootProps } from './alert-dialog-root';\nexport { AlertDialogTitle as Title, type AlertDialogTitleProps as TitleProps } from './alert-dialog-title';\n"],"mappings":""}

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

@@ -0,0 +1,32 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as react from "react";
+import { BufferingIndicatorCore } from "@videojs/core";
+
+//#region src/ui/buffering-indicator/buffering-indicator.d.ts
+interface BufferingIndicatorProps extends UIComponentProps<'div', BufferingIndicatorCore.State>, BufferingIndicatorCore.Props {}
+/**
+ * Displays a buffering indicator when media is waiting for data.
+ *
+ * Visibility is delayed (default 500ms) to avoid flashing on quick buffers.
+ *
+ * @example
+ * ```tsx
+ * <BufferingIndicator />
+ *
+ * <BufferingIndicator delay={1000} />
+ *
+ * <BufferingIndicator
+ *   render={(props, state) => (
+ *     <div {...props}>{state.visible && <Spinner />}</div>
+ *   )}
+ * />
+ * ```
+ */
+declare const BufferingIndicator: react.ForwardRefExoticComponent<Omit<BufferingIndicatorProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare namespace BufferingIndicator {
+  type Props = BufferingIndicatorProps;
+  type State = BufferingIndicatorCore.State;
+}
+//#endregion
+export { BufferingIndicator, BufferingIndicatorProps };
+//# sourceMappingURL=buffering-indicator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"buffering-indicator.d.ts","names":[],"sources":["../../../../src/ui/buffering-indicator/buffering-indicator.tsx"],"mappings":";;;;;UAWiB,uBAAA,SACP,gBAAA,QAAwB,sBAAA,CAAuB,KAAA,GACrD,sBAAA,CAAuB,KAAA;;AAF3B;;;;;;;;;;;;;;;AAsBA;;cAAa,kBAAA,EAAkB,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,uBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAoCd,kBAAA;EAAA,KACH,KAAA,GAAQ,uBAAA;EAAA,KACR,KAAA,GAAQ,sBAAA,CAAuB,KAAA;AAAA"}

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

@@ -0,0 +1,53 @@
+'use client';
+
+import { usePlayer } from "../../player/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { logMissingFeature, selectPlayback } from "@videojs/core/dom";
+import { forwardRef, useState, useSyncExternalStore } from "react";
+import { BufferingIndicatorCore, BufferingIndicatorDataAttrs } from "@videojs/core";
+
+//#region src/ui/buffering-indicator/buffering-indicator.tsx
+/**
+* Displays a buffering indicator when media is waiting for data.
+*
+* Visibility is delayed (default 500ms) to avoid flashing on quick buffers.
+*
+* @example
+* ```tsx
+* <BufferingIndicator />
+*
+* <BufferingIndicator delay={1000} />
+*
+* <BufferingIndicator
+*   render={(props, state) => (
+*     <div {...props}>{state.visible && <Spinner />}</div>
+*   )}
+* />
+* ```
+*/
+const BufferingIndicator = forwardRef(function BufferingIndicator(componentProps, forwardedRef) {
+	const { render, className, style, delay, ...elementProps } = componentProps;
+	const playback = usePlayer(selectPlayback);
+	const [core] = useState(() => new BufferingIndicatorCore());
+	core.setProps({ delay });
+	if (playback) core.update(playback);
+	const state = useSyncExternalStore((cb) => core.state.subscribe(cb), () => core.state.current, () => core.state.current);
+	if (!playback) {
+		logMissingFeature("BufferingIndicator", "playback");
+		return null;
+	}
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: BufferingIndicatorDataAttrs,
+		ref: [forwardedRef],
+		props: [elementProps]
+	});
+});
+
+//#endregion
+export { BufferingIndicator };
+//# sourceMappingURL=buffering-indicator.js.map

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

@@ -0,0 +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 { 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  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":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,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,MAAK,SAAS,EAAE,OAAO,CAAC;AAExB,KAAI,SAAU,MAAK,OAAO,SAAS;CAEnC,MAAM,QAAQ,sBACX,OAAO,KAAK,MAAM,UAAU,GAAG,QAC1B,KAAK,MAAM,eACX,KAAK,MAAM,QAClB;AAED,KAAI,CAAC,UAAU;AACA,oBAAkB,sBAAsB,WAAW;AAChE,SAAO;;AAGT,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC,aAAa;EACtB,CACF;EACD"}

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"captions-button.d.ts","names":[],"sources":["../../../../src/ui/captions-button/captions-button.tsx"],"mappings":";;;;;UAQiB,mBAAA,SACP,gBAAA,WAA2B,kBAAA,CAAmB,KAAA,GACpD,kBAAA,CAAmB,KAAA;;cAGV,cAAA,EAAc,KAAA,CAAA,yBAAA,CAAA,mBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBAQV,cAAA;EAAA,KACH,KAAA,GAAQ,mBAAA;EAAA,KACR,KAAA,GAAQ,kBAAA,CAAmB,KAAA;AAAA"}

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

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

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

@@ -0,0 +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"}

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

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

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

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

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

@@ -0,0 +1,16 @@
+'use client';
+
+import { createContext, useContext } from "react";
+
+//#region src/ui/controls/context.tsx
+const ControlsContext = createContext(null);
+const ControlsContextProvider = ControlsContext.Provider;
+function useControlsContext() {
+	const ctx = useContext(ControlsContext);
+	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/dev/ui/controls/context.js.map

@@ -0,0 +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"}

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

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

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

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

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

@@ -0,0 +1,30 @@
+'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) {
+	const { render, className, style, children, ...elementProps } = componentProps;
+	const { state, stateAttrMap } = useControlsContext();
+	const role = elementProps["aria-label"] || elementProps["aria-labelledby"] ? "group" : void 0;
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: [forwardedRef],
+		props: [{
+			role,
+			children
+		}, elementProps]
+	});
+});
+
+//#endregion
+export { ControlsGroup };
+//# sourceMappingURL=controls-group.js.map

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

@@ -0,0 +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"}

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

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

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

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

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

@@ -0,0 +1,43 @@
+'use client';
+
+import { usePlayer } from "../../player/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { ControlsContextProvider } from "./context.js";
+import { logMissingFeature, selectControls } from "@videojs/core/dom";
+import { forwardRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { ControlsCore, ControlsDataAttrs } from "@videojs/core";
+
+//#region src/ui/controls/controls-root.tsx
+/** Root container for player controls state and rendered control content. */
+const ControlsRoot = forwardRef(function ControlsRoot(componentProps, forwardedRef) {
+	const { render, className, style, children, ...elementProps } = componentProps;
+	const controls = usePlayer(selectControls);
+	const [core] = useState(() => new ControlsCore());
+	if (!controls) {
+		logMissingFeature("Controls.Root", "controls");
+		return null;
+	}
+	core.setMedia(controls);
+	const state = core.getState();
+	return /* @__PURE__ */ jsx(ControlsContextProvider, {
+		value: {
+			state,
+			stateAttrMap: ControlsDataAttrs
+		},
+		children: renderElement("div", {
+			render,
+			className,
+			style
+		}, {
+			state,
+			stateAttrMap: ControlsDataAttrs,
+			ref: [forwardedRef],
+			props: [{ children }, elementProps]
+		})
+	});
+});
+
+//#endregion
+export { ControlsRoot };
+//# sourceMappingURL=controls-root.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"controls-root.js","names":[],"sources":["../../../../src/ui/controls/controls-root.tsx"],"sourcesContent":["'use client';\n\nimport { ControlsCore, ControlsDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectControls } from '@videojs/core/dom';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { ControlsContextProvider } from './context';\n\nexport interface ControlsRootProps extends UIComponentProps<'div', ControlsCore.State> {\n  children?: ReactNode | undefined;\n}\n\n/** Root container for player controls state and rendered control content. */\nexport const ControlsRoot = forwardRef(function ControlsRoot(\n  componentProps: ControlsRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, children, ...elementProps } = componentProps;\n\n  const controls = usePlayer(selectControls);\n\n  const [core] = useState(() => new ControlsCore());\n\n  if (!controls) {\n    if (__DEV__) logMissingFeature('Controls.Root', 'controls');\n    return null;\n  }\n\n  core.setMedia(controls);\n  const state = core.getState();\n\n  return (\n    <ControlsContextProvider value={{ state, stateAttrMap: ControlsDataAttrs }}>\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: ControlsDataAttrs,\n          ref: [forwardedRef],\n          props: [{ children }, elementProps],\n        }\n      )}\n    </ControlsContextProvider>\n  );\n});\n\nexport namespace ControlsRoot {\n  export type Props = ControlsRootProps;\n  export type State = ControlsCore.State;\n}\n"],"mappings":";;;;;;;;;;;;AAiBA,MAAa,eAAe,WAAW,SAAS,aAC9C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,iBAAiB;CAEhE,MAAM,WAAW,UAAU,eAAe;CAE1C,MAAM,CAAC,QAAQ,eAAe,IAAI,cAAc,CAAC;AAEjD,KAAI,CAAC,UAAU;AACA,oBAAkB,iBAAiB,WAAW;AAC3D,SAAO;;AAGT,MAAK,SAAS,SAAS;CACvB,MAAM,QAAQ,KAAK,UAAU;AAE7B,QACE,oBAAC;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"}

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.d.ts","names":[],"sources":["../../../../src/ui/controls/index.parts.ts"],"mappings":""}

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

@@ -0,0 +1,13 @@
+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/dev/ui/controls/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/controls/index.parts.ts"],"sourcesContent":["export { ControlsGroup as Group, type ControlsGroupProps as GroupProps } from './controls-group';\nexport { ControlsRoot as Root, type ControlsRootProps as RootProps } from './controls-root';\n"],"mappings":""}

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

@@ -0,0 +1,34 @@
+'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;
+	const Component = forwardRef(function ContextPart(componentProps, forwardedRef) {
+		const { render, className, style, ...elementProps } = componentProps;
+		const context = useContext();
+		const dynamicProps = getProps?.(context.state);
+		return renderElement(tag, {
+			render,
+			className,
+			style
+		}, {
+			state: context.state,
+			stateAttrMap: context.stateAttrMap,
+			ref: forwardedRef,
+			props: [
+				staticProps,
+				dynamicProps,
+				elementProps
+			].filter(Boolean)
+		});
+	});
+	Component.displayName = displayName;
+	return Component;
+}
+
+//#endregion
+export { createContextPart };
+//# sourceMappingURL=create-context-part.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,55 @@
+'use client';
+
+import { usePlayer } from "../player/context.js";
+import { renderElement } from "../utils/use-render.js";
+import { useButton } from "./hooks/use-button.js";
+import { logMissingFeature } from "@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) {
+	const { displayName, core: CoreClass, stateAttrMap, selector, action } = config;
+	const corePropKeys = new Set(Object.keys(CoreClass.defaultProps));
+	const Component = forwardRef(function MediaButton(componentProps, forwardedRef) {
+		const { render, className, style, ...rest } = componentProps;
+		const coreProps = {};
+		const elementProps = {};
+		for (const key of Object.keys(rest)) if (corePropKeys.has(key)) coreProps[key] = rest[key];
+		else elementProps[key] = rest[key];
+		const feature = usePlayer(selector);
+		const [core] = useState(() => new CoreClass());
+		core.setProps(coreProps);
+		const { getButtonProps, buttonRef } = useButton({
+			displayName,
+			onActivate: () => action(core, feature),
+			isDisabled: () => !!coreProps.disabled || !feature
+		});
+		if (!feature) {
+			logMissingFeature(displayName, selector.displayName ?? displayName);
+			return null;
+		}
+		core.setMedia(feature);
+		const state = core.getState();
+		return renderElement("button", {
+			render,
+			className,
+			style
+		}, {
+			state,
+			stateAttrMap,
+			ref: [forwardedRef, buttonRef],
+			props: [
+				core.getAttrs(state),
+				elementProps,
+				getButtonProps()
+			]
+		});
+	});
+	Component.displayName = displayName;
+	return Component;
+}
+
+//#endregion
+export { createMediaButton };
+//# sourceMappingURL=create-media-button.js.map

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

@@ -0,0 +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,SAAS;AACC,qBAAkB,aAAa,SAAS,eAAe,YAAY;AAChF,UAAO;;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/dev/ui/fullscreen-button/fullscreen-button.d.ts

@@ -0,0 +1,15 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as react from "react";
+import { FullscreenButtonCore } from "@videojs/core";
+
+//#region src/ui/fullscreen-button/fullscreen-button.d.ts
+interface FullscreenButtonProps extends UIComponentProps<'button', FullscreenButtonCore.State>, FullscreenButtonCore.Props {}
+/** A button that toggles fullscreen. */
+declare const FullscreenButton: react.ForwardRefExoticComponent<FullscreenButtonProps & react.RefAttributes<HTMLButtonElement>>;
+declare namespace FullscreenButton {
+  type Props = FullscreenButtonProps;
+  type State = FullscreenButtonCore.State;
+}
+//#endregion
+export { FullscreenButton, FullscreenButtonProps };
+//# sourceMappingURL=fullscreen-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fullscreen-button.d.ts","names":[],"sources":["../../../../src/ui/fullscreen-button/fullscreen-button.tsx"],"mappings":";;;;;UAQiB,qBAAA,SACP,gBAAA,WAA2B,oBAAA,CAAqB,KAAA,GACtD,oBAAA,CAAqB,KAAA;;cAGZ,gBAAA,EAAgB,KAAA,CAAA,yBAAA,CAAA,qBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBAQZ,gBAAA;EAAA,KACH,KAAA,GAAQ,qBAAA;EAAA,KACR,KAAA,GAAQ,oBAAA,CAAqB,KAAA;AAAA"}

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

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

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

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

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

@@ -0,0 +1,2 @@
+import { FullscreenButton, FullscreenButtonProps } from "./fullscreen-button.js";
+export { FullscreenButton, type FullscreenButtonProps };

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

@@ -0,0 +1,3 @@
+import { FullscreenButton } from "./fullscreen-button.js";
+
+export { FullscreenButton };

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

@@ -0,0 +1,40 @@
+import { ComponentPropsWithRef, Ref } from "react";
+
+//#region src/ui/hooks/use-button.d.ts
+interface UseButtonParameters {
+  displayName: string;
+  onActivate: () => void;
+  isDisabled: () => boolean;
+}
+interface UseButtonReturnValue {
+  getButtonProps: (externalProps?: ComponentPropsWithRef<'button'>) => ComponentPropsWithRef<'button'>;
+  buttonRef: Ref<HTMLElement>;
+}
+/**
+ * Hook for button behavior with keyboard and pointer interaction.
+ *
+ * @example
+ * ```tsx
+ * const { getButtonProps, buttonRef } = useButton({
+ *   displayName: 'PlayButton',
+ *   onActivate: () => togglePlayback(),
+ *   isDisabled: () => disabled,
+ * });
+ *
+ * return useRender('button', componentProps, {
+ *   state,
+ *   ref: [forwardedRef, buttonRef],
+ *   props: [elementProps, getButtonProps],
+ * });
+ * ```
+ *
+ * @param params - Button configuration with activation handler and disabled check.
+ */
+declare function useButton(params: UseButtonParameters): UseButtonReturnValue;
+declare namespace useButton {
+  type Parameters = UseButtonParameters;
+  type ReturnValue = UseButtonReturnValue;
+}
+//#endregion
+export { useButton };
+//# sourceMappingURL=use-button.d.ts.map