HUB/_hublib-web
18
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: Монорепо с общими пакетами

Browse Source
This commit is contained in:
Stanislav Ulegin
2026-03-04 16:31:57 +03:00
parent 8f2c799235
commit 915c56351b
420 changed files with 13403 additions and 7071 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/tach-typography/.storybook/main.ts Normal file
View File

@@ -0,0 +1,22 @@
import type { StorybookConfig } from "@storybook/react-vite";
const config: StorybookConfig = {
stories: ["../src/**/*.stories.@(ts|tsx)"],
addons: [
"@storybook/addon-essentials",
"@storybook/addon-interactions",
"@storybook/addon-a11y",
],
framework: {
name: "@storybook/react-vite",
options: {},
},
docs: {
autodocs: "tag",
},
core: {
disableTelemetry: true,
},
};
export default config;

90
packages/tach-typography/.storybook/preview.css Normal file
View File

@@ -0,0 +1,90 @@
:root {
--Text-Primary: #0f172a;
--Text-Secondary: #334155;
--Text-Tertiary: #64748b;
--Text-Quaternary: #94a3b8;
--System-HashtagsInPost: #2563eb;
--Default-White: #ffffff;
--Default-Dark: #020617;
--System-Alert: #dc2626;
--Accent-Malahit: #16a34a;
--System-Attantion: #d97706;
}
body {
font-family: Inter, "Segoe UI", sans-serif;
}
.sb-show-main {
padding: 24px;
}
.tach-story-surface {
min-width: 320px;
max-width: 920px;
padding: 20px;
border-radius: 14px;
border: 1px solid #dbe1ea;
background: #ffffff;
}
.tach-story-stack {
display: flex;
flex-direction: column;
gap: 12px;
}
.tach-story-grid {
display: grid;
gap: 10px;
}
.tach-story-grid--colors {
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.tach-story-row {
display: grid;
gap: 12px;
grid-template-columns: 220px minmax(0, 1fr);
align-items: center;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid #e2e8f0;
background: #fff;
}
.tach-story-label {
color: #475569;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 12px;
}
.tach-story-token-list {
margin: 0;
padding-left: 18px;
color: #334155;
}
.tach-story-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.tach-story-table th,
.tach-story-table td {
padding: 8px 10px;
border: 1px solid #e2e8f0;
text-align: left;
}
.tach-story-table thead {
background: #f8fafc;
}
@media (max-width: 720px) {
.tach-story-row {
grid-template-columns: 1fr;
}
}

27
packages/tach-typography/.storybook/preview.ts Normal file
View File

@@ -0,0 +1,27 @@
import type { Preview } from "@storybook/react";
import "antd/dist/reset.css";
import "../src/styles/tach-typography.css";
import "./preview.css";
const preview: Preview = {
parameters: {
layout: "centered",
controls: {
expanded: true,
sort: "requiredFirst",
},
actions: {
argTypesRegex: "^on[A-Z].*",
},
backgrounds: {
default: "surface",
values: [
{ name: "surface", value: "#F5F7FB" },
{ name: "dark", value: "#0F172A" },
],
},
},
};
export default preview;

98
packages/tach-typography/README.md Normal file
View File

@@ -0,0 +1,98 @@
# @hublib-web/tach-typography
Typography package with shared tokens and framework adapters:
- `react` adapter based on `antd/Typography`
- `angular` adapter based on `ng-zorro-antd/typography`
## Install from Git (SSH tag)
```bash
yarn add "@hublib-web/tach-typography@git+ssh://git@github.com/ORG/REPO.git#workspace=@hublib-web/tach-typography&tag=tach-typography-v0.1.0"
```
## Install inside this monorepo
```bash
yarn add @hublib-web/tach-typography
```
## Release this package
1. Bump `version` in `packages/tach-typography/package.json`.
2. Build package artifacts:
```bash
yarn workspace @hublib-web/tach-typography build
```
3. Commit release files:
```bash
git add packages/tach-typography/package.json packages/tach-typography/dist
git commit -m "release(tach-typography): v0.1.0"
```
4. Create and push tag:
```bash
git tag -a tach-typography-v0.1.0 -m "@hublib-web/tach-typography v0.1.0"
git push origin main --follow-tags
```
Detailed docs:
- [Release policy](../../docs/release-policy.md)
- [Git installation](../../docs/git-installation.md)
## React usage (Ant Design)
```tsx
import "@hublib-web/tach-typography/styles.css";
import { TachTypography } from "@hublib-web/tach-typography/react";
export const Example = () => (
<TachTypography.Text.Body color="link" weight="bold" ellipsis={{ rows: 1 }}>
Hello from React + AntD
</TachTypography.Text.Body>
);
```
## Angular usage (NG-ZORRO)
```ts
import { Component } from "@angular/core";
import { TachTypographyDirective, TachTypographyNzModule } from "@hublib-web/tach-typography/angular";
@Component({
selector: "app-example",
standalone: true,
imports: [TachTypographyNzModule, TachTypographyDirective],
template: `
<span
nz-typography
tachTypography
tachTypography="Body"
tachTypographyColor="link"
tachTypographyWeight="bold"
>
Hello from Angular + NG-ZORRO
</span>
`,
})
export class ExampleComponent {}
```
## Storybook (dev/design system)
Run from repository root:
```bash
yarn workspace @hublib-web/tach-typography storybook
```
Build static Storybook:
```bash
yarn workspace @hublib-web/tach-typography storybook:build
```

204
packages/tach-typography/dist/angular/index.cjs vendored Normal file
View File

@@ -0,0 +1,204 @@
'use strict';
var core = require('@angular/core');
var typography = require('ng-zorro-antd/typography');
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
var __typeError = (msg) => {
throw TypeError(msg);
};
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
var __decoratorStart = (base) => [, , , __create(null)];
var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
var __runInitializers = (array, flags, self, value) => {
for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
return value;
};
var __decorateElement = (array, flags, name, decorators, target, extra) => {
var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
return __privateGet(this, extra);
}, set [name](x) {
return __privateSet(this, extra, x);
} }, name));
k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
for (var i = decorators.length - 1; i >= 0; i--) {
ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
if (k) {
ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
}
it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
else if (typeof it !== "object" || it === null) __typeError("Object expected");
else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
}
return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
};
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
// 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
);
};
var tachTypographyClassList = (options = {}) => {
return tachTypographyClassName(options).split(" ").filter(Boolean);
};
// src/core/ellipsis.ts
var tachTypographyEllipsisStyle = (ellipsis) => {
if (!ellipsis) {
return void 0;
}
const rows = typeof ellipsis === "object" ? ellipsis.rows ?? 1 : 1;
return {
overflow: "hidden",
textOverflow: "ellipsis",
display: "-webkit-box",
WebkitBoxOrient: "vertical",
WebkitLineClamp: rows
};
};
// src/angular/index.ts
var camelToKebab = (value) => value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
var toCssProperty = (styleKey) => {
if (styleKey.startsWith("Webkit")) {
return `-webkit-${camelToKebab(styleKey.slice(6))}`;
}
return camelToKebab(styleKey);
};
var tachAngularTypographyClassName = (options = {}) => {
return tachTypographyClassName(options);
};
var tachAngularTypographyClassList = (options = {}) => {
return tachTypographyClassList(options);
};
var tachAngularTypographyStyles = (ellipsis, preserveStyle = {}) => {
const ellipsisStyle = tachTypographyEllipsisStyle(ellipsis);
if (!ellipsisStyle) {
return preserveStyle;
}
return {
...ellipsisStyle,
...preserveStyle
};
};
var _tachTypographyEllipsis_dec, _tachTypographyClassName_dec, _tachTypographyClickable_dec, _tachTypographyWeight_dec, _tachTypographyColor_dec, _tachTypographyVariant_dec, _tachTypography_dec, _TachTypographyDirective_decorators, _init;
_TachTypographyDirective_decorators = [core.Directive({
selector: "[tachTypography]",
standalone: true
})], _tachTypography_dec = [core.Input()], _tachTypographyVariant_dec = [core.Input()], _tachTypographyColor_dec = [core.Input()], _tachTypographyWeight_dec = [core.Input()], _tachTypographyClickable_dec = [core.Input()], _tachTypographyClassName_dec = [core.Input()], _tachTypographyEllipsis_dec = [core.Input()];
exports.TachTypographyDirective = class TachTypographyDirective {
constructor(elementRef, renderer) {
this.elementRef = elementRef;
this.renderer = renderer;
__publicField(this, "tachTypography", __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
__publicField(this, "tachTypographyVariant", __runInitializers(_init, 12, this, "Body")), __runInitializers(_init, 15, this);
__publicField(this, "tachTypographyColor", __runInitializers(_init, 16, this, "primary")), __runInitializers(_init, 19, this);
__publicField(this, "tachTypographyWeight", __runInitializers(_init, 20, this, "normal")), __runInitializers(_init, 23, this);
__publicField(this, "tachTypographyClickable", __runInitializers(_init, 24, this, false)), __runInitializers(_init, 27, this);
__publicField(this, "tachTypographyClassName", __runInitializers(_init, 28, this)), __runInitializers(_init, 31, this);
__publicField(this, "tachTypographyEllipsis", __runInitializers(_init, 32, this)), __runInitializers(_init, 35, this);
__publicField(this, "appliedClasses", /* @__PURE__ */ new Set());
__publicField(this, "appliedStyleProperties", /* @__PURE__ */ new Set());
}
ngOnChanges(_changes) {
this.syncClasses();
this.syncEllipsisStyles();
}
syncClasses() {
const nextClassList = tachTypographyClassList({
variant: this.tachTypography || this.tachTypographyVariant,
color: this.tachTypographyColor,
weight: this.tachTypographyWeight,
clickable: this.tachTypographyClickable,
className: this.tachTypographyClassName
});
const nextSet = new Set(nextClassList);
for (const className of this.appliedClasses) {
if (!nextSet.has(className)) {
this.renderer.removeClass(this.elementRef.nativeElement, className);
}
}
for (const className of nextSet) {
this.renderer.addClass(this.elementRef.nativeElement, className);
}
this.appliedClasses.clear();
for (const className of nextSet) {
this.appliedClasses.add(className);
}
}
syncEllipsisStyles() {
const nextStyles = tachTypographyEllipsisStyle(this.tachTypographyEllipsis) || {};
const nextStyleKeys = new Set(Object.keys(nextStyles));
for (const styleKey of this.appliedStyleProperties) {
if (!nextStyleKeys.has(styleKey)) {
this.renderer.removeStyle(this.elementRef.nativeElement, toCssProperty(styleKey));
}
}
for (const [styleKey, styleValue] of Object.entries(nextStyles)) {
this.renderer.setStyle(this.elementRef.nativeElement, toCssProperty(styleKey), styleValue);
}
this.appliedStyleProperties.clear();
for (const styleKey of nextStyleKeys) {
this.appliedStyleProperties.add(styleKey);
}
}
};
_init = __decoratorStart();
__decorateElement(_init, 5, "tachTypography", _tachTypography_dec, exports.TachTypographyDirective);
__decorateElement(_init, 5, "tachTypographyVariant", _tachTypographyVariant_dec, exports.TachTypographyDirective);
__decorateElement(_init, 5, "tachTypographyColor", _tachTypographyColor_dec, exports.TachTypographyDirective);
__decorateElement(_init, 5, "tachTypographyWeight", _tachTypographyWeight_dec, exports.TachTypographyDirective);
__decorateElement(_init, 5, "tachTypographyClickable", _tachTypographyClickable_dec, exports.TachTypographyDirective);
__decorateElement(_init, 5, "tachTypographyClassName", _tachTypographyClassName_dec, exports.TachTypographyDirective);
__decorateElement(_init, 5, "tachTypographyEllipsis", _tachTypographyEllipsis_dec, exports.TachTypographyDirective);
exports.TachTypographyDirective = __decorateElement(_init, 0, "TachTypographyDirective", _TachTypographyDirective_decorators, exports.TachTypographyDirective);
__runInitializers(_init, 1, exports.TachTypographyDirective);
var _TachTypographyNzModule_decorators, _init2;
_TachTypographyNzModule_decorators = [core.NgModule({
imports: [typography.NzTypographyModule, exports.TachTypographyDirective],
exports: [typography.NzTypographyModule, exports.TachTypographyDirective]
})];
exports.TachTypographyNzModule = class TachTypographyNzModule {
};
_init2 = __decoratorStart();
exports.TachTypographyNzModule = __decorateElement(_init2, 0, "TachTypographyNzModule", _TachTypographyNzModule_decorators, exports.TachTypographyNzModule);
__runInitializers(_init2, 1, exports.TachTypographyNzModule);
exports.tachAngularTypographyClassList = tachAngularTypographyClassList;
exports.tachAngularTypographyClassName = tachAngularTypographyClassName;
exports.tachAngularTypographyStyles = tachAngularTypographyStyles;
//# sourceMappingURL=index.cjs.map
//# sourceMappingURL=index.cjs.map

1
packages/tach-typography/dist/angular/index.cjs.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

31
packages/tach-typography/dist/angular/index.d.cts vendored Normal file
View File

@@ -0,0 +1,31 @@
import { OnChanges, ElementRef, Renderer2, SimpleChanges } from '@angular/core';
import { T as TypographyClassOptions, d as TypographyRenderOptions, e as TypographyVariant, c as TypographyColor, f as TypographyWeight, E as EllipsisOptions } from '../types-CQyFuLqp.cjs';
type AngularTypographyClassInput = TypographyClassOptions;
interface AngularTypographyRenderOptions extends TypographyRenderOptions {
preserveStyle?: Record<string, string | number>;
}
declare const tachAngularTypographyClassName: (options?: AngularTypographyClassInput) => string;
declare const tachAngularTypographyClassList: (options?: AngularTypographyClassInput) => string[];
declare const tachAngularTypographyStyles: (ellipsis?: EllipsisOptions, preserveStyle?: Record<string, string | number>) => Record<string, string | number>;
declare class TachTypographyDirective implements OnChanges {
private readonly elementRef;
private readonly renderer;
tachTypography: TypographyVariant | "" | undefined;
tachTypographyVariant: TypographyVariant;
tachTypographyColor: TypographyColor;
tachTypographyWeight: TypographyWeight;
tachTypographyClickable: boolean;
tachTypographyClassName: string | undefined;
tachTypographyEllipsis: EllipsisOptions | undefined;
private readonly appliedClasses;
private readonly appliedStyleProperties;
constructor(elementRef: ElementRef<HTMLElement>, renderer: Renderer2);
ngOnChanges(_changes: SimpleChanges): void;
private syncClasses;
private syncEllipsisStyles;
}
declare class TachTypographyNzModule {
}
export { type AngularTypographyClassInput, type AngularTypographyRenderOptions, TachTypographyDirective, TachTypographyNzModule, tachAngularTypographyClassList, tachAngularTypographyClassName, tachAngularTypographyStyles };

31
packages/tach-typography/dist/angular/index.d.ts vendored Normal file
View File

@@ -0,0 +1,31 @@
import { OnChanges, ElementRef, Renderer2, SimpleChanges } from '@angular/core';
import { T as TypographyClassOptions, d as TypographyRenderOptions, e as TypographyVariant, c as TypographyColor, f as TypographyWeight, E as EllipsisOptions } from '../types-CQyFuLqp.js';
type AngularTypographyClassInput = TypographyClassOptions;
interface AngularTypographyRenderOptions extends TypographyRenderOptions {
preserveStyle?: Record<string, string | number>;
}
declare const tachAngularTypographyClassName: (options?: AngularTypographyClassInput) => string;
declare const tachAngularTypographyClassList: (options?: AngularTypographyClassInput) => string[];
declare const tachAngularTypographyStyles: (ellipsis?: EllipsisOptions, preserveStyle?: Record<string, string | number>) => Record<string, string | number>;
declare class TachTypographyDirective implements OnChanges {
private readonly elementRef;
private readonly renderer;
tachTypography: TypographyVariant | "" | undefined;
tachTypographyVariant: TypographyVariant;
tachTypographyColor: TypographyColor;
tachTypographyWeight: TypographyWeight;
tachTypographyClickable: boolean;
tachTypographyClassName: string | undefined;
tachTypographyEllipsis: EllipsisOptions | undefined;
private readonly appliedClasses;
private readonly appliedStyleProperties;
constructor(elementRef: ElementRef<HTMLElement>, renderer: Renderer2);
ngOnChanges(_changes: SimpleChanges): void;
private syncClasses;
private syncEllipsisStyles;
}
declare class TachTypographyNzModule {
}
export { type AngularTypographyClassInput, type AngularTypographyRenderOptions, TachTypographyDirective, TachTypographyNzModule, tachAngularTypographyClassList, tachAngularTypographyClassName, tachAngularTypographyStyles };

200
packages/tach-typography/dist/angular/index.js vendored Normal file
View File

@@ -0,0 +1,200 @@
import { Directive, Input, NgModule } from '@angular/core';
import { NzTypographyModule } from 'ng-zorro-antd/typography';
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
var __typeError = (msg) => {
throw TypeError(msg);
};
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
var __decoratorStart = (base) => [, , , __create(null)];
var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
var __runInitializers = (array, flags, self, value) => {
for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
return value;
};
var __decorateElement = (array, flags, name, decorators, target, extra) => {
var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
return __privateGet(this, extra);
}, set [name](x) {
return __privateSet(this, extra, x);
} }, name));
k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
for (var i = decorators.length - 1; i >= 0; i--) {
ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
if (k) {
ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
}
it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
else if (typeof it !== "object" || it === null) __typeError("Object expected");
else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
}
return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
};
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
// 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
);
};
var tachTypographyClassList = (options = {}) => {
return tachTypographyClassName(options).split(" ").filter(Boolean);
};
// src/core/ellipsis.ts
var tachTypographyEllipsisStyle = (ellipsis) => {
if (!ellipsis) {
return void 0;
}
const rows = typeof ellipsis === "object" ? ellipsis.rows ?? 1 : 1;
return {
overflow: "hidden",
textOverflow: "ellipsis",
display: "-webkit-box",
WebkitBoxOrient: "vertical",
WebkitLineClamp: rows
};
};
// src/angular/index.ts
var camelToKebab = (value) => value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
var toCssProperty = (styleKey) => {
if (styleKey.startsWith("Webkit")) {
return `-webkit-${camelToKebab(styleKey.slice(6))}`;
}
return camelToKebab(styleKey);
};
var tachAngularTypographyClassName = (options = {}) => {
return tachTypographyClassName(options);
};
var tachAngularTypographyClassList = (options = {}) => {
return tachTypographyClassList(options);
};
var tachAngularTypographyStyles = (ellipsis, preserveStyle = {}) => {
const ellipsisStyle = tachTypographyEllipsisStyle(ellipsis);
if (!ellipsisStyle) {
return preserveStyle;
}
return {
...ellipsisStyle,
...preserveStyle
};
};
var _tachTypographyEllipsis_dec, _tachTypographyClassName_dec, _tachTypographyClickable_dec, _tachTypographyWeight_dec, _tachTypographyColor_dec, _tachTypographyVariant_dec, _tachTypography_dec, _TachTypographyDirective_decorators, _init;
_TachTypographyDirective_decorators = [Directive({
selector: "[tachTypography]",
standalone: true
})], _tachTypography_dec = [Input()], _tachTypographyVariant_dec = [Input()], _tachTypographyColor_dec = [Input()], _tachTypographyWeight_dec = [Input()], _tachTypographyClickable_dec = [Input()], _tachTypographyClassName_dec = [Input()], _tachTypographyEllipsis_dec = [Input()];
var TachTypographyDirective = class {
constructor(elementRef, renderer) {
this.elementRef = elementRef;
this.renderer = renderer;
__publicField(this, "tachTypography", __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
__publicField(this, "tachTypographyVariant", __runInitializers(_init, 12, this, "Body")), __runInitializers(_init, 15, this);
__publicField(this, "tachTypographyColor", __runInitializers(_init, 16, this, "primary")), __runInitializers(_init, 19, this);
__publicField(this, "tachTypographyWeight", __runInitializers(_init, 20, this, "normal")), __runInitializers(_init, 23, this);
__publicField(this, "tachTypographyClickable", __runInitializers(_init, 24, this, false)), __runInitializers(_init, 27, this);
__publicField(this, "tachTypographyClassName", __runInitializers(_init, 28, this)), __runInitializers(_init, 31, this);
__publicField(this, "tachTypographyEllipsis", __runInitializers(_init, 32, this)), __runInitializers(_init, 35, this);
__publicField(this, "appliedClasses", /* @__PURE__ */ new Set());
__publicField(this, "appliedStyleProperties", /* @__PURE__ */ new Set());
}
ngOnChanges(_changes) {
this.syncClasses();
this.syncEllipsisStyles();
}
syncClasses() {
const nextClassList = tachTypographyClassList({
variant: this.tachTypography || this.tachTypographyVariant,
color: this.tachTypographyColor,
weight: this.tachTypographyWeight,
clickable: this.tachTypographyClickable,
className: this.tachTypographyClassName
});
const nextSet = new Set(nextClassList);
for (const className of this.appliedClasses) {
if (!nextSet.has(className)) {
this.renderer.removeClass(this.elementRef.nativeElement, className);
}
}
for (const className of nextSet) {
this.renderer.addClass(this.elementRef.nativeElement, className);
}
this.appliedClasses.clear();
for (const className of nextSet) {
this.appliedClasses.add(className);
}
}
syncEllipsisStyles() {
const nextStyles = tachTypographyEllipsisStyle(this.tachTypographyEllipsis) || {};
const nextStyleKeys = new Set(Object.keys(nextStyles));
for (const styleKey of this.appliedStyleProperties) {
if (!nextStyleKeys.has(styleKey)) {
this.renderer.removeStyle(this.elementRef.nativeElement, toCssProperty(styleKey));
}
}
for (const [styleKey, styleValue] of Object.entries(nextStyles)) {
this.renderer.setStyle(this.elementRef.nativeElement, toCssProperty(styleKey), styleValue);
}
this.appliedStyleProperties.clear();
for (const styleKey of nextStyleKeys) {
this.appliedStyleProperties.add(styleKey);
}
}
};
_init = __decoratorStart();
__decorateElement(_init, 5, "tachTypography", _tachTypography_dec, TachTypographyDirective);
__decorateElement(_init, 5, "tachTypographyVariant", _tachTypographyVariant_dec, TachTypographyDirective);
__decorateElement(_init, 5, "tachTypographyColor", _tachTypographyColor_dec, TachTypographyDirective);
__decorateElement(_init, 5, "tachTypographyWeight", _tachTypographyWeight_dec, TachTypographyDirective);
__decorateElement(_init, 5, "tachTypographyClickable", _tachTypographyClickable_dec, TachTypographyDirective);
__decorateElement(_init, 5, "tachTypographyClassName", _tachTypographyClassName_dec, TachTypographyDirective);
__decorateElement(_init, 5, "tachTypographyEllipsis", _tachTypographyEllipsis_dec, TachTypographyDirective);
TachTypographyDirective = __decorateElement(_init, 0, "TachTypographyDirective", _TachTypographyDirective_decorators, TachTypographyDirective);
__runInitializers(_init, 1, TachTypographyDirective);
var _TachTypographyNzModule_decorators, _init2;
_TachTypographyNzModule_decorators = [NgModule({
imports: [NzTypographyModule, TachTypographyDirective],
exports: [NzTypographyModule, TachTypographyDirective]
})];
var TachTypographyNzModule = class {
};
_init2 = __decoratorStart();
TachTypographyNzModule = __decorateElement(_init2, 0, "TachTypographyNzModule", _TachTypographyNzModule_decorators, TachTypographyNzModule);
__runInitializers(_init2, 1, TachTypographyNzModule);
export { TachTypographyDirective, TachTypographyNzModule, tachAngularTypographyClassList, tachAngularTypographyClassName, tachAngularTypographyStyles };
//# sourceMappingURL=index.js.map
//# sourceMappingURL=index.js.map

1
packages/tach-typography/dist/angular/index.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

87
packages/tach-typography/dist/core/index.cjs vendored Normal file
View File

@@ -0,0 +1,87 @@
'use strict';
// src/core/types.ts
var TYPOGRAPHY_VARIANTS = [
"LargeTitle",
"Title1",
"Title2",
"Title3",
"Headline",
"Body",
"Inputs",
"Subheadline",
"FootnoteUnderline",
"Footnote",
"Caption",
"Caption2",
"AccentH1",
"AccentH2",
"AccentSubttl",
"AccentSubttl2",
"AccentCaption",
"AccentCaption2",
"AccentRegularM",
"AccentRegularS",
"AccentLargeTtl",
"AppMediumBody",
"AppMediumSubtext",
"AppMediumSubtextUnderline"
];
var TYPOGRAPHY_COLORS = [
"primary",
"secondary",
"tertiary",
"quaternary",
"link",
"white",
"dark",
"alert",
"malahit",
"attantion"
];
// 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
);
};
var tachTypographyClassList = (options = {}) => {
return tachTypographyClassName(options).split(" ").filter(Boolean);
};
// src/core/ellipsis.ts
var tachTypographyEllipsisStyle = (ellipsis) => {
if (!ellipsis) {
return void 0;
}
const rows = typeof ellipsis === "object" ? ellipsis.rows ?? 1 : 1;
return {
overflow: "hidden",
textOverflow: "ellipsis",
display: "-webkit-box",
WebkitBoxOrient: "vertical",
WebkitLineClamp: rows
};
};
exports.TYPOGRAPHY_COLORS = TYPOGRAPHY_COLORS;
exports.TYPOGRAPHY_VARIANTS = TYPOGRAPHY_VARIANTS;
exports.tachTypographyClassList = tachTypographyClassList;
exports.tachTypographyClassName = tachTypographyClassName;
exports.tachTypographyEllipsisStyle = tachTypographyEllipsisStyle;
//# sourceMappingURL=index.cjs.map
//# sourceMappingURL=index.cjs.map

