@lobehub/ui 5.57.3 → 6.0.0-beta.1

package/es/Tree/type.d.mts

@@ -0,0 +1,84 @@
+import { ControlSize } from "../internal/controlSize.mjs";
+import { CSSProperties, MouseEvent, ReactNode } from "react";
+//#region src/Tree/type.d.ts
+export interface TreeDataNode {
+  checkable?: boolean;
+  children?: TreeDataNode[];
+  disabled?: boolean;
+  icon?: ReactNode;
+  isLeaf?: boolean;
+  key: string;
+  selectable?: boolean;
+  title: ReactNode;
+}
+export interface TreeFlatRow {
+  depth: number;
+  hasChildren: boolean;
+  index: number;
+  isLast: boolean;
+  node: TreeDataNode;
+  parentKey: string | null;
+  trail: boolean[];
+}
+export interface TreeClassNames {
+  guide?: string;
+  node?: string;
+  root?: string;
+  switcher?: string;
+  title?: string;
+}
+export interface TreeStyles {
+  guide?: CSSProperties;
+  node?: CSSProperties;
+  root?: CSSProperties;
+  switcher?: CSSProperties;
+  title?: CSSProperties;
+}
+export interface TreeProps {
+  blockNode?: boolean;
+  checkable?: boolean;
+  checkedKeys?: string[];
+  checkStrictly?: boolean;
+  className?: string;
+  classNames?: TreeClassNames;
+  defaultCheckedKeys?: string[];
+  defaultExpandAll?: boolean;
+  defaultExpandedKeys?: string[];
+  defaultSelectedKeys?: string[];
+  disabled?: boolean;
+  expandedKeys?: string[];
+  indent?: number;
+  multiple?: boolean;
+  onCheck?: (keys: string[], info: {
+    checked: boolean;
+    node: TreeDataNode;
+  }) => void;
+  onExpand?: (keys: string[], info: {
+    expanded: boolean;
+    node: TreeDataNode;
+  }) => void;
+  onRightClick?: (info: {
+    event: MouseEvent<HTMLDivElement>;
+    node: TreeDataNode;
+  }) => void;
+  onSelect?: (keys: string[], info: {
+    node: TreeDataNode;
+    selected: boolean;
+  }) => void;
+  scopeId?: string;
+  selectedKeys?: string[];
+  showIcon?: boolean;
+  showLine?: boolean;
+  size?: ControlSize;
+  style?: CSSProperties;
+  styles?: TreeStyles;
+  switcherIcon?: ReactNode | ((info: {
+    expanded: boolean;
+    node: TreeDataNode;
+  }) => ReactNode);
+  titleRender?: (node: TreeDataNode) => ReactNode;
+  treeData: TreeDataNode[];
+  vimKeys?: boolean;
+}
+//#endregion
+//# sourceMappingURL=type.d.mts.map

package/es/Tree/utils.d.mts

@@ -0,0 +1,10 @@
+import { TreeDataNode, TreeFlatRow } from "./type.mjs";
+//#region src/Tree/utils.d.ts
+export declare const flattenVisible: (data: TreeDataNode[], expanded: Set<string>, depth?: number, parentKey?: string | null, trail?: boolean[], out?: TreeFlatRow[]) => TreeFlatRow[];
+export declare const getAllKeys: (data: TreeDataNode[], out?: string[]) => string[];
+export declare const conductCheck: (data: TreeDataNode[], checkedKeys: Iterable<string>) => {
+  checked: Set<string>;
+  halfChecked: Set<string>;
+};
+//#endregion
+//# sourceMappingURL=utils.d.mts.map

package/es/Tree/utils.mjs

@@ -0,0 +1,73 @@
+//#region src/Tree/utils.ts
+const hasChildren = (node) => !node.isLeaf && !!node.children && node.children.length > 0;
+const flattenVisible = (data, expanded, depth = 0, parentKey = null, trail = [], out = []) => {
+	data.forEach((node, i) => {
+		const isLast = i === data.length - 1;
+		const expandable = hasChildren(node);
+		out.push({
+			depth,
+			hasChildren: expandable,
+			index: out.length,
+			isLast,
+			node,
+			parentKey,
+			trail
+		});
+		if (expandable && expanded.has(node.key)) flattenVisible(node.children, expanded, depth + 1, node.key, [...trail, !isLast], out);
+	});
+	return out;
+};
+const getAllKeys = (data, out = []) => {
+	for (const node of data) {
+		out.push(node.key);
+		if (node.children) getAllKeys(node.children, out);
+	}
+	return out;
+};
+const isCheckable = (node) => node.checkable !== false && !node.disabled;
+const getSubtreeKeys = (node, out = []) => {
+	if (isCheckable(node)) out.push(node.key);
+	node.children?.forEach((child) => getSubtreeKeys(child, out));
+	return out;
+};
+const conductCheck = (data, checkedKeys) => {
+	const checked = new Set(checkedKeys);
+	const halfChecked = /* @__PURE__ */ new Set();
+	const down = (node, inherited) => {
+		const on = inherited || checked.has(node.key);
+		if (on && isCheckable(node)) checked.add(node.key);
+		node.children?.forEach((child) => down(child, on && isCheckable(node)));
+	};
+	data.forEach((node) => down(node, false));
+	const walk = (node) => {
+		const kids = (node.children ?? []).filter(isCheckable);
+		if (kids.length === 0) return checked.has(node.key);
+		const results = kids.map(walk);
+		if (results.every(Boolean)) {
+			checked.add(node.key);
+			return true;
+		}
+		checked.delete(node.key);
+		if (results.some(Boolean) || kids.some((kid) => halfChecked.has(kid.key))) halfChecked.add(node.key);
+		return false;
+	};
+	data.forEach(walk);
+	return {
+		checked,
+		halfChecked
+	};
+};
+const getAncestorKeys = (data, key, path = []) => {
+	for (const node of data) {
+		if (node.key === key) return [...path].reverse();
+		if (node.children) {
+			const found = getAncestorKeys(node.children, key, [...path, node.key]);
+			if (found.length > 0 || node.children.some((c) => c.key === key)) return found;
+		}
+	}
+	return [];
+};
+//#endregion
+export { conductCheck, flattenVisible, getAllKeys, getAncestorKeys, getSubtreeKeys, hasChildren };
+
+//# sourceMappingURL=utils.mjs.map

