🟢 UI KLU Green

Librería de componentes UI desarrollada con React + TypeScript + TailwindCSS.

Instalación

npm install @klu_dev/ui-klu-green

Requisitos

• React 18+
• TailwindCSS
• PostCSS

Componentes disponibles

• Input
• Button
• BackButton
• Select
• Typography
• Modal
• BalanceInfo
• Toast
• LoaderScreen
• PromoBanner
• SidebarTabs
• MobileMenuDrawer
• SearchSelect
• InputCode
• GridCard
• CheckBox
• InputPhone

Antes de comenzar a agregar componentes

Importa el archivo de estilos globales en el punto de entrada de tu aplicación (ej. main.tsx o _app.tsx):

import "@klu_dev/ui-klu-green/style.css";

Uso Input

Componente de entrada de texto con soporte para validación, diferentes tamaños y modo password.

import { Input } from "@klu_dev/ui-klu-green"

export default function InputExamples() {
  return (
    <div className="uiklu-flex uiklu-flex-col uiklu-gap-4">
      {/* Escala de anchos */}
      <Input size="sm" placeholder="Pequeño (150px)" />
      <Input size="md" placeholder="Mediano (250px)" />
      <Input size="lg" placeholder="Grande (Máx 350px)" />
      
      {/* Input en Layout de Formulario (Full) */}
      <div className="uiklu-w-full uiklu-max-w-[600px]">
        <Input size="full" placeholder="Input que llena el formulario" />
      </div>
    </div>
  )
}

• Input con validación:

import { Input } from "@klu_dev/ui-klu-green"
import { useState } from "react"

export default function LiveValidation() {
  const [value, setValue] = useState("")
  const [error, setError] = useState("")

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const val = e.target.value
    setValue(val)
    
    if (val.length > 0 && val.length < 3) {
      setError("Mínimo 3 caracteres")
    } else {
      setError("")
    }
  }

  return (
    <Input
      type="text"
      placeholder="Validando..."
      value={value}
      onChange={handleChange}
      error={error}
    />
  )
}

• Input numérico estricto: Ejemplo para forzar solo entrada de números mediante el evento onChange:

<Input
  placeholder="Solo números"
  inputMode="numeric"
  onChange={(e) => {
    e.target.value = e.target.value.replace(/[^0-9]/g, "");
  }}
/>

Uso Button

Botones con múltiples variantes de color y escalas adaptativas.

import { Button } from "@klu_dev/ui-klu-green"

export default function ButtonExamples() {
  return (
    <div className="uiklu-flex uiklu-flex-col uiklu-gap-6">
      {/* Tamaños con Anchos Fijos */}
      <Button size="sm">Small (150px)</Button>
      <Button size="md">Medium (250px)</Button>
      <Button size="lg">Large (350px)</Button>
      <Button size="xl">Extra Large (450px)</Button>

      {/* Botón Adaptativo (Full Width) */}
      <div className="uiklu-w-[550px] uiklu-border-2 uiklu-p-4">
        <p>Contenedor de 550px:</p>
        <Button variant="secondary" size="full">
          Ocupa el 100% del contenedor
        </Button>
      </div>
    </div>
  )
}

• Botón Adaptativo (Ancho Completo):

  <Button variant="secondary" size="full">
    Botón que ocupa el 100% del ancho
  </Button>

• Botón con ícono:

import { Button, Icons } from "@klu_dev/ui-klu-green"

export default function ButtonExamples() {
  return (
    <div className="uiklu-flex uiklu-flex-col uiklu-gap-6">
      {/* Botón con ícono usando el objeto Icons */}
      <Button variant="primary" icon={Icons.CARD}>
        Pagar con Tarjeta
      </Button>

      {/* Botón con ícono a la derecha */}
      <Button variant="outlinePrimary" icon={Icons.CHEVRON_RIGHT} iconAlign="right">
        Continuar
      </Button>
    </div>
  )
}

Props de Button

