@vimeo/iris/components/Tabs/NavItem.esm.js

Vimeo Design System

import { a as __makeTemplateObject, b as __rest, c as __assign } from '../../tslib.es6-7f0e734f.js';
import React__default, { useContext } from 'react';
import styled, { ThemeContext } from 'styled-components';
import { rem, rgba } from 'polished';
import { Button } from '../Button/Button.esm.js';
import { themes } from '../../themes/index.esm.js';
import { black } from '../../color/colors.esm.js';
import '../Button/Button.style.esm.js';
import '../Button/Button.config.esm.js';
import '../Button/FeaturedIcon.esm.js';
import '../../tokens/core.esm.js';
import '../../tokens/color/index.esm.js';
import '../../tokens/color/background/background.esm.js';
import '../../tokens/util/readToken.esm.js';
import '../../tokens/util/clamp.esm.js';
import '../../tokens/color/format/format.esm.js';
import '../../tokens/color/format/primary.esm.js';
import '../../tokens/color/format/secondary.esm.js';
import '../../tokens/color/format/tertiary.esm.js';
import '../../tokens/color/rainbow/rainbow.esm.js';
import '../../tokens/color/rainbow/conic/index.esm.js';
import '../../tokens/color/rainbow/conic/sm.esm.js';
import '../../tokens/color/rainbow/conic/xl.esm.js';
import '../../tokens/color/rainbow/linear/index.esm.js';
import '../../tokens/color/rainbow/linear/sm.esm.js';
import '../../tokens/color/rainbow/linear/xl.esm.js';
import '../../tokens/color/livestream/livestream.esm.js';
import '../../tokens/color/status/status.esm.js';
import '../../tokens/color/status/caution.esm.js';
import '../../tokens/color/status/negative.esm.js';
import '../../tokens/color/status/positive.esm.js';
import '../../tokens/color/stroke/stroke.esm.js';
import '../../tokens/color/surface/surface.esm.js';
import '../../tokens/color/text/text.esm.js';
import '../../tokens/util/round.esm.js';
import '../../tokens/color/upsell/upsell.esm.js';
import '../../tokens/color/upsell/sm.esm.js';
import '../../tokens/color/upsell/xl.esm.js';
import '../../tokens/color/upsell/new.esm.js';
import '../../tokens/edge/edge.esm.js';
import '../../tokens/space/space.esm.js';
import '../../tokens/typography/index.esm.js';
import '../../tokens/typography/size/size.esm.js';
import '../LoaderCircular/LoaderCircular.esm.js';
import '../LoaderCircular/LoaderCircular.style.esm.js';
import '../../utils/HOCs/withIris.esm.js';
import '../../utils/hooks/useDeprecate.esm.js';
import '../../utils/general/mergeReactRefs.esm.js';
import '../../utils/css.esm.js';

function NavItem(_a) {
    var format = _a.format, index = _a.index, label = _a.label, selected = _a.selected, variant = _a.variant, props = __rest(_a, ["format", "index", "label", "selected", "variant"]);
    var id = 'tab' + index;
    props = __assign({ ariaSelected: selected, children: label, element: 'a', href: '#' + id, id: id, onClick: function (event) { return event.preventDefault(); }, size: 'md', target: '_self' }, props);
    return variant === 'inlay' ? (React__default.createElement(InlayButton, __assign({ selected: selected }, props))) : (React__default.createElement(Button, __assign({ format: format, variant: "minimalTransparent" }, props)));
}
function InlayButton(_a) {
    var selected = _a.selected, props = __rest(_a, ["selected"]);
    var theme = useContext(ThemeContext);
    return (React__default.createElement(InlayButtonStyled, __assign({ format: "basic", selected: selected, theme: selected ? invertTheme(theme) : theme, variant: selected ? 'solid' : 'minimalTransparent' }, props)));
}
var InlayButtonStyled = styled(Button)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: calc(100% - 0.667rem);\n  margin: 0 0.334rem;\n  box-shadow: ", ";\n"], ["\n  width: calc(100% - 0.667rem);\n  margin: 0 0.334rem;\n  box-shadow: ", ";\n"])), function (p) {
    return p.selected
        ? "0 ".concat(rem(3), " ").concat(rem(6), " 0 ").concat(rgba(black, 0.125))
        : 'none';
});
var invertTheme = function (_a) {
    var name = _a.name;
    if (name === 'dark')
        return themes.light;
    if (name === 'light')
        return themes.dark;
};
var templateObject_1;

export { NavItem };