@yoursurprise/slider 0.0.1

package/.eslintignore

@@ -0,0 +1 @@
+.eslintrc.js

package/.eslintrc.js

@@ -0,0 +1,45 @@
+module.exports = {
+    extends: [
+        'eslint:recommended',
+        'airbnb-typescript',
+        'airbnb/hooks',
+        'plugin:import/recommended',
+    ],
+    rules: {
+        'react/jsx-indent': ['error', 4],
+        'react/jsx-indent-props': ['error', 4],
+        'react/jsx-props-no-spreading': ['error', { custom: 'ignore' }],
+        'react/prop-types': 'off',
+        'react/require-default-props': 'off',
+        'indent': ['error', 4, {SwitchCase: 1}],
+        '@typescript-eslint/indent': ['error', 4],
+        'import/no-extraneous-dependencies': [
+            'error',
+            {
+                devDependencies: [
+                    '**/*.test.*',
+                    '**/rollup.config.js*',
+                    '**/babel.config.js*',
+                    '**/jest.config.js*',
+                    '**/[mM]ock[s?]/**'
+                ]
+            }
+        ],
+
+    },
+    plugins: ['react', "testing-library"],
+    env: {
+        browser: true,
+        es6: true,
+        node: true,
+    },
+    parser: '@typescript-eslint/parser',
+    parserOptions: {
+        project: ['./tsconfig.json'],
+        ecmaFeatures: {
+            jsx: true,
+        },
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+    },
+};

package/.github/workflows/lint.yml

@@ -0,0 +1,18 @@
+name: Lint
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+jobs:
+  linting:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out repository code
+        uses: actions/checkout@v3
+      - name: Install
+        run: npm ci
+      - name: Lint
+        run: npm run lint
+      - name: Test
+        run: npm run test -- --coverage

package/.github/workflows/publish.yml

@@ -0,0 +1,23 @@
+name: Publish
+on:
+  release:
+    types: [created]
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out repository code
+        uses: actions/checkout@v3
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16.x'
+          registry-url: 'https://registry.npmjs.org'
+      - name: Install
+        run: npm ci
+      - name: Build
+        run: npm run build
+      - name: Publish
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    presets: [
+        '@babel/preset-env',
+        ['@babel/preset-react', { runtime: 'automatic' }],
+        '@babel/preset-typescript',
+    ],
+};

package/dist/cjs/index.css

@@ -0,0 +1,2 @@
+.slider{position:relative}.slider__button{bottom:0;display:none;height:48px;margin:auto 0;position:absolute;top:0;width:48px}@media (hover:hover){.slider__button{display:flex}}.slider__button--next{right:-8px}@media screen and (min-width:768px){.slider__button--next{right:0}}.slider__button--prev{left:-8px}@media screen and (min-width:768px){.slider__button--prev{left:0}}.slider__wrapper{-ms-overflow-style:none;display:flex;flex-direction:row;margin:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none}.slider__wrapper::-webkit-scrollbar{display:none}@media screen and (min-width:768px){.slider__wrapper{margin:8px}}@media (hover:hover){.slider__wrapper{scroll-snap-type:none}}.slider__wrapper.is-scrollable{cursor:move}.slider__wrapper.is-dragging{cursor:grabbing;user-select:none}.slider__wrapper:not(.is-dragging){scroll-behavior:smooth}.slider__wrapper__slide{margin-right:8px;scroll-snap-align:start}@media screen and (min-width:768px){.slider__wrapper__slide{margin-left:0;margin-right:16px}}.slider__wrapper__slide:last-child{margin-right:0}
+/*# sourceMappingURL=index.css.map */

package/dist/cjs/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Slider.scss"],"names":[],"mappings":"AAAA,QACE,iBACF,CACA,gBAEE,QAAS,CAKT,YAAa,CAHb,WAAY,CADZ,aAAc,CAGd,iBAAkB,CALlB,KAAM,CAIN,UAGF,CACA,qBACE,gBACE,YACF,CACF,CACA,sBACE,UACF,CACA,oCACE,sBACE,OACF,CACF,CACA,sBACE,SACF,CACA,oCACE,sBACE,MACF,CACF,CACA,iBAEE,uBAAwB,CAExB,YAAa,CACb,kBAAmB,CAEnB,WAAY,CADZ,eAAgB,CALhB,6BAA8B,CAO9B,4BAA6B,CAL7B,oBAMF,CACA,oCACE,YACF,CACA,oCACE,iBACE,UACF,CACF,CACA,qBACE,iBACE,qBACF,CACF,CACA,+BACE,WACF,CACA,6BACE,eAAgB,CAChB,gBACF,CACA,mCACE,sBACF,CACA,wBAEE,gBAAiB,CADjB,uBAEF,CACA,oCACE,wBACE,aAAc,CACd,iBACF,CACF,CACA,mCACE,cACF","file":"index.css","sourcesContent":[".slider {\n  position: relative;\n}\n.slider__button {\n  top: 0;\n  bottom: 0;\n  margin: auto 0;\n  height: 48px;\n  width: 48px;\n  position: absolute;\n  display: none;\n}\n@media (hover: hover) {\n  .slider__button {\n    display: flex;\n  }\n}\n.slider__button--next {\n  right: -8px;\n}\n@media screen and (min-width: 768px) {\n  .slider__button--next {\n    right: 0;\n  }\n}\n.slider__button--prev {\n  left: -8px;\n}\n@media screen and (min-width: 768px) {\n  .slider__button--prev {\n    left: 0;\n  }\n}\n.slider__wrapper {\n  overscroll-behavior-x: contain;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  display: flex;\n  flex-direction: row;\n  overflow-x: auto;\n  margin: 16px;\n  scroll-snap-type: x proximity;\n}\n.slider__wrapper::-webkit-scrollbar {\n  display: none;\n}\n@media screen and (min-width: 768px) {\n  .slider__wrapper {\n    margin: 8px;\n  }\n}\n@media (hover: hover) {\n  .slider__wrapper {\n    scroll-snap-type: initial;\n  }\n}\n.slider__wrapper.is-scrollable {\n  cursor: move;\n}\n.slider__wrapper.is-dragging {\n  cursor: grabbing;\n  user-select: none;\n}\n.slider__wrapper:not(.is-dragging) {\n  scroll-behavior: smooth;\n}\n.slider__wrapper__slide {\n  scroll-snap-align: start;\n  margin-right: 8px;\n}\n@media screen and (min-width: 768px) {\n  .slider__wrapper__slide {\n    margin-left: 0;\n    margin-right: 16px;\n  }\n}\n.slider__wrapper__slide:last-child {\n  margin-right: 0;\n}"]}

