react-styled-slider-component 0.1.7 → 0.1.9

package/README.md

@@ -1,74 +1,142 @@
-# React Styled Slider Component
+# react-styled-slider-component
 
-A customizable and reusable slider component built with React and styled-components. This component allows developers to easily implement a slider/carousel with various configuration options, such as the number of visible slides, navigation arrows, dots, and different directions.
+A highly customizable, responsive React slider component built with TypeScript and Styled Components.
 
-## Installation
+## 🚀 Features
 
-To install the package, use npm or yarn:
+- **Compound Components:** Full control over slider layout (`Slider.Track`, `Slider.Button`, `Slider.Dots`).
+- **Responsive Breakpoints:** Easily adjust visible slides for Mobile, Tablet, and Desktop.
+- **Touch & Swipe Support:** Native feel on mobile devices.
+- **Infinite Loop:** Seamless back-to-start navigation.
+- **Autoplay:** Smart timer with pause on interaction.
+- **Customizable Arrows:** Multiple styles (`minimal`, `filled`, `outlined`, `plain`) and custom icons.
+- **Gap Support:** Add consistent spacing between slides.
+- **TypeScript Ready:** Fully typed for a better developer experience.
+
+## 📦 Installation
 
 ```bash
 npm install react-styled-slider-component
+# or
+yarn add react-styled-slider-component
 ```
 
-## Usage
+## 🛠 Usage Examples
+
+### 1. Full Width Hero Slider (Autoplay)
+
+Perfect for landing pages. Shows one large image at a time.
 
-Here's how to use the slider component in your React application:
+<img src= "https://res.cloudinary.com/dxqyvjf5r/image/upload/v1772570316/npm%20package/full_width_slider_v2vcbh.png"/>
 
 ```tsx
-import React from 'react';
-import {Slider} from 'react-styled-slider-component';
-
-const App: React.FC = () => {
-  return (
-    <div>
-      <Slider
-        visibleSlides={2}
-        showDots={true}
-        showArrows={true}
-        dotsPosition="bottom"
-        slideStep={1}
-        direction="horizontal"
-        arrowStyle="minimal"
-      >
-        <div style={{ backgroundColor: 'red', height: '200px' }}>Slide 1</div>
-        <div style={{ backgroundColor: 'blue', height: '200px' }}>Slide 2</div>
-        <div style={{ backgroundColor: 'green', height: '200px' }}>Slide 3</div>
-        <div style={{ backgroundColor: 'yellow', height: '200px' }}>Slide 4</div>
-        <div style={{ backgroundColor: 'red', height: '200px' }}>Slide 5</div>
-        <div style={{ backgroundColor: 'blue', height: '200px' }}>Slide 6</div>
-        <div style={{ backgroundColor: 'green', height: '200px' }}>Slide 7</div>
-        <div style={{ backgroundColor: 'yellow', height: '200px' }}>Slide 8</div>
-      </Slider>
-    </div>
-  );
-};
-
-export default App;
+import { Slider } from "react-styled-slider-component";
+
+const HeroSlider = () => (
+  <Slider
+    visibleSlides={1}
+    infinite={true}
+    autoplay={true}
+    autoplaySpeed={4000}
+  >
+    <Slider.Button type="prev" style="minimal" />
+    <Slider.Track>
+      <div style={{ height: "400px" }}>
+        <img
+          src="image1.jpg"
+          style={{ width: "100%", height: "100%", objectFit: "cover" }}
+        />
+      </div>
+      <div style={{ height: "400px" }}>
+        <img
+          src="image2.jpg"
+          style={{ width: "100%", height: "100%", objectFit: "cover" }}
+        />
+      </div>
+    </Slider.Track>
+    <Slider.Button type="next" style="minimal" />
+    <Slider.Dots position="bottom" />
+  </Slider>
+);
 ```
 
-## Props
+### 2. Multi-Item Responsive Carousel
 
-The `Slider` component accepts the following props:
+Shows multiple items at once and adjusts automatically based on screen size.
+<img src= "https://res.cloudinary.com/dxqyvjf5r/image/upload/v1772570315/npm%20package/multi_Item_slider_ittwfh.png"/>
+
+```tsx
+const Carousel = () => (
+  <Slider
+    visibleSlides={1}
+    infinite={true}
+    gap={20}
+    breakpoints={{
+      768: { visibleSlides: 2 },
+      1024: { visibleSlides: 4 },
+    }}
+  >
+    <Slider.Button type="prev" style="filled" />
+    <Slider.Track>
+      <div style={{ height: "200px", background: "#FFD700" }}>Item 1</div>
+      <div style={{ height: "200px", background: "#FF8C00" }}>Item 2</div>
+      <div style={{ height: "200px", background: "#FF4500" }}>Item 3</div>
+      <div style={{ height: "200px", background: "#FF0000" }}>Item 4</div>
+      <div style={{ height: "200px", background: "#C71585" }}>Item 5</div>
+    </Slider.Track>
+    <Slider.Button type="next" style="filled" />
+    <Slider.Dots position="bottom" />
+  </Slider>
+);
+```
 
