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

package/dist/dev/ui/alert-dialog/alert-dialog-close.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-close.d.ts","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-close.tsx"],"mappings":";;;;;UASiB,qBAAA,SAA8B,gBAAA,WAA2B,eAAA,CAAgB,KAAA;AAAA,cAE7E,gBAAA,EAAgB,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,qBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBAsBZ,gBAAA;EAAA,KACH,KAAA,GAAQ,qBAAA;EAAA,KACR,KAAA,GAAQ,eAAA,CAAgB,KAAA;AAAA"}

package/dist/dev/ui/alert-dialog/alert-dialog-close.js

@@ -0,0 +1,31 @@
+'use client';
+
+import { useAlertDialogContext } from "./context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { forwardRef, useCallback } from "react";
+
+//#region src/ui/alert-dialog/alert-dialog-close.tsx
+const AlertDialogClose = forwardRef(function AlertDialogClose({ render, className, style, disabled, ...elementProps }, forwardedRef) {
+	const { dialog, state } = useAlertDialogContext();
+	const handleClick = useCallback(() => {
+		if (disabled) return;
+		dialog.close();
+	}, [dialog, disabled]);
+	return renderElement("button", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		ref: [forwardedRef],
+		props: [{
+			type: "button",
+			disabled,
+			onClick: handleClick
+		}, elementProps]
+	});
+});
+
+//#endregion
+export { AlertDialogClose };
+//# sourceMappingURL=alert-dialog-close.js.map

package/dist/dev/ui/alert-dialog/alert-dialog-close.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-close.js","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-close.tsx"],"sourcesContent":["'use client';\n\nimport type { AlertDialogCore } from '@videojs/core';\nimport { forwardRef, useCallback } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useAlertDialogContext } from './context';\n\nexport interface AlertDialogCloseProps extends UIComponentProps<'button', AlertDialogCore.State> {}\n\nexport const AlertDialogClose = forwardRef<HTMLButtonElement, AlertDialogCloseProps>(function AlertDialogClose(\n  { render, className, style, disabled, ...elementProps },\n  forwardedRef\n) {\n  const { dialog, state } = useAlertDialogContext();\n\n  const handleClick = useCallback(() => {\n    if (disabled) return;\n    dialog.close();\n  }, [dialog, disabled]);\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ type: 'button' as const, disabled, onClick: handleClick }, elementProps],\n    }\n  );\n});\n\nexport namespace AlertDialogClose {\n  export type Props = AlertDialogCloseProps;\n  export type State = AlertDialogCore.State;\n}\n"],"mappings":";;;;;;;AAWA,MAAa,mBAAmB,WAAqD,SAAS,iBAC5F,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBACzC,cACA;CACA,MAAM,EAAE,QAAQ,UAAU,uBAAuB;CAEjD,MAAM,cAAc,kBAAkB;AACpC,MAAI,SAAU;AACd,SAAO,OAAO;IACb,CAAC,QAAQ,SAAS,CAAC;AAEtB,QAAO,cACL,UACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC;GAAE,MAAM;GAAmB;GAAU,SAAS;GAAa,EAAE,aAAa;EACnF,CACF;EACD"}

package/dist/dev/ui/alert-dialog/alert-dialog-description.d.ts

@@ -0,0 +1,14 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as react from "react";
+import { AlertDialogCore } from "@videojs/core";
+
+//#region src/ui/alert-dialog/alert-dialog-description.d.ts
+interface AlertDialogDescriptionProps extends UIComponentProps<'p', AlertDialogCore.State> {}
+declare const AlertDialogDescription: react.ForwardRefExoticComponent<AlertDialogDescriptionProps>;
+declare namespace AlertDialogDescription {
+  type Props = AlertDialogDescriptionProps;
+  type State = AlertDialogCore.State;
+}
+//#endregion
+export { AlertDialogDescription, AlertDialogDescriptionProps };
+//# sourceMappingURL=alert-dialog-description.d.ts.map

package/dist/dev/ui/alert-dialog/alert-dialog-description.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-description.d.ts","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-description.tsx"],"mappings":";;;;;UAQiB,2BAAA,SAAoC,gBAAA,MAAsB,eAAA,CAAgB,KAAA;AAAA,cAE9E,sBAAA,EAAsB,KAAA,CAAA,yBAAA,CAAA,2BAAA;AAAA,kBAOlB,sBAAA;EAAA,KACH,KAAA,GAAQ,2BAAA;EAAA,KACR,KAAA,GAAQ,eAAA,CAAgB,KAAA;AAAA"}

package/dist/dev/ui/alert-dialog/alert-dialog-description.js

@@ -0,0 +1,16 @@
+'use client';
+
+import { useAlertDialogContext } from "./context.js";
+import { createContextPart } from "../create-context-part.js";
+
+//#region src/ui/alert-dialog/alert-dialog-description.tsx
+const AlertDialogDescription = createContextPart({
+	displayName: "AlertDialogDescription",
+	tag: "p",
+	useContext: useAlertDialogContext,
+	getProps: (state) => ({ id: state.descriptionId })
+});
+
+//#endregion
+export { AlertDialogDescription };
+//# sourceMappingURL=alert-dialog-description.js.map

