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

package/dist/default/skins/dist/default/video/minimal.tailwind.js

@@ -0,0 +1,86 @@
+import { cn } from "@videojs/utils/style";
+
+//#region ../skins/dist/default/video/minimal.tailwind.js
+const icon = cn("block [grid-area:1/1] size-4.5", "drop-shadow-[0_1px_0_var(--tw-drop-shadow-color)] drop-shadow-black/25", "transition-discrete transition-[display,opacity] duration-150 ease-out");
+const iconFlipped = "[scale:-1_1]";
+const iconContainer = "relative";
+const button = {
+	base: cn("items-center justify-center shrink-0 border-none cursor-pointer select-none text-center", "outline-2 outline-transparent -outline-offset-2", "font-medium", "transition-[background-color,color,outline-offset] duration-150 ease-out", "focus-visible:outline-white focus-visible:outline-offset-2", "disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale"),
+	icon: cn("grid w-[2.375rem] aspect-square bg-transparent rounded-md", "text-white", "hover:text-white/80 hover:no-underline", "focus-visible:text-white/80", "aria-expanded:text-white/80"),
+	default: cn("flex py-2 px-4 bg-white rounded-lg", "text-black")
+};
+const slider = {
+	root: cn("group/slider relative flex flex-1 items-center justify-center rounded-full outline-none", "data-[orientation=horizontal]:min-w-20 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-5", "data-[orientation=vertical]:w-5 data-[orientation=vertical]:h-[4.5rem]"),
+	track: cn("relative isolate overflow-hidden bg-white/20 rounded-[inherit]", "shadow-[0_0_0_1px_oklch(0_0_0/0.05)] select-none", "data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-0.75", "data-[orientation=vertical]:w-0.75 data-[orientation=vertical]:h-full"),
+	fill: {
+		base: "absolute rounded-[inherit] pointer-events-none",
+		fill: cn("bg-white", "data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0", "data-[orientation=horizontal]:w-(--media-slider-fill,0)", "data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0", "data-[orientation=vertical]:h-(--media-slider-fill,0)"),
+		buffer: cn("bg-white/20 duration-250 ease-out", "data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0", "data-[orientation=horizontal]:transition-[width] data-[orientation=horizontal]:w-(--media-slider-buffer,0)", "data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0", "data-[orientation=vertical]:transition-[height] data-[orientation=vertical]:h-(--media-slider-buffer)")
+	},
+	thumb: {
+		base: cn("z-10 absolute size-3 -translate-x-1/2 -translate-y-1/2", "bg-white rounded-full", "ring ring-black/10 shadow-sm shadow-black/15", "transition-[opacity,scale,outline-offset] duration-150 ease-out select-none", "outline-2 outline-transparent -outline-offset-2", "focus-visible:outline-white focus-visible:outline-offset-2", "data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:left-(--media-slider-fill,0)", "data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:top-[calc(100%-var(--media-slider-fill,0))]"),
+		interactive: cn("opacity-0 scale-70 origin-center", "group-hover/slider:opacity-100 group-hover/slider:scale-100", "group-focus-within/slider:opacity-100 group-focus-within/slider:scale-100")
+	}
+};
+const root = cn("block relative isolate overflow-clip @container/media-root", "rounded-(--media-border-radius,0.75rem) bg-black", "font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased", "**:box-border **:m-0", "[&_button]:font-[inherit]", "motion-safe:[interpolate-size:allow-keywords]", "after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10", "after:inset-0 after:ring-1 after:ring-inset after:ring-black/15", "dark:after:ring-white/15", "[&>video]:block [&>video]:w-full [&>video]:h-full [&>video]:rounded-[inherit]", "[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full [&>img]:rounded-[inherit]", "[&>img]:object-cover [&>img]:pointer-events-none", "[&>img]:transition-opacity [&>img]:duration-250", "[&>img:not([data-visible])]:opacity-0", "[--media-caption-track-delay:600ms]", "[--media-caption-track-y:-0.5rem]", "has-[[data-controls][data-visible]]:[--media-caption-track-delay:25ms]", "has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]", "[&_video::-webkit-media-text-track-container]:transition-transform", "[&_video::-webkit-media-text-track-container]:duration-150", "[&_video::-webkit-media-text-track-container]:ease-out", "[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)", "[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)", "[&_video::-webkit-media-text-track-container]:scale-98", "[&_video::-webkit-media-text-track-container]:z-1", "[&_video::-webkit-media-text-track-container]:font-[inherit]", "motion-reduce:[&_video::-webkit-media-text-track-container]:duration-50", "[&:fullscreen]:rounded-none");
+const controls = cn("peer/controls", "absolute @container/media-controls bottom-0 inset-x-0", "pt-8 px-1.5 pb-1.5 flex items-center gap-2", "text-white z-10", "will-change-[translate,filter,opacity]", "transition-[translate,filter,opacity] ease-out", "delay-0 duration-75", "not-data-visible:opacity-0 not-data-visible:translate-y-full", "not-data-visible:blur-sm not-data-visible:pointer-events-none", "not-data-visible:delay-500 not-data-visible:duration-500", "motion-reduce:not-data-visible:duration-100", "motion-reduce:not-data-visible:translate-y-0", "motion-reduce:not-data-visible:blur-none motion-reduce:not-data-visible:scale-100", "@sm/media-root:pt-10 @sm/media-root:px-3 @sm/media-root:pb-3", "@sm/media-root:gap-3.5");
+const overlay = cn("absolute inset-0 flex flex-col items-start", "pointer-events-none rounded-[inherit]", "opacity-0", "bg-linear-to-t from-black/70 via-black/50 via-[7.5rem] to-transparent", "backdrop-blur-none backdrop-saturate-120 backdrop-brightness-90", "transition-[opacity,backdrop-filter] ease-out", "duration-500 delay-500", "peer-data-visible/controls:opacity-100", "peer-data-visible/controls:duration-150", "peer-data-visible/controls:delay-0", "peer-data-visible/error:opacity-100", "peer-data-visible/error:duration-150", "peer-data-visible/error:delay-0", "peer-data-visible/error:backdrop-blur-sm", "motion-reduce:duration-100");
+const bufferingIndicator = "absolute inset-0 hidden items-center justify-center pointer-events-none z-10 text-white data-visible:flex";
+const error = {
+	root: "peer/error group/error absolute inset-0 z-20 items-center justify-center pointer-events-none hidden data-visible:flex",
+	dialog: cn("hidden flex-col gap-3 max-w-64 p-4 text-white text-sm pointer-events-auto", "group-data-visible/error:flex", "text-shadow-2xs text-shadow-black/50", "transition-[display,opacity,scale,transform] duration-500 delay-100 transition-discrete", "starting:opacity-0 starting:scale-50", "ease-[linear(0,0.034_1.5%,0.763_9.7%,1.066_13.9%,1.198_19.9%,1.184_21.8%,0.963_37.5%,0.997_50.9%,1)]"),
+	content: "flex flex-col gap-2 py-1.5",
+	title: "font-semibold leading-tight",
+	actions: "flex gap-2 *:flex-1"
+};
+const buttonGroup = cn("flex items-center gap-[0.075rem]", "@2xl/media-root:gap-0.5");
+const time = {
+	group: "flex items-center gap-1",
+	current: cn("hidden tabular-nums text-shadow-2xs text-shadow-black/25", "@md/media-controls:inline"),
+	separator: cn("hidden", "@md/media-controls:inline @md/media-controls:text-white/50"),
+	duration: cn("tabular-nums text-shadow-2xs text-shadow-black/25", "@md/media-controls:text-white/50"),
+	controls: cn("flex flex-row-reverse items-center flex-1 gap-3", "@md/media-controls:flex-row")
+};
+const popup = {
+	base: cn("m-0 border-0 bg-transparent [--media-popover-side-offset:0.5rem]", "opacity-100 scale-100 origin-bottom blur-none", "transition-[transform,scale,opacity,filter] duration-200", "data-starting-style:opacity-0 data-starting-style:scale-0 data-starting-style:blur-sm", "data-ending-style:opacity-0 data-ending-style:scale-0 data-ending-style:blur-sm", "data-instant:duration-0"),
+	volume: "p-1"
+};
+const seek = {
+	button: "@max-md/media-controls:hidden",
+	label: "text-[0.75em] font-[480] tabular-nums",
+	labelForward: "absolute -right-px -bottom-0.75",
+	labelBackward: "absolute -left-px -bottom-0.75"
+};
+const iconState = {
+	play: {
+		button: "group",
+		restart: "hidden opacity-0 group-data-ended:block group-data-ended:opacity-100",
+		play: "hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100",
+		pause: "hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100"
+	},
+	mute: {
+		button: "group",
+		volumeOff: "hidden opacity-0 group-data-muted:block group-data-muted:opacity-100",
+		volumeLow: "hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100",
+		volumeHigh: "hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100"
+	},
+	fullscreen: {
+		button: "group",
+		enter: "hidden opacity-0 group-not-data-fullscreen:block group-not-data-fullscreen:opacity-100",
+		exit: "hidden opacity-0 group-data-fullscreen:block group-data-fullscreen:opacity-100"
+	},
+	captions: {
+		button: "group",
+		off: "hidden opacity-0 group-not-data-active:block group-not-data-active:opacity-100",
+		on: "hidden opacity-0 group-data-active:block group-data-active:opacity-100"
+	}
+};
+const captions = {
+	root: cn("absolute z-20 pointer-events-none text-balance text-base", "inset-x-4 bottom-6", "transition-transform duration-150 ease-out delay-600", "motion-reduce:duration-50", "@xs/media-root:text-2xl", "@3xl/media-root:text-3xl", "@7xl/media-root:text-4xl", "peer-data-visible/controls:-translate-y-10 peer-data-visible/controls:delay-25"),
+	container: "max-w-[42ch] mx-auto text-center flex flex-col items-center",
+	cue: cn("block py-0.5 px-2 text-white text-center whitespace-pre-wrap leading-1.2", "[text-shadow:0_0_1px_oklab(0_0_0_/_0.7),0_0_8px_oklab(0_0_0_/_0.7)]", "contrast-more:[text-shadow:none] contrast-more:[box-decoration-break:clone] contrast-more:bg-black/70", "*:inline")
+};
+
+//#endregion
+export { bufferingIndicator, button, buttonGroup, controls, error, icon, iconContainer, iconFlipped, iconState, overlay, popup, root, seek, slider, time };
+//# sourceMappingURL=minimal.tailwind.js.map

