react-uzprogers-textstyle/dist/TextStyle.js

Reusable text style components for React projects, with built-in support for Tailwind and design tokens.

import { jsx as _jsx } from "react/jsx-runtime";
import { styleMap } from "./textStyleMap";
import clsx from "clsx";
const variantColors = {
    default: "text-black",
    danger: "text-red-600",
    success: "text-green-600",
    warning: "text-yellow-500",
    info: "text-blue-500",
};
function createTextComponent(type, styleMap) {
    return ({ token, variant = "default", className = "", as: Tag = "span", children, }) => {
        const styleGroup = styleMap[type];
        const styles = styleGroup[token];
        if (!styles) {
            console.warn(`[TextStyle.${type}] Unknown token: ${token}`);
            return _jsx(Tag, { className: clsx(className), children: children });
        }
        return (_jsx(Tag, { className: clsx(styles.mobile, styles.tablet, styles.web, variantColors[variant], className), children: children }));
    };
}
function createTextStyle(customStyleMap) {
    const defaultStyleMap = customStyleMap !== null && customStyleMap !== void 0 ? customStyleMap : styleMap;
    return {
        Display: createTextComponent("display", defaultStyleMap),
        Heading: createTextComponent("heading", defaultStyleMap),
        Body: createTextComponent("body", defaultStyleMap),
        Button: createTextComponent("button", defaultStyleMap),
        Caption: createTextComponent("caption", defaultStyleMap),
    };
}
const TextStyle = createTextStyle();
export { createTextStyle, TextStyle };
export default TextStyle;