| Prop | Tipo | Descripción | | :--- | :--- | :--- | | variant | 'primary' \| 'secondary' \| 'outline' \| 'outlinePrimary' \| 'outlineSecondary' \| 'outlineWhite' | Estilo visual del botón. | | size | 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full' | Escala de anchos predefinidos. | | icon | ReactNode | Componente de icono (ej. <CardIcon />). | | iconAlign | 'left' \| 'right' | Posición del icono respecto al texto. |

Uso BackButton

Botón de navegación simplificado ideal para encabezados.

import { BackButton } from "@klu_dev/ui-klu-green"

export default function Navigation() {
  return (
    <div className="uiklu-bg-primary uiklu-p-4">
      <BackButton 
        size="md" 
        onClick={() => window.history.back()} 
      />
    </div>
  )
}

Uso Typography

Componente versátil para el manejo de textos, títulos y etiquetas con soporte para puntos decorativos (showDot).

import { Typography } from "@klu_dev/ui-klu-green"

export default function TypographyExamples() {
  return (
    <div className="uiklu-flex uiklu-flex-col uiklu-gap-6 uiklu-p-8 uiklu-bg-black">
      {/* Título principal con punto decorativo */}
      <Typography size="xxxl" color="white" align="center" showDot>
        BIENVENIDO A KLU
      </Typography>

      {/* Subtítulo alineado a la izquierda */}
      <Typography size="xxl" color="primary" align="left">
        Tu banca digital
      </Typography>

      {/* Cuerpo de texto con color base */}
      <Typography size="md" color="white" align="left">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Sed do eiusmod tempor incididunt ut labore.
      </Typography>

      {/* Nota pequeña alineada a la derecha */}
      <Typography size="xs" color="white" align="right">
        Versión 2.0.0
      </Typography>
    </div>
  )
}

• Props de Typography:

| Prop | Tipo | Descripción | | :--- | :--- | :--- | | size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'xxxl' | Escala de tamaño de fuente. | | color | 'primary' \| 'white' \| 'black' | Paleta de colores predefinida. | | align | 'left' \| 'center' \| 'right' | Alineación horizontal del texto. | | showDot | boolean | Si es true, agrega un punto decorativo al final. |

Uso Select

Componente de selección desplegable basado en Radix UI, con soporte para tamaños fijos, estado de error y scroll automático.

• Ejemplo básico:

import { 
  Select, 
  SelectTrigger, 
  SelectValue, 
  SelectContent, 
  SelectItem 
} from "@klu_dev/ui-klu-green"

export default function BasicSelect() {
  return (
    <Select>
      <SelectTrigger size="md">
        <SelectValue placeholder="Selecciona un país" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="mx">México</SelectItem>
        <SelectItem value="us">Estados Unidos</SelectItem>
        <SelectItem value="es">España</SelectItem>
      </SelectContent>
    </Select>
  )
}

• Validación y mensajes de error:

import { 
  Select, 
  SelectTrigger, 
  SelectValue, 
  SelectContent, 
  SelectItem,
  SelectErrorMessage 
} from "@klu_dev/ui-klu-green"
import { useState } from "react"

export default function FormSelect() {
  const [value, setValue] = useState("")
  const [error, setError] = useState("")

  const handleValidation = () => {
    if (!value) setError("Debes seleccionar una opción para continuar")
  }

  return (
    <div className="uiklu-flex uiklu-flex-col uiklu-gap-2">
      <Select value={value} onValueChange={(val) => { setValue(val); setError(""); }}>
        <SelectTrigger error={!!error} size="lg">
          <SelectValue placeholder="Selecciona una opción" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="1">Plan Básico</SelectItem>
          <SelectItem value="2">Plan Premium</SelectItem>
        </SelectContent>
      </Select>
      
      {/* Mensaje de error dedicado */}
      <SelectErrorMessage message={error} />
      
      <button onClick={handleValidation} className="uiklu-mt-4">
        Validar
      </button>
    </div>
  )
}

• Props de Select:

| Size | Ancho (Width) | Clase CSS (uiklu) | | :--- | :--- | :--- | | sm | 150px | uiklu-w-[150px] | | md | 250px | uiklu-w-[250px] | | lg | 350px | uiklu-w-[350px] | | full | 100% | uiklu-w-full |

Uso Modal

