nexlide 1.0.1 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +41 -17
  2. package/dist/index.esm.js +2 -2
  3. package/dist/index.esm.js.map +1 -1
  4. package/dist/index.js +2 -2
  5. package/dist/index.js.map +1 -1
  6. package/package.json +19 -19
package/README.md CHANGED
@@ -1,8 +1,36 @@
1
+ <p align="center">
2
+ <img src="https://nexlide.netlify.app/assets/logo-full.png" width="420"/>
3
+ </p>
4
+
5
+
6
+ [![GitHub](https://img.shields.io/badge/GitHub-000000?style=flat-square&logo=github&logoColor=white)](https://github.com/ERPalmer/nexlide)
7
+ [![npm version](https://img.shields.io/npm/v/nexlide?style=flat-square&logo=npm&logoColor=white&color=CB3837)](https://www.npmjs.com/package/nexlide)
8
+ [![npm downloads](https://img.shields.io/npm/dm/nexlide?style=flat-square&logo=npm&logoColor=white&color=0baa45)](https://www.npmjs.com/package/nexlide)
9
+ [![Next.js](https://img.shields.io/badge/Next.js-000000?style=flat-square&logo=next.js&logoColor=white)](https://nextjs.org/)
10
+ [![React](https://img.shields.io/badge/React-58c4dc?style=flat-square&logo=react&logoColor=white)](https://react.dev/)
11
+ [![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=flat-square&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
12
+ [![Tailwind CSS v4](https://img.shields.io/badge/Tailwind%20CSS-00bcff?style=flat-square&logo=tailwind-css&logoColor=white)](https://tailwindcss.com/)
13
+ [![Framer Motion](https://img.shields.io/badge/Framer%20Motion-EF5DA8?style=flat-square&logo=framer&logoColor=white)](https://www.framer.com/motion/)
14
+
15
+
1
16
  # Nexlide
2
17
 
3
18
  A modern, lightweight, and fully customizable React carousel component built with **Framer Motion** for smooth animations and **Tailwind CSS** for flexible styling.
4
19
 
5
- ## Supports
20
+
21
+ ## ✨ Features
22
+
23
+ - Smooth slide transitions (fade, slide left/right/top/bottom)
24
+ - Independent caption animations (title + description)
25
+ - Responsive design
26
+ - Lazy loading images
27
+ - ARIA accessible
28
+ - Dark mode compatible
29
+ - No external CSS import required (uses Tailwind classes inline)
30
+ - Others in development process
31
+
32
+
33
+ ## 🧩 Supports
6
34
 
7
35
  - Autoplay with configurable interval
8
36
  - Infinite loop
@@ -13,17 +41,8 @@ A modern, lightweight, and fully customizable React carousel component built wit
13
41
  - Fully customizable styles via className props
14
42
  - Designed for seamless integration with **Next.js** (App Router) and any React project
15
43
 
16
- ## Features
17
-
18
- - Smooth slide transitions (fade, slide left/right/top/bottom)
19
- - Independent caption animations (title + description)
20
- - Responsive design
21
- - Lazy loading images
22
- - ARIA accessible
23
- - Dark mode compatible
24
- - No external CSS import required (uses Tailwind classes inline)
25
44
 
26
- ## Installation
45
+ ## ⚙️ Installation
27
46
 
28
47
  ```bash
29
48
  npm install nexlide
@@ -33,7 +52,8 @@ yarn add nexlide
33
52
  pnpm add nexlide
34
53
  ```
35
54
 
36
- ## Peer Dependencies
55
+
56
+ ## 📦 Peer Dependencies
37
57
 
38
58
  These dependencies are usually already present in React/Next.js projects:
39
59
 
@@ -41,7 +61,8 @@ These dependencies are usually already present in React/Next.js projects:
41
61
  - framer-motion
42
62
  - clsx, tailwind-merge, class-variance-authority
43
63
 
44
- ## Usage (Next.js App Router)
64
+
65
+ ## 🚀 Usage (Next.js App Router)
45
66
 
46
67
  The component is a **Client Component** — you **must** use it inside a file that starts with `'use client';`
47
68
 
@@ -83,7 +104,8 @@ export default function MyPage() {
83
104
  }
84
105
  ```
85
106
 
86
- ## Available Animations
107
+
108
+ ## 🌀 Available Animations
87
109
 
88
110
  Use `animation` for the image slide transition and `captionAnimation` for the title + description appearance.
89
111
 
@@ -102,7 +124,8 @@ Use `animation` for the image slide transition and `captionAnimation` for the ti
102
124
 
103
125
  All animations use smooth easing curves and can be combined freely (e.g., slideLeft for image + bounce for caption). Adjust timing with `captionDelay` prop if needed.
104
126
 
105
- ## Props
127
+
128
+ ## 🔧 Props
106
129
 
107
130
  | Prop | Type | Default | Description |
108
131
  |---------------------|----------------------------------------------------------------------|---------------|-----------------------------------------------------------------------------|
@@ -123,7 +146,7 @@ All animations use smooth easing curves and can be combined freely (e.g., slideL
123
146
  `captionDelay` | `number` | `0.5` | Custom delay time in seconds |
124
147
 
125
148
 
126
- ## Development
149
+ ## 🛠️ Development
127
150
 
128
151
  ```bash
129
152
  # Clone repo
@@ -141,6 +164,7 @@ npm pack
141
164
  # Then in your test project: npm install ../nexlide/nexlide-1.0.0.tgz
142
165
  ```
143
166
 
144
- ## License
167
+
168
+ ## 📄 License
145
169
 
146
170
  MIT License. See LICENSE for details.
package/dist/index.esm.js CHANGED
@@ -97,11 +97,11 @@ function Carousel({ items, autoPlay = false, autoPlayInterval = 3000, showPagina
97
97
  };
98
98
  if (items.length === 0)
99
99
  return null;
100
- return (jsxs("div", { className: cn("relative overflow-hidden w-full max-w-4xl mx-auto aspect-[4/3] rounded-xl shadow-2xl bg-gray-900", className), onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, role: "region", "aria-label": "Image carousel", children: [jsx(AnimatePresence, { initial: false, mode: "wait", children: jsxs(motion.div, { className: cn("absolute inset-0", slideClassName), variants: (_a = slideVariants[animation]) !== null && _a !== void 0 ? _a : slideVariants.slideLeft, initial: "initial", animate: "animate", exit: "exit", children: [jsx("img", { src: items[currentIndex].imageUrl, alt: items[currentIndex].title || "Carousel image", className: "w-full h-full object-cover", loading: "lazy" }), jsx(AnimatePresence, { children: jsxs(motion.div, { className: cn("absolute bottom-6 left-6 right-6 bg-gradient-to-t from-black/80 to-transparent p-6 rounded-b-xl", captionClassName), variants: (_b = slideVariants[captionAnimation]) !== null && _b !== void 0 ? _b : slideVariants.fade, initial: "initial", animate: "animate", exit: "exit", transition: {
100
+ return (jsxs("div", { className: cn("relative overflow-hidden w-full max-w-4xl mx-auto aspect-[4/3] rounded-xl shadow-2xl bg-gray-900", className), onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, role: "region", "aria-label": "Carousel imageshowcase", children: [jsx(AnimatePresence, { initial: false, mode: "wait", children: jsxs(motion.div, { className: cn("absolute inset-0", slideClassName), variants: (_a = slideVariants[animation]) !== null && _a !== void 0 ? _a : slideVariants.slideLeft, initial: "initial", animate: "animate", exit: "exit", children: [jsx("img", { src: items[currentIndex].imageUrl, alt: items[currentIndex].title || `Slide ${currentIndex + 1}`, "aria-label": items[currentIndex].title || `Slide ${currentIndex + 1}`, className: "w-full h-full object-cover", loading: "lazy" }), jsx(AnimatePresence, { children: jsxs(motion.div, { className: cn("absolute bottom-6 left-6 right-6 bg-gradient-to-t from-black/80 to-transparent p-6 rounded-b-xl", captionClassName), variants: (_b = slideVariants[captionAnimation]) !== null && _b !== void 0 ? _b : slideVariants.fade, initial: "initial", animate: "animate", exit: "exit", transition: {
101
101
  delay: captionDelay,
102
102
  duration: 0.7,
103
103
  ease: "easeOut",
104
- }, children: [jsx("h3", { className: "text-2xl font-bold text-white drop-shadow-md", children: items[currentIndex].title }), jsx("p", { className: "mt-2 text-white/90 text-lg drop-shadow-sm", children: items[currentIndex].description })] }, currentIndex) })] }, currentIndex) }), showArrows && items.length > 1 && (jsxs(Fragment, { children: [jsx("button", { onClick: prev, className: cn("absolute left-4 top-1/2 -translate-y-1/2 z-10 w-12 h-12 flex items-center justify-center rounded-full bg-black/50 text-white text-3xl hover:bg-black/70 transition-all duration-200 shadow-lg", arrowClassName), "aria-label": "Previous", children: "\u2039" }), jsx("button", { onClick: next, className: cn("absolute right-4 top-1/2 -translate-y-1/2 z-10 w-12 h-12 flex items-center justify-center rounded-full bg-black/50 text-white text-3xl hover:bg-black/70 transition-all duration-200 shadow-lg", arrowClassName), "aria-label": "Next", children: "\u203A" })] })), showPagination && items.length > 1 && (jsx("div", { className: cn("absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex gap-3", paginationClassName), children: items.map((_, idx) => (jsx("button", { onClick: () => goToIndex(idx), className: cn("w-3 h-3 rounded-full transition-all duration-300 shadow-md", idx === currentIndex
104
+ }, children: [jsx("h3", { className: "text-2xl font-bold text-white drop-shadow-md", children: items[currentIndex].title }), jsx("p", { className: "mt-2 text-white/90 text-lg drop-shadow-sm", children: items[currentIndex].description })] }, currentIndex) })] }, currentIndex) }), showArrows && items.length > 1 && (jsxs(Fragment, { children: [jsx("button", { onClick: prev, className: cn("absolute left-4 top-1/2 -translate-y-1/2 z-10 w-12 h-12 flex items-center justify-center rounded-full bg-black/50 text-white text-3xl hover:bg-black/70 hover:cursor-pointer transition-all duration-200 shadow-lg", arrowClassName), "aria-label": "Previous slide", children: "\u2039" }), jsx("button", { onClick: next, className: cn("absolute right-4 top-1/2 -translate-y-1/2 z-10 w-12 h-12 flex items-center justify-center rounded-full bg-black/50 text-white text-3xl hover:bg-black/70 hover:cursor-pointer transition-all duration-200 shadow-lg", arrowClassName), "aria-label": "Next slide", children: "\u203A" })] })), showPagination && items.length > 1 && (jsx("div", { className: cn("absolute bottom-2 left-1/2 -translate-x-1/2 z-10 flex gap-3", paginationClassName), children: items.map((_, idx) => (jsx("button", { onClick: () => goToIndex(idx), className: cn("w-3 h-3 rounded-full transition-all duration-300 shadow-md hover:cursor-pointer", idx === currentIndex
105
105
  ? "bg-white scale-125 shadow-white/50"
106
106
  : "bg-white/50 hover:bg-white/80", dotClassName), "aria-label": `Go to slide ${idx + 1}` }, idx))) }))] }));
107
107
  }
package/dist/index.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.esm.js","sources":["../src/lib/animations.ts","../src/lib/utils.ts","../src/Carousel.tsx"],"sourcesContent":["import { Variants } from \"framer-motion\";\r\n\r\nexport const slideVariants: Record<string, Variants> = {\r\n fade: {\r\n initial: { opacity: 0 },\r\n animate: { opacity: 1, transition: { duration: 0.6, ease: \"easeInOut\" } },\r\n exit: { opacity: 0 },\r\n },\r\n fadeIn: {\r\n initial: { opacity: 0 },\r\n animate: { opacity: 1, transition: { duration: 0.6 } },\r\n exit: { opacity: 0 },\r\n },\r\n slideLeft: {\r\n initial: { opacity: 0, x: \"100%\" },\r\n animate: { opacity: 1, x: 0, transition: { duration: 0.5, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, x: \"-100%\" },\r\n },\r\n slideRight: {\r\n initial: { opacity: 0, x: \"-100%\" },\r\n animate: { opacity: 1, x: 0, transition: { duration: 0.5, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, x: \"100%\" },\r\n },\r\n slideTop: {\r\n initial: { opacity: 0, y: \"-100%\" },\r\n animate: { opacity: 1, y: 0, transition: { duration: 0.5, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, y: \"100%\" },\r\n },\r\n slideBottom: {\r\n initial: { opacity: 0, y: \"100%\" },\r\n animate: { opacity: 1, y: 0, transition: { duration: 0.5, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, y: \"-100%\" },\r\n },\r\n bounce: {\r\n initial: { opacity: 0, y: 40, scale: 0.9 },\r\n animate: { opacity: 1, y: 0, scale: 1, transition: { duration: 0.7, ease: [0.68, -0.55, 0.265, 1.55] } }, // bounce fuerte\r\n exit: { opacity: 0, y: -40, scale: 0.9 },\r\n },\r\n zoomIn: {\r\n initial: { opacity: 0, scale: 0.7 },\r\n animate: { opacity: 1, scale: 1, transition: { duration: 0.6, ease: \"easeOut\" } },\r\n exit: { opacity: 0, scale: 0.7 },\r\n },\r\n zoomOut: {\r\n initial: { opacity: 0, scale: 1.3 },\r\n animate: { opacity: 1, scale: 1, transition: { duration: 0.6, ease: \"easeOut\" } },\r\n exit: { opacity: 0, scale: 1.3 },\r\n },\r\n flip: {\r\n initial: { opacity: 0, rotateY: 90 },\r\n animate: { opacity: 1, rotateY: 0, transition: { duration: 0.7, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, rotateY: -90 },\r\n },\r\n};","import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n return twMerge(clsx(inputs));\r\n}","\"use client\";\r\n\r\nimport React, { useState, useEffect, useRef } from \"react\";\r\nimport { motion, AnimatePresence } from \"framer-motion\";\r\nimport { slideVariants } from \"./lib/animations\";\r\nimport { cn } from \"./lib/utils\";\r\n\r\ninterface CarouselItem {\r\n imageUrl: string;\r\n title: string;\r\n description: string;\r\n}\r\n\r\ninterface CarouselProps {\r\n items: CarouselItem[];\r\n autoPlay?: boolean;\r\n autoPlayInterval?: number;\r\n showPagination?: boolean;\r\n showArrows?: boolean;\r\n infiniteLoop?: boolean;\r\n className?: string;\r\n slideClassName?: string;\r\n captionClassName?: string;\r\n arrowClassName?: string;\r\n paginationClassName?: string;\r\n dotClassName?: string;\r\n animation?: keyof typeof slideVariants;\r\n captionAnimation?: keyof typeof slideVariants;\r\n captionDelay?: number;\r\n}\r\n\r\nexport default function Carousel({\r\n items,\r\n autoPlay = false,\r\n autoPlayInterval = 3000,\r\n showPagination = true,\r\n showArrows = true,\r\n infiniteLoop = true,\r\n className,\r\n slideClassName,\r\n captionClassName,\r\n arrowClassName,\r\n paginationClassName,\r\n dotClassName,\r\n animation = \"slideLeft\",\r\n captionAnimation = \"fade\",\r\n captionDelay = 0.5,\r\n}: CarouselProps) {\r\n const [currentIndex, setCurrentIndex] = useState(0);\r\n const touchStartX = useRef(0);\r\n\r\n const goToIndex = (index: number) => {\r\n let newIndex = index;\r\n if (infiniteLoop) {\r\n newIndex = (index + items.length) % items.length;\r\n } else {\r\n newIndex = Math.max(0, Math.min(index, items.length - 1));\r\n }\r\n setCurrentIndex(newIndex);\r\n };\r\n\r\n const next = () => goToIndex(currentIndex + 1);\r\n const prev = () => goToIndex(currentIndex - 1);\r\n\r\n useEffect(() => {\r\n if (!autoPlay) return;\r\n const interval = setInterval(next, autoPlayInterval);\r\n return () => clearInterval(interval);\r\n }, [currentIndex, autoPlay, autoPlayInterval]);\r\n\r\n const handleTouchStart = (e: React.TouchEvent) => {\r\n touchStartX.current = e.touches[0].clientX;\r\n };\r\n\r\n const handleTouchMove = (e: React.TouchEvent) => {\r\n const diff = touchStartX.current - e.touches[0].clientX;\r\n if (Math.abs(diff) > 50) {\r\n if (diff > 0) next();\r\n else prev();\r\n }\r\n };\r\n\r\n if (items.length === 0) return null;\r\n\r\n return (\r\n <div\r\n className={cn(\r\n \"relative overflow-hidden w-full max-w-4xl mx-auto aspect-[4/3] rounded-xl shadow-2xl bg-gray-900\",\r\n className\r\n )}\r\n onTouchStart={handleTouchStart}\r\n onTouchMove={handleTouchMove}\r\n role=\"region\"\r\n aria-label=\"Image carousel\"\r\n >\r\n <AnimatePresence initial={false} mode=\"wait\">\r\n <motion.div\r\n key={currentIndex}\r\n className={cn(\"absolute inset-0\", slideClassName)}\r\n variants={slideVariants[animation] ?? slideVariants.slideLeft}\r\n initial=\"initial\"\r\n animate=\"animate\"\r\n exit=\"exit\"\r\n >\r\n <img\r\n src={items[currentIndex].imageUrl}\r\n alt={items[currentIndex].title || \"Carousel image\"}\r\n className=\"w-full h-full object-cover\"\r\n loading=\"lazy\"\r\n />\r\n <AnimatePresence>\r\n <motion.div\r\n key={currentIndex}\r\n className={cn(\r\n \"absolute bottom-6 left-6 right-6 bg-gradient-to-t from-black/80 to-transparent p-6 rounded-b-xl\",\r\n captionClassName\r\n )}\r\n variants={slideVariants[captionAnimation] ?? slideVariants.fade}\r\n initial=\"initial\"\r\n animate=\"animate\"\r\n exit=\"exit\"\r\n transition={{\r\n delay: captionDelay,\r\n duration: 0.7,\r\n ease: \"easeOut\",\r\n }}\r\n >\r\n <h3 className=\"text-2xl font-bold text-white drop-shadow-md\">\r\n {items[currentIndex].title}\r\n </h3>\r\n <p className=\"mt-2 text-white/90 text-lg drop-shadow-sm\">\r\n {items[currentIndex].description}\r\n </p>\r\n </motion.div>\r\n </AnimatePresence>\r\n </motion.div>\r\n </AnimatePresence>\r\n\r\n {showArrows && items.length > 1 && (\r\n <>\r\n <button\r\n onClick={prev}\r\n className={cn(\r\n \"absolute left-4 top-1/2 -translate-y-1/2 z-10 w-12 h-12 flex items-center justify-center rounded-full bg-black/50 text-white text-3xl hover:bg-black/70 transition-all duration-200 shadow-lg\",\r\n arrowClassName\r\n )}\r\n aria-label=\"Previous\"\r\n >\r\n ‹\r\n </button>\r\n\r\n <button\r\n onClick={next}\r\n className={cn(\r\n \"absolute right-4 top-1/2 -translate-y-1/2 z-10 w-12 h-12 flex items-center justify-center rounded-full bg-black/50 text-white text-3xl hover:bg-black/70 transition-all duration-200 shadow-lg\",\r\n arrowClassName\r\n )}\r\n aria-label=\"Next\"\r\n >\r\n ›\r\n </button>\r\n </>\r\n )}\r\n\r\n {showPagination && items.length > 1 && (\r\n <div\r\n className={cn(\r\n \"absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex gap-3\",\r\n paginationClassName\r\n )}\r\n >\r\n {items.map((_, idx) => (\r\n <button\r\n key={idx}\r\n onClick={() => goToIndex(idx)}\r\n className={cn(\r\n \"w-3 h-3 rounded-full transition-all duration-300 shadow-md\",\r\n idx === currentIndex\r\n ? \"bg-white scale-125 shadow-white/50\"\r\n : \"bg-white/50 hover:bg-white/80\",\r\n dotClassName\r\n )}\r\n aria-label={`Go to slide ${idx + 1}`}\r\n />\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n}\r\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":";;;;;;AAEO,MAAM,aAAa,GAA6B;AACrD,IAAA,IAAI,EAAE;AACJ,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;AACvB,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE;AACzE,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;AACrB,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;AACvB,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE;AACtD,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;AACrB,KAAA;AACD,IAAA,SAAS,EAAE;QACT,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE;QAClC,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE;QAC/E,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE;AACjC,KAAA;AACD,IAAA,UAAU,EAAE;QACV,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE;QACnC,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE;QAC/E,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE;AAChC,KAAA;AACD,IAAA,QAAQ,EAAE;QACR,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE;QACnC,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE;QAC/E,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE;AAChC,KAAA;AACD,IAAA,WAAW,EAAE;QACX,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE;QAClC,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE;QAC/E,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE;AACjC,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE;AAC1C,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,EAAE;AACxG,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE;AACzC,KAAA;AACD,IAAA,MAAM,EAAE;QACN,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE;QACnC,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QACjF,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE;AACjC,KAAA;AACD,IAAA,OAAO,EAAE;QACP,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE;QACnC,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QACjF,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE;AACjC,KAAA;AACD,IAAA,IAAI,EAAE;QACJ,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;QACpC,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE;QACrF,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE;AACnC,KAAA;CACF;;AClDK,SAAU,EAAE,CAAC,GAAG,MAAoB,EAAA;AACxC,IAAA,OAAO,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AAC9B;;AC0Bc,SAAU,QAAQ,CAAC,EAC/B,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,gBAAgB,GAAG,IAAI,EACvB,cAAc,GAAG,IAAI,EACrB,UAAU,GAAG,IAAI,EACjB,YAAY,GAAG,IAAI,EACnB,SAAS,EACT,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,mBAAmB,EACnB,YAAY,EACZ,SAAS,GAAG,WAAW,EACvB,gBAAgB,GAAG,MAAM,EACzB,YAAY,GAAG,GAAG,GACJ,EAAA;;IACd,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;AACnD,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC;AAE7B,IAAA,MAAM,SAAS,GAAG,CAAC,KAAa,KAAI;QAClC,IAAI,QAAQ,GAAG,KAAK;QACpB,IAAI,YAAY,EAAE;AAChB,YAAA,QAAQ,GAAG,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM;QAClD;aAAO;YACL,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAC3D;QACA,eAAe,CAAC,QAAQ,CAAC;AAC3B,IAAA,CAAC;IAED,MAAM,IAAI,GAAG,MAAM,SAAS,CAAC,YAAY,GAAG,CAAC,CAAC;IAC9C,MAAM,IAAI,GAAG,MAAM,SAAS,CAAC,YAAY,GAAG,CAAC,CAAC;IAE9C,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,QAAQ;YAAE;QACf,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,EAAE,gBAAgB,CAAC;AACpD,QAAA,OAAO,MAAM,aAAa,CAAC,QAAQ,CAAC;IACtC,CAAC,EAAE,CAAC,YAAY,EAAE,QAAQ,EAAE,gBAAgB,CAAC,CAAC;AAE9C,IAAA,MAAM,gBAAgB,GAAG,CAAC,CAAmB,KAAI;QAC/C,WAAW,CAAC,OAAO,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO;AAC5C,IAAA,CAAC;AAED,IAAA,MAAM,eAAe,GAAG,CAAC,CAAmB,KAAI;AAC9C,QAAA,MAAM,IAAI,GAAG,WAAW,CAAC,OAAO,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO;QACvD,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE;YACvB,IAAI,IAAI,GAAG,CAAC;AAAE,gBAAA,IAAI,EAAE;;AACf,gBAAA,IAAI,EAAE;QACb;AACF,IAAA,CAAC;AAED,IAAA,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;AAAE,QAAA,OAAO,IAAI;AAEnC,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,kGAAkG,EAClG,SAAS,CACV,EACD,YAAY,EAAE,gBAAgB,EAC9B,WAAW,EAAE,eAAe,EAC5B,IAAI,EAAC,QAAQ,gBACF,gBAAgB,EAAA,QAAA,EAAA,CAE3BC,GAAA,CAAC,eAAe,IAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAC,MAAM,EAAA,QAAA,EAC1CD,IAAA,CAAC,MAAM,CAAC,GAAG,EAAA,EAET,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,cAAc,CAAC,EACjD,QAAQ,EAAE,CAAA,EAAA,GAAA,aAAa,CAAC,SAAS,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,aAAa,CAAC,SAAS,EAC7D,OAAO,EAAC,SAAS,EACjB,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,MAAM,EAAA,QAAA,EAAA,CAEXC,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC,QAAQ,EACjC,GAAG,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC,KAAK,IAAI,gBAAgB,EAClD,SAAS,EAAC,4BAA4B,EACtC,OAAO,EAAC,MAAM,GACd,EACFA,GAAA,CAAC,eAAe,EAAA,EAAA,QAAA,EACdD,KAAC,MAAM,CAAC,GAAG,EAAA,EAET,SAAS,EAAE,EAAE,CACX,iGAAiG,EACjG,gBAAgB,CACjB,EACD,QAAQ,EAAE,CAAA,EAAA,GAAA,aAAa,CAAC,gBAAgB,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,aAAa,CAAC,IAAI,EAC/D,OAAO,EAAC,SAAS,EACjB,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,MAAM,EACX,UAAU,EAAE;AACV,oCAAA,KAAK,EAAE,YAAY;AACnB,oCAAA,QAAQ,EAAE,GAAG;AACb,oCAAA,IAAI,EAAE,SAAS;AAChB,iCAAA,EAAA,QAAA,EAAA,CAEDC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,8CAA8C,EAAA,QAAA,EACzD,KAAK,CAAC,YAAY,CAAC,CAAC,KAAK,EAAA,CACvB,EACLA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,2CAA2C,EAAA,QAAA,EACrD,KAAK,CAAC,YAAY,CAAC,CAAC,WAAW,EAAA,CAC9B,CAAA,EAAA,EApBC,YAAY,CAqBN,GACG,CAAA,EAAA,EArCb,YAAY,CAsCN,EAAA,CACG,EAEjB,UAAU,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,KAC7BD,IAAA,CAAAE,QAAA,EAAA,EAAA,QAAA,EAAA,CACED,GAAA,CAAA,QAAA,EAAA,EACE,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,EAAE,CACX,+LAA+L,EAC/L,cAAc,CACf,EAAA,YAAA,EACU,UAAU,EAAA,QAAA,EAAA,QAAA,EAAA,CAGd,EAETA,GAAA,CAAA,QAAA,EAAA,EACE,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,EAAE,CACX,gMAAgM,EAChM,cAAc,CACf,EAAA,YAAA,EACU,MAAM,EAAA,QAAA,EAAA,QAAA,EAAA,CAGV,CAAA,EAAA,CACR,CACJ,EAEA,cAAc,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,KACjCA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,6DAA6D,EAC7D,mBAAmB,CACpB,EAAA,QAAA,EAEA,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,MAChBA,GAAA,CAAA,QAAA,EAAA,EAEE,OAAO,EAAE,MAAM,SAAS,CAAC,GAAG,CAAC,EAC7B,SAAS,EAAE,EAAE,CACX,4DAA4D,EAC5D,GAAG,KAAK;AACN,0BAAE;0BACA,+BAA+B,EACnC,YAAY,CACb,EAAA,YAAA,EACW,CAAA,YAAA,EAAe,GAAG,GAAG,CAAC,EAAE,EAAA,EAT/B,GAAG,CAUR,CACH,CAAC,GACE,CACP,CAAA,EAAA,CACG;AAEV;;;;"}
1
+ {"version":3,"file":"index.esm.js","sources":["../src/lib/animations.ts","../src/lib/utils.ts","../src/Carousel.tsx"],"sourcesContent":["import { Variants } from \"framer-motion\";\r\n\r\nexport const slideVariants: Record<string, Variants> = {\r\n fade: {\r\n initial: { opacity: 0 },\r\n animate: { opacity: 1, transition: { duration: 0.6, ease: \"easeInOut\" } },\r\n exit: { opacity: 0 },\r\n },\r\n fadeIn: {\r\n initial: { opacity: 0 },\r\n animate: { opacity: 1, transition: { duration: 0.6 } },\r\n exit: { opacity: 0 },\r\n },\r\n slideLeft: {\r\n initial: { opacity: 0, x: \"100%\" },\r\n animate: { opacity: 1, x: 0, transition: { duration: 0.5, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, x: \"-100%\" },\r\n },\r\n slideRight: {\r\n initial: { opacity: 0, x: \"-100%\" },\r\n animate: { opacity: 1, x: 0, transition: { duration: 0.5, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, x: \"100%\" },\r\n },\r\n slideTop: {\r\n initial: { opacity: 0, y: \"-100%\" },\r\n animate: { opacity: 1, y: 0, transition: { duration: 0.5, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, y: \"100%\" },\r\n },\r\n slideBottom: {\r\n initial: { opacity: 0, y: \"100%\" },\r\n animate: { opacity: 1, y: 0, transition: { duration: 0.5, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, y: \"-100%\" },\r\n },\r\n bounce: {\r\n initial: { opacity: 0, y: 40, scale: 0.9 },\r\n animate: { opacity: 1, y: 0, scale: 1, transition: { duration: 0.7, ease: [0.68, -0.55, 0.265, 1.55] } }, // bounce fuerte\r\n exit: { opacity: 0, y: -40, scale: 0.9 },\r\n },\r\n zoomIn: {\r\n initial: { opacity: 0, scale: 0.7 },\r\n animate: { opacity: 1, scale: 1, transition: { duration: 0.6, ease: \"easeOut\" } },\r\n exit: { opacity: 0, scale: 0.7 },\r\n },\r\n zoomOut: {\r\n initial: { opacity: 0, scale: 1.3 },\r\n animate: { opacity: 1, scale: 1, transition: { duration: 0.6, ease: \"easeOut\" } },\r\n exit: { opacity: 0, scale: 1.3 },\r\n },\r\n flip: {\r\n initial: { opacity: 0, rotateY: 90 },\r\n animate: { opacity: 1, rotateY: 0, transition: { duration: 0.7, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, rotateY: -90 },\r\n },\r\n};","import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n return twMerge(clsx(inputs));\r\n}","\"use client\";\r\n\r\nimport React, { useState, useEffect, useRef } from \"react\";\r\nimport { motion, AnimatePresence } from \"framer-motion\";\r\nimport { slideVariants } from \"./lib/animations\";\r\nimport { cn } from \"./lib/utils\";\r\n\r\ninterface CarouselItem {\r\n imageUrl: string;\r\n title: string;\r\n description: string;\r\n}\r\n\r\ninterface CarouselProps {\r\n items: CarouselItem[];\r\n autoPlay?: boolean;\r\n autoPlayInterval?: number;\r\n showPagination?: boolean;\r\n showArrows?: boolean;\r\n infiniteLoop?: boolean;\r\n className?: string;\r\n slideClassName?: string;\r\n captionClassName?: string;\r\n arrowClassName?: string;\r\n paginationClassName?: string;\r\n dotClassName?: string;\r\n animation?: keyof typeof slideVariants;\r\n captionAnimation?: keyof typeof slideVariants;\r\n captionDelay?: number;\r\n}\r\n\r\nexport default function Carousel({\r\n items,\r\n autoPlay = false,\r\n autoPlayInterval = 3000,\r\n showPagination = true,\r\n showArrows = true,\r\n infiniteLoop = true,\r\n className,\r\n slideClassName,\r\n captionClassName,\r\n arrowClassName,\r\n paginationClassName,\r\n dotClassName,\r\n animation = \"slideLeft\",\r\n captionAnimation = \"fade\",\r\n captionDelay = 0.5,\r\n}: CarouselProps) {\r\n const [currentIndex, setCurrentIndex] = useState(0);\r\n const touchStartX = useRef(0);\r\n\r\n const goToIndex = (index: number) => {\r\n let newIndex = index;\r\n if (infiniteLoop) {\r\n newIndex = (index + items.length) % items.length;\r\n } else {\r\n newIndex = Math.max(0, Math.min(index, items.length - 1));\r\n }\r\n setCurrentIndex(newIndex);\r\n };\r\n\r\n const next = () => goToIndex(currentIndex + 1);\r\n const prev = () => goToIndex(currentIndex - 1);\r\n\r\n useEffect(() => {\r\n if (!autoPlay) return;\r\n const interval = setInterval(next, autoPlayInterval);\r\n return () => clearInterval(interval);\r\n }, [currentIndex, autoPlay, autoPlayInterval]);\r\n\r\n const handleTouchStart = (e: React.TouchEvent) => {\r\n touchStartX.current = e.touches[0].clientX;\r\n };\r\n\r\n const handleTouchMove = (e: React.TouchEvent) => {\r\n const diff = touchStartX.current - e.touches[0].clientX;\r\n if (Math.abs(diff) > 50) {\r\n if (diff > 0) next();\r\n else prev();\r\n }\r\n };\r\n\r\n if (items.length === 0) return null;\r\n\r\n return (\r\n <div\r\n className={cn(\r\n \"relative overflow-hidden w-full max-w-4xl mx-auto aspect-[4/3] rounded-xl shadow-2xl bg-gray-900\",\r\n className\r\n )}\r\n onTouchStart={handleTouchStart}\r\n onTouchMove={handleTouchMove}\r\n role=\"region\"\r\n aria-label=\"Carousel imageshowcase\"\r\n >\r\n <AnimatePresence initial={false} mode=\"wait\">\r\n <motion.div\r\n key={currentIndex}\r\n className={cn(\"absolute inset-0\", slideClassName)}\r\n variants={slideVariants[animation] ?? slideVariants.slideLeft}\r\n initial=\"initial\"\r\n animate=\"animate\"\r\n exit=\"exit\"\r\n >\r\n <img\r\n src={items[currentIndex].imageUrl}\r\n alt={items[currentIndex].title || `Slide ${currentIndex + 1}`}\r\n aria-label={items[currentIndex].title || `Slide ${currentIndex + 1}`}\r\n className=\"w-full h-full object-cover\"\r\n loading=\"lazy\"\r\n />\r\n <AnimatePresence>\r\n <motion.div\r\n key={currentIndex}\r\n className={cn(\r\n \"absolute bottom-6 left-6 right-6 bg-gradient-to-t from-black/80 to-transparent p-6 rounded-b-xl\",\r\n captionClassName\r\n )}\r\n variants={slideVariants[captionAnimation] ?? slideVariants.fade}\r\n initial=\"initial\"\r\n animate=\"animate\"\r\n exit=\"exit\"\r\n transition={{\r\n delay: captionDelay,\r\n duration: 0.7,\r\n ease: \"easeOut\",\r\n }}\r\n >\r\n <h3 className=\"text-2xl font-bold text-white drop-shadow-md\">\r\n {items[currentIndex].title}\r\n </h3>\r\n <p className=\"mt-2 text-white/90 text-lg drop-shadow-sm\">\r\n {items[currentIndex].description}\r\n </p>\r\n </motion.div>\r\n </AnimatePresence>\r\n </motion.div>\r\n </AnimatePresence>\r\n\r\n {showArrows && items.length > 1 && (\r\n <>\r\n <button\r\n onClick={prev}\r\n className={cn(\r\n \"absolute left-4 top-1/2 -translate-y-1/2 z-10 w-12 h-12 flex items-center justify-center rounded-full bg-black/50 text-white text-3xl hover:bg-black/70 hover:cursor-pointer transition-all duration-200 shadow-lg\",\r\n arrowClassName\r\n )}\r\n aria-label=\"Previous slide\"\r\n >\r\n ‹\r\n </button>\r\n\r\n <button\r\n onClick={next}\r\n className={cn(\r\n \"absolute right-4 top-1/2 -translate-y-1/2 z-10 w-12 h-12 flex items-center justify-center rounded-full bg-black/50 text-white text-3xl hover:bg-black/70 hover:cursor-pointer transition-all duration-200 shadow-lg\",\r\n arrowClassName\r\n )}\r\n aria-label=\"Next slide\"\r\n >\r\n ›\r\n </button>\r\n </>\r\n )}\r\n\r\n {showPagination && items.length > 1 && (\r\n <div\r\n className={cn(\r\n \"absolute bottom-2 left-1/2 -translate-x-1/2 z-10 flex gap-3\",\r\n paginationClassName\r\n )}\r\n >\r\n {items.map((_, idx) => (\r\n <button\r\n key={idx}\r\n onClick={() => goToIndex(idx)}\r\n className={cn(\r\n \"w-3 h-3 rounded-full transition-all duration-300 shadow-md hover:cursor-pointer\",\r\n idx === currentIndex\r\n ? \"bg-white scale-125 shadow-white/50\"\r\n : \"bg-white/50 hover:bg-white/80\",\r\n dotClassName\r\n )}\r\n aria-label={`Go to slide ${idx + 1}`}\r\n />\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n}\r\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
package/dist/index.js CHANGED
@@ -99,11 +99,11 @@ function Carousel({ items, autoPlay = false, autoPlayInterval = 3000, showPagina
99
99
  };
100
100
  if (items.length === 0)
101
101
  return null;
102
- return (jsxRuntime.jsxs("div", { className: cn("relative overflow-hidden w-full max-w-4xl mx-auto aspect-[4/3] rounded-xl shadow-2xl bg-gray-900", className), onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, role: "region", "aria-label": "Image carousel", children: [jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, mode: "wait", children: jsxRuntime.jsxs(framerMotion.motion.div, { className: cn("absolute inset-0", slideClassName), variants: (_a = slideVariants[animation]) !== null && _a !== void 0 ? _a : slideVariants.slideLeft, initial: "initial", animate: "animate", exit: "exit", children: [jsxRuntime.jsx("img", { src: items[currentIndex].imageUrl, alt: items[currentIndex].title || "Carousel image", className: "w-full h-full object-cover", loading: "lazy" }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: jsxRuntime.jsxs(framerMotion.motion.div, { className: cn("absolute bottom-6 left-6 right-6 bg-gradient-to-t from-black/80 to-transparent p-6 rounded-b-xl", captionClassName), variants: (_b = slideVariants[captionAnimation]) !== null && _b !== void 0 ? _b : slideVariants.fade, initial: "initial", animate: "animate", exit: "exit", transition: {
102
+ return (jsxRuntime.jsxs("div", { className: cn("relative overflow-hidden w-full max-w-4xl mx-auto aspect-[4/3] rounded-xl shadow-2xl bg-gray-900", className), onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, role: "region", "aria-label": "Carousel imageshowcase", children: [jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, mode: "wait", children: jsxRuntime.jsxs(framerMotion.motion.div, { className: cn("absolute inset-0", slideClassName), variants: (_a = slideVariants[animation]) !== null && _a !== void 0 ? _a : slideVariants.slideLeft, initial: "initial", animate: "animate", exit: "exit", children: [jsxRuntime.jsx("img", { src: items[currentIndex].imageUrl, alt: items[currentIndex].title || `Slide ${currentIndex + 1}`, "aria-label": items[currentIndex].title || `Slide ${currentIndex + 1}`, className: "w-full h-full object-cover", loading: "lazy" }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: jsxRuntime.jsxs(framerMotion.motion.div, { className: cn("absolute bottom-6 left-6 right-6 bg-gradient-to-t from-black/80 to-transparent p-6 rounded-b-xl", captionClassName), variants: (_b = slideVariants[captionAnimation]) !== null && _b !== void 0 ? _b : slideVariants.fade, initial: "initial", animate: "animate", exit: "exit", transition: {
103
103
  delay: captionDelay,
104
104
  duration: 0.7,
105
105
  ease: "easeOut",
106
- }, children: [jsxRuntime.jsx("h3", { className: "text-2xl font-bold text-white drop-shadow-md", children: items[currentIndex].title }), jsxRuntime.jsx("p", { className: "mt-2 text-white/90 text-lg drop-shadow-sm", children: items[currentIndex].description })] }, currentIndex) })] }, currentIndex) }), showArrows && items.length > 1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { onClick: prev, className: cn("absolute left-4 top-1/2 -translate-y-1/2 z-10 w-12 h-12 flex items-center justify-center rounded-full bg-black/50 text-white text-3xl hover:bg-black/70 transition-all duration-200 shadow-lg", arrowClassName), "aria-label": "Previous", children: "\u2039" }), jsxRuntime.jsx("button", { onClick: next, className: cn("absolute right-4 top-1/2 -translate-y-1/2 z-10 w-12 h-12 flex items-center justify-center rounded-full bg-black/50 text-white text-3xl hover:bg-black/70 transition-all duration-200 shadow-lg", arrowClassName), "aria-label": "Next", children: "\u203A" })] })), showPagination && items.length > 1 && (jsxRuntime.jsx("div", { className: cn("absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex gap-3", paginationClassName), children: items.map((_, idx) => (jsxRuntime.jsx("button", { onClick: () => goToIndex(idx), className: cn("w-3 h-3 rounded-full transition-all duration-300 shadow-md", idx === currentIndex
106
+ }, children: [jsxRuntime.jsx("h3", { className: "text-2xl font-bold text-white drop-shadow-md", children: items[currentIndex].title }), jsxRuntime.jsx("p", { className: "mt-2 text-white/90 text-lg drop-shadow-sm", children: items[currentIndex].description })] }, currentIndex) })] }, currentIndex) }), showArrows && items.length > 1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { onClick: prev, className: cn("absolute left-4 top-1/2 -translate-y-1/2 z-10 w-12 h-12 flex items-center justify-center rounded-full bg-black/50 text-white text-3xl hover:bg-black/70 hover:cursor-pointer transition-all duration-200 shadow-lg", arrowClassName), "aria-label": "Previous slide", children: "\u2039" }), jsxRuntime.jsx("button", { onClick: next, className: cn("absolute right-4 top-1/2 -translate-y-1/2 z-10 w-12 h-12 flex items-center justify-center rounded-full bg-black/50 text-white text-3xl hover:bg-black/70 hover:cursor-pointer transition-all duration-200 shadow-lg", arrowClassName), "aria-label": "Next slide", children: "\u203A" })] })), showPagination && items.length > 1 && (jsxRuntime.jsx("div", { className: cn("absolute bottom-2 left-1/2 -translate-x-1/2 z-10 flex gap-3", paginationClassName), children: items.map((_, idx) => (jsxRuntime.jsx("button", { onClick: () => goToIndex(idx), className: cn("w-3 h-3 rounded-full transition-all duration-300 shadow-md hover:cursor-pointer", idx === currentIndex
107
107
  ? "bg-white scale-125 shadow-white/50"
108
108
  : "bg-white/50 hover:bg-white/80", dotClassName), "aria-label": `Go to slide ${idx + 1}` }, idx))) }))] }));
109
109
  }
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../src/lib/animations.ts","../src/lib/utils.ts","../src/Carousel.tsx"],"sourcesContent":["import { Variants } from \"framer-motion\";\r\n\r\nexport const slideVariants: Record<string, Variants> = {\r\n fade: {\r\n initial: { opacity: 0 },\r\n animate: { opacity: 1, transition: { duration: 0.6, ease: \"easeInOut\" } },\r\n exit: { opacity: 0 },\r\n },\r\n fadeIn: {\r\n initial: { opacity: 0 },\r\n animate: { opacity: 1, transition: { duration: 0.6 } },\r\n exit: { opacity: 0 },\r\n },\r\n slideLeft: {\r\n initial: { opacity: 0, x: \"100%\" },\r\n animate: { opacity: 1, x: 0, transition: { duration: 0.5, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, x: \"-100%\" },\r\n },\r\n slideRight: {\r\n initial: { opacity: 0, x: \"-100%\" },\r\n animate: { opacity: 1, x: 0, transition: { duration: 0.5, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, x: \"100%\" },\r\n },\r\n slideTop: {\r\n initial: { opacity: 0, y: \"-100%\" },\r\n animate: { opacity: 1, y: 0, transition: { duration: 0.5, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, y: \"100%\" },\r\n },\r\n slideBottom: {\r\n initial: { opacity: 0, y: \"100%\" },\r\n animate: { opacity: 1, y: 0, transition: { duration: 0.5, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, y: \"-100%\" },\r\n },\r\n bounce: {\r\n initial: { opacity: 0, y: 40, scale: 0.9 },\r\n animate: { opacity: 1, y: 0, scale: 1, transition: { duration: 0.7, ease: [0.68, -0.55, 0.265, 1.55] } }, // bounce fuerte\r\n exit: { opacity: 0, y: -40, scale: 0.9 },\r\n },\r\n zoomIn: {\r\n initial: { opacity: 0, scale: 0.7 },\r\n animate: { opacity: 1, scale: 1, transition: { duration: 0.6, ease: \"easeOut\" } },\r\n exit: { opacity: 0, scale: 0.7 },\r\n },\r\n zoomOut: {\r\n initial: { opacity: 0, scale: 1.3 },\r\n animate: { opacity: 1, scale: 1, transition: { duration: 0.6, ease: \"easeOut\" } },\r\n exit: { opacity: 0, scale: 1.3 },\r\n },\r\n flip: {\r\n initial: { opacity: 0, rotateY: 90 },\r\n animate: { opacity: 1, rotateY: 0, transition: { duration: 0.7, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, rotateY: -90 },\r\n },\r\n};","import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n return twMerge(clsx(inputs));\r\n}","\"use client\";\r\n\r\nimport React, { useState, useEffect, useRef } from \"react\";\r\nimport { motion, AnimatePresence } from \"framer-motion\";\r\nimport { slideVariants } from \"./lib/animations\";\r\nimport { cn } from \"./lib/utils\";\r\n\r\ninterface CarouselItem {\r\n imageUrl: string;\r\n title: string;\r\n description: string;\r\n}\r\n\r\ninterface CarouselProps {\r\n items: CarouselItem[];\r\n autoPlay?: boolean;\r\n autoPlayInterval?: number;\r\n showPagination?: boolean;\r\n showArrows?: boolean;\r\n infiniteLoop?: boolean;\r\n className?: string;\r\n slideClassName?: string;\r\n captionClassName?: string;\r\n arrowClassName?: string;\r\n paginationClassName?: string;\r\n dotClassName?: string;\r\n animation?: keyof typeof slideVariants;\r\n captionAnimation?: keyof typeof slideVariants;\r\n captionDelay?: number;\r\n}\r\n\r\nexport default function Carousel({\r\n items,\r\n autoPlay = false,\r\n autoPlayInterval = 3000,\r\n showPagination = true,\r\n showArrows = true,\r\n infiniteLoop = true,\r\n className,\r\n slideClassName,\r\n captionClassName,\r\n arrowClassName,\r\n paginationClassName,\r\n dotClassName,\r\n animation = \"slideLeft\",\r\n captionAnimation = \"fade\",\r\n captionDelay = 0.5,\r\n}: CarouselProps) {\r\n const [currentIndex, setCurrentIndex] = useState(0);\r\n const touchStartX = useRef(0);\r\n\r\n const goToIndex = (index: number) => {\r\n let newIndex = index;\r\n if (infiniteLoop) {\r\n newIndex = (index + items.length) % items.length;\r\n } else {\r\n newIndex = Math.max(0, Math.min(index, items.length - 1));\r\n }\r\n setCurrentIndex(newIndex);\r\n };\r\n\r\n const next = () => goToIndex(currentIndex + 1);\r\n const prev = () => goToIndex(currentIndex - 1);\r\n\r\n useEffect(() => {\r\n if (!autoPlay) return;\r\n const interval = setInterval(next, autoPlayInterval);\r\n return () => clearInterval(interval);\r\n }, [currentIndex, autoPlay, autoPlayInterval]);\r\n\r\n const handleTouchStart = (e: React.TouchEvent) => {\r\n touchStartX.current = e.touches[0].clientX;\r\n };\r\n\r\n const handleTouchMove = (e: React.TouchEvent) => {\r\n const diff = touchStartX.current - e.touches[0].clientX;\r\n if (Math.abs(diff) > 50) {\r\n if (diff > 0) next();\r\n else prev();\r\n }\r\n };\r\n\r\n if (items.length === 0) return null;\r\n\r\n return (\r\n <div\r\n className={cn(\r\n \"relative overflow-hidden w-full max-w-4xl mx-auto aspect-[4/3] rounded-xl shadow-2xl bg-gray-900\",\r\n className\r\n )}\r\n onTouchStart={handleTouchStart}\r\n onTouchMove={handleTouchMove}\r\n role=\"region\"\r\n aria-label=\"Image carousel\"\r\n >\r\n <AnimatePresence initial={false} mode=\"wait\">\r\n <motion.div\r\n key={currentIndex}\r\n className={cn(\"absolute inset-0\", slideClassName)}\r\n variants={slideVariants[animation] ?? slideVariants.slideLeft}\r\n initial=\"initial\"\r\n animate=\"animate\"\r\n exit=\"exit\"\r\n >\r\n <img\r\n src={items[currentIndex].imageUrl}\r\n alt={items[currentIndex].title || \"Carousel image\"}\r\n className=\"w-full h-full object-cover\"\r\n loading=\"lazy\"\r\n />\r\n <AnimatePresence>\r\n <motion.div\r\n key={currentIndex}\r\n className={cn(\r\n \"absolute bottom-6 left-6 right-6 bg-gradient-to-t from-black/80 to-transparent p-6 rounded-b-xl\",\r\n captionClassName\r\n )}\r\n variants={slideVariants[captionAnimation] ?? slideVariants.fade}\r\n initial=\"initial\"\r\n animate=\"animate\"\r\n exit=\"exit\"\r\n transition={{\r\n delay: captionDelay,\r\n duration: 0.7,\r\n ease: \"easeOut\",\r\n }}\r\n >\r\n <h3 className=\"text-2xl font-bold text-white drop-shadow-md\">\r\n {items[currentIndex].title}\r\n </h3>\r\n <p className=\"mt-2 text-white/90 text-lg drop-shadow-sm\">\r\n {items[currentIndex].description}\r\n </p>\r\n </motion.div>\r\n </AnimatePresence>\r\n </motion.div>\r\n </AnimatePresence>\r\n\r\n {showArrows && items.length > 1 && (\r\n <>\r\n <button\r\n onClick={prev}\r\n className={cn(\r\n \"absolute left-4 top-1/2 -translate-y-1/2 z-10 w-12 h-12 flex items-center justify-center rounded-full bg-black/50 text-white text-3xl hover:bg-black/70 transition-all duration-200 shadow-lg\",\r\n arrowClassName\r\n )}\r\n aria-label=\"Previous\"\r\n >\r\n ‹\r\n </button>\r\n\r\n <button\r\n onClick={next}\r\n className={cn(\r\n \"absolute right-4 top-1/2 -translate-y-1/2 z-10 w-12 h-12 flex items-center justify-center rounded-full bg-black/50 text-white text-3xl hover:bg-black/70 transition-all duration-200 shadow-lg\",\r\n arrowClassName\r\n )}\r\n aria-label=\"Next\"\r\n >\r\n ›\r\n </button>\r\n </>\r\n )}\r\n\r\n {showPagination && items.length > 1 && (\r\n <div\r\n className={cn(\r\n \"absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex gap-3\",\r\n paginationClassName\r\n )}\r\n >\r\n {items.map((_, idx) => (\r\n <button\r\n key={idx}\r\n onClick={() => goToIndex(idx)}\r\n className={cn(\r\n \"w-3 h-3 rounded-full transition-all duration-300 shadow-md\",\r\n idx === currentIndex\r\n ? \"bg-white scale-125 shadow-white/50\"\r\n : \"bg-white/50 hover:bg-white/80\",\r\n dotClassName\r\n )}\r\n aria-label={`Go to slide ${idx + 1}`}\r\n />\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n}\r\n"],"names":["twMerge","clsx","useState","useRef","useEffect","_jsxs","_jsx","AnimatePresence","motion","_Fragment"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../src/lib/animations.ts","../src/lib/utils.ts","../src/Carousel.tsx"],"sourcesContent":["import { Variants } from \"framer-motion\";\r\n\r\nexport const slideVariants: Record<string, Variants> = {\r\n fade: {\r\n initial: { opacity: 0 },\r\n animate: { opacity: 1, transition: { duration: 0.6, ease: \"easeInOut\" } },\r\n exit: { opacity: 0 },\r\n },\r\n fadeIn: {\r\n initial: { opacity: 0 },\r\n animate: { opacity: 1, transition: { duration: 0.6 } },\r\n exit: { opacity: 0 },\r\n },\r\n slideLeft: {\r\n initial: { opacity: 0, x: \"100%\" },\r\n animate: { opacity: 1, x: 0, transition: { duration: 0.5, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, x: \"-100%\" },\r\n },\r\n slideRight: {\r\n initial: { opacity: 0, x: \"-100%\" },\r\n animate: { opacity: 1, x: 0, transition: { duration: 0.5, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, x: \"100%\" },\r\n },\r\n slideTop: {\r\n initial: { opacity: 0, y: \"-100%\" },\r\n animate: { opacity: 1, y: 0, transition: { duration: 0.5, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, y: \"100%\" },\r\n },\r\n slideBottom: {\r\n initial: { opacity: 0, y: \"100%\" },\r\n animate: { opacity: 1, y: 0, transition: { duration: 0.5, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, y: \"-100%\" },\r\n },\r\n bounce: {\r\n initial: { opacity: 0, y: 40, scale: 0.9 },\r\n animate: { opacity: 1, y: 0, scale: 1, transition: { duration: 0.7, ease: [0.68, -0.55, 0.265, 1.55] } }, // bounce fuerte\r\n exit: { opacity: 0, y: -40, scale: 0.9 },\r\n },\r\n zoomIn: {\r\n initial: { opacity: 0, scale: 0.7 },\r\n animate: { opacity: 1, scale: 1, transition: { duration: 0.6, ease: \"easeOut\" } },\r\n exit: { opacity: 0, scale: 0.7 },\r\n },\r\n zoomOut: {\r\n initial: { opacity: 0, scale: 1.3 },\r\n animate: { opacity: 1, scale: 1, transition: { duration: 0.6, ease: \"easeOut\" } },\r\n exit: { opacity: 0, scale: 1.3 },\r\n },\r\n flip: {\r\n initial: { opacity: 0, rotateY: 90 },\r\n animate: { opacity: 1, rotateY: 0, transition: { duration: 0.7, ease: \"easeInOut\" } },\r\n exit: { opacity: 0, rotateY: -90 },\r\n },\r\n};","import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n return twMerge(clsx(inputs));\r\n}","\"use client\";\r\n\r\nimport React, { useState, useEffect, useRef } from \"react\";\r\nimport { motion, AnimatePresence } from \"framer-motion\";\r\nimport { slideVariants } from \"./lib/animations\";\r\nimport { cn } from \"./lib/utils\";\r\n\r\ninterface CarouselItem {\r\n imageUrl: string;\r\n title: string;\r\n description: string;\r\n}\r\n\r\ninterface CarouselProps {\r\n items: CarouselItem[];\r\n autoPlay?: boolean;\r\n autoPlayInterval?: number;\r\n showPagination?: boolean;\r\n showArrows?: boolean;\r\n infiniteLoop?: boolean;\r\n className?: string;\r\n slideClassName?: string;\r\n captionClassName?: string;\r\n arrowClassName?: string;\r\n paginationClassName?: string;\r\n dotClassName?: string;\r\n animation?: keyof typeof slideVariants;\r\n captionAnimation?: keyof typeof slideVariants;\r\n captionDelay?: number;\r\n}\r\n\r\nexport default function Carousel({\r\n items,\r\n autoPlay = false,\r\n autoPlayInterval = 3000,\r\n showPagination = true,\r\n showArrows = true,\r\n infiniteLoop = true,\r\n className,\r\n slideClassName,\r\n captionClassName,\r\n arrowClassName,\r\n paginationClassName,\r\n dotClassName,\r\n animation = \"slideLeft\",\r\n captionAnimation = \"fade\",\r\n captionDelay = 0.5,\r\n}: CarouselProps) {\r\n const [currentIndex, setCurrentIndex] = useState(0);\r\n const touchStartX = useRef(0);\r\n\r\n const goToIndex = (index: number) => {\r\n let newIndex = index;\r\n if (infiniteLoop) {\r\n newIndex = (index + items.length) % items.length;\r\n } else {\r\n newIndex = Math.max(0, Math.min(index, items.length - 1));\r\n }\r\n setCurrentIndex(newIndex);\r\n };\r\n\r\n const next = () => goToIndex(currentIndex + 1);\r\n const prev = () => goToIndex(currentIndex - 1);\r\n\r\n useEffect(() => {\r\n if (!autoPlay) return;\r\n const interval = setInterval(next, autoPlayInterval);\r\n return () => clearInterval(interval);\r\n }, [currentIndex, autoPlay, autoPlayInterval]);\r\n\r\n const handleTouchStart = (e: React.TouchEvent) => {\r\n touchStartX.current = e.touches[0].clientX;\r\n };\r\n\r\n const handleTouchMove = (e: React.TouchEvent) => {\r\n const diff = touchStartX.current - e.touches[0].clientX;\r\n if (Math.abs(diff) > 50) {\r\n if (diff > 0) next();\r\n else prev();\r\n }\r\n };\r\n\r\n if (items.length === 0) return null;\r\n\r\n return (\r\n <div\r\n className={cn(\r\n \"relative overflow-hidden w-full max-w-4xl mx-auto aspect-[4/3] rounded-xl shadow-2xl bg-gray-900\",\r\n className\r\n )}\r\n onTouchStart={handleTouchStart}\r\n onTouchMove={handleTouchMove}\r\n role=\"region\"\r\n aria-label=\"Carousel imageshowcase\"\r\n >\r\n <AnimatePresence initial={false} mode=\"wait\">\r\n <motion.div\r\n key={currentIndex}\r\n className={cn(\"absolute inset-0\", slideClassName)}\r\n variants={slideVariants[animation] ?? slideVariants.slideLeft}\r\n initial=\"initial\"\r\n animate=\"animate\"\r\n exit=\"exit\"\r\n >\r\n <img\r\n src={items[currentIndex].imageUrl}\r\n alt={items[currentIndex].title || `Slide ${currentIndex + 1}`}\r\n aria-label={items[currentIndex].title || `Slide ${currentIndex + 1}`}\r\n className=\"w-full h-full object-cover\"\r\n loading=\"lazy\"\r\n />\r\n <AnimatePresence>\r\n <motion.div\r\n key={currentIndex}\r\n className={cn(\r\n \"absolute bottom-6 left-6 right-6 bg-gradient-to-t from-black/80 to-transparent p-6 rounded-b-xl\",\r\n captionClassName\r\n )}\r\n variants={slideVariants[captionAnimation] ?? slideVariants.fade}\r\n initial=\"initial\"\r\n animate=\"animate\"\r\n exit=\"exit\"\r\n transition={{\r\n delay: captionDelay,\r\n duration: 0.7,\r\n ease: \"easeOut\",\r\n }}\r\n >\r\n <h3 className=\"text-2xl font-bold text-white drop-shadow-md\">\r\n {items[currentIndex].title}\r\n </h3>\r\n <p className=\"mt-2 text-white/90 text-lg drop-shadow-sm\">\r\n {items[currentIndex].description}\r\n </p>\r\n </motion.div>\r\n </AnimatePresence>\r\n </motion.div>\r\n </AnimatePresence>\r\n\r\n {showArrows && items.length > 1 && (\r\n <>\r\n <button\r\n onClick={prev}\r\n className={cn(\r\n \"absolute left-4 top-1/2 -translate-y-1/2 z-10 w-12 h-12 flex items-center justify-center rounded-full bg-black/50 text-white text-3xl hover:bg-black/70 hover:cursor-pointer transition-all duration-200 shadow-lg\",\r\n arrowClassName\r\n )}\r\n aria-label=\"Previous slide\"\r\n >\r\n ‹\r\n </button>\r\n\r\n <button\r\n onClick={next}\r\n className={cn(\r\n \"absolute right-4 top-1/2 -translate-y-1/2 z-10 w-12 h-12 flex items-center justify-center rounded-full bg-black/50 text-white text-3xl hover:bg-black/70 hover:cursor-pointer transition-all duration-200 shadow-lg\",\r\n arrowClassName\r\n )}\r\n aria-label=\"Next slide\"\r\n >\r\n ›\r\n </button>\r\n </>\r\n )}\r\n\r\n {showPagination && items.length > 1 && (\r\n <div\r\n className={cn(\r\n \"absolute bottom-2 left-1/2 -translate-x-1/2 z-10 flex gap-3\",\r\n paginationClassName\r\n )}\r\n >\r\n {items.map((_, idx) => (\r\n <button\r\n key={idx}\r\n onClick={() => goToIndex(idx)}\r\n className={cn(\r\n \"w-3 h-3 rounded-full transition-all duration-300 shadow-md hover:cursor-pointer\",\r\n idx === currentIndex\r\n ? \"bg-white scale-125 shadow-white/50\"\r\n : \"bg-white/50 hover:bg-white/80\",\r\n dotClassName\r\n )}\r\n aria-label={`Go to slide ${idx + 1}`}\r\n />\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n}\r\n"],"names":["twMerge","clsx","useState","useRef","useEffect","_jsxs","_jsx","AnimatePresence","motion","_Fragment"],"mappings":"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"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "nexlide",
3
3
  "description": "Nexlide is a modern, lightweight, and fully customizable React carousel component built with Framer Motion for smooth animations and Tailwind CSS for flexible styling.",
4
- "version": "1.0.1",
4
+ "version": "1.0.4",
5
5
  "author": "Nexlide Team",
6
6
  "license": "MIT",
7
7
  "private": false,
@@ -36,28 +36,28 @@
36
36
  "access": "public"
37
37
  },
38
38
  "peerDependencies": {
39
- "class-variance-authority": "^0.7.0",
40
- "clsx": "^2.1.0",
41
- "framer-motion": "^11.0.0 || ^12.0.0",
42
- "react": "^18.0.0 || ^19.0.0-rc",
43
- "react-dom": "^18.0.0 || ^19.0.0-rc",
44
- "tailwind-merge": "^2.0.0"
39
+ "class-variance-authority": "^0.7.1",
40
+ "clsx": "^2.1.1",
41
+ "framer-motion": "^12.35.0",
42
+ "react": "^19.2.4",
43
+ "react-dom": "^19.2.4",
44
+ "tailwind-merge": "^3.5.0"
45
45
  },
46
46
  "dependencies": {
47
- "class-variance-authority": "^0.7.0",
48
- "clsx": "^2.1.0",
49
- "framer-motion": "^11.0.0 || ^12.0.0",
50
- "tailwind-merge": "^2.0.0"
47
+ "class-variance-authority": "^0.7.1",
48
+ "clsx": "^2.1.1",
49
+ "framer-motion": "^12.35.0",
50
+ "tailwind-merge": "^3.5.0"
51
51
  },
52
52
  "devDependencies": {
53
- "@rollup/plugin-commonjs": "^28.0.0",
54
- "@rollup/plugin-node-resolve": "^15.3.0",
55
- "@rollup/plugin-typescript": "^12.1.0",
56
- "@types/react": "^18.3.11",
57
- "@types/react-dom": "^18.3.1",
58
- "rollup": "^4.24.0",
53
+ "@rollup/plugin-commonjs": "^29.0.1",
54
+ "@rollup/plugin-node-resolve": "^16.0.3",
55
+ "@rollup/plugin-typescript": "^12.3.0",
56
+ "@types/react": "^19.2.14",
57
+ "@types/react-dom": "^19.2.3",
58
+ "rollup": "^4.59.0",
59
59
  "rollup-plugin-peer-deps-external": "^2.2.4",
60
- "tslib": "^2.7.0",
61
- "typescript": "^5.6.3"
60
+ "tslib": "^2.8.1",
61
+ "typescript": "^5.9.3"
62
62
  }
63
63
  }