1
packages/tach-typography/dist/core/index.cjs.map vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["../../src/core/types.ts","../../src/core/classnames.ts","../../src/core/ellipsis.ts"],"names":[],"mappings":";;;AAAO,IAAM,mBAAA,GAAsB;AAAA,EACjC,YAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,aAAA;AAAA,EACA,mBAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,gBAAA;AAAA,EACA,gBAAA;AAAA,EACA,gBAAA;AAAA,EACA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA;AACF;AAEO,IAAM,iBAAA,GAAoB;AAAA,EAC/B,SAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF;;;ACpCA,IAAM,UAAA,GAAa,iBAAA;AAEnB,IAAM,IAAA,GAAO,IAAI,KAAA,KACf,KAAA,CAAM,OAAO,OAAO,CAAA,CAAE,KAAK,GAAG,CAAA;AAEzB,IAAM,0BAA0B,CAAC;AAAA,EACtC,OAAA,GAAU,MAAA;AAAA,EACV,KAAA,GAAQ,SAAA;AAAA,EACR,MAAA,GAAS,QAAA;AAAA,EACT,SAAA,GAAY,KAAA;AAAA,EACZ;AACF,CAAA,GAA4B,EAAC,KAAc;AACzC,EAAA,OAAO,IAAA;AAAA,IACL,UAAA;AAAA,IACA,CAAA,EAAG,UAAU,CAAA,EAAA,EAAK,OAAO,CAAA,CAAA;AAAA,IACzB,CAAA,EAAG,UAAU,CAAA,QAAA,EAAW,KAAK,CAAA,CAAA;AAAA,IAC7B,MAAA,KAAW,MAAA,IAAU,CAAA,EAAG,UAAU,CAAA,MAAA,CAAA;AAAA,IAClC,SAAA,IAAa,GAAG,UAAU,CAAA,SAAA,CAAA;AAAA,IAC1B;AAAA,GACF;AACF;AAEO,IAAM,uBAAA,GAA0B,CAAC,OAAA,GAAkC,EAAC,KAAgB;AACzF,EAAA,OAAO,wBAAwB,OAAO,CAAA,CACnC,MAAM,GAAG,CAAA,CACT,OAAO,OAAO,CAAA;AACnB;;;ACxBO,IAAM,2BAAA,GAA8B,CACzC,QAAA,KAC4B;AAC5B,EAAA,IAAI,CAAC,QAAA,EAAU;AACb,IAAA,OAAO,MAAA;AAAA,EACT;AAEA,EAAA,MAAM,OAAO,OAAO,QAAA,KAAa,QAAA,GAAW,QAAA,CAAS,QAAQ,CAAA,GAAI,CAAA;AAEjE,EAAA,OAAO;AAAA,IACL,QAAA,EAAU,QAAA;AAAA,IACV,YAAA,EAAc,UAAA;AAAA,IACd,OAAA,EAAS,aAAA;AAAA,IACT,eAAA,EAAiB,UAAA;AAAA,IACjB,eAAA,EAAiB;AAAA,GACnB;AACF","file":"index.cjs","sourcesContent":["export const TYPOGRAPHY_VARIANTS = [\n \"LargeTitle\",\n \"Title1\",\n \"Title2\",\n \"Title3\",\n \"Headline\",\n \"Body\",\n \"Inputs\",\n \"Subheadline\",\n \"FootnoteUnderline\",\n \"Footnote\",\n \"Caption\",\n \"Caption2\",\n \"AccentH1\",\n \"AccentH2\",\n \"AccentSubttl\",\n \"AccentSubttl2\",\n \"AccentCaption\",\n \"AccentCaption2\",\n \"AccentRegularM\",\n \"AccentRegularS\",\n \"AccentLargeTtl\",\n \"AppMediumBody\",\n \"AppMediumSubtext\",\n \"AppMediumSubtextUnderline\",\n] as const;\n\nexport const TYPOGRAPHY_COLORS = [\n \"primary\",\n \"secondary\",\n \"tertiary\",\n \"quaternary\",\n \"link\",\n \"white\",\n \"dark\",\n \"alert\",\n \"malahit\",\n \"attantion\",\n] as const;\n\nexport type TypographyVariant = (typeof TYPOGRAPHY_VARIANTS)[number];\nexport type TypographyColor = (typeof TYPOGRAPHY_COLORS)[number];\nexport type TypographyWeight = \"normal\" | \"bold\";\n\nexport interface TypographyClassOptions {\n variant?: TypographyVariant;\n color?: TypographyColor;\n weight?: TypographyWeight;\n clickable?: boolean;\n className?: string | undefined;\n}\n\nexport type EllipsisOptions =\n | boolean\n | {\n rows?: number;\n };\n\nexport interface TypographyRenderOptions extends TypographyClassOptions {\n ellipsis?: EllipsisOptions;\n}\n","import type { TypographyClassOptions } from \"./types\";\n\nconst BASE_CLASS = \"tach-typography\";\n\nconst join = (...parts: Array<string | undefined | null | false>): string =>\n parts.filter(Boolean).join(\" \");\n\nexport const tachTypographyClassName = ({\n variant = \"Body\",\n color = \"primary\",\n weight = \"normal\",\n clickable = false,\n className,\n}: TypographyClassOptions = {}): string => {\n return join(\n BASE_CLASS,\n `${BASE_CLASS}--${variant}`,\n `${BASE_CLASS}--color-${color}`,\n weight === \"bold\" && `${BASE_CLASS}--bold`,\n clickable && `${BASE_CLASS}--pointer`,\n className,\n );\n};\n\nexport const tachTypographyClassList = (options: TypographyClassOptions = {}): string[] => {\n return tachTypographyClassName(options)\n .split(\" \")\n .filter(Boolean);\n};\n","import type { EllipsisOptions } from \"./types\";\n\ntype StyleRecord = Record<string, string | number>;\n\nexport const tachTypographyEllipsisStyle = (\n ellipsis?: EllipsisOptions,\n): StyleRecord | undefined => {\n if (!ellipsis) {\n return undefined;\n }\n\n const rows = typeof ellipsis === \"object\" ? ellipsis.rows ?? 1 : 1;\n\n return {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n display: \"-webkit-box\",\n WebkitBoxOrient: \"vertical\",\n WebkitLineClamp: rows,\n };\n};\n"]}