package/es/Tree/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../src/Tree/utils.ts"],"sourcesContent":["import type { TreeDataNode, TreeFlatRow } from './type';\n\nexport const hasChildren = (node: TreeDataNode) =>\n  !node.isLeaf && !!node.children && node.children.length > 0;\n\nexport const flattenVisible = (\n  data: TreeDataNode[],\n  expanded: Set<string>,\n  depth = 0,\n  parentKey: string | null = null,\n  trail: boolean[] = [],\n  out: TreeFlatRow[] = [],\n): TreeFlatRow[] => {\n  data.forEach((node, i) => {\n    const isLast = i === data.length - 1;\n    const expandable = hasChildren(node);\n    out.push({ depth, hasChildren: expandable, index: out.length, isLast, node, parentKey, trail });\n    if (expandable && expanded.has(node.key)) {\n      flattenVisible(node.children!, expanded, depth + 1, node.key, [...trail, !isLast], out);\n    }\n  });\n  return out;\n};\n\nexport const getAllKeys = (data: TreeDataNode[], out: string[] = []): string[] => {\n  for (const node of data) {\n    out.push(node.key);\n    if (node.children) getAllKeys(node.children, out);\n  }\n  return out;\n};\n\nexport const findNode = (data: TreeDataNode[], key: string): TreeDataNode | undefined => {\n  for (const node of data) {\n    if (node.key === key) return node;\n    const found = node.children && findNode(node.children, key);\n    if (found) return found;\n  }\n};\n\nconst isCheckable = (node: TreeDataNode) => node.checkable !== false && !node.disabled;\n\nexport const getSubtreeKeys = (node: TreeDataNode, out: string[] = []): string[] => {\n  if (isCheckable(node)) out.push(node.key);\n  node.children?.forEach((child) => getSubtreeKeys(child, out));\n  return out;\n};\n\nexport const conductCheck = (data: TreeDataNode[], checkedKeys: Iterable<string>) => {\n  const checked = new Set(checkedKeys);\n  const halfChecked = new Set<string>();\n\n  const down = (node: TreeDataNode, inherited: boolean) => {\n    const on = inherited || checked.has(node.key);\n    if (on && isCheckable(node)) checked.add(node.key);\n    node.children?.forEach((child) => down(child, on && isCheckable(node)));\n  };\n  data.forEach((node) => down(node, false));\n\n  const walk = (node: TreeDataNode): boolean => {\n    const kids = (node.children ?? []).filter(isCheckable);\n    if (kids.length === 0) return checked.has(node.key);\n    const results = kids.map(walk);\n    if (results.every(Boolean)) {\n      checked.add(node.key);\n      return true;\n    }\n    checked.delete(node.key);\n    if (results.some(Boolean) || kids.some((kid) => halfChecked.has(kid.key))) {\n      halfChecked.add(node.key);\n    }\n    return false;\n  };\n\n  data.forEach(walk);\n  return { checked, halfChecked };\n};\n\nexport const getAncestorKeys = (\n  data: TreeDataNode[],\n  key: string,\n  path: string[] = [],\n): string[] => {\n  for (const node of data) {\n    if (node.key === key) return [...path].reverse();\n    if (node.children) {\n      const found = getAncestorKeys(node.children, key, [...path, node.key]);\n      if (found.length > 0 || node.children.some((c) => c.key === key)) return found;\n    }\n  }\n  return [];\n};\n"],"mappings":";AAEA,MAAa,eAAe,SAC1B,CAAC,KAAK,UAAU,CAAC,CAAC,KAAK,YAAY,KAAK,SAAS,SAAS;AAE5D,MAAa,kBACX,MACA,UACA,QAAQ,GACR,YAA2B,MAC3B,QAAmB,CAAC,GACpB,MAAqB,CAAC,MACJ;CAClB,KAAK,SAAS,MAAM,MAAM;EACxB,MAAM,SAAS,MAAM,KAAK,SAAS;EACnC,MAAM,aAAa,YAAY,IAAI;EACnC,IAAI,KAAK;GAAE;GAAO,aAAa;GAAY,OAAO,IAAI;GAAQ;GAAQ;GAAM;GAAW;EAAM,CAAC;EAC9F,IAAI,cAAc,SAAS,IAAI,KAAK,GAAG,GACrC,eAAe,KAAK,UAAW,UAAU,QAAQ,GAAG,KAAK,KAAK,CAAC,GAAG,OAAO,CAAC,MAAM,GAAG,GAAG;CAE1F,CAAC;CACD,OAAO;AACT;AAEA,MAAa,cAAc,MAAsB,MAAgB,CAAC,MAAgB;CAChF,KAAK,MAAM,QAAQ,MAAM;EACvB,IAAI,KAAK,KAAK,GAAG;EACjB,IAAI,KAAK,UAAU,WAAW,KAAK,UAAU,GAAG;CAClD;CACA,OAAO;AACT;AAUA,MAAM,eAAe,SAAuB,KAAK,cAAc,SAAS,CAAC,KAAK;AAE9E,MAAa,kBAAkB,MAAoB,MAAgB,CAAC,MAAgB;CAClF,IAAI,YAAY,IAAI,GAAG,IAAI,KAAK,KAAK,GAAG;CACxC,KAAK,UAAU,SAAS,UAAU,eAAe,OAAO,GAAG,CAAC;CAC5D,OAAO;AACT;AAEA,MAAa,gBAAgB,MAAsB,gBAAkC;CACnF,MAAM,UAAU,IAAI,IAAI,WAAW;CACnC,MAAM,8BAAc,IAAI,IAAY;CAEpC,MAAM,QAAQ,MAAoB,cAAuB;EACvD,MAAM,KAAK,aAAa,QAAQ,IAAI,KAAK,GAAG;EAC5C,IAAI,MAAM,YAAY,IAAI,GAAG,QAAQ,IAAI,KAAK,GAAG;EACjD,KAAK,UAAU,SAAS,UAAU,KAAK,OAAO,MAAM,YAAY,IAAI,CAAC,CAAC;CACxE;CACA,KAAK,SAAS,SAAS,KAAK,MAAM,KAAK,CAAC;CAExC,MAAM,QAAQ,SAAgC;EAC5C,MAAM,QAAQ,KAAK,YAAY,CAAC,EAAA,CAAG,OAAO,WAAW;EACrD,IAAI,KAAK,WAAW,GAAG,OAAO,QAAQ,IAAI,KAAK,GAAG;EAClD,MAAM,UAAU,KAAK,IAAI,IAAI;EAC7B,IAAI,QAAQ,MAAM,OAAO,GAAG;GAC1B,QAAQ,IAAI,KAAK,GAAG;GACpB,OAAO;EACT;EACA,QAAQ,OAAO,KAAK,GAAG;EACvB,IAAI,QAAQ,KAAK,OAAO,KAAK,KAAK,MAAM,QAAQ,YAAY,IAAI,IAAI,GAAG,CAAC,GACtE,YAAY,IAAI,KAAK,GAAG;EAE1B,OAAO;CACT;CAEA,KAAK,QAAQ,IAAI;CACjB,OAAO;EAAE;EAAS;CAAY;AAChC;AAEA,MAAa,mBACX,MACA,KACA,OAAiB,CAAC,MACL;CACb,KAAK,MAAM,QAAQ,MAAM;EACvB,IAAI,KAAK,QAAQ,KAAK,OAAO,CAAC,GAAG,IAAI,CAAC,CAAC,QAAQ;EAC/C,IAAI,KAAK,UAAU;GACjB,MAAM,QAAQ,gBAAgB,KAAK,UAAU,KAAK,CAAC,GAAG,MAAM,KAAK,GAAG,CAAC;GACrE,IAAI,MAAM,SAAS,KAAK,KAAK,SAAS,MAAM,MAAM,EAAE,QAAQ,GAAG,GAAG,OAAO;EAC3E;CACF;CACA,OAAO,CAAC;AACV"}

