@openameba/spindle-ui 0.24.0 → 0.26.0

package/Button/Button.css

@@ -1 +1 @@
-:root{--Button-tapHighlightColor:var(--gray-5-alpha);--Button-onFocus-boxShadow:0 0 0 1px var(--color-surface-primary),0 0 0 3px var(--color-focus-clarity);--Button--contained-backgroundColor:var(--color-surface-accent-primary);--Button--contained-color:var(--color-text-high-emphasis-inverse);--Button--contained-onActive-backgroundColor:var(--primary-green-100);--Button--contained-onHover-backgroundColor:var(--primary-green-100);--Button--outlined-borderColor:var(--color-surface-accent-primary);--Button--outlined-color:var(--color-surface-accent-primary);--Button--outlined-onActive-backgroundColor:var(--primary-green-5);--Button--outlined-onHover-backgroundColor:var(--primary-green-5);--Button--lighted-backgroundColor:var(--color-surface-accent-primary-light);--Button--lighted-color:var(--color-text-accent-primary);--Button--lighted-onActive-backgroundColor:var(--primary-green-10);--Button--lighted-onHover-backgroundColor:var(--primary-green-10);--Button--neutral-backgroundColor:var(--color-surface-tertiary);--Button--neutral-color:var(--color-text-medium-emphasis);--Button--neutral-onActive-backgroundColor:var(--gray-20-alpha);--Button--neutral-onHover-backgroundColor:var(--gray-20-alpha);--Button--danger-borderColor:var(--color-text-caution);--Button--danger-color:var(--color-text-caution);--Button--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--Button--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-Button{align-items:center;box-sizing:border-box;display:inline-flex;font-family:inherit;font-weight:700;justify-content:center;line-height:1.3;margin:0;-webkit-tap-highlight-color:var(--Button-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-Button:disabled{opacity:.3}.spui-Button:focus{box-shadow:var(--Button-onFocus-boxShadow);outline:none}.spui-Button:focus:not(:focus-visible){box-shadow:none}.spui-Button--fullWidth{width:100%}.spui-Button--large{border-radius:3em;font-size:1em;min-height:48px;padding-left:16px;padding-right:16px}.spui-Button--medium{border-radius:2.85714em;font-size:.875em;min-height:40px;padding-left:16px;padding-right:16px}.spui-Button--small{border-radius:2.46154em;font-size:.8125em;min-height:32px;padding-left:10px;padding-right:10px}@media (-ms-high-contrast:active),(-ms-high-contrast:none){.spui-Button--large,.spui-Button--medium,.spui-Button--small{height:1px}}.spui-Button--contained{background-color:var(--Button--contained-backgroundColor);border:none;color:var(--Button--contained-color);padding-bottom:8px;padding-top:8px}.spui-Button--contained:active{background-color:var(--Button--contained-onActive-backgroundColor)}@media (hover:hover){.spui-Button--contained:not([disabled]):hover{background-color:var(--Button--contained-onHover-backgroundColor)}}.spui-Button--outlined{background-color:transparent;border:2px solid var(--Button--outlined-borderColor);color:var(--Button--outlined-color);padding-bottom:6px;padding-top:6px}.spui-Button--outlined:active{background-color:var(--Button--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-Button--outlined:not([disabled]):hover{background-color:var(--Button--outlined-onHover-backgroundColor)}}.spui-Button--lighted{background-color:var(--Button--lighted-backgroundColor);border:none;color:var(--Button--lighted-color);padding-bottom:8px;padding-top:8px}.spui-Button--lighted:active{background-color:var(--Button--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-Button--lighted:not([disabled]):hover{background-color:var(--Button--lighted-onHover-backgroundColor)}}.spui-Button--neutral{background-color:var(--Button--neutral-backgroundColor);border:none;color:var(--Button--neutral-color);padding-bottom:8px;padding-top:8px}.spui-Button--neutral:active{background-color:var(--Button--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-Button--neutral:not([disabled]):hover{background-color:var(--Button--neutral-onHover-backgroundColor)}}.spui-Button--danger{background-color:transparent;border:2px solid var(--Button--danger-borderColor);color:var(--Button--danger-color);padding-bottom:6px;padding-top:6px}.spui-Button--danger:active{background-color:var(--Button--danger-onActive-backgroundColor)}@media (hover:hover){.spui-Button--danger:not([disabled]):hover{background-color:var(--Button--danger-onHover-backgroundColor)}}.spui-Button-icon{line-height:0}.spui-Button-icon--large{font-size:1.375em;margin-right:6px}.spui-Button-icon--medium{font-size:1.429em;margin-right:4px}.spui-Button-icon--small{font-size:1.23em;margin-right:2px}
+:root{--Button-tapHighlightColor:var(--gray-5-alpha);--Button-onFocus-boxShadow:0 0 0 1px var(--color-surface-primary),0 0 0 3px var(--color-focus-clarity);--Button--contained-backgroundColor:var(--color-surface-accent-primary);--Button--contained-color:var(--color-text-high-emphasis-inverse);--Button--contained-onActive-backgroundColor:var(--primary-green-100);--Button--contained-onHover-backgroundColor:var(--primary-green-100);--Button--outlined-borderColor:var(--color-border-accent-primary);--Button--outlined-color:var(--color-text-accent-primary);--Button--outlined-onActive-backgroundColor:var(--primary-green-5);--Button--outlined-onHover-backgroundColor:var(--primary-green-5);--Button--lighted-backgroundColor:var(--color-surface-accent-primary-light);--Button--lighted-color:var(--color-text-accent-primary);--Button--lighted-onActive-backgroundColor:var(--primary-green-10);--Button--lighted-onHover-backgroundColor:var(--primary-green-10);--Button--neutral-backgroundColor:var(--color-surface-tertiary);--Button--neutral-color:var(--color-text-medium-emphasis);--Button--neutral-onActive-backgroundColor:var(--gray-20-alpha);--Button--neutral-onHover-backgroundColor:var(--gray-20-alpha);--Button--danger-borderColor:var(--color-border-caution);--Button--danger-color:var(--color-text-caution);--Button--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--Button--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-Button{align-items:center;box-sizing:border-box;display:inline-flex;font-family:inherit;font-weight:700;justify-content:center;line-height:1.3;margin:0;-webkit-tap-highlight-color:var(--Button-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-Button:disabled{opacity:.3}.spui-Button:focus{box-shadow:var(--Button-onFocus-boxShadow);outline:none}.spui-Button:focus:not(:focus-visible){box-shadow:none}.spui-Button--fullWidth{width:100%}.spui-Button--large{border-radius:3em;font-size:1em;min-height:48px;padding-left:16px;padding-right:16px}.spui-Button--medium{border-radius:2.85714em;font-size:.875em;min-height:40px;padding-left:16px;padding-right:16px}.spui-Button--small{border-radius:2.46154em;font-size:.8125em;min-height:32px;padding-left:10px;padding-right:10px}@media (-ms-high-contrast:active),(-ms-high-contrast:none){.spui-Button--large,.spui-Button--medium,.spui-Button--small{height:1px}}.spui-Button--contained{background-color:var(--Button--contained-backgroundColor);border:none;color:var(--Button--contained-color);padding-bottom:8px;padding-top:8px}.spui-Button--contained:active{background-color:var(--Button--contained-onActive-backgroundColor)}@media (hover:hover){.spui-Button--contained:not([disabled]):hover{background-color:var(--Button--contained-onHover-backgroundColor)}}.spui-Button--outlined{background-color:transparent;border:2px solid var(--Button--outlined-borderColor);color:var(--Button--outlined-color);padding-bottom:6px;padding-top:6px}.spui-Button--outlined:active{background-color:var(--Button--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-Button--outlined:not([disabled]):hover{background-color:var(--Button--outlined-onHover-backgroundColor)}}.spui-Button--lighted{background-color:var(--Button--lighted-backgroundColor);border:none;color:var(--Button--lighted-color);padding-bottom:8px;padding-top:8px}.spui-Button--lighted:active{background-color:var(--Button--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-Button--lighted:not([disabled]):hover{background-color:var(--Button--lighted-onHover-backgroundColor)}}.spui-Button--neutral{background-color:var(--Button--neutral-backgroundColor);border:none;color:var(--Button--neutral-color);padding-bottom:8px;padding-top:8px}.spui-Button--neutral:active{background-color:var(--Button--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-Button--neutral:not([disabled]):hover{background-color:var(--Button--neutral-onHover-backgroundColor)}}.spui-Button--danger{background-color:transparent;border:2px solid var(--Button--danger-borderColor);color:var(--Button--danger-color);padding-bottom:6px;padding-top:6px}.spui-Button--danger:active{background-color:var(--Button--danger-onActive-backgroundColor)}@media (hover:hover){.spui-Button--danger:not([disabled]):hover{background-color:var(--Button--danger-onHover-backgroundColor)}}.spui-Button-icon{line-height:0}.spui-Button-icon--large{font-size:1.375em;margin-right:6px}.spui-Button-icon--medium{font-size:1.429em;margin-right:4px}.spui-Button-icon--small{font-size:1.23em;margin-right:2px}

package/CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.26.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.25.1...@openameba/spindle-ui@0.26.0) (2022-02-21)
+
+
+### Features
+
+* **spindle-ui:** add HeroCarousel component ([d7e0a53](https://github.com/openameba/spindle/commit/d7e0a5302cfca4d7600188098ef4dd224998e2bb))
+
+
+
+
+
+## [0.25.1](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.25.0...@openameba/spindle-ui@0.25.1) (2021-12-09)
+
+
+### Bug Fixes
+
+* **spindle-ui:** correct button tokens ([6b88a5f](https://github.com/openameba/spindle/commit/6b88a5fd5fd8677aec82add4fe3552674ace69cc))
+
+
+
+
+
+# [0.25.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.24.0...@openameba/spindle-ui@0.25.0) (2021-12-03)
+
+
+### Features
+
+* **spindle-icons:** update icons ([c96c886](https://github.com/openameba/spindle/commit/c96c8866eb5494ce90adac8d9449a3bece0c0370))
+
+
+
+
+
 # [0.24.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.23.1...@openameba/spindle-ui@0.24.0) (2021-11-29)
 
 

package/HeroCarousel/HeroCarousel.css

@@ -0,0 +1 @@
+:root{--HeroCarousel-onFocus-boxShadow:0 0 0 1px var(--color-surface-primary),0 0 0 3px var(--color-focus-clarity)}.spui-HeroCarousel-container{align-items:center;display:flex;height:11.6em;justify-content:center;overflow:hidden;padding:.6rem 0}.spui-HeroCarousel-list{display:flex;margin-right:.88em;padding:0 .44em;transition:transform .5s;width:16.7em}.spui-HeroCarousel-controls{align-items:center;border:1px solid var(--color-border-low-emphasis);border-radius:100px;display:flex;margin:.88em auto 0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.spui-HeroCarousel-control{align-items:center;background-color:transparent;border:none;display:flex;height:3em;justify-content:center;padding:0;width:3em}.spui-HeroCarousel-control:hover{opacity:.7}.spui-HeroCarousel-control:focus{box-shadow:var(--HeroCarousel-onFocus-boxShadow);outline:none}.spui-HeroCarousel-control:focus:not(:focus-visible){box-shadow:none}.spui-HeroCarousel-control--prev{border-radius:100px 0 0 100px;border-right:1px solid var(--color-border-low-emphasis)}.spui-HeroCarousel-control--next{border-left:1px solid var(--color-border-low-emphasis);border-radius:0 100px 100px 0}@media (prefers-reduced-motion:reduce){.spui-HeroCarousel-list{transition:1ms}}@media screen and (min-width:768px){.spui-HeroCarousel-container{height:13em}.spui-HeroCarousel-list{margin-right:1.5em;padding:0 .75em;width:18.5em}.spui-HeroCarousel-controls{margin-top:1.25em}.spui-HeroCarousel-control{height:3.3em;width:3.3em}}.spui-HeroCarousel-control>svg{color:var(--color-text-low-emphasis);height:1.35em;width:1.35em}@media screen and (min-width:768px){.spui-HeroCarousel-control>svg{height:1.5em;width:1.5em}}

package/HeroCarousel/HeroCarousel.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import type { CarouselItem } from './HeroCarouselItem';
+declare type Props = {
+    carouselList: CarouselItem[];
+};
+export declare const HeroCarousel: FC<Props>;
+export {};
+//# sourceMappingURL=HeroCarousel.d.ts.map

package/HeroCarousel/HeroCarousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroCarousel.d.ts","sourceRoot":"","sources":["../../src/HeroCarousel/HeroCarousel.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAKlC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAIvD,aAAK,KAAK,GAAG;IACX,YAAY,EAAE,YAAY,EAAE,CAAC;CAC9B,CAAC;AAKF,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,KAAK,CA0FjC,CAAC"}

package/HeroCarousel/HeroCarousel.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeroCarousel = void 0;
+var react_1 = __importDefault(require("react"));
+var ChevronLeftBold_1 = __importDefault(require("../Icon/ChevronLeftBold"));
+var ChevronRightBold_1 = __importDefault(require("../Icon/ChevronRightBold"));
+var Pause_1 = __importDefault(require("../Icon/Pause"));
+var PlayFill_1 = __importDefault(require("../Icon/PlayFill"));
+var HeroCarouselItem_1 = __importDefault(require("./HeroCarouselItem"));
+var useAutoPlayCarousel_1 = require("./hooks/useAutoPlayCarousel");
+var BLOCK_NAME = 'spui-HeroCarousel';
+var ITEM_LINK_CLASS_NAME = 'js-auto-play-carousel-item-link';
+exports.HeroCarousel = react_1.default.memo(function HeroCarousel(_a) {
+    var carouselList = _a.carouselList;
+    if (carouselList.length === 0) {
+        return null;
+    }
+    var _b = useAutoPlayCarousel_1.useAutoPlayCarousel({
+        items: carouselList,
+        itemLinkClassName: ITEM_LINK_CLASS_NAME,
+    }), handleSlideToPrev = _b.handleSlideToPrev, handleSlideToNext = _b.handleSlideToNext, handleMouseEnter = _b.handleMouseEnter, handleMouseDown = _b.handleMouseDown, handleMouseLeave = _b.handleMouseLeave, handleTouchStart = _b.handleTouchStart, handleTransitionEnd = _b.handleTransitionEnd, isAutoPlaying = _b.isAutoPlaying, isLinkClicked = _b.isLinkClicked, itemsToRender = _b.itemsToRender, listRef = _b.listRef, listStyles = _b.listStyles, toggleAutoPlay = _b.toggleAutoPlay, handleFocus = _b.handleFocus, handleBlur = _b.handleBlur;
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("div", { className: BLOCK_NAME + "-container", onBlur: handleBlur, onFocus: handleFocus, onMouseDown: handleMouseDown, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onTouchStart: handleTouchStart, onTransitionEnd: handleTransitionEnd },
+            react_1.default.createElement("ul", { "aria-roledescription": "\u30AB\u30EB\u30FC\u30BB\u30EB", className: BLOCK_NAME + "-list", ref: listRef, role: "group", style: listStyles }, itemsToRender.map(function (item, index) { return (react_1.default.createElement(HeroCarouselItem_1.default, { carouselItem: item, isLinkClicked: isLinkClicked, itemLinkClassName: ITEM_LINK_CLASS_NAME, key: "hero-carousel-" + index })); }))),
+        react_1.default.createElement("div", { className: BLOCK_NAME + "-controls" },
+            react_1.default.createElement("button", { "aria-label": "1\u3064\u524D\u306E\u30A2\u30A4\u30C6\u30E0\u306B\u79FB\u52D5", className: BLOCK_NAME + "-control " + BLOCK_NAME + "-control--prev", type: "button", onClick: handleSlideToPrev },
+                react_1.default.createElement(ChevronLeftBold_1.default, { "aria-hidden": true })),
+            react_1.default.createElement("button", { "aria-label": isAutoPlaying ? 'スライドを停止' : 'スライドを再生', className: BLOCK_NAME + "-control", type: "button", onClick: toggleAutoPlay }, isAutoPlaying ? (react_1.default.createElement(Pause_1.default, { "aria-hidden": true })) : (react_1.default.createElement(PlayFill_1.default, { "aria-hidden": true }))),
+            react_1.default.createElement("button", { "aria-label": "1\u3064\u5F8C\u308D\u306E\u30A2\u30A4\u30C6\u30E0\u306B\u79FB\u52D5", className: BLOCK_NAME + "-control " + BLOCK_NAME + "-control--next", type: "button", onClick: handleSlideToNext },
+                react_1.default.createElement(ChevronRightBold_1.default, { "aria-hidden": true })))));
+});
+//# sourceMappingURL=HeroCarousel.js.map

package/HeroCarousel/HeroCarousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroCarousel.js","sourceRoot":"","sources":["../../src/HeroCarousel/HeroCarousel.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAkC;AAClC,4EAAsD;AACtD,8EAAwD;AACxD,wDAAkC;AAClC,8DAAwC;AAExC,wEAAkD;AAClD,mEAAkE;AAMlE,IAAM,UAAU,GAAG,mBAAmB,CAAC;AACvC,IAAM,oBAAoB,GAAG,iCAAiC,CAAC;AAElD,QAAA,YAAY,GAAc,eAAK,CAAC,IAAI,CAAC,SAAS,YAAY,CAAC,EAEvE;QADC,YAAY,kBAAA;IAEZ,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE;QAC7B,OAAO,IAAI,CAAC;KACb;IAEK,IAAA,KAgBF,yCAAmB,CAAC;QACtB,KAAK,EAAE,YAAY;QACnB,iBAAiB,EAAE,oBAAoB;KACxC,CAAC,EAlBA,iBAAiB,uBAAA,EACjB,iBAAiB,uBAAA,EACjB,gBAAgB,sBAAA,EAChB,eAAe,qBAAA,EACf,gBAAgB,sBAAA,EAChB,gBAAgB,sBAAA,EAChB,mBAAmB,yBAAA,EACnB,aAAa,mBAAA,EACb,aAAa,mBAAA,EACb,aAAa,mBAAA,EACb,OAAO,aAAA,EACP,UAAU,gBAAA,EACV,cAAc,oBAAA,EACd,WAAW,iBAAA,EACX,UAAU,gBAIV,CAAC;IAEH,OAAO,CACL;QACE,uCACE,SAAS,EAAK,UAAU,eAAY,EACpC,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,WAAW,EACpB,WAAW,EAAE,eAAe,EAC5B,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,EAC9B,eAAe,EAAE,mBAAmB;YAEpC,8DACuB,gCAAO,EAC5B,SAAS,EAAK,UAAU,UAAO,EAC/B,GAAG,EAAE,OAAO,EACZ,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,UAAU,IAEhB,aAAa,CAAC,GAAG,CAAC,UAAC,IAAkB,EAAE,KAAa,IAAK,OAAA,CACxD,8BAAC,0BAAgB,IACf,YAAY,EAAE,IAAI,EAClB,aAAa,EAAE,aAAa,EAC5B,iBAAiB,EAAE,oBAAoB,EACvC,GAAG,EAAE,mBAAiB,KAAO,GAC7B,CACH,EAPyD,CAOzD,CAAC,CACC,CACD;QAEN,uCAAK,SAAS,EAAK,UAAU,cAAW;YACtC,wDACa,+DAAa,EACxB,SAAS,EAAK,UAAU,iBAAY,UAAU,mBAAgB,EAC9D,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,iBAAiB;gBAE1B,8BAAC,yBAAe,mBAAc,IAAI,GAAI,CAC/B;YACT,wDACc,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACjD,SAAS,EAAK,UAAU,aAAU,EAClC,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,cAAc,IAEtB,aAAa,CAAC,CAAC,CAAC,CACf,8BAAC,eAAK,mBAAc,IAAI,GAAI,CAC7B,CAAC,CAAC,CAAC,CACF,8BAAC,kBAAQ,mBAAc,IAAI,GAAI,CAChC,CACM;YACT,wDACa,qEAAc,EACzB,SAAS,EAAK,UAAU,iBAAY,UAAU,mBAAgB,EAC9D,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,iBAAiB;gBAE1B,8BAAC,0BAAgB,mBAAc,IAAI,GAAI,CAChC,CACL,CACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/HeroCarousel/HeroCarouselItem.css

@@ -0,0 +1 @@
+:root{--HeroCarouselItem-onFocus-boxShadow:0 0 0 1px var(--color-surface-primary),0 0 0 3px var(--color-focus-clarity)}.spui-HeroCarouselItem-listItem{list-style:none;padding:0 .44em;width:100%}.spui-HeroCarouselItem-link{border:1px solid var(--color-border-low-emphasis);border-radius:12px;box-sizing:border-box;display:flex;flex-direction:column;height:12em;text-decoration:none}.spui-HeroCarouselItem-link:focus{box-shadow:var(--HeroCarouselItem-onFocus-boxShadow);outline:none}.spui-HeroCarouselItem-link:focus:not(:focus-visible){box-shadow:none}.spui-HeroCarouselItem-imageBlock{align-items:center;border-bottom:1px solid var(--color-border-low-emphasis);border-radius:12px 12px 0 0;display:flex;height:9.5em;justify-content:center;overflow:hidden}.spui-HeroCarouselItem-image{height:100%}.spui-HeroCarouselItem-titleContainer{align-items:center;box-sizing:border-box;display:flex;height:2.89em;justify-content:center;padding:0 .5em}.spui-HeroCarouselItem-title{color:var(--color-text-high-emphasis);font-size:.9375em;font-weight:700;margin:0;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}@media screen and (min-width:768px){.spui-HeroCarouselItem-listItem{padding:0 .75em}.spui-HeroCarouselItem-link{height:13.8em}.spui-HeroCarouselItem-titleContainer{height:3.3em}.spui-HeroCarouselItem-title{font-size:1em}.spui-HeroCarouselItem-imageBlock{height:10.9em}}

package/HeroCarousel/HeroCarouselItem.d.ts

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import './HeroCarouselItem.css';
+export declare type CarouselItem = {
+    imageUrl: string;
+    link: string;
+    title: string;
+};
+declare type Props = {
+    carouselItem: CarouselItem;
+    isLinkClicked: boolean;
+    itemLinkClassName: string;
+};
+export declare const HeroCarouselItem: FC<Props>;
+export default HeroCarouselItem;
+//# sourceMappingURL=HeroCarouselItem.d.ts.map

package/HeroCarousel/HeroCarouselItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroCarouselItem.d.ts","sourceRoot":"","sources":["../../src/HeroCarousel/HeroCarouselItem.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAe,EAAE,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,wBAAwB,CAAC;AAEhC,oBAAY,YAAY,GAAG;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,aAAK,KAAK,GAAG;IACX,YAAY,EAAE,YAAY,CAAC;IAC3B,aAAa,EAAE,OAAO,CAAC;IACvB,iBAAiB,EAAE,MAAM,CAAC;CAC3B,CAAC;AAIF,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,KAAK,CA0CtC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/HeroCarousel/HeroCarouselItem.js

@@ -0,0 +1,47 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeroCarouselItem = void 0;
+var react_1 = __importStar(require("react"));
+require("./HeroCarouselItem.css");
+var BLOCK_NAME = 'spui-HeroCarouselItem';
+exports.HeroCarouselItem = react_1.default.memo(function HeroCarouselItem(_a) {
+    var carouselItem = _a.carouselItem, isLinkClicked = _a.isLinkClicked, itemLinkClassName = _a.itemLinkClassName;
+    var handleLinkClick = react_1.useCallback(function (e) {
+        if (!isLinkClicked) {
+            e.preventDefault();
+        }
+    }, [isLinkClicked]);
+    return (react_1.default.createElement("li", { className: BLOCK_NAME + "-listItem" },
+        react_1.default.createElement("a", { className: itemLinkClassName + " " + BLOCK_NAME + "-link", href: carouselItem.link, onClick: handleLinkClick },
+            react_1.default.createElement("span", { className: BLOCK_NAME + "-imageBlock" },
+                react_1.default.createElement("img", { alt: "", className: BLOCK_NAME + "-image", src: carouselItem.imageUrl })),
+            react_1.default.createElement("div", { className: BLOCK_NAME + "-titleContainer" },
+                react_1.default.createElement("p", { className: BLOCK_NAME + "-title" }, carouselItem.title)))));
+}, function (prevProps, nextProps) {
+    return prevProps.isLinkClicked === nextProps.isLinkClicked &&
+        prevProps.itemLinkClassName === nextProps.itemLinkClassName &&
+        prevProps.carouselItem.title === nextProps.carouselItem.title &&
+        prevProps.carouselItem.link === nextProps.carouselItem.link &&
+        prevProps.carouselItem.imageUrl === nextProps.carouselItem.imageUrl;
+});
+exports.default = exports.HeroCarouselItem;
+//# sourceMappingURL=HeroCarouselItem.js.map

package/HeroCarousel/HeroCarouselItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroCarouselItem.js","sourceRoot":"","sources":["../../src/HeroCarousel/HeroCarouselItem.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+C;AAC/C,kCAAgC;AAchC,IAAM,UAAU,GAAG,uBAAuB,CAAC;AAE9B,QAAA,gBAAgB,GAAc,eAAK,CAAC,IAAI,CACnD,SAAS,gBAAgB,CAAC,EAIzB;QAHC,YAAY,kBAAA,EACZ,aAAa,mBAAA,EACb,iBAAiB,uBAAA;IAEjB,IAAM,eAAe,GAAG,mBAAW,CACjC,UAAC,CAAyC;QACxC,IAAI,CAAC,aAAa,EAAE;YAClB,CAAC,CAAC,cAAc,EAAE,CAAC;SACpB;IACH,CAAC,EACD,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,OAAO,CACL,sCAAI,SAAS,EAAK,UAAU,cAAW;QACrC,qCACE,SAAS,EAAK,iBAAiB,SAAI,UAAU,UAAO,EACpD,IAAI,EAAE,YAAY,CAAC,IAAI,EACvB,OAAO,EAAE,eAAe;YAExB,wCAAM,SAAS,EAAK,UAAU,gBAAa;gBACzC,uCACE,GAAG,EAAC,EAAE,EACN,SAAS,EAAK,UAAU,WAAQ,EAChC,GAAG,EAAE,YAAY,CAAC,QAAQ,GAC1B,CACG;YACP,uCAAK,SAAS,EAAK,UAAU,oBAAiB;gBAC5C,qCAAG,SAAS,EAAK,UAAU,WAAQ,IAAG,YAAY,CAAC,KAAK,CAAK,CACzD,CACJ,CACD,CACN,CAAC;AACJ,CAAC,EACD,UAAC,SAAS,EAAE,SAAS;IACnB,OAAA,SAAS,CAAC,aAAa,KAAK,SAAS,CAAC,aAAa;QACnD,SAAS,CAAC,iBAAiB,KAAK,SAAS,CAAC,iBAAiB;QAC3D,SAAS,CAAC,YAAY,CAAC,KAAK,KAAK,SAAS,CAAC,YAAY,CAAC,KAAK;QAC7D,SAAS,CAAC,YAAY,CAAC,IAAI,KAAK,SAAS,CAAC,YAAY,CAAC,IAAI;QAC3D,SAAS,CAAC,YAAY,CAAC,QAAQ,KAAK,SAAS,CAAC,YAAY,CAAC,QAAQ;AAJnE,CAImE,CACtE,CAAC;AAEF,kBAAe,wBAAgB,CAAC"}

package/HeroCarousel/hooks/useAutoPlayCarousel.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+declare type Payload<Item> = {
+    items: Item[];
+    itemLinkClassName: string;
+};
+export declare function useAutoPlayCarousel<Item>({ items, itemLinkClassName, }: Payload<Item>): {
+    handleSlideToPrev: () => void;
+    handleSlideToNext: () => void;
+    handleMouseEnter: () => void;
+    handleMouseDown: (e: React.MouseEvent) => void;
+    handleMouseLeave: () => void;
+    handleTouchStart: (e: React.TouchEvent) => void;
+    handleTransitionEnd: () => void;
+    isAutoPlaying: boolean;
+    isLinkClicked: boolean;
+    itemsToRender: Item[];
+    listRef: import("react").RefObject<HTMLUListElement>;
+    listStyles: {
+        transition: string;
+        transform: string;
+    };
+    toggleAutoPlay: () => void;
+    handleFocus: (e: React.FocusEvent<HTMLDivElement>) => void;
+    handleBlur: () => void;
+};
+export {};
+//# sourceMappingURL=useAutoPlayCarousel.d.ts.map

package/HeroCarousel/hooks/useAutoPlayCarousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAutoPlayCarousel.d.ts","sourceRoot":"","sources":["../../../src/HeroCarousel/hooks/useAutoPlayCarousel.ts"],"names":[],"mappings":";AAOA,aAAK,OAAO,CAAC,IAAI,IAAI;IACnB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,iBAAiB,EAAE,MAAM,CAAC;CAC3B,CAAC;AAKF,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,EACxC,KAAK,EACL,iBAAiB,GAClB,EAAE,OAAO,CAAC,IAAI,CAAC;;;;yBAsFc,gBAAgB;;0BA2Bf,gBAAgB;;;;;;;;;;;qBA4BrB,gBAAgB,CAAC,cAAc,CAAC;;EA0DzD"}

package/HeroCarousel/hooks/useAutoPlayCarousel.js

@@ -0,0 +1,168 @@
+"use strict";
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAutoPlayCarousel = void 0;
+var react_1 = require("react");
+var useAutoSlide_1 = require("./useAutoSlide");
+var useCarouselFocus_1 = require("./useCarouselFocus");
+var useSliderMoveEvent_1 = require("./useSliderMoveEvent");
+var useSliderTransition_1 = require("./useSliderTransition");
+var useValueRef_1 = require("./useValueRef");
+var COPY_COUNT = 5;
+var SWIPE_THRESHOLD_X = 20;
+function useAutoPlayCarousel(_a) {
+    var items = _a.items, itemLinkClassName = _a.itemLinkClassName;
+    var _b = useSliderMoveEvent_1.useSliderMoveEvent(), diffXRef = _b.diffXRef, diffYRef = _b.diffYRef, setDiffX = _b.setDiffX, setDiffY = _b.setDiffY, setStartX = _b.setStartX, setStartY = _b.setStartY;
+    var _c = react_1.useState(0), focusOffset = _c[0], setFocusOffset = _c[1];
+    var _d = react_1.useState(false), isHovering = _d[0], setIsHovering = _d[1];
+    var _e = react_1.useState(false), isLinkClicked = _e[0], setIsLinkClicked = _e[1];
+    var isHoveringRef = useValueRef_1.useValueRef(isHovering);
+    var slideToNextRef = useValueRef_1.useValueRef(function () { return slideToNext(); });
+    var itemCount = react_1.useMemo(function () { return items.length; }, [items]);
+    var getIsCopiedItem = react_1.useCallback(function (index) {
+        return index < COPY_COUNT || index >= itemCount + COPY_COUNT;
+    }, [itemCount]);
+    var _f = useAutoSlide_1.useAutoSlide({
+        onTimeOut: slideToNextRef.current,
+    }), isAutoPlaying = _f.isAutoPlaying, setIsAutoPlaying = _f.setIsAutoPlaying, resetAutoSlide = _f.resetAutoSlide, resetTimeOut = _f.resetTimeOut, toggleAutoPlay = _f.toggleAutoPlay;
+    var _g = useCarouselFocus_1.useCarouselFocus({
+        getIsCopiedItem: getIsCopiedItem,
+        itemLinkClassName: itemLinkClassName,
+    }), linkRefs = _g.linkRefs, listRef = _g.listRef;
+    var isAutoPlayingRef = useValueRef_1.useValueRef(isAutoPlaying);
+    var _h = useSliderTransition_1.useSliderTransition({
+        copyCount: COPY_COUNT,
+        itemCount: itemCount,
+        isAutoPlaying: isAutoPlaying,
+        linkRefs: linkRefs,
+    }), currentIndexRef = _h.currentIndexRef, handleTransitionEnd = _h.handleTransitionEnd, listStyles = _h.listStyles, setCurrentIndex = _h.setCurrentIndex, setDisableAutoFocus = _h.setDisableAutoFocus, setDisableTransition = _h.setDisableTransition;
+    var itemsToRender = react_1.useMemo(
+    // generate copy contents on both ends to make carousel look like looping
+    function () { return __spreadArrays(items.slice(-COPY_COUNT), items, items.slice(0, COPY_COUNT)); }, [items]);
+    var slideToNext = function (ignoreHover) {
+        if (ignoreHover === void 0) { ignoreHover = false; }
+        var shouldSlideToNext = ((!isHoveringRef.current && isAutoPlayingRef.current) || ignoreHover) &&
+            currentIndexRef.current <= itemCount;
+        if (shouldSlideToNext) {
+            setDisableTransition(false);
+            setCurrentIndex(currentIndexRef.current + 1);
+        }
+        resetAutoSlide();
+    };
+    var slideToPrev = function () {
+        if (currentIndexRef.current >= 0) {
+            setDisableTransition(false);
+            setCurrentIndex(currentIndexRef.current - 1);
+        }
+        resetAutoSlide();
+    };
+    var handleMouseEnter = function () { return setIsHovering(true); };
+    var handleMouseLeave = function () {
+        setIsHovering(false);
+        resetAutoSlide();
+    };
+    var handleMouseDown = function (e) {
+        resetTimeOut();
+        setStartX(e.clientX);
+        setStartY(e.clientY);
+    };
+    var onMouseUp = function () {
+        if (diffXRef.current > SWIPE_THRESHOLD_X) {
+            setIsLinkClicked(false);
+            setIsAutoPlaying(false);
+            slideToPrev();
+        }
+        if (diffXRef.current < -SWIPE_THRESHOLD_X) {
+            setIsLinkClicked(false);
+            setIsAutoPlaying(false);
+            slideToNext(true);
+        }
+        if (diffXRef.current === 0 && diffYRef.current === 0) {
+            setIsLinkClicked(true);
+        }
+        setStartX(null);
+        setStartY(null);
+        setDiffX(0);
+        setDiffY(0);
+    };
+    var handleTouchStart = function (e) {
+        if (!e.touches.length)
+            return;
+        var touch = e.touches[0];
+        resetTimeOut();
+        handleMouseEnter();
+        setStartX(touch.clientX);
+        setStartY(touch.clientY);
+    };
+    var onTouchEnd = function () {
+        setIsHovering(false);
+        onMouseUp();
+    };
+    var handleSlideToPrev = function () {
+        resetTimeOut();
+        setIsAutoPlaying(false);
+        slideToPrev();
+    };
+    var handleSlideToNext = function () {
+        resetTimeOut();
+        setIsAutoPlaying(false);
+        slideToNext(true);
+    };
+    var handleFocus = function (e) {
+        setIsAutoPlaying(false);
+        var newFocusOffset = e.target.offsetLeft;
+        setFocusOffset(newFocusOffset);
+        if (focusOffset === 0) {
+            return;
+        }
+        setDisableAutoFocus(true);
+        if (isHovering && diffXRef.current === 0 && diffYRef.current === 0) {
+            setIsLinkClicked(true);
+            return;
+        }
+        if (focusOffset > newFocusOffset) {
+            setDisableTransition(false);
+            setCurrentIndex(currentIndexRef.current - 1);
+        }
+        if (focusOffset < newFocusOffset) {
+            setDisableTransition(false);
+            setCurrentIndex(currentIndexRef.current + 1);
+        }
+    };
+    var handleBlur = function () {
+        setIsAutoPlaying(true);
+    };
+    react_1.useEffect(function () {
+        document.body.addEventListener('mouseup', onMouseUp);
+        document.body.addEventListener('touchend', onTouchEnd);
+        return function () {
+            document.body.removeEventListener('mouseup', onMouseUp);
+            document.body.removeEventListener('touchend', onTouchEnd);
+        };
+    }, []);
+    return {
+        handleSlideToPrev: handleSlideToPrev,
+        handleSlideToNext: handleSlideToNext,
+        handleMouseEnter: handleMouseEnter,
+        handleMouseDown: handleMouseDown,
+        handleMouseLeave: handleMouseLeave,
+        handleTouchStart: handleTouchStart,
+        handleTransitionEnd: handleTransitionEnd,
+        isAutoPlaying: isAutoPlaying,
+        isLinkClicked: isLinkClicked,
+        itemsToRender: itemsToRender,
+        listRef: listRef,
+        listStyles: listStyles,
+        toggleAutoPlay: toggleAutoPlay,
+        handleFocus: handleFocus,
+        handleBlur: handleBlur,
+    };
+}
+exports.useAutoPlayCarousel = useAutoPlayCarousel;
+//# sourceMappingURL=useAutoPlayCarousel.js.map

package/HeroCarousel/hooks/useAutoPlayCarousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAutoPlayCarousel.js","sourceRoot":"","sources":["../../../src/HeroCarousel/hooks/useAutoPlayCarousel.ts"],"names":[],"mappings":"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"}

package/HeroCarousel/hooks/useAutoSlide.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+declare type Payload = {
+    onTimeOut: () => void;
+};
+export declare function useAutoSlide({ onTimeOut }: Payload): {
+    isAutoPlaying: boolean;
+    setIsAutoPlaying: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    resetAutoSlide: () => void;
+    resetTimeOut: () => void;
+    toggleAutoPlay: () => void;
+};
+export {};
+//# sourceMappingURL=useAutoSlide.d.ts.map

package/HeroCarousel/hooks/useAutoSlide.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAutoSlide.d.ts","sourceRoot":"","sources":["../../../src/HeroCarousel/hooks/useAutoSlide.ts"],"names":[],"mappings":";AAIA,aAAK,OAAO,GAAG;IACb,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,EAAE,OAAO;;;;;;EA8ClD"}

package/HeroCarousel/hooks/useAutoSlide.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAutoSlide = void 0;
+var react_1 = require("react");
+var AUTO_SLIDE_SPEED = 4000; // ms
+function useAutoSlide(_a) {
+    var onTimeOut = _a.onTimeOut;
+    var _b = react_1.useState(true), isAutoPlaying = _b[0], setIsAutoPlaying = _b[1];
+    var _c = react_1.useState(null), timeoutId = _c[0], setTimeoutId = _c[1];
+    var resetTimeOut = react_1.useCallback(function () {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+    }, [timeoutId]);
+    var activateAutoSlide = function () {
+        resetTimeOut();
+        var newTimeoutId = setTimeout(function () {
+            onTimeOut();
+        }, AUTO_SLIDE_SPEED);
+        setTimeoutId(newTimeoutId);
+    };
+    var resetAutoSlide = function () {
+        if (isAutoPlaying) {
+            activateAutoSlide();
+        }
+    };
+    var toggleAutoPlay = function () {
+        resetTimeOut();
+        if (!isAutoPlaying) {
+            activateAutoSlide();
+        }
+        setIsAutoPlaying(function (prev) { return !prev; });
+    };
+    react_1.useEffect(function () {
+        activateAutoSlide();
+    }, []);
+    return {
+        isAutoPlaying: isAutoPlaying,
+        setIsAutoPlaying: setIsAutoPlaying,
+        resetAutoSlide: resetAutoSlide,
+        resetTimeOut: resetTimeOut,
+        toggleAutoPlay: toggleAutoPlay,
+    };
+}
+exports.useAutoSlide = useAutoSlide;
+//# sourceMappingURL=useAutoSlide.js.map

package/HeroCarousel/hooks/useAutoSlide.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAutoSlide.js","sourceRoot":"","sources":["../../../src/HeroCarousel/hooks/useAutoSlide.ts"],"names":[],"mappings":";;;AAAA,+BAAyD;AAEzD,IAAM,gBAAgB,GAAG,IAAI,CAAC,CAAC,KAAK;AAMpC,SAAgB,YAAY,CAAC,EAAsB;QAApB,SAAS,eAAA;IAChC,IAAA,KAAoC,gBAAQ,CAAC,IAAI,CAAC,EAAjD,aAAa,QAAA,EAAE,gBAAgB,QAAkB,CAAC;IACnD,IAAA,KAA4B,gBAAQ,CAAwB,IAAI,CAAC,EAAhE,SAAS,QAAA,EAAE,YAAY,QAAyC,CAAC;IAExE,IAAM,YAAY,GAAG,mBAAW,CAAC;QAC/B,IAAI,SAAS,EAAE;YACb,YAAY,CAAC,SAAS,CAAC,CAAC;SACzB;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,IAAM,iBAAiB,GAAG;QACxB,YAAY,EAAE,CAAC;QAEf,IAAM,YAAY,GAAG,UAAU,CAAC;YAC9B,SAAS,EAAE,CAAC;QACd,CAAC,EAAE,gBAAgB,CAAC,CAAC;QAErB,YAAY,CAAC,YAAY,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,IAAM,cAAc,GAAG;QACrB,IAAI,aAAa,EAAE;YACjB,iBAAiB,EAAE,CAAC;SACrB;IACH,CAAC,CAAC;IAEF,IAAM,cAAc,GAAG;QACrB,YAAY,EAAE,CAAC;QAEf,IAAI,CAAC,aAAa,EAAE;YAClB,iBAAiB,EAAE,CAAC;SACrB;QACD,gBAAgB,CAAC,UAAC,IAAI,IAAK,OAAA,CAAC,IAAI,EAAL,CAAK,CAAC,CAAC;IACpC,CAAC,CAAC;IAEF,iBAAS,CAAC;QACR,iBAAiB,EAAE,CAAC;IACtB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,aAAa,eAAA;QACb,gBAAgB,kBAAA;QAChB,cAAc,gBAAA;QACd,YAAY,cAAA;QACZ,cAAc,gBAAA;KACf,CAAC;AACJ,CAAC;AA9CD,oCA8CC"}

package/HeroCarousel/hooks/useCarouselFocus.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+declare type Payload = {
+    getIsCopiedItem: (index: number) => boolean;
+    itemLinkClassName: string;
+};
+export declare function useCarouselFocus({ getIsCopiedItem, itemLinkClassName, }: Payload): {
+    linkRefs: import("react").MutableRefObject<HTMLLinkElement[]>;
+    listRef: import("react").RefObject<HTMLUListElement>;
+};
+export {};
+//# sourceMappingURL=useCarouselFocus.d.ts.map

package/HeroCarousel/hooks/useCarouselFocus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCarouselFocus.d.ts","sourceRoot":"","sources":["../../../src/HeroCarousel/hooks/useCarouselFocus.ts"],"names":[],"mappings":";AAEA,aAAK,OAAO,GAAG;IACb,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC5C,iBAAiB,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,eAAe,EACf,iBAAiB,GAClB,EAAE,OAAO;;;EA+BT"}

package/HeroCarousel/hooks/useCarouselFocus.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCarouselFocus = void 0;
+var react_1 = require("react");
+function useCarouselFocus(_a) {
+    var getIsCopiedItem = _a.getIsCopiedItem, itemLinkClassName = _a.itemLinkClassName;
+    var listRef = react_1.useRef(null);
+    var linkRefs = react_1.useRef([]);
+    react_1.useEffect(function () {
+        if (!listRef.current)
+            return;
+        var linkElements = listRef.current.querySelectorAll("a." + itemLinkClassName);
+        if (!linkElements)
+            return;
+        // NOTE: use NodeList forEach as IE polyfill
+        Array.prototype.forEach.call(linkElements, function (link, index) {
+            linkRefs.current.push(link);
+            link.setAttribute('tabindex', getIsCopiedItem(index) ? '-1' : '0');
+            link.setAttribute('aria-hidden', getIsCopiedItem(index) ? 'true' : 'false');
+        });
+    }, [getIsCopiedItem, itemLinkClassName]);
+    return {
+        linkRefs: linkRefs,
+        listRef: listRef,
+    };
+}
+exports.useCarouselFocus = useCarouselFocus;
+//# sourceMappingURL=useCarouselFocus.js.map

package/HeroCarousel/hooks/useCarouselFocus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCarouselFocus.js","sourceRoot":"","sources":["../../../src/HeroCarousel/hooks/useCarouselFocus.ts"],"names":[],"mappings":";;;AAAA,+BAA0C;AAO1C,SAAgB,gBAAgB,CAAC,EAGvB;QAFR,eAAe,qBAAA,EACf,iBAAiB,uBAAA;IAEjB,IAAM,OAAO,GAAG,cAAM,CAAmB,IAAI,CAAC,CAAC;IAC/C,IAAM,QAAQ,GAAG,cAAM,CAAoB,EAAE,CAAC,CAAC;IAE/C,iBAAS,CAAC;QACR,IAAI,CAAC,OAAO,CAAC,OAAO;YAAE,OAAO;QAE7B,IAAM,YAAY,GAAG,OAAO,CAAC,OAAO,CAAC,gBAAgB,CACnD,OAAK,iBAAmB,CACzB,CAAC;QAEF,IAAI,CAAC,YAAY;YAAE,OAAO;QAE1B,4CAA4C;QAC5C,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAC1B,YAAY,EACZ,UAAC,IAAqB,EAAE,KAAK;YAC3B,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAC5B,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;YACnE,IAAI,CAAC,YAAY,CACf,aAAa,EACb,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAC1C,CAAC;QACJ,CAAC,CACF,CAAC;IACJ,CAAC,EAAE,CAAC,eAAe,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAEzC,OAAO;QACL,QAAQ,UAAA;QACR,OAAO,SAAA;KACR,CAAC;AACJ,CAAC;AAlCD,4CAkCC"}

package/HeroCarousel/hooks/useSliderMoveEvent.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare function useSliderMoveEvent(): {
+    diffXRef: import("react").MutableRefObject<number>;
+    diffYRef: import("react").MutableRefObject<number>;
+    setDiffX: import("react").Dispatch<import("react").SetStateAction<number>>;
+    setDiffY: import("react").Dispatch<import("react").SetStateAction<number>>;
+    setStartX: import("react").Dispatch<import("react").SetStateAction<number | null>>;
+    setStartY: import("react").Dispatch<import("react").SetStateAction<number | null>>;
+};
+//# sourceMappingURL=useSliderMoveEvent.d.ts.map

package/HeroCarousel/hooks/useSliderMoveEvent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSliderMoveEvent.d.ts","sourceRoot":"","sources":["../../../src/HeroCarousel/hooks/useSliderMoveEvent.ts"],"names":[],"mappings":";AAGA,wBAAgB,kBAAkB;;;;;;;EAsDjC"}

package/HeroCarousel/hooks/useSliderMoveEvent.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSliderMoveEvent = void 0;
+var react_1 = require("react");
+var useValueRef_1 = require("./useValueRef");
+function useSliderMoveEvent() {
+    var _a = react_1.useState(0), diffX = _a[0], setDiffX = _a[1];
+    var _b = react_1.useState(0), diffY = _b[0], setDiffY = _b[1];
+    var _c = react_1.useState(null), startX = _c[0], setStartX = _c[1];
+    var _d = react_1.useState(null), startY = _d[0], setStartY = _d[1];
+    var diffXRef = useValueRef_1.useValueRef(diffX);
+    var diffYRef = useValueRef_1.useValueRef(diffY);
+    var startXRef = useValueRef_1.useValueRef(startX);
+    var startYRef = useValueRef_1.useValueRef(startY);
+    var onMouseMove = function (e) {
+        if (startXRef.current === null || startYRef.current === null)
+            return;
+        e.preventDefault();
+        setDiffX(e.clientX - startXRef.current);
+        setDiffY(e.clientY - startYRef.current);
+    };
+    var onTouchMove = function (e) {
+        if (startXRef.current === null ||
+            startYRef.current === null ||
+            !e.touches.length) {
+            return;
+        }
+        var touch = e.touches[0];
+        setDiffX(touch.clientX - startXRef.current);
+        setDiffY(touch.clientY - startYRef.current);
+    };
+    react_1.useEffect(function () {
+        document.body.addEventListener('mousemove', onMouseMove);
+        document.body.addEventListener('touchmove', onTouchMove, {
+            passive: true,
+        });
+        return function () {
+            document.body.removeEventListener('mousemove', onMouseMove);
+            document.body.removeEventListener('touchmove', onTouchMove);
+        };
+    }, []);
+    return {
+        diffXRef: diffXRef,
+        diffYRef: diffYRef,
+        setDiffX: setDiffX,
+        setDiffY: setDiffY,
+        setStartX: setStartX,
+        setStartY: setStartY,
+    };
+}
+exports.useSliderMoveEvent = useSliderMoveEvent;
+//# sourceMappingURL=useSliderMoveEvent.js.map

package/HeroCarousel/hooks/useSliderMoveEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSliderMoveEvent.js","sourceRoot":"","sources":["../../../src/HeroCarousel/hooks/useSliderMoveEvent.ts"],"names":[],"mappings":";;;AAAA,+BAA4C;AAC5C,6CAA4C;AAE5C,SAAgB,kBAAkB;IAC1B,IAAA,KAAoB,gBAAQ,CAAC,CAAC,CAAC,EAA9B,KAAK,QAAA,EAAE,QAAQ,QAAe,CAAC;IAChC,IAAA,KAAoB,gBAAQ,CAAC,CAAC,CAAC,EAA9B,KAAK,QAAA,EAAE,QAAQ,QAAe,CAAC;IAChC,IAAA,KAAsB,gBAAQ,CAAgB,IAAI,CAAC,EAAlD,MAAM,QAAA,EAAE,SAAS,QAAiC,CAAC;IACpD,IAAA,KAAsB,gBAAQ,CAAgB,IAAI,CAAC,EAAlD,MAAM,QAAA,EAAE,SAAS,QAAiC,CAAC;IAC1D,IAAM,QAAQ,GAAG,yBAAW,CAAC,KAAK,CAAC,CAAC;IACpC,IAAM,QAAQ,GAAG,yBAAW,CAAC,KAAK,CAAC,CAAC;IACpC,IAAM,SAAS,GAAG,yBAAW,CAAC,MAAM,CAAC,CAAC;IACtC,IAAM,SAAS,GAAG,yBAAW,CAAC,MAAM,CAAC,CAAC;IAEtC,IAAM,WAAW,GAAG,UAAC,CAAa;QAChC,IAAI,SAAS,CAAC,OAAO,KAAK,IAAI,IAAI,SAAS,CAAC,OAAO,KAAK,IAAI;YAAE,OAAO;QAErE,CAAC,CAAC,cAAc,EAAE,CAAC;QAEnB,QAAQ,CAAC,CAAC,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;QACxC,QAAQ,CAAC,CAAC,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;IAC1C,CAAC,CAAC;IAEF,IAAM,WAAW,GAAG,UAAC,CAAa;QAChC,IACE,SAAS,CAAC,OAAO,KAAK,IAAI;YAC1B,SAAS,CAAC,OAAO,KAAK,IAAI;YAC1B,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,EACjB;YACA,OAAO;SACR;QAED,IAAM,KAAK,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAE3B,QAAQ,CAAC,KAAK,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;QAC5C,QAAQ,CAAC,KAAK,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;IAC9C,CAAC,CAAC;IAEF,iBAAS,CAAC;QACR,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;QACzD,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,EAAE;YACvD,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;QAEH,OAAO;YACL,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;YAC5D,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;QAC9D,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,QAAQ,UAAA;QACR,QAAQ,UAAA;QACR,QAAQ,UAAA;QACR,QAAQ,UAAA;QACR,SAAS,WAAA;QACT,SAAS,WAAA;KACV,CAAC;AACJ,CAAC;AAtDD,gDAsDC"}

package/HeroCarousel/hooks/useSliderTransition.d.ts

@@ -0,0 +1,20 @@
+import { MutableRefObject } from 'react';
+declare type Payload = {
+    copyCount: number;
+    itemCount: number;
+    linkRefs: MutableRefObject<HTMLLinkElement[]>;
+    isAutoPlaying: boolean;
+};
+export declare function useSliderTransition({ copyCount, itemCount, linkRefs, isAutoPlaying, }: Payload): {
+    currentIndexRef: MutableRefObject<number>;
+    handleTransitionEnd: () => void;
+    listStyles: {
+        transition: string;
+        transform: string;
+    };
+    setCurrentIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
+    setDisableAutoFocus: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    setDisableTransition: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};
+export {};
+//# sourceMappingURL=useSliderTransition.d.ts.map