deepsea-components 5.11.6 → 5.12.1

package/dist/components/CopyButton.cjs

@@ -0,0 +1,73 @@
+"use client"
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    Event: ()=>external_clipboard_namespaceObject.Event,
+    CopyButton: ()=>CopyButton
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const external_clipboard_namespaceObject = require("clipboard");
+var external_clipboard_default = /*#__PURE__*/ __webpack_require__.n(external_clipboard_namespaceObject);
+const external_soda_hooks_namespaceObject = require("soda-hooks");
+const CopyButton = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((props, ref)=>{
+    const { text, onCopySuccess: _onCoptSuccess, onCopyError: _onCopyError, ...rest } = props;
+    const ele = (0, external_react_namespaceObject.useRef)(null);
+    const onCopySuccess = (0, external_soda_hooks_namespaceObject.useLatest)(_onCoptSuccess);
+    const onCopyError = (0, external_soda_hooks_namespaceObject.useLatest)(_onCopyError);
+    (0, external_react_namespaceObject.useImperativeHandle)(ref, ()=>ele.current, [
+        ele.current
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        const clipboard = new (external_clipboard_default())(ele.current);
+        clipboard.on("success", (event)=>onCopySuccess.current?.(event));
+        clipboard.on("error", (event)=>onCopyError.current?.(event));
+        return ()=>clipboard.destroy();
+    }, []);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+        ref: ele,
+        ...rest,
+        "data-clipboard-text": text
+    });
+});
+exports.CopyButton = __webpack_exports__.CopyButton;
+exports.Event = __webpack_exports__.Event;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "CopyButton",
+    "Event"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/{cjs/components → components}/CopyButton.d.ts

@@ -7,7 +7,7 @@ export type CopyButtonProps = ComponentPropsWithoutRef<"button"> & {
     onCopyError?: (e: Event) => void;
 };
 export declare const CopyButton: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    text?: string | undefined;
-    onCopySuccess?: ((e: Event) => void) | undefined;
-    onCopyError?: ((e: Event) => void) | undefined;
+    text?: string;
+    onCopySuccess?: (e: Event) => void;
+    onCopyError?: (e: Event) => void;
 } & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/CopyButton.js

@@ -0,0 +1,27 @@
+"use client"
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE_clipboard__ from "clipboard";
+import * as __WEBPACK_EXTERNAL_MODULE_soda_hooks_b1fef7dd__ from "soda-hooks";
+const CopyButton = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)((props, ref)=>{
+    const { text, onCopySuccess: _onCoptSuccess, onCopyError: _onCopyError, ...rest } = props;
+    const ele = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const onCopySuccess = (0, __WEBPACK_EXTERNAL_MODULE_soda_hooks_b1fef7dd__.useLatest)(_onCoptSuccess);
+    const onCopyError = (0, __WEBPACK_EXTERNAL_MODULE_soda_hooks_b1fef7dd__.useLatest)(_onCopyError);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle)(ref, ()=>ele.current, [
+        ele.current
+    ]);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        const clipboard = new __WEBPACK_EXTERNAL_MODULE_clipboard__["default"](ele.current);
+        clipboard.on("success", (event)=>onCopySuccess.current?.(event));
+        clipboard.on("error", (event)=>onCopyError.current?.(event));
+        return ()=>clipboard.destroy();
+    }, []);
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("button", {
+        ref: ele,
+        ...rest,
+        "data-clipboard-text": text
+    });
+});
+var __webpack_exports__Event = __WEBPACK_EXTERNAL_MODULE_clipboard__.Event;
+export { CopyButton, __webpack_exports__Event as Event };

package/dist/components/Echart.cjs

@@ -0,0 +1,74 @@
+"use client"
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    Pie: ()=>Pie,
+    Bar: ()=>Bar,
+    Line: ()=>Line
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const external_echarts_namespaceObject = require("echarts");
+const Echart = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((props, ref)=>{
+    const { width, height, option, chart, ...rest } = props;
+    const container = (0, external_react_namespaceObject.useRef)(null);
+    const chartRef = (0, external_react_namespaceObject.useRef)(null);
+    (0, external_react_namespaceObject.useLayoutEffect)(()=>{
+        const ele = container.current;
+        chartRef.current = (0, external_echarts_namespaceObject.init)(ele, option, {
+            width,
+            height
+        });
+        return ()=>chartRef.current?.dispose();
+    }, []);
+    (0, external_react_namespaceObject.useImperativeHandle)(ref, ()=>container.current, []);
+    (0, external_react_namespaceObject.useImperativeHandle)(chart, ()=>chartRef.current, []);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        chartRef.current?.setOption(option);
+        chartRef.current?.resize({
+            width,
+            height
+        });
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        ref: container,
+        ...rest
+    });
+});
+const Pie = Echart;
+const Bar = Echart;
+const Line = Echart;
+exports.Bar = __webpack_exports__.Bar;
+exports.Line = __webpack_exports__.Line;
+exports.Pie = __webpack_exports__.Pie;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "Bar",
+    "Line",
+    "Pie"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/Echart.js