package/es/Upload/Upload.d.mts

@@ -0,0 +1,6 @@
+import { UploadProps } from "./type.mjs";
+//#region src/Upload/Upload.d.ts
+declare const Upload: import("react").NamedExoticComponent<UploadProps>;
+//#endregion
+export { Upload as default };
+//# sourceMappingURL=Upload.d.mts.map

package/es/Upload/Upload.mjs

@@ -0,0 +1,147 @@
+"use client";
+import { styleProps } from "../styles/stylex/props.mjs";
+import Icon from "../Icon/Icon.mjs";
+import { filterFilesByAccept } from "./helpers.mjs";
+import { styles } from "./style.mjs";
+import { memo, useCallback, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { Upload } from "lucide-react";
+//#region src/Upload/Upload.tsx
+const resolveAcceptedFiles = async (files, beforeUpload) => {
+	if (!beforeUpload) return files;
+	const accepted = [];
+	for (const file of files) {
+		let result;
+		try {
+			result = await beforeUpload(file, files);
+		} catch {
+			result = false;
+		}
+		if (result !== false) accepted.push(file);
+	}
+	return accepted;
+};
+const Upload$1 = memo(({ accept, beforeUpload, children, className, description, directory, disabled, dragger, maxCount, multiple, onChange, onFiles, openFileDialogOnClick = true, ref, style, title, ...rest }) => {
+	const inputRef = useRef(null);
+	const [isDragOver, setIsDragOver] = useState(false);
+	const handleFiles = useCallback(async (rawFiles) => {
+		const filtered = filterFilesByAccept(rawFiles, accept);
+		const accepted = await resolveAcceptedFiles(filtered, beforeUpload);
+		const sliced = maxCount ? accepted.slice(0, maxCount) : accepted;
+		if (sliced.length === 0) return;
+		onFiles?.(sliced);
+		for (const file of sliced) onChange?.({
+			file,
+			fileList: sliced
+		});
+	}, [
+		accept,
+		beforeUpload,
+		maxCount,
+		onFiles,
+		onChange
+	]);
+	const openDialog = useCallback(() => {
+		if (disabled) return;
+		inputRef.current?.click();
+	}, [disabled]);
+	const handleInputChange = useCallback((event) => {
+		const files = event.target.files ? [...event.target.files] : [];
+		event.target.value = "";
+		if (files.length > 0) handleFiles(files);
+	}, [handleFiles]);
+	const handleClick = useCallback((event) => {
+		if (event.target === inputRef.current) return;
+		if (disabled || !openFileDialogOnClick) return;
+		openDialog();
+	}, [
+		disabled,
+		openFileDialogOnClick,
+		openDialog
+	]);
+	const handleKeyDown = useCallback((event) => {
+		if (disabled || !openFileDialogOnClick) return;
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			openDialog();
+		}
+	}, [
+		disabled,
+		openFileDialogOnClick,
+		openDialog
+	]);
+	const handleDragOver = useCallback((event) => {
+		event.preventDefault();
+	}, []);
+	const handleDragEnter = useCallback((event) => {
+		event.preventDefault();
+		if (!disabled) setIsDragOver(true);
+	}, [disabled]);
+	const handleDragLeave = useCallback((event) => {
+		event.preventDefault();
+		setIsDragOver(false);
+	}, []);
+	const handleDrop = useCallback((event) => {
+		event.preventDefault();
+		setIsDragOver(false);
+		if (disabled) return;
+		const files = event.dataTransfer.files ? [...event.dataTransfer.files] : [];
+		if (files.length > 0) handleFiles(files);
+	}, [disabled, handleFiles]);
+	const inputEl = /* @__PURE__ */ jsx("input", {
+		accept,
+		disabled,
+		multiple,
+		ref: inputRef,
+		style: { display: "none" },
+		type: "file",
+		onChange: handleInputChange,
+		...directory ? { webkitdirectory: "" } : {}
+	});
+	if (dragger) return /* @__PURE__ */ jsxs("div", {
+		"aria-disabled": disabled,
+		ref,
+		role: "button",
+		...styleProps([styles.dragger, isDragOver && styles.draggerOver], className, style),
+		tabIndex: disabled ? -1 : 0,
+		onClick: handleClick,
+		onDragEnter: handleDragEnter,
+		onDragLeave: handleDragLeave,
+		onDragOver: handleDragOver,
+		onDrop: handleDrop,
+		onKeyDown: handleKeyDown,
+		...rest,
+		children: [inputEl, children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(Icon, {
+				...stylex.props(styles.draggerIcon),
+				icon: Upload,
+				size: 24
+			}),
+			/* @__PURE__ */ jsx("b", {
+				...stylex.props(styles.draggerTitle),
+				children: title ?? "Click or drag file to this area to upload"
+			}),
+			description && /* @__PURE__ */ jsx("span", {
+				...stylex.props(styles.draggerDescription),
+				children: description
+			})
+		] })]
+	});
+	return /* @__PURE__ */ jsxs("span", {
+		"aria-disabled": disabled,
+		ref,
+		role: "button",
+		...styleProps(styles.trigger, className, style),
+		tabIndex: disabled ? -1 : 0,
+		onClick: handleClick,
+		onKeyDown: handleKeyDown,
+		...rest,
+		children: [inputEl, children]
+	});
+});
+Upload$1.displayName = "Upload";
+//#endregion
+export { Upload$1 as default };
+
+//# sourceMappingURL=Upload.mjs.map

