@lobehub/ui 3.4.2 → 3.4.4

package/es/Tooltip/TooltipPortal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipPortal.mjs","names":[],"sources":["../../src/Tooltip/TooltipPortal.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport { useState } from 'react';\nimport { createPortal } from 'react-dom';\n\ntype TooltipPortalProps = {\n  children: ReactNode;\n  root?: HTMLElement | ShadowRoot | null;\n};\n\nconst PORTAL_ATTR = 'data-lobe-ui-tooltip-portal';\n\n// Reuse one portal container per root (document.body by default).\nconst containerMap = new WeakMap<object, HTMLElement>();\n\nconst getOrCreateContainer = (root: HTMLElement | ShadowRoot): HTMLElement => {\n  const cached = containerMap.get(root);\n  if (cached && cached.isConnected) return cached;\n\n  const el = document.createElement('div');\n  el.setAttribute(PORTAL_ATTR, 'true');\n  root.append(el);\n  containerMap.set(root, el);\n  return el;\n};\n\nconst resolveRoot = (root?: HTMLElement | ShadowRoot | null): HTMLElement | ShadowRoot | null => {\n  if (root) return root;\n  if (typeof document === 'undefined') return null;\n  return document.body;\n};\n\nconst TooltipPortal = ({ children, root }: TooltipPortalProps) => {\n  const [container, setContainer] = useState<HTMLElement | null>(() => {\n    const resolved = resolveRoot(root);\n    if (!resolved) return null;\n    return getOrCreateContainer(resolved);\n  });\n\n  if (!container && typeof document !== 'undefined') {\n    setContainer(getOrCreateContainer(document.body));\n  }\n\n  if (!container) return null;\n  return createPortal(children, container);\n};\n\nexport default TooltipPortal;\n"],"mappings":";;;;;;AAWA,MAAM,cAAc;AAGpB,MAAM,+BAAe,IAAI,SAA8B;AAEvD,MAAM,wBAAwB,SAAgD;CAC5E,MAAM,SAAS,aAAa,IAAI,KAAK;AACrC,KAAI,UAAU,OAAO,YAAa,QAAO;CAEzC,MAAM,KAAK,SAAS,cAAc,MAAM;AACxC,IAAG,aAAa,aAAa,OAAO;AACpC,MAAK,OAAO,GAAG;AACf,cAAa,IAAI,MAAM,GAAG;AAC1B,QAAO;;AAGT,MAAM,eAAe,SAA4E;AAC/F,KAAI,KAAM,QAAO;AACjB,KAAI,OAAO,aAAa,YAAa,QAAO;AAC5C,QAAO,SAAS;;AAGlB,MAAM,iBAAiB,EAAE,UAAU,WAA+B;CAChE,MAAM,CAAC,WAAW,gBAAgB,eAAmC;EACnE,MAAM,WAAW,YAAY,KAAK;AAClC,MAAI,CAAC,SAAU,QAAO;AACtB,SAAO,qBAAqB,SAAS;GACrC;AAEF,KAAI,CAAC,aAAa,OAAO,aAAa,YACpC,cAAa,qBAAqB,SAAS,KAAK,CAAC;AAGnD,KAAI,CAAC,UAAW,QAAO;AACvB,QAAO,aAAa,UAAU,UAAU;;AAG1C,4BAAe"}

package/es/Tooltip/antdPlacementToFloating.mjs

@@ -0,0 +1,27 @@
+//#region src/Tooltip/antdPlacementToFloating.ts
+/**
+* Convert Ant Design legacy placements to Floating UI placements.
+*
+* Notes:
+* - Floating UI placements like `top-start` are passed through.
+* - Ant Design legacy placements like `topLeft` are mapped to Floating UI.
+*/
+const antdPlacementToFloating = (placement) => {
+	if (!placement) return "top";
+	if (typeof placement === "string" && placement.includes("-")) return placement;
+	switch (placement) {
+		case "topLeft": return "top-start";
+		case "topRight": return "top-end";
+		case "bottomLeft": return "bottom-start";
+		case "bottomRight": return "bottom-end";
+		case "leftTop": return "left-start";
+		case "leftBottom": return "left-end";
+		case "rightTop": return "right-start";
+		case "rightBottom": return "right-end";
+		default: return placement;
+	}
+};
+
+//#endregion
+export { antdPlacementToFloating };
+//# sourceMappingURL=antdPlacementToFloating.mjs.map

