foxit-component 0.0.1-alpha.4 → 0.0.1-alpha.41

package/es/Modal/Modal.js

@@ -1,39 +1,110 @@
-import { __assign } from '../node_modules/tslib/tslib.es6.js';
+import { __assign, __awaiter, __generator } from '../node_modules/tslib/tslib.es6.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
 import { Icon } from '../Icon/index.js';
+import classNames from 'classnames';
 import { createRoot } from 'react-dom/client';
 import { Modal as Modal$1 } from './ModalTemp.js';
 import { Button } from '../Button/Button.js';
-import './modal.css.js';
 
 var ModalContent = function (_a) {
-    var title = _a.title, onCancel = _a.onCancel, _b = _a.onCancelText, onCancelText = _b === void 0 ? undefined : _b, onOk = _a.onOk, _c = _a.onOkText, onOkText = _c === void 0 ? undefined : _c, children = _a.children, _d = _a.width, width = _d === void 0 ? '400px' : _d;
-    return (jsxs("div", __assign({ className: "foxit-modal-content-container", style: {
-            maxWidth: width,
+    var title = _a.title, onCancel = _a.onCancel, _b = _a.onCancelText, onCancelText = _b === void 0 ? undefined : _b, onOk = _a.onOk, _c = _a.onOkText, onOkText = _c === void 0 ? undefined : _c, children = _a.children, _d = _a.width, width = _d === void 0 ? '400px' : _d, type = _a.type, _e = _a.closable, closable = _e === void 0 ? true : _e;
+    var _f = useState(false), loading = _f[0], setLoading = _f[1];
+    var _g = useState(false), cancelLoading = _g[0], setCancelLoading = _g[1];
+    var handleOk = function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!onOk) return [3 /*break*/, 4];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, , 3, 4]);
+                    setLoading(true);
+                    return [4 /*yield*/, onOk()];
+                case 2:
+                    _a.sent();
+                    return [3 /*break*/, 4];
+                case 3:
+                    setLoading(false);
+                    return [7 /*endfinally*/];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleCancel = function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!onCancel) return [3 /*break*/, 4];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, , 3, 4]);
+                    setCancelLoading(true);
+                    return [4 /*yield*/, onCancel()];
+                case 2:
+                    _a.sent();
+                    return [3 /*break*/, 4];
+                case 3:
+                    setCancelLoading(false);
+                    return [7 /*endfinally*/];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    return (jsxs("div", __assign({ className: classNames('foxit-modal-content-container', type === 'success' ? 'foxit-modal-success' : ''), style: {
+            maxWidth: "min(".concat(width, ", calc(100vw - 32px))"),
             width: width
-        } }, { children: [jsxs("div", __assign({ className: "foxit-modal-head" }, { children: [jsx("div", __assign({ className: "foxit-modal-title" }, { children: title })), jsx("div", __assign({ onClick: onCancel, className: "foxit-modal-close-button" }, { children: jsx(Icon, { name: "CloseOutlined" }) }))] })), jsx("div", { children: children }), jsxs("div", __assign({ className: "foxit-modal-footer" }, { children: [onCancelText && (jsx(Button, __assign({ size: "medium", onClick: onCancel }, { children: onCancelText }))), onOkText && (jsx(Button, __assign({ primary: true, size: "medium", onClick: onOk }, { children: onOkText })))] }))] })));
+        } }, { children: [jsxs("div", __assign({ className: "foxit-modal-head" }, { children: [jsx("div", __assign({ className: "foxit-modal-title" }, { children: title })), closable && (jsx("div", __assign({ onClick: onCancel, className: type === 'success' ? 'foxit-modal-success-icon' : 'foxit-modal-close-button' }, { children: type === 'success' ? (jsx(Icon, { name: "FireWorkColoursOutlined" })) : (jsx(Icon, { name: "CloseOutlined" })) })))] })), jsx("div", __assign({ className: "foxit-modal-children" }, { children: children })), jsxs("div", __assign({ className: "foxit-modal-footer" }, { children: [onCancelText && (jsx(Button, __assign({ size: "medium", onClick: handleCancel, loading: cancelLoading }, { children: onCancelText }))), onOkText && (jsx(Button, __assign({ primary: true, size: "medium", onClick: handleOk, loading: loading }, { children: onOkText })))] }))] })));
 };
 var Modal = function (_a) {
-    var title = _a.title, opened = _a.opened, onOk = _a.onOk, onOkText = _a.onOkText, onCancel = _a.onCancel, onCancelText = _a.onCancelText, maskClosable = _a.maskClosable, children = _a.children, width = _a.width;
-    return (jsx(Modal$1, __assign({ opened: opened, onClose: onCancel || (function () { }), maskClosable: maskClosable, position: "top" }, { children: jsx(ModalContent, __assign({ title: title, width: width, onCancel: onCancel, onCancelText: onCancelText, onOk: onOk, onOkText: onOkText }, { children: children })) })));
+    var title = _a.title, opened = _a.opened, onOk = _a.onOk, onOkText = _a.onOkText, onCancel = _a.onCancel, onCancelText = _a.onCancelText, maskClosable = _a.maskClosable, children = _a.children, width = _a.width, type = _a.type, closable = _a.closable;
+    return (jsx(Modal$1, __assign({ opened: opened, onClose: onCancel || (function () { }), maskClosable: maskClosable, position: "top" }, { children: jsx(ModalContent, __assign({ title: title, width: width, onCancel: onCancel, onCancelText: onCancelText, onOk: onOk, onOkText: onOkText, type: type, closable: closable }, { children: children })) })));
 };
 // 语法糖的调用方式
 Modal.confirm = function (_a) {
-    var title = _a.title, onOk = _a.onOk, onCancel = _a.onCancel, onOkText = _a.onOkText, onCancelText = _a.onCancelText, _b = _a.maskClosable, maskClosable = _b === void 0 ? true : _b, content = _a.content, width = _a.width;
+    var title = _a.title, onOk = _a.onOk, onCancel = _a.onCancel, onOkText = _a.onOkText, onCancelText = _a.onCancelText, _b = _a.maskClosable, maskClosable = _b === void 0 ? true : _b, content = _a.content, width = _a.width, closable = _a.closable;
     var modalRoot = document.createElement('div');
     document.body.appendChild(modalRoot);
     var root = createRoot(modalRoot);
     var handleClose = function () {
         root.unmount();
-        document.body.removeChild(modalRoot);
+        if (document.body.contains(modalRoot)) {
+            document.body.removeChild(modalRoot);
+        }
     };
-    root.render(jsx(Modal$1, __assign({ opened: true, onClose: handleClose, maskClosable: maskClosable, position: "top" }, { children: jsx(ModalContent, __assign({ title: title, width: width, onCancel: function () {
-                onCancel === null || onCancel === void 0 ? void 0 : onCancel();
-                handleClose();
-            }, onCancelText: onCancelText, onOk: function () {
-                onOk === null || onOk === void 0 ? void 0 : onOk();
-                handleClose();
-            }, onOkText: onOkText }, { children: content })) })));
+    root.render(jsx(Modal$1, __assign({ opened: true, onClose: handleClose, maskClosable: maskClosable, position: "top" }, { children: jsx(ModalContent, __assign({ title: title, width: width, onCancel: onCancel instanceof Function && onCancel.constructor.name === 'AsyncFunction'
+                ? function () { return __awaiter(void 0, void 0, void 0, function () {
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0: return [4 /*yield*/, onCancel()];
+                            case 1:
+                                _a.sent();
+                                handleClose();
+                                return [2 /*return*/];
+                        }
+                    });
+                }); }
+                : function () {
+                    onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+                    handleClose();
+                }, onCancelText: onCancelText, onOk: 
+            // 判断传进来的onOk是否为async函数
+            onOk instanceof Function && onOk.constructor.name === 'AsyncFunction'
+                ? function () { return __awaiter(void 0, void 0, void 0, function () {
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0: return [4 /*yield*/, onOk()];
+                            case 1:
+                                _a.sent();
+                                handleClose();
+                                return [2 /*return*/];
+                        }
+                    });
+                }); }
+                : function () {
+                    onOk === null || onOk === void 0 ? void 0 : onOk();
+                    handleClose();
+                }, onOkText: onOkText, closable: closable }, { children: content })) })));
 };
 
 export { Modal };

