Socket
Socket
Sign inDemoInstall

hero-slider

Package Overview
Dependencies
6
Maintainers
1
Versions
29
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 3.1.0 to 3.1.1

dist/node_modules/.pnpm/@rollup_plugin-typescript@8.5.0_rollup@2.79.1_tslib@2.4.0_typescript@4.8.3/node_modules/tslib/tslib.es6.js
dist/node_modules/.pnpm/@rollup_plugin-typescript@8.5.0_rollup@2.79.1_tslib@2.4.0_typescript@4.8.3/node_modules/tslib/tslib.es6.js.map

36

dist/components/AutoplayButton/index.js

@@ -1,7 +0,15 @@

import React__default from 'react';
import AutoplayButtonModuleCss from './index.module.css.js';
import { useAutoplay } from '../../modules/Autoplay.js';
import { IntervalState } from '../../modules/IntervalTimer.js';
import { composeCssClasses } from '../../utils/composeCssClasses.js';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var index_module = require('./index.module.css.js');
var Autoplay = require('../../modules/Autoplay.js');
var IntervalTimer = require('../../modules/IntervalTimer.js');
var composeCssClasses = require('../../utils/composeCssClasses.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var ButtonType;

@@ -27,4 +35,4 @@ (function (ButtonType) {

} } = props;
const { state: { isPausedByUser }, autoplayState, resume, pause } = useAutoplay();
const [buttonType, setButtonType] = React__default.useState(autoplayState !== IntervalState.IDLE ? ButtonType.PAUSE : ButtonType.PLAY);
const { state: { isPausedByUser }, autoplayState, resume, pause } = Autoplay.useAutoplay();
const [buttonType, setButtonType] = React__default["default"].useState(autoplayState !== IntervalTimer.IntervalState.IDLE ? ButtonType.PAUSE : ButtonType.PLAY);
const onClickHandler = (event) => {

@@ -37,6 +45,6 @@ event.stopPropagation();

};
React__default.useEffect(() => {
if (isPausedByUser && autoplayState === IntervalState.IDLE)
React__default["default"].useEffect(() => {
if (isPausedByUser && autoplayState === IntervalTimer.IntervalState.IDLE)
setButtonType(ButtonType.PLAY);
else if (isPausedByUser && autoplayState === IntervalState.PAUSED)
else if (isPausedByUser && autoplayState === IntervalTimer.IntervalState.PAUSED)
setButtonType(ButtonType.PLAY);

@@ -46,5 +54,5 @@ else

}, [isPausedByUser, autoplayState]);
return (React__default.createElement("button", { className: composeCssClasses('hero-slider-autoplay-button', AutoplayButtonModuleCss.Button, className), onClick: onClickHandler, style: Object.assign(Object.assign({}, position), style) },
React__default.createElement("svg", { fill: "currentColor", height: "100%", width: "100%", viewBox: "0 0 36 36" },
React__default.createElement("path", { d: AutoplaySvg.getPath(buttonType) }))));
return (React__default["default"].createElement("button", { className: composeCssClasses.composeCssClasses('hero-slider-autoplay-button', index_module["default"].Button, className), onClick: onClickHandler, style: Object.assign(Object.assign({}, position), style) },
React__default["default"].createElement("svg", { fill: "currentColor", height: "100%", width: "100%", viewBox: "0 0 36 36" },
React__default["default"].createElement("path", { d: AutoplaySvg.getPath(buttonType) }))));
}

@@ -54,3 +62,3 @@ AutoplayButton.displayName =

export { AutoplayButton };
exports.AutoplayButton = AutoplayButton;
//# sourceMappingURL=index.js.map

10

dist/components/AutoplayButton/index.module.css.js

@@ -1,8 +0,12 @@

import styleInject from '../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var styleInject_es = require('../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
var css_248z = ".index-module_Button__Lw9Oe {\n z-index: 4;\n position: absolute;\n color: inherit;\n /* Placeholders */\n width: 62px;\n height: 62px;\n /* Disabling default button CSS. */\n padding: 0;\n margin: 0;\n outline: none;\n background: transparent;\n border: 0;\n}\n\n.index-module_Button__Lw9Oe svg path {\n transition: d 200ms;\n}\n";
var AutoplayButtonModuleCss = {"Button":"index-module_Button__Lw9Oe"};
styleInject(css_248z);
styleInject_es["default"](css_248z);
export { AutoplayButtonModuleCss as default };
exports["default"] = AutoplayButtonModuleCss;
//# sourceMappingURL=index.module.css.js.map

54

dist/components/Buttons/index.js

@@ -1,33 +0,41 @@

import React__default from 'react';
import ButtonsModuleCss from './index.module.css.js';
import { useManager } from '../../modules/Manager.js';
import { useAccessability, AccessabilityOrientation } from '../../modules/Accessability.js';
import { useController } from '../../modules/Controller.js';
import { composeCssClasses } from '../../utils/composeCssClasses.js';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var index_module = require('./index.module.css.js');
var Manager = require('../../modules/Manager.js');
var Accessability = require('../../modules/Accessability.js');
var Controller = require('../../modules/Controller.js');
var composeCssClasses = require('../../utils/composeCssClasses.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
function ArrowSvg() {
return (React__default.createElement("svg", { width: "60px", height: "60px", strokeWidth: "5", version: "1.1", viewBox: "0 0 129 129" },
React__default.createElement("g", { fill: "currentColor" },
React__default.createElement("path", { d: "m40.4,121.3c-0.8,0.8-1.8,1.2-2.9,1.2s-2.1-0.4-2.9-1.2c-1.6-1.6-1.6-4.2 0-5.8l51-51-51-51c-1.6-1.6-1.6-4.2 0-5.8 1.6-1.6 4.2-1.6 5.8,0l53.9,53.9c1.6,1.6 1.6,4.2 0,5.8l-53.9,53.9z" }))));
return (React__default["default"].createElement("svg", { width: "60px", height: "60px", strokeWidth: "5", version: "1.1", viewBox: "0 0 129 129" },
React__default["default"].createElement("g", { fill: "currentColor" },
React__default["default"].createElement("path", { d: "m40.4,121.3c-0.8,0.8-1.8,1.2-2.9,1.2s-2.1-0.4-2.9-1.2c-1.6-1.6-1.6-4.2 0-5.8l51-51-51-51c-1.6-1.6-1.6-4.2 0-5.8 1.6-1.6 4.2-1.6 5.8,0l53.9,53.9c1.6,1.6 1.6,4.2 0,5.8l-53.9,53.9z" }))));
}
function Buttons() {
const { state: { isMobile } } = useManager();
const { orientation } = useAccessability();
const { goToPreviousSlide, goToNextSlide } = useController();
const { state: { isMobile } } = Manager.useManager();
const { orientation } = Accessability.useAccessability();
const { goToPreviousSlide, goToNextSlide } = Controller.useController();
if (isMobile)
return null;
const isHorizontal = orientation === AccessabilityOrientation.HORIZONTAL;
return (React__default.createElement(React__default.Fragment, null,
React__default.createElement("div", { className: composeCssClasses('hero-slider-previous', ButtonsModuleCss.Previous, ButtonsModuleCss.Wrapper, { className: ButtonsModuleCss.Horizontal, useIf: isHorizontal }, { className: ButtonsModuleCss.Vertical, useIf: !isHorizontal }) },
React__default.createElement("div", { className: composeCssClasses('hero-slider-previous-container', ButtonsModuleCss.Container) },
React__default.createElement("button", { className: composeCssClasses('hero-slider-previous-button', ButtonsModuleCss.Button), onClick: goToPreviousSlide },
React__default.createElement(ArrowSvg, null)))),
React__default.createElement("div", { className: composeCssClasses('hero-slider-next', ButtonsModuleCss.Next, ButtonsModuleCss.Wrapper, { className: ButtonsModuleCss.Horizontal, useIf: isHorizontal }, { className: ButtonsModuleCss.Vertical, useIf: !isHorizontal }) },
React__default.createElement("div", { className: composeCssClasses('hero-slider-next-container', ButtonsModuleCss.Container) },
React__default.createElement("button", { className: composeCssClasses('hero-slider-next-button', ButtonsModuleCss.Button), onClick: goToNextSlide },
React__default.createElement(ArrowSvg, null))))));
const isHorizontal = orientation === Accessability.AccessabilityOrientation.HORIZONTAL;
return (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-previous', index_module["default"].Previous, index_module["default"].Wrapper, { className: index_module["default"].Horizontal, useIf: isHorizontal }, { className: index_module["default"].Vertical, useIf: !isHorizontal }) },
React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-previous-container', index_module["default"].Container) },
React__default["default"].createElement("button", { className: composeCssClasses.composeCssClasses('hero-slider-previous-button', index_module["default"].Button), onClick: goToPreviousSlide },
React__default["default"].createElement(ArrowSvg, null)))),
React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-next', index_module["default"].Next, index_module["default"].Wrapper, { className: index_module["default"].Horizontal, useIf: isHorizontal }, { className: index_module["default"].Vertical, useIf: !isHorizontal }) },
React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-next-container', index_module["default"].Container) },
React__default["default"].createElement("button", { className: composeCssClasses.composeCssClasses('hero-slider-next-button', index_module["default"].Button), onClick: goToNextSlide },
React__default["default"].createElement(ArrowSvg, null))))));
}
export { Buttons as default };
exports["default"] = Buttons;
//# sourceMappingURL=index.js.map

10

dist/components/Buttons/index.module.css.js

@@ -1,8 +0,12 @@

import styleInject from '../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var styleInject_es = require('../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
var css_248z = ".index-module_Wrapper__ZIVLd {\n position: absolute;\n z-index: 3;\n}\n\n@media (max-width: 744px) {\n .index-module_Wrapper__ZIVLd {\n display: none;\n }\n}\n\n.index-module_Wrapper__ZIVLd,\n.index-module_Wrapper__ZIVLd * {\n /* To disable double-tap zoom */\n touch-action: manipulation;\n pointer-events: none;\n}\n\n.index-module_Container__mtjRh {\n position: absolute;\n display: block;\n height: 100%;\n width: 100%;\n top: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: none;\n transition: all 400ms;\n pointer-events: none;\n will-change: transform;\n}\n\n/* `pointer-events` manipulation to allow clicking inner children AND children inside the Container. */\n.index-module_Wrapper__ZIVLd *:not(.index-module_Container__mtjRh),\n.index-module_Container__mtjRh * {\n pointer-events: auto;\n}\n\n.index-module_Button__hkx4Z {\n width: 100%;\n /* Disabling button styling */\n background: none;\n\tcolor: inherit;\n\tborder: none;\n\tpadding: 0;\n\tfont: inherit;\n\tcursor: pointer;\n\toutline: inherit;\n}\n\n.index-module_Button__hkx4Z svg {\n opacity: 0.5;\n width: 60px;\n height: 60px;\n transition: all 200ms ease-in-out;\n color: #FFF; \n}\n\n.index-module_Button__hkx4Z:hover svg {\n opacity: 1;\n width: 80px;\n height: 80px;\n color: #FFF; \n}\n\n/**\n* --------------------------------------\n* -------------HORIZONTAL---------------\n* --------------------------------------\n*/\n\n.index-module_Horizontal__8-P70.index-module_Wrapper__ZIVLd {\n top: 0;\n width: 20%;\n height: 100%;\n min-width: 45px;\n max-width: 120px;\n}\n\n.index-module_Horizontal__8-P70.index-module_Previous__TaJVT {\n left: 0;\n}\n\n.index-module_Horizontal__8-P70.index-module_Next__sFCHR {\n right: 0;\n}\n\n.index-module_Horizontal__8-P70 .index-module_Container__mtjRh:hover {\n --shadow: 100%;\n}\n\n.index-module_Horizontal__8-P70.index-module_Previous__TaJVT .index-module_Container__mtjRh {\n left: 33%;\n transform: translateX(-50%) scaleX(-1);\n background: linear-gradient(\n 90deg,\n var(--c1, transparent) 40%,\n var(--c2, rgb(37, 37, 37, .05)) 60%,\n var(--c3, rgb(37, 37, 37, 0.5)) 85%\n ) var(--shadow, 0) / 200%;\n}\n\n.index-module_Horizontal__8-P70.index-module_Next__sFCHR .index-module_Container__mtjRh {\n right: 33%;\n transform: translateX(50%);\n background: linear-gradient(\n 90deg,\n var(--c1, transparent) 40%,\n var(--c2, rgb(37, 37, 37, .05)) 60%,\n var(--c3, rgb(37, 37, 37, 0.5)) 85%\n ) var(--shadow, 0) / 200%;\n}\n\n/**\n* ------------------------------------\n* -------------VERTICAL---------------\n* ------------------------------------\n*/\n\n.index-module_Vertical__VyL0Y.index-module_Wrapper__ZIVLd {\n width: 100%;\n height: 15%;\n max-height: 200px;\n}\n\n.index-module_Vertical__VyL0Y.index-module_Previous__TaJVT {\n top: 0;\n}\n\n.index-module_Vertical__VyL0Y.index-module_Next__sFCHR {\n bottom: 0;\n}\n\n.index-module_Vertical__VyL0Y .index-module_Container__mtjRh:hover {\n --shadow: 0;\n}\n\n.index-module_Vertical__VyL0Y.index-module_Previous__TaJVT .index-module_Container__mtjRh {\n background: linear-gradient(to bottom,\n rgb(37, 37, 37, 0.66) 0%,\n rgb(37, 37, 37, 0.33) 50%,\n rgb(37, 37, 37, 0.15) 75%,\n rgb(37, 37, 37, 0.01) 100%) no-repeat 0px var(--shadow, -200px);\n}\n\n.index-module_Vertical__VyL0Y.index-module_Previous__TaJVT svg {\n transform: rotate(-90deg);\n}\n\n.index-module_Vertical__VyL0Y.index-module_Next__sFCHR .index-module_Container__mtjRh {\n background: linear-gradient(to top,\n rgb(37, 37, 37, 0.66) 0%,\n rgb(37, 37, 37, 0.33) 50%,\n rgb(37, 37, 37, 0.15) 75%,\n rgb(37, 37, 37, 0.01) 100%) no-repeat 0px var(--shadow, 200px);\n}\n\n.index-module_Vertical__VyL0Y.index-module_Next__sFCHR svg {\n transform: rotate(90deg);\n}\n";
var ButtonsModuleCss = {"Wrapper":"index-module_Wrapper__ZIVLd","Container":"index-module_Container__mtjRh","Button":"index-module_Button__hkx4Z","Horizontal":"index-module_Horizontal__8-P70","Previous":"index-module_Previous__TaJVT","Next":"index-module_Next__sFCHR","Vertical":"index-module_Vertical__VyL0Y"};
styleInject(css_248z);
styleInject_es["default"](css_248z);
export { ButtonsModuleCss as default };
exports["default"] = ButtonsModuleCss;
//# sourceMappingURL=index.module.css.js.map

