react-styled-slider-component 0.1.6 → 0.1.8

package/dist/App.js

@@ -12,6 +12,9 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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";
+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 App from './App';
-test('renders learn react link', function () {
-    render(_jsx(App, {}));
-    var linkElement = screen.getByText(/learn react/i);
-    expect(linkElement).toBeInTheDocument();
+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.d.ts

@@ -1,14 +1,47 @@
 import React from "react";
+interface SliderContextProps {
+    currentIndex: number;
+    totalSlides: number;
+    visibleSlides: number;
+    direction: "horizontal" | "vertical";
+    infinite: boolean;
+    gap: number;
+    setTotalSlides: (count: number) => void;
+    goToNext: () => void;
+    goToPrev: () => void;
+    goToSlide: (index: number) => void;
+}
+export declare const useSlider: () => SliderContextProps;
 interface SliderProps {
     children: React.ReactNode;
     visibleSlides?: number;
-    showDots?: boolean;
-    showArrows?: boolean;
-    dotsPosition?: "top" | "bottom" | "left" | "right";
-    slideStep?: number;
     direction?: "horizontal" | "vertical";
-    arrowStyle?: "minimal" | "filled" | "outlined";
-    arrowColor?: "black" | "white";
+    initialIndex?: number;
+    infinite?: boolean;
+    autoplay?: boolean;
+    autoplaySpeed?: number;
+    gap?: number;
+    breakpoints?: {
+        [key: number]: {
+            visibleSlides: number;
+        };
+    };
+}
+declare const SliderMain: React.FC<SliderProps> & {
+    Track: typeof SliderTrack;
+    Button: typeof SliderButton;
+    Dots: typeof SliderDots;
+};
+declare const SliderTrack: React.FC<{
+    children: React.ReactNode;
+}>;
+interface ButtonProps {
+    type: "prev" | "next";
+    children?: React.ReactNode;
+    style?: "minimal" | "filled" | "outlined" | "plain";
 }
-declare const Slider: React.FC<SliderProps>;
-export default Slider;
+declare const SliderButton: React.FC<ButtonProps>;
+declare const SliderDots: React.FC<{
+    position?: "top" | "bottom" | "left" | "right";
+}>;
+export default SliderMain;

package/dist/components/Slider.js

@@ -9,55 +9,99 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext, useContext, useState, useCallback, useMemo, useEffect } from "react";
 import { SliderWrapper, SlideTrack, Slide, DotsWrapper, Dot, Arrow, } from "./SliderStyles.styles";
-var Slider = function (_a) {
-    var children = _a.children, _b = _a.visibleSlides, visibleSlides = _b === void 0 ? 1 : _b, _c = _a.showDots, showDots = _c === void 0 ? true : _c, _d = _a.showArrows, showArrows = _d === void 0 ? true : _d, _e = _a.dotsPosition, dotsPosition = _e === void 0 ? "bottom" : _e, _f = _a.slideStep, slideStep = _f === void 0 ? 1 : _f, _g = _a.direction, direction = _g === void 0 ? "horizontal" : _g, _h = _a.arrowStyle, arrowStyle = _h === void 0 ? "minimal" : _h, _j = _a.arrowColor, arrowColor = _j === void 0 ? "black" : _j;
-    // Hooks must always be called unconditionally
-    var _k = useState(0), currentIndex = _k[0], setCurrentIndex = _k[1];
-    if (!children || React.Children.count(children) === 0) {
-        return null; // Return null if children is null, avoiding rendering anything
+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 />");
     }
-    var totalSlides = React.Children.count(children);
-    // Maximum index value, preventing overflow when navigating through slides.
-    var maxIndex = totalSlides - visibleSlides;
-    // Calculate the number of dots based on the total number of slides and the number of visible slides.
-    var numberOfDots = Math.ceil((totalSlides - visibleSlides + 1) / slideStep);
+    return context;
+};
+var SliderMain = 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];
+    // Responsive logic
+    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); }, []);
+    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 })) })));
+};
+// --- Sub-Components ---
+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, goToNext = _b.goToNext, goToPrev = _b.goToPrev;
     var isHorizontal = direction === "horizontal";