package/dist/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";var e,t,r=require("react/jsx-runtime"),n=require("react");!function(e){e[e.FULL=0]="FULL",e[e.PARTIAL=1]="PARTIAL",e[e.NONE=2]="NONE"}(e||(e={})),function(e){e[e.PREV=0]="PREV",e[e.NEXT=1]="NEXT"}(t||(t={}));module.exports=({children:s})=>{const c=n.useRef([]),i=n.useRef(null),l=n.useRef([]),o=n.useRef([]),[u,a]=n.useState(!1),[d,f]=n.useState(!1),[h,b]=n.useState(!1),[L,g]=n.useState({clientX:0,scrollX:0}),m=n.useRef(null),p=n.useRef(null);n.useEffect((()=>{const e=i.current;if(!e)return()=>{};const t=()=>a(e.classList.toggle("is-scrollable",e.scrollWidth>e.clientWidth));return window?.addEventListener("resize",t),t(),()=>{window?.removeEventListener("resize",t)}}),[i]),n.useEffect((()=>{i.current?.classList.toggle("is-scrollable",u)}),[u]),n.useEffect((()=>{i.current?.classList.toggle("is-dragging",d);const e=e=>{e.stopPropagation(),e.preventDefault(),b(!1),f(!1)};return d&&document?.addEventListener("mouseup",e),()=>{document?.removeEventListener("mouseup",e)}}),[d]);const E=()=>l.current[0]??o.current[0]??-1,v=()=>l.current[l.current.length-1]??o.current[o.current.length-1]??-1,N=n.useCallback((()=>{const e=v()+1===c.current.length,t=u&&!1===e,r=E()>0&&u;p.current&&m.current&&(p.current.classList.toggle("hidden",!1===t),p.current.ariaHidden=String(!1===t),m.current.classList.toggle("hidden",!1===r),m.current.ariaHidden=String(!1===r))}),[u]),R=t=>t>=.9?e.FULL:t>=.5?e.PARTIAL:e.NONE;n.useEffect((()=>{if(!i.current)return()=>{};N();const t=new IntersectionObserver((t=>{t.forEach((t=>{const r=t.target,n=Number(r.dataset.slideIndex);R(t.intersectionRatio)===e.FULL?l.current.push(n):l.current=l.current.filter((e=>e!==n)),R(t.intersectionRatio)===e.PARTIAL?o.current.push(n):o.current=o.current.filter((e=>e!==n))})),l.current=[...new Set(l.current)].sort(((e,t)=>e-t)),o.current=[...new Set(o.current)].sort(((e,t)=>e-t)),N()}),{root:i.current,threshold:[0,.5,.9]});return c.current.forEach((({element:e})=>t.observe(e))),()=>t.disconnect()}),[i,N]);const _=e=>{if(!i.current)return;const r=e===t.PREV?E()-1:v()+1,n=c.current[r];let s=0;n&&(s=e===t.PREV?n.element.offsetLeft-i.current.offsetLeft-i.current.clientWidth+n.element.clientWidth:n.element.offsetLeft-i.current.offsetLeft,i.current.scrollTo({behavior:"smooth",left:s,top:0}))};return r.jsxs("div",{className:"slider",children:[r.jsx("div",{className:"slider__wrapper",role:"list",ref:i,onMouseDown:e=>{g({...L,clientX:e.clientX,scrollX:i.current?.scrollLeft??0}),f(!0)},onMouseMove:e=>{i.current&&d&&(Math.abs(L.clientX-e.clientX)>5&&b(!0),i.current.scrollLeft=L.scrollX+L.clientX-e.clientX)},onMouseUp:()=>{f(!1)},onClickCapture:e=>{h&&(e.stopPropagation(),e.preventDefault()),b(!1)},children:n.Children.map(s,((t,n)=>r.jsx("div",{className:"slider__wrapper__slide",role:"listitem","data-slide-index":n,ref:t=>{t&&((t,r)=>{c.current[r]={element:t,visibility:e.NONE}})(t,n)},children:t},n)))}),r.jsx("button",{"aria-label":"Previous slide",type:"button",onClick:()=>_(t.PREV),ref:m,className:"slider__button slider__button--prev button button--ghost button--clean button--has-icon hidden",children:r.jsx("i",{className:"icon-chevron-left"})}),r.jsx("button",{"aria-label":"Next slide",type:"button",onClick:()=>_(t.NEXT),ref:p,className:"slider__button slider__button--next button button--ghost button--clean button--has-icon hidden",children:r.jsx("i",{className:"icon-chevron-right"})})]})};
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/src/src/Slider.tsx"],"sourcesContent":[null],"names":["Visbility","NavigationDirection","children","slides","useRef","wrapper","visibleSlideIndices","partiallyVisibleSlideIndices","isScrollable","setIsScrollable","useState","isDragging","setIsDragging","isBlockingClicks","setIsBlockingClicks","mousePosition","setMousePosition","clientX","scrollX","arrowPrevRef","arrowNextRef","useEffect","currentWrapper","current","checkScrollable","classList","toggle","scrollWidth","clientWidth","window","addEventListener","removeEventListener","onDocumentMouseUp","event","stopPropagation","preventDefault","document","getFirstVisibleSlideIndex","getLastVisibleSlideIndex","length","setControlsVisibility","useCallback","lastSlideFullyVisible","moreContentAvailable","previousContentAvailable","ariaHidden","String","getVisibilityByIntersectionRatio","intersectionRatio","FULL","PARTIAL","NONE","intersectionObserver","IntersectionObserver","entries","forEach","entry","target","index","Number","dataset","slideIndex","push","filter","Set","sort","a","b","root","threshold","element","observe","disconnect","navigate","direction","targetSlideIndex","PREV","targetSlide","scrollLeft","offsetLeft","scrollTo","behavior","left","top","_jsxs","jsxs","className","_jsx","role","ref","onMouseDown","onMouseMove","Math","abs","onMouseUp","onClickCapture","Children","map","child","node","visibility","addSlide","type","onClick","NEXT"],"mappings":"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"}

