@videojs/react 10.0.0-beta.9 → 10.0.0-rc.1

package/dist/dev/ui/captions-radio-group/captions-radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"captions-radio-group.js","names":[],"sources":["../../../../src/ui/captions-radio-group/captions-radio-group.tsx"],"sourcesContent":["import { type CaptionsRadioGroupCore, CaptionsRadioGroupDataAttrs, type MenuOptionState } from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { ReactElement, ReactNode } from 'react';\nimport { createContext, Fragment, forwardRef, useContext } from 'react';\n\nimport type { HTMLProps, UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuOptionState } from '../menu/context';\nimport { MenuRadioGroup } from '../menu/menu-radio-group';\nimport type { MenuRadioItemProps } from '../menu/menu-radio-item';\nimport {\n  type CaptionsOption,\n  type CaptionsOptionsProps,\n  type CaptionsOptionsResult,\n  useCaptionsOptions,\n} from './use-captions-options';\n\nexport type CaptionsRadioGroupItemState = CaptionsOption & {\n  /** Whether this option is currently selected. */\n  checked: boolean;\n};\n\nexport interface CaptionsRadioGroupItemProps extends Omit<MenuRadioItemProps, 'ref'> {\n  /** Text track value represented by the item. */\n  'data-track': string;\n}\n\nexport interface CaptionsRadioGroupRootProps extends CaptionsOptionsProps {\n  children?: ReactNode;\n}\n\nexport interface CaptionsRadioGroupOptionsProps extends Omit<\n  UIComponentProps<'div', CaptionsRadioGroupCore.State>,\n  'children'\n> {\n  /** Render one consumer-owned menu radio item for every captions option. */\n  renderItem: (props: CaptionsRadioGroupItemProps, state: CaptionsRadioGroupItemState) => ReactElement;\n}\n\nexport type CaptionsRadioGroupValueProps = UIComponentProps<'span', CaptionsOptionsResult>;\n\nexport interface CaptionsRadioGroupLegacyProps extends CaptionsRadioGroupOptionsProps, CaptionsOptionsProps {}\n\nconst CaptionsRadioGroupContext = createContext<CaptionsOptionsResult | null | undefined>(undefined);\n\n/** Owns captions option state and shares it with an enclosing menu. Does not render a DOM element. */\nexport function CaptionsRadioGroupRoot({ children, ...props }: CaptionsRadioGroupRootProps): ReactNode {\n  const captions = useCaptionsOptions(props);\n\n  useMenuOptionState(toMenuOptionState(captions));\n\n  return <CaptionsRadioGroupContext.Provider value={captions}>{children}</CaptionsRadioGroupContext.Provider>;\n}\n\n/** Displays the selected captions label. */\nexport const CaptionsRadioGroupValue = forwardRef<HTMLSpanElement, CaptionsRadioGroupValueProps>(\n  function CaptionsRadioGroupValue({ render, className, style, ...elementProps }, forwardedRef) {\n    const captions = useCaptionsRadioGroupContext();\n    if (!captions) return null;\n\n    return renderElement(\n      'span',\n      { render, className, style },\n      { state: captions, ref: forwardedRef, props: [elementProps, { children: captions.selectedLabel }] }\n    );\n  }\n);\n\n/** Renders menu radio items for the player's captions and subtitles tracks. */\nexport const CaptionsRadioGroupOptions = forwardRef<HTMLDivElement, CaptionsRadioGroupOptionsProps>(\n  function CaptionsRadioGroupOptions(componentProps, forwardedRef) {\n    const {\n      renderItem,\n      render,\n      className,\n      style,\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledBy,\n      ...elementProps\n    } = componentProps;\n    const captions = useCaptionsRadioGroupContext();\n    if (!captions) return null;\n\n    const { state, value, options, setValue } = captions;\n    const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === undefined ? captions.label : undefined);\n\n    return (\n      <MenuRadioGroup\n        {...getStateDataAttrs(state, CaptionsRadioGroupDataAttrs)}\n        {...elementProps}\n        ref={forwardedRef}\n        className={isFunction(className) ? className(state) : className}\n        style={isFunction(style) ? style(state) : style}\n        render={isFunction(render) ? (props: HTMLProps) => render(props, state) : render}\n        value={value}\n        onValueChange={setValue}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-disabled={state.disabled || undefined}\n        hidden={state.hidden}\n      >\n        {options.map((option) => {\n          const itemState = { ...option, checked: option.value === value };\n\n          return (\n            <Fragment key={option.value}>\n              {renderItem(\n                {\n                  value: option.value,\n                  disabled: option.disabled,\n                  'data-track': option.value,\n                  children: option.label,\n                },\n                itemState\n              )}\n            </Fragment>\n          );\n        })}\n      </MenuRadioGroup>\n    );\n  }\n);\n\n/** @internal Compatibility adapter for the existing preset sources. */\nexport const CaptionsRadioGroupLegacy = forwardRef<HTMLDivElement, CaptionsRadioGroupLegacyProps>(\n  function CaptionsRadioGroupLegacy({ label, formatTrack, disabled, ...props }, forwardedRef) {\n    return (\n      <CaptionsRadioGroupRoot label={label} formatTrack={formatTrack} disabled={disabled}>\n        <CaptionsRadioGroupOptions {...props} ref={forwardedRef} />\n      </CaptionsRadioGroupRoot>\n    );\n  }\n);\n\nfunction useCaptionsRadioGroupContext(): CaptionsOptionsResult | null {\n  const captions = useContext(CaptionsRadioGroupContext);\n  if (captions === undefined) throw new Error('CaptionsRadioGroup parts must be used within CaptionsRadioGroup.Root');\n\n  return captions;\n}\n\nfunction toMenuOptionState(captions: CaptionsOptionsResult | null): MenuOptionState {\n  return {\n    value: captions?.selectedLabel ?? '',\n    disabled: captions?.disabled ?? true,\n    hidden: captions?.hidden ?? true,\n    availability: captions?.state.availability ?? 'unsupported',\n  };\n}\n\nexport namespace CaptionsRadioGroupRoot {\n  export type Props = CaptionsRadioGroupRootProps;\n}\n\nexport namespace CaptionsRadioGroupValue {\n  export type Props = CaptionsRadioGroupValueProps;\n  export type State = CaptionsOptionsResult;\n}\n\nexport namespace CaptionsRadioGroupOptions {\n  export type Props = CaptionsRadioGroupOptionsProps;\n  export type State = CaptionsRadioGroupCore.State;\n  export type ItemProps = CaptionsRadioGroupItemProps;\n  export type ItemState = CaptionsRadioGroupItemState;\n}\n"],"mappings":";;;;;;;;;;AA4CA,MAAM,4BAA4B,cAAwD,KAAA,CAAS;;AAGnG,SAAgB,uBAAuB,EAAE,UAAU,GAAG,SAAiD;CACrG,MAAM,WAAW,mBAAmB,KAAK;CAEzC,mBAAmB,kBAAkB,QAAQ,CAAC;CAE9C,OAAO,oBAAC,0BAA0B,UAA3B;EAAoC,OAAO;EAAW;CAA6C,CAAA;AAC5G;;AAGA,MAAa,0BAA0B,WACrC,SAAS,wBAAwB,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAAgB,cAAc;CAC5F,MAAM,WAAW,6BAA6B;CAC9C,IAAI,CAAC,UAAU,OAAO;CAEtB,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EAAE,OAAO;EAAU,KAAK;EAAc,OAAO,CAAC,cAAc,EAAE,UAAU,SAAS,cAAc,CAAC;CAAE,CACpG;AACF,CACF;;AAGA,MAAa,4BAA4B,WACvC,SAAS,0BAA0B,gBAAgB,cAAc;CAC/D,MAAM,EACJ,YACA,QACA,WACA,OACA,cAAc,eACd,mBAAmB,gBACnB,GAAG,iBACD;CACJ,MAAM,WAAW,6BAA6B;CAC9C,IAAI,CAAC,UAAU,OAAO;CAEtB,MAAM,EAAE,OAAO,OAAO,SAAS,aAAa;CAC5C,MAAM,YAAY,kBAAkB,mBAAmB,KAAA,IAAY,SAAS,QAAQ,KAAA;CAEpF,OACE,oBAAC,gBAAD;EACE,GAAI,kBAAkB,OAAO,2BAA2B;EACxD,GAAI;EACJ,KAAK;EACL,WAAW,WAAW,SAAS,IAAI,UAAU,KAAK,IAAI;EACtD,OAAO,WAAW,KAAK,IAAI,MAAM,KAAK,IAAI;EAC1C,QAAQ,WAAW,MAAM,KAAK,UAAqB,OAAO,OAAO,KAAK,IAAI;EACnE;EACP,eAAe;EACf,cAAY;EACZ,mBAAiB;EACjB,iBAAe,MAAM,YAAY,KAAA;EACjC,QAAQ,MAAM;EAEb,UAAA,QAAQ,KAAK,WAAW;GACvB,MAAM,YAAY;IAAE,GAAG;IAAQ,SAAS,OAAO,UAAU;GAAM;GAE/D,OACE,oBAAC,UAAD,EAAA,UACG,WACC;IACE,OAAO,OAAO;IACd,UAAU,OAAO;IACjB,cAAc,OAAO;IACrB,UAAU,OAAO;GACnB,GACA,SACF,EACQ,GAVK,OAAO,KAUZ;EAEd,CAAC;CACa,CAAA;AAEpB,CACF;;AAGA,MAAa,2BAA2B,WACtC,SAAS,yBAAyB,EAAE,OAAO,aAAa,UAAU,GAAG,SAAS,cAAc;CAC1F,OACE,oBAAC,wBAAD;EAA+B;EAAoB;EAAuB;EACxE,UAAA,oBAAC,2BAAD;GAA2B,GAAI;GAAO,KAAK;EAAe,CAAA;CACpC,CAAA;AAE5B,CACF;AAEA,SAAS,+BAA6D;CACpE,MAAM,WAAW,WAAW,yBAAyB;CACrD,IAAI,aAAa,KAAA,GAAW,MAAM,IAAI,MAAM,sEAAsE;CAElH,OAAO;AACT;AAEA,SAAS,kBAAkB,UAAyD;CAClF,OAAO;EACL,OAAO,UAAU,iBAAiB;EAClC,UAAU,UAAU,YAAY;EAChC,QAAQ,UAAU,UAAU;EAC5B,cAAc,UAAU,MAAM,gBAAgB;CAChD;AACF"}

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

