@videojs/react 10.0.0-alpha.7 → 10.0.0-beta.1

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

@@ -0,0 +1,16 @@
+import { TooltipApi } from "@videojs/core/dom";
+import { StateAttrMap as StateAttrMap$1, TooltipCore } from "@videojs/core";
+
+//#region src/ui/tooltip/context.d.ts
+interface TooltipContextValue {
+  core: TooltipCore;
+  tooltip: TooltipApi;
+  state: TooltipCore.State;
+  stateAttrMap: StateAttrMap$1<TooltipCore.State>;
+  anchorName: string;
+  popupId: string;
+}
+declare function useTooltipContext(): TooltipContextValue;
+//#endregion
+export { TooltipContextValue, useTooltipContext };
+//# sourceMappingURL=context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../../../src/ui/tooltip/context.tsx"],"mappings":";;;;UAMiB,mBAAA;EACf,IAAA,EAAM,WAAA;EACN,OAAA,EAAS,UAAA;EACT,KAAA,EAAO,WAAA,CAAY,KAAA;EACnB,YAAA,EAAc,cAAA,CAAa,WAAA,CAAY,KAAA;EACvC,UAAA;EACA,OAAA;AAAA;AAAA,iBAOc,iBAAA,CAAA,GAAqB,mBAAA"}

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

@@ -0,0 +1,16 @@
+'use client';
+
+import { createContext, useContext } from "react";
+
+//#region src/ui/tooltip/context.tsx
+const TooltipContext = createContext(null);
+const TooltipContextProvider = TooltipContext.Provider;
+function useTooltipContext() {
+	const ctx = useContext(TooltipContext);
+	if (!ctx) throw new Error("Tooltip compound components must be used within a Tooltip.Root");
+	return ctx;
+}
+
+//#endregion
+export { TooltipContextProvider, useTooltipContext };
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/tooltip/context.tsx"],"sourcesContent":["'use client';\n\nimport type { StateAttrMap, TooltipCore } from '@videojs/core';\nimport type { TooltipApi } from '@videojs/core/dom';\nimport { createContext, useContext } from 'react';\n\nexport interface TooltipContextValue {\n  core: TooltipCore;\n  tooltip: TooltipApi;\n  state: TooltipCore.State;\n  stateAttrMap: StateAttrMap<TooltipCore.State>;\n  anchorName: string;\n  popupId: string;\n}\n\nconst TooltipContext = createContext<TooltipContextValue | null>(null);\n\nexport const TooltipContextProvider = TooltipContext.Provider;\n\nexport function useTooltipContext(): TooltipContextValue {\n  const ctx = useContext(TooltipContext);\n  if (!ctx) throw new Error('Tooltip compound components must be used within a Tooltip.Root');\n  return ctx;\n}\n"],"mappings":";;;;;AAeA,MAAM,iBAAiB,cAA0C,KAAK;AAEtE,MAAa,yBAAyB,eAAe;AAErD,SAAgB,oBAAyC;CACvD,MAAM,MAAM,WAAW,eAAe;AACtC,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,iEAAiE;AAC3F,QAAO"}

package/dist/dev/ui/tooltip/group-context.js

@@ -0,0 +1,15 @@
+'use client';
+
+import { createContext, useContext } from "react";
+
+//#region src/ui/tooltip/group-context.tsx
+const TooltipGroupContext = createContext(null);
+const TooltipGroupContextProvider = TooltipGroupContext.Provider;
+/** Returns the nearest `TooltipGroupCore`, or `undefined` when used outside a `Tooltip.Provider`. */
+function useTooltipGroup() {
+	return useContext(TooltipGroupContext)?.group;
+}
+
+//#endregion
+export { TooltipGroupContextProvider, useTooltipGroup };
+//# sourceMappingURL=group-context.js.map

package/dist/dev/ui/tooltip/group-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group-context.js","names":[],"sources":["../../../../src/ui/tooltip/group-context.tsx"],"sourcesContent":["'use client';\n\nimport type { TooltipGroupCore } from '@videojs/core';\nimport { createContext, useContext } from 'react';\n\ninterface TooltipGroupContextValue {\n  group: TooltipGroupCore;\n}\n\nconst TooltipGroupContext = createContext<TooltipGroupContextValue | null>(null);\n\nexport const TooltipGroupContextProvider = TooltipGroupContext.Provider;\n\n/** Returns the nearest `TooltipGroupCore`, or `undefined` when used outside a `Tooltip.Provider`. */\nexport function useTooltipGroup(): TooltipGroupCore | undefined {\n  return useContext(TooltipGroupContext)?.group;\n}\n"],"mappings":";;;;;AASA,MAAM,sBAAsB,cAA+C,KAAK;AAEhF,MAAa,8BAA8B,oBAAoB;;AAG/D,SAAgB,kBAAgD;AAC9D,QAAO,WAAW,oBAAoB,EAAE"}

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