10
packages/tach-typography/dist/core/index.d.cts vendored Normal file
View File

@@ -0,0 +1,10 @@
import { T as TypographyClassOptions, E as EllipsisOptions } from '../types-CQyFuLqp.cjs';
export { a as TYPOGRAPHY_COLORS, b as TYPOGRAPHY_VARIANTS, c as TypographyColor, d as TypographyRenderOptions, e as TypographyVariant, f as TypographyWeight } from '../types-CQyFuLqp.cjs';
declare const tachTypographyClassName: ({ variant, color, weight, clickable, className, }?: TypographyClassOptions) => string;
declare const tachTypographyClassList: (options?: TypographyClassOptions) => string[];
type StyleRecord = Record<string, string | number>;
declare const tachTypographyEllipsisStyle: (ellipsis?: EllipsisOptions) => StyleRecord | undefined;
export { EllipsisOptions, TypographyClassOptions, tachTypographyClassList, tachTypographyClassName, tachTypographyEllipsisStyle };

10
packages/tach-typography/dist/core/index.d.ts vendored Normal file
View File

@@ -0,0 +1,10 @@
import { T as TypographyClassOptions, E as EllipsisOptions } from '../types-CQyFuLqp.js';
export { a as TYPOGRAPHY_COLORS, b as TYPOGRAPHY_VARIANTS, c as TypographyColor, d as TypographyRenderOptions, e as TypographyVariant, f as TypographyWeight } from '../types-CQyFuLqp.js';
declare const tachTypographyClassName: ({ variant, color, weight, clickable, className, }?: TypographyClassOptions) => string;
declare const tachTypographyClassList: (options?: TypographyClassOptions) => string[];
type StyleRecord = Record<string, string | number>;
declare const tachTypographyEllipsisStyle: (ellipsis?: EllipsisOptions) => StyleRecord | undefined;
export { EllipsisOptions, TypographyClassOptions, tachTypographyClassList, tachTypographyClassName, tachTypographyEllipsisStyle };

81
packages/tach-typography/dist/core/index.js vendored Normal file
View File

@@ -0,0 +1,81 @@
// src/core/types.ts
var TYPOGRAPHY_VARIANTS = [
"LargeTitle",
"Title1",
"Title2",
"Title3",
"Headline",
"Body",
"Inputs",
"Subheadline",
"FootnoteUnderline",
"Footnote",
"Caption",
"Caption2",
"AccentH1",
"AccentH2",
"AccentSubttl",
"AccentSubttl2",
"AccentCaption",
"AccentCaption2",
"AccentRegularM",
"AccentRegularS",
"AccentLargeTtl",
"AppMediumBody",
"AppMediumSubtext",
"AppMediumSubtextUnderline"
];
var TYPOGRAPHY_COLORS = [
"primary",
"secondary",
"tertiary",
"quaternary",
"link",
"white",
"dark",
"alert",
"malahit",
"attantion"
];
// 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
);
};
var tachTypographyClassList = (options = {}) => {
return tachTypographyClassName(options).split(" ").filter(Boolean);
};
// src/core/ellipsis.ts
var tachTypographyEllipsisStyle = (ellipsis) => {
if (!ellipsis) {
return void 0;
}
const rows = typeof ellipsis === "object" ? ellipsis.rows ?? 1 : 1;
return {
overflow: "hidden",
textOverflow: "ellipsis",
display: "-webkit-box",
WebkitBoxOrient: "vertical",
WebkitLineClamp: rows
};
};
export { TYPOGRAPHY_COLORS, TYPOGRAPHY_VARIANTS, tachTypographyClassList, tachTypographyClassName, tachTypographyEllipsisStyle };
//# sourceMappingURL=index.js.map
//# sourceMappingURL=index.js.map