-    var goToNext = function () {
-        setCurrentIndex(function (prevIndex) { return Math.min(prevIndex + slideStep, maxIndex); });
-    };
-    var goToPrev = function () {
-        setCurrentIndex(function (prevIndex) { return Math.max(prevIndex - slideStep, 0); });
-    };
-    var goToSlide = function (index) {
-        setCurrentIndex(index);
-    };
-    var slidePercentage = isHorizontal
-        ? 100 / visibleSlides
-        : 100 / totalSlides;
-    return (_jsxs(SliderWrapper, __assign({ direction: direction, style: {
-            height: isHorizontal ? "auto" : "".concat(visibleSlides * 200, "px"),
-            display: isHorizontal ? "block" : "flex",
-            flexDirection: isHorizontal ? "row" : "column",
-        } }, { children: [showArrows && (_jsx(Arrow, __assign({ direction: isHorizontal ? "left" : "up", arrowStyle: arrowStyle, arrowColor: arrowColor, onClick: goToPrev }, { children: isHorizontal ? "<" : "˄" }))), _jsx(SlideTrack, __assign({ style: {
-                    transform: isHorizontal
-                        ? "translateX(-".concat(currentIndex * slidePercentage, "%)")
-                        : "translateY(-".concat((currentIndex * slideStep * 100) / totalSlides, "%)"),
-                    display: "flex",
-                    flexDirection: isHorizontal ? "row" : "column",
-                    width: isHorizontal ? "100%" : "100%",
-                    height: isHorizontal ? "auto" : "".concat(totalSlides * 100, "%"),
-                    transition: "transform 0.3s ease-in-out",
-                    boxSizing: "border-box",
-                } }, { children: React.Children.map(children, function (child, index) { return (_jsx(Slide, __assign({ visibleSlides: visibleSlides, style: {
-                        flex: isHorizontal ? "0 0 ".concat(slidePercentage, "%") : "1",
-                        width: isHorizontal ? "".concat(slidePercentage, "%") : "100%",
-                        height: isHorizontal ? "auto" : "".concat(100 / totalSlides, "%"),
-                        boxSizing: "border-box",
-                        margin: "0",
-                        padding: "0",
-                    } }, { children: child }), index)); }) })), showArrows && (_jsx(Arrow, __assign({ direction: isHorizontal ? "right" : "down", arrowStyle: arrowStyle, arrowColor: arrowColor, onClick: goToNext }, { children: isHorizontal ? ">" : "˅" }))), showDots && (_jsx(DotsWrapper, __assign({ position: dotsPosition }, { children: Array.from({ length: numberOfDots }).map(function (_, index) { return (_jsx(Dot, { active: index * slideStep === currentIndex, onClick: function () { return goToSlide(index * slideStep); } }, index)); }) })))] })));
+    var count = React.Children.count(children);
+    // Sync totalSlides count back to context
+    useEffect(function () {
+        setTotalSlides(count);
+    }, [count, setTotalSlides]);
+    if (count === 0)
+        return null;
+    var transformPercentage = (currentIndex / count) * 100;
+    var transformValue = isHorizontal ? "translateX(-".concat(transformPercentage, "%)") : "translateY(-".concat(transformPercentage, "%)");
+    var trackWidth = (count / visibleSlides) * 100;
+    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)); }) })) })));
+};
+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 })));
+};
+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 Slider;
+SliderMain.Track = SliderTrack;
+SliderMain.Button = SliderButton;
+SliderMain.Dots = SliderDots;
+export default SliderMain;

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

@@ -14,6 +14,6 @@ export declare const Dot: import("styled-components/dist/types").IStyledComponen
 }>> & 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';
+    arrowStyle: 'minimal' | 'filled' | 'outlined' | 'plain';
     arrowColor: 'black' | 'white';
 }>> & string;

package/dist/components/SliderStyles.styles.js

