deepsea-components 5.11.6 → 5.12.0

package/dist/components/AutoFit.cjs

@@ -0,0 +1,116 @@
+"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__, {
+    AutoFit: ()=>AutoFit
+});
+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 index_cjs_namespaceObject = require("../utils/index.cjs");
+const AutoFit = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((props, ref)=>{
+    const { width: designWidth = 1920, height: designHeight = 1080, direction, className, style, ...rest } = props;
+    const ele = (0, external_react_namespaceObject.useRef)(null);
+    const [show, setShow] = (0, external_react_namespaceObject.useState)(false);
+    const [transform, setTransform] = (0, external_react_namespaceObject.useState)(void 0);
+    const [width, setWidth] = (0, external_react_namespaceObject.useState)(void 0);
+    const [height, setHeight] = (0, external_react_namespaceObject.useState)(void 0);
+    (0, external_react_namespaceObject.useImperativeHandle)(ref, ()=>ele.current, [
+        ele.current
+    ]);
+    (0, external_react_namespaceObject.useLayoutEffect)(()=>{
+        const element = ele.current;
+        const parent = element?.parentElement;
+        if (!element || !parent) return;
+        function listener(entries) {
+            const entry = entries[0];
+            const { contentRect } = entry;
+            if ("horizontal" === direction) {
+                const scale = contentRect.width / designWidth;
+                setTransform(`scale(${scale})`);
+                setWidth((0, index_cjs_namespaceObject.px)(designWidth));
+                setHeight((0, index_cjs_namespaceObject.px)(contentRect.height / scale));
+            } else if ("vertical" === direction) {
+                const scale = contentRect.height / designHeight;
+                setTransform(`scale(${scale})`);
+                setWidth((0, index_cjs_namespaceObject.px)(contentRect.width / scale));
+                setHeight((0, index_cjs_namespaceObject.px)(designHeight));
+            } else {
+                const scale = Math.min(contentRect.width / designWidth, contentRect.height / designHeight);
+                setTransform(`translateX(${(contentRect.width - designWidth * scale) / 2}px) translateY(${(contentRect.height - designHeight * scale) / 2}px) scale(${scale})`);
+                setWidth((0, index_cjs_namespaceObject.px)(designWidth));
+                setHeight((0, index_cjs_namespaceObject.px)(designHeight));
+            }
+            setShow(true);
+        }
+        const observer = new ResizeObserver(listener);
+        observer.observe(parent);
+        return ()=>observer.disconnect();
+    }, [
+        ele.current?.parentElement,
+        designWidth,
+        designHeight,
+        direction
+    ]);
+    if ("development" === process.env.NODE_ENV) (0, external_react_namespaceObject.useEffect)(()=>{
+        const parent = ele.current?.parentElement;
+        if (!parent) return;
+        const style = getComputedStyle(parent);
+        if ("static" === style.position) console.warn("AutoFit 组件的父元素的 position 属性不应该是 static");
+    }, [
+        ele.current?.parentElement
+    ]);
+    if (!show) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        ref: ele,
+        style: {
+            display: "none"
+        }
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        ref: ele,
+        className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
+                    position: absolute;
+                    transform: var(--transform);
+                    transform-origin: top left;
+                    width: var(--width);
+                    height: var(--height);
+                `, className),
+        style: (0, index_cjs_namespaceObject.transformCSSVariable)({
+            transform,
+            width,
+            height
+        }, style),
+        ...rest
+    });
+});
+exports.AutoFit = __webpack_exports__.AutoFit;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "AutoFit"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/AutoFit.js

@@ -0,0 +1,82 @@
+"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__utils_index_js_6619c453__ from "../utils/index.js";
+const AutoFit = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)((props, ref)=>{
+    const { width: designWidth = 1920, height: designHeight = 1080, direction, className, style, ...rest } = props;
+    const ele = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const [show, setShow] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
+    const [transform, setTransform] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(void 0);
+    const [width, setWidth] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(void 0);
+    const [height, setHeight] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(void 0);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle)(ref, ()=>ele.current, [
+        ele.current
+    ]);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect)(()=>{
+        const element = ele.current;
+        const parent = element?.parentElement;
+        if (!element || !parent) return;
+        function listener(entries) {
+            const entry = entries[0];
+            const { contentRect } = entry;
+            if ("horizontal" === direction) {
+                const scale = contentRect.width / designWidth;
+                setTransform(`scale(${scale})`);
+                setWidth((0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.px)(designWidth));
+                setHeight((0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.px)(contentRect.height / scale));
+            } else if ("vertical" === direction) {
+                const scale = contentRect.height / designHeight;
+                setTransform(`scale(${scale})`);
+                setWidth((0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.px)(contentRect.width / scale));
+                setHeight((0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.px)(designHeight));
+            } else {
+                const scale = Math.min(contentRect.width / designWidth, contentRect.height / designHeight);
+                setTransform(`translateX(${(contentRect.width - designWidth * scale) / 2}px) translateY(${(contentRect.height - designHeight * scale) / 2}px) scale(${scale})`);
+                setWidth((0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.px)(designWidth));
+                setHeight((0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.px)(designHeight));
+            }
+            setShow(true);
+        }
+        const observer = new ResizeObserver(listener);
+        observer.observe(parent);
+        return ()=>observer.disconnect();
+    }, [
+        ele.current?.parentElement,
+        designWidth,
+        designHeight,
+        direction
+    ]);
+    if ("development" === process.env.NODE_ENV) (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        const parent = ele.current?.parentElement;
+        if (!parent) return;
+        const style = getComputedStyle(parent);
+        if ("static" === style.position) console.warn("AutoFit 组件的父元素的 position 属性不应该是 static");
+    }, [
+        ele.current?.parentElement
+    ]);
+    if (!show) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        ref: ele,
+        style: {
+            display: "none"
+        }
+    });
+    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: absolute;
+                    transform: var(--transform);
+                    transform-origin: top left;
+                    width: var(--width);
+                    height: var(--height);
+                `, className),
+        style: (0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.transformCSSVariable)({
+            transform,
+            width,
+            height
+        }, style),
+        ...rest
+    });
+});
+export { AutoFit };