@@ -0,0 +1,3 @@
+import { TooltipContextValue, useTooltipContext } from "./context.js";
+import { index_parts_d_exports } from "./index.parts.js";
+export { index_parts_d_exports as Tooltip, type TooltipContextValue, useTooltipContext };

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

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

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

@@ -0,0 +1,13 @@
+import { TooltipArrow, TooltipArrowProps } from "./tooltip-arrow.js";
+import { TooltipPopup, TooltipPopupProps } from "./tooltip-popup.js";
+import { TooltipProvider, TooltipProviderProps } from "./tooltip-provider.js";
+import { TooltipRoot, TooltipRootProps } from "./tooltip-root.js";
+import { TooltipTrigger, TooltipTriggerProps } from "./tooltip-trigger.js";
+
+//#region src/ui/tooltip/index.parts.d.ts
+declare namespace index_parts_d_exports {
+  export { TooltipArrow as Arrow, TooltipArrowProps as ArrowProps, TooltipPopup as Popup, TooltipPopupProps as PopupProps, TooltipProvider as Provider, TooltipProviderProps as ProviderProps, TooltipRoot as Root, TooltipRootProps as RootProps, TooltipTrigger as Trigger, TooltipTriggerProps as TriggerProps };
+}
+//#endregion
+export { index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

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

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

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

@@ -0,0 +1,19 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { TooltipArrow } from "./tooltip-arrow.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";
+
+//#region src/ui/tooltip/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Arrow: () => TooltipArrow,
+	Popup: () => TooltipPopup,
+	Provider: () => TooltipProvider,
+	Root: () => TooltipRoot,
+	Trigger: () => TooltipTrigger
+});
+
+//#endregion
+export { index_parts_exports };
+//# sourceMappingURL=index.parts.js.map

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

@@ -0,0 +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 { 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 { TooltipTrigger as Trigger, type TooltipTriggerProps as TriggerProps } from './tooltip-trigger';\n"],"mappings":""}

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

@@ -0,0 +1,15 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as react from "react";
+import { TooltipState } from "@videojs/core";
+
+//#region src/ui/tooltip/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: react.ForwardRefExoticComponent<TooltipArrowProps>;
+declare namespace TooltipArrow {
+  type Props = TooltipArrowProps;
+  type State = TooltipState;
+}
+//#endregion
+export { TooltipArrow, TooltipArrowProps };
+//# sourceMappingURL=tooltip-arrow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-arrow.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-arrow.tsx"],"mappings":";;;;;UAQiB,iBAAA,SAA0B,gBAAA,QAAwB,YAAA;;cAGtD,YAAA,EAAY,KAAA,CAAA,yBAAA,CAAA,iBAAA;AAAA,kBAOR,YAAA;EAAA,KACH,KAAA,GAAQ,iBAAA;EAAA,KACR,KAAA,GAAQ,YAAA;AAAA"}

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

@@ -0,0 +1,17 @@
+'use client';
+
+import { createContextPart } from "../create-context-part.js";
+import { useTooltipContext } from "./context.js";
+
+//#region src/ui/tooltip/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=tooltip-arrow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-arrow.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-arrow.tsx"],"sourcesContent":["'use client';\n\nimport 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":";;;;;;;AAWA,MAAa,eAAe,kBAAmD;CAC7E,aAAa;CACb,KAAK;CACL,YAAY;CACZ,aAAa,EAAE,eAAe,QAAiB;CAChD,CAAC"}

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

@@ -0,0 +1,15 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as react from "react";
+import { TooltipState } from "@videojs/core";
+
+//#region src/ui/tooltip/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: react.ForwardRefExoticComponent<Omit<TooltipPopupProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare namespace TooltipPopup {
+  type Props = TooltipPopupProps;
+  type State = TooltipState;
+}
+//#endregion
+export { TooltipPopup, TooltipPopupProps };
+//# sourceMappingURL=tooltip-popup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-popup.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-popup.tsx"],"mappings":";;;;;UAciB,iBAAA,SAA0B,gBAAA,QAAwB,YAAA;;cAKtD,YAAA,EAAY,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,iBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBA6HR,YAAA;EAAA,KACH,KAAA,GAAQ,iBAAA;EAAA,KACR,KAAA,GAAQ,YAAA;AAAA"}

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