@@ -3,55 +3,58 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     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: ", "; // Ensure full height for vertical sliders\n\n  ", "\n"], ["\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n  height: ", "; // Ensure full height for vertical sliders\n\n  ", "\n"])), function (_a) {
+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"], ["\n  display: flex;\n  transition: transform 0.3s ease-in-out;\n"])));
-export var Slide = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  margin: 0; \n  padding: 0; \n"], ["\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  margin: 0; \n  padding: 0; \n"])));
-export var DotsWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  flex-direction: ", ";\n  margin-top: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n"], ["\n  display: flex;\n  justify-content: center;\n  flex-direction: ", ";\n  margin-top: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n"])), function (_a) {
+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' ? '10px' : '0');
+    return position === 'top' && "top: 10px; left: 50%; transform: translateX(-50%);";
 }, function (_a) {
     var position = _a.position;
-    return (position === 'bottom' ? '10px' : '0');
+    return position === 'bottom' && "bottom: 10px; left: 50%; transform: translateX(-50%);";
 }, function (_a) {
     var position = _a.position;
-    return (position === 'left' ? '10px' : '0');
+    return position === 'left' && "left: 10px; top: 50%; transform: translateY(-50%);";
 }, function (_a) {
     var position = _a.position;
-    return (position === 'right' ? '10px' : '0');
+    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: 0 5px;\n  cursor: pointer;\n"], ["\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background-color: ", ";\n  margin: 0 5px;\n  cursor: pointer;\n"])), function (_a) {
+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  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  font-size: 24px;\n  cursor: pointer;\n  z-index: 1;\n  user-select: none;\n\n  // Horizontal arrows\n  ", "\n  ", "\n\n  // Vertical arrows\n  ", "\n  ", "\n\n  // Minimal style: no background or border\n  ", "\n\n  // Filled style: solid background and white arrow\n  ", "\n\n  // Outlined style: transparent background with colored border and arrow\n  ", "\n"], ["\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  font-size: 24px;\n  cursor: pointer;\n  z-index: 1;\n  user-select: none;\n\n  // Horizontal arrows\n  ", "\n  ", "\n\n  // Vertical arrows\n  ", "\n  ", "\n\n  // Minimal style: no background or border\n  ", "\n\n  // Filled style: solid background and white arrow\n  ", "\n\n  // Outlined style: transparent background with colored border and arrow\n  ", "\n"])), function (_a) {
+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: 10px; top: 50%; transform: translateY(-50%);';
+    return direction === 'left' && 'left: 15px; top: 50%; transform: translateY(-50%);';
 }, function (_a) {
     var direction = _a.direction;
-    return direction === 'right' && 'right: 10px; top: 50%; transform: translateY(-50%);';
+    return direction === 'right' && 'right: 15px; top: 50%; transform: translateY(-50%);';
 }, function (_a) {
     var direction = _a.direction;
-    return direction === 'up' && 'top: 10px; left: 50%; transform: translateX(-50%);';
+    return direction === 'up' && 'top: 15px; left: 50%; transform: translateX(-50%);';
 }, function (_a) {
     var direction = _a.direction;
-    return direction === 'down' && 'bottom: 10px; left: 50%; transform: translateX(-50%);';
+    return direction === 'down' && 'bottom: 15px; left: 50%; transform: translateX(-50%);';
 }, function (_a) {
     var arrowStyle = _a.arrowStyle;
-    return arrowStyle === 'minimal' && "\n    background-color: transparent;\n    border: none;\n  ";
+    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 === 'filled' && "\n    background-color: ".concat(arrowColor === 'white' ? 'white' : 'black', ";\n    color: ").concat(arrowColor === 'white' ? 'black' : 'white', ";\n  ");
+    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 === 'outlined' && "\n    background-color: transparent;\n    border: 2px solid ".concat(arrowColor === 'white' ? 'white' : 'black', ";\n    color: ").concat(arrowColor === 'white' ? 'white' : 'black', ";\n  ");
+    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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-styled-slider-component",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "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": {