josenanodev-react-components-library 1.0.2 → 1.0.4

package/dist/esm/components/ScrollSnapGallery/ScrollSnapGallery.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { IconType } from "react-icons/lib";
+type ScrollSnapGalleryProps = {
+    urls: string[];
+    width?: string;
+    height?: string;
+    IndicatorIcon?: IconType;
+    positionIndicatorSize?: number;
+    iconSize?: number;
+    showArrows?: boolean;
+    frameStyle?: React.CSSProperties;
+};
+declare const ScrollSnapGallery: ({ urls, width, height, IndicatorIcon, positionIndicatorSize, iconSize, showArrows, frameStyle, }: ScrollSnapGalleryProps) => React.JSX.Element;
+export default ScrollSnapGallery;

package/dist/esm/components/ScrollSnapGallery/ScrollSnapGallery.js

@@ -0,0 +1,70 @@
+import React, { useState, useEffect } from "react";
+import styles from "./ScrollSnapGallery.module.scss";
+//Icons
+import { GoDotFill } from "react-icons/go";
+import { BsArrowLeftCircle, BsArrowRightCircle } from "react-icons/bs";
+const ScrollSnapGallery = ({ urls = [], width = "400px", height = "300px", IndicatorIcon = GoDotFill, positionIndicatorSize = Math.min(urls.length, 6), iconSize = 16, showArrows = false, frameStyle = {}, }) => {
+    const [currentSlide, setCurrentSlide] = useState(0);
+    const [minimumVisibleIndicator, setMinimumVisibleIndicator] = useState(0);
+    const [maximumVisibleIndicator, setMaximumVisibleIndicator] = useState(positionIndicatorSize - 1);
+    const [positionIndicatorXtranslateValue, setPositionIndicatorXtranslateValue] = useState(0);
+    const indicatorIconStyle = (index) => {
+        let className = styles["indicator-icon"];
+        if (currentSlide === index) {
+            className += ` ${styles["current"]}`;
+        }
+        const isMinimumNotFirst = minimumVisibleIndicator !== 0 && index === minimumVisibleIndicator;
+        const isMaximumNotLast = maximumVisibleIndicator !== urls.length - 1 && index === maximumVisibleIndicator;
+        if (isMinimumNotFirst || isMaximumNotLast) {
+            className += ` ${styles["full-shrunken"]}`;
+        }
+        const isOneAfterMinimumNotSecond = minimumVisibleIndicator !== 0 && index === minimumVisibleIndicator + 1;
+        const isOneBeforeMaximumNotSecond = maximumVisibleIndicator !== urls.length - 1 &&
+            index === maximumVisibleIndicator - 1;
+        if (isOneAfterMinimumNotSecond || isOneBeforeMaximumNotSecond) {
+            className += ` ${styles["medium-shrunken"]}`;
+        }
+        if (index < minimumVisibleIndicator || index > maximumVisibleIndicator) {
+            className += ` ${styles["hidden"]}`;
+        }
+        return className;
+    };
+    const handleScroll = (event) => {
+        const { scrollLeft, clientWidth } = event.target;
+        const slideWidth = clientWidth;
+        const slideIndex = Math.round(scrollLeft / slideWidth);
+        setCurrentSlide(slideIndex);
+        if (slideIndex <= minimumVisibleIndicator) {
+            const minumum = Math.max(slideIndex - 1, 0);
+            const maximum = minumum + positionIndicatorSize - 1;
+            setMinimumVisibleIndicator(minumum);
+            setMaximumVisibleIndicator(maximum);
+        }
+        else if (slideIndex >= maximumVisibleIndicator) {
+            const maximum = Math.min(slideIndex + 1, urls.length - 1);
+            const minumum = maximum - positionIndicatorSize + 1;
+            setMaximumVisibleIndicator(maximum);
+            setMinimumVisibleIndicator(minumum);
+        }
+    };
+    useEffect(() => {
+        setPositionIndicatorXtranslateValue(minimumVisibleIndicator * iconSize);
+    }, [minimumVisibleIndicator]);
+    return (React.createElement("section", { className: styles["scroll-snap-gallery"] },
+        React.createElement("div", { className: styles["frame"], style: Object.assign(Object.assign({}, frameStyle), { width, height }), onScroll: handleScroll }, urls.map((url, index) => {
+            return React.createElement("img", { key: url + index, src: url, alt: "gallery item" });
+        })),
+        React.createElement("div", { className: styles["arrow-controls"] },
+            showArrows && (React.createElement(BsArrowLeftCircle, { className: styles["arrow"], onClick: () => {
+                    const frame = document.querySelector(`.${styles["frame"]}`);
+                    frame.scrollLeft -= frame.clientWidth;
+                } })),
+            React.createElement("div", { className: styles["position-indicator"], style: {
+                    transform: `translateX(calc(50% - ${positionIndicatorXtranslateValue}px - ${(iconSize * positionIndicatorSize) / 2}px))`,
+                } }, urls.map((url, index) => (React.createElement(IndicatorIcon, { key: url + index, className: indicatorIconStyle(index), style: { width: iconSize, height: iconSize } })))),
+            showArrows && (React.createElement(BsArrowRightCircle, { className: styles["arrow"], onClick: () => {
+                    const frame = document.querySelector(`.${styles["frame"]}`);
+                    frame.scrollLeft += frame.clientWidth;
+                } })))));
+};
+export default ScrollSnapGallery;

