@ioca/react 1.3.3 → 1.3.5

package/lib/es/components/step/item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.js","sources":["../../../../packages/components/step/item.tsx"],"sourcesContent":["import { CheckRound } from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport Divider from \"./divider\";\nimport { IStepItem } from \"./type\";\n\nconst STATUS = [\"finished\", \"active\", \"pending\"];\n\nfunction defaultRenderIcon(i: number, status: string) {\n\treturn (\n\t\t<span className='i-step-item-index'>\n\t\t\t{status === \"finished\" ? (\n\t\t\t\t<CheckRound style={{ width: \"1em\", height: \"1.5em\" }} />\n\t\t\t) : (\n\t\t\t\ti + 1\n\t\t\t)}\n\t\t</span>\n\t);\n}\n\nfunction Item(props: IStepItem) {\n\tconst {\n\t\tindex = 0,\n\t\tactive = 0,\n\t\trenderIcon = defaultRenderIcon,\n\t\ttitle,\n\t\tvertical,\n\t\tline = <Divider />,\n\t\tasList,\n\t\tstyle,\n\t\tclassName,\n\t\tchildren,\n\t\tonClick,\n\t} = props;\n\tconst status = STATUS[index === active ? 1 : index < active ? 0 : 2];\n\n\tconst handleClick = () => {\n\t\tonClick?.(index);\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tstyle={style}\n\t\t\tclassName={classNames(\n\t\t\t\t\"i-step-item\",\n\t\t\t\t{\n\t\t\t\t\t[`i-step-item-${status}`]: !asList,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tonClick={handleClick}\n\t\t>\n\t\t\t{vertical ? (\n\t\t\t\t<>\n\t\t\t\t\t<div className='i-step-item-left'>\n\t\t\t\t\t\t{renderIcon?.(index, status)}\n\t\t\t\t\t\t{line}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className='i-step-item-right'>\n\t\t\t\t\t\t<div className='i-step-item-title'>{title}</div>\n\t\t\t\t\t\t{children && (\n\t\t\t\t\t\t\t<div className='i-step-item-content'>\n\t\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t<div className='i-step-item-title'>\n\t\t\t\t\t\t{renderIcon?.(index, status)}\n\n\t\t\t\t\t\t<span>{title}</span>\n\n\t\t\t\t\t\t{line}\n\t\t\t\t\t</div>\n\t\t\t\t\t{children && (\n\t\t\t\t\t\t<div className='i-step-item-content'>{children}</div>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nexport default Item;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;AAKA,MAAM,MAAM,GAAG,CAAC,UAAU,EAAE,QAAQ,EAAE,SAAS,CAAC;AAEhD,SAAS,iBAAiB,CAAC,CAAS,EAAE,MAAc,EAAA;AACnD,IAAA,QACCA,GAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,mBAAmB,YACjC,MAAM,KAAK,UAAU,IACrBA,IAAC,UAAU,EAAA,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,GAAI,KAExD,CAAC,GAAG,CAAC,CACL,EAAA,CACK;AAET;AAEA,SAAS,IAAI,CAAC,KAAgB,EAAA;AAC7B,IAAA,MAAM,EACL,KAAK,GAAG,CAAC,EACT,MAAM,GAAG,CAAC,EACV,UAAU,GAAG,iBAAiB,EAC9B,KAAK,EACL,QAAQ,EACR,IAAI,GAAGA,IAAC,OAAO,EAAA,EAAA,CAAG,EAClB,MAAM,EACN,KAAK,EACL,SAAS,EACT,QAAQ,EACR,OAAO,GACP,GAAG,KAAK;IACT,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,KAAK,MAAM,GAAG,CAAC,GAAG,KAAK,GAAG,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC;IAEpE,MAAM,WAAW,GAAG,MAAK;AACxB,QAAA,OAAO,GAAG,KAAK,CAAC;AACjB,KAAC;IAED,QACCA,GACC,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,UAAU,CACpB,aAAa,EACb;AACC,YAAA,CAAC,eAAe,MAAM,CAAA,CAAE,GAAG,CAAC,MAAM;SAClC,EACD,SAAS,CACT,EACD,OAAO,EAAE,WAAW,EAAA,QAAA,EAEnB,QAAQ,IACRC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACCD,cAAK,SAAS,EAAC,kBAAkB,EAC/B,QAAA,EAAA,CAAA,UAAU,GAAG,KAAK,EAAE,MAAM,CAAC,EAC3B,IAAI,CACA,EAAA,CAAA,EACNA,cAAK,SAAS,EAAC,mBAAmB,EACjC,QAAA,EAAA,CAAAD,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mBAAmB,YAAE,KAAK,EAAA,CAAO,EAC/C,QAAQ,KACRA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qBAAqB,EAClC,QAAA,EAAA,QAAQ,GACJ,CACN,CAAA,EAAA,CACI,IACJ,KAEHC,4BACCA,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,mBAAmB,EAAA,QAAA,EAAA,CAChC,UAAU,GAAG,KAAK,EAAE,MAAM,CAAC,EAE5BD,GAAO,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,KAAK,GAAQ,EAEnB,IAAI,IACA,EACL,QAAQ,KACRA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qBAAqB,YAAE,QAAQ,EAAA,CAAO,CACrD,CACC,EAAA,CAAA,CACH,EACI,CAAA;AAER;;;;"}

