imageslider-next 1.2.1 → 1.3.2

package/README.md

@@ -1,79 +1,116 @@
-# Simple Image Slider - Next
- 
- imageslider-next is a simple image slider using tailwind css.
+# imageslider-next
 
-## Installation
+A small, framework-agnostic image slider component built with Tailwind CSS and TypeScript. This package now supports passing a custom image component (for example, Next.js `Image`) so you can enable optimized images inside Next.js projects.
+
+## Install
 
 ```zsh
 npm i imageslider-next
+# or
+pnpm add imageslider-next
 ```
 
-### Configure Tailwind
+## Features
+
+- Lightweight, accessible image slider.
+- Accepts a custom `ImageComponent` (e.g. `next/image`) for optimized images.
+- `imageProps` forwarding for responsive behavior (e.g. `sizes`, `priority`, `objectFit`).
+- Responsive native `<img>` fallback when no `ImageComponent` is provided.
+- Fixed: each slider instance is independent; controls no longer collide across multiple instances.
+
+## Basic usage
+
+```tsx
+import ImageSliderNext from 'imageslider-next';
+
+const data = [
+  { id: 1, imageUrl: '/images/1.jpg', title: 'One', alt: 'One', width: 1200, height: 800 },
+  { id: 2, imageUrl: '/images/2.jpg', title: 'Two', alt: 'Two', width: 1200, height: 800 },
+  { id: 3, imageUrl: '/images/3.jpg', title: 'Three', alt: 'Three', width: 1200, height: 800 },
+];
+
+<ImageSliderNext
+  data={data}
+  sliderClassName="w-full shadow-md h-64 sm:h-80 rounded-lg"
+  slideClassName=""
+  buttonClassName="w-3 h-3 rounded-full bg-black/50"
+  imageWidth={1200}
+  imageHeight={800}
+/>
+```
 