package/es/Tooltip/antdPlacementToFloating.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"antdPlacementToFloating.mjs","names":[],"sources":["../../src/Tooltip/antdPlacementToFloating.ts"],"sourcesContent":["import type { Placement } from '@floating-ui/react';\n\n/**\n * Convert Ant Design legacy placements to Floating UI placements.\n *\n * Notes:\n * - Floating UI placements like `top-start` are passed through.\n * - Ant Design legacy placements like `topLeft` are mapped to Floating UI.\n */\nexport const antdPlacementToFloating = (\n  placement?:\n    | Placement\n    | 'topLeft'\n    | 'topRight'\n    | 'bottomLeft'\n    | 'bottomRight'\n    | 'leftTop'\n    | 'leftBottom'\n    | 'rightTop'\n    | 'rightBottom'\n    | 'top'\n    | 'bottom'\n    | 'left'\n    | 'right',\n): Placement => {\n  if (!placement) return 'top';\n\n  // Floating UI placements are already compatible.\n  if (typeof placement === 'string' && placement.includes('-')) return placement as Placement;\n\n  switch (placement) {\n    case 'topLeft': {\n      return 'top-start';\n    }\n    case 'topRight': {\n      return 'top-end';\n    }\n    case 'bottomLeft': {\n      return 'bottom-start';\n    }\n    case 'bottomRight': {\n      return 'bottom-end';\n    }\n    case 'leftTop': {\n      return 'left-start';\n    }\n    case 'leftBottom': {\n      return 'left-end';\n    }\n    case 'rightTop': {\n      return 'right-start';\n    }\n    case 'rightBottom': {\n      return 'right-end';\n    }\n    default: {\n      return placement as Placement;\n    }\n  }\n};\n"],"mappings":";;;;;;;;AASA,MAAa,2BACX,cAcc;AACd,KAAI,CAAC,UAAW,QAAO;AAGvB,KAAI,OAAO,cAAc,YAAY,UAAU,SAAS,IAAI,CAAE,QAAO;AAErE,SAAQ,WAAR;EACE,KAAK,UACH,QAAO;EAET,KAAK,WACH,QAAO;EAET,KAAK,aACH,QAAO;EAET,KAAK,cACH,QAAO;EAET,KAAK,UACH,QAAO;EAET,KAAK,aACH,QAAO;EAET,KAAK,WACH,QAAO;EAET,KAAK,cACH,QAAO;EAET,QACE,QAAO"}

package/es/Tooltip/groupContext.d.mts

@@ -0,0 +1,8 @@
+import { TooltipProps } from "./type.mjs";
+import "react";
+
+//#region src/Tooltip/groupContext.d.ts
+type TooltipGroupSharedProps = Omit<TooltipProps, 'children' | 'defaultOpen' | 'open' | 'ref' | 'title'>;
+//#endregion
+export { TooltipGroupSharedProps };
+//# sourceMappingURL=groupContext.d.mts.map

package/es/Tooltip/groupContext.mjs

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+
+//#region src/Tooltip/groupContext.ts
+const TooltipGroupApiContext = createContext(null);
+const TooltipGroupPropsContext = createContext(null);
+
+//#endregion
+export { TooltipGroupApiContext, TooltipGroupPropsContext };
+//# sourceMappingURL=groupContext.mjs.map

package/es/Tooltip/groupContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"groupContext.mjs","names":[],"sources":["../../src/Tooltip/groupContext.ts"],"sourcesContent":["import { createContext } from 'react';\n\nimport type { TooltipProps } from './type';\n\nexport type TooltipGroupItem = Omit<TooltipProps, 'children' | 'open' | 'defaultOpen'>;\n\nexport type TooltipGroupSharedProps = Omit<\n  TooltipProps,\n  'children' | 'defaultOpen' | 'open' | 'ref' | 'title'\n>;\n\nexport type TooltipGroupApi = {\n  closeFromTrigger: (triggerEl: HTMLElement, item: TooltipGroupItem) => void;\n  closeImmediately: () => void;\n  isActiveTrigger: (triggerEl: HTMLElement) => boolean;\n  openFromTrigger: (triggerEl: HTMLElement, item: TooltipGroupItem) => void;\n};\n\nexport const TooltipGroupApiContext = createContext<TooltipGroupApi | null>(null);\nexport const TooltipGroupPropsContext = createContext<TooltipGroupSharedProps | null>(null);\n"],"mappings":";;;AAkBA,MAAa,yBAAyB,cAAsC,KAAK;AACjF,MAAa,2BAA2B,cAA8C,KAAK"}

