awesome-ring-carousel 0.1.0 → 0.1.2

package/README.md

@@ -4,14 +4,14 @@ A beautiful, interactive 3D ring carousel component for React with smooth animat
 
 ## Features
 
-✨ **3D Ring Carousel** - Visually stunning 3D perspective effects
-🎨 **4 Built-in Themes** - Dark, Light, Neon, and Glass themes
-⌨️ **Multiple Control Methods** - Mouse drag, keyboard arrows, touch & programmatic
-🎯 **Auto-Rotate** - Automatic carousel rotation with customizable speed
-📱 **Responsive** - Works seamlessly on different screen sizes
-⚡ **Smooth Physics** - Realistic inertia and friction animations
-✨ **Glow Effects** - Beautiful focus glow for the active item
-🔧 **Highly Customizable** - Full control over speed, friction, perspective, and more
+- **3D Ring Carousel** - Visually stunning 3D perspective effects
+- **4 Built-in Themes** - Dark, Light, Neon, and Glass themes
+- **Multiple Control Methods** - Mouse drag, keyboard arrows, touch & programmatic
+- **Auto-Rotate** - Automatic carousel rotation with customizable speed
+- **Responsive** - Works seamlessly on different screen sizes
+- **Smooth Physics** - Realistic inertia and friction animations
+- **Glow Effects** - Beautiful focus glow for the active item
+- **Highly Customizable** - Full control over speed, friction, perspective, and more
 
 ## Installation
 
@@ -42,31 +42,53 @@ const slides = [
   { title: 'Slide 2', description: 'Second slide', image: 'url2.jpg' },
 ];
 
-export default function App() {
-  return (
-    <div style={{ width: '100%', height: '100vh' }}>
-      <AwesomeRingCarousel data={slides} />
-    </div>
-  );
-}
-```
+export default function App() {
+  return (
+    <div
+      style={{
+        minHeight: '100vh',
+        padding: '48px 20px 64px',
+        background:
+          'radial-gradient(70% 50% at 50% 35%, rgba(0,245,255,0.18) 0%, rgba(0,0,0,0) 60%), linear-gradient(180deg, #05070f 0%, #060b1a 55%, #070b12 100%)',
+        color: '#e6f0ff',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '18px',
+      }}
+    >
+      <h1 style={{ margin: 0, fontSize: 'clamp(28px, 5vw, 56px)', letterSpacing: '-0.02em' }}>
+        Explore the Universe of <span style={{ color: '#00f5ff' }}>Possibilities</span>
+      </h1>
+      <p style={{ margin: 0, opacity: 0.7 }}>
+        Explore the full spectrum of products by clicking on any card
+      </p>
+
+      <div style={{ width: '100%', maxWidth: 980, height: '60vh', minHeight: 420 }}>
+        <AwesomeRingCarousel data={slides} theme="dark" />
+      </div>
+    </div>
+  );
+}
+```
 
 ## Data Format
 
 Each item in the carousel requires the following structure:
 
-```js
-const slide = {
-  title: 'Slide 1',            // Required: Title displayed on the card
-  description: 'First slide',  // Optional: Subtitle or description
-  image: 'url1.jpg',           // Optional: Image URL
-  tag: 'Featured',             // Optional: Tag label
-  color: '#ff6b6b',            // Optional: Background color (hex)
-  onClick: () => {},           // Optional: Click handler
-};
-```
-
-For TypeScript users, this object shape maps directly to the `SlideData` type exported by the package.
+```js
+const slide = {
+  title: 'Slide 1',            // Required: Title displayed on the card
+  description: 'First slide',  // Optional: Subtitle or description
+  image: 'url1.jpg',           // Optional: Image URL
+  tag: 'Featured',             // Optional: Tag label
+  color: '#ff6b6b',            // Optional: Background color (hex)
+  onClick: () => {},           // Optional: Click handler
+};
+```
+
+For TypeScript users, this object shape maps directly to the `SlideData` type exported by the package.
 
 ## Component Props
 
@@ -119,11 +141,11 @@ Frosted glass effect with semi-transparent cards. Modern and elegant for premium
 Use hardcoded data directly in your component:
 
 ```jsx
-import { AwesomeRingCarousel } from 'awesome-ring-carousel';
-import 'awesome-ring-carousel/dist/style.css';
-
-export default function StaticDataExample() {
-  const staticSlides = [
+import { AwesomeRingCarousel } from 'awesome-ring-carousel';
+import 'awesome-ring-carousel/dist/style.css';
+
+export default function StaticDataExample() {
+  const staticSlides = [
     {
       title: 'Product A',
       description: 'Premium quality product',
@@ -174,14 +196,14 @@ export default function StaticDataExample() {
 Load carousel data from a JSON file:
 
 ```jsx
