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.93 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useTheme } from "../../theme/ThemeProvider";
const Card = ({ title, children, styles, className = "", cornerRadius, primaryColor, secondaryColor, textColor, backgroundColor, fontSize, fontFamily, spacingfactor, borderColor, shadowColor, borderWidth, borderStyle, fontWeight, lineHeight, letterSpacing, transitionDuration, padding, margin, shadowOffsetX, shadowOffsetY, shadowBlur, shadowSpread, shadowInset, hoverColor, }) => {
const theme = useTheme();
// Use prop override, then theme, then fallback to default
const getThemeValue = (prop, themeKey) => prop !== undefined ? prop : theme[themeKey];
const resolvedCornerRadius = getThemeValue(cornerRadius, "cornerRadius");
const resolvedPrimaryColor = getThemeValue(primaryColor, "primaryColor");
const resolvedSecondaryColor = getThemeValue(secondaryColor, "secondaryColor");
const resolvedTextColor = getThemeValue(textColor, "textColor");
const resolvedBackgroundColor = getThemeValue(backgroundColor, "backgroundColor");
const resolvedFontSize = getThemeValue(fontSize, "fontSize");
const resolvedFontFamily = getThemeValue(fontFamily, "fontFamily");
const resolvedSpacingfactor = getThemeValue(spacingfactor, "spacingfactor");
const resolvedBorderColor = getThemeValue(borderColor, "borderColor");
const resolvedShadowColor = getThemeValue(shadowColor, "shadowColor");
const resolvedBorderWidth = getThemeValue(borderWidth, "borderWidth");
const resolvedBorderStyle = getThemeValue(borderStyle, "borderStyle");
const resolvedFontWeight = getThemeValue(fontWeight, "fontWeight");
const resolvedLineHeight = getThemeValue(lineHeight, "lineHeight");
const resolvedLetterSpacing = getThemeValue(letterSpacing, "letterSpacing");
const resolvedTransitionDuration = getThemeValue(transitionDuration, "transitionDuration");
const resolvedPadding = getThemeValue(padding, "padding");
const resolvedMargin = getThemeValue(margin, "margin");
const resolvedShadowOffsetX = getThemeValue(shadowOffsetX, "shadowOffsetX");
const resolvedShadowOffsetY = getThemeValue(shadowOffsetY, "shadowOffsetY");
const resolvedShadowBlur = getThemeValue(shadowBlur, "shadowBlur");
const resolvedShadowSpread = getThemeValue(shadowSpread, "shadowSpread");
const resolvedShadowInset = getThemeValue(shadowInset, "shadowInset");
const resolvedHoverColor = getThemeValue(hoverColor, "hoverColor");
const boxShadow = `${resolvedShadowInset ? "inset " : ""}${resolvedShadowOffsetX} ${resolvedShadowOffsetY} ${resolvedShadowBlur} ${resolvedShadowSpread} ${resolvedShadowColor}`;
const cardStyles = {
border: `${resolvedBorderWidth} ${resolvedBorderStyle} ${resolvedBorderColor}`,
borderRadius: resolvedCornerRadius,
boxShadow: boxShadow,
backgroundColor: resolvedBackgroundColor,
color: resolvedTextColor,
fontFamily: resolvedFontFamily,
fontSize: resolvedFontSize,
fontWeight: resolvedFontWeight,
lineHeight: resolvedLineHeight,
letterSpacing: resolvedLetterSpacing,
padding: resolvedPadding,
margin: resolvedMargin,
transition: resolvedTransitionDuration,
...styles,
};
const titleStyles = {
fontWeight: 600,
fontSize: typeof resolvedFontSize === "number"
? resolvedFontSize * 1.1
: resolvedFontSize,
marginBottom: resolvedSpacingfactor,
color: resolvedTextColor,
fontFamily: resolvedFontFamily,
lineHeight: resolvedLineHeight,
letterSpacing: resolvedLetterSpacing,
};
return (_jsxs("div", { className: `tharikida-card ${className}`, style: cardStyles, children: [title && _jsx("div", { style: titleStyles, children: title }), _jsx("div", { children: children })] }));
};
export default Card;