package/es/Tooltip/index.d.mts

@@ -0,0 +1,3 @@
+import { TooltipPlacement, TooltipProps } from "./type.mjs";
+import { Tooltip } from "./Tooltip.mjs";
+import { TooltipGroup } from "./TooltipGroup.mjs";

package/es/Tooltip/style.mjs

@@ -0,0 +1,39 @@
+import { createStyles } from "antd-style";
+
+//#region src/Tooltip/style.ts
+const useStyles = createStyles(({ css: css$1, token }) => {
+	return {
+		arrow: css$1`
+      fill: ${token.colorText};
+    `,
+		content: css$1`
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      min-height: unset;
+      padding: 8px;
+      border-radius: ${token.borderRadiusSM}px;
+
+      color: ${token.colorBgLayout};
+      word-break: normal;
+
+      background-color: ${token.colorText};
+    `,
+		tooltip: css$1`
+      pointer-events: none;
+
+      /* Keep the class name for backwards compatibility and user overrides */
+      position: relative;
+      z-index: 114514;
+      filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 12%));
+    `,
+		tooltipLayout: css$1`
+      transition: all 0.2s ease-in-out;
+    `
+	};
+});
+
+//#endregion
+export { useStyles };
+//# sourceMappingURL=style.mjs.map

package/es/Tooltip/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Tooltip/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css, token }) => {\n  return {\n    arrow: css`\n      fill: ${token.colorText};\n    `,\n    content: css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      min-height: unset;\n      padding: 8px;\n      border-radius: ${token.borderRadiusSM}px;\n\n      color: ${token.colorBgLayout};\n      word-break: normal;\n\n      background-color: ${token.colorText};\n    `,\n    tooltip: css`\n      pointer-events: none;\n\n      /* Keep the class name for backwards compatibility and user overrides */\n      position: relative;\n      z-index: 114514;\n      filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 12%));\n    `,\n    tooltipLayout: css`\n      transition: all 0.2s ease-in-out;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,YAAK,YAAY;AACxD,QAAO;EACL,OAAO,KAAG;cACA,MAAM,UAAU;;EAE1B,SAAS,KAAG;;;;;;;uBAOO,MAAM,eAAe;;eAE7B,MAAM,cAAc;;;0BAGT,MAAM,UAAU;;EAEtC,SAAS,KAAG;;;;;;;;EAQZ,eAAe,KAAG;;;EAGnB;EACD"}

package/es/Tooltip/type.d.mts

