@klu_dev/ui-klu-green 1.1.5 → 1.1.7
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 +37 -0
- package/dist/index.css +450 -343
- package/dist/index.d.ts +2 -1
- package/dist/index.js +111 -84
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -17,6 +17,7 @@ npm install @klu_dev/ui-klu-green
|
|
|
17
17
|
- Select
|
|
18
18
|
- Typography
|
|
19
19
|
- Modal
|
|
20
|
+
- BalanceInfo
|
|
20
21
|
|
|
21
22
|
## Antes de comenzar a agregar componentes
|
|
22
23
|
|
|
@@ -414,3 +415,39 @@ export default function SuccessMessage() {
|
|
|
414
415
|
| `footerButtons` | `array` | Configuración de botones (label, onClick, variant). |
|
|
415
416
|
| `sm:max-w` | `500px` | Ancho máximo en pantallas pequeñas: `uiklu-sm:max-w-[500px]` |
|
|
416
417
|
|
|
418
|
+
|
|
419
|
+
## Uso de BalanceInfo
|
|
420
|
+
Componente de tarjeta integral para mostrar estados de cuenta, saldos, límites mensuales y resumen de transacciones. Incluye funciones de copiado al portapapeles y visibilidad de saldo.
|
|
421
|
+
|
|
422
|
+
```tsx
|
|
423
|
+
import { BalanceInfo } from "@klu_dev/ui-klu-green"
|
|
424
|
+
|
|
425
|
+
export default function AccountOverview() {
|
|
426
|
+
return (
|
|
427
|
+
<BalanceInfo
|
|
428
|
+
totalBalance={125450.50}
|
|
429
|
+
clabe="012 180 001 234 567 890"
|
|
430
|
+
accountNumber="1234 5678"
|
|
431
|
+
monthlyLimit={250000}
|
|
432
|
+
accumulated={85000}
|
|
433
|
+
deposits={{ amount: 15400.00, count: 8 }}
|
|
434
|
+
withdrawals={{ amount: 5200.00, count: 3 }}
|
|
435
|
+
tooltipInfo="Este es tu saldo disponible tras retenciones"
|
|
436
|
+
/>
|
|
437
|
+
)
|
|
438
|
+
}
|
|
439
|
+
```
|
|
440
|
+
|
|
441
|
+
- **Props de BalanceInfo:**
|
|
442
|
+
|
|
443
|
+
|
|
444
|
+
| Prop | Tipo | Descripción |
|
|
445
|
+
| :--- | :--- | :--- |
|
|
446
|
+
| `totalBalance` | `number` | Monto total de la cuenta a mostrar. |
|
|
447
|
+
| `clabe` | `string` | Clave interbancaria de 18 dígitos. |
|
|
448
|
+
| `accountNumber` | `string` | Número de cuenta (normalmente los últimos 8 o 11 dígitos). |
|
|
449
|
+
| `monthlyLimit` | `number` | Tope máximo de depósitos permitido para el mes. |
|
|
450
|
+
| `accumulated` | `number` | Monto total de ingresos recibidos en el periodo actual. |
|
|
451
|
+
| `deposits` | `{ amount: number; count: number }` | Objeto con el monto total y cantidad de depósitos realizados. |
|
|
452
|
+
| `withdrawals` | `{ amount: number; count: number }` | Objeto con el monto total y cantidad de retiros realizados. |
|
|
453
|
+
| `tooltipInfo` | `string` | Texto descriptivo que aparece en el tooltip al costado del saldo. |
|