package/es/Upload/Upload.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Upload.mjs","names":["Upload","UploadIcon"],"sources":["../../src/Upload/Upload.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { Upload as UploadIcon } from 'lucide-react';\nimport type { ChangeEvent, DragEvent, KeyboardEvent, MouseEvent, Ref } from 'react';\nimport { memo, useCallback, useRef, useState } from 'react';\n\nimport Icon from '@/Icon';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { filterFilesByAccept } from './helpers';\nimport { styles } from './style';\nimport type { UploadProps } from './type';\n\nconst resolveAcceptedFiles = async (\n  files: File[],\n  beforeUpload: UploadProps['beforeUpload'],\n): Promise<File[]> => {\n  if (!beforeUpload) return files;\n\n  const accepted: File[] = [];\n  for (const file of files) {\n    let result: boolean | void;\n    try {\n      result = await beforeUpload(file, files);\n    } catch {\n      result = false;\n    }\n    if (result !== false) accepted.push(file);\n  }\n  return accepted;\n};\n\nconst Upload = memo<UploadProps>(\n  ({\n    accept,\n    beforeUpload,\n    children,\n    className,\n    description,\n    directory,\n    disabled,\n    dragger,\n    maxCount,\n    multiple,\n    onChange,\n    onFiles,\n    openFileDialogOnClick = true,\n    ref,\n    style,\n    title,\n    ...rest\n  }) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const [isDragOver, setIsDragOver] = useState(false);\n\n    const handleFiles = useCallback(\n      async (rawFiles: File[]) => {\n        const filtered = filterFilesByAccept(rawFiles, accept);\n        const accepted = await resolveAcceptedFiles(filtered, beforeUpload);\n        const sliced = maxCount ? accepted.slice(0, maxCount) : accepted;\n\n        if (sliced.length === 0) return;\n\n        onFiles?.(sliced);\n        for (const file of sliced) onChange?.({ file, fileList: sliced });\n      },\n      [accept, beforeUpload, maxCount, onFiles, onChange],\n    );\n\n    const openDialog = useCallback(() => {\n      if (disabled) return;\n      inputRef.current?.click();\n    }, [disabled]);\n\n    const handleInputChange = useCallback(\n      (event: ChangeEvent<HTMLInputElement>) => {\n        const files = event.target.files ? [...event.target.files] : [];\n        event.target.value = '';\n        if (files.length > 0) void handleFiles(files);\n      },\n      [handleFiles],\n    );\n\n    const handleClick = useCallback(\n      (event: MouseEvent) => {\n        if (event.target === inputRef.current) return;\n        if (disabled || !openFileDialogOnClick) return;\n        openDialog();\n      },\n      [disabled, openFileDialogOnClick, openDialog],\n    );\n\n    const handleKeyDown = useCallback(\n      (event: KeyboardEvent) => {\n        if (disabled || !openFileDialogOnClick) return;\n        if (event.key === 'Enter' || event.key === ' ') {\n          event.preventDefault();\n          openDialog();\n        }\n      },\n      [disabled, openFileDialogOnClick, openDialog],\n    );\n\n    const handleDragOver = useCallback((event: DragEvent) => {\n      event.preventDefault();\n    }, []);\n\n    const handleDragEnter = useCallback(\n      (event: DragEvent) => {\n        event.preventDefault();\n        if (!disabled) setIsDragOver(true);\n      },\n      [disabled],\n    );\n\n    const handleDragLeave = useCallback((event: DragEvent) => {\n      event.preventDefault();\n      setIsDragOver(false);\n    }, []);\n\n    const handleDrop = useCallback(\n      (event: DragEvent) => {\n        event.preventDefault();\n        setIsDragOver(false);\n        if (disabled) return;\n        const files = event.dataTransfer.files ? [...event.dataTransfer.files] : [];\n        if (files.length > 0) void handleFiles(files);\n      },\n      [disabled, handleFiles],\n    );\n\n    const directoryProps: Record<string, string> = directory ? { webkitdirectory: '' } : {};\n\n    const inputEl = (\n      <input\n        accept={accept}\n        disabled={disabled}\n        multiple={multiple}\n        ref={inputRef}\n        style={{ display: 'none' }}\n        type=\"file\"\n        onChange={handleInputChange}\n        {...directoryProps}\n      />\n    );\n\n    if (dragger) {\n      return (\n        <div\n          aria-disabled={disabled}\n          ref={ref as Ref<HTMLDivElement>}\n          role=\"button\"\n          {...styleProps([styles.dragger, isDragOver && styles.draggerOver], className, style)}\n          tabIndex={disabled ? -1 : 0}\n          onClick={handleClick}\n          onDragEnter={handleDragEnter}\n          onDragLeave={handleDragLeave}\n          onDragOver={handleDragOver}\n          onDrop={handleDrop}\n          onKeyDown={handleKeyDown}\n          {...rest}\n        >\n          {inputEl}\n          {children ?? (\n            <>\n              <Icon {...stylex.props(styles.draggerIcon)} icon={UploadIcon} size={24} />\n              <b {...stylex.props(styles.draggerTitle)}>\n                {title ?? 'Click or drag file to this area to upload'}\n              </b>\n              {description && (\n                <span {...stylex.props(styles.draggerDescription)}>{description}</span>\n              )}\n            </>\n          )}\n        </div>\n      );\n    }\n\n    return (\n      <span\n        aria-disabled={disabled}\n        ref={ref as Ref<HTMLSpanElement>}\n        role=\"button\"\n        {...styleProps(styles.trigger, className, style)}\n        tabIndex={disabled ? -1 : 0}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        {inputEl}\n        {children}\n      </span>\n    );\n  },\n);\n\nUpload.displayName = 'Upload';\n\nexport default Upload;\n"],"mappings":"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"}