@@ -0,0 +1,104 @@
+import { HotkeyProps } from "../Hotkey/type.mjs";
+import "../Hotkey/index.mjs";
+import { CSSProperties, ReactElement, ReactNode, Ref } from "react";
+import { Placement } from "@floating-ui/react";
+
+//#region src/Tooltip/type.d.ts
+type TooltipPlacement = Placement | 'topLeft' | 'top' | 'topRight' | 'leftTop' | 'left' | 'leftBottom' | 'rightTop' | 'right' | 'rightBottom' | 'bottomLeft' | 'bottom' | 'bottomRight';
+type TooltipProps = {
+  /**
+   * Whether the tooltip has an arrow pointer.
+   */
+  arrow?: boolean;
+  /**
+   * Trigger element. Prefer a single React element.
+   */
+  children: ReactElement | ReactNode;
+  /**
+   * Custom className for the tooltip floating root.
+   */
+  className?: string;
+  /**
+   * Compatible with Ant Design `classNames` shape (subset).
+   */
+  classNames?: {
+    arrow?: string;
+    container?: string;
+    content?: string;
+    root?: string;
+  };
+  /**
+   * Delay (in milliseconds) before closing the tooltip.
+   * Takes precedence over `mouseLeaveDelay`.
+   */
+  closeDelay?: number;
+  /**
+   * Uncontrolled initial open state.
+   */
+  defaultOpen?: boolean;
+  /**
+   * Disable tooltip behavior.
+   */
+  disabled?: boolean;
+  /**
+   * An Ant Design compatible escape hatch for portal container.
+   */
+  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+  hotkey?: string;
+  hotkeyProps?: Omit<HotkeyProps, 'keys'>;
+  /**
+   * Delay (in seconds) before showing the tooltip on hover.
+   * Kept compatible with Ant Design `Tooltip`.
+   */
+  mouseEnterDelay?: number;
+  /**
+   * Delay (in seconds) before hiding the tooltip on hover out.
+   * Kept compatible with Ant Design `Tooltip`.
+   */
+  mouseLeaveDelay?: number;
+  /**
+   * Callback when open state changes.
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * Controlled open state.
+   */
+  open?: boolean;
+  /**
+   * Delay (in milliseconds) before opening the tooltip.
+   * Takes precedence over `mouseEnterDelay`.
+   */
+  openDelay?: number;
+  /**
+   * Tooltip placement. Supports Floating UI placements and Ant Design legacy placements.
+   */
+  placement?: TooltipPlacement;
+  /**
+   * Render tooltip in a portal attached to body.
+   */
+  portalled?: boolean;
+  ref?: Ref<HTMLElement>;
+  /**
+   * Compatible with Ant Design `styles` shape (subset).
+   */
+  styles?: {
+    arrow?: CSSProperties;
+    /**
+     * Backwards-compatible alias for the floating root style.
+     */
+    container?: CSSProperties;
+    content?: CSSProperties;
+    root?: CSSProperties;
+  };
+  /**
+   * Tooltip content.
+   */
+  title: ReactNode;
+  /**
+   * z-index for tooltip floating root.
+   */
+  zIndex?: number;
+};
+//#endregion
+export { TooltipPlacement, TooltipProps };
+//# sourceMappingURL=type.d.mts.map

package/es/Video/index.d.mts

@@ -0,0 +1,45 @@
+import { FlexboxProps } from "../Flex/type.mjs";
+import "../Flex/index.mjs";
+import { VideoProps as VideoProps$1 } from "../types/index.mjs";
+import * as react43 from "react";
+import { CSSProperties, Ref } from "react";
+
+//#region src/Video/index.d.ts
+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';
+}
+declare const Video: react43.NamedExoticComponent<VideoProps>;
+//#endregion
+export { Video, VideoProps };
+//# sourceMappingURL=index.d.mts.map

package/es/Video/index.d.ts

@@ -1,39 +1 @@
-import { type CSSProperties, type Ref } from 'react';
-import { FlexboxProps } from "../Flex";
-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;
-    };
-    isLoading?: boolean;
-    loop?: boolean;
-    maxHeight?: number | string;
-    maxWidth?: number | string;
-    minHeight?: number | string;
-    minWidth?: number | string;
-    muted?: HTMLVideoElement['muted'];
-    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;
-    styles?: {
-        mask?: CSSProperties;
-        video?: CSSProperties;
-        wrapper?: CSSProperties;
-    };
-    variant?: 'borderless' | 'filled' | 'outlined';
-}
-declare const Video: import("react").NamedExoticComponent<VideoProps>;
-export default Video;
+export * from './index.d.mts';

package/es/Video/index.js

