@videojs/react 10.0.0-rc.1 → 10.0.0-rc.2

package/dist/dev/ui/title/component.js

@@ -0,0 +1,46 @@
+"use client";
+import { usePlayer } from "../../player/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { TitleCore, TitleDataAttrs } from "@videojs/core";
+import { logMissingFeature, selectMetadata } from "@videojs/core/dom";
+import { forwardRef, useState } from "react";
+//#region src/ui/title/component.tsx
+/**
+* Displays the resolved content title.
+*
+* The component owns its text content. Set the title through the player's `title` prop rather than by passing children.
+*
+* Renders nothing when no title resolves.
+*
+* @example
+*   ```tsx
+*   <Title />
+*
+*   <Title className="title" />
+*   ```;
+*/
+const Title = forwardRef(function Title(componentProps, forwardedRef) {
+	const { render, className, style, ...elementProps } = componentProps;
+	const metadata = usePlayer(selectMetadata);
+	const [core] = useState(() => new TitleCore());
+	if (!metadata) {
+		logMissingFeature("Title", "metadata");
+		return null;
+	}
+	const state = core.getState(metadata);
+	if (state.hidden) return null;
+	return renderElement("span", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: TitleDataAttrs,
+		ref: [forwardedRef],
+		props: [{ children: state.title }, elementProps]
+	});
+});
+//#endregion
+export { Title };
+
+//# sourceMappingURL=component.js.map

package/dist/dev/ui/title/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","names":[],"sources":["../../../../src/ui/title/component.tsx"],"sourcesContent":["'use client';\n\nimport { TitleCore, TitleDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectMetadata } from '@videojs/core/dom';\nimport type { ForwardedRef } 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';\n\nexport interface TitleProps extends Omit<UIComponentProps<'span', TitleCore.State>, 'children'> {}\n\n/**\n * Displays the resolved content title.\n *\n * The component owns its text content. Set the title through the player's `title` prop rather than by passing children.\n *\n * Renders nothing when no title resolves.\n *\n * @example\n *   ```tsx\n *   <Title />\n *\n *   <Title className=\"title\" />\n *   ```;\n */\nexport const Title = forwardRef(function Title(\n  componentProps: TitleProps,\n  forwardedRef: ForwardedRef<HTMLSpanElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n\n  const metadata = usePlayer(selectMetadata);\n\n  const [core] = useState(() => new TitleCore());\n\n  if (!metadata) {\n    if (__DEV__) logMissingFeature('Title', 'metadata');\n\n    return null;\n  }\n\n  const state = core.getState(metadata);\n  if (state.hidden) return null;\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: TitleDataAttrs,\n      ref: [forwardedRef],\n      props: [{ children: state.title }, elementProps],\n    }\n  );\n});\n\nexport namespace Title {\n  export type Props = TitleProps;\n  export type State = TitleCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,QAAQ,WAAW,SAAS,MACvC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEtD,MAAM,WAAW,UAAU,cAAc;CAEzC,MAAM,CAAC,QAAQ,eAAe,IAAI,UAAU,CAAC;CAE7C,IAAI,CAAC,UAAU;EACA,kBAAkB,SAAS,UAAU;EAElD,OAAO;CACT;CAEA,MAAM,QAAQ,KAAK,SAAS,QAAQ;CACpC,IAAI,MAAM,QAAQ,OAAO;CAEzB,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,EAAE,UAAU,MAAM,MAAM,GAAG,YAAY;CACjD,CACF;AACF,CAAC"}

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

@@ -1,2 +1,2 @@
-import { Title, TitleProps } from "./title.js";
+import { Title, TitleProps } from "./component.js";
 export { Title, type TitleProps };

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

@@ -1,2 +1,2 @@
-import { Title } from "./title.js";
+import { Title } from "./component.js";
 export { Title };

package/dist/dev/ui/tooltip/arrow.d.ts

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { TooltipState } from "@videojs/core";
+//#region src/ui/tooltip/arrow.d.ts
+interface TooltipArrowProps extends UIComponentProps<'div', TooltipState> {}
+/** Decorative arrow pointing from the tooltip toward the trigger. Hidden from assistive technology. */
+declare const TooltipArrow: import("react").ForwardRefExoticComponent<TooltipArrowProps>;
+declare namespace TooltipArrow {
+  type Props = TooltipArrowProps;
+  type State = TooltipState;
+}
+//#endregion
+export { TooltipArrow, TooltipArrowProps };
+//# sourceMappingURL=arrow.d.ts.map

package/dist/dev/ui/tooltip/arrow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow.d.ts","names":[],"sources":["../../../../src/ui/tooltip/arrow.tsx"],"mappings":";;;UAMiB,0BAA0B,wBAAwB;;cAGtD,8BAAY,0BAAA;kBAOR;OACH,QAAQ;OACR,QAAQ"}

package/dist/dev/ui/tooltip/arrow.js

@@ -0,0 +1,14 @@
+import { useTooltipContext } from "./context.js";
+import { createContextPart } from "../create-context-part.js";
+//#region src/ui/tooltip/arrow.tsx
+/** Decorative arrow pointing from the tooltip toward the trigger. Hidden from assistive technology. */
+const TooltipArrow = createContextPart({
+	displayName: "TooltipArrow",
+	tag: "div",
+	useContext: useTooltipContext,
+	staticProps: { "aria-hidden": "true" }
+});
+//#endregion
+export { TooltipArrow };
+
+//# sourceMappingURL=arrow.js.map

package/dist/dev/ui/tooltip/arrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow.js","names":[],"sources":["../../../../src/ui/tooltip/arrow.tsx"],"sourcesContent":["import type { TooltipState } from '@videojs/core';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createContextPart } from '../create-context-part';\nimport { useTooltipContext } from './context';\n\nexport interface TooltipArrowProps extends UIComponentProps<'div', TooltipState> {}\n\n/** Decorative arrow pointing from the tooltip toward the trigger. Hidden from assistive technology. */\nexport const TooltipArrow = createContextPart<TooltipArrowProps, TooltipState>({\n  displayName: 'TooltipArrow',\n  tag: 'div',\n  useContext: useTooltipContext,\n  staticProps: { 'aria-hidden': 'true' as const },\n});\n\nexport namespace TooltipArrow {\n  export type Props = TooltipArrowProps;\n  export type State = TooltipState;\n}\n"],"mappings":";;;;AASA,MAAa,eAAe,kBAAmD;CAC7E,aAAa;CACb,KAAK;CACL,YAAY;CACZ,aAAa,EAAE,eAAe,OAAgB;AAChD,CAAC"}

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