-| Prop Name       | Type                                               | Default   | Description                                                                 |
-| --------------- | -------------------------------------------------- | --------- | --------------------------------------------------------------------------- |
-| `children`      | `React.ReactNode[]`                                | -         | The slides to be displayed in the slider.                                   |
-| `visibleSlides` | `number`                                           | `1`       | Number of slides visible at one time.                                       |
-| `showDots`      | `boolean`                                          | `true`    | Whether to show navigation dots below the slider.                           |
-| `showArrows`    | `boolean`                                          | `true`    | Whether to show navigation arrows on the slider.                            |
-| `dotsPosition`  | `'top' ,'bottom' , 'left' , 'right'`              | `'bottom'` | Position of the navigation dots.                                            |
-| `slideStep`     | `number`                                           | `1`       | Number of slides to move on each navigation action.                         |
-| `direction`     | `'horizontal' , 'vertical'`                        | `'horizontal'` | Direction of the slider, either horizontal or vertical.                    |
-| `arrowStyle`    | `'minimal' , 'filled' , 'outlined'`                | `'minimal'` | Style of the navigation arrows.                                             |
-| `arrowColor`    | `'black' , 'white'`                                | `'black'` | Color of the navigation arrows.                                             |
+### 3. Vertical Slider
+
+Slides items from bottom to top. Ideal for sidebars or vertical lists.
+
+<img src= "https://res.cloudinary.com/dxqyvjf5r/image/upload/v1772570316/npm%20package/vertical_slider_oagp8i.png"/>
+
+```tsx
+const VerticalSlider = () => (
+  <div style={{ height: "500px" }}>
+    <Slider direction="vertical" visibleSlides={2} infinite={true} gap={10}>
+      <Slider.Button type="prev" style="outlined" />
+      <Slider.Track>
+        <div style={{ height: "200px", background: "#f0f0f0" }}>Vertical 1</div>
+        <div style={{ height: "200px", background: "#e0e0e0" }}>Vertical 2</div>
+        <div style={{ height: "200px", background: "#d0d0d0" }}>Vertical 3</div>
+      </Slider.Track>
+      <Slider.Button type="next" style="outlined" />
+      <Slider.Dots position="right" />
+    </Slider>
+  </div>
+);
+```
 
+## ⚙️ Props
 
-## Customization
+### Slider (Main Container)
 
-The slider component uses `styled-components` for styling, making it highly customizable. You can override the styles by extending the styled components used in the slider.
+| Prop            | Type                         | Default        | Description                                               |
+| :-------------- | :--------------------------- | :------------- | :-------------------------------------------------------- |
+| `visibleSlides` | `number`                     | `1`            | Number of slides to show at once.                         |
+| `direction`     | `'horizontal' \| 'vertical'` | `'horizontal'` | Sliding orientation.                                      |
+| `infinite`      | `boolean`                    | `false`        | Enable infinite looping.                                  |
+| `autoplay`      | `boolean`                    | `false`        | Automatically transition slides.                          |
+| `autoplaySpeed` | `number`                     | `3000`         | Delay in ms for autoplay.                                 |
+| `gap`           | `number`                     | `0`            | Spacing between slides in pixels.                         |
+| `breakpoints`   | `object`                     | `undefined`    | Responsive rules (e.g., `{ 768: { visibleSlides: 2 } }`). |
 
-## Contributing
+### Slider.Button
 
-Contributions are welcome! Please open an issue or submit a pull request if you have any suggestions or improvements.
+| Prop       | Type                                             | Default       | Description                            |
+| :--------- | :----------------------------------------------- | :------------ | :------------------------------------- |
+| `type`     | `'prev' \| 'next'`                               | **Required**  | Direction of the button.               |
+| `style`    | `'minimal' \| 'filled' \| 'outlined' \| 'plain'` | `'minimal'`   | Visual style of the button.            |
+| `children` | `ReactNode`                                      | Default Icons | Custom text or icon inside the button. |
 
+### Slider.Dots
 