package/dist/dev/ui/alert-dialog/alert-dialog-description.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-description.js","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-description.tsx"],"sourcesContent":["'use client';\n\nimport type { AlertDialogCore } from '@videojs/core';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createContextPart } from '../create-context-part';\nimport { useAlertDialogContext } from './context';\n\nexport interface AlertDialogDescriptionProps extends UIComponentProps<'p', AlertDialogCore.State> {}\n\nexport const AlertDialogDescription = createContextPart<AlertDialogDescriptionProps, AlertDialogCore.State>({\n  displayName: 'AlertDialogDescription',\n  tag: 'p',\n  useContext: useAlertDialogContext,\n  getProps: (state) => ({ id: state.descriptionId }),\n});\n\nexport namespace AlertDialogDescription {\n  export type Props = AlertDialogDescriptionProps;\n  export type State = AlertDialogCore.State;\n}\n"],"mappings":";;;;;;AAUA,MAAa,yBAAyB,kBAAsE;CAC1G,aAAa;CACb,KAAK;CACL,YAAY;CACZ,WAAW,WAAW,EAAE,IAAI,MAAM,eAAe;CAClD,CAAC"}

package/dist/dev/ui/alert-dialog/alert-dialog-popup.d.ts

@@ -0,0 +1,14 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as react from "react";
+import { AlertDialogCore } from "@videojs/core";
+
+//#region src/ui/alert-dialog/alert-dialog-popup.d.ts
+interface AlertDialogPopupProps extends UIComponentProps<'div', AlertDialogCore.State> {}
+declare const AlertDialogPopup: react.ForwardRefExoticComponent<Omit<AlertDialogPopupProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare namespace AlertDialogPopup {
+  type Props = AlertDialogPopupProps;
+  type State = AlertDialogCore.State;
+}
+//#endregion
+export { AlertDialogPopup, AlertDialogPopupProps };
+//# sourceMappingURL=alert-dialog-popup.d.ts.map

package/dist/dev/ui/alert-dialog/alert-dialog-popup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-popup.d.ts","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-popup.tsx"],"mappings":";;;;;UAUiB,qBAAA,SAA8B,gBAAA,QAAwB,eAAA,CAAgB,KAAA;AAAA,cAE1E,gBAAA,EAAgB,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,qBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBA6BZ,gBAAA;EAAA,KACH,KAAA,GAAQ,qBAAA;EAAA,KACR,KAAA,GAAQ,eAAA,CAAgB,KAAA;AAAA"}

package/dist/dev/ui/alert-dialog/alert-dialog-popup.js

@@ -0,0 +1,32 @@
+'use client';
+
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { useAlertDialogContext } from "./context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { forwardRef, useCallback } from "react";
+
+//#region src/ui/alert-dialog/alert-dialog-popup.tsx
+const AlertDialogPopup = forwardRef(function AlertDialogPopup({ render, className, style, ...elementProps }, forwardedRef) {
+	const { core, dialog, state, stateAttrMap } = useAlertDialogContext();
+	const composedRef = useComposedRefs(forwardedRef, useCallback((el) => {
+		dialog.setElement(el);
+	}, [dialog]));
+	if (!state.open) return null;
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: composedRef,
+		props: [{
+			tabIndex: -1,
+			...core.getAttrs(state)
+		}, elementProps]
+	});
+});
+
+//#endregion
+export { AlertDialogPopup };
+//# sourceMappingURL=alert-dialog-popup.js.map

package/dist/dev/ui/alert-dialog/alert-dialog-popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-popup.js","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-popup.tsx"],"sourcesContent":["'use client';\n\nimport type { AlertDialogCore } from '@videojs/core';\nimport { forwardRef, useCallback } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { useAlertDialogContext } from './context';\n\nexport interface AlertDialogPopupProps extends UIComponentProps<'div', AlertDialogCore.State> {}\n\nexport const AlertDialogPopup = forwardRef<HTMLDivElement, AlertDialogPopupProps>(function AlertDialogPopup(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { core, dialog, state, stateAttrMap } = useAlertDialogContext();\n\n  const elementRef = useCallback(\n    (el: HTMLDivElement | null) => {\n      dialog.setElement(el);\n    },\n    [dialog]\n  );\n\n  const composedRef = useComposedRefs(forwardedRef, elementRef);\n\n  if (!state.open) return null;\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: composedRef,\n      props: [{ tabIndex: -1, ...core.getAttrs(state) }, elementProps],\n    }\n  );\n});\n\nexport namespace AlertDialogPopup {\n  export type Props = AlertDialogPopupProps;\n  export type State = AlertDialogCore.State;\n}\n"],"mappings":";;;;;;;;AAYA,MAAa,mBAAmB,WAAkD,SAAS,iBACzF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,QAAQ,OAAO,iBAAiB,uBAAuB;CASrE,MAAM,cAAc,gBAAgB,cAPjB,aAChB,OAA8B;AAC7B,SAAO,WAAW,GAAG;IAEvB,CAAC,OAAO,CACT,CAE4D;AAE7D,KAAI,CAAC,MAAM,KAAM,QAAO;AAExB,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC;GAAE,UAAU;GAAI,GAAG,KAAK,SAAS,MAAM;GAAE,EAAE,aAAa;EACjE,CACF;EACD"}

package/dist/dev/ui/alert-dialog/alert-dialog-root.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+import { AlertDialogProps } from "@videojs/core";
+
+//#region src/ui/alert-dialog/alert-dialog-root.d.ts
+interface AlertDialogRootProps extends AlertDialogProps {
+  /** Called when the open state changes (fires immediately, before animations). */
+  onOpenChange?: (open: boolean) => void;
+  /** Called after open/close animations complete. */
+  onOpenChangeComplete?: (open: boolean) => void;
+  children?: ReactNode;
+}
+declare function AlertDialogRoot({
+  open: controlledOpen,
+  defaultOpen,
+  onOpenChange: onOpenChangeProp,
+  onOpenChangeComplete: onOpenChangeCompleteProp,
+  children
+}: AlertDialogRootProps): ReactNode;
+declare namespace AlertDialogRoot {
+  type Props = AlertDialogRootProps;
+}
+//#endregion
+export { AlertDialogRoot, AlertDialogRootProps };
+//# sourceMappingURL=alert-dialog-root.d.ts.map

