deepsea-components 5.11.5 → 5.12.0

package/dist/components/Scroll.cjs

@@ -0,0 +1,143 @@
+"use client"
+"use strict";
+var __webpack_modules__ = {
+    "@/utils": function(module) {
+        module.exports = require("../utils/index.cjs");
+    },
+    "@emotion/css": function(module) {
+        module.exports = require("@emotion/css");
+    },
+    "deepsea-tools": function(module) {
+        module.exports = require("deepsea-tools");
+    },
+    react: function(module) {
+        module.exports = require("react");
+    },
+    "react/jsx-runtime": function(module) {
+        module.exports = require("react/jsx-runtime");
+    },
+    "smooth-scrollbar": function(module) {
+        module.exports = require("smooth-scrollbar");
+    },
+    "smooth-scrollbar/interfaces": function(module) {
+        module.exports = require("smooth-scrollbar/interfaces");
+    }
+};
+var __webpack_module_cache__ = {};
+function __webpack_require__(moduleId) {
+    var cachedModule = __webpack_module_cache__[moduleId];
+    if (void 0 !== cachedModule) return cachedModule.exports;
+    var module = __webpack_module_cache__[moduleId] = {
+        exports: {}
+    };
+    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+    return module.exports;
+}
+(()=>{
+    __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__, {
+        Scroll: ()=>Scroll,
+        Scrollbar: ()=>smooth_scrollbar__WEBPACK_IMPORTED_MODULE_4___default.a
+    });
+    var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("react/jsx-runtime");
+    var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("react");
+    var _emotion_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("@emotion/css");
+    var deepsea_tools__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("deepsea-tools");
+    var smooth_scrollbar__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__("smooth-scrollbar");
+    var smooth_scrollbar__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/ __webpack_require__.n(smooth_scrollbar__WEBPACK_IMPORTED_MODULE_4__);
+    var _utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__("@/utils");
+    var smooth_scrollbar_interfaces__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__("smooth-scrollbar/interfaces");
+    var __WEBPACK_REEXPORT_OBJECT__ = {};
+    for(var __WEBPACK_IMPORT_KEY__ in smooth_scrollbar_interfaces__WEBPACK_IMPORTED_MODULE_6__)if ([
+        "Scroll",
+        "default",
+        "Scrollbar"
+    ].indexOf(__WEBPACK_IMPORT_KEY__) < 0) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return smooth_scrollbar_interfaces__WEBPACK_IMPORTED_MODULE_6__[key];
+    }).bind(0, __WEBPACK_IMPORT_KEY__);
+    __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+    const Scroll = /*#__PURE__*/ (0, react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)((props, ref)=>{
+        const { children, options, className, style, scrollbar, onScrollbar, ...rest } = props;
+        const { thumbWidth, thumbRadius, thumbColor, trackColor, ...scrollbarOptions } = options || {};
+        const ele = (0, react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
+        const bar = (0, react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
+        (0, react__WEBPACK_IMPORTED_MODULE_1__.useLayoutEffect)(()=>{
+            bar.current = smooth_scrollbar__WEBPACK_IMPORTED_MODULE_4___default().init(ele.current, scrollbarOptions);
+            return ()=>bar.current?.destroy();
+        }, []);
+        (0, react__WEBPACK_IMPORTED_MODULE_1__.useImperativeHandle)(ref, ()=>ele.current, []);
+        (0, react__WEBPACK_IMPORTED_MODULE_1__.useImperativeHandle)(scrollbar, ()=>bar.current, []);
+        (0, react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>{
+            if (!onScrollbar) return;
+            bar.current?.addListener(onScrollbar);
+            return ()=>bar.current?.removeListener(onScrollbar);
+        }, [
+            onScrollbar
+        ]);
+        return /*#__PURE__*/ (0, react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
+            ref: ele,
+            className: (0, deepsea_tools__WEBPACK_IMPORTED_MODULE_3__.clsx)((0, _emotion_css__WEBPACK_IMPORTED_MODULE_2__.css)`
+                    .scrollbar-track.scrollbar-track-x {
+                        ${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""} ${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
+                    }
+                    .scrollbar-thumb.scrollbar-thumb-x {
+                        ${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""} ${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""} ${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
+                    }
+                    .scrollbar-track.scrollbar-track-y {
+                        ${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""} ${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
+                    }
+                    .scrollbar-thumb.scrollbar-thumb-y {
+                        ${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""} ${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""} ${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
+                    }
+                `, className),
+            style: (0, _utils__WEBPACK_IMPORTED_MODULE_5__.transformCSSVariable)({
+                thumbWidth: (0, _utils__WEBPACK_IMPORTED_MODULE_5__.px)(thumbWidth),
+                thumbRadius: (0, _utils__WEBPACK_IMPORTED_MODULE_5__.px)(thumbRadius),
+                thumbColor,
+                trackColor
+            }, style),
+            ...rest,
+            children: children
+        });
+    });
+})();
+exports.Scroll = __webpack_exports__.Scroll;
+exports.Scrollbar = __webpack_exports__.Scrollbar;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "Scroll",
+    "Scrollbar"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/Scroll.js

