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.
86 lines (85 loc) • 5.46 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 Accordion = ({ title, content, 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();
const [isActive, setIsActive] = useState(false);
const [isHovered, setIsHovered] = useState(false);
// 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 accordionStyles = {
overflow: "hidden",
transition: resolvedTransitionDuration,
border: `${resolvedBorderWidth} ${resolvedBorderStyle} ${resolvedBorderColor}`,
borderRadius: resolvedCornerRadius,
boxShadow: boxShadow,
backgroundColor: resolvedBackgroundColor,
color: resolvedTextColor,
fontSize: resolvedFontSize,
fontFamily: resolvedFontFamily,
fontWeight: resolvedFontWeight,
lineHeight: resolvedLineHeight,
letterSpacing: resolvedLetterSpacing,
margin: resolvedMargin,
...styles,
};
const headerStyles = {
padding: resolvedPadding,
cursor: "pointer",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
backgroundColor: isHovered ? resolvedHoverColor : resolvedBackgroundColor,
color: resolvedTextColor,
fontSize: resolvedFontSize,
fontFamily: resolvedFontFamily,
fontWeight: resolvedFontWeight,
lineHeight: resolvedLineHeight,
letterSpacing: resolvedLetterSpacing,
transition: `background-color ${resolvedTransitionDuration}`,
borderBottom: `${resolvedBorderWidth} ${resolvedBorderStyle} ${resolvedBorderColor}`,
};
const contentStyles = {
padding: resolvedPadding,
backgroundColor: resolvedBackgroundColor,
color: resolvedTextColor,
fontSize: resolvedFontSize,
fontFamily: resolvedFontFamily,
fontWeight: resolvedFontWeight,
lineHeight: resolvedLineHeight,
letterSpacing: resolvedLetterSpacing,
borderTop: `${resolvedBorderWidth} ${resolvedBorderStyle} ${resolvedBorderColor}`,
transition: resolvedTransitionDuration,
};
return (_jsxs("div", { className: `tharikida-accordion ${className}`, style: accordionStyles, children: [_jsxs("div", { style: headerStyles, onClick: () => setIsActive(!isActive), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [title, _jsx("svg", { style: {
transform: isActive ? "rotate(180deg)" : "rotate(0deg)",
transition: `transform ${resolvedTransitionDuration}`,
}, width: "14", height: "8", viewBox: "0 0 14 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M1.37565 0.499999L7.43782 6.5L13.5 0.5", stroke: resolvedTextColor, strokeLinecap: "round" }) })] }), isActive && _jsx("div", { style: contentStyles, children: content })] }));
};
export default Accordion;