package/dist/dev/ui/alert-dialog/alert-dialog-root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-root.d.ts","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-root.tsx"],"mappings":";;;;UAaiB,oBAAA,SAA6B,gBAAA;;EAE5C,YAAA,IAAgB,IAAA;EAFoB;EAIpC,oBAAA,IAAwB,IAAA;EACxB,QAAA,GAAW,SAAA;AAAA;AAAA,iBAGG,eAAA,CAAA;EACd,IAAA,EAAM,cAAA;EACN,WAAA;EACA,YAAA,EAAc,gBAAA;EACd,oBAAA,EAAsB,wBAAA;EACtB;AAAA,GACC,oBAAA,GAAuB,SAAA;AAAA,kBA2DT,eAAA;EAAA,KACH,KAAA,GAAQ,oBAAA;AAAA"}

package/dist/dev/ui/alert-dialog/alert-dialog-root.js

@@ -0,0 +1,59 @@
+'use client';
+
+import { useDestroy } from "../../utils/use-destroy.js";
+import { AlertDialogContextProvider } from "./context.js";
+import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { useSafeId } from "../../utils/use-safe-id.js";
+import { createAlertDialog, createTransition } from "@videojs/core/dom";
+import { useSnapshot } from "@videojs/store/react";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { AlertDialogCore, AlertDialogDataAttrs } from "@videojs/core";
+
+//#region src/ui/alert-dialog/alert-dialog-root.tsx
+function AlertDialogRoot({ open: controlledOpen, defaultOpen = AlertDialogCore.defaultProps.defaultOpen, onOpenChange: onOpenChangeProp, onOpenChangeComplete: onOpenChangeCompleteProp, children }) {
+	const [core] = useState(() => new AlertDialogCore());
+	const isControlled = controlledOpen !== void 0;
+	const onOpenChangeRef = useLatestRef(onOpenChangeProp);
+	const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);
+	const [dialog] = useState(() => {
+		const instance = createAlertDialog({
+			transition: createTransition(),
+			onOpenChange: (nextOpen) => {
+				onOpenChangeRef.current?.(nextOpen);
+			},
+			onOpenChangeComplete: (nextOpen) => {
+				onOpenChangeCompleteRef.current?.(nextOpen);
+			}
+		});
+		if (!isControlled && defaultOpen) instance.open();
+		return instance;
+	});
+	const titleId = useSafeId("alert-dialog-title-");
+	const descriptionId = useSafeId("alert-dialog-desc-");
+	core.setTitleId(titleId);
+	core.setDescriptionId(descriptionId);
+	useEffect(() => {
+		if (controlledOpen === void 0) return;
+		const { active: inputOpen } = dialog.input.current;
+		if (controlledOpen === inputOpen) return;
+		if (controlledOpen) dialog.open();
+		else dialog.close();
+	}, [controlledOpen, dialog]);
+	useDestroy(dialog);
+	const input = useSnapshot(dialog.input);
+	core.setInput(input);
+	return /* @__PURE__ */ jsx(AlertDialogContextProvider, {
+		value: {
+			core,
+			dialog,
+			state: core.getState(),
+			stateAttrMap: AlertDialogDataAttrs
+		},
+		children
+	});
+}
+
+//#endregion
+export { AlertDialogRoot };
+//# sourceMappingURL=alert-dialog-root.js.map

