@klu_dev/ui-klu-green 1.0.12 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +85 -23
- package/dist/index.css +478 -728
- package/dist/index.js +149 -180
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,47 +2,67 @@
|
|
|
2
2
|
|
|
3
3
|
Librería de componentes UI desarrollada con React + TypeScript + TailwindCSS.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Instalación
|
|
6
6
|
npm install @klu_dev/ui-klu-green
|
|
7
7
|
|
|
8
|
-
##
|
|
8
|
+
## Requisitos
|
|
9
9
|
- React 18+
|
|
10
10
|
- TailwindCSS
|
|
11
11
|
- PostCSS
|
|
12
12
|
|
|
13
|
-
##
|
|
13
|
+
## Componentes disponibles
|
|
14
14
|
- Input
|
|
15
15
|
- Button
|
|
16
16
|
- BackButton
|
|
17
17
|
|
|
18
|
-
##
|
|
18
|
+
## Antes de comenzar a agregar componentes
|
|
19
|
+
|
|
20
|
+
Importa el archivo de estilos globales en el punto de entrada de tu aplicación (ej. main.tsx o _app.tsx):
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
import "@klu_dev/ui-klu-green/style.css";
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## Uso Input
|
|
27
|
+
|
|
28
|
+
Componente de entrada de texto con soporte para validación, diferentes tamaños y modo password.
|
|
19
29
|
|
|
20
30
|
```tsx
|
|
21
31
|
import { Input } from "@klu_dev/ui-klu-green"
|
|
22
32
|
|
|
23
|
-
export default function
|
|
24
|
-
return
|
|
33
|
+
export default function InputExamples() {
|
|
34
|
+
return (
|
|
35
|
+
<div className="uiklu-flex uiklu-flex-col uiklu-gap-4">
|
|
36
|
+
{/* Escala de anchos */}
|
|
37
|
+
<Input size="sm" placeholder="Pequeño (150px)" />
|
|
38
|
+
<Input size="md" placeholder="Mediano (250px)" />
|
|
39
|
+
<Input size="lg" placeholder="Grande (Máx 350px)" />
|
|
40
|
+
|
|
41
|
+
{/* Input en Layout de Formulario (Full) */}
|
|
42
|
+
<div className="uiklu-w-full uiklu-max-w-[600px]">
|
|
43
|
+
<Input size="full" placeholder="Input que llena el formulario" />
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
)
|
|
25
47
|
}
|
|
26
48
|
```
|
|
27
49
|
|
|
28
50
|
- **Input con validación:**
|
|
29
51
|
|
|
30
52
|
```tsx
|
|
31
|
-
|
|
32
53
|
import { Input } from "@klu_dev/ui-klu-green"
|
|
33
54
|
import { useState } from "react"
|
|
34
55
|
|
|
35
|
-
export default function
|
|
56
|
+
export default function LiveValidation() {
|
|
36
57
|
const [value, setValue] = useState("")
|
|
37
58
|
const [error, setError] = useState("")
|
|
38
59
|
|
|
39
60
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
40
61
|
const val = e.target.value
|
|
41
62
|
setValue(val)
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
setError("Solo se permiten números")
|
|
63
|
+
|
|
64
|
+
if (val.length > 0 && val.length < 3) {
|
|
65
|
+
setError("Mínimo 3 caracteres")
|
|
46
66
|
} else {
|
|
47
67
|
setError("")
|
|
48
68
|
}
|
|
@@ -50,39 +70,81 @@ export default function Example() {
|
|
|
50
70
|
|
|
51
71
|
return (
|
|
52
72
|
<Input
|
|
73
|
+
type="text"
|
|
74
|
+
placeholder="Validando..."
|
|
53
75
|
value={value}
|
|
54
76
|
onChange={handleChange}
|
|
55
77
|
error={error}
|
|
56
|
-
placeholder="Ingresa solo números"
|
|
57
78
|
/>
|
|
58
79
|
)
|
|
59
80
|
}
|
|
60
81
|
```
|
|
61
82
|
|
|
62
|
-
|
|
83
|
+
- **Input numérico estricto:**
|
|
84
|
+
Ejemplo para forzar solo entrada de números mediante el evento onChange:
|
|
85
|
+
|
|
86
|
+
```tsx
|
|
87
|
+
<Input
|
|
88
|
+
placeholder="Solo números"
|
|
89
|
+
inputMode="numeric"
|
|
90
|
+
onChange={(e) => {
|
|
91
|
+
e.target.value = e.target.value.replace(/[^0-9]/g, "");
|
|
92
|
+
}}
|
|
93
|
+
/>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
## Uso Button
|
|
98
|
+
|
|
99
|
+
Botones con múltiples variantes de color y escalas adaptativas.
|
|
63
100
|
|
|
64
101
|
|
|
65
102
|
```tsx
|
|
66
103
|
import { Button } from "@klu_dev/ui-klu-green"
|
|
67
104
|
|
|
68
|
-
export default function
|
|
69
|
-
return
|
|
105
|
+
export default function ButtonExamples() {
|
|
106
|
+
return (
|
|
107
|
+
<div className="uiklu-flex uiklu-flex-col uiklu-gap-6">
|
|
108
|
+
{/* Tamaños con Anchos Fijos */}
|
|
109
|
+
<Button size="sm">Small (150px)</Button>
|
|
110
|
+
<Button size="md">Medium (250px)</Button>
|
|
111
|
+
<Button size="lg">Large (350px)</Button>
|
|
112
|
+
<Button size="xl">Extra Large (450px)</Button>
|
|
113
|
+
|
|
114
|
+
{/* Botón Adaptativo (Full Width) */}
|
|
115
|
+
<div className="uiklu-w-[550px] uiklu-border-2 uiklu-p-4">
|
|
116
|
+
<p>Contenedor de 550px:</p>
|
|
117
|
+
<Button variant="secondary" size="full">
|
|
118
|
+
Ocupa el 100% del contenedor
|
|
119
|
+
</Button>
|
|
120
|
+
</div>
|
|
121
|
+
</div>
|
|
122
|
+
)
|
|
70
123
|
}
|
|
71
124
|
```
|
|
125
|
+
- **Botón Adaptativo (Ancho Completo):**
|
|
72
126
|
|
|
127
|
+
```tsx
|
|
128
|
+
<Button variant="secondary" size="full">
|
|
129
|
+
Botón que ocupa el 100% del ancho
|
|
130
|
+
</Button>
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
## Uso BackButton
|
|
73
134
|
|
|
74
|
-
|
|
135
|
+
Botón de navegación simplificado ideal para encabezados.
|
|
75
136
|
|
|
76
137
|
```tsx
|
|
77
138
|
import { BackButton } from "@klu_dev/ui-klu-green"
|
|
78
139
|
|
|
79
|
-
export default function
|
|
140
|
+
export default function Navigation() {
|
|
80
141
|
return (
|
|
81
|
-
<
|
|
82
|
-
|
|
83
|
-
|
|
142
|
+
<div className="uiklu-bg-primary uiklu-p-4">
|
|
143
|
+
<BackButton
|
|
144
|
+
size="md"
|
|
145
|
+
onClick={() => window.history.back()}
|
|
146
|
+
/>
|
|
147
|
+
</div>
|
|
84
148
|
)
|
|
85
149
|
}
|
|
86
|
-
|
|
87
|
-
|
|
88
150
|
```
|