@@ -1,10 +1,10 @@
-import { TooltipArrow, TooltipArrowProps } from "./tooltip-arrow.js";
-import { TooltipLabel, TooltipLabelProps } from "./tooltip-label.js";
-import { TooltipPopup, TooltipPopupProps } from "./tooltip-popup.js";
-import { TooltipProvider, TooltipProviderProps } from "./tooltip-provider.js";
-import { TooltipRoot, TooltipRootProps } from "./tooltip-root.js";
-import { TooltipShortcut, TooltipShortcutProps } from "./tooltip-shortcut.js";
-import { TooltipTrigger, TooltipTriggerProps } from "./tooltip-trigger.js";
+import { TooltipArrow, TooltipArrowProps } from "./arrow.js";
+import { TooltipLabel, TooltipLabelProps } from "./label.js";
+import { TooltipPopup, TooltipPopupProps } from "./popup.js";
+import { TooltipProvider, TooltipProviderProps } from "./provider.js";
+import { TooltipRoot, TooltipRootProps } from "./root.js";
+import { TooltipShortcut, TooltipShortcutProps } from "./shortcut.js";
+import { TooltipTrigger, TooltipTriggerProps } from "./trigger.js";
 declare namespace index_parts_d_exports {
   export { TooltipArrow as Arrow, TooltipArrowProps as ArrowProps, TooltipLabel as Label, TooltipLabelProps as LabelProps, TooltipPopup as Popup, TooltipPopupProps as PopupProps, TooltipProvider as Provider, TooltipProviderProps as ProviderProps, TooltipRoot as Root, TooltipRootProps as RootProps, TooltipShortcut as Shortcut, TooltipShortcutProps as ShortcutProps, TooltipTrigger as Trigger, TooltipTriggerProps as TriggerProps };
 }

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

@@ -1,11 +1,11 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
-import { TooltipArrow } from "./tooltip-arrow.js";
-import { TooltipLabel } from "./tooltip-label.js";
-import { TooltipShortcut } from "./tooltip-shortcut.js";
-import { TooltipPopup } from "./tooltip-popup.js";
-import { TooltipProvider } from "./tooltip-provider.js";
-import { TooltipRoot } from "./tooltip-root.js";
-import { TooltipTrigger } from "./tooltip-trigger.js";
+import { TooltipArrow } from "./arrow.js";
+import { TooltipLabel } from "./label.js";
+import { TooltipShortcut } from "./shortcut.js";
+import { TooltipPopup } from "./popup.js";
+import { TooltipProvider } from "./provider.js";
+import { TooltipRoot } from "./root.js";
+import { TooltipTrigger } from "./trigger.js";
 //#region src/ui/tooltip/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Arrow: () => TooltipArrow,

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

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/tooltip/index.parts.ts"],"sourcesContent":["export { TooltipArrow as Arrow, type TooltipArrowProps as ArrowProps } from './tooltip-arrow';\nexport { TooltipLabel as Label, type TooltipLabelProps as LabelProps } from './tooltip-label';\nexport { TooltipPopup as Popup, type TooltipPopupProps as PopupProps } from './tooltip-popup';\nexport { TooltipProvider as Provider, type TooltipProviderProps as ProviderProps } from './tooltip-provider';\nexport { TooltipRoot as Root, type TooltipRootProps as RootProps } from './tooltip-root';\nexport { TooltipShortcut as Shortcut, type TooltipShortcutProps as ShortcutProps } from './tooltip-shortcut';\nexport { TooltipTrigger as Trigger, type TooltipTriggerProps as TriggerProps } from './tooltip-trigger';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/tooltip/index.parts.ts"],"sourcesContent":["export { TooltipArrow as Arrow, type TooltipArrowProps as ArrowProps } from './arrow';\nexport { TooltipLabel as Label, type TooltipLabelProps as LabelProps } from './label';\nexport { TooltipPopup as Popup, type TooltipPopupProps as PopupProps } from './popup';\nexport { TooltipProvider as Provider, type TooltipProviderProps as ProviderProps } from './provider';\nexport { TooltipRoot as Root, type TooltipRootProps as RootProps } from './root';\nexport { TooltipShortcut as Shortcut, type TooltipShortcutProps as ShortcutProps } from './shortcut';\nexport { TooltipTrigger as Trigger, type TooltipTriggerProps as TriggerProps } from './trigger';\n"],"mappings":""}

package/dist/dev/ui/tooltip/label.d.ts

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { TooltipState } from "@videojs/core";
+//#region src/ui/tooltip/label.d.ts
+interface TooltipLabelProps extends UIComponentProps<'span', TooltipState> {}
+/** Tooltip body label; defaults to context `content.label` from the linked trigger. */
+declare const TooltipLabel: import("react").ForwardRefExoticComponent<Omit<TooltipLabelProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+declare namespace TooltipLabel {
+  type Props = TooltipLabelProps;
+  type State = TooltipState;
+}
+//#endregion
+export { TooltipLabel, TooltipLabelProps };
+//# sourceMappingURL=label.d.ts.map

package/dist/dev/ui/tooltip/label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.d.ts","names":[],"sources":["../../../../src/ui/tooltip/label.tsx"],"mappings":";;;UAOiB,0BAA0B,yBAAyB;;cAGvD,8BAAY,0BAAA,KAAA,4CAAA,cAAA;kBAmBR;OACH,QAAQ;OACR,QAAQ"}

package/dist/dev/ui/tooltip/label.js

@@ -0,0 +1,23 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useTooltipContext } from "./context.js";
+import { forwardRef } from "react";
+//#region src/ui/tooltip/label.tsx
+/** Tooltip body label; defaults to context `content.label` from the linked trigger. */
+const TooltipLabel = forwardRef(function TooltipLabel({ render, className, style, children, ...elementProps }, forwardedRef) {
+	const { state, stateAttrMap, content } = useTooltipContext();
+	const body = children !== void 0 ? children : content?.label ?? "";
+	return renderElement("span", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: forwardedRef,
+		props: [elementProps, { children: body }]
+	});
+});
+//#endregion
+export { TooltipLabel };
+
+//# sourceMappingURL=label.js.map