-import { useEffect, useState } from 'react';
-import { AwesomeRingCarousel } from 'awesome-ring-carousel';
-import 'awesome-ring-carousel/dist/style.css';
-
-export default function JSONDataExample() {
-  const [slides, setSlides] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
+import { useEffect, useState } from 'react';
+import { AwesomeRingCarousel } from 'awesome-ring-carousel';
+import 'awesome-ring-carousel/dist/style.css';
+
+export default function JSONDataExample() {
+  const [slides, setSlides] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
 
   useEffect(() => {
     // Load slides from JSON file in public folder
@@ -190,10 +212,10 @@ export default function JSONDataExample() {
         if (!response.ok) throw new Error('Failed to load data');
         return response.json();
       })
-      .then((data) => {
-        setSlides(data);
-        setLoading(false);
-      })
+      .then((data) => {
+        setSlides(data);
+        setLoading(false);
+      })
       .catch((err) => {
         setError(err.message);
         setLoading(false);
@@ -260,15 +282,15 @@ export default function JSONDataExample() {
 Fetch carousel data from a REST API:
 
 ```jsx
-import { useEffect, useState } from 'react';
-import { AwesomeRingCarousel } from 'awesome-ring-carousel';
-import 'awesome-ring-carousel/dist/style.css';
-
-export default function RESTAPIExample() {
-  const [slides, setSlides] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-  const [focusedItem, setFocusedItem] = useState(null);
+import { useEffect, useState } from 'react';
+import { AwesomeRingCarousel } from 'awesome-ring-carousel';
+import 'awesome-ring-carousel/dist/style.css';
+
+export default function RESTAPIExample() {
+  const [slides, setSlides] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [focusedItem, setFocusedItem] = useState(null);
 
   useEffect(() => {
     // Fetch from a REST API endpoint
@@ -279,10 +301,10 @@ export default function RESTAPIExample() {
       })
       .then((data) => {
         // Transform API response to match SlideData format
-        const transformedData = data.map((item) => ({
-          title: item.name || item.title,
-          description: item.summary || item.description,
-          image: item.thumbnail || item.image,
+        const transformedData = data.map((item) => ({
+          title: item.name || item.title,
+          description: item.summary || item.description,
+          image: item.thumbnail || item.image,
           tag: item.category || item.type,
           color: item.accentColor,
           onClick: () => console.log(`Clicked: ${item.id}`)
@@ -296,10 +318,10 @@ export default function RESTAPIExample() {
       });
   }, []);
 
-  const handleFocusChange = (index) => {
-    setFocusedItem(slides[index] || null);
-    console.log(`Focused on: ${slides[index]?.title}`);
-  };
+  const handleFocusChange = (index) => {
+    setFocusedItem(slides[index] || null);
+    console.log(`Focused on: ${slides[index]?.title}`);
+  };
 
   if (loading) {
     return (
@@ -398,18 +420,18 @@ export default function CustomizedCarousel() {
 ### Controlled Carousel with External Controls
 
 ```jsx
-import { useRef, useState } from 'react';
-import { AwesomeRingCarousel } from 'awesome-ring-carousel';
-import 'awesome-ring-carousel/dist/style.css';
-
-export default function ControlledCarousel() {
-  const carouselRef = useRef(null);
-  const [focusedIndex, setFocusedIndex] = useState(0);
-
-  const slides = [
-    { title: 'Slide 1', description: 'First', image: 'url1.jpg' },
-    { title: 'Slide 2', description: 'Second', image: 'url2.jpg' },
-    { title: 'Slide 3', description: 'Third', image: 'url3.jpg' },
+import { useRef, useState } from 'react';
+import { AwesomeRingCarousel } from 'awesome-ring-carousel';
+import 'awesome-ring-carousel/dist/style.css';
+
+export default function ControlledCarousel() {
+  const carouselRef = useRef(null);
+  const [focusedIndex, setFocusedIndex] = useState(0);
+
+  const slides = [
+    { title: 'Slide 1', description: 'First', image: 'url1.jpg' },
+    { title: 'Slide 2', description: 'Second', image: 'url2.jpg' },
+    { title: 'Slide 3', description: 'Third', image: 'url3.jpg' },
   ];
 
   return (
@@ -552,4 +574,4 @@ Custom CSS class applied to the carousel container for additional customization.
 ### Performance issues on mobile
 - Reduce the number of images or use smaller dimensions
 - Set `autoRotate={false}` if performance is critical
-- Use optimized/compressed images
+- Use optimized/compressed images

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "awesome-ring-carousel",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "A beautiful, interactive 3D ring carousel component for React with smooth animations, multiple themes, and flexible data handling",
   "type": "module",
   "main": "dist/index.js",
-  "module": "dist/index.es.js",
+  "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist"
@@ -12,8 +12,8 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
     },
     "./dist/style.css": "./dist/style.css"
   },