aura-ui-library 1.0.20 → 1.0.24

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 (4) hide show
  1. package/README.md +102 -76
  2. package/dist/index.js +2659 -924
  3. package/dist/index.mjs +2686 -929
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -1,121 +1,147 @@
1
1
  # Aura UI Library 🌌
2
2
 
3
- A premium, high-end React UI library focused on **"Quiet Luxury"** and editorial-grade aesthetics. Every component is powered by **GSAP** for GPU-accelerated, cinematic animations and uses strictly **inline styles** for zero-config, portable integration.
3
+ A premium React UI component library designed for the next generation of digital interfaces. Build award-winning websites with cinematic GSAP animations, "Quiet Luxury" aesthetics, and a powerful **Zero-Config** design system.
4
4
 
5
5
  ---
6
6
 
7
7
  ## ✨ Features
8
8
 
9
- - **Kinetic Animations**: Smooth, physics-based motion with GSAP.
10
- - **Magnetic Interactions**: Components that react organically to cursor proximity.
11
- - **Glassmorphism**: Modern, translucent interfaces using backdrop filters.
12
- - **No CSS Overload**: Zero external CSS files or utility-class dependencies.
13
- - **Fully Customizable**: Control every aspect via props (colors, easing, timing).
9
+ - **Award-Winning Motion**: Physics-based animations powered by **GSAP** and **ScrollTrigger**.
10
+ - **Dual-Theme Engine**: Native Light/Dark mode support for all components.
11
+ - **Zero-Dependency Styles**: No Tailwind, SASS, or CSS modules required. Pure, high-performance inline styles.
12
+ - **Developer First**: Fully customizable via `style` passthrough and typed props.
13
+ - **Responsive Mastery**: Fluid layouts that adapt beautifully from mobile to ultra-wide displays.
14
14
 
15
15
  ---
16
16
 
17
17
  ## 🚀 Installation
18
18
 
19
- Install the package via npm:
20
-
21
19
  ```bash
22
20
  npm install aura-ui-library
23
21
  ```
24
22
 
25
- Or via yarn:
23
+ ### Peer Dependencies
24
+ Ensure you have the following installed in your React project:
26
25
 
27
26
  ```bash
28
- yarn add aura-ui-library
27
+ npm install react react-dom gsap framer-motion react-icons react-router-dom
29
28
  ```
30
29
 
31
- ### Peer Dependencies
32
- Ensure you have the required peer dependencies installed in your React project:
30
+ ---
33
31
 
34
- ```bash
35
- npm install gsap react-icons react-router-dom framer-motion
36
- ```
32
+ ## 🛠️ Components & Customization
33
+
34
+ Aura UI components are built to be flexible. Every component supports a `theme`, `accentColor`, and a `style` block.
35
+
36
+ | Component | Purpose | Key Props |
37
+ | :--- | :--- | :--- |
38
+ | **`AuraLogin`** | Premium interactive auth screens | `title`, `subtitle`, `theme`, `accentColor`, `onSubmit` |
39
+ | **`AuraRegister`** | Premium interactive registration | `title`, `subtitle`, `theme`, `accentColor`, `onSubmit` |
40
+ | **`Hero`** | High-impact landing sections | `title`, `subtitle`, `image`, `layout` ("split"/"overlay"), `align` |
41
+ | **`Navbar`** | Cinematic navigation bars | `logoText`, `links` (supports dropdowns), `theme`, `accentColor` |
42
+ | **`Button`** | Magnetic interactive triggers | `children`, `variant` ("primary"/"secondary"/"outline"/"glass"), `size`, `icon` |
43
+ | **`Grid`** | Bento-style layout system | `items`, `columns`, `gap`, `theme` |
44
+ | **`ProjectShowCase`** | Vertical timeline galleries | `projects`, `accentColor`, `theme` |
45
+ | **`Testimonials`** | Premium feedback sections | `items`, `theme`, `accentColor` |
46
+ | **`Canvas`** | Interactive 3D particle mesh | `particleCount`, `interactive`, `theme`, `accentColor` |
47
+ | **`Carousel`** | Fluid content sliders | `items`, `theme`, `animationDuration` |
48
+ | **`Spotlight`** | Interactive reveal cards | `title`, `description`, `image`, `theme` |
49
+ | **`ParallaxImage`** | Hero sections with scroll depth | `title`, `subtitle`, `image`, `height` |
50
+ | **`TextWriting`** | Scrambling/Typing animations | `texts`, `speed`, `delay`, `accentColor` |
51
+ | **`SideBar`** | Interactive side navigation | `links`, `logo`, `collapsedWidth`, `theme`|
52
+ | **`Skills`** | Data-driven progress reveals | `skills`, `accentColor`, `theme` |
53
+ | **`PinterestGrid`** | Modern masonry layouts | `items`, `columns`, `gap`, `theme` |
54
+ | **`TextImage`** | Interwoven text and image segments | `segments`, `fontSize`, `theme` |
55
+ | **`HorizontalScroll`** | Lateral gallery sections | `items`, `accentColor`, `theme` |
56
+ | **`SVGPathAnimation`**| Path-drawing on scroll | `path`, `title`, `subtitle`, `theme` |
37
57
 
38
58
  ---
39
59
 
40
- ## 🛠 Usage
60
+ ## 🎨 Global Customization
41
61
 
42
- ### 1. Magnetic Button
43
- A physics-based button with parallax content motion.
62
+ ### 1. Theme Support
63
+ Toggle between "dark" and "light" moods instantly. Components automatically adjust backgrounds, text contrast, and glassmorphism levels.
44
64
 
