lightning-auth-and-payment
Version:
Lightning Network authentication and payment processing library for modern web applications
357 lines • 14.6 kB
JavaScript
;
'use client';
Object.defineProperty(exports, "__esModule", { value: true });
exports.LightningButton = LightningButton;
exports.LightningPayButton = LightningPayButton;
exports.LightningWalletButton = LightningWalletButton;
exports.LightningSendButton = LightningSendButton;
exports.LightningCopyButton = LightningCopyButton;
exports.LightningDownloadButton = LightningDownloadButton;
exports.LightningExternalButton = LightningExternalButton;
exports.LightningConnectButton = LightningConnectButton;
exports.LightningDisconnectButton = LightningDisconnectButton;
exports.useLightningButtonState = useLightningButtonState;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const lucide_react_1 = require("lucide-react");
const button_1 = require("./ui/button");
const formatting_1 = require("../utils/formatting");
/**
* Size configuration for buttons
*/
const sizeConfig = {
xs: {
className: 'h-6 px-2 text-xs',
iconSize: 'w-3 h-3',
spacing: 'gap-1',
},
sm: {
className: 'h-8 px-3 text-sm',
iconSize: 'w-3 h-3',
spacing: 'gap-1.5',
},
md: {
className: 'h-10 px-4 text-sm',
iconSize: 'w-4 h-4',
spacing: 'gap-2',
},
lg: {
className: 'h-12 px-6 text-base',
iconSize: 'w-5 h-5',
spacing: 'gap-2.5',
},
xl: {
className: 'h-14 px-8 text-lg',
iconSize: 'w-6 h-6',
spacing: 'gap-3',
},
};
/**
* Variant configuration with enhanced styling
*/
const variantConfig = {
lightning: {
icon: lucide_react_1.Zap,
className: 'bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white border-orange-500',
defaultText: 'Lightning',
glowColor: 'shadow-orange-500/50',
},
payment: {
icon: lucide_react_1.Send,
className: 'bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white border-green-500',
defaultText: 'Pay',
glowColor: 'shadow-green-500/50',
},
wallet: {
icon: lucide_react_1.Wallet,
className: 'bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white border-blue-500',
defaultText: 'Wallet',
glowColor: 'shadow-blue-500/50',
},
send: {
icon: lucide_react_1.Send,
className: 'bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-white border-purple-500',
defaultText: 'Send',
glowColor: 'shadow-purple-500/50',
},
download: {
icon: lucide_react_1.Download,
className: 'bg-gradient-to-r from-indigo-500 to-indigo-600 hover:from-indigo-600 hover:to-indigo-700 text-white border-indigo-500',
defaultText: 'Download',
glowColor: 'shadow-indigo-500/50',
},
copy: {
icon: lucide_react_1.Copy,
className: 'bg-gradient-to-r from-gray-500 to-gray-600 hover:from-gray-600 hover:to-gray-700 text-white border-gray-500',
defaultText: 'Copy',
glowColor: 'shadow-gray-500/50',
},
external: {
icon: lucide_react_1.ExternalLink,
className: 'bg-gradient-to-r from-teal-500 to-teal-600 hover:from-teal-600 hover:to-teal-700 text-white border-teal-500',
defaultText: 'Open',
glowColor: 'shadow-teal-500/50',
},
connect: {
icon: lucide_react_1.Zap,
className: 'bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white border-emerald-500',
defaultText: 'Connect',
glowColor: 'shadow-emerald-500/50',
},
disconnect: {
icon: lucide_react_1.X,
className: 'bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white border-red-500',
defaultText: 'Disconnect',
glowColor: 'shadow-red-500/50',
},
};
/**
* Enhanced LightningButton component with comprehensive features
*
* @example
* ```tsx
* <LightningButton
* variant="lightning"
* size="lg"
* state="loading"
* animation="pulse"
* onClick={handleClick}
* loadingText="Connecting..."
* successText="Connected!"
* autoReset
* >
* Login with Lightning
* </LightningButton>
* ```
*/
function LightningButton({ variant = 'lightning', size = 'md', state, isLoading = false, isSuccess = false, isError = false, icon, hideIcon = false, iconPosition = 'left', lightningStyle = 'default', animation = 'none', animateOnHover = true, pulse = false, fullWidth = false, loadingText, successText, errorText, autoReset = false, autoResetDelay = 2000, ripple = false, glow = false, gradientColors, successColors, errorColors, onStateChange, onAnimationComplete, className, children, disabled, onClick, ...props }) {
// State management
const [internalState, setInternalState] = (0, react_1.useState)('idle');
const [rippleEffect, setRippleEffect] = (0, react_1.useState)(null);
// Determine current state
const currentState = state ||
(isLoading ? 'loading' :
isSuccess ? 'success' :
isError ? 'error' :
disabled ? 'disabled' :
internalState);
// Auto-reset functionality
(0, react_1.useEffect)(() => {
if (autoReset && (currentState === 'success' || currentState === 'error')) {
const timer = setTimeout(() => {
setInternalState('idle');
onStateChange?.('idle');
}, autoResetDelay);
return () => clearTimeout(timer);
}
}, [currentState, autoReset, autoResetDelay, onStateChange]);
// Animation completion handler
(0, react_1.useEffect)(() => {
if (animation !== 'none' && onAnimationComplete) {
const timer = setTimeout(() => {
onAnimationComplete(animation);
}, 1000); // Adjust based on animation duration
return () => clearTimeout(timer);
}
}, [animation, onAnimationComplete]);
const config = variantConfig[variant];
const sizeConfigData = sizeConfig[size];
const IconComponent = config.icon;
// Enhanced click handler with ripple effect
const handleClick = (event) => {
if (ripple) {
const rect = event.currentTarget.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
setRippleEffect({ x, y });
setTimeout(() => setRippleEffect(null), 600);
}
onClick?.(event);
};
// Get variant classes with enhanced styling
const getVariantClasses = () => {
const baseClasses = config.className;
if (lightningStyle === 'outline') {
return 'border-2 bg-transparent hover:bg-current/10 text-current border-current';
}
if (lightningStyle === 'ghost') {
return 'bg-current/10 hover:bg-current/20 text-current border-transparent';
}
if (lightningStyle === 'solid') {
return baseClasses.replace('bg-gradient-to-r', 'bg-current');
}
if (lightningStyle === 'minimal') {
return 'bg-transparent hover:bg-current/5 text-current border-transparent';
}
return baseClasses;
};
// Get state classes with enhanced styling
const getStateClasses = () => {
if (currentState === 'success') {
const customColors = successColors ?
`bg-${successColors.background} text-${successColors.text} border-${successColors.border}` :
'bg-green-500 hover:bg-green-600 text-white border-green-500';
return customColors;
}
if (currentState === 'error') {
const customColors = errorColors ?
`bg-${errorColors.background} text-${errorColors.text} border-${errorColors.border}` :
'bg-red-500 hover:bg-red-600 text-white border-red-500';
return customColors;
}
if (currentState === 'loading') {
return 'opacity-75 cursor-not-allowed';
}
if (currentState === 'disabled') {
return 'opacity-50 cursor-not-allowed';
}
return '';
};
// Get animation classes
const getAnimationClasses = () => {
const classes = [];
if (animateOnHover) {
classes.push('transition-all duration-200 ease-in-out transform hover:scale-105');
}
if (animation === 'pulse' || pulse) {
classes.push('animate-pulse');
}
if (animation === 'bounce') {
classes.push('hover:animate-bounce');
}
if (animation === 'glow' || glow) {
classes.push(`hover:shadow-lg ${config.glowColor}`);
}
if (animation === 'scale') {
classes.push('hover:scale-110 active:scale-95');
}
if (animation === 'ripple') {
classes.push('relative overflow-hidden');
}
return classes.join(' ');
};
// Get size classes
const getSizeClasses = () => {
return sizeConfigData.className;
};
// Get icon size
const getIconSize = () => {
return sizeConfigData.iconSize;
};
// Render icon with enhanced functionality
const renderIcon = () => {
if (hideIcon || iconPosition === 'none')
return null;
const iconClasses = (0, formatting_1.cn)(getIconSize(), 'flex-shrink-0');
if (icon) {
return (0, jsx_runtime_1.jsx)("span", { className: iconClasses, children: icon });
}
if (currentState === 'success') {
return (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: iconClasses });
}
if (currentState === 'error') {
return (0, jsx_runtime_1.jsx)(lucide_react_1.AlertCircle, { className: iconClasses });
}
if (currentState === 'loading') {
return (0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: (0, formatting_1.cn)(iconClasses, 'animate-spin') });
}
return (0, jsx_runtime_1.jsx)(IconComponent, { className: iconClasses });
};
// Get display text
const getDisplayText = () => {
if (currentState === 'loading' && loadingText)
return loadingText;
if (currentState === 'success' && successText)
return successText;
if (currentState === 'error' && errorText)
return errorText;
return children || config.defaultText;
};
// Render ripple effect
const renderRipple = () => {
if (!rippleEffect || !ripple)
return null;
return ((0, jsx_runtime_1.jsx)("span", { className: "absolute bg-white/30 rounded-full animate-ping pointer-events-none", style: {
left: rippleEffect.x - 10,
top: rippleEffect.y - 10,
width: 20,
height: 20,
} }));
};
// Get button content based on icon position
const getButtonContent = () => {
const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [iconPosition === 'left' && renderIcon(), iconPosition === 'top' && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center", children: [renderIcon(), (0, jsx_runtime_1.jsx)("span", { children: getDisplayText() })] })), iconPosition === 'bottom' && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center", children: [(0, jsx_runtime_1.jsx)("span", { children: getDisplayText() }), renderIcon()] })), !['top', 'bottom'].includes(iconPosition) && getDisplayText(), iconPosition === 'right' && renderIcon()] }));
return content;
};
return ((0, jsx_runtime_1.jsxs)(button_1.Button, { className: (0, formatting_1.cn)('font-medium shadow-lg hover:shadow-xl relative', getVariantClasses(), getStateClasses(), getAnimationClasses(), getSizeClasses(), fullWidth && 'w-full', sizeConfigData.spacing, className), disabled: disabled || currentState === 'loading' || currentState === 'disabled', onClick: handleClick, ...props, children: [getButtonContent(), renderRipple()] }));
}
// Enhanced convenience components for common Lightning actions
/**
* LightningPayButton - Enhanced convenience component for payment actions
*/
function LightningPayButton(props) {
return (0, jsx_runtime_1.jsx)(LightningButton, { variant: "payment", ...props });
}
/**
* LightningWalletButton - Enhanced convenience component for wallet actions
*/
function LightningWalletButton(props) {
return (0, jsx_runtime_1.jsx)(LightningButton, { variant: "wallet", ...props });
}
/**
* LightningSendButton - Enhanced convenience component for send actions
*/
function LightningSendButton(props) {
return (0, jsx_runtime_1.jsx)(LightningButton, { variant: "send", ...props });
}
/**
* LightningCopyButton - Enhanced convenience component for copy actions
*/
function LightningCopyButton(props) {
return (0, jsx_runtime_1.jsx)(LightningButton, { variant: "copy", ...props });
}
/**
* LightningDownloadButton - Enhanced convenience component for download actions
*/
function LightningDownloadButton(props) {
return (0, jsx_runtime_1.jsx)(LightningButton, { variant: "download", ...props });
}
/**
* LightningExternalButton - Enhanced convenience component for external link actions
*/
function LightningExternalButton(props) {
return (0, jsx_runtime_1.jsx)(LightningButton, { variant: "external", ...props });
}
/**
* LightningConnectButton - Enhanced convenience component for connection actions
*/
function LightningConnectButton(props) {
return (0, jsx_runtime_1.jsx)(LightningButton, { variant: "connect", ...props });
}
/**
* LightningDisconnectButton - Enhanced convenience component for disconnection actions
*/
function LightningDisconnectButton(props) {
return (0, jsx_runtime_1.jsx)(LightningButton, { variant: "disconnect", ...props });
}
/**
* Enhanced LightningButton with state management hook
*/
function useLightningButtonState(initialState = 'idle') {
const [state, setState] = (0, react_1.useState)(initialState);
const setLoading = () => setState('loading');
const setSuccess = () => setState('success');
const setError = () => setState('error');
const setIdle = () => setState('idle');
const setDisabled = () => setState('disabled');
return {
state,
setState,
setLoading,
setSuccess,
setError,
setIdle,
setDisabled,
};
}
//# sourceMappingURL=LightningButton.js.map