1
packages/tach-typography/dist/core/index.js.map vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["../../src/core/types.ts","../../src/core/classnames.ts","../../src/core/ellipsis.ts"],"names":[],"mappings":";AAAO,IAAM,mBAAA,GAAsB;AAAA,EACjC,YAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,aAAA;AAAA,EACA,mBAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,gBAAA;AAAA,EACA,gBAAA;AAAA,EACA,gBAAA;AAAA,EACA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA;AACF;AAEO,IAAM,iBAAA,GAAoB;AAAA,EAC/B,SAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF;;;ACpCA,IAAM,UAAA,GAAa,iBAAA;AAEnB,IAAM,IAAA,GAAO,IAAI,KAAA,KACf,KAAA,CAAM,OAAO,OAAO,CAAA,CAAE,KAAK,GAAG,CAAA;AAEzB,IAAM,0BAA0B,CAAC;AAAA,EACtC,OAAA,GAAU,MAAA;AAAA,EACV,KAAA,GAAQ,SAAA;AAAA,EACR,MAAA,GAAS,QAAA;AAAA,EACT,SAAA,GAAY,KAAA;AAAA,EACZ;AACF,CAAA,GAA4B,EAAC,KAAc;AACzC,EAAA,OAAO,IAAA;AAAA,IACL,UAAA;AAAA,IACA,CAAA,EAAG,UAAU,CAAA,EAAA,EAAK,OAAO,CAAA,CAAA;AAAA,IACzB,CAAA,EAAG,UAAU,CAAA,QAAA,EAAW,KAAK,CAAA,CAAA;AAAA,IAC7B,MAAA,KAAW,MAAA,IAAU,CAAA,EAAG,UAAU,CAAA,MAAA,CAAA;AAAA,IAClC,SAAA,IAAa,GAAG,UAAU,CAAA,SAAA,CAAA;AAAA,IAC1B;AAAA,GACF;AACF;AAEO,IAAM,uBAAA,GAA0B,CAAC,OAAA,GAAkC,EAAC,KAAgB;AACzF,EAAA,OAAO,wBAAwB,OAAO,CAAA,CACnC,MAAM,GAAG,CAAA,CACT,OAAO,OAAO,CAAA;AACnB;;;ACxBO,IAAM,2BAAA,GAA8B,CACzC,QAAA,KAC4B;AAC5B,EAAA,IAAI,CAAC,QAAA,EAAU;AACb,IAAA,OAAO,MAAA;AAAA,EACT;AAEA,EAAA,MAAM,OAAO,OAAO,QAAA,KAAa,QAAA,GAAW,QAAA,CAAS,QAAQ,CAAA,GAAI,CAAA;AAEjE,EAAA,OAAO;AAAA,IACL,QAAA,EAAU,QAAA;AAAA,IACV,YAAA,EAAc,UAAA;AAAA,IACd,OAAA,EAAS,aAAA;AAAA,IACT,eAAA,EAAiB,UAAA;AAAA,IACjB,eAAA,EAAiB;AAAA,GACnB;AACF","file":"index.js","sourcesContent":["export const TYPOGRAPHY_VARIANTS = [\n \"LargeTitle\",\n \"Title1\",\n \"Title2\",\n \"Title3\",\n \"Headline\",\n \"Body\",\n \"Inputs\",\n \"Subheadline\",\n \"FootnoteUnderline\",\n \"Footnote\",\n \"Caption\",\n \"Caption2\",\n \"AccentH1\",\n \"AccentH2\",\n \"AccentSubttl\",\n \"AccentSubttl2\",\n \"AccentCaption\",\n \"AccentCaption2\",\n \"AccentRegularM\",\n \"AccentRegularS\",\n \"AccentLargeTtl\",\n \"AppMediumBody\",\n \"AppMediumSubtext\",\n \"AppMediumSubtextUnderline\",\n] as const;\n\nexport const TYPOGRAPHY_COLORS = [\n \"primary\",\n \"secondary\",\n \"tertiary\",\n \"quaternary\",\n \"link\",\n \"white\",\n \"dark\",\n \"alert\",\n \"malahit\",\n \"attantion\",\n] as const;\n\nexport type TypographyVariant = (typeof TYPOGRAPHY_VARIANTS)[number];\nexport type TypographyColor = (typeof TYPOGRAPHY_COLORS)[number];\nexport type TypographyWeight = \"normal\" | \"bold\";\n\nexport interface TypographyClassOptions {\n variant?: TypographyVariant;\n color?: TypographyColor;\n weight?: TypographyWeight;\n clickable?: boolean;\n className?: string | undefined;\n}\n\nexport type EllipsisOptions =\n | boolean\n | {\n rows?: number;\n };\n\nexport interface TypographyRenderOptions extends TypographyClassOptions {\n ellipsis?: EllipsisOptions;\n}\n","import type { TypographyClassOptions } from \"./types\";\n\nconst BASE_CLASS = \"tach-typography\";\n\nconst join = (...parts: Array<string | undefined | null | false>): string =>\n parts.filter(Boolean).join(\" \");\n\nexport const tachTypographyClassName = ({\n variant = \"Body\",\n color = \"primary\",\n weight = \"normal\",\n clickable = false,\n className,\n}: TypographyClassOptions = {}): string => {\n return join(\n BASE_CLASS,\n `${BASE_CLASS}--${variant}`,\n `${BASE_CLASS}--color-${color}`,\n weight === \"bold\" && `${BASE_CLASS}--bold`,\n clickable && `${BASE_CLASS}--pointer`,\n className,\n );\n};\n\nexport const tachTypographyClassList = (options: TypographyClassOptions = {}): string[] => {\n return tachTypographyClassName(options)\n .split(\" \")\n .filter(Boolean);\n};\n","import type { EllipsisOptions } from \"./types\";\n\ntype StyleRecord = Record<string, string | number>;\n\nexport const tachTypographyEllipsisStyle = (\n ellipsis?: EllipsisOptions,\n): StyleRecord | undefined => {\n if (!ellipsis) {\n return undefined;\n }\n\n const rows = typeof ellipsis === \"object\" ? ellipsis.rows ?? 1 : 1;\n\n return {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n display: \"-webkit-box\",\n WebkitBoxOrient: \"vertical\",\n WebkitLineClamp: rows,\n };\n};\n"]}

88
packages/tach-typography/dist/react/index.cjs vendored Normal file
View File