Componente de diálogo flexible basado en Radix UI. Permite encabezados con íconos, contenido personalizado y un pie con botones configurables que usan las variantes de la librería.

• Modal Autorización:

import { Modal, Button, Input, Icons } from "@klu_dev/ui-klu-green"
import { useState } from "react"

export default function AuthExample() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Abrir Autorización</Button>

      <Modal
        open={isOpen}
        onOpenChange={setIsOpen}
        title="Autorización"
        icon={Icons.SHIELD_CHECK}
        footerButtons={[
          { 
            label: "Cancelar", 
            variant: "outlinePrimary", 
            onClick: () => setIsOpen(false) 
          },
          { 
            label: "Verificar código", 
            variant: "primary", 
            onClick: () => console.log("Validando...") 
          }
        ]}
      >
        <div className="uiklu-space-y-6">
          <p className="uiklu-text-balance-slate-600 uiklu-text-[14px]">
            Este movimiento esta protegido con la aplicación de autenticación.
          </p>
          <div className="uiklu-space-y-2">
            <label className="uiklu-text-balance-slate-600 uiklu-text-[14px] uiklu-font-medium">
              Código de autenticación
            </label>
            <Input type="password" placeholder="**********" size="full" />
          </div>
        </div>
      </Modal>
    </>
  )
}

• Modal Mensaje informativo: Ideal para confirmaciones de éxito o avisos rápidos donde solo se requiere un botón de acción.

import { Modal, Icons } from "@klu_dev/ui-klu-green"
import { useState } from "react"

export default function SuccessMessage() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Actualizar Contraseña</button>

      <Modal
        open={isOpen}
        onOpenChange={setIsOpen}
        title="Cambio Exitoso"
        icon={Icons.SHIELD_CHECK}
        footerButtons={[
          { 
            label: "Entendido", 
            variant: "primary", 
            onClick: () => setIsOpen(false) 
          }
        ]}
      >
        <p className="uiklu-text-balance-slate-600 uiklu-text-[14px] uiklu-leading-relaxed">
          Tu contraseña se ha actualizado correctamente. Te recomendamos no compartirla con nadie por seguridad.
        </p>
      </Modal>
    </>
  )
}

• Props de Modal:

| Prop | Tipo | Descripción | | :--- | :--- | :--- | | open | boolean | Controla si el modal está visible. | | onOpenChange | function | Función para actualizar el estado de apertura. | | title | string | Título que aparece en el encabezado. | | icon | ReactNode | Icono decorativo al lado del título. | | children | ReactNode | Contenido principal (cuerpo) del modal. | | footerButtons | array | Configuración de botones (label, onClick, variant). | | sm:max-w | 500px | Ancho máximo en pantallas pequeñas: uiklu-sm:max-w-[500px] |

Uso de BalanceInfo

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.

import { BalanceInfo } from "@klu_dev/ui-klu-green"

export default function AccountOverview() {
  return (
    <BalanceInfo 
      totalBalance={125450.50}
      clabe="012 180 001 234 567 890"
      accountNumber="1234 5678"
      monthlyLimit={250000}
      accumulated={85000}
      deposits={{ amount: 15400.00, count: 8 }}
      withdrawals={{ amount: 5200.00, count: 3 }}
      tooltipInfo="Este es tu saldo disponible tras retenciones"
    />
  )
}

• Props de BalanceInfo:

| Prop | Tipo | Descripción | | :--- | :--- | :--- | | totalBalance | number | Monto total de la cuenta a mostrar. | | clabe | string | Clave interbancaria de 18 dígitos. | | accountNumber | string | Número de cuenta (normalmente los últimos 8 o 11 dígitos). | | monthlyLimit | number | Tope máximo de depósitos permitido para el mes. | | accumulated | number | Monto total de ingresos recibidos en el periodo actual. | | deposits | { amount: number; count: number } | Objeto con el monto total y cantidad de depósitos realizados. | | withdrawals | { amount: number; count: number } | Objeto con el monto total y cantidad de retiros realizados. | | tooltipInfo | string | Texto descriptivo que aparece en el tooltip al costado del saldo. |