package/es/Modal/ModalTemp.js

@@ -4,7 +4,6 @@ import { useState, useEffect, useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
-import './modal.css.js';
 
 var contentAnimation = {
     enter: 'foxit-modal-opacity-0 foxit-modal-scale-0',
@@ -24,6 +23,10 @@ var Portal = function (_a) {
     useEffect(function () {
         var _a, _b;
         (_b = (_a = document === null || document === void 0 ? void 0 : document.body) === null || _a === void 0 ? void 0 : _a.appendChild) === null || _b === void 0 ? void 0 : _b.call(_a, container);
+        return function () {
+            var _a, _b;
+            (_b = (_a = document === null || document === void 0 ? void 0 : document.body) === null || _a === void 0 ? void 0 : _a.removeChild) === null || _b === void 0 ? void 0 : _b.call(_a, container);
+        };
     }, [container]);
     return createPortal(children, container);
 };

package/es/Pagination/Pagination.d.ts

@@ -5,6 +5,8 @@ interface PaginationProps {
     pageSize: number;
     onChange?: (page: number) => void;
     defaultCurrent?: number;
+    current?: number;
+    mobile?: boolean;
 }
 declare const Pagination: React.FC<PaginationProps>;
 export default Pagination;

package/es/Pagination/Pagination.js

@@ -1,15 +1,20 @@
 import { __assign } from '../node_modules/tslib/tslib.es6.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
-import './pagination.css.js';
+import { Button } from '../Button/Button.js';
 
 var $_MORE = 9999999999;
 var Pagination = function (_a) {
-    var total = _a.total, pageSize = _a.pageSize, onChange = _a.onChange, _b = _a.defaultCurrent, defaultCurrent = _b === void 0 ? 1 : _b;
-    var _c = useState(defaultCurrent), current = _c[0], setCurrent = _c[1];
-    var _d = useState([]), pages = _d[0], setPages = _d[1];
+    var total = _a.total, pageSize = _a.pageSize, onChange = _a.onChange, _b = _a.defaultCurrent, defaultCurrent = _b === void 0 ? 1 : _b, currentProp = _a.current, _c = _a.mobile, mobile = _c === void 0 ? false : _c;
+    var _d = useState(currentProp !== undefined ? currentProp : defaultCurrent), current = _d[0], setCurrent = _d[1];
+    var _e = useState([]), pages = _e[0], setPages = _e[1];
     var maxButtons = 5;
     var totalPages = Math.ceil(total / pageSize);
+    useEffect(function () {
+        if (currentProp !== undefined && currentProp !== current) {
+            setCurrent(currentProp);
+        }
+    }, [currentProp, current]);
     useEffect(function () {
         var generatePages = function () {
             var pageArray = [];
@@ -49,14 +54,16 @@ var Pagination = function (_a) {
     var handleClick = function (page, index) {
         if (page === $_MORE) {
             if (index > 0 && pages[index - 1] !== null && pages[index - 1] !== 1) {
-                setCurrent(pages[index - 1] + 1);
-                onChange === null || onChange === void 0 ? void 0 : onChange(pages[index - 1] + 1);
+                var newPage = pages[index - 1] + 1;
+                setCurrent(newPage);
+                onChange === null || onChange === void 0 ? void 0 : onChange(newPage);
             }
             else if (index < pages.length - 1 &&
                 pages[index + 1] !== null &&
                 pages[index + 1] !== totalPages) {
-                setCurrent(pages[index + 1] - 1);
-                onChange === null || onChange === void 0 ? void 0 : onChange(pages[index + 1] - 1);
+                var newPage = pages[index + 1] - 1;
+                setCurrent(newPage);
+                onChange === null || onChange === void 0 ? void 0 : onChange(newPage);
             }
         }
         else if (page !== current) {
@@ -66,16 +73,22 @@ var Pagination = function (_a) {
     };
     var handlePrev = function () {
         if (current > 1) {
-            setCurrent(current - 1);
-            onChange === null || onChange === void 0 ? void 0 : onChange(current - 1);
+            var newPage = current - 1;
+            setCurrent(newPage);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newPage);
         }
     };
     var handleNext = function () {
         if (current < totalPages) {
-            setCurrent(current + 1);
-            onChange === null || onChange === void 0 ? void 0 : onChange(current + 1);
+            var newPage = current + 1;
+            setCurrent(newPage);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newPage);
         }
     };
+    // 新增：移动端只显示“展开更多”按钮
+    if (mobile) {
+        return total > pageSize ? (jsxs("div", __assign({ className: "foxit-pagination-mobile-container" }, { children: [jsx(Button, __assign({ className: "foxit-pagination-mobile-prev", onClick: handlePrev, size: "small", disabled: current === 1 }, { children: '<' })), jsxs("span", __assign({ className: "foxit-pagination-mobile-info" }, { children: [current, " / ", totalPages] })), jsx(Button, __assign({ className: "foxit-pagination-mobile-next", onClick: handleNext, size: "small", disabled: current === totalPages }, { children: '>' }))] }))) : null;
+    }
     return total > pageSize ? (jsxs("div", __assign({ className: "foxit-pagination-container" }, { children: [jsx("button", __assign({ className: "foxit-pagination-prev", onClick: handlePrev, disabled: current === 1 }, { children: '<' })), pages.map(function (page, index) { return (jsx("button", __assign({ className: "foxit-pagination-button", onClick: function () { return handleClick(page, index); }, disabled: page === current }, { children: page === $_MORE ? '...' : page }), index)); }), jsx("button", __assign({ className: "foxit-pagination-next", onClick: handleNext, disabled: current === totalPages }, { children: '>' }))] }))) : null;
 };
 

package/es/Quantity/Quantity.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './quantity.css';
+interface QuantityProps {
+    value?: number;
+    onChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+}
+declare const Quantity: React.FC<QuantityProps>;
+export { Quantity };

package/es/Quantity/Quantity.js

@@ -0,0 +1,45 @@
+import { __assign } from '../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+
+var Quantity = function (_a) {
+    var value = _a.value, onChange = _a.onChange, min = _a.min, max = _a.max;
+    var _b = useState(value || min || 0), internalValue = _b[0], setInternalValue = _b[1];
+    var currentValue = value !== undefined ? value : internalValue;
+    var handleIncrement = function () {
+        var newValue = currentValue + 1;
+        if (max !== undefined && newValue > max)
+            return;
+        if (onChange) {
+            onChange(newValue);
+        }
+        setInternalValue(newValue);
+    };
+    var handleDecrement = function () {
+        var newValue = currentValue - 1;
+        if (min !== undefined && newValue < min)
+            return;
+        if (onChange) {
+            onChange(newValue);
+        }
+        setInternalValue(newValue);
+    };
+    var handleChange = function (e) {
+        var newValue = parseInt(e.target.value, 10) || 0;
+        if (min !== undefined && newValue < min) {
+            newValue = min;
+        }
+        if (max !== undefined && newValue > max) {
+            newValue = max;
+        }
+        if (onChange) {
+            onChange(newValue);
+        }
+        setInternalValue(newValue);
+    };
+    return (jsxs("div", __assign({ className: "foxit-quantity" }, { children: [jsx("button", __assign({ className: "foxit-quantity-button", onClick: handleDecrement, disabled: min !== undefined && currentValue <= min }, { children: jsx("div", { children: "-" }) })), jsx("input", { 
+                // type="number"
+                value: currentValue, onChange: handleChange, min: min, max: max, className: "foxit-quantity-number" }), jsx("button", __assign({ className: "foxit-quantity-button", onClick: handleIncrement, disabled: max !== undefined && currentValue >= max }, { children: jsx("div", { children: "+" }) }))] })));
+};
+
+export { Quantity };

package/es/Radio/Radio.js

@@ -1,7 +1,6 @@
 import { __assign } from '../node_modules/tslib/tslib.es6.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { createContext, useContext, useState } from 'react';
-import './radio.css.js';
 
 var RadioContext = createContext({});
 var Radio = function (_a) {

package/es/Select/Select.d.ts

@@ -12,6 +12,16 @@ export interface SelectProps {
     isMulti?: boolean;
     placeholder?: string;
     preIcon?: React.ReactNode;
+    value?: string | number | CustomOption | null;
+    onChange?: (v: unknown) => void;
+    [key: string]: unknown;
+}
+interface CustomOption {
+    readonly value: string | number;
+    readonly label: string;
+    readonly color?: string;
+    readonly isFixed?: boolean;
+    readonly isDisabled?: boolean;
 }
 declare const Select: React.FC<SelectProps>;
 export default Select;

package/es/Select/Select.js

@@ -5,15 +5,18 @@ import classNames from 'classnames';
 import { Icon } from '../Icon/index.js';
 
 var Select = function (_a) {
-    var options = _a.options, className = _a.className, defaultValue = _a.defaultValue, isDisabled = _a.isDisabled, isClearable = _a.isClearable, isSearchable = _a.isSearchable, isMulti = _a.isMulti, _b = _a.placeholder, placeholder = _b === void 0 ? 'Select...' : _b, preIcon = _a.preIcon, rest = __rest(_a, ["options", "className", "defaultValue", "isDisabled", "isClearable", "isSearchable", "isMulti", "placeholder", "preIcon"]);
+    var options = _a.options, className = _a.className, defaultValue = _a.defaultValue, isDisabled = _a.isDisabled, isClearable = _a.isClearable, isSearchable = _a.isSearchable, isMulti = _a.isMulti, _b = _a.placeholder, placeholder = _b === void 0 ? 'Select...' : _b, preIcon = _a.preIcon, value = _a.value, onChange = _a.onChange, rest = __rest(_a, ["options", "className", "defaultValue", "isDisabled", "isClearable", "isSearchable", "isMulti", "placeholder", "preIcon", "value", "onChange"]);
     var customStyles = {
-        control: function (styles) { return (__assign(__assign({}, styles), { backgroundColor: 'white', 
-            // minWidth: 200,
-            height: 48, borderRadius: 10, fontSize: 14, boxShadow: 'none', border: '1px solid #B3B3B3', ':hover': {
-                border: '1px solid #757575'
-            }, ':focus-within': {
-                border: '1px solid #FF5F00'
-            } })); },
+        control: function (styles, _a) {
+            var isDisabled = _a.isDisabled;
+            return (__assign(__assign({}, styles), { backgroundColor: isDisabled ? '#f8f8f8' : 'white', 
+                // minWidth: 200,
+                height: 48, paddingLeft: 8, borderRadius: 10, fontSize: 14, boxShadow: 'none', border: '1px solid #D9D9D9', ':hover': {
+                    border: '1px solid #757575'
+                }, ':focus-within': {
+                    border: '1px solid #FF5F00'
+                } }));
+        },
         option: function (styles, _a) {
             var isSelected = _a.isSelected, isFocused = _a.isFocused;
             return __assign(__assign({}, styles), { backgroundColor: isFocused ? '#FFF6F0' : 'white', color: isSelected ? '#FF5F00' : '#666', ':hover': {
@@ -26,17 +29,20 @@ var Select = function (_a) {
     };
     var CustomControl = function (props) { return (jsxs(components.Control, __assign({}, props, { children: [preIcon && (jsx("div", __assign({ style: {
                     display: 'flex',
-                    paddingLeft: 16,
+                    paddingLeft: 8,
                     marginRight: -4,
                     color: props.hasValue ? '#525252' : '#B3B3B3'
                 } }, { children: preIcon }))), props.children] }))); };
     var CustomOptionComp = function (props) { return (jsxs(components.Option, __assign({}, props, { children: [props.children, props.isSelected && jsx(Icon, { name: "CheckCircleOutlined" })] }))); };
+    var isMobile = typeof window !== 'undefined' && /Android|iPhone|iPad|iPod|Mobile/i.test(navigator.userAgent);
     return (jsx(ReactSelect, __assign({ options: options, className: classNames('foxit-select-wrapper', className), placeholder: placeholder, styles: customStyles, defaultValue: isMulti
             ? options.filter(function (option) {
                 return Array.isArray(defaultValue) &&
                     defaultValue.includes(option.value);
             })
-            : options.find(function (option) { return option.value === defaultValue; }), isDisabled: isDisabled, isClearable: isClearable, isSearchable: isSearchable, isMulti: isMulti, components: { Control: CustomControl, Option: CustomOptionComp } }, rest)));
+            : options.find(function (option) { return option.value === defaultValue; }), isDisabled: isDisabled, isClearable: isClearable, isSearchable: isMobile ? false : isSearchable, isMulti: isMulti, components: { Control: CustomControl, Option: CustomOptionComp }, onChange: onChange, menuPosition: "fixed" }, rest, { value: isMulti && Array.isArray(value)
+            ? value.map(function (v) { return options.find(function (option) { return option.value === v; }); })
+            : options.find(function (option) { return option.value === value; }) || value })));
 };
 
 export { Select as default };

package/es/Spin/Spin.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './spin.css';
+interface FoxitSpinProps {
+    spinning: boolean;
+    size?: 'small' | 'default' | 'large';
+    children?: React.ReactNode;
+    className?: string;
+}
+declare const Spin: React.FC<FoxitSpinProps>;
+export { Spin };

package/es/Spin/Spin.js

@@ -0,0 +1,23 @@
+import { __assign } from '../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import { Icon } from '../Icon/index.js';
+
+var Spin = function (_a) {
+    var _b = _a.spinning, spinning = _b === void 0 ? true : _b, _c = _a.size, size = _c === void 0 ? 'default' : _c, children = _a.children, className = _a.className;
+    // return spinning ? (
+    //   <div className={classNames('foxit-spin', `foxit-spin-${size}`)}>
+    //     <div className="foxit-spin-icon">
+    //       <Icon name="LoadingOutlined" className={classNames('foxit-spin-spinning', className)} />
+    //     </div>
+    //     {children && <div className="foxit-spin-container">{children}</div>}
+    //   </div>
+    // ) : children ? (
+    //   <>{children}</>
+    // ) : (
+    //   <></>
+    // );
+    return (jsxs("div", __assign({ className: classNames(spinning && 'foxit-spin', spinning && "foxit-spin-".concat(size)) }, { children: [spinning && (jsx("div", __assign({ className: "foxit-spin-icon" }, { children: jsx(Icon, { name: "LoadingOutlined", className: classNames('foxit-spin-spinning', className) }) }))), children && jsx("div", __assign({ className: classNames(spinning && 'foxit-spin-container') }, { children: children })), !children && !spinning && jsx(Fragment, {})] })));
+};
+
+export { Spin };

package/es/Switch/Switch.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './switch.css';
+interface FoxitSwitchProps {
+    value?: boolean;
+    onChange?: (value: boolean) => void;
+    size?: 'small' | 'large';
+}
+declare const Switch: React.FC<FoxitSwitchProps>;
+export { Switch };

package/es/Switch/Switch.js

@@ -0,0 +1,20 @@
+import { __assign } from '../node_modules/tslib/tslib.es6.js';
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+
+var Switch = function (_a) {
+    var value = _a.value, onChange = _a.onChange, _b = _a.size, size = _b === void 0 ? 'large' : _b;
+    var _c = useState(value || false), internalValue = _c[0], setInternalValue = _c[1];
+    var isControlled = value !== undefined;
+    var handleToggle = function () {
+        if (onChange) {
+            onChange(!isControlled ? !internalValue : !value);
+        }
+        if (!isControlled) {
+            setInternalValue(!internalValue);
+        }
+    };
+    return (jsx("div", __assign({ className: "foxit-switch ".concat(size, " ").concat(isControlled ? (value ? 'checked' : '') : internalValue ? 'checked' : ''), onClick: handleToggle }, { children: jsx("div", { className: "foxit-switch-handle" }) })));
+};
+
+export { Switch };

package/es/Table/Table.d.ts

@@ -10,6 +10,9 @@ export interface Column<T> {
 interface TableProps<T> {
     columns: Column<T>[];
     data: T[];
+    loading?: boolean;
+    emptyText?: React.ReactNode;
+    mobile?: boolean;
 }
-declare const Table: <T>({ columns, data }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const Table: <T>({ columns, data, loading, emptyText, mobile }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default Table;

package/es/Table/Table.js

@@ -1,15 +1,29 @@
 import { __assign } from '../node_modules/tslib/tslib.es6.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import './table.css.js';
+import Empty from '../Empty/Empty.js';
+import { Icon } from '../Icon/index.js';
 
 var Table = function (_a) {
-    var columns = _a.columns, data = _a.data;
-    return (jsx("div", __assign({ className: "foxit-table" }, { children: jsxs("table", __assign({ className: "foxit-table-container" }, { children: [jsx("thead", { children: jsx("tr", { children: columns.map(function (column, index) { return (jsx("th", __assign({ style: {
-                                width: column.width ? "".concat(column.width, "px") : 'auto',
-                                textAlign: column.align || 'left'
-                            } }, { children: column.title }), index)); }) }) }), jsx("tbody", { children: data.map(function (record, rowIndex) { return (jsx("tr", __assign({ className: rowIndex % 2 === 0 ? 'foxit-even-row' : 'foxit-odd-row' }, { children: columns.map(function (column, colIndex) { return (jsx("td", __assign({ style: { textAlign: column.align || 'left' } }, { children: column.render
-                                ? column.render(record[column.dataIndex], record)
-                                : record[column.dataIndex] }), colIndex)); }) }), rowIndex)); }) })] })) })));
+    var columns = _a.columns, data = _a.data, loading = _a.loading, emptyText = _a.emptyText, _b = _a.mobile, mobile = _b === void 0 ? false : _b;
+    if (!loading && data.length === 0) {
+        return jsx(Empty, { description: emptyText || 'No Data' });
+    }
+    if (mobile) {
+        return (jsxs("div", __assign({ className: "foxit-table-mobile-list" }, { children: [loading && (jsx("div", __assign({ className: "foxit-table-mobile-loading" }, { children: jsx(Icon, { name: "LoadingOutlined", className: "foxit-table-icon-loading" }) }))), data.map(function (record, rowIndex) { return (jsx("div", __assign({ className: "foxit-table-mobile-card" }, { children: columns.map(function (column, colIndex) { return (jsxs("div", __assign({ className: "foxit-table-mobile-row" }, { children: [jsx("span", __assign({ className: "foxit-table-mobile-label" }, { children: column.title })), jsx("span", __assign({ className: "foxit-table-mobile-value" }, { children: column.render
+                                    ? column.render(record[column.dataIndex], record)
+                                    : typeof record[column.dataIndex] === 'object'
+                                        ? JSON.stringify(record[column.dataIndex])
+                                        : String(record[column.dataIndex]) }))] }), colIndex)); }) }), rowIndex)); })] })));
+    }
+    return (jsxs("div", __assign({ className: "foxit-table" }, { children: [loading ? (jsx("div", __assign({ className: "foxit-table-loading" }, { children: jsx(Icon, { name: "LoadingOutlined", className: "foxit-table-icon-loading" }) }))) : null, jsxs("table", __assign({ className: "foxit-table-container" }, { children: [jsx("thead", { children: jsx("tr", { children: columns.map(function (column, index) { return (jsx("th", __assign({ style: {
+                                    width: column.width ? "".concat(column.width, "px") : 'auto',
+                                    textAlign: column.align || 'left'
+                                } }, { children: column.title }), index)); }) }) }), jsx("tbody", { children: data.map(function (record, rowIndex) { return (jsx("tr", __assign({ className: rowIndex % 2 === 0 ? 'foxit-even-row' : 'foxit-odd-row' }, { children: columns.map(function (column, colIndex) { return (jsx("td", __assign({ style: { textAlign: column.align || 'left' } }, { children: column.render
+                                    ? column.render(record[column.dataIndex], record)
+                                    : typeof record[column.dataIndex] === 'object'
+                                        ? JSON.stringify(record[column.dataIndex]) // 将对象转换为字符串
+                                        : String(record[column.dataIndex]) // 确保它是一个字符串
+                             }), colIndex)); }) }), rowIndex)); }) })] }))] })));
 };
 
 export { Table as default };

package/es/Tabs/Tabs.d.ts

@@ -9,6 +9,8 @@ interface ButtonTabsProps {
     activeKey?: string;
     items: TabItem[];
     onChange?: (key: string) => void;
+    type?: 'button' | 'link';
+    className?: string;
 }
 declare const ButtonTabs: React.FC<ButtonTabsProps>;
 export default ButtonTabs;

package/es/Tabs/Tabs.js

@@ -1,12 +1,14 @@
 import { __assign } from '../node_modules/tslib/tslib.es6.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
-import './tabs.css.js';
+import { useState, useRef, useEffect } from 'react';
+import classNames from 'classnames';
 
 var ButtonTabs = function (_a) {
     var _b;
-    var activeKey = _a.activeKey, items = _a.items, onChange = _a.onChange;
-    var _c = useState(activeKey || ((_b = items[0]) === null || _b === void 0 ? void 0 : _b.key)), internalActiveKey = _c[0], setInternalActiveKey = _c[1];
+    var activeKey = _a.activeKey, items = _a.items, onChange = _a.onChange, _c = _a.type, type = _c === void 0 ? 'button' : _c, className = _a.className;
+    var _d = useState(activeKey || ((_b = items[0]) === null || _b === void 0 ? void 0 : _b.key)), internalActiveKey = _d[0], setInternalActiveKey = _d[1];
+    var _e = useState(false), showScrollButtons = _e[0], setShowScrollButtons = _e[1];
+    var tabListRef = useRef(null);
     var handleTabChange = function (key) {
         if (onChange) {
             onChange(key);
@@ -15,8 +17,27 @@ var ButtonTabs = function (_a) {
             setInternalActiveKey(key);
         }
     };
+    // Link Tabs
+    var handleScroll = function (direction) {
+        if (tabListRef.current) {
+            var scrollAmount = direction === 'left' ? -tabListRef.current.clientWidth : tabListRef.current.clientWidth;
+            tabListRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });
+        }
+    };
+    var updateScrollButtonsVisibility = function () {
+        if (tabListRef.current) {
+            setShowScrollButtons(tabListRef.current.scrollWidth > tabListRef.current.clientWidth);
+        }
+    };
+    useEffect(function () {
+        updateScrollButtonsVisibility();
+        window.addEventListener('resize', updateScrollButtonsVisibility);
+        return function () {
+            window.removeEventListener('resize', updateScrollButtonsVisibility);
+        };
+    }, [items]);
     var currentKey = activeKey || internalActiveKey;
-    return (jsxs("div", { children: [jsx("div", __assign({ className: "foxit-tabs" }, { children: items.map(function (item) { return (jsx("button", __assign({ className: "foxit-tab-item ".concat(currentKey === item.key ? 'active' : ''), onClick: function () { return handleTabChange(item.key); } }, { children: item.label }), item.key)); }) })), jsx("div", __assign({ className: "foxit-tab-content" }, { children: items.map(function (item) { return item.key === currentKey && jsx("div", { children: item.children }, item.key); }) }))] }));
+    return (jsxs("div", { children: [type === 'button' ? (jsx("div", __assign({ className: "foxit-tabs" }, { children: items.map(function (item) { return (jsx("button", __assign({ className: "foxit-tab-item ".concat(currentKey === item.key ? 'active' : ''), onClick: function () { return handleTabChange(item.key); } }, { children: item.label }), item.key)); }) }))) : (jsx("div", __assign({ className: "foxit-linktabs" }, { children: jsxs("div", __assign({ className: "foxit-linktabs-inner" }, { children: [showScrollButtons && (jsx("button", __assign({ className: "foxit-linktabs-scroll foxit-linktabs-scroll-left", onClick: function () { return handleScroll('left'); } }, { children: "<" }))), jsx("div", __assign({ ref: tabListRef, className: classNames('foxit-linktabs-list', className) }, { children: items.map(function (item) { return (jsx("button", __assign({ className: "foxit-linktab-btn".concat(currentKey === item.key ? ' active' : ''), onClick: function () { return handleTabChange(item.key); } }, { children: item.label }), item.key)); }) })), showScrollButtons && (jsx("button", __assign({ className: "foxit-linktabs-scroll foxit-linktabs-scroll-right", onClick: function () { return handleScroll('right'); } }, { children: ">" })))] })) }))), jsx("div", __assign({ className: "foxit-tab-content" }, { children: items.map(function (item) { return item.key === currentKey && jsx("div", { children: item.children }, item.key); }) }))] }));
 };
 
 export { ButtonTabs as default };

package/es/Tag/Tag.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import './tag.css';
 interface TagProps {
-    color: 'active' | 'canceled' | 'pending' | 'offline' | 'trial' | 'expired';
+    color?: 'active' | 'canceled' | 'pending' | 'offline' | 'trial' | 'expired' | 'completed' | string;
     children: React.ReactNode;
 }
 declare const Tag: React.FC<TagProps>;

package/es/Tag/Tag.js

@@ -1,9 +1,8 @@
 import { __assign } from '../node_modules/tslib/tslib.es6.js';
 import { jsx } from 'react/jsx-runtime';
-import './tag.css.js';
 
 var Tag = function (_a) {
-    var color = _a.color, children = _a.children;
+    var _b = _a.color, color = _b === void 0 ? 'active' : _b, children = _a.children;
     var className = "foxit-tag foxit-tag-".concat(color);
     return jsx("span", __assign({ className: className }, { children: children }));
 };

package/es/Toast/Toast.js

@@ -3,7 +3,6 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import classNames from 'classnames';
-import './toast.css.js';
 import { Icon } from '../Icon/index.js';
 
 var Toast = function (_a) {

package/es/Toast/ToastContainer.js

@@ -2,7 +2,6 @@ import { __assign } from '../node_modules/tslib/tslib.es6.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { createRoot } from 'react-dom/client';
-import './toast.css.js';
 import Toast from './Toast.js';
 
 var createToastContainer = function (toastManager, duration, unique) {

package/es/Tooltip/Tooltip.d.ts

@@ -3,6 +3,8 @@ import './tooltip.css';
 interface TooltipProps {
     title: string | ReactNode;
     children: ReactNode;
+    whiteGround?: boolean;
+    className?: string;
 }
 declare const Tooltip: React.FC<TooltipProps>;
 export default Tooltip;