@klu_dev/ui-klu-green 1.2.10 → 1.2.12

package/README.md

@@ -27,6 +27,8 @@ npm install @klu_dev/ui-klu-green
 - InputCode
 - GridCard
 - CheckBox
+- InputPhone
+- IconBadge
 
 ## Antes de comenzar a agregar componentes
 
@@ -897,3 +899,103 @@ 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. |
+
+
+## Uso de IconBadge
+El componente IconBadge es un contenedor circular optimizado para destacar iconografía de la interfaz o elementos de marca. Permite envolver dinámicamente cualquier elemento SVG/icono pasándole un elemento JSX instanciado, centralizando el control de colores corporativos (`uiklu-bg-primary300` y `uiklu-text-basewhite`) junto con un centrado de precisión matemática mediante Flexbox en variantes fijas de tamaño.
+
+```tsx
+import React from 'react';
+import { IconBadge } from './components/IconBadge';
+import { Icons } from '../../assets/icons';
+
+const BadgeContainer = () => {
+  return (
+    <div className="uiklu-flex uiklu-gap-4 uiklu-p-4">
+      <IconBadge 
+        size="md" 
+        icon={Icons.SEAL} 
+      />
+      
+      <IconBadge 
+        size="lg" 
+        icon={Icons.BOOKMARK} 
+      />
+    </div>
+  );
+};
+
+export default BadgeContainer;
+```
+
+### Props de IconBadge
+
+| Prop | Tipo | Por Defecto | Descripción |
+| :--- | :--- | :--- | :--- |
+| `icon` | `React.ReactElement<{ className?: string }>` | *Requerido* | El elemento del icono a renderizar en formato JSX (ej: `<Icons.SEAL />`). Recibe de forma transparente las utilidades de tamaño asignadas por el contenedor. |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Define las dimensiones fijas en píxeles tanto del contenedor circular como del icono interior (`sm`: 24px/14px, `md`: 30px/20px, `lg`: 36px/26px). |

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;
@@ -457,6 +462,10 @@ button,
 .uiklu-h-\[100px\]{
     height: 100px;
 
+}
+.uiklu-h-\[14px\]{
+    height: 14px;
+
 }
 .uiklu-h-\[1px\]{
     height: 1px;
@@ -469,10 +478,22 @@ button,
 .uiklu-h-\[24px\]{
     height: 24px;
 
+}
+.uiklu-h-\[26px\]{
+    height: 26px;
+
+}
+.uiklu-h-\[30px\]{
+    height: 30px;
+
 }
 .uiklu-h-\[34px\]{
     height: 34px;
 
+}
+.uiklu-h-\[36px\]{
+    height: 36px;
+
 }
 .uiklu-h-\[40px\]{
     height: 40px;
@@ -522,8 +543,8 @@ button,
     max-height: 24rem;
 
 }
-.uiklu-max-h-\[200px\]{
-    max-height: 200px;
+.uiklu-max-h-\[150px\]{
+    max-height: 150px;
 
 }
 .uiklu-max-h-\[40px\]{
@@ -581,14 +602,14 @@ button,
 .uiklu-w-8{
     width: 2rem;
 
-}
-.uiklu-w-\[120px\]{
-    width: 120px;
-
 }
 .uiklu-w-\[141px\]{
     width: 141px;
 
+}
+.uiklu-w-\[14px\]{
+    width: 14px;
+
 }
 .uiklu-w-\[150px\]{
     width: 150px;
@@ -609,10 +630,22 @@ button,
 .uiklu-w-\[20px\]{
     width: 20px;
 
+}
+.uiklu-w-\[24px\]{
+    width: 24px;
+
 }
 .uiklu-w-\[250px\]{
     width: 250px;
 
+}
+.uiklu-w-\[26px\]{
+    width: 26px;
+
+}
+.uiklu-w-\[30px\]{
+    width: 30px;
+
 }
 .uiklu-w-\[317px\]{
     width: 317px;
@@ -621,6 +654,10 @@ button,
 .uiklu-w-\[350px\]{
     width: 350px;
 
+}
+.uiklu-w-\[36px\]{
+    width: 36px;
+
 }
 .uiklu-w-\[383px\]{
     width: 383px;
@@ -938,6 +975,10 @@ button,
 .uiklu-gap-\[20px\]{
     gap: 20px;
 
+}
+.uiklu-gap-\[2px\]{
+    gap: 2px;
+
 }
 .uiklu-gap-x-1\.5{
     -moz-column-gap: 0.375rem;
@@ -1646,6 +1687,10 @@ button,
 .uiklu-pt-4{
     padding-top: 1rem;
 
+}
+.uiklu-pt-\[10px\]{
+    padding-top: 10px;
+
 }
 .uiklu-pt-\[20px\]{
     padding-top: 20px;
@@ -2268,11 +2313,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 +2481,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/dist/index.d.ts

@@ -6,9 +6,9 @@ import * as SelectPrimitive from '@radix-ui/react-select';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as ToastPrimitives from '@radix-ui/react-toast';
 
-type InputSize = "sm" | "md" | "lg" | "full";
+type InputSize$1 = "sm" | "md" | "lg" | "full";
 interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
-    size?: InputSize;
+    size?: InputSize$1;
     error?: string;
     isSearchable?: boolean;
     onSearchClick?: () => void;
@@ -173,6 +173,10 @@ declare const Icons: {
     GAMES: react_jsx_runtime.JSX.Element;
     CHECKED: react_jsx_runtime.JSX.Element;
     FILTER: react_jsx_runtime.JSX.Element;
+    SEAL: react_jsx_runtime.JSX.Element;
+    BOOKMARK: react_jsx_runtime.JSX.Element;
+    EDIT: react_jsx_runtime.JSX.Element;
+    DELETE: react_jsx_runtime.JSX.Element;
 };
 
 declare const searchSelectTriggerVariants: (props?: ({
@@ -219,4 +223,31 @@ interface CheckboxProps {
 }
 declare const Checkbox: React__default.FC<CheckboxProps>;
 
-export { BackButton, BalanceInfo, Button, Checkbox, type CheckboxProps, GridCard, Icons, Input, InputCode, LoadingScreen, MobileMenuDrawer, Modal, PromoBanner, SearchSelect, Select, SidebarTabs, ToastAction, Toaster, Typography, useToast };
+interface LadaOption {
+    code: string;
+    label: string;
+}
+type InputSize = "sm" | "md" | "lg" | "full";
+interface InputPhoneProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "onChange"> {
+    size?: InputSize;
+    error?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    ladas?: LadaOption[];
+    defaultLadaIndex?: number;
+}
+declare const InputPhone: React.ForwardRefExoticComponent<InputPhoneProps & React.RefAttributes<HTMLInputElement>>;
+
+type IconBadgeSize = 'sm' | 'md' | 'lg';
+interface IconBadgeProps {
+    icon: React.ReactElement<{
+        className?: string;
+    }>;
+    /**
+     * @default 'sm'
+     */
+    size?: IconBadgeSize;
+}
+declare const IconBadge: React.FC<IconBadgeProps>;
+
+export { BackButton, BalanceInfo, Button, Checkbox, type CheckboxProps, GridCard, IconBadge, type IconBadgeProps, Icons, Input, InputCode, InputPhone, type InputPhoneProps, type LadaOption, LoadingScreen, MobileMenuDrawer, Modal, PromoBanner, SearchSelect, Select, SidebarTabs, ToastAction, Toaster, Typography, useToast };