@@ -1,163 +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 = ["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; }
-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 _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); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-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, useMemo, useState } from 'react';
-import ActionIcon from "../ActionIcon";
-import { Flexbox } from "../Flex";
-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 = _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,
-    _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,
-    customStyles = _ref.styles,
-    _onMouseLeave = _ref.onMouseLeave,
-    _ref$preview = _ref.preview,
-    preview = _ref$preview === void 0 ? true : _ref$preview,
-    isLoading = _ref.isLoading,
-    _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),
-    isPlaying = _useState2[0],
-    setIsPlaying = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    showControls = _useState4[0],
-    setShowControls = _useState4[1];
-  var _useStyles = useStyles({
-      maxHeight: maxHeight,
-      maxWidth: maxWidth,
-      minHeight: minHeight,
-      minWidth: minWidth
-    }),
-    cx = _useStyles.cx,
-    styles = _useStyles.styles,
-    theme = _useStyles.theme;
-  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: maxHeight,
-      maxWidth: maxWidth,
-      minHeight: minHeight,
-      minWidth: minWidth,
-      width: width
-    }
-  });
-  return /*#__PURE__*/_jsxs(Flexbox, {
-    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: cx(styles.mask, classNames === null || classNames === void 0 ? void 0 : classNames.mask),
-      justify: 'center',
-      style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.mask,
-      children: /*#__PURE__*/_jsx(ActionIcon, {
-        color: '#fff',
-        icon: PlayIcon,
-        variant: 'filled'
-      })
-    }), /*#__PURE__*/_jsx("video", _objectSpread(_objectSpread({
-      autoPlay: autoPlay,
-      className: cx(styles.video, classNames === null || classNames === void 0 ? void 0 : classNames.video),
-      controls: showControls,
-      height: height,
-      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);
-      },
-      onMouseLeave: function onMouseLeave(e) {
-        setShowControls(false);
-        _onMouseLeave === null || _onMouseLeave === void 0 || _onMouseLeave(e);
-      },
-      onPause: function onPause(e) {
-        setIsPlaying(false);
-        _onPause === null || _onPause === void 0 || _onPause(e);
-      },
-      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: _objectSpread({
-        height: 'auto',
-        maxWidth: '100%'
-      }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.video),
-      width: width
-    }, rest), {}, {
-      children: /*#__PURE__*/_jsx("source", {
-        src: src
-      })
-    }))]
-  });
-});
-Video.displayName = 'Video';
-export default Video;
+export * from './index.mjs';

package/es/Video/index.mjs

@@ -0,0 +1,107 @@
+'use client';
+
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import ActionIcon_default from "../ActionIcon/ActionIcon.mjs";
+import { useStyles } from "./style.mjs";
+import { memo, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Skeleton } from "antd";
+import { cva } from "class-variance-authority";
+import { PlayIcon } from "lucide-react";
+
+//#region src/Video/index.tsx
+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 { cx, styles, theme } = useStyles({
+		maxHeight,
+		maxWidth,
+		minHeight,
+		minWidth
+	});
+	const variants = useMemo(() => cva(styles.root, {
+		defaultVariants: { variant: "filled" },
+		variants: { variant: {
+			filled: styles.filled,
+			outlined: styles.outlined,
+			borderless: styles.borderless
+		} }
+	}), [styles]);
+	if (isLoading) return /* @__PURE__ */ jsx(Skeleton.Avatar, {
+		active: true,
+		style: {
+			borderRadius: theme.borderRadius,
+			height,
+			maxHeight,
+			maxWidth,
+			minHeight,
+			minWidth,
+			width
+		}
+	});
+	return /* @__PURE__ */ jsxs(FlexBasic_default, {
+		className: cx(variants({ variant }), className, classNames?.wrapper),
+		height,
+		ref,
+		style: {
+			...style,
+			...customStyles?.wrapper
+		},
+		width,
+		children: [preview && !isPlaying && /* @__PURE__ */ jsx(FlexBasic_default, {
+			align: "center",
+			className: cx(styles.mask, classNames?.mask),
+			justify: "center",
+			style: customStyles?.mask,
+			children: /* @__PURE__ */ jsx(ActionIcon_default, {
+				color: "#fff",
+				icon: PlayIcon,
+				variant: "filled"
+			})
+		}), /* @__PURE__ */ jsx("video", {
+			autoPlay,
+			className: cx(styles.video, classNames?.video),
+			controls: showControls,
+			height,
+			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);
+			},
+			preload,
+			style: {
+				height: "auto",
+				maxWidth: "100%",
+				...customStyles?.video
+			},
+			width,
+			...rest,
+			children: /* @__PURE__ */ jsx("source", { src })
+		})]
+	});
+});
+Video.displayName = "Video";
+var Video_default = Video;
+
+//#endregion
+export { Video_default as default };
+//# sourceMappingURL=index.mjs.map