package/dist/dev/ui/tooltip/label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.js","names":[],"sources":["../../../../src/ui/tooltip/label.tsx"],"sourcesContent":["import type { TooltipState } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useTooltipContext } from './context';\n\nexport interface TooltipLabelProps extends UIComponentProps<'span', TooltipState> {}\n\n/** Tooltip body label; defaults to context `content.label` from the linked trigger. */\nexport const TooltipLabel = forwardRef<HTMLSpanElement, TooltipLabelProps>(function TooltipLabel(\n  { render, className, style, children, ...elementProps },\n  forwardedRef\n) {\n  const { state, stateAttrMap, content } = useTooltipContext();\n  const body = children !== undefined ? children : (content?.label ?? '');\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: forwardedRef,\n      props: [elementProps, { children: body }],\n    }\n  );\n});\n\nexport namespace TooltipLabel {\n  export type Props = TooltipLabelProps;\n  export type State = TooltipState;\n}\n"],"mappings":";;;;;AAUA,MAAa,eAAe,WAA+C,SAAS,aAClF,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBACzC,cACA;CACA,MAAM,EAAE,OAAO,cAAc,YAAY,kBAAkB;CAC3D,MAAM,OAAO,aAAa,KAAA,IAAY,WAAY,SAAS,SAAS;CAEpE,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC,cAAc,EAAE,UAAU,KAAK,CAAC;CAC1C,CACF;AACF,CAAC"}

package/dist/dev/ui/tooltip/popup.d.ts

@@ -0,0 +1,16 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { TooltipState } from "@videojs/core";
+//#region src/ui/tooltip/popup.d.ts
+interface TooltipPopupProps extends UIComponentProps<'div', TooltipState> {}
+/**
+ * Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript
+ * fallback.
+ */
+declare const TooltipPopup: import("react").ForwardRefExoticComponent<Omit<TooltipPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace TooltipPopup {
+  type Props = TooltipPopupProps;
+  type State = TooltipState;
+}
+//#endregion
+export { TooltipPopup, TooltipPopupProps };
+//# sourceMappingURL=popup.d.ts.map

package/dist/dev/ui/tooltip/popup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup.d.ts","names":[],"sources":["../../../../src/ui/tooltip/popup.tsx"],"mappings":";;;UAWiB,0BAA0B,wBAAwB;;;;;cAMtD,8BAAY,0BAAA,KAAA,4CAAA,cAAA;kBAmFR;OACH,QAAQ;OACR,QAAQ"}

package/dist/dev/ui/tooltip/popup.js

@@ -0,0 +1,66 @@
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useTooltipContext } from "./context.js";
+import { usePopupPosition } from "../popover/use-popup-position.js";
+import { TooltipLabel } from "./label.js";
+import { TooltipShortcut } from "./shortcut.js";
+import { TooltipCSSVars } from "@videojs/core";
+import { forwardRef, useCallback, useMemo, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/tooltip/popup.tsx
+/**
+* Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript
+* fallback.
+*/
+const TooltipPopup = forwardRef(function TooltipPopup({ render, className, style, children, ...elementProps }, forwardedRef) {
+	const { core, tooltip, state, preferredSide, setPositionedSide, stateAttrMap, anchorName, popupId, boundary, container } = useTooltipContext();
+	const internalRef = useRef(null);
+	const popupRef = useCallback((el) => {
+		tooltip.setPopupElement(el);
+	}, [tooltip]);
+	const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);
+	const posOpts = useMemo(() => ({
+		side: preferredSide,
+		align: state.align
+	}), [preferredSide, state.align]);
+	const positioningStyle = usePopupPosition({
+		open: state.open,
+		anchorName,
+		position: posOpts,
+		triggerSource: tooltip,
+		popupRef: internalRef,
+		boundary,
+		container,
+		cssVars: TooltipCSSVars,
+		onSideChange: setPositionedSide
+	});
+	if (!state.open) return null;
+	const body = children !== void 0 ? children : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TooltipLabel, {}), /* @__PURE__ */ jsx(TooltipShortcut, {})] });
+	const { onFocusOut, ...restPopupProps } = tooltip.popupProps;
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: composedRef,
+		props: [
+			{
+				id: popupId,
+				style: positioningStyle,
+				...core.getPopupAttrs(state)
+			},
+			{ children: body },
+			{
+				...restPopupProps,
+				onBlur: onFocusOut
+			},
+			elementProps
+		]
+	});
+});
+//#endregion
+export { TooltipPopup };
+
+//# sourceMappingURL=popup.js.map