@@ -0,0 +1,34 @@
+"use client"
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE_echarts__ from "echarts";
+const Echart = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)((props, ref)=>{
+    const { width, height, option, chart, ...rest } = props;
+    const container = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const chartRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect)(()=>{
+        const ele = container.current;
+        chartRef.current = (0, __WEBPACK_EXTERNAL_MODULE_echarts__.init)(ele, option, {
+            width,
+            height
+        });
+        return ()=>chartRef.current?.dispose();
+    }, []);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle)(ref, ()=>container.current, []);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle)(chart, ()=>chartRef.current, []);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        chartRef.current?.setOption(option);
+        chartRef.current?.resize({
+            width,
+            height
+        });
+    });
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        ref: container,
+        ...rest
+    });
+});
+const Pie = Echart;
+const Bar = Echart;
+const Line = Echart;
+export { Bar, Line, Pie };

package/dist/components/Flow.cjs

@@ -0,0 +1,211 @@
+"use client"
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    Flow: ()=>Flow,
+    getGapCountAndSize: ()=>getGapCountAndSize,
+    getGapRange: ()=>getGapRange,
+    ManualFlow: ()=>ManualFlow
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const css_namespaceObject = require("@emotion/css");
+const external_deepsea_tools_namespaceObject = require("deepsea-tools");
+const external_soda_hooks_namespaceObject = require("soda-hooks");
+const index_cjs_namespaceObject = require("../utils/index.cjs");
+function getGapRange(gap) {
+    if ("number" == typeof gap) return [
+        gap,
+        gap
+    ];
+    if (Array.isArray(gap)) return [
+        "number" == typeof gap[0] ? gap[0] : 0,
+        gap[1]
+    ];
+    return [
+        0,
+        "auto"
+    ];
+}
+function getGapCountAndSize(width, itemWidth, minGap, maxGap) {
+    const count = Math.floor((width + minGap) / (itemWidth + minGap)) || 1;
+    if (1 === count) return {
+        count,
+        gap: 0
+    };
+    const averageGap = (width - itemWidth * count) / (count - 1);
+    if (averageGap < minGap) return {
+        count,
+        gap: minGap
+    };
+    if ("auto" !== maxGap && averageGap > maxGap) return {
+        count,
+        gap: maxGap
+    };
+    return {
+        count,
+        gap: averageGap
+    };
+}
+function ManualFlow(props) {
+    let { itemWidth, itemHeight, columnGap, rowGap, maxRows, data = [], render, keyExactor, className, style, wrapperClassName, wrapperStyle, throttle, transitionDuration, onSizeChange, containerClassName, containerStyle, gap = 0, width, element, ...rest } = props;
+    rowGap ??= gap;
+    columnGap ??= gap;
+    const [minColumnGap, maxColumnGap] = getGapRange(columnGap);
+    const [{ count: columnCount, gap: columnGapSize }, setGapAndCount] = (0, external_react_namespaceObject.useState)(()=>getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap));
+    const ele = (0, external_react_namespaceObject.useRef)(null);
+    const contentRows = Math.ceil(data.length / columnCount);
+    const contentShownRows = "number" == typeof maxRows ? Math.min(contentRows, maxRows) : contentRows;
+    const height = contentShownRows > 0 ? contentShownRows * (itemHeight + rowGap) - rowGap : 0;
+    function getPosition(index) {
+        const y = Math.floor(index / columnCount);
+        const x = index - y * columnCount;
+        return {
+            left: x * (itemWidth + columnGapSize),
+            top: y * (itemHeight + rowGap)
+        };
+    }
+    function getHidden(index) {
+        if ("number" != typeof maxRows) return false;
+        return index >= maxRows * columnCount;
+    }
+    (0, external_react_namespaceObject.useImperativeHandle)(element, ()=>ele.current, [
+        ele.current
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        function task() {
+            setGapAndCount(getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap));
+        }
+        if (0 === throttle) return task();
+        const timeout = setTimeout(task, throttle || 200);
+        return ()=>clearTimeout(timeout);
+    }, [
+        width,
+        itemWidth,
+        throttle,
+        minColumnGap,
+        maxColumnGap
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        onSizeChange?.({
+            width,
+            height,
+            itemWidth,
+            itemHeight,
+            columnGap: columnGapSize,
+            columnCount,
+            rowGap: 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__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        ref: ele,
+        className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
+                    position: relative;
+                    height: var(--height);
+                    overflow: hidden;
+                `, className),
+        style: (0, index_cjs_namespaceObject.transformCSSVariable)({
+            height: (0, index_cjs_namespaceObject.px)(height)
+        }, style),
+        ...rest,
+        children: data.map((item, index, arr)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.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, index_cjs_namespaceObject.transformCSSVariable)({
+                    width: (0, index_cjs_namespaceObject.px)(itemWidth),
+                    height: (0, index_cjs_namespaceObject.px)(itemHeight),
+                    transition: 0 === transitionDuration ? "none" : `all ${transitionDuration || 400}ms`,
+                    left: (0, index_cjs_namespaceObject.px)(getPosition(index).left),
+                    top: (0, index_cjs_namespaceObject.px)(getPosition(index).top)
+                }, wrapperStyle),
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
+                                width: 100%;
+                                height: 100%;
+                                display: var(--display);
+                            `, containerClassName),
+                    style: (0, index_cjs_namespaceObject.transformCSSVariable)({
+                        display: getHidden(index) ? "none" : "block"
+                    }, containerStyle),
+                    children: render(item, index, arr)
+                })
+            }, keyExactor ? keyExactor(item, index, arr) : index))
+    });
+}
+function Flow(props) {
+    const { itemWidth, itemHeight, columnGap, rowGap, gap, maxRows, data, render, keyExactor, wrapperClassName, wrapperStyle, containerClassName, containerStyle, throttle, transitionDuration, onSizeChange, element, ...rest } = props;
+    const ele = (0, external_react_namespaceObject.useRef)(null);
+    const size = (0, external_soda_hooks_namespaceObject.useSize)(ele);
+    const width = (0, external_react_namespaceObject.useRef)(size?.width || 0);
+    if (size && 0 !== size.width) width.current = size.width;
+    (0, external_react_namespaceObject.useImperativeHandle)(element, ()=>ele.current, [
+        ele.current
+    ]);
+    if (0 === width.current) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        ref: ele,
+        ...rest
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ManualFlow, {
+        element: ele,
+        ...props,
+        width: width.current
+    });
+}
+exports.Flow = __webpack_exports__.Flow;
+exports.ManualFlow = __webpack_exports__.ManualFlow;
+exports.getGapCountAndSize = __webpack_exports__.getGapCountAndSize;
+exports.getGapRange = __webpack_exports__.getGapRange;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "Flow",
+    "ManualFlow",
+    "getGapCountAndSize",
+    "getGapRange"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/Flow.js