@@ -0,0 +1,4 @@
+import { CaptionsOption, CaptionsOptionsProps, CaptionsOptionsResult, useCaptionsOptions } from "./use-captions-options.js";
+import { CaptionsRadioGroupLegacy } from "./captions-radio-group.js";
+import { index_parts_d_exports } from "./index.parts.js";
+export { type CaptionsOption, type CaptionsOptionsProps, type CaptionsOptionsResult, index_parts_d_exports as CaptionsRadioGroup, CaptionsRadioGroupLegacy, useCaptionsOptions };

package/dist/dev/ui/captions-radio-group/index.js

@@ -0,0 +1,4 @@
+import { useCaptionsOptions } from "./use-captions-options.js";
+import { CaptionsRadioGroupLegacy } from "./captions-radio-group.js";
+import { index_parts_exports } from "./index.parts.js";
+export { index_parts_exports as CaptionsRadioGroup, CaptionsRadioGroupLegacy, useCaptionsOptions };

package/dist/dev/ui/captions-radio-group/index.parts.d.ts

@@ -0,0 +1,7 @@
+import { CaptionsRadioGroupItemProps, CaptionsRadioGroupItemState, CaptionsRadioGroupOptions, CaptionsRadioGroupOptionsProps, CaptionsRadioGroupRoot, CaptionsRadioGroupRootProps, CaptionsRadioGroupValue, CaptionsRadioGroupValueProps } from "./captions-radio-group.js";
+declare namespace index_parts_d_exports {
+  export { CaptionsRadioGroupItemProps as ItemProps, CaptionsRadioGroupItemState as ItemState, CaptionsRadioGroupOptions as Options, CaptionsRadioGroupOptionsProps as OptionsProps, CaptionsRadioGroupRoot as Root, CaptionsRadioGroupRootProps as RootProps, CaptionsRadioGroupValue as Value, CaptionsRadioGroupValueProps as ValueProps };
+}
+//#endregion
+export { type CaptionsRadioGroupItemProps as ItemProps, type CaptionsRadioGroupItemState as ItemState, CaptionsRadioGroupOptions as Options, type CaptionsRadioGroupOptionsProps as OptionsProps, CaptionsRadioGroupRoot as Root, type CaptionsRadioGroupRootProps as RootProps, CaptionsRadioGroupValue as Value, type CaptionsRadioGroupValueProps as ValueProps, index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

package/dist/dev/ui/captions-radio-group/index.parts.d.ts.map

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

package/dist/dev/ui/captions-radio-group/index.parts.js

@@ -0,0 +1,12 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { CaptionsRadioGroupOptions, CaptionsRadioGroupRoot, CaptionsRadioGroupValue } from "./captions-radio-group.js";
+//#region src/ui/captions-radio-group/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Options: () => CaptionsRadioGroupOptions,
+	Root: () => CaptionsRadioGroupRoot,
+	Value: () => CaptionsRadioGroupValue
+});
+//#endregion
+export { CaptionsRadioGroupOptions as Options, CaptionsRadioGroupRoot as Root, CaptionsRadioGroupValue as Value, index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

package/dist/dev/ui/captions-radio-group/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/captions-radio-group/index.parts.ts"],"sourcesContent":["export {\n  type CaptionsRadioGroupItemProps as ItemProps,\n  type CaptionsRadioGroupItemState as ItemState,\n  CaptionsRadioGroupOptions as Options,\n  type CaptionsRadioGroupOptionsProps as OptionsProps,\n  CaptionsRadioGroupRoot as Root,\n  type CaptionsRadioGroupRootProps as RootProps,\n  CaptionsRadioGroupValue as Value,\n  type CaptionsRadioGroupValueProps as ValueProps,\n} from './captions-radio-group';\n"],"mappings":""}

package/dist/dev/ui/captions-radio-group/use-captions-options.d.ts

@@ -0,0 +1,31 @@
+import { TranslatedRadioOption } from "../hooks/create-radio-options-hook.js";
+import { CaptionsRadioGroupCore, CaptionsRadioGroupOption } from "@videojs/core";
+//#region src/ui/captions-radio-group/use-captions-options.d.ts
+interface CaptionsOptionsProps extends CaptionsRadioGroupCore.Props {}
+type CaptionsOption = TranslatedRadioOption<CaptionsRadioGroupOption>;
+interface CaptionsOptionsResult {
+  state: CaptionsRadioGroupCore.State;
+  label: string;
+  value: string;
+  selectedLabel: string;
+  options: CaptionsOption[];
+  disabled: boolean;
+  hidden: boolean;
+  showMenu: boolean;
+  setValue: (value: string) => void;
+}
+/**
+ * Create captions menu options (including an `Off` option) from the player text track state. Returns `null` when the
+ * text tracks feature is not configured.
+ *
+ * @param props - Optional `label`, `formatTrack`, and `disabled` overrides.
+ */
+declare function useCaptionsOptions(props?: CaptionsOptionsProps): CaptionsOptionsResult | null;
+declare namespace useCaptionsOptions {
+  type Props = CaptionsOptionsProps;
+  type Result = CaptionsOptionsResult;
+  type Option = CaptionsOption;
+}
+//#endregion
+export { CaptionsOption, CaptionsOptionsProps, CaptionsOptionsResult, useCaptionsOptions };
+//# sourceMappingURL=use-captions-options.d.ts.map

package/dist/dev/ui/captions-radio-group/use-captions-options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-captions-options.d.ts","names":[],"sources":["../../../../src/ui/captions-radio-group/use-captions-options.ts"],"mappings":";;;UAKiB,6BAA6B,uBAAuB;KAEzD,iBAAiB,sBAAsB;UAElC;EACf,OAAO,uBAAuB;EAC9B;EACA;EACA;EACA,SAAS;EACT;EACA;EACA;EACA,WAAW;;;;;;;;iBAgBG,mBAAmB,QAAQ,uBAAuB;kBASjD;OACH,QAAQ;OACR,SAAS;OACT,SAAS"}

package/dist/dev/ui/captions-radio-group/use-captions-options.js

@@ -0,0 +1,29 @@
+import { createRadioOptionsHook } from "../hooks/create-radio-options-hook.js";
+import { CaptionsRadioGroupCore } from "@videojs/core";
+import { selectTextTrack } from "@videojs/core/dom";
+//#region src/ui/captions-radio-group/use-captions-options.ts
+const useCaptionsRadioOptions = createRadioOptionsHook({
+	name: "useCaptionsOptions",
+	feature: "textTrack",
+	selector: selectTextTrack,
+	createCore: () => new CaptionsRadioGroupCore()
+});
+/**
+* Create captions menu options (including an `Off` option) from the player text track state. Returns `null` when the
+* text tracks feature is not configured.
+*
+* @param props - Optional `label`, `formatTrack`, and `disabled` overrides.
+*/
+function useCaptionsOptions(props) {
+	"use no memo";
+	const result = useCaptionsRadioOptions(props);
+	if (!result) return null;
+	return {
+		...result,
+		showMenu: result.state.options.length > 2
+	};
+}
+//#endregion
+export { useCaptionsOptions };
+
+//# sourceMappingURL=use-captions-options.js.map

package/dist/dev/ui/captions-radio-group/use-captions-options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-captions-options.js","names":[],"sources":["../../../../src/ui/captions-radio-group/use-captions-options.ts"],"sourcesContent":["import { CaptionsRadioGroupCore, type CaptionsRadioGroupOption } from '@videojs/core';\nimport { selectTextTrack } from '@videojs/core/dom';\n\nimport { createRadioOptionsHook, type TranslatedRadioOption } from '../hooks/create-radio-options-hook';\n\nexport interface CaptionsOptionsProps extends CaptionsRadioGroupCore.Props {}\n\nexport type CaptionsOption = TranslatedRadioOption<CaptionsRadioGroupOption>;\n\nexport interface CaptionsOptionsResult {\n  state: CaptionsRadioGroupCore.State;\n  label: string;\n  value: string;\n  selectedLabel: string;\n  options: CaptionsOption[];\n  disabled: boolean;\n  hidden: boolean;\n  showMenu: boolean;\n  setValue: (value: string) => void;\n}\n\nconst useCaptionsRadioOptions = createRadioOptionsHook({\n  name: 'useCaptionsOptions',\n  feature: 'textTrack',\n  selector: selectTextTrack,\n  createCore: () => new CaptionsRadioGroupCore(),\n});\n\n/**\n * Create captions menu options (including an `Off` option) from the player text track state. Returns `null` when the\n * text tracks feature is not configured.\n *\n * @param props - Optional `label`, `formatTrack`, and `disabled` overrides.\n */\nexport function useCaptionsOptions(props?: CaptionsOptionsProps): CaptionsOptionsResult | null {\n  'use no memo';\n\n  const result = useCaptionsRadioOptions(props);\n  if (!result) return null;\n\n  return { ...result, showMenu: result.state.options.length > 2 };\n}\n\nexport namespace useCaptionsOptions {\n  export type Props = CaptionsOptionsProps;\n  export type Result = CaptionsOptionsResult;\n  export type Option = CaptionsOption;\n}\n"],"mappings":";;;;AAqBA,MAAM,0BAA0B,uBAAuB;CACrD,MAAM;CACN,SAAS;CACT,UAAU;CACV,kBAAkB,IAAI,uBAAuB;AAC/C,CAAC;;;;;;;AAQD,SAAgB,mBAAmB,OAA4D;CAC7F;CAEA,MAAM,SAAS,wBAAwB,KAAK;CAC5C,IAAI,CAAC,QAAQ,OAAO;CAEpB,OAAO;EAAE,GAAG;EAAQ,UAAU,OAAO,MAAM,QAAQ,SAAS;CAAE;AAChE"}

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

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { CastButtonCore } from "@videojs/core";
+//#region src/ui/cast-button/cast-button.d.ts
+interface CastButtonProps extends UIComponentProps<'button', CastButtonCore.State>, CastButtonCore.Props {}
+/** A button that toggles casting to a remote device. */
+declare const CastButton: import("react").ForwardRefExoticComponent<CastButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare namespace CastButton {
+  type Props = CastButtonProps;
+  type State = CastButtonCore.State;
+}
+//#endregion
+export { CastButton, CastButtonProps };
+//# sourceMappingURL=cast-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cast-button.d.ts","names":[],"sources":["../../../../src/ui/cast-button/cast-button.tsx"],"mappings":";;;UAMiB,wBAAwB,2BAA2B,eAAe,QAAQ,eAAe;;cAG7F,4BAAU,0BAAA,kCAAA,cAAA;kBASN;OACH,QAAQ;OACR,QAAQ,eAAe"}

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

@@ -0,0 +1,17 @@
+import { createMediaButton } from "../create-media-button.js";
+import { CastButtonCore, CastButtonDataAttrs } from "@videojs/core";
+import { selectRemotePlayback } from "@videojs/core/dom";
+//#region src/ui/cast-button/cast-button.tsx
+/** A button that toggles casting to a remote device. */
+const CastButton = createMediaButton({
+	displayName: "CastButton",
+	core: CastButtonCore,
+	stateAttrMap: CastButtonDataAttrs,
+	selector: selectRemotePlayback,
+	action: (core, state) => core.toggle(state),
+	isSupported: (state) => !state.hidden
+});
+//#endregion
+export { CastButton };
+
+//# sourceMappingURL=cast-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cast-button.js","names":[],"sources":["../../../../src/ui/cast-button/cast-button.tsx"],"sourcesContent":["import { CastButtonCore, CastButtonDataAttrs } from '@videojs/core';\nimport { selectRemotePlayback } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface CastButtonProps extends UIComponentProps<'button', CastButtonCore.State>, CastButtonCore.Props {}\n\n/** A button that toggles casting to a remote device. */\nexport const CastButton = createMediaButton<CastButtonCore, CastButtonProps>({\n  displayName: 'CastButton',\n  core: CastButtonCore,\n  stateAttrMap: CastButtonDataAttrs,\n  selector: selectRemotePlayback,\n  action: (core, state) => core.toggle(state),\n  isSupported: (state) => !state.hidden,\n});\n\nexport namespace CastButton {\n  export type Props = CastButtonProps;\n  export type State = CastButtonCore.State;\n}\n"],"mappings":";;;;;AASA,MAAa,aAAa,kBAAmD;CAC3E,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,KAAK;CAC1C,cAAc,UAAU,CAAC,MAAM;AACjC,CAAC"}

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

@@ -0,0 +1,2 @@
+import { CastButton, CastButtonProps } from "./cast-button.js";
+export { CastButton, CastButtonProps };

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

@@ -0,0 +1,2 @@
+import { CastButton } from "./cast-button.js";
+export { CastButton };

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

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

package/dist/dev/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":["import 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\n  return ctx;\n}\n\nexport function useOptionalControlsContext(): ControlsContextValue | null {\n  return useContext(ControlsContext);\n}\n"],"mappings":";;AAQA,MAAM,kBAAkB,cAA2C,IAAI;AAEvE,MAAa,0BAA0B,gBAAgB;AAEvD,SAAgB,qBAA2C;CACzD,MAAM,MAAM,WAAW,eAAe;CACtC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,kEAAkE;CAE5F,OAAO;AACT;AAEA,SAAgB,6BAA0D;CACxE,OAAO,WAAW,eAAe;AACnC"}

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

