@klu_dev/ui-klu-green 1.2.10 → 1.2.11

package/README.md

@@ -27,6 +27,7 @@ npm install @klu_dev/ui-klu-green
 - InputCode
 - GridCard
 - CheckBox
+- InputPhone
 
 ## Antes de comenzar a agregar componentes
 
@@ -897,3 +898,68 @@ export default function CheckboxExample() {
 | `checked` | `boolean` | - | Estado binario síncrono en modo controlado. |
 | `onChange` | `(checked: boolean) => void` | - | Callback gatillado automáticamente al alterar la interacción del recuadro. |
 
+
+
+## Uso de InputPhone
+El componente InputPhone es un campo de entrada de texto optimizado para la captura de números telefónicos. Permite la selección dinámica de prefijos internacionales (LADAS/códigos de país) mediante un menú desplegable integrado y ofrece soporte nativo para la validación y visualización de estados de error, variantes de tamaño y un comportamiento adaptables (full width).
+
+```tsx
+import React, { useState } from 'react';
+import { InputPhone } from './components/InputPhone';
+
+const RegistrationForm = () => {
+  const [phoneNumber, setPhoneNumber] = useState('');
+  const [error, setError] = useState('');
+
+  const paisesLadas = [
+    { label: 'MX', code: '+52' },
+    { label: 'US', code: '+1' },
+    { label: 'ES', code: '+34' },
+    { label: 'AR', code: '+54' },
+    { label: 'CO', code: '+57' },
+    { label: 'CL', code: '+56' },
+    { label: 'PE', code: '+51' },
+  ];
+
+  const handlePhoneChange = (value: string) => {
+    setPhoneNumber(value);
+    // Validación simple de longitud sin espacios
+    const pureNumbers = value.replace(/\s/g, '');
+    if (pureNumbers.length > 0 && pureNumbers.length < 10) {
+      setError('El número telefónico debe tener al menos 10 dígitos.');
+    } else {
+      setError('');
+    }
+  };
+
+  return (
+    <div style={{ maxWidth: '400px', padding: '20px' }}>
+      <label htmlFor="phone">Número de Teléfono</label>
+      <InputPhone 
+        id="phone"
+        size="full" 
+        placeholder="55 0000 0000" 
+        value={phoneNumber}
+        onChange={handlePhoneChange}
+        error={error}
+        ladas={paisesLadas}
+        defaultLadaIndex={0} // Selecciona MX por defecto
+      />
+    </div>
+  );
+};
+
+export default RegistrationForm;
+```
+
+### Props de InputPhone
+
+| Prop | Tipo | Por Defecto | Descripción |
+| :--- | :--- | :--- | :--- |
+| `size` | `'sm' \| 'md' \| 'lg' \| 'full'` | `'lg'` | Define las dimensiones del componente. `full` expande el input al 100% del ancho del contenedor. |
+| `placeholder` | `string` | *Opcional* | Texto de ayuda que se muestra cuando el input está vacío. |
+| `value` | `string` | *Opcional* | El valor actual del campo de texto (para componentes controlados). |
+| `onChange` | `(value: string) => void` | *Opcional* | Función callback que se ejecuta cada vez que el usuario escribe o modifica el valor. |
+| `error` | `string` | *Opcional* | Mensaje de error. Si se proporciona, el componente cambia visualmente a un estado de error y despliega el texto. |
+| `ladas` | `Array<{ label: string; code: string }>` | *Opcional* | Listado de códigos telefónicos de país para el menú desplegable. |
+| `defaultLadaIndex` | `number` | *Opcional* | Índice del arreglo de `ladas` que se seleccionará de manera inicial por defecto. |

package/dist/index.css

@@ -287,6 +287,11 @@ button,
 .uiklu-m-0{
     margin: 0px;
 
+}
+.uiklu-mx-2{
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+
 }
 .uiklu-mx-auto{
     margin-left: auto;
@@ -522,8 +527,8 @@ button,
     max-height: 24rem;
 
 }
-.uiklu-max-h-\[200px\]{
-    max-height: 200px;
+.uiklu-max-h-\[150px\]{
+    max-height: 150px;
 
 }
 .uiklu-max-h-\[40px\]{
@@ -581,10 +586,6 @@ button,
 .uiklu-w-8{
     width: 2rem;
 
-}
-.uiklu-w-\[120px\]{
-    width: 120px;
-
 }
 .uiklu-w-\[141px\]{
     width: 141px;
@@ -938,6 +939,10 @@ button,
 .uiklu-gap-\[20px\]{
     gap: 20px;
 
+}
+.uiklu-gap-\[2px\]{
+    gap: 2px;
+
 }
 .uiklu-gap-x-1\.5{
     -moz-column-gap: 0.375rem;
@@ -1646,6 +1651,10 @@ button,
 .uiklu-pt-4{
     padding-top: 1rem;
 
+}
+.uiklu-pt-\[10px\]{
+    padding-top: 10px;
+
 }
 .uiklu-pt-\[20px\]{
     padding-top: 20px;
@@ -2268,11 +2277,6 @@ input.uiklu-flex:not(:placeholder-shown) {
 
 }
 
-.hover\:uiklu-bg-primary900\/10:hover{
-    background-color: hsl(var(--uiklu-primary-900) / 0.1);
-
-}
-
 .hover\:uiklu-bg-primary900\/5:hover{
     background-color: hsl(var(--uiklu-primary-900) / 0.05);
 
@@ -2441,18 +2445,6 @@ input.uiklu-flex:not(:placeholder-shown) {
 
 }
 
-.data-\[highlighted\]\:uiklu-bg-primary900[data-highlighted]{
-    --tw-bg-opacity: 1;
-    background-color: hsl(var(--uiklu-primary-900) / var(--tw-bg-opacity, 1));
-
-}
-
-.data-\[highlighted\]\:uiklu-text-white[data-highlighted]{
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
-
-}
-
 .data-\[placeholder\]\:uiklu-text-gray500[data-placeholder]{
     --tw-text-opacity: 1;
     color: hsl(var(--uiklu-gray-500) / var(--tw-text-opacity, 1));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klu_dev/ui-klu-green",
-  "version": "1.2.10",
+  "version": "1.2.11",
   "description": "Librería de componentes UI",
   "type": "module",
   "main": "./dist/index.js",