"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TailwindButton = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const cn_1 = require("../utils/cn");
/**
 * Button component built with Tailwind CSS
 *
 * A versatile button component that supports various sizes, variants, and states
 * like loading and disabled.
 *
 * @example
 * // Basic usage
 * <Button>Click me</Button>
 *
 * @example
 * // Primary variant with icon
 * <Button variant="primary" leftIcon={<Icon name="edit" />}>Edit</Button>
 *
 * @example
 * // Loading state
 * <Button isLoading loadingText="Saving...">Save</Button>
 */
exports.TailwindButton = (0, react_1.forwardRef)(({ children, className, size = 'md', variant = 'solid', isLoading = false, isDisabled = false, loadingText, leftIcon, rightIcon, isFullWidth = false, ...props }, ref) => {
    // Base classes that apply to all buttons
    const baseClasses = "inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50";
    // Size-specific classes
    const sizeClasses = {
        xs: "h-8 px-3 text-xs",
        sm: "h-9 px-4 text-sm",
        md: "h-10 px-5 text-base",
        lg: "h-12 px-6 text-lg",
    };
    // Variant-specific classes
    const variantClasses = {
        solid: "bg-primary text-primary-foreground hover:bg-primary/90",
        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
        unstyled: "",
        primary: "bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-500",
        secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300 focus-visible:ring-gray-500",
        danger: "bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-500",
    };
    // Width classes
    const widthClasses = isFullWidth ? "w-full" : "";
    // Combine all classes
    const buttonClasses = (0, cn_1.cn)(baseClasses, sizeClasses[size], variantClasses[variant], widthClasses, className);
    // Determine content based on loading state
    const buttonContent = isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "mr-2", children: (0, jsx_runtime_1.jsxs)("svg", { className: "animate-spin h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), (0, jsx_runtime_1.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }) }), loadingText || children] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [leftIcon && (0, jsx_runtime_1.jsx)("span", { className: "mr-2", children: leftIcon }), children, rightIcon && (0, jsx_runtime_1.jsx)("span", { className: "ml-2", children: rightIcon })] }));
    return ((0, jsx_runtime_1.jsx)("button", { ref: ref, className: buttonClasses, disabled: isDisabled || isLoading, "data-loading": isLoading || undefined, ...props, children: buttonContent }));
});
exports.TailwindButton.displayName = 'TailwindButton';
exports.default = exports.TailwindButton;
//# sourceMappingURL=TailwindButton.js.map