@@ -0,0 +1,88 @@
'use strict';
var React = require('react');
var antd = require('antd');
var jsxRuntime = require('react/jsx-runtime');
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
// 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
);
};
var createTypographyVariant = (Component, variant) => {
const Variant = React__default.default.forwardRef(
({ color = "primary", weight = "normal", className, onClick, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
Component,
{
ref,
className: tachTypographyClassName({
variant,
color,
weight,
className,
clickable: Boolean(onClick)
}),
onClick,
...rest
}
)
);
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(antd.Typography.Text),
Paragraph: createTypographyComponent(antd.Typography.Paragraph),
Link: createTypographyComponent(antd.Typography.Link),
Title: createTypographyComponent(antd.Typography.Title)
};
exports.TachTypography = TachTypography;
//# sourceMappingURL=index.cjs.map
//# sourceMappingURL=index.cjs.map

1
packages/tach-typography/dist/react/index.cjs.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

121
packages/tach-typography/dist/react/index.d.cts vendored Normal file
View File

@@ -0,0 +1,121 @@
import React from 'react';
import { LinkProps } from 'antd/lib/typography/Link';
import { ParagraphProps } from 'antd/lib/typography/Paragraph';
import { TextProps } from 'antd/lib/typography/Text';
import { TitleProps } from 'antd/lib/typography/Title';
import { c as TypographyColor, f as TypographyWeight } from '../types-CQyFuLqp.cjs';
interface AdditionalProps {
color?: TypographyColor;
weight?: TypographyWeight;
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
className?: string | undefined;
}
declare const TachTypography: {
Text: {
LargeTitle: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
Title1: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
Title2: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
Title3: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
Headline: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
Body: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
Inputs: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
Subheadline: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
FootnoteUnderline: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
Footnote: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
Caption: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
Caption2: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentH1: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentH2: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentSubttl: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentSubttl2: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentCaption: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentCaption2: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentRegularM: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentRegularS: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentLargeTtl: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
AppMediumBody: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
AppMediumSubtext: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
AppMediumSubtextUnderline: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
};
Paragraph: {
LargeTitle: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Title1: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Title2: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Title3: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Headline: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Body: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Inputs: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Subheadline: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
FootnoteUnderline: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Footnote: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Caption: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Caption2: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentH1: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentH2: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentSubttl: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentSubttl2: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentCaption: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentCaption2: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentRegularM: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentRegularS: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentLargeTtl: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AppMediumBody: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AppMediumSubtext: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AppMediumSubtextUnderline: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
};
Link: {
LargeTitle: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Title1: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Title2: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Title3: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Headline: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Body: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Inputs: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Subheadline: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
FootnoteUnderline: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Footnote: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Caption: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Caption2: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentH1: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentH2: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentSubttl: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentSubttl2: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentCaption: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentCaption2: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentRegularM: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentRegularS: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentLargeTtl: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AppMediumBody: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AppMediumSubtext: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AppMediumSubtextUnderline: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
};
Title: {
LargeTitle: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Title1: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Title2: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Title3: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Headline: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Body: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Inputs: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Subheadline: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
FootnoteUnderline: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Footnote: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Caption: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Caption2: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentH1: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentH2: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentSubttl: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentSubttl2: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentCaption: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentCaption2: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentRegularM: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentRegularS: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentLargeTtl: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AppMediumBody: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AppMediumSubtext: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AppMediumSubtextUnderline: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
};
};
export { TachTypography };

121
packages/tach-typography/dist/react/index.d.ts vendored Normal file
View File

@@ -0,0 +1,121 @@
import React from 'react';
import { LinkProps } from 'antd/lib/typography/Link';
import { ParagraphProps } from 'antd/lib/typography/Paragraph';
import { TextProps } from 'antd/lib/typography/Text';
import { TitleProps } from 'antd/lib/typography/Title';
import { c as TypographyColor, f as TypographyWeight } from '../types-CQyFuLqp.js';
interface AdditionalProps {
color?: TypographyColor;
weight?: TypographyWeight;
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
className?: string | undefined;
}
declare const TachTypography: {
Text: {
LargeTitle: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
Title1: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
Title2: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
Title3: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
Headline: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
Body: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
Inputs: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
Subheadline: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
FootnoteUnderline: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
Footnote: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
Caption: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
Caption2: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentH1: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentH2: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentSubttl: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentSubttl2: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentCaption: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentCaption2: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentRegularM: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentRegularS: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentLargeTtl: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
AppMediumBody: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
AppMediumSubtext: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
AppMediumSubtextUnderline: React.ForwardRefExoticComponent<TextProps & Pick<ParagraphProps, "ellipsis"> & AdditionalProps & React.RefAttributes<HTMLElement>>;
};
Paragraph: {
LargeTitle: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Title1: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Title2: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Title3: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Headline: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Body: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Inputs: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Subheadline: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
FootnoteUnderline: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Footnote: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Caption: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Caption2: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentH1: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentH2: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentSubttl: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentSubttl2: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentCaption: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentCaption2: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentRegularM: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentRegularS: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentLargeTtl: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AppMediumBody: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AppMediumSubtext: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AppMediumSubtextUnderline: React.ForwardRefExoticComponent<ParagraphProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
};
Link: {
LargeTitle: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Title1: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Title2: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Title3: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Headline: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Body: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Inputs: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Subheadline: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
FootnoteUnderline: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Footnote: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Caption: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Caption2: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentH1: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentH2: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentSubttl: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentSubttl2: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentCaption: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentCaption2: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentRegularM: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentRegularS: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentLargeTtl: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AppMediumBody: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AppMediumSubtext: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AppMediumSubtextUnderline: React.ForwardRefExoticComponent<LinkProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
};
Title: {
LargeTitle: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Title1: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Title2: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Title3: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Headline: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Body: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Inputs: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Subheadline: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
FootnoteUnderline: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Footnote: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Caption: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
Caption2: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentH1: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentH2: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentSubttl: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentSubttl2: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentCaption: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentCaption2: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentRegularM: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentRegularS: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AccentLargeTtl: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AppMediumBody: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AppMediumSubtext: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
AppMediumSubtextUnderline: React.ForwardRefExoticComponent<TitleProps & AdditionalProps & React.RefAttributes<HTMLElement>>;
};
};
export { TachTypography };

82
packages/tach-typography/dist/react/index.js vendored Normal file
View File

@@ -0,0 +1,82 @@
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
);
};
var createTypographyVariant = (Component, variant) => {
const Variant = React.forwardRef(
({ color = "primary", weight = "normal", className, onClick, ...rest }, ref) => /* @__PURE__ */ jsx(
Component,
{
ref,
className: tachTypographyClassName({
variant,
color,
weight,
className,
clickable: Boolean(onClick)
}),
onClick,
...rest
}
)
);
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

1
packages/tach-typography/dist/react/index.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

103
packages/tach-typography/dist/styles.css vendored Normal file
View File

@@ -0,0 +1,103 @@
.tach-typography {
margin: 0;
}
.ant-typography.tach-typography {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.tach-typography--pointer,
.ant-typography.tach-typography--pointer {
cursor: pointer;
}
.tach-typography--bold,
.ant-typography.tach-typography--bold {
font-weight: 700 !important;
}
.tach-typography--color-primary,
.ant-typography.tach-typography--color-primary { color: var(--Text-Primary); }
.tach-typography--color-secondary,
.ant-typography.tach-typography--color-secondary { color: var(--Text-Secondary); }
.tach-typography--color-tertiary,
.ant-typography.tach-typography--color-tertiary { color: var(--Text-Tertiary); }
.tach-typography--color-quaternary,
.ant-typography.tach-typography--color-quaternary { color: var(--Text-Quaternary); }
.tach-typography--color-link,
.ant-typography.tach-typography--color-link { color: var(--System-HashtagsInPost); }
.tach-typography--color-white,
.ant-typography.tach-typography--color-white { color: var(--Default-White); }
.tach-typography--color-dark,
.ant-typography.tach-typography--color-dark { color: var(--Default-Dark); }
.tach-typography--color-alert,
.ant-typography.tach-typography--color-alert { color: var(--System-Alert); }
.tach-typography--color-malahit,
.ant-typography.tach-typography--color-malahit { color: var(--Accent-Malahit); }
.tach-typography--color-attantion,
.ant-typography.tach-typography--color-attantion { color: var(--System-Attantion); }
.tach-typography--LargeTitle,
.ant-typography.tach-typography--LargeTitle { font-family: Inter, sans-serif; font-size: 38px; font-weight: 500; line-height: 46px; }
.tach-typography--Title1,
.ant-typography.tach-typography--Title1 { font-family: Inter, sans-serif; font-size: 28px; font-weight: 500; line-height: 34px; }
.tach-typography--Title2,
.ant-typography.tach-typography--Title2 { font-family: Inter, sans-serif; font-size: 22px; font-weight: 500; line-height: 28px; }
.tach-typography--Title3,
.ant-typography.tach-typography--Title3 { font-family: Inter, sans-serif; font-size: 20px; font-weight: 500; line-height: 26px; }
.tach-typography--Headline,
.ant-typography.tach-typography--Headline { font-family: Inter, sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; }
.tach-typography--Body,
.tach-typography--AppMediumBody,
.ant-typography.tach-typography--Body,
.ant-typography.tach-typography--AppMediumBody { font-family: Inter, sans-serif; font-size: 14px; font-weight: 500; line-height: 20px; }
.tach-typography--Inputs,
.ant-typography.tach-typography--Inputs { font-family: Inter, sans-serif; font-size: 14px; font-weight: 500; line-height: 24px; }
.tach-typography--Subheadline,
.ant-typography.tach-typography--Subheadline { font-family: Inter, sans-serif; font-size: 14px; font-weight: 500; line-height: 18px; }
.tach-typography--FootnoteUnderline,
.ant-typography.tach-typography--FootnoteUnderline { font-family: Inter, sans-serif; font-size: 13px; font-weight: 500; line-height: 18px; text-decoration: underline; }
.tach-typography--Footnote,
.ant-typography.tach-typography--Footnote { font-family: Inter, sans-serif; font-size: 13px; font-weight: 500; line-height: 18px; }
.tach-typography--Caption,
.ant-typography.tach-typography--Caption { font-family: Inter, sans-serif; font-size: 10px; font-weight: 500; line-height: 12px; text-transform: uppercase; }
.tach-typography--Caption2,
.ant-typography.tach-typography--Caption2 { font-family: Inter, sans-serif; font-size: 8px; font-weight: 500; line-height: 10px; text-transform: uppercase; }
.tach-typography--AccentH1,
.ant-typography.tach-typography--AccentH1 { font-family: Unbounded, sans-serif; font-size: 20px; font-weight: 700; line-height: 30px; }
.tach-typography--AccentH2,
.ant-typography.tach-typography--AccentH2 { font-family: Unbounded, sans-serif; font-size: 16px; font-weight: 700; line-height: 24px; }
.tach-typography--AccentSubttl,
.ant-typography.tach-typography--AccentSubttl { font-family: Unbounded, sans-serif; font-size: 14px; font-weight: 700; line-height: 22px; }
.tach-typography--AccentSubttl2,
.ant-typography.tach-typography--AccentSubttl2 { font-family: Unbounded, sans-serif; font-size: 12px; font-weight: 700; line-height: 20px; }
.tach-typography--AccentCaption,
.ant-typography.tach-typography--AccentCaption { font-family: Unbounded, sans-serif; font-size: 9px; font-weight: 700; line-height: 12px; text-transform: uppercase; }
.tach-typography--AccentCaption2,
.ant-typography.tach-typography--AccentCaption2 { font-family: Unbounded, sans-serif; font-size: 7px; font-weight: 700; line-height: 10px; text-transform: uppercase; }
.tach-typography--AccentRegularM,
.ant-typography.tach-typography--AccentRegularM { font-family: Unbounded, sans-serif; font-size: 14px; font-weight: 400; line-height: 22px; }
.tach-typography--AccentRegularS,
.ant-typography.tach-typography--AccentRegularS { font-family: Unbounded, sans-serif; font-size: 12px; font-weight: 400; line-height: 20px; }
.tach-typography--AccentLargeTtl,
.ant-typography.tach-typography--AccentLargeTtl { font-family: Unbounded, sans-serif; font-size: 38px; font-weight: 700; line-height: 52px; }
.tach-typography--AppMediumSubtext,
.ant-typography.tach-typography--AppMediumSubtext { text-align: center; font-family: Inter, sans-serif; font-size: 11px; font-weight: 400; line-height: 17px; }
.tach-typography--AppMediumSubtextUnderline,
.ant-typography.tach-typography--AppMediumSubtextUnderline { font-family: Inter, sans-serif; font-size: 11px; font-weight: 400; line-height: 17px; text-decoration: underline; }
@media (max-width: 575px) {
.tach-typography--AccentLargeTtl,
.ant-typography.tach-typography--AccentLargeTtl {
font-size: 20px;
line-height: 30px;
}
.tach-typography--AccentRegularM,
.ant-typography.tach-typography--AccentRegularM {
font-size: 12px;
line-height: 20px;
}
}

20
packages/tach-typography/dist/types-CQyFuLqp.d.cts vendored Normal file
View File

@@ -0,0 +1,20 @@
declare const TYPOGRAPHY_VARIANTS: readonly ["LargeTitle", "Title1", "Title2", "Title3", "Headline", "Body", "Inputs", "Subheadline", "FootnoteUnderline", "Footnote", "Caption", "Caption2", "AccentH1", "AccentH2", "AccentSubttl", "AccentSubttl2", "AccentCaption", "AccentCaption2", "AccentRegularM", "AccentRegularS", "AccentLargeTtl", "AppMediumBody", "AppMediumSubtext", "AppMediumSubtextUnderline"];
declare const TYPOGRAPHY_COLORS: readonly ["primary", "secondary", "tertiary", "quaternary", "link", "white", "dark", "alert", "malahit", "attantion"];
type TypographyVariant = (typeof TYPOGRAPHY_VARIANTS)[number];
type TypographyColor = (typeof TYPOGRAPHY_COLORS)[number];
type TypographyWeight = "normal" | "bold";
interface TypographyClassOptions {
variant?: TypographyVariant;
color?: TypographyColor;
weight?: TypographyWeight;
clickable?: boolean;
className?: string | undefined;
}
type EllipsisOptions = boolean | {
rows?: number;
};
interface TypographyRenderOptions extends TypographyClassOptions {
ellipsis?: EllipsisOptions;
}
export { type EllipsisOptions as E, type TypographyClassOptions as T, TYPOGRAPHY_COLORS as a, TYPOGRAPHY_VARIANTS as b, type TypographyColor as c, type TypographyRenderOptions as d, type TypographyVariant as e, type TypographyWeight as f };

20
packages/tach-typography/dist/types-CQyFuLqp.d.ts vendored Normal file
View File

@@ -0,0 +1,20 @@
declare const TYPOGRAPHY_VARIANTS: readonly ["LargeTitle", "Title1", "Title2", "Title3", "Headline", "Body", "Inputs", "Subheadline", "FootnoteUnderline", "Footnote", "Caption", "Caption2", "AccentH1", "AccentH2", "AccentSubttl", "AccentSubttl2", "AccentCaption", "AccentCaption2", "AccentRegularM", "AccentRegularS", "AccentLargeTtl", "AppMediumBody", "AppMediumSubtext", "AppMediumSubtextUnderline"];
declare const TYPOGRAPHY_COLORS: readonly ["primary", "secondary", "tertiary", "quaternary", "link", "white", "dark", "alert", "malahit", "attantion"];
type TypographyVariant = (typeof TYPOGRAPHY_VARIANTS)[number];
type TypographyColor = (typeof TYPOGRAPHY_COLORS)[number];
type TypographyWeight = "normal" | "bold";
interface TypographyClassOptions {
variant?: TypographyVariant;
color?: TypographyColor;
weight?: TypographyWeight;
clickable?: boolean;
className?: string | undefined;
}
type EllipsisOptions = boolean | {
rows?: number;
};
interface TypographyRenderOptions extends TypographyClassOptions {
ellipsis?: EllipsisOptions;
}
export { type EllipsisOptions as E, type TypographyClassOptions as T, TYPOGRAPHY_COLORS as a, TYPOGRAPHY_VARIANTS as b, type TypographyColor as c, type TypographyRenderOptions as d, type TypographyVariant as e, type TypographyWeight as f };

136
packages/tach-typography/package.json Normal file
View File

@@ -0,0 +1,136 @@
{
"name": "@hublib-web/tach-typography",
"version": "0.1.0",
"description": "Cross-framework typography package for React and Angular",
"license": "MIT",
"type": "module",
"main": "./dist/core/index.cjs",
"module": "./dist/core/index.js",
"types": "./dist/core/index.d.ts",
"sideEffects": [
"./dist/styles.css"
],
"files": [
"dist",
"README.md",
"styles"
],
"typesVersions": {
"*": {
"react": [
"dist/react/index.d.ts"
],
"angular": [
"dist/angular/index.d.ts"
],
"core": [
"dist/core/index.d.ts"
]
}
},
"exports": {
".": {
"types": "./dist/core/index.d.ts",
"import": "./dist/core/index.js",
"require": "./dist/core/index.cjs"
},
"./core": {
"types": "./dist/core/index.d.ts",
"import": "./dist/core/index.js",
"require": "./dist/core/index.cjs"
},
"./react": {
"types": "./dist/react/index.d.ts",
"import": "./dist/react/index.js",
"require": "./dist/react/index.cjs"
},
"./angular": {
"types": "./dist/angular/index.d.ts",
"import": "./dist/angular/index.js",
"require": "./dist/angular/index.cjs"
},
"./styles.css": "./dist/styles.css",
"./styles/typography-vars.scss": "./styles/typography-vars.scss"
},
"scripts": {
"build": "yarn clean && tsup && node ./scripts/copy-styles.mjs",
"clean": "rm -rf dist",
"typecheck": "tsc -p tsconfig.json --noEmit",
"test": "vitest run",
"lint": "eslint src --ext .ts,.tsx",
"storybook": "storybook dev -p 6006",
"storybook:build": "storybook build"
},
"peerDependencies": {
"@angular/animations": ">=17.0.0",
"@angular/common": ">=17.0.0",
"@angular/core": ">=17.0.0",
"@angular/forms": ">=17.0.0",
"@angular/platform-browser": ">=17.0.0",
"@angular/router": ">=17.0.0",
"antd": ">=5.0.0",
"ng-zorro-antd": ">=17.0.0",
"react": ">=18.0.0",
"react-dom": ">=18.0.0",
"rxjs": ">=7.0.0"
},
"peerDependenciesMeta": {
"@angular/animations": {
"optional": true
},
"@angular/common": {
"optional": true
},
"@angular/core": {
"optional": true
},
"@angular/forms": {
"optional": true
},
"@angular/platform-browser": {
"optional": true
},
"@angular/router": {
"optional": true
},
"antd": {
"optional": true
},
"ng-zorro-antd": {
"optional": true
},
"react": {
"optional": true
},
"react-dom": {
"optional": true
},
"rxjs": {
"optional": true
}
},
"devDependencies": {
"@angular/animations": "^20.3.17",
"@angular/common": "^20.3.17",
"@angular/core": "^20.3.17",
"@angular/forms": "^20.3.17",
"@angular/platform-browser": "^20.3.17",
"@angular/router": "^20.3.17",
"@storybook/addon-a11y": "8.6.14",
"@storybook/addon-essentials": "8.6.14",
"@storybook/addon-interactions": "8.6.14",
"@storybook/blocks": "8.6.14",
"@storybook/react-vite": "8.6.14",
"@storybook/test": "8.6.14",
"@types/react": "^19.2.2",
"antd": "^5.29.3",
"ng-zorro-antd": "^20.4.4",
"react": "^19.2.0",
"react-dom": "^19.2.0",
"rxjs": "^7.8.2",
"storybook": "8.6.14",
"tsup": "^8.5.0",
"typescript": "^5.9.3",
"vite": "6.4.1"
}
}

12
packages/tach-typography/scripts/copy-styles.mjs Normal file
View File

@@ -0,0 +1,12 @@
import { cpSync, existsSync, mkdirSync } from "node:fs";
import { dirname, resolve } from "node:path";
const source = resolve("src/styles/tach-typography.css");
const destination = resolve("dist/styles.css");
if (!existsSync(source)) {
throw new Error(`Styles file not found: ${source}`);
}
mkdirSync(dirname(destination), { recursive: true });
cpSync(source, destination);

140
packages/tach-typography/src/angular/index.ts Normal file
View File

@@ -0,0 +1,140 @@
import { NgModule } from "@angular/core";
import { Directive, ElementRef, Input, OnChanges, Renderer2, SimpleChanges } from "@angular/core";
import { NzTypographyModule } from "ng-zorro-antd/typography";
import {
tachTypographyClassList,
tachTypographyClassName,
tachTypographyEllipsisStyle,
type EllipsisOptions,
type TypographyClassOptions,
type TypographyColor,
type TypographyRenderOptions,
type TypographyVariant,
type TypographyWeight,
} from "../core";
export type AngularTypographyClassInput = TypographyClassOptions;
export interface AngularTypographyRenderOptions extends TypographyRenderOptions {
preserveStyle?: Record<string, string | number>;
}
const camelToKebab = (value: string): string =>
value.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);
const toCssProperty = (styleKey: string): string => {
if (styleKey.startsWith("Webkit")) {
return `-webkit-${camelToKebab(styleKey.slice(6))}`;
}
return camelToKebab(styleKey);
};
export const tachAngularTypographyClassName = (
options: AngularTypographyClassInput = {},
): string => {
return tachTypographyClassName(options);
};
export const tachAngularTypographyClassList = (
options: AngularTypographyClassInput = {},
): string[] => {
return tachTypographyClassList(options);
};
export const tachAngularTypographyStyles = (
ellipsis?: EllipsisOptions,
preserveStyle: Record<string, string | number> = {},
): Record<string, string | number> => {
const ellipsisStyle = tachTypographyEllipsisStyle(ellipsis);
if (!ellipsisStyle) {
return preserveStyle;
}
return {
...ellipsisStyle,
...preserveStyle,
};
};
@Directive({
selector: "[tachTypography]",
standalone: true,
})
export class TachTypographyDirective implements OnChanges {
@Input() tachTypography: TypographyVariant | "" | undefined;
@Input() tachTypographyVariant: TypographyVariant = "Body";
@Input() tachTypographyColor: TypographyColor = "primary";
@Input() tachTypographyWeight: TypographyWeight = "normal";
@Input() tachTypographyClickable = false;
@Input() tachTypographyClassName: string | undefined;
@Input() tachTypographyEllipsis: EllipsisOptions | undefined;
private readonly appliedClasses = new Set<string>();
private readonly appliedStyleProperties = new Set<string>();
constructor(
private readonly elementRef: ElementRef<HTMLElement>,
private readonly renderer: Renderer2,
) {}
ngOnChanges(_changes: SimpleChanges): void {
this.syncClasses();
this.syncEllipsisStyles();
}
private syncClasses(): void {
const nextClassList = tachTypographyClassList({
variant: this.tachTypography || this.tachTypographyVariant,
color: this.tachTypographyColor,
weight: this.tachTypographyWeight,
clickable: this.tachTypographyClickable,
className: this.tachTypographyClassName,
});
const nextSet = new Set(nextClassList);
for (const className of this.appliedClasses) {
if (!nextSet.has(className)) {
this.renderer.removeClass(this.elementRef.nativeElement, className);
}
}
for (const className of nextSet) {
this.renderer.addClass(this.elementRef.nativeElement, className);
}
this.appliedClasses.clear();
for (const className of nextSet) {
this.appliedClasses.add(className);
}
}
private syncEllipsisStyles(): void {
const nextStyles = tachTypographyEllipsisStyle(this.tachTypographyEllipsis) || {};
const nextStyleKeys = new Set(Object.keys(nextStyles));
for (const styleKey of this.appliedStyleProperties) {
if (!nextStyleKeys.has(styleKey)) {
this.renderer.removeStyle(this.elementRef.nativeElement, toCssProperty(styleKey));
}
}
for (const [styleKey, styleValue] of Object.entries(nextStyles)) {
this.renderer.setStyle(this.elementRef.nativeElement, toCssProperty(styleKey), styleValue);
}
this.appliedStyleProperties.clear();
for (const styleKey of nextStyleKeys) {
this.appliedStyleProperties.add(styleKey);
}
}
}
@NgModule({
imports: [NzTypographyModule, TachTypographyDirective],
exports: [NzTypographyModule, TachTypographyDirective],
})
export class TachTypographyNzModule {}

29
packages/tach-typography/src/core/classnames.ts Normal file
View File

@@ -0,0 +1,29 @@
import type { TypographyClassOptions } from "./types";
const BASE_CLASS = "tach-typography";
const join = (...parts: Array<string | undefined | null | false>): string =>
parts.filter(Boolean).join(" ");
export const tachTypographyClassName = ({
variant = "Body",
color = "primary",
weight = "normal",
clickable = false,
className,
}: TypographyClassOptions = {}): string => {
return join(
BASE_CLASS,
`${BASE_CLASS}--${variant}`,
`${BASE_CLASS}--color-${color}`,
weight === "bold" && `${BASE_CLASS}--bold`,
clickable && `${BASE_CLASS}--pointer`,
className,
);
};
export const tachTypographyClassList = (options: TypographyClassOptions = {}): string[] => {
return tachTypographyClassName(options)
.split(" ")
.filter(Boolean);
};

21
packages/tach-typography/src/core/ellipsis.ts Normal file
View File

@@ -0,0 +1,21 @@
import type { EllipsisOptions } from "./types";
type StyleRecord = Record<string, string | number>;
export const tachTypographyEllipsisStyle = (
ellipsis?: EllipsisOptions,
): StyleRecord | undefined => {
if (!ellipsis) {
return undefined;
}
const rows = typeof ellipsis === "object" ? ellipsis.rows ?? 1 : 1;
return {
overflow: "hidden",
textOverflow: "ellipsis",
display: "-webkit-box",
WebkitBoxOrient: "vertical",
WebkitLineClamp: rows,
};
};

56
packages/tach-typography/src/core/index.test.ts Normal file
View File

@@ -0,0 +1,56 @@
import { describe, expect, it } from "vitest";
import {
tachTypographyClassList,
tachTypographyClassName,
tachTypographyEllipsisStyle,
} from "./index";
describe("tachTypographyClassName", () => {
it("builds className string with defaults", () => {
expect(tachTypographyClassName()).toBe(
"tach-typography tach-typography--Body tach-typography--color-primary",
);
});
it("adds optional states", () => {
expect(
tachTypographyClassName({
variant: "AccentH1",
color: "link",
weight: "bold",
clickable: true,
className: "custom",
}),
).toBe(
"tach-typography tach-typography--AccentH1 tach-typography--color-link tach-typography--bold tach-typography--pointer custom",
);
});
it("returns list helper", () => {
expect(tachTypographyClassList({ variant: "Title1" })).toEqual([
"tach-typography",
"tach-typography--Title1",
"tach-typography--color-primary",
]);
});
});
describe("tachTypographyEllipsisStyle", () => {
it("returns undefined without ellipsis", () => {
expect(tachTypographyEllipsisStyle()).toBeUndefined();
});
it("returns one-line style for true", () => {
expect(tachTypographyEllipsisStyle(true)).toMatchObject({
WebkitLineClamp: 1,
overflow: "hidden",
});
});
it("respects rows value", () => {
expect(tachTypographyEllipsisStyle({ rows: 3 })).toMatchObject({
WebkitLineClamp: 3,
});
});
});

3
packages/tach-typography/src/core/index.ts Normal file
View File

@@ -0,0 +1,3 @@
export * from "./types";
export * from "./classnames";
export * from "./ellipsis";

61
packages/tach-typography/src/core/types.ts Normal file
View File

@@ -0,0 +1,61 @@
export const TYPOGRAPHY_VARIANTS = [
"LargeTitle",
"Title1",
"Title2",
"Title3",
"Headline",
"Body",
"Inputs",
"Subheadline",
"FootnoteUnderline",
"Footnote",
"Caption",
"Caption2",
"AccentH1",
"AccentH2",
"AccentSubttl",
"AccentSubttl2",
"AccentCaption",
"AccentCaption2",
"AccentRegularM",
"AccentRegularS",
"AccentLargeTtl",
"AppMediumBody",
"AppMediumSubtext",
"AppMediumSubtextUnderline",
] as const;
export const TYPOGRAPHY_COLORS = [
"primary",
"secondary",
"tertiary",
"quaternary",
"link",
"white",
"dark",
"alert",
"malahit",
"attantion",
] as const;
export type TypographyVariant = (typeof TYPOGRAPHY_VARIANTS)[number];
export type TypographyColor = (typeof TYPOGRAPHY_COLORS)[number];
export type TypographyWeight = "normal" | "bold";
export interface TypographyClassOptions {
variant?: TypographyVariant;
color?: TypographyColor;
weight?: TypographyWeight;
clickable?: boolean;
className?: string | undefined;
}
export type EllipsisOptions =
| boolean
| {
rows?: number;
};
export interface TypographyRenderOptions extends TypographyClassOptions {
ellipsis?: EllipsisOptions;
}

82
packages/tach-typography/src/react/index.tsx Normal file
View File

@@ -0,0 +1,82 @@
import React from "react";
import { Typography } from "antd";
import type { LinkProps } from "antd/lib/typography/Link";
import type { ParagraphProps } from "antd/lib/typography/Paragraph";
import type { TextProps } from "antd/lib/typography/Text";
import type { TitleProps } from "antd/lib/typography/Title";
import {
tachTypographyClassName,
type TypographyColor,
type TypographyVariant,
type TypographyWeight,
} from "../core";
interface AdditionalProps {
color?: TypographyColor;
weight?: TypographyWeight;
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
className?: string | undefined;
}
const createTypographyVariant = <P extends object>(
Component: React.ComponentType<P>,
variant: TypographyVariant,
) => {
const Variant = React.forwardRef<HTMLElement, P & AdditionalProps>(
({ color = "primary", weight = "normal", className, onClick, ...rest }, ref) => (
<Component
ref={ref as never}
className={tachTypographyClassName({
variant,
color,
weight,
className,
clickable: Boolean(onClick),
})}
onClick={onClick}
{...(rest as P)}
/>
),
);
Variant.displayName = String(variant);
return Variant;
};
const createTypographyComponent = <P extends object>(Component: React.ComponentType<P>) => ({
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"),
});
export const TachTypography = {
Text: createTypographyComponent<TextProps & Pick<ParagraphProps, "ellipsis">>(Typography.Text),
Paragraph: createTypographyComponent<ParagraphProps>(Typography.Paragraph),
Link: createTypographyComponent<LinkProps>(Typography.Link),
Title: createTypographyComponent<TitleProps>(Typography.Title),
};

183
packages/tach-typography/src/stories/TachTypography.Playground.stories.tsx Normal file
View File

@@ -0,0 +1,183 @@
import React from "react";
import type { Meta, StoryObj } from "@storybook/react";
import { expect, fn, userEvent, within } from "@storybook/test";
import {
TYPOGRAPHY_COLORS,
TYPOGRAPHY_VARIANTS,
type TypographyColor,
type TypographyVariant,
type TypographyWeight,
} from "../core";
import { TachTypography } from "../react";
type TypographyNamespace = keyof typeof TachTypography;
type VariantComponentProps = {
children?: React.ReactNode;
className?: string;
color?: TypographyColor;
ellipsis?: boolean | { rows?: number };
href?: string;
level?: 1 | 2 | 3 | 4 | 5;
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
weight?: TypographyWeight;
};
type VariantComponent = React.ComponentType<VariantComponentProps>;
const getVariantComponent = (
namespace: TypographyNamespace,
variant: TypographyVariant,
): VariantComponent => {
return (TachTypography[namespace] as unknown as Record<TypographyVariant, VariantComponent>)[variant];
};
interface PlaygroundArgs {
namespace: TypographyNamespace;
variant: TypographyVariant;
color: TypographyColor;
weight: TypographyWeight;
children: string;
clickable: boolean;
ellipsisRows: number;
href: string;
titleLevel: 1 | 2 | 3 | 4 | 5;
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
}
const renderTypography = (args: PlaygroundArgs) => {
const Component = getVariantComponent(args.namespace, args.variant);
const componentProps: VariantComponentProps = {
color: args.color,
weight: args.weight,
};
if (args.clickable && args.onClick) {
componentProps.onClick = (event: React.MouseEvent<HTMLElement>) => {
args.onClick?.(event);
};
}
if (args.namespace === "Text" || args.namespace === "Paragraph") {
componentProps.ellipsis = args.ellipsisRows > 0 ? { rows: args.ellipsisRows } : false;
}
if (args.namespace === "Link") {
componentProps.href = args.href;
}
if (args.namespace === "Title") {
componentProps.level = args.titleLevel;
}
return (
<div className="tach-story-surface">
<Component {...componentProps}>{args.children}</Component>
</div>
);
};
const meta: Meta<PlaygroundArgs> = {
title: "TachTypography/Playground",
tags: ["autodocs"],
render: renderTypography,
args: {
namespace: "Text",
variant: "Body",
color: "primary",
weight: "normal",
children: "TachTypography playground text",
clickable: false,
ellipsisRows: 0,
href: "https://example.com",
titleLevel: 3,
},
argTypes: {
namespace: {
control: "select",
options: ["Text", "Paragraph", "Link", "Title"],
},
variant: {
control: "select",
options: TYPOGRAPHY_VARIANTS,
},
color: {
control: "select",
options: TYPOGRAPHY_COLORS,
},
weight: {
control: "inline-radio",
options: ["normal", "bold"],
},
children: {
control: "text",
},
clickable: {
control: "boolean",
},
ellipsisRows: {
control: {
type: "number",
min: 0,
max: 5,
},
description: "Works for Text and Paragraph namespaces",
},
href: {
control: "text",
description: "Works for Link namespace",
},
titleLevel: {
control: "inline-radio",
options: [1, 2, 3, 4, 5],
description: "Works for Title namespace",
},
onClick: {
table: {
disable: true,
},
},
},
parameters: {
docs: {
description: {
component:
"Interactive playground for all TachTypography namespaces with full token and prop controls.",
},
},
},
};
export default meta;
type Story = StoryObj<typeof meta>;
export const Interactive: Story = {};
export const WithEllipsis: Story = {
args: {
namespace: "Paragraph",
variant: "Body",
ellipsisRows: 2,
children:
"This paragraph demonstrates multi-line truncation in Storybook. Increase or decrease ellipsisRows to validate visual behavior and clipping boundaries.",
},
};
export const ClickInteraction: Story = {
args: {
namespace: "Text",
variant: "Subheadline",
clickable: true,
children: "Click this text to run interaction assertion",
onClick: fn(),
},
play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement);
await userEvent.click(canvas.getByText(args.children));
await expect(args.onClick as ReturnType<typeof fn>).toHaveBeenCalledTimes(1);
},
};