@@ -0,0 +1,16 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { ControlsCore } from "@videojs/core";
+//#region src/ui/controls/controls-backdrop.d.ts
+interface ControlsBackdropProps extends UIComponentProps<'div', ControlsCore.State> {}
+/**
+ * Presentational layer behind player controls. Renders a `<div>` with the controls state data attributes so skins can
+ * style it without reaching across sibling components.
+ */
+declare const ControlsBackdrop: import("react").ForwardRefExoticComponent<Omit<ControlsBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace ControlsBackdrop {
+  type Props = ControlsBackdropProps;
+  type State = ControlsCore.State;
+}
+//#endregion
+export { ControlsBackdrop, ControlsBackdropProps };
+//# sourceMappingURL=controls-backdrop.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"controls-backdrop.d.ts","names":[],"sources":["../../../../src/ui/controls/controls-backdrop.tsx"],"mappings":";;;UAOiB,8BAA8B,wBAAwB,aAAa;;;;;cAMvE,kCAAgB,0BAAA,KAAA,gDAAA,cAAA;kBAkBZ;OACH,QAAQ;OACR,QAAQ,aAAa"}

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

@@ -0,0 +1,28 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useControlsContext } from "./context.js";
+import { forwardRef } from "react";
+//#region src/ui/controls/controls-backdrop.tsx
+/**
+* Presentational layer behind player controls. Renders a `<div>` with the controls state data attributes so skins can
+* style it without reaching across sibling components.
+*/
+const ControlsBackdrop = forwardRef(function ControlsBackdrop({ render, className, style, ...elementProps }, forwardedRef) {
+	const { state, stateAttrMap } = useControlsContext();
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: [forwardedRef],
+		props: [{
+			role: "presentation",
+			"aria-hidden": true
+		}, elementProps]
+	});
+});
+//#endregion
+export { ControlsBackdrop };
+
+//# sourceMappingURL=controls-backdrop.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"controls-backdrop.js","names":[],"sources":["../../../../src/ui/controls/controls-backdrop.tsx"],"sourcesContent":["import type { ControlsCore } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useControlsContext } from './context';\n\nexport interface ControlsBackdropProps extends UIComponentProps<'div', ControlsCore.State> {}\n\n/**\n * Presentational layer behind player controls. Renders a `<div>` with the controls state data attributes so skins can\n * style it without reaching across sibling components.\n */\nexport const ControlsBackdrop = forwardRef<HTMLDivElement, ControlsBackdropProps>(function ControlsBackdrop(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { state, stateAttrMap } = useControlsContext();\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: [forwardedRef],\n      props: [{ role: 'presentation', 'aria-hidden': true }, elementProps],\n    }\n  );\n});\n\nexport namespace ControlsBackdrop {\n  export type Props = ControlsBackdropProps;\n  export type State = ControlsCore.State;\n}\n"],"mappings":";;;;;;;;AAaA,MAAa,mBAAmB,WAAkD,SAAS,iBACzF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,OAAO,iBAAiB,mBAAmB;CAEnD,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC;GAAE,MAAM;GAAgB,eAAe;EAAK,GAAG,YAAY;CACrE,CACF;AACF,CAAC"}

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

