@videojs/react 10.0.0-alpha.4 → 10.0.0-alpha.5

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

@@ -0,0 +1,94 @@
+'use client';
+
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { renderElement } from "../../utils/use-render.js";
+import { usePopoverContext } from "./context.js";
+import { getAnchorPositionStyle, resolveOffsets } from "@videojs/core/dom";
+import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { supportsAnchorPositioning } from "@videojs/utils/dom";
+
+//#region src/ui/popover/popover-popup.tsx
+const POPOVER_RESET = {
+	position: "fixed",
+	inset: "auto",
+	margin: 0
+};
+/** Container for the popover content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */
+const PopoverPopup = forwardRef(function PopoverPopup({ render, className, style, ...elementProps }, forwardedRef) {
+	const { core, popover, state, stateAttrMap, anchorName, popupId } = usePopoverContext();
+	const internalRef = useRef(null);
+	const composedRef = useComposedRefs(forwardedRef, useCallback((el) => {
+		popover.setPopupElement(el);
+	}, [popover]), internalRef);
+	const posOpts = useMemo(() => ({
+		side: state.side,
+		align: state.align
+	}), [state.side, state.align]);
+	const anchorStyle = useMemo(() => {
+		if (!supportsAnchorPositioning()) return null;
+		return getAnchorPositionStyle(anchorName, posOpts);
+	}, [anchorName, posOpts]);
+	const [manualStyle, setManualStyle] = useState(null);
+	useLayoutEffect(() => {
+		if (supportsAnchorPositioning()) return;
+		if (!state.open) {
+			setManualStyle(null);
+			return;
+		}
+		function measure() {
+			const triggerEl = popover.triggerElement;
+			const popupEl = internalRef.current;
+			if (!triggerEl || !popupEl) return;
+			setManualStyle(getAnchorPositionStyle(anchorName, posOpts, triggerEl.getBoundingClientRect(), popupEl.getBoundingClientRect(), document.documentElement.getBoundingClientRect(), resolveOffsets(popupEl)));
+		}
+		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,
+		popover
+	]);
+	const positioningStyle = anchorStyle ?? manualStyle ?? POPOVER_RESET;
+	if (!state.open) return null;
+	const { onFocusOut, ...restPopupProps } = popover.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 { PopoverPopup };
+//# sourceMappingURL=popover-popup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover-popup.js","names":[],"sources":["../../../../src/ui/popover/popover-popup.tsx"],"sourcesContent":["'use client';\n\nimport type { PopoverState } 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 { usePopoverContext } from './context';\n\nexport interface PopoverPopupProps extends UIComponentProps<'div', PopoverState> {}\n\nconst POPOVER_RESET: CSSProperties = { position: 'fixed', inset: 'auto', margin: 0 };\n\n/** Container for the popover content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */\nexport const PopoverPopup = forwardRef<HTMLDivElement, PopoverPopupProps>(function PopoverPopup(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { core, popover, state, stateAttrMap, anchorName, popupId } = usePopoverContext();\n  const internalRef = useRef<HTMLDivElement>(null);\n\n  const popupRef = useCallback(\n    (el: HTMLDivElement | null) => {\n      popover.setPopupElement(el);\n    },\n    [popover]\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  // getAnchorPositionStyle returns camelCase keys, directly compatible\n  // with React's style prop.\n  const anchorStyle = useMemo(() => {\n    if (!supportsAnchorPositioning()) return null;\n    return getAnchorPositionStyle(anchorName, posOpts) 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 = popover.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);\n\n      setManualStyle(\n        getAnchorPositionStyle(anchorName, posOpts, triggerRect, popupRect, boundaryRect, offsets) as CSSProperties\n      );\n    }\n\n    measure();\n\n    // Recompute on scroll/resize so the popover 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, popover]);\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 ?? POPOVER_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 } = popover.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 PopoverPopup {\n  export type Props = PopoverPopupProps;\n  export type State = PopoverState;\n}\n"],"mappings":";;;;;;;;;;AAeA,MAAM,gBAA+B;CAAE,UAAU;CAAS,OAAO;CAAQ,QAAQ;CAAG;;AAGpF,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;CAShD,MAAM,cAAc,gBAAgB,cAPnB,aACd,OAA8B;AAC7B,UAAQ,gBAAgB,GAAG;IAE7B,CAAC,QAAQ,CACV,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;AACzC,SAAO,uBAAuB,YAAY,QAAQ;IACjD,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,uBAAuB,YAAY,SANjB,UAAU,uBAAuB,EACnC,QAAQ,uBAAuB,EAC5B,SAAS,gBAAgB,uBAAuB,EACrD,eAAe,QAAQ,CAGqD,CAC3F;;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/popover/popover-root.d.ts

@@ -0,0 +1,29 @@
+import { PopoverChangeDetails } from "@videojs/core/dom";
+import { ReactNode } from "react";
+import { PopoverProps } from "@videojs/core";
+
+//#region src/ui/popover/popover-root.d.ts
+interface PopoverRootProps extends PopoverProps {
+  /** Called when the popover open state changes (fires immediately, before animations). */
+  onOpenChange?: (open: boolean, details: PopoverChangeDetails) => void;
+  /** Called after open/close animations complete. */
+  onOpenChangeComplete?: (open: boolean) => void;
+  children?: ReactNode;
+}
+declare function PopoverRoot({
+  open: controlledOpen,
+  defaultOpen,
+  onOpenChange: onOpenChangeProp,
+  onOpenChangeComplete: onOpenChangeCompleteProp,
+  openOnHover,
+  delay,
+  closeDelay,
+  children,
+  ...coreProps
+}: PopoverRootProps): ReactNode;
+declare namespace PopoverRoot {
+  type Props = PopoverRootProps;
+}
+//#endregion
+export { PopoverRoot, PopoverRootProps };
+//# sourceMappingURL=popover-root.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover-root.d.ts","names":[],"sources":["../../../../src/ui/popover/popover-root.tsx"],"mappings":";;;;;UAYiB,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,WAAA;EACA,KAAA;EACA,UAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,gBAAA,GAAmB,SAAA;AAAA,kBAuEL,WAAA;EAAA,KACH,KAAA,GAAQ,gBAAA;AAAA"}

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

@@ -0,0 +1,69 @@
+'use client';
+
+import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { PopoverContextProvider } from "./context.js";
+import { useSafeId } from "../../utils/use-safe-id.js";
+import { createPopover, createTransition } from "@videojs/core/dom";
+import { useSnapshot } from "@videojs/store/react";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { PopoverCore, PopoverDataAttrs } from "@videojs/core";
+
+//#region src/ui/popover/popover-root.tsx
+function PopoverRoot({ open: controlledOpen, defaultOpen = PopoverCore.defaultProps.defaultOpen, onOpenChange: onOpenChangeProp, onOpenChangeComplete: onOpenChangeCompleteProp, openOnHover = PopoverCore.defaultProps.openOnHover, delay = PopoverCore.defaultProps.delay, closeDelay = PopoverCore.defaultProps.closeDelay, children, ...coreProps }) {
+	const [core] = useState(() => new PopoverCore(coreProps));
+	core.setProps(coreProps);
+	const isControlled = controlledOpen !== void 0;
+	const onOpenChangeRef = useLatestRef(onOpenChangeProp);
+	const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);
+	const closeOnEscapeRef = useLatestRef(coreProps.closeOnEscape);
+	const closeOnOutsideClickRef = useLatestRef(coreProps.closeOnOutsideClick);
+	const openOnHoverRef = useLatestRef(openOnHover);
+	const delayRef = useLatestRef(delay);
+	const closeDelayRef = useLatestRef(closeDelay);
+	const [popover] = useState(() => {
+		const instance = createPopover({
+			transition: createTransition(),
+			onOpenChange: (nextOpen, details) => {
+				onOpenChangeRef.current?.(nextOpen, details);
+			},
+			onOpenChangeComplete: (nextOpen) => {
+				onOpenChangeCompleteRef.current?.(nextOpen);
+			},
+			closeOnEscape: () => closeOnEscapeRef.current ?? PopoverCore.defaultProps.closeOnEscape,
+			closeOnOutsideClick: () => closeOnOutsideClickRef.current ?? PopoverCore.defaultProps.closeOnOutsideClick,
+			openOnHover: () => openOnHoverRef.current,
+			delay: () => delayRef.current,
+			closeDelay: () => closeDelayRef.current
+		});
+		if (!isControlled && defaultOpen) instance.open("click");
+		return instance;
+	});
+	const anchorName = useSafeId();
+	const popupId = useSafeId("popup-");
+	useEffect(() => {
+		if (controlledOpen === void 0) return;
+		const { active: inputOpen } = popover.input.current;
+		if (controlledOpen === inputOpen) return;
+		if (controlledOpen) popover.open("click");
+		else popover.close("click");
+	}, [controlledOpen, popover]);
+	useEffect(() => () => popover.destroy(), [popover]);
+	const input = useSnapshot(popover.input);
+	core.setInput(input);
+	return /* @__PURE__ */ jsx(PopoverContextProvider, {
+		value: {
+			core,
+			popover,
+			state: core.getState(),
+			stateAttrMap: PopoverDataAttrs,
+			anchorName,
+			popupId
+		},
+		children
+	});
+}
+
+//#endregion
+export { PopoverRoot };
+//# sourceMappingURL=popover-root.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover-root.js","names":[],"sources":["../../../../src/ui/popover/popover-root.tsx"],"sourcesContent":["'use client';\n\nimport { type PopoverProps as CorePopoverProps, PopoverCore, PopoverDataAttrs } from '@videojs/core';\nimport { createPopover, createTransition, type PopoverChangeDetails } 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 { PopoverContextProvider } from './context';\n\nexport interface PopoverRootProps extends CorePopoverProps {\n  /** Called when the popover open state changes (fires immediately, before animations). */\n  onOpenChange?: (open: boolean, details: PopoverChangeDetails) => void;\n  /** Called after open/close animations complete. */\n  onOpenChangeComplete?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\nexport function PopoverRoot({\n  open: controlledOpen,\n  defaultOpen = PopoverCore.defaultProps.defaultOpen,\n  onOpenChange: onOpenChangeProp,\n  onOpenChangeComplete: onOpenChangeCompleteProp,\n  openOnHover = PopoverCore.defaultProps.openOnHover,\n  delay = PopoverCore.defaultProps.delay,\n  closeDelay = PopoverCore.defaultProps.closeDelay,\n  children,\n  ...coreProps\n}: PopoverRootProps): ReactNode {\n  const [core] = useState(() => new PopoverCore(coreProps));\n  core.setProps(coreProps);\n\n  const isControlled = controlledOpen !== undefined;\n\n  // Keep refs that always point to the latest values so the\n  // createPopover closure never reads stale props.\n  const onOpenChangeRef = useLatestRef(onOpenChangeProp);\n  const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);\n  const closeOnEscapeRef = useLatestRef(coreProps.closeOnEscape);\n  const closeOnOutsideClickRef = useLatestRef(coreProps.closeOnOutsideClick);\n  const openOnHoverRef = useLatestRef(openOnHover);\n  const delayRef = useLatestRef(delay);\n  const closeDelayRef = useLatestRef(closeDelay);\n\n  const [popover] = useState(() => {\n    const instance = createPopover({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean, details: PopoverChangeDetails) => {\n        onOpenChangeRef.current?.(nextOpen, details);\n      },\n      onOpenChangeComplete: (nextOpen: boolean) => {\n        onOpenChangeCompleteRef.current?.(nextOpen);\n      },\n      closeOnEscape: () => closeOnEscapeRef.current ?? PopoverCore.defaultProps.closeOnEscape,\n      closeOnOutsideClick: () => closeOnOutsideClickRef.current ?? PopoverCore.defaultProps.closeOnOutsideClick,\n      openOnHover: () => openOnHoverRef.current,\n      delay: () => delayRef.current,\n      closeDelay: () => closeDelayRef.current,\n    });\n\n    // Apply defaultOpen on creation (uncontrolled only)\n    if (!isControlled && defaultOpen) {\n      instance.open('click');\n    }\n\n    return instance;\n  });\n\n  const anchorName = useSafeId();\n  const popupId = useSafeId('popup-');\n\n  // Sync controlled open prop -> internal input state.\n  useEffect(() => {\n    if (controlledOpen === undefined) return;\n\n    const { active: inputOpen } = popover.input.current;\n    if (controlledOpen === inputOpen) return;\n\n    if (controlledOpen) {\n      popover.open('click');\n    } else {\n      popover.close('click');\n    }\n  }, [controlledOpen, popover]);\n\n  // Cleanup on unmount\n  useEffect(() => () => popover.destroy(), [popover]);\n\n  const input = useSnapshot(popover.input);\n  core.setInput(input);\n  const state = core.getState();\n\n  return (\n    <PopoverContextProvider value={{ core, popover, state, stateAttrMap: PopoverDataAttrs, anchorName, popupId }}>\n      {children}\n    </PopoverContextProvider>\n  );\n}\n\nexport namespace PopoverRoot {\n  export type Props = PopoverRootProps;\n}\n"],"mappings":";;;;;;;;;;;;AAoBA,SAAgB,YAAY,EAC1B,MAAM,gBACN,cAAc,YAAY,aAAa,aACvC,cAAc,kBACd,sBAAsB,0BACtB,cAAc,YAAY,aAAa,aACvC,QAAQ,YAAY,aAAa,OACjC,aAAa,YAAY,aAAa,YACtC,UACA,GAAG,aAC2B;CAC9B,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,UAAU,CAAC;AACzD,MAAK,SAAS,UAAU;CAExB,MAAM,eAAe,mBAAmB;CAIxC,MAAM,kBAAkB,aAAa,iBAAiB;CACtD,MAAM,0BAA0B,aAAa,yBAAyB;CACtE,MAAM,mBAAmB,aAAa,UAAU,cAAc;CAC9D,MAAM,yBAAyB,aAAa,UAAU,oBAAoB;CAC1E,MAAM,iBAAiB,aAAa,YAAY;CAChD,MAAM,WAAW,aAAa,MAAM;CACpC,MAAM,gBAAgB,aAAa,WAAW;CAE9C,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,qBAAqB,iBAAiB,WAAW,YAAY,aAAa;GAC1E,2BAA2B,uBAAuB,WAAW,YAAY,aAAa;GACtF,mBAAmB,eAAe;GAClC,aAAa,SAAS;GACtB,kBAAkB,cAAc;GACjC,CAAC;AAGF,MAAI,CAAC,gBAAgB,YACnB,UAAS,KAAK,QAAQ;AAGxB,SAAO;GACP;CAEF,MAAM,aAAa,WAAW;CAC9B,MAAM,UAAU,UAAU,SAAS;AAGnC,iBAAgB;AACd,MAAI,mBAAmB,OAAW;EAElC,MAAM,EAAE,QAAQ,cAAc,QAAQ,MAAM;AAC5C,MAAI,mBAAmB,UAAW;AAElC,MAAI,eACF,SAAQ,KAAK,QAAQ;MAErB,SAAQ,MAAM,QAAQ;IAEvB,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/popover/popover-trigger.d.ts

@@ -0,0 +1,15 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as react from "react";
+import { PopoverState } from "@videojs/core";
+
+//#region src/ui/popover/popover-trigger.d.ts
+interface PopoverTriggerProps extends UIComponentProps<'button', PopoverState> {}
+/** Button that toggles the popover visibility. Renders a `<button>` element. */
+declare const PopoverTrigger: react.ForwardRefExoticComponent<Omit<PopoverTriggerProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+declare namespace PopoverTrigger {
+  type Props = PopoverTriggerProps;
+  type State = PopoverState;
+}
+//#endregion
+export { PopoverTrigger, PopoverTriggerProps };
+//# sourceMappingURL=popover-trigger.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover-trigger.d.ts","names":[],"sources":["../../../../src/ui/popover/popover-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/popover/popover-trigger.js

@@ -0,0 +1,43 @@
+'use client';
+
+import { renderElement } from "../../utils/use-render.js";
+import { usePopoverContext } from "./context.js";
+import { getAnchorNameStyle } from "@videojs/core/dom";
+import { forwardRef, useCallback, useMemo } from "react";
+
+//#region src/ui/popover/popover-trigger.tsx
+/** Button that toggles the popover visibility. Renders a `<button>` element. */
+const PopoverTrigger = forwardRef(function PopoverTrigger({ render, className, style, ...elementProps }, forwardedRef) {
+	const { core, popover, state, stateAttrMap, anchorName, popupId } = usePopoverContext();
+	const triggerRef = useCallback((el) => {
+		popover.setTriggerElement(el);
+	}, [popover]);
+	const anchorStyle = useMemo(() => getAnchorNameStyle(anchorName), [anchorName]);
+	const { onFocusIn, onFocusOut, ...restTriggerProps } = popover.triggerProps;
+	return renderElement("button", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: [forwardedRef, triggerRef],
+		props: [
+			{
+				type: "button",
+				style: anchorStyle,
+				...core.getTriggerAttrs(state, popupId)
+			},
+			{
+				...restTriggerProps,
+				onFocus: onFocusIn,
+				onBlur: onFocusOut
+			},
+			elementProps
+		]
+	});
+});
+
+//#endregion
+export { PopoverTrigger };
+//# sourceMappingURL=popover-trigger.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover-trigger.js","names":[],"sources":["../../../../src/ui/popover/popover-trigger.tsx"],"sourcesContent":["'use client';\n\nimport type { PopoverState } from '@videojs/core';\nimport { getAnchorNameStyle } from '@videojs/core/dom';\nimport { forwardRef, useCallback, useMemo } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopoverContext } from './context';\n\nexport interface PopoverTriggerProps extends UIComponentProps<'button', PopoverState> {}\n\n/** Button that toggles the popover visibility. Renders a `<button>` element. */\nexport const PopoverTrigger = forwardRef<HTMLButtonElement, PopoverTriggerProps>(function PopoverTrigger(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { core, popover, state, stateAttrMap, anchorName, popupId } = usePopoverContext();\n\n  const triggerRef = useCallback(\n    (el: HTMLButtonElement | null) => {\n      popover.setTriggerElement(el);\n    },\n    [popover]\n  );\n\n  const anchorStyle = useMemo(() => getAnchorNameStyle(anchorName), [anchorName]);\n\n  // Remap DOM focus events to React synthetic event names.\n  // createPopover() uses onFocusIn/onFocusOut (matching DOM focusin/focusout),\n  // but React maps those to onFocus/onBlur.\n  const { onFocusIn, onFocusOut, ...restTriggerProps } = popover.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          style: anchorStyle,\n          ...core.getTriggerAttrs(state, popupId),\n        },\n        { ...restTriggerProps, onFocus: onFocusIn, onBlur: onFocusOut },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace PopoverTrigger {\n  export type Props = PopoverTriggerProps;\n  export type State = PopoverState;\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;IAE/B,CAAC,QAAQ,CACV;CAED,MAAM,cAAc,cAAc,mBAAmB,WAAW,EAAE,CAAC,WAAW,CAAC;CAK/E,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,OAAO;IACP,GAAG,KAAK,gBAAgB,OAAO,QAAQ;IACxC;GACD;IAAE,GAAG;IAAkB,SAAS;IAAW,QAAQ;IAAY;GAC/D;GACD;EACF,CACF;EACD"}