package/dist/dev/ui/alert-dialog/alert-dialog-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-root.js","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-root.tsx"],"sourcesContent":["'use client';\n\nimport { AlertDialogCore, AlertDialogDataAttrs, type AlertDialogProps } from '@videojs/core';\nimport { createAlertDialog, createTransition } from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport type { ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { AlertDialogContextProvider } from './context';\n\nexport interface AlertDialogRootProps extends AlertDialogProps {\n  /** Called when the open state changes (fires immediately, before animations). */\n  onOpenChange?: (open: boolean) => void;\n  /** Called after open/close animations complete. */\n  onOpenChangeComplete?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\nexport function AlertDialogRoot({\n  open: controlledOpen,\n  defaultOpen = AlertDialogCore.defaultProps.defaultOpen,\n  onOpenChange: onOpenChangeProp,\n  onOpenChangeComplete: onOpenChangeCompleteProp,\n  children,\n}: AlertDialogRootProps): ReactNode {\n  const [core] = useState(() => new AlertDialogCore());\n\n  const isControlled = controlledOpen !== undefined;\n\n  const onOpenChangeRef = useLatestRef(onOpenChangeProp);\n  const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);\n\n  const [dialog] = useState(() => {\n    const instance = createAlertDialog({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean) => {\n        onOpenChangeRef.current?.(nextOpen);\n      },\n      onOpenChangeComplete: (nextOpen: boolean) => {\n        onOpenChangeCompleteRef.current?.(nextOpen);\n      },\n    });\n\n    if (!isControlled && defaultOpen) {\n      instance.open();\n    }\n\n    return instance;\n  });\n\n  const titleId = useSafeId('alert-dialog-title-');\n  const descriptionId = useSafeId('alert-dialog-desc-');\n\n  core.setTitleId(titleId);\n  core.setDescriptionId(descriptionId);\n\n  // Sync controlled open prop -> internal input state.\n  useEffect(() => {\n    if (controlledOpen === undefined) return;\n\n    const { active: inputOpen } = dialog.input.current;\n    if (controlledOpen === inputOpen) return;\n\n    if (controlledOpen) {\n      dialog.open();\n    } else {\n      dialog.close();\n    }\n  }, [controlledOpen, dialog]);\n\n  useDestroy(dialog);\n\n  const input = useSnapshot(dialog.input);\n  core.setInput(input);\n  const state = core.getState();\n\n  return (\n    <AlertDialogContextProvider value={{ core, dialog, state, stateAttrMap: AlertDialogDataAttrs }}>\n      {children}\n    </AlertDialogContextProvider>\n  );\n}\n\nexport namespace AlertDialogRoot {\n  export type Props = AlertDialogRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;AAqBA,SAAgB,gBAAgB,EAC9B,MAAM,gBACN,cAAc,gBAAgB,aAAa,aAC3C,cAAc,kBACd,sBAAsB,0BACtB,YACkC;CAClC,MAAM,CAAC,QAAQ,eAAe,IAAI,iBAAiB,CAAC;CAEpD,MAAM,eAAe,mBAAmB;CAExC,MAAM,kBAAkB,aAAa,iBAAiB;CACtD,MAAM,0BAA0B,aAAa,yBAAyB;CAEtE,MAAM,CAAC,UAAU,eAAe;EAC9B,MAAM,WAAW,kBAAkB;GACjC,YAAY,kBAAkB;GAC9B,eAAe,aAAsB;AACnC,oBAAgB,UAAU,SAAS;;GAErC,uBAAuB,aAAsB;AAC3C,4BAAwB,UAAU,SAAS;;GAE9C,CAAC;AAEF,MAAI,CAAC,gBAAgB,YACnB,UAAS,MAAM;AAGjB,SAAO;GACP;CAEF,MAAM,UAAU,UAAU,sBAAsB;CAChD,MAAM,gBAAgB,UAAU,qBAAqB;AAErD,MAAK,WAAW,QAAQ;AACxB,MAAK,iBAAiB,cAAc;AAGpC,iBAAgB;AACd,MAAI,mBAAmB,OAAW;EAElC,MAAM,EAAE,QAAQ,cAAc,OAAO,MAAM;AAC3C,MAAI,mBAAmB,UAAW;AAElC,MAAI,eACF,QAAO,MAAM;MAEb,QAAO,OAAO;IAEf,CAAC,gBAAgB,OAAO,CAAC;AAE5B,YAAW,OAAO;CAElB,MAAM,QAAQ,YAAY,OAAO,MAAM;AACvC,MAAK,SAAS,MAAM;AAGpB,QACE,oBAAC;EAA2B,OAAO;GAAE;GAAM;GAAQ,OAHvC,KAAK,UAAU;GAG+B,cAAc;GAAsB;EAC3F;GAC0B"}

package/dist/dev/ui/alert-dialog/alert-dialog-title.d.ts

@@ -0,0 +1,14 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as react from "react";
+import { AlertDialogCore } from "@videojs/core";
+
+//#region src/ui/alert-dialog/alert-dialog-title.d.ts
+interface AlertDialogTitleProps extends UIComponentProps<'h2', AlertDialogCore.State> {}
+declare const AlertDialogTitle: react.ForwardRefExoticComponent<AlertDialogTitleProps>;
+declare namespace AlertDialogTitle {
+  type Props = AlertDialogTitleProps;
+  type State = AlertDialogCore.State;
+}
+//#endregion
+export { AlertDialogTitle, AlertDialogTitleProps };
+//# sourceMappingURL=alert-dialog-title.d.ts.map

package/dist/dev/ui/alert-dialog/alert-dialog-title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-title.d.ts","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-title.tsx"],"mappings":";;;;;UAQiB,qBAAA,SAA8B,gBAAA,OAAuB,eAAA,CAAgB,KAAA;AAAA,cAEzE,gBAAA,EAAgB,KAAA,CAAA,yBAAA,CAAA,qBAAA;AAAA,kBAOZ,gBAAA;EAAA,KACH,KAAA,GAAQ,qBAAA;EAAA,KACR,KAAA,GAAQ,eAAA,CAAgB,KAAA;AAAA"}

package/dist/dev/ui/alert-dialog/alert-dialog-title.js

@@ -0,0 +1,16 @@
+'use client';
+
+import { useAlertDialogContext } from "./context.js";
+import { createContextPart } from "../create-context-part.js";
+
+//#region src/ui/alert-dialog/alert-dialog-title.tsx
+const AlertDialogTitle = createContextPart({
+	displayName: "AlertDialogTitle",
+	tag: "h2",
+	useContext: useAlertDialogContext,
+	getProps: (state) => ({ id: state.titleId })
+});
+
+//#endregion
+export { AlertDialogTitle };
+//# sourceMappingURL=alert-dialog-title.js.map

package/dist/dev/ui/alert-dialog/alert-dialog-title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-title.js","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-title.tsx"],"sourcesContent":["'use client';\n\nimport type { AlertDialogCore } from '@videojs/core';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createContextPart } from '../create-context-part';\nimport { useAlertDialogContext } from './context';\n\nexport interface AlertDialogTitleProps extends UIComponentProps<'h2', AlertDialogCore.State> {}\n\nexport const AlertDialogTitle = createContextPart<AlertDialogTitleProps, AlertDialogCore.State>({\n  displayName: 'AlertDialogTitle',\n  tag: 'h2',\n  useContext: useAlertDialogContext,\n  getProps: (state) => ({ id: state.titleId }),\n});\n\nexport namespace AlertDialogTitle {\n  export type Props = AlertDialogTitleProps;\n  export type State = AlertDialogCore.State;\n}\n"],"mappings":";;;;;;AAUA,MAAa,mBAAmB,kBAAgE;CAC9F,aAAa;CACb,KAAK;CACL,YAAY;CACZ,WAAW,WAAW,EAAE,IAAI,MAAM,SAAS;CAC5C,CAAC"}

