import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { Card, Input, Button } from "../index";
const InputDocs = () => {
    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Input - Variantes y Ejemplos", children: _jsxs("div", { className: "space-y-10", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Uso b\u00E1sico" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Nombre completo", placeholder: "Ingresa tu nombre", icon: "fa-user" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "campo de texto est\u00E1ndar con \u00EDcono a la izquierda" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Correo electr\u00F3nico", type: "email", placeholder: "usuario@ejemplo.com", icon: "fa-envelope" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "soporta tipos de entrada nativos de HTML" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tama\u00F1os" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Input, { size: "sm", label: "Tama\u00F1o peque\u00F1o", placeholder: "sm", icon: "fa-compress-alt" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "tama\u00F1o compacto ideal para barras de herramientas" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { size: "md", label: "Tama\u00F1o mediano", placeholder: "md", icon: "fa-arrows-alt-h" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "tama\u00F1o por defecto, balanceado para formularios" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { size: "lg", label: "Tama\u00F1o grande", placeholder: "lg", icon: "fa-expand-alt" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "tama\u00F1o amplio ideal para formularios destacados" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "\u00CDconos y posiciones" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "\u00CDcono a la izquierda", placeholder: "Buscar...", icon: "fa-search" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "\u00EDcono alineado a la izquierda por defecto" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "\u00CDcono a la derecha", placeholder: "C\u00F3digo de verificaci\u00F3n", icon: "fa-key", iconPosition: "right" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "iconPosition permite mover el \u00EDcono a la derecha" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "\u00CDcono clickeable con onIconClick" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Input con \u00EDcono clickeable", placeholder: "Haz click en el \u00EDcono...", icon: "fa-info-circle", iconPosition: "right", onIconClick: () => {
                                                    alert("¡Ícono clickeado!");
                                                } }), _jsxs("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usa la propiedad ", _jsx("code", { children: "onIconClick" }), " para hacer el \u00EDcono clickeable. El \u00EDcono mostrar\u00E1 un efecto hover cuando sea clickeable."] })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Ejemplo pr\u00E1ctico: limpiar campo", placeholder: "Escribe algo...", icon: "fa-times", iconPosition: "right", onIconClick: (e) => {
                                                    const input = e.currentTarget
                                                        .closest(".relative")
                                                        ?.querySelector("input");
                                                    if (input) {
                                                        input.value = "";
                                                        input.focus();
                                                    }
                                                } }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Ejemplo de uso pr\u00E1ctico: limpiar el campo al hacer click en el \u00EDcono." })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Estados" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Con error", placeholder: "Usuario", error: "Este campo es obligatorio", icon: "fa-exclamation-circle" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "utiliza el prop error para mostrar mensajes y estilos" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Deshabilitado", placeholder: "Solo lectura", disabled: true, icon: "fa-lock" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "el estado disabled aplica estilos y bloqueo de interacci\u00F3n" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Formulario completo" }), _jsx(Card, { title: "Ejemplo de formulario con Input", subtitle: "Combinaci\u00F3n de Input y Button para captura de datos", footer: _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", icon: "fa-times", children: "Cancelar" }), _jsx(Button, { variant: "primary", icon: "fa-paper-plane", children: "Enviar" })] }), children: _jsxs("div", { className: "space-y-4", children: [_jsx(Input, { label: "Nombre", placeholder: "Nombre y apellido", icon: "fa-id-card" }), _jsx(Input, { label: "Correo", type: "email", placeholder: "correo@empresa.com", icon: "fa-at" }), _jsx(Input, { label: "Tel\u00E9fono", type: "tel", placeholder: "+34 600 000 000", icon: "fa-phone" })] }) })] })] }) }) }));
};
export default InputDocs;
