@willphan1712000/frontend 1.0.1 → 1.0.3

package/dist/index.js

@@ -7,6 +7,9 @@ function _array_like_to_array(arr, len) {
 function _array_with_holes(arr) {
     if (Array.isArray(arr)) return arr;
 }
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -20,6 +23,9 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
 function _iterable_to_array_limit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
@@ -47,6 +53,9 @@ function _iterable_to_array_limit(arr, i) {
 function _non_iterable_rest() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function _object_spread(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
@@ -86,9 +95,39 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
 function _sliced_to_array(arr, i) {
     return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
 }
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
 function _type_of(obj) {
     "@swc/helpers - typeof";
     return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
@@ -150,12 +189,18 @@ var __toCommonJS = function(mod) {
 // index.ts
 var index_exports = {};
 __export(index_exports, {
+    Button: function() {
+        return Button_default;
+    },
     ColorPickerSlider: function() {
         return ColorPickerSlider_default;
     },
     DropdownSelect: function() {
         return DropdownSelect_default;
     },
+    MultiSelect: function() {
+        return MultiSelect_default;
+    },
     OptionSlider: function() {
         return OptionSlider_default;
     },
@@ -897,10 +942,607 @@ var ColorPickerSlider = function(param) {
     });
 };
 var ColorPickerSlider_default = ColorPickerSlider;
+// src/components/MultiSelect/MultiSelect.tsx
+var import_react8 = require("react");
+// src/components/MultiSelect/context.ts
+var import_react6 = require("react");
+var MyContext2 = (0, import_react6.createContext)(void 0);
+function useMyContext2() {
+    var data = (0, import_react6.useContext)(MyContext2);
+    if (data === void 0) throw new Error("Select context is undefined");
+    return data;
+}
+// src/components/MultiSelect/Dropdown.tsx
+var import_react7 = require("react");
+// src/components/MultiSelect/styles.ts
+var styles5 = {
+    select_box: {
+        borderRadius: "10px",
+        border: "solid 1px #dadada",
+        padding: "5px 10px",
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        cursor: "pointer"
+    },
+    value: {
+        display: "flex",
+        flexDirection: "row",
+        gap: "15px",
+        flexWrap: "wrap"
+    },
+    eachValue: {
+        borderRadius: "5px",
+        backgroundColor: "#f0f0f7",
+        padding: "5px",
+        position: "relative"
+    },
+    closeEach: {
+        position: "absolute",
+        top: 0,
+        right: 0,
+        transform: "translate(50%, -50%)",
+        borderRadius: "50%",
+        backgroundColor: "#fc2c2cf0",
+        aspectRatio: 1,
+        width: "24px",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        color: "white",
+        transition: "scale .2s linear",
+        transformOrigin: "top right"
+    },
+    close: {
+        borderRadius: "50%",
+        width: "20px",
+        height: "20px",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+    },
+    element: {
+        display: "flex",
+        padding: "5px",
+        borderRadius: "10px",
+        justifyContent: "flex-start",
+        alignItems: "center",
+        cursor: "pointer"
+    },
+    dropdown: {
+        position: "absolute",
+        boxSizing: "border-box",
+        width: "100%",
+        left: "0",
+        display: "flex",
+        flexDirection: "column",
+        border: "solid 1px #dadada",
+        borderRadius: "10px",
+        padding: "5px",
+        maxHeight: "300px",
+        overflowY: "auto",
+        backgroundColor: "white"
+    },
+    search_border: {
+        position: "sticky",
+        top: 0,
+        left: 0,
+        boxSizing: "border-box",
+        width: "100%",
+        backgroundColor: "white",
+        marginBottom: "5px"
+    },
+    search: {
+        width: "100%",
+        borderRadius: "5px",
+        padding: "5px",
+        border: "solid 1px #dadada",
+        display: "flex",
+        justifyContent: "flex-start",
+        alignItems: "center",
+        boxSizing: "border-box"
+    }
+};
+var styles_default5 = styles5;
+// src/components/MultiSelect/Search.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Search2 = function(param) {
+    var options = param.options, onSearch = param.onSearch;
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", {
+        style: styles_default5.search_border,
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", {
+            placeholder: "Search...",
+            style: styles_default5.search,
+            id: "search",
+            name: "search",
+            onChange: function(e) {
+                return onSearch(options.filter(function(ele) {
+                    return ele.value.toLowerCase().includes(e.target.value.toLowerCase());
+                }));
+            }
+        })
+    });
+};
+var Search_default2 = Search2;
+// src/components/MultiSelect/Dropdown.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Dropdown2 = function() {
+    var _useMyContext2 = useMyContext2(), options = _useMyContext2.options, onChange = _useMyContext2.onChange, setOpen = _useMyContext2.setOpen;
+    var _ref = _sliced_to_array((0, import_react7.useState)(true), 2), isVisible = _ref[0], setVisible = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react7.useState)(-1), 2), keyOnHover = _ref1[0], setKeyOnHover = _ref1[1];
+    var _ref2 = _sliced_to_array((0, import_react7.useState)(options), 2), optionsCopy = _ref2[0], setOption = _ref2[1];
+    var dropdownRef = (0, import_react7.useRef)(null);
+    var handleResize = function() {
+        var dropdown = dropdownRef.current;
+        var dimension = dropdown.getBoundingClientRect();
+        var distanceToBottom = window.innerHeight - dimension.bottom;
+        var distanceToTop = dimension.top;
+        if (distanceToBottom < 0) {
+            setVisible(false);
+        }
+        if (distanceToTop < 0) {
+            setVisible(true);
+        }
+    };
+    (0, import_react7.useEffect)(function() {
+        handleResize();
+        window.addEventListener("scroll", handleResize);
+        return function() {
+            window.removeEventListener("scroll", handleResize);
+        };
+    }, []);
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", {
+        ref: dropdownRef,
+        style: isVisible ? _object_spread_props(_object_spread({}, styles_default5.dropdown), {
+            top: "calc(100% + 5px)"
+        }) : _object_spread_props(_object_spread({}, styles_default5.dropdown), {
+            bottom: "calc(100% + 5px)"
+        }),
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Search_default2, {
+                options: options,
+                onSearch: setOption
+            }),
+            optionsCopy.map(function(option, key) {
+                return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", {
+                    style: _object_spread_props(_object_spread({}, styles_default5.element), {
+                        backgroundColor: keyOnHover === key ? "#f0f0f0" : "#fff"
+                    }),
+                    onClick: function() {
+                        onChange(function(prev) {
+                            if (prev.includes(option.value)) return _to_consumable_array(prev);
+                            return _to_consumable_array(prev).concat([
+                                option.value
+                            ]);
+                        });
+                        setOpen(function(prev) {
+                            return !prev;
+                        });
+                    },
+                    onMouseEnter: function() {
+                        return setKeyOnHover(key);
+                    },
+                    onMouseLeave: function() {
+                        return setKeyOnHover(-1);
+                    },
+                    children: option.label
+                }, key);
+            })
+        ]
+    });
+};
+var Dropdown_default2 = Dropdown2;
+// src/components/MultiSelect/MultiSelect.tsx
+var import_io2 = require("react-icons/io");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var MultiSelect = function(param) {
+    var options = param.options, value = param.value, onChange = param.onChange, _param_width = param.width, width = _param_width === void 0 ? "200" : _param_width;
+    var _ref = _sliced_to_array((0, import_react8.useState)(false), 2), open = _ref[0], setOpen = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react8.useState)(false), 2), isHoverClose = _ref1[0], setHoverClose = _ref1[1];
+    var _ref2 = _sliced_to_array((0, import_react8.useState)(-1), 2), isHoverCloseEach = _ref2[0], setHoverCloseEach = _ref2[1];
+    var selectRef = (0, import_react8.useRef)(null);
+    var clickHandler = function(e) {
+        var select = selectRef.current;
+        if (!select.contains(e.target)) {
+            setOpen(false);
+        }
+    };
+    (0, import_react8.useEffect)(function() {
+        window.addEventListener("click", clickHandler);
+        return function() {
+            return window.removeEventListener("click", clickHandler);
+        };
+    }, []);
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MyContext2.Provider, {
+        value: {
+            options: options,
+            value: value,
+            onChange: onChange,
+            setOpen: setOpen
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", {
+            style: {
+                width: "".concat(width, "px"),
+                position: "relative"
+            },
+            ref: selectRef,
+            children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", {
+                    style: styles_default5.select_box,
+                    onClick: function() {
+                        return setOpen(function(prev) {
+                            return !prev;
+                        });
+                    },
+                    children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", {
+                            style: styles_default5.value,
+                            children: value.map(function(eachValue, key) {
+                                return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", {
+                                    style: styles_default5.eachValue,
+                                    children: [
+                                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", {
+                                            onMouseEnter: function() {
+                                                setHoverCloseEach(key);
+                                            },
+                                            onMouseLeave: function() {
+                                                setHoverCloseEach(-1);
+                                            },
+                                            title: "Remove this option",
+                                            style: _object_spread_props(_object_spread({}, styles_default5.closeEach), {
+                                                scale: isHoverCloseEach === key ? "1.2" : "1"
+                                            }),
+                                            onClick: function() {
+                                                onChange(function(prev) {
+                                                    return prev.filter(function(o) {
+                                                        return o !== eachValue;
+                                                    });
+                                                });
+                                                setOpen(function(prev) {
+                                                    return !prev;
+                                                });
+                                            },
+                                            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_io2.IoMdClose, {})
+                                        }),
+                                        eachValue
+                                    ]
+                                }, key);
+                            })
+                        }),
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", {
+                            style: _object_spread_props(_object_spread({}, styles_default5.close), {
+                                backgroundColor: isHoverClose ? "#f0f0f0" : "#fff"
+                            }),
+                            title: "Clear all",
+                            onClick: function() {
+                                onChange([]);
+                                setOpen(function(prev) {
+                                    return !prev;
+                                });
+                            },
+                            onMouseEnter: function() {
+                                return setHoverClose(true);
+                            },
+                            onMouseLeave: function() {
+                                return setHoverClose(false);
+                            },
+                            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_io2.IoMdClose, {})
+                        })
+                    ]
+                }),
+                open && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Dropdown_default2, {})
+            ]
+        })
+    });
+};
+var MultiSelect_default = MultiSelect;
+// src/components/Buttons/Button.tsx
+var import_react9 = require("react");
+// src/components/Buttons/gradient/Gradient.tsx
+var import_framer_motion = require("framer-motion");
+// src/components/Buttons/gradient/styles.ts
+var borderRadius = "20px";
+var styles6 = function(first, second) {
+    var styles8 = {
+        container: {
+            position: "relative",
+            borderRadius: borderRadius,
+            padding: "3px"
+        },
+        btn: {
+            position: "relative",
+            zIndex: 1,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            padding: "2px",
+            borderRadius: borderRadius,
+            backgroundColor: "".concat(first),
+            backgroundImage: "linear-gradient(43deg, ".concat(first, " 0%, ").concat(second, " 100%)"),
+            border: "none",
+            cursor: "pointer"
+        },
+        btnAfter: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            content: '""',
+            zIndex: 0,
+            backgroundColor: "".concat(first),
+            backgroundImage: "linear-gradient(43deg, ".concat(first, " 0%, ").concat(second, " 100%)"),
+            filter: "blur(10px)"
+        },
+        label: {
+            backgroundColor: "#111723",
+            borderRadius: borderRadius,
+            padding: "0.5rem 2rem",
+            color: "white"
+        },
+        labelBefore: {
+            position: "absolute",
+            top: "20%",
+            right: "50%",
+            width: "50%",
+            height: "50%",
+            content: '""',
+            zIndex: 0,
+            backgroundColor: "".concat(first),
+            filter: "blur(15px)"
+        },
+        labelAfter: {
+            position: "absolute",
+            top: "20%",
+            left: "50%",
+            width: "50%",
+            height: "50%",
+            content: '""',
+            zIndex: 0,
+            backgroundColor: "".concat(second),
+            filter: "blur(20px)"
+        },
+        p: {
+            position: "relative",
+            zIndex: 1,
+            margin: 0
+        },
+        neon: {
+            content: '""',
+            background: "conic-gradient(transparent 270deg, green, transparent)",
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            aspectRatio: 1,
+            width: "100%"
+        }
+    };
+    return styles8;
+};
+var styles_default6 = styles6;
+// src/components/Buttons/gradient/Gradient.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Gradient = function() {
+    var data = useButtonContext();
+    var styles8 = styles_default6(data.first, data.second);
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", {
+        style: _object_spread_props(_object_spread({}, styles8.container), {
+            overflow: data.isLoading ? "hidden" : ""
+        }),
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", _object_spread_props(_object_spread({
+                style: styles8.btn
+            }, data.props), {
+                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", {
+                    style: {
+                        position: "relative"
+                    },
+                    children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", {
+                            style: styles8.labelBefore
+                        }),
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", {
+                            style: _object_spread_props(_object_spread({}, styles8.label), {
+                                backgroundColor: data.main
+                            }),
+                            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", {
+                                style: _object_spread_props(_object_spread({}, styles8.p), {
+                                    color: "".concat(data.text)
+                                }),
+                                children: data.content
+                            })
+                        }),
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", {
+                            style: styles8.labelAfter
+                        })
+                    ]
+                })
+            })),
+            !data.isLoading && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", {
+                style: styles8.btnAfter
+            }),
+            data.isLoading && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_framer_motion.motion.div, {
+                style: styles8.btnAfter,
+                animate: {
+                    rotate: 360
+                },
+                transition: {
+                    ease: "linear",
+                    repeat: Infinity,
+                    duration: 3
+                }
+            })
+        ]
+    });
+};
+var Gradient_default = Gradient;
+// src/components/Buttons/solid/styles.ts
+var styles7 = function(first) {
+    var styles8 = {
+        "btn": {
+            cursor: "pointer",
+            position: "relative",
+            zIndex: 0,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            padding: "2px",
+            borderRadius: "0.75rem",
+            backgroundColor: first,
+            border: "none"
+        },
+        "btnAfter": {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            zIndex: -1,
+            backgroundColor: first,
+            filter: "blur(10px)"
+        },
+        "label": {
+            borderRadius: "0.75rem",
+            padding: "0.5rem 2rem",
+            color: "white"
+        },
+        "labelBefore": {
+            position: "absolute",
+            top: "20%",
+            right: "50%",
+            width: "50%",
+            height: "50%",
+            content: '""',
+            // See note below
+            zIndex: 0,
+            backgroundColor: first,
+            filter: "blur(15px)"
+        },
+        "labelAfter": {
+            position: "absolute",
+            top: "20%",
+            left: "50%",
+            width: "50%",
+            height: "50%",
+            content: '""',
+            // See note below
+            zIndex: 0,
+            filter: "blur(20px)"
+        },
+        "p": {
+            zIndex: 1,
+            position: "relative",
+            margin: 0
+        }
+    };
+    return styles8;
+};
+var styles_default7 = styles7;
+// src/components/Buttons/solid/Solid.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Solid = function() {
+    var data = useButtonContext();
+    var styles8 = styles_default7(data.first);
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", {
+        style: {
+            position: "relative"
+        },
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", _object_spread_props(_object_spread({
+                style: styles8.btn
+            }, data.props), {
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", {
+                    style: {
+                        position: "relative"
+                    },
+                    children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", {
+                            style: styles8.labelBefore
+                        }),
+                        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", {
+                            style: _object_spread_props(_object_spread({}, styles8.label), {
+                                backgroundColor: data.main
+                            }),
+                            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", {
+                                style: _object_spread_props(_object_spread({}, styles8.p), {
+                                    color: "".concat(data.text)
+                                }),
+                                children: data.content
+                            })
+                        }),
+                        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", {
+                            style: styles8.labelAfter
+                        })
+                    ]
+                })
+            })),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", {
+                style: styles8.btnAfter
+            })
+        ]
+    });
+};
+var Solid_default = Solid;
+// src/components/Buttons/Button.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var ButtonContext = (0, import_react9.createContext)(void 0);
+function useButtonContext() {
+    var data = (0, import_react9.useContext)(ButtonContext);
+    if (data === void 0) {
+        throw new Error("Select Context is undefined");
+    }
+    return data;
+}
+var Button = function(_param) {
+    var _param_buttonType = _param.buttonType, buttonType = _param_buttonType === void 0 ? "normal" : _param_buttonType, content = _param.content, _param_main = _param.main, main = _param_main === void 0 ? "#111723" : _param_main, _param_first = _param.first, first = _param_first === void 0 ? "#3e8fbc" : _param_first, _param_second = _param.second, second = _param_second === void 0 ? "#aa6392" : _param_second, _param_text = _param.text, text = _param_text === void 0 ? "#fff" : _param_text, _param_isLoading = _param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, props = _object_without_properties(_param, [
+        "buttonType",
+        "content",
+        "main",
+        "first",
+        "second",
+        "text",
+        "isLoading"
+    ]);
+    switch(buttonType){
+        case "gradient":
+            return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ButtonContext.Provider, {
+                value: {
+                    content: content,
+                    main: main,
+                    first: first,
+                    second: second,
+                    text: text,
+                    props: props,
+                    isLoading: isLoading
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Gradient_default, {})
+            });
+        case "solid":
+            return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ButtonContext.Provider, {
+                value: {
+                    content: content,
+                    main: main,
+                    first: first,
+                    text: text,
+                    props: props,
+                    isLoading: isLoading
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Solid_default, {})
+            });
+        default:
+            return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", _object_spread_props(_object_spread({}, props), {
+                children: content
+            }));
+    }
+};
+var Button_default = Button;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+    Button: Button,
     ColorPickerSlider: ColorPickerSlider,
     DropdownSelect: DropdownSelect,
+    MultiSelect: MultiSelect,
     OptionSlider: OptionSlider,
     RangeSlider: RangeSlider
 });