Uso de Toast

El sistema de notificaciones utiliza un hook para disparar avisos y un componente contenedor que debe estar presente en la raíz de la aplicación.

• 1. Configuración Global

Para que los Toasts puedan renderizarse, debes agregar el componente en el punto más alto de tu aplicación (ej. App.tsx o main.tsx).

import { Toaster } from "@klu_dev/ui-klu-green"

function App() {
  return (
    <>
      <YourRoutes />
      {/* Contenedor donde se dibujarán las notificaciones */}
      <Toaster />
    </>
  )
}

• 2. Disparar notificaciones

Utiliza el hook useToast para mostrar mensajes de éxito o error.

import { useToast, Button, ToastAction } from "@klu_dev/ui-klu-green"

export default function ToastExample() {
  const { toast } = useToast()

  return (
    <div className="uiklu-flex uiklu-gap-4">
      <Button 
        onClick={() => toast({
          variant: "success",
          title: "Servicio eliminado",
          description: "¡El servicio se eliminó con éxito!",
          action: <ToastAction altText="Aceptar">Aceptar</ToastAction>,
        })}
      >
        Ver Éxito
      </Button>

      <Button 
        onClick={() => toast({
          variant: "destructive",
          title: "Error",
          description: "No se pudo eliminar el servicio.",
          action: <ToastAction altText="Reintentar">Reintentar</ToastAction>,
        })}
      >
        Ver Error
      </Button>
    </div>
  )
}

• Props del hook toast()

| Prop | Tipo | Descripción | | :--- | :--- | :--- | | variant | 'default' \| 'success' \| 'destructive' | Determina el estilo visual, colores e iconos automáticos del toast. | | title | ReactNode | Título principal que aparece en negrita. | | description | ReactNode | Texto de apoyo con el detalle del mensaje. | | action | ToastActionElement | Componente <ToastAction /> para interacciones del usuario. | | duration | number | (Opcional) Tiempo en ms antes de que el toast desaparezca. |

Uso de LoadingScreen

Componente de pantalla de carga de pantalla completa (Full Screen Overlay) con soporte para mensajes personalizados, progreso controlado y fondos responsivos adaptados.

import { LoadingScreen } from "@klu_dev/ui-klu-green"
import { useState } from "react"

export default function LoadingExample() {
  const [loading, setLoading] = useState(true)
  const [progress, setProgress] = useState(35)

  return (
    <LoadingScreen 
      isOpen={loading} 
      value={progress} 
      message="Configurando tu nueva cuenta..." 
    />
  )
}

• Props de LoadingScreen:

| Prop | Tipo | Valor por defecto | Descripción | | :--- | :--- | :--- | :--- | | isOpen | boolean | false | Controla si el loader es visible. Al ser true, se posiciona sobre toda la interfaz. | | value | number | 0 | Determina el progreso de la barra (de 0 a 100). | | message | string | "Configurando tu nueva cuenta..." | El texto informativo que aparece debajo de la barra de progreso. |

Uso de PromoBanner

Componente de banner promocional diseñado para destacar acciones importantes o beneficios de la cuenta. Incluye soporte para fondos de imagen, títulos con iconos corporativos y botones de acción personalizados.

import { PromoBanner, Icons } from "@klu_dev/ui-klu-green"

export default function UpgradeSection() {
  const handleUpgrade = () => {
    console.log("Iniciando proceso de upgrade...")
  }

  return (
    <div className="uiklu-max-w-[800px] uiklu-mx-auto">
      <PromoBanner
        title="SUBE DE NIVEL"
        icon={Icons.KLU} // Opcional: Icono central decorativo
        buttonText="Mejorar cuenta"
        onActionClick={handleUpgrade}
      >
        <p className="uiklu-text-sm uiklu-opacity-90">
          Aumenta tus límites mensuales y disfruta de beneficios exclusivos 
          con nuestras cuentas premium.
        </p>
        <span className="uiklu-text-xs uiklu-font-bold uiklu-uppercase">
          ¡Proceso 100% digital!
        </span>
      </PromoBanner>
    </div>
  )
}

• Props de PromoBanner:

| Prop | Tipo | Por defecto | Descripción | | :--- | :--- | :--- | :--- | | title | ReactNode | - | Título principal (se renderiza junto al logo KLU). | | icon | ReactNode | - | Icono decorativo opcional que aparece arriba del contenido. | | children | ReactNode | - | Contenido central del banner (textos, etiquetas, etc). | | buttonText | string | "Subir de nivel" | Texto que mostrará el botón de acción. | | onActionClick | function | - | Función que se ejecuta al hacer clic en el botón. | | className | string | - | Clases adicionales de Tailwind para personalizar el contenedor. |

Uso de SidebarTabs

Componente de navegación lateral adaptativo. Permite estructurar un menú de pestañas con iconos corporativos y renderizar dinámicamente vistas asignadas a cada elemento con contenido asignado.

import { SidebarTabs, Icons } from "@klu_dev/ui-klu-green"

export default function NavigationDashboard() {
  // Sub-componentes para las vistas de contenido
  const Inicio = () => <div className="uiklu-px-8"><h2>Vista de Inicio</h2></div>
  const Tarjeta = () => <div className="uiklu-px-8"><h2>Vista de Mi Tarjeta</h2></div>
  const Movimientos = () => <div className="uiklu-px-8"><h2>Vista de Movimientos</h2></div>

  // Listado de opciones de navegación
  const opcionesMenu = [
    { id: 'inicio', label: 'Inicio', icon: Icons.HOME, content: <Inicio /> },
    { id: 'tarjeta', label: 'Mi Tarjeta', icon: Icons.MYCARD, content: <Tarjeta /> },
    { id: 'movimientos', label: 'Movimientos', icon: Icons.MOVEMENTS, content: <Movimientos /> },
    { id: 'pagos', label: 'Pago de Servicios', icon: Icons.SERVICES },
    { id: 'apartado', label: 'Cajas de Apartado', icon: Icons.BOXES },
    { id: 'cuenta', label: 'Mi Cuenta', icon: Icons.MY_ACCOUNT },
    { id: 'config', label: 'Configuraciones', icon: Icons.SETTINGS },
  ]

  return (
    <div className="uiklu-w-full uiklu-h-screen">
      <SidebarTabs items={opcionesMenu} />
    </div>
  )
}

Props de SidebarTabs

| Prop | Tipo | Descripción | | :--- | :--- | :--- | | items | SidebarTabItem[] | Colección de objetos que define los enlaces y el contenido del menú lateral. |

Estructura de SidebarTabItem

| Atributo | Tipo | Descripción | | :--- | :--- | :--- | | id | string | Identificador único de la pestaña. | | label | string | Texto descriptivo de la opción que verá el usuario. | | icon | ReactNode | Elemento gráfico/ícono extraído del objeto Icons. | | content | ReactNode | (Opcional) Componente o vista que se renderizará automáticamente al activar la pestaña. |

Uso de MobileMenuDrawer

Componente presentacional ("tonto") diseñado para desplegar la barra de navegación en vistas responsivas móviles. Al cambiar de pestaña, delega el control de la acción a la aplicación contenedora para poder mutar layouts completos de forma dinámica mediante un Mapeo de Componentes.

import { useState } from 'react'
import { MobileMenuDrawer, Button, Icons } from '@klu_dev/ui-klu-green'
import { MoreHorizontal } from 'lucide-react'

// 1. Importa tus componentes/vistas completos del proyecto
import { MiVistaInicio } from './views/MiVistaInicio'
import { MiVistaTarjeta } from './views/MiVistaTarjeta'
import { MiVistaMovimientos } from './views/MiVistaMovimientos'