package/dist/dev/ui/tooltip/popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup.js","names":[],"sources":["../../../../src/ui/tooltip/popup.tsx"],"sourcesContent":["import { TooltipCSSVars, type TooltipState } from '@videojs/core';\nimport { forwardRef, useCallback, useMemo, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopupPosition } from '../popover/use-popup-position';\nimport { useTooltipContext } from './context';\nimport { TooltipLabel } from './label';\nimport { TooltipShortcut } from './shortcut';\n\nexport interface TooltipPopupProps extends UIComponentProps<'div', TooltipState> {}\n\n/**\n * Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript\n * fallback.\n */\nexport const TooltipPopup = forwardRef<HTMLDivElement, TooltipPopupProps>(function TooltipPopup(\n  { render, className, style, children, ...elementProps },\n  forwardedRef\n) {\n  const {\n    core,\n    tooltip,\n    state,\n    preferredSide,\n    setPositionedSide,\n    stateAttrMap,\n    anchorName,\n    popupId,\n    boundary,\n    container,\n  } = useTooltipContext();\n  const internalRef = useRef<HTMLDivElement>(null);\n\n  const popupRef = useCallback(\n    (el: HTMLDivElement | null) => {\n      tooltip.setPopupElement(el);\n    },\n    [tooltip]\n  );\n\n  const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);\n\n  // --- Positioning ---\n\n  const posOpts = useMemo(() => ({ side: preferredSide, align: state.align }), [preferredSide, state.align]);\n\n  const positioningStyle = usePopupPosition({\n    open: state.open,\n    anchorName,\n    position: posOpts,\n    triggerSource: tooltip,\n    popupRef: internalRef,\n    boundary,\n    container,\n    cssVars: TooltipCSSVars,\n    onSideChange: setPositionedSide,\n  });\n\n  // --- Visibility ---\n\n  if (!state.open) {\n    return null;\n  }\n\n  const body =\n    children !== undefined ? (\n      children\n    ) : (\n      <>\n        <TooltipLabel />\n        <TooltipShortcut />\n      </>\n    );\n\n  // Remap DOM focus events to React synthetic event names.\n  const { onFocusOut, ...restPopupProps } = tooltip.popupProps;\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: composedRef,\n      props: [\n        {\n          id: popupId,\n          style: positioningStyle,\n          ...core.getPopupAttrs(state),\n        },\n        { children: body },\n        { ...restPopupProps, onBlur: onFocusOut },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace TooltipPopup {\n  export type Props = TooltipPopupProps;\n  export type State = TooltipState;\n}\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBACzC,cACA;CACA,MAAM,EACJ,MACA,SACA,OACA,eACA,mBACA,cACA,YACA,SACA,UACA,cACE,kBAAkB;CACtB,MAAM,cAAc,OAAuB,IAAI;CAE/C,MAAM,WAAW,aACd,OAA8B;EAC7B,QAAQ,gBAAgB,EAAE;CAC5B,GACA,CAAC,OAAO,CACV;CAEA,MAAM,cAAc,gBAAgB,cAAc,UAAU,WAAW;CAIvE,MAAM,UAAU,eAAe;EAAE,MAAM;EAAe,OAAO,MAAM;CAAM,IAAI,CAAC,eAAe,MAAM,KAAK,CAAC;CAEzG,MAAM,mBAAmB,iBAAiB;EACxC,MAAM,MAAM;EACZ;EACA,UAAU;EACV,eAAe;EACf,UAAU;EACV;EACA;EACA,SAAS;EACT,cAAc;CAChB,CAAC;CAID,IAAI,CAAC,MAAM,MACT,OAAO;CAGT,MAAM,OACJ,aAAa,KAAA,IACX,WAEA,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,cAAD,CAAe,CAAA,GACf,oBAAC,iBAAD,CAAkB,CAAA,CAClB,EAAA,CAAA;CAIN,MAAM,EAAE,YAAY,GAAG,mBAAmB,QAAQ;CAElD,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO;GACL;IACE,IAAI;IACJ,OAAO;IACP,GAAG,KAAK,cAAc,KAAK;GAC7B;GACA,EAAE,UAAU,KAAK;GACjB;IAAE,GAAG;IAAgB,QAAQ;GAAW;GACxC;EACF;CACF,CACF;AACF,CAAC"}

package/dist/dev/ui/tooltip/provider.d.ts

@@ -0,0 +1,13 @@
+import { TooltipGroupProps } from "@videojs/core";
+import { ReactNode } from "react";
+//#region src/ui/tooltip/provider.d.ts
+interface TooltipProviderProps extends TooltipGroupProps {
+  children?: ReactNode;
+}
+declare function TooltipProvider({ delay, closeDelay, timeout, children }: TooltipProviderProps): ReactNode;
+declare namespace TooltipProvider {
+  type Props = TooltipProviderProps;
+}
+//#endregion
+export { TooltipProvider, TooltipProviderProps };
+//# sourceMappingURL=provider.d.ts.map

package/dist/dev/ui/tooltip/provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","names":[],"sources":["../../../../src/ui/tooltip/provider.tsx"],"mappings":";;;UAMiB,6BAA6B;EAC5C,WAAW;;iBAGG,kBAAkB,OAAO,YAAY,SAAS,YAAY,uBAAuB;kBAQhF;OACH,QAAQ"}

package/dist/dev/ui/tooltip/provider.js

@@ -0,0 +1,25 @@
+import { TooltipGroupContextProvider } from "./group-context.js";
+import { TooltipGroupCore } from "@videojs/core";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/tooltip/provider.tsx
+function TooltipProvider({ delay, closeDelay, timeout, children }) {
+	const [group] = useState(() => new TooltipGroupCore({
+		delay,
+		closeDelay,
+		timeout
+	}));
+	group.setProps({
+		delay,
+		closeDelay,
+		timeout
+	});
+	return /* @__PURE__ */ jsx(TooltipGroupContextProvider, {
+		value: { group },
+		children
+	});
+}
+//#endregion
+export { TooltipProvider };
+
+//# sourceMappingURL=provider.js.map

package/dist/dev/ui/tooltip/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.js","names":[],"sources":["../../../../src/ui/tooltip/provider.tsx"],"sourcesContent":["import { TooltipGroupCore, type TooltipGroupProps } from '@videojs/core';\nimport type { ReactNode } from 'react';\nimport { useState } from 'react';\n\nimport { TooltipGroupContextProvider } from './group-context';\n\nexport interface TooltipProviderProps extends TooltipGroupProps {\n  children?: ReactNode;\n}\n\nexport function TooltipProvider({ delay, closeDelay, timeout, children }: TooltipProviderProps): ReactNode {\n  const [group] = useState(() => new TooltipGroupCore({ delay, closeDelay, timeout }));\n\n  group.setProps({ delay, closeDelay, timeout });\n\n  return <TooltipGroupContextProvider value={{ group }}>{children}</TooltipGroupContextProvider>;\n}\n\nexport namespace TooltipProvider {\n  export type Props = TooltipProviderProps;\n}\n"],"mappings":";;;;;AAUA,SAAgB,gBAAgB,EAAE,OAAO,YAAY,SAAS,YAA6C;CACzG,MAAM,CAAC,SAAS,eAAe,IAAI,iBAAiB;EAAE;EAAO;EAAY;CAAQ,CAAC,CAAC;CAEnF,MAAM,SAAS;EAAE;EAAO;EAAY;CAAQ,CAAC;CAE7C,OAAO,oBAAC,6BAAD;EAA6B,OAAO,EAAE,MAAM;EAAI;CAAsC,CAAA;AAC/F"}

package/dist/dev/ui/tooltip/root.d.ts

@@ -0,0 +1,20 @@
+import { TooltipProps } from "@videojs/core";
+import { PositioningBoundary, TooltipChangeDetails } from "@videojs/core/dom";
+import { ReactNode } from "react";
+//#region src/ui/tooltip/root.d.ts
+interface TooltipRootProps extends Omit<TooltipProps, 'boundary'> {
+  /** Boundary used to constrain the popup size. */
+  boundary?: PositioningBoundary;
+  /** Called when the tooltip open state changes (fires immediately, before animations). */
+  onOpenChange?: (open: boolean, details: TooltipChangeDetails) => void;
+  /** Called after open/close animations complete. */
+  onOpenChangeComplete?: (open: boolean) => void;
+  children?: ReactNode;
+}
+declare function TooltipRoot({ open: controlledOpen, defaultOpen, onOpenChange: onOpenChangeProp, onOpenChangeComplete: onOpenChangeCompleteProp, delay, closeDelay, disableHoverablePopup, disabled, sticky, boundary, children, ...coreProps }: TooltipRootProps): ReactNode;
+declare namespace TooltipRoot {
+  type Props = TooltipRootProps;
+}
+//#endregion
+export { TooltipRoot, TooltipRootProps };
+//# sourceMappingURL=root.d.ts.map

package/dist/dev/ui/tooltip/root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.d.ts","names":[],"sources":["../../../../src/ui/tooltip/root.tsx"],"mappings":";;;;UAsBiB,yBAAyB,KAAK;;EAE7C,WAAW;;EAEX,gBAAgB,eAAe,SAAS;;EAExC,wBAAwB;EACxB,WAAW;;iBAGG,cACd,MAAM,gBACN,aACA,cAAc,kBACd,sBAAsB,0BACtB,OACA,YACA,uBACA,UACA,QACA,UACA,aACG,aACF,mBAAmB;kBA0GL;OACH,QAAQ"}

package/dist/dev/ui/tooltip/root.js

@@ -0,0 +1,94 @@
+import { useOptionalContainer } from "../../player/context.js";
+import { useOptionalPopupGroup } from "../../player/popup-group-context.js";
+import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { useDestroy } from "../../utils/use-destroy.js";
+import { TooltipContextProvider } from "./context.js";
+import { useSafeId } from "../../utils/use-safe-id.js";
+import { useOptionalControlsContext } from "../controls/context.js";
+import { usePositionedState } from "../hooks/use-positioned-state.js";
+import { useTooltipGroup } from "./group-context.js";
+import { TooltipCore, TooltipDataAttrs } from "@videojs/core";
+import { createTooltip, createTransition } from "@videojs/core/dom";
+import { useSnapshot } from "@videojs/store/react";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { isUndefined } from "@videojs/utils/predicate";
+//#region src/ui/tooltip/root.tsx
+function TooltipRoot({ open: controlledOpen, defaultOpen = TooltipCore.defaultProps.defaultOpen, onOpenChange: onOpenChangeProp, onOpenChangeComplete: onOpenChangeCompleteProp, delay = TooltipCore.defaultProps.delay, closeDelay = TooltipCore.defaultProps.closeDelay, disableHoverablePopup = TooltipCore.defaultProps.disableHoverablePopup, disabled = TooltipCore.defaultProps.disabled, sticky = TooltipCore.defaultProps.sticky, boundary = "container", children, ...coreProps }) {
+	const container = useOptionalContainer();
+	const popupGroup = useOptionalPopupGroup();
+	const controls = useOptionalControlsContext();
+	const [core] = useState(() => new TooltipCore(coreProps));
+	core.setProps(coreProps);
+	const isControlled = !isUndefined(controlledOpen);
+	const groupFromContext = useTooltipGroup();
+	const onOpenChangeRef = useLatestRef(onOpenChangeProp);
+	const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);
+	const delayRef = useLatestRef(delay);
+	const closeDelayRef = useLatestRef(closeDelay);
+	const disableHoverablePopupRef = useLatestRef(disableHoverablePopup);
+	const disabledRef = useLatestRef(disabled);
+	const stickyRef = useLatestRef(sticky);
+	const groupRef = useLatestRef(groupFromContext);
+	const popupGroupRef = useLatestRef(popupGroup);
+	const [tooltip] = useState(() => {
+		const instance = createTooltip({
+			transition: createTransition(),
+			onOpenChange: (nextOpen, details) => {
+				onOpenChangeRef.current?.(nextOpen, details);
+			},
+			onOpenChangeComplete: (nextOpen) => {
+				onOpenChangeCompleteRef.current?.(nextOpen);
+			},
+			delay: () => delayRef.current,
+			closeDelay: () => closeDelayRef.current,
+			disableHoverablePopup: () => disableHoverablePopupRef.current,
+			disabled: () => disabledRef.current,
+			sticky: () => stickyRef.current,
+			group: () => groupRef.current,
+			popupGroup: () => popupGroupRef.current
+		});
+		if (!isControlled && defaultOpen) instance.open();
+		return instance;
+	});
+	const [content, setContent] = useState();
+	const anchorName = useSafeId();
+	const popupId = useSafeId("tooltip");
+	useEffect(() => {
+		if (isUndefined(controlledOpen)) return;
+		const { active: inputOpen } = tooltip.input.current;
+		if (controlledOpen === inputOpen) return;
+		if (controlledOpen) tooltip.open();
+		else tooltip.close();
+	}, [controlledOpen, tooltip]);
+	useEffect(() => {
+		if (isUndefined(controls?.state.visible)) return;
+		if (controls.state.visible) return;
+		tooltip.close("imperative-action");
+	}, [controls?.state.visible, tooltip]);
+	useDestroy(tooltip);
+	const input = useSnapshot(tooltip.input);
+	core.setInput(input);
+	const { state, preferredSide, setPositionedSide } = usePositionedState(core.getState());
+	return /* @__PURE__ */ jsx(TooltipContextProvider, {
+		value: {
+			core,
+			tooltip,
+			state,
+			preferredSide,
+			setPositionedSide,
+			stateAttrMap: TooltipDataAttrs,
+			anchorName,
+			popupId,
+			content,
+			setContent,
+			boundary,
+			container
+		},
+		children
+	});
+}
+//#endregion
+export { TooltipRoot };
+
+//# sourceMappingURL=root.js.map