@@ -0,0 +1,168 @@
+"use client"
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE__emotion_css_bfcd1b5d__ from "@emotion/css";
+import * as __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__ from "deepsea-tools";
+import * as __WEBPACK_EXTERNAL_MODULE_soda_hooks_b1fef7dd__ from "soda-hooks";
+import * as __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__ from "../utils/index.js";
+function getGapRange(gap) {
+    if ("number" == typeof gap) return [
+        gap,
+        gap
+    ];
+    if (Array.isArray(gap)) return [
+        "number" == typeof gap[0] ? gap[0] : 0,
+        gap[1]
+    ];
+    return [
+        0,
+        "auto"
+    ];
+}
+function getGapCountAndSize(width, itemWidth, minGap, maxGap) {
+    const count = Math.floor((width + minGap) / (itemWidth + minGap)) || 1;
+    if (1 === count) return {
+        count,
+        gap: 0
+    };
+    const averageGap = (width - itemWidth * count) / (count - 1);
+    if (averageGap < minGap) return {
+        count,
+        gap: minGap
+    };
+    if ("auto" !== maxGap && averageGap > maxGap) return {
+        count,
+        gap: maxGap
+    };
+    return {
+        count,
+        gap: averageGap
+    };
+}
+function ManualFlow(props) {
+    let { itemWidth, itemHeight, columnGap, rowGap, maxRows, data = [], render, keyExactor, className, style, wrapperClassName, wrapperStyle, throttle, transitionDuration, onSizeChange, containerClassName, containerStyle, gap = 0, width, element, ...rest } = props;
+    rowGap ??= gap;
+    columnGap ??= gap;
+    const [minColumnGap, maxColumnGap] = getGapRange(columnGap);
+    const [{ count: columnCount, gap: columnGapSize }, setGapAndCount] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(()=>getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap));
+    const ele = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const contentRows = Math.ceil(data.length / columnCount);
+    const contentShownRows = "number" == typeof maxRows ? Math.min(contentRows, maxRows) : contentRows;
+    const height = contentShownRows > 0 ? contentShownRows * (itemHeight + rowGap) - rowGap : 0;
+    function getPosition(index) {
+        const y = Math.floor(index / columnCount);
+        const x = index - y * columnCount;
+        return {
+            left: x * (itemWidth + columnGapSize),
+            top: y * (itemHeight + rowGap)
+        };
+    }
+    function getHidden(index) {
+        if ("number" != typeof maxRows) return false;
+        return index >= maxRows * columnCount;
+    }
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle)(element, ()=>ele.current, [
+        ele.current
+    ]);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        function task() {
+            setGapAndCount(getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap));
+        }
+        if (0 === throttle) return task();
+        const timeout = setTimeout(task, throttle || 200);
+        return ()=>clearTimeout(timeout);
+    }, [
+        width,
+        itemWidth,
+        throttle,
+        minColumnGap,
+        maxColumnGap
+    ]);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        onSizeChange?.({
+            width,
+            height,
+            itemWidth,
+            itemHeight,
+            columnGap: columnGapSize,
+            columnCount,
+            rowGap: 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__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        ref: ele,
+        className: (0, __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__.clsx)((0, __WEBPACK_EXTERNAL_MODULE__emotion_css_bfcd1b5d__.css)`
+                    position: relative;
+                    height: var(--height);
+                    overflow: hidden;
+                `, className),
+        style: (0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.transformCSSVariable)({
+            height: (0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.px)(height)
+        }, style),
+        ...rest,
+        children: data.map((item, index, arr)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: (0, __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__.clsx)((0, __WEBPACK_EXTERNAL_MODULE__emotion_css_bfcd1b5d__.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, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.transformCSSVariable)({
+                    width: (0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.px)(itemWidth),
+                    height: (0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.px)(itemHeight),
+                    transition: 0 === transitionDuration ? "none" : `all ${transitionDuration || 400}ms`,
+                    left: (0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.px)(getPosition(index).left),
+                    top: (0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.px)(getPosition(index).top)
+                }, wrapperStyle),
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                    className: (0, __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__.clsx)((0, __WEBPACK_EXTERNAL_MODULE__emotion_css_bfcd1b5d__.css)`
+                                width: 100%;
+                                height: 100%;
+                                display: var(--display);
+                            `, containerClassName),
+                    style: (0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.transformCSSVariable)({
+                        display: getHidden(index) ? "none" : "block"
+                    }, containerStyle),
+                    children: render(item, index, arr)
+                })
+            }, keyExactor ? keyExactor(item, index, arr) : index))
+    });
+}
+function Flow(props) {
+    const { itemWidth, itemHeight, columnGap, rowGap, gap, maxRows, data, render, keyExactor, wrapperClassName, wrapperStyle, containerClassName, containerStyle, throttle, transitionDuration, onSizeChange, element, ...rest } = props;
+    const ele = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const size = (0, __WEBPACK_EXTERNAL_MODULE_soda_hooks_b1fef7dd__.useSize)(ele);
+    const width = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(size?.width || 0);
+    if (size && 0 !== size.width) width.current = size.width;
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle)(element, ()=>ele.current, [
+        ele.current
+    ]);
+    if (0 === width.current) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        ref: ele,
+        ...rest
+    });
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(ManualFlow, {
+        element: ele,
+        ...props,
+        width: width.current
+    });
+}
+export { Flow, ManualFlow, getGapCountAndSize, getGapRange };

