react-carousel-photo-gallery 0.0.1

package/README.md

@@ -0,0 +1,207 @@
+# react-carousel-photo-gallery
+
+A lightweight, customizable React carousel component specifically designed for photo galleries, featuring thumbnail support, fullscreen mode, and flexible navigation overrides
+
+---
+
+## Installation
+
+```bash
+npm install react-carousel-photo-gallery
+```
+
+or
+
+```bash
+yarn add react-carousel-photo-gallery
+```
+
+---
+
+## Quick Start
+
+```jsx
+import { CoderCarousel } from 'react-carousel-photo-gallery';
+
+
+const App = () => {
+  const images = [
+    <img src="img1.jpg" alt="1" />,
+    <img src="img2.jpg" alt="2" />,
+    <img src="img3.jpg" alt="3" />,
+  ];
+
+  const thumbnails = [
+    <img src="thumb1.jpg" alt="t1" />,
+    <img src="thumb2.jpg" alt="t2" />,
+    <img src="thumb3.jpg" alt="t3" />,
+  ];
+
+  return (
+    <CoderCarousel
+      displayThumbs={true}
+      thumbs={thumbnails}
+      slideDelay={3000}
+    >
+      {images}
+    </CoderCarousel>
+  );
+};
+```
+
+## Using Captions & Titles
+
+You can wrap your images in a container to display titles or overlays. Here is how to implement the imageWithCaptionContainer structure within the carousel:
+
+```jsx
+import { CoderCarousel } from 'react-carousel-photo-gallery';
+
+const App = () => {
+  const slides = [
+    <div className="imageWithCaptionContainer" key="1">
+      <img src="img1.jpg" alt="Mountain View" />
+      <div className="info">Sunset in the Mountains</div>
+    </div>,
+    <div className="imageWithCaptionContainer" key="2">
+      <img src="img2.jpg" alt="Ocean Breeze" />
+      <div className="info">Summer Beach Days</div>
+    </div>
+  ];
+
+  return (
+    <div style={{ width: '800px', margin: '0 auto' }}>
+      <CoderCarousel
+        displayThumbs={false}
+        width="100%"
+      >
+        {slides}
+      </CoderCarousel>
+    </div>
+  );
+};
+
+export default App;
+```
+
+---
+
+
+---
+
+## Props
+
+| Prop              | Type                                     | Default     | Description                                                                |
+| ----------------- | ---------------------------------------- | ----------- | -------------------------------------------------------------------------- |
+| `title`           | `React.ReactNode`                        | —           | Content displayed inside the tooltip.                                      |
+| `children`        | `React.ReactElement`                     | —           | The element that triggers the tooltip. Must be a single React element.     |
+| `container`       | `HTMLDivElement \| null`                 | `undefined` | Optional container element for rendering the tooltip (useful for portals). |
+| `placement`       | `'top' \| 'bottom' \| 'left' \| 'right'` | `'top'`     | Position of the tooltip relative to the trigger element.                   |
+| `arrow`           | `boolean`                                | `false`     | Displays an arrow pointing to the trigger element.                         |
+| `delayDuration`   | `number`                                 | `0`         | Delay in milliseconds before showing the tooltip.                          |
+| `enterTouchDelay` | `number`                                 | `0`         | Delay in milliseconds before showing the tooltip on touch devices.         |
+| `leaveTouchDelay` | `number`                                 | `1500`      | Delay in milliseconds before hiding the tooltip on touch devices.          |
+| `style`           | `React.CSSProperties`                    | `undefined` | Inline styles applied to the tooltip container.                            |
+| `slotProps`       | `{ tooltip?, content?, arrow? }`         | `undefined` | Advanced customization for tooltip internal slots.                         |
+
+---
+
+## `slotProps` Structure
+
+| Key       | Type                      | Description                                          |
+| --------- | ------------------------- | ---------------------------------------------------- |
+| `tooltip` | `Record<string, unknown>` | Custom props applied to the tooltip wrapper element. |
+| `content` | `Record<string, unknown>` | Custom props applied to the tooltip content element. |
+| `arrow`   | `Record<string, unknown>` | Custom props applied to the arrow element.           |
+
+
+---
+
+## Styling (CSS Variables)
+
+This component supports theming via standard CSS custom properties.
+You can override these variables globally or within a scoped container.
+
+---
+
+### Available CSS Variables
+
+| Variable                           | Fallback    | Description                             |
+| ---------------------------------- | ----------- | --------------------------------------- |
+| `--border-color`                   | `#EDEDED99` | Border color used across the component. |
+| `--accent-color`                   | `#36C2`     | Primary accent color.                   |
+| `--accent-secondary-color`         | `#36C2`     | Secondary accent color.                 |
+| `--background-color`               | `#36C2`     | Default background color.               |
+| `--background-color-maximized`     | `#000`      | Background color when maximized.        |
+| `--button-background-color`        | `#36C2`     | Default button background color.        |
+| `--button-active-background-color` | `#36C2`     | Active button background color.         |
+| `--navigation-background-color`    | `#fff`      | Navigation area background color.       |
+
+---
+
+## 🛠️ How to Override
+
+### Global Theme
+
+```css
+:root {
+  --accent-color: #6366f1;
+  --background-color: #0f172a;
+  --border-color: #334155;
+}
+```
+
+---
+
+### Scoped Theme
+
+```css
+.my-custom-theme {
+  --accent-color: #22c55e;
+  --background-color: #111827;
+}
+```
+
+```tsx
+<div className="my-custom-theme">
+  <YourComponent />
+</div>
+```
+
+---
+
+## 🌗 Dark Mode Example
+
+```css
+body.dark {
+  --background-color: #000;
+  --navigation-background-color: #111;
+  --border-color: #222;
+}
+```
+---
+
+## Compatibility
+
+* ✅ React 18+
+* ✅ Next.js (App & Pages Router)
+* ✅ Vite / CRA
+
+---
+
+## License
+
+MIT © Abdullah Ibne Alam
+
+---
+
+## Contributing
+
+Pull requests are welcome! <br />
+If you have ideas for enhancements or performance improvements, feel free to open an issue.<br />
+[https://github.com/RepulsiveCoder/react-carousel-photo-gallery](https://github.com/RepulsiveCoder/react-carousel-photo-gallery)
+
+---
+
+## If you like it…
+
+Drop a ⭐ on the repo and use it to make your UI feel alive!

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "react-carousel-photo-gallery",
+  "version": "0.0.1",
+  "description": "A lightweight, high-performance React input library featuring Material-style floating labels with minimal DOM footprint. Supports Input, TextArea, and Select with a unique dual-text feature (separate placeholder and label). Smooth CSS animations, border-integrated labels, and zero fieldset dependencies.",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "rollup": "rollup -c --bundleConfigAsCjs"
+  },
+  "keywords": [],
+  "author": {
+    "name": "Abdullah Ibne Alam",
+    "url": "https://abdullahibnealam.com"
+  },
+  "license": "ISC",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "@radix-ui/react-tooltip": "^1.2.8"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@types/node": "^25.2.3",
+    "@types/react": "^19.2.13",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.4",
+    "rollup-plugin-dts": "^6.3.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.3"
+  }
+}

