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

package/es/Menu/Menu.js

@@ -0,0 +1,50 @@
+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';
+import './menu.css.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 as default, getItem };

package/es/Menu/menu.css.js

@@ -0,0 +1,6 @@
+import styleInject from '../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".foxit-menu {\n  font-size: 14px;\n  /* font-family: sans-serif;\n  border: 0px solid #FFFFFF; */\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n  border-radius: 10px;\n  overflow: hidden;\n}\n\n.foxit-menu-item-content {\n  padding: 8px 16px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n\n.foxit-menu-item {\n  padding-left: 0px;\n}\n\n.foxit-menu-item.selected {\n  background-color: #fff6f0 !important;\n  color: #ff5f00;\n  font-weight: 600;\n}\n\n.foxit-menu-item:hover {\n  background-color: #f5f6f8;\n}\n\n.foxit-menu-submenu-title {\n  padding: 8px 16px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.foxit-menu-submenu-title:hover {\n  background-color: #f5f6f8;\n}\n\n.foxit-menu-icon {\n  transition: transform 0.3s ease-in-out; /* Adjust timing as needed */\n}\n\n.foxit-menu-rotated-icon {\n  transform: rotate(180deg);\n}\n\n.foxit-menu-item-label {\n  font-weight: 600;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };

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,39 @@
+import { __assign } from '../node_modules/tslib/tslib.es6.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+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';
+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,
+            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 })))] }))] })));
+};
+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();
+        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 })) })));
+};
+
+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,72 @@
+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';
+import './modal.css.js';
+
+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);
+    }, [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/Modal/modal.css.js

@@ -0,0 +1,6 @@
+import styleInject from '../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".foxit-modal-content-container {\n  display: flex;\n  flex-direction: column;\n  padding: 24px;\n  background-color: #fff;\n  border-radius: 10px;\n  justify-content: space-between;\n  min-width: 320px;\n  gap: 24px;\n}\n\n.foxit-modal-head {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.foxit-modal-title {\n  font-weight: 500;\n  font-size: 20px;\n}\n\n.foxit-modal-close-button {\n  display: flex;\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n}\n\n.foxit-modal-close-button svg {\n  stroke: #6b7280;\n}\n\n.foxit-modal-close-button:hover svg {\n  stroke: #ea580c;\n}\n\n.foxit-modal-footer {\n  display: flex;\n  gap: 16px;\n  justify-content: flex-end;\n}\n\n.foxit-modal-fixed-layout {\n  position: fixed;\n  inset: 0;\n  z-index: 50;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 36px;\n}\n\n.foxit-modal-justify-center {\n  justify-content: center;\n}\n\n.foxit-modal-justify-top {\n  justify-content: flex-start;\n  padding-top: 96px;\n}\n\n.foxit-modal-justify-bottom {\n  justify-content: flex-end;\n}\n\n.foxit-modal-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 50;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n}\n\n.foxit-modal-overlay-bg {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.15); /* Equivalent to bg-main-black opacity-15 */\n}\n\n.foxit-modal-content {\n  z-index: 50;\n  max-height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: auto;\n  font-size: 16px;\n  font-weight: 400;\n}\n\n.foxit-modal-opacity-0 {\n  opacity: 0;\n}\n\n.foxit-modal-opacity-100 {\n  opacity: 1;\n}\n\n.foxit-modal-scale-0 {\n  transform: scale(0);\n}\n\n.foxit-modal-scale-100 {\n  transform: scale(1);\n}\n\n.foxit-modal-transition {\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n.foxit-modal-hide-overflow {\n  overflow-y: hidden;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };

package/es/Pagination/Pagination.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './pagination.css';
+interface PaginationProps {
+    total: number;
+    pageSize: number;
+    onChange?: (page: number) => void;
+    defaultCurrent?: number;
+}
+declare const Pagination: React.FC<PaginationProps>;
+export default Pagination;

package/es/Pagination/Pagination.js

@@ -0,0 +1,82 @@
+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';
+
+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 maxButtons = 5;
+    var totalPages = Math.ceil(total / pageSize);
+    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) {
+                setCurrent(pages[index - 1] + 1);
+                onChange === null || onChange === void 0 ? void 0 : onChange(pages[index - 1] + 1);
+            }
+            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);
+            }
+        }
+        else if (page !== current) {
+            setCurrent(page);
+            onChange === null || onChange === void 0 ? void 0 : onChange(page);
+        }
+    };
+    var handlePrev = function () {
+        if (current > 1) {
+            setCurrent(current - 1);
+            onChange === null || onChange === void 0 ? void 0 : onChange(current - 1);
+        }
+    };
+    var handleNext = function () {
+        if (current < totalPages) {
+            setCurrent(current + 1);
+            onChange === null || onChange === void 0 ? void 0 : onChange(current + 1);
+        }
+    };
+    return (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: '>' }))] })));
+};
+
+export { Pagination as default };