package/lib/es/components/step/step.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import { useMemo, Children } from 'react';
+import Item from './item.js';
+
+const Step = (props) => {
+    const { active = 0, vertical, renderIcon, line, style, asList, className, children, onClick, } = props;
+    const steps = useMemo(() => {
+        const nodes = [];
+        let index = 0;
+        Children.map(children, (el) => {
+            if (!el || el.type !== Item)
+                return;
+            const { props: elProps } = el;
+            nodes.push({
+                ...el,
+                props: {
+                    renderIcon,
+                    line,
+                    onClick,
+                    ...elProps,
+                    vertical,
+                    active,
+                    asList,
+                    index: index++,
+                },
+            });
+        });
+        return nodes;
+    }, [active, children]);
+    return (jsx("div", { className: classNames("i-step", { "i-step-vertical": vertical }, className), style: style, children: steps }));
+};
+Step.Item = Item;
+
+export { Step as default };
+//# sourceMappingURL=step.js.map

package/lib/es/components/step/step.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"step.js","sources":["../../../../packages/components/step/step.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { Children, ReactNode, useMemo } from \"react\";\nimport \"./index.css\";\nimport Item from \"./item\";\nimport { IStep } from \"./type\";\n\nconst Step = (props: IStep) => {\n\tconst {\n\t\tactive = 0,\n\t\tvertical,\n\t\trenderIcon,\n\t\tline,\n\t\tstyle,\n\t\tasList,\n\t\tclassName,\n\t\tchildren,\n\t\tonClick,\n\t} = props;\n\n\tconst steps = useMemo(() => {\n\t\tconst nodes: ReactNode[] = [];\n\t\tlet index = 0;\n\n\t\tChildren.map(children, (el: any) => {\n\t\t\tif (!el || el.type !== Item) return;\n\n\t\t\tconst { props: elProps } = el;\n\n\t\t\tnodes.push({\n\t\t\t\t...el,\n\t\t\t\tprops: {\n\t\t\t\t\trenderIcon,\n\t\t\t\t\tline,\n\t\t\t\t\tonClick,\n\t\t\t\t\t...elProps,\n\t\t\t\t\tvertical,\n\t\t\t\t\tactive,\n\t\t\t\t\tasList,\n\t\t\t\t\tindex: index++,\n\t\t\t\t},\n\t\t\t});\n\t\t});\n\n\t\treturn nodes;\n\t}, [active, children]);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(\n\t\t\t\t\"i-step\",\n\t\t\t\t{ \"i-step-vertical\": vertical },\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tstyle={style}\n\t\t>\n\t\t\t{steps}\n\t\t</div>\n\t);\n};\n\nStep.Item = Item;\n\nexport default Step;\n"],"names":["_jsx"],"mappings":";;;;;AAMA,MAAM,IAAI,GAAG,CAAC,KAAY,KAAI;IAC7B,MAAM,EACL,MAAM,GAAG,CAAC,EACV,QAAQ,EACR,UAAU,EACV,IAAI,EACJ,KAAK,EACL,MAAM,EACN,SAAS,EACT,QAAQ,EACR,OAAO,GACP,GAAG,KAAK;AAET,IAAA,MAAM,KAAK,GAAG,OAAO,CAAC,MAAK;QAC1B,MAAM,KAAK,GAAgB,EAAE;QAC7B,IAAI,KAAK,GAAG,CAAC;QAEb,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,EAAO,KAAI;AAClC,YAAA,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,IAAI,KAAK,IAAI;gBAAE;AAE7B,YAAA,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE;YAE7B,KAAK,CAAC,IAAI,CAAC;AACV,gBAAA,GAAG,EAAE;AACL,gBAAA,KAAK,EAAE;oBACN,UAAU;oBACV,IAAI;oBACJ,OAAO;AACP,oBAAA,GAAG,OAAO;oBACV,QAAQ;oBACR,MAAM;oBACN,MAAM;oBACN,KAAK,EAAE,KAAK,EAAE;AACd,iBAAA;AACD,aAAA,CAAC;AACH,SAAC,CAAC;AAEF,QAAA,OAAO,KAAK;AACb,KAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAEtB,QACCA,GACC,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CACpB,QAAQ,EACR,EAAE,iBAAiB,EAAE,QAAQ,EAAE,EAC/B,SAAS,CACT,EACD,KAAK,EAAE,KAAK,EAEX,QAAA,EAAA,KAAK,EACD,CAAA;AAER;AAEA,IAAI,CAAC,IAAI,GAAG,IAAI;;;;"}

package/lib/es/components/swiper/index.js

@@ -0,0 +1,6 @@
+import Swiper from './swiper.js';
+
+
+
+export { Swiper as default };
+//# sourceMappingURL=index.js.map

package/lib/es/components/swiper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/lib/es/components/swiper/item.js

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import { useMemo } from 'react';
+
+function Item(props) {
+    const { index = 0, itemIndex = 0, active, type, transition, gap = 0, itemHeight, vertical, style, className, children, onItemClick, } = props;
+    const selfStyle = useMemo(() => {
+        if (type === "normal") {
+            return {
+                [vertical ? "paddingBlock" : "paddingInline"]: gap / 2,
+                height: itemHeight,
+            };
+        }
+        return {
+            transform: `translate(-${index * 100}%, 0)`,
+            transition,
+        };
+    }, [index, gap, itemHeight, vertical, type]);
+    return (jsx("div", { style: { ...style, ...selfStyle }, className: classNames("i-swiper-item", className, {
+            "i-swiper-active": active,
+        }), "data-index": itemIndex, onClick: (e) => onItemClick?.(itemIndex, e), children: children }));
+}
+
+export { Item as default };
+//# sourceMappingURL=item.js.map

