deepsea-components 3.0.0 → 3.0.2-beta.20240527145411

package/dist/cjs/components/Flow.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import { CSSProperties, HTMLAttributes, Key, ReactNode } from "react";
 export interface FlowSizeData {
     /** 容器宽度 */
     width: number;
@@ -37,9 +37,13 @@ export interface FlowProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, "chil
     /** 源数据 */
     data: T[];
     /** 渲染 */
-    render: (item: T, index: number, hidden: boolean) => ReactNode;
+    render: (item: T, index: number, arr: T[]) => ReactNode;
     /** key释放器，默认为 index */
-    keyExactor?: (item: T, index: number) => string | number;
+    keyExactor?: (item: T, index: number, arr: T[]) => Key;
+    /** 容器类名 */
+    wrapperClassName?: string;
+    /** 容器样式 */
+    wrapperStyle?: CSSProperties;
     /** 容器类名 */
     containerClassName?: string;
     /** 容器样式 */

package/dist/cjs/components/Flow.js

@@ -25,7 +25,10 @@ __export(Flow_exports, {
   getGapRange: () => getGapRange
 });
 module.exports = __toCommonJS(Flow_exports);
+var import_css = require("@emotion/css");
+var import_deepsea_tools = require("deepsea-tools");
 var import_react = require("react");
+var import_utils = require("../utils");
 function getGapRange(gap) {
   if (typeof gap === "number")
     return [gap, gap];
@@ -45,7 +48,7 @@ function getGapCountAndSize(width, itemWidth, minGap, maxGap) {
   return [count, averageGap];
 }
 function Flow(props) {
-  const { itemWidth, itemHeight, columnGap, rowGap = 0, maxRows, data, render, keyExactor, className, style, containerClassName, containerStyle, throttle, transitionDuration, onSizeChange, ...rest } = props;
+  const { itemWidth, itemHeight, columnGap, rowGap = 0, maxRows, data, render, keyExactor, className, style, wrapperClassName, wrapperStyle, throttle, transitionDuration, onSizeChange, containerClassName, containerStyle, ...rest } = props;
   const [minColumnGap, maxColumnGap] = getGapRange(columnGap);
   const [width, setWidth] = (0, import_react.useState)(0);
   const [columnCount, setColumnCount] = (0, import_react.useState)(1);
@@ -94,21 +97,63 @@ function Flow(props) {
   (0, import_react.useEffect)(() => {
     onSizeChange?.({ width, height, itemWidth, itemHeight, columnGap: columnGapSize, columnCount, rowGap, rowCount: contentShownRows, overflow: data.length > contentShownRows * columnCount, itemCount: data.length, maxRows: maxRows ?? null });
   }, [width, height, columnGapSize, columnCount, rowGap, contentShownRows, data.length, itemWidth, itemHeight, maxRows]);
-  return /* @__PURE__ */ React.createElement("div", { ref: ele, className, style: { position: "relative", boxSizing: "border-box", height, ...style }, ...rest }, showItems && data.map((item, index) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
-      key: keyExactor ? keyExactor(item, index) : index,
-      className: containerClassName,
-      style: {
-        position: "absolute",
-        width: itemWidth,
-        height: itemHeight,
-        transition: transitionDuration !== null ? `all ${transitionDuration ?? 400}ms` : void 0,
-        ...getPosition(index)
-      }
+      ref: ele,
+      className: (0, import_deepsea_tools.clsx)(
+        import_css.css`
+                    position: relative;
+                    height: var(--height);
+                    overflow: hidden;
+                `,
+        className
+      ),
+      style: (0, import_utils.styleWithCSSVariable)({ "--height": (0, import_utils.px)(height) }),
+      ...rest
     },
-    /* @__PURE__ */ React.createElement("div", { style: { width: itemWidth, height: itemHeight, display: maxRows && index >= maxRows * columnCount ? "none" : "block", ...containerStyle } }, render(item, index, getHidden(index)))
-  )));
+    showItems && data.map((item, index, arr) => /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        key: keyExactor ? keyExactor(item, index, arr) : index,
+        className: (0, import_deepsea_tools.clsx)(
+          import_css.css`
+                                position: absolute;
+                                width: var(--width);
+                                height: var(--height);
+                                transition: var(--transition);
+                                left: 0;
+                                top: 0;
+                                transform: translate(var(--left), var(--top));
+                            `,
+          wrapperClassName
+        ),
+        style: (0, import_utils.styleWithCSSVariable)({
+          "--width": (0, import_utils.px)(itemWidth),
+          "--height": (0, import_utils.px)(itemHeight),
+          "--transition": transitionDuration === null ? "none" : `all ${transitionDuration || 400}ms`,
+          "--left": (0, import_utils.px)(getPosition(index).left),
+          "--top": (0, import_utils.px)(getPosition(index).top),
+          ...wrapperStyle
+        })
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: (0, import_deepsea_tools.clsx)(
+            import_css.css`
+                                    width: 100%;
+                                    height: 100%;
+                                    display: var(--display);
+                                `,
+            containerClassName
+          ),
+          style: (0, import_utils.styleWithCSSVariable)({ "--display": getHidden(index) ? "none" : "block", ...containerStyle })
+        },
+        render(item, index, arr)
+      )
+    ))
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/components/Flow.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/Flow.tsx"],
-  "sourcesContent": ["\"use client\"\r\n\r\nimport { CSSProperties, HTMLAttributes, ReactNode, useEffect, useRef, useState } from \"react\"\r\n\r\nexport interface FlowSizeData {\r\n    /** 容器宽度 */\r\n    width: number\r\n    /** 容器高度 */\r\n    height: number\r\n    /** 元素宽度 */\r\n    itemWidth: number\r\n    /** 元素高度 */\r\n    itemHeight: number\r\n    /** 列间距 */\r\n    columnGap: number\r\n    /** 列数 */\r\n    columnCount: number\r\n    /** 行间距 */\r\n    rowGap: number\r\n    /** 行数 */\r\n    rowCount: number\r\n    /** 元素格数 */\r\n    itemCount: number\r\n    /** 最大行数 */\r\n    maxRows: number | null\r\n    /** 是否有元素被隐藏 */\r\n    overflow: boolean\r\n}\r\n\r\nexport interface FlowProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\r\n    /** 元素宽度 */\r\n    itemWidth: number\r\n    /** 元素高度 */\r\n    itemHeight: number\r\n    /** 列间距 */\r\n    columnGap?: number | null | (number | null)[]\r\n    /** 行间距 */\r\n    rowGap?: number\r\n    /** 最大行数 */\r\n    maxRows?: number | null\r\n    /** 源数据 */\r\n    data: T[]\r\n    /** 渲染 */\r\n    render: (item: T, index: number, hidden: boolean) => ReactNode\r\n    /** key释放器，默认为 index */\r\n    keyExactor?: (item: T, index: number) => string | number\r\n    /** 容器类名 */\r\n    containerClassName?: string\r\n    /** 容器样式 */\r\n    containerStyle?: CSSProperties\r\n    /** 节流时间，单位毫秒，默认200ms，传入 null 不节流 */\r\n    throttle?: number | null\r\n    /** 动画时间，单位毫秒，默认400ms，传入 null 不展示动画 */\r\n    transitionDuration?: number | null\r\n    /** 变化的回调函数 */\r\n    onSizeChange?: (sizeData: FlowSizeData) => void\r\n}\r\n\r\nexport function getGapRange(gap?: undefined | number | null | (number | null)[]): [number, number | null] {\r\n    if (typeof gap === \"number\") return [gap, gap]\r\n    if (Array.isArray(gap)) return [gap[0] || 0, gap[1]]\r\n    return [0, null]\r\n}\r\n\r\nexport function getGapCountAndSize(width: number, itemWidth: number, minGap: number, maxGap: number | null): [number, number] {\r\n    const count = Math.floor((width + minGap) / (itemWidth + minGap)) || 1\r\n    if (count === 1) return [count, 0]\r\n    const averageGap = (width - itemWidth * count) / (count - 1)\r\n    if (averageGap < minGap) return [count, minGap]\r\n    if (maxGap !== null && averageGap > maxGap) return [count, maxGap]\r\n    return [count, averageGap]\r\n}\r\n\r\ninterface Position {\r\n    left: number\r\n    top: number\r\n}\r\n\r\n/** 自适应浮动组件 */\r\nexport function Flow<T>(props: FlowProps<T>) {\r\n    const { itemWidth, itemHeight, columnGap, rowGap = 0, maxRows, data, render, keyExactor, className, style, containerClassName, containerStyle, throttle, transitionDuration, onSizeChange, ...rest } = props\r\n    const [minColumnGap, maxColumnGap] = getGapRange(columnGap)\r\n    const [width, setWidth] = useState(0)\r\n    const [columnCount, setColumnCount] = useState(1)\r\n    const [columnGapSize, setColumnGapSize] = useState(minColumnGap)\r\n    const [showItems, setShowItems] = useState(false)\r\n    const ele = useRef<HTMLDivElement>(null)\r\n    const contentRows = Math.ceil(data.length / columnCount)\r\n    const contentShownRows = typeof maxRows === \"number\" ? Math.min(contentRows, maxRows) : contentRows\r\n    const height = contentShownRows > 0 ? contentShownRows * (itemHeight + rowGap) - rowGap : 0\r\n\r\n    function getPosition(index: number): Position {\r\n        const y = Math.floor(index / columnCount)\r\n        const x = index - y * columnCount\r\n        return {\r\n            left: x * (itemWidth + columnGapSize),\r\n            top: y * (itemHeight + rowGap)\r\n        }\r\n    }\r\n\r\n    function getHidden(index: number) {\r\n        if (typeof maxRows !== \"number\") return false\r\n        return index >= maxRows * columnCount\r\n    }\r\n\r\n    useEffect(() => {\r\n        let timeout: number\r\n        const observer = new ResizeObserver(entries => {\r\n            clearTimeout(timeout)\r\n            function task() {\r\n                const { width } = entries[0].contentRect\r\n                const [newColumnCount, newColumnGapSize] = getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap)\r\n                setShowItems(true)\r\n                setWidth(width)\r\n                setColumnCount(newColumnCount)\r\n                setColumnGapSize(newColumnGapSize)\r\n            }\r\n            if (throttle === null) {\r\n                task()\r\n            } else {\r\n                timeout = window.setTimeout(task, throttle || 200)\r\n            }\r\n        })\r\n        observer.observe(ele.current!)\r\n\r\n        return () => {\r\n            observer.disconnect()\r\n        }\r\n    }, [itemWidth, throttle, columnGap])\r\n\r\n    useEffect(() => {\r\n        onSizeChange?.({ width, height, itemWidth, itemHeight, columnGap: columnGapSize, columnCount, rowGap, rowCount: contentShownRows, overflow: data.length > contentShownRows * columnCount, itemCount: data.length, maxRows: maxRows ?? null })\r\n    }, [width, height, columnGapSize, columnCount, rowGap, contentShownRows, data.length, itemWidth, itemHeight, maxRows])\r\n\r\n    return (\r\n        <div ref={ele} className={className} style={{ position: \"relative\", boxSizing: \"border-box\", height, ...style }} {...rest}>\r\n            {showItems &&\r\n                data.map((item, index) => (\r\n                    <div\r\n                        key={keyExactor ? keyExactor(item, index) : index}\r\n                        className={containerClassName}\r\n                        style={{\r\n                            position: \"absolute\",\r\n                            width: itemWidth,\r\n                            height: itemHeight,\r\n                            transition: transitionDuration !== null ? `all ${transitionDuration ?? 400}ms` : undefined,\r\n                            ...getPosition(index)\r\n                        }}>\r\n                        <div style={{ width: itemWidth, height: itemHeight, display: maxRows && index >= maxRows * columnCount ? \"none\" : \"block\", ...containerStyle }}>{render(item, index, getHidden(index))}</div>\r\n                    </div>\r\n                ))}\r\n        </div>\r\n    )\r\n}\r\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAsF;AAwD/E,SAAS,YAAY,KAA8E;AACtG,MAAI,OAAO,QAAQ;AAAU,WAAO,CAAC,KAAK,GAAG;AAC7C,MAAI,MAAM,QAAQ,GAAG;AAAG,WAAO,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;AACnD,SAAO,CAAC,GAAG,IAAI;AACnB;AAEO,SAAS,mBAAmB,OAAe,WAAmB,QAAgB,QAAyC;AAC1H,QAAM,QAAQ,KAAK,OAAO,QAAQ,WAAW,YAAY,OAAO,KAAK;AACrE,MAAI,UAAU;AAAG,WAAO,CAAC,OAAO,CAAC;AACjC,QAAM,cAAc,QAAQ,YAAY,UAAU,QAAQ;AAC1D,MAAI,aAAa;AAAQ,WAAO,CAAC,OAAO,MAAM;AAC9C,MAAI,WAAW,QAAQ,aAAa;AAAQ,WAAO,CAAC,OAAO,MAAM;AACjE,SAAO,CAAC,OAAO,UAAU;AAC7B;AAQO,SAAS,KAAQ,OAAqB;AACzC,QAAM,EAAE,WAAW,YAAY,WAAW,SAAS,GAAG,SAAS,MAAM,QAAQ,YAAY,WAAW,OAAO,oBAAoB,gBAAgB,UAAU,oBAAoB,cAAc,GAAG,KAAK,IAAI;AACvM,QAAM,CAAC,cAAc,YAAY,IAAI,YAAY,SAAS;AAC1D,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,CAAC;AACpC,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,CAAC;AAChD,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,YAAY;AAC/D,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,cAAc,KAAK,KAAK,KAAK,SAAS,WAAW;AACvD,QAAM,mBAAmB,OAAO,YAAY,WAAW,KAAK,IAAI,aAAa,OAAO,IAAI;AACxF,QAAM,SAAS,mBAAmB,IAAI,oBAAoB,aAAa,UAAU,SAAS;AAE1F,WAAS,YAAY,OAAyB;AAC1C,UAAM,IAAI,KAAK,MAAM,QAAQ,WAAW;AACxC,UAAM,IAAI,QAAQ,IAAI;AACtB,WAAO;AAAA,MACH,MAAM,KAAK,YAAY;AAAA,MACvB,KAAK,KAAK,aAAa;AAAA,IAC3B;AAAA,EACJ;AAEA,WAAS,UAAU,OAAe;AAC9B,QAAI,OAAO,YAAY;AAAU,aAAO;AACxC,WAAO,SAAS,UAAU;AAAA,EAC9B;AAEA,8BAAU,MAAM;AACZ,QAAI;AACJ,UAAM,WAAW,IAAI,eAAe,aAAW;AAC3C,mBAAa,OAAO;AACpB,eAAS,OAAO;AACZ,cAAM,EAAE,OAAAA,OAAM,IAAI,QAAQ,CAAC,EAAE;AAC7B,cAAM,CAAC,gBAAgB,gBAAgB,IAAI,mBAAmBA,QAAO,WAAW,cAAc,YAAY;AAC1G,qBAAa,IAAI;AACjB,iBAASA,MAAK;AACd,uBAAe,cAAc;AAC7B,yBAAiB,gBAAgB;AAAA,MACrC;AACA,UAAI,aAAa,MAAM;AACnB,aAAK;AAAA,MACT,OAAO;AACH,kBAAU,OAAO,WAAW,MAAM,YAAY,GAAG;AAAA,MACrD;AAAA,IACJ,CAAC;AACD,aAAS,QAAQ,IAAI,OAAQ;AAE7B,WAAO,MAAM;AACT,eAAS,WAAW;AAAA,IACxB;AAAA,EACJ,GAAG,CAAC,WAAW,UAAU,SAAS,CAAC;AAEnC,8BAAU,MAAM;AACZ,mBAAe,EAAE,OAAO,QAAQ,WAAW,YAAY,WAAW,eAAe,aAAa,QAAQ,UAAU,kBAAkB,UAAU,KAAK,SAAS,mBAAmB,aAAa,WAAW,KAAK,QAAQ,SAAS,WAAW,KAAK,CAAC;AAAA,EAChP,GAAG,CAAC,OAAO,QAAQ,eAAe,aAAa,QAAQ,kBAAkB,KAAK,QAAQ,WAAW,YAAY,OAAO,CAAC;AAErH,SACI,oCAAC,SAAI,KAAK,KAAK,WAAsB,OAAO,EAAE,UAAU,YAAY,WAAW,cAAc,QAAQ,GAAG,MAAM,GAAI,GAAG,QAChH,aACG,KAAK,IAAI,CAAC,MAAM,UACZ;AAAA,IAAC;AAAA;AAAA,MACG,KAAK,aAAa,WAAW,MAAM,KAAK,IAAI;AAAA,MAC5C,WAAW;AAAA,MACX,OAAO;AAAA,QACH,UAAU;AAAA,QACV,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAY,uBAAuB,OAAO,OAAO,sBAAsB,UAAU;AAAA,QACjF,GAAG,YAAY,KAAK;AAAA,MACxB;AAAA;AAAA,IACA,oCAAC,SAAI,OAAO,EAAE,OAAO,WAAW,QAAQ,YAAY,SAAS,WAAW,SAAS,UAAU,cAAc,SAAS,SAAS,GAAG,eAAe,KAAI,OAAO,MAAM,OAAO,UAAU,KAAK,CAAC,CAAE;AAAA,EAC3L,CACH,CACT;AAER;",
+  "sourcesContent": ["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { CSSProperties, HTMLAttributes, Key, ReactNode, useEffect, useRef, useState } from \"react\"\r\nimport { px, styleWithCSSVariable } from \"../utils\"\r\n\r\nexport interface FlowSizeData {\r\n    /** 容器宽度 */\r\n    width: number\r\n    /** 容器高度 */\r\n    height: number\r\n    /** 元素宽度 */\r\n    itemWidth: number\r\n    /** 元素高度 */\r\n    itemHeight: number\r\n    /** 列间距 */\r\n    columnGap: number\r\n    /** 列数 */\r\n    columnCount: number\r\n    /** 行间距 */\r\n    rowGap: number\r\n    /** 行数 */\r\n    rowCount: number\r\n    /** 元素格数 */\r\n    itemCount: number\r\n    /** 最大行数 */\r\n    maxRows: number | null\r\n    /** 是否有元素被隐藏 */\r\n    overflow: boolean\r\n}\r\n\r\nexport interface FlowProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\r\n    /** 元素宽度 */\r\n    itemWidth: number\r\n    /** 元素高度 */\r\n    itemHeight: number\r\n    /** 列间距 */\r\n    columnGap?: number | null | (number | null)[]\r\n    /** 行间距 */\r\n    rowGap?: number\r\n    /** 最大行数 */\r\n    maxRows?: number | null\r\n    /** 源数据 */\r\n    data: T[]\r\n    /** 渲染 */\r\n    render: (item: T, index: number, arr: T[]) => ReactNode\r\n    /** key释放器，默认为 index */\r\n    keyExactor?: (item: T, index: number, arr: T[]) => Key\r\n    /** 容器类名 */\r\n    wrapperClassName?: string\r\n    /** 容器样式 */\r\n    wrapperStyle?: CSSProperties\r\n    /** 容器类名 */\r\n    containerClassName?: string\r\n    /** 容器样式 */\r\n    containerStyle?: CSSProperties\r\n    /** 节流时间，单位毫秒，默认200ms，传入 null 不节流 */\r\n    throttle?: number | null\r\n    /** 动画时间，单位毫秒，默认400ms，传入 null 不展示动画 */\r\n    transitionDuration?: number | null\r\n    /** 变化的回调函数 */\r\n    onSizeChange?: (sizeData: FlowSizeData) => void\r\n}\r\n\r\nexport function getGapRange(gap?: undefined | number | null | (number | null)[]): [number, number | null] {\r\n    if (typeof gap === \"number\") return [gap, gap]\r\n    if (Array.isArray(gap)) return [gap[0] || 0, gap[1]]\r\n    return [0, null]\r\n}\r\n\r\nexport function getGapCountAndSize(width: number, itemWidth: number, minGap: number, maxGap: number | null): [number, number] {\r\n    const count = Math.floor((width + minGap) / (itemWidth + minGap)) || 1\r\n    if (count === 1) return [count, 0]\r\n    const averageGap = (width - itemWidth * count) / (count - 1)\r\n    if (averageGap < minGap) return [count, minGap]\r\n    if (maxGap !== null && averageGap > maxGap) return [count, maxGap]\r\n    return [count, averageGap]\r\n}\r\n\r\ninterface Position {\r\n    left: number\r\n    top: number\r\n}\r\n\r\n/** 自适应浮动组件 */\r\nexport function Flow<T>(props: FlowProps<T>) {\r\n    const { itemWidth, itemHeight, columnGap, rowGap = 0, maxRows, data, render, keyExactor, className, style, wrapperClassName, wrapperStyle, throttle, transitionDuration, onSizeChange, containerClassName, containerStyle, ...rest } = props\r\n    const [minColumnGap, maxColumnGap] = getGapRange(columnGap)\r\n    const [width, setWidth] = useState(0)\r\n    const [columnCount, setColumnCount] = useState(1)\r\n    const [columnGapSize, setColumnGapSize] = useState(minColumnGap)\r\n    const [showItems, setShowItems] = useState(false)\r\n    const ele = useRef<HTMLDivElement>(null)\r\n    const contentRows = Math.ceil(data.length / columnCount)\r\n    const contentShownRows = typeof maxRows === \"number\" ? Math.min(contentRows, maxRows) : contentRows\r\n    const height = contentShownRows > 0 ? contentShownRows * (itemHeight + rowGap) - rowGap : 0\r\n\r\n    function getPosition(index: number): Position {\r\n        const y = Math.floor(index / columnCount)\r\n        const x = index - y * columnCount\r\n        return {\r\n            left: x * (itemWidth + columnGapSize),\r\n            top: y * (itemHeight + rowGap)\r\n        }\r\n    }\r\n\r\n    function getHidden(index: number) {\r\n        if (typeof maxRows !== \"number\") return false\r\n        return index >= maxRows * columnCount\r\n    }\r\n\r\n    useEffect(() => {\r\n        let timeout: number\r\n        const observer = new ResizeObserver(entries => {\r\n            clearTimeout(timeout)\r\n            function task() {\r\n                const { width } = entries[0].contentRect\r\n                const [newColumnCount, newColumnGapSize] = getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap)\r\n                setShowItems(true)\r\n                setWidth(width)\r\n                setColumnCount(newColumnCount)\r\n                setColumnGapSize(newColumnGapSize)\r\n            }\r\n            if (throttle === null) {\r\n                task()\r\n            } else {\r\n                timeout = window.setTimeout(task, throttle || 200)\r\n            }\r\n        })\r\n        observer.observe(ele.current!)\r\n\r\n        return () => {\r\n            observer.disconnect()\r\n        }\r\n    }, [itemWidth, throttle, columnGap])\r\n\r\n    useEffect(() => {\r\n        onSizeChange?.({ width, height, itemWidth, itemHeight, columnGap: columnGapSize, columnCount, rowGap, rowCount: contentShownRows, overflow: data.length > contentShownRows * columnCount, itemCount: data.length, maxRows: maxRows ?? null })\r\n    }, [width, height, columnGapSize, columnCount, rowGap, contentShownRows, data.length, itemWidth, itemHeight, maxRows])\r\n\r\n    return (\r\n        <div\r\n            ref={ele}\r\n            className={clsx(\r\n                css`\r\n                    position: relative;\r\n                    height: var(--height);\r\n                    overflow: hidden;\r\n                `,\r\n                className\r\n            )}\r\n            style={styleWithCSSVariable({ \"--height\": px(height) })}\r\n            {...rest}>\r\n            {showItems &&\r\n                data.map((item, index, arr) => (\r\n                    <div\r\n                        key={keyExactor ? keyExactor(item, index, arr) : index}\r\n                        className={clsx(\r\n                            css`\r\n                                position: absolute;\r\n                                width: var(--width);\r\n                                height: var(--height);\r\n                                transition: var(--transition);\r\n                                left: 0;\r\n                                top: 0;\r\n                                transform: translate(var(--left), var(--top));\r\n                            `,\r\n                            wrapperClassName\r\n                        )}\r\n                        style={styleWithCSSVariable({\r\n                            \"--width\": px(itemWidth),\r\n                            \"--height\": px(itemHeight),\r\n                            \"--transition\": transitionDuration === null ? \"none\" : `all ${transitionDuration || 400}ms`,\r\n                            \"--left\": px(getPosition(index).left),\r\n                            \"--top\": px(getPosition(index).top),\r\n                            ...wrapperStyle\r\n                        })}>\r\n                        <div\r\n                            className={clsx(\r\n                                css`\r\n                                    width: 100%;\r\n                                    height: 100%;\r\n                                    display: var(--display);\r\n                                `,\r\n                                containerClassName\r\n                            )}\r\n                            style={styleWithCSSVariable({ \"--display\": getHidden(index) ? \"none\" : \"block\", ...containerStyle })}>\r\n                            {render(item, index, arr)}\r\n                        </div>\r\n                    </div>\r\n                ))}\r\n        </div>\r\n    )\r\n}\r\n"],
+  "mappings": "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",
   "names": ["width"]
 }

