foxit-component 0.0.1 → 1.0.0-alpha.29

package/es/Modal/Modal.js

@@ -0,0 +1,110 @@
+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';
+
+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, 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 })), 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, 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, closable = _a.closable;
+    var modalRoot = document.createElement('div');
+    document.body.appendChild(modalRoot);
+    var root = createRoot(modalRoot);
+    var handleClose = function () {
+        root.unmount();
+        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: 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.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import './modal.css';
+interface IModalProps {
+    opened: boolean;
+    onClose: () => void;
+    maskClosable?: boolean;
+    position?: 'center' | 'top' | 'bottom';
+    text?: string | React.ReactNode;
+}
+export declare const Modal: React.FC<React.PropsWithChildren<IModalProps>>;
+export {};

package/es/Modal/ModalTemp.js

@@ -0,0 +1,75 @@
+import { __assign } from '../node_modules/tslib/tslib.es6.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect, useRef } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import { createPortal } from 'react-dom';
+import classNames from 'classnames';
+
+var contentAnimation = {
+    enter: 'foxit-modal-opacity-0 foxit-modal-scale-0',
+    enterActive: 'foxit-modal-transition foxit-modal-scale-100 foxit-modal-opacity-100',
+    exit: 'foxit-modal-opacity-100 foxit-modal-scale-100',
+    exitActive: 'foxit-modal-transition !foxit-modal-opacity-0 !foxit-modal-scale-0'
+};
+var overlayAnimation = {
+    enter: 'foxit-modal-opacity-0',
+    enterActive: 'foxit-modal-transition foxit-modal-opacity-100',
+    exit: 'foxit-modal-opacity-100',
+    exitActive: 'foxit-modal-transition !foxit-modal-opacity-0'
+};
+var Portal = function (_a) {
+    var children = _a.children;
+    var container = useState(function () { return document.createElement('div'); })[0];
+    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);
+};
+var ModalLayout = function (_a) {
+    var _b = _a.onClose, onClose = _b === void 0 ? function () { } : _b, children = _a.children, opened = _a.opened, _c = _a.maskClosable, maskClosable = _c === void 0 ? true : _c, _d = _a.position, position = _d === void 0 ? 'center' : _d;
+    var overlayRef = useRef(null);
+    var contentRef = useRef(null);
+    var _e = useState(false), animationIn = _e[0], setAnimationIn = _e[1];
+    useEffect(function () {
+        setAnimationIn(opened);
+    }, [opened]);
+    var justifyClass = 'foxit-modal-justify-center';
+    if (position === 'top') {
+        justifyClass = 'foxit-modal-justify-top';
+    }
+    else if (position === 'bottom') {
+        justifyClass = 'foxit-modal-justify-bottom';
+    }
+    return (jsxs("div", __assign({ className: classNames('foxit-modal-fixed-layout', justifyClass) }, { children: [jsx(CSSTransition, __assign({ in: animationIn, nodeRef: overlayRef, timeout: 150, mountOnEnter: true, unmountOnExit: true, classNames: overlayAnimation }, { children: jsx("div", __assign({ ref: overlayRef, className: "foxit-modal-overlay", onClick: maskClosable ? onClose : undefined }, { children: jsx("div", { className: "foxit-modal-overlay-bg" }) })) })), jsx(CSSTransition, __assign({ in: animationIn, nodeRef: contentRef, timeout: 150, mountOnEnter: true, unmountOnExit: true, classNames: contentAnimation }, { children: jsx("div", __assign({ ref: contentRef, className: "foxit-modal-content" }, { children: children })) }))] })));
+};
+var Modal = function (_a) {
+    var opened = _a.opened, onClose = _a.onClose, maskClosable = _a.maskClosable, children = _a.children, position = _a.position;
+    var _b = useState(false), mounted = _b[0], setMounted = _b[1];
+    useEffect(function () {
+        if (opened && !mounted) {
+            setMounted(true);
+        }
+        else if (!opened && mounted) {
+            setTimeout(function () {
+                setMounted(false);
+            }, 150);
+        }
+    }, [opened, mounted]);
+    useEffect(function () {
+        document.body.style.overflowY = opened ? 'hidden' : '';
+        return function () {
+            document.body.style.overflow = '';
+        };
+    }, [opened]);
+    if (!mounted) {
+        return null;
+    }
+    return (jsx(Portal, { children: jsx(ModalLayout, __assign({ onClose: onClose, opened: opened, maskClosable: maskClosable, position: position }, { children: children })) }));
+};
+
+export { Modal };

