awesome-ring-carousel 0.1.0

package/LICENSE

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

package/LICENSE.txt

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

package/README.md

@@ -0,0 +1,555 @@
+# AwesomeRingCarousel
+
+A beautiful, interactive 3D ring carousel component for React with smooth animations, multiple themes, and flexible data handling. Perfect for showcasing products, portfolios, or any collection of items in an eye-catching carousel format.
+
+## 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
+
+## Installation
+
+```bash
+npm install awesome-ring-carousel
+```
+
+Or with pnpm:
+
+```bash
+pnpm add awesome-ring-carousel
+```
+
+Or with yarn:
+
+```bash
+yarn add awesome-ring-carousel
+```
+
+## Quick Start
+
+```jsx
+import { AwesomeRingCarousel } from 'awesome-ring-carousel';
+import 'awesome-ring-carousel/dist/style.css';
+
+const slides = [
+  { title: 'Slide 1', description: 'First slide', image: 'url1.jpg' },
+  { title: 'Slide 2', description: 'Second slide', image: 'url2.jpg' },
+];
+
+export default function App() {
+  return (
+    <div style={{ width: '100%', height: '100vh' }}>
+      <AwesomeRingCarousel data={slides} />
+    </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.
+
+## Component Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `data` | `SlideData[]` | **Required** | Array of slide objects to display in the carousel |
+| `autoRotate` | `boolean` | `true` | Enable automatic carousel rotation |
+| `rotationSpeed` | `number` | `2800` | Time in milliseconds between auto-rotations |
+| `friction` | `number` | `0.88` | Friction coefficient for inertia animations (0-1). Higher = more damping |
+| `focusGlow` | `boolean` | `true` | Enable glow effect on the focused card |
+| `theme` | `'dark' \| 'light' \| 'neon' \| 'glass'` | `'dark'` | Visual theme for the carousel |
+| `perspective` | `number` | `1100` | 3D perspective depth in pixels |
+| `onFocusChange` | `(index: number) => void` | `undefined` | Callback fired when the focused item changes |
+| `className` | `string` | `undefined` | Custom CSS class for the carousel container |
+
+## Available Themes
+
+### Dark Theme
+Modern dark theme with cyan accents. Perfect for tech products and modern designs.
+
+```jsx
+<AwesomeRingCarousel data={slides} theme="dark" />
+```
+
+### Light Theme
+Clean light theme with violet accents. Great for portfolios and creative showcases.
+
+```jsx
+<AwesomeRingCarousel data={slides} theme="light" />
+```
+
+### Neon Theme
+Vibrant neon magenta and cyan theme. Bold and eye-catching for entertainment and gaming.
+
+```jsx
+<AwesomeRingCarousel data={slides} theme="neon" />
+```
+
+### Glass Theme
+Frosted glass effect with semi-transparent cards. Modern and elegant for premium brands.
+
+```jsx
+<AwesomeRingCarousel data={slides} theme="glass" />
+```
+
+## Usage Examples
+
+### Example 1: Static Data Source
+
+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 = [
+    {
+      title: 'Product A',
+      description: 'Premium quality product',
+      image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=500&h=300&fit=crop',
+      tag: 'Featured',
+      onClick: () => console.log('Product A clicked')
+    },
+    {
+      title: 'Product B',
+      description: 'Best seller item',
+      image: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=500&h=300&fit=crop',
+      tag: 'Sale',
+      onClick: () => console.log('Product B clicked')
+    },
+    {
+      title: 'Product C',
+      description: 'New arrival',
+      image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=500&h=300&fit=crop',
+      tag: 'New',
+      onClick: () => console.log('Product C clicked')
+    },
+    {
+      title: 'Product D',
+      description: 'Limited edition',
+      image: 'https://images.unsplash.com/photo-1517457373614-b7152f800fd1?w=500&h=300&fit=crop',
+      tag: 'Limited',
+      onClick: () => console.log('Product D clicked')
+    },
+  ];
+
+  return (
+    <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
+      <h1 style={{ textAlign: 'center', padding: '20px' }}>Static Data Example</h1>
+      <div style={{ flex: 1 }}>
+        <AwesomeRingCarousel
+          data={staticSlides}
+          theme="dark"
+          onFocusChange={(index) => console.log('Focused item:', index)}
+        />
+      </div>
+    </div>
+  );
+}
+```
+
+### Example 2: JSON File Data Source
+
+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);
+
+  useEffect(() => {
+    // Load slides from JSON file in public folder
+    fetch('/carousel-data.json')
+      .then((response) => {
+        if (!response.ok) throw new Error('Failed to load data');
+        return response.json();
+      })
+      .then((data) => {
+        setSlides(data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError(err.message);
+        setLoading(false);
+      });
+  }, []);
+
+  if (loading) return <div style={{ textAlign: 'center', padding: '20px' }}>Loading...</div>;
+  if (error) return <div style={{ textAlign: 'center', padding: '20px', color: 'red' }}>Error: {error}</div>;
+
+  return (
+    <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
+      <h1 style={{ textAlign: 'center', padding: '20px' }}>JSON File Data Example</h1>
+      <div style={{ flex: 1 }}>
+        <AwesomeRingCarousel
+          data={slides}
+          theme="light"
+          autoRotate={true}
+          rotationSpeed={3000}
+          onFocusChange={(index) => console.log('Focused item:', index)}
+        />
+      </div>
+    </div>
+  );
+}
+```
+
+**Sample `carousel-data.json` (place in `public` folder):**
+
+```json
+[
+  {
+    "title": "Portfolio Project 1",
+    "description": "Award-winning design system",
+    "image": "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=500&h=300&fit=crop",
+    "tag": "Design",
+    "color": "#1e3a8a"
+  },
+  {
+    "title": "Portfolio Project 2",
+    "description": "Enterprise web application",
+    "image": "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=500&h=300&fit=crop",
+    "tag": "Development",
+    "color": "#064e3b"
+  },
+  {
+    "title": "Portfolio Project 3",
+    "description": "Mobile app with 10M+ downloads",
+    "image": "https://images.unsplash.com/photo-1560807707-38cc612d91b3?w=500&h=300&fit=crop",
+    "tag": "Mobile",
+    "color": "#5b1f39"
+  },
+  {
+    "title": "Portfolio Project 4",
+    "description": "Real-time data visualization",
+    "image": "https://images.unsplash.com/photo-1516321295223-4f2d3f2cf1e1?w=500&h=300&fit=crop",
+    "tag": "Analytics",
+    "color": "#78350f"
+  }
+]
+```
+
+### Example 3: REST API Data Source
+
+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);
+
+  useEffect(() => {
+    // Fetch from a REST API endpoint
+    fetch('https://api.example.com/carousel-items')
+      .then((response) => {
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+        return response.json();
+      })
+      .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,
+          tag: item.category || item.type,
+          color: item.accentColor,
+          onClick: () => console.log(`Clicked: ${item.id}`)
+        }));
+        setSlides(transformedData);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError(err.message);
+        setLoading(false);
+      });
+  }, []);
+
+  const handleFocusChange = (index) => {
+    setFocusedItem(slides[index] || null);
+    console.log(`Focused on: ${slides[index]?.title}`);
+  };
+
+  if (loading) {
+    return (
+      <div style={{ textAlign: 'center', padding: '20px', color: '#999' }}>
+        Loading carousel data...
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div style={{ textAlign: 'center', padding: '20px', color: 'red' }}>
+        Error loading data: {error}
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
+      <h1 style={{ textAlign: 'center', padding: '20px' }}>REST API Data Example</h1>
+      
+      {focusedItem && (
+        <div style={{
+          textAlign: 'center',
+          padding: '10px 20px',
+          backgroundColor: 'rgba(0, 245, 255, 0.1)',
+          borderBottom: '1px solid rgba(0, 245, 255, 0.2)',
+        }}>
+          <p>Currently viewing: <strong>{focusedItem.title}</strong></p>
+          {focusedItem.description && <p style={{ fontSize: '0.9em', color: '#aaa' }}>{focusedItem.description}</p>}
+        </div>
+      )}
+
+      <div style={{ flex: 1 }}>
+        <AwesomeRingCarousel
+          data={slides}
+          theme="neon"
+          autoRotate={false}
+          friction={0.85}
+          perspective={1200}
+          focusGlow={true}
+          onFocusChange={handleFocusChange}
+        />
+      </div>
+
+      <div style={{
+        textAlign: 'center',
+        padding: '15px',
+        fontSize: '0.85em',
+        color: '#888',
+        borderTop: '1px solid rgba(255, 255, 255, 0.1)',
+      }}>
+        Use arrow keys or drag to navigate • Current count: {slides.length} items
+      </div>
+    </div>
+  );
+}
+```
+
+## Customization Examples
+
+### Custom Styling with Themes
+
+```jsx
+import { AwesomeRingCarousel } from 'awesome-ring-carousel';
+import 'awesome-ring-carousel/dist/style.css';
+
+export default function CustomizedCarousel() {
+  const carouselContainer = {
+    width: '100%',
+    height: '100vh',
+    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+  };
+
+  const slides = [/* your slides */];
+
+  return (
+    <div style={carouselContainer}>
+      <AwesomeRingCarousel
+        data={slides}
+        theme="glass"
+        autoRotate={true}
+        rotationSpeed={3500}
+        friction={0.90}
+        perspective={1300}
+        focusGlow={true}
+        onFocusChange={(index) => {
+          // Custom handler
+        }}
+      />
+    </div>
+  );
+}
+```
+
+### 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' },
+  ];
+
+  return (
+    <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
+      <div style={{ flex: 1 }}>
+        <AwesomeRingCarousel
+          ref={carouselRef}
+          data={slides}
+          theme="dark"
+          onFocusChange={setFocusedIndex}
+        />
+      </div>
+
+      <div style={{ display: 'flex', gap: '10px', justifyContent: 'center', padding: '20px' }}>
+        <button onClick={() => {/* prev */}}>← Previous</button>
+        <span>{focusedIndex + 1} / {slides.length}</span>
+        <button onClick={() => {/* next */}}>Next →</button>
+      </div>
+    </div>
+  );
+}
+```
+
+## Interaction Methods
+
+### Mouse Interactions
+- **Drag**: Click and drag left/right to rotate the carousel
+- **Click**: Click on a side item to bring it to center
+
+### Keyboard Interactions
+- **Arrow Left**: Rotate to previous item
+- **Arrow Right**: Rotate to next item
+
+### Mouse Events
+- **Hover**: Pauses auto-rotation when hovering over the carousel
+- **Leave**: Resumes auto-rotation when mouse leaves
+
+## Performance Tips
+
+1. **Optimize Images**: Use optimized image URLs for better performance
+2. **Lazy Loading**: Load large datasets progressively
+3. **Memoize Callbacks**: Use `useCallback` for `onFocusChange` handlers
+4. **Responsive Container**: Set appropriate dimensions for different screen sizes
+
+```jsx
+// Example with responsive sizing
+<div style={{
+  width: '100%',
+  height: window.innerWidth < 768 ? '60vh' : '100vh'
+}}>
+  <AwesomeRingCarousel data={slides} />
+</div>
+```
+
+## Styling
+
+The component comes with built-in styles. Import the CSS file:
+
+```jsx
+import 'awesome-ring-carousel/dist/style.css';
+```
+
+All theme colors and styles are defined in the included CSS. You can override default styles with custom CSS classes:
+
+```css
+/* Override carousel styles */
+.custom-carousel {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+```
+
+```jsx
+<AwesomeRingCarousel
+  data={slides}
+  className="custom-carousel"
+/>
+```
+
+## Browser Support
+
+- Chrome/Edge (latest)
+- Firefox (latest)
+- Safari (latest)
+- Mobile browsers (iOS Safari, Chrome Mobile)
+
+## API Reference
+
+### Component Props (Detailed)
+
+#### `data: SlideData[]` (Required)
+Array of slide objects. Each object must have at least a `title` property. See [Data Format](#data-format) above.
+
+#### `autoRotate: boolean` (Default: `true`)
+When enabled, the carousel automatically rotates to the next item after `rotationSpeed` milliseconds.
+
+#### `rotationSpeed: number` (Default: `2800`)
+Time in milliseconds between auto-rotations. Only applies if `autoRotate` is `true`.
+
+#### `friction: number` (Default: `0.88`)
+Controls how quickly animations decelerate. Range: 0-1
+- `0.8` - More responsive, snappier animations
+- `0.88` - Default, balanced feel
+- `0.95` - Slower, smoother animations
+
+#### `focusGlow: boolean` (Default: `true`)
+Displays a glowing effect around the currently focused card. The glow color matches the selected theme.
+
+#### `theme: 'dark' | 'light' | 'neon' | 'glass'` (Default: `'dark'`)
+Selects the visual appearance of the carousel. See [Available Themes](#available-themes).
+
+#### `perspective: number` (Default: `1100`)
+Controls the 3D perspective depth in pixels. Higher values create less dramatic 3D effects.
+- `800` - Strong 3D effect, cards spread wider
+- `1100` - Default, balanced 3D
+- `1500` - Subtle 3D, cards closer together
+
+#### `onFocusChange: (index: number) => void`
+Callback function fired whenever the focused item changes. Receives the index of the newly focused item.
+
+#### `className: string`
+Custom CSS class applied to the carousel container for additional customization.
+
+## Troubleshooting
+
+### Carousel not rotating
+- Check that `autoRotate` is set to `true`
+- Verify `rotationSpeed` is not too high (should be in milliseconds)
+- Ensure the data array has at least 2 items
+
+### Images not displaying
+- Verify image URLs are accessible and correct
+- Check browser console for CORS errors
+- Use absolute URLs for remote images
+
+### 3D effects not visible
+- Ensure CSS is imported: `import 'awesome-ring-carousel/dist/style.css'`
+- Check that `perspective` prop is not set too high
+- Verify browser supports 3D transforms (all modern browsers)
+
+### Performance issues on mobile
+- Reduce the number of images or use smaller dimensions
+- Set `autoRotate={false}` if performance is critical
+- Use optimized/compressed images

package/dist/carousel-data.json

@@ -0,0 +1,37 @@
+[
+  {
+    "title": "Portfolio Project 1",
+    "description": "Award-winning design system",
+    "image": "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=500&h=300&fit=crop",
+    "tag": "Design",
+    "color": "#1e3a8a"
+  },
+  {
+    "title": "Portfolio Project 2",
+    "description": "Enterprise web application",
+    "image": "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=500&h=300&fit=crop",
+    "tag": "Development",
+    "color": "#064e3b"
+  },
+  {
+    "title": "Portfolio Project 3",
+    "description": "Mobile app with 10M+ downloads",
+    "image": "https://images.unsplash.com/photo-1560807707-38cc612d91b3?w=500&h=300&fit=crop",
+    "tag": "Mobile",
+    "color": "#5b1f39"
+  },
+  {
+    "title": "Portfolio Project 4",
+    "description": "Real-time data visualization",
+    "image": "https://images.unsplash.com/photo-1516321295223-4f2d3f2cf1e1?w=500&h=300&fit=crop",
+    "tag": "Analytics",
+    "color": "#78350f"
+  },
+  {
+    "title": "E-Commerce Platform",
+    "description": "Full-stack shopping experience",
+    "image": "https://images.unsplash.com/photo-1460925895917-adf4e565e6c1?w=500&h=300&fit=crop",
+    "tag": "Commerce",
+    "color": "#4c0519"
+  }
+]

package/dist/index.js

@@ -0,0 +1,310 @@
+import { jsx as c, jsxs as w } from "react/jsx-runtime";
+import { useRef as d, useState as tt, useCallback as v, useEffect as z, useMemo as rt } from "react";
+const et = {
+  name: "dark",
+  background: "transparent",
+  cardBg: "rgba(10, 15, 30, 0.85)",
+  cardBorder: "rgba(0, 245, 255, 0.2)",
+  cardText: "#f1f5f9",
+  cardSubtext: "#94a3b8",
+  focusGlow: "0 0 40px rgba(0, 245, 255, 0.5), 0 0 80px rgba(0, 245, 255, 0.2)",
+  navBg: "rgba(0, 245, 255, 0.1)",
+  navText: "#00f5ff",
+  indicatorActive: "#00f5ff",
+  indicatorInactive: "rgba(0, 245, 255, 0.25)"
+}, nt = {
+  name: "light",
+  background: "transparent",
+  cardBg: "rgba(255, 255, 255, 0.92)",
+  cardBorder: "rgba(124, 58, 237, 0.25)",
+  cardText: "#1e293b",
+  cardSubtext: "#64748b",
+  focusGlow: "0 0 40px rgba(124, 58, 237, 0.35), 0 8px 32px rgba(0,0,0,0.15)",
+  navBg: "rgba(124, 58, 237, 0.1)",
+  navText: "#7c3aed",
+  indicatorActive: "#7c3aed",
+  indicatorInactive: "rgba(124, 58, 237, 0.2)"
+}, at = {
+  name: "neon",
+  background: "transparent",
+  cardBg: "rgba(5, 0, 20, 0.9)",
+  cardBorder: "rgba(255, 0, 255, 0.4)",
+  cardText: "#fff",
+  cardSubtext: "#f0abfc",
+  focusGlow: "0 0 50px rgba(255,0,255,0.6), 0 0 100px rgba(0,255,255,0.3)",
+  navBg: "rgba(255, 0, 255, 0.1)",
+  navText: "#ff00ff",
+  indicatorActive: "#ff00ff",
+  indicatorInactive: "rgba(255,0,255,0.2)"
+}, ot = {
+  name: "glass",
+  background: "transparent",
+  cardBg: "rgba(255, 255, 255, 0.08)",
+  cardBorder: "rgba(255, 255, 255, 0.2)",
+  cardText: "#ffffff",
+  cardSubtext: "rgba(255,255,255,0.65)",
+  focusGlow: "0 8px 32px rgba(255,255,255,0.15), inset 0 1px 0 rgba(255,255,255,0.3)",
+  navBg: "rgba(255,255,255,0.1)",
+  navText: "#ffffff",
+  indicatorActive: "#ffffff",
+  indicatorInactive: "rgba(255,255,255,0.3)"
+}, W = {
+  dark: et,
+  light: nt,
+  neon: at,
+  glass: ot
+}, j = 220, H = 300, X = 155, it = 55, Y = 0.8, ct = 0.64, st = 0.72, dt = 0.4, lt = 3.4;
+function bt({
+  data: e,
+  autoRotate: s = !0,
+  rotationSpeed: l = 2800,
+  friction: n = 0.88,
+  focusGlow: h = !0,
+  theme: q = "dark",
+  perspective: F = 1100,
+  onFocusChange: f,
+  className: U
+}) {
+  const o = e.length, Z = W[q] || W.dark, p = d(0), g = d(0), b = d(0), m = d(0), u = d(!1), G = d(0), L = d(0), k = d(null), S = d(!1), [T, I] = tt(0), R = v(() => {
+    if (u.current) return;
+    const t = p.current, a = g.current, i = a - t;
+    b.current = b.current * n + i * (1 - n) * 0.28;
+    const r = t + b.current;
+    if (p.current = r, I(r), Math.abs(i) < 8e-4 && Math.abs(b.current) < 8e-4) {
+      p.current = a, I(a);
+      return;
+    }
+    m.current = requestAnimationFrame(R);
+  }, [n]), y = v(() => {
+    cancelAnimationFrame(m.current), m.current = requestAnimationFrame(R);
+  }, [R]), x = v((t) => {
+    g.current += t, b.current = 0, y();
+    const a = (Math.round(g.current) % o + o) % o;
+    f == null || f(a);
+  }, [o, y, f]);
+  z(() => {
+    if (!s) return;
+    const t = () => {
+      k.current = setTimeout(() => {
+        !u.current && !S.current && x(1), t();
+      }, l);
+    };
+    return t(), () => {
+      k.current && clearTimeout(k.current);
+    };
+  }, [s, l, x]);
+  const K = v((t) => {
+    u.current = !0, G.current = t.clientX, L.current = p.current, b.current = 0, cancelAnimationFrame(m.current), t.target.setPointerCapture(t.pointerId);
+  }, []), N = v((t) => {
+    if (!u.current) return;
+    const i = -((t.clientX - G.current) / X), r = L.current + i;
+    p.current = r, g.current = r, I(r);
+  }, []), V = v((t) => {
+    if (!u.current) return;
+    u.current = !1, g.current = Math.round(p.current), y();
+    const a = (Math.round(g.current) % o + o) % o;
+    f == null || f(a);
+  }, [o, y, f]);
+  z(() => {
+    const t = (a) => {
+      a.key === "ArrowLeft" && x(-1), a.key === "ArrowRight" && x(1);
+    };
+    return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
+  }, [x]), z(() => () => cancelAnimationFrame(m.current), []);
+  const J = (Math.round(T) % o + o) % o, Q = rt(() => e.map((t, a) => {
+    let i = a - T;
+    i = i - Math.round(i / o) * o;
+    const r = Math.abs(i), M = i >= 0 ? 1 : -1, B = r < lt, E = M * Math.min(it + r * 8, 85), $ = i * X, D = Math.max(0, 100 - r * 70), A = r < 0.05 ? 1 : r < 1.5 ? 1 - (1 - Y) * r : Math.max(ct, Y - (r - 1) * 0.1), C = r < 0.05 ? 1 : r < 1.5 ? 1 - (1 - st) * r : Math.max(0, dt - (r - 2) * 0.25), _ = Math.round(100 - r * 20);
+    return { slide: t, i: a, visible: B, rotY: r < 0.05 ? 0 : E, translateX: $, translateZ: D, scale: A, opacity: C, zIndex: _, dist: i };
+  }), [e, T, o]);
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: U,
+      style: {
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        cursor: u.current ? "grabbing" : "grab",
+        userSelect: "none",
+        outline: "none",
+        overflow: "hidden"
+      },
+      onPointerDown: K,
+      onPointerMove: N,
+      onPointerUp: V,
+      onMouseEnter: () => {
+        S.current = !0;
+      },
+      onMouseLeave: () => {
+        S.current = !1;
+      },
+      tabIndex: 0,
+      role: "region",
+      "aria-label": "Coverflow Carousel",
+      children: /* @__PURE__ */ c("div", { style: {
+        position: "absolute",
+        inset: 0,
+        perspective: `${F}px`,
+        perspectiveOrigin: "50% 50%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }, children: /* @__PURE__ */ c("div", { style: { position: "relative", width: 0, height: 0, transformStyle: "preserve-3d" }, children: Q.map(({ slide: t, i: a, visible: i, rotY: r, translateX: M, translateZ: B, scale: E, opacity: $, zIndex: D, dist: A }) => {
+        if (!i) return null;
+        const C = a === J, _ = Math.abs(A);
+        return /* @__PURE__ */ c(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              width: `${j}px`,
+              height: `${H}px`,
+              left: `${-j / 2}px`,
+              top: `${-H / 2}px`,
+              transform: `translateX(${M}px) translateZ(${B}px) rotateY(${r}deg) scale(${E})`,
+              opacity: $,
+              zIndex: D,
+              transition: u.current ? "none" : "transform 0.55s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.5s ease",
+              willChange: "transform, opacity",
+              cursor: "pointer"
+            },
+            onClick: () => {
+              var P, O;
+              _ > 0.3 ? x(Math.round(A)) : ((P = t.onClick) == null || P.call(t), (O = t.imageClick) == null || O.call(t));
+            },
+            children: /* @__PURE__ */ c(
+              ft,
+              {
+                slide: t,
+                isFocused: C,
+                focusGlow: h,
+                theme: Z
+              }
+            )
+          },
+          a
+        );
+      }) }) })
+    }
+  );
+}
+function ft({ slide: e, isFocused: s, focusGlow: l, theme: n }) {
+  const h = s && l ? n.focusGlow : void 0;
+  return /* @__PURE__ */ w("div", { style: {
+    width: "100%",
+    height: "100%",
+    borderRadius: "18px",
+    overflow: "hidden",
+    position: "relative",
+    background: n.cardBg,
+    border: `1.5px solid ${s ? n.indicatorActive : n.cardBorder}`,
+    boxShadow: h || (s ? "0 24px 64px rgba(0,0,0,0.65), 0 8px 24px rgba(0,0,0,0.4)" : "0 8px 32px rgba(0,0,0,0.4)"),
+    backdropFilter: "blur(12px)",
+    WebkitBackdropFilter: "blur(12px)",
+    transition: "border-color 0.4s, box-shadow 0.4s",
+    display: "flex",
+    flexDirection: "column"
+  }, children: [
+    /* @__PURE__ */ w("div", { style: { flex: "0 0 65%", position: "relative", overflow: "hidden" }, children: [
+      e.image ? /* @__PURE__ */ c(
+        "img",
+        {
+          src: e.image,
+          alt: e.title,
+          style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
+        }
+      ) : /* @__PURE__ */ c(ut, { title: e.title, color: e.color, accent: n.indicatorActive }),
+      e.tag && /* @__PURE__ */ c("span", { style: {
+        position: "absolute",
+        top: 10,
+        right: 10,
+        background: n.indicatorActive,
+        color: "#000",
+        fontSize: "9px",
+        fontWeight: 800,
+        letterSpacing: "0.08em",
+        padding: "3px 9px",
+        borderRadius: "100px",
+        fontFamily: "var(--font-display)",
+        textTransform: "uppercase"
+      }, children: e.tag }),
+      /* @__PURE__ */ c("div", { style: {
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: "50%",
+        background: `linear-gradient(to bottom, transparent, ${n.cardBg})`
+      } })
+    ] }),
+    /* @__PURE__ */ w("div", { style: {
+      flex: 1,
+      padding: "12px 16px 16px",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      gap: "5px"
+    }, children: [
+      /* @__PURE__ */ c("div", { style: {
+        fontFamily: "var(--font-display)",
+        fontWeight: 800,
+        fontSize: "15px",
+        color: n.cardText,
+        lineHeight: 1.25,
+        letterSpacing: "-0.02em"
+      }, children: e.title }),
+      e.description && /* @__PURE__ */ c("div", { style: {
+        fontFamily: "var(--font-body)",
+        fontSize: "11px",
+        color: n.cardSubtext,
+        lineHeight: 1.5,
+        fontWeight: 300
+      }, children: e.description }),
+      s && /* @__PURE__ */ c("div", { style: {
+        marginTop: "6px",
+        padding: "7px 16px",
+        borderRadius: "100px",
+        background: n.indicatorActive,
+        color: "#000",
+        fontSize: "10px",
+        fontWeight: 800,
+        fontFamily: "var(--font-display)",
+        letterSpacing: "0.05em",
+        textTransform: "uppercase",
+        cursor: "pointer",
+        alignSelf: "flex-start"
+      }, children: "Learn More →" })
+    ] })
+  ] });
+}
+function ut({ title: e, color: s, accent: l }) {
+  const n = ["#020d2e", "#1e1b4b", "#0c1445", "#1a0533", "#0d2137", "#1f1235", "#0a1400", "#1a1000", "#001820", "#160028"], h = s || n[e.charCodeAt(0) % n.length];
+  return /* @__PURE__ */ w("div", { style: {
+    width: "100%",
+    height: "100%",
+    background: `linear-gradient(145deg, ${h} 0%, ${l}22 100%)`,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative"
+  }, children: [
+    /* @__PURE__ */ c("div", { style: {
+      position: "absolute",
+      inset: 0,
+      background: `radial-gradient(circle at 60% 40%, ${l}38, transparent 65%)`
+    } }),
+    /* @__PURE__ */ c("span", { style: {
+      fontFamily: "var(--font-display)",
+      fontWeight: 900,
+      fontSize: "52px",
+      color: l,
+      opacity: 0.88,
+      position: "relative",
+      zIndex: 1
+    }, children: e.slice(0, 2).toUpperCase() })
+  ] });
+}
+export {
+  bt as AwesomeRingCarousel
+};

package/dist/index.umd.cjs

@@ -0,0 +1 @@
+(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.AwesomeRingCarousel={},l.jsxRuntime,l.React))})(this,(function(l,e,n){"use strict";const j={dark:{name:"dark",background:"transparent",cardBg:"rgba(10, 15, 30, 0.85)",cardBorder:"rgba(0, 245, 255, 0.2)",cardText:"#f1f5f9",cardSubtext:"#94a3b8",focusGlow:"0 0 40px rgba(0, 245, 255, 0.5), 0 0 80px rgba(0, 245, 255, 0.2)",navBg:"rgba(0, 245, 255, 0.1)",navText:"#00f5ff",indicatorActive:"#00f5ff",indicatorInactive:"rgba(0, 245, 255, 0.25)"},light:{name:"light",background:"transparent",cardBg:"rgba(255, 255, 255, 0.92)",cardBorder:"rgba(124, 58, 237, 0.25)",cardText:"#1e293b",cardSubtext:"#64748b",focusGlow:"0 0 40px rgba(124, 58, 237, 0.35), 0 8px 32px rgba(0,0,0,0.15)",navBg:"rgba(124, 58, 237, 0.1)",navText:"#7c3aed",indicatorActive:"#7c3aed",indicatorInactive:"rgba(124, 58, 237, 0.2)"},neon:{name:"neon",background:"transparent",cardBg:"rgba(5, 0, 20, 0.9)",cardBorder:"rgba(255, 0, 255, 0.4)",cardText:"#fff",cardSubtext:"#f0abfc",focusGlow:"0 0 50px rgba(255,0,255,0.6), 0 0 100px rgba(0,255,255,0.3)",navBg:"rgba(255, 0, 255, 0.1)",navText:"#ff00ff",indicatorActive:"#ff00ff",indicatorInactive:"rgba(255,0,255,0.2)"},glass:{name:"glass",background:"transparent",cardBg:"rgba(255, 255, 255, 0.08)",cardBorder:"rgba(255, 255, 255, 0.2)",cardText:"#ffffff",cardSubtext:"rgba(255,255,255,0.65)",focusGlow:"0 8px 32px rgba(255,255,255,0.15), inset 0 1px 0 rgba(255,255,255,0.3)",navBg:"rgba(255,255,255,0.1)",navText:"#ffffff",indicatorActive:"#ffffff",indicatorInactive:"rgba(255,255,255,0.3)"}},_=220,P=300,z=155,X=55,G=.8,Y=.64,q=.72,F=.4,U=3.4;function Z({data:o,autoRotate:d=!0,rotationSpeed:f=2800,friction:a=.88,focusGlow:v=!0,theme:V="dark",perspective:J=1100,onFocusChange:u,className:Q}){const c=o.length,tt=j[V]||j.dark,g=n.useRef(0),b=n.useRef(0),x=n.useRef(0),y=n.useRef(0),p=n.useRef(!1),L=n.useRef(0),O=n.useRef(0),A=n.useRef(null),T=n.useRef(!1),[w,S]=n.useState(0),I=n.useCallback(()=>{if(p.current)return;const t=g.current,i=b.current,s=i-t;x.current=x.current*a+s*(1-a)*.28;const r=t+x.current;if(g.current=r,S(r),Math.abs(s)<8e-4&&Math.abs(x.current)<8e-4){g.current=i,S(i);return}y.current=requestAnimationFrame(I)},[a]),m=n.useCallback(()=>{cancelAnimationFrame(y.current),y.current=requestAnimationFrame(I)},[I]),h=n.useCallback(t=>{b.current+=t,x.current=0,m();const i=(Math.round(b.current)%c+c)%c;u==null||u(i)},[c,m,u]);n.useEffect(()=>{if(!d)return;const t=()=>{A.current=setTimeout(()=>{!p.current&&!T.current&&h(1),t()},f)};return t(),()=>{A.current&&clearTimeout(A.current)}},[d,f,h]);const et=n.useCallback(t=>{p.current=!0,L.current=t.clientX,O.current=g.current,x.current=0,cancelAnimationFrame(y.current),t.target.setPointerCapture(t.pointerId)},[]),rt=n.useCallback(t=>{if(!p.current)return;const s=-((t.clientX-L.current)/z),r=O.current+s;g.current=r,b.current=r,S(r)},[]),nt=n.useCallback(t=>{if(!p.current)return;p.current=!1,b.current=Math.round(g.current),m();const i=(Math.round(b.current)%c+c)%c;u==null||u(i)},[c,m,u]);n.useEffect(()=>{const t=i=>{i.key==="ArrowLeft"&&h(-1),i.key==="ArrowRight"&&h(1)};return window.addEventListener("keydown",t),()=>window.removeEventListener("keydown",t)},[h]),n.useEffect(()=>()=>cancelAnimationFrame(y.current),[]);const ot=(Math.round(w)%c+c)%c,at=n.useMemo(()=>o.map((t,i)=>{let s=i-w;s=s-Math.round(s/c)*c;const r=Math.abs(s),M=s>=0?1:-1,C=r<U,B=M*Math.min(X+r*8,85),E=s*z,R=Math.max(0,100-r*70),k=r<.05?1:r<1.5?1-(1-G)*r:Math.max(Y,G-(r-1)*.1),$=r<.05?1:r<1.5?1-(1-q)*r:Math.max(0,F-(r-2)*.25),D=Math.round(100-r*20);return{slide:t,i,visible:C,rotY:r<.05?0:B,translateX:E,translateZ:R,scale:k,opacity:$,zIndex:D,dist:s}}),[o,w,c]);return e.jsx("div",{className:Q,style:{position:"relative",width:"100%",height:"100%",cursor:p.current?"grabbing":"grab",userSelect:"none",outline:"none",overflow:"hidden"},onPointerDown:et,onPointerMove:rt,onPointerUp:nt,onMouseEnter:()=>{T.current=!0},onMouseLeave:()=>{T.current=!1},tabIndex:0,role:"region","aria-label":"Coverflow Carousel",children:e.jsx("div",{style:{position:"absolute",inset:0,perspective:`${J}px`,perspectiveOrigin:"50% 50%",display:"flex",alignItems:"center",justifyContent:"center"},children:e.jsx("div",{style:{position:"relative",width:0,height:0,transformStyle:"preserve-3d"},children:at.map(({slide:t,i,visible:s,rotY:r,translateX:M,translateZ:C,scale:B,opacity:E,zIndex:R,dist:k})=>{if(!s)return null;const $=i===ot,D=Math.abs(k);return e.jsx("div",{style:{position:"absolute",width:`${_}px`,height:`${P}px`,left:`${-_/2}px`,top:`${-P/2}px`,transform:`translateX(${M}px) translateZ(${C}px) rotateY(${r}deg) scale(${B})`,opacity:E,zIndex:R,transition:p.current?"none":"transform 0.55s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.5s ease",willChange:"transform, opacity",cursor:"pointer"},onClick:()=>{var W,H;D>.3?h(Math.round(k)):((W=t.onClick)==null||W.call(t),(H=t.imageClick)==null||H.call(t))},children:e.jsx(K,{slide:t,isFocused:$,focusGlow:v,theme:tt})},i)})})})})}function K({slide:o,isFocused:d,focusGlow:f,theme:a}){const v=d&&f?a.focusGlow:void 0;return e.jsxs("div",{style:{width:"100%",height:"100%",borderRadius:"18px",overflow:"hidden",position:"relative",background:a.cardBg,border:`1.5px solid ${d?a.indicatorActive:a.cardBorder}`,boxShadow:v||(d?"0 24px 64px rgba(0,0,0,0.65), 0 8px 24px rgba(0,0,0,0.4)":"0 8px 32px rgba(0,0,0,0.4)"),backdropFilter:"blur(12px)",WebkitBackdropFilter:"blur(12px)",transition:"border-color 0.4s, box-shadow 0.4s",display:"flex",flexDirection:"column"},children:[e.jsxs("div",{style:{flex:"0 0 65%",position:"relative",overflow:"hidden"},children:[o.image?e.jsx("img",{src:o.image,alt:o.title,style:{width:"100%",height:"100%",objectFit:"cover",display:"block"}}):e.jsx(N,{title:o.title,color:o.color,accent:a.indicatorActive}),o.tag&&e.jsx("span",{style:{position:"absolute",top:10,right:10,background:a.indicatorActive,color:"#000",fontSize:"9px",fontWeight:800,letterSpacing:"0.08em",padding:"3px 9px",borderRadius:"100px",fontFamily:"var(--font-display)",textTransform:"uppercase"},children:o.tag}),e.jsx("div",{style:{position:"absolute",bottom:0,left:0,right:0,height:"50%",background:`linear-gradient(to bottom, transparent, ${a.cardBg})`}})]}),e.jsxs("div",{style:{flex:1,padding:"12px 16px 16px",display:"flex",flexDirection:"column",justifyContent:"center",gap:"5px"},children:[e.jsx("div",{style:{fontFamily:"var(--font-display)",fontWeight:800,fontSize:"15px",color:a.cardText,lineHeight:1.25,letterSpacing:"-0.02em"},children:o.title}),o.description&&e.jsx("div",{style:{fontFamily:"var(--font-body)",fontSize:"11px",color:a.cardSubtext,lineHeight:1.5,fontWeight:300},children:o.description}),d&&e.jsx("div",{style:{marginTop:"6px",padding:"7px 16px",borderRadius:"100px",background:a.indicatorActive,color:"#000",fontSize:"10px",fontWeight:800,fontFamily:"var(--font-display)",letterSpacing:"0.05em",textTransform:"uppercase",cursor:"pointer",alignSelf:"flex-start"},children:"Learn More →"})]})]})}function N({title:o,color:d,accent:f}){const a=["#020d2e","#1e1b4b","#0c1445","#1a0533","#0d2137","#1f1235","#0a1400","#1a1000","#001820","#160028"],v=d||a[o.charCodeAt(0)%a.length];return e.jsxs("div",{style:{width:"100%",height:"100%",background:`linear-gradient(145deg, ${v} 0%, ${f}22 100%)`,display:"flex",alignItems:"center",justifyContent:"center",position:"relative"},children:[e.jsx("div",{style:{position:"absolute",inset:0,background:`radial-gradient(circle at 60% 40%, ${f}38, transparent 65%)`}}),e.jsx("span",{style:{fontFamily:"var(--font-display)",fontWeight:900,fontSize:"52px",color:f,opacity:.88,position:"relative",zIndex:1},children:o.slice(0,2).toUpperCase()})]})}l.AwesomeRingCarousel=Z,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));

package/dist/style.css

@@ -0,0 +1 @@
+:root{--awesome-carousel-dark-bg: #030712;--awesome-carousel-light-text: #f1f5f9;--awesome-carousel-secondary-text: #94a3b8;--awesome-carousel-cyan: #00f5ff;--awesome-carousel-violet: #7c3aed;--awesome-carousel-amber: #f59e0b;--awesome-carousel-card-dark-bg: rgba(10, 15, 30, .85);--awesome-carousel-card-dark-border: rgba(0, 245, 255, .2);--awesome-carousel-glow-dark: 0 0 40px rgba(0, 245, 255, .5), 0 0 80px rgba(0, 245, 255, .2);--awesome-carousel-nav-dark-bg: rgba(0, 245, 255, .1);--awesome-carousel-nav-dark-text: #00f5ff;--awesome-carousel-indicator-active-dark: #00f5ff;--awesome-carousel-indicator-inactive-dark: rgba(0, 245, 255, .25)}@media(prefers-color-scheme:light){:root{--awesome-carousel-dark-bg: #f8fafc;--awesome-carousel-light-text: #1e293b;--awesome-carousel-secondary-text: #64748b}}.awesome-carousel-root *,.awesome-carousel-root *:before,.awesome-carousel-root *:after{box-sizing:border-box;margin:0;padding:0}.awesome-carousel-root{position:relative;width:100%;height:100%;font-family:DM Sans,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.awesome-ring-carousel{position:relative;width:100%;height:100%;overflow:hidden;background:transparent;cursor:grab;-webkit-user-select:none;user-select:none;outline:none}.awesome-ring-carousel:active{cursor:grabbing}.awesome-ring-carousel[role=region]{outline:none}.awesome-ring-carousel:focus-visible{outline:2px solid var(--awesome-carousel-cyan);outline-offset:4px}.awesome-carousel-stage{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;perspective:1100px;perspective-origin:50% 50%;transform-style:preserve-3d}.awesome-carousel-stage__inner{position:relative;width:0;height:0;transform-style:preserve-3d}.awesome-carousel-card{position:absolute;width:220px;height:300px;border-radius:18px;overflow:hidden;will-change:transform,opacity;transform-style:preserve-3d;backface-visibility:hidden}.awesome-carousel-card--transition{transition:transform .55s cubic-bezier(.25,.46,.45,.94),opacity .5s ease}.awesome-carousel-card--no-transition{transition:none}.awesome-carousel-card:hover{z-index:1000!important}.awesome-carousel-card__content{width:100%;height:100%;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;position:relative;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:border-color .4s,box-shadow .4s}.awesome-carousel-card__content--dark{background:var(--awesome-carousel-card-dark-bg);border:1.5px solid var(--awesome-carousel-card-dark-border);color:var(--awesome-carousel-light-text);box-shadow:0 8px 32px #0006}.awesome-carousel-card__content--dark.focused{border-color:var(--awesome-carousel-indicator-active-dark);box-shadow:var(--awesome-carousel-glow-dark)}.awesome-carousel-card__content--light{background:#ffffffeb;border:1.5px solid rgba(124,58,237,.25);color:#1e293b;box-shadow:0 8px 32px #00000026}.awesome-carousel-card__content--light.focused{border-color:var(--awesome-carousel-violet);box-shadow:0 0 40px #7c3aed59,0 8px 32px #00000026}.awesome-carousel-card__content--neon{background:#050014e6;border:1.5px solid rgba(255,0,255,.4);color:#fff;box-shadow:0 8px 32px #0006}.awesome-carousel-card__content--neon.focused{border-color:#f0f;box-shadow:0 0 50px #f0f9,0 0 100px #00ffff4d}.awesome-carousel-card__content--glass{background:#ffffff14;border:1.5px solid rgba(255,255,255,.2);color:#fff;box-shadow:0 8px 32px #ffffff26,inset 0 1px #ffffff4d}.awesome-carousel-card__content--glass.focused{border-color:#fff;box-shadow:0 8px 32px #fff3,inset 0 1px #fff6}.awesome-carousel-card__image-area{flex:0 0 65%;position:relative;overflow:hidden;background:#0000004d}.awesome-carousel-card__image{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}.awesome-carousel-card:hover .awesome-carousel-card__image{transform:scale(1.05)}.awesome-carousel-card__image-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#7c3aed33,#00f5ff33);color:#ffffff4d;font-size:2em}.awesome-carousel-card__text-area{flex:1;padding:16px 14px;display:flex;flex-direction:column;gap:6px;overflow:hidden}.awesome-carousel-card__title{font-size:14px;font-weight:600;line-height:1.4;text-transform:uppercase;letter-spacing:.5px;margin:0}.awesome-carousel-card__description{font-size:12px;line-height:1.3;margin:0;opacity:.8}.awesome-carousel-card__tag{display:inline-block;padding:4px 8px;border-radius:4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;width:fit-content;margin-top:auto}.awesome-carousel-card__content--dark .awesome-carousel-card__tag{background:var(--awesome-carousel-nav-dark-bg);color:var(--awesome-carousel-nav-dark-text)}.awesome-carousel-card__content--light .awesome-carousel-card__tag{background:#7c3aed1a;color:var(--awesome-carousel-violet)}.awesome-carousel-card__content--neon .awesome-carousel-card__tag{background:#ff00ff26;color:#f0f}.awesome-carousel-card__content--glass .awesome-carousel-card__tag{background:#ffffff26;color:#fff}.sphere-item{transition:transform .2s ease}.sphere-item--lift:hover{transform:translate(-50%,-52%)!important;filter:brightness(1.1)}.sphere-item--zoom:hover{transform:translate(-50%,-50%) scale(1.12)!important}.sphere-item--tilt:hover{transform:translate(-50%,-50%) rotateY(-5deg) rotateX(5deg)!important}.sphere-item:focus{outline:none}.sphere-item:focus-visible{outline:2px solid var(--awesome-carousel-cyan);outline-offset:4px;border-radius:16px}input[type=range]{-webkit-appearance:none;width:100%;height:4px;border-radius:2px;background:#ffffff1a;outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--awesome-carousel-cyan);cursor:pointer;transition:box-shadow .2s ease}input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 0 10px var(--awesome-carousel-cyan)}input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--awesome-carousel-cyan);cursor:pointer;border:none;transition:box-shadow .2s ease}input[type=range]::-moz-range-thumb:hover{box-shadow:0 0 10px var(--awesome-carousel-cyan)}input[type=range]::-moz-range-track{background:transparent;border:none}input[type=range]::-moz-range-progress{background:var(--awesome-carousel-cyan);height:4px;border-radius:2px}@keyframes starfield{0%{transform:translateY(0)}to{transform:translateY(-50%)}}@keyframes pulseGlow{0%,to{opacity:.4;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes cardEntrance{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes slideIn{0%{transform:translate(-20px);opacity:0}to{transform:translate(0);opacity:1}}.awesome-carousel-nav{display:flex;gap:10px;justify-content:center;padding:20px;background:transparent}.awesome-carousel-nav__button{padding:8px 16px;border:1px solid currentColor;border-radius:6px;background:transparent;color:inherit;cursor:pointer;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;transition:all .3s ease;outline:none}.awesome-carousel-nav__button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0003}.awesome-carousel-nav__button:active{transform:translateY(0)}.awesome-carousel-nav__button:focus-visible{outline:2px solid var(--awesome-carousel-cyan);outline-offset:2px}.awesome-carousel-nav--dark .awesome-carousel-nav__button{color:var(--awesome-carousel-nav-dark-text);border-color:var(--awesome-carousel-nav-dark-text)}.awesome-carousel-nav--dark .awesome-carousel-nav__button:hover{background:var(--awesome-carousel-nav-dark-bg)}.awesome-carousel-nav--light .awesome-carousel-nav__button{color:var(--awesome-carousel-violet);border-color:var(--awesome-carousel-violet)}.awesome-carousel-nav--light .awesome-carousel-nav__button:hover{background:#7c3aed1a}.awesome-carousel-indicators{display:flex;gap:8px;justify-content:center;padding:16px;background:transparent}.awesome-carousel-indicator{width:8px;height:8px;border-radius:50%;cursor:pointer;transition:all .3s ease;border:none;padding:0}.awesome-carousel-indicator:hover{transform:scale(1.3)}.awesome-carousel-indicator:focus-visible{outline:2px solid var(--awesome-carousel-cyan);outline-offset:2px}.awesome-carousel-indicators--dark .awesome-carousel-indicator{background:var(--awesome-carousel-indicator-inactive-dark)}.awesome-carousel-indicators--dark .awesome-carousel-indicator.active{background:var(--awesome-carousel-indicator-active-dark);box-shadow:0 0 10px var(--awesome-carousel-indicator-active-dark)}.awesome-carousel-indicators--light .awesome-carousel-indicator{background:#7c3aed33}.awesome-carousel-indicators--light .awesome-carousel-indicator.active{background:var(--awesome-carousel-violet);box-shadow:0 0 10px #7c3aed80}.awesome-carousel-indicators--neon .awesome-carousel-indicator{background:#f0f3}.awesome-carousel-indicators--neon .awesome-carousel-indicator.active{background:#f0f;box-shadow:0 0 10px #f0f}.awesome-carousel-indicators--glass .awesome-carousel-indicator{background:#ffffff4d}.awesome-carousel-indicators--glass .awesome-carousel-indicator.active{background:#fff;box-shadow:0 0 10px #fff9}.awesome-carousel-fade-enter{animation:fadeUp .3s ease-out}.awesome-carousel-card-entrance{animation:cardEntrance .4s cubic-bezier(.34,1.56,.64,1)}.awesome-carousel-slide-in{animation:slideIn .3s ease-out}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.awesome-carousel-card--transition{transition:none}}@media(max-width:768px){.awesome-carousel-card{width:180px;height:240px}.awesome-carousel-card__title{font-size:13px}.awesome-carousel-card__description{font-size:11px}.awesome-carousel-nav{padding:15px;gap:8px}.awesome-carousel-nav__button{padding:6px 12px;font-size:12px}.awesome-carousel-indicators{gap:6px;padding:12px}.awesome-carousel-indicator{width:6px;height:6px}}@media(max-width:480px){.awesome-carousel-card{width:150px;height:200px}.awesome-carousel-card__image-area{flex:0 0 60%}.awesome-carousel-card__text-area{padding:12px 10px;gap:4px}.awesome-carousel-card__title{font-size:12px}.awesome-carousel-card__description{font-size:10px}.awesome-carousel-card__tag{font-size:9px;padding:3px 6px}}.awesome-carousel-a11y-skip{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.awesome-carousel-a11y-skip:focus{position:static;width:auto;height:auto;padding:10px;background:var(--awesome-carousel-cyan);color:var(--awesome-carousel-dark-bg);outline:2px solid var(--awesome-carousel-cyan)}@media(prefers-contrast:more){.awesome-carousel-card__content--dark{border-color:var(--awesome-carousel-indicator-active-dark)}.awesome-carousel-card__content--light{border-color:var(--awesome-carousel-violet)}.awesome-carousel-indicator{border:1px solid currentColor}}@media(forced-colors:active){.awesome-carousel-card__content,.awesome-carousel-nav__button,.awesome-carousel-indicator{border:1px solid}}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "awesome-ring-carousel",
+  "version": "0.1.0",
+  "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",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.js"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "carousel",
+    "coverflow",
+    "3d",
+    "ring",
+    "component",
+    "interactive",
+    "animation",
+    "theme",
+    "ui"
+  ],
+  "author": "Pravinkumar Dabade",
+  "license": "MIT",
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": false
+    },
+    "react-dom": {
+      "optional": false
+    }
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "~5.6.2",
+    "vite": "^6.0.5"
+  },
+  "engines": {
+    "node": ">=14.0.0",
+    "npm": ">=6.0.0"
+  }
+}