react-best-carroussel 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Bruno Jimenez Postali
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,72 @@
+# React Image Carousel
+
+React image carousel library with a simple API, accessibility support and npm-ready packaging.
+
+## Features
+
+- keyboard and screen-reader accessibility
+- autoplay with pause on hover and focus
+- optional loop mode
+- arrows, indicators and thumbnail navigation
+- swipe support for touch and pointer
+- controlled and uncontrolled usage
+- automated tests with coverage and CI
+
+## Installation
+
+```bash
+npm install react-best-carroussel react react-dom
+```
+
+## Usage
+
+```tsx
+import { ImageCarousel } from "react-best-carroussel";
+
+const images = [
+  { src: "/images/1.jpg", alt: "Landscape 1", caption: "First image" },
+  { src: "/images/2.jpg", alt: "Landscape 2", caption: "Second image" },
+  { src: "/images/3.jpg", alt: "Landscape 3", caption: "Third image" }
+];
+
+export function Gallery() {
+  return <ImageCarousel images={images} autoplay showThumbnails aspectRatio="4 / 3" />;
+}
+```
+
+## Main props
+
+- `images`: `{ src, alt, caption?, thumbnailSrc? }[]`
+- `initialIndex`, `index`, `onIndexChange`, `onSlideChange`
+- `loop`, `autoplay`, `autoplayDelay`
+- `pauseOnHover`, `pauseOnFocus`
+- `showArrows`, `showIndicators`, `showThumbnails`
+- `keyboardNavigation`, `swipeThreshold`
+- `aspectRatio`, `objectFit`, `labels`
+
+## Quality
+
+```bash
+npm install --include=dev
+npm run check
+```
+
+`npm run check` runs type checking, tests with coverage and the distribution build. The workflow in [`.github/workflows/ci.yml`](/d:/Study/react-best-carroussel/.github/workflows/ci.yml) runs the same validation on push and pull request.
+
+## Release Automation
+
+The workflow in [`.github/workflows/release.yml`](/d:/Study/react-best-carroussel/.github/workflows/release.yml) publishes the package to npm with Trusted Publishing when you push a tag matching `v*.*.*`.
+
+Configure Trusted Publishing in npm for this GitHub repository using these values:
+
+- Source repository owner: `brujim`
+- Source repository name: `react-best-carroussel`
+- Workflow file: `.github/workflows/release.yml`
+- Environment: leave empty unless you later decide to use a protected GitHub environment
+
+After the trusted publisher is configured on npm, you can release with:
+
+```bash
+git tag -a v0.1.1 -m "Release v0.1.1"
+git push origin v0.1.1
+```

package/dist/index.cjs