package/dist/dev/ui/alert-dialog/context.d.ts

@@ -0,0 +1,14 @@
+import { AlertDialogApi } from "@videojs/core/dom";
+import { AlertDialogCore, StateAttrMap as StateAttrMap$1 } from "@videojs/core";
+
+//#region src/ui/alert-dialog/context.d.ts
+interface AlertDialogContextValue {
+  core: AlertDialogCore;
+  dialog: AlertDialogApi;
+  state: AlertDialogCore.State;
+  stateAttrMap: StateAttrMap$1<AlertDialogCore.State>;
+}
+declare function useAlertDialogContext(): AlertDialogContextValue;
+//#endregion
+export { AlertDialogContextValue, useAlertDialogContext };
+//# sourceMappingURL=context.d.ts.map

package/dist/dev/ui/alert-dialog/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../../../src/ui/alert-dialog/context.tsx"],"mappings":";;;;UAMiB,uBAAA;EACf,IAAA,EAAM,eAAA;EACN,MAAA,EAAQ,cAAA;EACR,KAAA,EAAO,eAAA,CAAgB,KAAA;EACvB,YAAA,EAAc,cAAA,CAAa,eAAA,CAAgB,KAAA;AAAA;AAAA,iBAO7B,qBAAA,CAAA,GAAyB,uBAAA"}

package/dist/dev/ui/alert-dialog/context.js

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

package/dist/dev/ui/alert-dialog/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/alert-dialog/context.tsx"],"sourcesContent":["'use client';\n\nimport type { AlertDialogCore, StateAttrMap } from '@videojs/core';\nimport type { AlertDialogApi } from '@videojs/core/dom';\nimport { createContext, useContext } from 'react';\n\nexport interface AlertDialogContextValue {\n  core: AlertDialogCore;\n  dialog: AlertDialogApi;\n  state: AlertDialogCore.State;\n  stateAttrMap: StateAttrMap<AlertDialogCore.State>;\n}\n\nconst AlertDialogContext = createContext<AlertDialogContextValue | null>(null);\n\nexport const AlertDialogContextProvider = AlertDialogContext.Provider;\n\nexport function useAlertDialogContext(): AlertDialogContextValue {\n  const ctx = useContext(AlertDialogContext);\n  if (!ctx) throw new Error('AlertDialog compound components must be used within an AlertDialog.Root');\n  return ctx;\n}\n"],"mappings":";;;;;AAaA,MAAM,qBAAqB,cAA8C,KAAK;AAE9E,MAAa,6BAA6B,mBAAmB;AAE7D,SAAgB,wBAAiD;CAC/D,MAAM,MAAM,WAAW,mBAAmB;AAC1C,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,0EAA0E;AACpG,QAAO"}

package/dist/dev/ui/alert-dialog/index.d.ts

@@ -0,0 +1,3 @@
+import { AlertDialogContextValue, useAlertDialogContext } from "./context.js";
+import { index_parts_d_exports } from "./index.parts.js";
+export { index_parts_d_exports as AlertDialog, type AlertDialogContextValue, useAlertDialogContext };

package/dist/dev/ui/alert-dialog/index.js

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

package/dist/dev/ui/alert-dialog/index.parts.d.ts

@@ -0,0 +1,13 @@
+import { AlertDialogClose, AlertDialogCloseProps } from "./alert-dialog-close.js";
+import { AlertDialogDescription, AlertDialogDescriptionProps } from "./alert-dialog-description.js";
+import { AlertDialogPopup, AlertDialogPopupProps } from "./alert-dialog-popup.js";
+import { AlertDialogRoot, AlertDialogRootProps } from "./alert-dialog-root.js";
+import { AlertDialogTitle, AlertDialogTitleProps } from "./alert-dialog-title.js";
+
+//#region src/ui/alert-dialog/index.parts.d.ts
+declare namespace index_parts_d_exports {
+  export { AlertDialogClose as Close, AlertDialogCloseProps as CloseProps, AlertDialogDescription as Description, AlertDialogDescriptionProps as DescriptionProps, AlertDialogPopup as Popup, AlertDialogPopupProps as PopupProps, AlertDialogRoot as Root, AlertDialogRootProps as RootProps, AlertDialogTitle as Title, AlertDialogTitleProps as TitleProps };
+}
+//#endregion
+export { index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

package/dist/dev/ui/alert-dialog/index.parts.d.ts.map

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

package/dist/dev/ui/alert-dialog/index.parts.js

@@ -0,0 +1,19 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { AlertDialogClose } from "./alert-dialog-close.js";
+import { AlertDialogDescription } from "./alert-dialog-description.js";
+import { AlertDialogPopup } from "./alert-dialog-popup.js";
+import { AlertDialogRoot } from "./alert-dialog-root.js";
+import { AlertDialogTitle } from "./alert-dialog-title.js";
+
+//#region src/ui/alert-dialog/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Close: () => AlertDialogClose,
+	Description: () => AlertDialogDescription,
+	Popup: () => AlertDialogPopup,
+	Root: () => AlertDialogRoot,
+	Title: () => AlertDialogTitle
+});
+
+//#endregion
+export { index_parts_exports };
+//# sourceMappingURL=index.parts.js.map

package/dist/dev/ui/alert-dialog/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/alert-dialog/index.parts.ts"],"sourcesContent":["export { AlertDialogClose as Close, type AlertDialogCloseProps as CloseProps } from './alert-dialog-close';\nexport {\n  AlertDialogDescription as Description,\n  type AlertDialogDescriptionProps as DescriptionProps,\n} from './alert-dialog-description';\nexport { AlertDialogPopup as Popup, type AlertDialogPopupProps as PopupProps } from './alert-dialog-popup';\nexport { AlertDialogRoot as Root, type AlertDialogRootProps as RootProps } from './alert-dialog-root';\nexport { AlertDialogTitle as Title, type AlertDialogTitleProps as TitleProps } from './alert-dialog-title';\n"],"mappings":""}

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