+| Prop       | Type                                     | Default    | Description                   |
+| :--------- | :--------------------------------------- | :--------- | :---------------------------- |
+| `position` | `'top' \| 'bottom' \| 'left' \| 'right'` | `'bottom'` | Placement of navigation dots. |

package/dist/App.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import React from "react";
 declare const App: React.FC;
 export default App;

package/dist/App.js

@@ -10,8 +10,105 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Slider from './components/Slider';
+import { Slider } from "./components/Slider";
 var App = function () {
-    return (_jsx("div", { children: _jsxs(Slider, __assign({ visibleSlides: 2, showDots: true, showArrows: true, dotsPosition: "bottom", slideStep: 1, direction: "horizontal", arrowStyle: "minimal" }, { children: [_jsx("div", __assign({ style: { backgroundColor: 'red', height: '200px' } }, { children: "Slide 1" })), _jsx("div", __assign({ style: { backgroundColor: 'blue', height: '200px' } }, { children: "Slide 2" })), _jsx("div", __assign({ style: { backgroundColor: 'green', height: '200px' } }, { children: "Slide 3" })), _jsx("div", __assign({ style: { backgroundColor: 'yellow', height: '200px' } }, { children: "Slide 4" })), _jsx("div", __assign({ style: { backgroundColor: 'red', height: '200px' } }, { children: "Slide 5" })), _jsx("div", __assign({ style: { backgroundColor: 'blue', height: '200px' } }, { children: "Slide 6" })), _jsx("div", __assign({ style: { backgroundColor: 'green', height: '200px' } }, { children: "Slide 7" })), _jsx("div", __assign({ style: { backgroundColor: 'yellow', height: '200px' } }, { children: "Slide 8" }))] })) }));
+    return (_jsxs("div", __assign({ style: {
+            padding: "50px",
+            maxWidth: "1200px",
+            margin: "0 auto",
+            fontFamily: "Arial, sans-serif",
+        } }, { children: [_jsx("h1", __assign({ style: { textAlign: "center", marginBottom: "50px" } }, { children: "Slider Component Test Lab" })), _jsxs("section", __assign({ style: { marginBottom: "80px" } }, { children: [_jsx("h3", { children: "1. Full Width Hero (1 slide at a time)" }), _jsxs(Slider, __assign({ visibleSlides: 1, infinite: true, autoplay: true, autoplaySpeed: 4000, gap: 0 }, { children: [_jsx(Slider.Button, { type: "prev", style: "minimal" }), _jsxs(Slider.Track, { children: [_jsx("div", __assign({ style: { width: "100%", height: "400px" } }, { children: _jsx("img", { src: "https://picsum.photos/1200/400?random=11", alt: "1", style: { width: "100%", height: "100%", objectFit: "cover" } }) })), _jsx("div", __assign({ style: { width: "100%", height: "400px" } }, { children: _jsx("img", { src: "https://picsum.photos/1200/400?random=12", alt: "2", style: { width: "100%", height: "100%", objectFit: "cover" } }) })), _jsx("div", __assign({ style: { width: "100%", height: "400px" } }, { children: _jsx("img", { src: "https://picsum.photos/1200/400?random=13", alt: "3", style: { width: "100%", height: "100%", objectFit: "cover" } }) }))] }), _jsx(Slider.Button, { type: "next", style: "minimal" }), _jsx(Slider.Dots, { position: "bottom" })] }))] })), _jsxs("section", __assign({ style: { marginBottom: "80px" } }, { children: [_jsx("h3", { children: "2. Multi-Item Carousel (8 items total)" }), _jsxs(Slider, __assign({ visibleSlides: 1, infinite: true, gap: 20, breakpoints: {
+                            768: { visibleSlides: 2 },
+                            1024: { visibleSlides: 4 },
+                        } }, { children: [_jsx(Slider.Button, { type: "prev", style: "filled" }), _jsxs(Slider.Track, { children: [_jsx("div", __assign({ style: {
+                                            height: "200px",
+                                            background: "#FFD700",
+                                            display: "flex",
+                                            alignItems: "center",
+                                            justifyContent: "center",
+                                            borderRadius: "8px",
+                                        } }, { children: "Item 1" })), _jsx("div", __assign({ style: {
+                                            height: "200px",
+                                            background: "#FF8C00",
+                                            display: "flex",
+                                            alignItems: "center",
+                                            justifyContent: "center",
+                                            borderRadius: "8px",
+                                        } }, { children: "Item 2" })), _jsx("div", __assign({ style: {
+                                            height: "200px",
+                                            background: "#FF4500",
+                                            display: "flex",
+                                            alignItems: "center",
+                                            justifyContent: "center",
+                                            borderRadius: "8px",
+                                        } }, { children: "Item 3" })), _jsx("div", __assign({ style: {
+                                            height: "200px",
+                                            background: "#FF0000",
+                                            display: "flex",
+                                            alignItems: "center",
+                                            justifyContent: "center",
+                                            borderRadius: "8px",
+                                        } }, { children: "Item 4" })), _jsx("div", __assign({ style: {
+                                            height: "200px",
+                                            background: "#C71585",
+                                            display: "flex",
+                                            alignItems: "center",
+                                            justifyContent: "center",
+                                            borderRadius: "8px",
+                                        } }, { children: "Item 5" })), _jsx("div", __assign({ style: {
+                                            height: "200px",
+                                            background: "#8B008B",
+                                            display: "flex",
+                                            alignItems: "center",
+                                            justifyContent: "center",
+                                            borderRadius: "8px",
+                                        } }, { children: "Item 6" })), _jsx("div", __assign({ style: {
+                                            height: "200px",
+                                            background: "#483D8B",
+                                            display: "flex",
+                                            alignItems: "center",
+                                            justifyContent: "center",
+                                            borderRadius: "8px",
+                                        } }, { children: "Item 7" })), _jsx("div", __assign({ style: {
+                                            height: "200px",
+                                            background: "#2F4F4F",
+                                            display: "flex",
+                                            alignItems: "center",
+                                            justifyContent: "center",
+                                            borderRadius: "8px",
+                                        } }, { children: "Item 8" }))] }), _jsx(Slider.Button, { type: "next", style: "filled" }), _jsx(Slider.Dots, { position: "bottom" })] }))] })), _jsxs("section", __assign({ style: { marginBottom: "80px" } }, { children: [_jsx("h3", { children: "3. Vertical Slider (2 slides visible)" }), _jsx("div", __assign({ style: {
+                            height: "500px",
+                            border: "1px solid #ddd",
+                            borderRadius: "12px",
+                            padding: "20px",
+                        } }, { children: _jsxs(Slider, __assign({ direction: "vertical", visibleSlides: 2, infinite: true, gap: 10 }, { children: [_jsx(Slider.Button, { type: "prev", style: "outlined" }), _jsxs(Slider.Track, { children: [_jsx("div", __assign({ style: {
+                                                height: "200px",
+                                                backgroundColor: "#f0f0f0",
+                                                borderRadius: "8px",
+                                                display: "flex",
+                                                alignItems: "center",
+                                                justifyContent: "center",
+                                            } }, { children: "Vertical 1" })), _jsx("div", __assign({ style: {
+                                                height: "200px",
+                                                backgroundColor: "#e0e0e0",
+                                                borderRadius: "8px",
+                                                display: "flex",
+                                                alignItems: "center",
+                                                justifyContent: "center",
+                                            } }, { children: "Vertical 2" })), _jsx("div", __assign({ style: {
+                                                height: "200px",
+                                                backgroundColor: "#d0d0d0",
+                                                borderRadius: "8px",
+                                                display: "flex",
+                                                alignItems: "center",
+                                                justifyContent: "center",
+                                            } }, { children: "Vertical 3" })), _jsx("div", __assign({ style: {
+                                                height: "200px",
+                                                backgroundColor: "#c0c0c0",
+                                                borderRadius: "8px",
+                                                display: "flex",
+                                                alignItems: "center",
+                                                justifyContent: "center",
+                                            } }, { children: "Vertical 4" }))] }), _jsx(Slider.Button, { type: "next", style: "outlined" }), _jsx(Slider.Dots, { position: "right" })] })) }))] })), _jsx("footer", __assign({ style: { textAlign: "center", paddingBottom: "50px" } }, { children: _jsx("p", { children: "All sliders are working with the same component logic!" }) }))] })));
 };
 export default App;