package/dist/cjs/jest.config.d.ts

@@ -0,0 +1,3 @@
+import type { Config } from '@jest/types';
+declare const config: Partial<Config.ConfigGlobals>;
+export default config;

package/dist/cjs/src/Slider.d.ts

@@ -0,0 +1,4 @@
+import type React from 'react';
+import type { PropsWithChildren } from 'react';
+import './Slider.scss';
+export declare const Slider: React.FC<PropsWithChildren>;

package/dist/cjs/src/Slider.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/cjs/src/index.d.ts

@@ -0,0 +1,2 @@
+import { Slider } from './Slider';
+export default Slider;

package/dist/esm/index.css

@@ -0,0 +1,2 @@
+.slider{position:relative}.slider__button{bottom:0;display:none;height:48px;margin:auto 0;position:absolute;top:0;width:48px}@media (hover:hover){.slider__button{display:flex}}.slider__button--next{right:-8px}@media screen and (min-width:768px){.slider__button--next{right:0}}.slider__button--prev{left:-8px}@media screen and (min-width:768px){.slider__button--prev{left:0}}.slider__wrapper{-ms-overflow-style:none;display:flex;flex-direction:row;margin:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none}.slider__wrapper::-webkit-scrollbar{display:none}@media screen and (min-width:768px){.slider__wrapper{margin:8px}}@media (hover:hover){.slider__wrapper{scroll-snap-type:none}}.slider__wrapper.is-scrollable{cursor:move}.slider__wrapper.is-dragging{cursor:grabbing;user-select:none}.slider__wrapper:not(.is-dragging){scroll-behavior:smooth}.slider__wrapper__slide{margin-right:8px;scroll-snap-align:start}@media screen and (min-width:768px){.slider__wrapper__slide{margin-left:0;margin-right:16px}}.slider__wrapper__slide:last-child{margin-right:0}
+/*# sourceMappingURL=index.css.map */

