🟢 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

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 |