@@ -0,0 +1,16 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { ControlsCore } from "@videojs/core";
+import { ReactNode } from "react";
+//#region src/ui/controls/controls-content.d.ts
+interface ControlsContentProps extends UIComponentProps<'div', ControlsCore.State> {
+  children?: ReactNode | undefined;
+}
+/** Renders the interactive controls surface. */
+declare const ControlsContent: import("react").ForwardRefExoticComponent<Omit<ControlsContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace ControlsContent {
+  type Props = ControlsContentProps;
+  type State = ControlsCore.State;
+}
+//#endregion
+export { ControlsContent, ControlsContentProps };
+//# sourceMappingURL=controls-content.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"controls-content.d.ts","names":[],"sources":["../../../../src/ui/controls/controls-content.tsx"],"mappings":";;;;UAQiB,6BAA6B,wBAAwB,aAAa;EACjF,WAAW;;;cAIA,iCAAe,0BAAA,KAAA,+CAAA,cAAA;kBAmBX;OACH,QAAQ;OACR,QAAQ,aAAa"}

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

@@ -0,0 +1,27 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useControlsContext } from "./context.js";
+import { forwardRef } from "react";
+//#region src/ui/controls/controls-content.tsx
+/** Renders the interactive controls surface. */
+const ControlsContent = forwardRef(function ControlsContent(componentProps, forwardedRef) {
+	const { render, className, style, children, ...elementProps } = componentProps;
+	const { state, stateAttrMap } = useControlsContext();
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: [forwardedRef],
+		props: [
+			{ children },
+			elementProps,
+			{ "data-interactive": "" }
+		]
+	});
+});
+//#endregion
+export { ControlsContent };
+
+//# sourceMappingURL=controls-content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"controls-content.js","names":[],"sources":["../../../../src/ui/controls/controls-content.tsx"],"sourcesContent":["import 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 ControlsContentProps extends UIComponentProps<'div', ControlsCore.State> {\n  children?: ReactNode | undefined;\n}\n\n/** Renders the interactive controls surface. */\nexport const ControlsContent = forwardRef(function ControlsContent(\n  componentProps: ControlsContentProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, children, ...elementProps } = componentProps;\n  const { state, stateAttrMap } = useControlsContext();\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: [forwardedRef],\n      props: [{ children }, elementProps, { 'data-interactive': '' }],\n    }\n  );\n});\n\nexport namespace ControlsContent {\n  export type Props = ControlsContentProps;\n  export type State = ControlsCore.State;\n}\n"],"mappings":";;;;;AAaA,MAAa,kBAAkB,WAAW,SAAS,gBACjD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,iBAAiB;CAChE,MAAM,EAAE,OAAO,iBAAiB,mBAAmB;CAEnD,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK,CAAC,YAAY;EAClB,OAAO;GAAC,EAAE,SAAS;GAAG;GAAc,EAAE,oBAAoB,GAAG;EAAC;CAChE,CACF;AACF,CAAC"}

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