46

dist/components/ButtonsNav/index.js

@@ -1,9 +0,17 @@

import React__default from 'react';
import ButtonsNavModuleCss from './index.module.css.js';
import { Nav } from '../Nav/index.js';
import { useManager } from '../../modules/Manager.js';
import { useController } from '../../modules/Controller.js';
import { useLayout } from '../../modules/Layout.js';
import { composeCssClasses } from '../../utils/composeCssClasses.js';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var index_module = require('./index.module.css.js');
var index = require('../Nav/index.js');
var Manager = require('../../modules/Manager.js');
var Controller = require('../../modules/Controller.js');
var Layout = require('../../modules/Layout.js');
var composeCssClasses = require('../../utils/composeCssClasses.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
function ButtonsNav(props) {

@@ -15,5 +23,5 @@ const { color, activeColor, backgroundColor, position = {

}, justifyContent, alignItems, mobileThreshold: componentMobileThreshold, isNullAfterThreshold = false, extraButton, isExtraButtonRight } = props;
const { state: { width }, mobileThreshold } = useLayout();
const { state: { slides, totalSlides } } = useManager();
const { state: { activeSlide }, changeSlide } = useController();
const { state: { width }, mobileThreshold } = Layout.useLayout();
const { state: { slides, totalSlides } } = Manager.useManager();
const { state: { activeSlide }, changeSlide } = Controller.useController();
/**

@@ -30,3 +38,3 @@ * CSS variables for the transitions.

return null;
return React__default.createElement(Nav, Object.assign({}, props));
return React__default["default"].createElement(index.Nav, Object.assign({}, props));
}

@@ -45,12 +53,12 @@ function renderButtons() {

// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
React__default.createElement("li", { key: number, className: composeCssClasses('hero-slider-buttons-nav-button', ButtonsNavModuleCss.Button, {
className: ButtonsNavModuleCss.Active,
React__default["default"].createElement("li", { key: number, className: composeCssClasses.composeCssClasses('hero-slider-buttons-nav-button', index_module["default"].Button, {
className: index_module["default"].Active,
useIf: activeSlide === number
}), onClick: () => onClickHandler(number) },
React__default.createElement("div", { className: composeCssClasses('hero-slider-buttons-nav-button-description', ButtonsNavModuleCss.Description) },
React__default.createElement("div", { className: composeCssClasses('hero-slider-buttons-nav-button-text', ButtonsNavModuleCss.Text) }, description))));
React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-buttons-nav-button-description', index_module["default"].Description) },
React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-buttons-nav-button-text', index_module["default"].Text) }, description))));
});
}
return (React__default.createElement("div", { className: composeCssClasses('hero-slider-buttons-nav-wrapper', ButtonsNavModuleCss.Wrapper), style: Object.assign(Object.assign({}, position), CSSVariables) },
React__default.createElement("ul", { className: composeCssClasses('hero-slider-buttons-nav-container', ButtonsNavModuleCss.Container), style: {
return (React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-buttons-nav-wrapper', index_module["default"].Wrapper), style: Object.assign(Object.assign({}, position), CSSVariables) },
React__default["default"].createElement("ul", { className: composeCssClasses.composeCssClasses('hero-slider-buttons-nav-container', index_module["default"].Container), style: {
justifyContent: justifyContent || 'center',

@@ -67,3 +75,3 @@ /**

renderButtons(),
extraButton && (React__default.createElement("div", { className: composeCssClasses('hero-slider-buttons-nav-extra-button', ButtonsNavModuleCss.ExtraButton), style: {
extraButton && (React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-buttons-nav-extra-button', index_module["default"].ExtraButton), style: {
order: isExtraButtonRight ? 1 : 0

@@ -74,3 +82,3 @@ } }, extraButton)))));

export { ButtonsNav };
exports.ButtonsNav = ButtonsNav;
//# sourceMappingURL=index.js.map

10

dist/components/ButtonsNav/index.module.css.js

@@ -1,8 +0,12 @@

import styleInject from '../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var styleInject_es = require('../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
var css_248z = ".index-module_Wrapper__wU5EB {\n position: absolute;\n display: inline-flex;\n z-index: 4;\n margin: 0 auto;\n padding: 0;\n cursor: pointer;\n user-select: none;\n opacity: 0;\n animation: index-module_fade-in__YcH32 var(--nav-fade-in-duration, 500) ease-in var(--nav-fade-in-delay, 1000) forwards;\n}\n\n@keyframes index-module_fade-in__YcH32 {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n.index-module_Container__YnfKU {\n display: flex;\n position: relative;\n max-width: 100%;\n height: 54px;\n margin: 0;\n padding: 0;\n white-space: nowrap;\n}\n\n.index-module_Button__vb0cm,\n.index-module_ExtraButton__wTZEw {\n display: inline-flex;\n align-items: center;\n position: relative;\n width: 240px;\n height: 48px;\n list-style: none;\n cursor: pointer;\n background-color: transparent;\n color: var(--nav-color, #FFF);\n flex-basis: 0;\n flex-grow: 1;\n transition: all 200ms ease-in-out;\n outline: 0;\n padding: 0;\n font-weight: 600;\n}\n\n.index-module_ExtraButton__wTZEw {\n align-items: unset;\n}\n\n/* Backgrounds set in :before to allow for opacity */\n.index-module_Button__vb0cm:not(.index-module_Active__5slZ5)::before,\n.index-module_ExtraButton__wTZEw:not(.index-module_Active__5slZ5)::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0.5;\n background-color: var(--nav-background-color, rgba(255, 255, 255, 0.8));\n z-index: -1;\n transition: all 200ms ease-in-out;\n}\n\n.index-module_Button__vb0cm:hover:not(.index-module_Active__5slZ5),\n.index-module_ExtraButton__wTZEw:hover:not(.index-module_Active__5slZ5) {\n background-color: var(--nav-color, #FFF);\n color: var(--nav-active-color, rgb(59, 62, 69));\n}\n\n.index-module_ExtraButton__wTZEw {\n color: var(--nav-color, #FFF);\n}\n\n.index-module_Button__vb0cm:not(.index-module_Active__5slZ5):not(:first-child),\n.index-module_ExtraButton__wTZEw {\n box-shadow: -1px 0px 0px 0px var(--nav-background-color, rgba(215, 225, 235, 0.8));\n}\n\n.index-module_Description__ZaqVb {\n display: flex;\n align-items: center;\n width: 100%;\n padding: 0 0.5rem;\n}\n\n.index-module_Text__rKn0C {\n width: 95%;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n text-align: center;\n text-transform: uppercase;\n color: inherit;\n letter-spacing: 0.1rem;\n font-size: 0.75rem;\n line-height: 1rem;\n}\n\n.index-module_Active__5slZ5 {\n height: 54px;\n cursor: default;\n color: var(--nav-color, #FFF);\n background-color: transparent;\n}\n\n/* Backgrounds set in :before to allow for opacity */\n.index-module_Active__5slZ5:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0.95;\n box-shadow: -1px 0px 0px 0px var(--nav-active-color, rgb(59, 62, 69));\n background-color: var(--nav-active-color, rgb(59, 62, 69));\n z-index: -1;\n transition: all 200ms ease-in-out;\n}\n\n.index-module_Active__5slZ5 + .index-module_Button__vb0cm,\n.index-module_Active__5slZ5 + .index-module_ExtraButton__wTZEw {\n box-shadow: -1px 0px 0px 0px transparent !important;\n}\n";
var ButtonsNavModuleCss = {"Wrapper":"index-module_Wrapper__wU5EB","fade-in":"index-module_fade-in__YcH32","Container":"index-module_Container__YnfKU","Button":"index-module_Button__vb0cm","ExtraButton":"index-module_ExtraButton__wTZEw","Active":"index-module_Active__5slZ5","Description":"index-module_Description__ZaqVb","Text":"index-module_Text__rKn0C"};
styleInject(css_248z);
styleInject_es["default"](css_248z);
export { ButtonsNavModuleCss as default };
exports["default"] = ButtonsNavModuleCss;
//# sourceMappingURL=index.module.css.js.map

54

dist/components/MenuNav/index.js

@@ -1,9 +0,17 @@

import React__default from 'react';
import MenuNavModuleCss from './index.module.css.js';
import { Nav } from '../Nav/index.js';
import { useLayout } from '../../modules/Layout.js';
import { useManager } from '../../modules/Manager.js';
import { useController } from '../../modules/Controller.js';
import { composeCssClasses } from '../../utils/composeCssClasses.js';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var index_module = require('./index.module.css.js');
var index = require('../Nav/index.js');
var Layout = require('../../modules/Layout.js');
var Manager = require('../../modules/Manager.js');
var Controller = require('../../modules/Controller.js');
var composeCssClasses = require('../../utils/composeCssClasses.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
function MenuNav(props) {

@@ -15,9 +23,9 @@ const { color, activeColor, position = {

}, justifyContent = 'center', mobileThreshold: componentMobileThreshold, isNullAfterThreshold, extraButton, isExtraButtonRight = true } = props;
const { state: { width }, mobileThreshold } = useLayout();
const { state: { slides, totalSlides } } = useManager();
const { state: { activeSlide }, changeSlide } = useController();
const { state: { width }, mobileThreshold } = Layout.useLayout();
const { state: { slides, totalSlides } } = Manager.useManager();
const { state: { activeSlide }, changeSlide } = Controller.useController();
if (Number(width) <= (componentMobileThreshold !== null && componentMobileThreshold !== void 0 ? componentMobileThreshold : mobileThreshold)) {
if (isNullAfterThreshold)
return null;
return React__default.createElement(Nav, Object.assign({}, props));
return React__default["default"].createElement(index.Nav, Object.assign({}, props));
}

@@ -36,11 +44,11 @@ function renderButtons() {

// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
React__default.createElement("li", { key: index, className: composeCssClasses('hero-slider-menu-nav-button', MenuNavModuleCss.Button, {
className: MenuNavModuleCss.Active,
React__default["default"].createElement("li", { key: index, className: composeCssClasses.composeCssClasses('hero-slider-menu-nav-button', index_module["default"].Button, {
className: index_module["default"].Active,
useIf: activeSlide === number
}), onClick: () => onClickHandler(number) },
React__default.createElement("div", { className: composeCssClasses('hero-slider-menu-nav-button-description', MenuNavModuleCss.Description) },
React__default.createElement("div", { className: composeCssClasses('hero-slider-menu-nav-button-number', MenuNavModuleCss.Number) },
React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-menu-nav-button-description', index_module["default"].Description) },
React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-menu-nav-button-number', index_module["default"].Number) },
number,
React__default.createElement("span", { className: composeCssClasses('hero-slider-menu-nav-button-square', MenuNavModuleCss.Square) })),
React__default.createElement("div", { className: composeCssClasses('hero-slider-menu-nav-button-text', MenuNavModuleCss.Text) }, description))));
React__default["default"].createElement("span", { className: composeCssClasses.composeCssClasses('hero-slider-menu-nav-button-square', index_module["default"].Square) })),
React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-menu-nav-button-text', index_module["default"].Text) }, description))));
});

@@ -55,7 +63,7 @@ }

};
return (React__default.createElement("div", { className: composeCssClasses('hero-slider-menu-nav-wrapper', MenuNavModuleCss.Wrapper), style: Object.assign(Object.assign(Object.assign({}, position), CSSVariables), { justifyContent }) },
extraButton && (React__default.createElement("div", { className: composeCssClasses('hero-slider-menu-nav-extra', MenuNavModuleCss.Extra), style: {
return (React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-menu-nav-wrapper', index_module["default"].Wrapper), style: Object.assign(Object.assign(Object.assign({}, position), CSSVariables), { justifyContent }) },
extraButton && (React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-menu-nav-extra', index_module["default"].Extra), style: {
order: isExtraButtonRight ? 1 : 0
} },
React__default.createElement("span", { className: composeCssClasses('hero-slider-menu-nav-extra-button', MenuNavModuleCss.ExtraButton), style: {
React__default["default"].createElement("span", { className: composeCssClasses.composeCssClasses('hero-slider-menu-nav-extra-button', index_module["default"].ExtraButton), style: {
borderLeft: isExtraButtonRight

@@ -68,5 +76,5 @@ ? '1px solid var(--nav-color, rgba(215, 225, 235, 0.6))'

} }, extraButton))),
React__default.createElement("ul", { className: composeCssClasses('hero-slider-menu-nav-container', MenuNavModuleCss.Container) },
React__default["default"].createElement("ul", { className: composeCssClasses.composeCssClasses('hero-slider-menu-nav-container', index_module["default"].Container) },
renderButtons(),
React__default.createElement("span", { className: composeCssClasses('hero-slider-menu-nav-bar', MenuNavModuleCss.Bar), style: {
React__default["default"].createElement("span", { className: composeCssClasses.composeCssClasses('hero-slider-menu-nav-bar', index_module["default"].Bar), style: {
width: `${100 / totalSlides}%`,

@@ -78,3 +86,3 @@ transform: `translate3d(${activeSlide - 1}00%, 0, 0)`

export { MenuNav };
exports.MenuNav = MenuNav;
//# sourceMappingURL=index.js.map

10

dist/components/MenuNav/index.module.css.js

@@ -1,8 +0,12 @@

import styleInject from '../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var styleInject_es = require('../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
var css_248z = ".index-module_Wrapper__-jUiF {\n position: absolute;\n display: flex;\n z-index: 4;\n width: 90%; /* May be placeholder. */\n margin: 0 auto;\n padding: 0;\n cursor: pointer;\n user-select: none;\n opacity: 0;\n animation: index-module_fade-in__HoAls var(--nav-fade-in-duration, 500) ease-in var(--nav-fade-in-delay, 1000) forwards;\n}\n\n@keyframes index-module_fade-in__HoAls {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n.index-module_Container__3Qf2J {\n display: flex;\n flex-grow: 1;\n position: relative;\n margin: 0;\n padding: 0;\n border-top: 1px solid var(--nav-color, rgba(215, 225, 235, 0.6));\n}\n\n.index-module_Extra__1b50U {\n display: flex; \n min-width: 50px;\n margin: 0;\n padding: 0;\n color: var(--nav-active-color, #FFF);\n border-top: 1px solid var(--nav-color, rgba(215, 225, 235, 0.6));\n /* border-left: 1px solid var(--nav-color, rgba(215, 225, 235, 0.6));s */\n}\n\n.index-module_Bar__TdlPr {\n position: absolute;\n top: 0px;\n height: 4px;\n background-color: var(--nav-active-color, #FFF);\n opacity: 0.75;\n transition: transform 400ms ease;\n}\n\n.index-module_Button__F3ERg {\n list-style: none;\n flex: 1;\n position: relative;\n display: flex;\n align-items: center;\n color: var(--nav-active-color, #FFF);\n min-height: 15%;\n height: auto;\n margin: 1rem 0;\n padding: 0.5rem 0.75rem;\n}\n\n.index-module_ExtraButton__j1mUn {\n flex: 1;\n color: var(--nav-active-color, #FFF);\n min-height: 15%;\n height: auto;\n margin: 1rem 0;\n padding: 0;\n}\n\n.index-module_Button__F3ERg:not(:first-child):not(:last-child) {\n border-left: 1px solid var(--nav-color, rgba(215, 225, 235, 0.6));\n}\n\n.index-module_Description__gzcNp {\n display: flex;\n align-items: center;\n width: 100%;\n padding: 0 0.5rem;\n}\n\n.index-module_Number__jaqYr {\n position: relative;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n position: relative;\n min-width: 36px;\n width: 36px;\n height: 36px;\n line-height: 36px;\n backface-visibility: hidden;\n color: var(--nav-active-color, #FFF);\n font-size: 12px;\n}\n\n.index-module_Number__jaqYr .index-module_Square__wq3HS {\n background-color: transparent;\n border-radius: 5px;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18);\n display: block;\n height: 100%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: rotate(45deg) translate(-50%, -50%);\n transform-origin: 0px 0px;\n width: 24px;\n height: 24px;\n z-index: -1;\n border: 1px solid #fff;\n opacity: 0.5;\n}\n\n.index-module_Text__d-WKC {\n width: 80%;\n padding-left: 1.4rem;\n font-weight: 700;\n font-size: 12px;\n}\n";
var MenuNavModuleCss = {"Wrapper":"index-module_Wrapper__-jUiF","fade-in":"index-module_fade-in__HoAls","Container":"index-module_Container__3Qf2J","Extra":"index-module_Extra__1b50U","Bar":"index-module_Bar__TdlPr","Button":"index-module_Button__F3ERg","ExtraButton":"index-module_ExtraButton__j1mUn","Description":"index-module_Description__gzcNp","Number":"index-module_Number__jaqYr","Square":"index-module_Square__wq3HS","Text":"index-module_Text__d-WKC"};
styleInject(css_248z);
styleInject_es["default"](css_248z);
export { MenuNavModuleCss as default };
exports["default"] = MenuNavModuleCss;
//# sourceMappingURL=index.module.css.js.map

28

dist/components/Nav/index.js

@@ -1,7 +0,15 @@

import React__default from 'react';
import NavModuleCss from './index.module.css.js';
import { useController } from '../../modules/Controller.js';
import { useManager } from '../../modules/Manager.js';
import { composeCssClasses } from '../../utils/composeCssClasses.js';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var index_module = require('./index.module.css.js');
var Controller = require('../../modules/Controller.js');
var Manager = require('../../modules/Manager.js');
var composeCssClasses = require('../../utils/composeCssClasses.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
function Nav({ color, activeColor, position = {

@@ -12,4 +20,4 @@ bottom: '1.5rem',

} }) {
const { state: { slides, totalSlides } } = useManager();
const { state: { activeSlide }, changeSlide } = useController();
const { state: { slides, totalSlides } } = Manager.useManager();
const { state: { activeSlide }, changeSlide } = Controller.useController();
function renderButtons() {

@@ -26,3 +34,3 @@ if (!totalSlides)

// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
React__default.createElement("li", { key: number, className: composeCssClasses('hero-slider-nav-button', NavModuleCss.Button, { className: NavModuleCss.Active, useIf: activeSlide === number }), onClick: () => onClickHandler(number) }));
React__default["default"].createElement("li", { key: number, className: composeCssClasses.composeCssClasses('hero-slider-nav-button', index_module["default"].Button, { className: index_module["default"].Active, useIf: activeSlide === number }), onClick: () => onClickHandler(number) }));
});

@@ -37,7 +45,7 @@ }

};
return (React__default.createElement("ul", { className: composeCssClasses('hero-slider-nav-wrapper', NavModuleCss.Wrapper), style: Object.assign(Object.assign({}, position), CSSVariables) }, renderButtons()));
return (React__default["default"].createElement("ul", { className: composeCssClasses.composeCssClasses('hero-slider-nav-wrapper', index_module["default"].Wrapper), style: Object.assign(Object.assign({}, position), CSSVariables) }, renderButtons()));
}
Nav.displayName = 'hero-slider/nav';
export { Nav };
exports.Nav = Nav;
//# sourceMappingURL=index.js.map

10

dist/components/Nav/index.module.css.js

@@ -1,8 +0,12 @@

import styleInject from '../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var styleInject_es = require('../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
var css_248z = ".index-module_Wrapper__xqqKi {\n display: inline-flex;\n margin: 0;\n padding: 0;\n list-style: none;\n position: absolute;\n z-index: 4;\n opacity: 0;\n animation: index-module_fade-in__Y7AOI var(--nav-fade-in-duration, 500) ease-in var(--nav-fade-in-delay, 1000) forwards;\n}\n\n@keyframes index-module_fade-in__Y7AOI {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n.index-module_Button__Xnq8E {\n position: relative;\n color: currentColor;\n height: 50px;\n max-width: 60px;\n min-width: 50px;\n width: 15%;\n margin: 0 6px;\n border-bottom: 2px solid var(--nav-color, rgba(200, 215, 235, 0.6));\n cursor: pointer;\n transition: all 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.index-module_Active__l5OO4 {\n border-color: var(--nav-active-color, rgba(200, 215, 235, 1))\n}\n\n@media (max-width: 744px) {\n .index-module_Button__Xnq8E {\n display: block;\n cursor: pointer;\n color: currentColor;\n outline: none;\n height: 14px;\n width: 14px;\n min-width: 14px;\n max-width: 14px;\n margin: 0 9px;\n border: 0;\n font-size: 0;\n line-height: 0;\n background: var(--nav-color, rgba(200, 215, 235, 0.6));\n border-radius: 50%;\n }\n\n .index-module_Active__l5OO4 {\n background: var(--nav-active-color, rgba(200, 215, 235, 1));\n }\n}\n";
var NavModuleCss = {"Wrapper":"index-module_Wrapper__xqqKi","fade-in":"index-module_fade-in__Y7AOI","Button":"index-module_Button__Xnq8E","Active":"index-module_Active__l5OO4"};
styleInject(css_248z);
styleInject_es["default"](css_248z);
export { NavModuleCss as default };
exports["default"] = NavModuleCss;
//# sourceMappingURL=index.module.css.js.map

18

dist/components/Overlay/index.js

@@ -1,11 +0,19 @@

import React__default from 'react';
import { composeCssClasses } from '../../utils/composeCssClasses.js';
import OverlayModuleCss from './index.module.css.js';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var composeCssClasses = require('../../utils/composeCssClasses.js');
var index_module = require('./index.module.css.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
function Overlay(props) {
return (React__default.createElement("div", { className: composeCssClasses('hero-slider-overlay', OverlayModuleCss.Container) }, props.children));
return (React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-overlay', index_module["default"].Container) }, props.children));
}
Overlay.displayName = 'hero-slider/overlay';
export { Overlay };
exports.Overlay = Overlay;
//# sourceMappingURL=index.js.map

10

dist/components/Overlay/index.module.css.js

@@ -1,8 +0,12 @@

import styleInject from '../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var styleInject_es = require('../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
var css_248z = ".index-module_Container__uwyVd {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 3;\n pointer-events: none;\n}\n\n.index-module_Container__uwyVd * {\n pointer-events: auto;\n}\n";
var OverlayModuleCss = {"Container":"index-module_Container__uwyVd"};
styleInject(css_248z);
styleInject_es["default"](css_248z);
export { OverlayModuleCss as default };
exports["default"] = OverlayModuleCss;
//# sourceMappingURL=index.module.css.js.map

34

dist/components/SideNav/index.js

@@ -1,7 +0,15 @@

import React__default from 'react';
import SideNavModuleCss from './index.module.css.js';
import { useController } from '../../modules/Controller.js';
import { useManager } from '../../modules/Manager.js';
import { composeCssClasses } from '../../utils/composeCssClasses.js';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var index_module = require('./index.module.css.js');
var Controller = require('../../modules/Controller.js');
var Manager = require('../../modules/Manager.js');
var composeCssClasses = require('../../utils/composeCssClasses.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
function SideNav({ color, activeColor, left, right, isPositionedRight = true, position = {

@@ -14,4 +22,4 @@ bottom: undefined,

} }) {
const { state: { slides, totalSlides } } = useManager();
const { state: { activeSlide }, changeSlide } = useController();
const { state: { slides, totalSlides } } = Manager.useManager();
const { state: { activeSlide }, changeSlide } = Controller.useController();
function renderButtons() {

@@ -28,4 +36,4 @@ if (!totalSlides)

// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events
React__default.createElement("li", { key: number, className: composeCssClasses('hero-slider-side-nav-button', SideNavModuleCss.Button, {
className: SideNavModuleCss.Active,
React__default["default"].createElement("li", { key: number, className: composeCssClasses.composeCssClasses('hero-slider-side-nav-button', index_module["default"].Button, {
className: index_module["default"].Active,
useIf: activeSlide === number

@@ -35,4 +43,4 @@ }), onClick: () => onClickHandler(number), style: {

} },
React__default.createElement("span", { className: composeCssClasses('hero-slider-side-nav-button-line', SideNavModuleCss.Line) }),
React__default.createElement("span", { className: composeCssClasses('hero-slider-side-nav-button-number', SideNavModuleCss.Number) }, number.toLocaleString())));
React__default["default"].createElement("span", { className: composeCssClasses.composeCssClasses('hero-slider-side-nav-button-line', index_module["default"].Line) }),
React__default["default"].createElement("span", { className: composeCssClasses.composeCssClasses('hero-slider-side-nav-button-number', index_module["default"].Number) }, number.toLocaleString())));
});

@@ -47,7 +55,7 @@ }

};
return (React__default.createElement("ul", { className: composeCssClasses('hero-slider-side-nav-wrapper', SideNavModuleCss.Wrapper), style: Object.assign(Object.assign({}, position), CSSVariables) }, renderButtons()));
return (React__default["default"].createElement("ul", { className: composeCssClasses.composeCssClasses('hero-slider-side-nav-wrapper', index_module["default"].Wrapper), style: Object.assign(Object.assign({}, position), CSSVariables) }, renderButtons()));
}
SideNav.displayName = 'hero-slider/nav';
export { SideNav };
exports.SideNav = SideNav;
//# sourceMappingURL=index.js.map

10

dist/components/SideNav/index.module.css.js

@@ -1,8 +0,12 @@

import styleInject from '../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var styleInject_es = require('../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
var css_248z = ".index-module_Wrapper__jT-Cn {\n width: 60px;\n position: absolute;\n margin: 0;\n padding: 0;\n list-style: none;\n z-index: 4;\n opacity: 0;\n animation: index-module_fade-in__5i5FF var(--nav-fade-in-duration, 500) ease-in var(--nav-fade-in-delay, 1000) forwards;\n}\n\n@keyframes index-module_fade-in__5i5FF {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n.index-module_Button__rDMSg {\n display: flex;\n align-items: center;\n position: relative;\n margin: 0 auto;\n padding: 0.5rem 0;\n text-align: right;\n color: var(--nav-color, #C8D7EB);\n cursor: pointer;\n transition: all 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.index-module_Active__uEbtj {\n color: var(--nav-active-color, #FFF);\n}\n\n.index-module_Line__btiyM {\n width: 20px;\n height: 1px;\n background-color: currentColor;\n transition: all ease 200ms;\n}\n\n.index-module_Number__YPUv6 {\n width: 10px;\n font-size: 19px;\n margin: 0;\n transform: scaleX(0);\n transition: all ease 200ms;\n}\n\n.index-module_Active__uEbtj .index-module_Line__btiyM {\n width: 50px;\n}\n\n.index-module_Active__uEbtj .index-module_Number__YPUv6 {\n margin: 0 0.5ch;\n transform: scaleX(1);\n}\n";
var SideNavModuleCss = {"Wrapper":"index-module_Wrapper__jT-Cn","fade-in":"index-module_fade-in__5i5FF","Button":"index-module_Button__rDMSg","Active":"index-module_Active__uEbtj","Line":"index-module_Line__btiyM","Number":"index-module_Number__YPUv6"};
styleInject(css_248z);
styleInject_es["default"](css_248z);
export { SideNavModuleCss as default };
exports["default"] = SideNavModuleCss;
//# sourceMappingURL=index.module.css.js.map

44

dist/components/Slide/Background/index.js

@@ -1,20 +0,28 @@

import { __rest } from '../../../node_modules/.pnpm/@rollup_plugin-typescript@8.5.0_jm3lfwhp2n3nxb4wwf6zz565he/node_modules/tslib/tslib.es6.js';
import React__default from 'react';
import BackgroundModuleCss from './index.module.css.js';
import { composeCssClasses } from '../../../utils/composeCssClasses.js';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var tslib_es6 = require('../../../node_modules/.pnpm/@rollup_plugin-typescript@8.5.0_rollup@2.79.1_tslib@2.4.0_typescript@4.8.3/node_modules/tslib/tslib.es6.js');
var React = require('react');
var index_module = require('./index.module.css.js');
var composeCssClasses = require('../../../utils/composeCssClasses.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
/**
* Type definition for `BackgroundProps.backgroundAnimation`.
*/
var BackgroundAnimation;
exports.BackgroundAnimation = void 0;
(function (BackgroundAnimation) {
BackgroundAnimation["FADE"] = "fade";
BackgroundAnimation["ZOOM"] = "zoom";
})(BackgroundAnimation || (BackgroundAnimation = {}));
})(exports.BackgroundAnimation || (exports.BackgroundAnimation = {}));
function Background(props) {
const { backgroundAnimation = BackgroundAnimation.FADE, backgroundImageClassName, backgroundImageBlendMode, backgroundImageSizes, backgroundImageSrcSet, backgroundImageSrc, backgroundImageAlt, backgroundImageStyle,
const { backgroundAnimation = exports.BackgroundAnimation.FADE, backgroundImageClassName, backgroundImageBlendMode, backgroundImageSizes, backgroundImageSrcSet, backgroundImageSrc, backgroundImageAlt, backgroundImageStyle,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
maskBackgroundBlendMode: _, // Not used.
shouldLazyLoad = true, onLoad } = props, background = __rest(props, ["backgroundAnimation", "backgroundImageClassName", "backgroundImageBlendMode", "backgroundImageSizes", "backgroundImageSrcSet", "backgroundImageSrc", "backgroundImageAlt", "backgroundImageStyle", "maskBackgroundBlendMode", "shouldLazyLoad", "onLoad"]);
const [isLoaded, setIsLoaded] = React__default.useState(false);
shouldLazyLoad = true, onLoad } = props, background = tslib_es6.__rest(props, ["backgroundAnimation", "backgroundImageClassName", "backgroundImageBlendMode", "backgroundImageSizes", "backgroundImageSrcSet", "backgroundImageSrc", "backgroundImageAlt", "backgroundImageStyle", "maskBackgroundBlendMode", "shouldLazyLoad", "onLoad"]);
const [isLoaded, setIsLoaded] = React__default["default"].useState(false);
const onLoadHandler = (event) => {

@@ -32,9 +40,9 @@ if (onLoad)

if (isLoaded) {
imageBackgroundClassNames.push(BackgroundModuleCss.Loaded);
imageBackgroundClassNames.push(index_module["default"].Loaded);
switch (backgroundAnimation) {
case BackgroundAnimation.ZOOM:
imageBackgroundClassNames.push(BackgroundModuleCss.ZoomOut);
case exports.BackgroundAnimation.ZOOM:
imageBackgroundClassNames.push(index_module["default"].ZoomOut);
break;
case BackgroundAnimation.FADE:
imageBackgroundClassNames.push(BackgroundModuleCss.FadeIn);
case exports.BackgroundAnimation.FADE:
imageBackgroundClassNames.push(index_module["default"].FadeIn);
break;

@@ -44,9 +52,9 @@ }

else {
imageBackgroundClassNames.push(BackgroundModuleCss.Loading);
imageBackgroundClassNames.push(index_module["default"].Loading);
}
return (React__default.createElement("div", { className: composeCssClasses('hero-slider-slide-background', backgroundImageClassName, BackgroundModuleCss.Background), style: background },
React__default.createElement("img", { className: composeCssClasses('hero-slider-slide-background-image', backgroundImageClassName, BackgroundModuleCss.Image, ...imageBackgroundClassNames), sizes: backgroundImageSizes, srcSet: backgroundImageSrcSet, src: backgroundImageSrc, alt: backgroundImageAlt, style: Object.assign({ mixBlendMode: backgroundImageBlendMode }, backgroundImageStyle), onLoad: onLoadHandler, loading: shouldLazyLoad ? 'lazy' : 'eager' })));
return (React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-slide-background', backgroundImageClassName, index_module["default"].Background), style: background },
React__default["default"].createElement("img", { className: composeCssClasses.composeCssClasses('hero-slider-slide-background-image', backgroundImageClassName, index_module["default"].Image, ...imageBackgroundClassNames), sizes: backgroundImageSizes, srcSet: backgroundImageSrcSet, src: backgroundImageSrc, alt: backgroundImageAlt, style: Object.assign({ mixBlendMode: backgroundImageBlendMode }, backgroundImageStyle), onLoad: onLoadHandler, loading: shouldLazyLoad ? 'lazy' : 'eager' })));
}
export { BackgroundAnimation, Background as default };
exports["default"] = Background;
//# sourceMappingURL=index.js.map

10

dist/components/Slide/Background/index.module.css.js

@@ -1,8 +0,12 @@

import styleInject from '../../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var styleInject_es = require('../../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
var css_248z = ".index-module_Background__hqV3F {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n\n.index-module_Image__-UrHA {\n object-fit: cover;\n object-position: center;\n width: 100%;\n height: 100%;\n}\n\n.index-module_Loading__jqajH,\n.index-module_Loaded__6nMLk {\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.index-module_Loading__jqajH {\n visibility: hidden;\n}\n\n/* Animations when loaded */\n\n.index-module_FadeIn__iDwzu {\n opacity: 0;\n animation: index-module_fade-in__M3j53 var(--background-animation-duration, 300ms) ease-in-out var(--background-animation-delay, 0ms) forwards;\n}\n\n.index-module_ZoomOut__V4Peh {\n transform: scale(1.5);\n animation: \n index-module_fade-in__M3j53 300ms ease-in-out 0ms forwards, \n index-module_zoom-out__QDhiM var(--background-animation-duration, 30000ms) ease-in-out var(--background-animation-delay, 100ms) forwards;\n}\n\n@keyframes index-module_fade-in__M3j53 {\n 0% {\n opacity: 0\n }\n 100% {\n opacity: 1;\n }\n}\n\n@keyframes index-module_zoom-out__QDhiM {\n 0% {\n transform: scale(1.5);\n }\n 100% {\n transform: scale(1);\n }\n}\n";
var BackgroundModuleCss = {"Background":"index-module_Background__hqV3F","Image":"index-module_Image__-UrHA","Loading":"index-module_Loading__jqajH","Loaded":"index-module_Loaded__6nMLk","FadeIn":"index-module_FadeIn__iDwzu","fade-in":"index-module_fade-in__M3j53","ZoomOut":"index-module_ZoomOut__V4Peh","zoom-out":"index-module_zoom-out__QDhiM"};
styleInject(css_248z);
styleInject_es["default"](css_248z);
export { BackgroundModuleCss as default };
exports["default"] = BackgroundModuleCss;
//# sourceMappingURL=index.module.css.js.map

56

dist/components/Slide/index.js

@@ -1,25 +0,33 @@

import React__default from 'react';
import SlideModuleCss from './index.module.css.js';
import Background from './Background/index.js';
import Mask from './Mask/index.js';
import { useManager } from '../../modules/Manager.js';
import { useController } from '../../modules/Controller.js';
import { useAnimations } from '../../modules/Animations.js';
import { composeCssClasses } from '../../utils/composeCssClasses.js';
import ConsoleLogger from '../../modules/ConsoleLogger.js';
'use strict';
const logger = ConsoleLogger.new();
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var index_module = require('./index.module.css.js');
var index = require('./Background/index.js');
var index$1 = require('./Mask/index.js');
var Manager = require('../../modules/Manager.js');
var Controller = require('../../modules/Controller.js');
var Animations = require('../../modules/Animations.js');
var composeCssClasses = require('../../utils/composeCssClasses.js');
var ConsoleLogger = require('../../modules/ConsoleLogger.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
const logger = ConsoleLogger["default"].new();
function Slide(props) {
const { className, shouldRenderMask = false, style, background, onBackgroundLoad, children, label } = props;
const { getSlide, registerSlide, removeSlide } = useManager();
const { state: { activeSlide, isSliding, prevActiveSlide, slidingDirection } } = useController(); // controller
const { getSlidingAnimationCssClass } = useAnimations();
const slideRef = React__default.useRef(null);
const { getSlide, registerSlide, removeSlide } = Manager.useManager();
const { state: { activeSlide, isSliding, prevActiveSlide, slidingDirection } } = Controller.useController(); // controller
const { getSlidingAnimationCssClass } = Animations.useAnimations();
const slideRef = React__default["default"].useRef(null);
const slide = getSlide(slideRef);
logger.info('[Slide] rerender', 'slide.number: ', slide === null || slide === void 0 ? void 0 : slide.number);
const [classNames, setClassNames] = React__default.useState(composeCssClasses('hero-slider-slide', SlideModuleCss.Slide, className));
const [classNames, setClassNames] = React__default["default"].useState(composeCssClasses.composeCssClasses('hero-slider-slide', index_module["default"].Slide, className));
const isActive = activeSlide === (slide === null || slide === void 0 ? void 0 : slide.number);
React__default.useEffect(() => {
React__default["default"].useEffect(() => {
if (slide) {
setClassNames(composeCssClasses('hero-slider-slide', SlideModuleCss.Slide, { className: SlideModuleCss.Active, useIf: isActive }, { className: SlideModuleCss.Sliding, useIf: isActive && !isSliding }, {
setClassNames(composeCssClasses.composeCssClasses('hero-slider-slide', index_module["default"].Slide, { className: index_module["default"].Active, useIf: isActive }, { className: index_module["default"].Sliding, useIf: isActive && !isSliding }, {
className: getSlidingAnimationCssClass(slide.number, prevActiveSlide, slidingDirection),

@@ -30,3 +38,3 @@ useIf: isActive && isSliding

}, [isActive, isSliding]);
React__default.useEffect(() => {
React__default["default"].useEffect(() => {
if (slideRef)

@@ -52,11 +60,11 @@ registerSlide(slideRef, label);

};
return (React__default.createElement("div", { ref: slideRef, className: classNames, style: Object.assign(Object.assign({}, style), CSSVariables) },
React__default.createElement(Background, Object.assign({}, background, { onLoad: onBackgroundLoad })),
React__default.createElement("div", { className: composeCssClasses('hero-slider-slide-wrapper', SlideModuleCss.Wrapper) },
shouldRenderMask ? (React__default.createElement(Mask, { background: background, isActive: isActive })) : null,
React__default.createElement("div", { className: composeCssClasses('hero-slider-slide-container', SlideModuleCss.Container, { className: SlideModuleCss.Active, useIf: isActive && !isSliding }) }, children))));
return (React__default["default"].createElement("div", { ref: slideRef, className: classNames, style: Object.assign(Object.assign({}, style), CSSVariables) },
React__default["default"].createElement(index["default"], Object.assign({}, background, { onLoad: onBackgroundLoad })),
React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-slide-wrapper', index_module["default"].Wrapper) },
shouldRenderMask ? (React__default["default"].createElement(index$1["default"], { background: background, isActive: isActive })) : null,
React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-slide-container', index_module["default"].Container, { className: index_module["default"].Active, useIf: isActive && !isSliding }) }, children))));
}
Slide.displayName = 'hero-slider/slide';
export { Slide };
exports.Slide = Slide;
//# sourceMappingURL=index.js.map

10

dist/components/Slide/index.module.css.js

@@ -1,8 +0,12 @@

import styleInject from '../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var styleInject_es = require('../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
var css_248z = ".index-module_Slide__vy4u2,\n.index-module_Container__zFpuF {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transform: translate3d(0, 0, 0);\n overflow: hidden;\n}\n\n.index-module_Wrapper__tE11B {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n.index-module_Active__5-5Mj {\n z-index: 2; /* NOTE: It is imperative for z-index to be here, do not remove. */\n transform: translate3d(0, 0, 0);\n transition-delay: var(--sliding-delay, 0ms);\n}\n\n.index-module_Slide__vy4u2 {\n /* property name | duration | timing function | delay */\n transition: transform 0ms ease-in-out var(--sliding-delay, 0ms);\n will-change: transform;\n}\n\n.index-module_Slide__vy4u2:not(.index-module_Active__5-5Mj) {\n z-index: 1;\n transform: translate3d(100%, 0, 0);\n transition-delay: var(--slide-transition-delay, 600ms);\n user-select: none;\n}\n\n.index-module_Container__zFpuF {\n backface-visibility: hidden;\n /* property name | duration | timing function | delay */\n transition: all 300ms ease-in-out var(--sliding-delay, 200ms);\n will-change: transform;\n}\n\n.index-module_Container__zFpuF:not(.index-module_Active__5-5Mj) {\n z-index: 1;\n opacity: 0;\n /* property name | duration | timing function | delay */\n transition: all 200ms ease-in-out var(--sliding-delay, 200ms);\n}\n";
var SlideModuleCss = {"Slide":"index-module_Slide__vy4u2","Container":"index-module_Container__zFpuF","Wrapper":"index-module_Wrapper__tE11B","Active":"index-module_Active__5-5Mj"};
styleInject(css_248z);
styleInject_es["default"](css_248z);
export { SlideModuleCss as default };
exports["default"] = SlideModuleCss;
//# sourceMappingURL=index.module.css.js.map

32

dist/components/Slide/Mask/index.js

@@ -1,11 +0,19 @@

import React__default from 'react';
import MaskModuleCss from './index.module.css.js';
import { useController } from '../../../modules/Controller.js';
import { composeCssClasses } from '../../../utils/composeCssClasses.js';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var index_module = require('./index.module.css.js');
var Controller = require('../../../modules/Controller.js');
var composeCssClasses = require('../../../utils/composeCssClasses.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
function Mask({ background, isActive }) {
const { state: { isSliding } } = useController();
const [className, setClassName] = React__default.useState(MaskModuleCss.Loading);
const { state: { isSliding } } = Controller.useController();
const [className, setClassName] = React__default["default"].useState(index_module["default"].Loading);
const onLoadHandler = () => {
setClassName(MaskModuleCss.Loaded);
setClassName(index_module["default"].Loaded);
};

@@ -17,9 +25,9 @@ const style = {

};
const isLoaded = className === MaskModuleCss.Loaded;
return (React__default.createElement("div", { className: composeCssClasses('hero-slider-slide-mask', MaskModuleCss.Mask, { className: MaskModuleCss.Active, useIf: isActive && !isSliding }, { className: MaskModuleCss.Inactive, useIf: !(isActive && !isSliding) }) },
React__default.createElement("img", { alt: (background === null || background === void 0 ? void 0 : background.backgroundImageAlt) || '', className: MaskModuleCss.Loader, onLoad: onLoadHandler, src: background === null || background === void 0 ? void 0 : background.backgroundImageSrc, loading: (background === null || background === void 0 ? void 0 : background.shouldLazyLoad) ? 'lazy' : 'eager' }),
isLoaded && (React__default.createElement("div", { className: composeCssClasses('hero-slider-slide-mask-inner', className, MaskModuleCss.Inner, { className: MaskModuleCss.Sliding, useIf: isSliding }), style: style }))));
const isLoaded = className === index_module["default"].Loaded;
return (React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-slide-mask', index_module["default"].Mask, { className: index_module["default"].Active, useIf: isActive && !isSliding }, { className: index_module["default"].Inactive, useIf: !(isActive && !isSliding) }) },
React__default["default"].createElement("img", { alt: (background === null || background === void 0 ? void 0 : background.backgroundImageAlt) || '', className: index_module["default"].Loader, onLoad: onLoadHandler, src: background === null || background === void 0 ? void 0 : background.backgroundImageSrc, loading: (background === null || background === void 0 ? void 0 : background.shouldLazyLoad) ? 'lazy' : 'eager' }),
isLoaded && (React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-slide-mask-inner', className, index_module["default"].Inner, { className: index_module["default"].Sliding, useIf: isSliding }), style: style }))));
}
export { Mask as default };
exports["default"] = Mask;
//# sourceMappingURL=index.js.map

10

dist/components/Slide/Mask/index.module.css.js

@@ -1,8 +0,12 @@

import styleInject from '../../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var styleInject_es = require('../../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
var css_248z = ".index-module_Mask__i5n4j {\n overflow: hidden;\n position: absolute;\n left: 25%;\n top: 50%;\n width: calc(var(--slider-widht, 100vw) * 0.66);\n height: calc(var(--slider-height, 100vh) * 0.66);\n max-width: 33%;\n max-height: 50%;\n -webkit-clip-path: polygon(0% 0%, 0% 100%, 16% 100%, 15% 15%, 85% 15%, 85% 85%, 15% 85%, 16% 100%, 100% 100%, 100% 0%);\n clip-path: polygon(0% 0%, 0% 100%, 16% 100%, 15% 15%, 85% 15%, 85% 85%, 15% 85%, 16% 100%, 100% 100%, 100% 0%);\n transform: translate3d(-33.33%, -50%, 0);\n transition: all calc(var(--mask-duration, 200ms) * 1.5) ease 0s;\n will-change: transform;\n}\n\n.index-module_Mask__i5n4j:not(.index-module_Active__1mWg7) {\n opacity: 0;\n z-index: 1;\n transform: translate3d(33.33%, -50%, 0);\n /* property name | duration | timing function | delay */\n transition: all var(--mask-duration, 200ms) ease 0s;\n}\n\n.index-module_Inner__FmWan {\n z-index: -1;\n position: absolute;\n left: 50%;\n top: 50%;\n width: 200%;\n height: 200%;\n transform: translate3d(-50%, -50%, 0);\n background-size: cover;\n background-position: center center;\n -webkit-transform-origin: 50% 16.5vh;\n transform-origin: 50% 16.5vh;\n transition: all calc(var(--mask-duration, 200ms) * 1.66) ease 0s;\n will-change: transform;\n}\n\n.index-module_Inner__FmWan.index-module_Sliding__vU2M1 {\n transition: all var(--mask-duration, 200ms) ease 0s;\n transform: translate3d(-85%, -50%, 0);\n}\n\n@media (max-width: 1024px) {\n .index-module_Mask__i5n4j {\n max-width: 50% !important;\n }\n .index-module_Inner__FmWan {\n width: calc(var(--slider-width, 100vw) * 0.66);\n height: calc(var(--slider-height, 100vh) * 0.66);\n }\n}\n\n/* Mask LazyLoad */\n\n.index-module_Loader__w-3j4 {\n opacity: 0;\n z-index: -1;\n}\n\n.index-module_Loading__53rJo {\n opacity: 0;\n}\n\n.index-module_Loaded__vpiHK {\n opacity: 0;\n animation-name: index-module_slide-in__wP0IR;\n animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);\n animation-fill-mode: forwards;\n animation-duration: var(--background-fade-in-duration, 1500ms);\n animation-delay: var(--background-fade-in-delay, 100ms);\n}\n\n@keyframes index-module_slide-in__wP0IR {\n 0% {\n opacity: 0;\n }\n 10% {\n -webkit-clip-path: inset(50% 50% 50% 50%);\n clip-path: inset(50% 50% 50% 50%);\n }\n 100% {\n opacity: 1;\n -webkit-clip-path: inset(0 0 0 0);\n clip-path: inset(0 0 0 0);\n }\n}\n";
var MaskModuleCss = {"Mask":"index-module_Mask__i5n4j","Active":"index-module_Active__1mWg7","Inner":"index-module_Inner__FmWan","Sliding":"index-module_Sliding__vU2M1","Loader":"index-module_Loader__w-3j4","Loading":"index-module_Loading__53rJo","Loaded":"index-module_Loaded__vpiHK","slide-in":"index-module_slide-in__wP0IR"};
styleInject(css_248z);
styleInject_es["default"](css_248z);
export { MaskModuleCss as default };
exports["default"] = MaskModuleCss;
//# sourceMappingURL=index.module.css.js.map

6

dist/HeroSlider.d.ts
import React from 'react';
import { SettingsProps } from './modules/Settings';
import { AccessabilityProps } from './modules/Accessability';
import { AnimationsProps } from './modules/Animations';
import { AutoplayProps } from './modules/Autoplay';
import { ControllerProps } from './modules/Controller';
import { AccessabilityProps } from './modules/Accessability';
import { AutoplayProps } from './modules/Autoplay';
import { ManagerProps } from './modules/Manager';
import { SettingsProps } from './modules/Settings';
/**

@@ -9,0 +9,0 @@ * `HeroSlider` props.

79

dist/HeroSlider.js

@@ -1,26 +0,34 @@

import React__default from 'react';
import HeroSliderModuleCss from './HeroSlider.module.css.js';
import Buttons from './components/Buttons/index.js';
import { SettingsProvider, useSettings } from './modules/Settings.js';
import { AnimationsProvider, useAnimations } from './modules/Animations.js';
import { ControllerProvider, useController } from './modules/Controller.js';
import { LayoutProvider, useLayout } from './modules/Layout.js';
import { AccessabilityProvider, useAccessability } from './modules/Accessability.js';
import { AutoplayProvider, useAutoplay } from './modules/Autoplay.js';
import { ManagerProvider } from './modules/Manager.js';
import { IntersectionObserverProvider, useIntersectionObserver } from './modules/IntersectionObserver.js';
import { composeCssClasses } from './utils/composeCssClasses.js';
import ConsoleLogger from './modules/ConsoleLogger.js';
'use strict';
const logger = ConsoleLogger.new();
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var index = require('./components/Buttons/index.js');
var HeroSlider_module = require('./HeroSlider.module.css.js');
var Accessability = require('./modules/Accessability.js');
var Animations = require('./modules/Animations.js');
var Autoplay = require('./modules/Autoplay.js');
var ConsoleLogger = require('./modules/ConsoleLogger.js');
var Controller = require('./modules/Controller.js');
var IntersectionObserver = require('./modules/IntersectionObserver.js');
var Layout = require('./modules/Layout.js');
var Manager = require('./modules/Manager.js');
var Settings = require('./modules/Settings.js');
var composeCssClasses = require('./utils/composeCssClasses.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
const logger = ConsoleLogger["default"].new();
function Orchestrator({ className, width = '100%', height = '100vh', style, children }) {
logger.info('[Orchestrator] rerender');
const { shouldDisplayButtons } = useAccessability();
const { sliderFadeInDuration, navbarFadeInDuration, navbarFadeInDelay } = useAnimations();
const { state: layout } = useLayout();
const { slidingDuration, slidingDelay, getSlidingCycleDuration } = useController();
const settings = useSettings();
const { debounce } = useAutoplay();
const { onTouchStartHandler, onTouchMoveHandler, onTouchEndHandler } = useAccessability();
const { elementObservedRef } = useIntersectionObserver();
const { shouldDisplayButtons } = Accessability.useAccessability();
const { sliderFadeInDuration, navbarFadeInDuration, navbarFadeInDelay } = Animations.useAnimations();
const { state: layout } = Layout.useLayout();
const { slidingDuration, slidingDelay, getSlidingCycleDuration } = Controller.useController();
const settings = Settings.useSettings();
const { debounce } = Autoplay.useAutoplay();
const { onTouchStartHandler, onTouchMoveHandler, onTouchEndHandler } = Accessability.useAccessability();
const { elementObservedRef } = IntersectionObserver.useIntersectionObserver();
/**

@@ -47,20 +55,21 @@ * CSS variables for the transitions.

};
return (React__default.createElement("div", { className: composeCssClasses('hero-slider-root', className), ref: elementObservedRef },
React__default.createElement("div", { ref: layout.slider, className: composeCssClasses('hero-slider-wrapper', HeroSliderModuleCss.Wrapper), onTouchStart: onTouchStartHandler, onTouchMove: onTouchMoveHandler, onTouchEnd: onTouchEndHandler, onMouseMoveCapture: debounce, style: Object.assign(Object.assign(Object.assign({}, CSSVariables), style), { width: width, height: height }) },
return (React__default["default"].createElement("div", { className: composeCssClasses.composeCssClasses('hero-slider-root', className), ref: elementObservedRef },
React__default["default"].createElement("div", { ref: layout.slider, className: composeCssClasses.composeCssClasses('hero-slider-wrapper', HeroSlider_module["default"].Wrapper), onTouchStart: onTouchStartHandler, onTouchMove: onTouchMoveHandler, onTouchEnd: onTouchEndHandler, onMouseMoveCapture: debounce, style: Object.assign(Object.assign(Object.assign({}, CSSVariables), style), { width,
height }) },
children,
shouldDisplayButtons && React__default.createElement(Buttons, null))));
shouldDisplayButtons && React__default["default"].createElement(index["default"], null))));
}
function HeroSlider(props) {
return (React__default.createElement(LayoutProvider, null,
React__default.createElement(ManagerProvider, { manager: props.manager },
React__default.createElement(SettingsProvider, { settings: props.settings },
React__default.createElement(ControllerProvider, { controller: props.controller },
React__default.createElement(AccessabilityProvider, { accessability: props.accessability },
React__default.createElement(AnimationsProvider, { animations: props.animations },
React__default.createElement(IntersectionObserverProvider, null,
React__default.createElement(AutoplayProvider, { autoplay: props.autoplay },
React__default.createElement(Orchestrator, { className: props.className, width: props.width, height: props.height, style: props.style }, props.children))))))))));
return (React__default["default"].createElement(Layout.LayoutProvider, null,
React__default["default"].createElement(Manager.ManagerProvider, { manager: props.manager },
React__default["default"].createElement(Settings.SettingsProvider, { settings: props.settings },
React__default["default"].createElement(Controller.ControllerProvider, { controller: props.controller },
React__default["default"].createElement(Accessability.AccessabilityProvider, { accessability: props.accessability },
React__default["default"].createElement(Animations.AnimationsProvider, { animations: props.animations },
React__default["default"].createElement(IntersectionObserver.IntersectionObserverProvider, null,
React__default["default"].createElement(Autoplay.AutoplayProvider, { autoplay: props.autoplay },
React__default["default"].createElement(Orchestrator, { className: props.className, width: props.width, height: props.height, style: props.style }, props.children))))))))));
}
export { HeroSlider as default };
exports["default"] = HeroSlider;
//# sourceMappingURL=HeroSlider.js.map

10

dist/HeroSlider.module.css.js

@@ -1,8 +0,12 @@

import styleInject from './node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var styleInject_es = require('./node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
var css_248z = ".HeroSlider-module_Wrapper__TaeBr {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n /* Removes gray highlight when clicked on safari/mobile. */\n -webkit-tap-highlight-color: rgba(0,0,0,0);\n animation: HeroSlider-module_fade-in__5as8N var(--slider-fade-in-duration, 100) ease-in;\n}\n\n@keyframes HeroSlider-module_fade-in__5as8N {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n.HeroSlider-module_Container__EBtOP {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 2;\n pointer-events: none;\n}\n\n/* `pointer-events` manipulation to allow clicking inner children AND children inside the Container. */\n.HeroSlider-module_Container__EBtOP * {\n pointer-events: auto;\n}\n\n/**\n* ------------------------------------\n* ----------ANIMATIONS----------------\n* ------------------------------------\n*/\n\n.HeroSlider-module_Sliding_Fade_In__mRgKX {\n /* keyframe name | duration | timing function | delay */\n animation: HeroSlider-module_slide-fade-in__s5eQJ var(--sliding-duration, 600ms) ease-in-out var(--sliding-delay, 0ms);\n}\n\n@keyframes HeroSlider-module_slide-fade-in__s5eQJ {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n.HeroSlider-module_Sliding_Left_To_Right__XPZWw {\n /* keyframe name | duration | timing function | delay */\n animation: HeroSlider-module_slide-left-to-right__mPnzQ var(--sliding-duration, 600ms) ease-in-out var(--sliding-delay, 0ms);\n}\n\n@keyframes HeroSlider-module_slide-left-to-right__mPnzQ {\n 0% {\n clip-path: inset(0% 100% 0% 0%);\n -webkit-clip-path: inset(0% 100% 0% 0%);\n }\n 100% {\n clip-path: inset(0% 0% 0% 0%);\n -webkit-clip-path: inset(0% 0% 0% 0%);\n }\n}\n\n.HeroSlider-module_Sliding_Right_To_Left__62-PD {\n /* keyframe name | duration | timing function | delay */\n animation: HeroSlider-module_slide-right-to-left__qlxI2 var(--sliding-duration, 600ms) ease-in-out var(--sliding-delay, 0ms);\n}\n\n@keyframes HeroSlider-module_slide-right-to-left__qlxI2 {\n 0% {\n clip-path: inset(0% 0% 0% 100%);\n -webkit-clip-path: inset(0% 0% 0% 100%);\n }\n 100% {\n clip-path: inset(0% 0% 0% 0%);\n -webkit-clip-path: inset(0% 0% 0% 0%);\n }\n}\n\n.HeroSlider-module_Sliding_Top_To_Bottom__9qXf- {\n /* keyframe name | duration | timing function | delay */\n animation: HeroSlider-module_slide-top-to-bottom__2AGIn var(--sliding-duration, 600ms) ease-in-out var(--sliding-delay, 0ms);\n}\n\n@keyframes HeroSlider-module_slide-top-to-bottom__2AGIn {\n 0% {\n clip-path: inset(0% 0% 100% 0%);\n -webkit-clip-path: inset(0% 0% 100% 0%);\n }\n 100% {\n clip-path: inset(0% 0% 0% 0%);\n -webkit-clip-path: inset(0% 0% 0% 0%);\n }\n}\n\n.HeroSlider-module_Sliding_Bottom_To_Top__fuFNk {\n /* keyframe name | duration | timing function | delay */\n animation: HeroSlider-module_slide-bottom-to-top__fkZ3m var(--sliding-duration, 600ms) ease-in-out var(--sliding-delay, 0ms);\n}\n\n@keyframes HeroSlider-module_slide-bottom-to-top__fkZ3m {\n 0% {\n clip-path: inset(100% 0% 0% 0%);\n -webkit-clip-path: inset(100% 0% 0% 0%);\n }\n 100% {\n clip-path: inset(0% 0% 0% 0%);\n -webkit-clip-path: inset(0% 0% 0% 0%);\n }\n}\n";
var HeroSliderModuleCss = {"Wrapper":"HeroSlider-module_Wrapper__TaeBr","fade-in":"HeroSlider-module_fade-in__5as8N","Container":"HeroSlider-module_Container__EBtOP","Sliding_Fade_In":"HeroSlider-module_Sliding_Fade_In__mRgKX","slide-fade-in":"HeroSlider-module_slide-fade-in__s5eQJ","Sliding_Left_To_Right":"HeroSlider-module_Sliding_Left_To_Right__XPZWw","slide-left-to-right":"HeroSlider-module_slide-left-to-right__mPnzQ","Sliding_Right_To_Left":"HeroSlider-module_Sliding_Right_To_Left__62-PD","slide-right-to-left":"HeroSlider-module_slide-right-to-left__qlxI2","Sliding_Top_To_Bottom":"HeroSlider-module_Sliding_Top_To_Bottom__9qXf-","slide-top-to-bottom":"HeroSlider-module_slide-top-to-bottom__2AGIn","Sliding_Bottom_To_Top":"HeroSlider-module_Sliding_Bottom_To_Top__fuFNk","slide-bottom-to-top":"HeroSlider-module_slide-bottom-to-top__fkZ3m"};
styleInject(css_248z);
styleInject_es["default"](css_248z);
export { HeroSliderModuleCss as default };
exports["default"] = HeroSliderModuleCss;
//# sourceMappingURL=HeroSlider.module.css.js.map

31

dist/index.js

@@ -1,9 +0,24 @@

export { default } from './HeroSlider.js';
export { AutoplayButton } from './components/AutoplayButton/index.js';
export { ButtonsNav } from './components/ButtonsNav/index.js';
export { MenuNav } from './components/MenuNav/index.js';
export { Nav } from './components/Nav/index.js';
export { Overlay } from './components/Overlay/index.js';
export { SideNav } from './components/SideNav/index.js';
export { Slide } from './components/Slide/index.js';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var HeroSlider = require('./HeroSlider.js');
var index = require('./components/AutoplayButton/index.js');
var index$1 = require('./components/ButtonsNav/index.js');
var index$2 = require('./components/MenuNav/index.js');
var index$3 = require('./components/Nav/index.js');
var index$4 = require('./components/Overlay/index.js');
var index$5 = require('./components/SideNav/index.js');
var index$6 = require('./components/Slide/index.js');
exports["default"] = HeroSlider["default"];
exports.AutoplayButton = index.AutoplayButton;
exports.ButtonsNav = index$1.ButtonsNav;
exports.MenuNav = index$2.MenuNav;
exports.Nav = index$3.Nav;
exports.Overlay = index$4.Overlay;
exports.SideNav = index$5.SideNav;
exports.Slide = index$6.Slide;
//# sourceMappingURL=index.js.map

39

dist/modules/Accessability.js

@@ -1,4 +0,12 @@

import React__default from 'react';
import { useController } from './Controller.js';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var Controller = require('./Controller.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
/**

@@ -9,14 +17,14 @@ * `AccessabilityOrientation` definition used for the `SliderProps.orientation` prop.

*/
var AccessabilityOrientation;
exports.AccessabilityOrientation = void 0;
(function (AccessabilityOrientation) {
AccessabilityOrientation["VERTICAL"] = "vertical";
AccessabilityOrientation["HORIZONTAL"] = "horizontal";
})(AccessabilityOrientation || (AccessabilityOrientation = {}));
})(exports.AccessabilityOrientation || (exports.AccessabilityOrientation = {}));
const defaultProps = {
shouldDisplayButtons: true,
shouldSlideOnArrowKeypress: true,
orientation: AccessabilityOrientation.HORIZONTAL,
orientation: exports.AccessabilityOrientation.HORIZONTAL,
thresholdToSlide: 50
};
const AccessabilityStateContext = React__default.createContext(undefined);
const AccessabilityStateContext = React__default["default"].createContext(undefined);
function accessabilityReducer(state, action) {

@@ -61,3 +69,3 @@ switch (action.type) {

};
const [state, dispatch] = React__default.useReducer(accessabilityReducer, {
const [state, dispatch] = React__default["default"].useReducer(accessabilityReducer, {
initialX: undefined,

@@ -68,3 +76,3 @@ initialY: undefined,

});
const { goToNextSlide, goToPreviousSlide } = useController();
const { goToNextSlide, goToPreviousSlide } = Controller.useController();
/**

@@ -103,4 +111,4 @@ * Sets the initial coordinates of the touch event.

const isSlidingHorizontally = Math.abs(diffX) > Math.abs(diffY);
const isSliderSetHorizontally = params.orientation === AccessabilityOrientation.HORIZONTAL;
const isSliderVertically = params.orientation === AccessabilityOrientation.VERTICAL;
const isSliderSetHorizontally = params.orientation === exports.AccessabilityOrientation.HORIZONTAL;
const isSliderVertically = params.orientation === exports.AccessabilityOrientation.VERTICAL;
if (isSlidingHorizontally &&

@@ -128,3 +136,3 @@ isSliderSetHorizontally &&

return;
const isHorizontal = params.orientation === AccessabilityOrientation.HORIZONTAL;
const isHorizontal = params.orientation === exports.AccessabilityOrientation.HORIZONTAL;
switch (true) {

@@ -152,3 +160,3 @@ // Left keypress.

*/
React__default.useEffect(() => {
React__default["default"].useEffect(() => {
window.addEventListener('keydown', onArrowKeypressHandler);

@@ -172,6 +180,6 @@ /**

};
return (React__default.createElement(AccessabilityStateContext.Provider, { value: value }, children));
return (React__default["default"].createElement(AccessabilityStateContext.Provider, { value: value }, children));
}
function useAccessability() {
const context = React__default.useContext(AccessabilityStateContext);
const context = React__default["default"].useContext(AccessabilityStateContext);
if (context === undefined) {

@@ -183,3 +191,4 @@ throw new Error('useAccessability must be used within a AccessabilityProvider');

export { AccessabilityOrientation, AccessabilityProvider, useAccessability };
exports.AccessabilityProvider = AccessabilityProvider;
exports.useAccessability = useAccessability;
//# sourceMappingURL=Accessability.js.map

39

dist/modules/Animations.js

@@ -1,5 +0,13 @@

import React__default from 'react';
import HeroSliderModuleCss from '../HeroSlider.module.css.js';
import { useAccessability, AccessabilityOrientation } from './Accessability.js';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var HeroSlider_module = require('../HeroSlider.module.css.js');
var Accessability = require('./Accessability.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var SlidingAnimation;

@@ -14,7 +22,7 @@ (function (SlidingAnimation) {

const SlidingAnimationCssClassMap = {
[SlidingAnimation.FADE]: HeroSliderModuleCss.Sliding_Fade_In,
[SlidingAnimation.TOP_TO_BOTTOM]: HeroSliderModuleCss.Sliding_Top_To_Bottom,
[SlidingAnimation.BOTTOM_TO_TOP]: HeroSliderModuleCss.Sliding_Bottom_To_Top,
[SlidingAnimation.LEFT_TO_RIGHT]: HeroSliderModuleCss.Sliding_Left_To_Right,
[SlidingAnimation.RIGHT_TO_LEFT]: HeroSliderModuleCss.Sliding_Right_To_Left
[SlidingAnimation.FADE]: HeroSlider_module["default"].Sliding_Fade_In,
[SlidingAnimation.TOP_TO_BOTTOM]: HeroSlider_module["default"].Sliding_Top_To_Bottom,
[SlidingAnimation.BOTTOM_TO_TOP]: HeroSlider_module["default"].Sliding_Bottom_To_Top,
[SlidingAnimation.LEFT_TO_RIGHT]: HeroSlider_module["default"].Sliding_Left_To_Right,
[SlidingAnimation.RIGHT_TO_LEFT]: HeroSlider_module["default"].Sliding_Right_To_Left
};

@@ -28,6 +36,6 @@ const defaultProps = {

};
const AnimationsStateContext = React__default.createContext(undefined);
const AnimationsStateContext = React__default["default"].createContext(undefined);
function AnimationsProvider({ children, animations }) {
var _a, _b, _c, _d;
const { orientation } = useAccessability();
const { orientation } = Accessability.useAccessability();
const params = {

@@ -54,7 +62,7 @@ slidingAnimation: (animations === null || animations === void 0 ? void 0 : animations.slidingAnimation) || defaultProps.slidingAnimation,

if (direction === 'forward')
return orientation === AccessabilityOrientation.HORIZONTAL
return orientation === Accessability.AccessabilityOrientation.HORIZONTAL
? SlidingAnimation.RIGHT_TO_LEFT
: SlidingAnimation.BOTTOM_TO_TOP;
else
return orientation === AccessabilityOrientation.HORIZONTAL
return orientation === Accessability.AccessabilityOrientation.HORIZONTAL
? SlidingAnimation.LEFT_TO_RIGHT

@@ -78,6 +86,6 @@ : SlidingAnimation.TOP_TO_BOTTOM;

};
return (React__default.createElement(AnimationsStateContext.Provider, { value: value }, children));
return (React__default["default"].createElement(AnimationsStateContext.Provider, { value: value }, children));
}
function useAnimations() {
const context = React__default.useContext(AnimationsStateContext);
const context = React__default["default"].useContext(AnimationsStateContext);
if (context === undefined) {

@@ -89,3 +97,4 @@ throw new Error('useAnimations must be used within a AnimationsProvider');

export { AnimationsProvider, useAnimations };
exports.AnimationsProvider = AnimationsProvider;
exports.useAnimations = useAnimations;
//# sourceMappingURL=Animations.js.map

55

dist/modules/Autoplay.js

@@ -1,8 +0,16 @@

import React__default from 'react';
import IntervalTimer, { IntervalState } from './IntervalTimer.js';
import { useController } from './Controller.js';
import { useIntersectionObserver } from './IntersectionObserver.js';
import ConsoleLogger from './ConsoleLogger.js';
'use strict';
const logger = ConsoleLogger.new();
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var ConsoleLogger = require('./ConsoleLogger.js');
var Controller = require('./Controller.js');
var IntersectionObserver = require('./IntersectionObserver.js');
var IntervalTimer = require('./IntervalTimer.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
const logger = ConsoleLogger["default"].new();
const defaultProps = {

@@ -12,3 +20,3 @@ autoplayDuration: 8000,

};
const AutoplayStateContext = React__default.createContext(undefined);
const AutoplayStateContext = React__default["default"].createContext(undefined);
function autoplayReducer(state, action) {

@@ -36,7 +44,7 @@ switch (action.type) {

};
const [state, dispatch] = React__default.useReducer(autoplayReducer, {
const [state, dispatch] = React__default["default"].useReducer(autoplayReducer, {
isPausedByUser: false,
debounceTimeout: undefined
});
const { state: controller, changeSlide, getNextSlide, getSlidingCycleDuration } = useController();
const { state: controller, changeSlide, getNextSlide, getSlidingCycleDuration } = Controller.useController();
const slidingCycleDuration = getSlidingCycleDuration();

@@ -46,6 +54,6 @@ const autoplayCycleDuration = Math.max(slidingCycleDuration, params.autoplayDuration);

logger.warn('[Autoplay] The `autoplayDuration` is lower than the sliding cycle duration (the result of `slidingDuration + slidingDelay`).', 'The sliding cycle duration will be used instead for the autoplay intervals.');
const autoplayInstance = IntervalTimer.new(() => {
const autoplayInstance = IntervalTimer["default"].new(() => {
changeSlide(getNextSlide(controller.activeSlide));
}, autoplayCycleDuration);
const { isInView } = useIntersectionObserver();
const { isInView } = IntersectionObserver.useIntersectionObserver();
/**

@@ -55,3 +63,3 @@ * Debounces the autoplay interval whene called.

const debounce = () => {
const isPausedOrIdle = autoplayInstance.state === IntervalState.IDLE || state.isPausedByUser;
const isPausedOrIdle = autoplayInstance.state === IntervalTimer.IntervalState.IDLE || state.isPausedByUser;
if (isPausedOrIdle)

@@ -86,3 +94,3 @@ return; // If the slider has been paused, do nothing.

*/
React__default.useEffect(() => {
React__default["default"].useEffect(() => {
if (state.isPausedByUser)

@@ -98,3 +106,3 @@ clearTimeout(state.debounceTimeout);

*/
React__default.useEffect(() => {
React__default["default"].useEffect(() => {
if (autoplay) {

@@ -105,3 +113,3 @@ switch (true) {

// When not in view, stop the autoplay.
case !isInView && autoplayInstance.state !== IntervalState.IDLE:
case !isInView && autoplayInstance.state !== IntervalTimer.IntervalState.IDLE:
autoplayInstance.stop();

@@ -111,3 +119,3 @@ logger.debug('[Autoplay] Stopped.');

// When in view and idle, start it.
case isInView && autoplayInstance.state === IntervalState.IDLE: {
case isInView && autoplayInstance.state === IntervalTimer.IntervalState.IDLE: {
autoplayInstance.start();

@@ -118,3 +126,3 @@ logger.debug('[Autoplay] Started.');

// When in view and paused, resume it.
case isInView && autoplayInstance.state === IntervalState.PAUSED: {
case isInView && autoplayInstance.state === IntervalTimer.IntervalState.PAUSED: {
autoplayInstance.resume();

@@ -126,3 +134,3 @@ logger.debug('[Autoplay] Resumed.');

}
else if (autoplayInstance.state !== IntervalState.IDLE) {
else if (autoplayInstance.state !== IntervalTimer.IntervalState.IDLE) {
autoplayInstance.stop();

@@ -135,3 +143,3 @@ logger.info('[Autoplay] Stopped.');

*/
React__default.useEffect(() => {
React__default["default"].useEffect(() => {
return () => {

@@ -146,3 +154,3 @@ clearTimeout(state.debounceTimeout);

*/
React__default.useEffect(() => {
React__default["default"].useEffect(() => {
clearTimeout(state.debounceTimeout);

@@ -160,6 +168,6 @@ return () => { };

};
return (React__default.createElement(AutoplayStateContext.Provider, { value: value }, children));
return (React__default["default"].createElement(AutoplayStateContext.Provider, { value: value }, children));
}
function useAutoplay() {
const context = React__default.useContext(AutoplayStateContext);
const context = React__default["default"].useContext(AutoplayStateContext);
if (context === undefined) {

@@ -171,3 +179,4 @@ throw new Error('useAutoplay must be used within a AutoplayProvider');

export { AutoplayProvider, useAutoplay };
exports.AutoplayProvider = AutoplayProvider;
exports.useAutoplay = useAutoplay;
//# sourceMappingURL=Autoplay.js.map

6

dist/modules/ConsoleLogger.js

@@ -0,1 +1,5 @@

'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
/**

@@ -44,3 +48,3 @@ * ConsoleLogger singleton.

export { ConsoleLogger as default };
exports["default"] = ConsoleLogger;
//# sourceMappingURL=ConsoleLogger.js.map

31

dist/modules/Controller.js

@@ -1,4 +0,12 @@

import React__default from 'react';
import { useManager } from './Manager.js';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var Manager = require('./Manager.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
const defaultProps = {

@@ -9,3 +17,3 @@ slidingDuration: 500,

};
const ControllerStateContext = React__default.createContext(undefined);
const ControllerStateContext = React__default["default"].createContext(undefined);
function settingsReducer(state, action) {

@@ -37,3 +45,3 @@ switch (action.type) {

};
const [state, dispatch] = React__default.useReducer(settingsReducer, {
const [state, dispatch] = React__default["default"].useReducer(settingsReducer, {
activeSlide: params.initialSlide,

@@ -46,3 +54,3 @@ prevActiveSlide: 0,

});
const { state: manager } = useManager();
const { state: manager } = Manager.useManager();
/**

@@ -116,3 +124,3 @@ * Returns the slide after the given slide (`activeSlide` by default) based on the total amount of slides.

*/
React__default.useEffect(() => {
React__default["default"].useEffect(() => {
if (controller === null || controller === void 0 ? void 0 : controller.goToNextSlidePointer)

@@ -124,3 +132,3 @@ controller.goToNextSlidePointer.current = goToNextSlide;

*/
React__default.useEffect(() => {
React__default["default"].useEffect(() => {
if (controller === null || controller === void 0 ? void 0 : controller.goToPreviousSlidePointer)

@@ -133,3 +141,3 @@ controller.goToPreviousSlidePointer.current = goToPreviousSlide;

*/
React__default.useEffect(() => {
React__default["default"].useEffect(() => {
dispatch({

@@ -173,6 +181,6 @@ type: 'set-delay-timeout',

};
return (React__default.createElement(ControllerStateContext.Provider, { value: value }, children));
return (React__default["default"].createElement(ControllerStateContext.Provider, { value: value }, children));
}
function useController() {
const context = React__default.useContext(ControllerStateContext);
const context = React__default["default"].useContext(ControllerStateContext);
if (context === undefined) {

@@ -184,3 +192,4 @@ throw new Error('useController must be used within a ControllerProvider');

export { ControllerProvider, useController };
exports.ControllerProvider = ControllerProvider;
exports.useController = useController;
//# sourceMappingURL=Controller.js.map

23

dist/modules/IntersectionObserver.js

@@ -1,7 +0,15 @@

import React__default from 'react';
import { useInView } from '../node_modules/.pnpm/react-intersection-observer@9.4.0_react@18.2.0/node_modules/react-intersection-observer/react-intersection-observer.modern.mjs.js';
'use strict';
const IntersectionObserverStateContext = React__default.createContext(undefined);
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var reactIntersectionObserver_modern = require('../node_modules/.pnpm/react-intersection-observer@9.4.0_react@18.2.0/node_modules/react-intersection-observer/react-intersection-observer.modern.mjs.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
const IntersectionObserverStateContext = React__default["default"].createContext(undefined);
function IntersectionObserverProvider({ children }) {
const [ref, inView] = useInView({ threshold: 0 });
const [ref, inView] = reactIntersectionObserver_modern.useInView({ threshold: 0 });
// NOTE: you *might* need to memoize this value

@@ -13,6 +21,6 @@ // Learn more in http://kcd.im/optimize-context

};
return (React__default.createElement(IntersectionObserverStateContext.Provider, { value: value }, children));
return (React__default["default"].createElement(IntersectionObserverStateContext.Provider, { value: value }, children));
}
function useIntersectionObserver() {
const context = React__default.useContext(IntersectionObserverStateContext);
const context = React__default["default"].useContext(IntersectionObserverStateContext);
if (context === undefined) {

@@ -24,3 +32,4 @@ throw new Error('useIntersectionObserver must be used within a IntersectionObserverProvider');

export { IntersectionObserverProvider, useIntersectionObserver };
exports.IntersectionObserverProvider = IntersectionObserverProvider;
exports.useIntersectionObserver = useIntersectionObserver;
//# sourceMappingURL=IntersectionObserver.js.map

28

dist/modules/IntervalTimer.js

@@ -1,2 +0,6 @@

var IntervalState;
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
exports.IntervalState = void 0;
(function (IntervalState) {

@@ -7,3 +11,3 @@ IntervalState[IntervalState["IDLE"] = 0] = "IDLE";

IntervalState[IntervalState["RESUME"] = 3] = "RESUME";
})(IntervalState || (IntervalState = {}));
})(exports.IntervalState || (exports.IntervalState = {}));
/**

@@ -36,3 +40,3 @@ * `IntervalTimer` is a class that handles logic for intervals, e.g. start stop, reset, resume, pause & maximum amount of fires.

*/
this.state = IntervalState.IDLE;
this.state = exports.IntervalState.IDLE;
/**

@@ -71,3 +75,3 @@ * Remaining time before the next interval.

this.timeoutHandler = () => {
if (this.state !== IntervalState.RESUME)
if (this.state !== exports.IntervalState.RESUME)
return;

@@ -86,3 +90,3 @@ this.pausedTime = 0;

this.lastTimeFired = new Date();
this.state = IntervalState.RUNNING;
this.state = exports.IntervalState.RUNNING;
};

@@ -97,3 +101,3 @@ /**

clearTimeout(this.resumeId);
this.state = IntervalState.IDLE;
this.state = exports.IntervalState.IDLE;
};

@@ -113,4 +117,4 @@ /**

this.pause = () => {
if (this.state !== IntervalState.RUNNING &&
this.state !== IntervalState.RESUME)
if (this.state !== exports.IntervalState.RUNNING &&
this.state !== exports.IntervalState.RESUME)
return;

@@ -124,3 +128,3 @@ this.remaining =

clearTimeout(this.resumeId);
this.state = IntervalState.PAUSED;
this.state = exports.IntervalState.PAUSED;
};

@@ -133,3 +137,3 @@ /**

this.resume = () => {
if (this.state !== IntervalState.PAUSED)
if (this.state !== exports.IntervalState.PAUSED)
return;

@@ -139,3 +143,3 @@ const currentDate = new Date();

+this.pausedTime + +currentDate - +(this.lastPauseTime || 0);
this.state = IntervalState.RESUME;
this.state = exports.IntervalState.RESUME;
this.resumeId = setTimeout(this.timeoutHandler, this.remaining);

@@ -180,3 +184,3 @@ };

export { IntervalState, IntervalTimer as default };
exports["default"] = IntervalTimer;
//# sourceMappingURL=IntervalTimer.js.map

2

dist/modules/Layout.d.ts

@@ -0,3 +1,3 @@

import type CSS from 'csstype';
import React from 'react';
import type CSS from 'csstype';
declare type State = {

@@ -4,0 +4,0 @@ slider: React.RefObject<HTMLDivElement>;

25

dist/modules/Layout.js

@@ -1,5 +0,13 @@

import React__default from 'react';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
const mobileThreshold = 1024;
const LayoutStateContext = React__default.createContext(undefined);
const LayoutStateContext = React__default["default"].createContext(undefined);
function layoutReducer(state, action) {

@@ -21,4 +29,4 @@ var _a, _b;

function LayoutProvider({ children }) {
const [state, dispatch] = React__default.useReducer(layoutReducer, {
slider: React__default.useRef(null),
const [state, dispatch] = React__default["default"].useReducer(layoutReducer, {
slider: React__default["default"].useRef(null),
width: undefined,

@@ -30,3 +38,3 @@ height: undefined

*/
React__default.useEffect(() => {
React__default["default"].useEffect(() => {
function updateSliderDimensions() {

@@ -48,6 +56,6 @@ if (state.slider.current)

const value = { state, mobileThreshold };
return (React__default.createElement(LayoutStateContext.Provider, { value: value }, children));
return (React__default["default"].createElement(LayoutStateContext.Provider, { value: value }, children));
}
function useLayout() {
const context = React__default.useContext(LayoutStateContext);
const context = React__default["default"].useContext(LayoutStateContext);
if (context === undefined) {

@@ -59,3 +67,4 @@ throw new Error('useLayout must be used within a LayoutProvider');

export { LayoutProvider, useLayout };
exports.LayoutProvider = LayoutProvider;
exports.useLayout = useLayout;
//# sourceMappingURL=Layout.js.map

23

dist/modules/Manager.js

@@ -1,3 +0,11 @@

import React__default from 'react';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
/**

@@ -21,3 +29,3 @@ * Detecs if on a mobile device.

};
const ManagerStateContext = React__default.createContext(undefined);
const ManagerStateContext = React__default["default"].createContext(undefined);
function managerReducer(state, action) {

@@ -49,3 +57,3 @@ switch (action.type) {

var _a;
const [state, dispatch] = React__default.useReducer(managerReducer, {
const [state, dispatch] = React__default["default"].useReducer(managerReducer, {
isMobile: (_a = manager === null || manager === void 0 ? void 0 : manager.isMobile) !== null && _a !== void 0 ? _a : defaultProps.isMobile,

@@ -85,3 +93,3 @@ slides: new Map(),

*/
React__default.useEffect(() => {
React__default["default"].useEffect(() => {
if (typeof (manager === null || manager === void 0 ? void 0 : manager.isMobile) === 'boolean')

@@ -96,6 +104,6 @@ dispatch({

const value = { state, getSlide, registerSlide, removeSlide };
return (React__default.createElement(ManagerStateContext.Provider, { value: value }, children));
return (React__default["default"].createElement(ManagerStateContext.Provider, { value: value }, children));
}
function useManager() {
const context = React__default.useContext(ManagerStateContext);
const context = React__default["default"].useContext(ManagerStateContext);
if (context === undefined) {

@@ -107,3 +115,4 @@ throw new Error('useManager must be used within a ManagerProvider');

export { ManagerProvider, useManager };
exports.ManagerProvider = ManagerProvider;
exports.useManager = useManager;
//# sourceMappingURL=Manager.js.map

4

dist/modules/Settings.d.ts

@@ -0,5 +1,5 @@

import type CSS from 'csstype';
import React from 'react';
import type CSS from 'csstype';
import { PartiallyRequired } from '../utils/PartiallyRequired';
import { LoggerLevels } from './ConsoleLogger';
import { PartiallyRequired } from '../utils/PartiallyRequired';
export interface SettingsProps {

@@ -6,0 +6,0 @@ /**

25

dist/modules/Settings.js

@@ -1,4 +0,12 @@

import React__default from 'react';
import ConsoleLogger from './ConsoleLogger.js';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var ConsoleLogger = require('./ConsoleLogger.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
const defaultProps = {

@@ -12,3 +20,3 @@ sliderColor: 'inherit',

};
const SettingsStateContext = React__default.createContext(undefined);
const SettingsStateContext = React__default["default"].createContext(undefined);
function SettingsProvider({ children, settings }) {

@@ -24,4 +32,4 @@ const params = {

*/
React__default.useEffect(() => {
ConsoleLogger.new(params.debug);
React__default["default"].useEffect(() => {
ConsoleLogger["default"].new(params.debug);
}, [params.debug]);

@@ -31,6 +39,6 @@ // NOTE: you *might* need to memoize this value

const value = params;
return (React__default.createElement(SettingsStateContext.Provider, { value: value }, children));
return (React__default["default"].createElement(SettingsStateContext.Provider, { value: value }, children));
}
function useSettings() {
const context = React__default.useContext(SettingsStateContext);
const context = React__default["default"].useContext(SettingsStateContext);
if (context === undefined) {

@@ -42,3 +50,4 @@ throw new Error('useSettings must be used within a SettingsProvider');

export { SettingsProvider, useSettings };
exports.SettingsProvider = SettingsProvider;
exports.useSettings = useSettings;
//# sourceMappingURL=Settings.js.map

39

dist/node_modules/.pnpm/react-intersection-observer@9.4.0_react@18.2.0/node_modules/react-intersection-observer/react-intersection-observer.modern.mjs.js

@@ -1,3 +0,27 @@

import * as React from 'react';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
const observerMap = new Map();

@@ -171,5 +195,5 @@ const RootIds = new WeakMap();

const [ref, setRef] = React.useState(null);
const callback = React.useRef();
const [state, setState] = React.useState({
const [ref, setRef] = React__namespace.useState(null);
const callback = React__namespace.useRef();
const [state, setState] = React__namespace.useState({
inView: !!initialInView,

@@ -181,3 +205,3 @@ entry: undefined

callback.current = onChange;
React.useEffect(() => {
React__namespace.useEffect(() => {
// Ensure we have node ref, and that we shouldn't skip observing

@@ -217,3 +241,3 @@ if (skip || !ref) return;

const entryTarget = (_state$entry = state.entry) == null ? void 0 : _state$entry.target;
React.useEffect(() => {
React__namespace.useEffect(() => {
if (!ref && entryTarget && !triggerOnce && !skip) {

@@ -236,3 +260,4 @@ // If we don't have a node ref, then reset the state (unless the hook is set to only `triggerOnce` or `skip`)

export { observe, useInView };
exports.observe = observe;
exports.useInView = useInView;
//# sourceMappingURL=react-intersection-observer.modern.mjs.js.map

6

dist/node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js

@@ -0,1 +1,5 @@

'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
function styleInject(css, ref) {

@@ -28,3 +32,3 @@ if ( ref === void 0 ) ref = {};

export { styleInject as default };
exports["default"] = styleInject;
//# sourceMappingURL=style-inject.es.js.map

6

dist/utils/composeCssClasses.js

@@ -0,1 +1,5 @@

'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
function composeCssClasses(...classes) {

@@ -22,3 +26,3 @@ return classes

export { composeCssClasses };
exports.composeCssClasses = composeCssClasses;
//# sourceMappingURL=composeCssClasses.js.map

50

package.json
{
"name": "hero-slider",
"version": "3.1.0",
"version": "3.1.1",
"private": false,

@@ -22,2 +22,18 @@ "description": "This package contains multiple components with a fair range of options to help developers quickly set up a hero slider.",

"types": "./dist/index.d.ts",
"scripts": {
"build": "pnpm rollup -c",
"dev": "pnpm watch",
"lint:fix": "tsc --noEmit && eslint --fix",
"lint:prepublish": "tsc --project tsconfig.build.json --noEmit && eslint",
"lint": "tsc --noEmit && eslint",
"prebuild": "rm -rf tsconfig.build.tsbuildinfo ./dist",
"prepublish": "pnpm build",
"prestart": "pnpm prebuild",
"start": "pnpm rollup -c -w",
"release:dry": "pnpm release-it --dry-run",
"release": "pnpm release-it",
"test": "pnpm jest",
"test:watch": "pnpm jest --watch",
"watch": "tsc --project tsconfig.build.json --watch"
},
"dependencies": {

@@ -31,4 +47,9 @@ "react-intersection-observer": "9.4.0"

"devDependencies": {
"@config/eslint": "0.0.0",
"@config/tsconfig": "0.0.0",
"@babel/preset-env": "~7.22.5",
"@babel/preset-react": "~7.22.5",
"@babel/preset-typescript": "~7.22.5",
"@config/eslint": "workspace:*",
"@config/jest": "workspace:*",
"@config/release-it": "workspace:*",
"@config/tsconfig": "workspace:*",
"@rollup/plugin-commonjs": "22.0.2",

@@ -38,2 +59,7 @@ "@rollup/plugin-node-resolve": "14.1.0",

"@svgr/rollup": "6.3.1",
"@testing-library/dom": "~9.3.1",
"@testing-library/jest-dom": "~5.16.5",
"@testing-library/react": "~13.3.0",
"@testing-library/user-event": "~13.5.0",
"@types/jest": "~29.5.1",
"@types/node": "18.7.22",

@@ -45,2 +71,4 @@ "@types/react": "18.0.21",

"gh-pages": "4.0.0",
"jest": "~29.5.0",
"jest-environment-jsdom": "~29.5.0",
"react": "18.2.0",

@@ -52,18 +80,6 @@ "react-dom": "18.2.0",

"rollup-plugin-postcss": "4.0.2",
"ts-jest": "~29.1.0",
"tslib": "2.4.0",
"typescript": "4.8.3"
},
"scripts": {
"build": "rollup -c",
"deploy": "gh-pages -d example/build",
"dev": "pnpm watch",
"prebuild": "rm -rf tsconfig.build.tsbuildinfo ./dist",
"predeploy": "cd example && npm install && npm run build",
"prepublish": "pnpm build",
"prestart": "pnpm prebuild",
"start": "rollup -c -w",
"test": "pnpm jest",
"test:watch": "pnpm jest --watch",
"watch": "tsc --project tsconfig.build.json --watch"
}
}
}
dist/node_modules/.pnpm/@rollup_plugin-typescript@8.5.0_jm3lfwhp2n3nxb4wwf6zz565he/node_modules/tslib/tslib.es6.js
dist/node_modules/.pnpm/@rollup_plugin-typescript@8.5.0_jm3lfwhp2n3nxb4wwf6zz565he/node_modules/tslib/tslib.es6.js.map
dist/components/AutoplayButton/index.js.map

Sorry, the diff of this file is not supported yet

dist/components/AutoplayButton/index.module.css.js.map

Sorry, the diff of this file is not supported yet

dist/components/Buttons/index.js.map

Sorry, the diff of this file is not supported yet

dist/components/Buttons/index.module.css.js.map

Sorry, the diff of this file is not supported yet

dist/components/ButtonsNav/index.js.map

Sorry, the diff of this file is not supported yet

dist/components/ButtonsNav/index.module.css.js.map

Sorry, the diff of this file is not supported yet

dist/components/MenuNav/index.js.map

Sorry, the diff of this file is not supported yet

dist/components/MenuNav/index.module.css.js.map

Sorry, the diff of this file is not supported yet

dist/components/Nav/index.js.map

Sorry, the diff of this file is not supported yet

dist/components/Nav/index.module.css.js.map

Sorry, the diff of this file is not supported yet

dist/components/Overlay/index.js.map

Sorry, the diff of this file is not supported yet

dist/components/Overlay/index.module.css.js.map

Sorry, the diff of this file is not supported yet

dist/components/SideNav/index.js.map

Sorry, the diff of this file is not supported yet

dist/components/SideNav/index.module.css.js.map

Sorry, the diff of this file is not supported yet

dist/components/Slide/Background/index.js.map

Sorry, the diff of this file is not supported yet

dist/components/Slide/Background/index.module.css.js.map

Sorry, the diff of this file is not supported yet

dist/components/Slide/index.js.map

Sorry, the diff of this file is not supported yet

dist/components/Slide/index.module.css.js.map

Sorry, the diff of this file is not supported yet

dist/components/Slide/Mask/index.js.map

Sorry, the diff of this file is not supported yet

dist/components/Slide/Mask/index.module.css.js.map

Sorry, the diff of this file is not supported yet

dist/HeroSlider.d.ts.map

Sorry, the diff of this file is not supported yet

dist/HeroSlider.js.map

Sorry, the diff of this file is not supported yet

dist/HeroSlider.module.css.js.map

Sorry, the diff of this file is not supported yet

dist/index.js.map

Sorry, the diff of this file is not supported yet

dist/modules/Accessability.d.ts.map

Sorry, the diff of this file is not supported yet

dist/modules/Accessability.js.map

Sorry, the diff of this file is not supported yet

dist/modules/Animations.d.ts.map

Sorry, the diff of this file is not supported yet

dist/modules/Animations.js.map

Sorry, the diff of this file is not supported yet

dist/modules/Autoplay.d.ts.map

Sorry, the diff of this file is not supported yet

dist/modules/Autoplay.js.map

Sorry, the diff of this file is not supported yet

dist/modules/ConsoleLogger.js.map

Sorry, the diff of this file is not supported yet

dist/modules/Controller.d.ts.map

Sorry, the diff of this file is not supported yet

dist/modules/Controller.js.map

Sorry, the diff of this file is not supported yet

dist/modules/IntersectionObserver.js.map

Sorry, the diff of this file is not supported yet

dist/modules/IntervalTimer.js.map

Sorry, the diff of this file is not supported yet

dist/modules/Layout.d.ts.map

Sorry, the diff of this file is not supported yet

dist/modules/Layout.js.map

Sorry, the diff of this file is not supported yet

dist/modules/Manager.js.map

Sorry, the diff of this file is not supported yet

dist/modules/Settings.d.ts.map

Sorry, the diff of this file is not supported yet

dist/modules/Settings.js.map

Sorry, the diff of this file is not supported yet

dist/node_modules/.pnpm/react-intersection-observer@9.4.0_react@18.2.0/node_modules/react-intersection-observer/react-intersection-observer.modern.mjs.js.map

Sorry, the diff of this file is not supported yet

dist/node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js.map

Sorry, the diff of this file is not supported yet

dist/utils/composeCssClasses.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc