@agentdao/core
Version:
Core functionality, skills, and ready-made UI components for AgentDAO - Web3 subscriptions, content generation, social media, help support, live chat, RSS fetching, web search, and agent pricing integration
139 lines (138 loc) • 4.7 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Button = Button;
const jsx_runtime_1 = require("react/jsx-runtime");
function Button({ children, variant = 'primary', size = 'md', disabled = false, loading = false, onClick, className, style, theme }) {
const defaultTheme = {
colors: {
primary: '#3B82F6',
secondary: '#6B7280',
background: '#FFFFFF',
surface: '#F9FAFB',
text: '#111827',
textSecondary: '#6B7280',
border: '#E5E7EB',
error: '#EF4444',
success: '#10B981',
warning: '#F59E0B',
},
spacing: {
xs: '0.25rem',
sm: '0.5rem',
md: '1rem',
lg: '1.5rem',
xl: '2rem',
},
borderRadius: {
sm: '0.25rem',
md: '0.5rem',
lg: '0.75rem',
},
typography: {
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
fontSize: {
xs: '0.75rem',
sm: '0.875rem',
md: '1rem',
lg: '1.125rem',
xl: '1.25rem',
},
},
};
const t = theme || defaultTheme;
const getVariantStyles = () => {
switch (variant) {
case 'primary':
return {
backgroundColor: t.colors.primary,
color: 'white',
border: 'none',
};
case 'secondary':
return {
backgroundColor: t.colors.secondary,
color: 'white',
border: 'none',
};
case 'outline':
return {
backgroundColor: 'transparent',
color: t.colors.primary,
border: `1px solid ${t.colors.primary}`,
};
case 'ghost':
return {
backgroundColor: 'transparent',
color: t.colors.text,
border: 'none',
};
case 'danger':
return {
backgroundColor: t.colors.error,
color: 'white',
border: 'none',
};
default:
return {
backgroundColor: t.colors.primary,
color: 'white',
border: 'none',
};
}
};
const getSizeStyles = () => {
switch (size) {
case 'sm':
return {
padding: `${t.spacing.xs} ${t.spacing.sm}`,
fontSize: t.typography.fontSize.xs,
};
case 'md':
return {
padding: `${t.spacing.sm} ${t.spacing.md}`,
fontSize: t.typography.fontSize.sm,
};
case 'lg':
return {
padding: `${t.spacing.md} ${t.spacing.lg}`,
fontSize: t.typography.fontSize.md,
};
default:
return {
padding: `${t.spacing.sm} ${t.spacing.md}`,
fontSize: t.typography.fontSize.sm,
};
}
};
const baseStyles = {
borderRadius: t.borderRadius.md,
fontFamily: t.typography.fontFamily,
fontWeight: 500,
cursor: disabled || loading ? 'not-allowed' : 'pointer',
transition: 'all 0.2s ease',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
gap: t.spacing.xs,
outline: 'none',
...getVariantStyles(),
...getSizeStyles(),
...style,
};
if (disabled || loading) {
baseStyles.opacity = 0.6;
}
return ((0, jsx_runtime_1.jsxs)("button", { onClick: onClick, disabled: disabled || loading, className: className, style: baseStyles, children: [loading && ((0, jsx_runtime_1.jsx)("div", { style: {
width: '16px',
height: '16px',
border: '2px solid transparent',
borderTop: '2px solid currentColor',
borderRadius: '50%',
animation: 'spin 1s linear infinite',
} })), children, (0, jsx_runtime_1.jsx)("style", { children: `
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
` })] }));
}