package/dist/dev/ui/tooltip/root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.js","names":[],"sources":["../../../../src/ui/tooltip/root.tsx"],"sourcesContent":["import { type TooltipProps as CoreTooltipProps, TooltipCore, TooltipDataAttrs } from '@videojs/core';\nimport {\n  createTooltip,\n  createTransition,\n  type PositioningBoundary,\n  type TooltipChangeDetails,\n} from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport { isUndefined } from '@videojs/utils/predicate';\nimport type { ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { useOptionalContainer } from '../../player/context';\nimport { useOptionalPopupGroup } from '../../player/popup-group-context';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { useOptionalControlsContext } from '../controls/context';\nimport { usePositionedState } from '../hooks/use-positioned-state';\nimport { type TooltipContent, TooltipContextProvider } from './context';\nimport { useTooltipGroup } from './group-context';\n\nexport interface TooltipRootProps extends Omit<CoreTooltipProps, 'boundary'> {\n  /** Boundary used to constrain the popup size. */\n  boundary?: PositioningBoundary;\n  /** Called when the tooltip open state changes (fires immediately, before animations). */\n  onOpenChange?: (open: boolean, details: TooltipChangeDetails) => void;\n  /** Called after open/close animations complete. */\n  onOpenChangeComplete?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\nexport function TooltipRoot({\n  open: controlledOpen,\n  defaultOpen = TooltipCore.defaultProps.defaultOpen,\n  onOpenChange: onOpenChangeProp,\n  onOpenChangeComplete: onOpenChangeCompleteProp,\n  delay = TooltipCore.defaultProps.delay,\n  closeDelay = TooltipCore.defaultProps.closeDelay,\n  disableHoverablePopup = TooltipCore.defaultProps.disableHoverablePopup,\n  disabled = TooltipCore.defaultProps.disabled,\n  sticky = TooltipCore.defaultProps.sticky,\n  boundary = 'container',\n  children,\n  ...coreProps\n}: TooltipRootProps): ReactNode {\n  const container = useOptionalContainer();\n  const popupGroup = useOptionalPopupGroup();\n  const controls = useOptionalControlsContext();\n  const [core] = useState(() => new TooltipCore(coreProps));\n\n  core.setProps(coreProps);\n\n  const isControlled = !isUndefined(controlledOpen);\n\n  const groupFromContext = useTooltipGroup();\n\n  // Keep refs that always point to the latest values so the\n  // createTooltip closure never reads stale props.\n  const onOpenChangeRef = useLatestRef(onOpenChangeProp);\n  const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);\n  const delayRef = useLatestRef(delay);\n  const closeDelayRef = useLatestRef(closeDelay);\n  const disableHoverablePopupRef = useLatestRef(disableHoverablePopup);\n  const disabledRef = useLatestRef(disabled);\n  const stickyRef = useLatestRef(sticky);\n  const groupRef = useLatestRef(groupFromContext);\n  const popupGroupRef = useLatestRef(popupGroup);\n\n  const [tooltip] = useState(() => {\n    const instance = createTooltip({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean, details: TooltipChangeDetails) => {\n        onOpenChangeRef.current?.(nextOpen, details);\n      },\n      onOpenChangeComplete: (nextOpen: boolean) => {\n        onOpenChangeCompleteRef.current?.(nextOpen);\n      },\n      delay: () => delayRef.current,\n      closeDelay: () => closeDelayRef.current,\n      disableHoverablePopup: () => disableHoverablePopupRef.current,\n      disabled: () => disabledRef.current,\n      sticky: () => stickyRef.current,\n      group: () => groupRef.current,\n      popupGroup: () => popupGroupRef.current,\n    });\n\n    // Apply defaultOpen on creation (uncontrolled only)\n    if (!isControlled && defaultOpen) {\n      instance.open();\n    }\n\n    return instance;\n  });\n\n  const [content, setContent] = useState<TooltipContent | undefined>();\n\n  const anchorName = useSafeId();\n  const popupId = useSafeId('tooltip');\n\n  // Sync controlled open prop -> internal input state.\n  useEffect(() => {\n    if (isUndefined(controlledOpen)) return;\n\n    const { active: inputOpen } = tooltip.input.current;\n    if (controlledOpen === inputOpen) return;\n\n    if (controlledOpen) {\n      tooltip.open();\n    } else {\n      tooltip.close();\n    }\n  }, [controlledOpen, tooltip]);\n\n  useEffect(() => {\n    if (isUndefined(controls?.state.visible)) return;\n\n    if (controls.state.visible) return;\n\n    tooltip.close('imperative-action');\n  }, [controls?.state.visible, tooltip]);\n\n  useDestroy(tooltip);\n\n  const input = useSnapshot(tooltip.input);\n\n  core.setInput(input);\n  const { state, preferredSide, setPositionedSide } = usePositionedState(core.getState());\n\n  return (\n    <TooltipContextProvider\n      value={{\n        core,\n        tooltip,\n        state,\n        preferredSide,\n        setPositionedSide,\n        stateAttrMap: TooltipDataAttrs,\n        anchorName,\n        popupId,\n        content,\n        setContent,\n        boundary,\n        container,\n      }}\n    >\n      {children}\n    </TooltipContextProvider>\n  );\n}\n\nexport namespace TooltipRoot {\n  export type Props = TooltipRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAgCA,SAAgB,YAAY,EAC1B,MAAM,gBACN,cAAc,YAAY,aAAa,aACvC,cAAc,kBACd,sBAAsB,0BACtB,QAAQ,YAAY,aAAa,OACjC,aAAa,YAAY,aAAa,YACtC,wBAAwB,YAAY,aAAa,uBACjD,WAAW,YAAY,aAAa,UACpC,SAAS,YAAY,aAAa,QAClC,WAAW,aACX,UACA,GAAG,aAC2B;CAC9B,MAAM,YAAY,qBAAqB;CACvC,MAAM,aAAa,sBAAsB;CACzC,MAAM,WAAW,2BAA2B;CAC5C,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,SAAS,CAAC;CAExD,KAAK,SAAS,SAAS;CAEvB,MAAM,eAAe,CAAC,YAAY,cAAc;CAEhD,MAAM,mBAAmB,gBAAgB;CAIzC,MAAM,kBAAkB,aAAa,gBAAgB;CACrD,MAAM,0BAA0B,aAAa,wBAAwB;CACrE,MAAM,WAAW,aAAa,KAAK;CACnC,MAAM,gBAAgB,aAAa,UAAU;CAC7C,MAAM,2BAA2B,aAAa,qBAAqB;CACnE,MAAM,cAAc,aAAa,QAAQ;CACzC,MAAM,YAAY,aAAa,MAAM;CACrC,MAAM,WAAW,aAAa,gBAAgB;CAC9C,MAAM,gBAAgB,aAAa,UAAU;CAE7C,MAAM,CAAC,WAAW,eAAe;EAC/B,MAAM,WAAW,cAAc;GAC7B,YAAY,iBAAiB;GAC7B,eAAe,UAAmB,YAAkC;IAClE,gBAAgB,UAAU,UAAU,OAAO;GAC7C;GACA,uBAAuB,aAAsB;IAC3C,wBAAwB,UAAU,QAAQ;GAC5C;GACA,aAAa,SAAS;GACtB,kBAAkB,cAAc;GAChC,6BAA6B,yBAAyB;GACtD,gBAAgB,YAAY;GAC5B,cAAc,UAAU;GACxB,aAAa,SAAS;GACtB,kBAAkB,cAAc;EAClC,CAAC;EAGD,IAAI,CAAC,gBAAgB,aACnB,SAAS,KAAK;EAGhB,OAAO;CACT,CAAC;CAED,MAAM,CAAC,SAAS,cAAc,SAAqC;CAEnE,MAAM,aAAa,UAAU;CAC7B,MAAM,UAAU,UAAU,SAAS;CAGnC,gBAAgB;EACd,IAAI,YAAY,cAAc,GAAG;EAEjC,MAAM,EAAE,QAAQ,cAAc,QAAQ,MAAM;EAC5C,IAAI,mBAAmB,WAAW;EAElC,IAAI,gBACF,QAAQ,KAAK;OAEb,QAAQ,MAAM;CAElB,GAAG,CAAC,gBAAgB,OAAO,CAAC;CAE5B,gBAAgB;EACd,IAAI,YAAY,UAAU,MAAM,OAAO,GAAG;EAE1C,IAAI,SAAS,MAAM,SAAS;EAE5B,QAAQ,MAAM,mBAAmB;CACnC,GAAG,CAAC,UAAU,MAAM,SAAS,OAAO,CAAC;CAErC,WAAW,OAAO;CAElB,MAAM,QAAQ,YAAY,QAAQ,KAAK;CAEvC,KAAK,SAAS,KAAK;CACnB,MAAM,EAAE,OAAO,eAAe,sBAAsB,mBAAmB,KAAK,SAAS,CAAC;CAEtF,OACE,oBAAC,wBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA,cAAc;GACd;GACA;GACA;GACA;GACA;GACA;EACF;EAEC;CACqB,CAAA;AAE5B"}

package/dist/dev/ui/tooltip/shortcut.d.ts

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { TooltipState } from "@videojs/core";
+//#region src/ui/tooltip/shortcut.d.ts
+interface TooltipShortcutProps extends UIComponentProps<'kbd', TooltipState> {}
+/** Keyboard shortcut hint; apply skin `className` (CSS: `media-tooltip__kbd`; Tailwind: `popup.tooltipShortcut`). */
+declare const TooltipShortcut: import("react").ForwardRefExoticComponent<Omit<TooltipShortcutProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+declare namespace TooltipShortcut {
+  type Props = TooltipShortcutProps;
+  type State = TooltipState;
+}
+//#endregion
+export { TooltipShortcut, TooltipShortcutProps };
+//# sourceMappingURL=shortcut.d.ts.map

package/dist/dev/ui/tooltip/shortcut.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shortcut.d.ts","names":[],"sources":["../../../../src/ui/tooltip/shortcut.tsx"],"mappings":";;;UAOiB,6BAA6B,wBAAwB;;cAGzD,iCAAe,0BAAA,KAAA,+CAAA,cAAA;kBAoBX;OACH,QAAQ;OACR,QAAQ"}

package/dist/dev/ui/tooltip/shortcut.js

@@ -0,0 +1,24 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useTooltipContext } from "./context.js";
+import { forwardRef } from "react";
+//#region src/ui/tooltip/shortcut.tsx
+/** Keyboard shortcut hint; apply skin `className` (CSS: `media-tooltip__kbd`; Tailwind: `popup.tooltipShortcut`). */
+const TooltipShortcut = forwardRef(function TooltipShortcut({ render, className, style, children, ...elementProps }, forwardedRef) {
+	const { state, stateAttrMap, content } = useTooltipContext();
+	const shortcut = children !== void 0 && children !== null ? children : content?.shortcut ?? null;
+	if (!shortcut) return null;
+	return renderElement("kbd", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: forwardedRef,
+		props: [elementProps, { children: shortcut }]
+	});
+});
+//#endregion
+export { TooltipShortcut };
+
+//# sourceMappingURL=shortcut.js.map

package/dist/dev/ui/tooltip/shortcut.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shortcut.js","names":[],"sources":["../../../../src/ui/tooltip/shortcut.tsx"],"sourcesContent":["import type { TooltipState } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useTooltipContext } from './context';\n\nexport interface TooltipShortcutProps extends UIComponentProps<'kbd', TooltipState> {}\n\n/** Keyboard shortcut hint; apply skin `className` (CSS: `media-tooltip__kbd`; Tailwind: `popup.tooltipShortcut`). */\nexport const TooltipShortcut = forwardRef<HTMLElement, TooltipShortcutProps>(function TooltipShortcut(\n  { render, className, style, children, ...elementProps },\n  forwardedRef\n) {\n  const { state, stateAttrMap, content } = useTooltipContext();\n  const shortcut = children !== undefined && children !== null ? children : (content?.shortcut ?? null);\n  if (!shortcut) return null;\n\n  return renderElement(\n    'kbd',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: forwardedRef,\n      props: [elementProps, { children: shortcut }],\n    }\n  );\n});\n\nexport namespace TooltipShortcut {\n  export type Props = TooltipShortcutProps;\n  export type State = TooltipState;\n}\n"],"mappings":";;;;;AAUA,MAAa,kBAAkB,WAA8C,SAAS,gBACpF,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBACzC,cACA;CACA,MAAM,EAAE,OAAO,cAAc,YAAY,kBAAkB;CAC3D,MAAM,WAAW,aAAa,KAAA,KAAa,aAAa,OAAO,WAAY,SAAS,YAAY;CAChG,IAAI,CAAC,UAAU,OAAO;CAEtB,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC,cAAc,EAAE,UAAU,SAAS,CAAC;CAC9C,CACF;AACF,CAAC"}