package/es/Video/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["Flexbox","ActionIcon"],"sources":["../../src/Video/index.tsx"],"sourcesContent":["'use client';\n\nimport { Skeleton } from 'antd';\nimport { cva } from 'class-variance-authority';\nimport { PlayIcon } from 'lucide-react';\nimport { type CSSProperties, type Ref, memo, useMemo, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox, FlexboxProps } from '@/Flex';\nimport type { VideoProps as VProps } from '@/types';\n\nimport { useStyles } 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    const { cx, styles, theme } = useStyles({\n      maxHeight,\n      maxWidth,\n      minHeight,\n      minWidth,\n    });\n\n    const variants = useMemo(\n      () =>\n        cva(styles.root, {\n          defaultVariants: {\n            variant: 'filled',\n          },\n          /* eslint-disable sort-keys-fix/sort-keys-fix */\n          variants: {\n            variant: {\n              filled: styles.filled,\n              outlined: styles.outlined,\n              borderless: styles.borderless,\n            },\n          },\n          /* eslint-enable sort-keys-fix/sort-keys-fix */\n        }),\n      [styles],\n    );\n\n    if (isLoading)\n      return (\n        <Skeleton.Avatar\n          active\n          style={{\n            borderRadius: theme.borderRadius,\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        style={{\n          ...style,\n          ...customStyles?.wrapper,\n        }}\n        width={width}\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          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          preload={preload}\n          style={{\n            height: 'auto',\n            maxWidth: '100%',\n            ...customStyles?.video,\n          }}\n          width={width}\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,MAAM;CACjD,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM;CACvD,MAAM,EAAE,IAAI,QAAQ,UAAU,UAAU;EACtC;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,WAAW,cAEb,IAAI,OAAO,MAAM;EACf,iBAAiB,EACf,SAAS,UACV;EAED,UAAU,EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;GACpB,EACF;EAEF,CAAC,EACJ,CAAC,OAAO,CACT;AAED,KAAI,UACF,QACE,oBAAC,SAAS;EACR;EACA,OAAO;GACL,cAAc,MAAM;GACpB;GACA;GACA;GACA;GACA;GACA;GACD;GACD;AAGN,QACE,qBAACA;EACC,WAAW,GAAG,SAAS,EAAE,SAAS,CAAC,EAAE,WAAW,YAAY,QAAQ;EAC5D;EACH;EACL,OAAO;GACL,GAAG;GACH,GAAG,cAAc;GAClB;EACM;aAEN,WAAW,CAAC,aACX,oBAACA;GACC,OAAO;GACP,WAAW,GAAG,OAAO,MAAM,YAAY,KAAK;GAC5C,SAAS;GACT,OAAO,cAAc;aAErB,oBAACC;IAAW,OAAO;IAAQ,MAAM;IAAU,SAAS;KAAY;IACxD,EAEZ,oBAAC;GACW;GACV,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;GAC9C,UAAU;GACF;GACR,UAAU,MAAM;AACd,iBAAa,MAAM;AACnB,cAAU,EAAE;;GAEd,eAAe,MAAM;AACnB,oBAAgB,KAAK;AACrB,mBAAe,EAAE;;GAEnB,eAAe,MAAM;AACnB,oBAAgB,MAAM;AACtB,mBAAe,EAAE;;GAEnB,UAAU,MAAM;AACd,iBAAa,MAAM;AACnB,cAAU,EAAE;;GAEd,SAAS,MAAM;AACb,iBAAa,KAAK;AAClB,aAAS,EAAE;;GAEb,YAAY,MAAM;AAChB,iBAAa,KAAK;AAClB,gBAAY,EAAE;;GAEP;GACT,OAAO;IACL,QAAQ;IACR,UAAU;IACV,GAAG,cAAc;IAClB;GACM;GACP,GAAI;aAEJ,oBAAC,YAAY,MAAO;IACd;GACA;EAGf;AAED,MAAM,cAAc;AAEpB,oBAAe"}

package/es/Video/style.mjs

@@ -0,0 +1,60 @@
+import { createStyles } from "antd-style";
+
+//#region src/Video/style.ts
+const useStyles = createStyles(({ css: css$1, token, cx: cx$1, stylish }, { maxHeight, maxWidth, minWidth, minHeight } = {}) => {
+	const MAX_HEIGHT = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
+	const MAX_WIDTH = typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth;
+	const MIN_HEIGHT = typeof minHeight === "number" ? `${minHeight}px` : minHeight;
+	const MIN_WIDTH = typeof minWidth === "number" ? `${minWidth}px` : minWidth;
+	const mask = cx$1(css$1`
+      pointer-events: none;
+
+      position: absolute;
+      z-index: 1;
+      inset: 0;
+
+      width: 100%;
+      height: 100%;
+
+      opacity: 0;
+      background: ${token.colorBgMask};
+
+      transition: opacity 0.3s;
+    `);
+	return {
+		borderless: stylish.variantBorderlessWithoutHover,
+		filled: cx$1(stylish.variantOutlinedWithoutHover, stylish.variantFilledWithoutHover),
+		mask,
+		outlined: stylish.variantOutlinedWithoutHover,
+		root: css$1`
+        position: relative;
+
+        overflow: hidden;
+
+        width: 100%;
+        min-width: ${MIN_WIDTH};
+        max-width: ${MAX_WIDTH};
+        height: auto;
+        min-height: ${MIN_HEIGHT};
+        max-height: ${MAX_HEIGHT};
+        margin-block: 0 1em;
+
+        background: ${token.colorFillTertiary};
+        border-radius: ${token.borderRadius}px;
+
+        &:hover {
+          .${mask} {
+            opacity: 1;
+          }
+        }
+      `,
+		video: css$1`
+        cursor: pointer;
+        width: 100%;
+      `
+	};
+});
+
+//#endregion
+export { useStyles };
+//# sourceMappingURL=style.mjs.map