105
packages/tach-typography/src/stories/TachTypography.Reference.stories.tsx Normal file
View File

@@ -0,0 +1,105 @@
import React from "react";
import type { Meta, StoryObj } from "@storybook/react";
const meta = {
title: "TachTypography/Reference",
tags: ["autodocs"],
} satisfies Meta;
export default meta;
type Story = StoryObj<typeof meta>;
export const PropsMatrix: Story = {
render: () => (
<div className="tach-story-surface tach-story-stack">
<table className="tach-story-table">
<thead>
<tr>
<th>Prop</th>
<th>Type</th>
<th>React</th>
<th>Angular</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>variant</td>
<td>TypographyVariant</td>
<td>TachTypography.[Text|Paragraph|Link|Title].Variant</td>
<td>tachTypography / tachTypographyVariant</td>
<td>Main typography token</td>
</tr>
<tr>
<td>color</td>
<td>TypographyColor</td>
<td>color</td>
<td>tachTypographyColor</td>
<td>Maps to CSS variables</td>
</tr>
<tr>
<td>weight</td>
<td>"normal" | "bold"</td>
<td>weight</td>
<td>tachTypographyWeight</td>
<td>Bold class modifier</td>
</tr>
<tr>
<td>ellipsis</td>
<td><code>{"boolean | { rows?: number }"}</code></td>
<td>ellipsis (Text/Paragraph)</td>
<td>tachTypographyEllipsis</td>
<td>Applies line clamp styles</td>
</tr>
<tr>
<td>clickable</td>
<td>boolean</td>
<td>onClick adds pointer class</td>
<td>tachTypographyClickable</td>
<td>Visual affordance + cursor</td>
</tr>
<tr>
<td>className</td>
<td>string</td>
<td>className</td>
<td>tachTypographyClassName</td>
<td>Merges with token classes</td>
</tr>
</tbody>
</table>
</div>
),
};
export const AngularAdapter: Story = {
render: () => (
<div className="tach-story-surface tach-story-stack">
<h4>Angular adapter usage</h4>
<pre>
<code>
{`import { TachTypographyDirective, TachTypographyNzModule } from "@hublib-web/tach-typography/angular";
@Component({
standalone: true,
imports: [TachTypographyNzModule, TachTypographyDirective],
template: \
\`<span
nz-typography
tachTypography
tachTypography="Body"
tachTypographyColor="link"
tachTypographyWeight="bold"
[tachTypographyEllipsis]="{ rows: 2 }"
>
Typography for Angular + NG-ZORRO
</span>\`,
})
export class ExampleComponent {}
`}
</code>
</pre>
</div>
),
};