export function AppMobileLayout() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const [activeTab, setActiveTab] = useState('inicio')

  // Opciones compartidas con el menú
  const opcionesMenu = [
    { id: 'inicio', label: 'Inicio', icon: Icons.HOME },
    { id: 'tarjeta', label: 'Mi Tarjeta', icon: Icons.MYCARD },
    { id: 'movimientos', label: 'Movimientos', icon: Icons.MOVEMENTS },
  ]

  // 2. Diccionario de mapeo: Asocia cada ID string con su respectiva vista
  const rendersDeVistas: Record<string, React.ReactNode> = {
    inicio: <MiVistaInicio />,
    tarjeta: <MiVistaTarjeta />,
    movimientos: <MiVistaMovimientos />,
  }

  return (
    <div className="uiklu-w-full uiklu-min-h-screen uiklu-bg-gray-50 uiklu-flex uiklu-flex-col">
      <header className="uiklu-bg-white uiklu-p-4 uiklu-flex uiklu-justify-between uiklu-items-center uiklu-border-b">
        <span>Mi Banca Web</span>
        
        {/* Botón para abrir el drawer */}
        <Button
          variant="iconCircle"
          size="iconOnly"
          onClick={() => setIsMenuOpen(true)}
          icon={<MoreHorizontal style={{ width: '20px', height: '20px', color: '#FFF' }} />}
        />
      </header>

      {/* 3. Contenedor Dinámico: Se monta la vista completa en base al ID seleccionado */}
      <main className="uiklu-p-4 uiklu-flex-1">
        {rendersDeVistas[activeTab] || <MiVistaInicio />}
      </main>

      {/* Render del Drawer Mobile */}
      <MobileMenuDrawer
        isOpen={isMenuOpen}
        onClose={() => setIsMenuOpen(false)}
        items={opcionesMenu}
        activeTab={activeTab}
        onTabChange={setActiveTab}
      />
    </div>
  )
}

Props de MobileMenuDrawer

| Prop | Tipo | Descripción | | :--- | :--- | :--- | | isOpen | boolean | Controla la visibilidad en pantalla del menú desplegable. | | onClose | () => void | Callback ejecutado al presionar el botón de cerrar (X) o seleccionar una pestaña. | | items | NavItem[] | Array de opciones con estructura { id, label, icon, hasDivider? }. | | activeTab | string | ID de la pestaña seleccionada actualmente. | | onTabChange | (id: string) => void | Callback gatillado al pulsar una nueva opción del menú. Devuelve el id. |

Uso de InputCode

Componente modular de 6 celdas independientes para captura de tokens numéricos (MFA/OTP). Soporta autoenfoque secuencial inteligente, pegado (paste) masivo inteligente de cadenas numéricas enteras y control condicional de estados destructivos.

import { InputCode } from "@klu_dev/ui-klu-green"
import { useState } from "react"

export default function VerificationForm() {
  const [hasError, setHasError] = useState(false)

  const handleComplete = (code: string) => {
    console.log("Código unificado enviado:", code)
    if (code !== "123456") {
      setHasError(true) // Pinta bordes y texto numérico en color destructivo
    } else {
      setHasError(false)
    }
  }

  return (
    <div className="uiklu-max-w-[400px] uiklu-mx-auto uiklu-p-6">
      <InputCode hasError="{hasError}" onComplete="{handleComplete}" title="Código de seguridad SMS"/>
      {hasError && (
        <p className="uiklu-text-destructive uiklu-text-xs uiklu-text-center uiklu-mt-2">
          Código inválido. Revisa tus dígitos e intenta de nuevo.
        </p>
      )}
    </div>
  )
}

Props de InputCode

| Prop | Tipo | Por defecto | Descripción | | :--- | :--- | :--- | :--- | | title | string | "Código de autenticación" | Texto dinámico renderizado en la etiqueta del componente. | | hasError | boolean | false | Modifica de forma síncrona el color de los bordes y el contenido numérico a la variable destructiva. | | onComplete | (code: string) => void | - | Callback gatillado automáticamente cuando se ha rellenado la celda número 6. |

Uso de SearchSelect

Componente de menú desplegable de búsqueda avanzada impulsado con Radix UI Popover. Permite filtrado de texto reactivo en tiempo real con limpieza rápida integrada, slots dinámicos laterales adicionales y escala adaptativa de dimensiones.

import { SearchSelect } from "@klu_dev/ui-klu-green"
import { useState } from "react"

