@codeworker.br/govbr-tw-react
Version:
Biblioteca de componentes React usando Tailwind CSS que implementa o Padrão Digital de Governo.
79 lines (78 loc) • 3.15 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { Children, cloneElement, isValidElement } from "react";
import { cva } from "class-variance-authority";
function cn(...classes) {
return classes.filter(Boolean).join(" ");
}
const groupVariants = cva(
// overflow-hidden evita bleed do hover interno
"w-full overflow-hidden rounded-2xl border transition-colors", {
variants: {
variant: {
default: "bg-govbr-pure-0 border-govbr-gray-10 text-govbr-gray-80",
subtle: "bg-govbr-gray-2 border-govbr-gray-2 text-govbr-gray-80",
dark: "bg-govbr-blue-warm-vivid-90 border-govbr-blue-warm-20 text-govbr-pure-0",
},
density: {
comfortable: "",
compact: "",
},
bordered: {
true: "",
false: "border-transparent",
},
divided: {
true: "",
false: "",
},
},
defaultVariants: {
variant: "default",
density: "comfortable",
bordered: true,
divided: true,
},
});
const dividerByVariant = {
default: "border-govbr-gray-10",
subtle: "border-govbr-gray-10",
dark: "border-govbr-blue-warm-20",
};
export default function ItemGroup({ children, className, variant, density, bordered, divided = true, propagateVariant = true, stripChildBorders = true, }) {
const items = Children.toArray(children).filter(Boolean);
const count = items.length;
return (_jsx("div", { className: cn(groupVariants({ variant, density, bordered, divided }), className), children: items.map((child, idx) => {
var _a;
const isFirst = idx === 0;
const isLast = idx === count - 1;
const isSingle = count === 1;
// Arredondamento por posição
const rounding = isSingle
? "rounded-2xl"
: isFirst
? "rounded-t-2xl rounded-b-none"
: isLast
? "rounded-b-2xl rounded-t-none"
: "rounded-none";
// Divisor (apenas entre itens)
const dividerCls = divided && !isLast ? `border-b ${dividerByVariant[variant !== null && variant !== void 0 ? variant : "default"]}` : "";
if (isValidElement(child)) {
const el = child;
// monta overrides do Item
const nextProps = {
className: cn((_a = el.props) === null || _a === void 0 ? void 0 : _a.className, rounding),
};
if (stripChildBorders)
nextProps.bordered = false;
if (propagateVariant) {
if (variant)
nextProps.variant = variant;
if (density)
nextProps.density = density;
}
return (_jsx("div", { className: dividerCls, children: cloneElement(el, nextProps) }, idx));
}
// Child não-Item
return (_jsx("div", { className: cn(rounding, dividerCls), children: child }, idx));
}) }));
}