@@ -0,0 +1,54 @@
+"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_smooth_scrollbar_80cf4563__ from "smooth-scrollbar";
+import * as __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__ from "../utils/index.js";
+export * from "smooth-scrollbar/interfaces";
+const Scroll = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)((props, ref)=>{
+    const { children, options, className, style, scrollbar, onScrollbar, ...rest } = props;
+    const { thumbWidth, thumbRadius, thumbColor, trackColor, ...scrollbarOptions } = options || {};
+    const ele = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const bar = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect)(()=>{
+        bar.current = __WEBPACK_EXTERNAL_MODULE_smooth_scrollbar_80cf4563__["default"].init(ele.current, scrollbarOptions);
+        return ()=>bar.current?.destroy();
+    }, []);
+    (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 (!onScrollbar) return;
+        bar.current?.addListener(onScrollbar);
+        return ()=>bar.current?.removeListener(onScrollbar);
+    }, [
+        onScrollbar
+    ]);
+    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)`
+                    .scrollbar-track.scrollbar-track-x {
+                        ${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""} ${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
+                    }
+                    .scrollbar-thumb.scrollbar-thumb-x {
+                        ${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""} ${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""} ${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
+                    }
+                    .scrollbar-track.scrollbar-track-y {
+                        ${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""} ${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
+                    }
+                    .scrollbar-thumb.scrollbar-thumb-y {
+                        ${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""} ${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""} ${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
+                    }
+                `, className),
+        style: (0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.transformCSSVariable)({
+            thumbWidth: (0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.px)(thumbWidth),
+            thumbRadius: (0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.px)(thumbRadius),
+            thumbColor,
+            trackColor
+        }, style),
+        ...rest,
+        children: children
+    });
+});
+var __webpack_exports__Scrollbar = __WEBPACK_EXTERNAL_MODULE_smooth_scrollbar_80cf4563__["default"];
+export { Scroll, __webpack_exports__Scrollbar as Scrollbar };

package/dist/components/SectionRing.cjs

@@ -0,0 +1,59 @@
+"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__, {
+    SectionRing: ()=>SectionRing
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const external_deepsea_tools_namespaceObject = require("deepsea-tools");
+const SectionRing = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((props, ref)=>{
+    const { outerRadius: o, innerRadius: i, count: c, angel: a, style, ...rest } = props;
+    const s = 2 * Math.PI / c - a;
+    function arc(radius, startAngle, endAngle, options = {}) {
+        return (0, external_deepsea_tools_namespaceObject.drawArc)(o, o, radius, startAngle, endAngle, options);
+    }
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        ref: ref,
+        style: {
+            width: 2 * o,
+            height: 2 * o,
+            clipPath: `path("${Array(c).fill(0).map((it, idx)=>`${arc(o, idx * (a + s), idx * (a + s) + a)} ${arc(i, idx * (a + s) + a, idx * (a + s), {
+                    line: true,
+                    anticlockwise: true
+                })}`).join(" ")} Z")`,
+            ...style
+        },
+        ...rest
+    });
+});
+exports.SectionRing = __webpack_exports__.SectionRing;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "SectionRing"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/SectionRing.js