package/dist/cjs/components/HlsPlayer.d.ts

@@ -0,0 +1,6 @@
+import { MediaHTMLAttributes } from "react";
+export interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, "src"> {
+    src: string;
+}
+declare const HlsPlayer: import("react").ForwardRefExoticComponent<HlsPlayerProps & import("react").RefAttributes<HTMLVideoElement>>;
+export default HlsPlayer;

package/dist/cjs/components/HlsPlayer.js

@@ -0,0 +1,64 @@
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/HlsPlayer.tsx
+var HlsPlayer_exports = {};
+__export(HlsPlayer_exports, {
+  default: () => HlsPlayer_default
+});
+module.exports = __toCommonJS(HlsPlayer_exports);
+var import_hls = __toESM(require("hls.js"));
+var import_react = require("react");
+var HlsPlayer = (0, import_react.forwardRef)((props, ref) => {
+  const { src, ...rest } = props;
+  const video = (0, import_react.useRef)(null);
+  (0, import_react.useImperativeHandle)(ref, () => video.current, []);
+  (0, import_react.useEffect)(() => {
+    const { current: player } = video;
+    if (!player || !src)
+      return;
+    if (player.canPlayType("application/vnd.apple.mpegurl")) {
+      player.src = src;
+      player.play();
+      return;
+    }
+    if (import_hls.default.isSupported()) {
+      const hls = new import_hls.default();
+      hls.loadSource(src);
+      hls.attachMedia(player);
+      player.play();
+      return () => {
+        hls.destroy();
+      };
+    }
+  }, [src]);
+  return /* @__PURE__ */ React.createElement("video", { ref: video, ...rest });
+});
+var HlsPlayer_default = HlsPlayer;
+//# sourceMappingURL=HlsPlayer.js.map