package/dist/components/AutoScroll.cjs

@@ -0,0 +1,125 @@
+"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__, {
+    AutoScroll: ()=>AutoScroll
+});
+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");
+const external_Scroll_cjs_namespaceObject = require("./Scroll.cjs");
+const AutoScroll = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((props, ref)=>{
+    const { count, itemHeight, animation = 1000, duration = 3000, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, scrollbar, paused, ...rest } = props;
+    const bar = (0, external_react_namespaceObject.useRef)(null);
+    const timeout = (0, external_react_namespaceObject.useRef)(void 0);
+    const ele = (0, external_react_namespaceObject.useRef)(null);
+    const size = (0, external_soda_hooks_namespaceObject.useSize)(ele);
+    const pausedRef = (0, external_react_namespaceObject.useRef)(false);
+    const pausedProps = (0, external_react_namespaceObject.useRef)(paused);
+    pausedProps.current = paused;
+    (0, external_react_namespaceObject.useImperativeHandle)(ref, ()=>ele.current, []);
+    (0, external_react_namespaceObject.useImperativeHandle)(scrollbar, ()=>bar.current, []);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (playOnMouseEnter) pausedRef.current = false;
+    }, [
+        playOnMouseEnter
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!size || 0 === count) return;
+        const { height } = size;
+        const range = (0, external_deepsea_tools_namespaceObject.getArray)(count, (index)=>(itemHeight + gap) * (index + 1) - (index === count - 1 ? gap : 0));
+        const scrollHeight = range[range.length - 1];
+        if (height >= scrollHeight) return;
+        function scroll(target) {
+            clearTimeout(timeout.current);
+            timeout.current = setTimeout(()=>{
+                if (pausedRef.current || pausedProps.current) return scroll(target);
+                bar.current?.scrollTo(0, target, animation);
+            }, duration);
+        }
+        scroll(range[0]);
+        function listener(status) {
+            const { y } = status.offset;
+            const scrollToBottom = Math.abs(y + height - scrollHeight) / itemHeight <= 0.05;
+            const target = scrollToBottom ? 0 : range.find((item)=>item > y);
+            scroll(target);
+        }
+        bar.current?.addListener(listener);
+        return ()=>{
+            clearTimeout(timeout.current);
+            bar.current?.removeListener(listener);
+            bar.current?.scrollTo(0, 0);
+        };
+    }, [
+        size,
+        count,
+        itemHeight,
+        gap,
+        duration,
+        animation
+    ]);
+    function onContainerMouseEnter(e) {
+        if (playOnMouseEnter) return;
+        pausedRef.current = true;
+        onMouseEnter?.(e);
+    }
+    function onContainerMouseLeave(e) {
+        if (playOnMouseEnter) return;
+        pausedRef.current = false;
+        onMouseLeave?.(e);
+    }
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Scroll_cjs_namespaceObject.Scroll, {
+        ref: ele,
+        scrollbar: bar,
+        onMouseEnter: onContainerMouseEnter,
+        onMouseLeave: onContainerMouseLeave,
+        ...rest,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+            className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
+                        display: flex;
+                        flex-direction: column;
+                        gap: var(--gap, 0);
+                        & > * {
+                            flex: none;
+                        }
+                    `, containerClassName),
+            style: (0, index_cjs_namespaceObject.transformCSSVariable)({
+                gap: (0, index_cjs_namespaceObject.px)(gap)
+            }, containerStyle),
+            children: children
+        })
+    });
+});
+exports.AutoScroll = __webpack_exports__.AutoScroll;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "AutoScroll"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/AutoScroll.js

@@ -0,0 +1,91 @@
+"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";
+import * as __WEBPACK_EXTERNAL_MODULE__Scroll_js_70befd9e__ from "./Scroll.js";
+const AutoScroll = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)((props, ref)=>{
+    const { count, itemHeight, animation = 1000, duration = 3000, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, scrollbar, paused, ...rest } = props;
+    const bar = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const timeout = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(void 0);
+    const ele = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const size = (0, __WEBPACK_EXTERNAL_MODULE_soda_hooks_b1fef7dd__.useSize)(ele);
+    const pausedRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(false);
+    const pausedProps = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(paused);
+    pausedProps.current = paused;
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle)(ref, ()=>ele.current, []);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle)(scrollbar, ()=>bar.current, []);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        if (playOnMouseEnter) pausedRef.current = false;
+    }, [
+        playOnMouseEnter
+    ]);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        if (!size || 0 === count) return;
+        const { height } = size;
+        const range = (0, __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__.getArray)(count, (index)=>(itemHeight + gap) * (index + 1) - (index === count - 1 ? gap : 0));
+        const scrollHeight = range[range.length - 1];
+        if (height >= scrollHeight) return;
+        function scroll(target) {
+            clearTimeout(timeout.current);
+            timeout.current = setTimeout(()=>{
+                if (pausedRef.current || pausedProps.current) return scroll(target);
+                bar.current?.scrollTo(0, target, animation);
+            }, duration);
+        }
+        scroll(range[0]);
+        function listener(status) {
+            const { y } = status.offset;
+            const scrollToBottom = Math.abs(y + height - scrollHeight) / itemHeight <= 0.05;
+            const target = scrollToBottom ? 0 : range.find((item)=>item > y);
+            scroll(target);
+        }
+        bar.current?.addListener(listener);
+        return ()=>{
+            clearTimeout(timeout.current);
+            bar.current?.removeListener(listener);
+            bar.current?.scrollTo(0, 0);
+        };
+    }, [
+        size,
+        count,
+        itemHeight,
+        gap,
+        duration,
+        animation
+    ]);
+    function onContainerMouseEnter(e) {
+        if (playOnMouseEnter) return;
+        pausedRef.current = true;
+        onMouseEnter?.(e);
+    }
+    function onContainerMouseLeave(e) {
+        if (playOnMouseEnter) return;
+        pausedRef.current = false;
+        onMouseLeave?.(e);
+    }
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Scroll_js_70befd9e__.Scroll, {
+        ref: ele,
+        scrollbar: bar,
+        onMouseEnter: onContainerMouseEnter,
+        onMouseLeave: onContainerMouseLeave,
+        ...rest,
+        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)`
+                        display: flex;
+                        flex-direction: column;
+                        gap: var(--gap, 0);
+                        & > * {
+                            flex: none;
+                        }
+                    `, containerClassName),
+            style: (0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.transformCSSVariable)({
+                gap: (0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.px)(gap)
+            }, containerStyle),
+            children: children
+        })
+    });
+});
+export { AutoScroll };

package/dist/components/AutoSizeTextarea.cjs

@@ -0,0 +1,73 @@
+"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__, {
+    AutoSizeTextArea: ()=>AutoSizeTextArea
+});
+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 index_cjs_namespaceObject = require("../utils/index.cjs");
+const AutoSizeTextArea = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((props, ref)=>{
+    const { className, style, ...rest } = props;
+    const [height, setHeight] = (0, external_react_namespaceObject.useState)(void 0);
+    const ele = (0, external_react_namespaceObject.useRef)(null);
+    (0, external_react_namespaceObject.useImperativeHandle)(ref, ()=>ele.current, []);
+    (0, external_react_namespaceObject.useLayoutEffect)(()=>{
+        const textarea = ele.current;
+        function resizeTextarea() {
+            setHeight("auto");
+            setHeight((0, index_cjs_namespaceObject.px)(textarea.scrollHeight + textarea.offsetHeight - textarea.clientHeight));
+        }
+        resizeTextarea();
+        textarea.addEventListener("input", resizeTextarea);
+        textarea.addEventListener("change", resizeTextarea);
+        return ()=>{
+            textarea.removeEventListener("input", resizeTextarea);
+            textarea.removeEventListener("change", resizeTextarea);
+        };
+    }, []);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("textarea", {
+        ref: ele,
+        className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
+                    height: var(--height);
+                    resize: none;
+                    overflow-y: hidden;
+                `, className),
+        style: (0, index_cjs_namespaceObject.transformCSSVariable)({
+            height
+        }, style),
+        ...rest
+    });
+});
+exports.AutoSizeTextArea = __webpack_exports__.AutoSizeTextArea;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "AutoSizeTextArea"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/AutoSizeTextarea.js