@@ -0,0 +1,97 @@
+'use client';
+
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useTooltipContext } from "./context.js";
+import { getAnchorPositionStyle, resolveOffsets } from "@videojs/core/dom";
+import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { TooltipCSSVars } from "@videojs/core";
+import { supportsAnchorPositioning } from "@videojs/utils/dom";
+
+//#region src/ui/tooltip/tooltip-popup.tsx
+const POPUP_RESET = {
+	position: "fixed",
+	inset: "auto",
+	margin: 0
+};
+/** 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, ...elementProps }, forwardedRef) {
+	const { core, tooltip, state, stateAttrMap, anchorName, popupId } = useTooltipContext();
+	const internalRef = useRef(null);
+	const composedRef = useComposedRefs(forwardedRef, useCallback((el) => {
+		tooltip.setPopupElement(el);
+		if (el && supportsAnchorPositioning()) el.style.setProperty("position-anchor", `--${anchorName}`);
+	}, [tooltip, anchorName]), internalRef);
+	const posOpts = useMemo(() => ({
+		side: state.side,
+		align: state.align
+	}), [state.side, state.align]);
+	const anchorStyle = useMemo(() => {
+		if (!supportsAnchorPositioning()) return null;
+		const { positionAnchor: _, ...rest } = getAnchorPositionStyle(anchorName, posOpts, void 0, void 0, void 0, void 0, TooltipCSSVars);
+		return rest;
+	}, [anchorName, posOpts]);
+	const [manualStyle, setManualStyle] = useState(null);
+	useLayoutEffect(() => {
+		if (supportsAnchorPositioning()) return;
+		if (!state.open) {
+			setManualStyle(null);
+			return;
+		}
+		function measure() {
+			const triggerEl = tooltip.triggerElement;
+			const popupEl = internalRef.current;
+			if (!triggerEl || !popupEl) return;
+			setManualStyle(getAnchorPositionStyle(anchorName, posOpts, triggerEl.getBoundingClientRect(), popupEl.getBoundingClientRect(), document.documentElement.getBoundingClientRect(), resolveOffsets(popupEl, TooltipCSSVars), TooltipCSSVars));
+		}
+		measure();
+		let rafId = 0;
+		function reposition() {
+			cancelAnimationFrame(rafId);
+			rafId = requestAnimationFrame(measure);
+		}
+		window.addEventListener("scroll", reposition, {
+			capture: true,
+			passive: true
+		});
+		window.addEventListener("resize", reposition);
+		return () => {
+			cancelAnimationFrame(rafId);
+			window.removeEventListener("scroll", reposition, true);
+			window.removeEventListener("resize", reposition);
+		};
+	}, [
+		state.open,
+		anchorName,
+		posOpts,
+		tooltip
+	]);
+	const positioningStyle = anchorStyle ?? manualStyle ?? POPUP_RESET;
+	if (!state.open) return null;
+	const { onFocusOut, ...restPopupProps } = tooltip.popupProps;
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: composedRef,
+		props: [
+			{
+				id: popupId,
+				style: positioningStyle,
+				...core.getPopupAttrs(state)
+			},
+			{
+				...restPopupProps,
+				onBlur: onFocusOut
+			},
+			elementProps
+		]
+	});
+});
+
+//#endregion
+export { TooltipPopup };
+//# sourceMappingURL=tooltip-popup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-popup.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-popup.tsx"],"sourcesContent":["'use client';\n\nimport type { TooltipState } from '@videojs/core';\nimport { TooltipCSSVars } from '@videojs/core';\nimport { getAnchorPositionStyle, resolveOffsets } from '@videojs/core/dom';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\nimport type { CSSProperties } from 'react';\nimport { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { useTooltipContext } from './context';\n\nexport interface TooltipPopupProps extends UIComponentProps<'div', TooltipState> {}\n\nconst POPUP_RESET: CSSProperties = { position: 'fixed', inset: 'auto', margin: 0 };\n\n/** Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */\nexport const TooltipPopup = forwardRef<HTMLDivElement, TooltipPopupProps>(function TooltipPopup(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { core, tooltip, state, stateAttrMap, anchorName, popupId } = useTooltipContext();\n  const internalRef = useRef<HTMLDivElement>(null);\n\n  const popupRef = useCallback(\n    (el: HTMLDivElement | null) => {\n      tooltip.setPopupElement(el);\n      if (el && supportsAnchorPositioning()) {\n        el.style.setProperty('position-anchor', `--${anchorName}`);\n      }\n    },\n    [tooltip, anchorName]\n  );\n\n  const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);\n\n  // --- Positioning ---\n\n  const posOpts = useMemo(() => ({ side: state.side, align: state.align }), [state.side, state.align]);\n\n  // CSS Anchor Positioning — computed from state, no measurement needed.\n  // `position-anchor` is set imperatively in the ref callback above\n  // because React's style prop silently drops unrecognised CSS properties.\n  const anchorStyle = useMemo(() => {\n    if (!supportsAnchorPositioning()) return null;\n    const { positionAnchor: _, ...rest } = getAnchorPositionStyle(\n      anchorName,\n      posOpts,\n      undefined,\n      undefined,\n      undefined,\n      undefined,\n      TooltipCSSVars\n    );\n    return rest as CSSProperties;\n  }, [anchorName, posOpts]);\n\n  // Manual fallback — measure rects after layout, before paint.\n  const [manualStyle, setManualStyle] = useState<CSSProperties | null>(null);\n\n  useLayoutEffect(() => {\n    if (supportsAnchorPositioning()) return;\n    if (!state.open) {\n      setManualStyle(null);\n      return;\n    }\n\n    function measure(): void {\n      const triggerEl = tooltip.triggerElement;\n      const popupEl = internalRef.current;\n      if (!triggerEl || !popupEl) return;\n\n      const triggerRect = triggerEl.getBoundingClientRect();\n      const popupRect = popupEl.getBoundingClientRect();\n      const boundaryRect = document.documentElement.getBoundingClientRect();\n      const offsets = resolveOffsets(popupEl, TooltipCSSVars);\n\n      setManualStyle(\n        getAnchorPositionStyle(\n          anchorName,\n          posOpts,\n          triggerRect,\n          popupRect,\n          boundaryRect,\n          offsets,\n          TooltipCSSVars\n        ) as CSSProperties\n      );\n    }\n\n    measure();\n\n    // Recompute on scroll/resize so the tooltip tracks its trigger.\n    let rafId = 0;\n    function reposition(): void {\n      cancelAnimationFrame(rafId);\n      rafId = requestAnimationFrame(measure);\n    }\n\n    window.addEventListener('scroll', reposition, { capture: true, passive: true });\n    window.addEventListener('resize', reposition);\n\n    return () => {\n      cancelAnimationFrame(rafId);\n      window.removeEventListener('scroll', reposition, true);\n      window.removeEventListener('resize', reposition);\n    };\n  }, [state.open, anchorName, posOpts, tooltip]);\n\n  // Anchor path uses computed styles; manual path uses measured styles;\n  // fallback resets UA [popover] defaults until positioning is computed.\n  const positioningStyle = anchorStyle ?? manualStyle ?? POPUP_RESET;\n\n  // --- Visibility ---\n\n  if (!state.open) {\n    return null;\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        { ...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":";;;;;;;;;;;AAgBA,MAAM,cAA6B;CAAE,UAAU;CAAS,OAAO;CAAQ,QAAQ;CAAG;;AAGlF,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,SAAS,OAAO,cAAc,YAAY,YAAY,mBAAmB;CACvF,MAAM,cAAc,OAAuB,KAAK;CAYhD,MAAM,cAAc,gBAAgB,cAVnB,aACd,OAA8B;AAC7B,UAAQ,gBAAgB,GAAG;AAC3B,MAAI,MAAM,2BAA2B,CACnC,IAAG,MAAM,YAAY,mBAAmB,KAAK,aAAa;IAG9D,CAAC,SAAS,WAAW,CACtB,EAE2D,YAAY;CAIxE,MAAM,UAAU,eAAe;EAAE,MAAM,MAAM;EAAM,OAAO,MAAM;EAAO,GAAG,CAAC,MAAM,MAAM,MAAM,MAAM,CAAC;CAKpG,MAAM,cAAc,cAAc;AAChC,MAAI,CAAC,2BAA2B,CAAE,QAAO;EACzC,MAAM,EAAE,gBAAgB,GAAG,GAAG,SAAS,uBACrC,YACA,SACA,QACA,QACA,QACA,QACA,eACD;AACD,SAAO;IACN,CAAC,YAAY,QAAQ,CAAC;CAGzB,MAAM,CAAC,aAAa,kBAAkB,SAA+B,KAAK;AAE1E,uBAAsB;AACpB,MAAI,2BAA2B,CAAE;AACjC,MAAI,CAAC,MAAM,MAAM;AACf,kBAAe,KAAK;AACpB;;EAGF,SAAS,UAAgB;GACvB,MAAM,YAAY,QAAQ;GAC1B,MAAM,UAAU,YAAY;AAC5B,OAAI,CAAC,aAAa,CAAC,QAAS;AAO5B,kBACE,uBACE,YACA,SARgB,UAAU,uBAAuB,EACnC,QAAQ,uBAAuB,EAC5B,SAAS,gBAAgB,uBAAuB,EACrD,eAAe,SAAS,eAAe,EAUnD,eACD,CACF;;AAGH,WAAS;EAGT,IAAI,QAAQ;EACZ,SAAS,aAAmB;AAC1B,wBAAqB,MAAM;AAC3B,WAAQ,sBAAsB,QAAQ;;AAGxC,SAAO,iBAAiB,UAAU,YAAY;GAAE,SAAS;GAAM,SAAS;GAAM,CAAC;AAC/E,SAAO,iBAAiB,UAAU,WAAW;AAE7C,eAAa;AACX,wBAAqB,MAAM;AAC3B,UAAO,oBAAoB,UAAU,YAAY,KAAK;AACtD,UAAO,oBAAoB,UAAU,WAAW;;IAEjD;EAAC,MAAM;EAAM;EAAY;EAAS;EAAQ,CAAC;CAI9C,MAAM,mBAAmB,eAAe,eAAe;AAIvD,KAAI,CAAC,MAAM,KACT,QAAO;CAIT,MAAM,EAAE,YAAY,GAAG,mBAAmB,QAAQ;AAElD,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK;EACL,OAAO;GACL;IACE,IAAI;IACJ,OAAO;IACP,GAAG,KAAK,cAAc,MAAM;IAC7B;GACD;IAAE,GAAG;IAAgB,QAAQ;IAAY;GACzC;GACD;EACF,CACF;EACD"}

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

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+import { TooltipGroupProps } from "@videojs/core";
+
+//#region src/ui/tooltip/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=tooltip-provider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-provider.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-provider.tsx"],"mappings":";;;;UAQiB,oBAAA,SAA6B,iBAAA;EAC5C,QAAA,GAAW,SAAA;AAAA;AAAA,iBAGG,eAAA,CAAA;EAAkB,KAAA;EAAO,UAAA;EAAY,OAAA;EAAS;AAAA,GAAY,oBAAA,GAAuB,SAAA;AAAA,kBAOhF,eAAA;EAAA,KACH,KAAA,GAAQ,oBAAA;AAAA"}

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

@@ -0,0 +1,28 @@
+'use client';
+
+import { TooltipGroupContextProvider } from "./group-context.js";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { TooltipGroupCore } from "@videojs/core";
+
+//#region src/ui/tooltip/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=tooltip-provider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-provider.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-provider.tsx"],"sourcesContent":["'use client';\n\nimport { 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  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":";;;;;;;;AAYA,SAAgB,gBAAgB,EAAE,OAAO,YAAY,SAAS,YAA6C;CACzG,MAAM,CAAC,SAAS,eAAe,IAAI,iBAAiB;EAAE;EAAO;EAAY;EAAS,CAAC,CAAC;AACpF,OAAM,SAAS;EAAE;EAAO;EAAY;EAAS,CAAC;AAE9C,QAAO,oBAAC;EAA4B,OAAO,EAAE,OAAO;EAAG;GAAuC"}

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

@@ -0,0 +1,30 @@
+import { TooltipChangeDetails } from "@videojs/core/dom";
+import { ReactNode } from "react";
+import { TooltipProps } from "@videojs/core";
+
+//#region src/ui/tooltip/tooltip-root.d.ts
+interface TooltipRootProps extends TooltipProps {
+  /** 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,
+  children,
+  ...coreProps
+}: TooltipRootProps): ReactNode;
+declare namespace TooltipRoot {
+  type Props = TooltipRootProps;
+}
+//#endregion
+export { TooltipRoot, TooltipRootProps };
+//# sourceMappingURL=tooltip-root.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-root.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-root.tsx"],"mappings":";;;;;UAaiB,gBAAA,SAAyB,YAAA;;EAExC,YAAA,IAAgB,IAAA,WAAe,OAAA,EAAS,oBAAA;EAFR;EAIhC,oBAAA,IAAwB,IAAA;EACxB,QAAA,GAAW,SAAA;AAAA;AAAA,iBAGG,WAAA,CAAA;EACd,IAAA,EAAM,cAAA;EACN,WAAA;EACA,YAAA,EAAc,gBAAA;EACd,oBAAA,EAAsB,wBAAA;EACtB,KAAA;EACA,UAAA;EACA,qBAAA;EACA,QAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,gBAAA,GAAmB,SAAA;AAAA,kBAyEL,WAAA;EAAA,KACH,KAAA,GAAQ,gBAAA;AAAA"}

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

@@ -0,0 +1,71 @@
+'use client';
+
+import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { useSafeId } from "../../utils/use-safe-id.js";
+import { TooltipContextProvider } from "./context.js";
+import { useTooltipGroup } from "./group-context.js";
+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 { TooltipCore, TooltipDataAttrs } from "@videojs/core";
+
+//#region src/ui/tooltip/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, children, ...coreProps }) {
+	const [core] = useState(() => new TooltipCore(coreProps));
+	core.setProps(coreProps);
+	const isControlled = controlledOpen !== void 0;
+	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 groupRef = useLatestRef(groupFromContext);
+	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,
+			group: () => groupRef.current
+		});
+		if (!isControlled && defaultOpen) instance.open();
+		return instance;
+	});
+	const anchorName = useSafeId();
+	const popupId = useSafeId("tooltip-");
+	useEffect(() => {
+		if (controlledOpen === void 0) return;
+		const { active: inputOpen } = tooltip.input.current;
+		if (controlledOpen === inputOpen) return;
+		if (controlledOpen) tooltip.open();
+		else tooltip.close();
+	}, [controlledOpen, tooltip]);
+	useEffect(() => () => tooltip.destroy(), [tooltip]);
+	const input = useSnapshot(tooltip.input);
+	core.setInput(input);
+	return /* @__PURE__ */ jsx(TooltipContextProvider, {
+		value: {
+			core,
+			tooltip,
+			state: core.getState(),
+			stateAttrMap: TooltipDataAttrs,
+			anchorName,
+			popupId
+		},
+		children
+	});
+}
+
+//#endregion
+export { TooltipRoot };
+//# sourceMappingURL=tooltip-root.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-root.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-root.tsx"],"sourcesContent":["'use client';\n\nimport { type TooltipProps as CoreTooltipProps, TooltipCore, TooltipDataAttrs } from '@videojs/core';\nimport { createTooltip, createTransition, type TooltipChangeDetails } from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport type { ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { TooltipContextProvider } from './context';\nimport { useTooltipGroup } from './group-context';\n\nexport interface TooltipRootProps extends CoreTooltipProps {\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  children,\n  ...coreProps\n}: TooltipRootProps): ReactNode {\n  const [core] = useState(() => new TooltipCore(coreProps));\n  core.setProps(coreProps);\n\n  const isControlled = controlledOpen !== undefined;\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 groupRef = useLatestRef(groupFromContext);\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      group: () => groupRef.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 anchorName = useSafeId();\n  const popupId = useSafeId('tooltip-');\n\n  // Sync controlled open prop -> internal input state.\n  useEffect(() => {\n    if (controlledOpen === undefined) 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  // Cleanup on unmount\n  useEffect(() => () => tooltip.destroy(), [tooltip]);\n\n  const input = useSnapshot(tooltip.input);\n  core.setInput(input);\n  const state = core.getState();\n\n  return (\n    <TooltipContextProvider value={{ core, tooltip, state, stateAttrMap: TooltipDataAttrs, anchorName, popupId }}>\n      {children}\n    </TooltipContextProvider>\n  );\n}\n\nexport namespace TooltipRoot {\n  export type Props = TooltipRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;AAqBA,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,UACA,GAAG,aAC2B;CAC9B,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,UAAU,CAAC;AACzD,MAAK,SAAS,UAAU;CAExB,MAAM,eAAe,mBAAmB;CAExC,MAAM,mBAAmB,iBAAiB;CAI1C,MAAM,kBAAkB,aAAa,iBAAiB;CACtD,MAAM,0BAA0B,aAAa,yBAAyB;CACtE,MAAM,WAAW,aAAa,MAAM;CACpC,MAAM,gBAAgB,aAAa,WAAW;CAC9C,MAAM,2BAA2B,aAAa,sBAAsB;CACpE,MAAM,cAAc,aAAa,SAAS;CAC1C,MAAM,WAAW,aAAa,iBAAiB;CAE/C,MAAM,CAAC,WAAW,eAAe;EAC/B,MAAM,WAAW,cAAc;GAC7B,YAAY,kBAAkB;GAC9B,eAAe,UAAmB,YAAkC;AAClE,oBAAgB,UAAU,UAAU,QAAQ;;GAE9C,uBAAuB,aAAsB;AAC3C,4BAAwB,UAAU,SAAS;;GAE7C,aAAa,SAAS;GACtB,kBAAkB,cAAc;GAChC,6BAA6B,yBAAyB;GACtD,gBAAgB,YAAY;GAC5B,aAAa,SAAS;GACvB,CAAC;AAGF,MAAI,CAAC,gBAAgB,YACnB,UAAS,MAAM;AAGjB,SAAO;GACP;CAEF,MAAM,aAAa,WAAW;CAC9B,MAAM,UAAU,UAAU,WAAW;AAGrC,iBAAgB;AACd,MAAI,mBAAmB,OAAW;EAElC,MAAM,EAAE,QAAQ,cAAc,QAAQ,MAAM;AAC5C,MAAI,mBAAmB,UAAW;AAElC,MAAI,eACF,SAAQ,MAAM;MAEd,SAAQ,OAAO;IAEhB,CAAC,gBAAgB,QAAQ,CAAC;AAG7B,uBAAsB,QAAQ,SAAS,EAAE,CAAC,QAAQ,CAAC;CAEnD,MAAM,QAAQ,YAAY,QAAQ,MAAM;AACxC,MAAK,SAAS,MAAM;AAGpB,QACE,oBAAC;EAAuB,OAAO;GAAE;GAAM;GAAS,OAHpC,KAAK,UAAU;GAG4B,cAAc;GAAkB;GAAY;GAAS;EACzG;GACsB"}

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

@@ -0,0 +1,15 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as react from "react";
+import { TooltipState } from "@videojs/core";
+
+//#region src/ui/tooltip/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: react.ForwardRefExoticComponent<Omit<TooltipTriggerProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+declare namespace TooltipTrigger {
+  type Props = TooltipTriggerProps;
+  type State = TooltipState;
+}
+//#endregion
+export { TooltipTrigger, TooltipTriggerProps };
+//# sourceMappingURL=tooltip-trigger.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-trigger.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-trigger.tsx"],"mappings":";;;;;UAUiB,mBAAA,SAA4B,gBAAA,WAA2B,YAAA;;cAG3D,cAAA,EAAc,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,mBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBAwCV,cAAA;EAAA,KACH,KAAA,GAAQ,mBAAA;EAAA,KACR,KAAA,GAAQ,YAAA;AAAA"}

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