package/dist/cjs/components/HlsPlayer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/HlsPlayer.tsx"],
+  "sourcesContent": ["\"use client\"\r\n\r\nimport Hls from \"hls.js\"\r\nimport { MediaHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\r\n\r\nexport interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, \"src\"> {\r\n    src: string\r\n}\r\n\r\nconst HlsPlayer = forwardRef<HTMLVideoElement, HlsPlayerProps>((props, ref) => {\r\n    const { src, ...rest } = props\r\n    const video = useRef<HTMLVideoElement>(null)\r\n\r\n    useImperativeHandle(ref, () => video.current!, [])\r\n\r\n    useEffect(() => {\r\n        const { current: player } = video\r\n        if (!player || !src) return\r\n        if (player.canPlayType(\"application/vnd.apple.mpegurl\")) {\r\n            player.src = src\r\n            player.play()\r\n            return\r\n        }\r\n        if (Hls.isSupported()) {\r\n            const hls = new Hls()\r\n            hls.loadSource(src)\r\n            hls.attachMedia(player)\r\n            player.play()\r\n            return () => {\r\n                hls.destroy()\r\n            }\r\n        }\r\n    }, [src])\r\n\r\n    return <video ref={video} {...rest} />\r\n})\r\n\r\nexport default HlsPlayer\r\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAgB;AAChB,mBAAwF;AAMxF,IAAM,gBAAY,yBAA6C,CAAC,OAAO,QAAQ;AAC3E,QAAM,EAAE,KAAK,GAAG,KAAK,IAAI;AACzB,QAAM,YAAQ,qBAAyB,IAAI;AAE3C,wCAAoB,KAAK,MAAM,MAAM,SAAU,CAAC,CAAC;AAEjD,8BAAU,MAAM;AACZ,UAAM,EAAE,SAAS,OAAO,IAAI;AAC5B,QAAI,CAAC,UAAU,CAAC;AAAK;AACrB,QAAI,OAAO,YAAY,+BAA+B,GAAG;AACrD,aAAO,MAAM;AACb,aAAO,KAAK;AACZ;AAAA,IACJ;AACA,QAAI,WAAAA,QAAI,YAAY,GAAG;AACnB,YAAM,MAAM,IAAI,WAAAA,QAAI;AACpB,UAAI,WAAW,GAAG;AAClB,UAAI,YAAY,MAAM;AACtB,aAAO,KAAK;AACZ,aAAO,MAAM;AACT,YAAI,QAAQ;AAAA,MAChB;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,GAAG,CAAC;AAER,SAAO,oCAAC,WAAM,KAAK,OAAQ,GAAG,MAAM;AACxC,CAAC;AAED,IAAO,oBAAQ;",
+  "names": ["Hls"]
+}

package/dist/cjs/components/Skeleton.js

@@ -26,11 +26,12 @@ module.exports = __toCommonJS(Skeleton_exports);
 var import_css = require("@emotion/css");
 var import_deepsea_tools = require("deepsea-tools");
 var import_react = require("react");