package/dist/App.test.js

@@ -1,8 +1,26 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { render, screen } from '@testing-library/react';
-import App from './App';
-test('renders learn react link', function () {
-    render(_jsx(App, {}));
-    var linkElement = screen.getByText(/learn react/i);
-    expect(linkElement).toBeInTheDocument();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { Slider } from "./components/Slider";
+describe("Slider Component Test", function () {
+    // Step 2: Test for the Slider component
+    test("renders correct number of slides", function () {
+        render(_jsxs(Slider, __assign({ visibleSlides: 1 }, { children: [_jsx("div", { children: "Slide 1" }), _jsx("div", { children: "Slide 2" }), _jsx("div", { children: "Slide 3" })] })));
+        // Selecting the slides by their text content
+        var slide1 = screen.getByText("Slide 1");
+        var slide2 = screen.getByText("Slide 2");
+        // Expect: Checking if the slides are present in the document
+        expect(slide1).toBeInTheDocument();
+        expect(slide2).toBeInTheDocument();
+    });
 });

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { SliderProps } from "../../types/Slider.types";
+import SliderTrack from "./SliderTrack";
+import SliderButton from "./SliderButton";
+import SliderDots from "./SliderDots";
+declare const Slider: React.FC<SliderProps> & {
+    Track: typeof SliderTrack;
+    Button: typeof SliderButton;
+    Dots: typeof SliderDots;
+};
+export default Slider;

package/dist/components/Slider/Slider.js

@@ -0,0 +1,84 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useCallback, useMemo, useEffect } from "react";
+import { SliderContext } from "../../context/SliderContext";
+import { SliderWrapper } from "./SliderStyles.styles";
+import SliderTrack from "./SliderTrack";
+import SliderButton from "./SliderButton";
+import SliderDots from "./SliderDots";
+var Slider = function (_a) {
+    var children = _a.children, _b = _a.visibleSlides, defaultVisibleSlides = _b === void 0 ? 1 : _b, _c = _a.direction, direction = _c === void 0 ? "horizontal" : _c, _d = _a.initialIndex, initialIndex = _d === void 0 ? 0 : _d, _e = _a.infinite, infinite = _e === void 0 ? false : _e, _f = _a.autoplay, autoplay = _f === void 0 ? false : _f, _g = _a.autoplaySpeed, autoplaySpeed = _g === void 0 ? 3000 : _g, _h = _a.gap, gap = _h === void 0 ? 0 : _h, breakpoints = _a.breakpoints;
+    var _j = useState(initialIndex), currentIndex = _j[0], setCurrentIndex = _j[1];
+    var _k = useState(defaultVisibleSlides), visibleSlides = _k[0], setVisibleSlides = _k[1];
+    var _l = useState(0), totalSlides = _l[0], setTotalSlides = _l[1];
+    // Handle responsive breakpoints
+    useEffect(function () {
+        var handleResize = function () {
+            var width = window.innerWidth;
+            var activeVisibleSlides = defaultVisibleSlides;
+            if (breakpoints) {
+                var sorted = Object.keys(breakpoints)
+                    .map(Number)
+                    .sort(function (a, b) { return a - b; });
+                for (var _i = 0, sorted_1 = sorted; _i < sorted_1.length; _i++) {
+                    var b = sorted_1[_i];
+                    if (width >= b)
+                        activeVisibleSlides = breakpoints[b].visibleSlides;
+                }
+            }
+            setVisibleSlides(activeVisibleSlides);
+        };
+        handleResize();
+        window.addEventListener("resize", handleResize);
+        return function () { return window.removeEventListener("resize", handleResize); };
+    }, [breakpoints, defaultVisibleSlides]);
+    var maxIndex = useMemo(function () { return Math.max(0, totalSlides - visibleSlides); }, [totalSlides, visibleSlides]);
+    var goToNext = useCallback(function () {
+        setCurrentIndex(function (prev) {
+            return infinite
+                ? prev >= maxIndex
+                    ? 0
+                    : prev + 1
+                : Math.min(prev + 1, maxIndex);
+        });
+    }, [maxIndex, infinite]);
+    var goToPrev = useCallback(function () {
+        setCurrentIndex(function (prev) {
+            return infinite ? (prev <= 0 ? maxIndex : prev - 1) : Math.max(prev - 1, 0);
+        });
+    }, [maxIndex, infinite]);
+    var goToSlide = useCallback(function (index) { return setCurrentIndex(index); }, []);
+    // Autoplay effect
+    useEffect(function () {
+        var interval;
+        if (autoplay && totalSlides > visibleSlides)
+            interval = setInterval(goToNext, autoplaySpeed);
+        return function () { return clearInterval(interval); };
+    }, [autoplay, autoplaySpeed, goToNext, totalSlides, visibleSlides]);
+    return (_jsx(SliderContext.Provider, __assign({ value: {
+            currentIndex: currentIndex,
+            totalSlides: totalSlides,
+            setTotalSlides: setTotalSlides,
+            visibleSlides: visibleSlides,
+            direction: direction,
+            infinite: infinite,
+            gap: gap,
+            goToNext: goToNext,
+            goToPrev: goToPrev,
+            goToSlide: goToSlide,
+        } }, { children: _jsx(SliderWrapper, __assign({ direction: direction }, { children: children })) })));
+};
+Slider.Track = SliderTrack;
+Slider.Button = SliderButton;
+Slider.Dots = SliderDots;
+export default Slider;

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { ButtonProps } from "../../types/Slider.types";
+declare const SliderButton: React.FC<ButtonProps>;
+export default SliderButton;

package/dist/components/Slider/SliderButton.js

@@ -0,0 +1,29 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSlider } from "../../context/SliderContext";
+import { Arrow } from "./SliderStyles.styles";
+var SliderButton = function (_a) {
+    var type = _a.type, children = _a.children, _b = _a.style, style = _b === void 0 ? "minimal" : _b;
+    var _c = useSlider(), goToNext = _c.goToNext, goToPrev = _c.goToPrev, direction = _c.direction;
+    var isHorizontal = direction === "horizontal";
+    var handleClick = type === "next" ? goToNext : goToPrev;
+    var defaultIcon = type === "next" ? (isHorizontal ? ">" : "˅") : isHorizontal ? "<" : "˄";
+    return (_jsx(Arrow, __assign({ direction: type === "next"
+            ? isHorizontal
+                ? "right"
+                : "down"
+            : isHorizontal
+                ? "left"
+                : "up", arrowStyle: style, arrowColor: "black", onClick: handleClick }, { children: children || defaultIcon })));
+};
+export default SliderButton;

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { DotsPosition } from "../../types/Slider.types";
+declare const SliderDots: React.FC<{
+    position?: DotsPosition;
+}>;
+export default SliderDots;