@@ -0,0 +1,42 @@
+'use client';
+
+import { renderElement } from "../../utils/use-render.js";
+import { useTooltipContext } from "./context.js";
+import { forwardRef, useCallback } from "react";
+import { supportsAnchorPositioning } from "@videojs/utils/dom";
+
+//#region src/ui/tooltip/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 { core, tooltip, state, stateAttrMap, anchorName, popupId } = useTooltipContext();
+	const triggerRef = useCallback((el) => {
+		tooltip.setTriggerElement(el);
+		if (el && supportsAnchorPositioning()) el.style.setProperty("anchor-name", `--${anchorName}`);
+	}, [tooltip, anchorName]);
+	const { onFocusIn, onFocusOut, ...restTriggerProps } = tooltip.triggerProps;
+	return renderElement("button", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: [forwardedRef, triggerRef],
+		props: [
+			{
+				type: "button",
+				...core.getTriggerAttrs(state, popupId)
+			},
+			{
+				...restTriggerProps,
+				onFocus: onFocusIn,
+				onBlur: onFocusOut
+			},
+			elementProps
+		]
+	});
+});
+
+//#endregion
+export { TooltipTrigger };
+//# sourceMappingURL=tooltip-trigger.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-trigger.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-trigger.tsx"],"sourcesContent":["'use client';\n\nimport type { TooltipState } from '@videojs/core';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\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 { core, tooltip, state, stateAttrMap, anchorName, popupId } = useTooltipContext();\n\n  const triggerRef = useCallback(\n    (el: HTMLButtonElement | null) => {\n      tooltip.setTriggerElement(el);\n      if (el && supportsAnchorPositioning()) {\n        el.style.setProperty('anchor-name', `--${anchorName}`);\n      }\n    },\n    [tooltip, anchorName]\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          ...core.getTriggerAttrs(state, popupId),\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":";;;;;;;;;AAaA,MAAa,iBAAiB,WAAmD,SAAS,eACxF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,SAAS,OAAO,cAAc,YAAY,YAAY,mBAAmB;CAEvF,MAAM,aAAa,aAChB,OAAiC;AAChC,UAAQ,kBAAkB,GAAG;AAC7B,MAAI,MAAM,2BAA2B,CACnC,IAAG,MAAM,YAAY,eAAe,KAAK,aAAa;IAG1D,CAAC,SAAS,WAAW,CACtB;CAKD,MAAM,EAAE,WAAW,YAAY,GAAG,qBAAqB,QAAQ;AAE/D,QAAO,cACL,UACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK,CAAC,cAAc,WAAW;EAC/B,OAAO;GACL;IACE,MAAM;IACN,GAAG,KAAK,gBAAgB,OAAO,QAAQ;IACxC;GACD;IAAE,GAAG;IAAkB,SAAS;IAAW,QAAQ;IAAY;GAC/D;GACD;EACF,CACF;EACD"}

