@pagamio/frontend-commons-lib/lib/components/ui/Button.js

Pagamio library for Frontend reusable components like the form engine and table container

import { jsx as _jsx } from "react/jsx-runtime";
import { Slot } from '@radix-ui/react-slot';
import * as React from 'react';
import { cn } from '../../helpers';
const variantStyles = {
    default: 'bg-primary text-white shadow hover:bg-primary/90',
    destructive: 'bg-red-500 text-white shadow-sm hover:bg-red-600',
    outline: 'border border-gray-200 bg-white shadow-sm hover:bg-gray-100',
    secondary: 'bg-gray-500 text-white shadow-sm hover:bg-gray-600',
    ghost: 'hover:bg-gray-100 hover:text-gray-900',
    link: 'text-primary underline-offset-4 hover:underline',
    primary: 'bg-primary-500 text-white hover:bg-primary-600 focus:ring-primary-500',
    'outline-primary': 'border border-primary-500 text-primary-500 hover:bg-primary-500 hover:text-white focus:ring-gray-400',
    transparent: 'bg-transparent text-primary-500 hover:bg-primary-50 focus:ring-primary-500',
};
const sizeStyles = {
    default: 'h-9 px-4 py-2',
    sm: 'h-8 px-3 py-2 text-sm',
    md: 'px-6 py-2 text-base',
    lg: 'h-10 px-8 py-2 text-lg',
    icon: 'h-9 w-9',
};
const Button = React.forwardRef(({ className, variant = 'primary', size = 'default', asChild = false, disabled = false, ...props }, ref) => {
    const Comp = asChild ? Slot : 'button';
    const baseStyles = 'inline-flex items-center justify-center rounded-md text-xs sm:text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50';
    return (_jsx(Comp, { className: cn(baseStyles, variantStyles[variant], sizeStyles[size], disabled && 'bg-gray-400 text-white cursor-not-allowed', className), ref: ref, disabled: disabled, ...props }));
});
Button.displayName = 'Button';
export default Button;
export { variantStyles };