-var Skeleton = (0, import_react.forwardRef)((props) => {
+var Skeleton = (0, import_react.forwardRef)((props, ref) => {
   const { className, ...rest } = props;
   return /* @__PURE__ */ React.createElement(
     "div",
     {
+      ref,
       className: (0, import_deepsea_tools.clsx)(
         import_css.css`
                     @keyframes shimmer {

package/dist/cjs/components/Skeleton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/Skeleton.tsx"],
-  "sourcesContent": ["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { forwardRef, HTMLAttributes } from \"react\"\r\n\r\nconst Skeleton = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(props => {\r\n    const { className, ...rest } = props\r\n\r\n    return (\r\n        <div\r\n            className={clsx(\r\n                css`\r\n                    @keyframes shimmer {\r\n                        0% {\r\n                            background-position: -400px 0px;\r\n                        }\r\n                        100% {\r\n                            background-position: 400px 0px;\r\n                        }\r\n                    }\r\n\r\n                    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);\r\n                    animation-duration: 1s;\r\n                    animation-fill-mode: forwards;\r\n                    animation-iteration-count: infinite;\r\n                    animation-name: shimmer;\r\n                    animation-timing-function: linear;\r\n                    background-size: 800px 104px;\r\n                `,\r\n                className\r\n            )}\r\n            {...rest}\r\n        />\r\n    )\r\n})\r\n\r\nexport default Skeleton\r\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAoB;AACpB,2BAAqB;AACrB,mBAA2C;AAE3C,IAAM,eAAW,yBAA2D,WAAS;AACjF,QAAM,EAAE,WAAW,GAAG,KAAK,IAAI;AAE/B,SACI;AAAA,IAAC;AAAA;AAAA,MACG,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAkBA;AAAA,MACJ;AAAA,MACC,GAAG;AAAA;AAAA,EACR;AAER,CAAC;AAED,IAAO,mBAAQ;",
+  "sourcesContent": ["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { forwardRef, HTMLAttributes } from \"react\"\r\n\r\nconst Skeleton = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>((props, ref) => {\r\n    const { className, ...rest } = props\r\n\r\n    return (\r\n        <div\r\n            ref={ref}\r\n            className={clsx(\r\n                css`\r\n                    @keyframes shimmer {\r\n                        0% {\r\n                            background-position: -400px 0px;\r\n                        }\r\n                        100% {\r\n                            background-position: 400px 0px;\r\n                        }\r\n                    }\r\n\r\n                    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);\r\n                    animation-duration: 1s;\r\n                    animation-fill-mode: forwards;\r\n                    animation-iteration-count: infinite;\r\n                    animation-name: shimmer;\r\n                    animation-timing-function: linear;\r\n                    background-size: 800px 104px;\r\n                `,\r\n                className\r\n            )}\r\n            {...rest}\r\n        />\r\n    )\r\n})\r\n\r\nexport default Skeleton\r\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAoB;AACpB,2BAAqB;AACrB,mBAA2C;AAE3C,IAAM,eAAW,yBAA2D,CAAC,OAAO,QAAQ;AACxF,QAAM,EAAE,WAAW,GAAG,KAAK,IAAI;AAE/B,SACI;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAkBA;AAAA,MACJ;AAAA,MACC,GAAG;AAAA;AAAA,EACR;AAER,CAAC;AAED,IAAO,mBAAQ;",
   "names": []
 }

package/dist/cjs/index.d.ts

@@ -3,6 +3,7 @@ export * from "./components/AutoScroll";
 export * from "./components/AutoSizeTextarea";
 export * from "./components/CircleText";
 export * from "./components/Flow";
+export * from "./components/HlsPlayer";
 export * from "./components/InputFile";
 export * from "./components/LoopSwiper";
 export * from "./components/Ring";

package/dist/cjs/index.js

@@ -21,6 +21,7 @@ __reExport(src_exports, require("./components/AutoScroll"), module.exports);
 __reExport(src_exports, require("./components/AutoSizeTextarea"), module.exports);
 __reExport(src_exports, require("./components/CircleText"), module.exports);
 __reExport(src_exports, require("./components/Flow"), module.exports);
+__reExport(src_exports, require("./components/HlsPlayer"), module.exports);
 __reExport(src_exports, require("./components/InputFile"), module.exports);
 __reExport(src_exports, require("./components/LoopSwiper"), module.exports);
 __reExport(src_exports, require("./components/Ring"), module.exports);
@@ -37,6 +38,7 @@ __reExport(src_exports, require("./components/Trapezium"), module.exports);
   ...require("./components/AutoSizeTextarea"),
   ...require("./components/CircleText"),
   ...require("./components/Flow"),
+  ...require("./components/HlsPlayer"),
   ...require("./components/InputFile"),
   ...require("./components/LoopSwiper"),
   ...require("./components/Ring"),

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx"],
-  "sourcesContent": ["export * from \"./components/AutoFit\"\r\nexport * from \"./components/AutoScroll\"\r\nexport * from \"./components/AutoSizeTextarea\"\r\nexport * from \"./components/CircleText\"\r\nexport * from \"./components/Flow\"\r\nexport * from \"./components/InputFile\"\r\nexport * from \"./components/LoopSwiper\"\r\nexport * from \"./components/Ring\"\r\nexport * from \"./components/Scroll\"\r\nexport * from \"./components/SectionRing\"\r\nexport * from \"./components/Skeleton\"\r\nexport * from \"./components/TransitionBox\"\r\nexport * from \"./components/TransitionNum\"\r\nexport * from \"./components/Trapezium\"\r\n"],
-  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,iCAAd;AACA,wBAAc,oCADd;AAEA,wBAAc,0CAFd;AAGA,wBAAc,oCAHd;AAIA,wBAAc,8BAJd;AAKA,wBAAc,mCALd;AAMA,wBAAc,oCANd;AAOA,wBAAc,8BAPd;AAQA,wBAAc,gCARd;AASA,wBAAc,qCATd;AAUA,wBAAc,kCAVd;AAWA,wBAAc,uCAXd;AAYA,wBAAc,uCAZd;AAaA,wBAAc,mCAbd;",
+  "sourcesContent": ["export * from \"./components/AutoFit\"\r\nexport * from \"./components/AutoScroll\"\r\nexport * from \"./components/AutoSizeTextarea\"\r\nexport * from \"./components/CircleText\"\r\nexport * from \"./components/Flow\"\r\nexport * from \"./components/HlsPlayer\"\r\nexport * from \"./components/InputFile\"\r\nexport * from \"./components/LoopSwiper\"\r\nexport * from \"./components/Ring\"\r\nexport * from \"./components/Scroll\"\r\nexport * from \"./components/SectionRing\"\r\nexport * from \"./components/Skeleton\"\r\nexport * from \"./components/TransitionBox\"\r\nexport * from \"./components/TransitionNum\"\r\nexport * from \"./components/Trapezium\"\r\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,iCAAd;AACA,wBAAc,oCADd;AAEA,wBAAc,0CAFd;AAGA,wBAAc,oCAHd;AAIA,wBAAc,8BAJd;AAKA,wBAAc,mCALd;AAMA,wBAAc,mCANd;AAOA,wBAAc,oCAPd;AAQA,wBAAc,8BARd;AASA,wBAAc,gCATd;AAUA,wBAAc,qCAVd;AAWA,wBAAc,kCAXd;AAYA,wBAAc,uCAZd;AAaA,wBAAc,uCAbd;AAcA,wBAAc,mCAdd;",
   "names": []
 }

package/dist/cjs/utils/index.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties } from "react";
+export type CSSVariableName = `--${string}`;
+export type CSSVariableValue = string | number;
+export interface StyleWithCSSVariable extends CSSProperties {
+    [X: CSSVariableName]: CSSVariableValue;
+}
+export declare function styleWithCSSVariable(style: StyleWithCSSVariable): CSSProperties;
+export declare function px(value: number): string;

package/dist/cjs/utils/index.js

@@ -0,0 +1,37 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/utils/index.ts
+var utils_exports = {};
+__export(utils_exports, {
+  px: () => px,
+  styleWithCSSVariable: () => styleWithCSSVariable
+});
+module.exports = __toCommonJS(utils_exports);
+function styleWithCSSVariable(style) {
+  return style;
+}
+function px(value) {
+  return `${value}px`;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  px,
+  styleWithCSSVariable
+});
+//# sourceMappingURL=index.js.map

package/dist/cjs/utils/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/utils/index.ts"],
+  "sourcesContent": ["import { CSSProperties } from \"react\"\r\n\r\nexport type CSSVariableName = `--${string}`\r\n\r\nexport type CSSVariableValue = string | number\r\n\r\nexport interface StyleWithCSSVariable extends CSSProperties {\r\n    [X: CSSVariableName]: CSSVariableValue\r\n}\r\n\r\nexport function styleWithCSSVariable(style: StyleWithCSSVariable): CSSProperties {\r\n    return style\r\n}\r\n\r\nexport function px(value: number): string {\r\n    return `${value}px`\r\n}"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUO,SAAS,qBAAqB,OAA4C;AAC7E,SAAO;AACX;AAEO,SAAS,GAAG,OAAuB;AACtC,SAAO,GAAG;AACd;",
+  "names": []
+}

package/dist/esm/components/Flow.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import { CSSProperties, HTMLAttributes, Key, ReactNode } from "react";
 export interface FlowSizeData {
     /** 容器宽度 */
     width: number;
@@ -37,9 +37,13 @@ export interface FlowProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, "chil
     /** 源数据 */
     data: T[];
     /** 渲染 */
-    render: (item: T, index: number, hidden: boolean) => ReactNode;
+    render: (item: T, index: number, arr: T[]) => ReactNode;
     /** key释放器，默认为 index */
-    keyExactor?: (item: T, index: number) => string | number;
+    keyExactor?: (item: T, index: number, arr: T[]) => Key;
+    /** 容器类名 */
+    wrapperClassName?: string;
+    /** 容器样式 */
+    wrapperStyle?: CSSProperties;
     /** 容器类名 */
     containerClassName?: string;
     /** 容器样式 */

package/dist/esm/components/Flow.js

@@ -1,6 +1,9 @@
 "use client";
 
+import { css } from "@emotion/css";
+import { clsx } from "deepsea-tools";
 import { useEffect, useRef, useState } from "react";
+import { px, styleWithCSSVariable } from "../utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getGapRange(gap) {
   if (typeof gap === "number") return [gap, gap];
@@ -28,11 +31,13 @@ export function Flow(props) {
     keyExactor,
     className,
     style,
-    containerClassName,
-    containerStyle,
+    wrapperClassName,
+    wrapperStyle,
     throttle,
     transitionDuration,
     onSizeChange,
+    containerClassName,
+    containerStyle,
     ...rest
   } = props;
   const [minColumnGap, maxColumnGap] = getGapRange(columnGap);
@@ -98,33 +103,46 @@ export function Flow(props) {
   }, [width, height, columnGapSize, columnCount, rowGap, contentShownRows, data.length, itemWidth, itemHeight, maxRows]);
   return /*#__PURE__*/_jsx("div", {
     ref: ele,
-    className: className,
-    style: {
-      position: "relative",
-      boxSizing: "border-box",
-      height,
-      ...style
-    },
+    className: clsx(css`
+                    position: relative;
+                    height: var(--height);
+                    overflow: hidden;
+                `, className),
+    style: styleWithCSSVariable({
+      "--height": px(height)
+    }),
     ...rest,
-    children: showItems && data.map((item, index) => /*#__PURE__*/_jsx("div", {
-      className: containerClassName,
-      style: {
-        position: "absolute",
-        width: itemWidth,
-        height: itemHeight,
-        transition: transitionDuration !== null ? `all ${transitionDuration ?? 400}ms` : undefined,
-        ...getPosition(index)
-      },
+    children: showItems && data.map((item, index, arr) => /*#__PURE__*/_jsx("div", {
+      className: clsx(css`
+                                position: absolute;
+                                width: var(--width);
+                                height: var(--height);
+                                transition: var(--transition);
+                                left: 0;
+                                top: 0;
+                                transform: translate(var(--left), var(--top));
+                            `, wrapperClassName),
+      style: styleWithCSSVariable({
+        "--width": px(itemWidth),
+        "--height": px(itemHeight),
+        "--transition": transitionDuration === null ? "none" : `all ${transitionDuration || 400}ms`,
+        "--left": px(getPosition(index).left),
+        "--top": px(getPosition(index).top),
+        ...wrapperStyle
+      }),
       children: /*#__PURE__*/_jsx("div", {
-        style: {
-          width: itemWidth,
-          height: itemHeight,
-          display: maxRows && index >= maxRows * columnCount ? "none" : "block",
+        className: clsx(css`
+                                    width: 100%;
+                                    height: 100%;
+                                    display: var(--display);
+                                `, containerClassName),
+        style: styleWithCSSVariable({
+          "--display": getHidden(index) ? "none" : "block",
           ...containerStyle
-        },
-        children: render(item, index, getHidden(index))
+        }),
+        children: render(item, index, arr)
       })
-    }, keyExactor ? keyExactor(item, index) : index))
+    }, keyExactor ? keyExactor(item, index, arr) : index))
   });
 }
 //# sourceMappingURL=Flow.js.map

package/dist/esm/components/Flow.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useRef","useState","jsx","_jsx","getGapRange","gap","Array","isArray","getGapCountAndSize","width","itemWidth","minGap","maxGap","count","Math","floor","averageGap","Flow","props","itemHeight","columnGap","rowGap","maxRows","data","render","keyExactor","className","style","containerClassName","containerStyle","throttle","transitionDuration","onSizeChange","rest","minColumnGap","maxColumnGap","setWidth","columnCount","setColumnCount","columnGapSize","setColumnGapSize","showItems","setShowItems","ele","contentRows","ceil","length","contentShownRows","min","height","getPosition","index","y","x","left","top","getHidden","timeout","observer","ResizeObserver","entries","clearTimeout","task","contentRect","newColumnCount","newColumnGapSize","window","setTimeout","observe","current","disconnect","rowCount","overflow","itemCount","ref","position","boxSizing","children","map","item","transition","undefined","display"],"sources":["../../../src/components/Flow.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport { CSSProperties, HTMLAttributes, ReactNode, useEffect, useRef, useState } from \"react\"\r\n\r\nexport interface FlowSizeData {\r\n    /** 容器宽度 */\r\n    width: number\r\n    /** 容器高度 */\r\n    height: number\r\n    /** 元素宽度 */\r\n    itemWidth: number\r\n    /** 元素高度 */\r\n    itemHeight: number\r\n    /** 列间距 */\r\n    columnGap: number\r\n    /** 列数 */\r\n    columnCount: number\r\n    /** 行间距 */\r\n    rowGap: number\r\n    /** 行数 */\r\n    rowCount: number\r\n    /** 元素格数 */\r\n    itemCount: number\r\n    /** 最大行数 */\r\n    maxRows: number | null\r\n    /** 是否有元素被隐藏 */\r\n    overflow: boolean\r\n}\r\n\r\nexport interface FlowProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\r\n    /** 元素宽度 */\r\n    itemWidth: number\r\n    /** 元素高度 */\r\n    itemHeight: number\r\n    /** 列间距 */\r\n    columnGap?: number | null | (number | null)[]\r\n    /** 行间距 */\r\n    rowGap?: number\r\n    /** 最大行数 */\r\n    maxRows?: number | null\r\n    /** 源数据 */\r\n    data: T[]\r\n    /** 渲染 */\r\n    render: (item: T, index: number, hidden: boolean) => ReactNode\r\n    /** key释放器，默认为 index */\r\n    keyExactor?: (item: T, index: number) => string | number\r\n    /** 容器类名 */\r\n    containerClassName?: string\r\n    /** 容器样式 */\r\n    containerStyle?: CSSProperties\r\n    /** 节流时间，单位毫秒，默认200ms，传入 null 不节流 */\r\n    throttle?: number | null\r\n    /** 动画时间，单位毫秒，默认400ms，传入 null 不展示动画 */\r\n    transitionDuration?: number | null\r\n    /** 变化的回调函数 */\r\n    onSizeChange?: (sizeData: FlowSizeData) => void\r\n}\r\n\r\nexport function getGapRange(gap?: undefined | number | null | (number | null)[]): [number, number | null] {\r\n    if (typeof gap === \"number\") return [gap, gap]\r\n    if (Array.isArray(gap)) return [gap[0] || 0, gap[1]]\r\n    return [0, null]\r\n}\r\n\r\nexport function getGapCountAndSize(width: number, itemWidth: number, minGap: number, maxGap: number | null): [number, number] {\r\n    const count = Math.floor((width + minGap) / (itemWidth + minGap)) || 1\r\n    if (count === 1) return [count, 0]\r\n    const averageGap = (width - itemWidth * count) / (count - 1)\r\n    if (averageGap < minGap) return [count, minGap]\r\n    if (maxGap !== null && averageGap > maxGap) return [count, maxGap]\r\n    return [count, averageGap]\r\n}\r\n\r\ninterface Position {\r\n    left: number\r\n    top: number\r\n}\r\n\r\n/** 自适应浮动组件 */\r\nexport function Flow<T>(props: FlowProps<T>) {\r\n    const { itemWidth, itemHeight, columnGap, rowGap = 0, maxRows, data, render, keyExactor, className, style, containerClassName, containerStyle, throttle, transitionDuration, onSizeChange, ...rest } = props\r\n    const [minColumnGap, maxColumnGap] = getGapRange(columnGap)\r\n    const [width, setWidth] = useState(0)\r\n    const [columnCount, setColumnCount] = useState(1)\r\n    const [columnGapSize, setColumnGapSize] = useState(minColumnGap)\r\n    const [showItems, setShowItems] = useState(false)\r\n    const ele = useRef<HTMLDivElement>(null)\r\n    const contentRows = Math.ceil(data.length / columnCount)\r\n    const contentShownRows = typeof maxRows === \"number\" ? Math.min(contentRows, maxRows) : contentRows\r\n    const height = contentShownRows > 0 ? contentShownRows * (itemHeight + rowGap) - rowGap : 0\r\n\r\n    function getPosition(index: number): Position {\r\n        const y = Math.floor(index / columnCount)\r\n        const x = index - y * columnCount\r\n        return {\r\n            left: x * (itemWidth + columnGapSize),\r\n            top: y * (itemHeight + rowGap)\r\n        }\r\n    }\r\n\r\n    function getHidden(index: number) {\r\n        if (typeof maxRows !== \"number\") return false\r\n        return index >= maxRows * columnCount\r\n    }\r\n\r\n    useEffect(() => {\r\n        let timeout: number\r\n        const observer = new ResizeObserver(entries => {\r\n            clearTimeout(timeout)\r\n            function task() {\r\n                const { width } = entries[0].contentRect\r\n                const [newColumnCount, newColumnGapSize] = getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap)\r\n                setShowItems(true)\r\n                setWidth(width)\r\n                setColumnCount(newColumnCount)\r\n                setColumnGapSize(newColumnGapSize)\r\n            }\r\n            if (throttle === null) {\r\n                task()\r\n            } else {\r\n                timeout = window.setTimeout(task, throttle || 200)\r\n            }\r\n        })\r\n        observer.observe(ele.current!)\r\n\r\n        return () => {\r\n            observer.disconnect()\r\n        }\r\n    }, [itemWidth, throttle, columnGap])\r\n\r\n    useEffect(() => {\r\n        onSizeChange?.({ width, height, itemWidth, itemHeight, columnGap: columnGapSize, columnCount, rowGap, rowCount: contentShownRows, overflow: data.length > contentShownRows * columnCount, itemCount: data.length, maxRows: maxRows ?? null })\r\n    }, [width, height, columnGapSize, columnCount, rowGap, contentShownRows, data.length, itemWidth, itemHeight, maxRows])\r\n\r\n    return (\r\n        <div ref={ele} className={className} style={{ position: \"relative\", boxSizing: \"border-box\", height, ...style }} {...rest}>\r\n            {showItems &&\r\n                data.map((item, index) => (\r\n                    <div\r\n                        key={keyExactor ? keyExactor(item, index) : index}\r\n                        className={containerClassName}\r\n                        style={{\r\n                            position: \"absolute\",\r\n                            width: itemWidth,\r\n                            height: itemHeight,\r\n                            transition: transitionDuration !== null ? `all ${transitionDuration ?? 400}ms` : undefined,\r\n                            ...getPosition(index)\r\n                        }}>\r\n                        <div style={{ width: itemWidth, height: itemHeight, display: maxRows && index >= maxRows * columnCount ? \"none\" : \"block\", ...containerStyle }}>{render(item, index, getHidden(index))}</div>\r\n                    </div>\r\n                ))}\r\n        </div>\r\n    )\r\n}\r\n"],"mappings":"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"}
+{"version":3,"names":["css","clsx","useEffect","useRef","useState","px","styleWithCSSVariable","jsx","_jsx","getGapRange","gap","Array","isArray","getGapCountAndSize","width","itemWidth","minGap","maxGap","count","Math","floor","averageGap","Flow","props","itemHeight","columnGap","rowGap","maxRows","data","render","keyExactor","className","style","wrapperClassName","wrapperStyle","throttle","transitionDuration","onSizeChange","containerClassName","containerStyle","rest","minColumnGap","maxColumnGap","setWidth","columnCount","setColumnCount","columnGapSize","setColumnGapSize","showItems","setShowItems","ele","contentRows","ceil","length","contentShownRows","min","height","getPosition","index","y","x","left","top","getHidden","timeout","observer","ResizeObserver","entries","clearTimeout","task","contentRect","newColumnCount","newColumnGapSize","window","setTimeout","observe","current","disconnect","rowCount","overflow","itemCount","ref","children","map","item","arr"],"sources":["../../../src/components/Flow.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { CSSProperties, HTMLAttributes, Key, ReactNode, useEffect, useRef, useState } from \"react\"\r\nimport { px, styleWithCSSVariable } from \"../utils\"\r\n\r\nexport interface FlowSizeData {\r\n    /** 容器宽度 */\r\n    width: number\r\n    /** 容器高度 */\r\n    height: number\r\n    /** 元素宽度 */\r\n    itemWidth: number\r\n    /** 元素高度 */\r\n    itemHeight: number\r\n    /** 列间距 */\r\n    columnGap: number\r\n    /** 列数 */\r\n    columnCount: number\r\n    /** 行间距 */\r\n    rowGap: number\r\n    /** 行数 */\r\n    rowCount: number\r\n    /** 元素格数 */\r\n    itemCount: number\r\n    /** 最大行数 */\r\n    maxRows: number | null\r\n    /** 是否有元素被隐藏 */\r\n    overflow: boolean\r\n}\r\n\r\nexport interface FlowProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\r\n    /** 元素宽度 */\r\n    itemWidth: number\r\n    /** 元素高度 */\r\n    itemHeight: number\r\n    /** 列间距 */\r\n    columnGap?: number | null | (number | null)[]\r\n    /** 行间距 */\r\n    rowGap?: number\r\n    /** 最大行数 */\r\n    maxRows?: number | null\r\n    /** 源数据 */\r\n    data: T[]\r\n    /** 渲染 */\r\n    render: (item: T, index: number, arr: T[]) => ReactNode\r\n    /** key释放器，默认为 index */\r\n    keyExactor?: (item: T, index: number, arr: T[]) => Key\r\n    /** 容器类名 */\r\n    wrapperClassName?: string\r\n    /** 容器样式 */\r\n    wrapperStyle?: CSSProperties\r\n    /** 容器类名 */\r\n    containerClassName?: string\r\n    /** 容器样式 */\r\n    containerStyle?: CSSProperties\r\n    /** 节流时间，单位毫秒，默认200ms，传入 null 不节流 */\r\n    throttle?: number | null\r\n    /** 动画时间，单位毫秒，默认400ms，传入 null 不展示动画 */\r\n    transitionDuration?: number | null\r\n    /** 变化的回调函数 */\r\n    onSizeChange?: (sizeData: FlowSizeData) => void\r\n}\r\n\r\nexport function getGapRange(gap?: undefined | number | null | (number | null)[]): [number, number | null] {\r\n    if (typeof gap === \"number\") return [gap, gap]\r\n    if (Array.isArray(gap)) return [gap[0] || 0, gap[1]]\r\n    return [0, null]\r\n}\r\n\r\nexport function getGapCountAndSize(width: number, itemWidth: number, minGap: number, maxGap: number | null): [number, number] {\r\n    const count = Math.floor((width + minGap) / (itemWidth + minGap)) || 1\r\n    if (count === 1) return [count, 0]\r\n    const averageGap = (width - itemWidth * count) / (count - 1)\r\n    if (averageGap < minGap) return [count, minGap]\r\n    if (maxGap !== null && averageGap > maxGap) return [count, maxGap]\r\n    return [count, averageGap]\r\n}\r\n\r\ninterface Position {\r\n    left: number\r\n    top: number\r\n}\r\n\r\n/** 自适应浮动组件 */\r\nexport function Flow<T>(props: FlowProps<T>) {\r\n    const { itemWidth, itemHeight, columnGap, rowGap = 0, maxRows, data, render, keyExactor, className, style, wrapperClassName, wrapperStyle, throttle, transitionDuration, onSizeChange, containerClassName, containerStyle, ...rest } = props\r\n    const [minColumnGap, maxColumnGap] = getGapRange(columnGap)\r\n    const [width, setWidth] = useState(0)\r\n    const [columnCount, setColumnCount] = useState(1)\r\n    const [columnGapSize, setColumnGapSize] = useState(minColumnGap)\r\n    const [showItems, setShowItems] = useState(false)\r\n    const ele = useRef<HTMLDivElement>(null)\r\n    const contentRows = Math.ceil(data.length / columnCount)\r\n    const contentShownRows = typeof maxRows === \"number\" ? Math.min(contentRows, maxRows) : contentRows\r\n    const height = contentShownRows > 0 ? contentShownRows * (itemHeight + rowGap) - rowGap : 0\r\n\r\n    function getPosition(index: number): Position {\r\n        const y = Math.floor(index / columnCount)\r\n        const x = index - y * columnCount\r\n        return {\r\n            left: x * (itemWidth + columnGapSize),\r\n            top: y * (itemHeight + rowGap)\r\n        }\r\n    }\r\n\r\n    function getHidden(index: number) {\r\n        if (typeof maxRows !== \"number\") return false\r\n        return index >= maxRows * columnCount\r\n    }\r\n\r\n    useEffect(() => {\r\n        let timeout: number\r\n        const observer = new ResizeObserver(entries => {\r\n            clearTimeout(timeout)\r\n            function task() {\r\n                const { width } = entries[0].contentRect\r\n                const [newColumnCount, newColumnGapSize] = getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap)\r\n                setShowItems(true)\r\n                setWidth(width)\r\n                setColumnCount(newColumnCount)\r\n                setColumnGapSize(newColumnGapSize)\r\n            }\r\n            if (throttle === null) {\r\n                task()\r\n            } else {\r\n                timeout = window.setTimeout(task, throttle || 200)\r\n            }\r\n        })\r\n        observer.observe(ele.current!)\r\n\r\n        return () => {\r\n            observer.disconnect()\r\n        }\r\n    }, [itemWidth, throttle, columnGap])\r\n\r\n    useEffect(() => {\r\n        onSizeChange?.({ width, height, itemWidth, itemHeight, columnGap: columnGapSize, columnCount, rowGap, rowCount: contentShownRows, overflow: data.length > contentShownRows * columnCount, itemCount: data.length, maxRows: maxRows ?? null })\r\n    }, [width, height, columnGapSize, columnCount, rowGap, contentShownRows, data.length, itemWidth, itemHeight, maxRows])\r\n\r\n    return (\r\n        <div\r\n            ref={ele}\r\n            className={clsx(\r\n                css`\r\n                    position: relative;\r\n                    height: var(--height);\r\n                    overflow: hidden;\r\n                `,\r\n                className\r\n            )}\r\n            style={styleWithCSSVariable({ \"--height\": px(height) })}\r\n            {...rest}>\r\n            {showItems &&\r\n                data.map((item, index, arr) => (\r\n                    <div\r\n                        key={keyExactor ? keyExactor(item, index, arr) : index}\r\n                        className={clsx(\r\n                            css`\r\n                                position: absolute;\r\n                                width: var(--width);\r\n                                height: var(--height);\r\n                                transition: var(--transition);\r\n                                left: 0;\r\n                                top: 0;\r\n                                transform: translate(var(--left), var(--top));\r\n                            `,\r\n                            wrapperClassName\r\n                        )}\r\n                        style={styleWithCSSVariable({\r\n                            \"--width\": px(itemWidth),\r\n                            \"--height\": px(itemHeight),\r\n                            \"--transition\": transitionDuration === null ? \"none\" : `all ${transitionDuration || 400}ms`,\r\n                            \"--left\": px(getPosition(index).left),\r\n                            \"--top\": px(getPosition(index).top),\r\n                            ...wrapperStyle\r\n                        })}>\r\n                        <div\r\n                            className={clsx(\r\n                                css`\r\n                                    width: 100%;\r\n                                    height: 100%;\r\n                                    display: var(--display);\r\n                                `,\r\n                                containerClassName\r\n                            )}\r\n                            style={styleWithCSSVariable({ \"--display\": getHidden(index) ? \"none\" : \"block\", ...containerStyle })}>\r\n                            {render(item, index, arr)}\r\n                        </div>\r\n                    </div>\r\n                ))}\r\n        </div>\r\n    )\r\n}\r\n"],"mappings":"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"}

package/dist/esm/components/HlsPlayer.d.ts

@@ -0,0 +1,6 @@
+import { MediaHTMLAttributes } from "react";
+export interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, "src"> {
+    src: string;
+}
+declare const HlsPlayer: import("react").ForwardRefExoticComponent<HlsPlayerProps & import("react").RefAttributes<HTMLVideoElement>>;
+export default HlsPlayer;

package/dist/esm/components/HlsPlayer.js

@@ -0,0 +1,39 @@
+"use client";
+
+import Hls from "hls.js";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const HlsPlayer = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    src,
+    ...rest
+  } = props;
+  const video = useRef(null);
+  useImperativeHandle(ref, () => video.current, []);
+  useEffect(() => {
+    const {
+      current: player
+    } = video;
+    if (!player || !src) return;
+    if (player.canPlayType("application/vnd.apple.mpegurl")) {
+      player.src = src;
+      player.play();
+      return;
+    }
+    if (Hls.isSupported()) {
+      const hls = new Hls();
+      hls.loadSource(src);
+      hls.attachMedia(player);
+      player.play();
+      return () => {
+        hls.destroy();
+      };
+    }
+  }, [src]);
+  return /*#__PURE__*/_jsx("video", {
+    ref: video,
+    ...rest
+  });
+});
+export default HlsPlayer;
+//# sourceMappingURL=HlsPlayer.js.map

package/dist/esm/components/HlsPlayer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Hls","forwardRef","useEffect","useImperativeHandle","useRef","jsx","_jsx","HlsPlayer","props","ref","src","rest","video","current","player","canPlayType","play","isSupported","hls","loadSource","attachMedia","destroy"],"sources":["../../../src/components/HlsPlayer.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport Hls from \"hls.js\"\r\nimport { MediaHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\r\n\r\nexport interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, \"src\"> {\r\n    src: string\r\n}\r\n\r\nconst HlsPlayer = forwardRef<HTMLVideoElement, HlsPlayerProps>((props, ref) => {\r\n    const { src, ...rest } = props\r\n    const video = useRef<HTMLVideoElement>(null)\r\n\r\n    useImperativeHandle(ref, () => video.current!, [])\r\n\r\n    useEffect(() => {\r\n        const { current: player } = video\r\n        if (!player || !src) return\r\n        if (player.canPlayType(\"application/vnd.apple.mpegurl\")) {\r\n            player.src = src\r\n            player.play()\r\n            return\r\n        }\r\n        if (Hls.isSupported()) {\r\n            const hls = new Hls()\r\n            hls.loadSource(src)\r\n            hls.attachMedia(player)\r\n            player.play()\r\n            return () => {\r\n                hls.destroy()\r\n            }\r\n        }\r\n    }, [src])\r\n\r\n    return <video ref={video} {...rest} />\r\n})\r\n\r\nexport default HlsPlayer\r\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,GAAG,MAAM,QAAQ;AACxB,SAA8BC,UAAU,EAAEC,SAAS,EAAEC,mBAAmB,EAAEC,MAAM,QAAQ,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAM/F,MAAMC,SAAS,gBAAGN,UAAU,CAAmC,CAACO,KAAK,EAAEC,GAAG,KAAK;EAC3E,MAAM;IAAEC,GAAG;IAAE,GAAGC;EAAK,CAAC,GAAGH,KAAK;EAC9B,MAAMI,KAAK,GAAGR,MAAM,CAAmB,IAAI,CAAC;EAE5CD,mBAAmB,CAACM,GAAG,EAAE,MAAMG,KAAK,CAACC,OAAQ,EAAE,EAAE,CAAC;EAElDX,SAAS,CAAC,MAAM;IACZ,MAAM;MAAEW,OAAO,EAAEC;IAAO,CAAC,GAAGF,KAAK;IACjC,IAAI,CAACE,MAAM,IAAI,CAACJ,GAAG,EAAE;IACrB,IAAII,MAAM,CAACC,WAAW,CAAC,+BAA+B,CAAC,EAAE;MACrDD,MAAM,CAACJ,GAAG,GAAGA,GAAG;MAChBI,MAAM,CAACE,IAAI,CAAC,CAAC;MACb;IACJ;IACA,IAAIhB,GAAG,CAACiB,WAAW,CAAC,CAAC,EAAE;MACnB,MAAMC,GAAG,GAAG,IAAIlB,GAAG,CAAC,CAAC;MACrBkB,GAAG,CAACC,UAAU,CAACT,GAAG,CAAC;MACnBQ,GAAG,CAACE,WAAW,CAACN,MAAM,CAAC;MACvBA,MAAM,CAACE,IAAI,CAAC,CAAC;MACb,OAAO,MAAM;QACTE,GAAG,CAACG,OAAO,CAAC,CAAC;MACjB,CAAC;IACL;EACJ,CAAC,EAAE,CAACX,GAAG,CAAC,CAAC;EAET,oBAAOJ,IAAA;IAAOG,GAAG,EAAEG,KAAM;IAAA,GAAKD;EAAI,CAAG,CAAC;AAC1C,CAAC,CAAC;AAEF,eAAeJ,SAAS"}

package/dist/esm/components/Skeleton.js

@@ -4,12 +4,13 @@ import { css } from "@emotion/css";
 import { clsx } from "deepsea-tools";
 import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-const Skeleton = /*#__PURE__*/forwardRef(props => {
+const Skeleton = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     className,
     ...rest
   } = props;
   return /*#__PURE__*/_jsx("div", {
+    ref: ref,
     className: clsx(css`
                     @keyframes shimmer {
                         0% {

package/dist/esm/components/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"names":["css","clsx","forwardRef","jsx","_jsx","Skeleton","props","className","rest"],"sources":["../../../src/components/Skeleton.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { forwardRef, HTMLAttributes } from \"react\"\r\n\r\nconst Skeleton = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(props => {\r\n    const { className, ...rest } = props\r\n\r\n    return (\r\n        <div\r\n            className={clsx(\r\n                css`\r\n                    @keyframes shimmer {\r\n                        0% {\r\n                            background-position: -400px 0px;\r\n                        }\r\n                        100% {\r\n                            background-position: 400px 0px;\r\n                        }\r\n                    }\r\n\r\n                    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);\r\n                    animation-duration: 1s;\r\n                    animation-fill-mode: forwards;\r\n                    animation-iteration-count: infinite;\r\n                    animation-name: shimmer;\r\n                    animation-timing-function: linear;\r\n                    background-size: 800px 104px;\r\n                `,\r\n                className\r\n            )}\r\n            {...rest}\r\n        />\r\n    )\r\n})\r\n\r\nexport default Skeleton\r\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,GAAG,QAAQ,cAAc;AAClC,SAASC,IAAI,QAAQ,eAAe;AACpC,SAASC,UAAU,QAAwB,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAElD,MAAMC,QAAQ,gBAAGH,UAAU,CAAiDI,KAAK,IAAI;EACjF,MAAM;IAAEC,SAAS;IAAE,GAAGC;EAAK,CAAC,GAAGF,KAAK;EAEpC,oBACIF,IAAA;IACIG,SAAS,EAAEN,IAAI,CACXD,GAAI;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,EACDO,SACJ,CAAE;IAAA,GACEC;EAAI,CACX,CAAC;AAEV,CAAC,CAAC;AAEF,eAAeH,QAAQ"}
+{"version":3,"names":["css","clsx","forwardRef","jsx","_jsx","Skeleton","props","ref","className","rest"],"sources":["../../../src/components/Skeleton.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { forwardRef, HTMLAttributes } from \"react\"\r\n\r\nconst Skeleton = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>((props, ref) => {\r\n    const { className, ...rest } = props\r\n\r\n    return (\r\n        <div\r\n            ref={ref}\r\n            className={clsx(\r\n                css`\r\n                    @keyframes shimmer {\r\n                        0% {\r\n                            background-position: -400px 0px;\r\n                        }\r\n                        100% {\r\n                            background-position: 400px 0px;\r\n                        }\r\n                    }\r\n\r\n                    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);\r\n                    animation-duration: 1s;\r\n                    animation-fill-mode: forwards;\r\n                    animation-iteration-count: infinite;\r\n                    animation-name: shimmer;\r\n                    animation-timing-function: linear;\r\n                    background-size: 800px 104px;\r\n                `,\r\n                className\r\n            )}\r\n            {...rest}\r\n        />\r\n    )\r\n})\r\n\r\nexport default Skeleton\r\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,GAAG,QAAQ,cAAc;AAClC,SAASC,IAAI,QAAQ,eAAe;AACpC,SAASC,UAAU,QAAwB,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAElD,MAAMC,QAAQ,gBAAGH,UAAU,CAAiD,CAACI,KAAK,EAAEC,GAAG,KAAK;EACxF,MAAM;IAAEC,SAAS;IAAE,GAAGC;EAAK,CAAC,GAAGH,KAAK;EAEpC,oBACIF,IAAA;IACIG,GAAG,EAAEA,GAAI;IACTC,SAAS,EAAEP,IAAI,CACXD,GAAI;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,EACDQ,SACJ,CAAE;IAAA,GACEC;EAAI,CACX,CAAC;AAEV,CAAC,CAAC;AAEF,eAAeJ,QAAQ"}

package/dist/esm/index.d.ts

@@ -3,6 +3,7 @@ export * from "./components/AutoScroll";
 export * from "./components/AutoSizeTextarea";
 export * from "./components/CircleText";
 export * from "./components/Flow";
+export * from "./components/HlsPlayer";
 export * from "./components/InputFile";
 export * from "./components/LoopSwiper";
 export * from "./components/Ring";

package/dist/esm/index.js

@@ -3,6 +3,7 @@ export * from "./components/AutoScroll";
 export * from "./components/AutoSizeTextarea";
 export * from "./components/CircleText";
 export * from "./components/Flow";
+export * from "./components/HlsPlayer";
 export * from "./components/InputFile";
 export * from "./components/LoopSwiper";
 export * from "./components/Ring";

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../src/index.tsx"],"sourcesContent":["export * from \"./components/AutoFit\"\r\nexport * from \"./components/AutoScroll\"\r\nexport * from \"./components/AutoSizeTextarea\"\r\nexport * from \"./components/CircleText\"\r\nexport * from \"./components/Flow\"\r\nexport * from \"./components/InputFile\"\r\nexport * from \"./components/LoopSwiper\"\r\nexport * from \"./components/Ring\"\r\nexport * from \"./components/Scroll\"\r\nexport * from \"./components/SectionRing\"\r\nexport * from \"./components/Skeleton\"\r\nexport * from \"./components/TransitionBox\"\r\nexport * from \"./components/TransitionNum\"\r\nexport * from \"./components/Trapezium\"\r\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
+{"version":3,"names":[],"sources":["../../src/index.tsx"],"sourcesContent":["export * from \"./components/AutoFit\"\r\nexport * from \"./components/AutoScroll\"\r\nexport * from \"./components/AutoSizeTextarea\"\r\nexport * from \"./components/CircleText\"\r\nexport * from \"./components/Flow\"\r\nexport * from \"./components/HlsPlayer\"\r\nexport * from \"./components/InputFile\"\r\nexport * from \"./components/LoopSwiper\"\r\nexport * from \"./components/Ring\"\r\nexport * from \"./components/Scroll\"\r\nexport * from \"./components/SectionRing\"\r\nexport * from \"./components/Skeleton\"\r\nexport * from \"./components/TransitionBox\"\r\nexport * from \"./components/TransitionNum\"\r\nexport * from \"./components/Trapezium\"\r\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}

package/dist/esm/utils/index.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties } from "react";
+export type CSSVariableName = `--${string}`;
+export type CSSVariableValue = string | number;
+export interface StyleWithCSSVariable extends CSSProperties {
+    [X: CSSVariableName]: CSSVariableValue;
+}
+export declare function styleWithCSSVariable(style: StyleWithCSSVariable): CSSProperties;
+export declare function px(value: number): string;

package/dist/esm/utils/index.js

@@ -0,0 +1,7 @@
+export function styleWithCSSVariable(style) {
+  return style;
+}
+export function px(value) {
+  return `${value}px`;
+}
+//# sourceMappingURL=index.js.map

package/dist/esm/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["styleWithCSSVariable","style","px","value"],"sources":["../../../src/utils/index.ts"],"sourcesContent":["import { CSSProperties } from \"react\"\r\n\r\nexport type CSSVariableName = `--${string}`\r\n\r\nexport type CSSVariableValue = string | number\r\n\r\nexport interface StyleWithCSSVariable extends CSSProperties {\r\n    [X: CSSVariableName]: CSSVariableValue\r\n}\r\n\r\nexport function styleWithCSSVariable(style: StyleWithCSSVariable): CSSProperties {\r\n    return style\r\n}\r\n\r\nexport function px(value: number): string {\r\n    return `${value}px`\r\n}"],"mappings":"AAUA,OAAO,SAASA,oBAAoBA,CAACC,KAA2B,EAAiB;EAC7E,OAAOA,KAAK;AAChB;AAEA,OAAO,SAASC,EAAEA,CAACC,KAAa,EAAU;EACtC,OAAQ,GAAEA,KAAM,IAAG;AACvB"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "deepsea-components",
-    "version": "3.0.0",
+    "version": "3.0.2-beta.20240527145411",
     "description": "格数科技自用组件库",
     "main": "dist/cjs/index.js",
     "module": "dist/esm/index.js",
@@ -33,6 +33,7 @@
         "@emotion/css": "^11.11.2",
         "ahooks": "^3.7.11",
         "deepsea-tools": "npm:deepsea-tools@latest",
+        "hls.js": "^1.5.8",
         "smooth-scrollbar": "^8.8.4",
         "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz"
     },
@@ -41,6 +42,6 @@
         "father": "^4.4.1"
     },
     "peerDependencies": {
-        "react": ">=16.8.0"
+        "react": "^18.3.1"
     }
-}
+}

package/src/components/Flow.tsx

@@ -1,6 +1,9 @@
 "use client"
 
-import { CSSProperties, HTMLAttributes, ReactNode, useEffect, useRef, useState } from "react"
+import { css } from "@emotion/css"
+import { clsx } from "deepsea-tools"
+import { CSSProperties, HTMLAttributes, Key, ReactNode, useEffect, useRef, useState } from "react"
+import { px, styleWithCSSVariable } from "../utils"
 
 export interface FlowSizeData {
     /** 容器宽度 */
@@ -41,9 +44,13 @@ export interface FlowProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, "chil
     /** 源数据 */
     data: T[]
     /** 渲染 */
-    render: (item: T, index: number, hidden: boolean) => ReactNode
+    render: (item: T, index: number, arr: T[]) => ReactNode
     /** key释放器，默认为 index */
-    keyExactor?: (item: T, index: number) => string | number
+    keyExactor?: (item: T, index: number, arr: T[]) => Key
+    /** 容器类名 */
+    wrapperClassName?: string
+    /** 容器样式 */
+    wrapperStyle?: CSSProperties
     /** 容器类名 */
     containerClassName?: string
     /** 容器样式 */
@@ -78,7 +85,7 @@ interface Position {
 
 /** 自适应浮动组件 */
 export function Flow<T>(props: FlowProps<T>) {
-    const { itemWidth, itemHeight, columnGap, rowGap = 0, maxRows, data, render, keyExactor, className, style, containerClassName, containerStyle, throttle, transitionDuration, onSizeChange, ...rest } = props
+    const { itemWidth, itemHeight, columnGap, rowGap = 0, maxRows, data, render, keyExactor, className, style, wrapperClassName, wrapperStyle, throttle, transitionDuration, onSizeChange, containerClassName, containerStyle, ...rest } = props
     const [minColumnGap, maxColumnGap] = getGapRange(columnGap)
     const [width, setWidth] = useState(0)
     const [columnCount, setColumnCount] = useState(1)
@@ -133,20 +140,54 @@ export function Flow<T>(props: FlowProps<T>) {
     }, [width, height, columnGapSize, columnCount, rowGap, contentShownRows, data.length, itemWidth, itemHeight, maxRows])
 
     return (
-        <div ref={ele} className={className} style={{ position: "relative", boxSizing: "border-box", height, ...style }} {...rest}>
+        <div
+            ref={ele}
+            className={clsx(
+                css`
+                    position: relative;
+                    height: var(--height);
+                    overflow: hidden;
+                `,
+                className
+            )}
+            style={styleWithCSSVariable({ "--height": px(height) })}
+            {...rest}>
             {showItems &&
-                data.map((item, index) => (
+                data.map((item, index, arr) => (
                     <div
-                        key={keyExactor ? keyExactor(item, index) : index}
-                        className={containerClassName}
-                        style={{
-                            position: "absolute",
-                            width: itemWidth,
-                            height: itemHeight,
-                            transition: transitionDuration !== null ? `all ${transitionDuration ?? 400}ms` : undefined,
-                            ...getPosition(index)
-                        }}>
-                        <div style={{ width: itemWidth, height: itemHeight, display: maxRows && index >= maxRows * columnCount ? "none" : "block", ...containerStyle }}>{render(item, index, getHidden(index))}</div>
+                        key={keyExactor ? keyExactor(item, index, arr) : index}
+                        className={clsx(
+                            css`
+                                position: absolute;
+                                width: var(--width);
+                                height: var(--height);
+                                transition: var(--transition);
+                                left: 0;
+                                top: 0;
+                                transform: translate(var(--left), var(--top));
+                            `,
+                            wrapperClassName
+                        )}
+                        style={styleWithCSSVariable({
+                            "--width": px(itemWidth),
+                            "--height": px(itemHeight),
+                            "--transition": transitionDuration === null ? "none" : `all ${transitionDuration || 400}ms`,
+                            "--left": px(getPosition(index).left),
+                            "--top": px(getPosition(index).top),
+                            ...wrapperStyle
+                        })}>
+                        <div
+                            className={clsx(
+                                css`
+                                    width: 100%;
+                                    height: 100%;
+                                    display: var(--display);
+                                `,
+                                containerClassName
+                            )}
+                            style={styleWithCSSVariable({ "--display": getHidden(index) ? "none" : "block", ...containerStyle })}>
+                            {render(item, index, arr)}
+                        </div>
                     </div>
                 ))}
         </div>

package/src/components/HlsPlayer.tsx

@@ -0,0 +1,38 @@
+"use client"
+
+import Hls from "hls.js"
+import { MediaHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
+
+export interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, "src"> {
+    src: string
+}
+
+const HlsPlayer = forwardRef<HTMLVideoElement, HlsPlayerProps>((props, ref) => {
+    const { src, ...rest } = props
+    const video = useRef<HTMLVideoElement>(null)
+
+    useImperativeHandle(ref, () => video.current!, [])
+
+    useEffect(() => {
+        const { current: player } = video
+        if (!player || !src) return
+        if (player.canPlayType("application/vnd.apple.mpegurl")) {
+            player.src = src
+            player.play()
+            return
+        }
+        if (Hls.isSupported()) {
+            const hls = new Hls()
+            hls.loadSource(src)
+            hls.attachMedia(player)
+            player.play()
+            return () => {
+                hls.destroy()
+            }
+        }
+    }, [src])
+
+    return <video ref={video} {...rest} />
+})
+
+export default HlsPlayer

package/src/components/Skeleton.tsx

@@ -4,11 +4,12 @@ import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
 import { forwardRef, HTMLAttributes } from "react"
 
-const Skeleton = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(props => {
+const Skeleton = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>((props, ref) => {
     const { className, ...rest } = props
 
     return (
         <div
+            ref={ref}
             className={clsx(
                 css`
                     @keyframes shimmer {

package/src/index.tsx

@@ -3,6 +3,7 @@ export * from "./components/AutoScroll"
 export * from "./components/AutoSizeTextarea"
 export * from "./components/CircleText"
 export * from "./components/Flow"
+export * from "./components/HlsPlayer"
 export * from "./components/InputFile"
 export * from "./components/LoopSwiper"
 export * from "./components/Ring"

package/src/utils/index.ts

@@ -0,0 +1,17 @@
+import { CSSProperties } from "react"
+
+export type CSSVariableName = `--${string}`
+
+export type CSSVariableValue = string | number
+
+export interface StyleWithCSSVariable extends CSSProperties {
+    [X: CSSVariableName]: CSSVariableValue
+}
+
+export function styleWithCSSVariable(style: StyleWithCSSVariable): CSSProperties {
+    return style
+}
+
+export function px(value: number): string {
+    return `${value}px`
+}