foxit-component 0.0.1-alpha.1 → 0.0.1-alpha.11

package/es/Menu/Menu.js

@@ -0,0 +1,49 @@
+import { __assign, __spreadArray } from '../node_modules/tslib/tslib.es6.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Icon } from '../Icon/index.js';
+
+var getItem = function (label, key, icon, children, type) {
+    return {
+        key: key,
+        icon: icon,
+        children: children,
+        label: label,
+        type: type
+    };
+};
+var Menu = function (_a) {
+    var items = _a.items, onClick = _a.onClick, _b = _a.defaultSelectedKeys, defaultSelectedKeys = _b === void 0 ? [] : _b, _c = _a.defaultOpenKeys, defaultOpenKeys = _c === void 0 ? [] : _c, style = _a.style;
+    var _d = useState(defaultOpenKeys), openKeys = _d[0], setOpenKeys = _d[1];
+    var _e = useState(defaultSelectedKeys), selectedKeys = _e[0], setSelectedKeys = _e[1];
+    var handleMenuClick = function (e) {
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+        setSelectedKeys([e.key]);
+    };
+    // const handleOpenChange = (keys: string[]) => {
+    //   setOpenKeys(keys);
+    // };
+    var isFirstLevel = function (item) {
+        return items.some(function (i) { return i.key === item.key; });
+    };
+    var renderMenuItem = function (item) {
+        var isSelected = selectedKeys.includes(item.key.toString());
+        return (jsx("div", __assign({ className: "foxit-menu-item ".concat(isSelected ? 'selected' : '') }, { children: jsxs("div", __assign({ className: "foxit-menu-item-content", onClick: function () { return handleMenuClick({ key: item.key.toString() }); } }, { children: [item.icon && jsx("span", __assign({ style: { marginRight: '8px' } }, { children: item.icon })), jsx("span", __assign({ className: isFirstLevel(item) ? 'foxit-menu-item-label' : '' }, { children: item.label }))] })) }), item.key));
+    };
+    var renderSubMenu = function (item) {
+        var isOpen = openKeys.includes(item.key.toString());
+        return (jsxs("div", { children: [jsxs("div", __assign({ className: "foxit-menu-submenu-title", onClick: function () {
+                        if (isOpen) {
+                            setOpenKeys(openKeys.filter(function (key) { return key !== item.key.toString(); }));
+                        }
+                        else {
+                            setOpenKeys(__spreadArray(__spreadArray([], openKeys, true), [item.key.toString()], false));
+                        }
+                    } }, { children: [jsxs("div", __assign({ style: { display: 'flex', alignItems: 'center' } }, { children: [item.icon && jsx("span", __assign({ style: { marginRight: '8px' } }, { children: item.icon })), jsx("span", __assign({ className: isFirstLevel(item) ? 'foxit-menu-item-label' : '' }, { children: item.label }))] })), jsx("span", { children: jsx(Icon, { name: "DownOutlined", className: "foxit-menu-icon ".concat(isOpen ? '' : 'foxit-menu-rotated-icon') }) })] })), isOpen && item.children && (jsx("div", __assign({ className: "foxit-menu-submenu-items" }, { children: item.children.map(function (child) {
+                        return child.children ? renderSubMenu(child) : renderMenuItem(child);
+                    }) })))] }, item.key));
+    };
+    return (jsx("div", __assign({ className: "foxit-menu", style: __assign({}, style) }, { children: items.map(function (item) { return (item.children ? renderSubMenu(item) : renderMenuItem(item)); }) })));
+};
+
+export { Menu, getItem };

package/es/Modal/Modal.d.ts

@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+import './modal.css';
+interface IModalProps {
+    title: string | React.ReactNode;
+    opened?: boolean;
+    onOk?: () => void;
+    onOkText?: string | React.ReactNode;
+    onCancel?: () => void;
+    onCancelText?: string | React.ReactNode;
+    maskClosable?: boolean;
+    children?: React.ReactNode;
+    width?: string;
+}
+interface ModalComponent extends FC<IModalProps> {
+    confirm: (props: IModalProps & {
+        content: React.ReactNode;
+    }) => void;
+}
+export declare const Modal: ModalComponent;
+export {};

package/es/Modal/Modal.js

@@ -0,0 +1,123 @@
+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 { 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;
+    var _e = useState(false), loading = _e[0], setLoading = _e[1];
+    var _f = useState(false), cancelLoading = _f[0], setCancelLoading = _f[1];
+    var handleOk = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var result;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!onOk) return [3 /*break*/, 6];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, , 5, 6]);
+                    result = onOk();
+                    if (!(result instanceof Promise)) return [3 /*break*/, 3];
+                    setLoading(true);
+                    return [4 /*yield*/, result];
+                case 2:
+                    _a.sent();
+                    return [3 /*break*/, 4];
+                case 3:
+                    onOk();
+                    _a.label = 4;
+                case 4: return [3 /*break*/, 6];
+                case 5:
+                    setLoading(false);
+                    return [7 /*endfinally*/];
+                case 6: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleCancel = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var result;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!onCancel) return [3 /*break*/, 6];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, , 5, 6]);
+                    result = onCancel();
+                    if (!(result instanceof Promise)) return [3 /*break*/, 3];
+                    setCancelLoading(true);
+                    return [4 /*yield*/, result];
+                case 2:
+                    _a.sent();
+                    return [3 /*break*/, 4];
+                case 3:
+                    onCancel();
+                    _a.label = 4;
+                case 4: return [3 /*break*/, 6];
+                case 5:
+                    setCancelLoading(false);
+                    return [7 /*endfinally*/];
+                case 6: return [2 /*return*/];
+            }
+        });
+    }); };
+    return (jsxs("div", __assign({ className: "foxit-modal-content-container", style: {
+            maxWidth: width,
+            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: 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 })) })));
+};
+// 语法糖的调用方式
+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 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 }, { 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,11 @@
+import React from 'react';
+import './pagination.css';
+interface PaginationProps {
+    total: number;
+    pageSize: number;
+    onChange?: (page: number) => void;
+    defaultCurrent?: number;
+    current?: number;
+}
+declare const Pagination: React.FC<PaginationProps>;
+export default Pagination;

package/es/Pagination/Pagination.js

@@ -0,0 +1,90 @@
+import { __assign } from '../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+
+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;
+    var _c = useState(currentProp !== undefined ? currentProp : defaultCurrent), current = _c[0], setCurrent = _c[1];
+    var _d = useState([]), pages = _d[0], setPages = _d[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);
+        }
+    };
+    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/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,26 @@
+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;
+}
+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,56 @@
+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 }, rest, { 
+        // value={
+        //   isMulti
+        //     ? options.filter(
+        //         (option) =>
+        //           Array.isArray(value) && (value as (string | number)[]).includes(option.value)
+        //       )
+        //     : options.find((option) => option.value === value) || value as CustomOption || null
+        // }
+        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/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,17 @@
+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;
+}
+declare const Table: <T>({ columns, data, loading, emptyText }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default Table;

package/es/Table/Table.js

@@ -0,0 +1,19 @@
+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;
+    return !loading && data.length === 0 ? (jsx(Empty, { description: emptyText || 'No Data' })) : (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;

package/es/Tabs/Tabs.js

@@ -0,0 +1,21 @@
+import { __assign } from '../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+
+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 handleTabChange = function (key) {
+        if (onChange) {
+            onChange(key);
+        }
+        else {
+            setInternalActiveKey(key);
+        }
+    };
+    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); }) }))] }));
+};
+
+export { ButtonTabs as default };

package/es/Tag/Tag.d.ts

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