@@ -0,0 +1,365 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ImageCarousel: () => ImageCarousel
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/ImageCarousel.tsx
+var import_react = require("react");
+
+// src/injectStyles.ts
+var STYLE_ID = "image-carousel-library-styles";
+var styles = `
+.icl-root{position:relative;width:100%;display:grid;gap:1rem;color:#101828;font-family:system-ui,sans-serif}
+.icl-viewport{position:relative;overflow:hidden;border-radius:1rem;background:linear-gradient(180deg,#f8fafc 0%,#e2e8f0 100%)}
+.icl-track{display:flex;touch-action:pan-y;will-change:transform}
+.icl-slide{min-width:100%;position:relative;user-select:none}
+.icl-figure{margin:0;position:relative;aspect-ratio:var(--icl-aspect-ratio,16/9);overflow:hidden}
+.icl-image{width:100%;height:100%;display:block;object-fit:var(--icl-object-fit,cover);background:#cbd5e1}
+.icl-caption{position:absolute;left:1rem;right:1rem;bottom:1rem;padding:.75rem 1rem;border-radius:.75rem;background:rgb(15 23 42 / .7);color:#f8fafc;font-size:.95rem;backdrop-filter:blur(8px)}
+.icl-nav{position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border:0;border-radius:999px;background:rgb(15 23 42 / .8);color:#fff;cursor:pointer;z-index:1}
+.icl-nav:hover{background:rgb(15 23 42 / .92)}
+.icl-nav:focus-visible,.icl-dot:focus-visible,.icl-thumb:focus-visible{outline:3px solid #38bdf8;outline-offset:2px}
+.icl-nav[disabled]{opacity:.45;cursor:not-allowed}
+.icl-nav-prev{left:.75rem}
+.icl-nav-next{right:.75rem}
+.icl-footer{display:grid;gap:.75rem}
+.icl-dots{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap}
+.icl-dot{width:.8rem;height:.8rem;border:0;border-radius:999px;background:#cbd5e1;cursor:pointer;padding:0}
+.icl-dot[aria-current="true"]{background:#0f172a;transform:scale(1.15)}
+.icl-thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(4.5rem,1fr));gap:.5rem}
+.icl-thumb{border:2px solid transparent;border-radius:.8rem;padding:0;overflow:hidden;cursor:pointer;background:#e2e8f0}
+.icl-thumb[aria-current="true"]{border-color:#0f172a}
+.icl-thumb img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
+.icl-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
+@media (max-width: 640px){
+  .icl-caption{left:.75rem;right:.75rem;bottom:.75rem;font-size:.85rem}
+  .icl-nav{width:2.4rem;height:2.4rem}
+}
+`;
+function ensureCarouselStyles() {
+  if (typeof document === "undefined") {
+    return;
+  }
+  if (document.getElementById(STYLE_ID)) {
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = styles;
+  document.head.appendChild(style);
+}
+
+// src/ImageCarousel.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var defaultLabels = {
+  region: "Image carousel",
+  previous: "Previous slide",
+  next: "Next slide",
+  goToSlide: (index) => `Go to slide ${index + 1}`,
+  slide: (index, total) => `Slide ${index + 1} of ${total}`
+};
+function clampIndex(value, total) {
+  if (total === 0) {
+    return 0;
+  }
+  return Math.max(0, Math.min(value, total - 1));
+}
+function resolveIndex(value, total, loop) {
+  if (total === 0) {
+    return 0;
+  }
+  if (loop) {
+    return (value + total) % total;
+  }
+  return clampIndex(value, total);
+}
+function ImageCarousel({
+  images,
+  className,
+  style,
+  initialIndex = 0,
+  index,
+  loop = true,
+  autoplay = false,
+  autoplayDelay = 4e3,
+  pauseOnHover = true,
+  pauseOnFocus = true,
+  keyboardNavigation = true,
+  showArrows = true,
+  showIndicators = true,
+  showThumbnails = false,
+  swipeThreshold = 40,
+  aspectRatio = "16 / 9",
+  objectFit = "cover",
+  transitionDuration = 350,
+  onIndexChange,
+  onSlideChange,
+  labels
+}) {
+  const total = images.length;
+  const mergedLabels = { ...defaultLabels, ...labels };
+  const rootId = (0, import_react.useId)();
+  const [internalIndex, setInternalIndex] = (0, import_react.useState)(() => clampIndex(initialIndex, total));
+  const [isHovered, setIsHovered] = (0, import_react.useState)(false);
+  const [isFocused, setIsFocused] = (0, import_react.useState)(false);
+  const [dragOffset, setDragOffset] = (0, import_react.useState)(0);
+  const dragStartX = (0, import_react.useRef)(null);
+  const dragOffsetRef = (0, import_react.useRef)(0);
+  const isControlled = index !== void 0;
+  const activeIndex = resolveIndex(isControlled ? index : internalIndex, total, false);
+  (0, import_react.useEffect)(() => {
+    ensureCarouselStyles();
+  }, []);
+  (0, import_react.useEffect)(() => {
+    setInternalIndex((current) => clampIndex(current, total));
+  }, [total]);
+  (0, import_react.useEffect)(() => {
+    if (total === 0) {
+      return;
+    }
+    onSlideChange?.(activeIndex);
+  }, [activeIndex, onSlideChange, total]);
+  const canGoPrevious = loop || activeIndex > 0;
+  const canGoNext = loop || activeIndex < total - 1;
+  const setIndex = (next) => {
+    const resolved = resolveIndex(next, total, loop);
+    onIndexChange?.(resolved);
+    if (!isControlled) {
+      setInternalIndex(resolved);
+    }
+  };
+  const goToPrevious = () => setIndex(activeIndex - 1);
+  const goToNext = () => setIndex(activeIndex + 1);
+  const goTo = (next) => setIndex(next);
+  (0, import_react.useEffect)(() => {
+    if (!autoplay || total <= 1) {
+      return;
+    }
+    if (pauseOnHover && isHovered || pauseOnFocus && isFocused) {
+      return;
+    }
+    const timer = window.setInterval(() => {
+      setIndex(activeIndex + 1);
+    }, autoplayDelay);
+    return () => window.clearInterval(timer);
+  }, [
+    activeIndex,
+    autoplay,
+    autoplayDelay,
+    isFocused,
+    isHovered,
+    pauseOnFocus,
+    pauseOnHover,
+    total
+  ]);
+  const handleKeyDown = (event) => {
+    if (!keyboardNavigation || total <= 1) {
+      return;
+    }
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      goToPrevious();
+    }
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      goToNext();
+    }
+    if (event.key === "Home") {
+      event.preventDefault();
+      goTo(0);
+    }
+    if (event.key === "End") {
+      event.preventDefault();
+      goTo(total - 1);
+    }
+  };
+  const handlePointerDown = (event) => {
+    if (total <= 1) {
+      return;
+    }
+    dragStartX.current = event.clientX;
+    dragOffsetRef.current = 0;
+    setDragOffset(0);
+  };
+  const handlePointerMove = (event) => {
+    if (dragStartX.current === null) {
+      return;
+    }
+    const nextOffset = event.clientX - dragStartX.current;
+    dragOffsetRef.current = nextOffset;
+    setDragOffset(nextOffset);
+  };
+  const finishDrag = () => {
+    if (dragStartX.current === null) {
+      return;
+    }
+    if (dragOffsetRef.current >= swipeThreshold) {
+      goToPrevious();
+    } else if (dragOffsetRef.current <= -swipeThreshold) {
+      goToNext();
+    }
+    dragStartX.current = null;
+    dragOffsetRef.current = 0;
+    setDragOffset(0);
+  };
+  const handleTouchStart = (event) => {
+    if (total <= 1) {
+      return;
+    }
+    dragStartX.current = event.touches[0]?.clientX ?? null;
+    dragOffsetRef.current = 0;
+    setDragOffset(0);
+  };
+  const handleTouchMove = (event) => {
+    if (dragStartX.current === null) {
+      return;
+    }
+    const nextOffset = (event.touches[0]?.clientX ?? dragStartX.current) - dragStartX.current;
+    dragOffsetRef.current = nextOffset;
+    setDragOffset(nextOffset);
+  };
+  const viewportStyle = (0, import_react.useMemo)(
+    () => ({
+      ["--icl-aspect-ratio"]: aspectRatio,
+      ["--icl-object-fit"]: objectFit
+    }),
+    [aspectRatio, objectFit]
+  );
+  const trackStyle = {
+    transform: `translate3d(calc(${-activeIndex * 100}% + ${dragOffset}px), 0, 0)`,
+    transition: dragStartX.current === null ? `transform ${transitionDuration}ms ease` : "none"
+  };
+  if (total === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "section",
+    {
+      "aria-label": mergedLabels.region,
+      "aria-roledescription": "carousel",
+      className: ["icl-root", className].filter(Boolean).join(" "),
+      onBlur: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+          setIsFocused(false);
+        }
+      },
+      onFocus: () => setIsFocused(true),
+      onKeyDown: handleKeyDown,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      style,
+      tabIndex: 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            className: "icl-viewport",
+            onPointerCancel: finishDrag,
+            onPointerDown: handlePointerDown,
+            onPointerMove: handlePointerMove,
+            onPointerUp: finishDrag,
+            onTouchEnd: finishDrag,
+            onTouchMove: handleTouchMove,
+            onTouchStart: handleTouchStart,
+            style: viewportStyle,
+            children: [
+              showArrows ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    "aria-label": mergedLabels.previous,
+                    className: "icl-nav icl-nav-prev",
+                    disabled: !canGoPrevious,
+                    onClick: goToPrevious,
+                    type: "button",
+                    children: "<"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    "aria-label": mergedLabels.next,
+                    className: "icl-nav icl-nav-next",
+                    disabled: !canGoNext,
+                    onClick: goToNext,
+                    type: "button",
+                    children: ">"
+                  }
+                )
+              ] }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "icl-track", style: trackStyle, children: images.map((image, imageIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "article",
+                {
+                  "aria-hidden": activeIndex !== imageIndex,
+                  "aria-label": mergedLabels.slide(imageIndex, total),
+                  className: "icl-slide",
+                  id: `${rootId}-slide-${imageIndex}`,
+                  role: "group",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("figure", { className: "icl-figure", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { alt: image.alt, className: "icl-image", src: image.src }),
+                    image.caption ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("figcaption", { className: "icl-caption", children: image.caption }) : null
+                  ] })
+                },
+                `${image.src}-${imageIndex}`
+              )) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "icl-footer", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "aria-live": "polite", className: "icl-sr-only", children: mergedLabels.slide(activeIndex, total) }),
+          showIndicators ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "aria-label": "Slide indicators", className: "icl-dots", role: "tablist", children: images.map((image, imageIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              "aria-controls": `${rootId}-slide-${imageIndex}`,
+              "aria-current": activeIndex === imageIndex,
+              "aria-label": mergedLabels.goToSlide(imageIndex),
+              className: "icl-dot",
+              onClick: () => goTo(imageIndex),
+              role: "tab",
+              type: "button"
+            },
+            `${image.src}-dot-${imageIndex}`
+          )) }) : null,
+          showThumbnails ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "icl-thumbs", children: images.map((image, imageIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              "aria-current": activeIndex === imageIndex,
+              "aria-label": mergedLabels.goToSlide(imageIndex),
+              className: "icl-thumb",
+              onClick: () => goTo(imageIndex),
+              type: "button",
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { alt: "", "aria-hidden": "true", src: image.thumbnailSrc ?? image.src })
+            },
+            `${image.src}-thumb-${imageIndex}`
+          )) }) : null
+        ] })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ImageCarousel
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/ImageCarousel.tsx","../src/injectStyles.ts"],"sourcesContent":["export { ImageCarousel } from \"./ImageCarousel\";\nexport type { CarouselImage, ImageCarouselLabels, ImageCarouselProps } from \"./ImageCarousel\";\n","import React, {\n  CSSProperties,\n  KeyboardEvent,\n  PointerEvent,\n  TouchEvent,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState\n} from \"react\";\nimport { ensureCarouselStyles } from \"./injectStyles\";\n\nexport type CarouselImage = {\n  src: string;\n  alt: string;\n  caption?: React.ReactNode;\n  thumbnailSrc?: string;\n};\n\nexport type ImageCarouselLabels = {\n  region: string;\n  previous: string;\n  next: string;\n  goToSlide: (index: number) => string;\n  slide: (index: number, total: number) => string;\n};\n\nexport type ImageCarouselProps = {\n  images: CarouselImage[];\n  className?: string;\n  style?: CSSProperties;\n  initialIndex?: number;\n  index?: number;\n  loop?: boolean;\n  autoplay?: boolean;\n  autoplayDelay?: number;\n  pauseOnHover?: boolean;\n  pauseOnFocus?: boolean;\n  keyboardNavigation?: boolean;\n  showArrows?: boolean;\n  showIndicators?: boolean;\n  showThumbnails?: boolean;\n  swipeThreshold?: number;\n  aspectRatio?: CSSProperties[\"aspectRatio\"];\n  objectFit?: CSSProperties[\"objectFit\"];\n  transitionDuration?: number;\n  onIndexChange?: (index: number) => void;\n  onSlideChange?: (index: number) => void;\n  labels?: Partial<ImageCarouselLabels>;\n};\n\nconst defaultLabels: ImageCarouselLabels = {\n  region: \"Image carousel\",\n  previous: \"Previous slide\",\n  next: \"Next slide\",\n  goToSlide: (index) => `Go to slide ${index + 1}`,\n  slide: (index, total) => `Slide ${index + 1} of ${total}`\n};\n\nfunction clampIndex(value: number, total: number) {\n  if (total === 0) {\n    return 0;\n  }\n\n  return Math.max(0, Math.min(value, total - 1));\n}\n\nfunction resolveIndex(value: number, total: number, loop: boolean) {\n  if (total === 0) {\n    return 0;\n  }\n\n  if (loop) {\n    return (value + total) % total;\n  }\n\n  return clampIndex(value, total);\n}\n\nexport function ImageCarousel({\n  images,\n  className,\n  style,\n  initialIndex = 0,\n  index,\n  loop = true,\n  autoplay = false,\n  autoplayDelay = 4000,\n  pauseOnHover = true,\n  pauseOnFocus = true,\n  keyboardNavigation = true,\n  showArrows = true,\n  showIndicators = true,\n  showThumbnails = false,\n  swipeThreshold = 40,\n  aspectRatio = \"16 / 9\",\n  objectFit = \"cover\",\n  transitionDuration = 350,\n  onIndexChange,\n  onSlideChange,\n  labels\n}: ImageCarouselProps) {\n  const total = images.length;\n  const mergedLabels = { ...defaultLabels, ...labels };\n  const rootId = useId();\n  const [internalIndex, setInternalIndex] = useState(() => clampIndex(initialIndex, total));\n  const [isHovered, setIsHovered] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n  const [dragOffset, setDragOffset] = useState(0);\n  const dragStartX = useRef<number | null>(null);\n  const dragOffsetRef = useRef(0);\n  const isControlled = index !== undefined;\n  const activeIndex = resolveIndex(isControlled ? index : internalIndex, total, false);\n\n  useEffect(() => {\n    ensureCarouselStyles();\n  }, []);\n\n  useEffect(() => {\n    setInternalIndex((current) => clampIndex(current, total));\n  }, [total]);\n\n  useEffect(() => {\n    if (total === 0) {\n      return;\n    }\n\n    onSlideChange?.(activeIndex);\n  }, [activeIndex, onSlideChange, total]);\n\n  const canGoPrevious = loop || activeIndex > 0;\n  const canGoNext = loop || activeIndex < total - 1;\n\n  const setIndex = (next: number) => {\n    const resolved = resolveIndex(next, total, loop);\n    onIndexChange?.(resolved);\n\n    if (!isControlled) {\n      setInternalIndex(resolved);\n    }\n  };\n\n  const goToPrevious = () => setIndex(activeIndex - 1);\n  const goToNext = () => setIndex(activeIndex + 1);\n  const goTo = (next: number) => setIndex(next);\n\n  useEffect(() => {\n    if (!autoplay || total <= 1) {\n      return;\n    }\n\n    if ((pauseOnHover && isHovered) || (pauseOnFocus && isFocused)) {\n      return;\n    }\n\n    const timer = window.setInterval(() => {\n      setIndex(activeIndex + 1);\n    }, autoplayDelay);\n\n    return () => window.clearInterval(timer);\n  }, [\n    activeIndex,\n    autoplay,\n    autoplayDelay,\n    isFocused,\n    isHovered,\n    pauseOnFocus,\n    pauseOnHover,\n    total\n  ]);\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n    if (!keyboardNavigation || total <= 1) {\n      return;\n    }\n\n    if (event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      goToPrevious();\n    }\n\n    if (event.key === \"ArrowRight\") {\n      event.preventDefault();\n      goToNext();\n    }\n\n    if (event.key === \"Home\") {\n      event.preventDefault();\n      goTo(0);\n    }\n\n    if (event.key === \"End\") {\n      event.preventDefault();\n      goTo(total - 1);\n    }\n  };\n\n  const handlePointerDown = (event: PointerEvent<HTMLDivElement>) => {\n    if (total <= 1) {\n      return;\n    }\n\n    dragStartX.current = event.clientX;\n    dragOffsetRef.current = 0;\n    setDragOffset(0);\n  };\n\n  const handlePointerMove = (event: PointerEvent<HTMLDivElement>) => {\n    if (dragStartX.current === null) {\n      return;\n    }\n\n    const nextOffset = event.clientX - dragStartX.current;\n    dragOffsetRef.current = nextOffset;\n    setDragOffset(nextOffset);\n  };\n\n  const finishDrag = () => {\n    if (dragStartX.current === null) {\n      return;\n    }\n\n    if (dragOffsetRef.current >= swipeThreshold) {\n      goToPrevious();\n    } else if (dragOffsetRef.current <= -swipeThreshold) {\n      goToNext();\n    }\n\n    dragStartX.current = null;\n    dragOffsetRef.current = 0;\n    setDragOffset(0);\n  };\n\n  const handleTouchStart = (event: TouchEvent<HTMLDivElement>) => {\n    if (total <= 1) {\n      return;\n    }\n\n    dragStartX.current = event.touches[0]?.clientX ?? null;\n    dragOffsetRef.current = 0;\n    setDragOffset(0);\n  };\n\n  const handleTouchMove = (event: TouchEvent<HTMLDivElement>) => {\n    if (dragStartX.current === null) {\n      return;\n    }\n\n    const nextOffset = (event.touches[0]?.clientX ?? dragStartX.current) - dragStartX.current;\n    dragOffsetRef.current = nextOffset;\n    setDragOffset(nextOffset);\n  };\n\n  const viewportStyle = useMemo<CSSProperties>(\n    () => ({\n      [\"--icl-aspect-ratio\" as string]: aspectRatio,\n      [\"--icl-object-fit\" as string]: objectFit\n    }),\n    [aspectRatio, objectFit]\n  );\n\n  const trackStyle: CSSProperties = {\n    transform: `translate3d(calc(${-activeIndex * 100}% + ${dragOffset}px), 0, 0)`,\n    transition: dragStartX.current === null ? `transform ${transitionDuration}ms ease` : \"none\"\n  };\n\n  if (total === 0) {\n    return null;\n  }\n\n  return (\n    <section\n      aria-label={mergedLabels.region}\n      aria-roledescription=\"carousel\"\n      className={[\"icl-root\", className].filter(Boolean).join(\" \")}\n      onBlur={(event) => {\n        if (!event.currentTarget.contains(event.relatedTarget)) {\n          setIsFocused(false);\n        }\n      }}\n      onFocus={() => setIsFocused(true)}\n      onKeyDown={handleKeyDown}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      style={style}\n      tabIndex={0}\n    >\n      <div\n        className=\"icl-viewport\"\n        onPointerCancel={finishDrag}\n        onPointerDown={handlePointerDown}\n        onPointerMove={handlePointerMove}\n        onPointerUp={finishDrag}\n        onTouchEnd={finishDrag}\n        onTouchMove={handleTouchMove}\n        onTouchStart={handleTouchStart}\n        style={viewportStyle}\n      >\n        {showArrows ? (\n          <>\n            <button\n              aria-label={mergedLabels.previous}\n              className=\"icl-nav icl-nav-prev\"\n              disabled={!canGoPrevious}\n              onClick={goToPrevious}\n              type=\"button\"\n            >\n              {\"<\"}\n            </button>\n            <button\n              aria-label={mergedLabels.next}\n              className=\"icl-nav icl-nav-next\"\n              disabled={!canGoNext}\n              onClick={goToNext}\n              type=\"button\"\n            >\n              {\">\"}\n            </button>\n          </>\n        ) : null}\n\n        <div className=\"icl-track\" style={trackStyle}>\n          {images.map((image, imageIndex) => (\n            <article\n              aria-hidden={activeIndex !== imageIndex}\n              aria-label={mergedLabels.slide(imageIndex, total)}\n              className=\"icl-slide\"\n              id={`${rootId}-slide-${imageIndex}`}\n              key={`${image.src}-${imageIndex}`}\n              role=\"group\"\n            >\n              <figure className=\"icl-figure\">\n                <img alt={image.alt} className=\"icl-image\" src={image.src} />\n                {image.caption ? <figcaption className=\"icl-caption\">{image.caption}</figcaption> : null}\n              </figure>\n            </article>\n          ))}\n        </div>\n      </div>\n\n      <div className=\"icl-footer\">\n        <div aria-live=\"polite\" className=\"icl-sr-only\">\n          {mergedLabels.slide(activeIndex, total)}\n        </div>\n\n        {showIndicators ? (\n          <div aria-label=\"Slide indicators\" className=\"icl-dots\" role=\"tablist\">\n            {images.map((image, imageIndex) => (\n              <button\n                aria-controls={`${rootId}-slide-${imageIndex}`}\n                aria-current={activeIndex === imageIndex}\n                aria-label={mergedLabels.goToSlide(imageIndex)}\n                className=\"icl-dot\"\n                key={`${image.src}-dot-${imageIndex}`}\n                onClick={() => goTo(imageIndex)}\n                role=\"tab\"\n                type=\"button\"\n              />\n            ))}\n          </div>\n        ) : null}\n\n        {showThumbnails ? (\n          <div className=\"icl-thumbs\">\n            {images.map((image, imageIndex) => (\n              <button\n                aria-current={activeIndex === imageIndex}\n                aria-label={mergedLabels.goToSlide(imageIndex)}\n                className=\"icl-thumb\"\n                key={`${image.src}-thumb-${imageIndex}`}\n                onClick={() => goTo(imageIndex)}\n                type=\"button\"\n              >\n                <img alt=\"\" aria-hidden=\"true\" src={image.thumbnailSrc ?? image.src} />\n              </button>\n            ))}\n          </div>\n        ) : null}\n      </div>\n    </section>\n  );\n}\n","const STYLE_ID = \"image-carousel-library-styles\";\n\nconst styles = `\n.icl-root{position:relative;width:100%;display:grid;gap:1rem;color:#101828;font-family:system-ui,sans-serif}\n.icl-viewport{position:relative;overflow:hidden;border-radius:1rem;background:linear-gradient(180deg,#f8fafc 0%,#e2e8f0 100%)}\n.icl-track{display:flex;touch-action:pan-y;will-change:transform}\n.icl-slide{min-width:100%;position:relative;user-select:none}\n.icl-figure{margin:0;position:relative;aspect-ratio:var(--icl-aspect-ratio,16/9);overflow:hidden}\n.icl-image{width:100%;height:100%;display:block;object-fit:var(--icl-object-fit,cover);background:#cbd5e1}\n.icl-caption{position:absolute;left:1rem;right:1rem;bottom:1rem;padding:.75rem 1rem;border-radius:.75rem;background:rgb(15 23 42 / .7);color:#f8fafc;font-size:.95rem;backdrop-filter:blur(8px)}\n.icl-nav{position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border:0;border-radius:999px;background:rgb(15 23 42 / .8);color:#fff;cursor:pointer;z-index:1}\n.icl-nav:hover{background:rgb(15 23 42 / .92)}\n.icl-nav:focus-visible,.icl-dot:focus-visible,.icl-thumb:focus-visible{outline:3px solid #38bdf8;outline-offset:2px}\n.icl-nav[disabled]{opacity:.45;cursor:not-allowed}\n.icl-nav-prev{left:.75rem}\n.icl-nav-next{right:.75rem}\n.icl-footer{display:grid;gap:.75rem}\n.icl-dots{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap}\n.icl-dot{width:.8rem;height:.8rem;border:0;border-radius:999px;background:#cbd5e1;cursor:pointer;padding:0}\n.icl-dot[aria-current=\"true\"]{background:#0f172a;transform:scale(1.15)}\n.icl-thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(4.5rem,1fr));gap:.5rem}\n.icl-thumb{border:2px solid transparent;border-radius:.8rem;padding:0;overflow:hidden;cursor:pointer;background:#e2e8f0}\n.icl-thumb[aria-current=\"true\"]{border-color:#0f172a}\n.icl-thumb img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}\n.icl-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n@media (max-width: 640px){\n  .icl-caption{left:.75rem;right:.75rem;bottom:.75rem;font-size:.85rem}\n  .icl-nav{width:2.4rem;height:2.4rem}\n}\n`;\n\nexport function ensureCarouselStyles() {\n  if (typeof document === \"undefined\") {\n    return;\n  }\n\n  if (document.getElementById(STYLE_ID)) {\n    return;\n  }\n\n  const style = document.createElement(\"style\");\n  style.id = STYLE_ID;\n  style.textContent = styles;\n  document.head.appendChild(style);\n}\n"],"mappings":"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","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,42 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React, { CSSProperties } from 'react';
+
+type CarouselImage = {
+    src: string;
+    alt: string;
+    caption?: React.ReactNode;
+    thumbnailSrc?: string;
+};
+type ImageCarouselLabels = {
+    region: string;
+    previous: string;
+    next: string;
+    goToSlide: (index: number) => string;
+    slide: (index: number, total: number) => string;
+};
+type ImageCarouselProps = {
+    images: CarouselImage[];
+    className?: string;
+    style?: CSSProperties;
+    initialIndex?: number;
+    index?: number;
+    loop?: boolean;
+    autoplay?: boolean;
+    autoplayDelay?: number;
+    pauseOnHover?: boolean;
+    pauseOnFocus?: boolean;
+    keyboardNavigation?: boolean;
+    showArrows?: boolean;
+    showIndicators?: boolean;
+    showThumbnails?: boolean;
+    swipeThreshold?: number;
+    aspectRatio?: CSSProperties["aspectRatio"];
+    objectFit?: CSSProperties["objectFit"];
+    transitionDuration?: number;
+    onIndexChange?: (index: number) => void;
+    onSlideChange?: (index: number) => void;
+    labels?: Partial<ImageCarouselLabels>;
+};
+declare function ImageCarousel({ images, className, style, initialIndex, index, loop, autoplay, autoplayDelay, pauseOnHover, pauseOnFocus, keyboardNavigation, showArrows, showIndicators, showThumbnails, swipeThreshold, aspectRatio, objectFit, transitionDuration, onIndexChange, onSlideChange, labels }: ImageCarouselProps): react_jsx_runtime.JSX.Element | null;
+
+export { type CarouselImage, ImageCarousel, type ImageCarouselLabels, type ImageCarouselProps };