package/dist/dev/ui/volume-slider/index.parts.d.ts

@@ -1,13 +1,13 @@
 import { SliderFill, SliderFillProps } from "../slider/slider-fill.js";
+import { SliderPreview, SliderPreviewProps } from "../slider/slider-preview.js";
 import { SliderThumb, SliderThumbProps } from "../slider/slider-thumb.js";
 import { SliderTrack, SliderTrackProps } from "../slider/slider-track.js";
 import { SliderValue, SliderValueProps } from "../slider/slider-value.js";
-import "../slider/index.parts.js";
 import { VolumeSliderRoot, VolumeSliderRootProps } from "./volume-slider-root.js";
 
 //#region src/ui/volume-slider/index.parts.d.ts
 declare namespace index_parts_d_exports {
-  export { SliderFill as Fill, SliderFillProps as FillProps, VolumeSliderRoot as Root, VolumeSliderRootProps as RootProps, SliderThumb as Thumb, SliderThumbProps as ThumbProps, SliderTrack as Track, SliderTrackProps as TrackProps, SliderValue as Value, SliderValueProps as ValueProps };
+  export { SliderFill as Fill, SliderFillProps as FillProps, SliderPreview as Preview, SliderPreviewProps as PreviewProps, VolumeSliderRoot as Root, VolumeSliderRootProps as RootProps, SliderThumb as Thumb, SliderThumbProps as ThumbProps, SliderTrack as Track, SliderTrackProps as TrackProps, SliderValue as Value, SliderValueProps as ValueProps };
 }
 //#endregion
 export { index_parts_d_exports };

