josenanodev-react-components-library 1.0.3 → 1.0.4

package/dist/cjs/components/PopUp/types.d.ts

@@ -0,0 +1,9 @@
+export interface PopUpPropsType {
+  children: JSX.Element | JSX.Element[];
+  open: boolean;
+  closeAction?: Function;
+  outBoundClickClosesPopUp?: boolean;
+  aditionalInlineStyle?: React.CSSProperties;
+  aditionalClass?: string;
+  activationButtonRef?: React.MutableRefObject<HTMLElement | null>;
+}

package/dist/cjs/components/ProgressBar/ProgressBar.css

@@ -0,0 +1,39 @@
+.trc-progress-bar {
+  height: 40px;
+  width: 100%;
+  position: relative;
+  opacity: 0.9;
+  backdrop-filter: blur(10px);
+}
+
+.trc-progress-bar .fillable-body {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  background-color: dimgray;
+  border-radius: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  overflow: hidden;
+}
+
+.trc-progress-bar .fillable-body .filler {
+  height: 100%;
+  box-sizing: border-box;
+  transition: all 0.2s;
+  border-radius: 100px;
+}
+
+.trc-progress-bar .fillable-body p {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: 600;
+  color: white;
+}

package/dist/cjs/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import "./ProgressBar.css";
+import { ProgressBarPropsType } from "./types";
+declare const ProgressBar: ({ totalSize, currentValue, color, }: ProgressBarPropsType) => React.JSX.Element;
+export default ProgressBar;

package/dist/cjs/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,56 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+require("./ProgressBar.css");
+const ProgressBar = ({ totalSize, currentValue, color = "var(--secondary-color)", }) => {
+    var _a;
+    //useRef
+    const fillableBodyRef = (0, react_1.useRef)(null);
+    //useStates
+    const [currentPercentage, setCurrentPercentage] = (0, react_1.useState)(totalSize !== 0 ? currentValue / totalSize : 0);
+    const [barWidth, setBarWidth] = (0, react_1.useState)(0);
+    //useEffects
+    (0, react_1.useEffect)(() => {
+        if (totalSize !== 0) {
+            setCurrentPercentage(currentValue / totalSize);
+        }
+        else {
+            setCurrentPercentage(0);
+        }
+    }, [totalSize, currentValue]);
+    (0, react_1.useEffect)(() => {
+        if (fillableBodyRef.current !== null) {
+            setBarWidth(fillableBodyRef.current.clientWidth);
+        }
+    }, [(_a = fillableBodyRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight]);
+    return (react_1.default.createElement("div", { className: "trc-progress-bar" },
+        react_1.default.createElement("div", { ref: fillableBodyRef, className: "fillable-body" },
+            react_1.default.createElement("div", { className: "filler", style: { width: barWidth * currentPercentage, backgroundColor: color } }),
+            react_1.default.createElement("p", null,
+                (currentPercentage * 100).toFixed(0),
+                "%"))));
+};
+exports.default = ProgressBar;

package/dist/cjs/components/ProgressBar/types.d.ts

@@ -0,0 +1,7 @@
+import { languageType } from "../../../assets/languages/types";
+
+export interface ProgressBarPropsType {
+  totalSize: number;
+  currentValue: number;
+  color?: string,
+}

package/dist/cjs/components/ScreenSteps/ScreenSteps.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+type Step = {
+    component: React.ReactNode;
+    innerText: string;
+    outterText?: string;
+};
+type ScreenStepsProps = {
+    steps: Step[];
+    defaultStep?: number;
+    onStepChange?: (step: number) => void;
+    overrideStep?: number;
+};
+declare const ScreenSteps: ({ steps, defaultStep, onStepChange, overrideStep, }: ScreenStepsProps) => React.JSX.Element;
+export default ScreenSteps;

package/dist/cjs/components/ScreenSteps/ScreenSteps.js

@@ -0,0 +1,66 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const ScreenSteps_module_scss_1 = __importDefault(require("./ScreenSteps.module.scss"));
+const ScreenSteps = ({ steps, defaultStep = 0, onStepChange = () => { }, overrideStep, }) => {
+    const [currentStep, setCurrentStep] = (0, react_1.useState)(defaultStep);
+    const stepClassName = (index) => {
+        let className = ScreenSteps_module_scss_1.default["step"];
+        const isCompleted = index < currentStep;
+        if (isCompleted) {
+            className += ` ${ScreenSteps_module_scss_1.default["completed"]}`;
+        }
+        const isCurrent = index === currentStep;
+        if (isCurrent) {
+            className += ` ${ScreenSteps_module_scss_1.default["current"]}`;
+        }
+        return className;
+    };
+    const stepContentStyle = () => {
+        const translatePercentage = 100 / steps.length;
+        return {
+            width: `${steps.length * 100}%`,
+            transform: `translateX(-${translatePercentage * currentStep}%)`,
+        };
+    };
+    (0, react_1.useEffect)(() => {
+        const isValidStep = overrideStep !== undefined && overrideStep < steps.length && overrideStep >= 0;
+        if (isValidStep)
+            setCurrentStep(overrideStep);
+    }, [overrideStep]);
+    return (react_1.default.createElement("section", { className: ScreenSteps_module_scss_1.default["screen-steps"] },
+        react_1.default.createElement("nav", { className: ScreenSteps_module_scss_1.default["steps"] }, steps.map((step, index) => (react_1.default.createElement("div", { key: step.innerText, className: stepClassName(index), onClick: () => {
+                setCurrentStep(index);
+                onStepChange(index);
+            } }, step.innerText)))),
+        react_1.default.createElement("p", { className: ScreenSteps_module_scss_1.default["outer-text"] }, steps[currentStep].outterText),
+        react_1.default.createElement("div", { className: ScreenSteps_module_scss_1.default["frame"] },
+            react_1.default.createElement("div", { className: ScreenSteps_module_scss_1.default["steps-content"], style: stepContentStyle() }, steps.map((step) => (react_1.default.createElement("div", { key: step.innerText, className: ScreenSteps_module_scss_1.default["step-component"], style: { width: `${100 / steps.length}%` } }, step.component)))))));
+};
+exports.default = ScreenSteps;

package/dist/cjs/components/ScreenSteps/ScreenSteps.module.scss

@@ -0,0 +1,68 @@
+.screen-steps {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  .steps {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .step {
+      width: 62px;
+      height: 62px;
+      border-radius: 31px;
+      background-color: #959595;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0.2;
+      color: #000000;
+      text-align: center;
+      font-family: Arial, Helvetica, sans-serif;
+      font-size: 15px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: normal;
+      cursor: pointer;
+      transition: all 300ms ease-in-out;
+      &.completed {
+        opacity: 0.4;
+        background-color: #705a00;
+        color: #000000;
+      }
+      &.current {
+        opacity: 0.4;
+        background-color: #705a00;
+        color: #000000;
+      }
+    }
+  }
+  .outer-text {
+    color: #787878;
+    text-align: center;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    margin: 0;
+  }
+  .frame {
+    height: calc(100% - 82px);
+    width: 100%;
+    overflow: hidden;
+    .steps-content {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      transition: all 300ms ease-in-out;
+      .step-component {
+        height: 100%;
+      }
+    }
+  }
+}

package/dist/cjs/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/cjs/components/ScrollSnapGallery/ScrollSnapGallery.js

@@ -0,0 +1,98 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const ScrollSnapGallery_module_scss_1 = __importDefault(require("./ScrollSnapGallery.module.scss"));
+//Icons
+const go_1 = require("react-icons/go");
+const bs_1 = require("react-icons/bs");
+const ScrollSnapGallery = ({ urls = [], width = "400px", height = "300px", IndicatorIcon = go_1.GoDotFill, positionIndicatorSize = Math.min(urls.length, 6), iconSize = 16, showArrows = false, frameStyle = {}, }) => {
+    const [currentSlide, setCurrentSlide] = (0, react_1.useState)(0);
+    const [minimumVisibleIndicator, setMinimumVisibleIndicator] = (0, react_1.useState)(0);
+    const [maximumVisibleIndicator, setMaximumVisibleIndicator] = (0, react_1.useState)(positionIndicatorSize - 1);
+    const [positionIndicatorXtranslateValue, setPositionIndicatorXtranslateValue] = (0, react_1.useState)(0);
+    const indicatorIconStyle = (index) => {
+        let className = ScrollSnapGallery_module_scss_1.default["indicator-icon"];
+        if (currentSlide === index) {
+            className += ` ${ScrollSnapGallery_module_scss_1.default["current"]}`;
+        }
+        const isMinimumNotFirst = minimumVisibleIndicator !== 0 && index === minimumVisibleIndicator;
+        const isMaximumNotLast = maximumVisibleIndicator !== urls.length - 1 && index === maximumVisibleIndicator;
+        if (isMinimumNotFirst || isMaximumNotLast) {
+            className += ` ${ScrollSnapGallery_module_scss_1.default["full-shrunken"]}`;
+        }
+        const isOneAfterMinimumNotSecond = minimumVisibleIndicator !== 0 && index === minimumVisibleIndicator + 1;
+        const isOneBeforeMaximumNotSecond = maximumVisibleIndicator !== urls.length - 1 &&
+            index === maximumVisibleIndicator - 1;
+        if (isOneAfterMinimumNotSecond || isOneBeforeMaximumNotSecond) {
+            className += ` ${ScrollSnapGallery_module_scss_1.default["medium-shrunken"]}`;
+        }
+        if (index < minimumVisibleIndicator || index > maximumVisibleIndicator) {
+            className += ` ${ScrollSnapGallery_module_scss_1.default["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);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        setPositionIndicatorXtranslateValue(minimumVisibleIndicator * iconSize);
+    }, [minimumVisibleIndicator]);
+    return (react_1.default.createElement("section", { className: ScrollSnapGallery_module_scss_1.default["scroll-snap-gallery"] },
+        react_1.default.createElement("div", { className: ScrollSnapGallery_module_scss_1.default["frame"], style: Object.assign(Object.assign({}, frameStyle), { width, height }), onScroll: handleScroll }, urls.map((url, index) => {
+            return react_1.default.createElement("img", { key: url + index, src: url, alt: "gallery item" });
+        })),
+        react_1.default.createElement("div", { className: ScrollSnapGallery_module_scss_1.default["arrow-controls"] },
+            showArrows && (react_1.default.createElement(bs_1.BsArrowLeftCircle, { className: ScrollSnapGallery_module_scss_1.default["arrow"], onClick: () => {
+                    const frame = document.querySelector(`.${ScrollSnapGallery_module_scss_1.default["frame"]}`);
+                    frame.scrollLeft -= frame.clientWidth;
+                } })),
+            react_1.default.createElement("div", { className: ScrollSnapGallery_module_scss_1.default["position-indicator"], style: {
+                    transform: `translateX(calc(50% - ${positionIndicatorXtranslateValue}px - ${(iconSize * positionIndicatorSize) / 2}px))`,
+                } }, urls.map((url, index) => (react_1.default.createElement(IndicatorIcon, { key: url + index, className: indicatorIconStyle(index), style: { width: iconSize, height: iconSize } })))),
+            showArrows && (react_1.default.createElement(bs_1.BsArrowRightCircle, { className: ScrollSnapGallery_module_scss_1.default["arrow"], onClick: () => {
+                    const frame = document.querySelector(`.${ScrollSnapGallery_module_scss_1.default["frame"]}`);
+                    frame.scrollLeft += frame.clientWidth;
+                } })))));
+};
+exports.default = ScrollSnapGallery;

package/dist/cjs/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/cjs/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/cjs/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/cjs/components/SearchBar/SearchBar.js

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+require("./SearchBar.css");
+//Icons
+const bs_1 = require("react-icons/bs");
+const SearchBar = ({ actionOnEnter = () => { }, actionOnAlteringText = () => { }, actionOnEmptyText = () => { }, optionsButtonVisible, actionOnClickOptionsButton = () => { }, placeholder = "", initialValue = "", disabled = false, }) => {
+    //Estados
+    const [searchValue, setSearchValue] = (0, react_1.useState)(initialValue);
+    return (react_1.default.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_1.default.createElement("div", { className: "div-search-bar" },
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(bs_1.BsSearch, null)),
+            react_1.default.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_1.default.createElement("div", { className: disabled
+                    ? "icono-search-bar-opciones icono-search-bar-opciones-disabled"
+                    : "icono-search-bar-opciones", onClick: () => actionOnClickOptionsButton() },
+                react_1.default.createElement(bs_1.BsSliders, null))))));
+};
+exports.default = SearchBar;

package/dist/cjs/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/cjs/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/cjs/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;