package/lib/es/components/swiper/item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.js","sources":["../../../../packages/components/swiper/item.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { useMemo } from \"react\";\nimport { ISwiperItem } from \"./type\";\n\nfunction Item(props: ISwiperItem) {\n\tconst {\n\t\tindex = 0,\n\t\titemIndex = 0,\n\t\tactive,\n\t\ttype,\n\t\ttransition,\n\t\tgap = 0,\n\t\titemHeight,\n\t\tvertical,\n\t\tstyle,\n\t\tclassName,\n\t\tchildren,\n\t\tonItemClick,\n\t} = props;\n\n\tconst selfStyle = useMemo(() => {\n\t\tif (type === \"normal\") {\n\t\t\treturn {\n\t\t\t\t[vertical ? \"paddingBlock\" : \"paddingInline\"]: gap / 2,\n\t\t\t\theight: itemHeight,\n\t\t\t};\n\t\t}\n\n\t\treturn {\n\t\t\ttransform: `translate(-${index * 100}%, 0)`,\n\t\t\ttransition,\n\t\t};\n\t}, [index, gap, itemHeight, vertical, type]);\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{ ...style, ...selfStyle }}\n\t\t\tclassName={classNames(\"i-swiper-item\", className, {\n\t\t\t\t\"i-swiper-active\": active,\n\t\t\t})}\n\t\t\tdata-index={itemIndex}\n\t\t\tonClick={(e) => onItemClick?.(itemIndex, e)}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n\nexport default Item;\n"],"names":["_jsx"],"mappings":";;;;AAIA,SAAS,IAAI,CAAC,KAAkB,EAAA;AAC/B,IAAA,MAAM,EACL,KAAK,GAAG,CAAC,EACT,SAAS,GAAG,CAAC,EACb,MAAM,EACN,IAAI,EACJ,UAAU,EACV,GAAG,GAAG,CAAC,EACP,UAAU,EACV,QAAQ,EACR,KAAK,EACL,SAAS,EACT,QAAQ,EACR,WAAW,GACX,GAAG,KAAK;AAET,IAAA,MAAM,SAAS,GAAG,OAAO,CAAC,MAAK;AAC9B,QAAA,IAAI,IAAI,KAAK,QAAQ,EAAE;YACtB,OAAO;AACN,gBAAA,CAAC,QAAQ,GAAG,cAAc,GAAG,eAAe,GAAG,GAAG,GAAG,CAAC;AACtD,gBAAA,MAAM,EAAE,UAAU;aAClB;;QAGF,OAAO;AACN,YAAA,SAAS,EAAE,CAAA,WAAA,EAAc,KAAK,GAAG,GAAG,CAAO,KAAA,CAAA;YAC3C,UAAU;SACV;AACF,KAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC;AAE5C,IAAA,QACCA,GACC,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,GAAG,SAAS,EAAE,EACjC,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE,SAAS,EAAE;AACjD,YAAA,iBAAiB,EAAE,MAAM;SACzB,CAAC,EAAA,YAAA,EACU,SAAS,EACrB,OAAO,EAAE,CAAC,CAAC,KAAK,WAAW,GAAG,SAAS,EAAE,CAAC,CAAC,EAE1C,QAAA,EAAA,QAAQ,EACJ,CAAA;AAER;;;;"}

package/lib/es/components/swiper/swiper.js