package/es/Video/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":["cx"],"sources":["../../src/Video/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(\n  (\n    { css, token, cx, stylish },\n    {\n      maxHeight,\n      maxWidth,\n      minWidth,\n      minHeight,\n    }: {\n      maxHeight?: number | string;\n      maxWidth?: number | string;\n      minHeight?: number | string;\n      minWidth?: number | string;\n    } = {},\n  ) => {\n    const MAX_HEIGHT = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;\n    const MAX_WIDTH = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth;\n    const MIN_HEIGHT = typeof minHeight === 'number' ? `${minHeight}px` : minHeight;\n    const MIN_WIDTH = typeof minWidth === 'number' ? `${minWidth}px` : minWidth;\n\n    const mask = cx(css`\n      pointer-events: none;\n\n      position: absolute;\n      z-index: 1;\n      inset: 0;\n\n      width: 100%;\n      height: 100%;\n\n      opacity: 0;\n      background: ${token.colorBgMask};\n\n      transition: opacity 0.3s;\n    `);\n\n    return {\n      borderless: stylish.variantBorderlessWithoutHover,\n      filled: cx(stylish.variantOutlinedWithoutHover, stylish.variantFilledWithoutHover),\n      mask,\n      outlined: stylish.variantOutlinedWithoutHover,\n      root: css`\n        position: relative;\n\n        overflow: hidden;\n\n        width: 100%;\n        min-width: ${MIN_WIDTH};\n        max-width: ${MAX_WIDTH};\n        height: auto;\n        min-height: ${MIN_HEIGHT};\n        max-height: ${MAX_HEIGHT};\n        margin-block: 0 1em;\n\n        background: ${token.colorFillTertiary};\n        border-radius: ${token.borderRadius}px;\n\n        &:hover {\n          .${mask} {\n            opacity: 1;\n          }\n        }\n      `,\n      video: css`\n        cursor: pointer;\n        width: 100%;\n      `,\n    };\n  },\n);\n"],"mappings":";;;AAEA,MAAa,YAAY,cAErB,EAAE,YAAK,OAAO,UAAI,WAClB,EACE,WACA,UACA,UACA,cAME,EAAE,KACH;CACH,MAAM,aAAa,OAAO,cAAc,WAAW,GAAG,UAAU,MAAM;CACtE,MAAM,YAAY,OAAO,aAAa,WAAW,GAAG,SAAS,MAAM;CACnE,MAAM,aAAa,OAAO,cAAc,WAAW,GAAG,UAAU,MAAM;CACtE,MAAM,YAAY,OAAO,aAAa,WAAW,GAAG,SAAS,MAAM;CAEnE,MAAM,OAAOA,KAAG,KAAG;;;;;;;;;;;oBAWH,MAAM,YAAY;;;MAGhC;AAEF,QAAO;EACL,YAAY,QAAQ;EACpB,QAAQA,KAAG,QAAQ,6BAA6B,QAAQ,0BAA0B;EAClF;EACA,UAAU,QAAQ;EAClB,MAAM,KAAG;;;;;;qBAMM,UAAU;qBACV,UAAU;;sBAET,WAAW;sBACX,WAAW;;;sBAGX,MAAM,kBAAkB;yBACrB,MAAM,aAAa;;;aAG/B,KAAK;;;;;EAKZ,OAAO,KAAG;;;;EAIX;EAEJ"}