-For help with Tailwind CSS installation: 
-[Tailwind CSS Installation](https://tailwindcss.com/docs/installation)
+## Using Next.js `Image` for optimization
 
-Add imageslider-next component to the template path in `tailwind.config.js` file:
+If you use Next.js, pass `Image` as the `ImageComponent` prop and optionally forward `imageProps` to enable responsive loading. Example:
 
-```ts
-import type { Config } from "tailwindcss";
-
-const config: Config = {
-  content: [
-    "./node_modules/imageslider-next/**/*.js"
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}
+```tsx
+import Image from 'next/image';
+import ImageSliderNext from 'imageslider-next';
+import img1 from '@/public/1.jpg';
+
+const slides = [
+  { id: 1, imageSrc: img1, title: 'First', alt: 'first', width: 1200, height: 800 },
+  // ...
+];
+
+<ImageSliderNext
+  data={slides}
+  sliderClassName="w-full shadow-md h-[50vh] rounded-lg"
+  ImageComponent={Image}
+  imageProps={{ sizes: '100vw', priority: true }}
+  imageWidth={1200}
+  imageHeight={800}
+/>
 ```
 
-## Example
+Notes:
+- We intentionally strip `fill: true` when forwarded to avoid layout issues inside the slider (the slider manages layout). If you need `fill` behavior, you can implement a wrapper with an explicit aspect ratio on your slide.
+- Provide `width`/`height` per item or use `imageWidth`/`imageHeight` defaults to help the component calculate correct sizes.
 
-```ts
+## Storybook
 
-<div className="relative flex items-center justify-center">
-  <ImageSliderNext data={imageData} sliderClassName={"w-full shadow-md h-48 sm:h-64 xl:h-80 2xl:h-96 rounded-lg"} slideClassName={""} buttonClassName={"w-3 h-3 rounded-full bg-black/50"} buttonLabelClassName={"hidden"} imageHeight={300} imageWidth={500} />
-</div>
+To run the component locally with Storybook:
 
+```bash
+npm run storybook
+# or
+pnpm storybook
 ```
 
-### data structure
-```ts
+There are example stories that show a native `<img>` fallback and usage with a mock `Image` component. Use the `With Image Component` story to test integration.
 
-// json data structure
-[
-    {
-      id: 1,
-      imageUrl: 'https://www.w3schools.com/w3images/workbench.jpg',
-      title: 'Image 1',
-    },
-    {
-      id: 2,
-      imageUrl: 'https://www.w3schools.com/w3images/coffee.jpg',
-      title: 'Image 2',
-    },
-    {
-      id: 3,
-      imageUrl: 'https://www.w3schools.com/w3images/sound.jpg',
-      title: 'Image 3',
-    },
-    // Add more images as needed
-]
+Hosted Storybook: https://imageslider-next.vercel.app/
 
-```
+## TypeScript / image imports
+
+If your TypeScript setup complains about importing image files, add a simple declaration file `src/types/images.d.ts`:
 
-### import in NextJS via external json file
 ```ts
+declare module '*.jpg';
+declare module '*.png';
+declare module '*.svg';
+declare module '*.webp';
+declare module '*.avif';
+```
 
-// Using NextJS and external json.
-import imageData from '@/public/your-data.json';
+Also, for local development you may want to add React type declarations if you see missing types:
 
+```bash
+npm install -D @types/react @types/react-dom
 ```
 
-## Documentation
+## API
+
+`ImageSliderNext` props (high level):
+
+- `data: ItemData[]` — items to render. Each item supports `imageUrl`, `imageSrc` (imported images), `title`, `alt`, `width`, `height`.
+- `sliderClassName: string` — classes applied to slider root.
+- `slideClassName: string` — classes applied to each slide.
+- `buttonClassName: string` — classes applied to pagination buttons.
+- `imageWidth?: number`, `imageHeight?: number` — defaults used when per-item sizes missing.
+- `ImageComponent?: React.ComponentType<any>` — optional image component (pass Next's `Image`).
+- `imageProps?: Record<string, any>` — forwarded props for the image component (we strip `fill`).
 
-**Storybook Url:** [https://imageslider-next.vercel.app/](https://imageslider-next.vercel.app/) 
+## Contributing
 
-## Contributing
+PRs welcome — please run `npm run build` and `npm run storybook` to test changes locally.

package/dist/imageslider-next.js

@@ -9,6 +9,12 @@ exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -22,56 +28,79 @@ var ImageSliderNext = function ImageSliderNext(_ref) {
     buttonClassName = _ref.buttonClassName,
     imageWidth = _ref.imageWidth,
     imageHeight = _ref.imageHeight,
-    buttonLabelClassName = _ref.buttonLabelClassName;
+    buttonLabelClassName = _ref.buttonLabelClassName,
+    ImageComponent = _ref.ImageComponent,
+    imageProps = _ref.imageProps;
   var _useState = (0, _react.useState)(0),
     _useState2 = _slicedToArray(_useState, 2),
     current = _useState2[0],
     setCurrent = _useState2[1];
-  var _useState3 = (0, _react.useState)(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    slides = _useState4[0],
-    setSlides = _useState4[1];
+  var slidesRef = (0, _react.useRef)(null);
+  var rootRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
-    var slider = document.getElementById('slider');
-    if (slider) {
-      setSlides(slider.querySelector('.slides'));
+    if (rootRef.current) {
+      slidesRef.current = rootRef.current.querySelector('.slides');
     }
   }, []);
   var handlePrev = function handlePrev() {
-    if (slides) {
-      setCurrent((current - 1 + slides.children.length) % slides.children.length);
+    if (slidesRef.current) {
+      setCurrent((current - 1 + slidesRef.current.children.length) % slidesRef.current.children.length);
     }
   };
   var handleNext = function handleNext() {
-    if (slides) {
-      setCurrent((current + 1) % slides.children.length);
+    if (slidesRef.current) {
+      setCurrent((current + 1) % slidesRef.current.children.length);
     }
   };
   var goToNext = function goToNext(index) {
     setCurrent(index);
   };
   (0, _react.useEffect)(function () {
-    if (slides) {
-      slides.style.transform = 'translateX(' + -current * 100 + '%)';
+    if (slidesRef.current) {
+      slidesRef.current.style.transform = 'translateX(' + -current * 100 + '%)';
     }
-  }, [current, slides]);
+  }, [current, slidesRef]);
   var baseSliderCssClass = "overflow-hidden relative flex items-center justify-center";
   var baseSlideCssClass = "slide flex-none w-full h-full items-center justify-center overflow-hidden";
   var baseButtonCssClass = buttonClassName === "" ? "w-3 h-3 rounded-full bg-black/50" : buttonClassName;
   var baseButtonLabelCssClass = buttonLabelClassName === null ? "" : buttonLabelClassName;
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(baseSliderCssClass, " ").concat(sliderClassName),
-    id: "slider"
+    ref: rootRef,
+    className: "".concat(baseSliderCssClass, " ").concat(sliderClassName)
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "slides flex transition-transform duration-700 ease-in-out"
   }, data.map(function (itemData, index) {
+    var _ref2, _itemData$width, _ref3, _itemData$height, _ref4, _itemData$imageSrc, _itemData$alt, _itemData$width2, _itemData$height2, _ref5, _itemData$imageUrl, _itemData$alt2;
+    var itemWidth = (_ref2 = (_itemData$width = itemData.width) !== null && _itemData$width !== void 0 ? _itemData$width : imageWidth) !== null && _ref2 !== void 0 ? _ref2 : 1;
+    var itemHeight = (_ref3 = (_itemData$height = itemData.height) !== null && _itemData$height !== void 0 ? _itemData$height : imageHeight) !== null && _ref3 !== void 0 ? _ref3 : 1;
+    // keep paddingTop calculation available if needed elsewhere
+    var paddingTop = "".concat(itemHeight / itemWidth * 100, "%");
+    var forwardedImageProps = _objectSpread({}, imageProps !== null && imageProps !== void 0 ? imageProps : {});
+    // Always ignore fill to avoid absolute/fill behavior which can cause layout issues in the slider
+    if ('fill' in forwardedImageProps) delete forwardedImageProps.fill;
     return /*#__PURE__*/_react["default"].createElement("div", {
       key: itemData.id,
       className: "".concat(baseSlideCssClass, " ").concat(slideClassName)
-    }, /*#__PURE__*/_react["default"].createElement("img", {
-      src: itemData.imageUrl,
-      alt: itemData.title,
-      className: "w-full"
+    }, ImageComponent ?
+    /*#__PURE__*/
+    // Always render the provided Image component in non-fill mode (width/height or responsive)
+    _react["default"].createElement(ImageComponent, _extends({
+      src: (_ref4 = (_itemData$imageSrc = itemData.imageSrc) !== null && _itemData$imageSrc !== void 0 ? _itemData$imageSrc : itemData.imageUrl) !== null && _ref4 !== void 0 ? _ref4 : '',
+      alt: (_itemData$alt = itemData.alt) !== null && _itemData$alt !== void 0 ? _itemData$alt : itemData.title,
+      width: (_itemData$width2 = itemData.width) !== null && _itemData$width2 !== void 0 ? _itemData$width2 : imageWidth,
+      height: (_itemData$height2 = itemData.height) !== null && _itemData$height2 !== void 0 ? _itemData$height2 : imageHeight,
+      className: "w-full h-auto"
+    }, forwardedImageProps)) :
+    /*#__PURE__*/
+    // native img fallback: make responsive via width 100% and height auto
+    _react["default"].createElement("img", {
+      src: (_ref5 = (_itemData$imageUrl = itemData.imageUrl) !== null && _itemData$imageUrl !== void 0 ? _itemData$imageUrl : itemData.imageSrc) !== null && _ref5 !== void 0 ? _ref5 : '',
+      alt: (_itemData$alt2 = itemData.alt) !== null && _itemData$alt2 !== void 0 ? _itemData$alt2 : itemData.title,
+      style: {
+        width: '100%',
+        height: 'auto',
+        display: 'block'
+      }
     }));
   })), /*#__PURE__*/_react["default"].createElement("div", {
     className: "flex flex-wrap absolute bottom-2 z-50 space-x-3"

package/dist/imageslider-next.stories.js

@@ -1,13 +1,25 @@
 "use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.WithImageComponent = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _imagesliderNext = _interopRequireDefault(require("./imageslider-next"));
 require("tailwindcss/tailwind.css");
+var _excluded = ["src", "alt", "width", "height", "fill", "style"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
+var img1 = require('./stories/assets/images/1.jpg');
+var img2 = require('./stories/assets/images/2.jpg');
+var img3 = require('./stories/assets/images/3.jpg');
 var _default = exports["default"] = {
   title: 'ImageSliderNext',
   component: _imagesliderNext["default"],
@@ -20,16 +32,19 @@ var Default = exports.Default = Template.bind({});
 Default.args = {
   data: [{
     id: 1,
-    imageUrl: 'https://www.w3schools.com/w3images/workbench.jpg',
-    title: 'Image 1'
+    imageSrc: img1,
+    title: 'Image 1',
+    alt: 'Image 1'
   }, {
     id: 2,
-    imageUrl: 'https://www.w3schools.com/w3images/coffee.jpg',
-    title: 'Image 2'
+    imageSrc: img2,
+    title: 'Image 2',
+    alt: 'Image 2'
   }, {
     id: 3,
-    imageUrl: 'https://www.w3schools.com/w3images/sound.jpg',
-    title: 'Image 3'
+    imageSrc: img3,
+    title: 'Image 3',
+    alt: 'Image 3'
   }
   // Add more images as needed
   ],
@@ -39,4 +54,49 @@ Default.args = {
   buttonLabelClassName: 'hidden',
   imageWidth: 500,
   imageHeight: 300
-};
+};
+
+// A tiny Mock Image component that mimics next/image API just for Storybook preview.
+var MockImage = function MockImage(_ref) {
+  var src = _ref.src,
+    alt = _ref.alt,
+    width = _ref.width,
+    height = _ref.height,
+    fill = _ref.fill,
+    style = _ref.style,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  if (fill) {
+    var _rest$objectFit;
+    return /*#__PURE__*/_react["default"].createElement("img", {
+      src: src,
+      alt: alt,
+      style: {
+        position: 'absolute',
+        inset: 0,
+        width: '100%',
+        height: '100%',
+        objectFit: (_rest$objectFit = rest.objectFit) !== null && _rest$objectFit !== void 0 ? _rest$objectFit : 'cover'
+      }
+    });
+  }
+  return /*#__PURE__*/_react["default"].createElement("img", {
+    src: src,
+    alt: alt,
+    width: width,
+    height: height,
+    style: _objectSpread({
+      width: '100%',
+      height: 'auto',
+      display: 'block'
+    }, style)
+  });
+};
+var WithImageComponent = exports.WithImageComponent = Template.bind({});
+WithImageComponent.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  ImageComponent: MockImage,
+  imageProps: {
+    fill: false,
+    sizes: '100vw'
+  },
+  sliderClassName: 'm-5 shadow-md h-[50vh] rounded-lg'
+});

package/dist/types/src/imageslider-next.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"imageslider-next.d.ts","sourceRoot":"","sources":["../../../src/imageslider-next.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA8E/C,CAAA;AAED,eAAe,eAAe,CAAC"}
+{"version":3,"file":"imageslider-next.d.ts","sourceRoot":"","sources":["../../../src/imageslider-next.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAsG/C,CAAA;AAED,eAAe,eAAe,CAAC"}

package/dist/types/src/imageslider-next.stories.d.ts

@@ -1,6 +1,7 @@
 import { ImageSliderProps } from './imagesliderprops';
 import 'tailwindcss/tailwind.css';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("@storybook/types").Args>;
+declare const _default: import("storybook/internal/csf").ComponentAnnotations<import("@storybook/react-webpack5").ReactRenderer, import("@storybook/react-webpack5").Args>;
 export default _default;
-export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ImageSliderProps>;
+export declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react-webpack5").ReactRenderer, ImageSliderProps>;
+export declare const WithImageComponent: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react-webpack5").ReactRenderer, ImageSliderProps>;
 //# sourceMappingURL=imageslider-next.stories.d.ts.map

package/dist/types/src/imageslider-next.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"imageslider-next.stories.d.ts","sourceRoot":"","sources":["../../../src/imageslider-next.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,0BAA0B,CAAC;;AAElC,wBAIU;AAIV,eAAO,MAAM,OAAO,yGAAoB,CAAC"}
+{"version":3,"file":"imageslider-next.stories.d.ts","sourceRoot":"","sources":["../../../src/imageslider-next.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAItD,OAAO,0BAA0B,CAAC;;AAElC,wBAIU;AAIV,eAAO,MAAM,OAAO,wHAAoB,CAAC;AA0BzC,eAAO,MAAM,kBAAkB,wHAAoB,CAAC"}

package/dist/types/src/imagesliderprops.d.ts

@@ -1,15 +1,27 @@
+import React from 'react';
 export interface ItemData {
     id: number;
-    imageUrl: string;
+    /** string URL or imported image (StaticImageData) */
+    imageUrl?: string;
+    imageSrc?: string | any;
     title: string;
+    alt?: string;
+    width?: number;
+    height?: number;
 }
 export interface ImageSliderProps {
     data: ItemData[];
     sliderClassName: string;
     slideClassName: string;
     buttonClassName: string;
-    imageWidth: number;
-    imageHeight: number;
+    /** default width applied when individual item width is not provided */
+    imageWidth?: number;
+    /** default height applied when individual item height is not provided */
+    imageHeight?: number;
     buttonLabelClassName?: string | null;
+    /** Optional image component to render images. Pass Next.js `Image` here for optimized images. */
+    ImageComponent?: React.ComponentType<any>;
+    /** Optional props forwarded to the image component or native img element (e.g. { fill: true, sizes: '100vw' }) */
+    imageProps?: Record<string, any>;
 }
 //# sourceMappingURL=imagesliderprops.d.ts.map

package/dist/types/src/imagesliderprops.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"imagesliderprops.d.ts","sourceRoot":"","sources":["../../../src/imagesliderprops.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,QAAQ;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf;AAEH,MAAM,WAAW,gBAAgB;IAC7B,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,oBAAoB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACxC"}
+{"version":3,"file":"imagesliderprops.d.ts","sourceRoot":"","sources":["../../../src/imagesliderprops.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,uEAAuE;IACvE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,iGAAiG;IACjG,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,kHAAkH;IAClH,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAClC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imageslider-next",
-  "version": "1.2.1",
+  "version": "1.3.2",
   "main": "dist/imageslider-next.js",
   "types": "dist/types/src/imageslider-next.d.ts",
   "files": [
@@ -30,29 +30,26 @@
     "@babel/preset-env": "^7.24.5",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.24.6",
-    "@storybook/addon-docs": "^8.1.3",
+    "@storybook/addon-docs": "^9.1.3",
+    "@types/react": "^18.3.24",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "typescript": "^5.4.5"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.5",
-    "@chromatic-com/storybook": "^1.4.0",
-    "@storybook/addon-essentials": "^8.1.3",
-    "@storybook/addon-interactions": "^8.1.3",
-    "@storybook/addon-links": "^8.1.3",
-    "@storybook/addon-onboarding": "^8.1.3",
+    "@chromatic-com/storybook": "^4.1.1",
+    "@storybook/addon-links": "^9.1.3",
+    "@storybook/addon-onboarding": "^9.1.3",
     "@storybook/addon-styling-webpack": "^1.0.0",
-    "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
-    "@storybook/blocks": "^8.1.3",
-    "@storybook/react": "^8.1.3",
-    "@storybook/react-webpack5": "^8.1.3",
-    "@storybook/test": "^8.1.3",
+    "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
+    "@storybook/react-webpack5": "^9.1.3",
     "autoprefixer": "^10.4.19",
     "cross-env": "^7.0.3",
     "postcss-loader": "^8.1.1",
     "rimraf": "^5.0.7",
-    "storybook": "^8.1.3",
-    "tailwindcss": "^3.4.3"
+    "storybook": "^9.1.3",
+    "tailwindcss": "^3.4.3",
+    "@storybook/addon-docs": "^9.1.3"
   }
 }