@geoinsight/react-components 1.1.3 → 1.1.5

package/dist/esm/index.js

@@ -0,0 +1,672 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useContext, useMemo, useRef, useEffect, Children, isValidElement, cloneElement, createContext, useState, useReducer } from 'react';
+import clsx from 'clsx';
+import { TfiAngleDown, TfiAngleUp } from 'react-icons/tfi';
+import { BsCheckCircleFill, BsXCircleFill } from 'react-icons/bs';
+import { useForm, FormProvider, useFormContext, Controller } from 'react-hook-form';
+import { TbArrowsDiagonal2 } from 'react-icons/tb';
+import { IoClose, IoPause, IoPlay, IoStop } from 'react-icons/io5';
+import { RiMapPinTimeFill, RiMapPinTimeLine } from 'react-icons/ri';
+
+const generateId = () => {
+    return `id-${Math.random().toString(36).slice(2, 11)}`;
+};
+
+function MenuContent({ children, ...props }) {
+    const { items } = useContext(useMenu());
+    const menuId = useMemo(() => props["data-menu-id"], [props]);
+    const isExpanded = useMemo(() => {
+        return items[menuId]?.isExpanded;
+    }, [items, menuId]);
+    if (!isExpanded)
+        return;
+    return jsx("div", { ...props, children: children });
+}
+
+const ALLOWED_CHILD_COMPONENT$1 = [MenuButton.name, MenuContent.name];
+function MenuItem({ children, ...props }) {
+    const { addItem } = useContext(useMenu());
+    const menuId = useRef("");
+    useEffect(() => {
+        menuId.current = generateId();
+        addItem({
+            id: menuId.current,
+            isExpanded: true,
+        });
+    }, []);
+    return (jsx("div", { "data-menu-id": menuId.current, ...props, children: Children.map(children, (child) => {
+            if (!isValidElement(child))
+                return;
+            const childComponent = child.type;
+            if (!ALLOWED_CHILD_COMPONENT$1.includes(childComponent.name))
+                return;
+            return cloneElement(child, {
+                "data-menu-id": menuId.current,
+            });
+        }) }));
+}
+
+const ALLOWED_CHILD_COMPONENT = [MenuItem.name];
+function MenuWrapper({ children }) {
+    const menuItemComponents = useMemo(() => {
+        return Children.map(children, (child) => {
+            if (!isValidElement(child))
+                return;
+            const childComponent = child.type;
+            if (!ALLOWED_CHILD_COMPONENT.includes(childComponent.name))
+                return;
+            return cloneElement(child);
+        });
+    }, [children]);
+    return jsx("div", { className: "menu", children: menuItemComponents });
+}
+
+/** Context */
+const MenuContext = createContext({});
+function MenuRoot({ children, isOpenByDefault }) {
+    const [items, setItems] = useState({});
+    const addItem = (item) => {
+        setItems((state) => ({
+            ...state,
+            [item.id]: {
+                ...item,
+                isExpanded: isOpenByDefault || false,
+            },
+        }));
+    };
+    const toggle = (id) => {
+        setItems((state) => ({
+            ...state,
+            [id]: {
+                ...items[id],
+                isExpanded: !items[id].isExpanded || false,
+            },
+        }));
+    };
+    return (jsx(MenuContext.Provider, { value: { items, addItem, toggle }, children: jsx(MenuWrapper, { children: children }) }));
+}
+function useMenu() {
+    if (MenuContext === undefined) {
+        throw new Error("useMenu must be used within a MenuContext Provider");
+    }
+    return MenuContext;
+}
+
+const Anchor = ({ Custom, children, ...rest }) => {
+    return Custom ? (jsx(Custom, { ...rest, children: children })) : (jsx("a", { ...rest, children: children }));
+};
+function Button({ children = "Click me", className = "", icon = undefined, isNewWindow = false, mode = "primary", size = "medium", as = "button", CustomAnchor, ...rest }) {
+    return as === "link" ? (jsxs(Anchor, { Custom: CustomAnchor, ...(isNewWindow && { target: "_blank" }), className: clsx(`button ${className}`, `link__${mode}`, `button__${size}`), ...rest, children: [children, icon] })) : (jsxs("button", { className: clsx("button", `button__${mode}`, `button__${size}`, className), ...rest, children: [children, icon] }));
+}
+
+function MenuButton({ anchor, children, buttonClassName, nested, subnested, dropdown, isLink, isSelected, handleCallbackClick, ...props }) {
+    const { toggle } = useContext(useMenu());
+    const [isToggled, setIsToggled] = useState(false);
+    const menuId = useMemo(() => props["data-menu-id"], [props]);
+    const handleClick = () => {
+        toggle(menuId);
+        setIsToggled(!isToggled);
+        handleCallbackClick && handleCallbackClick();
+    };
+    return anchor ? (jsxs(Anchor, { className: clsx("menu-button", {
+            "menu-button-dropdown": dropdown,
+            "menu-button-nested": nested,
+            "menu-button-subnested": subnested,
+            "menu-button-is-link": isLink,
+            "menu-button-is-selected": isSelected,
+        }, buttonClassName), ...anchor, children: [children, dropdown ? (isToggled ? (jsx(TfiAngleDown, { size: "1rem" })) : (jsx(TfiAngleUp, { size: "1rem" }))) : null] })) : (jsxs("div", { role: "button", className: clsx("menu-button", {
+            "menu-button-dropdown": dropdown,
+            "menu-button-nested": nested,
+            "menu-button-subnested": subnested,
+            "menu-button-is-link": isLink,
+            "menu-button-is-selected": isSelected,
+        }, buttonClassName), onClick: handleClick, ...props, children: [children, dropdown ? (isToggled ? (jsx(TfiAngleDown, { size: "1rem" })) : (jsx(TfiAngleUp, { size: "1rem" }))) : null] }));
+}
+
+const Menu = {
+    Root: MenuRoot,
+    Item: MenuItem,
+    Button: MenuButton,
+    Content: MenuContent,
+};
+
+// how do I solve reseting the form outside the form
+function Form({ children, onSubmit, submitButton = {
+    label: "Submit",
+}, initialState, backgroundColor, ...rest }) {
+    const methods = useForm(initialState);
+    const { formState: { isValid }, } = methods;
+    const [result, setResult] = useState({
+        message: "",
+        isSuccess: false,
+    });
+    return (jsx(FormProvider, { ...methods, children: jsxs("form", { className: "form", style: { backgroundColor: backgroundColor }, onSubmit: methods.handleSubmit((data) => {
+                return onSubmit(data, methods, setResult);
+            }), ...rest, children: [children, result.message && (jsxs("div", { className: "form__message", children: [result.isSuccess ? (jsx(BsCheckCircleFill, { color: "var(--color-success)", size: 48 })) : (jsx(BsXCircleFill, { color: "var(--color-danger)", size: 48 })), result.message] })), jsx(Button, { type: "submit", disabled: !isValid, children: submitButton.label })] }) }));
+}
+
+function Input({ inputClassName = "", classNameGroup = "", error = {
+    is: false,
+    message: "",
+}, inputRef, styleGroup, placeholder = "Insert value", label, labelClassName, icon, isRequired, backgroundColor, ...rest }) {
+    return (jsxs("div", { className: clsx("input-group", classNameGroup), style: { backgroundColor: backgroundColor, ...styleGroup }, children: [jsxs("div", { className: "input__header", children: [label && jsx("label", { className: labelClassName, children: label }), error && error.is && (jsx("span", { className: "input__header--error", children: error.message }))] }), jsxs("div", { className: "input-subgroup", children: [icon?.element && icon.position === "left" && (jsx("div", { className: clsx("input__icon", "input__icon--left", icon.className), children: icon.element })), jsx("input", { ref: inputRef, required: isRequired, className: clsx("input", error.is ? "input--error" : "", icon?.position === "left" && "input--icon", inputClassName), placeholder: placeholder, ...rest }), icon?.element && icon.position !== "left" && (jsx("div", { className: clsx("input__icon", "input__icon--right", 
+                        // `input__icon--${icon.position || "right"}`,
+                        icon.className), children: icon.element }))] })] }));
+}
+
+function FormInput({ name, isRequired, error, defaultValue, ...rest }) {
+    const { control } = useFormContext();
+    return (jsx(Controller, { name: name, control: control, rules: {
+            ...(isRequired
+                ? {
+                    required: error?.message || "Field is required",
+                }
+                : {}),
+        }, render: ({ field, fieldState: { error } }) => {
+            return (jsx(Input, { isRequired: true, error: {
+                    is: !!error,
+                    message: error?.message,
+                }, defaultValue: defaultValue, ...field, ...rest }));
+        } }));
+}
+
+function TextArea({ buttonDisabled = false, className = "", disabled = true, error = {
+    is: false,
+    message: "",
+}, hasToggleButton = true, hideHeight = "5rem", label, labelClassName, isRequired, placeholder = "Insert value", showHeight = "10rem", backgroundColor, style = {}, textareaClassName = "", ...rest }) {
+    const ref = useRef();
+    const [isShow, setIsShow] = useState(false);
+    const handleClickToggle = () => {
+        if (ref && ref.current) {
+            if (isShow) {
+                ref.current.style.height = hideHeight;
+            }
+            else {
+                ref.current.style.height = showHeight; //(48 + ref.current.scrollHeight) + 'px';
+            }
+            setIsShow((prev) => !prev);
+        }
+    };
+    return (jsxs("div", { className: clsx("textarea", className), style: { backgroundColor: backgroundColor, ...style }, children: [jsxs("div", { className: "textarea__header", children: [label && jsx("label", { className: labelClassName, children: label }), error && error.is && (jsx("span", { className: "textarea__header--error", children: error.message }))] }), jsx("textarea", { ref: ref, className: clsx("textarea__input", error.is && "textarea__input--error", textareaClassName), style: {
+                    height: hasToggleButton ? hideHeight : showHeight,
+                }, placeholder: placeholder, disabled: disabled, required: isRequired, ...rest }), hasToggleButton && (jsx(Button, { type: "button", className: clsx("textarea__button", isShow && "textarea__button--show", error.is && "textarea__button--error"), onClick: handleClickToggle, disabled: buttonDisabled, children: jsx(TbArrowsDiagonal2, { size: "1.5rem" }) }))] }));
+}
+
+function FormTextArea({ name, isRequired, error, ...rest }) {
+    const { control } = useFormContext();
+    return (jsx(Controller, { name: name, control: control, rules: {
+            ...(isRequired
+                ? {
+                    required: error?.message || "Field is required",
+                }
+                : {}),
+        }, render: ({ field, fieldState: { error } }) => {
+            return (jsx(TextArea, { isRequired: true, error: {
+                    is: !!error,
+                    message: error?.message,
+                }, ...field, ...rest }));
+        } }));
+}
+
+function Select({ inputClassName = "", classNameGroup = "", options, styleGroup, defaultValue, setFormSelected, clearError, resetForm, onFormBlur, handleSelect, label, labelClassName, error, backgroundColor, isRequired, ...rest }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [value, setValue] = useState(defaultValue || (options && options[0]));
+    const [filteredOptions, setFilteredOptions] = useState(options);
+    const { name } = rest;
+    const handleOpen = () => {
+        setIsOpen(true);
+    };
+    const handleClose = () => {
+        setIsOpen(false);
+    };
+    const handleInputClose = () => {
+        if (onFormBlur) {
+            onFormBlur();
+        }
+        setIsOpen(false);
+    };
+    const handleToggle = () => {
+        setIsOpen((prev) => !prev);
+    };
+    const handleValueChange = (e) => {
+        const { value } = e.target;
+        const filtered = options?.filter((v) => v.includes(value));
+        setFilteredOptions(filtered);
+        setValue(value);
+    };
+    const handleSelectChange = (e) => {
+        const { name: value } = e.target;
+        if (setFormSelected) {
+            setFormSelected(name, value);
+            if (clearError) {
+                clearError(name);
+            }
+            if (resetForm) {
+                resetForm();
+            }
+        }
+        else {
+            setValue(value);
+        }
+        if (handleSelect) {
+            handleSelect(value);
+        }
+        handleClose();
+    };
+    return (jsxs("div", { className: clsx("select-group", classNameGroup), style: { backgroundColor: backgroundColor, ...styleGroup }, children: [jsx(Input, { inputClassName: clsx("select", {
+                    "select--focus": isOpen,
+                }, inputClassName), value: value, error: error, required: isRequired, placeholder: "Select a value", icon: {
+                    className: "select__arrow",
+                    element: (jsx(Button, { type: "button", size: "large", mode: "icon", className: clsx("select__arrow-button", {
+                            "select__arrow-button--open": isOpen,
+                        }), onClick: handleToggle, onBlur: handleClose, children: jsx(TfiAngleDown, { size: 24 }) })),
+                }, onFocus: handleOpen, onBlur: handleInputClose, onChange: handleValueChange, autoComplete: "off", label: label, labelClassName: labelClassName, ...rest }), isOpen && (jsx("div", { className: "select__box", children: filteredOptions.map((option, index) => (jsx(Button, { type: "button", mode: "secondary", className: "select__option", name: option, title: option, onMouseDown: handleSelectChange, children: option }, `index-${index}`))) }))] }));
+}
+
+function FormSelect({ name, isRequired, error, fieldsToReset, label, ...rest }) {
+    const { control, setValue, clearErrors, unregister, resetField } = useFormContext();
+    return (jsx(Controller, { name: name, control: control, rules: {
+            ...(isRequired
+                ? {
+                    required: error?.message || "Field is required",
+                }
+                : {}),
+        }, render: ({ field: { onBlur, ...restField }, fieldState: { error } }) => {
+            return (jsx(Select, { isRequired: true, label: label, error: {
+                    is: !!error,
+                    message: error?.message || "",
+                }, setFormSelected: setValue, resetForm: () => fieldsToReset &&
+                    fieldsToReset.map((field) => {
+                        setValue(field, undefined);
+                        unregister(field);
+                    }), clearError: clearErrors, onFormBlur: onBlur, ...restField, ...rest }));
+        } }));
+}
+
+var img = "data:image/gif;base64,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";
+
+function Loading({ img: img$1, children }) {
+    return (jsxs("div", { className: "loading", children: [jsx("img", { src: img$1 ?? img }), jsx("div", { className: "loading-message", children: children })] }));
+}
+
+function Modal({ className, modalref, children, title, subtitle, footer, hasOverlay = true, hasCloseButton = true, handleClose, ...rest }) {
+    return (jsxs(Fragment, { children: [hasOverlay && jsx("div", { className: "modal-overlay" }), jsxs("div", { ref: modalref, className: clsx("modal", className), ...rest, children: [hasCloseButton && (jsx(Button, { mode: "secondary", className: "modal__close", size: "small", onClick: handleClose, children: jsx(IoClose, {}) })), jsxs("div", { className: "modal__content", children: [title && (jsxs("div", { className: "modal__header", children: [jsx("h3", { children: title }), jsx("h6", { children: subtitle })] })), jsx("div", { className: "modal__children", children: children }), footer && jsx("div", { className: "modal__footer", children: footer })] })] })] }));
+}
+
+function usePositions(panelRef, initial) {
+    const [allPositions, setAllPositions] = useState(undefined);
+    const [pixelPosition, setPixelPosition] = useState(undefined);
+    const [thumbPosition, setThumbPosition] = useState(undefined);
+    // find positions of all values
+    useEffect(() => {
+        if (panelRef?.current) {
+            const current = panelRef.current;
+            if (current) {
+                const valuesRef = Array.from(current.getElementsByClassName("range__content"));
+                const parentBounds = current.getBoundingClientRect();
+                setAllPositions(valuesRef.map((values) => {
+                    const childBounds = values.getBoundingClientRect();
+                    return childBounds.right - parentBounds.x;
+                }));
+            }
+        }
+    }, []);
+    // initial position
+    useEffect(() => {
+        if (allPositions) {
+            setPixelPosition(`${allPositions[initial]}px`);
+            setThumbPosition(`${allPositions[initial] -
+                (allPositions[0] / 2 + getThumbBounds().width / 2)}px`);
+        }
+    }, [allPositions]);
+    return {
+        panelRef,
+        allPositions,
+        setAllPositions,
+        pixelPosition,
+        setPixelPosition,
+        thumbPosition,
+        setThumbPosition,
+    };
+}
+function getThumbBounds() {
+    const thumb = document.getElementsByClassName("range__thumb")[0];
+    return thumb.getBoundingClientRect();
+}
+function useTimer({ allPositions, indexPosition, handlePosition, handleOverContent, values, }) {
+    const timeoutRef = useRef(null);
+    const [isPlay, setIsPlay] = useState(false);
+    // timer
+    useEffect(() => {
+        resetTimeout();
+        if (isPlay) {
+            if (allPositions) {
+                timeoutRef.current = setTimeout(() => {
+                    const newThumbPosition = allPositions[indexPosition] +
+                        allPositions[0] / 2 -
+                        getThumbBounds().width / 2;
+                    handlePosition(allPositions[indexPosition + 1], newThumbPosition, indexPosition + 1, true);
+                    handleOverContent(values[indexPosition + 1]);
+                }, 500);
+                if (indexPosition === allPositions.length - 1) {
+                    setIsPlay(false);
+                }
+            }
+        }
+        return () => {
+            resetTimeout();
+        };
+    }, [isPlay, indexPosition]);
+    const resetTimeout = () => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+    };
+    const handlePlay = () => {
+        setIsPlay(!isPlay);
+    };
+    const handleStop = () => {
+        if (allPositions) {
+            handlePosition(allPositions[0], allPositions[0] / 2 - getThumbBounds().width / 2, 0, false);
+            setIsPlay(false);
+        }
+    };
+    return { isPlay, setIsPlay, handlePlay, handleStop };
+}
+function useThumb({ allPositions, panelRef, handlePosition, handleOverContent, values, }) {
+    // Add drag
+    const startDragging = (event) => {
+        if (allPositions && panelRef?.current) {
+            const current = panelRef.current;
+            const panelBounds = current?.getBoundingClientRect();
+            const x = event.pageX - panelBounds.left;
+            const absX = Math.abs(x);
+            if (x >= 0 && x <= allPositions[allPositions.length - 1]) {
+                const desiredPosition = allPositions.reduce((prev, curr) => Math.abs(prev - absX) < Math.abs(curr - absX) ? prev : curr);
+                const index = allPositions.indexOf(desiredPosition);
+                const newThumbPosition = index === 0
+                    ? allPositions[index] -
+                        allPositions[0] / 2 -
+                        getThumbBounds().width / 2
+                    : allPositions[index - 1] +
+                        allPositions[0] / 2 -
+                        getThumbBounds().width / 2;
+                handlePosition(desiredPosition, newThumbPosition, index, true);
+                handleOverContent(values[index]);
+            }
+        }
+    };
+    const stopDragging = () => {
+        window.removeEventListener("mousemove", startDragging, false);
+        window.removeEventListener("mouseup", stopDragging, false);
+    };
+    const handleDownThumb = () => {
+        window.addEventListener("mousemove", startDragging, false);
+        window.addEventListener("mouseup", stopDragging, false);
+    };
+    return { handleDownThumb };
+}
+
+const ThemeContext = createContext(undefined);
+function ThemeProvider({ children, dataTheme: dataThemeProp, dataPalette: dataPaletteProp = "water", }) {
+    const [dataTheme, setDataTheme] = useState();
+    const [dataPalette, setDataPalette] = useState();
+    useEffect(() => {
+        if (dataPaletteProp) {
+            switchDataPalette(dataPaletteProp);
+        }
+    }, [dataPaletteProp]);
+    useEffect(() => {
+        if (dataThemeProp) {
+            switchDataTheme(dataThemeProp);
+        }
+    }, [dataThemeProp]);
+    useEffect(() => {
+        if (window.matchMedia) {
+            if (localStorage.getItem("data-theme")) {
+                document.documentElement.setAttribute("data-theme", localStorage.getItem("data-theme"));
+                setDataTheme(localStorage.getItem("data-theme"));
+            }
+            else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+                document.documentElement.setAttribute("data-theme", "dark");
+                setDataTheme("dark");
+            }
+        }
+    }, []);
+    const switchDataTheme = (mode) => {
+        document.documentElement.setAttribute("data-theme", mode);
+        setDataTheme(mode);
+        localStorage.setItem("data-theme", mode);
+    };
+    const switchDataPalette = (mode) => {
+        document.documentElement.setAttribute("data-palette", mode);
+        setDataPalette(mode);
+        localStorage.setItem("palette-theme", mode);
+    };
+    return (jsx(ThemeContext.Provider, { value: { dataTheme, switchDataTheme, dataPalette, switchDataPalette }, children: children }));
+}
+function useTheme() {
+    const context = useContext(ThemeContext);
+    if (context === undefined) {
+        throw new Error("useTheme must be used within a ThemeProvider");
+    }
+    return context;
+}
+
+function RangeThumb({ thumbPosition, handleOverContent, handleDownThumb }) {
+    const { dataTheme } = useTheme();
+    return (jsx(Button, { mode: "icon", className: "range__thumb", size: "small", style: {
+            left: `${thumbPosition}`,
+        }, onMouseOver: () => handleOverContent(thumbPosition), onMouseDown: handleDownThumb, children: dataTheme === "dark" ? (jsx(RiMapPinTimeFill, { size: "1.5rem" })) : (jsx(RiMapPinTimeLine, { size: "1.5rem" })) }));
+}
+
+function RangeContent({ period, values, allPositions, handlePosition, handleOverContent, handleOutContent, over, }) {
+    const handleClickRange = (index) => {
+        if (allPositions) {
+            const newThumbPosition = index === 0
+                ? allPositions[index] -
+                    allPositions[0] / 2 -
+                    getThumbBounds().width / 2
+                : allPositions[index - 1] +
+                    allPositions[0] / 2 -
+                    getThumbBounds().width / 2;
+            handlePosition(allPositions[index], newThumbPosition, index, true);
+        }
+    };
+    return period
+        ? values.map((value, index) => (jsx("div", { className: "range__content range__content__period", onClick: () => handleClickRange(index), onMouseOver: () => handleOverContent(value), onMouseOut: () => handleOutContent(), children: index % period === 0 ? (jsxs(Fragment, { children: [jsx("div", { className: "range__tick range__tick__large" }), jsx("div", { className: clsx("range__value", "range__value__period", {
+                            "range__value--over": value === over,
+                        }), children: value })] })) : (jsxs(Fragment, { children: [jsx("div", { className: "range__tick range__tick__small" }), value === over && (jsx("div", { className: clsx("range__value", "range__value__period", {
+                            "range__value--over": value === over,
+                        }), children: value }))] })) })))
+        : values.map((value, index) => (jsxs("div", { className: "range__content", onClick: () => handleClickRange(index), children: [jsx("div", { className: "range__tick range__tick__large" }), jsx("div", { className: "range__value", children: value })] })));
+}
+
+function RangeControls({ indexPosition, isPlay, handlePlay, handleStop, }) {
+    return (jsxs(Fragment, { children: [jsx(Button, { mode: "icon", size: "small", className: "range__play", onClick: handlePlay, children: isPlay ? (jsx(IoPause, { color: "var(--color-primary-base)", size: "2rem" })) : (jsx(IoPlay, { color: "var(--color-primary-base)", size: "2rem" })) }), jsx(Button, { mode: "icon", size: "small", className: "range__play", disabled: !isPlay && indexPosition === 0, onClick: handleStop, children: jsx(IoStop, { color: "var(--color-primary-base)", size: "2rem" }) })] }));
+}
+
+function Range({ initial = 0, period, values, handleSelected }) {
+    const panelRef = useRef(null);
+    const [indexPosition, setIndexPosition] = useState(initial);
+    const [over, setOver] = useState(undefined);
+    const { allPositions, pixelPosition, setPixelPosition, thumbPosition, setThumbPosition, } = usePositions(panelRef, initial);
+    const handlePosition = (pixelPosition, thumbPosition, index, isHandleSelected = false) => {
+        setPixelPosition(`${pixelPosition}px`);
+        setThumbPosition(`${thumbPosition}px`);
+        setIndexPosition(index);
+        if (isHandleSelected && handleSelected) {
+            handleSelected({
+                value: values[index],
+                index,
+                position: pixelPosition,
+            });
+        }
+    };
+    const handleOverContent = (value) => {
+        setOver(value);
+    };
+    const handleOutContent = () => {
+        setOver(undefined);
+    };
+    const { isPlay, handlePlay, handleStop } = useTimer({
+        allPositions,
+        indexPosition,
+        handlePosition,
+        handleOverContent,
+        values,
+    });
+    const { handleDownThumb } = useThumb({
+        allPositions,
+        panelRef,
+        handlePosition,
+        handleOverContent,
+        values,
+    });
+    return (jsxs("div", { className: "range", children: [jsxs("div", { ref: panelRef, className: "range__panel", children: [jsx(RangeContent, { period: period, values: values, allPositions: allPositions, handlePosition: handlePosition, handleOverContent: handleOverContent, handleOutContent: handleOutContent, over: over }), jsx("div", { className: "range__track", style: {
+                            width: `${pixelPosition}`,
+                        } }), jsx(RangeThumb, { thumbPosition: thumbPosition, handleOverContent: handleOverContent, handleDownThumb: handleDownThumb })] }), jsx(RangeControls, { indexPosition: indexPosition, isPlay: isPlay, handlePlay: handlePlay, handleStop: handleStop })] }));
+}
+
+function Checkbox({ backgroundColor, classNameCheckbox = "", classNameGroup = "", classNameLabel, error = {
+    is: false,
+    message: "",
+}, 
+// icon,
+inputRef, isRequired, label, placeholder = "Insert value", styleGroup, ...rest }) {
+    return (jsxs("div", { className: clsx("input-group", classNameGroup), style: { backgroundColor: backgroundColor, ...styleGroup }, children: [jsxs("div", { className: "checkbox__header", children: [label && jsx("label", { className: classNameLabel, children: label }), error && error.is && (jsx("span", { className: "input__header--error", children: error.message }))] }), jsx("div", { className: "checkbox-subgroup", children: jsx("input", { ref: inputRef, type: "checkbox", required: isRequired, className: clsx("checkbox", error.is ? "checkbox--error" : "", classNameCheckbox), placeholder: placeholder, ...rest }) })] }));
+}
+
+const LoadingContext = createContext(undefined);
+function loadingReducer(state, action) {
+    switch (action.type) {
+        case "set_ref": {
+            return { ...state, ref: action.ref };
+        }
+        case "start_loading": {
+            return { ...state, isLoading: true };
+        }
+        case "stop_loading": {
+            return { ...state, isLoading: false };
+        }
+        case "set_message": {
+            return { ...state, message: action.message };
+        }
+        default: {
+            throw new Error(`Unhandled action type: ${action.type}`);
+        }
+    }
+}
+function LoadingProvider({ children }) {
+    const [{ isLoading, message, ref }, dispatch] = useReducer(loadingReducer, {
+        isLoading: false,
+        message: "Loading",
+        ref: undefined,
+    });
+    const setRef = (ref) => {
+        dispatch({ type: "set_ref", ref });
+    };
+    const setMessage = (message) => {
+        dispatch({ type: "set_message", message });
+    };
+    const startLoading = () => {
+        dispatch({ type: "start_loading" });
+    };
+    const stopLoading = () => {
+        dispatch({ type: "stop_loading" });
+    };
+    return (jsxs(LoadingContext.Provider, { value: {
+            state: { ref, message, isLoading },
+            setMessage,
+            setRef,
+            startLoading,
+            stopLoading,
+        }, children: [!ref && jsx(Loading, { children: message }), children] }));
+}
+function useLoading({ ref, message } = {}) {
+    const context = useContext(LoadingContext);
+    // only happens if there is an initial mode value.
+    useEffect(() => {
+        ref && context?.setRef(ref);
+        message && context?.setMessage(message);
+    }, []);
+    if (context === undefined) {
+        throw new Error("useLoading must be used within a LoadingProvider");
+    }
+    return context;
+}
+
+const ModalContext = createContext(undefined);
+function modalReducer(state, action) {
+    switch (action.type) {
+        case "open_modal": {
+            return { ...state, ...action.modal, isModal: true };
+        }
+        case "close_modal": {
+            return { ...state, isModal: false };
+        }
+        default: {
+            throw new Error(`Unhandled action type: ${action.type}`);
+        }
+    }
+}
+const defaultState = {
+    subtitle: undefined,
+    title: undefined,
+    content: undefined,
+    hasCloseButton: true,
+    hasOverlay: true,
+    footer: undefined,
+    isCustom: false,
+    customRef: undefined,
+    hasWindowClose: true
+};
+function ModalProvider({ children }) {
+    const ref = useRef(null);
+    const [state, dispatch] = useReducer(modalReducer, {
+        isModal: false,
+        ...defaultState,
+    });
+    const openModal = (modal) => {
+        dispatch({ type: "open_modal", modal });
+    };
+    const closeModal = () => {
+        dispatch({ type: "close_modal" });
+    };
+    useEffect(() => {
+        if (state.isModal && state.hasWindowClose) {
+            const listener = (e) => {
+                if (state.isModal &&
+                    ref.current &&
+                    !ref.current.contains(e.target)) {
+                    closeModal();
+                }
+                if (state.isModal &&
+                    state.customRef &&
+                    state.customRef.current &&
+                    !state.customRef.current.contains(e.target)) {
+                    closeModal();
+                }
+            };
+            document.addEventListener("mousedown", listener);
+            return () => {
+                document.removeEventListener("mousedown", listener);
+            };
+        }
+    }, [closeModal]);
+    return (jsxs(ModalContext.Provider, { value: {
+            state,
+            openModal,
+            closeModal,
+        }, children: [children, state.isModal && !state.isCustom && (jsx(Modal, { modalref: ref, title: state.title, footer: state.footer, handleClose: closeModal, subtitle: state.subtitle, hasCloseButton: state.hasCloseButton, hasOverlay: state.hasOverlay, children: state.content }))] }));
+}
+function useModal({} = {}) {
+    const context = useContext(ModalContext);
+    if (context === undefined) {
+        throw new Error("useModal must be used within a ModalProvider");
+    }
+    return context;
+}
+
+export { Button, Checkbox, Form, FormInput, FormSelect, FormTextArea, Input, Loading, LoadingContext, LoadingProvider, Menu, Modal, ModalContext, ModalProvider, Range, Select, TextArea, ThemeContext, ThemeProvider, useLoading, useModal, useTheme };
+//# sourceMappingURL=index.js.map