@klu_dev/ui-klu-green 1.0.1 → 1.0.3
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 +32 -39
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,43 +1,33 @@
|
|
|
1
1
|
# 🟢 UI KLU Green
|
|
2
2
|
|
|
3
|
-
Librería de componentes UI desarrollada con
|
|
4
|
-
|
|
5
|
-
---
|
|
3
|
+
Librería de componentes UI desarrollada con React + TypeScript + TailwindCSS.
|
|
6
4
|
|
|
7
5
|
## 📦 Instalación
|
|
8
|
-
|
|
9
|
-
```bash
|
|
10
6
|
npm install @klu_dev/ui-klu-green
|
|
11
7
|
|
|
12
|
-
⚙️ Requisitos
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
React 18+
|
|
17
|
-
TailwindCSS
|
|
18
|
-
PostCSS
|
|
19
|
-
|
|
20
|
-
Componentes disponibles
|
|
21
|
-
✅ Input
|
|
22
|
-
✅ Button
|
|
23
|
-
✅ BackButton
|
|
8
|
+
## ⚙️ Requisitos
|
|
9
|
+
- React 18+
|
|
10
|
+
- TailwindCSS
|
|
11
|
+
- PostCSS
|
|
24
12
|
|
|
25
|
-
|
|
13
|
+
## 📐 Componentes disponibles
|
|
14
|
+
- Input
|
|
15
|
+
- Button
|
|
16
|
+
- BackButton
|
|
26
17
|
|
|
18
|
+
## 🚀 Uso Input
|
|
27
19
|
|
|
20
|
+
```tsx
|
|
28
21
|
import { Input } from "@klu_dev/ui-klu-green"
|
|
29
22
|
|
|
30
23
|
export default function Example() {
|
|
31
|
-
return
|
|
32
|
-
<Input
|
|
33
|
-
placeholder="Escribe algo..."
|
|
34
|
-
size="lg"
|
|
35
|
-
/>
|
|
36
|
-
)
|
|
24
|
+
return <Input placeholder="Escribe algo..." size="lg" />
|
|
37
25
|
}
|
|
26
|
+
```
|
|
38
27
|
|
|
28
|
+
- **Input con validación:**
|
|
39
29
|
|
|
40
|
-
|
|
30
|
+
```tsx
|
|
41
31
|
|
|
42
32
|
import { Input } from "@klu_dev/ui-klu-green"
|
|
43
33
|
import { useState } from "react"
|
|
@@ -50,8 +40,9 @@ export default function Example() {
|
|
|
50
40
|
const val = e.target.value
|
|
51
41
|
setValue(val)
|
|
52
42
|
|
|
43
|
+
// Solo números
|
|
53
44
|
if (!/^[0-9]*$/.test(val)) {
|
|
54
|
-
setError("Solo números
|
|
45
|
+
setError("Solo se permiten números")
|
|
55
46
|
} else {
|
|
56
47
|
setError("")
|
|
57
48
|
}
|
|
@@ -62,30 +53,32 @@ export default function Example() {
|
|
|
62
53
|
value={value}
|
|
63
54
|
onChange={handleChange}
|
|
64
55
|
error={error}
|
|
65
|
-
placeholder="
|
|
56
|
+
placeholder="Ingresa solo números"
|
|
66
57
|
/>
|
|
67
58
|
)
|
|
68
59
|
}
|
|
60
|
+
```
|
|
69
61
|
|
|
62
|
+
## 🚀 Uso Button
|
|
70
63
|
|
|
71
|
-
BackButton
|
|
72
64
|
|
|
73
|
-
|
|
65
|
+
```tsx
|
|
66
|
+
import { Button } from "@klu_dev/ui-klu-green"
|
|
74
67
|
|
|
75
68
|
export default function Example() {
|
|
76
|
-
return
|
|
77
|
-
<BackButton onClick={() => console.log("Regresar")} />
|
|
78
|
-
)
|
|
69
|
+
return <Button variant="primary">Continuar</Button>
|
|
79
70
|
}
|
|
80
71
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
import { Button } from "@klu_dev/ui-klu-green"
|
|
72
|
+
## 🚀 Uso BackButton
|
|
73
|
+
import { BackButton } from "@klu_dev/ui-klu-green"
|
|
84
74
|
|
|
85
75
|
export default function Example() {
|
|
86
76
|
return (
|
|
87
|
-
<
|
|
88
|
-
|
|
89
|
-
|
|
77
|
+
<BackButton
|
|
78
|
+
onClick={() => console.log("Regresar")}
|
|
79
|
+
/>
|
|
90
80
|
)
|
|
91
|
-
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
```
|