package/dist/dev/ui/volume-slider/index.parts.js

@@ -1,5 +1,6 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
 import { SliderFill } from "../slider/slider-fill.js";
+import { SliderPreview } from "../slider/slider-preview.js";
 import { SliderThumb } from "../slider/slider-thumb.js";
 import { SliderTrack } from "../slider/slider-track.js";
 import { SliderValue } from "../slider/slider-value.js";
@@ -8,6 +9,7 @@ import { VolumeSliderRoot } from "./volume-slider-root.js";
 //#region src/ui/volume-slider/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Fill: () => SliderFill,
+	Preview: () => SliderPreview,
 	Root: () => VolumeSliderRoot,
 	Thumb: () => SliderThumb,
 	Track: () => SliderTrack,

package/dist/dev/ui/volume-slider/index.parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/volume-slider/index.parts.ts"],"sourcesContent":["export {\n  Fill,\n  type FillProps,\n  Thumb,\n  type ThumbProps,\n  Track,\n  type TrackProps,\n  Value,\n  type ValueProps,\n} from '../slider/index.parts';\nexport { VolumeSliderRoot as Root, type VolumeSliderRootProps as RootProps } from './volume-slider-root';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/volume-slider/index.parts.ts"],"sourcesContent":["export {\n  Fill,\n  type FillProps,\n  Preview,\n  type PreviewProps,\n  Thumb,\n  type ThumbProps,\n  Track,\n  type TrackProps,\n  Value,\n  type ValueProps,\n} from '../slider/index.parts';\nexport { VolumeSliderRoot as Root, type VolumeSliderRootProps as RootProps } from './volume-slider-root';\n"],"mappings":""}