@@ -0,0 +1,234 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { KeyboardArrowLeftRound, KeyboardArrowRightRound } from '@ricons/material';
+import { useReactive } from 'ahooks';
+import classNames from 'classnames';
+import { useRef, useMemo, Children, useImperativeHandle, useEffect } from 'react';
+import { useMouseMove, useMouseUp } from '../../js/hooks.js';
+import { clamp } from '../../js/utils.js';
+import Icon from '../icon/icon.js';
+import Item from './item.js';
+
+const Swiper = ((props) => {
+    const { ref, type = "normal", initial = 0, display = 1, scroll = 1, loop = true, vertical, prev = jsx(Icon, { icon: jsx(KeyboardArrowLeftRound, {}), size: '2em' }), next = jsx(Icon, { icon: jsx(KeyboardArrowRightRound, {}), size: '2em' }), duration = 600, interval = 3000, autoplay, pauseOnHover, arrow = true, reverse, draggable, dragOffset = 40, gap = 0, itemHeight, indicator, fixedIndicator, style, className, children, renderIndicator, onBeforeSwipe, onAfterSwipe, onItemClick, } = props;
+    const listRef = useRef(null);
+    const timerRef = useRef(null);
+    const transition = `all ${duration / 1000}s`;
+    const state = useReactive({
+        current: initial,
+        swipable: true,
+        transition: type === "fade" ? "none" : transition,
+        dragStart: 0,
+        dragging: false,
+        initialized: false,
+    });
+    const items = useMemo(() => {
+        return Children.map(children, (node) => {
+            if (node.type !== Item)
+                return;
+            return node;
+        });
+    }, [children]);
+    const [displayItems, extra, size, total, listSize] = useMemo(() => {
+        const extra = type === "normal" && loop && items.length > display
+            ? display + 1
+            : 0;
+        let list = [];
+        if (extra <= 0) {
+            list = [...items];
+        }
+        else {
+            const head = items.slice(0, extra);
+            const tail = items.slice(-extra);
+            list = [...tail, ...items, ...head];
+        }
+        const listSize = `${(list.length / display) * 100}%`;
+        return [list, extra, items.length, list.length, listSize];
+    }, [display, loop, type, items]);
+    const offsetPercent = useMemo(() => (-100 * (state.current + extra)) / total, [state.current, total]);
+    const position = useMemo(() => {
+        if (size <= display || type === "fade")
+            return;
+        const offset = vertical
+            ? `0, ${offsetPercent}%`
+            : `${offsetPercent}%, 0`;
+        return `translate3d(${offset}, 0)`;
+    }, [offsetPercent, vertical, display, size, type]);
+    const trackStyle = useMemo(() => {
+        if (!vertical || !itemHeight)
+            return;
+        return {
+            height: itemHeight * display,
+        };
+    }, [vertical, itemHeight, display]);
+    const indicatorsLoop = useMemo(() => {
+        return Array.from({
+            length: Math.ceil((size - display) / scroll) + 1,
+        });
+    }, [loop, indicator]);
+    const clearTimer = () => {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+    };
+    const swipeTo = (i) => {
+        if (!state.swipable || i === state.current)
+            return;
+        state.swipable = false;
+        onBeforeSwipe?.(state.current);
+        let reset = false;
+        let next = i;
+        const lastDisplay = size - display;
+        if (loop) {
+            if (i > lastDisplay) {
+                reset = true;
+                i = size;
+                next = 0;
+            }
+            else if (i < 0) {
+                reset = true;
+                i = -display;
+                next = lastDisplay;
+            }
+        }
+        else {
+            next = clamp(next, 0, lastDisplay);
+            i = next;
+        }
+        setTimeout(() => {
+            state.swipable = true;
+        }, duration + 32);
+        if (type === "fade") {
+            state.current = next;
+            onAfterSwipe?.(next);
+            return;
+        }
+        state.current = i;
+        if (!reset) {
+            if (autoplay) {
+                timerRef.current = setTimeout(swipeNext, interval);
+            }
+            setTimeout(() => {
+                onAfterSwipe?.(next);
+            }, duration + 12);
+            return;
+        }
+        setTimeout(() => {
+            state.transition = "none";
+            state.current = next;
+            onAfterSwipe?.(next);
+            if (autoplay) {
+                timerRef.current = setTimeout(swipeNext, interval);
+            }
+            setTimeout(() => {
+                state.transition = transition;
+            }, 60);
+        }, duration + 20);
+    };
+    const swipeNext = () => {
+        swipeTo(reverse ? state.current - scroll : state.current + scroll);
+    };
+    const swipePrev = () => {
+        swipeTo(reverse ? state.current + scroll : state.current - scroll);
+    };
+    const handleMouseDown = (e) => {
+        if (!draggable || !state.swipable || type === "fade")
+            return;
+        e.stopPropagation();
+        e.preventDefault();
+        if (e.touches) {
+            e = e.touches[0];
+        }
+        Object.assign(state, {
+            dragStart: vertical ? e.clientY : e.clientX,
+            dragging: true,
+            transition: "none",
+        });
+    };
+    const handleMouseMove = (e) => {
+        if (!state.dragging || !listRef.current)
+            return;
+        e.preventDefault();
+        if (e.touches) {
+            e = e.touches[0];
+        }
+        const dragEnd = vertical ? e.clientY : e.clientX;
+        const offset = ((dragEnd - state.dragStart) * 61.8) /
+            listRef.current[vertical ? "offsetHeight" : "offsetWidth"] +
+            offsetPercent;
+        listRef.current.style.transform = `translate3d(${vertical ? `0, ${offset}%` : `${offset}%, 0`}, 0)`;
+    };
+    const handleMouseUp = (e) => {
+        if (!state.dragging || !listRef.current)
+            return;
+        if (e.changedTouches) {
+            e = e.changedTouches[0];
+        }
+        const dragEnd = vertical ? e.clientY : e.clientX;
+        const part = listRef.current[vertical ? "offsetHeight" : "offsetWidth"] / total;
+        const offset = (dragEnd - state.dragStart) * 0.618;
+        const absOffset = Math.abs(offset);
+        if (absOffset > dragOffset) {
+            const base = Math.floor(absOffset / part);
+            const mod = (absOffset % part) - dragOffset > 0 ? 1 : 0;
+            const p = base + mod;
+            let to = state.current + (offset > 0 ? -p : p);
+            swipeTo(to);
+        }
+        listRef.current.style.transform = position || "";
+        Object.assign(state, {
+            dragging: false,
+            transition,
+        });
+    };
+    const handleMouseOver = () => {
+        if (!pauseOnHover)
+            return;
+        clearTimer();
+    };
+    const handleMouseLeave = () => {
+        if (!pauseOnHover)
+            return;
+        clearTimer();
+        timerRef.current = setTimeout(swipeNext, interval);
+    };
+    useMouseMove(handleMouseMove);
+    useMouseUp(handleMouseUp);
+    useImperativeHandle(ref, () => ({
+        swipeTo,
+        swipeNext,
+        swipePrev,
+    }));
+    useEffect(() => {
+        if (!autoplay)
+            return;
+        timerRef.current = setTimeout(swipeNext, interval);
+        return () => {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        };
+    }, [autoplay, interval]);
+    return (jsxs("div", { style: style, className: classNames("i-swiper", {
+            "i-swiper-vertical": vertical,
+            "i-swiper-initialized": state.initialized,
+        }, className), children: [jsxs("div", { className: 'i-swiper-track', style: trackStyle, onMouseOver: handleMouseOver, onMouseLeave: handleMouseLeave, children: [jsx("div", { ref: listRef, className: classNames("i-swiper-list", {
+                            "i-swiper-fade": type === "fade",
+                        }), style: {
+                            [vertical ? "height" : "width"]: listSize,
+                            transform: position,
+                            transition: state.transition,
+                        }, onMouseDown: handleMouseDown, onTouchStart: handleMouseDown, children: displayItems.map((item, i) => {
+                            const { props: itemProps } = item;
+                            return (jsx(Item, { index: i, itemIndex: (i - extra + size) % size, active: i - extra === state.current, type: type, gap: gap, transition: transition, itemHeight: itemHeight, vertical: vertical, onItemClick: onItemClick, ...itemProps }, i));
+                        }) }), arrow && (jsxs(Fragment, { children: [(loop || state.current !== 0) && (jsx("a", { className: 'i-swiper-arrow i-swiper-prev', onClick: swipePrev, children: prev })), (loop || state.current < size - display) && (jsx("a", { className: 'i-swiper-arrow i-swiper-next', onClick: swipeNext, children: next }))] }))] }), indicator && (jsx("div", { className: classNames("i-swiper-indicators", {
+                    "i-swiper-indicators-fixed": fixedIndicator,
+                }), children: indicatorsLoop.map((_, i) => {
+                    return (jsx("a", { className: classNames("i-swiper-indicator", {
+                            "i-indicator-active": i ===
+                                Math[loop ? "floor" : "ceil"](((state.current + size) % size) /
+                                    scroll),
+                        }), onClick: () => swipeTo(i * scroll), children: renderIndicator?.(i) }, i));
+                }) }))] }));
+});
+Swiper.Item = Item;
+
+export { Swiper as default };
+//# sourceMappingURL=swiper.js.map