package/dist/components/Slider/SliderDots.js

@@ -0,0 +1,23 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSlider } from "../../context/SliderContext";
+import { DotsWrapper, Dot } from "./SliderStyles.styles";
+var SliderDots = function (_a) {
+    var _b = _a.position, position = _b === void 0 ? "bottom" : _b;
+    var _c = useSlider(), totalSlides = _c.totalSlides, visibleSlides = _c.visibleSlides, currentIndex = _c.currentIndex, goToSlide = _c.goToSlide;
+    var numberOfDots = Math.max(0, totalSlides - visibleSlides + 1);
+    if (numberOfDots <= 1)
+        return null;
+    return (_jsx(DotsWrapper, __assign({ position: position }, { children: Array.from({ length: numberOfDots }).map(function (_, index) { return (_jsx(Dot, { active: index === currentIndex, onClick: function () { return goToSlide(index); } }, index)); }) })));
+};
+export default SliderDots;

package/dist/components/Slider/SliderStyles.styles.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+export declare const SliderWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    direction: 'horizontal' | 'vertical';
+}>> & string;
+export declare const SlideTrack: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Slide: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    visibleSlides: number;
+}>> & string;
+export declare const DotsWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    position: 'top' | 'bottom' | 'left' | 'right';
+}>> & string;
+export declare const Dot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    active: boolean;
+}>> & string;
+export declare const Arrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    direction: 'left' | 'right' | 'up' | 'down';
+    arrowStyle: 'minimal' | 'filled' | 'outlined' | 'plain';
+    arrowColor: 'black' | 'white';
+}>> & string;

