@whitemordred/react-native-bootstrap5/lib/components/Typography.js

A complete React Native library that replicates Bootstrap 5.3 with 100% feature parity, full theming support, CSS variables, and dark/light mode

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TextDark = exports.TextLight = exports.TextInfo = exports.TextWarning = exports.TextDanger = exports.TextSuccess = exports.TextSecondary = exports.TextPrimary = exports.TextMuted = exports.P = exports.Small = exports.Mark = exports.Pre = exports.Code = exports.Blockquote = exports.Lead = exports.Display = exports.Heading = exports.H6 = exports.H5 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = void 0;
const react_1 = __importDefault(require("react"));
const react_native_1 = require("react-native");
const ThemeProvider_1 = require("../theme/ThemeProvider");
const H1 = ({ children, style, color }) => {
    return <exports.Heading level={1} children={children} style={style} color={color}/>;
};
exports.H1 = H1;
const H2 = ({ children, style, color }) => {
    return <exports.Heading level={2} children={children} style={style} color={color}/>;
};
exports.H2 = H2;
const H3 = ({ children, style, color }) => {
    return <exports.Heading level={3} children={children} style={style} color={color}/>;
};
exports.H3 = H3;
const H4 = ({ children, style, color }) => {
    return <exports.Heading level={4} children={children} style={style} color={color}/>;
};
exports.H4 = H4;
const H5 = ({ children, style, color }) => {
    return <exports.Heading level={5} children={children} style={style} color={color}/>;
};
exports.H5 = H5;
const H6 = ({ children, style, color }) => {
    return <exports.Heading level={6} children={children} style={style} color={color}/>;
};
exports.H6 = H6;
const Heading = ({ level, children, style, color }) => {
    const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
    const getHeadingStyle = () => {
        const fontSizes = {
            1: 32,
            2: 28,
            3: 24,
            4: 20,
            5: 18,
            6: 16,
        };
        const fontWeights = {
            1: '700',
            2: '600',
            3: '600',
            4: '600',
            5: '600',
            6: '600',
        };
        return {
            fontSize: fontSizes[level],
            fontWeight: fontWeights[level],
            color: color || (currentColors === null || currentColors === void 0 ? void 0 : currentColors.textPrimary) || (currentColors === null || currentColors === void 0 ? void 0 : currentColors.dark),
            marginBottom: theme.spacing[2],
        };
    };
    return (<react_native_1.Text style={[getHeadingStyle(), style]}>
      {children}
    </react_native_1.Text>);
};
exports.Heading = Heading;
const Display = ({ level, children, style }) => {
    const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
    const getDisplayStyle = () => {
        const fontSizes = {
            1: 80,
            2: 72,
            3: 64,
            4: 56,
            5: 48,
            6: 40,
        };
        return {
            fontSize: fontSizes[level],
            fontWeight: '300',
            color: (currentColors === null || currentColors === void 0 ? void 0 : currentColors.textPrimary) || (currentColors === null || currentColors === void 0 ? void 0 : currentColors.dark),
            lineHeight: fontSizes[level] * 1.2,
        };
    };
    return (<react_native_1.Text style={[getDisplayStyle(), style]}>
      {children}
    </react_native_1.Text>);
};
exports.Display = Display;
const Lead = ({ children, style }) => {
    const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
    return (<react_native_1.Text style={[styles.lead, { color: (currentColors === null || currentColors === void 0 ? void 0 : currentColors.textPrimary) || (currentColors === null || currentColors === void 0 ? void 0 : currentColors.dark) }, style]}>
      {children}
    </react_native_1.Text>);
};
exports.Lead = Lead;
const Blockquote = ({ children, style, textStyle, footer }) => {
    const { theme } = (0, ThemeProvider_1.useTheme)();
    return (<react_native_1.View style={[styles.blockquote, { borderLeftColor: theme.colors.gray[300] }, style]}>
      <react_native_1.Text style={[styles.blockquoteText, { color: theme.colors.dark }, textStyle]}>
        {children}
      </react_native_1.Text>
      {footer && (<react_native_1.Text style={[styles.blockquoteFooter, { color: theme.colors.gray[600] }]}>
          — {footer}
        </react_native_1.Text>)}
    </react_native_1.View>);
};
exports.Blockquote = Blockquote;
const Code = ({ children, style, inline = true }) => {
    const { theme } = (0, ThemeProvider_1.useTheme)();
    const codeStyle = inline ? styles.inlineCode : styles.blockCode;
    return (<react_native_1.Text style={[
            codeStyle,
            {
                backgroundColor: theme.colors.gray[100],
                color: theme.colors.danger,
            },
            style
        ]}>
      {children}
    </react_native_1.Text>);
};
exports.Code = Code;
const Pre = ({ children, style, textStyle }) => {
    const { theme } = (0, ThemeProvider_1.useTheme)();
    return (<react_native_1.View style={[styles.pre, { backgroundColor: theme.colors.gray[100] }, style]}>
      <react_native_1.Text style={[styles.preText, { color: theme.colors.dark }, textStyle]}>
        {children}
      </react_native_1.Text>
    </react_native_1.View>);
};
exports.Pre = Pre;
const Mark = ({ children, style }) => {
    return (<react_native_1.Text style={[styles.mark, style]}>
      {children}
    </react_native_1.Text>);
};
exports.Mark = Mark;
const Small = ({ children, style }) => {
    const { theme } = (0, ThemeProvider_1.useTheme)();
    return (<react_native_1.Text style={[styles.small, { color: theme.colors.gray[600] }, style]}>
      {children}
    </react_native_1.Text>);
};
exports.Small = Small;
const P = ({ children, style, lead = false }) => {
    const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
    const paragraphStyle = {
        fontSize: lead ? 20 : theme.typography.fontSizes.base,
        lineHeight: lead ? 30 : 24,
        color: (currentColors === null || currentColors === void 0 ? void 0 : currentColors.textPrimary) || (currentColors === null || currentColors === void 0 ? void 0 : currentColors.dark),
        marginBottom: theme.spacing[3],
    };
    return (<react_native_1.Text style={[paragraphStyle, style]}>
      {children}
    </react_native_1.Text>);
};
exports.P = P;
const TextMuted = ({ children, style }) => {
    const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
    return <react_native_1.Text style={[{ color: (currentColors === null || currentColors === void 0 ? void 0 : currentColors.textSecondary) || theme.colors.gray[600] }, style]}>{children}</react_native_1.Text>;
};
exports.TextMuted = TextMuted;
const TextPrimary = ({ children, style }) => {
    const { currentColors } = (0, ThemeProvider_1.useTheme)();
    return <react_native_1.Text style={[{ color: currentColors === null || currentColors === void 0 ? void 0 : currentColors.primary }, style]}>{children}</react_native_1.Text>;
};
exports.TextPrimary = TextPrimary;
const TextSecondary = ({ children, style }) => {
    const { currentColors } = (0, ThemeProvider_1.useTheme)();
    return <react_native_1.Text style={[{ color: currentColors === null || currentColors === void 0 ? void 0 : currentColors.secondary }, style]}>{children}</react_native_1.Text>;
};
exports.TextSecondary = TextSecondary;
const TextSuccess = ({ children, style }) => {
    const { currentColors } = (0, ThemeProvider_1.useTheme)();
    return <react_native_1.Text style={[{ color: currentColors === null || currentColors === void 0 ? void 0 : currentColors.success }, style]}>{children}</react_native_1.Text>;
};
exports.TextSuccess = TextSuccess;
const TextDanger = ({ children, style }) => {
    const { currentColors } = (0, ThemeProvider_1.useTheme)();
    return <react_native_1.Text style={[{ color: currentColors === null || currentColors === void 0 ? void 0 : currentColors.danger }, style]}>{children}</react_native_1.Text>;
};
exports.TextDanger = TextDanger;
const TextWarning = ({ children, style }) => {
    const { currentColors } = (0, ThemeProvider_1.useTheme)();
    return <react_native_1.Text style={[{ color: currentColors === null || currentColors === void 0 ? void 0 : currentColors.warning }, style]}>{children}</react_native_1.Text>;
};
exports.TextWarning = TextWarning;
const TextInfo = ({ children, style }) => {
    const { currentColors } = (0, ThemeProvider_1.useTheme)();
    return <react_native_1.Text style={[{ color: currentColors === null || currentColors === void 0 ? void 0 : currentColors.info }, style]}>{children}</react_native_1.Text>;
};
exports.TextInfo = TextInfo;
const TextLight = ({ children, style }) => {
    const { currentColors } = (0, ThemeProvider_1.useTheme)();
    return <react_native_1.Text style={[{ color: currentColors === null || currentColors === void 0 ? void 0 : currentColors.light }, style]}>{children}</react_native_1.Text>;
};
exports.TextLight = TextLight;
const TextDark = ({ children, style }) => {
    const { currentColors } = (0, ThemeProvider_1.useTheme)();
    return <react_native_1.Text style={[{ color: currentColors === null || currentColors === void 0 ? void 0 : currentColors.dark }, style]}>{children}</react_native_1.Text>;
};
exports.TextDark = TextDark;
const styles = react_native_1.StyleSheet.create({
    lead: {
        fontSize: 20,
        fontWeight: '300',
        lineHeight: 30,
    },
    blockquote: {
        borderLeftWidth: 4,
        paddingLeft: 16,
        marginVertical: 16,
    },
    blockquoteText: {
        fontSize: 18,
        lineHeight: 28,
        fontStyle: 'italic',
    },
    blockquoteFooter: {
        fontSize: 14,
        marginTop: 8,
    },
    inlineCode: {
        fontSize: 14,
        fontFamily: 'monospace',
        paddingHorizontal: 4,
        paddingVertical: 2,
        borderRadius: 3,
    },
    blockCode: {
        fontSize: 14,
        fontFamily: 'monospace',
        padding: 8,
        borderRadius: 4,
    },
    pre: {
        padding: 16,
        borderRadius: 4,
        marginVertical: 8,
    },
    preText: {
        fontSize: 14,
        fontFamily: 'monospace',
        lineHeight: 20,
    },
    mark: {
        backgroundColor: '#fff3cd',
        padding: 2,
    },
    small: {
        fontSize: 12,
    },
});
exports.default = {
    H1: exports.H1, H2: exports.H2, H3: exports.H3, H4: exports.H4, H5: exports.H5, H6: exports.H6,
    Heading: exports.Heading,
    Display: exports.Display,
    Lead: exports.Lead,
    Blockquote: exports.Blockquote,
    Code: exports.Code,
    Pre: exports.Pre,
    Mark: exports.Mark,
    Small: exports.Small,
    TextMuted: exports.TextMuted,
    TextPrimary: exports.TextPrimary,
    TextSecondary: exports.TextSecondary,
    TextSuccess: exports.TextSuccess,
    TextDanger: exports.TextDanger,
    TextWarning: exports.TextWarning,
    TextInfo: exports.TextInfo,
    TextLight: exports.TextLight,
    TextDark: exports.TextDark,
};