package/dist/components/FormLabel.cjs

@@ -0,0 +1,77 @@
+"use client"
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    FormLabelConfigContext: ()=>FormLabelConfigContext,
+    FormLabel: ()=>FormLabel,
+    FormLabelConfigProvider: ()=>FormLabelConfigProvider
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const FormLabelConfigContext = /*#__PURE__*/ (0, external_react_namespaceObject.createContext)({});
+const FormLabelConfigProvider = ({ width, before, children })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FormLabelConfigContext.Provider, {
+        value: {
+            width,
+            before
+        },
+        children: children
+    });
+const FormLabel = (props)=>{
+    const { width: _width, before: _before } = (0, external_react_namespaceObject.useContext)(FormLabelConfigContext);
+    const { style, width = _width, before = _before, ...rest } = props;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_react_namespaceObject.Fragment, {
+        children: [
+            !!before && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                style: {
+                    width: 11,
+                    color: "transparent",
+                    userSelect: "none"
+                },
+                children: " "
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                style: {
+                    width,
+                    textAlign: "justify",
+                    textAlignLast: "justify",
+                    ...style
+                },
+                ...rest
+            })
+        ]
+    });
+};
+exports.FormLabel = __webpack_exports__.FormLabel;
+exports.FormLabelConfigContext = __webpack_exports__.FormLabelConfigContext;
+exports.FormLabelConfigProvider = __webpack_exports__.FormLabelConfigProvider;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "FormLabel",
+    "FormLabelConfigContext",
+    "FormLabelConfigProvider"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});