package/dist/components/Slider/SliderStyles.styles.js

@@ -0,0 +1,60 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from 'styled-components';
+export var SliderWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n  height: ", ";\n\n  ", "\n"], ["\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n  height: ", ";\n\n  ", "\n"])), function (_a) {
+    var direction = _a.direction;
+    return (direction === 'vertical' ? '100%' : 'auto');
+}, function (_a) {
+    var direction = _a.direction;
+    return direction === 'vertical' && "\n    display: flex;\n    flex-direction: column;\n  ";
+});
+export var SlideTrack = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  transition: transform 0.3s ease-in-out;\n  /* Track width will be set dynamically via inline styles */\n"], ["\n  display: flex;\n  transition: transform 0.3s ease-in-out;\n  /* Track width will be set dynamically via inline styles */\n"])));
+export var Slide = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  flex-shrink: 0; /* Important: prevents slides from squeezing */\n  width: 100%;\n  height: 100%;\n"], ["\n  box-sizing: border-box;\n  flex-shrink: 0; /* Important: prevents slides from squeezing */\n  width: 100%;\n  height: 100%;\n"])));
+export var DotsWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  z-index: 5;\n  flex-direction: ", ";\n  \n  ", "\n  ", "\n  ", "\n  ", "\n"], ["\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  z-index: 5;\n  flex-direction: ", ";\n  \n  ", "\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
+    var position = _a.position;
+    return (position === 'left' || position === 'right' ? 'column' : 'row');
+}, function (_a) {
+    var position = _a.position;
+    return position === 'top' && "top: 10px; left: 50%; transform: translateX(-50%);";
+}, function (_a) {
+    var position = _a.position;
+    return position === 'bottom' && "bottom: 10px; left: 50%; transform: translateX(-50%);";
+}, function (_a) {
+    var position = _a.position;
+    return position === 'left' && "left: 10px; top: 50%; transform: translateY(-50%);";
+}, function (_a) {
+    var position = _a.position;
+    return position === 'right' && "right: 10px; top: 50%; transform: translateY(-50%);";
+});
+export var Dot = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background-color: ", ";\n  margin: 5px;\n  cursor: pointer;\n  transition: background-color 0.2s;\n"], ["\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background-color: ", ";\n  margin: 5px;\n  cursor: pointer;\n  transition: background-color 0.2s;\n"])), function (_a) {
+    var active = _a.active;
+    return (active ? 'black' : 'lightgray');
+});
+export var Arrow = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: 10;\n  user-select: none;\n  transition: all 0.2s ease-in-out;\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: 10;\n  user-select: none;\n  transition: all 0.2s ease-in-out;\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
+    var direction = _a.direction;
+    return direction === 'left' && 'left: 15px; top: 50%; transform: translateY(-50%);';
+}, function (_a) {
+    var direction = _a.direction;
+    return direction === 'right' && 'right: 15px; top: 50%; transform: translateY(-50%);';
+}, function (_a) {
+    var direction = _a.direction;
+    return direction === 'up' && 'top: 15px; left: 50%; transform: translateX(-50%);';
+}, function (_a) {
+    var direction = _a.direction;
+    return direction === 'down' && 'bottom: 15px; left: 50%; transform: translateX(-50%);';
+}, function (_a) {
+    var arrowStyle = _a.arrowStyle;
+    return arrowStyle !== 'plain' && "\n    width: 45px;\n    height: 45px;\n    border-radius: 50%;\n    font-size: 20px;\n    box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n    &:hover { transform: scale(1.1) ".concat(function (props) { return props.direction === 'left' || props.direction === 'right' ? 'translateY(-45%)' : 'translateX(-45%)'; }, "; }\n  ");
+}, function (_a) {
+    var arrowStyle = _a.arrowStyle, arrowColor = _a.arrowColor;
+    return arrowStyle === 'minimal' && "\n    background-color: rgba(255, 255, 255, 0.8);\n    backdrop-filter: blur(4px);\n    color: ".concat(arrowColor === 'white' ? 'white' : '#333', ";\n  ");
+}, function (_a) {
+    var arrowStyle = _a.arrowStyle, arrowColor = _a.arrowColor;
+    return arrowStyle === 'filled' && "\n    background-color: ".concat(arrowColor === 'white' ? '#fff' : '#222', ";\n    color: ").concat(arrowColor === 'white' ? '#222' : '#fff', ";\n  ");
+}, function (_a) {
+    var arrowStyle = _a.arrowStyle, arrowColor = _a.arrowColor;
+    return arrowStyle === 'plain' && "\n    background: none;\n    font-size: 32px;\n    font-weight: bold;\n    color: ".concat(arrowColor === 'white' ? '#fff' : '#222', ";\n    &:hover { opacity: 0.7; transform: scale(1.2) ").concat(function (props) { return props.direction === 'left' || props.direction === 'right' ? 'translateY(-42%)' : 'translateX(-42%)'; }, "; }\n  ");
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -0,0 +1,5 @@
+import React from "react";
+declare const SliderTrack: React.FC<{
+    children: React.ReactNode;
+}>;
+export default SliderTrack;

package/dist/components/Slider/SliderTrack.js

@@ -0,0 +1,45 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect } from "react";
+import { useSlider } from "../../context/SliderContext";
+import { SlideTrack, Slide } from "./SliderStyles.styles";
+var SliderTrack = function (_a) {
+    var children = _a.children;
+    var _b = useSlider(), currentIndex = _b.currentIndex, direction = _b.direction, visibleSlides = _b.visibleSlides, setTotalSlides = _b.setTotalSlides, gap = _b.gap;
+    var isHorizontal = direction === "horizontal";
+    var count = React.Children.count(children);
+    useEffect(function () {
+        setTotalSlides(count);
+    }, [count, setTotalSlides]);
+    if (count === 0)
+        return null;
+    var trackWidth = (count / visibleSlides) * 100;
+    var transformPercentage = (currentIndex / count) * 100;
+    var transformValue = isHorizontal
+        ? "translateX(-".concat(transformPercentage, "%)")
+        : "translateY(-".concat(transformPercentage, "%)");
+    return (_jsx("div", __assign({ style: {
+            overflow: "hidden",
+            width: "100%",
+            height: isHorizontal ? "auto" : "100%",
+        } }, { children: _jsx(SlideTrack, __assign({ style: {
+                transform: transformValue,
+                flexDirection: isHorizontal ? "row" : "column",
+                width: isHorizontal ? "".concat(trackWidth, "%") : "100%",
+                height: isHorizontal ? "auto" : "".concat(trackWidth, "%"),
+            } }, { children: React.Children.map(children, function (child, index) { return (_jsx(Slide, __assign({ visibleSlides: visibleSlides, style: {
+                    flex: "0 0 ".concat(100 / count, "%"),
+                    padding: isHorizontal ? "0 ".concat(gap / 2, "px") : "".concat(gap / 2, "px 0"),
+                } }, { children: child }), index)); }) })) })));
+};
+export default SliderTrack;

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