package/es/Upload/UploadDragger.d.mts

@@ -0,0 +1,6 @@
+import { UploadProps } from "./type.mjs";
+//#region src/Upload/UploadDragger.d.ts
+declare const UploadDragger: import("react").NamedExoticComponent<UploadProps>;
+//#endregion
+export { UploadDragger as default };
+//# sourceMappingURL=UploadDragger.d.mts.map

package/es/Upload/UploadDragger.mjs

@@ -0,0 +1,14 @@
+"use client";
+import Upload from "./Upload.mjs";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Upload/UploadDragger.tsx
+const UploadDragger = memo((props) => /* @__PURE__ */ jsx(Upload, {
+	dragger: true,
+	...props
+}));
+UploadDragger.displayName = "UploadDragger";
+//#endregion
+export { UploadDragger as default };
+
+//# sourceMappingURL=UploadDragger.mjs.map

package/es/Upload/UploadDragger.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadDragger.mjs","names":[],"sources":["../../src/Upload/UploadDragger.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport type { UploadProps } from './type';\nimport Upload from './Upload';\n\nconst UploadDragger = memo<UploadProps>((props) => <Upload dragger {...props} />);\n\nUploadDragger.displayName = 'UploadDragger';\n\nexport default UploadDragger;\n"],"mappings":";;;;;AAOA,MAAM,gBAAgB,MAAmB,UAAU,oBAAC,QAAD;CAAQ,SAAA;CAAQ,GAAI;AAAQ,CAAA,CAAC;AAEhF,cAAc,cAAc"}