@@ -1,36 +1,15 @@
 import { UIComponentProps } from "../../utils/types.js";
 import * as react from "react";
+import { CaptionsButtonCore } from "@videojs/core";
 
 //#region src/ui/captions-button/captions-button.d.ts
-type CaptionsButtonState = {
-  active: boolean;
-};
-type CaptionButtonCoreProps = {
-  /** Custom label for the button. */label?: string | ((state: CaptionsButtonState) => string) | undefined; /** Whether the button is disabled. */
-  disabled?: boolean | undefined;
-};
-interface CaptionsButtonProps extends UIComponentProps<'button', CaptionsButtonState>, CaptionButtonCoreProps {}
-/**
- * A button that toggles captions.
- *
- * @example
- * ```tsx
- * <CaptionsButton />
- *
- * <CaptionsButton
- *   render={(props, state) => (
- *     <button {...props}>
- *       {state.active ? <CaptionsOnIcon /> : <CaptionsOffIcon />}
- *     </button>
- *   )}
- * />
- * ```
- */
-declare const CaptionsButton: react.ForwardRefExoticComponent<Omit<CaptionsButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+interface CaptionsButtonProps extends UIComponentProps<'button', CaptionsButtonCore.State>, CaptionsButtonCore.Props {}
+/** A button that toggles captions. */
+declare const CaptionsButton: react.ForwardRefExoticComponent<CaptionsButtonProps & react.RefAttributes<HTMLButtonElement>>;
 declare namespace CaptionsButton {
   type Props = CaptionsButtonProps;
-  type State = CaptionsButtonState;
+  type State = CaptionsButtonCore.State;
 }
 //#endregion
-export { CaptionsButton, CaptionsButtonProps, CaptionsButtonState };
+export { CaptionsButton, CaptionsButtonProps };
 //# sourceMappingURL=captions-button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"captions-button.d.ts","names":[],"sources":["../../../../src/ui/captions-button/captions-button.tsx"],"mappings":";;;;KAWY,mBAAA;EACV,MAAA;AAAA;AAAA,KAEG,sBAAA;EAH0B,mCAK7B,KAAA,cAAmB,KAAA,EAAO,mBAAA,0BAJ1B;EAMA,QAAA;AAAA;AAAA,UAOe,mBAAA,SAA4B,gBAAA,WAA2B,mBAAA,GAAsB,sBAAA;;;;;;;;AAA9F;;;;;;;;;cAoBa,cAAA,EAAc,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,mBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBA6BV,cAAA;EAAA,KACH,KAAA,GAAQ,mBAAA;EAAA,KACR,KAAA,GAAQ,mBAAA;AAAA"}
+{"version":3,"file":"captions-button.d.ts","names":[],"sources":["../../../../src/ui/captions-button/captions-button.tsx"],"mappings":";;;;;UAQiB,mBAAA,SACP,gBAAA,WAA2B,kBAAA,CAAmB,KAAA,GACpD,kBAAA,CAAmB,KAAA;;cAGV,cAAA,EAAc,KAAA,CAAA,yBAAA,CAAA,mBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBAQV,cAAA;EAAA,KACH,KAAA,GAAQ,mBAAA;EAAA,KACR,KAAA,GAAQ,kBAAA,CAAmB,KAAA;AAAA"}

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

@@ -1,34 +1,17 @@
 'use client';
 
-import { useButton } from "../hooks/use-button.js";
-import { forwardRef, useState } from "react";
+import { createMediaButton } from "../create-media-button.js";
+import { selectTextTrack } from "@videojs/core/dom";
+import { CaptionsButtonCore, CaptionsButtonDataAttrs } from "@videojs/core";
 
 //#region src/ui/captions-button/captions-button.tsx