package/rollup.config.js

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

package/src/components/CoderCarousel.css

@@ -0,0 +1,259 @@
+.rcpg-content-wrapper {
+
+    --rcpg-color-border: var(--border-color, #EDEDED99);
+    --rcpg-accent-color: var(--accent-color, #36C2);
+    --rcpg-accent-secondary-color: var(--accent-secondary-color, #36C2);
+    --rcpg-color-background: var(--background-color, #36C2);
+    --rcpg-color-background-maximized: var(--background-color-maximized, #000);
+    --rcpg-color-button-background: var(--button-background-color, #36C2);
+    --rcpg-color-button-active-background: var(--button-active-background-color, #36C2);
+    --rcpg-color-navigation-background: var(--navigation-background-color, #fff);
+
+
+    &.carouselMaximizedCover {
+        width: 100vw;
+        height: 100vh;
+        position: fixed;
+        background: var(--rcpg-color-background-maximized);
+        top: 0px;
+        z-index: 150;
+
+        .closeButton {
+            position: absolute;
+            right: 18px;
+            top: 6px;
+            cursor: pointer;
+            padding: 1px 8px 0px;
+            border: 1px solid var(--rcpg-color-border);
+            border-radius: 8px;
+            transition: all 0.5s linear;
+            z-index: 250;
+
+            &.hidden {
+                display: none;
+            }
+
+            &:hover {
+                color: var(--rcpg-accent-color);
+                box-shadow: 0 0 5px 3px var(--rcpg-accent-secondary-color);
+            }
+        }
+
+        .fullscreenModeButton {
+            position: absolute;
+            right: 18px;
+            bottom: 6px;
+            padding: 1px 4px 0px;
+            border: 1px solid var(--rcpg-color-border);
+            border-radius: 8px;
+            transition: all 0.5s linear;
+            z-index: 250;
+
+            &:hover {
+                color: var(--rcpg-accent-color);
+                box-shadow: 0 0 5px 3px var(--rcpg-accent-secondary-color);
+            }
+        }
+    }
+
+    .carouselContainerMaster {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+
+        &.maximized {
+            width: 100vw;
+            height: 100vh;
+            position: absolute;
+            aspect-ratio: auto;
+
+            .carouselLinksContainer.displayThumbs {
+                bottom: 2%;
+            }
+
+            .carouselBottomLinks.displayThumbs {
+                width: 64px;
+                height: 36px
+            }
+
+
+            .carouselBottomLinks.displayThumbs {
+                border-radius: 3px;
+                overflow: hidden;
+            }
+
+            .carouselBottomLinks.displayThumbs img {
+                border-radius: 3px;
+            }
+
+            .carouselItem img {
+                width: 100vw;
+                height: 100vh;
+                object-fit: contain;
+            }
+
+            .imageWithCaptionContainer .info {
+                padding: 10px 0 8vh;
+            }
+
+            &.displayThumbs .imageWithCaptionContainer .info {
+                padding: 10px 0 max(7vh, 45px);
+            }
+
+        }
+
+        &.fullscreen .carouselItem img {
+            max-width: 100vw;
+            max-height: 100vh;
+            object-fit: contain;
+        }
+
+        .carouselContainer {
+            position: relative;
+            width: 100%;
+            /* width: 900px; */
+            max-width: 90vw;
+            max-height: 60vw;
+            aspect-ratio: 16 / 9;
+            padding: 0;
+            overflow: hidden;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            background-color: var(--rcpg-color-background);
+
+            &.maximized {
+                width: 100vw;
+                height: 100vh;
+                position: absolute;
+                aspect-ratio: auto;
+                z-index: 200;
+            }
+
+            &.fullscreen {
+                max-width: 100vw;
+                max-height: 100vh;
+            }
+
+            &>button {
+                background-color: var(--surface-color);
+                background-color: transparent;
+                border-radius: 50%;
+                outline: none;
+                border: 0;
+                /* padding: 4px 15px 8px; */
+                padding: 4px 5px 8px;
+                color: var(--rcpg-accent-secondary-color);
+                font-size: 30px;
+                line-height: 30px;
+                cursor: pointer;
+            }
+            &>button:hover {
+                color: var(--rcpg-accent-color);
+            }
+
+            &>button:active {
+                color: var(--rcpg-color-button-active-background);
+            }
+
+            @media(min--moz-device-pixel-ratio:0) {
+                &>button {
+                    padding: 2px 4px 6px 6px;
+                }
+            }
+
+            .carouselButtonNext {
+                position: absolute;
+                font-weight: bolder;
+                right: 2px;
+            }
+
+            .carouselButtonPrev {
+                position: absolute;
+                font-weight: bolder;
+                left: 2px;
+            }
+
+            .carouselLinksContainer {
+                position: absolute;
+                bottom: 5%;
+                left: 50%;
+                transform: translateX(-50%);
+                display: flex;
+                align-items: center;
+            }
+
+            .carouselBottomLinks {
+                width: 24px;
+                height: 8px;
+                padding: 0;
+                border-radius: 50%;
+                border-radius: 0;
+                outline: none;
+                border: 0;
+                background-color: var(--rcpg-color-navigation-background);
+                border: 1px solid var(--rcpg-color-border);
+                transition: background-color 1s ease;
+                margin: 0 2px;
+
+                &.displayThumbs {
+                    position: relative;
+                    height: 12px;
+
+                    img {
+                        position: absolute;
+                        width: 100%;
+                        height: 100%;
+                        top: 50%;
+                        left: 50%;
+                        transform: translate(-50%, -50%);
+                        object-fit: cover;
+                        filter: blur(.6px);
+                        border-radius: 0;
+                        transition: all 0.5s ease;
+                    }
+
+                    &.active img {
+                        filter: grayscale(0%) blur(0);
+                    }
+
+                    &:hover img {
+                        /* transform: translate(-50%, -50%) scale(3); */
+                        z-index: 5;
+                        filter: grayscale(0%);
+                    }
+                }
+
+                &.active {
+                    background-color: var(--rcpg-color-button-active-background);
+                    border: 1px solid var(--rcpg-accent-color);
+                    box-shadow: 0 0 5px 2px var(--rcpg-accent-color);
+                }
+            }
+
+            .carouselItem {
+                box-sizing: border-box;
+                min-width: 100%;
+                height: auto;
+                overflow: hidden;
+                object-fit: contain;
+                height: auto;
+                cursor: pointer;
+                transform: translateX(calc(var(--slider-active-index) * -100%));
+                transition: transform 1s ease;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                    aspect-ratio: 16 / 9;
+                    max-width: 90vw;
+                    max-height: 60vw;
+                    object-fit: scale-down;
+                }
+            }
+        }
+    }
+}

package/src/components/CoderCarousel.tsx

@@ -0,0 +1,242 @@
+'use client'
+
+import React from 'react';
+import { CustomTooltip } from './CustomTooltip';
+import './CoderCarousel.css';
+
+export type SvgContainerProps = {
+    height?: string | number;
+    width?: string | number;
+    className?: string;
+    color?: string;
+    style?: React.CSSProperties;
+}
+
+const FullScreenIcon = ({height = '60px', width = '60px', className='', color = "#FFF", style={}} : SvgContainerProps) => {
+    return (
+        <div className={className} style={{height, width, display: 'inline-block', maxHeight: height, ...style }}>
+            <svg fill={color} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path d="M7.69233 18.2781L9.70711 20.2929C9.9931 20.5789 10.0787 21.009 9.92388 21.3827C9.7691 21.7564 9.40446 22 9 22H3C2.44772 22 2 21.5523 2 21V15C2 14.5955 2.24364 14.2309 2.61732 14.0761C2.99099 13.9213 3.42111 14.0069 3.70711 14.2929L5.571 16.1568L9.25289 12.4749C9.64342 12.0844 10.2766 12.0844 10.6671 12.4749L11.3742 13.182C11.7647 13.5725 11.7647 14.2057 11.3742 14.5962L7.69233 18.2781Z" />
+                <path d="M16.3077 5.72187L14.2929 3.70711C14.0069 3.42111 13.9213 2.99099 14.0761 2.61732C14.2309 2.24364 14.5955 2 15 2H21C21.5523 2 22 2.44772 22 3V9C22 9.40446 21.7564 9.7691 21.3827 9.92388C21.009 10.0787 20.5789 9.9931 20.2929 9.70711L18.429 7.84319L14.7471 11.5251C14.3566 11.9156 13.7234 11.9156 13.3329 11.5251L12.6258 10.818C12.2352 10.4275 12.2352 9.7943 12.6258 9.40378L16.3077 5.72187Z" />
+            </svg>
+        </div>
+    );
+};
+
+const FullScreenExitIcon = ({height = '60px', width = '60px', className='', color = "#FFF", style={}} : SvgContainerProps) => {
+    return (
+        <div className={className} style={{height, width, display: 'inline-block', maxHeight: height, ...style }}>
+            <svg fill={color} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path d="M20.04 10.1109L18.0252 8.09612L21.7071 4.41421C22.0976 4.02369 22.0976 3.39052 21.7071 3L21 2.29289C20.6095 1.90237 19.9763 1.90237 19.5858 2.29289L15.9039 5.9748L14.04 4.11089C13.754 3.82489 13.3239 3.73933 12.9502 3.89411C12.5765 4.04889 12.3329 4.41353 12.3329 4.81799V10.818C12.3329 11.3703 12.7806 11.818 13.3329 11.818H19.3329C19.7373 11.818 20.102 11.5744 20.2568 11.2007C20.4115 10.827 20.326 10.3969 20.04 10.1109Z" />
+                <path d="M3.96 13.8891L5.97478 15.9039L2.29289 19.5858C1.90237 19.9763 1.90237 20.6095 2.29289 21L3 21.7071C3.39052 22.0976 4.02369 22.0976 4.41421 21.7071L8.0961 18.0252L9.96 19.8891C10.246 20.1751 10.6761 20.2607 11.0498 20.1059C11.4235 19.9511 11.6671 19.5865 11.6671 19.182V13.182C11.6671 12.6297 11.2194 12.182 10.6671 12.182H4.66711C4.26265 12.182 3.89801 12.4256 3.74323 12.7993C3.58845 13.173 3.674 13.6031 3.96 13.8891Z" />
+            </svg>
+        </div>
+    );
+};
+
+type CoderCarouselProps = {
+    children: React.ReactNode[];
+    slideDelay?: number;
+    startIndex?: number;
+    width?: string;
+    displayThumbs?: boolean;
+    thumbs?: React.ReactNode[];
+    nextButton?: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    prevButton?: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    fullScreenButtonIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    fullScreenExitButtonIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+}
+
+const CoderCarousel = ({
+    children,
+    slideDelay = 5000,
+    startIndex = 0,
+    width = "900px",
+    displayThumbs = false,
+    thumbs = [],
+    nextButton = <span>⟩</span>,
+    prevButton = <span>⟨</span>,
+    fullScreenButtonIcon = <FullScreenIcon width='20px' height='16px' color='var(--accent-color)' />,
+    fullScreenExitButtonIcon = <FullScreenExitIcon width='20px' height='16px' color='var(--accent-color)' />
+}: CoderCarouselProps) => {
+    const [activeIndex, setActiveIndex] = React.useState(startIndex | 0);
+    const [nextIndex, setNextIndex] = React.useState(((startIndex | 0) + 1) % children.length);
+    const [prevIndex, setPrevIndex] = React.useState(((startIndex | 0) - 1 + children.length) % children.length);
+    const [maximized, setMaximized] = React.useState<boolean>(false);
+    const [fullscreenMode, setFullscreenMode] = React.useState<boolean>(false);
+    const coderCarouselWindowContainer = React.useRef<HTMLDivElement | null>(null);
+    const intervalHandler = React.useRef<NodeJS.Timeout | null>(null);
+    const pauseSlideShow = React.useRef<boolean>(false);
+
+    React.useEffect(() => {
+        const handleFullscreenChange = () => {
+            if (document.fullscreenElement === null) {
+                setFullscreenMode(false);
+            }
+        };
+
+        intervalHandler.current = setInterval(() => { slideNextAuto(); }, slideDelay);
+        window.addEventListener('keydown', handleKeyDown);
+        document.addEventListener('fullscreenchange', handleFullscreenChange);
+
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+            document.removeEventListener('fullscreenchange', handleFullscreenChange);
+            if (intervalHandler.current) {
+                clearInterval(intervalHandler.current);
+            }
+        }
+    }, []);
+
+    React.useEffect(() => {
+        if (fullscreenMode) {
+            coderCarouselWindowContainer.current?.requestFullscreen();
+        } else if (document.fullscreenElement !== null && document.fullscreenElement === coderCarouselWindowContainer.current) {
+            document.exitFullscreen();
+        }
+    }, [fullscreenMode]);
+
+    const stopSliderTimer = () => {
+        if (intervalHandler.current) {
+            clearInterval(intervalHandler.current);
+        }
+    };
+
+    const startSliderTimer = () => {
+        intervalHandler.current = setInterval(() => { slideNextAuto(); }, slideDelay);
+    };
+
+    const resetSliderTimer = () => {
+        stopSliderTimer();
+        startSliderTimer();
+    };
+
+    const slideNextAuto = () => {
+        if (!pauseSlideShow.current) {
+            slideNext();
+        }
+    };
+
+    const slideNext = (reset = false) => {
+        if (reset) {
+            resetSliderTimer();
+        }
+        setActiveIndex((val) => {
+            setPrevIndex((val) % children.length);
+            setNextIndex((val + 2) % children.length);
+            return (val + 1) % children.length;
+        });
+    };
+
+    const slidePrev = (reset = false) => {
+        if (reset) {
+            resetSliderTimer();
+        }
+        setActiveIndex((val) => {
+            setPrevIndex((val - 2 + children.length) % children.length);
+            setNextIndex((val + 1) % children.length);
+            return (val - 1 + children.length) % children.length;
+        });
+    };
+
+    const handleKeyDown = (event: { key: string; }) => {
+        if (event.key === 'ArrowLeft') {
+            slidePrev(true);
+        } else if (event.key === 'ArrowRight') {
+            slideNext(true);
+        } else if (event.key === 'Escape') {
+            setMaximized(false);
+        }
+    };
+
+    const toggleMaximized = () => {
+        setMaximized((maximized) => {
+            if (!maximized) {
+                pauseSlideShow.current = false;
+            }
+            return !maximized;
+        });
+    }
+
+
+    return (
+        <div className={`rcfg-content-wrapper ${maximized ? ' carouselMaximizedCover' : ''}`} style={{ width: !maximized && width ? `${width}px` : '100%' }} ref={coderCarouselWindowContainer}>
+            <span className={`closeButton ${maximized ? '' : 'hidden'}`} onClick={() => { if (fullscreenMode) setFullscreenMode(false); else setMaximized(false); }}>X</span>
+            {maximized &&
+                <button className='fullscreenModeButton' onClick={() => setFullscreenMode((fullscreenMode) => !fullscreenMode)}
+                    title={fullscreenMode ? 'Exit Fullscreen' : 'Enter Fullscreen'}>
+                    {!fullscreenMode && fullScreenButtonIcon}
+                    {fullscreenMode && fullScreenExitButtonIcon}
+                </button>
+            }
+            <div className={`carouselContainerMaster ${maximized ? ' maximized' : ''} ${displayThumbs ? 'displayThumbs' : ''} ${fullscreenMode ? 'fullscreen' : ''}`} >
+                <div
+                    className={`carouselContainer ${maximized ? 'maximized' : ''} ${fullscreenMode ? 'fullscreen' : ''}`}
+                    onMouseEnter={() => { if (!maximized) pauseSlideShow.current = true; }}
+                    onMouseLeave={() => { if (!maximized) pauseSlideShow.current = false; }}
+                    style={{ '--slider-active-index': activeIndex } as React.CSSProperties}
+                >
+                    {children.map((item, index) => {
+                        return (
+                            <div className={`carouselItem`} key={index} onClick={toggleMaximized}>
+                                {item}
+                            </div>
+                        );
+                    })}
+
+                    <div className={`carouselLinksContainer ${displayThumbs ? 'displayThumbs' : ''}`}>
+                        {children.map((item, index) => {
+                            return (
+                                <button
+                                    key={index}
+                                    className={`carouselBottomLinks ${activeIndex === index ? 'active' : ''} ${displayThumbs ? 'displayThumbs' : ''}`}
+                                    onClick={(e) => {
+                                        e.preventDefault();
+                                        resetSliderTimer();
+                                        setPrevIndex((index - 1 + children.length) % children.length);
+                                        setNextIndex((index + 1) % children.length);
+                                        setActiveIndex(index);
+                                    }}
+                                >
+                                    {displayThumbs && thumbs.length > 0 && thumbs[index] && (
+                                        <CustomTooltip title={<>{thumbs[index]}</>}
+                                        >
+                                            <span>{thumbs[index]}</span>
+                                        </CustomTooltip>
+                                    )}
+                                </button>
+                            );
+                        })}
+                    </div>
+
+                    <button className='carouselButtonPrev'
+                        onClick={(e) => { e.preventDefault(); slidePrev(true); }}
+                    >
+                        {displayThumbs && thumbs.length > 0 && thumbs[prevIndex] && (
+                            <CustomTooltip title={<>{thumbs[prevIndex]}</>}
+                            >
+                                {prevButton ? prevButton : <span>⟨</span>}
+                            </CustomTooltip>
+                        )}
+                        {!(displayThumbs) && <>{prevButton ? prevButton : <span>⟨</span>}</>}
+                    </button>
+
+                    <button className='carouselButtonNext'
+                        onClick={(e) => { e.preventDefault(); slideNext(true); }}
+                    >
+                        {displayThumbs && thumbs.length > 0 && thumbs[nextIndex] && (
+                            <CustomTooltip title={<>{thumbs[nextIndex]}</>}
+                            >
+                                {nextButton ? nextButton : <span>⟩</span>}
+                            </CustomTooltip>
+                        )}
+                        {!(displayThumbs && thumbs.length > 0 && thumbs[nextIndex]) && <>{nextButton ? nextButton : <span>⟩</span>}</>}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+
+export default CoderCarousel;

package/src/components/CustomTooltip.tsx

@@ -0,0 +1,61 @@
+import * as Tooltip from '@radix-ui/react-tooltip';
+import React from 'react';
+
+type CustomTooltipProps = {
+    title: React.ReactNode;
+    children: React.ReactElement<any>;
+    container?: HTMLDivElement | null | undefined,
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    arrow?: boolean;
+    delayDuration?: number;
+    enterTouchDelay?: number;
+    leaveTouchDelay?: number;
+    style?: React.CSSProperties;
+    slotProps?: {
+        tooltip?: { [slot: string]: unknown };
+        content?: { [slot: string]: unknown };
+        arrow?: { [slot: string]: unknown };
+    };
+}
+
+export function CustomTooltip({ title = <></>, children, placement = 'top', container, style = {}  }: CustomTooltipProps) {
+    const [open, setOpen] = React.useState(false);
+    const [isTouch, setIsTouch] = React.useState(false);
+
+    React.useEffect(() => {
+        const detectTouch = () => setIsTouch(true);
+        window.addEventListener('touchstart', detectTouch, { once: true });
+        return () => window.removeEventListener('touchstart', detectTouch);
+    }, []);
+
+    return (
+        <Tooltip.Provider>
+            <Tooltip.Root open={isTouch ? open : undefined} onOpenChange={setOpen}>
+                <Tooltip.Trigger asChild>
+                    {React.cloneElement(children, {
+                        onClick: (e: React.MouseEvent) => {
+                            setOpen(true);
+                            if (children.props.onClick) {
+                                children.props.onClick(e);
+                            }
+                        }
+                    })}
+                </Tooltip.Trigger>
+                <Tooltip.Portal container={container ?? undefined}>
+                    <Tooltip.Content
+                        className="bg-gray-800 text-white px-2 py-2 rounded shadow-md text-sm z-100"
+                        side={placement}
+                        sideOffset={5}
+                    >
+                        <div style={style}>
+                            {title}
+                        </div>
+                        <Tooltip.Arrow className="fill-gray-800" />
+                    </Tooltip.Content>
+                </Tooltip.Portal>
+            </Tooltip.Root>
+        </Tooltip.Provider>
+    );
+}
+
+export default CustomTooltip;

package/src/index.ts

@@ -0,0 +1,3 @@
+import CoderCarousel from "./components/CoderCarousel";
+
+export default CoderCarousel;

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES5",
+    "lib": ["DOM", "DOM.Iterable", "ESNext", "ES2020"],
+    "allowJs": true,
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "declaration": true,
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "strict": true,
+    "noFallthroughCasesInSwitch": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src"]
+}