package/es/Upload/helpers.mjs

@@ -0,0 +1,17 @@
+//#region src/Upload/helpers.ts
+const matchesAccept = (file, accept) => {
+	const patterns = accept?.split(",").map((pattern) => pattern.trim().toLowerCase()).filter(Boolean);
+	if (!patterns || patterns.length === 0) return true;
+	const fileName = file.name.toLowerCase();
+	const fileType = (file.type || "").toLowerCase();
+	return patterns.some((pattern) => {
+		if (pattern.startsWith(".")) return fileName.endsWith(pattern);
+		if (pattern.endsWith("/*")) return fileType.startsWith(pattern.slice(0, -1));
+		return fileType === pattern;
+	});
+};
+const filterFilesByAccept = (files, accept) => accept ? files.filter((file) => matchesAccept(file, accept)) : files;
+//#endregion
+export { filterFilesByAccept, matchesAccept };
+
+//# sourceMappingURL=helpers.mjs.map

package/es/Upload/helpers.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.mjs","names":[],"sources":["../../src/Upload/helpers.ts"],"sourcesContent":["export const matchesAccept = (file: File, accept?: string): boolean => {\n  const patterns = accept\n    ?.split(',')\n    .map((pattern) => pattern.trim().toLowerCase())\n    .filter(Boolean);\n\n  if (!patterns || patterns.length === 0) return true;\n\n  const fileName = file.name.toLowerCase();\n  const fileType = (file.type || '').toLowerCase();\n\n  return patterns.some((pattern) => {\n    if (pattern.startsWith('.')) return fileName.endsWith(pattern);\n    if (pattern.endsWith('/*')) return fileType.startsWith(pattern.slice(0, -1));\n    return fileType === pattern;\n  });\n};\n\nexport const filterFilesByAccept = (files: File[], accept?: string): File[] =>\n  accept ? files.filter((file) => matchesAccept(file, accept)) : files;\n"],"mappings":";AAAA,MAAa,iBAAiB,MAAY,WAA6B;CACrE,MAAM,WAAW,QACb,MAAM,GAAG,CAAC,CACX,KAAK,YAAY,QAAQ,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,CAC9C,OAAO,OAAO;CAEjB,IAAI,CAAC,YAAY,SAAS,WAAW,GAAG,OAAO;CAE/C,MAAM,WAAW,KAAK,KAAK,YAAY;CACvC,MAAM,YAAY,KAAK,QAAQ,GAAA,CAAI,YAAY;CAE/C,OAAO,SAAS,MAAM,YAAY;EAChC,IAAI,QAAQ,WAAW,GAAG,GAAG,OAAO,SAAS,SAAS,OAAO;EAC7D,IAAI,QAAQ,SAAS,IAAI,GAAG,OAAO,SAAS,WAAW,QAAQ,MAAM,GAAG,EAAE,CAAC;EAC3E,OAAO,aAAa;CACtB,CAAC;AACH;AAEA,MAAa,uBAAuB,OAAe,WACjD,SAAS,MAAM,QAAQ,SAAS,cAAc,MAAM,MAAM,CAAC,IAAI"}

package/es/Upload/index.d.ts

@@ -0,0 +1 @@
+export * from './index.d.mts';

package/es/Upload/index.js

@@ -0,0 +1 @@
+export * from './index.mjs';

package/es/Upload/index.mjs

@@ -0,0 +1,3 @@
+import Upload from "./Upload.mjs";
+import UploadDragger from "./UploadDragger.mjs";
+export { UploadDragger, Upload as default };

package/es/Upload/style.mjs