package/dist/esm/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Slider.scss"],"names":[],"mappings":"AAAA,QACE,iBACF,CACA,gBAEE,QAAS,CAKT,YAAa,CAHb,WAAY,CADZ,aAAc,CAGd,iBAAkB,CALlB,KAAM,CAIN,UAGF,CACA,qBACE,gBACE,YACF,CACF,CACA,sBACE,UACF,CACA,oCACE,sBACE,OACF,CACF,CACA,sBACE,SACF,CACA,oCACE,sBACE,MACF,CACF,CACA,iBAEE,uBAAwB,CAExB,YAAa,CACb,kBAAmB,CAEnB,WAAY,CADZ,eAAgB,CALhB,6BAA8B,CAO9B,4BAA6B,CAL7B,oBAMF,CACA,oCACE,YACF,CACA,oCACE,iBACE,UACF,CACF,CACA,qBACE,iBACE,qBACF,CACF,CACA,+BACE,WACF,CACA,6BACE,eAAgB,CAChB,gBACF,CACA,mCACE,sBACF,CACA,wBAEE,gBAAiB,CADjB,uBAEF,CACA,oCACE,wBACE,aAAc,CACd,iBACF,CACF,CACA,mCACE,cACF","file":"index.css","sourcesContent":[".slider {\n  position: relative;\n}\n.slider__button {\n  top: 0;\n  bottom: 0;\n  margin: auto 0;\n  height: 48px;\n  width: 48px;\n  position: absolute;\n  display: none;\n}\n@media (hover: hover) {\n  .slider__button {\n    display: flex;\n  }\n}\n.slider__button--next {\n  right: -8px;\n}\n@media screen and (min-width: 768px) {\n  .slider__button--next {\n    right: 0;\n  }\n}\n.slider__button--prev {\n  left: -8px;\n}\n@media screen and (min-width: 768px) {\n  .slider__button--prev {\n    left: 0;\n  }\n}\n.slider__wrapper {\n  overscroll-behavior-x: contain;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  display: flex;\n  flex-direction: row;\n  overflow-x: auto;\n  margin: 16px;\n  scroll-snap-type: x proximity;\n}\n.slider__wrapper::-webkit-scrollbar {\n  display: none;\n}\n@media screen and (min-width: 768px) {\n  .slider__wrapper {\n    margin: 8px;\n  }\n}\n@media (hover: hover) {\n  .slider__wrapper {\n    scroll-snap-type: initial;\n  }\n}\n.slider__wrapper.is-scrollable {\n  cursor: move;\n}\n.slider__wrapper.is-dragging {\n  cursor: grabbing;\n  user-select: none;\n}\n.slider__wrapper:not(.is-dragging) {\n  scroll-behavior: smooth;\n}\n.slider__wrapper__slide {\n  scroll-snap-align: start;\n  margin-right: 8px;\n}\n@media screen and (min-width: 768px) {\n  .slider__wrapper__slide {\n    margin-left: 0;\n    margin-right: 16px;\n  }\n}\n.slider__wrapper__slide:last-child {\n  margin-right: 0;\n}"]}

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useRef as r,useState as n,useEffect as c,useCallback as o,Children as s}from"react";var i,l;!function(e){e[e.FULL=0]="FULL",e[e.PARTIAL=1]="PARTIAL",e[e.NONE=2]="NONE"}(i||(i={})),function(e){e[e.PREV=0]="PREV",e[e.NEXT=1]="NEXT"}(l||(l={}));const u=({children:u})=>{const a=r([]),d=r(null),f=r([]),h=r([]),[m,L]=n(!1),[b,g]=n(!1),[p,v]=n(!1),[N,E]=n({clientX:0,scrollX:0}),_=r(null),X=r(null);c((()=>{const e=d.current;if(!e)return()=>{};const t=()=>L(e.classList.toggle("is-scrollable",e.scrollWidth>e.clientWidth));return window?.addEventListener("resize",t),t(),()=>{window?.removeEventListener("resize",t)}}),[d]),c((()=>{d.current?.classList.toggle("is-scrollable",m)}),[m]),c((()=>{d.current?.classList.toggle("is-dragging",b);const e=e=>{e.stopPropagation(),e.preventDefault(),v(!1),g(!1)};return b&&document?.addEventListener("mouseup",e),()=>{document?.removeEventListener("mouseup",e)}}),[b]);const P=()=>f.current[0]??h.current[0]??-1,R=()=>f.current[f.current.length-1]??h.current[h.current.length-1]??-1,w=o((()=>{const e=R()+1===a.current.length,t=m&&!1===e,r=P()>0&&m;X.current&&_.current&&(X.current.classList.toggle("hidden",!1===t),X.current.ariaHidden=String(!1===t),_.current.classList.toggle("hidden",!1===r),_.current.ariaHidden=String(!1===r))}),[m]),A=e=>e>=.9?i.FULL:e>=.5?i.PARTIAL:i.NONE;c((()=>{if(!d.current)return()=>{};w();const e=new IntersectionObserver((e=>{e.forEach((e=>{const t=e.target,r=Number(t.dataset.slideIndex);A(e.intersectionRatio)===i.FULL?f.current.push(r):f.current=f.current.filter((e=>e!==r)),A(e.intersectionRatio)===i.PARTIAL?h.current.push(r):h.current=h.current.filter((e=>e!==r))})),f.current=[...new Set(f.current)].sort(((e,t)=>e-t)),h.current=[...new Set(h.current)].sort(((e,t)=>e-t)),w()}),{root:d.current,threshold:[0,.5,.9]});return a.current.forEach((({element:t})=>e.observe(t))),()=>e.disconnect()}),[d,w]);const T=e=>{if(!d.current)return;const t=e===l.PREV?P()-1:R()+1,r=a.current[t];let n=0;r&&(n=e===l.PREV?r.element.offsetLeft-d.current.offsetLeft-d.current.clientWidth+r.element.clientWidth:r.element.offsetLeft-d.current.offsetLeft,d.current.scrollTo({behavior:"smooth",left:n,top:0}))};return e("div",{className:"slider",children:[t("div",{className:"slider__wrapper",role:"list",ref:d,onMouseDown:e=>{E({...N,clientX:e.clientX,scrollX:d.current?.scrollLeft??0}),g(!0)},onMouseMove:e=>{d.current&&b&&(Math.abs(N.clientX-e.clientX)>5&&v(!0),d.current.scrollLeft=N.scrollX+N.clientX-e.clientX)},onMouseUp:()=>{g(!1)},onClickCapture:e=>{p&&(e.stopPropagation(),e.preventDefault()),v(!1)},children:s.map(u,((e,r)=>t("div",{className:"slider__wrapper__slide",role:"listitem","data-slide-index":r,ref:e=>{e&&((e,t)=>{a.current[t]={element:e,visibility:i.NONE}})(e,r)},children:e},r)))}),t("button",{"aria-label":"Previous slide",type:"button",onClick:()=>T(l.PREV),ref:_,className:"slider__button slider__button--prev button button--ghost button--clean button--has-icon hidden",children:t("i",{className:"icon-chevron-left"})}),t("button",{"aria-label":"Next slide",type:"button",onClick:()=>T(l.NEXT),ref:X,className:"slider__button slider__button--next button button--ghost button--clean button--has-icon hidden",children:t("i",{className:"icon-chevron-right"})})]})};export{u as default};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/src/src/Slider.tsx"],"sourcesContent":[null],"names":["Visbility","NavigationDirection","Slider","children","slides","useRef","wrapper","visibleSlideIndices","partiallyVisibleSlideIndices","isScrollable","setIsScrollable","useState","isDragging","setIsDragging","isBlockingClicks","setIsBlockingClicks","mousePosition","setMousePosition","clientX","scrollX","arrowPrevRef","arrowNextRef","useEffect","currentWrapper","current","checkScrollable","classList","toggle","scrollWidth","clientWidth","window","addEventListener","removeEventListener","onDocumentMouseUp","event","stopPropagation","preventDefault","document","getFirstVisibleSlideIndex","getLastVisibleSlideIndex","length","setControlsVisibility","useCallback","lastSlideFullyVisible","moreContentAvailable","previousContentAvailable","ariaHidden","String","getVisibilityByIntersectionRatio","intersectionRatio","FULL","PARTIAL","NONE","intersectionObserver","IntersectionObserver","entries","forEach","entry","target","index","Number","dataset","slideIndex","push","filter","Set","sort","a","b","root","threshold","element","observe","disconnect","navigate","direction","targetSlideIndex","PREV","targetSlide","scrollLeft","offsetLeft","scrollTo","behavior","left","top","_jsxs","className","_jsx","role","ref","onMouseDown","onMouseMove","Math","abs","onMouseUp","onClickCapture","Children","map","child","node","visibility","addSlide","type","onClick","NEXT"],"mappings":"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"}

package/dist/esm/jest.config.d.ts

@@ -0,0 +1,3 @@
+import type { Config } from '@jest/types';
+declare const config: Partial<Config.ConfigGlobals>;
+export default config;

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

@@ -0,0 +1,4 @@
+import type React from 'react';
+import type { PropsWithChildren } from 'react';
+import './Slider.scss';
+export declare const Slider: React.FC<PropsWithChildren>;

package/dist/esm/src/Slider.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/esm/src/index.d.ts

@@ -0,0 +1,2 @@
+import { Slider } from './Slider';
+export default Slider;

package/jest.config.ts

