@lobehub/ui 6.0.0-beta.2 → 6.0.0-beta.4

package/es/Accordion/style.d.mts

@@ -2,13 +2,13 @@ import "@stylexjs/stylex";
 //#region src/Accordion/style.d.ts
 export declare const accordionStyles: {
   panel: string;
+  header: string;
   action: string;
   content: string;
   trigger: string;
-  header: string;
-  indicator: string;
-  root: string;
   item: string;
+  root: string;
+  indicator: string;
   itemOutlined: string;
   rootOutlined: string;
   actionAlwaysVisible: string;

package/es/AutoComplete/style.d.mts

@@ -42,7 +42,7 @@ declare const styleArrays: {
   }> | Readonly<{
     readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
     readonly cursor: stylex.StyleXClassNameFor<"cursor", "default">;
-    readonly display: stylex.StyleXClassNameFor<"display", "flex" | "none">;
+    readonly display: stylex.StyleXClassNameFor<"display", "none" | "flex">;
   }>)[];
   item: Readonly<{
     readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;

package/es/Tabs/style.d.mts

@@ -5,8 +5,8 @@ export declare const tabsStyles: {
   panel: string;
   tab: string;
   list: string;
-  indicator: string;
   root: string;
+  indicator: string;
   indicatorPoint: string;
   indicatorRounded: string;
   indicatorSquare: string;

package/es/Video/Video.mjs

@@ -0,0 +1,46 @@
+"use client";
+import { useVideo } from "./useVideo.mjs";
+import Caption from "./parts/Caption.mjs";
+import CenterPlay from "./parts/CenterPlay.mjs";
+import Timeline from "./parts/Timeline.mjs";
+import Controls from "./parts/Controls.mjs";
+import Frame from "./parts/Frame.mjs";
+import LoadError from "./parts/LoadError.mjs";
+import Root from "./parts/Root.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/Video/Video.tsx
+const Overlay = ({ render }) => /* @__PURE__ */ jsx(Fragment, { children: render(useVideo()) });
+const Video = ({ className, classNames, frameStep, overlay, style, styles: customStyles, thumbnails = true, ...rest }) => /* @__PURE__ */ jsx(Root, {
+	className: clsx(className, classNames?.root),
+	style: {
+		...customStyles?.root,
+		...style
+	},
+	...rest,
+	children: /* @__PURE__ */ jsxs(Frame, {
+		className: classNames?.frame,
+		style: customStyles?.frame,
+		children: [
+			overlay && /* @__PURE__ */ jsx(Overlay, { render: overlay }),
+			/* @__PURE__ */ jsx(Caption, {}),
+			/* @__PURE__ */ jsx(CenterPlay, {}),
+			/* @__PURE__ */ jsx(Controls, {
+				className: classNames?.controls,
+				frameStep,
+				style: customStyles?.controls,
+				children: /* @__PURE__ */ jsx(Timeline, {
+					className: classNames?.timeline,
+					style: customStyles?.timeline,
+					thumbnails
+				})
+			}),
+			/* @__PURE__ */ jsx(LoadError, {})
+		]
+	})
+});
+Video.displayName = "Video";
+//#endregion
+export { Video as default };
+
+//# sourceMappingURL=Video.mjs.map

package/es/Video/Video.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Video.mjs","names":[],"sources":["../../src/Video/Video.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\n\nimport Caption from './parts/Caption';\nimport CenterPlay from './parts/CenterPlay';\nimport Controls from './parts/Controls';\nimport Frame from './parts/Frame';\nimport LoadError from './parts/LoadError';\nimport Root from './parts/Root';\nimport Timeline from './parts/Timeline';\nimport type { VideoProps, VideoState } from './type';\nimport { useVideo } from './useVideo';\n\nconst Overlay = ({ render }: { render: (state: VideoState) => React.ReactNode }) => (\n  <>{render(useVideo())}</>\n);\n\nconst Video = ({\n  className,\n  classNames,\n  frameStep,\n  overlay,\n  style,\n  styles: customStyles,\n  thumbnails = true,\n  ...rest\n}: VideoProps) => (\n  <Root\n    className={clsx(className, classNames?.root)}\n    style={{ ...customStyles?.root, ...style }}\n    {...rest}\n  >\n    <Frame className={classNames?.frame} style={customStyles?.frame}>\n      {overlay && <Overlay render={overlay} />}\n      <Caption />\n      <CenterPlay />\n      <Controls\n        className={classNames?.controls}\n        frameStep={frameStep}\n        style={customStyles?.controls}\n      >\n        <Timeline\n          className={classNames?.timeline}\n          style={customStyles?.timeline}\n          thumbnails={thumbnails}\n        />\n      </Controls>\n      <LoadError />\n    </Frame>\n  </Root>\n);\n\nVideo.displayName = 'Video';\n\nexport default Video;\n"],"mappings":";;;;;;;;;;;;AAcA,MAAM,WAAW,EAAE,aACjB,oBAAA,UAAA,EAAA,UAAG,OAAO,SAAS,CAAC,EAAI,CAAA;AAG1B,MAAM,SAAS,EACb,WACA,YACA,WACA,SACA,OACA,QAAQ,cACR,aAAa,MACb,GAAG,WAEH,oBAAC,MAAD;CACE,WAAW,KAAK,WAAW,YAAY,IAAI;CAC3C,OAAO;EAAE,GAAG,cAAc;EAAM,GAAG;CAAM;CACzC,GAAI;CAEJ,UAAA,qBAAC,OAAD;EAAO,WAAW,YAAY;EAAO,OAAO,cAAc;EAA1D,UAAA;GACG,WAAW,oBAAC,SAAD,EAAS,QAAQ,QAAU,CAAA;GACvC,oBAAC,SAAD,CAAU,CAAA;GACV,oBAAC,YAAD,CAAa,CAAA;GACb,oBAAC,UAAD;IACE,WAAW,YAAY;IACZ;IACX,OAAO,cAAc;IAErB,UAAA,oBAAC,UAAD;KACE,WAAW,YAAY;KACvB,OAAO,cAAc;KACT;IACb,CAAA;GACO,CAAA;GACV,oBAAC,WAAD,CAAY,CAAA;EACP;;AACH,CAAA;AAGR,MAAM,cAAc"}

package/es/Video/context.mjs

@@ -0,0 +1,14 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/Video/context.ts
+const VideoContext = createContext(null);
+const useVideoContext = () => {
+	const value = use(VideoContext);
+	if (!value) throw new Error("Video parts must be rendered inside <Video.Root>.");
+	return value;
+};
+const FrameContext = createContext(null);
+//#endregion
+export { FrameContext, VideoContext, useVideoContext };
+
+//# sourceMappingURL=context.mjs.map

package/es/Video/context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.mjs","names":[],"sources":["../../src/Video/context.ts"],"sourcesContent":["'use client';\n\nimport { createContext, use } from 'react';\n\nimport type { VideoStore } from './store';\nimport type { VideoMarker, VideoMediaProps, VideoSection } from './type';\n\nexport interface VideoConfig {\n  fps: number;\n  markers: VideoMarker[];\n  onMarkerClick?: (marker: VideoMarker) => void;\n  onRetry?: () => Promise<unknown> | void;\n  playbackRates?: number[];\n  sections: VideoSection[];\n}\n\nexport interface VideoContextValue {\n  config: VideoConfig;\n  media: VideoMediaProps;\n  store: VideoStore;\n}\n\nexport const VideoContext = createContext<VideoContextValue | null>(null);\n\nexport const useVideoContext = () => {\n  const value = use(VideoContext);\n  if (!value) throw new Error('Video parts must be rendered inside <Video.Root>.');\n  return value;\n};\n\nexport interface FrameContextValue {\n  hold: (held: boolean) => void;\n  overlay: boolean;\n  setOverlay: (overlay: boolean) => void;\n  visible: boolean;\n}\n\nexport const FrameContext = createContext<FrameContextValue | null>(null);\n"],"mappings":";;;AAsBA,MAAa,eAAe,cAAwC,IAAI;AAExE,MAAa,wBAAwB;CACnC,MAAM,QAAQ,IAAI,YAAY;CAC9B,IAAI,CAAC,OAAO,MAAM,IAAI,MAAM,mDAAmD;CAC/E,OAAO;AACT;AASA,MAAa,eAAe,cAAwC,IAAI"}

package/es/Video/index.d.mts

@@ -1,43 +1,27 @@
-import { FlexboxProps } from "../Flex/type.mjs";
-import "../Flex/index.mjs";
-import { VideoProps as VideoProps$1 } from "../types/index.mjs";
-import { CSSProperties, Ref } from "react";
+import { VideoCaptionProps, VideoControlsProps, VideoFrameProps, VideoMarker, VideoMarkerColor, VideoMediaProps, VideoPlayer, VideoProps, VideoRootProps, VideoSection, VideoSectionListProps, VideoState, VideoStatus, VideoTimelineProps } from "./type.mjs";
+import Caption from "./parts/Caption.mjs";
+import CenterPlay from "./parts/CenterPlay.mjs";
+import Controls from "./parts/Controls.mjs";
+import Frame from "./parts/Frame.mjs";
+import LoadError from "./parts/LoadError.mjs";
+import Root from "./parts/Root.mjs";
+import SectionList from "./parts/SectionList.mjs";
+import Timeline from "./parts/Timeline.mjs";
+import { useVideo, useVideoPlayer, useVideoState } from "./useVideo.mjs";
+import { ReactNode } from "react";
 //#region src/Video/index.d.ts
-export interface VideoProps extends VideoProps$1, Pick<FlexboxProps, 'width' | 'height'> {
-  autoPlay?: boolean;
-  classNames?: {
-    mask?: string;
-    video?: string;
-    wrapper?: string;
-  };
-  isLoading?: boolean;
-  loop?: boolean;
-  maxHeight?: number | string;
-  maxWidth?: number | string;
-  minHeight?: number | string;
-  minWidth?: number | string;
-  muted?: HTMLVideoElement['muted'];
-  onEnded?: VideoProps$1['onEnded'];
-  onMouseEnter?: VideoProps$1['onMouseEnter'];
-  onMouseLeave?: VideoProps$1['onMouseLeave'];
-  onPause?: VideoProps$1['onPause'];
-  onPlay?: VideoProps$1['onPlay'];
-  onPlaying?: VideoProps$1['onPlaying'];
-  onProgress?: VideoProps$1['onProgress'];
-  poster?: string;
-  preload?: HTMLVideoElement['preload'];
-  preview?: boolean;
-  ref?: Ref<HTMLDivElement>;
-  size?: number | string;
-  src: string;
-  styles?: {
-    mask?: CSSProperties;
-    video?: CSSProperties;
-    wrapper?: CSSProperties;
-  };
-  variant?: 'borderless' | 'filled' | 'outlined';
+export interface IVideo {
+  (props: VideoProps): ReactNode;
+  Caption: typeof Caption;
+  CenterPlay: typeof CenterPlay;
+  Controls: typeof Controls;
+  Frame: typeof Frame;
+  LoadError: typeof LoadError;
+  Root: typeof Root;
+  SectionList: typeof SectionList;
+  Timeline: typeof Timeline;
 }
-declare const Video: import("react").NamedExoticComponent<VideoProps>;
+declare const Video: IVideo;
 //#endregion
-export { Video as default };
+export { type VideoCaptionProps, type VideoControlsProps, type VideoFrameProps, type VideoMarker, type VideoMarkerColor, type VideoMediaProps, type VideoPlayer, type VideoProps, type VideoRootProps, type VideoSection, type VideoSectionListProps, type VideoState, type VideoStatus, type VideoTimelineProps, Video as default, useVideo, useVideoPlayer, useVideoState };
 //# sourceMappingURL=index.d.mts.map

package/es/Video/index.mjs

@@ -1,114 +1,24 @@
-"use client";
-import { styleProps } from "../styles/stylex/props.mjs";
-import { cssVar } from "../styles/stylex/cssVar.stylex.mjs";
-import FlexBasic_default from "../Flex/FlexBasic.mjs";
-import { stylish } from "../styles/stylex/stylish.mjs";
-import ActionIcon from "../ActionIcon/ActionIcon.mjs";
-import Skeleton from "../Skeleton/index.mjs";
-import { videoMarker } from "./marker.stylex.mjs";
-import { styles } from "./style.mjs";
-import { memo, useMemo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import { PlayIcon } from "lucide-react";
-//#region src/Video/index.tsx
-const variantStyles = {
-	borderless: stylish.variantBorderlessWithoutHover,
-	filled: styles.filled,
-	outlined: stylish.variantOutlinedWithoutHover
-};
-const Video = memo(({ ref, preload = "auto", src, style, classNames, className, maxHeight = "100%", maxWidth = "100%", minHeight, minWidth, onEnded, onPause, onPlay, onPlaying, width, height, onMouseEnter, styles: customStyles, onMouseLeave, preview = true, isLoading, variant = "filled", autoPlay, ...rest }) => {
-	const [isPlaying, setIsPlaying] = useState(false);
-	const [showControls, setShowControls] = useState(false);
-	const cssVariables = useMemo(() => {
-		const vars = {};
-		if (maxHeight !== void 0) vars["--video-max-height"] = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
-		if (maxWidth !== void 0) vars["--video-max-width"] = typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth;
-		if (minHeight !== void 0) vars["--video-min-height"] = typeof minHeight === "number" ? `${minHeight}px` : minHeight;
-		if (minWidth !== void 0) vars["--video-min-width"] = typeof minWidth === "number" ? `${minWidth}px` : minWidth;
-		return vars;
-	}, [
-		maxHeight,
-		maxWidth,
-		minHeight,
-		minWidth
-	]);
-	if (isLoading) return /* @__PURE__ */ jsx(Skeleton, {
-		radius: cssVar.borderRadiusLG,
-		style: {
-			height,
-			maxHeight,
-			maxWidth,
-			minHeight,
-			minWidth,
-			width
-		}
-	});
-	return /* @__PURE__ */ jsxs(FlexBasic_default, {
-		height,
-		ref,
-		width,
-		className: styleProps([
-			styles.root,
-			variantStyles[variant],
-			videoMarker
-		], clsx(className, classNames?.wrapper)).className,
-		style: {
-			...cssVariables,
-			...style,
-			...customStyles?.wrapper
-		},
-		children: [preview && !isPlaying && /* @__PURE__ */ jsx(FlexBasic_default, {
-			align: "center",
-			justify: "center",
-			...styleProps(styles.mask, clsx("lobe-video-mask", classNames?.mask), customStyles?.mask),
-			children: /* @__PURE__ */ jsx(ActionIcon, {
-				color: "#fff",
-				icon: PlayIcon,
-				variant: "filled"
-			})
-		}), /* @__PURE__ */ jsx("video", {
-			autoPlay,
-			controls: showControls,
-			height,
-			preload,
-			width,
-			...styleProps(styles.video, classNames?.video, {
-				height: "auto",
-				maxWidth: "100%",
-				...customStyles?.video
-			}),
-			onEnded: (e) => {
-				setIsPlaying(false);
-				onEnded?.(e);
-			},
-			onMouseEnter: (e) => {
-				setShowControls(true);
-				onMouseEnter?.(e);
-			},
-			onMouseLeave: (e) => {
-				setShowControls(false);
-				onMouseLeave?.(e);
-			},
-			onPause: (e) => {
-				setIsPlaying(false);
-				onPause?.(e);
-			},
-			onPlay: (e) => {
-				setIsPlaying(true);
-				onPlay?.(e);
-			},
-			onPlaying: (e) => {
-				setIsPlaying(true);
-				onPlaying?.(e);
-			},
-			...rest,
-			children: /* @__PURE__ */ jsx("source", { src })
-		})]
-	});
-});
-Video.displayName = "Video";
+import { useVideo, useVideoPlayer, useVideoState } from "./useVideo.mjs";
+import Caption from "./parts/Caption.mjs";
+import CenterPlay from "./parts/CenterPlay.mjs";
+import Timeline from "./parts/Timeline.mjs";
+import Controls from "./parts/Controls.mjs";
+import Frame from "./parts/Frame.mjs";
+import LoadError from "./parts/LoadError.mjs";
+import Root from "./parts/Root.mjs";
+import SectionList from "./parts/SectionList.mjs";
+import Video$1 from "./Video.mjs";
+//#region src/Video/index.ts
+const Video = Video$1;
+Video.Caption = Caption;
+Video.CenterPlay = CenterPlay;
+Video.Controls = Controls;
+Video.Frame = Frame;
+Video.LoadError = LoadError;
+Video.Root = Root;
+Video.SectionList = SectionList;
+Video.Timeline = Timeline;
 //#endregion
-export { Video as default };
+export { Video as default, useVideo, useVideoPlayer, useVideoState };
 
 //# sourceMappingURL=index.mjs.map

package/es/Video/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Flexbox"],"sources":["../../src/Video/index.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { PlayIcon } from 'lucide-react';\nimport { type CSSProperties, memo, type Ref, useMemo, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox, type FlexboxProps } from '@/Flex';\nimport Skeleton from '@/Skeleton';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\nimport { stylish } from '@/styles/stylex/stylish';\nimport { type VideoProps as VProps } from '@/types';\n\nimport { videoMarker } from './marker.stylex';\nimport { maskHoverCls, styles } from './style';\n\nconst variantStyles = {\n  borderless: stylish.variantBorderlessWithoutHover,\n  filled: styles.filled,\n  outlined: stylish.variantOutlinedWithoutHover,\n};\n\nexport interface VideoProps extends VProps, Pick<FlexboxProps, 'width' | 'height'> {\n  autoPlay?: boolean;\n  classNames?: {\n    mask?: string;\n    video?: string;\n    wrapper?: string;\n  };\n  isLoading?: boolean;\n  loop?: boolean;\n  maxHeight?: number | string;\n  maxWidth?: number | string;\n  minHeight?: number | string;\n  minWidth?: number | string;\n  muted?: HTMLVideoElement['muted'];\n  onEnded?: VProps['onEnded'];\n  onMouseEnter?: VProps['onMouseEnter'];\n  onMouseLeave?: VProps['onMouseLeave'];\n  onPause?: VProps['onPause'];\n  onPlay?: VProps['onPlay'];\n  onPlaying?: VProps['onPlaying'];\n  onProgress?: VProps['onProgress'];\n  poster?: string;\n  preload?: HTMLVideoElement['preload'];\n  preview?: boolean;\n  ref?: Ref<HTMLDivElement>;\n  size?: number | string;\n  src: string;\n  styles?: {\n    mask?: CSSProperties;\n    video?: CSSProperties;\n    wrapper?: CSSProperties;\n  };\n  variant?: 'borderless' | 'filled' | 'outlined';\n}\n\nconst Video = memo<VideoProps>(\n  ({\n    ref,\n    preload = 'auto',\n    src,\n    style,\n    classNames,\n    className,\n    maxHeight = '100%',\n    maxWidth = '100%',\n    minHeight,\n    minWidth,\n    onEnded,\n    onPause,\n    onPlay,\n    onPlaying,\n    width,\n    height,\n    onMouseEnter,\n    styles: customStyles,\n    onMouseLeave,\n    preview = true,\n    isLoading,\n    variant = 'filled',\n    autoPlay,\n    ...rest\n  }) => {\n    const [isPlaying, setIsPlaying] = useState(false);\n    const [showControls, setShowControls] = useState(false);\n\n    // Convert props to CSS variables\n    const cssVariables = useMemo<Record<string, string>>(() => {\n      const vars: Record<string, string> = {};\n      if (maxHeight !== undefined) {\n        vars['--video-max-height'] = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;\n      }\n      if (maxWidth !== undefined) {\n        vars['--video-max-width'] = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth;\n      }\n      if (minHeight !== undefined) {\n        vars['--video-min-height'] = typeof minHeight === 'number' ? `${minHeight}px` : minHeight;\n      }\n      if (minWidth !== undefined) {\n        vars['--video-min-width'] = typeof minWidth === 'number' ? `${minWidth}px` : minWidth;\n      }\n      return vars;\n    }, [maxHeight, maxWidth, minHeight, minWidth]);\n\n    if (isLoading)\n      return (\n        <Skeleton\n          radius={cssVar.borderRadiusLG}\n          style={{\n            height,\n            maxHeight,\n            maxWidth,\n            minHeight,\n            minWidth,\n            width,\n          }}\n        />\n      );\n\n    return (\n      <Flexbox\n        height={height}\n        ref={ref}\n        width={width}\n        className={\n          styleProps(\n            [styles.root, variantStyles[variant], videoMarker],\n            clsx(className, classNames?.wrapper),\n          ).className\n        }\n        style={{\n          ...cssVariables,\n          ...style,\n          ...customStyles?.wrapper,\n        }}\n      >\n        {preview && !isPlaying && (\n          <Flexbox\n            align={'center'}\n            justify={'center'}\n            {...styleProps(styles.mask, clsx(maskHoverCls, classNames?.mask), customStyles?.mask)}\n          >\n            <ActionIcon color={'#fff'} icon={PlayIcon} variant={'filled'} />\n          </Flexbox>\n        )}\n        <video\n          autoPlay={autoPlay}\n          controls={showControls}\n          height={height}\n          preload={preload}\n          width={width}\n          {...styleProps(styles.video, classNames?.video, {\n            height: 'auto',\n            maxWidth: '100%',\n            ...customStyles?.video,\n          })}\n          onEnded={(e) => {\n            setIsPlaying(false);\n            onEnded?.(e);\n          }}\n          onMouseEnter={(e) => {\n            setShowControls(true);\n            onMouseEnter?.(e);\n          }}\n          onMouseLeave={(e) => {\n            setShowControls(false);\n            onMouseLeave?.(e);\n          }}\n          onPause={(e) => {\n            setIsPlaying(false);\n            onPause?.(e);\n          }}\n          onPlay={(e) => {\n            setIsPlaying(true);\n            onPlay?.(e);\n          }}\n          onPlaying={(e) => {\n            setIsPlaying(true);\n            onPlaying?.(e);\n          }}\n          {...rest}\n        >\n          <source src={src} />\n        </video>\n      </Flexbox>\n    );\n  },\n);\n\nVideo.displayName = 'Video';\n\nexport default Video;\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAM,gBAAgB;CACpB,YAAY,QAAQ;CACpB,QAAQ,OAAO;CACf,UAAU,QAAQ;AACpB;AAqCA,MAAM,QAAQ,MACX,EACC,KACA,UAAU,QACV,KACA,OACA,YACA,WACA,YAAY,QACZ,WAAW,QACX,WACA,UACA,SACA,SACA,QACA,WACA,OACA,QACA,cACA,QAAQ,cACR,cACA,UAAU,MACV,WACA,UAAU,UACV,UACA,GAAG,WACC;CACJ,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAChD,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;CAGtD,MAAM,eAAe,cAAsC;EACzD,MAAM,OAA+B,CAAC;EACtC,IAAI,cAAc,KAAA,GAChB,KAAK,wBAAwB,OAAO,cAAc,WAAW,GAAG,UAAU,MAAM;EAElF,IAAI,aAAa,KAAA,GACf,KAAK,uBAAuB,OAAO,aAAa,WAAW,GAAG,SAAS,MAAM;EAE/E,IAAI,cAAc,KAAA,GAChB,KAAK,wBAAwB,OAAO,cAAc,WAAW,GAAG,UAAU,MAAM;EAElF,IAAI,aAAa,KAAA,GACf,KAAK,uBAAuB,OAAO,aAAa,WAAW,GAAG,SAAS,MAAM;EAE/E,OAAO;CACT,GAAG;EAAC;EAAW;EAAU;EAAW;CAAQ,CAAC;CAE7C,IAAI,WACF,OACE,oBAAC,UAAD;EACE,QAAQ,OAAO;EACf,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;EACF;CACD,CAAA;CAGL,OACE,qBAACA,mBAAD;EACU;EACH;EACE;EACP,WACE,WACE;GAAC,OAAO;GAAM,cAAc;GAAU;EAAW,GACjD,KAAK,WAAW,YAAY,OAAO,CACrC,CAAC,CAAC;EAEJ,OAAO;GACL,GAAG;GACH,GAAG;GACH,GAAG,cAAc;EACnB;EAdF,UAAA,CAgBG,WAAW,CAAC,aACX,oBAACA,mBAAD;GACE,OAAO;GACP,SAAS;GACT,GAAI,WAAW,OAAO,MAAM,KAAA,mBAAmB,YAAY,IAAI,GAAG,cAAc,IAAI;GAEpF,UAAA,oBAAC,YAAD;IAAY,OAAO;IAAQ,MAAM;IAAU,SAAS;GAAW,CAAA;EACxD,CAAA,GAEX,oBAAC,SAAD;GACY;GACV,UAAU;GACF;GACC;GACF;GACP,GAAI,WAAW,OAAO,OAAO,YAAY,OAAO;IAC9C,QAAQ;IACR,UAAU;IACV,GAAG,cAAc;GACnB,CAAC;GACD,UAAU,MAAM;IACd,aAAa,KAAK;IAClB,UAAU,CAAC;GACb;GACA,eAAe,MAAM;IACnB,gBAAgB,IAAI;IACpB,eAAe,CAAC;GAClB;GACA,eAAe,MAAM;IACnB,gBAAgB,KAAK;IACrB,eAAe,CAAC;GAClB;GACA,UAAU,MAAM;IACd,aAAa,KAAK;IAClB,UAAU,CAAC;GACb;GACA,SAAS,MAAM;IACb,aAAa,IAAI;IACjB,SAAS,CAAC;GACZ;GACA,YAAY,MAAM;IAChB,aAAa,IAAI;IACjB,YAAY,CAAC;GACf;GACA,GAAI;GAEJ,UAAA,oBAAC,UAAD,EAAa,IAAM,CAAA;EACd,CAAA,CACA;;AAEb,CACF;AAEA,MAAM,cAAc"}
+{"version":3,"file":"index.mjs","names":["VideoPreset"],"sources":["../../src/Video/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport Caption from './parts/Caption';\nimport CenterPlay from './parts/CenterPlay';\nimport Controls from './parts/Controls';\nimport Frame from './parts/Frame';\nimport LoadError from './parts/LoadError';\nimport Root from './parts/Root';\nimport SectionList from './parts/SectionList';\nimport Timeline from './parts/Timeline';\nimport type { VideoProps } from './type';\nimport VideoPreset from './Video';\n\nexport interface IVideo {\n  (props: VideoProps): ReactNode;\n  Caption: typeof Caption;\n  CenterPlay: typeof CenterPlay;\n  Controls: typeof Controls;\n  Frame: typeof Frame;\n  LoadError: typeof LoadError;\n  Root: typeof Root;\n  SectionList: typeof SectionList;\n  Timeline: typeof Timeline;\n}\n\nconst Video = VideoPreset as unknown as IVideo;\nVideo.Caption = Caption;\nVideo.CenterPlay = CenterPlay;\nVideo.Controls = Controls;\nVideo.Frame = Frame;\nVideo.LoadError = LoadError;\nVideo.Root = Root;\nVideo.SectionList = SectionList;\nVideo.Timeline = Timeline;\n\nexport default Video;\nexport type * from './type';\nexport { useVideo, useVideoPlayer, useVideoState } from './useVideo';\n"],"mappings":";;;;;;;;;;;AAyBA,MAAM,QAAQA;AACd,MAAM,UAAU;AAChB,MAAM,aAAa;AACnB,MAAM,WAAW;AACjB,MAAM,QAAQ;AACd,MAAM,YAAY;AAClB,MAAM,OAAO;AACb,MAAM,cAAc;AACpB,MAAM,WAAW"}

package/es/Video/parts/Caption.d.mts

@@ -0,0 +1,9 @@
+import { VideoCaptionProps } from "../type.mjs";
+//#region src/Video/parts/Caption.d.ts
+declare const Caption: {
+  ({ action, className, style }: VideoCaptionProps): import("react").JSX.Element | null;
+  displayName: string;
+};
+//#endregion
+export { Caption as default };
+//# sourceMappingURL=Caption.d.mts.map

package/es/Video/parts/Caption.mjs

@@ -0,0 +1,37 @@
+"use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import { FrameContext } from "../context.mjs";
+import { markerColor, styles } from "../style.mjs";
+import { useVideo } from "../useVideo.mjs";
+import { use } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Video/parts/Caption.tsx
+const Caption = ({ action, className, style }) => {
+	const frame = use(FrameContext);
+	const markers = useVideo((state) => state.captions ? state.activeMarkers : void 0);
+	if (!markers || markers.length === 0) return null;
+	const raised = Boolean(frame?.overlay && frame.visible);
+	return /* @__PURE__ */ jsx("div", {
+		"data-raised": String(raised),
+		"data-video-caption": "",
+		...styleProps([styles.caption, raised && styles.captionRaised], className, style),
+		onClick: (event) => event.stopPropagation(),
+		onPointerDown: (event) => event.stopPropagation(),
+		children: markers.map((marker, index) => /* @__PURE__ */ jsxs("div", {
+			...styleProps(styles.captionItem),
+			children: [(marker.label !== void 0 || action) && /* @__PURE__ */ jsxs("div", {
+				...styleProps(styles.captionTitle),
+				children: [
+					/* @__PURE__ */ jsx("span", { ...styleProps(styles.dot, void 0, { background: markerColor(marker.color) }) }),
+					marker.label,
+					action?.(marker)
+				]
+			}), /* @__PURE__ */ jsx("div", { children: marker.content })]
+		}, marker.key ?? `${marker.time}-${index}`))
+	});
+};
+Caption.displayName = "VideoCaption";
+//#endregion
+export { Caption as default };
+
+//# sourceMappingURL=Caption.mjs.map

package/es/Video/parts/Caption.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Caption.mjs","names":[],"sources":["../../../src/Video/parts/Caption.tsx"],"sourcesContent":["'use client';\n\nimport { use } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { FrameContext } from '../context';\nimport { markerColor, styles } from '../style';\nimport type { VideoCaptionProps } from '../type';\nimport { useVideo } from '../useVideo';\n\nconst Caption = ({ action, className, style }: VideoCaptionProps) => {\n  const frame = use(FrameContext);\n  const markers = useVideo((state) => (state.captions ? state.activeMarkers : undefined));\n  if (!markers || markers.length === 0) return null;\n  const raised = Boolean(frame?.overlay && frame.visible);\n\n  return (\n    <div\n      data-raised={String(raised)}\n      data-video-caption=\"\"\n      {...styleProps([styles.caption, raised && styles.captionRaised], className, style)}\n      onClick={(event) => event.stopPropagation()}\n      onPointerDown={(event) => event.stopPropagation()}\n    >\n      {markers.map((marker, index) => (\n        <div key={marker.key ?? `${marker.time}-${index}`} {...styleProps(styles.captionItem)}>\n          {(marker.label !== undefined || action) && (\n            <div {...styleProps(styles.captionTitle)}>\n              <span\n                {...styleProps(styles.dot, undefined, { background: markerColor(marker.color) })}\n              />\n              {marker.label}\n              {action?.(marker)}\n            </div>\n          )}\n          <div>{marker.content}</div>\n        </div>\n      ))}\n    </div>\n  );\n};\n\nCaption.displayName = 'VideoCaption';\n\nexport default Caption;\n"],"mappings":";;;;;;;;AAWA,MAAM,WAAW,EAAE,QAAQ,WAAW,YAA+B;CACnE,MAAM,QAAQ,IAAI,YAAY;CAC9B,MAAM,UAAU,UAAU,UAAW,MAAM,WAAW,MAAM,gBAAgB,KAAA,CAAU;CACtF,IAAI,CAAC,WAAW,QAAQ,WAAW,GAAG,OAAO;CAC7C,MAAM,SAAS,QAAQ,OAAO,WAAW,MAAM,OAAO;CAEtD,OACE,oBAAC,OAAD;EACE,eAAa,OAAO,MAAM;EAC1B,sBAAmB;EACnB,GAAI,WAAW,CAAC,OAAO,SAAS,UAAU,OAAO,aAAa,GAAG,WAAW,KAAK;EACjF,UAAU,UAAU,MAAM,gBAAgB;EAC1C,gBAAgB,UAAU,MAAM,gBAAgB;EAE/C,UAAA,QAAQ,KAAK,QAAQ,UACpB,qBAAC,OAAD;GAAmD,GAAI,WAAW,OAAO,WAAW;GAApF,UAAA,EACI,OAAO,UAAU,KAAA,KAAa,WAC9B,qBAAC,OAAD;IAAK,GAAI,WAAW,OAAO,YAAY;IAAvC,UAAA;KACE,oBAAC,QAAD,EACE,GAAI,WAAW,OAAO,KAAK,KAAA,GAAW,EAAE,YAAY,YAAY,OAAO,KAAK,EAAE,CAAC,EAChF,CAAA;KACA,OAAO;KACP,SAAS,MAAM;IACb;GAEP,CAAA,GAAA,oBAAC,OAAD,EAAA,UAAM,OAAO,QAAa,CAAA,CACvB;EAXK,GAAA,OAAO,OAAO,GAAG,OAAO,KAAK,GAAG,OAWrC,CACN;CACE,CAAA;AAET;AAEA,QAAQ,cAAc"}

package/es/Video/parts/CenterPlay.d.mts

@@ -0,0 +1,8 @@
+//#region src/Video/parts/CenterPlay.d.ts
+declare const CenterPlay: {
+  (): import("react").JSX.Element | null;
+  displayName: string;
+};
+//#endregion
+export { CenterPlay as default };
+//# sourceMappingURL=CenterPlay.d.mts.map

package/es/Video/parts/CenterPlay.mjs

@@ -0,0 +1,34 @@
+"use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import { useTranslation } from "../../i18n/useTranslation.mjs";
+import { useVideoContext } from "../context.mjs";
+import { styles } from "../style.mjs";
+import { useVideo } from "../useVideo.mjs";
+import video_default from "../../i18n/resources/en/video.mjs";
+import { jsx } from "react/jsx-runtime";
+import { Play } from "lucide-react";
+//#region src/Video/parts/CenterPlay.tsx
+const CenterPlay = () => {
+	const { store } = useVideoContext();
+	const { t } = useTranslation(video_default);
+	if (!useVideo((state) => state.paused && state.status === "ready" && state.time < .05)) return null;
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": t("video.play"),
+		type: "button",
+		...styleProps(styles.centerPlay),
+		onClick: (event) => {
+			event.stopPropagation();
+			store.play();
+		},
+		children: /* @__PURE__ */ jsx(Play, {
+			fill: "currentColor",
+			size: 24,
+			strokeWidth: 0
+		})
+	});
+};
+CenterPlay.displayName = "VideoCenterPlay";
+//#endregion
+export { CenterPlay as default };
+
+//# sourceMappingURL=CenterPlay.mjs.map

package/es/Video/parts/CenterPlay.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CenterPlay.mjs","names":["videoMessages"],"sources":["../../../src/Video/parts/CenterPlay.tsx"],"sourcesContent":["'use client';\n\nimport { Play } from 'lucide-react';\n\nimport videoMessages from '@/i18n/resources/en/video';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { useVideoContext } from '../context';\nimport { styles } from '../style';\nimport { useVideo } from '../useVideo';\n\nconst CenterPlay = () => {\n  const { store } = useVideoContext();\n  const { t } = useTranslation(videoMessages);\n  const show = useVideo((state) => state.paused && state.status === 'ready' && state.time < 0.05);\n  if (!show) return null;\n\n  return (\n    <button\n      aria-label={t('video.play')}\n      type=\"button\"\n      {...styleProps(styles.centerPlay)}\n      onClick={(event) => {\n        event.stopPropagation();\n        void store.play();\n      }}\n    >\n      <Play fill=\"currentColor\" size={24} strokeWidth={0} />\n    </button>\n  );\n};\n\nCenterPlay.displayName = 'VideoCenterPlay';\n\nexport default CenterPlay;\n"],"mappings":";;;;;;;;;;AAYA,MAAM,mBAAmB;CACvB,MAAM,EAAE,UAAU,gBAAgB;CAClC,MAAM,EAAE,MAAM,eAAeA,aAAa;CAE1C,IAAI,CADS,UAAU,UAAU,MAAM,UAAU,MAAM,WAAW,WAAW,MAAM,OAAO,GAClF,GAAG,OAAO;CAElB,OACE,oBAAC,UAAD;EACE,cAAY,EAAE,YAAY;EAC1B,MAAK;EACL,GAAI,WAAW,OAAO,UAAU;EAChC,UAAU,UAAU;GAClB,MAAM,gBAAgB;GACtB,MAAW,KAAK;EAClB;EAEA,UAAA,oBAAC,MAAD;GAAM,MAAK;GAAe,MAAM;GAAI,aAAa;EAAI,CAAA;CAC/C,CAAA;AAEZ;AAEA,WAAW,cAAc"}

package/es/Video/parts/Controls.d.mts

@@ -0,0 +1,9 @@
+import { VideoControlsProps } from "../type.mjs";
+//#region src/Video/parts/Controls.d.ts
+declare const Controls: {
+  ({ children, className, extra, frameStep, style }: VideoControlsProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { Controls as default };
+//# sourceMappingURL=Controls.d.mts.map

package/es/Video/parts/Controls.mjs

@@ -0,0 +1,128 @@
+"use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import { useTranslation } from "../../i18n/useTranslation.mjs";
+import { FrameContext, useVideoContext } from "../context.mjs";
+import { styles } from "../style.mjs";
+import { formatTime, frameOf } from "../time.mjs";
+import { useVideo } from "../useVideo.mjs";
+import video_default from "../../i18n/resources/en/video.mjs";
+import { useFullscreen } from "../useFullscreen.mjs";
+import PlayPauseIcon from "./PlayPauseIcon.mjs";
+import RateMenu from "./RateMenu.mjs";
+import SectionMenu from "./SectionMenu.mjs";
+import Timeline from "./Timeline.mjs";
+import { use, useLayoutEffect } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Captions, ChevronLeft, ChevronRight, Maximize, Minimize, Volume2, VolumeX } from "lucide-react";
+//#region src/Video/parts/Controls.tsx
+const BarButton = ({ active, children, label, onClick, pressed, shortcut }) => /* @__PURE__ */ jsx("button", {
+	"aria-label": label,
+	"aria-pressed": pressed,
+	title: shortcut ? `${label} (${shortcut})` : label,
+	type: "button",
+	...styleProps([styles.barButton, active && styles.barButtonActive]),
+	onClick,
+	children
+});
+const TimeReadout = () => {
+	const seconds = useVideo((state) => Math.floor(state.time));
+	const duration = useVideo((state) => state.duration);
+	return /* @__PURE__ */ jsx("span", {
+		...styleProps(styles.time, void 0, { marginInline: 6 }),
+		children: `${formatTime(seconds)} / ${formatTime(duration)}`
+	});
+};
+const FrameReadout = () => {
+	const { config } = useVideoContext();
+	const { t } = useTranslation(video_default);
+	const frame = useVideo((state) => frameOf(state.time, config.fps));
+	return /* @__PURE__ */ jsx("span", {
+		...styleProps(styles.frameNo, void 0, { marginInlineEnd: 6 }),
+		children: `${t("video.frame")} ${frame}`
+	});
+};
+const Controls = ({ children, className, extra, frameStep, style }) => {
+	const { config, store } = useVideoContext();
+	const frame = use(FrameContext);
+	const { t } = useTranslation(video_default);
+	const paused = useVideo((state) => state.paused);
+	const muted = useVideo((state) => state.muted);
+	const captions = useVideo((state) => state.captions);
+	const ready = useVideo((state) => state.status === "ready");
+	const fullscreen = useFullscreen(store);
+	const overlay = frame !== null;
+	useLayoutEffect(() => {
+		if (!frame) return;
+		frame.setOverlay(true);
+		return () => frame.setOverlay(false);
+	}, [frame?.setOverlay]);
+	const visible = !overlay || frame.visible;
+	const hasCaptions = config.markers.some((marker) => marker.content !== void 0 && marker.content !== null);
+	return /* @__PURE__ */ jsx("div", {
+		"data-video-controls": "",
+		"data-visible": String(visible),
+		...styleProps([
+			styles.controls,
+			overlay ? styles.controlsOverlay : styles.controlsBelow,
+			overlay && !visible && styles.controlsHidden
+		], className, style),
+		onClick: (event) => event.stopPropagation(),
+		onDoubleClick: (event) => event.stopPropagation(),
+		children: /* @__PURE__ */ jsxs("div", {
+			...styleProps(!ready && styles.disabled),
+			children: [children ?? /* @__PURE__ */ jsx(Timeline, {}), /* @__PURE__ */ jsxs("div", {
+				...styleProps(styles.row),
+				children: [
+					/* @__PURE__ */ jsx(BarButton, {
+						label: paused ? t("video.play") : t("video.pause"),
+						shortcut: "K",
+						onClick: store.toggle,
+						children: /* @__PURE__ */ jsx(PlayPauseIcon, { paused })
+					}),
+					/* @__PURE__ */ jsx(BarButton, {
+						label: muted ? t("video.unmute") : t("video.mute"),
+						shortcut: "M",
+						onClick: store.toggleMute,
+						children: muted ? /* @__PURE__ */ jsx(VolumeX, { size: 16 }) : /* @__PURE__ */ jsx(Volume2, { size: 16 })
+					}),
+					frameStep && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(BarButton, {
+						label: t("video.previousFrame"),
+						shortcut: ",",
+						onClick: () => store.step(-1),
+						children: /* @__PURE__ */ jsx(ChevronLeft, { size: 16 })
+					}), /* @__PURE__ */ jsx(BarButton, {
+						label: t("video.nextFrame"),
+						shortcut: ".",
+						onClick: () => store.step(1),
+						children: /* @__PURE__ */ jsx(ChevronRight, { size: 16 })
+					})] }),
+					/* @__PURE__ */ jsx(TimeReadout, {}),
+					frameStep && /* @__PURE__ */ jsx(FrameReadout, {}),
+					/* @__PURE__ */ jsx(SectionMenu, {}),
+					/* @__PURE__ */ jsx("div", { ...styleProps(styles.spacer) }),
+					extra,
+					hasCaptions && /* @__PURE__ */ jsx(BarButton, {
+						active: captions,
+						label: captions ? t("video.captionsHide") : t("video.captionsShow"),
+						pressed: captions,
+						shortcut: "C",
+						onClick: () => store.setCaptions(!captions),
+						children: /* @__PURE__ */ jsx(Captions, { size: 16 })
+					}),
+					/* @__PURE__ */ jsx(RateMenu, {}),
+					/* @__PURE__ */ jsx(BarButton, {
+						label: fullscreen ? t("video.exitFullscreen") : t("video.fullscreen"),
+						shortcut: "F",
+						onClick: store.toggleFullscreen,
+						children: fullscreen ? /* @__PURE__ */ jsx(Minimize, { size: 15 }) : /* @__PURE__ */ jsx(Maximize, { size: 15 })
+					})
+				]
+			})]
+		})
+	});
+};
+Controls.displayName = "VideoControls";
+//#endregion
+export { Controls as default };
+
+//# sourceMappingURL=Controls.mjs.map

package/es/Video/parts/Controls.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Controls.mjs","names":["videoMessages"],"sources":["../../../src/Video/parts/Controls.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Captions,\n  ChevronLeft,\n  ChevronRight,\n  Maximize,\n  Minimize,\n  Volume2,\n  VolumeX,\n} from 'lucide-react';\nimport { type ReactNode, use, useLayoutEffect } from 'react';\n\nimport videoMessages from '@/i18n/resources/en/video';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { FrameContext, useVideoContext } from '../context';\nimport { styles } from '../style';\nimport { formatTime, frameOf } from '../time';\nimport type { VideoControlsProps } from '../type';\nimport { useFullscreen } from '../useFullscreen';\nimport { useVideo } from '../useVideo';\nimport PlayPauseIcon from './PlayPauseIcon';\nimport RateMenu from './RateMenu';\nimport SectionMenu from './SectionMenu';\nimport Timeline from './Timeline';\n\nconst BarButton = ({\n  active,\n  children,\n  label,\n  onClick,\n  pressed,\n  shortcut,\n}: {\n  active?: boolean;\n  children: ReactNode;\n  label: string;\n  onClick: () => void;\n  pressed?: boolean;\n  shortcut?: string;\n}) => (\n  <button\n    aria-label={label}\n    aria-pressed={pressed}\n    title={shortcut ? `${label} (${shortcut})` : label}\n    type=\"button\"\n    {...styleProps([styles.barButton, active && styles.barButtonActive])}\n    onClick={onClick}\n  >\n    {children}\n  </button>\n);\n\n// Leaves so playback re-renders only these, and the clock only once a second.\nconst TimeReadout = () => {\n  const seconds = useVideo((state) => Math.floor(state.time));\n  const duration = useVideo((state) => state.duration);\n  return (\n    <span {...styleProps(styles.time, undefined, { marginInline: 6 })}>\n      {`${formatTime(seconds)} / ${formatTime(duration)}`}\n    </span>\n  );\n};\n\nconst FrameReadout = () => {\n  const { config } = useVideoContext();\n  const { t } = useTranslation(videoMessages);\n  const frame = useVideo((state) => frameOf(state.time, config.fps));\n  return (\n    <span {...styleProps(styles.frameNo, undefined, { marginInlineEnd: 6 })}>\n      {`${t('video.frame')} ${frame}`}\n    </span>\n  );\n};\n\nconst Controls = ({ children, className, extra, frameStep, style }: VideoControlsProps) => {\n  const { config, store } = useVideoContext();\n  const frame = use(FrameContext);\n  const { t } = useTranslation(videoMessages);\n  const paused = useVideo((state) => state.paused);\n  const muted = useVideo((state) => state.muted);\n  const captions = useVideo((state) => state.captions);\n  const ready = useVideo((state) => state.status === 'ready');\n  const fullscreen = useFullscreen(store);\n  const overlay = frame !== null;\n\n  useLayoutEffect(() => {\n    if (!frame) return;\n    frame.setOverlay(true);\n    return () => frame.setOverlay(false);\n  }, [frame?.setOverlay]);\n  const visible = !overlay || frame.visible;\n  const hasCaptions = config.markers.some(\n    (marker) => marker.content !== undefined && marker.content !== null,\n  );\n\n  return (\n    <div\n      data-video-controls=\"\"\n      data-visible={String(visible)}\n      {...styleProps(\n        [\n          styles.controls,\n          overlay ? styles.controlsOverlay : styles.controlsBelow,\n          overlay && !visible && styles.controlsHidden,\n        ],\n        className,\n        style,\n      )}\n      onClick={(event) => event.stopPropagation()}\n      onDoubleClick={(event) => event.stopPropagation()}\n    >\n      <div {...styleProps(!ready && styles.disabled)}>\n        {children ?? <Timeline />}\n        <div {...styleProps(styles.row)}>\n          <BarButton\n            label={paused ? t('video.play') : t('video.pause')}\n            shortcut=\"K\"\n            onClick={store.toggle}\n          >\n            <PlayPauseIcon paused={paused} />\n          </BarButton>\n          <BarButton\n            label={muted ? t('video.unmute') : t('video.mute')}\n            shortcut=\"M\"\n            onClick={store.toggleMute}\n          >\n            {muted ? <VolumeX size={16} /> : <Volume2 size={16} />}\n          </BarButton>\n          {frameStep && (\n            <>\n              <BarButton\n                label={t('video.previousFrame')}\n                shortcut=\",\"\n                onClick={() => store.step(-1)}\n              >\n                <ChevronLeft size={16} />\n              </BarButton>\n              <BarButton label={t('video.nextFrame')} shortcut=\".\" onClick={() => store.step(1)}>\n                <ChevronRight size={16} />\n              </BarButton>\n            </>\n          )}\n          <TimeReadout />\n          {frameStep && <FrameReadout />}\n          <SectionMenu />\n          <div {...styleProps(styles.spacer)} />\n          {extra}\n          {hasCaptions && (\n            <BarButton\n              active={captions}\n              label={captions ? t('video.captionsHide') : t('video.captionsShow')}\n              pressed={captions}\n              shortcut=\"C\"\n              onClick={() => store.setCaptions(!captions)}\n            >\n              <Captions size={16} />\n            </BarButton>\n          )}\n          <RateMenu />\n          <BarButton\n            label={fullscreen ? t('video.exitFullscreen') : t('video.fullscreen')}\n            shortcut=\"F\"\n            onClick={store.toggleFullscreen}\n          >\n            {fullscreen ? <Minimize size={15} /> : <Maximize size={15} />}\n          </BarButton>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nControls.displayName = 'VideoControls';\n\nexport default Controls;\n"],"mappings":"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"}

package/es/Video/parts/Frame.d.mts

@@ -0,0 +1,9 @@
+import { VideoFrameProps } from "../type.mjs";
+//#region src/Video/parts/Frame.d.ts
+declare const Frame: {
+  ({ children, className, style }: VideoFrameProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { Frame as default };
+//# sourceMappingURL=Frame.d.mts.map