@@ -0,0 +1,39 @@
+"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__utils_index_js_6619c453__ from "../utils/index.js";
+const AutoSizeTextArea = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)((props, ref)=>{
+    const { className, style, ...rest } = props;
+    const [height, setHeight] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(void 0);
+    const ele = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle)(ref, ()=>ele.current, []);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect)(()=>{
+        const textarea = ele.current;
+        function resizeTextarea() {
+            setHeight("auto");
+            setHeight((0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.px)(textarea.scrollHeight + textarea.offsetHeight - textarea.clientHeight));
+        }
+        resizeTextarea();
+        textarea.addEventListener("input", resizeTextarea);
+        textarea.addEventListener("change", resizeTextarea);
+        return ()=>{
+            textarea.removeEventListener("input", resizeTextarea);
+            textarea.removeEventListener("change", resizeTextarea);
+        };
+    }, []);
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("textarea", {
+        ref: ele,
+        className: (0, __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__.clsx)((0, __WEBPACK_EXTERNAL_MODULE__emotion_css_bfcd1b5d__.css)`
+                    height: var(--height);
+                    resize: none;
+                    overflow-y: hidden;
+                `, className),
+        style: (0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.transformCSSVariable)({
+            height
+        }, style),
+        ...rest
+    });
+});
+export { AutoSizeTextArea };