@@ -0,0 +1,4 @@
+export { default as Slider } from "./Slider";
+export { default as SliderTrack } from "./SliderTrack";
+export { default as SliderButton } from "./SliderButton";
+export { default as SliderDots } from "./SliderDots";

package/dist/components/Slider/index.js

@@ -0,0 +1,4 @@
+export { default as Slider } from "./Slider";
+export { default as SliderTrack } from "./SliderTrack";
+export { default as SliderButton } from "./SliderButton";
+export { default as SliderDots } from "./SliderDots";

package/dist/context/SliderContext.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { SliderContextProps } from "../types/Slider.types";
+export declare const SliderContext: import("react").Context<SliderContextProps | undefined>;
+export declare const useSlider: () => SliderContextProps;

package/dist/context/SliderContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+export var SliderContext = createContext(undefined);
+export var useSlider = function () {
+    var context = useContext(SliderContext);
+    if (!context) {
+        throw new Error("Slider sub-components must be used within a <Slider />");
+    }
+    return context;
+};

package/dist/export.d.ts

@@ -0,0 +1,2 @@
+export { Slider } from "./components/Slider";
+export * from "./components/Slider";

package/dist/export.js

@@ -0,0 +1,2 @@
+export { Slider } from "./components/Slider";
+export * from "./components/Slider";

