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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "foxit-component",
-  "version": "0.0.1-alpha.3",
+  "version": "0.0.1-alpha.30",
   "author": {
     "name": "linye",
     "email": "869675630@qq.com"
@@ -33,8 +33,8 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.126",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
     "@typescript-eslint/eslint-plugin": "^8.24.1",
     "@typescript-eslint/parser": "^8.24.1",
     "classnames": "^2.5.1",
@@ -42,13 +42,11 @@
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-unused-imports": "^4.1.4",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
     "react-scripts": "5.0.1",
     "react-select": "^5.10.0",
+    "react-transition-group": "^4.4.5",
     "typescript": "^4.9.5",
-    "web-vitals": "^2.1.4",
-    "react-transition-group": "^4.4.5"
+    "web-vitals": "^2.1.4"
   },
   "eslintConfig": {
     "extends": [
@@ -75,14 +73,14 @@
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-strip": "^3.0.4",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@storybook/addon-essentials": "^8.5.8",
-    "@storybook/addon-interactions": "^8.5.8",
-    "@storybook/addon-onboarding": "^8.5.8",
-    "@storybook/blocks": "^8.5.8",
-    "@storybook/preset-create-react-app": "^8.5.8",
-    "@storybook/react": "^8.5.8",
-    "@storybook/react-webpack5": "^8.5.8",
-    "@storybook/test": "^8.5.8",
+    "@storybook/addon-essentials": "8.5.8",
+    "@storybook/addon-interactions": "8.5.8",
+    "@storybook/addon-onboarding": "8.5.8",
+    "@storybook/blocks": "8.5.8",
+    "@storybook/preset-create-react-app": "8.5.8",
+    "@storybook/react": "8.5.8",
+    "@storybook/react-webpack5": "8.5.8",
+    "@storybook/test": "8.5.8",
     "autoprefixer": "^10.4.20",
     "chromatic": "^11.25.2",
     "eslint-plugin-storybook": "^0.11.3",
@@ -91,7 +89,11 @@
     "rollup": "^4.34.8",
     "rollup-plugin-node-externals": "^8.0.0",
     "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "^8.5.8",
+    "storybook": "8.5.8",
     "webpack": "^5.98.0"
+  },
+  "peerDependencies": {
+    "react": "^18",
+    "react-dom": "^18"
   }
 }

package/es/Button/button.css.js

@@ -1,6 +0,0 @@
-import styleInject from '../node_modules/style-inject/dist/style-inject.es.js';
-
-var css_248z = ".foxit-button {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  border: 0;\n  border-radius: 10px;\n  font-weight: 600;\n  font-size: 14px;\n  line-height: 18px;\n  padding: 19px 32px;\n  letter-spacing: 0.42px;\n}\n.foxit-button-primary {\n  background-color: #ff5f00;\n  color: white;\n}\n.foxit-button-secondary {\n  border: 2px solid #ff5f00;\n  background-color: white;\n  color: #ff5f00;\n}\n.foxit-button-small {\n  padding: 10px 24px;\n  border-radius: 5px;\n}\n.foxit-button-medium {\n  padding: 13px 32px;\n  border-radius: 5px;\n}\n.foxit-button-large {\n  padding: 19px 32px;\n}\n";
-styleInject(css_248z);
-
-export { css_248z as default };

package/es/Checkbox/checkbox.css.js

@@ -1,6 +0,0 @@
-import styleInject from '../node_modules/style-inject/dist/style-inject.es.js';
-
-var css_248z = ".foxit-checkbox-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-checkbox-container input {\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.foxit-checkbox-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: 4px;\n}\n\n.foxit-checkbox-content {\n  line-height: 20px;\n}\n\n.foxit-checkbox-container input:checked ~ .foxit-checkbox-checkmark {\n  background-color: #ff5f00;\n  border: none;\n}\n\n.foxit-checkbox-checkmark:after {\n  content: '';\n  position: absolute;\n  display: none;\n}\n\n.foxit-checkbox-container input:checked ~ .foxit-checkbox-checkmark:after {\n  display: block;\n}\n\n.foxit-checkbox-container .foxit-checkbox-checkmark:after {\n  left: 7px;\n  top: 4px;\n  width: 6px;\n  height: 10px;\n  border: solid white;\n  border-width: 0 2px 2px 0;\n  transform: rotate(45deg);\n}\n\n.foxit-checkbox-container.disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n  color: #00000040;\n}\n\n.foxit-checkbox-checkmark.disabled {\n  background-color: #f5f5f5;\n  border: 1px solid #d9d9d9;\n}\n";
-styleInject(css_248z);
-
-export { css_248z as default };

package/es/Empty/empty.css.js

@@ -1,6 +0,0 @@
-import styleInject from '../node_modules/style-inject/dist/style-inject.es.js';
-
-var css_248z = ".foxit-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  padding: 20px;\n}\n\n.foxit-empty-image {\n  margin-bottom: 16px;\n}\n\n.foxit-empty-description {\n  font-size: 14px;\n  color: #757575;\n}\n";
-styleInject(css_248z);
-
-export { css_248z as default };

package/es/Form/form.css.js

