luna-components-library 1.1.17 → 1.1.21
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/README.md +27 -10
- package/dist/luna-components-library.js +43 -39
- package/dist/luna-components-library.js.map +1 -1
- package/dist/src/components/Accordion.d.ts +5 -1
- package/dist/src/components/Anchor.d.ts +6 -3
- package/dist/src/components/Button.d.ts +4 -1
- package/dist/src/components/Card.d.ts +3 -1
- package/dist/src/components/DropDown.d.ts +10 -2
- package/dist/src/components/ProgressBar.d.ts +3 -1
- package/dist/src/components/Spinner.d.ts +6 -3
- package/dist/src/components/Typed.d.ts +4 -1
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -85,8 +85,12 @@ function App() {
|
|
|
85
85
|
|
|
86
86
|
<DropDown
|
|
87
87
|
toggle={<button>Select Option</button>}
|
|
88
|
-
options={[
|
|
89
|
-
|
|
88
|
+
options={[
|
|
89
|
+
{ value: 'option1', label: 'Option 1' },
|
|
90
|
+
{ value: 'option2', label: 'Option 2' },
|
|
91
|
+
{ value: 'option3', label: 'Option 3' }
|
|
92
|
+
]}
|
|
93
|
+
selected="option1"
|
|
90
94
|
onChange={(value) => console.log('Selected:', value)}
|
|
91
95
|
/>
|
|
92
96
|
|
|
@@ -209,17 +213,29 @@ A dropdown menu component with customizable toggle and options.
|
|
|
209
213
|
```jsx
|
|
210
214
|
<DropDown
|
|
211
215
|
toggle={<button>Menu</button>}
|
|
212
|
-
options={[
|
|
213
|
-
|
|
216
|
+
options={[
|
|
217
|
+
{ value: 'option1', label: 'Option 1' },
|
|
218
|
+
{ value: 'option2', label: 'Option 2' },
|
|
219
|
+
{ value: 'option3', label: 'Option 3' }
|
|
220
|
+
]}
|
|
221
|
+
selected="option1"
|
|
214
222
|
onChange={(value) => console.log('Selected:', value)}
|
|
215
223
|
/>
|
|
216
224
|
```
|
|
217
225
|
|
|
218
226
|
**Props:**
|
|
219
227
|
- `toggle: React.ReactNode` - Toggle button/element
|
|
220
|
-
- `options:
|
|
221
|
-
- `selected:
|
|
222
|
-
- `onChange: (value:
|
|
228
|
+
- `options: DropDownOption[]` - Array of option objects with `value` and `label` properties
|
|
229
|
+
- `selected: string | number` - Currently selected option value
|
|
230
|
+
- `onChange: (value: string | number) => void` - Selection change handler
|
|
231
|
+
|
|
232
|
+
**DropDownOption Interface:**
|
|
233
|
+
```typescript
|
|
234
|
+
interface DropDownOption {
|
|
235
|
+
value: string | number;
|
|
236
|
+
label: React.ReactNode;
|
|
237
|
+
}
|
|
238
|
+
```
|
|
223
239
|
|
|
224
240
|
### ProgressBar
|
|
225
241
|
A progress bar component with customizable progress values and accessibility.
|
|
@@ -362,10 +378,11 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
|
|
|
362
378
|
|
|
363
379
|
## 🙏 Author
|
|
364
380
|
|
|
365
|
-
Created and maintained by [Pablo
|
|
381
|
+
Created and maintained by [Pablo Andrey Chacon](https://andreychaconresumereact.netlify.app)
|
|
366
382
|
|
|
367
383
|
## 🔗 Links
|
|
368
384
|
|
|
369
385
|
- [NPM Package](https://www.npmjs.com/package/luna-components-library)
|
|
370
|
-
- [
|
|
371
|
-
- [
|
|
386
|
+
- [Live Demo](https://luna-components-demo.netlify.app)
|
|
387
|
+
- [GitHub Repository](https://github.com/pabloandreychacon/luna-library)
|
|
388
|
+
- [Author's Portfolio](https://andreychaconresumereact.netlify.app/portfolio)
|
|
@@ -39,10 +39,10 @@ var require_react_jsx_runtime_production = /* @__PURE__ */ __commonJSMin(((expor
|
|
|
39
39
|
var import_jsx_runtime = (/* @__PURE__ */ __commonJSMin(((exports, module) => {
|
|
40
40
|
module.exports = require_react_jsx_runtime_production();
|
|
41
41
|
})))();
|
|
42
|
-
var Button = ({ children, variant = "primary", size = "sm", onClick = () => void 0, disabled = false, className = "" }) => {
|
|
42
|
+
var Button = ({ children, variant = "primary", size = "sm", onClick = () => void 0, disabled = false, className = "", containerClassName = "font-medium rounded-lg transition-colors focus:outline-none focus:ring-2", variantClassName = "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500", sizeClassName = "px-3 py-1.5 text-sm" }) => {
|
|
43
43
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
|
|
44
44
|
className: `
|
|
45
|
-
|
|
45
|
+
${containerClassName}
|
|
46
46
|
${{
|
|
47
47
|
primary: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500",
|
|
48
48
|
secondary: "bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500",
|
|
@@ -63,10 +63,10 @@ var Button = ({ children, variant = "primary", size = "sm", onClick = () => void
|
|
|
63
63
|
};
|
|
64
64
|
//#endregion
|
|
65
65
|
//#region src/components/Card.tsx
|
|
66
|
-
var Card = ({ children, title, className = "", padding = "md", shadow = "md" }) => {
|
|
66
|
+
var Card = ({ children, title, className = "", containerClassName = "bg-white rounded-lg border border-gray-200", titleClassName = "text-lg font-semibold text-gray-900", padding = "md", shadow = "md" }) => {
|
|
67
67
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
68
68
|
className: `
|
|
69
|
-
|
|
69
|
+
${containerClassName}
|
|
70
70
|
${{
|
|
71
71
|
none: "",
|
|
72
72
|
sm: "p-3",
|
|
@@ -84,7 +84,7 @@ var Card = ({ children, title, className = "", padding = "md", shadow = "md" })
|
|
|
84
84
|
children: [title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
85
85
|
className: "mb-4",
|
|
86
86
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", {
|
|
87
|
-
className:
|
|
87
|
+
className: titleClassName,
|
|
88
88
|
children: title
|
|
89
89
|
})
|
|
90
90
|
}), children]
|
|
@@ -92,13 +92,13 @@ var Card = ({ children, title, className = "", padding = "md", shadow = "md" })
|
|
|
92
92
|
};
|
|
93
93
|
//#endregion
|
|
94
94
|
//#region src/components/Anchor.tsx
|
|
95
|
-
var Anchor = ({ children = "Pablo Andrey Chacon Luna", variant = "primary", size = "sm", href = "https://andreychaconresumereact.netlify.app/", className }) => {
|
|
95
|
+
var Anchor = ({ children = "Pablo Andrey Chacon Luna", variant = "primary", size = "sm", href = "https://andreychaconresumereact.netlify.app/", className, containerClassName = "font-medium rounded-lg transition-colors focus:outline-none focus:ring-2", variantClassName = "bg-blue-600 text-white hover:bg-blue-700", sizeClassName = "px-3 py-1.5 text-sm" }) => {
|
|
96
96
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
|
|
97
97
|
href,
|
|
98
98
|
target: "_blank",
|
|
99
99
|
rel: "noopener noreferrer",
|
|
100
100
|
className: `
|
|
101
|
-
|
|
101
|
+
${containerClassName}
|
|
102
102
|
${{
|
|
103
103
|
primary: "bg-blue-600 text-white hover:bg-blue-700",
|
|
104
104
|
secondary: "bg-gray-600 text-white hover:bg-gray-700",
|
|
@@ -116,12 +116,12 @@ var Anchor = ({ children = "Pablo Andrey Chacon Luna", variant = "primary", size
|
|
|
116
116
|
};
|
|
117
117
|
//#endregion
|
|
118
118
|
//#region src/components/Accordion.tsx
|
|
119
|
-
var Accordion = ({ key, active, onClick, header, content }) => {
|
|
119
|
+
var Accordion = ({ key, active, onClick, header, content, className = "", containerClassName = "border border-gray-200 rounded-lg overflow-hidden", headerClassName = "w-full px-4 py-3 text-left bg-gray-50 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none transition-colors duration-200 flex justify-between items-center", contentClassName = "transition-all duration-300 ease-in-out" }) => {
|
|
120
120
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
121
|
-
className:
|
|
121
|
+
className: `${containerClassName} ${className}`,
|
|
122
122
|
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
|
|
123
123
|
onClick,
|
|
124
|
-
className:
|
|
124
|
+
className: headerClassName,
|
|
125
125
|
"aria-expanded": active,
|
|
126
126
|
children: [header, /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
|
|
127
127
|
className: `w-5 h-5 text-gray-500 transition-transform duration-200 ${active ? "transform rotate-180" : ""}`,
|
|
@@ -136,9 +136,9 @@ var Accordion = ({ key, active, onClick, header, content }) => {
|
|
|
136
136
|
})
|
|
137
137
|
})]
|
|
138
138
|
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
139
|
-
className:
|
|
139
|
+
className: `${contentClassName} ${active ? "max-h-96 opacity-100" : "max-h-0 opacity-0"} overflow-hidden`,
|
|
140
140
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
141
|
-
className:
|
|
141
|
+
className: `p-4 bg-white border-t border-gray-200 ${contentClassName}`,
|
|
142
142
|
children: content
|
|
143
143
|
})
|
|
144
144
|
})]
|
|
@@ -146,7 +146,7 @@ var Accordion = ({ key, active, onClick, header, content }) => {
|
|
|
146
146
|
};
|
|
147
147
|
//#endregion
|
|
148
148
|
//#region src/components/Spinner.tsx
|
|
149
|
-
var Spinner = ({ className, size = "md", type = "circle" }) => {
|
|
149
|
+
var Spinner = ({ className, containerClassName = "flex gap-1", dotClassName = "bg-blue-600 rounded-full animate-bounce", barClassName = "bg-blue-600 animate-pulse", size = "md", type = "circle" }) => {
|
|
150
150
|
const sizeClasses = {
|
|
151
151
|
sm: "w-4 h-4",
|
|
152
152
|
md: "w-6 h-6",
|
|
@@ -164,22 +164,22 @@ var Spinner = ({ className, size = "md", type = "circle" }) => {
|
|
|
164
164
|
};
|
|
165
165
|
if (type === "dots") return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
166
166
|
role: "status",
|
|
167
|
-
className:
|
|
167
|
+
className: `${containerClassName} ${className || ""}`,
|
|
168
168
|
children: [
|
|
169
169
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
|
|
170
170
|
className: "sr-only",
|
|
171
171
|
children: "Loading..."
|
|
172
172
|
}),
|
|
173
173
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
174
|
-
className: `${dotSizeClasses[size]}
|
|
174
|
+
className: `${dotSizeClasses[size]} ${dotClassName}`,
|
|
175
175
|
style: { animationDelay: "0ms" }
|
|
176
176
|
}),
|
|
177
177
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
178
|
-
className: `${dotSizeClasses[size]}
|
|
178
|
+
className: `${dotSizeClasses[size]} ${dotClassName}`,
|
|
179
179
|
style: { animationDelay: "150ms" }
|
|
180
180
|
}),
|
|
181
181
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
182
|
-
className: `${dotSizeClasses[size]}
|
|
182
|
+
className: `${dotSizeClasses[size]} ${dotClassName}`,
|
|
183
183
|
style: { animationDelay: "300ms" }
|
|
184
184
|
})
|
|
185
185
|
]
|
|
@@ -190,30 +190,30 @@ var Spinner = ({ className, size = "md", type = "circle" }) => {
|
|
|
190
190
|
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
|
|
191
191
|
className: "sr-only",
|
|
192
192
|
children: "Loading..."
|
|
193
|
-
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${sizeClasses[size]}
|
|
193
|
+
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${sizeClasses[size]} ${dotClassName}` })]
|
|
194
194
|
});
|
|
195
195
|
if (type === "bars") return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
196
196
|
role: "status",
|
|
197
|
-
className: `flex gap-1 items-center ${className || ""}`,
|
|
197
|
+
className: `flex gap-1 items-center ${containerClassName} ${className || ""}`,
|
|
198
198
|
children: [
|
|
199
199
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
|
|
200
200
|
className: "sr-only",
|
|
201
201
|
children: "Loading..."
|
|
202
202
|
}),
|
|
203
203
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
204
|
-
className: `${barSizeClasses[size]}
|
|
204
|
+
className: `${barSizeClasses[size]} ${barClassName}`,
|
|
205
205
|
style: { animationDelay: "0ms" }
|
|
206
206
|
}),
|
|
207
207
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
208
|
-
className: `${barSizeClasses[size]}
|
|
208
|
+
className: `${barSizeClasses[size]} ${barClassName}`,
|
|
209
209
|
style: { animationDelay: "200ms" }
|
|
210
210
|
}),
|
|
211
211
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
212
|
-
className: `${barSizeClasses[size]}
|
|
212
|
+
className: `${barSizeClasses[size]} ${barClassName}`,
|
|
213
213
|
style: { animationDelay: "400ms" }
|
|
214
214
|
}),
|
|
215
215
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
216
|
-
className: `${barSizeClasses[size]}
|
|
216
|
+
className: `${barSizeClasses[size]} ${barClassName}`,
|
|
217
217
|
style: { animationDelay: "600ms" }
|
|
218
218
|
})
|
|
219
219
|
]
|
|
@@ -229,7 +229,7 @@ var Spinner = ({ className, size = "md", type = "circle" }) => {
|
|
|
229
229
|
};
|
|
230
230
|
//#endregion
|
|
231
231
|
//#region src/components/DropDown.tsx
|
|
232
|
-
var DropDown = ({ toggle, options, selected, onChange, className = "" }) => {
|
|
232
|
+
var DropDown = ({ toggle, options, selected, onChange, className = "", containerClassName = "relative inline-block text-left", dropdownClassName = "absolute z-50 mt-2 w-48 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none", optionsContainerClassName = "py-1 flex flex-col", optionClassName = "block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900" }) => {
|
|
233
233
|
const [isOpen, setIsOpen] = useState(false);
|
|
234
234
|
const handleToggle = () => {
|
|
235
235
|
setIsOpen(!isOpen);
|
|
@@ -239,27 +239,31 @@ var DropDown = ({ toggle, options, selected, onChange, className = "" }) => {
|
|
|
239
239
|
setIsOpen(false);
|
|
240
240
|
};
|
|
241
241
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
242
|
-
className:
|
|
242
|
+
className: `${containerClassName} ${className}`,
|
|
243
243
|
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
244
244
|
onClick: handleToggle,
|
|
245
245
|
className: "cursor-pointer",
|
|
246
246
|
children: toggle
|
|
247
247
|
}), isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
248
|
-
className:
|
|
248
|
+
className: dropdownClassName,
|
|
249
249
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
250
|
-
className:
|
|
251
|
-
children: options.map((option, index) =>
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
250
|
+
className: optionsContainerClassName,
|
|
251
|
+
children: options.map((option, index) => {
|
|
252
|
+
const isOptionObject = typeof option === "object" && option !== null && "value" in option;
|
|
253
|
+
const optionValue = isOptionObject ? option.value : option;
|
|
254
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
|
|
255
|
+
onClick: () => handleOptionClick(optionValue),
|
|
256
|
+
className: optionClassName,
|
|
257
|
+
children: isOptionObject ? option.label : option
|
|
258
|
+
}, index);
|
|
259
|
+
})
|
|
256
260
|
})
|
|
257
261
|
})]
|
|
258
262
|
});
|
|
259
263
|
};
|
|
260
264
|
//#endregion
|
|
261
265
|
//#region src/components/ProgressBar.tsx
|
|
262
|
-
var ProgressBar = ({ progress, max, min, "aria-label": ariaLabel, className, style, variant = "primary" }) => {
|
|
266
|
+
var ProgressBar = ({ progress, max, min, "aria-label": ariaLabel, className, style, containerClassName = "w-full bg-gray-200 rounded-full h-4 overflow-hidden", barClassName = "h-full rounded-full transition-all duration-300 flex items-center justify-center text-xs font-medium", variant = "primary" }) => {
|
|
263
267
|
const currentVariant = {
|
|
264
268
|
primary: {
|
|
265
269
|
bg: "bg-blue-600",
|
|
@@ -293,10 +297,10 @@ var ProgressBar = ({ progress, max, min, "aria-label": ariaLabel, className, sty
|
|
|
293
297
|
}
|
|
294
298
|
}[variant];
|
|
295
299
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
296
|
-
className:
|
|
300
|
+
className: containerClassName,
|
|
297
301
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
298
302
|
role: "progressbar",
|
|
299
|
-
className: `${currentVariant.bg}
|
|
303
|
+
className: `${currentVariant.bg} ${barClassName} ${currentVariant.text}`,
|
|
300
304
|
"aria-valuenow": progress,
|
|
301
305
|
"aria-valuemin": min,
|
|
302
306
|
"aria-valuemax": max,
|
|
@@ -311,7 +315,7 @@ var ProgressBar = ({ progress, max, min, "aria-label": ariaLabel, className, sty
|
|
|
311
315
|
};
|
|
312
316
|
//#endregion
|
|
313
317
|
//#region src/components/Typed.tsx
|
|
314
|
-
var Typed = ({ strings, typeSpeed = 50, backSpeed = 30, backDelay = 500, startDelay = 0, loop = true, showCursor = true, className = "", style = {} }) => {
|
|
318
|
+
var Typed = ({ strings, typeSpeed = 50, backSpeed = 30, backDelay = 500, startDelay = 0, loop = true, showCursor = true, className = "", containerClassName = "inline-block", typedClassName = "typed", cursorClassName = "typed-cursor ml-1 inline-block w-0.5 h-5 bg-current", style = {} }) => {
|
|
315
319
|
const [currentStringIndex, setCurrentStringIndex] = useState(0);
|
|
316
320
|
const [currentText, setCurrentText] = useState("");
|
|
317
321
|
const [isDeleting, setIsDeleting] = useState(false);
|
|
@@ -364,12 +368,12 @@ var Typed = ({ strings, typeSpeed = 50, backSpeed = 30, backDelay = 500, startDe
|
|
|
364
368
|
return () => clearInterval(fadeTimer);
|
|
365
369
|
}, []);
|
|
366
370
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
|
|
367
|
-
className:
|
|
371
|
+
className: `${containerClassName} ${className}`,
|
|
368
372
|
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
|
|
369
|
-
className:
|
|
373
|
+
className: typedClassName,
|
|
370
374
|
children: currentText
|
|
371
375
|
}), showCursor && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
|
|
372
|
-
className:
|
|
376
|
+
className: cursorClassName,
|
|
373
377
|
"aria-hidden": "true",
|
|
374
378
|
style: {
|
|
375
379
|
...style,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"luna-components-library.js","names":[],"sources":["../node_modules/react/cjs/react-jsx-runtime.production.js","../node_modules/react/jsx-runtime.js","../src/components/Button.tsx","../src/components/Card.tsx","../src/components/Anchor.tsx","../src/components/Accordion.tsx","../src/components/Spinner.tsx","../src/components/DropDown.tsx","../src/components/ProgressBar.tsx","../src/components/Typed.tsx"],"sourcesContent":["/**\n * @license React\n * react-jsx-runtime.production.js\n *\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n\"use strict\";\nvar REACT_ELEMENT_TYPE = Symbol.for(\"react.transitional.element\"),\n REACT_FRAGMENT_TYPE = Symbol.for(\"react.fragment\");\nfunction jsxProd(type, config, maybeKey) {\n var key = null;\n void 0 !== maybeKey && (key = \"\" + maybeKey);\n void 0 !== config.key && (key = \"\" + config.key);\n if (\"key\" in config) {\n maybeKey = {};\n for (var propName in config)\n \"key\" !== propName && (maybeKey[propName] = config[propName]);\n } else maybeKey = config;\n config = maybeKey.ref;\n return {\n $$typeof: REACT_ELEMENT_TYPE,\n type: type,\n key: key,\n ref: void 0 !== config ? config : null,\n props: maybeKey\n };\n}\nexports.Fragment = REACT_FRAGMENT_TYPE;\nexports.jsx = jsxProd;\nexports.jsxs = jsxProd;\n","'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./cjs/react-jsx-runtime.production.js');\n} else {\n module.exports = require('./cjs/react-jsx-runtime.development.js');\n}\n","import React from 'react';\n\nexport interface ButtonProps {\n children: React.ReactNode;\n variant?: 'primary' | 'secondary' | 'outline';\n size?: 'sm' | 'md' | 'lg';\n onClick?: () => void;\n disabled?: boolean;\n className?: string;\n}\n\n{/* onCLick default should open window.open('https://andreychaconresumereact.netlify.app/', '_blank') */ }\n\nconst Button = ({\n children,\n variant = 'primary',\n size = 'sm',\n onClick = () =>\n void 0,\n disabled = false,\n className = '',\n}: ButtonProps) => {\n const baseClasses = 'font-medium rounded-lg transition-colors focus:outline-none focus:ring-2';\n\n const variantClasses = {\n primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',\n secondary: 'bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500',\n outline: 'border border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-gray-500',\n };\n\n const sizeClasses = {\n sm: 'px-3 py-1.5 text-sm',\n md: 'px-4 py-2 text-base',\n lg: 'px-6 py-3 text-lg',\n };\n\n const classes = `\n ${baseClasses}\n ${variantClasses[variant]}\n ${sizeClasses[size]}\n ${disabled ? 'opacity-50 cursor-not-allowed' : ''}\n ${className}\n `.trim();\n\n return (\n <button\n className={classes}\n onClick={onClick}\n disabled={disabled}\n >\n {children}\n </button>\n );\n};\n\nexport default Button;\n","import React from 'react';\n\nexport interface CardProps {\n children: React.ReactNode;\n title?: string;\n className?: string;\n padding?: 'none' | 'sm' | 'md' | 'lg';\n shadow?: 'none' | 'sm' | 'md' | 'lg';\n}\n\nconst Card = ({\n children,\n title,\n className = '',\n padding = 'md',\n shadow = 'md',\n}: CardProps) => {\n const baseClasses = 'bg-white rounded-lg border border-gray-200';\n\n const paddingClasses = {\n none: '',\n sm: 'p-3',\n md: 'p-4',\n lg: 'p-6',\n };\n\n const shadowClasses = {\n none: '',\n sm: 'shadow-sm',\n md: 'shadow-md',\n lg: 'shadow-lg',\n };\n\n const classes = `\n ${baseClasses}\n ${paddingClasses[padding]}\n ${shadowClasses[shadow]}\n ${className}\n `.trim();\n\n return (\n <div className={classes}>\n {title && (\n <div className=\"mb-4\">\n <h3 className=\"text-lg font-semibold text-gray-900\">{title}</h3>\n </div>\n )}\n {children}\n </div>\n );\n};\n\nexport default Card;\n","type AnchorProps = {\r\n children?: React.ReactNode;\r\n variant?: 'primary' | 'secondary' | 'outline';\r\n size?: 'sm' | 'md' | 'lg';\r\n href?: string;\r\n className?: string;\r\n}\r\n\r\nconst Anchor = ({\r\n children = \"Pablo Andrey Chacon Luna\",\r\n variant = 'primary',\r\n size = 'sm',\r\n href = 'https://andreychaconresumereact.netlify.app/',\r\n className,\r\n}: AnchorProps) => {\r\n\r\n const baseClasses = 'font-medium rounded-lg transition-colors focus:outline-none focus:ring-2';\r\n\r\n const variantClasses = {\r\n primary: 'bg-blue-600 text-white hover:bg-blue-700',\r\n secondary: 'bg-gray-600 text-white hover:bg-gray-700',\r\n outline: 'border border-gray-300 text-gray-700 hover:bg-gray-50',\r\n };\r\n\r\n const sizeClasses = {\r\n sm: 'px-3 py-1.5 text-sm',\r\n md: 'px-4 py-2 text-base',\r\n lg: 'px-6 py-3 text-lg',\r\n };\r\n\r\n const classes = `\r\n ${baseClasses}\r\n ${variantClasses[variant]}\r\n ${sizeClasses[size]}\r\n ${className}\r\n `.trim();\r\n\r\n return (\r\n <a href={href} target=\"_blank\" rel=\"noopener noreferrer\" className={classes}>\r\n {children}\r\n </a>\r\n );\r\n};\r\n\r\nexport default Anchor;","\r\nimport React from 'react';\r\n\r\n/**\r\n * must have key, active, onClick, header, content body\r\n */\r\ninterface AccordionProps {\r\n key: string;\r\n active: boolean;\r\n onClick: () => void;\r\n header: React.ReactNode;\r\n content: React.ReactNode;\r\n}\r\n\r\nconst Accordion = ({ key, active, onClick, header, content }: AccordionProps) => {\r\n return (\r\n <div className=\"border border-gray-200 rounded-lg overflow-hidden\">\r\n <button\r\n onClick={onClick}\r\n className=\"w-full px-4 py-3 text-left bg-gray-50 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none transition-colors duration-200 flex justify-between items-center\"\r\n aria-expanded={active}\r\n >\r\n {header}\r\n <svg\r\n className={`w-5 h-5 text-gray-500 transition-transform duration-200 ${active ? 'transform rotate-180' : ''\r\n }`}\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n strokeWidth={2}\r\n d=\"M19 9l-7 7-7-7\"\r\n />\r\n </svg>\r\n </button>\r\n\r\n <div\r\n className={`transition-all duration-300 ease-in-out ${active ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'\r\n } overflow-hidden`}\r\n >\r\n <div className=\"p-4 bg-white border-t border-gray-200\">\r\n {content}\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nexport default Accordion;","import React from 'react';\r\n\r\n{/* must have animation,role, className */ }\r\ntype SpinnerProps = {\r\n className?: string;\r\n size?: 'sm' | 'md' | 'lg';\r\n type?: 'circle' | 'dots' | 'pulse' | 'bars';\r\n};\r\n\r\nconst Spinner = ({ className, size = 'md', type = 'circle' }: SpinnerProps) => {\r\n const sizeClasses = {\r\n sm: 'w-4 h-4',\r\n md: 'w-6 h-6',\r\n lg: 'w-8 h-8'\r\n };\r\n\r\n const dotSizeClasses = {\r\n sm: 'w-1 h-1',\r\n md: 'w-2 h-2',\r\n lg: 'w-3 h-3'\r\n };\r\n\r\n const barSizeClasses = {\r\n sm: 'w-1 h-4',\r\n md: 'w-1 h-6',\r\n lg: 'w-1 h-8'\r\n };\r\n\r\n if (type === 'dots') {\r\n return (\r\n <div role=\"status\" className={`flex gap-1 ${className || ''}`}>\r\n <span className=\"sr-only\">Loading...</span>\r\n <div className={`${dotSizeClasses[size]} bg-blue-600 rounded-full animate-bounce`} style={{ animationDelay: '0ms' }}></div>\r\n <div className={`${dotSizeClasses[size]} bg-blue-600 rounded-full animate-bounce`} style={{ animationDelay: '150ms' }}></div>\r\n <div className={`${dotSizeClasses[size]} bg-blue-600 rounded-full animate-bounce`} style={{ animationDelay: '300ms' }}></div>\r\n </div>\r\n );\r\n }\r\n\r\n if (type === 'pulse') {\r\n return (\r\n <div role=\"status\" className={`${sizeClasses[size]} ${className || ''}`}>\r\n <span className=\"sr-only\">Loading...</span>\r\n <div className={`${sizeClasses[size]} bg-blue-600 rounded-full animate-pulse`}></div>\r\n </div>\r\n );\r\n }\r\n\r\n if (type === 'bars') {\r\n return (\r\n <div role=\"status\" className={`flex gap-1 items-center ${className || ''}`}>\r\n <span className=\"sr-only\">Loading...</span>\r\n <div className={`${barSizeClasses[size]} bg-blue-600 animate-pulse`} style={{ animationDelay: '0ms' }}></div>\r\n <div className={`${barSizeClasses[size]} bg-blue-600 animate-pulse`} style={{ animationDelay: '200ms' }}></div>\r\n <div className={`${barSizeClasses[size]} bg-blue-600 animate-pulse`} style={{ animationDelay: '400ms' }}></div>\r\n <div className={`${barSizeClasses[size]} bg-blue-600 animate-pulse`} style={{ animationDelay: '600ms' }}></div>\r\n </div>\r\n );\r\n }\r\n\r\n // Default circle spinner\r\n return (\r\n <div\r\n role=\"status\"\r\n className={`inline-block animate-spin rounded-full border-2 border-gray-300 border-t-blue-600 ${sizeClasses[size]} ${className || ''}`}\r\n >\r\n <span className=\"sr-only\">Loading...</span>\r\n </div>\r\n );\r\n};\r\n\r\nexport default Spinner;","{/* must have toggle, options, selected, onChange */ }\r\nimport React, { useState } from 'react';\r\n\r\ntype DropDownProps = {\r\n toggle: React.ReactNode;\r\n options: React.ReactNode[];\r\n selected: React.ReactNode;\r\n onChange: (value: React.ReactNode) => void;\r\n className?: string;\r\n};\r\n\r\nconst DropDown = ({ toggle, options, selected, onChange, className = '' }: DropDownProps) => {\r\n const [isOpen, setIsOpen] = useState(false);\r\n\r\n const handleToggle = () => {\r\n setIsOpen(!isOpen);\r\n };\r\n\r\n const handleOptionClick = (option: React.ReactNode) => {\r\n onChange(option);\r\n setIsOpen(false);\r\n };\r\n\r\n return (\r\n <div className={`relative inline-block text-left ${className}`}>\r\n <div onClick={handleToggle} className=\"cursor-pointer\">\r\n {toggle}\r\n </div>\r\n\r\n {isOpen && (\r\n <div className=\"absolute z-10 mt-2 w-48 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none\">\r\n <div className=\"py-1 flex flex-col\">\r\n {options.map((option, index) => (\r\n <button\r\n key={index}\r\n onClick={() => handleOptionClick(option)}\r\n className=\"block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900\"\r\n >\r\n {option}\r\n </button>\r\n ))}\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n};\r\n\r\nexport default DropDown;","{/* must have progress, max, min, aria-label */ }\r\nimport React from 'react';\r\nimport { CSSProperties } from 'react';\r\n\r\ntype ProgressBarProps = {\r\n progress: number;\r\n max: number;\r\n min: number;\r\n 'aria-label': string;\r\n};\r\n\r\n{/* need a class for the progress bar class name: progress-bar */ }\r\ntype ProgressBarPropsWithClassName = ProgressBarProps & {\r\n className?: CSSProperties;\r\n style?: CSSProperties;\r\n variant?: 'primary' | 'success' | 'warning' | 'danger' | 'dark' | 'light';\r\n};\r\n\r\nconst ProgressBar = ({ progress, max, min, 'aria-label': ariaLabel, className, style, variant = 'primary' }: ProgressBarPropsWithClassName) => {\r\n const variantClasses = {\r\n primary: {\r\n bg: 'bg-blue-600',\r\n text: 'text-white',\r\n containerBg: 'bg-gray-200'\r\n },\r\n success: {\r\n bg: 'bg-green-600',\r\n text: 'text-white',\r\n containerBg: 'bg-gray-200'\r\n },\r\n warning: {\r\n bg: 'bg-yellow-500',\r\n text: 'text-gray-900',\r\n containerBg: 'bg-gray-200'\r\n },\r\n danger: {\r\n bg: 'bg-red-600',\r\n text: 'text-white',\r\n containerBg: 'bg-gray-200'\r\n },\r\n dark: {\r\n bg: 'bg-gray-800',\r\n text: 'text-white',\r\n containerBg: 'bg-gray-300'\r\n },\r\n light: {\r\n bg: 'bg-gray-100',\r\n text: 'text-gray-900',\r\n containerBg: 'bg-gray-300'\r\n }\r\n };\r\n\r\n const currentVariant = variantClasses[variant];\r\n\r\n return (\r\n <div className={`w-full ${currentVariant.containerBg} rounded-full h-4 overflow-hidden`}>\r\n <div\r\n role=\"progressbar\"\r\n className={`${currentVariant.bg} h-full rounded-full transition-all duration-300 flex items-center justify-center ${currentVariant.text} text-xs font-medium`}\r\n aria-valuenow={progress}\r\n aria-valuemin={min}\r\n aria-valuemax={max}\r\n style={{ width: `${progress}%`, ...className, ...style }}\r\n >\r\n {progress > 10 && `${progress}%`}\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nexport default ProgressBar;","import React, { useState, useEffect, CSSProperties } from 'react';\r\n\r\ntype TypedProps = {\r\n strings: string[];\r\n typeSpeed?: number;\r\n backSpeed?: number;\r\n backDelay?: number;\r\n startDelay?: number;\r\n loop?: boolean;\r\n showCursor?: boolean;\r\n className?: string;\r\n style?: TypedStyle;\r\n};\r\n\r\ntype TypedStyle = CSSProperties & {\r\n animation?: string;\r\n animationDelay?: string;\r\n};\r\n\r\nconst Typed = ({\r\n strings,\r\n typeSpeed = 50,\r\n backSpeed = 30,\r\n backDelay = 500,\r\n startDelay = 0,\r\n loop = true,\r\n showCursor = true,\r\n className = '',\r\n style = {},\r\n}: TypedProps) => {\r\n const [currentStringIndex, setCurrentStringIndex] = useState(0);\r\n const [currentText, setCurrentText] = useState('');\r\n const [isDeleting, setIsDeleting] = useState(false);\r\n const [isPaused, setIsPaused] = useState(false);\r\n const [cursorOpacity, setCursorOpacity] = useState(1);\r\n\r\n useEffect(() => {\r\n const timer = setTimeout(() => {\r\n setIsPaused(false);\r\n }, startDelay);\r\n\r\n return () => clearTimeout(timer);\r\n }, [startDelay]);\r\n\r\n useEffect(() => {\r\n if (isPaused) return;\r\n\r\n const currentString = strings[currentStringIndex] || '';\r\n\r\n const timer = setTimeout(() => {\r\n if (!isDeleting) {\r\n // Typing\r\n if (currentText.length < currentString.length) {\r\n setCurrentText(currentText + currentString[currentText.length]);\r\n } else {\r\n // Finished typing, wait before deleting\r\n if (loop) {\r\n setIsPaused(true);\r\n setTimeout(() => {\r\n setIsPaused(false);\r\n setIsDeleting(true);\r\n }, backDelay);\r\n }\r\n }\r\n } else {\r\n // Deleting\r\n if (currentText.length > 0) {\r\n setCurrentText(currentText.slice(0, -1));\r\n } else {\r\n // Finished deleting, move to next string\r\n setIsDeleting(false);\r\n setCurrentStringIndex((prevIndex) =>\r\n prevIndex === strings.length - 1 ? 0 : prevIndex + 1\r\n );\r\n }\r\n }\r\n }, isDeleting ? backSpeed : typeSpeed);\r\n\r\n return () => clearTimeout(timer);\r\n }, [currentText, isDeleting, currentStringIndex, strings, typeSpeed, backSpeed, backDelay, loop, isPaused]);\r\n\r\n // Cursor fade effect\r\n useEffect(() => {\r\n const fadeTimer = setInterval(() => {\r\n setCursorOpacity(prev => {\r\n if (prev === 1) return 0;\r\n return 1;\r\n });\r\n }, 750);\r\n\r\n return () => clearInterval(fadeTimer);\r\n }, []);\r\n\r\n return (\r\n <span className={`inline-block ${className}`} >\r\n <span className=\"typed\">{currentText}</span>\r\n {showCursor && (\r\n <span\r\n className=\"typed-cursor ml-1 inline-block w-0.5 h-5 bg-current\"\r\n aria-hidden=\"true\"\r\n style={{\r\n ...style,\r\n opacity: cursorOpacity\r\n }}\r\n >\r\n\r\n </span>\r\n )}\r\n </span>\r\n );\r\n};\r\n\r\nexport default Typed;"],"x_google_ignoreList":[0,1],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"luna-components-library.js","names":[],"sources":["../node_modules/react/cjs/react-jsx-runtime.production.js","../node_modules/react/jsx-runtime.js","../src/components/Button.tsx","../src/components/Card.tsx","../src/components/Anchor.tsx","../src/components/Accordion.tsx","../src/components/Spinner.tsx","../src/components/DropDown.tsx","../src/components/ProgressBar.tsx","../src/components/Typed.tsx"],"sourcesContent":["/**\n * @license React\n * react-jsx-runtime.production.js\n *\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n\"use strict\";\nvar REACT_ELEMENT_TYPE = Symbol.for(\"react.transitional.element\"),\n REACT_FRAGMENT_TYPE = Symbol.for(\"react.fragment\");\nfunction jsxProd(type, config, maybeKey) {\n var key = null;\n void 0 !== maybeKey && (key = \"\" + maybeKey);\n void 0 !== config.key && (key = \"\" + config.key);\n if (\"key\" in config) {\n maybeKey = {};\n for (var propName in config)\n \"key\" !== propName && (maybeKey[propName] = config[propName]);\n } else maybeKey = config;\n config = maybeKey.ref;\n return {\n $$typeof: REACT_ELEMENT_TYPE,\n type: type,\n key: key,\n ref: void 0 !== config ? config : null,\n props: maybeKey\n };\n}\nexports.Fragment = REACT_FRAGMENT_TYPE;\nexports.jsx = jsxProd;\nexports.jsxs = jsxProd;\n","'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./cjs/react-jsx-runtime.production.js');\n} else {\n module.exports = require('./cjs/react-jsx-runtime.development.js');\n}\n","import React from 'react';\n\nexport interface ButtonProps {\n children: React.ReactNode;\n variant?: 'primary' | 'secondary' | 'outline';\n size?: 'sm' | 'md' | 'lg';\n onClick?: () => void;\n disabled?: boolean;\n className?: string;\n containerClassName?: string;\n variantClassName?: string;\n sizeClassName?: string;\n}\n\n{/* onCLick default should open window.open('https://andreychaconresumereact.netlify.app/', '_blank') */ }\n\nconst Button = ({\n children,\n variant = 'primary',\n size = 'sm',\n onClick = () =>\n void 0,\n disabled = false,\n className = '',\n containerClassName = 'font-medium rounded-lg transition-colors focus:outline-none focus:ring-2',\n variantClassName = 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',\n sizeClassName = 'px-3 py-1.5 text-sm'\n}: ButtonProps) => {\n const baseClasses = containerClassName;\n\n const variantClasses = {\n primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',\n secondary: 'bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500',\n outline: 'border border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-gray-500',\n };\n\n const sizeClasses = {\n sm: 'px-3 py-1.5 text-sm',\n md: 'px-4 py-2 text-base',\n lg: 'px-6 py-3 text-lg',\n };\n\n const classes = `\n ${baseClasses}\n ${variantClasses[variant]}\n ${sizeClasses[size]}\n ${disabled ? 'opacity-50 cursor-not-allowed' : ''}\n ${className}\n `.trim();\n\n return (\n <button\n className={classes}\n onClick={onClick}\n disabled={disabled}\n >\n {children}\n </button>\n );\n};\n\nexport default Button;\n","import React from 'react';\n\nexport interface CardProps {\n children: React.ReactNode;\n title?: string;\n className?: string;\n containerClassName?: string;\n titleClassName?: string;\n padding?: 'none' | 'sm' | 'md' | 'lg';\n shadow?: 'none' | 'sm' | 'md' | 'lg';\n}\n\nconst Card = ({\n children,\n title,\n className = '',\n containerClassName = 'bg-white rounded-lg border border-gray-200',\n titleClassName = 'text-lg font-semibold text-gray-900',\n padding = 'md',\n shadow = 'md',\n}: CardProps) => {\n const paddingClasses = {\n none: '',\n sm: 'p-3',\n md: 'p-4',\n lg: 'p-6',\n };\n\n const shadowClasses = {\n none: '',\n sm: 'shadow-sm',\n md: 'shadow-md',\n lg: 'shadow-lg',\n };\n\n const classes = `\n ${containerClassName}\n ${paddingClasses[padding]}\n ${shadowClasses[shadow]}\n ${className}\n `.trim();\n\n return (\n <div className={classes}>\n {title && (\n <div className=\"mb-4\">\n <h3 className={titleClassName}>{title}</h3>\n </div>\n )}\n {children}\n </div>\n );\n};\n\nexport default Card;\n","export interface AnchorProps {\r\n children?: React.ReactNode;\r\n variant?: 'primary' | 'secondary' | 'outline';\r\n size?: 'sm' | 'md' | 'lg';\r\n href?: string;\r\n className?: string;\r\n containerClassName?: string;\r\n variantClassName?: string;\r\n sizeClassName?: string;\r\n}\r\n\r\nconst Anchor = ({\r\n children = \"Pablo Andrey Chacon Luna\",\r\n variant = 'primary',\r\n size = 'sm',\r\n href = 'https://andreychaconresumereact.netlify.app/',\r\n className,\r\n containerClassName = 'font-medium rounded-lg transition-colors focus:outline-none focus:ring-2',\r\n variantClassName = 'bg-blue-600 text-white hover:bg-blue-700',\r\n sizeClassName = 'px-3 py-1.5 text-sm'\r\n}: AnchorProps) => {\r\n\r\n const baseClasses = containerClassName;\r\n\r\n const variantClasses = {\r\n primary: 'bg-blue-600 text-white hover:bg-blue-700',\r\n secondary: 'bg-gray-600 text-white hover:bg-gray-700',\r\n outline: 'border border-gray-300 text-gray-700 hover:bg-gray-50',\r\n };\r\n\r\n const sizeClasses = {\r\n sm: 'px-3 py-1.5 text-sm',\r\n md: 'px-4 py-2 text-base',\r\n lg: 'px-6 py-3 text-lg',\r\n };\r\n\r\n const classes = `\r\n ${baseClasses}\r\n ${variantClasses[variant]}\r\n ${sizeClasses[size]}\r\n ${className}\r\n `.trim();\r\n\r\n return (\r\n <a href={href} target=\"_blank\" rel=\"noopener noreferrer\" className={classes}>\r\n {children}\r\n </a>\r\n );\r\n};\r\n\r\nexport default Anchor;","\r\nimport React from 'react';\r\n\r\n/**\r\n * must have key, active, onClick, header, content body\r\n */\r\ninterface AccordionProps {\r\n key: string;\r\n active: boolean;\r\n onClick: () => void;\r\n header: React.ReactNode;\r\n content: React.ReactNode;\r\n className?: string;\r\n containerClassName?: string;\r\n headerClassName?: string;\r\n contentClassName?: string;\r\n}\r\n\r\nconst Accordion = ({ key, active, onClick, header, content, className = '', containerClassName = 'border border-gray-200 rounded-lg overflow-hidden', headerClassName = 'w-full px-4 py-3 text-left bg-gray-50 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none transition-colors duration-200 flex justify-between items-center', contentClassName = 'transition-all duration-300 ease-in-out' }: AccordionProps) => {\r\n return (\r\n <div className={`${containerClassName} ${className}`}>\r\n <button\r\n onClick={onClick}\r\n className={headerClassName}\r\n aria-expanded={active}\r\n >\r\n {header}\r\n <svg\r\n className={`w-5 h-5 text-gray-500 transition-transform duration-200 ${active ? 'transform rotate-180' : ''\r\n }`}\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n strokeWidth={2}\r\n d=\"M19 9l-7 7-7-7\"\r\n />\r\n </svg>\r\n </button>\r\n\r\n <div\r\n className={`${contentClassName} ${active ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'\r\n } overflow-hidden`}\r\n >\r\n <div className={`p-4 bg-white border-t border-gray-200 ${contentClassName}`}>\r\n {content}\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nexport default Accordion;","import React from 'react';\n\nexport interface SpinnerProps {\n className?: string;\n containerClassName?: string;\n dotClassName?: string;\n barClassName?: string;\n size?: 'sm' | 'md' | 'lg';\n type?: 'circle' | 'dots' | 'pulse' | 'bars';\n};\n\nconst Spinner = ({ \n className, \n containerClassName = 'flex gap-1',\n dotClassName = 'bg-blue-600 rounded-full animate-bounce',\n barClassName = 'bg-blue-600 animate-pulse',\n size = 'md', \n type = 'circle' \n}: SpinnerProps) => {\n const sizeClasses = {\n sm: 'w-4 h-4',\n md: 'w-6 h-6',\n lg: 'w-8 h-8'\n };\n\n const dotSizeClasses = {\n sm: 'w-1 h-1',\n md: 'w-2 h-2',\n lg: 'w-3 h-3'\n };\n\n const barSizeClasses = {\n sm: 'w-1 h-4',\n md: 'w-1 h-6',\n lg: 'w-1 h-8'\n };\n\n if (type === 'dots') {\n return (\n <div role=\"status\" className={`${containerClassName} ${className || ''}`}>\n <span className=\"sr-only\">Loading...</span>\n <div className={`${dotSizeClasses[size]} ${dotClassName}`} style={{ animationDelay: '0ms' }}></div>\n <div className={`${dotSizeClasses[size]} ${dotClassName}`} style={{ animationDelay: '150ms' }}></div>\n <div className={`${dotSizeClasses[size]} ${dotClassName}`} style={{ animationDelay: '300ms' }}></div>\n </div>\n );\n }\n\n if (type === 'pulse') {\n return (\n <div role=\"status\" className={`${sizeClasses[size]} ${className || ''}`}>\n <span className=\"sr-only\">Loading...</span>\n <div className={`${sizeClasses[size]} ${dotClassName}`}></div>\n </div>\n );\n }\n\n if (type === 'bars') {\n return (\n <div role=\"status\" className={`flex gap-1 items-center ${containerClassName} ${className || ''}`}>\n <span className=\"sr-only\">Loading...</span>\n <div className={`${barSizeClasses[size]} ${barClassName}`} style={{ animationDelay: '0ms' }}></div>\n <div className={`${barSizeClasses[size]} ${barClassName}`} style={{ animationDelay: '200ms' }}></div>\n <div className={`${barSizeClasses[size]} ${barClassName}`} style={{ animationDelay: '400ms' }}></div>\n <div className={`${barSizeClasses[size]} ${barClassName}`} style={{ animationDelay: '600ms' }}></div>\n </div>\n );\n }\n\n // Default circle spinner\n return (\n <div\n role=\"status\"\n className={`inline-block animate-spin rounded-full border-2 border-gray-300 border-t-blue-600 ${sizeClasses[size]} ${className || ''}`}\n >\n <span className=\"sr-only\">Loading...</span>\n </div>\n );\n};\n\nexport default Spinner;\n","{/* must have toggle, options, selected, onChange */ }\r\nimport React, { useState } from 'react';\r\n\r\ntype DropDownOption = {\r\n value: string;\r\n label: React.ReactNode;\r\n};\r\n\r\ntype DropDownProps = {\r\n toggle: React.ReactNode;\r\n options: React.ReactNode[] | DropDownOption[];\r\n selected: React.ReactNode;\r\n onChange: (value: React.ReactNode) => void;\r\n className?: string;\r\n containerClassName?: string;\r\n dropdownClassName?: string;\r\n optionsContainerClassName?: string;\r\n optionClassName?: string;\r\n};\r\n\r\nconst DropDown = ({\r\n toggle,\r\n options,\r\n selected,\r\n onChange,\r\n className = '',\r\n containerClassName = 'relative inline-block text-left',\r\n dropdownClassName = 'absolute z-50 mt-2 w-48 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none',\r\n optionsContainerClassName = 'py-1 flex flex-col',\r\n optionClassName = 'block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900'\r\n}: DropDownProps) => {\r\n const [isOpen, setIsOpen] = useState(false);\r\n\r\n const handleToggle = () => {\r\n setIsOpen(!isOpen);\r\n };\r\n\r\n const handleOptionClick = (option: React.ReactNode) => {\r\n onChange(option);\r\n setIsOpen(false);\r\n };\r\n\r\n return (\r\n <div className={`${containerClassName} ${className}`}>\r\n <div onClick={handleToggle} className=\"cursor-pointer\">\r\n {toggle}\r\n </div>\r\n\r\n {isOpen && (\r\n <div className={dropdownClassName}>\r\n <div className={optionsContainerClassName}>\r\n {options.map((option, index) => {\r\n const isOptionObject = typeof option === 'object' && option !== null && 'value' in option;\r\n const optionValue = isOptionObject ? (option as DropDownOption).value : option;\r\n const optionLabel = isOptionObject ? (option as DropDownOption).label : option;\r\n\r\n return (\r\n <button\r\n key={index}\r\n onClick={() => handleOptionClick(optionValue)}\r\n className={optionClassName}\r\n >\r\n {optionLabel}\r\n </button>\r\n );\r\n })}\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n};\r\n\r\nexport default DropDown;","{/* must have progress, max, min, aria-label */ }\r\nimport React from 'react';\r\nimport { CSSProperties } from 'react';\r\n\r\ntype ProgressBarProps = {\r\n progress: number;\r\n max: number;\r\n min: number;\r\n 'aria-label': string;\r\n};\r\n\r\n{/* need a class for the progress bar class name: progress-bar */ }\r\ntype ProgressBarPropsWithClassName = ProgressBarProps & {\r\n className?: CSSProperties;\r\n style?: CSSProperties;\r\n containerClassName?: string;\r\n barClassName?: string;\r\n variant?: 'primary' | 'success' | 'warning' | 'danger' | 'dark' | 'light';\r\n};\r\n\r\nconst ProgressBar = ({ progress, max, min, 'aria-label': ariaLabel, className, style, containerClassName = 'w-full bg-gray-200 rounded-full h-4 overflow-hidden', barClassName = 'h-full rounded-full transition-all duration-300 flex items-center justify-center text-xs font-medium', variant = 'primary' }: ProgressBarPropsWithClassName) => {\r\n const variantClasses = {\r\n primary: {\r\n bg: 'bg-blue-600',\r\n text: 'text-white',\r\n containerBg: 'bg-gray-200'\r\n },\r\n success: {\r\n bg: 'bg-green-600',\r\n text: 'text-white',\r\n containerBg: 'bg-gray-200'\r\n },\r\n warning: {\r\n bg: 'bg-yellow-500',\r\n text: 'text-gray-900',\r\n containerBg: 'bg-gray-200'\r\n },\r\n danger: {\r\n bg: 'bg-red-600',\r\n text: 'text-white',\r\n containerBg: 'bg-gray-200'\r\n },\r\n dark: {\r\n bg: 'bg-gray-800',\r\n text: 'text-white',\r\n containerBg: 'bg-gray-300'\r\n },\r\n light: {\r\n bg: 'bg-gray-100',\r\n text: 'text-gray-900',\r\n containerBg: 'bg-gray-300'\r\n }\r\n };\r\n\r\n const currentVariant = variantClasses[variant];\r\n const barClasses = `${currentVariant.bg} ${barClassName} ${currentVariant.text}`;\r\n\r\n return (\r\n <div className={containerClassName}>\r\n <div\r\n role=\"progressbar\"\r\n className={barClasses}\r\n aria-valuenow={progress}\r\n aria-valuemin={min}\r\n aria-valuemax={max}\r\n style={{ width: `${progress}%`, ...className, ...style }}\r\n >\r\n {progress > 10 && `${progress}%`}\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nexport default ProgressBar;","import React, { useState, useEffect, CSSProperties } from 'react';\r\n\r\ntype TypedProps = {\r\n strings: string[];\r\n typeSpeed?: number;\r\n backSpeed?: number;\r\n backDelay?: number;\r\n startDelay?: number;\r\n loop?: boolean;\r\n showCursor?: boolean;\r\n className?: string;\r\n containerClassName?: string;\r\n typedClassName?: string;\r\n cursorClassName?: string;\r\n style?: TypedStyle;\r\n};\r\n\r\ntype TypedStyle = CSSProperties & {\r\n animation?: string;\r\n animationDelay?: string;\r\n};\r\n\r\nconst Typed = ({\r\n strings,\r\n typeSpeed = 50,\r\n backSpeed = 30,\r\n backDelay = 500,\r\n startDelay = 0,\r\n loop = true,\r\n showCursor = true,\r\n className = '',\r\n containerClassName = 'inline-block',\r\n typedClassName = 'typed',\r\n cursorClassName = 'typed-cursor ml-1 inline-block w-0.5 h-5 bg-current',\r\n style = {},\r\n}: TypedProps) => {\r\n const [currentStringIndex, setCurrentStringIndex] = useState(0);\r\n const [currentText, setCurrentText] = useState('');\r\n const [isDeleting, setIsDeleting] = useState(false);\r\n const [isPaused, setIsPaused] = useState(false);\r\n const [cursorOpacity, setCursorOpacity] = useState(1);\r\n\r\n useEffect(() => {\r\n const timer = setTimeout(() => {\r\n setIsPaused(false);\r\n }, startDelay);\r\n\r\n return () => clearTimeout(timer);\r\n }, [startDelay]);\r\n\r\n useEffect(() => {\r\n if (isPaused) return;\r\n\r\n const currentString = strings[currentStringIndex] || '';\r\n\r\n const timer = setTimeout(() => {\r\n if (!isDeleting) {\r\n // Typing\r\n if (currentText.length < currentString.length) {\r\n setCurrentText(currentText + currentString[currentText.length]);\r\n } else {\r\n // Finished typing, wait before deleting\r\n if (loop) {\r\n setIsPaused(true);\r\n setTimeout(() => {\r\n setIsPaused(false);\r\n setIsDeleting(true);\r\n }, backDelay);\r\n }\r\n }\r\n } else {\r\n // Deleting\r\n if (currentText.length > 0) {\r\n setCurrentText(currentText.slice(0, -1));\r\n } else {\r\n // Finished deleting, move to next string\r\n setIsDeleting(false);\r\n setCurrentStringIndex((prevIndex) =>\r\n prevIndex === strings.length - 1 ? 0 : prevIndex + 1\r\n );\r\n }\r\n }\r\n }, isDeleting ? backSpeed : typeSpeed);\r\n\r\n return () => clearTimeout(timer);\r\n }, [currentText, isDeleting, currentStringIndex, strings, typeSpeed, backSpeed, backDelay, loop, isPaused]);\r\n\r\n // Cursor fade effect\r\n useEffect(() => {\r\n const fadeTimer = setInterval(() => {\r\n setCursorOpacity(prev => {\r\n if (prev === 1) return 0;\r\n return 1;\r\n });\r\n }, 750);\r\n\r\n return () => clearInterval(fadeTimer);\r\n }, []);\r\n\r\n return (\r\n <span className={`${containerClassName} ${className}`} >\r\n <span className={typedClassName}>{currentText}</span>\r\n {showCursor && (\r\n <span\r\n className={cursorClassName}\r\n aria-hidden=\"true\"\r\n style={{\r\n ...style,\r\n opacity: cursorOpacity\r\n }}\r\n >\r\n\r\n </span>\r\n )}\r\n </span>\r\n );\r\n};\r\n\r\nexport default Typed;"],"x_google_ignoreList":[0,1],"mappings":";;;;;;;;;;;;;;;CAWA,IAAI,qBAAqB,OAAO,IAAI,6BAA6B;CAEjE,SAAS,QAAQ,MAAM,QAAQ,UAAU;EACvC,IAAI,MAAM;EACV,KAAK,MAAM,aAAa,MAAM,KAAK;EACnC,KAAK,MAAM,OAAO,QAAQ,MAAM,KAAK,OAAO;EAC5C,IAAI,SAAS,QAAQ;GACnB,WAAW,EAAE;GACb,KAAK,IAAI,YAAY,QACnB,UAAU,aAAa,SAAS,YAAY,OAAO;SAChD,WAAW;EAClB,SAAS,SAAS;EAClB,OAAO;GACL,UAAU;GACJ;GACD;GACL,KAAK,KAAK,MAAM,SAAS,SAAS;GAClC,OAAO;GACR;;CAGH,QAAQ,MAAM;CACd,QAAQ,OAAO;;;;;CC9Bb,OAAO,UAAA,sCAAA;;ACaT,IAAM,UAAU,EACd,UACA,UAAU,WACV,OAAO,MACP,gBACE,KAAK,GACP,WAAW,OACX,YAAY,IACZ,qBAAqB,4EACrB,mBAAmB,gEACnB,gBAAgB,4BACC;CAuBjB,OACE,iBAAA,GAAA,mBAAA,KAAC,UAAD;EACE,WAVY;MACZ,mBAAY;MACZ;GAbF,SAAS;GACT,WAAW;GACX,SAAS;GAWP,CAAe,SAAS;MACxB;GARF,IAAI;GACJ,IAAI;GACJ,IAAI;GAMF,CAAY,MAAM;MAClB,WAAW,kCAAkC,GAAG;MAChD,UAAU;IACZ,MAIa;EACF;EACC;EAET;EACM,CAAA;;;;AC7Cb,IAAM,QAAQ,EACZ,UACA,OACA,YAAY,IACZ,qBAAqB,8CACrB,iBAAiB,uCACjB,UAAU,MACV,SAAS,WACM;CAsBf,OACE,iBAAA,GAAA,mBAAA,MAAC,OAAD;EAAK,WARS;MACZ,mBAAmB;MACnB;GAfF,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GAYF,CAAe,SAAS;MACxB;GATF,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GAMF,CAAc,QAAQ;MACtB,UAAU;IACZ,MAGgB;YAAhB,CACG,SACC,iBAAA,GAAA,mBAAA,KAAC,OAAD;GAAK,WAAU;aACb,iBAAA,GAAA,mBAAA,KAAC,MAAD;IAAI,WAAW;cAAiB;IAAW,CAAA;GACvC,CAAA,EAEP,SACG;;;;;ACvCV,IAAM,UAAU,EACd,WAAW,4BACX,UAAU,WACV,OAAO,MACP,OAAO,gDACP,WACA,qBAAqB,4EACrB,mBAAmB,4CACnB,gBAAgB,4BACC;CAuBjB,OACE,iBAAA,GAAA,mBAAA,KAAC,KAAD;EAAS;EAAM,QAAO;EAAS,KAAI;EAAsB,WAR3C;MACZ,mBAAY;MACZ;GAbF,SAAS;GACT,WAAW;GACX,SAAS;GAWP,CAAe,SAAS;MACxB;GARF,IAAI;GACJ,IAAI;GACJ,IAAI;GAMF,CAAY,MAAM;MAClB,UAAU;IACZ,MAGoE;EACjE;EACC,CAAA;;;;AC5BR,IAAM,aAAa,EAAE,KAAK,QAAQ,SAAS,QAAQ,SAAS,YAAY,IAAI,qBAAqB,qDAAqD,kBAAkB,iKAAiK,mBAAmB,gDAAgE;CAC1Z,OACE,iBAAA,GAAA,mBAAA,MAAC,OAAD;EAAK,WAAW,GAAG,mBAAmB,GAAG;YAAzC,CACE,iBAAA,GAAA,mBAAA,MAAC,UAAD;GACW;GACT,WAAW;GACX,iBAAe;aAHjB,CAKG,QACD,iBAAA,GAAA,mBAAA,KAAC,OAAD;IACE,WAAW,2DAA2D,SAAS,yBAAyB;IAExG,MAAK;IACL,QAAO;IACP,SAAQ;cAER,iBAAA,GAAA,mBAAA,KAAC,QAAD;KACE,eAAc;KACd,gBAAe;KACf,aAAa;KACb,GAAE;KACF,CAAA;IACE,CAAA,CACC;MAET,iBAAA,GAAA,mBAAA,KAAC,OAAD;GACE,WAAW,GAAG,iBAAiB,GAAG,SAAS,yBAAyB,oBACjE;aAEH,iBAAA,GAAA,mBAAA,KAAC,OAAD;IAAK,WAAW,yCAAyC;cACtD;IACG,CAAA;GACF,CAAA,CACF;;;;;ACxCV,IAAM,WAAW,EACf,WACA,qBAAqB,cACrB,eAAe,2CACf,eAAe,6BACf,OAAO,MACP,OAAO,eACW;CAClB,MAAM,cAAc;EAClB,IAAI;EACJ,IAAI;EACJ,IAAI;EACL;CAED,MAAM,iBAAiB;EACrB,IAAI;EACJ,IAAI;EACJ,IAAI;EACL;CAED,MAAM,iBAAiB;EACrB,IAAI;EACJ,IAAI;EACJ,IAAI;EACL;CAED,IAAI,SAAS,QACX,OACE,iBAAA,GAAA,mBAAA,MAAC,OAAD;EAAK,MAAK;EAAS,WAAW,GAAG,mBAAmB,GAAG,aAAa;YAApE;GACE,iBAAA,GAAA,mBAAA,KAAC,QAAD;IAAM,WAAU;cAAU;IAAiB,CAAA;GAC3C,iBAAA,GAAA,mBAAA,KAAC,OAAD;IAAK,WAAW,GAAG,eAAe,MAAM,GAAG;IAAgB,OAAO,EAAE,gBAAgB,OAAO;IAAQ,CAAA;GACnG,iBAAA,GAAA,mBAAA,KAAC,OAAD;IAAK,WAAW,GAAG,eAAe,MAAM,GAAG;IAAgB,OAAO,EAAE,gBAAgB,SAAS;IAAQ,CAAA;GACrG,iBAAA,GAAA,mBAAA,KAAC,OAAD;IAAK,WAAW,GAAG,eAAe,MAAM,GAAG;IAAgB,OAAO,EAAE,gBAAgB,SAAS;IAAQ,CAAA;GACjG;;CAIV,IAAI,SAAS,SACX,OACE,iBAAA,GAAA,mBAAA,MAAC,OAAD;EAAK,MAAK;EAAS,WAAW,GAAG,YAAY,MAAM,GAAG,aAAa;YAAnE,CACE,iBAAA,GAAA,mBAAA,KAAC,QAAD;GAAM,WAAU;aAAU;GAAiB,CAAA,EAC3C,iBAAA,GAAA,mBAAA,KAAC,OAAD,EAAK,WAAW,GAAG,YAAY,MAAM,GAAG,gBAAsB,CAAA,CAC1D;;CAIV,IAAI,SAAS,QACX,OACE,iBAAA,GAAA,mBAAA,MAAC,OAAD;EAAK,MAAK;EAAS,WAAW,2BAA2B,mBAAmB,GAAG,aAAa;YAA5F;GACE,iBAAA,GAAA,mBAAA,KAAC,QAAD;IAAM,WAAU;cAAU;IAAiB,CAAA;GAC3C,iBAAA,GAAA,mBAAA,KAAC,OAAD;IAAK,WAAW,GAAG,eAAe,MAAM,GAAG;IAAgB,OAAO,EAAE,gBAAgB,OAAO;IAAQ,CAAA;GACnG,iBAAA,GAAA,mBAAA,KAAC,OAAD;IAAK,WAAW,GAAG,eAAe,MAAM,GAAG;IAAgB,OAAO,EAAE,gBAAgB,SAAS;IAAQ,CAAA;GACrG,iBAAA,GAAA,mBAAA,KAAC,OAAD;IAAK,WAAW,GAAG,eAAe,MAAM,GAAG;IAAgB,OAAO,EAAE,gBAAgB,SAAS;IAAQ,CAAA;GACrG,iBAAA,GAAA,mBAAA,KAAC,OAAD;IAAK,WAAW,GAAG,eAAe,MAAM,GAAG;IAAgB,OAAO,EAAE,gBAAgB,SAAS;IAAQ,CAAA;GACjG;;CAKV,OACE,iBAAA,GAAA,mBAAA,KAAC,OAAD;EACE,MAAK;EACL,WAAW,qFAAqF,YAAY,MAAM,GAAG,aAAa;YAElI,iBAAA,GAAA,mBAAA,KAAC,QAAD;GAAM,WAAU;aAAU;GAAiB,CAAA;EACvC,CAAA;;;;ACxDV,IAAM,YAAY,EAChB,QACA,SACA,UACA,UACA,YAAY,IACZ,qBAAqB,mCACrB,oBAAoB,6GACpB,4BAA4B,sBAC5B,kBAAkB,2IACC;CACnB,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAE3C,MAAM,qBAAqB;EACzB,UAAU,CAAC,OAAO;;CAGpB,MAAM,qBAAqB,WAA4B;EACrD,SAAS,OAAO;EAChB,UAAU,MAAM;;CAGlB,OACE,iBAAA,GAAA,mBAAA,MAAC,OAAD;EAAK,WAAW,GAAG,mBAAmB,GAAG;YAAzC,CACE,iBAAA,GAAA,mBAAA,KAAC,OAAD;GAAK,SAAS;GAAc,WAAU;aACnC;GACG,CAAA,EAEL,UACC,iBAAA,GAAA,mBAAA,KAAC,OAAD;GAAK,WAAW;aACd,iBAAA,GAAA,mBAAA,KAAC,OAAD;IAAK,WAAW;cACb,QAAQ,KAAK,QAAQ,UAAU;KAC9B,MAAM,iBAAiB,OAAO,WAAW,YAAY,WAAW,QAAQ,WAAW;KACnF,MAAM,cAAc,iBAAkB,OAA0B,QAAQ;KAGxE,OACE,iBAAA,GAAA,mBAAA,KAAC,UAAD;MAEE,eAAe,kBAAkB,YAAY;MAC7C,WAAW;gBANK,iBAAkB,OAA0B,QAAQ;MAS7D,EALF,MAKE;MAEX;IACE,CAAA;GACF,CAAA,CAEJ;;;;;ACjDV,IAAM,eAAe,EAAE,UAAU,KAAK,KAAK,cAAc,WAAW,WAAW,OAAO,qBAAqB,uDAAuD,eAAe,wGAAwG,UAAU,gBAA+C;CAkChV,MAAM,iBAAiB;EAhCrB,SAAS;GACP,IAAI;GACJ,MAAM;GACN,aAAa;GACd;EACD,SAAS;GACP,IAAI;GACJ,MAAM;GACN,aAAa;GACd;EACD,SAAS;GACP,IAAI;GACJ,MAAM;GACN,aAAa;GACd;EACD,QAAQ;GACN,IAAI;GACJ,MAAM;GACN,aAAa;GACd;EACD,MAAM;GACJ,IAAI;GACJ,MAAM;GACN,aAAa;GACd;EACD,OAAO;GACL,IAAI;GACJ,MAAM;GACN,aAAa;GACd;EAGoB,CAAe;CAGtC,OACE,iBAAA,GAAA,mBAAA,KAAC,OAAD;EAAK,WAAW;YACd,iBAAA,GAAA,mBAAA,KAAC,OAAD;GACE,MAAK;GACL,WAAW,GANK,eAAe,GAAG,GAAG,aAAa,GAAG,eAAe;GAOpE,iBAAe;GACf,iBAAe;GACf,iBAAe;GACf,OAAO;IAAE,OAAO,GAAG,SAAS;IAAI,GAAG;IAAW,GAAG;IAAO;aAEvD,WAAW,MAAM,GAAG,SAAS;GAC1B,CAAA;EACF,CAAA;;;;AC/CV,IAAM,SAAS,EACb,SACA,YAAY,IACZ,YAAY,IACZ,YAAY,KACZ,aAAa,GACb,OAAO,MACP,aAAa,MACb,YAAY,IACZ,qBAAqB,gBACrB,iBAAiB,SACjB,kBAAkB,uDAClB,QAAQ,EAAE,OACM;CAChB,MAAM,CAAC,oBAAoB,yBAAyB,SAAS,EAAE;CAC/D,MAAM,CAAC,aAAa,kBAAkB,SAAS,GAAG;CAClD,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAC/C,MAAM,CAAC,eAAe,oBAAoB,SAAS,EAAE;CAErD,gBAAgB;EACd,MAAM,QAAQ,iBAAiB;GAC7B,YAAY,MAAM;KACjB,WAAW;EAEd,aAAa,aAAa,MAAM;IAC/B,CAAC,WAAW,CAAC;CAEhB,gBAAgB;EACd,IAAI,UAAU;EAEd,MAAM,gBAAgB,QAAQ,uBAAuB;EAErD,MAAM,QAAQ,iBAAiB;GAC7B,IAAI,CAAC;QAEC,YAAY,SAAS,cAAc,QACrC,eAAe,cAAc,cAAc,YAAY,QAAQ;SAG/D,IAAI,MAAM;KACR,YAAY,KAAK;KACjB,iBAAiB;MACf,YAAY,MAAM;MAClB,cAAc,KAAK;QAClB,UAAU;;UAKjB,IAAI,YAAY,SAAS,GACvB,eAAe,YAAY,MAAM,GAAG,GAAG,CAAC;QACnC;IAEL,cAAc,MAAM;IACpB,uBAAuB,cACrB,cAAc,QAAQ,SAAS,IAAI,IAAI,YAAY,EACpD;;KAGJ,aAAa,YAAY,UAAU;EAEtC,aAAa,aAAa,MAAM;IAC/B;EAAC;EAAa;EAAY;EAAoB;EAAS;EAAW;EAAW;EAAW;EAAM;EAAS,CAAC;CAG3G,gBAAgB;EACd,MAAM,YAAY,kBAAkB;GAClC,kBAAiB,SAAQ;IACvB,IAAI,SAAS,GAAG,OAAO;IACvB,OAAO;KACP;KACD,IAAI;EAEP,aAAa,cAAc,UAAU;IACpC,EAAE,CAAC;CAEN,OACE,iBAAA,GAAA,mBAAA,MAAC,QAAD;EAAM,WAAW,GAAG,mBAAmB,GAAG;YAA1C,CACE,iBAAA,GAAA,mBAAA,KAAC,QAAD;GAAM,WAAW;aAAiB;GAAmB,CAAA,EACpD,cACC,iBAAA,GAAA,mBAAA,KAAC,QAAD;GACE,WAAW;GACX,eAAY;GACZ,OAAO;IACL,GAAG;IACH,SAAS;IACV;GAGI,CAAA,CAEJ"}
|
|
@@ -8,6 +8,10 @@ interface AccordionProps {
|
|
|
8
8
|
onClick: () => void;
|
|
9
9
|
header: React.ReactNode;
|
|
10
10
|
content: React.ReactNode;
|
|
11
|
+
className?: string;
|
|
12
|
+
containerClassName?: string;
|
|
13
|
+
headerClassName?: string;
|
|
14
|
+
contentClassName?: string;
|
|
11
15
|
}
|
|
12
|
-
declare const Accordion: ({ key, active, onClick, header, content }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
declare const Accordion: ({ key, active, onClick, header, content, className, containerClassName, headerClassName, contentClassName }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
|
|
13
17
|
export default Accordion;
|
|
@@ -1,9 +1,12 @@
|
|
|
1
|
-
|
|
1
|
+
export interface AnchorProps {
|
|
2
2
|
children?: React.ReactNode;
|
|
3
3
|
variant?: 'primary' | 'secondary' | 'outline';
|
|
4
4
|
size?: 'sm' | 'md' | 'lg';
|
|
5
5
|
href?: string;
|
|
6
6
|
className?: string;
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
containerClassName?: string;
|
|
8
|
+
variantClassName?: string;
|
|
9
|
+
sizeClassName?: string;
|
|
10
|
+
}
|
|
11
|
+
declare const Anchor: ({ children, variant, size, href, className, containerClassName, variantClassName, sizeClassName }: AnchorProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
12
|
export default Anchor;
|
|
@@ -6,6 +6,9 @@ export interface ButtonProps {
|
|
|
6
6
|
onClick?: () => void;
|
|
7
7
|
disabled?: boolean;
|
|
8
8
|
className?: string;
|
|
9
|
+
containerClassName?: string;
|
|
10
|
+
variantClassName?: string;
|
|
11
|
+
sizeClassName?: string;
|
|
9
12
|
}
|
|
10
|
-
declare const Button: ({ children, variant, size, onClick, disabled, className, }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
declare const Button: ({ children, variant, size, onClick, disabled, className, containerClassName, variantClassName, sizeClassName }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
14
|
export default Button;
|
|
@@ -3,8 +3,10 @@ export interface CardProps {
|
|
|
3
3
|
children: React.ReactNode;
|
|
4
4
|
title?: string;
|
|
5
5
|
className?: string;
|
|
6
|
+
containerClassName?: string;
|
|
7
|
+
titleClassName?: string;
|
|
6
8
|
padding?: 'none' | 'sm' | 'md' | 'lg';
|
|
7
9
|
shadow?: 'none' | 'sm' | 'md' | 'lg';
|
|
8
10
|
}
|
|
9
|
-
declare const Card: ({ children, title, className, padding, shadow, }: CardProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
declare const Card: ({ children, title, className, containerClassName, titleClassName, padding, shadow, }: CardProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
12
|
export default Card;
|
|
@@ -1,10 +1,18 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
+
type DropDownOption = {
|
|
3
|
+
value: string;
|
|
4
|
+
label: React.ReactNode;
|
|
5
|
+
};
|
|
2
6
|
type DropDownProps = {
|
|
3
7
|
toggle: React.ReactNode;
|
|
4
|
-
options: React.ReactNode[];
|
|
8
|
+
options: React.ReactNode[] | DropDownOption[];
|
|
5
9
|
selected: React.ReactNode;
|
|
6
10
|
onChange: (value: React.ReactNode) => void;
|
|
7
11
|
className?: string;
|
|
12
|
+
containerClassName?: string;
|
|
13
|
+
dropdownClassName?: string;
|
|
14
|
+
optionsContainerClassName?: string;
|
|
15
|
+
optionClassName?: string;
|
|
8
16
|
};
|
|
9
|
-
declare const DropDown: ({ toggle, options, selected, onChange, className }: DropDownProps) => import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
declare const DropDown: ({ toggle, options, selected, onChange, className, containerClassName, dropdownClassName, optionsContainerClassName, optionClassName }: DropDownProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
18
|
export default DropDown;
|
|
@@ -8,7 +8,9 @@ type ProgressBarProps = {
|
|
|
8
8
|
type ProgressBarPropsWithClassName = ProgressBarProps & {
|
|
9
9
|
className?: CSSProperties;
|
|
10
10
|
style?: CSSProperties;
|
|
11
|
+
containerClassName?: string;
|
|
12
|
+
barClassName?: string;
|
|
11
13
|
variant?: 'primary' | 'success' | 'warning' | 'danger' | 'dark' | 'light';
|
|
12
14
|
};
|
|
13
|
-
declare const ProgressBar: ({ progress, max, min, "aria-label": ariaLabel, className, style, variant }: ProgressBarPropsWithClassName) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
declare const ProgressBar: ({ progress, max, min, "aria-label": ariaLabel, className, style, containerClassName, barClassName, variant }: ProgressBarPropsWithClassName) => import("react/jsx-runtime").JSX.Element;
|
|
14
16
|
export default ProgressBar;
|
|
@@ -1,7 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
export interface SpinnerProps {
|
|
2
2
|
className?: string;
|
|
3
|
+
containerClassName?: string;
|
|
4
|
+
dotClassName?: string;
|
|
5
|
+
barClassName?: string;
|
|
3
6
|
size?: 'sm' | 'md' | 'lg';
|
|
4
7
|
type?: 'circle' | 'dots' | 'pulse' | 'bars';
|
|
5
|
-
}
|
|
6
|
-
declare const Spinner: ({ className, size, type }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
}
|
|
9
|
+
declare const Spinner: ({ className, containerClassName, dotClassName, barClassName, size, type }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
10
|
export default Spinner;
|
|
@@ -8,11 +8,14 @@ type TypedProps = {
|
|
|
8
8
|
loop?: boolean;
|
|
9
9
|
showCursor?: boolean;
|
|
10
10
|
className?: string;
|
|
11
|
+
containerClassName?: string;
|
|
12
|
+
typedClassName?: string;
|
|
13
|
+
cursorClassName?: string;
|
|
11
14
|
style?: TypedStyle;
|
|
12
15
|
};
|
|
13
16
|
type TypedStyle = CSSProperties & {
|
|
14
17
|
animation?: string;
|
|
15
18
|
animationDelay?: string;
|
|
16
19
|
};
|
|
17
|
-
declare const Typed: ({ strings, typeSpeed, backSpeed, backDelay, startDelay, loop, showCursor, className, style, }: TypedProps) => import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
declare const Typed: ({ strings, typeSpeed, backSpeed, backDelay, startDelay, loop, showCursor, className, containerClassName, typedClassName, cursorClassName, style, }: TypedProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
21
|
export default Typed;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "luna-components-library",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.21",
|
|
4
4
|
"description": "A React component library with TypeScript support",
|
|
5
5
|
"main": "dist/luna-components-library.js",
|
|
6
6
|
"module": "dist/luna-components-library.js",
|
|
@@ -35,11 +35,11 @@
|
|
|
35
35
|
"@babel/preset-react": "^7.28.5",
|
|
36
36
|
"@babel/preset-typescript": "^7.28.5",
|
|
37
37
|
"@testing-library/jest-dom": "^6.0.0",
|
|
38
|
-
"@testing-library/react": "^
|
|
38
|
+
"@testing-library/react": "^16.0.0",
|
|
39
39
|
"@types/jest": "^29.5.0",
|
|
40
|
-
"@types/react": "^
|
|
41
|
-
"@types/react-dom": "^
|
|
42
|
-
"@vitejs/plugin-react": "^
|
|
40
|
+
"@types/react": "^19.0.0",
|
|
41
|
+
"@types/react-dom": "^19.0.0",
|
|
42
|
+
"@vitejs/plugin-react": "^6.0.1",
|
|
43
43
|
"babel-jest": "^30.3.0",
|
|
44
44
|
"jest": "^29.0.0",
|
|
45
45
|
"jest-environment-jsdom": "^30.3.0",
|