package/dist/dev/ui/tooltip/trigger.d.ts

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { TooltipState } from "@videojs/core";
+//#region src/ui/tooltip/trigger.d.ts
+interface TooltipTriggerProps extends UIComponentProps<'button', TooltipState> {}
+/** Element that triggers the tooltip on hover and focus. Renders a `<button>` element. */
+declare const TooltipTrigger: import("react").ForwardRefExoticComponent<Omit<TooltipTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+declare namespace TooltipTrigger {
+  type Props = TooltipTriggerProps;
+  type State = TooltipState;
+}
+//#endregion
+export { TooltipTrigger, TooltipTriggerProps };
+//# sourceMappingURL=trigger.d.ts.map

package/dist/dev/ui/tooltip/trigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"trigger.d.ts","names":[],"sources":["../../../../src/ui/tooltip/trigger.tsx"],"mappings":";;;UAOiB,4BAA4B,2BAA2B;;cAG3D,gCAAc,0BAAA,KAAA,8CAAA,cAAA;kBAoCV;OACH,QAAQ;OACR,QAAQ"}

package/dist/dev/ui/tooltip/trigger.js

@@ -0,0 +1,34 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useTooltipContext } from "./context.js";
+import { forwardRef, useCallback } from "react";
+//#region src/ui/tooltip/trigger.tsx
+/** Element that triggers the tooltip on hover and focus. Renders a `<button>` element. */
+const TooltipTrigger = forwardRef(function TooltipTrigger({ render, className, style, ...elementProps }, forwardedRef) {
+	const { tooltip, state, stateAttrMap } = useTooltipContext();
+	const triggerRef = useCallback((el) => {
+		tooltip.setTriggerElement(el);
+	}, [tooltip]);
+	const { onFocusIn, onFocusOut, ...restTriggerProps } = tooltip.triggerProps;
+	return renderElement("button", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: [forwardedRef, triggerRef],
+		props: [
+			{ type: "button" },
+			{
+				...restTriggerProps,
+				onFocus: onFocusIn,
+				onBlur: onFocusOut
+			},
+			elementProps
+		]
+	});
+});
+//#endregion
+export { TooltipTrigger };
+
+//# sourceMappingURL=trigger.js.map

