@codeworker.br/govbr-tw-react
Version:
Biblioteca de componentes React usando Tailwind CSS que implementa o Padrão Digital de Governo.
35 lines (34 loc) • 2.61 kB
JavaScript
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 { useRef, useState, } from "react";
import tabsVariants from "./variants";
import tabButtonGroupVariants from "./button-group-variants";
import tabButtonVariants from "./button-variants";
import tabContentVariants from "./content-variants";
import React from "react";
import BASE_CLASSNAMES from "../../config/baseClassNames";
import { cn, getUIDClassName } from "../../libs/utils";
const Tabs = (_a) => {
var { className, children, variant = "default", density = "default", contentHeight = "h-auto", onChange, value, ref } = _a, props = __rest(_a, ["className", "children", "variant", "density", "contentHeight", "onChange", "value", "ref"]);
ref = ref === undefined ? useRef(null) : ref;
const [selected, setSelected] = useState(value);
const [tabsTrigger, ...tabContent] = React.Children.toArray(children);
const tabId = (value) => `${BASE_CLASSNAMES.tabs.button}-${value}`;
const tabContentId = (value) => `${BASE_CLASSNAMES.tabs.content}-${value}`;
return (_jsxs("div", Object.assign({ className: cn(tabsVariants({ variant }), className, BASE_CLASSNAMES.tabs.root) }, props, { children: [_jsx("ul", { className: cn(tabButtonGroupVariants({ variant, density })), children: tabsTrigger.props.children.map(({ props }) => (_jsx("li", { children: _jsx("button", { className: cn(tabButtonVariants({ variant, density })), role: "tablist", id: tabId(props.value), "aria-controls": tabContentId(value), "aria-selected": selected === props.value, onClick: () => setSelected(props.value), children: props.children }) }, getUIDClassName()))) }), tabContent.map(({ props }) => (_jsx("div", { role: "tabpanel", id: tabContentId(props.value), "aria-labelledby": tabId(props.value), className: cn(tabContentVariants({ variant, density }), selected === props.value ? "block" : "hidden", contentHeight), children: props.children }, getUIDClassName())))] })));
};
const TabsTrigger = ({ children }) => children;
const TabsContent = ({ children }) => children;
Tabs.Trigger = TabsTrigger;
Tabs.Content = TabsContent;
export default Tabs;