package/dist/dev/ui/volume-slider/volume-slider-root.js

@@ -15,8 +15,8 @@ const noopVolume = {
 	volume: 0,
 	muted: false,
 	volumeAvailability: "unsupported",
-	changeVolume: () => 0,
-	toggleMute: () => false
+	setVolume: () => 0,
+	toggleMuted: () => false
 };
 const VolumeSliderRoot = forwardRef(function VolumeSliderRoot(componentProps, forwardedRef) {
 	const { render, className, style, label, orientation, step = VolumeSliderCore.defaultProps.step, largeStep = VolumeSliderCore.defaultProps.largeStep, disabled, thumbAlignment, onDragStart, onDragEnd, ...elementProps } = componentProps;
@@ -31,7 +31,7 @@ const VolumeSliderRoot = forwardRef(function VolumeSliderRoot(componentProps, fo
 		thumbAlignment
 	});
 	const volumeRef = useLatestRef(volume);
-	const { state, cssVars, rootRef, thumbRef, rootProps, thumbProps } = useSlider({
+	const { state, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider({
 		computeState: (input) => {
 			core.setInput(input);
 			core.setMedia(volume ?? noopVolume);
@@ -45,10 +45,10 @@ const VolumeSliderRoot = forwardRef(function VolumeSliderRoot(componentProps, fo
 		adjustPercent: (rawPercent, thumbSize, trackSize) => core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),
 		getCSSVars: getSliderCSSVars,
 		onValueChange: (percent) => {
-			volumeRef.current?.changeVolume(percent / 100);
+			volumeRef.current?.setVolume(percent / 100);
 		},
 		onValueCommit: (percent) => {
-			volumeRef.current?.changeVolume(percent / 100);
+			volumeRef.current?.setVolume(percent / 100);
 		},
 		onDragStart,
 		onDragEnd
@@ -76,7 +76,10 @@ const VolumeSliderRoot = forwardRef(function VolumeSliderRoot(componentProps, fo
 			stateAttrMap: SliderDataAttrs,
 			ref: [forwardedRef, rootRef],
 			props: [
-				{ style: cssVars },
+				{ style: {
+					...cssVars,
+					...rootStyle
+				} },
 				rootProps,
 				elementProps
 			]