@codeworker.br/govbr-tw-react/dist/components/Rating/index.js

Biblioteca de componentes React usando Tailwind CSS que implementa o Padrão Digital de Governo.

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { faStar } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import BASE_CLASSNAMES from "../../config/baseClassNames";
import { cn } from "../../libs/utils";
import { ratingStarsVariants, ratingVariants } from "./variants";
const DEFAULT_MAX = 5;
const clampValue = (value, max) => {
    if (typeof value !== "number" || Number.isNaN(value)) {
        return 0;
    }
    return Math.min(Math.max(value, 0), max);
};
const Rating = (_a) => {
    var { value = 0, max = DEFAULT_MAX, size = "md", alignment = "left", activeClassName = "text-yellow-400", inactiveClassName = "text-gray-300", showValue = false, className } = _a, props = __rest(_a, ["value", "max", "size", "alignment", "activeClassName", "inactiveClassName", "showValue", "className"]);
    const safeMax = max > 0 ? Math.floor(max) : DEFAULT_MAX;
    const clampedValue = clampValue(value, safeMax);
    return (_jsxs("div", Object.assign({ className: cn(ratingVariants({ alignment }), BASE_CLASSNAMES.rating.root, className) }, props, { children: [_jsx("div", { className: cn(ratingStarsVariants({ size }), BASE_CLASSNAMES.rating.stars), role: "img", "aria-label": `${clampedValue} de ${safeMax}`, children: Array.from({ length: safeMax }).map((_, index) => {
                    const starIndex = index + 1;
                    const isActive = starIndex <= clampedValue;
                    return (_jsx(FontAwesomeIcon, { icon: faStar, "aria-hidden": "true", className: cn("h-[1em] w-[1em] shrink-0 transition-colors duration-150", isActive ? activeClassName : inactiveClassName), fixedWidth: true }, starIndex));
                }) }), showValue ? (_jsxs("span", { className: cn("text-xs font-medium text-govbr-gray-80", BASE_CLASSNAMES.rating.value), children: [clampedValue, "/", safeMax] })) : null] })));
};
Rating.displayName = "Rating";
export { Rating };