@@ -0,0 +1,25 @@
+"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_deepsea_tools_8ecdf5a5__ from "deepsea-tools";
+const SectionRing = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)((props, ref)=>{
+    const { outerRadius: o, innerRadius: i, count: c, angel: a, style, ...rest } = props;
+    const s = 2 * Math.PI / c - a;
+    function arc(radius, startAngle, endAngle, options = {}) {
+        return (0, __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__.drawArc)(o, o, radius, startAngle, endAngle, options);
+    }
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        ref: ref,
+        style: {
+            width: 2 * o,
+            height: 2 * o,
+            clipPath: `path("${Array(c).fill(0).map((it, idx)=>`${arc(o, idx * (a + s), idx * (a + s) + a)} ${arc(i, idx * (a + s) + a, idx * (a + s), {
+                    line: true,
+                    anticlockwise: true
+                })}`).join(" ")} Z")`,
+            ...style
+        },
+        ...rest
+    });
+});
+export { SectionRing };

package/dist/components/Skeleton.cjs

@@ -0,0 +1,66 @@
+"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__, {
+    Skeleton: ()=>Skeleton
+});
+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 Skeleton = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((props, ref)=>{
+    const { className, children, loading = null == children, ...rest } = props;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        ref: ref,
+        className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
+                    @keyframes shimmer {
+                        0% {
+                            background-position: -400px 0px;
+                        }
+                        100% {
+                            background-position: 400px 0px;
+                        }
+                    }
+                `, loading && (0, css_namespaceObject.css)`
+                        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%);
+                        animation-duration: 1s;
+                        animation-fill-mode: forwards;
+                        animation-iteration-count: infinite;
+                        animation-name: shimmer;
+                        animation-timing-function: linear;
+                        background-size: 800px 104px;
+                    `, className),
+        ...rest,
+        children: children
+    });
+});
+exports.Skeleton = __webpack_exports__.Skeleton;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "Skeleton"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/Skeleton.js

@@ -0,0 +1,32 @@
+"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";
+const Skeleton = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)((props, ref)=>{
+    const { className, children, loading = null == children, ...rest } = props;
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        ref: ref,
+        className: (0, __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__.clsx)((0, __WEBPACK_EXTERNAL_MODULE__emotion_css_bfcd1b5d__.css)`
+                    @keyframes shimmer {
+                        0% {
+                            background-position: -400px 0px;
+                        }
+                        100% {
+                            background-position: 400px 0px;
+                        }
+                    }
+                `, loading && (0, __WEBPACK_EXTERNAL_MODULE__emotion_css_bfcd1b5d__.css)`
+                        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%);
+                        animation-duration: 1s;
+                        animation-fill-mode: forwards;
+                        animation-iteration-count: infinite;
+                        animation-name: shimmer;
+                        animation-timing-function: linear;
+                        background-size: 800px 104px;
+                    `, className),
+        ...rest,
+        children: children
+    });
+});
+export { Skeleton };

package/dist/components/Title.cjs

@@ -0,0 +1,61 @@
+"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__, {
+    Title: ()=>Title
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const external_react_dom_namespaceObject = require("react-dom");
+const external_deepsea_tools_namespaceObject = require("deepsea-tools");
+const getReactVersion_cjs_namespaceObject = require("../utils/getReactVersion.cjs");
+const [major] = (0, getReactVersion_cjs_namespaceObject.getReactVersion)();
+const Title = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((props, ref)=>{
+    if (major >= 19) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("title", {
+        ref: ref,
+        ...props
+    });
+    const ele = (0, external_react_namespaceObject.useRef)(null);
+    (0, external_react_namespaceObject.useImperativeHandle)(ref, ()=>ele.current, [
+        ele.current
+    ]);
+    (0, external_react_namespaceObject.useLayoutEffect)(()=>{
+        const title = document.head.querySelector("title");
+        if (title === ele.current) return;
+        document.head.insertBefore(ele.current, title);
+    }, []);
+    return external_deepsea_tools_namespaceObject.isBrowser && /*#__PURE__*/ (0, external_react_dom_namespaceObject.createPortal)(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("title", {
+        ref: ele,
+        ...props
+    }), document.head);
+});
+exports.Title = __webpack_exports__.Title;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "Title"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/Title.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_react_dom_7136dc57__ from "react-dom";
+import * as __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__ from "deepsea-tools";
+import * as __WEBPACK_EXTERNAL_MODULE__utils_getReactVersion_js_9bf41edb__ from "../utils/getReactVersion.js";
+const [major] = (0, __WEBPACK_EXTERNAL_MODULE__utils_getReactVersion_js_9bf41edb__.getReactVersion)();
+const Title = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)((props, ref)=>{
+    if (major >= 19) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("title", {
+        ref: ref,
+        ...props
+    });
+    const ele = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle)(ref, ()=>ele.current, [
+        ele.current
+    ]);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect)(()=>{
+        const title = document.head.querySelector("title");
+        if (title === ele.current) return;
+        document.head.insertBefore(ele.current, title);
+    }, []);
+    return __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__.isBrowser && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_dom_7136dc57__.createPortal)(/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("title", {
+        ref: ele,
+        ...props
+    }), document.head);
+});
+export { Title };

package/dist/components/TransitionBox.cjs

@@ -0,0 +1,79 @@
+"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__, {
+    TransitionBox: ()=>TransitionBox
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const external_soda_hooks_namespaceObject = require("soda-hooks");
+const TransitionBox = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((props, ref)=>{
+    const { style, containerClassName, containerStyle, children, vertical = true, horizontal = true, time = 3000, ...rest } = props;
+    const container = (0, external_react_namespaceObject.useRef)(null);
+    const size = (0, external_soda_hooks_namespaceObject.useSize)(container);
+    const width = size?.width ?? 0;
+    const height = size?.height ?? 0;
+    const [count, setCount] = (0, external_react_namespaceObject.useState)(0);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        setCount((count)=>Math.min(count + 1, 3));
+    }, [
+        width,
+        height
+    ]);
+    const outerStyle = {
+        transitionProperty: 3 === count ? [
+            horizontal && "width",
+            vertical && "height"
+        ].filter(Boolean).join(", ") : void 0,
+        transitionDuration: 3 === count ? `${time}ms` : void 0,
+        width,
+        height,
+        overflow: "hidden",
+        position: "relative",
+        ...style
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        ref: ref,
+        style: outerStyle,
+        ...rest,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+            className: containerClassName,
+            style: {
+                position: "absolute",
+                ...containerStyle
+            },
+            ref: container,
+            children: children
+        })
+    });
+});
+exports.TransitionBox = __webpack_exports__.TransitionBox;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "TransitionBox"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/TransitionBox.js

@@ -0,0 +1,45 @@
+"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_soda_hooks_b1fef7dd__ from "soda-hooks";
+const TransitionBox = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)((props, ref)=>{
+    const { style, containerClassName, containerStyle, children, vertical = true, horizontal = true, time = 3000, ...rest } = props;
+    const container = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const size = (0, __WEBPACK_EXTERNAL_MODULE_soda_hooks_b1fef7dd__.useSize)(container);
+    const width = size?.width ?? 0;
+    const height = size?.height ?? 0;
+    const [count, setCount] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(0);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        setCount((count)=>Math.min(count + 1, 3));
+    }, [
+        width,
+        height
+    ]);
+    const outerStyle = {
+        transitionProperty: 3 === count ? [
+            horizontal && "width",
+            vertical && "height"
+        ].filter(Boolean).join(", ") : void 0,
+        transitionDuration: 3 === count ? `${time}ms` : void 0,
+        width,
+        height,
+        overflow: "hidden",
+        position: "relative",
+        ...style
+    };
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        ref: ref,
+        style: outerStyle,
+        ...rest,
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+            className: containerClassName,
+            style: {
+                position: "absolute",
+                ...containerStyle
+            },
+            ref: container,
+            children: children
+        })
+    });
+});
+export { TransitionBox };