package/dist/dev/ui/poster/poster.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"poster.d.ts","names":[],"sources":["../../../../src/ui/poster/poster.tsx"],"mappings":";;;;;UAWiB,WAAA,SAAoB,gBAAA,QAAwB,UAAA,CAAW,KAAA;;AAAxE;;;;;;;;;AAgBA;;;;cAAa,MAAA,EAAM,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,WAAA,WAAA,KAAA,CAAA,aAAA,CAAA,gBAAA;AAAA,kBA2BF,MAAA;EAAA,KACH,KAAA,GAAQ,WAAA;EAAA,KACR,KAAA,GAAQ,UAAA,CAAW,KAAA;AAAA"}
+{"version":3,"file":"poster.d.ts","names":[],"sources":["../../../../src/ui/poster/poster.tsx"],"mappings":";;;;;UAWiB,WAAA,SAAoB,gBAAA,QAAwB,UAAA,CAAW,KAAA;;AAAxE;;;;;;;;;AAgBA;;;;cAAa,MAAA,EAAM,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,WAAA,WAAA,KAAA,CAAA,aAAA,CAAA,gBAAA;AAAA,kBA6BF,MAAA;EAAA,KACH,KAAA,GAAQ,WAAA;EAAA,KACR,KAAA,GAAQ,UAAA,CAAW,KAAA;AAAA"}

package/dist/dev/ui/poster/poster.js

@@ -29,12 +29,13 @@ const Poster = forwardRef(function Poster(componentProps, forwardedRef) {
 		logMissingFeature("Poster", "playback");
 		return null;
 	}
+	core.setMedia(playback);
 	return renderElement("img", {
 		render,
 		className,
 		style
 	}, {
-		state: core.getState(playback),
+		state: core.getState(),
 		stateAttrMap: PosterDataAttrs,
 		ref: [forwardedRef],
 		props: [elementProps]

package/dist/dev/ui/poster/poster.js.map

@@ -1 +1 @@
-{"version":3,"file":"poster.js","names":[],"sources":["../../../../src/ui/poster/poster.tsx"],"sourcesContent":["'use client';\n\nimport { PosterCore, PosterDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectPlayback } 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 PosterProps extends UIComponentProps<'img', PosterCore.State> {}\n\n/**\n * Displays the video poster image. Shows before playback starts, hides after.\n *\n * @example\n * ```tsx\n * <Poster src=\"poster.jpg\" alt=\"Video description\" />\n *\n * <Poster\n *   src=\"poster.jpg\"\n *   alt=\"Video description\"\n *   className={(state) => state.visible ? 'visible' : 'hidden'}\n * />\n * ```\n */\nexport const Poster = forwardRef(function Poster(\n  componentProps: PosterProps,\n  forwardedRef: ForwardedRef<HTMLImageElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n\n  const playback = usePlayer(selectPlayback);\n\n  const [core] = useState(() => new PosterCore());\n\n  if (!playback) {\n    if (__DEV__) logMissingFeature('Poster', 'playback');\n    return null;\n  }\n\n  return renderElement(\n    'img',\n    { render, className, style },\n    {\n      state: core.getState(playback),\n      stateAttrMap: PosterDataAttrs,\n      ref: [forwardedRef],\n      props: [elementProps],\n    }\n  );\n});\n\nexport namespace Poster {\n  export type Props = PosterProps;\n  export type State = PosterCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,SAAS,WAAW,SAAS,OACxC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEtD,MAAM,WAAW,UAAU,eAAe;CAE1C,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,CAAC;AAE/C,KAAI,CAAC,UAAU;AACA,oBAAkB,UAAU,WAAW;AACpD,SAAO;;AAGT,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE,OAAO,KAAK,SAAS,SAAS;EAC9B,cAAc;EACd,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC,aAAa;EACtB,CACF;EACD"}
+{"version":3,"file":"poster.js","names":[],"sources":["../../../../src/ui/poster/poster.tsx"],"sourcesContent":["'use client';\n\nimport { PosterCore, PosterDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectPlayback } 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 PosterProps extends UIComponentProps<'img', PosterCore.State> {}\n\n/**\n * Displays the video poster image. Shows before playback starts, hides after.\n *\n * @example\n * ```tsx\n * <Poster src=\"poster.jpg\" alt=\"Video description\" />\n *\n * <Poster\n *   src=\"poster.jpg\"\n *   alt=\"Video description\"\n *   className={(state) => state.visible ? 'visible' : 'hidden'}\n * />\n * ```\n */\nexport const Poster = forwardRef(function Poster(\n  componentProps: PosterProps,\n  forwardedRef: ForwardedRef<HTMLImageElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n\n  const playback = usePlayer(selectPlayback);\n\n  const [core] = useState(() => new PosterCore());\n\n  if (!playback) {\n    if (__DEV__) logMissingFeature('Poster', 'playback');\n    return null;\n  }\n\n  core.setMedia(playback);\n\n  return renderElement(\n    'img',\n    { render, className, style },\n    {\n      state: core.getState(),\n      stateAttrMap: PosterDataAttrs,\n      ref: [forwardedRef],\n      props: [elementProps],\n    }\n  );\n});\n\nexport namespace Poster {\n  export type Props = PosterProps;\n  export type State = PosterCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,SAAS,WAAW,SAAS,OACxC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEtD,MAAM,WAAW,UAAU,eAAe;CAE1C,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,CAAC;AAE/C,KAAI,CAAC,UAAU;AACA,oBAAkB,UAAU,WAAW;AACpD,SAAO;;AAGT,MAAK,SAAS,SAAS;AAEvB,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE,OAAO,KAAK,UAAU;EACtB,cAAc;EACd,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC,aAAa;EACtB,CACF;EACD"}

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

@@ -21,7 +21,7 @@ interface SeekButtonProps extends UIComponentProps<'button', SeekButtonCore.Stat
  * />
  * ```
  */
-declare const SeekButton: react.ForwardRefExoticComponent<Omit<SeekButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+declare const SeekButton: react.ForwardRefExoticComponent<SeekButtonProps & react.RefAttributes<HTMLButtonElement>>;
 declare namespace SeekButton {
   type Props = SeekButtonProps;
   type State = SeekButtonCore.State;

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

@@ -1 +1 @@
-{"version":3,"file":"seek-button.d.ts","names":[],"sources":["../../../../src/ui/seek-button/seek-button.tsx"],"mappings":";;;;;UAYiB,eAAA,SAAwB,gBAAA,WAA2B,cAAA,CAAe,KAAA,GAAQ,cAAA,CAAe,KAAA;;AAA1G;;;;;;;;;;;;;;;AAmBA;cAAa,UAAA,EAAU,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,eAAA,WAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBAoCN,UAAA;EAAA,KACH,KAAA,GAAQ,eAAA;EAAA,KACR,KAAA,GAAQ,cAAA,CAAe,KAAA;AAAA"}
+{"version":3,"file":"seek-button.d.ts","names":[],"sources":["../../../../src/ui/seek-button/seek-button.tsx"],"mappings":";;;;;UAQiB,eAAA,SAAwB,gBAAA,WAA2B,cAAA,CAAe,KAAA,GAAQ,cAAA,CAAe,KAAA;;AAA1G;;;;;;;;;;;;;;;AAmBA;cAAa,UAAA,EAAU,KAAA,CAAA,yBAAA,CAAA,eAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBAQN,UAAA;EAAA,KACH,KAAA,GAAQ,eAAA;EAAA,KACR,KAAA,GAAQ,cAAA,CAAe,KAAA;AAAA"}

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

@@ -1,10 +1,7 @@
 'use client';
 
-import { usePlayer } from "../../player/context.js";
-import { renderElement } from "../../utils/use-render.js";
-import { useButton } from "../hooks/use-button.js";
-import { logMissingFeature, selectTime } from "@videojs/core/dom";
-import { forwardRef, useState } from "react";
+import { createMediaButton } from "../create-media-button.js";
+import { selectTime } from "@videojs/core/dom";
 import { SeekButtonCore, SeekButtonDataAttrs } from "@videojs/core";
 
 //#region src/ui/seek-button/seek-button.tsx
@@ -25,39 +22,12 @@ import { SeekButtonCore, SeekButtonDataAttrs } from "@videojs/core";
 * />
 * ```
 */
-const SeekButton = forwardRef(function SeekButton(componentProps, forwardedRef) {
-	const { render, className, style, seconds, label, disabled, ...elementProps } = componentProps;
-	const time = usePlayer(selectTime);
-	const [core] = useState(() => new SeekButtonCore());
-	core.setProps({
-		seconds,
-		label,
-		disabled
-	});
-	const { getButtonProps, buttonRef } = useButton({
-		displayName: "SeekButton",
-		onActivate: () => core.seek(time),
-		isDisabled: () => disabled || !time
-	});
-	if (!time) {
-		logMissingFeature("SeekButton", "time");
-		return null;
-	}
-	const state = core.getState(time);
-	return renderElement("button", {
-		render,
-		className,
-		style
-	}, {
-		state,
-		stateAttrMap: SeekButtonDataAttrs,
-		ref: [forwardedRef, buttonRef],
-		props: [
-			core.getAttrs(state),
-			elementProps,
-			getButtonProps()
-		]
-	});
+const SeekButton = createMediaButton({
+	displayName: "SeekButton",
+	core: SeekButtonCore,
+	stateAttrMap: SeekButtonDataAttrs,
+	selector: selectTime,
+	action: (core, state) => core.seek(state)
 });
 
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"seek-button.js","names":[],"sources":["../../../../src/ui/seek-button/seek-button.tsx"],"sourcesContent":["'use client';\n\nimport { SeekButtonCore, SeekButtonDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectTime } 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';\nimport { useButton } from '../hooks/use-button';\n\nexport interface SeekButtonProps extends UIComponentProps<'button', SeekButtonCore.State>, SeekButtonCore.Props {}\n\n/**\n * A button that seeks forward or backward by a configurable number of seconds.\n *\n * @example\n * ```tsx\n * <SeekButton seconds={-10} />\n *\n * <SeekButton\n *   seconds={30}\n *   render={(props, state) => (\n *     <button {...props}>\n *       {state.direction === 'backward' ? <RewindIcon /> : <FastForwardIcon />}\n *     </button>\n *   )}\n * />\n * ```\n */\nexport const SeekButton = forwardRef(function SeekButton(\n  componentProps: SeekButtonProps,\n  forwardedRef: ForwardedRef<HTMLButtonElement>\n) {\n  const { render, className, style, seconds, label, disabled, ...elementProps } = componentProps;\n\n  const time = usePlayer(selectTime);\n\n  const [core] = useState(() => new SeekButtonCore());\n  core.setProps({ seconds, label, disabled });\n\n  const { getButtonProps, buttonRef } = useButton({\n    displayName: 'SeekButton',\n    onActivate: () => core.seek(time!),\n    isDisabled: () => disabled || !time,\n  });\n\n  if (!time) {\n    if (__DEV__) logMissingFeature('SeekButton', 'time');\n    return null;\n  }\n\n  const state = core.getState(time);\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: SeekButtonDataAttrs,\n      ref: [forwardedRef, buttonRef],\n      props: [core.getAttrs(state), elementProps, getButtonProps()],\n    }\n  );\n});\n\nexport namespace SeekButton {\n  export type Props = SeekButtonProps;\n  export type State = SeekButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,aAAa,WAAW,SAAS,WAC5C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,SAAS,OAAO,UAAU,GAAG,iBAAiB;CAEhF,MAAM,OAAO,UAAU,WAAW;CAElC,MAAM,CAAC,QAAQ,eAAe,IAAI,gBAAgB,CAAC;AACnD,MAAK,SAAS;EAAE;EAAS;EAAO;EAAU,CAAC;CAE3C,MAAM,EAAE,gBAAgB,cAAc,UAAU;EAC9C,aAAa;EACb,kBAAkB,KAAK,KAAK,KAAM;EAClC,kBAAkB,YAAY,CAAC;EAChC,CAAC;AAEF,KAAI,CAAC,MAAM;AACI,oBAAkB,cAAc,OAAO;AACpD,SAAO;;CAGT,MAAM,QAAQ,KAAK,SAAS,KAAK;AAEjC,QAAO,cACL,UACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO;GAAC,KAAK,SAAS,MAAM;GAAE;GAAc,gBAAgB;GAAC;EAC9D,CACF;EACD"}
+{"version":3,"file":"seek-button.js","names":[],"sources":["../../../../src/ui/seek-button/seek-button.tsx"],"sourcesContent":["'use client';\n\nimport { SeekButtonCore, SeekButtonDataAttrs } from '@videojs/core';\nimport { selectTime } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface SeekButtonProps extends UIComponentProps<'button', SeekButtonCore.State>, SeekButtonCore.Props {}\n\n/**\n * A button that seeks forward or backward by a configurable number of seconds.\n *\n * @example\n * ```tsx\n * <SeekButton seconds={-10} />\n *\n * <SeekButton\n *   seconds={30}\n *   render={(props, state) => (\n *     <button {...props}>\n *       {state.direction === 'backward' ? <RewindIcon /> : <FastForwardIcon />}\n *     </button>\n *   )}\n * />\n * ```\n */\nexport const SeekButton = createMediaButton<SeekButtonCore, SeekButtonProps>({\n  displayName: 'SeekButton',\n  core: SeekButtonCore,\n  stateAttrMap: SeekButtonDataAttrs,\n  selector: selectTime,\n  action: (core, state) => core.seek(state),\n});\n\nexport namespace SeekButton {\n  export type Props = SeekButtonProps;\n  export type State = SeekButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,aAAa,kBAAmD;CAC3E,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,KAAK,MAAM;CAC1C,CAAC"}

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

@@ -0,0 +1,22 @@
+'use client';
+
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/ui/slider/context.tsx
+const SliderContext = createContext(null);
+function SliderProvider({ value, children }) {
+	return /* @__PURE__ */ jsx(SliderContext.Provider, {
+		value,
+		children
+	});
+}
+function useSliderContext() {
+	const ctx = useContext(SliderContext);
+	if (!ctx) throw new Error("Slider compound components must be used within a Slider.Root");
+	return ctx;
+}
+
+//#endregion
+export { SliderProvider, useSliderContext };
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/slider/context.tsx"],"sourcesContent":["'use client';\n\nimport type { SliderState, StateAttrMap } from '@videojs/core';\nimport type { SliderThumbProps } from '@videojs/core/dom';\nimport type { RefCallback } from 'react';\nimport { createContext, useContext } from 'react';\n\nexport interface SliderContextValue {\n  state: SliderState;\n  /** Pointer position converted to the value domain (not 0–100 percent). */\n  pointerValue: number;\n  thumbRef: RefCallback<HTMLElement>;\n  thumbProps: SliderThumbProps;\n  stateAttrMap: StateAttrMap<SliderState>;\n  getAttrs: (state: SliderState) => object;\n  formatValue?: ((value: number, type: 'current' | 'pointer') => string) | undefined;\n}\n\nconst SliderContext = createContext<SliderContextValue | null>(null);\n\nexport function SliderProvider({ value, children }: { value: SliderContextValue; children: React.ReactNode }) {\n  return <SliderContext.Provider value={value}>{children}</SliderContext.Provider>;\n}\n\nexport function useSliderContext(): SliderContextValue {\n  const ctx = useContext(SliderContext);\n  if (!ctx) throw new Error('Slider compound components must be used within a Slider.Root');\n  return ctx;\n}\n"],"mappings":";;;;;;AAkBA,MAAM,gBAAgB,cAAyC,KAAK;AAEpE,SAAgB,eAAe,EAAE,OAAO,YAAsE;AAC5G,QAAO,oBAAC,cAAc;EAAgB;EAAQ;GAAkC;;AAGlF,SAAgB,mBAAuC;CACrD,MAAM,MAAM,WAAW,cAAc;AACrC,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,+DAA+D;AACzF,QAAO"}

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

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

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

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

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

@@ -0,0 +1,14 @@
+import { SliderBuffer, SliderBufferProps } from "./slider-buffer.js";
+import { SliderFill, SliderFillProps } from "./slider-fill.js";
+import { SliderRoot, SliderRootProps } from "./slider-root.js";
+import { SliderThumb, SliderThumbProps } from "./slider-thumb.js";
+import { SliderTrack, SliderTrackProps } from "./slider-track.js";
+import { SliderValue, SliderValueProps } from "./slider-value.js";
+
+//#region src/ui/slider/index.parts.d.ts
+declare namespace index_parts_d_exports {
+  export { SliderBuffer as Buffer, SliderBufferProps as BufferProps, SliderFill as Fill, SliderFillProps as FillProps, SliderRoot as Root, SliderRootProps 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 };
+//# sourceMappingURL=index.parts.d.ts.map

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

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

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

@@ -0,0 +1,21 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { SliderBuffer } from "./slider-buffer.js";
+import { SliderFill } from "./slider-fill.js";
+import { SliderRoot } from "./slider-root.js";
+import { SliderThumb } from "./slider-thumb.js";
+import { SliderTrack } from "./slider-track.js";
+import { SliderValue } from "./slider-value.js";
+
+//#region src/ui/slider/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Buffer: () => SliderBuffer,
+	Fill: () => SliderFill,
+	Root: () => SliderRoot,
+	Thumb: () => SliderThumb,
+	Track: () => SliderTrack,
+	Value: () => SliderValue
+});
+
+//#endregion
+export { index_parts_exports };
+//# sourceMappingURL=index.parts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/slider/index.parts.ts"],"sourcesContent":["export { SliderBuffer as Buffer, type SliderBufferProps as BufferProps } from './slider-buffer';\nexport { SliderFill as Fill, type SliderFillProps as FillProps } from './slider-fill';\nexport { SliderRoot as Root, type SliderRootProps as RootProps } from './slider-root';\nexport { SliderThumb as Thumb, type SliderThumbProps as ThumbProps } from './slider-thumb';\nexport { SliderTrack as Track, type SliderTrackProps as TrackProps } from './slider-track';\nexport { SliderValue as Value, type SliderValueProps as ValueProps } from './slider-value';\n"],"mappings":""}

package/dist/dev/ui/slider/slider-buffer.d.ts

@@ -0,0 +1,14 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as react from "react";
+import { SliderState } from "@videojs/core";
+
+//#region src/ui/slider/slider-buffer.d.ts
+interface SliderBufferProps extends UIComponentProps<'div', SliderState> {}
+/** Displays the buffered range on the slider track. */
+declare const SliderBuffer: react.ForwardRefExoticComponent<SliderBufferProps>;
+declare namespace SliderBuffer {
+  type Props = SliderBufferProps;
+}
+//#endregion
+export { SliderBuffer, SliderBufferProps };
+//# sourceMappingURL=slider-buffer.d.ts.map

package/dist/dev/ui/slider/slider-buffer.d.ts.map

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

package/dist/dev/ui/slider/slider-buffer.js

@@ -0,0 +1,16 @@
+'use client';
+
+import { createContextPart } from "../create-context-part.js";
+import { useSliderContext } from "./context.js";
+
+//#region src/ui/slider/slider-buffer.tsx
+/** Displays the buffered range on the slider track. */
+const SliderBuffer = createContextPart({
+	displayName: "SliderBuffer",
+	tag: "div",
+	useContext: useSliderContext
+});
+
+//#endregion
+export { SliderBuffer };
+//# sourceMappingURL=slider-buffer.js.map

package/dist/dev/ui/slider/slider-buffer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-buffer.js","names":[],"sources":["../../../../src/ui/slider/slider-buffer.tsx"],"sourcesContent":["'use client';\n\nimport type { SliderState } from '@videojs/core';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createContextPart } from '../create-context-part';\nimport { useSliderContext } from './context';\n\nexport interface SliderBufferProps extends UIComponentProps<'div', SliderState> {}\n\n/** Displays the buffered range on the slider track. */\nexport const SliderBuffer = createContextPart<SliderBufferProps, SliderState>({\n  displayName: 'SliderBuffer',\n  tag: 'div',\n  useContext: useSliderContext,\n});\n\nexport namespace SliderBuffer {\n  export type Props = SliderBufferProps;\n}\n"],"mappings":";;;;;;;AAWA,MAAa,eAAe,kBAAkD;CAC5E,aAAa;CACb,KAAK;CACL,YAAY;CACb,CAAC"}

package/dist/dev/ui/slider/slider-fill.d.ts

@@ -0,0 +1,14 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as react from "react";
+import { SliderState } from "@videojs/core";
+
+//#region src/ui/slider/slider-fill.d.ts
+interface SliderFillProps extends UIComponentProps<'div', SliderState> {}
+/** Displays the filled portion from start to the current value. */
+declare const SliderFill: react.ForwardRefExoticComponent<SliderFillProps>;
+declare namespace SliderFill {
+  type Props = SliderFillProps;
+}
+//#endregion
+export { SliderFill, SliderFillProps };
+//# sourceMappingURL=slider-fill.d.ts.map

package/dist/dev/ui/slider/slider-fill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-fill.d.ts","names":[],"sources":["../../../../src/ui/slider/slider-fill.tsx"],"mappings":";;;;;UAQiB,eAAA,SAAwB,gBAAA,QAAwB,WAAA;;cAGpD,UAAA,EAAU,KAAA,CAAA,yBAAA,CAAA,eAAA;AAAA,kBAMN,UAAA;EAAA,KACH,KAAA,GAAQ,eAAA;AAAA"}

package/dist/dev/ui/slider/slider-fill.js

@@ -0,0 +1,16 @@
+'use client';
+
+import { createContextPart } from "../create-context-part.js";
+import { useSliderContext } from "./context.js";
+
+//#region src/ui/slider/slider-fill.tsx
+/** Displays the filled portion from start to the current value. */
+const SliderFill = createContextPart({
+	displayName: "SliderFill",
+	tag: "div",
+	useContext: useSliderContext
+});
+
+//#endregion
+export { SliderFill };
+//# sourceMappingURL=slider-fill.js.map

package/dist/dev/ui/slider/slider-fill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-fill.js","names":[],"sources":["../../../../src/ui/slider/slider-fill.tsx"],"sourcesContent":["'use client';\n\nimport type { SliderState } from '@videojs/core';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createContextPart } from '../create-context-part';\nimport { useSliderContext } from './context';\n\nexport interface SliderFillProps extends UIComponentProps<'div', SliderState> {}\n\n/** Displays the filled portion from start to the current value. */\nexport const SliderFill = createContextPart<SliderFillProps, SliderState>({\n  displayName: 'SliderFill',\n  tag: 'div',\n  useContext: useSliderContext,\n});\n\nexport namespace SliderFill {\n  export type Props = SliderFillProps;\n}\n"],"mappings":";;;;;;;AAWA,MAAa,aAAa,kBAAgD;CACxE,aAAa;CACb,KAAK;CACL,YAAY;CACb,CAAC"}

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

@@ -0,0 +1,19 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as react from "react";
+import { SliderCore } from "@videojs/core";
+
+//#region src/ui/slider/slider-root.d.ts
+interface SliderRootProps extends UIComponentProps<'div', SliderCore.State>, SliderCore.Props {
+  onValueChange?: ((value: number) => void) | undefined;
+  onValueCommit?: ((value: number) => void) | undefined;
+  onDragStart?: (() => void) | undefined;
+  onDragEnd?: (() => void) | undefined;
+}
+declare const SliderRoot: react.ForwardRefExoticComponent<Omit<SliderRootProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare namespace SliderRoot {
+  type Props = SliderRootProps;
+  type State = SliderCore.State;
+}
+//#endregion
+export { SliderRoot, SliderRootProps };
+//# sourceMappingURL=slider-root.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider-root.d.ts","names":[],"sources":["../../../../src/ui/slider/slider-root.tsx"],"mappings":";;;;;UAYiB,eAAA,SAAwB,gBAAA,QAAwB,UAAA,CAAW,KAAA,GAAQ,UAAA,CAAW,KAAA;EAC7F,aAAA,KAAkB,KAAA;EAClB,aAAA,KAAkB,KAAA;EAClB,WAAA;EACA,SAAA;AAAA;AAAA,cAGW,UAAA,EAAU,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,eAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBA+EN,UAAA;EAAA,KACH,KAAA,GAAQ,eAAA;EAAA,KACR,KAAA,GAAQ,UAAA,CAAW,KAAA;AAAA"}