package/es/Pagination/Pagination.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import './pagination.css';
+interface PaginationProps {
+    total: number;
+    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

@@ -0,0 +1,95 @@
+import { __assign } from '../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+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, 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 = [];
+            if (totalPages <= maxButtons) {
+                for (var i = 1; i <= totalPages; i++) {
+                    pageArray.push(i);
+                }
+            }
+            else {
+                pageArray.push(1);
+                var ellipsis = $_MORE;
+                if (current <= 3) {
+                    for (var i = 2; i <= Math.min(maxButtons - 2, totalPages - 1); i++) {
+                        pageArray.push(i);
+                    }
+                    pageArray.push(ellipsis);
+                }
+                else if (current >= totalPages - 2) {
+                    pageArray.push(ellipsis);
+                    for (var i = totalPages - maxButtons + 3; i <= totalPages - 1; i++) {
+                        pageArray.push(i);
+                    }
+                }
+                else {
+                    pageArray.push(ellipsis);
+                    pageArray.push(current - 1);
+                    pageArray.push(current);
+                    pageArray.push(current + 1);
+                    pageArray.push(ellipsis);
+                }
+                pageArray.push(totalPages);
+            }
+            setPages(pageArray);
+        };
+        generatePages();
+    }, [total, pageSize, current, totalPages]);
+    var handleClick = function (page, index) {
+        if (page === $_MORE) {
+            if (index > 0 && pages[index - 1] !== null && 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) {
+                var newPage = pages[index + 1] - 1;
+                setCurrent(newPage);
+                onChange === null || onChange === void 0 ? void 0 : onChange(newPage);
+            }
+        }
+        else if (page !== current) {
+            setCurrent(page);
+            onChange === null || onChange === void 0 ? void 0 : onChange(page);
+        }
+    };
+    var handlePrev = function () {
+        if (current > 1) {
+            var newPage = current - 1;
+            setCurrent(newPage);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newPage);
+        }
+    };
+    var handleNext = function () {
+        if (current < totalPages) {
+            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;
+};
+
+export { Pagination as default };

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.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode, FC } from 'react';
+import './radio.css';
+interface RadioProps {
+    value: string;
+    checked?: boolean;
+    disabled?: boolean;
+    children: ReactNode;
+    onChange?: (value: string) => void;
+}
+interface RadioGroupProps {
+    onChange?: (value: string) => void;
+    value?: string;
+    children: ReactNode;
+}
+declare const Radio: FC<RadioProps> & {
+    Group: FC<RadioGroupProps>;
+};
+export default Radio;

package/es/Radio/Radio.js

@@ -0,0 +1,44 @@
+import { __assign } from '../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useState } from 'react';
+
+var RadioContext = createContext({});
+var Radio = function (_a) {
+    var value = _a.value, checked = _a.checked, _b = _a.disabled, disabled = _b === void 0 ? false : _b, children = _a.children, onChange = _a.onChange;
+    var context = useContext(RadioContext);
+    var _c = useState(checked || false), internalChecked = _c[0], setInternalChecked = _c[1];
+    var isChecked = context.selectedValue !== undefined
+        ? context.selectedValue === value
+        : checked !== undefined
+            ? checked
+            : internalChecked;
+    var handleChange = function () {
+        if (!disabled) {
+            if (context.onChange) {
+                context.onChange(value);
+            }
+            else if (onChange) {
+                setInternalChecked(true);
+                onChange(value);
+            }
+            else {
+                setInternalChecked(true);
+            }
+        }
+    };
+    return (jsxs("label", __assign({ className: "foxit-radio-container ".concat(disabled ? 'disabled' : '') }, { children: [jsx("input", { type: "radio", value: value, checked: isChecked, disabled: disabled, onChange: handleChange }), jsx("span", { className: "foxit-radio-checkmark" }), jsx("span", __assign({ className: "foxit-radio-content" }, { children: children }))] })));
+};
+var RadioGroup = function (_a) {
+    var onChange = _a.onChange, value = _a.value, children = _a.children;
+    var _b = useState(value), selectedValue = _b[0], setSelectedValue = _b[1];
+    var handleChange = function (val) {
+        setSelectedValue(val);
+        if (onChange) {
+            onChange(val);
+        }
+    };
+    return (jsx(RadioContext.Provider, __assign({ value: { onChange: handleChange, selectedValue: value !== undefined ? value : selectedValue } }, { children: children })));
+};
+Radio.Group = RadioGroup;
+
+export { Radio as default };

package/es/Select/Select.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+export interface SelectProps {
+    options: {
+        value: string | number;
+        label: string;
+    }[];
+    className?: string;
+    defaultValue?: string | number | string[] | number[];
+    isDisabled?: boolean;
+    isClearable?: boolean;
+    isSearchable?: boolean;
+    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

@@ -0,0 +1,47 @@
+import { __rest, __assign } from '../node_modules/tslib/tslib.es6.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import ReactSelect, { components } from 'react-select';
+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, 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, _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': {
+                    backgroundColor: '#FFF6F0'
+                }, fontSize: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center' });
+        },
+        indicatorSeparator: function (styles) { return (__assign(__assign({}, styles), { display: 'none' })); },
+        placeholder: function (styles) { return (__assign(__assign({}, styles), { color: '#B3B3B3' })); },
+        dropdownIndicator: function (styles) { return (__assign(__assign({}, styles), { paddingRight: 16 })); }
+    };
+    var CustomControl = function (props) { return (jsxs(components.Control, __assign({}, props, { children: [preIcon && (jsx("div", __assign({ style: {
+                    display: 'flex',
+                    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" })] }))); };
+    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 }, 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

@@ -0,0 +1,18 @@
+import React from 'react';
+import './table.css';
+export interface Column<T> {
+    title: string;
+    dataIndex: keyof T;
+    width?: number;
+    align?: 'left' | 'center' | 'right';
+    render?: (text: T[keyof T], record: T) => React.ReactNode;
+}
+interface TableProps<T> {
+    columns: Column<T>[];
+    data: T[];
+    loading?: boolean;
+    emptyText?: React.ReactNode;
+    mobile?: boolean;
+}
+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

@@ -0,0 +1,29 @@
+import { __assign } from '../node_modules/tslib/tslib.es6.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Empty from '../Empty/Empty.js';
+import { Icon } from '../Icon/index.js';
+
+var Table = function (_a) {
+    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

@@ -0,0 +1,14 @@
+import React from 'react';
+import './tabs.css';
+interface TabItem {
+    key: string;
+    label: string;
+    children: React.ReactNode;
+}
+interface ButtonTabsProps {
+    activeKey?: string;
+    items: TabItem[];
+    onChange?: (key: string) => void;
+}
+declare const ButtonTabs: React.FC<ButtonTabsProps>;
+export default ButtonTabs;