@@ -0,0 +1,54 @@
+// For a detailed explanation regarding each configuration property, visit:
+// https://jestjs.io/docs/en/configuration.html
+
+import type { Config } from '@jest/types';
+
+const config: Partial<Config.ConfigGlobals> = {
+    // Indicates whether the coverage information should be collected while executing the test
+    collectCoverage: false,
+
+    testEnvironment: 'jsdom',
+
+    // An array of glob patterns indicating a set of files for which coverage information should be collected
+    collectCoverageFrom: [
+        'src/**/*.{js,ts,tsx}',
+    ],
+
+    // The directory where Jest should output its coverage files
+    coverageDirectory: 'coverage',
+
+    // A list of reporter names that Jest uses when writing coverage reports
+    coverageReporters: [
+        'cobertura',
+        'lcov',
+        'text',
+    ],
+
+    coverageThreshold: {
+        global: {
+            branches: 80,
+            functions: 90,
+            lines: 90,
+            statements: 90,
+        },
+    },
+
+    // An array of directory names to be searched recursively up from the requiring module's location
+    moduleDirectories: [
+        'src',
+        'node_modules',
+    ],
+
+    // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
+    moduleNameMapper: {
+        '^.+\\.(css|scss|less|scss)$': '<rootDir>src/__mocks__/fileMock.js',
+        '^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>src/__mocks__/fileMock.js',
+    } as unknown as Config.ProjectConfig['moduleNameMapper'],
+
+    // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
+    testPathIgnorePatterns: [
+        '/node_modules/',
+    ],
+};
+
+export default config;

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@yoursurprise/slider",
+  "version": "0.0.1",
+  "description": "Basic React slider using modern Javascript and CSS",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "peerDependencies": {
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.19.4",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@rollup/plugin-commonjs": "^23.0.2",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-typescript": "^9.0.2",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.2.0",
+    "@types/react": "^18.0.21",
+    "@typescript-eslint/eslint-plugin": "^5.39.0",
+    "@typescript-eslint/parser": "^5.39.0",
+    "babel-jest": "^29.2.2",
+    "eslint": "^8.26.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-testing-library": "^5.9.1",
+    "jest": "^29.2.2",
+    "jest-environment-jsdom": "^29.2.2",
+    "npm": "^8.19.3",
+    "postcss": "^8.4.18",
+    "react": "^18.2.0",
+    "react-dom": "*",
+    "react-test-renderer": "^18.2.0",
+    "rollup": "^3.2.5",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "sass": "^1.56.0",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.8.4"
+  },
+  "scripts": {
+    "test": "jest",
+    "lint": "eslint src/",
+    "build": "rm -rf ./dist && rollup -c --bundleConfigAsCjs",
+    "watch": "rollup -c -w --bundleConfigAsCjs"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/YourSurpriseCom/slider.git"
+  },
+  "keywords": [
+    "slider",
+    "scroll",
+    "snap",
+    "touch"
+  ],
+  "author": "YourSurprise",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/YourSurpriseCom/slider/issues"
+  },
+  "homepage": "https://github.com/YourSurpriseCom/slider#readme",
+  "dependencies": {}
+}

package/rollup.config.js

@@ -0,0 +1,38 @@
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+import { terser } from 'rollup-plugin-terser';
+import external from 'rollup-plugin-peer-deps-external';
+import postcss from 'rollup-plugin-postcss';
+
+const packageJson = require('./package.json');
+
+export default {
+    input: 'src/index.ts',
+    output: [
+        {
+            file: packageJson.main,
+            format: 'cjs',
+            sourcemap: true,
+        },
+        {
+            file: packageJson.module,
+            format: 'esm',
+            sourcemap: true,
+        },
+    ],
+    plugins: [
+        external(),
+        resolve(),
+        commonjs(),
+        typescript({
+            tsconfig: './tsconfig.json' }),
+        postcss({
+            extract: 'index.css',
+            minimize: true,
+            sourceMap: true,
+        }),
+        terser(),
+    ],
+};
+

package/src/Slider.scss

