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.
63 lines (62 loc) • 3.71 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { useTheme } from "../../theme/ThemeProvider";
const IconButton = ({ icon, type = "primary", href, children, onClick, styles, className = "", cornerRadius, backgroundColor, textColor, borderColor, shadowColor, borderWidth, borderStyle, fontWeight, lineHeight, letterSpacing, transitionDuration, padding, margin, shadowOffsetX, shadowOffsetY, shadowBlur, shadowSpread, shadowInset, hoverColor, }) => {
const theme = useTheme();
const [isActive, setIsActive] = useState(false);
const [isHovered, setIsHovered] = useState(false);
const resolved = {
backgroundColor: backgroundColor ||
(type === "primary" ? theme.primaryColor : theme.secondaryColor),
textColor: textColor || theme.textColor,
fontSize: theme.fontSize,
fontFamily: theme.fontFamily,
padding: padding || `${theme.spacingfactor}px`,
borderRadius: typeof cornerRadius === "number" ? cornerRadius : theme.cornerRadius,
margin: margin || `${theme.spacingfactor}px`,
transition: `background-color ${transitionDuration || theme.transitionDuration}, box-shadow 0.2s ease`,
borderColor: borderColor || theme.borderColor,
borderWidth: borderWidth || theme.borderWidth,
borderStyle: borderStyle || theme.borderStyle,
fontWeight: fontWeight || theme.fontWeight,
lineHeight: lineHeight || theme.lineHeight,
letterSpacing: letterSpacing || theme.letterSpacing,
shadowColor: shadowColor || theme.shadowColor,
shadowOffsetX: shadowOffsetX || theme.shadowOffsetX,
shadowOffsetY: shadowOffsetY || theme.shadowOffsetY,
shadowBlur: shadowBlur || theme.shadowBlur,
shadowSpread: shadowSpread || theme.shadowSpread,
shadowInset: typeof shadowInset === "boolean" ? shadowInset : theme.shadowInset,
hoverColor: hoverColor || theme.hoverColor,
};
const boxShadow = `${resolved.shadowInset ? "inset " : ""}${resolved.shadowOffsetX} ${resolved.shadowOffsetY} ${resolved.shadowBlur} ${resolved.shadowSpread} ${resolved.shadowColor}`;
const buttonStyles = {
backgroundColor: isHovered ? resolved.hoverColor : resolved.backgroundColor,
color: resolved.textColor,
fontSize: resolved.fontSize,
fontFamily: resolved.fontFamily,
padding: resolved.padding,
borderRadius: resolved.borderRadius,
margin: resolved.margin,
transition: resolved.transition,
display: "flex",
alignItems: "center",
justifyContent: "center",
border: `${resolved.borderWidth} ${resolved.borderStyle} ${resolved.borderColor}`,
fontWeight: resolved.fontWeight,
lineHeight: resolved.lineHeight,
letterSpacing: resolved.letterSpacing,
boxShadow: isActive ? `0 0 0 0 ${resolved.shadowColor}` : boxShadow,
width: "fit-content",
cursor: "pointer",
...styles,
};
const handleMouseDown = () => setIsActive(true);
const handleMouseUp = () => setIsActive(false);
const handleMouseEnter = () => setIsHovered(true);
const handleMouseLeave = () => setIsHovered(false);
const Component = href ? "a" : "button";
return (_jsxs(Component, { href: href, className: `tharikida-icon-btn ${className}`, style: buttonStyles, onClick: onClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [icon, children && (_jsx("span", { style: { marginLeft: `${theme.spacingfactor / 2}px` }, children: children }))] }));
};
export default IconButton;