@codeworker.br/govbr-tw-react/dist/components/Item/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 { forwardRef } from "react";
import BASE_CLASSNAMES from "../../config/baseClassNames";
import { cn } from "../../libs/utils";
import { itemVariants } from "./variants";
const Item = forwardRef((_a, ref) => {
    var { className, children, icon, meta, actions, variant, density, bordered } = _a, props = __rest(_a, ["className", "children", "icon", "meta", "actions", "variant", "density", "bordered"]);
    const isDark = variant === "dark";
    return (_jsxs("div", Object.assign({ ref: ref, className: cn(itemVariants({ variant, density, bordered }), BASE_CLASSNAMES.item.root, className) }, props, { children: [icon && (_jsx("div", { className: cn("flex shrink-0 items-center justify-center size-7", BASE_CLASSNAMES.item.icon), children: icon })), _jsxs("div", { className: cn("flex min-w-0 flex-1 flex-col gap-2", BASE_CLASSNAMES.item.content), children: [_jsx("div", { className: "flex flex-col gap-1", children: children }), meta && (_jsx("div", { className: cn("text-xs opacity-70", isDark ? "text-govbr-blue-warm-20" : "text-govbr-gray-80", BASE_CLASSNAMES.item.meta), children: meta }))] }), actions && (_jsx("div", { className: cn("flex shrink-0 flex-col items-center gap-2 self-center", BASE_CLASSNAMES.item.actions), children: actions }))] })));
});
Item.displayName = "Item";
export default Item;