package/dist/index.d.ts

@@ -1 +1 @@
-export { default as Slider } from './components/Slider';
+import './index.css';

package/dist/index.js

@@ -1 +1,12 @@
-export { default as Slider } from './components/Slider';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+var root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(_jsx(React.StrictMode, { children: _jsx(App, {}) }));
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

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

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+export type SliderDirection = "horizontal" | "vertical";
+export type ArrowStyle = "minimal" | "filled" | "outlined" | "plain";
+export type DotsPosition = "top" | "bottom" | "left" | "right";
+export interface Breakpoints {
+    [key: number]: {
+        visibleSlides: number;
+    };
+}
+export interface SliderProps {
+    children: React.ReactNode;
+    visibleSlides?: number;
+    direction?: SliderDirection;
+    initialIndex?: number;
+    infinite?: boolean;
+    autoplay?: boolean;
+    autoplaySpeed?: number;
+    gap?: number;
+    breakpoints?: Breakpoints;
+}
+export interface SliderContextProps {
+    currentIndex: number;
+    totalSlides: number;
+    visibleSlides: number;
+    direction: SliderDirection;
+    infinite: boolean;
+    gap: number;
+    setTotalSlides: (count: number) => void;
+    goToNext: () => void;
+    goToPrev: () => void;
+    goToSlide: (index: number) => void;
+}
+export interface ButtonProps {
+    type: "prev" | "next";
+    children?: React.ReactNode;
+    style?: ArrowStyle;
+}

package/dist/types/Slider.types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-styled-slider-component",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "A customizable React slider component built with react ts and styled-components.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -33,6 +33,17 @@
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^16.18.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@types/styled-components": "^5.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "styled-components": "^6.1.1",
     "typescript": "^4.9.5"
   },
   "peerDependencies": {
@@ -57,5 +68,13 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "overrides": {
+    "nth-check": "^2.0.1",
+    "postcss": "^8.4.31",
+    "serialize-javascript": "^7.0.3",
+    "webpack-dev-server": "^5.2.0",
+    "underscore": "^1.13.7",
+    "jsonpath": "^1.1.1"
   }
 }