@@ -0,0 +1,55 @@
+//#region src/Upload/style.ts
+const styles = {
+	dragger: {
+		kVAM5u: "lbqnr5ac lb1cgz93w",
+		kaIpWk: "lb1ndkxwp",
+		ksu8eU: "lbbsl7fq",
+		kMzoRj: "lbmkeg23",
+		kOIVth: "lb17d4w8g",
+		kI3sdo: "lb15y2lps",
+		k8WAf4: "lb1e9difb",
+		kg3NbH: "lb17qtykl",
+		kmkexE: "lb1q1qk89",
+		kGNEyG: "lb6s0dn4",
+		kWkggS: "lb91pywm lb1gowcop",
+		kkrTdU: "lb1ypdohk lb6qxc70",
+		k1xSpc: "lb78zum5",
+		kXwgrk: "lbdt5ytf",
+		kjj79g: "lbl56j7k",
+		kSiTet: "lb1jmzbxl",
+		kInvED: "lb7s97pk",
+		k9WMMc: "lb2b8uid",
+		$$css: true
+	},
+	draggerDescription: {
+		kMwMTN: "lb53gy9q",
+		kGuDYH: "lbfifm61",
+		$$css: true
+	},
+	draggerIcon: {
+		kMwMTN: "lb53gy9q",
+		$$css: true
+	},
+	draggerOver: {
+		kVAM5u: "lb1h7zjs4",
+		kWkggS: "lbaljia1",
+		$$css: true
+	},
+	draggerTitle: {
+		kMwMTN: "lb66ogz0",
+		k63SB2: "lbk50ysn",
+		$$css: true
+	},
+	trigger: {
+		kI3sdo: "lb15y2lps",
+		kkrTdU: "lb1ypdohk lb6qxc70",
+		k1xSpc: "lb1rg5ohu",
+		kSiTet: "lb1jmzbxl",
+		kInvED: "lb7s97pk",
+		$$css: true
+	}
+};
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/Upload/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Upload/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const styles = stylex.create({\n  dragger: {\n    borderColor: { 'default': cssVar.colorBorder, ':hover': cssVar.colorTextTertiary },\n    borderRadius: cssVar.borderRadiusLG,\n    borderStyle: 'dashed',\n    borderWidth: 1,\n    gap: 6,\n    outline: { 'default': null, ':focus-visible': `2px solid ${cssVar.colorPrimary}` },\n    paddingBlock: 28,\n    paddingInline: 20,\n    transition: 'border-color 0.15s, background 0.15s',\n    alignItems: 'center',\n    backgroundColor: { 'default': cssVar.colorFillQuaternary, ':hover': cssVar.colorFillTertiary },\n    cursor: { 'default': 'pointer', ':is([aria-disabled=\"true\"])': 'not-allowed' },\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center',\n    opacity: { 'default': null, ':is([aria-disabled=\"true\"])': 0.5 },\n    outlineOffset: { 'default': null, ':focus-visible': 2 },\n    textAlign: 'center',\n  },\n  draggerDescription: {\n    color: cssVar.colorTextTertiary,\n    fontSize: 12,\n  },\n  draggerIcon: {\n    color: cssVar.colorTextTertiary,\n  },\n  draggerOver: {\n    borderColor: cssVar.colorTextTertiary,\n    backgroundColor: cssVar.colorFillTertiary,\n  },\n  draggerTitle: {\n    color: cssVar.colorText,\n    fontWeight: 500,\n  },\n  trigger: {\n    outline: { 'default': null, ':focus-visible': `2px solid ${cssVar.colorPrimary}` },\n    cursor: { 'default': 'pointer', ':is([aria-disabled=\"true\"])': 'not-allowed' },\n    display: 'inline-block',\n    opacity: { 'default': null, ':is([aria-disabled=\"true\"])': 0.5 },\n    outlineOffset: { 'default': null, ':focus-visible': 2 },\n  },\n});\n"],"mappings":";AAGA,MAAa,SAAS;CACpB,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,oBAAoB;EAClB,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/Upload/type.d.mts

@@ -0,0 +1,23 @@
+import { ComponentProps, ReactNode, Ref } from "react";
+//#region src/Upload/type.d.ts
+export interface UploadChangeInfo {
+  file: File;
+  fileList: File[];
+}
+export interface UploadProps extends Omit<ComponentProps<'span'>, 'onChange' | 'title'> {
+  accept?: string;
+  beforeUpload?: (file: File, fileList: File[]) => boolean | Promise<boolean | void> | void;
+  description?: ReactNode;
+  directory?: boolean;
+  disabled?: boolean;
+  dragger?: boolean;
+  maxCount?: number;
+  multiple?: boolean;
+  onChange?: (info: UploadChangeInfo) => void;
+  onFiles?: (files: File[]) => void;
+  openFileDialogOnClick?: boolean;
+  ref?: Ref<HTMLElement>;
+  title?: ReactNode;
+}
+//#endregion
+//# sourceMappingURL=type.d.mts.map

package/es/Video/index.d.mts

@@ -3,7 +3,7 @@ import "../Flex/index.mjs";
 import { VideoProps as VideoProps$1 } from "../types/index.mjs";
 import { CSSProperties, Ref } from "react";
 //#region src/Video/index.d.ts
-interface VideoProps extends VideoProps$1, Pick<FlexboxProps, 'width' | 'height'> {
+export interface VideoProps extends VideoProps$1, Pick<FlexboxProps, 'width' | 'height'> {
   autoPlay?: boolean;
   classNames?: {
     mask?: string;
@@ -39,5 +39,5 @@ interface VideoProps extends VideoProps$1, Pick<FlexboxProps, 'width' | 'height'
 }
 declare const Video: import("react").NamedExoticComponent<VideoProps>;
 //#endregion
-export { VideoProps, Video as default };
+export { Video as default };
 //# sourceMappingURL=index.d.mts.map

package/es/Video/index.mjs

@@ -1,13 +1,22 @@
 "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 ActionIcon from "../base-ui/ActionIcon/ActionIcon.mjs";
-import Skeleton from "../base-ui/Skeleton/index.mjs";
-import { styles, variants } from "./style.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 { cssVar, cx } from "antd-style";
+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);
@@ -36,10 +45,14 @@ const Video = memo(({ ref, preload = "auto", src, style, classNames, className,
 		}
 	});
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
-		className: cx(variants({ variant }), className, classNames?.wrapper),
 		height,
 		ref,
 		width,
+		className: styleProps([
+			styles.root,
+			variantStyles[variant],
+			videoMarker
+		], clsx(className, classNames?.wrapper)).className,
 		style: {
 			...cssVariables,
 			...style,
@@ -47,9 +60,8 @@ const Video = memo(({ ref, preload = "auto", src, style, classNames, className,
 		},
 		children: [preview && !isPlaying && /* @__PURE__ */ jsx(FlexBasic_default, {
 			align: "center",
-			className: cx(styles.mask, classNames?.mask),
 			justify: "center",
-			style: customStyles?.mask,
+			...styleProps(styles.mask, clsx("lobe-video-mask", classNames?.mask), customStyles?.mask),
 			children: /* @__PURE__ */ jsx(ActionIcon, {
 				color: "#fff",
 				icon: PlayIcon,
@@ -57,16 +69,15 @@ const Video = memo(({ ref, preload = "auto", src, style, classNames, className,
 			})
 		}), /* @__PURE__ */ jsx("video", {
 			autoPlay,
-			className: cx(styles.video, classNames?.video),
 			controls: showControls,
 			height,
 			preload,
 			width,
-			style: {
+			...styleProps(styles.video, classNames?.video, {
 				height: "auto",
 				maxWidth: "100%",
 				...customStyles?.video
-			},
+			}),
 			onEnded: (e) => {
 				setIsPlaying(false);
 				onEnded?.(e);

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 { cssVar, cx } from 'antd-style';\nimport { PlayIcon } from 'lucide-react';\nimport { type CSSProperties, memo, type Ref, useMemo, useState } from 'react';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport Skeleton from '@/base-ui/Skeleton';\nimport { Flexbox, type FlexboxProps } from '@/Flex';\nimport { type VideoProps as VProps } from '@/types';\n\nimport { styles, variants } from './style';\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        className={cx(variants({ variant }), className, classNames?.wrapper)}\n        height={height}\n        ref={ref}\n        width={width}\n        style={{\n          ...cssVariables,\n          ...style,\n          ...customStyles?.wrapper,\n        }}\n      >\n        {preview && !isPlaying && (\n          <Flexbox\n            align={'center'}\n            className={cx(styles.mask, classNames?.mask)}\n            justify={'center'}\n            style={customStyles?.mask}\n          >\n            <ActionIcon color={'#fff'} icon={PlayIcon} variant={'filled'} />\n          </Flexbox>\n        )}\n        <video\n          autoPlay={autoPlay}\n          className={cx(styles.video, classNames?.video)}\n          controls={showControls}\n          height={height}\n          preload={preload}\n          width={width}\n          style={{\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":";;;;;;;;;;AAgDA,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;EACE,WAAW,GAAG,SAAS,EAAE,QAAQ,CAAC,GAAG,WAAW,YAAY,OAAO;EAC3D;EACH;EACE;EACP,OAAO;GACL,GAAG;GACH,GAAG;GACH,GAAG,cAAc;EACnB;EATF,UAAA,CAWG,WAAW,CAAC,aACX,oBAACA,mBAAD;GACE,OAAO;GACP,WAAW,GAAG,OAAO,MAAM,YAAY,IAAI;GAC3C,SAAS;GACT,OAAO,cAAc;GAErB,UAAA,oBAAC,YAAD;IAAY,OAAO;IAAQ,MAAM;IAAU,SAAS;GAAW,CAAA;EACxD,CAAA,GAEX,oBAAC,SAAD;GACY;GACV,WAAW,GAAG,OAAO,OAAO,YAAY,KAAK;GAC7C,UAAU;GACF;GACC;GACF;GACP,OAAO;IACL,QAAQ;IACR,UAAU;IACV,GAAG,cAAc;GACnB;GACA,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":["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"}

package/es/Video/marker.stylex.mjs

@@ -0,0 +1,9 @@
+//#region src/Video/marker.stylex.ts
+const videoMarker = {
+	lbvwb9xe: "lbvwb9xe",
+	$$css: true
+};
+//#endregion
+export { videoMarker };
+
+//# sourceMappingURL=marker.stylex.mjs.map

package/es/Video/marker.stylex.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"marker.stylex.mjs","names":[],"sources":["../../src/Video/marker.stylex.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const videoMarker = stylex.defineMarker();\n"],"mappings":";AACA,MAAa,cAAc;CACzB,UAAU;CACV,OAAO;AACT"}