tharikida-ui
Version:
A modern, lightweight React UI component library with built-in theming, accessibility, and full TypeScript support. Create beautiful, responsive, and customizable web apps faster with ready-to-use components for any project.
41 lines (40 loc) • 2.31 kB
JavaScript
"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { useState } from "react";
import { useTheme } from "../../theme/ThemeProvider";
const Button = ({ type = "primary", href, children, onClick, styles, className = "", cornerRadius, backgroundColor, color, fontSize, fontFamily, fontWeight, lineHeight, letterSpacing, padding, margin, borderWidth, borderStyle, borderColor, boxShadow, transitionDuration, }) => {
const theme = useTheme();
const [isActive, setIsActive] = useState(false);
const [isHovered, setIsHovered] = useState(false);
const buttonStyles = {
backgroundColor: backgroundColor ||
(type === "primary"
? isHovered
? theme.hoverColor
: theme.primaryColor
: theme.secondaryColor),
color: color || theme.textColor,
fontSize: fontSize || theme.fontSize,
fontFamily: fontFamily || theme.fontFamily,
fontWeight: fontWeight || theme.fontWeight,
lineHeight: lineHeight || theme.lineHeight,
letterSpacing: letterSpacing || theme.letterSpacing,
padding: padding || theme.padding,
borderRadius: typeof cornerRadius === "number"
? cornerRadius
: theme.cornerRadius ?? theme.spacingfactor,
margin: margin || theme.margin,
border: `${borderWidth || theme.borderWidth} ${borderStyle || theme.borderStyle} ${borderColor || theme.borderColor}`,
boxShadow: boxShadow ||
`${theme.shadowInset ? "inset " : ""}${isActive ? "0px 0px" : `${theme.shadowOffsetX} ${theme.shadowOffsetY}`} ${theme.shadowBlur} ${theme.shadowSpread} ${theme.shadowColor}`,
transition: transitionDuration || theme.transitionDuration,
height: "fit-content",
width: "fit-content",
...styles,
};
const handleMouseDown = () => setIsActive(true);
const handleMouseUp = () => setIsActive(false);
const Component = href ? "a" : "button";
return (_jsx(Component, { href: href, className: `tharikida-btn ${className}`, style: buttonStyles, onClick: onClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: children }));
};
export default Button;