export default function BankSelector() {
  const [selectedBank, setSelectedBank] = useState("")

  const bancos = [
    { value: "002", label: "Banamex", extra: <span className="uiklu-text-xs uiklu-opacity-50">Nacional</span> },
    { value: "012", label: "BBVA Bancomer" },
    { value: "014", label: "Santander", extra: <span className="uiklu-text-xs uiklu-text-primary">Popular</span> },
    { value: "072", label: "Banorte" },
    { value: "646", label: "KLU Banca Digital" }
  ]

  return (
    <div className="uiklu-flex uiklu-flex-col uiklu-gap-4 uiklu-p-6">
      <SearchSelect error="{false}" onChange="{setSelectedBank}" options="{bancos}" placeholder="Selecciona tu banco emisor..." size="lg" value="{selectedBank}"/>
      <p className="uiklu-text-sm">ID Banco Seleccionado: <strong>{selectedBank || "Ninguno"}</strong></p>
    </div>
  )
}

Props de SearchSelect

| Prop | Tipo | Por defecto | Descripción | | :--- | :--- | :--- | :--- | | options | Option[] | - | Listado de opciones de formato { value: string; label: string; extra?: ReactNode }. | | value | string | - | ID de la opción seleccionada. | | onChange | (value: string) => void | - | Callback despachado al seleccionar o limpiar una opción. | | placeholder | string | "Buscar..." | Texto de soporte visible cuando el campo se encuentra vacío. | | size | 'sm' \| 'md' \| 'lg' \| 'full' | 'lg' | Determina la escala del ancho mínimo, alto de caja e interlineado tipográfico interno. | | error | boolean | false | Alterna el color de la caja a la paleta destructiva y formatea el color del placeholder. | | disabled | boolean | false | Inactiva por completo la interacción del gatillo y cancela el despliegue del Popover. |

Uso de GridCard

Tarjeta modular interactiva e individual ideal para layouts de cuadrícula.

import { GridCard, Icons } from "@klu_dev/ui-klu-green"
import { useState } from "react"

export default function CategorySelector() {
  const mockCategories = [
    { id: 'tel', label: 'Telefonía', icon: Icons.TELEPHONY },
    { id: 'mov', label: 'Movilidad', icon: Icons.MOBILITY },
    { id: 'hog', label: 'Hogar', icon: Icons.HOMESERVICE },
  ]

  const [activeId, setActiveId] = useState<string>('tel')

  return (
    <div className="uiklu-flex uiklu-flex-wrap uiklu-gap-4 uiklu-p-6">
      {mockCategories.map((category) => (
        <GridCard
          key={category.id}
          label={category.label}
          icon={category.icon}
          isActive={activeId === category.id}
          onClick={() => setActiveId(category.id)}
        />
      ))}
    </div>
  )
}

Props de GridCard

| Prop | Tipo | Por defecto | Descripción | | :--- | :--- | :--- | :--- | | label | string | - | Texto informativo inferior que titula el bloque de la tarjeta. | | icon | ReactNode | - | Grafismo o ícono vectorial extraído del catálogo corporativo Icons. | | isActive | boolean | false | Modifica dinámicamente el estilo del marco y el relleno para denotar selección activa. | | onClick | () => void | - | Callback gatillado al presionar la tarjeta completa. |

Uso de CheckBox

Componente de casilla de verificación estilizado con soporte de estados e icono interno centralizado. Puede ser utilizado de manera controlada o no controlada.

import { Checkbox } from "@klu_dev/ui-klu-green"
import { useState } from "react"

export default function CheckboxExample() {
  const [isLogged, setIsLogged] = useState(false)

  return (
    <div className="uiklu-p-6">
      <Checkbox 
        label="Guardar como servicio recurrente" 
        checked={isLogged}
        onChange={(checked) => setIsLogged(checked)}
      />
    </div>
  )
}

Props de CheckBox

| Prop | Tipo | Por defecto | Descripción | | :--- | :--- | :--- | :--- | | id | string | - | Identificador único del input (si no se provee, genera uno interno de forma automática). | | label | string | "Guardar como servicio recurrente" | Texto descriptivo renderizado al lado derecho del recuadro. | | defaultChecked | boolean | false | Estado inicial por defecto en modo no controlado. | | 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).

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. |