@lobehub/ui 6.0.0-beta.1 → 6.0.0-beta.3

package/README.md

@@ -66,6 +66,8 @@ To install Lobe UI, run the following command:
 $ pnpm add @lobehub/ui
 ```
 
+Upgrading from 5.x? Follow the [v6 migration guide](https://ui.lobehub.com/migration-v6) and run `npx @lobehub/ui-codemod@beta v6 .`.
+
 ### Compile with NextJS
 
 > \[!NOTE]\
@@ -126,7 +128,7 @@ With Tailwind v4, use one merged statement as the very first CSS, before `@impor
 @layer theme, base, lobe-base, lobe-popup, lobe-ui, components, utilities;
 ```
 
-The lobe layers sit after Tailwind's `base` (preflight), so preflight loses to Lobe UI, and before `components` / `utilities`, so Tailwind utilities still beat Lobe UI. These layering guarantees cover components already migrated to StyleX; the remaining components still inject runtime styles until the migration completes.
+The lobe layers sit after Tailwind's `base` (preflight), so preflight loses to Lobe UI, and before `components` / `utilities`, so Tailwind utilities still beat Lobe UI.
 
 ### Theming
 

package/es/Accordion/style.d.mts

@@ -2,10 +2,10 @@ 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;
   root: string;
   indicator: string;
   item: string;

package/es/ActionIcon/type.d.mts

@@ -51,4 +51,5 @@ type BorderlessOutdentProps<V extends ActionIconVariant> = [V] extends ['borderl
 };
 export type ActionIconProps<V extends ActionIconVariant = ActionIconVariant> = BaseActionIconOwnProps & BorderlessOutdentProps<V>;
 //#endregion
+export {};
 //# sourceMappingURL=type.d.mts.map

package/es/Alert/type.d.mts

@@ -106,4 +106,5 @@ interface AlertOwnProps {
 type NativeAlertProps = Omit<HTMLAttributes<HTMLDivElement>, keyof AlertOwnProps | 'children' | 'title'>;
 export type AlertProps = AlertOwnProps & NativeAlertProps;
 //#endregion
+export {};
 //# sourceMappingURL=type.d.mts.map

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", "none" | "flex">;
+    readonly display: stylex.StyleXClassNameFor<"display", "flex" | "none">;
   }>)[];
   item: Readonly<{
     readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
@@ -103,4 +103,5 @@ declare const styleArrays: {
 };
 export declare const styles: Record<keyof typeof styleArrays, string>;
 //#endregion
+export {};
 //# sourceMappingURL=style.d.mts.map

package/es/AutoComplete/type.d.mts

@@ -36,4 +36,5 @@ export interface AutoCompleteProps extends BaseAutocompleteProps {
   variant?: InputProps['variant'];
 }
 //#endregion
+export {};
 //# sourceMappingURL=type.d.mts.map

package/es/Button/type.d.mts

@@ -50,4 +50,5 @@ type NativeButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof Bas
 type NativeAnchorProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof BaseButtonOwnProps | 'type' | 'outdent'>;
 export type ButtonProps<T extends ButtonType = ButtonType> = BaseButtonOwnProps & NativeButtonProps & Partial<NativeAnchorProps> & TextOutdentProps<T>;
 //#endregion
+export {};
 //# sourceMappingURL=type.d.mts.map

package/es/Checkbox/type.d.mts

@@ -49,4 +49,5 @@ export interface CheckboxGroupProps extends BaseCheckboxGroupProps, Pick<Flexbox
   textProps?: CheckboxProps['textProps'];
 }
 //#endregion
+export {};
 //# sourceMappingURL=type.d.mts.map

package/es/ColorSwatches/type.d.mts

@@ -23,4 +23,5 @@ export interface ColorSwatchesProps extends Omit<FlexboxProps, 'onChange'> {
   value?: string;
 }
 //#endregion
+export {};
 //# sourceMappingURL=type.d.mts.map

package/es/Drawer/atoms.d.mts

@@ -55,4 +55,5 @@ export type DrawerTriggerProps = Omit<React.ComponentPropsWithRef<typeof Dialog.
 };
 export declare const DrawerTrigger: ({ children, className, nativeButton, ref: refProp, ...rest }: DrawerTriggerProps) => React.JSX.Element;
 //#endregion
+export {};
 //# sourceMappingURL=atoms.d.mts.map

package/es/Drawer/constants.d.mts

@@ -13,4 +13,5 @@ export declare const drawerBackdropTransition: {
   ease: CubicBezier;
 };
 //#endregion
+export {};
 //# sourceMappingURL=constants.d.mts.map

package/es/FileTypeIcon/type.d.mts

@@ -12,4 +12,5 @@ export interface FileTypeIconProps extends IconProps {
   variant?: 'color' | 'mono';
 }
 //#endregion
+export {};
 //# sourceMappingURL=type.d.mts.map

package/es/Form/type.d.mts

@@ -138,4 +138,5 @@ export interface FormContextValue {
   variant: FormVariant;
 }
 //#endregion
+export {};
 //# sourceMappingURL=type.d.mts.map

package/es/GroupAvatar/type.d.mts

@@ -14,4 +14,5 @@ export interface GroupAvatarProps extends Omit<BlockProps, 'width' | 'height' |
   size?: number;
 }
 //#endregion
+export {};
 //# sourceMappingURL=type.d.mts.map

package/es/Highlighter/const.d.mts

@@ -5,4 +5,5 @@ interface HighlighterThemeItem {
 }
 export declare const highlighterThemes: HighlighterThemeItem[];
 //#endregion
+export {};
 //# sourceMappingURL=const.d.mts.map

package/es/Input/style.d.mts

@@ -37,4 +37,5 @@ export declare const inputClassNames: {
   textareaWithCount: string;
 };
 //#endregion
+export {};
 //# sourceMappingURL=style.d.mts.map

package/es/Input/type.d.mts

@@ -128,4 +128,5 @@ export interface TextAreaProps extends Omit<ComponentProps<'textarea'>, 'prefix'
   styles?: Pick<InputStyles, 'input'>;
 }
 //#endregion
+export {};
 //# sourceMappingURL=type.d.mts.map

package/es/Markdown/plugins/remarkColor.d.mts

@@ -16,4 +16,5 @@ interface RemarkColorOptions {
  */
 export declare const remarkColor: (options?: RemarkColorOptions) => (tree: any) => void;
 //#endregion
+export {};
 //# sourceMappingURL=remarkColor.d.mts.map

package/es/Markdown/plugins/remarkGfmPlus.d.mts

@@ -4,4 +4,5 @@ interface RemarkGfmPlusOptions {
 }
 export declare const remarkGfmPlus: (options?: RemarkGfmPlusOptions) => (tree: any) => void;
 //#endregion
+export {};
 //# sourceMappingURL=remarkGfmPlus.d.mts.map

package/es/Markdown/plugins/remarkVideo.d.mts

@@ -16,4 +16,5 @@ interface RemarkVideoOptions {
  */
 export declare const remarkVideo: (options?: RemarkVideoOptions) => (tree: any) => void;
 //#endregion
+export {};
 //# sourceMappingURL=remarkVideo.d.mts.map

package/es/Mermaid/const.d.mts

@@ -6,4 +6,5 @@ interface MermaidThemeItem {
 }
 export declare const mermaidThemes: MermaidThemeItem[];
 //#endregion
+export {};
 //# sourceMappingURL=const.d.mts.map

package/es/Modal/atoms.d.mts

@@ -51,4 +51,5 @@ export type ModalTriggerProps = Omit<React.ComponentPropsWithRef<typeof Dialog.T
 };
 export declare const ModalTrigger: ({ children, className, nativeButton, ref: refProp, ...rest }: ModalTriggerProps) => React.JSX.Element;
 //#endregion
+export {};
 //# sourceMappingURL=atoms.d.mts.map

package/es/Modal/constants.d.mts

@@ -7,4 +7,5 @@ export declare const backdropTransition: {
   ease: CubicBezier;
 };
 //#endregion
+export {};
 //# sourceMappingURL=constants.d.mts.map

package/es/Modal/type.d.mts

@@ -104,4 +104,5 @@ export interface ModalConfirmConfig {
   width?: number | string;
 }
 //#endregion
+export {};
 //# sourceMappingURL=type.d.mts.map

package/es/Radio/type.d.mts

@@ -55,4 +55,5 @@ export interface RadioGroupProps extends BaseRadioGroupProps {
   textProps?: RadioProps['textProps'];
 }
 //#endregion
+export {};
 //# sourceMappingURL=type.d.mts.map

package/es/Segmented/atoms.d.mts

@@ -36,4 +36,5 @@ export interface SegmentedIndicatorProps {
 }
 export declare const SegmentedIndicator: FC<SegmentedIndicatorProps>;
 //#endregion
+export {};
 //# sourceMappingURL=atoms.d.mts.map

package/es/Slider/type.d.mts

@@ -44,4 +44,5 @@ export interface SliderWithInputProps extends Omit<SliderProps, 'classNames' | '
   variant?: InputVariant;
 }
 //#endregion
+export {};
 //# sourceMappingURL=type.d.mts.map

package/es/Switch/atoms.d.mts

@@ -33,4 +33,5 @@ export declare const switchStyles: {
   thumbSmall: string;
 };
 //#endregion
+export {};
 //# sourceMappingURL=atoms.d.mts.map

package/es/Text/style.d.mts

@@ -15,8 +15,8 @@ export declare const textStyles: {
   disabled: string;
   danger: string;
   success: string;
-  warning: string;
   info: string;
+  warning: string;
   delete: string;
   ellipsis: string;
   italic: string;
@@ -44,4 +44,5 @@ type TextVariantProps = {
 };
 export declare const variants: (props?: TextVariantProps) => string;
 //#endregion
+export {};
 //# sourceMappingURL=style.d.mts.map

package/es/ToggleGroup/atoms.d.mts

@@ -30,4 +30,5 @@ export declare const ToggleGroupItemIcon: FC<SimpleSpanProps>;
 export declare const ToggleGroupItemLabel: FC<SimpleSpanProps>;
 export declare const toggleGroupStyles: Record<keyof typeof styles, string>;
 //#endregion
+export {};
 //# sourceMappingURL=atoms.d.mts.map

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  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;AAOA,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,34 @@
+"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;
+	return /* @__PURE__ */ jsx("div", {
+		...styleProps([styles.caption, frame?.visible && 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\n  return (\n    <div\n      {...styleProps([styles.caption, frame?.visible && 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;CAE7C,OACE,oBAAC,OAAD;EACE,GAAI,WAAW,CAAC,OAAO,SAAS,OAAO,WAAW,OAAO,aAAa,GAAG,WAAW,KAAK;EACzF,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