package/dist/index.d.ts

@@ -0,0 +1,42 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React, { CSSProperties } from 'react';
+
+type CarouselImage = {
+    src: string;
+    alt: string;
+    caption?: React.ReactNode;
+    thumbnailSrc?: string;
+};
+type ImageCarouselLabels = {
+    region: string;
+    previous: string;
+    next: string;
+    goToSlide: (index: number) => string;
+    slide: (index: number, total: number) => string;
+};
+type ImageCarouselProps = {
+    images: CarouselImage[];
+    className?: string;
+    style?: CSSProperties;
+    initialIndex?: number;
+    index?: number;
+    loop?: boolean;
+    autoplay?: boolean;
+    autoplayDelay?: number;
+    pauseOnHover?: boolean;
+    pauseOnFocus?: boolean;
+    keyboardNavigation?: boolean;
+    showArrows?: boolean;
+    showIndicators?: boolean;
+    showThumbnails?: boolean;
+    swipeThreshold?: number;
+    aspectRatio?: CSSProperties["aspectRatio"];
+    objectFit?: CSSProperties["objectFit"];
+    transitionDuration?: number;
+    onIndexChange?: (index: number) => void;
+    onSlideChange?: (index: number) => void;
+    labels?: Partial<ImageCarouselLabels>;
+};
+declare function ImageCarousel({ images, className, style, initialIndex, index, loop, autoplay, autoplayDelay, pauseOnHover, pauseOnFocus, keyboardNavigation, showArrows, showIndicators, showThumbnails, swipeThreshold, aspectRatio, objectFit, transitionDuration, onIndexChange, onSlideChange, labels }: ImageCarouselProps): react_jsx_runtime.JSX.Element | null;
+
+export { type CarouselImage, ImageCarousel, type ImageCarouselLabels, type ImageCarouselProps };