@@ -1,14 +1,12 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as react from "react";
-import { ReactNode } from "react";
 import { ControlsCore } from "@videojs/core";
-
+import { ReactNode } from "react";
 //#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 const ControlsGroup: import("react").ForwardRefExoticComponent<Omit<ControlsGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare namespace ControlsGroup {
   type Props = ControlsGroupProps;
 }

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

@@ -1 +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"}
+{"version":3,"file":"controls-group.d.ts","names":[],"sources":["../../../../src/ui/controls/controls-group.tsx"],"mappings":";;;;UAQiB,2BAA2B,wBAAwB,aAAa;EAC/E,WAAW;;;cAIA,+BAAa,0BAAA,KAAA,6CAAA,cAAA;kBAqBT;OACH,QAAQ"}

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

@@ -1,9 +1,6 @@
-'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 +21,7 @@ const ControlsGroup = forwardRef(function ControlsGroup(componentProps, forwarde
 		}, elementProps]
 	});
 });
-
 //#endregion
 export { ControlsGroup };
+
 //# sourceMappingURL=controls-group.js.map

package/dist/dev/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":["import 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":";;;;;AAaA,MAAa,gBAAgB,WAAW,SAAS,cAC/C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,iBAAiB;CAEhE,MAAM,EAAE,OAAO,iBAAiB,mBAAmB;CACnD,MAAM,OAAO,aAAa,iBAAiB,aAAa,qBAAqB,UAAU,KAAA;CAEvF,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC;GAAE;GAAM;EAAS,GAAG,YAAY;CAC1C,CACF;AACF,CAAC"}

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

