@redocly/theme/lib/markdoc/components/Tabs/Tab.js

Shared UI components lib

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tab = void 0;
exports.TabComponent = TabComponent;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const TabList_1 = require("../../../markdoc/components/Tabs/TabList");
const GenericIcon_1 = require("../../../icons/GenericIcon/GenericIcon");
function TabComponent({ tabId, label, size, disabled, setRef, onKeyDown, onClick, icon, iconRawContent, }) {
    return (react_1.default.createElement(TabList_1.TabItem, { "data-component-name": "Markdoc/Tabs/Tab", size: size, tabIndex: 0 },
        react_1.default.createElement(TabList_1.TabButtonLink, { id: `tab-${tabId}`, "data-label": label, role: "tab", "aria-selected": "false", "aria-controls": `panel-${tabId}`, tabIndex: -1, size: size, disabled: disabled, ref: setRef, onKeyDown: onKeyDown, onClick: onClick },
            react_1.default.createElement(LabelWrapper, null,
                react_1.default.createElement(GenericIcon_1.GenericIcon, { icon: icon, rawContent: iconRawContent }),
                label))));
}
const LabelWrapper = styled_components_1.default.div `
  display: flex;
  align-items: center;
  gap: 4px;
  --icon-width: var(--md-tabs-icon-size);
  --icon-height: var(--md-tabs-icon-size);
`;
exports.Tab = (0, styled_components_1.default)(TabComponent) ``;
//# sourceMappingURL=Tab.js.map