package/es/Pagination/pagination.css.js

@@ -0,0 +1,6 @@
+import styleInject from '../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".foxit-pagination-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.foxit-pagination-button,\n.foxit-pagination-prev,\n.foxit-pagination-next {\n  font-size: 16px;\n  font-weight: 500;\n  height: 48px;\n  min-width: 48px;\n  padding: 0 12px;\n  border: none;\n  border-radius: 10px;\n  margin: 0 4px;\n  color: #757575;\n  background-color: transparent;\n  cursor: pointer;\n  transition:\n    background-color 0.3s ease,\n    color 0.3s ease;\n}\n\n.foxit-pagination-next:hover,\n.foxit-pagination-prev:hover {\n  color: #ff5f00;\n}\n\n.foxit-pagination-button:hover {\n  background-color: rgba(255, 95, 0, 0.1);\n}\n\n.foxit-pagination-button:disabled {\n  background-color: #ff5f00;\n  color: white;\n  cursor: default;\n}\n";
+styleInject(css_248z);
+
+export { css_248z 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,45 @@
+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) {
+    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/Radio/radio.css.js

@@ -0,0 +1,6 @@
+import styleInject from '../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".foxit-radio-container {\n  display: inline-block;\n  position: relative;\n  padding-left: 25px;\n  cursor: pointer;\n  -webkit-user-select: none;\n          user-select: none;\n}\n\n.foxit-radio-container input {\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.foxit-radio-checkmark {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 20px;\n  width: 20px;\n  background-color: #fff;\n  border: 1px solid #b3b3b3;\n  border-radius: 50%;\n}\n\n.foxit-radio-content {\n  line-height: 20px;\n}\n\n.foxit-radio-container input:checked ~ .foxit-radio-checkmark {\n  background-color: #ffffff;\n  border: 1px solid #ff5f00;\n}\n\n.foxit-radio-checkmark:after {\n  content: '';\n  position: absolute;\n  display: none;\n}\n\n.foxit-radio-container input:checked ~ .foxit-radio-checkmark:after {\n  display: block;\n}\n\n.foxit-radio-container .foxit-radio-checkmark:after {\n  top: 4px;\n  left: 4px;\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: #ff5f00;\n}\n\n.foxit-radio-container.disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };

package/es/Select/Select.d.ts

@@ -0,0 +1,17 @@
+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;
+}
+declare const Select: React.FC<SelectProps>;
+export default Select;

package/es/Select/Select.js

@@ -0,0 +1,42 @@
+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, rest = __rest(_a, ["options", "className", "defaultValue", "isDisabled", "isClearable", "isSearchable", "isMulti", "placeholder", "preIcon"]);
+    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'
+            } })); },
+        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: 16,
+                    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 } }, rest)));
+};
+
+export { Select as default };

package/es/Table/Table.d.ts

@@ -0,0 +1,15 @@
+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[];
+}
+declare const Table: <T>({ columns, data }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default Table;

package/es/Table/Table.js

@@ -0,0 +1,15 @@
+import { __assign } from '../node_modules/tslib/tslib.es6.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import './table.css.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)); }) })] })) })));
+};
+
+export { Table as default };

package/es/Table/table.css.js