package/dist/default/skins/dist/default/video/minimal.tailwind.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"minimal.tailwind.js","names":[],"sources":["../../../../../../../skins/dist/default/video/minimal.tailwind.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/video/minimal.tailwind.ts\nconst icon = cn(\"block [grid-area:1/1] size-4.5\", \"drop-shadow-[0_1px_0_var(--tw-drop-shadow-color)] drop-shadow-black/25\", \"transition-discrete transition-[display,opacity] duration-150 ease-out\");\nconst iconHidden = \"hidden opacity-0\";\nconst iconFlipped = \"[scale:-1_1]\";\nconst iconContainer = \"relative\";\nconst button = {\n\tbase: cn(\"items-center justify-center shrink-0 border-none cursor-pointer select-none text-center\", \"outline-2 outline-transparent -outline-offset-2\", \"font-medium\", \"transition-[background-color,color,outline-offset] duration-150 ease-out\", \"focus-visible:outline-white focus-visible:outline-offset-2\", \"disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale\"),\n\ticon: cn(\"grid w-[2.375rem] aspect-square bg-transparent rounded-md\", \"text-white\", \"hover:text-white/80 hover:no-underline\", \"focus-visible:text-white/80\", \"aria-expanded:text-white/80\"),\n\tdefault: cn(\"flex py-2 px-4 bg-white rounded-lg\", \"text-black\")\n};\nconst slider = {\n\troot: cn(\"group/slider relative flex flex-1 items-center justify-center rounded-full outline-none\", \"data-[orientation=horizontal]:min-w-20 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-5\", \"data-[orientation=vertical]:w-5 data-[orientation=vertical]:h-[4.5rem]\"),\n\ttrack: cn(\"relative isolate overflow-hidden bg-white/20 rounded-[inherit]\", \"shadow-[0_0_0_1px_oklch(0_0_0/0.05)] select-none\", \"data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-0.75\", \"data-[orientation=vertical]:w-0.75 data-[orientation=vertical]:h-full\"),\n\tfill: {\n\t\tbase: \"absolute rounded-[inherit] pointer-events-none\",\n\t\tfill: cn(\"bg-white\", \"data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0\", \"data-[orientation=horizontal]:w-(--media-slider-fill,0)\", \"data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0\", \"data-[orientation=vertical]:h-(--media-slider-fill,0)\"),\n\t\tbuffer: cn(\"bg-white/20 duration-250 ease-out\", \"data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0\", \"data-[orientation=horizontal]:transition-[width] data-[orientation=horizontal]:w-(--media-slider-buffer,0)\", \"data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0\", \"data-[orientation=vertical]:transition-[height] data-[orientation=vertical]:h-(--media-slider-buffer)\")\n\t},\n\tthumb: {\n\t\tbase: cn(\"z-10 absolute size-3 -translate-x-1/2 -translate-y-1/2\", \"bg-white rounded-full\", \"ring ring-black/10 shadow-sm shadow-black/15\", \"transition-[opacity,scale,outline-offset] duration-150 ease-out select-none\", \"outline-2 outline-transparent -outline-offset-2\", \"focus-visible:outline-white focus-visible:outline-offset-2\", \"data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:left-(--media-slider-fill,0)\", \"data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:top-[calc(100%-var(--media-slider-fill,0))]\"),\n\t\tinteractive: cn(\"opacity-0 scale-70 origin-center\", \"group-hover/slider:opacity-100 group-hover/slider:scale-100\", \"group-focus-within/slider:opacity-100 group-focus-within/slider:scale-100\")\n\t}\n};\nconst root = cn(\"block relative isolate overflow-clip @container/media-root\", \"rounded-(--media-border-radius,0.75rem) bg-black\", \"font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased\", \"**:box-border **:m-0\", \"[&_button]:font-[inherit]\", \"motion-safe:[interpolate-size:allow-keywords]\", \"after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10\", \"after:inset-0 after:ring-1 after:ring-inset after:ring-black/15\", \"dark:after:ring-white/15\", \"[&>video]:block [&>video]:w-full [&>video]:h-full [&>video]:rounded-[inherit]\", \"[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full [&>img]:rounded-[inherit]\", \"[&>img]:object-cover [&>img]:pointer-events-none\", \"[&>img]:transition-opacity [&>img]:duration-250\", \"[&>img:not([data-visible])]:opacity-0\", \"[--media-caption-track-delay:600ms]\", \"[--media-caption-track-y:-0.5rem]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-delay:25ms]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]\", \"[&_video::-webkit-media-text-track-container]:transition-transform\", \"[&_video::-webkit-media-text-track-container]:duration-150\", \"[&_video::-webkit-media-text-track-container]:ease-out\", \"[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)\", \"[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)\", \"[&_video::-webkit-media-text-track-container]:scale-98\", \"[&_video::-webkit-media-text-track-container]:z-1\", \"[&_video::-webkit-media-text-track-container]:font-[inherit]\", \"motion-reduce:[&_video::-webkit-media-text-track-container]:duration-50\", \"[&:fullscreen]:rounded-none\");\nconst controls = cn(\"peer/controls\", \"absolute @container/media-controls bottom-0 inset-x-0\", \"pt-8 px-1.5 pb-1.5 flex items-center gap-2\", \"text-white z-10\", \"will-change-[translate,filter,opacity]\", \"transition-[translate,filter,opacity] ease-out\", \"delay-0 duration-75\", \"not-data-visible:opacity-0 not-data-visible:translate-y-full\", \"not-data-visible:blur-sm not-data-visible:pointer-events-none\", \"not-data-visible:delay-500 not-data-visible:duration-500\", \"motion-reduce:not-data-visible:duration-100\", \"motion-reduce:not-data-visible:translate-y-0\", \"motion-reduce:not-data-visible:blur-none motion-reduce:not-data-visible:scale-100\", \"@sm/media-root:pt-10 @sm/media-root:px-3 @sm/media-root:pb-3\", \"@sm/media-root:gap-3.5\");\nconst overlay = cn(\"absolute inset-0 flex flex-col items-start\", \"pointer-events-none rounded-[inherit]\", \"opacity-0\", \"bg-linear-to-t from-black/70 via-black/50 via-[7.5rem] to-transparent\", \"backdrop-blur-none backdrop-saturate-120 backdrop-brightness-90\", \"transition-[opacity,backdrop-filter] ease-out\", \"duration-500 delay-500\", \"peer-data-visible/controls:opacity-100\", \"peer-data-visible/controls:duration-150\", \"peer-data-visible/controls:delay-0\", \"peer-data-visible/error:opacity-100\", \"peer-data-visible/error:duration-150\", \"peer-data-visible/error:delay-0\", \"peer-data-visible/error:backdrop-blur-sm\", \"motion-reduce:duration-100\");\nconst bufferingIndicator = \"absolute inset-0 hidden items-center justify-center pointer-events-none z-10 text-white data-visible:flex\";\nconst error = {\n\troot: \"peer/error group/error absolute inset-0 z-20 items-center justify-center pointer-events-none hidden data-visible:flex\",\n\tdialog: cn(\"hidden flex-col gap-3 max-w-64 p-4 text-white text-sm pointer-events-auto\", \"group-data-visible/error:flex\", \"text-shadow-2xs text-shadow-black/50\", \"transition-[display,opacity,scale,transform] duration-500 delay-100 transition-discrete\", \"starting:opacity-0 starting:scale-50\", \"ease-[linear(0,0.034_1.5%,0.763_9.7%,1.066_13.9%,1.198_19.9%,1.184_21.8%,0.963_37.5%,0.997_50.9%,1)]\"),\n\tcontent: \"flex flex-col gap-2 py-1.5\",\n\ttitle: \"font-semibold leading-tight\",\n\tactions: \"flex gap-2 *:flex-1\"\n};\nconst buttonGroup = cn(\"flex items-center gap-[0.075rem]\", \"@2xl/media-root:gap-0.5\");\nconst time = {\n\tgroup: \"flex items-center gap-1\",\n\tcurrent: cn(\"hidden tabular-nums text-shadow-2xs text-shadow-black/25\", \"@md/media-controls:inline\"),\n\tseparator: cn(\"hidden\", \"@md/media-controls:inline @md/media-controls:text-white/50\"),\n\tduration: cn(\"tabular-nums text-shadow-2xs text-shadow-black/25\", \"@md/media-controls:text-white/50\"),\n\tcontrols: cn(\"flex flex-row-reverse items-center flex-1 gap-3\", \"@md/media-controls:flex-row\")\n};\nconst popup = {\n\tbase: cn(\"m-0 border-0 bg-transparent [--media-popover-side-offset:0.5rem]\", \"opacity-100 scale-100 origin-bottom blur-none\", \"transition-[transform,scale,opacity,filter] duration-200\", \"data-starting-style:opacity-0 data-starting-style:scale-0 data-starting-style:blur-sm\", \"data-ending-style:opacity-0 data-ending-style:scale-0 data-ending-style:blur-sm\", \"data-instant:duration-0\"),\n\tvolume: \"p-1\"\n};\nconst seek = {\n\tbutton: \"@max-md/media-controls:hidden\",\n\tlabel: \"text-[0.75em] font-[480] tabular-nums\",\n\tlabelForward: \"absolute -right-px -bottom-0.75\",\n\tlabelBackward: \"absolute -left-px -bottom-0.75\"\n};\nconst iconState = {\n\tplay: {\n\t\tbutton: \"group\",\n\t\trestart: \"hidden opacity-0 group-data-ended:block group-data-ended:opacity-100\",\n\t\tplay: \"hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100\",\n\t\tpause: \"hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100\"\n\t},\n\tmute: {\n\t\tbutton: \"group\",\n\t\tvolumeOff: \"hidden opacity-0 group-data-muted:block group-data-muted:opacity-100\",\n\t\tvolumeLow: \"hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100\",\n\t\tvolumeHigh: \"hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100\"\n\t},\n\tfullscreen: {\n\t\tbutton: \"group\",\n\t\tenter: \"hidden opacity-0 group-not-data-fullscreen:block group-not-data-fullscreen:opacity-100\",\n\t\texit: \"hidden opacity-0 group-data-fullscreen:block group-data-fullscreen:opacity-100\"\n\t},\n\tcaptions: {\n\t\tbutton: \"group\",\n\t\toff: \"hidden opacity-0 group-not-data-active:block group-not-data-active:opacity-100\",\n\t\ton: \"hidden opacity-0 group-data-active:block group-data-active:opacity-100\"\n\t}\n};\nconst captions = {\n\troot: cn(\"absolute z-20 pointer-events-none text-balance text-base\", \"inset-x-4 bottom-6\", \"transition-transform duration-150 ease-out delay-600\", \"motion-reduce:duration-50\", \"@xs/media-root:text-2xl\", \"@3xl/media-root:text-3xl\", \"@7xl/media-root:text-4xl\", \"peer-data-visible/controls:-translate-y-10 peer-data-visible/controls:delay-25\"),\n\tcontainer: \"max-w-[42ch] mx-auto text-center flex flex-col items-center\",\n\tcue: cn(\"block py-0.5 px-2 text-white text-center whitespace-pre-wrap leading-1.2\", \"[text-shadow:0_0_1px_oklab(0_0_0_/_0.7),0_0_8px_oklab(0_0_0_/_0.7)]\", \"contrast-more:[text-shadow:none] contrast-more:[box-decoration-break:clone] contrast-more:bg-black/70\", \"*:inline\")\n};\n\n//#endregion\nexport { bufferingIndicator, button, buttonGroup, captions, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, overlay, popup, root, seek, slider, time };\n//# sourceMappingURL=minimal.tailwind.js.map"],"mappings":";;;AAGA,MAAM,OAAO,GAAG,kCAAkC,0EAA0E,yEAAyE;AAErM,MAAM,cAAc;AACpB,MAAM,gBAAgB;AACtB,MAAM,SAAS;CACd,MAAM,GAAG,2FAA2F,mDAAmD,eAAe,4EAA4E,8DAA8D,qEAAqE;CACrX,MAAM,GAAG,6DAA6D,cAAc,0CAA0C,+BAA+B,8BAA8B;CAC3L,SAAS,GAAG,sCAAsC,aAAa;CAC/D;AACD,MAAM,SAAS;CACd,MAAM,GAAG,2FAA2F,iHAAiH,yEAAyE;CAC9R,OAAO,GAAG,kEAAkE,oDAAoD,6EAA6E,wEAAwE;CACrR,MAAM;EACL,MAAM;EACN,MAAM,GAAG,YAAY,gFAAgF,2DAA2D,8EAA8E,wDAAwD;EACtS,QAAQ,GAAG,qCAAqC,gFAAgF,8GAA8G,8EAA8E,wGAAwG;EACpa;CACD,OAAO;EACN,MAAM,GAAG,0DAA0D,yBAAyB,gDAAgD,+EAA+E,mDAAmD,8DAA8D,oGAAoG,+GAA+G;EAC/hB,aAAa,GAAG,oCAAoC,+DAA+D,4EAA4E;EAC/L;CACD;AACD,MAAM,OAAO,GAAG,8DAA8D,oDAAoD,uHAAuH,wBAAwB,6BAA6B,iDAAiD,+EAA+E,mEAAmE,4BAA4B,iFAAiF,4FAA4F,oDAAoD,mDAAmD,yCAAyC,uCAAuC,qCAAqC,0EAA0E,yEAAyE,sEAAsE,8DAA8D,0DAA0D,qFAAqF,uFAAuF,0DAA0D,qDAAqD,gEAAgE,2EAA2E,8BAA8B;AAC3qD,MAAM,WAAW,GAAG,iBAAiB,yDAAyD,8CAA8C,mBAAmB,0CAA0C,kDAAkD,uBAAuB,gEAAgE,iEAAiE,4DAA4D,+CAA+C,gDAAgD,qFAAqF,gEAAgE,yBAAyB;AAC5tB,MAAM,UAAU,GAAG,8CAA8C,yCAAyC,aAAa,yEAAyE,mEAAmE,iDAAiD,0BAA0B,0CAA0C,2CAA2C,sCAAsC,uCAAuC,wCAAwC,mCAAmC,4CAA4C,6BAA6B;AACpoB,MAAM,qBAAqB;AAC3B,MAAM,QAAQ;CACb,MAAM;CACN,QAAQ,GAAG,6EAA6E,iCAAiC,wCAAwC,2FAA2F,wCAAwC,uGAAuG;CAC3Y,SAAS;CACT,OAAO;CACP,SAAS;CACT;AACD,MAAM,cAAc,GAAG,oCAAoC,0BAA0B;AACrF,MAAM,OAAO;CACZ,OAAO;CACP,SAAS,GAAG,4DAA4D,4BAA4B;CACpG,WAAW,GAAG,UAAU,6DAA6D;CACrF,UAAU,GAAG,qDAAqD,mCAAmC;CACrG,UAAU,GAAG,mDAAmD,8BAA8B;CAC9F;AACD,MAAM,QAAQ;CACb,MAAM,GAAG,oEAAoE,iDAAiD,4DAA4D,yFAAyF,mFAAmF,0BAA0B;CAChY,QAAQ;CACR;AACD,MAAM,OAAO;CACZ,QAAQ;CACR,OAAO;CACP,cAAc;CACd,eAAe;CACf;AACD,MAAM,YAAY;CACjB,MAAM;EACL,QAAQ;EACR,SAAS;EACT,MAAM;EACN,OAAO;EACP;CACD,MAAM;EACL,QAAQ;EACR,WAAW;EACX,WAAW;EACX,YAAY;EACZ;CACD,YAAY;EACX,QAAQ;EACR,OAAO;EACP,MAAM;EACN;CACD,UAAU;EACT,QAAQ;EACR,KAAK;EACL,IAAI;EACJ;CACD;AACD,MAAM,WAAW;CAChB,MAAM,GAAG,4DAA4D,sBAAsB,wDAAwD,6BAA6B,2BAA2B,4BAA4B,4BAA4B,iFAAiF;CACpV,WAAW;CACX,KAAK,GAAG,4EAA4E,uEAAuE,yGAAyG,WAAW;CAC/Q"}

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