@@ -1,14 +1,11 @@
-import { UIComponentProps } from "../../utils/types.js";
-import * as react from "react";
+import { ControlsCore, ControlsProps } from "@videojs/core";
 import { ReactNode } from "react";
-import { ControlsCore } from "@videojs/core";
-
 //#region src/ui/controls/controls-root.d.ts
-interface ControlsRootProps extends UIComponentProps<'div', ControlsCore.State> {
+interface ControlsRootProps extends ControlsProps {
   children?: ReactNode | undefined;
 }
-/** Root container for player controls state and rendered control content. */
-declare const ControlsRoot: react.ForwardRefExoticComponent<Omit<ControlsRootProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+/** Manages controls state and provides it to the compound parts. Does not render an element. */
+declare function ControlsRoot({ children, visibility }: ControlsRootProps): ReactNode;
 declare namespace ControlsRoot {
   type Props = ControlsRootProps;
   type State = ControlsCore.State;

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

@@ -1 +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"}
+{"version":3,"file":"controls-root.d.ts","names":[],"sources":["../../../../src/ui/controls/controls-root.tsx"],"mappings":";;;UAQiB,0BAA0B;EACzC,WAAW;;;iBAIG,eACd,UACA,cACC,oBAAoB;kBAoBN;OACH,QAAQ;OACR,QAAQ,aAAa"}

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

@@ -1,43 +1,30 @@
-'use client';
-
 import { usePlayer } from "../../player/context.js";
-import { renderElement } from "../../utils/use-render.js";
 import { ControlsContextProvider } from "./context.js";
+import { ControlsCore, ControlsDataAttrs } from "@videojs/core";
 import { logMissingFeature, selectControls } from "@videojs/core/dom";
-import { forwardRef, useState } from "react";
+import { 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;
+/** Manages controls state and provides it to the compound parts. Does not render an element. */
+function ControlsRoot({ children, visibility = ControlsCore.defaultProps.visibility }) {
 	const controls = usePlayer(selectControls);
 	const [core] = useState(() => new ControlsCore());
-	if (!controls) {
+	core.setProps({ visibility });
+	core.setMedia(controls ?? null);
+	const state = core.getState();
+	if (!state) {
 		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]
-		})
+		children
 	});
-});
-
+}
 //#endregion
 export { ControlsRoot };