@@ -0,0 +1,6 @@
+import styleInject from '../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".foxit-table {\n  border-radius: 10px;\n  overflow: hidden;\n  border: 1px solid #ff5f00;\n  color: #373737;\n}\n\n.foxit-table-container {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.foxit-table-container th,\n.foxit-table-container td {\n  min-height: 70px;\n  height: 70px;\n  padding: 24px;\n}\n\n.foxit-table-container th {\n  background-color: #fff6f0;\n  font-weight: 700;\n  font-size: 16px;\n}\n\n.foxit-table-container td {\n  font-size: 14px;\n  font-weight: 400;\n}\n\n.foxit-table-container .foxit-even-row {\n  background-color: white;\n}\n\n.foxit-table-container .foxit-odd-row {\n  background-color: #fff6f0;\n}\n";
+styleInject(css_248z);
+
+export { css_248z 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,22 @@
+import { __assign } from '../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import './tabs.css.js';
+
+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/Tabs/tabs.css.js

@@ -0,0 +1,6 @@
+import styleInject from '../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".foxit-tabs {\n  display: flex;\n  gap: 8px;\n}\n\n.foxit-tab-item {\n  font-weight: 600;\n  padding: 14px 20px;\n  border: none;\n  border-radius: 10px;\n  background-color: #f1f3f4;\n  color: #757575;\n  cursor: pointer;\n  transition:\n    background-color 0.3s,\n    color 0.3s;\n}\n\n.foxit-tab-item.active {\n  background-color: #ff5f00;\n  color: white;\n}\n\n.foxit-tab-item:hover:not(.active) {\n  background-color: #e0e0e0;\n}\n\n.foxit-tab-content {\n  margin-top: 16px;\n}\n";
+styleInject(css_248z);
+
+export { css_248z 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';
+    children: React.ReactNode;
+}
+declare const Tag: React.FC<TagProps>;
+export default Tag;

package/es/Tag/Tag.js

@@ -0,0 +1,11 @@
+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 className = "foxit-tag foxit-tag-".concat(color);
+    return jsx("span", __assign({ className: className }, { children: children }));
+};
+
+export { Tag as default };

package/es/Tag/tag.css.js

@@ -0,0 +1,6 @@
+import styleInject from '../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".foxit-tag {\n  display: inline-block;\n  min-height: 24px;\n  padding: 4px 8px;\n  border-radius: 5px;\n  font-size: 12px;\n  font-weight: 600;\n  white-space: nowrap;\n  height: 24px;\n}\n\n.foxit-tag-active {\n  background-color: #edfafa;\n  color: #0f8b8d;\n}\n\n.foxit-tag-canceled {\n  background-color: #ffecec;\n  color: #e22727;\n}\n\n.foxit-tag-pending {\n  background-color: #fbf4d0;\n  color: #9b8827;\n}\n\n.foxit-tag-offline {\n  background-color: #edecff;\n  color: #6462c6;\n}\n\n.foxit-tag-trial {\n  background-color: #e4f4fe;\n  color: #2288ce;\n}\n\n.foxit-tag-expired {\n  background-color: #ececec;\n  color: #757575;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };

package/es/Toast/Toast.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './toast.css';
+import { ToastProps } from './Toast.types';
+declare const Toast: React.FC<React.PropsWithChildren<ToastProps>>;
+export default Toast;

package/es/Toast/Toast.js

@@ -0,0 +1,44 @@
+import { __assign } from '../node_modules/tslib/tslib.es6.js';
+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) {
+    var toast = _a.toast, _b = _a.type, type = _b === void 0 ? 'success' : _b, _c = _a.duration, duration = _c === void 0 ? 4000 : _c;
+    var _d = useState(false), animationIn = _d[0], setAnimationIn = _d[1];
+    var toastRef = useRef(null);
+    useEffect(function () {
+        setAnimationIn(true);
+        var timer = setTimeout(function () {
+            setAnimationIn(false);
+        }, duration - 500);
+        return function () {
+            clearTimeout(timer);
+        };
+    }, [toast]);
+    var getIconName = function (type) {
+        switch (type) {
+            case 'success':
+                return 'SuccessColoursOutlined';
+            case 'error':
+                return 'ErrorColoursOutlined';
+            case 'warning':
+                return 'WarningColoursOutlined';
+            case 'loading':
+                return 'LoadingOutlined';
+            default:
+                return 'WarningColoursOutlined';
+        }
+    };
+    return (jsxs(Fragment, { children: [animationIn && type === 'loading' && jsx("div", { className: "foxit-toast-loading-overlay" }), jsx(CSSTransition, __assign({ in: animationIn, nodeRef: toastRef, timeout: 500, mountOnEnter: true, unmountOnExit: true, classNames: {
+                    enter: 'foxit-toast-enter',
+                    enterActive: 'foxit-toast-enter-active',
+                    exit: 'foxit-toast-exit',
+                    exitActive: 'foxit-toast-exit-active'
+                } }, { children: jsxs("div", __assign({ ref: toastRef, className: classNames('foxit-toast-item', "foxit-toast-item-".concat(type)) }, { children: [jsx(Icon, { name: getIconName(type), className: type === 'loading' ? 'foxit-toast-loading' : '' }), toast] })) }))] }));
+};
+
+export { Toast as default };

package/es/Toast/Toast.types.d.ts

@@ -0,0 +1,5 @@
+export interface ToastProps {
+    toast: string;
+    type?: 'success' | 'error' | 'warning' | 'loading';
+    duration?: number;
+}