package/dist/esm/components/ScrollSnapGallery/ScrollSnapGallery.module.scss

@@ -0,0 +1,67 @@
+.scroll-snap-gallery {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  .frame {
+    display: flex;
+    align-items: center;
+    scroll-snap-type: x mandatory;
+    scroll-snap-stop: always;
+    scroll-behavior: smooth;
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    user-select: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    img {
+      scroll-snap-align: center;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+  .arrow-controls {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 10px;
+    .arrow {
+      width: 24px;
+      height: 24px;
+      fill: #959595;
+      transition: all 100ms ease-in-out;
+      z-index: 2;
+      cursor: pointer;
+      &:active {
+        fill: #0d280b;
+      }
+    }
+    .position-indicator {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      transition: all 0.3s ease-in-out;
+      .indicator-icon {
+        fill: #959595;
+        transition: all 0.3s ease-in-out;
+        &.current {
+          fill: #0d280b;
+        }
+        &.medium-shrunken {
+          transform: scale(0.75);
+        }
+        &.full-shrunken {
+          transform: scale(0.5);
+        }
+        &.hidden {
+          transform: scale(0);
+        }
+      }
+    }
+  }
+}

package/dist/esm/components/SearchBar/SearchBar.css

@@ -0,0 +1,35 @@
+.trc-search-bar .div-search-bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgb(185, 185, 185);
+  box-sizing: border-box;
+  margin: 2px 10px;
+  padding: 5px 0px;
+  border-radius: 6px;
+}
+
+.trc-search-bar .div-search-bar input {
+  width: 100%;
+  border: none;
+}
+
+.trc-search-bar .div-search-bar input:focus {
+  border: none;
+  outline: none;
+}
+
+.trc-search-bar .div-search-bar svg {
+  width: 36px;
+  padding: 0px 10px;
+}
+
+.trc-search-bar .div-search-bar .icono-search-bar-opciones {
+  cursor: pointer;
+  transition: all 0.5s;
+}
+
+.trc-search-bar .div-search-bar .icono-search-bar-opciones.icono-search-bar-opciones-desactivado {
+  cursor: not-allowed;
+  color: rgb(184, 184, 184);
+}

package/dist/esm/components/SearchBar/SearchBar.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import "./SearchBar.css";
+import { SearchBarPropsType } from "./types";
+declare const SearchBar: ({ actionOnEnter, actionOnAlteringText, actionOnEmptyText, optionsButtonVisible, actionOnClickOptionsButton, placeholder, initialValue, disabled, }: SearchBarPropsType) => React.JSX.Element;
+export default SearchBar;

package/dist/esm/components/SearchBar/SearchBar.js

@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+import "./SearchBar.css";
+//Icons
+import { BsSearch, BsSliders } from "react-icons/bs";
+const SearchBar = ({ actionOnEnter = () => { }, actionOnAlteringText = () => { }, actionOnEmptyText = () => { }, optionsButtonVisible, actionOnClickOptionsButton = () => { }, placeholder = "", initialValue = "", disabled = false, }) => {
+    //Estados
+    const [searchValue, setSearchValue] = useState(initialValue);
+    return (React.createElement("form", { className: "trc-search-bar", onSubmit: (e) => {
+            e.preventDefault();
+            let searchElement = e.target.elements.namedItem("search-bar-name");
+            if (searchElement !== null)
+                actionOnEnter(searchElement.value);
+        } },
+        React.createElement("div", { className: "div-search-bar" },
+            React.createElement("div", null,
+                React.createElement(BsSearch, null)),
+            React.createElement("input", { name: "search-bar-name", type: "text", placeholder: placeholder, disabled: disabled, onChange: (e) => {
+                    setSearchValue(e.target.value);
+                    if (e.target.value)
+                        actionOnAlteringText();
+                    if (!e.target.value)
+                        actionOnEmptyText();
+                }, value: searchValue }),
+            optionsButtonVisible && (React.createElement("div", { className: disabled
+                    ? "icono-search-bar-opciones icono-search-bar-opciones-disabled"
+                    : "icono-search-bar-opciones", onClick: () => actionOnClickOptionsButton() },
+                React.createElement(BsSliders, null))))));
+};
+export default SearchBar;

package/dist/esm/components/SearchBar/types.d.ts

@@ -0,0 +1,10 @@
+export interface SearchBarPropsType {
+  actionOnEnter?: function;
+  actionOnAlteringText?: function;
+  actionOnEmptyText?: function;
+  optionsButtonVisible: boolean;
+  actionOnClickOptionsButton?: function;
+  placeholder: string;
+  initialValue?: string;
+  disabled?: boolean;
+}

package/dist/esm/components/SideBar/SideBar.css

@@ -0,0 +1,53 @@
+.trc-side-bar {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  z-index: 2;
+  background-color: rgb(253, 253, 253);
+  box-shadow: 0px 0px 15px 0px rgb(206 206 206);
+  transition: all 0.5s ease-in-out;
+  animation: fade-in-side-bar 1s ease-in;
+}
+
+.trc-side-bar .sidebar-close-button {
+  position: absolute;
+  top: 3px;
+  z-index: 2;
+  height: 30px;
+  width: 30px;
+  background-color: rgba(247, 247, 247, 0.7);
+  border-radius: 20px;
+  border: none;
+  outline: none;
+  transition: all 0.3s;
+  color: dimgray;
+  font-size: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.trc-side-bar .sidebar-close-button:hover {
+  color: var(--primary-color);
+  background-color: rgba(236, 236, 236, 0.7);
+}
+
+.trc-side-bar .sidebar-close-button svg.open{
+  transform: rotate(0deg);
+  transition: all 0.5s;
+}
+
+.trc-side-bar .sidebar-close-button svg.close{
+  transform: rotate(180deg);
+  transition: all 0.5s;
+}
+
+@keyframes fade-in-side-bar {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/dist/esm/components/SideBar/SideBar.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import "./SideBar.css";
+import { SideBarPropsType } from "./types";
+/**
+ * NOTE: Parent Node must have position: relative, to work correctly with the side bar
+ */
+declare const SideBar: ({ side, open, children, closeAction, outBoundClickClosesSideBar, aditionalInlineStyle, }: SideBarPropsType) => React.JSX.Element;
+export default SideBar;

package/dist/esm/components/SideBar/SideBar.js

@@ -0,0 +1,42 @@
+import React, { useRef, useState } from "react";
+import "./SideBar.css";
+//Hooks
+import useOutsideClick from "../../hooks/useOutsideClick";
+import useResizeObserver from "../../hooks/useResizeObserver";
+//Icons
+import { BsChevronLeft, BsChevronRight } from "react-icons/bs";
+/**
+ * NOTE: Parent Node must have position: relative, to work correctly with the side bar
+ */
+const SideBar = ({ side, open = false, children, closeAction, outBoundClickClosesSideBar, aditionalInlineStyle = {}, }) => {
+    //Refs
+    const sideBarRef = useRef(null);
+    //Hooks
+    const [elementWidth] = useResizeObserver(sideBarRef);
+    useOutsideClick(sideBarRef, () => {
+        if (outBoundClickClosesSideBar)
+            if (closeAction) {
+                closeAction();
+            }
+            else {
+                setOpenState(false);
+            }
+    });
+    //useState
+    const [openState, setOpenState] = useState(open);
+    return (React.createElement("div", { ref: sideBarRef, className: "trc-side-bar", style: Object.assign({ [side === "left" ? "right" : "left"]: (closeAction && open) || (!closeAction && openState)
+                ? `calc(100% - ${elementWidth}px)`
+                : closeAction
+                    ? "100%"
+                    : `calc(100% - 30px)` }, aditionalInlineStyle) },
+        React.createElement("button", { style: side === "left" ? { right: 0 } : { left: 0 }, className: "sidebar-close-button", onClick: () => {
+                if (closeAction) {
+                    closeAction();
+                }
+                else {
+                    setOpenState(!openState);
+                }
+            } }, side === "left" ? (React.createElement(BsChevronLeft, { className: (closeAction && open) || (!closeAction && openState) ? "open" : "close" })) : (React.createElement(BsChevronRight, { className: (closeAction && open) || (!closeAction && openState) ? "open" : "close" }))),
+        children));
+};
+export default SideBar;

package/dist/esm/components/SideBar/types.d.ts

@@ -0,0 +1,8 @@
+export interface SideBarPropsType {
+  side: "left" | "right";
+  children: JSX.Element | JSX.Element[];
+  open: boolean;
+  closeAction?: Function;
+  outBoundClickClosesSideBar?: boolean;
+  aditionalInlineStyle?: React.CSSProperties;
+}

package/dist/esm/components/Slider/Slider.css

@@ -0,0 +1,55 @@
+.trc-slider {
+  display: flex;
+  align-items: center;
+}
+
+.trc-slider.disabled{
+  opacity: 0.7;
+}
+
+.trc-slider .left-fill {
+  border: 2px solid rgb(216, 216, 216);
+  background-color: var(--secondary-color);
+}
+
+.trc-slider .right-fill {
+  border: 2px solid rgb(216, 216, 216);
+  background-color: rgb(211, 211, 211);
+}
+
+.trc-slider .sphere {
+  border-radius: 100%;
+  box-shadow: 0px 0px 20px 2px #a7a7a7;
+  background-color: rgb(255, 255, 255);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: grab;
+  z-index: 2;
+}
+
+.trc-slider .sphere p {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 600;
+  color: #757575;
+  width: 25%;
+}
+
+.trc-slider .sphere input {
+  width: 70%;
+  border: none;
+  background-color: transparent;
+  text-align: right;
+  font-size: 12px;
+  font-weight: 600;
+  color: #757575;
+}
+
+.trc-slider .sphere input::-webkit-inner-spin-button {
+  display: none;
+}
+
+.trc-slider .sphere input:focus {
+  outline: none;
+}

package/dist/esm/components/Slider/Slider.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import "./Slider.css";
+import { SliderPropsType } from "./types";
+declare const Slider: ({ minimumValue, maximumValue, onChange, initialValue, value, showValueInsideButton, editableValueInsideButton, height, width, sufix, prefix, disabled, }: SliderPropsType) => React.JSX.Element;
+export default Slider;

package/dist/esm/components/Slider/Slider.js

@@ -0,0 +1,148 @@
+import React, { useState, useRef, useEffect, Fragment } from "react";
+import * as ownFunctions from "./SliderOwnFunctions";
+import "./Slider.css";
+const Slider = ({ minimumValue, maximumValue, onChange, initialValue = 0, value, showValueInsideButton, editableValueInsideButton, height = 40, width = 300, sufix, prefix, disabled, }) => {
+    //Refs
+    const sliderRef = useRef(null);
+    //Estados
+    const [position, setPosition] = useState(initialValue !== undefined
+        ? ownFunctions.definePostionByValue(initialValue, width, maximumValue, minimumValue)
+        : width / 2);
+    const [visibleValue, setVisibleValue] = useState(initialValue);
+    const [temporalVisibleValue, setTemporalVisibleValue] = useState(undefined);
+    const [cancelTransition, setCancelTransition] = useState(false);
+    useEffect(() => {
+        if (value !== undefined) {
+            setVisibleValue(value);
+            setPosition(ownFunctions.definePostionByValue(value, width, maximumValue, minimumValue));
+        }
+    }, [value, width, maximumValue, minimumValue]);
+    return (React.createElement("div", { ref: sliderRef, style: { width: width, height: height }, className: `trc-slider ${disabled ? "disabled" : ""}`, onMouseDown: (event1) => {
+            if (!disabled) {
+                var nuevovisibleValue;
+                if (sliderRef.current !== null && sliderRef.current !== undefined) {
+                    setCancelTransition(false);
+                    const newPosition = event1.clientX - sliderRef.current.getBoundingClientRect().x;
+                    setPosition(newPosition);
+                    nuevovisibleValue = ownFunctions.defineVisibleValue(newPosition, width, maximumValue, minimumValue);
+                    setVisibleValue(nuevovisibleValue);
+                }
+                function repositioning(event2) {
+                    setCancelTransition(true);
+                    if (sliderRef.current !== null && sliderRef.current !== undefined) {
+                        setTemporalVisibleValue(undefined);
+                        let newPosition = event2.clientX - sliderRef.current.getBoundingClientRect().x;
+                        if (newPosition < 0)
+                            newPosition = 0;
+                        if (newPosition > width)
+                            newPosition = width;
+                        setPosition(newPosition);
+                        nuevovisibleValue = ownFunctions.defineVisibleValue(newPosition, width, maximumValue, minimumValue);
+                        setVisibleValue(nuevovisibleValue);
+                    }
+                }
+                document.addEventListener("mousemove", repositioning);
+                function removeEventListeners() {
+                    document.removeEventListener("mousemove", repositioning);
+                    document.removeEventListener("mouseup", removeEventListeners);
+                    setCancelTransition(false);
+                    onChange(nuevovisibleValue);
+                }
+                document.addEventListener("mouseup", removeEventListeners);
+            }
+        }, onTouchStart: (event1) => {
+            if (!disabled) {
+                var nuevovisibleValue;
+                if (sliderRef.current !== null && sliderRef.current !== undefined) {
+                    setCancelTransition(false);
+                    const newPosition = event1.touches[0].clientX - sliderRef.current.getBoundingClientRect().x;
+                    setPosition(newPosition);
+                    nuevovisibleValue = ownFunctions.defineVisibleValue(newPosition, width, maximumValue, minimumValue);
+                    setVisibleValue(nuevovisibleValue);
+                }
+                function repositioning(event2) {
+                    setCancelTransition(true);
+                    if (sliderRef.current !== null && sliderRef.current !== undefined) {
+                        setTemporalVisibleValue(undefined);
+                        let newPosition = event2.touches[0].clientX - sliderRef.current.getBoundingClientRect().x;
+                        if (newPosition < 0)
+                            newPosition = 0;
+                        if (newPosition > width)
+                            newPosition = width;
+                        setPosition(newPosition);
+                        nuevovisibleValue = ownFunctions.defineVisibleValue(newPosition, width, maximumValue, minimumValue);
+                        setVisibleValue(nuevovisibleValue);
+                    }
+                }
+                document.addEventListener("touchmove", repositioning);
+                function removeEventListeners() {
+                    document.removeEventListener("touchmove", repositioning);
+                    document.removeEventListener("touchend", removeEventListeners);
+                    setCancelTransition(false);
+                    onChange(nuevovisibleValue);
+                }
+                document.addEventListener("touchend", removeEventListeners);
+            }
+        } },
+        React.createElement("div", { style: {
+                width: position,
+                height: height * 0.8,
+                borderTopLeftRadius: (height * 0.8) / 2,
+                borderBottomLeftRadius: (height * 0.8) / 2,
+                marginRight: -height / 2,
+                transition: cancelTransition ? "none" : "all 0.3s",
+            }, className: "left-fill" }),
+        React.createElement("div", { style: { width: height, height: height }, className: "sphere" }, showValueInsideButton && (React.createElement(Fragment, null,
+            prefix !== undefined && React.createElement("p", null, prefix),
+            React.createElement("input", { disabled: !editableValueInsideButton || disabled, type: "number", min: minimumValue, max: maximumValue, value: temporalVisibleValue !== undefined ? temporalVisibleValue : visibleValue, onChange: (event) => {
+                    setTemporalVisibleValue(Number(event.target.value));
+                }, onFocus: () => {
+                    setTemporalVisibleValue(visibleValue);
+                }, onKeyDown: (event) => {
+                    if (!disabled) {
+                        if (event.key === "Enter" && temporalVisibleValue !== undefined) {
+                            let nuevovalue = temporalVisibleValue;
+                            if (nuevovalue < minimumValue)
+                                nuevovalue = minimumValue;
+                            if (nuevovalue > maximumValue)
+                                nuevovalue = maximumValue;
+                            const newPosition = ownFunctions.definePostionByValue(nuevovalue, width, maximumValue, minimumValue);
+                            setPosition(newPosition);
+                            const nuevovisibleValue = ownFunctions.defineVisibleValue(newPosition, width, maximumValue, minimumValue);
+                            setVisibleValue(nuevovisibleValue);
+                            onChange(nuevovisibleValue);
+                            setTemporalVisibleValue(undefined);
+                        }
+                        if (event.key === "Escape") {
+                            setPosition(ownFunctions.definePostionByValue(visibleValue, width, maximumValue, minimumValue));
+                            setTemporalVisibleValue(undefined);
+                        }
+                    }
+                }, onBlur: () => {
+                    if (!disabled) {
+                        if (temporalVisibleValue !== undefined) {
+                            let nuevovalue = temporalVisibleValue;
+                            if (nuevovalue < minimumValue)
+                                nuevovalue = minimumValue;
+                            if (nuevovalue > maximumValue)
+                                nuevovalue = maximumValue;
+                            const newPosition = ownFunctions.definePostionByValue(nuevovalue, width, maximumValue, minimumValue);
+                            setPosition(newPosition);
+                            const nuevovisibleValue = ownFunctions.defineVisibleValue(newPosition, width, maximumValue, minimumValue);
+                            setVisibleValue(nuevovisibleValue);
+                            onChange(nuevovisibleValue);
+                            setTemporalVisibleValue(undefined);
+                        }
+                    }
+                } }),
+            sufix !== undefined && React.createElement("p", null, sufix)))),
+        React.createElement("div", { style: {
+                width: width - position,
+                height: height * 0.8,
+                borderTopRightRadius: (height * 0.8) / 2,
+                borderBottomRightRadius: (height * 0.8) / 2,
+                marginLeft: -height / 2,
+                transition: cancelTransition ? "none" : "all 0.3s",
+            }, className: "right-fill" })));
+};
+export default Slider;

package/dist/esm/components/Slider/SliderOwnFunctions.d.ts

@@ -0,0 +1,2 @@
+export declare function defineVisibleValue(posicion: number, ancho: number, valorMaximo: number, valorMinimo: number): number;
+export declare function definePostionByValue(nuevoValor: number, ancho: number, valorMaximo: number, valorMinimo: number): number;

package/dist/esm/components/Slider/SliderOwnFunctions.js

@@ -0,0 +1,6 @@
+export function defineVisibleValue(posicion, ancho, valorMaximo, valorMinimo) {
+    return Math.round((posicion / (ancho)) * (valorMaximo - valorMinimo) + valorMinimo);
+}
+export function definePostionByValue(nuevoValor, ancho, valorMaximo, valorMinimo) {
+    return ((nuevoValor - valorMinimo) / (valorMaximo - valorMinimo)) * (ancho);
+}

package/dist/esm/components/Slider/types.d.ts

@@ -0,0 +1,14 @@
+export interface SliderPropsType {
+  minimumValue: number;
+  maximumValue: number;
+  onChange: (newValue: number) => void;
+  initialValue?: number;
+  value?: number;
+  showValueInsideButton?: boolean;
+  editableValueInsideButton?: boolean;
+  height?: number;
+  width?: number;
+  sufix?: string;
+  prefix?: string;
+  disabled?: boolean;
+}

package/dist/esm/hooks/useIntersectionObserver.d.ts

@@ -0,0 +1,9 @@
+import { RefObject } from "react";
+/**
+ * Hook to observe an element's intersection
+ * @param ref ref to the element to observe
+ * @param options intersection observer options
+ * @returns a boolean indicating if the element is intersecting
+ */
+declare function useIntersectionObserver(ref: RefObject<Element>, options?: IntersectionObserverInit | undefined): boolean;
+export default useIntersectionObserver;

package/dist/esm/hooks/useIntersectionObserver.js

@@ -0,0 +1,26 @@
+import { useEffect, useState, useRef } from "react";
+/**
+ * Hook to observe an element's intersection
+ * @param ref ref to the element to observe
+ * @param options intersection observer options
+ * @returns a boolean indicating if the element is intersecting
+ */
+function useIntersectionObserver(ref, options) {
+    const [isIntersecting, setIsIntersecting] = useState(false);
+    const observer = useRef(null);
+    useEffect(() => {
+        if (observer.current)
+            observer.current.disconnect();
+        observer.current = new IntersectionObserver(([entry]) => {
+            setIsIntersecting(entry.isIntersecting);
+        }, options);
+        if (ref.current)
+            observer.current.observe(ref.current);
+        return () => {
+            if (observer.current)
+                observer.current.disconnect();
+        };
+    }, [ref, options]);
+    return isIntersecting;
+}
+export default useIntersectionObserver;

package/dist/esm/hooks/useOutsideClick.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function useOutsideClick(elementRef: React.MutableRefObject<HTMLElement | null>, onOutsideClickAction: Function, elementsRefsExceptions?: React.MutableRefObject<HTMLElement | null>[]): void;
+export default useOutsideClick;

package/dist/esm/hooks/useOutsideClick.js

@@ -0,0 +1,17 @@
+import { useEffect } from "react";
+function useOutsideClick(elementRef, onOutsideClickAction, elementsRefsExceptions = []) {
+    useEffect(() => {
+        function handleClickOutside(event) {
+            if (elementRef.current &&
+                !elementRef.current.contains(event.target) &&
+                elementsRefsExceptions.every((elementRefException) => elementRefException.current !== event.target)) {
+                onOutsideClickAction();
+            }
+        }
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [elementRef, onOutsideClickAction, elementsRefsExceptions]);
+}
+export default useOutsideClick;

package/dist/esm/hooks/useResizeObserver.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+/**
+ * @returns Array [elementWidth, elementHeight], that represent the current
+ * values of width and height of elementRef
+ */
+declare function useResizeObserver(elementRef: React.MutableRefObject<HTMLElement | null>): number[];
+export default useResizeObserver;