@alexandretav/aleui 1.0.0
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.
- package/LICENSE +21 -0
- package/README.md +215 -0
- package/dist/index.d.mts +137 -0
- package/dist/index.d.ts +137 -0
- package/dist/index.js +417 -0
- package/dist/index.mjs +371 -0
- package/package.json +65 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Glassmorphism UI
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,215 @@
|
|
|
1
|
+
# ✨ Glassmorphism UI Library
|
|
2
|
+
|
|
3
|
+
A beautiful, modern React component library built with TypeScript and Tailwind CSS, featuring stunning glassmorphism and Frutiger Aero design styles.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
## 🎨 Features
|
|
11
|
+
|
|
12
|
+
- ✨ **Beautiful Glassmorphism Design**: Modern, translucent UI components with backdrop blur effects
|
|
13
|
+
- 🌊 **Frutiger Aero Style**: Nostalgic 2000s aesthetic with aquatic gradients
|
|
14
|
+
- 📘 **TypeScript Support**: Full type safety and IntelliSense support
|
|
15
|
+
- 🎨 **Tailwind CSS**: Utility-first CSS framework for easy customization
|
|
16
|
+
- 🎭 **Multiple Variants**: Light, Medium, Dark, and Colored variants for each component
|
|
17
|
+
- 📱 **Responsive**: Mobile-first design that works on all screen sizes
|
|
18
|
+
- 🔧 **Customizable**: Easy to extend and customize with your own styles
|
|
19
|
+
- ⚡ **Framer Motion**: Smooth animations and interactions
|
|
20
|
+
|
|
21
|
+
## 📦 Components
|
|
22
|
+
|
|
23
|
+
- **Button**: Interactive buttons with glassmorphism effects
|
|
24
|
+
- **Card**: Container components with customizable variants
|
|
25
|
+
- **Input**: Form input fields with labels and validation
|
|
26
|
+
- **Modal**: Dialog components with backdrop blur
|
|
27
|
+
- **Accordion**: Collapsible content panels
|
|
28
|
+
- **AeroBubble**: Decorative bubble elements with Frutiger Aero style
|
|
29
|
+
|
|
30
|
+
## 🚀 Quick Start
|
|
31
|
+
|
|
32
|
+
### Installation
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
npm install glassmorphism-ui
|
|
36
|
+
# or
|
|
37
|
+
yarn add glassmorphism-ui
|
|
38
|
+
# or
|
|
39
|
+
pnpm add glassmorphism-ui
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
### Setup Tailwind CSS
|
|
43
|
+
|
|
44
|
+
This library requires Tailwind CSS. Configure your `tailwind.config.js`:
|
|
45
|
+
|
|
46
|
+
```js
|
|
47
|
+
module.exports = {
|
|
48
|
+
content: [
|
|
49
|
+
"./src/**/*.{js,ts,jsx,tsx}",
|
|
50
|
+
"./node_modules/glassmorphism-ui/**/*.{js,ts,jsx,tsx}", // Add this line
|
|
51
|
+
],
|
|
52
|
+
theme: {
|
|
53
|
+
extend: {
|
|
54
|
+
colors: {
|
|
55
|
+
aero: {
|
|
56
|
+
sky: '#87CEEB',
|
|
57
|
+
aqua: '#00CED1',
|
|
58
|
+
cyan: '#00E5FF',
|
|
59
|
+
mint: '#98FF98',
|
|
60
|
+
lime: '#BFFF00',
|
|
61
|
+
white: '#F0F8FF',
|
|
62
|
+
},
|
|
63
|
+
},
|
|
64
|
+
boxShadow: {
|
|
65
|
+
'aero': '0 8px 32px 0 rgba(31, 38, 135, 0.37)',
|
|
66
|
+
'aero-lg': '0 12px 48px 0 rgba(31, 38, 135, 0.5)',
|
|
67
|
+
},
|
|
68
|
+
},
|
|
69
|
+
},
|
|
70
|
+
plugins: [],
|
|
71
|
+
}
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### Demo
|
|
75
|
+
|
|
76
|
+
Para ver a demo localmente:
|
|
77
|
+
|
|
78
|
+
```bash
|
|
79
|
+
# Clone o repositório
|
|
80
|
+
git clone https://github.com/seu-usuario/glassmorphism-ui.git
|
|
81
|
+
cd glassmorphism-ui
|
|
82
|
+
|
|
83
|
+
# Instalar dependências
|
|
84
|
+
npm install
|
|
85
|
+
|
|
86
|
+
# Rodar servidor de desenvolvimento
|
|
87
|
+
npm run dev
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
Abra [http://localhost:3000](http://localhost:3000) para ver a demo.
|
|
91
|
+
|
|
92
|
+
## 💻 Usage
|
|
93
|
+
|
|
94
|
+
### Import Components
|
|
95
|
+
|
|
96
|
+
```tsx
|
|
97
|
+
import { Button, Card, Input, Modal } from '@/components';
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
### Button Example
|
|
101
|
+
|
|
102
|
+
```tsx
|
|
103
|
+
<Button variant="light" size="md" onClick={() => console.log('Clicked!')}>
|
|
104
|
+
Click Me
|
|
105
|
+
</Button>
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
### Card Example
|
|
109
|
+
|
|
110
|
+
```tsx
|
|
111
|
+
<Card variant="medium" hover padding="lg">
|
|
112
|
+
<h2>Card Title</h2>
|
|
113
|
+
<p>Card content goes here</p>
|
|
114
|
+
</Card>
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
### Input Example
|
|
118
|
+
|
|
119
|
+
```tsx
|
|
120
|
+
<Input
|
|
121
|
+
variant="light"
|
|
122
|
+
label="Email"
|
|
123
|
+
type="email"
|
|
124
|
+
placeholder="your@email.com"
|
|
125
|
+
fullWidth
|
|
126
|
+
/>
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
### Modal Example
|
|
130
|
+
|
|
131
|
+
```tsx
|
|
132
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
133
|
+
|
|
134
|
+
<Modal
|
|
135
|
+
isOpen={isOpen}
|
|
136
|
+
onClose={() => setIsOpen(false)}
|
|
137
|
+
title="Modal Title"
|
|
138
|
+
variant="medium"
|
|
139
|
+
>
|
|
140
|
+
<p>Modal content</p>
|
|
141
|
+
</Modal>
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
## 🎨 Customization
|
|
145
|
+
|
|
146
|
+
### Theme Configuration
|
|
147
|
+
|
|
148
|
+
The glassmorphism theme is configured in `src/theme/glass.ts`. You can customize:
|
|
149
|
+
|
|
150
|
+
- Background opacity
|
|
151
|
+
- Backdrop blur intensity
|
|
152
|
+
- Border styles
|
|
153
|
+
- Shadow effects
|
|
154
|
+
- Animation transitions
|
|
155
|
+
|
|
156
|
+
### Tailwind Configuration
|
|
157
|
+
|
|
158
|
+
Extend the Tailwind configuration in `tailwind.config.js` to add custom colors, spacing, or other utilities.
|
|
159
|
+
|
|
160
|
+
### Global Styles
|
|
161
|
+
|
|
162
|
+
Global glassmorphism utility classes are available in `src/app/globals.css`:
|
|
163
|
+
|
|
164
|
+
- `.glass` - Default glassmorphism style
|
|
165
|
+
- `.glass-light` - Light variant
|
|
166
|
+
- `.glass-medium` - Medium variant
|
|
167
|
+
- `.glass-dark` - Dark variant
|
|
168
|
+
- `.glass-hover` - Hover animation
|
|
169
|
+
|
|
170
|
+
## 📁 Project Structure
|
|
171
|
+
|
|
172
|
+
```
|
|
173
|
+
src/
|
|
174
|
+
├── app/
|
|
175
|
+
│ ├── globals.css # Global styles and Tailwind imports
|
|
176
|
+
│ ├── layout.tsx # Root layout
|
|
177
|
+
│ └── page.tsx # Demo page
|
|
178
|
+
├── components/
|
|
179
|
+
│ ├── Button/
|
|
180
|
+
│ │ ├── Button.tsx
|
|
181
|
+
│ │ └── index.ts
|
|
182
|
+
│ ├── Card/
|
|
183
|
+
│ │ ├── Card.tsx
|
|
184
|
+
│ │ └── index.ts
|
|
185
|
+
│ ├── Input/
|
|
186
|
+
│ │ ├── Input.tsx
|
|
187
|
+
│ │ └── index.ts
|
|
188
|
+
│ ├── Modal/
|
|
189
|
+
│ │ ├── Modal.tsx
|
|
190
|
+
│ │ └── index.ts
|
|
191
|
+
│ └── index.ts # Component exports
|
|
192
|
+
├── theme/
|
|
193
|
+
│ └── glass.ts # Glassmorphism theme config
|
|
194
|
+
└── utils/
|
|
195
|
+
└── index.ts # Utility functions
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
## 🛠️ Tech Stack
|
|
199
|
+
|
|
200
|
+
- **Next.js 14** - React framework
|
|
201
|
+
- **TypeScript** - Type safety
|
|
202
|
+
- **Tailwind CSS** - Styling
|
|
203
|
+
- **React 18** - UI library
|
|
204
|
+
|
|
205
|
+
## 📝 License
|
|
206
|
+
|
|
207
|
+
MIT
|
|
208
|
+
|
|
209
|
+
## 🤝 Contributing
|
|
210
|
+
|
|
211
|
+
Contributions are welcome! Feel free to open issues or submit pull requests.
|
|
212
|
+
|
|
213
|
+
---
|
|
214
|
+
|
|
215
|
+
Built with ❤️ using Next.js and Tailwind CSS
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
declare const glassVariants: {
|
|
4
|
+
readonly light: {
|
|
5
|
+
readonly background: "bg-white/5";
|
|
6
|
+
readonly backdropBlur: "backdrop-blur-[2px]";
|
|
7
|
+
readonly border: "border border-white/15";
|
|
8
|
+
readonly shadow: "shadow-lg";
|
|
9
|
+
readonly hover: "hover:bg-white/10 hover:shadow-xl";
|
|
10
|
+
readonly focus: "focus:outline-none focus:ring-2 focus:ring-white/10";
|
|
11
|
+
};
|
|
12
|
+
readonly medium: {
|
|
13
|
+
readonly background: "bg-white/20";
|
|
14
|
+
readonly backdropBlur: "backdrop-blur-lg";
|
|
15
|
+
readonly border: "border border-white/30";
|
|
16
|
+
readonly shadow: "shadow-xl";
|
|
17
|
+
readonly hover: "hover:bg-white/30 hover:shadow-2xl";
|
|
18
|
+
readonly focus: "focus:outline-none focus:ring-2 focus:ring-white/50";
|
|
19
|
+
};
|
|
20
|
+
readonly dark: {
|
|
21
|
+
readonly background: "bg-black/20";
|
|
22
|
+
readonly backdropBlur: "backdrop-blur-md";
|
|
23
|
+
readonly border: "border border-white/10";
|
|
24
|
+
readonly shadow: "shadow-lg";
|
|
25
|
+
readonly hover: "hover:bg-black/30 hover:shadow-xl";
|
|
26
|
+
readonly focus: "focus:outline-none focus:ring-2 focus:ring-white/40";
|
|
27
|
+
};
|
|
28
|
+
readonly colored: {
|
|
29
|
+
readonly background: "bg-gradient-to-br from-white/20 to-white/10";
|
|
30
|
+
readonly backdropBlur: "backdrop-blur-xl";
|
|
31
|
+
readonly border: "border border-white/25";
|
|
32
|
+
readonly shadow: "shadow-2xl";
|
|
33
|
+
readonly hover: "hover:from-white/30 hover:to-white/20 hover:shadow-[0_8px_32px_0_rgba(255,255,255,0.37)]";
|
|
34
|
+
readonly focus: "focus:outline-none focus:ring-2 focus:ring-white/60";
|
|
35
|
+
};
|
|
36
|
+
};
|
|
37
|
+
declare const aeroVariants: {
|
|
38
|
+
readonly light: {
|
|
39
|
+
readonly background: "bg-gradient-to-br from-cyan-400/20 to-blue-400/10";
|
|
40
|
+
readonly backdropBlur: "backdrop-blur-md";
|
|
41
|
+
readonly border: "border border-cyan-300/30";
|
|
42
|
+
readonly shadow: "shadow-aero";
|
|
43
|
+
readonly hover: "hover:from-cyan-400/30 hover:to-blue-400/20 hover:shadow-aero-lg";
|
|
44
|
+
readonly focus: "focus:outline-none focus:ring-2 focus:ring-cyan-300/50";
|
|
45
|
+
};
|
|
46
|
+
readonly medium: {
|
|
47
|
+
readonly background: "bg-gradient-to-br from-sky-400/25 to-cyan-400/15";
|
|
48
|
+
readonly backdropBlur: "backdrop-blur-lg";
|
|
49
|
+
readonly border: "border border-sky-300/40";
|
|
50
|
+
readonly shadow: "shadow-aero-lg";
|
|
51
|
+
readonly hover: "hover:from-sky-400/35 hover:to-cyan-400/25 hover:shadow-[0_8px_32px_0_rgba(56,189,248,0.37)]";
|
|
52
|
+
readonly focus: "focus:outline-none focus:ring-2 focus:ring-sky-300/60";
|
|
53
|
+
};
|
|
54
|
+
readonly dark: {
|
|
55
|
+
readonly background: "bg-gradient-to-br from-blue-500/30 to-cyan-500/20";
|
|
56
|
+
readonly backdropBlur: "backdrop-blur-md";
|
|
57
|
+
readonly border: "border border-blue-300/30";
|
|
58
|
+
readonly shadow: "shadow-aero";
|
|
59
|
+
readonly hover: "hover:from-blue-500/40 hover:to-cyan-500/30 hover:shadow-aero-lg";
|
|
60
|
+
readonly focus: "focus:outline-none focus:ring-2 focus:ring-blue-300/50";
|
|
61
|
+
};
|
|
62
|
+
readonly colored: {
|
|
63
|
+
readonly background: "bg-gradient-to-br from-lime-400/25 via-cyan-400/20 to-blue-400/15";
|
|
64
|
+
readonly backdropBlur: "backdrop-blur-xl";
|
|
65
|
+
readonly border: "border border-lime-300/35";
|
|
66
|
+
readonly shadow: "shadow-aero-lg";
|
|
67
|
+
readonly hover: "hover:from-lime-400/35 hover:via-cyan-400/30 hover:to-blue-400/25 hover:shadow-[0_8px_32px_0_rgba(163,230,53,0.37)]";
|
|
68
|
+
readonly focus: "focus:outline-none focus:ring-2 focus:ring-lime-300/60";
|
|
69
|
+
};
|
|
70
|
+
};
|
|
71
|
+
type GlassVariantType = keyof typeof glassVariants;
|
|
72
|
+
type AeroVariantType = keyof typeof aeroVariants;
|
|
73
|
+
/**
|
|
74
|
+
* Generate glassmorphism class string
|
|
75
|
+
*/
|
|
76
|
+
declare const getGlassClasses: (variant?: GlassVariantType, rounded?: string, includeInteractions?: boolean) => string;
|
|
77
|
+
/**
|
|
78
|
+
* Generate Frutiger Aero class string
|
|
79
|
+
*/
|
|
80
|
+
declare const getAeroClasses: (variant?: AeroVariantType, rounded?: string, includeInteractions?: boolean) => string;
|
|
81
|
+
|
|
82
|
+
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
83
|
+
variant?: GlassVariantType;
|
|
84
|
+
size?: 'sm' | 'md' | 'lg';
|
|
85
|
+
fullWidth?: boolean;
|
|
86
|
+
children: React.ReactNode;
|
|
87
|
+
}
|
|
88
|
+
declare const Button: React.FC<ButtonProps>;
|
|
89
|
+
|
|
90
|
+
interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
91
|
+
variant?: GlassVariantType;
|
|
92
|
+
padding?: 'none' | 'sm' | 'md' | 'lg';
|
|
93
|
+
enableInteractions?: boolean;
|
|
94
|
+
children: React.ReactNode;
|
|
95
|
+
}
|
|
96
|
+
declare const Card: React.FC<CardProps>;
|
|
97
|
+
|
|
98
|
+
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
99
|
+
variant?: GlassVariantType;
|
|
100
|
+
fullWidth?: boolean;
|
|
101
|
+
label?: string;
|
|
102
|
+
}
|
|
103
|
+
declare const Input: React.FC<InputProps>;
|
|
104
|
+
|
|
105
|
+
interface ModalProps {
|
|
106
|
+
isOpen: boolean;
|
|
107
|
+
onClose: () => void;
|
|
108
|
+
variant?: GlassVariantType;
|
|
109
|
+
title?: string;
|
|
110
|
+
children: React.ReactNode;
|
|
111
|
+
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
112
|
+
}
|
|
113
|
+
declare const Modal: React.FC<ModalProps>;
|
|
114
|
+
|
|
115
|
+
interface AeroBubbleProps {
|
|
116
|
+
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
117
|
+
color?: 'cyan' | 'blue' | 'lime' | 'sky';
|
|
118
|
+
className?: string;
|
|
119
|
+
}
|
|
120
|
+
declare const AeroBubble: React.FC<AeroBubbleProps>;
|
|
121
|
+
|
|
122
|
+
interface AccordionItemProps {
|
|
123
|
+
id: string;
|
|
124
|
+
title: string;
|
|
125
|
+
content: React.ReactNode;
|
|
126
|
+
icon?: React.ReactNode;
|
|
127
|
+
}
|
|
128
|
+
interface AccordionProps {
|
|
129
|
+
items: AccordionItemProps[];
|
|
130
|
+
variant?: GlassVariantType;
|
|
131
|
+
allowMultiple?: boolean;
|
|
132
|
+
defaultOpen?: string[];
|
|
133
|
+
className?: string;
|
|
134
|
+
}
|
|
135
|
+
declare const Accordion: React.FC<AccordionProps>;
|
|
136
|
+
|
|
137
|
+
export { Accordion, type AccordionItemProps, type AccordionProps, AeroBubble, type AeroBubbleProps, type AeroVariantType, Button, type ButtonProps, Card, type CardProps, type GlassVariantType, Input, type InputProps, Modal, type ModalProps, aeroVariants, getAeroClasses, getGlassClasses, glassVariants };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
declare const glassVariants: {
|
|
4
|
+
readonly light: {
|
|
5
|
+
readonly background: "bg-white/5";
|
|
6
|
+
readonly backdropBlur: "backdrop-blur-[2px]";
|
|
7
|
+
readonly border: "border border-white/15";
|
|
8
|
+
readonly shadow: "shadow-lg";
|
|
9
|
+
readonly hover: "hover:bg-white/10 hover:shadow-xl";
|
|
10
|
+
readonly focus: "focus:outline-none focus:ring-2 focus:ring-white/10";
|
|
11
|
+
};
|
|
12
|
+
readonly medium: {
|
|
13
|
+
readonly background: "bg-white/20";
|
|
14
|
+
readonly backdropBlur: "backdrop-blur-lg";
|
|
15
|
+
readonly border: "border border-white/30";
|
|
16
|
+
readonly shadow: "shadow-xl";
|
|
17
|
+
readonly hover: "hover:bg-white/30 hover:shadow-2xl";
|
|
18
|
+
readonly focus: "focus:outline-none focus:ring-2 focus:ring-white/50";
|
|
19
|
+
};
|
|
20
|
+
readonly dark: {
|
|
21
|
+
readonly background: "bg-black/20";
|
|
22
|
+
readonly backdropBlur: "backdrop-blur-md";
|
|
23
|
+
readonly border: "border border-white/10";
|
|
24
|
+
readonly shadow: "shadow-lg";
|
|
25
|
+
readonly hover: "hover:bg-black/30 hover:shadow-xl";
|
|
26
|
+
readonly focus: "focus:outline-none focus:ring-2 focus:ring-white/40";
|
|
27
|
+
};
|
|
28
|
+
readonly colored: {
|
|
29
|
+
readonly background: "bg-gradient-to-br from-white/20 to-white/10";
|
|
30
|
+
readonly backdropBlur: "backdrop-blur-xl";
|
|
31
|
+
readonly border: "border border-white/25";
|
|
32
|
+
readonly shadow: "shadow-2xl";
|
|
33
|
+
readonly hover: "hover:from-white/30 hover:to-white/20 hover:shadow-[0_8px_32px_0_rgba(255,255,255,0.37)]";
|
|
34
|
+
readonly focus: "focus:outline-none focus:ring-2 focus:ring-white/60";
|
|
35
|
+
};
|
|
36
|
+
};
|
|
37
|
+
declare const aeroVariants: {
|
|
38
|
+
readonly light: {
|
|
39
|
+
readonly background: "bg-gradient-to-br from-cyan-400/20 to-blue-400/10";
|
|
40
|
+
readonly backdropBlur: "backdrop-blur-md";
|
|
41
|
+
readonly border: "border border-cyan-300/30";
|
|
42
|
+
readonly shadow: "shadow-aero";
|
|
43
|
+
readonly hover: "hover:from-cyan-400/30 hover:to-blue-400/20 hover:shadow-aero-lg";
|
|
44
|
+
readonly focus: "focus:outline-none focus:ring-2 focus:ring-cyan-300/50";
|
|
45
|
+
};
|
|
46
|
+
readonly medium: {
|
|
47
|
+
readonly background: "bg-gradient-to-br from-sky-400/25 to-cyan-400/15";
|
|
48
|
+
readonly backdropBlur: "backdrop-blur-lg";
|
|
49
|
+
readonly border: "border border-sky-300/40";
|
|
50
|
+
readonly shadow: "shadow-aero-lg";
|
|
51
|
+
readonly hover: "hover:from-sky-400/35 hover:to-cyan-400/25 hover:shadow-[0_8px_32px_0_rgba(56,189,248,0.37)]";
|
|
52
|
+
readonly focus: "focus:outline-none focus:ring-2 focus:ring-sky-300/60";
|
|
53
|
+
};
|
|
54
|
+
readonly dark: {
|
|
55
|
+
readonly background: "bg-gradient-to-br from-blue-500/30 to-cyan-500/20";
|
|
56
|
+
readonly backdropBlur: "backdrop-blur-md";
|
|
57
|
+
readonly border: "border border-blue-300/30";
|
|
58
|
+
readonly shadow: "shadow-aero";
|
|
59
|
+
readonly hover: "hover:from-blue-500/40 hover:to-cyan-500/30 hover:shadow-aero-lg";
|
|
60
|
+
readonly focus: "focus:outline-none focus:ring-2 focus:ring-blue-300/50";
|
|
61
|
+
};
|
|
62
|
+
readonly colored: {
|
|
63
|
+
readonly background: "bg-gradient-to-br from-lime-400/25 via-cyan-400/20 to-blue-400/15";
|
|
64
|
+
readonly backdropBlur: "backdrop-blur-xl";
|
|
65
|
+
readonly border: "border border-lime-300/35";
|
|
66
|
+
readonly shadow: "shadow-aero-lg";
|
|
67
|
+
readonly hover: "hover:from-lime-400/35 hover:via-cyan-400/30 hover:to-blue-400/25 hover:shadow-[0_8px_32px_0_rgba(163,230,53,0.37)]";
|
|
68
|
+
readonly focus: "focus:outline-none focus:ring-2 focus:ring-lime-300/60";
|
|
69
|
+
};
|
|
70
|
+
};
|
|
71
|
+
type GlassVariantType = keyof typeof glassVariants;
|
|
72
|
+
type AeroVariantType = keyof typeof aeroVariants;
|
|
73
|
+
/**
|
|
74
|
+
* Generate glassmorphism class string
|
|
75
|
+
*/
|
|
76
|
+
declare const getGlassClasses: (variant?: GlassVariantType, rounded?: string, includeInteractions?: boolean) => string;
|
|
77
|
+
/**
|
|
78
|
+
* Generate Frutiger Aero class string
|
|
79
|
+
*/
|
|
80
|
+
declare const getAeroClasses: (variant?: AeroVariantType, rounded?: string, includeInteractions?: boolean) => string;
|
|
81
|
+
|
|
82
|
+
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
83
|
+
variant?: GlassVariantType;
|
|
84
|
+
size?: 'sm' | 'md' | 'lg';
|
|
85
|
+
fullWidth?: boolean;
|
|
86
|
+
children: React.ReactNode;
|
|
87
|
+
}
|
|
88
|
+
declare const Button: React.FC<ButtonProps>;
|
|
89
|
+
|
|
90
|
+
interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
91
|
+
variant?: GlassVariantType;
|
|
92
|
+
padding?: 'none' | 'sm' | 'md' | 'lg';
|
|
93
|
+
enableInteractions?: boolean;
|
|
94
|
+
children: React.ReactNode;
|
|
95
|
+
}
|
|
96
|
+
declare const Card: React.FC<CardProps>;
|
|
97
|
+
|
|
98
|
+
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
99
|
+
variant?: GlassVariantType;
|
|
100
|
+
fullWidth?: boolean;
|
|
101
|
+
label?: string;
|
|
102
|
+
}
|
|
103
|
+
declare const Input: React.FC<InputProps>;
|
|
104
|
+
|
|
105
|
+
interface ModalProps {
|
|
106
|
+
isOpen: boolean;
|
|
107
|
+
onClose: () => void;
|
|
108
|
+
variant?: GlassVariantType;
|
|
109
|
+
title?: string;
|
|
110
|
+
children: React.ReactNode;
|
|
111
|
+
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
112
|
+
}
|
|
113
|
+
declare const Modal: React.FC<ModalProps>;
|
|
114
|
+
|
|
115
|
+
interface AeroBubbleProps {
|
|
116
|
+
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
117
|
+
color?: 'cyan' | 'blue' | 'lime' | 'sky';
|
|
118
|
+
className?: string;
|
|
119
|
+
}
|
|
120
|
+
declare const AeroBubble: React.FC<AeroBubbleProps>;
|
|
121
|
+
|
|
122
|
+
interface AccordionItemProps {
|
|
123
|
+
id: string;
|
|
124
|
+
title: string;
|
|
125
|
+
content: React.ReactNode;
|
|
126
|
+
icon?: React.ReactNode;
|
|
127
|
+
}
|
|
128
|
+
interface AccordionProps {
|
|
129
|
+
items: AccordionItemProps[];
|
|
130
|
+
variant?: GlassVariantType;
|
|
131
|
+
allowMultiple?: boolean;
|
|
132
|
+
defaultOpen?: string[];
|
|
133
|
+
className?: string;
|
|
134
|
+
}
|
|
135
|
+
declare const Accordion: React.FC<AccordionProps>;
|
|
136
|
+
|
|
137
|
+
export { Accordion, type AccordionItemProps, type AccordionProps, AeroBubble, type AeroBubbleProps, type AeroVariantType, Button, type ButtonProps, Card, type CardProps, type GlassVariantType, Input, type InputProps, Modal, type ModalProps, aeroVariants, getAeroClasses, getGlassClasses, glassVariants };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,417 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
|
|
30
|
+
// src/components/index.ts
|
|
31
|
+
var index_exports = {};
|
|
32
|
+
__export(index_exports, {
|
|
33
|
+
Accordion: () => Accordion,
|
|
34
|
+
AeroBubble: () => AeroBubble,
|
|
35
|
+
Button: () => Button,
|
|
36
|
+
Card: () => Card,
|
|
37
|
+
Input: () => Input,
|
|
38
|
+
Modal: () => Modal,
|
|
39
|
+
aeroVariants: () => aeroVariants,
|
|
40
|
+
getAeroClasses: () => getAeroClasses,
|
|
41
|
+
getGlassClasses: () => getGlassClasses,
|
|
42
|
+
glassVariants: () => glassVariants
|
|
43
|
+
});
|
|
44
|
+
module.exports = __toCommonJS(index_exports);
|
|
45
|
+
|
|
46
|
+
// src/components/button/button.tsx
|
|
47
|
+
var import_react = __toESM(require("react"));
|
|
48
|
+
|
|
49
|
+
// src/theme/glass.ts
|
|
50
|
+
var glassVariants = {
|
|
51
|
+
light: {
|
|
52
|
+
background: "bg-white/5",
|
|
53
|
+
backdropBlur: "backdrop-blur-[2px]",
|
|
54
|
+
border: "border border-white/15",
|
|
55
|
+
shadow: "shadow-lg",
|
|
56
|
+
hover: "hover:bg-white/10 hover:shadow-xl",
|
|
57
|
+
focus: "focus:outline-none focus:ring-2 focus:ring-white/10"
|
|
58
|
+
},
|
|
59
|
+
medium: {
|
|
60
|
+
background: "bg-white/20",
|
|
61
|
+
backdropBlur: "backdrop-blur-lg",
|
|
62
|
+
border: "border border-white/30",
|
|
63
|
+
shadow: "shadow-xl",
|
|
64
|
+
hover: "hover:bg-white/30 hover:shadow-2xl",
|
|
65
|
+
focus: "focus:outline-none focus:ring-2 focus:ring-white/50"
|
|
66
|
+
},
|
|
67
|
+
dark: {
|
|
68
|
+
background: "bg-black/20",
|
|
69
|
+
backdropBlur: "backdrop-blur-md",
|
|
70
|
+
border: "border border-white/10",
|
|
71
|
+
shadow: "shadow-lg",
|
|
72
|
+
hover: "hover:bg-black/30 hover:shadow-xl",
|
|
73
|
+
focus: "focus:outline-none focus:ring-2 focus:ring-white/40"
|
|
74
|
+
},
|
|
75
|
+
colored: {
|
|
76
|
+
background: "bg-gradient-to-br from-white/20 to-white/10",
|
|
77
|
+
backdropBlur: "backdrop-blur-xl",
|
|
78
|
+
border: "border border-white/25",
|
|
79
|
+
shadow: "shadow-2xl",
|
|
80
|
+
hover: "hover:from-white/30 hover:to-white/20 hover:shadow-[0_8px_32px_0_rgba(255,255,255,0.37)]",
|
|
81
|
+
focus: "focus:outline-none focus:ring-2 focus:ring-white/60"
|
|
82
|
+
}
|
|
83
|
+
};
|
|
84
|
+
var aeroVariants = {
|
|
85
|
+
light: {
|
|
86
|
+
background: "bg-gradient-to-br from-cyan-400/20 to-blue-400/10",
|
|
87
|
+
backdropBlur: "backdrop-blur-md",
|
|
88
|
+
border: "border border-cyan-300/30",
|
|
89
|
+
shadow: "shadow-aero",
|
|
90
|
+
hover: "hover:from-cyan-400/30 hover:to-blue-400/20 hover:shadow-aero-lg",
|
|
91
|
+
focus: "focus:outline-none focus:ring-2 focus:ring-cyan-300/50"
|
|
92
|
+
},
|
|
93
|
+
medium: {
|
|
94
|
+
background: "bg-gradient-to-br from-sky-400/25 to-cyan-400/15",
|
|
95
|
+
backdropBlur: "backdrop-blur-lg",
|
|
96
|
+
border: "border border-sky-300/40",
|
|
97
|
+
shadow: "shadow-aero-lg",
|
|
98
|
+
hover: "hover:from-sky-400/35 hover:to-cyan-400/25 hover:shadow-[0_8px_32px_0_rgba(56,189,248,0.37)]",
|
|
99
|
+
focus: "focus:outline-none focus:ring-2 focus:ring-sky-300/60"
|
|
100
|
+
},
|
|
101
|
+
dark: {
|
|
102
|
+
background: "bg-gradient-to-br from-blue-500/30 to-cyan-500/20",
|
|
103
|
+
backdropBlur: "backdrop-blur-md",
|
|
104
|
+
border: "border border-blue-300/30",
|
|
105
|
+
shadow: "shadow-aero",
|
|
106
|
+
hover: "hover:from-blue-500/40 hover:to-cyan-500/30 hover:shadow-aero-lg",
|
|
107
|
+
focus: "focus:outline-none focus:ring-2 focus:ring-blue-300/50"
|
|
108
|
+
},
|
|
109
|
+
colored: {
|
|
110
|
+
background: "bg-gradient-to-br from-lime-400/25 via-cyan-400/20 to-blue-400/15",
|
|
111
|
+
backdropBlur: "backdrop-blur-xl",
|
|
112
|
+
border: "border border-lime-300/35",
|
|
113
|
+
shadow: "shadow-aero-lg",
|
|
114
|
+
hover: "hover:from-lime-400/35 hover:via-cyan-400/30 hover:to-blue-400/25 hover:shadow-[0_8px_32px_0_rgba(163,230,53,0.37)]",
|
|
115
|
+
focus: "focus:outline-none focus:ring-2 focus:ring-lime-300/60"
|
|
116
|
+
}
|
|
117
|
+
};
|
|
118
|
+
var getGlassClasses = (variant = "light", rounded = "rounded-xl", includeInteractions = true) => {
|
|
119
|
+
const v = glassVariants[variant];
|
|
120
|
+
const interactions = includeInteractions ? `transition-all duration-300 ${v.hover} ${v.focus} active:scale-95` : "";
|
|
121
|
+
return `${v.background} ${v.backdropBlur} ${v.border} ${v.shadow} ${rounded} ${interactions}`;
|
|
122
|
+
};
|
|
123
|
+
var getAeroClasses = (variant = "light", rounded = "rounded-xl", includeInteractions = true) => {
|
|
124
|
+
const v = aeroVariants[variant];
|
|
125
|
+
const interactions = includeInteractions ? `transition-all duration-300 ${v.hover} ${v.focus} active:scale-95` : "";
|
|
126
|
+
return `${v.background} ${v.backdropBlur} ${v.border} ${v.shadow} ${rounded} ${interactions}`;
|
|
127
|
+
};
|
|
128
|
+
|
|
129
|
+
// src/components/button/button.tsx
|
|
130
|
+
var sizeClasses = {
|
|
131
|
+
sm: "px-4 py-2 text-sm",
|
|
132
|
+
md: "px-6 py-3 text-base",
|
|
133
|
+
lg: "px-8 py-4 text-lg"
|
|
134
|
+
};
|
|
135
|
+
var Button = ({
|
|
136
|
+
variant = "light",
|
|
137
|
+
size = "md",
|
|
138
|
+
fullWidth = false,
|
|
139
|
+
children,
|
|
140
|
+
className = "",
|
|
141
|
+
disabled = false,
|
|
142
|
+
...props
|
|
143
|
+
}) => {
|
|
144
|
+
const glassClasses = getGlassClasses(variant);
|
|
145
|
+
const sizeClass = sizeClasses[size];
|
|
146
|
+
const widthClass = fullWidth ? "w-full" : "";
|
|
147
|
+
const disabledClass = disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer";
|
|
148
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
149
|
+
"button",
|
|
150
|
+
{
|
|
151
|
+
className: `
|
|
152
|
+
${glassClasses}
|
|
153
|
+
${sizeClass}
|
|
154
|
+
${widthClass}
|
|
155
|
+
${disabledClass}
|
|
156
|
+
font-medium text-white
|
|
157
|
+
${className}
|
|
158
|
+
`,
|
|
159
|
+
disabled,
|
|
160
|
+
...props
|
|
161
|
+
},
|
|
162
|
+
children
|
|
163
|
+
);
|
|
164
|
+
};
|
|
165
|
+
|
|
166
|
+
// src/components/card/card.tsx
|
|
167
|
+
var import_react2 = __toESM(require("react"));
|
|
168
|
+
var paddingClasses = {
|
|
169
|
+
none: "",
|
|
170
|
+
sm: "p-4",
|
|
171
|
+
md: "p-6",
|
|
172
|
+
lg: "p-8"
|
|
173
|
+
};
|
|
174
|
+
var Card = ({
|
|
175
|
+
variant = "light",
|
|
176
|
+
padding = "md",
|
|
177
|
+
enableInteractions = false,
|
|
178
|
+
children,
|
|
179
|
+
className = "",
|
|
180
|
+
...props
|
|
181
|
+
}) => {
|
|
182
|
+
const glassClasses = getGlassClasses(variant, void 0, enableInteractions);
|
|
183
|
+
const paddingClass = paddingClasses[padding];
|
|
184
|
+
return /* @__PURE__ */ import_react2.default.createElement(
|
|
185
|
+
"div",
|
|
186
|
+
{
|
|
187
|
+
className: `
|
|
188
|
+
${glassClasses}
|
|
189
|
+
${paddingClass}
|
|
190
|
+
${className}
|
|
191
|
+
`,
|
|
192
|
+
...props
|
|
193
|
+
},
|
|
194
|
+
children
|
|
195
|
+
);
|
|
196
|
+
};
|
|
197
|
+
|
|
198
|
+
// src/components/input/input.tsx
|
|
199
|
+
var import_react3 = __toESM(require("react"));
|
|
200
|
+
var Input = ({
|
|
201
|
+
variant = "light",
|
|
202
|
+
fullWidth = false,
|
|
203
|
+
label,
|
|
204
|
+
className = "",
|
|
205
|
+
id,
|
|
206
|
+
...props
|
|
207
|
+
}) => {
|
|
208
|
+
const glassClasses = getGlassClasses(variant);
|
|
209
|
+
const widthClass = fullWidth ? "w-full" : "";
|
|
210
|
+
const inputId = id || label?.toLowerCase().replace(/\s+/g, "-");
|
|
211
|
+
return /* @__PURE__ */ import_react3.default.createElement("div", { className: `flex flex-col gap-2 ${widthClass}` }, label && /* @__PURE__ */ import_react3.default.createElement(
|
|
212
|
+
"label",
|
|
213
|
+
{
|
|
214
|
+
htmlFor: inputId,
|
|
215
|
+
className: "text-white text-sm font-medium pl-1"
|
|
216
|
+
},
|
|
217
|
+
label
|
|
218
|
+
), /* @__PURE__ */ import_react3.default.createElement(
|
|
219
|
+
"input",
|
|
220
|
+
{
|
|
221
|
+
id: inputId,
|
|
222
|
+
className: `
|
|
223
|
+
${glassClasses}
|
|
224
|
+
${widthClass}
|
|
225
|
+
px-4 py-3
|
|
226
|
+
text-white placeholder-white/50
|
|
227
|
+
transition-all duration-300
|
|
228
|
+
focus:outline-none focus:ring-2 focus:ring-white/50
|
|
229
|
+
${className}
|
|
230
|
+
`,
|
|
231
|
+
...props
|
|
232
|
+
}
|
|
233
|
+
));
|
|
234
|
+
};
|
|
235
|
+
|
|
236
|
+
// src/components/modal/modal.tsx
|
|
237
|
+
var import_react4 = __toESM(require("react"));
|
|
238
|
+
var sizeClasses2 = {
|
|
239
|
+
sm: "max-w-sm",
|
|
240
|
+
md: "max-w-md",
|
|
241
|
+
lg: "max-w-lg",
|
|
242
|
+
xl: "max-w-xl"
|
|
243
|
+
};
|
|
244
|
+
var Modal = ({
|
|
245
|
+
isOpen,
|
|
246
|
+
onClose,
|
|
247
|
+
variant = "medium",
|
|
248
|
+
title,
|
|
249
|
+
children,
|
|
250
|
+
size = "md"
|
|
251
|
+
}) => {
|
|
252
|
+
if (!isOpen) return null;
|
|
253
|
+
const glassClasses = getGlassClasses(variant);
|
|
254
|
+
const sizeClass = sizeClasses2[size];
|
|
255
|
+
return /* @__PURE__ */ import_react4.default.createElement(
|
|
256
|
+
"div",
|
|
257
|
+
{
|
|
258
|
+
className: "fixed inset-0 z-50 flex items-center justify-center p-4 animate-fadeIn",
|
|
259
|
+
onClick: onClose
|
|
260
|
+
},
|
|
261
|
+
/* @__PURE__ */ import_react4.default.createElement("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm" }),
|
|
262
|
+
/* @__PURE__ */ import_react4.default.createElement(
|
|
263
|
+
"div",
|
|
264
|
+
{
|
|
265
|
+
className: `
|
|
266
|
+
${glassClasses}
|
|
267
|
+
${sizeClass}
|
|
268
|
+
w-full p-6 relative z-10
|
|
269
|
+
animate-scaleIn
|
|
270
|
+
`,
|
|
271
|
+
onClick: (e) => e.stopPropagation()
|
|
272
|
+
},
|
|
273
|
+
title && /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex items-center justify-between mb-4" }, /* @__PURE__ */ import_react4.default.createElement("h2", { className: "text-2xl font-bold text-white" }, title), /* @__PURE__ */ import_react4.default.createElement(
|
|
274
|
+
"button",
|
|
275
|
+
{
|
|
276
|
+
onClick: onClose,
|
|
277
|
+
className: "text-white/70 hover:text-white transition-colors p-1",
|
|
278
|
+
"aria-label": "Close modal"
|
|
279
|
+
},
|
|
280
|
+
/* @__PURE__ */ import_react4.default.createElement(
|
|
281
|
+
"svg",
|
|
282
|
+
{
|
|
283
|
+
className: "w-6 h-6",
|
|
284
|
+
fill: "none",
|
|
285
|
+
strokeLinecap: "round",
|
|
286
|
+
strokeLinejoin: "round",
|
|
287
|
+
strokeWidth: "2",
|
|
288
|
+
viewBox: "0 0 24 24",
|
|
289
|
+
stroke: "currentColor"
|
|
290
|
+
},
|
|
291
|
+
/* @__PURE__ */ import_react4.default.createElement("path", { d: "M6 18L18 6M6 6l12 12" })
|
|
292
|
+
)
|
|
293
|
+
)),
|
|
294
|
+
/* @__PURE__ */ import_react4.default.createElement("div", { className: "text-white" }, children)
|
|
295
|
+
)
|
|
296
|
+
);
|
|
297
|
+
};
|
|
298
|
+
|
|
299
|
+
// src/components/aero-bubble/aero-bubble.tsx
|
|
300
|
+
var import_react5 = __toESM(require("react"));
|
|
301
|
+
var sizeClasses3 = {
|
|
302
|
+
sm: "w-12 h-12",
|
|
303
|
+
md: "w-20 h-20",
|
|
304
|
+
lg: "w-32 h-32",
|
|
305
|
+
xl: "w-48 h-48"
|
|
306
|
+
};
|
|
307
|
+
var colorClasses = {
|
|
308
|
+
cyan: "bg-gradient-to-br from-cyan-300/40 to-cyan-500/20",
|
|
309
|
+
blue: "bg-gradient-to-br from-blue-300/40 to-blue-500/20",
|
|
310
|
+
lime: "bg-gradient-to-br from-lime-300/40 to-lime-500/20",
|
|
311
|
+
sky: "bg-gradient-to-br from-sky-300/40 to-sky-500/20"
|
|
312
|
+
};
|
|
313
|
+
var AeroBubble = ({
|
|
314
|
+
size = "md",
|
|
315
|
+
color = "cyan",
|
|
316
|
+
className = ""
|
|
317
|
+
}) => {
|
|
318
|
+
return /* @__PURE__ */ import_react5.default.createElement(
|
|
319
|
+
"div",
|
|
320
|
+
{
|
|
321
|
+
className: `
|
|
322
|
+
${sizeClasses3[size]}
|
|
323
|
+
${colorClasses[color]}
|
|
324
|
+
rounded-full
|
|
325
|
+
backdrop-blur-sm
|
|
326
|
+
border border-white/30
|
|
327
|
+
shadow-[0_8px_32px_0_rgba(31,38,135,0.37)]
|
|
328
|
+
relative
|
|
329
|
+
overflow-hidden
|
|
330
|
+
${className}
|
|
331
|
+
`
|
|
332
|
+
},
|
|
333
|
+
/* @__PURE__ */ import_react5.default.createElement("div", { className: "absolute inset-0 bg-gradient-to-br from-white/40 via-transparent to-transparent rounded-full" }),
|
|
334
|
+
/* @__PURE__ */ import_react5.default.createElement("div", { className: "absolute bottom-2 right-2 w-1/3 h-1/3 bg-white/30 rounded-full blur-md" })
|
|
335
|
+
);
|
|
336
|
+
};
|
|
337
|
+
|
|
338
|
+
// src/components/accordion/accordion.tsx
|
|
339
|
+
var import_react6 = __toESM(require("react"));
|
|
340
|
+
var Accordion = ({
|
|
341
|
+
items,
|
|
342
|
+
variant = "light",
|
|
343
|
+
allowMultiple = false,
|
|
344
|
+
defaultOpen = [],
|
|
345
|
+
className = ""
|
|
346
|
+
}) => {
|
|
347
|
+
const [openItems, setOpenItems] = (0, import_react6.useState)(defaultOpen);
|
|
348
|
+
const toggleItem = (id) => {
|
|
349
|
+
if (allowMultiple) {
|
|
350
|
+
setOpenItems(
|
|
351
|
+
(prev) => prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
|
|
352
|
+
);
|
|
353
|
+
} else {
|
|
354
|
+
setOpenItems((prev) => prev.includes(id) ? [] : [id]);
|
|
355
|
+
}
|
|
356
|
+
};
|
|
357
|
+
const isOpen = (id) => openItems.includes(id);
|
|
358
|
+
return /* @__PURE__ */ import_react6.default.createElement("div", { className }, items.map((item, index) => {
|
|
359
|
+
const open = isOpen(item.id);
|
|
360
|
+
const glassClasses = getGlassClasses(variant, "rounded-none", false);
|
|
361
|
+
const isFirst = index === 0;
|
|
362
|
+
const isLast = index === items.length - 1;
|
|
363
|
+
return /* @__PURE__ */ import_react6.default.createElement(
|
|
364
|
+
"div",
|
|
365
|
+
{
|
|
366
|
+
key: item.id,
|
|
367
|
+
className: `${glassClasses} ${isFirst ? "rounded-t-lg" : ""} ${isLast ? "rounded-b-lg" : ""} ${!isLast ? "border-b border-white/10" : ""}`
|
|
368
|
+
},
|
|
369
|
+
/* @__PURE__ */ import_react6.default.createElement(
|
|
370
|
+
"button",
|
|
371
|
+
{
|
|
372
|
+
onClick: () => toggleItem(item.id),
|
|
373
|
+
className: "w-full px-4 py-4 flex items-center justify-between text-left text-white font-medium hover:underline transition-all duration-200"
|
|
374
|
+
},
|
|
375
|
+
/* @__PURE__ */ import_react6.default.createElement("div", { className: "flex items-center gap-2" }, item.icon && /* @__PURE__ */ import_react6.default.createElement("span", { className: "flex items-center text-base" }, item.icon), /* @__PURE__ */ import_react6.default.createElement("span", { className: "text-sm font-medium" }, item.title)),
|
|
376
|
+
/* @__PURE__ */ import_react6.default.createElement(
|
|
377
|
+
"svg",
|
|
378
|
+
{
|
|
379
|
+
className: `w-4 h-4 shrink-0 transition-transform duration-200 text-white/70 ${open ? "rotate-180" : ""}`,
|
|
380
|
+
fill: "none",
|
|
381
|
+
stroke: "currentColor",
|
|
382
|
+
strokeWidth: "2",
|
|
383
|
+
viewBox: "0 0 24 24"
|
|
384
|
+
},
|
|
385
|
+
/* @__PURE__ */ import_react6.default.createElement(
|
|
386
|
+
"path",
|
|
387
|
+
{
|
|
388
|
+
strokeLinecap: "round",
|
|
389
|
+
strokeLinejoin: "round",
|
|
390
|
+
d: "M19 9l-7 7-7-7"
|
|
391
|
+
}
|
|
392
|
+
)
|
|
393
|
+
)
|
|
394
|
+
),
|
|
395
|
+
/* @__PURE__ */ import_react6.default.createElement(
|
|
396
|
+
"div",
|
|
397
|
+
{
|
|
398
|
+
className: `grid transition-all duration-200 ease-in-out ${open ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"}`
|
|
399
|
+
},
|
|
400
|
+
/* @__PURE__ */ import_react6.default.createElement("div", { className: "overflow-hidden" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "px-4 pb-4 pt-0 text-sm text-white/80 leading-relaxed" }, item.content))
|
|
401
|
+
)
|
|
402
|
+
);
|
|
403
|
+
}));
|
|
404
|
+
};
|
|
405
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
406
|
+
0 && (module.exports = {
|
|
407
|
+
Accordion,
|
|
408
|
+
AeroBubble,
|
|
409
|
+
Button,
|
|
410
|
+
Card,
|
|
411
|
+
Input,
|
|
412
|
+
Modal,
|
|
413
|
+
aeroVariants,
|
|
414
|
+
getAeroClasses,
|
|
415
|
+
getGlassClasses,
|
|
416
|
+
glassVariants
|
|
417
|
+
});
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,371 @@
|
|
|
1
|
+
// src/components/button/button.tsx
|
|
2
|
+
import React from "react";
|
|
3
|
+
|
|
4
|
+
// src/theme/glass.ts
|
|
5
|
+
var glassVariants = {
|
|
6
|
+
light: {
|
|
7
|
+
background: "bg-white/5",
|
|
8
|
+
backdropBlur: "backdrop-blur-[2px]",
|
|
9
|
+
border: "border border-white/15",
|
|
10
|
+
shadow: "shadow-lg",
|
|
11
|
+
hover: "hover:bg-white/10 hover:shadow-xl",
|
|
12
|
+
focus: "focus:outline-none focus:ring-2 focus:ring-white/10"
|
|
13
|
+
},
|
|
14
|
+
medium: {
|
|
15
|
+
background: "bg-white/20",
|
|
16
|
+
backdropBlur: "backdrop-blur-lg",
|
|
17
|
+
border: "border border-white/30",
|
|
18
|
+
shadow: "shadow-xl",
|
|
19
|
+
hover: "hover:bg-white/30 hover:shadow-2xl",
|
|
20
|
+
focus: "focus:outline-none focus:ring-2 focus:ring-white/50"
|
|
21
|
+
},
|
|
22
|
+
dark: {
|
|
23
|
+
background: "bg-black/20",
|
|
24
|
+
backdropBlur: "backdrop-blur-md",
|
|
25
|
+
border: "border border-white/10",
|
|
26
|
+
shadow: "shadow-lg",
|
|
27
|
+
hover: "hover:bg-black/30 hover:shadow-xl",
|
|
28
|
+
focus: "focus:outline-none focus:ring-2 focus:ring-white/40"
|
|
29
|
+
},
|
|
30
|
+
colored: {
|
|
31
|
+
background: "bg-gradient-to-br from-white/20 to-white/10",
|
|
32
|
+
backdropBlur: "backdrop-blur-xl",
|
|
33
|
+
border: "border border-white/25",
|
|
34
|
+
shadow: "shadow-2xl",
|
|
35
|
+
hover: "hover:from-white/30 hover:to-white/20 hover:shadow-[0_8px_32px_0_rgba(255,255,255,0.37)]",
|
|
36
|
+
focus: "focus:outline-none focus:ring-2 focus:ring-white/60"
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
var aeroVariants = {
|
|
40
|
+
light: {
|
|
41
|
+
background: "bg-gradient-to-br from-cyan-400/20 to-blue-400/10",
|
|
42
|
+
backdropBlur: "backdrop-blur-md",
|
|
43
|
+
border: "border border-cyan-300/30",
|
|
44
|
+
shadow: "shadow-aero",
|
|
45
|
+
hover: "hover:from-cyan-400/30 hover:to-blue-400/20 hover:shadow-aero-lg",
|
|
46
|
+
focus: "focus:outline-none focus:ring-2 focus:ring-cyan-300/50"
|
|
47
|
+
},
|
|
48
|
+
medium: {
|
|
49
|
+
background: "bg-gradient-to-br from-sky-400/25 to-cyan-400/15",
|
|
50
|
+
backdropBlur: "backdrop-blur-lg",
|
|
51
|
+
border: "border border-sky-300/40",
|
|
52
|
+
shadow: "shadow-aero-lg",
|
|
53
|
+
hover: "hover:from-sky-400/35 hover:to-cyan-400/25 hover:shadow-[0_8px_32px_0_rgba(56,189,248,0.37)]",
|
|
54
|
+
focus: "focus:outline-none focus:ring-2 focus:ring-sky-300/60"
|
|
55
|
+
},
|
|
56
|
+
dark: {
|
|
57
|
+
background: "bg-gradient-to-br from-blue-500/30 to-cyan-500/20",
|
|
58
|
+
backdropBlur: "backdrop-blur-md",
|
|
59
|
+
border: "border border-blue-300/30",
|
|
60
|
+
shadow: "shadow-aero",
|
|
61
|
+
hover: "hover:from-blue-500/40 hover:to-cyan-500/30 hover:shadow-aero-lg",
|
|
62
|
+
focus: "focus:outline-none focus:ring-2 focus:ring-blue-300/50"
|
|
63
|
+
},
|
|
64
|
+
colored: {
|
|
65
|
+
background: "bg-gradient-to-br from-lime-400/25 via-cyan-400/20 to-blue-400/15",
|
|
66
|
+
backdropBlur: "backdrop-blur-xl",
|
|
67
|
+
border: "border border-lime-300/35",
|
|
68
|
+
shadow: "shadow-aero-lg",
|
|
69
|
+
hover: "hover:from-lime-400/35 hover:via-cyan-400/30 hover:to-blue-400/25 hover:shadow-[0_8px_32px_0_rgba(163,230,53,0.37)]",
|
|
70
|
+
focus: "focus:outline-none focus:ring-2 focus:ring-lime-300/60"
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
var getGlassClasses = (variant = "light", rounded = "rounded-xl", includeInteractions = true) => {
|
|
74
|
+
const v = glassVariants[variant];
|
|
75
|
+
const interactions = includeInteractions ? `transition-all duration-300 ${v.hover} ${v.focus} active:scale-95` : "";
|
|
76
|
+
return `${v.background} ${v.backdropBlur} ${v.border} ${v.shadow} ${rounded} ${interactions}`;
|
|
77
|
+
};
|
|
78
|
+
var getAeroClasses = (variant = "light", rounded = "rounded-xl", includeInteractions = true) => {
|
|
79
|
+
const v = aeroVariants[variant];
|
|
80
|
+
const interactions = includeInteractions ? `transition-all duration-300 ${v.hover} ${v.focus} active:scale-95` : "";
|
|
81
|
+
return `${v.background} ${v.backdropBlur} ${v.border} ${v.shadow} ${rounded} ${interactions}`;
|
|
82
|
+
};
|
|
83
|
+
|
|
84
|
+
// src/components/button/button.tsx
|
|
85
|
+
var sizeClasses = {
|
|
86
|
+
sm: "px-4 py-2 text-sm",
|
|
87
|
+
md: "px-6 py-3 text-base",
|
|
88
|
+
lg: "px-8 py-4 text-lg"
|
|
89
|
+
};
|
|
90
|
+
var Button = ({
|
|
91
|
+
variant = "light",
|
|
92
|
+
size = "md",
|
|
93
|
+
fullWidth = false,
|
|
94
|
+
children,
|
|
95
|
+
className = "",
|
|
96
|
+
disabled = false,
|
|
97
|
+
...props
|
|
98
|
+
}) => {
|
|
99
|
+
const glassClasses = getGlassClasses(variant);
|
|
100
|
+
const sizeClass = sizeClasses[size];
|
|
101
|
+
const widthClass = fullWidth ? "w-full" : "";
|
|
102
|
+
const disabledClass = disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer";
|
|
103
|
+
return /* @__PURE__ */ React.createElement(
|
|
104
|
+
"button",
|
|
105
|
+
{
|
|
106
|
+
className: `
|
|
107
|
+
${glassClasses}
|
|
108
|
+
${sizeClass}
|
|
109
|
+
${widthClass}
|
|
110
|
+
${disabledClass}
|
|
111
|
+
font-medium text-white
|
|
112
|
+
${className}
|
|
113
|
+
`,
|
|
114
|
+
disabled,
|
|
115
|
+
...props
|
|
116
|
+
},
|
|
117
|
+
children
|
|
118
|
+
);
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
// src/components/card/card.tsx
|
|
122
|
+
import React2 from "react";
|
|
123
|
+
var paddingClasses = {
|
|
124
|
+
none: "",
|
|
125
|
+
sm: "p-4",
|
|
126
|
+
md: "p-6",
|
|
127
|
+
lg: "p-8"
|
|
128
|
+
};
|
|
129
|
+
var Card = ({
|
|
130
|
+
variant = "light",
|
|
131
|
+
padding = "md",
|
|
132
|
+
enableInteractions = false,
|
|
133
|
+
children,
|
|
134
|
+
className = "",
|
|
135
|
+
...props
|
|
136
|
+
}) => {
|
|
137
|
+
const glassClasses = getGlassClasses(variant, void 0, enableInteractions);
|
|
138
|
+
const paddingClass = paddingClasses[padding];
|
|
139
|
+
return /* @__PURE__ */ React2.createElement(
|
|
140
|
+
"div",
|
|
141
|
+
{
|
|
142
|
+
className: `
|
|
143
|
+
${glassClasses}
|
|
144
|
+
${paddingClass}
|
|
145
|
+
${className}
|
|
146
|
+
`,
|
|
147
|
+
...props
|
|
148
|
+
},
|
|
149
|
+
children
|
|
150
|
+
);
|
|
151
|
+
};
|
|
152
|
+
|
|
153
|
+
// src/components/input/input.tsx
|
|
154
|
+
import React3 from "react";
|
|
155
|
+
var Input = ({
|
|
156
|
+
variant = "light",
|
|
157
|
+
fullWidth = false,
|
|
158
|
+
label,
|
|
159
|
+
className = "",
|
|
160
|
+
id,
|
|
161
|
+
...props
|
|
162
|
+
}) => {
|
|
163
|
+
const glassClasses = getGlassClasses(variant);
|
|
164
|
+
const widthClass = fullWidth ? "w-full" : "";
|
|
165
|
+
const inputId = id || label?.toLowerCase().replace(/\s+/g, "-");
|
|
166
|
+
return /* @__PURE__ */ React3.createElement("div", { className: `flex flex-col gap-2 ${widthClass}` }, label && /* @__PURE__ */ React3.createElement(
|
|
167
|
+
"label",
|
|
168
|
+
{
|
|
169
|
+
htmlFor: inputId,
|
|
170
|
+
className: "text-white text-sm font-medium pl-1"
|
|
171
|
+
},
|
|
172
|
+
label
|
|
173
|
+
), /* @__PURE__ */ React3.createElement(
|
|
174
|
+
"input",
|
|
175
|
+
{
|
|
176
|
+
id: inputId,
|
|
177
|
+
className: `
|
|
178
|
+
${glassClasses}
|
|
179
|
+
${widthClass}
|
|
180
|
+
px-4 py-3
|
|
181
|
+
text-white placeholder-white/50
|
|
182
|
+
transition-all duration-300
|
|
183
|
+
focus:outline-none focus:ring-2 focus:ring-white/50
|
|
184
|
+
${className}
|
|
185
|
+
`,
|
|
186
|
+
...props
|
|
187
|
+
}
|
|
188
|
+
));
|
|
189
|
+
};
|
|
190
|
+
|
|
191
|
+
// src/components/modal/modal.tsx
|
|
192
|
+
import React4 from "react";
|
|
193
|
+
var sizeClasses2 = {
|
|
194
|
+
sm: "max-w-sm",
|
|
195
|
+
md: "max-w-md",
|
|
196
|
+
lg: "max-w-lg",
|
|
197
|
+
xl: "max-w-xl"
|
|
198
|
+
};
|
|
199
|
+
var Modal = ({
|
|
200
|
+
isOpen,
|
|
201
|
+
onClose,
|
|
202
|
+
variant = "medium",
|
|
203
|
+
title,
|
|
204
|
+
children,
|
|
205
|
+
size = "md"
|
|
206
|
+
}) => {
|
|
207
|
+
if (!isOpen) return null;
|
|
208
|
+
const glassClasses = getGlassClasses(variant);
|
|
209
|
+
const sizeClass = sizeClasses2[size];
|
|
210
|
+
return /* @__PURE__ */ React4.createElement(
|
|
211
|
+
"div",
|
|
212
|
+
{
|
|
213
|
+
className: "fixed inset-0 z-50 flex items-center justify-center p-4 animate-fadeIn",
|
|
214
|
+
onClick: onClose
|
|
215
|
+
},
|
|
216
|
+
/* @__PURE__ */ React4.createElement("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm" }),
|
|
217
|
+
/* @__PURE__ */ React4.createElement(
|
|
218
|
+
"div",
|
|
219
|
+
{
|
|
220
|
+
className: `
|
|
221
|
+
${glassClasses}
|
|
222
|
+
${sizeClass}
|
|
223
|
+
w-full p-6 relative z-10
|
|
224
|
+
animate-scaleIn
|
|
225
|
+
`,
|
|
226
|
+
onClick: (e) => e.stopPropagation()
|
|
227
|
+
},
|
|
228
|
+
title && /* @__PURE__ */ React4.createElement("div", { className: "flex items-center justify-between mb-4" }, /* @__PURE__ */ React4.createElement("h2", { className: "text-2xl font-bold text-white" }, title), /* @__PURE__ */ React4.createElement(
|
|
229
|
+
"button",
|
|
230
|
+
{
|
|
231
|
+
onClick: onClose,
|
|
232
|
+
className: "text-white/70 hover:text-white transition-colors p-1",
|
|
233
|
+
"aria-label": "Close modal"
|
|
234
|
+
},
|
|
235
|
+
/* @__PURE__ */ React4.createElement(
|
|
236
|
+
"svg",
|
|
237
|
+
{
|
|
238
|
+
className: "w-6 h-6",
|
|
239
|
+
fill: "none",
|
|
240
|
+
strokeLinecap: "round",
|
|
241
|
+
strokeLinejoin: "round",
|
|
242
|
+
strokeWidth: "2",
|
|
243
|
+
viewBox: "0 0 24 24",
|
|
244
|
+
stroke: "currentColor"
|
|
245
|
+
},
|
|
246
|
+
/* @__PURE__ */ React4.createElement("path", { d: "M6 18L18 6M6 6l12 12" })
|
|
247
|
+
)
|
|
248
|
+
)),
|
|
249
|
+
/* @__PURE__ */ React4.createElement("div", { className: "text-white" }, children)
|
|
250
|
+
)
|
|
251
|
+
);
|
|
252
|
+
};
|
|
253
|
+
|
|
254
|
+
// src/components/aero-bubble/aero-bubble.tsx
|
|
255
|
+
import React5 from "react";
|
|
256
|
+
var sizeClasses3 = {
|
|
257
|
+
sm: "w-12 h-12",
|
|
258
|
+
md: "w-20 h-20",
|
|
259
|
+
lg: "w-32 h-32",
|
|
260
|
+
xl: "w-48 h-48"
|
|
261
|
+
};
|
|
262
|
+
var colorClasses = {
|
|
263
|
+
cyan: "bg-gradient-to-br from-cyan-300/40 to-cyan-500/20",
|
|
264
|
+
blue: "bg-gradient-to-br from-blue-300/40 to-blue-500/20",
|
|
265
|
+
lime: "bg-gradient-to-br from-lime-300/40 to-lime-500/20",
|
|
266
|
+
sky: "bg-gradient-to-br from-sky-300/40 to-sky-500/20"
|
|
267
|
+
};
|
|
268
|
+
var AeroBubble = ({
|
|
269
|
+
size = "md",
|
|
270
|
+
color = "cyan",
|
|
271
|
+
className = ""
|
|
272
|
+
}) => {
|
|
273
|
+
return /* @__PURE__ */ React5.createElement(
|
|
274
|
+
"div",
|
|
275
|
+
{
|
|
276
|
+
className: `
|
|
277
|
+
${sizeClasses3[size]}
|
|
278
|
+
${colorClasses[color]}
|
|
279
|
+
rounded-full
|
|
280
|
+
backdrop-blur-sm
|
|
281
|
+
border border-white/30
|
|
282
|
+
shadow-[0_8px_32px_0_rgba(31,38,135,0.37)]
|
|
283
|
+
relative
|
|
284
|
+
overflow-hidden
|
|
285
|
+
${className}
|
|
286
|
+
`
|
|
287
|
+
},
|
|
288
|
+
/* @__PURE__ */ React5.createElement("div", { className: "absolute inset-0 bg-gradient-to-br from-white/40 via-transparent to-transparent rounded-full" }),
|
|
289
|
+
/* @__PURE__ */ React5.createElement("div", { className: "absolute bottom-2 right-2 w-1/3 h-1/3 bg-white/30 rounded-full blur-md" })
|
|
290
|
+
);
|
|
291
|
+
};
|
|
292
|
+
|
|
293
|
+
// src/components/accordion/accordion.tsx
|
|
294
|
+
import React6, { useState } from "react";
|
|
295
|
+
var Accordion = ({
|
|
296
|
+
items,
|
|
297
|
+
variant = "light",
|
|
298
|
+
allowMultiple = false,
|
|
299
|
+
defaultOpen = [],
|
|
300
|
+
className = ""
|
|
301
|
+
}) => {
|
|
302
|
+
const [openItems, setOpenItems] = useState(defaultOpen);
|
|
303
|
+
const toggleItem = (id) => {
|
|
304
|
+
if (allowMultiple) {
|
|
305
|
+
setOpenItems(
|
|
306
|
+
(prev) => prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
|
|
307
|
+
);
|
|
308
|
+
} else {
|
|
309
|
+
setOpenItems((prev) => prev.includes(id) ? [] : [id]);
|
|
310
|
+
}
|
|
311
|
+
};
|
|
312
|
+
const isOpen = (id) => openItems.includes(id);
|
|
313
|
+
return /* @__PURE__ */ React6.createElement("div", { className }, items.map((item, index) => {
|
|
314
|
+
const open = isOpen(item.id);
|
|
315
|
+
const glassClasses = getGlassClasses(variant, "rounded-none", false);
|
|
316
|
+
const isFirst = index === 0;
|
|
317
|
+
const isLast = index === items.length - 1;
|
|
318
|
+
return /* @__PURE__ */ React6.createElement(
|
|
319
|
+
"div",
|
|
320
|
+
{
|
|
321
|
+
key: item.id,
|
|
322
|
+
className: `${glassClasses} ${isFirst ? "rounded-t-lg" : ""} ${isLast ? "rounded-b-lg" : ""} ${!isLast ? "border-b border-white/10" : ""}`
|
|
323
|
+
},
|
|
324
|
+
/* @__PURE__ */ React6.createElement(
|
|
325
|
+
"button",
|
|
326
|
+
{
|
|
327
|
+
onClick: () => toggleItem(item.id),
|
|
328
|
+
className: "w-full px-4 py-4 flex items-center justify-between text-left text-white font-medium hover:underline transition-all duration-200"
|
|
329
|
+
},
|
|
330
|
+
/* @__PURE__ */ React6.createElement("div", { className: "flex items-center gap-2" }, item.icon && /* @__PURE__ */ React6.createElement("span", { className: "flex items-center text-base" }, item.icon), /* @__PURE__ */ React6.createElement("span", { className: "text-sm font-medium" }, item.title)),
|
|
331
|
+
/* @__PURE__ */ React6.createElement(
|
|
332
|
+
"svg",
|
|
333
|
+
{
|
|
334
|
+
className: `w-4 h-4 shrink-0 transition-transform duration-200 text-white/70 ${open ? "rotate-180" : ""}`,
|
|
335
|
+
fill: "none",
|
|
336
|
+
stroke: "currentColor",
|
|
337
|
+
strokeWidth: "2",
|
|
338
|
+
viewBox: "0 0 24 24"
|
|
339
|
+
},
|
|
340
|
+
/* @__PURE__ */ React6.createElement(
|
|
341
|
+
"path",
|
|
342
|
+
{
|
|
343
|
+
strokeLinecap: "round",
|
|
344
|
+
strokeLinejoin: "round",
|
|
345
|
+
d: "M19 9l-7 7-7-7"
|
|
346
|
+
}
|
|
347
|
+
)
|
|
348
|
+
)
|
|
349
|
+
),
|
|
350
|
+
/* @__PURE__ */ React6.createElement(
|
|
351
|
+
"div",
|
|
352
|
+
{
|
|
353
|
+
className: `grid transition-all duration-200 ease-in-out ${open ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"}`
|
|
354
|
+
},
|
|
355
|
+
/* @__PURE__ */ React6.createElement("div", { className: "overflow-hidden" }, /* @__PURE__ */ React6.createElement("div", { className: "px-4 pb-4 pt-0 text-sm text-white/80 leading-relaxed" }, item.content))
|
|
356
|
+
)
|
|
357
|
+
);
|
|
358
|
+
}));
|
|
359
|
+
};
|
|
360
|
+
export {
|
|
361
|
+
Accordion,
|
|
362
|
+
AeroBubble,
|
|
363
|
+
Button,
|
|
364
|
+
Card,
|
|
365
|
+
Input,
|
|
366
|
+
Modal,
|
|
367
|
+
aeroVariants,
|
|
368
|
+
getAeroClasses,
|
|
369
|
+
getGlassClasses,
|
|
370
|
+
glassVariants
|
|
371
|
+
};
|
package/package.json
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@alexandretav/aleui",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Glass UI components for React",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.esm.js",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"files": [
|
|
9
|
+
"dist",
|
|
10
|
+
"README.md",
|
|
11
|
+
"LICENSE"
|
|
12
|
+
],
|
|
13
|
+
"keywords": [
|
|
14
|
+
"react",
|
|
15
|
+
"glassmorphism",
|
|
16
|
+
"frutiger-aero",
|
|
17
|
+
"ui",
|
|
18
|
+
"components",
|
|
19
|
+
"tailwind",
|
|
20
|
+
"typescript",
|
|
21
|
+
"nextjs"
|
|
22
|
+
],
|
|
23
|
+
"author": "Alexandre R. Tavares",
|
|
24
|
+
"license": "MIT",
|
|
25
|
+
"repository": {
|
|
26
|
+
"type": "git",
|
|
27
|
+
"url": "https://github.com/alexandrertav/alex-ui.git"
|
|
28
|
+
},
|
|
29
|
+
"bugs": {
|
|
30
|
+
"url": "https://github.com/alexandrertav/alex-ui/issues"
|
|
31
|
+
},
|
|
32
|
+
"homepage": "https://github.com/alexandrertav/alex-ui#readme",
|
|
33
|
+
"scripts": {
|
|
34
|
+
"dev": "next dev",
|
|
35
|
+
"build": "next build",
|
|
36
|
+
"build:lib": "tsup src/components/index.ts --format cjs,esm --dts --external react --external react-dom --external framer-motion",
|
|
37
|
+
"start": "next start",
|
|
38
|
+
"lint": "next lint",
|
|
39
|
+
"prepublishOnly": "npm run build:lib"
|
|
40
|
+
},
|
|
41
|
+
"peerDependencies": {
|
|
42
|
+
"framer-motion": "^11.0.0",
|
|
43
|
+
"react": "^18.0.0",
|
|
44
|
+
"react-dom": "^18.0.0",
|
|
45
|
+
"tailwindcss": "^3.0.0"
|
|
46
|
+
},
|
|
47
|
+
"dependencies": {
|
|
48
|
+
"framer-motion": "^11.0.0",
|
|
49
|
+
"lucide": "^0.577.0",
|
|
50
|
+
"lucide-react": "^0.577.0",
|
|
51
|
+
"next": "14.1.0",
|
|
52
|
+
"react": "^18.0.0",
|
|
53
|
+
"react-dom": "^18.0.0"
|
|
54
|
+
},
|
|
55
|
+
"devDependencies": {
|
|
56
|
+
"@types/node": "^20.11.0",
|
|
57
|
+
"@types/react": "^18.3.28",
|
|
58
|
+
"@types/react-dom": "^18.2.18",
|
|
59
|
+
"autoprefixer": "^10.4.17",
|
|
60
|
+
"postcss": "^8.4.33",
|
|
61
|
+
"tailwindcss": "^3.4.1",
|
|
62
|
+
"tsup": "^8.5.1",
|
|
63
|
+
"typescript": "^5.9.3"
|
|
64
|
+
}
|
|
65
|
+
}
|