189
packages/tach-typography/src/stories/TachTypography.Tokens.stories.tsx Normal file
View File

@@ -0,0 +1,189 @@
import React from "react";
import type { Meta, StoryObj } from "@storybook/react";
import {
TYPOGRAPHY_COLORS,
TYPOGRAPHY_VARIANTS,
type TypographyColor,
type TypographyVariant,
type TypographyWeight,
} from "../core";
import { TachTypography } from "../react";
type TypographyNamespace = keyof typeof TachTypography;
type VariantComponentProps = {
children?: React.ReactNode;
color?: TypographyColor;
ellipsis?: boolean | { rows?: number };
href?: string;
level?: 1 | 2 | 3 | 4 | 5;
weight?: TypographyWeight;
};
type VariantComponent = React.ComponentType<VariantComponentProps>;
const getVariantComponent = (
namespace: TypographyNamespace,
variant: TypographyVariant,
): VariantComponent => {
return (TachTypography[namespace] as unknown as Record<TypographyVariant, VariantComponent>)[variant];
};
interface VariantScaleArgs {
namespace: TypographyNamespace;
color: TypographyColor;
weight: TypographyWeight;
sampleText: string;
}
interface ColorPaletteArgs {
namespace: TypographyNamespace;
variant: TypographyVariant;
weight: TypographyWeight;
}
const meta = {
title: "TachTypography/Tokens",
tags: ["autodocs"],
parameters: {
docs: {
description: {
component:
"Token showcase for typography variants and colors. Useful for validating visual consistency against the design system.",
},
},
},
} satisfies Meta;
export default meta;
type Story = StoryObj<typeof meta>;
export const VariantScale: StoryObj<VariantScaleArgs> = {
args: {
namespace: "Text",
color: "primary",
weight: "normal",
sampleText: "The quick brown fox jumps over the lazy dog",
},
argTypes: {
namespace: {
control: "select",
options: ["Text", "Paragraph", "Link", "Title"],
},
color: {
control: "select",
options: TYPOGRAPHY_COLORS,
},
weight: {
control: "inline-radio",
options: ["normal", "bold"],
},
sampleText: {
control: "text",
},
},
render: args => (
<div className="tach-story-surface tach-story-stack">
{TYPOGRAPHY_VARIANTS.map(variant => {
const Component = getVariantComponent(args.namespace, variant);
const componentProps: VariantComponentProps = {
color: args.color,
weight: args.weight,
};
if (args.namespace === "Link") {
componentProps.href = "https://example.com";
}
if (args.namespace === "Title") {
componentProps.level = 4;
}
return (
<div className="tach-story-row" key={variant}>
<span className="tach-story-label">{variant}</span>
<Component {...componentProps}>{args.sampleText}</Component>
</div>
);
})}
</div>
),
};
export const ColorPalette: StoryObj<ColorPaletteArgs> = {
args: {
namespace: "Text",
variant: "Body",
weight: "normal",
},
argTypes: {
namespace: {
control: "select",
options: ["Text", "Paragraph", "Link", "Title"],
},
variant: {
control: "select",
options: TYPOGRAPHY_VARIANTS,
},
weight: {
control: "inline-radio",
options: ["normal", "bold"],
},
},
render: args => {
const Component = getVariantComponent(args.namespace, args.variant);
return (
<div className="tach-story-surface tach-story-grid tach-story-grid--colors">
{TYPOGRAPHY_COLORS.map(color => {
const componentProps: VariantComponentProps = {
color,
weight: args.weight,
};
if (args.namespace === "Link") {
componentProps.href = "https://example.com";
}
if (args.namespace === "Title") {
componentProps.level = 4;
}
return (
<div className="tach-story-row" key={color}>
<span className="tach-story-label">{color}</span>
<Component {...componentProps}>Color token preview</Component>
</div>
);
})}
</div>
);
},
};
export const TokenReference: Story = {
render: () => (
<div className="tach-story-surface tach-story-stack">
<div>
<h4>Variants ({TYPOGRAPHY_VARIANTS.length})</h4>
<ul className="tach-story-token-list">
{TYPOGRAPHY_VARIANTS.map(token => (
<li key={token}>{token}</li>
))}
</ul>
</div>
<div>
<h4>Colors ({TYPOGRAPHY_COLORS.length})</h4>
<ul className="tach-story-token-list">
{TYPOGRAPHY_COLORS.map(token => (
<li key={token}>{token}</li>
))}
</ul>
</div>
</div>
),
};

103
packages/tach-typography/src/styles/tach-typography.css Normal file
View File