+
 //# sourceMappingURL=controls-root.js.map

package/dist/dev/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,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"}
+{"version":3,"file":"controls-root.js","names":[],"sources":["../../../../src/ui/controls/controls-root.tsx"],"sourcesContent":["import { ControlsCore, ControlsDataAttrs, type ControlsProps } from '@videojs/core';\nimport { logMissingFeature, selectControls } from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport { ControlsContextProvider } from './context';\n\nexport interface ControlsRootProps extends ControlsProps {\n  children?: ReactNode | undefined;\n}\n\n/** Manages controls state and provides it to the compound parts. Does not render an element. */\nexport function ControlsRoot({\n  children,\n  visibility = ControlsCore.defaultProps.visibility,\n}: ControlsRootProps): ReactNode {\n  const controls = usePlayer(selectControls);\n  const [core] = useState(() => new ControlsCore());\n\n  core.setProps({ visibility });\n  core.setMedia(controls ?? null);\n\n  const state = core.getState();\n\n  if (!state) {\n    if (__DEV__) logMissingFeature('Controls.Root', 'controls');\n\n    return null;\n  }\n\n  return (\n    <ControlsContextProvider value={{ state, stateAttrMap: ControlsDataAttrs }}>{children}</ControlsContextProvider>\n  );\n}\n\nexport namespace ControlsRoot {\n  export type Props = ControlsRootProps;\n  export type State = ControlsCore.State;\n}\n"],"mappings":";;;;;;;;AAaA,SAAgB,aAAa,EAC3B,UACA,aAAa,aAAa,aAAa,cACR;CAC/B,MAAM,WAAW,UAAU,cAAc;CACzC,MAAM,CAAC,QAAQ,eAAe,IAAI,aAAa,CAAC;CAEhD,KAAK,SAAS,EAAE,WAAW,CAAC;CAC5B,KAAK,SAAS,YAAY,IAAI;CAE9B,MAAM,QAAQ,KAAK,SAAS;CAE5B,IAAI,CAAC,OAAO;EACG,kBAAkB,iBAAiB,UAAU;EAE1D,OAAO;CACT;CAEA,OACE,oBAAC,yBAAD;EAAyB,OAAO;GAAE;GAAO,cAAc;EAAkB;EAAI;CAAkC,CAAA;AAEnH"}

