@alexandretav/aleui 1.0.0 → 1.1.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/dist/index.js DELETED
@@ -1,417 +0,0 @@
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
- });