Files
_hublib-web/packages/tach-typography/dist/react/index.js

137 lines
5.2 KiB
JavaScript
Raw Normal View History

import React from 'react';
import { Typography } from 'antd';
import { jsx } from 'react/jsx-runtime';
// src/react/index.tsx
// src/core/classnames.ts
var BASE_CLASS = "tach-typography";
var join = (...parts) => parts.filter(Boolean).join(" ");
var tachTypographyClassName = ({
variant = "Body",
color = "primary",
weight = "normal",
clickable = false,
className
} = {}) => {
return join(
BASE_CLASS,
`${BASE_CLASS}--${variant}`,
`${BASE_CLASS}--color-${color}`,
weight === "bold" && `${BASE_CLASS}--bold`,
clickable && `${BASE_CLASS}--pointer`,
className
);
};
2026-03-31 18:36:20 +03:00
// src/core/markdown.ts
var TOKEN_PREFIX = "TACHMDTOKEN";
var SAFE_HREF_PATTERN = /^(https?:|mailto:|tel:|\/|#)/i;
var escapeHtml = (value) => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
var normalizeMarkdown = (value) => value.replace(/\r\n?/g, "\n");
var sanitizeHref = (value) => {
const href = value.trim();
if (!href || !SAFE_HREF_PATTERN.test(href)) {
return null;
}
return href;
};
var tachTypographyMarkdownToHtml = (markdown) => {
const source = normalizeMarkdown(markdown);
const tokenMap = /* @__PURE__ */ new Map();
let tokenId = 0;
const tokenized = source.replace(/`([^`\n]+)`/g, (_match, code) => {
const token = `${TOKEN_PREFIX}${tokenId++}`;
tokenMap.set(
token,
`<code class="tach-typography__md-code">${escapeHtml(code)}</code>`
);
return token;
}).replace(/\[([^\]\n]+)\]\(([^)\n]+)\)/g, (_match, label, hrefRaw) => {
const token = `${TOKEN_PREFIX}${tokenId++}`;
const href = sanitizeHref(hrefRaw);
if (!href) {
tokenMap.set(token, escapeHtml(label));
return token;
}
tokenMap.set(
token,
`<a class="tach-typography__md-link" href="${escapeHtml(href)}" target="_blank" rel="noopener noreferrer">${escapeHtml(label)}</a>`
);
return token;
});
let html = escapeHtml(tokenized).replace(/\*\*([^*\n]+)\*\*/g, "<strong>$1</strong>").replace(/__([^_\n]+)__/g, "<strong>$1</strong>").replace(/\*([^*\n]+)\*/g, "<em>$1</em>").replace(/_([^_\n]+)_/g, "<em>$1</em>").replace(/~~([^~\n]+)~~/g, "<del>$1</del>").replace(/\n/g, "<br />");
html = html.replace(new RegExp(`${TOKEN_PREFIX}\\d+`, "g"), (token) => tokenMap.get(token) || token);
return html;
};
var createTypographyVariant = (Component, variant) => {
const Variant = React.forwardRef(
2026-03-31 18:36:20 +03:00
({
color = "primary",
weight = "normal",
className,
onClick,
markdownEnabled = false,
children,
...rest
}, ref) => {
const markdownHtml = markdownEnabled && typeof children === "string" ? tachTypographyMarkdownToHtml(children) : void 0;
const renderedChildren = markdownHtml ? /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: markdownHtml } }) : children;
const contentProps = { children: renderedChildren };
return /* @__PURE__ */ jsx(
Component,
{
ref,
className: tachTypographyClassName({
variant,
color,
weight,
className,
clickable: Boolean(onClick)
}),
onClick,
...rest,
...contentProps
}
);
}
);
Variant.displayName = String(variant);
return Variant;
};
var createTypographyComponent = (Component) => ({
LargeTitle: createTypographyVariant(Component, "LargeTitle"),
Title1: createTypographyVariant(Component, "Title1"),
Title2: createTypographyVariant(Component, "Title2"),
Title3: createTypographyVariant(Component, "Title3"),
Headline: createTypographyVariant(Component, "Headline"),
Body: createTypographyVariant(Component, "Body"),
Inputs: createTypographyVariant(Component, "Inputs"),
Subheadline: createTypographyVariant(Component, "Subheadline"),
FootnoteUnderline: createTypographyVariant(Component, "FootnoteUnderline"),
Footnote: createTypographyVariant(Component, "Footnote"),
Caption: createTypographyVariant(Component, "Caption"),
Caption2: createTypographyVariant(Component, "Caption2"),
AccentH1: createTypographyVariant(Component, "AccentH1"),
AccentH2: createTypographyVariant(Component, "AccentH2"),
AccentSubttl: createTypographyVariant(Component, "AccentSubttl"),
AccentSubttl2: createTypographyVariant(Component, "AccentSubttl2"),
AccentCaption: createTypographyVariant(Component, "AccentCaption"),
AccentCaption2: createTypographyVariant(Component, "AccentCaption2"),
AccentRegularM: createTypographyVariant(Component, "AccentRegularM"),
AccentRegularS: createTypographyVariant(Component, "AccentRegularS"),
AccentLargeTtl: createTypographyVariant(Component, "AccentLargeTtl"),
AppMediumBody: createTypographyVariant(Component, "AppMediumBody"),
AppMediumSubtext: createTypographyVariant(Component, "AppMediumSubtext"),
AppMediumSubtextUnderline: createTypographyVariant(Component, "AppMediumSubtextUnderline")
});
var TachTypography = {
Text: createTypographyComponent(Typography.Text),
Paragraph: createTypographyComponent(Typography.Paragraph),
Link: createTypographyComponent(Typography.Link),
Title: createTypographyComponent(Typography.Title)
};
export { TachTypography };
//# sourceMappingURL=index.js.map
//# sourceMappingURL=index.js.map