@@ -1,11 +1,9 @@
 'use client';
 
-import { renderElement } from "../../utils/use-render.js";
 import { useButton } from "../hooks/use-button.js";
 import { forwardRef, useState } from "react";
 
 //#region src/ui/captions-button/captions-button.tsx
-const CaptionButtonDataAttrs = { active: "data-active" };
 /**
 * A button that toggles captions.
 *
@@ -30,20 +28,7 @@ const CaptionsButton = forwardRef(function CaptionsButton(componentProps, forwar
 		onActivate: () => setIsActive((active) => !active),
 		isDisabled: () => disabled ?? false
 	});
-	return renderElement("button", {
-		render,
-		className,
-		style
-	}, {
-		state: { active: isActive },
-		stateAttrMap: CaptionButtonDataAttrs,
-		ref: [forwardedRef, buttonRef],
-		props: [
-			elementProps,
-			getButtonProps(),
-			{ "aria-pressed": isActive }
-		]
-	});
+	return null;
 });
 
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"captions-button.js","names":[],"sources":["../../../../src/ui/captions-button/captions-button.tsx"],"sourcesContent":["'use client';\n\nimport type { StateAttrMap } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useButton } from '../hooks/use-button';\n\n// FIXME: Replace with state/props from core.\nexport type CaptionsButtonState = {\n  active: boolean;\n};\ntype CaptionButtonCoreProps = {\n  /** Custom label for the button. */\n  label?: string | ((state: CaptionsButtonState) => string) | undefined;\n  /** Whether the button is disabled. */\n  disabled?: boolean | undefined;\n};\nconst CaptionButtonDataAttrs = {\n  /** Present when the captions are active. */\n  active: 'data-active',\n} as const satisfies StateAttrMap<CaptionsButtonState>;\n\nexport interface CaptionsButtonProps extends UIComponentProps<'button', CaptionsButtonState>, CaptionButtonCoreProps {}\n\n/**\n * A button that toggles captions.\n *\n * @example\n * ```tsx\n * <CaptionsButton />\n *\n * <CaptionsButton\n *   render={(props, state) => (\n *     <button {...props}>\n *       {state.active ? <CaptionsOnIcon /> : <CaptionsOffIcon />}\n *     </button>\n *   )}\n * />\n * ```\n */\nexport const CaptionsButton = forwardRef(function CaptionsButton(\n  componentProps: CaptionsButtonProps,\n  forwardedRef: ForwardedRef<HTMLButtonElement>\n) {\n  const { render, className, style, label, disabled, ...elementProps } = componentProps;\n\n  // FIXME: Replace with actual captions state\n  const [isActive, setIsActive] = useState(false);\n\n  const { getButtonProps, buttonRef } = useButton({\n    displayName: 'CaptionsButton',\n    onActivate: () => setIsActive((active) => !active), // FIXME: Replace with actual toggle logic\n    isDisabled: () => disabled ?? false,\n  });\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state: { active: isActive }, // FIXME: Replace with actual toggle logic\n      stateAttrMap: CaptionButtonDataAttrs,\n      ref: [forwardedRef, buttonRef],\n      props: [elementProps, getButtonProps(), { 'aria-pressed': isActive }],\n    }\n  );\n});\n\nexport namespace CaptionsButton {\n  export type Props = CaptionsButtonProps;\n  export type State = CaptionsButtonState;\n}\n"],"mappings":";;;;;;;AAoBA,MAAM,yBAAyB,EAE7B,QAAQ,eACT;;;;;;;;;;;;;;;;;AAoBD,MAAa,iBAAiB,WAAW,SAAS,eAChD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,UAAU,GAAG,iBAAiB;CAGvE,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAE/C,MAAM,EAAE,gBAAgB,cAAc,UAAU;EAC9C,aAAa;EACb,kBAAkB,aAAa,WAAW,CAAC,OAAO;EAClD,kBAAkB,YAAY;EAC/B,CAAC;AAEF,QAAO,cACL,UACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE,OAAO,EAAE,QAAQ,UAAU;EAC3B,cAAc;EACd,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO;GAAC;GAAc,gBAAgB;GAAE,EAAE,gBAAgB,UAAU;GAAC;EACtE,CACF;EACD"}
+{"version":3,"file":"captions-button.js","names":[],"sources":["../../../../src/ui/captions-button/captions-button.tsx"],"sourcesContent":["'use client';\n\nimport type { StateAttrMap } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useButton } from '../hooks/use-button';\n\n// FIXME: Replace with state/props from core.\nexport type CaptionsButtonState = {\n  active: boolean;\n};\ntype CaptionButtonCoreProps = {\n  /** Custom label for the button. */\n  label?: string | ((state: CaptionsButtonState) => string) | undefined;\n  /** Whether the button is disabled. */\n  disabled?: boolean | undefined;\n};\nconst CaptionButtonDataAttrs = {\n  /** Present when the captions are active. */\n  active: 'data-active',\n} as const satisfies StateAttrMap<CaptionsButtonState>;\n\nexport interface CaptionsButtonProps extends UIComponentProps<'button', CaptionsButtonState>, CaptionButtonCoreProps {}\n\nconst DEBUG = false;\n\n/**\n * A button that toggles captions.\n *\n * @example\n * ```tsx\n * <CaptionsButton />\n *\n * <CaptionsButton\n *   render={(props, state) => (\n *     <button {...props}>\n *       {state.active ? <CaptionsOnIcon /> : <CaptionsOffIcon />}\n *     </button>\n *   )}\n * />\n * ```\n */\nexport const CaptionsButton = forwardRef(function CaptionsButton(\n  componentProps: CaptionsButtonProps,\n  forwardedRef: ForwardedRef<HTMLButtonElement>\n) {\n  const { render, className, style, label, disabled, ...elementProps } = componentProps;\n\n  // FIXME: Replace with actual captions state\n  const [isActive, setIsActive] = useState(false);\n\n  const { getButtonProps, buttonRef } = useButton({\n    displayName: 'CaptionsButton',\n    onActivate: () => setIsActive((active) => !active), // FIXME: Replace with actual toggle logic\n    isDisabled: () => disabled ?? false,\n  });\n\n  if (!DEBUG) return null;\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state: { active: isActive }, // FIXME: Replace with actual toggle logic\n      stateAttrMap: CaptionButtonDataAttrs,\n      ref: [forwardedRef, buttonRef],\n      props: [elementProps, getButtonProps(), { 'aria-pressed': isActive }],\n    }\n  );\n});\n\nexport namespace CaptionsButton {\n  export type Props = CaptionsButtonProps;\n  export type State = CaptionsButtonState;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAa,iBAAiB,WAAW,SAAS,eAChD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,UAAU,GAAG,iBAAiB;CAGvE,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAE/C,MAAM,EAAE,gBAAgB,cAAc,UAAU;EAC9C,aAAa;EACb,kBAAkB,aAAa,WAAW,CAAC,OAAO;EAClD,kBAAkB,YAAY;EAC/B,CAAC;AAEU,QAAO;EAYnB"}

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

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

package/dist/default/ui/controls/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/controls/context.tsx"],"sourcesContent":["'use client';\n\nimport type { ControlsState, StateAttrMap } from '@videojs/core';\nimport { createContext, useContext } from 'react';\n\nexport interface ControlsContextValue {\n  state: ControlsState;\n  stateAttrMap: StateAttrMap<ControlsState>;\n}\n\nconst ControlsContext = createContext<ControlsContextValue | null>(null);\n\nexport const ControlsContextProvider = ControlsContext.Provider;\n\nexport function useControlsContext(): ControlsContextValue {\n  const ctx = useContext(ControlsContext);\n  if (!ctx) throw new Error('Controls compound components must be used within a Controls.Root');\n  return ctx;\n}\n"],"mappings":";;;;;AAUA,MAAM,kBAAkB,cAA2C,KAAK;AAExE,MAAa,0BAA0B,gBAAgB;AAEvD,SAAgB,qBAA2C;CACzD,MAAM,MAAM,WAAW,gBAAgB;AACvC,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,mEAAmE;AAC7F,QAAO"}

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

@@ -1,19 +1,22 @@
 'use client';
 
 import { renderElement } from "../../utils/use-render.js";
+import { useControlsContext } from "./context.js";
 import { forwardRef } from "react";
 
 //#region src/ui/controls/controls-group.tsx
 /** Layout group for related controls; sets `role="group"` when labeled. */
 const ControlsGroup = forwardRef(function ControlsGroup(componentProps, forwardedRef) {
 	const { render, className, style, children, ...elementProps } = componentProps;
+	const { state, stateAttrMap } = useControlsContext();
 	const role = elementProps["aria-label"] || elementProps["aria-labelledby"] ? "group" : void 0;
 	return renderElement("div", {
 		render,
 		className,
 		style
 	}, {
-		state: {},
+		state,
+		stateAttrMap,
 		ref: [forwardedRef],
 		props: [{
 			role,

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

@@ -1 +1 @@
-{"version":3,"file":"controls-group.js","names":[],"sources":["../../../../src/ui/controls/controls-group.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\ntype GroupState = Record<string, never>;\n\nexport interface ControlsGroupProps extends UIComponentProps<'div', GroupState> {\n  children?: ReactNode | undefined;\n}\n\n/** Layout group for related controls; sets `role=\"group\"` when labeled. */\nexport const ControlsGroup = forwardRef(function ControlsGroup(\n  componentProps: ControlsGroupProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, children, ...elementProps } = componentProps;\n\n  const role = elementProps['aria-label'] || elementProps['aria-labelledby'] ? 'group' : undefined;\n\n  const state: GroupState = {};\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ role, children }, elementProps],\n    }\n  );\n});\n\nexport namespace ControlsGroup {\n  export type Props = ControlsGroupProps;\n}\n"],"mappings":";;;;;;;AAeA,MAAa,gBAAgB,WAAW,SAAS,cAC/C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,iBAAiB;CAEhE,MAAM,OAAO,aAAa,iBAAiB,aAAa,qBAAqB,UAAU;AAIvF,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE,OANsB,EAAE;EAOxB,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC;GAAE;GAAM;GAAU,EAAE,aAAa;EAC1C,CACF;EACD"}
+{"version":3,"file":"controls-group.js","names":[],"sources":["../../../../src/ui/controls/controls-group.tsx"],"sourcesContent":["'use client';\n\nimport type { ControlsCore } from '@videojs/core';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useControlsContext } from './context';\n\nexport interface ControlsGroupProps extends UIComponentProps<'div', ControlsCore.State> {\n  children?: ReactNode | undefined;\n}\n\n/** Layout group for related controls; sets `role=\"group\"` when labeled. */\nexport const ControlsGroup = forwardRef(function ControlsGroup(\n  componentProps: ControlsGroupProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, children, ...elementProps } = componentProps;\n\n  const { state, stateAttrMap } = useControlsContext();\n  const role = elementProps['aria-label'] || elementProps['aria-labelledby'] ? 'group' : undefined;\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: [forwardedRef],\n      props: [{ role, children }, elementProps],\n    }\n  );\n});\n\nexport namespace ControlsGroup {\n  export type Props = ControlsGroupProps;\n}\n"],"mappings":";;;;;;;;AAeA,MAAa,gBAAgB,WAAW,SAAS,cAC/C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,iBAAiB;CAEhE,MAAM,EAAE,OAAO,iBAAiB,oBAAoB;CACpD,MAAM,OAAO,aAAa,iBAAiB,aAAa,qBAAqB,UAAU;AAEvF,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC;GAAE;GAAM;GAAU,EAAE,aAAa;EAC1C,CACF;EACD"}

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

@@ -2,8 +2,10 @@
 
 import { usePlayer } from "../../player/context.js";
 import { renderElement } from "../../utils/use-render.js";
+import { ControlsContextProvider } from "./context.js";
 import { selectControls } from "@videojs/core/dom";
 import { forwardRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
 import { ControlsCore, ControlsDataAttrs } from "@videojs/core";
 
 //#region src/ui/controls/controls-root.tsx
@@ -13,16 +15,23 @@ const ControlsRoot = forwardRef(function ControlsRoot(componentProps, forwardedR
 	const controls = usePlayer(selectControls);
 	const [core] = useState(() => new ControlsCore());
 	if (!controls) return null;
-	const state = core.getState(controls);
-	return renderElement("div", {
-		render,
-		className,
-		style
-	}, {
-		state,
-		stateAttrMap: ControlsDataAttrs,
-		ref: [forwardedRef],
-		props: [{ children }, elementProps]
+	core.setMedia(controls);
+	const state = core.getState();
+	return /* @__PURE__ */ jsx(ControlsContextProvider, {
+		value: {
+			state,
+			stateAttrMap: ControlsDataAttrs
+		},
+		children: renderElement("div", {
+			render,
+			className,
+			style
+		}, {
+			state,
+			stateAttrMap: ControlsDataAttrs,
+			ref: [forwardedRef],
+			props: [{ children }, elementProps]
+		})
 	});
 });
 

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

@@ -1 +1 @@
-{"version":3,"file":"controls-root.js","names":[],"sources":["../../../../src/ui/controls/controls-root.tsx"],"sourcesContent":["'use client';\n\nimport { ControlsCore, ControlsDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectControls } from '@videojs/core/dom';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface ControlsRootProps extends UIComponentProps<'div', ControlsCore.State> {\n  children?: ReactNode | undefined;\n}\n\n/** Root container for player controls state and rendered control content. */\nexport const ControlsRoot = forwardRef(function ControlsRoot(\n  componentProps: ControlsRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, children, ...elementProps } = componentProps;\n\n  const controls = usePlayer(selectControls);\n\n  const [core] = useState(() => new ControlsCore());\n\n  if (!controls) {\n    if (__DEV__) logMissingFeature('Controls.Root', 'controls');\n    return null;\n  }\n\n  const state = core.getState(controls);\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: ControlsDataAttrs,\n      ref: [forwardedRef],\n      props: [{ children }, elementProps],\n    }\n  );\n});\n\nexport namespace ControlsRoot {\n  export type Props = ControlsRootProps;\n  export type State = ControlsCore.State;\n}\n"],"mappings":";;;;;;;;;;AAgBA,MAAa,eAAe,WAAW,SAAS,aAC9C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,iBAAiB;CAEhE,MAAM,WAAW,UAAU,eAAe;CAE1C,MAAM,CAAC,QAAQ,eAAe,IAAI,cAAc,CAAC;AAEjD,KAAI,CAAC,SAEH,QAAO;CAGT,MAAM,QAAQ,KAAK,SAAS,SAAS;AAErC,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC,EAAE,UAAU,EAAE,aAAa;EACpC,CACF;EACD"}
+{"version":3,"file":"controls-root.js","names":[],"sources":["../../../../src/ui/controls/controls-root.tsx"],"sourcesContent":["'use client';\n\nimport { ControlsCore, ControlsDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectControls } from '@videojs/core/dom';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { ControlsContextProvider } from './context';\n\nexport interface ControlsRootProps extends UIComponentProps<'div', ControlsCore.State> {\n  children?: ReactNode | undefined;\n}\n\n/** Root container for player controls state and rendered control content. */\nexport const ControlsRoot = forwardRef(function ControlsRoot(\n  componentProps: ControlsRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, children, ...elementProps } = componentProps;\n\n  const controls = usePlayer(selectControls);\n\n  const [core] = useState(() => new ControlsCore());\n\n  if (!controls) {\n    if (__DEV__) logMissingFeature('Controls.Root', 'controls');\n    return null;\n  }\n\n  core.setMedia(controls);\n  const state = core.getState();\n\n  return (\n    <ControlsContextProvider value={{ state, stateAttrMap: ControlsDataAttrs }}>\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: ControlsDataAttrs,\n          ref: [forwardedRef],\n          props: [{ children }, elementProps],\n        }\n      )}\n    </ControlsContextProvider>\n  );\n});\n\nexport namespace ControlsRoot {\n  export type Props = ControlsRootProps;\n  export type State = ControlsCore.State;\n}\n"],"mappings":";;;;;;;;;;;;AAiBA,MAAa,eAAe,WAAW,SAAS,aAC9C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,iBAAiB;CAEhE,MAAM,WAAW,UAAU,eAAe;CAE1C,MAAM,CAAC,QAAQ,eAAe,IAAI,cAAc,CAAC;AAEjD,KAAI,CAAC,SAEH,QAAO;AAGT,MAAK,SAAS,SAAS;CACvB,MAAM,QAAQ,KAAK,UAAU;AAE7B,QACE,oBAAC;EAAwB,OAAO;GAAE;GAAO,cAAc;GAAmB;YACvE,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,aAAa;GACnB,OAAO,CAAC,EAAE,UAAU,EAAE,aAAa;GACpC,CACF;GACuB;EAE5B"}

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

@@ -0,0 +1,29 @@
+'use client';
+
+import { renderElement } from "../utils/use-render.js";
+import { forwardRef } from "react";
+
+//#region src/ui/create-context-part.tsx
+function createContextPart(config) {
+	const { displayName, tag, useContext, staticProps } = config;
+	const Component = forwardRef(function ContextPart(componentProps, forwardedRef) {
+		const { render, className, style, ...elementProps } = componentProps;
+		const context = useContext();
+		return renderElement(tag, {
+			render,
+			className,
+			style
+		}, {
+			state: context.state,
+			stateAttrMap: context.stateAttrMap,
+			ref: forwardedRef,
+			props: staticProps ? [staticProps, elementProps] : [elementProps]
+		});
+	});
+	Component.displayName = displayName;
+	return Component;
+}
+
+//#endregion
+export { createContextPart };
+//# sourceMappingURL=create-context-part.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"create-context-part.js","names":[],"sources":["../../../src/ui/create-context-part.tsx"],"sourcesContent":["'use client';\n\nimport type { StateAttrMap } from '@videojs/core';\nimport type { ForwardRefExoticComponent } from 'react';\nimport { forwardRef } from 'react';\nimport type { UIComponentProps } from '@/utils/types';\nimport type { renderElement as renderElementFn } from '../utils/use-render';\nimport { renderElement } from '../utils/use-render';\n\ninterface ContextPartConfig<Props extends object, State extends object> {\n  displayName: string;\n  tag: keyof React.JSX.IntrinsicElements;\n  useContext: () => { state: State; stateAttrMap: StateAttrMap<State> };\n  staticProps?: Partial<Props>;\n}\n\nexport function createContextPart<Props extends UIComponentProps<any, any>, State extends object>(\n  config: ContextPartConfig<Props, State>\n): ForwardRefExoticComponent<Props> {\n  const { displayName, tag, useContext, staticProps } = config;\n\n  const Component = forwardRef<HTMLElement, Props>(function ContextPart(componentProps, forwardedRef) {\n    const { render, className, style, ...elementProps } = componentProps;\n    const context = useContext();\n\n    return renderElement(tag, { render, className, style } as renderElementFn.ComponentProps<State>, {\n      state: context.state,\n      stateAttrMap: context.stateAttrMap,\n      ref: forwardedRef,\n      props: staticProps ? [staticProps, elementProps] : [elementProps],\n    });\n  });\n\n  Component.displayName = displayName;\n\n  return Component as ForwardRefExoticComponent<Props>;\n}\n"],"mappings":";;;;;;AAgBA,SAAgB,kBACd,QACkC;CAClC,MAAM,EAAE,aAAa,KAAK,YAAY,gBAAgB;CAEtD,MAAM,YAAY,WAA+B,SAAS,YAAY,gBAAgB,cAAc;EAClG,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;EACtD,MAAM,UAAU,YAAY;AAE5B,SAAO,cAAc,KAAK;GAAE;GAAQ;GAAW;GAAO,EAA2C;GAC/F,OAAO,QAAQ;GACf,cAAc,QAAQ;GACtB,KAAK;GACL,OAAO,cAAc,CAAC,aAAa,aAAa,GAAG,CAAC,aAAa;GAClE,CAAC;GACF;AAEF,WAAU,cAAc;AAExB,QAAO"}

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

@@ -0,0 +1,52 @@
+'use client';
+
+import { usePlayer } from "../player/context.js";
+import { renderElement } from "../utils/use-render.js";
+import { useButton } from "./hooks/use-button.js";
+import "@videojs/core/dom";
+import { forwardRef, useState } from "react";
+
+//#region src/ui/create-media-button.tsx
+/** Creates a media button React component from a core class and config. */
+function createMediaButton(config) {
+	const { displayName, core: CoreClass, stateAttrMap, selector, action } = config;
+	const corePropKeys = new Set(Object.keys(CoreClass.defaultProps));
+	const Component = forwardRef(function MediaButton(componentProps, forwardedRef) {
+		const { render, className, style, ...rest } = componentProps;
+		const coreProps = {};
+		const elementProps = {};
+		for (const key of Object.keys(rest)) if (corePropKeys.has(key)) coreProps[key] = rest[key];
+		else elementProps[key] = rest[key];
+		const feature = usePlayer(selector);
+		const [core] = useState(() => new CoreClass());
+		core.setProps(coreProps);
+		const { getButtonProps, buttonRef } = useButton({
+			displayName,
+			onActivate: () => action(core, feature),
+			isDisabled: () => !!coreProps.disabled || !feature
+		});
+		if (!feature) return null;
+		core.setMedia(feature);
+		const state = core.getState();
+		return renderElement("button", {
+			render,
+			className,
+			style
+		}, {
+			state,
+			stateAttrMap,
+			ref: [forwardedRef, buttonRef],
+			props: [
+				core.getAttrs(state),
+				elementProps,
+				getButtonProps()
+			]
+		});
+	});
+	Component.displayName = displayName;
+	return Component;
+}
+
+//#endregion
+export { createMediaButton };
+//# sourceMappingURL=create-media-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"create-media-button.js","names":[],"sources":["../../../src/ui/create-media-button.tsx"],"sourcesContent":["'use client';\n\nimport type { InferComponentState, InferMediaState, MediaUIComponent, StateAttrMap } from '@videojs/core';\nimport { logMissingFeature } from '@videojs/core/dom';\nimport type { Selector } from '@videojs/store';\nimport type { ForwardedRef, ForwardRefExoticComponent, RefAttributes } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../player/context';\nimport type { renderElement as renderElementFn } from '../utils/use-render';\nimport { renderElement } from '../utils/use-render';\nimport { useButton } from './hooks/use-button';\n\ninterface MediaButtonConfig<Core extends Required<MediaUIComponent>> {\n  displayName: string;\n  core: { new (): Core; defaultProps: Record<string, unknown> };\n  stateAttrMap: StateAttrMap<InferComponentState<Core>>;\n  selector: Selector<object, InferMediaState<Core> | undefined>;\n  action: (core: Core, state: InferMediaState<Core>) => void;\n}\n\n/** Creates a media button React component from a core class and config. */\nexport function createMediaButton<Core extends Required<MediaUIComponent>, Props extends object>(\n  config: MediaButtonConfig<Core>\n): ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>> {\n  const { displayName, core: CoreClass, stateAttrMap, selector, action } = config;\n\n  // Props that exist in the core's defaultProps are routed to setProps; the rest go to the DOM element.\n  const corePropKeys = new Set(Object.keys(CoreClass.defaultProps));\n\n  const Component = forwardRef(function MediaButton(\n    componentProps: Record<string, unknown>,\n    forwardedRef: ForwardedRef<HTMLButtonElement>\n  ) {\n    const { render, className, style, ...rest } = componentProps;\n\n    const coreProps: Record<string, unknown> = {};\n    const elementProps: Record<string, unknown> = {};\n\n    for (const key of Object.keys(rest)) {\n      if (corePropKeys.has(key)) {\n        coreProps[key] = rest[key];\n      } else {\n        elementProps[key] = rest[key];\n      }\n    }\n\n    const feature = usePlayer(selector);\n\n    const [core] = useState(() => new CoreClass());\n    core.setProps(coreProps);\n\n    const { getButtonProps, buttonRef } = useButton({\n      displayName,\n      onActivate: () => action(core, feature!),\n      isDisabled: () => !!coreProps.disabled || !feature,\n    });\n\n    if (!feature) {\n      if (__DEV__) logMissingFeature(displayName, selector.displayName ?? displayName);\n      return null;\n    }\n\n    type State = InferComponentState<Core>;\n\n    core.setMedia(feature);\n    const state = core.getState() as State;\n\n    return renderElement(\n      'button',\n      { render, className, style } as renderElementFn.ComponentProps<InferComponentState<Core>>,\n      {\n        state,\n        stateAttrMap,\n        ref: [forwardedRef, buttonRef],\n        props: [core.getAttrs(state), elementProps, getButtonProps()],\n      }\n    );\n  });\n\n  Component.displayName = displayName;\n\n  return Component as unknown as ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>>;\n}\n"],"mappings":";;;;;;;;;;AAsBA,SAAgB,kBACd,QACqE;CACrE,MAAM,EAAE,aAAa,MAAM,WAAW,cAAc,UAAU,WAAW;CAGzE,MAAM,eAAe,IAAI,IAAI,OAAO,KAAK,UAAU,aAAa,CAAC;CAEjE,MAAM,YAAY,WAAW,SAAS,YACpC,gBACA,cACA;EACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,SAAS;EAE9C,MAAM,YAAqC,EAAE;EAC7C,MAAM,eAAwC,EAAE;AAEhD,OAAK,MAAM,OAAO,OAAO,KAAK,KAAK,CACjC,KAAI,aAAa,IAAI,IAAI,CACvB,WAAU,OAAO,KAAK;MAEtB,cAAa,OAAO,KAAK;EAI7B,MAAM,UAAU,UAAU,SAAS;EAEnC,MAAM,CAAC,QAAQ,eAAe,IAAI,WAAW,CAAC;AAC9C,OAAK,SAAS,UAAU;EAExB,MAAM,EAAE,gBAAgB,cAAc,UAAU;GAC9C;GACA,kBAAkB,OAAO,MAAM,QAAS;GACxC,kBAAkB,CAAC,CAAC,UAAU,YAAY,CAAC;GAC5C,CAAC;AAEF,MAAI,CAAC,QAEH,QAAO;AAKT,OAAK,SAAS,QAAQ;EACtB,MAAM,QAAQ,KAAK,UAAU;AAE7B,SAAO,cACL,UACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA;GACA,KAAK,CAAC,cAAc,UAAU;GAC9B,OAAO;IAAC,KAAK,SAAS,MAAM;IAAE;IAAc,gBAAgB;IAAC;GAC9D,CACF;GACD;AAEF,WAAU,cAAc;AAExB,QAAO"}

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

@@ -1,42 +1,17 @@
 'use client';
 
-import { usePlayer } from "../../player/context.js";
-import { renderElement } from "../../utils/use-render.js";
-import { useButton } from "../hooks/use-button.js";
+import { createMediaButton } from "../create-media-button.js";
 import { selectFullscreen } from "@videojs/core/dom";
-import { forwardRef, useState } from "react";
 import { FullscreenButtonCore, FullscreenButtonDataAttrs } from "@videojs/core";
 
 //#region src/ui/fullscreen-button/fullscreen-button.tsx
-const FullscreenButton = forwardRef(function FullscreenButton(componentProps, forwardedRef) {
-	const { render, className, style, label, disabled, ...elementProps } = componentProps;
-	const fullscreen = usePlayer(selectFullscreen);
-	const [core] = useState(() => new FullscreenButtonCore());
-	core.setProps({
-		label,
-		disabled
-	});
-	const { getButtonProps, buttonRef } = useButton({
-		displayName: "FullscreenButton",
-		onActivate: () => core.toggle(fullscreen),
-		isDisabled: () => disabled || !fullscreen
-	});
-	if (!fullscreen) return null;
-	const state = core.getState(fullscreen);
-	return renderElement("button", {
-		render,
-		className,
-		style
-	}, {
-		state,
-		stateAttrMap: FullscreenButtonDataAttrs,
-		ref: [forwardedRef, buttonRef],
-		props: [
-			core.getAttrs(state),
-			elementProps,
-			getButtonProps()
-		]
-	});
+/** A button that toggles fullscreen. */
+const FullscreenButton = createMediaButton({
+	displayName: "FullscreenButton",
+	core: FullscreenButtonCore,
+	stateAttrMap: FullscreenButtonDataAttrs,
+	selector: selectFullscreen,
+	action: (core, state) => core.toggle(state)
 });
 
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"fullscreen-button.js","names":[],"sources":["../../../../src/ui/fullscreen-button/fullscreen-button.tsx"],"sourcesContent":["'use client';\n\nimport { FullscreenButtonCore, FullscreenButtonDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectFullscreen } 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 FullscreenButtonProps\n  extends UIComponentProps<'button', FullscreenButtonCore.State>,\n    FullscreenButtonCore.Props {}\n\nexport const FullscreenButton = forwardRef(function FullscreenButton(\n  componentProps: FullscreenButtonProps,\n  forwardedRef: ForwardedRef<HTMLButtonElement>\n) {\n  const { render, className, style, label, disabled, ...elementProps } = componentProps;\n\n  const fullscreen = usePlayer(selectFullscreen);\n\n  const [core] = useState(() => new FullscreenButtonCore());\n  core.setProps({ label, disabled });\n\n  const { getButtonProps, buttonRef } = useButton({\n    displayName: 'FullscreenButton',\n    onActivate: () => core.toggle(fullscreen!),\n    isDisabled: () => disabled || !fullscreen,\n  });\n\n  if (!fullscreen) {\n    if (__DEV__) logMissingFeature('FullscreenButton', 'fullscreen');\n    return null;\n  }\n\n  const state = core.getState(fullscreen);\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: FullscreenButtonDataAttrs,\n      ref: [forwardedRef, buttonRef],\n      props: [core.getAttrs(state), elementProps, getButtonProps()],\n    }\n  );\n});\n\nexport namespace FullscreenButton {\n  export type Props = FullscreenButtonProps;\n  export type State = FullscreenButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;AAgBA,MAAa,mBAAmB,WAAW,SAAS,iBAClD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,UAAU,GAAG,iBAAiB;CAEvE,MAAM,aAAa,UAAU,iBAAiB;CAE9C,MAAM,CAAC,QAAQ,eAAe,IAAI,sBAAsB,CAAC;AACzD,MAAK,SAAS;EAAE;EAAO;EAAU,CAAC;CAElC,MAAM,EAAE,gBAAgB,cAAc,UAAU;EAC9C,aAAa;EACb,kBAAkB,KAAK,OAAO,WAAY;EAC1C,kBAAkB,YAAY,CAAC;EAChC,CAAC;AAEF,KAAI,CAAC,WAEH,QAAO;CAGT,MAAM,QAAQ,KAAK,SAAS,WAAW;AAEvC,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":"fullscreen-button.js","names":[],"sources":["../../../../src/ui/fullscreen-button/fullscreen-button.tsx"],"sourcesContent":["'use client';\n\nimport { FullscreenButtonCore, FullscreenButtonDataAttrs } from '@videojs/core';\nimport { selectFullscreen } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface FullscreenButtonProps\n  extends UIComponentProps<'button', FullscreenButtonCore.State>,\n    FullscreenButtonCore.Props {}\n\n/** A button that toggles fullscreen. */\nexport const FullscreenButton = createMediaButton<FullscreenButtonCore, FullscreenButtonProps>({\n  displayName: 'FullscreenButton',\n  core: FullscreenButtonCore,\n  stateAttrMap: FullscreenButtonDataAttrs,\n  selector: selectFullscreen,\n  action: (core, state) => core.toggle(state),\n});\n\nexport namespace FullscreenButton {\n  export type Props = FullscreenButtonProps;\n  export type State = FullscreenButtonCore.State;\n}\n"],"mappings":";;;;;;;;AAaA,MAAa,mBAAmB,kBAA+D;CAC7F,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,MAAM;CAC5C,CAAC"}

package/dist/default/ui/hooks/use-slider.js

@@ -0,0 +1,75 @@
+'use client';
+
+import { useForceRender } from "../../utils/use-force-render.js";
+import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { createSlider } from "@videojs/core/dom";
+import { useSnapshot } from "@videojs/store/react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { isRTL } from "@videojs/utils/dom";
+
+//#region src/ui/hooks/use-slider.ts
+/**
+* Manages slider input lifecycle for React.
+*
+* Wraps `createSlider()` from `@videojs/core/dom` and subscribes to its
+* input state via `useSnapshot`. Returns split props for the root
+* (pointer events) and thumb (keyboard/focus) elements.
+*/
+function useSlider(options) {
+	const optionsRef = useLatestRef(options);
+	const rootElementRef = useRef(null);
+	const thumbElementRef = useRef(null);
+	const forceRender = useForceRender();
+	const [slider] = useState(() => {
+		return createSlider({
+			getElement: () => rootElementRef.current,
+			getThumbElement: () => thumbElementRef.current,
+			getOrientation: () => optionsRef.current.orientation ?? "horizontal",
+			isRTL: () => rootElementRef.current ? isRTL(rootElementRef.current) : false,
+			isDisabled: () => optionsRef.current.disabled ?? false,
+			getPercent: () => optionsRef.current.getPercent(),
+			getStepPercent: () => optionsRef.current.getStepPercent(),
+			getLargeStepPercent: () => optionsRef.current.getLargeStepPercent(),
+			commitThrottle: optionsRef.current.commitThrottle,
+			onValueChange: (percent) => optionsRef.current.onValueChange?.(percent),
+			onValueCommit: (percent) => optionsRef.current.onValueCommit?.(percent),
+			onDragStart: () => optionsRef.current.onDragStart?.(),
+			onDragEnd: () => optionsRef.current.onDragEnd?.()
+		});
+	});
+	useEffect(() => () => slider.destroy(), [slider]);
+	const input = useSnapshot(slider.input);
+	const state = options.computeState(input);
+	useLayoutEffect(() => {
+		if (state.thumbAlignment === "edge" && rootElementRef.current && thumbElementRef.current) forceRender();
+	}, [state.thumbAlignment]);
+	const rootEl = rootElementRef.current;
+	const thumbEl = thumbElementRef.current;
+	let cssState = state;
+	if (state.thumbAlignment === "edge" && rootEl && thumbEl && options.adjustPercent) {
+		const isHorizontal = state.orientation === "horizontal";
+		const thumbSize = isHorizontal ? thumbEl.offsetWidth : thumbEl.offsetHeight;
+		const trackSize = isHorizontal ? rootEl.offsetWidth : rootEl.offsetHeight;
+		cssState = {
+			...state,
+			fillPercent: options.adjustPercent(state.fillPercent, thumbSize, trackSize),
+			pointerPercent: options.adjustPercent(state.pointerPercent, thumbSize, trackSize)
+		};
+	}
+	return {
+		state,
+		cssVars: options.getCSSVars(cssState),
+		rootRef: useCallback((element) => {
+			rootElementRef.current = element;
+		}, []),
+		thumbRef: useCallback((element) => {
+			thumbElementRef.current = element;
+		}, []),
+		rootProps: slider.rootProps,
+		thumbProps: slider.thumbProps
+	};
+}
+
+//#endregion
+export { useSlider };
+//# sourceMappingURL=use-slider.js.map

package/dist/default/ui/hooks/use-slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-slider.js","names":[],"sources":["../../../../src/ui/hooks/use-slider.ts"],"sourcesContent":["'use client';\n\nimport type { SliderInput, SliderState } from '@videojs/core';\nimport {\n  createSlider,\n  type SliderApi,\n  type SliderOptions,\n  type SliderRootProps,\n  type SliderThumbProps,\n} from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport { isRTL } from '@videojs/utils/dom';\nimport { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { useForceRender } from '../../utils/use-force-render';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport interface UseSliderOptions<State extends SliderState = SliderState>\n  extends Pick<\n    SliderOptions,\n    | 'getPercent'\n    | 'getStepPercent'\n    | 'getLargeStepPercent'\n    | 'commitThrottle'\n    | 'onValueChange'\n    | 'onValueCommit'\n    | 'onDragStart'\n    | 'onDragEnd'\n  > {\n  computeState: (input: SliderInput) => State;\n  orientation?: 'horizontal' | 'vertical' | undefined;\n  disabled?: boolean | undefined;\n  /** Adjust a raw 0–100 percent for thumb alignment. Called for fill and pointer percents. */\n  adjustPercent?: ((rawPercent: number, thumbSize: number, trackSize: number) => number) | undefined;\n  /** Compute CSS variable map from the (possibly alignment-adjusted) state. */\n  getCSSVars: (state: State) => Record<string, string>;\n}\n\nexport interface UseSliderReturnValue<State extends SliderState = SliderState> {\n  state: State;\n  cssVars: Record<string, string>;\n  rootRef: React.RefCallback<HTMLElement>;\n  thumbRef: React.RefCallback<HTMLElement>;\n  rootProps: SliderRootProps;\n  thumbProps: SliderThumbProps;\n}\n\n/**\n * Manages slider input lifecycle for React.\n *\n * Wraps `createSlider()` from `@videojs/core/dom` and subscribes to its\n * input state via `useSnapshot`. Returns split props for the root\n * (pointer events) and thumb (keyboard/focus) elements.\n */\nexport function useSlider<State extends SliderState = SliderState>(\n  options: UseSliderOptions<State>\n): UseSliderReturnValue<State> {\n  const optionsRef = useLatestRef(options);\n\n  const rootElementRef = useRef<HTMLElement | null>(null);\n  const thumbElementRef = useRef<HTMLElement | null>(null);\n  const forceRender = useForceRender();\n\n  // Lazy-init the slider handle. Stable across re-renders.\n  const [slider] = useState<SliderApi>(() => {\n    const stableOptions: SliderOptions = {\n      getElement: () => rootElementRef.current!,\n      getThumbElement: () => thumbElementRef.current,\n      getOrientation: () => optionsRef.current.orientation ?? 'horizontal',\n      isRTL: () => (rootElementRef.current ? isRTL(rootElementRef.current) : false),\n      isDisabled: () => optionsRef.current.disabled ?? false,\n      getPercent: () => optionsRef.current.getPercent(),\n      getStepPercent: () => optionsRef.current.getStepPercent(),\n      getLargeStepPercent: () => optionsRef.current.getLargeStepPercent(),\n      commitThrottle: optionsRef.current.commitThrottle,\n      onValueChange: (percent) => optionsRef.current.onValueChange?.(percent),\n      onValueCommit: (percent) => optionsRef.current.onValueCommit?.(percent),\n      onDragStart: () => optionsRef.current.onDragStart?.(),\n      onDragEnd: () => optionsRef.current.onDragEnd?.(),\n    };\n\n    return createSlider(stableOptions);\n  });\n\n  // Cleanup on unmount.\n  useEffect(() => () => slider.destroy(), [slider]);\n\n  // Subscribe to slider input state.\n  const input = useSnapshot(slider.input);\n\n  // Compute derived state from input + caller-provided projection.\n  const state = options.computeState(input);\n\n  // Force a synchronous re-render after mount so edge thumb alignment\n  // can read DOM measurements from the now-populated element refs.\n  useLayoutEffect(() => {\n    if (state.thumbAlignment === 'edge' && rootElementRef.current && thumbElementRef.current) {\n      forceRender();\n    }\n  }, [state.thumbAlignment]);\n\n  // Adjust CSS var percents for edge thumb alignment when DOM elements are available.\n  const rootEl = rootElementRef.current;\n  const thumbEl = thumbElementRef.current;\n  let cssState = state;\n\n  if (state.thumbAlignment === 'edge' && rootEl && thumbEl && options.adjustPercent) {\n    const isHorizontal = state.orientation === 'horizontal';\n    const thumbSize = isHorizontal ? thumbEl.offsetWidth : thumbEl.offsetHeight;\n    const trackSize = isHorizontal ? rootEl.offsetWidth : rootEl.offsetHeight;\n    cssState = {\n      ...state,\n      fillPercent: options.adjustPercent(state.fillPercent, thumbSize, trackSize),\n      pointerPercent: options.adjustPercent(state.pointerPercent, thumbSize, trackSize),\n    };\n  }\n\n  const cssVars = options.getCSSVars(cssState);\n\n  // Ref callbacks for root and thumb elements.\n  const rootRef = useCallback((element: HTMLElement | null) => {\n    rootElementRef.current = element;\n  }, []);\n\n  const thumbRef = useCallback((element: HTMLElement | null) => {\n    thumbElementRef.current = element;\n  }, []);\n\n  return {\n    state,\n    cssVars,\n    rootRef,\n    thumbRef,\n    rootProps: slider.rootProps,\n    thumbProps: slider.thumbProps,\n  };\n}\n\nexport namespace useSlider {\n  export type Options = UseSliderOptions;\n  export type ReturnValue = UseSliderReturnValue;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAqDA,SAAgB,UACd,SAC6B;CAC7B,MAAM,aAAa,aAAa,QAAQ;CAExC,MAAM,iBAAiB,OAA2B,KAAK;CACvD,MAAM,kBAAkB,OAA2B,KAAK;CACxD,MAAM,cAAc,gBAAgB;CAGpC,MAAM,CAAC,UAAU,eAA0B;AAiBzC,SAAO,aAhB8B;GACnC,kBAAkB,eAAe;GACjC,uBAAuB,gBAAgB;GACvC,sBAAsB,WAAW,QAAQ,eAAe;GACxD,aAAc,eAAe,UAAU,MAAM,eAAe,QAAQ,GAAG;GACvE,kBAAkB,WAAW,QAAQ,YAAY;GACjD,kBAAkB,WAAW,QAAQ,YAAY;GACjD,sBAAsB,WAAW,QAAQ,gBAAgB;GACzD,2BAA2B,WAAW,QAAQ,qBAAqB;GACnE,gBAAgB,WAAW,QAAQ;GACnC,gBAAgB,YAAY,WAAW,QAAQ,gBAAgB,QAAQ;GACvE,gBAAgB,YAAY,WAAW,QAAQ,gBAAgB,QAAQ;GACvE,mBAAmB,WAAW,QAAQ,eAAe;GACrD,iBAAiB,WAAW,QAAQ,aAAa;GAClD,CAEiC;GAClC;AAGF,uBAAsB,OAAO,SAAS,EAAE,CAAC,OAAO,CAAC;CAGjD,MAAM,QAAQ,YAAY,OAAO,MAAM;CAGvC,MAAM,QAAQ,QAAQ,aAAa,MAAM;AAIzC,uBAAsB;AACpB,MAAI,MAAM,mBAAmB,UAAU,eAAe,WAAW,gBAAgB,QAC/E,cAAa;IAEd,CAAC,MAAM,eAAe,CAAC;CAG1B,MAAM,SAAS,eAAe;CAC9B,MAAM,UAAU,gBAAgB;CAChC,IAAI,WAAW;AAEf,KAAI,MAAM,mBAAmB,UAAU,UAAU,WAAW,QAAQ,eAAe;EACjF,MAAM,eAAe,MAAM,gBAAgB;EAC3C,MAAM,YAAY,eAAe,QAAQ,cAAc,QAAQ;EAC/D,MAAM,YAAY,eAAe,OAAO,cAAc,OAAO;AAC7D,aAAW;GACT,GAAG;GACH,aAAa,QAAQ,cAAc,MAAM,aAAa,WAAW,UAAU;GAC3E,gBAAgB,QAAQ,cAAc,MAAM,gBAAgB,WAAW,UAAU;GAClF;;AAcH,QAAO;EACL;EACA,SAbc,QAAQ,WAAW,SAAS;EAc1C,SAXc,aAAa,YAAgC;AAC3D,kBAAe,UAAU;KACxB,EAAE,CAAC;EAUJ,UARe,aAAa,YAAgC;AAC5D,mBAAgB,UAAU;KACzB,EAAE,CAAC;EAOJ,WAAW,OAAO;EAClB,YAAY,OAAO;EACpB"}

package/dist/default/ui/mute-button/mute-button.js

@@ -1,45 +1,17 @@
 'use client';
 
-import { usePlayer } from "../../player/context.js";
-import { renderElement } from "../../utils/use-render.js";
-import { useButton } from "../hooks/use-button.js";
+import { createMediaButton } from "../create-media-button.js";
 import { selectVolume } from "@videojs/core/dom";
-import { forwardRef, useState } from "react";
 import { MuteButtonCore, MuteButtonDataAttrs } from "@videojs/core";
 
 //#region src/ui/mute-button/mute-button.tsx
-/**
-* A button that toggles mute state.
-*/
-const MuteButton = forwardRef(function MuteButton(componentProps, forwardedRef) {
-	const { render, className, style, label, disabled, ...elementProps } = componentProps;
-	const volume = usePlayer(selectVolume);
-	const [core] = useState(() => new MuteButtonCore());
-	core.setProps({
-		label,
-		disabled
-	});
-	const { getButtonProps, buttonRef } = useButton({
-		displayName: "MuteButton",
-		onActivate: () => core.toggle(volume),
-		isDisabled: () => disabled || !volume
-	});
-	if (!volume) return null;
-	const state = core.getState(volume);
-	return renderElement("button", {
-		render,
-		className,
-		style
-	}, {
-		state,
-		stateAttrMap: MuteButtonDataAttrs,
-		ref: [forwardedRef, buttonRef],
-		props: [
-			core.getAttrs(state),
-			elementProps,
-			getButtonProps()
-		]
-	});
+/** A button that toggles mute state. */
+const MuteButton = createMediaButton({
+	displayName: "MuteButton",
+	core: MuteButtonCore,
+	stateAttrMap: MuteButtonDataAttrs,
+	selector: selectVolume,
+	action: (core, state) => core.toggle(state)
 });
 
 //#endregion