@tra-tech/react-native-kitra/lib/commonjs/core/typography/typography.js

UI kit for React Native

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.defaultTypography = exports.TypographyProvider = exports.TypographyContext = void 0;
var _react = require("react");
const TypographyContext = /*#__PURE__*/(0, _react.createContext)({});
exports.TypographyContext = TypographyContext;
const TypographyProvider = _ref => {
  let {
    children
  } = _ref;
  const [typography, setTypography] = (0, _react.useState)(defaultTypography);
  function updateTypography(newTypography) {
    const otherProperties = Object.keys(newTypography).filter(key => !key.includes('body') && !key.includes('heading')).reduce((cur, key) => Object.assign(cur, {
      [key]: newTypography === null || newTypography === void 0 ? void 0 : newTypography[key]
    }), {});
    setTypography(prev => ({
      ...prev,
      ...otherProperties,
      body: {
        ...prev.body,
        ...(newTypography === null || newTypography === void 0 ? void 0 : newTypography.body)
      },
      heading: {
        ...prev.heading,
        ...(newTypography === null || newTypography === void 0 ? void 0 : newTypography.heading)
      }
    }));
  }
  const contextValue = (0, _react.useMemo)(() => ({
    updateTypography,
    typography
  }), [typography]);
  return /*#__PURE__*/React.createElement(TypographyContext.Provider, {
    value: contextValue
  }, children);
};
exports.TypographyProvider = TypographyProvider;
const defaultTypography = {
  heading: {
    h1: {
      fontSize: 30,
      lineHeight: 45,
      fontFamily: 'Poppins-Medium'
    },
    h2: {
      fontSize: 28,
      lineHeight: 42,
      fontFamily: 'Poppins-Medium'
    },
    h3: {
      fontSize: 23,
      lineHeight: 35,
      fontFamily: 'Poppins-Medium'
    },
    h4: {
      fontSize: 19,
      lineHeight: 29,
      fontFamily: 'Poppins-Medium'
    },
    h5: {
      fontSize: 16,
      lineHeight: 25,
      fontFamily: 'Poppins-Medium'
    }
  },
  body: {
    regular: {
      fontSize: 14,
      lineHeight: 16,
      fontFamily: 'Poppins-Regular'
    },
    sregular: {
      fontSize: 12,
      lineHeight: 16,
      fontFamily: 'Poppins-Regular'
    },
    xsregular: {
      fontSize: 10,
      lineHeight: 14,
      fontFamily: 'Poppins-Regular'
    },
    xxsregular: {
      fontSize: 8,
      lineHeight: 12,
      fontFamily: 'Poppins-Regular'
    },
    medium: {
      fontSize: 14,
      lineHeight: 21,
      fontFamily: 'Poppins-Medium'
    },
    smedium: {
      fontSize: 12,
      lineHeight: 18,
      fontFamily: 'Poppins-Medium'
    },
    xsmedium: {
      fontSize: 10,
      lineHeight: 16,
      fontFamily: 'Poppins-Medium'
    },
    xxsmedium: {
      fontSize: 8,
      lineHeight: 12,
      fontFamily: 'Poppins-Medium'
    }
  }
};
exports.defaultTypography = defaultTypography;
//# sourceMappingURL=typography.js.map