luna-components-library 1.1.18 → 1.1.22
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 -37
- 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 +8 -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 +5 -1
- 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", target = "_blank", rel = "noopener noreferrer" }) => {
|
|
96
96
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
|
|
97
97
|
href,
|
|
98
|
-
target
|
|
99
|
-
rel
|
|
98
|
+
target,
|
|
99
|
+
rel,
|
|
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",
|
|
@@ -109,6 +109,8 @@ var Anchor = ({ children = "Pablo Andrey Chacon Luna", variant = "primary", size
|
|
|
109
109
|
md: "px-4 py-2 text-base",
|
|
110
110
|
lg: "px-6 py-3 text-lg"
|
|
111
111
|
}[size]}
|
|
112
|
+
${variantClassName}
|
|
113
|
+
${sizeClassName}
|
|
112
114
|
${className}
|
|
113
115
|
`.trim(),
|
|
114
116
|
children
|
|
@@ -116,12 +118,12 @@ var Anchor = ({ children = "Pablo Andrey Chacon Luna", variant = "primary", size
|
|
|
116
118
|
};
|
|
117
119
|
//#endregion
|
|
118
120
|
//#region src/components/Accordion.tsx
|
|
119
|
-
var Accordion = ({ key, active, onClick, header, content }) => {
|
|
121
|
+
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
122
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
121
|
-
className:
|
|
123
|
+
className: `${containerClassName} ${className}`,
|
|
122
124
|
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
|
|
123
125
|
onClick,
|
|
124
|
-
className:
|
|
126
|
+
className: headerClassName,
|
|
125
127
|
"aria-expanded": active,
|
|
126
128
|
children: [header, /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
|
|
127
129
|
className: `w-5 h-5 text-gray-500 transition-transform duration-200 ${active ? "transform rotate-180" : ""}`,
|
|
@@ -136,9 +138,9 @@ var Accordion = ({ key, active, onClick, header, content }) => {
|
|
|
136
138
|
})
|
|
137
139
|
})]
|
|
138
140
|
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
139
|
-
className:
|
|
141
|
+
className: `${contentClassName} ${active ? "max-h-96 opacity-100" : "max-h-0 opacity-0"} overflow-hidden`,
|
|
140
142
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
141
|
-
className:
|
|
143
|
+
className: `p-4 bg-white border-t border-gray-200 ${contentClassName}`,
|
|
142
144
|
children: content
|
|
143
145
|
})
|
|
144
146
|
})]
|
|
@@ -146,7 +148,7 @@ var Accordion = ({ key, active, onClick, header, content }) => {
|
|
|
146
148
|
};
|
|
147
149
|
//#endregion
|
|
148
150
|
//#region src/components/Spinner.tsx
|
|
149
|
-
var Spinner = ({ className, size = "md", type = "circle" }) => {
|
|
151
|
+
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
152
|
const sizeClasses = {
|
|
151
153
|
sm: "w-4 h-4",
|
|
152
154
|
md: "w-6 h-6",
|
|
@@ -164,22 +166,22 @@ var Spinner = ({ className, size = "md", type = "circle" }) => {
|
|
|
164
166
|
};
|
|
165
167
|
if (type === "dots") return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
166
168
|
role: "status",
|
|
167
|
-
className:
|
|
169
|
+
className: `${containerClassName} ${className || ""}`,
|
|
168
170
|
children: [
|
|
169
171
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
|
|
170
172
|
className: "sr-only",
|
|
171
173
|
children: "Loading..."
|
|
172
174
|
}),
|
|
173
175
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
174
|
-
className: `${dotSizeClasses[size]}
|
|
176
|
+
className: `${dotSizeClasses[size]} ${dotClassName}`,
|
|
175
177
|
style: { animationDelay: "0ms" }
|
|
176
178
|
}),
|
|
177
179
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
178
|
-
className: `${dotSizeClasses[size]}
|
|
180
|
+
className: `${dotSizeClasses[size]} ${dotClassName}`,
|
|
179
181
|
style: { animationDelay: "150ms" }
|
|
180
182
|
}),
|
|
181
183
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
182
|
-
className: `${dotSizeClasses[size]}
|
|
184
|
+
className: `${dotSizeClasses[size]} ${dotClassName}`,
|
|
183
185
|
style: { animationDelay: "300ms" }
|
|
184
186
|
})
|
|
185
187
|
]
|
|
@@ -190,30 +192,30 @@ var Spinner = ({ className, size = "md", type = "circle" }) => {
|
|
|
190
192
|
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
|
|
191
193
|
className: "sr-only",
|
|
192
194
|
children: "Loading..."
|
|
193
|
-
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${sizeClasses[size]}
|
|
195
|
+
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${sizeClasses[size]} ${dotClassName}` })]
|
|
194
196
|
});
|
|
195
197
|
if (type === "bars") return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
196
198
|
role: "status",
|
|
197
|
-
className: `flex gap-1 items-center ${className || ""}`,
|
|
199
|
+
className: `flex gap-1 items-center ${containerClassName} ${className || ""}`,
|
|
198
200
|
children: [
|
|
199
201
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
|
|
200
202
|
className: "sr-only",
|
|
201
203
|
children: "Loading..."
|
|
202
204
|
}),
|
|
203
205
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
204
|
-
className: `${barSizeClasses[size]}
|
|
206
|
+
className: `${barSizeClasses[size]} ${barClassName}`,
|
|
205
207
|
style: { animationDelay: "0ms" }
|
|
206
208
|
}),
|
|
207
209
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
208
|
-
className: `${barSizeClasses[size]}
|
|
210
|
+
className: `${barSizeClasses[size]} ${barClassName}`,
|
|
209
211
|
style: { animationDelay: "200ms" }
|
|
210
212
|
}),
|
|
211
213
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
212
|
-
className: `${barSizeClasses[size]}
|
|
214
|
+
className: `${barSizeClasses[size]} ${barClassName}`,
|
|
213
215
|
style: { animationDelay: "400ms" }
|
|
214
216
|
}),
|
|
215
217
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
216
|
-
className: `${barSizeClasses[size]}
|
|
218
|
+
className: `${barSizeClasses[size]} ${barClassName}`,
|
|
217
219
|
style: { animationDelay: "600ms" }
|
|
218
220
|
})
|
|
219
221
|
]
|
|
@@ -248,18 +250,22 @@ var DropDown = ({ toggle, options, selected, onChange, className = "", container
|
|
|
248
250
|
className: dropdownClassName,
|
|
249
251
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
250
252
|
className: optionsContainerClassName,
|
|
251
|
-
children: options.map((option, index) =>
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
253
|
+
children: options.map((option, index) => {
|
|
254
|
+
const isOptionObject = typeof option === "object" && option !== null && "value" in option;
|
|
255
|
+
const optionValue = isOptionObject ? option.value : option;
|
|
256
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
|
|
257
|
+
onClick: () => handleOptionClick(optionValue),
|
|
258
|
+
className: optionClassName,
|
|
259
|
+
children: isOptionObject ? option.label : option
|
|
260
|
+
}, index);
|
|
261
|
+
})
|
|
256
262
|
})
|
|
257
263
|
})]
|
|
258
264
|
});
|
|
259
265
|
};
|
|
260
266
|
//#endregion
|
|
261
267
|
//#region src/components/ProgressBar.tsx
|
|
262
|
-
var ProgressBar = ({ progress, max, min, "aria-label": ariaLabel, className, style, variant = "primary" }) => {
|
|
268
|
+
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
269
|
const currentVariant = {
|
|
264
270
|
primary: {
|
|
265
271
|
bg: "bg-blue-600",
|
|
@@ -293,10 +299,10 @@ var ProgressBar = ({ progress, max, min, "aria-label": ariaLabel, className, sty
|
|
|
293
299
|
}
|
|
294
300
|
}[variant];
|
|
295
301
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
296
|
-
className:
|
|
302
|
+
className: containerClassName,
|
|
297
303
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
298
304
|
role: "progressbar",
|
|
299
|
-
className: `${currentVariant.bg}
|
|
305
|
+
className: `${currentVariant.bg} ${barClassName} ${currentVariant.text}`,
|
|
300
306
|
"aria-valuenow": progress,
|
|
301
307
|
"aria-valuemin": min,
|
|
302
308
|
"aria-valuemax": max,
|
|
@@ -311,7 +317,7 @@ var ProgressBar = ({ progress, max, min, "aria-label": ariaLabel, className, sty
|
|
|
311
317
|
};
|
|
312
318
|
//#endregion
|
|
313
319
|
//#region src/components/Typed.tsx
|
|
314
|
-
var Typed = ({ strings, typeSpeed = 50, backSpeed = 30, backDelay = 500, startDelay = 0, loop = true, showCursor = true, className = "", style = {} }) => {
|
|
320
|
+
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
321
|
const [currentStringIndex, setCurrentStringIndex] = useState(0);
|
|
316
322
|
const [currentText, setCurrentText] = useState("");
|
|
317
323
|
const [isDeleting, setIsDeleting] = useState(false);
|
|
@@ -364,12 +370,12 @@ var Typed = ({ strings, typeSpeed = 50, backSpeed = 30, backDelay = 500, startDe
|
|
|
364
370
|
return () => clearInterval(fadeTimer);
|
|
365
371
|
}, []);
|
|
366
372
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
|
|
367
|
-
className:
|
|
373
|
+
className: `${containerClassName} ${className}`,
|
|
368
374
|
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
|
|
369
|
-
className:
|
|
375
|
+
className: typedClassName,
|
|
370
376
|
children: currentText
|
|
371
377
|
}), showCursor && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
|
|
372
|
-
className:
|
|
378
|
+
className: cursorClassName,
|
|
373
379
|
"aria-hidden": "true",
|
|
374
380
|
style: {
|
|
375
381
|
...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 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 <button\r\n key={index}\r\n onClick={() => handleOptionClick(option)}\r\n className={optionClassName}\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 target?: string;\r\n rel?: 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 target = '_blank',\r\n rel = 'noopener noreferrer'\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 ${variantClassName}\r\n ${sizeClassName}\r\n ${className}\r\n `.trim();\r\n\r\n return (\r\n <a href={href} target={target} rel={rel} 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":"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"}
|
|
@@ -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,14 @@
|
|
|
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
|
+
target?: string;
|
|
11
|
+
rel?: string;
|
|
12
|
+
}
|
|
13
|
+
declare const Anchor: ({ children, variant, size, href, className, containerClassName, variantClassName, sizeClassName, target, rel }: AnchorProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
14
|
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,7 +1,11 @@
|
|
|
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;
|
|
@@ -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.22",
|
|
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",
|