package/dist/components/CircleText.cjs

@@ -0,0 +1,68 @@
+"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__, {
+    CircleText: ()=>CircleText
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const CircleText = (props)=>{
+    const { width, height, radius, startAngel = 0, gapAngel = 0, align = "center", style, direction = "outer", reverse = false, separator, children, ...rest } = props;
+    const unitAngle = 2 * Math.atan(width / 2 / radius);
+    const totalAngle = (unitAngle + gapAngel) * children.length - gapAngel;
+    const offsetAngle = "left" === align ? 0 : "right" === align ? totalAngle : totalAngle / 2;
+    function getTransform(idx) {
+        const angle = startAngel - idx * (unitAngle + gapAngel) + offsetAngle - unitAngle / 2;
+        const x = (radius + height / 2) * Math.cos(angle) - width / 2;
+        const y = (radius + height / 2) * Math.sin(angle) * -1 - height / 2;
+        const z = Math.PI / 2 - angle + ("inner" === direction ? Math.PI : 0);
+        return `translateX(${x}px) translateY(${y}px) rotateZ(${z / Math.PI * 180}deg)`;
+    }
+    const words = "function" == typeof separator ? separator(children) : children.split(separator ?? "");
+    if (reverse) words.reverse();
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_namespaceObject.Fragment, {
+        children: words.map((w, idx)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                style: {
+                    position: "absolute",
+                    ...style,
+                    transform: getTransform(idx),
+                    textAlign: "center",
+                    width,
+                    lineHeight: `${height}px`,
+                    height: height
+                },
+                ...rest,
+                children: w
+            }, idx))
+    });
+};
+exports.CircleText = __webpack_exports__.CircleText;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "CircleText"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/CircleText.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";
+const CircleText = (props)=>{
+    const { width, height, radius, startAngel = 0, gapAngel = 0, align = "center", style, direction = "outer", reverse = false, separator, children, ...rest } = props;
+    const unitAngle = 2 * Math.atan(width / 2 / radius);
+    const totalAngle = (unitAngle + gapAngel) * children.length - gapAngel;
+    const offsetAngle = "left" === align ? 0 : "right" === align ? totalAngle : totalAngle / 2;
+    function getTransform(idx) {
+        const angle = startAngel - idx * (unitAngle + gapAngel) + offsetAngle - unitAngle / 2;
+        const x = (radius + height / 2) * Math.cos(angle) - width / 2;
+        const y = (radius + height / 2) * Math.sin(angle) * -1 - height / 2;
+        const z = Math.PI / 2 - angle + ("inner" === direction ? Math.PI : 0);
+        return `translateX(${x}px) translateY(${y}px) rotateZ(${z / Math.PI * 180}deg)`;
+    }
+    const words = "function" == typeof separator ? separator(children) : children.split(separator ?? "");
+    if (reverse) words.reverse();
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react__.Fragment, {
+        children: words.map((w, idx)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                style: {
+                    position: "absolute",
+                    ...style,
+                    transform: getTransform(idx),
+                    textAlign: "center",
+                    width,
+                    lineHeight: `${height}px`,
+                    height: height
+                },
+                ...rest,
+                children: w
+            }, idx))
+    });
+};
+export { CircleText };