@@ -0,0 +1,103 @@
.tach-typography {
margin: 0;
}
.ant-typography.tach-typography {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.tach-typography--pointer,
.ant-typography.tach-typography--pointer {
cursor: pointer;
}
.tach-typography--bold,
.ant-typography.tach-typography--bold {
font-weight: 700 !important;
}
.tach-typography--color-primary,
.ant-typography.tach-typography--color-primary { color: var(--Text-Primary); }
.tach-typography--color-secondary,
.ant-typography.tach-typography--color-secondary { color: var(--Text-Secondary); }
.tach-typography--color-tertiary,
.ant-typography.tach-typography--color-tertiary { color: var(--Text-Tertiary); }
.tach-typography--color-quaternary,
.ant-typography.tach-typography--color-quaternary { color: var(--Text-Quaternary); }
.tach-typography--color-link,
.ant-typography.tach-typography--color-link { color: var(--System-HashtagsInPost); }
.tach-typography--color-white,
.ant-typography.tach-typography--color-white { color: var(--Default-White); }
.tach-typography--color-dark,
.ant-typography.tach-typography--color-dark { color: var(--Default-Dark); }
.tach-typography--color-alert,
.ant-typography.tach-typography--color-alert { color: var(--System-Alert); }
.tach-typography--color-malahit,
.ant-typography.tach-typography--color-malahit { color: var(--Accent-Malahit); }
.tach-typography--color-attantion,
.ant-typography.tach-typography--color-attantion { color: var(--System-Attantion); }
.tach-typography--LargeTitle,
.ant-typography.tach-typography--LargeTitle { font-family: Inter, sans-serif; font-size: 38px; font-weight: 500; line-height: 46px; }
.tach-typography--Title1,
.ant-typography.tach-typography--Title1 { font-family: Inter, sans-serif; font-size: 28px; font-weight: 500; line-height: 34px; }
.tach-typography--Title2,
.ant-typography.tach-typography--Title2 { font-family: Inter, sans-serif; font-size: 22px; font-weight: 500; line-height: 28px; }
.tach-typography--Title3,
.ant-typography.tach-typography--Title3 { font-family: Inter, sans-serif; font-size: 20px; font-weight: 500; line-height: 26px; }
.tach-typography--Headline,
.ant-typography.tach-typography--Headline { font-family: Inter, sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; }
.tach-typography--Body,
.tach-typography--AppMediumBody,
.ant-typography.tach-typography--Body,
.ant-typography.tach-typography--AppMediumBody { font-family: Inter, sans-serif; font-size: 14px; font-weight: 500; line-height: 20px; }
.tach-typography--Inputs,
.ant-typography.tach-typography--Inputs { font-family: Inter, sans-serif; font-size: 14px; font-weight: 500; line-height: 24px; }
.tach-typography--Subheadline,
.ant-typography.tach-typography--Subheadline { font-family: Inter, sans-serif; font-size: 14px; font-weight: 500; line-height: 18px; }
.tach-typography--FootnoteUnderline,
.ant-typography.tach-typography--FootnoteUnderline { font-family: Inter, sans-serif; font-size: 13px; font-weight: 500; line-height: 18px; text-decoration: underline; }
.tach-typography--Footnote,
.ant-typography.tach-typography--Footnote { font-family: Inter, sans-serif; font-size: 13px; font-weight: 500; line-height: 18px; }
.tach-typography--Caption,
.ant-typography.tach-typography--Caption { font-family: Inter, sans-serif; font-size: 10px; font-weight: 500; line-height: 12px; text-transform: uppercase; }
.tach-typography--Caption2,
.ant-typography.tach-typography--Caption2 { font-family: Inter, sans-serif; font-size: 8px; font-weight: 500; line-height: 10px; text-transform: uppercase; }
.tach-typography--AccentH1,
.ant-typography.tach-typography--AccentH1 { font-family: Unbounded, sans-serif; font-size: 20px; font-weight: 700; line-height: 30px; }
.tach-typography--AccentH2,
.ant-typography.tach-typography--AccentH2 { font-family: Unbounded, sans-serif; font-size: 16px; font-weight: 700; line-height: 24px; }
.tach-typography--AccentSubttl,
.ant-typography.tach-typography--AccentSubttl { font-family: Unbounded, sans-serif; font-size: 14px; font-weight: 700; line-height: 22px; }
.tach-typography--AccentSubttl2,
.ant-typography.tach-typography--AccentSubttl2 { font-family: Unbounded, sans-serif; font-size: 12px; font-weight: 700; line-height: 20px; }
.tach-typography--AccentCaption,
.ant-typography.tach-typography--AccentCaption { font-family: Unbounded, sans-serif; font-size: 9px; font-weight: 700; line-height: 12px; text-transform: uppercase; }
.tach-typography--AccentCaption2,
.ant-typography.tach-typography--AccentCaption2 { font-family: Unbounded, sans-serif; font-size: 7px; font-weight: 700; line-height: 10px; text-transform: uppercase; }
.tach-typography--AccentRegularM,
.ant-typography.tach-typography--AccentRegularM { font-family: Unbounded, sans-serif; font-size: 14px; font-weight: 400; line-height: 22px; }
.tach-typography--AccentRegularS,
.ant-typography.tach-typography--AccentRegularS { font-family: Unbounded, sans-serif; font-size: 12px; font-weight: 400; line-height: 20px; }
.tach-typography--AccentLargeTtl,
.ant-typography.tach-typography--AccentLargeTtl { font-family: Unbounded, sans-serif; font-size: 38px; font-weight: 700; line-height: 52px; }
.tach-typography--AppMediumSubtext,
.ant-typography.tach-typography--AppMediumSubtext { text-align: center; font-family: Inter, sans-serif; font-size: 11px; font-weight: 400; line-height: 17px; }
.tach-typography--AppMediumSubtextUnderline,
.ant-typography.tach-typography--AppMediumSubtextUnderline { font-family: Inter, sans-serif; font-size: 11px; font-weight: 400; line-height: 17px; text-decoration: underline; }
@media (max-width: 575px) {
.tach-typography--AccentLargeTtl,
.ant-typography.tach-typography--AccentLargeTtl {
font-size: 20px;
line-height: 30px;
}
.tach-typography--AccentRegularM,
.ant-typography.tach-typography--AccentRegularM {
font-size: 12px;
line-height: 20px;
}
}

262
packages/tach-typography/styles/typography-vars.scss Normal file
View File

@@ -0,0 +1,262 @@
// Medium styles
@mixin AppMediumLargeTitle {
/* app/Medium/LargeTitle */
font-family: Inter;
font-size: 38px;
font-style: normal;
font-weight: 500;
line-height: 46px; /* 121.053% */
}
@mixin AppMediumTitle1 {
/* app/Medium/Title1 */
font-family: Inter;
font-size: 28px;
font-style: normal;
font-weight: 500;
line-height: 34px; /* 121.429% */
}
@mixin AppMediumTitle2 {
/* app/Medium/Title2 */
font-family: Inter;
font-size: 22px;
font-style: normal;
font-weight: 500;
line-height: 28px; /* 127.273% */
}
@mixin AppMediumTitle3 {
/* app/Medium/Title3 */
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 26px; /* 130% */
}
@mixin AppMediumHeadline {
/* app/Medium/Headline */
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
}
@mixin AppMediumBody {
/* app/Medium/Body */
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 142.857% */
}
@mixin AppMediumInputs {
/* app/Medium/Inputs */
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 171.429% */
}
@mixin AppMediumSubheadline {
/* app/Medium/Subheadline */
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 18px; /* 128.571% */
}
@mixin AppMediumFootnoteUnderline {
/* app/Medium/Footnote Underline */
font-family: Inter;
font-size: 13px;
font-style: normal;
font-weight: 500;
line-height: 18px;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: none;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}
@mixin AppMediumFootnote {
/* app/Medium/footnote */
font-family: Inter;
font-size: 13px;
font-style: normal;
font-weight: 500;
line-height: 18px; /* 138.462% */
}
@mixin AppMediumCaption {
/* app/Medium/Caption */
font-family: Inter;
font-size: 10px;
font-style: normal;
font-weight: 500;
line-height: 12px; /* 120% */
text-transform: uppercase;
}
@mixin AppMediumCaption2 {
/* app/Medium/Caption2 */
font-family: Inter;
font-size: 8px;
font-style: normal;
font-weight: 500;
line-height: 10px; /* 125% */
text-transform: uppercase;
}
@mixin AppMediumSubtext {
text-align: center;
font-family: Inter;
font-size: 11px;
font-style: normal;
font-weight: 400;
line-height: 17px; /* 154.545% */
}
@mixin AppMediumSubtextUnderline {
font-family: Inter;
font-size: 11px;
font-style: normal;
font-weight: 400;
line-height: 17px;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: none;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}
// Bold Styles
@mixin AppBoldLargeTitle {
@include AppMediumLargeTitle;
font-weight: 700;
}
@mixin AppBoldTitle1 {
@include AppMediumTitle1;
font-weight: 700;
}
@mixin AppBoldTitle2 {
@include AppMediumTitle2;
font-weight: 700;
}
@mixin AppBoldTitle3 {
@include AppMediumTitle3;
font-weight: 700;
}
@mixin AppBoldHeadline {
@include AppMediumHeadline;
font-weight: 700;
}
@mixin AppBoldBody {
@include AppMediumBody;
font-weight: 700;
}
@mixin AppBoldInputs {
@include AppBoldInputs;
font-weight: 700;
}
@mixin AppBoldSubheadline {
@include AppMediumSubheadline;
font-weight: 700;
}
@mixin AppBoldFootnoteUnderline {
@include AppMediumFootnoteUnderline;
font-weight: 700;
}
@mixin AppBoldFootnote {
@include AppMediumFootnote;
font-weight: 700;
}
@mixin AppBoldCaption {
@include AppMediumCaption;
font-weight: 700;
}
@mixin AppBoldCaption2 {
@include AppMediumCaption2;
font-weight: 700;
}
// Accent Styles
@mixin AccentLargeTtl {
font-family: Unbounded;
font-size: 38px;
font-style: normal;
font-weight: 700;
line-height: 52px; /* 136.842% */
@media (max-width: 575px) {
@include AccentFontH1;
}
}
@mixin AccentFontH1 {
/* Accent font/h1 */
font-family: Unbounded;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 30px; /* 150% */
}
@mixin AccentFontH2 {
/* Accent font/h2 */
font-family: Unbounded;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 24px; /* 150% */
}
@mixin AccentFontSubttl {
/* Accent font/subttl */
font-family: Unbounded;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 22px; /* 157.143% */
}
@mixin AccentFontSubttl2 {
/* Accent font/subttl2 */
font-family: Unbounded;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 20px; /* 166.667% */
}
@mixin AccentFontCaption {
/* Accent font/caption */
font-family: Unbounded;
font-size: 9px;
font-style: normal;
font-weight: 700;
line-height: 12px; /* 133.333% */
text-transform: uppercase;
}
@mixin AccentFontCaption2 {
/* Accent font/caption2 */
font-family: Unbounded;
font-size: 7px;
font-style: normal;
font-weight: 700;
line-height: 10px; /* 142.857% */
text-transform: uppercase;
}
@mixin AccentFontRegularM {
/* accent font/regularM */
font-family: Unbounded;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 157.143% */
@media (max-width: 575px) {
@include AccentFontRegularS;
}
}
@mixin AccentFontRegularS {
/* accent font/regularS */
font-family: Unbounded;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 166.667% */
}

10
packages/tach-typography/tsconfig.json Normal file
View File

@@ -0,0 +1,10 @@
{
"extends": "../../tsconfig.base.json",
"compilerOptions": {
"rootDir": "src",
"outDir": "dist",
"types": ["node", "react"]
},
"include": ["src"],
"exclude": ["dist"]
}

25
packages/tach-typography/tsup.config.ts Normal file
View File

@@ -0,0 +1,25 @@
import { defineConfig } from "tsup";
export default defineConfig({
entry: {
"core/index": "src/core/index.ts",
"react/index": "src/react/index.tsx",
"angular/index": "src/angular/index.ts",
},
format: ["esm", "cjs"],
dts: true,
sourcemap: true,
clean: false,
target: "es2022",
minify: false,
treeshake: true,
splitting: false,
external: [
"react",
"react-dom",
"antd",
"@angular/core",
"@angular/common",
"ng-zorro-antd/typography",
],
});