package/lib/es/components/swiper/swiper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"swiper.js","sources":["../../../../packages/components/swiper/swiper.tsx"],"sourcesContent":["import {\n\tKeyboardArrowLeftRound,\n\tKeyboardArrowRightRound,\n} from \"@ricons/material\";\nimport { useReactive } from \"ahooks\";\nimport classNames from \"classnames\";\nimport {\n\tChildren,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseMemo,\n\tuseRef,\n} from \"react\";\nimport { useMouseMove, useMouseUp } from \"../../js/hooks\";\nimport { clamp } from \"../../js/utils\";\nimport Icon from \"../icon\";\nimport \"./index.css\";\nimport Item from \"./item\";\nimport { CompositionSwiper, ISwiper } from \"./type\";\n\nconst Swiper = ((props: ISwiper) => {\n\tconst {\n\t\tref,\n\t\ttype = \"normal\",\n\t\tinitial = 0,\n\t\tdisplay = 1,\n\t\tscroll = 1,\n\t\tloop = true,\n\t\tvertical,\n\t\tprev = <Icon icon={<KeyboardArrowLeftRound />} size='2em' />,\n\t\tnext = <Icon icon={<KeyboardArrowRightRound />} size='2em' />,\n\t\tduration = 600,\n\t\tinterval = 3000,\n\t\tautoplay,\n\t\tpauseOnHover,\n\t\tarrow = true,\n\t\treverse,\n\t\tdraggable,\n\t\tdragOffset = 40,\n\t\tgap = 0,\n\t\titemHeight,\n\t\tindicator,\n\t\tfixedIndicator,\n\t\tstyle,\n\t\tclassName,\n\t\tchildren,\n\t\trenderIndicator,\n\t\tonBeforeSwipe,\n\t\tonAfterSwipe,\n\t\tonItemClick,\n\t} = props;\n\n\tconst listRef = useRef<HTMLDivElement>(null);\n\tconst timerRef = useRef<any>(null);\n\tconst transition = `all ${duration / 1000}s`;\n\tconst state = useReactive({\n\t\tcurrent: initial,\n\t\tswipable: true,\n\t\ttransition: type === \"fade\" ? \"none\" : transition,\n\t\tdragStart: 0,\n\t\tdragging: false,\n\t\tinitialized: false,\n\t});\n\n\tconst items = useMemo(() => {\n\t\treturn Children.map(children, (node: any) => {\n\t\t\tif (node.type !== Item) return;\n\n\t\t\treturn node;\n\t\t});\n\t}, [children]);\n\n\tconst [displayItems, extra, size, total, listSize] = useMemo(() => {\n\t\tconst extra =\n\t\t\ttype === \"normal\" && loop && items.length > display\n\t\t\t\t? display + 1\n\t\t\t\t: 0;\n\t\tlet list: any = [];\n\n\t\tif (extra <= 0) {\n\t\t\tlist = [...items];\n\t\t} else {\n\t\t\tconst head = items.slice(0, extra);\n\t\t\tconst tail = items.slice(-extra);\n\t\t\tlist = [...tail, ...items, ...head];\n\t\t}\n\n\t\tconst listSize = `${(list.length / display) * 100}%`;\n\n\t\treturn [list, extra, items.length, list.length, listSize];\n\t}, [display, loop, type, items]);\n\n\tconst offsetPercent = useMemo(\n\t\t() => (-100 * (state.current + extra)) / total,\n\t\t[state.current, total]\n\t);\n\n\tconst position = useMemo(() => {\n\t\tif (size <= display || type === \"fade\") return;\n\n\t\tconst offset = vertical\n\t\t\t? `0, ${offsetPercent}%`\n\t\t\t: `${offsetPercent}%, 0`;\n\t\treturn `translate3d(${offset}, 0)`;\n\t}, [offsetPercent, vertical, display, size, type]);\n\n\tconst trackStyle = useMemo(() => {\n\t\tif (!vertical || !itemHeight) return;\n\n\t\treturn {\n\t\t\theight: itemHeight * display,\n\t\t};\n\t}, [vertical, itemHeight, display]);\n\n\tconst indicatorsLoop = useMemo(() => {\n\t\treturn Array.from({\n\t\t\tlength: Math.ceil((size - display) / scroll) + 1,\n\t\t});\n\t}, [loop, indicator]);\n\n\tconst clearTimer = () => {\n\t\tclearTimeout(timerRef.current);\n\t\ttimerRef.current = null;\n\t};\n\n\tconst swipeTo = (i: number) => {\n\t\tif (!state.swipable || i === state.current) return;\n\t\tstate.swipable = false;\n\t\tonBeforeSwipe?.(state.current);\n\n\t\tlet reset = false;\n\t\tlet next = i;\n\t\tconst lastDisplay = size - display;\n\n\t\tif (loop) {\n\t\t\tif (i > lastDisplay) {\n\t\t\t\treset = true;\n\t\t\t\ti = size;\n\t\t\t\tnext = 0;\n\t\t\t} else if (i < 0) {\n\t\t\t\treset = true;\n\t\t\t\ti = -display;\n\t\t\t\tnext = lastDisplay;\n\t\t\t}\n\t\t} else {\n\t\t\tnext = clamp(next, 0, lastDisplay);\n\t\t\ti = next;\n\t\t}\n\n\t\tsetTimeout(() => {\n\t\t\tstate.swipable = true;\n\t\t}, duration + 32);\n\n\t\tif (type === \"fade\") {\n\t\t\tstate.current = next;\n\t\t\tonAfterSwipe?.(next);\n\t\t\treturn;\n\t\t}\n\n\t\tstate.current = i;\n\n\t\tif (!reset) {\n\t\t\tif (autoplay) {\n\t\t\t\ttimerRef.current = setTimeout(swipeNext, interval);\n\t\t\t}\n\t\t\tsetTimeout(() => {\n\t\t\t\tonAfterSwipe?.(next);\n\t\t\t}, duration + 12);\n\t\t\treturn;\n\t\t}\n\n\t\tsetTimeout(() => {\n\t\t\tstate.transition = \"none\";\n\t\t\tstate.current = next;\n\t\t\tonAfterSwipe?.(next);\n\t\t\tif (autoplay) {\n\t\t\t\ttimerRef.current = setTimeout(swipeNext, interval);\n\t\t\t}\n\t\t\tsetTimeout(() => {\n\t\t\t\tstate.transition = transition;\n\t\t\t}, 60);\n\t\t}, duration + 20);\n\t};\n\tconst swipeNext = () => {\n\t\tswipeTo(reverse ? state.current - scroll : state.current + scroll);\n\t};\n\n\tconst swipePrev = () => {\n\t\tswipeTo(reverse ? state.current + scroll : state.current - scroll);\n\t};\n\n\tconst handleMouseDown = (e) => {\n\t\tif (!draggable || !state.swipable || type === \"fade\") return;\n\t\te.stopPropagation();\n\t\te.preventDefault();\n\n\t\tif (e.touches) {\n\t\t\te = e.touches[0];\n\t\t}\n\n\t\tObject.assign(state, {\n\t\t\tdragStart: vertical ? e.clientY : e.clientX,\n\t\t\tdragging: true,\n\t\t\ttransition: \"none\",\n\t\t});\n\t};\n\n\tconst handleMouseMove = (e) => {\n\t\tif (!state.dragging || !listRef.current) return;\n\t\te.preventDefault();\n\n\t\tif (e.touches) {\n\t\t\te = e.touches[0];\n\t\t}\n\n\t\tconst dragEnd = vertical ? e.clientY : e.clientX;\n\t\tconst offset =\n\t\t\t((dragEnd - state.dragStart) * 61.8) /\n\t\t\t\tlistRef.current[vertical ? \"offsetHeight\" : \"offsetWidth\"] +\n\t\t\toffsetPercent;\n\n\t\tlistRef.current.style.transform = `translate3d(${\n\t\t\tvertical ? `0, ${offset}%` : `${offset}%, 0`\n\t\t}, 0)`;\n\t};\n\n\tconst handleMouseUp = (e) => {\n\t\tif (!state.dragging || !listRef.current) return;\n\n\t\tif (e.changedTouches) {\n\t\t\te = e.changedTouches[0];\n\t\t}\n\n\t\tconst dragEnd = vertical ? e.clientY : e.clientX;\n\t\tconst part =\n\t\t\tlistRef.current[vertical ? \"offsetHeight\" : \"offsetWidth\"] / total;\n\t\tconst offset = (dragEnd - state.dragStart) * 0.618;\n\t\tconst absOffset = Math.abs(offset);\n\n\t\tif (absOffset > dragOffset) {\n\t\t\tconst base = Math.floor(absOffset / part);\n\t\t\tconst mod = (absOffset % part) - dragOffset > 0 ? 1 : 0;\n\t\t\tconst p = base + mod;\n\n\t\t\tlet to = state.current + (offset > 0 ? -p : p);\n\n\t\t\tswipeTo(to);\n\t\t}\n\n\t\tlistRef.current.style.transform = position || \"\";\n\n\t\tObject.assign(state, {\n\t\t\tdragging: false,\n\t\t\ttransition,\n\t\t});\n\t};\n\n\tconst handleMouseOver = () => {\n\t\tif (!pauseOnHover) return;\n\t\tclearTimer();\n\t};\n\n\tconst handleMouseLeave = () => {\n\t\tif (!pauseOnHover) return;\n\t\tclearTimer();\n\t\ttimerRef.current = setTimeout(swipeNext, interval);\n\t};\n\n\tuseMouseMove(handleMouseMove);\n\tuseMouseUp(handleMouseUp);\n\n\tuseImperativeHandle(ref, () => ({\n\t\tswipeTo,\n\t\tswipeNext,\n\t\tswipePrev,\n\t}));\n\n\tuseEffect(() => {\n\t\tif (!autoplay) return;\n\t\ttimerRef.current = setTimeout(swipeNext, interval);\n\n\t\treturn () => {\n\t\t\tclearTimeout(timerRef.current);\n\t\t\ttimerRef.current = null;\n\t\t};\n\t}, [autoplay, interval]);\n\n\treturn (\n\t\t<div\n\t\t\tstyle={style}\n\t\t\tclassName={classNames(\n\t\t\t\t\"i-swiper\",\n\t\t\t\t{\n\t\t\t\t\t\"i-swiper-vertical\": vertical,\n\t\t\t\t\t\"i-swiper-initialized\": state.initialized,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName='i-swiper-track'\n\t\t\t\tstyle={trackStyle}\n\t\t\t\tonMouseOver={handleMouseOver}\n\t\t\t\tonMouseLeave={handleMouseLeave}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tref={listRef}\n\t\t\t\t\tclassName={classNames(\"i-swiper-list\", {\n\t\t\t\t\t\t\"i-swiper-fade\": type === \"fade\",\n\t\t\t\t\t})}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\t[vertical ? \"height\" : \"width\"]: listSize,\n\t\t\t\t\t\ttransform: position,\n\t\t\t\t\t\ttransition: state.transition,\n\t\t\t\t\t}}\n\t\t\t\t\tonMouseDown={handleMouseDown}\n\t\t\t\t\tonTouchStart={handleMouseDown}\n\t\t\t\t>\n\t\t\t\t\t{displayItems.map((item, i) => {\n\t\t\t\t\t\tconst { props: itemProps } = item;\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Item\n\t\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\t\tindex={i}\n\t\t\t\t\t\t\t\titemIndex={(i - extra + size) % size}\n\t\t\t\t\t\t\t\tactive={i - extra === state.current}\n\t\t\t\t\t\t\t\ttype={type}\n\t\t\t\t\t\t\t\tgap={gap}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\titemHeight={itemHeight}\n\t\t\t\t\t\t\t\tvertical={vertical}\n\t\t\t\t\t\t\t\tonItemClick={onItemClick}\n\t\t\t\t\t\t\t\t{...itemProps}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\n\t\t\t\t{arrow && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{(loop || state.current !== 0) && (\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\tclassName='i-swiper-arrow i-swiper-prev'\n\t\t\t\t\t\t\t\tonClick={swipePrev}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{prev}\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{(loop || state.current < size - display) && (\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\tclassName='i-swiper-arrow i-swiper-next'\n\t\t\t\t\t\t\t\tonClick={swipeNext}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{next}\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{indicator && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={classNames(\"i-swiper-indicators\", {\n\t\t\t\t\t\t\"i-swiper-indicators-fixed\": fixedIndicator,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{indicatorsLoop.map((_, i) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\t\tclassName={classNames(\"i-swiper-indicator\", {\n\t\t\t\t\t\t\t\t\t\"i-indicator-active\":\n\t\t\t\t\t\t\t\t\t\ti ===\n\t\t\t\t\t\t\t\t\t\tMath[loop ? \"floor\" : \"ceil\"](\n\t\t\t\t\t\t\t\t\t\t\t((state.current + size) % size) /\n\t\t\t\t\t\t\t\t\t\t\t\tscroll\n\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\tonClick={() => swipeTo(i * scroll)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{renderIndicator?.(i)}\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}) as CompositionSwiper;\n\nSwiper.Item = Item;\n\nexport default Swiper;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/lib/es/components/tabs/index.js

@@ -0,0 +1,6 @@
+import Tabs from './tabs.js';
+
+
+
+export { Tabs as default };
+//# sourceMappingURL=index.js.map

package/lib/es/components/tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/lib/es/components/tabs/item.js

@@ -0,0 +1,8 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+const Item = (props) => {
+    return jsx(Fragment, {});
+};
+
+export { Item as default };
+//# sourceMappingURL=item.js.map

package/lib/es/components/tabs/item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.js","sources":["../../../../packages/components/tabs/item.tsx"],"sourcesContent":["import { ITabItem } from \"./type\";\n\nconst Item = (props: ITabItem) => {\n\treturn <></>;\n};\n\nexport default Item;\n"],"names":["_jsx"],"mappings":";;AAEA,MAAM,IAAI,GAAG,CAAC,KAAe,KAAI;AAChC,IAAA,OAAOA,iBAAK;AACb;;;;"}

