@lobehub/ui 1.171.0 → 2.0.1

package/es/Toc/TocMobile.js

@@ -1,3 +1,5 @@
+'use client';
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -6,28 +8,12 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { Anchor, Collapse, ConfigProvider } from 'antd';
 import { PanelTopClose, PanelTopOpen } from 'lucide-react';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import useControlledState from 'use-merge-value';
 import ActionIcon from "../ActionIcon";
 import { useStyles } from "./style";
+import { mapItems } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
-export var mapItems = function mapItems(items) {
-  return items.map(function (item) {
-    var _item$children;
-    return {
-      children: (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.map(function (child) {
-        return {
-          href: "#".concat(child.id),
-          key: child.id,
-          title: child === null || child === void 0 ? void 0 : child.title
-        };
-      }),
-      href: "#".concat(item.id),
-      key: item.id,
-      title: item.title
-    };
-  });
-};
 var TocMobile = /*#__PURE__*/memo(function (_ref) {
   var items = _ref.items,
     activeKey = _ref.activeKey,
@@ -52,6 +38,9 @@ var TocMobile = /*#__PURE__*/memo(function (_ref) {
   var activeAnchor = items.find(function (item) {
     return item.id === activeLink;
   });
+  var tocItems = useMemo(function () {
+    return mapItems(items);
+  }, [items]);
   return /*#__PURE__*/_jsx(ConfigProvider, {
     theme: {
       token: {
@@ -66,22 +55,9 @@ var TocMobile = /*#__PURE__*/memo(function (_ref) {
         className: styles.expand,
         expandIcon: function expandIcon(_ref2) {
           var isActive = _ref2.isActive;
-          return isActive ? /*#__PURE__*/_jsx(ActionIcon, {
-            icon: PanelTopClose,
-            size: {
-              blockSize: 24,
-              borderRadius: 3,
-              fontSize: 16,
-              strokeWidth: 1
-            }
-          }) : /*#__PURE__*/_jsx(ActionIcon, {
-            icon: PanelTopOpen,
-            size: {
-              blockSize: 24,
-              borderRadius: 3,
-              fontSize: 16,
-              strokeWidth: 1
-            }
+          return /*#__PURE__*/_jsx(ActionIcon, {
+            icon: isActive ? PanelTopClose : PanelTopOpen,
+            size: 'small'
           });
         },
         expandIconPosition: 'end',
@@ -98,7 +74,7 @@ var TocMobile = /*#__PURE__*/memo(function (_ref) {
             },
             children: /*#__PURE__*/_jsx(Anchor, {
               getContainer: getContainer,
-              items: mapItems(items),
+              items: tocItems,
               onChange: function onChange(currentLink) {
                 setActiveLink(currentLink.replace('#', ''));
               },
@@ -110,4 +86,5 @@ var TocMobile = /*#__PURE__*/memo(function (_ref) {
     })
   });
 });
+TocMobile.displayName = 'TocMobile';
 export default TocMobile;

package/es/Toc/index.d.ts

@@ -1,11 +1,2 @@
-/// <reference types="react" />
-import { type TocMobileProps } from './TocMobile';
-export interface TocProps extends TocMobileProps {
-    /**
-     * @description Whether the component is being rendered on a mobile device or not
-     * @default false
-     */
-    isMobile?: boolean;
-}
-declare const Toc: import("react").NamedExoticComponent<TocProps>;
-export default Toc;
+export { default } from './Toc';
+export type * from './type';

package/es/Toc/index.js

@@ -1,41 +1 @@
-'use client';
-
-import { Anchor } from 'antd';
-import { memo } from 'react';
-import { default as TocMobile, mapItems } from "./TocMobile";
-import { useStyles } from "./style";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var Toc = /*#__PURE__*/memo(function (_ref) {
-  var activeKey = _ref.activeKey,
-    items = _ref.items,
-    getContainer = _ref.getContainer,
-    isMobile = _ref.isMobile,
-    _ref$headerHeight = _ref.headerHeight,
-    headerHeight = _ref$headerHeight === void 0 ? 64 : _ref$headerHeight,
-    _ref$tocWidth = _ref.tocWidth,
-    tocWidth = _ref$tocWidth === void 0 ? 176 : _ref$tocWidth;
-  var _useStyles = useStyles({
-      headerHeight: headerHeight,
-      tocWidth: tocWidth
-    }),
-    styles = _useStyles.styles,
-    cx = _useStyles.cx;
-  if (isMobile) return /*#__PURE__*/_jsx(TocMobile, {
-    activeKey: activeKey,
-    getContainer: getContainer,
-    headerHeight: headerHeight,
-    items: items
-  });
-  return /*#__PURE__*/_jsxs("section", {
-    className: cx(styles.container, styles.anchor),
-    children: [/*#__PURE__*/_jsx("h4", {
-      children: "Table of Contents"
-    }), /*#__PURE__*/_jsx(Anchor, {
-      getContainer: getContainer,
-      items: mapItems(items),
-      targetOffset: headerHeight + 12
-    })]
-  });
-});
-export default Toc;
+export { default } from "./Toc";

package/es/Toc/style.js

@@ -15,7 +15,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
   return {
     anchor: cx(stylish.blur, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          overflow: hidden auto;\n          max-height: 60dvh !important;\n        "])))),
     container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        position: sticky;\n        inset-block-start: ", "px;\n\n        overscroll-behavior: contain;\n        grid-area: toc;\n\n        width: ", "px;\n        margin-inline-end: 24px;\n\n        border-radius: 3px;\n\n        -webkit-overflow-scrolling: touch;\n\n        ", " {\n          position: relative;\n          inset-inline-start: 0;\n          width: 100%;\n          margin-block-start: 0;\n        }\n\n        > h4 {\n          margin-block: 0 8px;\n          margin-inline: 0;\n\n          font-size: 12px;\n          line-height: 1;\n          color: ", ";\n        }\n      "])), headerHeight + 64, tocWidth, responsive.mobile, token.colorTextDescription),
-    expand: cx(stylish.blur, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          width: 100%;\n\n          background-color: ", ";\n          border-block-end: 1px solid ", ";\n          border-radius: 0;\n          box-shadow: ", ";\n\n          .", "-collapse-content {\n            overflow: auto;\n          }\n\n          .", "-collapse-header {\n            z-index: 10;\n            padding-block: 8px !important;\n            padding-inline: 16px !important;\n          }\n        "])), rgba(token.colorBgLayout, 0.5), token.colorSplit, token.boxShadowSecondary, prefixCls, prefixCls)),
+    expand: cx(stylish.blur, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          width: 100%;\n\n          background-color: ", ";\n          border-block-end: 1px solid ", ";\n          border-radius: 0;\n          box-shadow: ", ";\n\n          .", "-collapse-content {\n            overflow: auto;\n          }\n\n          .", "-collapse-header {\n            z-index: 10;\n            padding-block: 8px !important;\n            padding-inline: 16px 8px !important;\n          }\n        "])), rgba(token.colorBgLayout, 0.5), token.colorSplit, token.boxShadowSecondary, prefixCls, prefixCls)),
     mobileCtn: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        width: 100%;\n        height: ", "px;\n\n        .", "-collapse-expand-icon {\n          color: ", ";\n        }\n      "])), fixHeight, prefixCls, token.colorTextQuaternary)
   };
 });

package/es/Toc/type.d.ts

@@ -0,0 +1,17 @@
+import type { AnchorProps } from 'antd';
+export interface TocItemType {
+    children?: TocItemType[];
+    id: string;
+    title: string;
+}
+export interface TocMobileProps {
+    activeKey?: string;
+    getContainer?: AnchorProps['getContainer'];
+    headerHeight?: number;
+    items: TocItemType[];
+    onChange?: (activeKey: string) => void;
+    tocWidth?: number;
+}
+export interface TocProps extends TocMobileProps {
+    isMobile?: boolean;
+}

package/es/Toc/type.js

@@ -0,0 +1 @@
+export {};

package/es/Toc/utils.d.ts

@@ -0,0 +1,11 @@
+import { TocItemType } from "./type";
+export declare const mapItems: (items: TocItemType[]) => {
+    children: {
+        href: string;
+        key: string;
+        title: string;
+    }[] | undefined;
+    href: string;
+    key: string;
+    title: string;
+}[];

package/es/Toc/utils.js

@@ -0,0 +1,17 @@
+export var mapItems = function mapItems(items) {
+  return items.map(function (item) {
+    var _item$children;
+    return {
+      children: (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.map(function (child) {
+        return {
+          href: "#".concat(child.id),
+          key: child.id,
+          title: child === null || child === void 0 ? void 0 : child.title
+        };
+      }),
+      href: "#".concat(item.id),
+      key: item.id,
+      title: item.title
+    };
+  });
+};

package/es/Tooltip/Tooltip.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { TooltipProps } from './type';
+declare const Tooltip: import("react").NamedExoticComponent<TooltipProps>;
+export default Tooltip;

package/es/Tooltip/Tooltip.js

@@ -0,0 +1,52 @@
+'use client';
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["ref", "hotkey", "className", "arrow", "title", "hotkeyProps"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { Tooltip as AntdTooltip } from 'antd';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import Hotkey from "../Hotkey";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Tooltip = /*#__PURE__*/memo(function (_ref) {
+  var ref = _ref.ref,
+    hotkey = _ref.hotkey,
+    className = _ref.className,
+    _ref$arrow = _ref.arrow,
+    arrow = _ref$arrow === void 0 ? false : _ref$arrow,
+    title = _ref.title,
+    hotkeyProps = _ref.hotkeyProps,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  return /*#__PURE__*/_jsx(AntdTooltip, _objectSpread({
+    arrow: arrow,
+    classNames: {
+      root: cx(styles.tooltip, className)
+    },
+    ref: ref,
+    title: hotkey ? /*#__PURE__*/_jsxs(Flexbox, {
+      align: 'center',
+      gap: 8,
+      horizontal: true,
+      justify: 'space-between',
+      children: [/*#__PURE__*/_jsx("span", {
+        children: title
+      }), /*#__PURE__*/_jsx(Hotkey, _objectSpread({
+        inverseTheme: true,
+        keys: hotkey
+      }, hotkeyProps))]
+    }) : title
+  }, rest));
+});
+Tooltip.displayName = 'Tooltip';
+export default Tooltip;

package/es/Tooltip/index.d.ts

@@ -1,10 +1,2 @@
-import { type TooltipProps as AntdTooltipProps } from 'antd';
-import { ReactNode } from 'react';
-import { type HotkeyProps } from "../Hotkey";
-export type TooltipProps = Omit<AntdTooltipProps, 'title'> & {
-    hotkey?: string;
-    hotkeyProps?: Omit<HotkeyProps, 'keys'>;
-    title: ReactNode;
-};
-declare const Tooltip: import("react").NamedExoticComponent<TooltipProps>;
-export default Tooltip;
+export { default } from './Tooltip';
+export type * from './type';

package/es/Tooltip/index.js

@@ -1,49 +1 @@
-'use client';
-
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["hotkey", "className", "arrow", "title", "hotkeyProps"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import { Tooltip as AntdTooltip } from 'antd';
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-import Hotkey from "../Hotkey";
-import { useStyles } from "./style";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var Tooltip = /*#__PURE__*/memo(function (_ref) {
-  var hotkey = _ref.hotkey,
-    className = _ref.className,
-    _ref$arrow = _ref.arrow,
-    arrow = _ref$arrow === void 0 ? false : _ref$arrow,
-    title = _ref.title,
-    hotkeyProps = _ref.hotkeyProps,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var _useStyles = useStyles(),
-    styles = _useStyles.styles,
-    cx = _useStyles.cx;
-  return /*#__PURE__*/_jsx(AntdTooltip, _objectSpread({
-    arrow: arrow,
-    classNames: {
-      root: cx(styles.tooltip, className)
-    },
-    title: hotkey ? /*#__PURE__*/_jsxs(Flexbox, {
-      align: 'center',
-      gap: 8,
-      horizontal: true,
-      justify: 'space-between',
-      children: [/*#__PURE__*/_jsx("span", {
-        children: title
-      }), /*#__PURE__*/_jsx(Hotkey, _objectSpread({
-        inverseTheme: true,
-        keys: hotkey
-      }, hotkeyProps))]
-    }) : title
-  }, rest));
-});
-export default Tooltip;
+export { default } from "./Tooltip";

package/es/Tooltip/type.d.ts

@@ -0,0 +1,10 @@
+import type { TooltipProps as AntdTooltipProps } from 'antd';
+import type { TooltipRef } from 'antd/lib/tooltip';
+import type { ReactNode, Ref } from 'react';
+import type { HotkeyProps } from "../Hotkey";
+export type TooltipProps = Omit<AntdTooltipProps, 'title'> & {
+    hotkey?: string;
+    hotkeyProps?: Omit<HotkeyProps, 'keys'>;
+    ref?: Ref<TooltipRef>;
+    title: ReactNode;
+};

package/es/Tooltip/type.js

@@ -0,0 +1 @@
+export {};

package/es/Video/index.d.ts

@@ -1,24 +1,39 @@
-/// <reference types="react" />
-import { DivProps } from "../types";
-export interface VideoProps extends DivProps {
-    autoplay?: boolean;
-    borderless?: boolean;
+import { type CSSProperties, type Ref } from 'react';
+import { FlexboxProps } from 'react-layout-kit';
+import type { VideoProps as VProps } from "../types";
+export interface VideoProps extends VProps, Pick<FlexboxProps, 'width' | 'height'> {
+    autoPlay?: boolean;
     classNames?: {
+        mask?: string;
         video?: string;
         wrapper?: string;
     };
-    height?: number | string;
     isLoading?: boolean;
     loop?: boolean;
-    minSize?: number | string;
+    maxHeight?: number | string;
+    maxWidth?: number | string;
+    minHeight?: number | string;
+    minWidth?: number | string;
     muted?: HTMLVideoElement['muted'];
-    onload?: HTMLVideoElement['onload'];
+    onEnded?: VProps['onEnded'];
+    onMouseEnter?: VProps['onMouseEnter'];
+    onMouseLeave?: VProps['onMouseLeave'];
+    onPause?: VProps['onPause'];
+    onPlay?: VProps['onPlay'];
+    onPlaying?: VProps['onPlaying'];
+    onProgress?: VProps['onProgress'];
     poster?: string;
     preload?: HTMLVideoElement['preload'];
     preview?: boolean;
+    ref?: Ref<HTMLDivElement>;
     size?: number | string;
     src: string;
-    width?: number | string;
+    styles?: {
+        mask?: CSSProperties;
+        video?: CSSProperties;
+        wrapper?: CSSProperties;
+    };
+    variant?: 'borderless' | 'filled' | 'outlined';
 }
 declare const Video: import("react").NamedExoticComponent<VideoProps>;
 export default Video;

package/es/Video/index.js

@@ -1,7 +1,7 @@
 'use client';
 
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["preload", "src", "style", "classNames", "className", "minSize", "size", "width", "height", "onMouseEnter", "onMouseLeave", "preview", "isLoading", "borderless"];
+var _excluded = ["ref", "preload", "src", "style", "classNames", "className", "maxHeight", "maxWidth", "minHeight", "minWidth", "onEnded", "onPause", "onPlay", "onPlaying", "width", "height", "onMouseEnter", "styles", "onMouseLeave", "preview", "isLoading", "variant", "autoPlay"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -16,31 +16,43 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { Skeleton } from 'antd';
+import { cva } from 'class-variance-authority';
 import { PlayIcon } from 'lucide-react';
-import { memo, useState } from 'react';
+import { memo, useMemo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import Icon from "../Icon";
+import ActionIcon from "../ActionIcon";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var Video = /*#__PURE__*/memo(function (_ref) {
-  var _ref$preload = _ref.preload,
+  var ref = _ref.ref,
+    _ref$preload = _ref.preload,
     preload = _ref$preload === void 0 ? 'auto' : _ref$preload,
     src = _ref.src,
     style = _ref.style,
     classNames = _ref.classNames,
     className = _ref.className,
-    minSize = _ref.minSize,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? '100%' : _ref$size,
+    _ref$maxHeight = _ref.maxHeight,
+    maxHeight = _ref$maxHeight === void 0 ? '100%' : _ref$maxHeight,
+    _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? '100%' : _ref$maxWidth,
+    minHeight = _ref.minHeight,
+    minWidth = _ref.minWidth,
+    _onEnded = _ref.onEnded,
+    _onPause = _ref.onPause,
+    _onPlay = _ref.onPlay,
+    _onPlaying = _ref.onPlaying,
     width = _ref.width,
     height = _ref.height,
-    onMouseEnter = _ref.onMouseEnter,
-    onMouseLeave = _ref.onMouseLeave,
+    _onMouseEnter = _ref.onMouseEnter,
+    customStyles = _ref.styles,
+    _onMouseLeave = _ref.onMouseLeave,
     _ref$preview = _ref.preview,
     preview = _ref$preview === void 0 ? true : _ref$preview,
     isLoading = _ref.isLoading,
-    borderless = _ref.borderless,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'filled' : _ref$variant,
+    autoPlay = _ref.autoPlay,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -51,70 +63,94 @@ var Video = /*#__PURE__*/memo(function (_ref) {
     showControls = _useState4[0],
     setShowControls = _useState4[1];
   var _useStyles = useStyles({
-      borderless: borderless,
-      minSize: minSize,
-      size: size
+      maxHeight: maxHeight,
+      maxWidth: maxWidth,
+      minHeight: minHeight,
+      minWidth: minWidth
     }),
     cx = _useStyles.cx,
     styles = _useStyles.styles,
     theme = _useStyles.theme;
-  var onVideoMouseEnter = function onVideoMouseEnter(e) {
-    setShowControls(true);
-    onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter(e);
-  };
-  var onVideoMouseLeave = function onVideoMouseLeave(e) {
-    setShowControls(false);
-    onMouseLeave === null || onMouseLeave === void 0 || onMouseLeave(e);
-  };
+  var variants = useMemo(function () {
+    return cva(styles.root, {
+      defaultVariants: {
+        variant: 'filled'
+      },
+      /* eslint-disable sort-keys-fix/sort-keys-fix */
+      variants: {
+        variant: {
+          filled: styles.filled,
+          outlined: styles.outlined,
+          borderless: styles.borderless
+        }
+      }
+      /* eslint-enable sort-keys-fix/sort-keys-fix */
+    });
+  }, [styles]);
   if (isLoading) return /*#__PURE__*/_jsx(Skeleton.Avatar, {
     active: true,
     style: {
       borderRadius: theme.borderRadius,
       height: height,
-      maxHeight: size,
-      maxWidth: size,
-      minHeight: minSize,
-      minWidth: minSize,
+      maxHeight: maxHeight,
+      maxWidth: maxWidth,
+      minHeight: minHeight,
+      minWidth: minWidth,
       width: width
     }
   });
   return /*#__PURE__*/_jsxs(Flexbox, {
-    className: cx(styles.videoWrapper, classNames === null || classNames === void 0 ? void 0 : classNames.wrapper),
-    style: style,
+    className: cx(variants({
+      variant: variant
+    }), className, classNames === null || classNames === void 0 ? void 0 : classNames.wrapper),
+    height: height,
+    ref: ref,
+    style: _objectSpread(_objectSpread({}, style), customStyles === null || customStyles === void 0 ? void 0 : customStyles.wrapper),
+    width: width,
     children: [preview && !isPlaying && /*#__PURE__*/_jsx(Flexbox, {
       align: 'center',
-      className: styles.preview,
+      className: cx(styles.mask, classNames === null || classNames === void 0 ? void 0 : classNames.mask),
       justify: 'center',
-      children: /*#__PURE__*/_jsx(Icon, {
+      style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.mask,
+      children: /*#__PURE__*/_jsx(ActionIcon, {
         color: '#fff',
         icon: PlayIcon,
-        size: 'normal'
+        variant: 'filled'
       })
     }), /*#__PURE__*/_jsx("video", _objectSpread(_objectSpread({
-      autoPlay: true,
-      className: cx(styles.video, classNames === null || classNames === void 0 ? void 0 : classNames.video, className),
+      autoPlay: autoPlay,
+      className: cx(styles.video, classNames === null || classNames === void 0 ? void 0 : classNames.video),
       controls: showControls,
       height: height,
-      muted: true,
-      onEnded: function onEnded() {
-        return setIsPlaying(false);
+      onEnded: function onEnded(e) {
+        setIsPlaying(false);
+        _onEnded === null || _onEnded === void 0 || _onEnded(e);
+      },
+      onMouseEnter: function onMouseEnter(e) {
+        setShowControls(true);
+        _onMouseEnter === null || _onMouseEnter === void 0 || _onMouseEnter(e);
       },
-      onMouseEnter: onVideoMouseEnter,
-      onMouseLeave: onVideoMouseLeave,
-      onPause: function onPause() {
-        return setIsPlaying(false);
+      onMouseLeave: function onMouseLeave(e) {
+        setShowControls(false);
+        _onMouseLeave === null || _onMouseLeave === void 0 || _onMouseLeave(e);
       },
-      onPlay: function onPlay() {
-        return setIsPlaying(true);
+      onPause: function onPause(e) {
+        setIsPlaying(false);
+        _onPause === null || _onPause === void 0 || _onPause(e);
       },
-      onPlaying: function onPlaying() {
-        return setIsPlaying(true);
+      onPlay: function onPlay(e) {
+        setIsPlaying(true);
+        _onPlay === null || _onPlay === void 0 || _onPlay(e);
+      },
+      onPlaying: function onPlaying(e) {
+        setIsPlaying(true);
+        _onPlaying === null || _onPlaying === void 0 || _onPlaying(e);
       },
       preload: preload,
-      style: {
+      style: _objectSpread({
         height: 'auto',
         width: '100%'
-      },
+      }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.video),
       width: width
     }, rest), {}, {
       children: /*#__PURE__*/_jsx("source", {
@@ -123,4 +159,5 @@ var Video = /*#__PURE__*/memo(function (_ref) {
     }))]
   });
 });
+Video.displayName = 'Video';
 export default Video;

package/es/Video/style.d.ts

@@ -1,9 +1,13 @@
 export declare const useStyles: (props?: {
-    borderless?: boolean | undefined;
-    minSize?: string | number | undefined;
-    size?: string | number | undefined;
+    maxHeight?: string | number | undefined;
+    maxWidth?: string | number | undefined;
+    minHeight?: string | number | undefined;
+    minWidth?: string | number | undefined;
 } | undefined) => import("antd-style").ReturnStyles<{
-    preview: string;
+    borderless: string;
+    filled: string;
+    mask: string;
+    outlined: string;
+    root: import("antd-style").SerializedStyles;
     video: import("antd-style").SerializedStyles;
-    videoWrapper: string;
 }>;