@@ -1,6 +0,0 @@
-import styleInject from '../node_modules/style-inject/dist/style-inject.es.js';
-
-var css_248z = ".foxit-form-item {\n  margin-bottom: 16px;\n}\n\n.foxit-form-item label {\n  display: block;\n  margin-bottom: 8px;\n  font-weight: 500;\n  font-size: 14px;\n  color: #525252;\n}\n\n.foxit-form-error-text {\n  margin-top: 8px;\n  color: red;\n}\n\n.foxit-form-warning-text {\n  margin-top: 8px;\n  color: orange;\n}\n\n.foxit-form-item > .foxit-form-error-component .foxit-input-wrapper,\n.foxit-form-item > .foxit-form-error-component .foxit-select-wrapper > :nth-child(3),\n.foxit-form-item > .foxit-form-error-component .foxit-checkbox-container,\n.foxit-form-item > .foxit-form-error-component .foxit-radio-container {\n  border: 1px solid red !important;\n}\n\n.foxit-form-item > .foxit-form-warning-component .foxit-input-wrapper,\n.foxit-form-item > .foxit-form-warning-component .foxit-select-wrapper > :nth-child(3),\n.foxit-form-item > .foxit-form-warning-component .foxit-checkbox-container,\n.foxit-form-item > .foxit-form-warning-component .foxit-radio-container {\n  border-color: orange !important;\n}\n";
-styleInject(css_248z);
-
-export { css_248z as default };

package/es/Input/input.css.js

@@ -1,6 +0,0 @@
-import styleInject from '../node_modules/style-inject/dist/style-inject.es.js';
-
-var css_248z = ".foxit-input-wrapper {\n  display: flex;\n  align-items: center;\n  border: 1px solid #d9d9d9;\n  border-radius: 10px;\n  padding: 11px 16px;\n  transition: border-color 0.3s;\n  font-size: 14px;\n  font-weight: 400;\n}\n\n.foxit-input-wrapper:focus-within {\n  border-color: #ff5f00 !important;\n}\n.foxit-input-wrapper:hover {\n  border-color: #757575;\n}\n\n.foxit-input-element {\n  flex: 1;\n  border: none;\n  outline: none;\n  color: #525252;\n  line-height: 24px;\n}\n\n.foxit-input-element::placeholder {\n  color: #b3b3b3;\n}\n\n.foxit-input-addon {\n  display: flex;\n  align-items: center;\n  padding: 0 8px;\n  cursor: pointer;\n  color: #b3b3b3;\n  transition: color 0.3s;\n}\n\n.foxit-input-wrapper:focus-within .foxit-input-addon {\n  color: #ff5f00 !important;\n}\n.foxit-input-wrapper:hover .foxit-input-addon {\n  color: #757575;\n}\n";
-styleInject(css_248z);
-
-export { css_248z as default };

package/es/Menu/menu.css.js

@@ -1,6 +0,0 @@
-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.css.js

@@ -1,6 +0,0 @@
-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.css.js

@@ -1,6 +0,0 @@
-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.css.js

@@ -1,6 +0,0 @@
-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/Table/table.css.js

@@ -1,6 +0,0 @@
-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.css.js

@@ -1,6 +0,0 @@
-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.css.js

@@ -1,6 +0,0 @@
-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.css.js

@@ -1,6 +0,0 @@
-import styleInject from '../node_modules/style-inject/dist/style-inject.es.js';
-
-var css_248z = ".foxit-toast-container {\n  width: 100%;\n  position: fixed;\n  pointer-events: none;\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 0.5s;\n  left: 50%;\n  transition-delay: 0s;\n  transform: translateX(-50%);\n  z-index: 2000;\n  top: 0;\n}\n\n.foxit-toast-loading {\n  animation: spin 1s linear infinite;\n  color: #ff5f00;\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.foxit-toast-loading-overlay {\n  position: fixed;\n  inset: 0;\n  background-color: #000000;\n  opacity: 0.15;\n  z-index: 10;\n  pointer-events: auto;\n  height: 100vh;\n}\n\n.foxit-toast-item {\n  position: relative;\n  top: 64px;\n  z-index: 20;\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 0.15s;\n  width: fit-content;\n  margin-left: auto;\n  margin-right: auto;\n  background-color: #ffffff;\n  color: #525252;\n  padding: 9px 12px;\n  border-radius: 50px;\n  border: none;\n  margin-bottom: 16px;\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  justify-content: center;\n  align-items: center;\n}\n\n.foxit-toast-item-success {\n  background-color: #ddfae8;\n  color: #1f7f40;\n}\n\n.foxit-toast-item-error {\n  background-color: #fae5dd;\n  color: #e22727;\n}\n\n.foxit-toast-item-warning {\n  background-color: #fff0e7;\n  color: #525252;\n}\n\n.foxit-toast-enter {\n  opacity: 0;\n  transform: translateY(-100%);\n}\n\n.foxit-toast-enter-active {\n  opacity: 1;\n  transform: translateY(0);\n  transition: all 0.5s ease-out;\n}\n\n.foxit-toast-exit {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.foxit-toast-exit-active {\n  opacity: 0;\n  transform: translateY(-100%);\n  transition: all 0.5s ease-in;\n}\n";
-styleInject(css_248z);
-
-export { css_248z as default };

package/es/Tooltip/tooltip.css.js

@@ -1,6 +0,0 @@
-import styleInject from '../node_modules/style-inject/dist/style-inject.es.js';
-
-var css_248z = ".foxit-tooltip-container {\n  position: relative;\n  display: inline-block;\n  width: auto;\n}\n\n.foxit-tooltip-content {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: #525252;\n  color: #fff;\n  /* text-align: center; */\n  border-radius: 10px;\n  padding: 12px 16px;\n  z-index: 1;\n  max-width: 300px;\n  width: max-content;\n}\n\n.foxit-tooltip-arrow {\n  position: absolute;\n  left: 50%;\n  bottom: -5px;\n  transform: translateX(-50%);\n  width: 0;\n  height: 0;\n  border-left: 5px solid transparent;\n  border-right: 5px solid transparent;\n  border-top: 5px solid #525252;\n}\n";
-styleInject(css_248z);
-
-export { css_248z as default };

package/es/node_modules/style-inject/dist/style-inject.es.js

@@ -1,28 +0,0 @@
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-export { styleInject as default };