package/lib/es/components/tabs/tabs.js

@@ -0,0 +1,211 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { MoreHorizRound } from '@ricons/material';
+import { useReactive, useSize } from 'ahooks';
+import classNames from 'classnames';
+import { pick } from 'radash';
+import { useRef, useEffect, Children, useImperativeHandle } from 'react';
+import { useIntersectionObserver } from '../../js/hooks.js';
+import '../button/index.js';
+import Icon from '../icon/icon.js';
+import Popup from '../popup/popup.js';
+import Helpericon from '../utils/helpericon/helpericon.js';
+import Item from './item.js';
+import Button from '../button/button.js';
+
+const Tabs = ((props) => {
+    const { ref, active, tabs: items, type = "default", prepend, append, children, className, vertical, toggable, navsJustify = "start", bar = true, hideMore, barClass, renderMore = () => (jsx(Button, { flat: true, square: true, size: 'small', children: jsx(Icon, { icon: jsx(MoreHorizRound, {}) }) })), onTabChange, ...rest } = props;
+    const navRefs = useRef([]);
+    const barRef = useRef(null);
+    const navsRef = useRef(null);
+    const state = useReactive({
+        active,
+        prevActive: undefined,
+        barStyle: {},
+        cachedTabs: [],
+        overflow: false,
+        more: [],
+        tabs: [],
+    });
+    const { observe, unobserve } = useIntersectionObserver();
+    const size = useSize(navsRef);
+    useEffect(() => {
+        if (!items) {
+            if (!children) {
+                state.tabs = [];
+                return;
+            }
+            state.tabs = Children.map(children, (node, i) => {
+                const { key, props: nodeProps } = node;
+                const { title, children, content, keepDOM } = nodeProps;
+                const cloned = children
+                    ? typeof children === "string"
+                        ? children
+                        : pick(children, ["props", "type", "$$typeof", "ref"])
+                    : content;
+                return {
+                    key: key || String(i),
+                    title,
+                    content: cloned,
+                    keepDOM,
+                };
+            });
+            return;
+        }
+        state.tabs = items.map((item, i) => {
+            if (["string", "number"].includes(typeof item)) {
+                return { key: item, title: item };
+            }
+            if (item.key === undefined) {
+                item.key = i;
+            }
+            return item;
+        });
+    }, [children, items]);
+    const add = (tab) => {
+        const { key } = tab;
+        const i = state.tabs.findIndex((t) => t.key === key);
+        if (i > -1) {
+            open(state.tabs[i].key ?? i);
+            return;
+        }
+        const l = state.tabs.length;
+        const tkey = tab.key ?? l;
+        state.tabs.push({ ...tab, key: tkey });
+        open(tkey);
+    };
+    const close = (key) => {
+        const i = state.tabs.findIndex((t) => t.key === key);
+        if (i < 0)
+            return;
+        state.tabs.splice(i, 1);
+        if (state.active !== key)
+            return;
+        const next = state.tabs[i] || state.tabs[i - 1];
+        open(state.prevActive ?? next?.key ?? "");
+    };
+    const open = (key) => {
+        if (key === state.active) {
+            if (!toggable)
+                return;
+            onTabChange?.(undefined, key);
+            state.active = undefined;
+            state.barStyle = {
+                height: 0,
+                width: 0,
+            };
+            return;
+        }
+        state.prevActive = state.active;
+        onTabChange?.(key, state.active);
+        state.active = key;
+    };
+    useEffect(() => {
+        if (!size || hideMore)
+            return;
+        const { scrollHeight, scrollWidth } = navsRef.current;
+        const { width, height } = size;
+        state.overflow = scrollHeight > height || scrollWidth > width;
+        if (!state.overflow)
+            return;
+        navRefs.current.map((nav, i) => {
+            if (!nav)
+                return;
+            observe(nav, (tar, visible) => {
+                if (!state.tabs[i])
+                    return;
+                state.tabs[i].intersecting = visible;
+                state.more = state.tabs.filter((tab) => !tab.intersecting);
+            });
+        });
+    }, [size, hideMore, state.tabs.length]);
+    useEffect(() => {
+        if (!bar || type === "pane" || state.active === undefined) {
+            return;
+        }
+        const index = state.tabs.findIndex((tab) => tab.key === state.active);
+        setTimeout(() => {
+            const nav = navRefs.current[index];
+            if (!nav)
+                return;
+            if (state.tabs[index].keepDOM && state.active) {
+                const i = state.cachedTabs.findIndex((k) => k === state.active);
+                i < 0 && state.cachedTabs.unshift(state.active);
+            }
+            const { offsetHeight, offsetLeft, offsetTop, offsetWidth } = nav;
+            const isLine = type === "line";
+            state.barStyle = {
+                height: !vertical && isLine ? ".25em" : offsetHeight,
+                width: vertical && isLine ? ".25em" : offsetWidth,
+                transform: `translate(${offsetLeft}px, ${offsetTop}px)`,
+            };
+        }, 16);
+    }, [state.active, bar, size]);
+    useEffect(() => {
+        if (active === undefined || state.active === active)
+            return;
+        open(active);
+    }, [active]);
+    useEffect(() => {
+        if (hideMore)
+            return;
+        return () => {
+            navRefs.current?.map(unobserve);
+        };
+    }, [state.tabs.length]);
+    useEffect(() => {
+        if (!navsRef.current || vertical)
+            return;
+        const handleMouseWheel = (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            if (vertical)
+                return;
+            navsRef.current?.scrollBy({
+                left: e.deltaY + e.deltaX,
+            });
+        };
+        navsRef.current.addEventListener("wheel", handleMouseWheel, {
+            passive: false,
+        });
+        return () => {
+            if (!navsRef.current)
+                return;
+            navsRef.current.removeEventListener("wheel", handleMouseWheel);
+        };
+    }, [navsRef.current]);
+    useImperativeHandle(ref, () => ({
+        open,
+        close,
+        add,
+        navs: navsRef,
+    }));
+    return (jsxs("div", { className: classNames("i-tabs", { flex: vertical, [`i-tabs-${type}`]: type !== "default" }, className), ...rest, children: [jsxs("div", { className: classNames("i-tab-navs-container", {
+                    "i-tab-navs-vertical": vertical,
+                }), children: [prepend, jsxs("div", { ref: navsRef, className: classNames("i-tab-navs", `justify-${navsJustify}`), children: [state.tabs.map((tab, i) => {
+                                const { title, key = i, closable } = tab;
+                                return (jsxs("a", { ref: (ref) => (navRefs.current[i] = ref), className: classNames("i-tab-nav", {
+                                        "i-tab-active": state.active === key,
+                                    }), onClick: () => open(key), children: [title, closable && (jsx(Helpericon, { as: 'i', active: true, className: 'i-tab-nav-close', onClick: (e) => {
+                                                e.stopPropagation();
+                                                close(key);
+                                            } }))] }, key));
+                            }), bar && (jsx("span", { ref: barRef, className: classNames("i-tab-navs-bar", barClass), style: state.barStyle }))] }), !hideMore && state.overflow && state.more.length > 0 && (jsx(Popup, { arrow: false, position: vertical ? "right" : "bottom", align: 'end', touchable: true, hideDelay: 500, content: jsx("div", { className: 'i-tabs-morelist pd-4', children: state.more.map((tab, i) => {
+                                const { key = i, title } = tab;
+                                const isActive = state.active === key;
+                                return (jsx("a", { className: classNames("i-tab-nav", {
+                                        "i-tab-active": isActive,
+                                    }), onClick: () => open(key), children: title }, key));
+                            }) }), children: renderMore(state.more) })), append] }), jsx("div", { className: 'i-tab-contents', children: state.tabs.map((tab, i) => {
+                    const { key = i, content } = tab;
+                    const isActive = state.active === key;
+                    const show = isActive ||
+                        (key !== undefined && state.cachedTabs.includes(key));
+                    return (show && (jsx("div", { className: classNames("i-tab-content", {
+                            "i-tab-active": isActive,
+                        }), children: content }, key)));
+                }) })] }));
+});
+Tabs.Item = Item;
+
+export { Tabs as default };
+//# sourceMappingURL=tabs.js.map