package/dist/index.js

@@ -0,0 +1,344 @@
+// src/ImageCarousel.tsx
+import {
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+
+// src/injectStyles.ts
+var STYLE_ID = "image-carousel-library-styles";
+var styles = `
+.icl-root{position:relative;width:100%;display:grid;gap:1rem;color:#101828;font-family:system-ui,sans-serif}
+.icl-viewport{position:relative;overflow:hidden;border-radius:1rem;background:linear-gradient(180deg,#f8fafc 0%,#e2e8f0 100%)}
+.icl-track{display:flex;touch-action:pan-y;will-change:transform}
+.icl-slide{min-width:100%;position:relative;user-select:none}
+.icl-figure{margin:0;position:relative;aspect-ratio:var(--icl-aspect-ratio,16/9);overflow:hidden}
+.icl-image{width:100%;height:100%;display:block;object-fit:var(--icl-object-fit,cover);background:#cbd5e1}
+.icl-caption{position:absolute;left:1rem;right:1rem;bottom:1rem;padding:.75rem 1rem;border-radius:.75rem;background:rgb(15 23 42 / .7);color:#f8fafc;font-size:.95rem;backdrop-filter:blur(8px)}
+.icl-nav{position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border:0;border-radius:999px;background:rgb(15 23 42 / .8);color:#fff;cursor:pointer;z-index:1}
+.icl-nav:hover{background:rgb(15 23 42 / .92)}
+.icl-nav:focus-visible,.icl-dot:focus-visible,.icl-thumb:focus-visible{outline:3px solid #38bdf8;outline-offset:2px}
+.icl-nav[disabled]{opacity:.45;cursor:not-allowed}
+.icl-nav-prev{left:.75rem}
+.icl-nav-next{right:.75rem}
+.icl-footer{display:grid;gap:.75rem}
+.icl-dots{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap}
+.icl-dot{width:.8rem;height:.8rem;border:0;border-radius:999px;background:#cbd5e1;cursor:pointer;padding:0}
+.icl-dot[aria-current="true"]{background:#0f172a;transform:scale(1.15)}
+.icl-thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(4.5rem,1fr));gap:.5rem}
+.icl-thumb{border:2px solid transparent;border-radius:.8rem;padding:0;overflow:hidden;cursor:pointer;background:#e2e8f0}
+.icl-thumb[aria-current="true"]{border-color:#0f172a}
+.icl-thumb img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
+.icl-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
+@media (max-width: 640px){
+  .icl-caption{left:.75rem;right:.75rem;bottom:.75rem;font-size:.85rem}
+  .icl-nav{width:2.4rem;height:2.4rem}
+}
+`;
+function ensureCarouselStyles() {
+  if (typeof document === "undefined") {
+    return;
+  }
+  if (document.getElementById(STYLE_ID)) {
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = styles;
+  document.head.appendChild(style);
+}
+
+// src/ImageCarousel.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var defaultLabels = {
+  region: "Image carousel",
+  previous: "Previous slide",
+  next: "Next slide",
+  goToSlide: (index) => `Go to slide ${index + 1}`,
+  slide: (index, total) => `Slide ${index + 1} of ${total}`
+};
+function clampIndex(value, total) {
+  if (total === 0) {
+    return 0;
+  }
+  return Math.max(0, Math.min(value, total - 1));
+}
+function resolveIndex(value, total, loop) {
+  if (total === 0) {
+    return 0;
+  }
+  if (loop) {
+    return (value + total) % total;
+  }
+  return clampIndex(value, total);
+}
+function ImageCarousel({
+  images,
+  className,
+  style,
+  initialIndex = 0,
+  index,
+  loop = true,
+  autoplay = false,
+  autoplayDelay = 4e3,
+  pauseOnHover = true,
+  pauseOnFocus = true,
+  keyboardNavigation = true,
+  showArrows = true,
+  showIndicators = true,
+  showThumbnails = false,
+  swipeThreshold = 40,
+  aspectRatio = "16 / 9",
+  objectFit = "cover",
+  transitionDuration = 350,
+  onIndexChange,
+  onSlideChange,
+  labels
+}) {
+  const total = images.length;
+  const mergedLabels = { ...defaultLabels, ...labels };
+  const rootId = useId();
+  const [internalIndex, setInternalIndex] = useState(() => clampIndex(initialIndex, total));
+  const [isHovered, setIsHovered] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const [dragOffset, setDragOffset] = useState(0);
+  const dragStartX = useRef(null);
+  const dragOffsetRef = useRef(0);
+  const isControlled = index !== void 0;
+  const activeIndex = resolveIndex(isControlled ? index : internalIndex, total, false);
+  useEffect(() => {
+    ensureCarouselStyles();
+  }, []);
+  useEffect(() => {
+    setInternalIndex((current) => clampIndex(current, total));
+  }, [total]);
+  useEffect(() => {
+    if (total === 0) {
+      return;
+    }
+    onSlideChange?.(activeIndex);
+  }, [activeIndex, onSlideChange, total]);
+  const canGoPrevious = loop || activeIndex > 0;
+  const canGoNext = loop || activeIndex < total - 1;
+  const setIndex = (next) => {
+    const resolved = resolveIndex(next, total, loop);
+    onIndexChange?.(resolved);
+    if (!isControlled) {
+      setInternalIndex(resolved);
+    }
+  };
+  const goToPrevious = () => setIndex(activeIndex - 1);
+  const goToNext = () => setIndex(activeIndex + 1);
+  const goTo = (next) => setIndex(next);
+  useEffect(() => {
+    if (!autoplay || total <= 1) {
+      return;
+    }
+    if (pauseOnHover && isHovered || pauseOnFocus && isFocused) {
+      return;
+    }
+    const timer = window.setInterval(() => {
+      setIndex(activeIndex + 1);
+    }, autoplayDelay);
+    return () => window.clearInterval(timer);
+  }, [
+    activeIndex,
+    autoplay,
+    autoplayDelay,
+    isFocused,
+    isHovered,
+    pauseOnFocus,
+    pauseOnHover,
+    total
+  ]);
+  const handleKeyDown = (event) => {
+    if (!keyboardNavigation || total <= 1) {
+      return;
+    }
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      goToPrevious();
+    }
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      goToNext();
+    }
+    if (event.key === "Home") {
+      event.preventDefault();
+      goTo(0);
+    }
+    if (event.key === "End") {
+      event.preventDefault();
+      goTo(total - 1);
+    }
+  };
+  const handlePointerDown = (event) => {
+    if (total <= 1) {
+      return;
+    }
+    dragStartX.current = event.clientX;
+    dragOffsetRef.current = 0;
+    setDragOffset(0);
+  };
+  const handlePointerMove = (event) => {
+    if (dragStartX.current === null) {
+      return;
+    }
+    const nextOffset = event.clientX - dragStartX.current;
+    dragOffsetRef.current = nextOffset;
+    setDragOffset(nextOffset);
+  };
+  const finishDrag = () => {
+    if (dragStartX.current === null) {
+      return;
+    }
+    if (dragOffsetRef.current >= swipeThreshold) {
+      goToPrevious();
+    } else if (dragOffsetRef.current <= -swipeThreshold) {
+      goToNext();
+    }
+    dragStartX.current = null;
+    dragOffsetRef.current = 0;
+    setDragOffset(0);
+  };
+  const handleTouchStart = (event) => {
+    if (total <= 1) {
+      return;
+    }
+    dragStartX.current = event.touches[0]?.clientX ?? null;
+    dragOffsetRef.current = 0;
+    setDragOffset(0);
+  };
+  const handleTouchMove = (event) => {
+    if (dragStartX.current === null) {
+      return;
+    }
+    const nextOffset = (event.touches[0]?.clientX ?? dragStartX.current) - dragStartX.current;
+    dragOffsetRef.current = nextOffset;
+    setDragOffset(nextOffset);
+  };
+  const viewportStyle = useMemo(
+    () => ({
+      ["--icl-aspect-ratio"]: aspectRatio,
+      ["--icl-object-fit"]: objectFit
+    }),
+    [aspectRatio, objectFit]
+  );
+  const trackStyle = {
+    transform: `translate3d(calc(${-activeIndex * 100}% + ${dragOffset}px), 0, 0)`,
+    transition: dragStartX.current === null ? `transform ${transitionDuration}ms ease` : "none"
+  };
+  if (total === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": mergedLabels.region,
+      "aria-roledescription": "carousel",
+      className: ["icl-root", className].filter(Boolean).join(" "),
+      onBlur: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+          setIsFocused(false);
+        }
+      },
+      onFocus: () => setIsFocused(true),
+      onKeyDown: handleKeyDown,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      style,
+      tabIndex: 0,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "icl-viewport",
+            onPointerCancel: finishDrag,
+            onPointerDown: handlePointerDown,
+            onPointerMove: handlePointerMove,
+            onPointerUp: finishDrag,
+            onTouchEnd: finishDrag,
+            onTouchMove: handleTouchMove,
+            onTouchStart: handleTouchStart,
+            style: viewportStyle,
+            children: [
+              showArrows ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    "aria-label": mergedLabels.previous,
+                    className: "icl-nav icl-nav-prev",
+                    disabled: !canGoPrevious,
+                    onClick: goToPrevious,
+                    type: "button",
+                    children: "<"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    "aria-label": mergedLabels.next,
+                    className: "icl-nav icl-nav-next",
+                    disabled: !canGoNext,
+                    onClick: goToNext,
+                    type: "button",
+                    children: ">"
+                  }
+                )
+              ] }) : null,
+              /* @__PURE__ */ jsx("div", { className: "icl-track", style: trackStyle, children: images.map((image, imageIndex) => /* @__PURE__ */ jsx(
+                "article",
+                {
+                  "aria-hidden": activeIndex !== imageIndex,
+                  "aria-label": mergedLabels.slide(imageIndex, total),
+                  className: "icl-slide",
+                  id: `${rootId}-slide-${imageIndex}`,
+                  role: "group",
+                  children: /* @__PURE__ */ jsxs("figure", { className: "icl-figure", children: [
+                    /* @__PURE__ */ jsx("img", { alt: image.alt, className: "icl-image", src: image.src }),
+                    image.caption ? /* @__PURE__ */ jsx("figcaption", { className: "icl-caption", children: image.caption }) : null
+                  ] })
+                },
+                `${image.src}-${imageIndex}`
+              )) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "icl-footer", children: [
+          /* @__PURE__ */ jsx("div", { "aria-live": "polite", className: "icl-sr-only", children: mergedLabels.slide(activeIndex, total) }),
+          showIndicators ? /* @__PURE__ */ jsx("div", { "aria-label": "Slide indicators", className: "icl-dots", role: "tablist", children: images.map((image, imageIndex) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              "aria-controls": `${rootId}-slide-${imageIndex}`,
+              "aria-current": activeIndex === imageIndex,
+              "aria-label": mergedLabels.goToSlide(imageIndex),
+              className: "icl-dot",
+              onClick: () => goTo(imageIndex),
+              role: "tab",
+              type: "button"
+            },
+            `${image.src}-dot-${imageIndex}`
+          )) }) : null,
+          showThumbnails ? /* @__PURE__ */ jsx("div", { className: "icl-thumbs", children: images.map((image, imageIndex) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              "aria-current": activeIndex === imageIndex,
+              "aria-label": mergedLabels.goToSlide(imageIndex),
+              className: "icl-thumb",
+              onClick: () => goTo(imageIndex),
+              type: "button",
+              children: /* @__PURE__ */ jsx("img", { alt: "", "aria-hidden": "true", src: image.thumbnailSrc ?? image.src })
+            },
+            `${image.src}-thumb-${imageIndex}`
+          )) }) : null
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ImageCarousel
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ImageCarousel.tsx","../src/injectStyles.ts"],"sourcesContent":["import React, {\n  CSSProperties,\n  KeyboardEvent,\n  PointerEvent,\n  TouchEvent,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState\n} from \"react\";\nimport { ensureCarouselStyles } from \"./injectStyles\";\n\nexport type CarouselImage = {\n  src: string;\n  alt: string;\n  caption?: React.ReactNode;\n  thumbnailSrc?: string;\n};\n\nexport type ImageCarouselLabels = {\n  region: string;\n  previous: string;\n  next: string;\n  goToSlide: (index: number) => string;\n  slide: (index: number, total: number) => string;\n};\n\nexport type ImageCarouselProps = {\n  images: CarouselImage[];\n  className?: string;\n  style?: CSSProperties;\n  initialIndex?: number;\n  index?: number;\n  loop?: boolean;\n  autoplay?: boolean;\n  autoplayDelay?: number;\n  pauseOnHover?: boolean;\n  pauseOnFocus?: boolean;\n  keyboardNavigation?: boolean;\n  showArrows?: boolean;\n  showIndicators?: boolean;\n  showThumbnails?: boolean;\n  swipeThreshold?: number;\n  aspectRatio?: CSSProperties[\"aspectRatio\"];\n  objectFit?: CSSProperties[\"objectFit\"];\n  transitionDuration?: number;\n  onIndexChange?: (index: number) => void;\n  onSlideChange?: (index: number) => void;\n  labels?: Partial<ImageCarouselLabels>;\n};\n\nconst defaultLabels: ImageCarouselLabels = {\n  region: \"Image carousel\",\n  previous: \"Previous slide\",\n  next: \"Next slide\",\n  goToSlide: (index) => `Go to slide ${index + 1}`,\n  slide: (index, total) => `Slide ${index + 1} of ${total}`\n};\n\nfunction clampIndex(value: number, total: number) {\n  if (total === 0) {\n    return 0;\n  }\n\n  return Math.max(0, Math.min(value, total - 1));\n}\n\nfunction resolveIndex(value: number, total: number, loop: boolean) {\n  if (total === 0) {\n    return 0;\n  }\n\n  if (loop) {\n    return (value + total) % total;\n  }\n\n  return clampIndex(value, total);\n}\n\nexport function ImageCarousel({\n  images,\n  className,\n  style,\n  initialIndex = 0,\n  index,\n  loop = true,\n  autoplay = false,\n  autoplayDelay = 4000,\n  pauseOnHover = true,\n  pauseOnFocus = true,\n  keyboardNavigation = true,\n  showArrows = true,\n  showIndicators = true,\n  showThumbnails = false,\n  swipeThreshold = 40,\n  aspectRatio = \"16 / 9\",\n  objectFit = \"cover\",\n  transitionDuration = 350,\n  onIndexChange,\n  onSlideChange,\n  labels\n}: ImageCarouselProps) {\n  const total = images.length;\n  const mergedLabels = { ...defaultLabels, ...labels };\n  const rootId = useId();\n  const [internalIndex, setInternalIndex] = useState(() => clampIndex(initialIndex, total));\n  const [isHovered, setIsHovered] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n  const [dragOffset, setDragOffset] = useState(0);\n  const dragStartX = useRef<number | null>(null);\n  const dragOffsetRef = useRef(0);\n  const isControlled = index !== undefined;\n  const activeIndex = resolveIndex(isControlled ? index : internalIndex, total, false);\n\n  useEffect(() => {\n    ensureCarouselStyles();\n  }, []);\n\n  useEffect(() => {\n    setInternalIndex((current) => clampIndex(current, total));\n  }, [total]);\n\n  useEffect(() => {\n    if (total === 0) {\n      return;\n    }\n\n    onSlideChange?.(activeIndex);\n  }, [activeIndex, onSlideChange, total]);\n\n  const canGoPrevious = loop || activeIndex > 0;\n  const canGoNext = loop || activeIndex < total - 1;\n\n  const setIndex = (next: number) => {\n    const resolved = resolveIndex(next, total, loop);\n    onIndexChange?.(resolved);\n\n    if (!isControlled) {\n      setInternalIndex(resolved);\n    }\n  };\n\n  const goToPrevious = () => setIndex(activeIndex - 1);\n  const goToNext = () => setIndex(activeIndex + 1);\n  const goTo = (next: number) => setIndex(next);\n\n  useEffect(() => {\n    if (!autoplay || total <= 1) {\n      return;\n    }\n\n    if ((pauseOnHover && isHovered) || (pauseOnFocus && isFocused)) {\n      return;\n    }\n\n    const timer = window.setInterval(() => {\n      setIndex(activeIndex + 1);\n    }, autoplayDelay);\n\n    return () => window.clearInterval(timer);\n  }, [\n    activeIndex,\n    autoplay,\n    autoplayDelay,\n    isFocused,\n    isHovered,\n    pauseOnFocus,\n    pauseOnHover,\n    total\n  ]);\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n    if (!keyboardNavigation || total <= 1) {\n      return;\n    }\n\n    if (event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      goToPrevious();\n    }\n\n    if (event.key === \"ArrowRight\") {\n      event.preventDefault();\n      goToNext();\n    }\n\n    if (event.key === \"Home\") {\n      event.preventDefault();\n      goTo(0);\n    }\n\n    if (event.key === \"End\") {\n      event.preventDefault();\n      goTo(total - 1);\n    }\n  };\n\n  const handlePointerDown = (event: PointerEvent<HTMLDivElement>) => {\n    if (total <= 1) {\n      return;\n    }\n\n    dragStartX.current = event.clientX;\n    dragOffsetRef.current = 0;\n    setDragOffset(0);\n  };\n\n  const handlePointerMove = (event: PointerEvent<HTMLDivElement>) => {\n    if (dragStartX.current === null) {\n      return;\n    }\n\n    const nextOffset = event.clientX - dragStartX.current;\n    dragOffsetRef.current = nextOffset;\n    setDragOffset(nextOffset);\n  };\n\n  const finishDrag = () => {\n    if (dragStartX.current === null) {\n      return;\n    }\n\n    if (dragOffsetRef.current >= swipeThreshold) {\n      goToPrevious();\n    } else if (dragOffsetRef.current <= -swipeThreshold) {\n      goToNext();\n    }\n\n    dragStartX.current = null;\n    dragOffsetRef.current = 0;\n    setDragOffset(0);\n  };\n\n  const handleTouchStart = (event: TouchEvent<HTMLDivElement>) => {\n    if (total <= 1) {\n      return;\n    }\n\n    dragStartX.current = event.touches[0]?.clientX ?? null;\n    dragOffsetRef.current = 0;\n    setDragOffset(0);\n  };\n\n  const handleTouchMove = (event: TouchEvent<HTMLDivElement>) => {\n    if (dragStartX.current === null) {\n      return;\n    }\n\n    const nextOffset = (event.touches[0]?.clientX ?? dragStartX.current) - dragStartX.current;\n    dragOffsetRef.current = nextOffset;\n    setDragOffset(nextOffset);\n  };\n\n  const viewportStyle = useMemo<CSSProperties>(\n    () => ({\n      [\"--icl-aspect-ratio\" as string]: aspectRatio,\n      [\"--icl-object-fit\" as string]: objectFit\n    }),\n    [aspectRatio, objectFit]\n  );\n\n  const trackStyle: CSSProperties = {\n    transform: `translate3d(calc(${-activeIndex * 100}% + ${dragOffset}px), 0, 0)`,\n    transition: dragStartX.current === null ? `transform ${transitionDuration}ms ease` : \"none\"\n  };\n\n  if (total === 0) {\n    return null;\n  }\n\n  return (\n    <section\n      aria-label={mergedLabels.region}\n      aria-roledescription=\"carousel\"\n      className={[\"icl-root\", className].filter(Boolean).join(\" \")}\n      onBlur={(event) => {\n        if (!event.currentTarget.contains(event.relatedTarget)) {\n          setIsFocused(false);\n        }\n      }}\n      onFocus={() => setIsFocused(true)}\n      onKeyDown={handleKeyDown}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      style={style}\n      tabIndex={0}\n    >\n      <div\n        className=\"icl-viewport\"\n        onPointerCancel={finishDrag}\n        onPointerDown={handlePointerDown}\n        onPointerMove={handlePointerMove}\n        onPointerUp={finishDrag}\n        onTouchEnd={finishDrag}\n        onTouchMove={handleTouchMove}\n        onTouchStart={handleTouchStart}\n        style={viewportStyle}\n      >\n        {showArrows ? (\n          <>\n            <button\n              aria-label={mergedLabels.previous}\n              className=\"icl-nav icl-nav-prev\"\n              disabled={!canGoPrevious}\n              onClick={goToPrevious}\n              type=\"button\"\n            >\n              {\"<\"}\n            </button>\n            <button\n              aria-label={mergedLabels.next}\n              className=\"icl-nav icl-nav-next\"\n              disabled={!canGoNext}\n              onClick={goToNext}\n              type=\"button\"\n            >\n              {\">\"}\n            </button>\n          </>\n        ) : null}\n\n        <div className=\"icl-track\" style={trackStyle}>\n          {images.map((image, imageIndex) => (\n            <article\n              aria-hidden={activeIndex !== imageIndex}\n              aria-label={mergedLabels.slide(imageIndex, total)}\n              className=\"icl-slide\"\n              id={`${rootId}-slide-${imageIndex}`}\n              key={`${image.src}-${imageIndex}`}\n              role=\"group\"\n            >\n              <figure className=\"icl-figure\">\n                <img alt={image.alt} className=\"icl-image\" src={image.src} />\n                {image.caption ? <figcaption className=\"icl-caption\">{image.caption}</figcaption> : null}\n              </figure>\n            </article>\n          ))}\n        </div>\n      </div>\n\n      <div className=\"icl-footer\">\n        <div aria-live=\"polite\" className=\"icl-sr-only\">\n          {mergedLabels.slide(activeIndex, total)}\n        </div>\n\n        {showIndicators ? (\n          <div aria-label=\"Slide indicators\" className=\"icl-dots\" role=\"tablist\">\n            {images.map((image, imageIndex) => (\n              <button\n                aria-controls={`${rootId}-slide-${imageIndex}`}\n                aria-current={activeIndex === imageIndex}\n                aria-label={mergedLabels.goToSlide(imageIndex)}\n                className=\"icl-dot\"\n                key={`${image.src}-dot-${imageIndex}`}\n                onClick={() => goTo(imageIndex)}\n                role=\"tab\"\n                type=\"button\"\n              />\n            ))}\n          </div>\n        ) : null}\n\n        {showThumbnails ? (\n          <div className=\"icl-thumbs\">\n            {images.map((image, imageIndex) => (\n              <button\n                aria-current={activeIndex === imageIndex}\n                aria-label={mergedLabels.goToSlide(imageIndex)}\n                className=\"icl-thumb\"\n                key={`${image.src}-thumb-${imageIndex}`}\n                onClick={() => goTo(imageIndex)}\n                type=\"button\"\n              >\n                <img alt=\"\" aria-hidden=\"true\" src={image.thumbnailSrc ?? image.src} />\n              </button>\n            ))}\n          </div>\n        ) : null}\n      </div>\n    </section>\n  );\n}\n","const STYLE_ID = \"image-carousel-library-styles\";\n\nconst styles = `\n.icl-root{position:relative;width:100%;display:grid;gap:1rem;color:#101828;font-family:system-ui,sans-serif}\n.icl-viewport{position:relative;overflow:hidden;border-radius:1rem;background:linear-gradient(180deg,#f8fafc 0%,#e2e8f0 100%)}\n.icl-track{display:flex;touch-action:pan-y;will-change:transform}\n.icl-slide{min-width:100%;position:relative;user-select:none}\n.icl-figure{margin:0;position:relative;aspect-ratio:var(--icl-aspect-ratio,16/9);overflow:hidden}\n.icl-image{width:100%;height:100%;display:block;object-fit:var(--icl-object-fit,cover);background:#cbd5e1}\n.icl-caption{position:absolute;left:1rem;right:1rem;bottom:1rem;padding:.75rem 1rem;border-radius:.75rem;background:rgb(15 23 42 / .7);color:#f8fafc;font-size:.95rem;backdrop-filter:blur(8px)}\n.icl-nav{position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border:0;border-radius:999px;background:rgb(15 23 42 / .8);color:#fff;cursor:pointer;z-index:1}\n.icl-nav:hover{background:rgb(15 23 42 / .92)}\n.icl-nav:focus-visible,.icl-dot:focus-visible,.icl-thumb:focus-visible{outline:3px solid #38bdf8;outline-offset:2px}\n.icl-nav[disabled]{opacity:.45;cursor:not-allowed}\n.icl-nav-prev{left:.75rem}\n.icl-nav-next{right:.75rem}\n.icl-footer{display:grid;gap:.75rem}\n.icl-dots{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap}\n.icl-dot{width:.8rem;height:.8rem;border:0;border-radius:999px;background:#cbd5e1;cursor:pointer;padding:0}\n.icl-dot[aria-current=\"true\"]{background:#0f172a;transform:scale(1.15)}\n.icl-thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(4.5rem,1fr));gap:.5rem}\n.icl-thumb{border:2px solid transparent;border-radius:.8rem;padding:0;overflow:hidden;cursor:pointer;background:#e2e8f0}\n.icl-thumb[aria-current=\"true\"]{border-color:#0f172a}\n.icl-thumb img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}\n.icl-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n@media (max-width: 640px){\n  .icl-caption{left:.75rem;right:.75rem;bottom:.75rem;font-size:.85rem}\n  .icl-nav{width:2.4rem;height:2.4rem}\n}\n`;\n\nexport function ensureCarouselStyles() {\n  if (typeof document === \"undefined\") {\n    return;\n  }\n\n  if (document.getElementById(STYLE_ID)) {\n    return;\n  }\n\n  const style = document.createElement(\"style\");\n  style.id = STYLE_ID;\n  style.textContent = styles;\n  document.head.appendChild(style);\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "react-best-carroussel",
+  "version": "0.1.0",
+  "description": "React image carousel library with simple API, accessibility and npm-ready packaging.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "tsc --noEmit",
+    "test": "cross-env NODE_ENV=test vitest run --coverage",
+    "test:watch": "cross-env NODE_ENV=test vitest",
+    "check": "npm run lint && npm run test && npm run build",
+    "prepublishOnly": "npm run check"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1",
+    "@vitest/coverage-v8": "^3.2.4",
+    "cross-env": "^7.0.3",
+    "jsdom": "^26.1.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "tsup": "^8.5.0",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.4"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/brujim/react-best-carroussel.git"
+  },
+  "homepage": "https://github.com/brujim/react-best-carroussel#readme",
+  "bugs": {
+    "url": "https://github.com/brujim/react-best-carroussel/issues"
+  },
+  "keywords": [
+    "react",
+    "carousel",
+    "carrousel",
+    "image-carousel",
+    "slider",
+    "gallery",
+    "typescript",
+    "accessible"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}