45
65
  ```jsx
46
- import { MagneticButton } from 'aura-ui-library';
47
-
48
- const App = () => (
49
- <MagneticButton
50
- variant="primary"
51
- accentColor="#6366f1"
52
- onClick={() => console.log('Clicked!')}
53
- >
54
- Get Started
55
- </MagneticButton>
56
- );
66
+ <Navbar theme="light" />
67
+ <Hero theme="dark" />
57
68
  ```
58
69
 
59
- ### 2. Spotlight Hero
60
- A dynamic hero section with a mouse-following spotlight effect.
70
+ ### 2. Style Passthrough
71
+ Inject custom CSS directly into any component's root element. Perfect for margin adjustments, z-index control, or custom background overrides.
61
72
 
62
73
  ```jsx
63
- import { Spotlight } from 'aura-ui-library';
64
-
65
- const Hero = () => (
66
- <Spotlight
67
- title="Design the Future"
68
- subtitle="Build high-performance interfaces with cinematic motion."
69
- accentColor="#f43f5e"
70
- />
71
- );
74
+ <Grid
75
+ style={{
76
+ marginTop: "100px",
77
+ border: "2px solid #ef4444"
78
+ }}
79
+ />
72
80
  ```
73
81
 
74
- ### 3. Pinterest Grid
75
- A cinematic masonry layout with staggered entrance animations.
82
+ ### 3. Accent Color System
83
+ Control the "DNA" of the component. The `accentColor` prop influences icons, highlights, shadows, and hover states.
76
84
 
77
85
  ```jsx
78
- import { PinterestGrid } from 'aura-ui-library';
79
-
80
- const Gallery = () => (
81
- <PinterestGrid
82
- items={[
83
- { id: 1, src: "image1.jpg", title: "Project A" },
84
- { id: 2, src: "image2.jpg", title: "Project B" }
85
- ]}
86
- columns={3}
87
- gap={24}
88
- />
89
- );
86
+ <Button accentColor="#10b981">Green Vibe</Button>
87
+ <Button accentColor="#f43f5e">Rose Vibe</Button>
90
88
  ```
91
89
 
92
90
  ---
93
91
 
94
- ## 📦 Components Included
95
-
96
- | Component | Description |
97
- | :--- | :--- |
98
- | `Navbar` | Liquid-morph navigation with magnetic links. |
99
- | `Carousel` | Editorial-grade cinematic slider with auto-play. |
100
- | `Spotlight` | Interactive hero section with radial lighting. |
101
- | `MagneticButton` | Parallax button with proximity-based attraction. |
102
- | `ProductCard` | Glassmorphism-based e-commerce card with action overlays. |
103
- | `SideBar` | Retractable navigation with liquid indicators. |
104
- | `ProjectShowCase`| Vertical timeline with staggered reveal cards. |
105
- | `Skills` | Animated proficiency grid with liquid progress fills. |
106
- | `TextWriting` | Terminal-style typing with character scrambling. |
107
- | `Image` | 3D-tilt image container with cinematic reveal. |
108
- | `PinterestGrid` | Masonry layout with magnetic action nodes. |
92
+ ## 🏮 Quick Start Example
93
+
94
+ ```jsx
95
+ import { Navbar, Hero, Grid, Button } from "aura-ui-library";
96
+
97
+ const navLinks = [
98
+ { label: "Design", path: "/design" },
99
+ { label: "Systems", path: "/systems", children: [
100
+ { label: "React", path: "/react" },
101
+ { label: "GSAP", path: "/gsap" }
102
+ ]}
103
+ ];
104
+
105
+ export default function App() {
106
+ return (
107
+ <div style={{ backgroundColor: "#000" }}>
108
+ <Navbar
109
+ logoText="AURA"
110
+ links={navLinks}
111
+ theme="dark"
112
+ accentColor="#6366f1"
113
+ />
114
+
115
+ <Hero
116
+ title="Cinematic Interfaces"
117
+ subtitle="The world's most sophisticated React component library for high-end luxury brands."
118
+ layout="split"
119
+ theme="dark"
120
+ accentColor="#6366f1"
121
+ />
122
+
123
+ <Grid
124
+ theme="dark"
125
+ columns="repeat(3, 1fr)"
126
+ items={[
127
+ { title: "Fluidity", description: "120 FPS Rendering", color: "#f43f5e" },
128
+ { title: "Elegance", description: "Quiet Luxury Aesthetic", color: "#fb7185" },
129
+ { title: "Precision", description: "Pixel Perfect Design", color: "#6366f1" }
130
+ ]}
131
+ />
132
+ </div>
133
+ );
134
+ }
135
+ ```
109
136
 
110
137
  ---
111
138
 
112
- ## 🎨 Design Philosophy
113
- Aura UI is built for developers who care about the "soul" of an interface. We prioritize:
114
- - **Performance**: GSAP ensures all animations run at 60fps.
115
- - **Subtlety**: Micro-animations that enhance rather than distract.
116
- - **Portability**: Drop a component into any codebase without setting up PostCSS, Tailwind, or SASS.
139
+ ## 📈 Performance Tip
140
+ Aura UI uses `will-change` and hardware-accelerated transforms. To keep your site running at maximum speed:
141
+ - Avoid nesting large `Canvas` or `Hero` components inside complex containers.
142
+ - Use the `theme` prop instead of manually overriding every color via `style`.
117
143
 
118
144
  ---
119
145
 
120
- ## 📄 License
121
- ISC © [Ritik](https://github.com/RitikWeb22)
146
+ ## 📜 License
147
+ ISC © [RitikWeb22](https://github.com/RitikWeb22)