package/dist/dev/ui/tooltip/trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"trigger.js","names":[],"sources":["../../../../src/ui/tooltip/trigger.tsx"],"sourcesContent":["import type { TooltipState } from '@videojs/core';\nimport { forwardRef, useCallback } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useTooltipContext } from './context';\n\nexport interface TooltipTriggerProps extends UIComponentProps<'button', TooltipState> {}\n\n/** Element that triggers the tooltip on hover and focus. Renders a `<button>` element. */\nexport const TooltipTrigger = forwardRef<HTMLButtonElement, TooltipTriggerProps>(function TooltipTrigger(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { tooltip, state, stateAttrMap } = useTooltipContext();\n\n  const triggerRef = useCallback(\n    (el: HTMLButtonElement | null) => {\n      tooltip.setTriggerElement(el);\n    },\n    [tooltip]\n  );\n\n  // Remap DOM focus events to React synthetic event names.\n  // createTooltip() uses onFocusIn/onFocusOut (matching DOM focusin/focusout),\n  // but React maps those to onFocus/onBlur.\n  const { onFocusIn, onFocusOut, ...restTriggerProps } = tooltip.triggerProps;\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: [forwardedRef, triggerRef],\n      props: [\n        {\n          type: 'button' as const,\n        },\n        { ...restTriggerProps, onFocus: onFocusIn, onBlur: onFocusOut },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace TooltipTrigger {\n  export type Props = TooltipTriggerProps;\n  export type State = TooltipState;\n}\n"],"mappings":";;;;;AAUA,MAAa,iBAAiB,WAAmD,SAAS,eACxF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,SAAS,OAAO,iBAAiB,kBAAkB;CAE3D,MAAM,aAAa,aAChB,OAAiC;EAChC,QAAQ,kBAAkB,EAAE;CAC9B,GACA,CAAC,OAAO,CACV;CAKA,MAAM,EAAE,WAAW,YAAY,GAAG,qBAAqB,QAAQ;CAE/D,OAAO,cACL,UACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO;GACL,EACE,MAAM,SACR;GACA;IAAE,GAAG;IAAkB,SAAS;IAAW,QAAQ;GAAW;GAC9D;EACF;CACF,CACF;AACF,CAAC"}

package/dist/dev/ui/volume-indicator/fill.d.ts

@@ -0,0 +1,11 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { VolumeIndicatorCore } from "@videojs/core";
+//#region src/ui/volume-indicator/fill.d.ts
+interface VolumeIndicatorFillProps extends UIComponentProps<'div', VolumeIndicatorCore.State> {}
+declare const VolumeIndicatorFill: import("react").ForwardRefExoticComponent<Omit<VolumeIndicatorFillProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace VolumeIndicatorFill {
+  type Props = VolumeIndicatorFillProps;
+}
+//#endregion
+export { VolumeIndicatorFill, VolumeIndicatorFillProps };
+//# sourceMappingURL=fill.d.ts.map

package/dist/dev/ui/volume-indicator/fill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fill.d.ts","names":[],"sources":["../../../../src/ui/volume-indicator/fill.tsx"],"mappings":";;;UASiB,iCAAiC,wBAAwB,oBAAoB;cAEjF,qCAAmB,0BAAA,KAAA,mDAAA,cAAA;kBAmBf;OACH,QAAQ"}