npm - @willphan1712000/frontend - Versions diffs - 1.0.2 → 1.0.3 - Mend

@willphan1712000/frontend 1.0.2 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/README.md CHANGED Viewed

@@ -26,6 +26,25 @@ npm i @willphan1712000/frontend
 If you found an issue or would like to submit an improvement to this project, please submit an issue using the issues tab above. If you would like to submit a Pull Request with a fix, reference the issue you created
-## Happy with this project
+## Happy with this project and want to make a contribution
 You can connect to me at [Facebook](https://www.facebook.com/phanthanhnha123200/) [Instagram](https://www.instagram.com/phanthanhnha_0117/)
+You can make contributions to this project by adding new UI ideas that stand out so we can compete ones generated by AI.
+To test a package, run
+```npm
+npm link
+```
+On the other frontend environment, run
+```npm
+npm link @willphan1712000/frontend
+```
+> [!NOTE]
+> if you encounter the problem "3. You might have more than one copy of React in the same app?"
+> it means your application has loaded two different React instances. This breaks React Hooks, which rely on a single, shared state.
+> Run this to connect to react in your testing project
+```npm
+npm link <path_to_your_testing_project>/node_modules/react
+```

package/dist/index.d.mts CHANGED Viewed

@@ -5,7 +5,7 @@ type Options$2 = {
     label: string;
     value: string;
 }[];
-interface Props$4 {
+interface Props$5 {
     options: Options$2;
     value: string;
     onChange: (value: string) => void;
@@ -19,9 +19,9 @@ interface Props$4 {
  * @param width - specify the width of the component
  * @returns
  */
-declare const DropdownSelect: ({ options, value, onChange, width }: Props$4) => react_jsx_runtime.JSX.Element;
+declare const DropdownSelect: ({ options, value, onChange, width }: Props$5) => react_jsx_runtime.JSX.Element;
-interface Props$3 {
+interface Props$4 {
     value: string;
     onChange: (value: string) => void;
     min?: string;
@@ -39,13 +39,13 @@ interface Props$3 {
  * @param onChange - to set a value
  * @returns
  */
-declare const RangeSlider: ({ min, max, color, width, value, onChange }: Props$3) => react_jsx_runtime.JSX.Element;
+declare const RangeSlider: ({ min, max, color, width, value, onChange }: Props$4) => react_jsx_runtime.JSX.Element;
 type Options$1 = {
     label: ReactNode;
     value: string;
 }[];
-interface Props$2 {
+interface Props$3 {
     value: string;
     onChange: (value: string) => void;
     width?: string;
@@ -59,9 +59,9 @@ interface Props$2 {
  * @options - list of options, format [{ label: React Node Syntax, value: string }]
  * @returns
  */
-declare const OptionSlider: ({ value, onChange, width, options, color }: Props$2) => react_jsx_runtime.JSX.Element;
+declare const OptionSlider: ({ value, onChange, width, options, color }: Props$3) => react_jsx_runtime.JSX.Element;
-interface Props$1 {
+interface Props$2 {
     value: string;
     onChange: (value: string) => void;
     width?: string;
@@ -73,13 +73,13 @@ interface Props$1 {
  * @param width
  * @returns
  */
-declare const ColorPickerSlider: ({ value, onChange, width }: Props$1) => react_jsx_runtime.JSX.Element;
+declare const ColorPickerSlider: ({ value, onChange, width }: Props$2) => react_jsx_runtime.JSX.Element;
 type Options = {
     label: string;
     value: string;
 }[];
-interface Props {
+interface Props$1 {
     options: Options;
     value: string[];
     onChange: React.Dispatch<React.SetStateAction<string[]>>;
@@ -88,11 +88,34 @@ interface Props {
 /**
  * MultiSelect component, allowing users to select multiple options from dropdown menu with search
  * @param options - list of options, which is an array of object [{ label: string, value: string }]
- * @param value - a chosen value
- * @param onChange - a function to set a value
+ * @param value - an array of chosen values
+ * @param onChange - a function to set an array of values
  * @param width - specify the width of the component
  * @returns
  */
-declare const MultiSelect: ({ options, value, onChange, width }: Props) => react_jsx_runtime.JSX.Element;
+declare const MultiSelect: ({ options, value, onChange, width }: Props$1) => react_jsx_runtime.JSX.Element;
+interface Props {
+    buttonType: "gradient" | "solid" | "normal";
+}
+interface Data {
+    content: string;
+    main?: string;
+    text?: string;
+    first?: string;
+    second?: string;
+    isLoading?: boolean;
+}
+/**
+ *
+ * @param buttonType type of button, default is normal button
+ * @param content string content inside the button
+ * @param main main color of the button
+ * @param text text color
+ * @param first first color when using gradient button or solid button, default is #3e8fbc
+ * @param second second color when using gradient button, default is #aa6392
+ * @returns button UI component
+ */
+declare const Button: ({ buttonType, content, main, first, second, text, isLoading, ...props }: Props & Data & React.ComponentProps<"button">) => react_jsx_runtime.JSX.Element;
-export { ColorPickerSlider, DropdownSelect, MultiSelect, OptionSlider, type Options$2 as Options, RangeSlider, type Options$1 as SliderOptions };
+export { Button, ColorPickerSlider, DropdownSelect, MultiSelect, OptionSlider, type Options$2 as Options, RangeSlider, type Options$1 as SliderOptions };

package/dist/index.d.ts CHANGED Viewed

@@ -5,7 +5,7 @@ type Options$2 = {
     label: string;
     value: string;
 }[];
-interface Props$4 {
+interface Props$5 {
     options: Options$2;
     value: string;
     onChange: (value: string) => void;
@@ -19,9 +19,9 @@ interface Props$4 {
  * @param width - specify the width of the component
  * @returns
  */
-declare const DropdownSelect: ({ options, value, onChange, width }: Props$4) => react_jsx_runtime.JSX.Element;
+declare const DropdownSelect: ({ options, value, onChange, width }: Props$5) => react_jsx_runtime.JSX.Element;
-interface Props$3 {
+interface Props$4 {
     value: string;
     onChange: (value: string) => void;
     min?: string;
@@ -39,13 +39,13 @@ interface Props$3 {
  * @param onChange - to set a value
  * @returns
  */
-declare const RangeSlider: ({ min, max, color, width, value, onChange }: Props$3) => react_jsx_runtime.JSX.Element;
+declare const RangeSlider: ({ min, max, color, width, value, onChange }: Props$4) => react_jsx_runtime.JSX.Element;
 type Options$1 = {
     label: ReactNode;
     value: string;
 }[];
-interface Props$2 {
+interface Props$3 {
     value: string;
     onChange: (value: string) => void;
     width?: string;
@@ -59,9 +59,9 @@ interface Props$2 {
  * @options - list of options, format [{ label: React Node Syntax, value: string }]
  * @returns
  */
-declare const OptionSlider: ({ value, onChange, width, options, color }: Props$2) => react_jsx_runtime.JSX.Element;
+declare const OptionSlider: ({ value, onChange, width, options, color }: Props$3) => react_jsx_runtime.JSX.Element;
-interface Props$1 {
+interface Props$2 {
     value: string;
     onChange: (value: string) => void;
     width?: string;
@@ -73,13 +73,13 @@ interface Props$1 {
  * @param width
  * @returns
  */
-declare const ColorPickerSlider: ({ value, onChange, width }: Props$1) => react_jsx_runtime.JSX.Element;
+declare const ColorPickerSlider: ({ value, onChange, width }: Props$2) => react_jsx_runtime.JSX.Element;
 type Options = {
     label: string;
     value: string;
 }[];
-interface Props {
+interface Props$1 {
     options: Options;
     value: string[];
     onChange: React.Dispatch<React.SetStateAction<string[]>>;
@@ -88,11 +88,34 @@ interface Props {
 /**
  * MultiSelect component, allowing users to select multiple options from dropdown menu with search
  * @param options - list of options, which is an array of object [{ label: string, value: string }]
- * @param value - a chosen value
- * @param onChange - a function to set a value
+ * @param value - an array of chosen values
+ * @param onChange - a function to set an array of values
  * @param width - specify the width of the component
  * @returns
  */
-declare const MultiSelect: ({ options, value, onChange, width }: Props) => react_jsx_runtime.JSX.Element;
+declare const MultiSelect: ({ options, value, onChange, width }: Props$1) => react_jsx_runtime.JSX.Element;
+interface Props {
+    buttonType: "gradient" | "solid" | "normal";
+}
+interface Data {
+    content: string;
+    main?: string;
+    text?: string;
+    first?: string;
+    second?: string;
+    isLoading?: boolean;
+}
+/**
+ *
+ * @param buttonType type of button, default is normal button
+ * @param content string content inside the button
+ * @param main main color of the button
+ * @param text text color
+ * @param first first color when using gradient button or solid button, default is #3e8fbc
+ * @param second second color when using gradient button, default is #aa6392
+ * @returns button UI component
+ */
+declare const Button: ({ buttonType, content, main, first, second, text, isLoading, ...props }: Props & Data & React.ComponentProps<"button">) => react_jsx_runtime.JSX.Element;
-export { ColorPickerSlider, DropdownSelect, MultiSelect, OptionSlider, type Options$2 as Options, RangeSlider, type Options$1 as SliderOptions };
+export { Button, ColorPickerSlider, DropdownSelect, MultiSelect, OptionSlider, type Options$2 as Options, RangeSlider, type Options$1 as SliderOptions };

package/dist/index.js CHANGED Viewed

@@ -95,6 +95,33 @@ 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();
 }
@@ -162,6 +189,9 @@ var __toCommonJS = function(mod) {
 // index.ts
 var index_exports = {};
 __export(index_exports, {
+    Button: function() {
+        return Button_default;
+    },
     ColorPickerSlider: function() {
         return ColorPickerSlider_default;
     },
@@ -1021,7 +1051,7 @@ var Search2 = function(param) {
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", {
         style: styles_default5.search_border,
         children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", {
-            placeholder: "Search",
+            placeholder: "Search...",
             style: styles_default5.search,
             id: "search",
             name: "search",
@@ -1206,8 +1236,310 @@ var MultiSelect = function(param) {
     });
 };
 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,

package/dist/index.mjs CHANGED Viewed

@@ -95,6 +95,33 @@ 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();
 }
@@ -950,7 +977,7 @@ var Search2 = function(param) {
     return /* @__PURE__ */ jsx7("div", {
         style: styles_default5.search_border,
         children: /* @__PURE__ */ jsx7("input", {
-            placeholder: "Search",
+            placeholder: "Search...",
             style: styles_default5.search,
             id: "search",
             name: "search",
@@ -1135,4 +1162,305 @@ var MultiSelect = function(param) {
     });
 };
 var MultiSelect_default = MultiSelect;
-export { ColorPickerSlider_default as ColorPickerSlider, DropdownSelect_default as DropdownSelect, MultiSelect_default as MultiSelect, OptionSlider_default as OptionSlider, RangeSlider_default as RangeSlider };
+// src/components/Buttons/Button.tsx
+import { createContext as createContext3, useContext as useContext3 } from "react";
+// src/components/Buttons/gradient/Gradient.tsx
+import { motion } from "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
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+var Gradient = function() {
+    var data = useButtonContext();
+    var styles8 = styles_default6(data.first, data.second);
+    return /* @__PURE__ */ jsxs8("div", {
+        style: _object_spread_props(_object_spread({}, styles8.container), {
+            overflow: data.isLoading ? "hidden" : ""
+        }),
+        children: [
+            /* @__PURE__ */ jsx10("button", _object_spread_props(_object_spread({
+                style: styles8.btn
+            }, data.props), {
+                children: /* @__PURE__ */ jsxs8("div", {
+                    style: {
+                        position: "relative"
+                    },
+                    children: [
+                        /* @__PURE__ */ jsx10("div", {
+                            style: styles8.labelBefore
+                        }),
+                        /* @__PURE__ */ jsx10("div", {
+                            style: _object_spread_props(_object_spread({}, styles8.label), {
+                                backgroundColor: data.main
+                            }),
+                            children: /* @__PURE__ */ jsx10("p", {
+                                style: _object_spread_props(_object_spread({}, styles8.p), {
+                                    color: "".concat(data.text)
+                                }),
+                                children: data.content
+                            })
+                        }),
+                        /* @__PURE__ */ jsx10("div", {
+                            style: styles8.labelAfter
+                        })
+                    ]
+                })
+            })),
+            !data.isLoading && /* @__PURE__ */ jsx10("div", {
+                style: styles8.btnAfter
+            }),
+            data.isLoading && /* @__PURE__ */ jsx10(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
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+var Solid = function() {
+    var data = useButtonContext();
+    var styles8 = styles_default7(data.first);
+    return /* @__PURE__ */ jsxs9("div", {
+        style: {
+            position: "relative"
+        },
+        children: [
+            /* @__PURE__ */ jsx11("button", _object_spread_props(_object_spread({
+                style: styles8.btn
+            }, data.props), {
+                children: /* @__PURE__ */ jsxs9("div", {
+                    style: {
+                        position: "relative"
+                    },
+                    children: [
+                        /* @__PURE__ */ jsx11("div", {
+                            style: styles8.labelBefore
+                        }),
+                        /* @__PURE__ */ jsx11("div", {
+                            style: _object_spread_props(_object_spread({}, styles8.label), {
+                                backgroundColor: data.main
+                            }),
+                            children: /* @__PURE__ */ jsx11("p", {
+                                style: _object_spread_props(_object_spread({}, styles8.p), {
+                                    color: "".concat(data.text)
+                                }),
+                                children: data.content
+                            })
+                        }),
+                        /* @__PURE__ */ jsx11("div", {
+                            style: styles8.labelAfter
+                        })
+                    ]
+                })
+            })),
+            /* @__PURE__ */ jsx11("div", {
+                style: styles8.btnAfter
+            })
+        ]
+    });
+};
+var Solid_default = Solid;
+// src/components/Buttons/Button.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var ButtonContext = createContext3(void 0);
+function useButtonContext() {
+    var data = useContext3(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__ */ jsx12(ButtonContext.Provider, {
+                value: {
+                    content: content,
+                    main: main,
+                    first: first,
+                    second: second,
+                    text: text,
+                    props: props,
+                    isLoading: isLoading
+                },
+                children: /* @__PURE__ */ jsx12(Gradient_default, {})
+            });
+        case "solid":
+            return /* @__PURE__ */ jsx12(ButtonContext.Provider, {
+                value: {
+                    content: content,
+                    main: main,
+                    first: first,
+                    text: text,
+                    props: props,
+                    isLoading: isLoading
+                },
+                children: /* @__PURE__ */ jsx12(Solid_default, {})
+            });
+        default:
+            return /* @__PURE__ */ jsx12("button", _object_spread_props(_object_spread({}, props), {
+                children: content
+            }));
+    }
+};
+var Button_default = Button;
+export { Button_default as Button, ColorPickerSlider_default as ColorPickerSlider, DropdownSelect_default as DropdownSelect, MultiSelect_default as MultiSelect, OptionSlider_default as OptionSlider, RangeSlider_default as RangeSlider };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@willphan1712000/frontend",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Frontend Library",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -9,10 +9,8 @@
     "dev": "tsup --watch",
     "build": "tsup"
   },
-  "peerDependencies": {
-    "react": ">=18.0.0"
-  },
   "devDependencies": {
+    "@babel/preset-typescript": "^7.28.5",
     "@swc/core": "^1.13.5",
     "@testing-library/jest-dom": "^6.9.0",
     "@testing-library/react": "^16.3.0",
@@ -22,14 +20,13 @@
     "@types/react-dom": "^19.1.9",
     "esbuild-plugin-css-module": "^0.1.0",
     "esbuild-plugin-react18-css": "^0.0.4",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
     "ts-loader": "^9.5.4",
     "tsup": "^8.5.0",
     "typescript": "^5.9.3",
     "web-vitals": "^5.1.0"
   },
   "dependencies": {
+    "framer-motion": "^12.23.24",
     "react-icons": "^5.5.0"
   }
 }

package/.babelrc DELETED Viewed

@@ -1,20 +0,0 @@
-{
-  "presets": [
-    "@babel/preset-env",
-    [
-      "@babel/preset-react",
-      {
-        "runtime": "automatic"
-      }
-    ],
-    "@babel/preset-typescript"
-  ],
-  "plugins": [
-    [
-      "@babel/plugin-transform-runtime",
-      {
-        "regenerator": true
-      }
-    ]
-  ]
-}

package/index.ts DELETED Viewed

@@ -1,16 +0,0 @@
-// DropSelect component
-export { default as DropdownSelect } from './src/components/DropdownSelect/DropdownSelect';
-export type { Options } from './src/components/DropdownSelect/DropdownSelect';
-// RangeSlider component
-export { default as RangeSlider } from './src/components/RangeSlider/RangeSlider';
-// OptionSlider component
-export { default as OptionSlider } from './src/components/OptionSlider/OptionSlider';
-export type { Options as SliderOptions } from './src/components/OptionSlider/OptionSlider';
-// ColorPickerSlider
-export { default as ColorPickerSlider } from './src/components/ColorPickerSlider/ColorPickerSlider';
-// MultiSelect
-export { default as MultiSelect } from './src/components/MultiSelect/MultiSelect';

package/public/favicon.ico DELETED Viewed

Binary file

package/public/index.html DELETED Viewed

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>

package/public/logo192.png DELETED Viewed

Binary file

package/public/logo512.png DELETED Viewed

Binary file

package/public/manifest.json DELETED Viewed

@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

package/public/robots.txt DELETED Viewed

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow: