import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { Card, Button } from "../index";
const ButtonDocs = () => {
    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Button - Variantes y Ejemplos", children: _jsxs("div", { className: "space-y-8", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Variantes" }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6", children: [_jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { variant: "primary", icon: "fa-check", children: "Primario" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "bot\u00F3n primario" })] }), _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { variant: "outline", icon: "fa-pen", children: "Outline" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "bot\u00F3n outline" })] }), _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { variant: "ghost", icon: "fa-trash", children: "Ghost" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "bot\u00F3n ghost" })] })] })] }), _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 sm:grid-cols-3 gap-6", children: [_jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { size: "sm", variant: "primary", children: "Peque\u00F1o" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "bot\u00F3n peque\u00F1o" })] }), _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { size: "md", variant: "primary", children: "Mediano" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "bot\u00F3n mediano" })] }), _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { size: "lg", variant: "primary", children: "Grande" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "bot\u00F3n grande" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con \u00EDcono" }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6", children: [_jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { variant: "primary", icon: "fa-download", children: "Con \u00EDcono (izquierda)" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "bot\u00F3n con \u00EDcono" })] }), _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { variant: "outline", icon: "fa-arrow-right", iconPosition: "right", children: "\u00CDcono a la derecha" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "\u00EDcono a la derecha" })] }), _jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Button, { variant: "ghost", loading: true, icon: "fa-spinner", children: "Cargando" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "estado de carga" })] })] })] })] }) }) }));
};
export default ButtonDocs;