-/**
-* A button that toggles captions.
-*
-* @example
-* ```tsx
-* <CaptionsButton />
-*
-* <CaptionsButton
-*   render={(props, state) => (
-*     <button {...props}>
-*       {state.active ? <CaptionsOnIcon /> : <CaptionsOffIcon />}
-*     </button>
-*   )}
-* />
-* ```
-*/
-const CaptionsButton = forwardRef(function CaptionsButton(componentProps, forwardedRef) {
-	const { render, className, style, label, disabled, ...elementProps } = componentProps;
-	const [isActive, setIsActive] = useState(false);
-	const { getButtonProps, buttonRef } = useButton({
-		displayName: "CaptionsButton",
-		onActivate: () => setIsActive((active) => !active),
-		isDisabled: () => disabled ?? false
-	});
-	return null;
+/** A button that toggles captions. */
+const CaptionsButton = createMediaButton({
+	displayName: "CaptionsButton",
+	core: CaptionsButtonCore,
+	stateAttrMap: CaptionsButtonDataAttrs,
+	selector: selectTextTrack,
+	action: (core, state) => core.toggle(state)
 });
 
 //#endregion

package/dist/dev/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\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"}
+{"version":3,"file":"captions-button.js","names":[],"sources":["../../../../src/ui/captions-button/captions-button.tsx"],"sourcesContent":["'use client';\n\nimport { CaptionsButtonCore, CaptionsButtonDataAttrs } from '@videojs/core';\nimport { selectTextTrack } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface CaptionsButtonProps\n  extends UIComponentProps<'button', CaptionsButtonCore.State>,\n    CaptionsButtonCore.Props {}\n\n/** A button that toggles captions. */\nexport const CaptionsButton = createMediaButton<CaptionsButtonCore, CaptionsButtonProps>({\n  displayName: 'CaptionsButton',\n  core: CaptionsButtonCore,\n  stateAttrMap: CaptionsButtonDataAttrs,\n  selector: selectTextTrack,\n  action: (core, state) => core.toggle(state),\n});\n\nexport namespace CaptionsButton {\n  export type Props = CaptionsButtonProps;\n  export type State = CaptionsButtonCore.State;\n}\n"],"mappings":";;;;;;;;AAaA,MAAa,iBAAiB,kBAA2D;CACvF,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,MAAM;CAC5C,CAAC"}

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

@@ -1,2 +1,2 @@
-import { CaptionsButton, CaptionsButtonProps, CaptionsButtonState } from "./captions-button.js";
-export { CaptionsButton, type CaptionsButtonProps, type CaptionsButtonState };
+import { CaptionsButton, CaptionsButtonProps } from "./captions-button.js";
+export { CaptionsButton, type CaptionsButtonProps };

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

@@ -5,10 +5,11 @@ import { forwardRef } from "react";
 
 //#region src/ui/create-context-part.tsx
 function createContextPart(config) {
-	const { displayName, tag, useContext, staticProps } = config;
+	const { displayName, tag, useContext, staticProps, getProps } = config;
 	const Component = forwardRef(function ContextPart(componentProps, forwardedRef) {
 		const { render, className, style, ...elementProps } = componentProps;
 		const context = useContext();
+		const dynamicProps = getProps?.(context.state);
 		return renderElement(tag, {
 			render,
 			className,
@@ -17,7 +18,11 @@ function createContextPart(config) {
 			state: context.state,
 			stateAttrMap: context.stateAttrMap,
 			ref: forwardedRef,
-			props: staticProps ? [staticProps, elementProps] : [elementProps]
+			props: [
+				staticProps,
+				dynamicProps,
+				elementProps
+			].filter(Boolean)
 		});
 	});
 	Component.displayName = displayName;

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

@@ -1 +1 @@
-{"version":3,"file":"create-context-part.js","names":[],"sources":["../../../src/ui/create-context-part.tsx"],"sourcesContent":["'use client';\n\nimport type { StateAttrMap } from '@videojs/core';\nimport type { ForwardRefExoticComponent } from 'react';\nimport { forwardRef } from 'react';\nimport type { UIComponentProps } from '@/utils/types';\nimport type { renderElement as renderElementFn } from '../utils/use-render';\nimport { renderElement } from '../utils/use-render';\n\ninterface ContextPartConfig<Props extends object, State extends object> {\n  displayName: string;\n  tag: keyof React.JSX.IntrinsicElements;\n  useContext: () => { state: State; stateAttrMap: StateAttrMap<State> };\n  staticProps?: Partial<Props>;\n}\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"}
+{"version":3,"file":"create-context-part.js","names":[],"sources":["../../../src/ui/create-context-part.tsx"],"sourcesContent":["'use client';\n\nimport type { StateAttrMap } from '@videojs/core';\nimport type { ForwardRefExoticComponent } from 'react';\nimport { forwardRef } from 'react';\nimport type { UIComponentProps } from '@/utils/types';\nimport type { renderElement as renderElementFn } from '../utils/use-render';\nimport { renderElement } from '../utils/use-render';\n\ninterface ContextPartConfig<Props extends object, State extends object> {\n  displayName: string;\n  tag: keyof React.JSX.IntrinsicElements;\n  useContext: () => { state: State; stateAttrMap: StateAttrMap<State> };\n  staticProps?: Partial<Props>;\n  /** Derive props from state on each render (e.g. `id` from a state field). */\n  getProps?: (state: State) => Record<string, unknown>;\n}\n\nexport function createContextPart<Props extends UIComponentProps<any, any>, State extends object>(\n  config: ContextPartConfig<Props, State>\n): ForwardRefExoticComponent<Props> {\n  const { displayName, tag, useContext, staticProps, getProps } = config;\n\n  const Component = forwardRef<HTMLElement, Props>(function ContextPart(componentProps, forwardedRef) {\n    const { render, className, style, ...elementProps } = componentProps;\n    const context = useContext();\n    const dynamicProps = getProps?.(context.state);\n\n    return renderElement(tag, { render, className, style } as renderElementFn.ComponentProps<State>, {\n      state: context.state,\n      stateAttrMap: context.stateAttrMap,\n      ref: forwardedRef,\n      props: [staticProps, dynamicProps, elementProps].filter(Boolean),\n    });\n  });\n\n  Component.displayName = displayName;\n\n  return Component as ForwardRefExoticComponent<Props>;\n}\n"],"mappings":";;;;;;AAkBA,SAAgB,kBACd,QACkC;CAClC,MAAM,EAAE,aAAa,KAAK,YAAY,aAAa,aAAa;CAEhE,MAAM,YAAY,WAA+B,SAAS,YAAY,gBAAgB,cAAc;EAClG,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;EACtD,MAAM,UAAU,YAAY;EAC5B,MAAM,eAAe,WAAW,QAAQ,MAAM;AAE9C,SAAO,cAAc,KAAK;GAAE;GAAQ;GAAW;GAAO,EAA2C;GAC/F,OAAO,QAAQ;GACf,cAAc,QAAQ;GACtB,KAAK;GACL,OAAO;IAAC;IAAa;IAAc;IAAa,CAAC,OAAO,QAAQ;GACjE,CAAC;GACF;AAEF,WAAU,cAAc;AAExB,QAAO"}

package/dist/dev/ui/hooks/use-slider.d.ts

@@ -1,4 +1,4 @@
-import { SliderOptions, SliderRootProps, SliderThumbProps } from "@videojs/core/dom";
+import { SliderOptions, SliderRootProps, SliderRootStyle, SliderThumbProps } from "@videojs/core/dom";
 import { SliderInput, SliderState } from "@videojs/core";
 
 //#region src/ui/hooks/use-slider.d.ts
@@ -17,6 +17,7 @@ interface UseSliderReturnValue<State extends SliderState = SliderState> {
   rootRef: React.RefCallback<HTMLElement>;
   thumbRef: React.RefCallback<HTMLElement>;
   rootProps: SliderRootProps;
+  rootStyle: SliderRootStyle;
   thumbProps: SliderThumbProps;
 }
 /**

package/dist/dev/ui/hooks/use-slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-slider.d.ts","names":[],"sources":["../../../../src/ui/hooks/use-slider.ts"],"mappings":";;;;UAgBiB,gBAAA,eAA+B,WAAA,GAAc,WAAA,UACpD,IAAA,CACN,aAAA;EAUF,YAAA,GAAe,KAAA,EAAO,WAAA,KAAgB,KAAA;EACtC,WAAA;EACA,QAAA;EAd+B;EAgB/B,aAAA,KAAkB,UAAA,UAAoB,SAAA,UAAmB,SAAA;EAhBG;EAkB5D,UAAA,GAAa,KAAA,EAAO,KAAA,KAAU,MAAA;AAAA;AAAA,UAGf,oBAAA,eAAmC,WAAA,GAAc,WAAA;EAChE,KAAA,EAAO,KAAA;EACP,OAAA,EAAS,MAAA;EACT,OAAA,EAAS,KAAA,CAAM,WAAA,CAAY,WAAA;EAC3B,QAAA,EAAU,KAAA,CAAM,WAAA,CAAY,WAAA;EAC5B,SAAA,EAAW,eAAA;EACX,UAAA,EAAY,gBAAA;AAAA;;;;;;;;iBAUE,SAAA,eAAwB,WAAA,GAAc,WAAA,CAAA,CACpD,OAAA,EAAS,gBAAA,CAAiB,KAAA,IACzB,oBAAA,CAAqB,KAAA;AAAA,kBAkFP,SAAA;EAAA,KACH,OAAA,GAAU,gBAAA;EAAA,KACV,WAAA,GAAc,oBAAA;AAAA"}
+{"version":3,"file":"use-slider.d.ts","names":[],"sources":["../../../../src/ui/hooks/use-slider.ts"],"mappings":";;;;UAkBiB,gBAAA,eAA+B,WAAA,GAAc,WAAA,UACpD,IAAA,CACN,aAAA;EAUF,YAAA,GAAe,KAAA,EAAO,WAAA,KAAgB,KAAA;EACtC,WAAA;EACA,QAAA;EAd+B;EAgB/B,aAAA,KAAkB,UAAA,UAAoB,SAAA,UAAmB,SAAA;EAhBG;EAkB5D,UAAA,GAAa,KAAA,EAAO,KAAA,KAAU,MAAA;AAAA;AAAA,UAGf,oBAAA,eAAmC,WAAA,GAAc,WAAA;EAChE,KAAA,EAAO,KAAA;EACP,OAAA,EAAS,MAAA;EACT,OAAA,EAAS,KAAA,CAAM,WAAA,CAAY,WAAA;EAC3B,QAAA,EAAU,KAAA,CAAM,WAAA,CAAY,WAAA;EAC5B,SAAA,EAAW,eAAA;EACX,SAAA,EAAW,eAAA;EACX,UAAA,EAAY,gBAAA;AAAA;;;;;;;;iBAUE,SAAA,eAAwB,WAAA,GAAc,WAAA,CAAA,CACpD,OAAA,EAAS,gBAAA,CAAiB,KAAA,IACzB,oBAAA,CAAqB,KAAA;AAAA,kBAoEP,SAAA;EAAA,KACH,OAAA,GAAU,gBAAA;EAAA,KACV,WAAA,GAAc,oBAAA;AAAA"}

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

@@ -1,10 +1,11 @@
 'use client';
 
-import { useForceRender } from "../../utils/use-force-render.js";
+import { useDestroy } from "../../utils/use-destroy.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { useForceRender } from "../../utils/use-force-render.js";
 import { createSlider } from "@videojs/core/dom";
 import { useSnapshot } from "@videojs/store/react";
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
 import { isRTL } from "@videojs/utils/dom";
 
 //#region src/ui/hooks/use-slider.ts
@@ -31,34 +32,22 @@ function useSlider(options) {
 			getStepPercent: () => optionsRef.current.getStepPercent(),
 			getLargeStepPercent: () => optionsRef.current.getLargeStepPercent(),
 			commitThrottle: optionsRef.current.commitThrottle,
+			adjustPercent: optionsRef.current.adjustPercent,
 			onValueChange: (percent) => optionsRef.current.onValueChange?.(percent),
 			onValueCommit: (percent) => optionsRef.current.onValueCommit?.(percent),
 			onDragStart: () => optionsRef.current.onDragStart?.(),
 			onDragEnd: () => optionsRef.current.onDragEnd?.()
 		});
 	});
-	useEffect(() => () => slider.destroy(), [slider]);
+	useDestroy(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),
+		cssVars: options.getCSSVars(slider.adjustForAlignment(state)),
 		rootRef: useCallback((element) => {
 			rootElementRef.current = element;
 		}, []),
@@ -66,6 +55,7 @@ function useSlider(options) {
 			thumbElementRef.current = element;
 		}, []),
 		rootProps: slider.rootProps,
+		rootStyle: slider.rootStyle,
 		thumbProps: slider.thumbProps
 	};
 }