@@ -0,0 +1,86 @@
+.slider {
+  position: relative;
+
+  &__button {
+    top: 0;
+    bottom: 0;
+    margin: auto 0;
+    height: 48px;
+    width: 48px;
+    position: absolute;
+    display: none;
+
+    @media (hover: hover) {
+      display: flex;
+    }
+
+    &--next {
+      right: -8px;
+
+      @media screen and (min-width: 768px) {
+        right: 0;
+      }
+    }
+
+    &--prev {
+      left: -8px;
+
+      @media screen and (min-width: 768px) {
+        left: 0;
+      }
+    }
+  }
+
+  &__wrapper {
+    // Prevent the browser from going back in history when there is no scroll area left
+    overscroll-behavior-x: contain;
+    // Hide the scrollbars
+    -ms-overflow-style: none; // for Internet Explorer, Edge
+    scrollbar-width: none; // for Firefox
+
+    &::-webkit-scrollbar {
+      display: none; // for Chrome, Safari, and Opera
+    }
+
+    display: flex;
+    flex-direction: row;
+    overflow-x: auto;
+    margin: 16px;
+    scroll-snap-type: x proximity;
+
+    @media screen and (min-width: 768px) {
+      margin: 8px;
+    }
+
+    @media (hover: hover) {
+      scroll-snap-type: initial;
+    }
+
+    &.is-scrollable {
+      cursor: move;
+    }
+
+    &.is-dragging {
+      cursor: grabbing;
+      user-select: none;
+    }
+
+    &:not(.is-dragging) {
+      scroll-behavior: smooth;
+    }
+
+    &__slide {
+      scroll-snap-align: start;
+      margin-right: 8px;
+
+      @media screen and (min-width: 768px) {
+        margin-left: 0;
+        margin-right: 16px;
+      }
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+}

package/src/Slider.test.tsx

@@ -0,0 +1,248 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { Slider } from './Slider';
+
+const renderSliderWithDimensions = (clientWidth = 1000, scrollWidth = 2000, scrollLeft = 0) => {
+    Object.defineProperty(HTMLElement.prototype, 'clientWidth', { configurable: true, value: clientWidth });
+    Object.defineProperty(HTMLElement.prototype, 'scrollWidth', { configurable: true, value: scrollWidth });
+    Object.defineProperty(HTMLElement.prototype, 'scrollLeft', { configurable: true, value: scrollLeft, writable: true });
+
+    render(<Slider>
+        <span key={1}/>
+        <span key={2}/>
+        <span key={3}/>
+        <span key={4}/>
+    </Slider>);
+};
+
+describe('UpsellSlider', () => {
+    let observeSpy: jest.Mock;
+    let disconnectSpy: jest.Mock;
+    let scrollToSpy: jest.Mock;
+
+    beforeEach(() => {
+        const mockIntersectionObserver = jest.fn();
+        observeSpy = jest.fn();
+        disconnectSpy = jest.fn();
+        scrollToSpy = jest.fn();
+
+        mockIntersectionObserver.mockReturnValue({
+            disconnect: disconnectSpy,
+            observe: observeSpy,
+            unobserve: () => jest.fn(),
+        });
+        global.IntersectionObserver = mockIntersectionObserver;
+        Element.prototype.scrollTo = scrollToSpy;
+    });
+
+    afterEach(() => {
+        Object.defineProperty(HTMLElement.prototype, 'clientWidth', { configurable: true, value: 0 });
+        Object.defineProperty(HTMLElement.prototype, 'scrollWidth', { configurable: true, value: 0 });
+        Object.defineProperty(HTMLElement.prototype, 'scrollLeft', { configurable: true, value: 0, writable: true });
+    });
+
+    it('renders children', () => {
+        render(<Slider><span data-testid="child"/></Slider>);
+
+        expect(screen.getByTestId('child')).toBeInTheDocument();
+    });
+
+    it('keeps track of the visibility of children', () => {
+        const children = [
+            <span key={ 1 } data-testid="child-1"/>,
+            <span key={ 2 } data-testid="child-2"/>,
+            <span key={ 3 } data-testid="child-3"/>,
+            <span key={ 4 } data-testid="child-4"/>,
+        ];
+
+        render(<Slider>{ children }</Slider>);
+        expect(observeSpy).toHaveBeenCalledTimes(children.length);
+    });
+
+    it('sets the container scrollable if the scroll area exceeds the container width', () => {
+        renderSliderWithDimensions(500, 1000);
+
+        expect(screen.getByRole('list')).toHaveClass('is-scrollable');
+    });
+
+    it('does not set the container scrollable if the scroll area does not exceed the container width', () => {
+        renderSliderWithDimensions(500, 400);
+
+        expect(screen.getByRole('list')).not.toHaveClass('is-scrollable');
+    });
+
+    it('disconnects the intersection observer on re-render', () => {
+        const element = <Slider><span>sup</span></Slider>;
+
+        const { rerender } = render(element);
+
+        rerender(element);
+
+        expect(observeSpy).toHaveBeenCalledTimes(1);
+    });
+
+    describe('controls', () => {
+        it('sets controls visibility initially', () => {
+            renderSliderWithDimensions();
+
+            const nextButton = screen.getByLabelText('Next slide');
+            const prevButton = screen.getByLabelText('Previous slide');
+
+            expect(prevButton.ariaHidden).toBe('true');
+            expect(nextButton.ariaHidden).toBe('false');
+        });
+
+        it('allows scrolling by dragging with the mouse', () => {
+            renderSliderWithDimensions();
+
+            const scrollElement = screen.getByRole('list');
+
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.mouseDown(scrollElement);
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.mouseMove(scrollElement, { clientX: 100, clientY: 0 });
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.mouseUp(scrollElement);
+
+            expect(scrollElement.scrollLeft).toBe(-100);
+        });
+
+        it('registers click when not scrolling', async () => {
+            const clickSpy = jest.fn();
+
+            render(<Slider>
+                <span data-testid="1" onClick={clickSpy}/>
+            </Slider>);
+
+            const scrollElement = screen.getByRole('list');
+
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.mouseDown(scrollElement);
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.mouseMove(scrollElement, { clientX: 100, clientY: 0 });
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.mouseUp(scrollElement);
+
+            // This click is normally triggered when releasing the mouse after scrolling
+            await userEvent.click(scrollElement);
+
+            await userEvent.click(screen.getByTestId('1'));
+
+            expect(clickSpy).toHaveBeenCalled();
+        });
+    });
+
+    describe('sliding', () => {
+        let intersectionCallback: (entries: IntersectionObserverEntry[]) => void;
+
+        beforeEach(() => {
+            const mockIntersectionObserver = jest.fn();
+            intersectionCallback = jest.fn();
+
+            mockIntersectionObserver.mockImplementation((callback: (entries: IntersectionObserverEntry[]) => void) => {
+                intersectionCallback = callback;
+
+                return ({
+                    disconnect: jest.fn(),
+                    observe: jest.fn(),
+                    unobserve: jest.fn(),
+                });
+            });
+
+            global.IntersectionObserver = mockIntersectionObserver;
+        });
+
+        it('scrolls to the next slide', async () => {
+            renderSliderWithDimensions();
+
+            const slides = screen.getAllByRole('listitem');
+            const nextButton = screen.getByLabelText('Next slide');
+
+            slides.forEach((child, i) => {
+                Object.defineProperty(child, 'clientWidth', { value: 100 * (i + 1) });
+                Object.defineProperty(child, 'offsetLeft', { value: 100 * (i + 1) });
+            });
+
+            intersectionCallback([
+                { intersectionRatio: 1, target: slides[0] } as unknown as IntersectionObserverEntry,
+                { intersectionRatio: 0.5, target: slides[1] } as unknown as IntersectionObserverEntry,
+                { intersectionRatio: 0, target: slides[2] } as unknown as IntersectionObserverEntry,
+                { intersectionRatio: 0, target: slides[3] } as unknown as IntersectionObserverEntry,
+            ]);
+
+            await userEvent.click(nextButton);
+
+            expect(scrollToSpy).toHaveBeenCalledWith({
+                behavior: 'smooth',
+                left: 200,
+                top: 0,
+            });
+        });
+
+        it('scrolls to the previous slide', async () => {
+            renderSliderWithDimensions();
+
+            const slides = screen.getAllByRole('listitem');
+            const prevButton = screen.getByLabelText('Previous slide');
+
+            slides.forEach((child, i) => {
+                Object.defineProperty(child, 'clientWidth', { value: 100 * (i + 1) });
+                Object.defineProperty(child, 'offsetLeft', { value: 100 * (i + 1) });
+            });
+
+            intersectionCallback([
+                { intersectionRatio: 0, target: slides[0] } as unknown as IntersectionObserverEntry,
+                { intersectionRatio: 0, target: slides[1] } as unknown as IntersectionObserverEntry,
+                { intersectionRatio: 1, target: slides[2] } as unknown as IntersectionObserverEntry,
+                { intersectionRatio: 0.5, target: slides[3] } as unknown as IntersectionObserverEntry,
+            ]);
+
+            await userEvent.click(prevButton);
+
+            expect(scrollToSpy).toHaveBeenCalledWith({
+                behavior: 'smooth',
+                left: -600,
+                top: 0,
+            });
+        });
+
+        it('updates controls visibility', () => {
+            Object.defineProperty(HTMLElement.prototype, 'clientWidth', { configurable: true, value: 500 });
+            Object.defineProperty(HTMLElement.prototype, 'scrollWidth', { configurable: true, value: 1000 });
+            Object.defineProperty(HTMLElement.prototype, 'scrollLeft', { configurable: true, value: 0, writable: true });
+
+            render(<Slider>
+                <span key={1}/>
+                <span key={2}/>
+                <span key={3}/>
+                <span key={4}/>
+            </Slider>);
+
+            const slides = screen.getAllByRole('listitem');
+            const nextButton = screen.getByLabelText('Next slide');
+            const prevButton = screen.getByLabelText('Previous slide');
+
+            ([
+                // All slides are visible
+                [[1, 1, 1, 1], true, true],
+                // Only the first slide is not visible
+                [[0, 1, 1, 1], false, true],
+                // Only the last slide is not visible
+                [[1, 1, 1, 0], true, false],
+            ] as Array<[number[], boolean, boolean]>).forEach((expectations) => {
+                const [intersections, prevButtonHidden, nextButtonHidden] = expectations;
+
+                intersectionCallback([
+                    { intersectionRatio: intersections[0], target: slides[0] } as unknown as IntersectionObserverEntry,
+                    { intersectionRatio: intersections[1], target: slides[1] } as unknown as IntersectionObserverEntry,
+                    { intersectionRatio: intersections[2], target: slides[2] } as unknown as IntersectionObserverEntry,
+                    { intersectionRatio: intersections[3], target: slides[3] } as unknown as IntersectionObserverEntry,
+                ]);
+
+                expect(prevButton.ariaHidden).toBe(String(prevButtonHidden));
+                expect(nextButton.ariaHidden).toBe(String(nextButtonHidden));
+            });
+        });
+    });
+});

package/src/Slider.tsx

@@ -0,0 +1,253 @@
+import type React from 'react';
+import type { MouseEvent as ReactMouseEvent, PropsWithChildren } from 'react';
+import { useRef, useEffect, Children, useCallback, useState } from 'react';
+import './Slider.scss';
+
+enum Visbility {
+    FULL,
+    PARTIAL,
+    NONE,
+}
+
+enum NavigationDirection {
+    PREV,
+    NEXT,
+}
+
+interface SlideVisibilityEntry {
+    element: HTMLDivElement;
+    visibility: Visbility;
+}
+
+export const Slider: React.FC<PropsWithChildren> = ({ children }) => {
+    const slides = useRef<SlideVisibilityEntry[]>([]);
+    const wrapper = useRef<HTMLDivElement>(null);
+    const visibleSlideIndices = useRef<number[]>([]);
+    const partiallyVisibleSlideIndices = useRef<number[]>([]);
+
+    const [isScrollable, setIsScrollable] = useState<boolean>(false);
+    const [isDragging, setIsDragging] = useState<boolean>(false);
+    const [isBlockingClicks, setIsBlockingClicks] = useState<boolean>(false);
+    const [mousePosition, setMousePosition] = useState<{ clientX: number; scrollX: number }>({
+        clientX: 0,
+        scrollX: 0,
+    });
+
+    const arrowPrevRef = useRef<HTMLButtonElement>(null);
+    const arrowNextRef = useRef<HTMLButtonElement>(null);
+
+    useEffect(() => {
+        const currentWrapper = wrapper.current;
+
+        if (!currentWrapper) {
+            return () => {};
+        }
+
+        const checkScrollable = () => setIsScrollable(currentWrapper.classList.toggle('is-scrollable', currentWrapper.scrollWidth > currentWrapper.clientWidth));
+
+        window?.addEventListener('resize', checkScrollable);
+
+        checkScrollable();
+
+        return () => {
+            window?.removeEventListener('resize', checkScrollable);
+        };
+    }, [wrapper]);
+
+    useEffect(() => {
+        wrapper.current?.classList.toggle('is-scrollable', isScrollable);
+    }, [isScrollable]);
+
+    useEffect(() => {
+        wrapper.current?.classList.toggle('is-dragging', isDragging);
+
+        const onDocumentMouseUp = (event: MouseEvent) => {
+            event.stopPropagation();
+            event.preventDefault();
+
+            setIsBlockingClicks(false);
+            setIsDragging(false);
+        };
+
+        if (isDragging) {
+            document?.addEventListener('mouseup', onDocumentMouseUp);
+        }
+
+        return () => {
+            document?.removeEventListener('mouseup', onDocumentMouseUp);
+        };
+    }, [isDragging]);
+
+    const blockChildClickHandler = (event: ReactMouseEvent<HTMLDivElement>) => {
+        if (isBlockingClicks) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+
+        setIsBlockingClicks(false);
+    };
+
+    const mouseUpHandler = () => {
+        setIsDragging(false);
+    };
+
+    const mouseDownHandler = (event: ReactMouseEvent<HTMLDivElement>) => {
+        setMousePosition({
+            ...mousePosition,
+            clientX: event.clientX,
+            scrollX: wrapper.current?.scrollLeft ?? 0,
+        });
+
+        setIsDragging(true);
+    };
+
+    const mouseMoveHandler = (event: ReactMouseEvent<HTMLDivElement>) => {
+        if (!wrapper.current || !isDragging) {
+            return;
+        }
+
+        if (Math.abs(mousePosition.clientX - event.clientX) > 5) {
+            setIsBlockingClicks(true);
+        }
+
+        wrapper.current.scrollLeft = mousePosition.scrollX + mousePosition.clientX - event.clientX;
+    };
+
+    const addSlide = (node: HTMLDivElement, index: number) => {
+        slides.current[index] = {
+            element: node,
+            visibility: Visbility.NONE,
+        };
+    };
+
+    const getFirstVisibleSlideIndex = (): number => visibleSlideIndices.current[0] ?? partiallyVisibleSlideIndices.current[0] ?? -1;
+
+    const getLastVisibleSlideIndex = (): number => visibleSlideIndices.current[visibleSlideIndices.current.length - 1]
+        ?? partiallyVisibleSlideIndices.current[partiallyVisibleSlideIndices.current.length - 1] ?? -1;
+
+    const setControlsVisibility = useCallback(() => {
+        const lastSlideFullyVisible = getLastVisibleSlideIndex() + 1 === slides.current.length;
+        const moreContentAvailable = isScrollable && lastSlideFullyVisible === false;
+        const previousContentAvailable = getFirstVisibleSlideIndex() > 0 && isScrollable;
+
+        if (arrowNextRef.current && arrowPrevRef.current) {
+            arrowNextRef.current.classList.toggle('hidden', moreContentAvailable === false);
+            arrowNextRef.current.ariaHidden = String(moreContentAvailable === false);
+
+            arrowPrevRef.current.classList.toggle('hidden', previousContentAvailable === false);
+            arrowPrevRef.current.ariaHidden = String(previousContentAvailable === false);
+        }
+    }, [isScrollable]);
+
+    const getVisibilityByIntersectionRatio = (intersectionRatio: number) => {
+        if (intersectionRatio >= 0.9) {
+            return Visbility.FULL;
+        }
+
+        if (intersectionRatio >= 0.5) {
+            return Visbility.PARTIAL;
+        }
+
+        return Visbility.NONE;
+    };
+
+    useEffect(() => {
+        if (!wrapper.current) {
+            return () => {};
+        }
+
+        setControlsVisibility();
+
+        const intersectionCallback = (entries: IntersectionObserverEntry[]) => {
+            entries.forEach((entry: IntersectionObserverEntry) => {
+                const target = entry.target as HTMLDivElement;
+                const index = Number(target.dataset.slideIndex);
+
+                if (getVisibilityByIntersectionRatio(entry.intersectionRatio) === Visbility.FULL) {
+                    visibleSlideIndices.current.push(index);
+                } else {
+                    visibleSlideIndices.current = visibleSlideIndices.current.filter((slideIndex) => slideIndex !== index);
+                }
+
+                if (getVisibilityByIntersectionRatio(entry.intersectionRatio) === Visbility.PARTIAL) {
+                    partiallyVisibleSlideIndices.current.push(index);
+                } else {
+                    partiallyVisibleSlideIndices.current = partiallyVisibleSlideIndices.current.filter((slideIndex) => slideIndex !== index);
+                }
+            });
+
+            // Make sure there are no duplicate visible slides, then sort to retain proper order
+            visibleSlideIndices.current = [...new Set(visibleSlideIndices.current)].sort((a, b) => a - b);
+            partiallyVisibleSlideIndices.current = [...new Set(partiallyVisibleSlideIndices.current)].sort((a, b) => a - b);
+
+            setControlsVisibility();
+        };
+
+        const intersectionObserver = new IntersectionObserver(intersectionCallback, {
+            root: wrapper.current,
+            threshold: [0, 0.5, 0.9],
+        });
+
+        slides.current.forEach(({ element }) => intersectionObserver.observe(element));
+
+        return () => intersectionObserver.disconnect();
+    }, [wrapper, setControlsVisibility]);
+
+    const navigate = (direction: NavigationDirection) => {
+        if (!wrapper.current) {
+            return;
+        }
+
+        const targetSlideIndex = direction === NavigationDirection.PREV ? getFirstVisibleSlideIndex() - 1 : getLastVisibleSlideIndex() + 1;
+
+        const targetSlide = slides.current[targetSlideIndex];
+        let scrollLeft = 0;
+
+        if (!targetSlide) {
+            return;
+        }
+
+        if (direction === NavigationDirection.PREV) {
+            scrollLeft = targetSlide.element.offsetLeft - wrapper.current.offsetLeft - wrapper.current.clientWidth + targetSlide.element.clientWidth;
+        } else {
+            scrollLeft = targetSlide.element.offsetLeft - wrapper.current.offsetLeft;
+        }
+
+        wrapper.current.scrollTo({ behavior: 'smooth', left: scrollLeft, top: 0 });
+    };
+
+    return (
+        <div className="slider">
+            <div className="slider__wrapper" role="list" ref={wrapper}
+                onMouseDown={mouseDownHandler}
+                onMouseMove={mouseMoveHandler}
+                onMouseUp={mouseUpHandler}
+                onClickCapture={blockChildClickHandler}
+            >
+                {Children.map(children, (child, index: number) => (
+                    <div className="slider__wrapper__slide" role="listitem" key={index} data-slide-index={index} ref={(node) => { if (node) { addSlide(node, index); } }}>
+                        {child}
+                    </div>
+                ))}
+            </div>
+            <button
+                aria-label="Previous slide"
+                type="button"
+                onClick={() => navigate(NavigationDirection.PREV)}
+                ref={arrowPrevRef}
+                className="slider__button slider__button--prev button button--ghost button--clean button--has-icon hidden"
+            >
+                <i className="icon-chevron-left"/>
+            </button>
+            <button
+                aria-label="Next slide"
+                type="button"
+                onClick={() => navigate(NavigationDirection.NEXT)}
+                ref={arrowNextRef}
+                className="slider__button slider__button--next button button--ghost button--clean button--has-icon hidden"
+            >
+                <i className="icon-chevron-right"/>
+            </button>
+        </div>
+    );
+};

package/src/__mocks__/fileMock.js

@@ -0,0 +1,11 @@
+const target = {};
+
+const handler = {
+    get: function (t, prop) {
+        return prop;
+    },
+};
+
+const proxy = new Proxy(target, handler);
+
+export default proxy;

package/src/index.ts

@@ -0,0 +1,3 @@
+import { Slider } from './Slider';
+
+export default Slider;

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "sourceRoot": "./src",
+    "outDir": "dist",
+    "target": "ESNext",
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "module": "ESNext",
+    "noImplicitAny": true,
+    "removeComments": true,
+    "preserveConstEnums": true,
+    "sourceMap": true,
+    "allowSyntheticDefaultImports": true,
+    "emitDeclarationOnly": true,
+    "declaration": true
+  }
+}