@smitch/fluid
Version:
A lightweight, Tailwind-powered React/Next.js UI component library.
57 lines • 2.55 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useMemo } from "react";
import { twMerge } from "tailwind-merge";
var backgrounds = {
info: "bg-info",
success: "bg-success",
warning: "bg-warning",
danger: "bg-danger",
primary: "bg-primary",
secondary: "bg-secondary",
dark: "bg-slate-700",
light: "bg-white",
accent: "bg-accent",
neutral: "bg-neutral",
transparent: "bg-transparent",
};
var colors = {
info: "!text-info",
success: "text-success",
warning: "text-warning",
danger: "!text-danger",
primary: "text-primary",
secondary: "text-secondary",
dark: "text-dark",
light: "text-light",
accent: "text-accent",
current: "text-current",
neutral: "text-neutral",
};
var layouts = {
square: "aspect-square p-[.15em] leading-3",
circle: "rounded-full aspect-square p-[.175em] leading-3",
rounded: "rounded-md px-[.25em] py-[.1em] leading-5",
pill: "rounded-full px-[.25em] py-[.1em] leading-5",
};
var sizes = {
sm: "text-sm",
md: "text-base",
lg: "text-lg",
inherit: "text-[60%]",
};
var positions = {
inline: "relative -top-3",
right: "absolute end-0 top-0",
left: "absolute -start-6",
};
var Badge = function (_a) {
var _b = _a.className, className = _b === void 0 ? "" : _b, style = _a.style, _c = _a.layout, layout = _c === void 0 ? "circle" : _c, _d = _a.badgeBackground, badgeBackground = _d === void 0 ? "info" : _d, _e = _a.badgeColor, badgeColor = _e === void 0 ? "dark" : _e, _f = _a.position, position = _f === void 0 ? "inline" : _f, children = _a.children, _g = _a.size, size = _g === void 0 ? "inherit" : _g;
var layoutClasses = useMemo(function () { return layouts[layout]; }, [layout]);
var backgroundClasses = useMemo(function () { return backgrounds[badgeBackground]; }, [badgeBackground]);
var colorClasses = useMemo(function () { return colors[badgeColor]; }, [badgeColor]);
var positionClasses = useMemo(function () { return positions[position]; }, [position]);
var sizeClasses = useMemo(function () { return sizes[size]; }, [size]);
return (_jsx("small", { className: twMerge("badge group inline-block leading-none min-w-[1em] ".concat(sizeClasses, " ").concat(layoutClasses, " ").concat(backgroundClasses, " ").concat(colorClasses, " ").concat(positionClasses), className), style: style, "data-testid": "badge", children: _jsx("span", { className: "flex items-center gap-1", children: children }) }));
};
export default Badge;
//# sourceMappingURL=Badge.js.map