package/dist/dev/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/dev/ui/controls/index.parts.d.ts

@@ -1,10 +1,10 @@
+import { ControlsBackdrop, ControlsBackdropProps } from "./controls-backdrop.js";
+import { ControlsContent, ControlsContentProps } from "./controls-content.js";
 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 };
+  export { ControlsBackdrop as Backdrop, ControlsBackdropProps as BackdropProps, ControlsContent as Content, ControlsContentProps as ContentProps, ControlsGroup as Group, ControlsGroupProps as GroupProps, ControlsRoot as Root, ControlsRootProps as RootProps };
 }
 //#endregion
-export { index_parts_d_exports };
+export { ControlsBackdrop as Backdrop, type ControlsBackdropProps as BackdropProps, ControlsContent as Content, type ControlsContentProps as ContentProps, ControlsGroup as Group, type ControlsGroupProps as GroupProps, ControlsRoot as Root, type ControlsRootProps as RootProps, index_parts_d_exports };
 //# sourceMappingURL=index.parts.d.ts.map

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

@@ -1,13 +1,16 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { ControlsBackdrop } from "./controls-backdrop.js";
+import { ControlsContent } from "./controls-content.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({
+	Backdrop: () => ControlsBackdrop,
+	Content: () => ControlsContent,
 	Group: () => ControlsGroup,
 	Root: () => ControlsRoot
 });
-
 //#endregion
-export { index_parts_exports };
+export { ControlsBackdrop as Backdrop, ControlsContent as Content, ControlsGroup as Group, ControlsRoot as Root, index_parts_exports };
+
 //# sourceMappingURL=index.parts.js.map

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

@@ -1 +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":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/controls/index.parts.ts"],"sourcesContent":["export { ControlsBackdrop as Backdrop, type ControlsBackdropProps as BackdropProps } from './controls-backdrop';\nexport { ControlsContent as Content, type ControlsContentProps as ContentProps } from './controls-content';\nexport { 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

@@ -1,8 +1,5 @@
-'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 +25,7 @@ function createContextPart(config) {
 	Component.displayName = displayName;
 	return Component;
 }
-
 //#endregion
 export { createContextPart };
+
 //# sourceMappingURL=create-context-part.js.map

package/dist/dev/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":["import type { StateAttrMap } from '@videojs/core';\nimport type { ForwardRefExoticComponent } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '@/utils/types';\n\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,WAAW;EAC3B,MAAM,eAAe,WAAW,QAAQ,KAAK;EAE7C,OAAO,cAAc,KAAK;GAAE;GAAQ;GAAW;EAAM,GAA4C;GAC/F,OAAO,QAAQ;GACf,cAAc,QAAQ;GACtB,KAAK;GACL,OAAO;IAAC;IAAa;IAAc;GAAY,CAAC,CAAC,OAAO,OAAO;EACjE,CAAC;CACH,CAAC;CAED,UAAU,cAAc;CAExB,OAAO;AACT"}