@geezee/react-ui/esm/tabs/tabs-nav.js

Modern and minimalist React UI library.

import _JSXStyle from "styled-jsx/style";
import React, { useMemo } from 'react';
import { defaultGetColor } from './style';
import useTheme from '../styles/use-theme';

var Nav = function Nav(_ref) {
  var label = _ref.label,
      variant = _ref.variant,
      disabled = _ref.disabled,
      active = _ref.active;

  var _useTheme = useTheme(),
      palette = _useTheme.palette,
      layout = _useTheme.layout,
      expressiveness = _useTheme.expressiveness;

  var colors = useMemo(function () {
    return defaultGetColor(palette, variant, disabled, active);
  }, [variant, disabled, active]);
  return /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["1946088266", [disabled ? 'not-allowed' : '', active ? '500' : '400', layout.gapHalf, layout.gap, expressiveness.R2, expressiveness.R2, colors.color, colors.bgColor, colors.hoverColor, colors.hoverBgColor, palette.cTheme5, active ? '1' : '0', active ? '1' : '0.75']]]) + " " + "nav"
  }, /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["1946088266", [disabled ? 'not-allowed' : '', active ? '500' : '400', layout.gapHalf, layout.gap, expressiveness.R2, expressiveness.R2, colors.color, colors.bgColor, colors.hoverColor, colors.hoverBgColor, palette.cTheme5, active ? '1' : '0', active ? '1' : '0.75']]]) + " " + "label"
  }, label), variant === 'line' ? /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["1946088266", [disabled ? 'not-allowed' : '', active ? '500' : '400', layout.gapHalf, layout.gap, expressiveness.R2, expressiveness.R2, colors.color, colors.bgColor, colors.hoverColor, colors.hoverBgColor, palette.cTheme5, active ? '1' : '0', active ? '1' : '0.75']]]) + " " + "bottom"
  }) : null, /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "1946088266",
    dynamic: [disabled ? 'not-allowed' : '', active ? '500' : '400', layout.gapHalf, layout.gap, expressiveness.R2, expressiveness.R2, colors.color, colors.bgColor, colors.hoverColor, colors.hoverBgColor, palette.cTheme5, active ? '1' : '0', active ? '1' : '0.75']
  }, ".nav.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:relative;}.label.__jsx-style-dynamic-selector{cursor:".concat(disabled ? 'not-allowed' : '', ";font-weight:").concat(active ? '500' : '400', ";white-space:nowrap;line-height:22px;padding:").concat(layout.gapHalf, " ").concat(layout.gap, ";border-radius:").concat(expressiveness.R2, " ").concat(expressiveness.R2, " 0px 0px;text-align:center;color:").concat(colors.color, ";background-color:").concat(colors.bgColor, ";}.label.__jsx-style-dynamic-selector:hover{color:").concat(colors.hoverColor, ";background-color:").concat(colors.hoverBgColor, ";}.bottom.__jsx-style-dynamic-selector{background-color:").concat(palette.cTheme5, ";-webkit-transition:all 200ms ease;transition:all 200ms ease;opacity:").concat(active ? '1' : '0', ";-webkit-transform:scale(").concat(active ? '1' : '0.75', ");-ms-transform:scale(").concat(active ? '1' : '0.75', ");transform:scale(").concat(active ? '1' : '0.75', ");height:4px;width:100%;}")));
};

export default Nav;