brandeur-primitives/dist/components/createText.js

Primitive components for brandeur

var _excluded = ["variant", "color", "weight", "decoration", "size", "height", "children", "style"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
import React, { forwardRef } from 'react';
function getVariantStyle() {
  var typography = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  var variant = arguments.length > 1 ? arguments[1] : undefined;
  return function getPropertyStyle(property) {
    var responsiveVariant = [].concat(variant);
    return responsiveVariant.map(function (variant) {
      var theme = typography === null || typography === void 0 ? void 0 : typography[variant];
      if (theme) {
        if (theme.hasOwnProperty(property)) {
          return theme[property];
        }
        return 'inherit';
      }
    });
  };
}
export default function createText(_ref, typography) {
  var El = _ref.El;
  return /*#__PURE__*/forwardRef(function Text(_ref2, ref) {
    var variant = _ref2.variant,
      color = _ref2.color,
      weight = _ref2.weight,
      decoration = _ref2.decoration,
      size = _ref2.size,
      height = _ref2.height,
      children = _ref2.children,
      style = _ref2.style,
      props = _objectWithoutProperties(_ref2, _excluded);
    var getPropertyStyle = getVariantStyle(typography, variant);
    return /*#__PURE__*/React.createElement(El, _extends({
      ref: ref
    }, props, {
      style: [{
        '--tehlu_text-size': size || getPropertyStyle('fontSize'),
        fontFamily: getPropertyStyle('fontFamily'),
        fontVariant: getPropertyStyle('fontVariant'),
        fontStretch: getPropertyStyle('fontStretch'),
        color: color || getPropertyStyle('color'),
        fontWeight: weight || getPropertyStyle('fontWeight'),
        textDecoration: decoration || getPropertyStyle('textDecoration'),
        lineHeight: height || getPropertyStyle('lineHeight'),
        display: 'var(--tehlu_text-inner-display, block)',
        fontSize: 'var(--tehlu_text-size, 1rem)'
      }, style]
    }), /*#__PURE__*/React.createElement("span", {
      style: {
        display: 'contents',
        '--tehlu_text-inner-display': 'inline-block'
      }
    }, children));
  });
}